/* ============================================================
   ROCKET CITY VET CONFERENCE
   Design tokens + base + components
   Voice: warm vintage Americana, hospitality-driven, anti-clinical
   ============================================================ */

:root {
  /* Colors pulled from the logo's sunset bands */
  --sunset-cream:        #F4E8D0;
  --sunset-cream-soft:   #FBF5E8;
  --sunset-cream-deep:   #ECDEBE;
  --sunset-orange:       #E89A4A;
  --sunset-orange-deep:  #D88533;
  --sunset-coral:        #D8514A;
  --sunset-red:          #B83A3A;
  --sunset-red-deep:     #9E2F2F;
  --twilight-blue:       #2D5B7C;
  --twilight-blue-soft:  rgba(45, 91, 124, 0.10);
  --deep-navy:           #1B2C42;
  --ink:                 #0E1014;
  --paper:               var(--sunset-cream);
  --paper-light:         var(--sunset-cream-soft);
  --text:                var(--deep-navy);
  --text-soft:           rgba(27, 44, 66, 0.75);
  /* Was 0.55, which computed to 3.24:1 on cream and failed WCAG AA 1.4.3.
     0.70 = 4.94:1 on --sunset-cream, 5.21:1 on --sunset-cream-soft. */
  --text-muted:          rgba(27, 44, 66, 0.70);

  /* WCAG AA text variants of the sunset accents. The bright versions are
     for FILLS and for use on dark backgrounds; as text on cream they fail
     badly (--sunset-orange-deep = 2.36:1, --sunset-coral = 3.33:1).
     --sunset-orange-text = 4.74:1 on cream, 5.29:1 on cream-soft.
     Do not use these two as backgrounds; do not use the bright ones as
     text on a light surface. */
  --sunset-orange-text:  #9A5415;

  /* Typography */
  --font-display: 'Coustard', 'Bree Serif', 'Rockwell', 'Georgia', serif;
  --font-quote:   'Fraunces', 'Times New Roman', Georgia, serif;
  --font-script:  'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --container:        1240px;
  --container-tight:   860px;
  --container-narrow:  640px;

  /* Spacing */
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  2.5rem;
  --s-6:  3rem;
  --s-8:  4rem;
  --s-10: 5rem;
  --s-12: 6rem;
  --s-16: 8rem;
  --s-20: 10rem;

  /* Effects */
  --shadow-soft:   0 2px 12px rgba(27, 44, 66, 0.05);
  --shadow-card:   0 10px 28px rgba(27, 44, 66, 0.07);
  --shadow-card-h: 0 20px 48px rgba(27, 44, 66, 0.12);
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  16px;
  --radius-xl:  28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Reset / Base ----- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
body.is-ready { opacity: 1; }

img, svg { display: block; max-width: 100%; height: auto; }

/* Include wrappers shouldn't form their own block — keeps position:sticky on
   the injected <header> attached to body, not the wrapper div. */
[data-include] { display: contents; }

/* Skip link (WCAG 2.4.1) — first focusable element, hidden until focused. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 2000;
  padding: 10px 18px;
  background: var(--deep-navy);
  color: var(--sunset-cream-soft);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 6px;
  transition: top 0.18s var(--ease);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--sunset-orange);
  outline-offset: 2px;
}
/* Main is focused programmatically via the skip link; no visible ring needed. */
#main:focus { outline: none; }

/* Site-wide focus ring. Until this existed, every focusable element except the
   skip link relied on the browser's default ring. It rendered in Chromium, but
   it was an untested dependency in Firefox and Safari, and on the navy header
   and dark sections there was no guarantee of it being visible at all. Orange
   holds up on both the cream surfaces and the navy ones. */
:focus-visible {
  outline: 2px solid var(--sunset-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

a {
  color: var(--twilight-blue);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--sunset-coral); text-decoration: underline; }

/* Address → Google Maps link. Inherits the surrounding text color so the
   venue/address keeps its design treatment (footer, hero "Where" blocks);
   only reveals it's clickable on hover. display:block keeps the conference
   meta link wrapping its two stacked spans without breaking the layout. */
.map-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.map-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--sunset-orange); color: var(--deep-navy); }

/* ----- Typography ----- */

.h-display,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.06;
  color: var(--deep-navy);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.8rem); letter-spacing: -0.012em; line-height: 1.04; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.01em; line-height: 1.06; }
h3 {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--deep-navy);
  margin: 0 0 0.5em;
}
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 0.6em; color: var(--twilight-blue); }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--sunset-coral);
  /* Fraunces italic accent — readable display serif replacing the previous
     cursive (Birthstone), which clients flagged as hard to read / clipped.
     Normal x-height means no size bump is needed to match neighbouring type. */
  font-style: italic;
  font-size: 1em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sunset-orange-text);
  margin: 0 0 var(--s-3);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sunset-coral);
  margin: 0 0.5em 0.15em 0;
  vertical-align: middle;
}

.lede {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 38em;
}

.muted { color: var(--text-muted); }

/* ----- Layout ----- */

