:root {
  --bg: #080808;
  --surface: #111111;
  --surface-soft: #151515;
  --text: #f3f0e8;
  --muted: #9f9b92;
  --line: rgba(243, 240, 232, 0.15);
  --line-strong: rgba(243, 240, 232, 0.34);
  --accent: #ff5a1f;
  --accent-bright: #ff713c;
  --max-width: 1440px;
  --page-pad: clamp(1.25rem, 4vw, 4.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Russo One", Arial, Helvetica, sans-serif;
  --font-ui: Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", monospace;
  --hero-weight: 400;
  --hero-tracking: -0.072em;
  --hero-scale-x: 1;
  --hero-scale-y: 1;
  --hero-slant: 0deg;
  --hero-pair-my: 0em;
  --hero-pair-yt: -0.040em;
  --hero-pair-tk: 0em;
  --hero-pair-ke: 0em;
  --logo-design-size: 180px;
  --logo-tracking: -12.96px;
  --logo-pair-my: 0px;
  --logo-pair-yt: -7.2px;
  --logo-pair-tk: 0px;
  --logo-pair-ke: 0px;
  --wordmark-fit: 1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: #080808;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-160%);
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 5px;
}

.page-noise {
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.cursor-glow {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: min(42rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(var(--pointer-x, 50vw) - 50%), calc(var(--pointer-y, 50vh) - 50%), 0);
  background: radial-gradient(circle, rgba(255, 90, 31, 0.12), transparent 64%);
  transition: opacity 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body.has-pointer .cursor-glow {
    opacity: 1;
  }
}

.intro {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  animation: intro-out 900ms var(--ease-out) 1150ms forwards;
}

.intro__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 40px rgba(255, 90, 31, 0.8);
  animation: intro-scan 1050ms var(--ease-out) forwards;
}

.intro__status {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
}

@keyframes intro-scan {
  from { top: 100%; }
  to { top: 0; }
}

@keyframes intro-out {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--page-pad);
  border-bottom: 1px solid transparent;
  transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}

.site-header.is-scrolled {
  background: rgba(8, 8, 8, 0.82);
  border-color: var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand-mark {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding-top: 0.06em;
  color: var(--accent);
  background: rgba(255, 90, 31, 0.055);
  border: 1px solid rgba(255, 90, 31, 0.48);
  clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 18% 100%, 0 82%);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 500ms var(--ease-out), filter 500ms ease, background 300ms ease;
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  transform: rotate(-7deg) scale(1.08);
  filter: drop-shadow(0 0 12px rgba(255, 90, 31, 0.55));
  background: rgba(255, 90, 31, 0.12);
}

.brand-name {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: var(--hero-weight);
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1;
}

.brand-name span:not(:last-child) { margin-right: var(--hero-tracking); }
.brand-name span:nth-child(2) { margin-left: var(--hero-pair-my); }
.brand-name span:nth-child(3) { margin-left: var(--hero-pair-yt); }
.brand-name span:nth-child(4) { margin-left: var(--hero-pair-tk); }
.brand-name span:nth-child(5) { margin-left: var(--hero-pair-ke); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.7rem);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  text-decoration: none;
}

.site-nav a:not(.site-nav__booking)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.3rem;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--accent);
  transition: transform 250ms var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav__booking {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line-strong);
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.site-nav__booking:hover,
.site-nav__booking:focus-visible {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 8.5rem var(--page-pad) clamp(4.5rem, 8vh, 7rem);
  border-bottom: 1px solid var(--line);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.78) 0%, transparent 46%, rgba(8, 8, 8, 0.32) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 26%);
}

.hero-grid {
  position: absolute;
  z-index: -4;
  inset: -18%;
  transform: perspective(600px) rotateX(61deg) translateY(18%) scale(1.2);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(255, 90, 31, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 31, 0.14) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent 3%, black 40%, transparent 93%);
  animation: grid-drift 18s linear infinite;
}

@keyframes grid-drift {
  to { background-position: 0 64px, 64px 0; }
}

.orb {
  position: absolute;
  z-index: -3;
  border: 1px solid rgba(255, 90, 31, 0.22);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgba(255, 90, 31, 0.06), 0 0 90px rgba(255, 90, 31, 0.05);
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 90, 31, 0.12);
  border-radius: inherit;
}

.orb::before { inset: 12%; }
.orb::after { inset: 30%; }

.orb--one {
  top: 8%;
  right: -12%;
  width: min(72vw, 70rem);
  aspect-ratio: 1;
  animation: orb-float 14s ease-in-out infinite alternate;
}

.orb--two {
  top: 32%;
  left: 39%;
  width: min(22vw, 20rem);
  aspect-ratio: 1;
  opacity: 0.65;
  animation: orb-float 10s ease-in-out -5s infinite alternate-reverse;
}

@keyframes orb-float {
  to { transform: translate3d(2.5rem, -1.5rem, 0) rotate(12deg); }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  margin-inline: auto;
}

.eyebrow,
.section-index,
.set-card__label,
.set-card__source {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.9vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


.hero-wordmark-stage {
  position: relative;
  width: 100%;
  margin-top: 0.1em;
  overflow: visible;
}

.hero-wordmark-stage[role="button"] {
  cursor: pointer;
  border-radius: 0.25rem;
}

.hero-wordmark-stage[role="button"]:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 0.8rem;
}

body.wordmark-interacted .hero-wordmark-motion {
  filter: drop-shadow(0 0 18px rgba(255, 90, 31, 0.22));
}

.hero-wordmark-fit {
  width: max-content;
  transform: scale(var(--wordmark-fit));
  transform-origin: left top;
  will-change: transform;
}

