/* =========================================================
   Maths with Khalid: page layouts
   ========================================================= */

/* ---------- Home ---------- */
/* intro: photo + highlight text, then the stack */
/* MWK: your Webflow structure, one container.medium holding the intro text and the stack */
.stack-cards-random-div { width: 100%; } /* fills the flex column so the stack is full width */
:root { --size-container: 80em; } /* max width the stack used on your page */
/* MWK: intro, big statement left, short line + About button right */
.home-intro .intro-container { width: 100%; } /* MWK: fill container.medium so the aside lines up with the right edge */
.home-intro > .container { padding-top: 10em; } /* MWK: more air after the full-height hero (container default 6em) */
@media screen and (max-width: 991px) { .home-intro > .container { padding-top: 8em; } } /* default 5em */
@media screen and (max-width: 767px) { .home-intro > .container { padding-top: 6em; } } /* default 4em */
.intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(1.5em, 4vw, 2.5em); width: 100%; }
.intro-statement { flex: 1 1 0; font-family: Bricolage Grotesque, sans-serif; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; } /* MWK: heading face, a touch more open */
.intro-aside { flex: 0 0 20em; display: flex; flex-direction: column; align-items: flex-start; gap: 2.5em; padding-top: .75em; }
.intro-aside__p { opacity: .8; text-wrap: pretty; }
.nowrap { white-space: nowrap; } /* MWK: keeps short phrases on one line (SplitText ignores non-breaking spaces) */
@media screen and (max-width: 991px) {
  .intro-row { flex-direction: column; gap: 2.5em; }
  .intro-aside { flex-basis: auto; max-width: 26em; padding-top: 0; gap: 2em; }
}
@media screen and (max-width: 767px) { .intro-statement { text-wrap: pretty; } } /* MWK: balance stops at 6 lines; pretty prevents a one-word last line */
/* your masked text reveal CSS */
html.js [data-split="heading"]{ /* MWK: scoped to .js so the text still shows if scripts fail */
  visibility: hidden;
}

/* ways to learn */
.mwk-badge { display: block; }
@media (hover: none) { .hero .coordinates__inner { display: none; } } /* MWK: no cursor on touch screens, so the X/Y readout would sit at 0 */ /* MWK: Max 8 badge SVG fills the circle like the image did */
.home-ways { overflow-x: clip; } /* as on your momentum page: the badge hangs off the card edge on phones */
.home-ways .tuition-card-container { padding-top: 3em; }
.foot-note { margin-top: 3em; max-width: 60em; }
.foot-note b { font-weight: 700; }

/* what's on */
.home-whats-on .class-list { margin-bottom: 2em; }

/* FAQ preview (on indigo, runs into the closing block) */
.home-faq .container { padding-bottom: 0; }
.home-faq .section-head__lead { color: var(--white); }
.home-faq .faq-item { color: var(--indigo-950); } /* MWK: cards are white, so the text can't inherit the section's white */

/* =========================================================
   About
   ========================================================= */
/* ---------- standard page header (inner pages; About and Home have their own) ---------- */
.page-head { display: flex; flex-direction: column; min-height: max(70vh, 34em); min-height: max(70svh, 34em); }
.page-head > .container { flex: 1 1 auto; justify-content: flex-end; padding-top: calc(2rem + var(--nav-btn) + 3em); padding-bottom: 5em; }
.page-head h1 { max-width: 9.5em; text-wrap: balance; margin-top: .35em; }
.page-head h1 span { color: var(--amber-500); }
.page-head__lead { max-width: 32em; margin-top: 2em; opacity: .8; text-wrap: pretty; }
@media screen and (max-width: 767px) { .page-head { min-height: max(70svh, 30em); } .page-head > .container { padding-bottom: 4em; } }

/* header: text left, photo right, facts underneath */
.about-head .container { padding-top: 11em; padding-bottom: 6em; }
.about-head__grid { width: 100%; display: grid; grid-template-columns: 7fr 5fr; gap: 6em; align-items: end; }
.about-head__text h1 { max-width: 9.5em; text-wrap: balance; margin-top: .35em; }
.about-head__text h1 span { color: var(--amber-500); }
.about-head__lead { max-width: 30em; margin-top: 2.5em; opacity: .8; text-wrap: pretty; }
.about-head__sign { margin-top: 1.25em; opacity: .5; }
/* MWK: the three dots pulse in turn, like someone typing */
.dots i { font-style: normal; animation: dot-pulse 1.4s var(--ease-inout) infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pulse { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }
.about-head__photo { border-radius: 1.5em; overflow: hidden; aspect-ratio: 4 / 5; background: var(--indigo-950); }
.about-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.facts { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; margin: 5em 0 0; padding: 2.5em 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .15); }
.fact { display: flex; flex-direction: column; gap: .5em; }
.fact__n { font-family: Bricolage Grotesque, sans-serif; font-weight: 700; font-size: 2.5em; line-height: 1; letter-spacing: -.04em; color: var(--white); }
.fact__l { opacity: .7; }
@media screen and (max-width: 991px) {
  .about-head .container { padding-top: 9.5em; padding-bottom: 5em; }
  .about-head__grid { grid-template-columns: 1fr; gap: 3.5em; }
  .about-head__photo { max-width: 26em; }
  .facts { margin-top: 4em; }
}
@media screen and (max-width: 767px) { .about-head .container { padding-top: 8.5em; padding-bottom: 4em; } .facts { grid-template-columns: repeat(2, 1fr); row-gap: 2.5em; margin-top: 3.5em; } }

