/* ==========================================================================
   UMBRA LABS — Main Stylesheet
   A premium, dark-themed landing page for Umbra Labs
   (Africa's interdisciplinary virtual lab for Gen Alpha).
   ==========================================================================

   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. Reset & Custom Properties
   2. Base Typography & Body
   3. Custom Cursor
   4. Navigation Bar
   5. Hero Section
   6. Marquee Banner Strip
   7. "Our Why" Section
   8. Founder's Story Section
   9. Duality (Village vs Laboratory) Split Section
  10. Course Paths (Four Labs) Section
  11. Mission Statement Split Section
  12. Vision Section
  13. Outcomes / Archetypes Section
  14. Audience Portals Section
  15. Call-to-Action / Waitlist Section
  16. Footer
  17. Scroll-Reveal Animations
  18. Hero Title Enhancements
  19. Curriculum Download Button
  20. Founder Photo Placeholder
  21. Social Links
  22. Responsive (Mobile ≤ 900px)
   ========================================================================== */


/* ==========================================================================
   1. RESET & CUSTOM PROPERTIES
   ========================================================================== */

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

:root {
  /* --- Core Palette --- */
  --ink: #08070A;
  /* Primary background (deepest black) */
  --ink2: #0E0C12;
  /* Slightly lighter background for alternating sections */
  --parch: #EFE6D0;
  /* Primary text color (warm parchment) */
  --parch2: #D9CEB5;
  /* Secondary/muted parchment */
  --terra: #C4622D;
  /* Accent: warm terracotta (CTAs, tags) */
  --terra2: #E07A45;
  /* Lighter terracotta variant */
  --gold: #C9973A;
  /* Accent: golden (highlights, branding) */
  --gold2: #E8BF65;
  /* Brighter gold for hover states */
  --ember: #8B2A0A;
  /* Deep ember red (backgrounds) */
  --forest: #162A1C;
  /* Dark forest green ("village" half) */
  --forest2: #1E3D28;
  /* Lighter forest green (CTA bg) */
  --slate: #141218;
  /* Dark slate (outcomes bg) */
  --slate2: #1C1820;
  /* Lighter slate ("lab" half bg) */

  /* --- Opacity Utilities --- */
  --muted: rgba(239, 230, 208, 0.42);
  /* Subtle body text */
  --faint: rgba(239, 230, 208, 0.1);
  /* Barely-visible borders & dividers */
}


/* ==========================================================================
   2. BASE TYPOGRAPHY & BODY
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--parch);
  overflow-x: hidden;
  cursor: none;
  /* Custom cursor replaces the default */
}


/* ==========================================================================
   3. CUSTOM CURSOR
   Replaces the default pointer with a dot + trailing ring, both using
   mix-blend-mode for a sophisticated visual effect.
   ========================================================================== */

/* Small central dot that follows the mouse instantly */
#cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  mix-blend-mode: difference;
}

/* Larger ring that trails behind the dot with eased movement */
#cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201, 151, 58, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease, width 0.3s, height 0.3s, opacity 0.3s;
}

/* Ring only appears when the cursor is over the page */
body:hover #cursor-ring {
  opacity: 1;
}


/* ==========================================================================
   4. NAVIGATION BAR
   Fixed top nav that becomes translucent with backdrop-blur on scroll.
   ========================================================================== */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 3.5rem;
  transition: background 0.4s, border 0.4s;
}

/* Frosted-glass effect applied via JS when user scrolls past 60px */
nav.scrolled {
  background: rgba(8, 7, 10, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 151, 58, 0.1);
}

/* --- Logo (stacked brand name + subtitle) --- */
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.nav-logo-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}

.nav-logo-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: rgba(201, 151, 58, 0.5);
  text-transform: uppercase;
  margin-top: 0.1rem;
}

/* --- Navigation Links (center) --- */
.nav-mid {
  display: flex;
  gap: 2.5rem;
}

.nav-mid a {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 400;
}

.nav-mid a:hover {
  color: var(--parch);
}

/* --- CTA Button (right) --- */
.nav-cta {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--terra);
  color: var(--terra);
  background: transparent;
  cursor: none;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-block;
  animation: cta-beacon 1.8s ease-in-out 0.6s 3 both;
}

.nav-cta:hover {
  background: var(--terra);
  color: var(--parch);
}

@keyframes cta-beacon {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(196, 98, 45, 0);
  }
  50% {
    transform: scale(1.07);
    box-shadow:
      0 0 14px 4px rgba(196, 98, 45, 0.6),
      0 0 32px 12px rgba(196, 98, 45, 0.25);
  }
}