.hero-wordmark-motion {
  position: relative;
  width: max-content;
  transform-origin: center center;
  will-change: transform, filter;
}

.hero-wordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  overflow: visible;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--logo-design-size);
  font-weight: 400;
  line-height: 0.75;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  animation: wordmark-in 1000ms var(--ease-out) 1280ms forwards;
  isolation: isolate;
}

.hero-wordmark__layer {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
}

.hero-wordmark__layer span {
  display: inline-block;
  flex: 0 0 auto;
}

.hero-wordmark__layer span:not(:last-child) {
  margin-right: var(--logo-tracking);
}

.hero-wordmark__layer span:nth-child(2) { margin-left: var(--logo-pair-my); }
.hero-wordmark__layer span:nth-child(3) { margin-left: var(--logo-pair-yt); }
.hero-wordmark__layer span:nth-child(4) { margin-left: var(--logo-pair-tk); }
.hero-wordmark__layer span:nth-child(5) { margin-left: var(--logo-pair-ke); }

.hero-wordmark__layer--base {
  position: relative;
  z-index: 2;
  color: var(--text);
}

.hero-wordmark__layer--accent,
.hero-wordmark__layer--outline,
.hero-wordmark__layer--echo {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

.hero-wordmark__layer--accent {
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(255, 90, 31, 0.45));
}

.hero-wordmark__layer--outline {
  z-index: 4;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 8px rgba(255, 90, 31, 0.3));
}

.hero-wordmark__layer--echo {
  z-index: 1;
  color: var(--accent);
  filter: blur(0.35px);
}

.hero-wordmark__scan,
.hero-wordmark__beam,
.hero-wordmark__noise {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.hero-wordmark__scan--horizontal {
  top: -8%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px 2px rgba(255, 90, 31, 0.48);
}

.hero-wordmark__scan--vertical {
  top: 0;
  left: -8%;
  width: 2px;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 18px 2px rgba(255, 90, 31, 0.48);
}

.hero-wordmark__beam {
  top: -35%;
  left: -28%;
  width: 12%;
  height: 170%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 90, 31, 0.95), transparent);
  filter: blur(1px) drop-shadow(0 0 14px rgba(255, 90, 31, 0.55));
  mix-blend-mode: screen;
}

.hero-wordmark__noise {
  inset: -8%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 80px;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0 8%, #000 16% 84%, transparent 92%);
}

