/* onemusicmedia - shared styles (all pages) */
/* ═══════════════════════════════════════════════════════════════
   FONTS  (self-hosted, no third-party requests)
   ═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
  --orange:      #ff9601;
  --orange-600:  #e78500;
  --orange-100:  #fff0d9;
  --orange-50:   #fff8ec;

  --white:       #ffffff;
  --ink-50:      #fafafa;
  --ink-100:     #f4f4f3;
  --ink-200:     #e7e7e5;
  --ink-300:     #d3d3d0;
  --ink-400:     #a6a6a2;
  --ink-500:     #737370;
  --ink-600:     #525250;
  --ink-700:     #3a3a38;
  --ink-800:     #24241e;
  --ink-900:     #141413;
  --black:       #0a0a08;

  --bg:          var(--white);
  --bg-subtle:   var(--ink-50);
  --bg-muted:    var(--ink-100);
  --fg1:         var(--ink-900);
  --fg2:         var(--ink-600);
  --fg3:         var(--ink-500);
  --border:      var(--ink-200);
  --border-strong: var(--ink-300);

  /* shape system: rounded containers, pill interactive controls, circle icon buttons */
  --r:      20px;
  --r-pill: 999px;
  --max: 1400px;
  --gutter: 40px;

  --ease: cubic-bezier(.16,1,.3,1);

  --shadow-flat:    0 1px 0 rgba(20,20,19,.06);
  --shadow-elevate: 0 32px 64px -24px rgba(10,10,8,.45);
}

/* ═══════════════ RESET ═══════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
em, .serif { font-style: italic; font-weight: inherit; color: var(--orange); }

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

/* ═══════════════ FOCUS (keyboard) ═══════════════ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════ DARK SECTION HELPER ═══════════════ */
.dark-section {
  background: var(--ink-900);
  color: var(--white);
}

/* ═══════════════ SCROLL PROGRESS (all pages) ═══════════════ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* ═══════════════ NAV - flush graphic bar, always dark ═══════════════ */
#nav {
  position: fixed; top: 16px; left: 16px; right: 16px;
  z-index: 100;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  max-width: var(--max);
  margin: 0 auto;
  background: rgba(15, 15, 14, .88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--white);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-elevate), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}
#nav.scrolled .nav-inner { background: rgba(10, 10, 8, .96); transform: scale(0.97); }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo .logo-img { height: 18px; width: auto; display: block; }
.nav-logo .logo-img-stacked { display: none; }
.nav-logo .logo-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: currentColor;
  line-height: 1;
}
@media (max-width: 520px) {
  .nav-logo .logo-text { display: none; }
  .nav-logo .logo-img-full { display: none; }
  .nav-logo .logo-img-stacked { display: block; height: 22px; }
}
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: var(--r-pill);
  transition: background 200ms var(--ease), color 200ms, opacity 200ms;
  opacity: .68;
}
.nav-links a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.nav-links a.active { opacity: 1; background: rgba(255,150,1,.14); color: var(--orange); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--orange); color: var(--ink-900);
  transition: transform 200ms var(--ease), background 200ms;
}
.nav-cta:hover { background: var(--white); transform: translateY(-1px); }
.nav-cta .arrow { transition: transform 200ms var(--ease); }
.nav-cta:hover .arrow { transform: translateX(3px); }

