@font-face { font-family: "Radio Canada Big"; src: url("/fonts/radio-canada-big-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Radio Canada"; src: url("/fonts/radio-canada-400-600.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Nunito Wordmark"; src: url("/fonts/nunito-900-wordmark.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --paper: #FBF4EC;
  --sand: #F5EADD;
  --card: #FFFDF9;
  --ink: #2A2421;
  --ink-2: #6A5F58;
  --rule: #E7DBCE;
  --rule-sand: #E3D4C2;
  --line: #9C8C7C;
  --field-line: #948474; /* at least 3:1 against the field, paper and sand */
  --stem: #CDBAA5;
  --flame: #F08A45;
  --flame-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6.7 0c.3 2.8 4.9 5 4.9 9.6C11.6 12.9 9.1 15 6 15S.4 12.9.4 9.7C.4 7.4 1.7 6 2.7 4.7c.2.9.7 1.6 1.5 2C4.2 4.2 5.1 1.9 6.7 0z'/%3E%3C/svg%3E");
  --photo-bg: #3B342F;
  --on-ink: #FBF4EC;
  --on-ink-2: #CFC4BA;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;
  /* one sizing unit, so the home hero scales as a whole with the window */
  --u: clamp(11px, min(1vw, 1.6vh), 22px);
  /* the page stops growing at 1320 px, so a big window gets wider margins instead of bigger everything */
  --gut: max(clamp(22px, 6.6vw, 110px), calc((100vw - 1320px) / 2));
  --sec: clamp(68px, 8.4vw, 124px);
  --display: "Radio Canada Big", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Radio Canada", "Segoe UI", sans-serif;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
strong, b { font-weight: 600; } /* the text font stops at 600, so bold asks for exactly that */
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }
.nb { white-space: nowrap; }

/* ---- type ---- */
.page-title { font: 600 clamp(34px, 3.9vw, 58px)/1.05 var(--display); letter-spacing: -.022em; text-wrap: balance; }
.section-head h2, .prose h2:first-child, .two-col h2, .cta-band h2, .tab h2, .offer-text h2 { font: 600 clamp(28px, 3vw, 46px)/1.1 var(--display); letter-spacing: -.018em; text-wrap: balance; }
.lead { margin-top: clamp(14px, 1.4vw, 20px); font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.4; text-wrap: pretty; }
.label { margin-bottom: 6px; color: var(--ink-2); font-size: .875rem; font-weight: 600; }
.note { color: var(--ink-2); }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(42, 36, 33, .4); text-underline-offset: .2em; }
.link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.star { flex: none; display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; fill: var(--flame); }
.arrow { flex: none; width: 22px; height: 22px; transition: transform .2s var(--ease); }

/* ---- buttons ---- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2vw, 30px); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1.5px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: inherit; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.btn-main { background: var(--ink); color: #fff; }
.btn-main:hover { background: #000; border-color: #000; }
.btn-alt:hover { background: var(--ink); color: #fff; }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-light { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
.btn-light:hover { background: #fff; border-color: #fff; }
.btn-ghost { border-color: var(--on-ink); color: var(--on-ink); }
.btn-ghost:hover { background: var(--on-ink); color: var(--ink); }

/* ---- header ---- */
/* the header's text stays in px, so a larger browser text size can't push it off the row */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: clamp(16px, 1.05vw, 18px); }
.site-header-in { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); min-height: var(--header-h); padding-inline: var(--gut); }
.brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink); text-decoration: none; }
.brand img { width: auto; height: 46px; }
.brand-word { font: 900 14px/1.16 "Nunito Wordmark", "Segoe UI", sans-serif; letter-spacing: .15em; white-space: nowrap; }
.brand-word span, .brand-kind span { display: block; }
.brand-kind { padding-left: 12px; border-left: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; line-height: 1.18; white-space: nowrap; }
.site-nav { display: flex; gap: clamp(14px, 1.7vw, 28px); margin-left: auto; }
.site-nav a { padding-block: 6px; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current] { border-bottom-color: var(--ink); }
.site-actions { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }
.header-phone { font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; }
.menu { display: none; margin-left: auto; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 24px; height: 2px; background: var(--ink); }
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -7px; }
.menu-bars::after { top: 7px; }
.menu[open] .menu-bars { background: transparent; }
.menu[open] .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu-bars::after { top: 0; transform: rotate(-45deg); }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gut) 20px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.menu nav a { padding-block: 13px; border-top: 1px solid var(--rule); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.menu nav a:first-child { border-top: 0; }
.menu nav a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* ---- home hero: the words centred in the left half, the photos running off the right edge, the facts on a card across the seam ---- */
/* --f is the headline's size, and "The right teacher", its widest line, is 7.45 times that wide. On small laptops the line under it is wider, about 23.9 times its own size. So --side is the space either side of the words, and the facts card uses it to line up under them */
.hero-home { --pad: clamp(22px, 6.6vw, 110px); --f: min(calc(var(--u) * 5.6), calc((54% - var(--pad) * 2) * .13)); --side: calc((54% - max(var(--f) * 7.45, min(max(1.0625rem, calc(var(--u) * 1.5)) * 23.9, 54% - var(--pad) * 2))) / 2); position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); min-height: calc(100vh - var(--header-h) - 44px); min-height: calc(100svh - var(--header-h) - 44px); }
.panel { container-type: inline-size; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: calc(var(--u) * 2.4) var(--pad) calc(var(--u) * 6); font-size: max(.9375rem, calc(var(--u) * 1.2)); line-height: 1.45; }
.message { width: fit-content; max-width: 100%; }
.headline { font: 600 min(calc(var(--u) * 5.6), 13cqi)/1.05 var(--display); letter-spacing: -.022em; }
.headline span { display: block; white-space: nowrap; }
.panel .lead { margin-top: calc(var(--u) * 1.3); font-size: max(1.0625rem, calc(var(--u) * 1.5)); line-height: 1.35; }
.panel .actions { gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 2.2); }
.panel .btn { min-height: max(44px, calc(var(--u) * 3.9)); padding: 0 max(20px, calc(var(--u) * 2)); font-size: max(.9375rem, calc(var(--u) * 1.25)); }
.hours { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; font-variant-numeric: tabular-nums; }
.hours dt { font-weight: 500; }

.hero-media { position: relative; display: grid; min-width: 0; }
.photos { position: relative; overflow: hidden; border-radius: 0 0 0 28px; background: var(--photo-bg); }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity .9s ease; }
.slide.was-on { z-index: 1; opacity: 1; transition: none; }
.slide.is-on { z-index: 2; opacity: 1; }
/* the review slider's pause button and dots */
.pause:hover { background: var(--rule); }
.pause svg { display: block; width: 12px; height: 12px; fill: currentColor; }
.pause .icon-play, .pause[aria-pressed="true"] .icon-pause { display: none; }
.pause[aria-pressed="true"] .icon-play { display: block; }
.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .55; }
.dot:hover::before { opacity: .8; }
.dot[aria-current="true"]::before { opacity: 1; }

