/* ============================================================
   MELODY VIBE — editorial / immersive landing
   Warm amber→copper→cream gradient diving into deep black.
   ============================================================ */

:root {
  /* warm palette (tweakable via JS-set vars) */
  --hero-top: oklch(0.44 0.175 33);
  --hero-mid: oklch(0.66 0.190 52);
  --hero-bot: oklch(0.905 0.070 84);
  --gold:    oklch(0.82 0.150 73);
  --amber:   oklch(0.74 0.170 58);
  --copper:  oklch(0.56 0.160 40);

  --ink:    oklch(0.135 0.012 52);
  --ink-2:  oklch(0.175 0.016 50);
  --ink-3:  oklch(0.235 0.018 52);
  --cream:  oklch(0.955 0.022 82);
  --cream-dim: oklch(0.80 0.030 80);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --anim: 0.8;          /* animation intensity 0..1 (set by tweak / scaled from 0-10) */
  --maxw: 1500px;
  --gut: clamp(20px, 5vw, 84px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  cursor: none;
}
@media (pointer: coarse) { body { cursor: auto; } }

::selection { background: var(--gold); color: var(--ink); }

img, image-slot { display: block; }

a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------------
   Custom cursor
---------------------------------------------------------------- */
.cur-dot, .cur-ring {
  position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.cur-dot { width: 7px; height: 7px; background: var(--cream); }
.cur-ring {
  width: 38px; height: 38px; border: 1px solid var(--cream);
  transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), opacity .25s, background .25s;
}
.cur-ring.hot { width: 64px; height: 64px; background: oklch(0.82 0.15 73 / 0.18); mix-blend-mode: normal; border-color: var(--gold); }
@media (pointer: coarse) { .cur-dot, .cur-ring { display: none; } }

/* light-particles canvas */
#fx-particles {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: .9;
}

/* ----------------------------------------------------------------
   Shared layout helpers
---------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.full { position: relative; width: 100%; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500;
}

.corner-label {
  position: absolute; z-index: 6;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.55; letter-spacing: .14em; text-transform: uppercase;
}
.corner-label b { font-weight: 700; display: block; font-size: 10px; opacity: .55; letter-spacing: .24em; }

/* reveal — base state is the VISIBLE end-state; entrance is applied via
   the Web Animations API in JS so a frozen timeline can never strand
   content at opacity:0. */
.rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1 !important; transform: none !important; } }

/* huge type tokens */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* ----------------------------------------------------------------
   Top utility bar
---------------------------------------------------------------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px var(--gut) 0;
  color: var(--cream);
}
.topbar .brand-mark {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  letter-spacing: -0.02em; text-transform: uppercase;
}
/* SVG logo lockup */
.brand-logo { display: flex; align-items: center; gap: 12px; }
.brand-logo svg { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 4px 14px oklch(0.72 0.16 70 / .45)); }
.brand-logo .bl-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-logo .bl-txt b { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(92deg, oklch(0.92 0.07 88), var(--gold) 55%, oklch(0.66 0.16 58)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-logo .bl-txt i { font-family: var(--font-mono); font-style: normal; font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--cream-dim); margin-top: 4px; }
@media (max-width: 560px) { .brand-logo .bl-txt i { display: none; } }
.topbar nav { display: flex; gap: 30px; }
.topbar nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; transition: opacity .2s; }
.topbar nav a:hover { opacity: 1; }
@media (max-width: 820px) { .topbar nav { display: none; } }