.nav-social { display: flex; align-items: center; gap: 2px; }
.nav-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: currentColor;
  opacity: .6;
  transition: opacity 200ms, background 200ms, color 200ms;
}
.nav-social a:hover { opacity: 1; background: rgba(255,255,255,.08); color: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-hbg { display: none; flex-direction: column; gap: 4px; padding: 10px; }
.nav-hbg span { width: 18px; height: 1.5px; background: currentColor; transition: transform 200ms, opacity 200ms; }
.nav-hbg.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-hbg.open span:nth-child(2) { opacity: 0; }
.nav-hbg.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* mobile nav drawer - floating glass panel under the pill bar */
.mob-menu {
  position: fixed; top: 82px; left: 16px; right: 16px; z-index: 99;
  background: rgba(15, 15, 14, .92);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r);
  box-shadow: var(--shadow-elevate), inset 0 1px 0 rgba(255,255,255,.12);
  padding: 8px 20px 12px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform 240ms var(--ease), opacity 200ms;
}
.mob-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mob-menu a { display: block; padding: 16px 4px; font-size: 20px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.10); }
.mob-menu a:last-child { border-bottom: 0; }
.mob-menu a.active { color: var(--orange); }

/* scrim behind the mobile drawer - click-outside-to-close target */
.mob-scrim {
  position: fixed; inset: 0; z-index: 97;
  background: rgba(10, 10, 8, .5);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.mob-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 880px) {
  .nav-links, .nav-cta, .nav-social { display: none; }
  .nav-hbg { display: flex; }
}
@media (min-width: 881px) {
  .mob-scrim { display: none; }
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700;
  transition: transform 200ms var(--ease), background 200ms, color 200ms;
  white-space: nowrap;
}
.btn-primary { background: var(--orange); color: var(--ink-900); }
.btn-primary:hover { transform: translateY(-2px); background: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.24); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.btn-dark { background: var(--ink-900); color: var(--white); }
.btn-dark:hover { background: var(--orange); color: var(--ink-900); transform: translateY(-2px); }
.btn .arrow { transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ═══════════════ HERO (DARK, centered manifesto + bento) ═══════════════ */
.hero {
  position: relative;
  padding: 148px var(--gutter) 80px;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--white);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,150,1,.16), transparent 60%);
}
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}
.hero-top {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.hero-top .eyebrow { justify-content: center; }

.hero-title {
  font-size: clamp(44px, 6.4vw, 92px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero-title .line span { display: inline-block; will-change: transform, opacity; }

.hero-sub {
  max-width: 520px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}

.hero-cta-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center;
}

/* single reel banner beneath the headline */
.hero-reel {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 72px auto 0;
  aspect-ratio: 21/9;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(135deg, #2a1a0a, #3a2410);
  will-change: transform;
}
.hero-reel::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,150,1,.28), transparent 65%);
}
.hero-reel-img {
  position: absolute; inset: 0; opacity: .85;
  background-size: cover; background-position: center;
  transition: transform 500ms var(--ease);
}
.hero-reel:hover .hero-reel-img { transform: scale(1.03); }
.hero-reel-meta {
  position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2;
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
}
.hero-reel-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.hero-reel-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hero-reel-play {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange); color: var(--ink-900);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform 200ms var(--ease), background 200ms;
}
.hero-reel-play:hover { transform: scale(1.08); background: var(--white); }
.hero-reel-play svg { margin-left: 3px; }

