/* Switzer variable, Latin subset, from Switzer-Variable.ttf by Indian Type Foundry,
   via Fontshare (ITF Free Font License, free for commercial use). Self-hosted, no third-party requests.
   The fallback face uses Arial with overrides measured against Switzer's metrics, to keep layout shift low.
   Layout and tokens: REDESIGN-SPEC.md (10/16). Square. Art layer (10/27, end of file): grain, section colours,
   stamp, band, photo pair, archive; transforms only, still for reduced motion. */
@font-face{font-family:"Switzer";src:url(/assets/fonts/switzer-var-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Big Shoulders Display 800, Latin subset, by Patric King / Pentagram (SIL Open Font License, free for commercial use),
   via Google Fonts. Self-hosted. Display face for headlines only (Amy: Ghia-style type, picked 10/26). */
@font-face{font-family:"Big Shoulders Display";src:url(/assets/fonts/big-shoulders-display-800-latin.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer Fallback";src:local("Arial");size-adjust:100.8%;ascent-override:97.2%;descent-override:24.8%;line-gap-override:8.9%}
:root{
  /* color: wenge is text only, once per page, never a background */
  --paper:#f1efe9; --paper-2:#e8e5dc; --ink:#14130f; --wenge:#4a3a42;
  --ink-70:rgba(20,19,15,.74); --hair:rgba(20,19,15,.16);
  --on-dark:#f1efe9; --on-dark-72:rgba(241,239,233,.72); --hair-dark:rgba(241,239,233,.22);
  /* type */
  --font:"Switzer","Switzer Fallback",Arial,sans-serif;
  --display:"Big Shoulders Display","Switzer","Switzer Fallback",Arial,sans-serif;
  --fs-figure:clamp(96px,10vw,152px);
  --fs-xl:clamp(34px,4.45vw,64px);
  --fs-l:clamp(23px,2.2vw,32px);
  --fs-quote:clamp(25px,2.8vw,40px);
  --fs-lede:clamp(18px,1.39vw,20px);
  --fs-body:clamp(16px,1.18vw,17px);
  --fs-small:14px;
  /* space: three section spacings, used on purpose */
  /* tightened 10/27 (dead-space audit: about 200px of empty between sections on desktop), again 10/27 evening (Michael:
     "so much dead space" on Work and Join; section joins were 154-177px, now about 136) */
  --pad-s:clamp(44px,4.6vw,64px); --pad-m:clamp(48px,4.8vw,68px); --pad-l:clamp(68px,7vw,104px);
  --gut:clamp(20px,4.45vw,64px); --max:1312px;
  --nav-h:76px; --t-fast:160ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,summary{touch-action:manipulation}
.btn,button,summary{-webkit-user-select:none;user-select:none}
body{background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
.ledger,.figs,.stage-ctl .count,.report .n{font-variant-numeric:tabular-nums}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
img{display:block;max-width:100%;height:auto;background:var(--paper-2)}
picture{display:block}
[hidden]{display:none!important}
a{color:inherit}
ul,ol{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-weight:500;text-wrap:balance}
p{max-width:40em;text-wrap:pretty}
/* Headlines are Switzer in sentence case so the COLAB logo is the only bold all-caps word on the page (Michael 10/27):
   page headlines light, section headings medium. Big numbers and the band letters keep Big Shoulders. */
.t-hero{font-family:var(--font);line-height:1;letter-spacing:-.04em;font-weight:300}
.t-figure{font-family:var(--display);font-size:var(--fs-figure);line-height:.88;letter-spacing:0;font-weight:800;color:var(--wenge)}
.t-xl{font-family:var(--font);font-size:var(--fs-xl);line-height:1.04;letter-spacing:-.03em;font-weight:500}
.page-head .t-xl{font-size:clamp(40px,5.6vw,84px);line-height:1.02;letter-spacing:-.04em;font-weight:300}
.t-l{font-size:var(--fs-l);line-height:1.12;letter-spacing:-.015em}
.t-lede{font-size:var(--fs-lede);line-height:1.45}
.t-small{font-size:var(--fs-small);line-height:1.5;color:var(--ink-70)}
.textlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* tap targets: standalone text links and the email links get a 44px+ hit area; negative margins keep the layout */
.actions .textlink,.head .textlink,.case-foot a,.mail a,.contact-mail a,.note a{display:inline-block;padding:12px 0;margin:-12px 0}

/* buttons: square, one per section */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:0;background:var(--ink);color:var(--paper);text-decoration:none;font:500 15px/1 var(--font);border:1px solid var(--ink);cursor:pointer;white-space:nowrap;transition:background-color var(--t-fast),color var(--t-fast),transform 100ms ease-out}
.btn.ghost{background:transparent;color:var(--ink)}
/* touch: press states for every tap; hover styles only for a real mouse, so nothing sticks after a tap (M5) */
.btn:active{background:#2f2d27;transform:scale(.98)}
.btn.ghost:active{background:var(--paper-2)}
.textlink:active,.menu nav a:not(.btn):active,footer.site nav a:active,.svc4 a:active,.svc-list a:active,.foot-contact a:active{opacity:.6}
@media (hover:hover) and (pointer:fine){
  .textlink:hover{text-decoration-thickness:2px}
  .btn:hover{background:#2f2d27}
  .btn.ghost:hover{background:var(--paper-2)}
  .links a:not(.btn):hover{background-size:100% 1px}
  .stage-ctl button:hover{border-color:var(--ink)}
  .svc-list a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  .svc4 a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  footer.site nav a:hover{text-decoration:underline;text-underline-offset:4px}
}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}

/* nav: one state, hairline always */
.nav{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--hair)}
/* hides on the way down past the hero, back on any scroll up (art engine; never while the menu is open) */
.nav{transition:transform 200ms ease-out}
.nav.away{transform:translateY(-100%)}
.nav:focus-within{transform:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.logo{display:block;flex:none}
/* brand guidelines: the wordmark is never under 120px wide on screen (64px tall in its file) */
.logo img{width:120px;height:auto;background:none}
.links{display:flex;align-items:center;gap:28px;font-size:15px}
.links a{text-decoration:none}
.links a:not(.btn){background:linear-gradient(currentColor,currentColor) 0 calc(100% - 1px)/0 1px no-repeat;background-origin:content-box;padding:11px 4px;margin:0 -4px;transition:background-size var(--t-fast)}
.links a[aria-current="page"]:not(.btn){background-size:100% 1px}
.links .btn{height:44px;padding:0 18px}

/* 1. hero: big type, a short line, the framed slideshow */
.hero{padding-top:clamp(28px,4vw,56px)}

/* hero stage: framed slideshow (Amy 10/26: fast like Flamingo Estate, 1.5-2 s so faces read). Headline and
   buttons never move; pause, arrows and keys; paused offscreen, in a hidden tab, and under reduced motion. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:clamp(32px,3.5vw,56px)}
.hero-grid .t-hero{font-size:clamp(48px,min(7.4vw,12vh),120px)}
.hero-rest .t-lede{max-width:34em;margin:28px 0 0}.hero-rest .actions{margin:28px 0 0}
.stage-wrap{justify-self:end;width:100%;max-width:min(520px,62vh)}
.stage{position:relative;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden;outline-offset:4px}
.stage .f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 140ms linear}.stage .f.on{opacity:1}
/* every slide fills the same frame (Michael 10/27 "all photos the same size"): without a height on <picture> the
   img fell back to its own shape, so tall photos ran past the frame and wide ones left a gap */
.stage picture{height:100%}
/* wide photos crop to the tall frame; NUTRL Boulder centres on the woman on the right so nobody is cut in half */
.stage img[src*="reel-nutrl-boulder-f"]{object-position:100% 50%}
.stage img[src*="reel-stella-rosa-keystone-f"]{object-position:75% 50%} /* wide photo, first slide: her and the ROSA lettering */
.stage img{display:block;width:100%;height:100%;object-fit:cover}
.stage-ctl{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:12px;font-size:14px;color:var(--ink-70)}
/* three equal 44px squares (Michael 10/27); pause and play are icons with spoken labels */
.stage-ctl button{font:inherit;font-size:16px;line-height:1;color:var(--ink);background:transparent;border:1px solid var(--hair);width:44px;height:44px;padding:0;display:inline-grid;place-items:center;cursor:pointer}
.stage-ctl svg{display:block;fill:currentColor}
.stage-ctl .count{font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
@media (max-width:819px){.hero-grid{grid-template-columns:1fr;gap:22px}.hero-text{display:contents}.hero-grid .t-hero{order:1}
  .stage-wrap{order:2;justify-self:stretch;max-width:none}.hero-rest{order:3}.hero-rest .t-lede{margin-top:0}}
/* phone slideshow (M2, M3): progress bar along the bottom of the photo, round Pause inside the corner, swipe */
.stage{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.stage img{-webkit-touch-callout:none;-webkit-user-drag:none}
.stage-wrap{position:relative}
.stage-bar{position:absolute;left:12px;right:66px;bottom:31px;display:flex;gap:3px;z-index:2;pointer-events:none}
.stage-bar i{flex:1;height:3px;background:rgba(241,239,233,.55);overflow:hidden}
.stage-bar i::after{content:"";display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
.stage-bar i.done::after,.stage.paused .stage-bar i.on::after{transform:scaleX(1)}
.stage-bar i.on::after{animation:fill 1000ms linear forwards}
.stage.paused .stage-bar i.on::after{animation:none}
@keyframes fill{to{transform:scaleX(1)}}
@media (max-width:819px){.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(20,19,15,.32))}}
@media (min-width:820px){.stage-bar{display:none}}
@media (max-width:819px){
  .hero{--h1:clamp(44px,min(14.4vw,8vh),64px);padding-top:20px}
  .hero-grid{gap:28px;padding-bottom:32px}
  .hero-grid .t-hero{font-size:var(--h1)}
  .stage{aspect-ratio:auto;height:calc((100vw - 2 * var(--gut)) * 1.1)}
  .stage img{object-position:50% var(--fy,35%)}
  .stage-ctl{position:absolute;right:10px;bottom:10px;margin:0;z-index:3}
  #stage-prev,#stage-next,.stage-ctl .count{position:absolute;right:0;bottom:0;width:44px;height:44px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #stage-prev:focus-visible,#stage-next:focus-visible{clip-path:none;background:var(--paper)}
  #stage-prev:focus-visible{right:108px}#stage-next:focus-visible{right:54px}
  #stage-play{border:0;border-radius:50%;width:44px;background:rgba(20,19,15,.7);color:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;font-weight:500}
}
@supports (height:1svh){@media (max-width:819px){
  .hero{--h1:clamp(44px,min(14.4vw,8svh),64px)}
  .stage{height:clamp(300px,calc(100svh - var(--nav-h) - 3 * var(--h1) - 68px),calc((100vw - 2 * var(--gut)) * 1.25))}
}}
@media (prefers-reduced-motion:reduce){.stage .f{transition:none}.stage-bar i.on::after{animation:none;transform:scaleX(1)}}
.cap{margin-top:12px}

/* 2. client logos: three rows that run on their own in a slow loop at every width, so every brand passes by (Michael
   10/27: "they just keep going so you see more of them", "i thought logos were scrolling?"); each row holds its marks
   twice and moves half its width, so the loop has no seam; row 2 runs the other way. Where the loop cannot run
   (reduced motion, Save-Data, no JS: no .drift-live) the still cloud shows instead, every mark at once; under
   .drift-live the cloud stays in the page for screen readers only. Flat ink like .q-logo. */
.clients{padding:var(--pad-s) 0 clamp(8px,2vw,16px)}
.clients .t-kick{text-align:center}
.drift{--u:.56px;--gap:28px;position:relative;overflow:hidden;margin-top:18px;padding:6px 0;display:none;
  --fade:22%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.drift .row{display:flex;align-items:center;gap:var(--gap);width:max-content;height:calc(66px * var(--u));padding-right:var(--gap)}
.drift .row + .row{margin-top:14px}
.drift li{flex:none}
.drift img{display:block;height:max(16px,calc(var(--h) * var(--u)));width:auto;max-width:none;background:none;filter:brightness(0);opacity:.84}
.logo-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 34px;max-width:1180px;margin:18px auto 0}
.logo-cloud li{flex:none}
.logo-cloud img{display:block;height:max(16px,calc(var(--h) * .56px));width:auto;max-width:none;background:none;filter:brightness(0);opacity:.86}
.logo-name{font-size:var(--fs-lede);font-weight:500;letter-spacing:-.01em;opacity:.86;text-align:center;white-space:nowrap}
.drift-live .drift{display:block}
.drift-live .logo-cloud{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.drift-live .drift .row{animation:drift-run 56s linear infinite}
.drift-live .drift .r2{animation-direction:reverse;animation-duration:62s}
.drift-live .drift .r3{animation-delay:-20s}
.drift.still .row{animation-play-state:paused}
/* desktop: the band's larger scale, longer loops so the speed stays about the same, narrower soft edges */
@media (min-width:820px){.drift{--u:.74px;--gap:64px;--fade:10%}.drift .row + .row{margin-top:22px}
  .drift-live .drift .row{animation-duration:80s}.drift-live .drift .r2{animation-duration:88s}.drift-live .drift .r3{animation-delay:-28s}}
@keyframes drift-run{to{transform:translate3d(-50%,0,0)}}
@media (min-width:820px){.logo-cloud{gap:30px 60px;margin-top:22px}.logo-cloud img{height:calc(var(--h) * .74px)}}

/* 3. fact ledger: big numbers, small labels */
.ledger{padding:clamp(16px,1.8vw,24px) 0 0}
.ledger ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ledger li{padding:34px 28px}
.ledger li:first-child{padding-left:0}
.ledger li + li{border-left:1px solid var(--hair)}
.ledger .n{display:block;font-family:var(--display);font-size:clamp(56px,8vw,116px);font-weight:800;line-height:.92;letter-spacing:0;white-space:nowrap}
.ledger ul:has(li:nth-child(4)) li{container-type:inline-size}
.ledger ul:has(li:nth-child(4)) .n{font-size:min(clamp(56px,8vw,116px),28cqw)}
@media (min-width:820px){.ledger ul:has(li:nth-child(4)) li:first-child{padding-right:56px}}
.ledger .l{display:block;margin-top:16px;font-size:var(--fs-small);line-height:1.45;color:var(--ink-70)}

/* 4. what we staff (Home): the four service headings as links beside an overlapping photo pair (Heckfield).
   The pair is normal flow with a negative margin, so phones get no empty gap. Named duo: .pair is the About quote pair. */
.services{padding:var(--pad-m) 0 48px}
.services + .voices{padding-top:64px}
.duo-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gut);align-items:center}
.duo-grid > .duo-txt{grid-column:1/6}.duo-grid > .duo{grid-column:6/13}
.services .duo-grid{align-items:start}.services .duo-txt{padding-top:clamp(0px,3vw,40px)}
.duo{display:flex;flex-direction:column}
.duo-a{width:76%;align-self:flex-end}.duo-a img{width:100%;aspect-ratio:4/3;object-fit:cover}.duo-a .t-cap{text-align:right}
.duo-b{width:50%;margin-top:-20%;position:relative;z-index:1}.duo-b img{width:100%;aspect-ratio:4/5;object-fit:cover}
.svc-list{margin-top:28px;border-top:1px solid var(--hair)}
.svc-list a{display:flex;align-items:center;min-height:56px;padding:12px 0;border-bottom:1px solid var(--hair);text-decoration:none;font-size:var(--fs-l);line-height:1.15;letter-spacing:-.015em}
.duo-txt .actions{margin-top:28px}
.t-cap{display:block;margin-top:8px;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--ink-70)}
@media (max-width:819px){.duo-grid > .duo-txt,.duo-grid > .duo{grid-column:1/-1}.duo-a{width:84%;display:flex;flex-direction:column-reverse}.duo-b{width:62%;margin-top:-34%}
  /* phones: the back photo's caption sits above it, so the front photo overlaps the back photo itself by 34% of the
     pair (95px at 320), more than the 64px the two can drift apart. The front photo's caption sits in the free corner
     to its right, level with its foot: that corner is 38% of the pair, which is 61.3% of the front photo's width. */
  .duo-a .t-cap{margin:0 0 8px}
  .duo-b .t-cap{position:absolute;left:calc(100% + 12px);bottom:0;width:calc(61.3% - 12px);margin:0;text-wrap:balance}
  /* What we staff (Michael 10/31): Morgan (LALO bar) sits on top of the guest corner of the tray photo, narrow enough
     that it never reaches the teammate holding the tray (her hair ends at 56% of that photo = 40% of the pair; Morgan
     starts at 44%). 11/1: the caption is gone, so the tray photo widens to 82% to close the empty corner, and Morgan
     narrows to 50% so she still clears the teammate (hair at 56% x 82% = 46% of the pair; Morgan starts at 50%). */
  .services .duo-a{width:50%;position:relative;z-index:2}
  .services .duo-b{width:82%;margin-top:-20%;z-index:1}}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap;margin-bottom:48px}
.svc4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.svc4 a{display:block;text-decoration:none;height:100%}
.svc4 img{width:100%;aspect-ratio:3/4;object-fit:cover}
.svc4 .txt{padding:20px 24px 0}
.svc4 article:first-child .txt{padding-left:var(--gut)}
.svc4 p{margin-top:10px;max-width:32ch;color:var(--ink-70)}
.svc4 a:focus-visible h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* 4. case: full-width linen-2 band, wenge figure */
.case{background:var(--paper-2);padding:var(--pad-m) 0;margin-top:clamp(40px,4.2vw,60px)}
/* Home 17.8: the number and its story sit together, the footnote close under them (Michael 10/27: "lots of deadspace") */
.case-grid{display:grid;grid-template-columns:auto minmax(0,30em);justify-content:start;gap:28px clamp(56px,8vw,128px);align-items:end}
.case:not(.work-case){padding:var(--pad-s) 0}
.case + .services{padding-top:var(--pad-s)}
.figure .t-lede{margin-top:16px}
.case .sub{margin-top:20px;color:var(--ink)}
.work-case .story{margin-top:16px;max-width:46em;color:var(--ink-70)}
.case-foot{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 32px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hair)}
.case-foot p{max-width:62em}
.case-foot a{color:var(--ink)}

figcaption.t-small{margin-top:12px;max-width:48ch}

/* 5. report: you see every shift */
.report-section{padding:var(--pad-m) 0;border-top:1px solid var(--hair)}
.report-grid{display:grid;grid-template-columns:5fr 7fr;gap:32px 64px;align-items:start}
.report{background:var(--paper-2);padding:32px}
.report-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.report-top strong{font-weight:500}
.report li{display:grid;grid-template-columns:40px 1fr 18px;min-height:46px;padding:10px 0;align-items:center;border-bottom:1px solid var(--hair)}
.report .n,.steps .n{font-size:var(--fs-small);color:var(--ink-70)}

/* 6. voices: one lead quote, two under it */
.voices{padding:var(--pad-m) 0;border-top:1px solid var(--hair)}
/* two quotes sit side by side on desktop (Work), so the right half is not left empty */
@media (min-width:820px){.voices.side .wrap{display:grid;grid-template-columns:7fr 5fr;gap:32px clamp(48px,6vw,96px);align-items:start}
  .voices.side .more{display:block;margin-top:0;padding-top:0;border-top:0}}
.voices.bare .q.lead{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.q blockquote p{font-size:var(--fs-lede);line-height:1.45;letter-spacing:-.01em;text-indent:-.4em;max-width:none}
.q-logo{--qh:28px;display:block;height:min(var(--qh), calc(200px / var(--a, 1)));width:auto;max-width:none;background:none;margin-bottom:20px;filter:brightness(0);opacity:.86}
.q.lead .q-logo{--qh:36px;margin-bottom:28px}
.q figcaption{margin-top:20px;font-size:var(--fs-small);line-height:1.45}
.q figcaption b{display:block;font-weight:500;font-size:var(--fs-body);color:var(--ink)}
.q figcaption span{color:var(--ink-70)}
[data-tone="clay"] .q figcaption span{color:var(--ink)}
.q.lead{margin-top:40px}
.q.lead blockquote p{max-width:34ch}
.q.lead blockquote p{font-size:var(--fs-quote);line-height:1.18;letter-spacing:-.012em;font-weight:500;text-indent:-.42em}
.q.lead figcaption{margin-top:32px}
.more{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;margin-top:var(--pad-s);padding-top:32px;border-top:1px solid var(--hair)}
@media (max-width:819px){.more > .q + .q{padding-top:32px;border-top:1px solid var(--hair)}}

/* 7. ask: the framed-eye sign-off, centered, same ending on every page that has it */
.ask{padding:var(--pad-m) 0 var(--pad-l);border-top:1px solid var(--hair)}
.ask h2{max-width:14em}
.ask .btn{margin-top:40px}
.frame-eye{display:block;width:clamp(96px,9vw,128px);padding:clamp(14px,1.4vw,18px);border:1.5px solid var(--ink);outline:1px solid var(--ink);outline-offset:6px;margin:0 auto 40px}
.frame-eye img{width:100%;height:auto;background:none}
.ask.signoff{text-align:center;border-top:0}.ask.signoff h2{margin:0 auto}
.ask.ask-row{padding:var(--pad-m) 0 clamp(56px,6vw,84px)}
.ask-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 48px}
.ask-row h2{max-width:16em}.ask-row .btn{margin-top:0;flex:none}

/* 8. footer, with the one wave */
footer.site{background:var(--ink);color:var(--on-dark);padding:96px 0 40px;position:relative}
footer.site .wave{position:absolute;left:0;top:-1px;width:100%;height:clamp(12px,2vw,28px);color:var(--paper);display:block}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;align-items:start}
footer.site .seal{width:160px;height:auto;background:none}
footer.site nav{display:grid;grid-template-columns:repeat(2,max-content);gap:0 56px;justify-content:end}
footer.site nav a{text-decoration:none;display:inline-block;padding:9px 0;min-height:44px}
.foot-contact{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 28px;font-size:var(--fs-lede)}
.foot-contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-underline-offset:5px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:80px;font-size:var(--fs-small);color:var(--on-dark-72)}
.foot-base::before{content:"";flex-basis:100%;border-top:1px solid var(--hair-dark);margin-bottom:12px}
/* phones (Michael 10/31, "dead space on the bottom right"): the seal leaves the top, where it sat alone, and fills the
   empty corner beside the facts lines at the foot. The facts column keeps clear of it. */
@media (max-width:819px){footer.site .seal{position:absolute;right:var(--gut);bottom:28px}
  footer.site .foot-base > span{max-width:calc(100% - 108px)}
}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
footer.site :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:-999px;top:12px}
.skip:focus{left:16px;z-index:9;background:var(--paper);color:var(--ink);padding:8px 14px}
main:focus{outline:none}

