/*
Theme Name: GR8T Sphere Sound & Music
Theme URI: https://gr8tsphere.com
Author: GR8T Sphere Sound & Music
Description: Official theme — Academy, Production & Acoustics.
Version: 2.0.0
Text Domain: gr8t-sphere
*/

/* ─────────────────────────────────────────────────────────────
   GOOGLE FONTS — Syne (display) + DM Sans (body)
   Syne is geometric, confident, modern. Perfectly music-tech.
   DM Sans is clean, legible, premium. Not Inter.
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --gold:         #c9a227;
  --gold-bright:  #e8c547;
  --gold-dim:     rgba(201,162,39,.12);
  --gold-glow:    rgba(201,162,39,.28);
  --gold-border:  rgba(201,162,39,.20);

  /* Backgrounds */
  --bg:           #070707;
  --surface:      #0f0f0f;
  --surface-2:    #161616;
  --surface-3:    #1e1e1e;

  /* Text */
  --text:         #e8e8e8;
  --muted:        #7a7a7a;
  --muted-2:      #555;
  --white:        #ffffff;

  /* Borders */
  --border:       rgba(255,255,255,.07);
  --border-gold:  rgba(201,162,39,.18);

  /* Typography — modular scale (major third) */
  --t-xs:   .6875rem;   /* 11px */
  --t-sm:   .8125rem;   /* 13px */
  --t-base: 1rem;       /* 16px */
  --t-md:   1.125rem;   /* 18px */
  --t-lg:   1.375rem;   /* 22px */
  --t-xl:   1.75rem;    /* 28px */
  --t-2xl:  2.25rem;    /* 36px */
  --t-3xl:  3rem;       /* 48px */
  --t-4xl:  4rem;       /* 64px */
  --t-5xl:  5.5rem;     /* 88px */

  /* Spacing — 8pt grid */
  --s-1:  .5rem;    /* 8 */
  --s-2:  1rem;     /* 16 */
  --s-3:  1.5rem;   /* 24 */
  --s-4:  2rem;     /* 32 */
  --s-5:  2.5rem;   /* 40 */
  --s-6:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-10: 5rem;     /* 80 */
  --s-12: 6rem;     /* 96 */
  --s-16: 8rem;     /* 128 */

  /* Layout */
  --max-w:    1280px;
  --header-h: 76px;
  --radius:   6px;
  --radius-lg:12px;
  --radius-xl:20px;

  /* Transitions — 0ms delay on everything so hover is instant */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --t-snap:    80ms;
  --t-fast:    180ms;
  --t-med:     360ms;
  --t-slow:    600ms;
  --t-xslow:   900ms;
}

/* ─────────────────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-optical-sizing: auto;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,video { max-width:100%; display:block; }
a { color:var(--gold); text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; }

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -.03em;
}
h1 { font-size: clamp(var(--t-3xl), 7vw, var(--t-5xl)); font-weight: 800; }
h2 { font-size: clamp(var(--t-xl),  4vw, var(--t-3xl)); letter-spacing: -.025em; }
h3 { font-size: clamp(var(--t-md),  2vw, var(--t-lg));  letter-spacing: -.015em; font-weight: 600; }
h4 { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
p  { line-height: 1.75; }

/* Kicker — small label above headings */
.kicker {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: var(--s-2);
}
.kicker::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: clamp(var(--s-3), 5vw, var(--s-8));
}
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: .875rem 2rem;
  border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  /* 0ms delay — response is immediate */
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-snap);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity var(--t-snap);
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--gold);
  color: #000;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px var(--gold-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--border-gold);
  color: var(--white);
}

/* ─────────────────────────────────────────────────────────────
   LOGO (fixed, top-left)
───────────────────────────────────────────────────────────── */
.site-logo-anchor {
  position: fixed;
  top: 14px;
  left: clamp(var(--s-3), 5vw, var(--s-8));
  z-index: 1010;
}
.site-logo-anchor img {
  height: 44px;
  width: auto;
  /* subtle drop shadow so logo pops on any bg */
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.7));
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast);
}
.site-logo-anchor:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 20px rgba(201,162,39,.35));
}

/* ─────────────────────────────────────────────────────────────
   HEADER / NAV
───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(7,7,7,.75);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-med), background var(--t-med);
}
.site-header.scrolled {
  background: rgba(7,7,7,.92);
  box-shadow: 0 1px 0 rgba(201,162,39,.1), 0 8px 48px rgba(0,0,0,.6);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav-menu a {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  /* 0ms delay */
  transition: color var(--t-snap);
  position: relative;
  padding-block: var(--s-1);
}
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav-menu a:hover { color: var(--white); }
.nav-menu a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--s-1);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-snap);
}

