/* ==========================================================================
   AtlannaTonight — v2, modern editorial redesign
   ========================================================================== */

:root {
  --ink: #14130f;
  --ink-soft: #26241d;
  --stone: #f3efe7;
  --stone-2: #ece6d9;
  --paper: #fbf9f5;
  --white: #ffffff;
  --accent: #ff3b30;
  --accent-soft: #ffdcda;
  --gray-600: #6f6a5f;
  --gray-400: #9c9686;
  --line: rgba(20,19,15,0.1);
  --line-dark: rgba(255,255,255,0.12);
  --display: 'Archivo Black', 'Inter', -apple-system, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max: 1220px;
  --brand-teal: #3ad9df;
  --brand-pink: #f6bfd3;
  --brand-blue: #166bf3;
  --brand-yellow: #fde962;
}

* { box-sizing: border-box; }

/* Deliberately NOT scroll-behavior: smooth globally — Chrome applies that CSS
   easing to wheel/trackpad scrolling too, not just anchor jumps, which makes
   ordinary scrolling feel laggy and "catch up" after any programmatic scroll
   (visible as content appearing to shift on its own while scrolling). Smooth
   scrolling for same-page anchor links is handled in script.js instead, so
   normal scrolling stays 1:1 with input. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.spark-icon { width: 0.8em; height: 0.8em; flex-shrink: 0; }
.kicker-light { color: var(--accent); }

/* Inline script-logo swap: replaces the plain-text word "AtlannaTonight"
   wherever it appears in running copy. Sized/aligned relative to the
   surrounding text so it sits on the baseline like a word would. */
.wordmark-inline {
  height: 1.7em;
  width: auto;
  vertical-align: -0.5em;
  display: inline-block;
}
/* Larger treatment for headline-level usage (e.g. the partnerships
   "Ways to work with..." h2), where there's more room to let the
   logo read as a real headline element rather than an inline word. */
.wordmark-inline--lg {
  height: 2.4em;
  vertical-align: -0.68em;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
}
h1 em, h2 em { font-style: normal; color: var(--accent); }

/* grain texture */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- utility bar ---------- */
.utility-bar {
  background: var(--ink);
  color: rgba(255,255,255,0.75);
  text-align: center;
  padding: 9px 16px;
}
.utility-bar p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.utility-bar .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.utility-bar a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.utility-bar a:hover { color: var(--white); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}
.nav .deco-spark { z-index: 0; }
.nav-brand, .nav-links, .nav-toggle { position: relative; z-index: 1; }
.nav.scrolled {
  border-bottom-color: var(--line-dark);
  padding: 13px 40px;
}

.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-word-mark { height: 36px; width: auto; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--accent); }

.nav-cta {
  background: var(--accent);
  padding: 10px 20px;
  border-radius: 6px;
  color: var(--white) !important;
}
.nav-cta:hover { background: var(--white); color: var(--ink) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--white); display: block; }

