/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Dusk & Candlelight -------------------------------------
     Deep water at dusk (Jason's turquoise, taken dark and
     desaturated so it behaves as a neutral), warm plaster ground,
     ember for every action, and the old brass surviving as
     candlelight on hairlines and small marks.
     Legacy token names are kept so the 484 inline var() references
     across the 12 pages inherit the new palette untouched.
     ------------------------------------------------------------ */
  --color-dark:        #1D3A3D;  /* deep teal — the new near-black */
  --color-dark-alt:    #2C5457;  /* elevated dark surface */
  --color-cream:       #FCF6F2;  /* plaster — the default ground */
  --color-cream-alt:   #F3E7E0;  /* shell — alternating band */
  --color-gold:        #C4705F;  /* ember — brand accent & marks */
  --color-gold-light:  #D08670;  /* ember, lifted (hover, tints) */
  --color-gold-dark:   #8F4536;  /* ember, inline links on light */
  --color-white:       #FFFFFF;
  --color-text-dark:   #263A3B;
  --color-text-muted:  #536766;  /* clears AA on every light ground: 4.95:1 on shell */
  --color-border:      #E4DBD5;

  /* New roles introduced by the rebrand */
  --color-action:      #B0594A;  /* filled CTA — white label clears AA at 4.8:1 */
  --color-action-hover:#C4705F;
  --color-candle:      #D9AE7E;  /* the old brass, desaturated */
  --color-candle-dim:  #B98F63;
  --color-teal-mid:    #4F8B87;  /* non-text: icons, rules, focus rings */
  --color-accent-text: #9C4E3E;  /* small accent TEXT on light grounds — ember
                                    itself is only 3.0:1 there and fails AA */
  --color-mist:        #E7EFEC;  /* pale teal third surface */

  /* Channel tokens — every rgba() literal in this file now derives
     from these, so a palette change stays a one-block change. */
  --rgb-accent: 196 112 95;   /* ember */
  --rgb-candle: 217 174 126;  /* candlelight */
  --rgb-dark:    29  58  61;  /* deep teal */
  --rgb-light:  255 255 255;

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Karla', system-ui, -apple-system, sans-serif;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.125rem;
  --size-xl:   1.25rem;
  --size-2xl:  1.5rem;
  --size-3xl:  1.875rem;
  --size-4xl:  2.25rem;
  --size-5xl:  3rem;
  --size-6xl:  3.75rem;
  --size-7xl:  4.5rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;  /* was referenced 24x but never defined — every
                           padding using it resolved to invalid and
                           collapsed to 0 (pre-existing bug) */
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Tighter than the first pass: harder, cleaner edges read as more
     considered and less soft. Nothing on the site is a full pill. */
  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg: 10px;

  /* Warm-tinted, not pure black — a black shadow on a warm ground
     is the fastest way to make a palette look cheap. */
  --shadow-sm: 0 1px 3px   rgb(74 52 44 / 0.06);
  --shadow-md: 0 4px 16px  rgb(74 52 44 / 0.10);
  --shadow-lg: 0 18px 44px -20px rgb(74 52 44 / 0.28);
  --shadow-xl: 0 28px 64px -24px rgb(74 52 44 / 0.34);

  --transition: 0.25s ease;
  --nav-height: 80px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 17px;   /* editorial, not app chrome */
}

body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.75;
  color: var(--color-text-dark);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  /* SOFT rounds Fraunces' terminals, which is where its warmth lives.
     WONK stays at 0: its alternate glyphs (the ampersand especially)
     read as a rendering fault rather than as character. */
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
}

