/*
  Bearly Maths — site styles.
  The palette is a pencil case: squared paper, ink, biro blue, red marking pen and a highlighter.
  Change the brand by editing the colours and fonts in :root.
*/

:root {
  --paper: #ffffff;
  --paper-tint: #f4f7fb;
  --squared: #e1e8f2;
  --rule: #d3dceb;
  --ink: #14203f;
  --graphite: #4c5671;
  --muted: #687290;
  --biro: #2346b5;
  --biro-deep: #1a3690;
  --biro-tint: #e9effd;
  --biro-line: #c5d3f4;
  --redpen: #d1352b;
  --red-ink: #a3271f;
  --red-tint: #fcebe9;
  --red-line: #f1c4bf;
  --highlighter: #ffd84f;
  --whatsapp: #1c9d50;

  --font-display: "STIX Two Text", "STIXGeneral", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 32, 63, 0.06);
  --shadow-paper: 0 1px 2px rgba(20, 32, 63, 0.06), 0 22px 44px -22px rgba(20, 32, 63, 0.32);

  --container: 1140px;
  --gutter: 16px;
  --section-space: clamp(64px, 9vw, 112px);
  --header-height: 68px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-height: 76px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

a { color: var(--biro); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--biro-deep); }

:focus-visible { outline: 3px solid var(--biro); outline-offset: 2px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(800px + var(--gutter) * 2); }

/* The timetable is drawn in the browser, so it fades in once ready. Everything else arrives already filled in. */
[data-render] { transition: opacity 0.25s ease; }
html:not(.is-ready) [data-render] { opacity: 0; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0.7em 1.25em;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.button--primary { background: var(--biro); color: #fff; }
.button--primary:hover { background: var(--biro-deep); color: #fff; }
.button--secondary { background: #fff; color: var(--ink); border-color: var(--rule); }
.button--secondary:hover { border-color: var(--ink); color: var(--ink); }
.button--highlight { background: var(--highlighter); color: var(--ink); }
.button--highlight:hover { background: #ffcc1a; color: var(--ink); }
.button--small { min-height: 42px; padding: 0.5em 1em; font-size: 0.9375rem; }
.button:disabled { opacity: 0.6; cursor: progress; }
.icon--whatsapp { color: var(--whatsapp); }
.icon--youtube { color: #e02a1f; }

.icon-button {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer;
}
.icon-button:hover { border-color: var(--ink); }

/* ---------- Notice bar ---------- */

.notice { background: var(--ink); color: #fff; font-size: 0.9375rem; line-height: 1.45; }
.notice__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 18px; padding-block: 10px; text-align: center;
}
.notice__action {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--highlighter); font-weight: 700; white-space: nowrap;
}
.notice__action:hover { color: #fff; }
.notice__action .icon { width: 1em; height: 1em; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--squared);
  box-shadow: 0 8px 24px -20px rgba(20, 32, 63, 0.5);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-height); }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em;
}
.wordmark:hover { color: var(--ink); }
.wordmark img { width: 34px; height: 34px; }
.wordmark--small { font-size: 1.125rem; }
.wordmark--small img { width: 28px; height: 28px; }

.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a {
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--graphite); font-weight: 500; text-decoration: none;
}
.site-nav a:hover { color: var(--ink); background: var(--paper-tint); }
.site-nav .site-nav__cta { display: none; }

.menu-button {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); cursor: pointer;
}
.menu-button .icon { width: 22px; height: 22px; }

@media (max-width: 959px) {
  .menu-button { display: inline-flex; }
  .site-header__cta { display: none; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px;
    background: #fff; border-bottom: 1px solid var(--squared);
    box-shadow: 0 16px 32px -24px rgba(20, 32, 63, 0.5);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--squared); font-size: 1.0625rem; }
  .site-nav a:hover { background: none; }
  .site-nav .site-nav__cta {
    display: flex; justify-content: center; margin-top: 14px; padding: 12px;
    border: 0; border-radius: var(--radius-sm);
    background: var(--biro); color: #fff; font-weight: 700;
  }
  .site-nav .site-nav__cta:hover { background: var(--biro-deep); color: #fff; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(36px, 6vw, 88px) clamp(64px, 8vw, 112px); overflow: hidden; }
.hero__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 64px; }
}

