/* ==========================================================================
   GoMERIC  ·  design system
   Headings: Fieldwork Geo (licensed) with Archivo as the loaded fallback
   Body:     Stolzl (licensed) with Outfit as the loaded fallback
   Palette:  strict black and white
   ========================================================================== */

:root{
  --black:#000;
  --white:#fff;
  --ink:#0b0b0c;
  --g800:#1c1c1e;
  --g700:#3a3a3c;
  --g600:#57575a;
  --g500:#6e6e73;
  --g400:#93939a;
  --g300:#c4c4c9;
  --g200:#e4e4e8;
  --g150:#ededf0;
  --g100:#f2f2f4;
  --ground:#ffffff;          /* the business card ground: pure white */
  --surface:#fff;            /* every card sits on white */

  --line:rgba(11,11,12,.09);
  --line-soft:rgba(11,11,12,.06);
  --shadow-s:0 1px 2px rgba(11,11,12,.04);
  --shadow-m:0 1px 2px rgba(11,11,12,.04), 0 18px 34px -24px rgba(11,11,12,.16);
  --shadow-l:0 1px 3px rgba(11,11,12,.05), 0 40px 70px -38px rgba(11,11,12,.28);
  --shadow-xl:0 2px 6px rgba(11,11,12,.05), 0 70px 120px -50px rgba(11,11,12,.36);

  --head:'Fieldwork Geo','Fieldwork','Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Stolzl','Stolzl Display','Outfit','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* ---- one spacing scale, used everywhere ---- */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:clamp(30px,2.8vw,44px);
  --sp-6:clamp(44px,4.2vw,68px);
  --sp-7:clamp(60px,5.8vw,96px);

  --sec-y:clamp(72px,6.6vw,112px);
  --sec-y-sm:clamp(48px,4.4vw,72px);
  --head-gap:clamp(32px,3.2vw,52px);
  --gap:clamp(20px,2vw,32px);
  --gap-lg:clamp(36px,4vw,72px);
  --card-p:clamp(26px,2.2vw,36px);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:32px;

  --pad:clamp(20px,5vw,80px);
  --maxw:1360px;
  --maxw-wide:1560px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-btn:cubic-bezier(.33,1,.4,1);

  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--black);color:var(--white)}

/* ---------- type ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--head);
  font-weight:800;
  letter-spacing:-.038em;
  line-height:1;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(40px,5.2vw,76px)}
h2{font-size:clamp(30px,3.8vw,56px)}
h3{font-size:clamp(22px,2.3vw,34px);line-height:1.06;letter-spacing:-.03em}
h4{font-size:clamp(17px,1.35vw,21px);line-height:1.24;letter-spacing:-.022em;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* the reference sets its second headline line apart in colour.
   monochrome equivalent: a lighter grey weight shift. */
.hl-soft{color:var(--g400)}

.lede{
  font-size:clamp(16.5px,1.35vw,19.5px);
  line-height:1.62;
  color:var(--g600);
  max-width:58ch;
  letter-spacing:-.006em;
}
.body-lg{font-size:clamp(15.5px,1.05vw,17px);line-height:1.7;color:var(--g600);max-width:62ch}
.muted{color:var(--g500)}

.eyebrow{
  font-family:var(--head);
  font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--g500);
  display:flex;align-items:center;gap:12px;
  margin:0 0 var(--sp-3);
}
.eyebrow::before{
  content:'';flex:none;width:26px;height:9px;background:currentColor;opacity:.55;
}

.eyebrow-c{justify-content:center;margin-bottom:var(--sp-3)}

.idx{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--g400)}

/* pill badge, the reference's hero chip */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 8px 8px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  font-size:13.5px;color:var(--g700);letter-spacing:-.006em;
}
.badge b{
  font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--black);color:#fff;
  padding:5px 10px;border-radius:999px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--black);flex:none}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:var(--maxw-wide)}
.sec{position:relative;padding-block:var(--sec-y)}
.sec-tight{position:relative;padding-block:var(--sec-y-sm)}

.dark{background:var(--black);color:var(--white)}
.dark .lede,.dark .body-lg{color:rgba(255,255,255,.62)}
.dark .eyebrow{color:rgba(255,255,255,.5)}
.dark .eyebrow::before{background:rgba(255,255,255,.3)}
.dark .idx{color:rgba(255,255,255,.4)}
.dark .muted{color:rgba(255,255,255,.55)}
.dark .hl-soft{color:rgba(255,255,255,.42)}
.dark ::selection{background:var(--white);color:var(--black)}

.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--gap-lg);align-items:start}
@media (max-width:1000px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--sp-6)}
}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:var(--gap-lg);align-items:end;margin-bottom:var(--head-gap);
}
.sec-head .lede{padding-bottom:.4em}
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:var(--sp-3)}
  .sec-head .lede{padding-bottom:0}
}
/* centred section head, the reference's default rhythm */
.sec-head-c{text-align:center;margin-bottom:var(--head-gap);display:grid;justify-items:center;gap:var(--sp-2)}
.sec-head-c .eyebrow{margin-bottom:0}
.sec-head .eyebrow{margin-bottom:var(--sp-2)}
.sec-head-c .lede{text-align:center;margin-inline:auto}

/* ---------- soft background furniture ---------- */
.halftone{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.halftone canvas{width:100%;height:100%;display:block}
.sec > .wrap,.sec-tight > .wrap,.hero > .wrap,.foot > .wrap{position:relative;z-index:2}

/* large soft rounded shapes, the reference's tinted blobs */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{
  position:absolute;border-radius:38%;
  background:linear-gradient(150deg,var(--g150),rgba(250,250,251,0));
  filter:blur(.4px);
}
.blob-a{width:min(52vw,760px);aspect-ratio:1.15;left:-16vw;top:-8%;transform:rotate(-14deg)}
.blob-b{width:min(46vw,660px);aspect-ratio:1;right:-14vw;top:6%;transform:rotate(18deg)}
.blob-c{width:min(38vw,520px);aspect-ratio:1.2;right:4vw;bottom:-14%;transform:rotate(-8deg);opacity:.7}
.dark .blob,.foot .blob{background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,0))}

/* dotted grid patch */
.dots{
  position:absolute;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--g300) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);
  mask-image:radial-gradient(closest-side,#000,transparent);
  opacity:.62;
}
.dark .dots,.foot .dots{background-image:radial-gradient(rgba(255,255,255,.34) 1px,transparent 1px);opacity:.5}

/* hairline frame lines, the faint rules in the reference backdrop */
.guides{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 94%),
                     linear-gradient(90deg,#000 0,#000 18%,transparent 38%,transparent 62%,#000 82%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 94%),
             linear-gradient(90deg,#000 0,#000 18%,transparent 38%,transparent 62%,#000 82%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.guides span{
  position:absolute;border:1px solid rgba(11,11,12,.05);border-radius:var(--r-xl);
  top:auto;width:auto;background:none;
}
.guides span:nth-child(1){
  left:2.5%;right:2.5%;top:7%;bottom:6%;border-radius:104px;
  background:linear-gradient(168deg,rgba(11,11,12,.022),rgba(11,11,12,0) 46%,rgba(11,11,12,.016));
}
/* corner panels bleeding in from the top edges, filled and barely there */
.guides span:nth-child(2){
  display:block;left:-16%;right:56%;top:-22%;bottom:44%;border-radius:120px;
  transform:rotate(-7deg);
  background:linear-gradient(140deg,rgba(11,11,12,.018),rgba(11,11,12,0) 74%);
  border-color:rgba(11,11,12,.035);
}
.guides span:nth-child(3){
  display:block;left:58%;right:-18%;top:-26%;bottom:40%;border-radius:132px;
  transform:rotate(6deg);
  background:linear-gradient(210deg,rgba(11,11,12,.017),rgba(11,11,12,0) 72%);
  border-color:rgba(11,11,12,.035);
}
.guides span:nth-child(4){
  display:block;left:24%;right:24%;top:42%;bottom:-30%;border-radius:110px;
  background:linear-gradient(180deg,rgba(11,11,12,.02),rgba(11,11,12,0) 64%);
  border-color:rgba(11,11,12,.03);
}
.guides span:nth-child(3),.guides span:nth-child(4){display:none}
.dark .guides span,.foot .guides span{border-color:rgba(255,255,255,.07)}
@media (max-width:900px){.guides span:nth-child(2),.guides span:nth-child(3),.guides span:nth-child(4){display:none}}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  font-family:var(--head);font-weight:700;font-size:13px;
  letter-spacing:.01em;
  padding:15px 24px;border-radius:var(--r-sm);
  border:1px solid var(--black);
  color:var(--white);background:var(--black);
  box-shadow:var(--shadow-s);
  transition:background-color .42s var(--e-btn),color .42s var(--e-btn),
             border-color .42s var(--e-btn),box-shadow .42s var(--e-btn);
}
.btn:hover{background:var(--g800);color:var(--white);border-color:var(--g800)}
.btn:focus-visible{outline:2px solid var(--black);outline-offset:3px}

.arw-wrap{position:relative;width:14px;height:14px;flex:none;overflow:hidden}
.arw-wrap .arw{position:absolute;inset:0;width:14px;height:14px;transition:transform .52s var(--e-btn)}
.arw-wrap .arw-2{transform:translate(-115%,115%)}
.btn:hover .arw-1,.nextl a:hover .arw-1,.bento:hover .arw-1{transform:translate(115%,-115%)}
.btn:hover .arw-2,.nextl a:hover .arw-2,.bento:hover .arw-2{transform:translate(0,0)}

.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--g300)}
.btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

.dark .btn,.foot .btn{background:var(--white);color:var(--black);border-color:var(--white);box-shadow:none}
.dark .btn:hover,.foot .btn:hover{background:var(--g200);color:var(--black);border-color:var(--g200)}
.dark .btn:focus-visible,.foot .btn:focus-visible{outline-color:var(--white)}
.dark .btn-ghost,.foot .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.32)}
.dark .btn-ghost:hover,.foot .btn-ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}

.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btns-c{justify-content:center}

.tlink{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-weight:700;font-size:12.5px;
  letter-spacing:.02em;padding-bottom:5px;
}
.tlink::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:right;transform:scaleX(1)}
.tlink:hover::after{animation:sweep .6s var(--e-io)}
@keyframes sweep{
  0%{transform:scaleX(1);transform-origin:right}
  49%{transform:scaleX(0);transform-origin:right}
  50%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}
}
.tlink .arw{width:13px;height:13px;transition:transform .45s var(--e-btn)}
.tlink:hover .arw{transform:translate(3px,-3px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(250,250,251,0);
  transition:background .5s var(--e-out),box-shadow .5s var(--e-out),height .4s var(--e-out);
}
.nav.solid{background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 1px 0 var(--line-soft);height:66px}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;max-width:var(--maxw-wide)}

.brand{display:flex;align-items:center;flex:none;z-index:2}
.brand img{height:25px;width:auto}
.brand .lg-w{display:none}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-family:var(--body);font-size:14.5px;font-weight:500;
  letter-spacing:-.008em;color:var(--g600);
  padding:9px 15px;border-radius:9px;
  transition:color .3s var(--e-out),background .3s var(--e-out);
}
.nav-links a:hover{color:var(--ink);background:var(--g100)}
.nav-links a[aria-current]{color:var(--ink);font-weight:600}

