/* ============================================================================
   AAK PRODUCTION — stylesheet
   Blend of three studied references. Provenance per block is noted inline.
   See DESIGN-MAP.md for the full reasoning.

   01 Tokens              02 Reset / base        03 Ambient shell
   04 Cursor              05 Preloader           06 Header + glow button
   07 Overlay menu        08 Chapter rail        09 Hero (canvas sequence)
   10 Marquee band        11 About               12 Work showcase
   13 Capabilities        13b Lab (product & AI) 14 Process (light)
   15 Matrix              17 Voices
   18 Clients             19 Contact             20 Footer
   21 Tablet              22 Mobile              23 Reduced motion
   24 Markup reconciliation                      25 Work index / inner pages
   26 Small screens (phone build, last so it overrides)
   27 Touch targets
   ========================================================================== */

/* ---------- 00 · FONTS (self-hosted) -------------------------------------
   The four families used to arrive from fonts.googleapis.com: a render-blocking
   stylesheet on a third-party origin, then the woff2 files from a second
   origin — two connections to open before a single word could be drawn, and a
   late swap that moved the type after it was already on screen (CLS 0.22 on
   /about). The same files are served from /assets/fonts now: one origin, one
   round trip, cached for a year by .htaccess. Syne and Instrument Sans are the
   variable files Google itself serves, so one download covers both weights.
   latin-ext is declared separately and is only fetched if a page actually
   prints a character from that range. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/anton-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/anton-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/syne-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/syne-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 01 · TOKENS --------------------------------------------------- */
:root{
  /* ground — kraftloop --hero-bg #06070b */
  --ink:#06070B;
  --ink-2:#0A0B10;
  --ink-3:#101219;

  /* light band — adko --color--background-color #edeceb */
  --bone:#EDECEB;
  --bone-2:#E3E1DE;
  --ink-on-bone:#2C2D2F;

  /* type colour — wegrww --cream #fffde2 */
  --cream:#FFFDE2;
  --cream-80:rgba(255,253,226,.80);
  --cream-55:rgba(255,253,226,.55);
  /* the dim step carries most of the small print — labels, meta, footer — so
     it sits at .48, the floor that still clears 4.5:1 against --ink at 11px.
     It used to be .35, which measured 3.03:1 and failed. */
  --cream-48:rgba(255,253,226,.48);
  --cream-14:rgba(255,253,226,.14);
  --cream-07:rgba(255,253,226,.07);

  /* accents — kraftloop --tt-main-color #ffbf00, wegrww --navy #051236 */
  --amber:#FFBF00;
  --amber-dim:#C99700;
  /* the same signal, mixed for the bone band: #C99700 is 2.26:1 on #EDECEB */
  --amber-ink:#7A5D00;
  --navy:#051236;

  /* type — Anton + Syne + Instrument Sans + Instrument Serif (see DESIGN-MAP §3) */
  --font-display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-title:'Syne', 'Helvetica Neue', sans-serif;
  --font-body:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-accent:'Instrument Serif', Georgia, serif;

  /* fluid scale — adko's proportions, clamp()'d */
  --t-mega:clamp(3rem, 13vw, 11rem);
  --t-display:clamp(2.1rem, 6.4vw, 5.6rem);
  --t-h2:clamp(1.6rem, 3.4vw, 3rem);
  --t-h3:clamp(1.15rem, 1.7vw, 1.55rem);
  --t-body:clamp(.95rem, .4vw + .85rem, 1.08rem);
  --t-small:clamp(.72rem, .25vw + .66rem, .8rem);

  /* tracking — one scale, so a label set in one section matches the same
     label in another. Headlines pull in, uppercase micro-type opens out, and
     nothing in between invents its own value. */
  --ls-display:-.02em;   /* Anton / Syne headlines */
  --ls-title:-.01em;     /* sub-heads and lead paragraphs */
  --ls-soft:.04em;       /* italic serif labels, small mixed-case type */
  --ls-caps:.12em;       /* uppercase buttons, chips and pills */
  --ls-label:.16em;      /* uppercase field and meta labels */
  --ls-wide:.2em;        /* uppercase section keys and eyebrow numbers */
  --ls-mega:.3em;        /* the two decorative wordmarks */

  --shell:1440px;
  --gutter:clamp(1.25rem, 4vw, 4.5rem);
  /* Distance from the viewport edge to the content column.
     --gutter alone is only correct while the viewport is narrower than --shell.
     Past that the shell stops growing and centres, so a box padded by --gutter
     inside it lands further in than one padded by --gutter against the viewport
     — the two conventions drift apart by (100vw - --shell) / 2 and the header
     visibly unhooks from the page. The 50% here resolves against the element's
     own containing block, which excludes the scrollbar, so this never overflows
     the way a 100vw-based version would. */
  --edge:max(var(--gutter), calc(50% - var(--shell) / 2 + var(--gutter)));
  --section-y:clamp(5rem, 11vh, 11rem);
  --gap:1.5rem;                 /* adko --gap */

  --r-sm:6px; --r-md:14px; --r-lg:26px; --r-full:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --touch:44px;
  /* what the fixed header actually measures, not a guess at it: the brand
     lockup (3.3rem) plus the header's own padding top and bottom. Tied to a
     viewport height it read 24px short on a desktop, and every page that
     clears the header with it was pulling its first line up under the bar. */
  --header-h:calc(3.3rem + clamp(1.8rem,4vw,3.2rem));
}

/* ---------- 02 · RESET / BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{list-style:none;padding:0;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--amber);color:var(--ink);}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}

.display{
  font-family:var(--font-display);
  font-size:var(--t-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:var(--ls-title);
  text-transform:uppercase;
}
.lede{max-width:62ch;color:var(--cream-55);}

/* eyebrow — wegrww's italic serif rail label voice */
.eyebrow{
  display:flex;align-items:baseline;gap:.75rem;
  font-family:var(--font-accent);font-style:italic;
  font-size:var(--t-small);letter-spacing:var(--ls-soft);
  color:var(--cream-55);
  margin-bottom:1.5rem;
}
.eyebrow-num{
  font-family:var(--font-body);font-style:normal;font-weight:600;
  font-size:.66rem;letter-spacing:var(--ls-wide);color:var(--amber);
}
/* on the bone band this label is 11.6px, so it is small text and owes 4.5:1.
   .62 measured 3.86; .72 measures 5.2. */
.eyebrow-dark{color:rgba(44,45,47,.72);}
.eyebrow-dark .eyebrow-num{color:var(--navy);}

/* ---------- 03 · AMBIENT SHELL (wegrww fixed ground + kraftloop ethereal) --- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ambient-field{
  position:absolute;inset:-10%;
  background:
    radial-gradient(52% 44% at 22% 18%, rgba(255,191,0,.07) 0%, transparent 68%),
    radial-gradient(46% 40% at 78% 74%, rgba(5,18,54,.55) 0%, transparent 72%),
    linear-gradient(180deg,#06070B 0%,#07080E 55%,#05060A 100%);
  transition:opacity .6s var(--ease);
}
/* grain is a static tile. The old SVG turbulence filter re-rasterised a
   full-viewport layer every frame and was the single biggest source of jank;
   the tile is now WebP at half the old side — 2 kB instead of 10, and the
   repeat is still unreadable at 5% opacity. */
.ambient-grain{position:absolute;inset:0;background:url(assets/grain-64.webp) repeat;background-size:64px 64px;opacity:.055;}
/* light-band inversion of the ground */
body.band-light .ambient-field{background:linear-gradient(180deg,#EDECEB,#E3E1DE);}

/* ---------- 04 · CURSOR (kraftloop #magic-cursor / #ball) ------------------ */
.cursor{position:fixed;inset:0;z-index:9000;pointer-events:none;display:none;
  opacity:0;transition:opacity .25s var(--ease);}
.cursor.is-live{opacity:1;}
.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform;}
/* the arrow is the system's again: a dot drawn in JS updates at the rate
   mousemove fires, which is half the refresh of a 120Hz screen, and the
   lag reads as jitter. The ring stays — it trails on purpose. */
.cursor-dot{display:none;}
.cursor-ring{
  width:36px;height:36px;margin:-18px 0 0 -18px;
  border:1px solid var(--cream-48);
  display:grid;place-items:center;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             background-color .3s var(--ease),border-color .3s var(--ease);
}
.cursor-ring.is-hover{
  width:76px;height:76px;margin:-38px 0 0 -38px;
  background:rgba(255,191,0,.1);border-color:var(--amber);
}
.cursor-label{
  font-family:var(--font-body);font-size:.6rem;font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber);
  opacity:0;transition:opacity .2s;white-space:nowrap;
}
.cursor-ring.is-hover .cursor-label{opacity:1;}
@media (hover:hover) and (pointer:fine){ .cursor{display:block;} }

/* ---------- 05 · PRELOADER (kraftloop .ptr-preloader) --------------------- */
.preloader{position:fixed;inset:0;z-index:9500;background:var(--ink);display:grid;place-items:center;}
.preloader-inner{width:min(520px,78vw);text-align:center;}
.preloader-mark{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:2.2rem;}
.pl-a{font-family:var(--font-display);font-size:clamp(2.6rem,9vw,5rem);line-height:.9;letter-spacing:var(--ls-soft);}
.pl-b{font-family:var(--font-accent);font-style:italic;font-size:clamp(.8rem,2vw,1.1rem);letter-spacing:var(--ls-mega);color:var(--cream-55);}
.preloader-meter{height:1px;background:var(--cream-14);overflow:hidden;}
.preloader-meter span{display:block;height:100%;width:0;background:var(--amber);transition:width .25s linear;}
.preloader-readout{display:flex;justify-content:space-between;margin-top:.9rem;font-size:.66rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);}
.preloader-percent::after{content:'%';}
.preloader-wipe{position:absolute;inset:0;background:var(--ink);transform:translateY(100%);}
.preloader.is-done{pointer-events:none;}

/* ---------- 06 · HEADER + GLOW BUTTON (adko five-layer button) ------------- */
.header{
  position:fixed;inset-inline:0;top:0;z-index:800;
  padding:clamp(.9rem,2vw,1.6rem) var(--edge);
  transition:transform .5s var(--ease),background-color .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{background:rgba(6,7,11,.94);border-bottom-color:var(--cream-07);}
@media (hover:hover) and (pointer:fine){
  .header.is-stuck{background:rgba(6,7,11,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
}
.header.is-hidden{transform:translateY(-110%);}
/* 1fr auto 1fr, not auto 1fr auto: with the outer tracks equal the middle one
   is centred on the header itself. Under auto 1fr auto the status sat in the
   middle of whatever space the brand (109px) and the button cluster (273px)
   left over, which is 82px left of centre — close enough to centre to read as
   a mistake rather than a choice. */
.header-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;}
.header-grid > .brand{justify-self:start;}

.brand{display:flex;align-items:center;gap:.7rem;}
/* one lockup everywhere (header, footer, preloader): AAK over PRODUCTION,
   the second word set wide so the pair reads as a single name */
.brand-type{display:flex;flex-direction:column;gap:.25rem;line-height:1;}
/* the mark is the word "AAK"; the italic line under it finishes the name.
   align-self matters: .brand-type is a flex column, so a mark left on the
   default stretch is pulled out to the width of "PRODUCTION" beneath it and
   painted at the wrong ratio — a squashed AAK, and the image-aspect-ratio
   failure Lighthouse reported. Sized by height alone the mark keeps its own
   3:2, and the word below is tracked to finish level with it. */
.brand-mark{display:block;width:auto;height:2.3rem;align-self:start;}
.brand-type em{font-family:var(--font-accent);font-style:italic;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-80);}
.brand-lg .brand-mark{height:clamp(3rem,6vw,4rem);}
.brand-lg .brand-type em{font-size:.8rem;letter-spacing:.16em;}

.header-meta{display:flex;align-items:center;gap:.5rem;justify-self:center;font-size:.66rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);}
.header-meta-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse-dot 2.4s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.header-right{grid-column:3;display:flex;align-items:center;gap:.9rem;justify-self:end;}
/* under 1024 the row is the logo, the status and the menu button; the CTA does
   not fit beside them and used to clip mid-word on a tablet */
@media (max-width:1023px){.header-right .glow-btn{display:none;}}
/* home opens with its own status line in the hero strip, a few lines below the
   header — printing the same words twice on one screen reads as a mistake */
.page-home .header-meta{display:none;}

.glow-btn{position:relative;display:inline-grid;place-items:center;min-height:var(--touch);padding:0;isolation:isolate;}
.glow-btn-glow{position:absolute;inset:-14px;border-radius:var(--r-full);background:radial-gradient(50% 50% at 50% 50%,rgba(255,191,0,.42),transparent 70%);filter:blur(14px);opacity:0;transition:opacity .45s var(--ease);z-index:-1;}
.glow-btn-border{position:absolute;inset:0;border-radius:var(--r-full);border:1px solid var(--cream-14);transition:border-color .45s var(--ease);}
.glow-btn-inner{position:relative;display:grid;border-radius:var(--r-full);padding:.72rem 1.5rem;}
/* clip on the label row, not the padded pill: the parked label is only 120% of
   its own height below, which the pill's vertical padding would still show */
