/*
Theme Name: Lead Leap Theme
Author: Your Name
Version: 1.0
*/

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --c-primary:        #2564aa;
  --c-primary-dark:   #2564aa;
  --c-primary-light:  #1257c4;
  --c-secondary:      #2564aa;
  --c-accent:         #2564aa;
  --c-gold:           #ffbd23;
  --c-gold-soft:      #ffc107;
  --c-gold-dark:      #ffbd23;
  --c-eyebrow:        #1a6fc4;

  /* --- Neutrals --------------------------------------------------------- */
  --c-ink:            #0f172a;
  --c-body:           #334155;
  --c-muted:          #64748b;
  --c-line:           #e2e8f0;
  --c-white:          #ffffff;
  --c-surface:        #ffffff;
  --c-surface-alt:    #f4f8fb;
  --c-surface-blue:   #e8f4ff;
  --c-dark:           #060f20;

  /* Footer palette */
  --c-footer-bg:      #030914;
  --c-footer-text:    #94a3b8;
  --c-footer-dim:     #8595ab;

  /* --- Fluid type scale ------------------------------------------------- */
  --fs-xs:    clamp(0.75rem,  0.73rem + 0.10vw, 0.813rem);
  --fs-sm:    clamp(0.813rem, 0.79rem + 0.12vw, 0.875rem);
 --fs-base:  clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  --fs-md:    clamp(1rem,     0.96rem + 0.20vw, 1.125rem);
  --fs-lg:    clamp(1.125rem, 1.06rem + 0.30vw, 1.313rem);
  --fs-xl:    clamp(1.25rem,  1.13rem + 0.55vw, 1.625rem);
  --fs-h2:    clamp(1.5rem,   1.18rem + 1.50vw, 2.375rem);
  --fs-h1:    clamp(2rem,     1.40rem + 2.80vw, 3.375rem);

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Vertical rhythm for every full-width section */
  --section-y:  clamp(56px, 7vw, 104px);
  --grid-gap:   clamp(20px, 2.4vw, 32px);

  /* --- Container -------------------------------------------------------- */
  --container:  1200px;
  --gutter:     clamp(16px, 4vw, 28px);

  /* --- Radii ------------------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --sh-sm:    0 4px 14px rgba(15, 23, 42, 0.06);
  --sh-md:    0 10px 30px rgba(15, 23, 42, 0.08);
  --sh-lg:    0 20px 44px rgba(14, 52, 110, 0.16);
  --sh-brand: 0 10px 26px rgba(13, 71, 161, 0.28);

  /* --- Interaction -------------------------------------------------------
     One accent, one lift, one curve — every card hover on the page is built
     from these, so the whole site reads as a single interaction language. */
  --c-hover:       #ffbd23;                      /* the accent            */
  --c-hover-tint:  #ffd15c;                      /* top of its gradient   */
  --c-hover-soft:  rgba(255, 189, 35, 0.42);     /* its halo / glow       */
  --sh-hover:      0 16px 36px rgba(15, 23, 42, 0.13);   /* neutral lift  */
  --sh-hover-warm: 0 10px 26px rgba(255, 189, 35, 0.38); /* warm lift     */
  --hover-lift:    -5px;
  --dur-hover:     0.35s;
  --ease-hover:    cubic-bezier(0.25, 1, 0.5, 1);
  /* Recolour a flat-white PNG/WebP glyph. Values measured, not guessed:
     gold resolves to #ffbd26, navy to #1b3867 (7:1 on the gold circle). */
  --f-icon-gold: brightness(0) saturate(100%) invert(79%) sepia(55%)
                 saturate(1250%) hue-rotate(337deg) brightness(104%) contrast(100%);
  --f-icon-navy: brightness(0) saturate(100%) invert(19%) sepia(29%)
                 saturate(1969%) hue-rotate(186deg) brightness(94%) contrast(94%);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.25s;
  --dur-base:  0.35s;
  --dur-slow:  0.7s;

   --motion-fast:          220ms;
  --motion-normal:        700ms;
  --motion-slow:         1000ms;

  --motion-distance-sm:    16px;
  --motion-distance-md:    32px;
  --motion-distance-lg:    56px;

  --motion-stagger:       120ms;
  --motion-stagger-mobile: 60ms;
  --motion-delay-max:     640ms;   /* ceiling, so late items never crawl in */

  --ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --reveal-duration:    var(--motion-normal);
  --reveal-distance:    var(--motion-distance-md);   /* vertical travel   */
  --reveal-distance-x:  var(--motion-distance-lg);   /* horizontal travel */
  --reveal-scale:       0.97;
  --reveal-stagger:     var(--motion-stagger);
  --reveal-delay-max:   var(--motion-delay-max);
  --reveal-easing:      var(--ease-enter);

  /* --- Chrome ----------------------------------------------------------- */
  --header-h:  84px;
  --logo-gap:  clamp(32px, 4vw, 56px);
}
/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ol, ul {
  margin: 0;
  padding: 0;
}
#main {overflow: hidden;}
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-surface);
  overflow-x: hidden;
  overflow-x: clip;             
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
picture > source { display: none; }

ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) ease;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* One consistent, visible focus ring everywhere. */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Available to assistive tech, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2000;
  transform: translate(-50%, -120%);
  padding: 12px 22px;
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }
/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4.5vw, 56px);
  text-align: center;
}
/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.11em;
  color: #000;
}
.section-heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #2564aa;
  text-wrap: wrap;
  margin-bottom: var(--sp-4, 1.5rem); 
}
.section-txt {color: #000;}
.section-heading span { color: var(--c-secondary); }
/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) ease,
  background var(--dur-base) ease,
  color var(--dur-base) ease,
  border-color var(--dur-base) ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  z-index: -1;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: transform 0.65s var(--ease-out);
}
.btn:hover {
  background: #ffbd23 !important;
  color: #fff !important; 
  border-color: #ffbd23 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(243, 181, 7, 0.35); 
}
.btn:hover::before { transform: translateX(380%) skewX(-18deg); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
  background: #2564aa;
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.25);
}
.send-btn {background: #ffbd23;
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(184, 150, 16, 0.25);}
.send-btn:hover {background: #2564aa!important;
  color: var(--c-white)!important;
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.25)!important;
  border-color: #0e4baa!important;}

/* .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
} */
  .btn-ghost {background: #2564aa;
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.25);}
.btn-gold {
  display: inline-block;         
  padding: 12px 28px;
  border-radius: 30px;
  background: var(--c-gold);
  color: #000000;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(244, 181, 7, 0.3);
}
.btn-gold:hover {
  background: #0063ae!important;
  color: #fff!important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px #0063ae;
}
/* ==========================================================================
   6. ICON SYSTEM
   One component, sized and themed by custom properties.
   ========================================================================== */
.icon-box {
  --ib-size:   clamp(48px, 5vw, 56px);
  --ib-inset:  24%;
  /* --ib-bg:     linear-gradient(135deg, #ffcb2e, var(--c-gold)); */
  --ib-shadow: 0 8px 20px rgba(244, 181, 7, 0.30);
  --ib-shadow-hover: 0 14px 32px rgba(244, 181, 7, 0.42);
  --ib-glow:   rgba(244, 181, 7, 0.35);
  --ib-filter: brightness(0) saturate(100%) invert(10%) sepia(20%) saturate(2000%) hue-rotate(190deg);

  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--ib-size);
  height: var(--ib-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ib-bg);
  box-shadow: var(--ib-shadow);
  color: var(--c-white);
  transition: transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) ease;
}
/* Soft halo that blooms on hover. */
.icon-box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #2564aa;
  transition: box-shadow 0.45s ease;
}
/* Descendant, not child: the icons sit inside a <picture> wrapper. */
.icon-box img {
  width: calc(100% - var(--ib-inset) * 2);
  height: auto;
  object-fit: contain;
  filter: var(--ib-filter);
  transition: transform var(--dur-base) var(--ease-out);
}
.icon-box > svg {
  width: 46%;
  height: 46%;
  transition: transform var(--dur-base) var(--ease-out);
}
/* --- Size variants --- */
.icon-box--md { --ib-size: clamp(52px, 5vw, 60px); }
.icon-box--sm { --ib-size: clamp(42px, 4vw, 46px); --ib-inset: 22%; }