img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select {
  font-family: inherit;
  font-size: var(--size-base);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.link-inline {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.link-inline:hover { color: var(--color-action); }

/* Deep ember is ~1.6:1 on the teal ground; candlelight is 6:1 */
.section--dark .link-inline,
.section--dark-alt .link-inline,
.page-hero .link-inline,
.cta-banner .link-inline { color: var(--color-candle); }
.section--dark .link-inline:hover,
.section--dark-alt .link-inline:hover,
.page-hero .link-inline:hover,
.cta-banner .link-inline:hover { color: var(--color-white); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display-xl {
  font-family: var(--font-display);
  /* Floor lowered from --size-5xl: at the new 17px root that was 51px, and
     Fraunces sets wider than Cormorant, so the hero headline was cramped on
     a small phone. Measured: neither value actually overflows. */
  font-size: clamp(2.25rem, 7.5vw, var(--size-7xl));
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(var(--size-4xl), 6vw, var(--size-6xl));
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-md {
  font-family: var(--font-display);
  font-size: clamp(var(--size-3xl), 4vw, var(--size-5xl));
  font-weight: 300;
  line-height: 1.15;
}

.display-sm {
  font-family: var(--font-display);
  font-size: clamp(var(--size-2xl), 3vw, var(--size-4xl));
  font-weight: 300;
  line-height: 1.2;
}

.heading-lg {
  font-family: var(--font-display);
  font-size: clamp(var(--size-xl), 2.5vw, var(--size-3xl));
  font-weight: 400;
  line-height: 1.3;
}

.heading-md {
  font-family: var(--font-display);
  font-size: clamp(var(--size-lg), 2vw, var(--size-2xl));
  font-weight: 400;
  line-height: 1.3;
}

.overline {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.body-lg { font-size: var(--size-lg); line-height: 1.7; }
.body-sm { font-size: var(--size-sm); line-height: 1.6; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
}

.section--lg {
  padding: var(--space-32) 0;
}

.section--sm {
  padding: var(--space-16) 0;
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.section--dark-alt {
  background: var(--color-dark-alt);
  color: var(--color-white);
}

.section--cream {
  background: var(--color-cream);
  color: var(--color-text-dark);
}

.section--cream-alt {
  background: var(--color-cream-alt);
  color: var(--color-text-dark);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.text-center { text-align: center; }
.text-left { text-align: left; }

/* ============================================================
   BUTTONS
   ============================================================ */
/* Sentence case, pill radius, 1px borders. Uppercase + heavy tracking
   + 2px hard edges read as procurement software; this audience is
   being invited to a conversation, not filling in a purchase order. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  min-height: 48px;                 /* comfortable thumb target */
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--color-action);
  color: var(--color-white);
  border-color: var(--color-action);
}
.btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgb(var(--rgb-accent) / 0.65);
}

.btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--size-lg);
  min-height: 54px;
}

.btn--sm {
  padding: var(--space-3) var(--space-6);
  font-size: var(--size-sm);
  min-height: 40px;
}

/* Secondary actions become quiet underlined links so there is exactly
   one thing on screen that looks like the next step. */
.btn--outline-light,
.btn--outline-dark,
.btn--ghost-gold {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}

.btn--outline-light {
  color: var(--color-candle);
  text-decoration-color: rgb(var(--rgb-candle) / 0.45);
}
.btn--outline-light:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}

.btn--outline-dark {
  color: var(--color-accent-text);
  text-decoration-color: rgb(var(--rgb-accent) / 0.45);
}
.btn--outline-dark:hover {
  color: var(--color-action);
  text-decoration-color: var(--color-action);
}

/* ghost-gold is only ever used on a dark ground, where deep ember is 1.8:1 */
.btn--ghost-gold {
  color: var(--color-candle);
  text-decoration-color: rgb(var(--rgb-candle) / 0.45);
}
.btn--ghost-gold:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}


/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  transition: background var(--transition), box-shadow var(--transition);
}

.nav--transparent {
  background: transparent;
}

.nav--solid {
  background: rgb(var(--rgb-dark) / 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgb(var(--rgb-light) / 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--space-8);
  max-width: 1280px;
  margin: 0 auto;
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.nav__logo span {
  color: var(--color-candle);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-size: var(--size-sm);
  font-weight: 500;
  color: rgb(var(--rgb-light) / 0.8);
  letter-spacing: 0.04em;
  transition: color var(--transition);
  position: relative;
}

.nav__link:hover {
  color: var(--color-white);
}

.nav__link--active {
  color: var(--color-candle);
}

/* Dropdown */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--size-sm);
  font-weight: 500;
  color: rgb(var(--rgb-light) / 0.8);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--transition);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.nav__dropdown-toggle:hover,
.nav__dropdown:hover .nav__dropdown-toggle {
  color: var(--color-white);
}

.nav__dropdown-icon {
  width: 12px;
  height: 12px;
  transition: transform var(--transition);
}

.nav__dropdown:hover .nav__dropdown-icon {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-dark-alt);
  border: 1px solid rgb(var(--rgb-light) / 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  box-shadow: var(--shadow-xl);
}

