/* ============================================================
   DESIGN TOKENS
   Palette: drawn straight from the logo — Navy #192E5B (structure) and
   Red #DE5357 (signal). Navy carries grounds, bands and body ink; red is
   the accent: CTAs, links, focus rings, active states.
   Each theme takes the red at the lightness that ground can carry.
   ============================================================ */
:root{
  /* ===== BRAND ===== */
  --brand:#192E5B;        /* PRIMARY — logo navy: hero band, grounds, ink */
  --brand-deep:#0F1D3C;   /* hover / pressed */
  --brand-ink:#0A1224;    /* deepest navy — chips, scrims */
  --brand-tint:#7192D6;   /* lifted navy for dark grounds */
  --ink:#192E5B;          /* body ink on light — the same navy */

  /* ACCENT — logo red. Three stops, one per ground:
     --accent      the logo value itself; large fills and the mark
     --accent-deep darkened for light grounds (4.9:1 on #F5F6FA)
     --accent-tint lifted for dark grounds   (7.1:1 on #070E1C) */
  --accent:#DE5357;
  --accent-deep:#BE383C;  /* AA on the light ground AND on --surface-2 (4.6:1) */
  --accent-tint:#EC7B7E;

  --navy:#192E5B;         /* legacy alias -> --brand */
  --saguaro-deep:#0F1D3C;
  --ocotillo:var(--accent);  /* legacy alias -> --accent */
  --violet:#3E5C9A;       /* steel navy — data / process */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;

  /* ===== TYPE =====
     One typeface across the whole site: Inter carries display, body and the
     small tracked labels. Only genuinely tabular/code content stays monospaced
     (the hero terminal, the copy-this-message <pre>), because those need a
     fixed advance width — everything else reads better on Inter. */
  --ff-display:"Inter",-apple-system,system-ui,"Segoe UI",sans-serif;
  --ff-body:"Inter",-apple-system,system-ui,"Segoe UI",sans-serif;
  --ff-mono:"Inter",-apple-system,system-ui,"Segoe UI",sans-serif;  /* UI labels */
  --ff-code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* label scale — small tracked uppercase. 11.5px floor: 10px uppercase at
     .2em tracking was below the point where it stays comfortably readable. */
  --fs-label:.72rem;
  --fs-label-sm:.685rem;
  --ls-label:.13em;

  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);

  /* vertical rhythm — one scale, so every band breathes the same way */
  --sp-sec:clamp(56px,8vw,104px);   /* between major sections */
  --sp-head:clamp(32px,4.4vw,52px); /* section head -> its content */

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
/* DARK (default) */
[data-theme="dark"]{
  --bg:#070E1C;
  --bg-2:#101C36;                /* brand-tinted panel: footer, CTA base */
  --saguaro:var(--accent-tint);  /* accent that survives a dark ground */
  --logo-ink:#EAF0FA;
  --logo-brand:var(--accent-tint);
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --text:#EAF0FA;
  --text-2:#93A1BF;
  --text-3:#7585A4;              /* AA (>=4.5:1) on bg, bg-2, surface and surface-2 */
  --field-line:rgba(255,255,255,.38);  /* 1.4.11: form control boundary, >=3:1 */
  /* diagram palette — plates lifted off the ground, accent that actually reads */
  --dg-p1:#1B2A48; --dg-p2:#131E36;
  --dg-a1:#E4666A; --dg-a2:#B8383C;
  --dg-edge:rgba(150,175,220,.42);
  --dg-rule:rgba(150,175,220,.34);
  --dg-accent-edge:#F08D90;
  --dg-cast:rgba(0,0,0,.45);
  --dg-accent-cast:rgba(222,83,87,.42);
  --dg-accent-cast-hi:rgba(222,83,87,.62);
  --dg-ground-1:#101C36; --dg-ground-2:#0A1327;
  --on-accent:#2B0C0E;           /* text/icons sitting ON an accent fill */
  --glow:0 0 0 1px rgba(255,255,255,.35), 0 0 40px -8px rgba(255,255,255,.45);
  --shadow:0 24px 60px -24px rgba(0,0,0,.9);
  --grid-line:rgba(255,255,255,.045);
}
/* LIGHT */
[data-theme="light"]{
  --bg:#F5F6FA;
  --bg-2:#FFFFFF;
  --saguaro:var(--accent-deep);
  --logo-ink:var(--ink);
  --logo-brand:var(--accent);
  --surface:rgba(10,11,15,.025);
  --surface-2:rgba(10,11,15,.045);
  --line:rgba(10,11,15,.10);
  --line-strong:rgba(10,11,15,.20);
  --text:#192E5B;                /* secondary / ink — body copy */
  --text-2:#4A5A7C;
  --text-3:#5E6A83;              /* AA (>=4.5:1) on bg, bg-2, surface and surface-2 */
  --field-line:rgba(10,11,15,.46);     /* 1.4.11: form control boundary, >=3:1 */
  /* diagram palette — plates lifted off the ground, accent that actually reads */
  --dg-p1:#FFFFFF; --dg-p2:#E7EBF5;
  --dg-a1:#F5A2A4; --dg-a2:#DE5357;
  --dg-edge:rgba(25,46,91,.30);
  --dg-rule:rgba(25,46,91,.26);
  --dg-accent-edge:#BE383C;
  --dg-cast:rgba(25,46,91,.16);
  --dg-accent-cast:rgba(190,56,60,.26);
  --dg-accent-cast-hi:rgba(190,56,60,.42);
  --dg-ground-1:#EDF0F7; --dg-ground-2:#FFFFFF;
  --on-accent:#FFFFFF;
  --glow:0 0 0 1px rgba(255,255,255,.4), 0 0 40px -10px rgba(255,255,255,.35);
  --shadow:0 24px 60px -30px rgba(10,18,36,.35);
  --grid-line:rgba(10,11,15,.05);
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding keeps an anchored heading clear of the 72px sticky nav —
   without it every in-page jump parks the target underneath the header. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:16px;line-height:1.65;
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
/* Inter needs a little more leading than the old display face did — 1.03 clipped
   descenders as soon as a heading wrapped to a second line. Optical tracking is
   tightened at display sizes and released again for the small headings. */
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);margin:0;line-height:1.14;
  letter-spacing:-.022em;font-weight:700;text-wrap:balance}
h1,h2{line-height:1.07;letter-spacing:-.034em}
h3,h4,h5,h6{letter-spacing:-.016em}
p{margin:0;text-wrap:pretty}
/* Focus ring: an accent ring plus a ground-coloured halo, so it stays visible on
   a card, on the navy hero band and on an accent fill alike (WCAG 2.4.7/2.4.11). */
:focus-visible{outline:3px solid var(--saguaro);outline-offset:3px;border-radius:4px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--bg) 78%,transparent)}
.hero :focus-visible,.page-banner :focus-visible,.nx-aside :focus-visible{
  outline-color:#fff;box-shadow:0 0 0 6px rgba(25,46,91,.85)}
::selection{background:var(--saguaro);color:var(--on-accent)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--saguaro);flex:none}
/* Skip link — moved off-screen with a transform rather than left:-9999px, so it
   animates into place and never widens the document. */
.skip{position:fixed;left:12px;top:12px;z-index:999;
  background:var(--saguaro);color:var(--on-accent);padding:12px 20px;border-radius:var(--r-sm);
  font-weight:600;font-size:.9rem;box-shadow:var(--shadow);
  transform:translateY(-160%);transition:transform .25s var(--ease)}
.skip:focus{transform:none}

/* ---- Ambient liquid gradient canvas (GPU: transform/opacity only) ---- */
#liquid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{position:relative;z-index:2}

/* ---- Scroll reveal (IntersectionObserver driven) ---- */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-dir="left"]{transform:translate3d(-32px,0,0)}
[data-reveal][data-dir="scale"]{transform:scale(.94)}

/* ---- Scroll progress rail ---- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:100;transform-origin:0 50%;
  transform:scaleX(0);background:#192E5B}

/* ============================ NAV ============================ */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(20px) saturate(160%);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:72px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--ff-display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em}
/* ---- brand mark: two-tone SVG, repaints with the theme ---- */
.logo-svg{height:24px;width:auto;display:block;overflow:visible}
.logo-svg .lg-ink{fill:var(--logo-ink);stroke:var(--logo-ink)}
.logo-svg .lg-brand{fill:var(--logo-brand);stroke:var(--logo-brand)}
.logo:hover .logo-svg .lg-brand{fill:var(--saguaro);stroke:var(--saguaro)}
.logo-svg .lg-ink,.logo-svg .lg-brand{transition:fill .45s var(--ease),stroke .45s var(--ease)}
.f-logo .logo-svg{height:27px}
@media (max-width:420px){.logo-svg{height:17px}}
.logo em{font-style:normal;color:var(--text-3);font-weight:600}
.nav-links{display:flex;align-items:center;gap:2px;margin:auto}
.nav-links li{display:flex;align-items:center}
.nav-links a{position:relative;display:flex;align-items:center;padding:9px 14px;border-radius:99px;font-size:.875rem;font-weight:500;color:var(--text-2);
  transition:color .3s var(--ease),background .3s var(--ease)}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
/* Wayfinding: the section you are in is named, not just implied. The underline
   is a second, non-colour cue so it does not rely on hue alone (WCAG 1.4.1). */
.nav-links > li > a[aria-current="page"]{color:var(--text);font-weight:600}
.nav-links > li > a[aria-current="page"]::after{content:"";position:absolute;
  left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--saguaro)}
.dropdown a[aria-current="page"]{background:var(--surface-2);color:var(--saguaro)}
.nav-tools{display:flex;align-items:center;gap:10px}

/* Theme toggle — physical switch, animates the knob */
.theme-btn{width:58px;height:31px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);
  position:relative;flex:none;transition:background .35s var(--ease)}
.theme-knob{position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;
  background:var(--text);display:grid;place-items:center;color:var(--bg);
  transition:transform .5s var(--ease-spring),background .35s var(--ease)}
[data-theme="light"] .theme-knob{transform:translateX(27px);background:var(--saguaro-deep);color:#fff}
.theme-knob svg{width:14px;height:14px}

.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);place-items:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);transition:transform .4s var(--ease),opacity .3s}
.burger span+span{margin-top:5px}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;min-height:48px;border-radius:99px;
  font-family:var(--ff-body);font-weight:600;font-size:.925rem;letter-spacing:-.01em;
  line-height:1.25;text-align:center;position:relative;overflow:hidden;
  transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform}
.btn svg{width:16px;height:16px;flex:none;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.985)}
/* a disabled or in-flight action still has to read as a button, just an inert one */
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none;cursor:not-allowed}
.btn-primary{background:var(--saguaro);color:var(--on-accent);box-shadow:0 8px 30px -10px color-mix(in srgb,var(--saguaro) 60%,transparent)}
.btn-primary:hover{box-shadow:0 16px 44px -12px color-mix(in srgb,var(--saguaro) 70%,transparent)}
.btn-ghost{border:1px solid var(--field-line);color:var(--text);background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--saguaro);color:var(--saguaro)}
/* 2.5.8 target size: the small variant still clears 44px of hit area */
.btn-sm{padding:11px 20px;min-height:44px;font-size:.85rem}
/* magnetic hover is applied via JS translate on .magnetic */