/* inner pages */
.page-head{padding:var(--pad-m) 0 var(--pad-s)}
.page-head .t-lede{margin-top:24px;max-width:34em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;align-items:start}
.note{margin-top:24px}
.join-note{margin-top:16px}

/* what we do: four tall photos in one row, like a menu (REDESIGN-SPEC 4) */
.svc-menu{padding:0 0 var(--pad-m)}
.svc-menu .n{display:block;font-size:var(--fs-small);color:var(--ink-70);margin-bottom:10px}
.svc-menu .txt p{color:var(--ink);max-width:34ch}
.foot-base .facts span{white-space:nowrap}
.foot-base .facts span + span::before{content:"\00b7\00a0"}
/* phones: one fact per line, no dots, so no separator ever lands at a line end or start */
@media (max-width:559px){.foot-base .facts{display:flex;flex-direction:column;gap:2px}.foot-base .facts span + span::before{content:none}}
.steps-section{padding:var(--pad-m) 0;background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.steps li{border-top:1px solid var(--ink);padding-top:16px}
.steps p{margin-top:12px}
.facts-section{padding:var(--pad-m) 0 var(--pad-s)}
.block{display:grid;grid-template-columns:5fr 7fr;gap:20px 64px;padding:var(--pad-s) 0;border-top:1px solid var(--hair)}
.block:first-child{border-top:0;padding-top:0}
.block:last-child{padding-bottom:0}
.hours{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;border-top:1px solid var(--hair)}
.hours li{padding:14px 0;border-bottom:1px solid var(--hair)}
.after{margin-top:20px}
.qa > div{padding:18px 0;border-bottom:1px solid var(--hair)}
.qa > div:first-child{padding-top:0}
/* tap-to-open questions (M9) */
.qa-i{border-bottom:1px solid var(--hair)}
.qa-i summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-weight:500;cursor:pointer}
.qa-i summary::-webkit-details-marker{display:none}
.qa-i summary::after{content:"+";flex:none;width:20px;text-align:center;font-size:22px;font-weight:300;line-height:1;transition:transform 160ms ease-out}
.qa-i[open] summary::after{transform:rotate(45deg)}
.qa-a{padding:0 36px 20px 0;color:var(--ink-70)}
.block .qa .qa-i:first-child summary{padding-top:0;min-height:48px}
.qa dt{font-weight:500}
.qa dd{margin-top:6px;color:var(--ink-70)}

