/* Visually hidden but readable by search engines and screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:root {
  /* Brand navy */
  --navy: #1B3A5C;
  --navy-dark: #15314B;
  --navy-deep: #102338;
  --navy-light: #2E5A7A;

  /* Hero overlay (warm navy gradient) */
  --hero-blue: #234E78;
  --hero-blue-dark: #1B3A5C;

  /* Brand cyan (spec #2EC4D6) — bright for fills, dark variant for text */
  --cyan: #2EC4D6;
  --cyan-dark: #1593A4;   /* AA-contrast cyan for text/links on light */
  --cyan-soft: #E6F7FA;

  /* Back-compat aliases — existing classes reference --teal* */
  --teal: #2EC4D6;
  --teal-light: #7BD8E4;
  --teal-pale: #BDEAF0;
  --teal-dark: #1593A4;

  /* Warm accent for human touches (keeps the site from feeling sterile) */
  --warm: #E8945A;        /* soft terracotta */
  --warm-soft: #FBEFE3;

  /* Subject category colors */
  --cat-math: #5B6CF0;       /* indigo — maths */
  --cat-science: #15A37C;    /* emerald — sciences */
  --cat-humanities: #E0871C; /* amber — humanities/economics */
  --cat-commerce: #D6567F;   /* rose — accounting/commerce */

  /* Warm neutrals */
  --ink: #1E2530;          /* crisp ink for headings */
  --body: #4C5564;         /* readable body grey */
  --muted: #6E6A63;        /* warm muted */
  --soft: #FAF7F2;         /* warm cream */
  --softer: #F2ECE2;
  --border: #E9E2D7;       /* warm border */
  --line: #ECEFF3;         /* cool hairline for cards */
  --white: #FFFFFF;

  /* Type */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Elevation + shape language */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 8px rgba(16, 35, 56, 0.05);
  --shadow-md: 0 14px 34px rgba(16, 35, 56, 0.09);
  --shadow-lg: 0 30px 70px rgba(16, 35, 56, 0.14);
  --maxw: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms var(--ease);
  --t-base: 420ms var(--ease);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background: #ffffff; }
body { font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: #ffffff; overflow-x: hidden; }
/* Phone only, homepage only: while at the very top of the page the hero
   graphic fills the screen, so html + body both paint the same navy tone
   the hero's scrim renders at the top edge (--navy-deep, the scrim's own
   tint colour) instead of showing a white seam above/behind it. Reverts to
   white the instant the user scrolls away, and back to navy if they scroll
   back up to the top. Fades over the identical 300ms ease used by
   #main-header's has-bar/at-top background-color transition, and flips at
   the same y<=20 threshold as the header's at-top state, so the menu bar
   and the page background turn white in lockstep. */
@media (max-width: 767px) {
  html, body { transition: background-color 300ms ease; }
  html.hero-top-bg, html.hero-top-bg body { background: var(--navy-deep); }
}
img { max-width: 100%; display: block; }

.page { display: none; animation: fadeIn 0.5s var(--ease); }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* NAV */
/* ===== Navigation — logo (left) · white links pill + cyan CTA (right) ===== */
#main-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top)) 46px 18px; pointer-events: none;
  background-color: transparent;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

#main-header > * { pointer-events: auto; }

/* White bar — fades in once the user starts scrolling in the hero zone.
   No shadow, so scrolling up/down never shows a seam popping in/out. */
#main-header.has-bar { background-color: #ffffff; box-shadow: none; }

/* At the very top of the page (hero just loaded): override to transparent,
   snap instantly so there's no fade-in on load. Logo goes white for contrast
   over the dark hero graphic. */
#main-header.at-top { background-color: transparent; }
#main-header.at-top .nav-logo,
#main-header.over-dark .nav-logo { filter: brightness(0) invert(1); }
#main-header.at-top .hamburger span,
#main-header.over-dark .hamburger span { background: #fff; }

.nav-logo {
  --logo-h: 56px;
  position: relative;
  display: inline-flex; align-items: center; text-decoration: none; padding-left: 6px;
  transition: opacity 360ms ease-in-out;
}
.nav-logo__full {
  position: relative; z-index: 1;
  height: var(--logo-h); width: auto; display: block;
  transition: opacity 380ms cubic-bezier(0.4,0,0.2,1);
}
/* Bird placed to coincide exactly with the bird inside the wordmark. Ratios are
   derived from the wordmark bird's bounding box (3,1 → 400,283 in the 876×285
   art), so it stays aligned at any --logo-h. */
.nav-logo__bird {
  position: absolute; z-index: 0; pointer-events: none;
  top:    calc(var(--logo-h) * 0.00351);
  left:   calc(6px + var(--logo-h) * 0.01053);
  height: calc(var(--logo-h) * 0.98947);
  width:  calc(var(--logo-h) * 1.39298);
}
/* Collapsed: only the wordmark fades, uncovering the bird underneath. */
.nav-logo.is-mark .nav-logo__full { opacity: 0; }
/* Hide-on-scroll: dissolve the whole logo out/in (in step with the pill). */
.nav-logo.is-out { opacity: 0; pointer-events: none; }

/* Right group: white links pill attached to the cyan CTA (CTA stretches to the
   pill's height, so they share thickness; CTA keeps its natural width) */
.nav-right { display: flex; align-items: stretch; }
.nav-pill {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 2px; padding: 7px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(16,35,56,0.09);
  clip-path: inset(0 0 0 0 round 999px);
  transition: clip-path 380ms ease-in-out;
}
/* hidden: clip sweeps from right anchor — Home (left) disappears first, Contact
   (right, near CTA) last. The CTA is the anchor: pill retracts into it and grows
   back out of it. No stretching; content stays undistorted throughout. */
#main-header.nav-hidden .nav-pill {
  clip-path: inset(0 0 0 100% round 999px); pointer-events: none;
}
.nav-link {
  position: relative; display: inline-block; padding: 10px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}
.nav-link:hover { background: var(--soft); }
.nav-link.active { color: var(--cyan-dark); }
/* growing underline on hover / active */
.nav-link::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px;
  background: var(--cyan); border-radius: 2px; transform: scaleX(0); transform-origin: center;
  transition: transform 220ms var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* CTA — original cyan, attached to the pill, glowing like the site's other CTAs */
.nav-cta {
  position: relative; z-index: 2; margin-left: -16px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 30px; border-radius: 999px;
  background: var(--cyan); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(46,196,214,0.45); transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.nav-cta:hover { background: var(--cyan-dark); transform: translateY(-1px); box-shadow: 0 12px 32px rgba(46,196,214,0.6); }

.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 250ms ease, opacity 200ms ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed; top: 72px; left: 16px; right: 16px; z-index: 999;
  background: rgba(20,46,74,0.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 12px;
  display: none; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden;
  box-shadow: 0 18px 44px rgba(13,27,42,0.35);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.mobile-drawer.open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
.drawer-link { padding: 13px 16px; border-radius: 12px; color: rgba(255,255,255,0.8); font-size: 15px; font-weight: 600; text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.drawer-link:hover, .drawer-link.active { background: rgba(255,255,255,0.08); color: #fff; }
.drawer-cta { margin-top: 8px; padding: 13px; border-radius: 12px; background: var(--cyan); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; text-align: center; }

/* Wing flap — fires only on page open / tab refocus (see initNav). Targets the
   bird's wing paths INSIDE an SVG logo (classes .wing-upper / .wing-lower); it
   deliberately does NOT move the whole logo or the wordmark. Requires a
   segmented (SVG / layered) logo — the current logo is a flat PNG, so no wing
   element exists yet and this stays dormant until that asset is provided. */
@keyframes wingFlap {
  0% { transform: rotate(0); } 25% { transform: rotate(-18deg); }
  50% { transform: rotate(4deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0); }
}
@keyframes wingFlapLower {
  0% { transform: rotate(0); } 25% { transform: rotate(14deg); }
  50% { transform: rotate(-3deg); } 75% { transform: rotate(8deg); } 100% { transform: rotate(0); }
}
.nav-logo .wing-upper, .nav-logo .wing-lower { transform-box: fill-box; transform-origin: right center; }
.nav-logo.flap .wing-upper { animation: wingFlap 620ms cubic-bezier(0.4,0,0.2,1); }
.nav-logo.flap .wing-lower { animation: wingFlapLower 620ms cubic-bezier(0.4,0,0.2,1); }

@media (max-width: 767px) {
  #main-header { padding: calc(16px + env(safe-area-inset-top)) 20px 16px; }
  /* Phone: snap the white bar in/out instantly rather than fading it — a
     fade lets the dark stats strip peek through the semi-transparent header
     for a frame, both scrolling down into it and back up out of it. */
  #main-header { transition: none; }
  .nav-pill, .nav-cta { display: none; }   /* phone: logo + hamburger only */
  .hamburger { display: flex; }
  .mobile-drawer { display: flex; }
  .nav-logo { --logo-h: 42px; transition: opacity 360ms ease-in-out; }
  .nav-logo.is-out { transform: none; opacity: 0; }
  main { padding-top: 78px; }
  /* About page's pinned/shrinking story panel ("header graphic"): while it's
     behind the logo (over-dark), snap the logo in/out instead of crossfading
     it, both scrolling down and back up. Normal fade resumes everywhere else
     on the page once the panel has scrolled past. */
  #main-header.over-dark .nav-logo,
  #main-header.over-dark .nav-logo__full { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo.flap .wing-upper, .nav-logo.flap .wing-lower { animation: none; }
}

main { padding-top: 144px; }
/* Homepage: hero sits flush under the floating header (no white bar gap).
   Hero fills the full viewport; inner content gets extra top padding to clear
   the ~76px header so the text isn't obscured. */
body.home main { padding-top: 0; }
body.home .hero { min-height: 100vh; margin-top: 0; }
body.home .hero__inner { padding-top: 100px; padding-bottom: 40px; }
body.home .hero__content { min-height: 0; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; font-size: 15.5px; font-weight: 700;
  border-radius: 8px; text-decoration: none; cursor: pointer;
  transition: all var(--t-fast); border: none; font-family: inherit; letter-spacing: -0.01em;
}
.btn--primary { background: var(--teal); color: white; }
.btn--primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43, 191, 177, 0.35); }
.btn--secondary { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn--secondary:hover { background: var(--navy); color: white; }
.btn--white { background: white; color: var(--navy); }
.btn--white:hover { background: var(--teal); color: white; transform: translateY(-2px); }
.btn--outline-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
.btn--outline-white:hover { background: white; color: var(--navy); border-color: white; }
.btn__arrow { transition: transform var(--t-fast); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* HERO v6: full-bleed slideshow background + diagonal blue overlay */
.hero {
  position: relative; 
  min-height: calc(100vh - 80px);
  overflow: hidden;
  margin-top: 20px; /* Add this line */
}
.hero__slides {
  position: absolute; inset: 0; z-index: 0;
}
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero__slide.active { opacity: 1; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, var(--hero-blue-dark) 0%, var(--hero-blue) 100%);
  clip-path: polygon(0 0, 55% 0, calc(55% - 120px) 100%, 0 100%);
}
.hero__content {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 55% 45%;
  min-height: calc(100vh - 80px);
}
.hero__left {
  padding: 100px 80px 100px 0;
  display: flex; align-items: center;
}
.hero__left-inner { max-width: 560px; margin-left: auto; padding-right: 80px; padding-left: 32px; width: 100%; }
.hero__controls {
  position: absolute; bottom: 40px; right: 40px; z-index: 3;
  display: flex; gap: 10px; align-items: center;
}
.hero__dots { display: flex; gap: 8px; margin-right: 16px; }
.hero__dot { width: 32px; height: 3px; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: background var(--t-fast); padding: 0; }
.hero__dot.active { background: white; }
.hero__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6); background: transparent; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); font-size: 18px; }
.hero__arrow:hover { background: white; color: var(--navy); border-color: white; }

