/* ==================================================
   Joyful Sprouts Early Learning - Design System Tokens & Components
   Based on design-system.md, Homepage Brief & Pill Navbar Spec
   ================================================== */

:root {
  /* 01. COLOR SYSTEM */
  --color-brand-green: #559E33;
  --color-brand-yellow: #F9C815;
  --color-brand-green-dark: #315C28;
  --color-brand-black: #222222;

  --color-surface-cream: #FFF9E8;
  --color-surface-soft-green: #EAF4E5;
  --color-surface-paper: #FFFEF8;
  --color-surface-white: #FFFFFF;

  --color-text-primary: #1F2A1A;
  --color-text-secondary: #687064;
  --color-text-inverse: #FFFFFF;

  --color-border-default: #D8DED3;
  --color-border-strong: #B8C3B2;

  /* Semantic Aliases */
  --color-action-primary: var(--color-brand-green);
  --color-action-secondary: var(--color-brand-yellow);
  --color-background-page: var(--color-surface-cream);
  --color-background-surface: var(--color-surface-paper);
  --color-text-body: var(--color-text-primary);

  /* 02 & 03. TYPOGRAPHY (Fluid Rem + Clamp with 16px root reference) */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --type-display-xl: clamp(3rem, 2rem + 4vw, 5rem);
  --type-display: clamp(3rem, 2rem + 3.5vw, 4.75rem);
  --type-h1: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  /* max 72px / 4.5rem */
  --type-h2: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  /* max 64px / 4rem */
  --type-h3: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --type-h4: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  --type-h5: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);

  --type-body-large: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --type-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --type-body-small: 1rem;
  --type-caption: 0.875rem;
  --type-navigation: 1rem;
  --type-button: 1rem;
  --type-label: 0.875rem;
  --type-eyebrow: 0.875rem;

  /* 04. SPACING SYSTEM (8px based) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;

  /* 05. FLUID SECTION SPACING */
  --section-space-large: clamp(3rem, 6vw, 7rem);
  --section-space-medium: clamp(4rem, 6vw, 7.5rem);
  --section-space-small: clamp(3rem, 4vw, 5rem);

  /* 06. BORDER RADIUS (Strictly approved values) */
  --radius-sm: 10px;
  --radius-full: 9999px;

  /* 07. BORDERS */
  --border-default: 1px solid var(--color-border-default);
  --border-strong: 1px solid var(--color-border-strong);

  /* 08. SHADOWS */
  --shadow-subtle: 0 2px 12px rgba(31, 42, 26, 0.06);
  --shadow-card: 0 8px 30px rgba(31, 42, 26, 0.08);
  --shadow-pill: 0 10px 30px -5px rgba(31, 42, 26, 0.12), 0 4px 10px -2px rgba(31, 42, 26, 0.05);
  --shadow-dropdown: 0 20px 45px -10px rgba(31, 42, 26, 0.16), 0 4px 12px rgba(31, 42, 26, 0.06);

  /* 09. GRID & CONTAINER */
  --container-max-width: 1320px;
  --container-padding: clamp(1.25rem, 3vw, 2.5rem);

  /* 18. MOTION */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset & Core Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background-page);
  transition: background-color 0.5s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ==========================================================================
   PRELOADER (Brand Logo Reveal & Counter)
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-surface-cream, #FFF9E8);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.preloader__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.preloader__logo-wrap {
  position: relative;
  width: 280px;
  max-width: 70vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader__logo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Base dimmed / muted silhouette on cream */
.preloader__logo--base {
  opacity: 0.22;
  filter: grayscale(1) opacity(0.5);
}

/* Filled active logo with clip path wipe from bottom to top */
.preloader__logo-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(100% 0 0 0);
  /* Starts hidden from top to bottom, reveals upward */
  will-change: clip-path;
}

.preloader__logo--active {
  filter: drop-shadow(0 8px 24px rgba(85, 158, 51, 0.12));
}

/* Bottom Right Counter */
.preloader__counter {
  position: absolute;
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 4vw, 56px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  pointer-events: none;
}

.preloader__counter-number {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3rem, 6.5vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-brand-green, #559E33);
  text-shadow: 0 4px 16px rgba(85, 158, 51, 0.08);
  display: flex;
  align-items: baseline;
}

.preloader__counter-percent {
  font-size: 0.45em;
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.85;
  color: var(--color-brand-yellow, #F9C815);
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.15;
}

h1 {
  font-size: var(--type-h1);
  line-height: 1.1;
}

h2 {
  font-size: var(--type-h2);
  line-height: 1.15;
}

h3 {
  font-size: var(--type-h3);
  line-height: 1.2;
}

h4 {
  font-size: var(--type-h4);
  line-height: 1.25;
}

h5 {
  font-size: var(--type-h5);
  line-height: 1.3;
}

p {
  color: var(--color-text-secondary);
  font-size: var(--type-body);
  line-height: 1.65;
}

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

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

svg,
img[src$=".svg"] {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
  backface-visibility: hidden;
}

img[src$=".svg"] {
  image-rendering: auto;
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

.container-narrow {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

/* Eyebrow Label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-green-dark);
  margin-bottom: var(--space-3);
}

/* ==================================================
   11. BUTTON SYSTEM
   ================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 600;
  line-height: 1.5;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand-green-dark);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-brand-green);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background-color: var(--color-brand-green-dark);
}

.btn-secondary {
  background-color: var(--color-brand-yellow);
  color: var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: #E2B40D;
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-brand-green);
  color: var(--color-brand-green);
}

.btn-outline:hover {
  background-color: var(--color-surface-soft-green);
}

.btn-text {
  background-color: transparent;
  color: var(--color-brand-green-dark);
  font-weight: 600;
  padding-inline: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  position: relative;
  width: fit-content;
  padding-bottom: 2px;
}

/* Animated Underline Effect */
.btn-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-brand-green-dark);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.btn-text span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-text:hover {
  color: var(--color-brand-green);
}

.btn-text:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
  background-color: var(--color-brand-green);
}

.btn-text:hover span {
  transform: translateX(4px);
}

.btn-lg {
  height: 56px;
  padding: 0 32px;
  font-size: 1.125rem;
}

/* ==========================================================================
   BUTTON TYPE 1: RISING & SCALING FILL BLOCK (.button--fill-rise)
   A pre-shaped yellow block rests at the base. On hover, it smoothly rises and
   scales up to cover the button while the mascot avatar subtly tilts.
   ========================================================================== */
.button--fill-rise {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 16px;
  background-color: var(--color-brand-green);
  border-radius: var(--radius-sm);
  padding: 16px 14px 16px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  font-family: inherit;
}

.button--fill-rise:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
  border-color: rgba(249, 200, 21, 0.8);
}

.button--fill-rise--text-only {
  justify-content: center;
  padding: 16px;
}

/* The rising block layer - pre-shaped with button border-radius */
.button__fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-brand-yellow);
  border-radius: inherit;
  z-index: 1;
  transform: translateY(105%) scale(0.92);
  transform-origin: bottom center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}

/* Hover state: Block smoothly rises and scales up to cover the button */
.button--fill-rise:hover .button__fill {
  transform: translateY(0%) scale(1);
}

/* Text label */
.button__text {
  position: relative;
  z-index: 3;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-inverse);
  letter-spacing: -0.01em;
  transition: transform 0.25s ease, color 0.28s ease;
  white-space: nowrap;
}

.button--fill-rise:hover .button__text {
  color: var(--color-brand-green-dark);
}

/* Avatar / Circular Icon */
.button__avatar {
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: #39a0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button--fill-rise:hover .button__avatar {
  transform: scale(1.08) rotate(6deg);
}

.button__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Green mascot avatar theme */
.button__avatar--sprout {
  background: var(--color-surface-soft-green);
  border: 1px solid rgba(85, 158, 51, 0.3);
}

.button__avatar--sprout img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ==========================================================================
   BUTTON TYPE 2: CIRCLE PIP POSITION SLIDE & RESIZE (.button--circle-slide)
   Circle pip with arrow sits on right. On hover, it smoothly glides across
   to the left side while the text translates right.
   ========================================================================== */
.button--circle-slide {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: var(--color-surface-white);
  border-radius: var(--radius-full);
  padding: 8px 10px 8px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  border: 1px solid rgba(216, 222, 211, 0.7);
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.button--circle-slide:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-color: var(--color-brand-green);
}

/* Button Text: Glides to the right by exactly the pip's width + gap */
.button__text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  order: 1;
  margin-right: 10px;
  transition: transform 0.75s cubic-bezier(0.25, 1, 0.3, 1);
  will-change: transform;
}