/* how I teach + safety: one cream chapter, no double gap between them */
.about-steps .container { padding-bottom: 3em; }
.steps { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4em; margin: 3.5em 0 0; padding: 0; list-style: none; }
.step__num { font-family: "JetBrains Mono"; font-size: 16px; opacity: .6; }
.step__line { height: 1px; background: rgba(23, 26, 54, .2); margin: 1.25em 0 2.5em; }
.step__p { margin-top: 1.25em; opacity: .8; text-wrap: pretty; }
@media screen and (max-width: 991px) { .steps { grid-template-columns: 1fr; gap: 3em; margin-top: 3em; } .step__line { margin-bottom: 1.75em; } .step__p { max-width: 34em; } }
.trust { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; margin: 3em 0 0; padding: 0; list-style: none; }
.trust-card { display: flex; flex-direction: column; gap: 1em; padding: 2em; border-radius: 1.5em; background: var(--white); }
.trust-card__icon { display: grid; place-items: center; width: 3em; height: 3em; margin-bottom: .5em; border-radius: 50%; background: var(--indigo-100); color: var(--indigo-800); }
.trust-card__icon svg { width: 1.5em; height: 1.5em; }
.trust-card__p { opacity: .8; font-size: 1em; text-wrap: pretty; }
@media screen and (max-width: 991px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .trust { grid-template-columns: 1fr; } }

/* ending: same pattern as the Home intro */
.about-trust .container { padding-bottom: 3em; }
.about-purpose .container { padding-bottom: 10em; }
.about-purpose .intro-aside { gap: 2em; }
/* your emblem CSS */
.about-badge {
  width: 7em;
  position: relative;
  margin-bottom: 4em;
  border-radius: 50%;
  color: var(--indigo-950); /* MWK: the SVGs use currentColor (was #171a36 hard-coded) */
}

.about-badge::before {
  display: block;
  content: "";
  padding-top: 100%;
}