.hero__eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; color: white;
  text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 28px;
  opacity: 0.95; padding: 6px 14px; background: rgba(255, 255, 255, 0.15);
  border-radius: 4px; border-left: 3px solid white;
}
.hero__title {
  font-size: clamp(48px, 6vw, 78px); line-height: 0.98; letter-spacing: -0.035em;
  color: white; font-weight: 800; margin-bottom: 28px; text-transform: uppercase;
}
.hero__subtitle {
  font-size: 19px; color: rgba(255, 255, 255, 0.95); line-height: 1.5;
  margin-bottom: 40px; font-weight: 500; max-width: 460px;
}
.hero__subtitle strong { font-weight: 700; }
.hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* NAVY TRIAL BANNER (was teal, now navy) */
.trial-banner {
  background: var(--navy-deep); color: white; padding: 18px 0;
  text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
}
.trial-banner strong { font-weight: 800; color: var(--teal); }
.trial-banner a { color: white; text-decoration: underline; cursor: pointer; font-weight: 700; margin-left: 8px; }
.trial-banner a:hover { color: var(--teal); }

/* SECTIONS */
.section { padding: 160px 0; }
.section--soft { background: #F2F3F5; }
.section--white { background: #ffffff; }
.section__head { max-width: 780px; margin: 0 auto 80px; text-align: center; }
.section__eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: 20px;
}
.section__title {
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; letter-spacing: -0.032em;
  color: var(--navy-deep); font-weight: 800; margin-bottom: 20px;
}
.section__subtitle { font-size: 18px; color: var(--muted); line-height: 1.6; }

/* SERVICES (Online / Face-to-Face with pricing) */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.service {
  background: white; padding: 48px 40px; border-radius: 16px;
  border: 1px solid var(--border); transition: all var(--t-base);
  position: relative; overflow: hidden;
}
.service::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.service:hover::before { transform: scaleX(1); }
.service:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(27, 58, 91, 0.08); border-color: transparent; }
.service__icon {
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  display: flex; align-items: center; justify-content: center;
  color: white; margin-bottom: 28px;
}
.service__title {
  font-size: 26px; font-weight: 800; color: var(--navy);
  margin-bottom: 6px; letter-spacing: -0.02em;
}
.service__pricing {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.service__price {
  font-size: 32px; font-weight: 800; color: #21B36B;
  letter-spacing: -0.025em; line-height: 1;
}
.service__price-meta { font-size: 14px; color: var(--muted); font-weight: 600; }
.service__desc { font-size: 15.5px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.service__features {
  list-style: none; display: flex; flex-direction: column;
  gap: 8px; font-size: 14.5px; color: var(--ink);
}
.service__features li { display: flex; gap: 8px; align-items: flex-start; }
.service__features li::before { content: '✓'; color: var(--teal); font-weight: 800; flex-shrink: 0; }

/* WHY */
.why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; align-items: center; }
.why__image {
  position: relative; aspect-ratio: 4/5; border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  overflow: hidden; box-shadow: 0 30px 80px rgba(27, 58, 91, 0.15);
}
.why__image::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(43, 191, 177, 0.3), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(95, 179, 184, 0.2), transparent 55%);
}
.why__image-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60%; opacity: 0.95; filter: brightness(0) invert(1);
}
.why__badge {
  position: absolute; bottom: 30px; left: 30px; background: white;
  border-radius: 12px; padding: 18px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); max-width: 230px;
}
.why__badge-label { font-size: 12px; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 6px; }
.why__badge-text { color: var(--navy); font-weight: 700; font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; }
.why__content h2 {
  font-size: 48px; line-height: 1.05; letter-spacing: -0.032em;
  color: var(--navy-deep); font-weight: 800; margin-bottom: 24px;
}
.why__content h2 span { color: var(--teal-dark); }
.why__content > p { font-size: 17px; color: var(--muted); line-height: 1.65; margin-bottom: 36px; }
.why__list { list-style: none; display: flex; flex-direction: column; gap: 22px; }
.why__list li { display: flex; gap: 16px; align-items: flex-start; }
.why__check {
  width: 28px; height: 28px; border-radius: 6px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0; font-weight: 800; font-size: 14px;
}
.why__list strong { display: block; color: var(--navy); margin-bottom: 4px; font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.why__list span { font-size: 15px; color: var(--muted); line-height: 1.55; }

/* CREDENTIALS (replacing testimonials) */
.credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.credential {
  background: white; border: 1px solid var(--border); border-radius: 16px;
  padding: 40px; text-align: center; transition: all var(--t-base);
}
.credential:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(27, 58, 91, 0.08); border-color: var(--teal); }
.credential__icon {
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  display: flex; align-items: center; justify-content: center;
  color: white; margin: 0 auto 24px;
}
.credential__title { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 12px; letter-spacing: -0.015em; }
.credential__desc { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* CONTACT GRAPHIC (before credentials section) */
.contact-cta-section { padding: 40px 0 80px; }
.contact-cta {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-radius: 24px; padding: 60px 80px;
  position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;
}
.contact-cta::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
  border-radius: 50%;
}
.contact-cta::after {
  content: ''; position: absolute; bottom: -150px; left: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
  border-radius: 50%;
}
.contact-cta__content { position: relative; }
.contact-cta__content h2 {
  font-size: clamp(36px, 4vw, 48px); color: white; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 16px;
}
.contact-cta__content p { color: rgba(255,255,255,0.9); font-size: 17px; line-height: 1.55; }
.contact-cta__info { position: relative; display: flex; flex-direction: column; gap: 16px; }
.contact-cta__item {
  display: flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  padding: 16px 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
}
.contact-cta__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: white; display: flex; align-items: center;
  justify-content: center; color: var(--teal-dark); flex-shrink: 0;
}
.contact-cta__label { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.contact-cta__value { color: white; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.contact-cta__value a { color: white; text-decoration: none; }

/* BOTTOM CTA */
.cta-section { padding: 80px 0; }
.cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 24px; padding: 80px;
  position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto;
}
.cta::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(43, 191, 177, 0.25), transparent 60%);
  border-radius: 50%;
}
.cta::after {
  content: ''; position: absolute; bottom: -150px; left: -150px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(43, 191, 177, 0.15), transparent 60%);
  border-radius: 50%;
}
.cta__inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }
.cta h2 { font-size: 48px; line-height: 1.05; color: white; font-weight: 800; letter-spacing: -0.032em; margin-bottom: 20px; }
.cta h2 span { color: var(--teal); }
.cta p { color: rgba(255, 255, 255, 0.75); font-size: 17px; line-height: 1.6; }
.cta__actions { display: flex; flex-direction: column; gap: 14px; }

