/* Dyslexia Sorted: one stylesheet for every page.
   Design: Warm studio (teal, mint and grey bands, Open Sans).
   Dyslexia-friendly rules kept throughout: left aligned, line height 1.5 or more,
   body text 18px, nothing set in capitals, no text directly on a photograph. */

/* The typeface, served from this site. One variable font file covers every weight. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans.woff2") format("woff2");
}

:root {
  --teal: #00A99D;      /* accent lines and borders only, never behind text */
  --teal-dk: #00786F;   /* behind white text: bands, buttons, step numbers */
  --teal-dkr: #005F58;  /* button hover */
  --link: #006A63;
  --mint: #F5FCFB;
  --mint-dp: #E6F5F3;
  --grey: #585758;
  --ink: #3C3C3C;
  --head: #2E2E2E;
  --quiet: #5E5E5E;
  --line: #DADADA;
  --focus: #1A1A1A;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; text-align: left; }
img { max-width: 100%; height: auto; display: block; }
p, li, h1, h2, h3, td, th { text-align: left; }

/* Base text */
body {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink);
  background: #fff;
}
.wrap { width: min(66rem, 100% - 3rem); margin-inline: auto; }
.wrap-narrow { width: min(46rem, 100% - 3rem); margin-inline: auto; }   /* Fees, Privacy and Terms: a narrower reading column */
h1, h2, h3 { line-height: 1.5; margin: 0 0 1rem; font-weight: 600; color: var(--head); }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.5; letter-spacing: -.01em; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.2rem; }
h2:not(:first-child) { margin-top: 4rem; }
h3:not(:first-child) { margin-top: 2rem; }
p { margin: 0 0 1.2rem; max-width: 40rem; }
ul, ol { max-width: 40rem; padding-left: 1.3em; margin: 0 0 1.2rem; }
li { margin-bottom: .45rem; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }

/* Focus: always visible, dark by default and white on the dark bands */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.band-teal :focus-visible, .band-grey :focus-visible { outline-color: #fff; }

/* Skip link */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #1A1A1A; color: #fff; padding: .75rem 1rem; z-index: 99; outline-color: #fff; }

/* Header and nav */
.top { background: #fff; border-bottom: 1px solid #E7E7E7; padding-block: 1.1rem; }
.top .wrap { display: flex; flex-wrap: wrap; gap: .7rem 2rem; align-items: center; justify-content: space-between; }
.brand { font-weight: 700; font-size: 1.35rem; color: var(--teal-dk); text-decoration: none; line-height: 1.5; }
.top ul { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; list-style: none; margin: 0; padding: 0; max-width: none; }
.top li { margin: 0; }
.top nav a { color: #444; text-decoration: none; font-size: 1.0625rem; }
.top nav a:hover { color: var(--link); text-decoration: underline; }
.top nav a[aria-current] { color: var(--teal-dk); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }

/* Homepage hero: a photograph behind solid cards. The words sit on the cards, never on the photo.
   The headline card is on the left and Sophie's photo on the right, large, with a small caption
   card over its lower edge. On narrow screens: headline, buttons, then the photo. */
.hero { position: relative; background: url("../img/desk-pencil.jpg") center / cover; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); }
.hero .grid { position: relative; display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 64rem) { .hero .grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }
.hero .card { background: #fff; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 6px; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.hero .card > :last-child { margin-bottom: 0; }
.hero h1 + .lede { font-size: 1.25rem; color: var(--quiet); max-width: 32rem; margin: .75rem 0 1.5rem; }
.portrait-card { position: relative; max-width: 22rem; width: 100%; margin-inline: auto; }
@media (min-width: 64rem) { .portrait-card { max-width: 26rem; } }
.portrait-card img { border-radius: 6px; width: 100%; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.caption { position: relative; margin: -2.5rem 1.25rem 0; background: #fff; border: 1px solid #E3E3E3; border-radius: 6px;
  padding: 1rem 1.25rem; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.caption p { margin: 0; line-height: 1.5; }
.caption .name { font-weight: 700; color: var(--head); }
.caption .role { color: var(--quiet); }
.caption-quals { margin: .75rem 0 .75rem; padding-left: 1.2em; font-size: 1.125rem; line-height: 1.5; }
.caption-quals li { margin-bottom: .4rem; }
.caption-quals li::marker { color: var(--teal); }
@media (max-width: 40rem) { .caption { margin-inline: .75rem; } }   /* more room for the list on phones */

/* Inner page heading band */
.page-head { background: var(--mint-dp); padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem); border-bottom: 1px solid #D3ECE8; }
.page-head h1::before { content: ""; display: block; width: 3.5rem; height: 5px; border-radius: 3px; background: var(--teal); margin-bottom: 1.1rem; }
.page-head .lede { font-size: 1.25rem; color: var(--quiet); max-width: 36rem; margin-bottom: 0; }

/* Bands */
.band { padding-block: clamp(3rem, 7vw, 6rem); }
.band-tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.band-mint { background: var(--mint); }
.band-teal { background: var(--teal-dk); color: #fff; }
.band-teal h2, .band-teal h3 { color: #fff; }
.band-teal a:not(.btn) { color: #fff; }
.band-grey { background: var(--grey); color: #F4F4F4; }
.band-grey h2, .band-grey h3 { color: #fff; }
.band-grey a:not(.btn) { color: #fff; }

/* Editorial row: heading in a left column, text in a right column */
.row { display: grid; gap: 1rem 3rem; }
.row > h2 { margin-top: 0; margin-bottom: 0; }   /* the grid gap spaces it */
.row > div > :last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .row { grid-template-columns: minmax(0, 17rem) minmax(0, 42rem); align-items: start; }
  .row > h2 { margin-top: .2rem; }
}

/* Buttons */
.btn { display: inline-block; background: var(--teal-dk); color: #fff; font: inherit; font-weight: 600; text-decoration: none;
  padding: .9rem 1.9rem; border-radius: 4px; border: 2px solid var(--teal-dk); cursor: pointer; line-height: 1.5; }
.btn:hover { background: var(--teal-dkr); border-color: var(--teal-dkr); color: #fff; }
.btn:active { transform: translateY(1px); }
.band-teal .btn, .band-grey .btn { background: #fff; color: var(--teal-dkr); border-color: #fff; }
.band-teal .btn:hover, .band-grey .btn:hover { background: var(--mint-dp); border-color: var(--mint-dp); color: var(--teal-dkr); }
.btn-quiet { background: #fff; color: var(--teal-dkr); }
.btn-quiet:hover { background: var(--mint-dp); color: var(--teal-dkr); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; max-width: none; }

/* Cards */
.grid3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); margin-top: 2rem; }
.grid2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 43rem) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* two columns, so four cards sit two by two */
.card-p { background: #fff; padding: 1.8rem; border-radius: 6px; box-shadow: 0 10px 26px -20px rgba(0, 0, 0, .4);
  border: 1px solid #E3E3E3; border-top: 4px solid var(--teal); }
.card-p > :last-child { margin-bottom: 0; }
.card-p ul { padding-left: 1.2em; }
.band-teal .card-p, .band-grey .card-p { color: var(--ink); }
.band-teal .card-p h3, .band-grey .card-p h3 { color: var(--head); }
.band-teal .card-p a, .band-grey .card-p a { color: var(--link); }

/* Numbered steps */
.steps { list-style: none; padding: 0; counter-reset: s; max-width: 44rem; }
.steps li { counter-increment: s; padding-left: 3.6rem; position: relative; margin-bottom: 2rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--teal-dk); color: #fff; display: grid; place-items: center; font-weight: 700; line-height: 1.5; }
.band-teal .steps li::before { background: #fff; color: var(--teal-dkr); }
.steps h3 { margin-top: 0; }
.steps p:last-child { margin-bottom: 0; }
/* Wide screens: the three steps sit side by side, number above heading */
@media (min-width: 64rem) {
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: none; margin-top: 2rem; }
  .steps li { padding-left: 0; margin-bottom: 0; }
  .steps li::before { position: static; margin-bottom: 1rem; }
  .steps + p { margin-top: 2.5rem; }
}

/* Two columns: text and a picture, or text and an aside */
.split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } }
.split-top { align-items: start; }
@media (min-width: 56rem) { .split-wide { grid-template-columns: 1.5fr 1fr; } }
.split img, .figure img { border-radius: 6px; }
.figure { margin: 0; }

/* Sophie's own words on the About page */
.own-words { background: #fff; border-left: 5px solid var(--teal); border-radius: 6px; padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 10px 26px -20px rgba(0, 0, 0, .4); margin: 0; }
.own-words p { max-width: 40rem; }
.own-words footer { font-weight: 700; color: var(--head); }
.portrait { max-width: 22rem; }

/* Price list */
.prices { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 46rem; border-top: 1px solid var(--line); }
.prices li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem; padding-block: 1rem; margin: 0; border-bottom: 1px solid var(--line); }
.prices .amount { font-weight: 700; color: var(--head); }
.prices .note { flex-basis: 100%; color: var(--quiet); }

/* Contact form */
form { max-width: 36rem; }
.field { margin-bottom: 1.5rem; }
label { display: block; font-weight: 600; color: var(--head); margin-bottom: .35rem; }
.hint { display: block; font-weight: 400; color: var(--quiet); }
input, textarea, button, select { font: inherit; color: inherit; }
input, textarea { width: 100%; padding: .7rem .85rem; border: 2px solid #767676; border-radius: 4px; background: #fff; line-height: 1.5; }
textarea { min-height: 10rem; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--teal-dk); }

/* Footer */
.foot { background: #EFEFEF; padding-block: 2.8rem; font-size: 1.0625rem; color: #4F4F4F; }
.foot p { max-width: 48rem; }
.foot a { color: #3C3C3C; }
.foot ul { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; list-style: none; padding: 0; margin: 0 0 1.2rem; max-width: none; }
.foot li { margin: 0; }
.foot .company { margin-bottom: 0; font-size: 0.8rem; line-height: 1.5; color: #5F5F5F; }   /* legal small print */

/* No motion for anyone who has asked their device for less */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}

/* Small spacing helpers */
.more { margin-top: 2rem; }
.stack { margin-top: 2rem; }

/* Keep the footer at the bottom of short pages */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* About page: photo with the qualifications card underneath, same width. */
.side-stack { display: flex; flex-direction: column; gap: 1.5rem; max-width: 22rem; }
.side-stack .portrait { max-width: none; }
.side-stack .card-p { background: var(--mint); }   /* sits on a white band, so tint it */

/* ---------------------------------------------------------------------------
   Mitzy, asleep on the top edge of the homepage's closing grey band, on the
   left of the page. --cat-w sets her size. Her body ends 42.25% of the way
   down the image, so that line sits on the band's top edge (sunk 4px so
   there is no sliver of gap) and her tail hangs down over the band.
   The note sits to her right. It uses Caveat (SIL Open Font Licence, see
   fonts/caveat-OFL.txt), self-hosted and cut down to the letters it needs.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Caveat Note";
  src: url("../fonts/caveat-note.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
.before-mitzy { padding-bottom: 8.5rem; }        /* room above the edge for her body */
.band-mitzy { position: relative; padding-top: 8rem; }   /* room for her tail above the heading */
.mitzy {
  --cat-w: 232px;
  position: absolute;
  left: calc((100% - min(66rem, 100% - 3rem)) / 2);               /* lines up with the page column */
  top: calc(var(--cat-w) * -0.4225 + 4px);                        /* her body height above the edge */
  width: var(--cat-w);
  margin: 0;
  z-index: 2;
}
.mitzy img { width: 100%; height: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .18)); }
.mitzy-note {
  position: absolute;
  left: calc(100% - 0.75rem);
  top: 0.4rem;
  width: max-content;
  font-family: "Caveat Note", "Bradley Hand", cursive;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
  transform: rotate(-4deg);
}
.mitzy-note span { display: block; font-size: 0.85em; padding-left: 0.6rem; }

/* Small screens: smaller cat, and a smaller note. */
@media (max-width: 40rem) {
  .mitzy { --cat-w: 150px; left: 0.75rem; }
  .mitzy-note { font-size: 1.3rem; left: calc(100% - 0.5rem); }
  .band-mitzy { padding-top: 6.5rem; }
  .before-mitzy { padding-bottom: 6.5rem; }
}

/* ---------------------------------------------------------------------------
   The reading boy, sat on top of the "They think they are stupid"
   card on the homepage. --boy-w sets his size; he sinks 7px into the card
   so he looks seated on it rather than floating above it.
   --------------------------------------------------------------------------- */
.card-sitter { position: relative; }
.sitter {
  --boy-w: 112px;                      /* 30% smaller than first placed (160px) */
  position: absolute;
  right: 1.25rem;
  bottom: calc(100% - 7px);
  width: var(--boy-w);
  z-index: 2;
}
/* Faded rather than see-through, so the card's teal edge doesn't show through his shoes. */
.sitter img { width: 100%; height: auto; filter: saturate(.7) contrast(.85) brightness(1.08) drop-shadow(0 3px 3px rgba(0, 0, 0, .1)); }

/* When the cards stack (two columns or one), give him room above his card
   so he doesn't sit on top of the card before it. Three 16rem columns with
   1.5rem gaps need a 51rem column, so they stack below a 54rem window. */
@media (max-width: 53.98rem) {
  .card-sitter { margin-top: calc(112px * 1.346 - 1.5rem); }
}
@media (max-width: 40rem) {
  .sitter { --boy-w: 91px; }
  .card-sitter { margin-top: calc(91px * 1.346 - 1.5rem); }
}
.card-sitter > h3 { margin-top: 0; }   /* the picture comes first in the card, so cancel the heading gap */

/* Cards whose headings and body text line up across the row, however many
   lines each heading takes. Each card spans two rows of the parent grid
   (heading, then text) and shares those rows with its neighbours (subgrid). */
.grid-align { grid-auto-rows: auto; }
.grid-align > .card-p { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }

/* Hero on wide screens: the photo panel matches the headline card exactly.
   The top of the photo lines up with the top of the card, and the bottom of the
   caption with the bottom of the card. The card sets the height; the photo
   fills whatever is left above the caption, cropped around her face. */
@media (min-width: 64rem) {
  .hero .grid { align-items: stretch; }
  .portrait-card { display: flex; flex-direction: column; margin-inline: auto 0; }
  .portrait-card img { flex: 1 1 0; height: 0; min-height: 14rem; object-fit: cover; object-position: center 30%; }
  .portrait-card .caption { flex: none; }
}

/* ===========================================================================
   HEADINGS IN NUNITO (tried and kept by Max, 7 Oct 2026). Headings, the brand
   name and Sophie's name in Nunito 700; body text stays Open Sans. To go back
   to Open Sans everywhere, delete this whole block, plus fonts/nunito-700.woff
   and fonts/nunito-OFL.txt.
   Nunito: SIL Open Font Licence, self-hosted, cut down to Latin (15KB).
   =========================================================================== */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
h1, h2, h3, .brand, .caption .name { font-family: "Nunito", "Open Sans", system-ui, sans-serif; font-weight: 700; }
/* END HEADINGS IN NUNITO */

/* ===========================================================================
   Homepage hero, phones only (25 Oct 2026): "Book a free call" moves up to sit
   straight under "who find school harder than it should be". Desktop and tablet
   keep the button in the row with "How lessons work".
   =========================================================================== */
.phone-only { display: none; }
@media (max-width: 40rem) {
  .hero .phone-only { display: flex; margin: 0 0 1.5rem; }
  .hero .not-phone { display: none; }
}