/* ============================ HERO — split + live terminal ============================
   Ported from index_02: dark editorial band (theme-independent) carrying an aurora
   canvas, a rotating industry word, a live typing terminal, parallax float chips
   and a stat rail. Re-tokenised onto this file's design system (--saguaro / --ff-*).
   ============================================================================== */
/* .mono is the escape hatch for content that genuinely needs a fixed advance
   width — the hero terminal and the copy-this-message blocks. Everything else
   on the site, small tracked labels included, is Inter. */
.mono,code,kbd,samp,pre{font-family:var(--ff-code);font-weight:400}

.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,13vh,138px) var(--pad) clamp(56px,7vh,76px);
  overflow:hidden;background:#192E5B;color:#EAF0FA;isolation:isolate;
}
[data-theme="light"] .hero{background:#192E5B}
/* hero band is always brand blue -> its primary button stays white-on-brand */
.hero .btn-primary{background:#FFFFFF;color:var(--brand);box-shadow:0 8px 30px -10px rgba(255,255,255,.55)}
.hero .btn-primary:hover{box-shadow:0 16px 44px -12px rgba(255,255,255,.6)}

.hero-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.9}
.hero-grid-lines{
  position:absolute;inset:0;z-index:1;opacity:.16;
  background-image:linear-gradient(rgba(25,46,91,.25) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(25,46,91,.25) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 75%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 8px;border-radius:99px;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
  font-family:var(--ff-mono);font-weight:600;font-size:.755rem;letter-spacing:.02em;color:#EAF0FA;margin-bottom:26px;
}
.hero-eyebrow b{background:#ffffff;color:var(--brand);padding:3px 9px;border-radius:99px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pulse{width:7px;height:7px;border-radius:50%;background:#ffffff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}55%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}

h1{font-size:clamp(2.6rem,7.4vw,5.6rem);font-weight:800;letter-spacing:-.045em}
.hero h1{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:700;max-width:20ch;
  margin-bottom:8px;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
/* the rotating industry word: a clipped grid cell whose wrapper is width-animated
   by the rotator in index.html, so the underline glides instead of snapping */
.hero h1 .rot-wrap{display:inline-grid;position:relative;vertical-align:bottom;overflow:hidden;
  color:#F2898C;border-bottom:3px solid rgba(255,255,255,.5);
  transition:width .6s var(--ease)}
.hero h1 .rot{grid-area:1/1;transition:transform .6s var(--ease),opacity .5s;white-space:nowrap}
/* outgoing word lifts out of the clipped box; .pre parks the incoming one below it */
.hero h1 .rot.out{transform:translateY(-110%);opacity:0}
.hero h1 .rot.pre{transition:none;transform:translateY(110%);opacity:0}
/* offscreen twin used only to measure the next word's width */
.hero h1 .rot-ghost{position:absolute;left:-9999px;top:0;visibility:hidden;
  white-space:nowrap;pointer-events:none}

.hero-sub{font-family:var(--ff-display);font-size:clamp(1.05rem,2vw,1.42rem);font-weight:600;
  color:#C2CCE4;margin:18px 0 20px;letter-spacing:-.015em;line-height:1.35}
.hero-answer{max-width:62ch;color:#A3AECB;font-size:1rem;line-height:1.72;margin-bottom:36px}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:0}
.hero-cta-row .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.05)}
.hero-cta-row .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.65)}

/* split: copy left, live terminal right */
.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,64px);
  align-items:center;margin-bottom:52px}
.hero-visual{position:relative;z-index:2;perspective:1100px;min-height:380px}

.terminal{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:rgba(8,24,42,.74);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 60px -20px rgba(255,255,255,.3);
  transform:rotateY(-6deg) rotateX(3deg);transition:transform .6s var(--ease);will-change:transform;
}
.t-head{display:flex;align-items:center;gap:8px;padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.td{width:11px;height:11px;border-radius:50%}
.td.r{background:#FF6B6B}.td.y{background:#FED330}.td.g{background:#2ECC71}
.t-title{margin-left:10px;font-size:.72rem;color:#8E9BBC;letter-spacing:.06em}
.t-body{padding:20px 18px 24px;font-size:.8rem;line-height:1.9;color:#B9C2DC;
  min-height:262px;white-space:pre-wrap;margin:0}
.t-body .k{color:#8FA8E0}.t-body .f{color:#F2898C}.t-body .s{color:#9BE0B0}.t-body .c{color:#67739A}
.t-caret{display:inline-block;width:8px;height:15px;background:#ffffff;
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.t-status{display:flex;gap:10px;align-items:center;padding:11px 18px;
  border-top:1px solid rgba(255,255,255,.07);font-size:.7rem;color:#8E9BBC}
.t-status .ok{color:#9BE0B0}
.t-status .bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);
  overflow:hidden;position:relative}
.t-status .bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:4px;
  background:#192E5B;animation:load 2.6s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

.float-chip{
  position:absolute;padding:11px 16px;border-radius:14px;font-size:.82rem;font-weight:600;color:#EAF0FA;
  background:rgba(11,42,73,.82);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);white-space:nowrap;will-change:transform;
  animation:floaty 5.5s ease-in-out infinite;
}
.float-chip b{color:#F2898C}
.fc1{top:-22px;left:-26px;animation-delay:0s}
.fc2{top:34%;right:-30px;animation-delay:1.2s}
.fc3{bottom:-6px;left:8%;animation-delay:2.1s}
.fc4{bottom:26%;left:-44px;animation-delay:.6s}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -13px}}

.orbit-ring{position:absolute;inset:-40px -30px;border:1px dashed rgba(255,255,255,.22);
  border-radius:50%;animation:spin 26s linear infinite;pointer-events:none}
.orbit-ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;
  background:#ffffff;box-shadow:0 0 16px rgba(255,255,255,.55)}
@keyframes spin{to{transform:rotate(360deg)}}

/* stat rail */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);justify-items:center;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);padding-top:30px}
.hero-stats .num{font-family:var(--ff-display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;
  color:#fff;letter-spacing:-.04em;line-height:1}
.hero-stats .num em{font-style:normal;color:#F2898C}
.hero-stats .lbl{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);color:#A3AECB;
  letter-spacing:.13em;text-transform:uppercase;margin:9px auto 0;max-width:20ch;
  line-height:1.5;text-wrap:balance}

.scroll-cue{position:relative;z-index:2;align-self:center;margin-top:clamp(44px,6vh,68px);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:#ffffff;
  font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase}
.scroll-cue .wheel{width:24px;height:38px;border:1.5px solid #ffffff;border-radius:14px;position:relative}
.scroll-cue .wheel::after{content:"";position:absolute;top:7px;left:50%;translate:-50%;width:4px;height:8px;
  border-radius:4px;background:#ffffff;animation:wheel 1.8s infinite var(--ease)}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}


/* ============================ SECTIONS ============================
   One vertical scale for the whole site. The old value peaked at 60px, which
   left a 1280px-wide page with less air between two major sections than inside
   a single card — bands ran together instead of reading as separate arguments. */
.sec{padding:var(--sp-sec) 0;position:relative}
/* Two stacked sections each contributed a full band of padding, so the gap
   between them came out at twice the rhythm everywhere else on the page. One
   section owns the space; the next starts flush. */
.sec + .sec,.content-sec + .content-sec,.sec + .content-sec,.content-sec + .sec{padding-top:0}
.sec-head{margin-bottom:var(--sp-head);max-width:74ch}
.sec-head h2{font-size:clamp(1.85rem,4.4vw,3.15rem);margin:16px 0 0;font-weight:700}
/* AEO: snippet-ready answer paragraph directly under every H2 */
.answer{font-size:1.06rem;color:var(--text-2);margin-top:18px;line-height:1.7;
  border-left:2px solid var(--saguaro);padding-left:18px;max-width:68ch}

/* ============================ BENTO (scalable) ============================
   Grid is 12-col; each card declares its own span via data attrs -> adding a
   10th, 20th service needs no layout rewrite, just another <article>.
   ============================================================== */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{display:block;grid-column:span 4;position:relative;padding:26px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform .5s var(--ease),border-color .4s,background .4s;will-change:transform}
.card[data-span="6"]{grid-column:span 6}
.card[data-span="8"]{grid-column:span 8}
.card[data-span="12"]{grid-column:span 12}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);background:var(--surface-2)}
/* dynamic glow border follows cursor */
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,#192E5B 40%,transparent),transparent 62%);
  transition:opacity .4s;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.card:hover::before{opacity:1}
.card-i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);color:var(--saguaro);margin-bottom:18px;transition:transform .5s var(--ease-spring)}
.card:hover .card-i{transform:scale(1.1) rotate(-6deg)}
.card-i svg{width:21px;height:21px}
.card h3{font-size:1.13rem;letter-spacing:-.025em;margin-bottom:9px;font-weight:700}
.card p{font-size:.9rem;color:var(--text-2);line-height:1.62}
.card .num{position:absolute;top:20px;right:24px;font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);color:var(--text-3)}
.card.feat{background:linear-gradient(150deg,color-mix(in srgb,#192E5B 12%,var(--bg-2)),var(--surface));
  border-color:color-mix(in srgb,var(--saguaro) 30%,transparent)}
.card.feat .card-i{background:var(--saguaro);color:var(--on-accent);border-color:transparent}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tag{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);padding:4px 10px;border-radius:99px;border:1px solid var(--line);
  color:var(--text-3);letter-spacing:.05em}
.cap{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r-sm);background:var(--surface-2);
  font-size:.865rem;font-weight:500;transition:transform .35s var(--ease),background .3s}
.cap:hover{transform:translateX(5px);background:color-mix(in srgb,var(--saguaro) 10%,var(--surface-2))}
.cap svg{width:15px;height:15px;color:var(--saguaro);flex:none}
.why{margin-top:26px;padding:20px 22px;border-radius:var(--r-md);border:1px dashed var(--line-strong);
  background:color-mix(in srgb,var(--saguaro) 5%,transparent)}
.why b{display:block;font-family:var(--ff-display);font-size:.95rem;margin-bottom:7px}
.why p{color:var(--text-2);font-size:.9rem}

/* ============================ DIFFERENTIATORS ============================ */
.diffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.diff{background:var(--bg);padding:30px 26px;transition:background .4s var(--ease)}
.diff:hover{background:var(--surface-2)}
.diff .k{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);color:var(--saguaro);letter-spacing:.14em}
.diff h3{font-size:1.05rem;margin:13px 0 8px}
.diff p{font-size:.875rem;color:var(--text-2)}

/* ============================ PROCESS TIMELINE ============================
   Numbering is used here because the phases genuinely are a sequence.
   ============================================================== */
.timeline{position:relative;margin-top:44px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:29px;height:1px;background:var(--line)}
.tl-fill{position:absolute;left:0;top:29px;height:1px;background:var(--saguaro);width:0;
  transition:width 1.4s var(--ease);box-shadow:0 0 12px var(--saguaro)}
