/* =============================================================================
   TOURBIRTH — MASTER STYLESHEET
   styles.css  ·  GENERATED FILE — DO NOT EDIT BY HAND
   Run `php build-css.php` from the project root after editing any source
   module under css/. Editing this file directly will be overwritten on the
   next build.
   ─────────────────────────────────────────────────────────────────────────────
   INLINE ORDER:
   1. variables   — :root tokens. Must be first. Everything depends on it.
   2. reset       — browser normalisation.
   3. base        — global element typography.
   4. layout      — containers, sections, grid, hero, spacing utilities.
   5. navigation  — fixed nav, mobile overlay, dropdown.
   6. footer      — three-column footer, bottom bar.
   7. banner      — sticky waitlist ribbon.
   8. animations  — @keyframes, .reveal system.
   9. components  — buttons, forms, cards, shared widgets.
   ─────────────────────────────────────────────────────────────────────────────
   Page-specific CSS (home, invitation, etc.) is loaded conditionally via
   $page_styles in includes/header.php — NOT bundled here.
   ============================================================================= */

/* ════════════════════════════════════════════════
   FROM: css/variables.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — CSS CUSTOM PROPERTIES
   variables.css
   All :root tokens. Never hardcode any value that lives here.
   Every color, size, spacing, timing, and easing must reference these variables.
   ============================================================================= */

:root {

  /* ===========================================================================
     BRAND COLORS
     90% neutrals (Obsidian + Offwhite). 10% Gold — ONLY for borders,
     underlines, hover states, micro-details, accents.
     NEVER use Gold as a dominant background fill. The Gold must feel earned.
  =========================================================================== */

  --obsidian:          #0B1D2A;   /* Primary dark — backgrounds, logo on light   */
  --deep-neutral:      #1A252F;   /* Secondary dark — overlays, session sections  */
  --gold:              #C6A96B;   /* Accent ONLY — max 10% of any composition     */
  --gold-deep:         #8B7340;   /* Darker gold for text on light backgrounds — ~4.9:1 on --offwhite (WCAG AA) */
  --sage:              #7A8F85;   /* Muted support — dividers, labels, subtle bg  */
  --sage-dark:         #4E6459;   /* Darker sage for light backgrounds — ~4.8:1 on --offwhite */
  --offwhite:          #F5F3EE;   /* Light background — editorial, clean layouts  */
  --white:             #FFFFFF;   /* Text and logo on dark backgrounds            */
  --charcoal:          #2C2C2C;   /* Body text on very light backgrounds          */

  /* ===========================================================================
     TYPOGRAPHY
  =========================================================================== */

  --font-display:      'Cormorant Garamond', Georgia, serif;
  --font-body:         'Montserrat', Helvetica, sans-serif;
  --font-logo:         'League Spartan', Arial, sans-serif;   /* TB monogram — nav + footer logo only */

  /* Font sizes — fluid via clamp() */
  --fs-hero:           clamp(4rem, 7vw, 7rem);     /* Audit: raised minimum from 3.2rem — hero never falls below 64px */
  --fs-display:        clamp(2.6rem, 5vw, 5.5rem);
  --fs-h1:             clamp(2.2rem, 4vw, 4rem);
  --fs-h2:             clamp(1.6rem, 3vw, 2.8rem);
  --fs-h3:             clamp(1.2rem, 2vw, 1.8rem);
  --fs-body:           clamp(0.9rem, 1.2vw, 1.05rem);
  --fs-small:          0.82rem;
  --fs-label:          0.70rem;
  --fs-caption:        0.75rem;

  /* Line heights */
  --lh-heading:        1.1;
  --lh-subhead:        1.35;
  --lh-body:           1.9;
  --lh-relaxed:        2.0;

  /* Letter spacing */
  --ls-hero:           0.05em;
  --ls-heading:        0.03em;
  --ls-label:          0.22em;
  --ls-nav:            0.13em;
  --ls-eyebrow:        0.28em;
  --ls-ultra:          0.40em;

  /* ===========================================================================
     SPACING
  =========================================================================== */

  --nav-height:        72px;            /* Fixed nav bar height — mirrors navigation.css */
  --banner-height:     48px;            /* Sticky waitlist banner height — banner.js may override at runtime */

  --space-xs:          0.5rem;
  --space-sm:          clamp(0.75rem, 2vw, 1rem);
  --space-md:          clamp(1.25rem, 3vw, 2rem);
  --space-lg:          clamp(1.75rem, 5vw, 4rem);
  --space-xl:          clamp(2.5rem, 7vw, 8rem);
  --space-2xl:         clamp(3.5rem, 9vw, 12rem);
  --space-section:     clamp(2.5rem, 9vw, 14rem);
  --space-element:     clamp(1.25rem, 4vw, 4rem);
  --space-tight:       clamp(0.6rem, 1.5vw, 1.25rem);
  --section-padding:   clamp(2.5rem, 8vw, 12rem) clamp(1rem, 7vw, 10rem);
  --gutter:            clamp(1rem, 6vw, 8rem);
  --container-max:     1320px;
  --content-width:     900px;
  --content-max-text:  580px;

  /* ===========================================================================
     ANIMATION & EASING
  =========================================================================== */

  --ease-luxury:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-cinematic:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drift:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:          cubic-bezier(0.0, 0, 0.2, 1);

  --dur-fast:          300ms;
  --dur-medium:        500ms;
  --dur-slow:          800ms;
  --dur-cinematic:     1200ms;
  --dur-page:          1600ms;

  /* Composite transitions */
  --transition-fast:   var(--dur-fast)   var(--ease-luxury);
  --transition-medium: var(--dur-medium) var(--ease-luxury);
  --transition-slow:   var(--dur-slow)   var(--ease-luxury);

  /* Page & reveal transitions */
  --transition-page:      opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-reveal:    opacity 900ms cubic-bezier(0.23, 1, 0.32, 1), transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-hero-img:  transform 1800ms cubic-bezier(0.23, 1, 0.32, 1);

  /* ===========================================================================
     BORDERS & DETAILS
  =========================================================================== */

  --gold-rule:         1px solid var(--gold);
  --gold-rule-thin:    0.5px solid rgba(198, 169, 107, 0.35);
  --gold-rule-faint:   1px solid rgba(198, 169, 107, 0.15);

  /* ===========================================================================
     SEMANTIC UI COLORS
  =========================================================================== */

  --color-error:          #C9833A;   /* Warm amber — form validation, never harsh red */
  --color-text-secondary: rgba(245, 243, 238, 0.65);  /* Muted offwhite for secondary body text on dark bg */
  --color-overlay:        rgba(11, 29, 42, 0.45);     /* Hero overlay — cinematic dark veil */
  --color-overlay-light:  rgba(11, 29, 42, 0.25);     /* Lighter overlay variant */
  --color-bg-alt:         #141f28;                    /* Alternate dark background */

  /* ===========================================================================
     Z-INDEX SCALE
     Centralised so layers never collide unexpectedly.
  =========================================================================== */

  --z-base:            0;
  --z-above:           10;
  --z-nav:             1000;
  --z-banner:          1100;
  --z-menu:            1500;   /* Mobile menu overlay — above nav + banner, below page transition */
  --z-overlay:         9000;
  --z-cursor:          9999;

}

/* ════════════════════════════════════════════════
   FROM: css/reset.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — MODERN CSS RESET
   reset.css
   Normalises browser defaults. No framework. No utility classes.
   Establishes a clean, predictable baseline for all Tourbirth styles.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. BOX MODEL
   Force all elements to use border-box so padding and border are
   always included in the stated width/height. No surprises.
--------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   2. ROOT RESET
   Remove all default margin and padding. Set tab-size for code blocks.
--------------------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   3. HTML — SCROLL BEHAVIOUR & FONT BASELINE
   smooth scroll lives here so the CSS rule is respected without JS.
   JS parallax and page transitions override this where needed.
--------------------------------------------------------------------------- */

html {
  font-size: 100%;                    /* 1rem = 16px unless user overrides */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;     /* Prevent font scaling on orientation change (iOS) */
  text-size-adjust: 100%;
  tab-size: 4;
  hanging-punctuation: first last;    /* Optical margin alignment where supported */
}

/* ---------------------------------------------------------------------------
   4. BODY — MINIMUM VIEWPORT HEIGHT
   Guarantees footer always reaches the bottom on short content pages.
--------------------------------------------------------------------------- */

body {
  min-height: 100vh;
  min-height: 100dvh;                 /* Dynamic viewport units where supported */
}

/* ---------------------------------------------------------------------------
   5. TYPOGRAPHIC INHERITANCE
   By default, form elements do not inherit the document font. Fix that.
--------------------------------------------------------------------------- */

