/* Valor Sound, direction C: Soundcheck.
   One instrument: every section runs on the logo's 120 BPM clock. Rack hardware, LED meters,
   faders and silkscreen labels on a deep Blackout base, Valor Blue slabs for price and booking.
   Display: Anybody (wdth 50 to 150). Text and labels: Mona Sans (wdth 75 to 125). */

@font-face { font-family: "Anybody"; src: url(fonts/anybody-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url(fonts/monasans-latin.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
/* Fallback for the hero line while Anybody loads: Arial (Roboto on Android) scaled so "Clear vows."
   stays on one line at every phone width; with nowrap the line box keeps its height when Anybody swaps in. */
@font-face { font-family: "Anybody Hero Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 62%; }

@property --eq { syntax: "<number>"; inherits: false; initial-value: 112; }
@property --fade { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --blackout: #07080c;
  --rack: #0e1017;
  --rack-2: #141722;
  --rack-3: #1b1f2c;
  --cable: #232838;
  --cable-2: #333a50;
  --house: #f4f5f8;
  --text: #c6cbd9;
  --monitor: #9aa1b8;
  --signal: #5b7cff;
  --valor: #2e4bff;
  --valor-deep: #1a2bb0;
  --tint: #e0e5ff;
  --clip: #ff3b47;
  --sound: #cb0b0b;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --plate: linear(0, .2 7%, .56 17%, .84 27%, 1.02 37%, 1.08 45%, 1.07 53%, 1.03 63%, 1 73%, .995 84%, 1);
  --display: "Anybody", "Arial Narrow", sans-serif;
  --sans: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --gut: 16px;
  --hdr: 56px;
  --vh: min(1svh, 11.5px);
  --sec: clamp(64px, 8vw, 112px);
  --distress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 0 0 0 6.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px;
  --grille: radial-gradient(circle, rgb(255 255 255 / .045) 1px, transparent 1.6px) 0 0 / 6px 6px;
  --grille-blue: radial-gradient(circle, rgb(255 255 255 / .1) 1px, transparent 1.6px) 0 0 / 6px 6px;
  color-scheme: dark;
}
@media (min-width: 600px) { :root { --gut: 24px; } }
@media (min-width: 1024px) { :root { --gut: 40px; --hdr: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--blackout);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--hdr) + 12px);
  scrollbar-color: #2b3144 var(--blackout);
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--blackout);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--signal);
  overflow-x: clip;
}
::selection { background: var(--valor); color: #fff; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, label, summary, input, select { touch-action: manipulation; }
button, .pad, .key, .chip, .tpad, .svc-chip, summary { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--focus, var(--signal)); outline-offset: 3px; border-radius: 8px; }
.menu, .pricing, .inquiry { --focus: #fff; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:has(use) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 99; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--blackout); font-weight: 700; transform: translateY(-160%); transition: transform 200ms var(--ease-out); }
.skip:focus { transform: none; }
.wrap { width: min(1280px, 100% - 2 * var(--gut)); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }

/* Type */
.h2 {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" var(--w1, 112), "wght" var(--g1, 800);
  font-size: clamp(2.4rem, 1.3rem + 5.2vw, 5.25rem); line-height: 1; letter-spacing: -.02em;
  color: var(--house); text-wrap: balance;
}
.h3 { font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: 1.25rem; line-height: 1.1; color: var(--house); letter-spacing: -.005em; }
.lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem); line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.body, .bio p { max-width: 62ch; text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; color: var(--monitor); }
.silk { font: 600 11px/1.25 var(--sans); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--monitor); transition: font-stretch 200ms var(--ease-out); }
.link { padding-block: 10px; color: var(--house); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* LEDs */
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cable-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); flex: none; transition: background-color 120ms linear, box-shadow 120ms linear; }
.led.is-on { background: #7d97ff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }

/* Buttons */
.btn-main {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 6px 8px 6px 22px; border: 0; border-radius: 999px;
  background: var(--valor); color: #fff; text-decoration: none;
  font: 700 15px/1.15 var(--sans); font-stretch: 112%; letter-spacing: .005em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 12px 26px -14px rgb(0 0 0 / .7);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .16); transition: transform 240ms var(--ease-out), background-color 200ms ease; flex: none; }
.btn-dot svg { width: 16px; height: 16px; stroke-width: 2; }
.btn-main:active { transform: scale(.97); }
.btn-white { background: #fff; color: var(--valor-deep); box-shadow: 0 12px 26px -16px rgb(0 0 0 / .55); }
.btn-white .btn-dot { background: var(--valor); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn-main:hover { background: #3c58ff; }
  .btn-white:hover { background: #eef1ff; }
  .btn-main:hover .btn-dot { transform: translateX(3px); }
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; min-width: 52px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .22); background: rgb(7 8 12 / .42); color: #fff;
  text-decoration: none; font: 600 15px/1 var(--sans); font-stretch: 108%;
  transition: transform 160ms var(--ease-out), border-color 200ms ease, background-color 200ms ease;
}
.btn-ghost:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: rgb(255 255 255 / .55); background: rgb(7 8 12 / .62); } }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0;
  font: 650 14px/1 var(--sans); font-stretch: 108%; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.pill:active { transform: scale(.97); }
.pill svg { width: 18px; height: 18px; }
.pill-blue { background: var(--valor); color: #fff; }
.pill-white { background: #fff; color: var(--valor-deep); }
.pill-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); }
@media (hover: hover) and (pointer: fine) {
  .pill-blue:hover { background: #3c58ff; }
  .pill-line:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
}
.round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rack-2); color: var(--house); box-shadow: inset 0 0 0 1px var(--cable-2); transition: transform 160ms var(--ease-out), background-color 200ms; }
.round:active { transform: scale(.94); }
.round[aria-pressed="true"] { background: var(--valor); box-shadow: none; }

