/* ═══════════════════════════════════════════════════════════════════════════
   idaptiq — shared stylesheet for every page.
   Design tokens come from the Figma "Marketing" file's variable set.
   ═════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;
  src:url("fonts/inter-latin-var.260c81a4759b.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/jetbrains-mono-400.caf0dfde4e44.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/jetbrains-mono-500.a21e038a03f7.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/jetbrains-mono-700.69002db50656.woff2") format('woff2')}

/* ═══════════════════════════════════════════════════ tokens (from Figma vars) */
:root{
  --navy:#262262;          --navy-deep:#1c1849;
  --plum:#824367;          --plum-light:#ac7f99;
  --orange:#f29020;        --orange-light:#f7bc79;  --orange-lighter:#fce9d2;
  --ink:#0d0d0e;           --txt:#4b4b53;           --txt-strong:#313135;
  --txt-soft:#68686e;
  --line:#e1e1e6;          --line-soft:#dfdfe0;     --line-light:#efeff0;
  --surface:#f9f9fa;       --white:#fff;            --n100:#efeff0;
  /* --page is the paper the whole site sits on. The hero canvases read it too,
     so depth washes toward the real background instead of hard white. */
  --page:#ffffff;          --footer-bg:#efeff0;
  --ok-bg:#e6fbf1;         --ok-fg:#066036;
  --prog-bg:#d1d0ec;       --prog-fg:#262262;
  --soon-bg:#feeec5;       --soon-fg:#b2830a;
  --grad:linear-gradient(90deg,#f68b29 7.3%,#5b1242 53.7%,#272261 100%);
  --grad-cta:linear-gradient(90deg,#f68b29 7.3%,#5b1242 39.9%,#272261 100%);
  /* Headings run in Trebuchet MS — the same face as the presentation template —
     which is a system font on Windows, macOS and iOS and cannot be self-hosted
     (Microsoft core font, not redistributable). Android and most Linux have no
     Trebuchet and will land on the fallbacks. Body copy is self-hosted Inter, so
     it is identical everywhere. */
  --font-head:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",
              Tahoma,Verdana,Inter,sans-serif;
  --font-body:Inter,ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:80px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--txt);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
/* titles in Trebuchet, everything else in Inter */
h1,h2,h3,h4,h5,h6,.pull p{font-family:var(--font-head);font-weight:700}
::selection{background:var(--orange-lighter);color:var(--navy)}

.shell{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:var(--font-mono)}

/* ═══════════════════════════════════════════════════ logo
   One <symbol> instanced with <use>. The mark keeps its own linear + radial
   brand gradients; the wordmark is `currentColor`, so `color` tunes it per
   placement. On a dark ground set --mark-fill:#fff — custom properties are
   the one thing that inherits through a <use> shadow tree. */
.logo{display:block;height:32px;flex:none;color:var(--ink)}
.logo svg,.on-dark .logo svg{height:100%;width:auto;display:block}
.on-dark .logo{color:#fff;--mark-fill:#fff}

/* lockup wipes on left-to-right, the same direction the mark's gradient runs */
.nav .logo{clip-path:inset(0 100% 0 0);animation:logoWipe 1s var(--ease-out) .1s forwards}
@keyframes logoWipe{to{clip-path:inset(0)}}

/* ═══════════════════════════════════════════════════ scroll progress */
.progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:200;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ═══════════════════════════════════════════════════ nav */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(249,249,250,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:padding .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.nav .shell{display:flex;align-items:center;justify-content:space-between;padding-block:24px;
  transition:padding .35s var(--ease)}
.nav.scrolled{box-shadow:0 6px 26px -14px rgba(38,34,98,.28);background:rgba(249,249,250,.88)}
.nav.scrolled .shell{padding-block:13px}
.nav-left{display:flex;align-items:center;gap:48px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{
  font-size:14px;font-weight:700;color:var(--txt);position:relative;padding-block:4px;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .38s var(--ease-out);
}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.6px;background:var(--navy);border-radius:2px;
  position:relative;transition:transform .3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;
  background:var(--navy);border-radius:2px;transition:transform .3s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.nav.open .burger span{transform:rotate(45deg)}
.nav.open .burger span::before{transform:translateY(5.5px) rotate(-90deg)}
.nav.open .burger span::after{transform:translateY(-5.5px) rotate(-90deg);opacity:0}
.mobile-panel{
  display:none;overflow:hidden;max-height:0;transition:max-height .45s var(--ease-out);
  border-top:1px solid transparent;
}
.nav.open .mobile-panel{max-height:320px;border-top-color:var(--line)}
.mobile-panel nav{display:flex;flex-direction:column;padding:14px var(--pad) 22px;gap:2px}
.mobile-panel a{padding:12px 0;font-weight:700;font-size:15px;border-bottom:1px solid var(--line-light)}
.mobile-panel .btn{margin-top:16px;justify-content:center}

/* ═══════════════════════════════════════════════════ buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:8px;font-size:16px;font-weight:600;
  background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease-out),box-shadow .4s var(--ease);
  box-shadow:0 2px 0 rgba(38,34,98,.18);
}
.btn::before{ /* gradient wash */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);
  opacity:0;transition:opacity .45s var(--ease);
}
.btn::after{ /* sheen */
  content:"";position:absolute;top:0;bottom:0;width:38%;z-index:-1;
  left:var(--sx,-40%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease-out);
}
.btn:hover{box-shadow:0 16px 34px -16px rgba(38,34,98,.62)}
.btn:hover::before{opacity:1}
.btn:hover::after{left:112%}
.btn:active{transform:scale(.98)!important}
.btn-lg{padding:16px 32px}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:0 2px 0 rgba(38,34,98,.10)}
.btn-ghost::before{background:linear-gradient(90deg,#fff,#fff)}
.btn-ghost:hover{box-shadow:0 18px 36px -16px rgba(0,0,0,.34)}
.btn-ghost:hover::after{background:linear-gradient(100deg,transparent,rgba(38,34,98,.14),transparent)}
.btn .arrow{transition:transform .4s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════ badges */
.badge{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:100px;
  border:1px solid var(--plum);color:var(--plum);
  font-family:var(--font-mono);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.055em;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.badge:hover{background:var(--plum);color:#fff}
.badge.o{border-color:var(--orange);color:var(--orange)}
.badge.o:hover{background:var(--orange);color:#fff}
.badge.n{border-color:var(--navy);color:var(--navy)}
.badge.n:hover{background:var(--navy);color:#fff}
.badge.ol{border-color:var(--orange-light);color:var(--orange-light)}
.badge.ol:hover{background:var(--orange-light);color:var(--navy)}
.badge.md{font-weight:500}
.pill{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:100px;
  font-family:var(--font-mono);font-weight:700;font-size:11.5px;
  white-space:nowrap;
}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill.prog{background:var(--prog-bg);color:var(--prog-fg)}
.pill.soon{background:var(--soon-bg);color:var(--soon-fg)}
.pill.live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;
  animation:blip 1.9s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ═══════════════════════════════════════════════════ hero */
.hero{position:relative;overflow:clip}
.hero .shell{
  display:grid;grid-template-columns:656px 1fr;gap:64px;align-items:center;
  padding-block:88px 96px;
}
.hero-copy{display:flex;flex-direction:column;gap:32px;align-items:flex-start;max-width:660px}
.hero h1{
  font-size:clamp(29px,4.15vw,54px);font-weight:700;line-height:1.13;letter-spacing:-.011em;
  color:var(--ink);
}
.hero h1 .accent{
  background:linear-gradient(96deg,#f68b29,#824367 42%,#5b1242 68%,#272261);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueSlide 9s ease-in-out infinite;
}
@keyframes hueSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .lede{font-size:18px;line-height:1.62;color:var(--txt);max-width:600px}
.title-block{display:flex;flex-direction:column;gap:16px}
.hero-note{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--txt-soft)}
.hero-note .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,144,32,.16);animation:blip 2.4s ease-in-out infinite}

/* hero visual — particle mark */
.hero-visual{position:relative;justify-self:center;width:100%;max-width:566px;aspect-ratio:1.1/1}
.hero-visual .halo{
  position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 40% at 34% 62%,rgba(242,144,32,.20),transparent 70%),
    radial-gradient(46% 44% at 66% 38%,rgba(38,34,98,.16),transparent 72%),
    radial-gradient(40% 38% at 52% 50%,rgba(130,67,103,.13),transparent 70%);
  filter:blur(22px);animation:haloDrift 16s ease-in-out infinite;
}
@keyframes haloDrift{
  0%,100%{transform:scale(1) translate3d(0,0,0);opacity:.85}
  33%{transform:scale(1.07) translate3d(2%,-2%,0);opacity:1}
  66%{transform:scale(1.02) translate3d(-2%,1.5%,0);opacity:.9}
}
.hero-visual .rings{position:absolute;inset:6%;z-index:0;pointer-events:none;opacity:.5}
.hero-visual .rings i{
  position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(38,34,98,.13);
  animation:spin 46s linear infinite;
}
.hero-visual .rings i:nth-child(2){inset:11%;border-style:solid;border-color:rgba(242,144,32,.16);
  animation-duration:34s;animation-direction:reverse}
.hero-visual .rings i:nth-child(3){inset:23%;border-color:rgba(130,67,103,.12);animation-duration:60s}
@keyframes spin{to{transform:rotate(360deg)}}
#heroCanvas{position:relative;z-index:1;width:100%;height:100%;cursor:grab;touch-action:none}
#heroCanvas.grabbing{cursor:grabbing}

/* ═══════════════════════════════════════════════════ stat strip */
.stats{
  position:relative;overflow:hidden;
  background:var(--orange-lighter);border-block:1px solid var(--line);
}
.stats::after{ /* slow shimmer sweep */
  content:"";position:absolute;top:-60%;bottom:-60%;width:34%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-16deg);animation:sweep 7.5s var(--ease) 1.2s infinite;pointer-events:none;
}
@keyframes sweep{0%{left:-45%}55%,100%{left:130%}}
.stats .shell{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding-block:32px;position:relative;z-index:1;
}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .pre{font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:#b5762a;margin-bottom:-2px}
.stat .num{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(26px,2.4vw,32px);
  color:var(--orange);line-height:1.1;font-variant-numeric:tabular-nums;
}
.stat .lbl{font-size:14px;font-weight:600;color:var(--txt);text-transform:uppercase;
  letter-spacing:.015em;line-height:1.35}
.stat:first-child .lbl{max-width:337px}

/* ═══════════════════════════════════════════════════ section chrome */
.section{padding-block:96px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:56px}
.sec-head h2{
  font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.005em;color:var(--ink);
  line-height:1.18;
}
.sec-head .left{display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:560px}
.sec-head .right{max-width:400px;font-size:16px;line-height:1.6;color:var(--txt)}

/* ═══════════════════════════════════════════════════ roadmap */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.phase{
  display:flex;flex-direction:column;border-radius:16px;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
  position:relative;
}
.phase .bar{
  height:8px;border-radius:24px 24px 0 0;background:var(--grad);
  background-size:100% 100%;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease-out);transition-delay:var(--bd,0s);
}
.phase.in .bar{transform:scaleX(1)}
.phase .body{
  flex:1;display:flex;flex-direction:column;gap:20px;padding:32px;
  background:var(--surface);border:1px solid var(--line);border-top:0;
  border-radius:0 0 16px 16px;transition:border-color .4s var(--ease),background .4s var(--ease);
}
.phase:hover{transform:translateY(-7px)}
.phase:hover .body{border-color:#cfcbe0;background:#fff}
.phase::after{
  content:"";position:absolute;inset:8px 0 0 0;border-radius:0 0 16px 16px;z-index:-1;
  box-shadow:0 26px 48px -26px rgba(38,34,98,.34);opacity:0;
  transition:opacity .55s var(--ease);
}
.phase:hover::after{opacity:1}
.phase .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.phase .ph{font-family:var(--font-mono);font-weight:700;font-size:12px;
  text-transform:uppercase;color:var(--txt);letter-spacing:.05em}
.phase h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.006em;line-height:1.25}
.phase p{font-size:14px;line-height:1.55;color:var(--txt)}
.phase .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

/* ═══════════════════════════════════════════════════ dark partnership */
.dark{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate;
  padding-block:96px;
}
.dark .shell{position:relative;z-index:2;display:grid;grid-template-columns:560px 1fr;
  gap:80px;align-items:center}
.aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.62}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:46%;height:62%;left:-6%;top:6%;
  background:radial-gradient(circle,rgba(242,144,32,.55),transparent 66%);
  animation:float1 21s ease-in-out infinite}
.aurora i:nth-child(2){width:52%;height:66%;right:-8%;bottom:-6%;
  background:radial-gradient(circle,rgba(130,67,103,.62),transparent 66%);
  animation:float2 26s ease-in-out infinite}
.aurora i:nth-child(3){width:40%;height:50%;left:38%;top:-10%;
  background:radial-gradient(circle,rgba(91,18,66,.55),transparent 68%);
  animation:float3 32s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14%,10%,0) scale(1.16)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-16%,-9%,0) scale(.9)}}