.about-badge svg:nth-child(1) {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.about-badge svg:nth-child(2) {
  width: 24.3%;   /* MWK: 23.12 / 95.07, measured from the full emblem (was 40%) */
  position: absolute;
  top: 48.45%;    /* MWK: matches the artwork, the mark sits 1.5% above centre */
  left: 50.48%;
  transform: translate(-50%, -50%);
}
.stamp { display: block; width: 100%; height: auto; }
@media screen and (max-width: 991px) { .about-purpose .container { padding-bottom: 7em; } }
@media screen and (max-width: 767px) { .about-purpose .container { padding-bottom: 5em; } }

/* =========================================================
   Tuition
   ========================================================= */

/* ---------- your sticky features CSS ---------- */
/* Webflow Designer resets to show hidden content: */
.wf-design-mode .sticky-features__text-list{ overflow: auto; max-height: 45em; gap: 2em; justify-content:flex-start;}
.wf-design-mode .sticky-features__text-item{ position: relative; }
.wf-design-mode [data-sticky-feature-item]{ visibility: visible; }

/* Show only 1st items on live site */
[data-sticky-feature-visual-wrap]:first-of-type{ clip-path: inset(0% round 1.5em); } /* radius: was 0.75em, now your 1.5em card radius */
[data-sticky-feature-item]:first-of-type{ visibility: visible; }
/* ---------- your sticky features structure CSS (brand + scaling fixes) ---------- */
.sticky-features__wrap {
  position: relative;
  width: 100%;                          /* side padding moved to the container below */
}
.sticky-features__scroll {
  display: flex;
  height: 100vh;
  height: 100svh;
  justify-content: center;
  align-items: center;
}
/* sits on your site container: same max width and side padding as .container */
.sticky-features__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3em, 7vw, 7.5em);          /* was a fixed 1.25em: now grows and shrinks with the screen */
  align-items: center;
  width: 100%;
  max-width: 1440px;
  padding-right: 7.5em;
  padding-left: 7.5em;
}
.sticky-feaures__col {
  position: relative;
  min-width: 0;
}
.sticky-feaures__col.is--img {
  overflow: hidden;
  border-radius: 1.5em;                 /* was 0.75em: your card radius */
}
.sticky-features__img-collection {
  width: 100%;
}
.sticky-features__img-list {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.3;
  max-height: calc(100svh - 6em);       /* added: never taller than the screen */
  container-type: size;                 /* added: the visual inside scales with this box */
}
.sticky-features__img-item {
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  clip-path: inset(50% round 1.5em);    /* was 0.75em */
}
/* added: the mini card is sized from its box (whichever is tighter, width or height), so the two always scale together */
.sticky-features__img-item .fp-visual { font-size: min(3.05cqw, 2.85cqh); padding: 2em; }
.sticky-features__progress-w {
  position: absolute;
  left: 0em;
  right: 0em;
  bottom: 0em;
  height: 0.25em;
  background-color: transparent;        /* was rgba(255, 255, 255, 0.15): kept for the script, but not shown */
}
.sticky-features__progress-bar {
  width: 100%;
  height: 100%;
  background-color: transparent;        /* was rgb(255, 255, 255) */
  transform: scale3d(0, 1, 1);
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
}
.sticky-features__text-collection {
  height: 100%;
}
.sticky-features__text-list {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 30em;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
.sticky-features__text-item {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  width: 100%;
  max-width: 30em;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5em;
  visibility: hidden;
}
.sticky-features__tag { margin-bottom: 0; }  /* your tag style swapped for the site's mono pill tag */
.sticky-features__heading { text-wrap: balance; }  /* uses your h2 instead of 3.75em / 500 */
.sticky-features__p { opacity: .8; text-wrap: pretty; }  /* uses your p size instead of 1.25em */

/* tablet and phone: stacked, and the whole block fits one screen */
@media screen and (max-width: 991px) {
  .sticky-features__scroll {
    align-items: stretch;
    padding-top: 2em;
    padding-bottom: 2em;
  }
  .sticky-features__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2em;
    height: 100%;
  }
  .sticky-feaures__col.is--img { flex: 0 0 auto; }
  .sticky-feaures__col:not(.is--img) { flex: 1 1 auto; min-height: 0; }
  .sticky-features__img-list {
    aspect-ratio: auto;
    height: clamp(15em, 44svh, 30em);   /* fills the width; the height is a share of the screen */
    max-height: none;
  }
  .sticky-features__text-list { min-height: 0; justify-content: flex-start; }
  .sticky-features__text-item { top: 0; justify-content: flex-start; max-width: 36em; gap: 1em; }
}
@media screen and (max-width: 767px) {
  .sticky-features__container { padding-right: 2em; padding-left: 2em; gap: 1.5em; }
  .sticky-features__scroll { padding-top: 1.25em; padding-bottom: 1.25em; }
  .sticky-features__img-list { height: clamp(12em, 36svh, 26em); }
}
@media screen and (max-width: 479px) {
  .sticky-features__container { padding-right: 1.5em; padding-left: 1.5em; }
}

/* item content (new) */
.tag.is--step { background: rgba(255, 255, 255, .1); color: var(--white); }
.sticky-features__heading span { color: var(--amber-500); }
.sticky-features__facts { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; }
.sticky-features__facts li { display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em .5em .55em; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 1em; font-weight: 500; }
.sticky-features__facts li::before { content: ""; width: 1.25em; height: 1.25em; flex: 0 0 auto; border-radius: 50%; background: var(--amber-500) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 stroke=%27%23171A36%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 70% no-repeat; }
.sticky-features__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25em; width: 100%; padding-top: 1.5em; border-top: 1px solid rgba(255, 255, 255, .12); }
.sticky-features__price { display: flex; align-items: baseline; gap: .4em; font-family: Bricolage Grotesque, sans-serif; font-size: 2.25em; font-weight: 800; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.sticky-features__price.is--quote { font-size: 1.75em; }
.sticky-features__price small { font-family: DM Sans, sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: 0; opacity: .6; }
.sticky-features__foot .btn-wrap { gap: .4em; }
@media screen and (max-width: 767px) {
  .sticky-features__facts { display: none; }  /* the details modal repeats them; keeps the pinned block on one screen */
  .sticky-features__foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 1em; }
  .sticky-features__price { font-size: 1.75em; }
}
/* visuals: small pieces of the real thing */
.fp-visual { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 3em; background: var(--indigo-200); color: var(--indigo-950); }
.fp-visual > * { width: 100%; max-width: 26em; }
.fp-visual .fp-caption { margin-bottom: 1em; font-family: "JetBrains Mono"; font-size: .875em; opacity: .6; }
.fp-visual .fp-card { padding: 1.75em; border-radius: 1.5em; background: var(--white); }