.has-menu{position:relative}
.has-menu > a{display:inline-flex;align-items:center;gap:6px}
.cav{
  width:8px;height:8px;flex:none;position:relative;top:1px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .3s var(--e-out),opacity .3s var(--e-out);opacity:.55;
}
.has-menu:hover .cav,.has-menu.open .cav,.has-menu:focus-within .cav{opacity:1;transform:rotate(-135deg) translate(-2px,-2px)}
.has-menu::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px}
.menu-panel{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(720px,88vw);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:var(--shadow-l);
  transition:opacity .28s var(--e-out),transform .28s var(--e-out),visibility .28s;
}
.has-menu:hover .menu-panel,.has-menu:focus-within .menu-panel,.has-menu.open .menu-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu-panel a{display:block;padding:13px 15px;border-radius:12px;font-size:14.5px;font-weight:600;font-family:var(--head);color:var(--ink);letter-spacing:-.015em}
.menu-panel a:hover{background:var(--g100)}
.menu-panel a small{display:block;font-family:var(--body);font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--g500);margin-top:3px;line-height:1.45}

.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
.nav-cta .btn{padding:11px 20px;font-size:12.5px}

.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex:none;z-index:2;border-radius:11px;border:1px solid var(--line);background:var(--surface)}
.burger i{display:block;position:relative;width:11px;height:2px;background:var(--ink);transition:.42s var(--e-out)}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:.42s var(--e-out)}
/* top slab carries the flat-cut rise of the mark above the o; bottom slab mirrors it */
.burger i::before{top:-6px;clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.burger i::after{top:6px;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{top:0;width:18px;transform:rotate(45deg);clip-path:none}
body.menu-open .burger i::after{top:0;width:18px;transform:rotate(-45deg);clip-path:none}

@media (max-width:1080px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
}

.drawer{
  position:fixed;inset:0;z-index:890;background:var(--black);color:var(--white);
  padding:calc(var(--nav-h) + var(--sp-3)) var(--pad) var(--sp-6);
  overflow-y:auto;clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--e-out);
}
body.menu-open .drawer{clip-path:inset(0 0 0 0)}
body.menu-open .burger{border-color:rgba(255,255,255,.24);background:transparent}
body.menu-open .burger i::before,body.menu-open .burger i::after{background:var(--white)}
body.menu-open .brand .lg-b{display:none}
body.menu-open .brand .lg-w{display:block}
.drawer nav{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.13)}
.drawer nav a{
  font-family:var(--head);font-weight:800;letter-spacing:-.032em;
  font-size:clamp(19px,4.2vw,26px);line-height:1.2;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  opacity:0;transform:translateY(24px);
}
body.menu-open .drawer nav a{animation:drawIn .66s var(--e-out) forwards}
@keyframes drawIn{to{opacity:1;transform:none}}
/* nested service links read as one level down, not eleven equal rows */
.drawer-sub{display:flex;flex-direction:column;margin:0 0 0 14px;border-left:1px solid rgba(255,255,255,.16)}
.drawer nav .drawer-sub a{
  font-family:var(--body);font-weight:500;letter-spacing:-.01em;
  font-size:14.5px;line-height:1.35;padding:9px 0 9px 16px;
  color:rgba(255,255,255,.68);border-bottom:none;
}
.drawer nav .drawer-sub a:hover{color:#fff}
.drawer nav .d-parent{border-bottom:none;padding-bottom:6px}
.drawer-sub + a{border-top:1px solid rgba(255,255,255,.13);margin-top:8px}
.drawer .drawer-foot{margin-top:var(--sp-6);display:grid;gap:10px;font-size:14px;color:rgba(255,255,255,.6)}
.drawer .drawer-foot a:hover{color:#fff}

.wipe{position:fixed;inset:0;z-index:999;background:var(--black);pointer-events:none;transform:translateY(100%)}
.wipe.out{animation:wipeOut .82s var(--e-io) forwards}
.wipe.in{animation:wipeIn .72s var(--e-io) forwards}
@keyframes wipeOut{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes wipeIn{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;z-index:990;pointer-events:none;mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .3s linear}
body.cur-live .cur{opacity:1}
.cur-dot{width:6px;height:6px;border-radius:50%;background:#fff;margin:-3px 0 0 -3px}
.cur-ring{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);margin:-17px 0 0 -17px;
  transition:width .4s var(--e-out),height .4s var(--e-out),margin .4s var(--e-out),border-color .3s;
}
body.cur-hover .cur-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:rgba(255,255,255,.85)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}.rv-d6{transition-delay:.42s}

.rt{display:block}
.rt .ln{display:block;overflow:hidden;padding:.24em 0 .26em;margin:-.24em 0 -.26em}
.rt .ln > span:not(.wd){display:inline}
.rt .wd{display:inline-block;transform:translateY(122%);transition:transform 1.05s var(--e-out)}
.rt.in .wd{transform:none}

.rv-img{overflow:hidden;position:relative}
.rv-img > img,.rv-img > .rv-img-inner{transform:scale(1.12);transition:transform 1.5s var(--e-out)}
.rv-img.in > img,.rv-img.in > .rv-img-inner{transform:scale(1)}
.rv-img::after{content:'';position:absolute;inset:0;background:var(--g150);transform:translateY(0);transition:transform 1.1s var(--e-io)}
.rv-img.in::after{transform:translateY(-101%)}
.dark .rv-img::after,.foot .rv-img::after{background:rgba(255,255,255,.9)}

@media (prefers-reduced-motion:reduce){
  .rv,.rt .wd,.rv-img>img,.rv-img>.rv-img-inner{opacity:1!important;transform:none!important}
  .rv-img::after{display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + var(--sp-6));
  padding-bottom:var(--sp-6);
}
.hero-sm{min-height:clamp(500px,62svh,700px)}
.hero .wrap{width:100%}

/* centred hero, the reference's arrangement */
.hero-c{text-align:center}
.hero-c .wrap{display:flex;flex-direction:column;align-items:center}
.hero-c h1{max-width:16ch;margin-inline:auto}
.hero-c .lede{margin-inline:auto;text-align:center;margin-top:var(--sp-4)}
.hero-c .btns{margin-top:var(--sp-5);justify-content:center}
.hero-c .badge{margin-bottom:var(--sp-5)}

.scroll-cue{
  position:absolute;left:50%;transform:translateX(-50%);bottom:var(--sp-4);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--head);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g400);
}
.scroll-cue .ln{display:block;width:1px;height:38px;background:var(--g200);position:relative;overflow:hidden}
.scroll-cue .ln::after{content:'';position:absolute;inset:0;background:var(--ink);animation:cue 2.4s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.scroll-cue .ln::after{animation:none}}
@media (max-width:760px){.scroll-cue{display:none}}