@keyframes wordmark-in {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.hero-wordmark:hover .hero-wordmark__layer--base {
  filter: drop-shadow(0 0 22px rgba(255, 90, 31, 0.12));
}

/* 01 — Signal Sweep */
body[data-logo-motion="signal-sweep"] .hero-wordmark__layer--accent {
  animation: motion-signal-sweep 3s linear infinite;
}
body[data-logo-motion="signal-sweep"] .hero-wordmark__scan--horizontal {
  animation: motion-scan-down 3s linear infinite;
}

/* 02 — Vertical Scanner */
body[data-logo-motion="vertical-scanner"] .hero-wordmark__layer--accent {
  animation: motion-vertical-mask 3.3s linear infinite;
}
body[data-logo-motion="vertical-scanner"] .hero-wordmark__scan--vertical {
  animation: motion-scan-across 3.3s linear infinite;
}

/* 03 — Neon Bloom */
body[data-logo-motion="neon-bloom"] .hero-wordmark__layer--base {
  animation: motion-neon-bloom 2.8s ease-in-out infinite;
}

/* 04 — Outline Trace */
body[data-logo-motion="outline-trace"] .hero-wordmark__layer--outline {
  animation: motion-outline-trace 3.2s ease-in-out infinite;
}

/* 05 — Phase Shift */
body[data-logo-motion="phase-shift"] .hero-wordmark__layer--accent {
  animation: motion-phase-shift 2.7s steps(1, end) infinite;
  mix-blend-mode: screen;
}

/* 06 — Echo Stack */
body[data-logo-motion="echo-stack"] .hero-wordmark__layer--echo-a {
  animation: motion-echo-a 3.4s ease-in-out infinite;
}
body[data-logo-motion="echo-stack"] .hero-wordmark__layer--echo-b {
  animation: motion-echo-b 3.4s ease-in-out infinite;
}

/* 07 — Glitch Slices */
body[data-logo-motion="glitch-slices"] .hero-wordmark__layer--accent {
  animation: motion-glitch-slices 3.1s steps(1, end) infinite;
}
body[data-logo-motion="glitch-slices"] .hero-wordmark__layer--base {
  animation: motion-glitch-base 3.1s steps(1, end) infinite;
}

/* 08 — Laser Slash */
body[data-logo-motion="laser-slash"] .hero-wordmark__beam {
  animation: motion-laser-slash 3.2s cubic-bezier(.6, 0, .2, 1) infinite;
}
body[data-logo-motion="laser-slash"] .hero-wordmark__layer--accent {
  animation: motion-laser-fill 3.2s cubic-bezier(.6, 0, .2, 1) infinite;
}

/* 09 — Radar Arc */
body[data-logo-motion="radar-arc"] .hero-wordmark__layer--accent {
  opacity: 0.95;
  -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, transparent 0 312deg, #000 328deg 350deg, transparent 360deg);
  mask-image: conic-gradient(from 0deg at 50% 50%, transparent 0 312deg, #000 328deg 350deg, transparent 360deg);
  animation: motion-radar 3.8s linear infinite;
}

/* 10 — Heat Wave */
body[data-logo-motion="heat-wave"] .hero-wordmark__layer--accent {
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 34%, transparent 52%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 34%, transparent 52%, transparent 100%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  animation: motion-heat-wave 3.7s ease-in-out infinite;
}

/* 11 — Data Lines */
body[data-logo-motion="data-lines"] .hero-wordmark__layer--accent {
  opacity: 0.9;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 11px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 11px);
  -webkit-mask-size: 100% 22px;
  mask-size: 100% 22px;
  animation: motion-data-lines 2.5s linear infinite;
}

/* 12 — Shutter */
body[data-logo-motion="shutter"] .hero-wordmark__layer--accent {
  opacity: 0.92;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7%, transparent 7% 12%);
  mask-image: repeating-linear-gradient(90deg, #000 0 7%, transparent 7% 12%);
  -webkit-mask-size: 120% 100%;
  mask-size: 120% 100%;
  animation: motion-shutter 3.1s ease-in-out infinite;
}

/* 13 — Static Burst */
body[data-logo-motion="static-burst"] .hero-wordmark__noise {
  animation: motion-static-burst 3.4s steps(2, end) infinite;
}
body[data-logo-motion="static-burst"] .hero-wordmark__layer--base {
  animation: motion-static-base 3.4s steps(1, end) infinite;
}

/* 14 — Bass Knock */
body[data-logo-motion="bass-knock"] .hero-wordmark-motion {
  animation: motion-bass-knock 2.4s cubic-bezier(.2, .85, .25, 1) infinite;
}
body[data-logo-motion="bass-knock"] .hero-wordmark__layer--base {
  animation: motion-bass-glow 2.4s ease-out infinite;
}

/* 15 — Magnetic Stretch */
body[data-logo-motion="magnetic-stretch"] .hero-wordmark-motion {
  animation: motion-magnetic-stretch 4.2s ease-in-out infinite;
}

/* 16 — Micro Drift */
body[data-logo-motion="micro-drift"] .hero-wordmark-motion {
  animation: motion-micro-drift 5.5s ease-in-out infinite alternate;
}
body[data-logo-motion="micro-drift"] .hero-wordmark__layer--echo-a {
  animation: motion-micro-echo 5.5s ease-in-out infinite alternate;
}

/* 17 — Invert Flash */
body[data-logo-motion="invert-flash"] .hero-wordmark__layer--accent {
  animation: motion-invert-flash 3.6s steps(1, end) infinite;
}
body[data-logo-motion="invert-flash"] .hero-wordmark__layer--base {
  animation: motion-invert-base 3.6s steps(1, end) infinite;
}

/* 18 — Edge Flicker */
body[data-logo-motion="edge-flicker"] .hero-wordmark__layer--outline {
  animation: motion-edge-flicker 3.2s steps(1, end) infinite;
}

/* 19 — Signal Dropout */
body[data-logo-motion="signal-dropout"] .hero-wordmark__layer--base {
  animation: motion-signal-dropout 3.8s steps(1, end) infinite;
}
body[data-logo-motion="signal-dropout"] .hero-wordmark__layer--accent {
  animation: motion-dropout-accent 3.8s steps(1, end) infinite;
}

/* 20 — Afterimage */
body[data-logo-motion="afterimage"] .hero-wordmark__layer--echo-a {
  animation: motion-afterimage-a 3.6s ease-in-out infinite;
}
body[data-logo-motion="afterimage"] .hero-wordmark__layer--echo-b {
  animation: motion-afterimage-b 3.6s ease-in-out infinite;
}

body.motion-paused .hero-wordmark-motion,
body.motion-paused .hero-wordmark-motion * {
  animation-play-state: paused !important;
}

@keyframes motion-signal-sweep {
  0% { opacity: 0; clip-path: inset(0 0 94% 0); }
  8%, 92% { opacity: 0.95; }
  50% { opacity: 0.95; clip-path: inset(47% 0 45% 0); }
  100% { opacity: 0; clip-path: inset(94% 0 0 0); }
}
@keyframes motion-scan-down {
  0% { top: -8%; opacity: 0; }
  8%, 92% { opacity: 0.8; }
  100% { top: 108%; opacity: 0; }
}
@keyframes motion-vertical-mask {
  0% { opacity: 0; clip-path: inset(0 94% 0 0); }
  8%, 92% { opacity: 0.95; }
  50% { opacity: 0.95; clip-path: inset(0 46% 0 46%); }
  100% { opacity: 0; clip-path: inset(0 0 0 94%); }
}
@keyframes motion-scan-across {
  0% { left: -8%; opacity: 0; }
  8%, 92% { opacity: 0.8; }
  100% { left: 108%; opacity: 0; }
}
@keyframes motion-neon-bloom {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,90,31,0)); }
  45% { filter: drop-shadow(0 0 9px rgba(255,90,31,.38)) drop-shadow(0 0 28px rgba(255,90,31,.16)); }
  58% { filter: drop-shadow(0 0 3px rgba(255,90,31,.16)); }
}
@keyframes motion-outline-trace {
  0%, 18%, 100% { opacity: 0; clip-path: inset(0 100% 0 0); }
  38% { opacity: .9; clip-path: inset(0 0 0 0); }
  58% { opacity: .35; clip-path: inset(0 0 0 0); }
  78% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes motion-phase-shift {
  0%, 72%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0); }
  74% { opacity: .72; transform: translate(-5px,1px); clip-path: inset(5% 0 58% 0); }
  76% { opacity: .45; transform: translate(7px,-1px); clip-path: inset(45% 0 18% 0); }
  78% { opacity: .8; transform: translate(-3px,0); clip-path: inset(72% 0 4% 0); }
  81% { opacity: 0; transform: translate(0,0); }
}
@keyframes motion-echo-a {
  0%, 100% { opacity: 0; transform: translate(0,0); }
  35% { opacity: .28; transform: translate(-9px, 3px); }
  62% { opacity: 0; transform: translate(-16px, 5px); }
}
@keyframes motion-echo-b {
  0%, 13%, 100% { opacity: 0; transform: translate(0,0); }
  42% { opacity: .17; transform: translate(9px, -3px); }
  70% { opacity: 0; transform: translate(18px, -5px); }
}
@keyframes motion-glitch-slices {
  0%, 68%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  70% { opacity: .8; transform: translateX(8px); clip-path: inset(7% 0 70% 0); }
  72% { opacity: .65; transform: translateX(-10px); clip-path: inset(38% 0 36% 0); }
  74% { opacity: .85; transform: translateX(5px); clip-path: inset(71% 0 8% 0); }
  76% { opacity: 0; }
}
@keyframes motion-glitch-base {
  0%, 68%, 77%, 100% { transform: translateX(0); }
  70% { transform: translateX(-2px); }
  72% { transform: translateX(3px); }
  74% { transform: translateX(-1px); }
}
@keyframes motion-laser-slash {
  0%, 15% { left: -28%; opacity: 0; }
  24% { opacity: 1; }
  60% { opacity: .95; }
  72%, 100% { left: 118%; opacity: 0; }
}
@keyframes motion-laser-fill {
  0%, 16%, 100% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  34% { opacity: .55; clip-path: polygon(0 0, 36% 0, 22% 100%, 0 100%); }
  68% { opacity: .55; clip-path: polygon(78% 0, 100% 0, 100% 100%, 64% 100%); }
  76% { opacity: 0; }
}
@keyframes motion-radar {
  to { transform: rotate(360deg); }
}
@keyframes motion-heat-wave {
  0%, 100% { -webkit-mask-position: 130% 0; mask-position: 130% 0; opacity: .15; }
  45% { -webkit-mask-position: -15% 0; mask-position: -15% 0; opacity: .82; }
  60% { -webkit-mask-position: -45% 0; mask-position: -45% 0; opacity: .35; }
}
@keyframes motion-data-lines {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 0 44px; mask-position: 0 44px; }
}
@keyframes motion-shutter {
  0%, 100% { -webkit-mask-position: 150% 0; mask-position: 150% 0; opacity: .18; }
  45% { -webkit-mask-position: 35% 0; mask-position: 35% 0; opacity: .92; }
  65% { -webkit-mask-position: -70% 0; mask-position: -70% 0; opacity: .35; }
}
@keyframes motion-static-burst {
  0%, 67%, 78%, 100% { opacity: 0; transform: translate(0,0); }
  69% { opacity: .16; transform: translate(-2px,1px); }
  72% { opacity: .28; transform: translate(3px,-1px); }
  75% { opacity: .12; transform: translate(-1px,0); }
}
@keyframes motion-static-base {
  0%, 68%, 79%, 100% { filter: none; }
  70% { filter: contrast(1.7) brightness(1.25); }
  73% { filter: contrast(.75) brightness(.8); }
  76% { filter: contrast(1.3) brightness(1.12); }
}
@keyframes motion-bass-knock {
  0%, 18%, 100% { transform: scale(1); }
  7% { transform: scale(1.018); }
  10% { transform: scale(.995); }
  13% { transform: scale(1.008); }
}
@keyframes motion-bass-glow {
  0%, 18%, 100% { filter: none; }
  7% { filter: drop-shadow(0 0 22px rgba(255,90,31,.24)); }
}
@keyframes motion-magnetic-stretch {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  38% { transform: scaleX(1.025) scaleY(.99); }
  62% { transform: scaleX(.992) scaleY(1.008); }
}
@keyframes motion-micro-drift {
  0% { transform: translate3d(-3px, 2px, 0) rotate(-.12deg); }
  100% { transform: translate3d(5px, -3px, 0) rotate(.15deg); }
}
@keyframes motion-micro-echo {
  0% { opacity: .08; transform: translate(-4px,2px); }
  100% { opacity: .18; transform: translate(5px,-2px); }
}
@keyframes motion-invert-flash {
  0%, 70%, 76%, 100% { opacity: 0; }
  71%, 73% { opacity: 1; }
  75% { opacity: .45; }
}
@keyframes motion-invert-base {
  0%, 70%, 76%, 100% { color: var(--text); }
  71%, 73% { color: var(--bg); text-shadow: 0 0 0 var(--bg); }
  75% { color: var(--text); }
}
@keyframes motion-edge-flicker {
  0%, 54%, 100% { opacity: 0; }
  56% { opacity: .75; }
  57% { opacity: .12; }
  59% { opacity: .95; }
  61% { opacity: .25; }
  64% { opacity: .7; }
  68% { opacity: 0; }
}
@keyframes motion-signal-dropout {
  0%, 64%, 100% { opacity: 1; clip-path: inset(0); }
  66% { opacity: .48; clip-path: inset(0 0 73% 0); }
  68% { opacity: .78; clip-path: inset(34% 0 39% 0); }
  70% { opacity: .38; clip-path: inset(72% 0 0 0); }
  73% { opacity: 1; clip-path: inset(0); }
}
@keyframes motion-dropout-accent {
  0%, 64%, 74%, 100% { opacity: 0; }
  66% { opacity: .72; clip-path: inset(72% 0 0 0); transform: translateX(4px); }
  68% { opacity: .72; clip-path: inset(0 0 72% 0); transform: translateX(-4px); }
  70% { opacity: .55; clip-path: inset(36% 0 36% 0); transform: translateX(2px); }
}
@keyframes motion-afterimage-a {
  0%, 15%, 100% { opacity: 0; transform: translate(0,0); }
  36% { opacity: .3; transform: translate(-7px,0); }
  65% { opacity: 0; transform: translate(-20px,0); }
}
@keyframes motion-afterimage-b {
  0%, 27%, 100% { opacity: 0; transform: translate(0,0); }
  48% { opacity: .18; transform: translate(7px,0); }
  77% { opacity: 0; transform: translate(20px,0); }
}