/* plain stat row underneath - bordered-top, no boxes */
.hero-stats {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 64px auto 0;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.hero-stat .accent { width: 26px; height: 2px; background: var(--orange); margin-bottom: 14px; }
.hero-stat .num { font-size: clamp(30px, 3.2vw, 44px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.hero-stat .lbl { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }

@media (max-width: 980px) {
  .hero-reel { aspect-ratio: 16/10; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .hero { padding: 128px 20px 56px; }
}

/* ═══════════════ MARQUEE - dark ticker, orange text ═══════════════ */
.marquee-band {
  background: var(--ink-900);
  color: var(--orange);
  padding: 20px 0;
  border-top: 1px solid rgba(255,150,1,.3);
  border-bottom: 1px solid rgba(255,150,1,.3);
  overflow: hidden;
}
.marquee-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -.01em;
  align-items: center;
}
.marquee-track .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; }
.marquee-track span:not(.dot) { color: var(--white); font-weight: 800; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════════ SECTION BASE ═══════════════ */
.section {
  position: relative;
  padding: 120px var(--gutter);
}
.container { max-width: var(--max); margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}
.eyebrow .bar { display: none; }

.section-title {
  font-size: clamp(38px, 5.2vw, 80px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.035em;
  max-width: 1100px;
}
.section-sub {
  margin-top: 24px;
  max-width: 640px;
  font-size: 18px; line-height: 1.55;
  color: var(--fg2);
}
.dark-section .section-sub { color: rgba(255,255,255,.62); }

@media (max-width: 720px) {
  .section { padding: 80px 20px; }
}

/* ═══════════════ ABOUT TEASER (WHITE) ═══════════════ */
.about-teaser .grid {
  display: grid; grid-template-columns: 1fr;
  margin-top: 40px;
}
.about-teaser .body-text { font-size: 22px; line-height: 1.45; color: var(--fg1); font-weight: 400; }
.about-teaser .body-text em { color: var(--orange); font-weight: 700; }
.about-teaser .meta-row { display: flex; gap: 0; margin-top: 40px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.about-teaser .meta-row .item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 28px 18px 0; margin-right: 28px;
  border-right: 1px solid var(--border);
}
.about-teaser .meta-row .item:last-child { border-right: 0; }
.about-teaser .meta-row .icon { display: none; }
.about-teaser .meta-row .label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.about-teaser .meta-row .value { font-size: 20px; font-weight: 800; color: var(--fg1); letter-spacing: -.01em; }

/* mobile: border-right + :last-child breaks once items wrap (a mid-row item
   keeps its border-right with nothing beside it) - stack instead, divide
   with border-bottom so it always sits between two real items */
@media (max-width: 640px) {
  .about-teaser .meta-row { flex-direction: column; flex-wrap: nowrap; }
  .about-teaser .meta-row .item {
    border-right: 0; margin-right: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .about-teaser .meta-row .item:last-child { border-bottom: 0; }
}

/* ═══════════════ WORK GRID - caption below media, no overlay ═══════════════ */
.about-teaser { padding-bottom: 60px; }
.work-section { background: var(--bg-subtle); padding-top: 60px; }
.work-head {
  display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 56px;
}
.work-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.chip {
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--border);
  transition: all 180ms var(--ease);
}
.chip:hover { border-color: var(--ink-900); }
.chip.on { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 18px;
  row-gap: 56px;
}
.work-card { display: flex; flex-direction: column; gap: 14px; }
.work-card-media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ink-200);
  cursor: pointer;
}
.work-card .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 600ms var(--ease);
}
.work-card:hover .bg { transform: scale(1.05); }
.work-card-caption {
  display: flex; align-items: end; justify-content: space-between; gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.work-card-caption .meta-left { min-width: 0; }
.work-card .tag {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.work-card .title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--fg1); }
.work-card .corner {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--fg1);
  flex-shrink: 0;
  transition: color 200ms, gap 200ms;
}
.work-card .corner svg { transition: transform 200ms var(--ease); }
.work-card:hover .corner { color: var(--orange); }
.work-card:hover .corner svg { transform: rotate(-45deg); }

.work-card.large { grid-column: span 7; }
.work-card.med  { grid-column: span 5; }
.work-card.tall { grid-column: span 4; }
.work-card.wide { grid-column: span 8; }
.work-card.large .work-card-media { aspect-ratio: 16/11; }
.work-card.tall .work-card-media { aspect-ratio: 4/5; }
.work-card.wide .work-card-media { aspect-ratio: 16/9; }

