/* MUUS feel, October 2026.
   The sideline director: one giant number, one yellow move, grain on every
   surface, the slate in mono, real frames treated one way.
   Source: Figma "MUUS brand feel 2026-10", page "MUUS · feel · 8 Oct"
   (Site · Home · 1440 and 390, Site · Case · 1440).
   Phone first. Every fluid size runs from its 390 value to its 1440 value. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/archivo-var-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-var-latin.woff2) format('woff2')}

:root{
  --ink:#26251F; --ink2:#302E27; --void:#0A0A0B; --frame:#1B1A16;
  --bone:#F2EDE0; --spark:#EEFB87; --butter:#F1EB8F; --dark:#2B2A27; --olive:#5F5B48;
  /* text tints on ink, each checked at 4.5:1 or better for its size */
  --dim:rgba(242,237,224,.58);
  --body:rgba(242,237,224,.70);
  --soft:rgba(242,237,224,.78);
  --line:rgba(242,237,224,.12);
  --line-d:rgba(43,42,39,.22);
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:16px;
  --treat:grayscale(1) contrast(1.25) brightness(.62);
  color-scheme:dark;
}
@media (min-width:768px){:root{--gut:clamp(32px,4.444vw,64px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:clamp(16px,calc(14.89px + .2857vw),19px);line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100svh}
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
.butter :focus-visible,.go:focus-visible{outline-color:var(--dark)}
::selection{background:var(--spark);color:var(--dark)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@view-transition{navigation:auto}

/* Grain on every surface. Monotone noise, light on ink, dark on butter. */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;
  background:url(/assets/img/grain-128.png) repeat;background-size:128px 128px}

.skip{position:absolute;left:var(--gut);top:-80px;z-index:60;background:var(--bone);color:var(--ink);padding:12px 16px;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}

/* ── type ─────────────────────────────────────────────────────────── */
.mono,.lbl{font-family:var(--mono);font-weight:500;font-size:clamp(10px,calc(9.63px + .0952vw),11px);letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.lbl{color:var(--dim)}
.lbl b{font-weight:500;color:var(--bone)}
.sec-h{font-weight:900;text-transform:uppercase;font-size:clamp(40px,calc(34.06px + 1.524vw),56px);line-height:.95;letter-spacing:-.03em}
.lead{font-size:clamp(16px,calc(14.89px + .2857vw),19px);line-height:1.5;color:var(--soft);max-width:540px}
.copy{color:var(--body);max-width:56ch}
.copy p+p{margin-top:1em}
.copy a,.lead a{text-underline-offset:.2em}
.statement{font-weight:800;font-size:clamp(28px,calc(19.09px + 2.286vw),52px);line-height:1.04;letter-spacing:-.045em;max-width:20em}
.statement .dimmed{color:var(--dim)}
.u{text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.wrap-l{padding-left:var(--gut)}

/* ── the giant number ─────────────────────────────────────────────── */
/* --w is the number's own width in em (set per page); the size is the
   design size until the number would outgrow the column, then it fits. */
.giant{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:clamp(12px,2vw,28px);row-gap:12px}
.giant .n{font-weight:900;line-height:.8;letter-spacing:-.07em;margin-left:-.04em;white-space:nowrap;
  font-size:min(var(--gmax,clamp(270px,calc(206.9px + 16.19vw),440px)),calc((100vw - 2 * var(--gut)) * var(--cf,1) * .96 / var(--w,.66)));
  padding-bottom:.02em}
.giant .w{font-weight:800;font-size:clamp(36px,calc(27.09px + 2.286vw),60px);line-height:1;letter-spacing:-.05em;padding-bottom:.12em}
.giant .w{flex:1 1 6.5em;min-width:5.5em}
.hero .giant .w{flex:0 1 auto;min-width:0}
.giant .w span{display:block}

/* ── header ───────────────────────────────────────────────────────── */
.hdr{position:relative;z-index:20;display:flex;align-items:center;gap:24px;height:68px;padding:0 var(--gut)}
.wordmark{font-weight:900;font-size:clamp(18px,calc(17.26px + .1905vw),20px);letter-spacing:.1em;text-decoration:none;line-height:44px;margin-right:auto}
.hdr-nav,.hdr-place{display:none}
.hdr-nav a,.hdr-place a,.hdr-menu{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.hdr-nav a{color:var(--dim);padding:16px 0}
.hdr-nav a:hover,.hdr-place a:hover{color:var(--bone)}
.hdr-nav a[aria-current]{color:var(--bone);text-decoration:underline;text-underline-offset:.4em}
.hdr-place{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0}
.hdr-place a{display:inline-block;padding:16px 0}
.hdr-menu{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:flex-end;text-decoration:underline;text-underline-offset:.4em;background:none;border:0;padding:0;cursor:pointer}
.menu{position:fixed;inset:0;z-index:40;background:var(--ink);padding:84px var(--gut) 32px;overflow-y:auto}
.menu[hidden]{display:none}
.menu .grain{position:absolute}
.menu-close{position:absolute;top:12px;right:var(--gut)}
.menu ul{border-top:1px solid var(--line)}
.menu li{border-bottom:1px solid var(--line)}
.menu a{display:flex;align-items:center;min-height:56px;font-weight:800;font-size:28px;letter-spacing:-.04em;text-decoration:none}
.menu a[aria-current]{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}
.menu .lbl{margin-top:24px}
@media (min-width:1024px){
  .hdr{height:112px;align-items:flex-start;padding-top:26px;gap:clamp(24px,3vw,48px)}
  .wordmark{line-height:1;margin-right:clamp(40px,8.4vw,120px)}
  .hdr-nav{display:flex;gap:clamp(20px,2.6vw,40px);margin-top:-12px}
  .hdr-place{display:block;margin-left:auto;margin-top:-12px}
  .hdr-menu,.menu{display:none!important}
}

/* ── the one yellow move ──────────────────────────────────────────── */
.go{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:420px;min-height:60px;padding:0 20px;
  background:var(--spark);color:var(--dark);text-decoration:none;transition:background-color .2s}
.go-l{white-space:nowrap;font-weight:700;font-size:clamp(18px,calc(17.63px + .0952vw),19px);letter-spacing:-.01em}
.go-r{font:500 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(43,42,39,.82);text-align:right}
.go:hover{background:var(--bone)}
@media (min-width:768px){.go{min-height:68px;padding:0 24px}.go-r{font-size:11px}}
.alt{display:inline-block;margin-top:16px;color:var(--dim)}
.alt a{color:var(--bone);display:inline-block;padding:14px 0;margin:-14px 0}

/* ── frames: real photography, treated one way ────────────────────── */
.shot{position:relative;overflow:hidden;background:var(--frame);margin:0}
.shot img,.shot video{width:100%;height:100%;object-fit:cover;filter:var(--treat)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,rgba(38,37,31,0) 55%,rgba(38,37,31,.85) 100%)}
.shot figcaption{position:absolute;left:clamp(16px,2.2vw,32px);right:clamp(16px,2.2vw,32px);bottom:clamp(16px,2.2vw,28px);z-index:1;
  font:400 clamp(9.5px,calc(9.13px + .0952vw),10.5px)/1.55 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.shot figcaption b{font-weight:500;color:var(--bone)}

/* placeholder: until the real frame exists, the area says so out loud */
.ph{position:relative;background:var(--frame);margin:0;min-height:160px;padding:clamp(24px,2.2vw,32px);
  font:400 clamp(9.5px,calc(9.13px + .0952vw),11px)/1.55 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.ph::before{content:"";position:absolute;inset:clamp(8px,1vw,14px);pointer-events:none;
  --c:rgba(242,237,224,.55);
  background:
    linear-gradient(var(--c),var(--c)) left top/28px 2px no-repeat,linear-gradient(var(--c),var(--c)) left top/2px 28px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/28px 2px no-repeat,linear-gradient(var(--c),var(--c)) right top/2px 28px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/28px 2px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/2px 28px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/28px 2px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/2px 28px no-repeat}
.ph b{display:block;font-weight:500;color:rgba(242,237,224,.9);margin-bottom:6px}
.ph .ph-d{max-width:420px}
.ph .ph-t{max-width:none}
.ph--sm{padding:16px 20px;min-height:180px}

/* ── home hero ────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-copy{padding:0 var(--gut) 44px}
.hero-copy .lbl{border-top:1px solid var(--line);padding-top:13px;margin-bottom:22px}
.hero .giant{margin-bottom:30px;margin-left:-8px}
.hero .lead{margin-bottom:26px}
.hero-frame{height:500px}
@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,640fr) minmax(0,56fr) minmax(0,680fr);padding-left:var(--gut);min-height:868px}
  .hero-copy{padding:0 0 64px}
  .hero-copy .lbl{margin-bottom:56px}
  .hero .giant{margin-bottom:58px;margin-left:-14px;--cf:.49}
  .hero .lead{margin-bottom:48px}
  .hero-frame{grid-column:3;height:auto;min-height:868px}
}

/* ── section heads with a slate on the right ──────────────────────── */
#work,.caps-sec,.sec-pad{padding-top:clamp(64px,calc(58.6px + 1.39vw),80px)}
.shead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 24px;padding:0 var(--gut) 22px}
.shead .sec-h{grid-column:1/-1}
.shead .lbl a{color:var(--bone);display:inline-block;padding:15px 0;margin:-15px 0}
@media (min-width:1024px){
  .shead{grid-template-columns:minmax(0,696fr) minmax(0,616fr) auto;padding-bottom:58px}
  .shead .sec-h{grid-column:auto}
}

/* ── the index: numbered rows, mono metadata, a status word ───────── */
.idx{border-top:1px solid var(--line);margin:0 var(--gut)}
.row{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;border-bottom:1px solid var(--line);padding:19px 0 18px}
.row-n{font:500 10px/1.4 var(--mono);letter-spacing:.16em;color:var(--dim)}
.row-s{font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-align:right;color:var(--bone)}
.row-t{grid-column:1/-1;margin-top:8px;font-weight:800;font-size:clamp(26px,calc(23.03px + .762vw),34px);line-height:1;letter-spacing:-.045em}
.row-t a{text-decoration:none}
.row-t a::after{content:"";position:absolute;inset:0;z-index:1}
.row:hover .row-t a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.row-m{grid-column:1/-1;margin-top:10px;font:500 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.row-d{grid-column:1/-1;margin-top:18px;font-size:clamp(15px,calc(14.26px + .1905vw),17px);line-height:1.5;color:var(--body);max-width:520px}
.row-f{grid-column:1/-1;margin-top:20px;height:197px}
.row--lead .row-t{font-size:clamp(32px,calc(26.8px + 1.333vw),46px)}
.row[hidden]{display:none}
@media (min-width:1024px){
  .row{grid-template-columns:56px minmax(0,584fr) minmax(0,56fr) minmax(0,520fr) auto;align-items:baseline;padding:32px 0 30px}
  .row-n{font-size:13px;grid-row:1}
  .row-t{grid-column:2;grid-row:1;margin:0}
  .row-m{grid-column:4;grid-row:1;margin:0;font-size:11px}
  .row-s{grid-column:5;grid-row:1;font-size:11px}
  .row-d{grid-column:2;grid-row:2;margin-top:28px}
  .row-f{grid-column:4/6;grid-row:2;margin-top:20px;height:186px}
}

/* ── butter: one warm break per page ──────────────────────────────── */
.butter{position:relative;background:var(--butter);color:var(--dark);padding:48px var(--gut)}
.butter .lbl{color:var(--olive)}
.butter .lbl b{color:var(--dark)}
.butter-h{font-weight:900;text-transform:uppercase;font-size:clamp(50px,calc(32.91px + 4.381vw),96px);line-height:.92;letter-spacing:-.045em;margin:16px 0 24px}
.butter-h span{display:block}
.butter .copy,.butter p.b{color:rgba(43,42,39,.82)}
.butter a{color:var(--dark)}
.steps{margin-top:28px;border-top:1px solid var(--line-d)}
.steps li{border-bottom:1px solid var(--line-d);padding:15px 0 19px}
.steps .k{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(43,42,39,.82);margin-bottom:6px}
.steps .k i{font-style:normal;margin-right:1.6em}
.steps .v{display:block;font-weight:600;font-size:clamp(19px,calc(18.26px + .1905vw),21px);line-height:1.25;letter-spacing:-.015em}
@media (min-width:1024px){
  .butter{padding:88px var(--gut) 128px;display:grid;grid-template-columns:minmax(0,640fr) minmax(0,56fr) minmax(0,616fr)}
  .butter > :not(.steps):not(.butter-side){grid-column:1}
  .butter .steps,.butter .butter-side{grid-column:3;grid-row:1/span 4;margin-top:32px}
  .steps li{display:grid;grid-template-columns:46px 210px 1fr;align-items:baseline;padding:26px 0 30px}
  .steps .k{display:contents;font-size:11px}
  .steps .k i{margin:0;color:var(--olive)}
  .steps .k{color:var(--dark)}
}
.butter--line{display:block!important}
.butter--line .butter-h{font-size:clamp(40px,calc(25.14px + 3.81vw),80px);line-height:.94}
@media (min-width:1024px){.butter--line .butter-h span{white-space:nowrap}}

/* ── who we shoot for ─────────────────────────────────────────────── */
.who{padding:56px var(--gut) 64px}
.who .roster{margin-top:16px;font-weight:600;font-size:clamp(20px,calc(17.03px + .762vw),28px);line-height:1.32;letter-spacing:-.02em;color:var(--soft);max-width:1192px}
.who .lbl + .lbl{margin-top:20px}
@media (min-width:1024px){.who{padding:88px var(--gut) 96px;display:grid;grid-template-columns:minmax(0,737fr) minmax(0,575fr)}
  .who .roster{grid-column:1/-1;grid-row:2}.who .lbl + .lbl{margin-top:0}}

/* ── footer ───────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);margin:0 var(--gut);padding:34px 0 28px}
.sign{font-weight:800;font-size:clamp(30px,calc(17.37px + 3.238vw),64px);line-height:1.02;letter-spacing:-.045em}
.sign span{display:block}
.ftr-contact{margin-top:28px}
.ftr-mail{display:inline-block;margin-top:6px;font-weight:600;font-size:clamp(20px,calc(18.51px + .381vw),24px);letter-spacing:-.01em;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;padding:8px 0}
.ftr-links{display:flex;flex-wrap:wrap;column-gap:1.4em;margin-top:4px}
.ftr-links a,.ftr-index a{display:inline-block;padding:14px 0;text-decoration:none;color:var(--dim)}
.ftr-links a:hover,.ftr-index a:hover{color:var(--bone)}
.ftr-index{display:flex;flex-wrap:wrap;column-gap:1.4em;margin-top:28px;border-top:1px solid var(--line);padding-top:10px}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:28px}
.nl-form{margin-top:28px;max-width:520px}
.nl-form label{display:block}
.nl-row{display:flex;gap:0;margin-top:10px;border-bottom:1px solid rgba(242,237,224,.4)}
.nl-row input[type=email]{flex:1;min-width:0;min-height:48px;background:transparent;border:0;padding:0;font:400 16px/1 var(--sans);color:var(--bone)}
.nl-row input[type=email]::placeholder{color:var(--dim)}
.nl-row input[type=email]:focus{outline:none}
.nl-row:focus-within{border-bottom-color:var(--bone)}
.nl-row button{min-height:48px;background:none;border:0;padding:0 0 0 16px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);cursor:pointer;text-decoration:underline;text-underline-offset:.4em}
.nl-row button:disabled{opacity:.5}
.nl-status{min-height:1.5em;margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--body)}
.nl-status a{color:var(--bone)}
@media (min-width:1024px){
  .ftr{padding:56px 0 40px;display:grid;grid-template-columns:minmax(0,836fr) minmax(0,476fr);column-gap:0}
  .ftr-contact{margin-top:8px}
  .ftr-index,.ftr-base,.nl-form{grid-column:1/-1}
  .ftr-base{margin-top:56px}
  .nl-form{margin-top:40px}
}
.ftr--case{display:block}

/* ── case page ────────────────────────────────────────────────────── */
.chero{padding:0 var(--gut) 40px}
.chero-top{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:13px}
.chero-top .lbl:last-child{color:var(--bone);text-align:right}
.chero h1{margin-top:28px;font-weight:800;font-size:clamp(36px,calc(25.6px + 2.667vw),64px);line-height:1;letter-spacing:-.05em;max-width:14em}
.chero .giant{margin-top:28px;margin-left:-6px}
.chero .giant .w{font-size:clamp(24px,calc(16.57px + 1.905vw),44px);line-height:1.02;letter-spacing:-.045em}
.chero .dek{margin-top:24px}
.slate{margin-top:32px;border-top:1px solid var(--line)}
.slate div{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);padding:14px 0 15px}
.slate dt{font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.slate dd{font-weight:500;font-size:16px;line-height:1.35}
@media (min-width:1024px){
  .chero{display:grid;grid-template-columns:minmax(0,740fr) minmax(0,56fr) minmax(0,516fr);padding-bottom:108px}
  .chero-top{grid-column:1/-1}
  .chero h1{grid-column:1;margin-top:34px}
  .chero .giant{grid-column:1;margin-top:40px;margin-left:-12px;--gmax:400px;--cf:.56}
  .chero .dek{grid-column:1}
  .slate{grid-column:3;grid-row:2/span 3;margin-top:54px}
  .slate div{grid-template-columns:130px 1fr;padding:17px 0 16px}
  .slate dt{font-size:11px}
}

.film{position:relative;height:clamp(420px,53vw,760px);background:var(--frame);overflow:hidden;cursor:pointer}
.film video,.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--treat);transform:scale(var(--z,1));transition:filter .5s,transform .5s}
.film::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .5s;
  background:radial-gradient(120% 100% at 50% 45%,rgba(38,37,31,0) 55%,rgba(38,37,31,.85) 100%)}
.film-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(16px,2.6vw,36px);z-index:2;display:flex;justify-content:space-between;gap:16px;
  font:400 clamp(9.5px,calc(9.13px + .0952vw),11px)/1.55 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);pointer-events:none}
.film-cap b{font-weight:500;color:var(--bone)}
.film-cap span:last-child{display:none}
@media (min-width:768px){.film-cap span:last-child{display:inline}}
@media (max-width:599px){.phead-top .lbl:last-child{display:none}}
.film.is-on{cursor:default;background:var(--void)}
.film.is-on video{filter:none;object-fit:contain;transform:none}
.film.is-on::after,.film.is-on .film-cap{opacity:0}
.film.is-on .film-cap{display:none}

.story{padding:72px var(--gut) 64px}
.story .lbl{margin-bottom:18px}
@media (min-width:1024px){.story{display:grid;grid-template-columns:292px 1fr;padding:120px var(--gut) 104px}.story .lbl{margin:12px 0 0}}

.run{padding:0 var(--gut) 72px}
.run .shead{padding:0 0 22px}
.run ol{border-top:1px solid var(--line)}
.run li{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line);padding:22px 0 28px}
.run-time{font:500 clamp(28px,calc(22.06px + 1.524vw),44px)/1 var(--mono);letter-spacing:-.02em}
.run-k{margin-top:10px}
.run h3{margin-top:12px;font-weight:800;font-size:clamp(26px,calc(23.03px + .762vw),34px);line-height:1.05;letter-spacing:-.045em}
.run .lbl.where{margin-top:8px}
.run p.b{margin-top:12px;color:var(--body);max-width:520px;font-size:clamp(15px,calc(14.26px + .1905vw),17px)}
.run .shot,.run .ph{margin-top:20px;height:197px}
@media (min-width:1024px){
  .run{padding-bottom:120px}
  .run .shead{padding-bottom:58px}
  .run li{grid-template-columns:232px 124px minmax(0,1fr) 320px;column-gap:0;padding:26px 0 28px}
  .run-time{grid-column:1;grid-row:1/span 4}
  .run-k{grid-column:2;grid-row:1;margin-top:14px}
  .run h3,.run .lbl.where,.run p.b{grid-column:3;padding-right:56px}
  .run h3{margin-top:2px}
  .run .shot,.run .ph{grid-column:4;grid-row:1/span 4;margin-top:2px;height:180px}
  .run--text li{grid-template-columns:232px minmax(0,1fr) 420px}
  .run--text .run-k{grid-column:1;grid-row:1;margin-top:4px}
  .run--text h3,.run--text p.b{grid-column:2}
  .run--text .shot,.run--text .ph{grid-column:3;height:236px}
}