/* --- Theme variants --- */
.icon-box--brand {
  --ib-bg: linear-gradient(135deg, #2564aa, #2564aa);
  --ib-shadow: 0 8px 20px rgba(14, 79, 168, 0.28);
  --ib-shadow-hover: 0 14px 32px rgba(14, 79, 168, 0.40);
  --ib-glow: rgba(29, 110, 216, 0.35);
  --ib-filter: brightness(0) invert(1);
}

.icon-box--onDark {
  --ib-bg: linear-gradient(135deg, #2f7fd4, #17558f);
  --ib-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  --ib-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.5);
  --ib-glow: rgba(56, 189, 248, 0.4);
  --ib-filter: brightness(0) invert(1);}

  /* Hover gated behind a real pointer so touch never sticks in :hover. */
@media (hover: hover) and (pointer: fine) {
  .icon-box:hover,
  .vm-card:hover      .icon-box,
  .service-card:hover .icon-box,
  .feature-card:hover .icon-box,
  .contact-item:hover .icon-box {transform: translateY(-3px) scale(1.04); box-shadow: 0 3px 22px rgb(14 79 168 / 10%);}
  .icon-box:hover::after,
  .vm-card:hover      .icon-box::after,
  .service-card:hover .icon-box::after,
  .feature-card:hover .icon-box::after,
  .contact-item:hover .icon-box::after {box-shadow: 0 0 18px 3px #2564aa26;}
  .feature-card:hover .icon-box::after {box-shadow: 0 0 18px 3px #2564aa;}
  .icon-box:hover img,         .icon-box:hover > svg,
  .vm-card:hover .icon-box img,
  .service-card:hover .icon-box img,
  .feature-card:hover .icon-box > svg,
  .contact-item:hover .icon-box img { transform: scale(1.08); }
}
html.has-anim .reveal:not(.reveal-done),
html.has-anim [data-animate]:not(.reveal-done) {
  transition: opacity var(--reveal-duration) var(--reveal-easing),
  transform var(--reveal-duration) var(--reveal-easing);
  transition-delay: var(--d, 0s);
}
html.has-anim .reveal:not(.is-visible),
html.has-anim [data-animate]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(var(--m-x, 0), var(--m-y, 0), 0)
  scale(var(--m-s, 1))
  rotate(var(--m-r, 0deg));
}
/* --- legacy `.reveal` vocabulary (unchanged behaviour) ------------------- */
html.has-anim .reveal            { --m-y: var(--reveal-distance); }
html.has-anim .reveal--up        { --m-y: var(--reveal-distance); --m-x: 0; }
html.has-anim .reveal--left      { --m-x: calc(var(--reveal-distance-x) * -1); --m-y: 0; }
html.has-anim .reveal--right     { --m-x: var(--reveal-distance-x); --m-y: 0; }
html.has-anim .reveal--zoom,
html.has-anim .reveal--scale     { --m-s: var(--reveal-scale); --m-y: 0; }
html.has-anim .reveal--fade      { --m-x: 0; --m-y: 0; }
/* --- canonical `data-animate` vocabulary -------------------------------- */
html.has-anim [data-animate="fade"]         { --m-x: 0; --m-y: 0; }
html.has-anim [data-animate="fade-up"]      { --m-y: var(--motion-distance-md); }
html.has-anim [data-animate="fade-down"]    { --m-y: calc(var(--motion-distance-md) * -1); }
html.has-anim [data-animate="fade-left"]    { --m-x: calc(var(--motion-distance-lg) * -1); }
html.has-anim [data-animate="fade-right"]   { --m-x: var(--motion-distance-lg); }
html.has-anim [data-animate="subtle-scale"] { --m-s: 0.96; }
html.has-anim [data-animate="panel-left"] {
  --m-x: calc(var(--motion-distance-md) * -1);
  --m-r: -2.5deg;
  transform-origin: left bottom;
}
html.has-anim [data-animate="panel-right"] {
  --m-x: var(--motion-distance-md);
  --m-r: 2.5deg;
  transform-origin: right bottom;
}
@media (max-width: 1024px) {
  :root {
    --motion-normal:    520ms;
    --motion-stagger:    80ms;
    --motion-delay-max: 400ms;
  }
  html.has-anim [data-animate],
  html.has-anim .reveal {
    --m-x: 0;
    --m-r: 0deg;
  }
  /* What used to travel sideways or rotate now settles a short way vertically. */
  html.has-anim [data-animate="fade-left"],
  html.has-anim [data-animate="fade-right"],
  html.has-anim [data-animate="panel-left"],
  html.has-anim [data-animate="panel-right"],
  html.has-anim .reveal--left,
  html.has-anim .reveal--right {
    --m-y: 10px;
  }
}
/* ==========================================================================
   8. HEADER & NAVIGATION
   ========================================================================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: top var(--dur-base) ease, background-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
body.admin-bar #header {
  top: 32px;
}
#header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px; 
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgb(0 0 0 / 69%) 55%, rgb(0 0 0 / 0%) 100%);
  transition: opacity var(--dur-base) ease;
  z-index: -1;
}
#header.scrolled::before {
  opacity: 0;
}
#header.scrolled {
  background: var(--c-white);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.09);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: clamp(12px, 1.6vw, 18px);
  transition: padding-block var(--dur-base) ease;
}
#header.scrolled .nav-container { 
  padding-block: 10px; 
}
.logo { 
  display: block; 
  flex: 0 0 auto; 
}
.logo-img {
  height: clamp(60px, 3.4vw, 55px);
  width: auto;
  object-fit: contain;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

/* WordPress Generated UL List */
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav-link,
.nav-menu li a {
  position: relative;
  display: inline-block;
  padding-block: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) ease, transform var(--dur-base) ease;
}

.nav-link::after,
.nav-menu li a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-link:hover,
.nav-link.is-active,
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a { 
  color: #2564aa; 
}

.nav-link:hover::after,
.nav-link.is-active::after,
.nav-menu li a:hover::after,
.nav-menu li.current-menu-item > a::after { 
  transform: scaleX(1); 
}

body:not(.nav-open) #header.scrolled .nav-link,
body:not(.nav-open) #header.scrolled .nav-menu li a { 
  color: var(--c-primary); 
}

body:not(.nav-open) #header.scrolled .nav-link::after,
body:not(.nav-open) #header.scrolled .nav-menu li a::after { 
  background: var(--c-primary); 
}

body:not(.nav-open) #header.scrolled .nav-link:hover,
body:not(.nav-open) #header.scrolled .nav-link.is-active,
body:not(.nav-open) #header.scrolled .nav-menu li a:hover,
body:not(.nav-open) #header.scrolled .nav-menu li.current-menu-item > a { 
  color: var(--c-secondary); 
}

.hamburger {
  display: none;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: var(--r-sm);
  position: relative;
  z-index: 1002;display: none; 
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 0; 
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  position: relative;
  z-index: 1002;
  cursor: pointer;
}
.hamburger-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
}
.hamburger-bar {
 display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--c-white);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) ease,
              background-color var(--dur-base) ease;
}
body:not(.nav-open) #header.scrolled .hamburger-bar { 
  background: var(--c-primary); 
}
body:not(.nav-open) #header.scrolled .hamburger-bar { 
  background: var(--c-primary); 
}
body.nav-open .hamburger-bar:nth-child(1) { 
  transform: translateY(7px) rotate(45deg); 
}
body.nav-open .hamburger-bar:nth-child(2) { 
  opacity: 0; 
  transform: scaleX(0); 
}
body.nav-open .hamburger-bar:nth-child(3) { 
  transform: translateY(-7px) rotate(-45deg); 
}
html.is-scroll-locked body {
  position: fixed;
  top: var(--lock-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding-right: var(--lock-gutter, 0px);
}

html.is-scroll-locked #header { 
  padding-right: var(--lock-gutter, 0px); 
}