.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 78%;
  max-width: 320px;
  height: 100%;
  background: var(--ink);
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 110px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { color: var(--white); font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- hero ---------- */
.hero {
  background: var(--ink);
  padding: 76px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero > .section-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 720px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow-mark { color: var(--accent); font-size: 13px; }

.hero-copy h1 {
  font-size: clamp(40px, 6vw, 74px);
  color: var(--white);
  text-transform: uppercase;
}

.hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin: 26px 0 0;
  line-height: 1.6;
}
.hero-sub strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border-radius: 6px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--accent); transform: translateY(-1px); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-line-dark { border-color: var(--ink); color: var(--ink); }
.btn-line-dark:hover { background: var(--ink); color: var(--white); }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--white); color: var(--ink); transform: translateY(-1px); }
.btn-line-light { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-line-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ---------- promise (second headline) ---------- */
.promise { background: var(--paper); padding: 64px 0 56px; text-align: center; }
.promise-inner { max-width: 820px; margin: 0 auto; }
.promise .kicker { justify-content: center; }
.promise-headline {
  font-size: clamp(34px, 5.4vw, 64px);
  color: var(--ink);
  text-transform: uppercase;
}
.promise-accent { color: var(--accent); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  padding: 15px 0;
  background: var(--ink);
}
.marquee-track {
  display: flex;
  gap: 22px;
  white-space: nowrap;
  width: max-content;
  animation: scrollX 32s linear infinite;
}
.marquee-track span {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12.5px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.05em;
}
@keyframes scrollX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- about ---------- */
.about { padding: 16px 0 56px; background: var(--paper); text-align: center; }
.about-inner-solo { max-width: 760px; margin: 0 auto; }
.about-inner-solo .kicker { justify-content: center; }
.about-inner-solo h2 {
  font-size: clamp(17px, 4.4vw, 32px);
  margin: 0 auto 26px;
  max-width: 680px;
}
.about-inner-solo h2 .lead-line { white-space: nowrap; }
.about-inner-solo p:not(.kicker) {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-600);
  margin: 0 auto 20px;
  max-width: 640px;
}
.about-inner-solo .social-link { margin: 0 auto; }
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: start;
}
.about-copy h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-bottom: 26px;
  max-width: 480px;
}
.about-copy p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-600);
  margin: 0 0 18px;
  max-width: 460px;
}
.about-figure {
  border-radius: 14px;
  overflow: hidden;
  background: var(--stone);
  border: 1px solid var(--line);
  padding: 48px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stat-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(20,19,15,0.18);
  transition: transform 0.25s ease;
}
.stat-icon svg { width: 26px; height: 26px; }
.stat-tile:nth-child(1) .stat-icon {
  background: var(--brand-yellow);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(253,233,98,0.4);
}
.stat-tile:nth-child(2) .stat-icon {
  background: var(--brand-blue);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(22,107,243,0.28);
}
.stat-tile:nth-child(3) .stat-icon {
  background: var(--brand-pink);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(246,191,211,0.45);
}
.stat-tile:nth-child(4) .stat-icon {
  background: var(--brand-teal);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(58,217,223,0.35);
}
.stat-tile:hover .stat-icon { transform: rotate(-6deg) scale(1.06); }
.stat-value {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  color: var(--gray-400);
}

/* ---------- event cta ---------- */
.event-cta { background: var(--stone); padding: 48px 0; }
.event-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.event-cta-text .kicker { color: var(--accent); margin-bottom: 10px; }
.event-cta-text h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 0 0 6px;
}
.event-cta-text p:not(.kicker) { margin: 0; color: var(--gray-600); font-size: 15px; }
.event-cta .btn { flex-shrink: 0; }
.event-cta-text p a,
.get-featured-text p a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.event-cta-text p a:hover,
.get-featured-text p a:hover { color: var(--ink); border-color: var(--ink); }

/* Home page only: Get Featured sits directly between Contact and the
   footer, both dark — giving it the same dark treatment turns that close
   into one continuous block instead of a light sliver sandwiched between
   two dark sections. */