.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: calc(100% + var(--space-2));
}

.nav__dropdown-item {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-size: var(--size-sm);
  color: rgb(var(--rgb-light) / 0.75);
  transition: all var(--transition);
}

.nav__dropdown-item:hover {
  color: var(--color-candle);
  background: rgb(var(--rgb-accent) / 0.06);
  padding-left: var(--space-8);
}

.nav__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile nav */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition);
  transform-origin: center;
}

.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-dark);
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  flex-direction: column;
  gap: var(--space-4);
}

.nav__mobile.is-open { display: flex; }

.nav__mobile-link {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  color: var(--color-white);
  border-bottom: 1px solid rgb(var(--rgb-light) / 0.08);
}

.nav__mobile-sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
}

.nav__mobile-sublink {
  font-size: var(--size-lg);
  color: rgb(var(--rgb-light) / 0.65);
}

.nav__mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-dark);
  overflow: hidden;
}

/* Spotlight — originates upper-center, brightens toward lower-right where Jason stands */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Candlelight rather than ember: this is stage light falling on a
     teal ground, and the warm/cool split is what sells "dusk". */
  background:
    radial-gradient(
      ellipse 110% 130% at 58% 0%,
      rgb(var(--rgb-candle) / 0.20) 0%,
      rgb(var(--rgb-candle) / 0.11) 35%,
      rgb(var(--rgb-candle) / 0.04) 60%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 70% 80% at 82% 85%,
      rgb(var(--rgb-candle) / 0.26) 0%,
      rgb(var(--rgb-candle) / 0.11) 40%,
      transparent 70%
    );
  z-index: 0;
  pointer-events: none;
}

/* Full-bleed photographic hero. The markup was originally a transparent-PNG
   cutout floating over the ground; with real photography the image spans the
   full width and object-fit: cover crops the height instead. */
.hero__portrait-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the performer in frame as the crop tightens on shorter viewports */
  object-position: 62% 32%;
}

/* Bottom fade so the photo resolves into the section below rather than
   stopping on a hard horizontal line. */
.hero__portrait-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 62%, var(--color-dark) 100%);
}

/* Text-side scrim. Deeper than before because the headline now sits over
   sunlit grass rather than over the flat teal ground. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* The copy column runs to ~48% of the viewport at every width the
       1280px container allows, so the scrim has to hold past that before
       it releases. Measured: it was down to 0.45 at 48%, putting the
       subtext at 2.8:1 over sunlit grass. */
    linear-gradient(
      to right,
      rgb(var(--rgb-dark) / 0.95) 0%,
      rgb(var(--rgb-dark) / 0.92) 30%,
      rgb(var(--rgb-dark) / 0.84) 46%,
      rgb(var(--rgb-dark) / 0.44) 60%,
      rgb(var(--rgb-dark) / 0.12) 75%,
      transparent 88%
    ),
    linear-gradient(to bottom, rgb(var(--rgb-dark) / 0.35) 0%, transparent 30%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  min-width: 0;   /* flex item guard; not fixing a measured overflow today */
  padding: calc(var(--nav-height) + var(--space-16)) var(--space-8) var(--space-24);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.hero__eyebrow {
  /* Lighter than --color-candle: over the full-bleed photo the standard
     candlelight measures 3.9:1, this measures 4.9:1. */
  color: #EBC79A;
  margin-bottom: var(--space-5);
}

.hero__eyebrow-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
  margin: 0 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.6;
}

.hero__headline {
  color: var(--color-white);
  max-width: 960px;
  margin-bottom: var(--space-6);
}

.hero__headline em {
  font-style: italic;
  color: var(--color-gold-light);   /* ember, lifted: 3.9:1 on teal, and large
                                       display type only needs 3:1 */
}