/* ==========================================================================
   5. HERO SECTION
   Full-viewport intro with canvas particle animation, gradient overlays,
   headline, descriptive paragraph, stats, and scroll indicator.
   ========================================================================== */

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centre content vertically in the viewport */
  padding: 0 3.5rem 4rem;
  overflow: hidden;
}

/* The <canvas> that renders the particle network animation */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Layered radial + linear gradients over the canvas for depth */
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 50% at 75% 25%, rgba(139, 42, 10, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 90%, rgba(22, 42, 28, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8, 7, 10, 0) 0%, rgba(8, 7, 10, 0.7) 60%, var(--ink) 100%);
}

/* Content sitting above canvas and gradients */
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 5rem;
  /* Clearance from the fixed nav bar */
}

/* --- Eyebrow label above the headline --- */
.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terra);
  margin-top: 0;
  margin-bottom: 1.8rem;
  /* Space between eyebrow and headline */
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.hero-eyebrow-line {
  width: 2.5rem;
  height: 1px;
  background: var(--terra);
  flex-shrink: 0;
}

/* --- Main headline --- */
.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-size: clamp(3.5rem, 8vw, 8.5rem);
  /* Sized to fill hero without overflowing */
  margin-bottom: 1.5rem;
}

.hero-h1 .line2 {
  display: block;
  font-style: italic;
  color: var(--gold);
  padding-left: 1.5ch;
}

/* Indent the "A Village" line into the page */
.hero-h1 .hero-line2 {
  display: inline-block;
  padding-left: 2.5em;
}

.hero-h1 .line3 {
  display: block;
  opacity: 0.55;
}

/* --- Bottom area: description + stats side by side --- */
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 3rem;
  gap: 2rem;
}

.hero-descriptor {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 38ch;
  font-weight: 300;
}

.hero-descriptor strong {
  color: var(--parch);
  font-weight: 400;
}

/* --- Stat counters (e.g. "4 Laboratory Paths") --- */
.hero-stats {
  display: flex;
  gap: 3rem;
  flex-shrink: 0;
}

.hero-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  display: block;
}

.hero-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
  display: block;
}

/* --- Scroll-down indicator (centered at bottom of hero) --- */
.hero-scroll {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
}

.hero-scroll-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 230, 208, 0.25);
}

/* Bar with falling-light animation to suggest scrolling */
.hero-scroll-bar {
  width: 1px;
  height: 4rem;
  overflow: hidden;
  position: relative;
}

.hero-scroll-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--muted));
  animation: scroll-fall 1.8s ease-in-out infinite;
}

@keyframes scroll-fall {
  0% {
    top: -100%;
  }

  100% {
    top: 100%;
  }
}


/* ==========================================================================
   6. MARQUEE BANNER STRIP
   Continuous scrolling text strip between hero and content sections.
   ========================================================================== */

.marquee-strip {
  background: var(--terra);
  padding: 0.75rem 0;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.marquee-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
}

.marquee-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  padding: 0 2.5rem;
  color: rgba(239, 230, 208, 0.75);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Diamond separator between marquee items */
.marquee-item::after {
  content: '◆';
  font-size: 0.5rem;
  color: rgba(239, 230, 208, 0.4);
  font-style: normal;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* ==========================================================================
   7. "OUR WHY" SECTION
   Two-column layout: large pull-quote left, body paragraphs right.
   ========================================================================== */

.why {
  background: var(--ink2);
  padding: 9rem 3.5rem;
}

.why-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 7rem;
  align-items: start;
}

/* --- Reusable section tag (numbered label above each section) --- */
.section-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Section number rendered via the data-n attribute */
.section-tag::before {
  content: attr(data-n);
  color: rgba(201, 151, 58, 0.3);
  font-size: 0.55rem;
}

/* Large serif pull-quote headline */
.why-pull {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.2;
}

.why-pull em {
  font-style: italic;
  color: var(--gold);
}

.why-pull .big {
  display: block;
  font-size: 1.2em;
  font-weight: 300;
}

/* Right column: body text and callout */
.why-right {
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.why-p {
  font-size: 0.975rem;
  line-height: 1.85;
  color: var(--muted);
  font-weight: 300;
}

.why-p strong {
  color: var(--parch);
  font-weight: 400;
}

/* Highlighted callout/quote box with a gold left border */
.why-callout {
  margin-top: 1rem;
  padding: 1.75rem 2rem;
  border-left: 2px solid var(--gold);
  background: rgba(201, 151, 58, 0.05);
}

.why-callout-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--parch2);
}


/* ==========================================================================
   8. FOUNDER'S STORY SECTION
   Placeholder for the founder's personal narrative + photo.
   ========================================================================== */