/* floating device fan under the hero, cropped by the fold */
.devices{
  position:relative;z-index:2;width:100%;
  margin-top:var(--sp-7);
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(-30px,-1.6vw,-14px);
  perspective:1800px;
}
.devices .dv{
  flex:none;width:clamp(120px,13.5vw,206px);
  transform-origin:50% 100%;
  filter:drop-shadow(0 34px 44px rgba(11,11,12,.18));
  transition:transform .8s var(--e-out),filter .5s;
}
.devices .dv img{width:100%;height:auto}
.devices .dv-1{transform:rotate(-9deg) translateY(30px) scale(.9)}
.devices .dv-2{transform:rotate(-4.5deg) translateY(12px) scale(.96)}
.devices .dv-3{transform:none;z-index:3;filter:drop-shadow(0 46px 60px rgba(11,11,12,.24))}
.devices .dv-4{transform:rotate(4.5deg) translateY(12px) scale(.96)}
.devices .dv-5{transform:rotate(9deg) translateY(30px) scale(.9)}
.devices:hover .dv-1{transform:rotate(-11deg) translateY(24px) scale(.92)}
.devices:hover .dv-5{transform:rotate(11deg) translateY(24px) scale(.92)}
.devices:hover .dv-3{transform:translateY(-8px)}
@media (max-width:820px){
  .devices .dv-1,.devices .dv-5{display:none}
  .devices{gap:-10px;margin-top:var(--sp-6)}
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats .st{background:var(--surface);padding:var(--sp-4) var(--sp-3)}
.stats .st .n{font-family:var(--head);font-weight:800;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.045em;line-height:1}
.stats .st .l{font-size:12.5px;color:var(--g500);margin-top:var(--sp-1);line-height:1.45}
.dark .stats{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.dark .stats .st{background:#000}
.dark .stats .st .l{color:rgba(255,255,255,.55)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- marquees ---------- */
.marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.marq-track{display:flex;flex:none;gap:var(--sp-7);align-items:center;padding-right:var(--sp-7);animation:marq 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.marq img{height:clamp(30px,2.8vw,40px);width:auto;opacity:1}
.dark .marq img,.foot .marq img{opacity:.9}

.marq-text{border-block:1px solid var(--line);padding-block:var(--sp-3);overflow:hidden;background:var(--surface)}
.marq-text .marq-track{animation-duration:34s;gap:0;padding-right:0}
.marq-text .it{display:flex;align-items:center;gap:var(--sp-6);padding-right:var(--sp-6)}
.marq-text .it span{font-family:var(--head);font-weight:800;font-size:clamp(24px,2.8vw,44px);letter-spacing:-.038em;white-space:nowrap;line-height:1.2}
.marq-text .it svg{width:clamp(12px,1.3vw,18px);height:auto;flex:none;opacity:.26}
.dark .marq-text{border-color:rgba(255,255,255,.14);background:transparent}

/* ---------- bento capability grid ---------- */
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.bento{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--card-p);overflow:hidden;
  box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;
  transition:box-shadow .55s var(--e-out),transform .55s var(--e-out),border-color .45s;
  grid-column:span 2;
}
.bento:hover{box-shadow:var(--shadow-l);transform:translateY(-4px);border-color:var(--line)}
.bento-lg{grid-column:span 3}
.chip{
  width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--white);
  display:grid;place-items:center;flex:none;
}
.chip svg{width:19px;height:19px}

.bento h4{margin-bottom:var(--sp-1)}
.bento p{font-size:14.5px;line-height:1.62;color:var(--g500);margin:0}
.bento .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.bento .tags span{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--head);font-weight:700;color:var(--g500);
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;
}
.bento .go{
  margin-top:auto;padding-top:var(--sp-4);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.02em;
}
.bento-shot{
  margin:var(--sp-4) calc(var(--card-p) * -1) calc(var(--card-p) * -1);
  border-top:1px solid var(--line-soft);background:var(--g100);
  aspect-ratio:16/9;overflow:hidden;
}
.bento-shot img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.1s var(--e-out)}
.bento:hover .bento-shot img{transform:scale(1.04)}
@media (max-width:1000px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento,.bento-lg{grid-column:span 1}
}
@media (max-width:620px){.bento-grid{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--card-p);overflow:hidden;
  box-shadow:var(--shadow-s);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .45s;
}
.card:hover{box-shadow:var(--shadow-l);transform:translateY(-3px)}
.card h4{margin-bottom:var(--sp-1)}
.card p{font-size:14.5px;line-height:1.64;color:var(--g500)}
.card .idx{display:block;margin-bottom:var(--sp-3)}
.card-glow{position:absolute;width:320px;height:320px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(circle,rgba(11,11,12,.045),transparent 68%);transform:translate(-50%,-50%)}
.card:hover .card-glow{opacity:1}
.dark .card{background:#0e0e0f;border-color:rgba(255,255,255,.12);box-shadow:none}
.dark .card:hover{border-color:rgba(255,255,255,.28)}
.dark .card p{color:rgba(255,255,255,.58)}
.dark .card-glow{background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%)}

.card-link{margin-top:var(--sp-4);display:inline-flex}

.vcard{position:relative;padding:var(--card-p);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-s)}
.vcard .bign{
  position:absolute;right:-2px;bottom:-.2em;
  font-family:var(--head);font-weight:800;font-size:clamp(78px,7.4vw,124px);
  letter-spacing:-.06em;line-height:1;color:var(--g100);z-index:0;
  transition:transform .7s var(--e-out),color .5s;
}
.vcard:hover .bign{transform:translate(-4px,-6px);color:var(--g150)}
.vcard > *{position:relative;z-index:1}
.vcard-p{font-size:14.5px;line-height:1.64;color:var(--g500);margin-top:var(--sp-2);max-width:none}
.dark .vcard{background:#0e0e0f;border-color:rgba(255,255,255,.12);box-shadow:none}
.dark .vcard .bign{color:rgba(255,255,255,.05)}
.dark .vcard-p{color:rgba(255,255,255,.58)}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--gap-lg);align-items:start}
.proc-stick{position:sticky;top:calc(var(--nav-h) + var(--sp-4))}
.proc-stick .lede{margin-top:var(--sp-3)}
.proc-track{display:grid;gap:var(--gap)}
.proc-step{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--card-p);
  display:grid;grid-template-columns:56px 1fr;gap:var(--sp-3);align-items:start;
  box-shadow:var(--shadow-s);
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-out);
}
.proc-step.on{box-shadow:var(--shadow-m);transform:translateX(6px)}
.proc-step .pn{
  font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.04em;line-height:1;
  width:42px;height:42px;border-radius:12px;background:var(--g100);color:var(--g400);
  display:grid;place-items:center;
  transition:background .5s var(--e-out),color .5s var(--e-out);
}
.proc-step.on .pn{background:var(--black);color:var(--white)}
.proc-step h4{margin-bottom:var(--sp-1)}
.proc-step p{font-size:14.5px;color:var(--g500);max-width:52ch;line-height:1.64;margin:0}
.dark .proc-step{background:#0e0e0f;border-color:rgba(255,255,255,.12);box-shadow:none}
.dark .proc-step .pn{background:rgba(255,255,255,.09);color:rgba(255,255,255,.5)}
.dark .proc-step.on .pn{background:#fff;color:#000}
.dark .proc-step p{color:rgba(255,255,255,.58)}
@media (max-width:1000px){.proc{grid-template-columns:1fr;gap:var(--sp-6)}.proc-stick{position:static}}

/* ---------- showcase ---------- */
.shows{display:grid;gap:var(--gap);grid-template-columns:repeat(6,1fr)}
.show{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  grid-column:span 2;aspect-ratio:4/3;
  transition:box-shadow .55s var(--e-out),transform .55s var(--e-out);
}
.show:hover{box-shadow:var(--shadow-l);transform:translateY(-4px)}
.show:nth-child(1),.show:nth-child(2){grid-column:span 3;aspect-ratio:16/10}
.show:nth-child(7){grid-column:span 6;aspect-ratio:21/8}
.show img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.1s var(--e-out)}
.show:hover img{transform:scale(1.04)}
.show .cap-lbl{
  position:absolute;left:18px;bottom:18px;z-index:2;
  font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--line);
  padding:8px 13px;border-radius:999px;
  transform:translateY(10px);opacity:0;transition:.45s var(--e-out);
}
.show:hover .cap-lbl{transform:none;opacity:1}
@media (max-width:900px){
  .shows{grid-template-columns:repeat(2,1fr)}
  .show,.show:nth-child(1),.show:nth-child(2){grid-column:span 1;aspect-ratio:4/3}
  .show:nth-child(7){grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:600px){.shows{grid-template-columns:1fr}.show:nth-child(7){grid-column:span 1;aspect-ratio:4/3}}

/* ---------- app feature explorer ---------- */
.appx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:var(--gap-lg);align-items:start}
.appx-list{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start}
.appx-list button{
  font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 15px;border-radius:999px;border:1px solid var(--line);
  color:var(--g500);background:var(--surface);
  transition:.36s var(--e-out);
}
.appx-list button:hover{border-color:var(--g300);color:var(--ink)}
.appx-list button[aria-selected="true"]{background:var(--black);border-color:var(--black);color:#fff}
.appx-stage{position:relative;justify-self:center;width:min(280px,72vw);aspect-ratio:364/739;perspective:1500px}
.appx-stage .ph{
  position:absolute;inset:0;opacity:0;
  transform:rotateY(-15deg) rotateX(5deg) translateZ(-60px) scale(.94);
  transition:opacity .6s var(--e-out),transform .8s var(--e-out);
  filter:drop-shadow(0 40px 56px rgba(11,11,12,.22));
}
.appx-stage .ph.on{opacity:1;transform:rotateY(-8deg) rotateX(3deg) translateZ(0) scale(1)}
.appx-stage .ph img{width:100%;height:100%;object-fit:contain}
.appx-halo{position:absolute;left:50%;top:50%;width:126%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);pointer-events:none}
.appx-halo::after{content:'';position:absolute;inset:13%;border-radius:50%;border:1px solid var(--line-soft)}
.dark .appx-list button{background:transparent;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.64)}
.dark .appx-list button:hover{border-color:rgba(255,255,255,.55);color:#fff}
.dark .appx-list button[aria-selected="true"]{background:#fff;border-color:#fff;color:#000}
.dark .appx-halo{border-color:rgba(255,255,255,.1)}
.dark .appx-halo::after{border-color:rgba(255,255,255,.07)}
@media (max-width:1000px){.appx{grid-template-columns:1fr;gap:var(--sp-6)}.appx-stage{order:-1}}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2)}
.tm{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--g100);border:1px solid var(--line);aspect-ratio:1}
.tm img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .85s var(--e-out)}
.tm:hover img{transform:scale(1.05)}
.tm .nm{
  position:absolute;left:0;right:0;bottom:0;padding:24px 13px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.76));
  color:#fff;font-family:var(--head);font-weight:700;font-size:12.5px;
  transform:translateY(101%);transition:transform .48s var(--e-out);
}
.tm:hover .nm{transform:none}
@media (max-width:1100px){.team{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.team{grid-template-columns:repeat(3,1fr)}}

.lead-card{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:var(--gap-lg);align-items:center}
.lead-card .ph{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1/1;max-width:380px;width:100%}
.lead-card h3{margin-top:var(--sp-3)}
.lead-card blockquote{margin:0;border-left:2px solid var(--line);padding-left:20px}
.lead-card .btns{margin-top:var(--sp-5)}
.lead-card .lead-title{margin:var(--sp-2) 0 var(--sp-4)}
@media (max-width:800px){.lead-card{grid-template-columns:1fr;gap:var(--sp-6)}}

.lead-mark{
  display:grid;place-content:center;gap:var(--sp-2);justify-items:center;
  border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden;
  box-shadow:var(--shadow-m);
}
.lead-mark::before{content:'';position:absolute;inset:auto -30% -46% auto;width:78%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line)}
.lead-mark::after{content:'';position:absolute;inset:-30% auto auto -34%;width:64%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line-soft)}
.lead-initials{font-family:var(--head);font-weight:800;letter-spacing:-.06em;font-size:clamp(64px,7.4vw,110px);line-height:1;color:var(--ink);position:relative;z-index:1}
.lead-initials span{color:var(--g300)}
.lead-rule{width:48px;height:1px;background:var(--g300);position:relative;z-index:1}
.lead-role{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--g500);position:relative;z-index:1}
.lead-quote{color:var(--g700)}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.qt{
  position:relative;padding:var(--card-p);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:var(--sp-3);margin:0;
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-out);
}
.qt:hover{box-shadow:var(--shadow-l);transform:translateY(-4px)}
.qt .mk{font-family:var(--head);font-size:46px;font-weight:800;line-height:.55;color:var(--g200)}
.qt blockquote{margin:0}
.qt p{font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.6;letter-spacing:-.01em;color:var(--g800)}
.qt .st{margin-top:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--head);font-weight:700;color:var(--g400)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---------- IG grids ---------- */
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.igrid .ph{border-radius:var(--r-lg);overflow:hidden;background:var(--g100);border:1px solid var(--line);aspect-ratio:364/739;box-shadow:var(--shadow-s)}
.igrid .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.igrid .ph:hover img{transform:scale(1.04)}
@media (max-width:700px){.igrid{grid-template-columns:repeat(2,1fr)}}

.strip{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-2);scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .ph{flex:none;width:clamp(148px,16vw,212px);aspect-ratio:364/739;border-radius:var(--r-md);overflow:hidden;background:var(--g100);border:1px solid var(--line);scroll-snap-align:start;box-shadow:var(--shadow-s)}
.strip .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-out)}
.strip .ph:hover img{transform:scale(1.04)}
.dark .strip .ph,.dark .igrid .ph{border-color:rgba(255,255,255,.12);background:#111}

/* ---------- feature list ---------- */
.flist{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.flist .fi{
  padding:var(--card-p);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-s);
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-out);
}
.flist .fi:hover{box-shadow:var(--shadow-m);transform:translateY(-3px)}
.flist .fi h4{margin-bottom:var(--sp-1);display:flex;align-items:baseline;gap:11px}
.flist .fi h4 .idx{flex:none}
.flist .fi p{font-size:14.5px;color:var(--g500);line-height:1.64;max-width:44ch;margin:0}
.dark .flist .fi{background:#0e0e0f;border-color:rgba(255,255,255,.12);box-shadow:none}
.dark .flist .fi p{color:rgba(255,255,255,.58)}
@media (max-width:760px){.flist{grid-template-columns:1fr}}

/* ---------- big CTA ---------- */
.cta{position:relative;overflow:hidden}
.cta h2{font-size:clamp(34px,5.2vw,80px)}
.cta .inner{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:var(--sp-4)}
.cta .inner .eyebrow{margin-bottom:0}
.cta .lede{margin-inline:auto;text-align:center}
.cta .btns{justify-content:center;margin-top:var(--sp-2)}

/* next links */
.nextl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.nextl a{
  padding:var(--card-p);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:var(--sp-1);
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-out);
}
.nextl a:hover{box-shadow:var(--shadow-l);transform:translateY(-3px)}
.nextl a small{font-size:13.5px;color:var(--g500)}
.nextl a .arw-wrap{margin-top:var(--sp-3)}
.dark .nextl a{background:#0e0e0f;border-color:rgba(255,255,255,.12);box-shadow:none}
.dark .nextl a small{color:rgba(255,255,255,.55)}
.nextl-6{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.nextl,.nextl-6{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--sp-3)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);align-items:end}
.fld{display:flex;flex-direction:column;justify-content:flex-end}
@media (max-width:700px){.frow{grid-template-columns:1fr}}
.fld label{display:block;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--g500);margin-bottom:var(--sp-1)}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:var(--g100);border:1px solid transparent;
  padding:14px 15px;border-radius:var(--r-sm);
  transition:border-color .4s var(--e-out),background .4s var(--e-out);
}
.fld textarea{resize:vertical;min-height:132px}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;background:var(--surface);border-color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--g400)}
.form .btn{justify-self:start;margin-top:var(--sp-2)}
.form-note{font-size:13px;color:var(--g500)}