.hero__subtext {
  color: rgb(var(--rgb-light) / 0.72);
  font-size: var(--size-lg);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: var(--space-10);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__actions .btn {
  min-width: 220px;
  justify-content: center;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgb(var(--rgb-light) / 0.62);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgb(var(--rgb-light) / 0.4), transparent);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header--left {
  text-align: left;
  margin-bottom: var(--space-12);
}

.section-header .overline {
  color: var(--color-accent-text);
  margin-bottom: var(--space-4);
}

.section-header--dark .overline {
  color: var(--color-candle);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  font-size: var(--size-lg);
  line-height: 1.7;
}

.section-header--dark h2 {
  color: var(--color-white);
}

.section-header--dark p {
  color: rgb(var(--rgb-light) / 0.65);
}

/* ============================================================
   DIFFERENTIATORS / PILLARS
   ============================================================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.pillar-card {
  padding: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}



.pillar-card h3 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--color-text-dark);
}

.pillar-card p {
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  line-height: 1.7;
}

/* Dark variant */
.pillar-card--dark {
  background: rgb(var(--rgb-light) / 0.04);
  border-color: rgb(var(--rgb-light) / 0.08);
}

.pillar-card--dark:hover {
  background: rgb(var(--rgb-accent) / 0.06);
  border-color: var(--color-candle);
}

.pillar-card--dark h3 {
  color: var(--color-white);
}

.pillar-card--dark p {
  color: rgb(var(--rgb-light) / 0.6);
}

/* Coverage note — horizontal callout below the pillar grid */
.coverage-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-7) var(--space-8);
  border: 1px solid rgb(var(--rgb-accent) / 0.25);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: rgb(var(--rgb-accent) / 0.04);
}



.coverage-note__body h4 {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.coverage-note__body p {
  color: rgb(var(--rgb-light) / 0.6);
  font-size: var(--size-sm);
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   EVENT TYPE CARDS
   ============================================================ */
.event-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  group: true;
}

.event-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  filter: brightness(0.82);
}

.event-card:hover .event-card__bg {
  transform: scale(1.05);
}

.event-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--rgb-dark) / 0.88) 4%,
    rgb(var(--rgb-dark) / 0.30) 46%,
    transparent 76%
  );
}

.event-card__content {
  position: relative;
  z-index: 1;
  padding: var(--space-8);
}

/* Candlelight, not ember: now that the photography is no longer crushed
   to half brightness, a mid-tone accent disappears into it. */
.event-card__tag {
  display: inline-block;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-candle);
  text-shadow: 0 1px 6px rgb(var(--rgb-dark) / 0.85);
  margin-bottom: var(--space-3);
}

.event-card h3 {
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: 400;
  color: var(--color-white);
  text-shadow: 0 1px 10px rgb(var(--rgb-dark) / 0.7);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.event-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-candle);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--transition);
}

.event-card:hover .event-card__link {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(16.67% + var(--space-4));
  right: calc(16.67% + var(--space-4));
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), var(--color-border), var(--color-gold));
}

.step {
  text-align: center;
  padding: 0 var(--space-4);
}

.step__number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  color: var(--color-gold);
  background: var(--color-cream);
  position: relative;
  z-index: 1;
}

.step h3 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--color-text-dark);
}

.step p {
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  line-height: 1.7;
}

/* ============================================================
   PERFORMANCE CLIPS
   ============================================================ */
.clips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.clip-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-dark-alt);
}

.clip-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  opacity: 0.88;
}

.clip-thumb:hover .clip-thumb__img {
  transform: scale(1.04);
  opacity: 0.9;
}

.clip-thumb__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(var(--rgb-dark) / 0.3);
  transition: background var(--transition);
}

.clip-thumb:hover .clip-thumb__overlay {
  background: rgb(var(--rgb-dark) / 0.15);
}

.clip-thumb__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(var(--rgb-accent) / 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  margin-bottom: var(--space-3);
}

.clip-thumb:hover .clip-thumb__play {
  background: var(--color-gold);
  transform: scale(1.1);
}

.clip-thumb__play svg {
  width: 20px;
  height: 20px;
  color: var(--color-dark);
  margin-left: 3px;
}