.container        { width: 100%; max-width: var(--container);        margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.container-tight  { width: 100%; max-width: var(--container-tight);  margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.section {
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  position: relative;
  isolation: isolate;
}
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--cream { background: var(--paper); }
.section--cream-soft { background: var(--paper-light); }
.section--navy { background: var(--deep-navy); color: var(--sunset-cream-soft); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--sunset-cream-soft); }
.section--navy .lede, .section--navy .muted { color: rgba(244, 232, 208, 0.78); }
.section--navy a:not(.btn) { color: var(--sunset-orange); }
.section--navy a:not(.btn):hover { color: var(--sunset-cream-soft); }

.section > .container,
.section > .container-tight,
.section > .container-narrow {
  position: relative;
  z-index: 1;
}

/* ----- Horizon stripe motif (the visual thread between sections) ----- */

.horizon-stripe {
  display: flex;
  height: 6px;
  width: 100%;
  margin-top: clamp(1rem, 3vw, 2.5rem);
}
.horizon-stripe > span { flex: 1; }
.horizon-stripe > :nth-child(1) { background: var(--sunset-cream-deep); }
.horizon-stripe > :nth-child(2) { background: var(--sunset-orange); }
.horizon-stripe > :nth-child(3) { background: var(--sunset-coral); }
.horizon-stripe > :nth-child(4) { background: var(--sunset-red); }
.horizon-stripe > :nth-child(5) { background: var(--twilight-blue); }
.horizon-stripe--thin { height: 4px; }
.horizon-stripe--thick { height: 10px; }
/* Header stripe sits flush at the very top — kill the inherited top margin
   that was exposing a cream/beige strip above the header. */
.site-header .horizon-stripe { margin-top: 0; }
/* The stripe's first band is the pale --sunset-cream-deep. Anywhere the stripe
   meets a dark element (header, footer, navy sections, overlay-bands, the video
   sections) that band reads as a stray "beige strip." Drop it GLOBALLY so every
   horizon-stripe runs orange -> coral -> red -> blue, consistently, everywhere. */
.horizon-stripe > :nth-child(1) { display: none; }
/* Inter-section divider stripes (direct children of <body>) sit FLUSH against
   the section above. Those sections already carry 64px+ bottom padding, so the
   old margin-top was redundant AND exposed a sliver of the darker body cream
   (#F4E8D0) wherever the section above was the lighter cream-soft (#FBF5E8) —
   that sliver read as a "weird beige strip" framing the stripe. */
body > .horizon-stripe { margin-top: 0; }
/* Footer stripe is a sibling of .site-footer INSIDE the injected include, so its
   actual DOM parent is the [data-include] wrapper, not <body> — neither the rule
   above nor the header rule catches it. Its inherited margin-top exposed the cream
   page background as a beige strip above the colored bands. Flush it. */
.horizon-stripe--flush { margin-top: 0; }

/* ----- Header ----- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(27, 44, 66, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(244, 232, 208, 0.10);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}
.site-header__logo img {
  height: 148px;
  width: auto;
  transition: height 0.3s var(--ease);
  display: block;
}
@media (max-width: 640px) {
  .site-header__logo img { height: 92px; }
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--sunset-cream-soft);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
}
.site-nav a:hover { color: var(--sunset-orange); }
.site-nav a.is-active { color: var(--sunset-orange); }
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 5px;
  height: 5px;
  background: var(--sunset-orange);
  border-radius: 50%;
}
.site-nav__cta { margin-left: var(--s-1); }

.site-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px; height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.site-nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--sunset-cream-soft);
  position: relative;
}
.site-nav-toggle span::before,
.site-nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--sunset-cream-soft);
}
.site-nav-toggle span::before { top: -7px; }
.site-nav-toggle span::after  { top:  7px; }

@media (max-width: 880px) {
  .site-nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--deep-navy);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) 0;
    border-bottom: 1px solid rgba(244, 232, 208, 0.10);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    /* opacity+pointer-events alone still left the links in the tab order:
       tabbing from the hamburger landed on four invisible nav links with no
       focus ring anywhere on screen (WCAG 2.4.3 / 2.4.7). visibility:hidden
       takes them out of the tab order; it is transitioned with a delay so
       the fade still plays on close. */
    visibility: hidden;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
                visibility 0s linear 0.25s;
  }
  .site-nav a {
    padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
    border-bottom: 1px solid rgba(244, 232, 208, 0.10);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
                visibility 0s linear 0s;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1;
  padding: 0.95rem 1.55rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Cream on --sunset-coral computed to 3.72:1 and failed WCAG AA 1.4.3.
   --sunset-red gives 5.22:1 with the same palette family. */
.btn--primary {
  background: var(--sunset-red);
  color: var(--sunset-cream-soft);
}
.btn--primary:hover {
  background: var(--sunset-red-deep);
  color: var(--sunset-cream-soft);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--deep-navy);
  border-color: var(--deep-navy);
}
.btn--ghost:hover {
  background: var(--deep-navy);
  color: var(--sunset-cream-soft);
  text-decoration: none;
}

.btn--orange {
  background: var(--sunset-orange);
  color: var(--deep-navy);
}
.btn--orange:hover {
  background: var(--sunset-orange-deep);
  color: var(--deep-navy);
  text-decoration: none;
}

.btn--navy {
  background: var(--deep-navy);
  color: var(--sunset-cream-soft);
}
.btn--navy:hover {
  background: var(--ink);
  color: var(--sunset-cream-soft);
  text-decoration: none;
}

.btn--sm { padding: 0.65rem 1.2rem; font-size: 0.88rem; }
.btn--lg { padding: 1.15rem 2rem;   font-size: 1.05rem; }

.btn.is-pending {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--twilight-blue-soft);
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-pending::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sunset-orange);
  display: inline-block;
}

/* ----- Hero (base, used by other pages) ----- */

.hero {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  background: var(--paper);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
}
.hero__content { position: relative; z-index: 2; }
.hero h1 .script {
  display: inline-block;
  color: var(--sunset-coral);
  font-size: 1em;
}
.hero__lede { margin: var(--s-3) 0 var(--s-5); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__media img {
  max-width: 480px;
  width: 100%;
  filter: drop-shadow(0 30px 40px rgba(27, 44, 66, 0.25));
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--twilight-blue-soft);
}
.hero__meta-item .hero__meta-label { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.3em; color: var(--sunset-orange-text); }
.hero__meta-item p { font-size: 0.98rem; color: var(--text); margin: 0; font-weight: 500; }

/* ----- Cinematic hero (homepage, full-bleed video) ----- */

.hero.hero--cinematic {
  position: relative;
  min-height: clamp(640px, 92vh, 900px);
  padding: 0;
  background: var(--deep-navy);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.hero--cinematic .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: saturate(0.85) contrast(1.05);
}
/* On phones the landscape video crops to a tall portrait slice — centering it
   shows mostly empty wall with the attendees buried at the bottom. Shift the
   focal point right so a subject's face frames the hero. */
@media (max-width: 760px) {
  .hero--cinematic .hero__bg { object-position: 68% center; }
}
.hero--cinematic .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Raised from 0.62. Text over video was measured against the real rendered
     pixels across the clip: the meta line and the map link dropped as low as
     2.4:1 on bright frames. 0.74 holds every hero string above AA on the
     worst frame, not just the average one. */
  background: rgba(15, 29, 47, 0.74);
}
.hero--cinematic .hero__scrim::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: rgba(15, 29, 47, 0.30);
}
.hero--cinematic .container.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: none;
  gap: 0;
  align-items: stretch;
}
.hero--cinematic .hero__content {
  max-width: 820px;
  color: var(--sunset-cream-soft);
}
.hero--cinematic .hero__content h1 {
  color: var(--sunset-cream);
  font-weight: 400;
  font-size: clamp(2.7rem, 7.2vw, 5.8rem);
  letter-spacing: -0.012em;
  line-height: 1.02;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  margin-bottom: var(--s-4);
}
.hero--cinematic .hero__content h1 .script {
  color: var(--sunset-orange);
  font-size: 1em;
  display: inline-block;
}
.hero--cinematic .hero__lede {
  color: rgba(244, 232, 208, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.40);
  max-width: 34em;
  margin: 0 0 var(--s-5);
}
/* Orange on the video scrim measured 4.07:1 and failed AA. Cream carries the
   line; the dots stay orange so the accent colour is still present. */
