/* ============================================================
   main.css
   Shared layout + component styles used across pages
   (header, footer, buttons, cards, shared section utilities).
   Page-specific styles live in /css/pages/*.css (CLAUDE.md §8).
   ============================================================ */

/* ---------- shared type utilities ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid-grey);display:inline-flex;align-items:center;gap:var(--space-3);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--cobalt);display:inline-block}
.wrap{padding-inline:var(--page-x)}
section{padding-block:80px}
.hero,.proof,.work,.reality,.ai,.method,.insights-teaser,.closing{padding-block-start:0}

.link-arw{
  font-family:var(--mono);font-size:14px;display:inline-flex;gap:10px;align-items:center;
  border-bottom:1px solid var(--soft-grey);padding-bottom:4px;
  transition:color var(--t-state),border-color var(--t-state);
}
.link-arw:hover{color:var(--cobalt);border-color:var(--cobalt)}
.link-arw .arw{transition:transform var(--t-state)}
.link-arw:hover .arw{transform:translateX(4px)}

.tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}

/* ---------- homepage design primitives, shared site-wide ---------- */
.jt-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.jt-kicker{margin:0 0 20px;font-size:14px;font-weight:500;color:#8a8a86;letter-spacing:.01em}
.jt-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--near-black);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--t-state),border-color var(--t-state);
}
.jt-link:hover{color:var(--cobalt);border-bottom-color:var(--cobalt)}
.jt-link .arw{transition:transform var(--t-state)}
.jt-link:hover .arw{transform:translateX(4px)}
.work-all{margin-top:48px;text-align:center}
.work-all-arw{display:inline-flex;width:16px;height:16px;margin-left:16px}