.clip-thumb__label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Placeholder clip */
.clip-placeholder {
  background: linear-gradient(135deg, var(--color-dark-alt) 0%, var(--color-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.clip-placeholder .clip-thumb__label {
  color: rgb(var(--rgb-light) / 0.4);
}

/* ============================================================
   ABOUT VIDEO PLACEHOLDER
   ============================================================ */
.about-video-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.about-video-placeholder {
  aspect-ratio: 16 / 9;
  background: rgb(var(--rgb-light) / 0.03);
  border: 1px solid rgb(var(--rgb-light) / 0.08);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.about-video-placeholder__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(var(--rgb-accent) / 0.12);
  border: 1px solid rgb(var(--rgb-accent) / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-candle);
}

.about-video-placeholder__icon svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.about-video-placeholder p {
  font-size: var(--size-sm);
  color: rgb(var(--rgb-light) / 0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   REELS CAROUSEL
   ============================================================ */
.reels-stage {
  position: relative;
  margin: 0 0 var(--space-6);
}

.reels-overflow {
  overflow: hidden;
  padding: 20px 0;
  position: relative;
}

.reels-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  z-index: 10;
  pointer-events: none;
}

.reels-fade--left {
  left: 0;
  background: linear-gradient(to right, var(--color-dark) 0%, transparent 100%);
}

.reels-fade--right {
  right: 0;
  background: linear-gradient(to left, var(--color-dark) 0%, transparent 100%);
}

.reels-track {
  display: flex;
  gap: 16px;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.reel-card {
  flex: 0 0 300px;
  cursor: pointer;
  transform: scale(0.88);
  opacity: 0.5;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

.reel-card.is-active {
  transform: scale(1);
  opacity: 1;
}

.reel-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #12292B;   /* deep teal, one step under --color-dark */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.reel-card.is-active .reel-card__frame {
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.75), 0 0 0 1px rgb(var(--rgb-accent) / 0.2);
}

.reel-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-card__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    transparent 35%,
    transparent 55%,
    rgba(0, 0, 0, 0.65) 100%
  );
  transition: opacity 0.25s ease;
}

.reel-card__ui.is-playing {
  background: transparent;
  opacity: 0;
}

.reel-card__frame:hover .reel-card__ui.is-playing {
  opacity: 0.75;
}

.reel-card__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgb(var(--rgb-accent) / 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  pointer-events: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.reel-card__frame:hover .reel-card__play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--color-gold);
}

.reel-card__play-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.reel-card__play-btn .icon-play { margin-left: 3px; }
.reel-card__play-btn .icon-pause { display: none; }

.reel-card__ui.is-playing .reel-card__play-btn .icon-play  { display: none; }
.reel-card__ui.is-playing .reel-card__play-btn .icon-pause { display: block; }

.reel-card__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px;
}

.reel-card__title {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 500;
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.02em;
}

.reels-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--rgb-dark) / 0.82);
  border: 1px solid rgb(var(--rgb-accent) / 0.3);
  color: var(--color-candle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  backdrop-filter: blur(4px);
}

.reels-arrow:hover:not(:disabled) {
  background: rgb(var(--rgb-accent) / 0.18);
  border-color: var(--color-candle);
}


.reels-arrow svg { width: 16px; height: 16px; flex-shrink: 0; }

.reels-arrow--prev { left: 72px; }
.reels-arrow--next { right: 72px; }

.reels-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-10);
}

.reels-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--rgb-light) / 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.reels-dot.is-active {
  background: var(--color-gold);
  transform: scale(1.4);
}

.reels-dot:hover:not(.is-active) {
  background: rgb(var(--rgb-light) / 0.5);
}

@media (max-width: 560px) {
  .reel-card { flex: 0 0 240px; }
  .reels-fade { width: 80px; }
  .reels-arrow--prev { left: 8px; }
  .reels-arrow--next { right: 8px; }
}

@media (max-width: 380px) {
  .reel-card { flex: 0 0 210px; }
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-backdrop.is-open .modal {
  transform: scale(1);
}

.modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  color: rgb(var(--rgb-light) / 0.6);
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition);
  cursor: pointer;
}

.modal__close:hover { color: var(--color-white); }

.modal__video-wrap {
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.modal__video-wrap video,
.modal__video-wrap iframe {
  width: 100%;
  height: 100%;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.testimonial-card {
  padding: var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: all var(--transition);
}

/* Pages that carry a single real review shouldn't leave it stranded in a
   third of a three-column grid. */
.testimonial-card:only-child {
  grid-column: 1 / -1;
  max-width: 660px;
  margin: 0 auto;
}

/* Per-review source link, inside the card's meta line */
.testimonial-card__source {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgb(var(--rgb-dark) / 0.3);
}
.testimonial-card__source:hover { color: var(--color-accent-text); }

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}


.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  line-height: 1.6;
  color: var(--color-text-dark);
  flex: 1;
}

.testimonial-card__quote::before {
  content: '\201C';
  color: var(--color-gold);
  font-size: var(--size-3xl);
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: var(--space-1);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-cream-alt);
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-card__name {
  font-weight: 600;
  font-size: var(--size-sm);
  color: var(--color-text-dark);
}

