/* ==========================================================================
   NASHVILLE COVER BAND — design system
   Palette + type per "NCB Logo Guide v1.0" (Aug 2026).
   NCB Gold #CC974C, gradient E9B85A→9D6C39, Ink #000, Paper #FFF,
   Charcoal #141414 / Bone #F2EEE7.
   ========================================================================== */

:root{
  --gold:        #CC974C;
  --gold-light:  #E9B85A;
  --gold-deep:   #9D6C39;
  --ink:         #000000;
  --paper:       #FFFFFF;
  --charcoal:    #141414;
  --bone:        #F2EEE7;

  --gold-grad: linear-gradient(190deg, var(--gold-light) 0%, var(--gold-deep) 100%);

  /* neutrals derived from the brand family, not new hues */
  --ink-70:   rgba(0,0,0,.72);
  --ink-45:   rgba(0,0,0,.48);
  --ink-18:   rgba(0,0,0,.14);
  --ink-08:   rgba(0,0,0,.07);
  --bone-70:  rgba(242,238,231,.72);
  --bone-30:  rgba(242,238,231,.14);
  --paper-70: rgba(255,255,255,.7);
  --paper-45: rgba(255,255,255,.46);
  --paper-18: rgba(255,255,255,.14);

  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow-md: 0 12px 32px rgba(0,0,0,.16);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.28);
  --shadow-gold: 0 12px 34px rgba(204,151,76,.35);

  --header-bg-a: rgba(242,238,231,.86);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --font-display: "Fraunces", "Big Caslon", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1180px;
  --header-h: 84px;

  /* constant light text for surfaces that stay dark in BOTH themes
     (hero, footer, section-charcoal, app-card, tier-celeb, modal) —
     never redefined in the dark-mode block below */
  --on-dark: #F2EEE7;
  /* constant dark text for gold surfaces (gold never changes between themes) */
  --on-gold: #141414;
}

/* ---- dark mode: same tokens, flipped values — every rule above cascades automatically ---- */
:root[data-theme="dark"]{
  --ink:        #F2EEE7;
  --paper:      #1C1B19;
  --bone:       #121212;
  --charcoal:   #0A0A0A;
  --header-bg-a: rgba(18,18,18,.86);

  --ink-70:  rgba(242,238,231,.75);
  --ink-45:  rgba(242,238,231,.5);
  --ink-18:  rgba(242,238,231,.16);
  --ink-08:  rgba(242,238,231,.08);

  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
}