input,
button,
textarea,
select,
optgroup {
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------------------
   6. HEADING & PARAGRAPH OVERFLOW
   Prevent long words from breaking container edges on narrow viewports.
--------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, blockquote, figcaption {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   7. LISTS
   Strip default list markers and spacing. Semantic list roles are
   preserved — visual styles are applied in base.css and components.
--------------------------------------------------------------------------- */

ul,
ol {
  list-style: none;
}

/* ---------------------------------------------------------------------------
   8. MEDIA DEFAULTS
   Images, video, canvas, and SVG behave as blocks by default and
   never overflow their containers.
--------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   9. ANCHOR RESET
   Remove default underline; we draw our own in components.css.
   Color inherits from context (dark vs. light section).
--------------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   10. BUTTON RESET
   Strip all default button chrome. Styled entirely in components.css.
--------------------------------------------------------------------------- */

button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: inherit;
}

/* ---------------------------------------------------------------------------
   11. FIELDSET & LEGEND
   Remove legacy styling that affects layout inside forms.
--------------------------------------------------------------------------- */

fieldset {
  border: none;
  padding: 0;
}

legend {
  padding: 0;
}

/* ---------------------------------------------------------------------------
   12. TABLE RESET
   Collapse spacing; let layout.css handle table structures.
--------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ---------------------------------------------------------------------------
   13. HR RESET
   Strip default browser border/height. Gold rules are drawn
   with precise variables in base.css.
--------------------------------------------------------------------------- */

hr {
  border: none;
  height: 0;
  color: inherit;
}

/* ---------------------------------------------------------------------------
   14. STRONG & EM
   Explicitly declare weights so variable fonts render correctly.
--------------------------------------------------------------------------- */

strong,
b {
  font-weight: 500;                   /* Tourbirth uses 500 as "bold" maximum */
}

em,
i {
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   15. ABBREVIATION
   Restore dotted underline for semantic abbreviations.
--------------------------------------------------------------------------- */

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ---------------------------------------------------------------------------
   16. SELECTION STYLES
   Brand-aligned text selection. Defined here so it cascades everywhere.
   Exact selection colors also live in base.css for specificity control.
--------------------------------------------------------------------------- */

::selection {
  background-color: var(--obsidian);
  color: var(--gold);
}

::-moz-selection {
  background-color: var(--obsidian);
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   17. FOCUS VISIBLE BASELINE
   Never remove focus outlines — screen reader and keyboard users depend on them.
   Tourbirth focus style: 2px solid gold, 4px offset. Elegant, never harsh.
   Applied here as a cascade baseline; specific overrides in base.css.
--------------------------------------------------------------------------- */

:focus {
  outline: none;                      /* Suppress default browser outline */
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   18. SCROLLBAR STYLING (Webkit / Blink)
   Minimal, brand-aligned. Does not affect Firefox (uses scrollbar-color below).
--------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--obsidian);
}

::-webkit-scrollbar-thumb {
  background: rgba(198, 169, 107, 0.35);
  border-radius: 0;                   /* Architectural — no rounded bars */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 169, 107, 0.35) var(--obsidian);
}

/* ---------------------------------------------------------------------------
   19. REDUCED MOTION
   Respect the user's operating system preference. Disable all
   non-essential motion — parallax, page transitions, reveals, cursor trail.
   Elements remain visible (opacity: 1, transform: none).
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

}

/* ════════════════════════════════════════════════
   FROM: css/base.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — BASE TYPOGRAPHY & GLOBAL ELEMENT STYLES
   base.css
   Applies brand typography to every HTML element.
   All values come from variables.css — nothing hardcoded here.

   Typography law (from brief):
   · Hero / Display       → Cormorant Garamond 300–400, sentence case, large tracking
   · All headings         → Cormorant Garamond 300–500, tight leading (--lh-heading)
   · Pull quotes          → Cormorant Garamond 300–400 italic
   · Section eyebrows     → Montserrat 400 UPPERCASE, --ls-eyebrow, gold
   · Navigation links     → Montserrat 400 UPPERCASE, --ls-nav, small
   · Body copy            → Montserrat 300, --lh-body, letter-spacing: 0.02em
   · CTA / Buttons        → Montserrat 400–500 UPPERCASE, --ls-label
   · Form labels          → Montserrat 400 UPPERCASE, --ls-label, --sage
   · Form input text      → Cormorant Garamond 400, large, relaxed
   No heavy bold typography anywhere.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. HTML ELEMENT
   Font rendering, smooth scroll, and base font size live here.
--------------------------------------------------------------------------- */

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ---------------------------------------------------------------------------
   2. BODY
   Font family: Montserrat (body). Background: offwhite by default.
   Dark sections override background via section modifier classes in layout.css.
--------------------------------------------------------------------------- */

body {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          var(--charcoal);
  background:     var(--offwhite);

  /* Prevent horizontal scroll caused by animations */
  overflow-x: hidden;

  /* Nav is fixed and overlays the hero by design — no top reservation needed.
     Sections after the hero set their own top padding (see .section padding tokens). */

  /* Reserve space at the bottom for the waitlist banner.
     Falls back to --banner-height; banner.js can override --banner-height at runtime. */
  padding-bottom: var(--banner-height);
}

/* ---------------------------------------------------------------------------
   3. SELECTION STYLES
   Obsidian background, gold text — brand-aligned, legible.
--------------------------------------------------------------------------- */

::selection {
  background-color: var(--obsidian);
  color:            var(--gold);
}

::-moz-selection {
  background-color: var(--obsidian);
  color:            var(--gold);
}

/* ---------------------------------------------------------------------------
   4. FOCUS STYLES
   Visible on keyboard navigation. Gold outline — elegant, never harsh.
   Applied on :focus-visible only so mouse clicks don't show the ring.
--------------------------------------------------------------------------- */

:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   5. HEADINGS
   All headings: Cormorant Garamond. Tight leading. Light weights.
   No heading skips a level on any page. One H1 per page.
--------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  font-weight:    400;
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color:          inherit;
}

h1 {
  font-size:      var(--fs-h1);
  font-weight:    300;
  letter-spacing: var(--ls-hero);
}

h2 {
  font-size:      var(--fs-h2);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
}

h3 {
  font-size:      var(--fs-h3);
  font-weight:    400;
  letter-spacing: var(--ls-heading);
}

h4 {
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

h5,
h6 {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   6. PARAGRAPH & BODY TEXT
--------------------------------------------------------------------------- */

p {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          inherit;
}

/* Paragraph spacing within prose blocks */
p + p {
  margin-top: var(--space-md);
}

/* ---------------------------------------------------------------------------
   7. LEAD / SUBHEADING PARAGRAPH
   Used directly beneath hero headlines.
--------------------------------------------------------------------------- */

.lead {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-subhead);
  letter-spacing: 0.04em;
  color:          inherit;
  opacity:        0.82;
}

/* ---------------------------------------------------------------------------
   8. SECTION EYEBROW
   Small uppercase Montserrat label above major headlines.
   Always gold. Always tracked wide. Never bold.

   Usage: <p class="eyebrow">THE HOUSE OF CONNECTION</p>
--------------------------------------------------------------------------- */

.eyebrow {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color:          var(--gold);   /* Brand law: section eyebrows always gold (overridden on light bgs via layout.css) */
  margin-bottom:  var(--space-md);
}

/* ---------------------------------------------------------------------------
   9. DISPLAY / HERO HEADLINE
   Large editorial headline — Cormorant Garamond, weight 300.
   Used in hero sections where size exceeds the standard h1.
--------------------------------------------------------------------------- */

.headline-hero {
  font-family:    var(--font-display);
  font-size:      var(--fs-hero);
  font-weight:    300;
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-hero);
  color:          var(--offwhite);
}

.headline-display {
  font-family:    var(--font-display);
  font-size:      var(--fs-display);
  font-weight:    300;
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-hero);
  color:          inherit;
}

/* ---------------------------------------------------------------------------
   10. PULL QUOTES
   Large italic Cormorant Garamond. Used as editorial accent, never <blockquote>.
   On dark backgrounds these render in offwhite; on light in charcoal/deep-neutral.

   Usage: <p class="pull-quote">…</p>
--------------------------------------------------------------------------- */

.pull-quote {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-subhead);
  letter-spacing: 0.02em;
  color:          inherit;
}

/* ---------------------------------------------------------------------------
   11. BLOCKQUOTE
   Semantic block quotes — same visual treatment as pull quotes.
   Brief specifies Cormorant italic for all editorial quotations.
--------------------------------------------------------------------------- */

blockquote {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-subhead);
  letter-spacing: 0.02em;
  color:          inherit;
}

blockquote p {
  font-family:    inherit;
  font-size:      inherit;
  font-weight:    inherit;
  font-style:     inherit;
  line-height:    inherit;
  letter-spacing: inherit;
}

/* ---------------------------------------------------------------------------
   12. INLINE TEXT ELEMENTS
--------------------------------------------------------------------------- */

em {
  font-style: italic;
}

strong {
  font-weight: 500;                   /* Max "bold" weight for Tourbirth */
}

small {
  font-size:      var(--fs-small);
  letter-spacing: 0.04em;
  opacity:        0.72;
}

.caption {
  font-family:    var(--font-body);
  font-size:      var(--fs-caption);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--sage);
}

/* ---------------------------------------------------------------------------
   13. LINKS
   Base reset — no decoration, inherits color.
   Specific hover/underline draw effects are in components.css.
--------------------------------------------------------------------------- */

a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast);
}

/* ---------------------------------------------------------------------------
   14. GOLD HORIZONTAL RULE
   The branded section divider. Animated width: 0 → 100% via animations.js
   (IntersectionObserver adds class .is-visible).

   Usage: <hr class="gold-rule">
--------------------------------------------------------------------------- */

hr.gold-rule,
.gold-rule {
  display:    block;
  width:      0;                      /* JS sets to 100% on scroll entry */
  height:     1px;
  background: var(--gold);
  border:     none;
  margin-block: var(--space-lg);      /* Default breathing room — utility classes (mt-*/mb-*) still override per-axis */
  margin-inline: 0;

  /* Width animation — triggered by adding .is-visible in animations.js */
  transition: width var(--dur-cinematic) var(--ease-cinematic);
}

hr.gold-rule.is-visible,
.gold-rule.is-visible {
  width: 100%;
}

/* Short decorative rule variant (hero section) */
.gold-rule--short {
  width:      0;
  max-width:  60px;
  height:     1px;
  background: var(--gold);
  transition: width var(--dur-cinematic) var(--ease-cinematic);
}

.gold-rule--short.is-visible {
  width: 60px;
}

/* ---------------------------------------------------------------------------
   15. GRAIN TEXTURE OVERLAY (shared pseudo-element pattern)
   Applied via class on section containers — creates CSS noise texture
   without any image files. Opacity 3–5% per brief.

   Usage: add class .has-grain to any section wrapper.
--------------------------------------------------------------------------- */

.has-grain::after {
  content:         '';
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:   200px 200px;
  opacity:         0.038;
  mix-blend-mode:  overlay;
  z-index:         var(--z-above);
}

/* Sections with grain must be position: relative so the ::after is contained */
.has-grain {
  position: relative;
}

/* ---------------------------------------------------------------------------
   16. ARCHITECTURAL LEFT-BORDER ACCENT LINES
   Used in several sections per the brief — 3px solid gold left border.

   Usage: <div class="accent-line">…</div>
--------------------------------------------------------------------------- */

.accent-line {
  border-left:  3px solid var(--gold);
  padding-left: var(--space-md);
}

/* ---------------------------------------------------------------------------
   17. MUTED / CREDENTIAL TEXT
   Very small Montserrat uppercase — for "EST. SINCE 2017 · LAGOS, NIGERIA"
   and similar micro-labels.
--------------------------------------------------------------------------- */

.credential {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color:          var(--sage);
  opacity:        0.7;
}

/* ---------------------------------------------------------------------------
   18. DARK SECTION TYPOGRAPHY OVERRIDES
   When a section has a dark background (.section--dark, .section--deep),
   inherited text colors must flip to offwhite. Headings and body text
   inherit color from the section container — these rules enforce that.
--------------------------------------------------------------------------- */

.section--dark,
.section--deep {
  color: var(--offwhite);   /* Audit: warm ivory vs clinical white */
}

.section--dark p,
.section--deep p {
  color: rgba(245, 243, 238, 0.82);  /* --offwhite at 82% */
}

.section--dark .credential,
.section--deep .credential {
  color: var(--sage);
}

/* ---------------------------------------------------------------------------
   19. PREFERS-REDUCED-MOTION — TYPOGRAPHY OVERRIDES
   Reveal classes reset to visible state. Gold rule animations disabled.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .reveal {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }

  hr.gold-rule,
  .gold-rule,
  .gold-rule--short {
    width:      100% !important;
    transition: none !important;
  }

}

/* ════════════════════════════════════════════════
   FROM: css/layout.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — LAYOUT SYSTEM
   layout.css
   Containers, sections, grids, and spacing utilities.
   No magic numbers — all values from variables.css.

   Layout laws (from brief):
   · Wide margins, generous whitespace — every section must breathe
   · Sharp architectural edges — no border-radius on structural elements
   · Asymmetric layouts where appropriate — avoid predictable centered grids
   · Alternate section backgrounds: obsidian / deep-neutral ↔ offwhite
   · Container max: 1320px | Content width: 900px
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. CONTAINER
   The primary width-constraint wrapper. Centered with fluid horizontal
   padding via --gutter so margins breathe at every viewport size.
--------------------------------------------------------------------------- */

.container {
  width:     100%;
  max-width: var(--container-max);    /* 1320px */
  margin-inline: auto;
  padding-inline: var(--gutter);      /* clamp(1.5rem, 5vw, 8rem) */
}

/* Narrow variant — editorial, centred prose */
.container--narrow {
  max-width: var(--content-width);    /* 900px */
}