.work-bg-1 { background-image: linear-gradient(135deg, #3a2410 0%, #ff9601 50%, #ffd9a0 100%); }
.work-bg-2 { background-image: linear-gradient(180deg, #1a1a1a 0%, #444 100%); }
.work-bg-3 { background-image: linear-gradient(135deg, #d4c4a8 0%, #a8915f 100%); }
.work-bg-4 { background-image: linear-gradient(135deg, #5a3018 0%, #c97200 100%); }
.work-bg-5 { background-image: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); }

@media (max-width: 880px) {
  .work-head { flex-direction: column; align-items: start; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card.large, .work-card.med, .work-card.tall, .work-card.wide { grid-column: span 1; }
  .work-card.large .work-card-media, .work-card.tall .work-card-media, .work-card.wide .work-card-media { aspect-ratio: 4/3; }
}

/* ═══════════════ STATS BAND (DARK, flattened / centered) ═══════════════ */
.stats-band { padding: 100px var(--gutter); }
.stats-band .container { text-align: center; }
.stats-band .lead-text {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  max-width: 620px; margin: 0 auto;
}
.stats-band-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin-top: 56px;
}
.stats-band-grid .item {
  padding: 0;
}
.stats-band-grid .item .accent { width: 26px; height: 2px; background: var(--orange); margin: 0 auto 16px; }
.stats-band-grid .item .num { font-size: clamp(40px, 4.4vw, 60px); font-weight: 900; letter-spacing: -.025em; line-height: 1; }
.stats-band-grid .item .lbl { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }

@media (max-width: 600px) {
  .stats-band-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ SERVICES - white, bordered cards ═══════════════ */
.services { background: var(--white); }
.services .grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.svc-card {
  display: block;
  position: relative;
  padding: 32px 28px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color 200ms, transform 220ms var(--ease);
}
.svc-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.svc-icon {
  width: 44px; height: 44px;
  border-radius: var(--r);
  background: var(--orange-50);
  color: var(--orange);
  display: grid; place-items: center;
  margin-bottom: 24px;
  transition: background 220ms, color 220ms;
}
.svc-card:hover .svc-icon { background: var(--orange); color: var(--ink-900); }
.svc-num { position: absolute; top: 28px; right: 28px; font-size: 12px; font-weight: 700; color: var(--fg3); letter-spacing: .06em; }
.svc-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 12px; line-height: 1.2; color: var(--fg1); }
.svc-desc { font-size: 14px; line-height: 1.55; color: var(--fg2); margin-bottom: 20px; }
.svc-list { display: flex; flex-direction: column; gap: 9px; }
.svc-list li { font-size: 13px; color: var(--fg2); display: flex; align-items: center; gap: 10px; }
.svc-list .check { color: var(--orange); flex-shrink: 0; display: inline-flex; }

@media (max-width: 600px) { .services .grid { grid-template-columns: 1fr; } }

/* ═══════════════ TESTIMONIALS - plain pull-quote on dark ═══════════════ */
.testimonials { padding: 130px var(--gutter); }
.testimonials .container { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.quote-display {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 800;
  color: var(--white);
}
.quote-display::before {
  content: '\201C';
  display: block;
  font-size: 1.3em;
  color: var(--orange);
  line-height: .5;
  margin-bottom: 14px;
  font-weight: 900;
}
.attribution {
  margin-top: 32px;
  display: flex; align-items: center; gap: 16px;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--orange); color: var(--ink-900);
  display: grid; place-items: center;
  font-weight: 800;
}
.name { font-weight: 800; font-size: 16px; color: var(--white); }
.role { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }
.testimonials .nav-row { display: flex; align-items: center; gap: 18px; margin-top: 32px; }
.testimonials .nav-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--white);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  transition: background 200ms, border-color 200ms, color 200ms;
}
.testimonials .nav-btn:hover { background: var(--orange); color: var(--ink-900); border-color: var(--orange); }
.testimonials .dots { display: flex; align-items: center; gap: 7px; }
.testimonials .dot-btn {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.24);
  transition: all 220ms var(--ease);
}
.testimonials .dot-btn:hover { background: rgba(255,255,255,.5); }
.testimonials .dot-btn.active { width: 20px; background: var(--orange); }

@media (max-width: 980px) {
  .testimonials .container { grid-template-columns: 1fr; gap: 60px; }
}

/* ═══════════════ CTA ═══════════════ */
.cta-section { background: var(--bg-subtle); padding: 140px var(--gutter); }
.cta-section .container { text-align: center; max-width: 1100px; }
.cta-section .big {
  font-size: clamp(44px, 6.6vw, 100px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
}
.cta-section .sub { margin: 32px auto 44px; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--fg2); }
.cta-section .row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ═══════════════ FOOTER (DARK) ═══════════════ */
footer.dark-section { padding: 100px var(--gutter) 40px; }
.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
.foot-brand .tag { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.55; max-width: 320px; }
.foot-col h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 18px; font-weight: 700; }
.foot-col ul { display: flex; flex-direction: column; gap: 10px; }
.foot-col a { font-size: 14px; color: rgba(255,255,255,.78); transition: color 200ms; }
.foot-col a:hover { color: var(--orange); }
.foot-bottom {
  max-width: var(--max); margin: 60px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,.42);
}
.foot-social { display: flex; gap: 8px; margin-top: 20px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  transition: all 200ms var(--ease);
}
.foot-social a:hover { background: var(--orange); color: var(--ink-900); border-color: var(--orange); }

@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ═══════════════ PAGE HERO (about / work / services / partner / contact) ═══════════════ */
.page-hero {
  background: var(--ink-900);
  color: var(--white);
  padding: 172px var(--gutter) 100px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .page-hero { padding: 128px var(--gutter) 56px; }
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,150,1,.14), transparent 62%);
}
.page-hero .container { position: relative; }
.page-hero .eyebrow { color: var(--orange); }
.page-hero h1 {
  font-size: clamp(48px, 6.6vw, 104px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
  overflow-wrap: break-word;
}
@media (max-width: 560px) {
  .page-hero h1 { font-size: clamp(30px, 9vw, 44px); }
}

/* ═══════════════ ABOUT PAGE ═══════════════ */
.story-section { background: var(--white); }
.story-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; margin-top: 56px; }
.story-text p { font-size: 19px; line-height: 1.6; color: var(--fg1); margin-bottom: 22px; }
.story-side {
  position: sticky; top: 96px;
  align-self: start;
  padding: 30px;
  background: var(--ink-900);
  color: var(--white);
  border-radius: var(--r);
}
.story-side h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; font-weight: 700; }
.story-side ul { display: flex; flex-direction: column; gap: 16px; }
.story-side li { display: flex; align-items: start; gap: 10px; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.5; }
.story-side .check { color: var(--orange); margin-top: 2px; flex-shrink: 0; display: inline-flex; }