/* The Green Interactive Circle Pip: Sits on right edge */
.button__pip {
  order: 2;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  box-shadow: 0 2px 8px rgba(85, 158, 51, 0.3);
  transition: transform 0.75s cubic-bezier(0.25, 1, 0.3, 1),
    background-color 0.5s ease;
  will-change: transform;
  flex-shrink: 0;
}

.button__arrow {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Pip smoothly glides from right to left resting inside the button */
.button--circle-slide:hover .button__pip {
  transform: translateX(calc(-1 * var(--pip-slide-shift, 140px))) scale(1.05);
  background-color: var(--color-brand-green-dark);
}

.button--circle-slide:hover .button__text {
  transform: translateX(var(--text-slide-shift, 56px));
}

.button--circle-slide:hover .button__arrow {
  transform: none;
}

/* Secondary Style: Cream background variant */
.button--cream {
  background-color: var(--color-surface-cream);
}

.button--cream:hover {
  background-color: #F7EFCF;
}

/* ==================================================
   14. FLOATING PILL NAVBAR & MEGA MENU (MindMarket Spec)
   ================================================== */
.navbar {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

.navbar__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Main Pill Island */
.navbar__panel {
  position: relative;
  background: var(--color-surface-white);
  border-radius: var(--radius-sm);
  /* height: 58px; */
  padding: 10px 14px 10px 24px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-shadow: 0 4px 20px rgba(31, 42, 26, 0.08);
  border: 1px solid rgba(216, 222, 211, 0.85);
  pointer-events: auto;
  transition: all var(--transition-normal);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__brand-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.navbar__brand-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand-green-dark);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin-left: auto;
  margin-right: 8px;
}

.navbar__link {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.navbar__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-surface-cream);
  z-index: -1;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar__link:hover {
  color: var(--color-brand-green-dark);
}

.navbar__link:hover::after {
  transform: scale(1);
}

/* Active / Current Page State (Dashed border, darker than hover state) */
.navbar__link.is-current-page {
  color: var(--color-brand-green-dark);
  font-weight: 600;
  border: 1.5px dashed #00b4d8;
  border-radius: 12px;
  background-color: rgba(247, 239, 207, 0.45);
}

.navbar__link.is-current-page::after {
  display: none;
}

.navbar__link.is-current-page:hover {
  color: #1a3814;
  border-color: #0096c7;
  background-color: rgba(247, 239, 207, 0.7);
}

/* Dropdown trigger active state */
.navbar__link.is-active {
  color: var(--color-brand-green-dark);
}

.navbar__link.is-active::after {
  transform: scale(1);
}

.navbar__caret {
  transition: transform var(--transition-fast);
}

.navbar__link.is-active .navbar__caret {
  transform: rotate(180deg);
}

/* Circular green trigger button inside the island */
.navbar__menu-button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: auto;
  /* Pushes to far right on mobile */
}

.navbar__menu-button:hover {
  transform: scale(1.03);
}

/* Secondary CTA Island (Book a Tour) */
.navbar__cta {
  pointer-events: auto;
  flex-shrink: 0;
}

.btn-cta-pill {
  height: 58px;
  padding: 0 10px 0 20px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-white);
  border: 1px solid rgba(216, 222, 211, 0.85);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(31, 42, 26, 0.08);
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-cta-pill:hover {
  border-color: var(--color-brand-green);
  transform: translateY(-1px);
}

.btn-cta-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-soft-green);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(85, 158, 51, 0.25);
}

.btn-cta-avatar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Desktop Mega Menu Dropdown */
.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--color-surface-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--color-border-default);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 260px 1fr 1fr;
  gap: var(--space-7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  pointer-events: none;
}

.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   TRIPLE PHOTO CARD MEGA DROPDOWN (Matches MindMarket Chevron / Menu Trigger)
   ========================================================================== */
.mega-menu--triple {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding: 18px;
}

.mega-menu__card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 280px;
  background-color: var(--color-surface-soft-green);
  text-decoration: none;
  display: block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mega-menu__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(31, 42, 26, 0.15);
}

.mega-menu__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.mega-menu__card:hover img {
  transform: scale(1.05);
}

.mega-menu__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(18, 26, 15, 0.85) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  color: var(--color-surface-white);
  box-sizing: border-box;
}

.mega-menu__card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: #FFFFFF;
}

/* Circular Menu Button Active State (Rotates arrow on open like MindMarket) */
.navbar__menu-button {
  background-color: #8CC63F;
  /* Custom light green from mockups */
  color: var(--color-brand-green-dark);
}

.navbar__menu-icon--open {
  display: none;
}

.navbar__menu-button:hover,
.navbar__menu-button.is-active {
  background-color: var(--color-surface-cream);
  color: var(--color-brand-green-dark);
}

.navbar__menu-button.is-active .navbar__menu-icon--closed {
  display: none;
}

.navbar__menu-button.is-active .navbar__menu-icon--open {
  display: block;
}

.mega-menu__feature-card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 220px;
  background-color: var(--color-surface-soft-green);
}

.mega-menu__feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu__feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 42, 26, 0.75), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-4);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

.mega-menu__arrow {
  width: 32px;
  height: 32px;
  background: var(--color-surface-white);
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-menu__column h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-green-dark);
  margin-bottom: var(--space-3);
}

