@charset "utf-8";
/* ============================================================================
   SourceIT — Homepage
   Tokens transcribed from Design-System-Master.html.
   Board conflicts resolved per that file's own recommendation column:
     container 1200 / 1280 · side margin 24-32-40 · shadow base rgba(15,23,42)
     card hover 0.12 @200ms · orbit 20s · Display & H1 kept as separate roles
     H2 32/40 @1280 + 36/44 @1920 · body scale Board 08 · secondary blues Board 01
   ========================================================================= */

@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --primary-blue:#1D4ED8;
  --primary-blue-700:#1740B0;
  --primary-blue-400:#3D74F0;
  --primary-blue-300:#5C8CF7;
  --brand-orange:#E7531A;
  --deep-navy:#0B132B;
  --light-blue:#E6F0FF;
  --soft-blue:#F2F6FF;
  --sky-blue:#D6E6FF;
  /* card surfaces read against a white page: resting tint, white on hover */
  --surface:#F0F4FC;
  --surface-hi:#FFFFFF;
  --surface-line:#DBE4F4;
  --n-900:#0F172A; --n-800:#1E293B; --n-700:#334155; --n-600:#475569; --n-500:#64748B;
  --n-400:#94A3B8; --n-300:#CBD5E1; --n-200:#E2E8F0; --n-100:#F1F5F9; --n-50:#F8FAFC;
  --white:#FFFFFF;
  --success:#16A34A; --warning:#F59E0B; --danger:#EF4444; --info:#0EA5E9;
  --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; --sp-20:80px; --sp-24:96px; --sp-30:120px;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:50%;
  --sh-subtle:0px 1px 2px rgba(15,23,42,.06);
  --sh-card:0px 4px 12px rgba(15,23,42,.08);
  --sh-floating:0px 12px 24px rgba(15,23,42,.12);
  --sh-hero:0px 24px 60px rgba(29,78,216,.15);
  --sh-glow:0px 0px 40px rgba(29,78,216,.20);
  --sh-rest:0 2px 8px rgba(16,24,40,.06);
  --sh-lift:0 12px 24px rgba(16,24,40,.12);
  --sh-press:0 4px 12px rgba(16,24,40,.08);
  --dur-micro:150ms; --dur-standard:300ms; --dur-complex:500ms; --dur-reveal:600ms;
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-quint:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --container:1200px;
  --pad:24px;
  --z-base:0; --z-raised:10; --z-sticky:40; --z-nav:60; --z-overlay:80; --z-rail:90;
}
@media(min-width:1440px){ :root{ --container:1280px } }
@media(min-width:768px){ :root{ --pad:32px } }
@media(min-width:1280px){ :root{ --pad:40px } }

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--n-800);font-family:var(--font);
  font-size:16px;line-height:24px;font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,figure,figcaption,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px;border-radius:var(--r-sm)}
.dark :focus-visible{outline-color:var(--sky-blue)}
::selection{background:var(--sky-blue);color:var(--deep-navy)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:200;background:var(--primary-blue);color:#fff;
  padding:10px 16px;border-radius:var(--r-md);font-size:14px;font-weight:500;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ── type scale ────────────────────────────────────────────────────────── */
.display{font-size:clamp(28px,4.15vw,51px);line-height:1.115;font-weight:700;letter-spacing:-.015em;
  color:var(--n-900);text-wrap:balance}
.h1{font-size:clamp(30px,4.2vw,48px);line-height:1.16;font-weight:700;letter-spacing:-.005em;
  color:var(--n-900);text-wrap:balance}
.h2{font-size:clamp(26px,3.1vw,36px);line-height:1.22;font-weight:700;letter-spacing:-.003em;
  color:var(--n-900);text-wrap:balance}
.h3{font-size:clamp(20px,2vw,28px);line-height:1.28;font-weight:700;letter-spacing:-.002em;color:var(--n-900)}
.h4{font-size:20px;line-height:28px;font-weight:500;color:var(--n-900)}
.h5{font-size:18px;line-height:26px;font-weight:500;color:var(--n-900)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--n-600);max-width:62ch;text-wrap:pretty}
.body{font-size:16px;line-height:26px;color:var(--n-600);max-width:68ch;text-wrap:pretty}
.small{font-size:14px;line-height:22px;color:var(--n-600)}
.overline{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--primary-blue)}
.tabular{font-variant-numeric:tabular-nums}

/* ── heading emphasis ──────────────────────────────────────────────────────
   Section headings carry two tones: the setup steps back, the claim holds
   full weight. Solid colours rather than gradient fills, so the emphasis
   survives at every size and keeps its contrast ratio. ------------------- */