/* Screens: media in a hardware bezel */
.screen { position: relative; border-radius: 14px; overflow: hidden; background: var(--rack); isolation: isolate; box-shadow: 0 30px 60px -34px rgb(0 0 0 / .8); }
.screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); pointer-events: none; z-index: 4; }
.screen > video, .screen > img { width: 100%; height: 100%; object-fit: cover; }
.screen-cap {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  background: var(--rack-2); border-top: 1px solid var(--cable);
  font: 600 11px/1 var(--sans); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.cap-sep { width: 1px; height: 12px; background: var(--cable-2); }
.vplay { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: none; background: rgb(7 8 12 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.vplay svg { width: 18px; height: 18px; }
.screen-cap ~ .vplay, .parties-screen .vplay { bottom: 52px; }
.wed-screen .vplay { left: auto; right: 12px; bottom: 12px; }
.fit-band .vplay { left: auto; right: var(--gut); bottom: 24px; }
.manual .vplay { display: grid; }

/* Power-on: a 3 by 4 grid of dark cells that flickers out diagonally, once per frame */
.po { position: absolute; inset: 0; z-index: 3; display: grid; grid-template: repeat(4, 1fr) / repeat(3, 1fr); pointer-events: none; }
.po i { background: var(--rack) var(--grille); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .03); }

/* Light cues: three house colors, one fixed layer, crossfaded by section */
.cues { position: fixed; inset: 0; z-index: 30; pointer-events: none; contain: strict; }
.cues i { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.cues [data-c="tungsten"] { background: radial-gradient(80% 50% at 50% -14%, rgb(255 168 88 / .12), transparent 72%), radial-gradient(60% 40% at 100% 110%, rgb(255 168 88 / .06), transparent 70%); }
.cues [data-c="royal"] { background: radial-gradient(80% 50% at 50% -14%, rgb(46 75 255 / .12), transparent 72%), radial-gradient(60% 40% at 0% 110%, rgb(46 75 255 / .08), transparent 70%); }
.cues [data-c="white"] { background: radial-gradient(80% 50% at 50% -14%, rgb(214 226 255 / .08), transparent 72%); }
html[data-cue="tungsten"] .cues [data-c="tungsten"], html[data-cue="royal"] .cues [data-c="royal"], html[data-cue="white"] .cues [data-c="white"] { opacity: 1; }

/* Header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: calc(var(--hdr) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); transition: transform 280ms var(--ease-out); }
.hdr::before { content: ""; position: absolute; inset: 0; background: rgb(7 8 12 / .8); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--cable); opacity: 0; transition: opacity 280ms ease; }
html.docked .hdr::before { opacity: 1; }
html.hdr-hide .hdr { transform: translateY(-100%); }
.hdr-row { position: relative; height: 100%; display: flex; align-items: center; gap: 10px; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)); }
.hdr-brand { display: block; padding-block: 7px; border-radius: 8px; }
.hdr-logo { display: block; width: 116px; aspect-ratio: 1402 / 378; opacity: 0; transform: translateY(6px) scale(.9); filter: blur(2px); transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out), filter 360ms var(--ease-out); }
html.docked .hdr-logo { opacity: 1; transform: none; filter: none; }
.hdr-logo .vl { width: 100%; height: 100%; }
.hdr-brand:focus-visible .hdr-logo { opacity: 1; transform: none; filter: none; }
.hdr-nav { display: none; margin-left: auto; gap: 26px; }
.hdr-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: 600 14px/1 var(--sans); font-stretch: 110%; color: var(--text); text-decoration: none; transition: color 160ms ease; }
.hdr-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--signal) 0 calc(12.5% - 2px), transparent calc(12.5% - 2px) 12.5%);
  clip-path: inset(0 100% 0 0); transition: clip-path 160ms steps(8, end);
}
.hdr-nav a[aria-current="true"] { color: var(--house); }
.hdr-nav a[aria-current="true"]::after { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) { .hdr-nav a:hover { color: var(--house); } .hdr-nav a:hover::after { clip-path: inset(0 0 0 0); } }
.hdr-motion { display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: color 160ms, box-shadow 160ms, background-color 160ms; }
.hdr-motion[aria-pressed="true"] { color: #fff; background: var(--valor); box-shadow: none; }
.hdr-cta { display: none; }
.hdr-burger { margin-left: auto; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(7 8 12 / .4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.hdr-burger span:not(.sr-only), .menu-x span:not(.sr-only) { position: absolute; left: 13px; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-out); }
.hdr-burger span:nth-child(1) { top: 18px; } .hdr-burger span:nth-child(2) { top: 25px; }
@media (min-width: 600px) { .hdr-cta { display: inline-flex; } .hdr-burger { margin-left: 0; } .hdr-cta { margin-left: auto; } }
@media (min-width: 1024px) {
  .hdr-logo { width: 136px; }
  .hdr-nav { display: flex; }
  .hdr-motion { display: grid; }
  .hdr-cta { margin-left: 8px; }
  .hdr-burger { display: none; }
}

/* VU meter: 24 segments, lit by scroll; the 3 red peaks light only at the booking form */
.vu { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.vu::before, .vu i { position: absolute; top: 0; bottom: 0; }
.vu::before { content: ""; left: 0; right: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 calc(100% / 24 - 2px), transparent calc(100% / 24 - 2px) calc(100% / 24)); }
.vu-lit { left: 0; right: 12.5%; background: repeating-linear-gradient(90deg, var(--signal) 0 calc(100% / 21 - 2px), transparent calc(100% / 21 - 2px) calc(100% / 21)); clip-path: inset(0 calc(100% - var(--vu, 0) * 100%) 0 0); }
.vu-peak { left: 87.5%; right: 0; background: repeating-linear-gradient(90deg, var(--clip) 0 calc(100% / 3 - 2px), transparent calc(100% / 3 - 2px) calc(100% / 3)); opacity: 0; transition: opacity 200ms linear; }
html[data-zone="inquiry"] .vu-peak { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .vu-lit { animation: vu-fill linear both; animation-timeline: scroll(root); clip-path: none; }
  @keyframes vu-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
.vu.slam .vu-lit, .vu.slam::before { animation: vu-slam 900ms var(--ease-out) both; }
.vu.slam .vu-peak { opacity: 1; }
@keyframes vu-slam { 0% { filter: none; } 8% { filter: hue-rotate(140deg) saturate(4) brightness(1.4); clip-path: inset(0 0 0 0); } 100% { filter: none; } }

/* Mobile menu: a Valor Blue sheet that opens as a circle from the menu button */
.menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: var(--valor) var(--grille-blue); color: #fff; overflow-y: auto; overscroll-behavior: contain;
  flex-direction: column;
  clip-path: circle(0 at var(--mx, calc(100% - 38px)) var(--my, 28px));
  transition: clip-path 360ms var(--ease-io), display 360ms allow-discrete, overlay 360ms allow-discrete;
}
.menu[open] { display: flex; clip-path: circle(150vmax at var(--mx, calc(100% - 38px)) var(--my, 28px)); }
@starting-style { .menu[open] { clip-path: circle(0 at var(--mx, calc(100% - 38px)) var(--my, 28px)); } }
.menu::backdrop { background: transparent; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); }
.menu-note { font: 600 13px/1 var(--sans); font-stretch: 115%; letter-spacing: .06em; text-transform: uppercase; color: var(--tint); }
.menu-x { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .14); color: #fff; }
.menu-x span:not(.sr-only) { top: 21px; }
.menu-x span:nth-child(1) { transform: rotate(45deg); } .menu-x span:nth-child(2) { transform: rotate(-45deg); }
@starting-style { .menu[open] .menu-x span:nth-child(1) { transform: translateY(-3.5px); } .menu[open] .menu-x span:nth-child(2) { transform: translateY(3.5px); } }
.menu-links { list-style: none; margin: 18px 0 28px; }
.menu-links a {
  display: block; padding: 4px 0; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-stretch: 130%; font-size: 44px; line-height: 1.08; letter-spacing: -.01em;
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.menu-links li:nth-child(1) a { transition-delay: 120ms; } .menu-links li:nth-child(2) a { transition-delay: 160ms; }
.menu-links li:nth-child(3) a { transition-delay: 200ms; } .menu-links li:nth-child(4) a { transition-delay: 240ms; }
.menu-links li:nth-child(5) a { transition-delay: 280ms; } .menu-links li:nth-child(6) a { transition-delay: 320ms; }
.menu-links li:nth-child(7) a { transition-delay: 360ms; }
@starting-style { .menu[open] .menu-links a { opacity: 0; transform: translateY(26px); } }
.menu-actions { display: grid; gap: 10px; margin-top: auto; }
.menu-actions .pill { min-height: 52px; font-size: 16px; }

/* HERO */
.hero { position: relative; min-height: calc(100 * var(--vh)); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 4px) var(--gut) 26px; overflow: clip; isolation: isolate; text-align: center; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--blackout); }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-video { opacity: 0; transition: opacity 700ms ease; transform-origin: 50% 45%; }
.hero-video.is-playing { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; background:
  radial-gradient(70% 46% at 50% 44%, rgb(7 8 12 / .5), rgb(7 8 12 / 0) 100%),
  linear-gradient(180deg, rgb(7 8 12 / .75) 0%, rgb(7 8 12 / .55) 22%, rgb(7 8 12 / .5) 52%, rgb(7 8 12 / .88) 82%, var(--blackout) 100%); }
.hero-core { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-badge { --hb: min(62vw, 330px); position: relative; width: var(--hb); margin-block: calc(var(--hb) * -.13) calc(var(--hb) * -.09); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-badge .vl { width: 100%; }
.hero-ring { position: absolute; left: 50%; top: 28%; width: 92%; aspect-ratio: 2.6; border-radius: 50%; border: 1.5px solid var(--signal); transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; }
.hero-title { display: flex; flex-direction: column; align-items: center; font-family: var(--display); color: var(--house); }
.h-vows { display: block; font-family: "Anybody", "Anybody Hero Fallback", sans-serif; font-weight: 300; font-stretch: 60%; font-size: min(27vw, 9.5rem); line-height: .8; letter-spacing: -.01em; white-space: nowrap; color: var(--text); text-shadow: 0 2px 22px rgb(7 8 12 / .85), 0 0 2px rgb(7 8 12 / .6); }
.h-floor { display: flex; flex-direction: column; align-items: center; font-size: min(18.3vw, 5.9rem); margin-top: .1em; animation: none; }
.eq-line { display: flex; height: .84em; line-height: .84; }
.eq {
  position: relative; display: block; width: calc(var(--cw) * 1em); height: .84em; contain: layout paint;
  font-weight: 900; font-variation-settings: "wdth" calc(var(--eq) - (var(--eq) - 70) * var(--fade)), "wght" calc(900 - 500 * var(--fade));
}
.eq > i { position: absolute; left: 50%; top: 0; font-style: normal; white-space: nowrap; transform: translateX(-50%); }
.eq-dot { color: var(--clip); --eq: 100; }
@supports (animation-timeline: view()) {
  html:not(.reduced):not(.paused) .h-floor { animation: eq-fader linear both; animation-timeline: view(); animation-range: exit 5% exit 85%; }
  @keyframes eq-fader { to { --fade: 1; } }
}
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
.hero-sub { max-width: 34ch; font-size: 15px; font-weight: 400; line-height: 1.5; color: rgb(244 245 248 / .88); text-wrap: balance; }
.hero-actions { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 420px; }
.hero-actions .btn-main { flex: 1; }
.hero-actions .btn-ghost { padding: 0; width: 52px; }
.hero-actions .btn-ghost .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.status-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1.2 var(--sans); font-stretch: 112%; letter-spacing: .02em; color: var(--text); }
.tminus { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 16px 4px 12px; border-radius: 999px; background: rgb(7 8 12 / .6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font: 600 13px/1.2 var(--sans); font-stretch: 110%; color: #fff; }
.tm-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.tm-pick svg { width: 18px; height: 18px; color: var(--signal); }
.tm-pick span { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tminus:focus-within { outline: 2px solid var(--focus, var(--signal)); outline-offset: 2px; }
.tminus.is-typing .tm-date { opacity: 1; z-index: 1; padding-inline: 10px; border: 0; border-radius: 999px; background: #0b0d14; color: #fff; color-scheme: dark; }
.tm-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.tm-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.tm-count { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.tm-t { color: var(--monitor); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tm-count .odo { font-family: var(--display); font-weight: 800; font-stretch: 120%; font-size: 18px; }
.tm-unit { color: var(--text); }
.tm-clock { color: var(--monitor); min-width: 8ch; }
.tminus.has-date .tm-pick span { text-decoration: none; }
@media (min-width: 420px) {
  .hero-actions .btn-ghost { width: auto; padding: 0 16px; }
  .hero-actions .btn-ghost .lbl { position: static; width: auto; height: auto; clip: auto; }
  .hero-actions { max-width: none; }
  .hero-actions .btn-main { flex: none; }
}
@media (min-width: 900px) and (max-width: 1179.98px) {
  .hero-badge { --hb: min(330px, calc(36 * var(--vh))); }
  .h-vows { font-size: min(9.5rem, calc(15 * var(--vh))); }
  .h-floor { font-size: min(5.9rem, calc(10 * var(--vh))); }
  .hero-sub { font-size: 17px; max-width: 46ch; }
  .status-wrap { flex-direction: row; gap: 14px; }
}
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--hdr) + 20px); padding-bottom: 36px; }
  .hero-scrim { background:
    linear-gradient(180deg, rgb(7 8 12 / .82) 0, rgb(7 8 12 / 0) 110px),
    radial-gradient(42% 52% at 50% 40%, rgb(7 8 12 / .2), rgb(7 8 12 / 0) 100%),
    linear-gradient(90deg, rgb(7 8 12 / .84) 0%, rgb(7 8 12 / .62) 32%, rgb(7 8 12 / .3) 50%, rgb(7 8 12 / .62) 68%, rgb(7 8 12 / .84) 100%),
    linear-gradient(180deg, rgb(7 8 12 / .55) 0%, transparent 24%, rgb(7 8 12 / .3) 50%, rgb(7 8 12 / .82) 74%, var(--blackout) 100%); }
}
@media (min-width: 1180px) {
  .hero-core {
    --B: min(32vw, 460px, calc(54 * var(--vh))); --cg: clamp(28px, 2.6vw, 44px);
    --ff: min(calc((100vw - 2 * var(--gut) - var(--B) - 2 * var(--cg)) / 2 / 5.05), 6.6rem);
    --fv: calc(var(--ff) * 1.8);
    display: grid; grid-template-columns: 1fr var(--B) 1fr; column-gap: var(--cg); align-items: start; width: 100%; max-width: 1440px; margin-inline: auto;
    padding-top: max(0px, calc(var(--fv) * .8 - var(--B) * .16 - var(--B) * .06));
  }
  .hero-badge { grid-area: 1 / 2; width: var(--B); margin: calc(var(--B) * -.12) 0 calc(var(--B) * -.17); z-index: 1; }
  .hero-title { grid-area: 1 / 1 / 2 / 4; display: grid; grid-template-columns: 1fr var(--B) 1fr; column-gap: var(--cg); align-items: center; margin-top: calc(var(--B) * .16 - var(--fv) * .8); }
  .h-vows { grid-column: 1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: var(--fv); }
  .h-floor { grid-column: 3; justify-self: start; align-items: flex-start; font-size: var(--ff); margin-top: 0; }
  .hero-copy { margin-top: 26px; gap: 16px; }
  .hero-sub { font-size: 17px; max-width: 46ch; }
  .status-wrap { flex-direction: row; gap: 14px; }
}

/* Odometer */
.odo-cols { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.08em; }
.odo-col { display: block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); }
.odo-strip span, .odo-fix { display: block; height: 1em; line-height: 1; text-align: center; }
.odo { font-variant-numeric: tabular-nums; }

/* SPEC SHEET */
.spec { position: relative; background: var(--rack) var(--grille); border-block: 1px solid var(--cable); }
.spec-row { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cable); max-width: 1440px; margin-inline: auto; }
.spec-cell { position: relative; display: grid; align-content: start; gap: 12px; padding: 20px var(--gut) 22px; background: var(--rack) var(--grille); }
.spec-wide { grid-column: 1 / -1; }
.spec-led { position: absolute; top: 22px; right: var(--gut); }
.spec-val { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem); line-height: 1; color: var(--house); letter-spacing: -.01em; }
.spec-val small { font: 500 12px/1 var(--sans); font-stretch: 105%; color: var(--monitor); letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .spec-cell:hover .silk { font-stretch: 125%; color: var(--text); } }
@media (min-width: 900px) {
  /* content-sized columns: values sit on one line when the row has room (1440 and up) and wrap
     instead of running off the screen on laptops or under text-spacing overrides */
  .spec-row { grid-template-columns: repeat(5, auto); }
  .spec-val { font-size: clamp(1.4rem, .7rem + 1.25vw, 1.9rem); text-wrap: balance; }
  .spec-wide { grid-column: auto; }
  .spec-cell { padding: 26px 28px 30px; }
  .spec-led { right: 28px; top: 28px; }
}

/* Rack rail: one cable divider per section, a silkscreen channel label and an LED that lights on the beat */
.rail { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(40px, 6vw, 80px); font: 600 11px/1 var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--monitor); }
.rail-ch { color: var(--house); font-variant-numeric: tabular-nums; }
.rail-line { flex: 1; height: 1px; background: var(--cable-2); transform-origin: left; }
.rail-led.is-on { background: #8fa5ff; }
.rail-on-blue { color: var(--tint); }
.rail-on-blue .rail-ch { color: #fff; }
.rail-on-blue .rail-line { background: rgb(255 255 255 / .32); }
.rail-on-blue .rail-led { background: rgb(255 255 255 / .3); }
.rail-on-blue .rail-led.is-on { background: #fff; }
@supports (animation-timeline: view()) {
  html:not(.reduced):not(.paused) .rail-line { animation: rail-draw linear forwards; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes rail-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Headline sweep: every section headline moves through the same width and weight axes as the hero EQ.
   Each word keeps its final width reserved (the hidden ::before), so nothing reflows while it sweeps. */
.w { position: relative; display: inline-block; }
.w::before { content: attr(data-w); visibility: hidden; }
.w-in { position: absolute; left: 0; top: 0; white-space: nowrap; }
@supports (animation-timeline: view()) {
  html:not(.reduced):not(.paused) .w-in { animation: h-sweep linear forwards; animation-timeline: view(); animation-range: entry 0% cover calc(20% + min(var(--i, 0), 8) * 1.6%); }
  @keyframes h-sweep { from { font-variation-settings: "wdth" calc(var(--w1, 112) * .68), "wght" 340; } to { font-variation-settings: "wdth" var(--w1, 112), "wght" var(--g1, 800); } }
}

/* WEDDINGS: the day as a waveform */
.wed { padding-top: var(--sec); }
.wed-head { display: grid; gap: 20px; margin-bottom: 36px; }
@media (min-width: 1024px) { .wed-head { grid-template-columns: 7fr 5fr; align-items: end; gap: 48px; margin-bottom: 56px; } }
.wed-grid { position: relative; }
.wed-stage { position: sticky; top: var(--hdr); z-index: 2; margin-inline: calc(-1 * var(--gut)); background: var(--blackout); transition: top 260ms var(--ease-out); }
html.hdr-hide .wed-stage { top: 0; }
.wed-screen { position: relative; height: calc(34 * var(--vh)); overflow: hidden; background: var(--rack); }
.wed-screen::after { content: ""; position: absolute; inset: auto 0 0; height: 60%; background: linear-gradient(0deg, rgb(7 8 12 / .92), transparent); pointer-events: none; }
.wed-media, .wm { position: absolute; inset: 0; }
.wm { clip-path: inset(0 0 0 100%); }
.wm.is-on { clip-path: inset(0 0 0 0); }
.wm video, .wm img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.flap {
  position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: .55em; align-items: center;
  padding: 7px 10px; border-radius: 8px; background: rgb(7 8 12 / .8); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
  font: 700 11px/1 var(--sans); font-stretch: 125%; letter-spacing: .12em; color: var(--house); perspective: 300px;
}
.flap::before { content: ""; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--clip); }
.fw { display: inline-flex; flex-wrap: nowrap; gap: 1px; }
.fw span { display: inline-block; min-width: .5em; transform-origin: 50% 50%; backface-visibility: hidden; }
.tag-real { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 7px 10px; border-radius: 8px; background: rgb(7 8 12 / .85); font: 600 11px/1 var(--sans); font-stretch: 116%; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.wave { position: absolute; left: var(--gut); right: var(--gut); top: calc(calc(34 * var(--vh)) - 58px); height: 48px; z-index: 2; }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave-base rect { fill: rgb(255 255 255 / .24); }
.wave-played rect { fill: var(--house); }
.wave-played { clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); }
.wave-head { position: absolute; inset: -6px 0; transform: translateX(calc(var(--p, 0) * 100%)); pointer-events: none; }
.wave-head i { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--clip); }
.wave-head i::before { content: ""; position: absolute; left: -4px; top: -2px; border: 5px solid transparent; border-top-color: var(--clip); }
.no-sda .wave-head, .no-sda .wave-played { transition: transform 300ms var(--ease-out), clip-path 300ms var(--ease-out); }
.wave-marks { display: none; }
.wave-note { padding: 8px var(--gut) 10px; font: 500 11px/1.3 var(--sans); font-stretch: 105%; color: var(--monitor); border-bottom: 1px solid var(--cable); }
.moments { list-style: none; position: relative; z-index: 1; }
.moment { min-height: calc(40 * var(--vh)); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-block: 24px; color: #7e86a0; transition: color 360ms ease; }
.moment.is-on { color: var(--text); }
.moment h3 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; color: #9aa1b8; letter-spacing: -.015em; transition: color 360ms ease; }
.moment.is-on h3 { color: var(--house); }
.moment p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); max-width: 34ch; line-height: 1.5; }
.moment-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; max-width: none !important; }
.moment-cta .link { display: inline-block; padding-block: 12px; font-size: 15px; }
.nw { white-space: nowrap; }
@supports (animation-timeline: view()) {
  .wed { timeline-scope: --day; }
  .moments { view-timeline: --day block; }
  html:not(.no-sda) .wave-head { animation: day-head linear both; animation-timeline: --day; animation-range: cover var(--r0, calc(62 * var(--vh))) cover calc(100% - var(--r1, calc(82 * var(--vh)))); }
  html:not(.no-sda) .wave-played { animation: day-played linear both; animation-timeline: --day; animation-range: cover var(--r0, calc(62 * var(--vh))) cover calc(100% - var(--r1, calc(82 * var(--vh)))); }
  @keyframes day-head { from { transform: translateX(0); } to { transform: translateX(100%); } }
  @keyframes day-played { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (min-width: 1024px) {
  .wed { --r0: calc(70 * var(--vh)); --r1: calc(90 * var(--vh)); }
  .wed-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; }
  .wed-stage { top: calc(var(--hdr) + 24px); height: calc(calc(100 * var(--vh)) - var(--hdr) - 48px); margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 252px; grid-template-rows: minmax(0, 1fr) auto auto; gap: 18px 24px; align-self: start; }
  .wed-screen { grid-area: 1 / 1; height: 100%; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
  .wed-screen::after { display: none; }
  .flap {
    --t: calc((100cqi - 20px) / 6);
    position: static; grid-area: 1 / 2; align-self: center; container-type: inline-size;
    flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; background: none; box-shadow: none;
    min-height: calc((252px - 20px) / 6 * 2.6 + 6px);
    font: 800 20px/1 var(--display); font-stretch: 100%; letter-spacing: 0;
  }
  .flap::before { display: none; }
  .fw { gap: 4px; }
  .fw span { display: grid; place-items: center; width: var(--t); height: calc(var(--t) * 1.3); font-size: calc(var(--t) * .8); border-radius: 6px; background: linear-gradient(180deg, var(--rack-3) 0 50%, var(--rack-2) 50% 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 1px 0 #000; position: relative; }
  .fw span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .7); }
  .wave { position: relative; grid-column: 1 / -1; grid-row: 2; left: auto; right: auto; top: auto; height: 72px; margin-bottom: 24px; }
  .wave-marks { display: grid; grid-template-columns: repeat(6, 1fr); position: absolute; left: 0; right: 0; top: calc(100% + 8px); list-style: none; font: 600 11px/1 var(--sans); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--monitor); }
  .wave-note { grid-column: 1 / -1; grid-row: 3; padding: 0; border: 0; }
  .moments { padding-block: calc(10 * var(--vh)) calc(16 * var(--vh)); }
  .moment { min-height: calc(58 * var(--vh)); }
}

/* PARTIES: the line-dance floor bleeds off the left edge, the sampler sits half over it */
.parties { padding-top: var(--sec); }
.party-stage { position: relative; }
.party-media { position: relative; height: calc(62 * var(--vh)); min-height: 380px; margin: 0; overflow: hidden; background: var(--rack); isolation: isolate; }
.party-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.party-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(7 8 12 / .35) 0%, rgb(7 8 12 / 0) 28%, rgb(7 8 12 / .5) 62%, var(--blackout) 98%); }
.party-cap { position: absolute; left: var(--gut); top: 14px; z-index: 2; height: 32px; border: 0; border-radius: 8px; background: rgb(7 8 12 / .72); }
.party-media .vplay { left: auto; right: var(--gut); bottom: auto; top: 10px; }
.party-grid { position: relative; z-index: 2; display: grid; gap: 32px; margin-top: -128px; }
.party-copy { display: grid; gap: 18px; align-content: start; }
.price-chip { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--text); }
.price-chip .num { font-family: var(--display); font-weight: 800; font-stretch: 120%; font-size: 2.3rem; line-height: 1; color: var(--house); }
.sampler {
  position: relative; display: grid; gap: 14px; margin-inline: calc(8px - var(--gut)); padding: 18px 10px 14px; border-radius: 22px;
  background: linear-gradient(180deg, rgb(30 34 48 / .9), rgb(13 15 22 / .94));
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), inset 0 0 0 1px rgb(255 255 255 / .06), 0 40px 80px -40px rgb(0 0 0 / .9);
}
.screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #646b82, #1b1f2c 72%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5); }
.screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3.5px; height: 1px; background: rgb(0 0 0 / .65); transform: rotate(38deg); }
.screw:nth-child(1) { left: 9px; top: 9px; } .screw:nth-child(2) { right: 9px; top: 9px; }
.screw:nth-child(3) { left: 9px; bottom: 9px; } .screw:nth-child(4) { right: 9px; bottom: 9px; }
.sampler-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding-inline: 12px; }
.sampler-hint { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--sans); font-stretch: 110%; color: var(--monitor); }
.sampler > .small { padding-inline: 12px; }
.pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pad {
  --pc: 46 75 255; position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 8px 7px 7px; border: 0; border-radius: 10px; text-align: left; color: var(--house); isolation: isolate;
  background: radial-gradient(120% 95% at 50% 38%, #282d3c 0%, #181b26 58%, #10121a 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .13), inset 0 -2px 0 rgb(0 0 0 / .5), 0 2px 0 #05060a, 0 8px 16px -10px rgb(0 0 0 / .9);
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}
.pad::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(85% 80% at 50% 46%, rgb(var(--pc) / .95), rgb(var(--pc) / .32) 62%, rgb(var(--pc) / .08) 100%); opacity: 0; transition: opacity 320ms ease-out; }
.pad.is-lit::before { opacity: .5; transition-duration: 50ms; }
.pad.flash::before { opacity: 1; transition-duration: 30ms; }
.pad:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), inset 0 3px 8px rgb(0 0 0 / .65), 0 0 0 #05060a; }
.pad-name { font: 650 11.5px/1.15 var(--sans); font-stretch: 90%; text-wrap: balance; }
.pad-no { align-self: flex-end; font: 600 8.5px/1 var(--sans); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
@media (hover: hover) and (pointer: fine) { .pad:hover::before { opacity: .3; transition-duration: 120ms; } }
@media (min-width: 600px) {
  .sampler { margin-inline: 0; padding: 22px 18px 18px; }
  .pads { gap: 10px; }
  .pad { padding: 12px 11px 10px; border-radius: 12px; }
  .pad-name { font-size: 14px; font-stretch: 100%; }
  .pad-no { font-size: 9.5px; }
}
@media (min-width: 1024px) {
  .party-stage { min-height: min(calc(100 * var(--vh)), 940px); display: grid; align-items: center; }
  .party-media { position: absolute; left: 0; top: 0; bottom: 0; width: 52vw; height: auto; }
  .party-shade { background: linear-gradient(90deg, rgb(7 8 12 / .12) 0%, rgb(7 8 12 / .2) 55%, var(--blackout) 100%), linear-gradient(180deg, var(--blackout) 0%, transparent 12%, transparent 82%, var(--blackout) 100%); }
  .party-cap { left: var(--gut); top: auto; bottom: 20px; }
  .party-media .vplay { top: auto; bottom: 20px; right: 24px; }
  .party-grid { margin-top: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; padding-block: 72px 48px; }
  .party-copy { grid-column: 7 / 13; grid-row: 1; }
  .sampler { grid-column: 3 / 11; grid-row: 2; padding: 24px 22px 20px; }
  .pads { gap: 12px; }
  .pad-name { font-size: 15px; }
}

/* FITNESS: band with a 7 segment heat timer, then the run sheet as lanes */
.fit { padding-top: var(--sec); }
.fit-band { position: relative; min-height: max(440px, calc(60 * var(--vh))); display: flex; align-items: flex-end; overflow: clip; isolation: isolate; }
.fit-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.55) contrast(1.06) brightness(.92); }
.fit-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--blackout) 2%, rgb(7 8 12 / .55) 40%, rgb(7 8 12 / .2) 70%, rgb(7 8 12 / .45)), linear-gradient(90deg, rgb(200 215 255 / .08), transparent); }
.fit-band-copy { padding-bottom: 28px; }
.fit-title { --w1: 140; --g1: 850; font-size: clamp(2.4rem, 1rem + 6.6vw, 6rem); max-width: 13ch; line-height: .96; }
.heat-box { position: absolute; left: var(--gut); top: 14px; z-index: 1; display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: 12px; background: rgb(7 8 12 / .84); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 20px 40px -20px #000; }
.heat-silk { display: inline-flex; align-items: center; gap: 8px; font: 600 10px/1 var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--monitor); }
.seg7 { --dh: 40px; --t: calc(var(--dh) * .13); --off: rgb(91 124 255 / .1); --lit: #7d97ff; display: inline-flex; gap: calc(var(--dh) * .2); }
.seg7 .d { position: relative; width: calc(var(--dh) * .56); height: var(--dh); transform: skewX(-6deg); }
.seg7 .d i { position: absolute; border-radius: calc(var(--t) / 2); background: var(--off); transition: background-color 50ms linear; }
.seg7 .d i.on { background: var(--lit); }
.seg7 .a, .seg7 .g, .seg7 .s-d { left: calc(var(--t) * .7); right: calc(var(--t) * .7); height: var(--t); }
.seg7 .a { top: 0; } .seg7 .g { top: calc(50% - var(--t) / 2); } .seg7 .s-d { bottom: 0; }
.seg7 .f, .seg7 .b, .seg7 .e, .seg7 .c { width: var(--t); height: calc(50% - var(--t) * 1.1); }
.seg7 .f { left: 0; top: calc(var(--t) * .6); } .seg7 .b { right: 0; top: calc(var(--t) * .6); }
.seg7 .e { left: 0; bottom: calc(var(--t) * .6); } .seg7 .c { right: 0; bottom: calc(var(--t) * .6); }
.heat-box .seg7.is-go { --lit: #fff; }
.fit-grid { display: grid; gap: 32px; padding-top: 36px; }
.fit-copy { display: grid; gap: 22px; align-content: center; }
.fit-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fit-photos .screen { aspect-ratio: 4 / 5; }
.fit-photos .screen:nth-child(2) { margin-top: 32px; }
.heat-sheet { margin-top: clamp(48px, 7vw, 88px); }
.hs-head { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; padding-block: 0 12px; font: 600 11px/1 var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--monitor); }
.hs { list-style: none; }
.hs li { padding: 6px var(--gut); background: var(--rack); box-shadow: inset 0 1px 0 rgb(255 255 255 / .03); }
.hs li:nth-child(even) { background: #0a0c11; }
.hs-row { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; min-height: 48px; max-width: 1280px; margin-inline: auto; }
.hs-row::before { content: ""; position: absolute; left: 60px; top: -6px; bottom: -6px; width: 1px; background: rgb(255 255 255 / .16); }
.hs-n { font-family: var(--display); font-variation-settings: "wdth" 150, "wght" 800; font-size: 30px; line-height: 1; color: var(--monitor); font-variant-numeric: tabular-nums; transition: color 160ms ease; }
.hs-t { padding-left: 8px; font: 600 16px/1.3 var(--sans); font-stretch: 104%; color: var(--house); }
.hs-track { position: absolute; left: 76px; right: 0; bottom: 3px; height: 1px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .14) 0 10px, transparent 10px 18px); }
.hs-pip { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); opacity: 0; }
.hs li.is-run .hs-n { color: var(--signal); }
@media (min-width: 1024px) {
  .fit-band { min-height: max(440px, calc(72 * var(--vh))); }
  .fit-band-copy { padding-bottom: 48px; }
  .heat-box { top: calc(var(--hdr) + 20px); padding: 14px 16px 16px; }
  .heat-box .seg7 { --dh: 64px; }
  .fit-grid { grid-template-columns: 6fr 5fr; gap: 72px; padding-top: 56px; align-items: center; }
  .fit-photos { gap: 16px; }
  .fit-photos .screen:nth-child(2) { margin-top: 56px; }
  .hs-head { grid-template-columns: 96px 1fr auto; }
  .hs-row { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); min-height: 60px; }
  .hs-row::before { left: 104px; }
  .hs-n { font-size: 40px; }
  .hs-t { font-size: 18px; padding-left: 20px; }
  .hs-track { left: 50%; right: 0; top: 50%; bottom: auto; }
}