/* --- Drawer backdrop --- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(6, 15, 32, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}

.nav-backdrop[hidden] { display: none; }
.nav-backdrop:not([hidden]) { will-change: opacity; }
.nav-backdrop.is-shown { opacity: 1; }


/* ==========================================================================
   9. HERO
   Layer order: background photo → diagonal panel → scrim → shape → content.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 88vh;
  min-height: 88svh; 
  padding-block: calc(var(--header-h) + clamp(48px, 7vw, 90px)) clamp(80px, 10vw, 130px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: 2;
  /* width: min(58%, 940px); */
  backface-visibility: hidden;
}
.hero-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
/*   clip-path: polygon(25% 0, 100% 0, 100% 100%, 55% 100%); */
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 50% 100%);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #141414;
  opacity: 0.82;
}
.hero-shape {
  position: absolute;
  left: 42%;
  bottom: -7%;
  z-index: 3;
  width: min(440px, 40vw);
  height: min(330px, 40vw);
  /* clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */
}
.hero-shape img {
  width: 92%;
  height: 92%;
  object-fit: cover;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 8 C 54 8 57 13 60 18 L 92 76 C 96 83 91 92 83 92 L 17 92 C 9 92 4 83 8 76 L 40 18 C 43 13 46 8 50 8 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 8 C 54 8 57 13 60 18 L 92 76 C 96 83 91 92 83 92 L 17 92 C 9 92 4 83 8 76 L 40 18 C 43 13 46 8 50 8 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-container { position: relative; z-index: 4; }
.hero-content   { max-width: 620px; }
.hero-title { margin-bottom: var(--sp-5); font-size: clamp(2rem, 1.40rem + 1.80vw, 3.275rem);font-weight: 800; line-height: 1.5;letter-spacing: -0.02em; color: var(--c-white);text-wrap: balance;}
.hero-title span { color: var(--c-gold); }
.hero-desc {max-width: 54ch; margin-bottom: var(--sp-8);  font-size: var(--fs-md);  line-height: 1.7;  color: rgba(255, 255, 255, 0.88);}
.hero-buttons { display: flex;flex-wrap: wrap;gap: var(--sp-4);}
.hero-buttons .btn { padding-block: 1rem; }
@keyframes heroPanelSlideLeftToRight {
  0% {
    opacity: 0;
    transform: translate3d(-35%, 0, 0); 
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes heroIn {from { opacity: 0; transform: translate3d(0, var(--reveal-distance, 30px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }}
@keyframes headerIn {from { opacity: 0; transform: translate3d(0, -6px, 0); }  to { opacity: 1; transform: translate3d(0, 0, 0); }}
html.has-anim .hero-anim {opacity: 0; animation: heroIn var(--reveal-duration, 0.8s) var(--reveal-easing, ease-out) forwards;}
html.has-anim .hero-title { animation-delay: 0.10s; }
html.has-anim .hero-desc { animation-delay: 0.20s; width:90%;}
html.has-anim .hero-buttons { animation-name: none; opacity: 1; }
html.has-anim .hero-buttons .btn {opacity: 0;  animation: heroIn var(--reveal-duration, 0.8s) var(--reveal-easing, ease-out) both;}
html.has-anim .hero-buttons .btn:nth-of-type(1) { animation-delay: 0.30s; }
html.has-anim .hero-buttons .btn:nth-of-type(2) { animation-delay: 0.38s; }
html.has-anim .hero-panel {animation: heroPanelSlideLeftToRight 1.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.has-anim .hero-shape {animation: heroShapeDropFromTop 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
html.has-anim .hero-panel.is-animating,
html.has-anim .hero-shape.is-animating { will-change: transform, opacity; }
html.has-anim .logo,
html.has-anim .nav,
html.has-anim .hamburger {animation: headerIn 420ms var(--reveal-easing, ease-out) both;}
html.has-anim .nav { animation-delay: 0.06s; }
html.has-anim .hamburger { animation-delay: 0.06s; }
@keyframes heroShapeDropFromTop {0% { opacity: 0; transform: translate3d(0, -60vh, 0);}
  100% { opacity: 1; transform: translate3d(0, 0, 0);} }
/* client section  */
.clients-bar {
  --d: 0.55s;
  --logo-gap: 20px;
  position: relative;
  z-index: 5;
  padding-block: clamp(15px, 2vw, 15px); 
  background: linear-gradient(135deg, #2b6fb8, #1f5896);
  border-radius: 0 0 var(--r-xl, 16px) var(--r-xl, 16px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.clients-flex {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.clients-title {
  flex: 0 0 auto;
  font-size: var(--fs-md, 1.125rem);
  font-weight: 700;
  color: var(--c-white, #ffffff);
  white-space: nowrap;
}
.marquee {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--logo-gap) / 2), 0, 0); }
}

.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.logo-item::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.25) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: inherit;
  transition: transform 0.5s ease-in-out;
  pointer-events: none;
}
.logo-item:hover::before {
  transform: translateY(200%);
}
.logo-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.logo-item img {
  height: clamp(28px, 3.5vw, 44px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.logo-item:hover img {
  opacity: 1;
  transform: scale(1.04);
}
/* ==========================================================================
   11. ABOUT
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 50px);
  align-items: stretch; /* Stretches both left (image) and right (content) to equal height */
}
.about-media {
  position: relative;
  height: 100%;
  min-height: 100%;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  box-shadow: var(--sh-md, 0 10px 30px rgba(0, 0, 0, 0.08));
}
.about-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: mediaFloat 4s ease-in-out infinite alternate;
  /* No `transition: transform` here: nothing outside this animation ever
     changes the transform, and the running animation owns the property
     anyway, so the transition only ever cost a redundant style resolution. */
}
@keyframes mediaFloat {
  0% { transform: translateY(-8px) scale(1.02); }
  100% { transform: translateY(8px) scale(1.02); }
}
.about-content .section-heading { 
  margin-bottom: var(--sp-4, 1.5rem); 
}
.about-text {
  margin-bottom: clamp(24px, 3vw, 34px);
  color: var(--c-body);
}
.about-text strong { 
  color: var(--c-ink); 
  font-weight: 700; 
}
.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5, 1.5rem);
}
.vm-card {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 2.4vw, 28px);
  background: #eaf3ff; 
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
  box-shadow 0.4s ease;
}
.vm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #2563a9e0; 
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.vm-card .icon-box,
.vm-card h3,
.vm-card p {
  position: relative;
  z-index: 2;
}
.vm-card .icon-box--md {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #2563a9; 
  border-radius: 50%;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(37, 99, 169, 0.25);
  transition: background-color 0.35s ease, transform 0.35s ease;
}
.vm-card .icon-box img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1); 
  transition: filter 0.35s ease, transform 0.4s ease;
}
.vm-card h3 {
  margin-bottom: 0.5rem;
  font-size: var(--fs-md, 1.125rem);
  font-weight: 700;
  color: #2563a9; 
  transition: color 0.35s ease;
}
.vm-card p {
  font-size: var(--fs-sm, 0.9375rem);
  line-height: 1.55;
  color: #4a5568; 
  transition: color 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .vm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(37, 99, 169, 0.3);
  }
  .vm-card:hover::before {
    transform: scaleX(1);
  }
  .vm-card:hover .icon-box--md {
    background-color: #ffffff;
    transform: scale(1.08);
  }
  .vm-card:hover .icon-box img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(1450%) hue-rotate(190deg) brightness(90%) contrast(92%);
}
  .vm-card:hover h3 {
    color: #ffffff;
  }
  .vm-card:hover p {
    color: #e2e8f0;
  }
}

.section-heading span:hover {
  color: #000;
}
/* ==========================================================================
   12. SERVICES
   ========================================================================== */
 .services-section {
  background: #f0f7ff; 
  padding: clamp(48px, 6vw, 80px) 0;
}
.services-grid {
  display: grid; 
  grid-template-columns: 1fr 1.3fr 1fr; 
  grid-template-rows: repeat(2, 1fr); 
  gap: clamp(20px, 2.5vw, 28px);
  align-items: stretch;
}
.service-card,
.service-media {
  position: relative;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden; 
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.service-card {
  isolation: isolate; 
  display: flex;
  flex-direction: column; 
  justify-content: flex-start; 
  padding: clamp(24px, 2.2vw, 32px);
  background-image: linear-gradient(0deg, #193d67 0%, #3783c3 100%);
  color: #ffffff;
}
.service-card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--card-hover-bg, #ffffff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-grid > *:nth-child(1) .service-card-bg {
  transform: scaleX(0);
  transform-origin: left center;
}
.services-grid > *:nth-child(3) .service-card-bg {
  transform: scaleY(0);
  transform-origin: center top;
}
.services-grid > *:nth-child(4) .service-card-bg {
  transform: scaleY(0);
  transform-origin: center bottom;
}
.services-grid > *:nth-child(6) .service-card-bg {
  transform: scaleX(0);
  transform-origin: right center;
}
.service-card .service-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  background-color: #ffbd23;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(255, 189, 35, 0.4);
  flex-shrink: 0;
  transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), 
  box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), 
  transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-icon-box::after {box-shadow: 0 8px 20px rgba(244, 181, 7, 0.30);}
.service-card .service-icon-box img { 
  width: 24px; 
  height: 24px; 
  object-fit: contain; 
  filter: brightness(0) invert(1); 
  transition: filter 0.45s ease;
}
.service-card h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 1.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  transition: color var(--dur-hover) var(--ease-hover);
}
.service-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgb(255 255 255);
  transition: color var(--dur-hover) var(--ease-hover);
}
/* Centre feature block — sits flush with the top of the cards beside it. */
.service-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  text-align: center;
  height: 100%;
  padding: 0 clamp(24px, 2.2vw, 32px);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}