.hero-stats { position: absolute; z-index: 3; left: var(--side); right: var(--side); bottom: -36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: calc(var(--u) * 1.5); border-radius: 18px; background: var(--card); box-shadow: 0 2px 4px rgba(62, 40, 18, .08), 0 14px 30px rgba(62, 40, 18, .14); }
.hero-stats > li { min-width: 0; padding-inline: calc(var(--u) * 2); }
.hero-stats > li + li { border-left: 1px solid var(--rule); }
.hero-stats strong { display: block; font: 600 max(19px, calc(var(--u) * 1.5))/1.15 var(--display); letter-spacing: -.012em; white-space: nowrap; }
.hero-stats span { display: block; margin-top: calc(var(--u) * .2); color: var(--ink-2); font-size: max(13px, calc(var(--u) * .95)); line-height: 1.3; text-wrap: pretty; }
.hero-stats .star { width: .9em; height: .9em; margin-right: .2em; vertical-align: -.05em; }
/* the trial price and the phone, in the same small line the inner heroes use */
.panel .hero-trust { margin-top: calc(var(--u) * 1.3); font-size: max(.9375rem, calc(var(--u) * 1.05)); }
.panel .hero-trust .link { color: var(--ink); white-space: nowrap; }
/* the one control on the moving photos: pause, bottom right, clear of the facts card. slideshow.js shows it only while the photos move */
.hero-pause { position: absolute; z-index: 4; right: 16px; bottom: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(42, 36, 33, .2); cursor: pointer; transition: background-color .15s; }
.hero-pause[hidden] { display: none; }
.hero-pause:hover { background: #fff; }
.hero-pause svg { display: block; width: 12px; height: 12px; fill: currentColor; }
.hero-pause .icon-play, .hero-pause[aria-pressed="true"] .icon-pause { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover strong { text-decoration: underline; text-underline-offset: .15em; }

/* ---- inner page heroes: same split as the home page, shorter ---- */
/* the photo sits in its own box, centred beside the text and clear of the nav */
/* Big split: the photo runs off the right edge of the page, tall, with a small gap under the nav */
.page-hero { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; gap: clamp(32px, 4vw, 72px); padding: clamp(18px, 1.6vw, 28px) 0 clamp(18px, 1.6vw, 28px) var(--gut); }
.page-hero-text { min-width: 0; }
.page-hero-media { position: relative; overflow: hidden; height: min(clamp(480px, 78vh, 740px), 62vw); border-radius: 24px 0 0 24px; background: var(--photo-bg); }
.page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.hero-trust { margin-top: 16px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.hero-trust span { margin-inline: 4px; }
.page-intro { padding: clamp(32px, 4vw, 64px) var(--gut) clamp(8px, 1vw, 16px); }
.page-intro .lead { max-width: 38em; }
.crumbs { margin-bottom: clamp(14px, 1.6vw, 22px); color: var(--ink-2); font-size: .875rem; }
.crumbs a { text-underline-offset: .2em; }
.crumbs span[aria-hidden] { margin-inline: 4px; }

/* ---- sections ---- */
.section { padding: var(--sec) var(--gut); }
.section-tight { padding-top: clamp(24px, 3vw, 40px); }
@media (min-width: 901px) {
  /* the facts card hangs 36 px below the hero, so the first section starts lower to keep the same room as the others */
  .hero-home + .section { padding-top: calc(var(--sec) + 40px); }
  /* Outside regular classes is a new topic after the tuition section, so it gets the full gap */
  .offer + .section-tight { padding-top: var(--sec); }
}
.section-sand { background: var(--sand); }
.section-head { max-width: 46em; margin-bottom: clamp(32px, 3.6vw, 60px); }
.section-head p { max-width: 68ch; margin-top: 12px; font-size: clamp(1rem, 1.2vw, 1.1875rem); color: var(--ink-2); }
.section-head-flush { margin-bottom: 0; }
.more { margin-top: clamp(30px, 3.2vw, 46px); }
.also { margin-top: clamp(28px, 3vw, 42px); color: var(--ink-2); }
.also .link { color: var(--ink); }

/* ---- a photo with its label under it, and no card behind the text ---- */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 52px) clamp(18px, 2.6vw, 40px); }
.tile-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: block; color: inherit; text-decoration: none; }
.tile-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 8 / 5; border-radius: 16px; background: var(--photo-bg); }
.tile-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .7s var(--ease); }
.tile:hover .tile-frame img, .subj:hover .subj-frame img, .face:hover .face-photo img { transform: scale(1.035); }
.tile-label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 14px; font-size: clamp(1rem, 1.25vw, 1.1875rem); font-weight: 500; line-height: 1.25; }
/* the round arrow on a photo says "tap me", in the same language as the plus on the teacher photos */
.tap { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: background-color .2s var(--ease), color .2s var(--ease); }
.tap .arrow { width: 18px; height: 18px; }
.tile:hover .tap, .subj:hover .tap { background: var(--ink); color: var(--paper); }
.tile:hover .tap .arrow, .subj:hover .tap .arrow { transform: translateX(2px); }
.strip-hint { display: none; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .9375rem; font-weight: 600; }
.strip-hint .arrow { width: 20px; height: 20px; }
.is-seen .strip-hint .arrow { animation: nudge 1.4s ease-in-out 3; } /* three nudges once the row is on screen (strip.js), then still */
.strip-bar { display: none; height: 4px; margin-top: 16px; overflow: hidden; border-radius: 2px; background: var(--rule-sand); }
.strip-bar span { display: block; width: 45%; height: 100%; border-radius: 2px; background: var(--ink); }
.rows a:hover .arrow { transform: translateX(5px); }
/* family and Programs cards: the name sits on a white pill inside the photo, beside the white arrow. On tablets and phones it drops back under the photo */
.tile-photo { position: relative; }
.tile-notch .tile-frame { aspect-ratio: 4 / 3; border-radius: 18px; }
.tile-notch .tile-label { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; min-height: 38px; max-width: calc(100% - 68px); margin: 0; padding: 6px 14px; border-radius: 12px; background: var(--card); box-shadow: 0 2px 10px rgba(42, 36, 33, .16); font: 600 clamp(.9375rem, 1.3vw, 1.125rem)/1.2 var(--display); letter-spacing: -.006em; }
.tile-notch .tile-note { margin-top: 10px; }
.tile-grid-two .tile-notch .tile-frame { aspect-ratio: 8 / 5; }
/* home only: wider, shorter family photos, so the tall subjects row after them reads as a different shape (Julian, 2026-11-05) */
@media (min-width: 901px) {
  .is-home .tile-grid { row-gap: clamp(18px, 2.6vw, 40px); }
  .is-home .tile-grid .tile-notch .tile-frame { aspect-ratio: 16 / 9; }
}
.tile-note { margin-top: 4px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }

/* ---- one big photo, then sand rising over it as a tab and carrying down ---- */
.subjects { position: relative; display: flow-root; padding: calc(var(--sec) * .75) var(--gut) calc(var(--sec) * .55); background: var(--sand); }
.tab { margin-bottom: clamp(26px, 2.8vw, 42px); } /* the change from cream to sand is the only divider above it (Julian) */
.tab p { margin-top: 8px; color: var(--ink-2); font-size: clamp(1rem, 1vw, 1.0625rem); }
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.9vw, 28px); }
.subj { display: block; color: inherit; text-decoration: none; }
.subj-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--photo-bg); }
.subj-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .7s var(--ease); }
.subj-name { display: block; margin-top: 10px; font-size: clamp(.9375rem, 1.1vw, 1.0625rem); font-weight: 500; line-height: 1.25; }
.subj-more { display: none; } /* the course list shows only in the wide row, below */
/* wide screens: a row of tall photos, and the one you point at opens wider. strip.js moves the open one. Names stay on one line, on a white pill.
   The open photo's pill also lists three courses (highlights in data.mjs) (Julian, option H, 2026-11-05) */
@media (min-width: 1181px) {
  .strip { display: flex; gap: 12px; height: clamp(380px, 33vw, 470px); }
  .strip li { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow .55s var(--ease); }
  .strip li.is-open { flex-grow: 1.7; }
  .subj { position: absolute; inset: 0; }
  .subj-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 18px; }
  .subj-name { position: absolute; left: 8px; bottom: 8px; display: block; max-width: calc(100% - 16px); margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--card); box-shadow: 0 2px 10px rgba(42, 36, 33, .16); }
  .subj-title { display: block; font: 600 clamp(13.5px, 1.08vw, 16px)/1.2 var(--display); letter-spacing: -.004em; white-space: nowrap; }
  .subj-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease); }
  .strip li:not(.is-open) .subj-more { width: 0; } /* so a closed pill stays as wide as its name */
  .strip li.is-open .subj-name { width: calc(100% - 16px); }
  .strip li.is-open .subj-more { grid-template-rows: 1fr; opacity: 1; transition-delay: .12s; }
  .subj-courses { display: grid; gap: 4px; min-height: 0; overflow: hidden; }
  .subj-courses span { position: relative; padding-left: 13px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
  .subj-courses span:first-child { margin-top: 8px; }
  .subj-courses span::before { content: ""; position: absolute; top: .55em; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
  .subj .tap { top: 10px; bottom: auto; width: 34px; height: 34px; }
  .subj .tap .arrow { width: 16px; height: 16px; }
}
@media (min-width: 1181px) and (max-width: 1320px) {
  .subj-courses span { padding-left: 11px; font-size: 13px; } /* the longest course names still fit the open pill */
  .subj-courses span::before { width: 4px; height: 4px; }
}
@media (min-width: 1181px) and (max-width: 1240px) {
  .subj-name { left: 6px; padding-inline: 9px; }
  .strip li.is-open .subj-name { width: calc(100% - 12px); }
}

/* ---- the steps as a student's file: six example papers stand up out of a folder, and the folder's
   edge is the rising line. Everything is sized in --k, so on desktop it scales as one picture. Below
   1180px the picture stays full size and scrolls sideways. The sand carries down from the subjects ---- */
.file { position: relative; overflow: clip; padding: calc(var(--sec) * 1.1) var(--gut) 0; background: var(--sand); color: var(--ink); }
.section-sand + .file { padding-top: calc(var(--sec) * .55); }
.file { isolation: isolate; scroll-margin-top: var(--header-h, 76px); } /* isolation keeps the section's layers under the sticky header */
.file-wrap { --k: calc(100cqw / 1250); --pitch: calc(var(--k) * 250); --beat: .3s; position: relative; container-type: inline-size; }
.file-field { position: relative; height: calc(var(--k) * 700); }
/* the heading, its line and the Book button fill the corner the line leaves free. Wide enough for the heading to stay on one line; it lets the mouse through to the papers except on its links */
.file-head { position: absolute; z-index: 22; left: 0; top: 0; width: calc(var(--k) * 760); pointer-events: none; }
.file-head a { pointer-events: auto; }
.file-head h2 { font: 600 calc(var(--k) * 58)/1.04 var(--display); letter-spacing: -.024em; }
.file-lead { max-width: calc(var(--k) * 440); margin-top: calc(var(--k) * 14); color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }

/* the folder: its top edge is the rising line */
.file-pocket, .file-line { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--k) * 846); overflow: visible; pointer-events: none; }
.file-pocket { z-index: 20; filter: drop-shadow(0 -1px 1px rgba(62, 40, 18, .16)) drop-shadow(0 -7px 12px rgba(62, 40, 18, .13)); }
.file-pocket path { fill: var(--paper); pointer-events: auto; }
.file-line { z-index: 21; clip-path: inset(-60px -100vw -60px -100vw); }
.file-line path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.file-short { display: none; }

