/* DHALMIA — Case study / project detail template. v1.2: adds the image-led register (full cinematic hero, before/after wipe stage, full-bleed pull, paper programme rows, editorial photo grid, framed film, phase rail) — all opt-in by markup; pages unchanged. v1.1: glass panels made near-solid, status chip → typography, root also matches data-template="case".
   Scope: .dh-case (wrapper: <div class="dh-scope dh-case" data-page="case">).
   Fluid token scale: type and spacing interpolate continuously with the
   viewport; breakpoints change LAYOUT only. Enqueued on any page whose
   content declares data-content-type="project" or "portfolio".
   Sticky sidebar offset: set --dh-header-h on the wrapper if the fixed
   site header should push it down. */
.dh-case{
  --slate-950:#141617;--slate-900:#1A1C1D;--slate-850:#212121;--slate-800:#272A2B;--slate-750:#2E3132;
  --ink-0:#F1F2F2;--ink-1:#BEC2C3;--muted:#8C9092;
  --copper:#C87E33;--copper-bright:#E29A55;--copper-deep:#8F5620;
  --copper-metal:linear-gradient(125deg,#E8A75E 0%,#C87E33 46%,#98601F 100%);
  --copper-frame:rgba(200,126,51,.32);--copper-glow:rgba(200,126,51,.14);
  --hair:rgba(241,242,242,.09);--hair-strong:rgba(241,242,242,.16);
  --glass:rgba(20,22,23,.92);   /*: near-solid — no glassmorphism */
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;
  
  --t-display:clamp(2.6rem,1rem + 6.4vw,7.2rem);
  --t-h2:clamp(1.75rem,.9rem + 2.9vw,3.4rem);
  --t-h3:clamp(1.1rem,.85rem + .9vw,1.45rem);
  --t-body:clamp(.95rem,.85rem + .3vw,1.08rem);
  --t-lede:clamp(1.1rem,.85rem + .9vw,1.42rem);
  --t-sm:clamp(.82rem,.76rem + .2vw,.9rem);
  --t-xs:clamp(.68rem,.62rem + .2vw,.75rem);
  --s-1:clamp(.4rem,.3rem + .3vw,.6rem);
  --s-2:clamp(.85rem,.6rem + .6vw,1.15rem);
  --s-3:clamp(1.35rem,.9rem + 1.2vw,2rem);
  --s-4:clamp(2rem,1.2rem + 1.9vw,3.1rem);
  --s-5:clamp(2.75rem,1.4rem + 3.4vw,4.9rem);
  --sec-y:clamp(4rem,1.6rem + 6.6vw,9.75rem);
  --gap:clamp(1.4rem,.7rem + 2.4vw,3.9rem);
  --pad-x:clamp(1.1rem,.4rem + 4.2vw,6.75rem);
  --nav-h:clamp(4.5rem,3.5rem + 2vw,6rem);
  --ease:cubic-bezier(.16,1,.3,1);
}.dh-case *,.dh-case *::before,.dh-case *::after{margin:0;padding:0;box-sizing:border-box}.dh-case{background:var(--slate-850);color:var(--ink-1);font-family:var(--sans);font-size:var(--t-body);font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}.dh-case ::selection{background:var(--copper);color:var(--slate-950)}.dh-case img{display:block;max-width:100%}.dh-case a{color:inherit;text-decoration:none}.dh-case button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.dh-case h1,.dh-case h2,.dh-case h3{font-family:var(--serif);color:var(--ink-0);font-weight:400;line-height:1.06}.dh-case em{font-style:italic;background:var(--copper-metal);-webkit-background-clip:text;background-clip:text;color:transparent}.dh-case .wrap{max-width:min(1560px,94vw);margin-inline:auto;padding-inline:var(--pad-x)}.dh-case .ovl{display:inline-flex;align-items:center;gap:.9rem;font-size:var(--t-xs);letter-spacing:.34em;text-transform:uppercase;color:var(--copper-bright);font-weight:500}.dh-case .ovl::before{content:"";width:2.6rem;height:1px;background:var(--copper)}.dh-case .btn{display:inline-flex;align-items:center;gap:.8rem;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;font-weight:500;padding:1.1rem 2.2rem;border:1px solid var(--hair-strong);color:var(--ink-0);transition:.45s var(--ease)}.dh-case .btn .ar{transition:transform .45s var(--ease)}.dh-case .btn:hover .ar{transform:translateX(5px)}.dh-case .btn--solid{background:var(--copper-metal);border-color:var(--copper-deep);color:var(--slate-950);font-weight:600;box-shadow:0 8px 28px -10px rgba(200,126,51,.35)}.dh-case .btn--solid:hover{filter:brightness(1.1)}.dh-case .btn--ghost:hover{border-color:var(--copper);color:var(--copper-bright)}.dh-case .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.dh-case .rv.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.dh-case .rv{opacity:1;transform:none;transition:none}}.dh-case :focus-visible{outline:2px solid var(--copper);outline-offset:3px}.dh-case .grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}.dh-case .ph{background:linear-gradient(135deg,var(--slate-800),var(--slate-750));display:grid;place-items:center;font-family:var(--serif);font-style:italic;color:var(--muted);letter-spacing:.06em}.dh-case .hero{position:relative;min-height:100svh;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:var(--slate-950)}.dh-case .hero__bg{position:absolute;inset:0}.dh-case .hero__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transform:scale(1.04);animation:heroSettle 9s var(--ease) forwards}@keyframes heroSettle{to{transform:scale(1)}}.dh-case .hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,22,23,.94) 0%,rgba(20,22,23,.6) 46%,rgba(20,22,23,.14) 80%),linear-gradient(rgba(20,22,23,.24),rgba(20,22,23,.76) 92%)}.dh-case .hero__frame{position:absolute;inset:clamp(.9rem,2vw,1.6rem);border:1px solid var(--copper-frame);pointer-events:none;z-index:3}.dh-case .hero__inner{position:relative;z-index:2;width:100%;padding:clamp(9rem,16vh,12rem) var(--pad-x) clamp(3rem,6vh,4.5rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gap);align-items:end}.dh-case .crumb{font-size:var(--t-xs);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-3);display:flex;gap:.9rem;flex-wrap:wrap}.dh-case .crumb a:hover{color:var(--copper-bright)}.dh-case .crumb b{color:var(--copper-bright);font-weight:500}.dh-case .status{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink-0);margin-bottom:var(--s-3)}.dh-case .status::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--copper)}.dh-case .hero h1{font-size:var(--t-display);font-weight:300;max-width:12ch;letter-spacing:-.012em;margin-bottom:var(--s-3)}.dh-case .hero__lede{font-family:var(--serif);font-size:var(--t-lede);font-style:italic;color:var(--ink-0);line-height:1.5;max-width:40ch}.dh-case .hero__card{background:var(--glass);border-top:1px solid var(--copper);border:1px solid var(--hair-strong);border-top-color:var(--copper-frame);padding:clamp(1.5rem,2.5vw,2.25rem)}.dh-case .hero__card dl div{display:flex;justify-content:space-between;gap:var(--s-2);padding:.75rem 0;border-bottom:1px solid var(--hair);font-size:var(--t-sm)}.dh-case .hero__card dl div:last-child{border-bottom:0}.dh-case .hero__card dt{letter-spacing:.18em;text-transform:uppercase;font-size:var(--t-xs);color:var(--muted)}.dh-case .hero__card dd{color:var(--ink-0);text-align:right;font-family:var(--serif);font-size:1.1rem}.dh-case .hero__cue{position:absolute;left:50%;bottom:1.9rem;transform:translateX(-50%);z-index:3;font-size:var(--t-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.7rem}.dh-case .hero__cue::after{content:"";width:1px;height:2.4rem;background:linear-gradient(var(--copper),transparent);animation:cue 2.2s ease-in-out infinite}@keyframes cue{0%,100%{opacity:.4;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}.dh-case .story{padding-block:var(--sec-y)}.dh-case .story .wrap{display:grid;grid-template-columns:minmax(0,3.5fr) minmax(0,8fr);gap:var(--gap);align-items:start}.dh-case .side{position:sticky;top:calc(var(--nav-h) + 1rem)}.dh-case .side h2{font-size:var(--t-h2);margin-top:var(--s-2);margin-bottom:var(--s-3);max-width:12ch}.dh-case .side__facts{border-top:1px solid var(--hair-strong)}.dh-case .side__facts div{display:flex;justify-content:space-between;gap:var(--s-2);padding:.8rem 0;border-bottom:1px solid var(--hair);font-size:var(--t-sm)}.dh-case .side__facts dt{letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-xs);color:var(--muted)}.dh-case .side__facts dd{color:var(--ink-0);text-align:right}.dh-case .side__jump{margin-top:var(--s-4);display:flex;flex-direction:column;gap:.5rem}.dh-case .side__jump a{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.7rem;transition:color .3s}.dh-case .side__jump a::before{content:"";width:1rem;height:1px;background:var(--hair-strong);transition:width .4s var(--ease),background .3s}.dh-case .side__jump a:hover{color:var(--copper-bright)}.dh-case .side__jump a:hover::before{width:1.8rem;background:var(--copper)}.dh-case .prose{max-width:clamp(38ch,60vw,68ch)}.dh-case .prose .lede{font-family:var(--serif);font-size:var(--t-lede);font-style:italic;color:var(--ink-0);line-height:1.5;margin-bottom:var(--s-3)}.dh-case .prose p+p{margin-top:var(--s-2)}.dh-case .prose h3{font-size:var(--t-h3);margin:var(--s-4) 0 var(--s-2);font-family:var(--sans);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem}.dh-case .pull{margin:var(--s-5) 0;padding-left:var(--s-3);border-left:1px solid var(--copper);font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.2rem);font-style:italic;font-weight:300;color:var(--ink-0);line-height:1.35;max-width:26ch}.dh-case .fig{margin:var(--s-4) 0}.dh-case .fig img,.dh-case .fig .ph{width:100%;aspect-ratio:16/10;object-fit:cover}.dh-case .fig figcaption{margin-top:var(--s-2);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;gap:.9rem}.dh-case .fig figcaption b{color:var(--copper-bright);font-weight:500}.dh-case .plate{position:relative;overflow:hidden}.dh-case .plate img{width:100%;aspect-ratio:21/9;max-height:78dvh;object-fit:cover}.dh-case .plate figcaption{position:absolute;left:var(--pad-x);bottom:var(--s-3);font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-1);background:var(--glass);padding:.55rem 1rem;border:1px solid var(--hair)}.dh-case .approach{padding-block:var(--sec-y);background:var(--slate-900)}.dh-case .approach__head{margin-bottom:var(--s-5)}.dh-case .approach h2{font-size:var(--t-h2);margin-top:var(--s-2);max-width:16ch}.dh-case .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.dh-case .step{position:relative;padding-top:var(--s-3);border-top:1px solid var(--hair)}.dh-case .step::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--copper-metal);transition:width 1.4s var(--ease)}.dh-case .step.in::before{width:100%}.dh-case .step i{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,3.8vw,3.6rem);line-height:1;display:block;margin-bottom:var(--s-2);background:var(--copper-metal);-webkit-background-clip:text;background-clip:text;color:transparent}.dh-case .step h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.7rem}.dh-case .step p{font-size:var(--t-sm);max-width:36ch}.dh-case .ba{padding-block:var(--sec-y)}.dh-case .ba__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-5)}.dh-case .ba__head h2{font-size:var(--t-h2);margin-top:var(--s-2)}.dh-case .ba__hint{font-family:var(--serif);font-style:italic;color:var(--muted)}.dh-case .cmp{position:relative;overflow:hidden;aspect-ratio:16/8;max-height:80dvh;user-select:none;touch-action:none;border:1px solid var(--hair)}.dh-case .cmp img,.dh-case .cmp .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.dh-case .cmp__after{clip-path:inset(0 0 0 50%)}.dh-case .cmp__handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--copper);transform:translateX(-50%);z-index:3;pointer-events:none}.dh-case .cmp__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--glass);border:1px solid var(--copper);display:grid;place-items:center;z-index:4;pointer-events:none;color:var(--copper-bright);font-size:.8rem;letter-spacing:.1em}.dh-case .cmp__tag{position:absolute;top:var(--s-2);font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-0);background:var(--glass);padding:.5rem 1rem;border:1px solid var(--hair);z-index:3}.dh-case .cmp__tag--l{left:var(--s-2)}.dh-case .cmp__tag--r{right:var(--s-2)}.dh-case .cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}.dh-case .gal{padding-block:0 var(--sec-y)}.dh-case .gal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-5)}.dh-case .gal__head h2{font-size:var(--t-h2);margin-top:var(--s-2)}.dh-case .gal__n{font-family:var(--serif);font-style:italic;color:var(--muted);white-space:nowrap}.dh-case .gal__n b{font-style:normal;font-weight:400;font-size:1.6rem;background:var(--copper-metal);-webkit-background-clip:text;background-clip:text;color:transparent}.dh-case .mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) clamp(1.25rem,2.5vw,2.5rem)}.dh-case .shot{position:relative;overflow:hidden;display:block}.dh-case .shot::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .6s var(--ease),inset .6s var(--ease);pointer-events:none;z-index:2}.dh-case .shot:hover::after{border-color:var(--copper-frame);inset:.8rem}.dh-case .shot img,.dh-case .shot .ph{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}.dh-case .shot:hover img{transform:scale(1.04)}.dh-case .shot--w{grid-column:span 8}.dh-case .shot--w img,.dh-case .shot--w .ph{aspect-ratio:16/9}.dh-case .shot--n{grid-column:span 4}.dh-case .shot--n img,.dh-case .shot--n .ph{aspect-ratio:4/5}.dh-case .shot--h{grid-column:span 6}.dh-case .shot__num{position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;font-family:var(--serif);font-style:italic;color:rgba(241,242,242,.7)}.dh-case .shot__cap{display:flex;gap:var(--s-2);align-items:baseline;margin-top:var(--s-2);border-bottom:1px solid var(--hair);padding-bottom:var(--s-2)}.dh-case .shot__cap span{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--copper-bright);white-space:nowrap}.dh-case .shot__cap p{font-size:var(--t-sm)}.dh-case .tl{padding-block:var(--sec-y);background:var(--slate-900);border-block:1px solid var(--hair)}.dh-case .tl .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gap);align-items:start}.dh-case .tl h2{font-size:var(--t-h2);margin-top:var(--s-2)}.dh-case .tl__sum{margin-top:var(--s-3);max-width:34ch}.dh-case .vt{position:relative;padding-left:2.4rem}.dh-case .vt::before{content:"";position:absolute;left:.45rem;top:.6rem;bottom:.6rem;width:1px;background:var(--hair-strong)}.dh-case .vt::after{content:"";position:absolute;left:.45rem;top:.6rem;width:1px;height:0;background:var(--copper-metal);transition:height 2.4s var(--ease)}.dh-case .vt.in::after{height:calc(100% - 1.2rem)}.dh-case .vt__step{position:relative;padding:0 0 var(--s-4)}.dh-case .vt__step:last-child{padding-bottom:0}.dh-case .vt__step::before{content:"";position:absolute;left:-2.4rem;top:.45rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--slate-900);border:1px solid var(--copper);box-shadow:0 0 0 5px var(--slate-900);z-index:1}.dh-case .vt__step.done::before{background:var(--copper-metal)}.dh-case .vt__step h3{font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;gap:var(--s-2)}.dh-case .vt__step h3 span{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:0;color:var(--muted);font-size:1rem}.dh-case .vt__step p{font-size:var(--t-sm);color:var(--muted);max-width:52ch;margin-top:.3rem}.dh-case .cta{position:relative;padding-block:clamp(6.5rem,13vw,11rem);overflow:hidden;text-align:center}.dh-case .cta__bg{position:absolute;inset:0}.dh-case .cta__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}.dh-case .cta__bg::after{content:"";position:absolute;inset:0;background:rgba(18,20,21,.88)}.dh-case .cta__inner{position:relative;z-index:2}.dh-case .cta h2{font-size:clamp(2.4rem,5.6vw,5rem);font-weight:300;max-width:16ch;margin:var(--s-2) auto var(--s-3)}.dh-case .cta p{max-width:46ch;margin:0 auto var(--s-4)}.dh-case .cta__row{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap}.dh-case .rel{padding-block:var(--sec-y)}.dh-case .rel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-5)}.dh-case .rel h2{font-size:var(--t-h2);margin-top:var(--s-2)}.dh-case .rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.dh-case .card{display:block}.dh-case .card__fig{position:relative;overflow:hidden}.dh-case .card__fig::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .6s var(--ease),inset .6s var(--ease)}.dh-case .card:hover .card__fig::after{border-color:var(--copper-frame);inset:.7rem}.dh-case .card__fig img,.dh-case .card__fig .ph{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}.dh-case .card:hover img{transform:scale(1.05)}.dh-case .card__cat{position:absolute;top:var(--s-2);left:var(--s-2);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-0);background:var(--glass);padding:.45rem .9rem;border:1px solid var(--hair)}.dh-case .card__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-top:var(--s-2);border-bottom:1px solid var(--hair);padding-bottom:var(--s-2);transition:border-color .4s}.dh-case .card:hover .card__row{border-color:var(--copper-frame)}.dh-case .card h3{font-size:1.3rem;transition:color .4s}.dh-case .card:hover h3{color:var(--copper-bright)}.dh-case .card__loc{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.dh-case .pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}.dh-case .pn a{padding:var(--s-4) var(--pad-x);display:flex;flex-direction:column;gap:.4rem;transition:background .4s}.dh-case .pn a:hover{background:var(--slate-800)}.dh-case .pn a+a{border-left:1px solid var(--hair);text-align:right;align-items:flex-end}.dh-case .pn span{font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}.dh-case .pn b{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.8rem);color:var(--ink-0)}@media(max-width:1200px){.dh-case .story .wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}@media(max-width:1024px){.dh-case .hero__inner{grid-template-columns:1fr}.dh-case .hero__card{max-width:520px}.dh-case .story .wrap{grid-template-columns:1fr;gap:var(--s-4)}.dh-case .side{position:static}.dh-case .side__jump{display:none}.dh-case .steps{grid-template-columns:1fr;gap:var(--s-4)}.dh-case .step p{max-width:60ch}.dh-case .shot--w,.dh-case .shot--n,.dh-case .shot--h{grid-column:span 6}.dh-case .shot--n img,.dh-case .shot--n .ph{aspect-ratio:4/3}.dh-case .tl .wrap{grid-template-columns:1fr;gap:var(--s-4)}.dh-case .rel__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.dh-case .hero{min-height:92svh}.dh-case .hero__cue{display:none}.dh-case .shot--w,.dh-case .shot--n,.dh-case .shot--h{grid-column:span 12}.dh-case .rel__grid{grid-template-columns:1fr}.dh-case .gal__head,.dh-case .ba__head,.dh-case .rel__head{flex-direction:column;align-items:flex-start}.dh-case .side__facts dd,.dh-case .hero__card dd{text-align:left}.dh-case .side__facts div,.dh-case .hero__card dl div{flex-direction:column;gap:.15rem}.dh-case .cmp{aspect-ratio:4/3}.dh-case .pn{grid-template-columns:1fr}.dh-case .pn a+a{border-left:0;border-top:1px solid var(--hair);text-align:left;align-items:flex-start}.dh-case .cta__row{flex-direction:column;align-items:stretch}.dh-case .cta__row .btn{justify-content:center}}@media(max-width:480px){.dh-case .step i{font-size:2rem}}@media(max-height:480px) and (orientation:landscape){.dh-case .hero{min-height:100svh}.dh-case .hero__lede,.dh-case .hero__card{display:none}}
body:has(.dh-case){background-color:#212121}
.dh-case .side{top:calc(var(--dh-header-h,0px) + 1rem)}
@media (prefers-reduced-motion:reduce){
  .dh-case .rv{opacity:1;transform:none;transition:none}
  .dh-case .hero__bg img{animation:none;transform:none}
  .dh-case .hero__cue::after{animation:none}
  .dh-case .step::before,.dh-case .vt::after{transition:none}
  .dh-case .step.in::before{width:100%}
  .dh-case .vt.in::after{height:calc(100% - 1.2rem)}
  .dh-case .shot img,.dh-case .card__fig img{transition:none}
}


/* ═════════════════════════════════════════════════════════════
   additions — image-led register for portfolio pages (Made 4 first)
   Shared design with dh-upcoming v1.2. Everything below is OPT-IN by markup:
   .hero--full · .ln · .vis (before/after wipe) · .appr--img · .prog / .prog--paper · .story--fig · .grid · .film · .rail
   Per-page props on the wrapper: --hero-focus, --vis-ratio, --vis-ratio-static, --appr-focus. Status: .st (outline) .st--site (copper) .st--done (neutral).
═════════════════════════════════════════════════════════════ */
.dh-case{--paper:#E4E5E5;--paper-deep:#D6D8D8;--paper-ink:#1A1C1D;--paper-muted:#5C6163;--paper-hair:rgba(26,28,29,.14)}

.dh-case .st{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink-0)}
.dh-case .st::before{content:"";width:.4rem;height:.4rem;border-radius:50%;border:1px solid var(--copper)}
.dh-case .st--site::before{background:var(--copper)}
.dh-case .st--done::before{border-color:var(--muted);background:var(--muted)}
.dh-case .num{font-family:var(--serif);font-style:italic;font-weight:300;line-height:1;background:var(--copper-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.dh-case .prog{padding-block:var(--sec-y);background:var(--slate-900);border-block:1px solid var(--hair)}
.dh-case .prog__head{margin-bottom:var(--s-5)}.dh-case .prog__head h2{font-size:var(--t-h2);margin-top:var(--s-2)}
.dh-case .prog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gap);border-top:1px solid var(--hair-strong)}
.dh-case .prog__item{padding:var(--s-3) 0;border-bottom:1px solid var(--hair);position:relative}
.dh-case .prog__item::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--copper);transition:width 1.2s var(--ease)}
.dh-case .prog__item.in::before{width:100%}
.dh-case .prog__item .num{font-size:1.5rem;display:block;margin-bottom:var(--s-2)}
.dh-case .prog__item h3{font-size:var(--t-h3);margin-bottom:.5rem}
.dh-case .prog__item p{font-size:var(--t-sm);color:var(--muted);max-width:36ch}
.dh-case .prog--paper em{background:none;color:var(--copper-deep);-webkit-text-fill-color:currentColor}
.dh-case .hero--full .crumb{font-size:var(--t-xs);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);display:flex;gap:.9rem;flex-wrap:wrap}
.dh-case .hero--full .crumb a:hover{color:var(--copper-bright)}.dh-case .hero--full .crumb b{color:var(--copper-bright);font-weight:500}
.dh-case .hero--full .hero__sum{font-family:var(--serif);font-style:italic;font-size:var(--t-lede);color:var(--ink-1);line-height:1.45}
.dh-case .hero--full .snap div{display:grid;grid-template-columns:minmax(8rem,1fr) 2fr;gap:var(--s-2);padding:.75rem 0;border-bottom:1px solid var(--hair);font-size:var(--t-sm)}
.dh-case .hero--full .snap dt{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dh-case .hero--full .snap dd{color:var(--ink-0)}
/* ── Hero v1.2: full-viewport render, cinematic load sequence ──
   0.00s  curtains part from centre; render settles 1.12→1 and lifts from dark
   0.55s  copper frame draws (top → right → bottom → left)
   0.90s  eyebrow tracks in · 1.05s headline lines rise · 1.45s summary · 1.55s snapshot rows · 2.1s caption/cue
   All CSS transitions gated by .is-loaded (set after the render decodes). Reduced-motion: static. */
.dh-case .hero--full{position:relative;min-height:100svh;min-height:100dvh;padding:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;background:var(--slate-950);border-bottom:1px solid var(--hair);overflow:hidden;isolation:isolate}
.dh-case .hero__media{position:absolute;inset:0;z-index:0}
.dh-case .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 40%);transform:scale(1.12);filter:saturate(.85) brightness(.55);transition:transform 3.2s var(--ease),filter 2.2s var(--ease);will-change:transform}
.dh-case.is-loaded .hero__media img{transform:scale(1) translate3d(0,var(--hero-y,0),0);filter:saturate(.92) brightness(.92)}
.dh-case .hero--full .hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,23,.5) 0%,rgba(20,22,23,0) 26%,rgba(20,22,23,.2) 48%,rgba(20,22,23,.94) 100%),radial-gradient(ellipse 60% 70% at 18% 72%,rgba(20,22,23,.75) 0%,rgba(20,22,23,0) 70%),linear-gradient(90deg,rgba(20,22,23,.45) 0%,rgba(20,22,23,0) 45%)}
.dh-case .hero__curtain{position:absolute;top:0;bottom:0;width:50.5%;background:var(--slate-950);transition:transform 1.5s var(--ease) .1s}
.dh-case .hero__curtain--l{left:0;transform-origin:left center}.dh-case .hero__curtain--r{right:0;transform-origin:right center}
.dh-case.is-loaded .hero__curtain{transform:scaleX(0)}
.dh-case .hero--full .hero__frame{position:absolute;inset:clamp(.9rem,2vw,1.6rem);pointer-events:none}
.dh-case .hero--full .hero__frame i{position:absolute;background:var(--copper-frame);transition:transform 1s var(--ease)}
.dh-case .hero--full .hero__frame .t,.dh-case .hero--full .hero__frame .b{left:0;right:0;height:1px;transform:scaleX(0)}
.dh-case .hero--full .hero__frame .l,.dh-case .hero--full .hero__frame .r{top:0;bottom:0;width:1px;transform:scaleY(0)}
.dh-case .hero--full .hero__frame .t{top:0;transform-origin:left}.dh-case .hero--full .hero__frame .r{right:0;transform-origin:top}.dh-case .hero--full .hero__frame .b{bottom:0;transform-origin:right}.dh-case .hero--full .hero__frame .l{left:0;transform-origin:bottom}
.dh-case.is-loaded .hero--full .hero__frame i{transform:none}
.dh-case.is-loaded .hero--full .hero__frame .t{transition-delay:.55s}.dh-case.is-loaded .hero--full .hero__frame .r{transition-delay:1.15s}.dh-case.is-loaded .hero--full .hero__frame .b{transition-delay:1.75s}.dh-case.is-loaded .hero--full .hero__frame .l{transition-delay:2.35s}
.dh-case .hero--full > .wrap{position:relative;z-index:1;width:100%}
.dh-case .hero__top{padding-top:calc(var(--nav-h) + var(--s-3));display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3)}
.dh-case .hero--full .crumb{margin:0;opacity:0;transition:opacity .9s var(--ease) .9s}.dh-case.is-loaded .hero--full .crumb{opacity:1}
.dh-case .hero__idx{display:flex;align-items:center;gap:.9rem;font-family:var(--serif);font-style:italic;color:var(--ink-1);font-size:1.05rem;white-space:nowrap;opacity:0;transition:opacity .9s var(--ease) 1.2s}
.dh-case .hero__idx i{width:2.4rem;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) 1.4s}
.dh-case .hero__idx span+span{font-family:var(--sans);font-style:normal;font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--copper-bright);font-weight:500}
.dh-case.is-loaded .hero__idx{opacity:1}.dh-case.is-loaded .hero__idx i{transform:none}
.dh-case .hero__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--gap)*1.4);align-items:end;padding-block:var(--s-5) var(--s-4)}
.dh-case .hero--full .ovl{opacity:0;letter-spacing:.7em;transition:opacity 1s var(--ease) .9s,letter-spacing 1.6s var(--ease) .9s}
.dh-case.is-loaded .hero--full .ovl{opacity:1;letter-spacing:.32em}
.dh-case .hero--full h1{font-size:clamp(2.2rem,1rem + 3.5vw,4.6rem);margin:var(--s-2) 0 var(--s-3);max-width:26ch;text-wrap:balance;text-shadow:0 2px 28px rgba(20,22,23,.75),0 0 2px rgba(20,22,23,.6)}
.dh-case .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.dh-case .ln i{display:block;font-style:inherit;transform:translateY(112%);transition:transform 1.2s var(--ease) 1.05s}
.dh-case.is-loaded .ln i{transform:none}
.dh-case.is-loaded .ln:nth-child(2) i{transition-delay:1.15s}.dh-case.is-loaded .ln:nth-child(3) i{transition-delay:1.25s}.dh-case.is-loaded .ln:nth-child(4) i{transition-delay:1.35s}
.dh-case .hero--full .hero__sum{margin:0;max-width:46ch;color:var(--ink-0);opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) 1.45s,transform 1s var(--ease) 1.45s;text-shadow:0 1px 18px rgba(20,22,23,.8)}
.dh-case.is-loaded .hero--full .hero__sum{opacity:1;transform:none}
.dh-case .hero--full .snap{max-width:none;border-top:0;background:rgba(20,22,23,.82);border:1px solid var(--hair-strong);padding:.35rem 1.15rem}
.dh-case .hero--full .snap div:last-child{border-bottom:0}
.dh-case .hero--full .snap dt{color:var(--ink-1)}
.dh-case .hero--full .snap div{border-bottom-color:var(--hair-strong)}
.dh-case .hero--full .snap div{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.dh-case.is-loaded .hero--full .snap div{opacity:1;transform:none}
.dh-case.is-loaded .hero--full .snap div:nth-child(1){transition-delay:1.55s}.dh-case.is-loaded .hero--full .snap div:nth-child(2){transition-delay:1.65s}.dh-case.is-loaded .hero--full .snap div:nth-child(3){transition-delay:1.75s}.dh-case.is-loaded .hero--full .snap div:nth-child(4){transition-delay:1.85s}
.dh-case .hero__foot{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:calc(clamp(.9rem,2vw,1.6rem) + var(--s-3))}
.dh-case .hero--full .hero__cap{position:static;padding:0;background:none;opacity:0;transition:opacity .9s var(--ease) 2.1s;display:flex;gap:1.2rem;align-items:baseline;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-1)}
.dh-case.is-loaded .hero--full .hero__cap{opacity:1}
.dh-case .hero__cap b{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--copper-bright)}
.dh-case .hero--full .hero__cue{display:flex!important;position:static;left:auto;bottom:auto;transform:none;flex-direction:column;align-items:center;gap:.6rem;font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .9s var(--ease) 2.2s,color .3s}
.dh-case.is-loaded .hero--full .hero__cue{opacity:1}.dh-case .hero--full .hero__cue:hover{color:var(--copper-bright)}
.dh-case .hero--full .hero__cue i{width:1px;height:2.6rem;background:var(--hair-strong);position:relative;overflow:hidden}
.dh-case .hero--full .hero__cue i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--copper);animation:dhCue 2.2s var(--ease) infinite 2.6s}
@keyframes dhCue{0%{top:-100%}60%{top:100%}100%{top:100%}}
/* content parallax on scroll (JS sets --hero-p 0→1) */
.dh-case.is-loaded .hero__body,.dh-case.is-loaded .hero__foot{transform:translate3d(0,calc(var(--hero-p,0) * -6vh),0);opacity:calc(1 - var(--hero-p,0) * 1.15)}
.dh-case.is-loaded .hero__media img{transform:scale(1) translate3d(0,calc(var(--hero-p,0) * 8vh),0)}