.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}

.hero__statement {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.button {
  min-height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 250ms var(--ease-out), color 250ms ease, background 250ms ease, border-color 250ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
}

.button--primary {
  min-width: 15rem;
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--text);
  border-color: var(--text);
}

.button--ghost {
  min-width: 11rem;
  background: rgba(8, 8, 8, 0.35);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.hero__rail {
  position: absolute;
  right: var(--page-pad);
  bottom: 14rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right bottom;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.hero__rail i {
  width: 5rem;
  height: 1px;
  overflow: hidden;
  background: var(--line-strong);
}

.hero__rail i::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background: var(--accent);
  animation: rail-move 2.2s ease-in-out infinite;
}

@keyframes rail-move {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
}

.motion-launcher {
  position: absolute;
  z-index: 8;
  top: 50%;
  right: var(--page-pad);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.55rem;
  min-width: 13.5rem;
  padding: 0.7rem 0.8rem;
  color: var(--muted);
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms var(--ease-out);
}

.motion-launcher:hover,
.motion-launcher:focus-visible,
.motion-launcher[aria-expanded="true"] {
  color: var(--text);
  background: rgba(16, 16, 16, 0.9);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.motion-launcher__dot {
  grid-row: 1 / span 2;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.75);
  animation: motion-launcher-dot 1.5s ease-in-out infinite;
}

.motion-launcher__label {
  color: var(--muted);
}

.motion-launcher strong {
  display: block;
  margin-top: 0.12rem;
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@keyframes motion-launcher-dot {
  50% { opacity: 0.35; box-shadow: 0 0 4px rgba(255, 90, 31, 0.35); }
}

.motion-launcher[hidden],
.motion-lab[hidden] {
  display: none;
}

.motion-lab {
  position: fixed;
  z-index: 300;
  right: var(--page-pad);
  bottom: var(--page-pad);
  width: min(29rem, calc(100vw - 2 * var(--page-pad)));
  padding: 1.15rem;
  color: var(--text);
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(18px);
}

.motion-lab::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 32%;
  left: -1px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(255, 90, 31, 0.5);
}

.motion-lab__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.motion-lab__head p,
.motion-lab__current > span,
.motion-lab__select-label,
.motion-lab__hint,
.motion-lab__mode-state strong {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.59rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.motion-lab__head h2 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.motion-lab__close {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.motion-lab__close:hover,
.motion-lab__close:focus-visible {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.motion-lab__current {
  min-height: 8.2rem;
  padding: 1.15rem 0;
}

.motion-lab__current strong {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.motion-lab__current p {
  max-width: 37rem;
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.motion-lab__mode-state {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.motion-lab__mode-state strong {
  display: block;
  color: var(--accent-bright);
}

.motion-lab__mode-state p {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.55;
}

.motion-lab__select-label {
  display: block;
  margin-bottom: 0.45rem;
}

.motion-lab select {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 2.4rem 0.65rem 0.75rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
}

.motion-lab__navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.motion-lab__navigation button,
.motion-lab__pause,
.motion-lab__mode {
  min-height: 2.75rem;
  padding: 0.6rem 0.7rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.motion-lab__navigation button:hover,
.motion-lab__navigation button:focus-visible,
.motion-lab__pause:hover,
.motion-lab__pause:focus-visible,
.motion-lab__pause[aria-pressed="true"],
.motion-lab__mode:hover,
.motion-lab__mode:focus-visible,
.motion-lab__mode[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.motion-lab__navigation button:last-child {
  text-align: right;
}

.motion-lab__mode,
.motion-lab__pause {
  width: 100%;
  margin-top: 0.5rem;
}

.motion-lab__hint {
  margin-top: 0.8rem;
  line-height: 1.45;
  text-transform: none;
}

.motion-lab__hint code {
  color: var(--text);
  font-family: var(--font-mono);
}

.section {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  padding: clamp(6rem, 12vw, 11rem) var(--page-pad);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.1fr) minmax(16rem, 0.8fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 6.2rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.section-note {
  max-width: 28rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.87rem;
}

.latest {
  position: relative;
}

.latest::before {
  content: "";
  position: absolute;
  top: 12%;
  left: -8vw;
  width: 24rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 90, 31, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.set-card {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.75fr);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.34);
}

.set-card__visual {
  position: relative;
  min-height: 27rem;
  display: block;
  overflow: hidden;
  background: #0d0d0d;
}

.set-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.58));
}

.set-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.1);
  transition: transform 850ms var(--ease-out), filter 850ms ease;
}

.set-card__visual:hover img,
.set-card__visual:focus-visible img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.06);
}

.set-card__scan {
  position: absolute;
  z-index: 3;
  top: -10%;
  left: 0;
  width: 100%;
  height: 2px;
  opacity: 0;
  background: var(--accent);
  box-shadow: 0 0 26px var(--accent);
}

.set-card__visual:hover .set-card__scan,
.set-card__visual:focus-visible .set-card__scan {
  opacity: 0.75;
  animation: card-scan 2.6s linear infinite;
}

@keyframes card-scan {
  to { transform: translateY(33rem); }
}

.set-card__play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 5.2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.25);
  backdrop-filter: blur(8px);
  transition: color 300ms ease, background 300ms ease, border-color 300ms ease, transform 500ms var(--ease-out);
}