.contact-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--card-p);display:grid;gap:var(--sp-3);align-content:start;background:var(--surface);box-shadow:var(--shadow-s)}
.cline{display:flex;gap:14px;align-items:flex-start}
.cline .ic{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;flex:none}
.cline .ic svg{width:15px;height:15px}
.cline .lb{font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g500);margin-bottom:2px}
.cline .vl{font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.cline a.vl:hover{text-decoration:underline;text-underline-offset:3px}

.form-card{padding:clamp(28px,2.8vw,44px)}
.form-card h3{margin-bottom:var(--sp-5)}
.sent{display:none;text-align:center;padding:var(--sp-6) 0}
.sent.on{display:block}
.sent .tick{width:58px;height:58px;border-radius:16px;background:var(--black);color:#fff;display:grid;place-items:center;margin:0 auto var(--sp-4)}
.sent p{margin-inline:auto;margin-top:var(--sp-3)}
.sent .btns{justify-content:center;margin-top:var(--sp-5)}

/* ---------- legal ---------- */
.legal{max-width:74ch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(28px,3.4vw,64px);box-shadow:var(--shadow-s)}
.legal h3{font-size:clamp(19px,1.8vw,24px);margin:var(--sp-6) 0 var(--sp-2)}
.legal h3:first-child{margin-top:0}
.legal p{color:var(--g600);line-height:1.76;font-size:15.5px}
.legal .updated{margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:13.5px;color:var(--g500)}

/* ---------- 404 ---------- */
.big404{font-family:var(--head);font-weight:800;font-size:clamp(100px,19vw,290px);line-height:.84;letter-spacing:-.06em;color:var(--g150);user-select:none;margin-bottom:var(--sp-3)}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--white);position:relative;overflow:hidden}
.foot-top{padding-block:var(--sec-y-sm);display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--gap-lg)}
.foot .fh{font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:var(--sp-3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{font-size:14.5px;color:rgba(255,255,255,.7);transition:color .3s,padding-left .35s var(--e-out)}
.foot ul a:hover{color:#fff;padding-left:5px}
.foot .ful{gap:11px}
.foot .ful a,.foot .fmeta{display:flex;align-items:center;gap:10px}
.foot .ful a:hover{padding-left:0}
.foot .fmeta{font-size:14.5px;color:rgba(255,255,255,.7)}
.foot .ful svg{width:15px;height:15px;flex:none;color:rgba(255,255,255,.42);transition:color .3s var(--e-out),transform .3s var(--e-out)}
.foot .ful a:hover svg{color:#fff;transform:translateX(2px)}
.foot-brand img{height:28px;margin-bottom:var(--sp-3)}
.foot-brand p{font-size:14.5px;color:rgba(255,255,255,.58);max-width:38ch;line-height:1.64}
.foot-brand .btns{margin-top:var(--sp-5)}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--sp-3);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.48)}
.foot-bot a:hover{color:#fff}
@media (max-width:960px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-top{grid-template-columns:1fr;gap:var(--sp-6)}}

.to-top{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:50px;height:50px;border-radius:16px;background:var(--white);color:var(--black);border:1px solid var(--line);
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(14px);
  transition:.45s var(--e-out);box-shadow:var(--shadow-l);
}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top svg{width:15px;height:15px}
.to-top-arw{
  display:block;width:23px;height:28px;background:var(--black);
  -webkit-mask:url('/assets/up-mark.166a055281.svg') no-repeat center/contain;
  mask:url('/assets/up-mark.166a055281.svg') no-repeat center/contain;
  transition:transform .4s var(--e-out);
}
.to-top:hover .to-top-arw{transform:translateY(-3px)}

.prog{position:fixed;top:0;left:0;height:2px;background:var(--ink);z-index:950;width:0;transition:width .1s linear}

/* ---------- utilities ---------- */
.mt-s{margin-top:var(--sp-3)}
.mt-m{margin-top:var(--sp-5)}
.mt-l{margin-top:var(--sp-7)}
.center{text-align:center}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:rgba(255,255,255,.12)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.full{width:100%}
.media{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-m);background:var(--surface)}
.media img{width:100%;height:100%;object-fit:cover}
.band{aspect-ratio:21/9}
.band img{width:100%;height:100%}
.pullq{font-size:clamp(24px,3.2vw,48px);max-width:20ch;margin-inline:auto}
.cap-sub{margin-top:var(--sp-1);max-width:34ch}
@media (max-width:600px){.band{aspect-ratio:16/10}}

/* panel: a white card that holds a whole section, the reference's surface treatment */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(28px,3.4vw,64px);
  box-shadow:var(--shadow-s);
}


/* ---------- home hero: one viewport, device fan closing on the fold ---------- */
.hero-home .wrap{display:flex;flex-direction:column;align-items:center;height:100%}
.hero-home .hero-top{display:flex;flex-direction:column;align-items:center;flex:none}
.hero-home .devices{margin-top:auto}
@media (min-width:1001px) and (max-height:980px){
  .hero-home h1{font-size:clamp(38px,5vw,72px)}
  .hero-home .lede{margin-top:var(--sp-3);font-size:17px}
  .hero-home .btns{margin-top:var(--sp-4)}
  .hero-home .badge{margin-bottom:var(--sp-4)}
  .hero-home .devices .dv{width:clamp(110px,11.5vw,168px)}
}
@media (min-width:1001px) and (max-height:820px){
  .hero-home h1{font-size:clamp(34px,4.2vw,58px)}
  .hero-home .lede{font-size:16px;margin-top:var(--sp-2)}
  .hero-home .btns{margin-top:var(--sp-3)}
  .hero-home .badge{margin-bottom:var(--sp-3)}
  .hero-home .devices .dv{width:clamp(100px,9.8vw,140px)}
  .hero-home{padding-top:calc(var(--nav-h) + var(--sp-4))}
}
@media (max-width:820px){
  .hero-home .devices{margin-top:var(--sp-6)}
}


/* footer furniture stays a whisper behind the columns */
.foot .blobs{opacity:.5}
.foot .dots{opacity:.28}

/* ==========================================================================
   Animated SEM dashboard, the hero product visual
   Monochrome. Built from real markup and SVG, not a screenshot.
   ========================================================================== */
.dash{
  position:relative;z-index:2;width:min(1180px,100%);margin:var(--sp-7) auto 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);overflow:hidden;
  display:grid;grid-template-columns:206px minmax(0,1fr);
  text-align:left;
  transform:perspective(2400px) rotateX(7deg) translateY(0);
  transform-origin:50% 0;
}
.dash *{font-family:var(--body)}

/* sidebar */
.dash-side{border-right:1px solid var(--line);padding:16px 12px;background:var(--g100)}
.dash-brand{display:flex;align-items:center;gap:8px;padding:6px 8px 16px}
.dash-brand img{height:17px;width:auto}
.dash-side .grp{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--g400);padding:14px 8px 6px;font-weight:700;font-family:var(--head)}
.dash-nav{display:grid;gap:1px}
.dash-nav a{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;
  font-size:12.5px;color:var(--g600);
}
.dash-nav a svg{width:14px;height:14px;flex:none;opacity:.7}
.dash-nav a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-s)}
.dash-nav a .pill{margin-left:auto;font-size:9.5px;background:var(--g200);color:var(--g600);padding:1px 6px;border-radius:999px}

/* topbar */
.dash-main{display:flex;flex-direction:column;min-width:0}
.dash-top{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.dash-crumb{font-size:12px;color:var(--g400)}
.dash-crumb b{color:var(--ink);font-weight:600}
.dash-search{
  flex:1;max-width:300px;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:6px 9px;
  font-size:12px;color:var(--g400);background:var(--g100);
}
.dash-search svg{width:13px;height:13px}
.dash-search .kbd{margin-left:auto;font-size:9.5px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--surface)}
.dash-top .sp{flex:1}
.dash-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--g600);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--surface);
}
.dash-chip svg{width:12px;height:12px}
.dash-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--g500)}
.dash-live i{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* body */
.dash-body{padding:16px;display:grid;gap:12px}
.dash-h{display:flex;align-items:center;gap:10px}
.dash-h h5{font-family:var(--head);font-size:15px;font-weight:800;letter-spacing:-.02em;margin:0}
.dash-h .sp{flex:1}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;gap:10px;align-items:flex-start;background:var(--surface)}
.kpi .t{font-size:10.5px;color:var(--g500);letter-spacing:.02em}
.kpi .v{font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.035em;line-height:1.15;margin-top:2px}
.kpi .d{font-size:10px;color:var(--g500);margin-top:2px;display:flex;align-items:center;gap:4px}
.kpi .d b{color:var(--ink);font-weight:700}
.kpi .spark{margin-left:auto;width:74px;height:34px;flex:none}

.dash-row{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:12px}
.panel-sm{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface);min-width:0}
.legend{display:flex;gap:14px;font-size:10.5px;color:var(--g500);margin-top:2px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:8px;height:2px;border-radius:2px;background:var(--ink)}
.legend .l2 i{background:var(--g300)}