.process-section { padding: 120px var(--gutter); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; }
.proc-step { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.proc-step .num { font-size: 12px; color: var(--orange); font-weight: 700; letter-spacing: .1em; }
.proc-step .ttl { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 14px 0 12px; }
.proc-step .desc { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); }
@media (max-width: 980px) { .process-grid { grid-template-columns: repeat(2, 1fr); } .story-grid { grid-template-columns: 1fr; gap: 40px; } .story-side { position: static; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ═══════════════ TEAM SECTION (about page) ═══════════════ */
.team-section { background: var(--bg-subtle); }
.team-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.team-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 200ms;
}
.team-card:hover { border-color: var(--orange); }
.team-photo {
  position: relative;
  aspect-ratio: 4/5;
  display: grid; place-items: center;
  font-size: 84px; font-weight: 900; color: var(--ink-900);
  letter-spacing: -.04em;
}
.team-photo.cw { background: var(--orange); }
.team-photo.tl { background: var(--ink-200); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card .body { padding: 28px 28px 32px; }
.team-card .role {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.team-card .name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; color: var(--fg1); }
.team-card .blurb { font-size: 15px; line-height: 1.55; color: var(--fg2); }
.team-card .links { display: flex; gap: 8px; margin-top: 22px; }
.team-card .links a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-subtle); border: 1px solid var(--border);
  color: var(--fg2);
  transition: all 180ms var(--ease);
}
.team-card .links a:hover { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }

/* ═══════════════ PRICING CARDS (services + partner pages) ═══════════════ */
.pricing-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 18px;
  row-gap: 44px;
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--ink-900);
  color: var(--white);
  border-radius: var(--r);
  padding: 34px 26px 28px;
  display: flex; flex-direction: column;
  border-top: 2px solid rgba(255,255,255,.16);
  transition: border-color 220ms;
}
.price-card:hover { border-top-color: var(--orange); }
.price-card.popular { border-top-color: var(--orange); background: var(--ink-800); }
.price-card.highlight { animation: tierPulse 1.4s var(--ease); border-top-color: var(--orange); }
@keyframes tierPulse {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
a.svc-card { cursor: pointer; }
a.svc-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.price-card .badge {
  position: absolute; top: -13px; left: 28px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--orange); color: var(--ink-900);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.price-card .tier {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 26px;
}
.price-card.popular .tier { color: var(--orange); }
.price-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.price-card .price { font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.price-card .per { font-size: 15px; color: rgba(255,255,255,.5); font-weight: 500; }
.price-card .card-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 6px; }
.price-card .quote-note { font-size: 14px; color: rgba(255,255,255,.5); font-weight: 500; margin-bottom: 20px; }
.price-card .meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  margin-bottom: 20px;
  align-self: flex-start;
}
.price-card.popular .meta-pill { background: rgba(255,150,1,.10); border-color: rgba(255,150,1,.32); color: var(--orange); }
.price-card .meta-pill .pill-icon { width: 14px; height: 14px; flex-shrink: 0; }
.price-card .blurb { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); margin-bottom: 26px; }
.price-card .feat-head {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
  line-height: 1.4;
  margin-bottom: 20px;
}
.price-card ul.feat-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; flex-grow: 1; }
.price-card ul.feat-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); }
.price-card .check-circle {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,150,1,.14);
  border: 1px solid rgba(255,150,1,.32);
  color: var(--orange);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.price-card.popular .check-circle { background: rgba(255,150,1,.20); border-color: rgba(255,150,1,.45); }
.price-card .price-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 15px 24px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700;
  background: var(--white); color: var(--ink-900);
  transition: background 200ms, transform 200ms, color 200ms;
}
.price-card .price-cta:hover { transform: translateY(-2px); background: var(--orange); }
.price-card.popular .price-cta { background: var(--orange); color: var(--ink-900); }
.price-card.popular .price-cta:hover { background: var(--white); }

/* the featured/popular tier sits at baseline; the other tiers offset down for asymmetry */
@media (min-width: 1101px) {
  .pricing-grid .price-card:not(.popular) { margin-top: 32px; }
}

@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; row-gap: 24px; } }

/* two-card clusters (brand & venue partnerships, get on the channel): centered, not stretched to 3 cols */
.pricing-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 72px auto 0; }
@media (max-width: 640px) { .pricing-grid.cols-2 { grid-template-columns: 1fr; } }

