/* ============================================================
   4D AGENCY — portfolio one-page
   Editorial brutalist  ×  Antique museum  ×  Cinematic nocturne
   ============================================================ */

:root{
  --ink:        #0a0b10;
  --ink-2:      #14151c;
  --ink-3:      #1d1e27;
  --paper:      #ece4d3;
  --paper-2:    #e3d8c0;
  --paper-3:    #d7c8a8;
  --sepia:      #6b4a2e;
  --sepia-2:    #8a6840;
  --sepia-ink:  #2b1f12;
  --violet:     #7560c8;
  --violet-2:   #4a3a8a;
  --violet-deep:#2a214d;
  --bone:       #f3ecdc;
  --off:        #cfc4a9;
  --hair:       rgba(255,255,255,.08);
  --hair-dark:  rgba(20,12,4,.18);
  --grain-op:   .35;

  --f-disp: 'Bebas Neue', 'Oswald', 'Archivo Narrow', sans-serif;
  --f-cond: 'Big Shoulders Display', 'Oswald', sans-serif;
  --f-serif: 'Cormorant Garamond', 'EB Garamond', serif;
  --f-sans: 'Space Grotesk', 'DM Sans', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--ink); color:var(--bone); font-family:var(--f-sans); -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ------------ NOISE / GRAIN ------------ */
.grain{ position:fixed; inset:0; pointer-events:none; z-index:200; opacity:var(--grain-op); mix-blend-mode:overlay; }
.grain svg{ width:100%; height:100%; }

/* ------------ UTILITIES ------------ */
.wrap{ max-width:1480px; margin:0 auto; padding:0 56px; position:relative; }
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.7;
}
.rule{ height:1px; background:currentColor; opacity:.25; width:100%; }
.rule.thick{ height:2px; opacity:.4; }