.stats{margin-top:28px;border-top:1px solid var(--line-d)}
.stats div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line-d);padding:14px 0}
.stats dt{order:2;font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(43,42,39,.82);text-align:right}
.stats dd{font-weight:900;font-size:clamp(32px,calc(26.06px + 1.524vw),48px);line-height:1;letter-spacing:-.05em}
@media (min-width:1024px){.stats dt{font-size:11px}}

.credits{padding:56px var(--gut);display:grid;gap:22px}
.credits dl{display:grid;grid-template-columns:1fr;gap:14px}
.credits dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:baseline}
.credits dt{font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.credits dd{font:400 13px/1.4 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:rgba(242,237,224,.9)}
@media (min-width:1024px){.credits{grid-template-columns:292px 1fr 1fr;padding:110px var(--gut) 120px}.credits dl div{grid-template-columns:190px 1fr}.credits dd{font-size:14px}}

.next{border-top:1px solid var(--line);margin:0 var(--gut);padding:36px 0 56px;display:grid;gap:28px}
.next a.t{display:block;margin-top:8px;font-weight:800;font-size:clamp(32px,calc(26.8px + 1.333vw),46px);line-height:1;letter-spacing:-.045em;text-decoration:none}
.next a.t:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.next .lbl.m{margin-top:12px}
.next .pv{margin-top:14px}
.next .pv a{color:var(--bone);display:inline-block;padding:12px 0;margin:-12px 0}
@media (min-width:1024px){.next{grid-template-columns:1fr 420px;align-items:center;padding:40px 0 120px}}

/* ── interior page heads ──────────────────────────────────────────── */
.phead{padding:0 var(--gut) 48px}
.phead-top{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:13px}
.phead h1{margin-top:28px;font-weight:800;font-size:clamp(36px,calc(25.6px + 2.667vw),64px);line-height:1;letter-spacing:-.05em;max-width:15em}
.phead h1 span{display:block}
.phead .giant{margin-top:28px;margin-left:-6px}
.phead .giant .w{font-size:clamp(24px,calc(16.57px + 1.905vw),44px);line-height:1.02;letter-spacing:-.045em}
.phead .lead{margin-top:28px}
.phead .go{margin-top:28px}
.phead-side{margin-top:32px}
@media (min-width:1024px){
  .phead{display:grid;grid-template-columns:minmax(0,740fr) minmax(0,56fr) minmax(0,516fr);padding-bottom:104px}
  .phead-top{grid-column:1/-1}
  .phead > :not(.phead-top):not(.phead-side){grid-column:1}
  .phead h1{margin-top:34px}
  .phead .giant{margin-top:40px;margin-left:-12px;--gmax:400px;--cf:.56}
  .phead .lead{margin-top:40px}
  .phead .go{margin-top:44px}
  .phead-side{grid-column:3;grid-row:2/span 5;margin-top:54px}
}
.bleed{height:clamp(420px,53vw,760px)}
.bleed--short{height:clamp(320px,38vw,560px)}

.block{padding:72px var(--gut)}
.block--tight{padding-top:40px}
.block .lbl.k{margin-bottom:18px}
.block h2.t{font-weight:800;font-size:clamp(28px,calc(19.09px + 2.286vw),52px);line-height:1.04;letter-spacing:-.045em;max-width:18em}
.block h2.t span{display:block}
.block .copy{margin-top:22px}
.block .links{margin-top:22px;display:flex;flex-wrap:wrap;column-gap:1.6em}
.block .links a{display:inline-block;padding:12px 0;color:var(--bone)}
@media (min-width:1024px){
  .block{display:grid;grid-template-columns:292px minmax(0,1fr);padding:120px var(--gut)}
  .block--tight{padding-top:64px}
  .block > *{grid-column:2}
  .block > .lbl.k{grid-column:1;grid-row:1/span 3;margin:12px 0 0}
  .block--wide > .idx,.block--wide > .faq{grid-column:1/-1}
}
.block .idx{margin:28px 0 0}

.manifesto{margin-top:24px;white-space:pre-line;font-weight:600;font-size:clamp(19px,calc(17.51px + .381vw),23px);line-height:1.35;letter-spacing:-.015em;max-width:30em}
.manifesto p+p{margin-top:1.1em}
.manifesto .sharp{font-weight:900;text-transform:uppercase;letter-spacing:-.02em}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .shot{scroll-snap-align:start;aspect-ratio:3/4}
@media (min-width:1024px){.rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding-bottom:0;gap:16px}}