*, *::before, *::after{ box-sizing: border-box; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }
body{
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0 0 .4em;
}
h1{ font-size: clamp(2.4rem, 5vw + 1rem, 4.6rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 3vw + 1rem, 3rem); }
h3{ font-size: clamp(1.3rem, 1.4vw + 1rem, 1.7rem); }
p{ margin: 0 0 1em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before{
  content:'';
  width: 26px; height: 1px;
  background: var(--gold);
}

.lede{
  font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
  color: var(--ink-70);
  max-width: 60ch;
}

/* ---- buttons -------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-gold{
  background: var(--gold-grad);
  color: var(--on-gold);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(204,151,76,.45); }

.btn-outline-dark{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-18);
}
.btn-outline-dark:hover{ border-color: var(--gold); color: var(--gold-deep); }

.btn-outline-light{
  background: transparent;
  color: var(--on-dark);
  border-color: var(--paper-18);
}
.btn-outline-light:hover{ border-color: var(--gold-light); color: var(--gold-light); }

.btn-ghost-light{
  background: var(--paper-18);
  color: var(--on-dark);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover{ background: var(--paper-45); }

.btn-block{ width:100%; }
.btn-sm{ padding: 11px 22px; font-size: 13px; }

/* ---- header / nav ----------------------------------------------------- */

.site-header{
  position: sticky; top:0; z-index: 500;
  height: var(--header-h);
  display:flex; align-items:center;
  border-bottom: 1px solid var(--ink-08);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: var(--header-bg-a);
  backdrop-filter: blur(14px) saturate(1.2);
}
.site-header .container{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:24px;
  width:100%;
}
.brand-lockup{ display:flex; align-items:center; gap:12px; min-width:0; overflow:hidden; }
.brand-lockup img{ height: 46px; width:auto; }
@media (max-width: 900px){
  /* homepage only: hide the header logo from the very first paint (pure
     CSS, not JS-after-load) so there's never a flash of it before the
     mobile logo-travel script (main.js) hides it and takes over with a
     clone -- avoids any "logo flashes at top-left" glitch on load. */
  body.home .site-header .brand-lockup img{ visibility: hidden; }
}
.brand-lockup .brand-name{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.main-nav{ display:flex; align-items:center; gap:8px; justify-self:end; }
.main-nav a{
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-70);
  border-radius: var(--radius-pill);
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover{ color: var(--ink); background: var(--ink-08); }
.main-nav a.active{ color: var(--ink); background: rgba(204,151,76,.16); }


/* keep a 7-item nav from crowding on smaller desktop widths */
@media (min-width: 901px) and (max-width: 1140px){
  .main-nav{ gap:2px; }
  .main-nav a{ padding: 10px 11px; font-size: 13.5px; }
}

.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }
.nav-toggle{
  display:none;
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  width: 44px; height:44px;
  background: transparent; border: 1px solid var(--ink-18);
  border-radius: var(--radius-sm);
  padding:0;
  flex-shrink:0;
}
.nav-toggle .bar{
  display:block; width:18px; height:2px; border-radius:1px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* full-screen dynamic menu — MOBILE ONLY. Desktop keeps the plain horizontal bar above. */
@media (max-width: 900px){
  .main-nav{
    position:fixed; inset: var(--header-h) 0 0 0;
    justify-self: stretch; /* override the desktop grid-item's justify-self:end,
      which was leaving this fixed overlay only ~227px wide pinned to the
      right instead of covering the full screen */
    width: auto;
    z-index:400;
    background: var(--charcoal);
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap: 6px;
    padding: 40px 24px;
    opacity:0; pointer-events:none; transform: translateY(-14px);
    transition: opacity .35s ease, transform .35s ease;
    overflow-y:auto;
  }
  body.nav-open .main-nav{ opacity:1; pointer-events:auto; transform:none; }
  body.nav-open .logo-travel-clone{ display:none; }

  .main-nav a{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(24px, 7vw, 34px);
    color: var(--on-dark);
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    text-align:right;
    background:none;
    opacity:0; transform: translateY(16px);
    transition: opacity .4s ease, transform .4s ease, color .2s ease;
  }
  body.nav-open .main-nav a{ opacity:1; transform:none; }
  body.nav-open .main-nav a:nth-child(1){ transition-delay:.05s; }
  body.nav-open .main-nav a:nth-child(2){ transition-delay:.10s; }
  body.nav-open .main-nav a:nth-child(3){ transition-delay:.15s; }
  body.nav-open .main-nav a:nth-child(4){ transition-delay:.20s; }
  body.nav-open .main-nav a:nth-child(5){ transition-delay:.25s; }
  body.nav-open .main-nav a:nth-child(6){ transition-delay:.30s; }
  body.nav-open .main-nav a:nth-child(7){ transition-delay:.35s; }
  .main-nav a:hover, .main-nav a.active{ color: var(--gold-light); background:none; }

  .nav-toggle{ display:flex; }
  .nav-cta .btn{ display:none; }
}
@media (min-width: 901px){
  .nav-cta .btn span.short{ display:none; }
}

/* ---- theme switch ---- */
.theme-switch{ position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; padding:9px 6px; margin:-9px -6px; }
.theme-switch input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.theme-switch-track{
  width:46px; height:26px; border-radius: var(--radius-pill);
  background: var(--ink-18);
  position:relative;
  transition: background .2s ease;
}
.theme-switch-track::before, .theme-switch-track::after{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; line-height:1; opacity:.7; pointer-events:none;
}
.theme-switch-track::before{ content:'\2600'; left:6px; }
.theme-switch-track::after{ content:'\263E'; right:6px; }
.theme-switch-thumb{
  position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, background .2s ease;
}
.theme-switch input:checked ~ .theme-switch-track{ background: var(--gold-grad); }
.theme-switch input:checked ~ .theme-switch-track .theme-switch-thumb{ transform: translateX(20px); background: var(--charcoal); }
.theme-switch input:focus-visible ~ .theme-switch-track{ outline: 2px solid var(--gold); outline-offset: 2px; }


/* ---- hero -------------------------------------------------------------- */

.hero{
  position: relative;
  padding: 92px 0 90px;
  background: var(--charcoal);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  content:'';
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(204,151,76,.30), transparent 70%),
    radial-gradient(45% 50% at 8% 96%, rgba(157,108,57,.24), transparent 70%);
  z-index:-2;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background-image: url('../assets/ncb-mark-gold.png');
  background-repeat: no-repeat;
  background-position: right -6% top 45%;
  background-size: min(50vw, 620px) auto;
  opacity:.10;
  z-index:-1;
}
.hero .eyebrow{ color: var(--gold-light); }
.hero .eyebrow::before{ background: var(--gold-light); }
.hero h1{ color: var(--on-dark); max-width: 15ch; }
.hero .lede{ color: var(--bone-70); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 30px; }
@media (max-width: 900px){
  .hero-actions-center-mobile{ justify-content: center; }
}

.hero-sub{ padding: 72px 0 60px; }
.hero-sub h1{ max-width: 20ch; }

/* ---- quick-jump nav (gallery.html) ---- */
.quick-jump{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:22px;
}
.quick-jump a{
  display:inline-flex; align-items:center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--paper-18);
  color: var(--on-dark);
  font-size:13.5px; font-weight:700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.quick-jump a:hover{ background: var(--gold-grad); color: var(--on-gold); border-color: transparent; }

/* ---- floating back-to-top button ---- */
.back-to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--gold-grad); color: var(--on-gold);
  border:0; font-size:18px; cursor:pointer;
  box-shadow: var(--shadow-md);
  opacity:0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
  pointer-events:none;
}
.back-to-top.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
.back-to-top:hover{ box-shadow: 0 18px 42px rgba(204,151,76,.45); }
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition:none; }
}

/* homepage only: the hero PHOTO stays pinned under the header for one
   screen's worth of scrolling, while the hero's own text scrolls away
   normally on top of it, until "Who we are" scrolls up and covers the
   photo — at which point it releases naturally with the rest of the page. */