.glow-btn-swap{display:grid;overflow:hidden;}
.glow-btn-text{grid-area:1/1;font-size:.78rem;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;transition:transform .45s var(--ease),color .45s var(--ease);}
.glow-btn-text-alt{transform:translateY(120%);color:var(--ink);}
.glow-btn::after{content:'';position:absolute;inset:0;border-radius:var(--r-full);background:var(--amber);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1;}
.glow-btn:hover .glow-btn-glow{opacity:1;}
.glow-btn:hover .glow-btn-border{border-color:var(--amber);}
.glow-btn:hover::after{transform:scaleY(1);}
.glow-btn:hover .glow-btn-text{transform:translateY(-120%);}
.glow-btn:hover .glow-btn-text-alt{transform:translateY(0);}
.glow-btn-lg .glow-btn-inner{padding:1.05rem 2.4rem;}
.glow-btn-lg .glow-btn-text{font-size:.85rem;}

.menu-toggle{display:flex;align-items:center;gap:.6rem;min-height:var(--touch);padding:0 .35rem;}
.menu-toggle-label{font-size:.72rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-80);}
.menu-toggle-bars{display:grid;gap:5px;width:24px;}
.menu-toggle-bars i{display:block;height:1px;background:var(--cream);transition:transform .4s var(--ease),width .4s var(--ease);}
.menu-toggle-bars i:last-child{width:60%;justify-self:end;}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:first-child{transform:translateY(3px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:last-child{width:100%;transform:translateY(-3px) rotate(-45deg);}

/* ---------- 07 · OVERLAY MENU (kraftloop .tt-overlay-menu) ---------------- */
.overlay-menu{
  position:fixed;inset:0;z-index:790;
  background:var(--ink-2);
  display:grid;place-items:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  overflow:hidden;
}
.overlay-menu.is-open{clip-path:inset(0 0 0 0);}
.overlay-ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-size:min(12.5vw,15rem);line-height:.8;white-space:nowrap;
  color:var(--cream);opacity:.028;pointer-events:none;user-select:none;
}
.overlay-inner{
  position:relative;width:100%;max-width:var(--shell);
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;
}
.overlay-list li{overflow:hidden;}
.overlay-list a{
  display:flex;align-items:baseline;gap:1.2rem;
  padding:.18em 0;
  font-family:var(--font-display);font-size:clamp(1.9rem,6.4vw,5rem);
  line-height:1.02;text-transform:uppercase;
  color:var(--cream);opacity:.55;
  transform:translateY(110%);
  transition:opacity .35s var(--ease),color .35s var(--ease),transform .8s var(--ease);
}
.overlay-menu.is-open .overlay-list a{transform:none;}
.overlay-menu.is-open .overlay-list li:nth-child(2) a{transition-delay:0s,0s,.06s;}
.overlay-menu.is-open .overlay-list li:nth-child(3) a{transition-delay:0s,0s,.12s;}
.overlay-menu.is-open .overlay-list li:nth-child(4) a{transition-delay:0s,0s,.18s;}
.overlay-menu.is-open .overlay-list li:nth-child(5) a{transition-delay:0s,0s,.24s;}
.overlay-list a[aria-current]{opacity:1;color:var(--amber);}
.overlay-list a[aria-current]::before{opacity:1;}
.overlay-list a::before{
  content:attr(data-num);
  font-family:var(--font-accent);font-style:italic;font-size:.9rem;
  color:var(--amber);opacity:0;transition:opacity .35s var(--ease);
}
.overlay-list a:hover{opacity:1;color:var(--amber);}
.overlay-list a:hover::before{opacity:1;}
.overlay-aside{text-align:right;max-width:26ch;}
.overlay-aside-label{font-family:var(--font-accent);font-style:italic;color:var(--cream-48);font-size:var(--t-small);}
.overlay-aside-mail{display:inline-block;margin:.4rem 0 1.4rem;font-size:1.05rem;color:var(--amber);border-bottom:1px solid transparent;transition:border-color .3s;}
.overlay-aside-mail:hover{border-bottom-color:var(--amber);}
.overlay-aside-note{font-size:var(--t-small);color:var(--cream-48);line-height:1.8;}

/* ---------- 08 · CHAPTER RAIL (wegrww fixed left nav) --------------------- */
.rail{
  /* offset from the content column, not from the viewport: past --shell the
     column stops moving outward and a rail pinned to the glass drifts into the
     void on its own. 5.5rem keeps it in the margin band at every width. */
  position:fixed;left:calc(var(--edge) - 5.5rem);top:50%;transform:translateY(-50%);
  z-index:700;display:none;flex-direction:column;gap:.85rem;
  transition:opacity .4s var(--ease),visibility .4s;
}
.rail.is-off{opacity:0;visibility:hidden;}
/* the resting rail used to sit at .32, and the number inside it at .32 x .7 —
   about 2:1 either way. It is small italic type at the edge of the page, which
   is exactly the type that needs the contrast, so the rest state is .55 (5.9:1
   on the dark ground) and the number no longer dims on top of it. */
.rail a{display:flex;align-items:center;gap:.6rem;font-family:var(--font-accent);font-style:italic;font-size:.72rem;color:var(--cream);opacity:.55;transition:opacity .35s var(--ease),color .35s var(--ease);}
.rail a i{display:block;width:14px;height:1px;background:currentColor;transition:width .35s var(--ease);}
.rail a::before{content:attr(data-num);font-family:var(--font-body);font-style:normal;font-size:.56rem;letter-spacing:var(--ls-label);}
.rail a:hover{opacity:.85;}
.rail a.is-active{opacity:1;color:var(--amber);}
.rail a.is-active i{width:30px;}
/* Resting state is number + tick only. At full width the labels reach ~130px
   into the page and sit on top of every section that starts at the gutter, so
   they open only while the rail itself is hovered or focused. */
.rail a span{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .45s var(--ease),opacity .3s var(--ease);
}
.rail:hover a span,.rail:focus-within a span{max-width:9rem;opacity:1;}
/* the process band is the one bone surface on the page — cream on bone is
   unreadable, so the rail inverts while that section owns the viewport */
/* ink at .55 measures 3.2:1 on the bone band, so the light state carries its
   own, higher rest opacity rather than inheriting the dark one */
.rail.is-light a{color:var(--ink-on-bone);opacity:.72;}
.rail.is-light a.is-active{color:var(--amber-ink);opacity:1;}
/* with script running, the same flip is driven by the band itself, so the rail
   turns dark when the white surface actually has the screen rather than when
   the section's box crosses the middle of it */
body.band-light .rail a{color:var(--ink-on-bone);opacity:.72;}
body.band-light .rail a.is-active{color:var(--amber-ink);opacity:1;}
@media (min-width:1180px){
  .rail{display:flex;}
  /* the rail is fixed to the left edge, so widen the page gutter at the width
     where it appears and nothing runs underneath it */
  :root{--gutter:7.5rem;}
}
/* 32" and 4K: the measure grows with the screen rather than leaving the page in
   a 1440px column with 560px of empty margin on either side. It is set here, on
   --shell itself, because --edge is derived from it — the chapter rail is placed
   off --edge, so widening any one section on its own would put the rail on top
   of that section's text. */
@media (min-width:1800px){
  :root{--shell:1680px;}
}

/* ---------- 09 · HERO (three-row frame, one screen at any size) -----------
   Rebuilt from scratch. The frame is one grid of three rows — the meta strip,
   the statement, the department rail. The strip is pinned to the top edge and
   the rail to the bottom edge, so the elastic middle row absorbs whatever
   height the screen happens to have: a 5.5" phone and a 32" monitor both fill,
   and neither one opens with a hole in the middle of the composition.

   Type only, one accent colour, no photograph — the opening paints in one go
   and costs a font file rather than an image. Width tiers: the statement owns
   the frame up to 1100px, then the studio's direct line takes the space the
   statement does not need, and past 1800px the plate widens and the scale
   steps up instead of stranding the composition in the middle of the screen.
   ------------------------------------------------------------------------- */
.hero{position:relative;z-index:2;}
.hero-frame{
  position:relative;min-height:100svh;width:100%;display:grid;
  padding-block:calc(var(--header-h) + clamp(.6rem,2vh,1.7rem)) clamp(1rem,3vh,2.2rem);
  overflow:hidden;isolation:isolate;background:var(--ink);
}

/* one soft wash so the screen is not a flat black rectangle. A gradient, not
   an image: it costs nothing to paint and nothing to download. */
.hero-aura{
  position:absolute;inset:-12% -20% auto -20%;height:85%;z-index:1;pointer-events:none;
  background:radial-gradient(46% 52% at 26% 42%,rgba(255,191,0,.11),transparent 68%);
}

.hero-plate{
  position:relative;z-index:2;
  width:min(var(--shell),100%);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-rows:auto 1fr auto;gap:clamp(1.2rem,3vh,2.4rem);
}

/* --- row 1: the meta strip ------------------------------------------------ */
.hero-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;margin:0;
  padding-bottom:clamp(.7rem,1.8vh,1.1rem);border-bottom:1px solid var(--cream-07);
  font-size:clamp(.6rem,.45vw + .48rem,.74rem);line-height:1.5;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);
}
.hero-sig{color:var(--cream-80);font-weight:600;}
/* the status sits on the far edge on anything wide enough to hold it, and
   simply wraps into the flow on a phone */
.hero-live{display:inline-flex;align-items:center;gap:.5rem;color:var(--amber);}
/* on a phone the status wraps onto its own line, where pushing it to the right
   edge would leave it stranded; it only takes the far edge once the strip fits
   on one line */
@media (min-width:600px){.hero-live{margin-inline-start:auto;}}
.hero-live i{
  width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 0 rgba(255,191,0,.5);animation:hero-pulse 2.8s var(--ease) infinite;
}
@keyframes hero-pulse{70%{box-shadow:0 0 0 7px rgba(255,191,0,0);}100%{box-shadow:0 0 0 0 rgba(255,191,0,0);}}
@media (prefers-reduced-motion:reduce){.hero-live i{animation:none;}}

/* --- row 2: the statement ------------------------------------------------- */
.hero-mid{display:grid;align-content:center;gap:clamp(1.6rem,4vh,2.6rem);}
.hero-say{min-width:0;display:flex;flex-direction:column;align-items:flex-start;}

/* Anton, the site's display face, set as three two-word lines. At every width
   from 320px to 2560px each line sits on its own row, so the headline never
   breaks in a place nobody chose. */
.hero-head{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.55rem,11vw,7rem);line-height:.92;
  letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--cream);
}
.hero-line{display:block;overflow:hidden;}
.hero-line > span{display:block;}
.hero-line-accent > span{color:var(--amber);}

.hero-sub{
  margin:clamp(1rem,2.4vh,1.7rem) 0 0;max-width:42ch;
  font-size:clamp(1rem,.5vw + .85rem,1.22rem);line-height:1.6;
  letter-spacing:var(--ls-title);color:var(--cream-55);
}
/* the second sentence is for screens with room for it; below 1440px the first
   sentence carries the point on its own */
.hero-sub-more{display:none;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:clamp(1.4rem,3.4vh,2.3rem);}

/* the direct line, shown only where there is width for it — the same three
   details are in the header, the footer and the floating WhatsApp button */
.hero-desk{display:none;}

/* --- row 3: the department rail ------------------------------------------- */
.hero-rail{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,1.8vh,1.1rem) clamp(.9rem,2.5vw,2.4rem);
}
.hero-rail li{
  min-width:0;display:grid;gap:.2rem;align-content:start;
  padding-top:clamp(.6rem,1.5vh,.95rem);border-top:1px solid var(--cream-14);
}
.hero-rail-n{font-family:var(--font-accent);font-style:italic;font-size:.7rem;letter-spacing:var(--ls-caps);color:var(--amber);}
.hero-rail b{
  font-family:var(--font-title);font-weight:700;
  font-size:clamp(.8rem,.35vw + .72rem,.95rem);line-height:1.3;
  letter-spacing:var(--ls-title);color:var(--cream);
}
.hero-rail i{
  font-style:normal;font-size:clamp(.72rem,.28vw + .65rem,.85rem);
  line-height:1.45;letter-spacing:var(--ls-title);color:var(--cream-48);
}

