/* =========================================================
   One Entertainment — shared site styles
   Dark cinematic aesthetic inspired by premium live-music
   agency sites. High-contrast, ALL-CAPS, stark.
   ========================================================= */

:root {
  --bg:          #0f0f0e;
  --bg-2:        #1a1a18;
  --bg-3:        #242421;
  --line:        #2e2e2b;
  --line-2:      #3a3a37;

  --text:        #ffffff;
  --text-soft:   #faf9f5;
  --text-dim:    #b9b7b0;
  --text-mute:   #7a7872;

  --amber:       #c54b9b;       /* from Lightning Strike logo */
  --amber-hot:   #ffd35a;
  --crimson:     #3fa8b5;       /* CTA / impact accent */
  --crimson-hot: #53b8c4;
  --ok:          #5ec27a;

  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;

  --maxw:        1220px;

  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--amber); }

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

h1, h2, h3, h4 {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  color: var(--text);
}
h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
h3 { font-size: 1.3rem; letter-spacing: 0; }

p {
  margin: 0 0 1em;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.75;
}

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

/* ---------- Top navigation ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.site-header.scrolled {
  background: rgba(15,15,14,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  /* Desktop: standard space-between so long .nav-links can sit right-aligned.
     Mobile (≤720px) overrides to a 3-column grid that absolutely centres
     the logo with the burger anchored on the right. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.88rem;
  /* Centre column of the navbar grid */
  grid-column: 2;
  justify-self: center;
}
.brand svg.logo-mark {
  width: 42px;
  height: 42px;
  display: block;
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  /* Right column of the navbar grid */
  grid-column: 3;
  justify-self: end;
}
.nav-links a {
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  position: relative;
  padding: 6px 0;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--amber);
  transition: width 0.18s;
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--amber); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
}
.btn-primary {
  background: var(--crimson);
  color: #fff;
}
.btn-primary:hover { background: var(--crimson-hot); color: #fff; }
.btn-accent {
  background: var(--amber);
  color: #111;
}
.btn-accent:hover { background: var(--amber-hot); color: #111; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); background: transparent; }
.btn-block { display: block; width: 100%; }

/* Reveal arrow on buttons */
.btn .arr {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.18s;
}
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Section dividers (stars) ---------- */

.star-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-mute);
  margin: 0 0 30px;
  font-size: 0.7rem;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.star-divider::before,
.star-divider::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--line-2);
}
.star-divider .asterisk {
  color: var(--amber);
  font-size: 1rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 160px 24px 100px;
  background: var(--bg);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(197,75,155,0.12), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(63,168,181,0.12), transparent 55%),
    linear-gradient(180deg, #0f0f0e 0%, #0a0a0a 100%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 120px);
  opacity: 0.9;
}
.hero-bg::after {
  /* crowd silhouette hint */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    radial-gradient(ellipse 30% 60% at 15% 100%, rgba(0,0,0,0.6), transparent 70%),
    radial-gradient(ellipse 25% 50% at 40% 100%, rgba(0,0,0,0.55), transparent 70%),
    radial-gradient(ellipse 30% 60% at 75% 100%, rgba(0,0,0,0.6), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
}
.kicker {
  color: var(--amber);
  letter-spacing: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 600;
}
.kicker .star { color: var(--crimson); margin: 0 10px; }
.hero h1 {
  margin: 0 0 24px;
}
.hero h1 .spark { color: var(--amber); }
.hero p.lead {
  font-size: 1.1rem;
  color: var(--text-soft);
  max-width: 640px;
  margin: 0 auto 40px;
  letter-spacing: 0.2px;
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll-cue {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 3;
  color: var(--text-mute);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero-scroll-cue::after {
  content: "";
  display: block;
  margin: 12px auto 0;
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, var(--amber), transparent);
}

/* ---------- Sections ---------- */

.section {
  padding: 120px 0;
  position: relative;
}
.section.compact { padding: 80px 0; }
.section-head {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
}
.section-head h2 { margin: 0 0 18px; }
.section-head p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-dim);
}