.tagchip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; padding:6px 10px;
  border:1px solid currentColor;
}
.tagchip .dot{ width:6px; height:6px; background:currentColor; border-radius:50%; }
.tagchip.live .dot{ background:#5ed487; box-shadow:0 0 0 3px rgba(94,212,135,.18); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ------------ TOP NAV ------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px; mix-blend-mode:difference; color:#fff;
}
.brand{ display:flex; align-items:center; gap:14px; font-family:var(--f-disp); letter-spacing:.04em; font-size:22px; }
.brand-logo{ height:36px; width:auto; display:block; }
.nav ul{ list-style:none; display:flex; gap:34px; font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
.nav .reserve{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  padding:10px 18px; border:1px solid #fff;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(117,96,200,.18), transparent 55%),
    radial-gradient(80% 60% at 10% 90%, rgba(74,58,138,.22), transparent 60%),
    linear-gradient(180deg, #07080d 0%, #0a0c14 60%, #0d0f1a 100%);
  padding:140px 0 80px;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(180deg, transparent 0 80px, rgba(255,255,255,.014) 80px 81px);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:end;
  min-height:calc(100vh - 220px);
}
.hero-left{ position:relative; }
.hero-meta{
  display:flex; align-items:center; gap:18px; margin-bottom:50px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--off);
}
.hero-meta .line{ flex:1; height:1px; background:var(--hair); }

.hero h1{
  font-family:var(--f-cond); font-weight:800;
  font-size: clamp(48px, 6vw, 110px);
  line-height:.86; letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--bone);
}
.hero h1 .it{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.01em;
  color:var(--off);
  background: linear-gradient(180deg, #d6c6f5 0%, #7560c8 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero h1 .it::before{ content:'« '; }
.hero h1 .it::after{ content:' »'; }

.hero-sub{
  margin-top:34px; max-width:560px;
  font-family:var(--f-serif); font-style:italic; font-size:22px; line-height:1.45;
  color:#c8c1ae;
}
.hero-cta{
  display:flex; gap:14px; align-items:center; margin-top:48px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 26px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid currentColor; cursor:pointer; background:transparent;
  color:inherit; transition:.3s ease;
  position:relative;
}
.btn.primary{
  background:var(--bone); color:var(--ink); border-color:var(--bone);
}
.btn.primary:hover{ background:var(--violet); border-color:var(--violet); color:#fff; }
.btn.ghost:hover{ background:rgba(255,255,255,.06); }
.btn .arrow{ display:inline-block; transition:transform .3s ease; }
.btn:hover .arrow{ transform:translateX(4px); }

.hero-reassure{
  display:flex; align-items:center; gap:12px; margin-top:30px;
  font-family:var(--f-serif); font-style:italic; font-size:15px; color:var(--off);
}
.hero-reassure .dot{ width:7px; height:7px; background:#5ed487; border-radius:50%; box-shadow:0 0 0 4px rgba(94,212,135,.15); }

/* hero right column: marble bust slot + side info */
.hero-right{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:24px;
}
.bust-slot{
  position:absolute; left:0px; top:50px; right:-30px;
  width: 460px; height: 580px;
  background: none;
  overflow: hidden;
}
.modelviewer{ position:absolute; top:0; left:0; right:0; bottom:auto; width:100%; height:600px; background:#0a0b10; --poster-color:#0a0b10; mix-blend-mode:lighten; z-index:0; }
.modelviewer::part(default-progress-bar){ display:none; }
.bust-slot .placeholder{
  position:absolute; inset:18px;
  border:1px dashed rgba(243,236,220,.22);
  display:grid; place-items:center; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(243,236,220,.025) 0 14px, transparent 14px 28px);
}
.bust-slot .placeholder span{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(243,236,220,.5); line-height:1.8;
}
.bust-img{ inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:0; }
.bust-slot .corner{ position:absolute; width:14px; height:14px; border:1px solid rgba(243,236,220,.4); z-index:1; }
.bust-slot .corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.bust-slot .corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.bust-slot .corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.bust-slot .corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }

.bust-slot .light{
  position:absolute; left:-40%; top:-20%; width:90%; height:140%;
  background: radial-gradient(closest-side, rgba(117,96,200,.35), transparent 70%);
  filter:blur(20px);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translateX(0) translateY(0); } to{ transform:translateX(40%) translateY(10%); } }

.hero-meta-right{
  align-self:flex-end; max-width:340px; text-align:right;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--off); line-height:2;
  position:relative; z-index:2;
}
.hero-meta-right .big{
  font-family:var(--f-disp); font-size:62px; letter-spacing:.01em; color:var(--bone);
  display:block; line-height:.95; margin-bottom:4px;
}
.hero-meta-right .label{ display:block; opacity:.7; }

.scroll-cue{
  position:absolute; left:56px; bottom:24px; display:flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--off);
}
.scroll-cue .bar{
  width:50px; height:1px; background:var(--off); position:relative; overflow:hidden;
}
.scroll-cue .bar::after{
  content:''; position:absolute; left:-50px; top:0; width:50px; height:1px; background:var(--bone);
  animation: scroll-slide 2.2s infinite;
}
@keyframes scroll-slide{ to{ left:100%; } }

/* ============================================================
   MARQUEE BAND (between hero and process)
   ============================================================ */
.marquee{
  background:var(--ink-2);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  overflow:hidden; padding:22px 0;
}
.marquee-track{
  display:flex; gap:60px; white-space:nowrap;
  animation: marquee 36s linear infinite;
  font-family:var(--f-cond); font-weight:600; font-size:34px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--bone);
}
.marquee-track span{ display:inline-flex; align-items:center; gap:60px; }
.marquee-track .sep{ color:var(--violet); font-family:var(--f-serif); font-style:italic; font-weight:400; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   PROCESS — paper antique
   ============================================================ */
.section-paper{
  position:relative; background:var(--paper); color:var(--sepia-ink);
  padding:140px 0 160px; overflow:hidden;
}
.section-paper::before{
  /* paper texture */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(107,74,46,.06), transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(107,74,46,.08), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(107,74,46,.06), transparent 60%);
  pointer-events:none;
}
.section-paper::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(107,74,46,.05) 0, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(107,74,46,.04) 0, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(107,74,46,.03) 0, transparent 1.5px);
  background-size: 30px 30px, 50px 50px, 25px 25px;
  opacity:.5;
}

