/* ============================================================
   GAURI SHARMA — gaurisharma.com · Phase 2 · v0.2
   Tokenized system · two themes · Cormorant Garamond + Inter
   ============================================================ */

/* ---------- SELF-HOSTED FONTS ---------- */
@font-face{font-family:"Quincy CF";src:url("../fonts/QuincyCF-CFRegular.woff2") format("woff2"),url("../fonts/QuincyCF-CFRegular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Quincy CF";src:url("../fonts/QuincyCF-RegularItalic.woff2") format("woff2"),url("../fonts/QuincyCF-RegularItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Quincy CF";src:url("../fonts/QuincyCF-Medium.woff2") format("woff2"),url("../fonts/QuincyCF-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Quincy CF";src:url("../fonts/QuincyCF-MediumItalic.woff2") format("woff2"),url("../fonts/QuincyCF-MediumItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Quincy CF";src:url("../fonts/QuincyCF-Bold.woff2") format("woff2"),url("../fonts/QuincyCF-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* spacing scale — 4px base; use these, never magic numbers */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:clamp(28px, 8vw, 140px);          /* page side padding (content edges) */
  --edge:clamp(20px, 2.2vw, 40px);           /* tight edge offset: header logo/menu + scroll bars hug the viewport edge */
  --section-y:clamp(var(--s8), 12vh, var(--s10));

  /* type scale — reduced system: 1 display · 2 titles · 2 body · 2 labels. Universally −2px. */
  --t-display:calc(clamp(42px, 12vw, 72px) - 10px);    /* fixed 62px from 600px viewport up; shrinks only below */
  --t-title-l:calc(clamp(32px, 7.67vw, 46px) - 10px);  /* fixed 36px from 600px up */
  --t-title-s:calc(clamp(22px, 4.67vw, 28px) - 10px);  /* fixed 18px from 600px up */
  --t-body-l: calc(clamp(18px, 3.67vw, 22px) - 2px);   /* fixed 20px from 600px up */
  --t-body:   15px;                        /* default body (was 17) */
  --t-label-l:13px;                        /* large label / caption */
  --t-label:  13px;                        /* small label — unified with the 13px fine print */
  /* legacy aliases → mapped onto the reduced system (keeps existing selectors working) */
  --t-hero:var(--t-display); --t-h1:var(--t-title-l); --t-h2:var(--t-title-l);
  --t-h3:var(--t-title-s);   --t-lead:var(--t-body-l); --t-small:var(--t-label-l);

  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-pill:999px;

  --font-display:"Quincy CF", Georgia, serif;          /* self-hosted serif */
  --font-body:"Plus Jakarta Sans", -apple-system, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --hover-grow:1.025;
  --hover-fade:.72;

  --head-h:96px;          /* sticky header: tall at top… */
  --head-h-min:60px;      /* …shorter once scrolled */
}

/* ---------- PALETTE · 7-role system (muted pink-gray base) ----------
   New semantic tokens + legacy aliases so older selectors keep resolving. */
:root, :root[data-theme="seaglass"]{
  --text-strong:#231d28;  --ink:#231d28;
  --text-weak:#6b6470;    --gray:#6b6470;
  --brand:#e42b59;        --accent:#e42b59;
  --brand-press:#a3173d;  --accent-deep:#a3173d;
  --ok:#1a8f57;           /* success green — checkmarks */
  --bg:#eae4e6;           --paper:#eae4e6;     /* page bg + light-on-dark (now one tone) */
  --bg-warm:#f3ede3;                            /* warm secondary surface */
  --surface:#ffffff;      --sunken:#e1dadd;     /* elevation ramp */
  --surface-dark:#231d28; --tide:#231d28;
  --on-dark:#eae4e6;      --foam:#eae4e6;       /* text on dark */
  --stroke:#dcd2d4;       --line:#dcd2d4;       /* solid hairlines (no alpha) */
  --fg:var(--ink);
}
/* ---------- THEME B · "Brand" (placeholder — awaiting Gauri's site palette + faces) ---------- */
:root[data-theme="brand"]{
  --ink:#1c1a17; --paper:#fbf8f3; --foam:#efe7da;
  --accent:#c5764a;        /* ← replace with brand primary  */
  --accent-deep:#7a4528;   /* ← replace with brand deep     */
  --tide:#241f1a;          /* ← replace with brand dark     */
  --gray:#6b6258; --line:rgba(28,26,23,.12);
  --bg:var(--paper); --fg:var(--ink);
}

*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
body{
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.6;
  background:var(--bg); color:var(--fg);
  transition:background-color .9s var(--ease), color .9s var(--ease);
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

.display{font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.eyebrow{font-size:var(--t-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brand)}
.body-l{font-size:var(--t-lead);line-height:1.65;max-width:38em;color:var(--text-weak)}   /* body sits a step lighter than the (ink) titles */
.body-l strong,.cs-body strong{color:var(--ink);font-weight:600}   /* emphasised lead-ins read darker than body */
.inl{color:inherit;border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent);transition:border-color .25s var(--ease)}   /* inline company links */
.inl:hover{border-bottom-color:currentColor}
em.precise{font-family:var(--font-body);font-style:italic;font-size:1.12em}
.rough{filter:url(#roughen)}
@media (prefers-reduced-motion:reduce){.rough{filter:none}}
/* grain lives in the entrance rules — the blur-in also writes `filter` */
body .hero h1.grainy{filter:blur(10px)}
body.loaded .hero h1.grainy{filter:url(#grain-ink)}
@media (prefers-reduced-motion:reduce){body .hero h1.grainy,body.loaded .hero h1.grainy{filter:none}}
.hl{color:var(--accent)}                          /* accent-emphasized words in headlines */
.jt-word{display:inline-block;white-space:nowrap;letter-spacing:-.035em;transform:translateZ(0)}   /* keep words intact; only letters jitter. tighter negative tracking compensates for inline-block disabling kerning so no pair looks too far apart */
/* filter must live ON each animated letter — a parent filter is dropped across composited (will-change/animated) children. This mirrors the live site (filter per span). */
.jt{display:inline-block;will-change:transform;filter:url(#roughen);animation:jitter var(--jt-dur,.4s) ease-in-out infinite;animation-delay:var(--jt-delay,0s)}
/* per-letter random x/y (±0.4px) set in JS — exactly matches the live site's Framer Motion jitter */
@keyframes jitter{0%,100%{transform:translate(0,0)}33%{transform:translate(var(--jx1,0),var(--jy1,0))}66%{transform:translate(var(--jx2,0),var(--jy2,0))}}
@media (prefers-reduced-motion:reduce){.jt{animation:none}}

/* ============================================================
   LOADER — water fills the monogram, wave carries into the site
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:1000;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform 1s var(--ease), background-color .7s var(--ease);
}
#loader.done{transform:translateY(-101%)}
body.loaded #loader{pointer-events:none}        /* never trap clicks once revealing */
#loader.bg-out{background-color:transparent}     /* dark panel dissolves, site shows through */
#loader svg{width:min(180px,38vw);overflow:visible}
#loader .loader-mark{
  transform-box:border-box;transform-origin:center;
  transition:transform .85s var(--ease), opacity .3s var(--ease);
}
#loader .loader-mark.land{opacity:0}             /* fades as the header logo crossfades in */
#loader .vessel{fill:var(--ink);opacity:.1}      /* faint empty monogram on the light panel */
#loader .water-wrap{animation:rise 2s var(--ease) forwards .2s}
#loader .water{animation:lap 1.4s linear infinite}
#loader .fill-a .water{fill:var(--ink)}          /* dual-color liquid: ink + accent, like the header logo */
#loader .fill-b .water{fill:var(--accent)}
@keyframes rise{from{transform:translateY(200px)}to{transform:translateY(0)}}
@keyframes lap{from{transform:translateX(0)}to{transform:translateX(-200px)}}
#loader .loader-word{
  margin-top:24px;font-family:var(--font-body);font-style:italic;
  font-size:15px;color:var(--gray);letter-spacing:.08em;
  opacity:0;transform:translateY(8px);          /* hidden until the display font is ready */
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
body.fonts-ready:not(.leaving) #loader .loader-word{opacity:.75;transform:none}
body.leaving #loader .loader-word{opacity:0;transform:translateY(-6px)}
/* Page wipe = the PAPER tone (not the menu's dark tide). It collapses to exactly
   the 26px logo disc, so arriving on a dark page reads as the light background
   contracting into the mark; leaving, it grows back out of it. Visibility is
   delayed on collapse so the shrink is actually seen, then it hides and the real
   disc (same colour) takes over. */
#curtain{
  position:fixed;inset:0;z-index:990;background:var(--paper);
  clip-path:circle(26px at var(--curtain-x,50%) var(--curtain-y,50%));
  transition:clip-path .6s var(--ease), visibility 0s linear .6s;
  visibility:hidden;pointer-events:none;
}
#curtain.cover{clip-path:circle(150% at var(--curtain-x,50%) var(--curtain-y,50%));
  visibility:visible;transition:clip-path .6s var(--ease), visibility 0s linear 0s}

/* ============================================================
   STICKY HEADER — tall at rest, shrinks on scroll
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:995;   /* ABOVE the page wipe (990) so the logo persists through the transition */
  height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--edge);
  transition:height .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.site-head.shrunk{
  height:var(--head-h-min);
  /* purely frosted — a 70% --bg fill read as a tinted peach band over white
     content instead of glass. Same treatment the dark header already used. */
  background:transparent;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 1px 0 var(--line);
}
/* Work page: no frost before scroll — the logo disc carries legibility on its own,
   and an always-on backdrop-filter blurs the page wipe as it passes under the header.
   The normal .shrunk frost still applies once scrolling starts. */
/* Work page keeps the dual logo — the frosted bar carries the contrast; no white swap */
body.page-work.header-dark .brand .logo-dual{display:block}
body.page-work.header-dark .brand .logo-white{display:none}
/* …plus an opaque white disc behind the mark so it never sinks into section tints */
body.page-work .brand{position:relative}
body.page-work .brand::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:55px;height:55px;border-radius:50%;background:var(--paper);   /* one control height: matches the menu button and every .btn */
}
body.page-work .brand .logo-mark{position:relative}
body.menu-is-open .site-head{background:transparent;box-shadow:none;backdrop-filter:none}
/* Header — dark-surface variant (logo + controls invert when over a dark background) */
body.header-dark .brand .logo-dual{display:none}
body.header-dark .brand .logo-white{display:block}
body.header-dark .menu-btn .bars span{background:var(--on-dark)}
body.header-dark .menu-btn:hover .bars span{background:var(--brand)}
body.header-dark .menu-btn .ring .track{stroke:rgba(234,228,230,.22)}
body.header-dark .site-head.shrunk{background:transparent;box-shadow:0 1px 0 rgba(234,228,230,.12)}   /* no gray fill — purely frosted (blur from the base .shrunk rule) */

/* logomark — PLACEHOLDER until Gauri's mark arrives (drop SVG at assets/img/logo.svg and swap) */
.brand{display:flex;align-items:center;transition:transform .3s var(--ease), opacity .4s var(--ease)}
.brand:hover{transform:scale(var(--hover-grow))}
.brand .logo-mark{height:46px;width:auto;display:block;transition:height .3s var(--ease)}
.site-head.shrunk .brand .logo-mark{height:34px}
.brand .logo-white{display:none}
body.js-flight .brand{opacity:0}                 /* hidden while the loader logo flies in */
body.brand-in .brand{opacity:1}                  /* …then crossfades in on handoff */
body.menu-is-open .brand{opacity:0;pointer-events:none}   /* hide the logo when the menu slide-out is open */

/* nav indicator (collapsed) — page label + progress ring around the burger */
.nav-indicator{display:flex;align-items:center;gap:var(--s4)}
.nav-indicator .page-label{
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gray);
  opacity:1;transition:opacity .3s var(--ease);
}
body.menu-is-open .nav-indicator .page-label{opacity:0}
.menu-btn{position:relative;width:55px;height:55px;display:grid;place-items:center}
.menu-btn .ring{position:absolute;inset:0;transform:rotate(-90deg)}
.menu-btn .ring circle{fill:none;stroke-width:2}
.menu-btn .ring .track{stroke:var(--line)}
.menu-btn .ring .prog{stroke:var(--accent);stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset .15s linear}
.menu-btn .bars{display:flex;flex-direction:column;gap:6px;align-items:center}
.menu-btn .bars span{display:block;width:20px;height:2px;background:var(--fg);transition:all .4s var(--ease)}
.menu-btn:hover .bars span{background:var(--accent)}
.menu-btn.open .bars span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-btn.open .bars span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
body.menu-is-open .menu-btn .bars span{background:var(--paper)}
body.menu-is-open .menu-btn .ring .track,
body.menu-is-open .menu-btn .ring .prog{stroke:rgba(240,227,232,.3)}

/* ============================================================
   MENU OVERLAY — full set, descoped items shown as "soon"
   ============================================================ */
#menu{
  position:fixed;inset:0;z-index:900;background:var(--tide);color:var(--paper);
  display:grid;grid-template-columns:1fr;align-items:center;padding:0 var(--gutter);
  clip-path:circle(0% at var(--menu-x,calc(100% - 70px)) var(--menu-y,48px));
  /* visibility must be delayed on CLOSE, or it snaps to hidden and the circle
     collapse is never seen. On open it flips instantly. */
  transition:clip-path .8s var(--ease), visibility 0s linear .8s;visibility:hidden;
}
#menu.open{clip-path:circle(150% at var(--menu-x,calc(100% - 70px)) var(--menu-y,48px));visibility:visible;
  transition:clip-path .8s var(--ease), visibility 0s linear 0s}
#menu nav li{list-style:none;overflow:hidden}
#menu nav a, #menu nav .soon-link{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(42px,6.6vw,86px);line-height:1.18;display:inline-flex;align-items:baseline;gap:var(--s5);
  transform:translateY(110%);transition:transform .7s var(--ease), color .3s, opacity .3s;
}
#menu.open nav a, #menu.open nav .soon-link{transform:translateY(0)}
#menu nav li:nth-child(2) a,#menu nav li:nth-child(2) .soon-link{transition-delay:.05s}
#menu nav li:nth-child(3) a,#menu nav li:nth-child(3) .soon-link{transition-delay:.1s}
#menu nav li:nth-child(4) a,#menu nav li:nth-child(4) .soon-link{transition-delay:.15s}
#menu nav li:nth-child(5) a,#menu nav li:nth-child(5) .soon-link{transition-delay:.2s}
#menu nav li:nth-child(6) a,#menu nav li:nth-child(6) .soon-link{transition-delay:.25s}
#menu nav li:nth-child(7) a,#menu nav li:nth-child(7) .soon-link{transition-delay:.3s}
#menu nav li:nth-child(8) a,#menu nav li:nth-child(8) .soon-link{transition-delay:.35s}
#menu nav a:hover,#menu nav a.active{color:var(--accent);font-style:italic}
#menu nav .idx{font-family:var(--font-body);font-size:var(--t-label-l);font-weight:600;letter-spacing:.08em;color:var(--accent);flex:0 0 auto;line-height:1;font-style:normal}
#menu nav .soon-link{opacity:.35;cursor:default}
#menu nav .soon-tag{font-family:var(--font-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(240,227,232,.4);border-radius:var(--radius-pill);padding:3px 10px;flex:0 0 auto;line-height:1;font-style:normal}
#menu .menu-aside{opacity:0;transition:opacity .6s .35s;font-size:14px;color:var(--foam);
  /* right edge lines up with the menu/close button; JS centres it on the last nav row */
  position:absolute;right:var(--edge);left:auto;bottom:var(--s7);top:auto;transform:none}
/* too narrow to sit beside the last nav row: drop below it, on the list's left edge */
#menu .menu-aside.stacked{right:auto;left:var(--gutter)}
#menu.open .menu-aside{opacity:1}
#menu .menu-aside h4{font-family:var(--font-body);font-size:var(--t-label-l);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s4)}

/* ============================================================
   SOCIAL ICONS — grow + translucency hover, no printed email
   ============================================================ */
.social-row{display:flex;gap:var(--s4)}
.social-row a{
  width:55px;height:55px;border:1px solid var(--accent);border-radius:50%;
  display:grid;place-items:center;position:relative;overflow:hidden;
  transition:transform .35s var(--ease);
}
.social-row a::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .4s var(--ease);z-index:0}   /* accent flood rises, like the outline buttons */
.social-row a svg{position:relative;z-index:1;width:18px;height:18px;fill:currentColor;transition:fill .4s var(--ease)}
.social-row a:hover{transform:scale(var(--hover-grow))}
.social-row a:hover::before{transform:translateY(0)}
.social-row a:hover svg{fill:#fff}   /* icon stays light on the accent flood, like the outline buttons */

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{min-height:100vh;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--s4);padding:calc(var(--head-h) + var(--s8)) calc(var(--gutter)*.6) calc(var(--s10) + var(--s6));position:relative}
@media(max-width:900px){.hero{flex-direction:column;text-align:center;gap:0}}
.hero-illo{width:min(580px,86vw);margin-bottom:var(--s7);transform-origin:center;animation:beat 2.6s ease-in-out infinite;overflow:visible}
/* path is fully transparent — only the moving tracer is visible */
.hero-illo .ekg-base{fill:none;stroke:var(--brand);stroke-width:2.2;opacity:0;stroke-linecap:round;stroke-linejoin:round}
.hero-illo .ekg-dot{display:none}
/* glowing comet: a trail of dots (head→tail fading) sweeps the whole path, lighting the heart as it passes */
.hero-illo .ekg-comet circle{
  fill:var(--brand);
  offset-path:path("M0,110 H120 L132,110 L140,98 L148,110 L160,110 L170,48 L182,150 L194,84 L206,110 L222,110 L228,118 L234,103 L240,110 H285 L300,124 C284,108 256,91 256,67 C256,47 276,36 291,47 C296,50 298,55 300,60 C302,55 304,50 309,47 C324,36 344,47 344,67 C344,91 317,108 300,124 L315,110 H360L366,110 L372,103 L378,118 L384,110 L394,110 L406,84 L418,150 L430,48 L442,110 L452,110 L460,98 L468,110 H540");
  offset-rotate:0deg;
  animation:comet 3.8s linear infinite;
}
/* living-ink: a gentle hand-drawn undulation on the whole traced line (echoes the roughen type + Cunliffe's organic texture) */
.hero-illo .ekg-comet{filter:url(#ink)}
/* the last few dots gather a soft wet-ink bleed, ramping into the nib */
.hero-illo .ekg-comet circle:nth-last-child(-n+6){filter:drop-shadow(0 0 1.4px color-mix(in srgb, var(--brand) 34%, transparent))}
/* the leading tip is a WET pen-nib: same fuchsia ink with a soft brand-tinted bleed into the paper — the tasteful cousin of the old neon glow — breathing gently */
.hero-illo .ekg-comet circle:last-child{fill:var(--brand);animation:comet 3.8s linear infinite, inkbleed 2.6s ease-in-out infinite}
@keyframes comet{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes inkbleed{
  0%,100%{filter:drop-shadow(0 0 2px color-mix(in srgb, var(--brand) 58%, transparent)) drop-shadow(0 0 4.5px color-mix(in srgb, var(--brand) 30%, transparent))}
  50%{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--brand) 66%, transparent)) drop-shadow(0 0 7px color-mix(in srgb, var(--brand) 34%, transparent))}
}
@keyframes beat{0%,100%{transform:scale(1)}6%{transform:scale(1.03)}12%{transform:scale(1)}20%{transform:scale(1.02)}28%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-illo{animation:none}.hero-illo .ekg-comet{display:none}.hero-illo .ekg-base{opacity:.4}}
@supports not (offset-path: path("M0 0")){.hero-illo .ekg-comet{display:none}.hero-illo .ekg-base{opacity:.4}}
.hero h1{font-size:clamp(38px,4.7vw,75px);max-width:none;color:#3b3242}   /* sized so line 1 holds on one line beside the ink stage */
@media(max-width:1200px){.hero h1{font-size:clamp(36px,4vw,64px)}}
@media(max-width:900px){.hero h1{font-size:clamp(39px,5.3vw,90px)}}
/* v3: the living-ink stage ABOVE the headline — forms and words each get their own room */
#inkwrap{position:relative;width:min(340px,30vw);height:clamp(180px,26.4vh,276px);overflow:visible;pointer-events:none;order:1;flex:none}  /* side-by-side: fixed stage so varying object widths never shift the title */
@media(max-width:900px){#inkwrap{width:100%;order:2;margin-top:-40px}}
#ink-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .45s var(--ease) .1s}
body.ink-on #ink-svg{opacity:.32}
.hero h1{position:relative;z-index:2;margin-top:0;order:2}
.hero .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%)}
@media(max-width:900px){.hero h1{order:1;max-width:none}}
/* headline enters from soft focus once the loader hands off */
.hero h1{opacity:0;filter:blur(10px);transition:opacity .55s cubic-bezier(.4,0,.2,1) .15s,filter .55s cubic-bezier(.4,0,.2,1) .15s}
body.loaded .hero h1{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.hero h1{opacity:1;filter:none;transition:none}}

.hero .thesis{margin-top:var(--s5);font-family:var(--font-body);font-size:var(--t-body-l);color:var(--text-weak);max-width:38em;line-height:1.55}
.hero .intro{margin-top:var(--s5)}
.scroll-hint{display:none;position:absolute;bottom:var(--s6);left:50%;transform:translateX(-50%);font-size:var(--t-label);letter-spacing:.25em;text-transform:uppercase;color:var(--gray)}   /* hidden — the sticky CTA dock now occupies the bottom-center */
.scroll-hint::after{content:"";display:block;width:1px;height:42px;background:var(--accent);margin:var(--s3) auto 0;animation:hintdrop 1.8s var(--ease) infinite}
@keyframes hintdrop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- home hero v3.1: a scene that builds in layers, over a centered title ----------
   The ink stage is hidden, NOT removed — ink-morph.js still drives the rotating word
   in the headline (and the round-complete flag the scroll cue waits on).
   The scene is sized by VIEWPORT HEIGHT so the title always clears the fold. */
.hero{flex-direction:column;text-align:center;gap:var(--s3);
      padding-top:calc(var(--head-h) + var(--s2));padding-bottom:clamp(96px,12vh,140px)}
#inkwrap{display:none}
.hero-stack{order:1;position:relative;height:min(57vh, calc(100vh - var(--head-h) - 428px));width:auto;aspect-ratio:1638/1494;margin-inline:auto;pointer-events:none}
.hero-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(12px) scale(.98);transition:opacity 1.1s var(--ease),transform 1.1s cubic-bezier(.22,1,.36,1)}
body.loaded .hero-stack img{opacity:1;transform:none}
body.loaded .hero-stack .hl-1{transition-delay:.55s}
body.loaded .hero-stack .hl-2{transition-delay:1.2s}
body.loaded .hero-stack .hl-3{transition-delay:1.9s}
@media(prefers-reduced-motion:reduce){.hero-stack img{transition:opacity .4s var(--ease);transform:none}}
.hero h1{order:2;text-align:center;font-size:clamp(30px,4.3vw,68px);max-width:21em;margin-inline:auto;margin-top:var(--s4)}
@media(max-width:1200px){.hero h1{font-size:clamp(30px,4vw,55px)}}
@media(max-width:900px){.hero-stack{height:clamp(220px,34vh,340px)}}