/* The heading is the kicker line plus the tagline, so search engines read both as the page's main heading. */
.hero__heading { font-size: inherit; font-weight: inherit; line-height: inherit; }
.hero__kicker { display: block; margin-bottom: 18px; color: var(--biro); font-weight: 700; }
.hero__title {
  display: block;
  margin-bottom: 24px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.85rem, 8.4vw, 5.25rem); line-height: 1; letter-spacing: -0.02em;
  text-wrap: balance;
}
/* The highlighter stroke behind the *starred* word of the tagline. */
.hero__title mark {
  position: relative; z-index: 0;
  background: none; color: inherit; white-space: nowrap;
}
.hero__title mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.06em; right: -0.08em; bottom: 0.04em; height: 0.44em;
  background: var(--highlighter);
  border-radius: 0.1em 0.35em 0.15em 0.4em;
  transform: skewX(-12deg) rotate(-1.5deg);
  transform-origin: left center;
}
.hero__intro { max-width: 34em; margin-bottom: 32px; color: var(--graphite); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.proof { display: grid; gap: 14px; max-width: 34em; }
.proof li { display: flex; align-items: flex-start; gap: 10px; }
.proof strong { display: block; font-weight: 700; line-height: 1.35; }
.proof__detail { display: block; margin-top: 2px; color: var(--graphite); font-size: 0.9375rem; line-height: 1.45; }
.proof .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--redpen); }

/* ---------- Hero: the marked answer in a squared exercise book ---------- */

.workbook { width: 100%; max-width: 520px; margin-inline: auto; }
.workbook__page {
  position: relative;
  padding: 26px 22px 22px 66px;
  background-color: #fff;
  background-image:
    linear-gradient(var(--squared) 1px, transparent 1px),
    linear-gradient(90deg, var(--squared) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-paper);
  transform: rotate(-1.2deg);
}
.workbook__page::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 46px;
  border-left: 2px solid rgba(209, 53, 43, 0.5);
}
.workbook__qnum { position: absolute; left: 16px; top: 24px; font-weight: 700; font-size: 1.125rem; }
.workbook__question { font-size: 0.9375rem; line-height: 1.55; }