/* group: a class card from the timetable */
.fp-visual .tag { display: inline-flex; align-items: center; padding: .3em .75em; border-radius: 999px; background: var(--indigo-100); color: var(--indigo-800); font-family: "JetBrains Mono"; font-size: .8125em; line-height: 1.4; white-space: nowrap; }
.fp-visual .class-card__tags { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: .75em; }
.fp-visual .class-card__name { font-family: Bricolage Grotesque, sans-serif; font-size: 2em; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.fp-visual .class-card__sub { margin-top: .35em; opacity: .6; font-size: 1em; }
.fp-visual .class-card__slots { display: flex; gap: .75em; margin: 1.5em 0; }
.fp-visual .class-slot { flex: 1; display: flex; flex-direction: column; gap: .2em; padding: .9em 1.1em; border-radius: 1em; background: var(--cream); }
.fp-visual .class-slot__day { font-family: Bricolage Grotesque, sans-serif; font-weight: 700; font-size: 1.375em; letter-spacing: -.03em; line-height: 1; }
.fp-visual .class-slot__time { font-family: "JetBrains Mono"; font-size: .9375em; opacity: .7; }
.fp-visual .seats { display: flex; gap: .3125em; margin-bottom: .6em; }
.fp-visual .seats i { width: .75em; height: .75em; border-radius: 50%; background: var(--indigo-100); transform: scale(.4); opacity: 0; transition: transform var(--dur-smooth) var(--ease-inout), opacity var(--dur-smooth) var(--ease-inout); }
.fp-visual .seats i.is--taken { background: var(--indigo-800); }
.fp-visual .seats i { transform: scale(1); opacity: 1; }
.fp-visual .seats i:nth-child(2) { transition-delay: .04s; } .fp-visual .seats i:nth-child(3) { transition-delay: .08s; } .fp-visual .seats i:nth-child(4) { transition-delay: .12s; }
.fp-visual .seats i:nth-child(5) { transition-delay: .16s; } .fp-visual .seats i:nth-child(6) { transition-delay: .2s; } .fp-visual .seats i:nth-child(7) { transition-delay: .24s; } .fp-visual .seats i:nth-child(8) { transition-delay: .28s; }
.fp-visual .seats__label { font-family: "JetBrains Mono"; font-size: .875em; opacity: .7; }

/* one-to-one: a lesson plan */
.fp-visual .plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1.5em; }
.fp-visual .plan__title { font-family: Bricolage Grotesque, sans-serif; font-size: 1.75em; font-weight: 700; letter-spacing: -.05em; line-height: 1.05; }
.fp-visual .plan__list { display: flex; flex-direction: column; gap: .75em; margin: 0; padding: 0; list-style: none; }
.fp-visual .plan__list li { display: flex; align-items: center; gap: .75em; padding: .85em 1em; border-radius: 1em; background: var(--cream); }
.fp-visual .plan__check { display: grid; place-items: center; width: 1.5em; height: 1.5em; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid rgba(23, 26, 54, .25); }
.fp-visual .plan__check.is--done { background: var(--indigo-800); border-color: var(--indigo-800); color: var(--white); }
.fp-visual .plan__check svg { width: .85em; height: .85em; }
.fp-visual .plan__list .plan__step { font-family: "JetBrains Mono"; font-size: .8125em; opacity: .6; flex: 0 0 auto; }
.fp-visual .plan__note { display: flex; align-items: center; gap: .6em; margin-top: 1.25em; font-size: .9375em; opacity: .7; }
.fp-visual .plan__note svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: var(--indigo-800); }

/* home-ed: a weekly calendar */
.fp-visual .week { display: grid; grid-template-columns: 2.75em repeat(5, minmax(0, 1fr)); gap: .375em; }
.fp-visual .week__day { padding-bottom: .5em; text-align: center; font-family: "JetBrains Mono"; font-size: .8125em; opacity: .6; }
.fp-visual .week__time { font-family: "JetBrains Mono"; font-size: .75em; opacity: .5; line-height: 2.75em; }
.fp-visual .week__cell { height: 2.75em; border-radius: .6em; background: var(--cream); }
.fp-visual .week__block { grid-column: 4; grid-row: 3 / span 2; display: flex; flex-direction: column; justify-content: flex-start; gap: .15em; padding: .5em .6em; border-radius: .6em; background: var(--amber-400); }
.fp-visual .week__block strong { font-family: Bricolage Grotesque, sans-serif; font-size: 1em; letter-spacing: -.03em; line-height: 1.1; }
.fp-visual .week__block span { white-space: nowrap; font-family: "JetBrains Mono"; font-size: .6875em; opacity: .75; }