/* --- width tiers ---------------------------------------------------------- */
/* tablet and up: the rail spreads to one row of four */
@media (min-width:900px){
  .hero-rail{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* laptop and up: the statement takes about two thirds and the studio's direct
   line fills the rest, so a wide screen carries content, not background */
@media (min-width:1100px){
  /* the panel's base sits on the same line as the buttons, so the right column
     ends where the left one does instead of floating half way up it */
  .hero-mid{grid-template-columns:minmax(0,1.62fr) minmax(0,.88fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:end;}
  .hero-desk{
    display:grid;gap:.5rem;align-content:start;justify-self:end;width:min(22rem,100%);
    padding:clamp(1.1rem,1.5vw,1.6rem);border:1px solid var(--cream-14);border-radius:var(--r-md);
    background:linear-gradient(180deg,rgba(255,253,226,.045),rgba(255,253,226,0));
  }
  .hero-desk-k{margin:0 0 .15rem;font-size:.62rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--amber);}
  .hero-desk-v{
    font-family:var(--font-accent);font-size:1.12rem;line-height:1.35;
    letter-spacing:var(--ls-soft);color:var(--cream);text-decoration:none;
    transition:color .3s var(--ease);
  }
  .hero-desk-v:hover{color:var(--amber);}
  .hero-desk-wa{margin-top:.5rem;justify-content:center;}
  .hero-desk-note{
    margin:.2rem 0 0;font-family:var(--font-accent);font-style:italic;
    font-size:.92rem;line-height:1.45;letter-spacing:var(--ls-soft);color:var(--cream-55);
  }
}

/* the sentence the narrower screens do not have room for */
@media (min-width:1440px){
  .hero-sub-more{display:inline;}
  .hero-sub{max-width:46ch;}
}

/* 24" and up: cap the frame so the composition does not stretch to the full
   height of a tall monitor, and step the scale up rather than leaving the type
   small in the middle of a large screen */
@media (min-width:1600px){
  .hero-frame{min-height:min(100svh,1020px);}
  .hero-sub{font-size:1.28rem;}
}

/* 32" and 4K: the plate widens past the shell, so the statement, the direct
   line and the rail grow with the screen instead of floating in it */
@media (min-width:1800px){
  .hero-head{font-size:clamp(7rem,7vw,9rem);}
  .hero-sub{font-size:1.36rem;max-width:48ch;}
  .hero-desk{width:min(25rem,100%);}
  .hero-desk-v{font-size:1.25rem;}
  .hero-rail b{font-size:1.06rem;}
  .hero-rail i{font-size:.92rem;}
}

/* ---------- 10 · MARQUEE BAND (adko dual-direction marquees) -------------- */
.band{position:relative;z-index:3;background:var(--ink);padding:clamp(2.5rem,6vh,4.5rem) 0;border-block:1px solid var(--cream-07);overflow:hidden;}
.band-row{overflow:hidden;}
.band-row + .band-row{margin-top:clamp(1.4rem,3vh,2.4rem);}
.band-track{display:flex;width:max-content;}
/* the set is cloned by script.js; only then can -50% loop without a seam */
.band-track.is-looped{animation:scroll-h 38s linear infinite;}
.band-track.is-looped[data-dir="-1"]{animation-direction:reverse;}
.band-set{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding-right:clamp(1.5rem,4vw,3.5rem);}
.band-img{display:block;flex:none;width:clamp(150px,18vw,280px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);}
.band-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s var(--ease);}
.band-img:hover img{filter:none;}
.band-word{font-family:var(--font-display);font-size:clamp(2rem,6vw,5rem);text-transform:uppercase;line-height:1;color:var(--cream);}
.band-word-out{-webkit-text-stroke:1px var(--cream-48);color:transparent;}
.band-mega{font-family:var(--font-display);font-size:clamp(2.6rem,8vw,7rem);text-transform:uppercase;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,191,0,.42);}

/* ---------- 11 · ABOUT (wegrww word reveal) ------------------------------- */
.about{position:relative;z-index:3;min-height:100svh;display:grid;place-items:center;padding:var(--section-y) 0;}
.about-inner{width:min(1000px,100% - (var(--gutter) * 2));margin-inline:auto;text-align:center;}
.about .eyebrow{justify-content:center;}
/* the manifesto headline. .hero-h1 used to be a global rule the hero also
   used; the hero now sets its own scale, so this is its only home. */
.about .hero-h1{
  font-family:var(--font-display);font-size:var(--t-mega);
  line-height:.96;letter-spacing:var(--ls-display);text-transform:uppercase;
  color:var(--cream);margin:clamp(1.2rem,3vh,2.2rem) 0 clamp(1.8rem,4vh,2.8rem);
}
/* The manifesto is a sentence, not a headline: Syne bold at 3rem shouted it and
   the flex row it used to be dropped every whitespace text node between the
   word spans, so the line rendered — and copied — with no spaces at all. It is
   the serif now, set as ordinary inline text with real word spacing, a measure
   that wraps sensibly, and air above and below. */
.about-quote{
  font-family:var(--font-accent);font-weight:400;
  font-size:clamp(1.45rem,2.9vw,2.6rem);line-height:1.34;letter-spacing:.004em;
  word-spacing:.06em;color:var(--cream);
  max-width:26ch;margin-inline:auto;
  padding:clamp(1.6rem,4vh,2.6rem) clamp(0rem,2vw,1.5rem);
  text-wrap:pretty;
}
/* the quote lights word by word as it is read. The unread state used to be
   .14, which is 1.4:1 — text nobody with low vision could find before the
   scroll reached it. On a phone the sentence sets at 23.2px, a hair under the
   24px that counts as large text, so the unread state owes the full 4.5:1 and
   not 3:1: .48 of cream is 4.85 and .6 of amber is 4.74. Both still read as
   "not yet" against the lit word. is-lit is written last so it wins. */
.about-quote .w{display:inline-block;opacity:.48;transition:opacity .4s var(--ease),color .4s var(--ease);}
.about-quote .w.is-gold{color:var(--amber);opacity:.6;}
.about-quote .w.is-lit{opacity:1;}
.about-body{display:grid;gap:1.1rem;max-width:66ch;margin:2.8rem auto 0;color:var(--cream-55);text-align:left;}
.about-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.8rem,6vw,5rem);margin-top:3.2rem;padding-top:2.4rem;border-top:1px solid var(--cream-07);}
.about-stats li{display:flex;flex-direction:column;gap:.35rem;}
.about-stats strong{font-family:var(--font-display);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1;color:var(--amber);}
.about-stats span{font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);}

/* ---------- 12 · WORK SHOWCASE (wegrww sticky stage + adko captions) ------ */
.work{position:relative;z-index:3;background:var(--ink-2);}
.work-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;
  /* height of the progress rail plus its margins — the caption is positioned
     against the sticky, not the stage, so it needs this to land on the stage's
     bottom edge rather than below it */
  --work-foot:calc(1rem + 2px + clamp(1.2rem,3vh,2rem));
}
.work-topbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding:calc(var(--header-h) + 1.2rem) var(--gutter) 1rem;
  max-width:var(--shell);margin-inline:auto;width:100%;
}
.work-topbar .eyebrow{margin-bottom:0;}
.work-topbar .work-filters{flex:1 1 auto;justify-content:center;}
.work-filters{display:flex;flex-wrap:wrap;gap:.4rem;}
.work-filter{
  min-height:36px;padding:.35rem 1rem;border-radius:var(--r-full);
  border:1px solid var(--cream-14);
  font-size:.68rem;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--cream-55);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.work-filter:hover{color:var(--cream);border-color:var(--cream-48);}
.work-filter.is-active{background:var(--amber);border-color:var(--amber);color:var(--ink);}
/* a discipline with nothing behind it yet: still listed, so the row reads as
   the full service list, but plainly not clickable */
.work-filter.is-quiet,.work-filter[disabled]{opacity:.42;cursor:default;}
.work-filter.is-quiet:hover,.work-filter[disabled]:hover{color:var(--cream-55);border-color:var(--cream-14);}
/* thirteen chips in a wrapped row is a dense thing to hit with a thumb, so on
   touch each one takes the full 44 and the row breathes to match */
@media (hover:none){
  .work-filter{min-height:var(--touch);padding-inline:1.1rem;}
  .work-filters{gap:.5rem;}
}
/* the showcase is a cut of the index, so it carries a way out to the rest */
.work-all{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.68rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--cream-55);padding-bottom:.2rem;border-bottom:1px solid var(--cream-14);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.work-all:hover{color:var(--amber);border-color:var(--amber);}
.work-all i{font-style:normal;transition:transform .3s var(--ease);}
.work-all:hover i{transform:translateX(3px);}

.work-stage{position:relative;flex:1;margin:0 var(--edge);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3);}
.work-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s;}
.work-slide.is-active{opacity:1;visibility:visible;}
.work-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease);}
.work-slide.is-active img{transform:scale(1);}
.work-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,7,11,.86) 0%,rgba(6,7,11,.32) 46%,rgba(6,7,11,.7) 100%);}
/* a mobile-first build is shown as the phone it was made for: the tall shot is
   fitted inside the stage instead of being cropped to a landscape crop */
.work-slide-phone{background:radial-gradient(60% 70% at 50% 40%,rgba(255,191,0,.07),transparent 70%),var(--ink-3);}
.work-slide-phone img{object-fit:contain;padding:clamp(1rem,3.4vh,2.6rem);transform:none;}
.work-slide-phone.is-active img{transform:none;}
.work-slide-phone::after{background:linear-gradient(105deg,rgba(6,7,11,.8) 0%,rgba(6,7,11,.12) 42%,rgba(6,7,11,.6) 100%);}
.work-slide.is-empty{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,rgba(255,253,226,.03) 0 12px,transparent 12px 24px), var(--ink-3);}
.work-slide.is-empty::after{display:none;}
.work-slide-ph{font-family:var(--font-display);font-size:clamp(2rem,7vw,5rem);color:var(--cream-14);text-transform:uppercase;}
/* per-slide caption: visible once the phone build stacks the slides, and on a
   wide screen clipped rather than removed — it is what gives each link its
   accessible name while .work-caption carries the copy on screen */
@media (min-width:768px){
  .work-slide-cap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

.work-caption{
  position:absolute;left:var(--edge);bottom:var(--work-foot);z-index:3;
  width:min(46ch,calc(100% - var(--gutter) * 2));padding:clamp(1.4rem,4vw,2.6rem);
  display:grid;gap:.7rem;
}
.work-title{font-family:var(--font-display);font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:.98;text-transform:uppercase;}
.work-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);}
.work-meta strong{font-weight:600;color:var(--amber);}

.work-index{
  position:absolute;right:clamp(1rem,2.4vw,2.2rem);top:50%;transform:translateY(-50%);z-index:3;
  display:none;flex-direction:column;gap:.45rem;text-align:right;
}
/* the inactive slide numbers: .28 measured 1.9:1, and 10px type is exactly
   what has to clear 4.5. .55 does, and still reads a step below the active one */
.work-index button{
  display:block;font-family:var(--font-body);font-size:.64rem;letter-spacing:var(--ls-label);
  color:var(--cream);opacity:.55;transition:opacity .3s var(--ease),color .3s var(--ease);
}
.work-index button[hidden]{display:none;}
.work-index button:hover{opacity:.7;}
.work-index button.is-active{opacity:1;color:var(--amber);}
@media (min-width:900px){ .work-index{display:flex;} }

.work-progress{height:2px;margin:1rem var(--edge) clamp(1.2rem,3vh,2rem);background:var(--cream-07);}
.work-progress span{display:block;height:100%;width:0;background:var(--amber);}

/* ---------- 13 · CAPABILITIES (bento tiles, card flip) -------------------
   Thirteen services used to be an accordion: one full-width row each, a click
   to open, and on a wide screen a column of type with nothing beside it. They
   are tiles now — four to a row at desktop width — and the card turns over on
   hover or keyboard focus, front to back, rather than dropping a second card
   out of its bottom edge.

   Both faces live in one grid cell, so the row is as tall as the taller face
   and nothing on the page moves when a card turns. There is no photograph on
   either side: thirteen tiles meant thirteen more image requests, and the
   frames said nothing the service name did not.
   ------------------------------------------------------------------------- */
.caps{position:relative;z-index:3;padding:var(--section-y) 0;}
.caps-list{display:grid;grid-template-columns:1fr;gap:.7rem;}
/* the three departments, named once above their tiles */
.caps-group{
  grid-column:1/-1;
  padding:clamp(1.4rem,3vh,2.2rem) 0 .2rem;
  font-size:.64rem;font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);
}
.caps-group:first-child{padding-top:0;}
.caps-group span{display:inline-flex;align-items:center;gap:.6rem;}
.caps-group span::before{content:'';width:1.6rem;height:1px;background:var(--amber);}

/* the article is the stage: it holds the perspective and the focus ring and
   has no surface of its own, so the whole card — border, ground and all —
   is what turns */
.cap{position:relative;min-width:0;perspective:1400px;border-radius:var(--r-md);}
.cap:focus{outline:none;}
.cap:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
/* mid-turn a card leans out of its own cell, so it rides over its neighbours */
.cap:hover,.cap:focus-visible,.cap.is-open{z-index:6;}

.cap-flip{
  position:relative;display:grid;min-height:clamp(8.5rem,14vw,11.5rem);
  transform-style:preserve-3d;transition:transform .8s var(--ease);
}
.cap:hover .cap-flip,.cap:focus-visible .cap-flip,.cap.is-open .cap-flip{transform:rotateY(180deg);}

.cap-face{
  grid-area:1/1;min-width:0;display:flex;flex-direction:column;
  padding:clamp(1rem,1.6vw,1.4rem);
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.cap-front{
  justify-content:flex-end;gap:.5rem;
  background:linear-gradient(180deg,rgba(255,253,226,.025),transparent);
}
.cap-num{font-family:var(--font-body);font-size:.66rem;letter-spacing:var(--ls-wide);color:var(--amber);}
.cap-name{
  font-family:var(--font-display);font-size:clamp(1.15rem,1.9vw,1.75rem);
  line-height:1.02;text-transform:uppercase;color:var(--cream);
}
.cap-tag{font-family:var(--font-accent);font-style:italic;font-size:var(--t-small);color:var(--cream-48);}

.cap-back{
  transform:rotateY(180deg);
  justify-content:center;gap:.55rem;
  border-color:rgba(255,191,0,.45);
  background:linear-gradient(180deg,rgba(255,191,0,.07),rgba(9,10,15,.55));
}
.cap-back-k{font-size:.6rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--amber);}
.cap-back p{margin:0;font-size:.82rem;line-height:1.5;color:var(--cream-80);}
.cap-back ul{display:flex;flex-wrap:wrap;gap:.3rem;}
.cap-back li{
  padding:.22rem .55rem;border:1px solid var(--cream-14);border-radius:var(--r-full);
  font-size:.6rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-55);
}

/* the studio card is the bento's wide tile: it is the argument the twelve
   services add up to, so it reads as a statement rather than a service */
