/* ===================================================
   EMPOWERMENT THERAPY INSTITUTE
   Clean, modern, minimal design
   Inspired by koboldmetals.com aesthetic
   =================================================== */

/* ===== PAGE LOADER ===== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: var(--navy);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.loader-bloom {
  position: relative;
  width: 56px;
  height: 56px;
  animation: loader-spin 3s linear infinite;
}

.loader-petal {
  position: absolute;
  width: 14px;
  height: 24px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  left: 50%;
  top: 50%;
  transform-origin: center bottom;
  opacity: 0.85;
}

/* Petals alternate the logo's two poles — blue and green —
   meeting in a seafoam core ringed with a gold glow. */
.loader-petal:nth-child(1) {
  transform: translate(-50%, -100%) rotate(0deg);
  background: var(--blue);
}

.loader-petal:nth-child(2) {
  transform: translate(-50%, -100%) rotate(60deg);
  background: var(--green);
}

.loader-petal:nth-child(3) {
  transform: translate(-50%, -100%) rotate(120deg);
  background: var(--blue);
}

.loader-petal:nth-child(4) {
  transform: translate(-50%, -100%) rotate(180deg);
  background: var(--green);
}

.loader-petal:nth-child(5) {
  transform: translate(-50%, -100%) rotate(240deg);
  background: var(--blue);
}

.loader-petal:nth-child(6) {
  transform: translate(-50%, -100%) rotate(300deg);
  background: var(--green);
}

.loader-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--seafoam);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(228, 204, 120, 0.55);
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.08);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.loader-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@keyframes loader-text-pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.7;
  }
}

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

:root {
  /* ===== Brand palette — sampled directly from the logo =====
     The logo: a royal-blue circle and a leaf-green circle overlap in
     seafoam around a cream starburst, ringed in gold, on a sage ellipse.
     Blue + green are the two poles; seafoam is where they meet;
     gold marks moments of commitment; cream is the ground. */
  --blue: #546cc0;           /* royal blue — left circle */
  --blue-deep: #3c519f;      /* darkened blue for hovers / AA text */
  --blue-light: #eef1f9;     /* blue-tinted surface */
  --green: #84b454;          /* leaf green — right circle */
  --green-deep: #4d6d28;     /* text-grade green — AA on cream/white and tints */
  --green-light: #f1f6e9;    /* green-tinted surface */
  --seafoam: #84cca8;        /* the overlap — harmony color */
  --seafoam-deep: #2f6b50;   /* text-grade seafoam — AA on cream/white and tints */
  --seafoam-light: #ecf7f1;  /* seafoam-tinted surface */
  --sage-mist: #9cc0c0;      /* logo ellipse — hairlines & quiet borders */
  --gold: #e4cc78;           /* gold ring — the single warm accent */
  --gold-deep: #82691a;      /* text-grade gold — AA on cream/white and tints */
  --ink: #1a2340;            /* THE dark — deep indigo grown from the blue */
  --ink-soft: #232f56;       /* raised surfaces on dark */
  --cream: #faf8f0;          /* page ground — starburst cream, softened */
  --cream-dark: #f0ecdd;
  --white: #ffffff;
  --text-dark: #232a40;      /* body ink */
  --text-muted: #5a6178;     /* secondary ink */

  /* Legacy aliases — old names mapped to honest logo values */
  --teal: var(--seafoam);
  --teal-light: var(--seafoam-light);
  --teal-dark: var(--seafoam-deep);
  --coral: var(--blue);
  --coral-light: var(--blue-light);
  --peach: var(--seafoam);
  --blush: var(--seafoam);
  --navy: var(--ink);
  --navy-light: var(--ink-soft);
  --light-yellow: var(--cream);
  --sage: var(--green);
  --rose: var(--seafoam);
  --rose-light: var(--seafoam-light);

  --shadow-sm: 0 1px 3px rgba(26, 35, 64, 0.06), 0 1px 2px rgba(26, 35, 64, 0.04);
  --shadow-md: 0 4px 14px rgba(26, 35, 64, 0.08), 0 2px 6px rgba(26, 35, 64, 0.04);
  --shadow-lg: 0 10px 30px rgba(26, 35, 64, 0.1), 0 4px 10px rgba(26, 35, 64, 0.04);
  --shadow-glow: 0 0 30px rgba(132, 204, 168, 0.25);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;

  --font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-merriweather: 'Merriweather', Georgia, 'Times New Roman', serif;
  --max-width: 1400px;

  /* === Unified section-title size ===
     Controls: "The Problem", "What We Are Doing", "Who Is This For?",
     "What is Empowerment Therapy?", "What Our Students Say", "Frequently Asked Questions".
     Change this single value to scale all major section headings together. */
  --section-title-size: clamp(2.04rem, 3.825vw, 3.06rem);

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden;
}

::selection {
  background: var(--blue);
  color: var(--cream);
}

::-moz-selection {
  background: var(--blue);
  color: var(--cream);
}


body {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text-dark);
  line-height: 1.7;
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  /* the logo read left to right: blue pole → seafoam overlap → green pole */
  background: linear-gradient(90deg, var(--blue), var(--seafoam), var(--green));
  z-index: 10000;
  transition: width 0.1s linear;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.fade-in-group>* {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-group>*.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-group>*:nth-child(1) {
  transition-delay: 0.05s;
}

.fade-in-group>*:nth-child(2) {
  transition-delay: 0.15s;
}

.fade-in-group>*:nth-child(3) {
  transition-delay: 0.25s;
}

.fade-in-group>*:nth-child(4) {
  transition-delay: 0.35s;
}

.fade-in-group>*:nth-child(5) {
  transition-delay: 0.45s;
}

.fade-in-group>*:nth-child(6) {
  transition-delay: 0.55s;
}

/* ===== HEADER ===== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

header.scrolled {
  background: rgba(26, 35, 64, 0.78);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 24px rgba(26, 35, 64, 0.25);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  max-width: 100%;
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.logo img {
  height: 72px;
  width: auto;
  position: relative;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  margin-left: 0.75rem;
}

header.scrolled .logo-text {
  color: var(--white);
}

.logo:hover img {
  opacity: 0.8;
}

/* Disable old flourish decorations */
.logo-flourish-botanical::before,
.logo-flourish-botanical::after {
  display: none;
}

/* Stack that holds nav and register button vertically */
.nav-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  align-self: center;
  flex-shrink: 1;
  min-width: 0;
}

nav {
  display: flex;
  align-items: center;
  gap: 3px;
  /* brand-blue glass, grown from the logo's royal blue */
  background: rgba(60, 81, 159, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(84, 108, 192, 0.4);
}

/* About dropdown */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle::after {
  content: '';
  display: none;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(26, 35, 64, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(84, 108, 192, 0.45);
  border-radius: 6px;
  padding: 0.35rem 0.25rem;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 20;
  box-shadow: var(--shadow-lg);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  border-radius: 4px;
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

nav a {
  font-size: clamp(0.7rem, 1.1vw, 1.15rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  padding: 0.4rem clamp(0.3rem, 0.55vw, 0.7rem);
  text-decoration: none;
  transition: color 0.5s ease, background 0.3s ease;
  letter-spacing: 0.04em;
  border-radius: 4px;
  white-space: nowrap;
}

nav a:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.15);
}

/* the gold keyline that signs every section title also marks "you are here" */
nav a.active {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.12);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 16px 2px;
  background-position: bottom 4px center;
}

header.scrolled nav {
  background: rgba(60, 81, 159, 0.7);
  border-color: rgba(84, 108, 192, 0.45);
  gap: 3px;
}

header.scrolled nav a {
  color: rgba(255, 255, 255, 0.9);
}

header.scrolled nav a:hover,
header.scrolled nav a.active {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.15);
  gap: 3px;
}

/* Remove pipe separators */
nav a+a::before {
  display: none;
}

.nav-register {
  /* the one persistent CTA earns the logo's one warm color */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border: 1px solid rgba(162, 132, 47, 0.5);
  color: #3a3113 !important;
  padding: 0.4rem clamp(0.3rem, 0.55vw, 0.7rem) !important;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(0.7rem, 1.1vw, 1.15rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(26, 35, 64, 0.18);
  line-height: 1.2;
}

.nav-register:hover {
  background: #edda92 !important;
  color: #3a3113 !important;
  box-shadow: 0 4px 16px rgba(26, 35, 64, 0.25);
}

header.scrolled .nav-register {
  background: var(--gold);
  border-color: rgba(162, 132, 47, 0.5);
  color: #3a3113 !important;
}

header.scrolled .nav-register:hover {
  background: #edda92 !important;
  border-color: rgba(162, 132, 47, 0.6) !important;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2.25rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 2px solid var(--navy);
  border-radius: 4px;
  color: var(--navy);
  background: transparent;
  transition: all var(--transition-smooth);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 35, 64, 0.16);
}

.btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow: var(--shadow-sm);
  transition-duration: 0.1s;
}

/* one keyboard affordance sitewide: the logo's gold ring */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn--filled {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn--filled:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #3a3113;
}

.btn--gold:hover {
  background: #edda92;
  border-color: #edda92;
  color: #3a3113;
  box-shadow: 0 6px 20px rgba(228, 204, 120, 0.25);
}

.btn--ghost-light {
  border-color: rgba(250, 248, 240, 0.5);
  color: var(--cream);
  background: transparent;
}

.btn--ghost-light:hover {
  background: rgba(250, 248, 240, 0.12);
  border-color: var(--cream);
  color: var(--cream);
}

/* ===== CTA BAND — the closing invitation on every page ===== */
.cta-band {
  background: linear-gradient(150deg, var(--ink) 0%, #222d58 55%, #1e2a52 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  text-align: center;
}

/* the same two-circles glow as the subpage hero — blue meets green in seafoam */
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* the logo's two circles, drawn as faint rings meeting at the center */
    radial-gradient(circle 230px at calc(50% - 150px) 55%, transparent 228px, rgba(84, 108, 192, 0.35) 229px, transparent 231px),
    radial-gradient(circle 230px at calc(50% + 150px) 55%, transparent 228px, rgba(132, 180, 84, 0.32) 229px, transparent 231px),
    radial-gradient(circle at 22% 120%, rgba(84, 108, 192, 0.4) 0%, transparent 55%),
    radial-gradient(circle at 78% 120%, rgba(132, 180, 84, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 130%, rgba(132, 204, 168, 0.22) 0%, transparent 50%);
  pointer-events: none;
}

/* the logo's gold ring, drawn at scale around the moment of commitment */
.cta-band::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -320px;
  transform: translateX(-50%);
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border: 1.5px solid rgba(228, 204, 120, 0.28);
  box-shadow: inset 0 0 60px rgba(228, 204, 120, 0.06);
  pointer-events: none;
}

.cta-band > * {
  position: relative;
}

.cta-band h2 {
  color: var(--cream);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  margin-bottom: 0.85rem;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== MOBILE MENU ===== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--white);
  margin: 6px 0;
  border-radius: 2px;
  transition: all 0.5s;
}

header.scrolled .menu-toggle span {
  background: var(--white);
}

/* ===== PAGE SPACER ===== */
.page-spacer {
  height: 0;
}

/* Subpage adjustments — pages without a hero need content pushed below fixed header */
body.subpage header {
  background: rgba(26, 35, 64, 0.78);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.25);
}

body.subpage .logo-text {
  color: var(--white);
}

body.subpage .menu-toggle span {
  background: var(--white) !important;
}

body.subpage .subpage-spacer {
  /* shared.js measures the header at runtime and writes --header-h on <html>.
     Fallback covers the moment before the script runs. */
  height: var(--header-h, 92px);
}