.founder {
  background: var(--ink);
  padding: 9rem 3.5rem;
  border-top: 1px solid var(--faint);
}

.founder-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Unified card containing photo + note */
.founder-card {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 3rem;
  border: 1px dashed rgba(201, 151, 58, 0.2);
  background: rgba(201, 151, 58, 0.02);
  position: relative;
}

.founder-card-photo {
  flex: 0 0 auto;
  width: 260px;
}

.founder-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Kept for backward compatibility with corner element */
.founder-placeholder {
  padding: 3rem;
  border: 1px dashed rgba(201, 151, 58, 0.2);
  background: rgba(201, 151, 58, 0.02);
  position: relative;
}

.founder-placeholder-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 151, 58, 0.85);
  margin-bottom: 1.5rem;
}

.founder-note-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
}

.founder-note-p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--muted);
  font-weight: 300;
}

.founder-em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.08em;
  color: var(--gold);
  font-weight: 400;
}

.founder-placeholder-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(239, 230, 208, 0.9);
}

/* Founder signature block */
.founder-signature {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 151, 58, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.founder-sig-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.founder-sig-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 238, 220, 0.45);
  margin-bottom: 0.5rem;
}

.founder-sig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 151, 58, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.founder-sig-link:hover {
  color: var(--gold);
}

/* Decorative corner bracket on the placeholder card */
.founder-placeholder-corner {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1px solid rgba(201, 151, 58, 0.25);
  border-right: 1px solid rgba(201, 151, 58, 0.25);
}

/* Age-based curriculum tiers list */
.tiers {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.tier {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--faint);
  padding-top: 1.25rem;
}

.tier-age {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--gold);
  min-width: 4.5rem;
  line-height: 1;
}

.tier-name {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.2rem;
  font-family: 'DM Mono', monospace;
}

.tier-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 300;
}


/* ==========================================================================
   9. DUALITY SPLIT — "THE VILLAGE" vs "THE LABORATORY"
   A side-by-side 50/50 section contrasting the two pillars of Umbra's model.
   ========================================================================== */

.duality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}

/* Full-width section header spanning both columns */
.duality-header {
  grid-column: 1 / -1;
  background: var(--ink2);
  padding: 5rem 4.5rem 3rem;
  text-align: center;
}

.duality-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.2;
}

.duality-title em {
  font-style: italic;
  color: var(--gold);
}

/* Glowing "How It Works" section tag inside each duality half */
.d-section-tag {
  position: relative;
  z-index: 2;
  text-shadow:
    0 0 8px rgba(196, 98, 45, 0.5),
    0 0 20px rgba(196, 98, 45, 0.25),
    0 0 40px rgba(196, 98, 45, 0.15);
  margin-bottom: 2rem;
}

/* Make the number prefix glow too */
.d-section-tag::before {
  text-shadow:
    0 0 6px rgba(201, 151, 58, 0.4),
    0 0 16px rgba(201, 151, 58, 0.2);
}

.d-half {
  padding: 6rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Background colors for each half */
.d-village {
  background: var(--forest);
}

.d-lab {
  background: var(--slate2);
}

/* Decorative radial glow behind each half */
.d-half-glow-v {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 151, 58, 0.07) 0%, transparent 70%);
  bottom: -200px;
  left: -100px;
  pointer-events: none;
}

.d-half-glow-l {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 98, 45, 0.08) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

/* Tag label above the section title */
.d-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

/* Large section heading */
.d-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 0.95;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.d-name em {
  font-style: italic;
  color: var(--gold);
}

.d-name .tc {
  color: var(--terra2);
}

/* "tc" = terracotta color variant */

/* Description paragraph */
.d-desc {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 36ch;
  font-weight: 300;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

/* --- Pillar list items (dot-preceded bullet points) --- */
.d-pillars {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.d-pillar {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239, 230, 208, 0.38);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s;
}

.d-pillar:hover {
  color: var(--parch);
}

/* Colored dot preceding each pillar item */
.d-pillar-dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Terracotta-colored dot variant for the "Laboratory" side */
.d-pillar-dot.t {
  background: var(--terra);
}

/* Thin vertical divider line between the two halves */
.d-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(239, 230, 208, 0.05);
  z-index: 10;
}


/* ==========================================================================
   10. COURSE PATHS (FOUR LABS) SECTION
   A 2×2 grid of path cards, each describing one of the four labs.
   ========================================================================== */

.paths {
  background: var(--ink);
  padding: 9rem 3.5rem;
}

.paths-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.paths-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--faint);
}

.paths-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
}

.paths-title em {
  color: var(--gold);
  font-style: italic;
}

.paths-intro {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
}