.service-feature .eyebrow {
  margin-bottom: 0.6rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: #0f172a;
  text-transform: none;
  letter-spacing: 0.5px;
}
.service-feature h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}
.service-feature p {
  margin-bottom: 1.25rem;
  font-size: var(--fs-base);
  line-height: 1.35;
  color: #010101;
}
.btn-service-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background-color: #2563a9;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 99, 169, 0.3);
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.service-media {
  position: relative;
  width: 100%;
  height: 100%;
  background: #e2e8f0;
}
.service-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card {
  /* Same hue as before — #ffbd23 — just no longer painted solid, so the blue
     gradient underneath reads through it. Dial the wash with one number:
     1 = the solid fill, lower = more of the card showing through. */
  --card-hover-alpha: 0.85;
  --card-hover-bg: rgb(255 189 35 / var(--card-hover-alpha));
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--sh-hover);
    opacity: 1;
  }
  .services-grid > *:nth-child(1):hover .service-card-bg,
  .services-grid > *:nth-child(3):hover .service-card-bg,
  .services-grid > *:nth-child(4):hover .service-card-bg,
  .services-grid > *:nth-child(6):hover .service-card-bg {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
  /* Light text over the amber wash. */
  .service-card:hover h3 { color: #f0f7ff;}
  .service-card:hover p  { color: #f0f7ff; }
  /* White circle on the amber wash: the warm halo plus a hairline ring is
     what keeps it reading as a circle. */
  .service-card:hover .service-icon-box {
    background-color: #ffffff;
    box-shadow: var(--sh-hover-warm), 0 0 0 1px rgba(255, 189, 35, 0.35);
    transform: scale(1.05);
  }
  .service-card:hover .service-icon-box img { filter: var(--f-icon-gold); }
  .service-feature .btn-service-pill:hover {background-color: #1d4ed8; transform: translateY(-2px); }
  .service-media:hover {box-shadow: var(--sh-hover);}
  .service-media:hover img {transform: scale(1.05); }
}
  /* Keyframes */
@keyframes slideCenterToLeft {
  0% { opacity: 0; transform: translate3d(40px, 0, 0); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideCenterToRight {
  0% { opacity: 0; transform: translate3d(-40px, 0, 0); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes centerAnchorFade {
  0% { opacity: 0; transform: scale(0.96); } 
  100% { opacity: 1; transform: scale(1); }
}
/* ==========================================================================
   13. WHY CHOOSE US / PROCESS
   ========================================================================== */
.process-steps {
  position: relative;
  padding-top: clamp(50px, 4.5vw, 70px) !important;
}
.process-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 30%);
  background-color: #ffffff;
  color: #0f172a;
  padding: 8px 22px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  z-index: 10;
}
.process-section {
  position: relative;
  background-color: var(--c-surface, #f0f7ff);
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 0;
}
.process-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.process-section > .container {
  position: relative;
  z-index: 2;
}
.process-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.corner-decor {
  position: absolute;
  width: clamp(120px, 14vw, 190px);
  aspect-ratio: 1;
  border-top: 2px solid rgba(244, 181, 7, 0.55);
  border-left: 2px solid rgba(244, 181, 7, 0.55);
  pointer-events: none;
  z-index: 1;
}
.corner-decor--tl { top: 26px; left: -44px; transform: rotate(-15deg); }
.corner-decor--br { bottom: 26px; right: -44px; transform: rotate(165deg); }
.process-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap, 32px);
  align-items: stretch;
}
.process-steps {
  --pad: clamp(20px, 2.6vw, 34px);
  --item-pad: 14px;
  --badge: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(28px, 3.4vw, 42px) var(--pad);
  background: var(--c-surface-blue, #e6f0fa);
  border-radius: var(--r-xl, 24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.process-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px var(--item-pad);
  border-radius: var(--r-md, 12px);
  transition: background-color var(--dur-hover) var(--ease-hover),
  box-shadow var(--dur-hover) var(--ease-hover),
  transform var(--dur-hover) var(--ease-hover);
}
.process-number-wrapper {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badge);
  height: var(--badge);
  min-width: var(--badge);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: drop-shadow(0 4px 10px rgba(37, 99, 169, 0.15));
  z-index: 3;
}
.process-number-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  pointer-events: none;
}
.process-number-wrapper::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: transparent;
  pointer-events: none;
}
.process-number {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #0063ae;
  color: #ffffff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  transition: transform var(--dur-hover) var(--ease-hover),
              background-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.process-steps::before {
  content: "";
  position: absolute;
  left: calc(var(--pad) + var(--item-pad) + var(--badge, 44px) / 2 - 1px);
  top: clamp(48px, 5.5vw, 64px);
  bottom: clamp(48px, 5.5vw, 64px);
  width: 2px;
  background: #ffffff; 
  z-index: 1;
}
.process-text {
  font-size: var(--fs-base, 1rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink, #0f172a);
  transition: color 0.3s ease;
}
/* Same hover language as the feature cards opposite, so the two columns of
   this section behave as one component rather than two. */
@media (hover: hover) and (pointer: fine) {
  .process-item:hover {
    background: #ffffff;
    box-shadow: var(--sh-hover);
    transform: translateY(-3px);
  }
  .process-item:hover .process-number {
    background: var(--c-hover);
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: var(--sh-hover-warm);
  }
  .process-item:hover .process-text {
    color: #2564aa;
  }
}
.process-features {
  --offset: clamp(0px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 20px);
  height: 100%;
  padding: clamp(28px, 3.4vw, 42px) clamp(20px, 2.6vw, 30px);
  background: var(--c-surface-blue, #e6f0fa);
  border-radius: var(--r-xl, 24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.feature-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: var(--r-md, 12px);
  box-shadow: 0 8px 20px rgba(0, 102, 204, 0.08);
  transition: transform var(--dur-hover) var(--ease-hover),
  box-shadow var(--dur-hover) var(--ease-hover);
}
.feature-card .icon-box {
  transition: box-shadow var(--dur-hover) var(--ease-hover),
  transform var(--dur-hover) var(--ease-hover);
}
.feature-card .icon-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-hover-tint), var(--c-hover));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-hover);
}
/* Positioned ::before would otherwise paint over the static glyph. */
.feature-card .icon-box img {
  position: relative;
  z-index: 1;
  transition: filter var(--dur-hover) var(--ease-hover),
  transform var(--dur-base) var(--ease-out);
}
.feature-card--right { margin-left: var(--offset); }
.feature-card--left  { margin-right: var(--offset); }
.feature-text {
    font-size: var(--fs-base);
    line-height: 1.5;
    color: #010101;
}
.feature-text strong {
  display: inline;
  font-weight: 700;
  color: #0f172a;
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--sh-hover);
  }
  .feature-card:hover .icon-box {
    box-shadow: var(--sh-hover-warm);
    transform: translateY(-2px) scale(1.05);
  }
  .feature-card:hover .icon-box::before { opacity: 1; }
  /* .feature-card:hover .icon-box img { filter: var(--f-icon-navy); } */
  .feature-card:hover .icon-box::after { box-shadow: 0 0 18px 3px var(--c-hover-soft); }
}
.process-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px); /* Ensures safe middle gap */
  align-items: stretch;
}
.industries-section { background: var(--c-surface-alt); }
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.industry-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  transition: transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) ease,
  opacity var(--dur-slow) ease;
}
.industry-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.industry-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2vw, 24px);
  color: var(--c-white);
  text-align: center;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.55) 45%, rgba(15, 23, 42, 0.15) 100%);
  transition: background var(--dur-base) ease;
}
.industry-overlay h3,
.industry-overlay p {
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.industry-overlay h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  transition: color var(--dur-base) ease;
}
.single-line-heading {
  white-space: nowrap;
}
.industry-overlay p {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.industry-card:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}
@supports not (aspect-ratio: 1 / 1) {
  .industry-card { min-height: 210px; }
}
@media (hover: hover) and (pointer: fine) {
  .industry-overlay p {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease-out),
    opacity 0.35s ease,
    margin-top 0.45s var(--ease-out),
    color var(--dur-base) ease;
  }
  .industry-card:hover,
  .industry-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
  }
  .industry-card:hover img,
  .industry-card:focus-visible img { transform: scale(1.03); }
  .industry-card:hover .industry-overlay,
  .industry-card:hover .industry-overlay h3 {color: #f4b507!important;}
  .industry-card:hover .industry-overlay p {color: #f4b507!important;}
  .industry-card:hover .industry-overlay h3,
  .industry-card:focus-visible .industry-overlay h3 { color: var(--c-ink); }
  .industry-card:hover .industry-overlay p,
  .industry-card:focus-visible .industry-overlay p {
    max-height: 12rem;
    margin-top: var(--sp-2);
    opacity: 1;
    color: #1e2a44;
  }
}
@media (hover: none), (pointer: coarse) {
  .industry-overlay p {
    max-height: none;
    margin-top: var(--sp-2);
    opacity: 1;
    overflow: visible;
  }
}
/* ==========================================================================
   15. CTA
   ========================================================================== */
.cta-section {
  position: relative;
  z-index: 50; 
  padding-top: clamp(60px, 8vw, 100px); 
  padding-bottom: 0;
  background: transparent; 
}
.cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8, 2rem);
    width: 91%;
    max-width: 1150px;
    margin-inline: auto;
    padding: clamp(40px, 5.2vw, 78px) clamp(24px, 4vw, 50px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    margin-bottom: 0;
    background-color: #2563a9;
}
.cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(120deg, #2564aa00, rgba(37, 99, 169, 0.65)), url('images/meeting.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color;
    opacity: 0.3;
    filter: blur(0px);
    z-index: 0;
}
.cta-box > * {
    position: relative;
    z-index: 1;
}
.cta-content {
  max-width: min(34rem, 52%);
  z-index: 3;
}
.cta-content h2 {
  margin-bottom: var(--sp-4, 1rem);
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  color: #f3b507; /* Gold Accent */
  text-wrap: balance;
}
.cta-content p {
  margin-bottom: var(--sp-6, 1.5rem);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.6;
  color: #e2e8f0;
}
.cta-image {
  position: absolute;
  right: 5%;
  bottom: -3px;
  width: 30%;
  max-width: 410px;
  height: auto;
  pointer-events: none;
  z-index: 10; 
}
.cta-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(-10px 15px 25px rgba(0, 0, 0, 0.3));
}
@keyframes ladyRiseUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -8px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ladyIdleFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}
html.has-anim .cta-image {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
}