.display .mute,.h1 .mute,.h2 .mute,.h3 .mute{color:var(--n-500);font-weight:inherit}
.display .hi,.h1 .hi,.h2 .hi,.h3 .hi{color:var(--primary-blue)}
.dark .display .mute,.dark .h1 .mute,.dark .h2 .mute,.dark .h3 .mute{color:#8AA0C2}
.dark .display .hi,.dark .h1 .hi,.dark .h2 .hi,.dark .h3 .hi{color:var(--sky-blue)}
/* opt out of balancing where an explicit <br> owns the line break */
.balance-off{text-wrap:initial}

.dark{color:var(--n-300)}
.dark .display,.dark .h1,.dark .h2,.dark .h3,.dark .h4,.dark .h5{color:#fff}
.dark .lede,.dark .body,.dark .small{color:#C7D2E4}
.dark .overline{color:var(--sky-blue)}

/* ── layout ────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(52px,6.6vw,92px);position:relative}
.section--tight{padding-block:clamp(40px,4.8vw,64px)}

.sec-head{max-width:760px}
.sec-head .h2+.lede{margin-top:var(--sp-4)}
.sec-head--split{display:grid;gap:var(--sp-6);align-items:end;max-width:none}
@media(min-width:900px){ .sec-head--split{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-12)} }

/* ── buttons (DS §9) ───────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 24px;border-radius:var(--r-md);border:1.5px solid transparent;
  font-size:15px;line-height:20px;font-weight:500;letter-spacing:.01em;cursor:pointer;
  background:none;text-align:center;
  transition:transform var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out)}
.btn:hover{transform:scale(1.02)}
.btn:active{transform:scale(.96);transition-duration:100ms;transition-timing-function:var(--ease-in)}
.btn svg{flex:none;transition:transform var(--dur-micro) var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--primary-blue);color:#fff;box-shadow:0 6px 16px rgba(29,78,216,.22)}
/* hover lifts toward the light: brighter fill plus a wider glow reads as
   "this is live", where a darker fill reads as disabled */
.btn--primary:hover{background:linear-gradient(135deg,var(--primary-blue-300),var(--primary-blue-400) 62%);
  box-shadow:0 12px 30px rgba(61,116,240,.45),0 0 0 4px rgba(61,116,240,.16)}
.btn--primary:active{background:var(--primary-blue-400)}
.btn--secondary{border-color:var(--n-300);color:var(--n-900);background:#fff}
.btn--secondary:hover{border-color:var(--primary-blue);color:var(--primary-blue);background:var(--soft-blue)}
.btn--ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn--onNavy{background:#fff;color:var(--deep-navy)}
.btn--onNavy:hover{background:#fff;box-shadow:0 12px 30px rgba(255,255,255,.28),0 0 0 4px rgba(255,255,255,.18)}
.btn--sm{min-height:40px;padding:9px 18px;font-size:14px}

.link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;
  color:var(--primary-blue);position:relative;padding-block:2px}
.link svg{transition:transform var(--dur-micro) var(--ease-out)}
.link::after{content:'';position:absolute;left:0;right:18px;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out)}
.link:hover::after{transform:scaleX(1)}
.link:hover svg{transform:translateX(3px)}
.dark .link{color:var(--sky-blue)}

/* ── scroll progress rail ──────────────────────────────────────────────── */
.rail{position:fixed;inset:0 0 auto 0;height:2px;background:transparent;z-index:var(--z-rail);
  pointer-events:none}
.rail span{display:block;height:100%;width:100%;background:var(--primary-blue);
  transform:scaleX(0);transform-origin:left}

/* ── navigation ────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  transition:box-shadow var(--dur-standard) var(--ease-out)}
.nav::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--n-200);opacity:0;
  transition:opacity var(--dur-standard) var(--ease-out)}
.nav.is-stuck::before{opacity:1}
.nav.is-stuck{box-shadow:var(--sh-subtle)}
.nav__in{position:relative;display:flex;align-items:center;gap:var(--sp-8);height:76px}
.nav__menu{display:none;align-items:center;gap:2px;margin-left:auto}
.nav__cta{display:none}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;border-radius:var(--r-md);
  font-size:15px;font-weight:500;color:var(--n-700);
  transition:color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)}
.nav__link:hover,.nav__item:hover>.nav__link,.nav__item:focus-within>.nav__link{
  color:var(--primary-blue);background:var(--soft-blue)}
.nav__link svg{transition:transform var(--dur-micro) var(--ease-out)}
.nav__item:hover>.nav__link svg,.nav__item:focus-within>.nav__link svg{transform:rotate(180deg)}

/* official logo */
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{width:auto;height:42px}
@media(min-width:768px){ .logo img{height:46px} }

.mega{position:absolute;top:calc(100% + 6px);left:50%;translate:-50% 0;width:min(760px,90vw);
  background:#fff;border:1px solid var(--n-200);border-radius:var(--r-xl);box-shadow:var(--sh-floating);
  padding:var(--sp-6);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transform-origin:top center;
  transition:opacity var(--dur-standard) var(--ease-out),transform var(--dur-standard) var(--ease-expo),
             visibility 0s linear var(--dur-standard)}
.mega--sm{width:min(560px,90vw)}
/* Self Login has two destinations, not eight, so it gets one column at the
   width the labels actually need rather than a half-empty two-column grid.
   The grid override lives next to .mega__grid below, not here: at equal
   specificity the later rule wins, and .mega__grid is defined after this. */
.mega--one{width:min(384px,90vw)}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none;
  transition-delay:0s,0s,0s}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
/* One column, and the link's text is allowed to use it: a flex child defaults
   to min-width:auto, which was letting the blurb collapse to 77px and wrap over
   four lines inside a 330px panel. */
.mega__grid--one{grid-template-columns:minmax(0,1fr)}
.mega--one .mega__link span{min-width:0;flex:1 1 auto}
/* Between the burger breakpoint and about 1200px the 760px Solutions panel is
   wider than the room to the left of its trigger, so it hung 61px off the
   screen edge and clipped its first column. Placed after .mega deliberately:
   same specificity, so this has to come later to win. */
@media(min-width:1080px) and (max-width:1199px){
  /* only the wide default panel: the modifiers are already narrow enough, and a
     bare .mega here would drag Self Login back up to 600px */
  .mega:not(.mega--sm):not(.mega--one){width:min(600px,92vw)}
}
.mega__col h5{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--n-400);margin-bottom:var(--sp-3)}
.mega__spacer{visibility:hidden}
.mega__link{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:var(--r-md);
  transition:background var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.mega__link:hover{background:var(--soft-blue);transform:translateX(3px)}
.mega__link img{width:32px;height:32px;flex:none}
.mega__link span{display:block;font-size:14.5px;font-weight:500;color:var(--n-900);line-height:20px}
.mega__link em{display:block;font-style:normal;font-size:12.5px;line-height:18px;color:var(--n-500);margin-top:2px}

/* Compacted Aug 2026. Seven solution lines split four and three made the panel
   335px tall, and About with four group companies made it 366px: tall enough to
   read as a page section rather than a dropdown, and to swallow the section
   behind it on a short laptop screen. These override the four rules above at
   equal specificity, so they have to stay below them. */
.mega{padding:var(--sp-5)}
.mega__link{padding:6px 9px;gap:10px}
.mega__link img{width:28px;height:28px}
.mega__link span{font-size:14px;line-height:19px}
.mega__link em{font-size:12px;line-height:16px;margin-top:1px}
.mega__col h5{margin-bottom:2px}
/* The panels centre on their trigger, which pushes the widest one off the left
   edge of the screen under the leftmost trigger: 760px centred under Solutions
   started at x=-30 on a 1280px viewport and clipped the Workforce column. The
   first panel anchors to its trigger's left edge instead of its centre. */
.nav__item:first-child .mega{left:0;translate:0}
.mega__feature{background:var(--soft-blue);border-radius:var(--r-lg);padding:var(--sp-5);margin-top:var(--sp-3)}
.mega__feature p{font-size:14px;line-height:21px;color:var(--n-600);margin:6px 0 14px}

.burger{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--n-200);
  background:#fff;border-radius:var(--r-md);cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-out)}
.burger:hover{border-color:var(--primary-blue)}
.burger span{display:block;width:18px;height:1.5px;background:var(--n-900);border-radius:2px;
  transition:transform var(--dur-standard) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
.burger span+span{margin-top:5px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.sheet{position:fixed;inset:76px 0 0;background:#fff;z-index:var(--z-overlay);overflow-y:auto;
  padding:var(--sp-6) var(--pad) var(--sp-16);opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--dur-standard) var(--ease-out),transform var(--dur-standard) var(--ease-out),
             visibility 0s linear var(--dur-standard)}
.sheet.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.sheet a{display:block;padding:15px 0;font-size:19px;font-weight:500;color:var(--n-900);
  border-bottom:1px solid var(--n-100)}
/* The About and Resources dropdowns have children. The sheet is a flat list, so
   they are indented rather than hidden behind a tap: nothing is hover-only and
   nothing needs a second interaction to reach. */
.sheet__sub{padding-left:var(--sp-5)!important;font-size:16px!important;
  font-weight:400!important;color:var(--n-600)!important}
.sheet .btn{width:100%;margin-top:var(--sp-8)}

@media(min-width:1080px){
  .nav__menu{display:flex}
  .nav__cta{display:inline-flex;margin-left:var(--sp-4)}
  .burger{display:none}
  .sheet{display:none}
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;padding-top:calc(76px + clamp(18px,3.2vw,42px));
  padding-bottom:clamp(40px,4.6vw,64px);overflow:clip;isolation:isolate}
.hero__bg{position:absolute;inset:-10% -5% 0;z-index:-1;
  background:
    radial-gradient(52% 46% at 74% 30%,rgba(29,78,216,.13),transparent 68%),
    radial-gradient(46% 44% at 10% 4%,rgba(214,230,255,.8),transparent 72%),
    linear-gradient(180deg,#FBFCFF 0%,#F0F5FF 52%,#FFFFFF 100%)}
.hero__grid-pat{position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(29,78,216,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(29,78,216,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%,#000,transparent 76%);
          mask-image:radial-gradient(72% 62% at 50% 34%,#000,transparent 76%)}

.hero__in{display:grid;gap:clamp(28px,4vw,44px);align-items:center}
@media(min-width:1080px){
  .hero__in{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:var(--sp-8)}
}
.hero__copy{max-width:660px;position:relative;z-index:2;container-type:inline-size}
/* The headline is two forced lines and must stay two. Sizing it against the
   viewport was the bug: the container caps at 1200px from about 1264px of
   viewport, so the copy column stops growing while vw keeps scaling the type.
   Between roughly 1300 and 1440, which is where a 1366 laptop sits, the type
   reached 54px and needed 607px inside a 591px column, so it broke to three
   lines. 80% and 110% zoom both moved out of that band, which is why it looked
   intermittent.
   Container units tie the size to the column that actually constrains it, so
   the relationship holds at every width instead of at the ones that were
   tested. The vw clamp above stays as the fallback. */
@supports (font-size: 1cqi){
  .hero__copy .display{font-size:clamp(28px,8.5cqi,51px)}
}
.hero__copy .overline{display:inline-block;margin-bottom:var(--sp-4)}
.hero__copy .display em{font-style:normal;color:var(--primary-blue)}
/* The claim under the headline. Sits between the display and the lede in
   weight as well as size, so the three lines read as a descending hierarchy
   rather than as two competing headings. */
.hero__sub{margin-top:var(--sp-4);max-width:36ch;font-size:clamp(18px,1.9vw,23px);
  line-height:1.34;font-weight:700;color:var(--n-800);letter-spacing:-.012em}
.hero__copy .lede{margin-top:var(--sp-5);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}

/* hero 3D scene: cut-out people, orbit rings, service cards revolving around */
.scene{position:relative;perspective:1300px;perspective-origin:56% 42%;
  padding:clamp(28px,5vw,60px) clamp(24px,5vw,64px)}
.scene__inner{position:relative;transform-style:preserve-3d;aspect-ratio:1/.78;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform 700ms var(--ease-out)}
.scene.is-live .scene__inner{transition:transform 140ms linear}

/* The supplied photograph is cut off with a straight horizontal edge: content
   runs to 83.8% of the frame and then stops dead. Any card overlapping that
   line makes the crop obvious, which is what it was doing under Training &
   Development. Masking the last band dissolves the figures into the background
   instead of ending them, so there is no edge to notice.
   The mask stops well above where the photograph actually ends, so the fade is
   doing the work rather than the crop. */
.scene__people{position:absolute;left:50%;top:48%;width:80%;translate:-50% -50%;
  transform:translateZ(30px);z-index:2;
  filter:drop-shadow(0 26px 44px rgba(11,19,43,.14));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.62) 70%,
    rgba(0,0,0,.18) 78%,transparent 84%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.62) 70%,
    rgba(0,0,0,.18) 78%,transparent 84%)}
.scene__rings{position:absolute;left:50%;top:50%;width:min(82%,520px);aspect-ratio:1;
  translate:-50% -50%;transform:translateZ(-30px);z-index:1;pointer-events:none}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(29,78,216,.17)}
.ring--2{inset:12%;border-color:rgba(29,78,216,.13)}
.ring--3{inset:25%;border-color:rgba(29,78,216,.1)}
.ring__spin{position:absolute;inset:0;animation:orbit 20s linear infinite}
.ring__spin--rev{animation-direction:reverse;animation-duration:28s}
.ring__dot{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--primary-blue);box-shadow:0 0 14px 3px rgba(29,78,216,.5)}
.ring__dot--b{left:auto;right:0;margin:-4.5px -4.5px 0 0;width:6px;height:6px;
  background:var(--info);box-shadow:0 0 12px 2px rgba(14,165,233,.5)}
.scene__glow{position:absolute;left:52%;top:48%;width:62%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;background:radial-gradient(circle,rgba(29,78,216,.2),transparent 66%);
  filter:blur(8px);z-index:0;animation:softglow 4.5s var(--ease-in-out) infinite}

.orbit{position:absolute;inset:0;z-index:3;pointer-events:none}
.ocard{position:absolute;display:flex;align-items:flex-start;gap:9px;width:max-content;
  max-width:min(202px,52%);padding:8px 11px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.7);-webkit-backdrop-filter:blur(14px) saturate(1.7);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 14px 30px rgba(11,19,43,.13),0 1px 2px rgba(11,19,43,.06);
  animation:drift 11s var(--ease-in-out) infinite;animation-delay:var(--d,0s)}
.ocard img{width:25px;height:25px;flex:none}
.ocard b{display:block;font-size:11.5px;line-height:15px;font-weight:700;color:var(--n-900);
  letter-spacing:-.005em}
.ocard i{display:block;font-style:normal;font-size:10px;line-height:13px;color:var(--n-500);margin-top:2px}
.ocard--1{top:-3%;left:20%;transform:translateZ(96px)}
.ocard--2{top:20%;right:-9%;transform:translateZ(78px)}
.ocard--3{top:26%;left:-13%;transform:translateZ(108px)}
.ocard--4{top:47%;right:-13%;transform:translateZ(90px)}
.ocard--5{top:57%;left:-15%;transform:translateZ(84px)}
.ocard--6{top:70%;right:-10%;transform:translateZ(70px)}
.ocard--7{bottom:-7%;left:14%;transform:translateZ(100px)}
/* From 1080 to 1439 the two-column hero is on but the stage is narrow, so
   four cards down the left column need more height than a 1/.95 stage gives
   them and they touch. The stage width does not actually grow until the
   container cap changes at 1440, which is why the breakpoint is there and not
   at 1240. The cards cannot shrink much further without the labels wrapping
   badly, so the stage grows instead. */
@media(min-width:1080px) and (max-width:1439px){
  .scene__inner{aspect-ratio:1/1.05}
  /* Wrapped titles make the cards tall again here, and the bottom pair overlap
     horizontally by 27px, so the left one moves in rather than relying on
     vertical separation it cannot get. */
  .ocard--2{top:23%}
  .ocard--6{top:72%}
  .ocard--7{left:2%}
}
@media(max-width:1079px){
  .ocard{max-width:min(162px,42%)}
  .ocard--3,.ocard--6{display:none}
}
@media(max-width:700px){
  .ocard{padding:8px 10px;gap:7px;max-width:150px}
  .ocard img{width:24px;height:24px}
  .ocard i{display:none}
  .ocard--2,.ocard--5{display:none}
  .ocard--1{left:2%}
  .ocard--4{right:-2%}
  .ocard--7{left:8%}
}

/* stat strip — the numbers are the point, so the surface carries a gradient */
.stats{margin-top:clamp(36px,4.5vw,64px);border:1px solid var(--sky-blue);
  border-radius:var(--r-xl);box-shadow:0 10px 30px rgba(29,78,216,.09);overflow:hidden;
  background:linear-gradient(135deg,#DFEAFB 0%,#EFF4FD 48%,#E6EEFC 100%);
  display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){ .stats{grid-template-columns:repeat(4,1fr)} }
/* text-align:left is explicit because .chero centres its children, so the
   same strip read left-aligned on the homepage and centred on About and
   the hubs. The number, the rule and the label now line up everywhere. */
.stat{position:relative;padding:clamp(22px,2.6vw,30px);text-align:left;
  border-top:1px solid rgba(29,78,216,.1);border-left:1px solid rgba(29,78,216,.1);
  transition:background var(--dur-standard) var(--ease-out)}
.stat:nth-child(-n+2){border-top:0}
.stat:nth-child(odd){border-left:0}
@media(min-width:860px){
  .stat{border-top:0}
  .stat:nth-child(odd){border-left:1px solid rgba(29,78,216,.1)}
  .stat:first-child{border-left:0}
}
.stat:hover{background:rgba(255,255,255,.62)}
.stat b{display:block;font-size:clamp(30px,3.3vw,42px);line-height:1.08;font-weight:700;
  letter-spacing:-.025em;color:var(--primary-blue);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:14px;line-height:20px;color:var(--n-600);margin-top:8px}
.stat b+span{position:relative;padding-top:14px}
.stat b+span::before{content:'';position:absolute;left:0;top:5px;width:34px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--primary-blue),var(--info));
  transform:scaleX(.7);transform-origin:left;
  transition:transform var(--dur-standard) var(--ease-expo)}
.stat:hover b+span::before{transform:scaleX(1.5)}

/* ── client logo strip ─────────────────────────────────────────────────── */
.creds{border-block:1px solid var(--n-200);background:#fff;padding-block:var(--sp-8)}
.creds__lbl{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n-500);text-align:center;margin-bottom:var(--sp-6)}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
/* Each set holds the row's six logos three times over, because the keyframe
   travels exactly one set and a set narrower than the screen wraps early and
   leaves the back half of the strip empty. Eighteen logos runs about 3200px,
   which covers every ordinary desktop. The duration scales with that width, or
   the strip just gets faster: 180s here keeps it at the original pace. */
.marquee__track{display:flex;width:max-content;animation:slide 180s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:clamp(28px,4vw,54px);padding-right:clamp(28px,4vw,54px)}
.marquee__set img{height:clamp(46px,5vw,60px);width:auto;object-fit:contain;flex:none;
  mix-blend-mode:multiply;opacity:.82;
  transition:opacity var(--dur-standard) var(--ease-out),transform var(--dur-standard) var(--ease-out)}
.marquee__set img:hover{opacity:1;transform:scale(1.06)}
/* Two rows running against each other. The second carries a different six logos
   so nothing repeats between them, and reversing the same keyframe gives the
   counter motion without a second set of keyframes to keep in step. */
.marquee+.marquee{margin-top:clamp(16px,2vw,28px)}
.marquee--rev .marquee__track{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ── narrative ─────────────────────────────────────────────────────────── */
.narrative{background:linear-gradient(180deg,#fff 0%,#F5F9FF 44%,#fff 100%);overflow:clip}
.narrative__in{display:grid;gap:clamp(36px,4vw,56px);align-items:center}
@media(min-width:1000px){ .narrative__in{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)} }
.narrative blockquote{margin-top:var(--sp-8);padding-left:var(--sp-6);
  border-left:2px solid var(--primary-blue)}
.narrative blockquote p{font-size:clamp(19px,1.8vw,23px);line-height:1.45;font-weight:500;
  color:var(--n-900);letter-spacing:-.01em}

/* the art sits on the same surface as the section, feathered so it has no edge */
.thread{position:relative;isolation:isolate;perspective:1200px}
.thread__art{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform 700ms var(--ease-out)}
.thread.is-live .thread__art{transition:transform 150ms linear}
.thread img{width:100%;mix-blend-mode:multiply;will-change:transform;
  -webkit-mask-image:radial-gradient(70% 72% at 52% 50%,#000 46%,transparent 92%);
          mask-image:radial-gradient(70% 72% at 52% 50%,#000 46%,transparent 92%)}
/* a light band sweeps the scene, so the surface is never quite still */
.thread__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(114deg,transparent 38%,rgba(120,170,255,.5) 49%,transparent 60%);
  background-size:260% 100%;animation:sweep 7.5s var(--ease-in-out) infinite;
  -webkit-mask-image:radial-gradient(66% 68% at 52% 50%,#000 44%,transparent 88%);
          mask-image:radial-gradient(66% 68% at 52% 50%,#000 44%,transparent 88%)}
/* one pulse per platform, fired in sequence so the flow reads people -> chart */
.thread__node{position:absolute;width:12%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(61,116,240,.75),rgba(61,116,240,.18) 42%,transparent 68%);
  animation:pulse 5.2s var(--ease-out) infinite}
.thread__node--1{left:58.6%;top:17.4%;animation-delay:0s}
.thread__node--2{left:68.9%;top:43.0%;animation-delay:.62s}
.thread__node--3{left:43.9%;top:58.5%;animation-delay:1.24s}
.thread__node--4{left:70.1%;top:85.1%;animation-delay:1.86s}
.thread__glow{position:absolute;inset:14% 8%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(29,78,216,.15),transparent 68%);filter:blur(22px)}

.converge{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.conv{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:18px;font-weight:500;
  color:var(--n-600);background:#fff;border:1px solid var(--n-200);border-radius:var(--r-sm);
  padding:8px 13px;
  transition:color 620ms var(--ease-out),border-color 620ms var(--ease-out),
             background 620ms var(--ease-out),box-shadow 620ms var(--ease-out)}
.conv__tick{width:14px;height:14px;border-radius:3px;flex:none;display:grid;place-items:center;
  background:var(--n-100);color:var(--n-400);
  transition:background 620ms var(--ease-out),color 620ms var(--ease-out),
             transform 620ms var(--ease-expo)}
.conv__tick svg{width:10px;height:10px}
.conv.is-on{color:var(--n-900);border-color:var(--sky-blue);background:var(--soft-blue);
  box-shadow:0 4px 12px rgba(29,78,216,.1)}
.conv.is-on .conv__tick{background:var(--primary-blue);color:#fff;transform:scale(1.06)}

/* ── operations stack ──────────────────────────────────────────────────── */
.opstack{background:var(--deep-navy);position:relative;overflow:clip;isolation:isolate}
.opstack::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 50% at 64% 46%,rgba(29,78,216,.34),transparent 70%),
             radial-gradient(40% 40% at 6% 96%,rgba(14,165,233,.14),transparent 70%)}
.opstack::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%)}
.opstack__in{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media(min-width:1040px){ .opstack__in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)} }

.iso{position:relative;perspective:1500px;padding-block:clamp(24px,4vw,48px);
  min-height:clamp(340px,36vw,470px);display:grid;place-items:center}
.iso__deck{position:relative;width:min(100%,460px);aspect-ratio:1/.62;transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(-40deg)}
.slab{position:absolute;left:50%;top:50%;border-radius:18px;transform-style:preserve-3d;
  border:1.5px solid rgba(255,255,255,.28);
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  translate:-50% -50%;
  box-shadow:14px 14px 0 rgba(11,19,43,.34),0 0 44px rgba(29,78,216,.28);
  transition:transform 700ms var(--ease-quint),opacity 500ms var(--ease-out),
             border-color var(--dur-standard) var(--ease-out),
             box-shadow var(--dur-standard) var(--ease-out),
             background var(--dur-standard) var(--ease-out)}
.slab__face{position:absolute;inset:0;border-radius:16px;overflow:hidden}
.slab__face::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:26px 26px;opacity:.55}
.slab--people{width:60%;aspect-ratio:1;transform:translateZ(calc(150px * var(--sep,1)))}
.slab--ops{width:76%;aspect-ratio:1;transform:translateZ(calc(78px * var(--sep,1)))}
.slab--comp{width:94%;aspect-ratio:1;transform:translateZ(0);
  border-color:rgba(53,168,224,.6);
  background:linear-gradient(135deg,rgba(29,78,216,.5),rgba(29,78,216,.16));
  box-shadow:14px 14px 0 rgba(11,19,43,.4),0 0 70px rgba(29,78,216,.55)}
.slab.is-active{border-color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.11));
  box-shadow:14px 14px 0 rgba(11,19,43,.34),0 0 68px rgba(53,168,224,.65)}
.slab--comp.is-active{background:linear-gradient(135deg,rgba(29,78,216,.68),rgba(29,78,216,.26))}

/* popups float flat above the isometric deck, one per layer */
.pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;left:50%;display:flex;align-items:center;gap:11px;width:max-content;
  max-width:min(280px,86%);padding:11px 15px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 18px 38px rgba(3,8,20,.45);
  opacity:0;visibility:hidden;translate:-50% 0;transform:translateY(10px) scale(.94);
  transition:opacity var(--dur-standard) var(--ease-out),
             transform var(--dur-standard) var(--ease-expo),
             visibility 0s linear var(--dur-standard)}
.pop.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.pop img{width:38px;height:38px;flex:none}
.pop b{display:block;font-size:14px;line-height:19px;font-weight:700;color:var(--n-900)}
.pop span{display:block;font-size:12.5px;line-height:17px;color:var(--n-500);margin-top:2px}
.pop[data-pop=people]{top:6%}
.pop[data-pop=ops]{top:42%}
.pop[data-pop=comp]{bottom:6%}

.layers{display:grid;gap:var(--sp-3)}
.layer{width:100%;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);align-items:start;padding:var(--sp-5);border-radius:var(--r-lg);cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
  transition:background var(--dur-standard) var(--ease-out),
             border-color var(--dur-standard) var(--ease-out),
             transform var(--dur-standard) var(--ease-expo)}
