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

:root {
  /* Refined Palette - Darkened for better a11y contrast */
  --p-teal: #5a8b96;
  --p-deep-blue: #1e3a4d;
  --p-yellow: #ffde47;
  --p-pink: #ffb1ad;
  --p-coral: #eb6b67;
  --p-off-white: #fffafa;
  --p-pale-yellow: #ffffab;
  --p-light-gray: #e8e4e4;
  --p-blue: var(--p-teal);   /* was referenced but never defined */

  /* Semantic Tokens */
  --bg: var(--p-off-white);
  --card-bg: rgba(255, 255, 255, 0.75);
  --card-border: rgba(255, 255, 255, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.7);
  --text: var(--p-deep-blue);
  --muted: #486e79;
  --brand: var(--p-coral);
  --accent: var(--p-yellow);
  --border-subtle: var(--p-light-gray);
  
  /* Advanced Layered Shadows for 3D Depth */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.02), 0 4px 12px rgba(61, 96, 120, 0.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.02), 0 12px 32px rgba(61, 96, 120, 0.06), 0 32px 64px rgba(61, 96, 120, 0.04);
  --shadow-lg: 0 8px 16px rgba(235, 107, 103, 0.04), 0 24px 48px rgba(235, 107, 103, 0.08), 0 64px 128px rgba(235, 107, 103, 0.04);
  
  /* Radii */
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 999px;
  
  /* Spring-based Transitions */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
}

html, body { 
  margin: 0; 
  padding: 0; 
  background: var(--bg); 
  color: var(--text); 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
  line-height: 1.7; 
  font-size: clamp(16px, 1vw + 14px, 18px); 
  overflow-x: hidden; /* Critical for mobile menu hiding */
}

html { scroll-behavior: smooth; }
section { scroll-margin-top: 100px; padding: clamp(80px, 10vh, 160px) 0; }

@media (max-width: 768px) {
  section {
    scroll-margin-top: 64px;
    padding: clamp(60px, 8vh, 100px) 0;
  }
}

/* Typography Overhaul - Fluid Scale */
h1, .section-title {
  font-family: 'The Girl Next Door', cursive;
  font-weight: 400;
  line-height: 1.15;
  color: var(--p-deep-blue);
  font-size: clamp(32px, 7vw + 8px, 72px);
  margin-bottom: 24px;
}

h2, .subheading { 
  font-family: 'Gotu', serif;
  font-size: clamp(20px, 3vw, 28px); 
  margin-bottom: 32px; 
  letter-spacing: -0.01em; 
  line-height: 1.4;
  color: var(--p-deep-blue);
}

p { max-width: 65ch; margin-bottom: 1.5rem; font-size: inherit; color: var(--text); opacity: 0.9; }
a { color: var(--brand); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--p-deep-blue); }

.container { width: min(1100px, 92%); margin: 0 auto; }

/* Premium Header */
.header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 20px 0; 
  position: fixed; 
  top: 0; 
  left: 0;
  right: 0;
  width: 100%;
  background: var(--bg); /* Use solid color by default */
  z-index: 2000; /* Ensure it stays above EVERYTHING */
  border-bottom: 1px solid transparent; 
  transition: all 0.4s var(--ease);
}

/* Desktop only: the blur must NOT apply while the mobile menu is a position:fixed
   overlay (<=768px). A backdrop-filter ancestor re-bases fixed children to its own
   box, which collapsed the full-screen menu onto the ~125px header strip. */
@media (min-width: 769px) {
  .header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 250, 250, 0.85);
  }
}

.header.scrolled {
  padding: 12px 0;
  background: rgba(255, 250, 250, 0.95);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s var(--ease);
}

.logo-link:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.header-logo {
  height: 85px; 
  width: auto;
  display: block;
  transition: height 0.4s var(--ease);
}

.header.scrolled .header-logo {
  height: 60px;
}

/* Navigation Reset - Start Clean */
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: 0;
}