.section-head{
  display:grid; grid-template-columns: auto 1fr auto; gap:28px; align-items:end;
  margin-bottom:90px;
}
.section-head .num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.25em;
  text-transform:uppercase; opacity:.6;
}
.section-head h2{
  font-family:var(--f-cond); font-weight:700;
  font-size:clamp(56px, 7vw, 124px); line-height:.88; letter-spacing:-.01em;
  text-transform:uppercase;
}
.section-head h2 .it{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; color:var(--sepia);
}
.section-head .right{
  max-width:300px; font-family:var(--f-serif); font-style:italic; font-size:17px;
  line-height:1.4; color:var(--sepia-ink); opacity:.85; text-align:right;
}

.process-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border-top:1px solid var(--hair-dark);
}
.process-card{
  padding:46px 36px 50px;
  border-right:1px solid var(--hair-dark);
  position:relative;
}
.process-card:last-child{ border-right:none; }
.process-card .roman{
  font-family:var(--f-serif); font-style:italic; font-size:96px; line-height:1;
  color:var(--sepia); opacity:.55; margin-bottom:36px;
}
.process-card h3{
  font-family:var(--f-cond); font-weight:700;
  font-size:42px; line-height:1; text-transform:uppercase;
  margin-bottom:18px; letter-spacing:.01em;
}
.process-card .lede{
  font-family:var(--f-serif); font-style:italic; font-size:18px;
  color:var(--sepia); margin-bottom:24px;
}
.process-card p{
  font-family:var(--f-sans); font-size:14px; line-height:1.6; color:#3a2918;
  max-width:34ch;
}
.process-card .footnote{
  margin-top:36px; padding-top:18px; border-top:1px solid var(--hair-dark);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sepia); display:flex; justify-content:space-between;
}

.process-tools{
  margin-top:80px; display:flex; gap:14px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--hair-dark);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.process-tools .label{ color:var(--sepia); margin-right:10px; }
.process-tools .tool{
  border:1px solid var(--sepia); padding:6px 10px; color:var(--sepia-ink);
}

/* deckle edge between sections */
.deckle{ height:48px; background:var(--paper); position:relative; }
.deckle.bottom::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:32px;
  background:
    radial-gradient(ellipse 20px 16px at 10px 0, var(--paper) 70%, transparent 71%) repeat-x;
  background-size:20px 32px;
}

/* ============================================================
   EXCERPTS — dark cinematic player
   ============================================================ */
.section-night{
  position:relative; background:var(--ink); color:var(--bone);
  padding:140px 0 160px; overflow:hidden;
}
.section-night.violet{
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(117,96,200,.15), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(74,58,138,.18), transparent 60%),
    #08090f;
}