.mega-menu__column ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mega-menu__column a {
  font-size: 0.95rem;
  color: var(--color-text-primary);
  display: inline-block;
  padding: 4px 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mega-menu__column a:hover {
  color: var(--color-brand-green);
  transform: translateX(4px);
}

/* ==================================================
   MOBILE NAV DRAWER (Exact MindMarket Match)
   ================================================== */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(31, 42, 26, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  pointer-events: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__panel {
  background: var(--color-surface-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 12px 16px 16px;
  transform: translateY(-20px);
  transition: transform var(--transition-normal);
}

.mobile-nav.is-open .mobile-nav__panel {
  transform: translateY(0);
}

/* Header bar inside drawer */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #ECEEE9;
}

.mobile-nav__close-button {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background-color: #72B74B;
  color: var(--color-surface-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.mobile-nav__close-button:hover {
  background-color: var(--color-brand-green-dark);
}

/* Accordion list */
.mobile-nav__body {
  padding-top: 4px;
}

.mobile-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.mobile-nav__item {
  border-bottom: 1px solid #ECEEE9;
}

.mobile-nav__link {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__link:hover {
  color: var(--color-brand-green);
}

.mobile-nav__link.is-current-page {
  color: var(--color-brand-green-dark);
  font-weight: 700;
  display: inline-block;
  padding: 8px 14px;
  margin: 6px 0;
  border: 1.5px dashed #00b4d8;
  border-radius: 12px;
  background-color: rgba(247, 239, 207, 0.45);
}

.mobile-nav__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.mobile-nav__trigger-arrow {
  transition: transform 220ms ease;
  stroke: var(--color-text-primary);
}

.mobile-nav__trigger.is-open .mobile-nav__trigger-arrow {
  transform: rotate(180deg);
}

.mobile-nav__panel-content {
  display: none;
  flex-direction: column;
  padding: 2px 4px 14px 8px;
  gap: 10px;
}

.mobile-nav__panel-content.is-expanded {
  display: flex;
}

.mobile-nav__panel-content a {
  font-size: 0.96rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 3px 0;
  transition: color var(--transition-fast);
}

.mobile-nav__panel-content a:hover {
  color: var(--color-brand-green);
}

.mega-menu__all-link {
  font-weight: 600;
  color: var(--color-brand-green-dark) !important;
  text-decoration: underline !important;
  margin-top: 4px;
}

/* Bottom Contact Pill Button inside mobile drawer */
.mobile-nav__cta {
  margin-top: 14px;
  padding-top: 10px;
}

.mobile-nav__cta-button {
  width: 100%;
  height: 56px;
  background-color: var(--color-brand-green);
  border: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 20px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.mobile-nav__cta-button:hover {
  background-color: var(--color-brand-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}

/* ==================================================
   HOMEPAGE STORY SECTIONS
   ================================================== */

/* ==================================================
   CINEMATIC PRELOADER & HERO REVEAL MOTION
   ================================================== */

/* Section 1: The Hook (Editorial Billboard Hero - Full Screen / Edge-to-Edge) */
.hero,
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #0f0f0f;
  padding: 0;
  margin: 0;
}

/* Full-bleed hero background container */
.hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

/* Masked lines produced by SplitText */
.line {
  position: relative;
  will-change: transform;
  display: block;
}

/* Line wrapper mask */
.line-mask {
  overflow: hidden;
  display: block;
}


/* Content Container pinned to bottom & centered */
.hero__content.hero__content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100svh;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: var(--container-max-width);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  box-sizing: border-box;
  pointer-events: none;
}

.hero__content a,
.hero__content button,
.hero__content-main,
.hero__content-aside,
.hero__title,
.hero__description,
.line {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* Left Typography: Elegant Fraunces display matching reference */
.hero__content-main {
  max-width: 720px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* Right Content: Editorial description + Pill button */
.hero__content-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 460px;
  justify-self: end;
  padding-bottom: var(--space-2);
}

.hero__description {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: var(--space-6);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  text-align: right;
}

.hero__actions {
  display: flex;
  align-items: center;
}

/* Clean White Pill Button on Billboard */
.hero__tour-button {
  background: #ffffff !important;
  color: var(--color-text-primary) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.25) !important;
  padding: 8px 10px 8px 24px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}

.hero__tour-button .button__pip {
  background: #6E8E68 !important;
  color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
}

.hero__tour-button:hover .button__pip {
  background: var(--color-brand-green-dark) !important;
  color: #ffffff !important;
}

/* Responsive Billboard */
@media (max-width: 1000px) {
  .hero__content.hero__content {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-6);
    padding: 15svh 2rem 2rem 2rem;
  }

  .hero__content-main.hero__content-main {
    width: 100%;
    max-width: 100%;
  }

  .hero__content-aside.hero__content-aside {
    justify-self: start;
    max-width: 100%;
  }

  .hero__title {
    font-size: clamp(2.2rem, 7.5vw, 3.2rem);
  }
}

/* Section 2: The Parent Question */
.tension {
  padding: var(--section-space-medium) 0;
  background-color: var(--color-surface-paper);
  position: relative;
  overflow: clip;
}

.tension .container {
  position: relative;
}

.tension__box {
  background-color: var(--color-surface-soft-green);
  border-radius: var(--radius-sm);
  border: var(--border-default);
  padding: var(--section-space-small) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-8);
  align-items: center;
}

.tension__content h2 {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  margin-bottom: var(--space-4);
  color: var(--color-brand-green-dark);
}

.tension__content strong {
  color: var(--color-brand-black);
}

.tension__content p {
  font-size: var(--type-body-large);
  margin-bottom: var(--space-4);
  max-width: 640px;
}

.tension__mascot {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.tension__mascot:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 8px;
  border-radius: var(--radius-sm);
}

.tension__mascot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}

.tension__floating-sprout {
  position: absolute;
  z-index: 1;
  width: clamp(5.25rem, 11vw, 8rem);
  pointer-events: none;
  user-select: none;
}

.tension__floating-sprout img {
  display: block;
  width: 100%;
  height: auto;
}

.tension__floating-sprout--top {
  --sprout-tilt: -6deg;
  top: clamp(-5.75rem, -5vw, -1.25rem);
  left: clamp(-2.75rem, 3vw, 0rem);
  animation-delay: -0.8s;
}


.tension__floating-sprout {
  animation: tension-sprout-float 1s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes tension-sprout-float {
  from {
    transform: translateY(-4px) rotate(calc(var(--sprout-tilt) - 3deg));
  }

  to {
    transform: translateY(6px) rotate(calc(var(--sprout-tilt) + 3deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tension__mascot img {
    will-change: auto;
  }

  .tension__floating-sprout {
    animation: none;
    transform: rotate(var(--sprout-tilt));
  }
}

/* ==========================================================================
   SECTION 03: ANCHORED HEADLINE WITH SPEECH BUBBLES (.philosophy)
   Sticky pinned center statement with marginal speech bubbles accumulating on scroll
   ========================================================================== */
.philosophy {
  position: relative;
  background-color: var(--color-surface-paper);
  /* Decision 4: overflow-x: clip — never hidden (hidden kills position: sticky) */
  overflow-x: clip;
  padding: 0;
}

/* The Over-tall Track: Decision 1 - top padding pushes static position deep inside */
.philosophy .philosophy__track {
  position: relative;
  width: 100%;
  min-height: 185svh;
  padding-top: 50svh;
  padding-bottom: 25svh;
  box-sizing: border-box;
}

/* Pinned Center Statement */
.philosophy .philosophy__copy {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: 0 var(--space-5);
  z-index: 2;
  /* Decision 3: pointer-events: none so text in bubbles behind it stays selectable */
  pointer-events: none;
}


.philosophy__mascot {
  --sprout-tilt: -6deg;
  display: block;
  width: clamp(7rem, 12vw, 10rem);
  height: auto;
  margin: 0 auto var(--space-3);
  object-fit: contain;
  animation: tension-sprout-float 1s ease-in-out infinite alternate;
  animation-delay: -0.8s;
  transform-origin: center;
}

.philosophy .philosophy__title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4.2vw, 3.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-brand-green-dark);
  margin: 0;
  opacity: 1 !important;
}

/* Speech Bubbles with Top Mascot Avatar */
.philosophy .philosophy__quote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(330px, 27vw, 420px);
  background: var(--color-surface-white);
  border: 1px solid rgba(85, 158, 51, 0.18);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.5rem, 2vw, 2rem);
  box-shadow: 0 20px 42px -10px rgba(31, 42, 26, 0.1), 0 6px 18px rgba(31, 42, 26, 0.04);
  z-index: 3;
  margin: 0;
  box-sizing: border-box;
  will-change: transform, opacity;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.philosophy .philosophy__quote blockquote {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0;
  font-style: normal;
  font-weight: 400;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .philosophy .philosophy__quote {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile Responsive (< 820px): Stack bubbles beneath headline, lengthen track */
@media (max-width: 820px) {
  .philosophy .philosophy__track {
    min-height: 220svh;
    padding-top: 18svh;
    padding-bottom: 20svh;
  }

  .philosophy .philosophy__copy {
    position: sticky;
    top: 16%;
    transform: none;
    max-width: 100%;
    text-align: left;
    padding: 0 var(--space-5);
  }

  .philosophy .philosophy__title {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem);
  }

  .philosophy .philosophy__quote {
    position: absolute;
    left: 6% !important;
    width: 88%;
    max-width: 420px;
  }
}

/* Section 4: Learning Approach */
.learning {
  padding: var(--section-space-medium) 0;
  background-color: var(--color-surface-paper);
}

.learning__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--section-space-small);
}

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

.learning-card {
  min-height: 420px;
  perspective: 1200px;
  outline: none;
}

.learning-card:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 5px;
  border-radius: var(--radius-sm);
}

.learning-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.learning-card:hover .learning-card__inner,
.learning-card:focus .learning-card__inner,
.learning-card:focus-within .learning-card__inner {
  transform: rotateY(180deg);
}

.learning-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background-color: var(--color-surface-cream);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
  overflow: hidden;
}

.learning-card__face--back {
  transform: rotateY(180deg);
  background-color: var(--color-brand-green-dark);
  border-color: var(--color-brand-green-dark);
  color: #FFFFFF;
  overflow-y: auto;
}

.learning-card__back-group,
.learning-card__front-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Flip-hint icon (top-right of front face) */
.learning-card__flip-hint {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 22px;
  height: 22px;
  opacity: 0.3;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 2;
  filter: invert(38%) sepia(8%) saturate(600%) hue-rotate(50deg) brightness(95%);
}

.learning-card:hover .learning-card__flip-hint,
.learning-card:focus-within .learning-card__flip-hint {
  opacity: 0.65;
  transform: rotate(180deg);
}

.learning-card__icon {
  width: 150px;
  height: 150px;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.learning-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08));
  transition: transform 0.35s ease;
}

.learning-card:hover .learning-card__icon img {
  transform: scale(1.06);
}

.learning-card h3 {
  font-size: 1.4rem;
  margin-bottom: var(--space-2);
  line-height: 1.25;
}

.learning-card p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.learning-card__face--back .eyebrow {
  color: var(--color-brand-yellow);
  margin-bottom: var(--space-4);
}

.learning-card__face--back h3 {
  color: #FFFFFF;
}

.learning-card__face--back ul {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0 0 var(--space-5);
  list-style: none;
  font-size: 0.92rem;
  line-height: 1.45;
}

.learning-card__face--back li {
  position: relative;
  padding-left: 1.15rem;
}