/* options on cream: dark text versions of the step tag, chips and divider */
.sticky-features__heading span { color: var(--amber-500); }
.tuition-options .tag.is--step { background: rgba(23, 26, 54, .07); color: var(--indigo-950); }
.tuition-options .sticky-features__facts li { background: var(--white); }
.tuition-options .sticky-features__foot { border-top-color: rgba(23, 26, 54, .14); }
.tuition-options .sticky-features__price small { opacity: .65; }
/* ---------- options: cards scroll in one column, the text panel stays (desktop) ---------- */
.tuition-options { --card-h: min(60svh, 38em); --card-gap: 28svh; } /* MWK: cards a little smaller, with more room between them */
.tuition-options .container { padding-top: 0; padding-bottom: 0; }
.tscroll { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3em, 7vw, 7.5em); align-items: start; }
/* the list is a full screen tall at each end, so the first and last cards can sit dead centre, level with the text */
.tscroll__list { display: flex; flex-direction: column; gap: var(--card-gap); padding: calc((100svh - var(--card-h)) / 2) 0; }
.tscroll__visual { position: relative; height: var(--card-h); border-radius: 1.5em; overflow: hidden; container-type: size; }
.tscroll__visual .fp-visual { font-size: min(3.05cqw, 2.85cqh); padding: 2em; }
.tscroll__inline { display: none; }
.tscroll__panel { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.tscroll__panel .sticky-features__text-list { width: 100%; height: auto; min-height: 34em; }
.tscroll__panel .sticky-features__text-item { top: 50%; transform: translateY(-50%); } /* text centred on the screen's middle, the same line as the active card */
/* tablet + phone: one card after another, each with its text, and nothing sticks */
@media screen and (max-width: 991px) {
  .tuition-options .container { padding-top: 4em; padding-bottom: 4em; }
  .tscroll { display: block; }
  .tscroll__list { padding: 0; }
  .tscroll__panel { display: none; }
  .tscroll__list { gap: 5em; }
  .tscroll__visual { height: clamp(18em, 52svh, 30em); }
  .tscroll__inline { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25em; margin-top: 2em; max-width: 36em; }
}
@media screen and (max-width: 767px) {
  .tscroll__list { gap: 4em; }
  .tscroll__visual { height: clamp(16em, 48svh, 26em); }
  .tscroll__inline { margin-top: 1.5em; }
  .tscroll__inline .sticky-features__facts { display: flex; } /* the pinned layout hid these to fit one screen; there's room now */
}

/* how it works: the About steps, four across */
.steps.steps--four { grid-template-columns: repeat(4, 1fr); gap: 3em; }
@media screen and (max-width: 991px) { .steps.steps--four { grid-template-columns: repeat(2, 1fr); gap: 3em 2.5em; } }
@media screen and (max-width: 767px) { .steps.steps--four { grid-template-columns: 1fr; } }
.tuition-faq .container { padding-bottom: 6em; }
/* stacked layout: the pinned block starts below the menu button so nothing sits under it */
@media screen and (max-width: 991px) { .sticky-features__scroll { padding-top: calc(var(--nav-edge) + var(--nav-btn) + 1em); } }
.step__h { text-wrap: balance; }

/* =========================================================
   FAQs page: your FAQ section (pills + accordion), under the standard header
   ========================================================= */
/* category pills (same sliding pill as the timetable) */
.pill-filter { position: relative; display: inline-flex; flex-wrap: nowrap; padding: .3em; border-radius: 999px; background: var(--white); margin-bottom: 1.5em; max-width: 100%; }
.faq-main { width: 100%; }
.pill-filter__btn { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; padding: .7em 1.25em; border-radius: 999px; font: inherit; font-weight: 500; font-size: 1.0625em; color: var(--indigo-950); white-space: nowrap; transition: color var(--dur-primary) var(--ease-out); }
.pill-filter__btn.is--active { color: var(--white); }
.pill-filter__btn:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 2px; }
.pill-filter__thumb { position: absolute; top: .3em; bottom: .3em; left: 0; border-radius: 999px; background: var(--indigo-800); transition: transform var(--dur-smooth) var(--ease-out), width var(--dur-smooth) var(--ease-out); }


