/* ============================================================================
   CUBBY — design system
   ----------------------------------------------------------------------------
   Playful on the surface, strict underneath. The rules that keep it tidy:

     1. Spacing comes from the scale below. No arbitrary pixel values.
     2. Three radii only: --r-sm, --r-md, --r-pill. Plus --r-lg for hero cards.
     3. One shadow recipe at two depths.
     4. Every figure uses tabular numerals so columns line up.
     5. Every section is eyebrow + title + one line of help, always in that order.
     6. Colour never carries meaning on its own — every chip has a word.
     7. Chart colours are the validated four, in fixed order, never cycled.

   Chart palette validated with the dataviz validator (light, white surface,
   adjacent pairs): worst CVD ΔE 11.4, worst normal-vision ΔE 24.3, all inside
   the lightness band. Sunshine falls below 3:1 on white, so it carries the
   relief obligation — every series is direct-labelled and a table view exists.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
:root {
    /* ink */
    --ink-900: #15224a;
    --ink-700: #2b3a6b;
    --ink-500: #5a6b99;
    --ink-400: #8493bc;

    /* surfaces */
    --canvas: #f4f7ff;
    --paper: #ffffff;
    --paper-2: #fbfcff;
    --line: #e3e9f7;
    --line-strong: #cfd9f0;

    /* brand — also the chart series, in this fixed order */
    --blueberry: #3b6fe3;
    --blueberry-ink: #1e47a8;
    --blueberry-50: #eaf0fe;
    --tangerine: #e9603a;
    --tangerine-ink: #b8401f;
    --tangerine-50: #fdece7;
    --mint: #0e9e86;
    --mint-ink: #0a7362;
    --mint-50: #e2f6f2;
    --sunshine: #e59a00;
    --sunshine-ink: #8f6100;
    --sunshine-50: #fff3d9;
    --bubblegum: #e85c93;
    --bubblegum-50: #fdecf3;
    --grape: #7a5af8;
    --grape-50: #f0ecfe;

    /* Ofsted grades — reserved, never reused as series colours */
    --g1-ink: #0b7a49;  --g1-bg: #e1f5ea;
    --g2-ink: #1f57b5;  --g2-bg: #e8f0fd;
    --g3-ink: #9c5c00;  --g3-bg: #fff2d7;
    --g4-ink: #b5322a;  --g4-bg: #fce9e7;
    --g0-ink: #5a6b99;  --g0-bg: #eef2fb;
    /* closed settings: deliberately quiet. Real families and real staff. */
    --closed-ink: #6f6076; --closed-bg: #f3eef4;

    /* spacing — 4px grid */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    /* radii */
    --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;

    /* elevation */
    --sh-1: 0 1px 2px rgba(21,34,74,.05), 0 2px 8px rgba(21,34,74,.05);
    --sh-2: 0 2px 4px rgba(21,34,74,.06), 0 14px 30px rgba(21,34,74,.10);

    /* type */
    --display: "Fredoka", ui-rounded, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --body: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Content and masthead share this. They used to differ (1140 against 1340)
       so the logo sat left of the page content and the nav right of it, and
       nothing lined up down either edge. */
    --wrap: 1340px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink-900);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
}

/* every number in the interface lines up */
.n, td.n, th.n, .tile-num, .stat-num, .hero-num, table { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

a { color: var(--blueberry-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blueberry); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; }
h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 var(--s3); }

.skip {
    position: absolute; left: -9999px; top: 0; background: var(--ink-900); color: #fff;
    padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-sm) 0; z-index: 99;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--blueberry); outline-offset: 2px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ header */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.masthead .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 76px; flex-wrap: wrap; padding-top: var(--s3); padding-bottom: var(--s3); }

.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--ink-900); letter-spacing: -.02em; line-height: 1; }
.brand-sub { display: block; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--ink-400); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

.nav { display: flex; gap: var(--s1); margin-left: auto; flex-wrap: wrap; }
.nav a {
    font-family: var(--display); font-size: 15px; font-weight: 500;
    color: var(--ink-700); text-decoration: none;
    padding: var(--s2) var(--s3); border-radius: var(--r-pill); white-space: nowrap;
}
.nav a:hover { background: var(--blueberry-50); color: var(--blueberry-ink); }
.nav a[aria-current="page"] { background: var(--ink-900); color: #fff; }

.searchbar { display: flex; gap: var(--s2); }
.searchbar input {
    font-family: var(--body); font-size: 16px; font-weight: 600;
    padding: var(--s3) var(--s4); min-width: 186px; width: 186px;
    border: 2px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--paper-2); color: var(--ink-900);
}
.searchbar input::placeholder { color: var(--ink-400); font-weight: 500; }
.searchbar input:focus { border-color: var(--blueberry); outline: none; background: #fff; }

.btn {
    display: inline-flex; white-space: nowrap; align-items: center; gap: var(--s2);
    font-family: var(--display); font-size: 16px; font-weight: 600;
    padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-pill);
    background: var(--blueberry); color: #fff; cursor: pointer; text-decoration: none;
    box-shadow: 0 2px 0 var(--blueberry-ink);
}
.btn:hover { background: var(--blueberry-ink); color: #fff; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn-ghost { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-ghost:hover { background: var(--blueberry-50); color: var(--blueberry-ink); box-shadow: inset 0 0 0 2px var(--blueberry); }

/* -------------------------------------------------------------------- hero */
.hero { padding: var(--s8) 0 var(--s7); }
.hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--s6); align-items: center; }
.hero h1 { margin-bottom: var(--s4); }
.hero-lede { font-size: 20px; color: var(--ink-500); max-width: 56ch; margin-bottom: var(--s5); }
/* The nursery page's opening paragraph carries the answer, so it is set in ink
   rather than the grey of a subtitle, and the actions sit under it in a row. */