/* Wide variant — bleeds closer to viewport edges */
.container--wide {
  max-width: 1600px;
}

/* Full bleed — only padding, no max-width cap */
.container--flush {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   2. SECTION
   The full-width page region wrapper. Controls vertical rhythm.
   Background colour is set via modifier classes (see section 3).
   The section element itself is always position: relative to contain
   any absolute-positioned grain overlays or decorative elements.
--------------------------------------------------------------------------- */

.section {
  position:       relative;
  width:          100%;
  padding:        var(--section-padding);
                  /* clamp(5rem,10vw,12rem) clamp(1.5rem,8vw,10rem) */
}

/* Editorial hero (used by 404 etc.): full viewport, centred content.
   NOTE: this is a DIFFERENT element from `.hero` below — they should never
   coexist on the same node. `.hero` (image hero) anchors flex-end;
   `.section--hero` centres. */
.section--hero {
  min-height:      100vh;
  min-height:      100dvh;
  display:         flex;
  align-items:     center;
  padding-top:     calc(var(--nav-height) + var(--space-lg));
  padding-bottom:  calc(var(--banner-height) + var(--space-xl));
  padding-inline:  var(--gutter);
}

/* Compact section — reduced vertical padding */
.section--compact {
  padding-block: var(--space-lg);
}

/* Spacious section — extra breathing room */
.section--spacious {
  padding-block: var(--space-section);             /* clamp(6rem,12vw,14rem) */
}

/* Full viewport height (non-hero editorial panels) */
.section--full {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------------------
   3. SECTION BACKGROUND MODIFIERS
   Alternating rhythm: dark → light → dark → light.
   Colour values from variables.css only.
--------------------------------------------------------------------------- */

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

.section--deep {
  background: var(--deep-neutral);
  color:      var(--offwhite);
}

.section--light {
  background: var(--offwhite);
  color:      var(--charcoal);
}

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

.section--alt {
  background-color: var(--color-bg-alt, #141f28);
  color:            var(--offwhite);   /* Audit: warm ivory on dark background */
}

/* Subtle gradient — obsidian → deep-neutral for depth without imagery */
.section--gradient-dark {
  background: linear-gradient(
    160deg,
    var(--obsidian)     0%,
    var(--deep-neutral) 100%
  );
  color: var(--offwhite);
}

/* ---------------------------------------------------------------------------
   4. GRID SYSTEM
   CSS Grid — no gutters library, no Bootstrap rows.
   Uses CSS Gap with spacing variables.
--------------------------------------------------------------------------- */

/* Base grid — column count via modifier or inline custom property */
.grid {
  display:               grid;
  gap:                   var(--space-lg);
  grid-template-columns: 1fr;        /* Mobile: single column by default */
}

/* 2-column grid */
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3-column grid — our primary "three pathways" layout */
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4-column grid — core values 2×2 becomes 4-col on desktop */
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 2×2 — explicit grid used for the Core Values section */
.grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows:    repeat(2, auto);
}

/* Auto-fit responsive — items fill available space, min 280px */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Film cards — horizontal scroll on mobile, 3-col on desktop */
.grid--film {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-md);
}

/* Asymmetric split — 60/40 for editorial sections */
.grid--asymmetric {
  grid-template-columns: 3fr 2fr;
  gap:                   var(--space-lg);
}

/* Reverse asymmetric — 40/60 */
.grid--asymmetric-reverse {
  grid-template-columns: 2fr 3fr;
  gap:                   var(--space-lg);
}

/* 50/50 split — Founder section layout */
.grid--half {
  grid-template-columns: 1fr 1fr;
  gap:                   0;          /* No gap — content juxtaposition */
}

/* Tight gap variant */
.grid--tight {
  gap: var(--space-sm);
}

/* Wide gap variant */
.grid--wide {
  gap: var(--space-xl);
}

/* ---------------------------------------------------------------------------
   5. FLEX UTILITIES
   Minimal flex helpers for alignment in nav, footer, banner.
--------------------------------------------------------------------------- */

.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--start {
  display:     flex;
  align-items: flex-start;
}

.flex--end {
  display:     flex;
  align-items: flex-end;
}

.flex--column {
  display:        flex;
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--gap-sm  { gap: var(--space-sm); }
.flex--gap-md  { gap: var(--space-md); }
.flex--gap-lg  { gap: var(--space-lg); }

/* ---------------------------------------------------------------------------
   6. ARCHITECTURAL LIST
   Used for the Discovery Blueprint stages, Our Principles, etc.
   Thin gold rules between each item — no bullet points.
--------------------------------------------------------------------------- */

.arch-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.arch-list__item {
  padding-block: var(--space-md);
  border-top:    var(--gold-rule-faint);
  font-family:   var(--font-display);
  font-size:     var(--fs-h3);
  font-weight:   300;
  letter-spacing: var(--ls-heading);
  color:         inherit;
}

.arch-list__item:last-child {
  border-bottom: var(--gold-rule-faint);
}

/* Numbered variant — Roman numerals via counter */
.arch-list--numbered {
  counter-reset: arch-counter;
}

.arch-list--numbered .arch-list__item {
  display:     grid;
  /* Wider numeral column so VIII / IX / XII fit without wrapping */
  grid-template-columns: clamp(3rem, 6vw, 4.5rem) 1fr;
  gap:         var(--space-md);
  align-items: baseline;
  counter-increment: arch-counter;
}

.arch-list--numbered .arch-list__item::before {
  content:        counter(arch-counter, upper-roman);
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  color:          var(--sage);   /* Audit: decorative Roman numerals are background decoration, not accent elements */
  opacity:        0.5;
}

/* ---------------------------------------------------------------------------
   7. SPACING UTILITIES
   Explicit margin/padding helpers mapped to spacing scale.
   Kept minimal — layout is primarily handled by grid gap and section padding.
--------------------------------------------------------------------------- */

.mt-xs  { margin-top:    var(--space-xs); }
.mt-sm  { margin-top:    var(--space-sm); }
.mt-md  { margin-top:    var(--space-md); }
.mt-lg  { margin-top:    var(--space-lg); }
.mt-xl  { margin-top:    var(--space-xl); }

.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }

/* Vertical space between paired elements (eyebrow → headline → body) */
.stack > * + * {
  margin-top: var(--space-md);
}

.stack--tight > * + * {
  margin-top: var(--space-sm);
}

.stack--loose > * + * {
  margin-top: var(--space-lg);
}

/* ---------------------------------------------------------------------------
   8. TEXT ALIGNMENT UTILITIES
--------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   9. VISIBILITY & DISPLAY UTILITIES
--------------------------------------------------------------------------- */

.visually-hidden {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

.hide-mobile  { display: block; }
.show-mobile  { display: none; }

/* ---------------------------------------------------------------------------
   10. SECTION CONTENT ALIGNMENT HELPERS
   Brief calls for centred single-line statements (Clarity Line section)
   and left-aligned editorial blocks. These helpers apply to section children.
--------------------------------------------------------------------------- */

/* Centres the content block within a section — works inside both block and flex parents */
.section__content--centred {
  max-width:    var(--content-width);
  margin-inline: auto;
  justify-self: center;   /* grid / flex parent compatibility */
  align-self:   center;
  text-align:   center;
  width:        100%;
}

.section__content--left {
  max-width:    var(--content-width);
  margin-inline: 0;
  justify-self: start;
  align-self:   start;
  text-align:   left;
  width:        100%;
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE BREAKPOINTS
   Mobile-first. No framework. Breakpoints align with content, not devices.

   Breakpoints:
   · sm: 640px   (large phones / small tablets)
   · md: 768px   (tablets)
   · lg: 1024px  (small laptops)
   · xl: 1280px  (desktop)
   · 2xl: 1440px (wide desktop — matches container max)
--------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  /* 3-col grids collapse to 2 */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Asymmetric splits become equal */
  .grid--asymmetric,
  .grid--asymmetric-reverse {
    grid-template-columns: 1fr;
  }

  /* Film cards: 2-col on tablet */
  .grid--film {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  /* All multi-column grids collapse to single column */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--2x2,
  .grid--half,
  .grid--asymmetric,
  .grid--asymmetric-reverse {
    grid-template-columns: 1fr;
  }

  /* Film cards: horizontal scroll on mobile */
  .grid--film {
    grid-template-columns: repeat(3, 80vw);
    overflow-x:            auto;
    scroll-snap-type:      x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom:        var(--space-sm);
  }

  .grid--film > * {
    scroll-snap-align: start;
  }

  /* Mobile visibility swaps */
  .hide-mobile  { display: none; }
  .show-mobile  { display: block; }

  /* Reduce section padding on mobile */
  .section {
    padding-block: clamp(4rem, 8vw, 8rem);
  }

}

@media (max-width: 640px) {

  .section--hero {
    padding-top: calc(var(--space-lg) + 60px);
    align-items: flex-start;
  }

}

/* ===========================================================================
   HERO SECTION — full-viewport cinematic hero (Task 3)
   .hero replaces .section--hero. Media layer handles background-image parallax.
   Content anchored to bottom-left, Chanel editorial style.
=========================================================================== */

.hero {
  position:   relative;
  width:      100%;
  /* Was a rigid `height: 100svh` — clipped tall content behind the fixed nav.
     Now grows to fit content while still filling the viewport on tall screens. */
  min-height: 100svh;
  display:    flex;
  align-items: flex-end;
  overflow:   hidden;
}



.hero__media {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  will-change:         transform;
  transform:           scale(1.05);
  transition:          var(--transition-hero-img, transform 1800ms cubic-bezier(0.23, 1, 0.32, 1));
}

.hero.is-visible .hero__media { transform: scale(1); }

.hero__overlay {
  position:   absolute;
  inset:      0;
  background: var(--color-overlay, rgba(11, 29, 42, 0.45));
  z-index:    1;
}

.hero__content {
  position:     relative;
  z-index:      2;
  width:        100%;
  max-width:    var(--container-max, 1320px);
  margin:       0 auto;
  /* Top padding reserves the fixed nav (var(--nav-height) = 72px) so tall
     hero copy can't slide under it; bottom padding clears the sticky banner. */
  padding-top:    calc(var(--nav-height) + var(--space-md));
  padding-inline: var(--gutter);
  padding-bottom: calc(var(--banner-height) + var(--space-lg));
}

.hero__content h1 {
  font-family:    var(--font-display, 'Cormorant Garamond', serif);
  font-size:      var(--fs-hero);
  font-weight:    300;
  line-height:    var(--lh-heading, 1.1);
  letter-spacing: var(--ls-hero, 0.05em);
  color:          var(--offwhite, #F5F3EE);
  margin:         0 0 var(--space-md);
  max-width:      820px;
  overflow-wrap:  break-word;
}

.hero__content p {
  font-family:    var(--font-body, 'Montserrat', sans-serif);
  font-size:      var(--fs-body, clamp(0.9rem, 1.2vw, 1.05rem));
  font-weight:    300;
  line-height:    var(--lh-body, 1.9);
  letter-spacing: 0.04em;
  color:          var(--offwhite, #F5F3EE);   /* Audit: warm ivory vs clinical white */
  opacity:        0.78;
  max-width:      var(--content-max-text, 580px);
  margin:         0;
}

.hero__scroll-cue {
  position:  absolute;
  bottom:    calc(var(--banner-height) + var(--space-sm));
  left:      50%;
  transform: translateX(-50%);
  z-index:   2;
}

.hero__scroll-line {
  display:          block;
  width:            1px;
  height:           64px;
  background-color: var(--gold, #C6A96B);
  transform-origin: top center;
  animation:        scrollLineDrop 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

@keyframes scrollLineDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (max-width: 768px) {
  .hero__content h1  { font-size: clamp(2.4rem, 8vw, 3.8rem); }
  .hero__scroll-cue  { display: none; }
}

/* ===========================================================================
   SECTION UTILITY CLASSES
   Typography and layout utility classes for use within sections.
=========================================================================== */

.section-eyebrow {
  display:        block;
  font-family:    var(--font-body, 'Montserrat', sans-serif);
  font-size:      var(--fs-label, 0.70rem);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow, 0.28em);
  text-transform: uppercase;
  color:          var(--gold, #C6A96B);   /* Brand law: section eyebrows always gold (overridden on light bgs below) */
  margin-bottom:  var(--space-sm, 1rem);
}

.section-rule {
  display:          block;
  width:            0;
  height:           1px;
  background-color: var(--gold, #C6A96B);
  margin:           1rem 0 1.8rem;
  transition:       width 800ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
}
.is-visible .section-rule { width: 50px; }

.section-heading {
  font-family:    var(--font-display, 'Cormorant Garamond', serif);
  font-size:      var(--fs-h1, clamp(2.2rem, 4vw, 4rem));
  font-weight:    300;
  line-height:    var(--lh-heading, 1.1);
  letter-spacing: var(--ls-heading, 0.03em);
  margin:         0 0 var(--space-element, clamp(2rem, 4vw, 4rem));
  max-width:      720px;
}

.section-body {
  font-family:    var(--font-body, 'Montserrat', sans-serif);
  font-size:      var(--fs-body, clamp(0.9rem, 1.2vw, 1.05rem));
  font-weight:    300;
  line-height:    var(--lh-body, 1.9);
  letter-spacing: 0.02em;
  color:          inherit;
  opacity:        0.78;
  max-width:      var(--content-max-text, 580px);
}

.section-pullquote {
  font-family:    var(--font-display, 'Cormorant Garamond', serif);
  font-size:      var(--fs-h2, clamp(1.6rem, 3vw, 2.8rem));
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-subhead, 1.35);
  letter-spacing: 0.02em;
  max-width:      680px;
}

.section-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(3rem, 6vw, 8rem);
  align-items:           start;
}

@media (max-width: 768px) {
  .section-split { grid-template-columns: 1fr; gap: 3rem; }
}

/* ════════════════════════════════════════════════
   FROM: css/navigation.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — NAVIGATION
   navigation.css
   Fixed header, logo, desktop links, Journeys dropdown, mobile hamburger overlay.
   JS adds .scrolled on .site-nav at 80px scroll.
   All values from variables.css.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. SITE HEADER — Fixed, full-width container
--------------------------------------------------------------------------- */

.site-nav {
  position:     fixed;
  top:          0;
  left:         0;
  right:        0;
  z-index:      var(--z-nav);
  height:       var(--nav-height);

  /* Always-visible frosted dark bar — premium, never a ghost */
  background-color:        #0B1D2A;
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:           0.5px solid rgba(255, 255, 255, 0.07);
  transition:
    background-color 600ms cubic-bezier(0.23, 1, 0.32, 1),
    backdrop-filter   600ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-backdrop-filter 600ms cubic-bezier(0.23, 1, 0.32, 1),
    height            400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.site-nav.scrolled,
.site-nav.nav--scrolled {
  background-color:        #0B1D2A;
  backdrop-filter:         blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom:           0.5px solid rgba(198, 169, 107, 0.12);
  height:                  calc(var(--nav-height) - 8px);
}

/* ---------------------------------------------------------------------------
   2. NAV INNER — Flex row: logo | links | cta | hamburger
--------------------------------------------------------------------------- */

.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.5rem var(--gutter);
  gap:             var(--space-lg);
}

/* ---------------------------------------------------------------------------
   3. LOGO — wordmark / image switcher
--------------------------------------------------------------------------- */

.nav__logo {
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  flex-shrink:     0;
  gap:             0.25rem;
}

.nav__logo-name {
  font-family:    var(--font-display);
  font-size:      1.3rem;
  font-weight:    400;
  letter-spacing: 0.15em;
  color:          var(--offwhite);   /* Audit: warm ivory vs clinical white on obsidian */
  line-height:    1;
  transition:     color var(--transition-fast);
}

.nav__logo-sub {
  font-family:    var(--font-body);
  font-size:      0.6rem;
  font-weight:    400;
  letter-spacing: 0.2em;
  color:          var(--gold);
  text-transform: uppercase;
  line-height:    1;
}

.nav__logo:hover .nav__logo-name,
.nav__logo:focus-visible .nav__logo-name {
  color: var(--offwhite);
}

.nav__logo-img {
    display: block;
    width: auto;
    height: 38px;
    max-width: 170px;
    object-fit: contain;
}

.nav__logo-text {
    font-family: var(--font-logo);   /* TB monogram — League Spartan */
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: var(--ls-nav);
    color: var(--offwhite, #F5F3EE);   /* Audit: warm ivory on dark nav */
    text-transform: uppercase;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   4. DESKTOP NAV LINKS — Montserrat UPPERCASE, gold underline on hover
--------------------------------------------------------------------------- */

.nav__links {
  display:     flex;
  align-items: center;
  gap:         var(--space-lg);
  list-style:  none;
  margin:      0;
  padding:     0;
  margin-left: auto;
}

.nav__link {
  position:        relative;
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  font-weight:     400;
  letter-spacing:  var(--ls-nav);
  text-transform:  uppercase;
  color:           var(--offwhite);   /* Audit: warm ivory on obsidian — not clinical white */
  text-decoration: none;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  line-height:     1;
  transition:      color var(--transition-fast);
}

/* Gold underline: width 0 → 100% on hover */
.nav__link::after {
  content:    '';
  position:   absolute;
  bottom:     -5px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width var(--transition-slow);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  width: 100%;
}

/* Active page — gold color + small dot beneath */
.nav__link[aria-current="page"] {
  color: var(--gold);
}

.nav__link[aria-current="page"]::before {
  content:       '';
  position:      absolute;
  bottom:        -11px;
  left:          50%;
  transform:     translateX(-50%);
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--gold);
}

.nav__link[aria-current="page"]::after {
  display: none;
}

/* ---------------------------------------------------------------------------
   5. REQUEST INVITATION — Outlined gold button (far right)
--------------------------------------------------------------------------- */

.nav__cta {
  flex-shrink:     0;
  position:        relative;
  overflow:        hidden;
  isolation:       isolate;

  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  font-weight:     400;
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--gold);
  background:      transparent;
  border:          var(--gold-rule);
  padding:         0.7rem 1.4rem;
  cursor:          pointer;

  transition: color var(--transition-medium);
}

/* Gold fill sweeps in from left on hover */
.nav__cta::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--gold);
  transform:  translateX(-101%);
  transition: transform var(--transition-medium);
  z-index:    -1;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  color: var(--obsidian);
}

.nav__cta:hover::before,
.nav__cta:focus-visible::before {
  transform: translateX(0);
}

/* ---------------------------------------------------------------------------
   6. HAMBURGER BUTTON
--------------------------------------------------------------------------- */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    /* 44x44 minimum touch target — WCAG 2.5.5 / Apple HIG */
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    /* Sits above the menu overlay so the close-X is clickable on top of it */
    z-index: calc(var(--z-menu) + 10);
}

.hamburger__line {
    display: block;
    height: 1px;
    background-color: var(--white, #FFFFFF);
    transform-origin: center center;
    transition:
        transform        500ms cubic-bezier(0.23, 1, 0.32, 1),
        opacity          400ms cubic-bezier(0.23, 1, 0.32, 1),
        width            400ms cubic-bezier(0.23, 1, 0.32, 1),
        background-color var(--transition-medium, 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.hamburger__line--top    { width: 28px; }
.hamburger__line--bottom { width: 18px; }

/* Two-line × cross: gap=6px, line-height=1px → translateY = (6/2) + (1/2) = 3.5 → 4px */
.hamburger.is-open .hamburger__line--top    { width: 24px; transform: translateY(4px) rotate(45deg); }
.hamburger.is-open .hamburger__line--bottom { width: 24px; transform: translateY(-4px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   7. MOBILE MENU OVERLAY — @media ≤ 768px
--------------------------------------------------------------------------- */

/* Structural containment: mobile menu is invisible by default at all viewport sizes.
   The @media block below re-enables it with display:flex !important for mobile only. */
#mobile-nav-menu {
    display: none;
}

/* Ensure list items inside the mobile menu have no layout impact on desktop,
   even if the container somehow leaks out of its media context. */
@media (min-width: 1025px) {
    #mobile-nav-menu,
    #mobile-nav-menu > li {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .hamburger { display: flex; }

    #mobile-nav-menu {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;   /* Mobile Safari: clear chrome */
        background-color: var(--obsidian, #0B1D2A);
        z-index: var(--z-menu, 1500);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px);
        transition:
            opacity    500ms cubic-bezier(0.23, 1, 0.32, 1),
            transform  500ms cubic-bezier(0.23, 1, 0.32, 1),
            visibility 500ms cubic-bezier(0.23, 1, 0.32, 1);
        pointer-events: none;
    }

    #mobile-nav-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: all;
    }

    #mobile-nav-menu > li {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity   450ms cubic-bezier(0.23, 1, 0.32, 1),
            transform 450ms cubic-bezier(0.23, 1, 0.32, 1);
        text-align: center;
        padding: 0.55rem 0;
    }

    #mobile-nav-menu.is-open > li:nth-child(1)  { opacity:1; transform:translateY(0); transition-delay:  80ms; }
    #mobile-nav-menu.is-open > li:nth-child(2)  { opacity:1; transform:translateY(0); transition-delay: 140ms; }
    #mobile-nav-menu.is-open > li:nth-child(3)  { opacity:1; transform:translateY(0); transition-delay: 200ms; }
    #mobile-nav-menu.is-open > li:nth-child(4)  { opacity:1; transform:translateY(0); transition-delay: 260ms; }
    #mobile-nav-menu.is-open > li:nth-child(5)  { opacity:1; transform:translateY(0); transition-delay: 320ms; }
    #mobile-nav-menu.is-open > li:nth-child(6)  { opacity:1; transform:translateY(0); transition-delay: 380ms; }
    #mobile-nav-menu.is-open > li:nth-child(7)  { opacity:1; transform:translateY(0); transition-delay: 440ms; }
    #mobile-nav-menu.is-open > li:nth-child(8)  { opacity:1; transform:translateY(0); transition-delay: 500ms; }
    #mobile-nav-menu.is-open > li:nth-child(9)  { opacity:1; transform:translateY(0); transition-delay: 560ms; }
    #mobile-nav-menu.is-open > li:nth-child(10) { opacity:1; transform:translateY(0); transition-delay: 620ms; }

    #mobile-nav-menu a {
        display: inline-block;
        font-family: var(--font-display, 'Cormorant Garamond', serif);
        font-size: clamp(1.15rem, 3.4vw, 1.65rem);
        font-weight: 300;
        letter-spacing: 0.08em;
        color: var(--offwhite, #F5F3EE);   /* Audit: warm ivory on obsidian overlay */
        text-decoration: none;
        text-transform: uppercase;
        transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1),
                    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #mobile-nav-menu a:hover,
    #mobile-nav-menu a.active,
    #mobile-nav-menu a[aria-current="page"] { color: var(--gold, #C6A96B); }

    /* Mobile CTA — gold-bordered button-style link, visually distinct from text nav items */
    #mobile-nav-menu .nav__mobile-cta-item {
        margin-top: var(--space-md);
        padding: 0;
    }

    #mobile-nav-menu .nav__mobile-link--cta {
        display: inline-block;
        padding: 0.65rem 1.6rem;
        border: 1px solid var(--gold, #C6A96B);
        color: var(--gold, #C6A96B);
        font-size: clamp(0.78rem, 2.4vw, 0.92rem);
        font-family: var(--font-body, 'Montserrat', sans-serif);
        letter-spacing: var(--ls-label, 0.22em);
        text-transform: uppercase;
        font-weight: 400;
        transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1),
                    background-color 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #mobile-nav-menu .nav__mobile-link--cta:hover,
    #mobile-nav-menu .nav__mobile-link--cta[aria-current="page"] {
        color: var(--obsidian, #0B1D2A);
        background-color: var(--gold, #C6A96B);
    }

    #mobile-nav-menu .nav__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        padding: 0.5rem 0 0;
        display: none;
    }

    #mobile-nav-menu .nav__item--dropdown.dropdown--open .nav__dropdown { display: block; }

    #mobile-nav-menu .nav__dropdown a {
        font-size: clamp(0.85rem, 2.6vw, 1.05rem);
        color: var(--sage, #7A8F85);
        letter-spacing: 0.1em;
        padding: 0.3rem 0;
    }

    #mobile-nav-menu .nav__dropdown a:hover { color: var(--gold, #C6A96B); }
}

/* ---------------------------------------------------------------------------
   8. DESKTOP DROPDOWN — @media ≥ 1025px
--------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .nav__item--dropdown { position: relative; }

    .nav__dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background-color: var(--obsidian, #0B1D2A);
        border: 0.5px solid rgba(198, 169, 107, 0.35);
        padding: 1rem 0;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition:
            opacity    300ms cubic-bezier(0.23, 1, 0.32, 1),
            transform  300ms cubic-bezier(0.23, 1, 0.32, 1),
            visibility 300ms;
        z-index: 500;
        pointer-events: none;
    }

    .nav__item--dropdown::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 14px;
        background: transparent;
        z-index: 499;
    }

    .nav__item--dropdown:hover .nav__dropdown,
    .nav__item--dropdown:focus-within .nav__dropdown,
    .nav__item--dropdown.dropdown--open .nav__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: all;
    }

    .nav__dropdown li a {
        display: block;
        padding: 0.55rem 1.4rem;
        font-family: var(--font-body, 'Montserrat', sans-serif);
        font-size: 0.72rem;
        font-weight: 400;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--offwhite, #F5F3EE);   /* Audit: warm ivory on obsidian dropdown */
        opacity: 0.70;
        text-decoration: none;
        transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
                    color 200ms cubic-bezier(0.23, 1, 0.32, 1);
        white-space: nowrap;
    }

    .nav__dropdown li a:hover { opacity: 1; color: var(--gold, #C6A96B); }
}

/* ---------------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINTS
--------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav__links {
    gap: var(--space-md);
  }
}

/* Single mobile breakpoint matched to the menu overlay (1024px) —
   raised from 768px so iPad Air portrait (820px) gets the hamburger
   instead of an overflowing desktop nav row. */
@media (max-width: 1024px) {
  .nav__links,
  .nav__cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

@media (max-width: 640px) {
  .nav__inner {
    padding: 1rem var(--space-md);
  }

  .nav__logo-sub {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   10. DESKTOP LINK OPACITY — floating nav aesthetic
   Links render at 0.65 opacity by default; full opacity + gold on active/hover.
--------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .site-nav .nav__link {
    font-family:     var(--font-body, 'Montserrat', sans-serif);
    font-size:       0.68rem;
    font-weight:     400;
    letter-spacing:  var(--ls-nav, 0.13em);
    text-transform:  uppercase;
    color:           var(--offwhite, #F5F3EE);   /* Audit: warm ivory on obsidian nav */
    opacity:         0.65;
    text-decoration: none;
    transition:      opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
                     color 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .site-nav .nav__link:hover,
  .site-nav .nav__link:focus-visible,
  .site-nav .nav__link[aria-current="page"],
  .site-nav .nav__link.active {
    opacity: 1;
    color:   var(--gold, #C6A96B);
  }
}

/* ---------------------------------------------------------------------------
   11. CONTRAST INVERSION — .nav--inverted
   JS toggles this class via IntersectionObserver when the nav passes over
   a light-background section (.section--light or computed luminance > 0.45).
   All color transitions use --transition-medium (500ms) for luxury pacing.
--------------------------------------------------------------------------- */

/* Background: flip to light canvas so text on top reads correctly */
.site-nav.nav--inverted {
  background-color:        rgba(245, 243, 238, 0.92);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:           1px solid rgba(198, 169, 107, 0.18);
}

/* Logo wordmark — obsidian on light ground */
.site-nav.nav--inverted .nav__logo-name,
.site-nav.nav--inverted .nav__logo-text {
  color:      var(--obsidian, #0B1D2A);
  transition: color var(--transition-medium, 500ms ease);
}

/* Nav links — mobile-first base */
.site-nav.nav--inverted .nav__link {
  color:      var(--obsidian, #0B1D2A);
  transition: color 500ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Nav links — desktop override (higher specificity beats section 10's .site-nav .nav__link) */
@media (min-width: 1025px) {
  .site-nav.nav--inverted .nav__link {
    color:      var(--obsidian, #0B1D2A);
    opacity:    0.65;
    transition: color 500ms cubic-bezier(0.23, 1, 0.32, 1),
                opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .site-nav.nav--inverted .nav__link:hover,
  .site-nav.nav--inverted .nav__link:focus-visible,
  .site-nav.nav--inverted .nav__link[aria-current="page"],
  .site-nav.nav--inverted .nav__link.active {
    opacity: 1;
    color:   var(--gold, #C6A96B);
  }
}

/* Hamburger lines — dark on light ground */
.site-nav.nav--inverted .hamburger__line {
  background-color: var(--obsidian, #0B1D2A);
}

/* ════════════════════════════════════════════════
   FROM: css/footer.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — FOOTER
   footer.css
   Three-column layout: Identity | Navigation | Private List.
   Background: --obsidian. Thin gold rule above.
   Stacks to single column on mobile.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. FOOTER WRAPPER
--------------------------------------------------------------------------- */

.footer {
  background: var(--obsidian);
  color:      var(--offwhite);
  position:   relative;
}

/* The .gold-rule above the footer — animated by animations.js */
.footer__rule {
  /* Styles inherited from .gold-rule in base.css */
  /* Width 0 → 100% when .is-visible is added on scroll entry */
}

/* ---------------------------------------------------------------------------
   2. FOOTER INNER — contains all three columns + bottom bar
--------------------------------------------------------------------------- */

.footer__inner {
  padding:    var(--space-xl) var(--gutter);
}

/* ---------------------------------------------------------------------------
   3. THREE-COLUMN GRID
--------------------------------------------------------------------------- */

.footer__grid {
  display:               grid;
  /* Identity / Navigation / Private List — nav column widened so the 8 links breathe */
  grid-template-columns: 1.3fr 1.2fr 1.3fr;
  gap:                   var(--space-xl);
  padding-bottom:        var(--space-xl);
}

/* ---------------------------------------------------------------------------
   4. COLUMN 1 — Identity
   TOURBIRTH / THE HOUSE OF CONNECTION / EST. SINCE 2017 / pull quote
--------------------------------------------------------------------------- */

.footer__col--identity {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.footer__logo-link {
  display:         flex;
  flex-direction:  column;
  gap:             0.35rem;
  text-decoration: none;
}

.footer__logo-name {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  font-weight:    300;
  letter-spacing: 0.15em;
  color:          var(--offwhite);
  line-height:    1;
  transition:     color var(--transition-fast);
}

.footer__logo-link:hover .footer__logo-name,
.footer__logo-link:focus-visible .footer__logo-name {
  color: var(--white);
}

.footer__logo-sub {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color:          var(--gold);
}

.footer__logo-est {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color:          var(--sage);
  opacity:        0.65;
  margin-top:     0.4rem;
}

.footer__quote {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-subhead);
  color:          rgba(245, 243, 238, 0.65);
  margin-top:     var(--space-md);
}

/* ---------------------------------------------------------------------------
   5. COLUMN 2 — Navigation links
--------------------------------------------------------------------------- */

.footer__col--nav {
  display:        flex;
  flex-direction: column;
  padding-top:    0.25rem;
}

.footer__nav-list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            0.9rem;
}

.footer__nav-link {
  position:        relative;
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       var(--fs-small);
  font-weight:     400;
  letter-spacing:  var(--ls-nav);
  text-transform:  uppercase;
  color:           rgba(245, 243, 238, 0.6);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

/* Gold underline draw on hover */
.footer__nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     -3px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width var(--transition-slow);
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
  color: var(--gold);
}

.footer__nav-link:hover::after,
.footer__nav-link:focus-visible::after {
  width: 100%;
}

/* "Request Invitation" stands apart — already gold */
.footer__nav-link--cta {
  color:       var(--gold);
  margin-top:  var(--space-sm);
  font-weight: 400;
}

.footer__nav-link--cta:hover,
.footer__nav-link--cta:focus-visible {
  color: var(--white);
}

/* ---------------------------------------------------------------------------
   6. COLUMN 3 — Private List (email capture form)
--------------------------------------------------------------------------- */

.footer__col--list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
  padding-top:    0.25rem;
}

.footer__list-heading {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
  color:          var(--offwhite);
  line-height:    var(--lh-heading);
}

.footer__list-desc {
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.04em;
  color:          rgba(245, 243, 238, 0.6);
}

/* Email capture form */
.footer__form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  margin-top:     var(--space-xs);
}

.footer__form-field {
  position: relative;
}

.footer__form-field input {
  width:          100%;
  background:     transparent;
  border:         none;
  border-bottom:  var(--gold-rule-thin);
  padding:        var(--space-sm) 0;
  font-family:    var(--font-display);
  font-size:      var(--fs-body);
  font-weight:    400;
  color:          var(--offwhite);
  letter-spacing: 0.02em;
  outline:        none;
  transition:     border-color var(--transition-fast),
                  box-shadow   var(--transition-fast);
}

.footer__form-field input::placeholder {
  font-family: var(--font-display);
  font-style:  italic;
  color:       var(--sage);
  opacity:     0.7;
}

.footer__form-field input:focus,
.footer__form-field input:focus-visible {
  outline:             none;
  border-bottom-color: var(--gold);
  box-shadow:          0 2px 12px color-mix(in srgb, var(--gold) 18%, transparent);
}

/* "Join Quietly" button */
.footer__form-btn {
  align-self:     flex-start;
  position:       relative;
  overflow:       hidden;
  isolation:      isolate;
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--gold);
  background:     transparent;
  border:         var(--gold-rule);
  padding:        0.65rem 1.6rem;
  cursor:         pointer;
  margin-top:     var(--space-xs);
  transition:     color var(--transition-medium);
}

.footer__form-btn::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--gold);
  transform:  translateX(-101%);
  transition: transform var(--transition-medium);
  z-index:    -1;
}

.footer__form-btn:hover,
.footer__form-btn:focus-visible {
  color: var(--obsidian);
}

.footer__form-btn:hover::before,
.footer__form-btn:focus-visible::before {
  transform: translateX(0);
}

/* ---------------------------------------------------------------------------
   7. BOTTOM BAR — thin gold rule above, © left, location right
--------------------------------------------------------------------------- */

.footer__bottom {
  border-top: var(--gold-rule-faint);
  padding-top: var(--space-md);
}

.footer__bottom-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
}

.footer__copy,
.footer__location,
.footer__legal-link {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          rgba(245, 243, 238, 0.38);
}
.footer__legal-link:hover { color: var(--gold); }

/* ---------------------------------------------------------------------------
   8. RESPONSIVE
--------------------------------------------------------------------------- */

/* Mid breakpoint — soften the 3→2 column transition */
@media (max-width: 1200px) {
  .footer__grid {
    gap: var(--space-lg);
  }
}

@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-lg);
  }

  /* Private list spans full width */
  .footer__col--list {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }

  .footer__col--list {
    grid-column: auto;
  }

  .footer__inner {
    padding: var(--space-lg) var(--space-md);
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-xs);
  }
}

.footer__logo-img {
    display: block;
    width: auto;
    height: 32px;
    max-width: 150px;
    object-fit: contain;
    opacity: 0.80;
    transition: opacity var(--transition-fast, 300ms ease);
}
.footer__logo-img:hover { opacity: 1; }

.footer__logo-text {
    font-family: var(--font-logo);   /* TB monogram — League Spartan */
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: var(--ls-nav);
    color: var(--offwhite, #F5F3EE);   /* Audit: warm ivory on obsidian footer */
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.80;
    transition: opacity var(--transition-fast, 300ms ease);
}
.footer__logo-text:hover { opacity: 1; }


/* ---------------------------------------------------------------------------
   9. SOCIAL ICONS
   Rendered conditionally in footer.php — one icon per active handle.
   Style: thin gold-on-dark, hover lifts brightness, no fills.
--------------------------------------------------------------------------- */

.footer__social {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          var(--space-md);
  margin-top:   var(--space-md);
}

.footer__social-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  color:           rgba(245, 243, 238, 0.55);  /* offwhite at low opacity */
  text-decoration: none;
  border:          1px solid transparent;
  transition:      color        var(--transition-fast),
                   border-color var(--transition-fast),
                   transform    var(--transition-fast);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color:        var(--gold);
  border-color: rgba(198, 169, 107, 0.30);
  transform:    translateY(-1px);
}

.footer__social-link:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
}

.footer__social-icon {
  display:    block;
  width:      20px;
  height:     20px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   FROM: css/banner.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — WAITLIST BANNER
   banner.css
   Thin bar fixed to the bottom of every viewport.
   Deep neutral background. Slow-pulsing gold text. Dismissable via JS.
   banner.js adjusts body padding-bottom to match banner height.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. BANNER WRAPPER — Fixed to viewport bottom
--------------------------------------------------------------------------- */

.banner {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    var(--z-banner);
  background: var(--deep-neutral);
  border-top: 1px solid rgba(198, 169, 107, 0.2);

  /* Slide-out transition when dismissed */
  transition: transform var(--transition-medium),
              opacity   var(--transition-medium);
}

.banner.is-dismissed {
  transform:      translateY(100%);
  opacity:        0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   2. BANNER INNER — Flex row: text + CTA | dismiss button
--------------------------------------------------------------------------- */

.banner__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.85rem var(--gutter);
  gap:             var(--space-md);
}

/* ---------------------------------------------------------------------------
   3. BANNER TEXT — Slow-pulsing gold Montserrat
--------------------------------------------------------------------------- */

.banner__text {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0.6rem var(--space-md);

  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gold);
}

/* ---------------------------------------------------------------------------
   4. BANNER CTA LINK — "Join Our Private List →"
   Scrolls to footer email capture (#footer-list)
--------------------------------------------------------------------------- */

.banner__link {
  position:        relative;
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       0.72rem;
  font-weight:     400;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  color:           var(--gold);
  text-decoration: none;
  white-space:     nowrap;
}

/* Underline draw on hover */
.banner__link::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width var(--transition-slow);
}

.banner__link:hover::after,
.banner__link:focus-visible::after {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   5. DISMISS BUTTON — × icon, muted sage, rotates on hover
--------------------------------------------------------------------------- */

.banner__dismiss {
  flex-shrink:    0;
  font-family:    var(--font-body);
  font-size:      1.1rem;
  font-weight:    300;
  line-height:    1;
  color:          var(--sage);
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        0.2rem 0.5rem;
  opacity:        0.65;
  transition:     color     var(--transition-fast),
                  opacity   var(--transition-fast),
                  transform var(--transition-fast);
}

.banner__dismiss:hover,
.banner__dismiss:focus-visible {
  color:     var(--gold);
  opacity:   1;
  transform: rotate(90deg);
}

/* ---------------------------------------------------------------------------
   6. RESPONSIVE
--------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .banner__inner {
    padding: 0.75rem var(--space-md);
    gap:     var(--space-sm);
  }

  .banner__text {
    font-size:      0.64rem;
    letter-spacing: 0.09em;
  }

  .banner__link {
    font-size:      0.64rem;
    letter-spacing: 0.09em;
  }
}

/* ---------------------------------------------------------------------------
   7. REDUCED MOTION — disable pulse, keep banner visible
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .banner__text {
    animation: none;
    opacity:   1;
  }

  .banner.is-dismissed {
    display: none;
  }

  .banner {
    transition: none;
  }
}

/* ════════════════════════════════════════════════
   FROM: css/animations.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — ANIMATION & MOTION SYSTEM
   animations.css
   All @keyframes, reveal system, hero stagger, page transitions,
   loading screen, scroll indicator, and reduced-motion overrides.

   Motion law: slow, intentional, cinematic — never snappy or bouncy.
   Durations and easings always use CSS variables from variables.css.
   ============================================================================= */

/* ===========================================================================
   1. @KEYFRAMES LIBRARY
=========================================================================== */

/* Loading screen — letter by letter wordmark reveal */
@keyframes tb-letter-in {
  from {
    opacity:   0;
    transform: translateY(14px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Loading screen tagline — simple fade */
@keyframes tb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Loading overlay exit — wipes upward via clip-path */
@keyframes tb-overlay-exit {
  from { clip-path: inset(0 0 0%  0); }
  to   { clip-path: inset(0 0 100% 0); }
}

/* Hero elements — fade up into position on page ready */
@keyframes tb-hero-reveal {
  from {
    opacity:   0;
    transform: translateY(25px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Scroll indicator line — slow height pulse */
@keyframes tb-scroll-line {
  0%, 100% { opacity: 0.85; transform: scaleY(1); }
  50%      { opacity: 0.35; transform: scaleY(0.6); }
}

/* Scroll indicator chevron — drifts downward */
@keyframes tb-scroll-drift {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  60%      { opacity: 0.3;  transform: translateY(8px); }
}

/* Cursor input pulse — declared in cursor.css; mirrored here for registry */
@keyframes cursor-input-pulse {
  0%, 100% {
    opacity:   1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity:   0.45;
    transform: translate(-50%, -50%) scale(0.55);
  }
}

/* Gold shimmer — subtle sheen across text, used sparingly */
@keyframes tb-gold-shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ===========================================================================
   2. BRANDED LOADING SCREEN
   Full-screen obsidian overlay. JS (loading.js) controls class toggles.
   .loading-screen is injected by loading.js; exits via .is-done.
   Only shown once per session (sessionStorage flag).
=========================================================================== */

.loading-screen {
  position:        fixed;
  inset:           0;
  z-index:         calc(var(--z-cursor) + 10);
  background:      var(--obsidian);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-md);

  /* Exit: clip-path sweeps upward to reveal page beneath */
  transition: clip-path var(--dur-page) var(--ease-cinematic);
  clip-path:  inset(0 0 0% 0);
}

.loading-screen.is-done {
  clip-path:      inset(0 0 100% 0);
  pointer-events: none;
}

/* Wordmark letter container */
.loading-screen__wordmark {
  display:     flex;
  align-items: baseline;
  gap:         0.06em;
  overflow:    hidden;
}

/* Individual animated letters */
.loading-screen__letter {
  font-family:    var(--font-display);
  font-size:      clamp(2.2rem, 7vw, 5.5rem);
  font-weight:    300;
  letter-spacing: var(--ls-ultra);
  color:          var(--offwhite);
  opacity:        0;
  transform:      translateY(14px);
  animation:      tb-letter-in var(--dur-slow) var(--ease-cinematic) forwards;
}

/* Stagger each letter — CSS fallback; JS also sets inline delay */
.loading-screen__letter:nth-child(1)  { animation-delay: 0.05s; }
.loading-screen__letter:nth-child(2)  { animation-delay: 0.12s; }
.loading-screen__letter:nth-child(3)  { animation-delay: 0.19s; }
.loading-screen__letter:nth-child(4)  { animation-delay: 0.26s; }
.loading-screen__letter:nth-child(5)  { animation-delay: 0.33s; }
.loading-screen__letter:nth-child(6)  { animation-delay: 0.40s; }
.loading-screen__letter:nth-child(7)  { animation-delay: 0.47s; }
.loading-screen__letter:nth-child(8)  { animation-delay: 0.54s; }
.loading-screen__letter:nth-child(9)  { animation-delay: 0.61s; }

/* Tagline beneath wordmark */
.loading-screen__tagline {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        0;
  animation:      tb-fade-in var(--dur-slow) var(--ease-luxury) 0.85s forwards;
}

/* ===========================================================================
   3. PAGE TRANSITION OVERLAY
   Created by transitions.js as <div id="page-transition-overlay">.
   Starts at opacity: 1, fades to 0 on page load.
   On link click: is-hidden removed → fades back in → browser navigates.
=========================================================================== */

#page-transition-overlay {
  position:         fixed;
  inset:            0;
  background-color: var(--obsidian);
  z-index:          var(--z-overlay);
  opacity:          1;
  pointer-events:   none;
  transition:       opacity var(--dur-slow) var(--ease-cinematic);
  will-change:      opacity;
}

#page-transition-overlay.is-hidden { opacity: 0; }

/* ===========================================================================
   4. SCROLL REVEAL SYSTEM
   [data-reveal] is the selector — no extra class needed.
   IntersectionObserver adds .is-visible when element enters viewport.
   Transition: 900ms cinematic easing.
=========================================================================== */

[data-reveal] {
  opacity:   0;
  transform: translateY(36px);
  transition:
    opacity   900ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
}

[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ===========================================================================
   5. STAGGER SYSTEM
   Parent carries [data-stagger]. CSS-defined nth-child delays (no JS inline).
   .is-visible added to parent by IntersectionObserver.
=========================================================================== */

[data-stagger] > * {
  opacity:   0;
  transform: translateY(24px);
  transition:
    opacity   800ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Stagger delays applied via JS inline styles (130ms increments) — no CSS nth-child overrides needed */

/* ===========================================================================
   5b. GOLD RULE — state rules only (base definition lives in base.css)
=========================================================================== */

.is-visible .gold-rule,
.gold-rule.is-visible { width: 60px; }

/* ===========================================================================
   6. HERO SEQUENCE
   Elements inside .hero-sequence stagger in after the loading screen exits.
   JS (loading.js) adds body.hero-ready once the overlay is fully done.
   nth-child delays mirror the brief spec: 200ms, 400ms, 600ms, 800ms, 1000ms.
=========================================================================== */

.hero-sequence > * {
  opacity:    0;
  transform:  translateY(25px);
  transition: opacity   var(--dur-slow) var(--ease-luxury),
              transform var(--dur-slow) var(--ease-luxury);
}

body.hero-ready .hero-sequence > * {
  opacity:   1;
  transform: none;
}

body.hero-ready .hero-sequence > *:nth-child(1) { transition-delay:  200ms; }
body.hero-ready .hero-sequence > *:nth-child(2) { transition-delay:  400ms; }
body.hero-ready .hero-sequence > *:nth-child(3) { transition-delay:  600ms; }
body.hero-ready .hero-sequence > *:nth-child(4) { transition-delay:  800ms; }
body.hero-ready .hero-sequence > *:nth-child(5) { transition-delay: 1000ms; }
body.hero-ready .hero-sequence > *:nth-child(6) { transition-delay: 1200ms; }

/* ===========================================================================
   7. SCROLL INDICATOR
   Thin vertical gold line + animated downward chevron beneath it.
   Positioned absolutely at the bottom-center of the hero section.
=========================================================================== */

.scroll-indicator {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  position:       absolute;
  bottom:         var(--space-lg);
  left:           50%;
  transform:      translateX(-50%);
}

/* Vertical gold line */
.scroll-indicator__line {
  width:            1px;
  height:           40px;
  background:       var(--gold);
  transform-origin: top center;
  animation:        tb-scroll-line 2.2s var(--ease-luxury) infinite;
  opacity:          0.75;
}

/* Downward-pointing chevron */
.scroll-indicator__chevron {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  animation:      tb-scroll-drift 2.2s var(--ease-luxury) infinite;
  animation-delay: 0.2s;
}

.scroll-indicator__chevron::before,
.scroll-indicator__chevron::after {
  content:    '';
  display:    block;
  width:      9px;
  height:     1px;
  background: var(--gold);
  opacity:    0.7;
}

.scroll-indicator__chevron::before {
  transform: rotate(45deg) translate(3px, 2px);
}

.scroll-indicator__chevron::after {
  transform: rotate(-45deg) translate(-3px, 2px);
}

/* ===========================================================================
   8. TOURBIRTH 12 — SESSION PROGRESS INDICATOR
   Desktop-only sticky right rail: thin gold vertical line + 8 dots.
   Active dot is fully lit (opacity 1); inactive dots at 0.3.
   JS (tourbirth12.js) toggles .is-active on each dot.
=========================================================================== */

.session-progress {
  position:    fixed;
  right:       var(--space-md);
  top:         50%;
  transform:   translateY(-50%);
  z-index:     var(--z-above);
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         0;
}

/* The thin vertical gold line behind the dots */
.session-progress__line {
  position:   absolute;
  top:        0;
  bottom:     0;
  left:       50%;
  transform:  translateX(-50%);
  width:      1px;
  background: rgba(198, 169, 107, 0.2);
}

/* Individual session dots */
.session-progress__dot {
  position:      relative;
  z-index:       1;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--gold);
  opacity:       0.3;
  margin:        var(--space-sm) 0;
  transition:    opacity   var(--transition-medium),
                 transform var(--transition-medium);
  cursor:        pointer;
}

.session-progress__dot.is-active {
  opacity:   1;
  transform: scale(1.4);
}

/* Only show on desktop */
@media (max-width: 1024px) {
  .session-progress {
    display: none;
  }
}

/* ===========================================================================
   9. PREFERS-REDUCED-MOTION OVERRIDES
   All non-essential motion disabled. Elements jump to their final state.
   Parallax, cursor trail, and page transitions are disabled by JS too.
=========================================================================== */

@media (prefers-reduced-motion: reduce) {

  /* Reveal elements — immediately visible */
  .reveal,
  .reveal[data-reveal],
  [data-reveal],
  [data-stagger] > *,
  .hero-sequence > * {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
    animation:  none !important;
  }

  /* Loading screen — skip entirely */
  .loading-screen {
    display: none !important;
  }

  .loading-screen__letter,
  .loading-screen__tagline {
    opacity:   1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Page transitions — hide overlay */
  #page-transition-overlay {
    display: none !important;
  }

  /* Scroll indicator — static, no animation */
  .scroll-indicator__line,
  .scroll-indicator__chevron {
    animation: none !important;
    opacity:   0.6;
  }

  /* Session progress — static dots */
  .session-progress__dot {
    transition: none !important;
  }

}

/* ════════════════════════════════════════════════
   FROM: css/components.css
   ════════════════════════════════════════════════ */

/* =============================================================================
   TOURBIRTH — SHARED COMPONENTS
   components.css
   Every reusable UI element: buttons, text links, film cards, testament
   cards, pathway cards, editorial cards, value items, invitation form,
   founder image block, and display typographic elements.

   All values from variables.css. No hardcoded colors, sizes, or timings.
   ============================================================================= */

/* ===========================================================================
   1. BUTTONS
   Two types per the brief:
   A. .btn-outline — gold border, transparent; fills gold L→R on hover
   B. .btn-submit  — obsidian fill, gold text; fills gold L→R on hover
=========================================================================== */

/* ── A. Outlined Button ─────────────────────────────────────────────────── */

.btn-outline {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  isolation:       isolate;

  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  font-weight:     400;
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--gold);
  background:      transparent;
  border:          var(--gold-rule);
  padding:         0.85rem 2.2rem;
  cursor:          pointer;

  transition: color var(--transition-medium);
}

/* Gold fill sweeps in from the left */
.btn-outline::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--gold);
  transform:  translateX(-101%);
  transition: transform var(--transition-medium);
  z-index:    -1;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  color: var(--obsidian);
}

.btn-outline:hover::before,
.btn-outline:focus-visible::before {
  transform: translateX(0);
}

/* ── B. Submit / Dark Button ─────────────────────────────────────────────── */

.btn-submit {
  position:        relative;
  display:         block;
  width:           100%;
  overflow:        hidden;
  isolation:       isolate;

  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  font-weight:     400;
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  color:           var(--gold);
  background:      var(--obsidian);
  border:          var(--gold-rule);
  padding:         1.15rem 2rem;
  cursor:          pointer;
  text-align:      center;

  transition: color var(--transition-medium);
}

.btn-submit::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--gold);
  transform:  translateX(-101%);
  transition: transform var(--transition-medium);
  z-index:    -1;
}

.btn-submit:hover,
.btn-submit:focus-visible {
  color: var(--obsidian);
}

.btn-submit:hover::before,
.btn-submit:focus-visible::before {
  transform: translateX(0);
}

/* ===========================================================================
   2. TEXT LINK WITH UNDERLINE DRAW
   Gold text. On hover: underline draws from left via ::after (width 0→100%).
   Used for "Explore →", "Learn More", in-copy links.
=========================================================================== */

.link-underline {
  position:        relative;
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  font-weight:     400;
  letter-spacing:  var(--ls-label);
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--gold);
  transition:      color var(--transition-fast);
}

.link-underline::after {
  content:    '';
  position:   absolute;
  bottom:     -3px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width var(--transition-slow);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  width: 100%;
}

/* Variant with arrow glyph appended by content */
.link-underline--arrow::after {
  /* Underline draws beneath the arrow too — no change needed */
}

/* ===========================================================================
   3. FILM CARDS
   Cinematic dark frame — no images. CSS corner brackets. Gold play button.
   Spec from brief: 16:9, deep-neutral bg, gold-rule-thin border.
=========================================================================== */

.film-card {
  display:         block;
  text-decoration: none;
  cursor:          pointer;
  outline:         none;
}

.film-card:focus-visible .film-card__frame {
  outline:        2px solid var(--gold);
  outline-offset: 4px;
}

/* Frame — 16:9 aspect, cinematic dark background */
.film-card__frame {
  position:     relative;
  aspect-ratio: 16 / 9;
  background:   var(--deep-neutral);
  border:       var(--gold-rule-thin);
  overflow:     hidden;
  box-shadow:   inset 0 0 60px rgba(11, 29, 42, 0.7),
                0 4px 32px rgba(0, 0, 0, 0.35);
  transition:   border-color var(--transition-medium),
                box-shadow   var(--transition-medium);
}

.film-card:hover .film-card__frame,
.film-card:focus-visible .film-card__frame {
  border-color: var(--gold);
  box-shadow:   inset 0 0 60px rgba(11, 29, 42, 0.5),
                0 8px 48px rgba(0, 0, 0, 0.45);
}

/* CSS corner bracket — top left */
.film-card__frame::before {
  content:      '';
  position:     absolute;
  top:          14px;
  left:         14px;
  width:        22px;
  height:       22px;
  border-top:   1px solid rgba(198, 169, 107, 0.45);
  border-left:  1px solid rgba(198, 169, 107, 0.45);
  pointer-events: none;
  z-index:      2;
}

/* CSS corner bracket — bottom right */
.film-card__frame::after {
  content:        '';
  position:       absolute;
  bottom:         14px;
  right:          14px;
  width:          22px;
  height:         22px;
  border-bottom:  1px solid rgba(198, 169, 107, 0.45);
  border-right:   1px solid rgba(198, 169, 107, 0.45);
  pointer-events: none;
  z-index:        2;
}

/* Play button — centered, 60px */
.film-card__play-btn {
  position:  absolute;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  width:     60px;
  height:    60px;
  opacity:   0.7;
  z-index:   3;
  transition: opacity   var(--transition-medium),
              transform var(--transition-medium);
}

.film-card__play-btn svg {
  width:  100%;
  height: 100%;
}

.film-card:hover .film-card__play-btn,
.film-card:focus-visible .film-card__play-btn {
  opacity:   1;
  transform: translate(-50%, -50%) scale(1.06);
}

/* Archival label — top right of frame */
.film-card__archival-label {
  position:       absolute;
  top:            14px;
  right:          14px;
  font-family:    var(--font-body);
  font-size:      0.58rem;
  font-weight:    400;
  letter-spacing: var(--ls-ultra);
  color:          rgba(198, 169, 107, 0.45);
  text-transform: uppercase;
  z-index:        2;
}

/* Metadata below frame */
.film-card__meta {
  padding-top: var(--space-md);
}

/* Title — gold underline draws on card hover */
.film-card__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
  color:          var(--offwhite);
  line-height:    var(--lh-heading);
  display:        inline-block;
  position:       relative;
}

.film-card__title::after {
  content:    '';
  position:   absolute;
  bottom:     -3px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width var(--transition-slow);
}

.film-card:hover .film-card__title::after,
.film-card:focus-visible .film-card__title::after {
  width: 100%;
}

.film-card__desc {
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    300;
  letter-spacing: 0.04em;
  line-height:    var(--lh-body);
  color:          var(--sage);
  margin-top:     var(--space-xs);
}

/* Video embed area — hidden until .is-playing added by JS */
.film-card__embed {
  display:    none;
  width:      100%;
  aspect-ratio: 16 / 9;
  background: var(--obsidian);
  border:     var(--gold-rule-thin);
  margin-top: var(--space-sm);
}

.film-card.is-playing .film-card__frame {
  display: none;
}

.film-card.is-playing .film-card__embed {
  display: block;
}

/* ===========================================================================
   4. TESTAMENT CARDS
   Thin gold top border, offwhite background, oversized decorative quote mark.
=========================================================================== */

.testament-card {
  position:       relative;
  background:     var(--offwhite);
  border-top:     0.5px solid rgba(198, 169, 107, 0.30); /* Session 4: ghost-gold hairline — intimate, not commercial */
  padding:        var(--space-xl) var(--space-lg) var(--space-lg);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

/* Decorative quotation mark — atmospheric ghost, barely visible.
   Session 4: reduced from 7rem to clamp(2.5rem,4vw,4rem);
   colour changed from sage to offwhite; opacity reduced to 0.15.
   The text carries the emotional weight — the mark is atmosphere only. */
.testament-card__mark {
  position:       absolute;
  top:            var(--space-md);
  left:           var(--space-lg);
  font-family:    var(--font-display);
  font-size:      clamp(2.5rem, 4vw, 4rem);
  font-weight:    300;
  line-height:    1;
  color:          var(--offwhite);
  opacity:        0.15;
  pointer-events: none;
  user-select:    none;
  z-index:        0;
}

.testament-card__tag {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color:          var(--sage);   /* Audit: tag/label element unified with eyebrow — sage, not gold */
  position:       relative;
  z-index:        1;
}

.testament-card__quote {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-subhead);
  color:          var(--charcoal);
  position:       relative;
  z-index:        1;
}

.testament-card__name {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--sage);
  margin-top:     auto;
  position:       relative;
  z-index:        1;
}

/* ===========================================================================
   5. PATHWAY CARDS
   Dark background, thin gold border, editorial copy. Used in What We Do,
   Tourbirth 12 pathways, and Union Journeys editorial cards.
=========================================================================== */

.pathway-card {
  position:       relative;
  padding:        var(--space-lg);
  border:         var(--gold-rule-thin);
  background:     var(--deep-neutral);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
  transition:     border-color var(--transition-medium),
                  box-shadow   var(--transition-medium);
}

.pathway-card:hover {
  border-color: rgba(198, 169, 107, 0.6);
  box-shadow:   0 0 40px rgba(198, 169, 107, 0.06);
}

/* Large Roman numeral — decorative top-of-card. Audit: background decoration, not accent */
.pathway-card__numeral {
  font-family: var(--font-display);
  font-size:   var(--fs-display);
  font-weight: 300;
  color:       var(--sage);   /* Audit: decorative numerals demoted from gold to sage */
  opacity:     0.5;
  line-height: 1;
  display:     block;
}

.pathway-card__subtitle {
  font-family:  var(--font-display);
  font-size:    var(--fs-small);
  font-weight:  300;
  font-style:   italic;
  color:        var(--sage);
  line-height:  var(--lh-subhead);
}

.pathway-card__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
  color:          var(--offwhite);
  line-height:    var(--lh-heading);
}

.pathway-card__desc {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          rgba(245, 243, 238, 0.7);
}

.pathway-card__link {
  margin-top: auto;
}

/* ===========================================================================
   6. EDITORIAL CARDS
   Light left-border accent. Used for Blueprint preparation sub-elements.
=========================================================================== */

.editorial-card {
  padding-block: var(--space-md);
  padding-left:  var(--space-md);
  border-left:   2px solid rgba(198, 169, 107, 0.25);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-xs);
  transition:    border-left-color var(--transition-fast);
}