/* 2×2 grid separated by 1px borders (via gap + background color trick) */
.paths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(239, 230, 208, 0.06);
}

/* --- Individual path/lab card --- */
.path-card {
  background: var(--ink);
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

/* Subtle radial glow that appears on hover */
.path-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(196, 98, 45, 0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}

.path-card:hover {
  background: #0c0a10;
}

.path-card:hover::before {
  opacity: 1;
}

.path-n {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: rgba(201, 151, 58, 0.3);
  margin-bottom: 2rem;
}

.path-symbol {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  display: block;
  opacity: 0.6;
}

.path-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

.path-name em {
  font-style: italic;
  color: var(--gold);
}

.path-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.5rem;
}

.path-desc {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 2rem;
}

/* Tag pills below each card description */
.path-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.path-tag {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(239, 230, 208, 0.1);
  color: rgba(239, 230, 208, 0.35);
  transition: all 0.2s;
}

.path-tag:hover {
  border-color: rgba(201, 151, 58, 0.3);
  color: var(--gold2);
}


/* ==========================================================================
   11. MISSION STATEMENT SPLIT
   A bold two-panel section: mission text on terra, values list on ember.
   ========================================================================== */

.mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
}

/* Left panel — mission statement */
.mission-left {
  background: var(--terra);
  padding: 7rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mission-left-pre {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239, 230, 208, 0.55);
  margin-bottom: 2rem;
}

.mission-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--parch);
}

.mission-text strong {
  font-weight: 600;
  font-style: italic;
}

/* Right panel — core values list */
.mission-right {
  background: var(--ember);
  padding: 7rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mission-right-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(239, 230, 208, 0.5);
  margin-bottom: 3rem;
  letter-spacing: 0.05em;
}

/* --- Values list items --- */
.values-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  justify-content: center;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  border-top: 1px solid rgba(239, 230, 208, 0.1);
  padding-top: 1.25rem;
}

.value-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: rgba(239, 230, 208, 0.3);
  padding-top: 0.15rem;
  flex-shrink: 0;
}

.value-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
  color: var(--parch);
}

.value-desc {
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(239, 230, 208, 0.55);
  font-weight: 300;
}


/* ==========================================================================
   12. VISION SECTION
   Three-column grid of vision pillars with hover-activated gold border.
   ========================================================================== */

.vision {
  background: var(--ink2);
  padding: 9rem 3.5rem;
}

.vision-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.vision-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 6rem;
}

.vision-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 0.95;
}

.vision-h em {
  font-style: italic;
  color: var(--gold);
}

.vision-sidebar-text {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
}

/* Three-column grid with 1px gaps mimicking borders */
.vision-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--faint);
}

.vision-item {
  background: var(--ink2);
  padding: 3rem 2.5rem;
  border-top: 2px solid transparent;
  transition: border-color 0.3s;
}

.vision-item:hover {
  border-color: var(--gold);
}

/* Roman numeral icon for each vision card */
.vi-icon {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-style: italic;
  color: rgba(201, 151, 58, 0.2);
  margin-bottom: 1.5rem;
  line-height: 1;
  display: block;
}

.vi-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

.vi-body {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
}

.vi-body strong {
  color: var(--parch);
  font-weight: 400;
}


/* ==========================================================================
   13. OUTCOMES / ARCHETYPES SECTION
   Showcases the three "archetype" graduates (Aristotle, Picasso, Franklin)
   with a scrolling marquee strip below.
   ========================================================================== */

.outcomes {
  background: var(--slate);
  padding: 9rem 3.5rem;
}

.outcomes-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.outcomes-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 5rem;
}

.outcomes-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  max-width: 18ch;
}

.outcomes-title em {
  color: var(--gold);
  font-style: italic;
}

.outcomes-note {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 28ch;
  text-align: right;
  font-weight: 300;
}

/* --- Archetype cards grid --- */
.archetypes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 5rem;
}

.archetype {
  padding: 2.5rem;
  border: 1px solid var(--faint);
  transition: border-color 0.3s, background 0.3s;
  position: relative;
  overflow: hidden;
}

/* Oversized letter watermark behind each archetype card */
.archetype::after {
  content: attr(data-letter);
  position: absolute;
  bottom: -0.5rem;
  right: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 8rem;
  font-weight: 700;
  color: rgba(201, 151, 58, 0.04);
  line-height: 1;
  pointer-events: none;
}

.archetype:hover {
  border-color: rgba(201, 151, 58, 0.25);
  background: rgba(201, 151, 58, 0.03);
}

.arch-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.arch-role {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.25rem;
}

.arch-body {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
}

.arch-body strong {
  color: var(--parch);
  font-weight: 400;
}