.hero-answer { font-size: 19px; line-height: 1.55; color: var(--ink-700); max-width: 64ch; margin: 0 0 var(--s5); }
.hero-answer strong { color: var(--ink-900); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 760px) {
    .hero-answer { font-size: 17px; }
    .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.hero-art { justify-self: center; width: 100%; max-width: 340px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-family: var(--body); font-size: 13px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--blueberry-ink); background: var(--blueberry-50);
    padding: var(--s2) var(--s3); border-radius: var(--r-pill); margin-bottom: var(--s3);
}
.eyebrow.is-mint { color: var(--mint-ink); background: var(--mint-50); }
.eyebrow.is-tangerine { color: var(--tangerine-ink); background: var(--tangerine-50); }
.eyebrow.is-grape { color: #5534d6; background: var(--grape-50); }
.eyebrow.is-bubblegum { color: #b32b63; background: var(--bubblegum-50); }

/* ----------------------------------------------------------------- section */
.section { padding: var(--s7) 0; }
.section-head { max-width: 68ch; margin-bottom: var(--s5); }
.section-head p { color: var(--ink-500); margin: var(--s2) 0 0; font-size: 17px; }

/* --- town page ------------------------------------------------------------
   A second row of filters, a heading per group of results, and a tile that is
   a link. All of it reuses the existing pieces; only the differences are here. */
.tiles.is-1 { grid-template-columns: 1fr; max-width: 420px; }
.tiles.is-2 { grid-template-columns: repeat(2, 1fr); }
.tiles.is-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .tiles.is-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles.is-3 { grid-template-columns: 1fr; } }

.tile-link { text-decoration: none; min-height: 92px; }
.tile-link .tile-num { font-size: 20px; }
.tile-link:hover { border-color: var(--blueberry); }

/* the filter row, quieter than the type row above it */
.sortbar-2 { margin-top: calc(var(--s4) * -1 + var(--s2)); }
.sortbar-2 a, .sortbar-2 strong { font-size: 14px; padding: var(--s1) var(--s3); }
.sortbar-sep { align-self: center; font-size: 13px; font-weight: 800; color: var(--ink-400);
               text-transform: uppercase; letter-spacing: .06em; margin-left: var(--s3); }
.sortbar .n { font-variant-numeric: tabular-nums; opacity: .65; margin-left: 2px; }

/* Ofsted's own words. Set as an extract, not as our prose: an indent rule down
   the left, the source line above it, and the improvement list marked out so it
   is impossible to mistake for the praise above. */
.ofsted-words { margin-bottom: var(--s5); }
.ofsted-words .words-src { font-size: 13px; font-weight: 700; color: var(--ink-400);
                           text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--s4); }
.ofsted-words h4 { font-size: 16px; margin: var(--s5) 0 var(--s2); }
.ofsted-words h4:first-of-type { margin-top: 0; }
.ofsted-words p { max-width: 74ch; color: var(--ink-700); }
.ofsted-words > p:not(.words-src) { border-left: 3px solid var(--mint); padding-left: var(--s4); }
.words-improve { background: var(--sunshine-50); border-radius: var(--r-md);
                 padding: var(--s4) var(--s4) var(--s2); }
.words-improve p { color: var(--ink-900); margin-bottom: var(--s3); }

/* --- the contact form ------------------------------------------------------
   One column, generous targets, labels above their field. Nothing clever. */
.contact-form { max-width: 620px; }
.contact-form label { display: block; font-family: var(--display); font-weight: 600;
                      font-size: 15px; margin: var(--s4) 0 var(--s2); }
.contact-form label:first-child { margin-top: 0; }
.contact-form .opt { font-family: var(--body); font-weight: 700; font-size: 12px;
                     color: var(--ink-400); text-transform: uppercase;
                     letter-spacing: .06em; margin-left: var(--s2); }
.contact-form input[type="text"], .contact-form input[type="email"],
.contact-form select, .contact-form textarea {
    width: 100%; font-family: var(--body); font-size: 16px; font-weight: 500;
    color: var(--ink-900); background: var(--paper-2);
    border: 2px solid var(--line-strong); border-radius: var(--r-sm);
    padding: var(--s3) var(--s4);
}
.contact-form textarea { line-height: 1.55; resize: vertical; min-height: 160px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    border-color: var(--blueberry); outline: none; background: #fff;
}
/* Off the side of the screen rather than display:none. A bot that skips hidden
   fields still fills this one, and a screen reader is told to ignore it. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Questions and answers. Set as prose rather than in the price-card grid the
   first version reused, which squeezed four answers into four narrow columns. */
.qa h3 { font-size: 17px; margin: var(--s5) 0 var(--s2); }
.qa h3:first-child { margin-top: 0; }
.qa p { color: var(--ink-500); margin: 0; max-width: 78ch; }

.group-head { font-size: 19px; margin: var(--s5) 0 var(--s3); display: flex;
              align-items: baseline; gap: var(--s2); }
.group-head:first-child { margin-top: 0; }
.group-head span { font-family: var(--body); font-size: 14px; font-weight: 800;
                   color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- cards */
.card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--sh-1);
}
.card-lg { border-radius: var(--r-lg); padding: var(--s6); }