/* ================================================================
   HERO
================================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  background:
    radial-gradient(115% 85% at 76% 6%, oklch(0.70 0.17 62 / .40), transparent 56%),
    radial-gradient(95% 75% at 14% 102%, oklch(0.46 0.14 42 / .38), transparent 60%),
    linear-gradient(166deg, oklch(0.205 0.035 48) 0%, oklch(0.145 0.022 44) 52%, oklch(0.095 0.012 38) 100%);
  color: var(--cream);
  isolation: isolate;
}

.hero-watermark {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 130%; text-align: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(120px, 23vw, 420px); line-height: .8;
  letter-spacing: -0.03em; color: oklch(0.82 0.15 73 / 0.10);
  z-index: 1; pointer-events: none; user-select: none; white-space: nowrap;
  mix-blend-mode: screen;
}

.hero-photo {
  position: absolute; z-index: 2;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(46vw, 560px); height: min(82vh, 880px);
  --img-bottom-fade: 1;
}
.hero-photo {
  position: absolute; z-index: 3;
  right: clamp(12px, 4vw, 90px); left: auto; bottom: 0; transform: none;
  width: min(40vw, 480px); height: min(86vh, 880px);
  will-change: transform;
}
/* soft golden halo behind the portrait */
.hero-photo::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 86%; height: 70%; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.78 0.16 66 / .45), transparent 72%);
  filter: blur(14px); pointer-events: none;
}
.photo-frame {
  position: absolute; inset: 0;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  /* melt bottom + left + top edges into the dark hero */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 56%, transparent 99%),
    linear-gradient(to left, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 56%, transparent 99%),
    linear-gradient(to left, #000 76%, transparent 100%);
  mask-composite: intersect;
}
.photo-frame img, .photo-frame image-slot {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  /* warm grade: pull the pink room toward the site's amber/gold */
  filter: saturate(1.16) contrast(1.04) sepia(0.14) brightness(0.97) hue-rotate(-6deg);
}
/* color wash + edge blend so the photo reads as part of the scene */
.photo-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to top, var(--ink) 1%, transparent 30%),
    linear-gradient(to left, transparent 58%, oklch(0.13 0.03 42 / 0.55) 100%),
    radial-gradient(130% 90% at 72% 16%, transparent 42%, oklch(0.50 0.13 48 / 0.26) 100%);
}
.photo-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: oklch(0.62 0.15 56 / 0.16); mix-blend-mode: overlay;
}
/* placeholder look when no photo dropped yet */
.photo-frame.empty {
  background: linear-gradient(158deg, oklch(0.34 0.07 56), oklch(0.12 0.02 40));
  box-shadow: inset 0 0 0 1px oklch(0.82 0.15 73 / .25);
  border-radius: 18px 18px 0 0;
  display: grid; place-items: center;
}
.photo-frame.empty span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: oklch(0.85 0.06 80 / .6); text-align: center; padding: 0 20px;
}

.hero-grid {
  position: relative; z-index: 4; min-height: 100svh;
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(84px, 10vh, 116px) var(--gut) clamp(48px, 7vh, 90px);
}

.hero-head { width: 100%; }
.hero-title {
  font-size: clamp(38px, 6.6vw, 100px);
  line-height: 0.9;
  margin-top: clamp(8px, 3vh, 28px);
  max-width: none;
  position: relative;
}
.hero-title .l2 { color: var(--gold); }
.hero-title .dim { color: oklch(0.92 0.04 82 / 0.45); }

.hero-sub {
  position: relative; z-index: 5;
  max-width: 340px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5;
  color: var(--cream-dim); font-weight: 500; text-align: left;
}
.hero-sub strong { font-weight: 700; }

.hero-mid {
  position: relative; z-index: 5; margin-top: clamp(40px, 7vh, 84px);
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: clamp(28px, 5vw, 72px); flex-wrap: wrap;
}
.hero-col-r { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 340px; }
@media (min-width: 901px) {
  .hero-mid { max-width: 60%; }      /* stay clear of the portrait on the right */
  .hero-head { max-width: 78%; }
}
@media (max-width: 900px) {
  .hero-photo { opacity: .42; width: 64vw; right: -8vw; }
  .hero-title { max-width: 100%; }
  .hero-mid { gap: 26px; max-width: 100%; }
  .hero-col-r { align-items: flex-start; max-width: 100%; }
}

.hero-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); }
.hero-meta b { display: block; opacity: .5; font-weight: 700; font-size: 10px; letter-spacing: .22em; margin-bottom: 4px; }

.btn-date {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 17px 26px; border: none; border-radius: 100px; cursor: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  box-shadow: 0 16px 38px -14px oklch(0.82 0.15 73 / .6);
  overflow: hidden;
}
.btn-date::before {
  content: ""; position: absolute; inset: 0; background: var(--ink-2);
  transform: translateY(101%); transition: transform .4s cubic-bezier(.4,0,.1,1); z-index: 0;
}
.btn-date:hover::before { transform: translateY(0); }
.btn-date:hover { color: var(--cream); transform: translateY(-2px); }
.btn-date > * { position: relative; z-index: 1; }
.btn-date .arrow { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-size: 13px; transition: background .4s, color .4s; }
.btn-date:hover .arrow { background: var(--gold); color: var(--ink); }