.phases{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.phase{cursor:pointer;text-align:left}
.phase .node{width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:var(--bg);
  display:grid;place-items:center;font-family:var(--ff-mono);font-weight:600;font-size:.82rem;color:var(--text-3);
  transition:all .5s var(--ease-spring);position:relative;z-index:2}
.phase:hover .node,.phase.on .node{border-color:var(--saguaro);color:var(--on-accent);background:var(--saguaro);
  transform:scale(1.09);box-shadow:0 0 30px -6px var(--saguaro)}
.phase h3{font-size:.99rem;margin:17px 0 7px}
.phase p{font-size:.83rem;color:var(--text-2);line-height:1.6}

/* ============================ FAQ ============================ */
.faq{max-width:860px}
.q{border-bottom:1px solid var(--line)}
.q-btn{width:100%;display:flex;align-items:center;gap:18px;padding:24px 0;text-align:left;
  font-family:var(--ff-display);font-size:clamp(1.02rem,2vw,1.24rem);font-weight:700;letter-spacing:-.025em;
  transition:color .3s}
.q-btn:hover{color:var(--saguaro)}
.q-ic{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;transition:transform .45s var(--ease-spring),background .3s,border-color .3s}
.q.on .q-ic{transform:rotate(45deg);background:var(--saguaro);border-color:var(--saguaro);color:var(--on-accent)}
.q-ic svg{width:15px;height:15px}
.q-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.q.on .q-body{grid-template-rows:1fr}
.q-body>div{overflow:hidden}
.q-body p{color:var(--text-2);padding-bottom:26px;max-width:660px;font-size:.96rem;line-height:1.75}

/* ============================ CTA BAND ============================ */
.cta-band{border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(34px,5.5vw,68px);
  background:linear-gradient(140deg,color-mix(in srgb,#192E5B 11%,var(--bg-2)),var(--surface));
  position:relative;overflow:hidden;text-align:center}
.cta-band h2{font-size:clamp(1.9rem,4.6vw,3.3rem);margin:0 auto}
.cta-band p{color:var(--text-2);margin:20px auto 0}
.cta-band .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cta-band::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,#192E5B 28%,transparent),transparent 68%);
  right:-160px;bottom:-240px;filter:blur(46px);pointer-events:none}

/* ============================ FOOTER (NAP) ============================ */
/* the old margin-top clamp had a 0vw preferred value, so it always collapsed to
   its 24px floor and the footer sat tight against the closing CTA */
footer{border-top:1px solid var(--line);margin-top:var(--sp-sec);
  padding:clamp(52px,6vw,80px) 0 34px;background:var(--bg-2)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,54px)}
.f-col h4{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;margin-bottom:17px}
.f-col li{margin-bottom:10px}
.f-col a{font-size:.885rem;color:var(--text-2);transition:color .3s,padding-left .3s}
.f-col a:hover{color:var(--saguaro);padding-left:5px}
address{font-style:normal;font-size:.885rem;color:var(--text-2);line-height:1.85}
address b{color:var(--text);font-weight:600}
address a{color:var(--text-2)}
address a:hover{color:var(--saguaro)}
.areas{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line);margin-top:44px;padding-top:24px;font-size:.795rem;color:var(--text-3)}

/* ============================ RESPONSIVE ============================ */
/* homepage "about" intro: copy beside a supporting image */
.about-intro{display:grid;grid-template-columns:1.3fr .9fr;
  gap:clamp(22px,3vw,44px);align-items:start;margin-bottom:var(--sp-head)}
.about-intro h2{margin:16px 0 0;font-size:clamp(1.85rem,4.4vw,3.15rem)}
/* aspect-ratio on the frame reserves the space before the photo arrives, so
   the copy beside it never jumps when the image finally decodes */
.about-shot{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(155deg,#1E2F57,#0A1224);
  box-shadow:0 20px 60px -20px rgba(10,18,36,.4)}
.about-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .about-intro{grid-template-columns:1fr}
  .about-shot{aspect-ratio:16/9;margin-top:28px}
}

@media(max-width:1080px){
  .hero-split{grid-template-columns:1fr;gap:38px}
  .hero{min-height:auto}
  .hero h1{max-width:22ch}
  .hero-visual{min-height:340px;max-width:520px;width:100%;margin:14px auto 0}
  .hero-stats{gap:28px 20px}
  .scroll-cue{display:none}
  .phases{grid-template-columns:repeat(3,1fr);gap:26px}
  .timeline::before,.tl-fill{display:none}
}
@media(max-width:860px){
  /* The mobile panel scrolls in its own right: Services alone carries eight
     links, and with two menus open the list used to run past the fold with no
     way to reach the bottom of it. */
  .nav-links{position:fixed;inset:72px 0 auto;flex-direction:column;gap:0;background:var(--bg);
    border-bottom:1px solid var(--line);padding:14px var(--pad) 26px;transform:translateY(-120%);
    transition:transform .5s var(--ease),visibility .5s;margin-left:0;visibility:hidden;
    max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
  .nav.open .nav-links{transform:none;visibility:visible}
  .logo-svg{height:19px}
  /* 2.5.8 target size — a 48px row is comfortably thumb-sized */
  .nav-links a{padding:14px 4px;min-height:48px;font-size:1.02rem;border-radius:0;
    border-bottom:1px solid var(--line)}
  .nav-links > li > a[aria-current="page"]::after{left:4px;right:auto;width:22px;bottom:8px}
  .burger{display:grid}
  .nav-in{gap:12px}
  .nav-tools .btn{display:none}
  .card,.card[data-span="6"],.card[data-span="8"],.card[data-span="12"]{grid-column:span 12}
  .f-grid{grid-template-columns:1fr 1fr}
  .fc1{left:-8px}.fc2{right:-10px}.fc4{left:-14px}
}
@media(max-width:560px){
  .phases{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
  .hero-cta-row .btn,.sec-cta .btn,.cta-band .hero-ctas .btn{width:100%;justify-content:center}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .float-chip{font-size:.74rem;padding:9px 12px}
  .fc3{display:none}
  .answer{padding-left:14px}
}

/* ============================ A11Y ============================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .terminal{transform:none}
  #liquid,.hero-canvas,.grain{display:none}
}
/* Windows High Contrast / forced-colours: the site leans on colour-mix fills and
   translucent hairlines, none of which survive a forced palette. Fall back to
   system colours so borders, focus rings and buttons stay visible. */
@media(forced-colors:active){
  .btn,.card,.svc-card,.role,.fld input,.fld select,.fld textarea,.nx-card,
  .dropdown,.cform,.empty{border:1px solid CanvasText}
  .btn-primary{background:ButtonFace;color:ButtonText;forced-color-adjust:none}
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
  .q-ic,.card-i,.svc-ic,.role-ic,.cap-group-ic{border:1px solid CanvasText}
  #liquid,.hero-canvas,.grain,.hero-grid-lines{display:none}
}
/* Respect a stated preference for more contrast by taking the hairlines up */
@media(prefers-contrast:more){
  :root{--line:rgba(128,128,128,.55);--line-strong:rgba(128,128,128,.85)}
  .card p,.svc-card p,.role p,.diff p,.q-body p{color:var(--text)}
}

/* ============================================================
   NAV DROPDOWNS (Industries / Services / Solutions)
   ============================================================ */
.has-drop{position:relative}
.drop-trigger{display:flex;align-items:center;gap:6px}
.drop-trigger svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.has-drop:hover .drop-trigger svg,.has-drop:focus-within .drop-trigger svg{transform:rotate(180deg)}
/* top:100% with NO gap keeps the dropdown's hoverable box touching the trigger --
   there is no dead zone for the cursor to cross (and lose :hover) while moving
   from the trigger down into the menu. The 8px translateY is purely a visual
   slide-in on open/close, not a positioning gap. */
/* horizontal mega-menu: a 2-column grid instead of one tall vertical stack, so
   Services' 8 items (or Industries' 5) stay short and wide instead of spilling
   far down over the page content beneath the nav. */
.dropdown{position:absolute;top:100%;left:0;margin-top:10px;transform:translateY(8px);
  width:max-content;max-width:min(600px,92vw);
  display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:2px 6px;
  padding:10px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-2);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:70}
.has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
/* the last two items (Solutions, Contact Us) sit close to the right edge ->
   hang their panels from the right so they can't overflow the viewport */
.nav-links li:nth-last-child(2) .dropdown,
.nav-links li:last-child .dropdown{left:auto;right:0}
/* short menus (Contact Us) read better as one column than as a half-empty grid */
.dropdown.dropdown-sm{grid-template-columns:minmax(230px,1fr);max-width:min(320px,92vw)}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.dropdown a{display:flex;flex-direction:row;align-items:flex-start;gap:10px;padding:10px 14px;
  border-radius:10px;font-size:.86rem;font-weight:600;color:var(--text);text-align:left;
  transition:background .25s}
.dropdown a:hover{background:var(--surface-2)}
.dropdown a small{display:block;font-family:var(--ff-body);font-weight:400;font-size:.74rem;color:var(--text-3);text-align:left}
.drop-ic{flex:none;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--brand);margin-top:1px}
.drop-ic svg{width:17px;height:17px}
.dropdown a:hover .drop-ic{background:var(--brand);color:#fff}
.dropdown-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dropdown-foot{display:none}
@media(max-width:860px){
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:0;background:none;display:none;grid-template-columns:1fr;
    width:auto;max-width:none;padding:0 0 6px 14px}
  .has-drop.open .dropdown{display:grid}
  .has-drop.open .drop-trigger svg{transform:rotate(180deg)}
  .dropdown a{padding:10px 4px;border-radius:0}
}

/* ============================================================
   SUB-PAGE BANNER — unique per page, no generic body repeated below it.
   Deliberately smaller/quieter than the homepage hero: this is a
   wayfinding header, not a landing pitch.
   ============================================================ */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--ff-mono);font-weight:600;
  font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,240,250,.6);margin-bottom:22px}