/* Subpage hero banner (small intro section) */
.subpage-hero {
  background: linear-gradient(150deg, var(--ink) 0%, #222d58 55%, #1e2a52 100%);
  color: var(--white);
  padding: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* The logo's geometry as a hero motif: a blue glow from the left and a
   green glow from the right, softly meeting in seafoam at the center. */
.subpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* faint two-circle geometry behind the title */
    radial-gradient(circle 200px at calc(50% - 130px) 60%, transparent 198px, rgba(84, 108, 192, 0.3) 199px, transparent 201px),
    radial-gradient(circle 200px at calc(50% + 130px) 60%, transparent 198px, rgba(132, 180, 84, 0.28) 199px, transparent 201px),
    radial-gradient(circle at 22% 120%, rgba(84, 108, 192, 0.4) 0%, transparent 55%),
    radial-gradient(circle at 78% 120%, rgba(132, 180, 84, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 130%, rgba(132, 204, 168, 0.22) 0%, transparent 50%);
  pointer-events: none;
}

.subpage-hero h1 {
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 0.75rem;
  position: relative;
}

/* a short gold keyline under every subpage title — the logo's ring */
.subpage-hero h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 1rem auto 0;
  border-radius: 1px;
  animation: keyline-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

@keyframes keyline-grow {
  from {
    transform: scaleX(0);
  }
}

.subpage-hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

/* ===== HERO SECTION ===== */
.hero-clouds-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: visible;
  background: var(--ink);
  z-index: 0;
}

/* Hero background video — fixed for parallax */
.hero-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -2;
}

/* Suppress iOS Safari "tap to play" overlay for all decorative background videos */
.hero-video,
.venn-cloud-video,
.who-bg-video {
  pointer-events: none;
}

.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-panel,
.venn-cloud-video::-webkit-media-controls,
.venn-cloud-video::-webkit-media-controls-start-playback-button,
.venn-cloud-video::-webkit-media-controls-overlay-play-button,
.venn-cloud-video::-webkit-media-controls-panel,
.who-bg-video::-webkit-media-controls,
.who-bg-video::-webkit-media-controls-start-playback-button,
.who-bg-video::-webkit-media-controls-overlay-play-button,
.who-bg-video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Dark overlay on video for readability */
.hero-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 64, 0.45);
  z-index: -1;
}

/* God rays — subtle */
.hero-clouds-section::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 120%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(from 200deg at 30% 10%,
      transparent 0deg,
      rgba(132, 204, 168, 0.06) 4deg,
      transparent 9deg,
      transparent 22deg,
      rgba(132, 204, 168, 0.04) 26deg,
      transparent 30deg,
      transparent 360deg);
  animation: rays-drift 20s ease-in-out infinite;
}

.hero-clouds-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(26, 35, 64, 0.15) 0%, transparent 100%);
}

@keyframes rays-drift {

  0%,
  100% {
    transform: rotate(0deg);
    opacity: 0.5;
  }

  50% {
    transform: rotate(3deg);
    opacity: 1;
  }
}

.hero-clouds-overlay {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
}

/* scroll cue — a slender line that breathes downward */
.hero-clouds-overlay::after {
  content: '';
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  width: 1.5px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(250, 248, 240, 0.85));
  animation: scroll-cue 2.6s ease-in-out infinite;
}

@keyframes scroll-cue {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.4;
  }

  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}

/* Hero emblem — elliptical logo image */
.hero-emblem {
  position: relative;
  width: clamp(300px, 35vw, 440px);
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-float 8s ease-in-out infinite;
}

@keyframes hero-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.hero-frost-oval {
  position: absolute;
  width: 120%;
  height: 110%;
  top: -5%;
  left: -10%;
  border-radius: 50%;
  background: rgba(26, 35, 64, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.hero-logo-full {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
  position: relative;
  z-index: 3;
}

/* Hero headline — Kobold-style large statement text */
.hero-headline {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(2.125rem, 5.1vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  max-width: 1200px;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}

/* the serif has no bold — emphasize with the brand's warm gold instead */
.hero-headline strong {
  font-weight: 400;
  color: var(--gold);
}

/* ===== COUNTRY BAR ===== */
.country-bar {
  background: var(--cream);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.country-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(84, 108, 192, 0.08) 0%, transparent 55%),
    /* blue pole glow */
    radial-gradient(ellipse at 88% 50%, rgba(132, 180, 84, 0.08) 0%, transparent 55%);
  /* green pole glow */
  pointer-events: none;
}

.country-bar-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  position: relative;
}

.globe-container {
  flex-shrink: 0;
}

.globe-container svg {
  display: block;
  border-radius: 50%;
  overflow: hidden;
}

.country-list {
  flex: 1;
}

.country-bar-label {
  display: block;
  color: var(--blue-deep);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  margin-top: 0;
  position: relative;
  padding-bottom: 0.55rem;
}

.country-bar-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--gold);
}

.country-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0;
}

/* the worldwide list ripples in as a gentle wave */
.country-tags > :nth-child(7) { transition-delay: 0.35s; }
.country-tags > :nth-child(8) { transition-delay: 0.4s; }
.country-tags > :nth-child(9) { transition-delay: 0.45s; }
.country-tags > :nth-child(10) { transition-delay: 0.5s; }
.country-tags > :nth-child(11) { transition-delay: 0.55s; }
.country-tags > :nth-child(12) { transition-delay: 0.6s; }
.country-tags > :nth-child(13) { transition-delay: 0.65s; }

.country-tag {
  display: inline-block;
  padding: 0.32rem 0.9rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(84, 108, 192, 0.22);
  border-radius: 100px;
  color: var(--blue-deep);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: default;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.country-tag:hover {
  border-color: var(--seafoam-deep);
  background: var(--white);
}

/* ===== NEWS & EVENTS (data-driven; the section hides itself when empty) ===== */
.news-section {
  background: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 2rem;
}

.news-events-grid {
  max-width: 1000px;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: center;
  align-items: flex-start;
}

.ne-col {
  flex: 1 1 320px;
  max-width: 480px;
  min-width: 0;
}

.ne-subhead {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ne-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.ne-dot--blue { background: var(--blue); }
.ne-dot--green { background: var(--green); }

.ne-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ne-item {
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.ne-item-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 0.4rem;
}

.ne-list--events .ne-item-date {
  color: var(--green-deep);
  text-transform: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ne-item-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.ne-item-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.ne-item-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0.45rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}

.ne-item-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blue-deep);
}

.ne-item-link:hover { color: var(--seafoam-deep); }

.ne-recur {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  background: rgba(228, 204, 120, 0.2);
  padding: 0.12rem 0.5rem;
  border-radius: 100px;
}

@media (max-width: 700px) {
  .news-events-grid {
    flex-direction: column;
    align-items: stretch;
  }
  .ne-col {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}

/* ===== THE PROBLEM SECTION ===== */
.problem-section {
  background: var(--ink);
  /* flat dark blue */
  color: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 2rem;
  position: relative;
  overflow: hidden;
}

.problem-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.problem-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 21, 40, 0.55) 0%, rgba(15, 21, 40, 0.4) 50%, rgba(15, 21, 40, 0.65) 100%);
  z-index: 1;
  pointer-events: none;
}

.problem-section .container {
  position: relative;
  z-index: 2;
}

/* the two poles glow quietly in the corners of the dark section */
.problem-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(84, 108, 192, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 95% 100%, rgba(132, 180, 84, 0.16) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

/* Grid: title spans full width, body+aside share the middle row, footer spans full width */
.problem-grid {
  --col-gap: clamp(2rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 22%);
  grid-template-areas:
    "title  title"
    "body   aside"
    "footer footer";
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.problem-grid-title {
  grid-area: title;
  text-align: left;
  margin-bottom: 0;
}

.problem-grid-body {
  grid-area: body;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.problem-grid-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: center;
  position: relative;
}

/* Vertical divider in the gap between body and aside — Connection Aqua (logo color) */
.problem-grid-aside::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--col-gap) / 2 - 1px);
  width: 2px;
  background: var(--seafoam);
  opacity: 0.85;
}

.problem-grid-footer {
  grid-area: footer;
  max-width: none;
  margin: 0;
}

.problem-grid-footer .problem-divider {
  margin-top: 0.5rem;
}

.problem-decor-img {
  width: 100%;
  aspect-ratio: var(--ar, 1);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  opacity: 0.92;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(250, 248, 240, 0.14);
}

/* the collage drifts into place, one photo at a time */
.problem-section .problem-decor-img {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.problem-section.visible .problem-decor-img {
  opacity: 0.92;
  transform: translateX(0);
}

/* Keep every photo aligned to the same right edge. */
.problem-section.visible .problem-grid-aside .problem-decor-img:nth-child(even) {
  transform: translateX(0);
}

.problem-section .problem-decor-img:nth-child(1) { transition-delay: 0.15s; }
.problem-section .problem-decor-img:nth-child(2) { transition-delay: 0.3s; }
.problem-section .problem-decor-img:nth-child(3) { transition-delay: 0.45s; }
.problem-section .problem-decor-img:nth-child(4) { transition-delay: 0.6s; }

@media (max-width: 720px) {
  .problem-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "body"
      "footer";
  }

  .problem-grid-aside {
    display: none;
    /* keep mobile clean */
  }

  .problem-grid-title {
    text-align: center;
  }
}

/* Every .section-title carries the short gold keyline — the logo's ring */
.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 1.1rem auto 0;
  border-radius: 1px;
}

/* the keyline draws itself in as its section arrives */
.fade-in .section-title::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.fade-in.visible .section-title::after {
  transform: scaleX(1);
}

.problem-section .section-title::after {
  transform-origin: left;
}

.problem-section .section-title {
  color: var(--cream);
  text-align: left;
  margin-bottom: 2rem;
}

.problem-section .section-title::after {
  margin-left: 0;
  display: none;
}

.problem-content {
  max-width: 900px;
  margin: 0 auto;
}

.problem-content p {
  color: rgba(250, 248, 240, 0.92);
  font-size: 1.35rem;
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

/* magazine-style serif lead on the opening paragraph */
.problem-grid-body > p:first-child {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  line-height: 1.6;
  color: var(--cream);
}

/* the thesis panel — the section's promise, held in a gold-ruled frame */
.problem-thesis {
  margin-top: 1.75rem;
  padding: 1.5rem 1.75rem;
  background: rgba(250, 248, 240, 0.05);
  border-left: 3px solid var(--seafoam);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.problem-thesis .et-statement {
  font-size: 1.3rem !important;
  margin-bottom: 1rem !important;
}

.problem-thesis .et-statement:last-child {
  margin-bottom: 0 !important;
}

.problem-divider {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--seafoam), var(--green));
  margin: 2rem 0 1.5rem;
  width: 100%;
  opacity: 0.9;
}

.problem-disclaimer {
  margin-top: 0;
  font-size: 1.15rem !important;
  color: rgba(250, 248, 240, 0.68) !important;
  line-height: 1.6;
}

/* Reusable "problem font" — applies the larger body size used on the Problem section sitewide */
.problem-font,
.problem-font p,
.problem-font li {
  font-size: 1.35rem !important;
  line-height: 1.8 !important;
}

/* ===== WHAT WE ARE DOING SECTION ===== */
.doing-section {
  background: var(--cream);
  color: var(--text-dark);
  padding: clamp(3rem, 6vw, 5rem) 2rem;
}

.doing-section .section-title {
  color: var(--green-deep);
  text-align: center;
  margin-bottom: 2rem;
}

.doing-content {
  max-width: 900px;
  margin: 0 auto;
}

.doing-list {
  list-style: none;
  padding: 0;
}

.doing-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-dark);
}

.doing-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 0.75rem;
  top: 0.35rem;
}

.doing-sublist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.25rem 0;
}

.doing-sublist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.doing-sublist li::before {
  content: '○';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 0.7rem;
  top: 0.4rem;
}