/* FOOTER */
.footer { background: var(--navy-deep); color: white; padding: 100px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px; margin-bottom: 64px; }
.footer__logo { height: 56px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.footer__tagline { color: rgba(255, 255, 255, 0.6); font-size: 15px; max-width: 320px; line-height: 1.6; }
.footer__col h4 { color: white; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 20px; font-weight: 700; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  color: rgba(255, 255, 255, 0.6); font-size: 15px; text-decoration: none;
  transition: color var(--t-fast); cursor: pointer;
  background: none; border: none; font-family: inherit; text-align: left; padding: 0;
}
.footer__col a:hover { color: var(--teal); }
.footer__bottom {
  padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between;
  color: rgba(255, 255, 255, 0.4); font-size: 13px;
}

/* PAGEHEAD — clean, warm, unified across all pages */
.pagehead {
  margin-top: -76px;
  padding: 176px 0 56px;
  background: #ffffff;
  position: relative;
}
.pagehead__inner { position: relative; z-index: 2; }
.pagehead__eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal-dark);
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 18px;
}
.pagehead h1 {
  font-size: clamp(40px, 5.5vw, 68px); line-height: 1.04; letter-spacing: -0.035em;
  color: var(--navy-deep); font-weight: 800; max-width: 820px; margin-bottom: 22px;
}
.pagehead h1 span { color: var(--teal-dark); }
.pagehead p { font-size: 19px; color: var(--muted); max-width: 620px; line-height: 1.6; }

/* Decorative header artwork removed for a warmer, less synthetic feel */
.pagehead--subjects .floating-icons,
.pagehead--book::before, .pagehead--book::after,
.pagehead--contact::before, .pagehead--contact::after { display: none; content: none; }

.pagehead--billboard {
  margin-top: -76px;
  padding: 60px 0 0;
  background: #ffffff;
  overflow: hidden;
}
.pagehead--billboard img {
  display: block; width: auto; max-width: 55%; max-height: 44vh; margin: 0 auto;
}

/* STORY SHOWCASE — large panel that shrinks + pins on scroll.
   Pin is driven by JS (fixed/absolute) because body has overflow-x:hidden,
   which makes body the scroll container and breaks position:sticky. */
.story {
  position: relative;
  height: 160vh;          /* fallback; real height set by JS */
  margin-top: -76px;      /* tuck under the transparent header */
  background: #ffffff;
}
.story__panel {
  --p: 0;
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
  z-index: 1;             /* stays below the fixed nav (z-index 1000) */
  overflow: hidden;
  background: var(--navy-deep);
  width: calc(100% - (100% - var(--maxw)) * var(--p));
  height: 100vh;          /* height/top updated by JS on scroll */
  border-radius: calc(34px * var(--p));
  box-shadow: 0 calc(40px * var(--p)) calc(90px * var(--p)) rgba(16,35,56,calc(0.22 * var(--p)));
  transform: scale(calc(1 - var(--p) * 0.06));
  transform-origin: top center;
  will-change: width, height, top, transform;
}
.story__slides { position: absolute; inset: 0; }
.story__slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.05fr 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.story__slide.is-active { opacity: 1; visibility: visible; }
.story__media { position: relative; overflow: hidden; }
.story__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.04);
}
.story__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,35,56,0) 55%, var(--navy-deep) 100%);
}
.story__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(36px, 5vw, 84px);
  padding-right: clamp(40px, 6vw, 110px);
}
.story__step {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 22px;
}
.story__text p {
  font-size: clamp(22px, 2.5vw, 36px); line-height: 1.34; font-weight: 500;
  color: #ffffff; letter-spacing: -0.01em; max-width: 18em;
}
.story__dots {
  position: absolute; z-index: 4;
  bottom: clamp(28px, 4vh, 48px); left: clamp(28px, 4vw, 56px);
  display: flex; gap: 12px;
}
.story__dot {
  width: 38px; height: 5px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.28); transition: background .3s var(--ease), width .3s var(--ease);
}
.story__dot:hover { background: rgba(255,255,255,0.5); }
.story__dot.is-active { background: var(--teal); width: 56px; }

/* Prev / next arrows */
.story__arrow {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.story__arrow:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); }
.story__arrow:active { transform: translateY(-50%) scale(0.94); }
.story__arrow--prev { left: clamp(16px, 2.2vw, 30px); }
.story__arrow--next { right: clamp(16px, 2.2vw, 30px); }

