/* ---------- case study ---------- */
.case h1:focus{outline:none}
/* Each project carries its own "stage" colour (the product's own background) so its footage sits in its world. */
.case{padding-top:var(--s-7)}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);letter-spacing:-.02em;padding:6px 12px 6px 6px;margin-left:-6px;border-radius:var(--r-pill);transition:background-color var(--d-fast) ease}
.back:hover{background:var(--chip)}
.back svg{width:16px;height:16px}

/* hero */
.ch-head{margin-top:var(--s-7);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s-4);align-items:end}
.ch-head>*{grid-column:1/-1;min-width:0}
.ch-head .t-lede{color:var(--ink-2);max-width:30ch}
@media (min-width:1000px){.ch-head .ch-title{grid-column:1/8}.ch-head .t-lede{grid-column:8/13;justify-self:end;text-align:right;padding-bottom:.4em}}
.ch-hero{position:relative;margin-top:var(--s-6);aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--stage-p,var(--stage)) center/cover no-repeat}
.ch-hero>video,.ch-hero>.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motion .case .ch-hero{animation:ch-reveal 1.1s var(--ease) .18s backwards}
.motion .case.vt .ch-hero{animation:none}
@keyframes ch-reveal{from{clip-path:inset(7% 5% 7% 5% round 24px);transform:scale(1.015)}to{clip-path:inset(0 0 0 0 round 12px)}}
.motion .case .rise{animation:rise var(--d-slow) var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms)}
.snd{position:absolute;right:var(--s-4);bottom:var(--s-4);height:34px;padding:0 14px 0 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.02em;transition:background-color var(--d-fast) ease}
.snd:hover{background:rgba(0,0,0,.65)}
.snd svg{width:16px;height:16px}
@media (max-width:560px){.snd{padding:0 9px;right:var(--s-3);bottom:var(--s-3)}.snd span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--gut);margin-top:var(--s-5);padding-block:var(--s-5);border-bottom:1px solid var(--line)}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts dl{margin:0}.facts dd{margin:var(--s-2) 0 0;font-size:14px;line-height:20px;letter-spacing:-.02em}