.hero-pin{ position: relative; }
.hero-photo-bg{
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.72) 45%, rgba(8,6,5,.92) 100%),
    url('../assets/TheBand.jpeg') center 38% / cover no-repeat;
}
@media (max-width: 900px){
  /* a vertical group photo instead of the wide landscape one used above --
     it already fits a narrow phone viewport with a plain centered crop, so
     unlike the old wide photo this needs no horizontal panning. The dark
     gradient lives on a separate ::after (below) instead of baked into this
     background, so it can fade in on its own timing instead of always
     being there -- the photo itself starts full-brightness. */
  .hero-photo-bg{
    background-image: url('../assets/gallery/full/show-37.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* bright photo shows first, through the logo/eyebrow reveal -- then this
     gradient fades in on the same timing as .hero-copy-reveal (the
     headline/lede/buttons/credit-strip), giving that larger block of white
     text a dark backdrop right as it needs one */
  .hero-photo-bg::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.72) 45%, rgba(8,6,5,.92) 100%);
    opacity: 0;
    animation: heroShadowReveal 1.1s ease forwards;
    animation-delay: 2.7s;
  }
}
@keyframes heroShadowReveal{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  .hero-photo-bg::after{ opacity: 1; animation: none; }
}
.hero-pin > .hero.hero-photo{
  position: relative;
  z-index: 1;
  background: none;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  margin-top: calc(-1 * (100vh - var(--header-h)));
  margin-top: calc(-1 * (100dvh - var(--header-h)));
  display: flex;
  align-items: center;
}
.hero-pin > .hero.hero-photo .container{ width:100%; }
@media (max-width: 900px){
  /* nudge the whole logo/headline block up so it sits above the woman's
     head in the mobile-only vertical photo (show-37.jpg) instead of
     overlapping her face at dead-center */
  .hero-pin > .hero.hero-photo .container{ transform: translateY(-55px); }
}

/* homepage hero reveal sequence: photo alone -> logo fades in centered ->
   the rest of the headline/copy fades in underneath it */
.hero-logo-reveal{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: heroLogoReveal .9s ease forwards;
  animation-delay: 1s;
}
@media (max-width: 900px){
  /* the full-size block is taller than the actual clear space between the
     header and the woman's hairline in show-37.jpg, so shrink it a bit here */
  .hero-logo-reveal{ gap: 8px; }
}
.hero-logo-reveal img{
  display:block;
  width: min(200px, 34vw);
  height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}
@media (max-width: 900px){
  .hero-logo-reveal img{ width: min(150px, 25vw); }
}
.hero-logo-eyebrow::before{ content: none; }
.hero-copy-reveal{
  opacity: 0;
  animation: heroContentReveal 1.1s ease forwards;
  animation-delay: 2.7s;
}
@keyframes heroLogoReveal{
  from{ opacity:0; transform: scale(.85); }
  to{ opacity:1; transform: scale(1); }
}
@keyframes heroContentReveal{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo-reveal, .hero-copy-reveal{ opacity:1; animation:none; }
}
.hero-pin > .section{
  position: relative;
  z-index: 1;
}
.hero.hero-photo::before, .hero.hero-photo::after{ content: none; }
.hero.hero-photo{ text-align:center; }
.hero.hero-photo .eyebrow{ justify-content:center; }
.hero.hero-photo h1{ margin-left:auto; margin-right:auto; }
.hero.hero-photo .lede{ margin-left:auto; margin-right:auto; }
.hero.hero-photo .hero-actions{ justify-content:center; }
.hero.hero-photo .credit-strip{ align-items:center; }


.credit-strip{
  border-top: 1px solid var(--ink-18);
  margin-top: 56px;
  padding-top: 26px;
  display:flex; flex-direction:column; gap: 16px;
  overflow-x: hidden;
}
.credit-strip .credit-label{
  font-size: 11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-45);
}
.credit-tiles{
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 32px 0;
  height: 232px; /* border-box: 32px top/bottom padding + the enlarged
    center tile's 168px, giving its glow room to render without being
    clipped by overflow:hidden. Fixed (not tied to which tile is currently
    big) so the row's own box never resizes as a tile grows/shrinks,
    keeping the bio text below (and everything else) anchored in place. */
  transition: width .35s ease;
}
.credit-tiles-track{
  display:flex; align-items:flex-start; gap: 22px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.credit-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width: 72px; flex-shrink: 0; text-align:center;
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  opacity:.65; transition: opacity .35s ease, width .35s ease;
}
.credit-tile:hover{ opacity:1; }
.credit-tile:hover img{ border-color: var(--gold); }
.credit-tile img{
  width: 72px; height: 72px; border-radius: 14px; object-fit: cover;
  border: 2px solid var(--ink-18);
  background: var(--charcoal);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: width .35s ease, height .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.credit-tile span{
  font-size: 11.5px; font-weight: 700; color: var(--ink-70); line-height:1.2;
  display:block; min-height: 2.4em; /* reserves room for 2 lines so a longer
    name (e.g. "Billy Currington") doesn't push that tile's photo out of line
    with the others when the row bottom-aligns */
}
/* the center tile in the rotating spotlight marquee — bigger, portrait, gold-lit */
.credit-tile-center{ width: 168px; opacity:1; }
.credit-tile-center span{ display:none; }
.credit-tile-resizing span{ display:none; }
.credit-tile-center img{
  width: 168px; height: 168px; border-radius: 16px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 28px rgba(204,151,76,.55), 0 0 0 4px rgba(240,185,11,.25);
}
.credit-highlight{
  text-align:center; margin-top: 18px;
  transition: opacity .3s ease;
}
.credit-highlight .name{
  display:block; font-family: var(--font-display); font-size: 1.35rem; font-weight:700;
  color: var(--gold-light); margin-bottom: 14px; letter-spacing:.01em;
}
.credit-highlight .bio{
  display:block; font-size: 13.5px; line-height:1.6; color: #f0e9dc;
  max-width: 480px; margin: 0 auto;
  background: rgba(8,7,6,.6);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  backdrop-filter: blur(6px);
}
.credit-more{
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-45);
}
.credit-more-link{
  background:none; border:0; padding:0; margin:0; font: inherit; cursor:pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.credit-more-link:hover{ color: var(--gold-deep); }
.hero .credit-more-link:hover{ color: var(--gold-light); }
/* dark-background context (e.g. the homepage hero) */
.hero .credit-strip{ border-top-color: var(--paper-18); }
.hero .credit-strip .credit-label{ color: var(--bone-70); }
.hero .credit-tile img{ border-color: var(--paper-18); }
.hero .credit-tile span{ color: var(--bone-70); }
.hero .credit-more{ color: var(--bone-70); }
.hero.hero-photo .credit-more{ text-align: center; }
.section-charcoal .credit-strip{ border-top-color: var(--paper-18); }
.section-charcoal .credit-strip .credit-label{ color: var(--bone-70); }
.section-charcoal .credit-tile img{ border-color: var(--paper-18); }
.section-charcoal .credit-tile span{ color: var(--bone-70); }

/* the marquee's fixed tile sizes (72px x4 + 168px center + gaps ≈ 544px) only
   fit a desktop-width row — scale everything down so all 5 tiles actually
   fit on a phone screen instead of overflowing/misaligning */
@media (max-width: 640px){
  .credit-tiles{ height: 152px; padding: 32px 0; }
  .credit-tiles-track{ gap: 6px; }
  .credit-tile{ width: 38px; }
  .credit-tile img{ width: 38px; height: 38px; border-radius: 9px; }
  .credit-tile span{ font-size: 9.5px; }
  .credit-tile-center{ width: 88px; }
  .credit-tile-center img{ width: 88px; height: 88px; border-radius: 12px; }
  .credit-highlight{ margin-top: 14px; }
  .credit-highlight .name{ font-size: 1.05rem; margin-bottom: 10px; }
  .credit-highlight .bio{ font-size: 12.5px; padding: 14px 16px; }
}

/* plain-text credits line (replaces photo tiles where a simple list is wanted) */
.credit-line{
  border-top: 1px solid var(--ink-18);
  margin-top: 56px;
  padding-top: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-70);
}
.credit-line strong{ color: var(--ink); font-weight: 700; }
.hero .credit-line{ border-top-color: var(--paper-18); color: var(--bone-70); }
.hero .credit-line strong{ color: var(--bone); }
.hero.hero-photo .credit-line{ text-align: center; }