/* Accordion version — each bullet is a collapsible item */
.doing-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.doing-accordion-item {
  background: rgba(132, 180, 84, 0.08);
  border: 1px solid rgba(132, 180, 84, 0.3);
  border-radius: 8px;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.doing-accordion-item[open] {
  background: rgba(132, 180, 84, 0.13);
  border-color: rgba(132, 180, 84, 0.45);
}

.doing-accordion-item>summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.4rem 1rem 2.5rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--text-dark);
  position: relative;
  user-select: none;
  line-height: 1.4;
}

.doing-accordion-item>summary::-webkit-details-marker {
  display: none;
}

.doing-accordion-item>summary::marker {
  content: '';
}

.doing-accordion-item>summary::before {
  content: '◆';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.doing-accordion-item[open]>summary::before {
  transform: translateY(-50%) rotate(45deg);
  color: var(--gold-deep);
  text-shadow: none;
}

.doing-accordion-item>summary::after {
  content: '+';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green-deep);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.3s ease;
}

.doing-accordion-item[open]>summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.doing-accordion-item>p,
.doing-accordion-item>.doing-sublist {
  margin: 0 1.4rem 1rem 2.5rem;
  color: var(--text-dark);
  font-size: 1.3rem;
  line-height: 1.75;
}

.doing-accordion-item>p:first-of-type {
  padding-top: 0.15rem;
}

.doing-accordion-item>.doing-sublist {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}

.doing-accordion-item>.doing-sublist li {
  font-size: 1.3rem;
  line-height: 1.7;
}

/* ===== Vertical strips with fluid 3D perspective falloff + background images =====
   Inspired by twitter.com/harshsinghsv/status/1969044686221234366 (Cubiq-ish pen)
   Each strip is divided into 9 sub-zones; hover updates --p (strip) and --z (sub-zone)
   for 81 distinct positions = fluid mouse-driven motion across the whole nav. */
.doing-strips {
  --max-p: 9;
  --max-z: 9;
  --p: 4;
  /* hovered/clicked strip index, 0-based; default center */
  --z: 4;
  /* hovered sub-zone index 0..8; default center */

  /* Combined region: gives 81 fluid positions */
  --r: calc(var(--max-z) * var(--p) + var(--z));
  /* Normalized 0..1 across whole nav */
  --r-n: calc(var(--r) / (var(--max-z) * var(--max-p) - 1));

  --hover-intensity: 6rem;
  /* push-forward distance for the active strip */
  --tilt-strength: 0deg;
  /* no rotateX — was creating warped gaps between tilted strips */
  --w: 0.4;
  --hover-smoothness: 70ms;
  --fall-smoothness: 250ms;

  display: flex;
  flex-direction: column;
  gap: 0;
  /* zero gap so cursor never falls into a "no-strip" zone */
  perspective: 2000px;
  transform-style: preserve-3d;
  isolation: isolate;
  /* Sub-zone (--z) is locked to the strip center — removes per-pixel sub-zone flicker */
  --z: 4;
}

/* Resting state — when nothing in the nav is hovered, push --r-n far away (all flat) */
.doing-strips:not(:hover),
.doing-strips:hover:not(:has(.doing-strip:hover)) {
  --p: -10;
}

/* When at rest, force exact flat position to avoid sub-pixel drift in cosine math.
   Filter is no longer on the strip itself (would tint text); it's on ::before. */
.doing-strips:not(:hover) .doing-strip {
  transform: none;
}

/* At rest, lock the image filter into dark-green tint (approx #6C8E3C).
   sepia(1) yellows the image; hue-rotate(50deg) shifts that yellow into olive-green;
   saturate(1.2) gives it some life; brightness(0.4) keeps it dark. */
.doing-strips:not(:hover) .doing-strip::before {
  filter: sepia(1) hue-rotate(50deg) saturate(1.2) brightness(0.4);
}

/* …but if the strip is open/clicked, keep it lit even at rest */
.doing-strips:not(:hover) .doing-strip.is-open::before {
  filter: brightness(1.05) saturate(1.15);
}

/* CSS-driven hover: which strip sets --p (just the strip, no sub-zone tracking) */
.doing-strips:has(.doing-strip:nth-child(1):hover) {
  --p: 0;
}

.doing-strips:has(.doing-strip:nth-child(2):hover) {
  --p: 1;
}

.doing-strips:has(.doing-strip:nth-child(3):hover) {
  --p: 2;
}

.doing-strips:has(.doing-strip:nth-child(4):hover) {
  --p: 3;
}

.doing-strips:has(.doing-strip:nth-child(5):hover) {
  --p: 4;
}

.doing-strips:has(.doing-strip:nth-child(6):hover) {
  --p: 5;
}

.doing-strips:has(.doing-strip:nth-child(7):hover) {
  --p: 6;
}

.doing-strips:has(.doing-strip:nth-child(8):hover) {
  --p: 7;
}

.doing-strips:has(.doing-strip:nth-child(9):hover) {
  --p: 8;
}

.doing-strip {
  --i: 0;
  --p-n: calc(var(--i) / (var(--max-p) - 1));
  --diff: calc(var(--p-n) - var(--r-n));
  --u: clamp(0, calc(abs(var(--diff)) / var(--w)), 1);
  --falloff: calc(0.5 * (1 + cos(var(--u) * 180deg)));
  --img: none;

  background-color: var(--ink);
  /* background-image moved to ::before so the green-tint filter only
     affects the photo — not the text inside the strip */
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  transform: translateZ(calc(var(--falloff) * var(--hover-intensity)));
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.doing-strips {
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}

.doing-strip:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.doing-strip:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Mask any sub-pixel hairline between consecutive strips by overlapping them by 1px.
   The transform: translateZ + preserve-3d combo sometimes rounds strip heights to
   fractional pixels; without this, a sliver of the section's cream bg peeks through. */
.doing-strip + .doing-strip {
  margin-top: -1px;
}

/* === IMAGE LAYER + green tint (filter only affects this pseudo, not the text) ===
   At rest (falloff=0): sepia + hue-rotate dial the photo into a dark olive-green
   approximating #6C8E3C. As falloff → 1, all the tint filters decay and the natural
   colour comes through bright. */
.doing-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  will-change: filter;
  transition: filter 0.32s ease;
  filter:
    sepia(calc(1 - var(--falloff))) hue-rotate(calc((1 - var(--falloff)) * 50deg)) saturate(calc(1 + var(--falloff) * 0.3)) brightness(calc(0.42 + var(--falloff) * 0.73));
}

/* Sub-zone overlay — divides each strip into 9 hover detection slices */
.doing-strip-zones {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 4;
}

.doing-strip-zones>i {
  flex: 1;
  pointer-events: auto;
  display: block;
}

/* === DARK GRADIENT OVERLAY for text legibility — sits above the filtered
   image, BELOW the strip content, so the text always reads cleanly === */
.doing-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 35, 64, 0.85) 0%, rgba(26, 35, 64, 0.55) 60%, rgba(26, 35, 64, 0.7) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.45s ease, opacity 0.5s ease;
}

.doing-strip.is-open::before {
  filter: brightness(1.05) saturate(1.15) !important;
}

.doing-strip.is-open::after {
  background: linear-gradient(90deg, rgba(26, 35, 64, 0.7) 0%, rgba(26, 35, 64, 0.32) 50%, rgba(26, 35, 64, 0.55) 100%);
}

.doing-strip-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.6rem 1.5rem 1.6rem 2rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  position: relative;
  z-index: 2;
}

.doing-strip-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: rgba(250, 248, 240, 0.55);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  min-width: 2.4rem;
  transition: color 0.3s ease;
}

.doing-strip.is-open .doing-strip-num {
  color: var(--green);
}

.doing-strip-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 400;
  color: var(--cream);
  flex: 1;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(26, 35, 64, 0.5);
  letter-spacing: 0;
}

.doing-strip-toggle {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.doing-strip-toggle::before,
.doing-strip-toggle::after {
  content: '';
  position: absolute;
  background: white;
  transition: transform 0.4s ease, background 0.3s ease;
}

.doing-strip-toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.doing-strip-toggle::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.doing-strip.is-open .doing-strip-toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.doing-strip.is-open .doing-strip-toggle::before,
.doing-strip.is-open .doing-strip-toggle::after {
  background: var(--green);
}

.doing-strip-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.doing-strip.is-open .doing-strip-body {
  max-height: 800px;
}

/* Frosted-glass panel for the body text. Applied unconditionally so it stays
   in sync with the body's max-height collapse — `.doing-strip-body { overflow:
   hidden }` clips it when the strip is closed, so it's only visible when open. */
.doing-strip-body-inner {
  background: rgba(26, 35, 64, 0.55);
  border-left: 3px solid var(--gold);
  backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  /* border-radius: 6px; */
  /* margin: 0 1.25rem 1.25rem; */
  padding: 1.25rem 1.75rem 1.5rem calc(2.4rem + 1.5rem);
}

.doing-strip-body-inner p {
  font-size: 1.35rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.85em;                                /* breathing room between paragraphs */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.doing-strip-body-inner p:last-child {
  margin-bottom: 0;
}

/* If a paragraph immediately precedes a sublist, it's a lead-in line —
   tighten its bottom margin so it visually attaches to the bullets. */
.doing-strip-body-inner p:has(+ .doing-sublist) {
  margin-bottom: 0.45em;
}

.doing-strip-body-inner .doing-sublist {
  margin: 0 0 0.85em;
  padding: 0;
  list-style: none;
}

.doing-strip-body-inner .doing-sublist:last-child {
  margin-bottom: 0;
}

.doing-strip-body-inner .doing-sublist li {
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.55rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.doing-strip-body-inner .doing-sublist li:last-child {
  margin-bottom: 0;
}

.doing-strip-body-inner .doing-sublist li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--green);
}

@media (max-width: 768px) {
  .doing-strip-bar {
    padding: 1.1rem 1rem 1.1rem 1.25rem;
    gap: 0.85rem;
  }

  .doing-strip-num {
    font-size: 1.05rem;
    min-width: 1.85rem;
  }

  .doing-strip-title {
    font-size: 1.4rem;
  }

  .doing-strip-body-inner {
    margin: 0 0.75rem 1rem;
    padding: 1rem 1.1rem 1.1rem calc(1.85rem + 0.85rem);
  }

  .doing-strip-body-inner p {
    font-size: 1.25rem;
  }

  .doing-strip-body-inner .doing-sublist li {
    font-size: 1.15rem;
  }
}

/* Main content wrapper — sits above fixed hero video */
.main-content-wrapper {
  position: relative;
  z-index: 1;
  background: var(--cream);
}

/* Hero text below clouds */
.hero-text-content {
  background: var(--cream);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hero-text-content p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--text-muted);
}

/* ET statement box — midnight blue */
.et-statement-box {
  background: var(--ink) !important;
  padding: clamp(3rem, 6vw, 5rem) 2rem;
}

.et-statement-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.et-statement {
  color: rgba(250, 248, 240, 0.95) !important;
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 0 1.25rem 0 !important;

}

.et-statement:last-child {
  margin-bottom: 0 !important;
}

.et-statement strong {
  color: var(--seafoam);
  font-weight: 400;
}

.et-thrive {
  color: var(--gold);
  font-weight: 600;
}

/* Match Problem section container width and horizontal padding */
.problem-section .container,
.et-statement-box .container,
.doing-section .container {
  max-width: 1000px;
}

.et-statement-inner {
  padding-left: 0;
  padding-right: 0;
}

/* ===== SECTIONS ===== */
section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

/* Divider colorway for dark / photo backdrops — brighter hairlines and fills */
.venn-cloud-content .section-divider::before,
.testimonials-title-content .section-divider::before,
.faq-title-content .section-divider::before {
  background: linear-gradient(90deg, transparent, var(--seafoam));
}

.venn-cloud-content .section-divider::after,
.testimonials-title-content .section-divider::after,
.faq-title-content .section-divider::after {
  background: linear-gradient(90deg, var(--seafoam), transparent);
}

