/* ==========================================================================
   NEXUS AI  ·  mobile first
   Display: League Spartan   ·   Body: DM Sans
   ========================================================================== */

:root{
  /* Ocean Royale. Deep navy ground, royal blue brand, cyan highlights and an
     amber call to action. Every value below was contrast checked before use. */
  --paper:#FFFFFF;        /* cards and surfaces */
  --page:#F1F6FB;         /* page ground */
  --surface:#FFFFFF;
  --ink:#03045E;          /* navy, 16:1 on white */
  --ink-2:#2B3475;
  --muted:#59628F;        /* 4.5:1 even on the tinted bands */
  --tint:#E4F1F8;
  --tint-2:#F1F7FB;
  --rule:#D8E5EF;
  --rule-2:#7C8AA8;       /* interactive border, 3.0:1 on white */
  --deep:#03045E;         /* navy band and footer */
  --deep-2:#0D1272;
  --on-deep:#EAF2FB;
  --on-deep-2:#AFC0DE;
  --on-deep-3:#8494BC;
  --deep-rule:#232A78;
  --deep-edge:#5D6BAE;

  --accent:#00B4D8;       /* cyan highlight, large fills and graphics only */
  --accent-fill:#023EBA;  /* royal blue, carries white text */
  --accent-on:#FFFFFF;
  --accent-ink:#023EBA;   /* accent text and links on white */
  --accent-2:#62D8F0;     /* accent on dark grounds */
  --accent-wash:#E6F1FD;

  --cta:#FBB02D;          /* amber, the call to action */
  --cta-ink:#03045E;      /* white on amber is unreadable, navy is not */
  --cta-edge:#E09C14;

  --go:#12705A;
  --go-wash:#E3F5F1;
  --stop:#B3223A;

  --r:16px;
  --r-sm:10px;
  --r-pill:999px;
  --maxw:1180px;
  --pad:clamp(20px,5.5vw,44px);
  --gap:clamp(24px,4vw,40px);
  --sp:clamp(56px,8vw,104px);
  --shadow:0 1px 2px rgba(3,4,94,.05),0 12px 28px -18px rgba(3,4,94,.26);
  --shadow-lift:0 2px 6px rgba(3,4,94,.07),0 24px 46px -22px rgba(3,4,94,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
img,svg{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:"League Spartan",system-ui,sans-serif;font-weight:600;
  line-height:1.12;letter-spacing:-.012em;text-wrap:balance;margin:0;
}
/* League Spartan sets tight and has a tall x-height, so it needs a touch less
   negative tracking and a little more leading than a wider display face */
h1{font-size:clamp(35px,6.4vw,60px);line-height:1.06;letter-spacing:-.018em}
h2{font-size:clamp(28px,4.5vw,43px);letter-spacing:-.015em}
h3{font-size:clamp(18px,2.4vw,21px);letter-spacing:-.006em;font-weight:600}
p{margin:0 0 1em}
:where(h1,h2,h3)+p{margin-top:0}
strong{font-weight:600;color:var(--ink)}
.accent{color:var(--accent)}

.data{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:860px}
section{padding:var(--sp) 0}
.pt0{padding-top:0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

.lead{font-size:clamp(16.5px,2.1vw,19.5px);line-height:1.55;color:var(--ink-2);max-width:62ch}
.dim{color:var(--muted)}

/* ---------------------------------------------------------------- eyebrow */
.tagline{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-wash);color:var(--accent-ink);
  border-radius:var(--r-pill);padding:7px 15px 7px 11px;
  font-size:13.5px;font-weight:600;margin-bottom:22px;
}
.tagline .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--rule);
}
@supports (backdrop-filter:blur(8px)){.site-head{backdrop-filter:saturate(160%) blur(12px)}}
.head-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);min-height:68px;display:flex;align-items:center;gap:18px}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:"League Spartan",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;
  white-space:nowrap;padding:14px 0;
}
.brand .glyph{
  width:28px;height:28px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  display:grid;place-items:center;
}
.brand .glyph svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.navtoggle{
  margin-left:auto;background:none;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  min-height:44px;padding:0 15px;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
}
.nav{
  display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
  background:var(--surface);border-bottom:1px solid var(--rule);padding:6px var(--pad) 22px;
  box-shadow:0 18px 32px -20px rgba(3,4,94,.4);
}
.nav.open{display:flex}
.nav a{
  text-decoration:none;color:var(--ink-2);font-size:16px;font-weight:500;
  padding:14px 0;border-bottom:1px solid var(--rule);min-height:44px;display:flex;align-items:center;
}
.nav a[aria-current=page]{color:var(--accent-ink);font-weight:600}
.nav a.cta{
  margin-top:18px;border-bottom:0;justify-content:center;border-radius:var(--r-pill);
  background:var(--cta);color:var(--cta-ink);font-weight:600;min-height:48px;
}
@media (min-width:1000px){
  .navtoggle{display:none}
  .nav{display:flex;position:static;flex-direction:row;align-items:center;margin-left:auto;gap:30px;padding:0;border:0;box-shadow:none;background:none}
  .nav a{padding:8px 0;border-bottom:0;min-height:0;font-size:15px}
  .nav a[aria-current=page]{color:var(--accent-ink)}
  .nav a.cta{margin-top:0;padding:0 22px;min-height:44px}
}
@media (hover:hover){
  .nav a:hover{color:var(--accent-ink)}
  .nav a.cta:hover{background:var(--ink);color:#FFFFFF}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:13px 22px;border-radius:var(--r-pill);
  background:var(--cta);color:var(--cta-ink);border:1.5px solid var(--cta-edge);
  text-decoration:none;font:inherit;font-weight:600;font-size:16px;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
  box-shadow:0 12px 26px -14px rgba(224,156,20,.42);
}
.btn svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);box-shadow:none}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#FFFFFF;box-shadow:none}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(224,156,20,.55)}
  .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-2px);box-shadow:none}
  .btn-dark:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:#FFFFFF}
}
.btn:active{transform:translateY(0)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.center .btn-row{justify-content:center}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 92% at 50% -12%,rgba(2,62,186,.10),rgba(2,62,186,0) 62%),var(--page);
  padding:clamp(40px,7vw,72px) 0 clamp(48px,7vw,80px);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,56px);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}}