/* ---------- interior page shell — the homepage visual system, off the home page ---------- */
.page{
  width:min(1180px,calc(100% - 48px));margin-inline:auto;
  padding-top:clamp(112px,16vw,184px);
  padding-bottom:clamp(96px,14vw,160px);
}
.page-hero{max-width:62rem}
.page-hero .jt-kicker,
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{
  font-size:clamp(36px,5.6vw,84px);font-weight:600;letter-spacing:-.045em;line-height:.98;
  max-width:16ch;margin:0;
}
.page-lede{
  margin-top:24px;color:#6b6b66;font-size:clamp(17px,1.6vw,20px);line-height:1.5;max-width:58ch;
}
.page-block{padding-top:56px;margin-top:56px;border-top:1px solid var(--soft-grey)}
.page-block:first-of-type{border-top:0;margin-top:40px;padding-top:0}
.page-block h2{font-size:clamp(23px,3vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:0 0 20px}
.page-block p{color:#3f3f3b;font-size:18px;line-height:1.6;max-width:64ch;margin:0 0 16px}
.page-block p:last-child{margin-bottom:0}
@media (max-width:768px){
  .page{padding-top:100px}
  .page-block{padding-top:40px;margin-top:40px}
}

/* ---------- shared closing CTA panel (matches homepage .closing-panel) ---------- */
.cs-cta{
  margin-top:clamp(72px,12vw,128px);
  background:var(--cobalt);border-radius:40px;padding:clamp(40px,6vw,72px);
  text-align:center;color:#fff;
}
.cs-cta h2{
  font-size:clamp(26px,3.6vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.04;
  max-width:20ch;margin:0 auto;color:#fff;
}
.cs-cta .btn{margin-top:32px}
.cs-cta .btn .btn-inner{background:#19171c;color:#fff}
.cs-cta .btn:hover .btn-inner{background:var(--cobalt-dark);border-color:var(--cobalt-dark)}
@media (max-width:768px){
  .cs-cta{border-radius:24px;padding:36px 22px}
}

/* ---------- buttons — Jitter pill: outer hit area, inner scales 1.05 / 0.9 ---------- */
.btn,
.btn-header,
.work-all-btn,
.foot-cta{
  display:inline-flex;align-items:center;justify-content:center;
  appearance:none;background:transparent;border:0;padding:0;
  color:#fff;
  font-family:var(--body);font-size:18px;font-weight:600;line-height:1;
  letter-spacing:-.02em;text-decoration:none;white-space:nowrap;cursor:pointer;
}
.btn-inner{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:8px 32px;border-radius:999px;
  background:#19171c;color:inherit;border:2px solid transparent;
  pointer-events:none;will-change:transform;
  transition:
    transform .3s var(--nav-overshoot, cubic-bezier(.33,1.42,.05,.96)),
    background-color .3s cubic-bezier(.25,.46,.45,.94),
    color .3s cubic-bezier(.25,.46,.45,.94),
    border-color .3s cubic-bezier(.25,.46,.45,.94);
}
.work-all-btn .btn-inner,
.btn .btn-inner,
.foot-cta .btn-inner{height:60px}
.btn .arw,
.btn-header-arw,
.work-all-arw,
.foot-cta .btn-inner > span{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:16px;width:16px;height:16px;flex-shrink:0;
}
.btn-header:hover .btn-inner,
.work-all-btn:hover .btn-inner,
.foot-cta:hover .btn-inner,
.btn:hover .btn-inner{
  transform:scale(1.05);
  background:var(--cobalt);
  color:#fff;
  border-color:var(--cobalt);
  transition-duration:.6s;
}
.btn-primary:hover .btn-inner{background:var(--cobalt-dark);border-color:var(--cobalt-dark)}
.btn-header:active .btn-inner,
.work-all-btn:active .btn-inner,
.foot-cta:active .btn-inner,
.btn:active .btn-inner{
  transform:scale(.9);
  transition:transform .1s linear;
}
.btn-primary{color:#fff}
.btn-primary .btn-inner{background:var(--cobalt)}
.btn-ghost{color:var(--near-black)}
.btn-ghost .btn-inner{background:transparent;border:2px solid var(--near-black)}
.btn-ghost:hover .btn-inner{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* ---------- header — Jitter minimize: slide-up nav, fade island, scale-in burger ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;justify-content:center;
  padding:20px;
  background:transparent;border:0;box-shadow:none;height:auto;
  max-width:100%;box-sizing:border-box;
  pointer-events:none;
  --nav-spring:cubic-bezier(.22,1.15,.36,1);
  --nav-overshoot:cubic-bezier(.33,1.42,.05,.96);
  --nav-fade:cubic-bezier(.25,.46,.45,.94);
  --work-menu-h:480px;
  transition:padding .5s var(--nav-fade);
}
.header:not(.is-ready) .header-bar,
.header:not(.is-ready) .nav-sheet,
.header:not(.is-ready) .brand,
.header:not(.is-ready) .nav,
.header:not(.is-ready) .btn-header,
.header:not(.is-ready) .btn-inner,
.header:not(.is-ready) .brand-logo,
.header:not(.is-ready) .brand-logo--menu,
.header:not(.is-ready) .menu-toggle{
  transition:none;
}
.header:not(.is-compact) .header-bar,
.header-bar{
  pointer-events:auto;
  position:relative;z-index:2;
  width:min(1260px,100%);
  max-width:1260px;
  height:100px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:27px 40px;
  background:#fff;color:#191919;
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  overflow:visible;
  transition:
    background-color .3s var(--nav-fade),
    box-shadow .5s var(--nav-fade);
}
.nav-backdrop{
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;opacity:0;
  background:rgba(0,0,0,.16);
  transition:opacity .14s cubic-bezier(.22,1,.36,1);
}
#navSheet{
  position:fixed;
  z-index:1;
  top:20px;
  left:max(20px, calc(50vw - 630px));
  right:max(20px, calc(50vw - 630px));
  width:auto;
  height:100px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  overflow:hidden;
  pointer-events:none;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:top,left,right,height,border-radius,box-shadow;
  transition:
    top .2s cubic-bezier(.22,1,.36,1),
    left .2s cubic-bezier(.22,1,.36,1),
    right .2s cubic-bezier(.22,1,.36,1),
    height .2s cubic-bezier(.22,1,.36,1),
    border-radius .2s cubic-bezier(.22,1,.36,1),
    box-shadow .16s cubic-bezier(.22,1,.36,1);
}
#navSheet.is-open{
  top:0;
  left:0;
  right:0;
  height:var(--nav-sheet-h, 620px);
  border-radius:0 0 40px 40px;
  pointer-events:auto;
  box-shadow:
    0 400px 200px rgba(0,0,0,.1),
    0 160px 160px rgba(0,0,0,.08),
    0 40px 80px rgba(0,0,0,.1);
}

@media (min-width:1025px){
  .header:not(.is-compact) .header-bar{
    background:transparent;
    box-shadow:none;
  }
  #header.has-submenu:not(.is-compact) .nav-backdrop{
    pointer-events:auto;opacity:1;
  }
  #header.has-submenu:not(.is-compact) .nav-links > ul > li:not(.is-hot) > a{
    opacity:.35;
  }
}
.header-top-mark{
  position:absolute;top:0;left:0;width:1px;height:1px;
  pointer-events:none;visibility:hidden;
}
.header:not(.is-compact) .brand,
.header:not(.is-compact) .nav{
  transform:none;
  opacity:1;
  pointer-events:auto;
}
.header:not(.is-compact) .btn-header{transform:none;font-weight:600}
.header:not(.is-compact) .btn-header-arw{opacity:1;width:16px;overflow:visible}
.header:not(.is-compact) .menu-toggle{
  transform:translateY(-50%) scale(0);
  pointer-events:none;
}
.header.is-compact .header-bar{
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  overflow:visible;
}
.header.is-compact .work-menu,
.header.is-compact .nav-backdrop,
.header.is-compact .nav-sheet{display:none !important}
.brand,.nav{
  transition:transform .8s var(--nav-overshoot),opacity .3s var(--nav-fade);
}
.header.is-compact .nav{
  transform:translateY(-8rem);
  opacity:0;
  pointer-events:none;
}
.brand{display:flex;align-items:center;line-height:0;justify-self:start;position:relative}
.brand-logo{
  display:block;height:24px;width:auto;max-width:min(168px,38vw);
  transform-origin:left center;
  transition:transform .8s var(--nav-overshoot),opacity .3s var(--nav-fade);
}
.brand-logo--menu{
  display:block;
  position:absolute;left:0;top:50%;
  height:47px;width:auto;max-width:min(328px,74vw);
  transform:translateY(-50%) scale(0);
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
  transition:transform .8s var(--nav-overshoot),opacity .3s var(--nav-fade),filter .3s var(--nav-fade);
}
.brand-logo--on-dark{filter:brightness(0) invert(1)}
.header.is-compact .brand,
.header.menu-open .brand{
  transform:none;
  opacity:1;
  pointer-events:auto;
}
.header.is-compact .brand .brand-logo:not(.brand-logo--menu),
.header.menu-open .brand .brand-logo:not(.brand-logo--menu){
  transform:translateY(-8rem);
  opacity:0;
  pointer-events:none;
}
.header.is-compact .brand .brand-logo--menu,
.header.menu-open .brand .brand-logo--menu{
  transform:translateY(-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}
.header.menu-open.is-compact .header-bar{
  background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  pointer-events:auto;
}
.header[data-sampling],
.header[data-sampling] *{pointer-events:none !important}
.header.is-on-dark.is-compact .brand-logo--menu{
  filter:brightness(0) invert(1);
}
/* Mobile menu sits under a white header bar — keep the logo dark (not inverted) */
.header.menu-open .brand-logo--menu,
.header.is-on-dark.menu-open .brand-logo--menu,
.header.is-on-dark.menu-open.is-compact .brand-logo--menu{
  filter:none;
}
.header.is-on-dark.is-compact .btn-header,
.header.is-on-dark.menu-open .btn-header{color:#19171c}
.header.is-on-dark.is-compact .btn-header .btn-inner,
.header.is-on-dark.menu-open .btn-header .btn-inner{background:#fff;border-color:#fff}
.header.is-on-dark.is-compact .btn-header:hover .btn-inner,
.header.is-on-dark.menu-open .btn-header:hover .btn-inner{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.header.is-on-dark.is-compact .menu-toggle,
.header.is-on-dark.menu-open .menu-toggle{color:#191919;background:#fff}
.header.is-on-dark.is-compact .menu-toggle:hover,
.header.is-on-dark.menu-open .menu-toggle:hover{background:var(--cobalt);color:#fff}
.nav{justify-self:center}
.nav-links{position:relative;display:flex;align-items:center}
.nav-links ul{display:flex;align-items:center;gap:2px;position:relative;z-index:1}
.nav-pill{
  position:absolute;top:50%;left:0;height:40px;width:0;
  border-radius:12px;background:rgba(0,0,0,.06);
  transform:translate(0,-50%);
  pointer-events:none;opacity:0;
  transition:transform 480ms var(--nav-spring),width 480ms var(--nav-spring),opacity 180ms ease;
}
.nav-links.is-hot .nav-pill{opacity:1}
.nav-links > ul > li > a{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  font-size:16px;font-weight:700;line-height:1;letter-spacing:0;
  padding:10px 16px;border-radius:12px;color:#191919;white-space:nowrap;
  transition:opacity .3s var(--nav-fade);
}
.nav-chev{display:none}
.nav-item--work,
.nav-item--cap{display:flex;align-items:center}

/* ---------- Work mega-menu lives inside #navSheet; sheet morphs, nav row does not ---------- */
/* Cards stay the header-bar width; only the white sheet goes full-bleed */
.work-menu{
  position:absolute;
  top:100px;
  left:50%;
  transform:translateX(-50%);
  width:min(1260px,100%);
  max-width:1260px;
  margin:0;
  padding:24px 20px 40px;
  opacity:0;
  visibility:hidden;
  overflow:visible;
  pointer-events:none;
  backface-visibility:hidden;
  transition:opacity .08s cubic-bezier(.22,1,.36,1);
}
#navSheet.is-open .work-menu.is-active,
#header.has-submenu:not(.is-compact) .work-menu.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.work-menu-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1fr) minmax(220px,.9fr);
  grid-template-rows:1fr 1fr;
  gap:16px;
  width:100%;
  height:min(42vw,420px);
  min-height:360px;
  align-items:stretch;
}
.work-menu-inner > .work-menu-card:nth-child(1){grid-column:1;grid-row:1 / 3}
.work-menu-inner > .work-menu-card:nth-child(2){grid-column:2;grid-row:1 / 3}
.work-menu-inner > .work-menu-card:nth-child(3){grid-column:3;grid-row:1}
.work-menu-inner > .work-menu-card:nth-child(4){grid-column:3;grid-row:2}
.work-menu-inner > .work-menu-side{grid-column:4;grid-row:1 / 3}
.work-menu-card{
  --ease-overshoot:cubic-bezier(.33,1.42,.05,.96);
  --ease-overshoot-linear:linear(0, .255, .4449, .6018, .7355, .8513, .9525, 1.0413, 1.1195, 1.1881, 1.2484, 1.3011, 1.3468, 1.3862, 1.4198, 1.4479, 1.4709, 1.4892, 1.503, 1.5126, 1.5182, 1.52, 1.5189, 1.5156, 1.5101, 1.5025, 1.4929, 1.4817, 1.469, 1.4552, 1.4406, 1.4254, 1.4099, 1.3943, 1.3787, 1.3633, 1.3481, 1.3333, 1.3188, 1.3048, 1.2912, 1.278, 1.2653, 1.253, 1.2412, 1.2298, 1.2188, 1.2083, 1.1981, 1.1883, 1.1789, 1.1698, 1.1611, 1.1528, 1.1447, 1.137, 1.1296, 1.1225, 1.1156, 1.1091, 1.1028, 1.0967, 1.0909, 1.0854, 1.0801, 1.075, 1.0701, 1.0654, 1.061, 1.0567, 1.0526, 1.0488, 1.0451, 1.0415, 1.0382, 1.035, 1.032, 1.0292, 1.0265, 1.0239, 1.0215, 1.0193, 1.0172, 1.0152, 1.0134, 1.0117, 1.0101, 1.0086, 1.0073, 1.0061, 1.005, 1.004, 1.0032, 1.0024, 1.0018, 1.0012, 1.0008, 1.0004, 1.0002, 1, 1);
  position:relative;
  display:block;
  min-width:0;
  min-height:0;
  height:100%;
  color:#fff;
  opacity:0;
  transform:scale(1.15);
  transform-origin:center center;
}
.work-menu.is-in .work-menu-card{
  opacity:1;
  transform:scale(1);
  transition:
    opacity 0s var(--ease-overshoot),
    transform .55s var(--ease-overshoot);
  transition-delay:calc(16ms + var(--i, 0) * 45ms);
}
@supports (transition-timing-function:linear(0, 1)){
  .work-menu.is-in .work-menu-card{
    transition:
      opacity 0s var(--ease-overshoot-linear),
      transform .55s var(--ease-overshoot-linear);
    transition-delay:calc(16ms + var(--i, 0) * 45ms);
  }
}
.work-menu-card-face{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  width:100%;height:100%;
  border-radius:20px;
  overflow:hidden;
  background:#f2f1f3;
  transition:transform .4s cubic-bezier(.22,.73,.3,1.39);
}
.work-menu-card-arrow{
  display:flex;
  position:absolute;
  right:16px;bottom:18px;
  z-index:2;
  align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  border-radius:50%;
  background:#191919;color:#fff;
}
.work-menu-card-media{display:none;min-height:0}
.work-menu-card img{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;
  pointer-events:none;
}
.work-menu-card-copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:100%;
  padding:28px;
  background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.55) 100%);
}
#workMenu .work-menu-card:nth-child(1) .work-menu-card-face,
#workMenu .work-menu-card:nth-child(2) .work-menu-card-face{
  background:#f2f1f3;
  color:#191919;
  justify-content:flex-end;
  align-items:stretch;
  padding:28px 24px 24px;
  border-radius:28px;
  overflow:hidden;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-card-face{
  background:var(--cobalt);
  color:#fff;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-card-media,
#workMenu .work-menu-card:nth-child(2) .work-menu-card-media{
  display:none;
}
#workMenu .work-menu-card-icon-wrap{
  position:absolute;
  top:38%;
  left:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:148px;
  height:148px;
  padding:20px;
  box-sizing:border-box;
  border-radius:60px;
  background:transparent;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
}
#workMenu .work-menu-card-icon-wrap .work-menu-card-icon,
#workMenu .work-menu-card--icon .work-menu-card-icon{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:auto;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0;
  padding:0;
  object-fit:contain !important;
  border-radius:0;
  background:transparent;
  transform:none !important;
  pointer-events:none;
  box-shadow:none;
  mix-blend-mode:screen;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-card-copy,
#workMenu .work-menu-card:nth-child(2) .work-menu-card-copy{
  background:none;
  padding:0 48px 0 4px;
  gap:4px;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-title,
#workMenu .work-menu-card:nth-child(2) .work-menu-title{
  order:1;
  color:#191919;
  font-size:clamp(20px,1.8vw,26px);
  max-width:16ch;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-kicker,
#workMenu .work-menu-card:nth-child(2) .work-menu-kicker{
  display:none;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-card-arrow,
#workMenu .work-menu-card:nth-child(2) .work-menu-card-arrow{
  top:auto;bottom:18px;right:16px;
}
#workMenu .work-menu-card:nth-child(1) .work-menu-title{color:#fff}
#workMenu .work-menu-card:nth-child(1) .work-menu-card-arrow{
  background:#fff;color:#191919;
}
.work-menu-card .work-menu-go{display:none}
#workMenu .work-menu-card:nth-child(3) .work-menu-card-face,
#workMenu .work-menu-card:nth-child(4) .work-menu-card-face{
  background:#f2f1f3;
  color:#191919;
}
#workMenu .work-menu-card:nth-child(3) .work-menu-card-arrow,
#workMenu .work-menu-card:nth-child(4) .work-menu-card-arrow{
  top:16px;bottom:auto;
}
#workMenu .work-menu-card:nth-child(3) .work-menu-card-media,
#workMenu .work-menu-card:nth-child(4) .work-menu-card-media,
#workMenu .work-menu-card:nth-child(3) img,
#workMenu .work-menu-card:nth-child(4) img{display:none}
#workMenu .work-menu-card:nth-child(3) .work-menu-card-copy,
#workMenu .work-menu-card:nth-child(4) .work-menu-card-copy{
  background:none;
  padding:24px 56px 24px 24px;
}
#workMenu .work-menu-card:nth-child(3) .work-menu-kicker,
#workMenu .work-menu-card:nth-child(4) .work-menu-kicker{display:none}
.work-menu-card:hover .work-menu-card-face{transform:scale(.96)}
.work-menu-kicker{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  opacity:.85;
}
.work-menu-title{
  font-family:var(--display);font-size:clamp(18px,1.7vw,22px);font-weight:700;
  letter-spacing:-.04em;line-height:1.05;
}
.work-menu-go{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:2px;
  font-size:14px;font-weight:600;letter-spacing:-.02em;
}
.work-menu-go:after{content:"→";transition:transform .3s var(--nav-fade)}
.work-menu-card:hover .work-menu-go:after{transform:translateX(4px)}
.work-menu-side{
  display:flex;flex-direction:column;justify-content:flex-start;
  height:100%;
  min-width:0;padding:8px 8px 4px 28px;
}
.work-menu-side-title{
  font-family:var(--display);
  font-size:21px;font-weight:700;letter-spacing:-.04em;
  color:#191919;margin-bottom:20px;max-width:none;
}
.work-menu-side ul{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.work-menu-side ul a{
  font-size:16px;font-weight:600;letter-spacing:-.02em;color:#191919;
  padding:0;border-radius:0;white-space:normal;
}
.work-menu-side ul a:hover{color:var(--cobalt)}
.work-menu-all{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;
  height:46px;padding:0 22px;
  border-radius:999px;
  background:#191919;color:#fff;
  font-family:var(--body);font-size:14px;font-weight:500;line-height:1;
  width:fit-content;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--t-state),color var(--t-state);
}
.work-menu-all:after{content:none}
.work-menu-all-arw{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;
  transition:transform .2s var(--ease);
}
.work-menu-all:hover{background:var(--cobalt);color:#fff}
.work-menu-all:hover .work-menu-all-arw{transform:translate(2px,-2px)}
.work-menu-text{
  opacity:0;
  transition:opacity .9s cubic-bezier(.19,1,.22,1);
}
.work-menu.is-in .work-menu-text{
  opacity:1;
  transition-delay:calc(.18s + var(--i, 0) * 45ms);
}

.cap-menu-inner{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(220px,.85fr);
  grid-template-rows:1fr;
}
.cap-menu-inner > .cap-menu-card:nth-child(1),
.cap-menu-inner > .cap-menu-card:nth-child(2),
.cap-menu-inner > .cap-menu-card:nth-child(3){
  grid-column:auto;
  grid-row:1;
}
.cap-menu-inner > .work-menu-side{grid-column:4;grid-row:1}
.cap-menu-card-face{
  justify-content:flex-end;
  align-items:stretch;
  padding:28px 24px 24px;
  border-radius:28px;
  background:#f2f1f3;
  color:#191919;
}
.cap-menu-card--dark .cap-menu-card-face{
  background:var(--cobalt);
  color:#fff;
}
.cap-menu-card--dark .cap-menu-card-mark{
  color:#fff;
}
.cap-menu-card .work-menu-card-media,
.cap-menu-card .work-menu-card-media img{display:none}
.cap-menu-card .work-menu-card-arrow{
  display:flex;
  top:auto;bottom:18px;right:16px;
}
.cap-menu-card--dark .work-menu-card-arrow{
  background:#fff;color:#191919;
}
.cap-menu-card-mark{
  position:absolute;
  top:16%;
  left:50%;
  width:42%;
  height:40%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cobalt);
  pointer-events:none;
}
.cap-menu-card:not(.cap-menu-card--dark) .cap-menu-card-mark{
  top:14%;
  width:48%;
  height:44%;
  color:#191919;
  opacity:.18;
}
.cap-menu-card-mark svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
#capMenu .cap-menu-card-icon{
  position:absolute !important;
  top:38% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2;
  display:block;
  width:148px !important;
  height:148px !important;
  max-width:none !important;
  margin:0;
  padding:20px;
  box-sizing:border-box;
  object-fit:contain;
  border-radius:60px;
  background:transparent;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cap-menu-card-copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:100%;
  padding:0 48px 0 4px;
  background:none;
}
.cap-menu-card .work-menu-title{
  color:inherit;
  font-size:clamp(20px,1.8vw,26px);
  max-width:16ch;
}