.tracks{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:40px; margin-top:20px;
}
.player{
  background:linear-gradient(180deg, #11121a 0%, #0c0d14 100%);
  border:1px solid var(--hair);
  padding:36px;
  position:relative; overflow:hidden;
}
.player::before{
  content:''; position:absolute; left:-20%; top:-30%; width:140%; height:80%;
  background: radial-gradient(closest-side, rgba(117,96,200,.22), transparent 70%);
  filter:blur(40px); pointer-events:none;
}
.player-top{ position:relative; display:flex; justify-content:space-between; gap:24px; }
.player-cover{
  width:220px; height:220px; flex-shrink:0; position:relative;
  background:
    radial-gradient(120% 80% at 30% 30%, #7560c8, transparent 60%),
    radial-gradient(120% 80% at 70% 70%, #4a3a8a, transparent 60%),
    #1a1731;
  display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--hair);
}
.player-cover .label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.player-cover::after{
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px);
  pointer-events:none;
}
.cover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.player-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.player-info .eyebrow{ margin-bottom:18px; }
.player-info h3{
  font-family:var(--f-cond); font-weight:700; font-size:54px; line-height:.95;
  text-transform:uppercase; margin-bottom:10px;
}
.player-info .credit{
  font-family:var(--f-serif); font-style:italic; font-size:18px; color:var(--off);
  margin-bottom:22px;
}
.player-info .meta{
  margin-top:auto;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--off); display:flex; gap:22px;
}
.waveform{
  display:flex; align-items:center; gap:2px; height:54px; margin-top:30px; position:relative;
}
.waveform .bar{
  flex:1; background:rgba(243,236,220,.18); transition:background .2s;
}
.waveform .bar.played{ background:linear-gradient(180deg, #b5a6ee, #7560c8); }
.transport{
  margin-top:24px; display:flex; align-items:center; gap:20px;
}
.play-btn{
  width:56px; height:56px; border:1px solid var(--bone); border-radius:50%;
  background:transparent; color:var(--bone); cursor:pointer; display:grid; place-items:center;
  transition:.25s ease;
}
.play-btn:hover{ background:var(--bone); color:var(--ink); }
.play-btn .ico{ width:14px; height:14px; display:inline-block; }
.transport .time{ font-family:var(--f-mono); font-size:11px; letter-spacing:.15em; opacity:.7; }

.track-list{
  display:flex; flex-direction:column; border-top:1px solid var(--hair);
}
.track-row{
  display:grid; grid-template-columns: 36px 1fr auto auto auto; gap:20px; align-items:center;
  padding:18px 8px; border-bottom:1px solid var(--hair);
  cursor:pointer; transition:background .2s;
}
.track-row:hover{ background:rgba(255,255,255,.03); }
.track-row.active{ background:rgba(117,96,200,.08); }
.track-row .idx{ font-family:var(--f-mono); font-size:11px; color:var(--off); }
.track-row .name{ font-family:var(--f-cond); font-weight:600; font-size:22px; letter-spacing:.02em; text-transform:uppercase; }
.track-row .style{ font-family:var(--f-serif); font-style:italic; font-size:15px; color:var(--off); }
.track-row .bpm{ font-family:var(--f-mono); font-size:11px; color:var(--off); letter-spacing:.15em; }
.track-row .dur{ font-family:var(--f-mono); font-size:11px; color:var(--off); letter-spacing:.1em; }
.track-row.active .name{ color:var(--bone); }
.track-row.active .idx{ color:var(--violet); }

/* ============================================================
   MANIFESTO — paper editorial
   ============================================================ */
.manifesto-grid{
  display:grid; grid-template-columns: 1fr 1.4fr; gap:80px; align-items:start;
}
.manifesto-image{
  position:relative; height:680px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(107,74,46,.18), transparent 70%),
    linear-gradient(180deg, #ddd0b0 0%, #c4b48f 100%);
  border:1px solid var(--hair-dark);
  overflow:hidden;
}
.manifesto-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  filter:sepia(30%) contrast(1.05) brightness(.96);
  display:block;
}
.manifesto-image .corner{ position:absolute; width:14px; height:14px; border:1px solid var(--sepia); }
.manifesto-image .corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.manifesto-image .corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.manifesto-image .corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.manifesto-image .corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }
.manifesto-image .caption{
  position:absolute; left:30px; bottom:30px; right:30px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--sepia); display:flex; justify-content:space-between;
}

