/* ── tokens ───────────────────────────────────────────────────────── */
:root{
  --background:#ffffff; --foreground:#0a0a0a;
  --brand:#1d63ff; --brand-deep:#05070f; --brand-light:#5b8cff;
  --accent:#22c55e;
  --surface:#f4f5f7; --surface-card:#ffffff;
  --ink:#0a0a0a; --ink-soft:#6b7280; --ghost:#d9dce3; --hairline:#e6e8ec;
  --on-brand:#ffffff;
  --radius-card:1.5rem; --radius-card-lg:2rem; --radius-pill:62.5rem;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}
/* adaptive rem grid — design base 1920 */
html{font-size:16px}
@media (max-width:1920px){html{font-size:0.833333vw}}
@media (max-width:1440px){html{font-size:1.111111vw}}
@media (max-width:1024px){html{font-size:1.5625vw}}
@media (max-width:640px){html{font-size:4.444444vw}}
html.locked{position:relative;overflow:hidden;height:100%}

/* ── reset ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0}
img,canvas{display:block;max-width:100%}
button{cursor:pointer;font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
body{min-height:100vh;background:var(--background);color:var(--foreground);
  font-family:"Onest",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{width:100%;overflow-x:clip;padding:.5rem}
@media (min-width:640px){main{padding:.75rem}}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── reveal primitives ────────────────────────────────────────────── */
.clip{display:inline-block;overflow:hidden;padding-bottom:.14em;vertical-align:bottom}
.clip>span{display:inline-block;transform:translateY(115%);opacity:0;will-change:transform,opacity;
  transition:transform 950ms var(--ease-expo),opacity 950ms var(--ease-expo)}
.clip.in>span{transform:none;opacity:1}
.lines .clip{display:block}
.fadewords .clip{overflow:visible;padding-bottom:0}
.fadewords .clip>span{transform:translateY(18px)}