.hero--cinematic .tagline.tagline--light {
  color: var(--sunset-cream-soft);
}
.hero--cinematic .tagline.tagline--light .dot {
  background: var(--sunset-orange);
}
.hero--cinematic .hero__ctas {
  margin-top: 0;
}
.hero--cinematic .hero__meta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(244, 232, 208, 0.22);
  display: flex;
  gap: clamp(1.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.hero--cinematic .hero__meta-item .hero__meta-label {
  color: var(--sunset-orange);
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}
.hero--cinematic .hero__meta-item p {
  color: var(--sunset-cream-soft);
  font-size: 1rem;
}
.hero--cinematic .hero__meta-item .muted {
  /* 0.55 measured 3.36:1 over the video. 0.82 clears AA on the worst frame. */
  color: rgba(244, 232, 208, 0.82);
}
.hero--cinematic .horizon-stripe {
  position: relative;
  z-index: 3;
  margin-top: 0;
}

.btn--cinema-ghost {
  background: rgba(244, 232, 208, 0.10);
  color: var(--sunset-cream-soft);
  border-color: rgba(244, 232, 208, 0.85);
}
.btn--cinema-ghost:hover {
  background: var(--sunset-cream-soft);
  color: var(--deep-navy);
  text-decoration: none;
  border-color: var(--sunset-cream-soft);
}

/* Pending state on dark backgrounds — "save the date" stamp styling, not a disabled control */
.site-header .btn.is-pending,
.hero--cinematic .btn.is-pending,
.section--navy .btn.is-pending {
  background: transparent;
  color: var(--sunset-orange);
  border-color: var(--sunset-orange);
  border-width: 1.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.62rem 1.05rem;
  gap: 0.5rem;
}
.site-header .btn.is-pending::before,
.hero--cinematic .btn.is-pending::before,
.section--navy .btn.is-pending::before {
  width: 7px;
  height: 7px;
  background: var(--sunset-orange);
  box-shadow: 0 0 0 0 rgba(232, 154, 74, 0.55);
  animation: pending-pulse 2.2s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(232, 154, 74, 0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 10px rgba(232, 154, 74, 0);     transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0    rgba(232, 154, 74, 0);     transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .btn.is-pending::before,
  .hero--cinematic .btn.is-pending::before,
  .section--navy .btn.is-pending::before { animation: none; }
}

@media (max-width: 640px) {
  .hero.hero--cinematic { min-height: 86vh; }
  .hero--cinematic .hero__meta {
    gap: var(--s-3) var(--s-4);
    margin-top: var(--s-6);
  }
  .hero--cinematic .hero__meta-item { flex: 1 1 45%; min-width: 130px; }
  .hero--cinematic .hero__content h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
}

/* ----- Cards ----- */

.cards {
  display: grid;
  gap: var(--s-4);
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 760px) {
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--sunset-cream-soft);
  border: 1px solid var(--twilight-blue-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  position: relative;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(27, 44, 66, 0.14);
  border-color: rgba(216, 81, 74, 0.35);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card__num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--sunset-coral);
  font-weight: 600;
  margin: 0 0 var(--s-2);
  display: block;
  letter-spacing: 0.02em;
}
.card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-3);
  color: var(--sunset-coral);
}
.card--feature {
  background: var(--deep-navy);
  color: var(--sunset-cream-soft);
  border-color: transparent;
}
.card--feature h3, .card--feature .card__num { color: var(--sunset-cream-soft); }
.card--feature p { color: rgba(244, 232, 208, 0.82); }
.card--feature:hover { border-color: transparent; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.40); }

/* ============================================================
   AMENITY GRID (homepage "didn't have to ask for" — 3-col layout)
   Each cell is a type-stack: label + headline + rule + body.
   No boxes. Hairline rules between cells via grid borders.
============================================================ */

.amenity-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(45, 91, 124, 0.20);
}
.amenity-grid__cell {
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(45, 91, 124, 0.20);
  border-right: 1px solid rgba(45, 91, 124, 0.20);
  display: flex;
  flex-direction: column;
}
.amenity-grid__cell:first-child,
.amenity-grid__cell:nth-child(3n + 1) {
  padding-left: 0;
}
.amenity-grid__cell:nth-child(3n) {
  padding-right: 0;
  border-right: 0;
}
.amenity-grid__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sunset-orange-text);
  margin: 0 0 var(--s-3);
}
.amenity-grid__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin: 0 0 var(--s-2);
  color: var(--deep-navy);
  text-wrap: balance;
}
.amenity-grid__rule {
  width: 32px;
  height: 2px;
  background: var(--sunset-coral);
  margin: 0 0 var(--s-3);
  transition: width 0.45s var(--ease), background 0.3s var(--ease);
}
.amenity-grid__cell:hover .amenity-grid__rule {
  width: 64px;
  background: var(--sunset-red);
}
.amenity-grid__body {
  font-size: clamp(0.96rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

@media (max-width: 880px) {
  .amenity-grid { grid-template-columns: 1fr 1fr; }
  .amenity-grid__cell:nth-child(3n + 1) { padding-left: clamp(1.25rem, 2vw, 1.75rem); }
  .amenity-grid__cell:nth-child(3n) { padding-right: clamp(1.25rem, 2vw, 1.75rem); border-right: 1px solid rgba(45, 91, 124, 0.20); }
  .amenity-grid__cell:nth-child(2n + 1) { padding-left: 0; }
  .amenity-grid__cell:nth-child(2n) { padding-right: 0; border-right: 0; }
}
@media (max-width: 540px) {
  .amenity-grid { grid-template-columns: 1fr; }
  .amenity-grid__cell { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ============================================================
   LEDGER (homepage amenities — editorial stacked list, no boxes)
   Big Fraunces statements stacked vertically.
   Small uppercase label on the left, big headline + rule + body on the right.
============================================================ */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(45, 91, 124, 0.20);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid rgba(45, 91, 124, 0.20);
  position: relative;
  transition: padding 0.4s var(--ease);
}
.ledger__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sunset-orange-text);
  padding-top: 0.65em;
  transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}
.ledger__row:hover .ledger__label {
  color: var(--sunset-coral);
  transform: translateX(4px);
}
.ledger__content { max-width: 38em; }
.ledger__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin: 0 0 var(--s-2);
  color: var(--deep-navy);
  text-wrap: balance;
}
.ledger__rule {
  width: 36px;
  height: 2px;
  background: var(--sunset-coral);
  margin: 0 0 var(--s-2);
  transition: width 0.45s var(--ease), background 0.3s var(--ease);
}
.ledger__row:hover .ledger__rule {
  width: 96px;
  background: var(--sunset-red);
}
.ledger__body {
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
  max-width: 36em;
}

/* Feature row (last one) — anchor of the section, bigger and more emphatic */
.ledger__row--feature .ledger__head {
  font-size: clamp(1.75rem, 4vw, 2.9rem);
}
.ledger__row--feature .ledger__rule {
  width: 64px;
  background: var(--sunset-orange);
}
.ledger__row--feature:hover .ledger__rule { background: var(--sunset-coral); }
.ledger__row--feature .ledger__label { color: var(--sunset-coral); }

@media (max-width: 720px) {
  .ledger__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: clamp(2.25rem, 6vw, 3rem) 0;
  }
  .ledger__label { padding-top: 0; }
}