/* caption under a photo-frame (e.g. founder attribution) */
.photo-caption{
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-45);
}

/* testimonial cards */
.testimonial-card{ display:flex; flex-direction:column; gap:18px; }
.testimonial-card .quote{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.testimonial-card .quote::before{ content: "\201C"; }
.testimonial-card .quote::after{ content: "\201D"; }
.testimonial-card .attribution{ font-size: 13px; font-weight: 700; color: var(--ink-45); }
.testimonial-card .attribution .name{ color: var(--gold-deep); }

/* ---- sections ------------------------------------------------------- */

.section{ padding: 84px 0; }
.section-tight{ padding: 56px 0; }
.section-bone{ background: var(--bone); color: var(--ink); }
.section-paper{ background: var(--paper); color: var(--ink); }
.section-charcoal{ background: var(--charcoal); color: var(--on-dark); }
.section-charcoal .eyebrow{ color: var(--gold-light); }
.section-charcoal .eyebrow::before{ background: var(--gold-light); }
.section-charcoal .lede{ color: var(--bone-70); }

.section-head{ max-width: 720px; margin: 0 0 44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.grid{ display:grid; gap: 26px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

/* homepage "Who we are" section: photo moves to the bottom on mobile
   (instead of squeezing into a narrow side column), and switches to the
   photo's real aspect ratio there so cover-fit never crops anyone out. */
.who-grid{
  grid-template-areas:
    "eyebrow photo"
    "title   photo"
    "lede    photo"
    "stats   photo"
    "cta     photo";
}
@media (max-width: 900px){
  .who-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "lede" "stats" "cta" "photo";
  }
  .who-photo-frame{ aspect-ratio: 1400/2098; }
}

/* homepage "NCB experience" section: named areas so the video can sit
   between the title and the lede on mobile, while staying a full-height
   side column next to the text on desktop -- independent of DOM order. */
.experience-grid{
  grid-template-areas:
    "eyebrow video"
    "title   video"
    "lede    video"
    "list    video"
    "cta     video";
}
@media (max-width: 900px){
  .experience-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "video" "lede" "list" "cta";
  }
}

/* about.html "The story" section: photo sits between the title and the
   lede on mobile, side column (spanning all the text rows) on desktop. */
.story-grid{
  grid-template-areas:
    "photo eyebrow"
    "photo title"
    "photo lede"
    "photo extra";
}
@media (max-width: 900px){
  .story-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "photo" "lede" "extra";
  }
}

/* homepage "Watch NCB in action" section: same idea -- the photo sits
   between the title and the lede on mobile, side column on desktop. */
.watch-grid{
  grid-template-areas:
    "eyebrow media"
    "title   media"
    "lede    media"
    "cta     media";
}
@media (max-width: 900px){
  .watch-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "media" "lede" "cta";
  }
}

/* tier cards (Book page + homepage) and testimonials: skip the generic
   .grid-3 2-up tablet step entirely so each one gets its own full row as
   soon as there isn't room for all 3 side by side, not just under 640px. */
@media (max-width: 980px){
  .tier-grid, .testimonial-grid, .about-feature-grid, .how-it-works-grid, .app-grid{ grid-template-columns: 1fr; }
}

/* experience.html "Built for NCB shows" app cards: on mobile, center the
   badge/heading/paragraph/button in each card (the bulleted list stays
   left-aligned -- centered bullets read oddly). */
@media (max-width: 900px){
  .app-card{ text-align: center; }
  .app-card .feature-list{ text-align: left; }
}

/* ---- cards ------------------------------------------------------------ */

.card{
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(204,151,76,.4); }