/* hero scroll cue: a conventional mouse, held back until the ink stage has run a
   full pass through its words — so it never competes on arrival, and only guides
   someone who has genuinely lingered. JS dissolves it on the first scroll. */
.hero .scroll-mouse{position:static;order:3;align-self:center;margin-top:calc(var(--s3) + 2.8vh);margin-bottom:-2.8vh;color:var(--text-weak);pointer-events:none;line-height:0}
.hero .sm-inner{display:block;opacity:0;transform:translateY(6px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.ink-round-done .hero .sm-inner{opacity:.3;transform:none}
.hero .scroll-mouse svg{width:15px;height:23px}   /* half size */
.hero .sm-wheel{animation:smwheel 1.9s cubic-bezier(.45,0,.3,1) infinite}
@keyframes smwheel{0%{transform:translateY(0);opacity:0}20%{opacity:1}65%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero .sm-wheel{animation:none}.hero .sm-inner{transition:opacity .8s var(--ease);transform:none}}
@media(max-width:900px){.hero .scroll-mouse{display:none}}

/* ---------- home trio: Vision / About / Working Theory ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.trio .cell{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
  padding:var(--s8) var(--s7) var(--s10);overflow:hidden;   /* roomy top above the label, deep bottom below the button (its lower edge tucks under the carousel wave) */
  transition:transform .45s var(--ease);
}
.trio .cell + .cell{border-left:1px solid var(--line)}
.trio .cell::before{content:"";position:absolute;inset:0;background:var(--tide);transform:translateY(101%);transition:transform .55s var(--ease)}
.trio .cell:hover::before{transform:translateY(0)}
.trio .cell:hover{transform:scale(1.0)}  /* flood is the hover; no double-grow */
.trio .cell>*{position:relative;transition:color .45s var(--ease)}
.trio .cell h2{font-size:var(--t-h2);margin:var(--s4) 0 var(--s4);min-height:2.1em}   /* reserve up to 2 title lines so bodies/buttons align */
.trio .cell p{color:var(--text-weak);max-width:26em;min-height:6.4em;margin-bottom:var(--s6)}   /* ≥4-line body; button bottom-aligns below */
.trio .cell .go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--brand);border:1.5px solid var(--brand);border-radius:var(--radius-pill);padding:9px 18px;position:relative;overflow:hidden;transition:color .4s var(--ease),transform .35s var(--ease),border-color .3s var(--ease)}
.trio .cell .go::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.trio .cell .go:hover{color:#fff;border-color:var(--accent);transform:scale(var(--hover-grow))}
.trio .cell .go:hover::before{transform:translateY(0)}
.trio .cell .go:hover .btn-arrow{transform:translateX(5px) scale(1.2)}
.trio .cell .inl{color:inherit;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.trio .cell .inl:hover{border-bottom-color:currentColor}
.trio .cell:hover h2{color:var(--paper)}
.trio .cell:hover .go:not(:hover){color:var(--on-dark);border-color:var(--on-dark)}   /* tile-flood state; the button's own hover (accent flood) takes over when hovered directly */
.trio .cell:hover p{color:var(--foam)}
.trio .cell:hover .eyebrow{color:var(--accent)}
.cell-portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;filter:grayscale(1);margin-bottom:var(--s2);outline:1px solid var(--accent);outline-offset:5px}

/* ---------- wave-mask sections (loader motif carried through) ---------- */
.wave-top{
  -webkit-mask:linear-gradient(#000,#000) 0 28px/100% calc(100% - 28px) no-repeat,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 28" preserveAspectRatio="none"><path d="M0,28 C150,0 300,28 450,14 C600,0 750,28 900,14 C1050,0 1150,22 1200,10 L1200,28 Z" fill="black"/></svg>') top/100% 28px no-repeat;
  mask:linear-gradient(#000,#000) 0 28px/100% calc(100% - 28px) no-repeat,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 28" preserveAspectRatio="none"><path d="M0,28 C150,0 300,28 450,14 C600,0 750,28 900,14 C1050,0 1150,22 1200,10 L1200,28 Z" fill="black"/></svg>') top/100% 28px no-repeat;
}

/* ---------- logo marquee ---------- */
.marquee-sec{padding:0;background:transparent}   /* white comes from the wavy band below; page stays beige. No bottom pad — flows straight into footer; top wave pulls up to mask the tiles' bottom edge. */
.marquee-band{background:#fff;--text-weak:#6b6470;--ink:#231d28;--gray:#6b6470}  /* pinned: tinted pages (work) redefine these tokens for dark sections */                  /* the white wave band wraps lead-line + logos */
.marquee-sec .lead-line{text-align:center;font-family:var(--font-body);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--text-weak);margin:0;padding-top:var(--s6)}
/* white band with quadratic wave top & bottom edges (matches gaurisharma.com).
   CSS height MUST equal the SVG pattern height (140) so exactly one tile renders
   — otherwise the next (transparent) tile shows through as a beige seam. */
.marquee-wave{display:block;width:100%;height:180px}
.marquee-wave--top{margin-bottom:-2px;margin-top:-96px;position:relative;z-index:1}   /* pull the white wave up over the tiles so its wavy edge masks their bottom */
.marquee-wave--bottom{margin-top:-4px;margin-bottom:-1px;background:linear-gradient(#fff calc(100% - 3px),#231d28 calc(100% - 3px))}   /* white above the curve; bottom 3px dark so a fractional-DPR unpainted row can never flash white; -1px overlaps the footer seam */
.marquee{overflow:hidden;white-space:nowrap;background:transparent;padding-block:var(--s7) var(--s6)}   /* extra gap above logos */
.marquee .track{display:inline-flex;align-items:center;animation:marq 80s linear infinite;will-change:transform;backface-visibility:hidden}  /* GPU layer: kills sub-pixel text shimmer while translating */
.marquee .track > *{margin-right:clamp(40px,5vw,80px);flex:none}   /* uniform trailing gap on every item → seamless -50% loop */
@keyframes marq{to{transform:translateX(-50%)}}
/* client logo marks (cleaned SVGs, unified ink). Height set per-logo inline for optical balance. */
.wm-link{display:inline-flex;align-items:center;flex:none}
img.wm{width:auto;flex:none;opacity:.7;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wm-link:hover img.wm,img.wm:hover{opacity:1;transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none;flex-wrap:wrap;white-space:normal;justify-content:center;gap:48px 56px}
  .marquee .track > *{margin-right:0}
  img.wm.dup{display:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--tide);color:var(--paper);padding:var(--section-y) var(--edge) var(--s7)}
.site-footer h2{font-size:var(--t-title-l);max-width:13em}
.site-footer h2 .lovable{color:var(--accent)}
.contact-card h2 .lovable{color:#fff}   /* white on hot pink = 5.3:1, the highest contrast available here */   /* same face as the rest of the line — colour is the only difference */
.footer-actions{display:flex;gap:var(--s5);margin-top:var(--s7);flex-wrap:wrap;align-items:center}
.footer-contacts{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s6)}
.contact{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-label-l);letter-spacing:.03em;color:var(--on-dark);transition:color .3s var(--ease)}
.contact .ic{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--brand);border-radius:50%;transition:background .3s var(--ease)}
.contact .ic svg{width:16px;height:16px;fill:var(--on-dark);transition:fill .3s var(--ease)}
.contact:hover .ic{background:var(--brand)}
.contact:hover .ic svg{fill:#fff}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:var(--s4) var(--s7);
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--accent);border-radius:var(--radius-pill);
  position:relative;overflow:hidden;color:var(--paper);
  transition:color .4s var(--ease), transform .35s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.btn:hover{color:#fff;transform:scale(var(--hover-grow))}   /* outline buttons keep light text/icons on hover */
.btn:hover::before{transform:translateY(0)}
.btn-arrow{flex:none;transition:transform .3s var(--ease)}     /* modern arrow: shifts right + grows ~20% on hover */
.btn:hover .btn-arrow{transform:translateX(5px) scale(1.2)}
.btn.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.solid::before{background:var(--brand-press)}
.btn.solid:hover{color:#fff}                 /* accent button keeps light text (accessible) */
.btn.on-light{color:var(--ink)}
.btn.on-light:hover{color:#fff}
.footer-meta{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s9);padding-top:var(--s6);font-size:var(--t-small);color:var(--foam);flex-wrap:wrap;gap:var(--s4)}
.footer-meta .made{display:flex;align-items:center;gap:6px}
.footer-meta .heart{color:var(--accent)}

/* Sticky minimized footer (CTA dock) — appears mid-scroll, hides as the real footer arrives */
#cta-dock{
  --dock-hide:1;                                  /* 0 = shown · 1 = handed off to footer (set by JS, scroll-driven) */
  position:fixed;left:50%;bottom:var(--s5);z-index:880;
  display:flex;gap:var(--s3);align-items:center;
  padding:var(--s2);border-radius:var(--radius-pill);
  background:#1d1722;   /* v3: solid, deeper than surface-dark — dock reads crisp, not gray */
  backdrop-filter:blur(10px);box-shadow:0 14px 44px rgba(35,29,40,.30);
  transform:translateX(-50%) translateY(calc(var(--dock-hide) * 170%)) scale(calc(1 - var(--dock-hide) * 0.06));
  opacity:calc(1 - var(--dock-hide));
  pointer-events:none;
  transition:transform .25s linear, opacity .25s linear;   /* short — scroll updates drive the motion */
  max-width:calc(100% - var(--s5)*2);
}
#cta-dock .btn{padding:12px 22px;white-space:nowrap}
@media (max-width:560px){#cta-dock .btn{padding:11px 16px;font-size:10px;letter-spacing:.14em}}
@media (prefers-reduced-motion:reduce){#cta-dock{transition:opacity .2s linear}}

/* ============================================================
   LEADERSHIP — principles, timeline, testimonials, resume
   ============================================================ */
.page-head{padding:calc(var(--head-h) + var(--s4)) var(--gutter) var(--s9);max-width:1200px}
.page-head h1{font-size:var(--t-display);margin:0 0 var(--s6)}   /* display size; top aligns to the top edge, level with the work-page filter label */
.principles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.principle{position:relative;overflow:hidden;padding:var(--s9) var(--s8);min-height:44vh;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}
.principle:nth-child(odd){border-right:1px solid var(--line)}
.principle::before{content:"";position:absolute;inset:0;background:var(--tide);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.principle:hover::before{transform:scaleY(1)}
.principle>*{position:relative;transition:color .45s}
.principle .num{position:absolute;top:var(--s7);right:var(--s8);font-family:var(--font-body);font-style:italic;font-size:clamp(56px,6vw,100px);color:var(--foam);line-height:1}
.principle h3{font-family:var(--font-display);font-weight:500;font-size:var(--t-h2);margin-bottom:var(--s4)}
.principle p{color:var(--gray);max-width:30em}
.principle:hover h3{color:var(--paper)}
.principle:hover p{color:var(--foam)}
.principle:hover .num{color:var(--accent);opacity:.5}

/* career timeline — sticky mark crossfades while entries scroll (Ramirez register) */
.timeline{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s8);padding:var(--section-y) var(--gutter);border-top:1px solid var(--line)}
.timeline .tl-stage{position:sticky;top:28vh;height:40vh;display:flex;align-items:center;justify-content:center}
.tl-stage .tl-mark{
  position:absolute;font-family:var(--font-display);font-weight:600;
  font-size:clamp(40px,4.6vw,72px);color:var(--accent-deep);
  opacity:0;transform:translateY(20px) scale(.96);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  text-align:center;
}
.tl-stage .tl-mark.on{opacity:1;transform:none}
.tl-entries{display:flex;flex-direction:column;gap:var(--s9)}
.tl-entry{padding-left:var(--s6);border-left:1px solid var(--line);transition:border-color .4s}
.tl-entry.on{border-left-color:var(--accent)}
.tl-entry h3{font-family:var(--font-display);font-weight:500;font-size:var(--t-h3)}
.tl-entry .when{font-size:var(--t-small);color:var(--gray);margin-top:var(--s1)}
.tl-entry p{margin-top:var(--s3);color:var(--gray);max-width:30em}

/* testimonials carousel */
.testimonials{background:var(--bg-warm);padding:var(--section-y) var(--gutter);position:relative}
.tst-track{position:relative;min-height:300px;overflow:hidden}   /* clip the off-screen carousel slides (translateX) so they don't cause horizontal overflow */
.tst{position:absolute;inset:0;opacity:0;transform:translateX(40px);transition:opacity .6s var(--ease), transform .6s var(--ease);pointer-events:none}
.tst.on{opacity:1;transform:none;pointer-events:auto}
.tst blockquote{font-family:var(--font-body);font-weight:500;font-size:var(--t-title-l);line-height:1.3;max-width:24em}
.tst .who{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s4)}
.tst .who .nm{font-weight:600}
.tst .who .ttl{color:var(--gray);font-size:var(--t-small)}
.tst .who a{border-bottom:1px solid var(--accent);font-size:var(--t-small)}
.tst-nav{display:flex;gap:var(--s3);margin-top:var(--s7)}
.tst-nav button{width:12px;height:12px;border-radius:50%;background:var(--line);transition:all .3s var(--ease)}
.tst-nav button.on{background:var(--accent);transform:scale(1.3)}
.tst-nav button:hover{transform:scale(1.3)}

/* concise resume */
.resume-sec{padding:var(--section-y) var(--gutter)}
.resume-rows{margin-top:var(--s7);border-top:1px solid var(--line)}
.r-row{display:grid;grid-template-columns:.75fr 2.15fr .8fr;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line);align-items:center;transition:background .3s,transform .3s var(--ease)}
.r-row:hover{transform:translateX(var(--s3))}
.r-row .co{font-family:var(--font-body);font-weight:700;font-size:var(--t-body-l)}
.r-row .co .co-logo{height:26px;width:auto;display:block}   /* reuse client logos as resume marks */
.r-row .role{color:var(--ink);font-weight:700;transition:color .3s var(--ease)}
.r-row .yrs{color:var(--text-weak);font-size:var(--t-body);text-align:right}
.resume-cta{margin-top:var(--s7);display:flex;gap:var(--s5);flex-wrap:wrap}

/* ============================================================
   WORK — slides + counter
   ============================================================ */
.work-intro{display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--head-h) + var(--s4)) var(--gutter) var(--s7)}
.work-intro h1{font-size:var(--t-display)}
.work-intro p{opacity:.7;margin-top:var(--s4);max-width:32em}
/* segmented industry filter — pill track with a liquid (gooey) sliding thumb */
.work-intro .seg{position:relative;display:inline-flex;align-self:flex-start;margin-top:var(--s5);padding:5px;border:1.5px solid rgba(240,227,232,.26);border-radius:var(--radius-pill);background:rgba(240,227,232,.05);isolation:isolate}
.seg{gap:20px}   /* space the segments so the goo neck has a real gap to bridge as the fill moves between buttons */
.seg-goo-def{position:absolute}
/* inset clip container: nested inside the outer pill (tighter radius), overflow
   hidden so the bouncy blobs never escape the pill, and the clip re-crisps the
   pill edges that the goo blur would otherwise round into an oval. */
.seg-thumb{position:absolute;top:5px;left:5px;right:5px;bottom:5px;z-index:0;pointer-events:none;overflow:visible}
/* the active fill is a single SVG <path> recomputed each frame: two button caps joined by a
   real concave neck. A path re-renders reliably in every browser (no SVG-filter caching), so
   the liquid neck shows on GPU Chrome and Safari alike. */
.seg-fill{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.seg-fill path{fill:var(--seg-blob,var(--accent))}
.seg-blob{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,0);height:var(--h,0);border-radius:var(--radius-pill);background:var(--accent);will-change:left,top,width}   /* positioned via layout (left/top), NOT transform, so the SVG goo filter re-renders every frame on GPU (Chrome) and Safari */
/* lead darts ahead and overshoots (bounce); trail lags well behind so the goo
   filter pinches a deep concave neck between them mid-transit. */
/* speed variation: both blobs whip fast through the concave mid-section, then
   settle slowly with a strong overshoot bounce. Trail lags hard for a deep neck. */
/* lead darts ahead with a gentle bounce; trail lags well behind (big gap → real
   separation → deep concave neck). Both easings are well-formed so motion is smooth. */
.seg-blob--lead,.seg-blob--trail,.seg-blob--bridge{transition:none}   /* JS rAF drives the liquid thumb each frame: a cap drains on the old button, a cap fills the new one, and a thin bridge spans the gap → the goo pinches a concave neck (Zoox-style) */
.seg-opt{position:relative;z-index:1;appearance:none;background:none;border:0;cursor:pointer;font-family:var(--font-body);font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--foam);padding:11px 22px;border-radius:var(--radius-pill);transition:color .35s var(--ease);white-space:nowrap}
.seg-opt:hover{color:var(--fg)}
.seg-opt.is-active{color:#fff}
@media (prefers-reduced-motion:reduce){.seg-blob{transition:none}}
/* project index — one bar per (filtered) project, waaark-style, top-right under the menu */
.work-nav{position:fixed;z-index:820;top:calc(var(--head-h) + var(--s4));right:var(--edge);display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.work-nav .wn-label{font-family:var(--font-body);font-weight:600;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;line-height:1;color:var(--fg);opacity:.92;margin-bottom:10px}
.work-nav .wn-bar{position:relative;appearance:none;border:0;background:none;cursor:pointer;display:block;width:34px;padding:3px 0;line-height:0}
.work-nav .wn-bar::after{content:"";display:block;height:2px;width:18px;margin-left:auto;border-radius:2px;background:color-mix(in srgb,var(--accent) 42%,#fff);transition:width .4s var(--ease),background .4s var(--ease)}
.work-nav .wn-bar:hover::after{background:color-mix(in srgb,var(--accent) 68%,#fff)}
.work-nav .wn-bar.on::after{width:40px;background:var(--accent)}
body.menu-is-open .work-nav{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.work-slide{min-height:100vh;display:grid;grid-template-columns:1.5fr 1fr;gap:2.5vw;align-items:start;padding:calc(var(--head-h) + var(--s7)) calc(var(--gutter) + var(--s8)) 12vh var(--gutter)}
/* empty-state for a filter with no projects yet — holds page height so the footer doesn't jump up */
.work-empty{min-height:60vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s4);padding:var(--s7) var(--gutter) var(--s8)}
.work-empty[hidden]{display:none}
.work-empty h2{font-size:var(--t-title-l);max-width:14em;margin:0}
.work-empty .we-cat{text-transform:capitalize}
.work-empty p{opacity:.7;max-width:30em;margin:0}
.work-slide .frame{position:relative;opacity:0;transition:opacity .8s var(--ease)}   /* opacity-only reveal — no vertical offset so the image stays top-aligned with the text */
.work-slide.in .frame{opacity:1}
a.frame:hover{transform:scale(var(--hover-grow)) !important}
.work-slide .frame img,.work-slide .frame svg{width:100%;height:auto;display:block}
/* image heroes: no card chrome (shadow/fill); consistent large size; transparent mockups float, top-aligned */
.work-slide .frame-img{height:clamp(360px,58vh,600px);background:none;box-shadow:none;border-radius:0;overflow:visible}
.work-slide .frame-img img{width:100%;height:100%;object-fit:contain;object-position:top}
.work-panel .eyebrow{color:var(--foam);opacity:.92}   /* tinted per project; kept opaque enough for WCAG AA contrast */
.work-panel h2{font-size:clamp(22px,2.5vw,30px);line-height:1.25;margin:var(--s4) 0 0;max-width:18em;font-weight:500}   /* the promoted descriptive title */
.work-panel p{opacity:.78;max-width:30em}
.work-panel .meta{font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-top:var(--s5)}
.work-panel .btn{margin-top:var(--s6)}   /* case-study CTA reuses the shared outline button */
#sprinter .work-panel .btn{border-color:#c6bcf8;color:#c6bcf8}   /* stroke + text match this card's label tint */
#sprinter .work-panel .btn:hover{color:#fff}
.work-panel .soon-tag{display:inline-block;margin-top:var(--s7);font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;border:1px solid;border-radius:var(--radius-pill);padding:6px 14px}   /* same pill badge as the menu's "Coming soon" */
/* expanding click transition overlay */
#expander{position:fixed;z-index:980;border-radius:var(--radius-s);overflow:hidden;pointer-events:none;display:none}
#expander svg,#expander img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   CASE STUDY — colour splash drains into / is masked by the title
   ============================================================ */
.cs-hero{height:100vh;position:relative;overflow:hidden;background:var(--tide)}
/* SAFARI MASK: the display title is an ALPHA MASK over a fixed full-bleed image
   (like the Figma Mask group → text masking the hero image). The image stays put;
   the text window scales over it. Around the text the dark hero shows. Scaling the
   text mask (not the image) gives the parallax zoom with no rasterisation/blur. */
.cs-masktitle{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
/* title vertical centre = max(150px, 40vh − 160px): the −160px "raise" holds on
   normal/tall windows but is floored at 150px so it never rides up behind the header
   on short windows */
.cs-mt{font-family:var(--font-display);font-weight:500;font-size:var(--t-display);letter-spacing:-.01em;fill:#fff;transform:translateY(max(-160px, calc(150px - 40vh)))}
/* full title is one line on wide screens; below 600px "& Prep Guide" drops to line 2 */
.cs-mt.cs-narrow{display:none}
@media (max-width:600px){ .cs-mt.cs-wide{display:none} .cs-mt.cs-narrow{display:inline} }
/* neutral one-liner label — sits 24px under the title (positioned by JS), fades in after the transition */
.cs-label{position:absolute;left:0;right:0;top:50%;margin:0 auto;padding:0 var(--s5);max-width:58%;text-align:center;
  color:var(--text-weak);font-family:var(--font-body);font-size:clamp(15px,1.5vw,19px);line-height:1.45;
  opacity:0;z-index:2;pointer-events:none}
@media (max-width:880px){ .cs-label{max-width:82%} }
.cs-hero .cs-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--s5);z-index:2}
.cs-title .eyebrow{color:var(--accent);opacity:0;transform:translateY(16px)}
.cs-title h1{font-size:var(--t-display);line-height:1.05}
.cs-title h1.cs-spacer{visibility:hidden}   /* reserves layout; the SVG mask is the visible title */
.cs-title .sub{font-family:var(--font-body);font-style:italic;font-size:clamp(17px,1.8vw,22px);margin-top:var(--s4);color:var(--foam);opacity:0;transform:translateY(16px)}
/* work→case transition overlay: the SAFARI reveal plays HERE on the work page over
   the clicked card; we navigate only once it has settled to exactly the case page's
   static hero, so the page swap itself is invisible. */
.cs-overlay{position:fixed;inset:0;z-index:1500;background:var(--tide)}
/* one giant curve where the paper hero meets the white below: the white arcs UP into
   the hero in the centre (a single deep upward curve), tapering to the edges. The big
   negative margin pulls the whole curve + white body ~160px up into the hero. */
/* curve + prototype are ONE pinned unit (.cs-pin) so the white never separates from
   the white scrub body during the scrub (no paper band showing through). The wrapper's
   negative margin pulls the whole white unit up into the paper hero. */
.cs-pin{position:relative;z-index:6;margin-top:-390px}
.cs-curve{position:relative;z-index:4;display:block;width:100%;height:150px;margin-top:0;pointer-events:none}
.cs-curve path{fill:var(--surface)}
/* overlay copy of the curve+white so the work→case swap stays seamless (the curve is
   now high enough to be on-screen at the top of the case page) */
.cs-ov-bottom{position:absolute;left:0;right:0;bottom:0;height:240px;background:var(--surface);z-index:5;pointer-events:none}
.cs-ov-bottom .cs-curve{position:absolute;left:0;bottom:240px;width:100%;height:150px;margin:0}
.cs-body{background:var(--surface);color:var(--ink);position:relative;z-index:3}
/* long-form reading size for the case body — a step down from the lead/intro --t-lead */
.cs-body .body-l,.cs-body .cs-list li{font-size:clamp(14px,1.2vw,16px);line-height:1.7}   /* −2px site-wide */
/* header-less time -> detail timeline table */
.cs-timeline{width:100%;border-collapse:collapse;margin:0}
.cs-timeline th,.cs-timeline td{text-align:left;vertical-align:top;padding:var(--s4) 0;border-top:1px solid var(--line)}
.cs-timeline tr:last-child th,.cs-timeline tr:last-child td{border-bottom:1px solid var(--line)}
.cs-timeline th{width:8.5rem;padding-right:var(--s3);font-family:var(--font-body);font-weight:600;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--brand)}   /* overline treatment, like the beat eyebrows */
.cs-timeline td{font-size:var(--t-small);line-height:1.6;color:var(--text-weak)}   /* −2pt to avoid wraps */
@media(max-width:540px){.cs-timeline th,.cs-timeline td{display:block;width:auto;padding-bottom:0}.cs-timeline td{padding-top:var(--s2);padding-bottom:var(--s4)}.cs-timeline th{border-top:1px solid var(--line);padding-top:var(--s4)}.cs-timeline td{border-top:0}}
/* "See why" expand/collapse accordion (native <details>) */
.cs-acc-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;font-family:var(--font-body);font-weight:500;font-size:clamp(15px,1.1vw,18px);color:var(--brand);transition:color .25s var(--ease)}
.cs-acc-sum::-webkit-details-marker{display:none}
.cs-acc-sum:hover{color:var(--brand-press)}
/* chevron: right-facing when collapsed, rotates up when open */
.cs-acc-icon{width:9px;height:9px;flex:none;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease)}
.cs-acc[open] .cs-acc-icon{transform:rotate(-45deg)}
.cs-acc-body{padding-bottom:var(--s5)}
.cs-acc-body > * + *{margin-top:var(--s5)}
.cs-acc[open] .cs-acc-body{animation:accIn .4s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* 3-column table with a header row (e.g. The build) */
.cs-table{width:100%;border-collapse:collapse;margin:0;table-layout:fixed}
.cs-table th,.cs-table td{text-align:left;vertical-align:top}
.cs-table thead th{padding:0 var(--s4) var(--s3) 0;font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-weak);border-bottom:1px solid var(--line)}
.cs-table tbody th,.cs-table tbody td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line)}
.cs-table tbody th{font-family:var(--font-body);font-weight:600;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--brand)}   /* overline treatment, like the beat eyebrows */
.cs-table tbody td{font-size:var(--t-small);line-height:1.6;color:var(--text-weak)}   /* −2pt to avoid wraps */
.cs-table th:nth-child(1),.cs-table td:nth-child(1){width:24%}
.cs-table th:nth-child(2),.cs-table td:nth-child(2){width:14%}
@media(max-width:540px){.cs-table,.cs-table thead,.cs-table tbody,.cs-table tr,.cs-table th,.cs-table td{display:block;width:auto}.cs-table thead{display:none}.cs-table tbody th{border-bottom:0;padding-bottom:0}.cs-table tbody td{border-bottom:0;padding:var(--s1) 0 0}.cs-table tbody tr{border-bottom:1px solid var(--line);padding-bottom:var(--s4)}}
/* 3-way comparison table (PeriOp "clocks"): value + muted gloss per cell, the
   "with PeriOp Embed" column tinted; scrolls horizontally on narrow screens. */
.cs-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0}
.cs-compare{width:100%;border-collapse:collapse;min-width:720px;margin:0}
.cs-compare thead th{text-align:left;vertical-align:bottom;padding:0 var(--s4) var(--s3) 0;font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-weak);border-bottom:1px solid var(--line)}
.cs-compare thead th:first-child{width:22%}
.cs-compare tbody th{text-align:left;vertical-align:top;padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line);font-family:var(--font-body);font-weight:500;font-size:clamp(13px,.95vw,15px);letter-spacing:.03em;text-transform:uppercase;color:var(--brand)}
.cs-compare tbody td{vertical-align:top;padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line)}
.cs-compare .cmp-v{display:block;font-family:var(--font-body);font-weight:600;font-size:clamp(15px,1.1vw,17px);line-height:1.3;color:var(--ink)}
.cs-compare .cmp-g{display:block;margin-top:3px;font-size:var(--t-small);line-height:1.5;color:var(--text-weak)}
.cs-compare tbody td:last-child .cmp-v{color:var(--brand)}
.cs-foot{font-size:var(--t-small);line-height:1.6;color:var(--text-weak);opacity:.8;margin-top:var(--s7);max-width:60em}
.cs-section{padding:var(--section-y) var(--gutter);max-width:1240px;margin:0 auto}
.cs-section h2{font-size:var(--t-h2);margin:var(--s4) 0 var(--s5)}
.cs-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:6vw;align-items:start}
.cs-cols .sticky-label{position:sticky;top:calc(var(--head-h-min) + var(--s8))}
/* body paragraph + list spacing inside a beat (works for single + swapped bodies) */
.cs-len > * + *{margin-top:var(--s5)}
.cs-list{list-style:none;margin:0;padding:0}
/* a bullet list inside a beat body needs its own top gap from the intro line
   (the margin:0 reset above would otherwise collapse it) */