/* each step holds its paper, its numbered dot on the line, and its name printed on the folder */
.file-step { --y: calc(574 - var(--i) * 60); position: absolute; left: calc(var(--pitch) * var(--i)); top: 0; width: var(--pitch); height: 0; }
.file-dot { position: absolute; z-index: 22; left: calc(var(--k) * 17); top: calc(var(--k) * var(--y)); display: grid; place-items: center; width: calc(var(--k) * 34); height: calc(var(--k) * 34); margin: calc(var(--k) * -17); border-radius: 50%; background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 calc(var(--k) * 3) var(--paper), 0 0 0 calc(var(--k) * 4.5) var(--line); }
.file-dot-hi { background: var(--flame); color: var(--ink); box-shadow: 0 0 0 calc(var(--k) * 3) var(--paper), 0 0 0 calc(var(--k) * 4.5) var(--flame); }
.file-cap { position: absolute; z-index: 22; left: 0; top: calc(var(--k) * (var(--y) + 30)); width: calc(var(--k) * 220); }
.file-cap h3 { font: 600 max(16px, calc(var(--k) * 19))/1.14 var(--display); letter-spacing: -.008em; text-wrap: balance; }
/* the number in the dot rolls up to its step as the line reaches it */
.file-num { display: block; overflow: hidden; height: 1em; font: 600 max(17px, calc(var(--k) * 19))/1 var(--display); font-variant-numeric: lining-nums; }
.file-roll { display: block; transform: translateY(calc((var(--n) - 1) * -1em)); }
.file-roll b { display: block; height: 1em; font: inherit; }