/* ── shared components ────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft)}
.eyebrow::before{content:"";width:.375rem;height:.375rem;border-radius:var(--radius-pill);background:var(--brand)}
.eyebrow.light{color:rgba(255,255,255,.7)}
.eyebrow.light::before{background:var(--brand-light)}

.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-pill);
  padding:.875rem 1.75rem;font-size:.875rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;transition:background-color .25s,color .25s,border-color .25s;white-space:nowrap}
.pill svg{width:1rem;height:1rem;flex:none}
.pill.light{background:#fff;color:var(--brand-deep)}
.pill.light:hover{background:var(--brand-light);color:#fff}
.pill.solid{background:var(--ink);color:#fff}
.pill.solid:hover{background:var(--brand-deep)}
.pill.outline{border:1px solid currentColor;color:var(--ink)}
.pill.outline:hover{background:var(--ink);color:#fff}
.pill.outline-light{border:1px solid rgba(255,255,255,.35);color:#fff}
.pill.outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

.abtn{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-pill);
  transition:background-color .25s,border-color .25s,color .25s}
@media (min-width:640px){.abtn{width:3.5rem;height:3.5rem}}
.abtn svg{width:1.25rem;height:1.25rem}
.abtn.outline{border:1px solid var(--hairline);color:var(--ink)}
.abtn.outline:hover{border-color:var(--ink)}
.abtn.solid{background:var(--ink);border:1px solid var(--ink);color:#fff}
.abtn.solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.abtn.prev svg{transform:scaleX(-1)}

.dots{display:flex;gap:.5rem}
.dots button{padding:.375rem}
.dots i{display:block;height:.375rem;width:.375rem;border-radius:var(--radius-pill);
  background:var(--ghost);transition:width .35s var(--ease-expo),background-color .35s}
.dots button[aria-current="true"] i{width:1.25rem;background:var(--ink)}
.dots.light i{background:rgba(255,255,255,.4)}
.dots.light button[aria-current="true"] i{background:#fff}

/* gradient art tiles (stand in for photography) */
.art{position:relative;overflow:hidden;background:linear-gradient(140deg,#1d63ff 0%,#0b1b4d 55%,#05070f 100%)}
.art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 28% 18%,rgba(255,255,255,.30),transparent 70%)}
.art-b{background:linear-gradient(140deg,#7c5cff 0%,#2b1b63 55%,#05070f 100%)}
.art-c{background:linear-gradient(140deg,#16b8a6 0%,#0b4a55 55%,#05070f 100%)}
.art-mark{position:absolute;left:1.25rem;top:1rem;z-index:1;font-size:3rem;font-weight:500;
  color:rgba(255,255,255,.85);line-height:1;letter-spacing:-.04em}
.glass-cap{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;z-index:1;border-radius:.75rem;
  color:#fff;backdrop-filter:blur(12px);padding:.75rem 1rem;background:rgba(5,7,15,.45)}
.glass-cap.tint-blue{background:rgba(11,110,151,.55)}
.glass-cap .n{font-size:.875rem;font-weight:500}
.glass-cap .d{font-size:.65rem;opacity:.85;margin-top:.15rem}

/* ── header ───────────────────────────────────────────────────────── */
.hdr{position:relative;z-index:20;display:flex;align-items:center;gap:1rem;
  padding:1.5rem 1.5rem 0;font-size:.75rem;color:#fff}
@media (min-width:640px){.hdr{padding:2rem 2.5rem 0}}
.hdr nav{flex:1;display:none;gap:2rem}
@media (min-width:1024px){.hdr nav{display:flex}}
.hdr nav a{color:rgba(255,255,255,.9)}
.hdr nav a:hover{color:#fff}
.brand{display:inline-flex;white-space:nowrap;align-items:center;gap:.5rem;font-size:1rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em}
.brand svg,.brand img{width:1.7em;height:1.7em;flex:none;object-fit:contain}
.hdr .mid{flex:1;display:flex;justify-content:flex-start}
@media (min-width:1024px){.hdr .mid{justify-content:center}}
.hdr .end{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:1rem}
@media (min-width:640px){.hdr .end{gap:1.25rem}}
.hdr .txtbtn{display:none;text-transform:uppercase;letter-spacing:.08em}
@media (min-width:640px){.hdr .txtbtn{display:inline-block}}
.hdr .txtbtn:hover{text-decoration:underline}
.burger{display:grid;place-items:center;gap:5px;width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);transition:background-color .25s}
.burger:hover{background:rgba(255,255,255,.25)}
.burger i{display:block;width:1rem;height:1px;background:#fff}

/* ── solutions dropdown (desktop nav) ─────────────────────────────── */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:.375rem;color:rgba(255,255,255,.9)}
.dd-btn:hover,.dd[data-open="true"] .dd-btn{color:#fff}
.dd-btn svg{width:.75rem;height:.75rem;transition:transform .25s}
.dd[data-open="true"] .dd-btn svg{transform:rotate(180deg)}
.dd-panel{position:absolute;left:0;top:calc(100% + 1rem);min-width:17rem;z-index:30;
  background:rgba(8,11,22,.92);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:.5rem;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-.375rem);
  transition:opacity .22s var(--ease-expo),transform .22s var(--ease-expo),visibility .22s}
.dd[data-open="true"] .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-panel a{display:block;padding:.5rem .75rem;border-radius:.5rem;font-size:.75rem;
  color:rgba(255,255,255,.78);white-space:nowrap;transition:background-color .18s,color .18s}
.dd-panel a:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── clients ──────────────────────────────────────────────────────── */
.clients{background:var(--surface);padding:5rem 1.5rem}
@media (min-width:640px){.clients{padding:6rem 2.5rem}}
.clients-intro{font-size:.875rem;color:var(--ink-soft);max-width:44rem;margin-top:1.5rem;line-height:1.8}
.client-groups{display:grid;grid-template-columns:1fr;gap:2.5rem 2rem;margin-top:3.5rem}
@media (min-width:640px){.client-groups{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.client-groups{grid-template-columns:repeat(3,1fr)}}
.cgroup{border-top:1px solid var(--hairline);padding-top:1.25rem}
.cgroup h3{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-soft)}
.cgroup ul{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.cgroup li{font-size:1rem;line-height:1.4;color:var(--ink)}
@media (min-width:640px){
  .cgroup.wide{grid-column:span 2}
  .cgroup.wide ul{display:block;columns:2;column-gap:2rem}
  .cgroup.wide li{break-inside:avoid;margin-bottom:.75rem}
}

/* ── menu solutions list ──────────────────────────────────────────── */
.menu-sol{margin-top:2rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1.5rem}
.menu-sol h4{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(255,255,255,.5)}
.menu-sol ul{display:grid;grid-template-columns:1fr;gap:.5rem .5rem;margin-top:1rem;
  font-size:.8125rem;color:rgba(255,255,255,.78)}
@media (min-width:640px){.menu-sol ul{grid-template-columns:1fr 1fr}}
.menu-sol a:hover{color:#fff}

/* ── hero ─────────────────────────────────────────────────────────── */
/* min-height, not height: on a short phone the title, sub, two buttons and the
   stat card together exceed 100svh, and a fixed height clipped the card. */
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);
  background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;
  min-height:calc(100svh - 1rem)}
@media (min-width:640px){.hero{min-height:calc(100svh - 1.5rem)}}
.hero-plate{position:absolute;inset:0;z-index:-10;overflow:hidden}
.hero-plate>div{position:absolute;left:0;right:0;top:-16%;height:132%;width:100%;will-change:transform}
#globe{width:100%;height:100%;opacity:.85}
@media (max-width:768px){#globe{opacity:.45}}
.hero-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 55% at 62% 52%,rgba(5,7,15,.82) 0%,rgba(5,7,15,.45) 45%,rgba(5,7,15,.15) 100%),
             linear-gradient(to bottom,rgba(5,7,15,.55),rgba(5,7,15,.15),rgba(5,7,15,.85))}


/* flex:1 means flex-basis:0 — the block reports zero height to the flex
   algorithm, so the hero never grows past min-height and the content below it
   (the stat card) falls outside and gets clipped. basis:auto reports the real
   content height, so a short phone makes the hero taller instead of cropping. */
.hero-mid{position:relative;z-index:10;flex:1 0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem}
@media (min-width:640px){.hero-mid{padding:2rem 2.5rem}}
.hero-title{font-size:7.2vw;font-weight:500;text-transform:uppercase;line-height:.92;
  letter-spacing:-.03em;max-width:16ch}
@media (max-width:640px){.hero-title{font-size:13vw}}
/* Optical spacing, not equal box spacing. Two things throw the rhythm off:
   the reveal clip adds .14em of dead space under the title, and the title's
   line-height of .92 lets glyphs sit ~4px below their box. Cancel the first,
   absorb the second by shaving the gap below the sub. */
.hero-title{margin-bottom:-.14em}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.72);max-width:34rem;line-height:1.6;
  margin-top:2rem}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}

.hero-foot{position:relative;z-index:10;flex:none;margin-top:auto;display:flex;
  justify-content:flex-end;padding:0 1.5rem 2rem}
@media (min-width:640px){.hero-foot{padding:0 2.5rem 2.5rem}}
.statcard{display:flex;gap:.75rem;width:100%;max-width:20rem;border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.10);padding:.75rem;
  box-shadow:0 1.5rem 3rem rgba(5,7,15,.4);backdrop-filter:blur(14px)}
@media (min-width:640px){.statcard{max-width:16rem}}
.statcard .col{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;flex:1}
.statcard .big{font-size:1.875rem;font-weight:500;line-height:1}
.statcard .cap{font-size:.65rem;opacity:.8}
.faces{display:flex}
.faces i{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);
  border:1px solid rgba(5,7,15,.4);margin-left:-.5rem;
  font-size:.5rem;font-weight:500;font-style:normal;line-height:1;color:#fff}
.faces i:first-child{margin-left:0}

/* ── trust ────────────────────────────────────────────────────────── */
.trust{position:relative;isolation:isolate;overflow:hidden;background:var(--background);
  padding:4rem 1.5rem}
@media (min-width:640px){.trust{padding:5rem 2.5rem}}
.trust-top{position:relative;z-index:20;display:flex;flex-direction:column;gap:2rem}
@media (min-width:640px){.trust-top{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.badge-circle{display:grid;place-items:center;text-align:center;width:7rem;height:7rem;flex:none;
  border-radius:var(--radius-pill);background:var(--surface);padding:.5rem}
@media (min-width:640px){.badge-circle{width:8rem;height:8rem}}
.badge-circle .v{font-size:1.5rem;font-weight:500;line-height:1}
.badge-circle .c{font-size:.6rem;color:var(--ink-soft);max-width:7em;margin-top:.25rem;line-height:1.3}
.badge-card{display:flex;gap:1rem;max-width:28rem;border-radius:var(--radius-card);
  background:var(--surface);padding:1.25rem}
@media (min-width:640px){.badge-card{gap:1.25rem;padding:1.5rem}}
.badge-card .chip{border-radius:.75rem;background:var(--background);padding:.5rem 1rem;
  font-size:1.25rem;font-weight:500;height:fit-content}
.badge-card h3{font-size:1.125rem;font-weight:500}
.badge-card p{font-size:.75rem;color:var(--ink-soft);line-height:1.7;margin-top:.5rem}

.ghost-h{position:relative;z-index:0;pointer-events:none;user-select:none;max-width:88rem;
  margin:3rem auto 0;font-size:8.2vw;font-weight:500;text-transform:uppercase;line-height:1.02;
  letter-spacing:-.03em;color:var(--ghost)}
.ghost-row{display:flex;justify-content:space-between;gap:.5em}
.ghost-h .clip{padding-bottom:.12em;will-change:transform}
.ghost-h .ink{color:var(--ink)}

.coach-pos{position:relative;z-index:10;display:flex;justify-content:center;margin:2rem 0}
@media (min-width:640px){
  .coach-pos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}
.coach-anim{width:13rem}
@media (min-width:640px){.coach-anim{width:16rem}}
.coach{transform:rotate(6deg);aspect-ratio:3/4;border-radius:var(--radius-card);overflow:hidden}
.coach .layer{position:absolute;inset:0;transition:none}

.trust-ctl{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;
  margin-top:3rem}
@media (min-width:640px){.trust-ctl{margin-top:6rem}}

/* ── work (programs) ──────────────────────────────────────────────── */
.work{background:var(--surface);padding:6rem 1.5rem}
@media (min-width:640px){.work{padding:6rem 2.5rem}}
.h-stack{font-size:3rem;font-weight:500;line-height:.95;letter-spacing:-.03em;margin-top:1rem}
.work ul{margin-top:3.5rem}
.work li a{display:block;border-top:1px solid var(--hairline)}
.work li:last-child a{border-bottom:1px solid var(--hairline)}
.work li a:hover,.work li a:focus-visible{background:var(--background)}
.work .row{display:flex;align-items:center;gap:1.5rem;padding:1.75rem 0}
.work .num{width:2.5rem;flex:none;font-size:.875rem;font-weight:500;color:var(--ink-soft)}
.work .body{flex:1}
.work .body h3{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
@media (min-width:640px){.work .body h3{font-size:1.875rem}}
.work .body p{font-size:.875rem;color:var(--ink-soft);margin-top:.25rem}
.work .arrow{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;
  border-radius:var(--radius-pill);border:1px solid var(--hairline)}
.work .arrow svg{width:1.25rem;height:1.25rem}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
/* One row that runs itself. The card list is duplicated so the loop is seamless;
   --run (one set's width) and the duration are set in JS for constant speed. */
.sol-rail{margin-top:3.5rem;overflow:hidden;
  margin-left:-1.5rem;margin-right:-1.5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);
          mask-image:linear-gradient(to right,transparent,#000 4rem,#000 calc(100% - 4rem),transparent)}
@media (min-width:640px){.sol-rail{margin-left:-2.5rem;margin-right:-2.5rem}}
.sol-track{display:flex;align-items:flex-start;gap:1.25rem;width:max-content;
  padding-left:1.5rem;animation:sol-run var(--dur,45s) linear infinite}
@media (min-width:640px){.sol-track{padding-left:2.5rem}}
@keyframes sol-run{to{transform:translateX(var(--run,-100%))}}
.sol-rail:hover .sol-track,.sol-track:focus-within{animation-play-state:paused}
.sol-track>li{flex:none;width:15rem}
@media (min-width:640px){.sol-track>li{width:17rem}}
@media (prefers-reduced-motion:reduce){
  .sol-track{animation:none;width:auto;overflow-x:auto;padding-right:1.5rem;scrollbar-width:none}
  .sol-track::-webkit-scrollbar{display:none}
}
/* Plain block layout inside the card. Three nested flex containers
   (track > li > card) were fighting over height and clipping the text. */
.sol-card{display:block;width:100%;border-radius:var(--radius-card);overflow:hidden;
  background:var(--surface-card);border:1px solid var(--hairline);transition:border-color .25s}
.sol-card:hover{border-color:var(--ink-soft)}
.sol-card .shot{position:relative;display:block;height:9.5rem;overflow:hidden;
  background:var(--brand-deep)}
.sol-card .shot img{width:100%;height:100%;object-fit:cover;opacity:.85;will-change:transform}
.sol-card .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,7,15,.85),rgba(5,7,15,.25) 45%,transparent 70%)}
.sol-card .num{position:absolute;left:1rem;top:.875rem;z-index:1;font-size:.7rem;font-weight:500;
  letter-spacing:.18em;color:rgba(255,255,255,.8)}
.sol-card .cardtitle{position:absolute;left:1rem;right:1rem;bottom:.875rem;z-index:1;
  color:#fff;font-size:1rem;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.sol-card .txt{display:block;padding:1.125rem 1.125rem 1.25rem}
.sol-card p{font-size:.8125rem;line-height:1.6;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em}
.sol-card .go{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--brand)}
.sol-card .go svg{width:1rem;height:1rem}

/* ── studio (facilities) ──────────────────────────────────────────── */
.studio{background:var(--background);border-radius:var(--radius-card-lg);margin-top:-2.5rem;
  padding:4rem 1.5rem 5rem}
@media (min-width:640px){.studio{padding:4rem 2.5rem 5rem}}
.studio .grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:end}
@media (min-width:768px){.studio .grid{grid-template-columns:1fr 1fr}}
.studio .intro{max-width:24rem}
.studio .icon{width:4rem;height:4rem;border-radius:var(--radius-card)}
.studio .intro h2{margin-top:1.5rem}
.studio .intro p{font-size:.875rem;color:var(--ink-soft);max-width:20rem;margin-top:1.5rem;line-height:1.7}
/* Side by side on a phone leaves each tile ~140px wide, and the glass caption
   then grows taller than the image and spills out of it. Stack them instead. */
.tiles{display:flex;flex-direction:column;gap:1.25rem}
.tiles>div{flex:1}
.tile{aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;background:var(--surface);
  will-change:transform}
@media (min-width:640px){
  .tiles{flex-direction:row;align-items:flex-end}
  .tile{aspect-ratio:3/4}
  .tiles>div:nth-child(2){margin-bottom:2rem}
}
.tile.photo{background:#0b1020}
.tile.photo img{width:100%;height:100%;object-fit:cover}
.tile.photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,7,15,.55),transparent 45%)}