.set-card__play svg {
  width: 2rem;
}

.set-card__visual:hover .set-card__play,
.set-card__visual:focus-visible .set-card__play {
  transform: translate(-50%, -50%) scale(1.08) rotate(5deg);
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.set-card__source {
  position: absolute;
  z-index: 4;
  right: 1.5rem;
  bottom: 1.35rem;
  color: var(--text);
}

.set-card__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(1.7rem, 4vw, 3.5rem);
}

.set-card__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0 0 1.15rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.set-card__kicker time {
  color: var(--text);
}

.set-card__info h3 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.35rem, 4.2vw, 4.35rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.set-card__meta {
  max-width: 25rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.text-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, padding 300ms var(--ease-out);
}

.text-link:hover,
.text-link:focus-visible {
  padding-inline: 0.7rem;
  color: var(--accent);
}

.noscript-note {
  margin-top: 1rem;
  color: var(--muted);
}

.about {
  border-top: 1px solid var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.75fr) minmax(16rem, 0.65fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
}

.about-lead {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.about-copy {
  color: var(--muted);
  font-size: 0.96rem;
}

.about-copy p {
  margin: 0 0 1.2rem;
}

.signal-object {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.signal-object::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.2), transparent 70%);
  filter: blur(6px);
}

.signal-object__ring {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255, 90, 31, 0.25);
  border-radius: 50%;
  animation: ring-rotate 10s linear infinite;
}