.nav-close {
  background: none;
  border: none;
  cursor: pointer;
}

/* Desktop Navigation (Default) */
.nav-toggle {
  display: none;
}

.nav-close {
  display: none;
}

.header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
  justify-content: flex-end;
}
.header nav a { 
  color: var(--text); 
  font-weight: 600;
  padding: 10px 16px; 
  border-radius: var(--radius-md); 
  transition: all 0.2s var(--ease);
}

.header nav a:not(.btn):hover { 
  background: rgba(107, 155, 165, 0.08); 
  color: var(--brand);
}

/* This rule is now covered in the base styles above */

/* Body scroll lock for mobile menu */
body.nav-open {
  overflow: hidden;
}

/* Mobile Navigation Override */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
    font-size: 32px;
    color: var(--brand);
    z-index: 2000; /* Above the fixed nav */
    position: relative;
    background: none;
    border: none;
  }

  /* Ensure nav-toggle is visible and usable even when menu is open */
  .header nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s var(--ease), visibility 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    background: var(--p-off-white); /* Solid background for clarity */
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    padding: 32px;
    z-index: 1500;
  }

  .header nav.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .nav-close {
    display: none !important;
  }

  .header nav a {
    font-size: 20px;
    font-weight: 700;
    padding: 15px 30px;
    width: 80%;
    text-align: center;
    display: block;
  }
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--brand);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
  font-weight: bold;
}

.skip-link:focus {
  top: 6px;
}

/* Focus Indicator */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

/* Hero Transformation */
.hero { 
  position: relative; 
  padding: clamp(140px, 15vh, 200px) 0 clamp(80px, 10vh, 120px); 
  overflow: hidden; 
  background: var(--bg);
}

/* Atmospheric Mesh Gradient */
.hero::before {
  content: "";
  position: absolute;
  inset: -100px;
  background: radial-gradient(circle at 20% 30%, rgba(107, 155, 165, 0.12) 0%, transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(235, 107, 103, 0.12) 0%, transparent 40%),
              radial-gradient(circle at 50% 50%, rgba(255, 222, 71, 0.08) 0%, transparent 50%);
  filter: blur(80px);
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 481px) {
  .hero::before {
    animation: meshFloat 25s ease-in-out infinite alternate;
  }
}

@media (max-width: 480px) {
  .hero::before {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes meshFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(60px, -40px) rotate(8deg); }
  }
}

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

/* Scroll Nudge */
.scroll-nudge {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: nudgeFade 2s ease-in-out infinite;
}

.scroll-nudge::after {
  content: "";
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, var(--brand), transparent);
}

@keyframes nudgeFade {
  0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 10px); }
}

.hero-surface { 
  padding: clamp(40px, 5vw, 64px); 
  background: var(--card-bg); 
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid var(--glass-border); 
  border-radius: var(--radius-lg); 
  box-shadow: 
    var(--shadow-lg),
    inset 0 0 0 1px rgba(255,255,255,0.4),
    inset 0 24px 48px -12px rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}

.hero-surface::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  opacity: 0.5;
}

.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }

.hero-title { 
  display: inline-block;
  background: linear-gradient(135deg, var(--p-deep-blue) 0%, var(--brand) 100%); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.reveal .hero-title {
  animation: drawTitle 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  clip-path: inset(0 100% 0 0);
}

@keyframes drawTitle {
  to { clip-path: inset(0 0 0 0); }
}

.hero p { font-size: clamp(17px, 4vw + 6px, 20px); color: var(--muted); margin-bottom: 32px; }

.hero-points { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 20px; 
  margin: 0 0 44px; 
  padding: 0; 
  list-style: none; 
}

.hero-points li { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  font-weight: 700; 
  color: var(--p-deep-blue);
  font-size: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-points li {
    animation: floatPoint 3s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-points li:nth-child(2) { animation-delay: 0.5s; }
  .hero-points li:nth-child(3) { animation-delay: 1s; }
  .hero-points li:nth-child(4) { animation-delay: 1.5s; }
}

@keyframes floatPoint {
  from { transform: translateX(0); }
  to { transform: translateX(5px); }
}

.hero-points .icon {
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--glass-border);
}

.hero-art-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-art { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-centerpiece {
  width: 95%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.12));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-centerpiece {
    animation: floatBook 8s ease-in-out infinite alternate;
  }
}

