/* deckhaus — inner pages (work / situation / case). Back inside the system:
   paper-dominant, hairline elevation, radius 12/8, one accent gesture, covers always whole at 16:9. */

#view-work .wrap,#view-sit .wrap,#view-case .wrap{max-width:1480px;margin:0 auto;padding:0 clamp(20px,6vw,96px)}

/* ---------- page head ---------- */
.ihead{position:relative;overflow:hidden;background:#08080A;padding:clamp(124px,13.5vw,176px) 0 clamp(40px,4.6vw,68px);border-bottom:1px solid rgba(244,244,239,.1)}
.ihead::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(244,244,239,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,239,.045) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(90% 80% at 24% 18%,#000,transparent 78%);mask-image:radial-gradient(90% 80% at 24% 18%,#000,transparent 78%)}
.ihead>.wrap{position:relative}
.ihead h1,.ihead .facts b{color:var(--paper)}
.ihead .lead{color:var(--paper)}
.ihead .back{color:#8E8E98}
.ihead .facts span{color:var(--paper)}
.ihead .facts{border-top-color:rgba(244,244,239,.16)}
.ihead .eyebrow{color:var(--lime-500)}
.ihead .chips .chip{border-color:rgba(244,244,239,.22);color:#C2C2CB}
.ihead .back{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);transition:color .25s}
.ihead .back:hover{color:var(--text-accent)}
.ihead h1{font-family:var(--font-display);font-weight:400;letter-spacing:0;line-height:1.05;font-size:clamp(42px,5.8vw,88px);margin:clamp(18px,2vw,26px) 0 0;max-width:17ch;text-wrap:balance}
.ihead .lead{font-size:clamp(17px,1.25vw,19px);line-height:1.62;color:var(--paper);max-width:54ch;margin:clamp(18px,2vw,26px) 0 0}
.ihead .facts{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,72px);margin-top:clamp(28px,3.2vw,46px);border-top:1px solid var(--border-subtle);padding-top:clamp(16px,1.8vw,24px)}
.ihead .facts b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.2vw,34px);line-height:1}
.ihead .facts span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);margin-top:8px}
.ihead .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:clamp(24px,2.8vw,36px)}

/* ---------- block heading ---------- */
.iblock{padding:clamp(44px,5.4vw,84px) 0 0}
.iblock>.wrap>.h{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,32px)}
.iblock h2{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(24px,2.5vw,38px);margin:0;max-width:20ch}
.iblock .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.iblock .note{font-size:16.5px;line-height:1.6;color:var(--text-secondary);max-width:54ch;margin:0 0 clamp(20px,2.4vw,30px)}

/* ---------- case rows ---------- */
.crow{display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,.44fr);gap:clamp(24px,3.6vw,72px);align-items:center;padding:clamp(28px,3.4vw,52px) 0;border-top:1px solid var(--border-subtle);color:inherit}
.crow:nth-child(even) .shot{order:2}
.crow:nth-child(even){grid-template-columns:minmax(0,.44fr) minmax(0,.56fr)}
.crow:last-child{border-bottom:1px solid var(--border-subtle)}
.crow .shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-sand);transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease,border-color .4s ease}
.crow:hover .shot{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.crow .shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.crow:hover .shot img{transform:scale(1.03)}
.crow .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent)}
.crow h3{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(28px,3.4vw,54px);line-height:1.08;margin:14px 0 0;position:relative;display:inline-block}
.crow h3::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--lime-500);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.crow:hover h3::after{transform:scaleX(1)}
.crow p{font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:46ch;margin:12px 0 0}
.crow .meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:clamp(16px,1.8vw,22px)}
.crow .go{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;color:var(--text-muted);margin-top:14px;transition:color .25s}
.crow .go i{font-style:normal;font-family:var(--font-mono);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.crow:hover .go{color:var(--text-accent)}
.crow:hover .go i{transform:translateX(6px)}
@media (max-width:860px){.crow{grid-template-columns:1fr}}

/* ---------- contact sheet: covers whole, 16:9, captions outside ---------- */
.csheet{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,36px) clamp(18px,2vw,32px)}
.csheet figure{margin:0;display:flex;flex-direction:column;gap:12px}
.csheet .fr{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-sand);transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .5s ease}
.csheet .fr img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.csheet figure:hover .fr{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.csheet figcaption{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary)}
.csheet figcaption b{font-weight:400;color:var(--text-accent)}
.csheet figcaption em{display:block;font-style:normal;color:var(--text-muted);margin-top:6px;letter-spacing:.12em}
.csheet .lead{grid-column:span 2}
@media (max-width:1040px){.csheet{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.csheet{grid-template-columns:1fr}.csheet .lead{grid-column:span 1}}

/* ---------- filters (tags) ---------- */
.ifil{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(22px,2.4vw,32px)}
.ifil button{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);padding:9px 16px;border:1px solid var(--border-subtle);border-radius:999px;background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ifil button:hover{border-color:var(--border-strong);color:var(--text-primary)}
.ifil button.on{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper)}