.chart{width:100%;height:158px;display:block;overflow:visible}
.chart .gridline{stroke:var(--line);stroke-width:1}
.chart .axis{font-size:8.5px;fill:var(--g400)}
.chart .ln{fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .ln1{stroke:var(--ink);stroke-width:2}
.chart .ln2{stroke:var(--g300);stroke-width:2}
.chart .area{fill:url(#dashFade)}
.chart .scrub{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.chart .pt{fill:var(--ink);stroke:#fff;stroke-width:2}

/* draw the lines on when the dashboard enters */
.chart .ln,.chart .bar,.chart .ring{opacity:0}
.dash.go .chart .ln{opacity:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.2s var(--e-out) forwards}
.dash.go .chart .ln2{animation-delay:.25s}
.dash.go .chart .area{animation:fadeIn 1.4s var(--e-out) .7s both}
.dash.go .chart .scrub,.dash.go .chart .pt,.dash.go .tipbox{animation:fadeIn .6s var(--e-out) 1.9s both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.tipbox{font-size:9.5px}
.tipbox rect{fill:var(--ink)}
.tipbox text{fill:#fff}

/* bars */
.bars{display:flex;align-items:flex-end;gap:7px;height:96px;margin-top:10px}
.bars .b{flex:1;background:var(--g200);border-radius:4px 4px 0 0;height:0;transition:height 1.1s var(--e-out)}
.bars .b.hi{background:var(--ink)}
.dash.go .bars .b{height:var(--h)}
.bar-x{display:flex;gap:7px;margin-top:6px;font-size:8.5px;color:var(--g400)}
.bar-x span{flex:1;text-align:center}

/* keyword rows */
.krow{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:11.5px}
.krow:first-of-type{border-top:0}
.krow .kw{color:var(--g700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krow .meter{margin-left:auto;width:74px;height:5px;border-radius:3px;background:var(--g150);overflow:hidden;flex:none}
.krow .meter i{display:block;height:100%;width:0;background:var(--ink);border-radius:3px;transition:width 1.3s var(--e-out)}
.dash.go .krow .meter i{width:var(--w)}
.krow .pos{font-family:var(--head);font-weight:700;font-size:11px;width:26px;text-align:right;flex:none}

/* gauge */
.gauge{position:relative;display:grid;place-items:center;padding:6px 0 2px}
.gauge svg{width:100%;max-width:190px;height:auto;overflow:visible}
.gauge .track{fill:none;stroke:var(--g150);stroke-width:13;stroke-linecap:round}
.gauge .val{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.dash.go .gauge .val{animation:gaugeDraw 1.8s var(--e-out) .5s forwards}
@keyframes gaugeDraw{to{stroke-dashoffset:var(--off)}}
.gauge .mid{position:absolute;top:56%;text-align:center}
.gauge .mid .n{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.04em;line-height:1}
.gauge .mid .l{font-size:9.5px;color:var(--g500);margin-top:1px}

@media (max-width:1000px){
  .dash{grid-template-columns:1fr;transform:none}
  .dash-side{display:none}
  .kpis{grid-template-columns:1fr}
  .dash-row{grid-template-columns:1fr}
}
@media (max-width:620px){
  .dash-search,.dash-top .dash-chip{display:none}
  .dash-body{padding:12px;gap:10px}
}


/* home hero: pull the copy in so the dashboard breaks the fold like the reference */
.hero-home h1{font-size:clamp(38px,4.8vw,68px)}
.hero-home .badge{margin-bottom:var(--sp-4)}
.hero-home .lede{margin-top:var(--sp-3);max-width:52ch}
.hero-home .btns{margin-top:var(--sp-4)}
.hero-home .dash{margin-top:var(--sp-5)}
@media (min-width:1001px) and (max-height:900px){
  .hero-home h1{font-size:clamp(34px,4vw,54px)}
  .hero-home .lede{font-size:16px;margin-top:var(--sp-2)}
  .hero-home .btns{margin-top:var(--sp-3)}
  .hero-home .badge{margin-bottom:var(--sp-3)}
  .hero-home .dash{margin-top:var(--sp-4)}
  .hero-home{padding-top:calc(var(--nav-h) + var(--sp-4))}
}

/* ==========================================================================
   What we do · service explorer
   Rows on the left, live colour imagery on the right. No dead space.
   ========================================================================== */
.svc-explorer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--gap-lg);align-items:start;
}
.svc-list{border-top:1px solid var(--line)}
.svc-row{border-bottom:1px solid var(--line)}
.svc-head{
  width:100%;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 0;text-align:left;
}
.svc-head .chip{transition:transform .5s var(--e-out)}
.svc-row.on .svc-head .chip,.svc-head:hover .chip{transform:scale(1.06)}
.svc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc-name{font-family:var(--head);font-weight:800;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.028em;line-height:1.16}
.svc-sub{font-size:13.5px;color:var(--g500);line-height:1.4}
.svc-pm{
  margin-left:auto;flex:none;position:relative;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--g300);transition:background .4s var(--e-out),border-color .4s var(--e-out);
}
.svc-pm::before,.svc-pm::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--ink);
  transform:translate(-50%,-50%);transition:.4s var(--e-out);
}
.svc-pm::before{width:9px;height:1.5px}
.svc-pm::after{width:1.5px;height:9px}
.svc-row.on .svc-pm{background:var(--ink);border-color:var(--ink)}
.svc-row.on .svc-pm::before{background:#fff}
.svc-row.on .svc-pm::after{height:0;background:#fff}

.svc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-out)}
.svc-row.on .svc-panel{grid-template-rows:1fr}
.svc-panel-in{overflow:hidden;min-height:0}
.svc-panel p{
  font-size:14.5px;line-height:1.66;color:var(--g600);max-width:52ch;
  margin:0 0 var(--sp-2);padding-left:calc(44px + var(--sp-3));
}
.svc-panel .tags{display:flex;flex-wrap:wrap;gap:6px;padding-left:calc(44px + var(--sp-3));margin-bottom:var(--sp-2)}
.svc-panel .tags span{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--head);font-weight:700;color:var(--g500);
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;
}
.svc-panel .tlink{margin-left:calc(44px + var(--sp-3));margin-bottom:var(--sp-3)}
.svc-panel .tlink .arw{width:12px;height:12px}

/* the media column mirrors the open row */
.svc-media{position:sticky;top:calc(var(--nav-h) + var(--sp-4));border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-m);
  aspect-ratio:4/3;background:var(--g100)}
.svc-shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s var(--e-out)}
.svc-shot.on{opacity:1}
.svc-shot img{width:100%;height:100%;object-fit:cover}
.svc-shot figcaption{
  position:absolute;left:16px;bottom:16px;
  font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  padding:8px 13px;border-radius:999px;backdrop-filter:blur(8px);
}
@media (max-width:1000px){
  .svc-explorer{grid-template-columns:1fr;gap:var(--sp-5)}
  .svc-media{display:none}
  .svc-panel-in{padding-bottom:var(--sp-2)}
  .svc-panel p,.svc-panel .tags,.svc-panel .tlink{padding-left:0;margin-left:0}
}

/* ---------- team: names always visible ---------- */
.team{grid-template-columns:repeat(8,1fr);gap:var(--sp-4) var(--sp-2)}
.tm{
  aspect-ratio:auto;background:transparent;border:0;border-radius:0;overflow:visible;
  display:flex;flex-direction:column;gap:10px;margin:0;
}
.tm .ph{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--g100);border:1px solid var(--line);aspect-ratio:1;
}
.tm .nm{
  position:static;transform:none;background:none;padding:0;color:var(--ink);
  font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:-.02em;line-height:1.2;display:block;
}
.tm .role{font-size:11.5px;color:var(--g500);margin-top:3px;line-height:1.3;display:block}
@media (max-width:1200px){.team{grid-template-columns:repeat(6,1fr)}}
@media (max-width:900px){.team{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.team{grid-template-columns:repeat(3,1fr)}}

/* ---------- spacing discipline ---------- */
/* one rhythm: eyebrow → heading → text → buttons */
.sec-head h2 + .lede,.sec-head-c h2 + .lede{margin-top:var(--sp-2)}
.hero .btns,.sec .btns{margin-top:var(--sp-4)}
.hero-c .btns{margin-top:var(--sp-4)}
.split > div > .btns{margin-top:var(--sp-4)}
.mt-l{margin-top:var(--sp-6)}

/* ---------- rhythm fixes: no stacked padding, no orphan white space ---------- */
.marq-block{display:grid;gap:var(--sp-4)}
.marq-block-top{margin-top:var(--sec-y-sm)}

/* the service explorer media fills its column instead of leaving a void */
.svc-media{aspect-ratio:4/5;max-height:none}
@media (min-width:1001px){
  .svc-media{aspect-ratio:auto;height:clamp(460px,58vh,660px)}
}

/* two tight sections in a row collapse into one rhythm */
.sec-tight + .sec-tight{padding-top:0}

/* consistent block rhythm inside every section */
.sec-head-c .lede{margin-top:0}
.eyebrow{margin-bottom:var(--sp-2)}
.sec-head > div > h2,.sec-head > div > h3{margin-bottom:0}
.split .lede + .body-lg{margin-top:var(--sp-2)}
.split .body-lg + .body-lg{margin-top:var(--sp-2)}

/* app explorer: CTA sits with the list so the column does not run empty */
.appx{align-items:center}
.appx-col{display:flex;flex-direction:column}
.appx-stage{width:min(252px,68vw)}
@media (max-width:1000px){
  .appx-col{align-items:center;text-align:center}
  .appx-list{justify-content:center}
  .appx-stage{width:min(240px,64vw)}
}

/* ==========================================================================
   Pass: title bars, recent work, who we are, section rhythm
   ========================================================================== */

/* ---------- 11. every inner page title bar shares one rhythm ---------- */
.hero-title{min-height:clamp(520px,66svh,760px);align-items:center}
.hero-title h1{max-width:22ch}
.hero-title .eyebrow{margin-bottom:var(--sp-3)}
.hero-title .hero-sub,
.hero-title h1 + .lede{margin-top:var(--sp-4);max-width:62ch}
.hero-title .btns{margin-top:var(--sp-5)}
.hero-title .split{align-items:center}
.hero-title .split h1{max-width:16ch}
@media (max-width:1000px){.hero-title{min-height:auto;padding-block:calc(var(--nav-h) + var(--sp-6)) var(--sp-7)}}

/* the split hero on service pages keeps the same vertical rhythm */
.hero-title .split > div > .eyebrow{margin-bottom:var(--sp-3)}

/* ---------- 10. recent work ---------- */
.shows{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.show{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--g100);border:1px solid var(--line);box-shadow:var(--shadow-s);
  aspect-ratio:4/3;display:grid;place-items:center;
  transition:box-shadow .5s var(--e-out),border-color .45s var(--e-out);
}
.show:hover{box-shadow:var(--shadow-l)}
.show{aspect-ratio:4/3}
.show-in{
  display:block;width:100%;height:100%;padding:clamp(18px,2vw,34px);
  display:grid;place-items:center;
}
.show-in img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .9s var(--e-out);
}
.show:hover .show-in img{transform:scale(1.03)}
.show figcaption{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g600);background:rgba(255,255,255,.94);border:1px solid var(--line);
  padding:7px 12px;border-radius:999px;
  opacity:0;transform:translateY(6px);transition:.4s var(--e-out);
}
.show:hover figcaption{opacity:1;transform:none}
@media (max-width:900px){.shows{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.shows{grid-template-columns:1fr}}

/* ---------- 7. who we are ---------- */
.split-top{align-items:start}
.vgrid{align-content:start;gap:var(--gap)}
.vgrid .vcard{display:flex;flex-direction:column;justify-content:flex-start}

/* ---------- 13. one padding rhythm on every section ---------- */
.sec{padding-block:var(--sec-y)}
.sec-tight{padding-block:var(--sec-y-sm)}
.sec > .wrap > .sec-head:last-child,
.sec > .wrap > .sec-head-c:last-child{margin-bottom:0}
.sec-head,.sec-head-c{margin-bottom:var(--head-gap)}
.sec .btns{margin-top:var(--sp-5)}
.sec .grid + .btns,.sec .shows + .btns,.sec .svc-explorer + .btns{margin-top:var(--sp-6)}


/* short title bars do not need a scroll cue, it collided with the buttons */
.hero-title .scroll-cue{display:none}
/* the edge dot field sits back a little further behind the copy */
.hero-title .halftone{opacity:.8}


/* the edge dot field stays clear of the copy column */
.halftone{opacity:.66}
.hero .halftone{opacity:.8}
.dark .halftone,.foot .halftone{opacity:.5}


/* the work grid is a plain three up: clear the older span rules */
.shows{grid-template-columns:repeat(3,1fr)}
.show,
.show:nth-child(1),.show:nth-child(2),.show:nth-child(7){
  grid-column:auto;aspect-ratio:4/3;
}
@media (max-width:900px){
  .shows{grid-template-columns:repeat(2,1fr)}
  .show,.show:nth-child(1),.show:nth-child(2),.show:nth-child(7){grid-column:auto}
}
@media (max-width:600px){
  .shows{grid-template-columns:1fr}
  .show,.show:nth-child(1),.show:nth-child(2),.show:nth-child(7){grid-column:auto}
}

/* ==========================================================================
   Page title banner, built to the reference layout
   ========================================================================== */
.page-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + var(--sp-6));
  padding-bottom:var(--sec-y-sm);
  background:linear-gradient(180deg,var(--g100) 0%,var(--surface) 78%);
  border-bottom:1px solid var(--line);
}
.page-hero > .wrap{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--g400);margin-bottom:var(--sp-6)}
.crumb a{transition:color .3s}
.crumb a:hover{color:var(--ink)}
.crumb span[aria-current]{color:var(--ink)}

.page-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--gap-lg);align-items:end;
}
.page-hero h1{
  font-size:clamp(38px,6.2vw,92px);
  line-height:.9;letter-spacing:-.022em;
  max-width:14ch;
}
.page-hero .eyebrow{margin-bottom:var(--sp-3)}
.page-hero-side{padding-bottom:.4em}
.page-hero-side .lede{max-width:46ch}
.page-hero-side .btns{margin-top:var(--sp-5)}