.manifesto-body{ padding-top:14px; }
.manifesto-body .dropcap{
  font-family:var(--f-serif); font-weight:400;
  font-size:120px; line-height:.8; float:left; margin:8px 18px 0 0; color:var(--sepia);
}
.manifesto-body p{
  font-family:var(--f-serif); font-size:22px; line-height:1.5; color:var(--sepia-ink);
  margin-bottom:20px;
}
.manifesto-body p.lead{ font-size:28px; line-height:1.4; }
.manifesto-body .pullquote{
  margin:50px 0; padding-left:24px; border-left:2px solid var(--sepia);
  font-family:var(--f-cond); font-weight:600; font-size:38px; line-height:1.05;
  text-transform:uppercase; color:var(--sepia-ink);
}
.manifesto-body .pullquote em{
  font-family:var(--f-serif); font-style:italic; font-weight:400; text-transform:none;
  color:var(--sepia); display:block; margin-top:8px; font-size:.6em;
}
.manifesto-signature{
  margin-top:48px; display:flex; gap:40px; align-items:flex-start;
  padding-top:30px; border-top:1px solid var(--hair-dark);
}
.manifesto-signature .sig{
  font-family:var(--f-serif); font-style:italic; font-size:34px;
  color:var(--sepia-ink); line-height:.9;
}
.manifesto-signature .sig small{
  display:block; font-family:var(--f-mono); font-style:normal; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sepia); margin-top:8px;
}

/* ============================================================
   WHY US — brutalist dark blocks
   ============================================================ */
.section-brutal{
  background:var(--ink); color:var(--bone);
  padding:140px 0 160px; position:relative; overflow:hidden;
}
.section-brutal .section-head h2{ color:var(--bone); }
.section-brutal .section-head h2 .it{ color:var(--violet); background:none; -webkit-text-fill-color:initial; }
.section-brutal .section-head .right{ color:var(--off); }

.benefits{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border:1px solid var(--hair);
}
.benefit{
  padding:50px 32px 60px;
  border-right:1px solid var(--hair);
  position:relative;
  background:transparent;
  transition:background .3s ease, transform .3s ease;
}
.benefit:last-child{ border-right:none; }
.benefit:hover{ background:#11121a; }
.benefit .num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  color:var(--violet); margin-bottom:36px; display:block;
}
.benefit h4{
  font-family:var(--f-cond); font-weight:700;
  font-size:34px; line-height:1; text-transform:uppercase;
  margin-bottom:18px;
}
.benefit p{
  font-family:var(--f-sans); font-size:14px; line-height:1.6; color:var(--off);
}
.benefit .icon{
  position:absolute; top:36px; right:32px; width:28px; height:28px;
  display:grid; place-items:center;
}
.benefit .icon svg{ width:100%; height:100%; stroke:var(--off); fill:none; stroke-width:1.4; }