/* ── stats ────────────────────────────────────────────────────────── */
.stats{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);margin-top:.75rem;
  padding:5rem 1.5rem}
@media (min-width:640px){.stats{padding:5rem 2.5rem}}
.stats dl{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;margin-top:4rem}
@media (min-width:1024px){.stats dl{grid-template-columns:repeat(4,1fr)}}
.stats .cell{border-top:1px solid rgba(255,255,255,.2);padding-top:1.25rem}
.stats .cell .v{display:block;font-size:3.75rem;font-weight:500;letter-spacing:-.04em;line-height:1}
@media (min-width:640px){.stats .cell .v{font-size:4.5rem}}
.stats .cell .l{display:block;font-size:.875rem;color:rgba(255,255,255,.65);margin-top:.75rem}

/* ── testimonials ─────────────────────────────────────────────────── */
.quotes{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){.quotes{padding:6rem 2.5rem}}
.quotes ul{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){.quotes ul{grid-template-columns:repeat(3,1fr)}}
.qcard{display:flex;flex-direction:column;justify-content:space-between;height:100%;
  border-radius:var(--radius-card);background:var(--surface);padding:1.75rem;will-change:transform}
.qcard .mark{font-size:2.25rem;color:var(--brand);line-height:1}
.qcard blockquote{font-size:1.125rem;line-height:1.6;color:var(--ink);margin-top:1rem}
.qcard figcaption{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.5rem}
.qcard figcaption .n{font-weight:500}
.qcard figcaption .r{font-size:.875rem;color:var(--ink-soft)}