/* tier / package cards */
.tier-card{
  position:relative;
  display:flex; flex-direction:column;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-sm);
}
.tier-card .tier-eyebrow{
  font-size: 11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-deep);
}
.tier-card h3{ margin-top:8px; }
.tier-card .tier-desc{ color: var(--ink-70); flex:1; }
.tier-card ul{ margin: 18px 0 26px; display:flex; flex-direction:column; gap:10px; }
.tier-card li{ display:flex; gap:10px; font-size: 14.5px; color: var(--ink-70); }
.tier-card li::before{ content:'—'; color: var(--gold); font-weight:800; flex-shrink:0; }

/* feature highlight list (e.g. homepage "NCB experience" section) */
.feature-list{ margin: 22px 0 0; display:flex; flex-direction:column; gap:12px; }
.feature-list li{ display:flex; gap:10px; font-size: 15px; color: var(--ink-70); }
.feature-list li::before{ content:'—'; color: var(--gold); font-weight:800; flex-shrink:0; }
.section-charcoal .feature-list li{ color: var(--bone-70); }
.section-charcoal .feature-list li::before{ color: var(--gold-light); }

.tier-card.tier-celeb{
  background: linear-gradient(165deg, #1b1b1b 0%, var(--charcoal) 60%);
  color: var(--on-dark);
  border-color: rgba(204,151,76,.5);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.tier-card.tier-celeb .tier-desc{ color: var(--bone-70); }
.tier-card.tier-celeb li{ color: var(--bone-70); }
.tier-card.tier-celeb .tier-name{
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
}
.tier-card.tier-celeb .tier-badge{
  position:absolute; top:-13px; right: 26px;
  background: var(--gold-grad);
  color: var(--on-gold);
  font-size: 11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-gold);
}

/* app / experience cards */
.app-card{
  display:flex; flex-direction:column;
  background: var(--charcoal);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: 30px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-md);
}
.app-card .app-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color: #3ddc97;
  margin-bottom: 14px;
}
.app-card .app-status .dot{ width:7px; height:7px; border-radius:50%; background:#3ddc97; box-shadow:0 0 8px rgba(61,220,151,.7); }
.app-card.is-soon .app-status{ color: var(--bone-70); }
.app-card.is-soon .app-status .dot{ background: var(--bone-70); box-shadow:none; }
.app-card p{ color: var(--bone-70); flex:1; }
.app-card .btn{ align-self:flex-start; margin-top: 6px; }
@media (max-width: 900px){
  /* these come after the unconditional rules above so they actually win
     the cascade tie (equal specificity, later source order) */
  .app-card .btn{ align-self: center; }
  .app-card .app-status{ align-self: center; }
}

/* photo placeholder block — swap in real photography later */
.photo-frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(150deg, #262626, var(--charcoal) 70%);
  display:flex; align-items:center; justify-content:center;
}
.photo-frame.wide{ aspect-ratio: 16/10; }
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.photo-frame .mark{ width: 34%; height:auto; object-fit:contain; opacity:.5; }
.photo-frame .caption{
  position:absolute; left:16px; bottom:14px;
  font-size: 11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--bone-70);
}

/* stat row */
.stat-row{ display:flex; flex-wrap:wrap; gap: 40px; }
.stat{ min-width: 140px; }
.stat .num{ font-family: var(--font-display); font-size: clamp(2rem,3vw,2.7rem); color: var(--gold-deep); }
.section-charcoal .stat .num{ color: var(--gold-light); }
.stat .label{ font-size:13px; font-weight:700; color: var(--ink-45); text-transform:uppercase; letter-spacing:.08em; }
.section-charcoal .stat .label{ color: var(--bone-70); }

/* ---- video gallery ------------------------------------------------------ */

.video-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-lg);
  background:#000;
  border: 1px solid rgba(255,255,255,.08);
  display:block;
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.video-embed-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .35s ease;
}
.video-embed-thumb:hover img{ transform: scale(1.03); }
.play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%;
  background: rgba(224,29,29,.92); color:#fff; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .2s ease;
}
.video-embed-thumb:hover .play-badge{ transform: translate(-50%,-50%) scale(1.08); }