.venn-cloud-content .section-divider .ornament::before,
.testimonials-title-content .section-divider .ornament::before,
.faq-title-content .section-divider .ornament::before {
  border-color: var(--blue);
  background: rgba(84, 108, 192, 0.35);
}

.venn-cloud-content .section-divider .ornament::after,
.testimonials-title-content .section-divider .ornament::after,
.faq-title-content .section-divider .ornament::after {
  border-color: var(--green);
  background: rgba(132, 180, 84, 0.35);
}

/* Disable old decorative classes */
.corner-flourish::before,
.corner-flourish::after {
  display: none;
}

.botanical-border::before,
.botanical-border::after {
  display: none;
}

/* Section separators */
.section-separator {
  height: 0;
  border: none;
}

#resources {
  padding-top: 0;
}

/* ===== SECTION DIVIDERS ===== */
/* A miniature of the logo: two overlapping circles — blue and green —
   with hairlines fading out to either side. Used under section titles. */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem auto 2rem;
  max-width: 140px;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}

.section-divider::before {
  background: linear-gradient(90deg, transparent, var(--blue));
}

.section-divider::after {
  background: linear-gradient(90deg, var(--green), transparent);
}

.section-divider .ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 17px;
  height: 11px;
  flex-shrink: 0;
}

.section-divider .ornament::before,
.section-divider .ornament::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.section-divider .ornament::before {
  left: 0;
  border: 1.5px solid var(--blue);
  background: rgba(84, 108, 192, 0.12);
  z-index: 1;
}

.section-divider .ornament::after {
  right: 0;
  border: 1.5px solid var(--green);
  background: rgba(132, 204, 168, 0.35);
  z-index: 2;
}

.divider-leaf {
  /* no special treatment */
}

/* ===== TYPOGRAPHY ===== */
h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  margin-bottom: 0.25rem;
  text-align: center;
  letter-spacing: 0;
}

h2 {
  font-size: var(--section-title-size);
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}

.subtitle {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-style: italic;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text-muted);
}

p {
  margin-bottom: 0.85rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ===== VENN CLOUD SECTION ===== */
.venn-cloud-section {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--cream);
}

/* Soft fade from cloud background into the next section's background */
.venn-cloud-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(to bottom, rgba(236, 247, 241, 0) 0%, rgba(236, 247, 241, 0.5) 45%, var(--seafoam-light) 100%);
  z-index: 2;
  pointer-events: none;
}

.venn-cloud-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.venn-cloud-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 35, 64, 0.35);
  z-index: 1;
  pointer-events: none;
}

.venn-cloud-content {
  position: relative;
  z-index: 3;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.venn-cloud-heading {
  font-family: var(--font-heading);
  font-size: var(--section-title-size);
  color: var(--white);
  margin-bottom: 0.5rem;
}

/* ===== VENN DIAGRAM ===== */
.venn-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 1.5rem;
  margin: 3rem auto 0;
  max-width: 70%;
  position: relative;
}

.venn-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem 2rem;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}

.venn-side-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 35, 64, 0.5);
  z-index: 1;
  pointer-events: none;
}

.venn-side>*:not(.venn-side-overlay) {
  position: relative;
  z-index: 2;
}

.venn-side-left {
  border: 0;
}

.venn-side-right {
  border: 0;
}

.venn-photo {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  padding: 0;
  margin-bottom: 1rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 3px solid #84cca8;
  background: #84cca8;
}

.venn-side-left .venn-photo {
  background: linear-gradient(135deg, var(--blue), var(--seafoam));
}

.venn-side-right .venn-photo {
  background: linear-gradient(135deg, var(--green), var(--seafoam));
}

.venn-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.venn-side h4 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--white);
  margin-bottom: 0.3rem;
}

.venn-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.92);
  font-style: normal;
  font-weight: 400;
  font-family: var(--font-heading);
  margin-bottom: 0;
  line-height: 1.3;
}

/* Centered ET emblem below Rosenberg / Rogers — wrapped in a box matching the men's cards */
/* Where the two poles meet: Empowerment Therapy — the seafoam overlap,
   ringed in gold like the logo's center. */
.venn-side-et {
  width: 100%;
  max-width: 70%;
  margin: 1.5rem auto 0;
  border: 1px solid rgba(228, 204, 120, 0.65);
  border-top: 3px solid var(--gold);
  background: linear-gradient(135deg,
      rgba(84, 108, 192, 0.3) 0%,
      rgba(132, 204, 168, 0.38) 50%,
      rgba(132, 180, 84, 0.3) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  z-index: 3;
  padding: 1.75rem 2rem;
}

.venn-et-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin-bottom: 0.6rem;
}

.venn-et-title {
  font-family: var(--font-heading);
  font-size: clamp(1.53rem, 3.4vw, 2.72rem);
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(26, 35, 64, 0.45);
}

.venn-et-tagline {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  color: rgba(250, 248, 240, 0.92);
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

.venn-points {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.venn-points li {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  padding: 0.15rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.venn-points li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: 0.1em;
}

.venn-side-left .venn-points li::before {
  background: var(--teal);
}

.venn-side-right .venn-points li::before {
  background: var(--coral);
}

/* Center connector */
.venn-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 1.5rem;
}

.venn-connector {
  display: flex;
  align-items: center;
  gap: 0;
}

.venn-line {
  width: 1px;
  height: 60px;
  display: none;
}

.venn-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  padding: 1.25rem 0.75rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(132, 204, 168, 0.6);
  text-align: center;
  padding: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.venn-badge-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.venn-badge-sub {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-dark);
  line-height: 1.5;
  font-weight: 600;
}

/* Active state for scroll animation */
.venn-diagram.venn-active .venn-side-left {
  animation: venn-slide-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.venn-diagram.venn-active .venn-side-right {
  animation: venn-slide-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.venn-diagram.venn-active .venn-badge {
  animation: venn-badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes venn-slide-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes venn-slide-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes venn-badge-pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== ET DESCRIPTION ===== */
/* a soft seafoam band — the harmony color gets one full section */
#etDescriptionSection {
  background: var(--seafoam-light);
}

.et-description {
  max-width: 1000px;
  margin: 2rem auto 0;
  padding: 0 2rem;
}

.et-description p {
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
}

.et-description-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.3vw, 1.9rem) !important;
  line-height: 1.65 !important;
  color: var(--ink);
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.et-examples {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.75rem 0;
}

.et-examples span {
  font-style: italic;
  color: var(--text-dark);
  padding: 0.85rem 1.5rem;
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}

/* each voiced worry carries one of the brand hues */
.et-examples span:nth-child(2) {
  border-left-color: var(--green);
}

.et-examples span:nth-child(3) {
  border-left-color: var(--seafoam);
}

.et-description-aims {
  font-weight: 500;
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
  margin-top: 0.5rem;
}

/* "Why this is harder than it looks" expandable details — keeps the page compact */
.et-deeper {
  margin: 1.5rem 0 2rem;
  text-align: center;
}

.et-deeper-body {
  text-align: left;
}

.et-deeper>summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.95rem;
  background: rgba(84, 108, 192, 0.08);
  border: 1px solid rgba(84, 108, 192, 0.35);
  border-radius: 6px;
  outline: 1px solid rgba(84, 108, 192, 0.2);
  outline-offset: 2px;
  font-family: var(--font-heading);
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-deep);
  user-select: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.et-deeper-label {
  font-size: 1.5em;
}

.et-deeper>summary::-webkit-details-marker {
  display: none;
}

.et-deeper>summary::marker {
  content: '';
}

.et-deeper>summary:hover {
  background: rgba(84, 108, 192, 0.15);
  border-color: rgba(84, 108, 192, 0.55);
  color: var(--blue-deep);
}

.et-deeper-icon {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  color: inherit;
}

.et-deeper-icon::before,
.et-deeper-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.et-deeper-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.et-deeper-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.et-deeper[open]>summary .et-deeper-icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.et-deeper[open]>summary {
  background: rgba(84, 108, 192, 0.15);
  border-color: rgba(84, 108, 192, 0.55);
}

.et-deeper-body {
  margin-top: 1.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(84, 108, 192, 0.2);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
  background: rgba(84, 108, 192, 0.05);
  animation: et-deeper-reveal 0.4s ease;
}

.et-deeper-body>p:last-child {
  margin-bottom: 0;
}

@keyframes et-deeper-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.et-description-closing {
  font-size: 1.5rem !important;
  line-height: 1.8 !important;
  margin-top: 1.25rem;
  /* text-align: center; */
  color: var(--text-dark);
}

.et-description-closing em {
  font-weight: 600;
  color: var(--blue-deep);
}

/* ===== SCHEDULE CARDS ===== */
.schedule-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 640px;
  margin: 2rem auto;
}

.schedule-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--transition-smooth);
}

.schedule-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.schedule-card .time {
  font-size: 1rem;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 0.25rem;
}

.schedule-card .date {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== WHO IS THIS FOR? — editorial layout ===== */
.who-section {
  background: var(--cream);
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}

/* === Header slice with a still nature image behind the lead title === */
.who-title-slice {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 30vh, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 3px solid var(--blue);
}

.who-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Bottom-only fade: image is fully visible at top; only the final ~30% blends
   into the section background below. No white wash across the photo. */
.who-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(250, 248, 240, 0) 0%,
      rgba(250, 248, 240, 0) 70%,
      var(--cream) 100%);
  z-index: 1;
  pointer-events: none;
}

.who-title-slice > .who-block--lead {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: none;                                  /* kill the inherited .who-block border above the title */
}

/* "Who is this for?" title — white text on a darkened backdrop-blur panel */
.who-title-slice .who-block-eyebrow {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 8px;
  color: var(--cream);
  background: rgba(26, 35, 64, 0.45);
  backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
}

/* Intro */
.who-intro {
  max-width: 850px;
  margin: 0 auto;
  padding: calc(150px + clamp(3rem, 6vw, 5rem)) 2rem clamp(2rem, 4vw, 3rem);
}

.who-intro p {
  font-size: 1.35rem;
  line-height: 1.8;
  color: var(--text-dark);
  margin-bottom: 1.25rem;
}

.who-intro p:last-child {
  margin-bottom: 0;
}

/* Editorial blocks — image alongside text, alternating */
.who-blocks {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.who-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid rgba(156, 192, 192, 0.45);
}

.who-blocks>.who-block:last-child {
  border-bottom: 1px solid rgba(156, 192, 192, 0.45);
}

/* The first block inside .who-blocks (the "For Therapists" subsection) — no top border */
.who-blocks>.who-block:first-child {
  border-top: none;
  /* margin-top: 100px; */
}

.who-block--reverse .who-block-img {
  order: 2;
}

/* === 3 child blocks: eyebrow above image; heading top-aligns with image === */
.who-blocks>.who-block {
  grid-template-areas:
    "eyebrow ."
    "image   content";
  gap: clamp(0.5rem, 1.2vw, 1rem) clamp(2rem, 5vw, 4.5rem);
}

/* Reverse (Coaches): image on right, text on left → eyebrow on the RIGHT, flush right */
.who-blocks>.who-block--reverse {
  grid-template-areas:
    ".       eyebrow"
    "content image";
}

.who-blocks>.who-block--reverse>.who-block-eyebrow {
  text-align: right;
}

.who-blocks>.who-block>.who-block-eyebrow {
  grid-area: eyebrow;
}

.who-blocks>.who-block>.who-block-img {
  grid-area: image;
  order: initial;
  /* override the older .who-block--reverse .who-block-img { order: 2 } */
}

.who-blocks>.who-block>.who-block-text {
  grid-area: content;
  align-self: center;
}

.who-block-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* each portrait sits in a fine offset ring of its pole color */
.who-block--therapists .who-block-img {
  outline: 1px solid rgba(84, 108, 192, 0.4);
  outline-offset: 6px;
}