/* ── Visuals v1.2: heading, frame and note all live inside the pinned 100vh stage; frame sized to the viewport ── */
.dh-case .vis{background:var(--slate-950);border-block:1px solid var(--hair)}
.dh-case .vis__track{height:260vh;position:relative}
.dh-case .vis__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:calc(var(--nav-h) + var(--s-2)) var(--pad-x) var(--s-3);max-width:var(--wrap);margin-inline:auto;box-sizing:border-box}
.dh-case .vis__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-3);flex:0 0 auto}
.dh-case .vis__head h2{font-size:clamp(1.6rem,1rem + 1.8vw,2.6rem);margin-top:var(--s-1);max-width:22ch}
.dh-case .vis__hint{font-family:var(--serif);font-style:italic;color:var(--muted);white-space:nowrap}
.dh-case .vis__frame{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-self:center;width:100%;border:1px solid var(--copper-frame);padding:clamp(.9rem,2vw,1.6rem)}
.dh-case .vis__stack{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--slate-900)}
.dh-case .vis__stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.dh-case .vis__stack img.b{clip-path:inset(0 0 0 100%)}
.dh-case .vis__edge{position:absolute;top:0;bottom:0;left:100%;width:1px;background:var(--copper);opacity:0;pointer-events:none;box-shadow:0 0 18px rgba(200,126,51,.5)}
.dh-case .vis__caps{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.dh-case .vis__caps .swap{position:relative;display:inline-block;color:var(--ink-1)}
.dh-case .vis__caps .swap span{display:block;transition:opacity .4s}
.dh-case .vis__caps .swap span+span{position:absolute;inset:0;opacity:0}
.dh-case .vis[data-phase="b"] .swap span:first-child{opacity:0}.dh-case .vis[data-phase="b"] .swap span+span{opacity:1}
.dh-case .vis__bar{position:relative;height:1px;background:var(--hair-strong);flex:1;max-width:220px;margin-inline:var(--s-3)}
.dh-case .vis__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--copper)}
.dh-case .vis__note{margin-top:var(--s-3);max-width:62ch;color:var(--muted);font-size:var(--t-sm);flex:0 0 auto}
/* JS sets --vis-w so the frame is as wide as the remaining height allows at the render's ratio */
.dh-case.is-js:not(.vis-static) .vis__frame{width:var(--vis-w,100%);max-width:100%}
/* static fallback (mobile / touch / reduced motion / no module): normal flow, two framed renders stacked */
.dh-case.vis-static .vis__track{height:auto}
.dh-case.vis-static .vis__stage{position:static;height:auto;display:block;padding-block:var(--sec-y)}
.dh-case.vis-static .vis__head{margin-bottom:var(--s-4)}
.dh-case.vis-static .vis__frame{display:block}
.dh-case.vis-static .vis__stack{aspect-ratio:auto;overflow:visible;background:none;display:grid;gap:var(--s-3)}
.dh-case.vis-static .vis__stack img{position:static;height:auto;aspect-ratio:var(--vis-ratio-static,3/2);clip-path:none!important}
.dh-case.vis-static .vis__edge,.dh-case.vis-static .vis__bar,.dh-case.vis-static .vis__hint{display:none}
.dh-case.vis-static .swap span+span{position:static;opacity:1;margin-top:.35rem}