/* ---------- priority CTAs: subscribe + submit (events) ---------- */
/* ---------- calendar hero (events.html) ---------- */
.calendar-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.calendar-hero-media { position: absolute; inset: 0; }
.calendar-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.calendar-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,0.08) 0%, rgba(20,19,15,0.18) 36%, rgba(20,19,15,0.74) 62%, rgba(20,19,15,0.95) 100%);
}
.calendar-hero > .section-inner { position: relative; z-index: 1; width: 100%; padding-top: 60px; padding-bottom: 64px; }
.calendar-hero-copy { max-width: 620px; }
.calendar-hero-copy .kicker { color: var(--accent); }
.calendar-hero-copy h1 { font-size: clamp(34px, 5vw, 56px); color: var(--white); text-transform: uppercase; }
.calendar-hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 20px 0 30px;
}
.calendar-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-lg { padding: 18px 32px; font-size: 13.5px; }
.calendar-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.calendar-hero-note svg { width: 15px; height: 15px; flex-shrink: 0; }
.calendar-hero-login {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid rgba(255,59,48,0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.calendar-hero-login:hover { color: var(--white); border-color: var(--white); }

/* ---------- get featured band (events.html) ---------- */
.get-featured-band { background: var(--paper); padding: 46px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.get-featured-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.get-featured-text { max-width: 620px; }
.get-featured-text .kicker { margin-bottom: 10px; }
.get-featured-text h3 { font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase; margin: 0 0 8px; }
.get-featured-text p:not(.kicker) { font-size: 14.5px; line-height: 1.65; color: var(--gray-600); margin: 0; }
.get-featured-band .btn { flex-shrink: 0; }

/* ---------- secondary notes: weekend guide + originals (events, de-emphasized) ---------- */
.secondary-notes { background: var(--paper); padding: 36px 0; }
.secondary-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.secondary-note .kicker { margin-bottom: 8px; }
.secondary-note-text { margin: 0 0 12px; color: var(--gray-600); font-size: 14px; line-height: 1.6; }
.secondary-note-link {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.secondary-note-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- name story ---------- */
.name-story { background: var(--paper); padding: 64px 0 16px; text-align: center; }
.name-inner { max-width: 760px; margin: 0 auto; }
.name-story .kicker { justify-content: center; }
.name-title {
  font-size: clamp(30px, 4.2vw, 46px);
  margin: 0 auto 26px;
  max-width: 680px;
}
.name-accent { color: var(--accent); }
.name-text {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-600);
  max-width: 640px;
  margin: 0 auto 20px;
}
.name-tagline {
  font-family: var(--display);
  font-size: 22px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.name-tagline-accent { color: var(--accent); }

/* ---------- coverage / bento ---------- */
.coverage { background: var(--ink); color: var(--white); padding: 90px 0; position: relative; overflow: hidden; }
.coverage > .section-inner { position: relative; z-index: 1; }
.coverage-title {
  font-size: clamp(28px, 3.6vw, 40px);
  color: var(--white);
  text-transform: uppercase;
  max-width: 520px;
  margin-bottom: 48px;
}
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
}
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 3; }

.bento-card {
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.bento-large::after {
  content: "01";
  position: absolute;
  top: -0.15em;
  right: 0.1em;
  font-family: var(--display);
  font-size: 220px;
  line-height: 1;
  color: rgba(255,255,255,0.035);
  pointer-events: none;
}
.bento-card:hover { border-color: var(--accent); }
.bento-index {
  font-family: var(--display);
  color: var(--accent);
  font-size: 14px;
  margin-bottom: auto;
  padding-bottom: 24px;
}
.bento-card h3 {
  font-size: 20px;
  color: var(--white);
  margin-bottom: 10px;
}
.bento-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  margin: 0;
  max-width: 380px;
}

/* ---------- partners ---------- */
.partners { padding: 40px 0 0; background: var(--stone); }
.partners-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--gray-400);
  margin: 0 0 36px;
}
.partners-marquee {
  position: relative;
  overflow: hidden;
  padding: 30px 0 56px;
}
/* Edge fade is done with two gradient overlays rather than a CSS mask-image.
   A static mask-image on a wrapper combined with a long-running infinite
   transform animation on its child is a known trigger for progressive
   rendering degradation (the logo bar visibly dimming/fading the longer the
   page stays open) in some browser compositors — solid-color gradient
   overlays achieve the same visual edge-fade without that interaction. */
.partners-marquee::before,
.partners-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  max-width: 12%;
  z-index: 2;
  pointer-events: none;
}
.partners-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--stone), rgba(243,239,231,0));
}
.partners-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--stone), rgba(243,239,231,0));
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: scrollX 62s linear infinite;
  /* Safari-specific fix: `will-change: transform` (previously here) is known
     to make long-running looped animations progressively degrade/fade in
     Safari specifically, rather than help — the opposite of its effect in
     Chrome. Swapped for the classic WebKit compositing-layer fix instead:
     backface-visibility: hidden forces Safari to keep the layer freshly
     rasterized instead of reusing a stale/degraded texture over time.
     translate3d (rather than translateZ alone) is the more reliable form
     for triggering GPU compositing specifically in WebKit. */
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
/* Real partner logos vary wildly in aspect ratio (square icons vs. long
   wordmarks) — each chip fits its logo within a fixed height + max-width
   box via object-fit: contain, rather than force-cropping everything into
   a square (which mangled non-square logos). */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  max-width: 190px;
  padding: 0 20px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(20,19,15,0.06), inset 0 0 0 1px rgba(20,19,15,0.07);
}
.partner-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .partners-track { gap: 20px; }
  .partner-logo { height: 38px; max-width: 130px; padding: 0 14px; }
}