.testimonial-card__event {
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* YouTube testimonials */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.yt-embed-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-dark-alt);
}

.yt-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   PERFORMANCE CHAPTER (top anchor for both parts)
   ============================================================ */
.perf-chapter {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.perf-chapter .overline {
  color: var(--color-candle);
  margin-bottom: var(--space-3);
  display: block;
}

.perf-chapter__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--size-3xl), 4.5vw, var(--size-5xl));
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* Numbered chapter marker (01 — Label) */
.perf-marker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.perf-marker__num {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-style: italic;
  color: var(--color-candle);
  font-weight: 500;
  line-height: 1;
}

.perf-marker__line {
  display: block;
  width: 28px;
  height: 1px;
  background: rgb(var(--rgb-accent) / 0.5);
}

.perf-marker__label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-candle);
  line-height: 1;
}

/* ============================================================
   PERFORMANCE HERO (highlight reel — copy + video)
   ============================================================ */
.perf-hero {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-12);
  align-items: center;
}

.perf-hero__copy {
  max-width: 480px;
}

.perf-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--size-2xl), 3vw, var(--size-4xl));
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.perf-hero__sub {
  color: rgb(var(--rgb-light) / 0.7);
  font-size: var(--size-base);
  line-height: 1.7;
}

/* Part 02 intro — left-aligned, matches Part 01's flow */
.perf-reels-intro {
  max-width: 600px;
  margin: var(--space-20) 0 var(--space-10);
}

.perf-hero__embed {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-dark-alt);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.perf-hero__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   FULL BAND CALLOUT
   ============================================================ */
.band-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.band-callout__visual {
  position: relative;
  min-height: 400px;
  background: var(--color-dark-alt);
}

.band-callout__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* This panel owns its own dark background, so it must own its text colour
   too — it previously inherited white from the section around it. */
.band-callout__content {
  background: var(--color-dark-alt);
  color: var(--color-white);
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

.band-callout .overline {
  color: #EBC79A;   /* dark-alt is a lighter ground than --color-dark */
}

.band-callout__content h2 { color: var(--color-white); }
.band-callout__content p  { color: rgb(var(--rgb-light) / 0.72); }

/* The panel is a flex column, so the CTA was stretching edge to edge. */
.band-callout__content .btn {
  align-self: flex-start;
}

.band-callout h2 {
  color: var(--color-white);
}

.band-callout p {
  color: rgb(var(--rgb-light) / 0.65);
  line-height: 1.7;
}

/* ============================================================
   CONSULTATION FORM
   ============================================================ */
/* The highest-intent moment on the site. It was a dark card with 5%
   translucent-white inputs — a developer console at the exact point a
   bride decides whether to reach out. Inverted to light. */
.form-section {
  background: var(--color-cream-alt);
}

/* The markup carries .section-header--dark here; neutralise it in CSS
   rather than editing two pages of HTML. */
.form-section .section-header--dark h2 { color: var(--color-text-dark); }
.form-section .section-header--dark p  { color: var(--color-text-muted); }
.form-section .section-header--dark .overline { color: var(--color-gold-dark); }

.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: #FDFAF8;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-dark);
  font-size: var(--size-base);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #A6A09B;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 3px rgb(var(--rgb-accent) / 0.16);
  background: var(--color-white);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(176,89,74,0.75)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-group select option {
  background: var(--color-white);
  color: var(--color-text-dark);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit {
  margin-top: var(--space-8);
  text-align: center;
}

.form-note {
  margin-top: var(--space-3);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  padding: var(--space-24) 0;
  text-align: center;
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgb(var(--rgb-accent) / 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner .overline {
  color: var(--color-candle);
  margin-bottom: var(--space-4);
}

.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}

.cta-banner p {
  color: rgb(var(--rgb-light) / 0.6);
  max-width: 480px;
  margin: 0 auto var(--space-10);
  font-size: var(--size-lg);
  line-height: 1.7;
}

.cta-banner__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #142B2E;   /* footer: deepest teal */
  color: rgb(var(--rgb-light) / 0.5);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgb(var(--rgb-light) / 0.06);
}

.footer__brand .nav__logo {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.footer__brand p {
  font-size: var(--size-sm);
  line-height: 1.7;
  max-width: 280px;
}

.footer__heading {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--rgb-light) / 0.62);
  margin-bottom: var(--space-5);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--size-sm);
  color: rgb(var(--rgb-light) / 0.5);
  transition: color var(--transition);
}