/* ============================================================
   SCHEDULE (animated vertical timeline)
   Used on conference.html for the shape-of-the-day timetable.
   Vertical coral-to-orange line down the left edge, dot per row,
   staggered draw-in animation when section enters viewport.
============================================================ */
.schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* The vertical timeline line — draws in on .is-visible */
.schedule::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--sunset-coral) 0%,
    var(--sunset-orange) 50%,
    var(--sunset-coral) 100%
  );
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.schedule.is-visible::before { transform: scaleY(1); }

/* Schedule keeps the .reveal hook but stays visible itself — child
   rows/dots/line handle the entrance animation instead. */
.schedule.reveal {
  opacity: 1;
  transform: none;
}

.schedule__row {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--s-3) var(--s-4);
  align-items: baseline;
  padding: 1.5rem 0 1.5rem 60px;
  border-bottom: 1px solid rgba(27, 44, 66, 0.10);
  opacity: 0;
  transform: translateX(20px);
  /* Hover-only transitions for padding/background. Entrance is animated. */
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
  z-index: 2;
}

/* Dot on the line — pops in with cubic-bezier overshoot on .is-visible */
.schedule__row::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 1.85rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sunset-cream);
  border: 3px solid var(--sunset-coral);
  transform: scale(0);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  z-index: 3;
}

/* When the schedule enters the viewport, each row + dot animates in. */
.schedule.is-visible .schedule__row {
  animation: scheduleRowIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.schedule.is-visible .schedule__row::before {
  animation: scheduleDotPop 0.5s cubic-bezier(0.4, 1.7, 0.6, 1) forwards;
}

@keyframes scheduleRowIn {
  to { opacity: 1; transform: none; }
}
@keyframes scheduleDotPop {
  to { transform: scale(1); }
}

/* Stagger per row — rows just before their dots */
.schedule.is-visible .schedule__row:nth-child(1)  { animation-delay: 0.18s; }
.schedule.is-visible .schedule__row:nth-child(2)  { animation-delay: 0.28s; }
.schedule.is-visible .schedule__row:nth-child(3)  { animation-delay: 0.38s; }
.schedule.is-visible .schedule__row:nth-child(4)  { animation-delay: 0.48s; }
.schedule.is-visible .schedule__row:nth-child(5)  { animation-delay: 0.58s; }
.schedule.is-visible .schedule__row:nth-child(6)  { animation-delay: 0.68s; }
.schedule.is-visible .schedule__row:nth-child(7)  { animation-delay: 0.78s; }
.schedule.is-visible .schedule__row:nth-child(8)  { animation-delay: 0.88s; }
.schedule.is-visible .schedule__row:nth-child(9)  { animation-delay: 0.98s; }
.schedule.is-visible .schedule__row:nth-child(10) { animation-delay: 1.08s; }
.schedule.is-visible .schedule__row:nth-child(11) { animation-delay: 1.18s; }
.schedule.is-visible .schedule__row:nth-child(12) { animation-delay: 1.28s; }
.schedule.is-visible .schedule__row:nth-child(1)::before  { animation-delay: 0.24s; }
.schedule.is-visible .schedule__row:nth-child(2)::before  { animation-delay: 0.34s; }
.schedule.is-visible .schedule__row:nth-child(3)::before  { animation-delay: 0.44s; }
.schedule.is-visible .schedule__row:nth-child(4)::before  { animation-delay: 0.54s; }
.schedule.is-visible .schedule__row:nth-child(5)::before  { animation-delay: 0.64s; }
.schedule.is-visible .schedule__row:nth-child(6)::before  { animation-delay: 0.74s; }
.schedule.is-visible .schedule__row:nth-child(7)::before  { animation-delay: 0.84s; }
.schedule.is-visible .schedule__row:nth-child(8)::before  { animation-delay: 0.94s; }
.schedule.is-visible .schedule__row:nth-child(9)::before  { animation-delay: 1.04s; }
.schedule.is-visible .schedule__row:nth-child(10)::before { animation-delay: 1.14s; }
.schedule.is-visible .schedule__row:nth-child(11)::before { animation-delay: 1.24s; }
.schedule.is-visible .schedule__row:nth-child(12)::before { animation-delay: 1.34s; }

/* Hover — content shifts right, soft coral wash, dot fills */
.schedule__row:hover {
  padding-left: 70px;
  background: rgba(216, 81, 74, 0.04);
}
.schedule__row:hover::before {
  background: var(--sunset-coral);
  border-color: var(--sunset-red);
}

.schedule__time {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--sunset-coral);
  letter-spacing: 0.03em;
}
.schedule__content { min-width: 0; }
.schedule__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  letter-spacing: -0.008em;
  line-height: 1.15;
  margin: 0 0 0.3em;
  color: var(--deep-navy);
}
.schedule__desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
  max-width: 42em;
}
.schedule__tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sunset-orange-text);
  font-weight: 700;
  white-space: nowrap;
  padding-top: 0.4em;
}

/* Feature row (last) — bigger filled dot, bigger title */
.schedule__row--feature::before {
  background: var(--sunset-orange);
  border-color: var(--sunset-coral);
  width: 24px;
  height: 24px;
  left: 12px;
  top: 1.7rem;
}
.schedule__row--feature .schedule__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}
.schedule__row--feature .schedule__tag {
  color: var(--sunset-coral);
}

@media (prefers-reduced-motion: reduce) {
  .schedule::before { transform: scaleY(1); transition: none; }
  .schedule.is-visible .schedule__row,
  .schedule.is-visible .schedule__row::before { animation: none; }
  .schedule__row { opacity: 1; transform: none; }
  .schedule__row::before { transform: scale(1); }
}

@media (max-width: 720px) {
  .schedule__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "time tag" "content content";
    gap: 0.6rem var(--s-3);
    padding: 1.3rem 0 1.3rem 44px;
  }
  .schedule__time { grid-area: time; }
  .schedule__tag { grid-area: tag; padding-top: 0.2em; }
  .schedule__content { grid-area: content; }
  .schedule__row:hover { padding-left: 50px; }
  .schedule__row::before { left: 8px; top: 1.55rem; width: 14px; height: 14px; }
  .schedule__row--feature::before { left: 5px; top: 1.4rem; width: 20px; height: 20px; }
  .schedule::before { left: 14px; }
}

