/* ============================================================
   CASE STUDY / layered on top of assets/css/site.css
   site.css already supplies: type + layout tokens (--fs-*, --max-w,
   --gutter, --edge), the nav pill, .sq-btn CTAs, .nh-label, the green
   footer and the About panel. This file only adds the case-study page:
   OLED black, one 1280px column, dark panels, the bottom filmstrip.
   Old light version: tmp/backup-2026-09-29/case-study.pre-restyle.css
   ============================================================ */
html.case-page,
html.case-page body{background:#000;color:var(--paper);}
html.case-page{scroll-behavior:auto;}          /* Lenis handles smooth scrolling */
.cs{--panel:#0D0E0D;--panel-line:rgba(244,247,247,.08);--media-gap:clamp(8px,1vw,16px);}

/* ---------- intro ---------- */
.cs-intro{padding-top:clamp(130px,18vh,200px);padding-bottom:clamp(40px,5vw,72px);}
.cs-intro-grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(32px,6vw,120px);align-items:start;
}
.cs-title{
  margin:0;font-size:clamp(44px,6vw,88px);font-weight:500;
  letter-spacing:-.05em;line-height:.92;
}
.cs-lead{margin:.35em 0 clamp(28px,3vw,40px);max-width:38ch;font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.02em;}
.cs-meta{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;margin:0;padding-top:18px;border-top:1px solid rgba(244,247,247,.14);}
.cs-meta dt{margin:0 0 6px;opacity:.5;}
.cs-meta dd{margin:0;line-height:1.45;}

/* ---------- media modules: every group shares one column and one gap ---------- */
.cs-media{display:grid;gap:var(--media-gap);}
.case-module{margin:0;}
.case-moment{
  position:relative;overflow:hidden;border-radius:12px;
  background:var(--panel);border:1px solid var(--panel-line);
}
.case-moment video,.case-moment img{display:block;width:100%;height:100%;object-fit:cover;}
.case-moment--wide{aspect-ratio:16/9;}
.case-placeholder{width:100%;height:100%;min-height:100%;
  background:radial-gradient(120% 90% at 20% 0%,rgba(244,247,247,.035),transparent 60%);}
.case-pair,.case-composition{display:grid;grid-template-columns:1fr 1fr;gap:var(--media-gap);aspect-ratio:16/9;}
.case-stack{display:grid;grid-template-rows:1fr 1fr;gap:var(--media-gap);min-height:0;}
.case-pair .case-moment,.case-stack .case-moment,.case-moment--tall{min-height:0;}

/* ---------- more work: two cards side by side, same look as the homepage cards ---------- */
.cs-next{padding-top:clamp(110px,16vh,180px);}
.cs-next-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,3vw,32px);}
.cs-next-top .nh-label{margin:0;}
.cs-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);}
.cs-more-card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--panel-line);
  border-radius:clamp(16px,1.6vw,20px);padding:clamp(10px,1vw,14px);
  transition:border-color .4s var(--ease-out);
}
.cs-more-card:hover{border-color:rgba(244,247,247,.16);}
.cs-more-media{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:clamp(10px,1vw,12px);background:#161816;}
.cs-more-media video,.cs-more-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);}
.cs-more-card:hover .cs-more-media video,.cs-more-card:hover .cs-more-media img{transform:scale(1.045);}
.cs-more-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(18px,2vw,26px) clamp(8px,1.2vw,16px) clamp(10px,1.2vw,16px);}
.cs-more-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;}
.cs-more-meta h3{margin:0;font-size:var(--fs-lead);font-weight:500;line-height:1;letter-spacing:-.03em;}
.cs-more-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.cs-more-tags .tag{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:12px;}
.cs-more-desc{margin:10px 0 0;max-width:42ch;opacity:.6;line-height:1.45;}
/* short, wide cards: image left, copy right */
.cs-more-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:stretch;}
.cs-more-media{aspect-ratio:auto;min-height:clamp(180px,16vw,230px);height:100%;}
.cs-more-copy{justify-content:center;padding:clamp(14px,1.6vw,22px) clamp(14px,1.8vw,24px);}
.cs-more-meta{flex-direction:column;align-items:flex-start;gap:10px;}
.cs-more-tags{justify-content:flex-start;}
.cs-more-desc{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cs-more-cta.sq-btn{margin-top:14px;}
/* small outlined CTA, fills on card hover (as on the homepage cards) */
.cs-more-cta.sq-btn{margin-top:16px;background:transparent;color:var(--paper);border:1px solid currentColor;border-radius:6px;padding:3px 4px 3px 10px;gap:8px;}
.cs-more-cta.sq-btn .ic{width:18px;height:18px;border-radius:4px;background:transparent;color:var(--paper);border:1px solid currentColor;}
.cs-more-cta.sq-btn .ic svg{width:4px;}
.cs-more-card:hover .cs-more-cta{background:var(--paper);color:var(--ink);transform:none;}
.cs-more-card:hover .cs-more-cta .ic{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.cs-more-card:hover .cs-more-cta .roll span{transform:translateY(-14px) translateZ(0);}

/* ---------- closing: contact card (same card as the homepage FAQ, laid out in a row) ---------- */
.cs-end{padding-top:clamp(12px,1.4vw,20px);padding-bottom:clamp(110px,16vh,180px);}
.cs-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,40px);
  background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:clamp(20px,2vw,28px);}
