/* ============================================================
   DK VISUALS v2 — scenes
   Pinned scroll scenes get --p (0..1) from js/v2-scroll.js
   ============================================================ */

.pin{position:relative}
.pin-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

.wrap{max-width:1640px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}

/* section header pattern */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:clamp(30px,5vh,54px)}
.sec-title{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.5vw,104px);line-height:1.02;letter-spacing:.01em}

/* ============================================================
   PROLOOG — hero
   ============================================================ */
#proloog .pin-stick{background:#000}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img,.hero-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media{transform:scale(calc(1 + var(--p,0)*.12));filter:brightness(calc(1 - var(--p,0)*.55))}
.hero-grad{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(4,4,3,.92) 0%,rgba(4,4,3,.25) 34%,rgba(4,4,3,0) 60%),
             linear-gradient(to bottom,rgba(4,4,3,.5),transparent 26%)}
.hero-inner{position:absolute;left:0;right:0;bottom:clamp(86px,13vh,150px);z-index:3;
  padding:0 clamp(20px,4vw,52px)}
.hero-kicker{font-family:var(--mono);font-size:clamp(9px,1vw,11.5px);letter-spacing:.42em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(14px,2.4vh,26px)}
.hero-kicker b{color:var(--accent);font-weight:400}
.hero-title{font-family:var(--serif);font-weight:500;line-height:.92;letter-spacing:.005em;
  font-size:clamp(64px,13.5vw,218px)}
.hero-title .l2{display:block;text-align:right;font-style:italic;font-weight:400;color:var(--ink);
  margin-top:clamp(2px,.6vh,8px)}
.hero-title .l1>span{transform:translateY(0)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(18px,3vh,34px)}
.hero-sub{max-width:430px;font-size:clamp(13.5px,1.15vw,16px);color:var(--ink-2);line-height:1.65}
.hero-coords{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;text-align:right;line-height:2}
.hero-coords b{color:var(--ink-2);font-weight:400}
@media(max-width:760px){ .hero-row{flex-direction:column;align-items:flex-start} .hero-coords{text-align:left} }

/* parallax inside via --p: title drifts up faster than media */
.hero-inner{transform:translateY(calc(var(--p,0)*-9vh));opacity:calc(1 - var(--p,0)*1.45)}

.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-3);
  opacity:calc(1 - var(--p,0)*3)}
.hero-scroll .sline{width:1px;height:44px;background:var(--ink-3);overflow:hidden;position:relative}
.hero-scroll .sline::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--accent);
  animation:sline 2.2s var(--ease) infinite}
@keyframes sline{0%{top:-100%}55%{top:0}100%{top:100%}}

/* hero entrance — gated on loader finish */
body.loaded .hero-title .l1>span{transform:translateY(0);transition-delay:.45s}
body.loaded .hero-title .l2>span{transform:translateY(0);transition-delay:.62s}
@keyframes heroFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroFadeO{from{opacity:0}to{opacity:1}}
body.loaded .hero-kicker{animation:heroFade 1.1s var(--ease) .95s backwards}
body.loaded .hero-sub{animation:heroFade 1.1s var(--ease) 1.15s backwards}
body.loaded .hero-coords{animation:heroFade 1.1s var(--ease) 1.3s backwards}
body.loaded .hero-fno{animation:heroFadeO 1.2s ease 1.5s backwards}
body.loaded .hero-scroll{animation:heroFadeO 1.2s ease 1.7s backwards}
body:not(.loaded) .hero-kicker,body:not(.loaded) .hero-sub,body:not(.loaded) .hero-coords,
body:not(.loaded) .hero-fno,body:not(.loaded) .hero-scroll{opacity:0}

/* hero frame counter (top-left under nav) */
.hero-fno{position:absolute;top:clamp(86px,12vh,130px);left:clamp(20px,4vw,52px);z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--ink-3);text-transform:uppercase;line-height:2.1;
  opacity:calc(1 - var(--p,0)*2.5)}