.facts{border-top:1px solid var(--line);margin-top:28px}
.facts div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);padding:16px 0}
.facts dt{order:2;font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:right;max-width:22ch}
.facts dd{font-weight:900;font-size:clamp(32px,calc(26.06px + 1.524vw),48px);line-height:1;letter-spacing:-.05em}
@media (min-width:1024px){.facts dt{font-size:11px;max-width:none}}

.faq{border-top:1px solid var(--line);margin-top:28px}
.faq div{border-bottom:1px solid var(--line);padding:22px 0 26px}
.faq dt{font-weight:800;font-size:clamp(20px,calc(18.51px + .381vw),24px);line-height:1.15;letter-spacing:-.03em}
.faq dd{margin-top:10px;color:var(--body);max-width:60ch}
@media (min-width:1024px){.faq div{display:grid;grid-template-columns:minmax(0,640fr) minmax(0,56fr) minmax(0,616fr)}.faq dd{grid-column:3;margin:0}}

/* case studies: filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 var(--gut) 18px}
.chip{min-height:44px;padding:0 14px;border:1px solid rgba(242,237,224,.28);background:transparent;color:var(--soft);cursor:pointer;
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.chip:hover{color:var(--bone);border-color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.search{display:flex;align-items:center;gap:12px;margin:0 var(--gut) 24px;border-bottom:1px solid rgba(242,237,224,.4)}
.search:focus-within{border-bottom-color:var(--bone)}
.search input{flex:1;min-width:0;min-height:48px;background:transparent;border:0;font:400 16px/1 var(--sans)}
.search input:focus{outline:none}
.search input::placeholder{color:var(--dim)}
.capdesc{margin:0 var(--gut) 24px;color:var(--body);max-width:60ch}
.capdesc:empty{display:none}
.empty{margin:24px var(--gut);color:var(--body)}
@media (min-width:1024px){.chip{font-size:11px}.filters{margin-bottom:24px}}

/* 404 */
.lost{padding:0 var(--gut) 96px}