.crumbs a{color:rgba(234,240,250,.85);transition:color .25s}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}
.page-banner{position:relative;padding:clamp(52px,8.5vh,92px) var(--pad) clamp(40px,6vh,60px);
  background:var(--brand);color:#EAF0FA;overflow:hidden;isolation:isolate}
.page-banner::after{content:"";position:absolute;inset:0;z-index:0;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 65% at 22% 30%,#000 20%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 22% 30%,#000 20%,transparent 72%)}
.banner-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:center}
.banner-kicker{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:99px;
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);
  font-family:var(--ff-mono);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
/* product wordmark in the banner (NexLoan, NexHR, NexEdu, NexStay).
   The supplied mark is navy #192E5B + red #DE5357, and that navy is exactly
   --brand — the banner ground — so on the band the letterforms are invisible,
   not merely dim. A glow cannot fix that (it haloes the edges while the strokes
   stay navy-on-navy), so the banner uses a REVERSED lockup: *-reverse.svg swaps
   the navy for white and keeps the red accent, which clears 3:1 against the
   band. The glow below is then purely for separation from the grid texture. */
.banner-logo{display:block;height:36px;width:auto;margin:0;
  filter:drop-shadow(0 2px 10px rgba(6,14,34,.55))
         drop-shadow(0 0 24px rgba(150,182,255,.34))}
@media(max-width:560px){.banner-logo{height:27px}}
.page-banner h1{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em}
/* lockup: wordmark on its own row, heading on the row beneath it. align-items
   keeps the logo hugging the left edge instead of stretching to column width.
   Declared AFTER .page-banner h1 — same specificity, so source order decides. */
.banner-lockup{display:flex;flex-direction:column;align-items:flex-start;
  row-gap:clamp(12px,1.4vw,18px)}
.page-banner .banner-lockup h1{margin:0;min-width:0}
.page-banner .lede{font-family:var(--ff-display);font-weight:600;font-size:clamp(1rem,1.6vw,1.16rem);
  color:#C2CCE4;margin:14px 0 0;max-width:56ch;line-height:1.4}
/* The meta pills are no longer shown in the banner — the row repeated what the
   lede already says. The markup stays because site.js reads its icons and
   labels to build the banner visual (badge + floating chips) on every page. */
.banner-meta{display:none}
/* banner CTA — white fill, because the accent red on the navy band would fight it
   rather than lead. One action per banner; the ghost pair lives in the closing band. */
.banner-cta{margin-top:clamp(22px,3vw,30px)}
.page-banner .btn-primary{background:#fff;color:var(--brand);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
.page-banner .btn-primary:hover{background:#EAF0FA;color:var(--brand-deep);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6)}

/* ---- generated banner visual: built by JS from the page's own meta-pill icons,
   so every sub-page gets a relevant graphic without hand-authored art per page ---- */
/* the copy column site.js wraps around the existing banner content. min-width:0
   is what stops a long unbroken heading from forcing the grid wider than the
   viewport — a grid item's default min-width:auto refuses to shrink. */
.banner-copy{min-width:0}
.banner-visual{position:relative;z-index:1;min-height:220px;display:flex;align-items:center;justify-content:center}
.banner-visual .orbit-ring{position:absolute;inset:18px;border-color:rgba(255,255,255,.3)}
.banner-visual .orbit-ring::after{background:#fff}
.banner-badge{position:relative;width:150px;height:150px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),transparent 60%),
             linear-gradient(150deg,#ffffff 0%,#C2CCE4 100%);
  display:grid;place-items:center;box-shadow:0 24px 60px -18px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.4) inset;
  animation:bannerFloat 6s ease-in-out infinite;transition:transform .5s var(--ease-spring)}
.banner-visual:hover .banner-badge{transform:scale(1.05) rotate(-4deg)}
.banner-badge svg{width:64px;height:64px;color:var(--brand-deep);stroke-width:1.6}
@keyframes bannerFloat{50%{transform:translateY(-12px)}}
.banner-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;
  font-size:.76rem;font-weight:600;color:#0A1224;background:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  white-space:nowrap;animation:floaty 5.5s ease-in-out infinite}
.banner-chip svg{width:14px;height:14px;color:var(--brand)}
.bc1{top:6%;right:2%;animation-delay:.3s}
.bc2{bottom:10%;left:0;animation-delay:1.6s}
@media(max-width:1080px){
  .banner-in{grid-template-columns:1fr}
  .banner-visual{order:-1;min-height:170px;transform:scale(.86)}
}
@media(max-width:560px){.banner-visual{display:none}}

/* ============================================================
   FOCUSED CONTENT — one topic, stated once. .lead is the single
   answer paragraph a sub-page is allowed to open with.
   ============================================================ */
.content-sec{padding:var(--sp-sec) 0}
.lead{font-size:1.06rem;color:var(--text-2);line-height:1.7;margin-top:16px;max-width:72ch}

/* ============================================================
   SECTION INTRO WITH A SUPPORTING IMAGE
   The opening block of a detail page ran as a single column with the whole
   right half of the page empty. Pairing the copy with one photograph of the
   world the page is about fills that space with something relevant, and
   gives the eye somewhere to rest before the diagram below.
   ============================================================ */
.intro-split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.intro-split > .sec-head{margin-bottom:0;max-width:60ch}

.intro-shot{position:relative;margin:0;overflow:hidden;
  border-radius:clamp(18px,2vw,26px);aspect-ratio:4/3.1;
  background:linear-gradient(155deg,#1E2F57,#0A1224);
  box-shadow:0 2px 4px rgba(11,42,73,.08),0 18px 34px -18px rgba(11,42,73,.28),
             0 40px 70px -34px rgba(11,42,73,.34);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.intro-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);transition:transform 1s var(--ease),filter .6s var(--ease)}
/* a scrim so the caption stays legible whatever the photograph does, and an
   inset hairline so the tile reads as part of the design system */
.intro-shot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,18,32,.04) 45%,rgba(9,18,32,.68))}
.intro-shot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:box-shadow .5s var(--ease)}
.intro-shot:hover{transform:translateY(-5px);
  box-shadow:0 3px 6px rgba(11,42,73,.1),0 26px 44px -20px rgba(11,42,73,.32),
             0 54px 84px -38px rgba(11,42,73,.4)}
.intro-shot:hover img{transform:scale(1.05);filter:saturate(1)}
.intro-shot:hover::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}

.intro-shot figcaption{position:absolute;z-index:2;left:clamp(12px,1.4vw,16px);
  right:clamp(12px,1.4vw,16px);bottom:clamp(12px,1.4vw,16px);
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:99px;
  background:rgba(9,18,32,.5);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.78rem;font-weight:600;line-height:1.35;color:#EAF0FA;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.intro-shot figcaption::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--accent-tint)}
.intro-shot:hover figcaption{background:rgba(9,18,32,.64);border-color:rgba(255,255,255,.34)}

@media(max-width:960px){
  .intro-split{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
  .intro-shot{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
  .intro-shot,.intro-shot img,.intro-shot::after,.intro-shot figcaption{transition-duration:.01ms}
  .intro-shot:hover{transform:none}
  .intro-shot:hover img{transform:none}
}
.content-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);
  gap:clamp(24px,3.4vw,48px);margin-top:clamp(26px,3.5vw,36px);align-items:start}
.content-col{min-width:0}

/* capability rows upgraded from plain text lines to compact interactive icon-cards.
   A fixed 2-column grid (not auto-fit) means cards always stretch to fill the full
   column width -- no dead space trailing off to the right of a partial row. */
/* Each capability group (Banking, NBFC & Digital Lending, AI opportunities, etc.) is a
   distinct, clearly separated unit -- a labeled icon header plus generous top spacing
   and a hairline rule, so the eye can chunk the page into scannable sections instead
   of reading one long undifferentiated bullet list. */
.cap-group{padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
.cap-group:first-child{padding-top:0;margin-top:0;border-top:0}
.cap-group-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cap-group-ic{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--saguaro) 14%,transparent);color:var(--saguaro)}
.cap-group-ic svg{width:19px;height:19px}
.cap-group h4{margin:0;font-size:.86rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.content-list{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;align-items:start;gap:14px 22px}
.content-list .cap{align-items:flex-start;gap:11px;padding:0;border:0;
  background:none;line-height:1.45;position:relative;color:var(--text-2)}
.content-list .cap svg{width:14px;height:14px;padding:0;box-sizing:content-box;border-radius:0;
  background:none;color:var(--saguaro);flex:none;margin-top:3px}
.content-list .cap:hover{transform:none;background:none;box-shadow:none;color:var(--text)}
.content-list .cap:hover svg{transform:none;background:none;color:var(--saguaro)}
/* the "why this matters" callout closes out the section, so it spans both columns
   instead of sitting narrow in column 1 with a dead gap beside it */
.content-list .why{grid-column:1/-1;margin-top:2px!important}
@media(max-width:640px){.content-list{grid-template-columns:1fr}}

.content-side{position:sticky;top:96px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(155deg,color-mix(in srgb,var(--saguaro) 7%,var(--surface)),var(--surface));
  overflow:hidden}
.content-side::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,color-mix(in srgb,var(--saguaro) 45%,transparent),transparent 55%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
.content-side h4{font-size:.72rem;font-family:var(--ff-mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.content-side ul{display:grid;gap:0}
.content-side li{display:flex;gap:11px;font-size:.88rem;color:var(--text-2);line-height:1.5;
  padding:14px 0;border-bottom:1px solid var(--line);transition:transform .3s var(--ease),color .3s}
.content-side li:first-child{padding-top:0}
.content-side li:last-child{border-bottom:0;padding-bottom:0}
.content-side li:hover{transform:translateX(4px);color:var(--text)}
.content-side li svg{width:16px;height:16px;color:var(--saguaro);flex:none;margin-top:2px}
.content-side li a{font-weight:700;color:var(--saguaro)}
@media(max-width:900px){.content-grid{grid-template-columns:1fr}.content-side{position:static}}

/* ============================================================
   INDUSTRY PAGE — the shared layout behind every /industries/ page.
   A minimalist pass over the old content-grid template: hairline rows
   instead of boxes, capability chips instead of forty ticked list items,
   and a plain two-column outcomes table instead of a sticky sidebar.
   Namespaced .ind-* so nothing collides with the footer's .areas cluster.
   ============================================================ */

/* the descriptive sub-heading that follows a section's .lead.
   Service pages use the identical treatment, so they share the rule
   rather than re-declaring it under a second name. */
.ind-intro,.svc-intro{margin-top:clamp(26px,3.2vw,38px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);}
.ind-intro h3,.svc-intro h3{font-size:clamp(1.18rem,2.2vw,1.6rem);letter-spacing:-.028em;line-height:1.24;
  font-weight:700;margin:0}
.ind-intro p,.svc-intro p{font-size:1rem;color:var(--text-2);line-height:1.72;margin-top:14px}

/* capability areas: one hairline row per sub-domain */
.ind-areas{border-top:1px solid var(--line);margin-top:clamp(26px,3.4vw,38px)}
.ind-area{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);align-items:start;
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line);
  transition:background .45s var(--ease)}
.ind-area:hover{background:var(--surface)}
.ind-area-h{display:flex;align-items:flex-start;gap:14px}
.ind-area-h .ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--bg);color:var(--saguaro);
  transition:background .4s,color .4s,border-color .4s,transform .45s var(--ease-spring)}
.ind-area-h .ic svg{width:18px;height:18px}
.ind-area:hover .ic{background:var(--saguaro);color:var(--on-accent);border-color:transparent;
  transform:scale(1.06) rotate(-4deg)}
.ind-area-h .n{display:block;font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.14em;
  color:var(--text-3);margin-bottom:5px}
.ind-area-h h3{font-size:1.02rem;letter-spacing:-.025em;line-height:1.28}
/* capabilities as chips — coverage readable at a glance, not a checklist to scan */
.ind-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.ind-chips span{padding:7px 14px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font-size:.815rem;color:var(--text-2);line-height:1.4;
  transition:border-color .35s,color .35s,background .35s,transform .35s var(--ease-spring)}
.ind-chips span:hover{border-color:color-mix(in srgb,var(--saguaro) 55%,transparent);
  color:var(--text);background:var(--surface-2);transform:translateY(-2px)}
@media(max-width:760px){.ind-area{grid-template-columns:1fr;gap:16px}}

/* deliver / outcomes: two plain columns, no card chrome */
.ind-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,72px);align-items:start}
.ind-blk-h{font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.03em;margin:14px 0 0;font-weight:700}
.ind-deliver{margin-top:clamp(18px,2.2vw,26px);counter-reset:d}
.ind-deliver li{counter-increment:d;display:flex;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:.93rem;line-height:1.5;
  transition:transform .35s var(--ease),color .35s}
.ind-deliver li::before{content:counter(d,decimal-leading-zero);flex:none;
  font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);letter-spacing:.08em;color:var(--saguaro);
  min-width:22px}
.ind-deliver li:hover{transform:translateX(4px);color:var(--text)}

.ind-outcomes{width:100%;border-collapse:collapse;margin-top:clamp(18px,2.2vw,26px)}
.ind-outcomes th,.ind-outcomes td{text-align:left;padding:15px 12px 15px 0;
  border-bottom:1px solid var(--line);font-size:.93rem;line-height:1.5;vertical-align:top}