/* html.has-anim .cta-box.is-visible .cta-image {
  animation: ladyRiseUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards,
  ladyIdleFloat 0s ease-in-out 0.0s infinite;
} */
html.has-anim .cta-box.is-visible .cta-image {
  animation: ladyRiseUp 0.1s cubic-bezier(0.0, 1, 0.0, 1) 0.0s forwards,
  ladyIdleFloat 0s ease-in-out 0.0s infinite;
}
html.has-anim .cta-box:not(.reveal-done) .cta-content > * {
  transition: opacity var(--reveal-duration, 0.8s) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1)),
  transform var(--reveal-duration, 0.8s) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1));
}
html.has-anim .cta-content > * { opacity: 0; transform: translateY(30px); }
html.has-anim .cta-box.is-visible .cta-content > * { opacity: 1; transform: none; }
html.has-anim .cta-box.is-visible .cta-content > :nth-child(1) { transition-delay: 0.06s; }
html.has-anim .cta-box.is-visible .cta-content > :nth-child(2) { transition-delay: 0.14s; }
html.has-anim .cta-box.is-visible .cta-content > :nth-child(3) { transition-delay: 0.22s; }
/* ==========================================================================
   16. FOOTER
   ========================================================================== */
footer#contact {
  position: relative;
  z-index: 1; 
  margin-top: -100px; 
  padding-top: clamp(140px, 12vw, 140px); 
  padding-bottom: var(--sp-6);
  background-color: var(--c-footer-bg, #040d1a);
  background-image: url('images/footer-background-fallback.jpg');
  background-image: image-set(url('images/footer-background.webp') type('image/webp'), url('images/footer-background-fallback.jpg') type('image/jpeg') );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--c-footer-text, #ffffff);
  font-size: var(--fs-sm);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.footer-container {
  position: relative;
  z-index: 2;
}
.footer-about p {color: #fff;}
.footer-links li {color: #fff;}
.footer-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(180deg, rgba(3, 9, 20, 0.88), rgb(3 9 20 / 72%));
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.9fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(32px, 4vw, 48px);
}
.footer-logo { display: inline-block; margin-bottom: var(--sp-4); }
.footer-logo img {
  width: clamp(160px, 18vw, 210px);
  height: auto;
  object-fit: contain;
}
.footer-about p { max-width: 42ch; line-height: 1.7; }
.footer-heading {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-white);
}
.footer-links li { margin-bottom: var(--sp-3); }
.footer-links a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
  transition: color var(--dur-base) ease, transform var(--dur-base) ease;
}
.footer-links a:hover { color: var(--c-accent); transform: translateX(3px); }
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-4);
}
.contact-item .icon-box {
  --ib-size: 38px;
  min-width: 38px;
  background: var(--c-secondary);
}
.contact-item .icon-box img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.contact-body { min-width: 0; }
.contact-body strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-white);
}
.contact-body a {
  display: inline-block;
  padding-block: 3px;
  margin-block: -3px;
  line-height: 1.4;
  color: #fff;
  overflow-wrap: anywhere;
}
.contact-body a:hover { color: var(--c-accent); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: right;     
  gap: 12px;
  padding-top: var(--sp-6);
  font-size: 13px;
  text-align: center;
  color: #fff;
}
/* ==========================================================================
   17. BACK TO TOP
   ========================================================================== */
.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 800;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #2564aa;
  color: var(--c-white);
  box-shadow: var(--sh-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity var(--dur-base) ease,
  transform var(--dur-base) var(--ease-out),
  visibility var(--dur-base);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top.is-shown:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13, 71, 161, 0.42); }
.modal {
  width: min(680px, 100%);
  max-width: 100%;
  max-height: 88vh;
  max-height: 88svh;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--c-body);
  overflow: visible;
}
.modal::backdrop {
  background: rgba(6, 15, 32, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-panel {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  max-height: 88svh;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(6, 15, 32, 0.45);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 30px) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(135deg, #f7fbff, var(--c-surface));
}
.modal-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-primary);
}
.modal-intro {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-muted);
}
.req,
.req-key { color: #c2410c; font-weight: 700; }
.modal-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-inline-start: auto;
  border-radius: 50%;
  color: var(--c-primary);
  background: rgba(13, 71, 161, 0.07);
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.modal-close svg { width: 18px; height: 18px; }
.modal-close:hover { background: var(--c-primary); color: var(--c-white); }
.modal-body {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}+
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid #cbd5e1;
  border-radius: var(--r-sm);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #94a3b8; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-secondary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}
.wpcf7 {display: grid; overflow-y: auto; overscroll-behavior: contain;}
.wpcf7-form {padding:clamp(18px, 3vw, 24px) clamp(20px, 3vw, 30px); }
.field {padding-bottom: var(--sp-4);}
.field input[type="file"] { padding: 9px 12px; background: var(--c-surface-alt); }
.cf-company {gap: 6px;}
.field input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 7px 14px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-white);
  background: var(--c-primary);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.field-hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.field-error {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  color: #b91c1c;
}
.field-error:empty { display: none; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
.field-consent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: var(--sp-3);
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
}
.field-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--c-primary);
}
.field-consent label {
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-body);
}
.field-consent .field-error { grid-column: 1 / -1; }