/* work */
.case.work-case{margin-top:0}
.figs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.figs div{padding:24px 24px 28px;border-left:1px solid var(--hair)}
.figs div:first-child{padding-left:0;border-left:0}
.figs dt{font-family:var(--display);font-weight:800;letter-spacing:0;line-height:.92;font-size:clamp(40px,4.45vw,64px)}
.figs .w dt{color:var(--wenge)}
.figs dd{margin-top:12px}
.page-head .method{margin-top:14px;max-width:44em}
.work-case .foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--hair);max-width:62em}
/* archive (Madre): three columns at three speeds, column 2 set lower; two columns on phones */
.archive{overflow:hidden;contain:paint;padding:var(--pad-m) 0}
.acols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,28px);align-items:start}
.acol{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,36px)}
.acol:nth-child(2){margin-top:clamp(56px,9vw,140px)}
.acol img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:819px){.acols{grid-template-columns:repeat(2,minmax(0,1fr))}.acol-3{display:none}.acol:nth-child(2){margin-top:24px}}

/* about */
/* About opening (Michael 10/28: the old "About Colab" band was dead space): the founder story is the hero */
.about-hero{padding:clamp(24px,3vw,48px) 0 var(--pad-m)}
.hero2{display:grid;grid-template-columns:7fr 5fr;gap:40px clamp(40px,5vw,80px);align-items:start}
.hero2{grid-template-rows:auto auto 1fr}.hero2-head{grid-column:1;grid-row:1}.hero2 > .txt{grid-column:1;grid-row:2}.hero2 > figure{grid-column:2;grid-row:1/span 3}
.hero2 .t-hero{font-size:clamp(44px,6.6vw,104px);margin-top:14px;white-space:nowrap}.hero2 .founder{margin-top:8px}
.hero2{align-items:stretch}.hero2 > figure{display:flex;flex-direction:column;margin:0}
.hero2 > figure{align-self:start}.hero2 > figure img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}
/* 11/4 eve (Michael: "need another photo here ... so much dead space below"): a second, wider photo under the text,
   over the lower-left corner of the first */