.ind-outcomes thead th{padding-top:0;font-family:var(--ff-mono);font-size:var(--fs-label-sm);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.ind-outcomes tbody th{font-weight:600;width:52%;padding-right:18px}
.ind-outcomes tbody td{color:var(--saguaro)}
.ind-outcomes tbody tr{transition:background .35s var(--ease)}
.ind-outcomes tbody tr:hover{background:var(--surface)}
@media(max-width:860px){.ind-split{grid-template-columns:1fr}}

/* related routes: a single quiet line, replacing the sticky sidebar */
.ind-related,.svc-related{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-top:clamp(34px,4.5vw,56px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line)}
.ind-related .lbl,.svc-related .lbl{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.ind-related a,.svc-related a{font-size:.88rem;font-weight:600;color:var(--saguaro);
  border-bottom:1px solid transparent;transition:border-color .3s}
.ind-related a:hover,.svc-related a:hover{border-bottom-color:var(--saguaro)}
@media(prefers-reduced-motion:reduce){
  .ind-area,.ind-area-h .ic,.ind-chips span,.ind-deliver li,.ind-outcomes tbody tr{transition-duration:.01ms}
}

/* ============================================================
   SERVICE PAGE — shared layout behind every /services/ page.
   The through-line: each service leads with one authored diagram of how
   the discipline actually works, then the capability inventory, then the
   positioning argument. Diagrams are inline SVG using the theme tokens,
   so they repaint in light and dark instead of shipping two PNGs.
   ============================================================ */

/* ---- signature diagram: the page's one real illustration ---- */
.svc-fig{margin:clamp(28px,4vw,44px) 0 0;padding:clamp(24px,3.2vw,38px);
  border:1px solid var(--line-strong);border-radius:var(--r-xl);
  background:linear-gradient(155deg,var(--dg-ground-1),var(--dg-ground-2));
  box-shadow:0 2px 4px rgba(11,42,73,.06),0 24px 48px -28px rgba(11,42,73,.34);
  position:relative;overflow:hidden}
/* the grid, plus an accent bloom in the corner so the panel has some depth
   behind the drawing instead of sitting flat on the page ground */
.svc-fig::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(680px circle at 88% 8%,color-mix(in srgb,var(--saguaro) 12%,transparent),transparent 62%),
    radial-gradient(560px circle at 4% 96%,color-mix(in srgb,var(--brand-tint) 14%,transparent),transparent 60%),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:auto,auto,38px 38px,38px 38px}
.svc-fig svg{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible}
/* A caption is prose to be read, not a label to be scanned — tracked uppercase
   at 11px made a two-sentence note genuinely hard work. Sentence case, a
   readable size, and an accent rule marking it as commentary on the figure. */
.svc-fig figcaption{position:relative;z-index:1;margin-top:clamp(18px,2.2vw,24px);
  padding:2px 0 2px 16px;border-left:2px solid var(--saguaro);
  font-size:.9rem;line-height:1.68;color:var(--text-2);max-width:80ch}
/* ---- diagram primitives ----------------------------------------------
   Every figure on the site inherits this one visual language, so changing
   it here changes all thirty at once.

   The plates used to be a translucent wash over the page ground with a
   hairline border — at diagram scale that read as barely-there grey. They
   now carry a real gradient fill, a border with weight behind it, and a
   cast shadow, so a stage looks like an object rather than a smudge. The
   gradients live in one hidden <defs> block that site.js appends to the
   page (see nxDiagramDefs), which is why a url(#…) reference resolves.  */
.dg-plate{fill:url(#nxPlate);stroke:var(--dg-edge);stroke-width:1.5;
  filter:drop-shadow(0 4px 10px var(--dg-cast))}
.dg-plate-a{fill:url(#nxAccent);stroke:var(--dg-accent-edge);stroke-width:2;
  filter:drop-shadow(0 6px 16px var(--dg-accent-cast))}
.dg-line{stroke:var(--dg-rule);fill:none;stroke-width:1.5}
.dg-flow{stroke:var(--saguaro);fill:none;stroke-linecap:round;stroke-width:2.2}
.dg-t{fill:var(--text);font-family:var(--ff-body);font-size:12.5px;font-weight:700;
  letter-spacing:-.008em}
.dg-t2{fill:var(--text-2);font-family:var(--ff-body);font-size:10.5px;font-weight:500}
/* the stage numerals carry the accent, which is what gives a flow its rhythm */
.dg-n{fill:var(--saguaro);font-family:var(--ff-mono);font-weight:700;font-size:9.5px;
  letter-spacing:.14em}
.dg-a{fill:var(--saguaro)}
.dg-dash{stroke-dasharray:5 5;stroke-width:1.4}

/* the gradient stops, so the figures repaint with the theme */
.nx-dg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.nxp1{stop-color:var(--dg-p1)} .nxp2{stop-color:var(--dg-p2)}
.nxa1{stop-color:var(--dg-a1)} .nxa2{stop-color:var(--dg-a2)}

@media(prefers-reduced-motion:no-preference){
  /* the accent plate is the point the figure is making, so it gets a slow
     breath — one element per diagram, never the whole drawing */
  .dg-plate-a{animation:dgPulse 5.5s var(--ease) infinite}
  @keyframes dgPulse{
    0%,100%{filter:drop-shadow(0 6px 16px var(--dg-accent-cast))}
    50%{filter:drop-shadow(0 8px 26px var(--dg-accent-cast-hi))}
  }
}

/* ---- capability inventory: dense but scannable ---- */
.svc-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px;margin-top:clamp(22px,3vw,30px);background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.svc-caps li{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;
  background:var(--bg);font-size:.885rem;line-height:1.45;color:var(--text-2);
  transition:background .3s,color .3s}
.svc-caps li:hover{background:var(--surface-2);color:var(--text)}
.svc-caps li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;
  background:var(--saguaro);opacity:.55;transition:opacity .3s,transform .3s var(--ease-spring)}
.svc-caps li:hover::before{opacity:1;transform:scale(1.5)}

/* ---- process chain: Capture -> OCR -> Classify -> ... ---- */
.svc-chain{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin-top:clamp(20px,2.6vw,28px)}
.svc-chain li{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;
  padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .35s,background .35s,transform .35s var(--ease-spring)}
.svc-chain li:hover{border-color:var(--saguaro);background:var(--surface-2);transform:translateY(-2px)}
.svc-chain li::after{content:"→";margin-left:4px;color:var(--saguaro);font-weight:400}
.svc-chain li:last-child::after{content:none}

/* ---- the argument block: why this discipline is sold this way ---- */
.svc-principle{margin-top:clamp(30px,4vw,44px);padding:clamp(22px,3vw,30px);
  border-radius:var(--r-lg);border:1px solid var(--line);
  border-left:3px solid var(--saguaro);background:var(--surface)}
.svc-principle .lbl{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:10px}
.svc-principle p{font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.02rem,1.9vw,1.3rem);line-height:1.42;letter-spacing:-.02em}
.svc-principle p+p{font-family:var(--ff-body);font-weight:400;font-size:.95rem;
  color:var(--text-2);line-height:1.7;margin-top:12px;letter-spacing:0}

/* ---- by-industry matrix ---- */
.svc-matrix{width:100%;border-collapse:collapse;margin-top:clamp(20px,2.6vw,28px)}
.svc-matrix th,.svc-matrix td{text-align:left;padding:15px 12px 15px 0;
  border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.55;vertical-align:top}
.svc-matrix thead th{padding-top:0;font-family:var(--ff-mono);font-size:var(--fs-label-sm);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.svc-matrix tbody th{font-weight:700;width:26%;padding-right:20px;color:var(--saguaro);
  white-space:nowrap}
.svc-matrix tbody td{color:var(--text-2)}
.svc-matrix tbody tr{transition:background .35s var(--ease)}
.svc-matrix tbody tr:hover{background:var(--surface)}
@media(max-width:640px){
  .svc-matrix tbody th{white-space:normal;width:34%}
  .svc-matrix th,.svc-matrix td{font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
  .svc-caps li,.svc-caps li::before,.svc-chain li,.svc-matrix tbody tr{transition-duration:.01ms}
}

/* ============================================================
   LEGAL / POLICY PAGES — one readable column. No cards, no chrome:
   these are read start to finish, not scanned.
   ============================================================ */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.24rem,2.3vw,1.62rem);letter-spacing:-.028em;
  margin:clamp(34px,4.4vw,48px) 0 0;padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:clamp(24px,3vw,32px)}
.legal h3{font-size:1rem;letter-spacing:-.02em;margin:24px 0 0}
.legal p{color:var(--text-2);line-height:1.78;margin-top:14px;font-size:.975rem}
.legal ul{margin-top:14px;display:grid;gap:10px}
.legal li{display:flex;gap:12px;color:var(--text-2);line-height:1.65;font-size:.955rem}
.legal li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;
  background:var(--saguaro)}
.legal a{color:var(--saguaro);font-weight:600;border-bottom:1px solid transparent;
  transition:border-color .3s}
.legal a:hover{border-bottom-color:var(--saguaro)}
.legal-meta{margin-top:clamp(34px,4.4vw,48px);padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);letter-spacing:.1em;color:var(--text-3)}

/* ============================================================
   CONTACT PAGE — form beside the reasons to send it.
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4.5vw,64px);align-items:start;margin-top:clamp(26px,3.5vw,38px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

.cform{display:grid;gap:16px;padding:clamp(22px,3vw,32px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.cform .row{grid-template-columns:1fr}}
.fld{display:grid;gap:7px;min-width:0}
.fld label{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3)}
/* 16px is the floor iOS Safari needs to not auto-zoom the page on focus, and
   --field-line is the 3:1 boundary WCAG 1.4.11 asks of a form control. */
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 15px;min-height:48px;border-radius:var(--r-sm);
  border:1px solid var(--field-line);background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:1rem;line-height:1.5;
  transition:border-color .3s,background .3s,box-shadow .3s}
.fld textarea{min-height:140px;resize:vertical}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--saguaro);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--saguaro) 22%,transparent)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--text-3)}
/* radio row for preferred contact method */
.pick{display:flex;flex-wrap:wrap;gap:9px}
.pick label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:11px 17px;min-height:44px;border-radius:99px;border:1px solid var(--field-line);
  background:var(--bg);font-family:var(--ff-body);font-size:.88rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--text-2);
  transition:border-color .3s,color .3s,background .3s}
.pick input{position:absolute;opacity:0;width:0;height:0}
/* a real radio dot, so "selected" is carried by shape as well as by colour
   (WCAG 1.4.1 — colour is never the only means of conveying information) */
.pick label::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--field-line);
  box-shadow:inset 0 0 0 4px var(--bg);
  transition:border-color .25s,background .25s,box-shadow .25s}
.pick label:hover{border-color:var(--saguaro);color:var(--text)}
.pick input:checked+span{color:var(--text)}
.pick label:has(input:checked){border-color:var(--saguaro);
  background:color-mix(in srgb,var(--saguaro) 12%,transparent);color:var(--text)}
.pick label:has(input:checked)::before{border-color:var(--saguaro);background:var(--saguaro);
  box-shadow:inset 0 0 0 3px var(--bg)}
.pick label:has(input:focus-visible){outline:3px solid var(--saguaro);outline-offset:2px}
.cform .note{font-size:.8rem;color:var(--text-3);line-height:1.6}
/* the submit-time summary: silent until it has something to say */
.cform-status{font-size:.87rem;font-weight:600;line-height:1.5;color:var(--accent-tint)}
[data-theme="light"] .cform-status{color:var(--accent-deep)}
.cform-status:empty{display:none}