.editorial-card:hover {
  border-left-color: var(--gold);
}

.editorial-card__eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color:          var(--sage);   /* Audit: eyebrow/label element — sage, consistent with .eyebrow and .section-eyebrow */
}

.editorial-card__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    400;
  letter-spacing: var(--ls-heading);
  color:          inherit;
  line-height:    var(--lh-heading);
}

.editorial-card__desc {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          inherit;
  opacity:        0.8;
}

/* ===========================================================================
   7. CORE VALUE ITEMS
   2×2 grid items. Thin gold top border. Used on The House of Connection page.
=========================================================================== */

.value-item {
  padding-top:    var(--space-md);
  border-top:     var(--gold-rule-thin);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.value-item__title {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
  color:          inherit;
  line-height:    var(--lh-heading);
}

.value-item__desc {
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.04em;
  color:          var(--sage);
}

/* ===========================================================================
   8. INVITATION FORM
   Pure semantic HTML. Labels above fields. Bottom border only.
   Specified exactly in the brief: sage bottom border → gold on focus.
=========================================================================== */

.invitation-form {
  display:        flex;
  flex-direction: column;
}

/* ── Form Field Container ─────────────────────────────────────────────── */

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  margin-bottom:  var(--space-lg);
}

.form-field--large {
  margin-bottom: var(--space-xl);
}