/* ---------- insta feed ---------- */
.insta-feed { background: var(--paper); padding: 64px 0; text-align: center; }
.insta-feed-head { max-width: 680px; margin: 0 auto 44px; }
.insta-feed .kicker { justify-content: center; }
.insta-feed-head h2 { font-size: clamp(19px, 6.4vw, 40px); text-transform: uppercase; margin-bottom: 14px; white-space: nowrap; }
.insta-feed-sub { font-size: 16px; color: var(--gray-600); line-height: 1.6; margin: 0; }
.insta-feed-embed { max-width: 900px; margin: 0 auto; }
/* LightWidget's own iframe/script produces the actual grid once a real
   widget ID is wired in -- this class just gives it a consistent card
   frame so it matches the rest of the site. */
.insta-feed-embed .lightwidget-widget { display: block; border-radius: 14px; overflow: hidden; }
.insta-feed-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: 14px;
  overflow: hidden;
}
.insta-feed-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink); }
.insta-feed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.insta-feed-tile:hover img { transform: scale(1.06); }
.insta-feed-tile-overlay {
  position: absolute; inset: 0;
  background: rgba(20,19,15,0.45);
  opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease;
}
.insta-feed-tile:hover .insta-feed-tile-overlay { opacity: 1; }
.insta-feed-tile-overlay svg { width: 26px; height: 26px; color: var(--white); }
.insta-feed-cta { margin-top: 40px; }
@media (max-width: 600px) {
  .insta-feed { padding: 64px 0; }
  .insta-feed-grid { gap: 2px; }
}

/* ---------- cta ---------- */
.cta { background: var(--stone); padding: 90px 0; text-align: center; }
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta .kicker { justify-content: center; }
.cta h2 { font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; margin-bottom: 18px; }
.cta-sub { font-size: 16px; color: var(--gray-600); line-height: 1.7; margin: 0 0 34px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact { background: var(--ink); color: var(--white); padding: 72px 0 48px; position: relative; overflow: hidden; }
.contact > .section-inner { position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; }
.contact h2 { font-size: clamp(28px, 3.6vw, 40px); color: var(--white); text-transform: uppercase; margin-bottom: 18px; }
.contact-text { color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1.7; max-width: 420px; margin: 0 0 26px; }
.contact-email {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}
.contact-email:hover { color: var(--accent); }

.contact-socials { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line-dark); }
.social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 16px;
  transition: opacity 0.2s ease, padding-left 0.2s ease;
}
.social-arrow { color: var(--accent); font-size: 15px; }
.social-link:hover { padding-left: 8px; opacity: 0.85; }

.contact-socials .social-label { display: flex; align-items: center; gap: 12px; }
.contact-socials .social-icon { display: inline-flex; width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.contact-socials .social-icon svg { width: 100%; height: 100%; }

/* ---------- footer ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--line-dark); padding: 56px 0 30px; position: relative; overflow: hidden; }
.footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; position: relative; z-index: 1; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.footer-nav a { font-size: 13px; letter-spacing: 0.03em; color: rgba(255,255,255,0.6); transition: color 0.2s ease; }
.footer-nav a:hover { color: var(--accent); }
/* Bottom row: socials pinned to the left edge, logo/copyright to the right. */
.footer-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 20px; }
.footer-socials { display: flex; align-items: center; gap: 20px; }
.footer-socials a { display: inline-flex; width: 20px; height: 20px; color: var(--accent); transition: opacity 0.2s ease, transform 0.2s ease; }
.footer-socials a svg { width: 100%; height: 100%; }
.footer-socials a:hover { opacity: 0.8; transform: translateY(-2px); }
.footer-meta { display: flex; align-items: center; gap: 14px; }
.footer-logo-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footer-logo { width: 100%; height: 100%; object-fit: cover; }
.footer p { margin: 0; color: rgba(255,255,255,0.4); font-size: 12px; letter-spacing: 0.03em; }