/* chapters */
.chap{padding-block:var(--s-9) 0;scroll-margin-top:var(--s-5)}
.chap-k{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-5)}
.chap-k .n{font-variant-numeric:tabular-nums;color:var(--ink-1)}
.ch-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s-6)}
.ch-grid>*{grid-column:1/-1;min-width:0}
.ch-p{font-size:var(--fs-body-l);line-height:28px;letter-spacing:-.02em;color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.ch-h{font-weight:600;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.045em;text-wrap:balance;max-width:22ch}
@media (min-width:1000px){
  .intro-ch .ch-p{grid-column:4/12;font-size:22px;line-height:33px;color:var(--ink-1);letter-spacing:-.03em}
  .intro-ch .chap-k{grid-column:1/4}
}
/* challenge: the one display-scale statement on a case page; the second clause steps back in grey */
.quote{font-weight:600;font-size:clamp(32px,4vw,58px);line-height:1.04;letter-spacing:-.05em;text-wrap:balance;max-width:18ch}
.quote em{font-style:normal;color:var(--ink-2)}
.points{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5) var(--gut);margin-top:var(--s-7);counter-reset:pt}
@media (min-width:760px){.points{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.pt{padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s-2)}
.pt .t-h3{font-size:18px}
.pt .t-body{max-width:36ch}

/* media frames */
.md{margin:0;min-width:0}
.md-box{position:relative;aspect-ratio:var(--ar,16/9);max-width:100%;border-radius:var(--r-media);overflow:hidden;background:var(--stage-p,var(--stage)) center/cover no-repeat}
.md-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.md--canvas .md-box video{object-fit:contain}
.md--browser .md-box{border-radius:var(--r-media);box-shadow:0 0 0 1px var(--line),0 20px 50px -24px rgba(0,0,0,.35);padding-top:34px;aspect-ratio:auto;background:var(--stage-p,var(--stage))}
.md--browser .md-inner{position:relative;aspect-ratio:var(--ar,16/9);background:var(--stage-p,#000) center/cover no-repeat}
.md--browser .md-inner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.md-bar{position:absolute;inset:0 0 auto 0;height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#161616;color:#9a9a9a}
.md-bar i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}
.md-bar span{margin-inline:auto;font-size:11px;letter-spacing:.01em;padding:3px 12px;border-radius:99px;background:#232323;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md--phone{display:flex;justify-content:center}
.md--phone .md-box{width:min(320px,78%);border-radius:44px;box-shadow:0 0 0 9px #111,0 0 0 10px #2a2a2a,0 30px 60px -20px rgba(0,0,0,.45)}
.md figcaption{margin-top:var(--s-3)}
.motion .md[data-r]{--rd:28px}

/* feature: one dominant visual, text set beside or above it */
@media (min-width:1000px){
  .feat .txt{grid-column:1/5;align-self:end}
  .feat .md{grid-column:5/13}
  .feat.flip .txt{grid-column:9/13;grid-row:1}
  .feat.flip .md{grid-column:1/9;grid-row:1}
  .feat.wide .txt{grid-column:1/8}
  .feat.wide .md{grid-column:1/-1}
}
.feat .txt{display:flex;flex-direction:column;gap:var(--s-4)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips span{padding:6px 12px;border-radius:var(--r-pill);background:var(--chip);font-size:13px;letter-spacing:-.01em}

/* approach: media + construction list */
.spec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.spec li{display:grid;grid-template-columns:2.4em 1fr;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--line);font-size:15px;line-height:21px;letter-spacing:-.02em}
.spec li:last-child{border-bottom:1px solid var(--line)}
.spec b{font-weight:600;font-variant-numeric:tabular-nums}
.spec span{color:var(--ink-2)}
.spec span strong{color:var(--ink-1);font-weight:600}
@media (min-width:1000px){.appr .md{grid-column:1/8}.appr .side-txt{grid-column:8/13;align-self:center}}
.side-txt{display:flex;flex-direction:column;gap:var(--s-5)}

/* sticky steps (desktop) → vertical sequence (below 1000px) */
.steps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.stage{display:none}
.step{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--s-4);padding-block:var(--s-6)}
.step+.step{border-top:1px solid var(--line)}
.step .md{margin-top:var(--s-2)}
@media (min-width:1000px){
  .stage{display:block;grid-column:1/8;grid-row:1/span 20;position:sticky;top:max(var(--s-7),calc(50svh - 22vw));align-self:start}
  .stage .md-box{--ar:16/10}
  .stage video{opacity:0;transition:opacity var(--d-slow) var(--ease);object-fit:contain}
  .stage video.on{opacity:1}
  .stage-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s-3)}
  .stage-bar{flex:1;max-width:160px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
  .stage-bar i{position:absolute;inset:0;background:var(--ink-1);transform-origin:left;transform:scaleX(var(--sp,.25));transition:transform var(--d-slow) var(--ease)}
  .step{grid-column:9/13;min-height:62svh;justify-content:center;padding-block:var(--s-7);border-top:0!important;opacity:.32;transition:opacity var(--d-med) ease}
  .step.on{opacity:1}
  .step .md{display:none}
}

/* rows: alternating chapters */
.rows{display:flex;flex-direction:column;gap:var(--s-9)}
.row-ch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s-5);align-items:center}
.row-ch>*{grid-column:1/-1;min-width:0}
.row-ch .txt{display:flex;flex-direction:column;gap:var(--s-3)}
@media (min-width:1000px){
  .row-ch .md{grid-column:1/9}.row-ch .txt{grid-column:9/13}
  .row-ch:nth-child(even) .md{grid-column:5/13;grid-row:1}.row-ch:nth-child(even) .txt{grid-column:1/5;grid-row:1}
}

/* design language: about one viewport */
.dl{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6) var(--gut)}
@media (min-width:760px){.dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dl>div{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:var(--s-3)}
.sw div{display:flex;flex-direction:column;gap:6px}
.sw i{display:block;aspect-ratio:1;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}
.sw b{font-size:12px;font-weight:600;letter-spacing:-.01em}
.sw span{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;letter-spacing:-.02em}
.dl ul li{color:var(--ink-2)}
.dl ul li b{color:var(--ink-1);font-weight:600}

/* outcomes */
.oc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--gut)}
@media (min-width:760px){.oc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oc li{display:grid;grid-template-columns:3em 1fr;gap:var(--s-3);padding:var(--s-5) 0;border-top:1px solid var(--line);font-size:19px;line-height:26px;letter-spacing:-.03em}
.oc li b{font-size:13px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:4px}
.notes .cs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s-3);padding-block:var(--s-5);border-top:1px solid var(--line)}
.notes .cs>*{grid-column:1/-1}
@media (min-width:760px){.notes .cs>h3{grid-column:1/4}.notes .cs>p{grid-column:4/12}}
.notes .cs p{font-size:var(--fs-body-l);line-height:27px;letter-spacing:-.02em;max-width:62ch;text-wrap:pretty}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-7)}
.btn{height:46px;padding:0 20px;border-radius:var(--r-pill);background:var(--ink-1);color:var(--bg);display:inline-flex;align-items:center;gap:var(--s-2);font-size:15px;letter-spacing:-.02em;font-weight:600;transition:transform var(--d-med) var(--ease)}
.btn svg{width:14px;height:14px}
.btn:hover{transform:translateY(-1px)}

/* previous / back: quiet text links above the big next-project card */
.pn{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-9);padding-top:var(--s-4);border-top:1px solid var(--line)}
.pn a{display:flex;flex-direction:column;gap:4px;min-height:44px;justify-content:center}
.pn a:last-child{text-align:right}
.pn b{font-size:17px;letter-spacing:-.03em;transition:transform var(--d-med) var(--ease)}
.pn a:first-child:hover b{transform:translateX(-4px)}.pn a:last-child:hover b{transform:translateX(4px)}
/* next project */
.next{display:block;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.next-top{display:flex;justify-content:space-between;align-items:end;gap:var(--s-4);margin-bottom:var(--s-5)}
.next .t-display{margin-top:var(--s-2);transition:transform var(--d-med) var(--ease)}
.next .go{display:inline-flex;align-items:center;gap:var(--s-2);font-size:14px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.next .go i{width:44px;height:44px;border-radius:50%;background:var(--ink-1);color:var(--bg);display:grid;place-items:center;transition:transform var(--d-med) var(--ease)}
.next .go svg{width:16px;height:16px}
.next .pj-media{aspect-ratio:21/9}
.pn+.next{border-top:0;padding-top:0}
.next:hover .go i{transform:rotate(45deg)}
.next:hover .t-display{transform:translateX(6px)}
.next:hover .pv,.next:hover .pj-media video{transform:scale(1.015)}

/* page transition: shared media expands into the case study */
::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .6s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}