@keyframes float3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(-9%,16%,0) scale(1.2)}}
.grid-lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(78% 68% at 50% 42%,#000 12%,transparent 78%);
  -webkit-mask-image:radial-gradient(78% 68% at 50% 42%,#000 12%,transparent 78%);
}
.spotlight{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.10),transparent 70%);
}
.dark:hover .spotlight{opacity:1}
.motes{position:absolute;inset:0;z-index:1;pointer-events:none}
.motes i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.0;
  animation:mote linear infinite;
}
@keyframes mote{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.6)}
  12%{opacity:.55}
  85%{opacity:.4}
  100%{opacity:0;transform:translate3d(14px,-120px,0) scale(1)}
}
.work-copy{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.work-copy h2{font-size:clamp(28px,3.2vw,38px);font-weight:700;line-height:1.2;
  letter-spacing:-.011em;color:#fff}
.work-copy .lede{font-size:16px;line-height:1.6;color:var(--n100)}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}
.benefit{display:flex;flex-direction:column;gap:8px;position:relative;padding-top:16px}
.benefit::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:2px;border-radius:2px;
  background:var(--grad);background-size:200% 100%;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out) var(--bd,0s);
}
.benefit.in::before{transform:scaleX(1)}
.benefit h4{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.005em}
.benefit p{font-size:14px;line-height:1.5;color:var(--n100);opacity:.86}