/* ── Labels — Montserrat UPPERCASE sage ──────────────────────────────── */

.form-field > label,
.form-field label:not(.radio-label) {
  font-family:    var(--font-body);
  font-size:      var(--fs-label);
  font-weight:    400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color:          var(--sage);
  display:        block;
}

/* Required asterisk */
.req {
  color:       var(--gold);
  margin-left: 0.25em;
}

/* ── Inputs, Textareas, Selects — Cormorant Garamond, bottom border only */

.form-field input:not([type="radio"]),
.form-field textarea,
.form-field select {
  width:          100%;
  background:     transparent;
  border:         none;
  border-bottom:  1px solid var(--sage);
  border-radius:  0;
  padding:        var(--space-sm) 0;

  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    400;
  color:          var(--deep-neutral);
  letter-spacing: 0.02em;
  line-height:    var(--lh-relaxed);

  appearance:         none;
  -webkit-appearance: none;
  outline:            none;

  transition: border-color var(--transition-fast),
              box-shadow   var(--transition-fast);
}

/* Focus — gold bottom border + faint glow */
.form-field input:not([type="radio"]):focus,
.form-field textarea:focus,
.form-field select:focus {
  border-bottom-color: var(--gold);
  box-shadow:          0 2px 12px rgba(198, 169, 107, 0.12);
}