/* ---------- sub-nav active state ---------- */
.nav-links a.active { color: var(--accent); }
.mobile-menu a.active { color: var(--accent); }

/* ---------- page hero (sub-pages) ---------- */
.page-hero { background: var(--ink); position: relative; overflow: hidden; }
.page-hero-inner { max-width: 760px; margin: 0 auto; padding: 68px 40px 56px; position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 58px); color: var(--white); text-transform: uppercase; }
.page-hero-sub { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 540px; margin: 22px 0 0; line-height: 1.7; }
.page-hero .kicker { color: var(--accent); }

/* ---------- decorative brand-kit sparkles ---------- */
/* Subtle, sparse accent marks on dark hero backgrounds only — nods to the
   original multi-color brand-kit sparkle art without competing with the
   red/black system used everywhere else. */
.deco-spark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}
.deco-spark svg { display: block; width: 100%; height: 100%; }

/* On narrow screens, headlines wrap to more lines and eat into the space the
   desktop percentage-based positions assume is empty. Pin sparkles to the
   top strip instead (always clear, since kicker + top padding sit above the
   headline) rather than letting them drift into wrapped text. */
@media (max-width: 900px) {
  .hero .deco-spark:nth-of-type(1),
  .page-hero .deco-spark:nth-of-type(1),
  .coverage .deco-spark:nth-of-type(1),
  .contact .deco-spark:nth-of-type(1),
  .roster-section .deco-spark:nth-of-type(1),
  .calendar-hero .deco-spark:nth-of-type(1) {
    top: 14px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
  }
  .hero .deco-spark:nth-of-type(2),
  .page-hero .deco-spark:nth-of-type(2),
  .coverage .deco-spark:nth-of-type(2),
  .roster-section .deco-spark:nth-of-type(2),
  .calendar-hero .deco-spark:nth-of-type(2) {
    top: 40px !important;
    right: 44px !important;
    bottom: auto !important;
    left: auto !important;
  }
  /* keep small screens uncluttered: only the first two sparkles per section show */
  .hero .deco-spark:nth-of-type(n+3),
  .page-hero .deco-spark:nth-of-type(n+3),
  .roster-section .deco-spark:nth-of-type(n+3),
  .calendar-hero .deco-spark:nth-of-type(n+3) {
    display: none;
  }

  /* below 900px the nav becomes a full-width scrolling link strip with no
     empty space left for sparkles, so hide them rather than let them sit on
     top of link text */
  .nav .deco-spark { display: none; }
}

/* ---------- stats band (sub-pages) ---------- */
.stats-band { padding: 10px 0 56px; background: var(--paper); }
.stats-band .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stats-band .stat-tile { align-items: center; text-align: center; }

/* Home page only: stats band sits directly after "What We Do", sharing its
   stone background and dark-card language so the two four-up grids read as
   one connected system instead of a light-card/dark-card mismatch. */
.stats-band-connected { padding-top: 8px; background: var(--paper); }
.stats-band-connected .kicker { justify-content: center; margin-bottom: 28px; }
.stats-band-connected .stat-tile { background: var(--ink); border: none; }
.stats-band-connected .stat-grid > .stat-tile:nth-child(1) { border-top: 3px solid var(--brand-yellow); }
.stats-band-connected .stat-grid > .stat-tile:nth-child(2) { border-top: 3px solid var(--brand-blue); }
.stats-band-connected .stat-grid > .stat-tile:nth-child(3) { border-top: 3px solid var(--brand-pink); }
.stats-band-connected .stat-grid > .stat-tile:nth-child(4) { border-top: 3px solid var(--brand-teal); }
.stats-band-connected .stat-value { color: var(--white); }
.stats-band-connected .stat-label { color: rgba(255,255,255,0.55); }