.hero-fno b{color:var(--accent);font-weight:400}

/* ============================================================
   MANIFESTO — scrubbed word reveal
   ============================================================ */
#visie .pin-stick{display:flex;align-items:center;background:var(--bg)}
.man-inner{max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,60px);width:100%}
.man-label{margin-bottom:clamp(24px,4.5vh,46px)}
.man-text{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.9vw,76px);line-height:1.22;letter-spacing:.005em}
.man-text .mword{opacity:.13;transition:opacity .45s ease}
.man-text .mword.on{opacity:1}
.man-text em .mword,.man-text .mword.em{color:var(--accent)}
.man-meta{display:flex;gap:clamp(30px,6vw,90px);margin-top:clamp(30px,6vh,60px);
  opacity:calc((var(--p,0) - .72)*5)}
.man-meta .n{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.8vw,26px);color:var(--ink)}
.man-meta .l{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}

/* ============================================================
   DE OVERSTEEK — fullscreen globe flight
   ============================================================ */
#oversteek .pin-stick{background:radial-gradient(ellipse 90% 70% at 50% 58%,#0d0c09 0%,#050504 70%)}
.glb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#globe{width:min(135vh,135vw);height:min(135vh,135vw);max-width:none;opacity:0;transition:opacity 1.2s ease;
  transform:translateY(12vh) scale(calc(.92 + var(--p,0)*.3))}
.glb-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.glb-tag{position:absolute;top:clamp(86px,12vh,130px);left:0;right:0;text-align:center}
.glb-tag .ct{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent)}
.glb-tag h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,86px);line-height:1;margin-top:14px}
.glb-tag h2 em{color:var(--ink)}
/* departure / arrival cards */
.glb-end{position:absolute;bottom:clamp(120px,17vh,170px);font-family:var(--mono);text-transform:uppercase;line-height:2}
.glb-end .city{font-family:var(--serif);font-style:italic;text-transform:none;font-size:clamp(20px,2.2vw,30px);letter-spacing:0;line-height:1.2;margin-bottom:6px;color:var(--ink)}
.glb-end .co{font-size:10px;letter-spacing:.24em;color:var(--ink-3)}
.glb-end .st{font-size:9.5px;letter-spacing:.3em;color:var(--accent)}
.glb-dep{left:clamp(20px,5vw,70px);opacity:calc(1.2 - var(--p,0)*2.2)}
.glb-arr{right:clamp(20px,5vw,70px);text-align:right;opacity:calc((var(--p,0) - .55)*3)}
/* distance readout */
.glb-dist{position:absolute;bottom:clamp(34px,6vh,60px);left:0;right:0;text-align:center}
.glb-dist .km{font-family:var(--mono);font-size:clamp(26px,3.4vw,44px);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.glb-dist .km i{font-style:normal;font-size:.5em;color:var(--ink-3);letter-spacing:.3em;margin-left:10px}
.glb-route{margin:14px auto 0;width:min(420px,56vw);height:1px;background:var(--line);position:relative}
.glb-route::after{content:"";position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0)*100%);background:var(--accent)}
.glb-route .plane{position:absolute;top:50%;left:calc(var(--p,0)*100%);transform:translate(-50%,-50%) rotate(90deg);
  color:var(--accent);font-size:13px;line-height:1}
.glb-hint{position:absolute;bottom:clamp(108px,16vh,168px);left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);
  opacity:0;transition:opacity .6s}
/* landing stamp */
.glb-stamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;
  pointer-events:none;opacity:calc((var(--p,0) - .93)*16)}
.glb-stamp .inner{text-align:center;background:rgba(5,5,4,.55);backdrop-filter:blur(4px);padding:26px 44px;border:1px solid var(--line)}
.glb-stamp .s1{font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent)}
.glb-stamp .s2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.2vw,56px);margin-top:10px;line-height:1.05}
.glb-stamp .s3{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--ink-3);margin-top:12px;text-transform:uppercase}
/* dim hud near the end so the stamp owns the frame */
.glb-tag,.glb-dist{transition:opacity .3s}