/* ═══════════════ CONTACT PAGE ═══════════════ */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; margin-top: 56px; }
/* Honeypot: off-screen, not display:none, so bots that skip hidden fields still fill it in */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 36px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 10px; font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: inherit; font-size: 15px; color: var(--fg1);
  transition: border-color 200ms, background 200ms;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(255,150,1,.16);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-error {
  font-size: 14px; font-weight: 600; color: #b23b3b;
  background: #fdf0ef; border: 1px solid #f3d4d2; border-radius: var(--r);
  padding: 12px 16px; margin: -4px 0 22px;
}
#formSubmit[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.form-success[hidden] { display: none; }
.form-success {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 46px 6px 24px;
}
.form-success .icon-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,150,1,.14);
  border: 1px solid rgba(255,150,1,.32);
  color: var(--orange);
  display: grid; place-items: center;
}
.form-success h3 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.form-success p { font-size: 15px; line-height: 1.55; color: var(--fg2); max-width: 40ch; }
.form-success .btn { margin-top: 6px; }
.contact-side .info-card {
  display: block;
  background: var(--ink-900);
  color: var(--white);
  border-radius: var(--r);
  padding: 30px;
  margin-bottom: 14px;
  transition: background 200ms var(--ease);
}
a.info-card:hover { background: var(--ink-800); }
.contact-side .info-card h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; font-weight: 700; }
.contact-side .info-card .big { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.contact-side .info-card .small { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 6px; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 720px) { .contact-grid { margin-top: 0; } }

/* ═══════════════ PRICING BRIDGE (between blocks, services page) ═══════════════ */
.pricing-bridge {
  position: relative;
  padding: 90px var(--gutter);
  background: var(--ink-900);
  color: var(--white);
  overflow: hidden;
}
.pricing-bridge::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(255,150,1,.12), transparent 65%);
}
.bridge-inner { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.bridge-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,150,1,.10);
  border: 1px solid rgba(255,150,1,.32);
  color: var(--orange);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 28px;
}
.bridge-text {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--white);
}
.bridge-line {
  height: 2px;
  background: var(--orange);
  margin: 36px auto 24px;
  width: 100%; max-width: 240px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1000ms var(--ease) 150ms;
}
.bridge-inner.in .bridge-line { transform: scaleX(1); }
.bridge-arrow { display: inline-block; color: var(--orange); animation: bridgeFloat 2.4s ease-in-out infinite; }
@keyframes bridgeFloat {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(8px); opacity: 1; }
}

.pricing-block-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.pricing-block-head .eyebrow { justify-content: center; }
.pricing-block-head .title { font-size: clamp(34px, 4.2vw, 60px); font-weight: 900; line-height: 1.0; letter-spacing: -.03em; margin-bottom: 18px; }
.pricing-block-head .sub { font-size: 17px; line-height: 1.55; color: var(--fg2); }

.pricing-block { padding: 90px var(--gutter) 80px; }
.pricing-block.first { padding-top: 90px; position: relative; }
.pricing-block.first::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--border-strong));
}
.pricing-block.first::after {
  content: ''; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255,150,1,.14);
}