.learning-card__face--back li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--color-brand-yellow);
}

.learning-card__face--back .btn-text--inverse {
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .learning-card__inner {
    transform: none !important;
  }

  .learning-card__face--back {
    display: none;
  }
}

/* Section 4B: Learning Wheel Variation */
.learning-wheel {
  position: relative;
  overflow-x: clip;
  background: var(--color-surface-paper);
  color: var(--color-text-primary);
  display: none;
}

.learning-wheel__track {
  min-height: 300svh;
  position: relative;
}

.learning-wheel__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: block;
  overflow: hidden;
  padding: clamp(7rem, 11vh, 9rem) var(--space-5) clamp(4rem, 7vh, 6rem);
}

.learning-wheel__copy {
  position: absolute;
  top: clamp(5.5rem, 9vh, 7.5rem);
  left: 50%;
  z-index: 8;
  width: min(760px, calc(100% - 2rem));
  --wheel-copy-y: 0px;
  transform: translateX(-50%) translateY(var(--wheel-copy-y));
  text-align: center;
  color: var(--color-brand-green-dark);
}

.learning-wheel__copy h2 {
  max-width: 760px;
  margin: 0 auto var(--space-4);
  font-size: clamp(2.25rem, 6vw, 5.6rem);
  line-height: 0.94;
}

.learning-wheel__copy p {
  max-width: 610px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.learning-wheel__orbit {
  position: absolute;
  top: clamp(20rem, 20vh, 20rem);
  left: 50%;
  width: min(1180px, 100%);
  height: min(56svh, 540px);
  min-height: 420px;
  margin: 0;
  --wheel-orbit-y: 0px;
  transform: translateX(-50%) translateY(var(--wheel-orbit-y));
}

.learning-wheel__orbit::before {
  display: none;
}

.learning-wheel__step {
  --wheel-x: 0px;
  --wheel-y: 0px;
  --wheel-rot: 0deg;
  --wheel-opacity: 1;
  --wheel-scale: 1;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: clamp(230px, 27vw, 360px);
  min-height: 350px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-surface-cream);
  border: 2px solid rgba(39, 72, 48, 0.16);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 70px rgba(31, 42, 26, 0.2);
  transform: translate(-50%, 0) translate(var(--wheel-x), var(--wheel-y)) rotate(var(--wheel-rot)) scale(var(--wheel-scale));
  opacity: var(--wheel-opacity);
  will-change: transform, opacity;
  -webkit-mask:
    radial-gradient(circle 12px at 0 64%, transparent 98%, #000 100%),
    radial-gradient(circle 12px at 100% 64%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.learning-wheel__step img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.learning-wheel__number {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--color-brand-green);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.learning-wheel__step h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-brand-green-dark);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.learning-wheel__step p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.96rem;
  line-height: 1.58;
}

.learning-wheel__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4vh, 3rem);
  z-index: 9;
  width: min(520px, calc(100% - 2rem));
  height: 2px;
  transform: translateX(-50%);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.26);
}

.learning-wheel__progress i {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--color-brand-yellow);
}

@media (max-width: 760px) {
  .learning-wheel__stage {
    padding-top: 6rem;
  }

  .learning-wheel__copy {
    top: 5rem;
  }

  .learning-wheel__copy h2 {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .learning-wheel__copy p {
    margin-inline: auto;
  }

  .learning-wheel__orbit {
    top: clamp(16rem, 40vh, 20rem);
    min-height: 400px;
  }

  .learning-wheel__step {
    width: min(78vw, 300px);
    min-height: 340px;
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-wheel__track {
    min-height: 0;
  }

  .learning-wheel__stage {
    position: static;
    min-height: 0;
    display: block;
    padding: var(--section-space-medium) var(--space-5);
  }

  .learning-wheel__copy {
    position: static;
    width: min(760px, 100%);
    margin: 0 auto var(--space-7);
    transform: none;
  }

  .learning-wheel__orbit {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    width: min(980px, 100%);
    height: auto;
    min-height: 0;
    margin: 0 auto;
  }

  .learning-wheel__orbit::before,
  .learning-wheel__progress {
    display: none;
  }

  .learning-wheel__step {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .learning-wheel__orbit {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SECTION 05: CHILD SAFETY SPOTLIGHT (Client Priority Redesign)
   Rich Forest Green background with editorial typography, 4 glass cards,
   authentic documentary photography & mascot confidence badge.
   ========================================================================== */
.safety {
  padding: var(--section-space-large) 0;
  background-color: var(--color-brand-green-dark);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(85, 158, 51, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(249, 200, 21, 0.1) 0%, transparent 40%);
}

/* Quiet botanical linework: deliberately kept behind the Safety content. */
.safety::before,
.safety::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Offset, hand-drawn-like loops frame the opening of the section. */
.safety::before {
  width: min(54vw, 760px);
  aspect-ratio: 1.48;
  top: clamp(-20rem, -18vw, -9rem);
  left: clamp(-25rem, -19vw, -9rem);
  border: 1px solid rgba(226, 243, 217, 0.15);
  border-radius: 48% 52% 46% 54% / 53% 43% 57% 47%;
  box-shadow:
    30px 22px 0 -1px rgba(226, 243, 217, 0.09),
    62px 47px 0 -3px rgba(249, 200, 21, 0.11);
  transform: rotate(-18deg);
}

/* Nested, partial rings become soft wave contours at the opposing corner. */
.safety::after {
  width: min(58vw, 850px);
  aspect-ratio: 1.3;
  right: clamp(-28rem, -20vw, -11rem);
  bottom: clamp(-25rem, -19vw, -10rem);
  border: 1px solid rgba(226, 243, 217, 0.13);
  border-radius: 54% 46% 57% 43% / 45% 55% 45% 55%;
  box-shadow:
    -27px -20px 0 -1px rgba(226, 243, 217, 0.08),
    -56px -43px 0 -3px rgba(249, 200, 21, 0.1);
  transform: rotate(21deg);
}

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

/* Header */
.safety__header {
  max-width: 1040px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.safety__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  backdrop-filter: blur(8px);
}

.safety__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-yellow);
  box-shadow: 0 0 8px var(--color-brand-yellow);
}

.safety__title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: var(--space-4);
  text-align: center;
}

.safety__title-italic {
  font-style: italic;
  color: #E2F3D9;
}

.safety__intro {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  max-width: 720px;
  text-align: center;
  margin-inline: auto;
}

/* ==========================================================================
   Bento Grid Architecture (5-Tile Composition)
   Column 1: Tall photo card spanning 2 rows
   Column 2: Top lime accent card, Bottom landscape photo card
   Column 3: Top landscape photo card, Bottom brand mascot badge card
   ========================================================================== */
.safety__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-auto-rows: 270px;
  gap: 20px;
  width: 100%;
}

/* Generic Bento Card */
.safety-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
}

.safety-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Background image & gradient for photo cards */
.safety-card__background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.safety-card:hover .safety-card__background-image {
  transform: scale(1.04);
}

.safety-card__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(16, 26, 14, 0.05) 0%, rgba(16, 26, 14, 0.5) 45%, rgba(12, 20, 11, 0.94) 100%);
  pointer-events: none;
}

/* Text Content within Bento Cards */
.safety-card__content {
  position: relative;
  z-index: 3;
  padding: 24px 28px;
}