.signal-object__ring::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.signal-object__ring:nth-child(2) {
  inset: 18%;
  animation-duration: 7s;
  animation-direction: reverse;
}

.signal-object__ring:nth-child(3) {
  inset: 31%;
  animation-duration: 5s;
}

@keyframes ring-rotate {
  to { transform: rotate(360deg); }
}

.signal-object > span {
  position: relative;
  width: clamp(5.5rem, 10vw, 8.25rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding-top: 0.06em;
  color: var(--accent);
  background: rgba(255, 90, 31, 0.045);
  border: 1px solid rgba(255, 90, 31, 0.34);
  clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 18% 100%, 0 82%);
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 7vw, 6.25rem);
  font-weight: 400;
  line-height: 1;
}

.booking {
  position: relative;
  min-height: 78svh;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.5fr);
  align-items: end;
  gap: 4rem;
  overflow: hidden;
  padding: clamp(7rem, 13vw, 12rem) var(--page-pad) clamp(4rem, 7vw, 6rem);
  color: var(--bg);
  background: var(--accent);
}

.booking-wordmark {
  position: absolute;
  top: -0.12em;
  right: -0.055em;
  display: inline-flex;
  align-items: center;
  color: rgba(8, 8, 8, 0.064);
  font-family: var(--font-display);
  font-size: clamp(11rem, 29vw, 32rem);
  font-weight: 400;
  line-height: 0.92;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.booking-wordmark span:not(:last-child) { margin-right: var(--hero-tracking); }
.booking-wordmark span:nth-child(2) { margin-left: var(--hero-pair-my); }
.booking-wordmark span:nth-child(3) { margin-left: var(--hero-pair-yt); }
.booking-wordmark span:nth-child(4) { margin-left: var(--hero-pair-tk); }
.booking-wordmark span:nth-child(5) { margin-left: var(--hero-pair-ke); }

.booking__line {
  position: absolute;
  top: 0;
  left: var(--page-pad);
  right: var(--page-pad);
  height: 1px;
  background: rgba(8, 8, 8, 0.3);
}

.booking .section-index {
  color: var(--bg);
  opacity: 0.66;
}

.booking h2 {
  max-width: 12ch;
  margin: 1rem 0 clamp(3rem, 6vw, 6rem);
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.booking-mail {
  max-width: 46rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.3rem 0;
  border-top: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  font-size: clamp(1.2rem, 2.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: padding 300ms var(--ease-out), background 300ms ease;
}

.booking-mail:hover,
.booking-mail:focus-visible {
  padding-inline: 1rem;
  background: rgba(8, 8, 8, 0.08);
}

.booking__links {
  position: relative;
  z-index: 2;
  display: grid;
}

.booking__links a {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(8, 8, 8, 0.32);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: padding 250ms var(--ease-out), background 250ms ease;
}

.booking__links a:last-child {
  border-bottom: 1px solid rgba(8, 8, 8, 0.32);
}

.booking__links a:hover,
.booking__links a:focus-visible {
  padding-inline: 0.65rem;
  background: rgba(8, 8, 8, 0.07);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--page-pad);
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 850ms var(--ease-out), transform 850ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .section-heading {
    grid-template-columns: 1fr 2fr;
  }

  .section-note {
    grid-column: 2;
  }

  .set-card {
    grid-template-columns: 1fr;
  }

  .set-card__visual {
    min-height: clamp(20rem, 54vw, 34rem);
  }

  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-lead {
    grid-column: 1 / -1;
  }

  .signal-object {
    max-width: 22rem;
    justify-self: end;
  }

  .booking {
    grid-template-columns: 1fr;
  }

  .booking__links {
    max-width: 34rem;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-block: 0.9rem;
  }

  .site-nav a:not(.site-nav__booking) {
    display: none;
  }

  .hero {
    min-height: 100svh;
    padding-top: 7rem;
    padding-bottom: 3.5rem;
  }

  .hero__bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions {
    justify-content: stretch;
  }

  .button {
    width: 100%;
  }

  .hero__rail {
    display: none;
  }

  .motion-launcher {
    top: auto;
    right: var(--page-pad);
    bottom: 1rem;
    min-width: 0;
  }

  .motion-launcher__label {
    display: none;
  }

  .motion-launcher strong {
    margin-top: 0;
  }

  .motion-lab {
    right: var(--page-pad);
    bottom: var(--page-pad);
  }

  .orb--one {
    width: 115vw;
    right: -55%;
  }

  .orb--two {
    width: 55vw;
    left: 52%;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .section-note {
    grid-column: auto;
  }

  .set-card__info {
    min-height: 22rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .signal-object {
    width: min(100%, 18rem);
    justify-self: center;
  }

  .booking {
    min-height: 88svh;
  }

  .booking h2 {
    font-size: clamp(3.3rem, 17vw, 7rem);
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 420px) {
  .brand-name {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .intro {
    display: none;
  }

  .hero-wordmark,
  .reveal {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .hero-wordmark__layer--accent,
  .hero-wordmark__layer--outline,
  .hero-wordmark__layer--echo,
  .hero-wordmark__scan,
  .hero-wordmark__beam,
  .hero-wordmark__noise,
  .motion-launcher,
  .motion-lab {
    display: none !important;
  }

  .cursor-glow {
    display: none;
  }
}


/* Typography selections applied by the private test lab. */
.section-heading h2,
.booking__content h2,
.set-card__info h3,
.about-lead {
  font-family: var(--font-display);
}

.type-lab-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms ease;
}

.type-lab-link:hover,
.type-lab-link:focus-visible {
  color: var(--accent);
}

@media (max-width: 720px) {
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
  }
}

.footer-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.footer-tools .type-lab-link {
  margin: 0;
}

/* V25: approved logo geometry and selected Identity concept 07.
   These rules intentionally leave the rest of the original site untouched. */
.brand-mark {
  position: relative;
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 0;
  clip-path: none;
  line-height: 1;
  --brand-inset: 0.22rem;
  --brand-reach: 0.62rem;
  --brand-stroke: 2px;
}

.brand-mark__corner {
  position: absolute;
  width: var(--brand-reach);
  height: var(--brand-reach);
  color: currentColor;
}

.brand-mark__corner--tl {
  top: var(--brand-inset);
  left: var(--brand-inset);
  border-top: var(--brand-stroke) solid currentColor;
  border-left: var(--brand-stroke) solid currentColor;
}

.brand-mark__corner--tr {
  top: var(--brand-inset);
  right: var(--brand-inset);
  border-top: var(--brand-stroke) solid currentColor;
  border-right: var(--brand-stroke) solid currentColor;
}

.brand-mark__corner--bl {
  bottom: var(--brand-inset);
  left: var(--brand-inset);
  border-bottom: var(--brand-stroke) solid currentColor;
  border-left: var(--brand-stroke) solid currentColor;
}

.brand-mark__corner--br {
  right: var(--brand-inset);
  bottom: var(--brand-inset);
  border-right: var(--brand-stroke) solid currentColor;
  border-bottom: var(--brand-stroke) solid currentColor;
}

.brand-mark__m {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 0.04em;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1;
  transform: scale(1.16);
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  transform: rotate(-7deg) scale(1.08);
  filter: drop-shadow(0 0 12px rgba(255, 90, 31, 0.55));
  background: transparent;
}

.about {
  border-top: 1px solid var(--line);
}

.identity-atmosphere {
  position: relative;
  min-height: clamp(34rem, 54vw, 46rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0b0b;
}

.identity-atmosphere__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  filter: grayscale(1) contrast(1.08) brightness(0.78);
  transform: scale(1.01);
}

.identity-atmosphere__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.94) 0%, rgba(8, 8, 8, 0.76) 43%, rgba(8, 8, 8, 0.34) 72%, rgba(8, 8, 8, 0.13) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.18), rgba(8, 8, 8, 0.38));
}

.identity-atmosphere__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(15rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(1.5rem, 4.5vw, 4.5rem);
}

.identity-atmosphere__copy {
  max-width: 42rem;
}

.identity-atmosphere__copy h2 {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.2vw, 6.25rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.identity-atmosphere__lead {
  max-width: 40rem;
  margin: clamp(1.2rem, 2.6vw, 2.2rem) 0 0;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.38;
  letter-spacing: -0.018em;
}

.identity-atmosphere__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.2rem);
  margin-top: 1.4rem;
  color: rgba(243, 240, 232, 0.72);
  font-size: 0.94rem;
}