/* ---- video gallery (gigs.html): featured player + tile selector ---- */
.video-gallery{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.video-gallery-player{ width:100%; max-width:860px; }
.video-gallery-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background: linear-gradient(160deg,#1c1a15,#141414);
  color: var(--bone-70);
}
.video-gallery-play{
  width:64px; height:64px; border-radius:50%;
  background: rgba(224,29,29,.92); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.video-gallery-placeholder p{ margin:0; font-size:13.5px; font-weight:700; letter-spacing:.02em; }
.video-gallery-tiles{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 14px; width:100%; max-width:1000px;
}
.video-tile{
  background:none; border:0; padding:0; font:inherit; cursor:pointer; text-align:left;
  display:flex; flex-direction:column;
  flex: 0 1 180px;
  border-radius: var(--radius-md); overflow:hidden;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.video-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-tile.active{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.video-tile img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.video-tile-title{
  font-size:12px; font-weight:700; color: var(--ink-70); line-height:1.35;
  padding:8px 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.video-tile.active .video-tile-title{ color: var(--ink); }

/* ---- contact / booking -------------------------------------------------- */

.contact-row{ display:flex; flex-wrap:wrap; gap: 14px; }
.contact-pill{
  display:flex; align-items:center; gap:10px;
  padding: 14px 20px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-pill);
  font-weight:700;
  font-size: 14.5px;
}
.contact-pill .ico{ color: var(--gold-deep); }

.social-row{ display:flex; gap:10px; }
.social-row a{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--paper-18);
  color: var(--on-dark);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.social-row a:hover{ background: var(--gold-grad); color: var(--on-gold); border-color: transparent; }
.section-bone .social-row a, .section-paper .social-row a{ border-color: var(--ink-18); color: var(--ink); }
.section-bone .social-row a:hover, .section-paper .social-row a:hover{ color: var(--ink); }

/* bigger variant -- used on the gallery page's "Follow Along" section */
.social-row-lg{ gap:16px; flex-wrap:wrap; }
.social-row-lg a{ width:64px; height:64px; }
.social-row-lg a svg{ width:26px; height:26px; }

/* brand colors -- gallery's bigger "Follow Along" row only; the default
   .social-row elsewhere (footer, book.html) stays neutral by design */
.social-row-lg a.social-instagram{
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: transparent; color:#fff;
}
.social-row-lg a.social-facebook{ background:#1877F2; border-color:transparent; color:#fff; }
.social-row-lg a.social-tiktok{ background:#010101; border-color:transparent; color:#fff; }
.social-row-lg a.social-youtube{ background:#FF0000; border-color:transparent; color:#fff; }
.social-row-lg a.social-instagram:hover,
.social-row-lg a.social-facebook:hover,
.social-row-lg a.social-tiktok:hover,
.social-row-lg a.social-youtube:hover{
  filter: brightness(1.12);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.coming-soon-note{
  font-size: 13px; color: var(--ink-45); font-style: italic;
}

/* ---- footer ------------------------------------------------------------ */

.site-footer{
  background: var(--charcoal);
  color: var(--bone-70);
  padding: 60px 0 30px;
}
.footer-top{
  display:flex; flex-wrap:wrap; gap: 40px;
  justify-content:center;
  text-align:center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--paper-18);
}
.footer-brand{ max-width: 340px; margin:0 auto; }
.footer-brand .brand-lockup{ justify-content:center; }
.footer-brand .brand-lockup img{ height:38px; }
.footer-brand .brand-lockup .brand-name{ color: var(--on-dark); }
.footer-brand p{ color: var(--bone-70); font-size:14px; margin-top:14px; }
.footer-brand .social-row{ justify-content:center; }
.footer-theme-row{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:18px;
  font-size:13px; font-weight:700; color: var(--on-dark);
}
.footer-cols{ display:flex; flex-wrap:wrap; gap: 50px; }
.footer-col h4{
  font-family: var(--font-body); font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color: var(--on-dark); margin-bottom:16px;
}
.footer-col a{ display:block; padding: 6px 0; font-size:14.5px; color: var(--bone-70); }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  padding-top: 24px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size: 12.5px; color: var(--bone-70);
}

/* ---- credit tile modal (enlarged photo + bio) --------------------------- */

.credit-modal{
  position: fixed; inset:0; z-index: 1000;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(6px);
  padding: 18px;
}
.credit-modal.open{ display:flex; }
.credit-modal-panel{
  position:relative;
  width:min(420px, 100%);
  max-height:90vh; overflow-y:auto;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 28px;
  text-align:center;
}
.credit-modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background: var(--paper-18); border:0; color: var(--on-dark);
  font-size:14px; cursor:pointer;
}
.credit-modal-close:hover{ background: var(--paper-45); }
.credit-modal-panel img{
  width:100%; max-width:240px; aspect-ratio:1/1; object-fit:cover;
  border-radius: var(--radius-md); margin:0 auto 18px; display:block;
  border:2px solid var(--gold);
}
.credit-modal-panel h3{
  font-family: var(--font-display); font-weight:600;
  color: var(--on-dark); margin-bottom:14px;
}
.credit-modal-panel p{ color: var(--bone-70); margin:0; font-size:14.5px; line-height:1.65; }

/* ---- lead form modal (Book Here -> custom booking form) ------------- */
/* Fixed light card regardless of site theme — reads as its own clean,
   focused "quote request" card rather than matching dark mode, so the
   text/inputs below use hardcoded colors, not the theme's flipping tokens. */
.leadform-modal{
  position: fixed; inset:0; z-index: 1000;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(6px);
  padding: 18px;
}
.leadform-modal.open{ display:flex; }
.leadform-modal-panel{
  position:relative;
  width:min(640px, 100%);
  max-height:90vh; overflow-y:auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-08);
  box-shadow: var(--shadow-lg);
  padding: 40px 32px 30px;
}
.leadform-modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background: var(--ink-08); border:0; color: var(--ink);
  font-size:14px; cursor:pointer; z-index:2;
}
.leadform-modal-close:hover{ background: var(--ink-18); }
.leadform-modal-head{ text-align:center; margin-bottom:22px; }
.leadform-modal-head .eyebrow{ justify-content:center; }
.leadform-modal-head h3{
  font-family: var(--font-display); font-weight:600; font-size:1.5rem;
  color: var(--ink); margin: 10px 0 8px;
}
.leadform-modal-head p{ color: var(--ink-70); font-size:14.5px; margin:0; }

.booking-success{ text-align:center; padding: 10px 0 4px; }
.booking-success-icon{
  width:56px; height:56px; margin:0 auto 18px;
  border-radius:50%;
  background: rgba(61,220,151,.16); color:#1a6b46;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:800;
}
.booking-success h3{
  font-family: var(--font-display); font-weight:600; font-size:1.4rem;
  color: var(--ink); margin:0 0 10px;
}
.booking-success p{ color: var(--ink-70); font-size:14.5px; margin:0 0 24px; }
@media (max-width: 640px){
  /* tighter spacing throughout so a full step fits one mobile screen with
     no internal scrollbar -- see also the narrower single-column breakpoint
     on .booking-grid below (typical phone widths now keep 2 columns) */
  .leadform-modal-panel{ padding: 20px 18px 16px; max-height: 94vh; }
  .leadform-modal-head{ margin-bottom: 12px; }
  .leadform-modal-head h3{ font-size: 1.25rem; margin: 6px 0 5px; }
  .leadform-modal-head p{ font-size: 13px; }
  .booking-form .field label{ margin-bottom: 4px; }
  .booking-form .field input,
  .booking-form .field select,
  .booking-form .field textarea{ padding: 9px 12px; }
  .booking-form .field textarea{ min-height: 72px; }
  .booking-progress{ margin-top: 10px; }
  .booking-nav{ margin-top: 10px; }
}
@media (max-height: 700px){
  /* shorter phones (iPhone SE and similar) need a bit more trimmed on top
     of the width-based compacting above, since the constraint there is
     screen height, not width */
  .leadform-modal{ padding: 8px; }
  .leadform-modal-panel{ padding: 12px 16px 10px; max-height: 98vh; }
  .leadform-modal-head{ margin-bottom: 6px; }
  .leadform-modal-head h3{ font-size: 1.1rem; margin: 3px 0 2px; }
  .leadform-modal-head p{ font-size: 12px; }
  .booking-grid{ gap: 6px 10px; }
  .booking-form .field label{ margin-bottom: 2px; font-size: 11px; }
  .booking-form .field input,
  .booking-form .field select,
  .booking-form .field textarea{ padding: 6px 12px; font-size: 14px; }
  .booking-progress{ margin-top: 6px; }
  .booking-progress-label{ margin-bottom: 4px; }
  .booking-nav{ margin-top: 6px; }
}

/* ---- booking form (inside the lead-form modal) ----------------------- */
.booking-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px 14px;
}
.booking-grid .field-span2{ grid-column: 1 / -1; }
@media (max-width: 340px){
  /* only the narrowest phones drop to a single column -- keeping the two-
     column layout on typical phone widths (even a 360px-wide Android)
     halves the number of stacked field rows (e.g. First/Last Name and
     Email/Phone share a row instead of stacking), which is most of what
     it takes to fit the booking form on one screen with no scrollbar */
  .booking-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .booking-grid{ gap: 10px 10px; }
}
.booking-form .field label{
  display:block; font-size:12.5px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color: var(--ink-70); margin-bottom:7px;
}
.booking-form .field label .optional{
  text-transform:none; font-weight:600; letter-spacing:0; color: var(--ink-45);
}
.booking-form .field input,
.booking-form .field select,
.booking-form .field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--ink-18);
  background: var(--bone); color: var(--ink);
  font-family: var(--font-body); font-size: 15px;
}
.booking-form .field input:focus,
.booking-form .field select:focus,
.booking-form .field textarea:focus{
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.booking-form .field textarea{ min-height: 100px; resize: vertical; }
.booking-form .btn-block{ width:100%; margin-top:22px; }
.booking-form .recaptcha-mount{ margin: 18px 0 0; }
.booking-form .recaptcha-note{ font-size:13px; color: var(--ink-45); font-style: italic; margin:14px 0 0; }
.booking-form .form-status{
  margin-top:14px; padding:13px 15px; border-radius: var(--radius-sm);
  font-size:14px; display:none;
}
.booking-form .form-status.ok{ display:block; background: rgba(61,220,151,.14); color:#1a6b46; border:1px solid rgba(61,220,151,.4); }
.booking-form .form-status.err{ display:block; background: rgba(255,90,90,.12); color:#a23333; border:1px solid rgba(255,90,90,.35); }
.booking-form .form-status a{ color: inherit; font-weight: 800; text-decoration: underline; }
.booking-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.booking-step[hidden]{ display:none; }
.booking-progress{ margin: 20px 0 0; }
.booking-progress-label{
  display:block; font-size:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color: var(--ink-45); margin-bottom:7px;
}
.booking-progress-track{ height:5px; border-radius:999px; background: var(--ink-08); overflow:hidden; }
.booking-progress-fill{ height:100%; background: var(--gold-grad); border-radius:999px; transition: width .25s ease; }
.booking-nav{ display:flex; gap:12px; margin-top:16px; }
.booking-nav .btn{ flex:1; margin-top:0; padding-left:14px; padding-right:14px; }
.booking-nav [hidden]{ display:none; }
/* the modal card now follows the page's own light/dark theme (var(--ink) etc.),
   so this just needs a hover color with reliable contrast against either --paper
   (light) or dark --paper -- var(--gold-deep) is too dark to read on the dark
   variant, so use the mid-tone --gold instead of the sitewide default's -deep */
.booking-nav .btn-outline-dark:hover{ border-color: var(--gold); color: var(--gold); }
@media (max-width: 400px){
  .booking-nav{ gap:8px; }
  .booking-nav .btn{ padding-left:10px; padding-right:10px; font-size:12.5px; }
}
.btn-gold.is-not-ready{ background: rgba(0,0,0,.14); color: rgba(20,20,20,.48); box-shadow:none; cursor:not-allowed; }
.btn-gold.is-not-ready:hover{ transform:none; box-shadow:none; }

/* ---- TRL embed modal --------------------------------------------------- */

.embed-modal{
  position: fixed; inset:0; z-index: 1000;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(6px);
  padding: 18px;
}
.embed-modal.open{ display:flex; }
.embed-modal-panel{
  position:relative;
  width:min(920px, 100%);
  height:min(86vh, 900px);
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.embed-modal-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--on-dark);
}
.embed-modal-bar .title{ font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; }
.embed-modal-bar .title .dot{ width:7px;height:7px;border-radius:50%;background:#3ddc97; box-shadow:0 0 8px rgba(61,220,151,.7); }
.embed-modal-bar .actions{ display:flex; gap:8px; align-items:center; }
.embed-modal-bar a, .embed-modal-bar button{
  font-size:12.5px; font-weight:700; color: var(--bone-70);
  background: var(--paper-18); border:0; padding:7px 12px; border-radius: var(--radius-pill);
}
.embed-modal-bar a:hover, .embed-modal-bar button:hover{ color: var(--on-dark); background: var(--paper-45); }
.embed-modal iframe{ flex:1; width:100%; border:0; background: #000; }

/* ---- misc --------------------------------------------------------------- */

.divider-gold{ height:2px; width:64px; background: var(--gold-grad); border-radius:2px; margin: 18px 0; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(204,151,76,.14); color: var(--gold-deep);
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--gold); color:var(--on-gold); padding:10px 16px; border-radius:8px; z-index:2000;
}
.skip-link:focus{ left: 16px; top: 16px; }

@media (max-width: 640px){
  .section{ padding: 56px 0; }
  .hero{ padding: 64px 0 56px; }
}

@media (max-width: 480px){
  .container{ padding: 0 16px; }
  .brand-lockup img{ height:38px; }
  .nav-cta{ gap:6px; }
  .btn-sm{ padding: 10px 16px; }
}

/* =========================================================
   Live show photo gallery (gallery.html)
   ========================================================= */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 4px;
  gap: 16px;
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }

.gallery-item{
  display:block; width:100%; margin:0; padding:0; border:0;
  background: var(--charcoal); cursor: pointer;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: var(--ar);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover{ box-shadow: 0 20px 46px rgba(0,0,0,.4); }
.gallery-item img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.gallery-item:hover img{ transform: scale(1.08); filter: saturate(1.15) brightness(1.03); }
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,6,5,.85) 100%);
  opacity:0; transition: opacity .35s ease;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item-zoom{
  position:absolute; top:12px; right:12px; z-index:1;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,8,6,.55); backdrop-filter: blur(4px);
  color: var(--gold-light); font-size:15px;
  opacity:0; transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery-item:hover .gallery-item-zoom{ opacity:1; transform:scale(1); }
.gallery-item-video-badge{
  position:absolute; top:50%; left:50%; z-index:1;
  transform: translate(-50%, -50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,8,6,.5); backdrop-filter: blur(3px);
  color:#fff; font-size:16px; padding-left:3px;
  pointer-events:none;
}

/* ---- lightbox ---- */
.gallery-lightbox{
  position: fixed; inset:0; z-index: 1200;
  display:none; align-items:center; justify-content:center; flex-direction:column;
}
.gallery-lightbox.open{ display:flex; }
.gallery-lightbox-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: blur(38px) brightness(.35) saturate(1.1);
  transform: scale(1.15);
}
.gallery-lightbox::before{
  content:""; position:absolute; inset:0; background: rgba(6,5,4,.55); z-index:0;
}
.gallery-lightbox-flash{
  position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5;
}
.gallery-lightbox-flash.flash{ animation: galleryFlash .4s ease; }
@keyframes galleryFlash{ 0%{ opacity:.85; } 100%{ opacity:0; } }