@keyframes floatBook {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-24px) rotate(3deg); }
}

.hero-art .blob { 
  position: absolute; 
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  filter: blur(60px); 
  opacity: 0.6;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art .blob {
    animation: morph 10s ease-in-out infinite alternate;
  }
}

@keyframes morph {
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%; transform: translate(20px, -30px) rotate(5deg) scale(1.1); }
  66% { border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%; transform: translate(-10px, 20px) rotate(-5deg) scale(0.95); }
  100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.hero-art .b1 { width: 300px; height: 300px; background: var(--accent); top: -10%; left: -10%; }
.hero-art .b2 { width: 340px; height: 340px; background: var(--brand); bottom: -10%; right: -10%; }
.hero-art .b3 { width: 250px; height: 250px; background: var(--p-pink); top: 30%; left: 30%; }

@media (prefers-reduced-motion: no-preference) {
  .hero-art .b1 { animation-duration: 12s; }
  .hero-art .b2 { animation-delay: -2s; animation-duration: 15s; }
  .hero-art .b3 { animation-delay: -4s; animation-duration: 18s; }
}

/* Primary Button Design - Premium Refinements */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  background: var(--brand);
  color: white !important; 
  font-weight: 800; 
  padding: clamp(14px, 2vh, 20px) clamp(28px, 4vw, 40px); 
  border-radius: var(--radius-full); 
  box-shadow: var(--shadow-md);
  transition: all 0.5s var(--ease);
  border: none;
  cursor: pointer;
  font-size: clamp(16px, 1.2vw, 18px);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.btn:hover { 
  transform: translateY(-6px) scale(1.03); 
  box-shadow: var(--shadow-lg);
  background: var(--p-deep-blue);
}

.btn:active {
  transform: translateY(-2px) scale(0.98);
}

/* Pulsing CTA Effect */
.btn-pulse {
  animation: pulseGlow 3s infinite;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(235, 107, 103, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(235, 107, 103, 0); }
  100% { box-shadow: 0 0 0 0 rgba(235, 107, 103, 0); }
}

/* Card Systems - Advanced Elevation */
.card { 
  background: var(--card-bg); 
  border: 1px solid var(--card-border); 
  border-radius: var(--radius-lg); 
  padding: clamp(32px, 5vw, 60px); 
  box-shadow: var(--shadow-sm);
  transition: all 0.6s var(--ease);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

@media (hover: hover) {
  .card:hover { 
    transform: translateY(-12px) rotateX(2deg) rotateY(-1deg); 
    box-shadow: var(--shadow-md);
    border-color: var(--brand);
  }
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .feature-card:hover::after {
    opacity: 0.1;
  }
}

 /* Results/Testimonials Carousel */
#results {
  padding: 80px 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(235, 107, 103, 0.03) 50%, transparent 100%);
}

#results h2 {
  text-align: center;
  margin-bottom: 60px;
}

.testimonial-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: scrollTestimonials 40s linear infinite;
  padding: 20px 0;
}

@media (hover: hover) {
  .testimonial-track:hover {
    animation-play-state: paused;
  }
}

@keyframes scrollTestimonials {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 16px)); }
}

.testimonial-card {
  width: min(400px, 85vw);
  flex-shrink: 0;
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.4s var(--ease);
}

.testimonial-card .stars {
  color: var(--accent);
  letter-spacing: 2px;
  font-size: 18px;
}

.testimonial-card p {
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 18px;
}

.testimonial-info div:first-child {
  font-weight: 800;
  font-size: 15px;
  color: var(--p-deep-blue);
}