/* MEET HECTOR */
.hector { padding-top: var(--sec); }
.hector-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.hector-screen { aspect-ratio: 4 / 5; }
.hector-copy { display: grid; gap: 22px; align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.bio { font-size: 17px; max-width: 58ch; text-wrap: pretty; }
.pull { margin: 10px 0 6px; }
.pull::before { content: ""; display: block; width: 44px; height: 8px; margin-bottom: 18px; border-radius: 3px; background: var(--sound); }
.pull p { --w1: 118; --g1: 800; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" var(--w1), "wght" var(--g1); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem); line-height: 1.1; letter-spacing: -.015em; color: var(--house); text-wrap: balance; }
.signoff { display: grid; gap: 4px; }
.signoff-name { font-family: var(--display); font-weight: 800; font-stretch: 120%; font-size: 22px; color: var(--house); line-height: 1; }
.genres { display: grid; gap: 16px; margin-top: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.genre-rack { list-style: none; display: grid; min-width: 0; contain: inline-size; }
.genre-rack button {
  display: block; width: 100%; padding: 2px 0; border: 0; background: none; text-align: left;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.01em;
  font-size: var(--fs, clamp(2rem, 9vw, 4.4rem)); font-variation-settings: "wdth" var(--gw, 100), "wght" 800;
  color: var(--house); border-radius: 6px; transition: color 160ms ease;
}
.genre-rack button > span { display: inline-block; transform-origin: 50% 82%; }
/* with JS every line is fitted flush left and right; Country and Latin share one line */
.js .genre-rack { display: flex; flex-wrap: wrap; align-items: baseline; }
.js .genre-rack li { flex: 0 0 100%; min-width: 0; }
.js .genre-rack li.duo { flex: 0 0 auto; display: flex; align-items: baseline; }
.js .genre-rack button { white-space: nowrap; }
.js .genre-rack li.duo button { width: auto; }
.g-slash { color: var(--signal); }
.genre-sep { font-family: var(--display); font-weight: 800; line-height: .92; font-size: var(--fs, 4rem); font-variation-settings: "wdth" var(--gw, 100), "wght" 800; color: var(--signal); padding-inline: .14em; user-select: none; }
.genre-rack li:nth-child(even) button { color: var(--monitor); }
.genre-rack li button.is-hit, .genre-rack li button[aria-pressed="true"] { color: var(--signal); }
@media (hover: hover) and (pointer: fine) { .genre-rack li button:hover { color: var(--signal); } }
.genre-tag { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 16px; border-radius: 999px; background: var(--rack-2); box-shadow: inset 0 0 0 1px var(--cable); font: 600 12.5px/1.2 var(--sans); font-stretch: 112%; color: var(--house); justify-self: start; }
.stencil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(44px, 6vw, 80px); border-top: 1px solid var(--cable-2); }
.stencil div { display: grid; gap: 7px; align-content: start; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--cable); }
.stencil div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stencil dt { font: 600 11px/1.2 var(--sans); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; color: var(--monitor); }
.stencil dd { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 138, "wght" 800; font-size: 15px; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--house); -webkit-mask: var(--distress); mask: var(--distress); }
@media (max-width: 359px) { .stencil dd { font-size: 13px; font-variation-settings: "wdth" 118, "wght" 800; } }
@media (min-width: 1024px) {
  .hector-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
  .hector-screen { position: sticky; top: calc(var(--hdr) + 24px); }
  .stencil { grid-template-columns: repeat(7, auto); justify-content: space-between; border-bottom: 1px solid var(--cable-2); }
  .stencil div { border-bottom: 0; padding: 18px 0; }
  .stencil div:last-child:nth-child(odd) { grid-column: auto; }
  .stencil div + div { padding-left: 22px; border-left: 1px solid var(--cable); }
}