/* direct children only: the word reveal wraps every word in a span, and a
   descendant selector here would paint the whole headline accent */
.hero h1>span:not(.w){color:var(--accent-ink)}
.hero .lead{margin-top:20px}
/* the two hero CTAs stay on one line once there is room for them */
@media (min-width:960px){
  .hero .btn-row{flex-wrap:nowrap}
  .hero .btn-row .btn{white-space:nowrap;padding-left:20px;padding-right:20px}
}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;padding:0;list-style:none}
.hero-proof li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.hero-proof svg{width:17px;height:17px;flex:none;stroke:var(--go);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* workflow visual: what the product actually is */
.flow{
  background:var(--surface);border:1px solid var(--rule);border-radius:calc(var(--r) + 6px);
  padding:clamp(18px,3vw,26px);box-shadow:var(--shadow-lift);
}
.flow svg{width:100%;height:auto;overflow:visible}
.flow .node{fill:var(--paper);stroke:var(--rule-2);stroke-width:1.5}
.flow .node-a{fill:var(--accent-wash);stroke:var(--accent)}
.flow .node-g{fill:var(--go-wash);stroke:var(--go)}
.flow .wire{fill:none;stroke:var(--rule-2);stroke-width:1.6}
.flow .glyph{fill:none;stroke:var(--ink-2);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flow .glyph-a{stroke:var(--accent-ink)}
.flow .glyph-g{stroke:var(--go)}
.flow .lbl{font:600 11.5px "DM Sans",sans-serif;fill:var(--ink-2)}
.flow .lbl-s{font:500 10px "DM Sans",sans-serif;fill:var(--muted)}
.flow .pulse{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .flow .pulse{animation:travel 3.4s cubic-bezier(.45,0,.55,1) infinite}
  .flow .pulse-2{animation-delay:.55s}
  .flow .pulse-3{animation-delay:1.1s}
}
@keyframes travel{
  0%{offset-distance:0%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* ---------------------------------------------------------------- scene */
.scene{position:relative;display:grid;grid-template-columns:1fr;gap:22px;justify-items:center}
.scene{overflow:visible}
.scene::before{
  content:"";position:absolute;inset:-6% -4% 6% -4%;z-index:0;border-radius:50%;
  background:radial-gradient(56% 52% at 58% 44%,rgba(2,62,186,.16),rgba(2,62,186,0) 70%);
  filter:blur(6px);
}
.scene>*{position:relative;z-index:1}


/* phone */
.phone{
  width:min(290px,84vw);margin-left:auto;border-radius:32px;padding:10px;
  background:linear-gradient(160deg,#1B2472 0%,#03045E 100%);
  box-shadow:0 26px 52px -24px rgba(3,4,94,.45),0 2px 0 rgba(255,255,255,.22) inset;
}
.phone-screen{background:#F2F8FC;border-radius:24px;overflow:hidden}
.phone-top{
  display:flex;align-items:center;gap:10px;padding:14px 14px 12px;
  background:linear-gradient(135deg,#023EBA,#03045E);color:#FFFFFF;
}
.phone-top .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.24);display:grid;place-items:center;flex:none}
.phone-top .av svg{width:16px;height:16px;stroke:#FFFFFF;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.phone-top b{font-size:14px;font-weight:600;display:block;line-height:1.2}
.phone-top span{font-size:11.5px;color:rgba(255,255,255,.85)}
.chat{padding:14px 12px 16px;display:grid;gap:9px}
.bubble{max-width:86%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.45;box-shadow:0 1px 2px rgba(3,4,94,.09)}
.bubble.in{background:#FFFFFF;border-bottom-left-radius:5px;justify-self:start;color:var(--ink)}
.bubble.out{background:#DDEBFC;border-bottom-right-radius:5px;justify-self:end;color:#0B3C8F}
.bubble .t{display:block;margin-top:5px;font-size:10.5px;color:var(--muted)}
.bubble.out .t{color:#3F63A8}
.bubble.alert{background:#FDF0D8;color:#7A5405;justify-self:start;border-bottom-left-radius:5px;font-weight:500}
.typing{justify-self:start;display:inline-flex;gap:4px;padding:11px 13px;background:#FFFFFF;border-radius:14px;border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(3,4,94,.09)}
.typing i{width:6px;height:6px;border-radius:50%;background:#8FA6C6;display:block}
@media (prefers-reduced-motion:no-preference){
  .typing i{animation:blip 1.3s ease-in-out infinite}
  .typing i:nth-child(2){animation-delay:.16s}
  .typing i:nth-child(3){animation-delay:.32s}
}
@keyframes blip{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* floating callouts */
.callouts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:0;list-style:none}
.callouts li{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:8px 16px 8px 8px;
  font-size:14px;font-weight:600;color:var(--ink);box-shadow:var(--shadow);white-space:nowrap;
}
.callouts .cico{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#023EBA,#03045E);
}
.callouts .cico svg{width:16px;height:16px;stroke:#FFFFFF;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:960px){
  .scene{
    grid-template-columns:auto minmax(0,1fr);
    justify-items:stretch;align-items:center;gap:0 clamp(16px,2.6vw,34px);
  }
  .callouts{flex-direction:column;align-items:flex-start;gap:clamp(16px,2.4vw,26px);order:-1}
  .callouts li{
    position:relative;
    animation:float 5s ease-in-out infinite;
  }
  .callouts li:nth-child(2){animation-delay:.9s}
  .callouts li:nth-child(3){animation-delay:1.8s}
  .callouts li::after{
    content:"";position:absolute;left:100%;top:50%;width:30px;height:1px;
    border-top:2px dashed var(--rule-2);
  }
}
@media (prefers-reduced-motion:reduce){.callouts li{animation:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* wave, echoing the reference's bottom curve */
.wave{display:block;width:100%;height:auto;margin-bottom:-1px}
.wave path{fill:var(--tint-2)}

/* ---------------------------------------------------------------- bands */
.band{background:var(--tint-2)}
.band-warm{background:var(--tint)}
.band-dark{background:var(--deep);color:var(--on-deep)}
.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.band-dark p,.band-dark .lead{color:var(--on-deep-2)}
.band-dark .btn-ghost{color:var(--on-deep);border-color:var(--deep-edge)}
@media (hover:hover){.band-dark .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}}

/* ---------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px;
}
.step .n{
  flex:none;width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--accent-fill);color:#FFFFFF;font-family:"League Spartan",sans-serif;font-weight:600;font-size:15px;
}
.step h3{margin-bottom:5px}
.step p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* ---------------------------------------------------------------- record */
.record{margin:0;border-top:1px solid var(--rule)}
.rec{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:5px 18px;padding:17px 0 16px;border-bottom:1px solid var(--rule)}
.rec dt{color:var(--ink-2);font-size:15px;line-height:1.35}
.rec dd{
  margin:0;display:flex;align-items:baseline;gap:11px;white-space:nowrap;
  font-family:"League Spartan",sans-serif;font-weight:600;font-size:clamp(23px,4.6vw,30px);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.rec .was{color:var(--muted);font-size:.74em;font-weight:500}
.rec .now{color:var(--accent)}
.rec .arrow{position:relative;flex:none;width:clamp(24px,4vw,34px);height:2px;background:var(--rule-2);align-self:center;transform-origin:left center}
.rec .arrow::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:2px solid var(--rule-2);border-right:2px solid var(--rule-2);transform:translateY(-50%) rotate(45deg)}
.rec .note{grid-column:1/-1;color:var(--muted);font-size:13.5px;margin:0}
@media (prefers-reduced-motion:no-preference){
  .record.is-in .rec .arrow{animation:draw .62s cubic-bezier(.16,1,.3,1) backwards}
  .record.is-in .rec:nth-child(1) .arrow{animation-delay:.05s}
  .record.is-in .rec:nth-child(2) .arrow{animation-delay:.15s}
  .record.is-in .rec:nth-child(3) .arrow{animation-delay:.25s}
  .record.is-in .rec:nth-child(4) .arrow{animation-delay:.35s}
  .record.is-in .rec:nth-child(5) .arrow{animation-delay:.45s}
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.creds{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.creds li{
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-pill);padding:8px 16px;
}

/* ---------------------------------------------------------------- schedule */
.schedule{border-top:1px solid var(--rule);margin-top:34px}
.item{display:grid;grid-template-columns:1fr;gap:6px;padding:24px 0;border-bottom:1px solid var(--rule)}
.item p{margin:0;color:var(--ink-2);font-size:15.5px}
@media (min-width:760px){
  .item{grid-template-columns:minmax(0,6fr) minmax(0,11fr);gap:0 var(--gap);align-items:start;padding:28px 0}
  .item p{max-width:60ch}
}

/* ---------------------------------------------------------------- entries */
.entries{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
@media (min-width:820px){.entries{grid-template-columns:repeat(2,1fr)}}
.entry{
  display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
@media (hover:hover){.entry:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}}
.entry h3{margin-bottom:9px}
.entry p{margin:0;color:var(--ink-2);font-size:15.5px}
.entry .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:600;font-size:15px;color:var(--accent-ink)}
.entry .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:40px}
@media (min-width:760px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:26px 24px}
.panel.yes{border-color:#8FCDBC;background:var(--go-wash)}
.panel.no{background:var(--tint-2)}
.panel h3{margin-bottom:10px}
.panel p{margin:0;color:var(--ink-2);font-size:15.5px}

/* ---------------------------------------------------------------- pull */
.pull{
  margin:var(--gap) 0;padding:26px 28px;border-radius:var(--r);
  background:var(--accent-wash);
  font-family:"League Spartan",sans-serif;font-weight:500;
  font-size:clamp(18px,2.6vw,24px);line-height:1.34;letter-spacing:-.014em;color:var(--ink);
}
.pull p{margin:0}
.band-dark .pull{background:var(--deep-2);color:#fff}

/* ---------------------------------------------------------------- prose */
.prose{max-width:68ch}
.prose h2{margin:46px 0 14px}
.prose h3{margin:30px 0 8px}
.prose p{color:var(--ink-2)}
.prose ul{padding-left:20px;margin:0 0 1.1em}
.prose li{margin-bottom:9px;color:var(--ink-2)}
.prose li::marker{color:var(--accent)}

/* ---------------------------------------------------------------- faq */
.faq{margin-top:40px;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:0 24px}
.faq details[open]{border-color:var(--rule-2);box-shadow:var(--shadow)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 0;min-height:44px;cursor:pointer;list-style:none;
  font-family:"League Spartan",sans-serif;font-weight:600;font-size:clamp(17px,2.4vw,19.5px);
  line-height:1.3;letter-spacing:-.014em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:var(--accent-ink)}}
.faq .mark{flex:none;position:relative;width:15px;height:15px;margin-top:6px}
.faq .mark::before,.faq .mark::after{
  content:"";position:absolute;left:0;top:50%;width:15px;height:2px;border-radius:2px;
  background:var(--accent);transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.faq .mark::after{transform:rotate(90deg)}
.faq details[open] .mark::after{transform:rotate(0)}
.faq .answer{padding:0 0 22px;max-width:64ch}
.faq .answer p{margin:0 0 .8em;color:var(--ink-2);font-size:16px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- calculator */
.calc{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:40px}
.calcform{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(22px,3vw,30px)}
.field{margin-bottom:24px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-weight:600;font-size:16px;margin-bottom:3px}
.field .hint{display:block;color:var(--muted);font-size:14px;line-height:1.45;margin-bottom:11px}
.field input[type=number]{
  width:100%;font:inherit;font-size:17px;font-variant-numeric:tabular-nums;min-height:50px;
  padding:12px 15px;border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
}
.field input[type=number]:focus{border-color:var(--accent)}
.field input[type=range]{width:100%;min-height:44px;accent-color:var(--accent)}

.result{background:var(--deep);color:var(--on-deep);padding:30px 28px;border-radius:var(--r)}
.result{box-shadow:var(--shadow-lift)}
.result .cap{display:block;color:var(--accent-2);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.result .big{
  font-family:"League Spartan",sans-serif;font-weight:600;font-size:clamp(40px,10vw,56px);
  line-height:1;margin:10px 0 4px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.result .sub{color:var(--on-deep-2);font-size:14.5px;margin:0 0 22px;line-height:1.45}
.result .btn{width:100%}
.breakdown{margin:22px 0 0;border-top:1px solid var(--rule)}
.breakdown .line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule)}
.breakdown dt{color:var(--ink-2);font-size:15.5px}
.breakdown dd{margin:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:900px){
  .calc{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);align-items:start}
  .answer{position:sticky;top:92px}
}
@media (max-width:899px){
  .answer{display:contents}
  .breakdown{order:2}
  .result{
    position:fixed;left:0;right:0;bottom:0;z-index:40;border-radius:0;
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
    padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px -12px rgba(3,4,94,.35);
  }
  .result .cap{font-size:11px}
  .result .big{font-size:clamp(26px,7vw,33px);margin:2px 0 0}
  .result .sub{display:none}
  .result .btn{width:auto;min-height:44px;padding:0 18px;font-size:14.5px;white-space:nowrap}
  body.has-sticky-result{padding-bottom:98px}
}
.disclaim{color:var(--muted);font-size:14px;line-height:1.55;margin-top:24px;max-width:68ch}

/* ---------------------------------------------------------------- contact */
.channels{display:grid;gap:12px;margin-top:24px}
.channel{
  display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:18px 22px;min-height:64px;
  transition:border-color .16s ease,transform .16s ease;
}
@media (hover:hover){.channel:hover{border-color:var(--accent);transform:translateX(3px)}}
.channel .k{font-weight:600;font-size:16.5px}
.channel .v{color:var(--muted);font-size:15px;text-align:right;word-break:break-word}

form.enquiry label{display:block;font-weight:600;font-size:15.5px;margin-bottom:6px}
form.enquiry input,form.enquiry textarea{
  width:100%;font:inherit;font-size:16.5px;min-height:50px;padding:12px 15px;
  border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);margin-bottom:4px;
}
form.enquiry input:focus,form.enquiry textarea:focus{border-color:var(--accent)}
form.enquiry textarea{min-height:130px;resize:vertical;line-height:1.5}
form.enquiry .row{margin-bottom:18px}
form.enquiry .err{display:none;color:var(--stop);font-size:14px;font-weight:500;margin-top:3px}
form.enquiry .row.invalid input,form.enquiry .row.invalid textarea{border-color:var(--stop);border-width:2px}
form.enquiry .row.invalid .err{display:block}
form.enquiry .opt{color:var(--muted);font-weight:400}
.formnote{margin-top:14px;color:var(--muted);font-size:14px}
.formstatus{display:none;margin-top:18px;padding:15px 18px;border-radius:var(--r-sm);background:var(--go-wash);color:#12705A;font-size:15.5px}
.formstatus.on{display:block}
.formstatus.bad{background:#FBE7EA;color:var(--stop)}

/* ---------------------------------------------------------------- CTA band */
.cta-band{
  background:linear-gradient(135deg,#03045E 0%,#010233 100%);
  color:#FFFFFF;border-radius:calc(var(--r) + 8px);padding:clamp(36px,5vw,58px) clamp(26px,4vw,52px);
}
.cta-band h2{color:#FFFFFF}
.cta-band p{color:rgba(255,255,255,.9)}
.cta-band .btn{background:#FFFFFF;color:var(--accent-ink);border-color:#FFFFFF;box-shadow:none}
.cta-band .btn-ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.55)}
@media (hover:hover){
  .cta-band .btn:hover{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
  .cta-band .btn-ghost:hover{background:#FFFFFF;color:var(--accent-ink);border-color:#FFFFFF}
}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--deep);color:var(--on-deep-2);padding:var(--sp) 0 28px;font-size:15px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
.site-foot .brand{color:#fff}
.foot-grid{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-foot h2{font-family:"DM Sans",sans-serif;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2);margin:0 0 16px}
.site-foot p{margin:0;color:var(--on-deep-3);font-size:14.5px;line-height:1.6}
.site-foot a{color:var(--on-deep-2);text-decoration:none;display:flex;align-items:center;padding:10px 0;min-height:44px}
@media (hover:hover){.site-foot a:hover{color:#fff}}
.foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--deep-rule);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--on-deep-3)}

/* ---------------------------------------------------------------- wa float */
.wa-float{
  position:fixed;right:16px;z-index:60;bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:9px;min-height:54px;padding:0 24px;
  background:var(--accent-fill);color:#FFFFFF;border-radius:var(--r-pill);text-decoration:none;
  font-weight:600;font-size:16px;box-shadow:0 12px 28px -10px rgba(2,62,186,.4);
}
.wa-float svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1000px){.wa-float{display:none}}
body.has-sticky-result .wa-float{display:none}
/* the floating button is fixed, so the page needs clearance or it permanently
   covers whatever sits at the bottom of the scroll */
@media (max-width:999px){
  body:not(.has-sticky-result){padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:var(--accent-fill);color:#FFFFFF;padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;z-index:99;border-radius:var(--r-sm);font-weight:600}

@media print{
  .site-head,.wa-float,.btn-row,.site-foot,.nav{display:none!important}
  body{font-size:11pt;color:#000}
  .hero,.band-dark,.result,.cta-band{background:#fff!important;color:#000!important}
  .cta-band h2,.band-dark h2,.result .big{color:#000!important}
  section{padding:14pt 0}
}


/* ==========================================================================
   Motion layer
   Every hidden state below is applied by JavaScript, never by this stylesheet.
   With JS off, or under prefers-reduced-motion, the page renders fully at rest.
   ========================================================================== */

.anim-ready{opacity:0;transform:translateY(18px)}
.anim-ready.is-in{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
}

/* the hero conversation plays itself out: the authored moment of the page */
.bubble.q-ready,.typing.q-ready{
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .34s ease,transform .34s ease;   /* also runs on the way out */
}
.bubble.q-in,.typing.q-in{
  opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.bubble.in.q-ready{transform-origin:left bottom}
.bubble.out.q-ready{transform-origin:right bottom}

/* phone and callouts arrive after the copy */
.phone.anim-ready{transform:translateY(24px) scale(.97)}
.callouts li.anim-ready{transform:translateX(-14px)}

/* counting figures hold their width so nothing reflows while they run */
.rec .now{display:inline-block;min-width:1ch}

@media (prefers-reduced-motion:reduce){
  .anim-ready,.bubble.q-ready,.typing.q-ready{opacity:1!important;transform:none!important}
}


/* ---------------------------------------------------------------- projects */
.projects{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
@media (min-width:600px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){
  /* 4 x 2 */
  .projects{grid-template-columns:repeat(4,1fr);gap:18px}
  .projects .proj-head{height:124px}
  .projects .proj-art{left:18px}
  .projects .proj-art svg{width:46px;height:46px}
  .projects .proj-num{font-size:22px;top:13px;right:15px}
  .projects .proj-body{padding:18px 19px 22px;gap:7px}
  .projects .proj h3{font-size:17.5px;line-height:1.24}
  .projects .proj p{font-size:14.2px;line-height:1.5}
  .projects .tag{font-size:10.5px;letter-spacing:.09em}
}

.proj{
  --panel:var(--accent);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:calc(var(--r) + 4px);
  text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.proj:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--rule-2)}
article.proj:hover{border-color:var(--rule-2)}

/* the angled colour panel, after the reference */
.proj-head{position:relative;height:150px;flex:none;overflow:hidden;background:var(--tint)}
.proj-head::after{
  content:"";position:absolute;inset:0 0 0 auto;width:62%;background:var(--panel);
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);
}
.proj-num{
  position:absolute;top:16px;right:18px;z-index:2;
  font-family:"League Spartan",sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;
  color:var(--panel-on,#FFFFFF);font-variant-numeric:tabular-nums;
}
.proj-art{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);z-index:2;
}
.proj-art svg{
  width:58px;height:58px;stroke:var(--ink-2);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

.proj-body{display:flex;flex-direction:column;gap:9px;padding:22px 24px 26px;flex:1}
.proj-meta{display:flex;align-items:center;gap:10px}
.proj-ico{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--panel);
}
.proj-ico svg{width:15px;height:15px;stroke:var(--panel-on);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.proj .tag{
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.proj h3{font-size:19.5px;line-height:1.25;margin-top:2px}
.proj p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.proj-body>p:last-child{margin-bottom:0}
.proj .out{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-size:14px;font-weight:600;color:var(--ink);
}
.proj .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-weight:600;font-size:14.5px;color:var(--accent);
}
.proj .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.proj.c1{--panel:#023EBA;--panel-on:#FFFFFF}
.proj.c2{--panel:#00B4D8;--panel-on:#03045E}
.proj.c3{--panel:#FBB02D;--panel-on:#03045E}
.proj.c4{--panel:#2C6FE0;--panel-on:#FFFFFF}
.proj.c5{--panel:#0091C9;--panel-on:#03045E}
.proj.c6{--panel:#E08A1E;--panel-on:#03045E}
.proj.c7{--panel:#3E5BD6;--panel-on:#FFFFFF}

.proj.todo{border-style:dashed;border-color:var(--rule-2)}
.proj.todo .proj-head::after{background:var(--rule);}
.proj.todo .proj-ico{background:var(--rule-2)}
.proj.todo .proj-num{color:var(--muted)}

@media (min-width:960px){
  .scene .phone{width:100%;max-width:290px}
  .callouts li{max-width:100%}
}
/* the two-column hero only earns its keep once there is room for both halves */
@media (min-width:960px) and (max-width:1120px){
  .callouts li{font-size:13px;padding:7px 13px 7px 7px}
  .callouts .cico{width:28px;height:28px}
  .scene .phone{max-width:262px}
}


/* ==========================================================================
   Infographic blocks. These exist to replace paragraphs, so every item is a
   number, an icon, a title and one line. If a line needs a second sentence it
   belongs in prose, not here.
   ========================================================================== */

/* ---- pillars: headline beside numbered points on a gentle arc ---- */
.pillars{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:8px}
@media (min-width:920px){
  .pillars{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,5vw,68px);align-items:center}
  .pillars-lede{position:sticky;top:96px}
}
.pillars-lede h2{margin-bottom:14px}
.pillars-lede .lead{max-width:36ch}

.pillar-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative}
.pillar{
  position:relative;display:grid;grid-template-columns:auto auto 1fr;
  align-items:start;gap:0 16px;padding:16px 0;
}
.pillar .pnum{
  grid-row:1/3;width:52px;height:52px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--rule-2);
  font-family:"League Spartan",sans-serif;font-weight:700;font-size:17px;
  color:var(--accent);font-variant-numeric:tabular-nums;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.8);
}
.pillar .pico{
  grid-row:1/3;width:38px;height:38px;border-radius:12px;flex:none;align-self:center;
  display:grid;place-items:center;background:var(--accent-wash);
}
.pillar .pico svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{grid-column:3;font-size:18.5px;margin-bottom:3px}
.pillar p{grid-column:3;margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:46ch}

/* the dashed run that ties the numbers together */
.pillar::before{
  content:"";position:absolute;left:26px;top:-4px;bottom:calc(100% - 16px);
  width:0;border-left:2px dashed var(--rule);
}
.pillar:first-child::before{display:none}
.pillar:not(:first-child)::before{top:-4px;height:24px;bottom:auto}

/* the arc: a small, deliberate stagger so the column is not a straight edge */
@media (min-width:920px){
  .pillar:nth-child(2){margin-left:18px}
  .pillar:nth-child(3){margin-left:26px}
  .pillar:nth-child(4){margin-left:18px}
  .pillar:nth-child(5){margin-left:0}
  .pillar:nth-child(2)::before,.pillar:nth-child(3)::before{left:8px;transform:rotate(-14deg)}
  .pillar:nth-child(4)::before,.pillar:nth-child(5)::before{left:34px;transform:rotate(14deg)}
}

/* ---- capability badges ---- */
.capgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:18px 14px;margin:30px 0 0;padding:0;list-style:none;
}
.capgrid li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.capgrid .cap-badge{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.9);
  transition:border-color .2s ease,transform .2s ease;
}
.capgrid li:hover .cap-badge{border-color:var(--accent);transform:translateY(-3px)}
.capgrid .cap-badge svg{width:25px;height:25px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.capgrid li:hover .cap-badge svg{stroke:var(--accent)}
.capgrid span{font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:1.35}

/* ---------------------------------------------------------------- industries */
.inds{display:grid;grid-template-columns:1fr;gap:20px;margin-top:42px}
@media (min-width:640px){.inds{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.inds{grid-template-columns:repeat(3,1fr)}}

.ind{
  --hue:var(--accent);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:20px 20px 26px 26px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
@media (hover:hover){.ind:hover{transform:translateY(-4px);border-color:var(--hue);box-shadow:var(--shadow-lift)}}

/* hexagon medallion */
.ind-top{display:flex;justify-content:center;padding:26px 0 4px}
.ind-hex{
  position:relative;width:74px;height:82px;display:grid;place-items:center;
  background:var(--hue-ink);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.ind-hex::after{
  content:"";position:absolute;inset:3px;background:var(--surface);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.ind-hex svg{
  position:relative;z-index:1;width:30px;height:30px;
  stroke:var(--hue-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

.ind-body{position:relative;padding:14px 24px 22px;flex:1;text-align:center}
.ind-ghost{
  position:absolute;right:16px;bottom:2px;z-index:0;
  font-family:"League Spartan",sans-serif;font-weight:700;font-size:86px;line-height:1;
  color:var(--hue);opacity:.07;pointer-events:none;user-select:none;
  font-variant-numeric:tabular-nums;
}
.ind h3{position:relative;z-index:1;font-size:18px;color:var(--hue-ink);margin-bottom:9px;line-height:1.25}
.ind p{position:relative;z-index:1;margin:0;color:var(--ink-2);font-size:14.8px;line-height:1.55}

.ind-foot{
  margin-top:auto;background:var(--hue);height:44px;
  display:flex;align-items:center;justify-content:center;
}
.ind-foot svg{width:17px;height:17px;stroke:var(--hue-on);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

.ind.i1{--hue:#023EBA;--hue-ink:#023EBA;--hue-on:#FFFFFF}
.ind.i2{--hue:#00B4D8;--hue-ink:#0A6E85;--hue-on:#03045E}
.ind.i3{--hue:#FBB02D;--hue-ink:#8A5A02;--hue-on:#03045E}
.ind.i4{--hue:#2C6FE0;--hue-ink:#1250B4;--hue-on:#FFFFFF}
.ind.i5{--hue:#0091C9;--hue-ink:#0A6382;--hue-on:#03045E}
.ind.i6{--hue:#E08A1E;--hue-ink:#7E5206;--hue-on:#03045E}
.ind.i7{--hue:#3E5BD6;--hue-ink:#2C43A8;--hue-on:#FFFFFF}
.ind.i8{--hue:#19C7E8;--hue-ink:#0B6F84;--hue-on:#03045E}
.ind.i9{--hue:#C98A10;--hue-ink:#6F4C05;--hue-on:#03045E}


/* ---------------------------------------------------------------- arc fan */
@media (min-width:940px){}


@media (prefers-reduced-motion:no-preference){
                  }
@keyframes sweep{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform-box:fill-box;transform-origin:center}to{opacity:1}}

/* ---- stepped text blocks beside the arc ---- */
.fs{position:relative;padding-left:24px}
.fs::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;
  background:var(--hue);box-shadow:0 0 0 4px color-mix(in srgb,var(--hue) 22%,transparent);
}
.fs .fs-label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hue);margin-bottom:5px;
}
.fs h3{font-size:19px;margin-bottom:5px;line-height:1.25}
.fs p{margin:0;color:var(--ink-2);font-size:15.3px;line-height:1.55;max-width:46ch}
@media (min-width:940px){
      }



/* ---------------------------------------------------------------- hero arc
   A fixed 520x460 stage, scaled as one piece so the motion path keeps its
   pixel geometry at every width. It is absolutely positioned, so the scale
   never has to be compensated for in layout.
   -------------------------------------------------------------------------- */
.orbit{
  --os:.78;
  position:absolute;left:50%;bottom:-150px;width:760px;height:700px;z-index:0;
  transform:translateX(-50%) translateY(var(--py,0px)) scale(var(--os));
  transform-origin:50% 100%;
  pointer-events:none;
}
@media (min-width:520px){.orbit{--os:.84;bottom:-165px}}
@media (min-width:760px){.orbit{--os:.9;bottom:-180px}}
/* from here the band takes the reference's place: anchored right, running off
   the bottom and out through the right edge, with the content layered over it */
@media (min-width:1100px){
  .orbit{--os:.92;left:auto;right:-40px;bottom:-58px;
         transform:translateY(var(--py,0px)) scale(var(--os));
         transform-origin:100% 100%}
}
@media (min-width:1400px){.orbit{--os:1;right:-20px}}

.orbit-svg{position:absolute;inset:0;width:760px;height:700px;overflow:visible}
.orbit-band{fill:none;stroke:url(#bandg);stroke-width:86;stroke-linecap:round}
.orbit-edge{fill:none;stroke:var(--rule);stroke-width:1;opacity:.9}
.orbit-band{filter:drop-shadow(0 18px 34px rgba(3,4,94,.10))}
.orbit-spark{fill:none;stroke:var(--accent);stroke-width:2;opacity:.3;stroke-dasharray:2 18;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .orbit-spark{animation:sparkrun 9s linear infinite}
}
@keyframes sparkrun{to{stroke-dashoffset:-160}}

.tok{
  position:absolute;width:66px;height:66px;border-radius:22px;
  display:grid;place-items:center;margin:-33px 0 0 -33px;
  background:var(--tc);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--tc) 62%,transparent);
}
.tok::before{
  content:"";position:absolute;inset:-22px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tc) 46%,transparent),transparent 78%);
  filter:blur(9px);
}
.tok svg{width:29px;height:29px;stroke:#FFFFFF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.orbit .t1{--tc:var(--deep)}
.orbit .t2{--tc:#023EBA}
.orbit .t3{--tc:#0A6382}
.orbit .t4{--tc:#7E5206}
.orbit .t5{--tc:#1250B4}

.orbit .t1{left:35.3%;top:86.0%}
.orbit .t2{left:41.2%;top:66.0%}
.orbit .t3{left:51.7%;top:48.3%}
.orbit .t4{left:67.8%;top:32.9%}
.orbit .t5{left:85.3%;top:23.9%}

@media (prefers-reduced-motion:no-preference){
  @supports (offset-path:path("M0 0 L1 1")){
    .orbit .tok{
      left:0;top:0;margin:0;
      offset-path:path("M260 700 A560 560 0 0 0 760.0 143.2");
      offset-rotate:0deg;offset-anchor:50% 50%;
      animation:orbitrun 15s linear infinite;
    }
.orbit .t1{animation-delay:-1.5s}
.orbit .t2{animation-delay:-4.5s}
.orbit .t3{animation-delay:-7.5s}
.orbit .t4{animation-delay:-10.5s}
.orbit .t5{animation-delay:-13.5s}
  }
}
@keyframes orbitrun{
  0%{offset-distance:0%;opacity:0}
  9%{opacity:1}
  91%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* the phone has to clear the band on the widest layout */
@media (min-width:960px){.scene .phone{margin-right:clamp(0px,2vw,26px)}}

.hero>.wrap{position:relative;z-index:1}
.hero .scene{z-index:1}


/* ==========================================================================
   Engagement flow. A disc, a dotted spine, and rows that step further right
   as the engagement progresses, each closed by a capsule medallion.
   ========================================================================== */
.stageflow{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px);align-items:center;margin-top:40px}
@media (min-width:980px){.stageflow{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}

/* ---- the disc ---- */
.stagedisc{position:relative;width:min(276px,78vw);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.stagedisc::before,.stagedisc::after{content:"";position:absolute;border-radius:50%}
.stagedisc::before{
  inset:8%;background:linear-gradient(150deg,#023EBA,#00B4D8);
  transform:translate(-9px,11px);opacity:.42;filter:blur(1px);
}
.stagedisc::after{
  inset:8%;background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 22px 44px -24px rgba(3,4,94,.42);
}
.stagedisc .sd-face{position:relative;z-index:1;text-align:center;padding:0 14px}
.stagedisc .sd-n{
  display:block;font-family:"League Spartan",sans-serif;font-weight:700;
  font-size:clamp(38px,8vw,52px);line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.stagedisc .sd-t{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--muted);max-width:15ch;margin-inline:auto}
.stagedisc .sd-ring{position:absolute;inset:0;z-index:0}
.stagedisc .sd-ring circle{fill:none;stroke:var(--rule-2);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round;opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .stagedisc .sd-ring{animation:spin 64s linear infinite}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- the rows ---- */
/* One continuous dotted spine down the left, with a dotted elbow running out
   to each row's node. Rows step further right as the engagement progresses. */
.stagerows{list-style:none;margin:0;padding:0 0 0 46px;position:relative;display:grid;gap:14px}
.stagerows::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:0;
  border-left:2px dotted var(--rule-2);
}
.srow{
  --hue:var(--accent-fill);--hue-ink:var(--accent-ink);--ind:0px;
  position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:18px;padding:14px 0;
}
/* the elbow back to the spine */
.srow::before{
  content:"";position:absolute;right:100%;top:50%;height:0;
  width:calc(var(--ind) + 46px);margin-right:0;
  border-top:2px dotted var(--rule-2);
}
.srow::after{
  content:"";position:absolute;right:100%;top:50%;margin:-6px 12px 0 0;
  width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--hue);
}
.srow .sr-label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hue-ink);margin-bottom:5px;
}
.srow h3{font-size:18.5px;margin-bottom:5px;line-height:1.25}
.srow p{margin:0;color:var(--ink-2);font-size:15.2px;line-height:1.55;max-width:44ch}

/* the capsule that closes each row, over an offset capsule in its own colour */
.srow .sr-med{
  position:relative;flex:none;width:72px;height:100px;
  display:grid;place-items:center;
}
.srow .sr-med::before{                      /* the colour, offset behind */
  content:"";position:absolute;left:10px;top:10px;right:0;bottom:0;
  border-radius:31px;background:var(--hue);
}
.srow .sr-med::after{                       /* the face it sits behind */
  content:"";position:absolute;left:0;top:0;right:10px;bottom:10px;
  border-radius:31px;background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 16px 30px -20px rgba(3,4,94,.55);
}
.srow .sr-med svg{
  position:relative;z-index:1;width:26px;height:26px;transform:translate(-5px,-5px);
  stroke:var(--hue-ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* the fan: each stage sits a little further out than the last */
@media (min-width:980px){
  .srow.s2{--ind:28px;margin-left:28px}
  .srow.s3{--ind:56px;margin-left:56px}
  .srow.s4{--ind:84px;margin-left:84px}
}

.srow.s1{--hue:#023EBA;--hue-ink:#023EBA}
.srow.s2{--hue:#00B4D8;--hue-ink:#0A6E85}
.srow.s3{--hue:#FBB02D;--hue-ink:#8A5A02}
.srow.s4{--hue:#2C6FE0;--hue-ink:#1250B4}

/* ==========================================================================
   Where we fit. Two hexagon clusters, one per side of the gap, joined by the
   hub we occupy.
   ========================================================================== */
.hexfit{display:grid;grid-template-columns:1fr;gap:26px;margin-top:40px;align-items:center}
/* it lives inside a narrow prose column, so let it break out to breathe */
@media (min-width:900px){
  .hexfit{
    grid-template-columns:1fr minmax(232px,auto) 1fr;gap:clamp(16px,2.6vw,34px);
    width:min(1060px,calc(100vw - 2 * var(--pad)));
    margin-left:50%;transform:translateX(-50%);
  }
}

.hexcol h3{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:14px;
}
/* pointy-top hexagons tessellate at three quarter pitch with every second
   one dropped by half a cell, so the cluster reads as one honeycomb */
.hexset{display:flex;justify-content:center;list-style:none;margin:0;padding:0 0 46px}
.hexset .hx+.hx{margin-left:-15px}
.hexset .hx:nth-child(even){margin-top:52px}

.hx{
  --hue:var(--accent-ink);
  position:relative;flex:none;width:clamp(104px,30vw,132px);aspect-ratio:1/1.12;
  display:grid;place-content:center;padding:0 12px;text-align:center;
  background:var(--surface);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:transform .2s ease;
}
.hx::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--hue);opacity:.45;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.hx::after{
  content:"";position:absolute;inset:1.6px;z-index:0;background:var(--surface);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
@media (hover:hover){.hx:hover{transform:translateY(-3px)}}
.hx .hx-ico{
  position:relative;z-index:1;width:32px;height:32px;border-radius:10px;margin:0 auto 8px;
  display:grid;place-items:center;background:var(--hue);
}
.hx .hx-ico svg{width:17px;height:17px;stroke:#FFFFFF;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hx span{position:relative;z-index:1;display:block;font-size:12.5px;font-weight:600;line-height:1.32;color:var(--ink)}

.hx.h1{--hue:#023EBA}
.hx.h2{--hue:#0A6E85}
.hx.h3{--hue:#8A5A02}
.hx.h4{--hue:#1250B4}
.hx.h5{--hue:#0A6382}
.hx.h6{--hue:#7E5206}

/* ---- the hub between them ---- */
.hexhub{
  position:relative;display:grid;place-items:center;text-align:center;
  width:min(232px,84vw);aspect-ratio:1;margin:0 auto;padding:0 22px;
  border-radius:50%;background:var(--deep);color:var(--on-deep);
  box-shadow:0 26px 52px -26px rgba(3,4,94,.7);
}
.hexhub::before{
  content:"";position:absolute;inset:-13px;border-radius:50%;
  border:2px dashed var(--rule-2);
}
.hexhub .hh-ico{
  width:42px;height:42px;border-radius:14px;margin:0 auto 11px;display:grid;place-items:center;
  background:var(--accent-fill);
}
.hexhub .hh-ico svg{width:21px;height:21px;stroke:#FFFFFF;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hexhub h3{font-size:18px;color:#FFFFFF;margin-bottom:6px}
.hexhub p{margin:0;font-size:14px;line-height:1.5;color:var(--on-deep-2)}
@media (prefers-reduced-motion:no-preference){
  .hexhub::before{animation:spin 48s linear infinite}
}


/* ==========================================================================
   Section motion
   Added after the reference board. As with the layer above, nothing here
   hides anything: the .words-ready, .anim-ready and .lit classes are only
   ever set by JavaScript, and every rule is inert until they appear.
   ========================================================================== */

/* ---- headings: words rise from a clipped baseline ---- */
.w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.wi{display:inline-block}
.words-ready .wi{transform:translateY(112%)}
.words-in .wi{
  transform:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}

/* ---- what we build: the colour panel wipes across ---- */
.proj.anim-ready .proj-head::after{transform:translateX(112%)}
.proj.is-in .proj-head::after{
  transform:none;
  transition:transform .85s cubic-bezier(.16,1,.3,1) .1s;
}
.proj.anim-ready .proj-art,.proj.anim-ready .proj-num{opacity:0}
.proj.is-in .proj-art,.proj.is-in .proj-num{
  opacity:1;transition:opacity .5s ease .5s;
}

/* ---- engagement: the spine fills as the section passes ---- */
.stagerows::after{
  content:"";position:absolute;left:0;top:22px;width:0;
  height:calc(var(--prog,0) * (100% - 44px));
  border-left:2px solid var(--accent-fill);
}
.srow.lit::after{
  background:var(--hue);border-color:var(--hue);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--hue) 20%,transparent);
}
.srow::after{transition:background .3s ease,box-shadow .3s ease}
.srow.lit .sr-label{color:var(--hue-ink)}

/* ---- where we fit: the hexagons arrive from the hub outward ---- */
.hx.anim-ready{transform:translateY(12px) scale(.88)}
.hexhub.anim-ready{transform:scale(.9)}

/* ---- industries: the footer bar wipes in ---- */
.ind.anim-ready .ind-foot{transform:scaleX(0);transform-origin:left center}
.ind.is-in .ind-foot{
  transform:none;
  transition:transform .7s cubic-bezier(.16,1,.3,1) .22s;
}

/* ---- a sheen crosses the primary button ---- */
.btn:not(.btn-ghost)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-130%);
}
@media (hover:hover){
  .btn:not(.btn-ghost):hover::after{
    transform:translateX(130%);
    transition:transform .72s cubic-bezier(.3,0,.2,1);
  }
}

/* ---- the header earns its edge once the page has moved ---- */
.site-head{transition:box-shadow .25s ease,border-color .25s ease}
body.scrolled .site-head{box-shadow:0 10px 30px -22px rgba(3,4,94,.55)}

@media (prefers-reduced-motion:reduce){
  .words-ready .wi,.hx.anim-ready,.hexhub.anim-ready{transform:none!important}
  .proj.anim-ready .proj-head::after,.ind.anim-ready .ind-foot{transform:none!important}
  .proj.anim-ready .proj-art,.proj.anim-ready .proj-num{opacity:1!important}
}


/* ---- capability badges, cut as hexagons to match the industry cards ---- */
.capgrid.hexcaps .cap-badge{
  width:66px;height:74px;border-radius:0;background:var(--accent-ink);
  box-shadow:none;border:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  position:relative;
}
.capgrid.hexcaps .cap-badge::after{
  content:"";position:absolute;inset:1.6px;background:var(--surface);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.capgrid.hexcaps .cap-badge svg{position:relative;z-index:1;stroke:var(--accent-ink)}
.capgrid.hexcaps li:hover .cap-badge{transform:translateY(-3px)}

/* the nine sector cards sit in a full width wrap, the prose below stays narrow */
.center{text-align:center}