.cs-len > .cs-list{margin-top:var(--s4)}
.cs-list li{position:relative;padding-left:1.4em;margin-bottom:var(--s4);font-size:var(--t-lead);line-height:1.6;color:var(--text-weak);max-width:38em;break-inside:avoid}
.cs-list li:last-child{margin-bottom:0}
.cs-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
/* Short/Long body swap (driven by body.cs-reading-long) */
.cs-len.cs-short{display:none}
.cs-len.cs-long{display:block}
body:not(.cs-reading-long) .beat.long-only{display:none}
/* "The numbers": heading + animated counters + (always-shown) outcome bullets */
.cs-numbers-sec{position:relative;padding:var(--section-y) var(--gutter);max-width:1240px;margin:0 auto}
/* animated patient-visits growth chart */
.cs-growth{margin:0}
.cs-growth-svg{display:block;width:100%;height:auto;max-width:520px;overflow:visible}
.cs-growth-axis{stroke:var(--line);stroke-width:1.5}
.cs-growth-guide{stroke:var(--line);stroke-width:1;stroke-dasharray:3 6}
.cs-growth-area{fill:var(--brand);fill-opacity:.09}
.cs-growth-line{fill:none;stroke:var(--brand);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.cs-growth-arrow{fill:var(--brand)}
.cs-growth-dot{fill:var(--surface);stroke:var(--brand);stroke-width:3}
.cs-growth-val{font-family:var(--font-body);font-weight:500;font-size:34px;fill:var(--brand)}
.cs-growth-yr{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--text-weak)}
.cs-growth figcaption{margin-top:var(--s4);font-size:var(--t-small);line-height:1.5;color:var(--text-weak);max-width:34em}