.page-head {
  padding: 180px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-head .kicker { margin-bottom: 16px; }
.page-head p { max-width: 640px; margin: 0 auto; }

/* ---------- Services / feature grid (2-col inspired by totalentertainment.ie) ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature {
  position: relative;
  min-height: 420px;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
}
.feature:last-child { border-right: 0; }
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}
.feature > * { position: relative; z-index: 2; }
.feature .num {
  font-size: 0.72rem;
  letter-spacing: 4px;
  color: var(--amber);
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
.feature h3 {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  margin: 0 0 14px;
  color: #fff;
}
.feature p {
  color: var(--text-soft);
  margin-bottom: 20px;
  max-width: 440px;
}
.feature .link {
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  align-self: flex-start;
}
.feature .link .arr { display: inline-block; margin-left: 8px; transition: transform 0.18s; }
.feature:hover .link .arr { transform: translateX(4px); }

/* Feature background variants (gradient/patterns instead of images) */
.feature.f-stage {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(197,75,155,0.2), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(63,168,181,0.18), transparent 60%),
    linear-gradient(180deg, #1a1a18 0%, #0a0a0a 100%);
}
.feature.f-crowd {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(197,75,155,0.18), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(63,168,181,0.18), transparent 60%),
    linear-gradient(180deg, #141412 0%, #1c1c1a 100%);
}

/* ---------- Band grid ---------- */

.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}
.band-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.band-card:hover { transform: translateY(-4px); border-color: var(--amber); color: inherit; }
.band-card .cover {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(197,75,155,0.25), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(63,168,181,0.2), transparent 60%),
    #0a0a0a;
}
.band-card .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
}
/* Roster portraits are usually tall headshots — default `center center` cropping
   was slicing faces off when the 4:3 cover squeezed them. Bias the crop upward
   so heads stay in frame across DJs / Drummers / Bands / Solo Acts cards.
   Per-act overrides can still set inline `object-position` if a specific photo
   needs a different focal point. */
.band-card .cover img:not([style*="object-position"]) {
  object-position: 50% 22%;
}
.band-card .cover .emblem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.08);
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}
.band-card .body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.band-card h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  letter-spacing: 1px;
}
/* Taglines + meta sub-tags hidden site-wide on band cards
   (single rule — must come AFTER any other .band-card .meta declaration). */
.band-card .tag,
.band-card .meta {
  display: none !important;
}

/* Header logo: subtle vertical bounce, runs every page */
@keyframes oeLogoBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.brand .logo-mark-img,
.brand > img {
  animation: oeLogoBounce 3.6s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .brand .logo-mark-img,
  .brand > img { animation: none; }
}
.band-card p { font-size: 0.95rem; color: var(--text-dim); }
.band-card .actions {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  gap: 10px;
}
.band-card.placeholder {
  opacity: 0.6;
  border-style: dashed;
}
.band-card.placeholder .cover { background: #111; }
.band-card.placeholder h3 { color: var(--text-dim); }

/* ---------- Band profile ---------- */

.profile-hero {
  position: relative;
  padding: 200px 0 100px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(197,75,155,0.15), transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(63,168,181,0.12), transparent 55%),
    linear-gradient(180deg, #0f0f0e 0%, #1a1a18 100%);
}
.profile-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.profile-hero .art {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #1c1c1a 0%, #0a0a0a 100%);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.profile-hero .art .stage-name {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  color: var(--amber);
  letter-spacing: 8px;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.95;
  padding: 20px;
}
.profile-hero .art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-hero h1 { margin-bottom: 20px; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.profile-hero .lead { font-size: 1.15rem; margin-bottom: 32px; color: var(--text-soft); }
.stat-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat .n {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 2.4rem;
  color: var(--amber);
  line-height: 1;
  letter-spacing: 1px;
}
.stat .l {
  color: var(--text-mute);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 6px;
}

/* Members */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.member {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.2s;
}
.member:hover { border-color: var(--amber); }
.member .avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--amber), var(--crimson));
  display: grid;
  place-items: center;
  color: #111;
  font-family: "Impact", sans-serif;
  font-size: 2rem;
  font-weight: 700;
}
.member .name {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.member .role {
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Video grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}
.video {
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.2s;
}
.video:hover { border-color: var(--amber); }
.video .frame {
  aspect-ratio: 16 / 9;
  position: relative;
  background: #000;
  overflow: hidden;
}
.video iframe, .video video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video .caption {
  padding: 18px 22px;
  font-size: 0.82rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  border-top: 1px solid var(--line);
}
.video .caption .small {
  display: block;
  color: var(--text-mute);
  letter-spacing: 1.5px;
  font-size: 0.7rem;
  margin-top: 4px;
}

/* Setlist */
.setlist {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 36px 44px;
  columns: 2;
  column-gap: 56px;
  list-style: none;
  margin: 0;
}
.setlist li {
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--text-soft);
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.setlist li .n {
  color: var(--amber);
  font-family: "Impact", sans-serif;
  margin-right: 14px;
}

/* Testimonials */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.quote {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px 34px;
  position: relative;
}
.quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--amber);
}
.quote p {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
}
.quote .who {
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
}