/* ─────────────────────────────────────────────────────────────
   HERO — full viewport
───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* Canvas covers the whole hero — sits behind everything */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Background image per state */
.hero-bg-deck {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Smooth 1.2s crossfade */
  transition: opacity 1200ms var(--ease-out);
}
.hero-bg-item.active { opacity: 1; }
.hero-bg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Subtle parallax-style scale on enter */
  transition: transform 8s linear;
  transform: scale(1.06);
}
.hero-bg-item.active img { transform: scale(1.0); }

/* Multi-layer overlay — darkens bg, creates depth */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to right, rgba(7,7,7,.92) 0%, rgba(7,7,7,.55) 55%, rgba(7,7,7,.2) 100%),
    linear-gradient(to top,   rgba(7,7,7,.98) 0%, transparent 50%);
  pointer-events: none;
}

/* Noise grain texture overlay */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Gold grid */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(rgba(201,162,39,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

/* Hero content layout */
.hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s-8);
  align-items: end;
  padding-block: var(--s-16) var(--s-10);
}

/* Left: main copy */
.hero-copy { max-width: 680px; }

.hero-kicker {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: var(--s-3);
}
.hero-kicker span { /* animated pulse dot */
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { transform:scale(1); opacity:1; box-shadow:0 0 0 0 rgba(201,162,39,.5); }
  50% { transform:scale(1.3); opacity:.85; box-shadow:0 0 0 6px rgba(201,162,39,0); }
}

.hero-headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 800;
  color: var(--white);
  line-height: .98;
  letter-spacing: -.04em;
  margin-bottom: var(--s-4);
}
.hero-headline em {
  font-style: normal;
  color: var(--gold);
}

.hero-sub {
  font-size: clamp(var(--t-md), 2vw, var(--t-lg));
  color: rgba(232,232,232,.55);
  font-weight: 300;
  max-width: 460px;
  line-height: 1.65;
  margin-bottom: var(--s-6);
}

/* State brief — fades in/out on tab switch */
.state-brief {
  margin-bottom: var(--s-5);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.state-brief.switching {
  opacity: 0;
  transform: translateY(12px);
}

.state-kicker {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-1);
}
.state-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(var(--t-lg), 2.8vw, var(--t-2xl));
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.025em;
  line-height: 1.12;
  margin-bottom: var(--s-2);
}
.state-desc {
  font-size: var(--t-base);
  color: rgba(232,232,232,.55);
  line-height: 1.7;
  max-width: 440px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: var(--s-5);
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--t-sm);
  color: rgba(232,232,232,.6);
  font-weight: 300;
}
.feature-list li::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Right: state tabs + auto-progress */
.hero-side { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); }

/* State tabs (vertical on right) */
.state-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.state-tab {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.03);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-snap), border-color var(--t-fast), transform var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.state-tab:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(-4px);
}
.state-tab.active {
  background: rgba(201,162,39,.08);
  border-color: var(--border-gold);
}

/* Progress fill inside active tab */
.state-tab-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
  /* JS drives the width via transition */
  transition: width 100ms linear;
}

.state-tab-num {
  font-family: 'Syne', sans-serif;
  font-size: var(--t-xs);
  font-weight: 800;
  color: var(--muted-2);
  width: 20px;
  flex-shrink: 0;
  transition: color var(--t-snap);
}
.state-tab.active .state-tab-num { color: var(--gold); }

.state-tab-body { flex: 1; min-width: 0; }
.state-tab-label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
  transition: color var(--t-snap);
}
.state-tab.active .state-tab-label { color: var(--white); }
.state-tab-sub {
  font-size: var(--t-xs);
  color: var(--muted-2);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-snap);
}
.state-tab.active .state-tab-sub { color: rgba(201,162,39,.7); }

/* Auto-slide indicator */
.auto-slide-hint {
  font-size: var(--t-xs);
  color: var(--muted-2);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 2px;
}
.auto-slide-hint::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .6;
  animation: blink-hint 1.8s ease-in-out infinite;
}
@keyframes blink-hint {
  0%,100% { opacity:.6; } 50% { opacity:.15; }
}