/* ---------- numbered deliverables ---------- */
.drow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:clamp(13px,1.5vw,18px) clamp(10px,1.2vw,16px) clamp(13px,1.5vw,18px) 0;border-bottom:1px solid var(--border-subtle);transition:background .3s ease,padding-left .4s cubic-bezier(.16,1,.3,1)}
.drow:first-child{border-top:1px solid var(--border-subtle)}
.drow:hover{background:var(--surface-hover);padding-left:12px}
.drow .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--text-accent)}
.drow .t{font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--text-primary)}
.drow .r{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
@media (max-width:640px){.drow{grid-template-columns:44px minmax(0,1fr)}.drow .r{display:none}}

/* ---------- price line ---------- */
.iprice{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--border-subtle);padding-top:clamp(16px,1.8vw,24px)}
.iprice b{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,38px)}
.iprice span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- closing band (the page's one dark moment) ---------- */
.iband{position:relative;overflow:hidden;background:var(--ink-900);border-radius:12px;margin:clamp(44px,5.4vw,84px) 0 clamp(52px,6vw,96px);padding:clamp(30px,3.4vw,54px);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.iband::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(244,244,239,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,239,.04) 1px,transparent 1px);background-size:52px 52px}
.iband p{position:relative;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.8vw,42px);line-height:1.12;color:var(--paper);margin:0;max-width:22ch}
.iband .acts{position:relative;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- case page ---------- */
.ihero{border-bottom:1px solid var(--border-subtle);background:var(--bg-base);padding:0 0 clamp(34px,4vw,60px)}
.ihero .fr{border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-sand)}
.ihero .fr img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ifacts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,44px);margin-top:clamp(28px,3.2vw,48px);border-top:1px solid var(--border-subtle);padding-top:clamp(18px,2vw,26px)}
.ifacts .ck{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent);margin:0 0 12px}
.ifacts .cv{font-size:16.5px;line-height:1.6;color:var(--text-secondary);margin:0;max-width:36ch}
@media (max-width:860px){.ifacts{grid-template-columns:1fr;gap:22px}}
.inext{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--border-subtle);padding-top:clamp(18px,2vw,26px);margin-top:clamp(34px,4vw,60px)}
.inext a{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.4vw,34px);display:inline-flex;align-items:baseline;gap:12px}
.inext a:hover{color:var(--text-accent)}

/* editorial rhythm in the sheet: lead piece with side caption + staggered middle column */
.csheet .lead{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.32fr);gap:clamp(16px,2vw,28px);align-items:end}
.csheet .lead figcaption{align-content:end;padding-bottom:4px;border-left:1px solid var(--border-subtle);padding-left:16px}
.csheet .lead figcaption em{margin-top:8px}
@media (min-width:1040px){.csheet figure:nth-child(3n+2):not(.lead){margin-top:clamp(18px,2.4vw,42px)}}
@media (max-width:680px){.csheet .lead{grid-template-columns:1fr;align-items:start}.csheet .lead figcaption{border-left:0;padding-left:0}}

#stGrid.csheet{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){#stGrid.csheet{grid-template-columns:1fr}}

/* case hero overlap — the studio's presence moment */
#view-case .ihead{padding-bottom:clamp(88px,10vw,150px)}
#view-case .ihero{padding-top:0;margin-top:clamp(-150px,-10vw,-88px);border-bottom:1px solid var(--border-subtle);background:linear-gradient(to bottom,transparent 0,transparent 50%,var(--bg-base) 50%)}
#view-case .ihero>.wrap{padding-top:0}
#view-case .ihero .fr{box-shadow:0 50px 90px -50px rgba(8,8,10,.8)}
#view-case .ifacts .cv{font-size:17px}