/* CTA banner */
.cta-banner {
  padding: 80px 60px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(197,75,155,0.15), transparent 70%),
    linear-gradient(135deg, #1a1a18 0%, #0a0a0a 100%);
  border: 1px solid var(--amber);
  border-left: 0;
  border-right: 0;
}
.cta-banner h2 { margin: 0 0 14px; color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.cta-banner p { margin: 0 auto 28px; color: var(--text-soft); max-width: 560px; }

/* ---------- Booking flow ---------- */

.booking-steps {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 50px;
  flex-wrap: wrap;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.step {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-mute);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 600;
}
.step .dot {
  width: 34px;
  height: 34px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: "Impact", sans-serif;
  color: var(--text-mute);
  font-size: 1rem;
}
.step.active { color: var(--text); }
.step.active .dot { background: var(--amber); color: #111; border-color: var(--amber); }
.step.done .dot { background: var(--ok); color: #111; border-color: var(--ok); }
.step-sep { color: var(--text-mute); }

.booking-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}

/* Calendar */
.calendar {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.cal-head h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: 3px;
}
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 38px;
  height: 38px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  font-family: inherit;
  transition: all 0.15s;
}
.cal-nav button:hover { border-color: var(--amber); color: var(--amber); }

.cal-weekdays, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-weekdays {
  margin-bottom: 10px;
}
.cal-weekdays div {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 10px 0;
  font-weight: 600;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  background: var(--bg-3);
  color: var(--text-dim);
  display: grid;
  place-items: center;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.12s;
  position: relative;
  font-weight: 500;
}
.cal-cell:hover:not(.disabled):not(.past):not(.other-month) {
  border-color: var(--amber);
  color: var(--text);
}
.cal-cell.other-month { opacity: 0.25; cursor: default; }
.cal-cell.past { color: var(--text-mute); cursor: not-allowed; opacity: 0.4; }
.cal-cell.today { border-color: var(--text-dim); font-weight: 700; }
.cal-cell.selected {
  background: var(--amber);
  color: #111;
  font-weight: 800;
  border-color: var(--amber);
}
.cal-cell.booked {
  background: transparent;
  color: var(--text-mute);
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.6;
}
.cal-cell .avail-dot {
  position: absolute;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
}
.cal-cell.booked .avail-dot { background: var(--crimson); }
.cal-cell.selected .avail-dot { background: #111; }

.cal-legend {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--text-mute);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-wrap: wrap;
  font-weight: 600;
}
.cal-legend .sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.sw.free { background: var(--ok); }
.sw.booked { background: var(--crimson); }
.sw.selected { background: var(--amber); }

/* Right-hand panel */
.book-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.book-panel h3 {
  margin-top: 0;
  color: var(--text);
  font-size: 1.1rem;
  letter-spacing: 3px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.selected-date {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.selected-date .dow {
  color: var(--amber);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.selected-date .dt {
  font-family: "Impact", sans-serif;
  font-size: 1.5rem;
  color: var(--text);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.avail-list { display: grid; gap: 14px; }
.avail-band {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
}
.avail-band:hover { border-color: var(--amber); transform: translateX(2px); }
.avail-band.selected {
  border-color: var(--amber);
  background: rgba(197,75,155,0.08);
}
.avail-band .thumb {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, var(--amber), var(--crimson));
  display: grid;
  place-items: center;
  color: #111;
  font-family: "Impact", sans-serif;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1.1rem;
  letter-spacing: 1px;
  overflow: hidden;
  border-radius: 4px;
}
/* When the band has a photo, the thumb hosts a real <img> and we don't need
   the gradient backdrop (the photo covers the whole square). */
.avail-band .thumb.has-photo { background: #0a0a0a; }
/* The .initials variant is what we fall back to when no photo or image fails. */
.avail-band .thumb.initials { background: linear-gradient(135deg, var(--amber), var(--crimson)); }
.avail-band .info { flex: 1; }
.avail-band .nm {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text);
  font-size: 1rem;
  text-transform: uppercase;
}
.avail-band .sub {
  color: var(--text-mute);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 2px;
  font-weight: 600;
}
.avail-band .price {
  color: var(--amber);
  font-family: "Impact", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 1px;
}
.avail-empty {
  color: var(--text-mute);
  text-align: center;
  padding: 40px 20px;
  font-size: 0.85rem;
  letter-spacing: 1px;
}
.avail-empty .big {
  color: var(--text-dim);
  font-family: "Impact", sans-serif;
  font-size: 1.2rem;
  display: block;
  margin-bottom: 6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Form */
.form-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.form-grid label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
  font-weight: 700;
}
.form-grid input, .form-grid textarea, .form-grid select {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.95rem;
  padding: 14px 16px;
  font-family: inherit;
  border-radius: 0;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
  outline: none;
  border-color: var(--amber);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Confirmation summary */
.summary {
  background: var(--bg-2);
  border: 1px solid var(--amber);
  padding: 48px;
  margin: 40px auto;
  max-width: 640px;
  text-align: center;
}
.summary .ok {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--ok);
  color: #111;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 700;
}
.summary dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px 24px;
  margin: 28px 0;
  font-size: 0.95rem;
  text-align: left;
}
.summary dt {
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.72rem;
  padding-top: 4px;
  font-weight: 700;
}
.summary dd {
  margin: 0;
  color: var(--text);
  font-family: "Impact", sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 1.05rem;
}

/* ---------- Instagram-style strip ---------- */

.ig-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.ig-strip .tile {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(197,75,155,0.3), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(63,168,181,0.25), transparent 60%),
    #0a0a0a;
  position: relative;
  overflow: hidden;
}
.ig-strip .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
}
.ig-strip .tile .mark {
  position: absolute;
  bottom: 12px;
  left: 16px;
  z-index: 2;
  color: var(--amber);
  font-family: "Impact", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */

.site-footer {
  background: #0a0a0a;
  border-top: 1px solid var(--line);
  padding: 80px 0 32px;
  margin-top: 0;
  color: var(--text-mute);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer-grid h4 {
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 700;
}
.footer-grid a {
  display: block;
  color: var(--text-dim);
  font-size: 0.88rem;
  padding: 4px 0;
}
.footer-grid a:hover { color: var(--amber); }
.footer-grid .logo-block {
  color: var(--text-soft);
}
.footer-grid .logo-block .mini-logo {
  width: 180px;
  margin-bottom: 20px;
}
.footer-grid .logo-block p {
  color: var(--text-dim);
  font-size: 0.9rem;
  max-width: 320px;
}
.footer-bot {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mute);
  flex-wrap: wrap;
}

/* ---------- Mobile ---------- */

@media (max-width: 960px) {
  .profile-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .booking-layout { grid-template-columns: 1fr; }
  .book-panel { position: static; }
  .setlist { columns: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { border-right: 0; border-bottom: 1px solid var(--line); }
  .feature:last-child { border-bottom: 0; }
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  .ig-strip .tile:nth-child(n+7) { display: none; }
}

@media (max-width: 640px) {
  .nav-links { gap: 16px; }
  .nav-links a:not(.btn) { display: none; }
  .brand span:last-child { display: none; }
  .section { padding: 80px 0; }
  .hero { min-height: 85vh; padding: 120px 20px 80px; }
  .hero-scroll-cue { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .summary dl { grid-template-columns: 1fr; gap: 4px 0; }
  .summary dt { padding-top: 12px; }
}

/* ================ AEI-INSPIRED: CAPABILITY ICONS ================ */
.cap-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  margin: 18px 0 8px;
  max-width: 980px; margin-left: auto; margin-right: auto;
}
.cap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 6px; text-decoration: none; color: var(--text);
  border-radius: var(--radius); transition: transform 0.15s ease, background 0.15s ease;
}
.cap:hover { background: rgba(255,255,255,0.03); transform: translateY(-2px); }
.cap-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(140deg, var(--amber), #a83a85);
  display: grid; place-items: center;
  color: #0a0a0a;
  box-shadow: 0 10px 22px rgba(197,75,155,0.25);
}
.cap-ico svg { width: 28px; height: 28px; }
.cap-l {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--text-dim);
  text-align: center;
}
.cap:hover .cap-l { color: var(--text); }
@media (max-width: 820px) {
  .cap-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 440px) {
  .cap-row { grid-template-columns: repeat(2, 1fr); }
}

/* ================ AEI-INSPIRED: WHO WE ARE ================ */
.who-wrap {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 48px 52px;
}
.who-copy .kicker {
  font-size: 0.66rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-mute); font-weight: 800;
  margin: 0 0 8px;
}
.who-copy h2 {
  font-size: 2rem; font-weight: 900; line-height: 1.1;
  letter-spacing: -0.5px;
}
.who-art {
  display: grid; place-items: center;
  min-height: 200px;
  background: radial-gradient(ellipse at center, rgba(197,75,155,0.08), transparent 70%);
  border-radius: 12px;
}
@media (max-width: 820px) {
  .who-wrap { grid-template-columns: 1fr; padding: 32px 28px; gap: 32px; }
  .who-copy h2 { font-size: 1.6rem; }
  .who-art { min-height: 140px; }
  .who-art img { max-width: 60% !important; }
}