/* ─────────────────────────────────────────────────────────────
   SECTIONS — shared
───────────────────────────────────────────────────────────── */
.section {
  padding-block: clamp(var(--s-12), 10vw, var(--s-16));
}
.section-dark  { background: var(--bg); }
.section-mid   { background: var(--surface); }
.section-head  { margin-bottom: clamp(var(--s-6), 5vw, var(--s-10)); }
.section-head h2 { margin-top: var(--s-1); }

/* ─────────────────────────────────────────────────────────────
   STATE RAIL — three cards
───────────────────────────────────────────────────────────── */
.rail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.rail-card {
  background: var(--surface-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  /* 0ms delay, smooth transform */
  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-fast),
    box-shadow var(--t-med) var(--ease);
}
.rail-card:hover {
  transform: translateY(-10px) scale(1.012);
  border-color: rgba(201,162,39,.4);
  box-shadow:
    0 32px 64px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,162,39,.15),
    0 0 60px rgba(201,162,39,.06);
}

/* Image area — zoom on hover */
.rail-card-img {
  height: 240px;
  overflow: hidden;
  position: relative;
  background: var(--surface-3);
}
.rail-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Smooth zoom — 0ms delay */
  transition: transform 700ms var(--ease-out);
  filter: brightness(.75) saturate(.9);
}
.rail-card:hover .rail-card-img img {
  transform: scale(1.08);
  filter: brightness(.85) saturate(1);
}
/* Gradient overlay on image bottom */
.rail-card-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(22,22,22,.9) 0%, transparent 100%);
  pointer-events: none;
}

/* Tag badge on image */
.rail-card-tag {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #000;
  background: var(--gold);
  padding: .3rem .75rem;
  border-radius: 100px;
  z-index: 2;
}

.rail-card-copy {
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.rail-card-copy h3 {
  color: var(--white);
  font-size: clamp(var(--t-md), 1.5vw, var(--t-lg));
  margin-bottom: var(--s-2);
  transition: color var(--t-snap);
}
.rail-card:hover .rail-card-copy h3 { color: var(--gold-bright); }
.rail-card-copy p {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: var(--s-3);
}
.rail-card-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap var(--t-fast) var(--ease), color var(--t-snap);
}
.rail-card-link::after { content: '→'; }
.rail-card-link:hover { gap: .875rem; color: var(--gold-bright); }

/* ─────────────────────────────────────────────────────────────
   FOUNDER / VALUE PILLARS
───────────────────────────────────────────────────────────── */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 7vw, var(--s-16));
  align-items: start;
}
.founder-lead h2 { margin-bottom: var(--s-3); }
.founder-lead p  { color: var(--muted); font-size: var(--t-md); line-height: 1.8; }

.pillar-stack { display: flex; flex-direction: column; gap: var(--s-2); }

.pillar {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition:
    border-color var(--t-snap),
    background var(--t-fast),
    transform var(--t-fast) var(--ease);
}
.pillar:hover {
  border-left-color: var(--gold);
  background: var(--surface-3);
  transform: translateX(6px);
}
.pillar h3 {
  font-size: var(--t-base);
  color: var(--white);
  margin-bottom: var(--s-1);
  font-weight: 600;
  letter-spacing: -.01em;
}
.pillar p { font-size: var(--t-sm); color: var(--muted); line-height: 1.7; }

/* ─────────────────────────────────────────────────────────────
   SHOWCASE LAB TABS
───────────────────────────────────────────────────────────── */
.showcase-tab-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: fit-content;
  margin-bottom: var(--s-8);
}
.showcase-tab {
  padding: .75rem 1.75rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 10px;
  transition: color var(--t-snap), background var(--t-fast);
}
.showcase-tab:hover { color: var(--white); }
.showcase-tab.active { background: var(--gold); color: #000; }

.showcase-panel { display: none; }
.showcase-panel.active { display: block; }

/* ─────────────────────────────────────────────────────────────
   DJ TOOLS GRID
───────────────────────────────────────────────────────────── */
.dj-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.tool-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--s-5);
  transition: border-color var(--t-fast);
}
.tool-card:hover { border-color: var(--border-gold); }

.tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-3);
}
.tool-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.tool-head h3 {
  font-size: var(--t-base);
  color: var(--white);
  letter-spacing: -.015em;
}
.tool-value {
  font-family: 'Syne', sans-serif;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}
.tool-intro {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: var(--s-4);
}

/* Waveform canvas */
.waveform-wrap {
  height: 120px;
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--s-3);
  border: 1px solid var(--border);
}
.waveform-wrap canvas { width:100% !important; height:100% !important; }