.safety-card__headline {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.safety-card__description {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* 1. Tall Left Card (Spanning 2 Rows) */
.safety-card--tall {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.safety-card--tall .safety-card__content {
  padding: 32px 28px;
}

.safety-card--tall .safety-card__headline {
  font-size: 1.45rem;
  line-height: 1.22;
  margin-bottom: 12px;
}

.safety-card--tall .safety-card__description {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

/* 2. Accent Yellow/Lime Card (Tile 2) */
.safety-card--accent {
  background: #C4E538;
  /* Bright energetic sprout lime/yellow from reference */
  background: linear-gradient(145deg, #CEEB45 0%, #B6DB28 100%);
  color: #172B10;
  justify-content: space-between;
  border-color: rgba(255, 255, 255, 0.3);
}

.safety-card--accent .safety-card__pills {
  display: flex;
  gap: 8px;
  padding: 24px 28px 0;
  position: relative;
  z-index: 3;
}

.safety__pip {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.safety__pip--dark {
  background: #172B10;
  color: #CEEB45;
}

.safety__pip--white {
  background: #FFFFFF;
  color: #172B10;
}

.safety-card--accent:hover .safety__pip {
  transform: translateY(-2px);
}

.safety-card__statement {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.32;
  color: #172B10;
  letter-spacing: -0.01em;
  margin: 0;
}

/* 3. Landscape Photo Cards (Tiles 3 & 4) */
.safety-card--photo {
  justify-content: flex-end;
}

/* 4. Bottom Right Mascot Badge Card (Tile 5) */
.safety-card--badge {
  background: #1E2E19;
  background: linear-gradient(160deg, #24381E 0%, #172513 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 26px;
  cursor: pointer;
}

.safety-card--badge:hover {
  background: linear-gradient(160deg, #2c4424 0%, #1c2e17 100%);
  border-color: rgba(206, 235, 69, 0.4);
}

.safety-card__badge-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-block: auto;
  gap: 12px;
  text-align: center;
}

.safety-card__mascot-orb {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(206, 235, 69, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.safety-card--badge:hover .safety-card__mascot-orb {
  transform: scale(1.08) rotate(3deg);
  border-color: #CEEB45;
}

.safety-card__mascot-orb img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.safety-card__badge-pill {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #CEEB45;
  background: rgba(206, 235, 69, 0.12);
  border: 1px solid rgba(206, 235, 69, 0.28);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.safety-card__badge-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.safety-card__brand-tag {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

.safety-card__link-arrow {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.safety-card--badge:hover .safety-card__link-arrow {
  background: #CEEB45;
  color: #172B10;
  transform: translate(2px, -2px);
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .safety__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 250px;
  }

  .safety-card--tall {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 768px) {
  .safety::before {
    width: 34rem;
    top: -15rem;
    left: -23rem;
    opacity: 0.72;
  }

  .safety::after {
    width: 32rem;
    right: -23rem;
    bottom: -17rem;
    opacity: 0.58;
  }

  .safety__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
  }

  .safety-card--tall {
    grid-column: auto;
    grid-row: auto;
    min-height: 380px;
  }

  .safety-card--photo {
    min-height: 260px;
  }

  .safety-card--accent {
    min-height: 220px;
  }

  .safety-card--badge {
    min-height: 220px;
    justify-content: center;
    gap: 16px;
  }

  .safety-card__badge-center {
    margin: 0;
    gap: 16px;
  }

  .safety-card__badge-footer {
    margin: 0;
  }

  .safety__header {
    text-align: center;
  }
}



/* Section 6: The Joyful Sprouts Journey */
.journey {
  --journey-card-width: 320px;
  --journey-card-height: 410px;

  padding-top: var(--section-space-large);
  padding-bottom: clamp(2rem, 3vw, 3.5rem);
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.journey__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-6);
}

/* Controls Container (Rounded square buttons with green chevrons matching reference) */
.journey-carousel {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-6);
}

/* Bottom Bar: Centered Carousel Arrows */
.journey__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--space-4);
}

.journey-carousel__controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: static;
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #4a6d2c;
  background: transparent;
  color: #4a6d2c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.carousel-arrow:hover {
  background: rgba(74, 109, 44, 0.08);
  border-color: #3b5723;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 109, 44, 0.15);
}

.carousel-arrow:active {
  transform: scale(0.96);
}

.carousel-arrow svg {
  display: block;
}

/* Carousel Viewport & Track */
.journey-carousel__viewport {
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0 1rem;
  position: relative;
}

.journey-carousel__viewport::before {
  content: '';
  position: absolute;
  top: 42%;
  left: 50%;
  width: 52vmax;
  height: 52vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.journey-carousel__track {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  will-change: transform;
  position: relative;
  z-index: 1;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-carousel__track.is-dragging {
  transition: none;
}

/* Flat milestone card */
.journey-card {
  --carousel-tilt: 0deg;
  width: var(--journey-card-width);
  height: var(--journey-card-height);
  flex-shrink: 0;
  position: relative;
  user-select: none;
  transform: rotateZ(var(--carousel-tilt));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.journey-card__body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(74, 109, 44, 0.12);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(49, 92, 40, 0.10);
}

.journey-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 190px;
  flex: 0 0 190px;
}

.journey-card__mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at center, rgba(162, 203, 137, 0.25) 0%, transparent 70%);
  border-radius: 16px;
  padding: 8px;
}

.journey-card__mascot-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(49, 92, 40, 0.12));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-card:hover .journey-card__mascot-image {
  transform: scale(1.08) translateY(-4px);
}

.journey-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 1rem;
}

.journey-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.journey-card__title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.15;
}

.journey-card__mascot-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.journey-card__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.journey-card__description {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text-primary);
  opacity: 0.82;
  margin: 0;
}

.journey-card__link-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: rgba(74, 109, 44, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-green-dark);
  flex-shrink: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.journey-card:hover .journey-card__link-icon {
  transform: translate(2px, -2px);
  background: var(--color-brand-green-dark);
  color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .journey {
    --journey-card-width: min(78vw, 300px);
    --journey-card-height: 385px;
  }

  .journey-card__title {
    font-size: 1.5rem;
  }

  .journey-card__header {
    height: 165px;
    flex-basis: 165px;
  }
}

@media (max-width: 600px) {
  .journey-carousel__viewport {
    padding: 0.25rem 0 0.75rem;
  }

  .journey-carousel__track {
    gap: 1rem;
  }

  .journey__bottom-bar {
    justify-content: center;
    margin-top: 0.5rem;
  }

  .journey-card__body {
    padding: 1.1rem;
  }
}

/* ==========================================================================
   SECTIONS 07 - 09: SCROLL-PINNED STICKY CARDS DECK (3D Tilt-off)
   Pinned viewport deck with 3D perspective and card tilt-off scrub.
   ========================================================================== */
.readiness {
  --base-1: #315C28;
  /* Forest Green */
  --base-2: #84A942;
  /* Vibrant Lime Sprout */
  --base-3: #D99B26;
  /* Warm Gold */
  --base-4: #4A6D52;
  /* Muted Sage Green */

  position: relative;
  width: 100%;
  transition: background-color 0.8s ease;
}

.readiness__header {
  position: relative;
  max-width: 760px;
  width: 90%;
  margin: 3.5rem auto 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.readiness__header h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.5rem);
  color: var(--color-brand-green-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.readiness__header p {
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 620px;
}

/* Pinned 3D Cards Container (Essential: perspective: 1000px) */
.readiness__deck {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  perspective: 1000px;
}

/* 3D Stacked Cards (Max-width 1280px / Centered in Viewport) */
.readiness__deck .card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92%, 1440px);
  height: 62%;
  max-width: 1280px;
  max-height: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 2.5rem 3.5rem;
  border-radius: 1.5rem;
  color: #FFFFFF;
  transform-origin: center bottom;
  will-change: transform;
  box-shadow: 0 24px 50px -15px rgba(22, 38, 18, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Stacking Order & Background Colors */
#card-1 {
  background-color: var(--base-1);
  z-index: 5;
}

#card-2 {
  background-color: var(--base-2);
  z-index: 4;
}

#card-3 {
  background-color: var(--base-3);
  z-index: 3;
}

#card-4 {
  background-color: var(--base-4);
  z-index: 2;
}

/* Card Two-Column Layout */
.readiness__deck .card .col {
  flex: 1;
  height: 100%;
}

.readiness__deck .card .col:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.readiness-card__eyebrow {
  text-transform: uppercase;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

.readiness-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.readiness-card__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.readiness-card__snippet {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 440px;
}

.readiness-card__link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-surface-cream);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.95;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.readiness-card__link:hover {
  color: var(--color-brand-green);
  opacity: 1;
}