/* ============================================================
   PARAMARIBO — pinned horizontal sequence
   ============================================================ */
#paramaribo .pin-stick{background:var(--bg)}
.htrack{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;
  gap:clamp(30px,5vw,80px);padding:0 clamp(20px,6vw,90px);will-change:transform}
.hcard{flex:0 0 auto;width:min(640px,78vw);align-self:center}
.hcard .ct{margin-bottom:18px}
.hcard h2{font-family:var(--serif);font-weight:500;font-size:clamp(54px,8.5vw,140px);line-height:.95}
.hcard p{color:var(--ink-2);max-width:440px;margin-top:22px;font-size:clamp(13.5px,1.1vw,16px);line-height:1.7}
.hcard .hint{margin-top:30px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}
.hcard .hint::after{content:"";width:54px;height:1px;background:var(--ink-3)}
.hframe{flex:0 0 auto;position:relative;height:min(66vh,640px);align-self:center}
.hframe.p{aspect-ratio:3/4}
.hframe.l{aspect-ratio:3/2;height:min(56vh,540px)}
.hframe .hf-media{width:100%;height:100%;overflow:hidden;position:relative}
.hframe img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform .2s linear;will-change:transform}
.hframe .no{position:absolute;top:-30px;left:0;font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--ink-3)}
.hframe figcaption{position:absolute;bottom:-44px;left:0;right:0;display:flex;justify-content:space-between;gap:14px}
.hframe figcaption .t{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink)}
.hframe figcaption .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.houtro{flex:0 0 auto;width:min(520px,70vw);align-self:center;text-align:left}
.houtro .q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.3}
.houtro .a{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}
.hmeta{position:absolute;left:clamp(20px,4vw,52px);bottom:clamp(22px,4.5vh,44px);z-index:4;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hmeta .tot{color:var(--ink-3)}
.hbar{position:absolute;right:clamp(20px,4vw,52px);bottom:clamp(28px,5vh,50px);z-index:4;width:min(280px,30vw);height:1px;background:var(--line)}
.hbar span{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--accent)}

/* ============================================================
   INTERLUDE — fullbleed quote
   ============================================================ */
.interlude{position:relative;height:120vh;overflow:clip}
.interlude img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform;
  filter:brightness(.62) saturate(.92)}
.interlude .iq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.interlude .iq blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(34px,5.4vw,84px);line-height:1.15;max-width:1100px;text-wrap:balance}
.interlude .ic{position:absolute;bottom:6vh;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   HET SPEL — scrubbed image wipes
   ============================================================ */
#spel .pin-stick{background:#000}
.spl-media{position:absolute;inset:0}
.spl-media .sframe{position:absolute;inset:0;overflow:hidden}
.spl-media .sframe img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.spl-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(4,4,3,.88),rgba(4,4,3,.12) 44%,transparent 65%)}
.spl-ui{position:absolute;left:clamp(20px,4vw,52px);right:clamp(20px,4vw,52px);bottom:clamp(40px,8vh,86px);z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.spl-ui h2{font-family:var(--serif);font-weight:500;font-size:clamp(56px,9vw,150px);line-height:.95}
.spl-ui .ct{margin-bottom:16px}
.spl-cap{text-align:right}
.spl-cap .scap{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,26px);min-height:1.4em;white-space:nowrap}
.spl-cap .scnt{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--ink-3);margin-top:10px;font-variant-numeric:tabular-nums}
@media(max-width:760px){ .spl-ui{flex-direction:column;align-items:flex-start} .spl-cap{text-align:left} }

/* ============================================================
   HET VELD — fullbleed chapter
   ============================================================ */
.veld{position:relative;height:110vh;overflow:clip}
.veld img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;filter:brightness(.6) saturate(.85)}
.veld .v-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(20px,4vw,52px) clamp(46px,9vh,100px)}
.veld h2{font-family:var(--serif);font-weight:500;font-size:clamp(56px,9vw,150px);line-height:.95}
.veld p{max-width:420px;color:var(--ink-2);margin-top:18px;line-height:1.7}
.veld .ct{margin-bottom:16px}