.form-status {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.form-status:empty { display: none; }
.form-status[data-tone="error"]  { color: #7f1d1d; background: #fef2f2; border-color: #fecaca; }
.form-status[data-tone="notice"] { color: #1e3a8a; background: #eff6ff; border-color: #bfdbfe; }
.form-status[data-tone="ok"]     { color: #14532d; background: #f0fdf4; border-color: #bbf7d0; }
.modal-foot {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end; /* Pushes content to the right edge */
  gap: 12px;
  padding: 20px 24px;
  background-color: #f8fafc; 
  border-top: 1px solid #e2e8f0;
  position: relative; /* Context for the spinner */
  box-sizing: border-box;
}
.modal-foot .wpcf7-spinner {
  position: absolute;
  right: 24px;
  bottom: -30px; /* Moves the loading icon out of the button row */
}
.address {width: min(100%, 150px);
  line-height: 1.25;
  -webkit-text-size-adjust: 100%; 
  font-size: clamp(0.75rem, 3.5vw, 0.9rem);
  word-wrap: break-word;
  overflow-wrap: break-word;}
.btn-quiet {
  background: transparent;
  color: var(--c-body);
  border-color: #cbd5e1;
	margin-right: 20px;
}
.modal-foot .btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.has-anim .modal[open] .modal-panel {
  animation: modalIn 200ms var(--reveal-easing) both;
}
html.has-anim .modal[open]::backdrop {
  animation: modalBackdropIn 200ms var(--reveal-easing) both;
}

@media (max-width: 560px) {
  .modal { width: 100%; max-height: 92svh; }
  .modal-panel { max-height: 92svh; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .modal-foot { justify-content: stretch; }
  .modal-foot .btn { flex: 1 1 auto; }
}
/* ==========================================================================
   19. RESPONSIVE
   Breakpoints: 1440+ / 1200 / 992 / 768 / 767 / 576 / 480 / 360
   ========================================================================== */
@media (min-width: 1440px) {
  :root {
    --container: 1320px;
    --section-y: clamp(88px, 6.5vw, 120px);
  }
  .hero-content { max-width: 680px; }
  .hero-shape {
    left: 40%;}
}
/* ---------- 1200px — small desktop ---------- */
@media (max-width: 1200px) {
  :root { --header-h: 78px; }
  .hero-panel { width: 70%; }
  .hero-shape {left: 43%; bottom: -55px; width: clamp(220px, 26vw, 340px); }
  .hero-shape img {width: 95%; height: 90%;}
  .service-card { padding: 28px 24px; }
  .process-features { --offset: clamp(0px, 3vw, 30px); }
  @keyframes slideCenterToLeft {
    0% {opacity: 0; transform: translate3d(40px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0);}
  }
  @keyframes slideCenterToRight {
    0% { opacity: 0; transform: translate3d(-40px, 0, 0); }
    100% {opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes centerAnchorFade {
    0% {opacity: 0; transform: scale(0.96); }
    100% { opacity: 1;transform: scale(1); }
}
}
/* ---------- 992px — nav becomes a drawer ---------- */
@media (max-width: 992px) {
  :root { --header-h: 72px; }
  .hamburger { display: grid; }
  html.has-anim .nav { animation: none; opacity: 1; }
  .logo { position: relative; z-index: 1002; }
  body.nav-open #header.scrolled {background: transparent; box-shadow: none; }
  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1001;
    width: min(320px, 84vw);
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: calc(var(--header-h) + 24px) var(--sp-8) var(--sp-8);
    background: linear-gradient(160deg, #10233f, var(--c-ink));
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.42s var(--ease-out),
    visibility 0s linear 0.42s;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .contact-body:last-child {font-size: clamp(0.613rem, 0.69rem + 0.10vw, 0.675rem);}
  .nav-menu.is-open {
    transform: none; visibility: visible; transition: transform 0.42s var(--ease-out), visibility 0s; }
  .nav-menu li { width: 100%; }
  .nav-menu .nav-link { display: block;width: 100%; padding: 14px 0; font-size: var(--fs-md);
    color: var(--c-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    transition: color var(--dur-base) ease, padding-left var(--dur-base) var(--ease-out);
  }
  .nav-menu .nav-link::after { display: none; }
  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.is-active { color: var(--c-gold); padding-left: 6px; transform: none; }
  .nav-cta { margin-top: var(--sp-5); }
  .nav-cta .btn { width: 100%; }
  html.has-anim .nav-menu li {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
  }
  html.has-anim .nav-menu.is-open li { opacity: 1; transform: none; }
  html.has-anim .nav-menu.is-open li:nth-child(1) { transition-delay: 0.10s; }
  html.has-anim .nav-menu.is-open li:nth-child(2) { transition-delay: 0.16s; }
  html.has-anim .nav-menu.is-open li:nth-child(3) { transition-delay: 0.22s; }
  html.has-anim .nav-menu.is-open li:nth-child(4) { transition-delay: 0.28s; }
  html.has-anim .nav-menu.is-open li:nth-child(5) { transition-delay: 0.34s; }
  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 56px) clamp(64px, 9vw, 96px);
    text-align: center;
  }
  .hero-panel,
  .hero-shape { display: none; }
  .hero-scrim {
    background:linear-gradient(180deg, rgba(6, 15, 32, 0.6) 0%, transparent 24%), linear-gradient(180deg, rgba(6, 15, 32, 0.82), rgba(6, 15, 32, 0.86));
  }
  .hero-content { max-width: 640px; margin-inline: auto; }
  .hero-desc    { margin-inline: auto; }
  .hero-buttons { justify-content: center; }
  .about-grid,
  .process-grid { grid-template-columns: minmax(0, 1fr); }
  .process-grid { --jump-x: 60px; --jump-y: 72px; }
  .about-media img { aspect-ratio: 16 / 9; }
  .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* One rung of the services ladder: 3 cols above 992, single column below.
     (It used to flip to 2 cols at exactly 992px and again at exactly 768px,
     because a later `max-width: 768` rule outranked the 991 one.) */
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .service-feature { order: -1; grid-column: 1 / -1; }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .cta-box {
    flex-direction: column;
    text-align: center;
    width: 100%;
    max-width: none;
    padding: clamp(32px, 5vw, 40px) clamp(20px, 4vw, 30px) 0;
    gap: 20px;
    margin-bottom: -50px;
  }
  .cta-content {
    max-width: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cta-content h2 {
    font-size: clamp(20px, 4vw, 26px);
    margin-bottom: 12px;
  }
  .cta-content p {
    font-size: clamp(13px, 2.8vw, 14.5px);
    margin-bottom: 20px;
    max-width: 480px;             
  }
  .cta-image {
    --cta-img-rest: translateY(0);
    position: relative;
    right: auto;
    bottom: 0;
    width: clamp(190px, 45vw, 260px);
    margin: 0 auto;
    z-index: 4;
  }
  .cta-image img { transform: none; margin: 0 auto; }
  .logo-item img {
    height: clamp(26px, 4vw, 38px);
  }
  .footer-logo {margin-top: var(--sp-6); }
  @keyframes mobileFadeUp {
    0% {opacity: 0;transform: translate3d(0, 30px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0);}
    }
    }

/* ---------- 769–1199px — tablet: keep the desktop structure, tighten the
     rhythm so nothing crowds its container ---------- */
@media (min-width: 769px) and (max-width: 1199px) {
  :root {
    --section-y: clamp(52px, 6.2vw, 84px);
    --grid-gap:  clamp(18px, 2.2vw, 26px);
  }
  .section-head    { margin-bottom: clamp(28px, 3.6vw, 44px); }
  .vm-grid         { gap: var(--sp-4); }
  .vm-card         { padding: 20px; }
  .process-steps   { --pad: clamp(18px, 2.4vw, 28px); --item-pad: 12px; }
  .process-item    { gap: 16px; }
  .process-features{ padding: clamp(24px, 3vw, 34px) clamp(18px, 2.2vw, 24px); }
  .feature-card    { padding: 13px 16px; gap: 14px; }
  .industry-overlay{ padding: clamp(14px, 1.8vw, 20px); }
  .cta-content     { max-width: min(30rem, 56%); }
  .footer-grid     { gap: clamp(24px, 3vw, 40px); }
}
/* ---------- 768px — tablet ---------- */
@media (max-width: 768px) {
  :root { --header-h: 68px; --logo-gap: 30px; --grid-gap: 18px; }
  .clients-flex  { flex-direction: column; gap: var(--sp-3); }
  .clients-title { font-size: var(--fs-sm); }
  .marquee       { width: 100%; }
  .marquee-track { animation-duration: 20s; }
.clients-flex {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
    .logo-item {
    padding: 0.5rem 0.875rem;
  }
    .logo-item img {
    height: clamp(24px, 7vw, 34px);
  }
  .vm-grid { grid-template-columns: minmax(0, 1fr); }
  .service-media { min-height: 200px; }
  .corner-decor { display: none; }
  .process-features { --offset: 0px; }
  .feature-card--right,
  .feature-card--left { margin-inline: 0; }
  .cta-box {
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: 0;
  }
  .cta-content { max-width: 100%; }
  .cta-image {
    align-self: center;
    width: clamp(170px, 46vw, 230px);
    margin-bottom: 0;
  }
  footer#contact { padding-top: clamp(56px, 9vw, 80px); }
  .footer-grid,
  .footer-about { grid-column: auto; }
  .footer-grid  { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-grid {
    justify-items: center;
    gap: var(--sp-5);
    text-align: center;
  }
  .footer-about,
  .footer-links,
  .footer-contact { width: 100%; }
  .footer-about p {
    max-width: 46ch;
    margin-inline: auto;
    text-align: center;
  }
  .footer-links ul { padding: 0; margin: 0; }
  .footer-links li { text-align: center; }
  .contact-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: min(100%, 22rem);
    margin-inline: auto;
    margin-bottom: var(--sp-6);
    text-align: center;
  }
  .contact-body { text-align: center; }
  .contact-body strong { margin-bottom: calc(var(--sp-2) + 3px); }
}
 .industry-card:hover .industry-overlay h3 {color: #f4b507!important;}
  .industry-card:hover .industry-overlay p {color: #f4b507!important;}
  .footer-grid {padding-bottom: 0;}
  .hero-shape {
    left: 43%;
    transform: translateX(-50%);
  }
@media (min-width: 1179px) and (max-width: 1440px) {
  .hero {
    --hero-panel-w:       70%;
    --hero-shape-overlap: 32px;
  }
  .hero-panel { width: var(--hero-panel-w); }
  .hero-shape {
    --shape-w: clamp(220px, 26vw, 400px);
    width: var(--shape-w);
    left: calc(100% - 0.47 * var(--hero-panel-w) + var(--hero-shape-overlap) - var(--shape-w));
    transform: translateX(0);
  }
}
@media (max-width: 767px) {
   :root {
    --motion-normal:     440ms;
    --motion-stagger:    var(--motion-stagger-mobile);
    --motion-delay-max:  280ms;
    --motion-distance-md: 20px;
    --motion-distance-lg: 20px;
    --reveal-scale:      0.98;
  }
  .about-media img { animation: none; }

  /* Tighter rhythm on phones — same components, less air. */
  .section-head     { margin-bottom: clamp(24px, 6vw, 34px); }
  .process-steps    { padding-block: clamp(22px, 6vw, 30px); }
  .process-features { padding: clamp(22px, 6vw, 30px) clamp(14px, 4vw, 20px); }
  .feature-card     { padding: 13px 15px; gap: 14px; }
  .process-item     { gap: 16px; }
  .vm-card          { padding: 20px; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .services-grid > :nth-child(1) { order: 1; }
  .services-grid > :nth-child(3) { order: 2; }
  .services-grid > :nth-child(5) { order: 3; }
  .services-grid > :nth-child(4) { order: 4; }
  .services-grid > :nth-child(6) { order: 5; }
  .service-card,
  .service-feature { padding: clamp(24px, 6vw, 32px) clamp(20px, 5vw, 26px); }
  .service-card h3 { font-size: var(--fs-lg); }
  .service-media {
    min-height: 0;
    aspect-ratio: 608 / 333;
  }
  .industries-grid { grid-template-columns: minmax(0, 1fr); }
  .industry-card   { aspect-ratio: 16 / 9; }
  .industry-overlay { padding: clamp(16px, 4vw, 22px); }
  .industry-overlay p {
    max-height: none;
    margin-top: var(--sp-2);
    opacity: 1;
    overflow: visible;
  }
  .cta-box { margin-bottom: clamp(-48px, -9vw, -28px); }
  .footer-links a:hover { transform: none; }
}
@media (max-width: 640px) {
  .single-line-heading {
    font-size: clamp(1.25rem, 4.5vw, 2rem);
  }
}
@media (max-width: 576px) {
  :root { --section-y: clamp(48px, 11vw, 64px); }
  .hero-buttons {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .hero-buttons .btn { flex: 1 1 0%; min-width: 0; }
  .hero-buttons .btn,
  .btn-primary,
  .btn-gold { padding: 10px 12px; font-size: 13px; }
  .process-steps { --pad: 18px; --item-pad: 10px; }
  .process-item  { gap: var(--sp-3); }
  .to-top        { width: 42px; height: 42px; }
  .vm-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vm-card {
    padding: 20px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  /* The font can't clamp below 1.25rem, so past this width `nowrap` pushed
     "Driving Talent. Delivering Excellence." ~44px outside its container
     (hidden only by body's overflow-x: clip). Let it wrap instead. */
  .single-line-heading { white-space: normal; }
  .nav-menu   { width: min(300px, 88vw); padding-inline: var(--sp-6); }
  .hero       { padding-block: calc(var(--header-h) + 44px) 64px; }
  .hero-title { line-height: 1.14; }
  .clients-bar { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .service-card,
  .service-feature { padding: 26px 20px; }
  .process-item   { padding-block: 10px; }
  .feature-card   { padding: 12px 14px; gap: var(--sp-3); }

  .cta-box {
    padding-inline: 22px;
    padding-top: 28px;
    border-radius: 16px;
  }
  .btn-gold {
    width: 100%;
    max-width: 260px;
    padding: 12px 20px;
    font-size: 14px;
  }
  .cta-image { width: 180px; }
}
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .logo-img { height: 30px; }
  .hero-title { font-size: 1.75rem; }
  .btn { padding-inline: 1.25rem; }
  .hero-buttons .btn { padding-inline: 8px; font-size: 12px; }
  .process-steps { --pad: 14px; }
  .process-text  { font-size: var(--fs-sm); }
  .to-top { right: 12px; bottom: 12px; }
  .services-grid,
  .industries-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .hamburger { margin-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .process-item,
  .feature-card,
  html.has-anim [data-animate],
  .cta-content > *,
  html.has-anim .nav-menu li,
  html.has-anim .hero-anim,
  html.has-anim .hero-buttons .btn,
  html.has-anim .hero-panel,
  html.has-anim .hero-shape,
  html.has-anim .logo,
  html.has-anim .nav,
  html.has-anim .hamburger {opacity: 1 !important; transform: none !important;animation: none !important;}
  .cta-image {
    opacity: 1 !important;
    transform: var(--cta-img-rest) !important;
    animation: none !important;
  }
  html.has-anim .process-steps::before { transform: scaleY(1) !important; }
  .marquee-track   { animation: none !important; }
  html.has-anim .modal[open] .modal-panel,
  html.has-anim .modal[open]::backdrop { animation: none !important; }
}
@media print {
  #header, .to-top, .nav-backdrop, .hero-panel, .hero-shape, .cta-image { display: none !important; }
  .reveal,
  .process-item,
  .feature-card,
  .cta-content > *,
  .hero-anim {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   19. TOUCH INTERACTION LAYER
   --------------------------------------------------------------------------
   Every hover state above this line is left exactly as it was, and most of
   them are already gated behind `@media (hover: hover) and (pointer: fine)`
   — which is precisely why a phone showed nothing at all: the gate keeps the
   sticky-hover bug away, but nothing was ever put in its place.

   This section is that replacement. It is scoped to a coarse pointer, so a
   mouse never sees a line of it, and it is driven by two classes the script
   adds:

       .is-pressed   momentary — the finger is currently down
                     (buttons, links, icon circles, logo tiles)
       .is-tapped    latched   — the one card the visitor last tapped; a
                     second tap, or a tap anywhere else, releases it
                     (cards whose hover reveals colour or content)

   `:active` is listed alongside both so the feedback still degrades to
   something visible with JavaScript switched off.
   ========================================================================== */

@keyframes tapRipple {
  from { opacity: 0.5; transform: scale(0); }
  to   { opacity: 0;   transform: scale(18); }
}

@media (hover: none), (pointer: coarse) {

  /* --- 19.1 Tap ergonomics ----------------------------------------------
     `touch-action: manipulation` drops the 300ms double-tap-zoom wait, so
     the press class lands on the same frame as the finger. The transparent
     highlight colour removes the grey box iOS and Android paint over a tap,
     which otherwise fights whatever we animate underneath it. */
  a,
  button,
  .btn,
  [role="button"],
  .vm-card,
  .service-card,
  .service-media,
  .process-item,
  .feature-card,
  .industry-card,
  .logo-item,
  .icon-box,
  .to-top,
  .hamburger,
  .modal-close {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Safari on iOS only dispatches :active for a non-link element when that
     element looks interactive, so the no-JS fallback needs this. */
  .vm-card,
  .service-card,
  .service-media,
  .process-item,
  .feature-card,
  .industry-card,
  .logo-item {
    cursor: pointer;
    -webkit-touch-callout: none;
  }

  /* The press lasts a few frames, so the compositor hint is worth its cost
     there. A latched card can sit there for minutes — it gets no hint, the
     same discipline the reveal code already follows. */
  .is-pressed { will-change: transform; }

  /* --- 19.2 Buttons -----------------------------------------------------
     Desktop lifts the button towards the cursor. A finger is already on top
     of it, so the same colour change reads better as a press into the page:
     identical palette, inverted motion. */
  .btn.is-pressed,
  .btn:active {
    background: #ffbd23 !important;
    color: #fff !important;
    border-color: #ffbd23 !important;
    transform: translateY(0) scale(0.96);
    box-shadow: 0 4px 14px rgba(243, 181, 7, 0.35);
  }
  /* The sheen that sweeps across on desktop hover, fired by the tap. */
  .btn.is-pressed::before { transform: translateX(380%) skewX(-18deg); }

  .send-btn.is-pressed,
  .send-btn:active {
    background: #2564aa !important;
    color: var(--c-white) !important;
    border-color: #0e4baa !important;
    box-shadow: 0 4px 14px rgba(13, 71, 161, 0.25) !important;
  }

  .btn-gold.is-pressed,
  .btn-gold:active {
    background: #0063ae !important;
    color: #fff !important;
    transform: translateY(0) scale(0.96);
    box-shadow: 0 6px 18px rgba(0, 99, 174, 0.45);
  }

  /* The pill and the quiet button both carry .btn, whose !important gold
     outranks their own hover colour on desktop too — so the press is left to
     inherit that gold rather than inventing a colour the mouse never shows.
     Only the motion is theirs. */
  .btn-service-pill.is-pressed,
  .btn-service-pill:active { transform: scale(0.96); }

  /* --- 19.3 Ripple ------------------------------------------------------
     One pseudo-element, one keyframe, no library. `.btn` already carries
     `isolation: isolate` and `overflow: hidden`, so a z-index of -1 puts the
     ripple over the button fill and under its label, and the overflow clip
     trims it to the pill. The script writes the two coordinates. */
  .btn::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: var(--ripple-y, 50%);
    left: var(--ripple-x, 50%);
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
  }
  .btn.is-rippling::after { animation: tapRipple 600ms var(--ease-out) forwards; }
  /* Gold buttons ripple dark; a white ripple would vanish into the fill. */
  .btn-gold::after { background: rgba(0, 99, 174, 0.35); }

  /* --- 19.4 Icon circles ------------------------------------------------
     The same lift + halo + glyph nudge the desktop block hands to
     `.icon-box`, re-keyed onto the press and the latched card. */
  .icon-box.is-pressed,
  .vm-card.is-tapped      .icon-box,
  .service-card.is-tapped .icon-box,
  .feature-card.is-tapped .icon-box,
  .contact-item .icon-box.is-pressed {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 3px 22px rgb(14 79 168 / 10%);
  }
  .icon-box.is-pressed::after,
  .vm-card.is-tapped      .icon-box::after,
  .service-card.is-tapped .icon-box::after,
  .contact-item .icon-box.is-pressed::after { box-shadow: 0 0 18px 3px #2564aa26; }
  .feature-card.is-tapped .icon-box::after  { box-shadow: 0 0 18px 3px #2564aa; }

  .icon-box.is-pressed img,
  .icon-box.is-pressed > svg,
  .vm-card.is-tapped .icon-box img,
  .service-card.is-tapped .icon-box img,
  .feature-card.is-tapped .icon-box > svg,
  .contact-item .icon-box.is-pressed img { transform: scale(1.08); }

  /* --- 19.5 Vision / Mission cards --------------------------------------
     The blue curtain wipes across on tap exactly as it does on hover. */
  .vm-card.is-tapped {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(37, 99, 169, 0.3);
  }
  .vm-card.is-tapped::before { transform: scaleX(1); }
  .vm-card.is-tapped .icon-box--md {
    background-color: #ffffff;
    transform: scale(1.08);
  }
  .vm-card.is-tapped .icon-box img {
    filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(1450%)
            hue-rotate(190deg) brightness(90%) contrast(92%);
  }
  .vm-card.is-tapped h3 { color: #ffffff; }
  .vm-card.is-tapped p  { color: #e2e8f0; }

  /* --- 19.6 Service cards -----------------------------------------------
     Including the directional amber wash: cards 1, 3, 4 and 6 each wipe in
     from their own edge, the same four the desktop block singles out. */
  .service-card.is-tapped {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--sh-hover);
    opacity: 1;
  }
  .services-grid > *:nth-child(1).is-tapped .service-card-bg,
  .services-grid > *:nth-child(3).is-tapped .service-card-bg,
  .services-grid > *:nth-child(4).is-tapped .service-card-bg,
  .services-grid > *:nth-child(6).is-tapped .service-card-bg {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
  /* Cards 2 and 5 have no directional wash on desktop either — they just
     fade, so the tap does the same rather than inventing a new move. */
  .service-card.is-tapped .service-card-bg { opacity: 1; }

  .service-card.is-tapped h3,
  .service-card.is-tapped p { color: #f0f7ff; }

  .service-card.is-tapped .service-icon-box {
    background-color: #ffffff;
    box-shadow: var(--sh-hover-warm), 0 0 0 1px rgba(255, 189, 35, 0.35);
    transform: scale(1.05);
  }
  .service-card.is-tapped .service-icon-box img { filter: var(--f-icon-gold); }

  .service-media.is-tapped     { box-shadow: var(--sh-hover); }
  .service-media.is-tapped img { transform: scale(1.05); }

  /* --- 19.7 Process steps ----------------------------------------------- */
  .process-item.is-tapped {
    background: #ffffff;
    box-shadow: var(--sh-hover);
    transform: translateY(-3px);
  }
  .process-item.is-tapped .process-number {
    background: var(--c-hover);
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: var(--sh-hover-warm);
  }
  .process-item.is-tapped .process-text { color: #2564aa; }

  /* --- 19.8 Feature cards ----------------------------------------------- */
  .feature-card.is-tapped {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--sh-hover);
  }
  .feature-card.is-tapped .icon-box {
    box-shadow: var(--sh-hover-warm);
    transform: translateY(-2px) scale(1.05);
  }
  .feature-card.is-tapped .icon-box::before { opacity: 1; }
  .feature-card.is-tapped .icon-box::after  { box-shadow: 0 0 18px 3px var(--c-hover-soft); }

  /* --- 19.9 Industry cards ----------------------------------------------
     The copy is already open on touch (a rule further up sets it), so the
     tap is left to do the lift, the slow photo push-in and the gold. The
     paragraph has no colour transition of its own in the base rule; without
     this line it would snap rather than fade. */
  .industry-overlay p { transition: color var(--dur-base) ease; }

  .industry-card.is-tapped {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
  }
  .industry-card.is-tapped img { transform: scale(1.03); }
  .industry-card.is-tapped .industry-overlay h3,
  .industry-card.is-tapped .industry-overlay p { color: #f4b507; }

  /* --- 19.10 Client logo strip ------------------------------------------ */
  .logo-item { transition: background-color 0.3s ease, transform 0.3s ease; }
  .logo-item.is-pressed,
  .logo-item:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.97);
  }
  .logo-item.is-pressed::before { transform: translateY(200%); }
  .logo-item.is-pressed img {
    opacity: 1;
    transform: scale(1.04);
  }

  /* --- 19.11 Links -------------------------------------------------------
     Text links get colour and the same 3px shunt as desktop; the drawer
     links get the gold and the indent they show when active. */
  .footer-links a.is-pressed,
  .footer-links a:active {
    color: var(--c-accent);
    transform: translateX(3px);
  }
  .contact-body a.is-pressed,
  .contact-body a:active { color: var(--c-accent); }

  .nav-menu .nav-link.is-pressed,
  .nav-menu li a.is-pressed {
    color: var(--c-gold);
    padding-left: 6px;
  }
  /* Off-canvas the underline is hidden; on a tablet still showing the
     horizontal bar it should sweep in on the tap the way it does on hover. */
  .nav-menu li a.is-pressed::after { transform: scaleX(1); }

  .section-heading span.is-pressed { color: #000; }

  /* --- 19.12 Utility controls ------------------------------------------- */
  .to-top.is-shown.is-pressed,
  .to-top.is-shown:active {
    transform: scale(0.92);
    box-shadow: 0 14px 30px rgba(13, 71, 161, 0.42);
  }
  .hamburger-box { transition: transform var(--dur-fast) var(--ease-out); }
  .hamburger.is-pressed .hamburger-box { transform: scale(0.9); }

  .modal-close.is-pressed,
  .modal-close:active {
    background: var(--c-primary);
    color: var(--c-white);
  }
  /* Touch has no hover to preview a field with, so the focus ring carries
     the whole job — make sure tapping into a field also darkens its border
     rather than only drawing the ring. */
  .field input:focus,
  .field select:focus,
  .field textarea:focus { border-color: var(--c-secondary); }

  /* --- 19.13 Keyboard parity --------------------------------------------
     Tablets with keyboards land here too; a latched card driven from the
     keyboard should look the same as one driven by a finger. */
  .vm-card:focus-visible,
  .service-card:focus-visible,
  .process-item:focus-visible,
  .feature-card:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
  }
}

/* A visitor who has asked for less motion still gets the colour change and
   the state — just none of the travel, and no ripple. */
@media (prefers-reduced-motion: reduce) {
  .is-pressed,
  .is-tapped { transform: none !important; }
  .btn.is-rippling::after { animation: none !important; opacity: 0 !important; }
  .vm-card.is-tapped::before { transform: scaleX(1) !important; }
  .service-card.is-tapped .service-card-bg { opacity: 1 !important; }
}