/* ============================================================
   HERO -- SPLIT VARIANT
   Used on conference.html so the RCVC year page reads distinctly
   from the homepage's full-bleed video hero. Editorial split:
   copy + meta + CTAs on the left, an image card with a corner
   caption stamp on the right.
============================================================ */
.hero.hero--split {
  background: var(--sunset-cream-soft);
  padding: clamp(3.5rem, 7vw, 6rem) 0 0;
  min-height: auto;
}
.hero--split__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero--split__copy { max-width: 30em; }
.hero--split__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.8vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: var(--s-4) 0 var(--s-4);
  color: var(--deep-navy);
}
.hero--split__headline .hero__line { display: block; }
.hero--split__headline .script {
  color: var(--sunset-coral);
  font-size: 1em;
  display: inline-block;
}
.hero--split__copy .lede {
  margin: var(--s-4) 0 var(--s-5);
  max-width: 28em;
}
.hero--split__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  border-top: 1px solid rgba(27, 44, 66, 0.18);
  border-bottom: 1px solid rgba(27, 44, 66, 0.18);
  padding: var(--s-4) 0;
  margin: 0 0 var(--s-5);
}
.hero--split__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.hero--split__meta-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sunset-orange-text);
}
.hero--split__meta-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--deep-navy);
  line-height: 1.2;
}
.hero--split__meta-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-soft);
}
.hero--split__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Image card with caption stamp */
.hero--split__card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(27, 44, 66, 0.5),
              0 8px 18px -8px rgba(27, 44, 66, 0.25);
  aspect-ratio: 4 / 5;
}
.hero--split__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero--split__stamp {
  position: absolute;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  background: var(--sunset-cream);
  color: var(--deep-navy);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: 0 12px 30px -10px rgba(27, 44, 66, 0.4);
}
.hero--split__stamp strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero--split__stamp .script {
  color: var(--sunset-coral);
  font-size: 1.1em;
}
.hero--split__stamp span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.3;
}

.hero--split .horizon-stripe { margin-top: 0; }

@media (max-width: 880px) {
  .hero--split__inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero--split__card {
    aspect-ratio: 16 / 11;
    order: -1;
  }
  .hero--split__meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .hero--split__meta { grid-template-columns: 1fr; }
}

/* ============================================================
   OVERLAY BAND (full-bleed image with text on top)
   Used for the "Coming Back in {{year}}" callout.
============================================================ */

.overlay-band {
  position: relative;
  min-height: clamp(520px, 70vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--sunset-cream-soft);
  background: var(--deep-navy);
}
.overlay-band__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.88) contrast(1.05);
}
.overlay-band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Bottom-weighted so the body copy + CTA (lower in the band) stay legible
     even where the photo is light. */
  background: linear-gradient(180deg, rgba(15, 29, 47, 0.55) 0%, rgba(15, 29, 47, 0.72) 100%);
}
.overlay-band__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-left: auto;
  /* padding-block only — a `padding: X 0` shorthand here would clobber the
     `.container` side gutter and let the text run to the screen edge on mobile. */
  padding-block: clamp(4rem, 8vw, 7rem);
}
.overlay-band__content .eyebrow {
  color: var(--sunset-orange);
}
.overlay-band__content .eyebrow .dot {
  background: var(--sunset-orange);
}
.overlay-band__head {
  color: var(--sunset-cream-soft);
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: var(--s-3) 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.overlay-band__rule {
  width: 56px;
  height: 2px;
  background: var(--sunset-orange);
  margin: 0 0 var(--s-4);
  transition: width 0.45s var(--ease);
}
.overlay-band:hover .overlay-band__rule { width: 96px; }
.overlay-band__content p {
  color: rgba(244, 232, 208, 0.88);
  max-width: 34em;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.6;
  margin: 0 0 var(--s-4);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.40);
}

@media (max-width: 720px) {
  .overlay-band__content { margin-left: 0; max-width: none; }
  /* Mobile: text spans full width and can land over the lightest part of the
     photo, so darken the scrim more and push body copy to near-full opacity. */
  .overlay-band__scrim {
    background: linear-gradient(180deg, rgba(15, 29, 47, 0.66) 0%, rgba(15, 29, 47, 0.84) 100%);
  }
  .overlay-band__content p { color: rgba(244, 232, 208, 0.96); }
}

/* ============================================================
   FEATURE BAND (homepage callouts — "Coming Back" + "Vendor Hall")
   Stacked split-bands: image one side, editorial text the other,
   alternating direction. No boxes.
============================================================ */

.feature-band {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.feature-band + .feature-band {
  border-top: 1px solid rgba(45, 91, 124, 0.18);
  margin-top: 0;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.feature-band--reverse { grid-template-columns: 1.1fr 1fr; }

.feature-band__text { padding: var(--s-2) 0; }
.feature-band__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin: var(--s-3) 0 var(--s-3);
  color: var(--deep-navy);
}
.feature-band__rule {
  width: 44px;
  height: 2px;
  background: var(--sunset-coral);
  margin: 0 0 var(--s-4);
  transition: width 0.45s var(--ease);
}
.feature-band:hover .feature-band__rule { width: 96px; }
.feature-band__text p {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 32em;
  margin: 0 0 var(--s-3);
}
.feature-band__text .btn { margin-top: var(--s-2); }

.feature-band__image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(27, 44, 66, 0.18);
  position: relative;
}
.feature-band__image img {
  width: 100%;
  height: clamp(320px, 38vw, 500px);
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
  filter: saturate(0.92) contrast(1.03);
}
.feature-band:hover .feature-band__image img { transform: scale(1.04); }

@media (max-width: 760px) {
  .feature-band,
  .feature-band--reverse {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .feature-band__image img { height: 240px; }
  .feature-band--reverse .feature-band__image { order: -1; }
  .feature-band .feature-band__image { order: -1; }
  /* Image always above text on mobile, regardless of desktop order */
}

/* ============================================================
   Section 3: Who It's For (cinematic full-bleed video hero)
   Second hero moment of the page. Sells identity through scale +
   motion. Full-bleed video, heavy navy scrim, massive Coustard
   overlay with Caveat Brush "aren't" accent.
============================================================ */

.whois {
  position: relative;
  min-height: clamp(720px, 92vh, 980px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-navy);
  padding: clamp(5rem, 9vw, 7rem) 0;
}
.whois__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.78) contrast(1.08);
}
.whois__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Raised from 0.72 for the same reason as the hero scrim. */
  background: rgba(15, 29, 47, 0.80);
}
.whois__content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  color: var(--sunset-cream-soft);
}
/* This section never got the light-on-dark eyebrow override that
   .overlay-band__content and .section--navy have, so "Who it's for" was
   rendering in the cream-surface orange over video: 2.81:1, a hard AA fail. */
.whois__content .eyebrow {
  color: var(--sunset-cream-soft);
}
.whois__content .eyebrow .dot {
  background: var(--sunset-orange);
}
.whois__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.4vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--sunset-cream);
  margin: var(--s-3) 0 var(--s-4);
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.55);
}
.whois__line { display: block; }
.whois__head .script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--sunset-orange);
  font-size: 1.42em;
  display: inline-block;
  transform: translateY(0.06em);
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.50);
}
.whois__rule {
  width: 88px;
  height: 3px;
  background: var(--sunset-orange);
  margin: var(--s-4) 0 var(--s-5);
}
.whois__body {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.6;
  color: rgba(244, 232, 208, 0.92);
  max-width: 36em;
  margin: 0 0 var(--s-4);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.whois__coda {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(244, 232, 208, 0.22);
  max-width: 46em;
}
.whois__coda p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(244, 232, 208, 0.84);
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.whois__coda strong { color: var(--sunset-orange); font-weight: 700; }
.whois__coda .script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.4em;
  color: var(--sunset-orange);
  display: inline-block;
  transform: translateY(0.1em);
}