/* ---------- case chapters ---------- */
.chap{position:relative;background:var(--bg-base);border-bottom:1px solid var(--border-subtle);padding:clamp(48px,6vw,104px) 0}
.chap:nth-child(even){background:var(--sand-100)}
.chap .in{max-width:1480px;margin:0 auto;padding:0 clamp(20px,6vw,96px);display:grid;grid-template-columns:minmax(150px,.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,72px);align-items:start}
.chap .side{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.chap .side b{font-weight:400;font-size:clamp(28px,3.2vw,52px);font-family:var(--font-display);letter-spacing:0;color:var(--text-accent);line-height:1}
.chap .side ul{list-style:none;margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--border-subtle);display:grid;gap:9px}
.chap .shotw{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-sand);transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s ease}
.chap .shotw img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.chap a.body:hover .shotw{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.chap h3{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(30px,4.2vw,68px);line-height:1.04;margin:clamp(20px,2.4vw,34px) 0 0;max-width:18ch}
.chap p{font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--text-secondary);max-width:54ch;margin:16px 0 0}
.chap .go{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,26px);font-size:16px;color:var(--text-primary)}
.chap .go i{font-style:normal;font-family:var(--font-mono);color:var(--text-accent);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.chap a.body:hover .go i{transform:translateX(7px)}
@media (max-width:900px){.chap .in{grid-template-columns:1fr}.chap .side{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;align-items:baseline}.chap .side ul{display:none}}

/* ---------- work masthead: statement + live cover band ---------- */
.ihead--stage{padding-bottom:0;min-height:min(86svh,860px);display:flex;flex-direction:column;justify-content:flex-end}
.ihead--stage>.wrap{padding-bottom:clamp(30px,3.4vw,52px)}
.ihead h1.big{font-size:clamp(40px,5vw,86px);line-height:1.02;max-width:none;text-wrap:balance}
.ihead h1.big .mut{color:var(--lime-500)}


/* ---------- case sequence ---------- */
.cseq{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cseq li{display:grid;grid-template-columns:clamp(64px,7vw,120px) minmax(0,1fr);gap:clamp(16px,2.4vw,44px);align-items:start;padding:clamp(20px,2.4vw,34px) 0;border-top:1px solid var(--border-subtle)}
.cseq li:last-child{border-bottom:1px solid var(--border-subtle)}
.cseq .n{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3vw,50px);line-height:1;color:var(--text-accent)}
.cseq .ck{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px}
.cseq .cv{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(20px,2.2vw,34px);line-height:1.2;color:var(--text-primary);margin:0;max-width:34ch}

/* ---------- next case: full-bleed dark row ---------- */
.cnext{position:relative;display:block;overflow:hidden;background:var(--ink-900);color:var(--paper);margin-top:clamp(40px,5vw,80px)}
.cnext img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(.3);transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.cnext:hover img{transform:scale(1.04);opacity:.42}
.cnext__in{position:relative;display:block;max-width:1480px;margin:0 auto;padding:clamp(48px,7vw,120px) clamp(20px,6vw,96px)}
.cnext .k{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8E8E98}
.cnext .t{display:block;font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(30px,4.6vw,76px);line-height:1.04;margin-top:14px;max-width:18ch;color:var(--paper)}
.cnext .go{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,28px);font-size:16px;color:var(--paper)}
.cnext .go i{font-style:normal;font-family:var(--font-mono);color:var(--lime-500);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cnext:hover .go i{transform:translateX(7px)}

/* ---------- case study: the work does the talking ---------- */

.cnextfix{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,32px);z-index:60;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--ink-900);color:var(--paper);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;box-shadow:var(--shadow-md);transition:background .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.cnextfix:hover{background:var(--lime-500);color:var(--ink-900);transform:translateY(-2px)}
.cintro{font-size:clamp(19px,1.7vw,26px);line-height:1.5;color:var(--text-primary);max-width:44ch;margin:0 0 clamp(20px,2.4vw,30px);font-family:var(--font-display);font-weight:400;letter-spacing:0}
#view-case .chips{margin:0 0 clamp(34px,4.4vw,72px)}
.cline{padding:clamp(14px,2vw,34px) 0;max-width:30ch}
.cline .k{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent);margin-bottom:12px}
.cline p{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(22px,2.6vw,40px);line-height:1.16;margin:0;color:var(--text-primary)}