.cap-advantage .cap-front{background:linear-gradient(135deg,rgba(255,191,0,.08),rgba(255,253,226,.02));}
.cap-advantage .cap-name{font-size:clamp(1.3rem,2.6vw,2.4rem);}

/* A finger has no hover, so on touch the turn is a tap: script puts .is-open on
   the card that was tapped and takes it off the one before it, and the same
   rotation above does the rest. The card has to look tappable or it reads as a
   card that does nothing, so the front carries one word in the corner and the
   back carries the way out. Both faces are in the accessibility tree the whole
   time — the turn is a transform, not a disclosure — so nothing is announced.

   A phone prints one column, and the two faces share a grid cell, so the row
   is as tall as the back: the detail never has to fit the front's box. */
@media (hover:none){
  .cap{cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .cap-face{position:relative;}
  /* the corner word: the front invites the turn, the back offers the way back */
  /* the word is drawn for the eye only: both faces are already in the
     accessibility tree, so a screen reader has the detail without turning the
     card and does not need to be told to tap it. The plain declaration comes
     first for a browser that does not parse the alt-text form and would
     otherwise drop the word altogether. */
  .cap-front::after,.cap-back::after{
    content:'Tap';content:'Tap' / '';position:absolute;top:clamp(1rem,1.6vw,1.4rem);right:clamp(1rem,1.6vw,1.4rem);
    font-size:.66rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-48);
    transition:opacity .3s var(--ease);
  }
  .cap-back::after{content:'Close';content:'Close' / '';color:var(--amber);}
  /* mid-turn the word would swing through the card face on, so it steps aside */
  .cap.is-open .cap-front::after{opacity:0;}
  /* the name is the only thing telling the reader which card turned over, so
     the detail keeps a little room for the corner word beside it */
  .cap-back-k{padding-right:3.2rem;}
  /* the front sits at the foot of a card sized by the back, which on a tall
     tile leaves the number and the name floating alone in the middle */
  .cap-front{justify-content:flex-end;}
}
/* a stylus and a touch screen both report no hover but do have a fine pointer,
   and a tile whose detail only arrives on tap is still the right card there */
@media (hover:none) and (max-width:599px){
  /* the floor only has to clear the front; a card whose detail runs longer
     takes the height it needs, because both faces share the one grid cell */
  .cap-flip{min-height:clamp(8rem,28vw,12rem);}
  .cap-back p{font-size:.86rem;}
}
/* the turn is decoration; without it the card still answers, by swapping faces */
@media (prefers-reduced-motion:reduce){
  .cap-flip{transition:none;}
}

@media (min-width:600px){
  .caps-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
}
@media (min-width:1024px){
  .caps-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;}
  .cap-advantage{grid-column:1/-1;}
  /* the wide tile turns the same way, but its back has room to breathe */
  .cap-advantage .cap-flip{min-height:clamp(9rem,12vw,12rem);}
  .cap-advantage .cap-back{gap:.7rem;}
  .cap-advantage .cap-back p{font-size:.95rem;max-width:70ch;}
}

/* ---------- 13b · LAB — PRODUCT & AI (adko bento + wegrww instrument panels)
   Each card is fronted by a CSS-only instrument. Everything that moves is a
   transform or an opacity, and a card offscreen is paused (.is-paused). */
.lab{position:relative;z-index:3;padding:var(--section-y) 0;}
.lab-head{max-width:64ch;margin-bottom:clamp(2.2rem,5.5vh,3.6rem);}
.lab-head .lede{margin-top:1.1rem;}
.lab-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
.lab-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,253,226,.025),transparent);
  transition:border-color .5s var(--ease);
  /* content-visibility:auto was tried here and taken back out. Warm, it buys
     nothing on a desk (p90 18.2ms either way) and it costs on a phone, where
     every card pays a 50-68ms frame the moment it comes into range: 6x-CPU
     390px pass, p90 31.5ms with it against 18.7ms without. */
}
.lab-card:hover{border-color:var(--cream-14);}
.lab-card.is-target{border-color:rgba(255,191,0,.45);}
.lab-viz{
  position:relative;display:grid;place-items:center;overflow:hidden;
  height:clamp(200px,20vw,236px);container-type:inline-size;
  border-bottom:1px solid var(--cream-07);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,191,0,.07),transparent 62%),var(--ink-2);
}
.lab-body{display:flex;flex-direction:column;gap:.9rem;flex:1;padding:clamp(1.4rem,3vw,2.2rem);}
.lab-tag{display:flex;align-items:baseline;gap:.7rem;font-family:var(--font-accent);font-style:italic;font-size:var(--t-small);letter-spacing:var(--ls-soft);color:var(--cream-55);}
.lab-tag span{font-family:var(--font-body);font-style:normal;font-weight:600;font-size:.66rem;letter-spacing:var(--ls-wide);color:var(--amber);}
/* Syne at 800 read as a generic tech-deck heading here — the card names are
   the loudest thing in this section and they had no voice of their own. Anton
   is the site's display cut and the service tiles above already carry it, so
   the two sections now speak with the same face. */
.lab-body h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.04;
  letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--cream);
}
.lab-body > p:not(.lab-tag){max-width:60ch;font-size:.95rem;color:var(--cream-55);}
.lab-body ul{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem;}
.lab-body li{padding:.3rem .85rem;border:1px solid var(--cream-14);border-radius:var(--r-full);font-size:.66rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-55);}
.lab-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  margin-top:clamp(1.8rem,4vh,2.8rem);padding-top:1.4rem;border-top:1px solid var(--cream-07);
}
.lab-foot p{font-size:.9rem;color:var(--cream-48);}
.lab-foot .more-link{margin-top:0;}
@media (min-width:700px){
  .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lab-card:last-child{grid-column:1 / -1;}
}
@media (min-width:1100px){
  .lab-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .lab-card,.lab-card:last-child{grid-column:span 2;}
  .lab-card:nth-child(-n+2){grid-column:span 3;}
}

/* apps — two handsets, one roadmap; feeds scroll, notifications land */
.viz-phones{position:absolute;inset:15% 0 auto;height:100%;display:flex;justify-content:center;gap:clamp(2.6rem,12cqi,4.4rem);}
.phone{position:relative;height:100%;aspect-ratio:9/18.5;border:1px solid var(--cream-14);border-radius:22px;background:var(--ink);}
.phone::before{content:'';position:absolute;top:9px;left:50%;width:30%;height:8px;margin-left:-15%;border-radius:6px;background:var(--cream-14);}
.phone-alt{transform:translateY(-7%);border-radius:16px;}
.phone-alt::before{width:8px;margin-left:-4px;}
.phone-screen{position:absolute;inset:26px 7px 0;overflow:hidden;border-radius:10px 10px 0 0;}
.phone-feed{display:grid;gap:6px;padding-bottom:6px;animation:labFeed 12s linear infinite;}
.phone-alt .phone-feed{animation-duration:15s;}
.phone-feed i{display:block;height:11px;border-radius:4px;background:var(--cream-07);}
.phone-feed i:nth-child(6n+1){height:54px;background:linear-gradient(135deg,rgba(255,191,0,.42),rgba(5,18,54,.9));}
.phone-alt .phone-feed i:nth-child(6n+1){background:linear-gradient(135deg,rgba(255,253,226,.3),rgba(5,18,54,.95));}
.phone-feed i:nth-child(6n+3){width:68%;}
.phone-feed i:nth-child(6n+4){height:30px;background:rgba(255,253,226,.045);}
.phone-feed i:nth-child(6n+5){width:52%;}
.phone-os{position:absolute;top:24%;right:calc(100% + .6rem);padding:.2rem .55rem;border:1px solid var(--cream-14);border-radius:var(--r-full);font-size:.56rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-55);white-space:nowrap;}
.phone-alt .phone-os{right:auto;left:calc(100% + .6rem);}
.phone-toast{
  position:absolute;top:30px;left:-8px;right:-8px;padding:.35rem .5rem;border-radius:8px;
  background:rgba(255,253,226,.94);box-shadow:0 8px 24px rgba(0,0,0,.45);color:var(--ink);font-size:.56rem;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-10px);animation:labToast 7s var(--ease) infinite;
}
.phone-alt .phone-toast{animation-delay:3.5s;}
@keyframes labFeed{to{transform:translateY(-50%);}}
@keyframes labToast{0%,6%{opacity:0;transform:translateY(-10px);}12%,40%{opacity:1;transform:none;}48%,100%{opacity:0;transform:translateY(-10px);}}

/* automation — trigger, agent, action; a pulse runs the line, the log fills */
.viz-flow{display:grid;gap:1rem;width:calc(100% - 2.4rem);max-width:470px;}
.flow-row{display:flex;align-items:center;}
.flow-node{
  display:grid;gap:.1rem;flex:none;padding:.5rem .7rem;border:1px solid var(--cream-14);border-radius:10px;
  background:var(--ink);font-size:.62rem;line-height:1.3;white-space:nowrap;color:var(--cream-55);
}
.flow-node b{font-family:var(--font-title);font-weight:700;font-size:.72rem;letter-spacing:var(--ls-soft);color:var(--cream);}
.flow-node-ai{position:relative;border-color:rgba(255,191,0,.5);}
.flow-node-ai b{color:var(--amber);}
.flow-node-ai::after{content:'';position:absolute;inset:-1px;border:1px solid var(--amber);border-radius:inherit;opacity:0;animation:labPing 2.4s var(--ease) infinite;}
.flow-line{position:relative;flex:1;min-width:12px;height:1px;background:var(--cream-14);}
.flow-line i{position:absolute;inset:0;animation:labRun 2.4s linear infinite;}
.flow-line ~ .flow-line i{animation-delay:1.2s;}
.flow-line i::after{content:'';position:absolute;left:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);}
.flow-log{display:grid;gap:.35rem;}
.flow-log li{
  display:flex;align-items:center;gap:.55rem;padding:.38rem .65rem;border:1px solid var(--cream-07);border-radius:8px;
  background:rgba(255,253,226,.02);font-size:.64rem;color:var(--cream-55);
  opacity:0;transform:translateY(6px);animation:labLog 7.2s var(--ease) infinite;
}
.flow-log li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#6FD39A;}
.flow-log li:nth-child(2){animation-delay:.9s;}
.flow-log li:nth-child(3){animation-delay:1.8s;color:var(--cream-80);}
.flow-log li:nth-child(3)::before{background:var(--amber);animation:labBlink 1.2s steps(2,jump-none) infinite;}
@keyframes labPing{from{opacity:.8;transform:none;}to{opacity:0;transform:scale(1.18,1.45);}}
@keyframes labRun{0%{opacity:0;transform:translateX(0);}15%,85%{opacity:1;}100%{opacity:0;transform:translateX(100%);}}
@keyframes labLog{0%{opacity:0;transform:translateY(6px);}8%,78%{opacity:1;transform:none;}90%,100%{opacity:0;transform:none;}}
@keyframes labBlink{to{opacity:.25;}}

/* custom software — an internal dashboard; the chart keeps reporting */
.viz-dash{
  position:absolute;inset:15% 8% -1px;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--cream-14);border-bottom:0;border-radius:12px 12px 0 0;background:var(--ink);
}
.dash-bar{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid var(--cream-07);}
.dash-bar i{width:7px;height:7px;border-radius:50%;background:var(--cream-14);}
.dash-body{display:flex;flex:1;min-height:0;}
.dash-side{display:grid;align-content:start;gap:9px;width:22%;padding:12px 10px;border-right:1px solid var(--cream-07);}
.dash-side i{height:6px;border-radius:3px;background:var(--cream-07);}
.dash-side i:first-child{width:72%;background:rgba(255,191,0,.6);}
.dash-main{display:flex;flex-direction:column;flex:1;gap:10px;min-width:0;padding:12px 12px 0;}
.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.dash-kpis i{position:relative;height:30px;border:1px solid var(--cream-07);border-radius:6px;background:rgba(255,253,226,.02);}
.dash-kpis i::after{content:'';position:absolute;left:8px;bottom:7px;width:45%;height:6px;border-radius:3px;background:var(--cream-14);}
.dash-kpis i:first-child::after{background:var(--amber);}
.dash-chart{display:flex;flex:1;align-items:flex-end;gap:6%;min-height:0;padding:0 4px;border-bottom:1px solid var(--cream-07);}
.dash-chart i{
  flex:1;height:100%;border-radius:3px 3px 0 0;transform-origin:bottom;transform:scaleY(var(--h));
  background:linear-gradient(180deg,rgba(255,191,0,.85),rgba(255,191,0,.12));
  animation:labBar 4.8s var(--ease-io) infinite;
}
.dash-chart i:nth-child(even){background:linear-gradient(180deg,var(--cream-48),var(--cream-07));}
.dash-chart i:nth-child(2){animation-delay:-.6s;}
.dash-chart i:nth-child(3){animation-delay:-1.2s;}
.dash-chart i:nth-child(4){animation-delay:-1.8s;}
.dash-chart i:nth-child(5){animation-delay:-2.4s;}
.dash-chart i:nth-child(6){animation-delay:-3s;}
.dash-chart i:nth-child(7){animation-delay:-3.6s;}
@keyframes labBar{0%,100%{transform:scaleY(var(--h));}50%{transform:scaleY(calc(var(--h) * .55));}}