/* LIGHTS: a lighting console. Scene keys and a master fader above one fixed stage */
.lights { padding-block: var(--sec); }
.lights-head { display: grid; gap: 20px; margin-bottom: 32px; }
.console { display: grid; gap: 14px; }
.desk { display: grid; gap: 12px; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #151823, #0c0e15); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 0 0 1px var(--cable); }
.scenes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scene {
  --sc: 91 124 255; position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 7px; border: 0; border-radius: 10px; color: var(--text); text-align: left;
  background: linear-gradient(180deg, #1e2231, #12151e);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 3px 0 #05060a, 0 8px 16px -10px #000;
  transition: transform 110ms var(--ease-out), box-shadow 110ms var(--ease-out), color 160ms;
}
.scene-cap { position: absolute; left: 7px; right: 7px; top: 7px; height: 30%; border-radius: 5px; background: rgb(var(--sc) / .12); box-shadow: inset 0 0 0 1px rgb(var(--sc) / .28); transition: background-color 110ms linear, box-shadow 110ms linear; }
.scene[aria-selected="true"] { transform: translateY(3px); color: var(--house); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), inset 0 3px 8px rgb(0 0 0 / .6), 0 0 0 #05060a; }
.scene[aria-selected="true"] .scene-cap { background: rgb(var(--sc)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .55); }
.scene:active { transform: translateY(3px) scale(.98); }
.scene-name { font: 650 11px/1.1 var(--sans); font-stretch: 88%; }
.scene-no { display: none; }
.master { display: flex; align-items: center; gap: 14px; padding: 2px 8px 4px; }
.master-label { font: 600 11px/1 var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--monitor); }
.master-track { position: relative; flex: 1; height: 30px; margin-inline: 14px; }
.master-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #04050a; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgb(255 255 255 / .06); }
.master-ticks { position: absolute; left: 0; right: -1px; top: 3px; bottom: 3px; background: repeating-linear-gradient(90deg, var(--cable-2) 0 1px, transparent 1px 25%); }
.master-cap { position: absolute; left: 0; top: 50%; width: 28px; height: 22px; margin: -11px 0 0 -14px; border-radius: 4px; background: linear-gradient(180deg, #eef1ff, #aab4e6); box-shadow: 0 4px 8px -2px rgb(0 0 0 / .6), inset 0 -2px 0 rgb(0 0 0 / .22); transition: left 520ms var(--plate); }
.master-cap::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: rgb(var(--msc, 91 124 255)); }
.panels { display: grid; view-transition-name: lights-panel; }
.panel { grid-area: 1 / 1; display: grid; gap: 16px; align-content: start; }
.js .panel:not(.is-on) { visibility: hidden; }
.stage16 { position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: 14px; overflow: hidden; background: var(--rack); isolation: isolate; box-shadow: 0 30px 60px -34px rgb(0 0 0 / .8); }
.stage16::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); pointer-events: none; z-index: 6; }
.stage16 > img, .stage16 > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage16 .screen-cap { position: absolute; left: 10px; bottom: 10px; z-index: 5; height: 30px; border: 0; border-radius: 8px; background: rgb(7 8 12 / .78); }
.stage16 .vplay { left: auto; right: 12px; bottom: 12px; }
.panel-ctrl { display: grid; gap: 14px; align-content: start; justify-items: start; }
.panel-title { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height: 1.08; color: var(--house); }
.panel-cap { font-size: 14.5px; line-height: 1.5; color: var(--text); max-width: 46ch; }
.up-img { object-position: 50% 54%; filter: saturate(1.05); }
.wash { position: absolute; inset: 0; z-index: 2; background: rgb(var(--wash, 46 75 255)); mix-blend-mode: color; opacity: .2; transition: background-color 420ms ease; pointer-events: none; -webkit-mask: linear-gradient(180deg, #000 0%, #000 42%, transparent 72%); mask: linear-gradient(180deg, #000 0%, #000 42%, transparent 72%); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--rack-2); box-shadow: inset 0 0 0 1px var(--cable-2); font: 600 14px/1 var(--sans); color: var(--text); cursor: pointer; transition: box-shadow 160ms, color 160ms; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip i { width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 0 2px var(--rack-2), 0 0 0 3px rgb(var(--c) / .5); }
.chip:has(:checked) { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.chip:has(:focus-visible) { outline: 2px solid var(--focus, var(--signal)); outline-offset: 2px; }
.gobo-form { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; width: 100%; max-width: 420px; }
.field-mini { display: grid; gap: 6px; font: 600 11px/1.2 var(--sans); font-stretch: 115%; letter-spacing: .08em; text-transform: uppercase; color: var(--monitor); }
.field-mini input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--rack-2); box-shadow: inset 0 0 0 1px var(--cable-2); color: var(--house); font: 600 16px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.field-mini input:focus { outline: 2px solid var(--focus, var(--signal)); outline-offset: 1px; }
.field-mini input::placeholder { color: var(--monitor); opacity: 1; }
.gobo-amp { padding-bottom: 12px; font-family: var(--display); font-weight: 300; font-stretch: 60%; font-size: 30px; color: var(--monitor); }
.gobo-stage img { filter: brightness(.5) saturate(.95); object-position: 50% 62%; }
.gobo { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 2400px; mix-blend-mode: screen; pointer-events: none; }
.gobo-cone { position: absolute; left: 59%; top: 0; width: 66%; height: 88%; transform: translateX(-50%); background: linear-gradient(180deg, rgb(225 232 255 / .3), rgb(225 232 255 / .06) 78%, transparent); clip-path: polygon(47% 0, 53% 0, 96% 100%, 4% 100%); filter: blur(6px); }
.gobo-spin { position: relative; top: 2%; left: 9%; width: 62%; aspect-ratio: 1; display: grid; place-items: center; container-type: inline-size; border-radius: 50%; transform: rotateX(62deg) rotate(0deg); filter: blur(.5px); background: radial-gradient(closest-side, rgb(235 240 255 / .26), rgb(235 240 255 / .12) 72%, transparent 100%); }
.gobo-ring { position: absolute; inset: 4%; border-radius: 50%; border: 3px solid rgb(255 255 255 / .96); }
.gobo-ring::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; border: 1px solid rgb(255 255 255 / .55); }
.gobo-text { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 150, "wght" 800; font-size: 17cqi; line-height: 1; color: #fff; white-space: nowrap; }
.haze-stage img { object-position: 50% 45%; filter: brightness(.6) saturate(.8) contrast(1.05); }
.haze { position: absolute; inset: -20%; z-index: 1; background: radial-gradient(40% 30% at 30% 60%, rgb(190 205 255 / .34), transparent 70%), radial-gradient(50% 30% at 70% 50%, rgb(150 170 255 / .28), transparent 70%), linear-gradient(180deg, rgb(200 210 255 / .1), transparent 60%); animation: haze-drift 14s ease-in-out infinite alternate; }
.beam { position: absolute; top: -10%; z-index: 2; width: 20%; height: 125%; transform-origin: 50% 0; background: linear-gradient(180deg, rgb(235 240 255 / .85), rgb(150 170 255 / .2) 62%, transparent 92%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(2px); mix-blend-mode: screen; animation: beam-sweep 8s ease-in-out infinite alternate; }
.beam.b1 { left: 12%; rotate: -16deg; } .beam.b2 { left: 40%; animation-delay: -2s; } .beam.b3 { left: 68%; rotate: 16deg; animation-delay: -4s; }
@keyframes haze-drift { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }
@keyframes beam-sweep { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.booth-stage { --cut: 50%; touch-action: pan-y pinch-zoom; cursor: ew-resize; }
.booth-w { object-position: 50% 50%; }
.booth-b { object-position: 0% 50%; clip-path: inset(0 0 0 var(--cut)); }
.booth-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 3; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.booth-handle i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px -6px rgb(0 0 0 / .7); }
.booth-handle i::before, .booth-handle i::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.booth-handle i::before { left: 6px; border-right-color: var(--blackout); } .booth-handle i::after { right: 6px; border-left-color: var(--blackout); }
.booth-tag { position: absolute; top: 10px; z-index: 3; padding: 7px 10px; border-radius: 7px; font: 700 11px/1 var(--sans); font-stretch: 116%; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.booth-tag-b { right: 10px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.booth-tag-w { left: 10px; background: #fff; color: var(--blackout); }
.booth-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y pinch-zoom; }
.booth-stage:has(.booth-range:focus-visible) { outline: 2px solid var(--focus, var(--signal)); outline-offset: 3px; }
::view-transition-old(lights-panel) { animation: 180ms var(--ease-out) both vt-fade-out; }
::view-transition-new(lights-panel) { animation: 260ms var(--ease-out) both vt-rise-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 600px) {
  .scenes { gap: 10px; }
  .scene { padding: 10px; }
  .scene-cap { left: 10px; right: 10px; top: 10px; }
  .scene-name { font-size: 13px; font-stretch: 100%; }
  .scene-no { display: block; position: absolute; right: 10px; bottom: 10px; font: 600 10px/1 var(--sans); color: var(--monitor); }
}
@media (min-width: 700px) { .stage16 { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) {
  .lights-head { grid-template-columns: 7fr 5fr; align-items: end; gap: 48px; margin-bottom: 44px; }
  .console { gap: 18px; }
  .desk { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding: 14px 24px 14px 14px; }
  .scenes { grid-template-columns: repeat(5, 104px); gap: 12px; }
  .master { padding: 0; }
  .panel { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 36px; }
  .panel-ctrl { padding-top: 8px; }
}

/* PRICING MIXER on a full Valor Blue slab */
.pricing { position: relative; background: var(--valor) var(--grille-blue); color: #fff; padding: var(--sec) var(--gut) 0; overflow: clip; }
.pricing .wrap { width: min(1280px, 100%); }
.pricing .pricing-deep .wrap { width: min(1280px, 100% - 2 * var(--gut)); }
.pricing .h2 { color: #fff; }
.pricing .lede, .pricing .pricing-scope { color: var(--tint); }
.pricing .silk { color: var(--tint); }
.pricing-grid { display: grid; gap: 36px; padding-bottom: 56px; }
.pricing-copy { display: grid; gap: 18px; align-content: start; }
.big-price { display: grid; gap: 10px; margin-top: 10px; justify-items: start; }
.odo-big { font-family: var(--display); font-weight: 900; font-stretch: 120%; font-size: clamp(4.5rem, 19vw, 9rem); line-height: .86; letter-spacing: -.02em; color: #fff; }
.big-say { font-family: var(--display); font-weight: 900; font-stretch: 120%; font-size: clamp(2.6rem, 11vw, 5.2rem); line-height: .88; letter-spacing: -.02em; color: #fff; }
.tier-price { text-wrap: balance; }
.rule { display: block; width: 100%; max-width: 520px; height: 3px; border-radius: 2px; background: #fff; transform-origin: left; }
.js .pricing:not(.is-live) .rule { transform: scaleX(0); }
.pricing.is-live .rule { transform: scaleX(1); transition: transform 240ms var(--plate); }
.pricing-scope { font-size: 15px; }
.mixer { list-style: none; display: grid; gap: 8px; }
.strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: 14px; background: rgb(8 14 90 / .22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .1); transition: opacity 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.strip-hw { display: flex; align-items: center; gap: 10px; }
.strip-leds { display: flex; gap: 2px; }
.strip-leds i { width: 4px; height: 14px; border-radius: 1px; background: #fff; transition: background-color 90ms linear; }
.strip-leds i:nth-child(n+7) { background: #ff8a8f; }
.strip-track { position: relative; width: 56px; height: 6px; border-radius: 3px; background: rgb(4 8 60 / .5); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4); }
.strip-cap { position: absolute; left: 0; top: 50%; width: 14px; height: 24px; margin: -12px 0 0 -7px; border-radius: 4px; background: linear-gradient(90deg, #fff, #cfd6ff); box-shadow: 0 4px 8px -2px rgb(0 0 0 / .45), inset -1px 0 0 rgb(0 0 0 / .2); transform: translateX(calc(var(--lift, 1) * 56px)); transition: transform 320ms var(--ease-expo); }
.strip-on { padding: 5px 7px; border-radius: 6px; font: 700 10.5px/1 var(--sans); font-stretch: 116%; letter-spacing: .08em; text-transform: uppercase; background: #fff; color: var(--valor); transition: background-color 120ms, color 120ms; }
.strip-text { display: grid; gap: 4px; }
.strip .silk { color: #fff; font-size: 11px; line-height: 1.3; }
.strip-say { font-size: 14px; line-height: 1.4; color: var(--tint); }
.js .pricing:not(.is-live) .strip:not(.is-lit) .strip-leds i { background: rgb(255 255 255 / .2); }
.js .pricing:not(.is-live) .strip:not(.is-lit) .strip-cap { transform: none; }
.js .pricing:not(.is-live) .strip:not(.is-lit) .strip-on { background: rgb(255 255 255 / .16); color: #fff; }
.strip.is-solo { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px #fff; }
.mixer:has(.is-solo) .strip:not(.is-solo) { opacity: .55; }
.pricing-deep { margin-inline: calc(-1 * var(--gut)); background: var(--valor-deep) var(--grille-blue); padding-block: 44px 64px; }
.deep-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.tier { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .22); }
.tier-hw { display: flex; align-items: flex-end; gap: 8px; padding: 10px 9px; border-radius: 12px; background: rgb(4 8 60 / .35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.tier-hw .strip-leds { flex-direction: column-reverse; gap: 3px; }
.tier-hw .strip-leds i { width: 12px; height: 4px; }
.tier-hw .strip-leds i:nth-child(n+6) { background: rgb(255 255 255 / .2); }
.tier-hw .strip-track { width: 6px; height: 76px; }
.tier-hw .strip-cap { left: 50%; top: auto; bottom: -2px; width: 22px; height: 12px; margin: 0 0 0 -11px; background: linear-gradient(180deg, #fff, #cfd6ff); transform: translateY(-40px); }
.js .pricing:not(.is-live) .tier-hw .strip-cap { transform: none; }
.js .pricing:not(.is-live) .tier-hw .strip-leds i { background: rgb(255 255 255 / .2); }
.tier-text { display: grid; gap: 8px; }
.tier .silk { color: var(--tint); }
.tier-price { font-family: var(--display); font-weight: 800; font-stretch: 120%; font-size: clamp(2rem, 12vw, 2.8rem); line-height: 1; color: #fff; overflow-wrap: anywhere; }
.tier-price small { font: 600 14px/1 var(--sans); color: var(--tint); }
.tier-say { font-size: 14.5px; color: var(--tint); max-width: 44ch; }
.deposit { display: grid; gap: 14px; align-content: start; justify-items: start; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .22); }
.sound-pill { display: inline-grid; place-items: center; min-height: 48px; padding: 14px 22px; border-radius: 9px; background: var(--sound); color: #fff; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 132, "wght" 800; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; -webkit-mask: var(--distress); mask: var(--distress); }
.deposit-say { font-size: 15px; color: #fff; max-width: 40ch; }
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: 6fr 6fr; gap: 64px; align-items: end; padding-bottom: 80px; }
  .mixer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .strip { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 12px; padding: 18px 12px 20px; border-radius: 16px; text-align: center; }
  .strip-hw { flex-direction: column; }
  .strip-leds { flex-direction: column-reverse; gap: 3px; }
  .strip-leds i { width: 16px; height: 5px; border-radius: 2px; }
  .strip-track { width: 6px; height: 92px; }
  .strip-cap { left: 50%; top: auto; bottom: -2px; width: 30px; height: 14px; margin: 0 0 0 -15px; background: linear-gradient(180deg, #fff, #cfd6ff); box-shadow: 0 4px 8px -2px rgb(0 0 0 / .45), inset 0 -1px 0 rgb(0 0 0 / .2); transform: translateY(calc(var(--lift, 1) * -78px)); }
  .strip-say { font-size: 13px; }
  .deep-grid { grid-template-columns: 1fr 1fr 1.15fr; gap: 40px; }
}

/* BOOKING STEPS on one signal line */
.steps { padding-top: var(--sec); }
.steps .h2 { margin-bottom: 44px; max-width: 14ch; }
.signal { position: relative; }
.sl { position: absolute; left: 27px; top: 28px; bottom: 60px; width: 2px; background: var(--cable); border-radius: 2px; }
.sl-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--signal), var(--valor)); transform-origin: top; transform: scaleY(var(--draw, 1)); border-radius: inherit; }
.sl-pulse { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #8fa5ff; opacity: 0; }
.nodes { list-style: none; display: grid; gap: 36px; position: relative; }
.node { position: relative; display: grid; gap: 8px; padding-left: 76px; min-height: 56px; }
.node-ring {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--blackout); box-shadow: inset 0 0 0 1.5px var(--cable-2);
  font-family: var(--display); font-weight: 900; font-stretch: 150%; font-variant-numeric: tabular-nums; font-size: 22px; color: var(--monitor);
  transition: box-shadow 160ms ease, color 160ms ease, background-color 160ms ease;
}
.node.is-lit .node-ring { color: #fff; background: rgb(46 75 255 / .3); box-shadow: inset 0 0 0 1.5px #8fa5ff; }
.node-bar { display: grid; place-items: center; width: 40px; height: 22px; border-radius: 5px; background: #3a0d10; color: rgb(255 255 255 / .75); font-size: 15px; transition: background-color 160ms, color 160ms; }
.node-sound.is-lit .node-ring { background: var(--blackout); box-shadow: inset 0 0 0 1.5px #ff6b74; }
.node-sound.is-lit .node-bar { background: var(--sound); color: #fff; }
.node h3 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.12; color: var(--house); padding-top: 14px; text-wrap: balance; }
.node p { max-width: 38ch; }
@supports (animation-timeline: view()) {
  html:not(.reduced):not(.paused) .sl-fill { animation: draw-y linear forwards; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  @keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (min-width: 900px) {
  .sl { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px; }
  .sl-fill { transform-origin: left; transform: scaleX(var(--draw, 1)); background: linear-gradient(90deg, var(--signal), var(--valor)); }
  .sl-pulse { left: 0; top: 50%; }
  .nodes { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .node { padding: 84px 0 0; }
  .node h3 { padding-top: 0; }
  @supports (animation-timeline: view()) {
    @keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    html:not(.reduced):not(.paused) .sl-fill { animation-name: draw-x; }
  }
}

/* REVIEWS: a fanned deck of Instagram story frames that spreads as it scrolls in */
@property --spread { syntax: "<number>"; inherits: true; initial-value: 1; }
.reviews { padding-top: var(--sec); }
.reviews-head { display: grid; gap: 18px; justify-items: center; text-align: center; margin-bottom: clamp(24px, 4vw, 48px); }
.reviews-head .lede { max-width: 44ch; }
.deck { position: relative; overflow: clip; padding-block: 28px 36px; background: radial-gradient(46% 56% at 50% 52%, rgb(255 168 88 / .1), transparent 72%); }
.deck-row { display: grid; place-items: center; }
.story {
  --dx: 0%; --rot: 0deg; --sc: 1; --z: 1;
  position: relative; grid-area: 1 / 1; width: min(58vw, 300px); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: var(--rack); color: #fff; text-decoration: none; z-index: var(--z); transform-origin: 50% 90%;
  translate: calc(var(--dx) * var(--spread)) 0; rotate: calc(var(--rot) * var(--spread)); scale: var(--sc);
  box-shadow: 0 40px 70px -36px #000;
}
.story::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); pointer-events: none; z-index: 6; }
.story[data-pos="0"] { --z: 3; }
.story[data-pos="-1"] { --dx: -62%; --rot: -8deg; --sc: .86; --z: 2; }
.story[data-pos="1"] { --dx: 62%; --rot: 8deg; --sc: .86; --z: 2; }
.story[data-pos="x"] { --sc: .78; opacity: 0; }
.story:not([data-pos="0"]) .story-bg { filter: brightness(.38) saturate(.8); }
.deck.is-cycling .story { transition: translate 560ms var(--ease-expo), rotate 560ms var(--ease-expo), scale 560ms var(--ease-expo), opacity 300ms; }
@supports (animation-timeline: view()) {
  html:not(.reduced):not(.paused) .deck-row { animation: deck-spread linear forwards; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  @keyframes deck-spread { from { --spread: 0; } to { --spread: 1; } }
}
.story-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(.5) saturate(.9); }
.story::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(7 8 12 / .6), transparent 24%, transparent 46%, rgb(7 8 12 / .9) 82%); pointer-events: none; }
.story-head { position: absolute; left: 12px; right: 12px; top: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; font: 650 13px/1.2 var(--sans); color: #fff; }
.story-head > span:last-child { color: rgb(255 255 255 / .72); font-weight: 500; }
.ring { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.ring-c { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#8fa5ff, var(--valor), #ff3b47, #ffb068, #8fa5ff); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%); mask: radial-gradient(closest-side, transparent 84%, #000 86%); }
.ring img { width: 30px; height: 30px; border-radius: 50%; background: var(--blackout); padding: 3px; object-fit: contain; }
.story-cover { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: grid; justify-items: center; gap: 8px; font: 650 13px/1 var(--sans); color: rgb(255 255 255 / .85); }
.story-cover .ring { width: 64px; height: 64px; }
.story-cover .ring img { width: 52px; height: 52px; padding: 6px; }
.story-play { position: absolute; left: 50%; top: 46%; z-index: 3; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); transition: transform 240ms var(--ease-out), background-color 200ms; }
.story-play svg { width: 30px; height: 30px; stroke-width: 1.5; }
.story-cta { position: absolute; left: 18px; right: 18px; bottom: 22px; z-index: 3; display: grid; gap: 10px; }
.story-cta strong { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 112, "wght" 800; font-size: 25px; line-height: 1.04; letter-spacing: -.01em; }
.story-cta span { font: 600 13px/1.3 var(--sans); color: var(--tint); }
a.story:focus-visible { outline: 2px solid var(--focus, var(--signal)); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { a.story:hover .story-play { transform: scale(1.06); background: rgb(255 255 255 / .22); } }
.story blockquote { margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 100%; font-size: 21px; line-height: 1.2; color: #fff; }
.story-body { position: absolute; left: 16px; right: 16px; bottom: 26px; display: grid; gap: 12px; z-index: 3; }
.story-who { font: 600 13px/1.2 var(--sans); color: var(--tint); }
.story-bars { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; gap: 3px; z-index: 3; }
.story-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .28); transition: background-color 90ms linear; }
.story-bars i.is-on { background: #fff; }
.story-bars + .story-head { top: 20px; }
.reviews-foot { display: grid; justify-items: center; gap: 18px; margin-top: 8px; text-align: center; }
.story-ctrl { display: flex; gap: 8px; }
.stage-note { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.45 var(--sans); color: var(--monitor); max-width: 52ch; text-align: left; }
.stage-note i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--clip); }
.stage-tag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; background: rgb(7 8 12 / .85); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); font: 700 11px/1.2 var(--sans); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.stage-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clip); flex: none; }
@media (min-width: 1024px) {
  .story { width: 320px; }
  .story[data-pos="-1"] { --dx: -78%; --rot: -9deg; }
  .story[data-pos="1"] { --dx: 78%; --rot: 9deg; }
  .deck { padding-block: 36px 44px; }
}

/* GALLERY: vertical film strips, balanced to one height, drifting against each other on scroll */
.gallery { padding-top: var(--sec); }
.gallery-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 20px; }
.filter-wrap { display: flex; align-items: center; gap: 18px; }
.filter { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; border: 0; min-width: 0; border-radius: 24px; background: var(--rack-2); box-shadow: inset 0 0 0 1px var(--cable-2); }
.filter label { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px 0 11px; border-radius: 999px; font: 650 13.5px/1 var(--sans); font-stretch: 104%; color: var(--text); cursor: pointer; transition: background-color 180ms var(--ease-out), color 180ms; }
.filter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.filter label:has(:checked) { background: #fff; color: var(--blackout); }
.filter label:has(:checked) .led { background: var(--valor); }
.filter label:has(:focus-visible) { outline: 2px solid var(--focus, var(--signal)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .filter label:not(:has(:checked)):hover { color: var(--house); background: rgb(255 255 255 / .05); } }
@media (max-width: 359px) { .filter label { padding: 0 9px; gap: 6px; } }
.knob-dial { display: none; position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a2f3f, #12151e 70%); box-shadow: 0 0 0 4px var(--rack-2), 0 0 0 5px var(--cable-2), 0 10px 20px -8px #000, inset 0 1px 0 rgb(255 255 255 / .12); transform: rotate(var(--a, -45deg)); transition: transform 300ms var(--plate); }
.knob-mark { position: absolute; left: 50%; top: 5px; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: #8fa5ff; }
.reel { position: relative; padding: 40px var(--gut); overflow: clip; view-timeline: --reel block; -webkit-mask: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.reel-src { list-style: none; columns: 2; column-gap: 10px; }
.reel-src li { break-inside: avoid; margin-bottom: 10px; }
.reel-park { display: none; }
.reel-cols { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.reel-col { position: relative; list-style: none; flex: 0 0 var(--cw); display: grid; gap: 8px; padding: 10px 14px; border-radius: 6px; background: #0c0d13; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
.reel-col::before, .reel-col::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 5px; background: repeating-linear-gradient(180deg, rgb(255 255 255 / .17) 0 7px, transparent 7px 15px); }
.reel-col::before { left: 4px; } .reel-col::after { right: 4px; }
.reel-col li { height: var(--h, auto); }
.reel-col .ph { height: 100%; border-radius: 3px; }
.reel-col .ph img { height: 100%; object-fit: cover; }
.ph { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--rack); cursor: zoom-in; }
.ph img { width: 100%; height: auto; transition: transform 500ms var(--ease-out), filter 300ms; }
@media (hover: hover) and (pointer: fine) { .ph:hover img { transform: scale(1.04); } }
@supports (animation-timeline: view()) {
  html:not(.reduced):not(.paused) .reel-col { animation: drift-up linear both; animation-timeline: --reel; animation-range: cover; }
  html:not(.reduced):not(.paused) .reel-col:nth-child(even) { animation-name: drift-down; }
  @keyframes drift-up { from { transform: translateY(var(--drift, 28px)); } to { transform: translateY(calc(var(--drift, 28px) * -1)); } }
  @keyframes drift-down { from { transform: translateY(calc(var(--drift, 28px) * -1)); } to { transform: translateY(var(--drift, 28px)); } }
}
.gallery-more { display: flex; justify-content: center; margin-top: 8px; }
@media (min-width: 700px) { .reel { --drift: 40px; padding-block: 48px; } .reel-cols, .reel-src { column-gap: 14px; gap: 14px; } .reel-src { columns: 3; } }
@media (min-width: 1100px) {
  .gallery-head { grid-template-columns: 1fr auto; align-items: end; }
  .knob-dial { display: block; }
  .filter { flex-wrap: nowrap; }
  .filter label { padding: 0 18px 0 15px; font-size: 14px; }
  .reel-src { columns: 4; }
}
::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
.lightbox { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 16px; border: 0; background: rgb(7 8 12 / .96); color: #fff; overscroll-behavior: contain; opacity: 1; transition: opacity 240ms var(--ease-out), display 240ms allow-discrete, overlay 240ms allow-discrete; }
.lightbox:not([open]) { opacity: 0; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lb-fig { position: absolute; inset: 64px 12px 84px; display: grid; place-items: center; gap: 12px; touch-action: none; }
.lb-fig img { max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; border-radius: 12px; object-fit: contain; view-transition-name: lb-img; }
.lb-fig img.is-small { max-width: min(100%, 600px); max-height: min(calc(100dvh - 190px), 800px); }
.lb-fig figcaption { font-size: 14px; color: var(--text); text-align: center; max-width: 60ch; }
.lb-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; }
.lb-prev, .lb-next { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
.lb-prev { left: calc(50% - 52px); } .lb-next { left: calc(50% + 8px); }
@media (min-width: 900px) { .lb-prev, .lb-next { bottom: auto; top: 50%; } .lb-prev { left: 24px; } .lb-next { left: auto; right: 24px; } .lb-fig { inset: 72px 96px 40px; } .lb-fig img { max-height: calc(100dvh - 160px); } }

/* FAQ as a setlist: hairline rows, LED segment numbers */
.faq { padding-block: var(--sec); }
.faq-grid { display: grid; gap: 32px; }
.faq-intro { display: grid; gap: 18px; align-content: start; }
.faq-intro .link { padding-block: 10px; }
.setlist { display: grid; }
.setlist details { position: relative; border-top: 1px solid var(--cable); interpolate-size: allow-keywords; }
.setlist details:last-child { border-bottom: 1px solid var(--cable); }
.setlist summary { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 8px 20px; align-items: center; gap: 14px; min-height: 68px; padding: 16px 2px; cursor: pointer; list-style: none; }
.setlist summary::-webkit-details-marker { display: none; }
.setlist summary::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--signal); transform-origin: left; transform: scaleX(0); }
.setlist details[open] > summary::after { transform: scaleX(1); }
html:not(.reduced):not(.paused) .setlist details[open] > summary::after { animation: row-sweep 560ms var(--ease-expo) both; }
@keyframes row-sweep { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
.sl-n { --dh: 16px; --lit: #7e86a0; --off: rgb(255 255 255 / .06); }
details[open] .sl-n { --lit: #8fa5ff; }
.sl-q { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.3; color: var(--house); text-wrap: balance; }
.sl-caret { color: var(--monitor); transition: transform 260ms var(--ease-out); }
details[open] .sl-caret { transform: rotate(180deg); color: var(--house); }
details[open] .sl-led { background: #8fa5ff; }
.setlist ::details-content { block-size: 0; overflow: clip; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
.setlist details[open]::details-content { block-size: auto; }
.sl-a { display: grid; gap: 10px; padding: 0 30px 22px 52px; max-width: 70ch; }
.sl-genres { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px 28px; }
.sl-genres li { position: relative; padding-left: 17px; color: var(--house); font-weight: 550; }
.sl-genres li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #7d97ff; }
.sl-genres span { margin-left: .45em; color: var(--monitor); font-weight: 400; font-size: .92em; }
.sl-genres .emo { margin-left: 0; color: inherit; font-size: 1em; font-weight: 400; white-space: nowrap; }
@media (min-width: 600px) { .sl-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .setlist summary:hover .sl-q { color: #fff; } .setlist summary:hover .sl-n { --lit: var(--text); } }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: 5fr 7fr; gap: 72px; }
  .faq-intro { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; }
  .setlist summary { grid-template-columns: 44px minmax(0, 1fr) 8px 20px; min-height: 76px; padding: 18px 4px; }
  .sl-n { --dh: 18px; }
  .sl-a { padding-left: 62px; }
}

/* INQUIRY on a full Valor Blue slab: channel inputs, a flat event selector, a hardware key */
.inquiry { position: relative; background: var(--valor) var(--grille-blue); color: #fff; padding: var(--sec) var(--gut); }
.inquiry .wrap { width: min(1280px, 100%); }
.inquiry .h2 { color: #fff; }
.inquiry .lede { color: var(--tint); }
.inquiry-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "alt"; gap: 28px; }
.inquiry-intro { grid-area: intro; display: grid; gap: 16px; align-content: start; }
.inquiry-alt { grid-area: alt; display: grid; gap: 14px; align-content: start; min-width: 0; }
.big-phone a { font-family: var(--display); font-weight: 850; font-stretch: 112%; font-variant-numeric: tabular-nums; font-size: min(10vw, 3.6rem); line-height: 1; letter-spacing: -.01em; color: #fff; text-decoration: none; display: inline-block; padding-block: 6px; }
@media (hover: hover) and (pointer: fine) { .big-phone a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; } }
.contact-keys { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 440px; }
.contact-keys a { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 72px; border-radius: 14px; background: rgb(7 8 12 / .22); color: #fff; text-decoration: none; font: 600 12px/1 var(--sans); font-stretch: 108%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 3px 0 rgb(4 8 60 / .55); transition: transform 110ms var(--ease-out), box-shadow 110ms var(--ease-out), background-color 160ms; }
.contact-keys svg { width: 22px; height: 22px; color: #fff; }
.contact-keys a:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 1px 0 rgb(4 8 60 / .55); }
@media (hover: hover) and (pointer: fine) { .contact-keys a:hover { background: rgb(7 8 12 / .36); } }
.mail-line a { display: inline-block; padding-block: 10px; color: var(--tint); font-size: 14.5px; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 4px; }
.hablo { font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 20px; color: #fff; }
.form-card { grid-area: form; position: relative; padding: 16px 0 0; border-top: 1px solid rgb(255 255 255 / .34); scroll-margin-top: calc(var(--hdr) + 12px); }
.form-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.puck { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blackout); flex: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.puck > span { display: block; width: 32px; }
.puck .vl { width: 100%; }
.form-step-label { flex: 1; font: 650 13px/1.2 var(--sans); font-stretch: 110%; color: var(--tint); }
.meter2 { display: flex; gap: 4px; }
.meter2 i { width: 22px; height: 6px; border-radius: 2px; background: rgb(255 255 255 / .22); transition: background-color 160ms; }
.meter2 i.is-on { background: #fff; }
.form { display: block; }
.fstep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; view-transition-name: form-step; }
.field { display: grid; gap: 8px; }
.label { font: 650 11px/1.2 var(--sans); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; color: var(--tint); }
.opt, .req { margin-left: 6px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgb(224 229 255 / .85); }
.label .opt { color: #fff; }
.req { color: #fff; }
.ch { position: relative; border-radius: 12px; background: rgb(7 8 12 / .24); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .26); transition: box-shadow 160ms ease, background-color 160ms ease; }
.ch:focus-within { background: rgb(7 8 12 / .44); box-shadow: inset 0 0 0 2px #fff; }
.ch:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--clip); }
.ch-label { position: absolute; left: 14px; top: 11px; font: 650 11px/1 var(--sans); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; color: var(--tint); pointer-events: none; }
.ch input, .ch select, .ch textarea { display: block; width: 100%; min-height: 64px; margin: 0; padding: 28px 40px 12px 14px; border: 0; border-radius: inherit; appearance: none; -webkit-appearance: none; background: transparent; color: #fff; font: 500 16px/1.3 var(--sans); }
.ch input:focus, .ch select:focus, .ch textarea:focus { outline: none; }
.ch textarea { min-height: 120px; padding-top: 32px; resize: vertical; }
.ch ::placeholder { color: #b8c2ff; opacity: 1; }
.ch select option { color: #07080c; background: #fff; }
.ch-icon { position: absolute; right: 14px; top: calc(50% + 2px); transform: translateY(-50%); pointer-events: none; color: var(--tint); }
.ch-led { position: absolute; right: 14px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .22); transition: background-color 140ms linear; }
.ch.is-ok .ch-led { background: #fff; }
.ch:has([aria-invalid="true"]) .ch-led { background: var(--clip); }
.ch-date .ch-led { right: 44px; }
.ch-rail { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .14) 0 calc(100% / 16 - 2px), transparent calc(100% / 16 - 2px) calc(100% / 16)); pointer-events: none; }
.ch-rail::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #fff 0 calc(100% / 16 - 2px), transparent calc(100% / 16 - 2px) calc(100% / 16)); clip-path: inset(0 calc(100% - var(--fill, 0) * 100%) 0 0); transition: clip-path 140ms var(--ease-out); }
.ch-date input { padding-right: 148px; }
.ch-date input::-webkit-date-and-time-value { text-align: left; }
.ch-date input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; top: 0; width: 52px; height: 100%; cursor: pointer; }
.date-ph { position: absolute; left: 14px; top: 28px; color: #b8c2ff; pointer-events: none; display: none; font: 500 16px/1.3 var(--sans); }
.ch-date.is-empty .date-ph { display: block; }
.ch-date.is-empty input { color: transparent; }
.ch-date.is-empty input:focus { color: #fff; }
.ch-date.is-empty input:focus ~ .date-ph { display: none; }
.ch-count { position: absolute; right: 44px; top: 33px; font: 650 12px/1 var(--sans); font-stretch: 110%; color: var(--tint); font-variant-numeric: tabular-nums; pointer-events: none; }
.type-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; border-radius: 14px; overflow: hidden; background: rgb(255 255 255 / .24); }
.type-seg label { position: relative; display: flex; align-items: flex-start; min-height: 64px; padding: 12px 28px 12px 12px; background: #2a44f0; font: 650 14px/1.25 var(--sans); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms; }
.type-seg label:active { background: #2238d8; }
.type-seg .led { position: absolute; top: 13px; right: 12px; background: rgb(255 255 255 / .25); }
.type-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.type-seg label:has(:checked) { background: #fff; color: var(--valor-deep); }
.type-seg { box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.type-seg label:has(:checked) .led { background: var(--valor); }
.type-seg label:has(:focus-visible) { outline: 2px solid #fff; outline-offset: -5px; }
.type-seg label:has(:checked:focus-visible) { outline-color: var(--valor-deep); }
.type-seg:has([aria-invalid="true"]), .type-seg[aria-invalid="true"] { background: var(--clip); }
.svc { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; background: rgb(7 8 12 / .25); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color 160ms, box-shadow 160ms; }
.svc-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.svc-chip .led { background: rgb(255 255 255 / .25); }
.svc-chip:has(:checked) { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px #fff; }
.svc-chip:has(:checked) .led { background: #fff; }
.svc-chip:has(:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; border-radius: 999px; background: var(--rack-2); box-shadow: inset 0 0 0 1px var(--cable-2); }
.seg label { position: relative; display: grid; place-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font: 650 14px/1 var(--sans); color: var(--text); cursor: pointer; transition: background-color 180ms var(--ease-out), color 180ms; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:has(:checked) { background: #fff; color: var(--blackout); }
.seg label:has(:focus-visible) { outline: 2px solid var(--focus, var(--signal)); outline-offset: 2px; }
.seg-form { display: grid; width: 100%; background: rgb(7 8 12 / .3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.seg-form label { color: #fff; min-height: 44px; }
.seg-form label:has(:checked) { color: var(--valor-deep); }
.err { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 11px; border-radius: 8px; background: var(--blackout); color: #fff; font: 550 13px/1.35 var(--sans); }
.err::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clip); flex: none; }
.err[hidden] { display: none; }
.form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 6px; }
.key-btn { display: flex; flex: 1 1 220px; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 8px 9px 8px 22px; border: 0; border-radius: 14px; background: #fff; color: var(--valor-deep); font: 750 16px/1.15 var(--sans); font-stretch: 112%; text-align: left; box-shadow: 0 4px 0 #8f9eff, 0 16px 26px -16px rgb(0 0 0 / .65); transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), background-color 160ms; }
.key-btn .btn-dot { width: 42px; height: 42px; border-radius: 10px; background: var(--valor); color: #fff; }
.key-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f9eff, 0 6px 12px -8px rgb(0 0 0 / .5); }
.key-btn[disabled] { opacity: .72; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .key-btn:hover { background: #eef1ff; } .key-btn:hover .btn-dot { transform: translateX(3px); } }
.form-nav .pill { min-height: 52px; }
.promise { font-size: 13px; color: var(--tint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.done { display: grid; gap: 14px; padding: 8px 0 4px; }
.done h3 { font-family: var(--display); font-weight: 850; font-stretch: 115%; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1; color: #fff; }
.done p { color: var(--tint); }
.done .btn-main { justify-self: start; }
::view-transition-old(form-step) { animation: 160ms var(--ease-out) both vt-fade-out; }
::view-transition-new(form-step) { animation: 240ms var(--ease-out) both vt-step-in; }
@keyframes vt-step-in { from { opacity: 0; transform: translateX(var(--step-dir, 24px)); } }
@media (min-width: 1024px) {
  .inquiry-grid { grid-template-columns: 5fr 7fr; grid-template-areas: "intro form" "alt form"; grid-template-rows: auto 1fr; column-gap: 72px; row-gap: 36px; align-items: start; }
  .type-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-card { padding-top: 20px; }
}

/* FOOTER: the badge closes the show, then the rack powers down row by row */
.foot { position: relative; background: var(--blackout); padding: clamp(64px, 9vw, 112px) 0 calc(110px + env(safe-area-inset-bottom, 0px)); overflow: clip; border-top: 1px solid var(--cable); }
.foot-badge { display: grid; place-items: center; margin-bottom: clamp(36px, 6vw, 64px); }
.foot-badge .vl { width: min(64vw, 360px); }
.foot-grid { display: grid; gap: 30px; }
.foot-contact { display: grid; gap: 12px; }
.foot-phone a { display: inline-block; padding-block: 4px; font-family: var(--display); font-weight: 800; font-stretch: 118%; font-variant-numeric: tabular-nums; font-size: 2rem; color: var(--house); text-decoration: none; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-links a, .foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover, .foot-nav a:hover { color: var(--house); text-decoration: underline; text-underline-offset: 4px; } }
.foot-line { color: var(--monitor); font-size: 14px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-power { display: grid; gap: 12px; align-content: start; }
.pwr-label { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--monitor); }
.pwr-led { background: #8fa5ff; }
.pwr-rows { display: grid; gap: 5px; max-width: 320px; }
.pwr-rows i { display: block; height: 6px; background: var(--signal); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 20 - 3px), transparent calc(100% / 20 - 3px) calc(100% / 20)); mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 20 - 3px), transparent calc(100% / 20 - 3px) calc(100% / 20)); transition: opacity 80ms steps(2, end); }
.pwr-rows i:nth-child(1) { background: linear-gradient(90deg, var(--signal) 0 75%, var(--clip) 75%); clip-path: inset(0 10% 0 0); }
.pwr-rows i:nth-child(2) { clip-path: inset(0 25% 0 0); }
.pwr-rows i:nth-child(3) { clip-path: inset(0 40% 0 0); }
.pwr-rows i:nth-child(4) { clip-path: inset(0 55% 0 0); }
.pwr-rows i.off { opacity: .1; }
html.pd .pwr-led { background: var(--cable-2); }
html.pd .vu-lit { opacity: .15; transition: opacity 200ms steps(3, end); }
.foot-legal { font-size: 13px; color: var(--monitor); }
@media (min-width: 1024px) {
  .foot { padding-bottom: 56px; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; gap: 48px; }
  .foot-nav { flex-direction: column; }
  .foot-legal { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--cable); }
}

/* Mobile control strip */
.strip-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px max(var(--gut), env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); background: rgb(7 8 12 / .85); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transform: translateY(110%); transition: transform 220ms var(--ease-out); }
.strip-bar.is-on { transform: none; }
.strip-bar .vu { top: 0; bottom: auto; }
.strip-row { display: flex; gap: 8px; }
.strip-cta { flex: 1; min-height: 48px; }
.sq { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; text-decoration: none; background: var(--rack-2); box-shadow: inset 0 0 0 1px var(--cable-2); transition: transform 140ms var(--ease-out); }
.sq:active { transform: scale(.94); }
@media (min-width: 900px) { .strip-bar { display: none; } }
@media (max-width: 899px) { html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* Pause motion and reduced motion: everything renders complete and lit */
html.paused .haze, html.paused .beam, html.reduced .haze, html.reduced .beam { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .haze, .beam, .sl-fill, .wave-head, .wave-played, .w-in, .rail-line, .reel-col, .deck-row { animation: none !important; }
  .menu, .menu-links a, .lightbox, .hdr-logo, .wm, .strip-bar, .wed-stage, .master-cap, .knob-dial { transition-duration: 180ms !important; transition-delay: 0ms !important; }
  .hdr-logo { transform: none; filter: none; }
  .no-sda .wave-head, .no-sda .wave-played, .wave-head, .wave-played { transition: transform 200ms ease, clip-path 200ms ease; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 160ms !important; }
  .setlist details[open] > summary::after { animation: none !important; }
  .menu { clip-path: none; }
}