/* ----- Section 2 layout: sticky logo + body ----- */

.section--why {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.section--why__mark {
  position: sticky;
  top: clamp(180px, 18vw, 220px);
  align-self: start;
}
.section--why__mark img,
.section--why__mark .travel-stamp {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(27, 44, 66, 0.18));
}

/* Photo variant — when the sticky mark slot holds a real photo (not a logo
   or stamp on transparent), use rounded card treatment + real box-shadow
   instead of the transparent drop-shadow. */
.section--why__mark--photo img {
  filter: none;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 30px 70px -28px rgba(27, 44, 66, 0.5),
              0 8px 18px -8px rgba(27, 44, 66, 0.25);
}

/* Medallion variant — logo sits inside a dark-navy circle. Used on the
   homepage Section 2 sticky mark. Keeps the sticky behavior on the parent. */
.section--why__mark--medallion img {
  filter: none;
  background: var(--deep-navy);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 30px 70px -28px rgba(27, 44, 66, 0.5),
              0 8px 18px -8px rgba(27, 44, 66, 0.25);
}

/* Travel stamp -- vintage Americana trip badge replacing the logo
   in the travel section. Pure SVG, design-token coloured. */
.travel-stamp__ring-outer {
  fill: none;
  stroke: var(--sunset-coral);
  stroke-width: 2.5;
}
.travel-stamp__ring-inner {
  fill: none;
  stroke: var(--sunset-orange);
  stroke-width: 1.5;
}
.travel-stamp__type {
  font-family: var(--font-display);
  font-weight: 400;
  fill: var(--deep-navy);
}
.travel-stamp__star { fill: var(--sunset-coral); }
.travel-stamp__building-body rect { fill: var(--deep-navy); }
.travel-stamp__cutouts rect { fill: var(--sunset-cream-soft); }
.travel-stamp__stripe-1 { fill: var(--sunset-coral); }
.travel-stamp__stripe-2 { fill: var(--sunset-orange); }
.travel-stamp__stripe-3 { fill: var(--twilight-blue); }
.section--why__body { min-width: 0; }
@media (max-width: 880px) {
  .section--why { grid-template-columns: 1fr; gap: var(--s-4); }
  .section--why__mark { position: relative; top: auto; max-width: 280px; margin: 0 auto; }
}

/* Pull-quote left-aligned variant for in-flow narrative use */
.pull-quote--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: 24em;
}
.pull-quote--left::before,
.pull-quote--left::after {
  margin-left: 0;
  margin-right: auto;
}

/* Scroll-triggered bloom: when the quote's center crosses near the
   viewport center, it scales 2x and translates horizontally to the
   screen center. ONCE triggered, it stays bloomed (no retract on
   continued scroll). --bloom-x is set by JS at trigger time.
   Generous vertical margin reserves space for the scaled visual so
   it doesn't overlap the paragraph above or section below. */
.pull-quote--scroll-bloom {
  --bloom-x: 0px;
  --bloom-scale: 1;
  transform-origin: center center;
  transform: translateX(var(--bloom-x)) scale(var(--bloom-scale));
  transition: transform 0.95s var(--ease), margin 0.95s var(--ease);
  position: relative;
  z-index: 50;
  will-change: transform;
  /* Pre-bloom: normal editorial spacing */
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pull-quote--scroll-bloom.is-bloomed {
  /* Softened from 2x: the Coustard display face is much heavier than the old
     thin script, so a full 2x bloom filled the whole viewport. 1.5x grows it
     on scroll while keeping it contained. */
  --bloom-scale: 1.5;
  /* Bloomed: vertical room for the scaled visual (reduced to match 1.5x) */
  margin-top: clamp(6rem, 12vw, 11rem);
  margin-bottom: clamp(6rem, 12vw, 11rem);
}
@media (prefers-reduced-motion: reduce) {
  .pull-quote--scroll-bloom {
    transform: none;
    transition: none;
  }
}
/* On small screens the bloom scales the quote past both edges of the
   viewport, making it unreadable. Disable the bloom transform and keep
   normal editorial spacing.

   Breakpoint was 700px, which left a broken band from 701px to 880px: there
   .section--why is still single-column so --bloom-x stays ~0, but the quote
   still scaled to 1.5x. At 768px (iPad portrait) that rendered 1060px wide
   inside a 768px viewport and gave the page a real horizontal scrollbar.
   It only appeared after scrolling, which is why load-time sweeps missed it.
   880px matches the .section--why two-column collapse, so the bloom now only
   runs in the layout that can actually re-centre it. */
@media (max-width: 880px) {
  .pull-quote--scroll-bloom,
  .pull-quote--scroll-bloom.is-bloomed {
    --bloom-scale: 1;
    transform: none;
    margin-top: clamp(2rem, 8vw, 3.5rem);
    margin-bottom: clamp(2rem, 8vw, 3.5rem);
  }
}

/* Logo dims out when the quote is bloomed, so the giant quote
   doesn't overlap with the sticky logo. */
.section--why__mark {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.section--why__mark.is-dimmed {
  opacity: 0;
  transform: scale(0.94) translateY(-12px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .section--why__mark { transition: none; }
}

/* ----- Editorial drop cap ----- */

.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.14em 0 0;
  margin: 0.04em 0 0;
  color: var(--sunset-coral);
  letter-spacing: -0.04em;
}

/* ----- Section banner + card image (cinematic touches) ----- */

.section-banner {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  position: relative;
}
.section-banner img {
  width: 100%;
  height: clamp(260px, 36vw, 440px);
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.03);
}

.card--with-image {
  padding-top: 0 !important;
  overflow: hidden;
}
.card__image {
  margin: 0 calc(-1 * var(--s-5)) var(--s-4);
}
.card__image img {
  width: 100%;
  height: clamp(180px, 24vw, 260px);
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.03);
}
.card--with-image > *:not(.card__image) {
  padding-left: 0;
  padding-right: 0;
}

/* ----- Pull quote ----- */

.pull-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  /* Bumped so the all-cursive section-2 quote carries enough presence in its
     resting state (and on mobile, where the scroll-bloom is disabled). */
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--deep-navy);
  max-width: 22em;
  margin: var(--s-8) auto;
  text-align: center;
  position: relative;
  padding: 0 1em;
}
.pull-quote::before,
.pull-quote::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--sunset-coral);
  margin: var(--s-3) auto;
}
/* Attribution under a pull-quote. <cite> is inline by default, so without
   this it ran on as part of the quote sentence at the full 3.3rem display
   size. Block it onto its own line and drop it to body scale so it reads as
   a signature. Sits between the quote and the closing coral hairline.
   Colour is a muted navy that still clears WCAG AA (5.7:1 on cream). */
