/* Mad Genius — inner pages. Builds on home.css (tokens, rooms, glossy objects, nav, menu, footer). */

/* generic reveal for inner pages (ends fully opaque) */
html.js.motion .rv{translate:0 34px;opacity:0}
html.js.motion .rv.in{translate:0 0;opacity:1;transition:translate 1s var(--spring) calc(var(--i,0) * .08s),opacity .5s ease calc(var(--i,0) * .08s)}
.ch .stick{min-height:0}
.phero-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ch .stick>*:not(.phero-field):not(.corner){position:relative;z-index:1}
.btn-red{background:var(--red)}.btn-red:hover{background:#C91E15}
.tone-red .btn-red{background:var(--ink)}

/* ---------- page hero ---------- */
.phero .stick{min-height:min(74vh,760px);display:flex;align-items:flex-end;padding:160px var(--gut) 64px}
.phero-inner{width:100%}
.h-page{font:italic 400 clamp(56px,11vw,184px)/.86 var(--serif);letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance;margin-top:14px}
.phero .eyebrow{color:var(--red)}
.tone-red.phero .eyebrow{color:#000}
.phero-sub{margin-top:28px;max-width:560px;font:500 13px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.tone-red .phero-sub{color:#000}
.byline{display:flex;align-items:center;gap:10px;margin-top:22px;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.gdot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0 8%,rgba(255,255,255,0) 30%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
.post-hero .h-page{font-size:clamp(44px,7.4vw,124px)}
.nf .stick{min-height:100vh}
.nf .btn{margin-top:36px}

/* ---------- case study ---------- */
.case-hero .phero-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.case-hero .phero-inner>.eyebrow,.case-hero .phero-inner>.h-page,.case-hero .phero-inner>.phero-sub{grid-column:1}
.case-hero .case-tile{grid-column:2;grid-row:1 / span 3;align-self:center;border-radius:22px;box-shadow:0 0 0 1px #2B2827,0 40px 80px -40px rgba(233,40,31,.45)}
.case-hero .h-page{font-size:clamp(52px,8.6vw,150px)}
.cmeta .stick{padding:0 var(--gut) 80px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.meta-grid{display:flex;flex-wrap:wrap;gap:12px}
.meta-grid div{padding:14px 18px;border-radius:16px;background:#151413;box-shadow:0 0 0 1px #2B2827;min-width:150px}
.meta-grid dt{font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-k)}
.meta-grid dd{margin:6px 0 0;font:italic 400 22px/1.05 var(--serif);text-transform:uppercase}
.cover .stick{padding:150px var(--gut) 120px}
.ov-h{max-width:1100px}
.ov-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);margin-top:56px}
.ov-lead{font:italic 400 clamp(22px,2.1vw,30px)/1.2 var(--serif);text-transform:uppercase}
.ov-body p{font:500 16px/1.7 var(--sans);color:var(--grey-w);max-width:640px}
.ov-body p+p{margin-top:18px}
.cach .stick{padding:150px var(--gut) 120px}
.cach .h-head{max-width:1050px}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid rgba(0,0,0,.26)}
.res-grid .fact .fl{font-size:clamp(22px,2vw,30px);max-width:none;color:var(--white)}
.res-grid .fact .fig{margin:18px 0 0;font-size:clamp(56px,6vw,96px)}
.res-grid .fact:nth-child(2) .fl{font-size:clamp(24px,2.4vw,36px);line-height:1.12;text-transform:none;letter-spacing:-.01em}
.res-grid .fact:nth-child(2) .fl::before{content:"“"}.res-grid .fact:nth-child(2) .fl::after{content:"”"}
.cnext .stick{padding:140px var(--gut) 110px}
.next-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(18px,2.4vw,32px);border-radius:28px;background:#151413;box-shadow:0 0 0 1px #2B2827;text-decoration:none;color:var(--white);transition:box-shadow .4s ease,transform .6s var(--spring)}
.next-card:hover,.next-card:focus-visible{box-shadow:0 0 0 1px var(--red),0 40px 70px -40px rgba(233,40,31,.6);transform:translateY(-4px)}
.next-copy{display:flex;flex-direction:column;gap:12px}
.next-t{font:italic 400 clamp(40px,6vw,96px)/.9 var(--serif);text-transform:uppercase;letter-spacing:-.03em}
.next-card .lshot{border-radius:18px}
.next-card .go{position:absolute;right:22px;bottom:22px}
.cnext>.stick>.btn{margin-top:36px}
@media (max-width:900px){.case-hero .phero-inner{grid-template-columns:1fr}.case-hero .case-tile{grid-column:1;grid-row:auto;margin-top:32px}.ov-cols{grid-template-columns:1fr}.res-grid{grid-template-columns:1fr}.next-card{grid-template-columns:1fr}}

/* ---------- about ---------- */
.awhy .stick,.arooms .stick,.alaunch .stick{padding:150px var(--gut) 120px}
.aw-p{margin-top:28px;max-width:560px}
.facts-4{grid-template-columns:repeat(4,1fr);margin-top:64px}
.facts-4 .fig{font-size:clamp(60px,6.4vw,104px)}
.arooms .proof-line{max-width:820px;color:var(--white)}
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:56px}
.plate-mini{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px;padding:28px;border-radius:24px;background:var(--white);color:var(--ink);box-shadow:0 34px 60px -30px rgba(0,0,0,.8)}
.plate-mini .rn{font:italic 400 clamp(48px,5.6vw,88px)/.9 var(--serif);text-transform:uppercase;letter-spacing:-.03em}
.plate-mini:nth-child(2){background:var(--red);color:var(--white)}.plate-mini:nth-child(2) .label{color:#000}
.plate-mini .label{color:var(--grey-w)}
.ledger{margin-top:48px;border-top:1px solid var(--line-w)}
.ledger a{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,220px) 30px;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-w);text-decoration:none;color:var(--ink);transition:padding .4s var(--ease),color .2s ease}
.ledger a:hover,.ledger a:focus-visible{padding-left:14px;color:var(--red)}
.lg-n{font:italic 400 clamp(26px,3vw,46px)/1 var(--serif);text-transform:uppercase}
.lg-y,.lg-s{font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-w)}
@media (max-width:900px){.facts-4{grid-template-columns:1fr 1fr}.rooms{grid-template-columns:1fr}.ledger a{grid-template-columns:1fr auto;gap:6px 14px}.lg-y{order:3}.lg-s{order:4}}

/* ---------- call to action ---------- */
.pcta .stick{min-height:0;padding:150px var(--gut) 140px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pcta .btn{margin-top:40px}

/* ---------- contact ---------- */
.cform-room .stick{padding:150px var(--gut) 120px}
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:start}
.cintro .proc-line{margin-top:20px}
.cintro .label{margin-top:16px;max-width:460px}
.cways{margin-top:40px;display:grid;gap:12px}
.cways li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:16px 18px;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--line-w);font:500 14px/1.5 var(--sans);color:var(--grey-w)}
.cw-t{width:100%;font:italic 400 24px/1 var(--serif);text-transform:uppercase;color:var(--ink)}
.cways a{color:var(--ink);font-weight:600}
.cform{display:grid;gap:18px;padding:clamp(22px,3vw,40px);border-radius:28px;background:var(--black);color:var(--white);box-shadow:0 50px 90px -50px rgba(0,0,0,.7)}
.cform .label{color:var(--grey-k)}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{margin-bottom:12px;padding:0}
.chip-opt{position:relative;cursor:pointer}
.chip-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip-opt span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:#1C1A19;box-shadow:0 0 0 1px #34302F;font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;transition:background .25s ease,box-shadow .25s ease}
.chip-opt span::before{content:"";width:10px;height:10px;border-radius:50%;background:#3A3634;transition:transform .4s var(--spring),background .2s ease}
.chip-opt input:checked+span{background:#2A1311;box-shadow:0 0 0 1px var(--red)}
.chip-opt input:checked+span::before{background:radial-gradient(circle at 32% 26%,#fff 0 10%,rgba(255,255,255,0) 34%),var(--red);transform:scale(1.3)}
.chip-opt input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:8px}
.fld input,.fld textarea{width:100%;border:0;border-radius:16px;background:#1C1A19;box-shadow:0 0 0 1px #34302F;color:var(--white);font:500 15px/1.4 var(--sans);padding:14px 16px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#8F8986}
.fld input:focus,.fld textarea:focus{outline:none;box-shadow:0 0 0 2px var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nl{display:flex;gap:10px;align-items:center;font:500 13px/1.4 var(--sans);color:var(--grey-k);cursor:pointer}
.nl input{width:18px;height:18px;accent-color:var(--red)}
.fsend{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fstatus{font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-k)}
.fstatus[data-ok="0"]{color:#FF8A82}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

/* ---------- journal ---------- */
.jlist .stick{padding:110px var(--gut) 120px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.fchip{height:40px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;background:var(--white);box-shadow:0 0 0 1px var(--line-w);color:var(--ink);font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;transition:background .25s ease,color .25s ease}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none}
.fchip:hover{box-shadow:0 0 0 1px var(--red)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px}
.pgrid.one{grid-template-columns:minmax(0,560px)}
.pcard[hidden]{display:none}
.pcard a{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.pimg{display:block;border-radius:20px;overflow:hidden;background:#1A1817}
.pimg img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcard a:hover .pimg img{transform:scale(1.05)}
.pcard.big{grid-column:span 2;grid-row:span 2}
.pcard.big .pimg img{aspect-ratio:16/11}
.pcard.big .pt{font-size:clamp(34px,3.4vw,54px)}
.pmeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chip-cat{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--red);color:var(--white);font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.pdate{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.pt{font:italic 400 clamp(24px,2.1vw,32px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.015em;transition:color .25s ease}
.pcard a:hover .pt{color:var(--red)}
.pex{font:500 14px/1.55 var(--sans);color:var(--fg2)}
.pgo{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.pnext .stick{padding:140px var(--gut) 110px}
.pnext .btn{margin-top:36px}
.tone-black .pex,.tone-black .pdate{color:var(--grey-k)}
@media (max-width:1000px){.pgrid{grid-template-columns:1fr 1fr}.pcard.big{grid-column:1/-1;grid-row:auto}}
@media (max-width:620px){.pgrid{grid-template-columns:1fr}}

/* ---------- article ---------- */
.post .stick{padding:110px var(--gut) 110px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:start}
.pcover{position:sticky;top:110px;border-radius:24px;overflow:hidden}
.pcover img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.prose{max-width:700px}
.plead{font:italic 400 clamp(28px,3vw,46px)/1.08 var(--serif);text-transform:uppercase;letter-spacing:-.015em;margin-bottom:40px}
.prose h2{margin:48px 0 14px;font:italic 400 clamp(28px,2.6vw,40px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.015em}
.prose h2::before{content:"";display:inline-block;width:.34em;height:.34em;margin-right:.3em;vertical-align:.14em;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,0) 28%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
.prose p{font:500 17px/1.75 var(--sans);color:#3D3937}
.prose p+p{margin-top:16px}
.prose p.pull{font:italic 400 clamp(24px,2.2vw,32px)/1.15 var(--serif);text-transform:uppercase;color:var(--red);padding-left:18px;border-left:3px solid var(--red);margin:24px 0}
.pfig{margin:40px 0}
.pfig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:20px}
.pfig figcaption{margin-top:10px;font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-w)}
@media (max-width:900px){.post .stick{grid-template-columns:1fr}.pcover{position:relative;top:0;max-width:420px}}

/* ---------- legal ---------- */
.legal .stick{padding:90px var(--gut) 120px}
.legal-intro{max-width:820px;font:italic 400 clamp(22px,2.2vw,32px)/1.2 var(--serif);text-transform:uppercase}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:56px}
.terms li{position:relative;padding:28px 28px 26px 84px;border-radius:22px;background:var(--white);box-shadow:0 0 0 1px var(--line-w)}
.terms .tn{position:absolute;left:24px;top:26px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--white);font:700 12px/1 var(--sans);
  background:radial-gradient(circle at 32% 26%,#fff 0 4%,rgba(255,255,255,.5) 8%,rgba(255,255,255,0) 26%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
.terms h3{font:italic 400 clamp(24px,2vw,30px)/1.05 var(--serif);text-transform:uppercase}
.terms p{margin-top:10px;font:500 15px/1.65 var(--sans);color:var(--grey-w)}
.legal-prose h2{margin:40px 0 12px;font:italic 400 clamp(24px,2.2vw,34px)/1 var(--serif);text-transform:uppercase}
.legal-prose ul{margin:12px 0;display:grid;gap:6px}
.legal-prose li{position:relative;padding-left:22px;font:500 16px/1.6 var(--sans);color:#3D3937}
.legal-prose li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--red)}
@media (max-width:900px){.terms{grid-template-columns:1fr}.terms li{padding-left:76px}}

/* ---------- projects page: the homepage portfolio, without its own corner header ---------- */
.ch-work[data-plain] .stick{padding-top:90px}
.ch-work[data-plain] .work-head .label{display:none}

@media (prefers-reduced-motion:reduce){html .rv{translate:none!important;opacity:1!important}}
@media (max-width:767px){
  /* phones: two objects only, in the bottom corners, never on the type */
  .phero-field .bub:nth-child(n+3){display:none}
  .phero-field .bub{top:auto!important;--s:64px!important}
  .phero-field .bub:first-child{left:auto!important;right:-18px;bottom:-22px;--s:72px!important}
  .phero-field .bub:nth-child(2){left:-12px!important;right:auto;bottom:118px;--s:34px!important}
  .phero .stick{padding-top:200px}
}
.tone-black.phero .eyebrow{color:#FF6B62}.tone-white.phero .eyebrow{color:#C21D15}

/* ---------- case study: on screen (the real site scrolls inside the frames as you scroll) ---------- */
.cscreens{height:260vh}
.cscreens .stick{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden;padding:110px var(--gut) 56px;display:flex;flex-direction:column;justify-content:center}
.scr-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.3fr);gap:clamp(18px,3vw,44px);align-items:end;height:min(72vh,760px)}
.scr-stage.solo{grid-template-columns:minmax(0,1fr)}
.dev-desk,.dev-phone{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#151413;box-shadow:0 0 0 1px #2B2827,0 60px 100px -50px rgba(233,40,31,.35)}
.dev-desk{border-radius:16px}
.dev-desk .chrome{flex:none;height:32px;background:#1C1A19;border-bottom:1px solid #2B2827}
.dev-desk .chrome span{color:#A9A4A1}
.dev-phone{height:86%;border-radius:34px;padding:10px;background:#0E0D0D;box-shadow:0 0 0 2px #2B2827,0 0 0 9px #151413,0 60px 100px -50px rgba(0,0,0,.9)}
.dev-phone .dev-view{border-radius:26px}
.dev-view{position:relative;flex:1;overflow:hidden;background:#fff}
.scroll-img{display:block;width:100%;height:auto;will-change:translate}
.scr-cap{margin-top:18px}
html.reduce .dev-view,html:not(.js) .dev-view{overflow:auto}
@media (max-width:767px){
  .cscreens{height:220vh}
  .scr-stage{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);height:62vh;align-items:center}
  .dev-desk{height:58%}
  .dev-phone{height:100%;border-radius:26px;padding:7px}.dev-phone .dev-view{border-radius:20px}
}

/* ---------- case study: the studio film ---------- */
.cfilm .stick{padding:140px var(--gut) 110px}
.film{margin:0}
.film video{display:block;width:100%;aspect-ratio:4/3;max-height:82vh;object-fit:cover;border-radius:24px;background:#151413}
.film figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-k)}
.btn-red{background:#C21D15}.btn-red:hover{background:#A3170F}

/* the type always sits above the objects */
.phero-inner,.pcta .h-section,.pcta .contact-line,.pcta .btn,.arooms .h-head,.arooms .proof-line,.arooms .rooms,.cach .h-head,.cach .res-grid,.cfilm .film{position:relative;z-index:2}
.phero-field{z-index:0}

/* ---------- 404: the mark in two, drifting apart; the button pulls it back ---------- */
.nf .stick{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.nf .phero-inner{display:flex;flex-direction:column;align-items:center}
.nf .h-page{font-size:clamp(40px,6vw,96px)}
.mg-split{width:min(52vw,420px);margin:0 auto 28px;overflow:visible}
.mg-split .half{transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
html.js.motion .mg-split .h-m{animation:drift-m 7s ease-in-out infinite alternate}
html.js.motion .mg-split .h-g{animation:drift-g 7s ease-in-out infinite alternate}
@keyframes drift-m{to{transform:translate(-18%,-10%) rotate(-10deg)}}
@keyframes drift-g{to{transform:translate(22%,12%) rotate(9deg)}}
.nf:has(.btn:hover) .mg-split .half,.nf:has(.btn:focus-visible) .mg-split .half{animation:none;transform:none}
.nf .btn{margin-top:30px}

/* ---------- case study: Human × AI ---------- */
.cslider .stick{padding:140px var(--gut) 110px}
.hxai{position:relative;aspect-ratio:16/10;max-height:82vh;border-radius:24px;overflow:hidden;background:#151413;box-shadow:0 0 0 1px #2B2827;touch-action:pan-y;user-select:none;cursor:ew-resize}
.hx-a,.hx-b{position:absolute;inset:0}
.hx-a img,.hx-b video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hx-b{clip-path:inset(0 0 0 var(--x,50%))}
.hx-tag{position:absolute;top:16px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--white);background:#0B0B0B;box-shadow:0 0 0 1px #34302F}
.hx-a .hx-tag{left:16px}.hx-b .hx-tag{right:16px;background:#C21D15}
.hx-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:0;z-index:3}
.hx-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--red)}
.hx-handle .gbtn{position:absolute;left:50%;top:50%;translate:-50% -50%;width:56px;height:56px;cursor:ew-resize}
.hx-handle .gbtn svg{width:50%;height:50%}
.hx-handle:focus-visible{outline:none}.hx-handle:focus-visible .gbtn{outline:2px solid var(--white);outline-offset:3px}
.hx-cap{display:flex;gap:28px;flex-wrap:wrap;margin-top:16px}
@media (max-width:767px){.hxai{aspect-ratio:4/5}.hx-handle .gbtn{width:44px;height:44px}}

/* ---------- contact: the brief builds as you pick ---------- */
.brief-tray{position:relative;height:0;overflow:visible;transition:height .4s var(--ease)}
.brief-tray.has{height:64px}
.brief-tray .bub{position:absolute;bottom:0;animation:bub-drop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bub-drop{from{translate:0 -70px;scale:.4}to{translate:0 0;scale:1}}
.brief-tray .bub.out{animation:bub-pop .35s ease-in both}
@keyframes bub-pop{to{scale:0;opacity:0}}
.brief-tray .bub i{animation:bub-squish 2.6s ease-in-out infinite}

/* ---------------- case study: the site is the hero ---------------- */
.case-hero.media .stick{min-height:100vh;min-height:100dvh;padding:160px var(--gut) 56px;align-items:flex-end}
.case-hero.media .phero-field:not(.case-bg){display:none}
.case-bg{background:#151413}
.case-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:translate3d(0,var(--bgy,0px),0) scale(1.12);transform-origin:50% 100%;filter:saturate(.9) brightness(.9);will-change:transform}
.case-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.18) 22%,rgba(11,11,11,.62) 48%,rgba(11,11,11,.92) 72%,#0B0B0B 100%)}
.case-hero.media .phero-inner{display:block}
.case-hero.media .h-page{font-size:clamp(52px,9.2vw,164px);max-width:14ch}
.case-hero.media .phero-sub{max-width:640px;color:#E6E1DE}
.case-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px}
.case-meta .meta-grid div{background:rgba(21,20,19,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.js.motion .case-hero.media .corner{transition-delay:.5s}

/* the site, top to bottom: the full-page captures pan with the reader */
.walk{height:300vh}
.walk .stick{position:sticky;top:0;height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding:100px var(--gut) 36px;overflow:hidden;box-sizing:border-box}
.walk-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,19vw,290px);gap:clamp(16px,2.4vw,40px);align-items:stretch}
.walk-grid.solo{grid-template-columns:minmax(0,1fr)}
.walk-pane{margin:0;display:flex;flex-direction:column;min-height:0;gap:12px}
.walk-win{flex:1;min-height:0;position:relative;overflow:hidden;border-radius:18px;background:#151413;box-shadow:0 0 0 1px #2B2827,0 70px 110px -70px rgba(233,40,31,.4)}
.walk-win img{display:block;width:100%;height:auto;will-change:transform}
.walk-pane.phone .walk-win{border-radius:26px}
.walk-pane figcaption{color:var(--grey-k)}
.walk-hint{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--grey-k)}
@media (max-width:900px){
  .walk-grid{grid-template-columns:minmax(0,1fr)}
  .walk-pane.desk{display:none}.walk-grid.solo .walk-pane.desk{display:flex}
  .walk .stick{padding:92px var(--gut) 28px}
  .case-hero.media .stick{padding:150px var(--gut) 40px}
  .case-meta{margin-top:32px}
}
html.reduce .walk{height:auto}html.reduce .walk .stick{position:relative;height:auto}html.reduce .walk-win{max-height:72vh;overflow:auto}

/* page heroes with a side piece: the work next to the words */
.side-hero .phero-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.side-hero .phero-inner>.eyebrow,.side-hero .phero-inner>.h-page,.side-hero .phero-inner>.phero-sub{grid-column:1}
.side-hero .hero-side{grid-column:2;grid-row:1 / span 3;align-self:center}
.hero-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px;transform:rotate(-3deg) translateY(10px)}
.hero-mosaic a{display:block;overflow:hidden;border-radius:16px;box-shadow:0 0 0 1px #2B2827,0 30px 60px -30px rgba(0,0,0,.8);transition:transform .6s var(--spring)}
.hero-mosaic a:nth-child(2){translate:0 26px}.hero-mosaic a:nth-child(3){translate:0 -14px}
.hero-mosaic a:hover{transform:scale(1.04) rotate(1.5deg)}
.hero-mosaic img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hero-feature{display:block;position:relative;overflow:hidden;border-radius:22px;box-shadow:0 0 0 1px #2B2827,0 40px 80px -40px rgba(233,40,31,.45);transform:rotate(2deg)}
.hero-feature img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hero-feature>span{position:absolute;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;gap:12px;font:600 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-feature>span>span{position:static}
@media (max-width:900px){.side-hero .phero-inner{grid-template-columns:1fr}.side-hero .hero-side{grid-column:1;grid-row:auto;margin-top:36px;max-width:520px}.hero-mosaic{transform:none}.hero-feature{transform:none}}

.h-sub{font:italic 400 clamp(30px,3.6vw,54px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
@media (max-width:900px){.res-grid{grid-template-columns:1fr;border-top:0}.res-grid .fact .fl{grid-column:1/-1;padding-bottom:0}.res-grid .fact .fig{grid-column:1/-1}}