/* ---------- scroll motion ---------- */
.mfr{overflow:hidden}
.mfr img{will-change:transform}
#view-work .fr img,#view-sit .fr img{height:118%;margin-top:-9%}
.cnext img{height:126%;top:-13%}
#view-case .gfr,#view-work .csheet .fr,#view-sit .csheet .fr,#view-work .chap .shotw{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
#view-case .gfr.min,#view-work .csheet .fr.min,#view-sit .csheet .fr.min,#view-work .chap .shotw.min{opacity:1;transform:none}
#view-case .cline{transition:transform .2s linear}
@media (prefers-reduced-motion:reduce){
  #view-case .gfr,#view-work .csheet .fr,#view-sit .csheet .fr,#view-work .chap .shotw{opacity:1;transform:none;transition:none}
  #view-work .fr img,#view-sit .fr img{height:100%;margin-top:0}
}

#view-work .chap .shotw img,#view-work .csheet .fr img,#view-sit .csheet .fr img{height:114%;margin-top:-7%}

/* ---------- floating field of work (work masthead) ---------- */
.ihead--stage{padding-bottom:clamp(40px,5vw,72px);min-height:min(88svh,900px)}
.ihead--stage>.wrap{position:relative;z-index:3;width:100%;align-self:stretch}
.ihead--stage .col{max-width:min(720px,54vw);margin-left:0}
.ihead--stage .facts{max-width:none}
@media (max-width:1100px){.ihead--stage .col{max-width:34ch}}
@media (max-width:760px){.ihead--stage .col{max-width:none}}
.field{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1200px}
.ihead--stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,#08080A 26%,rgba(8,8,10,.86) 46%,rgba(8,8,10,.35) 72%,rgba(8,8,10,.55) 100%)}
.field figure{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;transform:translate3d(0,0,0) rotate(var(--r));will-change:transform;transform-style:preserve-3d}
.field figure.drift{animation:fl-drift var(--dur,15s) ease-in-out var(--del,0s) infinite alternate}
.field img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid rgba(244,244,239,.16);box-shadow:0 40px 90px -40px rgba(0,0,0,.95);opacity:var(--o,1)}
.field figcaption{margin-top:7px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#6E6E78}
@keyframes fl-drift{from{translate:0 0}to{translate:0 -14px}}
@media (max-width:1280px){.field{opacity:.55}}
@media (max-width:1100px){.field{opacity:.3}}
@media (max-width:760px){.field{display:none}}
@media (prefers-reduced-motion:reduce){.field figure{animation:none}}

/* home frames drift too */
#view-home #cases .cgal figure img,#view-home .bcard--img .bshot img,#view-home .tri .tfig img{height:112%;margin-top:-6%}
#view-home #cases .cgal figure,#view-home .bcard--img .bshot,#view-home .tri .tfig{overflow:hidden}

/* field: flight-in entrance */
.field figure.fly{animation:fl-in 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes fl-in{from{opacity:0;transform:translate3d(0,90px,-260px) rotate(var(--r)) scale(.72);filter:blur(6px)}to{opacity:var(--o,1);transform:translate3d(0,0,0) rotate(var(--r)) scale(1);filter:none}}

/* page wipe */
.dhwipe{position:fixed;inset:0;z-index:400;background:#08080A;pointer-events:none;opacity:0;transform:translateY(100%);display:flex;align-items:center;justify-content:center}
.dhwipe img{width:54px;height:54px;opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.dhwipe.in{opacity:1;transform:translateY(0);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.dhwipe.in img{opacity:1;transform:none}
.dhwipe.out{transform:translateY(-100%);transition:transform .62s cubic-bezier(.16,1,.3,1)}
.dhwipe.out img{opacity:0}
@media (prefers-reduced-motion:reduce){.dhwipe{display:none}}

/* ---------- recent pieces: the reel ---------- */
.reelsec{position:relative;background:#08080A;margin-top:clamp(44px,5.4vw,84px);padding:clamp(48px,6vw,96px) 0 clamp(52px,6.4vw,104px)}
.reelsec::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(244,244,239,.04) 1px,transparent 1px);background-size:calc(100%/6) 100%}
.reelsec>.wrap{position:relative;z-index:2}
.reelsec h2{color:var(--paper)}
.reelsec .k{color:#8E8E98}
.reelsec .ifil button{border-color:rgba(244,244,239,.18);color:#8E8E98}
.reelsec .ifil button:hover{color:var(--paper);border-color:rgba(244,244,239,.4)}
.reelsec .ifil button.on{background:var(--lime-500);border-color:var(--lime-500);color:var(--ink-900)}
.reel{position:relative}
.ixlist{list-style:none;margin:0;padding:0}
.ixrow{position:relative;display:grid;grid-template-columns:clamp(40px,3.4vw,58px) minmax(0,1fr) auto;gap:clamp(12px,1.6vw,26px);align-items:baseline;padding:clamp(14px,1.7vw,24px) 0;border-bottom:1px solid rgba(244,244,239,.14);cursor:pointer;transition:opacity .4s ease,padding-left .55s cubic-bezier(.16,1,.3,1)}
.ixrow:first-child{border-top:1px solid rgba(244,244,239,.14)}
.ixrow .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:#6E6E78;transition:color .3s}
.ixrow .c{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(24px,3.1vw,52px);line-height:1.06;color:var(--paper);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ixrow .c em{font-style:normal;color:#6E6E78;transition:color .3s}
.ixrow .y{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6E6E78;white-space:nowrap}
.reel:hover .ixrow{opacity:.3}
.reel:hover .ixrow.on,.ixrow.on{opacity:1}
.ixrow.on{padding-left:clamp(12px,1.6vw,26px)}
.ixrow.on .n{color:var(--lime-500)}
.ixrow.on .c{transform:translateX(6px)}
.ixrow.on .c em{color:#9A9AA4}
.reelfloat{position:absolute;left:0;top:0;z-index:5;width:clamp(260px,25vw,430px);pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform}
.reelfloat.on{opacity:1}
.reelfloat .ff{display:block;border-radius:8px;overflow:hidden;border:1px solid rgba(244,244,239,.18);box-shadow:0 46px 90px -44px rgba(0,0,0,.95)}
.reelfloat img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:opacity .3s ease,transform 1s cubic-bezier(.16,1,.3,1);transform:scale(1.02)}
.reelfloat img.sw{opacity:0;transform:scale(1.07)}
.reelfloat .fc{display:flex;justify-content:space-between;gap:14px;margin-top:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8E8E98}
.reelfloat .fc b{font-weight:400;color:var(--lime-500)}
#wkTiles{display:none}
@media (hover:none),(max-width:900px){.reel{display:none}#wkTiles{display:grid}.reelsec{background:var(--bg-base);padding-top:0}.reelsec::before{display:none}.reelsec h2{color:var(--text-primary)}.reelsec .k{color:var(--text-muted)}.reelsec .ifil button{border-color:var(--border-subtle);color:var(--text-muted)}}
@media (prefers-reduced-motion:reduce){.reelfloat{display:none}.reel:hover .ixrow{opacity:1}}

/* ---------- case study: editorial long-form ---------- */
.cstitle{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(42px,6.6vw,96px);line-height:1.03;margin:clamp(22px,2.6vw,36px) 0 0;max-width:16ch;text-wrap:balance}
.cstitle .mut{color:var(--text-muted)}
.cslead{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--text-secondary);max-width:56ch;margin:clamp(22px,2.4vw,34px) 0 0}
.csmeta{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:clamp(20px,2vw,28px) 0;margin-top:clamp(28px,3vw,44px)}
.csmeta .k{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.csmeta .v{font-size:15px;line-height:1.35;color:var(--text-primary)}
@media (max-width:860px){.csmeta{grid-template-columns:repeat(2,1fr);gap:18px}}
.cshero{position:relative;margin:clamp(28px,3vw,44px) 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-sand)}
.cshero img{display:block;width:100%;height:auto;max-height:82svh;object-fit:contain}
.cshero.is-photo img{aspect-ratio:16/8;object-fit:cover;max-height:none}
.cshero figcaption{position:absolute;left:clamp(18px,2vw,32px);top:clamp(16px,1.8vw,28px);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,239,.9);text-shadow:0 1px 14px rgba(8,8,10,.8)}
.csbrief{padding:clamp(46px,6vw,96px) 0 0}
.csbrief .in{display:grid;grid-template-columns:.3fr .7fr;gap:clamp(24px,4vw,64px);align-items:start}
.csbrief p{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(24px,3vw,44px);line-height:1.18;margin:0;max-width:24ch;text-wrap:balance}
@media (max-width:860px){.csbrief .in{grid-template-columns:1fr;gap:18px}}
.hbar{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,36px)}
.hbar .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.csshift{padding:clamp(46px,6vw,96px) 0 0}
.csshift .cols{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,52px);align-items:stretch}
.csshift .before,.csshift .after{border-top:1px solid var(--border-subtle);padding-top:clamp(16px,1.8vw,24px);position:relative}
.csshift .after::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:1px;background:var(--lime-500)}
.csshift .k{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.csshift .after .k{color:var(--text-accent)}
.csshift p{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(20px,2.3vw,34px);line-height:1.18;margin:0;max-width:24ch}
.csshift .before p{color:var(--text-muted)}
.csshift .arrow{align-self:center;font-family:var(--font-mono);font-size:clamp(18px,2vw,28px);color:var(--lime-500)}
@media (max-width:760px){.csshift .cols{grid-template-columns:1fr}.csshift .arrow{transform:rotate(90deg)}}
.csdark{position:relative;overflow:hidden;background:var(--ink-900);color:var(--paper);margin-top:clamp(46px,6vw,96px);padding:clamp(48px,6vw,104px) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.csdark::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(244,244,239,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,239,.045) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(120% 70% at 15% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(120% 70% at 15% 0%,#000 20%,transparent 70%)}
.csdark>.wrap{position:relative;z-index:2}
.csteps{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0}
.csteps li{display:grid;grid-template-columns:80px .9fr 1.5fr;gap:clamp(18px,2.4vw,36px);align-items:baseline;padding:clamp(22px,2.6vw,36px) 0;border-top:1px solid rgba(244,244,239,.16)}
.csteps .n{font-family:var(--font-mono);font-size:13px;color:var(--lime-500)}
.csteps h3{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(20px,2vw,28px);line-height:1.14;margin:0;color:var(--paper)}
.csteps p{font-size:16px;line-height:1.62;color:#B4B4BE;margin:0;max-width:50ch}
@media (max-width:760px){.csteps li{grid-template-columns:48px 1fr}.csteps p{grid-column:2}}
.csquote{margin:clamp(56px,8vw,130px) 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.csquote .qm{font-family:var(--font-display);font-size:clamp(56px,9vw,120px);line-height:.4;color:var(--lime-500);height:.42em}
.csquote blockquote{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(32px,5.6vw,84px);line-height:1.06;margin:clamp(26px,3vw,44px) 0 0;color:var(--paper);max-width:17ch;text-wrap:balance}
.csquote .rule{display:block;width:40px;height:1px;background:rgba(244,244,239,.3);margin-top:clamp(28px,3.2vw,44px)}
.csquote figcaption{margin-top:20px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8E8E98}
.csres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,56px);margin-top:36px;padding-top:36px;border-top:1px solid rgba(244,244,239,.16)}
.csres b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(50px,7vw,100px);line-height:.88;color:var(--paper);font-variant-numeric:tabular-nums}
.csres b i{font-style:normal;color:var(--lime-500)}
.csres span{display:block;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:#B4B4BE;margin-top:16px;max-width:22ch}
@media (max-width:760px){.csres{grid-template-columns:1fr;gap:26px}}
.csdeliv{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(28px,4vw,72px);align-items:start}
.csdeliv ul{list-style:none;margin:0;padding:0}
.csdeliv li{display:flex;align-items:center;gap:16px;padding:clamp(15px,1.6vw,22px) 0;border-top:1px solid var(--border-subtle);transition:padding-left .45s cubic-bezier(.16,1,.3,1)}
.csdeliv li:hover{padding-left:10px}
.csdeliv li .n{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);width:30px;flex:none}
.csdeliv li .t{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(19px,2vw,26px);line-height:1.15}
@media (max-width:860px){.csdeliv{grid-template-columns:1fr}}

/* ---------- case gallery: an editorial composition, never a crop ---------- */
.cstack{display:grid;gap:clamp(40px,6vw,120px);margin-top:clamp(8px,1vw,16px)}
.gfr{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-sand)}
.gfr img{display:block;width:100%;height:auto}
.gcap{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;margin-top:13px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.gcap b{font-weight:400;color:var(--text-accent)}
.gcap .nm{color:var(--text-primary)}

/* 01 · full bleed — breaks the wrap, edge to edge */
.g-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.g-full .gfr{border-radius:0;border-left:0;border-right:0;display:flex;justify-content:center;background:var(--surface-sand)}
.g-full .gfr img{max-height:84svh;width:auto;max-width:100%}
.g-full .gcap{padding:0 clamp(20px,6vw,96px)}

/* 02 · offset duo — the second piece drops */
.g-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,52px);align-items:start}
.g-duo figure:nth-child(2){margin-top:clamp(28px,6vw,110px)}

/* 03 · panel — the piece sits on a sand wall with the index in display type */
.g-panel{display:grid;grid-template-columns:minmax(130px,.18fr) minmax(0,.82fr);gap:clamp(18px,2.6vw,46px);align-items:center;background:var(--surface-sand);border:1px solid var(--border-subtle);border-radius:12px;padding:clamp(22px,3.4vw,62px)}
.g-panel .side{display:flex;flex-direction:column;gap:10px}
.g-panel .side b{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.4vw,74px);line-height:.92;color:var(--text-accent)}
.g-panel .side span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);max-width:16ch}
.g-panel .gfr{background:var(--sand-050);box-shadow:var(--shadow-sm)}
@media (max-width:760px){.g-panel{grid-template-columns:1fr}.g-panel .side{flex-direction:row;align-items:baseline;gap:14px}}

/* 04 · dark stage — one piece, held in ink */
.g-stage{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;background:var(--ink-900);padding:clamp(34px,5vw,90px) clamp(20px,6vw,96px);overflow:hidden}
.g-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(244,244,239,.04) 1px,transparent 1px);background-size:calc(100%/6) 100%}
.g-stage .hold{position:relative;max-width:min(1100px,80%);margin:0 auto;display:flex;justify-content:center}
.g-stage .hold img{max-height:76svh;width:auto;max-width:100%}
.g-stage .gfr{border-color:rgba(244,244,239,.18);background:#0F0F12;box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.g-stage .gcap{color:#8E8E98;max-width:min(1100px,80%);margin-left:auto;margin-right:auto}
.g-stage .gcap .nm{color:var(--paper)}
@media (max-width:760px){.g-stage .hold,.g-stage .gcap{max-width:none}}

/* 05 · wide right — the piece hangs right, caption in the gutter */
.g-hang{display:grid;grid-template-columns:minmax(0,.24fr) minmax(0,.76fr);gap:clamp(18px,2.6vw,48px);align-items:end}
.g-hang .gutter{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.g-hang .gutter b{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,40px);line-height:1;color:var(--text-primary)}
.g-hang .gutter span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.g-hang .gutter i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--text-accent)}
@media (max-width:760px){.g-hang{grid-template-columns:1fr}}