.mobile-acc-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .45s cubic-bezier(.2,.7,.2,1),
    opacity .28s cubic-bezier(.2,.6,.2,1);
}
.mobile-acc.is-open .mobile-acc-panel{
  grid-template-rows:1fr;
  opacity:1;
}
.mobile-sub{
  display:flex;flex-direction:column;gap:8px;
  margin:10px 0 6px 4px;
  overflow:hidden;min-height:0;
}
.mobile-sub a{
  font-family:var(--body) !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:#c4c0bc;
  opacity:0;
  transform:translateY(-8px);
  transition:
    opacity .32s cubic-bezier(.2,.6,.2,1),
    transform .32s cubic-bezier(.2,.6,.2,1),
    color var(--t-state);
}
.mobile-acc.is-open .mobile-sub a{
  opacity:1;
  transform:none;
}
.mobile-acc.is-open .mobile-sub li:nth-child(1) a{transition-delay:40ms}
.mobile-acc.is-open .mobile-sub li:nth-child(2) a{transition-delay:70ms}
.mobile-acc.is-open .mobile-sub li:nth-child(3) a{transition-delay:100ms}
.mobile-acc.is-open .mobile-sub li:nth-child(4) a{transition-delay:130ms}
.mobile-acc.is-open .mobile-sub li:nth-child(5) a{transition-delay:160ms}
.mobile-acc.is-open .mobile-sub li:nth-child(6) a{transition-delay:190ms}
.mobile-acc.is-open .mobile-sub li:nth-child(7) a{transition-delay:220ms}
.mobile-acc.is-open .mobile-sub li:nth-child(8) a{transition-delay:250ms}
.mobile-acc.is-open .mobile-sub li:nth-child(n+9) a{transition-delay:280ms}
.mobile-acc:not(.is-open) .mobile-sub a{transition-delay:0ms;transition-duration:.18s}
.mobile-acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:0;border:0;background:transparent;color:#fff;
  cursor:pointer;text-align:left;
  font-family:var(--display);font-size:clamp(30px,9vw,44px);font-weight:600;letter-spacing:-.02em;
}
.mobile-acc-btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.mobile-acc-btn:active{color:var(--cobalt)}
.mobile-acc-chev{
  display:grid;place-items:center;flex-shrink:0;
  width:28px;height:28px;color:rgba(255,255,255,.72);
  transition:transform .4s cubic-bezier(.34,1.3,.64,1), color .25s var(--ease);
}
.mobile-acc.is-open .mobile-acc-chev{
  transform:rotate(180deg);
  color:#fff;
}
@media (prefers-reduced-motion:reduce){
  .mobile-acc-panel,
  .mobile-sub a,
  .mobile-acc-chev{transition:none}
  .mobile-sub a{opacity:1;transform:none}
}
.nav-end{display:flex;align-items:center;justify-self:end;gap:8px;position:relative}
.btn-header{
  color:#fff;
  transition:transform .8s var(--nav-overshoot);
}
.btn-header-arw{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:16px;width:16px;height:16px;
}
.menu-toggle{
  display:flex;width:46px;height:46px;padding:0;
  position:absolute;top:50%;right:0;
  color:#fff;background:#191919;border:0;border-radius:50%;
  transform:translateY(-50%) scale(0);
  transform-origin:center;
  pointer-events:none;
  transition:transform .8s var(--nav-overshoot),background-color .16s linear;
}
.menu-toggle:hover{background:var(--cobalt)}
.menu-toggle-icon{
  position:relative;display:block;width:20px;height:14px;margin:auto;
}
.menu-toggle-burger,
.menu-toggle-close{
  position:absolute;left:50%;top:50%;
  transition:transform .45s var(--nav-overshoot),opacity .25s var(--nav-fade);
}
.menu-toggle-burger{
  width:20px;height:13px;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
  opacity:1;
}
.menu-toggle-close{
  width:14px;height:14px;
  transform:translate(-50%,-50%) scale(.4) rotate(-90deg);
  opacity:0;
}
.header.menu-open .menu-toggle-burger{
  transform:translate(-50%,-50%) scale(.4) rotate(90deg);
  opacity:0;
}
.header.menu-open .menu-toggle-close{
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
  opacity:1;
}
.header.is-compact .btn-header{transform:translateX(-56px);font-weight:600}
.header.is-compact .btn-header-arw{opacity:0;width:0;margin:0;overflow:hidden}
.header.is-compact .menu-toggle{
  transform:translateY(-50%) scale(1);
  pointer-events:auto;
}
/* mobile overlay keeps the compact chrome + X; desktop expand drops .is-compact */