/* --- Outcomes marquee strip --- */
.outcomes-marquee {
  overflow: hidden;
  padding: 2rem 0;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
}

.om-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

.om-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  padding: 0 2.5rem;
  color: rgba(239, 230, 208, 0.2);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Highlighted marquee items in gold */
.om-item.hi {
  color: var(--gold2);
}

.om-item::after {
  content: '◆';
  font-size: 0.45rem;
  color: rgba(201, 151, 58, 0.25);
  font-style: normal;
}


/* ==========================================================================
   14. AUDIENCE PORTALS SECTION
   Four cards targeting different audiences (parents, partners, educators, children).
   ========================================================================== */

.audiences {
  background: var(--ink);
  padding: 9rem 3.5rem;
}

.audiences-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* 2×2 audience card grid */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--faint);
  margin-top: 4rem;
}

.aud-card {
  background: var(--ink);
  padding: 3rem;
  cursor: none;
  transition: background 0.25s;
}

.aud-card:hover {
  background: var(--ink2);
}

.aud-who {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1rem;
}

.aud-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}

.aud-desc {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 1.5rem;
}

/* Arrow link that slides on hover (gap increases) */
.aud-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.2s;
}

.aud-link:hover {
  gap: 0.9rem;
}

.aud-link::after {
  content: '→';
}


/* ==========================================================================
   15. CALL-TO-ACTION / WAITLIST SECTION
   Full-screen CTA with forest background, waitlist form, and
   oversized "UMBRA" watermark text.
   ========================================================================== */

.cta-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8rem 3.5rem;
}

/* Dark forest background */
.cta-bg {
  position: absolute;
  inset: 0;
  background: var(--forest2);
}

/* Ambient glow over the CTA background */
.cta-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(201, 151, 58, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(22, 42, 28, 0.8) 0%, transparent 60%);
}

/* Giant decorative "UMBRA" watermark text */
.cta-word {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28vw;
  font-weight: 700;
  color: rgba(239, 230, 208, 0.025);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: -0.04em;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.cta-pre {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239, 230, 208, 0.4);
  margin-bottom: 2rem;
}

.cta-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 300;
  line-height: 0.9;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.cta-h em {
  font-style: italic;
  color: var(--gold);
}

.cta-sub {
  font-size: 0.975rem;
  line-height: 1.75;
  color: rgba(239, 230, 208, 0.5);
  margin-bottom: 3.5rem;
  font-weight: 300;
}

.cta-sub strong {
  color: var(--parch);
  font-weight: 400;
}

/* CTA button group */
.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Primary CTA button (solid terra fill) */
.btn-p {
  background: var(--terra);
  color: var(--parch);
  border: none;
  padding: 1.1rem 2.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: none;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-p:hover {
  background: #a84f22;
}

/* Ghost/outline CTA button */
.btn-g {
  background: transparent;
  color: var(--parch);
  border: 1px solid rgba(239, 230, 208, 0.2);
  padding: 1.1rem 2.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: none;
  transition: border-color 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-g:hover {
  border-color: rgba(239, 230, 208, 0.5);
}

/* --- Waitlist Form --- */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2.5rem;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Side-by-side field row (name + email) */
.wf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.wf-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wf-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 230, 208, 0.4);
}

/* Shared styles for text inputs and select dropdowns */
.wf-input,
.wf-select {
  background: rgba(239, 230, 208, 0.04);
  border: 1px solid rgba(239, 230, 208, 0.12);
  color: var(--parch);
  padding: 0.85rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.wf-input::placeholder {
  color: rgba(239, 230, 208, 0.2);
}

.wf-input:focus,
.wf-select:focus {
  border-color: rgba(201, 151, 58, 0.45);
}

/* Custom chevron arrow for the select dropdown */
.wf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,151,58,0.4)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: none;
}

.wf-select option {
  background: #0E0C12;
  color: var(--parch);
}

/* Submit button */
.wf-submit {
  background: var(--terra);
  color: var(--parch);
  border: none;
  padding: 1.1rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: none;
  transition: background 0.2s;
  width: 100%;
  margin-top: 0.5rem;
}

.wf-submit:hover {
  background: #a84f22;
}

/* Success message (hidden by default, shown after form submission) */
.wf-success {
  display: none;
  text-align: center;
  padding: 2rem;
  border: 1px solid rgba(201, 151, 58, 0.2);
  background: rgba(201, 151, 58, 0.04);
}

.wf-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.wf-success-sub {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 300;
}

/* Privacy/anti-spam note beneath the form */
.wf-note {
  font-size: 0.7rem;
  color: rgba(239, 230, 208, 0.25);
  text-align: center;
  font-weight: 300;
  margin-top: 0.5rem;
}