.diagram { width: 100%; height: auto; margin: 10px 0 2px; }
.diagram__plane { fill: #eef2fb; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.diagram__ground line { stroke: var(--muted); stroke-width: 1.2; }
.diagram__angle { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.diagram__block { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.diagram__force { stroke: var(--biro); stroke-width: 1.8; }
.diagram__accel { stroke: var(--graphite); stroke-width: 1.5; }
.diagram marker path { fill: var(--biro); }
.diagram #arrowhead-double path { fill: var(--graphite); }
.diagram__label { font-family: var(--font-display); font-size: 15px; fill: var(--ink); }
.diagram__label--var { font-style: italic; }

.working { display: grid; margin-top: 2px; }
.working li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 40px;
}
.working__math { font-family: var(--font-display); font-size: 1.125rem; }
.working__math sup { font-size: 0.65em; }

.mark {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--redpen); font-family: var(--font-hand); font-weight: 600; font-size: 1.375rem; line-height: 1;
  white-space: nowrap;
}
.tick { width: 26px; height: 26px; }
.tick path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.workbook__total { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 6px; }
.workbook__available { font-weight: 700; }
.score { position: relative; display: inline-block; padding: 8px 16px; color: var(--redpen); font-family: var(--font-hand); font-weight: 600; font-size: 1.75rem; line-height: 1; }
.score__ring { position: absolute; inset: -8px -12px; width: calc(100% + 24px); height: calc(100% + 16px); max-width: none; }
.score__ring path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.workbook figcaption { margin-top: 22px; color: var(--graphite); font-size: 0.9375rem; text-align: center; }

@media (max-width: 479px) {
  .workbook__page { padding: 20px 14px 18px 48px; }
  .workbook__page::before { left: 34px; }
  .workbook__qnum { left: 10px; top: 18px; }
  .working__math { font-size: 1rem; }
  .mark { font-size: 1.2rem; }
  .tick { width: 22px; height: 22px; }
}

/* The marking plays out once when the page loads. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title mark::before { animation: highlight 0.75s cubic-bezier(0.25, 0.8, 0.3, 1) 0.3s both; }
  .working .tick path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.32s ease-out forwards; }
  .mark__code { opacity: 0; animation: appear 0.25s ease-out forwards; }
  .working li:nth-child(1) .tick path { animation-delay: 1s; }
  .working li:nth-child(2) .tick path { animation-delay: 1.3s; }
  .working li:nth-child(3) .tick path { animation-delay: 1.6s; }
  .working li:nth-child(4) .tick path { animation-delay: 1.9s; }
  .working li:nth-child(1) .mark__code { animation-delay: 1.2s; }
  .working li:nth-child(2) .mark__code { animation-delay: 1.5s; }
  .working li:nth-child(3) .mark__code { animation-delay: 1.8s; }
  .working li:nth-child(4) .mark__code { animation-delay: 2.1s; }
  .score__ring path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s ease-in-out 2.4s forwards; }
  .score__text { opacity: 0; animation: appear 0.3s ease-out 2.75s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes highlight {
  from { transform: skewX(-12deg) rotate(-1.5deg) scaleX(0); }
  to { transform: skewX(-12deg) rotate(-1.5deg) scaleX(1); }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section-space); }
.section--tint { background: var(--paper-tint); }
.section--ink { background: var(--ink); color: #fff; }

.section-head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 52px); }
.section-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1.06; letter-spacing: -0.015em;
  text-wrap: balance;
}
.section-lead { max-width: 40em; margin-top: 16px; color: var(--graphite); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.section--ink .section-lead { color: #c5cee4; }
.subhead { margin-bottom: 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }

/* ---------- Tutors ---------- */

.tutor-feature { display: grid; gap: 32px 56px; align-items: start; }
@media (min-width: 860px) {
  .tutor-feature { grid-template-columns: 300px minmax(0, 1fr); }
  .tutor-feature .results { grid-column: 1 / -1; }
}

/* Empty until a photo is uploaded in the admin panel. */
.photo-box {
  width: 100%; max-width: 300px; aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--squared);
  border-radius: var(--radius-lg);
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--biro-tint); color: var(--biro-deep);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge--plain { background: #fff; border: 1px solid var(--rule); color: var(--ink); }
.badge .icon { width: 15px; height: 15px; color: var(--redpen); }
.tutor-feature__name { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.85rem, 3vw, 2.4rem); line-height: 1.1; }
.tutor-feature__role { margin-top: 4px; color: var(--graphite); font-weight: 500; }
.prose { display: grid; gap: 14px; max-width: 38em; margin-top: 22px; }
.personal-note {
  max-width: 38em; margin-top: 20px; padding: 12px 16px;
  background: var(--paper-tint); border-left: 3px solid var(--highlighter); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.personal-note__title { margin-bottom: 2px; color: var(--graphite); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips li {
  padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: #fff; color: var(--graphite); font-size: 0.875rem; font-weight: 500;
}

.results {
  padding: clamp(20px, 3.4vw, 36px);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.results__title { margin-bottom: 22px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.results__grid { display: grid; gap: 30px 56px; }
@media (min-width: 760px) {
  .results__grid { grid-template-columns: 1fr 1fr; }
}
.results__group-title {
  margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite);
}
.results__row { display: flex; align-items: baseline; gap: 10px; padding-block: 7px; }
.results__row dt { display: flex; flex: 1 1 auto; align-items: baseline; min-width: 0; }
.results__row dt::after {
  content: ""; flex: 1 1 16px; min-width: 16px; margin-left: 10px;
  border-bottom: 2px dotted var(--rule); transform: translateY(-0.28em);
}
.results__row dd { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; white-space: nowrap; text-align: right; }
.results__row--sub { padding-left: 18px; color: var(--graphite); font-size: 0.9375rem; }
.results__row--sub dd { font-size: 1rem; font-weight: 600; color: var(--ink); }
.results__note { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--highlighter); color: var(--graphite); font-size: 0.875rem; line-height: 1.5; }
/* Phones: each result sits under its label, so long ones like "Merit · highest award" never get squeezed. */
@media (max-width: 479px) {
  .results__row { flex-direction: column; gap: 1px; padding-block: 6px; }
  .results__row dt::after { display: none; }
  .results__row dd { white-space: normal; text-align: left; }
}

.tutor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-top: 56px; }
.tutor-card {
  display: grid; gap: 10px; align-content: start;
  padding: 20px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.tutor-card .photo-box { max-width: none; aspect-ratio: 1; margin-bottom: 6px; }
.tutor-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.tutor-card__role { color: var(--graphite); font-weight: 500; font-size: 0.9375rem; }
.tutor-card .chips { margin-top: 6px; }
.tutor-card details { margin-top: 8px; border-top: 1px solid var(--squared); padding-top: 10px; }
.tutor-card summary { cursor: pointer; color: var(--biro); font-weight: 700; }
.tutor-card .results { margin-top: 14px; padding: 0; border: 0; }
.tutor-card .results__grid { grid-template-columns: 1fr; }

/* ---------- Lessons ---------- */

.lessons { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .lessons { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 56px; align-items: start; }
}
.subject-list { display: grid; margin-top: 10px; border-top: 1px solid var(--rule); }
@media (min-width: 640px) {
  .subject-list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.subject-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.subject-list strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.subject-list span { color: var(--graphite); font-size: 0.9375rem; }
.subject-links { margin-top: 18px; color: var(--graphite); font-size: 0.9375rem; }

.lesson-card {
  padding: clamp(22px, 3vw, 32px);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.lesson-card__price { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.1; }
.lesson-card__price--tbc { font-size: 1.5rem; }
.lesson-card__note { margin-top: 8px; color: var(--graphite); }
.details { margin-top: 22px; border-top: 1px solid var(--squared); }
.details div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--squared); }
.details dt { color: var(--graphite); }
.details dd { font-weight: 700; text-align: right; }
.lesson-card__actions { display: grid; gap: 10px; margin-top: 24px; }
.lesson-card__terms { margin-top: 16px; font-size: 0.9375rem; text-align: center; }

/* ---------- Booking steps and timetable ---------- */

.steps { display: grid; gap: 14px; counter-reset: step; }
.steps-title { margin-top: clamp(32px, 5vw, 48px); margin-bottom: 14px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { padding: 20px; background: var(--paper-tint); border-radius: var(--radius); counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px;
  border: 1.5px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: 700;
}
.steps h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.steps p { margin-top: 4px; color: var(--graphite); font-size: 0.9375rem; }

.timetable {
  padding: clamp(14px, 2.6vw, 28px);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.timetable__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 18px; }
.timetable__note { width: 100%; color: var(--muted); font-size: 0.875rem; }

.tutor-tabs { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.tutor-tab {
  padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: #fff; font-weight: 700; font-size: 0.9375rem; cursor: pointer;
}
.tutor-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; }
.legend li { display: inline-flex; align-items: center; gap: 9px; }
.swatch { width: 20px; height: 20px; flex: none; border-width: 1px; border-style: solid; border-radius: 5px; }
.swatch--free { background: var(--biro-tint); border-color: var(--biro-line); }
/* Booked: solid red. Not offered: striped red. Both read as unavailable. */
.swatch--booked,
.tt-slot.is-booked { background: #f7d2cd; border-color: #e3958c; }
.swatch--blocked,
.tt-slot.is-blocked {
  background-color: var(--red-tint);
  background-image: repeating-linear-gradient(135deg, rgba(209, 53, 43, 0.16) 0 2px, transparent 2px 7px);
  border-color: var(--red-line);
}

.tt { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.tt th { color: var(--graphite); font-size: 0.8125rem; font-weight: 700; }
.tt thead th { padding-bottom: 4px; text-align: center; }
.tt thead th:first-child { width: 58px; }
.tt thead abbr { text-decoration: none; }
.tt tbody th { padding-right: 6px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt td { padding: 0; }
.tt td.tt-none { color: var(--rule); font-size: 0.8125rem; text-align: center; }
.tt td.tt-none::before { content: "–"; }

.tt-slot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 38px; padding: 0 4px;
  border: 1px solid; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.tt-slot.is-free { background: var(--biro-tint); border-color: var(--biro-line); color: var(--biro-deep); }
.tt-slot.is-free:hover, .tt-slot.is-free:focus-visible { background: var(--biro); border-color: var(--biro); color: #fff; }
.tt-slot.is-booked, .tt-slot.is-blocked { color: var(--red-ink); }
.tt-slot.is-booked:hover, .tt-slot.is-booked:focus-visible,
.tt-slot.is-blocked:hover, .tt-slot.is-blocked:focus-visible { border-color: var(--redpen); }

.timetable__foot {
  display: grid; gap: 14px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--squared);
  color: var(--graphite); font-size: 0.9375rem;
}
.timetable__foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.timetable__foot-row p { flex: 1 1 280px; }
.tt-slot__hover { display: none; }
.tt-slot:hover .tt-slot__idle, .tt-slot:focus-visible .tt-slot__idle { display: none; }
.tt-slot:hover .tt-slot__hover, .tt-slot:focus-visible .tt-slot__hover { display: inline; }

/* Narrower screens: colour and pattern only (each time still has a full spoken label). */
@media (max-width: 899px) {
  .tt-slot__idle, .tt-slot__hover,
  .tt-slot:hover .tt-slot__hover, .tt-slot:focus-visible .tt-slot__hover { display: none; }
}
@media (max-width: 639px) {
  .tt { border-spacing: 3px; }
  .tt thead th:first-child { width: 40px; }
  .tt th { font-size: 0.75rem; }
  .tt tbody th { padding-right: 3px; }
  .tt-slot { height: 32px; border-radius: 5px; }
}

/* ---------- Course ---------- */

.course { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .course { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 72px; align-items: center; }
}
.pill {
  display: inline-block; margin-bottom: 18px; padding: 4px 12px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.pill--highlight { background: var(--highlighter); color: var(--ink); }
.ticks { display: grid; gap: 12px; margin-top: 28px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; }
.ticks .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--highlighter); }
.course__panel {
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-lg);
}
.course__panel label { color: #fff; }
.course__panel .fine-print { color: #aab5d0; }
.course__panel .fine-print a { color: #fff; }
.course__panel .form-status { color: #fff; }
.course__live-text { margin-bottom: 16px; font-weight: 700; }

/* ---------- Videos ---------- */

.videos { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .videos.has-video { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
}
.videos__button { margin-top: 28px; }
.videos__soon { margin-top: 24px; color: var(--muted); font-weight: 500; }
.video-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0;
  overflow: hidden; border: 0; border-radius: var(--radius-lg);
  background: var(--ink); cursor: pointer;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade__play {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: rgba(20, 32, 63, 0.85); color: #fff;
  transition: transform 0.15s;
}
.video-facade:hover .video-facade__play { transform: scale(1.06); }
.video-facade__play .icon { width: 32px; height: 32px; margin-left: 4px; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }

/* ---------- FAQ ---------- */

.faq { margin-top: 32px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 20px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.125rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  color: var(--biro); font-family: var(--font-display); font-size: 1.6rem; line-height: 0.8;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 42em; padding-bottom: 22px; color: var(--graphite); }

/* ---------- Contact ---------- */

.contact { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .contact.has-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
}
.contact__phone {
  margin-top: 28px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.01em; line-height: 1.1;
  font-variant-numeric: lining-nums;
}
.contact__phone a { color: var(--ink); text-decoration: none; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- Cards and forms ---------- */

.card {
  padding: clamp(22px, 3vw, 32px);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > label, .field > .field__label { font-weight: 700; font-size: 0.9375rem; }
.optional, .hint { color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 540px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: #fff; color: var(--ink);
  border: 1.5px solid #c4cddd; border-radius: var(--radius-sm);
}
.textarea { min-height: 104px; resize: vertical; }
.select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%); background-position: right 18px top 21px, right 12px top 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--biro); box-shadow: 0 0 0 3px rgba(35, 70, 181, 0.2); }
.input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color: var(--redpen); }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form .input { flex: 1 1 220px; border-color: transparent; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--biro); }
.field__label { margin-bottom: 8px; padding: 0; font-weight: 700; font-size: 0.9375rem; }
.checks { display: grid; gap: 10px 18px; }
@media (min-width: 540px) {
  .checks { grid-template-columns: 1fr 1fr; }
}

.fieldset-title { margin-bottom: 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.form-error {
  padding: 10px 14px; border: 1px solid var(--red-line); border-radius: var(--radius-sm);
  background: var(--red-tint); color: var(--red-ink); font-size: 0.9375rem;
}
.form-status:empty { display: none; }
.form-status { font-weight: 700; }
.fine-print { color: var(--muted); font-size: 0.875rem; }

/* Honeypot field: hidden from people, visible to spam bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Booking sheet (dialog) ---------- */

.sheet {
  width: min(600px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; overflow: auto;
  background: #fff; color: var(--ink);
  border: 0; border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(20, 32, 63, 0.5);
}
.sheet::backdrop { background: rgba(20, 32, 63, 0.55); }
.sheet__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 24px 16px; background: #fff; border-bottom: 1px solid var(--squared);
}
.sheet__eyebrow { color: var(--biro); font-size: 0.875rem; font-weight: 700; }
.sheet__title { font-family: var(--font-display); font-weight: 600; font-size: 1.65rem; line-height: 1.15; }
.sheet__body { display: grid; gap: 18px; padding: 22px 24px 26px; }
.sheet__body > p { color: var(--graphite); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.success { display: grid; gap: 12px; }
.success__mark { width: 44px; height: 44px; color: var(--redpen); }
.success h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.success p { color: var(--graphite); }

@media (max-width: 639px) {
  .sheet {
    width: 100%; max-width: none; max-height: 94dvh;
    margin: auto 0 0; border-radius: 18px 18px 0 0;
  }
  .sheet__head { padding: 18px 16px 14px; }
  .sheet__body { padding: 18px 16px 24px; }
}

/* ---------- Footer ---------- */

.site-footer { padding-block: 40px; background: var(--paper-tint); border-top: 1px solid var(--squared); font-size: 0.9375rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 40px; }
.site-footer__tag { margin-top: 8px; color: var(--graphite); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { color: var(--graphite); }
.footer-nav a:hover { color: var(--ink); }
.footer-subjects { width: 100%; padding-top: 20px; border-top: 1px solid var(--squared); }
.site-footer__legal { width: 100%; color: var(--muted); font-size: 0.875rem; }

/* ---------- Simple pages: terms, privacy, 404, waitlist links ---------- */

.page-header { border-bottom: 1px solid var(--squared); }
.page-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-height); }
.page-header__back { font-weight: 700; text-decoration: none; }

.doc { max-width: 760px; padding-block: clamp(40px, 7vw, 80px); }
.doc h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -0.015em; }
.doc .updated { margin-top: 10px; color: var(--muted); font-size: 0.9375rem; }
.doc h2 { margin-top: 40px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.doc p { margin-top: 12px; color: var(--graphite); }
.doc ul { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.25em; color: var(--graphite); }
.doc strong { color: var(--ink); }
.doc .callout { margin-top: 24px; padding: 16px 18px; border-left: 4px solid var(--highlighter); background: var(--paper-tint); color: var(--ink); }

.plain-page { background: var(--paper-tint); }
.plain-page__main { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; padding: clamp(48px, 10vw, 96px) var(--gutter); }
.plain-page__main h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.1; }
.plain-page__main p { color: var(--graphite); }
.plain-page__main .wordmark { margin-bottom: 12px; }

/* ---------- Subject pages: GCSE, A-Level and so on ---------- */

.page-hero { padding-block: clamp(28px, 5vw, 56px) clamp(44px, 6vw, 72px); background: var(--paper-tint); border-bottom: 1px solid var(--squared); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.875rem; }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.breadcrumbs a { color: var(--graphite); }
.page-hero__title {
  max-width: 16em; margin-top: 20px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-hero__title .nowrap { white-space: nowrap; }
.page-hero__lead { max-width: 38em; margin: 18px 0 28px; color: var(--graphite); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.page-hero .proof { max-width: none; }
@media (min-width: 720px) {
  .page-hero .proof { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

.page-body { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) {
  .page-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
  .page-body .lesson-card { position: sticky; top: calc(var(--header-height) + 24px); }
}
.article { max-width: 42em; }
.article h2 { margin-top: 48px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; }
.article h2:first-child { margin-top: 0; }
.article p { margin-top: 14px; color: var(--graphite); }
.article ul { display: grid; gap: 8px; margin-top: 14px; padding-left: 1.25em; color: var(--graphite); }
.article strong { color: var(--ink); }

.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 28px; }
.related a { display: block; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); font-weight: 700; text-decoration: none; }
.related a:hover { border-color: var(--ink); color: var(--ink); }
.related span { display: block; margin-top: 2px; color: var(--graphite); font-weight: 400; font-size: 0.9375rem; }