.testimonial-info div:last-child {
  font-size: 13px;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 980px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }   /* 2x2 — never a 3+orphan */
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}

.feature-card { 
  position: relative;
  overflow: hidden;
}

.feature-card .icon { 
  font-size: 40px; 
  margin-bottom: 20px; 
  display: block; 
}

.feature-card .title { 
  font-size: 22px; 
  margin-bottom: 12px; 
  color: var(--p-deep-blue);
}

/* Section Transitions */
/* Section Transitions */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }

@media (max-width: 900px) { 
  .hero-grid, .split { grid-template-columns: 1fr; gap: 40px; } 
  .hero { padding-top: 80px; }
  .hero-surface { padding: 32px; }
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 40px;
  }
  
  .hero-surface {
    padding: 24px;
  }
  
  .hero-centerpiece {
    max-width: 85%;
    height: auto;
    margin: 0 auto;
  }
  
  .tutor-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
  
  .split {
    gap: 32px;
  }
}

/* Stepper Overhaul */
.stepper { padding: 0; list-style: none; counter-reset: li-count !important; }
.stepper li { 
  position: relative;
  padding-left: 56px;
  margin-bottom: 32px;
  counter-increment: li-count;
}

.stepper li::before {
  content: counter(li-count);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--p-deep-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
}

/* Tutor Section Enhancement */
.tutor-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
}

.tutor-photo { 
  width: 200px; 
  height: 200px; 
  border-radius: 40px; 
  object-fit: cover; 
  box-shadow: var(--shadow-md); 
  border: 4px solid white;
  transform: rotate(-3deg);
  transition: transform 0.3s var(--ease);
}

@media (hover: hover) {
  .tutor-card:hover .tutor-photo { 
    transform: rotate(0deg) scale(1.05); 
  }
}

/* Scheduler Embed & Perfect Alignment */
#book { text-align: center; }
#book p { margin-left: auto; margin-right: auto; }
.scheduler { 
  background: white; 
  border: 1px solid var(--border-subtle); 
  border-radius: var(--radius-lg); 
  padding: 8px; 
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 900px;
  margin: 40px auto 0;
  min-height: 800px;
  display: flex;
  flex-direction: column;
}

.scheduler iframe {
  width: 100%;
  flex-grow: 1;
  border: 0;
  min-height: 800px;
  border-radius: calc(var(--radius-lg) - 8px);
}

@media (max-width: 768px) {
  .scheduler {
    min-height: min(90vh, 800px);
    margin: 24px auto 0;
  }
  
  .scheduler iframe {
    min-height: min(90vh, 800px);
  }
}

/* Wave Dividers */
.wave-divider {
  width: 100%;
  line-height: 0;
  fill: var(--p-off-white);
  margin-top: -1px;
  overflow: hidden;
}

.wave-divider svg {
  width: 100%;
  height: auto;
}

.wave-divider-top {
  transform: rotate(180deg);
  margin-bottom: -1px;
}

/* Parent Insights */
#insights {
  padding: 120px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(116,192,252,0.05) 50%, rgba(255,255,255,0) 100%);
  text-align: center;
}

#insights .section-title {
  margin-bottom: 16px;
  color: var(--p-deep-blue);
}

.section-subtitle {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .insights-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
    margin-top: 40px;
  }
}

.insight-card {
  padding: 40px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: white;
  border: 1px solid var(--border-subtle);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.insight-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  border-color: var(--p-blue);
}

.insight-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.insight-card h3 {
  margin: 0;
  font-size: 24px;
  color: var(--p-deep-blue);
}

.insight-card p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}

.insights-trust-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  padding: 50px 60px;
  background: white;
  border-radius: 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid var(--border-subtle);
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.trust-value {
  font-size: 64px;
  font-weight: 900;
  color: var(--p-deep-blue);
  line-height: 1;
  margin-bottom: 10px;
  font-family: 'Nunito', sans-serif;
  font-variant-numeric: tabular-nums;
}