/* heart confetti burst (JS-spawned) over the numbers */
.cs-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.cs-heart{position:absolute;line-height:0;will-change:transform,opacity}
.cs-heart svg{display:block;width:100%;height:auto;fill:currentColor}
.cs-numbers-head{max-width:50rem;margin-bottom:var(--s7)}
.cs-numbers-head .display{font-size:var(--t-h2);margin-top:var(--s3)}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s7) var(--s6)}
/* proportional figures (not tabular) so the "1" in 100% sits tight to the "00" */
.cs-stats .big{font-family:var(--font-body);font-weight:500;font-size:clamp(48px,5.6vw,84px);letter-spacing:-.01em;color:var(--brand);line-height:1}
.cs-stats .lbl{font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-weak);margin-top:var(--s4);line-height:1.5}
.cs-numbers-sec .cs-list{margin-top:var(--s9);columns:2;column-gap:var(--s9)}
.cs-numbers-sec .cs-list li{max-width:none;padding-left:1.8em}
/* green checkmarks instead of the accent dot */
.cs-numbers-sec .cs-list li::before{content:"✓";top:0;left:0;width:auto;height:auto;background:none;border-radius:0;color:var(--ok);font-weight:700;line-height:1.6}
@media(max-width:880px){.cs-numbers-sec .cs-list{columns:1}}