/* crm — a deal travels the pipeline from first touch to won */
.viz-crm{width:calc(100% - 2.4rem);max-width:520px;}
.crm-board{--g:8px;--p:8px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);}
.crm-col{
  display:grid;align-content:start;gap:6px;min-width:0;min-height:152px;padding:var(--p);
  border:1px solid var(--cream-07);border-radius:10px;background:rgba(255,253,226,.025);
}
.crm-col b{margin-bottom:2px;overflow:hidden;font-size:.5rem;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:var(--cream-48);}
.crm-col:nth-child(4) b{color:#6FD39A;}
.crm-col i{height:22px;border-radius:6px;background:var(--cream-07);}
.crm-deal{
  --i:calc(var(--p) + 1px);--s:calc(100% + 2 * var(--i) + var(--g));
  position:absolute;left:var(--i);bottom:var(--i);width:calc((100% - 3 * var(--g)) / 4 - 2 * var(--i));height:26px;
  border:1px solid rgba(255,191,0,.6);border-radius:6px;
  background:linear-gradient(135deg,rgba(255,191,0,.3),rgba(255,191,0,.08));
  animation:labDeal 8s var(--ease) infinite;
}
.crm-deal::before{content:'';position:absolute;left:7px;top:50%;width:48%;height:5px;margin-top:-2.5px;border-radius:3px;background:var(--amber);}
@keyframes labDeal{
  0%{opacity:0;transform:translateX(0);}
  5%,20%{opacity:1;transform:translateX(0);}
  28%,43%{transform:translateX(var(--s));}
  51%,66%{transform:translateX(calc(var(--s) * 2));}
  74%,92%{opacity:1;transform:translateX(calc(var(--s) * 3));}
  100%{opacity:0;transform:translateX(calc(var(--s) * 3));}
}

/* narrow panels (phones, tablet columns, 3-up desktop row) */
@container (max-width:420px){
  .viz-phones{gap:max(1.4rem,8cqi);}
  .phone-os{padding:.55rem .2rem;writing-mode:vertical-rl;}
  .phone:not(.phone-alt) .phone-os{transform:rotate(180deg);}
}
@container (max-width:340px){
  .viz-flow,.viz-crm{width:calc(100% - 1.4rem);}
  .flow-node{padding:.45rem .5rem;}
  .crm-board{--g:5px;--p:5px;}
  .crm-col b{letter-spacing:var(--ls-soft);}
}

/* ai video — a prompt types, three formats render, the playhead runs */
.viz-gen{display:grid;gap:12px;width:calc(100% - 2.4rem);max-width:520px;}
.gen-prompt{
  display:flex;align-items:center;gap:.55rem;justify-self:center;max-width:100%;padding:.5rem .9rem;
  border:1px solid var(--cream-14);border-radius:var(--r-full);background:var(--ink);
  font-size:.66rem;white-space:nowrap;color:var(--cream-80);
}
.gen-prompt::before{content:'';flex:none;width:7px;height:7px;background:var(--amber);transform:rotate(45deg);}
.gen-prompt span{position:relative;overflow:hidden;}
.gen-prompt span::after{
  content:'';position:absolute;inset:0;border-left:1px solid var(--amber);background:var(--ink);
  transform:translateX(100%);animation:labType 6s infinite;
}
.gen-frames{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:min(96px,24cqi);}
.gen-f{position:relative;height:100%;overflow:hidden;border:1px solid var(--cream-14);border-radius:8px;}
.gen-wide{aspect-ratio:16/9;background:linear-gradient(180deg,#1d1307 0%,#8a4f0e 48%,#FFBF00 58%,#2a1a07 59%,#06070B 100%);}
.gen-tall{aspect-ratio:9/16;background:radial-gradient(circle at 50% 34%,rgba(255,253,226,.85) 0 11%,transparent 12%),linear-gradient(180deg,#0d1d46,#051236 60%,#020611);}
.gen-sq{aspect-ratio:1;background:radial-gradient(55% 55% at 50% 62%,rgba(255,191,0,.6),transparent 72%),linear-gradient(135deg,#1a1c24,#06070B);}
.gen-f em{position:absolute;left:6px;bottom:4px;font-size:.5rem;font-style:normal;font-weight:600;letter-spacing:var(--ls-label);color:var(--cream-80);}
.gen-f i{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,253,226,.3) 50%,transparent 70%);transform:translateX(-100%);animation:labSheen 3.6s var(--ease-io) infinite;}
.gen-tall i{animation-delay:.4s;}
.gen-sq i{animation-delay:.8s;}
.gen-track{position:relative;height:16px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--cream-07) 0 22px,transparent 22px 25px);}
.gen-track i{position:absolute;inset:-4px 0;animation:labPlay 6s linear infinite;}
.gen-track i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 8px var(--amber);}
@keyframes labType{0%{transform:translateX(0);animation-timing-function:steps(31,end);}45%,100%{transform:translateX(100%);}}
@keyframes labSheen{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}
@keyframes labPlay{from{transform:translateX(0);}to{transform:translateX(100%);}}

/* ---------- 14 · PROCESS — LIGHT BAND (adko bone surface) ---------------- */
.process{position:relative;z-index:3;background:var(--bone);color:var(--ink-on-bone);height:340vh;}
.process-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;}
.process-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  width:calc(100% - var(--edge) * 2);margin-inline:auto;
}
/* The band opens out of a dot: while the section takes the screen, script
   scrubs this disc from a circle in the middle of the viewport up to full
   cover, and the section hands it the bone surface for the duration. A disc
   150vmax across covers the corners at any ratio (the worst case is a square
   viewport, where the corner sits 70.7vmax from the centre). Transform only —
   no layout, no repaint of the type behind it.
   Off unless script says otherwise: with scripts off, on a phone, or under
   reduced motion the section paints the colour itself as it always did. */
.process-veil{display:none;}
.process.is-growing{background:transparent;}
.process.is-growing .process-veil{
  display:block;position:absolute;left:50%;top:50%;z-index:0;
  width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;
  border-radius:50%;background:var(--bone);pointer-events:none;will-change:transform;
}
/* the eyebrow above already says what the band is, so on a wide screen the
   section's heading only has to exist for the outline and for a screen reader;
   the phone build below turns it back into visible type */
.process-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.process-mega{font-family:var(--font-display);font-size:clamp(2.6rem,8.4vw,7.5rem);line-height:.9;text-transform:uppercase;color:var(--navy);}
.process-copy{max-width:44ch;margin-top:1.2rem;color:rgba(44,45,47,.72);}
.process-meta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem;}
.process-meta span{display:flex;flex-direction:column;gap:.2rem;padding:.55rem 1rem;border:1px solid rgba(44,45,47,.16);border-radius:var(--r-sm);}

.process-steps{border-top:1px solid rgba(44,45,47,.14);}
.process-steps li{
  display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:baseline;
  padding:clamp(.8rem,1.9vh,1.3rem) 0;
  border-bottom:1px solid rgba(44,45,47,.14);
  font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.9rem);
  text-transform:uppercase;line-height:1.05;
  /* the rows the scrub has not reached yet. They are bold 20px and up — large
     text, so they owe 3:1 and not 4.5:1 — and .28 measured 1.77. .62 measures
     3.90 and still reads a clear step below the navy of the active row. The
     1.25rem floor is what keeps "large" true at the narrow end. */
  color:rgba(44,45,47,.62);
  transition:color .45s var(--ease),padding-left .45s var(--ease);
}
.process-steps li.is-active{color:var(--navy);padding-left:.6rem;}
.process-steps li.is-past{color:rgba(44,45,47,.72);}
/* the step name is the row; its copy and dates are the panel's business here,
   so they stay in the markup and out of the layout until the phone build */
.process-step-name{font:inherit;letter-spacing:inherit;color:inherit;}
.process-step-copy,.process-step-meta{display:none;}

/* ---------- 15 · MATRIX (adko card grid, kraftloop lead-card lift) -------- */
.matrix{position:relative;z-index:3;padding:var(--section-y) 0;}
.matrix-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:stretch;}
.mcard{
  display:flex;flex-direction:column;gap:1rem;min-width:0;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,253,226,.025),transparent);
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.mcard:hover{transform:translateY(-6px);border-color:var(--cream-14);}
.mcard header{display:grid;gap:.5rem;}
.mcard header p{font-size:.64rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);}
/* These three headings are an argument, not a product list, so they are set in
   Instrument Serif — the studio's editorial face — rather than Syne at 800,
   which is the weight the site uses for UI labels and read as one here. A serif
   looks smaller at the same size, so it is set a step up and at its own
   tracking instead of the title face's negative one. */
.mcard h3{
  font-family:var(--font-accent);font-weight:400;
  font-size:clamp(1.5rem,1.05vw + 1.25rem,2.1rem);
  line-height:1.16;letter-spacing:0;color:var(--cream);
}
.mcard p{color:var(--cream-55);font-size:.95rem;}
/* the rule sits under the header, not at the bottom of the card: pushed down
   with margin-top:auto it landed at three different heights, one per list */
.mcard ul{display:grid;gap:.5rem;padding-top:1rem;border-top:1px solid var(--cream-07);}
.mcard li{display:flex;gap:.6rem;font-size:.86rem;color:var(--cream-55);}
.mcard li::before{content:'—';color:var(--cream-14);}
.mcard-lead{
  background:linear-gradient(180deg,rgba(255,191,0,.1),rgba(255,191,0,.02));
  border-color:rgba(255,191,0,.28);
}
.mcard-lead h3,.mcard-lead header p{color:var(--amber);}
.mcard-lead li::before{color:var(--amber);}

/* ---------- 17 · VOICES (kraftloop 3-column vertical marquee) ------------- */
.voices{position:relative;z-index:3;padding:var(--section-y) 0;overflow:hidden;}
.voices-head{max-width:var(--shell);margin:0 auto clamp(2rem,5vh,3rem);padding-inline:var(--gutter);text-align:center;}
.voices-head .eyebrow{justify-content:center;}
.voices-grid{
  display:grid;grid-template-columns:1fr;gap:1rem;
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);
  height:clamp(520px,72vh,760px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.voices-col{display:grid;gap:1rem;align-content:start;animation:scroll-vertical var(--dur,46s) linear infinite;}
.voices-col-rev{animation-direction:reverse;}
@keyframes scroll-vertical{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.voices-grid:hover .voices-col{animation-play-state:paused;}
.voice{
  display:grid;gap:1rem;padding:clamp(1.2rem,2.6vw,1.8rem);
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,253,226,.03),transparent);
}
.voice-quote{font-family:var(--font-accent);font-size:1.02rem;line-height:1.6;color:var(--cream-80);}
.voice-by{display:flex;flex-direction:column;gap:.1rem;}
.voice-by b{font-family:var(--font-title);font-weight:700;font-size:.9rem;}
.voice-by span{font-size:.66rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-48);}

/* ---------- 18 · CLIENTS (adko logos marquee) ---------------------------- */
.clients{position:relative;z-index:3;padding:clamp(2rem,5vh,3.4rem) 0;border-block:1px solid var(--cream-07);overflow:hidden;}
.clients-track{display:flex;width:max-content;animation:scroll-h 34s linear infinite;}
@keyframes scroll-h{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clients-set{display:flex;align-items:center;gap:clamp(2rem,6vw,5rem);padding-right:clamp(2rem,6vw,5rem);}
.clients-set span{font-family:var(--font-title);font-weight:700;font-size:clamp(.95rem,1.7vw,1.35rem);letter-spacing:var(--ls-soft);white-space:nowrap;color:var(--cream-48);transition:color .4s var(--ease);}
.clients-set span:hover{color:var(--cream);}
.clients:hover .clients-track{animation-play-state:paused;}

/* ---------- 19 · CONTACT (wegrww close + adko form) ---------------------- */
.contact{position:relative;z-index:3;padding:var(--section-y) 0;}
.contact-head{max-width:20ch;margin-bottom:clamp(2.4rem,6vh,4rem);}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);}

.scope{display:grid;gap:1.4rem;align-content:start;}
/* pathway + running estimate share the top row on anything wider than a phone */
.scope-top{display:grid;gap:1.1rem;align-items:start;}
.scope-step-label{font-size:.66rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);}
.scope-modes{display:flex;gap:.4rem;}
.scope-mode{
  flex:1;min-height:var(--touch);padding:.6rem 1rem;border-radius:var(--r-sm);
  border:1px solid var(--cream-14);font-size:.72rem;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--cream-55);cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.scope-mode:hover{border-color:var(--cream-48);color:var(--cream);}
.scope-mode:has(:checked){background:var(--cream);border-color:var(--cream);color:var(--ink);}
/* the chips are grouped by department so the list reads as three teams, and
   each one spells out what it covers — nobody should have to guess whether
   "Social" includes the edit */
.scope-group{
  padding:.9rem 0 .1rem;
  font-size:.62rem;font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);
}
/* the bento: one block per team, so the seventeen ticks read as four short
   lists side by side instead of one column with the page empty beside it */
.scope-bento{display:grid;grid-template-columns:1fr;gap:.7rem;}
.scope-block{
  display:grid;align-content:start;gap:.45rem;
  padding:clamp(.8rem,1.6vw,1.1rem);
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,253,226,.025),transparent);
}
.scope-block .scope-group{padding:0 0 .25rem;}
.scope-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.45rem;}
.scope-chips[hidden]{display:none;}
/* the phone's team buttons: printed at every width, shown under 768px only */
.scope-drop{display:none;}
.chip{
  display:grid;gap:.25rem;align-content:start;
  min-height:var(--touch);padding:.6rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--cream-14);font-size:.78rem;color:var(--cream);
  cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.chip-sub{font-style:normal;font-size:.62rem;line-height:1.45;letter-spacing:var(--ls-soft);color:var(--cream-55);}