.trust-label {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--p-blue);
  text-align: center;
}

.trust-divider {
  width: 1px;
  height: 80px;
  background: var(--border-subtle);
  opacity: 0.5;
}

@media (max-width: 768px) {
  .insights-trust-bar {
    flex-direction: column;
    gap: 30px;
  }
  .trust-divider {
    width: 60px;
    height: 1px;
    display: block;
  }
}

/* Footer Improvements */
footer { 
  padding: 80px 0 40px; 
  border-top: 1px solid var(--border-subtle);
  margin-top: 80px;
}

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

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s var(--ease);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer-links a:hover {
  color: var(--p-blue);
}

/* Reveal System */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 1.2s var(--ease-smooth), transform 1.2s var(--ease);
}

.reveal:not(.in-view) { will-change: opacity, transform; }  /* release the layer once revealed */

.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Widgets */
.assistant-widget { 
  position: fixed; 
  right: 24px; 
  bottom: 24px; 
  z-index: 200; 
}

@media (max-width: 480px) {
  .assistant-widget {
    display: none !important;
  }
}

.assistant-bubble { 
  background: white; 
  border-radius: var(--radius-md); 
  padding: 24px; 
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  border: 1px solid var(--border-subtle);
}

/* FAQ Redesign */
#faq details {
  max-width: 800px;
  margin: 16px auto;
  border: 1px solid var(--card-border);
  background: white;
  padding: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 0.3s var(--ease);
}

#faq details:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--p-teal);
}

#faq summary {
  padding: 20px 24px;
  font-weight: 800;
  font-size: 18px;
  color: var(--p-deep-blue);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#faq summary::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eb6b67' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  transition: transform 0.3s var(--ease);
}

#faq details[open] summary::after {
  transform: rotate(180deg);
}

#faq details p {
  padding: 0 24px 20px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ============================================================
   MOBILE OPTIMIZATION  (audited 2026-06-29)
   ============================================================ */

/* Testimonials: clip the marquee; on touch / reduced-motion, freeze the
   animation and turn it into a native swipeable, snapping carousel. */
/* Full-bleed reviews: break out of the centered content box so the marquee spans
   the whole viewport (cards scroll in/out at the screen edges, not boxed at 1100px). */
.testimonial-container {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
  .testimonial-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .testimonial-card { scroll-snap-align: start; }
}

/* Drop expensive GPU effects on small phones (animated blur blobs + live backdrop-filter). */
@media (max-width: 600px) {
  .hero-art .blob { animation: none !important; filter: blur(40px); opacity: 0.4; }
  .hero-surface, .card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }
}

/* Shrink-safe headshot on any width. */
.tutor-photo { max-width: 100%; }