.who-block--coaches .who-block-img {
  outline: 1px solid rgba(132, 180, 84, 0.45);
  outline-offset: 6px;
}

.who-block--anyone .who-block-img {
  outline: 1px solid rgba(132, 204, 168, 0.55);
  outline-offset: 6px;
}

/* (removed overflow: visible override — section now clips its forest video bg) */

.who-block-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.who-block:hover .who-block-img img {
  transform: scale(1.04);
}

.who-block-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.who-block-eyebrow {
  font-family: var(--font-heading);
  font-size: clamp(1.95rem, 3.5vw, 2.8rem);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.who-block-heading {
  font-family: var(--font-heading);
  font-size: 1.95rem !important;
  line-height: 1.4;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0;
}

/* ===== Who is this for? — lead block (parent intro) =====
   Centered single-column layout. Order: eyebrow → image → heading → body. */
.who-block--lead {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
  text-align: left;
}

.who-block--lead>.who-block-eyebrow {
  margin: 0 auto;
  font-size: var(--section-title-size);
}

.who-block--lead .who-block-img {
  margin: 1.25rem auto 1.5rem;
  max-width: 632px;
  width: 100%;
  aspect-ratio: 4 / 3;
  outline: 1px solid rgba(132, 204, 168, 0.55);
  outline-offset: 6px;
}

.who-block--lead .who-block-text {
  align-items: center;
}

.who-block--lead .who-block-text p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* The three child subsections — slightly smaller eyebrows than the lead block, but still ≥1.95rem */
.who-block:not(.who-block--lead) .who-block-eyebrow {
  font-size: clamp(1.56rem, 1.92vw, 1.92rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Logo-color mapping for each child subsection eyebrow:
   therapists = the blue pole, coaches = the green pole,
   anyone = the seafoam overlap — the logo's own story. */
.who-block:not(.who-block--lead) .who-block-eyebrow::after {
  content: none;
}

.who-blocks>.who-block--reverse>.who-block-eyebrow::after {
  margin-left: auto;
}

.who-block--therapists .who-block-eyebrow {
  color: #4A642C;
}

.who-block--coaches .who-block-eyebrow {
  color: #4A642C;
}

.who-block--anyone .who-block-eyebrow {
  color: #4A642C;
}

/* The three child subsection subtitles — black + large display size */
.who-block--therapists .who-block-heading,
.who-block--coaches .who-block-heading,
.who-block--anyone .who-block-heading {
  color: var(--ink);
  font-size: clamp(1.8rem, 2.6vw, 2.2rem) !important;
  line-height: 1.2;
  letter-spacing: 0;
}

.who-block-text p {
  font-size: 1.4rem !important;
  line-height: 1.8;
  color: var(--text-dark);
  margin: 0.25rem 0 0;
}

/* Pull quote */
.who-quote {
  background: var(--cream-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* Match the text width allocation of .et-description ("Grounded in the work…") */
.who-quote blockquote {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem 0 calc(2rem + 20px);
  border: none;
  border-left: 3px solid #3E4F99;
  text-align: left;
}

.who-quote blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.4vw, 2.1rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.who-quote blockquote p + p {
  margin-top: 1.5rem;
}

/* CTA */
.who-cta {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 2rem;
  max-width: 850px;
  margin: 0 auto;
}

.who-cta p {
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0;
}

.who-cta a {
  color: var(--blue-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.who-cta a:hover {
  color: var(--seafoam-deep);
}

@media (max-width: 768px) {
  .who-block {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.5rem 0;
  }

  .who-block--reverse .who-block-img {
    order: 0;
  }

  /* Collapse 3 child blocks to a single column: eyebrow → image → text */
  .who-blocks>.who-block,
  .who-blocks>.who-block--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "image"
      "content";
  }

  .who-intro {
    padding-top: clamp(3rem, 6vw, 5rem);
  }

  .who-intro p,
  .who-block-text p {
    font-size: 1.2rem;
  }
}

/* 3D Diorama */
.diorama-wrapper {
  position: sticky;
  top: 6rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(156, 192, 192, 0.45);
  background: var(--cream-dark);
}

#dioramaCanvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  cursor: grab;
}

#dioramaCanvas:active {
  cursor: grabbing;
}

.diorama-caption {
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  padding: 0.75rem;
  margin-bottom: 0;
  background: var(--white);
  border-top: 1px solid rgba(156, 192, 192, 0.35);
}

#diorama-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background: var(--cream-dark);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  z-index: 2;
  transition: opacity 0.5s;
}

/* ===== PROGRAM LEVELS ===== */
.program-image-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  max-width: 980px;
  margin: 0 auto 2rem;
}

.program-image-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--blue);
  border-radius: 10px;
}

@media (max-width: 640px) {
  .program-image-strip {
    grid-template-columns: 1fr;
  }
}

.levels-progression {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  padding-left: 60px;
}

/* Vertical line */
.levels-progression::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--green), var(--blue), var(--seafoam));
  opacity: 0.45;
}

.level-step {
  position: relative;
  margin-bottom: 2rem;
  cursor: pointer;
}

.level-step-number {
  position: absolute;
  left: -60px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  z-index: 2;
}

/* the numbers read as logo circles threaded on the progression line:
   a cream gap masks the spine, a fine pole ring wraps each one */
.level-step--1 .level-step-number {
  background: var(--green-deep);
  color: var(--white);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1.5px var(--green);
}

.level-step--2 .level-step-number {
  background: var(--blue-deep);
  color: var(--white);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1.5px var(--blue);
}

.level-step--3 .level-step-number {
  background: var(--seafoam);
  color: var(--white);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1.5px var(--seafoam);
}

.level-step-connector {
  display: none;
}

.level-step-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

/* ===== Level bloom flourish =====
   1 / 2 / 3 blooms mark the progression, mirroring the numbered circle
   opposite. Petals inherit each level's pole color via currentColor;
   the gold core echoes the logo's central ring. */
.lvl-blooms {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: flex;
  gap: 0.1rem;
  pointer-events: none;
  z-index: 1;
}

.lvl-bloom {
  width: 24px;
  height: 24px;
  opacity: 0.92;
  filter: drop-shadow(0 1px 1.5px rgba(26, 35, 64, 0.1));
  transition: transform var(--transition-spring);
}

.level-step--1 .lvl-blooms {
  color: var(--green);
}

.level-step--2 .lvl-blooms {
  color: var(--blue);
}

.level-step--3 .lvl-blooms {
  color: var(--seafoam);
}

/* petals stir gently when the card is hovered */
.level-step:hover .lvl-bloom {
  transform: rotate(6deg) scale(1.1);
}

.level-step:hover .lvl-bloom:nth-child(2) {
  transform: rotate(-5deg) scale(1.1);
}

.level-step:hover .lvl-bloom:nth-child(3) {
  transform: rotate(9deg) scale(1.1);
}

/* each level card opens with its pole — same anatomy as every card on the site */
.level-step--1 .level-step-card {
  border-top: 3px solid var(--green);
}

.level-step--2 .level-step-card {
  border-top: 3px solid var(--blue);
}

.level-step--3 .level-step-card {
  border-top: 3px solid var(--seafoam);
}

.level-step:hover .level-step-card {
  box-shadow: var(--shadow-md);
}

.level-step-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

.level-step--1 .level-step-badge {
  background: rgba(132, 180, 84, 0.15);
  color: var(--green-deep);
}

.level-step--2 .level-step-badge {
  background: rgba(84, 108, 192, 0.12);
  color: var(--blue-deep);
}

.level-step--3 .level-step-badge {
  background: rgba(228, 204, 120, 0.22);
  color: var(--gold-deep);
}

.level-step-card h3 {
  font-size: 1.55rem;
  margin-bottom: 0.5rem;
}

.level-step-card > p.level-schedule,
.level-schedule-list .level-schedule {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(132, 204, 168, 0.12);
  border-left: 3px solid var(--seafoam);
  border-radius: 0 4px 4px 0;
  display: inline-block;
}

.level-schedule-list {
  margin-bottom: 0.75rem;
}

.level-schedule-list .level-schedule {
  display: block;
  width: fit-content;
  margin-bottom: 0.4rem;
  border: 1px solid rgba(132, 204, 168, 0.45);
  border-left: 3px solid var(--seafoam);
}

.level-schedule-list .level-schedule:last-child {
  margin-bottom: 0;
}

.level-step--1 .level-schedule-list .level-schedule {
  background: rgba(132, 180, 84, 0.12);
  border-color: var(--green);
  border-left-color: var(--green);
}

.level-step--2 .level-schedule-list .level-schedule {
  background: rgba(84, 108, 192, 0.12);
  border-color: var(--blue);
  border-left-color: var(--blue);
}

.level-step--3 .level-schedule-list .level-schedule {
  background: rgba(132, 204, 168, 0.12);
  border-color: var(--seafoam);
  border-left-color: var(--seafoam);
}

.level-step-card>p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.level-step-note {
  font-size: 0.85rem !important;
  color: var(--text-muted);
  font-style: italic;
}

.level-step-expand-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--blue-deep);
  margin-top: 0.9rem;
  cursor: pointer;
  padding: 0.35rem 0.9rem;
  background: var(--blue-light);
  border: 1px solid rgba(84, 108, 192, 0.35);
  border-radius: 100px;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.level-step-expand-hint:hover {
  background: var(--seafoam-light);
  border-color: rgba(47, 107, 80, 0.4);
}

.level-step-expand-hint::after {
  content: '+';
  font-size: 1rem;
  transition: transform 0.3s;
}

.level-step.is-open .level-step-expand-hint::after {
  content: '\00d7';
}

.level-step-expand-hint:hover {
  color: var(--seafoam-deep);
}

/* Expandable detail — breathes open instead of snapping */
.level-step-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.level-step-detail-inner {
  overflow: hidden;
  min-height: 0;
}

/* the separator line + breathing room live inside the clip, so the
   collapsed state is perfectly flat */
.level-step-detail-inner::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(156, 192, 192, 0.45);
  margin: 1.5rem 0;
}

.level-step.is-open .level-step-detail {
  grid-template-rows: 1fr;
}

.level-step.is-open .level-step-detail-inner {
  animation: detail-reveal 0.4s ease;
}

@keyframes detail-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.level-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.level-detail-block h4 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.level-detail-block p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.level-detail-block ul,
.level-detail-block ol {
  padding-left: 1.25rem;
  margin: 0;
}

.level-detail-block li {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.level-detail-columns {
  columns: 2;
  column-gap: 1.5rem;
}

.level-detail-register {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--seafoam-light);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--seafoam);
}

.level-detail-register p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.level-detail-register a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 640px) {
  .level-detail-grid {
    grid-template-columns: 1fr;
  }

  .level-detail-columns {
    columns: 1;
  }
}

/* ===== "What Our Students Say" section ===== */
#testimonialsSection {
  background: var(--cream);
}

/* Section content padding for the cards area */
#testimonialsSection>.container {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* === Header slice with a still nature image behind the title === */
.testimonials-title-slice {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 30vh, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 3px solid var(--seafoam);
}

.testimonials-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Bottom-only fade for the testimonials header — image stays clear up top */
.testimonials-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(250, 248, 240, 0) 0%,
      rgba(250, 248, 240, 0) 70%,
      var(--cream) 100%);
  z-index: 1;
  pointer-events: none;
}

.testimonials-title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 0 1.5rem;
}

/* "What Our Students Say" — white text on a darkened backdrop-blur panel */
#testimonialsSection .testimonials-title-content h2 {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 8px;
  color: var(--cream);
  background: rgba(26, 35, 64, 0.45);
  backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  margin: 0;
}

/* Cards sit on cream — light, calm, with the two poles alternating on top */

/* ===== TESTIMONIALS ===== */
.testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.75rem 2.75rem 2.25rem;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-top: 3px solid var(--green);
  text-align: center;
  transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