.chip:hover{border-color:var(--cream-48);}
.chip:has(:checked){background:rgba(255,191,0,.12);border-color:var(--amber);color:var(--amber);}
.chip:has(:checked) .chip-sub{color:rgba(255,191,0,.72);}
.scope-card{
  display:grid;gap:.9rem;align-content:start;padding:clamp(1.2rem,3vw,1.8rem);
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,253,226,.03),transparent);
}
.scope-card-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.scope-k{font-size:.66rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);}
.scope-v{margin:0;font-family:var(--font-title);font-weight:700;font-size:1.05rem;color:var(--amber);text-align:right;}
.scope-note{font-family:var(--font-accent);font-style:italic;font-size:.82rem;color:var(--cream-48);}

.intake{display:grid;gap:1.1rem;align-content:start;}
.field{display:grid;gap:.45rem;}
.field label{font-size:.66rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);}
.field input,.field textarea,.field select{
  width:100%;min-height:var(--touch);padding:.8rem 1rem;
  background:rgba(255,253,226,.03);border:1px solid var(--cream-14);border-radius:var(--r-sm);
  color:var(--cream);font:inherit;font-size:.95rem;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.field textarea{min-height:120px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,253,226,.22);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber);background:rgba(255,191,0,.04);}
.intake-note{font-size:.72rem;color:var(--cream-48);min-height:1.2em;}
.intake-note.is-err{color:#FF6B5A;}
.intake-note.is-ok{color:var(--amber);}

.direct{display:grid;gap:1.6rem;align-content:start;padding-top:.4rem;}
.direct-block{display:grid;gap:.35rem;}
.direct-k{font-size:.62rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--amber);font-weight:600;}
/* The aside is the studio's letterhead — an address, a line to call and who
   reads the brief — so it is set in Instrument Serif at a normal weight, the
   same face and treatment as the hero's direct-line panel, instead of Syne at
   800, which is the weight this site uses for UI labels and read as a row of
   buttons here. A serif needs a touch more size and positive tracking to hold
   at the same optical weight. */
.direct-mail,.direct-v{font-family:var(--font-accent);font-weight:400;
  font-size:clamp(1.05rem,.25vw + .98rem,1.22rem);line-height:1.4;
  letter-spacing:var(--ls-soft);color:var(--cream);}
.direct-mail{border-bottom:1px solid transparent;justify-self:start;transition:color .3s,border-color .3s;}
.direct-mail:hover{color:var(--amber);border-bottom-color:var(--amber);}
/* a footnote under a block, not another line of contact detail */
.direct-sub{font-style:italic;font-size:.92rem;line-height:1.45;color:var(--cream-55);}

/* ---------- 20 · FOOTER -------------------------------------------------- */
.footer{position:relative;z-index:3;border-top:1px solid var(--cream-07);overflow:hidden;}
.footer-marquee{overflow:hidden;padding:clamp(1.4rem,4vh,2.6rem) 0;border-bottom:1px solid var(--cream-07);}
.footer-marquee-track{animation:scroll-h 26s linear infinite;}
.footer-body{
  display:grid;grid-template-columns:1fr;gap:2rem;
  max-width:var(--shell);margin-inline:auto;padding:clamp(2.4rem,6vh,4rem) var(--gutter);
}
.footer-col{display:grid;gap:.6rem;align-content:start;}
.footer-k{font-size:.64rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);font-weight:600;margin-bottom:.3rem;}
.footer-col a,.footer-col p{font-size:.92rem;color:var(--cream-55);transition:color .3s;}
.footer-col a{justify-self:start;}
.footer-col a:hover{color:var(--amber);}
.footer-base{
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between;
  max-width:var(--shell);margin-inline:auto;padding:1.2rem var(--gutter) 2rem;
  border-top:1px solid var(--cream-07);
  font-size:.68rem;letter-spacing:var(--ls-caps);color:var(--cream-48);
}
.footer-base a:hover{color:var(--amber);}
.footer-top{display:flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:var(--ls-label);}

/* ---------- 20b · WHATSAPP (the direct line) ----------------------------- */
/* One green in an amber-and-cream palette, so it reads as the app it opens
   rather than as another studio accent. */
.wa-btn{
  display:inline-flex;align-items:center;gap:.6rem;min-height:var(--touch);
  padding:.6rem 1.15rem;border-radius:var(--r-full);
  border:1px solid rgba(37,211,102,.38);background:rgba(37,211,102,.10);
  color:var(--cream);font-size:.7rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;
  justify-self:start;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.wa-btn:hover{background:rgba(37,211,102,.2);border-color:rgba(37,211,102,.7);color:var(--cream);}
.wa-btn .wa-glyph{width:18px;height:18px;flex:none;color:#25D366;}
.wa-btn-sm{padding:.45rem .9rem;min-height:38px;font-size:.66rem;}
/* the compact one sits in the mobile menu and in the hero desk, and 38px is a
   mouse target: a finger gets the full 44 back */
@media (hover:none){.wa-btn-sm{min-height:var(--touch);}}

.wa-float{
  position:fixed;z-index:640;
  right:clamp(.9rem,2.4vw,1.7rem);
  bottom:calc(clamp(.9rem,2.4vw,1.7rem) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  width:56px;height:56px;padding:0;border-radius:var(--r-full);
  /* WhatsApp green, taken down two steps: the pill prints its label in white at
     10.9px, and small text owes 4.5:1 — #1FA855 measures 3.09, #0C7C3C measures
     5.30. The glyph alone would have passed at the brighter green, but one
     colour for both states beats a button that changes hue at 1024px. */
  background:#0C7C3C;color:#FFF;box-shadow:0 12px 30px rgba(0,0,0,.45);
  font-size:.68rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s var(--ease),
             opacity .35s var(--ease),visibility 0s linear 0s;
}
.wa-float .wa-glyph{width:26px;height:26px;flex:none;}
/* the label only unfurls where there is a pointer to unfurl it with */
.wa-float-label{display:none;}
/* hover deepens rather than brightens, so the white label keeps its ratio */
.wa-float:hover{transform:translateY(-3px);background:#0A6A34;box-shadow:0 18px 40px rgba(0,0,0,.55);}
/* parked over the footer: visibility is held back until the fade is over on the
   way out, and switches immediately on the way in, so the link leaves the tab
   order and the accessibility tree while it is invisible */
.wa-float.is-parked{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.94);
  transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s linear .35s;
}
@media (hover:hover) and (min-width:1024px){
  .wa-float{width:auto;height:52px;padding:0 1.15rem;}
  .wa-float-label{display:inline;}
}

/* ---------- 20c · PHONE: THE SCOPE BLOCKS FOLD --------------------------- */
/* Under 768px the bento is one column, which stacked seventeen ticks into a
   list three screens long. Each team folds behind a button that names it and
   says how many of its services are ticked; the block still holds the same
   chips, so nothing changes about what is submitted. The fold is switched on by
   script (.is-drops) — with scripts off the lists stay open and reachable. */
@media (max-width:767px){
  .scope-bento.is-drops .scope-block{padding:0;gap:0;}
  .scope-bento.is-drops .scope-group{display:none;}
  .scope-bento.is-drops .scope-drop{
    display:flex;align-items:center;gap:.75rem;width:100%;
    min-height:var(--touch);padding:.9rem 1.05rem;margin:0;
    border:0;border-radius:var(--r-md);background:none;color:var(--cream);
    text-align:left;cursor:pointer;
  }
  .scope-drop:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}
  .scope-drop-k{
    flex:1 1 auto;min-width:0;
    font-size:.68rem;font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;
  }
  .scope-drop-n{flex:0 0 auto;font-size:.62rem;letter-spacing:var(--ls-soft);color:var(--cream-48);}
  .scope-block.is-picked .scope-drop-n{color:var(--amber);}
  /* a chevron drawn from two borders: no glyph, no icon file */
  .scope-drop-i{
    flex:0 0 auto;width:.5rem;height:.5rem;margin-right:.15rem;
    border-right:1.5px solid var(--cream-48);border-bottom:1.5px solid var(--cream-48);
    transform:translateY(-.12rem) rotate(45deg);transition:transform .3s var(--ease);
  }
  .scope-block.is-open .scope-drop-i{transform:translateY(.06rem) rotate(-135deg);}
  .scope-block.is-open .scope-drop-k{color:var(--cream);}
  .scope-bento.is-drops .scope-chips{grid-template-columns:1fr;padding:0 1.05rem 1rem;}
}

/* ---------- 21 · TABLET (>=768px) ---------------------------------------- */
@media (min-width:768px){
  .voices-grid{grid-template-columns:repeat(2,1fr);}
  .scope-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
  .scope-top{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:1.6rem;}
  .footer-body{grid-template-columns:repeat(2,1fr);}
  /* the brand block takes its own row so the four link columns sit level */
  .footer-col:first-child{grid-column:1 / -1;}
  .about-body{text-align:center;}
}

/* ---------- 22 · DESKTOP (>=1024px) -------------------------------------- */
@media (min-width:1024px){
  /* the three-way comparison only goes side by side once each column can hold a
     readable measure. At 768 it was three 173px columns, and because a grid item
     defaults to min-width:auto the track refused to shrink to its 1fr share and
     pushed 42px past the viewport instead. */
  .matrix-grid{grid-template-columns:repeat(3,1fr);}
  /* side by side, one heading runs to two lines and the others to one, which
     left the rule under each header at three different heights. Reserving the
     second line keeps the three headers the same box. */
  .mcard h3{min-height:2.32em;}
  .process-grid{grid-template-columns:.92fr 1.08fr;}
  .voices-grid{grid-template-columns:repeat(3,1fr);}
  /* the builder takes the full width of the section and the brief and the
     direct lines share the row under it: at three columns the chips had a
     quarter of the page and the right-hand third sat empty */
  .contact-grid{grid-template-columns:1.45fr .8fr;}
  .scope{grid-column:1/-1;}
  .scope-bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;}
  .scope-top{grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:clamp(2rem,4vw,3.5rem);}
  .footer-body{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---------- 23 · REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .cursor{display:none !important;}
  .hero-line > span,.overlay-list a{transform:none !important;}
  .work-sticky,.process-sticky{position:relative;height:auto;}
  .work-stage{aspect-ratio:16/10;}
  .work-slide{position:relative;opacity:1;visibility:visible;}
  .work-slide:not(.is-active){display:none;}
  .process{height:auto;padding-block:var(--section-y);}
  .about-quote .w,.about-quote .w.is-gold{opacity:1;}
  .voices-grid{height:auto;mask-image:none;-webkit-mask-image:none;}
  .band-track,.clients-track,.voices-col,.footer-marquee-track{animation:none;}
  /* lab instruments hold one composed frame */
  .lab-viz *,.lab-viz *::before,.lab-viz *::after{animation:none !important;}
  .flow-log li,.phone-alt .phone-toast{opacity:1;transform:none;}
  .crm-deal{transform:translateX(calc(var(--s) * 2));}
}

/* ---------- 24 · MARKUP RECONCILIATION ----------------------------------- *
   Classes the markup uses that the sections above do not name directly.
   Kept in one block so the section map stays readable.                       */

.site-main{position:relative;z-index:2;}

/* magnetic — kraftloop .tt-magnetic-item. Transform is written by JS only
   while the pointer is over the element; no standing will-change layer. */

/* preloader status line */
.preloader-status{letter-spacing:var(--ls-wide);}

/* band rows — image row breathes wider than the type row */
.band-row-imgs .band-set{gap:clamp(1.2rem,3vw,2.6rem);}
.band-row-text{opacity:.9;}

/* section heads that reuse .shell rather than a bespoke wrapper */
.caps-head,.matrix-head,.contact-head{max-width:64ch;margin-bottom:clamp(2.2rem,5.5vh,3.6rem);}
.caps-head .lede,.matrix-head .lede,.contact-head .lede{margin-top:1.1rem;}
.contact-head{max-width:22ch;}
.contact-head .lede{max-width:52ch;}


/* voices badge */
.voices-badge{
  display:inline-block;margin-bottom:1.1rem;padding:.35rem 1rem;
  border:1px solid var(--cream-14);border-radius:var(--r-full);
  font-size:.64rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--amber);
}

/* process left/right columns + meta chips */
.process-left{display:grid;align-content:center;}
.process-right{display:grid;align-content:center;}
.process-meta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem;}
.process-meta span{
  padding:.5rem 1rem;border:1px solid rgba(44,45,47,.18);border-radius:var(--r-sm);
  font-family:var(--font-title);font-weight:700;font-size:.82rem;color:var(--navy);
}
.process-steps li span{
  font-family:var(--font-body);font-size:.6rem;letter-spacing:var(--ls-label);font-weight:600;
  /* 9.6px — small text, 4.5:1, no allowance. .3 measured 1.77. */
  color:rgba(44,45,47,.72);transition:color .45s var(--ease);
}
/* --amber is the signal colour of the dark ground and measures 2.26:1 here, so
   the light band gets its own ink-side amber for type this small */
.process-steps li.is-active span{color:var(--amber-ink);}