/* ================ ONE ENTERTAINMENT LOGO IN NAV ================ */
.logo-mark-img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
@media (max-width: 640px) {
  /* Bigger logo on mobile per design feedback */
  .logo-mark-img { height: 68px; max-width: 260px; }
}

/* Navbar breathing room — vertical padding gives the navbar a comfortable
   height and visually centres the logo + hamburger. Horizontal padding on the
   inner container is a touch over the global .container default for the fixed
   top bar specifically. */
.site-header .container.nav {
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 720px) {
  .site-header .container.nav {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ================ MOBILE NAV: HAMBURGER + DRAWER ================ */
.nav-mobile-wrap {
  display: none;
  grid-column: 3;     /* right column of the navbar grid */
  justify-self: end;
}
.nav-burger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 70;
}
.nav-burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--text);
  margin: 3.5px 0;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 70;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed; top: 0; right: 0;
  height: 100dvh;
  width: min(86vw, 360px);
  background: #0a0a0a;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.32, 1);
  display: flex; flex-direction: column;
  z-index: 71;
  box-shadow: -10px 0 40px rgba(0,0,0,0.6);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.nav-drawer-head img { height: 40px; width: auto; }
.nav-drawer-close {
  background: transparent; border: 0; color: var(--text);
  font-size: 2rem; line-height: 1; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
}
.nav-drawer-close:hover { color: var(--amber); background: rgba(255,255,255,0.04); }