.file-foot { display: flex; align-items: center; gap: calc(var(--k) * 18); }
.file-foot-top { margin-top: calc(var(--k) * 26); }
.file-foot-end { display: none; }
.file-tel { font-size: max(.875rem, calc(var(--k) * 15.5)); font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(42, 36, 33, .35); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.file-tel:hover { text-decoration-color: currentColor; }
.file-mark { position: absolute; z-index: 22; right: 0; top: calc(var(--k) * 596); display: flex; align-items: center; gap: calc(var(--k) * 10); color: var(--ink-2); }
.file-mark img { width: calc(var(--k) * 30); height: auto; }
.file-mark b { font: 900 calc(var(--k) * 11.5)/1.16 "Nunito Wordmark", "Segoe UI", sans-serif; letter-spacing: .15em; white-space: nowrap; }
.file-mark b span { display: block; }
.file-mark em { padding-left: calc(var(--k) * 10); border-left: 1px solid var(--rule-sand); font-style: normal; font-size: calc(var(--k) * 12); line-height: 1.18; }
.file-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* the papers */
.file-sheet { position: absolute; z-index: var(--z); left: 0; top: calc(var(--k) * (var(--y) - 240)); width: calc(var(--k) * 190); height: calc(var(--k) * 274); scale: 1.05; translate: 0 calc(var(--k) * -8); transform: rotate(var(--r)); transform-origin: 50% 62%; transition: transform .55s var(--ease), filter .35s; filter: drop-shadow(0 calc(var(--k) * 1) calc(var(--k) * 1) rgba(62, 40, 18, .16)) drop-shadow(0 calc(var(--k) * 9) calc(var(--k) * 14) rgba(62, 40, 18, .14)); }
.file-page { position: absolute; inset: 0; overflow: hidden; padding: calc(var(--k) * 14) calc(var(--k) * 16) 0; border-radius: calc(var(--k) * 3); background: linear-gradient(112deg, #fff, var(--card) 46%, #FBF6EE); font-size: calc(var(--k) * 12.5); line-height: 1.34; color: var(--ink); }
.file-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.p-top { display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--k) * 6); min-height: calc(var(--k) * 20); }
.p4 .p-top { justify-content: space-between; }
.p-top img { width: calc(var(--k) * 15); height: auto; }
.p-pencil { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* each paper is a binder divider: its own coloured tab sticks out of the right edge from behind it, lower on each paper, and on the enrolment papers the one mark takes that colour. Orange stays the trial's.
   The family pages' papers (.sign-card) take the same tabs, coloured by kind */
:is(.file-sheet, .sign-card).p1 { --tab: #9FBDCB; --tab-soft: #D4E3EA; }
.sign-card.p2 { --tab: #E9C75E; }
.file-sheet.p3 { --tab: #A6C196; --tab-soft: #D6E4CC; }
.file-sheet.p4 { --tab: var(--flame); }
:is(.file-sheet, .sign-card).p5 { --tab: #DFA390; --tab-soft: #F3D3C8; }
.file-sheet.p6 { --tab: #B9ABD3; --tab-soft: #DDD5EC; }
.file-sheet::after, .sign-card::after { content: ""; position: absolute; z-index: -1; right: calc(var(--k) * -14); top: calc(var(--k) * (26 + var(--i) * 28)); width: calc(var(--k) * 30); height: calc(var(--k) * 42); border-radius: 0 calc(var(--k) * 6) calc(var(--k) * 6) 0; background: var(--tab); }
.file-sheet.p1 .p-bars i { border-color: #B6CCD6; }
.file-sheet.p1 .p-bars i::before { background: repeating-linear-gradient(112deg, #6F95A6 0 1.4px, transparent 1.4px 3.1px); }
.file-sheet.p1 .p-ring path { stroke: #4F7A8D; }
.file-sheet.p3 .p-snap { background: var(--tab-soft); }
.file-sheet.p5 .p-goal mark { background: linear-gradient(transparent 52%, var(--tab-soft) 52%, var(--tab-soft) 94%, transparent 94%); }
.file-sheet.p6 .p-chart .area { fill: var(--tab-soft); }
.file-sheet.p6 .p-chart .run { stroke: #6E5C94; }
.file-sheet.p6 .p-chart circle { fill: #6E5C94; }
.file-sheet.p6 .p-chart .hi { fill: var(--flame); }

/* 1 assessment sheet, stapled */
.p1::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--k) * 3); background: #F6EEE3; transform: rotate(1.7deg) translate(calc(var(--k) * 3), calc(var(--k) * 2)); }
.p-staple { position: absolute; z-index: 2; left: calc(var(--k) * 7); top: calc(var(--k) * 9); width: calc(var(--k) * 17); height: calc(var(--k) * 2.4); border-radius: 2px; background: linear-gradient(#B9B1A6, #837A6F); transform: rotate(-38deg); box-shadow: 0 1px 1px rgba(62, 40, 18, .3); }
.p-bars { display: grid; gap: calc(var(--k) * 17); margin-top: calc(var(--k) * 14); }
.p-bars li { position: relative; }
.p-bars span { display: flex; justify-content: space-between; font-size: calc(var(--k) * 15); font-weight: 500; }
.p-bars span b { font-weight: 600; }
.p-bars i { position: relative; display: block; height: calc(var(--k) * 13); margin-top: calc(var(--k) * 5); border: 1px solid var(--stem); border-radius: calc(var(--k) * 2); background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--rule) 0 10%); }
.p-bars i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: repeating-linear-gradient(112deg, var(--ink-2) 0 1.2px, transparent 1.2px 3.1px); }
.p-bars i::after { content: ""; position: absolute; left: calc(var(--v) * 100%); top: calc(var(--k) * -4); bottom: calc(var(--k) * -4); width: calc(var(--k) * 2); border-radius: 2px; background: var(--ink); transform: rotate(7deg); }
.p-ring { position: absolute; left: calc(var(--k) * -10); top: calc(var(--k) * -6); width: calc(var(--k) * 74); height: calc(var(--k) * 31); overflow: visible; }

/* 2 teacher's note, torn off a pad and taped down */
.p2 .file-page { padding-top: calc(var(--k) * 22); border-radius: 0; background: linear-gradient(112deg, #FFFCF4, #FDF7EA); -webkit-mask: radial-gradient(circle calc(var(--k) * 3.4) at 50% 0, #0000 96%, #000) top/calc(var(--k) * 11) calc(var(--k) * 8) repeat-x, linear-gradient(#000, #000) 0 calc(var(--k) * 8)/100% 100% no-repeat; mask: radial-gradient(circle calc(var(--k) * 3.4) at 50% 0, #0000 96%, #000) top/calc(var(--k) * 11) calc(var(--k) * 8) repeat-x, linear-gradient(#000, #000) 0 calc(var(--k) * 8)/100% 100% no-repeat; }
.p-tape { position: absolute; z-index: 3; left: calc(var(--k) * 52); top: calc(var(--k) * -10); width: calc(var(--k) * 92); height: calc(var(--k) * 25); background: #E4D3B8; opacity: .86; transform: rotate(-3.5deg); clip-path: polygon(0 0, 2% 12%, 0 25%, 2% 38%, 0 50%, 2% 62%, 0 75%, 2% 88%, 0 100%, 100% 100%, 98% 88%, 100% 75%, 98% 62%, 100% 50%, 98% 38%, 100% 25%, 98% 12%, 100% 0); }
.p-ruled { margin: calc(var(--k) * 6) calc(var(--k) * -16) 0; padding: 0 calc(var(--k) * 16) calc(var(--k) * 170); background: repeating-linear-gradient(transparent 0 calc(var(--k) * 29), var(--rule) calc(var(--k) * 29) calc(var(--k) * 30)); font-size: calc(var(--k) * 17); line-height: calc(var(--k) * 30); }

/* 3 teacher match: a real teacher, the photo clipped to a card */
.p3 .file-page { border-radius: calc(var(--k) * 6); background: linear-gradient(112deg, #fff, var(--card)); }
.p-snap { margin-top: calc(var(--k) * 6); height: calc(var(--k) * 116); padding: calc(var(--k) * 4); background: #fff; box-shadow: 0 1px 2px rgba(62, 40, 18, .22), 0 4px 8px rgba(62, 40, 18, .12); transform: rotate(-1.3deg); }
.p-snap img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 34%; }
.p-clip { position: absolute; z-index: 3; left: calc(var(--k) * 152); top: calc(var(--k) * 26); width: calc(var(--k) * 17); height: calc(var(--k) * 48); overflow: visible; transform: rotate(5deg); }
.p-clip path { fill: none; stroke-linecap: round; }
.p-who { display: block; margin-top: calc(var(--k) * 10); font: 600 calc(var(--k) * 21)/1.1 var(--display); letter-spacing: -.01em; }
.p-subj { display: block; margin-top: calc(var(--k) * 1); color: var(--ink-2); font-size: calc(var(--k) * 14); }

/* 4 half-price trial pass, the one dark paper */
.p4 .file-page { padding: calc(var(--k) * 14) calc(var(--k) * 17) 0; border-radius: calc(var(--k) * 13); background: var(--ink); color: var(--on-ink); -webkit-mask: radial-gradient(circle calc(var(--k) * 10) at 0 calc(var(--k) * 188), #0000 97%, #000), radial-gradient(circle calc(var(--k) * 10) at 100% calc(var(--k) * 188), #0000 97%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle calc(var(--k) * 10) at 0 calc(var(--k) * 188), #0000 97%, #000), radial-gradient(circle calc(var(--k) * 10) at 100% calc(var(--k) * 188), #0000 97%, #000); mask-composite: intersect; }
.p4 .file-page::after { opacity: .14; mix-blend-mode: screen; }
.p-big { display: block; margin-top: calc(var(--k) * 10); font: 600 calc(var(--k) * 58)/.92 var(--display); letter-spacing: -.03em; color: var(--flame); }
.p-big span { display: block; }
.p-perf { position: absolute; left: calc(var(--k) * 16); right: calc(var(--k) * 16); top: calc(var(--k) * 187); border-top: calc(var(--k) * 2) dotted rgba(251, 244, 236, .5); }
.p-stub { position: absolute; left: calc(var(--k) * 17); right: calc(var(--k) * 17); top: calc(var(--k) * 200); }
.p-stub b { display: block; font: 600 calc(var(--k) * 17)/1.1 var(--display); }

/* 5 plan page, punched for a binder */
.p5 .file-page { padding-left: calc(var(--k) * 34); -webkit-mask: radial-gradient(circle calc(var(--k) * 5.5) at calc(var(--k) * 15) calc(var(--k) * 46), #0000 96%, #000), radial-gradient(circle calc(var(--k) * 5.5) at calc(var(--k) * 15) calc(var(--k) * 124), #0000 96%, #000), radial-gradient(circle calc(var(--k) * 5.5) at calc(var(--k) * 15) calc(var(--k) * 202), #0000 96%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle calc(var(--k) * 5.5) at calc(var(--k) * 15) calc(var(--k) * 46), #0000 96%, #000), radial-gradient(circle calc(var(--k) * 5.5) at calc(var(--k) * 15) calc(var(--k) * 124), #0000 96%, #000), radial-gradient(circle calc(var(--k) * 5.5) at calc(var(--k) * 15) calc(var(--k) * 202), #0000 96%, #000); mask-composite: intersect; }
.p-margin { position: absolute; left: calc(var(--k) * 28); top: 0; bottom: 0; border-left: 1px solid var(--rule); }
.p-goal { margin-top: calc(var(--k) * 8); color: var(--ink-2); font-size: calc(var(--k) * 12); }
.p-goal strong { display: block; margin-top: calc(var(--k) * 3); color: var(--ink); font: 600 calc(var(--k) * 18)/1.16 var(--display); letter-spacing: -.008em; }
.p-goal mark { margin-left: calc(var(--k) * -2); padding: 0 calc(var(--k) * 2); background: linear-gradient(transparent 52%, #F3DFC2 52%, #F3DFC2 94%, transparent 94%); color: inherit; }
.p-rate { margin-top: calc(var(--k) * 14); padding-top: calc(var(--k) * 10); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: calc(var(--k) * 13); }
.p-rate strong { display: block; color: var(--ink); font: 600 calc(var(--k) * 32)/1.05 var(--display); letter-spacing: -.02em; }

/* 6 progress report: a second page peeks out behind it, and its little chart repeats the rising line */
.p6::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--k) * 3); background: #F6EEE3; transform: rotate(-1.9deg) translate(calc(var(--k) * -2), calc(var(--k) * 3)); }
.p-chart { display: block; width: 100%; height: auto; margin-top: calc(var(--k) * 6); overflow: visible; }
.p-chart .grid { stroke: var(--rule); stroke-width: 1; }
.p-chart .area { fill: var(--sand); }
.p-chart .run { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.p-chart circle { fill: var(--ink); }
.p-chart .hi { fill: var(--flame); }
.p-ends { display: flex; justify-content: space-between; margin-top: calc(var(--k) * 3); color: var(--ink-2); font-size: max(10px, calc(var(--k) * 10.5)); }
.p-say { margin-top: calc(var(--k) * 10); font-size: calc(var(--k) * 14.5); line-height: 1.3; }

/* the papers lift to be read, where there's a mouse */
@media (hover: hover) and (min-width: 1181px) {
  .file-sheet { cursor: zoom-in; }
  .file-step:hover .file-sheet { z-index: 15; scale: 1; transform: translateY(calc(var(--k) * -24)) rotate(0deg) scale(1.2); filter: drop-shadow(0 calc(var(--k) * 2) calc(var(--k) * 2) rgba(62, 40, 18, .16)) drop-shadow(0 calc(var(--k) * 18) calc(var(--k) * 30) rgba(62, 40, 18, .24)); }
}

/* the line draws and each paper slides up out of the folder as the line reaches it; route.js holds them back until then */
.file.is-waiting .file-sheet { transform: translateY(calc(var(--k) * 400)); transition: none; }
.file.is-waiting .file-line { clip-path: inset(-60px 100% -60px -100vw); }
.file.is-waiting .file-dot { transform: scale(0); }
.file.is-waiting .file-num { opacity: 0; }
/* --beat is the time the line takes to reach the next dot, so it follows the pitch */
.file.is-rising .file-sheet { animation: file-rise 1s var(--ease) backwards; animation-delay: calc(var(--i) * var(--beat) * .88); }
.file.is-rising .file-line { animation: file-draw 1.7s cubic-bezier(.4, .1, .5, 1) backwards; }
.file.is-rising .file-dot { animation: file-pop .45s var(--ease) backwards; animation-delay: calc(var(--i) * var(--beat)); }
.file.is-rising .file-num { animation: file-show .18s linear backwards; animation-delay: calc(var(--i) * var(--beat)); }
.file.is-rising .file-roll { animation: file-roll calc(.32s + var(--n) * .1s) cubic-bezier(.3, .7, .2, 1) backwards; animation-delay: calc(var(--i) * var(--beat)); }
@keyframes file-rise { from { transform: translateY(calc(var(--k) * 400)) rotate(0deg); } }
@keyframes file-draw { from { clip-path: inset(-60px 100% -60px -100vw); } }
@keyframes file-pop { from { transform: scale(0); } }
@keyframes file-show { from { opacity: 0; } }
@keyframes file-roll { from { transform: translateY(0); } }

/* tablets and phones: the papers stay readable at full size and the row scrolls sideways, with a gentler climb */
@media (max-width: 1180px) {
  .file-wrap { --k: 1px; --pitch: 212px; --beat: .25s; }
  .file-head { position: static; width: auto; margin-bottom: 14px; pointer-events: auto; }
  .file-lead { max-width: 34em; margin-top: 10px; }
  .file-head h2 { font: 600 clamp(28px, 3vw, 46px)/1.1 var(--display); letter-spacing: -.018em; text-wrap: balance; }
  .file .strip-hint { display: flex; margin-bottom: 0; }
  .file-scroll { overflow-x: auto; margin-inline: calc(-1 * var(--gut)); scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); scrollbar-width: none; }
  .file-scroll::-webkit-scrollbar { display: none; }
  .file-stage { width: max-content; padding-inline: var(--gut); overflow: clip; }
  /* the row ends after the fifth paper's tab; the line keeps its 1250 px drawing and runs on past the edge */
  .file-field { width: 1064px; height: 416px; }
  .file-pocket, .file-line { width: 1250px; }
  .file-step { --y: calc(320 - var(--i) * 14); scroll-snap-align: start; }
  .file-sheet { scale: none; translate: none; }
  .file-cap { width: 186px; }
  .file-tall { display: none; }
  .file-short { display: inline; }
  .file-after { margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) calc(var(--sec) * .5); background: var(--paper); }
  .file .strip-bar { display: block; margin-top: 0; }
  .file-foot { flex-wrap: wrap; gap: 14px 18px; margin-top: 24px; }
  .file-foot-top { display: none; }
  .file-foot-end { display: flex; }
  .file-mark { display: none; }
}
@media (max-width: 600px) {
  .file-foot .btn { width: 100%; min-height: 52px; }
  .file-foot { justify-content: center; }
  .file-tel { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .file-sheet { transition: none; }
  .file.is-rising .file-sheet, .file.is-rising .file-line, .file.is-rising .file-dot, .file.is-rising .file-num, .file.is-rising .file-roll, .is-seen .strip-hint .arrow { animation: none; }
}

/* ---- faces first, credentials on click ---- */
/* the home page keeps its teachers to one row. Phones get two even rows of three */
@media (min-width: 601px) {
  .wall-line .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 20px clamp(32px, 4vw, 64px); }
.faq h2 { font: 600 clamp(28px, 3vw, 46px)/1.1 var(--display); letter-spacing: -.018em; text-wrap: balance; }
.faq-list { border-bottom: 1px solid var(--rule-sand); }
.faq-item { border-top: 1px solid var(--rule-sand); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding-block: 14px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 { font: 600 clamp(1.0625rem, 1.4vw, 1.25rem)/1.25 var(--display); letter-spacing: -.006em; text-wrap: balance; }
.faq-item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card); font-size: 20px; line-height: 1; transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 62ch; padding: 0 52px 20px 0; color: var(--ink-2); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.5; }
.faq-item .link { color: var(--ink); }
@media (max-width: 900px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}
.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(30px, 3vw, 44px) clamp(14px, 1.9vw, 28px); }
.face { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.face-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 14px; background: var(--sand); }
.face-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.face-plus { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.face-plus svg { width: 12px; height: 12px; }
.face-name { display: block; margin-top: 10px; font-size: 1rem; font-weight: 500; line-height: 1.2; }
.face-sub { display: block; margin-top: 2px; color: var(--ink-2); font-size: .875rem; line-height: 1.3; }
.t-pop { width: min(720px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 24px 64px rgba(42, 36, 33, .28); }
.t-pop::backdrop { background: rgba(42, 36, 33, .5); }
.t-pop-in { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.t-pop-in > img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.t-pop-text { position: relative; padding: 28px 28px 22px; }
.t-pop h3 { padding-right: 40px; font: 600 clamp(24px, 2vw, 30px)/1.15 var(--display); letter-spacing: -.012em; }
.t-pop ul { margin-top: 14px; }
.t-pop li { padding-block: 9px; border-top: 1px solid var(--rule); font-size: .96875rem; line-height: 1.35; }
.t-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); cursor: pointer; }
.t-close svg { width: 14px; height: 14px; }
.teacher-role { margin-top: 2px; font-size: .90625rem; font-weight: 600; }
.teacher-subjects { margin-top: 2px; color: var(--ink-2); font-size: .9375rem; }

/* teachers without a photo: one row each, credentials one tap away */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.person { border-top: 1px solid var(--rule-sand); }
.person summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 2px 12px; padding-block: 14px; cursor: pointer; list-style: none; }
.person summary::-webkit-details-marker { display: none; }
.person-name { font-weight: 600; line-height: 1.25; }
.person-sub { grid-column: 1; color: var(--ink-2); font-size: .875rem; line-height: 1.3; }
.person-plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 14px; height: 14px; transition: transform .2s var(--ease); }
.person-plus svg { display: block; }
.person[open] .person-plus { transform: rotate(45deg); }
.person ul { padding-bottom: 14px; }
.person li { padding-block: 5px; font-size: .90625rem; line-height: 1.35; }

/* ---- reviews: one number, one quote, no boxes ---- */
.proofs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.score { display: block; color: inherit; text-decoration: none; }
.score-num { display: block; font: 600 clamp(106px, 15vw, 256px)/.8 var(--display); letter-spacing: -.045em; }
.score-sub { display: flex; align-items: center; gap: 8px; margin-top: clamp(16px, 1.6vw, 24px); font-size: clamp(1rem, 1.2vw, 1.1875rem); font-weight: 500; }
.big-quote blockquote { font: 600 clamp(24px, 2.4vw, 40px)/1.16 var(--display); letter-spacing: -.018em; text-wrap: balance; }

/* ---- which class fits your child: find the situation, then the course names ---- */
.paths { display: grid; gap: clamp(28px, 3vw, 44px) clamp(20px, 2.8vw, 44px); }
.paths-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paths-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.path { padding-top: 16px; border-top: 2px solid var(--ink); }
.path h3 { font: 600 clamp(1.1875rem, 1.55vw, 1.5rem)/1.2 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.path ul { margin-top: 14px; }
/* each course gets a small flame from the logo, and the lists start level across the columns */
.path li { position: relative; padding: 8px 0 8px 24px; line-height: 1.35; }
.path li + li { border-top: 1px solid var(--rule); }
.path li::before { content: ""; position: absolute; top: calc(8px + .675em - 7.5px); left: 0; width: 12px; height: 15px; background: var(--flame); -webkit-mask: var(--flame-mark) center / contain no-repeat; mask: var(--flame-mark) center / contain no-repeat; }
.path p { margin-top: 10px; color: var(--ink-2); line-height: 1.45; }
@supports (grid-template-rows: subgrid) {
  .path { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .path h3 { padding-bottom: 10px; }
  .path ul, .path p { margin-top: 0; }
}

/* ---- real results, set large, each naming its teacher ---- */
.proof-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-bottom: clamp(40px, 4.4vw, 68px); }
.proof-row strong { display: block; font: 600 clamp(32px, 3.4vw, 52px)/1.05 var(--display); letter-spacing: -.022em; }
.proof-row span { display: block; margin-top: 10px; line-height: 1.35; }
.proof-row em { display: block; margin-top: 6px; color: var(--ink-2); font-size: .90625rem; font-style: normal; }

/* ---- the offer: price, what's included and how to start, beside a photo ---- */
.offer, .help { display: grid; align-items: center; gap: clamp(32px, 5vw, 80px); }
.offer { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.offer-media, .help-media { overflow: hidden; aspect-ratio: 5 / 4; border-radius: 20px; background: var(--photo-bg); }
.offer-media img, .help-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.offer-text p { margin-top: 14px; color: var(--ink-2); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.45; }
.ticks { margin-top: 20px; }
.ticks li { position: relative; padding: 7px 0 7px 30px; line-height: 1.35; }
.ticks li::before { content: ""; position: absolute; top: 15px; left: 4px; width: 14px; height: 7px; border-bottom: 2px solid var(--flame); border-left: 2px solid var(--flame); transform: rotate(-45deg); }
.offer .actions { margin-top: clamp(22px, 2.4vw, 32px); }
.offer-start { margin-top: clamp(22px, 2.4vw, 32px); }
.offer-start h3 { font: 600 clamp(1.0625rem, 1.3vw, 1.1875rem)/1.2 var(--display); letter-spacing: -.006em; }
.offer-start .level-links { margin-top: 12px; }
.offer-text p.offer-enrol { margin-top: 16px; color: var(--ink); font-size: 1rem; }

/* ---- sound familiar: the parent's own words, then how we help ---- */
/* a little room under the papers before Our approach (Julian, 2026-11-05) */
.signs-sec { padding-bottom: calc(var(--sec) * .4); }
/* three example papers in the enrolment file's look, each with the parent's words printed on it. --u scales the set as one picture and --k is what the paper styles read */
/* the set stops at 980px so the papers stay small beside the page's other sections, and it sits centred under a centred heading, with room between the papers (Julian, 2026-11-05) */
.sign-wrap { --u: calc(100cqw / 1250); max-width: 980px; margin-inline: auto; container-type: inline-size; }
.signs-sec .section-head { margin-inline: auto; text-align: center; }
.sign-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 80); }
.sign-card { --k: max(.8px, calc(var(--u) * 1.3)); position: relative; display: flex; min-height: max(300px, calc(var(--u) * 390)); transform: rotate(var(--r)); transition: transform .55s var(--ease), filter .35s; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1) rgba(62, 40, 18, .16)) drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 20) rgba(62, 40, 18, .16)); }
.sign-card .file-page { position: relative; inset: auto; flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* the parent's words are set in the text face, lighter than the black headings, and marked with a highlighter in the paper's tab colour (Julian picked D, 2026-11-05) */
.sign-say { position: relative; z-index: 1; margin-top: auto; padding-block: calc(var(--u) * 18) calc(var(--u) * 24); color: var(--ink); font: 500 max(1.0625rem, calc(var(--u) * 26))/1.38 "Radio Canada", "Segoe UI", sans-serif; text-wrap: balance; }
.sign-say mark { padding: 0 2px; background: linear-gradient(transparent 50%, color-mix(in srgb, var(--tab) 28%, transparent) 50% 92%, transparent 92%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sign-card .p-ruled { padding-bottom: 0; }
.sign-card .p-ruled b { font-weight: 600; }
.sign-card .p-ruled s { text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; }
.sign-scrib { display: inline-block; width: calc(var(--k) * 62); height: calc(var(--k) * 22); margin-left: calc(var(--k) * 2); vertical-align: middle; overflow: visible; }
.sign-title { display: block; margin-top: calc(var(--k) * 4); font: 600 calc(var(--k) * 19)/1.1 var(--display); letter-spacing: -.01em; }
.sign-marks { margin-top: calc(var(--k) * 8); font-size: calc(var(--k) * 14); font-weight: 500; }
.sign-marks li { position: relative; display: flex; justify-content: space-between; padding: calc(var(--k) * 6) calc(var(--k) * 6) calc(var(--k) * 6) 0; border-top: 1px solid var(--rule); }
.sign-marks b { position: relative; font: 600 calc(var(--k) * 16)/1 var(--display); }
/* the ring is sized from the mark inside it, so it fits a C or an A+ or a 62 */
.sign-ring { position: absolute; left: 50%; top: 50%; width: calc(100% + var(--k) * 22); height: calc(var(--k) * 30); overflow: visible; transform: translate(-50%, -50%); }
.sign-ring path { fill: none; stroke: var(--flame); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sign-label { margin-top: calc(var(--k) * 6); color: var(--ink-2); font-size: calc(var(--k) * 14); font-weight: 500; }
.sign-score { position: relative; display: inline-block; margin-top: calc(var(--k) * 2); font: 600 calc(var(--k) * 56)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.sign-score-long { font-size: calc(var(--k) * 38); line-height: 1.2; letter-spacing: -.02em; }
.sign-under { position: absolute; left: 0; bottom: calc(var(--k) * -8); width: 100%; height: calc(var(--k) * 10); overflow: visible; }
@media (hover: hover) {
  .sign-card:hover { z-index: 2; transform: translateY(calc(var(--u) * -10)) rotate(0deg); }
}
/* they settle into place once as they come into view (page.js). Without it, they're simply there */
.sign-cards.is-waiting .sign-card { opacity: 0; transform: translateY(calc(var(--u) * 60)) rotate(0deg); transition: none; }
.sign-cards.is-rising .sign-card { animation: sign-rise .8s var(--ease) backwards; animation-delay: calc(var(--i) * .12s); }
@keyframes sign-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 60)) rotate(0deg); } }
@media (max-width: 760px) {
  .sign-wrap { --u: 1px; container-type: normal; }
  .sign-cards { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  /* on phones the papers use the full column; they stay short, so they don't feel big (Julian, 2026-11-05) */
  .sign-card { --k: .86px; width: 100%; min-height: 0; }
  .sign-say { margin-top: 14px; padding-block: 14px 16px; font-size: 1.0625rem; }}
.help { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.help .section-head { margin-bottom: clamp(16px, 1.8vw, 26px); }
.help-rows li { padding-block: clamp(14px, 1.3vw, 20px); border-top: 1px solid var(--rule); }
.help-rows h3 { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 600; line-height: 1.25; }
.help-rows p { margin-top: 4px; color: var(--ink-2); font-size: clamp(.9375rem, 1vw, 1.03125rem); line-height: 1.45; }

/* ---- two stages of school, photo first, each course one tap away ---- */
/* each stage shares its rows with the other, so headings, sentences and course lists start level */
.levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); }
.level { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.level-frame { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--photo-bg); }
.level-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.level h3 { margin-top: 20px; font: 600 clamp(1.375rem, 2vw, 1.875rem)/1.15 var(--display); letter-spacing: -.012em; }
.level p { margin-top: 8px; color: var(--ink-2); line-height: 1.45; }
.level-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: clamp(20px, 2.4vw, 36px); margin-top: 18px; border-bottom: 1px solid var(--rule-sand); }
.level-links a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; min-height: 44px; padding: 8px 0 8px 16px; border-top: 1px solid var(--rule-sand); font-weight: 500; line-height: 1.25; color: inherit; text-decoration: none; }
.level-links a::before { content: ""; position: absolute; top: calc(50% - 2.5px); left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.level-links a::after { content: "→"; flex: none; color: var(--ink-2); transition: transform .2s var(--ease), color .2s var(--ease); }
.level-links a:hover::after { color: var(--ink); transform: translateX(3px); }

/* a note that must not be missed */
.ask-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px clamp(28px, 5vw, 80px); margin-top: clamp(32px, 3.6vw, 52px); padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.6vw, 52px); border-radius: 22px; background: var(--ink); color: var(--on-ink); }
.ask-line { max-width: 26em; font: 600 clamp(1.375rem, 2.1vw, 1.9375rem)/1.2 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.ask-note { margin-top: 12px; color: var(--on-ink-2); font-size: .9375rem; }
.ask-note .link { color: var(--on-ink); text-decoration-color: rgba(251, 244, 236, .5); }
.ask-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ask-tel { font-size: .9375rem; font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(251, 244, 236, .5); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ask-tel:hover { text-decoration-color: currentColor; }
@media (max-width: 480px) {
  .level-links { grid-template-columns: minmax(0, 1fr); }
}

/* ---- one review, one number ---- */
.review { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.review-score { display: block; color: inherit; text-decoration: none; }
.review-num { display: block; font: 600 clamp(72px, 7.4vw, 112px)/.9 var(--display); letter-spacing: -.035em; }
.review-sub { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.review-sub, .score-sub { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.review-quote blockquote { max-width: 26em; font: 600 clamp(1.3125rem, 2.1vw, 2.0625rem)/1.22 var(--display); letter-spacing: -.014em; text-wrap: balance; }
/* reviews scroll sideways on their own; without the script they can still be swiped */
/* the dots sit above the quote, so a short quote doesn't leave a gap before them */
.quotes { display: flex; flex-direction: column-reverse; min-width: 0; }
.quotes-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 4px; }
.quotes-track::-webkit-scrollbar { display: none; }
.quotes-track > figure { flex: 0 0 100%; min-width: 0; margin: 0; padding-inline: 4px; scroll-snap-align: start; }
.quotes figcaption { margin-top: clamp(8px, .8vw, 12px); color: var(--ink-2); font-size: clamp(.9375rem, 1.02vw, 1.0625rem); font-weight: 500; }
.quote-by { white-space: nowrap; }
.quotes-controls { display: flex; align-items: center; gap: 2px; margin: 0 0 clamp(12px, 1.2vw, 16px) -6px; }
.quotes-controls[hidden] { display: none; }
.quotes-controls button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }

/* ---- our story: a photo beside comfortable reading ---- */
.story { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.story-media { overflow: hidden; aspect-ratio: 5 / 4; border-radius: 20px; background: var(--photo-bg); }
.story-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.story-text .section-head { margin-bottom: clamp(16px, 1.8vw, 26px); }
.story-text p { max-width: 36em; }
.story-text p + p { margin-top: 14px; }
.section-sand .proof-row + .paths { margin-top: clamp(8px, 1vw, 16px); }

/* ---- the universities, as their logos ---- */
.logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px) clamp(14px, 1.8vw, 28px); }
.logos img { width: 100%; height: auto; }
.logos-head { margin: clamp(26px, 3vw, 44px) 0 clamp(14px, 1.4vw, 20px); color: var(--ink-2); font-size: .9375rem; font-weight: 600; }
.section-head + .logos-head { margin-top: 0; }

.rows { border-top: 1px solid var(--rule); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a { display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: baseline; gap: 12px 20px; padding-block: clamp(13px, 1.3vw, 19px); text-decoration: none; }
.rows .arrow { align-self: center; }
.row-name { font-size: clamp(1rem, 1.25vw, 1.1875rem); font-weight: 500; line-height: 1.25; }
.section-sand .rows, .section-sand .rows li { border-color: var(--rule-sand); }
.rows-big .row-name { font: 600 clamp(1.25rem, 1.9vw, 1.8125rem)/1.2 var(--display); letter-spacing: -.012em; }
.rows-big a { padding-block: clamp(16px, 1.6vw, 24px); }

.point-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.2vw, 48px) clamp(24px, 4vw, 64px); }
.point-grid div { padding-top: 14px; border-top: 1px solid var(--rule); }
.section-sand .point-grid div { border-color: var(--rule-sand); }
.point-grid h3 { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 600; line-height: 1.25; }
.point-grid p { margin-top: 6px; color: var(--ink-2); font-size: clamp(.9375rem, 1vw, 1.03125rem); line-height: 1.45; }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 88px); }
.two-col article > p:not(.more) { margin-top: 12px; }
.two-col h3 { margin-top: 26px; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 600; line-height: 1.25; }
.tick { margin-top: 16px; }
.tick li { padding-block: 9px; border-top: 1px solid var(--rule); font-size: clamp(.9375rem, 1vw, 1.03125rem); line-height: 1.35; }
.section-sand .tick li { border-color: var(--rule-sand); }

.prose { max-width: 60ch; box-sizing: content-box; } /* about 70 characters a line: ch is the width of a zero, wider than an average letter */
.prose h2 { margin-top: 28px; font: 600 clamp(1.25rem, 1.7vw, 1.625rem)/1.2 var(--display); text-wrap: balance; }
.prose h2:first-child { margin-top: 0; margin-bottom: 18px; }
.prose p { margin-top: 12px; }

.side-big { font: 600 clamp(1.375rem, 2vw, 1.875rem)/1.15 var(--display); letter-spacing: -.012em; }
.side-big a { text-decoration: none; white-space: nowrap; }
.side-big a:hover { text-decoration: underline; }
.path a { overflow-wrap: anywhere; }

/* ---- form ---- */
.form-split { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.field label { font-size: .9375rem; font-weight: 500; }
.field input, .field select, .field textarea { scroll-margin-top: 40px; /* a field the browser scrolls to keeps its label clear of the sticky header */ width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--field-line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field-hp { position: absolute; left: -9999px; }
.form-note { margin-top: 14px; color: var(--ink-2); font-size: .875rem; }
.form-status { margin-top: 12px; font-weight: 500; }
.form-status[data-state="error"] { color: #B3261E; }
.form-status[data-state="success"] { color: #1E6B3A; }
.form fieldset:disabled { opacity: .6; }
.side { padding: clamp(20px, 2vw, 30px); border-radius: 14px; background: var(--sand); }
.side .label { margin-top: 20px; }
.side .label:first-child { margin-top: 0; }
.side p + p { margin-top: 4px; }

/* ---- closing band and footer: ink, with a sheet edge rising over the page ---- */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px clamp(24px, 4vw, 64px); padding: clamp(44px, 5.5vw, 80px) var(--gut); border-radius: 24px 24px 0 0; background: var(--ink); color: var(--on-ink); }
.cta-band p { margin-top: 14px; color: var(--on-ink-2); font-size: clamp(1rem, 1vw, 1.0625rem); }
.cta-band .actions { margin-top: 0; }

.site-footer { background: var(--ink); color: var(--on-ink-2); font-size: .9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 2.6vw, 44px); padding: clamp(36px, 4vw, 60px) var(--gut); border-top: 1px solid rgba(251, 244, 236, .16); }
.footer-brand img { width: 150px; height: auto; }
.footer-brand p { margin-top: 12px; }
.footer-head { margin-bottom: 10px; color: var(--on-ink); font-size: .9375rem; font-weight: 600; }
.site-footer li { padding-block: 4px; line-height: 1.3; }
.site-footer a { color: var(--on-ink-2); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* every dark surface gets a light focus ring */
.cta-band :focus-visible, .ask-panel :focus-visible, .site-footer :focus-visible { outline-color: var(--on-ink); }
.site-footer address, .site-footer address + p { margin-bottom: 10px; }
.foot-contact { line-height: 1.7; } /* keeps the phone and email links far enough apart to tap */
.footer-social a { display: inline-flex; align-items: center; min-height: 28px; margin-right: 12px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px var(--gut) 22px; border-top: 1px solid rgba(251, 244, 236, .16); font-size: .875rem; }
.footer-legal a { margin-right: 14px; }

/* ---- the opening: plays once on load, then only the slideshow moves ---- */
@media (prefers-reduced-motion: no-preference) {
  .is-home .brand img { transform-origin: 50% 100%; animation: catch .8s ease-out backwards; }
  .is-home .brand-word { animation: wipe .8s var(--ease) .18s backwards; }
  .is-home .brand-kind { animation: fade .6s ease-out .45s backwards; }
  .headline-line { overflow: hidden; overflow: visible clip; padding-block: .06em .16em; margin-block: -.06em -.16em; }
  .headline-line > span { animation: line .95s var(--ease) .12s backwards; }
  .headline-line + .headline-line > span { animation-delay: .22s; }
  .panel .lead { animation: rise .75s var(--ease) .42s backwards; }
  .panel .btn { animation: rise .75s var(--ease) .52s backwards; }
  .panel .btn + .btn { animation-delay: .6s; }
  .photos { animation: open 1.3s var(--ease) backwards; }
  .slide:first-of-type { animation: settle 1.9s var(--ease) backwards; }
  .hero-stats { animation: rise .75s var(--ease) .74s backwards; }
  .hero-stats .star { animation: star .7s var(--ease) .95s backwards; }

  .page-hero-text > * { animation: rise .7s var(--ease) backwards; }
  .page-hero-text > .page-title { animation-delay: .06s; }
  .page-hero-text > .lead { animation-delay: .14s; }
  .page-hero-text > .actions { animation-delay: .22s; }
  .page-hero-media { animation: open 1s var(--ease) backwards; }
}
@keyframes catch { 0% { opacity: 0; transform: scale(.55, .35); } 55% { opacity: 1; transform: scale(1.03, 1.1); } 100% { transform: none; } }
@keyframes wipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes line { from { transform: translateY(108%); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes star { from { opacity: 0; transform: scale(.3) rotate(-60deg); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes open { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .slide, .btn, .arrow, .tile-frame img, .subj-frame img, .face-photo img, .person-plus, .strip li, .subj-more { transition: none; }
}

/* ---- narrower desktops: the phone number gives way first, then the nav folds ---- */
@media (max-width: 1320px) {
  .brand-kind { display: none; }
}
@media (max-width: 1180px) {
  .site-nav, .site-actions { display: none; }
  .menu { display: block; }
  .site-header-in { position: relative; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paths-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- phones and tablets: message first, photos underneath ---- */
@media (max-width: 900px) {
  :root { --u: 14.5px; --header-h: 68px; }
  .brand img { height: 42px; }
  .hero-home, .page-hero, .two-col, .form-split, .cta-band, .proofs, .people, .offer, .help, .story, .levels, .review, .paths-3, .proof-row { grid-template-columns: minmax(0, 1fr); }
  .hero-home { min-height: 0; }
  .panel { align-items: stretch; padding: 24px var(--gut); }
  .message { width: auto; }
  /* inner heroes match the home page here: the photo first, edge to edge */
  .page-hero { display: flex; flex-direction: column; gap: 22px; padding: 0 0 32px; }
  .page-hero-text { padding-inline: var(--gut); }
  /* review dots sit above the quote, so a short quote doesn't leave a gap before them */
  .quotes { display: flex; flex-direction: column-reverse; }
  .quotes-controls { margin: 0 0 12px -6px; }
  /* the score sits on one line, so the review itself comes sooner */
  .review-score, .score { display: flex; align-items: flex-end; gap: 12px; }
  .review-num, .score-num { font-size: 68px; line-height: .85; }
  .review-sub, .score-sub { margin: 0 0 3px; font-size: 1rem; }
  .review, .proofs { gap: 18px; }
  /* home page: the photo first, then the headline and button, then the numbers */
  .hero-home { display: flex; flex-direction: column; }
  .hero-media { display: contents; }
  .photos { order: -1; width: 100%; border-radius: 0; }
  /* the facts card sits under the buttons, two by two */
  .hero-stats { position: static; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; margin: 4px var(--gut) 12px; padding-block: 18px; }
  .hero-stats > li { padding-inline: 20px; }
  .hero-stats > li + li { border-left: 0; }
  .hero-stats > li:nth-child(even) { border-left: 1px solid var(--rule); }
  .help-media, .offer-media, .story-media { aspect-ratio: 16 / 10; }
  .review { gap: 20px; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .headline { font-size: min(10.8vw, 64px); }
  .headline span { white-space: normal; }
  .photos { aspect-ratio: 4 / 3; min-height: 0; }
  .page-hero-media { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
  .cta-band .actions { justify-content: flex-start; }
  /* the strip scrolls sideways on phones and small tablets */
  .strip { display: flex; overflow-x: auto; margin: -6px calc(-1 * var(--gut)); padding: 6px var(--gut); /* the 6px keeps a focus ring from being cut off */ gap: 12px; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  /* a plain instruction and a position bar, so it's clear this row moves sideways */
  .strip-hint { display: flex; }
  .strip-bar { display: block; }
  .tile-notch .tile-label { position: static; display: block; min-height: 0; max-width: none; padding: 14px 0 0; border-radius: 0; background: none; box-shadow: none; font-size: clamp(.9375rem, 2.2vw, 1.0625rem); }
  .tile-notch .tile-note { margin-top: 4px; }
  .level + .level { margin-top: 40px; }
  .ask-panel { grid-template-columns: minmax(0, 1fr); }
  .ask-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
  /* reviews say they can be swiped too */
  .quotes-controls::after { content: "Swipe for more →"; margin-left: auto; color: var(--ink-2); font-size: .875rem; font-weight: 500; }
  .strip li { flex: none; width: 56vw; max-width: 280px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .panel .actions, .page-hero-text .actions, .cta-band .actions { flex-direction: column; }
  .panel .btn, .page-hero-text .btn, .cta-band .btn { width: 100%; min-height: 52px; }
  .hero-trust { font-size: .84375rem; text-wrap: balance; }
  .form .btn { width: 100%; min-height: 52px; }
  .two-col .btn { width: 100%; min-height: 52px; padding-block: 12px; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .footer-brand img { width: 112px; }
  .point-grid, .field-row { grid-template-columns: minmax(0, 1fr); }
  .photos, .page-hero-media { aspect-ratio: 16 / 10; }
  .tile-grid { gap: 26px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid-two { grid-template-columns: minmax(0, 1fr); }
  .tile-grid:not(.tile-grid-two) .tile-frame { aspect-ratio: 1; }
  .tap { right: 8px; bottom: 8px; width: 34px; height: 34px; }
  .tap .arrow { width: 16px; height: 16px; }
  .tile-frame img { object-position: var(--pos-small, var(--pos, 50% 50%)); }
  .tile-note { font-size: .875rem; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .face-name { font-size: .9375rem; }
  .face-sub { display: none; }
  .face-plus { right: 5px; bottom: 5px; width: 24px; height: 24px; }
  .t-pop { margin: auto 8px 8px; width: calc(100vw - 16px); }
  /* the credentials lead here: a small round photo beside the name, not a big cropped face */
  .t-pop-in { position: relative; display: block; }
  .t-pop-in > img { position: absolute; z-index: 1; top: 20px; left: 20px; width: 60px; height: 60px; min-height: 0; border-radius: 50%; object-position: 50% 20%; }
  .t-pop-text { min-height: 100px; padding: 20px 20px 16px; }
  .t-pop-in > img ~ .t-pop-text > :not(ul):not(button) { margin-left: 74px; }
  .t-pop h3 { padding-right: 44px; font-size: 1.375rem; }
  .t-pop ul { margin-top: 18px; }
  .paths-4 { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer .btn { width: 100%; }
  .offer .actions { flex-direction: column; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-legal { flex-direction: column; }
}

/* ---- more vertical room on phones. This follows the other phone rules ---- */
@media (max-width: 600px) {
  :root { --sec: 88px; }
  .section-head { margin-bottom: 36px; }
  .more { margin-top: 38px; }
  .panel { padding: 32px var(--gut); }
  .actions { margin-top: 26px; }
  .page-hero { gap: 28px; padding-bottom: 44px; }
  .tile-grid { row-gap: 38px; }
  .wall { row-gap: 32px; }
  .review, .proofs { gap: 28px; }
  .help-rows li { padding-block: 18px; }
  .help-rows p { margin-top: 6px; }
  .offer, .help { gap: 40px; }
  .proof-row { gap: 32px; margin-bottom: 48px; }
  .point-grid { row-gap: 36px; }
  .point-grid div { padding-top: 18px; }
  .ticks li { padding-block: 9px; }
  .level + .level { margin-top: 60px; }
  .level-links a { min-height: 48px; }
  .cta-band { padding-block: 56px; gap: 26px; }
  .footer-top { gap: 40px 24px; padding-block: 48px; }
  .site-footer li { padding-block: 6px; }
  .file-after { padding-bottom: calc(var(--sec) * .6); }
  .faq { gap: 28px; }
  .faq-item summary { min-height: 66px; }
}

/* ---- phones, rethought for one column rather than the desktop page stacked. Bigger screens only get these first three lines, which keep the phone-only parts out of the way ---- */
.header-book, .hours-phone, .steps-plain, .hint-papers, .call-icon { display: none; }
.foot-group summary { list-style: none; pointer-events: none; }
.foot-group summary::-webkit-details-marker { display: none; }

@media (max-width: 600px) {
  /* the home hero photos rotate on phones too (Julian, 2026-11-05), with the same pause button in the corner */
  .hero-pause { right: 12px; bottom: 12px; width: 40px; height: 40px; }

  /* the three numbers stay off the phone hero: price and grades are said further down the page, so the hero stays quiet */
  .hero-stats { display: none; }

  /* subjects: less room above the heading */
  .subjects { padding-top: 40px; }
  .tab { margin-bottom: 26px; }

  /* subjects: all six at once, in the same kind of card as the family tiles */
  .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .strip li { width: auto; max-width: none; }
  .subj-frame { aspect-ratio: 4 / 3; border-radius: 18px; }
  .subj-name { margin-top: 12px; font: 600 .9375rem/1.2 var(--display); letter-spacing: -.006em; }
  .subjects .strip-hint, .subjects .strip-bar { display: none; }

  /* enrolment: every step named in a list first, then the row of papers to swipe through. Nothing moves on its own */
  .steps-plain { position: relative; display: block; margin-bottom: 22px; padding-left: 48px; }
  .steps-plain::before { content: ""; position: absolute; left: 16px; top: 25px; bottom: 25px; width: 2px; border-radius: 2px; background: var(--line); }
  .steps-plain li { position: relative; padding-block: 14px; font: 600 1.1875rem/1.14 var(--display); letter-spacing: -.008em; }
  .steps-plain .file-dot { left: -31px; top: 25px; }
  .file .strip-hint .arrow { animation: none; }
  /* each paper stops in the middle of the screen with its dot and name centred under it (Julian, 2026-11-05). The line moves over 40px so every dot still sits on a flat part */
  .file-scroll { scroll-padding-left: 0; }
  .file-stage { padding-inline: calc(50vw - var(--pitch) / 2); }
  .file-step { scroll-snap-align: center; }
  .file-sheet { left: calc((var(--pitch) - 190px) / 2); }
  .file-step .file-dot { left: calc(var(--pitch) / 2); }
  .file-cap { width: var(--pitch); text-align: center; }
  .file-pocket, .file-line { translate: 40px 0; }
  .hint-row { display: none; }
  .hint-papers { display: inline; }

  /* reviews: nothing moves on its own, and the next quote shows at the edge to say there's more */
  .quotes-controls { display: none; }
  .quotes-track { gap: 24px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-left: var(--gut); border-radius: 0; }
  .quotes-track > figure { flex: 0 0 86%; padding-inline: 0; }

  /* big gaps come down where the background colour stays the same */
  .subjects { padding-bottom: 36px; }
  .subjects + .file { padding-top: 52px; }
  .section-sand + .file { padding-top: 0; }
  .page-hero + .section:not(.section-sand) { padding-top: 60px; }
  .section:not(.section-sand) + .review, .section:not(.section-sand) + .proof-sec { padding-top: 16px; }

  /* sand runs under the closing band's round corners */
  .section-sand:has(+ .cta-band) { margin-bottom: -24px; padding-bottom: calc(var(--sec) + 24px); }
  .cta-band { position: relative; }

  /* hours on three lines, so a time can't break in half */
  .hours-line { display: none; }
  .hours-phone { display: grid; margin-top: 10px; color: var(--on-ink-2); }
  .hours-phone dt { color: var(--on-ink); }

  /* small links get a bigger tap area without moving anything */
  .crumbs a { display: inline-block; margin-block: -12px; padding-block: 12px; }
  /* the side panel's email sits right under the big phone number, so it keeps its own size; Get directions has nothing else to tap near it */
  .offer-enrol a, .paths-4 .path p > a, .side a[target="_blank"], .more .link { display: inline-block; margin-block: -12px; padding-block: 12px; }
  /* the home hero's line wraps on phones, so the call link takes its own line and the dot goes */
  .panel .hero-trust span[aria-hidden] { display: none; }
  .panel .hero-trust .link { display: block; width: fit-content; margin-top: 2px; padding-block: 10px; }  .file-tel, .ask-tel { display: inline-block; padding-block: 10px; }

  /* a Book button stays in the header */
  .header-book { display: inline-flex; flex: none; margin-left: auto; min-height: 40px; padding: 0 16px; }
  .header-book + .menu { margin-left: -4px; }

  /* the menu opens over the whole screen under the header, and the page holds still behind it. The phone number sits apart at the thumb, as a button rather than a row */
  html:has(.menu[open]) { overflow: hidden; }
  .menu nav { position: fixed; inset: calc(var(--header-h) + 1px) 0 0; max-height: none; padding: 8px var(--gut) 24px; border-bottom: 0; }
  .menu nav a { padding-block: 16px; font: 600 1.625rem/1.2 var(--display); letter-spacing: -.012em; }
  .menu nav a:nth-last-child(2) { margin-bottom: 28px; border-bottom: 1px solid var(--rule); }
  .menu nav .menu-call { display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-top: auto; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-size: 1.25rem; line-height: 1; letter-spacing: 0; }
  .call-icon { display: block; flex: none; width: 20px; height: 20px; fill: currentColor; }

  /* a shorter footer: the link lists fold (footer.js) and Visit stays open */
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 44px 32px; }
  .footer-brand { margin-bottom: 28px; }
  .foot-group { border-top: 1px solid rgba(251, 244, 236, .16); }
  .foot-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; cursor: pointer; pointer-events: auto; }
  .foot-group summary::after { content: "+"; color: var(--on-ink); font-size: 20px; line-height: 1; transition: transform .2s var(--ease); }
  .foot-group[open] summary::after { transform: rotate(45deg); }
  .foot-group .footer-head { margin: 0; }
  .foot-group ul { padding-bottom: 10px; }
  .foot-group li { padding-block: 0; }
  .foot-group li a { display: block; padding-block: 10px; }
  .foot-visit { padding-top: 22px; border-top: 1px solid rgba(251, 244, 236, .16); }
  .foot-contact a { display: inline-block; padding-block: 10px; }
  .footer-social a { min-height: 40px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* the smallest phones: the wordmark gives way a little so the Book button still fits */
@media (max-width: 350px) {
  .site-header-in { gap: 8px; }
  .brand { gap: 8px; }
  .brand-word { font-size: 12px; letter-spacing: .1em; }
  .header-book { padding: 0 13px; }
}

/* the opening on phones: the headline rises and the photo fades, in under a second. Everything else is simply there */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .is-home .brand img, .is-home .brand-word, .is-home .brand-kind,
  .panel .lead, .panel .btn, .panel .btn + .btn,
  .slide:first-of-type, .hero-stats, .hero-stats .star, .page-hero-text > * { animation: none; }
  .photos, .page-hero-media { animation: fade .55s ease-out backwards; }
  .headline-line > span { animation: line .7s var(--ease) backwards; }
  .headline-line + .headline-line > span { animation-delay: .08s; }
  .page-hero-text > .page-title { animation: rise .6s var(--ease) backwards; }
  .menu[open] nav { animation: fade .18s ease-out; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .foot-group summary::after { transition: none; }
}

/* ---- once the opening has played (page.js), turning a phone or resizing the window doesn't replay it ---- */
.settled :is(.is-home .brand img, .is-home .brand-word, .is-home .brand-kind, .headline-line > span, .panel .lead, .panel .btn, .photos, .slide:first-of-type, .hero-stats, .hero-stats .star, .page-hero-text > *, .page-hero-media) { animation: none; }

/* ---- a mouse can't swipe: sideways rows show a thin scrollbar in place of the position bar, and the hints say scroll ---- */
.say-scroll { display: none; }
@media (hover: hover) and (pointer: fine) {
  .say-swipe { display: none; }
  .say-scroll { display: inline; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 1180px) {
  .file-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-2) var(--rule-sand); }
  .file-scroll::-webkit-scrollbar { display: block; height: 8px; background: var(--rule-sand); }
  .file-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--ink-2); }
  .file .strip-bar { display: none; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
  .strip { scrollbar-width: thin; scrollbar-color: var(--ink-2) var(--rule-sand); }
  .strip::-webkit-scrollbar { display: block; height: 8px; background: var(--rule-sand); }
  .strip::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--ink-2); }
  .strip-wrap .strip-bar { display: none; }
  .quotes-controls::after { content: none; }
}

/* ---- Windows contrast themes: controls drawn with a background would vanish, so they take the theme's text colour ---- */
@media (forced-colors: active) {
  .menu-bars, .menu-bars::before, .menu-bars::after, .dot::before, .strip-bar span { forced-color-adjust: none; background: CanvasText; }
  .menu[open] .menu-bars { background: transparent; }
}