/* Scroll-down prompt */
.story__scroll {
  position: absolute; z-index: 4; left: 50%; bottom: clamp(22px, 3.4vh, 40px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #ffffff; pointer-events: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: calc(1 - var(--p) * 3);              /* fades out as the panel shrinks */
}
.story__scroll svg { animation: storyScrollBob 1.6s var(--ease) infinite; }
@keyframes storyScrollBob {
  0%, 100% { transform: translateY(-3px); opacity: 0.55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .story__scroll svg { animation: none; }
}

@media (max-width: 760px) {
  /* Phone: full-screen panel — image on top, text on bottom — that shrinks
     into a rounded box on scroll (JS drives height/--p; width fixed below). */
  .story__slide { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .story__media::after { background: linear-gradient(180deg, rgba(16,35,56,0) 46%, var(--navy-deep) 100%); }
  .story__text { padding: clamp(22px, 6vw, 36px); justify-content: flex-start; padding-top: clamp(20px, 5vw, 32px); }
  .story__text p { font-size: clamp(19px, 5.4vw, 25px); }

  /* Fix the shrink width: the desktop calc grows the panel wider than a phone
     viewport (since 100% < --maxw). Shrink to a tidy 16px-margin rounded box. */
  .story__panel {
    width: calc(100% - 32px * var(--p));
    /* A blurred shadow recalculated every scroll frame is the single biggest
       paint cost in this effect — swap the animated blur for a flat, constant
       shadow on phones so scrolling stays smooth. It's invisible at p=0
       anyway (the panel is edge-to-edge full screen then), and still reads
       fine once it shrinks into the rounded card. */
    box-shadow: 0 18px 40px rgba(16,35,56,0.18);
  }

  /* Slideshow arrows: smaller, and lifted to sit over the image (top 46%)
     so they don't collide with the step label / body text below. */
  .story__arrow { width: 44px; height: 44px; top: 23%; }

  .about-principles-section { padding-top: 24px !important; }
  .about-principles-section .section__head { margin-top: 0 !important; }
}

/* LEGAL (Privacy Policy / Terms and Conditions) — long-form prose */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-size: 24px; color: var(--navy-deep); font-weight: 800; letter-spacing: -0.02em; margin: 48px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 16.5px; color: var(--ink); line-height: 1.75; margin-bottom: 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { font-size: 16.5px; color: var(--ink); line-height: 1.7; margin-bottom: 8px; }
.legal strong { color: var(--navy); font-weight: 700; }
.legal a { color: var(--cyan-dark); font-weight: 600; text-decoration: underline; }
.legal a:hover { color: var(--cyan); }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; margin-bottom: 100px; }
.about-grid > div > p { font-size: 17px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.about-grid h2 { font-size: 28px; color: var(--navy); margin-bottom: 16px; font-weight: 800; letter-spacing: -0.02em; }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value {
  padding: 40px 32px; border-radius: 16px; background: white;
  border: 1px solid var(--border); transition: all var(--t-base);
}
.value:hover { box-shadow: 0 20px 40px rgba(27, 58, 91, 0.08); transform: translateY(-2px); border-color: transparent; }
.value__num { font-size: 14px; font-weight: 800; color: var(--teal-dark); margin-bottom: 16px; letter-spacing: 0.1em; }
.value h3 { font-size: 22px; color: var(--navy); margin-bottom: 12px; font-weight: 700; letter-spacing: -0.015em; }
.value p { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* FOUNDERS */
.founders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.founder {
  background: white; border: 1px solid var(--border); border-radius: 16px;
  padding: 0; overflow: hidden; transition: all var(--t-base);
}
.founder:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(27, 58, 91, 0.08); }
.founder__photo {
  aspect-ratio: 1; width: 100%;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.founder__photo::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(43, 191, 177, 0.3), transparent 60%);
}
.founder__initials {
  position: relative; font-size: 64px; font-weight: 800;
  color: white; letter-spacing: -0.03em; opacity: 0.9;
}
.founder__body { padding: 32px; }
.founder__name { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 4px; letter-spacing: -0.02em; }
.founder__role { font-size: 14px; color: var(--teal-dark); font-weight: 600; margin-bottom: 16px; letter-spacing: 0.02em; }
.founder__degree {
  font-size: 13px; color: var(--muted); background: var(--soft);
  padding: 6px 10px; border-radius: 6px; display: inline-block;
  margin-bottom: 16px; font-weight: 600;
}
.founder__bio { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* SUBJECTS — grouped and color-coded */
.subjects-group { margin-bottom: 64px; }
.subjects-group__header {
  display: flex; align-items: center; gap: 20px; margin-bottom: 32px;
  padding-bottom: 20px; border-bottom: 2px solid var(--border);
}
.subjects-group__label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.15em;
  padding: 8px 14px; border-radius: 6px; text-transform: uppercase; color: white;
}
.subjects-group__title { font-size: 28px; color: var(--navy-deep); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.subjects-group--7-10 .subjects-group__label { background: var(--navy); }
.subjects-group--atar .subjects-group__label { background: var(--teal-dark); }

.subjects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.subjects--atar { grid-template-columns: repeat(3, 1fr); }

.subject {
  padding: 32px; border-radius: 16px; border: 1px solid var(--border);
  background: white; display: flex; gap: 20px; align-items: flex-start;
  transition: all var(--t-base); position: relative; overflow: hidden;
}
.subject::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--subject-color, var(--teal));
  transform: scaleY(0); transform-origin: top; transition: transform var(--t-base);
}
.subject:hover::before { transform: scaleY(1); }
.subject:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(27, 58, 91, 0.08); }
.subject__icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--subject-bg, var(--soft));
  color: var(--subject-color, var(--navy));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--t-base);
}
.subject:hover .subject__icon { background: var(--subject-color, var(--teal)); color: white; }
.subject h3 { font-size: 18px; color: var(--navy); margin-bottom: 4px; font-weight: 700; letter-spacing: -0.015em; }
.subject p { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Subject category backgrounds */
.subject--math { --subject-color: var(--cat-math); --subject-bg: rgba(99, 102, 241, 0.1); }
.subject--science { --subject-color: var(--cat-science); --subject-bg: rgba(16, 185, 129, 0.1); }
.subject--humanities { --subject-color: var(--cat-humanities); --subject-bg: rgba(245, 158, 11, 0.1); }
.subject--commerce { --subject-color: var(--cat-commerce); --subject-bg: rgba(236, 72, 153, 0.1); }

/* FRIENDLY "DON'T SEE A SUBJECT" CARD */
.ask-card {
  background: #FFF6EA;
  border: 2px solid #FFD580;
  border-radius: 24px; padding: 56px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center;
  margin-top: 96px;
  position: relative; overflow: hidden;
}
.ask-card__visual {
  width: 140px; height: 140px; background: white;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 64px;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
  margin: 0 auto;
}
.ask-card__content h3 {
  font-size: 32px; color: var(--navy-deep); font-weight: 800;
  letter-spacing: -0.025em; margin-bottom: 12px; line-height: 1.1;
}
.ask-card__content p { color: var(--ink); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.ask-card .btn { background: #F59E0B; color: white; }
.ask-card .btn:hover { background: #D97706; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245, 158, 11, 0.35); }

/* PRICING */
.pricing-tabs {
  display: inline-flex; background: var(--soft); padding: 6px;
  border-radius: 10px; margin-bottom: 48px; border: 1px solid var(--border);
}
.pricing-tab {
  padding: 10px 24px; font-size: 14px; font-weight: 700; color: var(--muted);
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; transition: all var(--t-fast); font-family: inherit; letter-spacing: -0.01em;
}
.pricing-tab.active { background: white; color: var(--navy); box-shadow: 0 2px 8px rgba(27, 58, 91, 0.08); }
.pricing-intro { text-align: center; }

/* Pricing — subject list with inline prices, no buttons */
.pricing-panel { max-width: 900px; margin: 0 auto; }
.pricing-panel__intro {
  text-align: center; margin-bottom: 48px; padding: 32px;
  background: var(--soft); border-radius: 16px; border: 1px solid var(--border);
}
.pricing-panel__title { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.02em; }
.pricing-panel__subtitle { font-size: 15px; color: var(--muted); }

.price-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.price-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px;
  align-items: center;
  padding: 24px 32px; background: white; border: 1px solid var(--border);
  border-radius: 12px; transition: all var(--t-base);
}
.price-item:hover { border-color: var(--teal); transform: translateX(4px); box-shadow: 0 10px 24px rgba(27, 58, 91, 0.06); }
.price-item__icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--subject-bg, var(--soft)); color: var(--subject-color, var(--navy));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.price-item__info h4 { font-size: 17px; color: var(--navy); font-weight: 700; margin-bottom: 2px; letter-spacing: -0.01em; }
.price-item__info p { font-size: 14px; color: var(--muted); }
.price-item__rates { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.price-item__rate { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.price-item__rate strong { color: var(--navy-deep); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.price-item__rate-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-dark); font-weight: 700; padding: 2px 8px; background: rgba(43, 191, 177, 0.1); border-radius: 4px; margin-left: 4px; }

/* TRIAL BOX ON PRICING PAGE */
.trial-box {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: white; border-radius: 16px; padding: 48px 40px;
  max-width: 700px; margin: 0 auto 48px; text-align: center;
  box-shadow: 0 20px 50px rgba(43, 191, 177, 0.25);
}
.trial-box__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2); padding: 6px 14px;
  border-radius: 4px; margin-bottom: 20px;
}
.trial-box h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; color: white; }
.trial-box p { font-size: 17px; color: rgba(255, 255, 255, 0.9); margin-bottom: 28px; line-height: 1.5; }

.price-note { text-align: center; margin-top: 40px; color: var(--muted); font-size: 14.5px; }

/* BOOK */
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.book-grid > * { min-width: 0; }
.book-info h2 { font-size: 32px; color: var(--navy-deep); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 20px; line-height: 1.1; }
.book-info > p { font-size: 17px; color: var(--muted); line-height: 1.65; margin-bottom: 36px; }
.book-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 28px; }
.book-steps li { display: flex; gap: 20px; counter-increment: step; }
.book-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 18px; font-weight: 800; color: var(--teal-dark);
  flex-shrink: 0; width: 36px; letter-spacing: -0.02em;
}
.book-steps strong { display: block; color: var(--navy); font-weight: 700; margin-bottom: 4px; font-size: 16.5px; letter-spacing: -0.01em; }
.book-steps span { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* FORM */
.form-card { background: #ffffff; border: 1px solid var(--line); border-radius: 16px; padding: 40px; box-shadow: 0 4px 32px rgba(16,35,56,0.08), 0 1px 4px rgba(16,35,56,0.04); }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 700; color: var(--navy);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.1em;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: 8px; background: #ffffff; font-family: inherit;
  font-size: 15px; color: var(--ink); transition: border-color var(--t-fast);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--teal); }
.form-group textarea { resize: vertical; min-height: 100px; }
.email-suggest { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.email-suggest a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }
.email-suggest a:hover { color: var(--teal); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.secure-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 16px; justify-content: center; }
.stripe-badge { display: flex; align-items: center; gap: 8px; margin-top: 14px; justify-content: center; }