/* Card Column 2: Image Frame */
.readiness__deck .card .readiness-card__image-frame {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.readiness__deck .card .readiness-card__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .readiness__deck .card {
    width: calc(100% - 3rem);
    height: 75%;
    flex-direction: column;
    padding: 1.75rem;
    gap: 1.25rem;
  }

  .readiness__deck .card .col {
    width: 100%;
    flex: auto;
    justify-content: flex-end !important;
  }

  .readiness-card__link {
    margin: 0 0 1rem;
  }

  .readiness__deck .card .col:nth-child(1) {
    justify-content: flex-start;
    gap: 10px;
    order: 2;
  }

  .readiness__deck .card .readiness-card__image-frame {
    order: 1;
    height: stretch;
  }

  .readiness-card__title {
    font-size: 1.65rem;
  }

  .readiness-card__snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   SECTION 10: GROWING TOGETHER (FAMILIES & COMMUNITY) - Brand Themed Carousel
   ========================================================================== */
.community {
  padding: clamp(5rem, 8vw, 8rem) 0 0;
  /* background-color: var(--color-surface-soft-green); */
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

/* Header Row */
.community__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.community__header-left {
  max-width: 620px;
}

.community__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 600;
  color: var(--color-brand-green-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
}

.community__subtitle {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.community-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-white);
  color: var(--color-brand-green-dark);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid rgba(85, 158, 51, 0.25);
  box-shadow: 0 4px 14px rgba(49, 92, 40, 0.08);
  white-space: nowrap;
}

.community-pill-btn:hover {
  background-color: var(--color-brand-green-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(49, 92, 40, 0.18);
}

/* Track Viewport (Continuous Swiping & Dragging) */
.testimonial-carousel__viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  position: relative;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  padding: 10px 0;
}

.testimonial-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.testimonial-carousel__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual Testimonial Cards */
.testimonial-card {
  --carousel-tilt: 0deg;
  width: clamp(300px, 28vw, 380px);
  background-color: var(--color-surface-white);
  border: 1px solid rgba(85, 158, 51, 0.18);
  border-radius: 20px;
  padding: clamp(2rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  transform: rotateZ(var(--carousel-tilt));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  box-sizing: border-box;
  box-shadow: 0 10px 30px -10px rgba(31, 42, 26, 0.06);
}

.testimonial-card:hover {
  transform: translateY(-6px) rotateZ(var(--carousel-tilt));
  border-color: var(--color-brand-green);
  box-shadow: 0 20px 45px -12px rgba(49, 92, 40, 0.16);
}

.testimonial-card__quote-icon {
  color: var(--color-brand-green);
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.testimonial-card__text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 0 0 2rem 0;
  flex-grow: 1;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  border-top: 1px solid rgba(216, 222, 211, 0.6);
  padding-top: 1rem;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1.5px solid rgba(85, 158, 51, 0.3);
  flex-shrink: 0;
}

.testimonial-card__author-info strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-brand-green-dark);
  line-height: 1.3;
}

.testimonial-card__author-info span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* Bottom Bar: Animated Progress Bar + Prev/Next Circle Buttons */
.testimonial-carousel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.btn-text--inverse {
  color: #FFFFFF;
}

.btn-text--inverse::after {
  background-color: var(--color-brand-green);
}

.btn-text--inverse:hover {
  color: var(--color-text-inverse);
}

.btn-text--inverse:hover::after {
  background-color: var(--color-text-inverse);
}

.journey-carousel__viewport,
.testimonial-carousel__viewport {
  cursor: grab;
  touch-action: pan-y;
}

.journey-carousel__viewport.is-dragging,
.testimonial-carousel__viewport.is-dragging {
  cursor: grabbing;
}

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

  .journey-card,
  .testimonial-card {
    transition: none;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .community__header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonial-card {
    width: 280px;
    padding: 1.75rem 1.5rem;
  }
}


/* ==========================================================================
   SECTION 11: THE INVITATION (FINAL CTA & ENQUIRY)
   Ambient Dark Glow Mesh Billboard with Floating Crisp White Form
   ========================================================================== */
.tour {
  padding: 0;
  margin: 0;
  position: relative;
  background-color: var(--color-brand-green-dark);
  width: 100%;
  overflow: visible;
  z-index: 2;
}

.tour__billboard {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  background: var(--color-brand-green-dark);
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  isolation: isolate;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 4vw, 4.5rem);
  box-sizing: border-box;
}

/* Curved section coming out over the footer via ::after pseudo-class (height: 40px, matching color) */
.tour::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  height: 40px;
  background-color: var(--color-brand-green-dark);
  border-radius: 0 0 clamp(40px, 6vw, 70px) clamp(40px, 6vw, 70px);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 15px 30px -5px rgba(14, 26, 15, 0.3);
}

/* Left Editorial Column */
.tour__intro {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 580px;
}

.tour__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin-bottom: var(--space-4);
  max-width: 540px;
}

.tour__text {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  color: rgba(244, 246, 242, 0.88);
  line-height: 1.65;
  margin-bottom: var(--space-6);
  max-width: 500px;
}

/* Direct Phone Call Billboard */
.tour__call {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-6);
}

.tour__call-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(244, 246, 242, 0.7);
}

.tour__call-phone {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.25s ease;
  width: fit-content;
}

.tour__call-phone:hover {
  color: var(--color-brand-yellow);
}

/* Left Column Perks List */
.tour__perks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tour__perk {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(244, 246, 242, 0.92);
}

.tour__perk-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand-yellow);
  color: #121811;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Right Column: Clean White Form Card */
.tour-form__column {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

#tour-form {
  padding: clamp(2rem, 3.5vw, 2.75rem);
}

.tour-form {
  width: 100%;
  max-width: 520px;
  background: #FFFFFF;
  border-radius: 24px;
  /* box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45); */
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: var(--color-brand-black);
}

.tour-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tour-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.tour-form__group label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 6px;
}

.tour-form__input,
.tour-form__select,
.tour-form__textarea {
  width: 100%;
  border: 1.5px solid #DCE3D8;
  border-radius: 12px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #121811;
  background-color: #FAFCF9;
  transition: all 0.22s ease;
}

.tour-form__input {
  height: 46px;
}

.tour-form__textarea {
  padding: 12px 14px;
  resize: vertical;
  min-height: 84px;
}

.tour-form__input:focus,
.tour-form__select:focus,
.tour-form__textarea:focus {
  outline: none;
  border-color: var(--color-brand-green);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(85, 158, 51, 0.15);
}

.tour-form__input::placeholder,
.tour-form__textarea::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

/* Custom Select Wrapper */
.tour-form__select-wrap {
  position: relative;
  width: 100%;
}

.tour-form__select {
  height: 46px;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.tour-form__select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* Checkbox */
.tour-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.tour-form__checkbox {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-brand-green);
  cursor: pointer;
  flex-shrink: 0;
}

.tour-form__consent label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.45;
  cursor: pointer;
}

.tour-form__group label.required::after {
  content: " *";
  color: #EF4444;
  /* red-500 */
}

/* Submit Button: Full width override */
.tour-form__submit {
  width: 100%;
  margin-top: 6px;
  border-radius: var(--radius-sm);
  color: var(--color-surface-cream) !important;
}

.tour-form__security-note {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: #94A3B8;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .tour__billboard {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 1.75rem) clamp(2.5rem, 4vw, 3.5rem);
  }

  .tour__intro {
    max-width: 100%;
  }

  .tour-form__column {
    justify-content: center;
  }

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

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

/* ==========================================================================
   SECTION 12: SITE FOOTER (MINDMARKET INSPIRED VIBRANT YELLOW FOOTER)
   Exact match to reference design: Bright signature yellow, bold editorial
   dual-quadrant layout, massive "Let's Connect" with organic wavy green ribbon,
   white pill CTA with yellow circular arrow button, clean link columns,
   locations, and bottom certification + social bar.
   ========================================================================== */

.footer.footer {
  background-color: #8DA42A;
  /* Vibrant MindMarket Sun-Yellow */
  color: #121811;
  padding: clamp(5.5rem, 8.5vw, 8.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
}

.footer__container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* --------------------------------------------------
   Top Quadrant: Editorial Pitch + CTA vs Navigation Links
   -------------------------------------------------- */
.footer__top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(3rem, 6vw, 6.5rem);
  padding-bottom: clamp(2rem, 6.5vw, 4rem);
}

.footer__pitch {
  max-width: 520px;
}

.footer__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.62;
  color: #1A1F16;
  font-weight: 500;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

/* Footer CTA: Uses official website .button--circle-slide */
.footer__cta {
  display: flex;
}

.footer__cta-button {
  background-color: #FFFFFF;
  border: 1px solid rgba(18, 24, 17, 0.12);
  box-shadow: 0 10px 25px -6px rgba(18, 24, 17, 0.16);
}

.footer__cta-button:hover {
  border-color: var(--color-brand-green);
  box-shadow: 0 16px 35px -8px rgba(18, 24, 17, 0.25);
}

.footer__cta-button .button__pip {
  background-color: var(--color-brand-green);
  color: #FFFFFF;
}

.footer__cta-button:hover .button__pip {
  background-color: var(--color-brand-green-dark);
}

/* Primary Navigation Columns */
.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 4rem);
}

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

.footer__nav-list a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: #1A1F16;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
  letter-spacing: -0.005em;
}

.footer__nav-list a:hover {
  color: var(--color-brand-green-dark);
  transform: translateX(4px);
}