/* ---------- service grid (partnerships) ---------- */
.service-section { padding: 20px 0 64px; background: var(--paper); }
/* Intro (kicker/heading) matches the page-hero's narrower left edge; the
   service-card grid below stays on the standard wide container. */
.service-section-intro { max-width: 760px; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: 22px 20px;
}
.service-card:nth-child(1) { border-top-color: var(--accent); }
.service-card:nth-child(2) { border-top-color: var(--brand-yellow); }
.service-card:nth-child(3) { border-top-color: var(--brand-blue); }
.service-card:nth-child(4) { border-top-color: var(--brand-pink); }
.service-card:nth-child(5) { border-top-color: var(--brand-teal); }
.service-card:nth-child(6) { border-top-color: var(--ink); }
.service-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform 0.2s ease;
}
.service-icon svg { width: 19px; height: 19px; }
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.06); }
.service-card:nth-child(1) .service-icon { background: var(--accent); color: var(--white); }
.service-card:nth-child(2) .service-icon { background: var(--brand-yellow); color: var(--ink); }
.service-card:nth-child(3) .service-icon { background: var(--brand-blue); color: var(--white); }
.service-card:nth-child(4) .service-icon { background: var(--brand-pink); color: var(--ink); }
.service-card:nth-child(5) .service-icon { background: var(--brand-teal); color: var(--ink); }
.service-card:nth-child(6) .service-icon { background: var(--ink); color: var(--white); }
.service-card h3 { font-size: 17px; margin: 0 0 8px; }
.service-card p { font-size: 13.5px; line-height: 1.6; color: var(--gray-600); margin: 0; }
.service-note {
  margin-top: 34px;
  font-size: 14px;
  color: var(--gray-600);
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.service-note a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }

/* ---------- brand roster / selected work ---------- */
.roster-section { background: var(--ink); padding: 56px 0; position: relative; overflow: hidden; }
.roster-section > .section-inner { position: relative; z-index: 1; }
.roster-section .kicker { color: var(--accent); }
.roster-section-title { color: var(--white); font-size: clamp(24px, 2.8vw, 32px); text-transform: uppercase; max-width: 560px; margin: 0 auto 28px; }
/* Intro (kicker/heading) now centered to match the kicker+heading treatment
   used sitewide (About, What We Do, Straight From The Feed, etc.); the
   Selected Work grid below stays on the standard wide container. */
.roster-section-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.roster-section-intro .kicker { justify-content: center; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  max-width: 100%;
}
/* min-width: 0 overrides the browser's default "auto" min-width on grid
   items, which otherwise sizes a column to its content's min-content width
   and can force the whole row wider than its container — the classic CSS
   Grid overflow bug. Without this, a long unbroken word/date/stat in any
   one card can push the entire 5-up row past the section's right edge. */
.work-card { display: flex; flex-direction: column; min-width: 0; background: var(--ink); border-top: 3px solid var(--accent); transition: background 0.2s ease; }
.work-card:hover { background: var(--ink-soft); }
.work-card:nth-child(1) { border-top-color: var(--accent); }
.work-card:nth-child(2) { border-top-color: var(--brand-yellow); }
.work-card:nth-child(3) { border-top-color: var(--brand-blue); }
.work-card:nth-child(4) { border-top-color: var(--brand-pink); }
.work-card:nth-child(5) { border-top-color: var(--brand-teal); }
.work-media {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 2px, transparent 2px, transparent 14px);
  border-bottom: 1px solid var(--line-dark);
}
.work-media span { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); }
.work-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-media img.work-media-photo--inset { width: 62%; height: 62%; object-fit: contain; margin: 0 auto; }
.work-body { padding: 16px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.work-date { font-family: var(--sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0 0 6px; }
.work-card h3 { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.01em; color: var(--white); margin: 0 0 4px; }
.work-type { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); margin: 0 0 8px; }
/* Capped to 2 lines regardless of source copy length — this is what keeps
   every card (and therefore the whole row) a predictable, compact height so
   all 5 fit within a normal viewport without scrolling further once the
   section is in view. */
.work-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-400);
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-stat { font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--white); margin: 0; padding-top: 10px; border-top: 1px solid var(--line-dark); }