.identity-atmosphere__body p {
  margin: 0;
}

.identity-atmosphere__signal {
  width: min(100%, 21rem);
  justify-self: end;
  align-self: start;
  margin-top: clamp(0rem, 3vw, 2.2rem);
}

.signal-logo {
  position: relative;
  width: clamp(5.5rem, 10vw, 8.25rem);
  aspect-ratio: 1;
  color: var(--accent);
  --signal-inset: 7px;
  --signal-reach: 23px;
  --signal-stroke: 3px;
}

.signal-logo__corner {
  position: absolute;
  width: var(--signal-reach);
  height: var(--signal-reach);
  color: currentColor;
}

.signal-logo__corner--tl {
  top: var(--signal-inset);
  left: var(--signal-inset);
  border-top: var(--signal-stroke) solid currentColor;
  border-left: var(--signal-stroke) solid currentColor;
}

.signal-logo__corner--tr {
  top: var(--signal-inset);
  right: var(--signal-inset);
  border-top: var(--signal-stroke) solid currentColor;
  border-right: var(--signal-stroke) solid currentColor;
}

.signal-logo__corner--bl {
  bottom: var(--signal-inset);
  left: var(--signal-inset);
  border-bottom: var(--signal-stroke) solid currentColor;
  border-left: var(--signal-stroke) solid currentColor;
}