/* ── footer ───────────────────────────────────────────────────────── */
.ftr{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);margin-top:.75rem;
  padding:3.5rem 1.5rem}
@media (min-width:640px){.ftr{padding:4rem 2.5rem}}
.ftr .cta{display:flex;flex-direction:column;gap:2rem;border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:3.5rem}
@media (min-width:640px){.ftr .cta{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.ftr .cta p.big{font-size:3.75rem;font-weight:500;line-height:.92;letter-spacing:-.04em;margin-top:1rem}
.ftr .cols{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 0}
@media (min-width:768px){.ftr .cols{grid-template-columns:1.5fr 1fr 1fr}}
.ftr .about{max-width:20rem}
.ftr .about .brand{font-size:1.125rem}
.ftr .about p{font-size:.875rem;color:rgba(255,255,255,.65);margin-top:1rem;line-height:1.7}
.ftr address{font-style:normal;margin-top:1.5rem;font-size:.875rem;color:rgba(255,255,255,.8);
  display:flex;flex-direction:column;gap:.375rem}
.ftr address a:hover{color:#fff;text-decoration:underline}
.ftr address .muted{color:rgba(255,255,255,.55)}
.ftr h4{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(255,255,255,.5)}
.ftr nav ul{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem;font-size:.875rem;
  color:rgba(255,255,255,.8)}
.ftr nav ul a:hover,.ftr nav ul button:hover{color:#fff}
.ftr nav ul button{padding:0;font-size:inherit;text-align:left;color:inherit}
.ftr .bar{display:flex;flex-direction:column;gap:1.25rem;border-top:1px solid rgba(255,255,255,.15);
  padding-top:2rem;font-size:.875rem;color:rgba(255,255,255,.6)}
@media (min-width:640px){.ftr .bar{flex-direction:row;justify-content:space-between;align-items:center}}
.ftr .bar nav{display:flex;gap:1.25rem}
.ftr .bar a:hover{color:#fff}

/* ── menu overlay ─────────────────────────────────────────────────── */
.menu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;pointer-events:none}
.menu.open{pointer-events:auto}
.menu .backdrop{position:absolute;inset:0;background:var(--brand-deep);opacity:0}
.menu .panel{position:relative;flex:1;display:flex;flex-direction:column;color:#fff;padding:.5rem;opacity:0}
@media (min-width:640px){.menu .panel{padding:.75rem}}
.menu .inner{flex:1;display:flex;flex-direction:column;padding:1.5rem}
@media (min-width:640px){.menu .inner{padding:2.5rem}}
.menu .top{display:flex;align-items:center;justify-content:space-between}
.menu .xbtn,.modal .xbtn{display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.15);transition:background-color .25s}
.menu .xbtn:hover{background:rgba(255,255,255,.25)}
.menu .xbtn svg,.modal .xbtn svg{width:1.25rem;height:1.25rem}
.menu .nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.menu .nav a{display:block;font-size:3rem;font-weight:500;letter-spacing:-.03em;transition:color .25s}
@media (min-width:640px){.menu .nav a{font-size:4.5rem}}
.menu .nav a:hover{color:var(--brand-light)}
.menu .bot{display:flex;flex-direction:column;gap:1.25rem;border-top:1px solid rgba(255,255,255,.15);
  padding-top:2rem}
@media (min-width:640px){.menu .bot{flex-direction:row;justify-content:space-between;align-items:center}}
.menu .bot nav{display:flex;gap:1.25rem;font-size:.875rem;color:rgba(255,255,255,.7)}
.menu .bot nav a:hover{color:#fff}

/* ── contact modal ────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  padding:.75rem;pointer-events:none}
@media (min-width:640px){.modal{align-items:center;padding:1.5rem}}
.modal.open{pointer-events:auto}
.modal .backdrop{position:absolute;inset:0;background:rgba(5,7,15,.4);backdrop-filter:blur(6px);opacity:0}
.modal .panel{position:relative;width:100%;max-height:92svh;overflow-y:auto;border-radius:var(--radius-card-lg);
  background:var(--surface-card);color:var(--ink);padding:1.5rem;opacity:0;
  box-shadow:0 2rem 5rem rgba(5,7,15,.45)}
@media (min-width:640px){.modal .panel{max-width:32rem;padding:2rem}}
.modal .head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.modal h2{font-size:2.25rem;font-weight:500;line-height:.95;letter-spacing:-.03em;margin-top:.75rem}
@media (min-width:640px){.modal h2{font-size:3rem}}
.modal .xbtn{background:var(--surface);flex:none}
.modal .xbtn:hover{background:var(--hairline)}
.modal form{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem}
.modal label span{display:block;font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink-soft);margin-bottom:.5rem}
.modal input,.modal textarea{width:100%;border-radius:.75rem;border:1px solid var(--hairline);
  background:var(--background);padding:.75rem 1rem;font-size:.875rem;color:var(--ink);resize:vertical}
.modal input:focus,.modal textarea:focus{outline:none;border-color:var(--brand-light);
  box-shadow:0 0 0 3px rgba(91,140,255,.25)}
.modal button[type=submit]{align-self:flex-start}
.modal button[disabled]{opacity:.55;cursor:default}
.modal .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.f-err{font-size:.8rem;line-height:1.5;color:#b3261e}
.f-err a{text-decoration:underline}
.done{margin-top:2rem;border-radius:var(--radius-card);background:var(--surface);padding:1.5rem;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.done .check{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-pill);
  background:var(--brand);color:#fff}
.done .check svg{width:1.25rem;height:1.25rem}
.done h3{font-size:1.125rem;font-weight:500}
.done p{font-size:.875rem;color:var(--ink-soft)}
[hidden]{display:none!important}

/* ── loader ───────────────────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:200;background:var(--brand-deep);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.loader .brand{font-size:1.5rem}
.loader .track{width:10rem;height:1px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.2);overflow:hidden}
.loader .fill{height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}

/* ── solution pages ───────────────────────────────────────────────── */
.subhero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);
  background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;min-height:34rem}
.subhero-plate{position:absolute;inset:0;z-index:-10;overflow:hidden}
.subhero-plate img{width:100%;height:100%;object-fit:cover;opacity:.45}
.subhero-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,7,15,.70),rgba(5,7,15,.50) 38%,rgba(5,7,15,.94)),
             radial-gradient(70% 60% at 18% 40%,rgba(29,99,255,.22),transparent 70%)}