.waveform-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.waveform-controls button {
  padding: .5rem 1.25rem;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--t-snap), transform var(--t-fast) var(--ease);
}
.waveform-controls button:hover { background: var(--gold-bright); transform: scale(1.04); }
.bpm-readout {
  font-family: 'Syne', sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
}
.bpm-readout small { font-size: var(--t-xs); color: var(--muted); font-weight: 400; letter-spacing: .1em; }

/* Mix deck */
.mix-deck {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: var(--s-2);
  align-items: center;
}
.mix-channel-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.fader-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-bottom: .4rem;
}
.fader-label span:last-child { color: var(--gold); font-weight: 600; }
.xfader-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  font-size: 9px;
  color: var(--muted-2);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Range inputs */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(201,162,39,.18);
}

/* Audio tracks */
.audio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.audio-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--s-3);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  transition: border-color var(--t-fast);
}
.audio-card:hover { border-color: var(--border-gold); }
.audio-cover {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-color: var(--surface-3);
  flex-shrink: 0;
}
.audio-copy { flex: 1; min-width: 0; }
.audio-copy h3 { font-size: var(--t-sm); color: var(--white); margin-bottom: var(--s-1); }
.audio-copy p  { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-2); line-height: 1.6; }
.audio-copy audio { width: 100%; height: 32px; }

/* ─────────────────────────────────────────────────────────────
   PROJECT REELS
───────────────────────────────────────────────────────────── */
.reels-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.reels-header p {
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 280px;
  line-height: 1.65;
}
.reels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.reel-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    border-color var(--t-fast),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.reel-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,.5);
}
.reel-media {
  aspect-ratio: 16/9;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.reel-media iframe,
.reel-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: var(--muted);
}
.reel-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(201,162,39,.08);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reel-icon svg { color: var(--gold); }
.reel-placeholder p { font-size: var(--t-xs); letter-spacing: .08em; }

/* Toggle bar */
.reel-toggle {
  display: flex;
  padding: var(--s-2) var(--s-2) 0;
  gap: 2px;
}
.reel-src-btn {
  flex: 1;
  padding: .5rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius);
  transition: color var(--t-snap), background var(--t-snap), border-color var(--t-snap);
}
.reel-src-btn.active { background: var(--gold); color: #000; border-color: var(--gold); }

.reel-input-zone { padding: var(--s-1) var(--s-2) 0; }
.reel-url-row { display: flex; gap: var(--s-1); }
.reel-url-row input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .875rem;
  color: var(--white);
  font-size: var(--t-xs);
  outline: none;
  transition: border-color var(--t-fast);
}
.reel-url-row input:focus { border-color: var(--gold); }
.reel-url-row input::placeholder { color: var(--muted-2); }
.reel-embed-btn {
  padding: .55rem 1rem;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-snap), transform var(--t-fast) var(--ease);
}
.reel-embed-btn:hover { background: var(--gold-bright); transform: scale(1.04); }

.reel-file-row { display: flex; align-items: center; gap: var(--s-1); }
.reel-file-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  background: var(--gold);
  color: #000;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-snap), transform var(--t-fast) var(--ease);
}
.reel-file-label:hover { background: var(--gold-bright); transform: scale(1.04); }
input.reel-file-input { display: none; }
.reel-filename { font-size: var(--t-xs); color: var(--muted); }