.testimonial-card:hover {
  border-color: var(--seafoam);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.testimonial-card img {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.75rem;
  /* the logo's gold ring, echoed on every voice */
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(228, 204, 120, 0.18);
  transition: box-shadow 0.4s ease;
}

/* the ring warms when a reader leans in */
.testimonial-card:hover img {
  box-shadow: 0 0 0 7px rgba(228, 204, 120, 0.32);
}

.testimonial-card blockquote {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
  border: none;
  padding: 0;
  text-align: left;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* an oversized seafoam quote mark watermarks each voice */
.testimonial-card blockquote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: rgba(132, 204, 168, 0.32);
  position: absolute;
  top: -1.5rem;
  left: -0.5rem;
  pointer-events: none;
}

.testimonial-card .author {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid rgba(156, 192, 192, 0.5);
  padding-top: 1.1rem;
  /* pin every byline to the card's baseline so rows align as a grid */
  margin-top: auto;
}

/* ===== FAQ ===== */
.faq-section {
  position: relative;
  background: var(--cream);
}

/* Header slice: mountain photo backdrop with title overlaid — mirrors the
   structure used for "Who Is This For?" and "What Our Students Say". */
.faq-title-slice {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 30vh, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 3px solid var(--green);
}

.faq-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
  z-index: 0;
  pointer-events: none;
}

.faq-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(250, 248, 240, 0) 0%,
      rgba(250, 248, 240, 0) 70%,
      var(--cream) 100%);
  z-index: 1;
  pointer-events: none;
}

.faq-title-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 1.5rem;
}

/* White title on a darkened backdrop-blur panel — same recipe as the other two slices */
.faq-section .faq-title-content h2 {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 8px;
  color: var(--cream);
  background: rgba(26, 35, 64, 0.45);
  backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(0.9);
  margin: 0;
}

.faq {
  max-width: 900px;
  margin: 0 auto;
}

/* Add breathing room below legacy FAQ headings outside the image slice. */
.container:has(> .faq)>h2 {
  margin-bottom: 50px;
}

/* === Accordion cards — flat aqua tint that deepens through hover/open. */
.faq details {
  position: relative;
  background: rgba(132, 204, 168, 0.13);                  /* seafoam — the meeting color */
  border: 1px solid rgba(62, 138, 103, 0.35);
  border-left: 4px solid rgba(62, 138, 103, 0.6);
  border-radius: 10px;
  margin-bottom: 0.9rem;
  padding: 0.25rem 1.5rem;
  box-shadow: 0 3px 10px rgba(62, 138, 103, 0.08);
  overflow: hidden;
  transition:
    background 0.35s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.faq details:hover {
  background: rgba(132, 204, 168, 0.22);
  border-color: rgba(62, 138, 103, 0.55);
  border-left-color: var(--seafoam-deep);
  box-shadow: 0 8px 22px rgba(62, 138, 103, 0.16);
  transform: translateY(-2px);
}

.faq details[open] {
  background: rgba(132, 204, 168, 0.28);
  border-color: rgba(62, 138, 103, 0.6);
  border-left-color: var(--seafoam-deep);
  box-shadow: 0 10px 28px rgba(62, 138, 103, 0.16);
  transform: translateY(0);
}

.faq summary {
  padding: 1.05rem 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--transition-fast);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* +/− icon as a circular badge so it reads as a button */
.faq summary::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--seafoam-deep);
  background: rgba(132, 204, 168, 0.18);
  border: 1.5px solid rgba(62, 138, 103, 0.4);
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.3s, color 0.3s, background 0.3s, border-color 0.3s;
}

.faq details[open] summary::after {
  content: '\2212';
  color: #3a3113;
  background: var(--gold);                                /* gold — the moment of opening up */
  border-color: var(--gold);
  transform: rotate(180deg);
}

.faq summary:hover {
  color: var(--seafoam-deep);
}

.faq summary:hover::after {
  background: rgba(132, 204, 168, 0.4);
  border-color: rgba(62, 138, 103, 0.6);
  color: var(--seafoam-deep);
}

.faq details[open] summary {
  color: var(--blue-deep);
}

.faq-answer {
  padding: 0 0 1.5rem;
}

.faq details[open] .faq-answer {
  animation: detail-reveal 0.35s ease;
}

.faq-answer p {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.faq-divider {
  width: 40px;
  height: 2px;
  background: var(--teal);
  margin: 1.5rem 0;
}

.faq-scene {
  font-style: italic;
}

.faq-dialogue {
  margin: 1rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--teal);
}

.faq-dialogue p {
  margin-bottom: 0.4rem;
}

.faq-speaker {
  font-weight: 600;
  color: var(--navy);
}

.faq-closing {
  margin-top: 1rem;
}

/* ===== TIMELINE (Our Values) ===== */
.timeline-section {
  background: var(--cream);
}

.timeline {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  padding: 2rem 0;
}

/* Central vertical line — the two poles meeting in seafoam */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--blue) 8%, var(--seafoam) 50%, var(--green) 92%, transparent);
  opacity: 0.45;
}

.timeline-entry {
  position: relative;
  display: flex;
  margin-bottom: 3rem;
}

.timeline-entry--right {
  justify-content: flex-end;
  padding-left: calc(50% + 30px);
}

.timeline-entry--left {
  justify-content: flex-start;
  padding-right: calc(50% + 30px);
}

.timeline-node {
  position: absolute;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
}

/* each node is a miniature of the logo: blue and green rings overlapping */
.timeline-node-dot {
  display: block;
  position: relative;
  width: 24px;
  height: 14px;
  background: var(--cream);
  border-radius: 100px;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.55s var(--transition-spring) 0.25s, opacity 0.4s ease 0.25s;
}

/* the mark is planted on the line as its value scrolls into view */
.timeline-entry.visible .timeline-node-dot {
  transform: scale(1);
  opacity: 1;
}

.timeline-node-dot::before,
.timeline-node-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.timeline-node-dot::before {
  left: 0;
  border: 2px solid var(--blue);
  background: rgba(84, 108, 192, 0.15);
}

.timeline-node-dot::after {
  right: 0;
  border: 2px solid var(--green);
  background: rgba(132, 204, 168, 0.45);
  z-index: 1;
}

.timeline-card {
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.timeline-card:hover {
  border-color: var(--seafoam);
  box-shadow: var(--shadow-md);
}

/* Left entries carry the green pole, right entries the blue —
   the alternating layout enacts the logo's two circles. */
.timeline-entry--left .timeline-card {
  border-left: 3px solid var(--green);
}

.timeline-entry--right .timeline-card {
  border-left: 3px solid var(--blue);
}

.timeline-entry--left .timeline-card-label {
  color: var(--green-deep);
}

.timeline-entry--right .timeline-card-label {
  color: var(--blue-deep);
}

.timeline-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--seafoam-deep);
  margin-bottom: 0.5rem;
}

.timeline-card-title {
  font-size: 1.75rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
  text-align: left;
}

.timeline-card-summary {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--seafoam-deep);
  margin-bottom: 1rem;
  font-style: italic;
}

.timeline-card-detail {
  display: block;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(156, 192, 192, 0.4);
}

.timeline-card-detail p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.timeline-card-detail p:last-child {
  margin-bottom: 0;
}

.timeline-card-detail blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted);
  border-left: 3px solid var(--gold);
  padding-left: 1.25rem;
  margin: 0;
}

.timeline-card-detail blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--seafoam-deep);
}

.timeline-card-hint {
  display: none;
}

.timeline-terminus {
  text-align: center;
  padding-top: 1rem;
  position: relative;
}

.timeline-terminus-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-terminus-leaf {
  display: block;
  color: rgba(26, 35, 64, 0.3);
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

/* ===== TEAM ===== */
.team-member {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.team-member:last-child {
  margin-bottom: 0;
}

/* mirror the middle row — the zig-zag rhythm of the homepage editorial blocks */
.team-member:nth-of-type(even) {
  grid-template-columns: 1fr 280px;
}

.team-member:nth-of-type(even) img {
  order: 2;
}

/* members are separated by a hairline carrying the miniature two-circle mark */
.team-member + .team-member {
  border-top: 1px solid rgba(156, 192, 192, 0.4);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

.team-member + .team-member::before,
.team-member + .team-member::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.team-member + .team-member::before {
  left: calc(50% - 9px);
  border: 1.5px solid var(--blue);
  background: var(--cream);
}

.team-member + .team-member::after {
  left: calc(50% - 2px);
  border: 1.5px solid var(--green);
  background: rgba(132, 204, 168, 0.35);
}

.team-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  padding: 5px;
  background: var(--white);
  box-shadow: var(--shadow-md);
  border: 3px solid var(--seafoam);
  transition: box-shadow 0.4s ease;
}

.team-member:hover img {
  box-shadow: var(--shadow-md), 0 0 0 7px rgba(228, 204, 120, 0.16);
}

/* The founder is featured: a quiet cream card ruled in gold */
.team-member:nth-of-type(1) {
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}

/* The founder wears the logo's gold ring; the others carry the two poles */
.team-member:nth-of-type(1) img {
  border-color: var(--gold);
}

.team-member:nth-of-type(2) img {
  border-color: var(--blue);
}

.team-member:nth-of-type(3) img {
  border-color: var(--green);
}

.team-member h3 {
  font-size: 1.9rem;
  margin-bottom: 0.25rem;
}

.team-member .role {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  position: relative;
}

/* a short gold underline — the one warm accent, used sparingly */
.team-member .role::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--gold);
}

.team-member p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 65ch;
}

/* ===== RESOURCES ===== */
.resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 850px;
  margin: 0 auto;
  margin-top: 2rem;
  /* two independent columns — opening a card only grows its own column,
     never leaving blank space beside its neighbour */
  align-items: start;
}

.resource-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.resource-card {
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

.resource-card:hover {
  border-color: var(--seafoam);
  box-shadow: var(--shadow-md);
}

/* Category color story, mapped to the logo:
   Articles = blue (knowledge), Internal = green (inner growth),
   Interpersonal = seafoam (the overlap — two people meeting),
   Certification Kit = gold (attainment). */
.resource-card--blue {
  border-top: 3px solid var(--blue);
}

.resource-card--blue .resource-card-icon {
  background: var(--blue-light);
  color: var(--blue-deep);
}

.resource-card--green {
  border-top: 3px solid var(--green);
}

.resource-card--green .resource-card-icon {
  background: var(--green-light);
  color: var(--green-deep);
}

.resource-card--seafoam {
  border-top: 3px solid var(--seafoam);
}

.resource-card--seafoam .resource-card-icon {
  background: var(--seafoam-light);
  color: var(--seafoam-deep);
}

.resource-card--gold {
  border-top: 3px solid var(--gold);
}

.resource-card--gold .resource-card-icon {
  background: rgba(228, 204, 120, 0.2);
  color: var(--gold-deep);
}

.resource-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}

.resource-card-icon {
  width: 40px;
  height: 40px;
  /* icons live in circles — like the logo's */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.resource-card-title {
  font-size: 1.2rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0;
}

.resource-card-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0;
}

.resource-card-toggle {
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 0.3s;
}

.resource-card.is-open .resource-card-toggle {
  transform: rotate(45deg);
}