.subhero-body{position:relative;z-index:10;margin-top:auto;padding:5rem 1.5rem 3.5rem;max-width:56rem}
@media (min-width:640px){.subhero-body{padding:6rem 2.5rem 4rem}}
.crumb{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.75rem;color:rgba(255,255,255,.55);
  margin-bottom:1.5rem}
.crumb a:hover{color:#fff}
.subhero h1{font-size:3rem;font-weight:500;line-height:.98;letter-spacing:-.03em}
@media (min-width:768px){.subhero h1{font-size:4.25rem}}
.subhero .lead{font-size:1.125rem;line-height:1.65;color:rgba(255,255,255,.75);max-width:40rem;
  margin-top:1.5rem}
.subhero .cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

.sol-intro{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){.sol-intro{padding:6rem 2.5rem}}
.sol-intro .big{font-size:1.375rem;line-height:1.65;color:var(--ink);max-width:46rem;margin-top:1.5rem}
.caps{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){.caps{grid-template-columns:repeat(2,1fr)}}
/* scoped to .caps — `.cap` alone collides with the hero stat card's caption */
.caps .cap{border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.caps .cap .n{font-size:.75rem;font-weight:500;color:var(--ink-soft);letter-spacing:.18em}
.caps .cap h3{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;margin-top:.75rem}
.caps .cap p{font-size:.9375rem;line-height:1.7;color:var(--ink-soft);margin-top:.625rem}

.sol-out{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);
  margin-top:.75rem;padding:5rem 1.5rem}
@media (min-width:640px){.sol-out{padding:5rem 2.5rem}}
.outs{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:3.5rem}
@media (min-width:768px){.outs{grid-template-columns:repeat(3,1fr)}}
.out{border-top:1px solid rgba(255,255,255,.2);padding-top:1.25rem}
.out h3{font-size:1.125rem;font-weight:500}
.out p{font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.65);margin-top:.75rem}