/* safety nets: if the module never runs, the hero shows after 2.5 s and the stage falls into normal flow */
@keyframes dhForceHero{to{opacity:1;transform:none}}
@keyframes dhForceOvl{to{opacity:1;letter-spacing:.32em}}
@keyframes dhForceCurtain{to{transform:scaleX(0)}}
@keyframes dhForceImg{to{transform:none;filter:saturate(.92) brightness(.92)}}
.dh-case:not(.is-js) .hero__curtain{animation:dhForceCurtain .8s var(--ease) 2.5s forwards}
.dh-case:not(.is-js) .hero__media img{animation:dhForceImg .8s var(--ease) 2.5s forwards}
.dh-case:not(.is-js) .ln i,.dh-case:not(.is-js) .hero--full .hero__frame i,.dh-case:not(.is-js) .hero__idx i{animation:dhForceHero .8s var(--ease) 2.5s forwards}
.dh-case:not(.is-js) .hero--full .ovl{animation:dhForceOvl .8s var(--ease) 2.5s forwards}
.dh-case:not(.is-js) .hero--full .crumb,.dh-case:not(.is-js) .hero__idx,.dh-case:not(.is-js) .hero--full .hero__sum,.dh-case:not(.is-js) .hero--full .snap div,.dh-case:not(.is-js) .hero--full .hero__cap,.dh-case:not(.is-js) .hero--full .hero__cue{animation:dhForceHero .8s var(--ease) 2.5s forwards}
.dh-case:not(.is-js) .vis__track{height:auto}
.dh-case:not(.is-js) .vis__stage{position:static;height:auto;display:block;padding-block:var(--sec-y)}
.dh-case:not(.is-js) .vis__frame{display:block}
.dh-case:not(.is-js) .vis__stack{overflow:visible;background:none;display:grid;gap:var(--s-3)}
.dh-case:not(.is-js) .vis__stack img{position:static;height:auto;aspect-ratio:var(--vis-ratio-static,3/2);clip-path:none!important}
.dh-case:not(.is-js) .vis__edge,.dh-case:not(.is-js) .vis__bar,.dh-case:not(.is-js) .vis__hint{display:none}
.dh-case:not(.is-js) .swap span+span{position:static;opacity:1;margin-top:.35rem}