.hero2-b{grid-column:1;grid-row:3;justify-self:end;align-self:start;width:min(68%,480px);position:relative;z-index:2;
  margin-top:-24px;margin-right:calc(-1 * clamp(40px,5vw,80px) - 88px)}
.hero2-b img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
/* About: founder story with then and now (build.py ABOUT) */
.then-now{display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border-top:1px solid var(--hair)}
.then-now > div{padding:24px 28px 0 0}.then-now > div + div{padding-left:28px;border-left:1px solid var(--hair)}
.then-now .yr{display:block;font:800 clamp(52px,5.4vw,88px)/.88 var(--display);letter-spacing:0;color:var(--wenge)}
.then-now p{margin-top:14px;font-size:var(--fs-lede);line-height:1.45;max-width:22ch}
.hero2 .t-lede.after{margin-top:32px;max-width:44ch}
.founder{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin-top:28px}
.founder picture{width:clamp(96px,9.2vw,132px)}.founder img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.founder .t-lede{margin-top:0;max-width:44ch}.founder .t-small{margin-top:10px}
@media (max-width:559px){.founder{display:block}.founder picture{float:left;width:88px;margin:4px 16px 6px 0;shape-outside:circle(50%)}.founder > div{display:contents}.founder .t-small{clear:both;padding-top:4px}}
@media (max-width:559px){.then-now > div{padding-right:14px}.then-now > div + div{padding-left:14px}}
@media (max-width:819px){.hero2{grid-template-columns:1fr;grid-template-rows:none}.hero2-head,.hero2 > .txt,.hero2 > figure{grid-column:1;grid-row:auto}.hero2 > figure{max-width:520px}.hero2 > figure img{height:auto;min-height:0;aspect-ratio:4/5}.hero2-b{grid-row:auto;width:62%;max-width:360px;margin:-30% 0 0 auto}.hero2 .t-hero{font-size:clamp(40px,12.4vw,64px)}}
/* About: where our ambassadors live, one tile per state, filled where they live */
.reach{padding:var(--pad-m) 0}
.reach-grid{display:grid;grid-template-columns:5fr 7fr;gap:40px 64px;align-items:center}
.reach .t-lede{margin-top:24px;max-width:30ch}
.tmap{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;--lamp:var(--clay)}
.tmap i{font-style:normal;aspect-ratio:1;display:grid;place-items:center;font:600 clamp(9px,.85vw,12px)/1 var(--font);letter-spacing:.02em;border:1px solid var(--hair);color:var(--ink-70)}
.tmap i.on{background:var(--lamp);border-color:var(--lamp);color:var(--ink)}
.tmap i.on.off{background:var(--ink);border-color:var(--ink);color:rgba(241,239,233,.55)}
.rise-on .tmap i{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
@media (max-width:819px){.reach-grid{grid-template-columns:1fr}}
@media (max-width:559px){.tmap{gap:4px}.tmap i{font-size:11px}}/* 11/2 phone audit: was 9px */
/* About people: an overlapping collage at mixed scales (Heckfield / Madre from Amy's direction). Each photo owns a grid
   area; overlaps only cover the lower part of the photo underneath, so no face is hidden. */
.crew-sec{padding:var(--pad-m) 0}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));aspect-ratio:1184/1000}
.collage h2{grid-area:1/1/5/5;align-self:start;margin:0;padding-right:16px}
.collage .cl{margin:0;min-width:0;min-height:0;position:relative}
.collage .cl picture,.collage .cl img{display:block;width:100%;height:100%}
.collage .cl img{object-fit:cover;box-shadow:0 18px 40px -24px rgba(20,19,15,.45)}
.cl1{grid-area:1/5/7/12;z-index:1}.cl2{grid-area:5/2/13/6;z-index:2}.cl3{grid-area:6/6/13/9;z-index:3}
.cl4{grid-area:4/10/11/13;z-index:4}.cl5{grid-area:9/9/13/12;z-index:5}
.cl1 img{object-position:50% 28%}.cl2 img{object-position:50% 30%}.cl3 img{object-position:40% 20%}.cl4 img{object-position:50% 25%}.cl5 img{object-position:50% 30%}
@media (max-width:819px){
  .collage{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(16,minmax(0,1fr));aspect-ratio:350/900}
  .collage h2{grid-area:1/1/3/7;padding:0}
  .cl1{grid-area:3/1/7/7}.cl2{grid-area:6/1/12/4}.cl3{grid-area:6/4/12/7}.cl4{grid-area:11/2/17/5}.cl5{grid-area:14/4/17/7}}