@media (max-width: 768px) {
  /* Anchor offset clears the scrolled sticky header. */
  section { scroll-margin-top: 96px; }

  /* The fixed header was ~125px tall on mobile (85px logo). Trim the logo and give
     the hero enough top padding so "Learning That Clicks" clears the navbar on load
     (the mobile override had cut hero padding-top to 60px, less than the header). */
  .header-logo { height: 60px; }
  .header.scrolled .header-logo { height: 48px; }
  .hero { padding-top: 104px; }

  /* Trim stacked section padding that created large empty bands on phones. */
  #insights { padding: 64px 0; }
  #results { padding: 48px 0; }
  .split { padding: 0; }
  .insights-trust-bar { padding: 32px 20px; gap: 30px; }
  .trust-value { font-size: clamp(40px, 12vw, 56px); }

  /* Let Acuity's embed.js own the iframe height (removes dead white space); dvh avoids the URL-bar 100vh shift. */
  .scheduler { min-height: 0; min-height: min(90dvh, 800px); padding: 6px; }
  .scheduler iframe { flex-grow: 0; height: auto; min-height: 600px; max-width: 100%; }

  /* Clean square hamburger: explicit 48px tap target, icon centered, and the
     native button chrome (faint bg/rounded box on mobile) fully removed. */
  .nav-toggle {
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: var(--brand);
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
  }

  /* More comfortable body copy in the narrow centered column. */
  #faq details p, .insight-card p { font-size: clamp(16px, 4vw, 17px); line-height: 1.65; max-width: 60ch; }

  /* Tutor card: stack + center on mobile. The base `.tutor-card` grid rule appears
     LATER in source than the original mobile override, so that override lost the
     cascade and the `200px 1fr` grid stayed — crushing the text into a tiny right
     column. Re-assert the stacked layout here (last in source, so it wins). */
  .tutor-card { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .tutor-photo { width: 160px; height: 160px; justify-self: center; }
  .assistant-actions { justify-content: center; }
}

/* ============================================================
   COOKIE CONSENT + BOOKING GATE
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 3000;
  max-width: 760px;
  margin: 0 auto;
  background: var(--p-deep-blue);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.55;
  color: #fff;
  opacity: 0.95;
}
.cookie-banner-text a { color: var(--accent); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-banner .btn { padding: 10px 24px; font-size: 14px; box-shadow: none; }
.cookie-banner .btn:hover { transform: none; }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff !important;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Booking embed gate: the placeholder is hidden by default and only shown while
   consent is still needed (so the Acuity iframe + its cookies don't load passively). */
.booking-consent { display: none; }
.scheduler.consent-needed { min-height: 0; }
.scheduler.consent-needed #acuity-embed { display: none; }
.scheduler.consent-needed #booking-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  min-height: 360px;
  padding: 48px 24px;
}
.booking-consent p { max-width: 460px; margin: 0; color: var(--muted); }
.booking-consent-note { font-size: 13px; }

@media (max-width: 600px) {
  .cookie-banner { padding: 16px; gap: 12px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; }
}

/* ============================================================
   AI CHAT WIDGET
   ============================================================ */
.lil-chat-launcher {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 2500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.lil-chat-launcher:hover { transform: translateY(-3px); background: var(--p-deep-blue); }
.lil-chat-launcher-ico {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.lil-chat-panel {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 2600;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lil-chat-panel[hidden] { display: none; }

.lil-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--p-deep-blue);
  color: #fff;
}
.lil-chat-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px; }
.lil-chat-sub { font-size: 12px; opacity: 0.85; }
.lil-chat-close {
  background: none; border: none; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}

.lil-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--p-off-white);
}
.lil-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lil-msg-user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.lil-msg-assistant { align-self: flex-start; background: #fff; color: var(--text); border: 1px solid var(--border-subtle); border-bottom-left-radius: 4px; }

.lil-typing { display: inline-flex; gap: 4px; align-items: center; }
.lil-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.4; animation: lilDot 1s infinite; }
.lil-typing span:nth-child(2) { animation-delay: 0.2s; }
.lil-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lilDot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.lil-chat-book {
  align-self: flex-start; margin-top: 2px;
  background: var(--accent); color: var(--p-deep-blue);
  border: none; border-radius: var(--radius-full);
  padding: 10px 16px; font-weight: 800; font-size: 13px; cursor: pointer;
}
.lil-chat-book:hover { filter: brightness(0.96); }

.lil-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-subtle); background: #fff; }
.lil-chat-input {
  flex: 1; min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 14px; outline: none;
}
.lil-chat-input:focus { border-color: var(--brand); }
.lil-chat-send {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 16px; cursor: pointer;
}
.lil-chat-foot { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 0 8px; background: #fff; }

@media (max-width: 600px) {
  .lil-chat-panel {
    right: 0; bottom: 0; left: 0;
    width: 100vw; height: 100dvh;
    border-radius: 0;
  }
  .lil-chat-launcher-txt { display: none; }
  .lil-chat-launcher { padding: 14px; }
}

/* Tighter rhythm for these content sections (trims vertical dead space). */
#features, #why, #services { padding-top: clamp(56px, 7vh, 104px); padding-bottom: clamp(56px, 7vh, 104px); }