.reel-info { padding: var(--s-2) var(--s-3) var(--s-3); }
.reel-info h3 { font-size: var(--t-sm); margin-bottom: 4px; color: var(--white); }
.reel-info p  { font-size: var(--t-xs); color: var(--muted); line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────
   ACOUSTICS PANEL
───────────────────────────────────────────────────────────── */
.acoustics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.acoustics-media { display: flex; flex-direction: column; gap: var(--s-3); }
.acoustic-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.acoustic-card:hover { border-color: var(--border-gold); }
.acoustic-card-head { padding: var(--s-3) var(--s-4) 0; }
.acoustic-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.acoustic-card-foot {
  padding: var(--s-2) var(--s-4) var(--s-3);
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.65;
}

/* RT60 bars */
.rt60-bars {
  display: flex;
  gap: var(--s-2);
  height: 72px;
  align-items: flex-end;
  margin-top: var(--s-3);
}
.rt60-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.rt60-bar-col span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.rt60-bar-fill {
  width: 100%;
  background: linear-gradient(to top, var(--gold), rgba(232,197,71,.3));
  border-radius: 3px 3px 0 0;
  transition: height 450ms var(--ease-out);
  min-height: 4px;
}

/* Speaker room visualiser */
.speaker-room {
  margin-top: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.speaker-room-box {
  position: relative;
  height: 160px;
}
.speaker-node {
  position: absolute;
  width: 38px; height: 38px;
  background: var(--gold);
  color: #000;
  font-size: var(--t-xs);
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  z-index: 2;
  /* 0ms delay, instant position + hover */
  transition: transform var(--t-snap), box-shadow var(--t-fast);
  box-shadow: 0 4px 16px rgba(201,162,39,.3);
}
.speaker-node:hover { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(201,162,39,.12), 0 4px 20px rgba(201,162,39,.4); }
.speaker-node-L { left: 20%; top: 16%; }
.speaker-node-R { right: 20%; top: 16%; }
.listener-node {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .3rem .75rem;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 2;
}
.speaker-triangle { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────
   CONVERSION STRIP
───────────────────────────────────────────────────────────── */
.conversion {
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(201,162,39,.06) 0%, transparent 70%),
    var(--surface);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
}
.conversion-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-8);
  align-items: center;
}
.conversion-inner h2 { margin-bottom: var(--s-2); }
.conversion-inner p  { color: var(--muted); font-size: var(--t-md); }
.conversion-actions { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; }

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-top: var(--s-12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-10);
}
.footer-brand-logo {
  margin-bottom: var(--s-3);
}
.footer-brand-logo img {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.footer-brand-name {
  font-family: 'Syne', sans-serif;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s-1);
  letter-spacing: -.01em;
}
.footer-brand-desc {
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.75;
  max-width: 300px;
}
.footer-col h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col ul a {
  font-size: var(--t-sm);
  color: var(--muted);
  transition: color var(--t-snap), padding-left var(--t-fast) var(--ease);
}
.footer-col ul a:hover { color: var(--gold); padding-left: 6px; }

.footer-legal {
  border-top: 1px solid var(--border);
  padding-block: var(--s-4);
  text-align: center;
}
.footer-legal p {
  font-size: var(--t-xs);
  color: var(--muted-2);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 100ms; }
[data-reveal][data-delay="2"] { transition-delay: 200ms; }
[data-reveal][data-delay="3"] { transition-delay: 300ms; }

/* ─────────────────────────────────────────────────────────────
   INNER PAGES
───────────────────────────────────────────────────────────── */
.inner-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--header-h) + var(--s-10)) 0 var(--s-8);
}
.inner-hero h1 { color: var(--white); }
.inner-content { padding-block: var(--s-10) var(--s-16); }
.page-content { max-width: 760px; }
.page-content h2 { color: var(--white); margin: var(--s-6) 0 var(--s-2); }
.page-content h3 { color: var(--white); margin: var(--s-4) 0 var(--s-1); }
.page-content p  { color: var(--muted); margin-bottom: var(--s-3); }
.page-content a  { color: var(--gold); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-10) var(--s-8); }
  .hero-side  { flex-direction: row; justify-content: flex-start; align-items: stretch; gap: var(--s-3); }
  .state-tabs { flex-direction: row; flex-wrap: wrap; gap: var(--s-1); }
  .state-tab  { flex: 1; min-width: 140px; }
  .auto-slide-hint { display: none; }
  .rail-grid  { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .reels-grid { grid-template-columns: 1fr; }
  .acoustics-grid { grid-template-columns: 1fr; }
  .dj-tool-grid { grid-template-columns: 1fr; }
  .audio-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-menu   { display: none; }
  .nav-toggle { display: flex; }
  .nav-shell.open { display: flex; }
  .nav-shell {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(7,7,7,.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-5);
    z-index: 999;
  }
  .nav-shell .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
  }
  .nav-shell .nav-menu a { font-size: var(--t-lg); letter-spacing: .06em; }
  .rail-grid { grid-template-columns: 1fr; }
  .reels-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .conversion-inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .conversion-actions { align-items: flex-start; }
  .showcase-tab-bar { width: 100%; }
  .showcase-tab { flex: 1; padding: .65rem .875rem; }
}
@media (max-width: 480px) {
  .hero-headline { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .state-tabs { flex-direction: column; }
  .audio-card { flex-direction: column; }
  .audio-cover { width: 100%; height: 160px; border-radius: var(--radius); }
}

/* ─────────────────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────────────────── */
.contact-hero { padding-bottom: var(--s-6); }
.contact-hero-sub {
  font-size: var(--t-md);
  color: rgba(232,232,232,.5);
  max-width: 520px;
  line-height: 1.75;
  margin-top: var(--s-2);
  font-weight: 300;
}

/* Two-column layout: form left, info right */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(var(--s-6), 6vw, var(--s-16));
  align-items: start;
}

