/* ==========================================================================
   St Joseph's Pre-School Unit — public stylesheet
   Brand colours lifted from the existing site so parents still recognise it.
   ========================================================================== */

:root {
    --red:    #EF3B42;
    --red-d:  #CE2830;
    --green:  #7FC241;
    --green-d:#63A22E;
    --navy:   #17255A;
    --indigo: #3A34C4;
    --sky:    #57B6E5;
    --amber:  #FFB81C;
    --amber-d:  #B85C00;   /* deep enough for white text — 4.6:1 */
    --amber-dd: #9A4C00;   /* hover */
    --ink:    #23262F;
    --ink-2:  #5A6072;
    --line:   #E3E6EF;
    --bg:     #FFFFFF;
    --bg-2:   #F6F7FB;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 4px 20px rgba(23,37,90,.10);
    --shadow-lg: 0 12px 40px rgba(23,37,90,.16);
    --wrap: 1180px;
    --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--red); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 780px); }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.ic { flex: none; vertical-align: middle; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .78rem 1.35rem; border: 2px solid transparent; border-radius: 999px;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/**
 * White on the bright --red is 3.9:1, under the 4.5 needed for normal text, which is
 * why it reads as washed rather than white. --red-d takes it to 5.3:1 and the button
 * looks like it means it.
 */
.btn-red   { background: var(--red-d); color: #fff; }
.btn-red:hover { background: #B01F27; color: #fff; }
/**
 * Book a visit. White text needs a deeper amber underneath it — white on the bright
 * --amber is 1.7:1 and effectively unreadable. #B85C00 gets it to 4.6:1, which passes
 * AA for normal text while staying warm rather than going brown.
 */
.btn-amber { background: var(--amber-d); color: #fff; }
.btn-amber:hover { background: var(--amber-dd); color: #fff; }
.btn-amber:focus-visible { outline-color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }

/**
 * A slow ring pulse on the Book a visit buttons. It is a box-shadow rather than a
 * transform, so nothing reflows and nothing shifts under the cursor. It stops while
 * the button is hovered or focused, so it never fights an interaction, and it is off
 * entirely for anyone who has asked for less motion.
 */
@media (prefers-reduced-motion: no-preference) {
    .btn-amber { animation: cta-pulse 2.6s cubic-bezier(.4, 0, .3, 1) infinite; }
    .btn-amber:hover,
    .btn-amber:focus-visible { animation-play-state: paused; }

    @keyframes cta-pulse {
        0%       { box-shadow: 0 0 0 0    rgba(184, 92, 0, .55); }
        60%, 100% { box-shadow: 0 0 0 16px rgba(184, 92, 0, 0); }
    }
}

/**
 * The Come and see us strip is brand red, and deep amber on red turns muddy — the
 * button stops reading as a button. Navy separates cleanly and keeps the white text.
 */
/**
 * The header Book a visit pulses like the others. Its ring is tighter than theirs
 * because the header is sticky and always on screen — at 16px it washed over the
 * neighbouring nav links.
 */
@media (prefers-reduced-motion: no-preference) {
    .nav-cta { animation: cta-pulse-red 2.6s cubic-bezier(.4, 0, .3, 1) infinite; }
    .nav-cta:hover,
    .nav-cta:focus-visible { animation-play-state: paused; }

    @keyframes cta-pulse-red {
        0%        { box-shadow: 0 0 0 0    rgba(206, 40, 48, .5); }
        60%, 100% { box-shadow: 0 0 0 11px rgba(206, 40, 48, 0); }
    }
}

.cta-strip .btn-amber { background: var(--navy); }
.cta-strip .btn-amber:hover { background: #0F1940; }
@media (prefers-reduced-motion: no-preference) {
    .cta-strip .btn-amber { animation-name: cta-pulse-navy; }
    @keyframes cta-pulse-navy {
        0%       { box-shadow: 0 0 0 0    rgba(255, 255, 255, .5); }
        60%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
    }
}

/* ---------------------------------------------------------------- top bar */
.topbar { background: var(--navy); color: #fff; font-size: .875rem; }
.topbar-in { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .5rem 0; align-items: center; }
.topbar a, .topbar span.tb-hours { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--amber); text-decoration: underline; }
.tb-hours { margin-left: auto; opacity: .85; }
@media (max-width: 720px) { .tb-hours { display: none; } .topbar-in { gap: 1rem; justify-content: center; } }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 1px 0 var(--line); }
.head-in { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 0; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--navy); }
.brand-mark {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: var(--green); color: #fff; border-radius: 12px;
}
.brand-txt strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.brand-txt small { display: block; color: var(--ink-2); font-size: .78rem; }

.nav-toggle {
    margin-left: auto; display: none; align-items: center; gap: .5rem;
    background: var(--navy); color: #fff; border: 0; border-radius: 999px;
    padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
}
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.bars { position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -6px; } .bars::after { top: 6px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.nav > ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav a {
    display: block; padding: .55rem .6rem; border-radius: 10px;
    color: var(--navy); font-weight: 600; text-decoration: none; font-size: .93rem;
    /* A menu label broken across two lines reads as two links. Never wrap one — the
       breakpoint below hands over to the mobile menu before the bar runs out of room. */
    white-space: nowrap;
}
.nav a:hover { background: var(--bg-2); color: var(--red); }
.sub-toggle { display: none; }
.has-kids > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sub {
    position: absolute; top: 100%; left: 0; min-width: 230px; list-style: none;
    margin: 0; padding: .4rem; background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: .15s ease;
}
.has-kids:hover .sub, .has-kids:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
/**
 * `.nav a` sets a navy link colour and outranks `.btn-red` on specificity, so the
 * Book a visit button in the header was rendering with navy text on red. This is the
 * button, not a nav link — say so at matching specificity.
 */
.nav a.nav-cta { padding: .6rem 1.1rem; font-size: .93rem; color: #fff; white-space: nowrap; }
.nav a.nav-cta:hover { background: #B01F27; color: #fff; }

@media (max-width: 1240px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
        flex-direction: column; align-items: stretch; gap: .4rem;
        background: #fff; padding: 5rem 1.2rem 2rem; overflow-y: auto;
        box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s ease;
    }
    body.nav-open .nav { transform: none; }
    body.nav-open { overflow: hidden; }
    .nav > ul { flex-direction: column; align-items: stretch; }
    .nav a { padding: .8rem .6rem; border-bottom: 1px solid var(--line); border-radius: 0; }
    .has-kids > a::after { display: none; }
    .sub-toggle {
        display: block; position: absolute; right: 0; top: .35rem;
        background: none; border: 0; padding: .5rem .7rem; color: var(--navy); cursor: pointer;
        transition: transform .2s ease;
    }
    .sub-toggle[aria-expanded="true"] { transform: rotate(90deg); }
    .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding-left: .8rem; }
    .sub-toggle[aria-expanded="true"] + .sub { display: block; }
    .nav-cta { margin-top: 1rem; justify-content: center; }
}

/* ---------------------------------------------------------------- crumbs */
.crumbs { background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: .85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .7rem 0; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; background: var(--navy); }
.hero-media { overflow: hidden; }
.hero-media {
    position: absolute; inset: 0;
    background-image: var(--hero); background-size: cover; background-position: center 40%;
}
.hero-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(23,37,90,.82) 0%, rgba(23,37,90,.55) 45%, rgba(23,37,90,.15) 100%);
}
.hero-in { position: relative; padding: clamp(3rem, 8vw, 6.5rem) 0 0; }
.hero-card { max-width: 620px; color: #fff; }
.hero-card h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.hero-card .lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.94); margin-bottom: 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-facts {
    display: flex; flex-wrap: wrap; gap: .6rem; list-style: none;
    margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0;
    transform: translateY(50%);
}
.hero-facts li {
    display: flex; align-items: center; gap: .6rem; flex: 1 1 240px;
    background: #fff; color: var(--navy); border-radius: var(--radius);
    padding: 1rem 1.2rem; box-shadow: var(--shadow); font-size: .95rem;
}
.hero-facts .ic { color: var(--green); }
.is-home .page-body, .is-home .page-body-open { padding-top: clamp(4.5rem, 9vw, 6rem); }
@media (max-width: 700px) {
    .hero-facts { transform: none; margin-top: 2rem; padding-bottom: 2rem; }
    .is-home .page-body, .is-home .page-body-open { padding-top: 2.5rem; }
}

/* ---------------------------------------------------------------- page head */
.page-head { padding: clamp(2.2rem, 5vw, 3.6rem) 0 0; }
.page-head.has-img {
    position: relative; background-image: var(--hero); background-size: cover; background-position: center;
    padding: clamp(3rem, 7vw, 5rem) 0; color: #fff;
}
.page-head.has-img::before { content: ''; position: absolute; inset: 0; background: rgba(23,37,90,.7); }
.page-head.has-img .wrap { position: relative; }
.page-head.has-img h1 { color: #fff; }
.page-head .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }
.page-head.has-img .lede { color: rgba(255,255,255,.92); }
.page-body { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }

/* ---------------------------------------------------------------- blocks */
.blk { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.blk-text { max-width: 72ch; }
.blk-text h2, .blk-gallery h2, .blk-table h2, .blk-cards h2 { margin-bottom: .7rem; }

.blk-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.blk-image figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ink-2); }

.gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .9rem; list-style: none; margin: 0; padding: 0;
}
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.card {
    display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
    padding: 1.4rem; border-radius: var(--radius-lg); color: #fff; text-decoration: none;
    box-shadow: var(--shadow); transition: transform .15s ease;
}
a.card:hover { transform: translateY(-4px); color: #fff; }
.card-t { font-weight: 700; font-size: 1.1rem; }
.card-x { font-size: .92rem; opacity: .92; }

.blk-callout {
    color: #fff; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.blk-callout h2 { color: #fff; }
.blk-callout p { color: rgba(255,255,255,.95); }

.blk-quote { margin: 0 0 2rem; padding: 1.6rem 1.8rem; background: var(--bg-2); border-left: 6px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; }
.blk-quote blockquote { margin: 0; font-size: 1.1rem; }
.blk-quote figcaption { color: var(--ink-2); font-weight: 600; }

.blk-accordion details { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; background: #fff; }
.blk-accordion summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--navy); }
.blk-accordion details > div { padding: 0 1.2rem 1rem; }

.dl { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.3rem; background: var(--bg-2); border-radius: var(--radius); text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; min-width: 460px; background: #fff; font-size: .95rem; }
caption { text-align: left; padding: .9rem 1rem; color: var(--ink-2); font-size: .9rem; }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--navy); color: #fff; font-weight: 600; }
tbody th { background: var(--bg-2); font-weight: 600; color: var(--navy); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- staff */
/* Staff cards.
   The source photos are only 349x375. Filling the card width upscaled them past
   their natural size, which is what made them look soft. They are now shown at
   120px — about a third — so they render sharply even on a 3x screen. */
.people {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.4rem; list-style: none; margin: 0; padding: 0;
}
.person {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.2rem;
    display: grid; gap: .2rem 1.1rem; align-content: start;
    container-type: inline-size;
}
.person img {
    width: 120px; height: 120px; object-fit: cover; object-position: center top;
    border-radius: 14px; margin-bottom: .8rem;
}
.person h3 { margin: 0 0 .15rem; font-size: 1.08rem; }
.person .role { color: var(--green-d); font-weight: 600; font-size: .88rem; margin-bottom: .5rem; line-height: 1.35; }
.person p:last-child { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* Wide enough for the photo to sit beside the words rather than above them. */
@container (min-width: 330px) {
    .person { grid-template-columns: 120px 1fr; }
    .person img { grid-row: 1 / span 3; margin-bottom: 0; }
}

/* ---------------------------------------------------------------- contact */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.contact-list li { display: flex; gap: .8rem; background: var(--bg-2); padding: 1.2rem; border-radius: var(--radius); }
.contact-list .ic { color: var(--red); margin-top: .2rem; }
.cd strong { display: block; color: var(--navy); }
.cd address { font-style: normal; margin: .2rem 0; }

/* ---------------------------------------------------------------- forms */
.enquiry { max-width: 660px; }
.enquiry .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .enquiry .row2 { grid-template-columns: 1fr; } }
.enquiry label { display: block; font-weight: 600; color: var(--navy); margin-bottom: .3rem; font-size: .93rem; }
.enquiry label em { color: var(--red); font-style: normal; }
.enquiry input, .enquiry textarea, .enquiry select {
    width: 100%; padding: .8rem .9rem; font: inherit; color: var(--ink);
    border: 2px solid var(--line); border-radius: 10px; background: #fff;
}
.enquiry input:focus, .enquiry textarea:focus { border-color: var(--indigo); outline: none; }
.enquiry .err { display: block; color: var(--red-d); font-size: .85rem; margin-top: .25rem; font-weight: 600; }
.enquiry .privacy { font-size: .85rem; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-weight: 600; }
.notice-err { background: #FDECEC; color: var(--red-d); }
.notice-ok  { background: #ECF8E4; color: var(--green-d); }

.thanks { text-align: center; padding: 2rem 0 3rem; }
.thanks-ic { display: inline-grid; place-items: center; width: 84px; height: 84px; background: var(--green); color: #fff; border-radius: 50%; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- news */
.section-h { text-align: center; margin-bottom: .3rem; }
.section-sub { text-align: center; color: var(--ink-2); margin-bottom: 2.2rem; }

.rooms-feed { background: var(--bg-2); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.room-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 860px) { .room-cols { grid-template-columns: 1fr; } }
.room-col { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.room-head { padding: 1.2rem 1.4rem; color: #fff; }
.room-head h3 { color: #fff; margin: 0; font-size: 1.35rem; }
.room-head p { margin: .2rem 0 0; font-size: .9rem; opacity: .95; }
.room-posts { list-style: none; margin: 0; padding: .6rem; flex: 1; }
.room-posts a { display: flex; gap: .9rem; padding: .7rem; border-radius: var(--radius); text-decoration: none; color: inherit; }
.room-posts a:hover { background: var(--bg-2); }
.rp-img { flex: none; width: 96px; }
.rp-img img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.room-posts .lead a { flex-direction: column; }
.room-posts .lead .rp-img, .room-posts .lead .rp-img img { width: 100%; }
.room-posts .lead .rp-img img { height: 200px; }
.rp-body time { display: block; font-size: .78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.rp-t { display: block; font-weight: 600; color: var(--navy); line-height: 1.3; }
.room-posts .lead .rp-t { font-size: 1.15rem; }
.rp-x { display: block; font-size: .9rem; color: var(--ink-2); margin-top: .3rem; }
.more { display: block; padding: 1rem 1.4rem; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.more .ic { vertical-align: -3px; }

.room-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.chip { padding: .5rem 1.1rem; border: 2px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.post-card a { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.post-card a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pc-img img { width: 100%; height: 190px; object-fit: cover; }
.pc-img-none { display: grid; place-items: center; height: 190px; background: var(--bg-2); color: #B9C0D4; }
.pc-body { display: block; padding: 1.1rem 1.2rem 1.4rem; }
.pc-title { display: block; font-weight: 700; color: var(--navy); font-size: 1.08rem; line-height: 1.3; margin: .4rem 0 .2rem; }
.pc-body time { font-size: .8rem; color: var(--ink-2); }
.pc-ex { display: block; font-size: .92rem; color: var(--ink-2); margin-top: .4rem; }
.pill { display: inline-block; padding: .2rem .7rem; border-radius: 999px; color: #fff; font-size: .75rem; font-weight: 700; text-decoration: none; letter-spacing: .02em; }

.post-cover img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.post-meta { color: var(--ink-2); }
.post .page-head { padding-bottom: 0; }
.back { margin-top: 2.5rem; }
.back a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------- policies */
.pol-group { margin-bottom: 2.4rem; }
.pol-group h2 { display: flex; align-items: center; gap: .6rem; }
.pol-group .count { font-size: .8rem; background: var(--bg-2); color: var(--ink-2); padding: .1rem .6rem; border-radius: 999px; font-weight: 600; }
.pol-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .7rem; }
.pol-list a { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; }
.pol-list a:hover { border-color: var(--indigo); background: var(--bg-2); }
.pol-ic { color: var(--red); display: flex; }
.pol-t { flex: 1; }
.pol-t strong { display: block; color: var(--navy); font-size: .97rem; line-height: 1.35; }
.pol-t small { color: var(--ink-2); font-size: .8rem; }
.pol-go { color: var(--ink-2); display: flex; }

/* ---------------------------------------------------------------- CTA strip */
.cta-strip { background: var(--red); color: #fff; padding: clamp(2rem, 5vw, 3.2rem) 0; }
.cta-in { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
.cta-in h2 { color: #fff; margin-bottom: .3rem; }
.cta-in p { margin: 0; max-width: 56ch; color: rgba(255,255,255,.95); }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--navy); color: #D8DCEC; padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.site-foot .muted, .site-foot .small, .site-foot .foot-base { color: #AEB6D6; }
.site-foot h2 { color: #fff; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { color: var(--amber); text-decoration: underline; }

.foot-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.fcard { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem; border-radius: var(--radius-lg); color: #fff; transition: transform .15s ease; }
.fcard:hover { transform: translateY(-4px); color: #fff; text-decoration: none; }
.fc-t { font-weight: 700; font-size: 1.05rem; }

.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; padding-bottom: 2rem; }
.foot-grid address { font-style: normal; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { margin-bottom: .5rem; }
.plain a { display: inline-flex; align-items: center; gap: .5rem; }
.ofsted { display: flex; align-items: center; gap: .5rem; }
.foot-base { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: .875rem; }
.foot-base p { margin: 0; }

.big-links li { margin-bottom: .6rem; }
.big-links a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.05rem; }

/* ==========================================================================
   Section layout shell
   Every content section is wrapped in .sec, carrying the manager's layout
   choices as classes. Fixed options only — there is no combination of these
   that produces a broken page.
   ========================================================================== */

.sec { --sec-bg: transparent; --sec-fg: inherit; }
.sec-in { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* width */
.sec-w-narrow .sec-in { max-width: 720px; }
.sec-w-normal .sec-in { max-width: var(--wrap); }
.sec-w-wide   .sec-in { max-width: 1400px; }
.sec-w-full   .sec-in { width: 100%; max-width: none; padding-inline: clamp(1rem, 4vw, 3rem); }

/* spacing */
.sec-s-tight  { padding-block: clamp(.75rem, 2vw, 1.25rem); }
.sec-s-normal { padding-block: clamp(1.25rem, 3.5vw, 2.25rem); }
.sec-s-loose  { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* background band — full-bleed colour, content still constrained */
.sec-bg-tint   { background: var(--bg-2); }
.sec-bg-colour { background: var(--sec-bg); color: var(--sec-fg); }
.sec-bg-colour h1, .sec-bg-colour h2, .sec-bg-colour h3, .sec-bg-colour h4 { color: inherit; }
.sec-bg-colour p, .sec-bg-colour li { color: inherit; }
.sec-bg-colour a:not(.btn) { color: inherit; text-decoration: underline; }
.sec-bg-colour .muted { color: inherit; opacity: .82; }

/* alignment */
.sec-a-centre { text-align: center; }
.sec-a-centre .blk-text, .sec-a-centre .sec-in > .blk { margin-inline: auto; }
.sec-a-centre .cards, .sec-a-centre .gallery { justify-items: center; }
.sec-a-centre .blk-quote { text-align: left; }

/* columns — the section's own content flows into equal columns */
.sec-c-2 > .sec-in > .blk-text,
.sec-c-3 > .sec-in > .blk-text,
.sec-c-4 > .sec-in > .blk-text { columns: var(--sec-cols); column-gap: 2.5rem; }
.sec-c-2 { --sec-cols: 2; }
.sec-c-3 { --sec-cols: 3; }
.sec-c-4 { --sec-cols: 4; }
.sec-c-2 > .sec-in > .blk-text h2,
.sec-c-3 > .sec-in > .blk-text h2,
.sec-c-4 > .sec-in > .blk-text h2 { column-span: all; }
.sec-c-2 > .sec-in > .blk-text p,
.sec-c-3 > .sec-in > .blk-text p { break-inside: avoid; }
.sec-c-2 > .sec-in > .blk-text, .sec-c-3 > .sec-in > .blk-text, .sec-c-4 > .sec-in > .blk-text { max-width: none; }

/* the grid-based blocks take their column count from the same setting */
.sec-c-2 .gallery, .sec-c-2 .cards, .sec-c-2 .post-grid, .sec-c-2 .people, .sec-c-2 .pol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sec-c-3 .gallery, .sec-c-3 .cards, .sec-c-3 .post-grid, .sec-c-3 .people, .sec-c-3 .pol-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-c-4 .gallery, .sec-c-4 .cards, .sec-c-4 .post-grid, .sec-c-4 .people, .sec-c-4 .pol-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .sec-c-3 .gallery, .sec-c-3 .cards, .sec-c-3 .post-grid, .sec-c-3 .people, .sec-c-3 .pol-list,
    .sec-c-4 .gallery, .sec-c-4 .cards, .sec-c-4 .post-grid, .sec-c-4 .people, .sec-c-4 .pol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sec-c-2 > .sec-in > .blk-text, .sec-c-3 > .sec-in > .blk-text, .sec-c-4 > .sec-in > .blk-text { columns: 1; }
}
@media (max-width: 560px) {
    .sec-c-2 .gallery, .sec-c-2 .cards, .sec-c-2 .post-grid, .sec-c-2 .people, .sec-c-2 .pol-list,
    .sec-c-3 .gallery, .sec-c-3 .cards, .sec-c-3 .post-grid, .sec-c-3 .people, .sec-c-3 .pol-list,
    .sec-c-4 .gallery, .sec-c-4 .cards, .sec-c-4 .post-grid, .sec-c-4 .people, .sec-c-4 .pol-list { grid-template-columns: 1fr; }
}

/* The page body no longer supplies its own wrapper — .sec does it. */
.page-body-open { padding: 0 0 clamp(2rem, 5vw, 3.5rem); }
.page-body-open > .sec:first-child { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* ---------------------------------------------------------------- split */
.blk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: 0; }
.blk-split .sp-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.blk-split .sp-words > :last-child { margin-bottom: 0; }
.blk-split .btn { margin-top: .5rem; }
@media (max-width: 820px) {
    .blk-split { grid-template-columns: 1fr; }
    .blk-split.flip .sp-media { order: 2; }
}

/* Designer credit in the footer base. */
.foot-base .credit { opacity: .85; }
.foot-base .credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- logo */
.brand-logo {
    width: auto; height: 46px; flex: none;
    /* The pencils are a light graphic; a touch of shadow keeps them from
       floating on the white header. */
    filter: drop-shadow(0 1px 1px rgba(23,37,90,.12));
}
@media (max-width: 520px) { .brand-logo { height: 38px; } }

/* The pencils on the homepage banner, echoing the old site. Decorative only —
   hidden from screen readers and dropped entirely on small screens, where the
   words matter more than the picture. */
.hero-pencils {
    position: absolute;
    right: clamp(1rem, 5vw, 4rem);
    /* Clears the facts row, which sits half outside the hero. */
    bottom: clamp(5.5rem, 11vw, 8.5rem);
    width: clamp(85px, 11.5vw, 150px);
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
@media (max-width: 900px) { .hero-pencils { display: none; } }
@media (prefers-reduced-motion: no-preference) {
    .hero-pencils { animation: pencils-in .7s cubic-bezier(.2,.7,.3,1) both; }
    @keyframes pencils-in { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
}

/* Build number in the footer. Quiet enough that parents never notice it, there
   enough that you can see at a glance which version a server is actually running. */
.foot-base .build { opacity: .55; font-variant-numeric: tabular-nums; }