/* ── Approach v1.1: image / copy pairing (front approach), soft parallax, scrim only ── */
.dh-case .appr--img{position:relative;padding:0;overflow:hidden;background:var(--slate-950)}
.dh-case .appr__img{position:relative;height:min(100vh,940px);overflow:hidden}
.dh-case .appr__img img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:var(--appr-focus,50% 45%);filter:saturate(.9);will-change:transform}
.dh-case .appr__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,23,0) 25%,rgba(20,22,23,.45) 55%,rgba(20,22,23,.94) 100%),linear-gradient(90deg,rgba(20,22,23,.55) 0%,rgba(20,22,23,0) 55%)}
.dh-case .appr__body{position:absolute;inset:auto 0 0 0;padding:0 var(--pad-x) var(--s-5)}
.dh-case .appr__body .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);padding:0;align-items:end}
.dh-case .appr--img .pull{margin:0;font-size:clamp(1.3rem,1rem + 1.2vw,1.95rem);line-height:1.4;max-width:34ch;text-shadow:0 1px 18px rgba(20,22,23,.6)}
.dh-case .appr__cap{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-1);text-align:right;line-height:1.9}


/* ── Programme on the paper stage ── */
.dh-case .prog--paper{background:var(--paper);color:var(--paper-ink);border-block:1px solid var(--paper-hair)}
.dh-case .prog--paper .ovl{color:var(--copper-deep)}
.dh-case .prog--paper h2,.dh-case .prog--paper h3{color:var(--paper-ink)}
.dh-case .prog--paper .prog__grid{border-top-color:var(--paper-ink)}
.dh-case .prog--paper .prog__item{border-bottom-color:var(--paper-hair)}
.dh-case .prog--paper .prog__item p{color:var(--paper-muted)}
.dh-case .prog--paper ::selection{background:var(--copper-deep);color:var(--paper)}