.page-hero-foot{
  margin-top:var(--sp-6);border-top:1px solid var(--line);
  padding-top:var(--sp-3);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  justify-content:space-between;align-items:baseline;
  font-size:14px;color:var(--g500);
}
.page-hero-stats{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.page-hero-stats b{font-family:var(--head);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.page-hero-loc{color:var(--g400)}

.page-hero-media{
  margin-top:var(--sp-6);border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-m);
  aspect-ratio:21/8;background:var(--g100);
}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero-sm{padding-bottom:var(--sp-7)}
.page-hero-sm .page-hero-grid{align-items:start}

@media (max-width:1000px){
  .page-hero-grid{grid-template-columns:1fr;gap:var(--sp-5);align-items:start}
  .page-hero-side{padding-bottom:0}
  .page-hero h1{max-width:none}
    .page-hero-media{aspect-ratio:16/9}
}

/* ---------- 5. shipped work slides on its own ---------- */
.rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rail-track{display:flex;gap:var(--sp-3);width:max-content;animation:railSlide 42s linear infinite}
.rail:hover .rail-track{animation-play-state:paused}
@keyframes railSlide{to{transform:translateX(-50%)}}
.rail .ph{
  flex:none;width:clamp(150px,15vw,206px);aspect-ratio:364/739;
  border-radius:var(--r-md);overflow:hidden;background:transparent;
}
.rail .ph img{width:100%;height:100%;object-fit:contain;display:block}
@media (prefers-reduced-motion:reduce){
  .rail{overflow-x:auto}
  .rail-track{animation:none}
}

/* ---------- 1. nothing clips the dashboard shadow ---------- */
.hero-home{overflow:visible}
.hero-home::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 52% at 4% 52%,rgba(11,11,12,.03),rgba(11,11,12,0) 72%),
    radial-gradient(66% 54% at 98% 40%,rgba(11,11,12,.028),rgba(11,11,12,0) 74%),
    radial-gradient(96% 56% at 50% 78%,rgba(11,11,12,.022),rgba(11,11,12,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 72%,transparent 97%);
  mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 72%,transparent 97%);
}
.hero-home .guides{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 58%,transparent 90%),
                     linear-gradient(90deg,#000 0,#000 18%,transparent 38%,transparent 62%,#000 82%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 58%,transparent 90%),
             linear-gradient(90deg,#000 0,#000 18%,transparent 38%,transparent 62%,#000 82%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.hero-home .halftone{
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 95%);
  mask-image:linear-gradient(180deg,#000 60%,transparent 95%);
}
.hero-home .dash{margin-bottom:calc(var(--sp-7) * -1)}


/* longer service titles need a wider measure so they never run past three lines */
.page-hero h1{max-width:17ch;font-size:clamp(34px,5.2vw,78px)}
.page-hero-side .lede{max-width:48ch}

/* team card: name and title */
.tm figcaption{display:block}
.tm .role{display:block}

/* ---- subtle hero background art (pure add-on) ---- */
.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* two soft tinted masses flanking the headline */
.hero-art .ha-mass{position:absolute;top:0;display:block;height:70%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 26%,#000 52%,transparent 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 26%,#000 52%,transparent 100%);}
.hero-art .ha-mass-l{left:0;width:30vw;border-radius:0 0 200px 0;
  background:linear-gradient(90deg,var(--g150) 0,var(--g150) 48%,rgba(255,255,255,0) 100%);}
.hero-art .ha-mass-r{right:0;width:30vw;border-radius:0 0 0 200px;
  background:linear-gradient(270deg,var(--g150) 0,var(--g150) 48%,rgba(255,255,255,0) 100%);}

/* two hairline rounded frames rising from behind the dashboard */
.hero-art .ha-frame{position:absolute;left:50%;transform:translateX(-50%);
  border:1px solid var(--line-soft);border-radius:32px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 90%);
          mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 90%);}
.hero-art .ha-frame-a{width:min(44vw,620px);height:300px;bottom:26%;}
.hero-art .ha-frame-b{width:min(70vw,1000px);height:280px;bottom:24%;}

/* outlined panels bleeding off the side edges */
.hero-art .ha-edge{position:absolute;border:1px solid var(--line-soft);border-radius:26px;}
.hero-art .ha-edge-l{left:-130px;top:46%;width:280px;height:340px;}
.hero-art .ha-edge-r{right:-150px;top:28%;width:290px;height:340px;}

@media (max-width:1000px){
  .hero-art .ha-frame,.hero-art .ha-edge{display:none}
  .hero-art .ha-mass{width:38vw;opacity:.7}
}

/* =====================================================================
   Dashboard motion — plays ONCE, never loops.
   `.dash.go` covers the chrome that is visible with the hero (header,
   sidebar, kpi row). `.panel-sm.pgo` covers each lower panel and is set
   the first time that panel scrolls into view, so nothing animates off
   screen and nothing repeats.
   ===================================================================== */

/* ---- chrome: fires with the hero ---- */
.dash .kpi,.dash .dash-side .grp,.dash .dash-nav a,.dash .dash-top > *{opacity:0}
.dash.go .kpi,.dash.go .dash-side .grp,.dash.go .dash-nav a,
.dash.go .dash-top > *{animation:fadeIn .6s var(--e-out) forwards}
.dash.go .dash-top > *:nth-child(1){animation-delay:.04s}
.dash.go .dash-top > *:nth-child(2){animation-delay:.09s}
.dash.go .dash-top > *:nth-child(3){animation-delay:.14s}
.dash.go .dash-side .grp{animation-delay:.06s}
.dash.go .dash-nav a{animation-delay:.12s}
.dash.go .dash-nav:nth-of-type(2) a{animation-delay:.2s}

.dash .kpi{transform:translateY(11px)}
.dash.go .kpi{animation-name:kpiIn;animation-duration:.75s}
.dash.go .kpi:nth-child(1){animation-delay:.06s}
.dash.go .kpi:nth-child(2){animation-delay:.15s}
.dash.go .kpi:nth-child(3){animation-delay:.24s}
@keyframes kpiIn{to{opacity:1;transform:none}}

.dash .kpi .v,.dash .kpi .d,.dash .dash-crumb{clip-path:inset(0 100% 0 0)}
.dash.go .kpi .v,.dash.go .kpi .d,.dash.go .dash-crumb{animation:wipeR .85s var(--e-out) forwards}
@keyframes wipeR{to{clip-path:inset(0 0 0 0)}}
.dash.go .kpi:nth-child(1) .v{animation-delay:.18s}
.dash.go .kpi:nth-child(2) .v{animation-delay:.27s}
.dash.go .kpi:nth-child(3) .v{animation-delay:.36s}
.dash.go .kpi:nth-child(1) .d{animation-delay:.30s}
.dash.go .kpi:nth-child(2) .d{animation-delay:.39s}
.dash.go .kpi:nth-child(3) .d{animation-delay:.48s}
.dash.go .dash-crumb{animation-delay:.06s}

.dash .spark{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.15);opacity:0}
.dash.go .spark{animation:riseUp 1.2s var(--e-out) .3s forwards,fadeIn .4s linear .3s forwards}
.dash .spark path{stroke-dasharray:130;stroke-dashoffset:130}
.dash.go .spark path{animation:draw 1.5s var(--e-out) .4s forwards}
@keyframes riseUp{to{transform:scaleY(1)}}

/* ---- hold every panel-internal animation until that panel is seen ----
   These override the base rules, which fire on .dash.go while the panel
   is still far below the fold. */
.dash.go .chart .ln,.dash.go .chart .ln2,.dash.go .chart .area,
.dash.go .chart .scrub,.dash.go .chart .pt,.dash.go .tipbox,
.dash.go .gauge .val{animation:none}
.dash.go .bars .b{height:0}
.dash.go .krow .meter i{width:0}

/* ---- panels: fire the first time each one is seen ---- */
.dash .dash-h,.dash .legend,.dash .krow,.dash .bar-x span,.dash .gauge .mid{opacity:0}
.dash .panel-sm.pgo .dash-h,.dash .panel-sm.pgo .legend,.dash .panel-sm.pgo .krow,
.dash .panel-sm.pgo .bar-x span,.dash .panel-sm.pgo .gauge .mid{animation:fadeIn .6s var(--e-out) forwards}
.dash .panel-sm.pgo .dash-h,.dash .panel-sm.pgo .legend{animation-delay:.1s}

.dash .krow .kw,.dash .krow .pos,.dash .gauge .mid .n,
.dash .gauge .mid .l,.dash .bar-x span{clip-path:inset(0 100% 0 0)}
.dash .panel-sm.pgo .krow .kw,.dash .panel-sm.pgo .krow .pos,
.dash .panel-sm.pgo .gauge .mid .n,.dash .panel-sm.pgo .gauge .mid .l,
.dash .panel-sm.pgo .bar-x span{animation:wipeR .85s var(--e-out) forwards}

/* chart: the data rises off the baseline while the lines draw across */
.chart .rise{transform-box:view-box;transform-origin:0px 136px;transform:scaleY(.06)}
.dash .panel-sm.pgo .chart .rise{animation:riseUp 1.6s var(--e-out) forwards}
.dash .panel-sm.pgo .chart .ln{opacity:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 2.2s var(--e-out) forwards}
.dash .panel-sm.pgo .chart .ln2{animation-delay:.25s}
.dash .panel-sm.pgo .chart .area{animation:fadeIn 1.4s var(--e-out) .7s both}
.dash .panel-sm.pgo .chart .scrub,.dash .panel-sm.pgo .tipbox{animation:fadeIn .6s var(--e-out) 1.9s both}
.dash .panel-sm.pgo .chart .pt{animation:fadeIn .6s var(--e-out) 1.9s both,ptPulse 3.2s ease-in-out 2.5s infinite}
@keyframes ptPulse{0%,100%{r:4}50%{r:5.4}}

/* gauge */
.dash .panel-sm.pgo .gauge .val{animation:gaugeDraw 1.8s var(--e-out) .5s forwards}
.dash .panel-sm.pgo .gauge .mid{animation-delay:1.15s}
.dash .panel-sm.pgo .gauge .mid .n{animation-delay:1.15s}
.dash .panel-sm.pgo .gauge .mid .l{animation-delay:1.28s}

/* keyword and channel rows */
.dash .panel-sm.pgo .krow:nth-of-type(1){animation-delay:.30s}
.dash .panel-sm.pgo .krow:nth-of-type(2){animation-delay:.40s}
.dash .panel-sm.pgo .krow:nth-of-type(3){animation-delay:.50s}
.dash .panel-sm.pgo .krow:nth-of-type(4){animation-delay:.60s}
.dash .panel-sm.pgo .krow:nth-of-type(1) .kw,.dash .panel-sm.pgo .krow:nth-of-type(1) .pos{animation-delay:.34s}
.dash .panel-sm.pgo .krow:nth-of-type(2) .kw,.dash .panel-sm.pgo .krow:nth-of-type(2) .pos{animation-delay:.44s}
.dash .panel-sm.pgo .krow:nth-of-type(3) .kw,.dash .panel-sm.pgo .krow:nth-of-type(3) .pos{animation-delay:.54s}
.dash .panel-sm.pgo .krow:nth-of-type(4) .kw,.dash .panel-sm.pgo .krow:nth-of-type(4) .pos{animation-delay:.64s}

/* Bars and meters use keyframes, not transitions: a transition cannot
   restart, and it also cannot be held back the way these need to be. */