#view-case .cshero{overflow:hidden}
#view-case .cshero.is-photo img{height:112%;margin-top:-6%;will-change:transform}
@media (prefers-reduced-motion:reduce){#view-case .cshero.is-photo img{height:auto;margin-top:0}}

/* 06 · triptych — three small pieces in a row (launch kit) */
.g-trip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);align-items:start}
.g-trip figure:nth-child(2){margin-top:clamp(16px,3vw,54px)}
.g-trip figure:nth-child(3){margin-top:clamp(32px,6vw,108px)}
@media (max-width:760px){.g-trip{grid-template-columns:1fr}.g-trip figure{margin-top:0 !important}}

/* 07 · slide — a deck page, numbered in the rail (investor round) */
.g-slide{display:grid;grid-template-columns:minmax(96px,.14fr) minmax(0,.86fr);gap:clamp(16px,2.4vw,40px);align-items:start;border-top:1px solid var(--border-subtle);padding-top:clamp(16px,2vw,26px)}
.g-slide .rail2{display:flex;flex-direction:column;gap:8px;position:sticky;top:clamp(96px,11vh,130px)}
.g-slide .rail2 b{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--text-accent)}
.g-slide .rail2 span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);max-width:14ch;line-height:1.5}
@media (max-width:760px){.g-slide{grid-template-columns:1fr}.g-slide .rail2{position:static;flex-direction:row;align-items:baseline;gap:12px}}