/* ── Story with framed figure (three columns) ── */
.dh-case .story--fig .wrap{grid-template-columns:minmax(0,3.5fr) minmax(0,5fr) minmax(0,4fr)}
.dh-case .story__fig{position:relative;padding:clamp(.9rem,2vw,1.6rem);border:1px solid var(--copper-frame);align-self:start}
.dh-case .story__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)}
.dh-case .story__fig figcaption{margin-top:var(--s-2);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* ── Editorial photo grid v1.2.1: 12-col, deliberate rhythm (feature · 5/7 dropped · 4/4/4 · 7/5 · 4/4/4), no captions,
      each frame unveils bottom-up with the image settling from 1.06 → 1; copper inset + slow scale on hover ── */
.dh-case .grid{padding-block:var(--sec-y);background:var(--slate-950);border-block:1px solid var(--hair)}
.dh-case .grid__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-5)}
.dh-case .grid__head h2{font-size:var(--t-h2);margin-top:var(--s-2)}
.dh-case .grid__n{font-family:var(--serif);font-style:italic;color:var(--muted);white-space:nowrap}.dh-case .grid__n b{font-style:normal;font-size:1.6rem;color:var(--copper-bright);font-weight:400}
.dh-case .grid__rows{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--gap) * 1.6) var(--gap);align-items:start}
.dh-case .g{position:relative;overflow:hidden;background:var(--slate-900);grid-column:span 4;margin:0}
.dh-case .g--12{grid-column:span 12}.dh-case .g--7{grid-column:span 7}.dh-case .g--5{grid-column:span 5}.dh-case .g--6{grid-column:span 6}.dh-case .g--8{grid-column:span 8}
.dh-case .g--drop{margin-top:clamp(2rem,6vw,6rem)}