/* ═══════════════ PARTNER PAGE ═══════════════ */
.partner-stats { margin-top: 64px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.sp-stat { padding: 0; }
.sp-stat .accent { width: 24px; height: 2px; background: var(--orange); margin-bottom: 14px; }
.sp-stat .num { font-size: clamp(28px, 3vw, 44px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.sp-stat .lbl { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
@media (max-width: 1100px) { .partner-stats { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (max-width: 640px) { .partner-stats { grid-template-columns: repeat(2, 1fr); } }

.audience-section { background: var(--bg-subtle); }
.audience-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aud-card { padding: 30px 26px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); transition: border-color 200ms; }
.aud-card:nth-child(2) { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
.aud-card:hover { border-color: var(--orange); }
.aud-card .icon { width: 42px; height: 42px; border-radius: var(--r); background: var(--orange-50); color: var(--orange); display: grid; place-items: center; margin-bottom: 20px; }
.aud-card:nth-child(2) .icon { background: rgba(255,150,1,.14); }
.aud-card .ttl { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.aud-card .desc { font-size: 14px; line-height: 1.55; color: var(--fg2); }
.aud-card:nth-child(2) .desc { color: rgba(255,255,255,.62); }
@media (max-width: 880px) { .audience-grid { grid-template-columns: 1fr; } }

.deliverable-list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.deliv-item { display: flex; align-items: flex-start; gap: 14px; padding: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); }
.deliv-item .ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,150,1,.15);
  border: 1px solid rgba(255,150,1,.32);
  color: var(--orange);
  display: grid; place-items: center; flex-shrink: 0;
}
.deliv-item .ttl { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.deliv-item .desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; }
@media (max-width: 720px) { .deliverable-list { grid-template-columns: 1fr; } }

/* ═══════════════ GALLERY (photo grid + lightbox) ═══════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 18px;
  row-gap: 56px;
}
button.work-card { width: 100%; text-align: left; }
.gallery-grid .work-card:hover .corner svg { transform: none; }
.gallery-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-subtle);
  color: var(--fg3);
  cursor: default;
}
.gallery-placeholder span { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 10, 8, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease);
  display: grid; place-items: center;
  padding: 48px 24px;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox figure {
  max-width: 1100px; max-height: 100%;
  transform: scale(.97); opacity: 0;
  transition: transform 240ms var(--ease), opacity 220ms var(--ease);
}
.lightbox.open figure { transform: scale(1); opacity: 1; }
.lightbox img { max-width: 100%; max-height: 74vh; border-radius: var(--r); display: block; margin: 0 auto; }
.lightbox-close {
  position: absolute; top: 24px; right: 24px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: var(--white);
  display: grid; place-items: center;
  transition: background 180ms;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-controls {
  display: flex; justify-content: center; align-items: center; gap: 20px;
  margin-top: 24px;
  opacity: 0; transition: opacity 220ms var(--ease);
}
.lightbox.open .lightbox-controls { opacity: 1; }
.lightbox-nav {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: var(--white);
  display: grid; place-items: center;
  transition: background 180ms;
}
.lightbox-nav:hover { background: rgba(255,255,255,.2); }
@media (max-width: 720px) {
  .lightbox-nav { width: 44px; height: 44px; }
}

/* ═══════════════ FAQ - plain accordion rows ═══════════════ */
.faq-list { margin-top: 56px; max-width: 880px; margin-left: auto; margin-right: auto; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  color: var(--fg2);
  transition: transform 220ms var(--ease), background 200ms, color 200ms, border-color 200ms;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: var(--ink-900); }
.faq-answer { padding: 0 54px 26px 0; font-size: 15px; line-height: 1.65; color: var(--fg2); max-width: 780px; }
.faq-answer p + p { margin-top: 12px; }

/* ═══════════════ VENUES - where we film (work page) ═══════════════ */
.venues-list { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.venues-list .venue {
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  background: var(--white);
}
.venues-list .venue span { color: var(--fg3); font-weight: 500; }

/* ═══════════════ MOTION REVEAL HOOKS ═══════════════ */
.rv, .rv-l, .rv-r, .rv-z {
  opacity: 0; will-change: transform, opacity;
}
.rv     { transform: translateY(40px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rv-l   { transform: translateX(-40px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rv-r   { transform: translateX(40px);  transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rv-z   { transform: scale(.95); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rv.in, .rv-l.in, .rv-r.in, .rv-z.in { opacity: 1; transform: none; }
.rv-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.rv-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
.rv-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
.rv-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
.rv-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
.rv-stagger.in > *:nth-child(6) { transition-delay: 350ms; }
/* accent bars "draw themselves in" once their stat row is revealed */
.hero-stat .accent, .stats-band-grid .item .accent {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease) 200ms;
}
.hero-stats.in .hero-stat .accent,
.stats-band-grid.in .item .accent { transform: scaleX(1); }

/* service numbers slide in a beat after their card */
.svc-num {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 500ms var(--ease) 150ms, transform 500ms var(--ease) 150ms;
}
.rv-stagger.in .svc-num { opacity: 1; transform: none; }

/* work-card media settles from a slight zoom as it's revealed (independent of hover zoom) */
.work-card-media { transform: scale(1.08); transition: transform 1000ms var(--ease); }
.rv-stagger.in .work-card-media { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-l, .rv-r, .rv-z, .rv-stagger > * { opacity: 1 !important; transform: none !important; }
  .hero-stat .accent, .stats-band-grid .item .accent,
  .svc-num, .work-card-media { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
}