/* Placeholder — italic sage */
.form-field input::placeholder,
.form-field textarea::placeholder {
  font-family: var(--font-display);
  font-style:  italic;
  color:       var(--sage);
  opacity:     0.72;
}

/* Textarea — allow vertical resize only */
.form-field textarea {
  resize:     vertical;
  min-height: 90px;
}

/* Select — custom dropdown arrow in sage */
.form-field select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8F85' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.2rem center;
  padding-right:       var(--space-lg);
  cursor:              pointer;
}

/* ── Radio Group ─────────────────────────────────────────────────────── */

.radio-group {
  display: flex;
  gap:     var(--space-lg);
  padding: var(--space-xs) 0;
}

.radio-label {
  display:        flex;
  align-items:    center;
  gap:            0.6rem;
  font-family:    var(--font-display);
  font-size:      var(--fs-body);
  font-weight:    400;
  color:          var(--deep-neutral);
  text-transform: none;
  letter-spacing: 0;
  cursor:         pointer;
}

.radio-label input[type="radio"] {
  position:   relative;
  flex-shrink: 0;
  width:       16px;
  height:      16px;
  border:      var(--gold-rule-thin);
  border-radius: 50%;
  background:  transparent;
  appearance:  none;
  -webkit-appearance: none;
  padding:     0;
  cursor:      pointer;
  transition:  border-color var(--transition-fast);
}