/* ==========================================================================
   16. FOOTER
   Three-column footer: logo | nav links | social + copyright.
   ========================================================================== */

footer {
  background: var(--ink);
  border-top: 1px solid rgba(201, 151, 58, 0.1);
  padding: 3rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.f-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

/* Center nav links */
.f-mid {
  display: flex;
  gap: 2rem;
}

.f-mid a {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239, 230, 208, 0.3);
  text-decoration: none;
  transition: color 0.2s;
}

.f-mid a:hover {
  color: var(--parch);
}

.f-right {
  text-align: right;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(239, 230, 208, 0.2);
}


/* ==========================================================================
   17. SCROLL-REVEAL ANIMATION CLASSES
   Elements with these classes start invisible and slide up into view
   when they enter the viewport (triggered by IntersectionObserver in JS).
   - .r  = base reveal (no delay)
   - .r2 = delayed reveal (120ms)
   - .r3 = further delayed reveal (220ms)
   ========================================================================== */

.r {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.r.v {
  opacity: 1;
  transform: none;
}

.r2 {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s 0.12s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

.r2.v {
  opacity: 1;
  transform: none;
}

.r3 {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.r3.v {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   18. HERO TITLE ENHANCEMENTS
   Superscript labels and color variants within the main h1.
   ========================================================================== */

/* Small superscript-style annotation (e.g. "(for nurturing)") */
.hero-h1 .sup {
  font-size: 0.16em;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.2em;
  font-weight: 400;
  color: var(--terra);
  font-style: normal;
  text-transform: uppercase;
  position: relative;
  top: -0.55em;
  margin-right: 0.15em;
}

.hero-h1 .sup-after {
  margin-left: 0.1em;
  margin-right: 0;
}

/* "Village" word styling — bright warm parch */
.hero-h1 .hero-village {
  color: var(--parch);
}

/* "laboratory" word styling (gold italic) */
.hero-h1 .hero-lab {
  color: var(--gold);
  font-style: italic;
}

/*
 * Slanted pen-strike on "NOT a classroom".
 * Uses a rotated ::after pseudo-element instead of text-decoration
 * to mimic a hand-drawn, slightly angled pen stroke.
 */
.hero-h1 .hero-strike {
  position: relative;
  display: inline-block;
  color: var(--parch2);
  /* Muted/faded parch for "classroom" */
  font-style: italic;
  text-decoration: none;
}

.hero-h1 .hero-strike::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 52%;
  height: 2.7px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--terra) 8%,
      var(--terra2) 50%,
      var(--terra) 92%,
      transparent 100%);
  transform: rotate(-2.5deg);
  pointer-events: none;
  border-radius: 1px;
}


/* ==========================================================================
   19. CURRICULUM DOWNLOAD BUTTON
   ========================================================================== */

.curriculum-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid rgba(201, 151, 58, 0.35);
  color: var(--gold);
  background: rgba(201, 151, 58, 0.05);
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: none;
  transition: all 0.25s;
  text-decoration: none;
}

.curriculum-btn:hover {
  background: rgba(201, 151, 58, 0.12);
  border-color: var(--gold);
}

.curriculum-btn-icon {
  opacity: 0.7;
  font-size: 1rem;
}


/* ==========================================================================
   20. FOUNDER PHOTO PLACEHOLDER
   A dashed-border placeholder box for the founder's portrait.
   ========================================================================== */

.founder-photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(201, 151, 58, 0.25);
  position: relative;
  overflow: hidden;
}

.founder-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(100%);
}

.founder-photo-corner {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1px solid rgba(201, 151, 58, 0.25);
  border-right: 1px solid rgba(201, 151, 58, 0.25);
}


/* ==========================================================================
   21. SOCIAL LINKS (Footer)
   ========================================================================== */

.f-social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.f-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(239, 230, 208, 0.1);
  color: rgba(239, 230, 208, 0.35);
  transition: all 0.2s;
  text-decoration: none;
}

.f-social-link:hover {
  border-color: rgba(201, 151, 58, 0.4);
  color: var(--gold);
}

.f-social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}


/* ==========================================================================
   22. HAMBURGER MENU TOGGLE (visible on mobile only)
   Three-line icon that morphs into an X when the nav is open.
   ========================================================================== */