.about-dl{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:3.5rem}
.related{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){.related{padding:6rem 2.5rem}}
.rel-grid{margin-top:2.5rem}
.rel-grid a{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  border-top:1px solid var(--hairline);padding:1.5rem 0;font-size:1.25rem;font-weight:500;
  letter-spacing:-.01em;transition:color .2s}
.rel-grid a:last-child{border-bottom:1px solid var(--hairline)}
.rel-grid a:hover{color:var(--brand)}
.rel-grid svg{width:1.25rem;height:1.25rem;flex:none}

/* ── deck (company profile) ───────────────────────────────────────────
   Every internal size is em off .slide, so one font-size drives the whole
   slide: vw on screen, fixed px for the PDF page. */
.deck{background:#000;margin:0;padding:0}
.deck main{padding:0;overflow:visible}
.slide{position:relative;width:100vw;height:56.25vw;font-size:1.34vw;overflow:hidden;
  background:var(--background);color:var(--ink);display:flex;flex-direction:column;
  padding:3.4em 3.8em;break-after:page}
.slide.dark{background:var(--brand-deep);color:#fff}
.slide.dark .s-eyebrow{color:rgba(255,255,255,.6)}
.slide.dark .s-eyebrow::before{background:var(--brand-light)}
.s-eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:.62em;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft);flex:none}
.s-eyebrow::before{content:"";width:.32em;height:.32em;border-radius:99em;background:var(--brand)}
.slide h2{font-size:2.5em;font-weight:500;line-height:1.02;letter-spacing:-.03em;margin-top:.45em}
.slide .s-sub{font-size:.95em;line-height:1.55;color:var(--ink-soft);max-width:38em;margin-top:.9em}
.slide.dark .s-sub{color:rgba(255,255,255,.68)}
.s-body{flex:1;display:flex;align-items:center;margin-top:1.6em}
.s-num{position:absolute;right:3.8em;bottom:2.4em;font-size:.62em;letter-spacing:.2em;
  color:var(--ink-soft)}