/* --------------------------------------------------
   Middle Quadrant: Massive "Let's Connect" + Locations
   -------------------------------------------------- */
.footer__middle {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: flex-end;
  padding-bottom: clamp(3.5rem, 5.5vw, 5.5rem);
}

.footer__connect-heading-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.footer__connect-heading {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(3.8rem, 8.8vw, 8.2rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #1F281B;
  display: flex;
  flex-direction: column;
  margin: 0;
  user-select: none;
}

/* Organic Wavy Ribbon Underline (Exact reference style) */
.footer__ribbon {
  width: 100%;
  max-width: 480px;
  height: 38px;
  margin-top: 14px;
}

.footer__ribbon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Locations & Contacts Column */
.footer__locations {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer__location {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer__location-city {
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  color: #1A1F16;
  margin: 0;
  letter-spacing: -0.01em;
}

.footer__location-detail {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(26, 31, 22, 0.78);
  margin: 0;
}

.footer__email-label {
  margin-top: 0.5rem;
}

.footer__email-link {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: #1A1F16;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(26, 31, 22, 0.35);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer__email-link:hover {
  border-color: var(--color-brand-green-dark);
  color: var(--color-brand-green-dark);
}

/* --------------------------------------------------
   Bottom Bar: Copyright + Cert Badge + Socials
   -------------------------------------------------- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* padding-top: clamp(1.75rem, 3vw, 2.5rem); */
  /* border-top: 1px solid rgba(26, 31, 22, 0.12); */
  font-size: 0.92rem;
  color: #1A1F16;
  flex-wrap: wrap;
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(26, 31, 22, 0.85);
}

.footer__bottom-aside {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
}

/* Cert Badge (ESOMAR Corporate 2026 style match) */
.footer__cert-badge {
  display: inline-flex;
  align-items: center;
  background-color: #121811;
  color: #FFFFFF;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.footer__cert-badge--dark {
  background-color: #0E140D;
  color: #FFFFFF;
  padding: 4px 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.footer__cert-badge--light {
  background-color: #FFFFFF;
  color: #121811;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 600;
}

/* Social Links */
.footer__social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__social-item {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: #1A1F16;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer__social-item:hover {
  color: var(--color-brand-green-dark);
  transform: translateY(-1px);
}

.footer__social-separator {
  opacity: 0.35;
  font-size: 0.8rem;
}

/* --------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------- */
@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer__middle {
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: flex-start;
  }

  .footer__pitch {
    max-width: 100%;
  }

  .footer__connect-heading {
    font-size: clamp(3.5rem, 12vw, 6rem);
  }
}

@media (max-width: 640px) {
  .footer__links {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer__bottom-aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer__connect-heading {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  .footer__ribbon {
    max-width: 320px;
    height: 28px;
  }
}

/* ==================================================
   RESPONSIVE QUERIES
   ================================================== */
@media (max-width: 1023px) {

  .hero-grid,
  .intro-grid,
  .safety-grid,
  .readiness-grid,
  .nutrition-grid,
  .manager-card,
  .final-cta-container {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .navbar__links,
  .mega-menu {
    display: none !important;
  }

  .learning__grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .navbar {
    top: 10px;
  }

  .navbar__container {
    padding: 0 10px;
    gap: 8px;
  }

  /* Main pill on mobile */
  .navbar__panel {
    height: auto;
    padding: 8px 12px;
    min-width: 0;
  }

  .navbar__brand {
    gap: 8px;
    min-width: 0;
  }

  .navbar__brand-logo {
    height: 60px;
  }

  .navbar__brand-text {
    font-size: 1.05rem;
  }

  .navbar__menu-button {
    width: 40px;
    height: 40px;
    background-color: var(--color-brand-green);
    color: #FFFFFF;
  }

  /* Secondary CTA pill on mobile */
  .btn-cta-pill {
    height: 52px;
    padding: 0 6px 0 14px;
    font-size: 0.88rem;
    gap: 8px;
  }

  .btn-cta-avatar {
    width: 36px;
    height: 36px;
  }

  .btn-cta-avatar img {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .navbar__container {
    padding: 0 8px;
    gap: 6px;
  }

  .navbar__brand-text {
    display: none;
    /* In very small screens, show just the clean logo like mindmarket icon to keep islands perfectly balanced */
  }

  .btn-cta-pill span {
    font-size: 0.82rem;
  }
}

@media (max-width: 639px) {

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

  .learning-card {
    min-height: 380px;
  }

  .tension__box {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-6);
  }

  .tension__mascot {
    order: -1;
  }

  .tension__floating-sprout {
    width: clamp(4rem, 17vw, 5.5rem);
  }

  .tension__floating-sprout--top {
    --sprout-tilt: -6deg;
    top: -2.25rem;
    left: 1.15rem;
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  #readiness .readiness__header {
    margin: 0 auto;
  }

  .community {
    padding: var(--section-space-large) 0 !important;
  }

  #tour-form {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   SECTION: FAQ (Questions & Accordion)
   ========================================================================== */
.faq {
  padding-top: var(--section-space-large);
  padding-bottom: var(--section-space-large);
  background-color: var(--color-background-page);
  position: relative;
}

.faq__container {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: flex-start;
}

.faq__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: 100px;
}

.faq__heading .eyebrow {
  margin-bottom: var(--space-3);
}

.faq__heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-brand-green-dark);
  margin-bottom: var(--space-4);
}

.faq__heading p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-6);
  max-width: 420px;
}

.faq__link {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-brand-green-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.faq__link:hover {
  color: var(--color-brand-green);
  opacity: 0.85;
}

/* Accordion List */
.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__list details {
  border-top: 1px solid rgba(49, 92, 40, 0.2);
  padding: 0;
  transition: background-color 0.2s ease;
}

.faq__list details:last-child {
  border-bottom: 1px solid rgba(49, 92, 40, 0.2);
}

.faq__list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-brand-green-dark);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

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

.faq__list summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-brand-green-dark);
  margin-left: 1.5rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.faq__list details[open] summary::after {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .faq__list summary:hover,
  .faq__list summary:hover::after {
    color: var(--color-brand-green);
  }
}

.faq__list summary:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (hover: none) {
  .faq__list summary:active {
    color: var(--color-brand-green);
  }
}

.faq__list details p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  padding-bottom: 1.6rem;
  padding-right: 1.5rem;
  margin: 0;
  animation: faqFadeSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

  .faq__heading {
    position: static;
  }
}

/* ==========================================================================
   SECTION: PROGRAMS & ROOMS (.programs)
   ========================================================================== */
.programs.section {
  padding-top: max(var(--section-space-large), 7.5rem);
  padding-bottom: var(--section-space-large);
  position: relative;
}

.programs__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: var(--space-8);
}

.programs__heading-main .eyebrow {
  margin-bottom: var(--space-2);
}

.programs__heading h1,
.programs__heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-brand-green-dark);
}

.programs__description {
  max-width: 380px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

/* Program Cards 3-Column Grid */
.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.2vw, 2.2rem);
  margin-bottom: var(--space-6);
}

.program-card {
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(49, 92, 40, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(49, 92, 40, 0.12);
}

/* Card Pastels */
.program-card.mint {
  background-color: #EBF3E8;
}

.program-card.yellow {
  background-color: #FFF5DD;
}

.program-card.peach {
  background-color: #FDF0E9;
}

/* Card Illustration Header */
.program-card__illustration {
  position: relative;
  width: 100%;
  height: 240px;
  padding: 0.9rem 0.9rem 0;
  box-sizing: border-box;
  display: none !important;
}

.program-card__illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.program-card__age {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-brand-green-dark);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Card Body */
.program-card__body {
  padding: 2rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.program-card__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-green-dark);
  opacity: 0.75;
  margin-bottom: var(--space-2);
}

.program-card__body h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-brand-green-dark);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.program-card__body p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