/* ---------- coverage: content-format categories ---------- */
.content-section { background: var(--ink); padding: 90px 0; position: relative; overflow: hidden; }
.content-section > .section-inner { position: relative; z-index: 1; }
.content-section .kicker { color: var(--accent); }
.content-section-title { color: var(--white); font-size: clamp(26px, 3.2vw, 36px); text-transform: uppercase; max-width: 620px; margin-bottom: 14px; }
.content-section-sub { color: var(--gray-400); font-size: 16px; line-height: 1.7; max-width: 560px; margin: 0 0 50px; }
/* Intro (kicker/heading/subhead) matches the page-hero's narrower left edge;
   the category grid below stays on the standard wide container. */
.content-section-intro { max-width: 760px; }

.content-category-block { padding: 40px 0; border-top: 1px solid var(--line-dark); }
.content-category-block:first-of-type { border-top: none; padding-top: 4px; }
/* Category heading matches the page-hero's/section-intro's narrower left
   edge (no more numbered index — these are examples, not a fixed, limited
   list); the example-tile grid below stays on the standard wide container. */
.content-category-intro { max-width: 760px; margin-bottom: 26px; }
.content-category-intro h3 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); color: var(--white); margin: 0 0 10px; text-transform: uppercase; letter-spacing: -0.01em; }
.content-category-intro p { font-size: 15px; line-height: 1.7; color: var(--gray-400); margin: 0; max-width: 480px; }
.category-icon { width: 0.8em; height: 0.8em; flex-shrink: 0; color: var(--accent); }
.content-category-block:nth-of-type(1) .category-icon { color: var(--accent); }
.content-category-block:nth-of-type(2) .category-icon { color: var(--brand-yellow); }
.content-category-block:nth-of-type(3) .category-icon { color: var(--brand-blue); }
.content-category-block:nth-of-type(4) .category-icon { color: var(--brand-pink); }
.content-category-block:nth-of-type(5) .category-icon { color: var(--brand-teal); }

.content-example-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* phone-mockup example tiles */
.phone-tile { display: block; text-decoration: none; color: inherit; }
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 190px;
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;
  background: var(--ink-soft);
  border: 2px solid var(--line-dark);
  border-radius: 26px;
  padding: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.phone-tile:hover .phone-frame { border-color: var(--accent); transform: translateY(-3px); }
.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 16px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 2px, transparent 2px, transparent 14px);
}
.phone-screen img, .phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-caption { margin-top: 14px; max-width: 190px; margin-left: auto; margin-right: auto; text-align: center; }
.phone-caption-title { display: block; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: underline; text-decoration-color: rgba(255,59,48,0.4); margin-bottom: 4px; }
.phone-caption-desc { display: block; font-family: var(--sans); font-size: 12px; color: var(--gray-400); line-height: 1.5; }

/* ---------- coverage: what we cover (compact tag row) ---------- */
.vertical-section { padding: 70px 0 84px; background: var(--paper); }
/* Match .page-hero-inner's narrower (760px) centered box so this section's
   text lines up with the hero's kicker/headline/subhead above it — both use
   the same left/right padding already (40px desktop, 22px mobile), so
   matching max-width is all that's needed for the left edges to align. */