/* ---------- mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--charcoal);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:96px var(--page-x) var(--space-7);
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-100%);
  transition:transform 300ms var(--ease),visibility 0s linear 300ms;
}
.mobile-menu.open{
  overflow:auto;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:transform 300ms var(--ease),visibility 0s linear 0s;
}
.mobile-links{display:flex;flex-direction:column;gap:var(--space-4)}
.mobile-links a{font-family:var(--display);font-size:clamp(30px,9vw,44px);font-weight:600;letter-spacing:-.02em}
.mobile-links a:active{color:var(--cobalt)}
.mobile-foot{font-family:var(--mono);font-size:13px;line-height:2;color:#9b9b95}
.mobile-foot a{color:var(--off-white)}
.mobile-menu .btn{width:100%;margin-top:var(--space-6)}
.mobile-menu .btn .btn-inner{width:100%}

/* ---------- reveal utility (JS toggles .in) ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- project card (shared: home + work index) ---------- */
.pcard{
  border:1px solid var(--soft-grey);border-radius:var(--radius);overflow:hidden;
  background:var(--off-white);display:flex;flex-direction:column;
  transition:border-color var(--t-state);
}
.pcard:hover{border-color:var(--near-black)}
.pcard-media{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--soft-grey)}
.pcard-media img{display:block;width:100%;height:100%;object-fit:cover}
.pcard-media .viz{position:absolute;inset:0;transition:transform .5s var(--ease)}
.pcard-media .viz svg{width:100%;height:100%}
.pcard:hover .pcard-media .viz{transform:scale(1.04)}
.pcard-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.pcard h3{font-size:clamp(22px,2.4vw,30px);transition:color var(--t-state)}
.pcard:hover h3{color:var(--cobalt)}
.pcard p{font-size:15px;color:var(--mid-grey);flex:1}
.pcard .go{font-family:var(--mono);font-size:13px;display:inline-flex;gap:8px;align-items:center;opacity:0;transform:translateY(6px);transition:opacity var(--t-state),transform var(--t-state)}
.pcard:hover .go{opacity:1;transform:none}
.pcard .go .arw{transition:transform var(--t-state)}
.pcard:hover .go .arw{transform:translateX(4px)}