.rise-on .collage.cw .cl picture{opacity:0;transition:opacity .7s ease var(--d),transform 1s cubic-bezier(.2,.7,.2,1) var(--d)}
.rise-on .collage.cw .cl1 picture{--d:0ms;transform:translate3d(48px,0,0) scale(.96)}
.rise-on .collage.cw .cl2 picture{--d:120ms;transform:translate3d(-48px,32px,0)}
.rise-on .collage.cw .cl3 picture{--d:240ms;transform:translate3d(0,64px,0)}
.rise-on .collage.cw .cl4 picture{--d:360ms;transform:translate3d(48px,40px,0)}
.rise-on .collage.cw .cl5 picture{--d:480ms;transform:translate3d(0,56px,0) scale(.94)}
.rise-on .collage.cw.in .cl picture{opacity:1;transform:none}
.pair{display:grid;gap:32px;margin-top:var(--pad-s)}
.mission{padding:0 0 var(--pad-m)}
.mission .block{border-top:1px solid var(--hair)}
.pair .q{padding-top:24px;border-top:1px solid var(--hair)}

/* contact and join */
.contact-mail{margin-top:24px;font-size:var(--fs-lede);overflow-wrap:anywhere}
.contact-mail a{text-decoration-thickness:1px;text-underline-offset:5px}
.copy{margin-top:16px}
.copy.wait{visibility:hidden}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:var(--fs-small);color:var(--ink-70);margin-bottom:6px}
input,textarea,select{width:100%;font:inherit;color:var(--ink);background:#fbfaf6;border:1px solid var(--hair);border-radius:0;padding:12px 14px}
input,textarea,select{-webkit-appearance:none;appearance:none}
select{height:52px;padding-right:44px;background:#fbfaf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314130f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
textarea{min-height:128px;resize:vertical}
input,textarea,select{scroll-margin-top:calc(var(--nav-h) + 40px)}
.err{margin-top:6px;font-size:14px;line-height:1.4;color:#8a2a1f}
.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
form .btn{justify-self:start;margin-top:8px}
.thanks{display:none;margin-top:24px;padding-top:20px;border-top:1px solid var(--hair)}
.thanks:focus{outline:none}
.thanks p{font-weight:500}
form.sent + .thanks{display:block}
.webmail{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.webmail .btn{height:44px;padding:0 18px}
.join-fig{max-width:480px;justify-self:end;width:100%}
.join-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.join .actions{margin-top:32px}
/* Michael 11/2 ("Dead Space R US"): the Join intro was one small line beside a tall photo. On desktop it reads as a
   headline, sits level with the middle of the photo, and the photo stops at about two thirds of the screen */
@media (min-width:820px){.join .two{align-items:center}.join .t-lede{font-size:clamp(30px,3.3vw,54px);line-height:1.08;letter-spacing:-.025em;max-width:13em}.join-fig img{max-height:min(68vh,600px)}}
/* Join: "Grow with us" runs across the top (Michael 10/31), one slow loop, the eye between repeats */
.grow{overflow:hidden;margin:0 0 clamp(28px,4vw,56px)}
.grow-t{display:flex;width:max-content;animation:grow 46s linear infinite}
.grow-t span{display:flex;align-items:center;gap:.28em;padding-right:.28em;font:800 clamp(64px,10vw,150px)/.9 var(--display);text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.grow-t img{height:.56em;width:auto;mix-blend-mode:multiply}
@keyframes grow{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.grow-t{animation:none}}
.alum-k{margin-bottom:28px;grid-column:1/-1}
.roles-section{padding:var(--pad-s) 0 var(--pad-m);border-top:1px solid var(--hair)}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;margin-top:48px}
.roles img{width:100%;aspect-ratio:4/5;object-fit:cover}
.roles h3{margin-top:20px}
.roles p{margin-top:10px;max-width:34ch;color:var(--ink-70)}
.join-facts{padding-top:var(--pad-m)}
.hours.one{grid-template-columns:1fr}
/* the nine values stay open (Michael 10/21), compact: name over gloss, two columns on wide screens */
.values{display:grid;grid-template-columns:1fr;column-gap:32px;border-top:1px solid var(--hair)}
.values > div{padding:14px 0 15px;border-bottom:1px solid var(--hair)}
.values dt{font-weight:500}
.values dd{margin-top:2px;font-size:15px;line-height:1.45;color:var(--ink-70)}
@media (min-width:820px){.values{grid-template-columns:1fr 1fr}}
/* 11/3 Michael: every value gets its line, the last one too (the 2-column grid left Leave it better without one) */
.steps-section .mail{margin-top:16px}
.steps.three{grid-template-columns:repeat(3,1fr)}
.apply-cta{margin-top:40px}
.apply-note{margin-top:14px}
.legal h2{font-size:var(--fs-l);margin-top:40px}
.legal p{margin-top:12px}
.legal .t-lede + h2{margin-top:56px}

/* mobile menu, full width under the bar */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-size:15px;padding:8px 4px;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:fixed;left:0;right:0;top:var(--nav-h);background:var(--paper);border-bottom:1px solid var(--hair);padding:8px var(--gut) 24px}
.menu nav a{display:block;padding:14px 0;font-size:var(--fs-l);text-decoration:none;border-bottom:1px solid var(--hair)}
.menu nav{z-index:2;overscroll-behavior:contain}
.menu nav a.menu-cta{display:flex;justify-content:center;align-items:center;width:100%;height:52px;margin-top:20px;padding:0;border-bottom:0;font:500 16px/1 var(--font);color:var(--paper)}
.menu[open] .m-o,.menu:not([open]) .m-c{display:none}
.menu[open]::after{content:"";position:fixed;left:0;right:0;top:var(--nav-h);height:100vh;height:100lvh;background:rgba(20,19,15,.32);z-index:1;cursor:pointer;touch-action:none}
html.menu-open,html.menu-open body{overflow:hidden}
.links .btn[aria-current="page"]{display:none}
@media (max-width:359px){.links .btn{display:none}}
/* Home on phones: the hero already carries Book a call, so the header copy would make three on one screen */
@media (max-width:429px){body:has(.hero) .links .btn{display:none}}

@media (max-width:979px){
  .svc4{grid-template-columns:1fr 1fr;row-gap:40px}
  .svc4 article:first-child .txt{padding-left:24px}
  .svc4 .txt{padding-left:24px}
  .steps{grid-template-columns:1fr 1fr}
  .roles{grid-template-columns:1fr 1fr}
}
@media (max-width:819px){
  :root{--nav-h:72px}
  .links a:not(.btn){display:none}
  .links{margin-left:auto}
  .menu{display:block}
  .case-grid,.report-grid,.two,.about-grid,.block,.foot-grid{grid-template-columns:1fr}
  .case{margin-top:40px}.case-foot{margin-top:28px}.services .duo-txt{padding-top:0}
  .ledger ul{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .ledger li:nth-child(odd){border-left:0;padding-left:0}
  .ledger li:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .ledger li:nth-child(3):last-child{grid-column:1/-1}
  .figs{grid-template-columns:1fr 1fr}
  .figs div:nth-child(3){padding-left:0;border-left:0}
  .figs div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .more{grid-template-columns:1fr}
  .join-fig{justify-self:start;max-width:none}
  footer.site nav{justify-content:start;gap:0 40px}
  footer.site .seal{width:92px}
  /* Michael 10/31 again, "still way too spacious": tighter top, rows, contact gap and base */
  footer.site{padding:52px 0 28px}
  .foot-grid{gap:12px 0}
  footer.site nav a{padding:6px 0;min-height:40px}
  .foot-base{margin-top:24px}
  .foot-base::before{margin-bottom:8px}
}
@media (max-width:559px){
  .svc4{grid-template-columns:1fr;row-gap:0}
  .svc4 article{border-bottom:1px solid var(--hair)}
  .svc4 img{aspect-ratio:4/3;object-position:50% 35%}
  .svc4 .txt,.svc4 article:first-child .txt{padding:16px var(--gut) 32px}
  .head{margin-bottom:32px}
  .ledger ul:not(:has(li:nth-child(4))){grid-template-columns:1fr}
  .ledger ul:not(:has(li:nth-child(4))) li{border-left:0;padding:22px 0;border-bottom:1px solid var(--hair);grid-column:auto}
  .ledger ul:not(:has(li:nth-child(4))) li:last-child{border-bottom:0}
  .ledger ul:has(li:nth-child(4)) li{padding:22px 12px}
  .ledger ul:has(li:nth-child(4)) li:nth-child(odd){padding-left:0}
  .ledger ul:has(li:nth-child(4)) .n{font-size:min(44px,12.5vw)}
  .contact .two{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .contact .two > div:first-child{display:contents}
  .contact .contact-form{order:1;margin-top:32px}
  .contact .contact-mail,.contact .copy,.contact .note:not(.join-note){order:2}
  .contact .contact-mail{margin-top:40px}
  .figs div{padding:20px 12px 22px}
  .figs div:nth-child(odd){padding-left:0}
  .figs dd{font-size:var(--fs-small)}
  .figs dt{font-size:min(40px,11.5vw)}
  .q-logo{height:min(var(--qh), calc(140px / var(--a, 1)))}
  .steps,.steps.three,.roles{grid-template-columns:1fr;gap:24px}
  .roles{gap:40px}
  .hours{grid-template-columns:1fr}
  .report{padding:20px}
  .q blockquote p,.q.lead blockquote p{text-indent:0}
  form{grid-template-columns:1fr}
  .actions .btn{flex:1 1 auto}
  .webmail .btn{flex:1 1 auto}
  form .btn,.ask .btn,.apply-cta .btn{width:100%;justify-self:stretch}
}
/* phone rhythm (M11): tighter section spacing, inner page heads start closer to the bar */
@media (max-width:559px){
  :root{--pad-s:40px;--pad-m:44px;--pad-l:60px}
  .clients{padding-top:32px}
  .page-head{padding:40px 0 32px}
  .page-head .t-xl{font-size:clamp(34px,9.6vw,44px);line-height:1.04}
  .services{padding-bottom:40px}.services + .voices{padding-top:48px}
  .steps-section + .facts-section,.join-facts{padding-top:var(--pad-s)}
}
.block .qa > :last-child,.block .hours.one li:last-child{border-bottom:0}
@media (max-width:559px){.block .hours li:last-child{border-bottom:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
.case2,.case3{border-top:1px solid var(--hair)}

/* ===== art layer (10/27, from the art study): html[data-art="on"] ===== */
/* --clay was a terracotta (#d9a084); Michael 10/30: "is this orange color like a Claude tell?" - yes, clay on cream is
   Claude's own look and not a Colab colour. Now a wenge tint (brand accent #4a3a42 into linen, warmed a touch), so the
   section bands and the About map stay inside linen / ink / wenge. Name kept so the markup does not change. */
:root{--sage:#cfd5c8;--clay:#c8b8be;--slate:#bcc2c9;--tone:var(--paper);--t-tone:600ms;
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-band:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 1. grain: painted into the page background, never a fixed overlay, never over photos */
html[data-art="on"] body{background-color:var(--tone);background-image:var(--grain);transition:background-color var(--t-tone) ease}
html[data-art="on"] .nav{background-color:var(--tone);transition:background-color var(--t-tone) ease,transform 200ms ease-out}
html[data-art="on"] .menu nav{background-color:var(--tone)}
/* 2. section tones: static colour blocks by default (no JS, reduced motion); live = body colour follows the section at 55% */
main [data-tone="sage"]{background:var(--sage)}main [data-tone="clay"]{background:var(--clay)}main [data-tone="slate"]{background:var(--slate)}main [data-tone="paper2"]{background:var(--paper-2)}
html.tone-live main [data-tone]{background:transparent}
body[data-tone="sage"]{--tone:var(--sage)}body[data-tone="clay"]{--tone:var(--clay)}body[data-tone="slate"]{--tone:var(--slate)}body[data-tone="paper2"]{--tone:var(--paper-2)}
html[data-art="on"] footer.site .wave{color:var(--tone)}
html[data-art="on"] body.end-slate footer.site .wave{color:#b4bac1}  /* the slate band as it renders under the paper grain (measured 180,186,192), so no step at the wave */  /* 11/5 Michael: a light line above the wave on every page; the wave must match the band above it */
/* a coloured block meets the next one edge to edge, so no hairline between them */
html[data-art="on"] main :is([data-tone="sage"],[data-tone="clay"],[data-tone="slate"]),html[data-art="on"] main :is([data-tone="sage"],[data-tone="clay"],[data-tone="slate"]) + [data-tone]{border-top:0}
/* 3. letter-spaced labels: existing short labels only */
.t-kick{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-70)}
.svc-menu .n,.steps .n{font-size:12px;font-weight:500;letter-spacing:.04em}
html.art-live .near{will-change:transform}
@media (prefers-reduced-motion:reduce){html[data-art="on"] body,html[data-art="on"] .nav{transition:none}}
/* 4. stamp: hangs off the slideshow frame (top left on desktop, top right on phones) and the Join photo */
.stage-wrap,.has-stamp{position:relative}
.stamp{--s:clamp(104px,11vw,150px);position:absolute;z-index:3;width:var(--s);height:var(--s);left:calc(var(--s) / -2);top:calc(var(--s) / -3.2);pointer-events:none;overflow:hidden}
/* overflow:hidden: the turning ring's square box grows to 1.41x at 45 degrees and would push the page sideways on
   phones; the drawing is a circle inside the box, so clipping to the box hides nothing */
.stamp-ring{display:block;width:100%;height:100%;overflow:visible}
.stamp-disc{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}.stamp-inner{fill:none;stroke:var(--ink);stroke-width:1}
.stamp-text{font:500 13.5px var(--font);fill:var(--ink)}
.stamp .stamp-eye{position:absolute;left:33%;top:33%;width:34%;aspect-ratio:160/158}
.stamp-eye img{position:absolute;inset:0;width:100%;height:auto;background:none}
/* the ring of words circles the eye and the eye turns in 3D (Michael 10/27, after Madre). Each eye layer turns on its
   own at its own depth (no nested 3D, which Safari flattens), so the stack reads as a thick coin edge-on.
   stamp-live is set by the art script, so reduced motion, Save-Data and no-JS stay still; .still = off screen. */
.stamp-live .stamp-ring{animation:stamp-spin 18s linear infinite}
.stamp-live .stamp-eye img{animation:stamp-turn 6s linear infinite}
.stamp.still .stamp-ring,.stamp.still .stamp-eye img{animation-play-state:paused}
@keyframes stamp-spin{to{transform:rotate(360deg)}}
@keyframes stamp-turn{from{transform:perspective(600px) rotateY(0deg) translateZ(var(--z,0px))}to{transform:perspective(600px) rotateY(360deg) translateZ(var(--z,0px))}}
@media (max-width:819px){.stamp{--s:clamp(72px,22vw,96px);left:auto;right:-6px;top:calc(var(--s) / -5.5)}}
/* 5. B&W band with see-through letters (About) */
.band{position:relative;overflow:hidden;contain:paint;background:var(--ink);height:clamp(420px,72vh,760px);height:clamp(420px,72svh,760px)}
.band picture{position:absolute;left:0;right:0;top:-8%;bottom:-8%}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% var(--oy,35%);filter:grayscale(1) contrast(1.12) brightness(.9);background:none}
.band::after{content:"";position:absolute;inset:0;background-image:var(--grain-band);pointer-events:none}
.band .ghost{position:absolute;left:0;white-space:nowrap;font:800 clamp(120px,20vw,300px)/.8 var(--display);text-transform:uppercase;color:rgba(241,239,233,.62);pointer-events:none;-webkit-user-select:none;user-select:none}
.band .g1{top:6%;transform:translate3d(-6vw,0,0)}.band .g2{bottom:4%;transform:translate3d(-28vw,0,0)}
@media (min-width:820px){.band .g1{top:-2%}.band .g2{bottom:-5%}.band img{object-position:50% var(--oyd,30%)}}
@media (max-width:819px){.band picture{top:0;bottom:0}}
/* Home band sits between the ledger and the 17.8 case: air above, the case meets it edge to edge */
.ledger + .band{margin-top:var(--pad-s)}
.band + .case{margin-top:0}

/* 6. motion pass (Michael 10/27: "build all five"). All of it is off with reduced motion. */
/* page headlines rise in word by word on load; the words are spans from the build and this is CSS only, so they can
   never stick hidden */
@media (prefers-reduced-motion:no-preference){
  .lw{animation:lw-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .lw .w{animation:w-in .8s ease both;animation-delay:calc(90ms + var(--i) * 70ms)}
}
@keyframes lw-rise{from{transform:translate3d(0,.3em,0)}}
@keyframes w-in{from{opacity:0}}
/* scroll-in, set only by the art script (.rise-on): section headings rise word by word, photos unveil top to bottom */
.rise-on .rw{transform:translate3d(0,.32em,0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rise-on .rw .w{opacity:0;transition:opacity .8s ease calc(var(--i) * 50ms)}
.rise-on .rw.in{transform:none}.rise-on .rw.in .w{opacity:1}
.rise-on .uv{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.rise-on .uv img{transform:scale(1.08);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.rise-on .uv.in{clip-path:inset(0 0 0 0)}.rise-on .uv.in img{transform:none}
/* What we staff: pointing at a line shows its photo over the setting photo (desktop with a mouse; CSS :has) */
.peek-wrap{position:relative}
.svc-peek{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:820px){
  .svc-peek{display:block;position:absolute;inset:0;pointer-events:none}
  .svc-peek picture{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
  .svc-peek img{width:100%;height:100%;object-fit:cover;background:none}
  .services:has(.svc-list li:nth-child(1) a:is(:hover,:focus-visible)) .svc-peek picture:nth-child(1),
  .services:has(.svc-list li:nth-child(2) a:is(:hover,:focus-visible)) .svc-peek picture:nth-child(2),
  .services:has(.svc-list li:nth-child(3) a:is(:hover,:focus-visible)) .svc-peek picture:nth-child(3),
  .services:has(.svc-list li:nth-child(4) a:is(:hover,:focus-visible)) .svc-peek picture:nth-child(4){opacity:1}
  .services .duo .t-cap{transition:opacity .3s ease}
  .services:has(.svc-list a:is(:hover,:focus-visible)) .duo .t-cap{opacity:0}
}
@media (prefers-reduced-motion:reduce){.svc-peek picture,.services .duo .t-cap{transition:none}}
/* What we staff cascade (duo rot_a / rot_b): four photos per slot, 5 s each. Extra photo --i (1-3) holds its quarter
   of a 20 s loop; the first photo shows when none of them do. The back slot runs 2.5 s behind the front. */
.duo .rot{position:relative}.duo .rot-l{position:absolute;inset:0;opacity:0;animation:duo-rot 20s calc(var(--i,1) * 5s - 1s) infinite ease-in-out}
.duo .rot-l picture,.duo .rot-l img{display:block;width:100%;height:100%;object-fit:cover}
.duo .rot-b .rot-l{animation-delay:calc(var(--i,1) * 5s + 1.5s)}
@keyframes duo-rot{0%{opacity:0}4%,25%{opacity:1}29%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.duo .rot-l{animation:none}}
/* pages cross-fade instead of blinking (newer Safari and Chrome; other browsers just load the page); the header
   stays put */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
.nav{view-transition-name:site-nav}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Book a call: who you'll talk to (shows only once the headshots are in) */
.team{margin-top:44px}.team .t-kick{margin-bottom:16px}
.team ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:520px}
.team li{min-width:0;font-size:var(--fs-small);line-height:1.35}
.team picture,.team img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--paper-2)}
.team b{display:block;margin-top:10px;font-weight:500;font-size:var(--fs-body)}
.team span{display:block;color:var(--ink-70)}
@media (max-width:819px){.contact .team{order:2;margin-top:40px}}

/* 7. Work, the report (Michael 10/27): the eye opens, a line runs to Together, Together writes itself in, the rows tick.
   Hidden states only under .flow-on, which the art script sets (never for reduced motion, Save-Data or no JS). */
.report-lead{display:flex;flex-direction:column;gap:clamp(32px,4.5vw,56px)}
@media (min-width:820px){.report-lead{align-self:stretch;justify-content:space-between}}
.flow{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);max-width:520px}
.flow-eye{position:relative;flex:none;width:clamp(60px,7.4vw,108px);aspect-ratio:160/158}
.flow-eye img{position:absolute;inset:0;width:100%;height:100%;background:none}
.flow-line{position:relative;flex:1;min-width:32px;height:1px;background:rgba(20,19,15,.38)}
.flow-line i{position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:0}
.flow-tg{flex:none;width:clamp(150px,17.5vw,252px);color:var(--ink)}
.tg{display:block;width:100%;height:auto;overflow:visible}
.flow-cap{margin-top:20px;max-width:22em}
.report .tick{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.flow-on .fe-body{transform:scaleY(.06);opacity:0}
.flow-on .fe-rays{transform:scale(.5) rotate(-30deg);opacity:0}
.flow-on .flow-line{transform:scaleX(0);transform-origin:left center}
.flow-on .tg-fig{opacity:0;transform:translateX(-14px)}
.flow-on .tg-l{opacity:0;transform:translateY(6px)}
.flow-on .flow-cap{opacity:0;transform:translateY(8px)}
.flow-on .report li{opacity:.28}
.flow-on .report .tick path{stroke-dasharray:16;stroke-dashoffset:16}
.flow-on.in .fe-body{animation:fe-open .5s cubic-bezier(.2,.7,.2,1) .05s both,fe-blink .32s ease-in-out 1.6s}
.flow-on.in .fe-rays{animation:fe-rays .8s cubic-bezier(.3,1.5,.5,1) .2s both}
.flow-on.in .flow-line{transform:none;transition:transform .7s cubic-bezier(.6,0,.2,1) .55s}
.flow-on.in .flow-line i{animation:fe-dot 1.1s cubic-bezier(.6,0,.3,1) 1s 3 both}
.flow-on.in .tg-fig{opacity:1;transform:none;transition:opacity .6s ease 1.35s,transform .8s cubic-bezier(.2,.7,.2,1) 1.35s}
.flow-on.in .tg-l{opacity:1;transform:none;transition:opacity .45s ease calc(1.5s + var(--i) * 60ms),transform .6s cubic-bezier(.2,.7,.2,1) calc(1.5s + var(--i) * 60ms)}
.flow-on.in .flow-cap{opacity:1;transform:none;transition:opacity .6s ease 2.2s,transform .7s cubic-bezier(.2,.7,.2,1) 2.2s}
.flow-on.in .report li{opacity:1;transition:opacity .4s ease calc(.5s + var(--i) * 170ms)}
.flow-on.in .report .tick path{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease calc(.65s + var(--i) * 170ms)}
@keyframes fe-open{from{transform:scaleY(.06);opacity:0}to{transform:none;opacity:1}}
@keyframes fe-blink{0%,100%{transform:none}50%{transform:scaleY(.08)}}
@keyframes fe-rays{from{transform:scale(.5) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fe-dot{0%{left:0;opacity:0}12%{opacity:1}70%{left:calc(100% - 7px);opacity:1}85%,100%{left:calc(100% - 7px);opacity:0}}

/* 8. Home, client quotes as a deck under the logo wall (Michael 10/27, option A from the lab page). Without the script
   (.live) the cards are a plain list; with it they stack, the top one can be swiped, and the next two peek out. */
.dk{padding:var(--pad-m) 0;overflow:hidden}
.dk-grid{display:grid;grid-template-columns:4fr 8fr;gap:32px clamp(40px,6vw,96px);align-items:center}
.dk-ctl{display:flex;align-items:center;gap:10px;margin-top:28px}.dk-ctl[hidden]{display:none}
.dk-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.dk-btn svg{fill:currentColor}.dk-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.dk-btn:hover{background:var(--ink);color:var(--paper)}}
.dk-stack{list-style:none;display:grid;gap:20px}
.dk-card{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px);background:var(--cbg);border-radius:4px;
  box-shadow:0 1px 0 rgba(20,19,15,.06),0 22px 44px -26px rgba(20,19,15,.45)}
.dk-card.c0{--cbg:var(--paper)}.dk-card.c1{--cbg:var(--sage)}.dk-card.c2{--cbg:var(--slate)}.dk-card.c3{--cbg:var(--paper-2)}
.dk-q .q-logo{margin-bottom:24px}
.dk-q blockquote p{font-size:clamp(24px,2.9vw,44px);line-height:1.14;letter-spacing:-.015em;font-weight:500;text-indent:-.42em;max-width:28ch}
.dk-q figcaption{margin-top:24px;font-size:var(--fs-small);line-height:1.45}
.dk-q figcaption b{display:block;font-weight:500;font-size:var(--fs-body)}.dk-q figcaption span{color:var(--ink)}
.dk.live .dk-stack{gap:0;padding:18px 18px 0 0}
.dk.live .dk-card{grid-area:1/1;align-self:stretch;opacity:0;z-index:calc(10 - var(--k));
  transform:translate(calc(var(--k) * 9px),calc(var(--k) * -9px)) rotate(calc(var(--k) * 1.6deg));
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.dk.live .dk-card:is([data-k="0"],[data-k="1"],[data-k="2"]){opacity:1}
.dk.live .dk-card.drag{transition:none;cursor:grabbing}
.dk.live .dk-card.out{transform:translateX(calc(var(--dx,1) * 115%)) rotate(calc(var(--dx,1) * 14deg));opacity:0;
  transition:transform .42s cubic-bezier(.4,0,.8,.4),opacity .42s ease}
.dk-card img{pointer-events:none}
@media (max-width:819px){.dk-grid{grid-template-columns:1fr}.dk.live .dk-stack{padding:14px 14px 0 0}.dk-q blockquote p{text-indent:0}}
@media (prefers-reduced-motion:reduce){.dk.live .dk-card,.dk.live .dk-card.out{transition:none}}
/* Home results band: three cases, one at a time, 5 s each (Michael 10/30). Slides share one grid cell, so the band
   keeps the height of the tallest and nothing below it moves. */
.crot{display:grid}
.crot-s{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 450ms ease,visibility 0s linear 450ms}
.crot-s.on{opacity:1;visibility:visible;transition:opacity 450ms ease}
.crot-note{margin:28px 0 0;color:var(--ink-70)}
.case-rot .case-foot{align-items:center}
/* Michael 11/2 ("what about this dead space on the right?"): on desktop the words take the rest of the row instead of
   stopping at 30em, and the number and headline are set larger: the words now reach 82-95% of the row (were 75-93%). The number column is one width on every slide, so the words no longer jump sideways when the slide changes */
@media (min-width:820px){.case-rot .case-grid{grid-template-columns:minmax(max-content,clamp(262px,23vw,340px)) minmax(0,1fr)}.case-rot .t-l{font-size:clamp(34px,3.7vw,52px);line-height:1.06;letter-spacing:-.02em}.case-rot .t-figure{font-size:clamp(110px,11.5vw,176px)}.case-rot .sub{max-width:none;font-size:clamp(19px,1.5vw,23px)}}
/* Eight cases (10/31): the dots shrink to fit a 320 px phone instead of pushing the page sideways; taps stay 44 px tall. */
.crot-ctl{display:flex;align-items:center;gap:2px;margin-left:-8px;min-width:0;max-width:calc(100% + 8px)}
.crot-dot,.crot-play{width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.crot-dot{flex:0 1 44px;min-width:24px}.crot-play{flex:none}
.crot-dot i{display:block;width:min(28px,70%);height:3px;background:var(--hair);transition:background var(--t-fast)}
.crot-dot[aria-current="true"] i{background:var(--ink)}
.crot-play svg{display:block;fill:currentColor}
@media (prefers-reduced-motion:reduce){.crot-s,.crot-s.on{transition:none}}

/* Work page photo strip (10/31): four shifts, own shape cropped 4:5, place and date under each */
.work-strip{padding:clamp(8px,1.5vw,20px) 0 0}
.ws-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.ws-row figure{margin:0}.ws-row img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 18px 40px -26px rgba(20,19,15,.45)}
.ws-row figure:nth-child(odd){transform:rotate(-1deg)}.ws-row figure:nth-child(even){transform:rotate(1.2deg) translateY(10px)}
@media (max-width:819px){.ws-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Home results (Michael 11/1, replaces the stamp): one plain figure per slide that rises in as the slide shows. */
.case-rot .rise.hit{animation:fig-rise 600ms cubic-bezier(.2,.8,.2,1) both}
@keyframes fig-rise{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.case-rot .rise.hit{animation:none}}

/* Home: the same-crew line under the number strip (Michael 11/1 "All five") */
.ledger-note{margin:24px 0 0;padding-bottom:clamp(28px,3.4vw,48px);max-width:40em;color:var(--ink-70)}
/* frames.json phone crops (11/3): the kept point follows the crop the browser picked; 559px = the phone crop media */
img.fr2{object-position:var(--d)!important}
@media (max-width:559px){img.fr2{object-position:var(--m)!important}}