.pull-quote cite {
  display: block;
  margin-top: clamp(0.9rem, 1.8vw, 1.35rem);
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(27, 44, 66, 0.75);
}
/* Render a pull-quote in the Coustard display face (not the Fraunces italic
   default and not the Birthstone script) — used for the section-2 homepage
   callout. Inherits the pull-quote's navy color + clamp sizing + scroll-bloom. */
.pull-quote__display {
  font-family: var(--font-display);
  font-style: normal;
}

/* ----- Tagline component ----- */

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* --sunset-coral as text on cream is 3.33:1 (fails AA). --sunset-red is
     4.67:1. Every dark-background .tagline already overrides this colour
     inline or via .tagline--light, so this only affects light surfaces. */
  color: var(--sunset-red);
}
.tagline .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sunset-coral);
}

/* ----- Forms ----- */

/* Form mode toggle (sponsorship card on sponsors.html) */
.form-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0.3rem;
  background: var(--sunset-cream);
  border: 1px solid var(--twilight-blue-soft);
  border-radius: 999px;
  margin: 0 0 var(--s-4);
}
.form-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.form-toggle__btn:hover { color: var(--deep-navy); }
.form-toggle__btn.is-active {
  background: var(--deep-navy);
  color: var(--sunset-cream-soft);
  box-shadow: 0 4px 12px -4px rgba(27, 44, 66, 0.35);
}
.form-toggle__btn:focus-visible {
  outline: 2px solid var(--sunset-coral);
  outline-offset: 2px;
}
.form-pane { display: none; }
.form-pane.is-active { display: block; }

@media (max-width: 480px) {
  .form-toggle__btn { font-size: 0.85rem; padding: 0.65rem 0.6rem; }
}

/* Sponsorship section layout: intro column + form card. Collapses to a single
   stacked column on mobile (was an inline 2-col grid that stayed cramped on phones). */
.sponsor-form-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 820px) {
  .sponsor-form-layout {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}
/* Prevent grid/flex min-content blowout on small phones (was causing ~32px
   horizontal overflow on the sponsors form) and keep all form controls inside
   their column. */
.sponsor-form-layout,
.sponsor-form-layout > *,
.form-row,
.form-row--2,
.form-field { min-width: 0; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.form-row--2 { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 600px) { .form-row--2 { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 0.4em; }
.form-field label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--twilight-blue);
}
.form-field input,
.form-field textarea,
.form-field select {
  font: inherit;
  background: var(--sunset-cream-soft);
  border: 1.5px solid var(--twilight-blue-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  color: var(--deep-navy);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--sunset-coral);
  background: #fff;
}
.form-field textarea { min-height: 120px; resize: vertical; }

.email-capture {
  display: flex;
  gap: var(--s-2);
  max-width: 480px;
  margin: var(--s-4) auto 0;
  background: var(--sunset-cream-soft);
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  border: 1.5px solid var(--twilight-blue-soft);
  border-radius: 999px;
}
.email-capture input {
  flex: 1;
  min-width: 0; /* allow the input to shrink so the button never overflows on small phones */
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--deep-navy);
  outline: none;
}
/* The input has outline:none and no border of its own, so on its own it had
   NO visible focus indicator at all (WCAG 2.4.7). Ring the pill instead. */
.email-capture:focus-within {
  outline: 2px solid var(--sunset-orange);
  outline-offset: 2px;
}

/* Form confirmations. Empty until a submit fires; role="status" then
   announces the text without stealing focus. */
.form-status {
  margin: var(--s-2) 0 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sunset-red);
  min-height: 1.4em;
}
.form-status--onnavy { color: var(--sunset-orange); }
.email-capture input::placeholder { color: var(--text-muted); }
.email-capture button {
  font: inherit;
  font-weight: 600;
  background: var(--sunset-red);
  color: var(--sunset-cream-soft);
  border: 0;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.email-capture button:hover { background: var(--sunset-red-deep); }

/* ----- FAQ accordion ----- */

.faq-group { margin: var(--s-8) 0; }
.faq-group h2 { margin-bottom: var(--s-4); }
.faq-item {
  border-top: 1px solid var(--twilight-blue-soft);
  padding: 0 var(--s-3);
  margin: 0 calc(var(--s-3) * -1);
  border-radius: var(--radius);
  transition: background 0.3s var(--ease);
  scroll-margin-top: 120px;
}
.faq-item:last-child { border-bottom: 1px solid var(--twilight-blue-soft); }
.faq-item[open] { background: rgba(216, 81, 74, 0.045); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 30;
  letter-spacing: -0.01em;
  color: var(--deep-navy);
  list-style: none;
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sunset-coral); }
/* Animatable plus → minus: rotate a "+" 45° on [open] so it reads as an X-tilted minus.
   Using a swap (content: "+/–") can't be animated, so we keep one glyph and rotate it. */
.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.8rem;
  color: var(--sunset-coral);
  line-height: 0.9;
  flex-shrink: 0;
  transform-origin: 50% 55%;
  transition: transform 0.35s var(--ease), color 0.2s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(135deg);
  color: var(--sunset-red);
}
.faq-item__body {
  padding: 0 0 var(--s-5);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 50em;
}
/* On small phones the full-bleed negative margin (-s-3) is slightly wider than
   the container's side padding, pushing the FAQ rows ~4px past the viewport and
   triggering a horizontal scrollbar. Drop the bleed on mobile. */
@media (max-width: 600px) {
  .faq-item {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   FAQ — split-layout group (used on faqs.html)
   Left column: sticky header (eyebrow + h2 + coral rule + teaser)
   Right column: accordion list
   Mobile: collapses to single column, sticky off.
============================================================ */
.faq-group--split {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(45, 91, 124, 0.18);
}
.faq-group--split:first-child { border-top: 0; padding-top: 0; }
.faq-group--split:last-child { padding-bottom: 0; }
.faq-group__head {
  position: sticky;
  top: clamp(120px, 14vw, 160px);
  align-self: start;
}
.faq-group__head .eyebrow { margin-bottom: var(--s-3); }
.faq-group__head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.faq-group__head h2 .script {
  color: var(--sunset-coral);
  /* Match the site-standard script bump (1.22em). Was 1.05em — a pre-bump
     leftover that left these accents reading smaller than every other
     section heading's script. */
  font-size: 1.22em;
  line-height: 0.95;
  display: inline-block;
}
.faq-group__rule {
  width: 56px;
  height: 2px;
  background: var(--sunset-coral);
  margin: 0 0 var(--s-3);
}
.faq-group__tease {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
  max-width: 24em;
}
.faq-group__items {
  min-width: 0; /* grid item shrink fix */
}
.faq-group--split .faq-item:first-of-type { border-top: 1px solid var(--twilight-blue-soft); }
@media (max-width: 880px) {
  .faq-group--split {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: clamp(2rem, 5vw, 3rem) 0;
  }
  .faq-group__head {
    position: relative;
    top: auto;
  }
}

/* ============================================================
   FAQ — hero index card (right column of hero--faq)
   Numbered TOC. Each row: num + name + count + arrow.
   Hover: row shifts right, rule grows, arrow nudges.
============================================================ */
.faq-index {
  background: var(--sunset-cream);
  border: 1px solid rgba(27, 44, 66, 0.10);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 20px 50px -28px rgba(27, 44, 66, 0.35),
              0 6px 14px -8px rgba(27, 44, 66, 0.18);
}
.faq-index__head {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sunset-orange-text);
  margin: 0 0 var(--s-3);
}
.faq-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-index__list li {
  border-top: 1px solid rgba(45, 91, 124, 0.16);
}
.faq-index__list li:first-child { border-top: 0; }
.faq-index__list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  color: var(--deep-navy);
  text-decoration: none;
  transition: transform 0.35s var(--ease);
}
.faq-index__list a:hover { transform: translateX(6px); color: var(--deep-navy); text-decoration: none; }
.faq-index__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  /* 19.2px at weight 400 is not "large text", so it needs the full 4.5:1.
     Coral measured 3.33:1 on the card; --sunset-red is 4.67:1. */
  color: var(--sunset-red);
  letter-spacing: 0.02em;
  line-height: 1;
}
.faq-index__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.1;
  color: var(--deep-navy);
}
.faq-index__count {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  position: relative;
  padding-right: 1.1rem;
  transition: color 0.3s var(--ease);
}
.faq-index__count::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sunset-coral);
  font-size: 1rem;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.faq-index__list a:hover .faq-index__count { color: var(--sunset-coral); }