/* the reasons column beside the form */
.creasons{display:grid;gap:0;margin-top:clamp(20px,2.6vw,28px)}
.creason{padding:clamp(18px,2.4vw,24px) 0;border-top:1px solid var(--line);
  transition:transform .35s var(--ease)}
.creason:hover{transform:translateX(4px)}
.creason h3{font-size:1rem;letter-spacing:-.02em;display:flex;align-items:center;gap:11px}
.creason h3 svg{width:17px;height:17px;color:var(--saguaro);flex:none}
.creason p{color:var(--text-2);font-size:.9rem;line-height:1.65;margin-top:8px}
.cdirect{display:grid;gap:12px;margin-top:clamp(22px,3vw,30px);padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid var(--line)}
.cdirect a{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem;
  transition:color .3s}
.cdirect a:hover{color:var(--saguaro)}
.cdirect svg{width:17px;height:17px;color:var(--saguaro);flex:none}

/* ============================ SERVICES GRID ============================
   Six capabilities laid out 4-up on row one, 2 wide cards on row two.
   The wide pair switches to a horizontal icon/content split so the extra
   width reads as intentional rather than as a stretched small card.
   Cursor-follow border glow is shared with .card (pointermove in site.js). */
.svc-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(36px,5vw,56px);
}
/* selectors are scoped through .svc-grid so the transform/transition here outrank
   the generic [data-reveal].in rule that also lands on these cards */
.svc-grid .svc-card{
  grid-column:span 3;position:relative;display:flex;flex-direction:column;isolation:isolate;
  padding:clamp(22px,2.2vw,28px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:opacity .8s var(--ease),transform .55s var(--ease),border-color .4s,background .4s
}
.svc-grid .svc-card.wide{grid-column:span 6;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2vw,26px);align-items:start}
.svc-grid .svc-card:hover,.svc-grid .svc-card:focus-within{transform:translateY(-6px);
  border-color:var(--line-strong);background:var(--surface-2)}

/* pointer-tracked gradient border */
.svc-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--saguaro) 45%,transparent),transparent 62%);
  transition:opacity .4s;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.svc-card:hover::before,.svc-card:focus-within::before{opacity:1}
/* accent rule sweeping across the top edge on hover */
.svc-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--saguaro),color-mix(in srgb,var(--saguaro) 18%,transparent));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.svc-card:hover::after,.svc-card:focus-within::after{transform:scaleX(1)}

.svc-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--surface-2);border:1px solid var(--line);color:var(--saguaro);
  transition:transform .5s var(--ease-spring),background .4s,color .4s,border-color .4s}
.svc-ic svg{width:22px;height:22px}
.svc-card:hover .svc-ic,.svc-card:focus-within .svc-ic{transform:scale(1.08) rotate(-6deg);
  background:var(--saguaro);color:var(--on-accent);border-color:transparent}

.svc-num{position:absolute;top:clamp(18px,2vw,22px);right:clamp(20px,2.2vw,26px);
  font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);letter-spacing:.14em;color:var(--text-3);
  transition:color .35s,transform .5s var(--ease)}
.svc-card:hover .svc-num,.svc-card:focus-within .svc-num{color:var(--saguaro);transform:translateY(-2px)}

.svc-card h3{font-size:clamp(1.02rem,1.5vw,1.16rem);letter-spacing:-.025em;margin:18px 0 9px;font-weight:700}
.svc-card.wide h3{margin-top:0}
.svc-card p{font-size:.885rem;color:var(--text-2);line-height:1.62}
.svc-card .card-tags{margin-top:14px}

@media(max-width:1080px){
  .svc-grid .svc-card,.svc-grid .svc-card.wide{grid-column:span 6}
  .svc-grid .svc-card.wide{display:flex;flex-direction:column}
  .svc-grid .svc-card.wide h3{margin-top:18px}
}
@media(max-width:640px){
  .svc-grid .svc-card,.svc-grid .svc-card.wide{grid-column:span 12}
  .svc-grid .svc-card .card-tags{display:none}
}

/* Reveal stagger: the delay sits on .in so the cards cascade in, and is cleared
   as soon as the pointer enters the grid so hover response stays instant. */
.svc-card.in:nth-child(2){transition-delay:.06s}
.svc-card.in:nth-child(3){transition-delay:.12s}
.svc-card.in:nth-child(4){transition-delay:.18s}
.svc-card.in:nth-child(5){transition-delay:.24s}
.svc-card.in:nth-child(6){transition-delay:.30s}
.svc-grid:hover .svc-card,.svc-card:focus-within{transition-delay:0s}
@media(prefers-reduced-motion:reduce){
  .svc-grid .svc-card,.svc-card::after,.svc-ic,.svc-num{transition-duration:.01ms}
  .svc-grid .svc-card:hover,.svc-grid .svc-card:focus-within{transform:none}
}

/* label + rule that separates a second block inside one section */
.sec-split{display:flex;align-items:center;gap:18px;margin:clamp(44px,5.5vw,72px) 0 clamp(24px,3vw,34px)}
.sec-split .eyebrow{flex:none}
.sec-split::after{content:"";flex:1;height:1px;background:var(--line)}
/* CTA row that closes a section — one primary, one ghost */
.sec-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(30px,4vw,44px)}

/* ============================================================
   LEGAL PAGE SHELL — a sticky section index beside the column.
   Policy pages are long and people arrive looking for one clause
   ("do you sell my data?"), so the index is wayfinding, not decoration.
   It collapses above the column on narrow screens rather than being hidden,
   because that is exactly where it is most useful.
   ============================================================ */
.legal-layout{display:grid;grid-template-columns:206px minmax(0,1fr);
  gap:clamp(30px,5vw,68px);align-items:start}
@media(max-width:900px){.legal-layout{grid-template-columns:1fr}}

.legal-toc{position:sticky;top:96px}
@media(max-width:900px){.legal-toc{position:static;padding-bottom:24px;
  border-bottom:1px solid var(--line)}}
.legal-toc h4{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.legal-toc ol{display:grid;gap:0;list-style:none;counter-reset:toc}
.legal-toc a{position:relative;display:block;padding:9px 0 9px 16px;font-size:.845rem;
  line-height:1.45;color:var(--text-3);border-left:1px solid var(--line);
  transition:color .3s,border-color .3s}
.legal-toc a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:var(--saguaro);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .4s var(--ease)}
.legal-toc a:hover{color:var(--text)}
/* .on is set by the scroll-spy in site.js */
.legal-toc a.on{color:var(--saguaro);font-weight:600}
.legal-toc a.on::before{transform:scaleY(1)}

/* the anchor lands under a 72px sticky nav — offset so headings clear it */
.legal h2[id]{scroll-margin-top:96px}

/* ============================================================
   CONTACT FORM — validation + submitted states.
   Errors are announced next to the field that caused them, never
   as one summary at the top, so the fix is where the eye already is.
   ============================================================ */
/* radio groups are real fieldsets, so the legend has to inherit the field label look */
fieldset.fld{border:0;margin:0;padding:0;min-width:0}
.fld legend{padding:0;font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3)}

/* the error colour has to clear 4.5:1 on its own ground in BOTH themes — the
   lifted tint only does that on the dark one, so light gets the deep stop. */
.fld-msg{display:none;font-size:.8rem;line-height:1.5;color:var(--accent-tint);
  font-weight:600}
[data-theme="light"] .fld-msg{color:var(--accent-deep)}
/* an icon alongside the message, so the error is not signalled by colour alone */
.fld.err .fld-msg{display:flex;align-items:flex-start;gap:7px}
.fld.err .fld-msg::before{content:"!";flex:none;display:grid;place-items:center;
  width:15px;height:15px;margin-top:2px;border-radius:50%;
  background:currentColor;color:var(--bg);font-size:.66rem;font-weight:700;line-height:1}
.fld.err input,.fld.err select,.fld.err textarea{border-color:var(--accent)}
.fld.err input:focus,.fld.err select:focus,.fld.err textarea:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.fld .req{color:var(--saguaro)}

/* live character budget on the message field */
.cc{justify-self:end;font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label);letter-spacing:.08em;
  color:var(--text-3);transition:color .3s}
.cc.over{color:var(--accent-tint)}

/* An author `display:grid` outranks the UA rule behind the hidden attribute, so the
   form/panel swap needs these or both would stay on screen at once. */
.cform[hidden],.cform-sent[hidden]{display:none}

/* the panel that replaces the form once it has been handed off to mail */
.cform-sent{display:grid;gap:14px;justify-items:start;padding:clamp(26px,3.4vw,38px);
  border:1px solid color-mix(in srgb,var(--saguaro) 32%,transparent);
  border-radius:var(--r-lg);background:color-mix(in srgb,var(--saguaro) 8%,var(--surface))}
.cform-sent .tick{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--saguaro);color:var(--on-accent)}
.cform-sent .tick svg{width:22px;height:22px}
.cform-sent h3{font-size:1.15rem;letter-spacing:-.02em}
.cform-sent p{color:var(--text-2);font-size:.92rem;line-height:1.68}

/* ============================================================
   CAREERS — role families, and the honest empty state.
   ============================================================ */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
  gap:clamp(12px,1.4vw,16px);margin-top:clamp(26px,3.4vw,38px)}
.role{position:relative;padding:clamp(20px,2.2vw,26px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,background .4s}
.role:hover{transform:translateY(-5px);border-color:var(--line-strong);background:var(--surface-2)}
.role-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  color:var(--saguaro);background:color-mix(in srgb,var(--saguaro) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--saguaro) 22%,transparent);
  transition:transform .5s var(--ease-spring),background .4s,color .4s,border-color .4s}
.role-ic svg{width:19px;height:19px}
.role:hover .role-ic{transform:translateY(-2px) scale(1.06);
  background:var(--saguaro);color:var(--on-accent);border-color:transparent}
.role h3{margin:18px 0 0;font-size:1.02rem;letter-spacing:-.024em}
.role p{margin-top:9px;font-size:.88rem;color:var(--text-2);line-height:1.62}

/* No openings today. Saying so plainly beats a fake listing — the panel
   still gives the visitor the one action that is actually useful. */
.empty{display:grid;justify-items:center;text-align:center;gap:16px;
  padding:clamp(34px,5vw,58px) clamp(22px,4vw,44px);
  border:1px dashed var(--line-strong);border-radius:var(--r-xl);background:var(--surface)}
/* direct child only — a descendant selector here would also inflate the
   arrow icons inside the buttons below it */
.empty > svg{width:clamp(168px,24vw,236px);height:auto}
.empty h3{font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.026em}
.empty p{max-width:52ch;color:var(--text-2);font-size:.94rem;line-height:1.7}

@media(prefers-reduced-motion:reduce){
  .role,.role-ic,.legal-toc a,.legal-toc a::before,.cc{transition-duration:.01ms}
  .role:hover{transform:none}
  .role:hover .role-ic{transform:none}
}


/* ============================================================
   ENQUIRY MODAL  (assets/enquiry.js)
   Every CTA that points at the contact page opens this instead of
   navigating — the panel re-titles itself from the button that was
   clicked (discovery / consultation / demo / roadmap / general), so
   one component serves every call-to-action on the site.
   Progressive enhancement: with JS off, the links still navigate.
   ============================================================ */