.faqs-page .container { justify-content: flex-start; }
.faqs-page__main { width: 100%; min-height: 80vh; min-height: 80svh; } /* MWK: room for short categories, so the page below doesn't jump when filtering */
/* ---------- pills (FAQs + Timetable): separate pills, like the Contact page; on smaller screens the row runs to the screen edges and swipes ---------- */
.pill-strip { --pill-bleed: 0em; width: calc(100% + 2 * var(--pill-bleed)); margin: 0 calc(-1 * var(--pill-bleed)) 2em; }
.pill-strip .pill-filter { display: flex; flex-wrap: nowrap; gap: .5em; width: 100%; max-width: none; margin: 0; padding: 0 0 0 var(--pill-bleed); background: none; border-radius: 0; overflow-x: auto; overscroll-behavior-x: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pill-strip .pill-filter::-webkit-scrollbar { display: none; }
.pill-strip .pill-filter::after { content: ""; flex: 0 0 calc(var(--pill-bleed) - .5em); } /* room after the last pill, matching the page margin */
.pill-filter__thumb { display: none; } /* the sliding highlight is replaced by each pill changing colour */
.pill-filter__btn { position: relative; overflow: hidden; isolation: isolate; flex: 0 0 auto; min-width: 5em; padding: .8em 1.5em; font-size: 1em; text-align: center; background: none; color: var(--indigo-950); transition: color var(--dur-primary) var(--ease-out); } /* MWK: 1.5em each side; short labels get a wider pill */
.pill-filter__label { position: relative; z-index: 1; }
/* your directional button hover, in the white ("light") button colours */
.pill-filter__btn .btn__bg { border-radius: 999px; background-color: var(--white); transition: background-color .4s cubic-bezier(.625, .05, 0, 1); }
.pill-filter__btn .btn__circle-wrap { border-radius: 999px; }
.pill-filter__btn .btn__circle { background-color: var(--indigo-100); transform: translate(-50%, -50%) scale(0) rotate(.001deg); transition: transform .7s cubic-bezier(.625, .05, 0, 1); }
@media (hover: hover) {
  .pill-filter__btn:not(.is--active):hover .btn__circle { transform: translate(-50%, -50%) scale(1) rotate(.001deg); }
  .pill-filter__btn:not(.is--active):hover .btn__bg { background-color: var(--indigo-100); transition: background-color 0s .45s; } /* as your buttons: once the circle has grown, the whole pill is filled, corners included */
}
/* selected: solid indigo, no hover fill on top */
.pill-filter__btn.is--active { color: var(--white); }
.pill-filter__btn.is--active .btn__bg { background-color: var(--indigo-800); }
.pill-filter__btn.is--active .btn__circle { transform: translate(-50%, -50%) scale(0) rotate(.001deg); transition: transform .3s cubic-bezier(.625, .05, 0, 1); }
@media screen and (max-width: 991px) { .pill-strip { --pill-bleed: 4em; } } /* the same as the page's side padding at each size */
@media screen and (max-width: 767px) { .pill-strip { --pill-bleed: 2em; } }
@media screen and (max-width: 479px) { .pill-strip { --pill-bleed: 1.5em; } }
@media screen and (max-width: 767px) { }

/* =========================================================
   Contact: your 1 Nov design, under the standard header
   ========================================================= */
.contact-head .btn-wrap { margin-top: 2.5em; flex-wrap: wrap; gap: 1em; }
.contact-head__email { margin-top: 1.5em; opacity: .8; }
.contact-head__email a { color: inherit; font-weight: 600; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--dur-primary) var(--ease-out); } /* MWK: the same growing line as "Copy message" */
.contact-head__email a:hover, .contact-head__email a:focus-visible { background-size: 100% 1.5px; }
.contact-builder .section-head, .contact-ways .section-head { margin-bottom: 3.5em; } /* MWK: the site's section head has no bottom margin */
@media screen and (max-width: 767px) { .contact-builder .section-head, .contact-ways .section-head { margin-bottom: 2.5em; } }
button.chip { font: inherit; }
/* message builder */
.builder { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2em; align-items: start; }
.builder__picks { display: flex; flex-direction: column; gap: 2.25em; padding: 2.5em; border-radius: 1.5em; background: var(--white); }
.pick-group { display: flex; flex-direction: column; gap: 1em; }
.pick-group__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.pick-group__label .eyebrow-mono { font-size: 1em; }
.pick-group__hint { font-size: .875em; opacity: .5; }
.chips { display: flex; flex-wrap: wrap; gap: .5em; }
.chip { padding: .7em 1.15em; border-radius: 999px; border: 0; background: var(--cream); color: var(--indigo-950); font-weight: 500; font-size: 1em; line-height: 1.2; cursor: pointer; transition: background-color var(--dur-primary) var(--ease-out), color var(--dur-primary) var(--ease-out); }
.chip:hover { background: var(--indigo-100); }
.chip.is--active { background: var(--indigo-800); color: var(--white); }
.chip:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 2px; }

.builder__preview { position: sticky; top: calc(var(--nav-edge) + var(--nav-btn) + 1em); /* MWK: clears the menu button */ display: flex; flex-direction: column; min-height: 30em; padding: 2.5em; border-radius: 1.5em; background: var(--indigo-800); color: var(--white); }
.builder__preview .eyebrow-mono { font-size: 1em; }
.msg { margin: 1.25em 0 2.5em; font-family: Bricolage Grotesque, sans-serif; font-size: 2.25em; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; text-wrap: pretty; }
.msg mark { background: none; color: var(--amber-500); transition: opacity var(--dur-fast) var(--ease-out); } /* inline, so it wraps naturally with the sentence */
.msg mark.is--swapping { opacity: 0; }
.builder__actions { margin-top: auto; display: flex; flex-direction: column; gap: 1.25em; }
.builder__actions .btn-wrap { align-items: center; gap: 1em; }
.builder__actions .text-link { font-size: 1.0625rem; } /* not the button's 2em scale */
.text-link { background: none; border: 0; font: inherit; font-weight: 600; font-size: 1.0625em; color: inherit; cursor: pointer; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-primary) var(--ease-out); }
.text-link:hover { background-size: 100% 1.5px; }
.builder__note { font-size: .9375em; opacity: .6; }

