/* ==========================================================================
   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; }
.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;
    z-index:400;
    background: var(--charcoal);
    display:flex; flex-direction:column; align-items:center; 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; }

  .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:center;
    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; }

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

.hero.hero-photo{
  background:
    linear-gradient(180deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.72) 45%, rgba(8,6,5,.92) 100%),
    url('../assets/band-live-1.jpg') 45% 42% / cover no-repeat;
}
.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; }
.hero.hero-photo .credit-tiles{ justify-content:center; }


.credit-strip{
  border-top: 1px solid var(--ink-18);
  margin-top: 56px;
  padding-top: 26px;
  display:flex; flex-direction:column; gap: 16px;
}
.credit-strip .credit-label{
  font-size: 11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-45);
}
.credit-tiles{
  display:flex; align-items:flex-end; justify-content:center; gap: 22px;
  transition: opacity .3s ease;
  padding-bottom: 4px;
}
.credit-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width: 72px; 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 img{
  width: 168px; height: 168px; border-radius: 16px;
  border: 3px solid var(--gold);
  box-shadow: 0 16px 40px rgba(204,151,76,.5), 0 0 0 4px rgba(240,185,11,.2);
}
.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{ 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; } }

/* ---- 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; }

/* 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); }

/* ---- gigs / calendar --------------------------------------------------- */

.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-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); }

.gig-list{ display:flex; flex-direction:column; gap:14px; }
.gig-row{
  display:flex; align-items:center; gap:20px;
  width:100%;
  background: var(--charcoal);
  border: 1px solid rgba(204,151,76,.25);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  box-shadow: var(--shadow-sm);
  font: inherit; text-align:left; cursor:pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gig-row:hover{ border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gig-more{ display:block; margin: 20px auto 0; }

/* ---- gig details modal ---- */
.gig-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;
}
.gig-modal.open{ display:flex; }
.gig-modal-panel{
  position:relative;
  width:min(460px, 100%);
  max-height:90vh; overflow-y:auto;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(204,151,76,.35);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 28px;
}
.gig-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;
}
.gig-modal-close:hover{ background: var(--paper-45); }
.gig-modal-date{
  display:block; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold-light); margin-bottom:8px;
}
.gig-modal-panel h3{ font-family: var(--font-display); font-weight:500; color: var(--on-dark); margin-bottom:14px; }
.gig-modal-time{ font-size:15px; font-weight:700; color: var(--on-dark); margin-bottom:4px; }
.gig-modal-location{ font-size:14px; margin-bottom:14px; }
.gig-modal-location a{
  color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px;
}
.gig-modal-location a:hover{ color: var(--gold); }
.gig-modal-desc{ font-size:14px; color: var(--bone-70); line-height:1.6; margin:0; padding-top:14px; border-top:1px solid var(--paper-18); }
.gig-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; flex-shrink:0;
  border-radius: var(--radius-sm);
  background: var(--gold-grad);
  color: var(--on-gold);
}
.gig-date-month{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.gig-date-day{ font-family: var(--font-display); font-size:24px; font-weight:600; line-height:1; margin-top:2px; }
.gig-info{ flex:1; min-width:0; }
.gig-title{
  font-family: var(--font-display); font-weight:500; font-size:18px; color: var(--on-dark);
  margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gig-meta{ font-size:13px; color: var(--bone-70); }
.calendar-empty{
  padding: 70px 30px;
  text-align:center;
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--ink-18);
}
.calendar-empty .glyph{ font-size:34px; margin-bottom: 14px; }
.calendar-empty h3{ margin-bottom:8px; }
.calendar-empty p{ color: var(--ink-45); max-width:44ch; margin: 0 auto 22px; }

/* ---- 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); }

.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 -> HubSpot form) -------------------- */
/* Fixed light card regardless of site theme — HubSpot's embedded form
   renders with its own white background we can't restyle from here, so the
   surrounding chrome is built to match it rather than fight it in dark mode. */
.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(560px, 100%);
  max-height:90vh; overflow-y:auto;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.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: rgba(0,0,0,.06); border:0; color:#141414;
  font-size:14px; cursor:pointer; z-index:2;
}
.leadform-modal-close:hover{ background: rgba(0,0,0,.12); }
.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:#141414; margin: 10px 0 8px;
}
.leadform-modal-head p{ color: rgba(20,20,20,.6); font-size:14.5px; margin:0; }
.leadform-modal-panel .hs-form-frame{ min-height: 280px; }
@media (max-width: 640px){
  .leadform-modal-panel{ padding: 30px 20px 24px; }
}

/* ---- 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 .brand-name{ display:none; }
  .brand-lockup img{ height:38px; }
  .nav-cta{ gap:6px; }
  .btn-sm{ padding: 10px 16px; }
}