.nav-drawer-list {
  display: flex; flex-direction: column;
  padding: 14px 12px;
  gap: 2px;
  flex: 1;
}
.nav-drawer-list a {
  display: block;
  padding: 14px 16px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.nav-drawer-list a:hover { background: rgba(255,255,255,0.04); color: var(--amber); }
.nav-drawer-list a.active { color: var(--amber); background: rgba(197,75,155,0.08); }

.nav-drawer-group { display: flex; flex-direction: column; }
.nav-drawer-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: transparent; border: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.nav-drawer-trigger:hover { background: rgba(255,255,255,0.04); color: var(--amber); }
.nav-drawer-trigger .caret { transition: transform 0.22s ease; font-size: 0.8rem; }
.nav-drawer-group.open .nav-drawer-trigger .caret { transform: rotate(180deg); }
.nav-drawer-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  padding-left: 18px;
}
.nav-drawer-group.open .nav-drawer-sub { max-height: 320px; }
.nav-drawer-sub a {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--text-soft);
  padding: 11px 16px;
}
.nav-drawer-sub a::before {
  content: "·";
  margin-right: 10px;
  color: var(--amber);
  font-weight: 800;
}

.nav-drawer-foot {
  padding: 16px 18px 22px;
  border-top: 1px solid var(--line);
}
.nav-drawer-foot p {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 700;
}

