/* ==========================================================
   SIDDU — Version 2 ("film cut")
   Designed & developed by Craftive Media · © 2026
   ========================================================== */
:root {
  --bg: #0b0d11;
  --ink: #f1ece4;
  --cream: #f3e6d3;
  --dim: #8d8a86;
  --line: rgba(241, 236, 228, .14);
  --red: #e8401c;
  --red2: #c42a12;
  --amber: #f0a640;
  --gold: #e3a33a;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --quint: cubic-bezier(.22, 1, .36, 1);
  --inout: cubic-bezier(.76, 0, .24, 1);
  --anton: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --oswald: 'Oswald', 'Arial Narrow', sans-serif;
  --cinzel: 'Cinzel', 'Times New Roman', serif;
  --play: 'Playfair Display', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3vw, 44px);
  --hdr: 66px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--oswald); overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.is-loading, body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--red); color: #000; }
:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--expo), transform 1.2s var(--expo); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- loader ---------- */
.boot { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-content: center; justify-items: center; gap: 16px; transition: opacity .9s var(--quint), visibility 0s .9s; }
.boot__name { font: 400 clamp(2rem, 6vw, 3.4rem)/1 var(--anton); letter-spacing: .04em; color: var(--red); }
.boot__bar { width: min(280px, 64vw); height: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.boot__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red2), var(--amber)); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--quint); }
.boot__label { display: flex; gap: 18px; font: 500 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.boot__label b { color: var(--ink); font-weight: 500; }
body.is-ready .boot { opacity: 0; visibility: hidden; }

/* ---------- grain + cursor ---------- */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; background-size: 180px; animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 20% { transform: translate(-4%,3%) } 40% { transform: translate(3%,-2%) } 60% { transform: translate(-2%,-4%) } 80% { transform: translate(4%,2%) } 100% { transform: translate(0,0) } }
.cursor-ring, .cursor-dot { display: none; }
body.fine .cursor-ring, body.fine .cursor-dot { display: block; position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(255,255,255,.7); transition: width .45s var(--expo), height .45s var(--expo), margin .45s var(--expo), background .3s; }
body.cursor-hover .cursor-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(255,255,255,.12); }

/* ---------- header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--hdr);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: linear-gradient(to bottom, rgba(8,9,12,.85), rgba(8,9,12,0));
}
.hdr > * { opacity: 0; transform: translateY(-10px); transition: opacity 1s var(--expo), transform 1s var(--expo); }
.play .hdr > * { opacity: 1; transform: none; transition-delay: 4.4s; }
.hdr__logo { display: flex; align-items: center; gap: 12px; justify-self: start; }
.hdr__logo b { font: 400 1.5rem/1 var(--anton); letter-spacing: .04em; color: var(--ink); }
.hdr__logo span { display: grid; gap: 2px; font: 500 .44rem/1 var(--oswald); letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.hdr__nav { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.hdr__nav a { font: 500 .62rem/1 var(--oswald); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.hdr__nav a:first-child, .hdr__nav a:hover { color: var(--ink); }
.hdr__side { justify-self: end; display: grid; gap: 3px; text-align: right; font: 500 .5rem/1 var(--oswald); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.hdr__menu { display: none; justify-self: end; align-items: center; gap: 12px; cursor: pointer; background: rgba(8,9,12,.5); border: 1px solid var(--line); border-radius: 100px; padding: 10px 15px 10px 17px; font: 500 .62rem/1 var(--oswald); letter-spacing: .2em; text-transform: uppercase; }
.hdr__menu .bars { display: grid; gap: 5px; }
.hdr__menu .bars i { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .6s var(--expo); }
.menu-open .hdr__menu .bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .hdr__menu .bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.hdr__rule { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; width: calc(100% - 2 * var(--gutter)); height: 2px; opacity: 1 !important; transform: none !important; }
.hdr__rule path { stroke: var(--line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--quint); }
.play .hdr__rule path { stroke-dashoffset: 0; transition-delay: 4.2s; }

.menu {
  position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--hdr) + 36px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 90% 55% at 85% 0%, #3a0c05, transparent 70%), #0b0d11;
  clip-path: circle(0px at calc(100% - 50px) 33px); visibility: hidden;
  transition: clip-path .8s var(--inout), visibility 0s .8s;
}
.menu-open .menu { clip-path: circle(160vmax at calc(100% - 50px) 33px); visibility: visible; transition: clip-path 1s var(--inout), visibility 0s; }
.menu__links li { opacity: 0; transform: translateY(40px); transition: opacity .4s, transform .6s var(--expo); }
.menu-open .menu__links li { opacity: 1; transform: none; transition: opacity .8s var(--expo), transform 1s var(--expo); transition-delay: calc(.22s + var(--i) * .06s); }
.menu__links a { display: block; font: 400 clamp(3rem, 15vw, 5.4rem)/1.02 var(--anton); text-transform: uppercase; }
.menu__mail { font: italic 600 clamp(1.2rem, 6vw, 1.7rem)/1.2 var(--play); color: var(--amber); }

/* side text columns shared by the scenes */
.side { position: absolute; z-index: 30; display: grid; gap: .55em; pointer-events: none; font: 500 .58rem/1.2 var(--oswald); letter-spacing: .3em; text-transform: uppercase; color: rgba(241,236,228,.38); }
.side--l { left: var(--gutter); top: 40%; }
.side--l2 { left: var(--gutter); top: calc(var(--hdr) + 66px); }
.side--r { right: var(--gutter); top: 60%; text-align: right; }
.side--foot { left: var(--gutter); bottom: calc(30px + env(safe-area-inset-bottom)); }
.side--red { color: var(--red); }
.side--amber { color: var(--amber); }