.signal-logo__corner--br {
  right: var(--signal-inset);
  bottom: var(--signal-inset);
  border-right: var(--signal-stroke) solid currentColor;
  border-bottom: var(--signal-stroke) solid currentColor;
}

.signal-logo__m {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 0.04em;
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 7vw, 6.25rem);
  font-weight: 400;
  line-height: 1;
  transform: scale(1.16);
}

@media (max-width: 980px) {
  .identity-atmosphere__content {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.48fr);
    gap: 1.5rem;
  }

  .identity-atmosphere__body {
    grid-template-columns: 1fr;
  }

  .identity-atmosphere__signal {
    width: min(100%, 17rem);
  }
}

@media (max-width: 720px) {
  .identity-atmosphere {
    min-height: 44rem;
  }

  .identity-atmosphere__image {
    object-position: 58% center;
  }

  .identity-atmosphere__shade {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.24) 0%, rgba(8, 8, 8, 0.58) 42%, rgba(8, 8, 8, 0.96) 100%);
  }

  .identity-atmosphere__content {
    grid-template-columns: 1fr;
    align-content: end;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .identity-atmosphere__signal {
    grid-row: 1;
    width: 11rem;
    justify-self: end;
    align-self: start;
    margin: 0;
  }

  .identity-atmosphere__copy h2 {
    font-size: clamp(2.7rem, 14vw, 5.1rem);
  }

  .identity-atmosphere__body {
    gap: 0.85rem;
  }
}


/* V26 / mobile-only layout refinements
   Desktop geometry and spacing remain unchanged. */
@media (max-width: 720px) {
  /* On small screens, a full viewport-height hero leaves too much empty
     space above the content. Keep a deliberate opening, but let the hero
     follow the actual content height. */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: 5.75rem;
    padding-bottom: 3.25rem;
  }

  /* Separate the Identity image and copy into two controlled layers.
     The text panel overlaps the image slightly; the animated logo now lives
     inside the panel instead of floating over the artist's face. */
  .identity-atmosphere {
    min-height: auto;
    overflow: visible;
    background: #0b0b0b;
  }

  .identity-atmosphere__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(16rem, 68vw, 21rem);
    object-position: 60% 42%;
    transform: none;
  }

  .identity-atmosphere__shade {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: clamp(16rem, 68vw, 21rem);
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.04) 0%, rgba(8, 8, 8, 0.16) 58%, rgba(8, 8, 8, 0.7) 100%);
  }

  .identity-atmosphere__content {
    min-height: auto;
    width: calc(100% - 1.5rem);
    margin: -2rem auto 0;
    padding: 1.3rem;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1rem;
    background: rgba(10, 10, 10, 0.96);
    border: 1px solid var(--line);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3);
  }

  .identity-atmosphere__copy {
    max-width: none;
  }

  .identity-atmosphere__copy h2 {
    font-size: clamp(2.55rem, 12.2vw, 4.35rem);
  }

  .identity-atmosphere__lead {
    margin-top: 1rem;
  }

  .identity-atmosphere__body {
    gap: 0.85rem;
    margin-top: 1.1rem;
  }

  .identity-atmosphere__signal {
    grid-row: auto;
    width: 8.5rem;
    justify-self: end;
    align-self: end;
    margin: -0.2rem 0 0;
  }

  .identity-atmosphere__signal.signal-object {
    min-height: 8.5rem;
  }

  .identity-atmosphere__signal .signal-logo {
    width: 5.6rem;
  }
}

/* V27 / mobile Identity signal placement
   Keep the animated mark attached to the image rather than the text panel. */
@media (max-width: 720px) {
  /* Allow the signal to position against the full Identity component. */
  .identity-atmosphere__content {
    position: static;
  }

  /* The top-left of this image remains clear of the artist's face. */
  .identity-atmosphere__signal {
    position: absolute;
    top: clamp(0.65rem, 3vw, 1.1rem);
    left: clamp(0.65rem, 3vw, 1.1rem);
    right: auto;
    bottom: auto;
    z-index: 3;
    width: clamp(7.25rem, 29vw, 10.5rem);
    min-height: 0;
    margin: 0;
    pointer-events: none;
  }

  .identity-atmosphere__signal.signal-object {
    min-height: 0;
  }

  .identity-atmosphere__signal .signal-logo {
    width: clamp(4.4rem, 17vw, 6.2rem);
    --signal-inset: clamp(4px, 1.2vw, 7px);
    --signal-reach: clamp(14px, 4.7vw, 23px);
    --signal-stroke: clamp(2px, 0.65vw, 3px);
  }

  .identity-atmosphere__signal .signal-logo__m {
    font-size: clamp(2.55rem, 11.5vw, 4rem);
  }
}

/* V28 / mobile Identity card simplification
   Keep one outer frame only. The image and copy now form a single card. */
@media (max-width: 720px) {
  .identity-atmosphere__content {
    width: 100%;
    margin: 0;
    padding: 1.3rem;
    background: #0b0b0b;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
}

/* V34: header brand mark centered with vector M instead of font glyph */
.brand-mark {
  --brand-inset: 0.22rem;
  --brand-reach: 0.62rem;
  --brand-stroke: 2px;
}

.brand-mark__m { display:none; }

.brand-mark__svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.04rem;
  height: auto;
  color: currentColor;
  transform: translate(-50%, -50%);
  overflow: visible;
}