/* Facts List with Checkmarks */
.program-card__facts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.program-card__facts li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.program-card__facts li::before {
  content: '✓';
  color: var(--color-brand-green);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Program Price */
.program-card__price {
  margin-top: auto;
  padding-top: var(--space-3);
  margin-bottom: var(--space-3);
  border-top: 1px solid rgba(49, 92, 40, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.program-card__price strong {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-brand-green-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}

.program-card__price strong small {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.program-card__price span {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

/* Button */
.program-card__btn {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-brand-green-dark);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  justify-content: center;
  text-align: center;
}

.program-card__btn .button__text {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin: 0 auto;
}

/* Fee Note */
.program-card__fee-note {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 820px;
  margin: var(--space-4) auto var(--space-8);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .programs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .programs__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

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

/* Navbar CTA pill sizing */
.navbar__cta {
  width: 190px;
  max-width: 190px;
  opacity: 1;
}

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

  .navbar,
  .navbar__container,
  .navbar__panel,
  .navbar__cta {
    transition: none;
  }
}

/* Tablet and mobile navigation: menu trigger replaces the secondary tour CTA. */
@media (max-width: 1024px) {
  .navbar__cta {
    display: none;
  }

  .navbar__container {
    gap: 0;
  }
}

/* On phones the philosophy copy scrolls away naturally instead of pinning over quotes. */
@media (max-width: 820px) {
  .philosophy .philosophy__copy {
    position: relative;
    top: auto;
    transform: none;
  }
}

/* Mobile philosophy sequence: normal document flow with alternating quote cards. */
@media (max-width: 820px) {
  .philosophy .philosophy__track {
    min-height: 0;
    padding: clamp(5rem, 14vw, 7rem) var(--space-5) var(--section-space-medium);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .philosophy .philosophy__copy {
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
    margin: 0 0 var(--space-3);
    padding: 0;
    text-align: left;
  }

  .philosophy .philosophy__quote,
  .philosophy .philosophy__quote.philosophy__quote--right {
    position: relative;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 420px);
    max-width: none;
    margin: 0;
  }

  .philosophy .philosophy__quote {
    align-self: flex-start;
  }

  .philosophy .philosophy__quote.philosophy__quote--right {
    align-self: flex-end;
  }
}

.community__header-right .button--fill-rise {
  color: var(--color-surface-cream) !important;
}

#final-cta .button__text,
#community .button__text {
  margin: 0;
}

.button--circle-slide .button__text {
  color: var(--color-brand-black);
}

/* ===========================================================================
   CSS-ONLY INTERACTION MOTION
   ========================================================================== */

/* The two mascot images are layered so their state changes never require JS. */
.tension__mascot {
  position: relative;
}

.tension__mascot-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tension__mascot-image--resting {
  position: relative;
  animation: tension-mascot-resting 3s ease-in-out infinite;
}

.tension__mascot-image--happy {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: tension-mascot-happy 3s ease-in-out infinite;
}

.tension__mascot:hover .tension__mascot-image,
.tension__mascot:focus .tension__mascot-image {
  animation-play-state: paused;
}

.tension__mascot:hover .tension__mascot-image--resting,
.tension__mascot:focus .tension__mascot-image--resting {
  opacity: 0;
  transform: scale(0.86);
}

.tension__mascot:hover .tension__mascot-image--happy,
.tension__mascot:focus .tension__mascot-image--happy {
  opacity: 1;
  transform: scale(1.04);
}

@keyframes tension-mascot-resting {

  0%,
  44% {
    opacity: 1;
    transform: scale(1);
  }

  50%,
  94% {
    opacity: 0;
    transform: scale(0.86);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tension-mascot-happy {

  0%,
  44% {
    opacity: 0;
    transform: scale(0.86);
  }

  50%,
  94% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.86);
  }
}

/* Menu state is still managed for accessibility; CSS owns every transition. */
.mega-menu {
  display: grid;
  transform: translateY(-12px) scale(0.98);
  transform-origin: top center;
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1), visibility 380ms ease;
}

.mega-menu.is-open {
  transform: translateY(0) scale(1);
}

/* Accordion rows are always in layout, then smoothly collapse with CSS. */
.mobile-nav__panel-content {
  display: flex;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 4px;
  gap: 0;
  transform: translateY(-6px);
  transition: max-height 300ms ease, opacity 220ms ease, transform 300ms ease,
    padding 300ms ease, gap 300ms ease;
}

.mobile-nav__panel-content.is-expanded {
  max-height: 24rem;
  opacity: 1;
  padding: 2px 4px 14px 8px;
  gap: 10px;
  transform: translateY(0);
}

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

  .tension__mascot-image,
  .journey-carousel__track {
    animation: none !important;
    transition: none !important;
  }
}

/* Moving highlight adapted from shiny-text-effect.html for selected headlines. */
.text-shine {
  --text-shine-base: #2c3c25;
  display: inline-block;
  color: transparent;
  background: linear-gradient(110deg, var(--text-shine-base) 35%, #d9eea3 50%, var(--text-shine-base) 65%) 200% 0 / 200% 100% text;
  -webkit-background-clip: text;
  background-clip: text;
  animation: text-shine-sweep 4s linear infinite;
}

.hero__title-shine {
  display: inline-block;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  padding: 0 .15em;
}

.hero__title-circle {
  position: absolute;
  left: -5%;
  top: -28%;
  width: 110%;
  height: 156%;
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}

.hero__title-circle-ring {
  fill: var(--color-brand-yellow);
}

.hero__title-circle-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 95;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero__title-circle.is-animated .hero__title-circle-reveal {
  animation: hero-doodle-draw 1.8s cubic-bezier(.45, .05, .4, 1) .2s forwards;
}

@keyframes hero-doodle-draw {
  to {
    stroke-dashoffset: 0;
  }
}

h2.text-shine {
  display: block;
}

@keyframes text-shine-sweep {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-shine {
    animation: none;
    color: var(--text-shine-base);
    background: none;
  }

  .hero__title-circle-reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   ABOUT US PAGE STYLES (.about-hero & .team-card)
   ========================================================================== */
.about-hero {
  position: relative;
  background-color: var(--color-surface-soft-green);
  display: flex;
  border-bottom: var(--border-default);
  overflow: hidden;
  height: 100dvh;
  align-items: center;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.about-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-brand-green-dark);
  margin: var(--space-2) 0 var(--space-4);
}

.about-hero__lead {
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 680px;
  margin-bottom: var(--space-6);
}

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

.about-hero__btn {
  background-color: var(--color-brand-green-dark);
  color: var(--color-surface-white);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(31, 42, 26, 0.12);
}

.about-hero__btn .button__text {
  color: var(--color-surface-white);
  transition: color var(--transition-fast);
  margin: 0;
}

.about-hero__btn:hover .button__text {
  color: var(--color-brand-green-dark);
}

@media (max-width: 960px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-hero {
    padding-top: calc(var(--space-8) * 1.8);
  }
}

/* Team Card styling (matching intro speech bubbles and journey cards) */
.team-card {
  --carousel-tilt: 0deg;
  width: var(--journey-card-width, 320px);
  min-height: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-surface-white);
  border: 1px solid rgba(85, 158, 51, 0.18);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: 0 16px 36px -8px rgba(31, 42, 26, 0.08);
  transform: rotateZ(var(--carousel-tilt));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--transition-fast);
  user-select: none;
}

.team-card:hover {
  transform: translateY(-4px) rotateZ(var(--carousel-tilt));
  box-shadow: 0 24px 48px -10px rgba(31, 42, 26, 0.12);
}

.team-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(162, 203, 137, 0.3) 0%, transparent 70%);
  border: 2px solid var(--color-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--color-brand-green-dark);
  margin: 0 0 4px;
}

.team-card__role {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.team-card__bio {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: var(--space-3) 0 0;
}

.team-card__credential {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-brand-green);
  border-top: 1px dashed rgba(85, 158, 51, 0.22);
  padding-top: 12px;
  margin-top: 16px;
  display: block;
}

/* ==================================================
   SWISS CURTAIN / WIPE PAGE TRANSITION
   ================================================== */
.page-curtain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  z-index: 999999;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

/* updated for menu */

  @media (min-width: 1025px) {
    #mobile-menu-trigger {
      display: none !important;
    }
  }


/* Balance cards with no optional link. */
.readiness__deck .card .col:first-child:not(:has(.readiness-card__link)) .readiness-card__title-group { margin-block: auto; }
.readiness-card__more { display: none; }
@media (max-width: 1000px) {
  .readiness__deck .card .col:first-child { flex: 0 1 auto; height: auto; min-height: 0; justify-content: flex-start !important; }
  .readiness__deck .card .col:first-child:not(:has(.readiness-card__link)) .readiness-card__title-group { margin-block: 0; }
  .readiness__deck .card .readiness-card__image-frame { flex: 1 1 40%; min-height: 0; height: auto; width: 100%; }
  .readiness-card__snippet.is-expanded { display: block; max-height: 24svh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .readiness-card__more:not([hidden]) { display: inline-block; align-self: flex-start; border: 0; padding: 4px 0; background: transparent; color: white; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
}