/* scope builder — real markup names */
.scope-step{display:block;border:0;margin:0;padding:0;min-width:0;}
.scope-step-label{display:block;padding:0;margin-bottom:.7rem;}
.scope-mode{display:grid;gap:.15rem;text-align:left;flex:1;padding:.85rem 1.1rem;}
.scope-mode strong{font-family:var(--font-title);font-weight:700;font-size:.85rem;letter-spacing:0;text-transform:none;}
.scope-mode span{font-size:.66rem;letter-spacing:var(--ls-soft);text-transform:none;opacity:.7;}
.scope-modes{flex-direction:column;}
.scope-card-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
/* let the label take the wrap — both sides shrink by default, which broke the
   headline figure across two lines ("11 – 14" / "weeks") */
.scope-card-row .scope-k{flex:1 1 auto;min-width:0;}
.scope-v-big{font-size:1.35rem;flex:0 0 auto;white-space:nowrap;}

/* direct column */
.direct-live{display:flex;align-items:center;gap:.55rem;font-size:1rem;}
.direct-live i{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse-dot 2.4s ease-in-out infinite;flex:none;}
.direct-v{line-height:1.5;}

/* footer */
.footer-marquee-track{display:flex;width:max-content;animation:scroll-h 26s linear infinite;}
/* outline type, but type all the same: the stroke sits at the dim step so the
   line is still legible to someone who cannot resolve a 1px hairline */
.footer-marquee-track span{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,4rem);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--cream-48);}
.footer:hover .footer-marquee-track{animation-play-state:paused;}
.footer-blurb{font-size:.88rem;color:var(--cream-48);max-width:34ch;line-height:1.7;}
.footer-k{margin-bottom:.4rem;}
.footer-col ul{display:grid;gap:.45rem;}
.footer-top{display:inline-flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:var(--ls-label);transition:color .3s;}
.footer-top:hover{color:var(--amber);}


/* caption meta: category carries the accent */
#workCat{color:var(--amber);font-weight:600;}


/* ============================================================================
   24 · WORK INDEX PAGE (/work)
   The homepage showcase pins one frame at a time; this page is the opposite —
   a flat editorial index. Same tokens, same chips, no scroll hijack, so a
   visitor who arrives from a link lands on a page that behaves normally.
   ========================================================================== */
.page-top{
  position:relative;z-index:3;background:var(--ink);
  padding:calc(var(--header-h) + clamp(4rem,12vh,8rem)) 0 clamp(2.5rem,6vh,4rem);
}
.page-top-inner{display:grid;gap:clamp(1.2rem,3vh,2rem);}
/* Anton is already condensed, so at .88 the caps of the second line ran into
   the first and the italic serif half sat on the comma above it. One line of
   leading, a hair of tracking and a little room top and bottom give the title
   air without costing it any of its scale. */
.page-title{
  font-family:var(--font-display);text-transform:uppercase;line-height:1;
  font-size:clamp(3.4rem,13vw,10rem);letter-spacing:.005em;word-spacing:.04em;
  padding-block:.06em .12em;
}
.page-title em{
  display:inline-block;padding-inline:.03em;
  font-family:var(--font-accent);font-style:italic;text-transform:none;
  line-height:1.06;color:var(--amber);letter-spacing:0;
}
.page-top .lede{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.7;}
.page-count{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);
}
.page-count b{font-family:var(--font-display);font-size:1.5rem;color:var(--amber);letter-spacing:0;}
.page-top .work-filters{margin-top:.4rem;}
@media (min-width:1024px){
  /* the title is display-scale, so at desktop it takes the left rail and the
     reading matter sits beside it rather than under a half-empty line */
  .page-top-inner{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:clamp(2.5rem,5vw,5rem);align-items:end;
    grid-template-areas:
      "eyebrow eyebrow"
      "title   lede"
      "title   count"
      "filters filters";
  }
  .page-top .eyebrow{grid-area:eyebrow;}
  .page-title{grid-area:title;align-self:start;margin-bottom:0;}
  .page-top .lede{grid-area:lede;max-width:38ch;}
  .page-count{grid-area:count;}
  .page-top .work-filters{grid-area:filters;margin-top:clamp(1.6rem,4vh,3rem);}
}

.cases{position:relative;z-index:3;background:var(--ink);padding-bottom:clamp(4rem,12vh,8rem);}
.cases-list{display:grid;gap:clamp(4rem,11vh,9rem);}

.case{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;}
.case[hidden]{display:none;}

.case-frame{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-3);border:1px solid var(--cream-07);
}
.case-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
/* built for the phone, so it is shown on one: the tall shot sits inside the
   frame at full height rather than being cropped to a wide crop */
.case-frame-phone{
  display:grid;place-items:center;aspect-ratio:4/5;max-width:30rem;margin-inline:auto;
  padding:clamp(1rem,2.4vw,1.9rem) 0;
  background:radial-gradient(58% 70% at 50% 42%,rgba(255,191,0,.07),transparent 70%),var(--ink-3);
}
.case-frame-phone img{
  width:auto;max-width:100%;height:100%;object-fit:contain;object-position:center;
  border-radius:clamp(.6rem,1.4vw,1.1rem);box-shadow:0 1.4rem 3rem rgba(0,0,0,.45);
}
/* the frame lifts as one piece on hover, mirroring the showcase slides */
.case-media{transition:transform .6s var(--ease);}
@media (hover:hover){ .case:hover .case-media{transform:translateY(-6px);} }

.case-thumbs{display:flex;gap:.5rem;margin-top:.6rem;}
/* the portrait frame is centred in its column, so its thumbs line up under it */
.case-media:has(.case-frame-phone) .case-thumbs{justify-content:center;}
.case-thumb{
  width:clamp(52px,7vw,74px);aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--cream-07);opacity:.5;flex:none;
  transition:opacity .3s var(--ease),border-color .3s var(--ease);
}
.case-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.case-thumb:hover{opacity:.85;}
.case-thumb.is-active{opacity:1;border-color:var(--amber);}

.case-copy{display:grid;gap:.85rem;align-content:center;}
.case-num{
  display:flex;align-items:center;gap:.7rem;
  font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);
}
.case-num-i{font-family:var(--font-display);font-size:1.1rem;color:var(--amber);letter-spacing:0;}
/* a project title reads the same everywhere: Anton, uppercase — the showcase
   slide, this card and the project page's own h1 are one voice */
.case-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:.98;text-transform:uppercase;letter-spacing:var(--ls-display);}
.case-sum{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--cream-80);line-height:1.4;}
.case-body{font-size:.94rem;line-height:1.75;color:var(--cream-55);max-width:52ch;}

.case-metrics{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:.3rem;}
.case-metrics li{display:grid;gap:.15rem;}
.case-metrics b{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1;color:var(--cream);}
.case-metrics b.is-word{
  font-family:var(--font-title);font-weight:700;font-size:clamp(.95rem,1.5vw,1.15rem);
  letter-spacing:var(--ls-title);line-height:1.3;
}
.case-metrics span{font-size:.62rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);}

.case-stack{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem;}
.case-stack li{
  padding:.28rem .7rem;border-radius:var(--r-full);border:1px solid var(--cream-07);
  font-size:.66rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-55);
}

.case-link{
  justify-self:start;display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;
  padding-bottom:.25rem;border-bottom:1px solid var(--cream-14);
  font-size:.74rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.case-link:hover{color:var(--amber);border-color:var(--amber);}
.case-link-arrow{font-style:normal;transition:transform .3s var(--ease);}
.case-link:hover .case-link-arrow{transform:translate(2px,-2px);}
.case-nda{margin-top:.7rem;font-size:.72rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-48);}

/* placeholder rows: no photograph to show, so the plate carries the row */
.case.is-empty .case-frame{
  display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgba(255,253,226,.03) 0 12px,transparent 12px 24px), var(--ink-3);
}
.case-plate{font-family:var(--font-display);font-size:clamp(2.6rem,8vw,6rem);color:var(--cream-14);}

/* closing CTA */
.page-cta{position:relative;z-index:3;background:var(--ink-2);padding:clamp(4rem,12vh,8rem) 0;text-align:center;}
.page-cta h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,7vw,5rem);line-height:.95;}
.page-cta p{margin:1rem auto 2rem;max-width:48ch;color:var(--cream-55);}

@media (min-width:900px){
  .case{grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,5vw,5rem);}
  /* alternate the reading direction so the eye resets on every second row */
  .case:nth-child(even) .case-media{order:2;}
  .case:nth-child(even) .case-copy{order:1;}
}


/* ============================================================================
   25 · INNER PAGES / CHROME
   Everything the multi-page build added: header nav, project pages, founders,
   the no-JS contact states, view transitions and the offscreen pause.
   ========================================================================== */

/* utilities */
.skip-link{
  position:fixed;left:1rem;top:1rem;z-index:9900;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  background:var(--amber);color:var(--ink);font-size:.8rem;font-weight:600;
  transform:translateY(-200%);transition:transform .3s var(--ease);
}
.skip-link:focus{transform:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

/* header nav — the pages, always one click away on desktop */
.header-nav{display:none;align-items:center;gap:clamp(1.2rem,2.2vw,2.2rem);justify-self:center;}
.header-nav a{
  position:relative;padding:.4rem 0;
  font-size:.74rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-55);
  transition:color .3s var(--ease);
}
.header-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.header-nav a:hover,.header-nav a[aria-current="page"]{color:var(--cream);}
.header-nav a:hover::after,.header-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
@media (min-width:1024px){
  .header-nav{display:flex;}
  .header-meta{display:none;}
}

.overlay-aside-status{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:1.2rem;
  font-size:.66rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);
}
.overlay-aside-status i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;}
@media (max-width:767px){ .overlay-aside-status{justify-content:flex-start;} }

/* onward link — every section hands off to a deeper page */
.more-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1.8rem,4vh,2.6rem);
  padding-bottom:.25rem;border-bottom:1px solid var(--cream-14);
  font-size:.74rem;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-80);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.more-link i{font-style:normal;transition:transform .3s var(--ease);}
.more-link:hover{color:var(--amber);border-color:var(--amber);}
.more-link:hover i{transform:translateX(3px);}
.page-cta-actions .more-link{margin-top:0;}
.founder-note .more-link{margin:0 0 0 .6rem;}
.mcard .more-link{align-self:flex-start;margin-top:.6rem;}

.page-cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2rem;}
.work-title a,.case-title a,.crumbs a{transition:color .3s var(--ease);}
.work-title a:hover,.case-title a:hover,.crumbs a:hover{color:var(--amber);}

/* work index */
a.case-frame{display:block;}
.case-links{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.8rem;}

/* page-top grid slots for the elements the inner pages add */
.crumbs{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-48);}
.crumbs [aria-current]{color:var(--amber);}
.jump{display:flex;flex-wrap:wrap;gap:.4rem;}
.jump .work-filter{display:inline-flex;align-items:center;}
@media (min-width:1024px){
  .crumbs{grid-area:eyebrow;}
  .proj-facts{grid-area:count;}
  .jump,.page-missing-actions{grid-area:filters;margin-top:clamp(1.6rem,4vh,3rem);}
}

/* project page */
.proj-top .page-title{font-size:clamp(2.8rem,9vw,7.5rem);}
.proj-facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.6rem;
  margin:0;padding-top:1.2rem;border-top:1px solid var(--cream-07);
}
.proj-facts dt{font-size:.62rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);margin-bottom:.3rem;}
.proj-facts dd{margin:0;font-family:var(--font-title);font-weight:700;font-size:.98rem;overflow-wrap:anywhere;}
.proj-facts a{color:var(--amber);}
.proj-facts i{font-style:normal;}
@media (min-width:768px) and (max-width:1023px){ .proj-facts{grid-template-columns:repeat(4,minmax(0,1fr));} }

.proj-hero,.proj-body,.proj-gallery{position:relative;z-index:3;background:var(--ink);padding-bottom:clamp(3rem,8vh,5rem);}
.proj-frame{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--cream-07);background:var(--ink-3);}
.proj-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.proj-grid{display:grid;gap:1.4rem;}
.proj-copy{display:grid;gap:1.2rem;}
.proj-lead{font-family:var(--font-title);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.35;letter-spacing:var(--ls-title);color:var(--cream-80);}
.proj-copy .case-link{justify-self:start;}
@media (min-width:1024px){ .proj-grid{grid-template-columns:.4fr 1fr;column-gap:clamp(2rem,5vw,5rem);} }

.proj-gallery-grid{display:grid;gap:clamp(1rem,2vw,1.6rem);align-items:start;}
.proj-shot{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--cream-07);background:var(--ink-3);}
.proj-shot img{width:100%;}
.proj-shot-tall{justify-self:center;width:min(100%,360px);}
@media (min-width:900px){ .proj-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.proj-pager{
  position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  padding-block:clamp(2rem,6vh,4rem);border-top:1px solid var(--cream-07);
}
.proj-pager-link{display:grid;gap:.5rem;align-content:start;min-width:0;}
.proj-pager-next{text-align:right;}
.proj-pager-k{font-size:.66rem;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--cream-48);}
.proj-pager-v{font-family:var(--font-display);font-size:clamp(1.4rem,4vw,3.2rem);line-height:1;text-transform:uppercase;overflow-wrap:anywhere;transition:color .3s var(--ease);}
.proj-pager-link:hover .proj-pager-v{color:var(--amber);}