/* ---------- 01 · hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 600px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, #252830 0%, #13151a 55%, #0b0d11 100%);
}
.hero::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.65) 100%); }
.hero__fx, .hero__word { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fx { z-index: 1; }
.hero__word { z-index: 2; will-change: transform; }
.hero__welcome {
  position: absolute; z-index: 5; left: 0; right: 0; top: var(--welT, 30%); transform: translateY(calc(-100% - 14px));
  text-align: center; white-space: nowrap; font: 700 clamp(.78rem, 1.4vw, 1.1rem)/1 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity 1s var(--expo) 2.7s;
}
.hero__welcome::before, .hero__welcome::after { content: '•••'; color: var(--red); letter-spacing: .1em; margin: 0 .9em; }
.play .hero__welcome { opacity: 1; }
.hero__fig { position: absolute; z-index: 3; left: 50%; bottom: 0; height: min(76svh, 124vw); aspect-ratio: 719 / 1319; transform-origin: 50% 100%; transform: translateX(-50%); opacity: 0; will-change: transform, opacity; pointer-events: none; }
.hero__fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%); mask-image: linear-gradient(to top, transparent 0%, #000 20%); }

.chip { position: absolute; z-index: 5; white-space: nowrap; font: 700 .62rem/1 var(--oswald); letter-spacing: .22em; text-transform: uppercase; opacity: 0; transition: opacity .8s var(--expo) 3.1s, transform 1s var(--expo) 3.1s; }
.chip--main { left: var(--wmL, 10%); top: var(--wmB, 70%); transform: translate(-12px, -150%); background: #f1ece4; color: #0b0d11; padding: .6em .9em; }
.chip--main::before, .chip--main::after { content: '•'; margin: 0 .5em; }
.chip--side { left: var(--wmR, 90%); top: var(--wmT, 30%); transform: translate(calc(-100% + 12px), 60%); border: 1px solid rgba(255,255,255,.65); color: #fff; padding: .45em .7em; background: rgba(0,0,0,.35); transition-delay: 3.25s; }
.play .chip { opacity: 1; }
.play .chip--main { transform: translate(0, -150%); }
.play .chip--side { transform: translate(-100%, 60%); }

.hero__furn { position: absolute; inset: 0; z-index: 4; pointer-events: none; will-change: transform; }
.tri { position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: 24px; opacity: 0; transition: opacity 1s var(--expo) 3.4s; }
.tri i { display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff; }
.tri--l { left: calc(var(--gutter) + 6px); }
.tri--r { right: calc(var(--gutter) + 6px); gap: 28px; }
.tri--r i { border-top-width: 4px; border-bottom-width: 4px; border-left-width: 6px; border-left-color: rgba(255,255,255,.7); }
.dotgrid { position: absolute; right: calc(var(--gutter) + 6px); bottom: 13%; width: 136px; height: 22px; background: radial-gradient(circle, #fff 2.3px, transparent 2.9px) 0 0 / 17px 11px; opacity: 0; transition: opacity 1s var(--expo) 3.6s; }
.play .tri, .play .dotgrid { opacity: 1; }
.hero__scroll { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); opacity: 0; transition: opacity 1s 4.6s; }
.hero__scroll i { display: block; width: 1px; height: 38px; background: linear-gradient(var(--red), transparent); animation: drip 2.2s var(--quint) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0) } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }
.play .hero__scroll { opacity: 1; }

/* ---------- pinned scenes ---------- */
.scene { position: relative; }
.pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.universe { height: 330svh; }
.journey { height: 380svh; }
.work { height: 380svh; }
.finale { height: 320svh; }