/* scroll-scrub prototype: a desktop + phone shown side by side, each labelled for its
   user. The placeholder UI inside scrubs in as you scroll (pinned). */
.scrub-stage{min-height:100vh;background:var(--surface);position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--s4) var(--gutter) var(--s5)}
/* lift the devices up so the frames clearly sit ON TOP OF the hero curve — their tops
   cross the curve line onto the paper hero. The scrub pin is decoupled (it triggers off
   .proto-devices, see case_js) so this strong overlap never clips during scrubbing. */
.proto-devices{display:flex;align-items:flex-end;justify-content:center;gap:clamp(20px,3.5vw,56px);position:relative;z-index:6;margin-top:-230px}
.device{display:flex;flex-direction:column;align-items:center}
.device figcaption{margin-top:var(--s5);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--text-weak);text-align:center}
.device .bezel{background:var(--ink);box-shadow:0 36px 80px rgba(28,26,23,.22)}
.device .screen{background:var(--bg-warm);overflow:hidden;position:relative}
.device-desktop .bezel{border-radius:16px;padding:12px}
.device-desktop .screen{width:min(600px,52vw);aspect-ratio:16/10;border-radius:6px}
.device-phone .bezel{border-radius:34px;padding:8px}
.device-phone .screen{width:min(168px,22vw);aspect-ratio:9/19;border-radius:28px}
.scrub-stage .ph-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:18px;background:var(--ink);border-radius:0 0 10px 10px;z-index:2}
.scrub-stage .ph-bar{height:14%;background:var(--accent);opacity:.9}
.scrub-stage .ph-row{height:8.5%;margin:5% 8% 0;background:var(--sunken);border-radius:4px}
.scrub-stage .ph-card{height:15%;margin:7% 9% 0;background:var(--sunken);border-radius:10px}
.scrub-stage .sc{opacity:0}
.scrub-note{margin-top:var(--s8);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--text-weak);opacity:.65}
.scrub-progress{display:none}   /* the right-side section nav conveys position; the stray top-edge bar isn't needed */
@media(max-width:680px){.proto-devices{gap:18px}.device-desktop .screen{width:54vw}.device-phone .screen{width:24vw}}
/* ---- Hero brand line (small caps, above the title; fades in after the transition) ---- */
.cs-brand{position:absolute;left:0;right:0;text-align:center;margin:0;z-index:3;font-size:var(--t-label);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--text-weak);opacity:0;pointer-events:none}
/* ---- Hero video stage: gooey segmented control over a crossfading device frame ---- */
/* pull the whole pinned unit up (viewport-relative) so the frame overlaps the curve */
.cs-pin.cs-pin-media{margin-top:-46vh}
.cs-vstage{position:relative;z-index:6;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:var(--s5);padding:0 var(--gutter) var(--s9);margin-top:-1px}
/* the control + frame ride up over the curve so the frame straddles the paper→white edge */
.cs-vstage .seg{position:relative;display:inline-flex;align-self:center;margin-top:calc(-30vh + 12px);padding:5px;border:1.5px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--ink) 4%,transparent);isolation:isolate}
.cs-vstage .seg-opt{color:var(--text-weak)}
.cs-vstage .seg-opt:hover{color:var(--ink)}
.cs-vstage .seg-opt.is-active{color:#fff}
.cs-vstage .seg-blob{background:var(--seg-blob,#13634c)}
.cs-vframe-wrap{margin:0;width:min(1120px,94vw);text-align:center}
.cs-vframe{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0c0c0e;box-shadow:0 40px 90px -34px rgba(20,10,30,.55)}
.cs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.006);transition:opacity .6s var(--ease)}
.cs-vid.is-active{opacity:1}
/* custom video controls overlaid on the frame — revealed on hover/focus only */
.cs-vbtn,.cs-vplay,.cs-vfull{position:absolute;bottom:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(12,12,14,.5);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(4px);transition:background .25s var(--ease),opacity .3s var(--ease),transform .3s var(--ease)}
.cs-vplay{left:14px}
.cs-vfull{right:14px}
.cs-vframe:hover .cs-vplay,.cs-vframe:hover .cs-vfull,.cs-vframe:focus-within .cs-vplay,.cs-vframe:focus-within .cs-vfull{opacity:1;transform:none}
.cs-vplay:hover,.cs-vfull:hover{background:rgba(12,12,14,.82)}
.cs-vplay svg,.cs-vfull svg{width:20px;height:20px;fill:currentColor}
.cs-vfull svg{fill:none}
.cs-vplay .i-play{display:none}
.cs-vplay:not(.is-playing) .i-pause{display:none}
.cs-vplay:not(.is-playing) .i-play{display:block}
.cs-vfull .i-collapse{display:none}
.cs-vfull.is-full .i-expand{display:none}
.cs-vfull.is-full .i-collapse{display:block}
.cs-vframe:fullscreen,.cs-vframe:-webkit-full-screen{width:100vw;height:100vh;border-radius:0;aspect-ratio:auto;background:#000;display:flex}
.cs-vframe:fullscreen .cs-vid,.cs-vframe:-webkit-full-screen .cs-vid{object-fit:contain}
.cs-vframe:fullscreen .cs-vplay,.cs-vframe:fullscreen .cs-vfull,.cs-vframe:-webkit-full-screen .cs-vplay,.cs-vframe:-webkit-full-screen .cs-vfull{opacity:1;transform:none}
.cs-vcap{margin-top:var(--s4);font-size:var(--t-small);color:var(--text-weak)}
@media(max-width:680px){.cs-pin.cs-pin-media{margin-top:-40vh}.cs-vstage .seg{width:92vw;justify-content:space-between;margin-top:-26vh}.cs-vstage .seg-opt{flex:1;padding:11px 4px;font-size:10px;letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){.cs-vid{transition:none}}
/* ---- bottom pager: two outline buttons (replaced the big arrow/serif links) ---- */
.cs-pager{display:flex;justify-content:space-between;gap:var(--s5);background:var(--tide);color:var(--paper);padding:var(--section-y) var(--edge)}
.cs-pager .btn{text-transform:none;letter-spacing:.01em;font-size:var(--t-small);max-width:46%}
.btn-arrow-l{flex:none}
.btn:hover .btn-arrow-l{transform:translateX(-5px) scale(1.2)}

/* ---- Right-side section nav + the Short/Long reading toggle in its header ---- */
.cs-nav{position:fixed;z-index:820;top:calc(var(--head-h) + var(--s4));right:var(--edge);display:flex;flex-direction:column;align-items:flex-end;gap:14px}
/* Short / Long toggle button — a segmented pill with an accent thumb that slides */
.cn-toggle{position:relative;display:inline-flex;align-items:center;padding:2px;border:1px solid var(--line);border-radius:var(--radius-pill);background:color-mix(in srgb, var(--surface) 62%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cn-thumb{position:absolute;top:2px;left:0;height:calc(100% - 4px);width:0;border-radius:var(--radius-pill);background:var(--ink);z-index:0;transition:transform .4s var(--ease),width .4s var(--ease)}
.cn-opt{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:9px;letter-spacing:.07em;font-weight:600;text-transform:uppercase;color:var(--text-weak);padding:3px 8px;border-radius:var(--radius-pill);transition:color .3s var(--ease);white-space:nowrap}
.cn-opt:hover{color:var(--ink)}
.cn-opt.is-active{color:#fff}
.cn-bars{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.cn-bar{position:relative;appearance:none;border:0;background:none;cursor:pointer;display:block;width:34px;padding:3px 0;line-height:0}
.cn-bar::after{content:"";display:block;height:2px;width:18px;margin-left:auto;border-radius:2px;background:color-mix(in srgb,var(--accent) 42%,#fff);transition:width .4s var(--ease),background .4s var(--ease)}
.cn-bar:hover::after{background:color-mix(in srgb,var(--accent) 68%,#fff)}
.cn-bar.on::after{width:40px;background:var(--accent)}
/* styled hover label naming the section/project (sits to the LEFT of the bars) */
.cn-tip,.wn-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);white-space:nowrap;
  padding:5px 11px;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  box-shadow:0 6px 18px rgba(28,26,23,.18);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cn-bar:hover .cn-tip,.work-nav .wn-bar:hover .wn-tip{opacity:1;transform:translate(0,-50%)}
body.menu-is-open .cs-nav{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}

/* ---- condensed project title that settles into the middle of the sticky header ---- */
/* condensed title is centred via the outer; the inner span is what scrubs in (so the
   fade/scale animation never fights the translateX(-50%) centring) */
.head-center{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);display:flex;align-items:center;max-width:46vw;color:var(--fg);pointer-events:none}
.head-center .hc-i{display:inline-block;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-display);font-weight:500;font-size:var(--t-title-s);letter-spacing:-.01em;line-height:1.1;
  opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
body.menu-is-open .head-center{opacity:0}
.bigq-text .qw{transition:none}

/* ---- Overview (lead + meta column) and the Big Question, John-Davis register ---- */
.cs-overview{padding-top:var(--s7)}   /* tighter landing right after the pinned prototype */
.cs-overview .ov-grid{display:grid;grid-template-columns:1.28fr 1fr;gap:clamp(40px,5vw,90px);align-items:start}
.cs-overview .ov-lead .body-l{margin-top:var(--s4);max-width:44em;color:var(--ink)}
.ov-meta{display:flex;flex-direction:column;margin:0}
.ov-row{display:grid;grid-template-columns:6.5rem 1fr;gap:var(--s4);align-items:baseline;border-top:1px solid var(--line);padding:var(--s4) 0}
.ov-row:last-child{border-bottom:1px solid var(--line)}
/* labels share the timeline left-column treatment (display face, brand fuchsia) */
.ov-row dt{font-family:var(--font-body);font-weight:600;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--brand)}   /* overline treatment, like the beat eyebrows */
.ov-row dd{margin:0;font-size:var(--t-small);font-weight:500;line-height:1.55;color:var(--text-weak)}   /* secondary, not primary ink */
.cs-bigq{text-align:center;padding-block:calc(var(--section-y) + var(--s6))}
.cs-bigq .eyebrow{display:block;margin-bottom:var(--s5)}
.bigq-text{font-family:var(--font-display);font-weight:500;line-height:1.14;letter-spacing:-.01em;font-size:clamp(28px,4vw,54px);max-width:min(1040px,94vw);margin:0 auto;color:var(--ink)}
@media(max-width:880px){.cs-overview .ov-grid{grid-template-columns:1fr;gap:var(--s6)}}

/* ============================================================
   ABOUT — illustrated portrait + question bubbles
   ============================================================ */
.about-stage{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);padding:var(--s7) var(--gutter) var(--section-y);align-items:center}
.portrait-zone{position:relative;display:flex;justify-content:center}
.portrait-zone svg{width:min(420px,80vw)}
.portrait-zone svg path,.portrait-zone svg circle,.portrait-zone svg ellipse{fill:none;stroke:var(--accent-deep);stroke-width:2;stroke-linecap:round}
.portrait-zone svg .fill-accent{fill:var(--accent);stroke:none;opacity:.25}
.bubble{
  position:absolute;background:var(--surface);border:1px solid var(--brand);border-radius:var(--radius-pill);
  padding:var(--s2) var(--s4);font-size:var(--t-small);cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease), background .3s, opacity .3s;
  box-shadow:0 6px 24px rgba(35,29,40,.08);
}
.bubble:hover{transform:scale(1.06);background:var(--bg-warm)}
.bubble.open{background:var(--tide);color:var(--paper);border-color:var(--tide);white-space:normal;border-radius:var(--radius-m);max-width:280px;z-index:5;transform:scale(1.02)}
.bubble .a{display:none;font-size:var(--t-small);line-height:1.5;margin-top:var(--s2);color:var(--foam)}
.bubble.open .a{display:block}
.bubble .q{font-weight:600}

/* working theory list */
.wt-list{padding:0 var(--gutter) var(--section-y);max-width:900px}
.wt-item{padding:var(--s6) 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
.wt-item:hover{padding-left:var(--s4)}
.wt-item h3{font-family:var(--font-display);font-weight:500;font-size:var(--t-h3)}
.wt-item h3:hover{color:var(--accent-deep);font-style:italic}
.wt-item .meta{font-size:var(--t-small);color:var(--gray);margin-top:var(--s1)}

/* ============================================================
   STYLEGUIDE
   ============================================================ */
.sg-section{padding:var(--s8) var(--gutter);border-bottom:1px solid var(--line)}
.sg-swatches{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
.sg-swatch{width:130px}
.sg-swatch .chip{height:80px;border-radius:var(--radius-s);border:1px solid var(--line)}
.sg-swatch .nm{font-size:var(--t-small);margin-top:var(--s2);color:var(--gray)}
.sg-spacer-row{display:flex;align-items:flex-end;gap:var(--s4);margin-top:var(--s5)}
.sg-spacer-row div{background:var(--accent);opacity:.5}
.theme-toggle{position:fixed;bottom:var(--s5);right:var(--s5);z-index:800}

/* reveal */
.reveal{opacity:0;transform:translateY(46px);transition:all .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .trio{grid-template-columns:1fr}
  .trio .cell + .cell{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:880px){
  :root{--head-h:72px;--head-h-min:56px}
  .principles,.cs-cols,.about-stage,.timeline{grid-template-columns:1fr}
  .principle:nth-child(odd){border-right:0}
  /* work cards stack; image sizes to its own height (no empty box) and the slide grows to fit content */
  .work-slide{grid-template-columns:1fr;gap:var(--s5);min-height:auto;padding:calc(var(--head-h) + var(--s6)) var(--s5) var(--s9)}
  .work-slide .frame-img{height:auto}
  .work-slide .frame-img img{height:auto;width:100%;max-height:48vh;object-fit:contain;object-position:center}
  .work-panel h2{max-width:none}   /* let the title use the full width on stacked layout instead of wrapping early */
  .work-panel{padding-right:var(--s2)}
  .work-nav{display:none}
  .head-center{display:none}
  /* on mobile the section bars are dropped; the Short/Long pill sits bottom-centre */
  .cs-nav{top:auto;bottom:16px;right:50%;transform:translateX(50%);flex-direction:row;align-items:center;z-index:850}
  .cs-nav .cn-bars{display:none}
  .cs-pager .btn{max-width:none}
  .work-intro{min-height:auto}
  .work-intro .seg{flex-wrap:wrap}
  .callouts{grid-template-columns:1fr}
  #menu{grid-template-columns:1fr;padding-top:16vh;align-items:start}
  .menu-aside{position:absolute}
  .timeline .tl-stage{position:relative;top:0;height:auto;min-height:120px}
  .r-row{grid-template-columns:1fr;gap:var(--s1)}
  .r-row .yrs{text-align:left}
  .cs-pager{flex-direction:column;gap:var(--s6)}
  .nav-indicator .page-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal,.work-slide .frame{opacity:1;transform:none}
  .cs-hero .splash{opacity:0}
}

/* ---- Leadership image carousel ---- */
.gallery{padding:var(--section-y) var(--gutter);max-width:1100px;margin:0 auto}
.gal-head{max-width:46em;margin-bottom:var(--s7)}
.gal-head .display{font-size:var(--t-h2);margin-top:var(--s3)}
.gal-head .body-l{margin-top:var(--s4);color:var(--text-weak)}
.gal-stage{position:relative;display:flex;align-items:center;gap:var(--s4)}
.gal-viewport{overflow:hidden;border-radius:var(--radius-l);flex:1 1 auto;min-width:0;box-shadow:0 34px 74px -36px rgba(20,10,30,.5)}
.gal-track{display:flex;transition:transform .6s var(--ease);will-change:transform}
.gal-slide{flex:0 0 100%;margin:0}
.gal-img{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 20%,var(--surface)),var(--surface))}
.gal-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-arrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.gal-arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.07)}
.gal-arrow:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.gal-arrow svg{width:20px;height:20px}
.gal-foot{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s5)}
.gal-cap{flex:1 1 auto;margin:0;font-family:var(--font-body);font-style:italic;font-size:var(--t-lead);line-height:1.3;color:var(--ink)}
.gal-dots{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.gal-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.gal-dots button.on{background:var(--brand);transform:scale(1.35)}
.gal-dots button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.gal-count{margin:0;font-size:var(--t-small);color:var(--text-weak);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .gal-arrow{width:38px;height:38px}
  .gal-arrow svg{width:17px;height:17px}
  .gal-stage{gap:var(--s2)}
  .gal-foot{flex-wrap:wrap;gap:var(--s3)}
  .gal-cap{flex:0 0 100%;font-size:var(--t-body);order:3}
}

/* ---- Case-study media: figures, bands, carousels, before/after, scroller, marquee ---- */
.cs-band{padding-block:var(--s8);max-width:1440px}   /* wider than the 1240 text column — media wants room */
.beat + .cs-band,.cs-numbers-sec + .cs-band,.cs-band + .cs-band{padding-top:0}
.cs-band-head{max-width:46em;margin:0 auto var(--s6);text-align:center}
.cs-band-head .display{font-size:var(--t-h3);margin-top:var(--s2)}

/* Full-bleed: break the media out of the centered column, edge to edge of the viewport,
   for cinematic, immersive moments (portraits, panoramas, social proof). */
.cs-band-full{max-width:none;width:100vw;margin-inline:calc(50% - 50vw);
  padding-inline:clamp(16px,2.5vw,44px)}   /* near edge-to-edge */

.cs-fig{margin:0}
.cs-fig-img{border-radius:var(--radius-l);overflow:hidden;background:var(--surface)}
.cs-fig-img img{display:block;width:100%;height:auto}
.cs-fig figcaption{margin:var(--s4) auto 0;font-size:var(--t-small);line-height:1.55;color:var(--text-weak);max-width:52em;text-align:center}
.cs-fig-dark .cs-fig-img{background:#0b0e13}

/* ---- Case galleries: large, near edge-to-edge, drag/scroll, NO arrows/dots/count.
   Each slide carries its OWN caption directly below it (Collins/Buck). ---- */
.cs-gal{position:relative}
.csg-vp{display:flex;gap:clamp(20px,2.4vw,44px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  padding-block:2px;scroll-padding-inline:clamp(16px,2.5vw,44px)}
.csg-vp::-webkit-scrollbar{display:none}
.csg-vp.is-drag{cursor:grabbing}
.csg-vp img{-webkit-user-drag:none;user-select:none}
.csg-slide{flex:0 0 auto;scroll-snap-align:center;margin:0;text-align:center;
  transition:opacity .55s var(--ease),filter .55s var(--ease)}
.csg-slide:not(.is-active){opacity:.4;filter:saturate(.82)}   /* focus the centre, dim the peek */
.cs-gal .gal-img{position:relative;aspect-ratio:auto;display:inline-block;background:var(--surface);
  box-shadow:0 0 0 1px var(--line);border-radius:var(--radius-l);overflow:hidden;line-height:0}
.cs-gal-dark .gal-img{box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.cs-gal .gal-img img{position:static;inset:auto;display:block;height:clamp(340px,52vh,540px);width:auto;object-fit:contain}
.cs-gal-dark .gal-img{background:#0b0e13}
/* per-slide caption: aligned to its image, a consistent gap below */
.csg-cap{margin:var(--s4) auto 0;font-family:var(--font-body);font-size:var(--t-small);
  line-height:1.55;color:var(--text-weak);max-width:52em;text-align:center}

/* ---- Opportunity sizing — full-bleed Figma SVG, GSAP circles->text reveal ---- */
.cs-answer-media{margin-top:0}
.cs-opp{margin:0}
.cs-opp-frame{width:100vw;margin-inline:calc(50% - 50vw);border:0;border-radius:0;padding:0;background:#000;overflow:hidden;line-height:0}
.cs-opp-svg{display:block;width:80%;height:auto;margin-inline:auto}

/* ---- Outcomes: segmented toggle (hero-style) walking the before/after groupings ---- */
.cs-ba-toggle{display:flex;flex-direction:column;align-items:center;gap:clamp(var(--s4),2vw,var(--s5))}
.baseg{position:relative;display:inline-flex;align-items:center;gap:16px;padding:5px;flex-wrap:wrap;
  justify-content:center;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:var(--radius-pill);background:color-mix(in srgb,var(--ink) 4%,transparent);isolation:isolate}
.baseg-thumb{position:absolute;top:5px;left:5px;right:5px;bottom:5px;z-index:0;pointer-events:none;overflow:visible}
.baseg-fill{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.baseg-fill path{fill:var(--seg-blob,var(--brand))}
.baseg-opt{position:relative;z-index:1;appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--t-label);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-weak);padding:10px 18px;border-radius:var(--radius-pill);
  transition:color .35s var(--ease);white-space:nowrap}
.baseg-opt:hover{color:var(--ink)}
.baseg-opt.is-active{color:#fff}
.ba-stage{width:100%}
.ba-panel{display:none}
.ba-panel.is-active{display:block}
.gal-ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);width:100%;max-width:min(1360px,94vw);margin-inline:auto}
.ba-cell{position:relative;margin:0}
.ba-side{display:none}
.gal-ba .gal-img{position:relative;aspect-ratio:1/1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden}
.ba-frame .ba-base{position:absolute;top:48px;left:0;width:100%;height:calc(100% - 48px);object-fit:contain;padding:16px;box-sizing:border-box}
.ba-frame .ba-callout{opacity:0;transition:opacity .7s var(--ease)}
/* entrance: cells rise/scale in when a panel activates; then callouts build (before→after) */
/* staged reveal: BEFORE image, then AFTER image, then BEFORE caption, then AFTER caption */
.ba-panel .ba-cell{opacity:1;transform:none}
.ba-frame .ba-base{opacity:0;transform:scale(1.04)}
.ba-panel.ba-built .ba-before-cell .ba-base{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .85s var(--ease);transition-delay:0s}
.ba-panel.ba-built .ba-after-cell  .ba-base{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .85s var(--ease);transition-delay:.5s}
.ba-panel.ba-built .ba-before-cell .ba-callout{opacity:1;transition-delay:.1s}
.ba-panel.ba-built .ba-after-cell  .ba-callout{opacity:1;transition-delay:.55s}
@media(prefers-reduced-motion:reduce){.ba-frame .ba-base{opacity:1;transform:none;transition:none}}
/* getting-paid / filing / delivering now use square (1:1) transparent source art, so they fill the
   square frame top-to-bottom, centred, nothing clipped — standard contain, no per-panel overrides. */
@media(max-width:680px){.gal-ba{grid-template-columns:1fr;gap:var(--s6)}.baseg-opt{padding:9px 12px;letter-spacing:.08em}}

/* Stat mini-cards: horizontal scroll rail with arrows (Collins-style impact numbers) */
.cs-statrail{display:flex;align-items:stretch;gap:var(--s3)}
.cs-statrail .sr-vp{flex:1 1 auto;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.cs-statrail .sr-vp::-webkit-scrollbar{display:none}
.sr-track{display:flex;gap:18px;padding:6px 2px 10px}
.stat-card{scroll-snap-align:start;flex:0 0 clamp(220px,26vw,300px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:var(--s6) var(--s6) var(--s5);
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.stat-card:hover{transform:translateY(-4px);border-color:var(--brand)}
.stat-card .big{font-family:var(--font-body);font-weight:500;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.01em;color:var(--brand);line-height:1}
.stat-card .lbl{font-size:var(--t-small);line-height:1.45;color:var(--text-weak);margin-top:var(--s4);max-width:14em}
.sr-arrow{flex:0 0 auto;align-self:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.sr-arrow svg{width:20px;height:20px}
.sr-arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.sr-arrow:disabled{opacity:.28;cursor:default;pointer-events:none}
.sr-arrow:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.cs-statrail.sr-noscroll .sr-arrow{display:none}
@media(max-width:640px){.sr-arrow{display:none}.cs-statrail .sr-vp{-webkit-mask-image:none;mask-image:none}}

.cs-scroller{margin:0}
.cs-scroller-vp{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-l);background:var(--surface)}
.cs-scroller-vp img{display:block;height:clamp(460px,60vw,760px);width:auto;max-width:none}
/* two-section working wall: halves laid end-to-end for one long horizontal scroll, matched height, 16px seam */
.cs-board-stack{display:flex;gap:16px;width:max-content;align-items:stretch}
.cs-scroller figcaption{margin-top:var(--s4);font-size:var(--t-small);color:var(--text-weak);text-align:center}

.cs-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;align-items:flex-start;width:max-content;animation:mq-scroll 132s linear infinite}   /* ~42px/s — 50% slower again; top-aligned cards */
/* non-interactive: marquees keep scrolling regardless of hover/focus */
.mq-item{flex:0 0 auto;margin-right:var(--s5)}
/* social-proof clippings are all the same native width (900px), so fixing the DISPLAY
   width — not the height — renders every tweet's text at the same, readable scale.
   Heights vary; cards are vertically centred into a press-wall. */
.mq-item img{display:block;width:clamp(320px,26vw,400px);height:auto;border-radius:var(--radius-m);border:1px solid var(--line)}
/* round variant: no drop-shadow — on a row of circles the shadows blur into a smudged
   horizontal edge-line under the strip. Circles carry a hairline ring instead. */
.cs-marquee-round .mq-item{width:132px;height:132px;border-radius:50%;overflow:hidden;outline:1px solid rgba(20,10,30,.08);outline-offset:-1px}
.cs-marquee-round .mq-item img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transform-origin:center 40%;border:0;box-shadow:none}
.cs-parts .mq-track{animation-duration:64s}   /* participants scroll livelier than the slow proof strip */
.cs-parts{padding-block:var(--s6)}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}.cs-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ---- Interview face-wall: an immersive cluster of interview portraits ---- */
/* Full-bleed dark band that lives INSIDE the answer section. Own padding (not a .cs-band,
   so the `.beat + .cs-band{padding-top:0}` rule can't strip its top). Footer plum fill. */
/* opportunity-sizing figure inside "The answer" (the 2% made visual) */
.cs-answer-media{margin-top:var(--s7)}
.cs-answer-media .cs-fig-img{max-width:1120px;margin-inline:auto}
.cs-facewall{
  width:100vw;margin-inline:calc(50% - 50vw);margin-block:var(--s7);
  padding:clamp(64px,8vw,140px) clamp(28px,6vw,120px);
  background:radial-gradient(120% 130% at 50% 0%,#302833 0%,#231d28 56%,#191419 100%);
  color:var(--paper)}
.cs-circle-grid{
  --cg-cell:clamp(30px,4.4vw,58px);   /* base grid unit; circles span 2–4 of these */
  --cg-gap:clamp(6px,0.7vw,13px);
  display:grid;grid-template-columns:repeat(auto-fill,var(--cg-cell));
  grid-auto-rows:var(--cg-cell);grid-auto-flow:dense;gap:var(--cg-gap);
  justify-content:center;align-content:center;
  max-width:1360px;margin-inline:auto}
/* .cg-cell owns grid placement + the staggered bubble pop-in; each fires at its own --in
   delay once .cg-go is switched on (by the grid's own IntersectionObserver). */
.cg-cell{grid-column:span var(--s);grid-row:span var(--s);
  opacity:0;transform:translateY(14px) scale(0);
  transition:opacity .45s ease var(--in,0s),
             transform .6s cubic-bezier(.34,1.66,.6,1) var(--in,0s)}   /* overshoot = bubble pop */
.cs-circle-grid.cg-go .cg-cell{opacity:1;transform:translateY(0) scale(1)}
/* .cg-bubble owns the circle + the ambient float (separate element → no transform clash) */
.cg-bubble{margin:0;width:100%;height:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 12px 30px -18px rgba(0,0,0,.6);
  outline:1px solid rgba(255,255,255,.10);outline-offset:-1px;
  animation:cg-float var(--dur,10s) ease-in-out var(--fdelay,0s) infinite}
.cg-bubble img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.cg-bubble:hover{z-index:2;box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 20px 42px -16px rgba(0,0,0,.72)}
.cg-bubble:hover img{transform:scale(1.09)}
@keyframes cg-float{
  0%,100%{transform:translateY(calc(var(--drift,6px) * .5))}
  50%{transform:translateY(calc(var(--drift,6px) * -.5))}}
@media(prefers-reduced-motion:reduce){
  .cg-cell{opacity:1;transform:none;transition:none}
  .cg-bubble{animation:none}}

/* edge-to-edge, full-bleed cinematic photo band */
.cs-bigq-bg{max-width:none;width:100vw;margin-inline:calc(50% - 50vw);padding:0}
.bigq-card{position:relative;isolation:isolate;overflow:hidden;border-radius:0;
  min-height:clamp(360px,56vh,680px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4rem,12vw,10rem) var(--gutter);text-align:center;color:#fff}
.bigq-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bigq-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(130% 85% at 50% 52%,rgba(6,14,10,.5),transparent 72%),linear-gradient(180deg,rgba(6,14,10,.5),rgba(6,14,10,.72))}
.cs-bigq-bg .eyebrow{color:rgba(255,255,255,.9)}
.cs-bigq-bg .bigq-text{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5),0 1px 40px rgba(0,0,0,.4)}


/* ---- Numbers: static responsive grid (no scroll rail / nav arrows); each card carries a Collins-style corner arrow ---- */
.cs-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-top:var(--s2)}
.cs-statgrid .stat-card{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start}
.sc-arrow{align-self:flex-end;width:22px;height:22px;color:var(--brand);opacity:.9;margin-bottom:var(--s4);transition:transform .4s var(--ease)}
.stat-card:hover .sc-arrow{transform:translate(3px,-3px)}
@media(max-width:640px){.cs-statgrid{grid-template-columns:1fr 1fr}}

/* ---- Remove nav arrows from remaining carousels (numbers rail retired; leadership gallery drives via dots/drag) ---- */
.sr-arrow,.gal-arrow{display:none}
.gal-stage{gap:0}


/* ---- Before/After: cohesive lower-third callout (label + metric + year), animates in LAST ---- */
/* Outcome captions sit BELOW the frame, consistent with every other case caption */
/* Before/after caption: a coloured band inside the frame, 16px down, edge-to-edge */
.ba-cap{position:absolute;top:0;left:0;right:0;height:48px;z-index:3;
  display:flex;align-items:center;justify-content:center;padding:0 var(--s4);
  font-family:var(--font-body);font-weight:700;font-size:clamp(12px,1.05vw,15px);line-height:1.2;
  color:#fff;text-align:center;
  opacity:0;transform:translateY(-8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ba-cap-before{background:#cc2b2b}
.ba-cap-after{background:#1a8a52}
.ba-panel.ba-built .ba-before-cell .ba-cap{opacity:1;transform:none;transition-delay:1s}
.ba-panel.ba-built .ba-after-cell .ba-cap{opacity:1;transform:none;transition-delay:1.35s}
@media(prefers-reduced-motion:reduce){.ba-cap{opacity:1;transform:none;transition:none}}
@media(max-width:680px){.ba-note{padding:var(--s7) var(--s4) var(--s4)}}


/* ---- Bet list: numbered circles (proportionate, top-aligned to the first line, text-coloured) ---- */
.cs-list-num{counter-reset:betnum}
.cs-list-num li{counter-increment:betnum;padding-left:2.7em}
.cs-list-num li::before{content:counter(betnum);position:absolute;left:0;top:0;
  width:1.7em;height:1.7em;line-height:1.7em;border-radius:50%;border:1.6px solid currentColor;background:none;
  color:currentColor;opacity:.85;font-family:var(--font-body);font-weight:600;font-size:.8em;
  display:flex;align-items:center;justify-content:center;line-height:1}

/* ---- J. consistent, centered caption treatment across the case study ---- */
.csg-cap,.cs-fig figcaption,.cs-scroller figcaption,.cs-vcap,.cs-opp-cap,.cs-growth figcaption{font-family:var(--font-body);font-size:var(--t-small);line-height:1.55;color:var(--text-weak);text-align:center;margin-left:auto;margin-right:auto}


/* ---- Buy-in artifacts: a collapsed pile (Collins-style) that expands into the carousel on click ---- */
.cs-artifacts{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.cs-pile{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;background:none;border:0;cursor:pointer;padding:var(--s2) 0 0;margin-top:-123px}
.cs-pile-stack{position:relative;display:block;width:min(480px,86vw);height:300px;margin:0 auto}
.cs-pile-stack img{position:absolute;top:50%;left:50%;width:56%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-m);border:1px solid rgba(255,255,255,.16);background:#0b0e13;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6);
  transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));
  z-index:var(--z,1);transition:transform .55s var(--ease),box-shadow .4s var(--ease)}
.cs-pile:hover .cs-pile-stack img,.cs-pile:focus-visible .cs-pile-stack img{
  transform:translate(-50%,-50%) translate(calc(var(--x,0)*1.42),calc(var(--y,0)*1.18)) rotate(calc(var(--r,0deg)*1.32))}
.cs-pile-cta{display:inline-flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:-24px}
.cs-pile-eyebrow{font-family:var(--font-display);font-weight:500;font-size:var(--t-title-s);color:var(--ink);letter-spacing:-.01em;line-height:1}
.cs-pile-line{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:var(--t-body);font-weight:400;letter-spacing:normal;text-transform:none;color:var(--text-weak)}
.cs-pile-line svg{flex:none;transition:transform .3s var(--ease)}
.cs-pile:hover .cs-pile-line svg,.cs-pile:focus-visible .cs-pile-line svg{transform:translateX(5px)}
.cs-artifacts .cs-gal{display:none}
.cs-artifacts.is-open .cs-pile{display:none}
.cs-artifacts.is-open .cs-gal{display:block;animation:artIn .55s var(--ease)}
@keyframes artIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cs-pile-stack img,.cs-pile-line svg{transition:none}.cs-artifacts.is-open .cs-gal{animation:none}}

/* Minimize the expanded buy-in deck back to the pile */
.cs-art-min{display:none}
.cs-artifacts.is-open{display:flex;flex-direction:column;align-items:center}
.cs-artifacts.is-open .cs-gal{width:100%}
.cs-artifacts.is-open .cs-art-min{display:inline-flex;align-items:center;gap:var(--s2);margin:0 auto var(--s5);
  font-family:var(--font-body);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);background:none;border:0;cursor:pointer;padding:var(--s3) var(--s4);border-radius:var(--radius-pill);
  transition:background .3s var(--ease)}
.cs-artifacts.is-open .cs-art-min:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.cs-art-min svg{transition:transform .3s var(--ease)}
.cs-artifacts.is-open .cs-art-min:hover svg{transform:translateY(-3px)}

/* Captions hidden everywhere except hero video + before/after in-frame bands */
.csg-cap,.cs-fig figcaption,.cs-scroller figcaption,.cs-growth figcaption,.device figcaption{display:none}

.cn-toggle{display:none}


/* ===== Lead page: Six Cs list, experience one-liners, quote wave ===== */
.cs-list{list-style:none;margin:var(--s7) 0 0;padding:0;border-top:1px solid var(--line);max-width:none;width:100%}
.cs-list li{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:var(--s5);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--line);transition:background .3s,transform .3s var(--ease);max-width:none;width:100%;margin:0}
.cs-list li::before,.cs-list li::marker{content:none;display:none}
.cs-list .c-num{font-family:var(--font-body);font-weight:600;font-size:var(--t-label);letter-spacing:.14em;color:var(--text-weak)}
.cs-list h3{font-family:var(--font-body);font-weight:700;font-size:var(--t-body);letter-spacing:.16em;text-transform:uppercase;color:#231d28;margin:0}
.cs-list p{color:var(--gray);margin:0;font-size:var(--t-body);line-height:1.7;max-width:40em;font-weight:300}
/* Six Cs accordion: one principle open at a time; rows collapse to labels */
.cs-list li{cursor:pointer}
.cs-list .c-fold{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.cs-list .c-fold>.c-fold-in{overflow:hidden;min-height:0}
.cs-list .c-fold-in p+p{margin-top:.8em}
.cs-list li.open .c-fold{grid-template-rows:1fr}
.cs-list li.open h3{color:var(--brand)}
/* logo · role · dates share one centered axis; the summary tucks beneath the title */
.r-row{row-gap:4px}
.resume-rows .r-row:last-child{border-bottom:none}
.resume-rows{max-width:980px}
.cs-list{max-width:900px}
/* experience summaries: paragraphs, selective weight, linked orgs/awards */
.r-row .one p{margin:0}
.r-row .one p+p{margin-top:.7em}
.r-row .one strong{font-weight:600;color:var(--ink)}
.r-row .one a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(107,100,112,.45);transition:color .3s var(--ease)}
.r-row .one a:hover{color:var(--brand)}
.r-row .co a{display:inline-flex;align-items:center}
.r-row .co{grid-row:1;align-self:center}
.r-row .role{grid-column:2;grid-row:1;align-self:center}
.r-row .yrs{grid-column:3;grid-row:1;align-self:center}
.r-row .one{grid-column:2;grid-row:2;display:block;font-size:var(--t-body);color:var(--text-weak);margin-top:2px;font-weight:400}
/* promoted-role rows: second role/date pair on row 2, summary drops to row 3 */
.r-row .role2{grid-column:2;grid-row:2}
.r-row .yrs2{grid-column:3;grid-row:2;align-self:center}
.r-row.two-roles .one{grid-row:3}
.marquee.qmarq .track{animation-duration:446s;align-items:stretch;height:450px}  /* pinned: tallest card content; keeps band steady with content-visibility */  /* 74 cards @ 12-card/52s px speed, then -20% total */
.qc{display:inline-flex;flex-direction:column;justify-content:flex-start;gap:var(--s5);white-space:normal;width:420px;vertical-align:top;content-visibility:auto;contain-intrinsic-size:420px 450px}  /* off-screen cards skip raster — the 76k-px strip was thrashing GPU tiles and shimmering */
.qc.story{width:940px;contain-intrinsic-size:940px 450px}  /* wide story card keeps the long workshop quote short; fixed above mobile */
.qc.story-m{width:700px;contain-intrinsic-size:700px 450px}  /* medium-wide card tier */
.qc blockquote{font-family:var(--font-body);font-weight:400;font-size:var(--t-lead);line-height:1.65;color:#231d28;margin:0}
.qc .who{font-size:var(--t-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-weak)}
@media (max-width:760px){.cs-list li{grid-template-columns:40px 1fr;grid-template-rows:auto auto}.cs-list p{grid-column:2}.qc{width:78vw;content-visibility:visible;contain-intrinsic-size:none}.qc.story,.qc.story-m{width:86vw}.marquee.qmarq .track{height:auto}}

.resume-sec.tight-top{padding-top:var(--s5)}
.resume-sec .display{font-size:var(--t-h2)}
.cs-preface{max-width:900px;margin:var(--s4) 0 0;color:var(--ink);font-weight:300}
.page-head.no-tail{padding-bottom:var(--s4)}
/* about: the origin story — long-form reading rhythm */
.origin{padding:var(--s8) var(--gutter) var(--s9);max-width:1200px}
.origin.origin-first{padding-top:calc(var(--head-h) + var(--s6))}  /* clears the fixed header now that it opens the page */
/* working theory article */

.wt-article .origin-body a,.wt-sources a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(107,100,112,.45);transition:color .3s var(--ease)}
.wt-article .origin-body a:hover,.wt-sources a:hover{color:var(--brand)}
.origin-body p.wt-colophon{margin-top:var(--s6);color:var(--text-weak);font-size:var(--t-body)}
.wt-sources{max-width:44em;margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s6)}
.wt-sources ul{list-style:none;margin:0;padding:0}
.wt-sources li{font-size:var(--t-body);font-weight:300;color:var(--text-weak);line-height:1.7}
.wt-sources li+li{margin-top:.7em}
details.wt-sources summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
details.wt-sources summary::-webkit-details-marker{display:none}
details.wt-sources summary .eyebrow{margin:0}
details.wt-sources .src-chev{color:var(--text-weak);transition:transform .3s var(--ease)}
details.wt-sources summary:hover .eyebrow,details.wt-sources summary:hover .src-chev{color:var(--brand)}
details.wt-sources[open] .src-chev{transform:rotate(180deg)}
details.wt-sources ul{margin-top:var(--s4)}

/* About: the origin story sits folded between the headline and the lead passage,
   so opening it restores the context the passage's "That's why" points back to. */
details.origin-more{max-width:44em;margin-top:var(--s6)}
details.origin-more summary.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details.origin-more summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
details.origin-more summary::-webkit-details-marker{display:none}
details.origin-more summary .eyebrow{margin:0}
details.origin-more .src-chev{color:var(--text-weak);transition:transform .3s var(--ease)}
details.origin-more summary:hover .eyebrow,details.origin-more summary:hover .src-chev{color:var(--brand)}
details.origin-more[open] .src-chev{transform:rotate(180deg)}
details.origin-more .origin-body{margin-top:var(--s5)}
.origin-lead{margin-top:var(--s6)}
.origin .display{font-size:var(--t-h2);max-width:22em}
.origin-body{max-width:44em;margin-top:var(--s6)}
.origin-body p{font-size:var(--t-lead);font-weight:300;color:var(--ink);line-height:1.75;margin:0}
.origin-body p+p{margin-top:1.15em}
.resume-sec>.eyebrow{font-size:var(--t-body);font-weight:700;letter-spacing:.16em}  /* section overlines match the C labels' size */
.marquee-sec.lead-band{margin-top:var(--s7)}  /* extra air above the testimonial band's top wave */  /* section header takes the intro paragraph's old position */   /* first section hugs the page intro */

.qc .who{display:flex;flex-direction:column;gap:2px}
.qc .who-nm{font-weight:700;color:#231d28;font-size:var(--t-body);transition:color .3s var(--ease)}
.qc:hover .who-nm{color:var(--brand)}
.qc .who-ttl,.qc .who-co{color:var(--text-weak);font-weight:600;font-size:var(--t-label)}

/* hover: a quiet indent and color shift, no background wash */
.cs-list li:hover{transform:translateX(var(--s3))}
.cs-list li:hover h3{color:var(--brand)}
.r-row:hover .role{color:var(--brand)}
.cs-list h3{transition:color .3s}
.r-row .role{transition:color .3s}

/* Letterpress ink: a real grain texture clipped to the glyphs. The specks are the
   page tone, so they read as ink that did not transfer. Base colour is a gradient
   layer underneath, because background-clip:text needs a transparent text colour. */
.hero h1.inked{
  background-image:url("../img/ink-grain.png"), linear-gradient(#3b3242,#3b3242);
  background-size:300px 300px, 100% 100%;
  background-repeat:repeat, no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero h1.inked .hl{
  background-image:url("../img/ink-grain.png"), linear-gradient(var(--accent),var(--accent));
  background-size:300px 300px, 100% 100%;
  background-repeat:repeat, no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion:reduce){.hero h1.inked{background-image:none;color:#3b3242;-webkit-text-fill-color:#3b3242}}

/* background-clip:text cannot coexist with an SVG filter on the same element —
   the texture IS the roughness now, so the filter comes off. */
body .hero h1.inked, body.loaded .hero h1.inked{filter:none}

/* inline links: heavier, pink on hover */
a.inl,.origin-body a,.wt-article .origin-body a,.cs-len a,.ov-lead a{font-weight:600;transition:color .3s var(--ease)}
a.inl:hover,.origin-body a:hover,.wt-article .origin-body a:hover,.cs-len a:hover,.ov-lead a:hover{color:var(--accent)}

/* ============================================================
   CONTACT OVERLAY — same circle wipe as #menu, opened from any
   "Get in touch" trigger. Sits above the menu (900) and dock (880).
   ============================================================ */
#contact{
  position:fixed;inset:0;z-index:1000;background:var(--accent);color:#fff;
  display:grid;place-items:center;padding:calc(var(--head-h) + var(--s6)) var(--gutter) var(--s7);
  clip-path:circle(0% at var(--contact-x,50%) var(--contact-y,50%));
  transition:clip-path .8s var(--ease), visibility 0s linear .8s;visibility:hidden;
  overflow-y:auto;
}
#contact.open{clip-path:circle(150% at var(--contact-x,50%) var(--contact-y,50%));visibility:visible;
  transition:clip-path .8s var(--ease), visibility 0s linear 0s}
.contact-close{
  position:fixed;top:calc((var(--head-h) - 55px) / 2);right:var(--edge);width:55px;height:55px;border-radius:50%;
  background:none;border:1px solid rgba(255,255,255,.55);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s;
}
.contact-close:hover{border-color:var(--tide);color:var(--tide)}
.contact-card{width:min(520px,100%);opacity:0;transform:translateY(16px);
  transition:opacity .6s .3s var(--ease), transform .6s .3s var(--ease)}
#contact.open .contact-card{opacity:1;transform:none}
.contact-card h2{font-size:var(--t-display);line-height:1.08;margin:0 0 var(--s6);color:var(--tide)}
.cf-row{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s5)}
.cf-l{font-family:var(--font-body);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#fff}
.contact-card input,.contact-card textarea,.contact-card select{
  font-family:var(--font-body);font-size:var(--t-body);color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-m);padding:12px 14px;width:100%;resize:vertical;
  transition:border-color .3s,background .3s;
}
.contact-card input:focus,.contact-card textarea:focus,.contact-card select:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2)}
.contact-card input[aria-invalid="true"],.contact-card textarea[aria-invalid="true"],.contact-card select[aria-invalid="true"]{border-color:var(--tide);border-width:2px}
.contact-card input,.contact-card select{height:55px;padding-top:0;padding-bottom:0}   /* = .btn height */
.contact-card .btn.solid{margin-top:var(--s2);width:fit-content;align-self:flex-start;
  background:var(--tide);border-color:var(--tide);color:#fff}
.contact-card .btn.solid:hover{background:#000;border-color:#000}
.contact-card select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
.contact-card select option{color:var(--tide);background:#fff}   /* the native popup uses its own ground */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status{font-family:var(--font-body);font-size:var(--t-label);color:#fff;margin:var(--s4) 0 0;min-height:1.2em}
.cf-status.err{color:var(--tide);font-weight:600}
body.contact-is-open{overflow:hidden}
@media(max-width:600px){.contact-card h2{font-size:var(--t-title-l)}}

/* ============================================================
   ACCESS GATE — frosted over whatever page you are already on.
   No card, no stroke: the page itself is the ground, just frosted.
   The server-side 401 in functions/_middleware.js is the real lock;
   this is the courteous version for someone already browsing.
   ============================================================ */
#gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:calc(var(--head-h) + var(--s6)) var(--gutter) var(--s7);
  backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
  background:rgba(234,228,230,.68);
  opacity:0;visibility:hidden;transition:opacity .55s var(--ease), visibility 0s linear .55s}
#gate.open{opacity:1;visibility:visible;transition:opacity .55s var(--ease), visibility 0s linear 0s}
.gate-form{width:min(460px,100%);transform:translateY(14px);transition:transform .6s .1s var(--ease)}
#gate.open .gate-form{transform:none}
.gate-form h2{font-family:var(--font-display);font-weight:500;font-size:var(--t-display);
  line-height:1.08;margin:0 0 var(--s6);color:var(--ink)}
.gate-form h2 em{font-style:normal;color:var(--accent)}
.gate-form input{width:min(280px,100%);height:55px;font-family:var(--font-body);font-size:var(--t-body);color:var(--ink);
  background:rgba(255,255,255,.55);border:1px solid rgba(35,29,40,.28);border-radius:var(--radius-m);
  padding:0 14px;transition:border-color .3s,background .3s}
.gate-form input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.8)}
.gate-form .btn.solid{margin-top:var(--s5);width:fit-content}
.gate-ask{font-family:var(--font-body);font-size:var(--t-label);line-height:1.5;color:var(--text-weak);margin:var(--s6) 0 0}
.gate-ask a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
.gate-ask a:hover{color:var(--accent)}
.gate-err{font-family:var(--font-body);font-size:var(--t-label);font-weight:600;color:var(--accent);margin:var(--s4) 0 0;min-height:1.2em}
.gate-close{position:fixed;top:calc((var(--head-h) - 55px) / 2);right:var(--edge);width:55px;height:55px;border-radius:50%;
  background:none;border:1px solid rgba(35,29,40,.3);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s,color .3s}
.gate-close:hover{border-color:var(--accent);color:var(--accent)}
body.gate-is-open{overflow:hidden}

/* The lead opens by teasing the origin story. Once that story is expanded the
   tease is redundant and the link points at something already on screen, so the
   phrase becomes a plain consequence instead. */
.origin-lead .if-open{display:none}
.origin-more[open] ~ .origin-lead .if-open{display:inline}
.origin-more[open] ~ .origin-lead .if-closed{display:none}

/* On the home page the logo links to the page you are already on: clicking it
   reloads and flashes the loader. Keep it visible, drop the interaction. */
.brand.is-current{pointer-events:none;cursor:default}

/* Per-key dedication line: only rendered when the access key carries one */
.prepared-for{font-family:var(--font-body);font-size:var(--t-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin:calc(var(--head-h) + var(--s5)) 0 calc(var(--s7) * -1);
  padding:0 var(--gutter);text-align:center}