/* ================ DESKTOP EVENTS DROPDOWN (injected by nav.js) ================ */
.nav-events-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-events-trigger {
  background: transparent;
  border: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  position: relative;
}
.nav-events-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--amber);
  transition: width 0.18s;
}
.nav-events-drop:hover .nav-events-trigger,
.nav-events-drop.open  .nav-events-trigger,
.nav-events-drop.active .nav-events-trigger { color: var(--amber); }
.nav-events-drop:hover .nav-events-trigger::after,
.nav-events-drop.open  .nav-events-trigger::after,
.nav-events-drop.active .nav-events-trigger::after { width: 100%; }
.nav-events-trigger .caret {
  font-size: 0.7rem;
  transition: transform 0.18s ease;
}
.nav-events-drop.open .nav-events-trigger .caret { transform: rotate(180deg); }

.nav-events-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 220px;
  background: rgba(15,15,14,0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 70;
}
.nav-events-drop:hover .nav-events-menu,
.nav-events-drop.open  .nav-events-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-events-menu a {
  display: block;
  padding: 10px 18px;
  color: var(--text-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-events-menu a:hover,
.nav-events-menu a.active {
  background: var(--bg-2);
  color: var(--amber);
}
/* Hide desktop dropdown on mobile (mobile drawer handles Events there) */
@media (max-width: 720px) {
  .nav-events-drop { display: none; }
}

/* ================ NAV OVERLAP FIX ================
   The .site-header is position:fixed (~80px desktop, ~96px mobile).
   Pages that begin with .hero or .page-head already include enough top
   spacing. For any other first content section, ensure consistent top
   clearance so content never hides under the navbar. !important is used
   so it wins over inline padding-top declarations on the source pages. */
body > section:first-of-type:not(.hero):not(.page-head):not(.cta-banner) {
  padding-top: 140px !important;
}
@media (max-width: 720px) {
  body > section:first-of-type:not(.hero):not(.page-head):not(.cta-banner) {
    padding-top: 150px !important;
  }
}

/* Show mobile nav controls only on small screens; keep desktop .nav-links as-is */
@media (max-width: 720px) {
  /* Mobile: 3-column grid puts the logo dead-centre regardless of burger width */
  .site-header .container.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .brand           { grid-column: 2; justify-self: center; }
  .nav-mobile-wrap { display: block; grid-column: 3; justify-self: end; }
  .nav-links       { display: none; }   /* hide desktop link list entirely on mobile */
}
@media (min-width: 721px) {
  .nav-burger, .nav-scrim, .nav-drawer { display: none !important; }
}