.slide.dark .s-num{color:rgba(255,255,255,.45)}

/* cover */
.slide.cover{justify-content:space-between;background:var(--brand-deep);color:#fff}
.cover .bg{position:absolute;inset:0;
  background:radial-gradient(58% 92% at 86% 48%,rgba(29,99,255,.40),transparent 66%),
             radial-gradient(46% 70% at 4% 98%,rgba(29,99,255,.15),transparent 70%)}
/* margin, not translate: Chrome's print renderer drops the transform here
   and the watermark slides to the bottom of the page. */
.cover .watermark{position:absolute;right:-5em;top:50%;margin-top:-17em;
  width:34em;height:34em;opacity:.15}
.cover .watermark img{width:100%;height:100%;object-fit:contain}
.cover .brandline{position:relative;display:flex;align-items:center;gap:.7em}
.cover .brandline img{width:2.3em;height:2.3em;object-fit:contain}
.cover .brandline span{font-size:1.25em;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.cover h1{position:relative;font-size:3.7em;font-weight:500;line-height:1;letter-spacing:-.035em}
.cover .meta{position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.18);padding-top:1.1em;font-size:.82em;
  color:rgba(255,255,255,.7)}
.cover .meta b{font-weight:500;color:#fff}

/* generic grids */
.g2,.g3,.g4{display:grid;gap:1.1em;width:100%}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.box{border-radius:1em;background:var(--surface);padding:1.3em;height:100%}
.slide.dark .box{background:rgba(255,255,255,.07)}
.box .n{font-size:.6em;font-weight:500;letter-spacing:.18em;color:var(--ink-soft)}
.slide.dark .box .n{color:rgba(255,255,255,.5)}
.box h3{font-size:.98em;font-weight:500;line-height:1.25;margin-top:.5em;letter-spacing:-.01em}
.box p{font-size:.72em;line-height:1.6;color:var(--ink-soft);margin-top:.5em}
.slide.dark .box p{color:rgba(255,255,255,.66)}
.box ul{margin-top:.6em;display:flex;flex-direction:column;gap:.32em}
.box li{font-size:.68em;line-height:1.45;color:var(--ink-soft);padding-left:.9em;position:relative}
.box li::before{content:"";position:absolute;left:0;top:.55em;width:.28em;height:.28em;
  border-radius:99em;background:var(--brand)}
.rule{border-top:1px solid var(--hairline);padding-top:.9em}
.slide.dark .rule{border-color:rgba(255,255,255,.2)}
.rule h3{font-size:1.05em;font-weight:500}
.rule p{font-size:.74em;line-height:1.6;color:var(--ink-soft);margin-top:.5em}
.slide.dark .rule p{color:rgba(255,255,255,.66)}
.big-num{font-size:2.6em;font-weight:500;letter-spacing:-.04em;line-height:1}

/* clients */
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em 1.6em;width:100%}
.cl h4{font-size:.6em;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-soft);border-top:1px solid var(--hairline);padding-top:.7em}
.cl ul{margin-top:.7em;display:flex;flex-direction:column;gap:.4em}
.cl li{font-size:.78em;line-height:1.35}

/* On screen it presents: one slide, letterboxed to 16:9 inside the viewport.
   In print every slide comes back as its own page. */