.resource-card-body {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 1.25rem;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-card-body > .resource-list {
  overflow: hidden;
  min-height: 0;
}

.resource-card.is-open .resource-card-body {
  grid-template-rows: 1fr;
  padding-bottom: 1.25rem;
}

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

.resource-list li {
  border-top: 1px solid rgba(156, 192, 192, 0.35);
}

.resource-list li a {
  display: block;
  padding: 0.75rem 0;
  font-size: 0.92rem;
  color: var(--navy);
  transition: color var(--transition-fast);
}

.resource-list li a:hover {
  color: var(--blue-deep);
}

/* quiet affordances: down-arrow for PDFs, out-arrow for external links */
.resource-list li a[href$=".pdf"]::after {
  content: ' \2193';
  color: var(--seafoam-deep);
  font-size: 0.85em;
}

.resource-list li a[href^="http"]:not([href*="empowerment"])::after {
  content: ' \2197';
  color: var(--blue-deep);
  font-size: 0.85em;
}

.resource-author {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.resource-description {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* The logo's geometry, drawn at architectural scale into the quiet
   corners of plain subpage sections — two overlapping circle hairlines. */
#team::before,
#contact::before,
#resources::before,
#programs::before,
#values::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -160px;
  width: 460px;
  height: 460px;
  background:
    radial-gradient(circle 180px at 170px 230px, transparent 178px, rgba(84, 108, 192, 0.14) 179px, transparent 181px),
    radial-gradient(circle 180px at 290px 230px, transparent 178px, rgba(132, 180, 84, 0.16) 179px, transparent 181px);
  pointer-events: none;
}

/* ===== CONTACT ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.contact-sidebar {
  background: var(--seafoam-light);
  border: 1px solid rgba(156, 192, 192, 0.45);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.contact-team {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  justify-content: center;
}

.contact-team figure {
  text-align: center;
}

.contact-team img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.4rem;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(228, 204, 120, 0.16);
}

/* the same identity mapping as the team page: Simran green, Myra gold, Priti blue */
.contact-team figure:nth-child(1) img {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(132, 180, 84, 0.16);
}

.contact-team figure:nth-child(3) img {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(84, 108, 192, 0.16);
}

.contact-team figcaption {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-info-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

.contact-info-card:hover {
  border-color: var(--seafoam);
  box-shadow: var(--shadow-md);
}

.contact-info-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-info-icon {
  font-size: 1.1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--seafoam-light);
  color: var(--seafoam-deep);
}

/* the two ways of reaching out carry the two poles */
.contact-info-card:nth-child(1) {
  border-left: 3px solid var(--blue);
}

.contact-info-card:nth-child(1) .contact-info-icon {
  background: var(--blue-light);
  color: var(--blue-deep);
}

.contact-info-card:nth-child(2) {
  border-left: 3px solid var(--green);
}

.contact-info-card:nth-child(2) .contact-info-icon {
  background: var(--green-light);
  color: var(--green-deep);
}

.contact-info-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: block;
}

.contact-info-value {
  font-size: 0.95rem;
  color: var(--text-dark);
  overflow-wrap: anywhere;
}

/* Contact form */
.contact-form {
  /* the brand gradient pinned as a 3px top rule inside the rounded card */
  background: linear-gradient(90deg, var(--blue), var(--seafoam), var(--green)) top / 100% 3px no-repeat, var(--white);
  border: 1px solid rgba(156, 192, 192, 0.5);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.contact-form-title {
  font-size: 1.6rem;
  margin-bottom: 1.5rem !important;
  color: var(--ink);
}

.contact-form-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin-top: 0.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  color: var(--text-muted);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--cream);
  border: 1px solid rgba(156, 192, 192, 0.6);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(35, 42, 64, 0.4);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--seafoam-deep);
  box-shadow: 0 0 0 3px rgba(132, 204, 168, 0.25);
}

.form-group textarea {
  resize: vertical;
}

.contact-form .btn {
  width: 100%;
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  font-weight: 600;
}

.contact-form .btn:hover {
  background: var(--blue-deep);
  color: var(--white);
  border-color: var(--blue-deep);
}

.contact-trust-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* ===== FOOTER ===== */
footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  position: relative;
  /* the logo read as a line: blue pole -> seafoam overlap -> green pole */
  border-top: 3px solid var(--seafoam);
  border-image: linear-gradient(90deg, var(--blue), var(--seafoam), var(--green)) 1;
}

/* Same logo aurora as "The Problem" section — blue glow top-left,
   green glow bottom-right, over the ink ground. */
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(84, 108, 192, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 95% 100%, rgba(132, 180, 84, 0.16) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

footer .container {
  position: relative;
  z-index: 1;
}

/* === Unified footer-column section headings === */
footer h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
}

footer h4::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  margin-top: 0.4rem;
  opacity: 0.75;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 1120px;
  margin: 0 auto 0 0;
  align-items: start;
}

/* Brand column — tight vertical stack with consistent gaps */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 240px;
}

.footer-logo img {
  height: 48px;
  width: auto;
  opacity: 0.9;
  margin: 0;
}

.social-links {
  display: flex;
  gap: 0.6rem;
  margin-top: 0;
}

.social-links a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: border-color var(--transition-fast), transform 0.25s ease;
}

.social-links a:hover {
  transform: translateY(-2px);
}

.social-links a:hover {
  border-color: var(--teal);
}

.social-links svg {
  width: 16px;
  height: 16px;
  fill: rgba(255, 255, 255, 0.6);
}

.social-links a:hover svg {
  fill: var(--teal);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-self: start;
  margin-left: 0.35rem;
}

.footer-nav a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  align-self: flex-start;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: color var(--transition-fast), background-size 0.3s ease;
  padding: 0.15rem 0;
}

.footer-nav a:hover {
  background-size: 100% 1px;
}

.footer-nav a:hover {
  color: var(--teal);
}

.team-photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.team-photos figure {
  text-align: center;
}

/* The three faces are the visual anchor of the footer */
.team-photos img {
  width: clamp(82px, 6.6vw, 104px);
  height: clamp(82px, 6.6vw, 104px);
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
  border: 2px solid rgba(228, 204, 120, 0.8);
  box-shadow: 0 0 0 4px rgba(228, 204, 120, 0.14), 0 8px 18px rgba(0, 0, 0, 0.3);
}