.faq-index__list a:hover .faq-index__count::after {
  transform: translateY(-50%) translateX(4px);
  color: var(--sunset-red);
}
/* On the hero--split layout, the index card takes the place of the image card.
   Override the aspect-ratio constraint that --split__card uses. */
.hero--faq .hero--split__inner { align-items: start; }
@media (max-width: 880px) {
  .hero--faq .hero--split__inner > .faq-index { order: -1; }
}

/* Eyebrow + rule adjustments on navy sections */
.section--navy .eyebrow { color: var(--sunset-orange); }
.section--navy .faq-group__rule { background: var(--sunset-orange); }

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

.site-footer {
  background: var(--deep-navy);
  color: var(--sunset-cream-soft);
  padding: var(--s-6) 0 var(--s-3);
}
/* The "you're worth it" tagline is the one .tagline on a dark surface with no
   inline override. It was already failing at 3.5:1 in coral, and the base
   .tagline colour is now the darker red for cream surfaces, which would be
   worse here (2.49:1). Orange on navy is 6.16:1. */
.site-footer .tagline { color: var(--sunset-orange); }
.site-footer .tagline .dot { background: var(--sunset-orange); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.site-footer__brand img { max-width: 132px; margin-bottom: var(--s-2); }
.site-footer__brand p { color: rgba(244, 232, 208, 0.72); max-width: 26em; font-size: 0.92rem; margin-bottom: 0.6em; }
.site-footer__col h3 { color: var(--sunset-orange); margin-bottom: var(--s-2); font-size: 0.9rem; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: 0.4em; }
.site-footer__col a {
  color: var(--sunset-cream-soft);
  font-size: 0.92rem;
}
.site-footer__col a:hover { color: var(--sunset-orange); text-decoration: none; }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(244, 232, 208, 0.12);
  font-size: 0.82rem;
  color: rgba(244, 232, 208, 0.55);
  flex-wrap: wrap;
}
.site-footer__bottom .script {
  color: var(--sunset-orange);
  font-size: 1.5rem;
  letter-spacing: 0;
  margin: 0 0.3em;
}

/* ----- Utility ----- */

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger { /* semantic parent only */ }

/* ----- Hero (cinematic) entrance ----- */

.hero--cinematic .tagline,
.hero--cinematic .hero__lede,
.hero--cinematic .hero__ctas,
.hero--cinematic .hero__meta {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.hero--cinematic .hero__scrim {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
body.is-ready .hero--cinematic .hero__scrim    { opacity: 1; }
body.is-ready .hero--cinematic .tagline        { opacity: 1; transform: none; transition-delay: 0.20s; }
body.is-ready .hero--cinematic .hero__lede     { opacity: 1; transform: none; transition-delay: 0.95s; }
body.is-ready .hero--cinematic .hero__ctas     { opacity: 1; transform: none; transition-delay: 1.15s; }
body.is-ready .hero--cinematic .hero__meta     { opacity: 1; transform: none; transition-delay: 1.30s; }

/* Per-line headline reveal + coral underline draw on the script word.
   The reveal is hidden by opacity (0 -> 1), NOT by clipping, so the headline
   can overflow freely. This lets the script word's descender (the "bottom
   loop" on letters like p/g) show in full instead of being cut off by the
   tight 1.02 line-height + the word's rotate/translate offset.
   A little bottom padding reserves room so it never collides with the lede. */
.hero__headline {
  overflow: visible;
  padding-bottom: 0.18em;
}
.hero__line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
body.is-ready .hero--cinematic .hero__line:nth-child(1),
body.is-ready .hero--split .hero__line:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.35s; }
body.is-ready .hero--cinematic .hero__line:nth-child(2),
body.is-ready .hero--split .hero__line:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.55s; }
body.is-ready .hero--cinematic .hero__line:nth-child(3),
body.is-ready .hero--split .hero__line:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.75s; }
.hero--cinematic .hero__line:nth-child(3) .script {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em;
  /* Own stacking context so the underline can sit BEHIND the glyphs
     (z-index:-1) without falling behind the hero video/scrim. */
  isolation: isolate;
}
.hero--cinematic .hero__line:nth-child(3) .script::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.05em;
  width: 0;
  height: 5px;
  background: var(--sunset-coral);
  transition: width 1.3s var(--ease);
  /* Behind the text so the descender of the "p" in "compromise" shows over it. */
  z-index: -1;
}
body.is-ready .hero--cinematic .hero__line:nth-child(3) .script::after {
  width: 100%;
  transition-delay: 1.40s;
}

/* ----- Horizon stripe wipe-in (each band scales from left) ----- */

.horizon-stripe > span {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
}
body.is-ready .horizon-stripe > span                          { transform: scaleX(1); }
.horizon-stripe > span:nth-child(1) { transition-delay: 0.05s; }
.horizon-stripe > span:nth-child(2) { transition-delay: 0.15s; }
.horizon-stripe > span:nth-child(3) { transition-delay: 0.25s; }
.horizon-stripe > span:nth-child(4) { transition-delay: 0.35s; }
.horizon-stripe > span:nth-child(5) { transition-delay: 0.45s; }

/* ----- Pull-quote hairlines draw ----- */

.pull-quote::before,
.pull-quote::after {
  width: 0;
  transition: width 0.8s var(--ease) 0.25s;
}
.pull-quote.is-visible::before,
.pull-quote.is-visible::after { width: 48px; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}