/* ---------- 02 · The Creative Universe ---------- */
.universe .pin { background: radial-gradient(ellipse 55% 60% at 50% 64%, #2c0f07 0%, #120b0a 45%, #08090c 78%); }
.un__back, .un__front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.un__back { z-index: 5; }
.un__front { z-index: 15; }
.un__fig { position: absolute; z-index: 10; left: 50%; bottom: 0; height: min(66svh, 104vw); aspect-ratio: 819 / 1369; transform: translateX(-50%); pointer-events: none; will-change: transform; }
.un__fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.un__world { position: absolute; inset: 0; pointer-events: none; }
.un__title { position: absolute; z-index: 30; left: 50%; top: calc(var(--hdr) + 22px); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; text-align: center; pointer-events: none; width: min(560px, 90vw); }
.un__scene { font: 500 .55rem/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--dim); }
.un__title h2 { font: 700 clamp(1.5rem, 3vw, 2.7rem)/1.08 var(--cinzel); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-shadow: 0 4px 30px rgba(0,0,0,.9); }
.un__title p { font: italic 600 clamp(.82rem, 1.1vw, 1rem)/1.3 var(--play); color: rgba(243,230,211,.7); }

.tile { --ts: 100px; position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 10px; pointer-events: auto; will-change: transform, opacity; }
.tile__card {
  position: relative; overflow: hidden; width: var(--ts); aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center;
  background: linear-gradient(150deg, #2e2724 0%, #15110f 55%, #0a0807 100%); border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -12px 26px rgba(0,0,0,.55), 6px 8px 0 -2px #0c0908, 0 26px 50px rgba(0,0,0,.7);
  transition: transform .6s var(--expo), box-shadow .6s var(--expo);
}
.tile__card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.17) 0%, transparent 40%); }
.tile__card::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: -45%; height: 75%; background: radial-gradient(ellipse at 50% 100%, rgba(255,90,40,.4), transparent 70%); }
.tile__mark { position: relative; z-index: 1; font: 700 calc(var(--ts) * .36)/1 var(--oswald); color: var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.tile__icon { position: relative; z-index: 1; width: 46%; height: 46%; color: var(--c); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent)); }
.tile__icon svg { display: block; width: 100%; height: 100%; }
.tile__name { font: 500 .66rem/1 var(--oswald); letter-spacing: .1em; color: var(--ink); white-space: nowrap; text-shadow: 0 2px 10px #000; }
.tile__pill { display: block; white-space: nowrap; padding: .8em 1.2em; border-radius: 100px; font: 500 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1px solid rgba(255,138,92,.32); background: rgba(14,11,9,.72); }
.tile--cube { pointer-events: none; }
.tile--cube .cube { width: 38px; aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg, #3b302b, #120e0c 70%); border: 1px solid rgba(255,255,255,.08); box-shadow: 5px 6px 0 -1px #0b0807, 0 14px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); transform: rotate(var(--rot, 20deg)); }

/* ---------- 03 · A Journey Through Time ---------- */
.journey .pin { background: radial-gradient(ellipse 55% 40% at 46% 100%, #3d1b08 0%, transparent 70%), radial-gradient(ellipse 45% 45% at 76% 8%, #21160a 0%, transparent 70%), linear-gradient(#0f1015, #0b0a0c); }
.jr__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.jr__fig { position: absolute; z-index: 4; left: 46%; bottom: 2.5%; height: 25svh; aspect-ratio: 819 / 1369; transform: translateX(-50%); pointer-events: none; }
.jr__fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.jr__cards { position: absolute; inset: 0; z-index: 3; perspective: 1100px; pointer-events: none; }
.jcard {
  --cw: clamp(116px, 10.6vw, 176px);
  position: absolute; left: 0; top: 0; width: var(--cw); pointer-events: auto; cursor: pointer; text-align: left;
  background: #15110e; border: 1px solid rgba(240,166,64,.22); box-shadow: 0 22px 40px rgba(0,0,0,.65);
  transition: border-color .5s, box-shadow .5s; will-change: transform;
}
.jcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.78); transition: filter .5s; }
.jcard__b { display: grid; gap: .28em; padding: .6em .7em .75em; }
.jcard__y { font: 700 .92rem/1 var(--oswald); color: var(--cream); }
.jcard__t { font: 500 .5rem/1.2 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.jcard__x { font: 400 .52rem/1.35 var(--oswald); color: var(--dim); }
.jcard.is-on { border-color: #ff7a2e; box-shadow: 0 0 0 1px #ff7a2e, 0 0 44px rgba(255,110,40,.45), 0 22px 40px rgba(0,0,0,.65); }
.jcard.is-on img { filter: none; }
.jr__title { position: absolute; z-index: 6; left: var(--gutter); top: calc(var(--hdr) + 26px); display: grid; gap: 24px; pointer-events: none; }
.jr__title h2 { font: 700 clamp(1.05rem, 1.9vw, 1.7rem)/1.18 var(--cinzel); letter-spacing: .34em; text-transform: uppercase; color: var(--cream); }
.jr__list { display: grid; gap: .6em; font: 500 .52rem/1 var(--oswald); letter-spacing: .3em; text-transform: uppercase; color: rgba(241,236,228,.42); }
.jr__list::before, .jr__list::after { content: ''; width: 22px; height: 1px; background: rgba(241,236,228,.4); }
.jr__now { position: absolute; z-index: 6; right: var(--gutter); bottom: calc(30px + env(safe-area-inset-bottom)); display: grid; gap: .45em; justify-items: end; text-align: right; max-width: 200px; pointer-events: none; }
.jr__now b { font: 700 1.2rem/1 var(--oswald); color: var(--amber); }
.jr__now span { font: 500 .56rem/1.3 var(--oswald); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.jr__now p { font: 400 .72rem/1.45 var(--oswald); color: var(--dim); }
.jr__now.flip { animation: flip .6s var(--expo); }
@keyframes flip { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 04 · Projects ---------- */
.work .pin { background: radial-gradient(ellipse 60% 38% at 50% 98%, #2c1506 0%, transparent 70%), #07080b; perspective: 1100px; perspective-origin: 50% 42%; }
.wk__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.wk__stage { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
/* note: no opacity / will-change: opacity on the ring — either would flatten the 3D wall */
.wk__ring { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.wcard {
  position: absolute; left: 0; top: 0; width: var(--w); pointer-events: auto; overflow: hidden; border-radius: 14px; backface-visibility: hidden; opacity: var(--wop, 1);
  background: linear-gradient(150deg, #1f1b1a 0%, #0d0c0c 100%); border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.wcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.1) 0%, transparent 35%); }
.wc-proj { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(var(--w) * .5); }
.wc-proj__b, .wc-big__b { display: grid; align-content: center; gap: 10px; padding: 18px; }
.wc-title { font: 700 1.45rem/1.02 var(--play); color: var(--cream); }
.wc-sub { font: 400 .62rem/1.45 var(--oswald); color: var(--dim); }
.wc-cta { justify-self: start; padding: .55em 1em; border-radius: 100px; background: var(--cream); color: #0b0d11; font: 700 .52rem/1 var(--oswald); letter-spacing: .2em; text-transform: uppercase; }
.wc-proj__img { background-size: cover; background-position: center; border-left: 1px solid rgba(255,255,255,.08); }
.wc-big { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(var(--w) * .5); }
.wc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
.wc-stats div { display: grid; align-content: center; gap: 4px; padding: 10px 12px; background: #110e0d; }
.wc-stats b { font: 400 1.35rem/1 var(--anton); color: var(--red); }
.wc-stats span { font: 500 .44rem/1.2 var(--oswald); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.wc-insta { display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #ffb24a 0%, #ff5a8f 38%, #8b5cf6 75%, #2a1658 100%); color: #fff; }
.wc-insta svg { width: 38%; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.wk__fig { position: absolute; z-index: 3; left: 50%; bottom: 7%; height: 26svh; aspect-ratio: 819 / 1369; transform-origin: 50% 100%; transform: translateX(-50%); pointer-events: none; will-change: transform; }
.wk__fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.wk__label { position: absolute; z-index: 30; left: var(--gutter); top: calc(var(--hdr) + 26px); font: 500 .62rem/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: #f5d34a; }

/* ---------- 05 · Finale ---------- */
.finale .pin { background: radial-gradient(ellipse 70% 70% at 50% 62%, #5c0d06 0%, #2a0604 42%, #0b0505 82%); }
.fn__fx, .fn__fog { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fn__fx { z-index: 1; }
.fn__fog { z-index: 4; }
.fn__fig { position: absolute; z-index: 3; left: 50%; bottom: 0; height: min(80svh, 124vw); aspect-ratio: 719 / 1319; transform: translateX(-50%); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.fn__fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.fn__txt { opacity: 0; }
.finale .side--l { top: calc(var(--hdr) + 30px); color: rgba(243,230,211,.65); }
.finale .side--r { top: calc(var(--hdr) + 30px); color: rgba(243,230,211,.5); }
.fn__quote { position: absolute; z-index: 6; left: var(--gutter); top: 45%; display: grid; gap: .5em; font: 500 .66rem/1.2 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--cream); pointer-events: none; }
.fn__quote::after { content: ''; width: 26px; height: 1px; margin-top: 10px; background: var(--cream); }
.fn__mark { position: absolute; z-index: 6; left: var(--gutter); bottom: 8%; display: grid; gap: .4em; padding-left: 12px; border-left: 1px solid var(--red); font: 500 .6rem/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--cream); pointer-events: none; }


/* ---------- 06 · the drop ---------- */
.drop { height: 240svh; }
.drop .pin { display: grid; place-items: center; background: #050303; }
.drop .pin::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.8) 100%); pointer-events: none; }
.dr__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr__quote { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); }
.dr__quote span { display: block; font: 900 clamp(3.2rem, 11vw, 10.5rem)/.9 'Big Shoulders Display', var(--anton); text-transform: uppercase; color: #efe8dd; will-change: transform, opacity, filter; }
.dr__quote em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; font-size: .95em; margin-right: .08em; color: var(--red); }
.dr__quote span:last-child:not(:first-child) { margin-top: .8em; font: italic 400 clamp(1.4rem, 3.4vw, 3rem)/1.1 'Instrument Serif', Georgia, serif; text-transform: none; }

/* ---------- contact strip ---------- */
.reach { display: grid; justify-items: center; gap: 22px; text-align: center; padding: clamp(80px, 14vh, 140px) var(--gutter); background: radial-gradient(ellipse 60% 70% at 50% 100%, #2a0805, transparent 70%), #050303; }
.reach__kicker { font: 500 .62rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.reach__avail { max-width: 46ch; color: var(--dim); font-size: clamp(.95rem, 1.3vw, 1.1rem); }
.reach__mail { font: italic 600 clamp(1.6rem, 4.4vw, 3.4rem)/1.15 var(--play); color: var(--cream); border-bottom: 1px solid var(--red); overflow-wrap: anywhere; transition: color .3s; }
.reach__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.reach__social a { display: inline-block; padding: .85em 1.2em; border: 1px solid var(--line); border-radius: 100px; font: 600 .6rem/1 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); transition: background .3s, color .3s, border-color .3s; }

/* wall cards: stats and credits */
.wc-stat, .wc-credit { display: grid; align-content: end; gap: 8px; min-height: calc(var(--w) * .62); padding: 16px; background: radial-gradient(circle at 80% 15%, rgba(232,64,28,.35), transparent 60%); }
.wc-stat b { font: 400 clamp(2rem, 3.4vw, 3rem)/1 var(--anton); color: var(--red); }
.wc-stat span, .wc-credit span { font: 500 .5rem/1.3 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.wc-credit h3 { font: 700 1.05rem/1.1 var(--play); color: var(--cream); }
.wc-credit { background: radial-gradient(circle at 80% 15%, rgba(240,166,64,.28), transparent 60%); }

.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; padding: 22px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: #08090b; border-top: 1px solid var(--line); font: 500 .6rem/1.5 var(--oswald); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.foot b { color: var(--ink); font-weight: 500; }

@media (hover: hover) {
  .tile:hover .tile__card { transform: translateY(-6px) scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 26px 50px rgba(0,0,0,.7), 0 0 44px color-mix(in srgb, var(--c) 45%, transparent); }
  .jcard:hover { border-color: rgba(255,122,46,.7); }
  .wcard:hover { border-color: rgba(240,166,64,.6); }
  .foot a:hover { color: var(--amber); }
  .reach__mail:hover { color: var(--red); }
  .reach__social a:hover { background: var(--cream); color: #0b0d11; border-color: var(--cream); }
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  :root { --hdr: 60px; }
  .hdr { grid-template-columns: 1fr auto; }
  .hdr__nav, .hdr__side { display: none; }
  .hdr__menu { display: inline-flex; }
  .tri, .dotgrid { display: none; }
  .side--r { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .hero__fig { height: 70svh; }
  .chip { font-size: .54rem; }
  .side--l, .side--l2 { display: none; }
  .un__fig { height: 54svh; }
  .tile { --ts: 64px; gap: 6px; }
  .tile__name { font-size: .52rem; }
  .tile__pill { font-size: .5rem; padding: .7em .95em; }
  .jr__title { gap: 12px; }
  .jr__title h2 { font-size: .9rem; letter-spacing: .26em; }
  .jr__list, .jr__now { display: none; }
  .jcard { --cw: 46vw; }
  .jcard__x { font-size: .62rem; }
  .jcard__t { font-size: .56rem; }
  .jr__fig { height: 16svh; left: 14%; }
  .wk__fig { height: 20svh; }
  .fn__quote { top: auto; bottom: 22%; }
  .fn__mark { bottom: 6%; }
  .finale .side--l { display: grid; }
  .foot { flex-direction: column; text-align: center; }
}

body.reduce *, body.reduce *::before, body.reduce *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
.wc-ctaart { display: grid; place-items: center; background: linear-gradient(150deg, #e8401c, #8f120b); border-left: 1px solid rgba(255,255,255,.08); }
.wc-ctaart b { font: 400 clamp(1.8rem, 3vw, 2.6rem)/.92 var(--anton); text-transform: uppercase; color: #f3e6d3; text-align: center; }