/* split row: testimonial + stats */
.split-row{
  margin-top:80px;
  display:grid; grid-template-columns: 1.6fr 1fr; gap:40px;
}
.testimonial{
  background:var(--ink-2); border:1px solid var(--hair);
  padding:50px 46px;
}
.testimonial .quote-mark{
  font-family:var(--f-serif); font-style:italic; font-size:120px;
  line-height:.7; color:var(--violet); margin-bottom:0;
}
.testimonial p{
  font-family:var(--f-serif); font-style:italic; font-size:26px; line-height:1.4;
  color:var(--bone); margin-bottom:30px;
}
.testimonial .byline{
  display:flex; gap:16px; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.testimonial .byline .who{ color:var(--bone); }
.testimonial .byline .what{ color:var(--off); }
.testimonial .byline .avatar{
  width:42px; height:42px; background:linear-gradient(135deg, var(--violet), var(--violet-2));
  display:grid; place-items:center; font-family:var(--f-mono); font-size:11px; color:#fff;
}
.stats{ display:grid; grid-template-rows:repeat(3, 1fr); gap:14px; }
.stat{
  background:var(--ink-2); border:1px solid var(--hair);
  padding:28px 30px; display:flex; justify-content:space-between; align-items:center;
}
.stat .v{ font-family:var(--f-cond); font-weight:700; font-size:54px; line-height:1; }
.stat .v small{ font-size:.55em; color:var(--violet); margin-left:4px; }
.stat .l{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--off); max-width:130px; text-align:right; line-height:1.6; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(117,96,200,.25), transparent 70%),
    var(--ink);
  padding:120px 0; position:relative; overflow:hidden;
}
.cta-band .light{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:60%; height:200%;
  background: radial-gradient(closest-side, rgba(117,96,200,.4), transparent 70%);
  filter:blur(80px); pointer-events:none;
}
.cta-content{ position:relative; text-align:center; }
.cta-content .eyebrow{ display:block; margin-bottom:30px; }
.cta-content h2{
  font-family:var(--f-cond); font-weight:800;
  font-size:clamp(64px, 8vw, 148px); line-height:.86; letter-spacing:-.01em;
  text-transform:uppercase; margin-bottom:30px;
}
.cta-content h2 .it{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; color:#d6c6f5;
}
.cta-content p{
  font-family:var(--f-serif); font-style:italic; font-size:22px; max-width:660px; margin:0 auto 50px;
  color:var(--off);
}
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#06070b; color:var(--off); border-top:1px solid var(--hair);
  padding:80px 0 40px;
}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:60px; padding-bottom:60px;
  border-bottom:1px solid var(--hair);
}
.footer-top h5{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); margin-bottom:20px;
}
.footer-top ul{ list-style:none; display:flex; flex-direction:column; gap:10px;
  font-family:var(--f-sans); font-size:14px; }
.footer-brand{
  font-family:var(--f-cond); font-weight:700; font-size:96px; line-height:.9; color:var(--bone);
  letter-spacing:-.01em; text-transform:uppercase;
}
.footer-brand small{
  display:block; font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:18px; color:var(--off); margin-top:14px; line-height:1.4;
}
.footer-logo{ height:100px; width:auto; display:block; margin-bottom:6px; filter: brightness(0) invert(1) sepia(0.14) saturate(1.4) brightness(0.95); }
.footer-bottom{
  margin-top:30px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}

/* ============================================================
   SLATE: section number column (left margin)
   ============================================================ */