.vertical-section > .section-inner { max-width: 760px; }
.vertical-lead { font-size: 16px; line-height: 1.7; color: var(--gray-600); max-width: 620px; margin: 0 0 28px; }
.vertical-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.vertical-tag {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.vertical-tag:nth-child(1) { border-color: var(--accent); }
.vertical-tag:nth-child(2) { border-color: var(--brand-yellow); }
.vertical-tag:nth-child(3) { border-color: var(--brand-blue); }
.vertical-tag:nth-child(4) { border-color: var(--brand-pink); }
.vertical-tag:nth-child(5) { border-color: var(--brand-teal); }
.vertical-section a.social-link { display: inline-flex; max-width: 220px; border-bottom: 1px solid var(--line); }

/* ---------- about page mission/values ---------- */
.mission-section { padding: 20px 0 36px; background: var(--paper); }
.mission-section .kicker { justify-content: center; }
/* Intro (heading/lead copy/kicker) matches the page-hero's narrower left
   edge; the value-card grid below stays on the standard wide container. */
.mission-section-intro { max-width: 760px; }
.mission-title { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 26px; max-width: 640px; }
.mission-title em { font-style: normal; color: var(--accent); }
.mission-lead { font-size: clamp(17px, 2.1vw, 24px); font-family: var(--sans); font-weight: 500; max-width: 780px; margin: 0 0 50px; line-height: 1.6; color: var(--ink-soft); }
.mission-lead em { font-style: normal; font-weight: 700; color: var(--accent); }
.value-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); margin-top: 8px; }
.value-card { position: relative; background: var(--ink); padding: 32px 22px 30px; overflow: hidden; transition: background 0.2s ease; border-top: 3px solid var(--accent); }
.value-card:nth-child(1) { border-top-color: var(--brand-yellow); }
.value-card:nth-child(2) { border-top-color: var(--brand-blue); }
.value-card:nth-child(3) { border-top-color: var(--brand-pink); }
.value-card:nth-child(4) { border-top-color: var(--brand-teal); }
.value-card:hover { background: var(--accent); border-top-color: var(--accent); }
.value-card h3 { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--white); transition: color 0.2s ease; }
.value-card p { position: relative; z-index: 1; font-size: 14px; line-height: 1.7; color: var(--gray-400); margin: 0; max-width: 220px; transition: color 0.2s ease; }
.value-card:hover h3, .value-card:hover p { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }

  .nav-toggle { display: none; }

  .nav { padding: 14px 16px; gap: 10px; }
  .nav-brand { flex-shrink: 0; }
  .nav-word-mark { height: 27px; }
  .nav-links {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 2px;
    mask-image: linear-gradient(to right, black 92%, transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex-shrink: 0; font-size: 11px; }
  .nav-cta { flex-shrink: 0; padding: 9px 14px; margin-right: 2px; }

  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-copy p { max-width: none; }

  .bento { grid-template-columns: 1fr 1fr; }
  .bento-large { grid-column: span 2; grid-row: span 1; }
  .bento-wide { grid-column: span 2; }

  .contact-grid { grid-template-columns: 1fr; gap: 44px; }

  .service-grid { grid-template-columns: 1fr 1fr; }
  .content-example-grid { grid-template-columns: repeat(2, 1fr); }
  .value-list { grid-template-columns: 1fr 1fr; }
  .calendar-hero { min-height: 74vh; }
  .get-featured-inner { flex-direction: column; align-items: flex-start; }
  .get-featured-band .btn { width: 100%; }
  .secondary-notes { padding: 28px 0; }
  .secondary-notes-grid { grid-template-columns: 1fr; gap: 32px; }

  .stats-band { padding: 10px 0 40px; }
  .stats-band .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-section { padding: 40px 0 56px; }
}

@media (max-width: 560px) {
  .nav, .hero, .utility-bar { padding-left: 22px; padding-right: 22px; }
  .section-inner { padding: 0 22px; }
  .coverage, .cta, .contact { padding: 84px 0; }
  .bento { grid-template-columns: 1fr; }
  .bento-large, .bento-wide { grid-column: span 1; }
  .hero { padding: 60px 22px 50px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }

  .page-hero-inner { padding: 52px 22px 40px; }
  .vertical-section, .mission-section, .roster-section, .content-section { padding: 64px 0; }
  .stats-band { padding: 10px 0 32px; }
  .service-section { padding: 32px 0 48px; }
  .calendar-hero { min-height: 68vh; }
  .calendar-hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn-lg { width: 100%; }
  .get-featured-band { padding: 36px 0; }
  .footer-bottom { justify-content: center; flex-direction: column; text-align: center; }
  .secondary-notes { padding: 24px 0; }
  .service-grid, .value-list { grid-template-columns: 1fr; }
}