/* --------------------------------------------------------------- stat tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.tiles.is-6 { grid-template-columns: repeat(6, 1fr); }
.tiles.is-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .tiles.is-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .tiles, .tiles.is-6, .tiles.is-4 { grid-template-columns: repeat(2, 1fr); } }
.tile {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s4) var(--s4) var(--s4) var(--s5); box-shadow: var(--sh-1);
    position: relative; overflow: hidden; min-height: 116px;
    display: flex; flex-direction: column; justify-content: center;
}
/* the colour bar is decoration; the label always says what the number is */
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--blueberry); }
.tile.is-tangerine::before { background: var(--tangerine); }
.tile.is-mint::before { background: var(--mint); }
.tile.is-sunshine::before { background: var(--sunshine); }
.tile.is-grape::before { background: var(--grape); }
.tile.is-bubblegum::before { background: var(--bubblegum); }
.tile.is-quiet::before { background: var(--closed-ink); }
.tile-num { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.tile-num.is-sm { font-size: 22px; }
.tile-label { font-size: 14px; font-weight: 700; color: var(--ink-500); margin-top: var(--s1); line-height: 1.3; }

/* ------------------------------------------------------------------- chips */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 var(--s3); border-radius: var(--r-pill);
    font-family: var(--body); font-size: 13px; font-weight: 800;
    white-space: nowrap; letter-spacing: .01em;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.chip-g1 { color: var(--g1-ink); background: var(--g1-bg); }
.chip-g2 { color: var(--g2-ink); background: var(--g2-bg); }
.chip-g3 { color: var(--g3-ink); background: var(--g3-bg); }
.chip-g4 { color: var(--g4-ink); background: var(--g4-bg); }
.chip-g0 { color: var(--g0-ink); background: var(--g0-bg); }
.chip-new { color: var(--grape); background: var(--grape-50); }
.chip-open { color: var(--g1-ink); background: var(--g1-bg); }
.chip-closed { color: var(--closed-ink); background: var(--closed-bg); }

/* ------------------------------------------------------------------ tables */
.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th, table.grid td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid thead th {
    background: var(--paper-2); font-family: var(--body); font-size: 12px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500);
    position: sticky; top: 0; z-index: 1; border-bottom: 2px solid var(--line-strong);
}
table.grid tbody tr:nth-child(even) { background: var(--paper-2); }
table.grid tbody tr:hover { background: var(--blueberry-50); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid td.n, table.grid th.n { text-align: right; }
/* secondary line under a value — global, not scoped to one table */
.sub { display: block; font-size: 13px; font-weight: 600; color: var(--ink-400); margin-top: 2px; }
table.grid tr.group-row th {
    background: var(--ink-900); color: #fff; font-size: 13px; letter-spacing: .07em;
    position: static; border-bottom: 0;
}
.cell-name { font-weight: 700; }

/* ------------------------------------------------------------- meter (bar) */
/* One series, magnitude. Value is always printed, never colour-only. */
.meter { display: flex; align-items: center; gap: var(--s3); min-width: 190px; }
.meter-track { position: relative; flex: 1; height: 12px; border-radius: var(--r-pill); background: #edf1fa; overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--blueberry); }
.meter-fill.is-risk { background: var(--tangerine); }
.meter-val { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; min-width: 52px; text-align: right; }

/* --------------------------------------------------------------- setting cards */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--s3); }
.setting {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s4); box-shadow: var(--sh-1);
    display: flex; flex-direction: column; gap: var(--s3); min-height: 168px;
}
.setting:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); }
.setting-top { display: flex; align-items: flex-start; gap: var(--s3); }
.setting-badge {
    width: 44px; height: 44px; flex: none; border-radius: var(--r-sm);
    display: grid; place-items: center; font-family: var(--display); font-size: 19px; font-weight: 600;
    background: var(--blueberry-50); color: var(--blueberry-ink);
}
.setting-name { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.25; }
.setting-name a { text-decoration: none; color: var(--ink-900); }
.setting-name a:hover { color: var(--blueberry-ink); text-decoration: underline; }
.setting-meta { font-size: 13px; font-weight: 700; color: var(--ink-400); margin-top: 2px; }
.setting-facts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; }
.fact {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s3);
    border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--line);
    font-size: 13px; font-weight: 700; color: var(--ink-500);
}

/* --------------------------------------------------------------- town chips */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
    display: inline-flex; align-items: baseline; gap: var(--s2);
    padding: var(--s2) var(--s4); border-radius: var(--r-pill);
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1);
    text-decoration: none; font-weight: 700; color: var(--ink-900); font-size: 15px;
}
.pill:hover { border-color: var(--blueberry); background: var(--blueberry-50); color: var(--blueberry-ink); }
.pill b { font-family: var(--display); font-weight: 600; }
.pill span { font-size: 13px; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- steps */
/* Four steps now, so four columns, then 2 + 2. Three columns would leave the
   fourth stranded on a row of its own. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); counter-reset: step; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--sh-1); }
.step-n {
    width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
    font-family: var(--display); font-weight: 600; font-size: 20px; margin-bottom: var(--s3);
    background: var(--blueberry-50); color: var(--blueberry-ink);
}
.step:nth-child(2) .step-n { background: var(--mint-50); color: var(--mint-ink); }
.step:nth-child(3) .step-n { background: var(--bubblegum-50); color: #b32b63; }
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--ink-500); font-size: 15px; margin: 0; }

/* ------------------------------------------------------------------ notice */
.notice {
    display: flex; gap: var(--s3); align-items: flex-start;
    background: var(--sunshine-50); border: 1px solid #f3dda4;
    border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: var(--s4) 0;
    font-size: 16px;
}
.notice.is-quiet { background: var(--closed-bg); border-color: #e2d6e4; }
.notice.is-info { background: var(--blueberry-50); border-color: #c8d8fb; }
/* For a concern Ofsted looked into. Sunshine, not the red reserved for an
   Inadequate grade: this says "read this", not "we have judged them". */
.notice.is-warn { background: var(--sunshine-50); border-color: #f0d79a; }
.notice ul { margin: var(--s3) 0 0; padding-left: var(--s4); }
.notice li { margin-bottom: var(--s1); }
.notice strong { font-family: var(--display); font-weight: 600; }
.notice-icon { flex: none; width: 24px; height: 24px; }

/* ---------------------------------------------------------------- timeline */
.timeline { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.timeline li { position: relative; padding: 0 0 var(--s5) var(--s6); border-left: 3px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
    content: ""; position: absolute; left: -10px; top: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: var(--paper); border: 3px solid var(--blueberry);
}
.timeline li.ev-Closed::before { border-color: var(--closed-ink); }
.timeline li.ev-Opened::before { border-color: var(--mint); }
.timeline li.ev-PlacesDown::before { border-color: var(--tangerine); }
.timeline li.ev-PlacesUp::before { border-color: var(--mint); }
.timeline .when { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink-400); }
.timeline .what { font-size: 16px; }

/* -------------------------------------------------------------- report card */
.rc { display: flex; flex-wrap: wrap; gap: var(--s3); }
.rc-item { flex: 1 1 212px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); background: var(--paper-2); }
.rc-k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--s2); }

/* ------------------------------------------------------------- definitions */
.deflist { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.deflist > div { flex: 1 1 232px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); }
.deflist dt { font-family: var(--display); font-weight: 600; font-size: 16px; margin-bottom: var(--s1); }
.deflist dd { margin: 0; font-size: 14px; color: var(--ink-500); }

/* ------------------------------------------------------------------- chart */
.chart-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-1); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4); }
.legend-item { display: inline-flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 700; color: var(--ink-700); }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-note { font-size: 14px; color: var(--ink-400); margin-top: var(--s3); }
details.table-view { margin-top: var(--s4); }
details.table-view summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--blueberry-ink); }
details.table-view[open] summary { margin-bottom: var(--s3); }