.slate-num{
  position:absolute; left:14px; top:120px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--sepia); writing-mode:vertical-rl; transform:rotate(180deg);
}
.section-night .slate-num, .section-brutal .slate-num{ color:var(--off); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet large (< 1100px) ── */
@media (max-width: 1100px){
  .wrap{ padding:0 32px; }
  .nav{ padding:18px 32px; }
  .scroll-cue{ left:32px; }
  .slate-num{ left:10px; }

  .hero-grid{ grid-template-columns:1fr; min-height:auto; }
  .bust-slot{ display:none; }

  .section-head{ grid-template-columns:auto 1fr; gap:20px; }
  .section-head .right{ grid-column:1/-1; text-align:left; max-width:100%; }

  .process-grid{ grid-template-columns:1fr; }
  .process-card{ border-right:none; border-bottom:1px solid var(--hair-dark); }

  .tracks{ grid-template-columns:1fr; }
  .player-cover{ width:160px; height:160px; }
  .player-info h3{ font-size:38px; }

  .manifesto-grid{ grid-template-columns:1fr; gap:40px; }
  .manifesto-image{ height:360px; }

  .benefits{ grid-template-columns:repeat(2,1fr); }
  .benefit:nth-child(2){ border-right:none; }
  .benefit:nth-child(1),
  .benefit:nth-child(2){ border-bottom:1px solid var(--hair); }

  .split-row{ grid-template-columns:1fr; }

  .footer-top{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand{ font-size:72px; }
  .footer-logo{ height:72px; }
}

/* ── Tablet portrait (< 768px) ── */
@media (max-width: 768px){
  .wrap{ padding:0 20px; }
  .nav{ padding:16px 20px; }
  .nav ul{ display:none; }
  .scroll-cue{ left:20px; }
  .slate-num{ display:none; }

  .hero{ padding:110px 0 60px; }
  .bust-slot{ height:300px; }
  .hero-meta{ gap:10px; font-size:10px; }
  .hero-meta .line{ display:none; }
  .hero-meta-right{ text-align:left; }
  .hero-meta-right .big{ font-size:48px; }

  .section-paper,
  .section-night,
  .section-brutal{ padding:80px 0 100px; }
  .cta-band{ padding:80px 0; }

  .section-head{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:50px; }
  .section-head .num{ font-size:10px; }
  .section-head h2{ font-size:clamp(42px, 10vw, 72px); text-align:left; }
  .section-head .right{ text-align:left; max-width:100%; font-size:15px; }
  .cta-content{ text-align:left; }
  .cta-content .eyebrow{ display:block; }
  .cta-actions{ justify-content:flex-start; }

  .process-card{ padding:32px 20px 36px; }
  .process-card .roman{ font-size:72px; margin-bottom:24px; }
  .process-card h3{ font-size:32px; }
  .process-tools{ gap:8px; }

  .player{ padding:24px; }
  .player-top{ flex-direction:column; gap:16px; }
  .player-cover{ width:100%; height:180px; }
  .player-info h3{ font-size:32px; }
  .player-info .meta{ flex-wrap:wrap; gap:12px; }

  .track-row{ grid-template-columns:28px 1fr auto auto; gap:12px; }
  .track-row .bpm{ display:none; }

  .manifesto-body p{ font-size:18px; }
  .manifesto-body p.lead{ font-size:22px; }
  .manifesto-body .pullquote{ font-size:28px; }
  .manifesto-body .dropcap{ font-size:90px; }
  .manifesto-signature{ flex-direction:column; gap:20px; }

  .benefits{ grid-template-columns:1fr; }
  .benefit{ border-right:none !important; border-bottom:1px solid var(--hair); }
  .benefit:last-child{ border-bottom:none; }

  .testimonial{ padding:32px 24px; }
  .testimonial p{ font-size:20px; }
  .testimonial .quote-mark{ font-size:80px; }

  .stat{ flex-direction:column; align-items:flex-start; gap:6px; }
  .stat .l{ text-align:left; }

  .cta-content h2{ font-size:clamp(48px, 12vw, 90px); }
  .cta-actions{ flex-direction:column; align-items:center; }

  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-logo{ height:56px; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
}

/* ── Mobile (< 480px) ── */
@media (max-width: 480px){
  .wrap{ padding:0 16px; }
  .nav{ padding:14px 16px; }
  .nav .reserve{ padding:8px 12px; font-size:10px; }

  .hero{ padding:90px 0 50px; }
  .bust-slot{ height:240px; }
  .hero-cta{ flex-direction:column; align-items:flex-start; }
  .hero-cta .btn{ width:100%; justify-content:center; }

  .section-paper,
  .section-night,
  .section-brutal{ padding:60px 0 72px; }
  .cta-band{ padding:60px 0; }

  .section-head h2{ font-size:clamp(36px, 11vw, 56px); }

  .waveform{ height:42px; }
  .player-cover{ height:140px; }
  .play-btn{ width:46px; height:46px; }

  .track-row{ grid-template-columns:24px 1fr auto; gap:10px; padding:14px 4px; }
  .track-row .dur{ display:none; }
  .track-row .name{ font-size:17px; }

  .marquee-track{ font-size:24px; gap:30px; }
  .marquee-track span{ gap:30px; }

  .cta-content h2{ font-size:clamp(38px, 13vw, 64px); }
  .cta-content p{ font-size:16px; }
  .btn{ padding:16px 20px; font-size:11px; }

  .footer-logo{ height:44px; }
  .footer-brand small{ font-size:15px; }
}