.gallery-lightbox-top{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; gap:10px;
  padding: 18px 20px;
}
.gallery-lightbox-count{
  margin-right:auto; color:rgba(255,255,255,.7); font-size:13px; font-weight:600; letter-spacing:.04em;
}
.gallery-lightbox-play, .gallery-lightbox-close{
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background: rgba(255,255,255,.12); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.gallery-lightbox-play:hover, .gallery-lightbox-close:hover{ background: rgba(255,255,255,.24); }
.gallery-lightbox-play.playing{ background: var(--gold); color:#141414; }

.gallery-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background: rgba(255,255,255,.1); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  z-index:4; transition: background .2s ease;
}
.gallery-lightbox-nav:hover{ background: rgba(255,255,255,.22); }
.gallery-lightbox-nav.prev{ left:18px; }
.gallery-lightbox-nav.next{ right:18px; }

.gallery-lightbox-stage{
  position:relative; z-index:2;
  max-width: min(1100px, 92vw);
  max-height: 68vh;
  display:flex; align-items:center; justify-content:center;
}
.gallery-lightbox-image{
  display:block;
  max-width:100%; max-height:68vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  opacity:0; transform: scale(.96);
  transition: opacity .35s ease, transform .35s ease;
}
.gallery-lightbox-image.show{ opacity:1; transform:scale(1); }
/* both the <img> and <video> lightbox elements share this class, so its own
   display:block (an author-origin rule) would otherwise override the
   browser's default [hidden]{display:none} -- author rules always beat the
   UA stylesheet regardless of specificity. Without this, whichever one is
   "hidden" still occupies flex space in .gallery-lightbox-stage, pushing
   the visible one off-center (visible on mobile, where the stage is
   narrower and the offset is more noticeable). */
.gallery-lightbox-image[hidden]{ display:none; }

.gallery-lightbox-strip{
  position:relative; z-index:2;
  display:flex; gap:8px; margin-top:18px; padding: 2px 16px 4px;
  max-width:92vw; overflow-x:auto;
}
.gallery-lightbox-strip img{
  width:56px; height:56px; object-fit:cover; border-radius:8px;
  opacity:.45; cursor:pointer; border:2px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
  flex-shrink:0;
}
.gallery-lightbox-strip img.active{ opacity:1; border-color: var(--gold); }
.gallery-lightbox-strip img:hover{ opacity:.8; }

body.gallery-lightbox-open{ overflow:hidden; }

@media (max-width:640px){
  .gallery-lightbox-nav{ width:40px; height:40px; }
  .gallery-lightbox-nav.prev{ left:8px; }
  .gallery-lightbox-nav.next{ right:8px; }
  .gallery-lightbox-strip img{ width:44px; height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .gallery-item, .gallery-item img, .gallery-lightbox-image{ transition: none !important; }
  .gallery-lightbox-flash.flash{ animation: none !important; }
}