/* ------------------------------------------------------------------ footer */
.footer { background: var(--ink-900); color: #c8d3f0; margin-top: var(--s8); padding: var(--s7) 0 var(--s7); }
.footer a { color: #fff; }
.footer h4 { color: #fff; font-size: 17px; margin-bottom: var(--s3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.footer p { font-size: 15px; line-height: 1.6; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--s2); font-size: 15px; }
.footer .fine { border-top: 1px solid #2c3c70; margin-top: var(--s6); padding-top: var(--s4); font-size: 13px; color: #92a3cc; }

/* ----------------------------------------------------------------- utility */
.muted { color: var(--ink-500); font-size: 15px; }
.tiny { font-size: 13px; color: var(--ink-400); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.right { margin-left: auto; }
.center { text-align: center; }
.up { color: var(--mint-ink); font-weight: 800; }
.down { color: var(--tangerine-ink); font-weight: 800; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sortbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.sortbar a, .sortbar strong {
    font-size: 14px; font-weight: 800; padding: var(--s2) var(--s3);
    border-radius: var(--r-pill); text-decoration: none;
}
.sortbar a { color: var(--ink-500); background: var(--paper); border: 1px solid var(--line); }
.sortbar a:hover { color: var(--blueberry-ink); border-color: var(--blueberry); }
.sortbar strong { color: #fff; background: var(--ink-900); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
    .hero-art { max-width: 240px; }
    .steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 760px) {
    body { font-size: 16px; }
    .wrap { padding: 0 var(--s4); }
    .hero { padding: var(--s6) 0 var(--s5); }
    .section { padding: var(--s6) 0; }
    .card-lg, .chart-card { padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   FINDER — the parent journey: postcode in, short list out, compare two or three
   ========================================================================== */

/* the search box is the product, so it is the biggest thing on the page */
.finder { background: var(--paper); border: 2px solid var(--line-strong); border-radius: var(--r-lg);
          padding: var(--s5); box-shadow: var(--sh-2); }
.finder-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.finder label { display: block; font-family: var(--display); font-size: 17px; font-weight: 600;
                margin-bottom: var(--s2); }
.finder input[type=search], .finder input[type=text] {
    flex: 1 1 260px; min-width: 0; font-family: var(--body); font-size: 19px; font-weight: 700;
    padding: var(--s4) var(--s5); border: 2px solid var(--line-strong);
    border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-900);
}
.finder input::placeholder { color: var(--ink-400); font-weight: 500; }
.finder input:focus { border-color: var(--blueberry); outline: none; background: #fff; }
.finder .btn { font-size: 18px; padding: var(--s4) var(--s6); }
.finder-hint { font-size: 14px; color: var(--ink-400); margin: var(--s3) 0 0; }

/* filter row sits above the results, one line, never a sidebar */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
           background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
           padding: var(--s2) var(--s3); box-shadow: var(--sh-1); }
.filters select, .filters input[type=number] {
    font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--ink-900);
    padding: var(--s2) var(--s3); border: 1px solid var(--line-strong);
    border-radius: var(--r-pill); background: var(--paper-2);
}
.filters .f-label { font-size: 13px; font-weight: 800; color: var(--ink-400);
                    text-transform: uppercase; letter-spacing: .06em; padding-left: var(--s2); }
.filters .btn { padding: var(--s2) var(--s4); font-size: 15px; }

/* one result */
.results { display: grid; gap: var(--s3); }
.result { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s4);
          background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
          padding: var(--s4) var(--s5); box-shadow: var(--sh-1); align-items: start; }
.result:hover { box-shadow: var(--sh-2); border-color: var(--line-strong); }
.result-pick { display: grid; place-items: center; padding-top: 4px; }
.result-pick input { width: 22px; height: 22px; accent-color: var(--blueberry); cursor: pointer; }
.result-name { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; }
.result-name a { color: var(--ink-900); text-decoration: none; }
.result-name a:hover { color: var(--blueberry-ink); text-decoration: underline; }
.result-sub { font-size: 14px; font-weight: 700; color: var(--ink-400); margin: 2px 0 0; }
.result-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.result-dist { text-align: right; white-space: nowrap; }
.result-miles { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.1;
                color: var(--blueberry-ink); }
.result-walk { font-size: 13px; font-weight: 700; color: var(--ink-400); }
.result-phone { display: block; font-size: 15px; font-weight: 800; margin-top: var(--s3); }

/* The sticky tray for comparing. It rides the bottom of the screen the whole
   way down the list, on purpose: it is what tells you the tick boxes do
   something, and hiding it until you tick one means nobody ticks one. It was
   briefly hidden until something was selected; that lost the affordance, so it
   is back. */
.compare-bar { position: sticky; bottom: 0; z-index: 15; margin-top: var(--s5);
               background: var(--ink-900); color: #fff; border-radius: var(--r-md);
               padding: var(--s3) var(--s5); display: flex; align-items: center;
               gap: var(--s4); flex-wrap: wrap; box-shadow: var(--sh-2); }
.compare-bar p { margin: 0; font-weight: 700; font-size: 15px; }
.compare-bar .btn { background: var(--sunshine); color: #3a2800; box-shadow: 0 2px 0 #b07800; }
.compare-bar .btn:hover { background: #ffb01f; color: #3a2800; }

/* side-by-side comparison */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper);
       border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cmp th, .cmp td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
                   vertical-align: top; text-align: left; font-size: 15px; }
.cmp thead th { background: var(--paper-2); border-bottom: 2px solid var(--line-strong);
                font-family: var(--display); font-size: 17px; font-weight: 600; }
.cmp tbody th { width: 190px; font-size: 13px; font-weight: 800; color: var(--ink-400);
                text-transform: uppercase; letter-spacing: .05em; background: var(--paper-2); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .best { background: var(--g1-bg); }

/* the visit checklist — the bit a parent prints */
.checklist { list-style: none; padding: 0; margin: 0; display: grid;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.checklist li { background: var(--paper-2); border: 1px solid var(--line);
                border-radius: var(--r-md); padding: var(--s4); font-size: 15px; }
.checklist strong { display: block; font-family: var(--display); font-weight: 600;
                    font-size: 16px; margin-bottom: var(--s1); }

@media (max-width: 760px) {
    .result { grid-template-columns: 36px 1fr; }
    /* Miles, walk time, phone and website were four rows each on a phone, under
       four rows of chips, under two of name: six cards made 2,700px of list.
       They read fine as one line of miles and walk, one of phone and website. */
    .result-dist { grid-column: 2; text-align: left; margin-top: var(--s2);
                   display: flex; flex-wrap: wrap; align-items: baseline;
                   column-gap: var(--s4); row-gap: 0; }
    .result-miles { font-size: 20px; }
    .result-walk { margin-right: auto; }
    .result-phone { display: inline-block; margin-top: var(--s2); flex-basis: 100%; }
    .result-phone + .result-web { margin-left: 0; }
    .result-miles { font-size: 20px; }
    .cmp tbody th { width: 120px; font-size: 12px; }
}

.result-web { display: block; font-size: 14px; font-weight: 700; margin-top: 4px; }

/* ============================================================================
   GUIDES & CALCULATOR — the money pages
   ========================================================================== */

.prose { max-width: 74ch; }
.prose p { margin: 0 0 var(--s4); }
.prose ul.checklist { margin: var(--s4) 0; }
.prose .table-wrap { margin: var(--s4) 0; }
.prose a { font-weight: 700; }

.faq { display: grid; gap: var(--s2); max-width: 82ch; }
.faq details {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s4) var(--s5); box-shadow: var(--sh-1);
}
.faq summary {
    cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 18px;
    color: var(--ink-900); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--blueberry); font-weight: 700; }
.faq details[open] summary::before { content: "\2212 "; }
.faq details[open] summary { margin-bottom: var(--s3); }
.faq p { margin: 0; color: var(--ink-700); }

.calc { display: grid; gap: var(--s5); }
/* Four fields, so the column count is pinned rather than left to auto-fit: at
   900px auto-fit chose three and left the fourth stranded on a row of its own.
   4, then 2 + 2, then stacked. Never 3 + 1. */
.calc-inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
@media (max-width: 1000px) { .calc-inputs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .calc-inputs { grid-template-columns: 1fr; } }
.calc-inputs label {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--display); font-weight: 600; font-size: 16px;
}
.calc-inputs .sub { font-family: var(--body); margin: 0; }
.calc-inputs input, .calc-inputs select {
    font-family: var(--body); font-size: 19px; font-weight: 800;
    padding: var(--s3) var(--s4); border: 2px solid var(--line-strong);
    border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    /* Only two of the four labels carry a subtitle, so the other two boxes floated
       27px higher than their neighbours. Pushing every box to the bottom of its
       cell puts them all on one line whatever the label above it runs to. */
    margin-top: auto;
    width: 100%; box-sizing: border-box;
}
/* A select is not given the width of its longest option, so "30 hours (working
   parents)" was being clipped mid-word. */
.calc-inputs select { text-overflow: ellipsis; }
.calc-inputs input:focus, .calc-inputs select:focus { border-color: var(--blueberry); outline: none; background: #fff; }

.calc-rows { display: grid; gap: var(--s2); }
.calc-row {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4);
    align-items: baseline; padding: var(--s3) var(--s4);
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.calc-row.is-big { background: var(--ink-900); border-color: var(--ink-900); }
.calc-row.is-big .calc-k, .calc-row.is-big .calc-n { color: #c8d3f0; }
.calc-row.is-big .calc-v { color: #fff; font-size: 34px; }
.calc-k { font-weight: 700; font-size: 16px; }
.calc-v {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.calc-v.is-good { color: var(--mint-ink); }
.calc-n { grid-column: 1 / -1; font-size: 13px; color: var(--ink-400); font-weight: 600; }
.calc-saved {
    margin: var(--s4) 0 0; padding: var(--s4) var(--s5);
    background: var(--mint-50); border: 1px solid #b6e6db; border-radius: var(--r-md);
    font-size: 17px;
}

@media (max-width: 760px) {
    .calc-row.is-big .calc-v { font-size: 26px; }
    .calc-v { font-size: 21px; }
}

/* map, save button, shortlist */
.map { height: 420px; border-radius: var(--r-md); border: 1px solid var(--line);
       box-shadow: var(--sh-1); overflow: hidden; background: var(--paper-2); }
.map .leaflet-container { font: inherit; }
.save { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 1;
        font-size: 19px; color: var(--line-strong); margin-top: 6px; }
.save:hover { color: var(--sunshine); }
.save.is-saved { color: var(--sunshine); }
.pillcount { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
             border-radius: var(--r-pill); background: var(--sunshine); color: #3a2800;
             font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
@media (max-width: 760px) { .map { height: 300px; } }

/* --- what a setting publishes on its own site -----------------------------
   A price needs to read as a real published figure, not a NurseryWise estimate, so
   it sits with the sentence it came from directly beneath it. */
.feehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
           margin-bottom: var(--s3); }
.feebig { font-family: var(--display); font-weight: 700; font-size: 34px;
          line-height: 1.1; color: var(--sunshine-ink); }
.feeband { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
           background: var(--sunshine-50); border: 1px solid #f3dda4;
           font-size: 13px; font-weight: 700; color: var(--sunshine-ink); }
.quote { margin: 0 0 var(--s2); padding: var(--s3) var(--s4);
         border-left: 4px solid var(--sunshine); border-radius: 0 var(--r-md) var(--r-md) 0;
         background: var(--paper-2); font-size: 15px; line-height: 1.55;
         color: var(--ink-700); font-style: normal; }
.quote::before { content: '\201C'; }
.quote::after  { content: '\201D'; }
@media (max-width: 760px) { .feebig { font-size: 28px; } }
.fact-fee { background: var(--sunshine-50); border-color: #f3dda4;
            color: var(--sunshine-ink); font-weight: 800; }
.feecell { color: var(--sunshine-ink); font-size: 18px; }

/* --- fact cards with a bit of life in them --------------------------------
   Each card carries a line icon in a tinted bubble. The tint is the only thing
   that varies, so the grid still reads as one set rather than a pick-and-mix. */
.fx { display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: 11px; flex: none; }
.fx svg { width: 19px; height: 19px; }
.fx-blueberry { background: var(--blueberry-50); color: var(--blueberry-ink); }
.fx-mint      { background: var(--mint-50);      color: var(--mint-ink); }
.fx-sunshine  { background: var(--sunshine-50);  color: var(--sunshine-ink); }
.fx-tangerine { background: var(--tangerine-50); color: var(--tangerine-ink); }
.fx-grape     { background: var(--grape-50);     color: #5b3fd1; }
.fx-bubblegum { background: var(--bubblegum-50); color: #c23c72; }

.deflist dt { display: flex; align-items: center; gap: 10px; }
.deflist dt .fx { margin-left: -2px; }
.deflist > div { transition: border-color .15s ease, transform .15s ease; }
.deflist > div:hover { border-color: var(--blueberry); transform: translateY(-1px); }

/* The map belongs on the page, not behind a link to somebody else's site. */
.map-sm { height: 300px; }
@media (max-width: 760px) { .map-sm { height: 240px; } }

/* --- fact grid: a real grid, so an orphan card stays one column -----------
   As flex with `flex: 1 1 232px`, a row holding one leftover card stretched it
   to full width — nine cards rendered as 4 + 4 + 1-across-the-whole-page, which
   is the first thing the eye lands on and the hardest to unsee. auto-fill keeps
   every card exactly one column wide however many there are, and `start` stops
   a short card growing to match a tall neighbour. */
/* Bottoms align across a row, which reads far tidier than a ragged edge — and
   is only affordable because every note below is kept to about two lines. */
.deflist { display: grid; grid-template-columns: repeat(4, 1fr);
           gap: var(--s3); align-items: stretch; }
@media (max-width: 1080px) { .deflist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .deflist { grid-template-columns: 1fr; } }
.deflist dt { min-height: 34px; }
.deflist > div { flex: none; }

/* The map is a thing in its own right, not an afterthought glued under the facts. */
.map-cap { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--s3); margin: var(--s5) 0 var(--s2); }
.map-cap h3 { margin: 0; font-size: 17px; }
.map-cap span { font-size: 13px; font-weight: 600; color: var(--ink-400); }

/* A reference number nobody searches by does not need a card of its own. */
.card-foot { margin-top: var(--s4); padding-top: var(--s3);
             border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;
             gap: var(--s4); font-size: 13px; font-weight: 600; color: var(--ink-400); }
.card-foot b { color: var(--ink-500); font-weight: 700; }

/* Sections were spaced identically whatever they held, so a one-line card sat in
   as much air as a full table. Tighter, with the air kept between sections. */
.section { padding: var(--s6) 0; }
.section + .section { padding-top: var(--s5); }

/* The price-against-median line is the most useful sentence on a setting page
   and was rendering as the faintest thing on it. */
.verdict { margin-top: var(--s4); padding: var(--s4) var(--s5);
           background: var(--sunshine-50); border: 1px solid #f3dda4;
           border-radius: var(--r-md); font-size: 15px; line-height: 1.6;
           color: var(--ink-700); }
.verdict strong { color: var(--sunshine-ink); }

/* --- header ----------------------------------------------------------------
   Desktop: one row, brand left, links and search right. The links and the
   search sit inside .menu, which on desktop is display:contents so it adds no
   box of its own and the row lays out exactly as it did when they were loose.

   Phone: one 60px row of brand and a menu button. The links and the search
   used to wrap into three stacked rows, which put a third of the screen of
   chrome above the name of the nursery somebody had just tapped. Now they are
   a panel under the row, open on demand, links at a 44px tap height. */
.masthead .wrap { flex-wrap: nowrap; }
.menu { display: contents; }
.menu-btn { display: none; }
.nav { flex-wrap: nowrap; white-space: nowrap; }
.searchbar { flex: none; margin-left: var(--s3); }
.searchbar input { min-width: 168px; width: 168px; }
/* nowrap squeezes whatever can shrink, and that was the wordmark: "Childcare in
   England" broke over two lines before anything else gave. */
.brand { flex: none; }
.brand-sub { white-space: nowrap; }

@media (max-width: 1180px) {
    .masthead .wrap { flex-wrap: wrap; row-gap: var(--s3); }
    .nav { margin-left: auto; }
    .searchbar { order: 3; width: 100%; margin-left: 0; }
    .searchbar input { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 900px) {
    .masthead .wrap { flex-wrap: nowrap; min-height: 60px; padding-top: var(--s2); padding-bottom: var(--s2); }
    .brand-mark { width: 34px; height: 34px; }
    .brand-name { font-size: 22px; }
    .brand-sub { display: none; }

    /* align-items: stretch is not the default here. Chromium's own stylesheet
       gives a <button> align-items: flex-start, so the three bars, having no
       content, were rendered at zero width and the button looked empty. */
    .menu-btn { display: inline-flex; flex-direction: column; justify-content: center;
                align-items: stretch; gap: 5px;
                margin-left: auto; width: 44px; height: 44px; padding: 0 10px;
                border: 2px solid var(--line-strong); border-radius: var(--r-sm);
                background: var(--paper); cursor: pointer; }
    .menu-btn:hover { border-color: var(--blueberry); }
    .menu-bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink-900);
                transition: transform .18s ease, opacity .18s ease; }
    .is-open .menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .is-open .menu-bar:nth-child(2) { opacity: 0; }
    .is-open .menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .menu { display: none; position: absolute; left: 0; right: 0; top: 100%;
            background: var(--paper); border-bottom: 1px solid var(--line);
            box-shadow: var(--sh-2); padding: var(--s3) var(--s4) var(--s4); }
    .is-open .menu { display: block; }
    .nav { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; margin: 0; }
    .nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
             font-size: 17px; border-radius: var(--r-sm); }
    .searchbar { order: 0; width: 100%; margin: var(--s3) 0 0; padding-top: var(--s3);
                 border-top: 1px solid var(--line); }
    .searchbar input { flex: 1; width: auto; min-width: 0; }
}

/* --- above the fold --------------------------------------------------------
   Two columns that begin and end on the same lines, then one even strip of
   figures beneath both. Before this the right-hand column held a stat panel
   that stopped two-thirds of the way down, leaving a large empty rectangle
   under it and nothing on either side lining up with anything on the other. */
.hero { padding: var(--s7) 0 var(--s6); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s6);
             align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; }
/* A flex column stretches its children, which blew the eyebrow pill out to the
   full column width. It should hug its text; the search card should not. */
.hero-copy > .eyebrow { align-self: flex-start; }
.hero-copy .finder { margin-top: auto; }   /* pin the search to the bottom edge */
.hero h1 { margin-bottom: var(--s4); }
.hero-lede { font-size: 19px; color: var(--ink-500); max-width: 52ch;
             margin-bottom: var(--s5); }

.hero-photo { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2);
              border: 1px solid var(--line); min-height: 340px; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Four equal cells. Equal on purpose: a 3 + 1 wrap is the thing that makes a
   strip like this look broken. */
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
         margin-top: var(--s6); background: #fff; border: 2px solid var(--line);
         border-radius: var(--r-lg); overflow: hidden; }
.hole { padding: var(--s5); border-right: 2px solid var(--line); }
.hole:last-child { border-right: 0; }
.hole-n { display: block; font-family: var(--display); font-weight: 700;
          font-size: 32px; line-height: 1.05; letter-spacing: -.02em;
          font-variant-numeric: tabular-nums; }
.hole-l { display: block; margin-top: var(--s2); font-size: 13px; font-weight: 600;
          line-height: 1.4; color: var(--ink-500); }
.hole.is-blueberry .hole-n { color: var(--blueberry); }
.hole.is-mint      .hole-n { color: var(--mint-ink); }
.hole.is-sunshine  .hole-n { color: var(--sunshine-ink); }
.hole.is-grape     .hole-n { color: #5b3fd1; }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-photo { min-height: 220px; max-height: 260px; }
    .hero-copy .finder { margin-top: 0; }
    .shelf { grid-template-columns: 1fr 1fr; }
    .hole:nth-child(2n) { border-right: 0; }
    .hole:nth-child(-n+2) { border-bottom: 2px solid var(--line); }
}
@media (max-width: 430px) {
    .shelf { grid-template-columns: 1fr; }
    .hole { border-right: 0; border-bottom: 2px solid var(--line); }
    .hole:last-child { border-bottom: 0; }
}

/* --- asking for what we don't have ----------------------------------------
   A quiet panel, not a billboard. The gaps are chips so they can be scanned in
   one pass; the earlier version made the list into a heading and it ran to three
   lines of 26px type, which shouted at someone who had done nothing wrong. */
.gapbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
          justify-content: space-between;
          background: var(--mint-50); border: 1px solid #b8e6dc;
          border-radius: var(--r-lg); padding: var(--s5); }
.gapbox-main { flex: 1 1 420px; min-width: 0; }
.gapbox h3 { margin: 0 0 var(--s3); font-size: 17px; }
.gapbox p { margin: var(--s3) 0 0; font-size: 14px; color: var(--ink-500); max-width: 56ch; }
.gaplist { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.gaplist li { padding: 5px 12px; border-radius: var(--r-pill); background: #fff;
              border: 1px solid #b8e6dc; font-size: 13px; font-weight: 700;
              color: var(--mint-ink); }
.gapbox-do { display: flex; flex-wrap: wrap; gap: var(--s3); flex: none; }

/* Contribute and claim forms reuse the calculator's field grid, so they inherit
   the levelling fix rather than repeating it. */
.contrib .calc-inputs label { font-size: 15px; }
.claim-opts { display: grid; gap: var(--s3); }
.claim-opt { display: flex; align-items: flex-start; gap: var(--s3);
             padding: var(--s4); border: 2px solid var(--line); border-radius: var(--r-md);
             background: var(--paper-2); cursor: pointer; }
.claim-opt:hover { border-color: var(--blueberry); }
.claim-opt input { margin-top: 3px; flex: none; }
.claim-opt .sub { display: block; margin-top: 2px; }
.cf-turnstile { min-height: 65px; }
@media (max-width: 760px) { .gapbox-do { width: 100%; } .gapbox-do .btn { flex: 1 1 auto; justify-content: center; } }

/* --- the price schedule ----------------------------------------------------
   A nursery publishes a table, so the page shows a table: age bands down, the
   units it quotes in across. Priced columns are sized to their content and a
   flexible spacer takes the slack, because letting four columns share 1340px
   pushed the hourly rate half a screen away from the day rate. */
.rates { width: 100%; border-collapse: collapse; font-size: 15px; }
.rates th, .rates td { padding: var(--s3) var(--s5) var(--s3) 0; text-align: left;
                       vertical-align: top; border-bottom: 1px solid var(--line); }
.rates thead th { padding-bottom: var(--s2); font-family: var(--display); font-size: 12px;
                  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--ink-400); border-bottom: 2px solid var(--line-strong);
                  white-space: nowrap; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 0; }
.rates-age { width: 1%; white-space: nowrap; padding-right: var(--s6) !important; }
/* The padding column used to take all the slack so the priced columns packed
   left; with three columns that left two thirds of the card blank. Now the
   priced columns share the width and the pad only absorbs what is left over
   a comfortable column, so nothing drifts and nothing is empty. */
.rates-pad { width: auto; padding: 0 !important; border-bottom-color: transparent; }
.rates th:not(.rates-age):not(.rates-pad),
.rates td:not(.rates-age):not(.rates-pad) { width: 22%; max-width: 300px; }
/* Enough room for "School Day" to stay on one line. Shrink-to-fit alone broke
   every two-word label onto two rows and made the table look like a poem. */
.rates th:not(.rates-age):not(.rates-pad),
.rates td:not(.rates-age):not(.rates-pad) { min-width: 138px; }
.ageband { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; }
.rates-age .sub { font-weight: 600; }

/* One price and what it buys, stacked. Two sessions at the same price share a
   cell rather than printing the figure twice. */
.ratecell { position: relative; padding: 2px 0; }
.ratecell + .ratecell { margin-top: var(--s3); }
.rate { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15;
        color: var(--sunshine-ink); font-variant-numeric: tabular-nums;
        border-bottom: 1px dotted #e0c79a; cursor: help; }
.ratecell .sub { display: block; margin-top: 1px; }
/* The one a card would show, so the table and the card never seem to disagree. */
.ratecell.is-head .rate { background: var(--sunshine-50); box-shadow: 0 0 0 4px var(--sunshine-50);
                          border-radius: 3px; }
.rates .na { color: var(--ink-300); }

/* The charges that are not session rates. Grouped, because "what you pay to
   start" and "what a funded hour still costs" are different questions. */
.charges { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.charges + .charges { margin-top: var(--s4); }
.charges h4 { margin: 0 0 var(--s1); font-size: 15px; }
.charges > .sub { margin: 0 0 var(--s3); }
.charges ul { list-style: none; margin: 0; padding: 0; display: grid;
              grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3);
              align-items: start; }
.charges li { background: var(--paper-2); border: 1px solid var(--line);
              border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: 14px;
              line-height: 1.45; }
.charges li strong { color: var(--sunshine-ink); font-family: var(--display); font-size: 16px;
                     font-variant-numeric: tabular-nums; }
.charges li .sub { display: block; margin-top: 2px; }

/* The screenshots. These are pictures of somebody else's page, so they are set
   back from ours: a plain frame, a caption underneath, no shadow and no flourish.
   The crop is already tight, so it is shown at its natural size up to the column
   width rather than stretched to fill it. */
.proof { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.proof h4 { margin: 0 0 var(--s1); font-size: 15px; }
.proof > .sub { margin: 0 0 var(--s4); }
.shot { margin: 0 0 var(--s4); }
.shot:last-child { margin-bottom: 0; }
.shot-frame { display: block; border: 1px solid var(--line); border-radius: var(--r-md);
              background: #fff; overflow: hidden; }
.shot-frame:hover { border-color: var(--line-strong); }
.shot img { display: block; max-width: 100%; height: auto; }

/* On a phone a 1280px crop scaled to the column is unreadable, which defeats
   the point of showing it. Below tablet it keeps a legible height and scrolls
   sideways instead, the way you read any wide table on a phone. Tapping opens
   the full image. */
@media (max-width: 700px) {
    .shot-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .shot img { max-width: none; width: auto; height: auto; max-height: 300px; }
}
.shot figcaption { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
                   margin-top: var(--s2); font-size: 13px; color: var(--ink-500); }
.shot figcaption a { color: var(--ink-500); text-decoration: underline;
                     text-underline-offset: 2px; }
.shot figcaption a:hover { color: var(--ink-900); }
.shot figcaption span { font-variant-numeric: tabular-nums; }

/* Below tablet the table becomes one block per age band, because four columns of
   prices on a phone is a horizontal scroll nobody discovers. */
@media (max-width: 700px) {
    .rates, .rates tbody, .rates tr, .rates td, .rates th { display: block; }
    .rates thead, .rates-pad { display: none; }
    .rates tbody tr { border: 1px solid var(--line); border-radius: var(--r-md);
                      padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
    .rates tbody tr:last-child { margin-bottom: 0; }
    .rates th, .rates td { border-bottom: 0; padding: var(--s2) 0 !important; }
    .rates-age { width: auto; padding-bottom: var(--s2) !important;
                 border-bottom: 1px solid var(--line) !important; margin-bottom: var(--s2); }
    .rates td:not(.rates-pad)::before { content: attr(data-col); display: block;
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
        color: var(--ink-400); margin-bottom: 2px; }
    .rates td.na { display: none; }   /* an empty cell needs no label of its own */
}

/* Funding rules in full. A truncated condition is worse than none: it reads as
   though we know something we are not saying, and the bit that costs money is
   always at the end of the sentence. */
.funded { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.funded h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3); font-size: 15px; }
.funded p { margin: 0 0 var(--s2); font-size: 15px; line-height: 1.6; max-width: 76ch;
            color: var(--ink-700); }
.funded-cond { background: var(--mint-50); border-left: 3px solid var(--mint);
               border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s3) var(--s4);
               margin-top: var(--s3) !important; }