.dash .bars .b{height:0;transition:none}
.dash .panel-sm.pgo .bars .b{animation:barGrow 1.1s var(--e-out) both}
@keyframes barGrow{from{height:0}to{height:var(--h)}}
.dash .panel-sm.pgo .bars .b:nth-child(1){animation-delay:.20s}
.dash .panel-sm.pgo .bars .b:nth-child(2){animation-delay:.28s}
.dash .panel-sm.pgo .bars .b:nth-child(3){animation-delay:.36s}
.dash .panel-sm.pgo .bars .b:nth-child(4){animation-delay:.44s}
.dash .panel-sm.pgo .bars .b:nth-child(5){animation-delay:.52s}
.dash .panel-sm.pgo .bars .b:nth-child(6){animation-delay:.60s}
.dash .panel-sm.pgo .bars .b:nth-child(7){animation-delay:.68s}
.dash .panel-sm.pgo .bars .b:nth-child(8){animation-delay:.76s}
.dash .panel-sm.pgo .bar-x span{animation-delay:.85s}

.dash .krow .meter i{width:0;transition:none}
.dash .panel-sm.pgo .krow .meter i{animation:meterFill 1.3s var(--e-out) both}
@keyframes meterFill{from{width:0}to{width:var(--w)}}
.dash .panel-sm.pgo .krow:nth-of-type(1) .meter i{animation-delay:.34s}
.dash .panel-sm.pgo .krow:nth-of-type(2) .meter i{animation-delay:.44s}
.dash .panel-sm.pgo .krow:nth-of-type(3) .meter i{animation-delay:.54s}
.dash .panel-sm.pgo .krow:nth-of-type(4) .meter i{animation-delay:.64s}

@media (prefers-reduced-motion:reduce){
  .dash .kpi,.dash .dash-side .grp,.dash .dash-nav a,.dash .dash-top > *,
  .dash .dash-h,.dash .legend,.dash .krow,.dash .bar-x span,.dash .gauge .mid{
    opacity:1!important;transform:none!important;animation:none!important}
  .dash .kpi .v,.dash .kpi .d,.dash .dash-crumb,.dash .krow .kw,.dash .krow .pos,
  .dash .gauge .mid .n,.dash .gauge .mid .l,.dash .bar-x span{
    clip-path:none!important;animation:none!important}
  .dash .chart .rise,.dash .spark{transform:none!important;opacity:1!important;animation:none!important}
  .dash .spark path{stroke-dashoffset:0!important;animation:none!important}
  .dash .bars .b{height:var(--h)!important;animation:none!important}
  .dash .krow .meter i{width:var(--w)!important;animation:none!important}
  .dash .chart .pt{animation:none!important}
}

/* =====================================================================
   Partner logos: run left to right, matching the arrow in the wordmark.
   ===================================================================== */