/* contact options */
.options { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; }
.option { position: relative; /* MWK: holds the WhatsApp overlays */ display: flex; flex-direction: column; gap: .5em; padding: 2.25em; border-radius: 1.5em; background: var(--white); text-decoration: none; color: inherit; }
.option__icon { width: 3.25em; height: 3.25em; border-radius: 50%; display: grid; place-items: center; background: var(--cream); margin-bottom: 1.5em; transition: background-color var(--dur-primary) var(--ease-out); }
.option__icon svg { width: 1.5em; height: 1.5em; }
a.option:hover .option__icon, .option.whatsapp-trigger:hover .option__icon { background: var(--amber-400); }
.option .eyebrow-mono { font-size: 1em; }
.option__big { font-family: Bricolage Grotesque, sans-serif; font-weight: 700; font-size: 2em; letter-spacing: -.04em; line-height: 1.1; }
.option__p { opacity: .75; font-size: 1em; }
.areas { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .5em; }
.areas span { padding: .4em .85em; border-radius: 999px; background: var(--cream); font-size: .9375em; font-weight: 500; }
.areas span.is--online { background: var(--amber-400); }

/* next steps: now the site's shared steps (About, Tuition) */
.faq-nudge { width: 100%; margin-top: 3em; display: flex; justify-content: space-between; align-items: center; gap: 1.5em; flex-wrap: wrap; padding: 1.75em 2.25em; border-radius: 1.5em; background: var(--indigo-100); }
.faq-nudge p { font-weight: 500; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 2em; z-index: 700; padding: .8em 1.4em; border-radius: 999px; background: var(--indigo-950); color: var(--white); font-family: "JetBrains Mono"; font-size: .875em; opacity: 0; transform: translate(-50%, 1em); pointer-events: none; transition: opacity var(--dur-primary) var(--ease-out), transform var(--dur-primary) var(--ease-out); }
.toast.is--show { opacity: 1; transform: translate(-50%, 0); }


/* your responsive rules */
@media screen and (max-width: 991px) {
  .builder { grid-template-columns: 1fr; }
  .builder__preview { position: relative; top: auto; min-height: auto; }
  .options { grid-template-columns: 1fr; }
  .option { min-height: auto; }
}
@media screen and (max-width: 767px) {
  .builder__picks, .builder__preview, .option { padding: 1.75em; }
  .msg { font-size: 1.75em; margin: 1em 0 2em; }
  .faq-nudge { padding: 1.5em 1.75em; }
}
@media screen and (max-width: 479px) { .msg { font-size: 1.5em; } }

/* =========================================================
   Timetable: your 1 Nov design, under the standard header
   (class cards, course cards and the modal are the shared ones from Home)
   ========================================================= */
.tt-facts { margin-top: 3.5em; }
.tt-facts .eyebrow-mono { font-size: 16px; }
.fact__p { font-family: Bricolage Grotesque, sans-serif; font-size: 1.5em; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.timetable-head { min-height: 0; } /* MWK: the facts row gives this header its height */
.timetable-classes .pill-strip { margin-bottom: 1.5em; }
.faq-nudge.is--white { background: var(--white); }
.faq-nudge p { flex: 1 1 22em; max-width: 46em; text-wrap: balance; } /* MWK: the text takes the room, the button stays on the right */ /* MWK: the Contact page's box, white so it shows on the lilac section (like the course cards) */
/* pricing panel */
.price-panel { width: 100%; margin-top: 2em; display: grid; grid-template-columns: 1fr 1.3fr; gap: 3em; align-items: center; padding: 3em; border-radius: 1.5em; background: var(--indigo-800); color: var(--white); overflow: hidden; position: relative; }
.price-panel__amount { display: flex; align-items: flex-end; gap: .4em; margin: .4em 0 .6em; }
.price-panel__big { font-family: Bricolage Grotesque, sans-serif; font-weight: 800; font-size: 6em; line-height: .9; letter-spacing: -.06em; color: var(--amber-500); }
.price-panel__per { opacity: .8; padding-bottom: .5em; }
.price-panel__note { opacity: .7; max-width: 26em; }
.includes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25em 2em; }
.includes li { display: flex; align-items: flex-start; gap: .75em; font-size: 1.125em; line-height: 1.35; }
.check-svg { width: 28px; height: 28px; flex: 0 0 auto; margin-top: -2px; }
.price-panel .btn-wrap { margin-top: 2em; }