.nx-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);opacity:0;transition:opacity .32s var(--ease)}
.nx-modal[hidden]{display:none}
.nx-modal.on{opacity:1}
.nx-scrim{position:absolute;inset:0;background:rgba(7,14,28,.72);backdrop-filter:blur(10px) saturate(140%)}
[data-theme="light"] .nx-scrim{background:rgba(25,46,91,.42)}

.nx-card{position:relative;width:min(940px,100%);max-height:calc(100dvh - 32px);overflow:auto;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);
  box-shadow:0 40px 120px -32px rgba(0,0,0,.65);
  transform:translateY(18px) scale(.975);opacity:.6;
  transition:transform .42s var(--ease-spring),opacity .32s var(--ease);
  overscroll-behavior:contain}
.nx-modal.on .nx-card{transform:none;opacity:1}

/* ---- left rail: navy in both themes, so the accent keeps its meaning ---- */
.nx-aside{position:relative;overflow:hidden;padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(158deg,#1E3768 0%,var(--brand) 42%,var(--brand-ink) 100%);color:#EAF0FA}
.nx-aside::after{content:"";position:absolute;right:-30%;top:-20%;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(222,83,87,.34),transparent 68%);pointer-events:none}
.nx-kicker{position:relative;font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.2em;
  text-transform:uppercase;color:#F2AFB1;display:flex;align-items:center;gap:9px}
.nx-kicker::before{content:"";width:20px;height:1px;background:var(--accent);flex:none}
.nx-aside h2{position:relative;font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.032em;line-height:1.1}
.nx-aside .nx-lede{position:relative;color:#B9C6E0;font-size:.9rem;line-height:1.68}
.nx-points{position:relative;display:grid;gap:11px;margin-top:2px}
.nx-points li{display:flex;gap:10px;align-items:flex-start;font-size:.845rem;line-height:1.55;color:#CFDAF0}
.nx-points svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent-tint)}
.nx-direct{position:relative;margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:9px}
.nx-direct a{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:500;color:#DCE6F7;
  transition:color .2s var(--ease)}
.nx-direct a:hover{color:#fff}
.nx-direct svg{width:15px;height:15px;flex:none;color:var(--accent-tint)}

/* ---- right rail: the form ---- */
.nx-panel{position:relative;padding:clamp(22px,3vw,34px);display:grid;align-content:start;gap:2px}
.nx-prog{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);overflow:hidden;
  border-radius:0 0 2px 2px}
.nx-prog i{display:block;height:100%;width:0;background:var(--saguaro);
  transition:width .45s var(--ease)}
.nx-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-2);background:var(--surface);border:1px solid var(--line);
  transition:all .22s var(--ease);z-index:3}
.nx-close:hover{color:var(--text);background:var(--surface-2);transform:rotate(90deg)}
.nx-close svg{width:15px;height:15px}

.nx-form{display:grid;gap:4px}
.nx-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* floating-label field: label rides up once the control has focus or a value
   (JS toggles .on, which keeps <select> behaving like the text inputs) */
.nx-f{position:relative;padding-top:20px}
.nx-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--saguaro);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}
.nx-f:focus-within::after{transform:scaleX(1)}
.nx-f > label{position:absolute;left:2px;top:26px;font-size:1rem;color:var(--text-3);
  pointer-events:none;transform-origin:left top;transition:all .26s var(--ease)}
.nx-f.on > label{top:0;font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--saguaro)}
.nx-f input,.nx-f select,.nx-f textarea{
  width:100%;padding:8px 2px 12px;background:transparent;color:var(--text);
  font-family:var(--ff-body);font-size:1rem;line-height:1.5;
  border:0;border-bottom:1.5px solid var(--field-line);border-radius:0;outline:none}
.nx-f textarea{min-height:92px;resize:vertical}
/* placeholders stay invisible until the field has focus, so they never collide
   with the resting label — the label rises first, then the prompt fades in */
.nx-f input::placeholder,.nx-f textarea::placeholder{color:transparent;transition:color .25s var(--ease)}
.nx-f:focus-within input::placeholder,.nx-f:focus-within textarea::placeholder{color:var(--text-3)}
.nx-f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 2px),calc(100% - 6px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.nx-f select option{background:var(--bg-2);color:var(--text)}
.nx-f .nx-req{color:var(--saguaro)}
.nx-err{display:none;font-size:.75rem;line-height:1.5;color:var(--accent-tint);margin-top:6px}
[data-theme="light"] .nx-err{color:var(--accent-deep)}
.nx-f.bad::after{transform:scaleX(1);background:var(--accent)}
.nx-f.bad .nx-err{display:block}

/* compact variant: the quick-start CTAs ask for four fields, nothing else */
.nx-card.lean [data-nx-extra]{display:none}
.nx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.nx-note{font-size:.73rem;line-height:1.55;color:var(--text-3);margin-top:12px}
.nx-note a{color:var(--saguaro);text-decoration:underline;text-underline-offset:2px}

/* ---- sent state ---- */
.nx-done{display:none;place-content:center;justify-items:start;gap:13px;padding:clamp(26px,4vw,44px);
  min-height:340px;align-content:center}
.nx-card.sent .nx-form-wrap{display:none}
.nx-card.sent .nx-done{display:grid}
.nx-tick{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--saguaro);color:var(--on-accent)}
.nx-tick svg{width:23px;height:23px;stroke-dasharray:26;stroke-dashoffset:26;animation:nxTick .5s .12s var(--ease) forwards}
@keyframes nxTick{to{stroke-dashoffset:0}}
.nx-done h3{font-size:1.15rem;letter-spacing:-.024em}
.nx-done p{color:var(--text-2);font-size:.9rem;line-height:1.65}
.nx-done pre{width:100%;max-height:180px;overflow:auto;padding:14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);font-family:var(--ff-mono);font-weight:600;font-size:.72rem;
  line-height:1.7;color:var(--text-2);white-space:pre-wrap;margin:0}

body.nx-lock{overflow:hidden}

@media(max-width:820px){
  .nx-card{grid-template-columns:1fr;max-height:calc(100dvh - 24px)}
  .nx-aside{gap:12px;padding:22px 58px 24px 22px}
  /* the close button now sits over the navy rail, so it needs navy-ground colours */
  .nx-close{color:#EAF0FA;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
  .nx-close:hover{color:#fff;background:rgba(255,255,255,.2)}
  .nx-points,.nx-aside .nx-lede{display:none}          /* keep the phone view to the ask itself */
  .nx-direct{margin-top:6px;padding-top:14px;grid-template-columns:1fr;font-size:.8rem}
  .nx-row{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
  .nx-modal,.nx-card,.nx-f > label,.nx-f::after,.nx-prog i,.nx-close{transition-duration:.01ms}
  .nx-tick svg{animation:none;stroke-dashoffset:0}
}

/* ============================================================
   HOMEPAGE COMPONENTS
   Previously duplicated inside index.html's own <style> block, which meant
   the homepage silently ignored every fix made here. Moved so the site has
   one stylesheet and one source of truth.
   ============================================================ */

/* ---- industry overview row: four names, no pointer affordance, no tabs ---- */
.ind-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);
  margin-bottom:clamp(18px,2.4vw,28px)}
.ind-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(22px,2.2vw,28px);border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);color:var(--text);text-align:left;overflow:hidden;
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.ind-card:hover{background:var(--surface-2);border-color:var(--line-strong)}
.ind-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--saguaro),transparent 82%);opacity:.5}
.ind-card .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none;
  color:var(--saguaro);background:color-mix(in srgb,var(--saguaro) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--saguaro) 22%,transparent)}
.ind-card .ic svg{width:21px;height:21px}
.ind-card .nm{font-family:var(--ff-display);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  font-size:clamp(1rem,1.3vw,1.12rem)}
@media(max-width:900px){.ind-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ind-cards{grid-template-columns:1fr}}

/* ---- capabilities as editorial numbered rows beside an image collage ---- */
.cap-split{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.8fr);
  gap:clamp(24px,3.2vw,52px);align-items:start;margin-top:clamp(34px,4.5vw,56px)}
.cap-split .cap-rows{margin-top:0}
.cap-rows{margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--line)}
.cap-row{position:relative;display:grid;align-items:baseline;
  grid-template-columns:clamp(24px,5vw,50px) minmax(0,1fr);
  column-gap:clamp(14px,2vw,32px);row-gap:10px;padding:clamp(16px,1.4vw,22px) 0;
  border-bottom:1px solid var(--line);transition:background .45s var(--ease)}
.cap-row:hover{background:var(--surface)}
.cap-row::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--saguaro);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease)}
.cap-row:hover::after{transform:scaleX(1)}
.cap-n{font-family:var(--ff-display);font-weight:700;line-height:1;letter-spacing:-.04em;
  font-size:clamp(1.6rem,3vw,2.5rem);color:var(--text);opacity:.22;
  transition:opacity .45s var(--ease),color .45s var(--ease)}
.cap-row:hover .cap-n{opacity:1;color:var(--saguaro)}
.cap-row h3{font-size:clamp(1rem,1.35vw,1.15rem);letter-spacing:-.02em;line-height:1.28}
.cap-row p{grid-column:2;color:var(--text-2);font-size:.925rem;line-height:1.65}
@media(max-width:900px){.cap-row{grid-template-columns:clamp(40px,7vw,64px) minmax(0,1fr);row-gap:11px}}
@media(max-width:560px){
  .cap-row{grid-template-columns:1fr;row-gap:13px}
  .cap-row p{grid-column:1}
  .cap-n{font-size:1.45rem;opacity:1;color:var(--saguaro)}
}

.cap-collage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.3vw,18px)}
.cap-collage .cc-tile:nth-child(even){margin-top:clamp(16px,2.2vw,32px)}
.cc-tile{position:relative;margin:0;aspect-ratio:1/1;border-radius:clamp(16px,1.7vw,22px);
  overflow:hidden;background:linear-gradient(165deg,var(--brand) 0%,var(--brand-ink) 100%);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.cc-tile::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .5s var(--ease)}
.cc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease),filter .6s var(--ease)}
.cc-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,18,32,.05) 40%,rgba(9,18,32,.72))}
.cc-tile .cc-lbl{position:absolute;z-index:2;left:11px;right:11px;bottom:11px;
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;
  background:rgba(9,18,32,.42);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.76rem;font-weight:600;color:#EAF0FA;line-height:1.3;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.cc-tile .cc-lbl::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--accent-tint)}
.cc-tile:hover{transform:translateY(-6px);box-shadow:0 26px 60px -26px rgba(0,0,0,.6)}
.cc-tile:hover::before{box-shadow:inset 0 0 0 1px rgba(236,123,126,.5)}
.cc-tile:hover img{transform:scale(1.07);filter:saturate(1.02) contrast(1.04)}
.cc-tile:hover .cc-lbl{background:rgba(9,18,32,.56);border-color:rgba(255,255,255,.3)}
.cap-collage .cc-tile{opacity:0;transform:translate3d(0,20px,0) scale(.985);
  transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .55s var(--ease)}
.cap-collage.in .cc-tile{opacity:1;transform:none}
.cap-collage.in .cc-tile:nth-child(2){transition-delay:.07s}
.cap-collage.in .cc-tile:nth-child(3){transition-delay:.14s}
.cap-collage.in .cc-tile:nth-child(4){transition-delay:.21s}
.cap-collage.in .cc-tile:nth-child(5){transition-delay:.28s}
.cap-collage.in .cc-tile:nth-child(6){transition-delay:.35s}
.cap-collage.in .cc-tile:hover{transform:translateY(-6px);transition-delay:0s}
@media(max-width:1024px){
  .cap-split{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .cap-collage{grid-template-columns:repeat(3,1fr)}
  .cap-collage .cc-tile:nth-child(even){margin-top:0}
  .cc-tile{aspect-ratio:4/3}
}
@media(max-width:560px){.cap-collage{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){
  .cap-row,.cap-row::after,.cap-n,.cc-tile,.cc-tile img,.cc-tile::before,.cc-tile .cc-lbl{transition-duration:.01ms}
  .cap-collage .cc-tile{opacity:1;transform:none;transition-delay:0s}
}

/* ============================================================
   BACK TO TOP
   The homepage and every long content page run several screens deep. Getting
   back to the nav meant a flick-scroll; this is the one control that was
   missing from the reading experience.
   ============================================================ */
.to-top{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:var(--text);background:color-mix(in srgb,var(--bg-2) 90%,transparent);
  border:1px solid var(--line-strong);box-shadow:var(--shadow);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--ease),transform .35s var(--ease-spring),
             visibility .35s,background .3s,border-color .3s,color .3s}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--on-accent);background:var(--saguaro);border-color:transparent}