.radio-label input[type="radio"]:checked {
  border-color: var(--gold);
}

/* Gold centre dot on checked state */
.radio-label input[type="radio"]:checked::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         6px;
  height:        6px;
  background:    var(--gold);
  border-radius: 50%;
}

.radio-label input[type="radio"]:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
}

/* ===========================================================================
   9. FOUNDER IMAGE BLOCK
   Obsidian-colored placeholder. Becomes an image when client
   populates data-src. Architectural inner border when empty.
   ONLY used in house-of-connection.html — image policy hard rule.
=========================================================================== */

.founder-image {
  position:     relative;
  background:   var(--obsidian);
  aspect-ratio: 3 / 4;
  overflow:     hidden;
}

/* Inner architectural frame when no image is set */
.founder-image:not(:has(img[src]:not([src=""])))::before {
  content:      '';
  position:     absolute;
  inset:        var(--space-md);
  border:       var(--gold-rule-faint);
  pointer-events: none;
}

.founder-image img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center top;
  display:        block;
  filter:         sepia(8%) contrast(1.04);
}

/* Grain overlay on founder image */
.founder-image::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:  200px 200px;
  opacity:          0.04;
  pointer-events:   none;
  mix-blend-mode:   overlay;
  z-index:          1;
}

/* ===========================================================================
   10. DISPLAY TYPOGRAPHIC ELEMENTS
=========================================================================== */