.cs-card-mark{width:52px;height:auto;color:var(--brand);overflow:visible;}
.cs-card-title{margin:0;font-size:var(--fs-heading);font-weight:500;letter-spacing:-.03em;line-height:1.15;}
.cs-card-copy{margin:6px 0 0;opacity:.6;}

/* quiet reveal: set by case-study.js only when motion is allowed */
.cs-reveal-ready [data-cs-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.cs-reveal-ready [data-cs-reveal].is-in{opacity:1;transform:none;}

/* ---------- bottom filmstrip timeline ---------- */
.case-film{
  position:fixed;z-index:900;left:50%;bottom:clamp(14px,2vw,24px);
  width:min(calc(100vw - 28px),520px);transform:translateX(-50%);
  padding:6px;border-radius:12px;
  background:rgba(13,14,13,.86);border:1px solid rgba(244,247,247,.08);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);
}
.case-film.is-away{opacity:0;transform:translate(-50%,16px);pointer-events:none;}
.case-film-rail{position:relative;display:flex;gap:5px;align-items:center;}
.case-film-marker{position:absolute;z-index:2;top:-6px;bottom:-6px;left:0;width:2px;background:#12957A;box-shadow:0 0 10px rgba(18,149,122,.6);pointer-events:none;will-change:left;}
.case-film a{position:relative;display:block;flex:1 1 0;min-width:0;height:clamp(34px,4vw,52px);overflow:hidden;border-radius:6px;background:#1a1c1a;opacity:.5;transition:opacity .3s;}
.case-film a:hover,.case-film a[aria-current="true"]{opacity:1;}
.case-film video{width:100%;height:100%;object-fit:cover;transform:scale(1.2);}
.case-film-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#222522,#101110);}

@media (max-width:760px){
  .cs-intro{padding-top:120px;}
  .cs-intro-grid{grid-template-columns:1fr;gap:28px;}
  .cs-meta{grid-template-columns:1fr 1fr;gap:18px;}
  .cs-meta div:first-child{grid-column:1/-1;}
  .case-pair,.case-composition{grid-template-columns:1fr;aspect-ratio:auto;}
  .case-pair .case-moment,.case-stack .case-moment,.case-moment--tall{aspect-ratio:16/9;}
  .cs-more{grid-template-columns:1fr;}
  .cs-more-media{min-height:150px;}
  .cs-more-meta{flex-direction:column;align-items:flex-start;gap:10px;}
  .cs-more-tags{justify-content:flex-start;}
  .cs-card{grid-template-columns:1fr;justify-items:start;}
  .case-film{width:calc(100vw - 20px);bottom:max(10px,env(safe-area-inset-bottom));}
  .case-film a{height:34px;}
}
@media (prefers-reduced-motion:reduce){
  .cs-reveal-ready [data-cs-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- generated case studies (tools/case_gen.py) ---------- */
.cs-tagline{margin:16px 0 0;max-width:26ch;font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.02em;opacity:.55;}
.cs-meta--2{grid-template-columns:1.3fr 1fr;}
.case-film a img{display:block;width:100%;height:100%;object-fit:cover;}
.case-moment img{background:#0D0E0D;}
/* deck slides: shown at their own proportions, no frame or outline around them */
.case-moment--slide{border:0;background:none;border-radius:12px;}
.case-moment--slide img{height:auto;}

/* project name on case studies: smaller */
.cs-title{font-size:clamp(32px,3.6vw,52px);line-height:.98;letter-spacing:-.045em;}

/* Back to work (top of every case study) */
.cs-back{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(28px,4vw,48px);
  padding:5px 14px 5px 5px;border-radius:9px;
  border:1px solid rgba(244,247,247,.22);color:var(--paper);
  font-size:var(--fs-body);font-weight:500;line-height:1;
  transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out);
}
.cs-back .ic{width:22px;height:22px;border-radius:5px;background:var(--paper);color:#000;display:inline-flex;align-items:center;justify-content:center;transition:transform .35s var(--ease-out);}
.cs-back .ic svg{width:5px;height:auto;transform:rotate(180deg);}
.cs-back:hover{background:var(--paper);color:#000;border-color:var(--paper);}
.cs-back:hover .ic{background:#000;color:var(--paper);transform:translateX(-3px);}

/* intro stagger on load (case-study.js) */
.cs-stagger{opacity:0;transform:translateY(12px);}
.cs-stagger.is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out) calc(var(--cs-stagger-base,0s) + .08s + var(--i,0) * .06s),
             transform .9s var(--ease-out) calc(var(--cs-stagger-base,0s) + .08s + var(--i,0) * .06s);}
.case-module--lead.cs-stagger{transform:translateY(20px);}
@media (prefers-reduced-motion:reduce){.cs-stagger{opacity:1;transform:none;}}

/* first paint: intro pieces start hidden until the stagger takes over */
html.cs-pre .cs-intro .cs-back,html.cs-pre .cs-intro .cs-title,html.cs-pre .cs-intro .cs-tagline,
html.cs-pre .cs-intro .cs-lead,html.cs-pre .cs-intro .cs-meta > div,html.cs-pre .case-module--lead{opacity:0;transform:translateY(12px);}
/* the rule above the details draws in from the left with the intro */
.cs-meta{position:relative;border-top:0;}
.cs-meta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(244,247,247,.14);
  transform-origin:left center;transition:transform 1.1s var(--ease-out) .3s;}
html.cs-pre .cs-meta::before{transform:scaleX(0);transition:none;}
/* the contact card sits one card-gap below the More work cards */
.section.cs-end{margin-top:0;padding-top:clamp(12px,1.4vw,20px);}
/* Back to work sits under the tagline */
.cs-intro .cs-back{margin:clamp(24px,3vw,36px) 0 0;}

/* leaving: the rule under the description retracts as the page sinks away */
html.cs-leaving .cs-meta::before{transform:scaleX(0);transform-origin:right center;transition:transform .5s cubic-bezier(.5,0,.75,0);}

/* "More work" sideways transition: the arriving project starts off to the
   side of the card that was clicked, then glides into place */
html.cs-slide-in-left main.cs,html.cs-slide-in-left body > footer{transform:translate3d(-7vw,0,0);opacity:0;}
html.cs-slide-in-right main.cs,html.cs-slide-in-right body > footer{transform:translate3d(7vw,0,0);opacity:0;}
html.cs-slide-go main.cs,html.cs-slide-go body > footer{transform:none;opacity:1;
  transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1);}
html.cs-slide-in-left,html.cs-slide-in-right{overflow-x:hidden;}
/* case details labels (Services / Year / Sector): mono capitals like every other label */
.cs-meta dt{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-label);}

/* project media crops in slightly on hover, so the page feels alive under the cursor */
.case-moment img,.case-moment video{transition:transform .9s var(--ease-out);}
@media (hover:hover){
  .case-moment:hover img,.case-moment:hover video{transform:scale(1.035);}
}
@media (prefers-reduced-motion:reduce){.case-moment:hover img,.case-moment:hover video{transform:none;}}

/* two-up slides: the original image keeps the size, two frames show its halves */
.case-moment--split{position:relative;overflow:visible;}
.case-moment--split > img{visibility:hidden;}
.case-split-cell{position:absolute;top:0;bottom:0;overflow:hidden;border-radius:12px;}
.case-split-cell img{position:absolute;top:0;height:100%;max-width:none;display:block;transition:transform .9s var(--ease-out);}
.case-moment--split:hover img{transform:none;}
@media (hover:hover){
  .case-moment--split .case-split-cell:hover img{transform:scale(1.035);}
}

/* GPU diet: the filmstrip sits over moving media, so no live blur (solid instead) */
.case-film{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(13,14,13,.95);}