/* ── Form ── */
.contact-form { display: flex; flex-direction: column; gap: var(--s-4); }

.contact-honeypot { /* hidden from humans */
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.contact-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.contact-field { display: flex; flex-direction: column; gap: var(--s-1); }

.contact-field label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-field .required { color: var(--gold); }
.contact-field .optional { color: var(--muted-2); font-weight: 400; text-transform: none; letter-spacing: 0; }

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field select,
.contact-field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--t-base);
  font-weight: 300;
  outline: none;
  /* 0ms delay — border colour snaps instantly on focus */
  transition: border-color var(--t-snap), box-shadow var(--t-fast);
  width: 100%;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.12);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--muted-2); }
.contact-field select { cursor: pointer; }
/* Dropdown arrow */
.contact-field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.contact-field select option { background: var(--surface-3); color: var(--white); }

.contact-field textarea { resize: vertical; min-height: 160px; line-height: 1.7; }

/* Submit row */
.contact-submit-row { display: flex; flex-direction: column; gap: var(--s-2); }
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  align-self: flex-start;
  font-size: var(--t-sm);
  padding: 1rem 2.25rem;
}
.contact-submit svg { flex-shrink: 0; }
.contact-privacy {
  font-size: var(--t-xs);
  color: var(--muted-2);
  line-height: 1.65;
  max-width: 400px;
}

/* Feedback states */
.contact-feedback {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-4);
}
.contact-success {
  background: rgba(52,199,89,.07);
  border: 1px solid rgba(52,199,89,.25);
  color: rgba(52,199,89,.9);
}
.contact-success h3 { color: rgba(52,199,89,.95); font-size: var(--t-lg); margin-bottom: var(--s-1); }
.contact-success p  { color: rgba(232,232,232,.65); font-size: var(--t-sm); line-height: 1.7; margin-bottom: var(--s-3); }
.contact-feedback-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(52,199,89,.1);
  border: 1px solid rgba(52,199,89,.2);
  display: flex; align-items: center; justify-content: center;
}
.contact-back-btn { align-self: flex-start; }

.contact-error {
  background: rgba(255,69,58,.07);
  border: 1px solid rgba(255,69,58,.25);
  color: rgba(255,69,58,.85);
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-3);
}
.contact-error svg { flex-shrink: 0; margin-top: 2px; }
.contact-error p { margin: 0; }

/* ── Info sidebar ── */
.contact-info-col { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-info-block {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.contact-info-block .kicker { margin-bottom: var(--s-2); }
.contact-info-text { font-size: var(--t-sm); color: var(--muted); line-height: 1.75; }
.contact-info-text strong { color: var(--white); font-weight: 600; }

.contact-tip-list { display: flex; flex-direction: column; gap: var(--s-2); }
.contact-tip-list li {
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.7;
  padding-left: var(--s-2);
  border-left: 2px solid var(--border-gold);
}
.contact-tip-list li span {
  display: block;
  font-weight: 700;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-links-grid { display: flex; flex-direction: column; gap: 6px; }
.contact-area-link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: .625rem var(--s-2);
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* 0ms delay */
  transition: color var(--t-snap), border-color var(--t-snap), background var(--t-fast);
}
.contact-area-link:hover {
  color: var(--white);
  border-color: var(--border-gold);
  background: var(--gold-dim);
}
.contact-area-num {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  width: 24px;
  flex-shrink: 0;
}

/* Responsive contact */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-col { order: -1; } /* info block goes above form on mobile */
}
@media (max-width: 560px) {
  .contact-row-2 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   PRODUCTION REEL — public-facing "coming soon" placeholder
   Replaces the upload UI for non-admin visitors (Issue 2)
───────────────────────────────────────────────────────────── */
.reel-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  text-align: center;
}
.reel-coming-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  padding: .25rem .875rem;
  border-radius: 100px;
  background: var(--gold-dim);
}
.reel-coming-soon p { font-size: var(--t-xs); color: var(--muted); line-height: 1.65; }

/* Admin-only upload controls — hidden by default, shown only to logged-in admins */
.reel-admin-controls { display: none; }
.logged-in .reel-admin-controls { display: block; }
/* WordPress adds .logged-in to <body> for authenticated users */