.to-top svg{width:19px;height:19px;transition:transform .35s var(--ease)}
.to-top:hover svg{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.to-top,.to-top svg{transition-duration:.01ms}}

/* ============================================================
   DROPDOWN STATE
   The panels open on :hover/:focus-within. Escape sets .shut on the parent so
   a keyboard user can dismiss a panel without having to tab out of it; the
   class is cleared on the next pointer or focus entry (see site.js).
   ============================================================ */
.has-drop.shut .dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}

/* ============================================================
   FAQ — collapsed answers are removed from the reading order rather than
   just clipped to zero height, so a screen reader does not announce the
   text of an answer whose question is closed.
   ============================================================ */
.q-body{visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility .5s}
.q.on .q-body{visibility:visible}

/* ============================================================
   NEXA — the on-site assistant (assets/chat.js)
   A launcher that stays out of the way, and a panel that behaves like a
   panel on a desktop and like a sheet on a phone. Sits above the page but
   below the enquiry modal, which is the one thing allowed to cover it.
   ============================================================ */
.nxc{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:150;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.nxc > *{pointer-events:auto}

/* ---- launcher ---- */
.nxc-fab{position:relative;width:60px;height:60px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--on-accent);
  background:linear-gradient(145deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:0 14px 34px -10px color-mix(in srgb,var(--accent) 70%,transparent),
             0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease)}
.nxc-fab:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 22px 48px -12px color-mix(in srgb,var(--accent) 78%,transparent),
             0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.nxc-fab svg{width:26px;height:26px}
/* the glyph and the cross occupy the same cell and cross-fade on open */
.nxc-fab-ic,.nxc-fab-x{grid-area:1/1;display:grid;place-items:center;
  transition:opacity .28s var(--ease),transform .38s var(--ease-spring)}
.nxc-fab-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.nxc.on .nxc-fab-ic{opacity:0;transform:rotate(90deg) scale(.6)}
.nxc.on .nxc-fab-x{opacity:1;transform:none}
.nxc.on .nxc-fab{background:var(--surface-2);color:var(--text);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.5),0 0 0 1px var(--line-strong)}
/* a single slow ping — enough to be noticed once, not enough to nag */
.nxc-ping{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);
  animation:nxcPing 3.4s var(--ease) infinite}
.nxc.on .nxc-ping{animation:none}
@keyframes nxcPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  60%,100%{box-shadow:0 0 0 18px transparent}}

/* ---- first-visit teaser ---- */
.nxc-teaser{position:relative;order:-1;max-width:270px;padding:14px 38px 14px 16px;
  border-radius:16px 16px 4px 16px;border:1px solid var(--line-strong);background:var(--bg-2);
  box-shadow:var(--shadow);opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .3s var(--ease),transform .4s var(--ease-spring)}
.nxc-teaser.on{opacity:1;transform:none}
.nxc-teaser p{font-size:.86rem;line-height:1.5;color:var(--text-2)}
.nxc-teaser-x{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-3)}
.nxc-teaser-x svg{width:11px;height:11px}
.nxc-teaser-x:hover{color:var(--text);background:var(--surface-2)}

/* ---- panel ---- */
.nxc-panel{display:flex;flex-direction:column;order:-1;
  width:min(396px,calc(100vw - 32px));height:min(590px,calc(100dvh - 140px));
  border-radius:var(--r-lg);border:1px solid var(--line-strong);background:var(--bg-2);
  box-shadow:0 40px 90px -28px rgba(0,0,0,.55);overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.97);transform-origin:100% 100%;
  transition:opacity .26s var(--ease),transform .38s var(--ease-spring)}
.nxc-panel[hidden]{display:none}
.nxc.on .nxc-panel{opacity:1;transform:none}

.nxc-head{display:flex;align-items:center;gap:11px;flex:none;padding:14px 12px 14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(150deg,#1E3768 0%,var(--brand) 55%,var(--brand-ink) 100%);color:#EAF0FA}
.nxc-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff}
.nxc-avatar svg{width:19px;height:19px}
.nxc-id{min-width:0;margin-right:auto}
.nxc-id h2{font-size:1rem;letter-spacing:-.02em;line-height:1.2;color:#fff}
.nxc-id p{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:.72rem;color:#B9C6E0}
.nxc-dot{width:6px;height:6px;border-radius:50%;background:#7BE0A4;flex:none;
  box-shadow:0 0 0 3px rgba(123,224,164,.22)}
.nxc-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:#C2CCE4;transition:color .2s,background .2s}
.nxc-icon:hover{color:#fff;background:rgba(255,255,255,.14)}
.nxc-icon svg{width:15px;height:15px}

/* ---- transcript ---- */
.nxc-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px 6px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.nxc-msg{display:flex;gap:9px;align-items:flex-start;max-width:100%;
  animation:nxcIn .34s var(--ease) both}
@keyframes nxcIn{from{opacity:0;transform:translateY(8px)}}
.nxc-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;flex:none;
  margin-top:2px;border:1px solid var(--line)}
.nxc-mark svg{width:14px;height:14px}
.nxc-bot .nxc-mark{color:var(--saguaro);background:color-mix(in srgb,var(--saguaro) 12%,transparent);
  border-color:color-mix(in srgb,var(--saguaro) 26%,transparent)}
.nxc-user{flex-direction:row-reverse}
.nxc-user .nxc-mark{color:var(--text-3);background:var(--surface-2)}
.nxc-body{min-width:0;padding:11px 14px;border-radius:14px;font-size:.875rem;line-height:1.6;
  border:1px solid var(--line);background:var(--surface)}
.nxc-bot .nxc-body{border-top-left-radius:5px}
.nxc-user .nxc-body{border-top-right-radius:5px;border-color:transparent;
  background:color-mix(in srgb,var(--saguaro) 14%,var(--surface-2));color:var(--text)}
.nxc-body p + p{margin-top:9px}
.nxc-body b{font-weight:700;color:var(--text)}
.nxc-li{display:flex;gap:9px;margin-top:7px;color:var(--text-2)}
.nxc-li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--saguaro)}
.nxc-body p{color:var(--text-2)}
.nxc-user .nxc-body p{color:var(--text)}

.nxc-link,.nxc-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:.8rem;font-weight:700;color:var(--saguaro);
  border-bottom:1px solid color-mix(in srgb,var(--saguaro) 40%,transparent);
  transition:border-color .25s,gap .25s var(--ease)}
.nxc-link:hover,.nxc-cta:hover{border-bottom-color:var(--saguaro);gap:11px}
.nxc-link svg,.nxc-cta svg{width:13px;height:13px}
.nxc-direct{display:grid;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.nxc-direct a{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:var(--text-2)}
.nxc-direct a:hover{color:var(--saguaro)}
.nxc-direct svg{width:14px;height:14px;flex:none;color:var(--saguaro)}

.nxc-typing{display:inline-flex;gap:4px;padding:3px 0}
.nxc-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);
  animation:nxcBlink 1.2s infinite var(--ease)}
.nxc-typing i:nth-child(2){animation-delay:.16s}
.nxc-typing i:nth-child(3){animation-delay:.32s}
@keyframes nxcBlink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- suggestions ---- */
.nxc-chips{display:flex;flex-wrap:wrap;gap:7px;flex:none;padding:10px 16px 4px}
.nxc-chips:empty{display:none}
.nxc-chip{padding:8px 13px;border-radius:99px;border:1px solid var(--field-line);
  background:var(--bg);font-size:.79rem;font-weight:600;color:var(--text-2);text-align:left;
  transition:border-color .25s,color .25s,background .25s,transform .3s var(--ease-spring)}
.nxc-chip:hover{border-color:var(--saguaro);color:var(--saguaro);
  background:color-mix(in srgb,var(--saguaro) 8%,transparent);transform:translateY(-1px)}

/* ---- composer ---- */
.nxc-compose{display:flex;align-items:flex-end;gap:8px;flex:none;margin:10px 16px 0;padding:6px 6px 6px 14px;
  border-radius:22px;border:1px solid var(--field-line);background:var(--bg);
  transition:border-color .25s,box-shadow .25s}
.nxc-compose:focus-within{border-color:var(--saguaro);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--saguaro) 20%,transparent)}
.nxc-compose textarea{flex:1;min-width:0;border:0;outline:none;resize:none;background:none;
  color:var(--text);font-family:var(--ff-body);font-size:1rem;line-height:1.5;
  padding:9px 0;max-height:108px}
.nxc-compose textarea::placeholder{color:var(--text-3)}
.nxc-send{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--on-accent);background:var(--saguaro);
  transition:transform .3s var(--ease-spring),opacity .25s}
.nxc-send:hover{transform:scale(1.07)}
.nxc-send svg{width:17px;height:17px}
.nxc-foot{flex:none;padding:10px 16px 14px;font-size:.7rem;line-height:1.5;color:var(--text-3)}
.nxc-foot a{color:var(--saguaro);text-decoration:underline;text-underline-offset:2px}
.nxc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the back-to-top control moves up so the two never sit on top of each other */
.to-top{bottom:calc(clamp(16px,3vw,28px) + 72px)}

@media(max-width:560px){
  .nxc{left:0;right:0;bottom:0;padding:0 16px 16px;align-items:flex-end}
  .nxc-panel{width:100%;height:min(76dvh,620px);border-radius:var(--r-lg) var(--r-lg) 0 0;
    margin-bottom:-16px}
  .nxc-teaser{max-width:min(270px,calc(100vw - 32px))}
  .nxc.on .nxc-fab{display:none}
}
@media(prefers-reduced-motion:reduce){
  .nxc-panel,.nxc-fab,.nxc-fab-ic,.nxc-fab-x,.nxc-teaser,.nxc-chip,.nxc-send,.nxc-link,.nxc-cta{transition-duration:.01ms}
  .nxc-ping,.nxc-msg{animation:none}
  .nxc-typing i{animation-duration:.01ms}
  .nxc-log{scroll-behavior:auto}
}
@media(forced-colors:active){
  .nxc-fab,.nxc-panel,.nxc-body,.nxc-chip,.nxc-compose{border:1px solid CanvasText}
}