/* ============================================================
   MOMENTEN
   ============================================================ */
.mom{padding:clamp(90px,16vh,180px) 0}
.mom-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(34px,6vh,64px)}
.mom-grid figure{position:relative;overflow:hidden}
.mom-grid figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.mom-grid figure:hover img{transform:scale(1.05)}
.mom-grid .m1{grid-column:1/6;aspect-ratio:3/4}
.mom-grid .m2{grid-column:6/13;aspect-ratio:16/10;align-self:end}
.mom-grid .m3{grid-column:4/10;aspect-ratio:16/9;margin-top:clamp(14px,2vw,28px)}
.mom-grid .mcap{position:absolute;left:16px;bottom:14px;font-family:var(--serif);font-style:italic;font-size:17px;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
@media(max-width:760px){ .mom-grid .m1,.mom-grid .m2,.mom-grid .m3{grid-column:1/-1;aspect-ratio:3/2;margin-top:0} }

/* ============================================================
   ARCHIEF
   ============================================================ */
.arch{padding:clamp(90px,16vh,180px) 0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(26px,4vh,44px)}
.filters button{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);transition:.3s}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button.on{background:var(--ink);color:#000;border-color:var(--ink)}
.arch-grid{columns:3;column-gap:clamp(14px,1.6vw,24px)}
.arch-grid figure{position:relative;overflow:hidden;margin-bottom:clamp(14px,1.6vw,24px);break-inside:avoid;
  opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform 1s var(--ease)}
.arch-grid figure.in{opacity:1;transform:none}
.arch-grid figure.hide{display:none}
.arch-grid img{width:100%;transition:transform 1.3s var(--ease),filter .5s}
.arch-grid figure:hover img{transform:scale(1.045)}
.arch-grid .gcap{position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;display:flex;justify-content:space-between;gap:10px;
  background:linear-gradient(to top,rgba(4,4,3,.78),transparent);opacity:0;transition:opacity .4s}
.arch-grid figure:hover .gcap{opacity:1}
.arch-grid .gcap .t{font-family:var(--serif);font-style:italic;font-size:16px}
.arch-grid .gcap .c{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);align-self:center}
@media(max-width:1000px){.arch-grid{columns:2}}
@media(max-width:580px){.arch-grid{columns:1}}

/* ============================================================
   SHOWREEL
   ============================================================ */