@media screen{
  html.deck,body.deck{height:100%;overflow:hidden;overscroll-behavior:none}
  /* position:fixed + inset pins to the visual viewport; iOS Safari reports a
     100vh that is TALLER than what you can see (the URL bar is excluded), so a
     vh-sized slide gets its top and bottom cropped. */
  .deck main{position:fixed;inset:0;display:grid;place-items:center;padding:0}
  /* stacked in one grid cell so they can cross-fade instead of swapping */
  .slide{grid-area:1/1;box-shadow:0 1em 4em rgba(0,0,0,.6);
    width:min(100vw,177.78vh);height:min(56.25vw,100vh);font-size:min(1.34vw,2.383vh)}
  /* svh is the viewport with browser chrome showing — never taller than visible */
  @supports (height:100svh){
    .slide{width:min(100vw,177.78svh);height:min(56.25vw,100svh);
      font-size:min(1.34vw,2.383svh)}
  }
  /* ── slide transitions + content build-in ──────────────────────────
     Cross-fade with a small rise, then the contents arrive in order.
     Screen only: the PDF must render every slide fully opaque. */
  @keyframes s-in{to{opacity:1;transform:none}}
  .slide{opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(1.2%) scale(.988);
    transition:opacity .42s var(--ease-expo),transform .52s var(--ease-expo),
               visibility .52s}
  .slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .slide .s-eyebrow,.slide h2,.slide .s-sub,.slide .s-num,
  .slide .box,.slide .rule,.slide .cl,
  .slide .brandline,.slide h1,.slide .meta{opacity:0;transform:translateY(.7em)}
  .slide.active .s-eyebrow,.slide.active h2,.slide.active .s-sub,.slide.active .s-num,
  .slide.active .box,.slide.active .rule,.slide.active .cl,
  .slide.active .brandline,.slide.active h1,.slide.active .meta{
    animation:s-in .55s var(--ease-expo) forwards}
  .slide.active .s-eyebrow{animation-delay:.10s}
  .slide.active h2{animation-delay:.18s}
  .slide.active .s-sub{animation-delay:.26s}
  .slide.active .s-num{animation-delay:.55s}
  .slide.active .brandline{animation-delay:.12s}
  .slide.active h1{animation-delay:.22s}
  .slide.active .meta{animation-delay:.38s}
  .slide.active .box:nth-child(1),.slide.active .rule:nth-child(1),.slide.active .cl:nth-child(1){animation-delay:0.30s}
  .slide.active .box:nth-child(2),.slide.active .rule:nth-child(2),.slide.active .cl:nth-child(2){animation-delay:0.37s}
  .slide.active .box:nth-child(3),.slide.active .rule:nth-child(3),.slide.active .cl:nth-child(3){animation-delay:0.44s}
  .slide.active .box:nth-child(4),.slide.active .rule:nth-child(4),.slide.active .cl:nth-child(4){animation-delay:0.51s}
  .slide.active .box:nth-child(5),.slide.active .rule:nth-child(5),.slide.active .cl:nth-child(5){animation-delay:0.58s}
  .slide.active .box:nth-child(6),.slide.active .rule:nth-child(6),.slide.active .cl:nth-child(6){animation-delay:0.65s}
  .slide.active .box:nth-child(7),.slide.active .rule:nth-child(7),.slide.active .cl:nth-child(7){animation-delay:0.72s}
  .slide.active .box:nth-child(8),.slide.active .rule:nth-child(8),.slide.active .cl:nth-child(8){animation-delay:0.79s}
  @media (prefers-reduced-motion:reduce){
    .slide,.slide *{animation:none!important;transition:none!important;
      opacity:1;transform:none}
    .slide{opacity:0}
    .slide.active{opacity:1}
  }

  .deck-ui{position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;display:flex;align-items:center;
    gap:.5rem;font-family:"Onest",system-ui,sans-serif;font-size:.78rem;
    letter-spacing:.12em;color:rgba(255,255,255,.7)}
  .deck-ui button{display:grid;place-items:center;width:2.2rem;height:2.2rem;
    border-radius:99rem;border:1px solid rgba(255,255,255,.25);color:#fff;
    background:rgba(255,255,255,.04);transition:background-color .2s}
  .deck-ui button:hover{background:rgba(255,255,255,.18)}
  .deck-ui svg{width:.95rem;height:.95rem}
  .deck-ui .prev svg{transform:scaleX(-1)}
  .deck-ui .i-close,body.is-full .deck-ui .i-open{display:none}
  body.is-full .deck-ui .i-close{display:block}
  .deck-ui .count{min-width:3.6rem;text-align:right;font-variant-numeric:tabular-nums}
  .deck-hint{position:fixed;left:1.1rem;bottom:1.35rem;z-index:50;font-size:.72rem;
    letter-spacing:.1em;color:rgba(255,255,255,.35);
    font-family:"Onest",system-ui,sans-serif}
}
@media print{
  @page{size:1280px 720px;margin:0}
  .deck{background:#fff}
  .deck-ui,.deck-hint{display:none}
  .slide{display:flex!important;width:1280px;height:720px;font-size:17.15px;box-shadow:none}
}