.team-photos figcaption {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

.footer-email {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.footer-email:hover {
  color: var(--teal);
}

/* === Support column (Book + PayPal QR + Subscribe button stacked) === */
.footer-support {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  justify-self: end;
}

.footer-book,
.footer-paypal {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.footer-book:hover,
.footer-paypal:hover {
  color: var(--teal);
}

.footer-book img,
.footer-paypal img {
  height: 48px;
  width: auto;
  border-radius: var(--radius-sm);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Book relocated into the brand column as a featured, prominent cover */
.footer-brand .footer-book {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 0.9rem;
}

.footer-book img {
  height: 140px;
  opacity: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

.footer-book span {
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-subscribe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-subscribe-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.footer-subscribe #paypal-button-container-P-8CS01676DE0612907NHPQXBQ {
  width: 100%;
  max-width: 200px;
}

/* every page signs off with the logo mark in miniature */
.footer-bottom {
  text-align: center;
  padding: 2.1rem 0 1.5rem;
  position: relative;
}

.footer-bottom::before,
.footer-bottom::after {
  content: '';
  position: absolute;
  top: 0.85rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.footer-bottom::before {
  left: calc(50% - 9px);
  border: 1.5px solid rgba(84, 108, 192, 0.9);
  background: rgba(84, 108, 192, 0.25);
}

.footer-bottom::after {
  left: calc(50% - 2px);
  border: 1.5px solid rgba(132, 180, 84, 0.9);
  background: rgba(132, 204, 168, 0.35);
}

.footer-bottom p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}

/* ===== COLLAGE (hidden — not used in minimal design) ===== */
.collage-container,
.collage-bg-layer,
.hero-collage {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .program-details-cards {
    grid-template-columns: 1fr;
  }

  .program-details-layout {
    grid-template-columns: 1fr;
  }

  .diorama-wrapper {
    position: static;
    max-width: 500px;
    margin: 0 auto;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* Hamburger menu for smaller screens */
@media (max-width: 1200px) {
  .menu-toggle {
    display: block;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    margin-right: 0.25rem;
  }

  .menu-toggle span {
    background: var(--white) !important;
  }

  header.scrolled .menu-toggle span {
    background: var(--white) !important;
  }

  .nav-stack {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    flex-direction: column;
    background: rgba(26, 35, 64, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 5rem 1.75rem 2rem;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    z-index: 5;
    overflow-y: auto;
  }

  .nav-stack.active {
    transform: translateX(0);
  }

  nav {
    position: static;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
  }

  nav a {
    padding: 0.7rem 0.85rem;
    margin: 0;
    font-size: 1rem;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.78) !important;
    letter-spacing: 0.06em;
    background: transparent !important;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
  }

  /* Subtle separator between items via spacing, not lines */
  nav>a+a,
  nav>.nav-dropdown+a,
  nav>a+.nav-dropdown,
  nav>.nav-dropdown+.nav-dropdown {
    margin-top: 0.15rem;
  }

  nav a:hover {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  nav a.active {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  /* Flatten the About dropdown on mobile — expand inline within the menu */
  .nav-dropdown {
    display: block;
  }

  .nav-dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* Visible chevron indicator on mobile */
  .nav-dropdown-toggle::after {
    content: '';
    display: inline-block !important;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
    margin-left: 0.5rem;
  }

  .nav-dropdown.open .nav-dropdown-toggle::after {
    transform: rotate(-135deg) translateY(-2px);
  }

  .nav-dropdown-menu {
    position: static !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 200px;
    transform: none !important;
  }

  /* Disable hover-open on mobile — only .open (tap) should expand */
  .nav-dropdown:hover:not(.open) .nav-dropdown-menu {
    max-height: 0;
  }

  .nav-dropdown-menu a {
    padding: 0.55rem 0.85rem 0.55rem 1.85rem !important;
    margin: 0;
    font-size: 0.92rem !important;
    border: 0 !important;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
  }

  .nav-dropdown-menu a::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 50%;
    width: 0.6rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
  }

  .nav-dropdown-menu a.active {
    color: var(--white) !important;
  }

  .nav-register {
    margin-left: 0 !important;
    margin-top: 0.5rem;
    text-align: center;
    border-radius: 6px;
    padding: 0.75rem 1rem !important;
    background: var(--gold) !important;
    border-color: rgba(162, 132, 47, 0.5) !important;
    color: #3a3113 !important;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  .page-spacer {
    height: 0;
  }

  .testimonial-card img {
    width: 144px;
    height: 144px;
  }

  body {
    font-size: 1.05rem;
  }

  header .container {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .logo img {
    height: 50px;
  }

  .logo-text {
    font-size: 0.9rem;
    white-space: normal;
    max-width: 140px;
  }

  .country-tag {
    font-size: 0.95rem;
    padding: 0.35rem 0.8rem;
  }

  .country-bar-label {
    font-size: 0.95rem;
  }

  .problem-content p,
  .doing-list li {
    font-size: 1.2rem;
  }

  .problem-disclaimer {
    font-size: 1.0rem !important;
  }

  .doing-sublist li {
    font-size: 1.05rem;
  }

  .problem-font,
  .problem-font p,
  .problem-font li {
    font-size: 1.2rem !important;
    line-height: 1.75 !important;
  }

  .doing-accordion-item>summary {
    font-size: 1.15rem;
    padding: 0.85rem 1.1rem 0.85rem 2.1rem;
  }

  .doing-accordion-item>summary::before {
    left: 0.8rem;
    font-size: 0.65rem;
  }

  .doing-accordion-item>summary::after {
    right: 0.85rem;
    font-size: 1.3rem;
  }

  .doing-accordion-item>p,
  .doing-accordion-item>.doing-sublist {
    margin: 0 1.1rem 0.85rem 2.1rem;
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .doing-accordion-item>.doing-sublist li {
    font-size: 1rem;
  }

  .et-statement {
    font-size: 1.2rem !important;
    line-height: 1.75 !important;
  }

  .problem-section,
  .doing-section,
  .et-statement-box {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .country-bar {
    padding: 1.5rem 1rem;
  }

  .country-bar-content {
    flex-direction: column;
    gap: 1.25rem;
  }

  .globe-container canvas {
    width: 90px !important;
    height: 90px !important;
  }

  .country-bar-label {
    text-align: center;
  }

  .country-tags {
    justify-content: center;
  }

  .country-tag {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
  }

  .hero-clouds-section {
    height: 100vh;
    min-height: 380px;
  }

  .hero-headline {
    font-size: clamp(1.2rem, 6vw, 2.2rem);
    /* padding: 0 1rem; */
  }

  .venn-diagram {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 380px;
  }

  .venn-photo {
    width: 180px;
    height: 180px;
  }

  .venn-side-et {
    max-width: 380px;
    padding: 1.25rem 1.5rem;
  }

  .venn-et-circle {
    padding: 0;
  }

  .venn-et-title {
    font-size: 1.7rem;
    white-space: normal;
    /* allow line break on mobile */
  }

  .venn-et-tagline {
    font-size: 1.05rem;
  }

  .venn-et-sub {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    max-width: 140px;
  }

  .venn-side h4 {
    font-size: 1.2rem;
  }

  .venn-subtitle {
    font-size: 0.95rem;
  }


  .venn-side-left {
    border-radius: var(--radius-md);
    border: 1px solid rgba(84, 108, 192, 0.6);
  }

  .venn-side-right {
    border-radius: var(--radius-md);
    border: 1px solid rgba(132, 180, 84, 0.6);
  }

  .venn-middle {
    padding: 0.75rem 0;
  }

  .venn-badge {
    width: 100px;
    height: 100px;
  }

  .venn-line {
    display: none;
  }

  .testimonials {
    grid-template-columns: 1fr;
  }

  .team-member,
  .team-member:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .team-member:nth-of-type(even) img {
    order: -1;
  }

  /* Center the photo and headings, but keep long-form bios left-aligned for readability */
  .team-member h3,
  .team-member .role {
    text-align: center;
  }

  .team-member .role::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .team-member p {
    text-align: left;
  }

  .team-member img {
    max-width: 200px;
    margin: 0 auto;
    order: -1;
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

  .level-detail-grid {
    grid-template-columns: 1fr;
  }

  .level-detail-columns {
    columns: 1;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-entry--right,
  .timeline-entry--left {
    padding-left: 50px;
    padding-right: 0;
    justify-content: flex-start;
  }

  .timeline-node {
    left: 20px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-bottom: 1.75rem;
    text-align: center;
    justify-items: center;
  }

  /* In single-column mode, constrain each column's width and centre everything */
  .footer-brand,
  .footer-nav,
  .footer-contact,
  .footer-support {
    width: 100%;
    max-width: 320px;
    align-items: center;
  }

  .footer-brand {
    text-align: center;
  }

  /* Navigate links become a centered two-column grid on phones */
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: clamp(1.75rem, 9vw, 3rem);
    row-gap: 0.6rem;
  }

  .footer-nav h4 {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-nav h4::after {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-nav a {
    justify-self: center;
    text-align: center;
  }

  .team-photos {
    justify-content: center;
  }

  .footer-book,
  .footer-paypal {
    align-self: center;
  }

  .footer-subscribe {
    align-items: center;
    width: 100%;
  }

  .footer-subscribe #paypal-button-container-P-8CS01676DE0612907NHPQXBQ {
    max-width: 220px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  section {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
  }

  .hero-clouds-section {
    height: 100vh;
    min-height: 320px;
  }

  .schedule-cards {
    grid-template-columns: 1fr;
  }

  .levels-progression {
    padding-left: 50px;
  }

  .levels-progression::before {
    left: 24px;
  }

  .level-step-number {
    left: -50px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .lvl-bloom {
    width: 19px;
    height: 19px;
  }

  .lvl-blooms {
    top: 0.9rem;
    right: 0.9rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .et-examples {
    flex-direction: column;
    align-items: center;
  }

  .et-description {
    padding: 0 1.25rem;
  }

  .et-description p,
  .et-description-lead,
  .et-description-aims {
    font-size: 1.2rem !important;
    line-height: 1.75 !important;
  }

  .diorama-wrapper {
    max-width: 100%;
  }
}

/* ===== BLOCKQUOTE ===== */
blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-muted);
  border-left: 3px solid var(--gold);
  padding-left: 1.25rem;
  margin: 1rem 0;
}

/* ===== REDUCED MOTION — an empathy detail for a therapy audience ===== */
@media (prefers-reduced-motion: reduce) {

  .loader-bloom,
  .hero-emblem,
  .hero-clouds-section::before,
  .hero-clouds-overlay::after {
    animation: none !important;
  }

  .fade-in,
  .fade-in-group>*,
  .slide-left,
  .slide-right,
  .scale-in,
  .lvl-bloom {
    transition: none !important;
    transform: none !important;
  }

  .doing-strip,
  .doing-strip::before,
  .faq details,
  .testimonial-card,
  .btn,
  .social-links a,
  .country-tag {
    transition: none !important;
    transform: none !important;
  }

  .who-block:hover .who-block-img img {
    transform: none !important;
  }

  .section-title::after,
  .subpage-hero h1::after,
  .timeline-node-dot,
  .problem-section .problem-decor-img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .problem-section.visible .problem-grid-aside .problem-decor-img:nth-child(even) {
    transform: translateX(0) !important;
  }

  .reg-modal {
    transform: none !important;
    transition: none !important;
  }

  .level-step-detail,
  .resource-card-body {
    transition: none !important;
  }

  .level-step.is-open .level-step-detail-inner,
  .faq details[open] .faq-answer {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ===== UTILITY ===== */
.text-center {
  text-align: center;
}

.footer-brand p {
  margin-bottom: 0;
}

/* ===== REGISTRATION MODAL ===== */
.reg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background:
    radial-gradient(circle at 22% 85%, rgba(84, 108, 192, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 78% 85%, rgba(132, 180, 84, 0.28) 0%, transparent 55%),
    rgba(26, 35, 64, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

.reg-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.reg-modal {
  /* the brand-gradient rule pinned to the top of the card */
  background: linear-gradient(90deg, var(--blue), var(--seafoam), var(--green)) top / 100% 3px no-repeat, var(--white);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.reg-modal-overlay.active .reg-modal {
  transform: translateY(0);
}

.reg-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  transition: color 0.2s;
}

.reg-modal-close:hover {
  color: var(--navy);
}

.reg-modal h2 {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
  padding-right: 2rem;
  text-align: left;
}

.reg-modal h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 0.85rem 0 0;
  border-radius: 1px;
}

.reg-modal-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
}

.reg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.reg-form-field {
  margin-bottom: 1rem;
}

.reg-form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  color: var(--navy);
}

.reg-form-field .req {
  color: var(--gold-deep);
}

.reg-optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.reg-form-field input,
.reg-form-field select,
.reg-form-field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid rgba(26, 35, 64, 0.18);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.2s;
}

.reg-form-field input:focus,
.reg-form-field select:focus,
.reg-form-field textarea:focus {
  outline: none;
  border-color: var(--seafoam-deep);
  box-shadow: 0 0 0 3px rgba(132, 204, 168, 0.25);
}

.reg-form-field textarea {
  resize: vertical;
}

/* Availability grid */
.reg-avail-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.reg-avail-grid {
  border: 1px solid rgba(156, 192, 192, 0.6);
  border-radius: var(--radius-md);
  overflow: hidden;
  overflow-x: auto;
  user-select: none;
  -webkit-user-select: none;
}

.reg-avail-header,
.reg-avail-row {
  display: grid;
  grid-template-columns: 90px repeat(7, 1fr);
  min-width: 560px;
}

.reg-avail-header {
  background: var(--blue-deep);
}

.reg-avail-corner {
  padding: 0.5rem;
}

.reg-avail-day-label {
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.reg-avail-day-label span {
  font-weight: 400;
  opacity: 0.7;
  font-size: 0.75rem;
}

.reg-avail-row {
  border-top: 1px solid rgba(26, 35, 64, 0.08);
}

.reg-avail-row:nth-child(even) {
  background: rgba(132, 204, 168, 0.06);
}

.reg-avail-time-label {
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(26, 35, 64, 0.08);
}

.reg-avail-cell {
  border-left: 1px solid rgba(26, 35, 64, 0.08);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  min-height: 32px;
}

.reg-avail-cell:hover {
  background: rgba(132, 204, 168, 0.25);
}

.reg-avail-cell.selected {
  /* seafoam — the "agreement" color, fitting for choosing meeting times */
  background: var(--seafoam-deep);
}

.reg-avail-cell.selected::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}

.reg-avail-cell:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Submit button */
.reg-submit {
  display: block;
  width: 100%;
  padding: 0.85rem;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.reg-submit:hover {
  background: var(--blue-deep);
}

/* Success state */
.reg-success {
  text-align: center;
  padding: 2rem 0;
}

.reg-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--seafoam-deep);
  border: 2.5px solid var(--gold);
  color: var(--white);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.reg-success h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.reg-success a {
  color: var(--teal-dark);
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {
  .reg-modal {
    padding: 1.5rem;
  }

  .reg-form-row {
    grid-template-columns: 1fr;
  }

  .reg-modal h2 {
    font-size: 1.3rem;
  }

  /* Hide desktop grid, show mobile view */
  .reg-avail-grid {
    display: none !important;
  }

  .reg-avail-mobile {
    display: block !important;
  }
}

/* Mobile availability — day cards with time pills */
.reg-avail-mobile {
  display: none;
}

.reg-avail-day-card {
  border: 1px solid rgba(156, 192, 192, 0.6);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.reg-avail-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: var(--blue-deep);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.reg-avail-day-header span {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.8rem;
}

.reg-avail-day-header .day-toggle {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform 0.2s;
}

.reg-avail-day-card.open .day-toggle {
  transform: rotate(180deg);
}

.reg-avail-day-header .day-count {
  background: var(--gold);
  color: #3a3113;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 100px;
  margin-left: 0.5rem;
}

.reg-avail-day-slots {
  display: none;
  padding: 0.75rem;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.reg-avail-day-card.open .reg-avail-day-slots {
  display: flex;
}

.reg-avail-time-pill {
  padding: 0.4rem 0.75rem;
  border: 1.5px solid rgba(26, 35, 64, 0.15);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--white);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  -webkit-user-select: none;
}

.reg-avail-time-pill:active {
  transform: scale(0.95);
}

.reg-avail-time-pill.selected {
  background: var(--seafoam-deep);
  color: var(--white);
  border-color: var(--seafoam-deep);
}

/* ===== MOBILE DRAWER — items cascade in after the drawer slides ===== */
@media (max-width: 1200px) {

  .nav-stack nav>*,
  .nav-stack .nav-register {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-stack.active nav>*,
  .nav-stack.active .nav-register {
    opacity: 1;
    transform: none;
  }

  .nav-stack.active nav>:nth-child(1) { transition-delay: 0.08s; }
  .nav-stack.active nav>:nth-child(2) { transition-delay: 0.12s; }
  .nav-stack.active nav>:nth-child(3) { transition-delay: 0.16s; }
  .nav-stack.active nav>:nth-child(4) { transition-delay: 0.2s; }
  .nav-stack.active nav>:nth-child(5) { transition-delay: 0.24s; }
  .nav-stack.active .nav-register { transition-delay: 0.3s; }
}

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

  .nav-stack nav>*,
  .nav-stack .nav-register {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== VALUES TIMELINE TERMINUS — the line resolves into the logo ===== */
.timeline-terminus {
  text-align: center;
  padding-top: 0.5rem;
  position: relative;
}

.timeline-terminus-dot {
  display: inline-block;
  position: relative;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--cream);
  left: auto;
  transform: none;
}

.timeline-terminus-dot::before,
.timeline-terminus-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.timeline-terminus-dot::before {
  left: 4px;
  border: 2px solid var(--blue);
  background: rgba(84, 108, 192, 0.15);
}

.timeline-terminus-dot::after {
  right: 4px;
  border: 2px solid var(--green);
  background: rgba(132, 204, 168, 0.45);
}