/* your responsive rules */
@media screen and (max-width: 991px) {
  .price-panel { grid-template-columns: 1fr; gap: 2.5em; padding: 2.5em; }
  .includes { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .tt-facts { grid-template-columns: repeat(2, 1fr); row-gap: 2em; }
  .fact__p { font-size: 1.25em; }
  .price-panel { padding: 2em 1.75em; }
  .price-panel__big { font-size: 4.5em; }
  .includes li { font-size: 1em; }
}

/* =========================================================
   Privacy + Terms: one readable column, contents list on the left (desktop)
   ========================================================= */
.legal .container { justify-content: flex-start; }
.legal__grid { width: 100%; display: grid; grid-template-columns: minmax(14em, 18em) minmax(0, 42em); gap: 5em; align-items: start; }
.legal__toc { position: sticky; top: calc(var(--nav-edge) + var(--nav-btn) + 1em); display: flex; flex-direction: column; gap: 1.25em; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6em; counter-reset: toc; }
.legal__toc li { counter-increment: toc; display: flex; gap: .75em; }
.legal__toc li::before { content: counter(toc, decimal-leading-zero); font-family: "JetBrains Mono"; font-size: .875em; opacity: .5; padding-top: .15em; }
.legal__toc a { color: inherit; text-decoration: none; font-weight: 500; opacity: .75; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: opacity var(--dur-primary) var(--ease-out), background-size var(--dur-primary) var(--ease-out); }
.legal__toc a:hover { opacity: 1; background-size: 100% 1.5px; }
/* MWK: where you are on the page: sections ahead are quieter, ones you've passed a little stronger, the current one in indigo-800 */
.legal__toc li::before { transition: opacity var(--dur-primary) var(--ease-out), color var(--dur-primary) var(--ease-out); }
.legal__toc li.is--ahead a { opacity: .55; }
.legal__toc li.is--passed a { opacity: .85; }
.legal__toc li.is--current a { opacity: 1; color: var(--indigo-800); font-weight: 600; }
.legal__toc a { display: inline-flex; flex-direction: column; } /* MWK: reserves the bold width, so a label never re-wraps when it's highlighted */
.legal__toc a::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; }
.legal__toc li.is--current::before { opacity: 1; color: var(--indigo-800); }
.legal__intro { font-family: Bricolage Grotesque, sans-serif; font-size: 1.75em; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; text-wrap: pretty; padding-bottom: 1.5em; margin-bottom: 1em; border-bottom: 1px solid rgba(23, 26, 54, .15); }
.legal__section { padding: 2em 0; border-bottom: 1px solid rgba(23, 26, 54, .1); scroll-margin-top: 2em; }
.legal__h { font-size: 1.75em; letter-spacing: -.04em; margin-bottom: .75em; }
.legal__section p, .legal__section li { opacity: .85; text-wrap: pretty; }
.legal__section p + p, .legal__section ul + p, .legal__section p + ul { margin-top: 1em; }
.legal__section ul { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: .6em; }
.legal__section li { font-size: 1.125em; padding-left: .25em; }
.legal__section li::marker { color: var(--indigo-400); }
.legal__section strong { font-weight: 600; }
.legal__section a { color: var(--indigo-800); font-weight: 600; }
.legal__updated { margin-top: 2em; font-family: "JetBrains Mono"; font-size: 16px; opacity: .6; }
@media screen and (max-width: 991px) {
  .legal__grid { grid-template-columns: 1fr; gap: 3em; }
  .legal__toc { position: static; display: none; } /* stacked: the sections read straight down */
}
@media screen and (max-width: 767px) { .legal__intro { font-size: 1.375em; } .legal__h { font-size: 1.5em; } .legal__section li { font-size: 1em; } }

/* ---------- SEO landing pages (North London areas, home education) ---------- */
.area-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 767px) { .area-groups { grid-template-columns: 1fr; } }
.option h3.option__big { margin: 0; }

/* ---------- MWK a11y (PageSpeed audit, 6 Nov): muted small text a touch stronger so it passes WCAG AA 4.5:1 on every background. Written last in pages.css so it wins. ---------- */
.eyebrow-mono, .step__num, .fp-visual .fp-caption, .fp-visual .plan__list .plan__step, .legal__updated { opacity: .7; }
.faq-item__num, .fp-visual .week__time, .pick-group__hint, .legal__toc li::before { opacity: .7; }
.legal__toc li.is--ahead a { opacity: .7; }
.about-head__sign { opacity: .65; }
.class-card__sub, .fp-visual .class-card__sub, .course-card__status, .course-card__meta dt { opacity: .7; }
/* Home stack cards are h2 now (correct heading order after the h1) but keep their h3 size */
.cards-stack-card__h { font-size: 2.5em; }
@media screen and (max-width: 991px) { .cards-stack-card__h { font-size: 2.25em; } }
@media screen and (max-width: 767px) { .cards-stack-card__h { font-size: 2em; } }
@media screen and (max-width: 479px) { .cards-stack-card__h { font-size: 1.75em; } }
.sticky-features__heading span { color: var(--indigo-800); } /* Tuition options sit on cream: indigo full stop there (amber stays for indigo backgrounds) */
.footer__links a, .footer__legal a { opacity: .7; }
.faq-item__q:hover .faq-item__num, .faq-item.is--open .faq-item__num, .footer__links a:hover, .footer__legal a:hover { opacity: 1; }
/* MWK a11y: FAQ questions and trust cards are now h3 (correct heading order) but keep their h4 look */
.faq-item__h, .trust-card__h { font-family: DM Sans, sans-serif; font-size: 1.5em; font-weight: 600; line-height: 1.2; letter-spacing: normal; }
@media screen and (max-width: 767px) { .faq-item__h, .trust-card__h { font-size: 1.375em; } }
@media screen and (max-width: 479px) { .faq-item__h, .trust-card__h { font-size: 1.25em; } }