/* about page */
.about-page{min-height:0;padding-top:clamp(2rem,6vh,4rem);}
.founders{position:relative;z-index:3;padding:var(--section-y) 0;border-top:1px solid var(--cream-07);}
.founders-head{margin-bottom:clamp(2rem,5vh,3.5rem);}
.founders-grid{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:start;}
.founders-studio img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);}
.founders-studio figcaption{margin-top:.8rem;font-family:var(--font-accent);font-style:italic;font-size:var(--t-small);color:var(--cream-48);}
.founders-list{display:grid;gap:1rem;}
.founder{
  display:grid;gap:.6rem;padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--cream-07);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,253,226,.03),transparent);
}
.founder-role{font-size:.64rem;font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--amber);}
.founder-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1;text-transform:uppercase;}
.founder-text{color:var(--cream-55);line-height:1.75;}
/* the studio dog: same card, laid out beside a small round portrait */
.founder-mascot{grid-template-columns:auto 1fr;align-items:center;gap:clamp(1rem,2.5vw,1.6rem);}
.mascot-photo{width:clamp(72px,14vw,96px);flex:none;}
.mascot-photo img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-full);
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,191,0,.16),transparent 70%);
  border:1px solid var(--cream-14);
}
.founder-mascot .founder-name{font-size:clamp(1.4rem,2.8vw,2rem);}
.founder-mascot .founder-text{font-size:.92rem;line-height:1.7;}
.founder-note{padding-top:.4rem;color:var(--cream-55);font-size:.92rem;}
@media (min-width:1024px){ .founders-grid{grid-template-columns:.9fr 1.1fr;} }

/* services: engagement pathways */
.modes-grid{display:grid;gap:1rem;}
@media (min-width:900px){ .modes-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* contact: the scope inputs are real radios/checkboxes, so state is :checked */
.scope-mode:has(:focus-visible),.chip:has(:focus-visible){outline:2px solid var(--amber);outline-offset:3px;}
.field small{font-size:.9em;letter-spacing:var(--ls-soft);text-transform:none;color:var(--cream-48);}
.field-err{font-size:.74rem;color:#FF8A7A;}
.field-err:empty{display:none;}
.field.is-bad input,.field.is-bad textarea{border-color:#FF6B5A;}
.form-notice{padding:.8rem 1rem;border:1px solid rgba(255,107,90,.4);border-radius:var(--r-sm);background:rgba(255,107,90,.08);color:#FFB3A8;font-size:.86rem;}
.form-notice[hidden]{display:none;}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.intake-fields{display:grid;gap:1.1rem;}
.intake-fields[hidden]{display:none;}
.intake-done{
  display:grid;gap:.8rem;padding:clamp(1.6rem,4vw,2.6rem);
  border:1px solid rgba(255,191,0,.3);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,191,0,.08),rgba(255,191,0,.01));
}
.intake-done[hidden]{display:none;}
.intake-done:focus{outline:none;}
.intake-done-k{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;text-transform:uppercase;color:var(--amber);}
.intake-done-v{color:var(--cream-80);line-height:1.7;}
.intake-done-v a{color:var(--amber);}
.intake-done .more-link{justify-self:start;margin-top:.4rem;}
.intake .glow-btn{justify-self:start;}
.glow-btn[aria-busy="true"]{opacity:.6;pointer-events:none;}

/* 404 */
.page-missing{min-height:100svh;display:grid;align-content:center;}
.page-missing-actions{justify-content:flex-start;}

/* sitemap — a plain index, deliberately: it is read by crawlers as often as
   by people, so nothing here hides behind an interaction */
.sitemap{position:relative;z-index:3;padding:0 0 var(--section-y);}
.sitemap-h{font-family:var(--font-title);font-size:var(--t-h3);color:var(--cream);margin:clamp(2rem,5vh,3rem) 0 1rem;}
.sitemap-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--cream-07);border-block:1px solid var(--cream-07);}
.sitemap-list li{background:var(--ink);padding:clamp(1rem,2.4vh,1.4rem) 0;display:grid;gap:.3rem;}
.sitemap-list a{font-family:var(--font-title);font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--cream);justify-self:start;transition:color .3s var(--ease);}
.sitemap-list a:hover{color:var(--amber);}
.sitemap-list p{margin:0;font-size:.95rem;color:var(--cream-55);max-width:64ch;}
.sitemap-meta{font-size:.68rem;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--cream-48);}

/* page-to-page crossfade (Chromium; others navigate normally) */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:var(--ease);}
.header{view-transition-name:site-header;}

/* the preloader plays once per visit */
html.is-return .preloader{display:none;}
/* marquees stop compositing while offscreen (IntersectionObserver in script.js) */
.is-paused .voices-col,.is-paused .clients-track,.is-paused .footer-marquee-track,.is-paused .band-track{animation-play-state:paused;}
.lab-card.is-paused .lab-viz *,.lab-card.is-paused .lab-viz *::before,.lab-card.is-paused .lab-viz *::after{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}

/* Sections 26 and 27 are last on purpose: they are overrides, and several of
   the blocks above (24, 25) re-declare the same properties without a media
   query, so the phone build only wins from here. */

/* ---------- 26 · SMALL SCREENS — THE PHONE BUILD ------------------------------------------ */
/* The two scrubbed sections are the phone build's main job. On a desktop the
   showcase and the process band each pin a single screen and swap what is in it
   as you scroll, which costs four or five screens per section. A thumb pays for
   that in a way a wheel does not, so here both sections drop the pin and simply
   print everything they were holding back. */
@media (max-width:767px){
  .header-meta{display:none;}
  .overlay-inner{grid-template-columns:1fr;gap:2.4rem;align-items:start;}
  .overlay-aside{text-align:left;}

  /* showcase — a stack of frames, each captioned, instead of one pinned stage */
  .work-sticky{position:relative;height:auto;overflow:visible;display:block;}
  .work-topbar{padding-block:clamp(2.6rem,9vh,4rem) 1.2rem;}
  .work-topbar .work-filters{justify-content:flex-start;}
  .work-stage{margin-inline:var(--gutter);display:grid;gap:1rem;border-radius:0;background:none;overflow:visible;}
  .work-slide{position:relative;inset:auto;opacity:1;visibility:visible;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--ink-3);}
  .work-slide img{transform:none;}
  /* the frames are real screenshots and some of them are near-white at the
     bottom, where the caption sits. Measured over allined-0.jpg the old scrim
     left the meta line at 3.9:1; this one holds every frame above 4.5:1. */
  .work-slide::after{background:linear-gradient(180deg,rgba(6,7,11,0) 24%,rgba(6,7,11,.62) 60%,rgba(6,7,11,.96) 100%);}
  .work-slide-cap{
    position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:3;
    display:grid;gap:.25rem;
  }
  .work-slide-cap b{font-family:var(--font-display);font-size:clamp(1.2rem,5.4vw,1.8rem);text-transform:uppercase;line-height:1;}
  .work-slide-cap i{font-style:normal;font-size:.62rem;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--cream-55);}
  /* the shared caption, the index and the progress rail all describe a stage
     that no longer exists here */
  .work-caption,.work-index,.work-progress{display:none;}
  .work{padding-bottom:clamp(3rem,8vh,5rem);}

  /* process — the six steps in full, in place of the scrubbed panel */
  .process{height:auto;}
  .process-sticky{position:relative;height:auto;padding-block:var(--section-y);place-items:start;}
  .process-mega,.process-copy,.process-meta{display:none;}
  .process-h{
    position:static;width:auto;height:auto;margin:1rem 0 1.8rem;clip:auto;overflow:visible;white-space:normal;
    font-family:var(--font-display);font-size:clamp(2rem,9vw,3.2rem);line-height:.95;text-transform:uppercase;color:var(--navy);
  }
  .process-steps li,.process-steps li.is-active{
    grid-template-columns:2.4rem 1fr;align-items:start;padding-left:0;
    color:var(--navy);font-size:clamp(1.15rem,5.6vw,1.6rem);
  }
  /* no step is "the one you are on" when all six are printed, so the number
     keeps one colour even if the server marked the first row active */
  .process-steps li .process-step-n,
  .process-steps li.is-active .process-step-n{padding-top:.15rem;color:rgba(44,45,47,.72);}
  .process-step-copy{
    display:block;grid-column:2;margin-top:.5rem;
    font-family:var(--font-body);font-size:.92rem;line-height:1.55;letter-spacing:0;
    text-transform:none;color:rgba(44,45,47,.72);
  }
  .process-step-meta{
    display:flex;gap:.5rem;flex-wrap:wrap;grid-column:2;margin-top:.7rem;
    font-family:var(--font-body);font-size:.6rem;letter-spacing:var(--ls-label);
  }
  .process-step-meta i{font-style:normal;padding:.3rem .6rem;border:1px solid rgba(44,45,47,.18);border-radius:var(--r-sm);color:rgba(44,45,47,.72);}

  /* five instrument cards stacked is the tallest block on a phone; the panels
     read fine at two thirds the height and the copy stays whole */
  .lab-viz{height:clamp(150px,40vw,190px);}
  .lab-body{gap:.7rem;padding:1.25rem;}
  /* homepage only — the last two cards are on /services, one tap away */
  .lab-card-more{display:none;}

  /* the two device shots keep their shape here: a phone build printed on a
     phone is the point, so the frame goes tall rather than wide */
  .work-slide-phone{aspect-ratio:3/4;}
  .work-slide-phone img{padding:clamp(.7rem,3vw,1.2rem);}

  /* the dog card keeps its portrait beside the copy, just smaller */
  .founder-mascot{gap:.9rem;}

  .voices-grid{height:520px;}
  /* ten case studies at nine screens is the index doing its job; the gap
     between them is what makes it feel twice as long */
  .cases-list{gap:clamp(2.6rem,7vh,4rem);}
}

/* ---------- 26b · MICRO-CAPS FLOOR (PHONES) ---------------------------
   the tracked-out uppercase labels are set between .62 and .68rem, which
   lands at 9.9-10.9px. On a desk that is a deliberate whisper; held at
   arm's length on a phone it is a smudge. Everything in that band is
   floored here at 11.5px and 12px. Sizes only - no weight, tracking or
   colour changes, so nothing about the look moves except legibility. */
@media (max-width:767px){
.caps-group,.case-metrics span,.chip-sub,.direct-k,.flow-log li,.flow-node,
  .footer-k,.founder-role,.hero-desk-k,.mcard header p,.proj-facts dt,.scope-drop-n,
  .scope-group,.voices-badge,.work-index button,.work-slide-cap i{font-size:.72rem;}
.about-stats span,.cap-num,.case-num,.case-stack li,.crumbs,.eyebrow-num,
  .field label,.footer-base,.gen-prompt,.header-meta,.lab-body li,.lab-tag span,
  .overlay-aside-status,.page-count,.proj-pager-k,.scope-drop-k,.scope-k,
  .scope-mode span,.scope-step-label,.sitemap-meta,.voice-by span,.wa-btn-sm,
  .wa-float,.work-all,.work-filter,.work-meta{font-size:.75rem;}
  /* the .6rem tier: the capability-card backs, the process band and the hero's
     meta strip. The strip is a clamp whose lower bound is what a phone lands
     on, so it is the bound that moves. */
  .cap-back-k,.cap-back li,.hero-strip,.process-steps li span,
  .process-step-meta,.field small{font-size:.72rem;}
}

/* ---------- 26c · FORM FIELDS DO NOT ZOOM (PHONES) ---------------------
   iOS Safari zooms the whole page when a focused input is set under 16px,
   and it does not zoom back out. The fields are .95rem (15.2px), one step
   short, so on a phone they are held at exactly 16px. Nothing else moves. */
@media (max-width:767px){
  .field input,.field textarea,.field select{font-size:16px;}
}

/* ---------- 27 · TOUCH TARGETS ------------------------------------------ */
/* Text links are sized by their type on a pointer device. A finger needs the
   box to be at least ~44px tall whatever the type is doing, so every inline
   link that doubles as a control gets padded out rather than restyled. */
@media (pointer:coarse){
  .more-link,.work-all,.case-link,.direct-mail,.overlay-aside-mail{display:inline-flex;align-items:center;min-height:var(--touch);}
  .footer-col ul a,.sitemap-list a,.jump a,.footer-base a{display:inline-flex;align-items:center;min-height:40px;}
  .case-thumb{width:clamp(70px,18vw,86px);}
  /* the breadcrumb sits at .68rem and measured 46x19 on a phone, too small to
     hit. The box stays exactly where it is and the hit area is grown around it
     with a transparent pseudo-element, so nothing below it moves. */
  .crumbs a{position:relative;}
  .crumbs a::after{content:"";position:absolute;inset:-10px -4px;}
}

/* ---------- 28 · TALL WORK ----------------------------------------------- */
/* A web project is a 16:10 screenshot and the frames above are cut for that.
   A photograph or a social creative is shot portrait, so the same letterbox
   would take a full-length look off at the waist and put the product name of
   a 4:5 creative outside the frame. A project carrying frame:"tall" in
   data/projects.json gets a 4:5 stage instead, capped narrow enough that the
   whole frame is on screen at once rather than scrolled past. */
.case-frame-tall{aspect-ratio:4/5;max-width:31rem;margin-inline:auto;}
.case-frame-tall img{object-position:center;}
.case-media:has(.case-frame-tall) .case-thumbs{justify-content:center;}
.case-media:has(.case-frame-tall) .case-thumb{aspect-ratio:4/5;}

.proj-frame-tall{aspect-ratio:4/5;max-width:40rem;margin-inline:auto;}
.proj-frame-tall img{object-position:center;}
/* three across instead of two: a portrait frame is a little over half the
   width of a screenshot, so a two-column grid leaves a column of empty page */
@media (min-width:900px){ .proj-gallery-grid.is-tall{grid-template-columns:repeat(3,minmax(0,1fr));} }