/* ================================================================
   STAGED AUDIO PLAYER
================================================================ */
.player {
  position: relative; z-index: 5;
  width: min(420px, 86vw);
  background: oklch(0.16 0.02 50 / 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid oklch(0.95 0.05 80 / 0.16);
  border-radius: 22px; padding: 20px;
  color: var(--cream);
  box-shadow: 0 30px 80px -30px oklch(0.20 0.08 40 / 0.7);
}
.player-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.player-cover {
  width: 52px; height: 52px; border-radius: 12px; flex: none; overflow: hidden;
  background: linear-gradient(140deg, var(--amber), var(--copper));
  display: grid; place-items: center; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 22px;
}
.player-meta { min-width: 0; }
.player-meta .t { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta .a { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.player-live { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; opacity: .7; }
.player-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.player.playing .player-live .dot { animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100%{ opacity: .35; } 50% { opacity: 1; } }

.wave { width: 100%; height: 60px; display: block; margin: 4px 0 12px; }

.player-times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--cream-dim); margin-bottom: 14px; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pbtn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid oklch(0.95 0.05 80 / 0.2);
  background: transparent; color: var(--cream); display: grid; place-items: center; cursor: none;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
}
.pbtn:hover { transform: scale(1.08); border-color: var(--gold); }
.pbtn svg { width: 17px; height: 17px; }
.pbtn.play { width: 62px; height: 62px; background: var(--gold); color: var(--ink); border: none; box-shadow: 0 12px 30px -8px oklch(0.82 0.15 73 / .6); }
.pbtn.play:hover { transform: scale(1.06); }
.pbtn.play svg { width: 22px; height: 22px; }
.player-load { display: block; width: 100%; text-align: center; margin-top: 13px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); background: none; border: none; cursor: none; transition: color .2s; }
.player-load:hover { color: var(--gold); }

/* ================================================================
   DARK SECTIONS shell
================================================================ */
.sec { position: relative; background: var(--ink); padding-block: clamp(90px, 13vh, 180px); z-index: 2; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 56px; border-top: 1px solid oklch(0.95 0.04 80 / 0.12); padding-top: 22px; }
.sec-head .idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--cream-dim); }
.sec-head .idx b { color: var(--gold); font-weight: 500; }
.sec-head .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }

/* SIGNATURE — big editorial text */
.sig-text {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4.6vw, 74px); line-height: 1.02; letter-spacing: -0.025em;
  max-width: 18ch; color: var(--cream-dim); text-wrap: balance;
}
.sig-text .hl { color: var(--cream); }
.sig-text .gold { color: var(--gold); }
.sig-body { margin-top: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 820px){ .sig-body { grid-template-columns: 1fr; gap: 30px; } }
.sig-body p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; color: var(--cream-dim); max-width: 46ch; }
.sig-body p strong { color: var(--cream); font-weight: 600; }

/* ================================================================
   PRESTATIONS — numbered tracks w/ 3D tilt
================================================================ */
.tracks { display: flex; flex-direction: column; }
.track {
  position: relative; display: grid;
  grid-template-columns: 92px 1fr auto; align-items: center; gap: 28px;
  padding: 30px 30px; border-top: 1px solid oklch(0.95 0.04 80 / 0.13);
  transform-style: preserve-3d; transition: background .5s, transform .2s ease-out;
  cursor: none;
}
.track:last-child { border-bottom: 1px solid oklch(0.95 0.04 80 / 0.13); }
.track::after { content:""; position:absolute; inset:0; background: linear-gradient(100deg, oklch(0.74 0.17 58 / .14), transparent 60%); opacity:0; transition: opacity .5s; pointer-events:none; }
.track:hover::after { opacity: 1; }
.track .no { font-family: var(--font-mono); font-size: 13px; color: var(--gold); letter-spacing: .05em; transform: translateZ(30px); }
.track .body { transform: translateZ(40px); }
.track .name { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.6vw, 56px); letter-spacing: -0.02em; line-height: 1; transition: color .4s, transform .4s; color: var(--cream); }
.track:hover .name { transform: translateX(8px); }
.track .desc { font-size: 14.5px; line-height: 1.5; color: var(--cream-dim); max-width: 52ch; margin-top: 12px; }
.track .play-hint { transform: translateZ(50px); width: 54px; height: 54px; border-radius: 50%; border: 1px solid oklch(0.95 0.05 80 / 0.22); display: grid; place-items: center; color: var(--cream); transition: background .4s, color .4s, transform .4s; flex: none; }
.track:hover .play-hint { background: var(--gold); color: var(--ink); }
.track .play-hint svg { width: 18px; height: 18px; }
@media (max-width: 720px){
  .track { grid-template-columns: 54px 1fr; gap: 16px; padding: 22px 6px; }
  .track .play-hint { display: none; }
}