/* Large decorative Roman numeral (used in Tourbirth 12 sessions). Audit: background decoration, not accent */
.roman-numeral {
  display:        block;
  font-family:    var(--font-display);
  font-size:      var(--fs-display);
  font-weight:    300;
  color:          var(--sage);   /* Audit: decorative session numbers demoted from gold to sage */
  opacity:        0.5;
  line-height:    1;
  letter-spacing: 0.04em;
}

/* Credibility line — full-width centered gold italic */
.credibility-line {
  text-align:   center;
  padding:      var(--space-xl) var(--gutter);
}

.credibility-line__text {
  font-family:    var(--font-display);
  font-size:      var(--fs-display);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: var(--ls-hero);
  color:          var(--gold);
  line-height:    var(--lh-subhead);
}

/* ===========================================================================
   11. PROCESS NOTE
   Small italic Cormorant Garamond process statement.
   Used at the bottom of journey pages.
=========================================================================== */

.process-note {
  font-family:    var(--font-display);
  font-size:      var(--fs-body);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          var(--sage);
  text-align:     center;
  max-width:      var(--content-width);
  margin-inline:  auto;
}

/* ===========================================================================
   12. SECTION LAYOUT VARIANTS
   Small helpers that were previously written as inline styles on PHP pages.
=========================================================================== */

/* 404-style centred flex section: title + body + CTA stack centred both axes */
.section--centered-flex {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Hero-content variant used by 404 — column-centred text block */
.hero-content--centred {
  text-align: center;
}

.hero-content--centred .gold-rule--short {
  margin-inline: auto;
}

.hero-content--centred .lead {
  max-width:     480px;
  margin-inline: auto;
  font-family:   var(--font-body);
  font-weight:   300;
}

/* ===========================================================================
   13. INVESTMENT NOTE
   Muted small text below CTA on journey pages — no pricing implied.
=========================================================================== */

.investment-note {
  font-family:    var(--font-body);
  font-size:      var(--fs-small);
  font-weight:    300;
  line-height:    var(--lh-body);
  letter-spacing: 0.04em;
  color:          var(--sage);
  opacity:        0.75;
  margin-top:     var(--space-md);
}