.layer:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);transform:translateX(5px)}
.layer[aria-pressed=true]{background:rgba(29,78,216,.24);border-color:var(--sky-blue)}
.layer__glyph{display:grid;gap:3px;justify-items:center;align-content:center;width:34px;height:34px;flex:none}
.layer__glyph i{display:block;height:5px;border-radius:2px;background:rgba(255,255,255,.28);
  transition:background var(--dur-standard) var(--ease-out),box-shadow var(--dur-standard) var(--ease-out)}
.layer__glyph i:nth-child(1){width:15px}
.layer__glyph i:nth-child(2){width:23px}
.layer__glyph i:nth-child(3){width:31px}
.layer__glyph i.on{background:#fff}
.layer[aria-pressed=true] .layer__glyph i.on{background:var(--sky-blue);box-shadow:0 0 12px rgba(53,168,224,.9)}
.layer h3{font-size:17px;line-height:24px;font-weight:700;color:#fff;letter-spacing:.02em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.layer__badge{font-size:10.5px;line-height:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep-navy);background:var(--sky-blue);border-radius:var(--r-sm);padding:4px 8px}
.layer p{font-size:14px;line-height:21px;color:#A9BAD4;margin-top:5px}
.layer[aria-pressed=true] p{color:#DCE7F7}
.opstack__note{margin-top:var(--sp-6);font-size:15px;line-height:24px;color:#C7D2E4;
  padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.14)}
.opstack__note b{color:#fff;font-weight:500}


/* ── atmosphere for the flat white bands ──────────────────────────────────
   Each of these sections was a plain white slab. They now carry a soft blue
   wash plus one drifting orb, placed so it never sits behind body copy.
   All decorative, all pointer-events:none, all behind the content. ------- */
.wash{position:relative;isolation:isolate;overflow:clip}
.wash>*{position:relative;z-index:1}
.wash::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--wash-bg,none)}
.orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;
  background:radial-gradient(circle,rgba(29,78,216,.34),transparent 70%);
  animation:bob 17s var(--ease-in-out) infinite alternate}
.orb--b{background:radial-gradient(circle,rgba(14,165,233,.28),transparent 70%);
  animation-duration:23s;animation-delay:-6s}
.orb--c{background:radial-gradient(circle,rgba(214,230,255,.85),transparent 72%);
  animation-duration:29s;animation-delay:-12s;filter:blur(38px)}
.ringdec{position:absolute;border:1px solid rgba(29,78,216,.1);border-radius:50%;
  z-index:0;pointer-events:none;animation:orbit 90s linear infinite}
.ringdec::after{content:'';position:absolute;top:50%;left:-4px;width:8px;height:8px;
  margin-top:-4px;border-radius:50%;background:rgba(29,78,216,.35)}
@keyframes bob{ from{ translate:0 0 } to{ translate:26px -34px } }
@keyframes sweep{ 0%{ background-position:120% 0 } 60%,100%{ background-position:-60% 0 } }
@keyframes pulse{
  0%   { opacity:0; scale:.55 }
  10%  { opacity:.95; scale:1 }
  34%  { opacity:0; scale:1.5 }
  100% { opacity:0; scale:1.5 }
}

/* solutions: glow behind the featured card, orbit arc bottom-left */
.solutions{--wash-bg:radial-gradient(46% 42% at 84% 8%,rgba(29,78,216,.09),transparent 70%),
  radial-gradient(40% 46% at 4% 92%,rgba(214,230,255,.5),transparent 72%)}
.solutions .orb--a{width:340px;height:340px;top:-8%;right:6%}
.solutions .ringdec{width:420px;height:420px;left:-160px;bottom:-140px}

/* pillars: wash follows the sticky heading column */
.pillars{--wash-bg:linear-gradient(180deg,#fff 0%,#F7FAFF 46%,#fff 100%),
  radial-gradient(38% 40% at 6% 30%,rgba(29,78,216,.07),transparent 70%)}
.pillars .orb--b{width:300px;height:300px;left:-6%;top:36%}
.pillars .ringdec{width:340px;height:340px;right:-130px;top:8%}

/* case study: light pooling under the figure */
.case{--wash-bg:radial-gradient(50% 60% at 20% 60%,rgba(214,230,255,.55),transparent 72%),
  linear-gradient(180deg,#fff 0%,#F8FBFF 72%,#fff 100%)}
.case .orb--c{width:380px;height:380px;left:2%;bottom:-12%}

/* insights: faint grid so the last light band before the navy has texture */
.insights{--wash-bg:radial-gradient(44% 44% at 92% 12%,rgba(29,78,216,.08),transparent 70%),
  linear-gradient(180deg,#fff 0%,#F7FAFF 100%)}
.insights .orb--a{width:300px;height:300px;right:-4%;top:-6%}
.insights::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(29,78,216,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(29,78,216,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 78%)}
@media(max-width:760px){ .orb{display:none} .ringdec{display:none} }

/* ── solutions ─────────────────────────────────────────────────────────── */
.solutions{background:#fff}
.sgrid{display:grid;gap:var(--sp-4);margin-top:clamp(36px,4vw,56px)}
@media(min-width:640px){ .sgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){
  /* asymmetric on purpose: compliance is the position, so it gets the room */
  /* 4 columns x 2 rows = 8 cells: the feature takes 2, the other six take one
     each, so the grid closes with no ragged gap */
  .sgrid{grid-template-columns:repeat(4,1fr)}
  .scard--feature{grid-column:span 2}
}
.scard{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-6);border:1px solid var(--surface-line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-rest);
  transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),
             border-color 200ms var(--ease-out),background 200ms var(--ease-out)}
.scard:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--sh-lift);
  border-color:var(--sky-blue);background:var(--surface-hi)}
.scard:active{transform:translateY(2px) scale(.98);box-shadow:var(--sh-press);transition-duration:100ms}
.scard__art{width:96px;height:96px;object-fit:contain;border-radius:50%;padding:4px;
  background:radial-gradient(circle at 50% 46%,rgba(206,225,255,.95),rgba(228,238,255,.5) 56%,transparent 70%);
  filter:drop-shadow(0 8px 14px rgba(11,19,43,.14));
  transition:transform 380ms var(--ease-expo),filter 320ms var(--ease-out),
             background 320ms var(--ease-out)}
.scard:hover .scard__art{transform:translateY(-6px) scale(1.07);
  filter:drop-shadow(0 16px 24px rgba(29,78,216,.3));
  background:radial-gradient(circle at 50% 46%,rgba(190,215,255,1),rgba(220,233,255,.6) 58%,transparent 72%)}
/* dotted grid corner mark, matching the supplied comp */
.scard::before{content:'';position:absolute;left:18px;top:18px;width:42px;height:34px;
  background-image:radial-gradient(rgba(29,78,216,.2) 1.4px,transparent 1.4px);
  background-size:9px 9px;opacity:.8;pointer-events:none}
.scard h3{font-size:18px;line-height:25px;font-weight:700;color:var(--primary-blue);letter-spacing:-.01em}
.scard p{font-size:14.5px;line-height:22px;color:var(--n-600);flex:1}
.scard .link{font-size:14px;margin-top:auto}
.scard--feature{border-color:var(--sky-blue);
  background:linear-gradient(155deg,#E2ECFC 0%,#EDF3FD 52%,#F4F8FE 100%);
  box-shadow:var(--sh-card),0 0 0 4px rgba(29,78,216,.07);gap:var(--sp-4)}
.scard--feature:hover{background:linear-gradient(155deg,#E9F1FE 0%,#F5F9FE 52%,#FFFFFF 100%)}
@media(min-width:1000px){
  .scard--feature{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto auto;align-items:center;column-gap:var(--sp-8);row-gap:var(--sp-3);
    padding:var(--sp-8)}
  .scard--feature .scard__art{grid-row:1 / span 3;justify-self:center}
  .scard--feature::before{left:22px;top:22px}
}
.scard--feature .scard__art{width:150px;height:150px;padding:6px}
.scard--feature h3{font-size:clamp(20px,1.8vw,26px);line-height:1.24;letter-spacing:-.015em}
.scard--feature p{font-size:16px;line-height:26px;max-width:44ch}
.scard--feature .link{font-size:15px}

/* ── sectors ───────────────────────────────────────────────────────────── */
.sectors{background:#fff}
.secgrid{display:grid;gap:var(--sp-4);margin-top:clamp(36px,4vw,56px)}
@media(min-width:620px){ .secgrid{grid-template-columns:repeat(2,1fr)} }
/* Three across, twice. Six sectors in a four-column grid left a two-card orphan
   row, which reads as a gap rather than as a layout. */
@media(min-width:1080px){ .secgrid{grid-template-columns:repeat(3,1fr)} }
.seccard{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--r-xl);
  box-shadow:var(--sh-rest);padding-bottom:5px;
  transition:transform 300ms var(--ease-expo),box-shadow 300ms var(--ease-out),
             border-color 300ms var(--ease-out),background 300ms var(--ease-out)}
.seccard:hover{box-shadow:var(--sh-lift);border-color:var(--sky-blue);background:var(--surface-hi)}
/* explicit height, not aspect-ratio: the illustrations have different natural
   sizes and would otherwise stretch the box past its ratio, misaligning titles */
.seccard__scene{position:relative;display:grid;place-items:center;
  padding:var(--sp-6) var(--sp-4) var(--sp-2);
  height:clamp(186px,15.5vw,224px);min-height:0}
/* the soft disc behind the illustration, per the supplied comp */
.seccard__scene::before{content:'';position:absolute;left:50%;top:46%;width:74%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(214,230,255,.85),rgba(230,240,255,.35) 62%,transparent 72%);
  transition:transform 500ms var(--ease-expo),opacity 300ms var(--ease-out)}
.seccard:hover .seccard__scene::before{transform:scale(1.1);opacity:.9}
/* dotted grid corner marks, also from the comp */
.seccard__scene::after{content:'';position:absolute;left:16px;top:16px;width:46px;height:38px;
  background-image:radial-gradient(rgba(29,78,216,.22) 1.4px,transparent 1.4px);
  background-size:9px 9px;opacity:.85}
/* the four illustrations have different natural ratios, so they are fitted
   inside a fixed box rather than sized by width alone: keeps titles aligned */
/* fixed height on the illustration itself: percentage max-height did not
   constrain these against the grid area, so they spilled over the copy */
.seccard__scene img{position:relative;height:clamp(138px,11.6vw,172px);width:auto;max-width:88%;
  object-fit:contain;transition:transform 600ms var(--ease-expo)}
.seccard:hover .seccard__scene img{transform:translateY(-8px) scale(1.04)}
.seccard__body{padding:0 var(--sp-6) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.seccard h3{font-size:19px;line-height:26px;font-weight:700;color:var(--primary-blue);letter-spacing:-.01em}
.seccard__rule{display:block;width:34px;height:3px;border-radius:3px;background:var(--primary-blue);
  transform-origin:left;transition:transform 320ms var(--ease-expo)}
.seccard:hover .seccard__rule{transform:scaleX(1.7)}
.seccard p{font-size:13.5px;line-height:20px;color:var(--n-600);flex:1}
.seccard__cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;
  color:var(--primary-blue);margin-top:auto}
.seccard__cta svg{flex:none;transition:transform var(--dur-micro) var(--ease-out)}
.seccard:hover .seccard__cta svg{transform:translateX(4px)}
/* blue foot bar grows across the card on hover */
.seccard__foot{position:absolute;inset:auto 0 0 0;height:5px;background:var(--primary-blue);
  transform:scaleX(.34);transform-origin:left;
  transition:transform 420ms var(--ease-expo),background 300ms var(--ease-out)}
.seccard:hover .seccard__foot{transform:scaleX(1);
  background:linear-gradient(90deg,var(--primary-blue),var(--info))}

/* ── pillars ───────────────────────────────────────────────────────────── */
.pillars{background:#fff}
.pillars__in{display:grid;gap:clamp(36px,4vw,64px)}
@media(min-width:980px){
  .pillars__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .pillars__head{position:sticky;top:112px}
}
.plist{display:grid;gap:var(--sp-4)}
/* the three pillars are the one place the page goes dark on a light band:
   maximum separation for the claims that carry the positioning */
.pill{position:relative;overflow:hidden;padding:clamp(26px,2.8vw,34px);
  border:1px solid rgba(148,180,232,.22);border-radius:var(--r-xl);
  background:linear-gradient(152deg,#16294F 0%,#0E1B36 58%,#122343 100%);
  box-shadow:0 14px 34px rgba(11,19,43,.22);
  transition:transform 240ms var(--ease-expo),box-shadow 240ms var(--ease-out),
             border-color 240ms var(--ease-out),background 240ms var(--ease-out)}
.pill::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(58% 70% at 88% 0%,rgba(61,116,240,.4),transparent 66%);
  transition:opacity 320ms var(--ease-out)}
.pill:hover{transform:translateY(-6px);border-color:rgba(180,208,255,.44);
  box-shadow:0 22px 48px rgba(11,19,43,.3);
  background:linear-gradient(152deg,#1B3160 0%,#122443 58%,#173058 100%)}
.pill:hover::after{opacity:1}
.pill>*{position:relative;z-index:1}
.pill h3{font-size:clamp(19px,1.7vw,23px);line-height:1.32;font-weight:700;color:#fff;
  letter-spacing:-.01em}
.pill p{font-size:15.5px;line-height:25px;color:#BCCBE4;margin-top:10px;max-width:56ch}
.proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px dashed rgba(148,180,232,.28)}
.proof span{font-size:12.5px;line-height:18px;font-weight:500;color:#CFE0FF;
  background:rgba(61,116,240,.22);border:1px solid rgba(150,190,255,.32);
  border-radius:var(--r-sm);padding:6px 11px}

/* ── process ───────────────────────────────────────────────────────────── */
.process{background:var(--soft-blue);border-block:1px solid var(--n-200)}
.steps{position:relative;margin-top:clamp(40px,4.4vw,64px);display:grid;gap:var(--sp-6)}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
  .steps::before{content:'';position:absolute;top:22px;left:8.33%;right:8.33%;height:2px;
    background-image:linear-gradient(90deg,var(--n-300) 50%,transparent 50%);
    background-size:9px 2px;background-repeat:repeat-x}
  .steps::after{content:'';position:absolute;top:22px;left:8.33%;right:8.33%;height:2px;
    background:var(--primary-blue);transform-origin:left;transform:scaleX(var(--p,0));
    transition:transform 420ms var(--ease-out)}
}
.step{position:relative;text-align:left}
@media(min-width:900px){ .step{text-align:center} }
.step__no{position:relative;z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;
  border:2px solid var(--n-300);display:grid;place-items:center;font-size:14px;font-weight:700;
  color:var(--n-500);
  transition:border-color 520ms var(--ease-out),color 520ms var(--ease-out),
             background 520ms var(--ease-out),box-shadow 520ms var(--ease-out),
             transform 520ms var(--ease-expo)}
@media(min-width:900px){ .step__no{margin-inline:auto} }
.step.is-on .step__no{border-color:var(--primary-blue);background:var(--primary-blue);color:#fff;
  box-shadow:0 0 0 7px rgba(29,78,216,.12);transform:scale(1.06)}
.step h3{font-size:15.5px;line-height:22px;font-weight:700;color:var(--n-900);margin-top:var(--sp-4);
  transition:color 520ms var(--ease-out)}
.step p{font-size:13.5px;line-height:20px;color:var(--n-600);margin-top:6px}

/* ── case study ────────────────────────────────────────────────────────── */
.case{background:#fff}
.case__in{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media(min-width:960px){ .case__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }
.case__fig{position:relative;border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-floating)}
.case__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.case__fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(29,78,216,.22),rgba(29,78,216,.05))}
.case__badge{position:absolute;z-index:2;left:var(--sp-6);bottom:var(--sp-6);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:var(--r-lg);
  padding:14px 18px;box-shadow:var(--sh-card)}
.case__badge b{display:block;font-size:26px;line-height:1.1;font-weight:700;color:var(--n-900);
  font-variant-numeric:tabular-nums}
.case__badge span{display:block;font-size:12.5px;line-height:18px;color:var(--n-500);margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.kpi{position:relative;overflow:hidden;padding:var(--sp-5);border-radius:var(--r-lg);
  background:#E7EEFA;border:1px solid var(--surface-line);
  transition:transform 260ms var(--ease-expo),box-shadow 260ms var(--ease-out),
             border-color 260ms var(--ease-out),background 260ms var(--ease-out)}
.kpi::after{content:'';position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--primary-blue),var(--info));
  transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease-expo)}
.kpi:hover{transform:translateY(-5px);border-color:var(--sky-blue);
  background:linear-gradient(135deg,#E4EEFF 0%,#F6F9FF 62%,#EDF3FF 100%);
  box-shadow:0 14px 30px rgba(29,78,216,.16)}
.kpi:hover::after{transform:scaleX(1)}
.kpi b{transition:color 260ms var(--ease-out)}
.kpi:hover b{color:var(--primary-blue-400)}
.kpi b{display:block;font-size:24px;line-height:1.15;font-weight:700;color:var(--primary-blue);
  font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:13.5px;line-height:19px;color:var(--n-600);margin-top:5px}

/* ── NAPS estimator ────────────────────────────────────────────────────── */
.naps{background:var(--n-50);border-block:1px solid var(--n-200)}
.naps__card{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,var(--light-blue) 0%,#fff 62%);
  border:1px solid var(--sky-blue);box-shadow:var(--sh-card);
  padding:clamp(28px,3.6vw,52px);display:grid;gap:var(--sp-8);align-items:center}
@media(min-width:900px){ .naps__card{grid-template-columns:minmax(0,1fr) auto} }
.naps__card::before{content:'';position:absolute;right:-6%;top:-40%;width:46%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(29,78,216,.16),transparent 68%)}
.naps__ico{width:80px;height:80px;border-radius:var(--r-xl);background:#fff;display:grid;
  place-items:center;box-shadow:var(--sh-card);margin-bottom:var(--sp-5)}
.naps__ico img{width:56px;height:56px}
.naps__side{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);min-width:230px}
.naps__side .small{color:var(--n-500)}

/* ── insights ──────────────────────────────────────────────────────────── */
.insights{background:#fff}
.igrid{display:grid;gap:var(--sp-4);margin-top:clamp(36px,4vw,56px)}
@media(min-width:760px){ .igrid{grid-template-columns:repeat(3,1fr)} }
.icard{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);
  border:1px solid var(--surface-line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-rest);
  transition:transform 220ms var(--ease-expo),box-shadow 220ms var(--ease-out),
             border-color 220ms var(--ease-out),background 220ms var(--ease-out)}
.icard:hover{transform:translateY(-8px);box-shadow:var(--sh-lift);border-color:var(--sky-blue);
  background:var(--surface-hi)}
.icard__meta{display:flex;align-items:center;gap:10px;font-size:12px;line-height:16px;color:var(--n-500)}
.icard__meta em{font-style:normal;font-weight:500;color:var(--primary-blue-700);background:#DCE7FA;
  border:1px solid #C3D6F3;border-radius:var(--r-sm);padding:4px 9px}
.icard h3{font-size:17.5px;line-height:25px;font-weight:700;color:var(--n-900);letter-spacing:-.01em;flex:1}

/* ── closing CTA ───────────────────────────────────────────────────────── */
.cta{position:relative;background:var(--deep-navy);overflow:clip;isolation:isolate}
.cta::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(56% 62% at 78% 46%,rgba(29,78,216,.4),transparent 68%)}
.cta__in{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media(min-width:940px){ .cta__in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)} }
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.cta__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-8);
  padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#A9BAD4}
.cta__meta b{color:#fff;font-weight:500}

/* orbit built in CSS so it belongs to the navy, rather than sitting on it */
.cta__art{display:grid;place-items:center}
.cta__orb{position:relative;width:min(100%,420px);aspect-ratio:1;display:grid;place-items:center;
  --r:clamp(108px,15vw,168px)}
.cta__ring{position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(214,230,255,.22);
  animation:orbit 34s linear infinite}
.cta__ring--2{inset:2%;border-color:rgba(214,230,255,.14);animation-duration:46s;animation-direction:reverse}
.cta__ring--3{inset:27%;border-color:rgba(214,230,255,.28);border-style:dashed;animation-duration:60s}
.cta__core{position:relative;z-index:2;width:96px;height:96px;border-radius:50%;display:grid;
  place-items:center;font-size:38px;font-weight:700;color:#fff;letter-spacing:-.03em;
  background:radial-gradient(circle at 34% 28%,#3B6BE8,#1D4ED8 62%);
  box-shadow:0 0 60px rgba(29,78,216,.75),inset 0 -6px 16px rgba(3,8,20,.35)}
.cta__lbl{position:absolute;left:50%;top:calc(50% + 62px);translate:-50% 0;text-align:center;
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#9FB4D6;z-index:2}
.cta__sat{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:var(--r-lg);display:grid;place-items:center;
  background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(3,8,20,.4);
  transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  animation:float 3.4s var(--ease-in-out) infinite alternate;animation-delay:var(--d,0s)}
.cta__sat img{width:36px;height:36px}
.cta__sat--1{--a:-90deg;--d:-.2s}
.cta__sat--2{--a:-38.6deg;--d:-1.1s}
.cta__sat--3{--a:12.9deg;--d:-2s}
.cta__sat--4{--a:64.3deg;--d:-.7s}
.cta__sat--5{--a:115.7deg;--d:-1.6s}
.cta__sat--6{--a:167.1deg;--d:-2.5s}
.cta__sat--7{--a:-141.4deg;--d:-1.3s}
@media(max-width:520px){
  .cta__orb{--r:clamp(92px,30vw,120px)}
  .cta__sat{width:46px;height:46px;margin:-23px 0 0 -23px}
  .cta__sat img{width:28px;height:28px}
  .cta__core{width:78px;height:78px;font-size:30px}
}

/* ── footer ────────────────────────────────────────────────────────────── */
/* the closing CTA is the darkest point; the footer steps back up in tone so
   the page does not end on two near-identical dark slabs */
.foot{position:relative;color:#B9C7DD;padding-block:clamp(48px,6vw,80px) var(--sp-8);
  background:linear-gradient(180deg,#1B2A47 0%,#16233C 58%,#131E33 100%)}
.foot::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,230,255,.34),transparent)}
.foot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 70% at 84% 0%,rgba(29,78,216,.24),transparent 68%)}
.foot>*{position:relative;z-index:1}
.foot__top{display:grid;gap:clamp(32px,3.4vw,48px)}
@media(min-width:760px){ .foot__top{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .foot__top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr} }
/* the logo is full colour, so it gets its own light plate on the dark band */
/* the site ships a white-knockout logo, so no plate is needed on the dark band */
.foot__logo{display:inline-flex}
.foot__logo img{width:auto;height:66px}
.foot__blurb{font-size:14px;line-height:22px;color:#9DAECA;margin-top:var(--sp-5);max-width:34ch}
.foot h4{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#fff;
  margin-bottom:var(--sp-4)}
.foot__top li+li{margin-top:11px}
.foot a{font-size:14.5px;line-height:21px;color:#C2CFE4;transition:color var(--dur-micro) var(--ease-out)}
.foot a:hover{color:#fff}
.foot__nap{font-size:14px;line-height:22px;color:#9DAECA}
.foot__nap b{display:block;color:#fff;font-weight:500;margin-bottom:4px;font-size:14.5px}
.foot__nap p+p{margin-top:var(--sp-4)}
.social{display:flex;gap:10px;margin-top:var(--sp-6)}
.social a{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);color:#C2CFE4;
  transition:border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out)}
.social a:hover{border-color:var(--sky-blue);color:#fff;background:rgba(255,255,255,.06)}
.foot__legal{margin-top:clamp(36px,4vw,56px);padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  align-items:center;justify-content:space-between;font-size:13px;color:#93A4C1}
.foot__legal ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6)}
.foot__legal li{margin-top:0}
.foot__legal a{font-size:13px;color:#93A4C1}

/* ── keyframes ─────────────────────────────────────────────────────────── */
@keyframes orbit{ to{ transform:rotate(360deg) } }
@keyframes float{ from{ translate:0 0 } to{ translate:0 -11px } }
@keyframes softglow{ 0%,100%{ opacity:.62;scale:1 } 50%{ opacity:1;scale:1.06 } }
@keyframes slide{ to{ transform:translateX(-50%) } }
/* the service cards trace a slow ellipse, so they read as circling the group */
@keyframes drift{
  0%   { translate:0 0 }
  25%  { translate:7px -9px }
  50%  { translate:0 -15px }
  75%  { translate:-7px -8px }
  100% { translate:0 0 }
}

/* ── scroll reveal (DS §19.1 — 600ms · ease-out · 100ms stagger) ───────── */
.js .reveal{opacity:0;transform:translateY(28px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform 900ms var(--ease-expo)}
.js .reveal.is-in{opacity:1;transform:none}
/* transitions freeze in hidden tabs and headless renderers, so the fallback
   path must land on the finished state without animating */
.js .reveal.force-in{opacity:1!important;transform:none!important;transition:none!important}
.js .reveal--left{transform:translateX(-30px)}
.js .reveal--right{transform:translateX(30px)}
.js .reveal--scale{transform:scale(.955) translateY(20px)}

/* section-level parallax, driven from script and applied transform-only */
.js [data-par]{will-change:transform}

/* ── reduced motion (DS §21) ───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .scene__inner{transform:none!important}
  .thread img{transform:none!important}
}

/* ── calculator nudge ──────────────────────────────────────────────────── */
/* Bottom-right on a desktop, a full-width bar on a phone. It stores nothing, so
   it reappears on a fresh load: that is the deliberate trade for the cookie
   policy's claim that this site writes nothing to your device. */
.promo{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:70;
  width:min(374px,calc(100vw - 28px));display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  background:#fff;border:1px solid var(--sky-blue);border-radius:var(--r-xl);
  box-shadow:0 18px 44px rgba(11,19,43,.18);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-expo)}
.promo[hidden]{display:none}
.promo.is-on{opacity:1;transform:none;pointer-events:auto}
.promo img{flex:none;margin-top:2px}
.promo__b{display:flex;flex-direction:column;gap:5px;min-width:0}
.promo__b b{font-size:15px;line-height:21px;font-weight:700;color:var(--n-900);padding-right:18px}
.promo__b span{font-size:13px;line-height:19px;color:var(--n-600)}
.promo__cta{display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  font-size:13.5px;font-weight:700;color:var(--primary-blue);text-decoration:none}
.promo__cta:hover{text-decoration:underline}
.promo__cta svg{transition:transform 200ms var(--ease-out)}
.promo__cta:hover svg{transform:translateX(3px)}
.promo__x{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;
  place-items:center;border:0;border-radius:50%;background:transparent;color:var(--n-500);
  cursor:pointer;transition:background 180ms var(--ease-out),color 180ms var(--ease-out)}
.promo__x:hover{background:var(--light-blue);color:var(--primary-blue)}
.promo__x:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}
@media(max-width:560px){
  .promo{right:12px;left:12px;bottom:12px;width:auto}
  .promo__b span{font-size:12.5px;line-height:18px}
}
@media(prefers-reduced-motion:reduce){ .promo{transition:opacity 200ms linear;transform:none} }