/* ================================================================
   REALISATIONS — listening gallery
================================================================ */
.real { background: var(--ink-2); }
.gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.disc {
  position: relative; border-radius: 18px; overflow: hidden; cursor: none;
  background: var(--ink-3); transform-style: preserve-3d; transition: transform .3s ease-out;
}
.disc image-slot { width: 100%; height: 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.disc:hover image-slot { transform: scale(1.05); }
.disc .veil { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.12 0.02 45 / .92) 4%, transparent 58%); z-index: 2; pointer-events: none; }
.disc .meta { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.disc .meta .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.015em; }
.disc .meta .s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 5px; }
.disc .pin { width: 44px; height: 44px; border-radius: 50%; background: oklch(0.16 0.02 50 / .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid oklch(0.95 0.05 80 / .25); display: grid; place-items: center; color: var(--cream); transition: background .35s, color .35s; flex: none; }
.disc:hover .pin { background: var(--gold); color: var(--ink); }
.disc .pin svg { width: 16px; height: 16px; }
.disc .tag-eq { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.disc .tag-eq i { width: 3px; background: var(--gold); border-radius: 2px; height: 30%; }
.disc:hover .tag-eq i { animation: eq .9s ease-in-out infinite; }
.disc:hover .tag-eq i:nth-child(2){ animation-delay:.15s } .disc:hover .tag-eq i:nth-child(3){ animation-delay:.3s } .disc:hover .tag-eq i:nth-child(4){ animation-delay:.45s }
@keyframes eq { 0%,100%{ height: 25% } 50%{ height: 95% } }
.g-tall { grid-column: span 5; aspect-ratio: 4/5; }
.g-wide { grid-column: span 7; aspect-ratio: 7/5; }
.g-half { grid-column: span 6; aspect-ratio: 16/10; }
.g-third { grid-column: span 4; aspect-ratio: 3/4; }
@media (max-width: 820px){
  .g-tall,.g-wide,.g-half,.g-third { grid-column: span 12; aspect-ratio: 16/11; }
}

/* ================================================================
   POURQUOI — figures + statements (warm band)
================================================================ */
.why {
  background:
    radial-gradient(100% 120% at 0% 0%, oklch(0.62 0.18 48 / .5), transparent 50%),
    linear-gradient(155deg, var(--copper), oklch(0.34 0.10 38));
  color: var(--cream);
}
.why .sec-head { border-color: oklch(0.95 0.06 80 / .22); }
.why .sec-head .idx b { color: var(--ink); }
.why-statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.2vw, 86px); line-height: .98; letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
.why-statement em { font-style: normal; color: oklch(0.20 0.05 40); }
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 72px; background: oklch(0.95 0.06 80 / .2); border: 1px solid oklch(0.95 0.06 80 / .2); }
@media (max-width: 720px){ .figs { grid-template-columns: 1fr; } }
.fig { background: oklch(0.40 0.12 40); padding: 38px 30px; }
.fig .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 92px); line-height: .9; letter-spacing: -0.04em; }
.fig .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; color: oklch(0.92 0.04 82 / .8); max-width: 22ch; }

/* ================================================================
   TEMOIGNAGES — editorial quotes
================================================================ */
.quote-wrap { display: flex; flex-direction: column; gap: clamp(60px, 9vh, 120px); }
.quote { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; }
@media (max-width: 720px){ .quote { grid-template-columns: 1fr; gap: 14px; } }
.quote .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); padding-top: 14px; }
.quote .who b { display: block; color: var(--gold); font-weight: 500; margin-bottom: 5px; }
.quote blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -0.022em; color: var(--cream); text-wrap: balance; }
.quote blockquote .muted { color: var(--cream-dim); }
.quote:nth-child(even) { grid-template-columns: 1fr 200px; }
.quote:nth-child(even) .who { order: 2; text-align: right; }
@media (max-width: 720px){ .quote:nth-child(even) { grid-template-columns: 1fr; } .quote:nth-child(even) .who { order: 0; text-align: left; } }