.dh-case .g img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92);transition:transform 1.4s var(--ease);cursor:zoom-in;transform:scale(1)}
.dh-case .g--12 img{aspect-ratio:21/9}.dh-case .g--7 img,.dh-case .g--8 img{aspect-ratio:16/10}.dh-case .g--5 img{aspect-ratio:4/3}
.dh-case .g::after{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .6s var(--ease),inset .6s var(--ease)}
.dh-case .g:hover::after{border-color:var(--copper-frame);inset:.7rem}.dh-case .g:hover img{transform:scale(1.03)}
/* unveil on scroll (replaces the generic .rv fade for these frames) */
.dh-case .g.rv{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.dh-case .g.rv img{transform:scale(1.06);transition:transform 1.8s var(--ease)}
.dh-case .g.rv.in{clip-path:inset(0 0 0 0)}.dh-case .g.rv.in img{transform:scale(1)}
.dh-case .g.rv.in:hover img{transform:scale(1.03)}
@keyframes dhUnveil{to{clip-path:inset(0 0 0 0)}}
.dh-case .g.rv:not(.in){animation:dhUnveil .8s var(--ease) 2.5s forwards}
/* ── Film: framed poster → native player; --film-ratio set from the video's real dimensions ── */
.dh-case .film{padding-block:var(--sec-y);background:var(--slate-850)}
.dh-case .film .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:center}
.dh-case .film h2{font-size:var(--t-h2);margin-top:var(--s-2)}
.dh-case .film p{max-width:44ch;margin-top:var(--s-3)}
.dh-case .film__frame{position:relative;padding:clamp(.9rem,2vw,1.6rem);border:1px solid var(--copper-frame);justify-self:center;width:100%;max-width:min(100%,calc(80vh * var(--film-ratio,.5625)))}
.dh-case .film__stage{position:relative;aspect-ratio:var(--film-ratio,.5625);background:var(--slate-950);overflow:hidden}
.dh-case .film__stage img,.dh-case .film__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dh-case .film__stage video{display:none;object-fit:contain;background:#000}
.dh-case .film__stage.is-playing img,.dh-case .film__stage.is-playing .film__play{display:none}.dh-case .film__stage.is-playing video{display:block}
.dh-case .film__play{position:absolute;inset:0;margin:auto;width:5.5rem;height:5.5rem;border-radius:50%;border:1px solid var(--copper);display:grid;place-items:center;background:rgba(20,22,23,.55);color:var(--copper-bright);transition:background .3s,color .3s;cursor:pointer}
.dh-case .film__play::after{content:"";position:absolute;inset:-.55rem;border-radius:50%;border:1px solid var(--copper-frame);animation:dhPulse 2.6s var(--ease) infinite}
@keyframes dhPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.dh-case .film__play svg{width:1.4rem;height:1.4rem;fill:currentColor;margin-left:.2rem}
.dh-case .film__play:hover{background:var(--copper);color:var(--slate-950)}
.dh-case .film__cap{margin-top:var(--s-2);display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* ── Phase rail: snap-scrolling strip on paper with numbered frames + copper progress ── */
.dh-case .rail{padding-block:var(--sec-y);background:var(--paper,#E4E5E5);color:var(--paper-ink,#1A1C1D);border-block:1px solid rgba(26,28,29,.14)}
.dh-case .rail .ovl{color:var(--copper-deep)}.dh-case .rail h2{font-size:var(--t-h2);margin-top:var(--s-2);color:#1A1C1D}
.dh-case .rail em{background:none;color:var(--copper-deep);-webkit-text-fill-color:currentColor}
.dh-case .rail__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-4)}
.dh-case .rail__head .lede{max-width:56ch;color:#5C6163;margin-top:var(--s-2)}
.dh-case .rail__nav{display:flex;gap:.5rem}
.dh-case .rail__nav button{width:44px;height:44px;border:1px solid rgba(26,28,29,.14);color:#1A1C1D;display:grid;place-items:center;transition:border-color .3s,color .3s;background:none;cursor:pointer;font:inherit}
.dh-case .rail__nav button:hover{border-color:var(--copper-deep);color:var(--copper-deep)}
.dh-case .rail__track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--s-2);margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x)}
.dh-case .rail__track::-webkit-scrollbar{display:none}
.dh-case .rph{flex:0 0 clamp(260px,32vw,520px);scroll-snap-align:start;margin:0}
.dh-case .rph__fig{position:relative;background:#F2F3F3;border:1px solid rgba(26,28,29,.14);padding:.7rem}
.dh-case .rph__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) contrast(.98)}
.dh-case .rph__row{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s-2);border-top:1px solid #1A1C1D;padding-top:.6rem}
.dh-case .rph__row .num{font-size:1.4rem}.dh-case .rph__row span+span{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:#5C6163}
.dh-case .rph--wide{flex-basis:clamp(300px,44vw,760px)}
.dh-case .rph__desc{font-size:var(--t-sm);color:#5C6163;margin-top:.55rem;max-width:48ch;line-height:1.6}
.dh-case .rail__bar{position:relative;height:1px;background:rgba(26,28,29,.14);margin-top:var(--s-3)}
.dh-case .rail__bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--copper-deep)}
@media (max-width:1100px){.dh-case .story--fig .wrap{grid-template-columns:1fr}.dh-case .film .wrap{grid-template-columns:1fr}.dh-case .rail__head{flex-direction:column;align-items:flex-start}}
@media (max-width:960px){.dh-case .g,.dh-case .g--7,.dh-case .g--5,.dh-case .g--8{grid-column:span 6}.dh-case .g--12{grid-column:span 12}.dh-case .g--drop{margin-top:0}.dh-case .grid__rows{gap:var(--gap)}.dh-case .prog__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dh-case .g,.dh-case .g--7,.dh-case .g--5,.dh-case .g--6,.dh-case .g--8{grid-column:span 12}.dh-case .prog__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dh-case .film__play::after{animation:none}.dh-case .g img,.dh-case .g::after,.dh-case .g.rv{transition:none!important;animation:none!important;clip-path:none!important;transform:none!important}}