.reel{padding:clamp(90px,16vh,180px) 0}
.reel-frame{position:relative;aspect-ratio:21/9;overflow:hidden;background:#000}
.reel-frame img{width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.04);transition:transform 1.6s var(--ease),opacity .6s}
.reel-frame:hover img{transform:scale(1);opacity:.7}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.reel-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:3}
.reel-play .pcircle{width:clamp(76px,8vw,110px);height:clamp(76px,8vw,110px);border:1px solid var(--ink-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.4s;background:rgba(4,4,3,.25);backdrop-filter:blur(3px)}
.reel-play .pcircle svg{width:26px;height:26px;fill:var(--ink)}
.reel-frame:hover .pcircle{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.reel-frame:hover .pcircle svg{fill:#000}
.reel-play .ptext{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.reel-cap{display:flex;justify-content:space-between;gap:14px;margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   DIENSTEN — index rows + floating preview
   ============================================================ */
.svc{padding:clamp(90px,16vh,180px) 0}
.svc-rows{border-top:1px solid var(--line)}
.svc-row{position:relative;display:grid;grid-template-columns:90px 1fr 1.1fr auto;gap:clamp(16px,3vw,44px);align-items:center;
  padding:clamp(26px,4.5vh,44px) 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.svc-row .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.svc-row h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,54px);line-height:1.05;transition:transform .5s var(--ease),color .4s}
.svc-row:hover h3{transform:translateX(12px);font-style:italic;color:var(--accent)}
.svc-row .sd{color:var(--ink-2);font-size:14.5px;line-height:1.65;max-width:520px}
.svc-row .sf{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}
.svc-row .sf span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.svc-row .ar{font-family:var(--mono);font-size:18px;color:var(--ink-3);transition:.4s}
.svc-row:hover .ar{color:var(--accent);transform:translate(4px,-4px)}
.svc-thumb{position:fixed;z-index:6600;width:min(300px,26vw);aspect-ratio:4/3;overflow:hidden;pointer-events:none;
  transform:translate(-50%,-50%) scale(.85) rotate(-3deg);opacity:0;transition:opacity .35s,transform .45s var(--ease)}
.svc-thumb.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
.svc-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){ .svc-row{grid-template-columns:50px 1fr auto} .svc-row .sd-wrap{display:none} .svc-thumb{display:none} }

/* ============================================================
   OVER
   ============================================================ */
.about{padding:clamp(90px,16vh,180px) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(34px,6vw,110px);align-items:center}
.about-portrait{position:relative;overflow:hidden;aspect-ratio:3/4}
.about-portrait img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease)}
.about-portrait:hover img{transform:scale(1.02)}
.about-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.6vw,58px);line-height:1.12;margin:18px 0 26px}
.about-body p{color:var(--ink-2);line-height:1.75;max-width:560px;margin-bottom:18px;font-size:15px}
.about-sign{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--accent);margin-top:26px}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.about-tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);padding:7px 13px;border-radius:999px}
@media(max-width:860px){ .about-grid{grid-template-columns:1fr} .about-portrait{max-width:440px} }

/* ============================================================
   EPILOOG — contact
   ============================================================ */
.epi{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;overflow:clip;
  background:var(--bg-2)}
.epi-bg{position:absolute;inset:0;opacity:.16}
.epi-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.epi-grad{position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,transparent 36%,rgba(4,4,3,.86) 100%)}
.epi .wrap{position:relative;z-index:2}
.epi-top{padding-top:clamp(100px,17vh,190px)}
.epi-big{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7.6vw,128px);line-height:1.02;max-width:1200px;
  margin-top:22px;text-wrap:balance}
.cmail{display:inline-flex;align-items:center;gap:18px;margin-top:clamp(30px,5.5vh,56px);
  font-family:var(--mono);font-size:clamp(14px,1.7vw,22px);letter-spacing:.08em;color:var(--ink);
  border-bottom:1px solid var(--ink-3);padding-bottom:10px;transition:border-color .4s,color .4s}
.cmail:hover{color:var(--accent);border-color:var(--accent)}
.cmail svg{width:24px;height:24px;stroke:currentColor;fill:none}
.epi-soc{display:flex;gap:clamp(18px,3vw,40px);margin-top:clamp(26px,4.5vh,46px)}
.epi-soc a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
.epi-soc a:hover{color:var(--accent)}
.epi-soc .ar{color:var(--ink-3);margin-left:5px}
/* marquee */
.marq{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(14px,2.4vh,24px) 0;margin-top:clamp(50px,9vh,100px)}
.marq .mtrack{display:flex;gap:0;width:max-content;animation:marq 26s linear infinite}
.marq span{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,52px);
  white-space:nowrap;color:var(--ink-2);padding-right:18px}
.marq span b{font-weight:400;color:var(--accent);padding:0 22px;font-style:normal;font-family:var(--mono);font-size:.45em;vertical-align:middle;letter-spacing:.3em}
@keyframes marq{to{transform:translateX(-50%)}}
footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px clamp(20px,4vw,52px) 30px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
footer .ftag{display:flex;align-items:center;gap:12px}
footer .ftag img{height:38px;opacity:.72}
@media(max-width:640px){ footer{flex-direction:column;align-items:flex-start;gap:10px} }

@media (prefers-reduced-motion: reduce){
  .marq .mtrack{animation:none}
  .hero-scroll .sline::after{animation:none}
}