/* capabilities matrix */
.caps .cap{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;border-bottom:1px solid var(--line);padding:22px 0 26px;scroll-margin-top:24px}
.cap-t{grid-column:1/-1;margin-top:8px;font-weight:800;font-size:clamp(26px,calc(23.03px + .762vw),34px);line-height:1.05;letter-spacing:-.045em}
.cap-d{grid-column:1/-1;margin-top:12px;color:var(--body);max-width:52ch;font-size:clamp(15px,calc(14.26px + .1905vw),17px)}
.cap-p{grid-column:1/-1;margin-top:16px;display:flex;flex-wrap:wrap;column-gap:1.4em}
.cap-p a{display:inline-block;padding:11px 0;color:var(--bone);text-decoration:none}
.cap-p a:hover{text-decoration:underline;text-underline-offset:.4em}
.cap-a{grid-column:1/-1;margin-top:4px}
.cap-a a{display:inline-block;padding:11px 0;color:var(--bone)}
.cap:target{background:linear-gradient(90deg,rgba(242,237,224,.05),transparent 70%)}
@media (min-width:1024px){
  .caps .cap{grid-template-columns:56px minmax(0,584fr) minmax(0,56fr) minmax(0,616fr);padding:34px 0 36px}
  .cap .row-n{font-size:13px}
  .cap-t{grid-column:2;grid-row:1;margin:0}
  .cap-d{grid-column:2;grid-row:2}
  .cap-p{grid-column:4;grid-row:1/span 2;margin:0;align-content:flex-start}
  .cap-a{grid-column:4;grid-row:3}
}
.butter-h--m{font-size:clamp(34px,calc(25.09px + 2.286vw),58px);line-height:.96}
.b-links{display:flex;flex-wrap:wrap;column-gap:1.6em;margin-top:22px}
.b-links a{display:inline-block;padding:12px 0;color:var(--dark)}
.butter-side.copy p+p{margin-top:1em}
.phead h1.big{font-size:clamp(48px,calc(32.4px + 4vw),96px);line-height:.95;letter-spacing:-.055em;max-width:9em}
.who.roster{color:var(--soft)}

/* 44px tap targets for every standalone link on a phone */
.ftr-links a,.ftr-index a,.alt a,.next .pv a,.b-links a,.cap-p a,.cap-a a,.block .links a,p.lbl > a.u,.shead .lbl a{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
.alt a,.next .pv a,.shead .lbl a{margin-top:-14px;margin-bottom:-14px}
.next a.t{padding:6px 0}
.cta-l{margin-top:20px}
.cta-l a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:clamp(18px,calc(17.26px + .1905vw),20px)}

@media print{
  .grain,.hdr-nav,.hdr-place,.hdr-menu,.menu,.nl-form,.go,.filters,.search{display:none!important}
  body{background:#fff;color:#000}
  .shot img,.film video,.film img{filter:none}
}