.footer__link:hover { color: var(--color-candle); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--size-xs);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__legal a {
  color: inherit;
  transition: color var(--transition);
}
.footer__legal a:hover { color: var(--color-candle); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: calc(var(--nav-height) + var(--space-20)) 0 var(--space-20);
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.42;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(var(--rgb-dark) / 0.5), rgb(var(--rgb-dark) / 0.85));
}

.page-hero__content {
  position: relative;
  z-index: 1;
}

.page-hero .overline { color: var(--color-candle); margin-bottom: var(--space-4); }
.page-hero h1 { color: var(--color-white); margin-bottom: var(--space-5); }
.page-hero p { color: rgb(var(--rgb-light) / 0.7); max-width: 560px; font-size: var(--size-lg); line-height: 1.7; margin-bottom: var(--space-8); }

/* ============================================================
   ABOUT PAGE - INSTRUMENTS
   ============================================================ */
.instrument-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.instrument-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}


.instrument-item h4 {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.instrument-item p {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================================
   EVENT COORDINATOR PAGE SPECIFIC
   ============================================================ */
.ec-benefit {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.ec-benefit:last-child { border-bottom: none; }

.ec-benefit__number {
  font-family: var(--font-display);
  font-size: var(--size-5xl);
  font-weight: 400;
  color: var(--color-gold);
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
  width: 60px;
}

.ec-benefit h3 {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.ec-benefit p {
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Quick-share inline row inside form section header */
.ec-quick-share {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.ec-quick-share__link {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.ec-quick-share__link:hover {
  color: var(--color-gold-light);
}

.ec-quick-share__divider {
  color: rgb(var(--rgb-dark) / 0.72);
}

/* Stats */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

.stat-item {
  text-align: center;
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: clamp(var(--size-4xl), 5vw, var(--size-6xl));
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-item__label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.thank-you-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-dark);
}

.thank-you-card {
  text-align: center;
  padding: var(--space-16);
}


.thank-you-card h1 { color: var(--color-white); margin-bottom: var(--space-4); }
.thank-you-card p { color: rgb(var(--rgb-light) / 0.6); font-size: var(--size-lg); max-width: 480px; margin: 0 auto var(--space-10); line-height: 1.7; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.gold { color: var(--color-gold); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.pt-0 { padding-top: 0 !important; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--color-border); margin: var(--space-12) 0; }
.divider--dark { background: rgb(var(--rgb-light) / 0.07); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   RESPONSIVE — TABLET (< 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { gap: var(--space-6); }
  .steps::before { display: none; }
  .clips-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .band-callout { grid-template-columns: 1fr; }
  .band-callout__visual { min-height: 260px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --nav-height: 68px; }

  .nav__links,
  .nav__ctas { display: none; }
  .nav__hamburger { display: flex; }

  /* Show the photo on mobile now that it's real photography rather than a
     cutout. The copy spans nearly the full width here, so the desktop
     left-to-right scrim can't protect it — use a near-uniform vertical one. */
  .hero__portrait-wrap { display: block; }
  .hero__portrait { object-position: 58% 30%; }
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgb(var(--rgb-dark) / 0.88) 0%,
      rgb(var(--rgb-dark) / 0.86) 42%,
      rgb(var(--rgb-dark) / 0.90) 100%
    );
  }
  .hero__content { padding-left: var(--space-5); padding-right: var(--space-5); }
  .hero__actions { flex-direction: column; align-items: flex-start; }

  .pillar-grid { grid-template-columns: 1fr; }
  .coverage-note { flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .clips-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .yt-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .perf-hero { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; }
  .perf-hero__copy { max-width: 100%; margin: 0 auto; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; text-align: center; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .band-callout__content { padding: var(--space-10) var(--space-6); }
  .form-card { padding: var(--space-8) var(--space-5); }
  .nav__inner { padding: 0 var(--space-5); }
  .container { padding: 0 var(--space-5); }
  .section { padding: var(--space-16) 0; }
  .section--lg { padding: var(--space-20) 0; }
  .ec-benefit { flex-direction: column; gap: var(--space-3); }
  .ec-benefit__number { width: auto; }
}