.marq-block .marq-track,.marq-block-top .marq-track{animation-name:marqR}
@keyframes marqR{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* =====================================================================
   What we do: hold the column height steady.
   One row is always open (see site.js), so the list no longer collapses
   by a full panel height. This equalises the panels on narrow screens,
   where the copy wraps to different line counts.
   ===================================================================== */
@media (max-width:480px){
  /* the copy wraps to different line counts, and the tag row drops to a
     second line on some services: reserve both so every panel matches */
  .svc-panel p{min-height:7.6em}
  .svc-panel .tags{min-height:64px;align-content:flex-start}
}

/* The media column was locked to aspect-ratio 4/3, which made it ~522px
   against an ~828px accordion. It now takes its height from the row and sits
   centred, a little shorter than the list. object-fit:cover on the shots
   handles the ratio. */
@media (min-width:1001px){
  /* Full height, flush with the accordion, image centred on both axes.
     The source photos are square (1400x1400), so a tall card crops the sides.
     Narrowing this column makes that WORSE, not better — the box gets further
     from square. The only levers are a wider column or a shorter card. */
  .svc-explorer{align-items:stretch}
  .svc-media{position:relative;top:auto;aspect-ratio:auto;height:100%;align-self:stretch}
  .svc-shot img{object-position:50% 50%}
}

/* =====================================================================
   The dot fields breathe as a whole, on top of the per-dot wave.
   Per-dot radius alone is too subtle to read: the dots cap at ~3px, so
   even a large percentage change is a fraction of a pixel on screen.
   ===================================================================== */
.halftone canvas{
  transform-origin:50% 50%;
  will-change:transform,opacity;
  animation:dotBreath 7.5s ease-in-out infinite;
}
@keyframes dotBreath{
  0%,100%{transform:scale(1);opacity:.8}
  50%    {transform:scale(1.045);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .halftone canvas{animation:none;opacity:1;transform:none}
}

/* ==================================================================
   Board round, 15 Sep 2026. GOM-2, 4, 7, 10, 11, 12.
   Appended so it wins over the base rules above.
   ================================================================== */

/* ---- GOM-2. Green accent. Black, white and grey still carry the page;
        green is the one accent, on action and on brand marks. ---- */
:root{
  --go:#16A34A;
  --go-tint:#6FCB8F;
  --go-shade:#0F7A38;
  --go-wash:#EAF7EF;
}
.btn{background:var(--go);border-color:var(--go);color:#fff}
.btn:hover{background:var(--go-shade);border-color:var(--go-shade);color:#fff}
.btn:focus-visible{outline-color:var(--go-shade)}
.btn-ghost{background:var(--surface);color:var(--go-shade);border-color:var(--go-tint)}
.btn-ghost:hover{background:var(--go-wash);border-color:var(--go);color:var(--go-shade)}
.eyebrow{color:var(--go-shade)}
.eyebrow::before{background:var(--go);opacity:1}
.dot{background:var(--go)}
.badge b{background:var(--go);color:#fff}
.badge .dot{background:var(--go)}
.chart .ln1{stroke:var(--go)}
.chart .ln2{stroke:var(--go-tint)}
.chart .scrub{stroke:var(--go);opacity:.55}
.bars .b{background:var(--go-tint);opacity:.42}
.bars .b.hi{background:var(--go);opacity:1}
.krow .meter i{background:var(--go)}
.spark path{stroke:var(--go)}
.gauge .val{stroke:var(--go)}
.ln::after{background:var(--go)}
.pill{background:var(--go-wash);color:var(--go-shade)}
.tags span{color:var(--go-shade);border-color:var(--go-tint)}
.svc-row.on .svc-pm{background:var(--go);border-color:var(--go)}
.svc-row.on .chip{background:var(--go);border-color:var(--go)}
.tlink{color:var(--go-shade)}
.proc-step.on .pn{background:var(--go);color:#fff;border-color:var(--go)}
/* dark sections: primary green, secondary stays an outline */
.dark .btn,.foot .btn{background:var(--go);color:#fff;border-color:var(--go)}
.dark .btn:hover,.foot .btn:hover{background:var(--go-tint);color:var(--ink);border-color:var(--go-tint)}
.dark .btn-ghost,.foot .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.dark .btn-ghost:hover,.foot .btn-ghost:hover{background:transparent;color:var(--go-tint);border-color:var(--go-tint)}
.dark .eyebrow{color:var(--go-tint)}
.dark .eyebrow::before{background:var(--go-tint)}

/* ---- GOM-4. Hero lede in two fragments.
        .lede-tail is held together so the line break lands before
        "so you can get back to...", and released once it cannot fit. ---- */
.lede-split{text-wrap:pretty}
.lede-split .lede-a,.lede-split .lede-b{display:block}
.lede-split .lede-a{margin-bottom:.34em}
/* "get back to running the business." is held together as one unit, so the
   greedy line filler cannot take part of it onto the line above. Whenever
   the sentence has to break, the break therefore lands right before
   "get back to", which is what the card asked for. Released only below the
   width where the phrase itself no longer fits on one line. */
.lede-split .lede-tail{white-space:nowrap}
@media (max-width:350px){
  .lede-split .lede-tail{white-space:normal}
}

/* ---- GOM-10. CTA band swaps from the page ground to the accent.
        .on is set from JS on pointer position, so it also fires when the
        band scrolls up under a cursor that has not moved. ---- */
.sec.cta-swap{
  background:var(--ground);
  color:var(--ink);
  transition:background-color .5s var(--e-out),color .5s var(--e-out);
}
.sec.cta-swap .lede,.sec.cta-swap .eyebrow,.sec.cta-swap h2,
.sec.cta-swap .btn,.sec.cta-swap .btn-ghost{
  transition:color .5s var(--e-out),background-color .5s var(--e-out),border-color .5s var(--e-out);
}
.sec.cta-swap.on{background:var(--go-shade);color:#fff}
.sec.cta-swap.on h2{color:#fff}
.sec.cta-swap.on .lede{color:rgba(255,255,255,.88)}
.sec.cta-swap.on .eyebrow{color:rgba(255,255,255,.72)}
.sec.cta-swap.on .eyebrow::before{background:rgba(255,255,255,.72)}
.sec.cta-swap.on .hl-soft{color:rgba(255,255,255,.52)}
.sec.cta-swap.on .btn{background:#fff;color:var(--ink);border-color:#fff}
.sec.cta-swap.on .btn:hover{background:var(--go-wash);color:var(--ink);border-color:var(--go-wash)}
.sec.cta-swap.on .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sec.cta-swap.on .btn-ghost:hover{background:#fff;color:var(--go-shade);border-color:#fff}
.sec.cta-swap.on .rule{background:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){
  .sec.cta-swap,.sec.cta-swap *{transition:none!important}
}

/* ---- GOM-11 / GOM-12. The canvas dot field is gone from the markup.
        These neutralise anything the base sheet still reserves for it. ---- */
.halftone{display:none!important}

/* ---- GOM-7. Collapsed accordion rows leaked a 16px sliver below 1001px.
        `.svc-panel` collapses with grid-template-rows:0fr, and a 0fr track
        still floors at the item's PADDING box. `min-height:0` only lets the
        content shrink, so the `padding-bottom` the narrow breakpoint added to
        .svc-panel-in sized the track and showed as a line under every closed
        row. The bottom space moves to the last child's margin, which the
        0fr track does collapse. ---- */
@media (max-width:1000px){
  .svc-panel-in{padding-bottom:0}
  .svc-panel .tlink{margin-bottom:calc(var(--sp-3) + var(--sp-2))}
}

/* ---- 16 Sep 2026. New wordmark, and the section mark becomes a plain bar.
        The new logo's macron over the o is a plain rectangle rather than the
        old half-arrow, so the eyebrow mark matches it: the arrow PNG mask is
        dropped and the element paints as a solid bar. The 26x9 box is already
        2.89:1, which is the macron's own 328:113 (2.90:1), so the proportion
        carries over without resizing. arrow-mark.png is now unused. ---- */
.eyebrow::before{
  -webkit-mask:none;
  mask:none;
  width:26px;
  height:9px;
  border-radius:0;
  background:var(--go);
  opacity:1;
}
.dark .eyebrow::before,.foot .eyebrow::before{background:var(--go-tint)}
.sec.cta-swap.on .eyebrow::before{background:rgba(255,255,255,.72)}


/* =====================================================================
   Hero polish, 23 Oct 2026
   1. Dashboard shadow. The panel is styled with a 7deg backward lean,
      but .rv.in (the reveal end state) sets transform:none and outranks
      .dash, so the lean never renders. The old --shadow-xl was built for
      a leaning panel, so under a flat one it pooled into a dark band at
      the bottom edge. Retuned to sit under a flat object. The lean stays
      off; restoring it is a visible design change, not a bug fix.
   2. Hero background. The existing art was drawn at 5-6% black, below
      the threshold on a bright screen. Same shapes, raised so they read,
      shapes removed 23 Oct at client request.
   ===================================================================== */
.dash{box-shadow:0 1px 2px rgba(11,11,12,.05), 0 28px 56px -30px rgba(11,11,12,.22)}

.hero-art .ha-mass-l{background:linear-gradient(90deg,#e4e4eb 0,#ebebf1 48%,rgba(255,255,255,0) 100%)}
.hero-art .ha-mass-r{background:linear-gradient(270deg,#e4e4eb 0,#ebebf1 48%,rgba(255,255,255,0) 100%)}
.hero-art .ha-frame,.hero-art .ha-edge{border-color:rgba(11,11,12,.12)}
.guides span{border-color:rgba(11,11,12,.10)}

/* Compact hero, 23 Oct 2026: copy left, dashboard right, stats under the
   buttons. Desktop only; tablet and phone keep the stacked hero and strip. */
.hero-stats{display:none}
@media (min-width:1241px){
 .hero.hero-home{min-height:0;padding-top:calc(var(--nav-h) + 44px);padding-bottom:var(--sp-6)}
 .hero-home .wrap{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
   gap:clamp(36px,4vw,72px);align-items:center;text-align:left}
 .hero-home .hero-top{align-items:flex-start;text-align:left}
 .hero-home h1{font-size:clamp(44px,4.1vw,70px);margin-inline:0;max-width:none}
 .hero-home .lede{text-align:left;margin-inline:0;font-size:17px;max-width:46ch;margin-top:20px}
 .hero-home .btns{justify-content:flex-start;margin-top:28px}
 .hero-home .badge{margin-bottom:22px}
 .hero-home .dash{margin:0;width:100%;grid-template-columns:minmax(0,1fr)}
 .hero-home .dash .dash-side{display:none}
 .hero-home .dash .dash-search{white-space:nowrap;flex:0 1 230px;min-width:0}
 .hero-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
   gap:0 clamp(20px,2.2vw,36px);margin-top:36px;padding-top:24px;border:0;border-top:1px solid var(--line);
   width:100%;background:none;border-radius:0;overflow:visible}
 .hero-stats .st{background:none;padding:0}
 .hero-stats .st .n{font-size:clamp(24px,2vw,32px)}
 .hero-stats .st .l{font-size:12px;margin-top:6px;max-width:11ch}
 .sec-tight > .wrap > .stats:not(.hero-stats){display:none}
 /* centred-layout decoration would cut through left-aligned copy */
 .hero-home .guides,.hero-home .hero-art .ha-frame,.hero-home .hero-art .ha-edge-l{display:none}
 .hero-home .dash .kpi{gap:8px}
 .hero-home .dash .kpi .t,.hero-home .dash .kpi .d{white-space:nowrap}
 .hero-home .dash .kpi .spark{width:56px}
}


/* =====================================================================
   Spacing + stats, 23 Oct 2026
   One section rhythm site-wide: every section pads the same --sec-y top
   and bottom, so the space between any two sections is identical.
   Stray first/last-child margins inside sections no longer add to it.
   ===================================================================== */
:root{--sec-y:clamp(56px,5.6vw,80px);--sec-y-sm:var(--sec-y)}
.sec,.sec-tight{padding-block:var(--sec-y)}
.sec-tight + .sec-tight{padding-top:var(--sec-y)}
.page-hero,.page-hero-sm{padding-bottom:var(--sec-y)}
.hero.hero-home{padding-bottom:var(--sec-y)}
.sec > .wrap > :first-child,.sec-tight > .wrap > :first-child{margin-top:0}
.sec > .wrap > :last-child,.sec-tight > .wrap > :last-child{margin-bottom:0}
.sec > .wrap > :last-child > :last-child,.sec-tight > .wrap > :last-child > :last-child{margin-bottom:0}
.marq-block-top{margin-top:var(--sec-y)}

/* stats: static numbers, equal columns, green suffix */
.stats .st .n .pl{color:var(--go)}
.dark .stats .st .n .pl{color:var(--go-tint)}
@media (min-width:1241px){
 .sec-tight > .wrap:has(> .stats:not(.hero-stats)){display:none}
 .sec-tight > .wrap:has(> .stats:not(.hero-stats)) + .marq-block-top{margin-top:0}
 .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;padding-top:26px}
 .hero-stats .st{padding:0 clamp(14px,1.4vw,24px);border-left:1px solid var(--line)}
 .hero-stats .st:first-child{padding-left:0;border-left:0}
 .hero-stats .st .n{font-size:clamp(28px,2.3vw,36px);letter-spacing:-.045em}
 .hero-stats .st .l{max-width:none;font-size:12.5px;margin-top:8px;line-height:1.4;color:var(--g500)}
}
@media (max-width:640px){
 .stats{grid-template-columns:repeat(2,1fr)}
}


/* Numbered labels removed 23 Oct 2026 (card watermarks, process badges,
   card index labels). Process steps keep their active state through the
   card itself: green edge, lift and shadow. */
.proc-step{grid-template-columns:1fr}
.proc-step.on{border-color:var(--go)}
.dark .proc-step.on{border-color:var(--go-tint)}

/* Home order 23 Oct 2026: logos moved above Who we are, text marquee
   removed. On desktop the stats live in the hero, so the strip section
   under it collapses entirely instead of leaving its padding behind. */
@media (min-width:1241px){
 .sec-tight:has(> .wrap > .stats:not(.hero-stats)){display:none}
}
.trusted .marq-block{margin-top:0}

/* How we work, timeline (23 Oct 2026). The green line draws once when the
   section enters view and each node lights as the line reaches it. One
   IntersectionObserver adds .go; everything else is CSS transitions, so
   nothing runs after it settles. */
.hw{position:relative;overflow:hidden}
.hw::before{content:'';position:absolute;left:50%;top:-30%;width:90%;height:80%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(22,163,74,.20),rgba(22,163,74,0));pointer-events:none}
.hw .wrap{position:relative}
.hw-head{text-align:center;max-width:660px;margin:0 auto clamp(48px,5vw,72px)}
.hw-head .eyebrow{justify-content:center}
.hw-head .lede{margin:20px auto 0;max-width:52ch}
.hw-line{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px)}
.hw-track{position:absolute;left:12.5%;right:12.5%;top:31px;height:2px;background:rgba(255,255,255,.14);border-radius:2px}
.hw-track i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--go),var(--go-tint));border-radius:2px;
  transition:transform 2.2s cubic-bezier(.65,0,.35,1) .2s}
.hw.go .hw-track i{transform:scaleX(1)}
.hw-step{position:relative;text-align:center;padding:0 6px}
.hw-node{position:relative;z-index:1;width:64px;height:64px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;
  background:#0d0d0e;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.55);
  box-shadow:0 0 0 8px #000;
  transition:background .5s var(--e-out),border-color .5s var(--e-out),color .5s var(--e-out),box-shadow .5s var(--e-out);
  transition-delay:calc(.2s + var(--i) * .66s)}
.hw-node svg{width:26px;height:26px}
.hw.go .hw-node{background:var(--go);border-color:var(--go);color:#fff;box-shadow:0 0 0 8px #000,0 10px 34px -6px rgba(22,163,74,.6)}
.hw-step h4{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em;margin:0 0 10px;color:#fff}
.hw-step p{margin:0 auto;max-width:28ch;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.62)}
@media (max-width:860px){
  .hw-head{text-align:left;margin-left:0}.hw-head .eyebrow{justify-content:flex-start}.hw-head .lede{margin-left:0}
  .hw-line{grid-template-columns:1fr;gap:34px}
  .hw-track{display:none}
  .hw-step:not(:last-child)::after{content:'';position:absolute;left:31px;top:64px;bottom:-34px;width:2px;
    background:var(--go);transform-origin:50% 0;transform:scaleY(0);
    transition:transform .5s var(--e-out);transition-delay:calc(.4s + var(--i) * .5s)}
  .hw.go .hw-step::after{transform:scaleY(1)}
  .hw-step{display:grid;grid-template-columns:64px 1fr;column-gap:22px;text-align:left;padding:0}
  .hw-node{grid-row:span 2;margin:0}
  .hw-step h4{margin:8px 0 6px}.hw-step p{margin:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){.hw-track i,.hw-node{transition:none}}

/* Page bands (23 Oct 2026): pale green Client stories, CTA green at rest */
.band-wash{background:var(--go-wash)}
.band-wash .qt{background:#fff}
.sec.cta-swap,.sec.cta-swap.on{background:var(--go-shade);color:#fff}
.sec.cta-swap h2{color:#fff}
.sec.cta-swap .lede{color:rgba(255,255,255,.88)}
.sec.cta-swap .eyebrow{color:rgba(255,255,255,.72)}
.sec.cta-swap .eyebrow::before{background:rgba(255,255,255,.72)}
.sec.cta-swap .hl-soft{color:rgba(255,255,255,.52)}
.sec.cta-swap .btn{background:#fff;color:var(--ink);border-color:#fff}
.sec.cta-swap .btn:hover{background:var(--go-wash);color:var(--ink);border-color:var(--go-wash)}
.sec.cta-swap .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sec.cta-swap .btn-ghost:hover{background:#fff;color:var(--go-shade);border-color:#fff}
.sec.cta-swap .rule{background:rgba(255,255,255,.28)}

/* One content width, 23 Oct 2026: header and home hero follow the same
   edge as every section below them. Hero columns rebalanced so the
   dashboard keeps its room inside the narrower width; below 1241px the
   hero stacks, since the dashboard no longer fits beside the copy. */
.nav .wrap,.wrap.wrap-wide{max-width:var(--maxw)}
@media (min-width:1241px){
 .hero-home .wrap{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,3vw,48px)}
 .hero-home h1{font-size:clamp(42px,3.9vw,56px)}
 .hero-home .dash .dash-top > *{white-space:nowrap;flex-shrink:0}
 .hero-home .dash .dash-search{flex:1 1 auto;min-width:0;overflow:hidden}
}

/* Content width, 23 Oct 2026: the content box (inside the side padding)
   is capped at exactly 1440px on every page, header and footer included. */
:root{--content:1440px;--maxw:calc(var(--content) + var(--pad) * 2);--maxw-wide:var(--maxw)}

/* GOM-15, 26 Oct 2026: page header label sits above both columns, and the
   headline and copy share a top edge instead of a bottom one. */
.page-hero > .wrap > .eyebrow{margin-bottom:var(--sp-4)}
.page-hero-grid{align-items:start}
.page-hero-side{padding-bottom:0;padding-top:.5em}

/* GOM-2, Andrew 5 Oct: "growth engine" carries the green as one phrase, and
   the headline is black and green only (no grey third line). Each line is
   now its own reveal block; the block padding only cancelled on one side
   between siblings, so every line break gained .24em. Pulled back so the
   gaps match. */
.hero-home h1 .hl-go{color:var(--go)}
.hero-home h1 .ln + .ln{margin-top:-.48em}

/* Integrations & Web Apps, 30 Oct 2026: inline link to AI for Business */
.tlink-inline{color:var(--go-shade);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tlink-inline:hover{color:var(--go)}
/* Services grid: every card's Explore link sits on the same baseline,
   whatever the length of the description above it */
a.card{display:flex;flex-direction:column}
a.card .card-link{margin-top:auto;padding-top:var(--sp-4);align-self:flex-start}