.nav-hamburger {
  display: none;
  /* Hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 600;
  background: none;
  border: none;
  padding: 0;
  gap: 5px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;
  transform-origin: center;
}

/* --- X morphing when .open is on the hamburger --- */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ==========================================================================
   23. MOBILE NAV DRAWER
   Full-screen overlay that slides down when hamburger is toggled.
   ========================================================================== */

.mobile-nav-overlay {
  display: none;
  /* Hidden on desktop */
  position: fixed;
  inset: 0;
  z-index: 499;
  background: rgba(8, 7, 10, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-overlay a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--parch);
  text-decoration: none;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease, color 0.2s;
}

.mobile-nav-overlay.open a {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the link entrance */
.mobile-nav-overlay.open a:nth-child(1) {
  transition-delay: 0.08s;
}

.mobile-nav-overlay.open a:nth-child(2) {
  transition-delay: 0.14s;
}

.mobile-nav-overlay.open a:nth-child(3) {
  transition-delay: 0.20s;
}

.mobile-nav-overlay.open a:nth-child(4) {
  transition-delay: 0.26s;
}

.mobile-nav-overlay.open a:nth-child(5) {
  transition-delay: 0.32s;
}

.mobile-nav-overlay.open a:nth-child(6) {
  transition-delay: 0.38s;
}

.mobile-nav-overlay a:hover {
  color: var(--gold);
}

/* Mobile CTA inside the overlay */
.mobile-nav-overlay .mobile-nav-cta {
  margin-top: 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 2.4rem;
  border: 1px solid var(--terra);
  color: var(--terra);
  transition: background 0.25s, color 0.25s, opacity 0.5s ease, transform 0.5s ease;
}

.mobile-nav-overlay .mobile-nav-cta:hover {
  background: var(--terra);
  color: var(--parch);
}


/* ==========================================================================
   24. TOUCH-DEVICE ADJUSTMENTS
   Hide the custom cursor on devices without a fine pointer (phones/tablets).
   ========================================================================== */

@media (pointer: coarse) {
  body {
    cursor: auto;
  }

  #cursor,
  #cursor-ring {
    display: none !important;
  }

  .nav-cta,
  .aud-card,
  .wf-select,
  .wf-submit,
  .btn-p,
  .btn-g {
    cursor: pointer;
  }
}


/* ==========================================================================
   25. RESPONSIVE — LARGE TABLET (≤ 1200px)
   Slight padding and gap reductions before the full mobile collapse.
   ========================================================================== */

@media (max-width: 1200px) {
  .why-inner {
    gap: 4rem;
  }

  .d-half {
    padding: 5rem 3rem;
  }

  .mission-left,
  .mission-right {
    padding: 5rem 3rem;
  }

  .path-card {
    padding: 2.5rem;
  }

  .vision-header {
    gap: 2.5rem;
  }
}


/* ==========================================================================
   26. RESPONSIVE — TABLET / SMALL LAPTOP (≤ 900px)
   Collapses major multi-column layouts to singles,
   shows the hamburger menu, hides desktop nav links + CTA.
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Show hamburger, hide desktop nav links & CTA --- */
  .nav-hamburger {
    display: flex;
  }

  .mobile-nav-overlay {
    display: flex;
  }

  .nav-mid {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  /* Compact nav padding */
  nav {
    padding: 1.2rem 1.5rem;
  }

  /* --- Reduce section padding --- */
  .hero {
    padding: 0 1.5rem 4rem;
  }

  .why,
  .paths,
  .vision,
  .outcomes,
  .audiences {
    padding: 6rem 1.5rem;
  }

  .founder {
    padding: 6rem 1.5rem;
  }

  .cta-section {
    padding: 6rem 1.5rem;
  }

  /* --- Collapse all multi-column grids to single column --- */
  .why-inner,
  .paths-header,
  .vision-header,
  .outcomes-top,
  .duality,
  .mission-split,
  .paths-grid,
  .archetypes,
  .aud-grid,
  .vision-items {
    grid-template-columns: 1fr;
  }

  /* Stack founder card vertically on tablet/mobile */
  .founder-card {
    flex-direction: column;
    gap: 2rem;
  }

  .founder-card-photo {
    width: 100%;
    max-width: 260px;
  }

  /* Reduce grid gaps that were designed for two-col */
  .why-inner {
    gap: 3rem;
  }

  .paths-header {
    gap: 1.5rem;
  }

  .vision-header {
    gap: 2rem;
    margin-bottom: 3.5rem;
  }

  /* --- Duality halves --- */
  .duality {
    min-height: auto;
  }

  .d-half {
    padding: 4rem 2rem;
    min-height: 60vh;
  }

  /* --- Mission panels --- */
  .mission-split {
    min-height: auto;
  }

  .mission-right,
  .mission-left {
    padding: 4rem 2rem;
  }

  /* --- Hero bottom area: stack vertically --- */
  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-bottom>div:last-child {
    align-items: flex-start !important;
  }

  /* --- Outcomes header --- */
  .outcomes-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .outcomes-note {
    text-align: left;
    max-width: 100%;
  }

  /* --- Archetypes cards --- */
  .archetypes {
    gap: 1px;
    background: var(--faint);
  }

  .archetype {
    background: var(--slate);
  }

  /* --- Audience grid --- */
  .aud-grid {
    gap: 1px;
  }

  /* --- Form row: stack name + email --- */
  .wf-row {
    grid-template-columns: 1fr;
  }

  /* --- Footer: stack and center --- */
  footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    padding: 2.5rem 1.5rem;
  }

  .f-right {
    text-align: center;
    align-items: center !important;
  }

  .f-mid {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
}


/* ==========================================================================
   27. RESPONSIVE — PHONE (≤ 600px)
   Further shrinks text, padding, and spacing for narrow handsets.
   ========================================================================== */

@media (max-width: 600px) {

  /* --- Nav --- */
  nav {
    padding: 1rem 1rem;
  }

  .nav-logo-main {
    font-size: 1.1rem;
  }

  .nav-logo-sub {
    font-size: 0.45rem;
  }

  /* --- Hero --- */
  .hero {
    padding: 0 1rem 3rem;
  }

  .hero-content {
    padding-top: 4rem;
  }

  .hero-h1 {
    font-size: clamp(2.6rem, 10vw, 4.5rem);
    margin-bottom: 1rem;
  }

  .hero-h1 .line2 {
    padding-left: 0.5ch;
  }

  .hero-eyebrow {
    font-size: 0.55rem;
    margin-bottom: 1rem;
  }

  .hero-descriptor {
    font-size: 0.875rem;
    max-width: 100%;
  }

  .hero-bottom {
    margin-top: 2rem;
    gap: 1.5rem;
  }

  .hero-stats {
    gap: 2rem;
  }

  .hero-stat-num {
    font-size: 2rem;
  }

  .curriculum-btn {
    font-size: 0.55rem;
    padding: 0.7rem 1.2rem;
    gap: 0.5rem;
  }

  .hero-scroll {
    bottom: 1.5rem;
  }

  /* --- All sections: tighter padding --- */
  .why,
  .paths,
  .vision,
  .outcomes,
  .audiences {
    padding: 4rem 1rem;
  }

  .founder {
    padding: 4rem 1rem;
  }

  .cta-section {
    padding: 5rem 1rem;
  }

  /* --- Why section --- */
  .why-pull {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .why-p {
    font-size: 0.875rem;
  }

  .why-callout {
    padding: 1.25rem 1.25rem;
  }

  .why-callout-text {
    font-size: 1.1rem;
  }

  /* --- Duality --- */
  .duality-header {
    padding: 3rem 1.25rem 2rem;
  }

  .duality-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .d-half {
    padding: 3rem 1.25rem;
    min-height: 50vh;
  }

  .d-name {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  .d-desc {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  /* --- Path cards --- */
  .path-card {
    padding: 2rem 1.5rem;
  }

  .path-name {
    font-size: 1.6rem;
  }

  /* --- Mission split --- */
  .mission-left,
  .mission-right {
    padding: 3rem 1.25rem;
  }

  .mission-text {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  /* --- Vision --- */
  .vision-h {
    font-size: clamp(2rem, 7vw, 3.5rem);
  }

  .vision-item {
    padding: 2rem 1.5rem;
  }

  /* --- Outcomes --- */
  .outcomes-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .archetype {
    padding: 2rem 1.5rem;
  }

  .arch-name {
    font-size: 1.5rem;
  }

  /* --- Audience cards --- */
  .aud-card {
    padding: 2rem 1.25rem;
  }

  .aud-title {
    font-size: 1.3rem;
  }

  /* --- CTA section --- */
  .cta-h {
    font-size: clamp(2.4rem, 9vw, 4rem);
  }

  .cta-sub {
    font-size: 0.875rem;
    margin-bottom: 2.5rem;
  }

  .cta-inner {
    max-width: 100%;
  }

  .waitlist-form {
    max-width: 100%;
  }

  /* --- Audiences heading (inline style override) --- */
  .audiences-inner>h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  }

  /* --- Footer --- */
  footer {
    padding: 2rem 1rem;
    gap: 1.25rem;
  }

  .f-mid {
    gap: 0.8rem;
  }

  .f-mid a {
    font-size: 0.58rem;
  }

  .f-logo {
    font-size: 0.95rem;
  }

  /* --- Mobile nav overlay: slightly smaller text --- */
  .mobile-nav-overlay a {
    font-size: 1.5rem;
  }
}