/* ═══════════════════════════════════════════════════ app mockup */
.mock{
  border-radius:14px;overflow:hidden;background:#f2f2f5;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.10);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--ease-out);
}
.mock-wrap{perspective:1400px;width:100%}
.mock .chrome{
  display:flex;align-items:center;gap:9px;padding:12px 14px;background:#ececed;
  border-bottom:1px solid #e0e0e4;
}
.mock .chrome b{width:11px;height:11px;border-radius:50%;flex:none}
.mock .chrome b:nth-child(1){background:#ff5f57}
.mock .chrome b:nth-child(2){background:#febc2e}
.mock .chrome b:nth-child(3){background:#28c840}
.mock .chrome .url{flex:1;height:22px;border-radius:6px;background:#fff;margin-left:12px;
  border:1px solid #e3e3e7}
.mock .app{display:grid;grid-template-columns:96px 1fr;background:#fff;font-size:6.4px;color:#4b4b53}
.mock .side{background:#fdfdfd;border-right:1px solid #eeeef1;padding:12px 8px;
  display:flex;flex-direction:column;gap:9px}
.mock .side .lg{height:12px;margin-bottom:2px;color:var(--ink)}
.mock .side .lg svg{height:12px;width:auto}
.mock .side .card{border:1px solid #eeeef1;border-radius:4px;padding:5px 6px;background:#fff}
.mock .side .card .k{font-size:4.4px;letter-spacing:.08em;text-transform:uppercase;color:#9b9ba3}
.mock .side .card .v{font-size:6.4px;font-weight:600;color:var(--ink);margin-top:1px}
.mock .side .item{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:4px;
  color:#6b6b73;font-size:6px}
.mock .side .item.on{background:var(--navy);color:#fff;font-weight:600;justify-content:space-between}
.mock .side .item .ic{width:6px;height:6px;border-radius:1.5px;background:currentColor;opacity:.5;flex:none}
.mock .side .item.on .ic{opacity:.9}
.mock .side .who{margin-top:auto;display:flex;align-items:center;gap:5px;border:1px solid #eeeef1;
  border-radius:4px;padding:5px}
.mock .side .who .av{width:10px;height:10px;border-radius:50%;background:#f3e3ee;flex:none}
.mock .side .who .n{font-size:5.4px;font-weight:600;color:var(--ink)}
.mock .side .who .r{font-size:4.4px;color:#9b9ba3}
.mock .main{padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:9px}
.mock .mtop{display:flex;align-items:center;justify-content:space-between}
.mock .mtop h5{font-size:10px;font-weight:700;color:var(--ink);margin:0}
.mock .mtop .b{background:var(--navy);color:#fff;font-size:5.4px;font-weight:600;
  padding:4px 7px;border-radius:3px}
.mock .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mock .kpi{border:1px solid #eeeef1;border-radius:5px;padding:7px 8px;background:#fff}
.mock .kpi .k{font-size:4.8px;color:#9b9ba3}
.mock .kpi .v{font-size:15px;font-weight:700;color:var(--ink);line-height:1.15;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mock .panel{border:1px solid #eeeef1;border-radius:6px;background:#fbfbfc;padding:8px}
.mock .filters{display:flex;gap:5px;margin-bottom:7px}
.mock .filters .f{border:1px solid #e6e6ea;border-radius:3px;background:#fff;
  padding:3px 6px;font-size:5.2px;color:#9b9ba3;display:flex;align-items:center;gap:9px}
.mock .filters .f:first-child{flex:1}
.mock table{width:100%;border-collapse:collapse;background:#fff;border-radius:4px;overflow:hidden}
.mock th{font-size:4.8px;font-weight:600;color:#8a8a92;text-align:left;padding:5px 4px;
  border-bottom:1px solid #eeeef1;white-space:nowrap}
.mock td{font-size:5.2px;padding:5px 4px;border-bottom:1px solid #f3f3f5;white-space:nowrap;color:#5b5b63}
.mock tbody tr{opacity:0;transform:translateY(6px)}
.mock.in tbody tr{opacity:1;transform:none;transition:opacity .5s var(--ease-out) var(--rd),
  transform .5s var(--ease-out) var(--rd)}
.mock .tg{display:inline-block;padding:2px 5px;border-radius:100px;font-size:4.4px;font-weight:600}
.mock .tg.a{background:var(--ok-bg);color:var(--ok-fg)}
.mock .tg.b{background:#eeeef1;color:#7a7a83}
.mock .act{display:flex;gap:4px}
.mock .act .s{background:var(--navy);color:#fff;font-size:4.6px;padding:3px 6px;border-radius:2.5px}
.mock .act .s.g{background:#eeeef1;color:#5b5b63}
.mock .pgn{display:flex;align-items:center;justify-content:space-between;margin-top:7px;
  font-size:4.8px;color:#9b9ba3}
.mock .pgn .pages{display:flex;gap:4px;align-items:center}
.mock .pgn .pages i{width:9px;height:9px;border-radius:2px;display:grid;place-items:center;
  font-style:normal}
.mock .pgn .pages i.on{background:var(--navy);color:#fff}

/* ═══════════════════════════════════════════════════ CTA */
.cta-sec{padding-block:96px}
.cta{
  position:relative;overflow:hidden;border-radius:24px;padding:64px;
  display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;
  background:var(--grad-cta);background-size:138% 100%;
  animation:ctaPan 17s ease-in-out infinite;
  box-shadow:0 40px 80px -40px rgba(38,34,98,.55);
}
@keyframes ctaPan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.cta::before{ /* two soft highlights drifting across — no hard edges */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 62% at 22% 18%,rgba(255,255,255,.30),transparent 68%),
    radial-gradient(34% 58% at 78% 88%,rgba(255,255,255,.20),transparent 70%);
  animation:ctaGlow 13s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}
  50%{transform:translate3d(5%,-4%,0) scale(1.12);opacity:1}
}
.cta::after{ /* scrim per Figma */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,255,255,.16),transparent 62%);
}
.cta > *{position:relative;z-index:1}
.cta h2{font-size:clamp(27px,3.4vw,40px);font-weight:700;line-height:1.19;letter-spacing:-.011em;
  color:#fff;max-width:720px}
.cta p{font-size:16px;color:#fff;opacity:.82;max-width:720px;line-height:1.6}
.cta .stack{display:flex;flex-direction:column;gap:16px;align-items:center;max-width:720px}

/* ═══════════════════════════════════════════════════ footer */
.footer{background:var(--footer-bg);padding-block:80px 48px}
.footer .cols{display:flex;gap:48px;align-items:flex-start;margin-bottom:64px}
.footer .brand{flex:1;display:flex;flex-direction:column;gap:24px}
.footer .brand p{font-size:14px;color:var(--txt);opacity:.62;max-width:420px;line-height:1.6}
.footer .links{flex:1;display:flex;gap:16px;flex-wrap:wrap}
.footer .links a{font-size:14px;font-weight:700;color:var(--txt);position:relative}
.footer .links a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease-out)}
.footer .links a:hover::after{transform:scaleX(1)}
.footer .bottom{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid rgba(51,51,51,.16);font-size:14px;color:var(--txt);
}
.footer .bottom a,.footer .bottom span{opacity:.42;transition:opacity .3s var(--ease)}
.footer .bottom a:hover{opacity:.9}
.footer .bottom .legal{display:flex;gap:24px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════ reveal engine */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out) var(--d,0s),transform .85s var(--ease-out) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal.fade{transform:none}
.reveal.left{transform:translateX(-30px)}
.reveal.right{transform:translateX(30px)}
.reveal.scale{transform:scale(.96)}
/* padding/negative-margin pair keeps descenders (p, q, y) out of the clip edge */
.clip-up{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.clip-up > span{display:block;transform:translateY(116%);
  transition:transform 1s var(--ease-out) var(--d,0s)}
.clip-up.in > span{transform:none}

/* ═══════════════════════════════════════════════════ responsive */
@media (max-width:1240px){
  :root{--pad:48px}
  .hero .shell{grid-template-columns:1fr 1fr;gap:40px}
  .dark .shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
}
@media (max-width:1040px){
  .hero .shell{grid-template-columns:1fr;padding-block:64px 80px;gap:44px}
  .hero-visual{max-width:520px;justify-self:center}
  /* mockup and copy stay side by side down to 900px (see below); at this width the
     column is too narrow for the app's own sidebar, so that goes instead */
  .dark .shell{gap:34px}
  .dark .mock .app{grid-template-columns:1fr}
  .dark .mock .side{display:none}
  .phases{grid-template-columns:1fr 1fr}
  .phases .phase:last-child{grid-column:1/-1}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .sec-head .right{max-width:620px}
  .stats .shell{flex-wrap:wrap;gap:28px 40px}
  .stat:first-child{flex-basis:100%}
}
@media (max-width:860px){
  :root{--pad:28px}
  .nav-links,.nav-right .btn{display:none}
  .burger{display:flex}
  .mobile-panel{display:block}
  .section,.dark,.cta-sec{padding-block:68px}
  .cta{padding:44px 28px;border-radius:20px}
  .phases{grid-template-columns:1fr}
  .phases .phase:last-child{grid-column:auto}
  .benefits{grid-template-columns:1fr}
  .footer .cols{flex-direction:column;gap:36px}
  .footer{padding-block:56px 40px}
  .mock .app{grid-template-columns:82px 1fr}
}
@media (max-width:560px){
  .hero-visual{max-width:100%}
  .stats .shell{flex-direction:column;align-items:flex-start}
  .stat:first-child .lbl{max-width:none}
  .footer .bottom{flex-direction:column;align-items:flex-start}
  .mock .kpis{grid-template-columns:1fr 1fr}
  .mock .app{grid-template-columns:1fr}
  .mock .side{display:none}
}

/* ═══════════════════════════════════════════════════ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.clip-up>span,.phase .bar,.benefit::before,.mock tbody tr{
    opacity:1!important;transform:none!important}
  .nav .logo{clip-path:none}   /* else the wipe's start state would hide it */
  .hero h1 .accent{background-position:46% 50%}
  .progress{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUB-PAGE COMPONENTS
   Everything below is used by about / solutions / contact / careers.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── page hero */
.page-hero{position:relative;overflow:clip;padding-block:84px 72px;isolation:isolate}
.page-hero::before{                     /* soft brand wash bleeding from the right */
  content:"";position:absolute;inset:-40% -16% 8% auto;width:76%;z-index:-1;
  /* The layer must reach zero *before* the section's own `overflow:clip`, or the
     blurred edge gets sliced into a visible rectangle. So: stop it 8% short of
     the bottom, and mask it to nothing well inside that. */
  mask-image:radial-gradient(54% 46% at 60% 40%,#000 6%,rgba(0,0,0,0) 72%);
  -webkit-mask-image:radial-gradient(54% 46% at 60% 40%,#000 6%,rgba(0,0,0,0) 72%);
  background:
    radial-gradient(38% 34% at 70% 40%,rgba(242,144,32,.16),transparent 70%),
    radial-gradient(34% 32% at 88% 62%,rgba(130,67,103,.13),transparent 72%),
    radial-gradient(30% 30% at 62% 74%,rgba(38,34,98,.10),transparent 70%);
  filter:blur(20px);animation:haloDrift 18s ease-in-out infinite;pointer-events:none;
}
.page-hero.cool::before{
  background:
    radial-gradient(38% 34% at 72% 38%,rgba(38,34,98,.16),transparent 70%),
    radial-gradient(34% 32% at 88% 66%,rgba(130,67,103,.12),transparent 72%),
    radial-gradient(30% 30% at 58% 78%,rgba(242,144,32,.11),transparent 70%);
}
.page-hero .shell{position:relative;display:grid;gap:40px 64px;align-items:end;
  grid-template-columns:minmax(0,1fr) auto}
.page-hero .lead{display:flex;flex-direction:column;gap:20px;align-items:flex-start;max-width:760px}
.page-hero h1{
  font-size:clamp(31px,4.4vw,52px);font-weight:700;line-height:1.12;letter-spacing:-.006em;
  color:var(--ink);
}
.page-hero .lede{font-size:18px;line-height:1.6;color:var(--txt);max-width:640px}
.page-hero .aside{display:flex;gap:36px;padding-bottom:6px}
.page-hero .aside .k{display:flex;flex-direction:column;gap:2px}
.page-hero .aside .k b{
  font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--orange);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.page-hero .aside .k span{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-soft);max-width:132px;line-height:1.35}

/* thin animated brand rule that closes a page hero */
.hr-brand{height:2px;border:0;margin:0;background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease-out)}
.hr-brand.in{transform:scaleX(1)}

/* ─────────────────────────────────────────────── prose + pull quote */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;
  align-items:start}
.prose{display:flex;flex-direction:column;gap:20px;max-width:660px}
.prose p{font-size:16.5px;line-height:1.72;color:var(--txt)}
.prose p strong{color:var(--ink);font-weight:600}
.pull{
  position:relative;padding:28px 30px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);overflow:hidden;
}
.pull::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--grad);
  background-size:100% 300%}
.pull p{font-size:19px;line-height:1.5;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.pull cite{display:block;margin-top:12px;font-style:normal;font-size:13px;color:var(--txt-soft);
  font-family:var(--font-mono);letter-spacing:.02em}
.facts{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);
  padding-left:28px}
.facts div{padding-block:16px;border-bottom:1px solid var(--line-light)}
.facts div:last-child{border-bottom:0}
.facts b{display:block;font-family:var(--font-mono);font-weight:700;font-size:22px;
  color:var(--navy);line-height:1.15;font-variant-numeric:tabular-nums}
.facts span{font-size:13.5px;color:var(--txt);line-height:1.5}

/* ─────────────────────────────────────────────── leadership team */
/* Three up: the cards carry only a portrait, name and title — the bio opens in
   a dialog, so nothing here needs the width. */
/* flex instead of grid so a short last row (5 cards over 3 columns) centers
   itself instead of hugging the left edge */
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.team .person{flex:0 0 calc((100% - 48px)/3)}
.person{
  display:flex;flex-direction:column;gap:14px;padding:30px 30px 26px;border-radius:16px;
  cursor:pointer;
  background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .55s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease);
}
.person::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-out) var(--bd,0s)}
.person.in::before{transform:scaleX(1)}
.person:hover{transform:translateY(-6px);border-color:#cfcbe0;background:#fff;
  box-shadow:0 26px 48px -26px rgba(38,34,98,.30)}
/* Portrait slot. Sized to what the supplied headshots can carry sharply: 320px
   source, so 120px displayed stays crisp at 2× retina. Falls back to a monogram
   on the brand gradient when a person has no photo yet. */
.mono-av{
  width:104px;height:104px;border-radius:18px;display:grid;place-items:center;flex:none;
  background:var(--grad);background-size:100% 100%;color:#fff;overflow:hidden;
  font-family:var(--font-mono);font-weight:700;font-size:25px;letter-spacing:.02em;
}
.mono-av img{width:100%;height:100%;object-fit:cover;display:block}

/* the name is the real control; the card just forwards clicks to it */
.person h3{margin:0}
.pbtn{
  font:inherit;font-family:var(--font-head);font-weight:700;font-size:20px;
  letter-spacing:-.006em;color:var(--ink);text-align:left;padding:0;
  background:none;border:0;cursor:pointer;
}
.pbtn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.person .more{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--plum);
}
.person .more i{font-style:normal;transition:transform .4s var(--ease-out)}
.person:hover .more i{transform:translateX(4px)}
.person .job,.module .job{font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--plum);margin-top:3px}

/* ─────────────────────────────────────────────── values (dark cards) */
/* About > Culture reuses the .dark section but wants a narrower copy column.
   This lives here rather than as an inline style, because an inline
   grid-template-columns outranks the media queries below and left the cards
   crushed into a sliver on tablet and phone. */
.dark .shell.culture{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.value{
  padding:28px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out),background .4s var(--ease),border-color .4s var(--ease);
}
.value::before{content:"";position:absolute;top:0;left:0;height:2px;width:44px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease-out) var(--bd,0s)}
.value.in::before{transform:scaleX(1)}
.value:hover{transform:translateY(-5px);background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.26)}
.value .n{font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--orange-light);letter-spacing:.09em}
.value h3{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.006em}
.value p{font-size:14.5px;line-height:1.6;color:var(--n100);opacity:.86}

/* ─────────────────────────────────────────────── pipeline (protocol → TLFs) */
.pipe{position:relative}
.pipe-rail{
  position:absolute;left:0;right:0;top:23px;height:2px;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.pipe-rail i{position:absolute;inset:0;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.9s var(--ease-out) .15s}
.pipe.in .pipe-rail i{transform:scaleX(1)}
.stages{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.stage{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.stage .dot{
  width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;flex:none;position:relative;z-index:1;
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--txt-soft);
  transition:transform .6s var(--ease-out) var(--sd,0s),border-color .5s var(--ease) var(--sd,0s),
             color .5s var(--ease) var(--sd,0s),box-shadow .5s var(--ease) var(--sd,0s);
  transform:scale(.55);opacity:0;
}
.pipe.in .stage .dot{transform:scale(1);opacity:1}
.stage.live .dot{border-color:var(--orange);color:var(--orange);
  box-shadow:0 0 0 5px rgba(242,144,32,.13)}
.stage.next .dot{border-color:var(--plum);color:var(--plum);
  box-shadow:0 0 0 5px rgba(130,67,103,.11)}
.stage.final .dot{border-color:var(--navy);color:var(--navy);
  box-shadow:0 0 0 5px rgba(38,34,98,.13)}
.stage h4{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.005em;line-height:1.25}
.stage p{font-size:12.5px;line-height:1.5;color:var(--txt-soft)}

/* ─────────────────────────────────────────────── idaptlinq callout */
.linkq{
  position:relative;margin-top:36px;padding:28px 30px;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 54px -34px rgba(38,34,98,.30);
}
.linkq::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.linkq h4{
  display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;color:var(--navy);
}
.linkq h4::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none;
}
.linkq p{font-size:14.5px;line-height:1.6;color:var(--txt);margin-top:10px;max-width:640px}
.linkq .traits{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.linkq .traits span{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:100px;
  border:1px solid var(--plum);color:var(--plum);
  font-family:var(--font-mono);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.055em;white-space:nowrap;
}

/* ─────────────────────────────────────────────── module cards */
.modules{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.module{
  display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);position:relative;
  transition:transform .55s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease);
}
.module:hover{transform:translateY(-6px);border-color:#cfcbe0;background:#fff;
  box-shadow:0 26px 48px -26px rgba(38,34,98,.28)}
.module h3{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.007em}
.module > p{font-size:14.5px;line-height:1.6;color:var(--txt)}
.io{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  padding:16px;border-radius:12px;background:#fff;border:1px solid var(--line-light)}
.module:hover .io{background:var(--surface)}
.io .col{display:flex;flex-direction:column;gap:5px;min-width:0}
.io .k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:#9b9ba3}
.io .v{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.io .to{color:var(--orange);font-size:18px;line-height:1}
.checks{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.checks li{display:flex;gap:10px;font-size:13.5px;line-height:1.5;color:var(--txt);
  list-style:none}
.checks{padding:0;margin-block:0}
/* tick as a data-URI SVG — two stacked linear-gradients never quite read as a
   checkmark at 15px */
.checks li::before{
  content:"";width:16px;height:16px;border-radius:50%;flex:none;margin-top:3px;
  background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.7 6.35l2.15 2.15 4.5-4.6' fill='none' stroke='%23066036' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ─────────────────────────────────────────────── demo video frame */
.videoframe{
  border-radius:16px;overflow:hidden;background:#f2f2f5;position:relative;
  box-shadow:0 44px 90px -40px rgba(38,34,98,.42),0 0 0 1px rgba(38,34,98,.10);
}
.videoframe .chrome{
  display:flex;align-items:center;gap:9px;padding:13px 15px;background:#ececed;
  border-bottom:1px solid #e0e0e4;
}
.videoframe .chrome b{width:11px;height:11px;border-radius:50%;flex:none}
.videoframe .chrome b:nth-child(1){background:#ff5f57}
.videoframe .chrome b:nth-child(2){background:#febc2e}
.videoframe .chrome b:nth-child(3){background:#28c840}
.videoframe .chrome .url{
  flex:1;height:24px;border-radius:7px;background:#fff;margin-left:12px;
  border:1px solid #e3e3e7;display:flex;align-items:center;padding-inline:10px;
  font-family:var(--font-mono);font-size:10.5px;color:#a6a6ae;
}
.videoframe .screen{
  position:relative;aspect-ratio:16/9;background:
    radial-gradient(60% 60% at 30% 25%,rgba(242,144,32,.14),transparent 70%),
    radial-gradient(60% 60% at 76% 74%,rgba(38,34,98,.16),transparent 72%),
    #fbfbfc;
  display:grid;place-items:center;overflow:hidden;
}
.videoframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videoframe .placard{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;padding:24px;
}
.play{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--grad);background-size:155% 100%;position:relative;
  box-shadow:0 18px 40px -14px rgba(38,34,98,.55);
  transition:transform .5s var(--ease-out);
}
.play::after{                            /* triangle */
  content:"";width:0;height:0;margin-left:5px;
  border-left:20px solid #fff;border-block:12px solid transparent;
}
.play::before{                           /* pulsing halo */
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(242,144,32,.45);animation:ping 2.6s ease-out infinite;
}
@keyframes ping{
  0%{transform:scale(.86);opacity:.9}
  70%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
.videoframe:hover .play{transform:scale(1.07)}
.placard .cap{font-size:13.5px;color:var(--txt-soft);max-width:340px;line-height:1.55}

/* ─────────────────────────────────────────────── contact form */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;
  align-items:start}
.assure{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.assure li{display:flex;gap:14px;list-style:none;align-items:flex-start}
.assure{padding:0}
.assure .num{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--orange-lighter);color:#a2560a;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
}
.assure b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.assure p{font-size:13.5px;line-height:1.55;color:var(--txt);margin-top:2px}
.mailnote{
  margin-top:26px;padding:16px 18px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);font-size:13.5px;color:var(--txt);line-height:1.55;
}
.mailnote a{color:var(--navy);font-weight:600;border-bottom:1px solid rgba(38,34,98,.3)}

.form-card{
  padding:36px;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:0 34px 70px -40px rgba(38,34,98,.30);position:relative;overflow:hidden;
}
.form-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.seg{display:flex;gap:8px;padding:0;margin:0 0 24px;border:0}
.seg legend{padding:0;margin-bottom:10px;font-family:var(--font-mono);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-soft)}
.seg .opts{display:flex;gap:8px;flex-wrap:wrap}
.seg label{
  position:relative;padding:9px 18px;border-radius:100px;border:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--txt);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.seg label:hover{border-color:#bdb6cf}
/* the input covers its label rather than collapsing to 0×0, so the whole pill
   is the hit target and assistive tech still sees a real radio */
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg input:checked + span{color:#fff}
.seg label:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--txt-strong)}
.field label .req{color:var(--orange);margin-left:2px}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:#fff;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-soft) 50%),
                   linear-gradient(135deg,var(--txt-soft) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  background-position:calc(100% - 18px) 21px,calc(100% - 12px) 21px;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(38,34,98,.12)}
.field .err{font-size:12px;color:#c11f3f;min-height:0;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#e0566f;
  box-shadow:0 0 0 3px rgba(255,56,92,.10)}
.field.bad .err{display:block}
.form-card .btn{margin-top:26px;width:100%}
.form-card .fineprint{margin-top:14px;font-size:12.5px;color:var(--txt-soft);line-height:1.5;
  text-align:center}
.sent{
  display:none;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:34px 10px;
}
.sent.on{display:flex}
.form-card.done .formbody{display:none}
.sent .tick{
  width:56px;height:56px;border-radius:50%;background:var(--ok-bg);display:grid;place-items:center;
  color:var(--ok-fg);font-size:26px;font-weight:700;
}
.sent h3{font-size:20px;font-weight:700;color:var(--ink)}
.sent p{font-size:14.5px;line-height:1.6;color:var(--txt);max-width:360px}

/* ─────────────────────────────────────────────── careers: role accordions */
.roles{display:flex;flex-direction:column;gap:16px}
.role{
  border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .5s var(--ease);
}
.role:hover{border-color:#cfcbe0}
.role.open{background:#fff;border-color:#cfcbe0;box-shadow:0 26px 52px -30px rgba(38,34,98,.28)}
.role > .head{
  width:100%;display:flex;align-items:center;gap:20px;padding:26px 30px;text-align:left;
  cursor:pointer;
}
.role .head .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.role .head h3{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.007em}
.role .chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 10px;border-radius:100px;background:var(--line-light);
  color:var(--txt);white-space:nowrap;
}
.chip.o{background:var(--orange-lighter);color:#a2560a}
.role .caret{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;color:var(--navy);background:#fff;
  transition:transform .45s var(--ease-out),background .3s var(--ease),border-color .3s var(--ease);
}
.role .caret::before{
  content:"";width:8px;height:8px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
}
.role.open .caret{transform:rotate(180deg);background:var(--navy);color:#fff;border-color:var(--navy)}
.role .body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-out);
}
.role.open .body{grid-template-rows:1fr}
.role .body > div{overflow:hidden;min-height:0}
.role .inner{padding:0 30px 30px;display:flex;flex-direction:column;gap:26px}
.role .blurb{font-size:15px;line-height:1.65;color:var(--txt);max-width:760px}
.role .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.role h4{
  font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--plum);margin-bottom:12px;
}
.role ul{padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
/* inline flow, not flex: a flex li makes <b> and the text following it separate
   items, which broke each bullet into two ragged columns */
.role li{list-style:none;position:relative;padding-left:16px;font-size:14px;
  line-height:1.55;color:var(--txt)}
.role li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--grad);background-size:400% 100%;
}
.role li b{color:var(--ink);font-weight:600}
.role .foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line)}
.role .foot .why{font-size:13.5px;color:var(--txt-soft);flex:1;min-width:220px;line-height:1.5}

/* ─────────────────────────────────────────────── responsive */
@media (max-width:1240px){
  .page-hero .shell{grid-template-columns:1fr}
  .page-hero .aside{padding-bottom:0}
  .split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .facts{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:8px}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
  .pipe-rail{display:none}
}
@media (max-width:1040px){
  .dark .shell.culture{grid-template-columns:1fr}
  /* compact cards pair up happily at tablet width */
  .team .person{flex-basis:calc((100% - 24px)/2)}
  .modules{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* genuinely out of room — stack, and give the mockup its sidebar back */
  .dark .shell{grid-template-columns:1fr;gap:48px}
  .dark .mock .app{grid-template-columns:96px 1fr}
  .dark .mock .side{display:flex}
}
@media (max-width:860px){
  .person .mono-av{width:76px;height:76px;font-size:19px}
  .person{padding:26px}
  .page-hero{padding-block:56px 48px}
  .values{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr 1fr}
  .fields{grid-template-columns:1fr}
  .form-card{padding:26px}
  .role > .head{padding:22px}
  .role .inner{padding:0 22px 24px}
  .role .cols{grid-template-columns:1fr;gap:22px}
  .page-hero .aside{gap:24px;flex-wrap:wrap}
}
@media (max-width:640px){
  .team .person{flex-basis:100%}
}
@media (max-width:560px){
  .stages{grid-template-columns:1fr}
  .io{grid-template-columns:1fr;gap:10px}
  .io .to{transform:rotate(90deg);justify-self:start}
  .role .head .caret{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hr-brand,.pipe-rail i,.person::before,.value::before{transform:none!important}
  .stage .dot{transform:none!important;opacity:1!important}
  .play::before{display:none}
}

/* nav CTA cluster (was an inline style in the single-file build) */
.nav-right{display:flex;align-items:center;gap:14px}

/* ── demo frame: a muted skeleton of the app behind the play overlay, so the
   section reads as a paused recording rather than an empty box. Purely
   decorative — deleted along with .placard when real footage goes in. */
.videoframe .skeleton{position:absolute;inset:0;display:grid;grid-template-columns:132px 1fr;
  opacity:.5;filter:blur(.4px);pointer-events:none}
.videoframe .skeleton .sb{background:#fff;border-right:1px solid #ededf1;padding:16px 12px;
  display:flex;flex-direction:column;gap:9px}
.videoframe .skeleton .mn{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.videoframe .skeleton .r{background:#e9e9ee;border-radius:5px;height:11px}
.videoframe .skeleton .r.w1{width:58%}.videoframe .skeleton .r.w2{width:82%}
.videoframe .skeleton .r.w3{width:40%}.videoframe .skeleton .r.tall{height:52px;background:#f0f0f4}
.videoframe .skeleton .r.hd{height:17px;width:26%;background:#dedee6}
.videoframe .skeleton .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.videoframe .skeleton .tbl{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.videoframe .skeleton .tbl .r{height:9px}
.videoframe .screen::after{           /* scrim so the play button stays legible */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(251,251,252,.72));
}
.videoframe .placard{z-index:2}

/* ─────────────────────────────────────────────── résumé upload
   Mirrors the upload control in the product mockup: dashed drop zone, then a
   solid confirmed state once a file is chosen. */
.drop{
  position:relative;border:1.5px dashed var(--line);border-radius:12px;background:#fff;
  padding:24px 18px;text-align:center;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.drop:hover,.drop.over{border-color:var(--orange);background:#fffdf9}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop .prompt .t{font-size:14px;font-weight:600;color:var(--txt-strong)}
.drop .prompt .s{font-size:12px;color:var(--txt-soft);margin-top:4px;
  font-family:var(--font-mono);letter-spacing:.02em}
.drop .picked{display:none;align-items:center;justify-content:center;gap:10px}
.drop.has{border-style:solid;border-color:#8fd3b4;background:var(--ok-bg)}
.drop.has .prompt{display:none}
.drop.has .picked{display:flex}
.drop .picked .tick{
  width:18px;height:18px;border-radius:50%;flex:none;background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.7 6.35l2.15 2.15 4.5-4.6' fill='none' stroke='%23066036' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.drop .picked .nm{font-size:13.5px;font-weight:600;color:var(--ok-fg);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop .picked .sz{font-size:11.5px;color:#3f7d5f;font-family:var(--font-mono)}
.drop .picked .swap{font-size:11.5px;color:#3f7d5f;text-decoration:underline;opacity:.8}
.field.bad .drop{border-color:#e0566f;background:#fff8f9}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT COMPONENTS  (added for the Aug 2026 copy rewrite)
   ═════════════════════════════════════════════════════════════════════════ */

/* hero sub-headline — carries the back half of the positioning sentence */
.hero-sub{
  font-family:var(--font-head);font-weight:700;letter-spacing:-.006em;
  font-size:clamp(18px,1.9vw,24px);line-height:1.36;color:var(--txt-strong);max-width:610px;
}

/* "content still to come" markers — these should all disappear before launch */
.tbd{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:100px;
  border:1px dashed var(--line);background:var(--surface);font-family:var(--font-mono);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-soft);white-space:nowrap;
}
.tbd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange-light);flex:none}
.on-dark .tbd{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:var(--n100)}
.placeholder{
  border:1.5px dashed var(--line);border-radius:14px;padding:26px;background:var(--surface);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.placeholder p{font-size:14.5px;line-height:1.6;color:var(--txt);max-width:60ch}
.on-dark .placeholder{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05)}
.on-dark .placeholder p{color:var(--n100);opacity:.88}

/* vision + mission pair */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vm > div{
  padding:24px 26px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  position:relative;overflow:hidden;
}
.vm > div::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--grad);
  background-size:100% 300%}
.vm .k{display:block;margin-bottom:9px;font-family:var(--font-mono);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--plum)}
.vm p{font-size:16px;line-height:1.55;color:var(--ink);font-weight:600;
  font-family:var(--font-head)}

/* leadership cards — the avatar slot takes a photo once there is one */
.person .mono-av img{width:100%;height:100%;object-fit:cover;display:block}
.person.pending .mono-av{
  background:var(--line-light);border:1.5px dashed var(--line);color:var(--txt-soft);
}
.person .bio-tbd{font-size:14px;line-height:1.6;color:var(--txt-soft);font-style:italic}

/* product principles */
.principles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.principle{
  padding:26px 28px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease),
             box-shadow .5s var(--ease);
}
.principle::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:46px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out) var(--bd,0s);
}
.principle.in::before{transform:scaleX(1)}
.principle:hover{transform:translateY(-5px);background:#fff;border-color:#cfcbe0;
  box-shadow:0 24px 44px -26px rgba(38,34,98,.26)}
.principle .n{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--orange);
  letter-spacing:.09em}
.principle h3{font-size:17.5px;color:var(--ink);line-height:1.3;letter-spacing:-.004em}
.principle p{font-size:14px;line-height:1.62;color:var(--txt)}

@media (max-width:1040px){ .principles{grid-template-columns:1fr} }
@media (max-width:860px){ .vm{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .principle::before{transform:none!important} }

/* ─────────────────────────────────────────────── bio dialog
   Native <dialog>: Esc, focus trapping and an inert background come free. */
.bio-dialog{
  width:min(640px,calc(100vw - 40px));max-width:none;max-height:min(86vh,760px);
  padding:0;border:0;border-radius:20px;background:#fff;color:var(--txt);
  box-shadow:0 50px 90px -40px rgba(38,34,98,.55);overflow:auto;
}
.bio-dialog::backdrop{background:rgba(20,17,45,.52);backdrop-filter:blur(3px)}
.bio-dialog[open]{animation:bdIn .34s var(--ease-out)}
@keyframes bdIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.bd-head{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:18px;
  padding:26px 28px 20px;background:#fff;border-bottom:1px solid var(--line-light);
}
.bd-head .mono-av{width:76px;height:76px;border-radius:14px;font-size:19px}
.bd-head h3{font-size:21px;color:var(--ink);letter-spacing:-.008em}
.bd-head .job{margin-top:3px}
.bd-close{
  margin-left:auto;align-self:flex-start;width:34px;height:34px;flex:none;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--txt);
  font-size:20px;line-height:1;display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.bd-close:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.bd-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bio-dialog .bio{display:flex;flex-direction:column;gap:14px;padding:22px 28px 30px}
.bio-dialog .bio p{font-size:15px;line-height:1.7;color:var(--txt)}
/* the dialog is white in every variant — it sits above the paper, not on it */

@media (max-width:860px){
  .bio-dialog{width:calc(100vw - 24px);max-height:88vh;border-radius:16px}
  .bd-head{padding:20px 20px 16px;gap:14px}
  .bd-head .mono-av{width:60px;height:60px;font-size:16px}
  .bio-dialog .bio{padding:18px 20px 24px}
}
@media (prefers-reduced-motion:reduce){ .bio-dialog[open]{animation:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANT · sprouting mark
   The hero mark is drawn flat and grows like a plant, so nothing about it
   orbits. Two cues that promised rotation are retired here.
   ═════════════════════════════════════════════════════════════════════════ */
#heroCanvas{cursor:default}
/* the concentric rings read as an orbit path when they turn; held still and
   softened, they read as ground/air behind the plant */
.hero-visual .rings{opacity:.34}
.hero-visual .rings i{animation:none}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE & TOUCH REFINEMENTS
   Every rule here sits inside a max-width or input-capability query, so the
   desktop layout (wider than 900px with a mouse) is exactly as it was.
   ═════════════════════════════════════════════════════════════════════════ */
html{scroll-padding-top:84px}
/* notch / rounded-corner safe areas (landscape phones) */
.shell{padding-inline:max(var(--pad),env(safe-area-inset-left)) max(var(--pad),env(safe-area-inset-right))}

/* Touch: hover lifts/tilts stick after a tap, and the canvas must not trap the
   finger — vertical swipes over the hero mark have to keep scrolling the page. */
@media (hover:none){
  .phase:hover,.person:hover,.module:hover,.value:hover,.principle:hover{transform:none}
  .phase:hover::after{opacity:0}
  .mock{transform:none!important}
  #heroCanvas{touch-action:pan-y}
}

/* grid children may shrink below their content; this is what let the app
   mockup push the page 55px wider than a 375px screen */
@media (max-width:900px){
  /* side-slide reveals would poke past the screen edge before they land, and the
     stock `.reveal.left` rule outranks `.reveal.in`, leaving the mockup nudged
     30px off-centre after it arrives */
  .reveal.left,.reveal.right{transform:translateY(22px)}
  .reveal.left.in,.reveal.right.in{transform:none}
  .dark .shell,.dark .shell.culture{grid-template-columns:minmax(0,1fr)}
  .mock-wrap{margin-inline:auto}
  .mock-wrap,.mock{min-width:0;max-width:100%}
  .mock .main{min-width:0;overflow:hidden}
  .mock table{table-layout:fixed}
  .mock td,.mock th{overflow:hidden;text-overflow:ellipsis}
}

@media (max-width:860px){
  :root{--pad:24px}
  html{scroll-padding-top:72px}
  .nav .shell{padding-block:14px}
  .nav.scrolled .shell{padding-block:10px}
  .burger{width:44px;height:44px}
  .nav.open .mobile-panel{max-height:min(420px,calc(100dvh - 76px));overflow-y:auto}
  .mobile-panel a{padding:15px 0;font-size:16px}
  .mobile-panel nav{padding-inline:max(var(--pad),env(safe-area-inset-left))}

  /* softer, cheaper atmosphere on phones */
  .aurora{filter:blur(44px)}
  .nav{backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px)}

  .hero .shell{padding-block:44px 64px;gap:36px}
  .hero-copy{gap:24px}
  .hero .lede{font-size:16.5px}
  .sec-head{margin-bottom:36px}
  .btn,.btn-lg{min-height:48px;padding-inline:24px}
  .hero-copy .btn,.cta .btn{max-width:100%}
  .stats .shell{padding-block:26px;gap:22px 32px}
  .phase .body{padding:26px}
  .cta{padding:40px 22px}
  .cta .stack .btn,.cta > .btn{width:100%}
  .dark{padding-block:60px}
  .work-copy{gap:26px}

  /* touch targets ≥ 44px without changing how text looks */
  .footer .links{gap:0 22px}
  .footer .links a,.footer .bottom a{display:inline-flex;align-items:center;min-height:44px}
  .footer .bottom .legal{gap:0 24px}
  .pbtn{min-height:44px;display:inline-flex;align-items:center}
  .role > .head{min-height:64px}
  .bd-close{width:44px;height:44px}
  .seg label{padding:12px 18px;min-height:44px;display:inline-flex;align-items:center}
  .seg .opts{gap:10px}

  /* 16px inputs stop iOS Safari zooming the page on focus */
  .field input,.field select,.field textarea{font-size:16px;padding:14px;min-height:48px}
  .field select{background-position:calc(100% - 18px) 23px,calc(100% - 12px) 23px}
  .drop{padding:28px 16px}
  .drop .picked{flex-wrap:wrap}
  .drop .picked .nm{max-width:100%}

  .mailnote,.prose p,.linkq p,.role .blurb{overflow-wrap:anywhere}
  .bio-dialog{max-height:88dvh}
  .page-hero .aside{gap:20px 28px}
  .page-hero .aside .k span{max-width:none}
  .pull{padding:24px}
  .linkq{padding:24px 22px}
  .module{padding:26px}
}

@media (max-width:560px){
  :root{--pad:20px}
  .logo{height:28px}
  .hero-visual{margin-inline:-6px}
  .hero-note{align-items:flex-start}
  .hero-note .dot{margin-top:5px;flex:none}
  .badge{white-space:normal;line-height:1.4}
  .stat .num{font-size:28px}
  .page-hero{padding-block:44px 40px}
  .page-hero .aside{display:grid;grid-template-columns:1fr 1fr}
  .footer .bottom .legal{flex-direction:column}
  .role .foot .btn{width:100%}
  .form-card{padding:22px 18px}
  .bd-head{flex-wrap:wrap}
}

@media (max-width:360px){
  :root{--pad:16px}
  .hero h1{font-size:27px}
}

/* ── About · leadership team on the dark aurora ground ──────────────────────
   Reuses the .dark section chrome; the shell is a plain block here (the
   two-column grid is for the copy + cards layout used on the home page). */
.dark .shell.lead-shell{display:block}
.dark .sec-head h2{color:#fff}
.dark .sec-head .right{color:var(--n100);opacity:.9}
.dark .person{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(2px)}
.dark .person:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);
  box-shadow:0 26px 48px -26px rgba(0,0,0,.5)}
.dark .pbtn{color:#fff}
.dark .person .job,.dark .person .more{color:var(--orange-light)}

/* ── Careers · long-form role descriptions: lead-in paragraph, grouped
   sub-headings and one level of nested bullets ─────────────────────────── */
.role .blurb b{color:var(--ink);font-weight:600}
.role h5.sub{font-size:14.5px;font-weight:700;color:var(--ink);margin:18px 0 10px;letter-spacing:-.003em}
.role h4 + h5.sub{margin-top:0}
.role ul + h5.sub{margin-top:22px}
.role li ul{margin-top:9px;gap:8px}
.role li ul li::before{background:var(--line);width:4px;height:4px;top:8px}
.role .foot .why{flex:1 1 100%;min-width:0}
.role .foot .btn{margin-left:auto}
@media (max-width:860px){ .role .foot .btn{margin-left:0} }

/* Join page: the form stands alone, centred */
.contact-grid.solo{grid-template-columns:minmax(0,760px);justify-content:center}

/* About · large logo filling the empty right of the page hero (decorative —
   the nav already carries the accessible logo). Hidden once the hero stacks. */
/* icon only: the viewBox crops the lockup to the mark */
.hero-logo{align-self:center;justify-self:end;color:var(--ink);width:clamp(180px,17vw,250px);margin-right:clamp(0px,4vw,64px)}
.hero-logo svg{width:100%;height:auto}
/* keep the two-column hero (text + icon) on laptop and tablet widths; only a
   phone-sized screen, where it would just repeat the nav logo, drops the icon */
@media (max-width:1240px){
  .page-hero .shell:has(.hero-logo){grid-template-columns:minmax(0,1fr) auto}
  .hero-logo{width:clamp(110px,16vw,190px);margin-right:0}
}
@media (max-width:700px){ .hero-logo{display:none} }

/* ── Pipeline, small screens: one continuous vertical line through the five dots.
   Each stage draws the segment from its own dot down to the next, so the
   gradient (orange → plum → navy) fills in step by step as the dots appear.
   Dots sit beside their text so the line never runs through a word. ───── */
@media (max-width:700px){
  .stages{--sgap:30px;row-gap:var(--sgap);grid-template-columns:minmax(0,1fr)}
  .stage{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
    column-gap:18px;row-gap:3px;align-items:start;align-content:start}
  .stage .dot{grid-row:1 / span 2;grid-column:1}
  .stage h4{grid-column:2;grid-row:1;align-self:end;padding-top:2px}
  .stage p{grid-column:2;grid-row:2;align-self:start}
  /* a lone heading (no paragraph) still centres on its dot */
  .stage:not(:last-child)::before,
  .stage:not(:last-child)::after{
    content:"";position:absolute;left:23px;top:24px;width:2px;border-radius:2px;
    height:calc(100% + var(--sgap));z-index:0;pointer-events:none;
  }
  .stage::before{background:var(--line)}
  .stage::after{
    background:linear-gradient(180deg,var(--c1,#f68b29),var(--c2,#a84e35));
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform .55s var(--ease-out) var(--ld,.35s);
  }
  .pipe.in .stage::after{transform:scaleY(1)}
  .stage:nth-child(1){--c1:#f68b29;--c2:#a84e35;--ld:.32s}
  .stage:nth-child(2){--c1:#a84e35;--c2:#5b1242;--ld:.44s}
  .stage:nth-child(3){--c1:#5b1242;--c2:#411a51;--ld:.56s}
  .stage:nth-child(4){--c1:#411a51;--c2:#272261;--ld:.68s}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .stage::after{transform:none!important}
}

/* Pipeline, tablet / small laptop: keep the single row of five with the
   horizontal gradient rail running through the dots (the desktop design),
   instead of dropping to a 3- or 2-column grid with no connection. The columns
   simply get narrower; the descriptions wrap onto more lines. */
@media (min-width:701px) and (max-width:1240px){
  .stages{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .pipe-rail{display:block}
  .stage{gap:10px}
  .stage h4{font-size:14.5px}
  .stage p{font-size:12px;overflow-wrap:anywhere}
}

/* Nav · "Contact Us" is the one solid call-to-action button; the other links stay text. */
.nav .btn-nav{padding:10px 22px;font-size:14px;line-height:1.2;white-space:nowrap}
@media (max-width:860px){
  /* the burger menu carries the same button at the bottom of its panel */
  .mobile-panel .btn{border-bottom:0;padding:14px 24px;font-size:16px;color:#fff}
  .nav.open .mobile-panel{max-height:min(480px,calc(100dvh - 76px))}
}

/* Home hero, stacked (≤1040px): badge → headline → animated mark → subhead →
   intro → button. The copy wrappers are flattened (display:contents) so the mark
   can slot in between the headline and the rest, and the old wrapper gaps are
   rebuilt as margins. Desktop keeps its two-column layout untouched. */
@media (max-width:1040px){
  .hero .shell{row-gap:0}
  .hero-copy,.title-block{display:contents}
  .hero .shell .badge{order:1;justify-self:start;margin-bottom:24px}
  .hero .shell h1{order:2}
  .hero-visual{order:3;max-width:400px;margin-block:8px 16px}
  .hero .shell .hero-sub{order:4;margin-bottom:16px}
  .hero .shell .lede{order:5;margin-bottom:28px}
  .hero .shell .btn{order:6;justify-self:start}
  .hero .shell .hero-note{order:7;margin-top:24px}
}
@media (max-width:560px){
  .hero-visual{max-width:min(240px,66vw);margin-inline:auto}
}

/* Home "Meeting customer needs." (stacked, ≤900px): badge → title → dashboard
   mockup → intro → benefits. The copy wrappers are flattened (display:contents,
   !important because the title block carries an inline style) so the mockup can
   sit right under the title; the old wrapper gaps are rebuilt as margins.
   Desktop keeps its two-column layout untouched. */
@media (max-width:900px){
  #partners .shell{row-gap:0}
  #partners .work-copy,
  #partners .work-copy > div:not(.benefits){display:contents!important}
  #partners .badge{order:1;justify-self:start;margin-bottom:24px}
  #partners h2{order:2;margin-bottom:12px}
  #partners .mock-wrap{order:3;margin-bottom:32px}
  #partners .lede{order:4;margin-bottom:32px}
  #partners .benefits{order:5}
}

/* Dashboard mockup on phones / small tablets (≤700px): the app's sidebar
   collapses to a slim icon rail (like a real collapsed nav) and the mockup is
   trimmed vertically — three table rows instead of five, KPIs in one row, tighter
   padding — so it stops towering over the copy. */
@media (max-width:700px){
  .dark .mock .app{grid-template-columns:30px minmax(0,1fr)}
  .dark .mock .side{padding:10px 0;gap:8px;align-items:center}
  .dark .mock .side .lg{width:13px;height:12px;overflow:hidden;margin-bottom:4px}
  /* the global `svg{max-width:100%}` would squash the whole lockup into the 13px box;
     keep it at natural size so the box crops to the icon alone */
  .dark .mock .side .lg svg{max-width:none;width:auto;height:12px}
  .dark .mock .side .card{display:none}
  .dark .mock .side .item{font-size:0;gap:0;padding:5px;justify-content:center}
  .dark .mock .side .item.on{justify-content:center}
  .dark .mock .side .who{border:0;padding:0;justify-content:center}
  .dark .mock .side .who > span:not(.av){display:none}
  .dark .mock .main{padding:10px;gap:7px}
  .dark .mock .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .dark .mock .kpi{padding:5px 6px}
  .dark .mock .kpi .v{font-size:12px}
  .dark .mock .panel{padding:6px}
  .dark .mock .filters{margin-bottom:5px}
  .dark .mock tbody tr:nth-child(n+4){display:none}
  .dark .mock td{padding-block:4px}
  .dark .mock .pgn{margin-top:5px}
}