/* ================================================================
   CONTACT / CTA (warm bookend)
================================================================ */
.contact {
  position: relative; overflow: hidden;
  background: linear-gradient(200deg, var(--hero-bot) 0%, var(--hero-mid) 55%, var(--hero-top) 100%);
  color: var(--ink); padding-block: clamp(90px, 13vh, 170px);
}
.contact .cta-watermark { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(110px, 22vw, 380px); color: oklch(0.99 0.02 84 / .28); mix-blend-mode: soft-light; white-space: nowrap; pointer-events: none; z-index: 0; }
.contact .wrap { position: relative; z-index: 2; }
.cta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
@media (max-width: 880px){ .cta-grid { grid-template-columns: 1fr; gap: 40px; } }
.cta-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(42px, 7vw, 116px); line-height: .9; letter-spacing: -0.035em; text-wrap: balance; }
.cta-lead { margin-top: 26px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 38ch; color: oklch(0.24 0.04 42); font-weight: 500; }
.cta-direct { margin-top: 38px; display: flex; flex-direction: column; gap: 14px; }
.cta-direct a { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; }
.cta-direct a .ic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid oklch(0.20 0.04 40 / .35); display: grid; place-items: center; transition: background .3s, color .3s; }
.cta-direct a:hover .ic { background: var(--ink); color: var(--gold); }
.cta-direct a .ic svg { width: 16px; height: 16px; }
.cta-direct a b { font-weight: 700; text-transform: uppercase; }

/* form */
.form { background: oklch(0.16 0.02 50 / 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 24px; padding: clamp(26px, 3vw, 40px); color: var(--cream); box-shadow: 0 40px 90px -40px oklch(0.20 0.08 40 / .8); }
.form h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 22px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid oklch(0.95 0.05 80 / .22);
  color: var(--cream); font-family: var(--font-body); font-size: 16px; padding: 8px 0; outline: none; cursor: none;
  transition: border-color .3s; border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: oklch(0.6 0.02 80 / .5); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field select option { background: var(--ink-2); }
.field.row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field textarea { resize: none; min-height: 76px; }
.field.err input, .field.err textarea, .field.err select { border-color: oklch(0.62 0.2 28); }
.field .msg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: oklch(0.7 0.18 30); margin-top: 6px; display: none; }
.field.err .msg { display: block; }
.form-submit {
  width: 100%; margin-top: 8px; background: var(--gold); color: var(--ink); border: none; border-radius: 100px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 18px; cursor: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s;
}
.form-submit:hover { transform: translateY(-2px); }
.form-submit:disabled { opacity: .55; }
.form-done { text-align: center; padding: 26px 8px; }
.form-done .chk { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; margin: 0 auto 20px; }
.form-done .chk svg { width: 30px; height: 30px; }
.form-done h3 { margin-bottom: 10px; }
.form-done p { color: var(--cream-dim); font-size: 15px; line-height: 1.5; }

/* footer */
.foot { background: var(--ink); color: var(--cream-dim); padding: 46px 0 60px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.foot .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 9vw, 150px); letter-spacing: -0.04em; line-height: .8; color: var(--cream); }
.foot .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: right; line-height: 1.9; }
.foot .meta a:hover { color: var(--gold); }

/* scroll progress */
.scroll-prog { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); width: 0; z-index: 9001; transition: width .1s linear; }


/* ================================================================
   PRODUCTION ADDITIONS (static build)
================================================================ */
/* gallery images + tasteful placeholders when no photo supplied */
.disc img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.disc:hover img { transform: scale(1.05); }
.disc .ph {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, oklch(0.34 0.07 56), oklch(0.16 0.025 42));
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.disc:hover .ph { transform: scale(1.05); }

/* keyboard focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* if JS is off, restore the native cursor so nothing feels broken */
.no-js body { cursor: auto; }
.no-js .cur-dot, .no-js .cur-ring, .no-js #fx-particles, .no-js .scroll-prog { display: none; }
.no-js .rev { opacity: 1 !important; transform: none !important; }