/* ---------- article card (shared: home + insights index) ---------- */
.art{
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:280px;padding:36px 32px 32px;box-sizing:border-box;
  background:var(--off-white);color:var(--near-black);text-decoration:none;
  border:1px solid var(--soft-grey);border-radius:40px;
  transition:translate .4s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.art .tag{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border-radius:999px;margin-bottom:0;
  background:rgba(189,122,180,.28);color:var(--near-black);
  font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.02em;
  text-transform:none;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.art h3{
  margin:20px 0 0;flex:1;
  font-size:clamp(15px,1.4vw,22px);font-weight:700;
  line-height:1.15;letter-spacing:-.03em;
  transition:color .35s var(--ease);
}
.art-cta{
  font-size:16px;font-weight:600;color:#6B6469;
  transition:color .35s var(--ease);
}
.art-foot{
  margin-top:auto;padding-top:28px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.art-view{
  flex:0 0 43px;width:43px;height:43px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--near-black);color:#fff;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.art:hover{
  translate:0 -8px;
  background:var(--near-black);color:#fff;border-color:var(--near-black);
}
.art:hover h3,.art:hover .art-cta{color:#fff}
.art:hover .tag{background:var(--cobalt);color:#fff}
.art:hover .art-view{background:#fff;color:var(--near-black)}

/* ---------- footer — Jitter slab, rounding into the contact band ---------- */
main#main{
  position:relative;z-index:1;
  background:#fff;
  min-width:0;max-width:100%;overflow-x:clip;
}
.footer{
  position:relative;z-index:2;
  /* Fill the rounded foot-inner corners so white page bg never shows through */
  background:var(--near-black);color:#fff;padding:0;
}
.foot-inner{
  background:var(--charcoal);color:#fff;
  border-bottom-left-radius:64px;border-bottom-right-radius:64px;
  padding:96px clamp(24px,5vw,80px) 140px;
}
.foot-top{text-align:center;margin:0 auto 80px}
.foot-logo{
  display:inline-block;line-height:0;
  max-width:min(920px,92vw);
}
.foot-logo-img{
  display:block;width:100%;height:auto;
  max-height:clamp(72px,12vw,160px);
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.foot-top p{margin:24px auto 0;font-size:18px;color:#c9c9c4;max-width:36ch}
.foot-cta{
  color:#19171c;
  margin-top:28px;
}
.foot-cta .btn-inner{background:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px;max-width:1180px;margin:0 auto}
.foot-col h3,
.foot-acc-btn{
  font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 20px;color:#fff;
}
.foot-acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:0;border:0;background:transparent;text-align:left;
  font-family:inherit;cursor:default;
}
.foot-acc-btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.foot-acc-chev{
  display:none;place-items:center;flex-shrink:0;
  width:22px;height:22px;color:rgba(255,255,255,.65);
  transition:transform .4s cubic-bezier(.34,1.3,.64,1), color .25s var(--ease);
}
.foot-acc-panel{
  display:grid;
  grid-template-rows:1fr;
  opacity:1;
}
.foot-acc-panel > ul{
  display:flex;flex-direction:column;gap:2px;
  overflow:hidden;min-height:0;margin:0;padding:0;list-style:none;
}
.foot-col a{display:inline-flex;font-size:15px;line-height:1.5;padding:5px 0;color:#d4d4cf;transition:opacity .2s ease}
.foot-col a:hover{opacity:.7;color:#fff}
.foot-col a .foot-ico{flex:none;width:16px;height:16px;margin-right:8px;align-self:center}
.foot-bottom{
  max-width:1180px;margin:72px auto 0;padding-top:28px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:14px;color:#9b9b95;
}
.foot-bottom .fb-logo{display:inline-block;line-height:0}
.foot-bottom .brand-logo{height:20px;width:auto}
.foot-bottom a{color:#9b9b95}
.foot-bottom a:hover{color:#fff}
.foot-bottom .links{display:flex;gap:24px}

/* ---------- after-footer contact — sticky reveal + parallax ---------- */
.site-contact-pin{
  position:relative;z-index:0;
  height:180vh;
  /* pull the pin up over the footer, but stop 40px short so only the
     rounded lip of the footer slab shows above the contact band at rest */
  margin-top:calc(-90vh - 40px);
}
.site-contact{
  position:sticky;top:0;
  background:var(--near-black);color:#fff;
  height:100svh;min-height:100svh;
  padding:20vh clamp(24px,5vw,80px) 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.site-contact-inner{
  max-width:720px;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.site-contact-copy{will-change:transform;width:100%}
.site-contact-copy h2{
  font-size:clamp(36px,5.4vw,72px);font-weight:700;letter-spacing:-.045em;
  line-height:1.05;color:#fff;max-width:12ch;margin:0 auto;
}
.site-contact-form{margin:28px auto 0;width:100%;max-width:560px;text-align:left}
.site-contact-form > p{margin-top:10px;max-width:none}
.site-contact-fields{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
  width:100%;
}
.site-contact-fields p{margin:0;max-width:none;min-width:0}
.site-contact-form input,
.site-contact-form textarea{
  display:block;width:100%;max-width:none;min-width:0;box-sizing:border-box;
  font-family:var(--body);font-size:16px;color:#fff;
  background:var(--charcoal);border:1px solid transparent;
  border-radius:16px;padding:14px 18px;
  transition:border-color var(--t-state);
}
.site-contact-form textarea{min-height:140px;resize:vertical;border-radius:20px}
.site-contact-form input::placeholder,
.site-contact-form textarea::placeholder{color:#9b9b95}
.site-contact-form input:focus,
.site-contact-form textarea:focus{outline:none;border-color:var(--cobalt)}
.site-contact-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;height:48px;padding:0 24px;border-radius:999px;border:0;
  background:var(--cobalt);color:#fff;
  font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background var(--t-state);
}
.site-contact-btn:hover{background:var(--cobalt-dark);color:#fff}
.site-contact-btn svg{display:block}
.site-contact-success{
  margin:28px auto 0;max-width:42ch;
  font-size:18px;color:#fff;line-height:1.45;
}
.site-contact-error{margin:0 0 12px;color:#ffb4ae;font-size:14px;max-width:none}
.site-contact .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- mobile action bar ---------- */
.action-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  padding:12px var(--page-x) calc(12px + env(safe-area-inset-bottom, 0px));
  background:rgba(247,242,246,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--soft-grey);
  transform:translateY(100%);transition:transform 260ms var(--ease);
}
.action-bar.show{transform:translateY(0)}
.action-bar .btn{width:100%}
.action-bar .btn .btn-inner{width:100%;height:60px}

/* ---------- generic page header (interior pages) ---------- */
.page-hero{padding-top:160px}
.page-hero .eyebrow{margin-bottom:var(--space-5)}
.page-hero h1{font-size:clamp(38px,6vw,84px);letter-spacing:-.03em;max-width:16ch}
.page-hero .sub{margin-top:var(--space-5);color:var(--mid-grey);font-size:clamp(18px,2vw,22px);max-width:52ch}

/* ---------- content-required placeholder treatment (governance §7) ---------- */
.needs-content{font-family:var(--mono);font-size:13px;color:var(--error);background:rgba(180,50,42,.06);border:1px dashed var(--error);border-radius:var(--radius-sm);padding:2px 8px;display:inline-block}

/* ---------- responsive (shared) ---------- */
@media (min-width:1025px){
  .mobile-menu{display:none !important}
}
@media (max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .work-menu-inner{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:160px 160px auto;
    height:auto;min-height:0;
  }
  .work-menu-inner > .work-menu-card:nth-child(1){grid-column:1;grid-row:1 / 3}
  .work-menu-inner > .work-menu-card:nth-child(2){grid-column:2;grid-row:1 / 3}
  .work-menu-inner > .work-menu-card:nth-child(3){grid-column:3;grid-row:1}
  .work-menu-inner > .work-menu-card:nth-child(4){grid-column:3;grid-row:2}
  .work-menu-inner > .work-menu-side{
    grid-column:1 / -1;grid-row:3;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:12px 28px;padding:16px 0 0;
  }
  .cap-menu-inner{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:minmax(220px,28vw) auto;
  }
  .cap-menu-inner > .cap-menu-card:nth-child(1){grid-column:1;grid-row:1}
  .cap-menu-inner > .cap-menu-card:nth-child(2){grid-column:2;grid-row:1}
  .cap-menu-inner > .cap-menu-card:nth-child(3){grid-column:3;grid-row:1}
  .cap-menu-inner > .work-menu-side{grid-column:1 / -1;grid-row:2}
  .work-menu-side-title{margin:0}
  .work-menu-side ul{flex-direction:row;flex-wrap:wrap;gap:8px 24px;margin:0}
  .work-menu-all{margin:0}
}
@media (max-width:1024px){
  .nav{display:none}
  .work-menu,.nav-backdrop,.nav-sheet{display:none !important}
  .header,
  .header.has-submenu,
  .header:not(.is-compact),
  .header.is-compact{padding:0}
  .header-bar,
  .header:not(.is-compact) .header-bar,
  .header.has-submenu .header-bar{
    width:auto;
    flex:1 1 auto;
    max-width:calc(100vw - 24px);
    margin:12px;
    height:64px;
    border-radius:16px;
    padding:10px 16px;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    grid-template-columns:1fr auto;
    box-sizing:border-box;
  }
  .header:not(.is-compact) .nav-end .btn-header{display:none}
  .header .menu-toggle,
  .header:not(.is-compact) .menu-toggle,
  .header.is-compact .menu-toggle{
    position:relative;top:auto;right:auto;
    transform:none;pointer-events:auto;
    color:#191919;background:transparent;
  }
  .header.is-compact .nav-end,
  .header.is-compact .btn-header,
  .header.is-compact .menu-toggle{pointer-events:auto}
  .header.is-compact .nav-end .btn-header{display:inline-flex}
  .header.is-compact .btn-header{transform:none}
  .header.menu-open .nav-end .btn-header{display:none}
  .header.menu-open .menu-toggle,
  .header.is-on-dark.menu-open .menu-toggle{color:#fff;background:#191919}
  .header.is-on-dark .menu-toggle,
  .header.is-on-dark.is-compact .menu-toggle{color:#191919;background:#fff}
  .header.is-on-dark.menu-open .menu-toggle:hover{background:var(--cobalt);color:#fff}
  .page-hero,.contact,.cs,.studio{padding-top:100px}
}
@media (max-width:768px){
  body{font-size:17px;line-height:1.65}
  .header,
  .header:not(.is-compact),
  .header.is-compact{padding:0}
  .header-bar,
  .header:not(.is-compact) .header-bar{height:56px;padding:8px 12px;border-radius:14px;margin:10px;max-width:calc(100vw - 20px)}
  .brand-logo{height:20px;max-width:min(148px,42vw)}
  .brand-logo--menu{height:39px;max-width:min(289px,82vw)}
  .btn-header{font-size:16px}
  .btn-header .btn-inner{height:40px;padding:8px 20px}
  .menu-toggle{width:40px;height:40px}
  .mobile-menu{padding:76px var(--page-x) calc(24px + 72px);z-index:110}
  .foot-grid{grid-template-columns:1fr;gap:0}
  .foot-inner{
    border-bottom-left-radius:28px;border-bottom-right-radius:28px;
    /* Empty lip ≥ end overlap so legal links never sit in the rounded band */
    padding:64px 20px calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .foot-top{margin-bottom:48px}
  .foot-logo{max-width:min(720px,92vw)}
  .foot-logo-img{max-height:clamp(56px,14vw,96px)}
  .foot-bottom{margin-top:40px;flex-direction:column;align-items:flex-start}
  /* Footer column accordion */
  .foot-acc{
    border-top:1px solid rgba(255,255,255,.12);
  }
  .foot-acc:last-child{
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .foot-acc-btn{
    cursor:pointer;
    margin:0;
    padding:18px 0;
  }
  .foot-acc-chev{display:grid}
  .foot-acc.is-open .foot-acc-chev{
    transform:rotate(180deg);
    color:#fff;
  }
  .foot-acc-panel{
    grid-template-rows:0fr;
    opacity:0;
    transition:
      grid-template-rows .45s cubic-bezier(.2,.7,.2,1),
      opacity .28s cubic-bezier(.2,.6,.2,1);
  }
  .foot-acc.is-open .foot-acc-panel{
    grid-template-rows:1fr;
    opacity:1;
  }
  .foot-acc-panel > ul{
    padding:0 0 16px;
  }
  .foot-acc-panel a{
    opacity:0;
    transform:translateY(-6px);
    transition:
      opacity .32s cubic-bezier(.2,.6,.2,1),
      transform .32s cubic-bezier(.2,.6,.2,1),
      color var(--t-state);
  }
  .foot-acc.is-open .foot-acc-panel a{
    opacity:1;
    transform:none;
  }
  .foot-acc.is-open .foot-acc-panel li:nth-child(1) a{transition-delay:40ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(2) a{transition-delay:70ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(3) a{transition-delay:100ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(4) a{transition-delay:130ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(5) a{transition-delay:160ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(6) a{transition-delay:190ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(7) a{transition-delay:220ms}
  .foot-acc.is-open .foot-acc-panel li:nth-child(n+8) a{transition-delay:250ms}
  .foot-acc:not(.is-open) .foot-acc-panel a{
    transition-delay:0ms;transition-duration:.18s;
  }
  /*
    Keep desktop-length parallax travel (180vh). End flush with the
    contact band so no charcoal footer strip shows through the
    transparent compact header at rest.
  */
  .site-contact-pin{
    height:180vh;
    /* Slightly less than sticky travel so the footer clears fully at rest */
    margin-top:calc(-80vh + 16px);
  }
  .site-contact{
    justify-content:center;
    padding:calc(72px + env(safe-area-inset-top, 0px)) 20px calc(16px + 56px + env(safe-area-inset-bottom, 0px));
  }
  .site-contact-copy h2{font-size:clamp(32px,8.5vw,44px)}
  .site-contact-form{margin-top:18px}
  .site-contact-form textarea{min-height:100px}
  .site-contact-fields{gap:8px}
  .site-contact-form input,
  .site-contact-form textarea{padding:12px 16px}
  .site-contact-fields{grid-template-columns:1fr}
  .page-hero,.contact,.cs,.studio{padding-top:84px}
}
@media (prefers-reduced-motion:reduce){
  .nav-pill,.header-bar,.nav-sheet,.brand,.nav,.brand-logo,.brand-logo--menu,.btn-header,.btn-inner,.menu-toggle,.menu-toggle-burger,.menu-toggle-close,
  .work-menu,.work-menu-card,.work-menu-text,.work-menu-card-face{transition:none}
  .btn-header:hover .btn-inner,
  .work-all-btn:hover .btn-inner,
  .foot-cta:hover .btn-inner,
  .btn:hover .btn-inner,
  .btn-header:active .btn-inner,
  .work-all-btn:active .btn-inner,
  .foot-cta:active .btn-inner,
  .btn:active .btn-inner{transform:none}
  .work-menu-card{opacity:1;transform:none}
  .header.has-submenu .work-menu.is-in .work-menu-card{transition:none}
  .site-contact-pin{height:auto;margin-top:0}
  .site-contact{position:relative;height:auto;min-height:100svh}
  .site-contact-copy{transform:none;will-change:auto}
}
@media (prefers-reduced-motion:reduce){
  .foot-acc-panel,
  .foot-acc-chev,
  .foot-acc-panel a{transition:none !important}
  .foot-acc-panel a{opacity:1;transform:none}
}

/* CTA row and titled feature list — shared by product, capability, studio and 404 pages */
.prod-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:32px}
.prod-feats{margin:0;display:flex;flex-direction:column}
.prod-feat{padding:var(--space-5) 0;border-top:1px solid var(--soft-grey)}
.prod-feat:first-child{border-top:0;padding-top:0}
.prod-feat dt{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.prod-feat dd{margin:0;color:#3f3f3b;font-size:17px;line-height:1.6;max-width:64ch}