/* CONTINUE */
.continue-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.continue-section { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 36px; margin-bottom: 24px; }
.continue-section__title {
  display: flex; align-items: center; gap: 12px; font-size: 18px;
  font-weight: 800; color: var(--navy); margin-bottom: 24px; letter-spacing: -0.015em;
}
.continue-section__num {
  width: 28px; height: 28px; border-radius: 8px; background: var(--teal);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.order-summary {
  background: var(--navy-deep); color: white; border-radius: 16px;
  padding: 36px; position: sticky; top: 100px;
}
.order-summary h3 { font-size: 20px; font-weight: 800; margin-bottom: 24px; letter-spacing: -0.02em; }
.order-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 15px; }
.order-row:last-of-type { border-bottom: none; }
.order-row span:first-child { color: rgba(255,255,255,0.7); }
.order-row span:last-child { color: white; font-weight: 600; }
.order-total {
  display: flex; justify-content: space-between; margin-top: 20px;
  padding-top: 20px; border-top: 2px solid rgba(255,255,255,0.15);
  font-size: 20px; font-weight: 800; letter-spacing: -0.015em;
}
.order-total span:last-child { color: var(--teal); }
.order-promise {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 10px;
}
.order-promise-item { display: flex; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.7); align-items: center; }
.order-promise-item::before { content: '✓'; color: var(--teal); font-weight: 800; }
.card-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.session-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.session-option {
  border: 2px solid var(--border); border-radius: 10px; padding: 16px;
  cursor: pointer; transition: all var(--t-fast); background: white;
}
.session-option:hover { border-color: var(--teal); }
.session-option.selected { border-color: var(--teal); background: rgba(43, 191, 177, 0.05); }
.session-option__label { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.session-option__value { font-size: 17px; color: var(--navy); font-weight: 700; letter-spacing: -0.01em; }

/* CONTACT */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-items { display: flex; flex-direction: column; gap: 28px; margin-top: 40px; }
.contact-item { display: flex; gap: 18px; align-items: flex-start; }
.contact-item__icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-dark); flex-shrink: 0;
}
.contact-item strong { display: block; font-size: 13px; color: var(--navy); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.contact-item span, .contact-item a { color: var(--muted); font-size: 16px; text-decoration: none; line-height: 1.5; }

/* RESPONSIVE */
@media (max-width: 960px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__overlay { clip-path: polygon(0 0, 100% 0, 100% 65%, 0 75%); }
  .hero__left { padding: 60px 32px; min-height: 500px; }
  .hero__left-inner { max-width: 100%; padding: 0; margin: 0; }
  .hero__controls { bottom: 20px; right: 20px; }
  .why, .about-grid, .book-grid, .contact-grid, .cta__inner, .continue-layout, .form-row, .card-row, .contact-cta, .ask-card {
    grid-template-columns: 1fr; gap: 40px;
  }
  .card-row, .form-row { gap: 12px; }
  .services, .credentials, .values, .subjects, .subjects--atar, .footer__grid, .founders, .session-pick { grid-template-columns: 1fr; }
  .price-item { grid-template-columns: auto 1fr; }
  .price-item__rates { grid-column: 1 / -1; align-items: flex-start; margin-top: 8px; }
  .nav__toggle { display: flex; }
  @keyframes navItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .nav__links {
    position: fixed; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff;                                   /* light & opaque */
    padding: 14px 18px 20px;
    box-shadow: 0 22px 44px rgba(16, 35, 56, 0.13);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
  }
  .nav__links.open { transform: none; opacity: 1; pointer-events: auto; }

  /* clean links — no dividers, no arrows; soft cyan pill on active/hover */
  .nav__link {
    display: block; color: var(--navy); font-size: 18px; font-weight: 700;
    letter-spacing: -0.01em; padding: 13px 14px; border-radius: 12px;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .nav__link::after { display: none; }
  .nav__link:hover, .nav__link.active { background: var(--cyan-soft); color: var(--cyan-dark); }

  .nav__cta {
    margin-top: 10px; justify-content: center; padding: 15px;
    font-size: 16px; background: var(--cyan); color: var(--navy-deep);
  }

  /* gentle staggered fade-in (the bit of fun) */
  .nav__links.open > * { animation: navItemIn 0.4s var(--ease) both; }
  .nav__links.open > *:nth-child(1) { animation-delay: 0.04s; }
  .nav__links.open > *:nth-child(2) { animation-delay: 0.08s; }
  .nav__links.open > *:nth-child(3) { animation-delay: 0.12s; }
  .nav__links.open > *:nth-child(4) { animation-delay: 0.16s; }
  .nav__links.open > *:nth-child(5) { animation-delay: 0.20s; }
  .nav__links.open > *:nth-child(6) { animation-delay: 0.24s; }
  .section { padding: 80px 0; }
  .cta, .contact-cta, .ask-card { padding: 48px 32px; }
}

/* ── Polish: accessible keyboard focus + CTA depth ───────────── */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav__cta { box-shadow: 0 6px 18px rgba(43, 191, 177, 0.25); }
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(43, 191, 177, 0.35); }

/* ============================================================
   PRICING — intuitive two-tier layout (redesigned)
   ============================================================ */
.pagehead--pricing {
  background: #ffffff; padding-top: 140px; padding-bottom: 120px;
}
@media (max-width: 760px) {
  .pagehead--pricing { padding-top: 92px; padding-bottom: 100px; }
}

/* Grey starts exactly at the box midpoint (87px = half of the measured 174px mobile box height).
   This bisects the "Start here" box without any negative-margin stacking tricks. */
.section.section--pricing {
  background: linear-gradient(to bottom, #ffffff 87px, #F2F3F5 87px);
  padding-top: 0;
}
@media (min-width: 761px) {
  .section.section--pricing { background: linear-gradient(to bottom, #ffffff 62px, #F2F3F5 62px); }
}

.price-reassure {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #F2F0FE; border: 1px solid #DCD8FB;
  border-radius: 16px; padding: 22px 28px; margin-bottom: 44px;
}
.price-reassure__tag {
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #5B45D6; background: white; border-radius: 100px; padding: 7px 15px; flex-shrink: 0;
}
.price-reassure p { font-size: 16.5px; color: var(--ink); line-height: 1.55; }
.price-reassure strong { color: var(--navy); font-weight: 800; }

.price-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.tier {
  position: relative; background: #ffffff; border: 1px solid var(--line);
  border-radius: 20px; padding: 40px; transition: transform var(--t-base), box-shadow var(--t-base);
  box-shadow: 0 4px 32px rgba(16,35,56,0.07), 0 1px 4px rgba(16,35,56,0.04);
}
.tier:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 28px 56px rgba(27,58,91,0.13); }
.tier--featured { border-color: var(--teal); box-shadow: 0 24px 50px rgba(43,191,177,0.12); }
.tier__badge {
  position: absolute; top: -13px; left: 40px; background: var(--teal); color: white;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px;
}
.tier__level { font-size: 30px; font-weight: 800; color: var(--navy-deep); letter-spacing: -0.02em; }
.tier__desc { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
.tier__rates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.tier__rate {
  background: var(--soft); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--t-fast), box-shadow var(--t-base), border-color var(--t-fast), background var(--t-fast);
}
.tier__rate:hover {
  transform: translateY(-3px); background: #ffffff; border-color: var(--teal);
  box-shadow: 0 12px 28px rgba(27,58,91,0.10);
}
.tier__amount { font-size: 34px; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; line-height: 1; transition: color var(--t-fast); }
.tier__rate:hover .tier__amount { color: var(--teal-dark); }
.tier__amount span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.tier__mode { font-size: 14px; font-weight: 600; color: var(--muted); }
.tier__subjects-label {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal-dark); margin-bottom: 14px;
}
.tier__subjects ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tier__subjects li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--navy);
  background: var(--soft); border: 1px solid var(--c, var(--border));
  padding: 8px 14px 8px 12px; border-radius: 100px; cursor: default;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-base);
}
.tier__subjects li:hover {
  transform: translateY(-2px); background: var(--c, var(--teal)); color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c, var(--teal)) 35%, transparent);
}
.tier__subjects li::before {
  content: ''; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--muted)); transition: background var(--t-fast), transform var(--t-fast);
}
.tier__subjects li:hover::before { background: #fff; transform: scale(1.15); }
/* Subject colour coding */
.tier__subjects li.t-math     { --c: var(--cat-math); }
.tier__subjects li.t-science  { --c: var(--cat-science); }
.tier__subjects li.t-hum      { --c: var(--cat-humanities); }
.tier__subjects li.t-commerce { --c: var(--cat-commerce); }
.price-note { text-align: center; color: var(--muted); font-size: 15px; margin-top: 40px; }
.price-cta { margin-top: 44px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.price-cta p { font-size: 21px; font-weight: 800; color: var(--navy-deep); letter-spacing: -0.02em; }

@media (max-width: 768px) {
  .price-tiers { grid-template-columns: 1fr; }
  .tier { padding: 32px 24px; }
}

/* ============================================================
   v8 DESIGN TURNAROUND — elevated system + home components
   (appended last so it refines the base rules above)
   ============================================================ */
body { color: var(--body); }
.container { max-width: var(--maxw); }
::selection { background: var(--cyan); color: var(--navy-deep); }

/* Display typography */
.hero__title, .section__title, .why__content h2, .cta-band h2,
.contact-band h2, .pagehead h1 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* ---------- NAV ---------- */
.nav { height: 76px; background: rgba(255,255,255,0.82); border-bottom: 1px solid transparent; transition: box-shadow var(--t-base), border-color var(--t-base), background var(--t-base); }
.nav.is-scrolled { background: rgba(255,255,255,0.9); border-bottom-color: var(--border); box-shadow: 0 6px 24px rgba(16,35,56,0.06); }
.nav__inner { max-width: var(--maxw); height: 100%; gap: 36px; }
.nav__logo { height: 44px; }
.nav__links { gap: 30px; }
.nav__link { color: var(--navy); font-size: 15px; font-weight: 600; opacity: 0.78; }
.nav__link:hover, .nav__link.active { opacity: 1; color: var(--navy); }
.nav__link::after { height: 2px; background: var(--cyan); bottom: -3px; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--cyan); color: var(--navy-deep); padding: 11px 20px;
  border-radius: 10px; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: 0 8px 20px rgba(46,196,214,0.28); transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-fast);
}
.nav__cta:hover { transform: translateY(-2px); background: #28b2c3; box-shadow: 0 12px 26px rgba(46,196,214,0.4); }
main { padding-top: 76px; }

/* ---------- BUTTONS ---------- */
.btn { gap: 9px; border-radius: 12px; font-weight: 800; letter-spacing: -0.01em; padding: 14px 26px; }
.btn--lg { padding: 17px 34px; font-size: 16.5px; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--cyan { background: var(--cyan); color: var(--navy-deep); box-shadow: 0 10px 24px rgba(46,196,214,0.3); }
.btn--cyan:hover { background: #28b2c3; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(46,196,214,0.42); }
.btn--ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--border); }
.btn--ghost:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--glass { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.5); backdrop-filter: blur(4px); }
.btn--glass:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); }
.btn--outline-white { border-width: 1.5px; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: calc(100vh - 76px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s var(--ease); transform: scale(1.04); }
.hero__slide.active { opacity: 1; }
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(16,35,56,0.93) 0%, rgba(16,35,56,0.82) 38%, rgba(16,35,56,0.36) 70%, rgba(16,35,56,0.15) 100%),
    linear-gradient(180deg, rgba(16,35,56,0.2), rgba(16,35,56,0.45));
}
.hero__inner { position: relative; padding: 64px 32px; max-width: var(--maxw); width: 100%; }
.hero__eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(46,196,214,0.18); border: 1px solid rgba(46,196,214,0.4); padding: 7px 16px; border-radius: 100px; margin-bottom: 26px; }
.hero__title { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; color: #fff; max-width: 16ch; margin-bottom: 22px; }
.hero__lead { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; color: rgba(255,255,255,0.9); max-width: 50ch; margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.16); }
.hero__trust li { display: flex; flex-direction: column; gap: 2px; }
.hero__trust strong { color: #fff; font-size: 16px; font-weight: 800; }
.hero__trust span { color: rgba(255,255,255,0.62); font-size: 13.5px; }
.hero__controls { position: absolute; bottom: 28px; right: 32px; display: flex; gap: 10px; z-index: 2; }
.hero__dot { width: 30px; height: 4px; border-radius: 4px; border: none; padding: 0; background: rgba(255,255,255,0.4); cursor: pointer; transition: background var(--t-fast), width var(--t-base); }
.hero__dot.active { background: var(--cyan); width: 42px; }

/* ---------- STATS STRIP ---------- */
.stats { background: var(--navy-deep); color: #fff; }
.stats__inner { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 36px 32px; }
.stat { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.stat__num { font-family: var(--font); font-weight: 800; font-size: clamp(26px,3vw,36px); color: var(--cyan); line-height: 1; letter-spacing: -0.02em; }
.stat__label { font-size: 13.5px; color: rgba(255,255,255,0.66); font-weight: 500; }

/* ---------- SECTION RHYTHM ---------- */
.section { padding: 140px 0; }
.section--soft { background: #F2F3F5; }
.section__title { font-size: clamp(32px, 4.2vw, 50px); color: var(--navy-deep); }
.section__eyebrow { color: var(--cyan-dark); }

/* ---------- SERVICE CARDS (elevate) ---------- */
.service { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-sm); }
.service:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.service::before { background: var(--cyan); height: 4px; }
.service__icon { background: linear-gradient(135deg, var(--navy), var(--navy-light)); border-radius: 14px; }
.service__price { color: var(--navy); }
.service__features li::before { content: '✓'; color: var(--cyan-dark); }

/* ---------- SUBJECT GRID ---------- */
.subj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.subj { --accent: var(--cyan-dark); position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.subj::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--t-base); }
.subj:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.subj:hover::after { transform: scaleY(1); }
.subj__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--accent); margin-bottom: 22px; }
.subj h3 { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 8px; }
.subj p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin-bottom: 22px; flex: 1; }
.subj__go { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 7px; align-items: center; }
.subj--math { --accent: var(--cat-math); }
.subj--science { --accent: var(--cat-science); }
.subj--humanities { --accent: var(--cat-humanities); }
.subj--commerce { --accent: var(--cat-commerce); }
.subj--all { --accent: var(--navy); background: var(--navy); border-color: var(--navy); }
.subj--all h3, .subj--all p { color: #fff; }
.subj--all p { color: rgba(255,255,255,0.7); }
.subj--all .subj__icon { background: rgba(255,255,255,0.14); }
.subj--all .subj__go { color: var(--cyan); }
.subj--all::after { background: var(--cyan); }

/* ===================== SUBJECT CONSTELLATION ===================== */
.constellation { margin-top: 8px; }
.constellation__stage {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(450px, 54vw, 630px);
  overflow: visible;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.constellation__stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.constellation__cta {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.constellation__cta span { transition: transform var(--t-fast); }
.constellation__cta:hover { background: var(--cyan-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.constellation__cta:hover span { transform: translateX(4px); }
.constellation__hint {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Fallback list — shown only when JS is unavailable */
.constellation__fallback { list-style: none; margin: 18px 0 0; padding: 0; }
.constellation__fallback li { font-size: 15px; color: var(--body); padding: 7px 0; border-top: 1px solid var(--line); }
.constellation__fallback li:first-child { border-top: 0; }
.constellation__fallback strong { color: var(--navy); }
.constellation__fallback a { color: var(--cyan-dark); font-weight: 700; text-decoration: none; }
html.js .constellation__fallback { display: none; }

@media (max-width: 700px) {
  .constellation__stage { height: clamp(400px, 104vw, 520px); }
  .constellation__hint { font-size: 11px; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .constellation__hint { display: none; }
}

/* ---------- STEPS ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; counter-reset: s; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px; box-shadow: var(--shadow-sm); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--cyan-soft); color: var(--cyan-dark); font-weight: 800; font-size: 18px; margin-bottom: 20px; }
.step h3 { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.015em; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* Progressive colour gradient across step badges */
.steps .step:nth-child(1) .step__num { background: rgba(46,196,214,0.18); color: #2EC4D6; }
.steps .step:nth-child(2) .step__num { background: rgba(56,130,210,0.18); color: #3882D2; }
.steps .step:nth-child(3) .step__num { background: rgba(79,86,210,0.18);  color: #4F56D2; }
.steps .step:nth-child(4) .step__num { background: rgba(124,58,210,0.18); color: #7C3AD2; }

/* ---------- WHY + STUDY-PLAN CARD ---------- */
.why { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.why__visual { display: flex; justify-content: center; }
.plancard { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px; }
.plancard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.plancard__tag { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-dark); background: var(--cyan-soft); padding: 6px 12px; border-radius: 100px; }
.plancard__subject { font-size: 14px; font-weight: 700; color: var(--navy); }
.plancard__steps { list-style: none; display: flex; flex-direction: column; gap: 0; margin-bottom: 26px; }
.plancard__steps li { position: relative; display: flex; gap: 16px; padding: 12px 0; }
.plancard__steps li::before { content: ''; position: absolute; left: 8px; top: 28px; bottom: -12px; width: 2px; background: var(--border); }
.plancard__steps li:last-child::before { display: none; }
.plancard__dot { position: relative; z-index: 1; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: #fff; margin-top: 3px; }
.plancard__steps .is-done .plancard__dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.plancard__steps .is-done::before { background: var(--cyan); }
.plancard__steps .is-active .plancard__dot { border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 4px var(--cyan-soft); }
.plancard__steps strong { display: block; font-size: 15px; color: var(--navy); font-weight: 700; }
.plancard__steps em { font-style: normal; font-size: 13px; color: var(--muted); }
.plancard__steps li:not(.is-done):not(.is-active) strong { color: var(--muted); }
.plancard__progress { height: 8px; border-radius: 100px; background: var(--softer); overflow: hidden; margin-bottom: 12px; }
.plancard__bar { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--cyan), var(--cyan-dark)); }
.plancard__foot { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.plancard__foot strong { color: var(--navy); font-weight: 800; }
.why__content h2 { font-size: clamp(30px,3.6vw,44px); color: var(--navy-deep); line-height: 1.08; margin: 14px 0 20px; }
.why__content h2 span { color: var(--cyan-dark); }
.why__content > p { font-size: 17px; color: var(--body); line-height: 1.65; margin-bottom: 32px; }
/* The two "Our approach" paragraphs read as one continuous thought — trim
   the gap between them to a single line instead of a full paragraph break. */
.why__content > p:first-of-type { margin-bottom: 1.65em; }
.why__list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.why__list li { display: flex; gap: 15px; align-items: flex-start; }
.why__check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--cyan); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.why__list strong { display: block; color: var(--navy); font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.why__list span { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- CREDENTIALS (elevate) ---------- */
.credentials { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.credential { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 32px; box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base); }
.credential:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.credential__icon { width: 58px; height: 58px; border-radius: 15px; background: var(--cyan-soft); color: var(--cyan-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.credential__title { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.015em; margin-bottom: 10px; }
.credential__desc { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* ---------- CONTACT BAND ---------- */
.contact-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 52px; box-shadow: var(--shadow-sm); }
.contact-band h2 { font-size: clamp(26px,3vw,38px); color: var(--navy-deep); line-height: 1.1; margin: 12px 0 14px; }
.contact-band h2 span { color: var(--cyan-dark); }
.contact-band__content > p { color: var(--body); font-size: 16.5px; line-height: 1.6; margin-bottom: 26px; }
.contact-band__info { display: flex; flex-direction: column; gap: 12px; }
.contact-tile { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--border); text-decoration: none; min-width: 0; transition: transform var(--t-fast), box-shadow var(--t-base), border-color var(--t-base); }
a.contact-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--cyan); }
.contact-tile__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border); color: var(--cyan-dark); display: flex; align-items: center; justify-content: center; }
.contact-tile > span:last-child { min-width: 0; }
.contact-tile__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.contact-tile__value { display: block; font-size: 16px; color: var(--navy); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- FINAL CTA BAND ---------- */
.cta-band { background: linear-gradient(120deg, var(--navy-deep), var(--navy)); padding: 104px 0; position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(46,196,214,0.32), transparent 65%); pointer-events: none; }
.cta-band__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; position: relative; }
.cta-band h2 { font-size: clamp(30px,3.6vw,46px); color: #fff; line-height: 1.05; margin-bottom: 14px; position: relative; }
.cta-band h2 span { color: var(--cyan); }
.cta-band p { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.6; position: relative; }
.cta-band__actions { display: flex; flex-direction: column; gap: 14px; position: relative; }

/* ---------- FOOTER ---------- */
.footer { background: var(--navy-deep); padding: 80px 0 36px; }
.footer__inner { max-width: var(--maxw); }
.footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
.footer__logo { height: 46px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer__tagline { margin-bottom: 24px; }
.footer__cta { display: inline-flex; }
.footer__col h4 { color: #fff; }
.footer__col a { color: rgba(255,255,255,0.62); }
.footer__col a:hover { color: var(--cyan); }
.footer__contact span { color: rgba(255,255,255,0.62); font-size: 15px; }

/* ---------- REVEAL ON SCROLL ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .subj-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .why { grid-template-columns: 1fr; gap: 44px; }
  .why__visual { order: -1; }
  .contact-band { grid-template-columns: 1fr; gap: 36px; padding: 40px; }
  .cta-band__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .section { padding: 72px 0; }
  .stats__inner { grid-template-columns: repeat(2,1fr); gap: 28px 16px; }
  .services { grid-template-columns: 1fr; }
  .credentials { grid-template-columns: 1fr; }
  .subj-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero__inner { padding: 48px 22px; }
  .hero__controls { right: 20px; bottom: 20px; }
  .cta-band { padding: 36px 0 72px; }
  .contact-band { padding: 30px 22px; }
}

/* ============================================================
   v8.1 — mobile hide-on-scroll nav + entrance animations
   ============================================================ */
.nav { transition: transform var(--t-base), background var(--t-base), box-shadow var(--t-base), border-color var(--t-base); will-change: transform; }

/* Phones only: keep the bar opaque, and FADE the whole nav (logo + bar) on
   scroll-down instead of sliding it / letting the background go translucent.
   Desktop nav is unaffected. */
@media (max-width: 760px) {
  .nav {
    background: rgba(255, 255, 255, 0.97);   /* opaque — no see-through look */
    transition: opacity 0.5s var(--ease), background var(--t-base),
                box-shadow var(--t-base), border-color var(--t-base);
  }
  .nav.is-scrolled { background: #fff; }
  /* Scroll DOWN fades the whole nav (logo + bar) out slowly; scroll UP brings it back. */
  .nav.nav--hidden { opacity: 0; pointer-events: none; transform: none; box-shadow: none; }
}

/* Hero entrance — staggered on first paint (skipped if reduced motion) */
@media all { /* animations enabled on all devices (mobile + desktop) */
  @keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  html.js .hero__eyebrow,
  html.js .hero__title,
  html.js .hero__lead,
  html.js .hero__actions,
  html.js .hero__trust { opacity: 0; animation: heroIn 0.85s var(--ease) forwards; }
  html.js .hero__eyebrow { animation-delay: 0.10s; }
  html.js .hero__title   { animation-delay: 0.22s; }
  html.js .hero__lead    { animation-delay: 0.38s; }
  html.js .hero__actions { animation-delay: 0.54s; }
  html.js .hero__trust   { animation-delay: 0.68s; }
}

/* Staggered reveal for grid children (cascade instead of all-at-once) */
.stats__inner .stat:nth-child(2)        { transition-delay: 0.08s; }
.stats__inner .stat:nth-child(3)        { transition-delay: 0.16s; }
.stats__inner .stat:nth-child(4)        { transition-delay: 0.24s; }
.services .service:nth-child(2)         { transition-delay: 0.10s; }
.subj-grid .subj:nth-child(2)           { transition-delay: 0.06s; }
.subj-grid .subj:nth-child(3)           { transition-delay: 0.12s; }
.subj-grid .subj:nth-child(4)           { transition-delay: 0.18s; }
.subj-grid .subj:nth-child(5)           { transition-delay: 0.24s; }
.subj-grid .subj:nth-child(6)           { transition-delay: 0.30s; }
.steps .step:nth-child(2)               { transition-delay: 0.08s; }
.steps .step:nth-child(3)               { transition-delay: 0.16s; }
.steps .step:nth-child(4)               { transition-delay: 0.24s; }
.credentials .credential:nth-child(2)   { transition-delay: 0.08s; }
.credentials .credential:nth-child(3)   { transition-delay: 0.16s; }

/* A touch less initial scroll on phones */
@media (max-width: 760px) {
  .hero { min-height: 86vh; }
}

/* ============================================================
   v8.2 — richer scroll effects (HOME page)
   ============================================================ */
/* Hero media is oversized so the parallax shift never exposes edges */
.hero__media { top: -8%; height: 116%; bottom: auto; }
.hero__inner { will-change: transform, opacity; }

/* Directional reveal variants (driven by data-reveal="left|right|zoom") */
html.js [data-reveal="left"]  { transform: translateX(-46px); }
html.js [data-reveal="right"] { transform: translateX(46px); }
html.js [data-reveal="zoom"]  { transform: scale(0.92); }
/* Re-assert the visible state LAST so it wins over the variants above */
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Animated study-plan card: bar fills + steps check in as it scrolls in */
.plancard__bar { width: 62%; } /* fallback when JS/animation is unavailable */
@media all { /* animations enabled on all devices (mobile + desktop) */
  html.js .plancard__bar { width: 0; transition: width 1.5s var(--ease) 0.25s; }
  html.js .why__visual.is-visible .plancard__bar { width: 62%; }

  html.js .plancard__steps li { opacity: 0; transform: translateX(-12px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
  html.js .why__visual.is-visible .plancard__steps li { opacity: 1; transform: none; }
  html.js .why__visual.is-visible .plancard__steps li:nth-child(1) { transition-delay: 0.20s; }
  html.js .why__visual.is-visible .plancard__steps li:nth-child(2) { transition-delay: 0.36s; }
  html.js .why__visual.is-visible .plancard__steps li:nth-child(3) { transition-delay: 0.52s; }
  html.js .why__visual.is-visible .plancard__steps li:nth-child(4) { transition-delay: 0.68s; }
}

/* ============================================================
   v8.3 — MOBILE-ONLY layout pass (phones ≤ 760px)
   ============================================================ */
@media (max-width: 760px) {

  /* Kill stray lateral scrolling everywhere EXCEPT the designed scrollers below */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Shared scroller styling (hide scrollbars, momentum scroll) */
  .services, .subj-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services::-webkit-scrollbar, .subj-grid::-webkit-scrollbar { display: none; }
  /* Cards inside the horizontal scrollers should show immediately (no reveal-hide) */
  html.js .services [data-reveal],
  html.js .subj-grid [data-reveal] { opacity: 1; transform: none; }

  /* 1) "Two ways to learn" → horizontal swipe */
  .services { display: flex; gap: 14px; padding-bottom: 12px; }
  .services .service { flex: 0 0 78%; scroll-snap-align: start; }

  /* 2) "Subjects" → 2-row strip, horizontal swipe, ordered/colour-coded by type */
  .subj-grid {
    display: grid;
    grid-template-columns: none;            /* clear the desktop column tracks */
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 66%;
    gap: 14px;
    padding-bottom: 12px;
  }
  .subj { padding: 22px; scroll-snap-align: start; }
  .subj p { margin-bottom: 16px; }

  /* 3) "How it works" → compact rectangles (number left, text right) */
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px;
    align-items: center; text-align: left; padding: 16px 18px;
  }
  .step__num { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; width: 40px; height: 40px; font-size: 16px; }
  .step h3 { grid-column: 2; font-size: 16px; margin-bottom: 2px; }
  .step p  { grid-column: 2; font-size: 14px; }

  /* 4) Footer: clean, left-aligned. Logo on top, link groups in a tidy grid. */
  .footer { padding: 48px 0 28px; }
  .footer__inner { text-align: left; }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 30px 18px;
  }
  .footer__brand { grid-column: 1 / -1; }                 /* logo full-width on top */
  .footer__tagline { display: none; }                     /* declutter on phones */
  .footer__logo { height: 34px; width: auto; max-width: 60vw; margin-bottom: 0; }
  .footer__col { min-width: 0; }
  .footer__col h4 { margin-bottom: 14px; }
  .footer__grid > .footer__col:last-child { grid-column: 1 / -1; }  /* Contact full-width row */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   v8.4 — service pricing + card differentiation + subtle reveal
   ============================================================ */
/* Both cards identical: uniform navy icon + cyan top accent */
.services .service__icon { background: linear-gradient(135deg, var(--navy), var(--navy-light)); }
.services .service::before { background: var(--cyan); }
.services .service__features li::before { color: var(--cyan-dark); }

/* Pricing: its own contrasting palette colour (warm terracotta) */
.services .service__price,
.services .service__price-meta { color: #21B36B; font-weight: 700; }

/* Subtle reveal variant — gentler than the home page (Subjects page) */
html.js [data-reveal="subtle"] {
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

/* Subtle stagger for subject cards on the Subjects page */
.subjects .subject:nth-child(2) { transition-delay: 0.05s; }
.subjects .subject:nth-child(3) { transition-delay: 0.10s; }
.subjects .subject:nth-child(4) { transition-delay: 0.15s; }
.subjects .subject:nth-child(5) { transition-delay: 0.20s; }
.subjects .subject:nth-child(6) { transition-delay: 0.25s; }
.subjects .subject:nth-child(7) { transition-delay: 0.30s; }

/* (Per-card colour differentiation removed — both cards are uniform now;
   only the pricing uses the contrasting warm accent set above.) */

/* ============================================================
   v8.6 — About page "Our Principles" pop
   ============================================================ */
/* Pop reveal — scales in with a slight overshoot for energy */
html.js [data-reveal="pop"] {
  opacity: 0; transform: scale(0.9) translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.js [data-reveal="pop"].is-visible { opacity: 1; transform: none; }
.values [data-reveal]:nth-child(2) { transition-delay: 0.12s; }
.values [data-reveal]:nth-child(3) { transition-delay: 0.24s; }

/* Livelier principle cards */
.value { position: relative; overflow: hidden; }
.value::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-dark));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-base);
}
.value:hover::before { transform: scaleX(1); }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.value__num {
  font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -0.03em;
  color: var(--cyan); opacity: 0.9; margin-bottom: 14px;
  transition: transform var(--t-base), color var(--t-fast);
}
.value:hover .value__num { transform: scale(1.12); color: var(--cyan-dark); }

/* ============================================================
   v8.7 — form submit status messages
   ============================================================ */
.form-status { margin-top: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-success {
  color: #15795f; background: #E6F7F0; border: 1px solid #BFE9DA;
  padding: 12px 16px; border-radius: 12px;
}
.form-status.is-error {
  color: #B23B3B; background: #FCEDED; border: 1px solid #F3CFCF;
  padding: 12px 16px; border-radius: 12px;
}

/* ============================================================
   v8.8 — Booking: toggle + multiselect + session times
   ============================================================ */
.book-forms { width: 100%; min-width: 0; }

/* Segmented toggle between First Session / Continue */
.book-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--navy-deep); border: 1px solid var(--navy-deep);
  border-radius: 14px; padding: 5px; margin-bottom: 20px;
  min-width: 0;
}
.book-toggle__btn {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.55);
  padding: 12px 14px; border-radius: 10px; letter-spacing: -0.01em;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  min-width: 0; white-space: normal; text-align: center;
}
.book-toggle__btn.is-active { background: var(--teal); color: #fff; box-shadow: 0 2px 8px rgba(46,196,214,0.35); }
.book-toggle__btn:not(.is-active):hover { color: #fff; }

/* Panels */
.book-panel { display: none; }
.book-panel.is-active { display: block; animation: fadeIn 0.4s var(--ease); }
.panel-intro { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin-bottom: 22px; }
.label-hint { font-weight: 500; color: var(--muted); font-size: 13px; }

/* Multi-select dropdown */
.multiselect { position: relative; }
.multiselect__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 14px; font-family: inherit; font-size: 15px; color: var(--navy);
  cursor: pointer; text-align: left; transition: border-color var(--t-fast);
}
.multiselect__toggle:hover { border-color: var(--cyan); }
.multiselect.is-open .multiselect__toggle { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.multiselect__text { color: var(--muted); }
.multiselect.has-selection .multiselect__text { color: var(--navy); font-weight: 600; }
.multiselect__chev { transition: transform var(--t-fast); color: var(--muted); }
.multiselect.is-open .multiselect__chev { transform: rotate(180deg); }
.multiselect__menu {
  display: none; position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; max-height: 280px; overflow-y: auto;
}
.multiselect.is-open .multiselect__menu { display: block; }
.multiselect__menu label {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 8px; font-size: 14.5px; color: var(--navy); cursor: pointer;
}
.multiselect__menu label:hover { background: var(--soft); }
.multiselect__menu input { width: 17px; height: 17px; accent-color: var(--cyan-dark); }

/* Segmented radio (session type) */
/* two equal halves so a single white "thumb" can glide between them */
.segmented { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
/* the sliding highlight — sits behind the labels and eases across on switch */
.segmented::before {
  content: ''; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 6px); background: #fff; border-radius: 9px; box-shadow: var(--shadow-sm);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.segmented:has(.segmented__opt:last-child input:checked)::before { transform: translateX(calc(100% + 4px)); }
.segmented__opt { position: relative; z-index: 1; }
.segmented__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented__opt span {
  display: block; text-align: center; min-width: 9em; padding: 10px 20px; border-radius: 9px; font-size: 14.5px; font-weight: 700;
  white-space: nowrap; color: var(--muted); transition: color var(--t-fast);
}
.segmented__opt input:checked + span { color: var(--navy); }
.segmented__opt input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .segmented::before { transition: none; } }

/* Session time rows (one per subject) */
.session-times { display: flex; flex-direction: column; gap: 10px; }
.session-times__empty { color: var(--muted); font-size: 14px; font-style: italic; margin: 0; }
.time-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.time-row__subject { font-size: 14px; font-weight: 700; color: var(--navy); }
.time-row select {
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 10px; font-family: inherit; font-size: 14px; color: var(--navy);
}

/* Continue summary (prefilled details + rate) */
.continue-summary {
  margin-top: 18px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
  box-shadow: 0 6px 24px rgba(16,35,56,0.09);
}
.continue-summary h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan-dark); margin-bottom: 12px; }
.continue-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
.continue-summary__row:last-child { border-bottom: none; }
.continue-summary__row span:first-child { color: var(--muted); }
.continue-summary__row span:last-child { color: var(--navy); font-weight: 700; text-align: right; white-space: nowrap; }
/* Receipt line: subject + schedule + price */
.co-receipt-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px 18px; align-items: baseline; padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
.co-receipt-row .co-subj { color: var(--ink); }
.co-receipt-row .co-schedule { color: var(--muted); font-size: 13px; text-align: right; }
.co-receipt-row .co-price { color: var(--navy); font-weight: 700; text-align: right; white-space: nowrap; }
.co-receipt-row .co-price s { color: var(--muted); font-weight: 400; margin-right: 5px; }
.discount-row { display: flex; gap: 8px; margin-top: 14px; }
.discount-row input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; outline: none; text-transform: uppercase; letter-spacing: 0.05em; }
.discount-row input:focus { border-color: var(--teal); }
.discount-row .btn--ghost { border: 1.5px solid var(--border); background: #fff; color: var(--navy); font-size: 14px; padding: 10px 16px; border-radius: 10px; white-space: nowrap; }
.discount-row .btn--ghost:hover { border-color: var(--teal); color: var(--teal); }
.discount-msg { font-size: 13px; margin-top: 6px; min-height: 18px; }
.discount-msg.is-success { color: #1E9A6F; }
.discount-msg.is-error   { color: #C0392B; }

/* Apple Pay / Google Pay divider */
.express-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
.express-divider::before,
.express-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.express-divider span { font-size: 12px; color: var(--muted); white-space: nowrap; }

@media (max-width: 760px) {
  .time-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   PHONE "ZOOM OUT" — tighten the whole layout so more fits
   on screen (lighter padding + slightly smaller display type)
   ============================================================ */
@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .section { padding: 54px 0; }
  .section--soft { padding: 54px 0; }
  /* Extra clearance below the stats strip: this is where the header
     switches from the static hero bar to the hide-on-scroll wipe, so
     "What You Get" needs more breathing room above it than a normal
     section-to-section gap, or the wipe animation reads as glitchy
     right on top of the heading. */
  .stats + .section { padding-top: 135px; }

  .hero__inner { padding: 46px 22px; }
  .hero__eyebrow { font-size: 11.5px; margin-bottom: 16px; padding: 6px 13px; }
  .hero__title { font-size: clamp(30px, 8.2vw, 42px); margin-bottom: 16px; }
  .hero__lead { font-size: 15.5px; margin-bottom: 28px; }
  /* Keep "Book a Session" and "Explore subjects" side by side (book first)
     instead of wrapping to two rows — shrink to fit rather than growing to
     content width. */
  .hero__actions { gap: 10px; margin-bottom: 30px; flex-wrap: nowrap; }
  .hero__actions .btn { flex: 1 1 0; padding: 14px 12px; font-size: 13px; white-space: nowrap; justify-content: center; }
  .hero__trust { gap: 12px 28px; padding-top: 20px; }

  .section__title { font-size: clamp(23px, 6.6vw, 31px); }
  .section__subtitle { font-size: 15px; }
  .section__eyebrow { font-size: 11px; }

  /* secondary headings across the page */
  .why__content h2, .cta-band h2, .credentials h2, .how h2,
  .contact-band h2, .section__head h2 { font-size: clamp(23px, 6.6vw, 31px); }

  .btn, .btn--primary, .btn--cyan, .btn--lg { font-size: 14px; }

  .contact-tile__value { font-size: 13px; white-space: nowrap; overflow-wrap: normal; }

  /* Close the white gap above the hero photo on phones — the hero should
     start right where the header ends, snug, with no leftover white sliver.
     Desktop is untouched (its own gap is unchanged). */
  .hero { margin-top: -2px; }

  /* About page header graphic: shrink the three slide-position dashes so
     they don't run into the centred "Scroll" prompt/arrow on narrow phones. */
  .story__dots { gap: 8px; }
  .story__dot { width: 22px; height: 4px; }
  .story__dot.is-active { width: 32px; }
}