/* ===== base.css ===== */

:root{
  --ink:#0E2340;--ink-2:#15315A;--ink-soft:#3A567F;
  --sky:#EDF2F9;--sky-line:#D3E0F0;
  /* --gold is decorative (rules, fills, shadows) and stays as the brand gold.
     --gold-deep carries TEXT — .eyebrow labels, icon glyphs, link hovers — and
     was #C8942A, which measures ~2.8:1 on white against the 4.5:1 WCAG AA
     floor. #8A6414 measures ~5.2:1 and still reads as the same gold. */
  --gold:#E7B53C;--gold-deep:#8A6414;
  --paper:#FCFBF8;--white:#fff;
  --shadow:0 18px 50px -24px rgba(14,35,64,.4);
  --shadow-sm:0 8px 24px -16px rgba(14,35,64,.45);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;line-height:1.13;font-weight:700;letter-spacing:-.005em;font-feature-settings:"liga" 0,"dlig" 0,"clig" 0;-webkit-font-feature-settings:"liga" 0,"dlig" 0,"clig" 0;font-variant-ligatures:no-common-ligatures no-discretionary-ligatures;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1350px;margin:0 auto;padding:0 40px}
.eyebrow{font-family:'Inter';font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;padding:.9rem 1.5rem;border-radius:100px;transition:transform .18s,box-shadow .18s;cursor:pointer;border:none;font-family:'Inter'}
.btn-primary{background:var(--gold);color:#3a2a05;box-shadow:0 10px 24px -10px var(--gold-deep)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px var(--gold-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--sky-line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{transform:translateY(-2px)}

/* ============================================================
   ICON SYSTEM
   Stroke icons from the sprite in includes/icons.php. Everything
   is currentColor, so icons inherit the brand palette instead of
   fighting it the way the old emoji glyphs did.
   ============================================================ */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block;vertical-align:middle}
.ico-sm{width:18px;height:18px}
.ico-xs{width:16px;height:16px}

/* tile: the anchor that gives every icon consistent optical weight */
.icon-tile{width:52px;height:52px;border-radius:14px;background:var(--sky);border:1px solid var(--sky-line);color:var(--ink);display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.icon-tile .ico{width:26px;height:26px}
.icon-tile.tile-sm{width:42px;height:42px;border-radius:12px}
.icon-tile.tile-sm .ico{width:21px;height:21px}
.icon-tile.tile-gold{background:rgba(231,181,60,.14);border-color:rgba(231,181,60,.34);color:var(--gold-deep)}
/* on .sky sections the default tile fill matches the section background and
   disappears, so flip it to white there */
.block.sky .icon-tile,.sky .icon-tile{background:var(--white)}
/* on the navy bands */
.icon-tile.on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--gold)}

/* star ratings — filled, not stroked */
.stars{display:inline-flex;align-items:center;gap:1px;color:var(--gold);line-height:1}
.stars .star{width:15px;height:15px;fill:currentColor;stroke:none}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(252,251,248,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--sky-line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px;gap:1.2rem}
.logo{flex-shrink:0}
/* logo.png was 240x127 with the mark occupying only the middle 116x116 — the
   rest was transparent padding. So height:54px rendered a ~49px mark inside a
   102px-wide box, half of it empty. The file is trimmed to the mark now, which
   means this height IS the visible height, and the logo takes 64px of width
   instead of 102px. */
.logo img{height:64px;width:auto;flex-shrink:0}
.nav-links{display:flex;gap:1.5rem;align-items:center;font-size:.95rem;font-weight:500;white-space:nowrap}
.nav-links a{color:var(--ink-soft);transition:color .15s;position:relative;padding:.2rem 0;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold)}
.call-block{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.call-block .call-ico{width:34px;height:34px;border-radius:50%;background:var(--sky);color:var(--gold-deep);display:grid;place-items:center}
.call-block .call-ico .ico{width:17px;height:17px}
.call-block small{display:block;font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.call-block b{font-size:.9rem;white-space:nowrap}
.btn-compact{padding:.62rem 1.1rem;font-size:.92rem;white-space:nowrap}
.nav-cta{display:flex;gap:.7rem;align-items:center}
.menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--ink);line-height:1;padding:.35rem}
.menu-btn .ico{width:26px;height:26px;stroke-width:2}
.mobile-menu{display:none}

/* footer */
footer{background:var(--ink);color:#9db8d8;padding:64px 0 28px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:40px}
/* h2, not h4 — the footer sat after page h2s and produced an h2→h4 skip on
   every page, which a screen reader announces as a missing section. Styled
   small; the heading LEVEL is structure, the size is presentation. */
.foot-grid h2{color:#fff;font-family:'Inter';font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
/* links padded to a thumb-sized ~36px, with the gap taken out to match, so the
   list keeps the same rhythm it had with 18px-tall links and a gap */
.foot-grid ul{list-style:none;display:grid;gap:0;font-size:.92rem}
.foot-grid li a{display:inline-block;padding:.3rem 0}
.foot-grid a:hover{color:#fff}
.foot-logo{background:#fff;border-radius:12px;padding:14px;display:inline-block;margin-bottom:.9rem}
/* width:auto is load-bearing: without it the height overrides the global
   img{height:auto} but nothing constrains the width, so the browser falls back
   to the width attribute on the tag and stretches the logo. */
.foot-logo img{height:52px;width:auto}
.foot-brand p{font-size:.9rem;max-width:32ch}
.foot-map-link{color:var(--gold);font-weight:600}
.foot-map-link:hover{color:#fff}
.foot-note{display:block;margin-top:.3rem;font-size:.82rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem}

/* generic section */
section.block{padding:84px 0}
.section-head{max-width:660px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(1.9rem,3.5vw,2.7rem);margin:.7rem 0 .8rem}
.section-head p{color:var(--ink-soft);font-size:1.08rem}

/* page hero (interior) */
.page-hero{background:var(--ink);color:#fff;padding:72px 0 76px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(231,181,60,.18),transparent 70%)}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);margin:.6rem 0 .8rem;max-width:20ch}
.page-hero p{color:#c3d4ec;font-size:1.15rem;max-width:52ch}
.crumb{font-size:.85rem;color:#7f9cc4;margin-bottom:.4rem}
.crumb a:hover{color:#fff}

/* ============================================================
   LOCATION MAP  (includes/map.php)
   Two variants share one skin: a rounded, bordered card with the
   address bar tucked underneath the frame. The aspect-ratio box
   keeps the iframe from collapsing before it loads, so nothing
   jumps around on slow connections.
   ============================================================ */
.site-map{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.site-map__frame{position:relative;width:100%;background:var(--sky)}
.site-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(.92)}
.site-map--panel .site-map__frame{aspect-ratio:16/11}
.site-map--band  .site-map__frame{aspect-ratio:21/8}
.site-map__bar{display:flex;align-items:center;gap:.9rem;padding:16px 20px;border-top:1px solid var(--sky-line);background:var(--white)}
.site-map__pin{width:38px;height:38px;border-radius:10px;background:var(--sky);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.site-map__pin .ico{width:19px;height:19px}
.site-map__text{min-width:0;flex:1}
.site-map__text b{display:block;font-size:.95rem;line-height:1.3}
.site-map__text span{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.4}
.site-map__bar .btn{flex-shrink:0}
/* fallback for browsers without aspect-ratio (older Safari) */
@supports not (aspect-ratio:1/1){
  .site-map--panel .site-map__frame{height:290px}
  .site-map--band .site-map__frame{height:400px}
}
@media(max-width:560px){
  .site-map--band .site-map__frame{aspect-ratio:4/3}
  .site-map__bar{flex-wrap:wrap}
  .site-map__bar .btn{width:100%;justify-content:center}
}

/* sticky mobile cta */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(252,251,248,.96);backdrop-filter:blur(10px);border-top:1px solid var(--sky-line);padding:12px 16px}
.sticky-cta .btn-primary{width:100%;justify-content:center}

/* ---- TABLET ---- */
/* The phone block drops out before the nav gets crowded. 1240px was tuned when
   there were five nav items; at seven, the call block plus the CTA pushed the
   button past the wrap padding between roughly 1180 and 1300. The number is
   still in the footer, on /contact, and one tap away via the CTA. */
@media(max-width:1340px){.call-block{display:none}}
@media(max-width:1180px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .login-nav-hide{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .mobile-menu.open{display:block;position:fixed;left:0;right:0;top:82px;height:calc(100vh - 82px);height:calc(100dvh - 82px);background:var(--paper);z-index:55;padding:24px;overflow-y:auto}
  .mobile-menu.open ul{list-style:none;display:grid;gap:.3rem}
  .mobile-menu.open a{display:block;padding:1rem;font-size:1.1rem;font-weight:600;border-bottom:1px solid var(--sky-line)}
  .mobile-menu.open .btn-primary{margin-top:1.2rem;width:100%;justify-content:center}
}
@media(max-width:900px){
  .wrap{padding:0 24px}
}
/* ---- MOBILE ---- */
@media(max-width:640px){
  html{font-size:16px}
  .wrap{padding:0 18px}
  .nav{height:66px;gap:.6rem}
  .logo img{height:48px}
  .mobile-menu.open{top:66px;height:calc(100vh - 66px);height:calc(100dvh - 66px)}
  .nav-cta{gap:.5rem}
  .btn-compact{padding:.55rem .85rem;font-size:.85rem}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  section.block{padding:52px 0}
  .sticky-cta{display:block}
  /* room for the 80px bar so it never covers the end of the footer; pages
     without the bar (contact, thank-you) get no empty gap */
  body.has-sticky-cta{padding-bottom:84px}
  .icon-tile{width:46px;height:46px;border-radius:12px}
  .icon-tile .ico{width:23px;height:23px}
}
/* very small phones */
@media(max-width:380px){
  .btn-compact{padding:.5rem .7rem;font-size:.8rem}
  .logo img{height:42px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ===== home.css ===== */
.gold{color:var(--gold-deep)}
.hero-sec{padding:64px 0 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.hero-copy h1{font-size:clamp(2.7rem,5.2vw,4.2rem);margin:.8rem 0 1.2rem;line-height:1.08}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:40ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem}
.btn-lg{padding:1.05rem 1.8rem;font-size:1.05rem}
.hero-trust{display:flex;gap:2rem;flex-wrap:wrap}
.hero-trust .stars{color:var(--gold)}
.hero-trust small{display:block;color:var(--ink-soft);font-weight:500;margin-top:.15rem}
.hero-trust .big{font-size:1.15rem}
.hero-visual{position:relative}
.hero-img{width:100%;height:520px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.float-card{position:absolute;background:var(--white);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--sky-line);padding:14px 18px}
.fc-results{top:24px;right:-18px;text-align:left}
.fc-results small{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.fc-big{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:700;color:var(--gold-deep);line-height:1.05}
.fc-results span{font-size:.8rem;color:var(--ink-soft)}
.fc-lesson{bottom:150px;left:-24px;display:flex;align-items:center;gap:.7rem;max-width:230px}
.fc-lesson .fc-ico{width:34px;height:34px;border-radius:10px;background:var(--sky);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.fc-lesson .fc-ico .ico{width:19px;height:19px}
.fc-lesson small{display:block;font-size:.75rem;color:var(--ink-soft)}
.fc-lesson b{font-size:.92rem}

.trust-bar{background:var(--ink);color:#c3d4ec;padding:18px 0}
.tb-grid{display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;font-size:.92rem;font-weight:500}
.tb-grid span{display:inline-flex;align-items:center;gap:.55rem}
/* this gold finally applies — the old emoji ignored `color` entirely */
.tb-grid .ico{color:var(--gold)}

.block{padding:88px 0}
.block.sky{background:var(--sky)}
.section-head.center{max-width:680px;margin:0 auto 52px;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:.7rem 0 .8rem}
.section-head p{color:var(--ink-soft);font-size:1.1rem}

.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.offer-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:.5rem;transition:transform .2s,box-shadow .2s}
.offer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.offer-ico{display:block;margin-bottom:.9rem}
.offer-card:hover .icon-tile{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.offer-card h3{font-size:1.4rem}
.offer-card p{color:var(--ink-soft);font-size:.98rem;flex:1}
.offer-link{color:var(--gold-deep);font-weight:600;font-size:.95rem}
.offer-card:hover .offer-link{text-decoration:underline}

.stats-band{background:var(--ink);color:#fff;padding:44px 0}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
/* likewise: this gold was a dead declaration under emoji */
.sb-ico{color:var(--gold);display:block;margin-bottom:.5rem}
.sb-ico .ico{width:28px;height:28px}
.sb-item b{font-family:'Playfair Display',serif;font-size:2.4rem;color:var(--gold);display:block;line-height:1}
.sb-item small{color:#c3d4ec;font-size:.92rem}

.pc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pc-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.pc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pc-img{height:120px;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-body{padding:18px;display:flex;flex-direction:column;flex:1}
.pc-body h3{font-size:1.15rem;margin-bottom:.3rem}
.pc-body p{color:var(--ink-soft);font-size:.85rem;flex:1;margin-bottom:.6rem}
.pc-link{color:var(--gold-deep);font-weight:600;font-size:.85rem}

.why-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:center}
.why-item .icon-tile{margin:0 auto}
.why-item b{display:block;margin:.75rem 0 .3rem;font-size:1rem}
.why-item p{color:var(--ink-soft);font-size:.86rem}

.tutor-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tp-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.tp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tp-card img{width:100%;height:150px;object-fit:cover}
.tp-body{padding:16px}
.tp-body h3{font-size:1.05rem}
.tp-body span{display:block;font-size:.8rem;color:var(--gold-deep);font-weight:600;margin:.2rem 0}
.tp-body small{color:var(--ink-soft);font-size:.8rem}
.tp-body .stars{color:var(--gold);margin-top:.45rem}
.tp-body .stars .star{width:13px;height:13px}
.tp-cta{background:var(--ink);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:center}
.tp-cta h3{color:#fff;font-size:1.2rem;margin-bottom:.5rem}
.tp-cta p{color:#c3d4ec;font-size:.85rem;margin-bottom:1rem}

.testi-row{display:grid;grid-template-columns:repeat(3,1fr) .7fr;gap:20px}
.testi{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.testi .stars{color:var(--gold)}
.testi p{font-size:.92rem;margin:.7rem 0;flex:1}
.testi .who{display:flex;align-items:center;gap:.7rem}
.testi .who b{font-size:.88rem}.testi .who small{color:var(--ink-soft);font-size:.8rem}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--sky);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:.82rem;font-family:'Playfair Display',serif}
.ofsted-badge{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* --gold, not --gold-deep: the badge is on --ink, where the bright gold is the legible one */
.ofsted-shield{width:64px;height:64px;border-radius:50%;background:rgba(231,181,60,.12);border:1px solid rgba(231,181,60,.38);color:var(--gold);display:grid;place-items:center;margin-bottom:.35rem}
.ofsted-shield .ico{width:34px;height:34px}
.ofsted-badge b{font-family:'Playfair Display',serif;font-size:1.8rem;margin:.3rem 0}
.ofsted-badge small{color:#c3d4ec;font-size:.8rem}

.cta-band{background:var(--ink);color:#fff;padding:64px 0}
.cta-grid{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3vw,2.5rem);max-width:20ch}
.cta-band p{color:#c3d4ec;margin-top:.5rem;max-width:46ch}

@media(max-width:1080px){
  .offer-grid{grid-template-columns:1fr 1fr}
  /* Five cards in three columns left a row of two stuck to the left. As a
     wrapping flex row a short last row centres instead, whatever the count. */
  .pc-grid,.tutor-row{display:flex;flex-wrap:wrap;justify-content:center}
  .pc-grid>*,.tutor-row>*{flex:0 1 calc((100% - 36px)/3)}
  .why-grid{grid-template-columns:1fr 1fr 1fr}
  .testi-row{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-img{height:420px}
  /* stacked, the image spans the full width, so cards hung off its edges would
     sit on the screen edge — tuck them inside it */
  .fc-results{right:16px}
  .fc-lesson{left:16px}
  .sb-grid{grid-template-columns:1fr 1fr}
  .cta-grid{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
  .pc-grid>*,.tutor-row>*{flex-basis:calc((100% - 18px)/2)}
  .why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .offer-grid,.why-grid,.testi-row{grid-template-columns:1fr}
  .pc-grid>*,.tutor-row>*{flex-basis:100%}
  .hero-copy h1{font-size:2.35rem}
  .lead{font-size:1.08rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-trust{gap:1.2rem}
  .hero-img{height:300px}
  .float-card{transform:scale(.8);transform-origin:top right}
  .fc-results{top:2px;right:2px}
  .fc-lesson{bottom:auto;top:130px;left:0;transform:scale(.8);transform-origin:top left}
  .sb-grid{grid-template-columns:1fr 1fr;gap:28px}
  .tb-grid{gap:1rem;font-size:.82rem}
  .cta-band .btn{width:100%;justify-content:center}
}
@media(max-width:400px){
  .hero-copy h1{font-size:2.05rem}
  .float-card{transform:scale(.72)}
  .fc-lesson{transform:scale(.72)}
}

/* ===== about.css ===== */
/* These four grids were inline styles on the markup, which is why the mobile
   overrides below needed !important to beat them. Now they are ordinary rules
   and the !important flags are gone. */
.about-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-intro h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:.6rem 0 1rem}
.about-intro p{color:var(--ink-soft);margin-bottom:1rem}
.about-intro p:last-child{margin-bottom:0}
.about-stats{display:grid;gap:16px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.why-row h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:.6rem 0 1.2rem}
/* The photo shows whole, at its own 3:2 shape, at every width. A fixed height
   cut through the posters at its left and right edges. The navy gradient shows
   while it loads, and stands in on its own if the file is ever missing. */
.centre-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);
  background:linear-gradient(150deg,var(--ink),var(--ink-2));box-shadow:var(--shadow-sm)}
.btn-spaced{margin-top:1.6rem}

.stat-box{background:var(--white);border:1px solid var(--sky-line);border-radius:16px;padding:24px 28px;box-shadow:var(--shadow-sm)}
.stat-box b{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--ink);display:block;line-height:1}
.stat-box .rating-star{width:22px;height:22px;color:var(--gold);margin-left:.15rem;vertical-align:baseline}
.stat-box span{color:var(--ink-soft);font-size:.92rem}
.value-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:30px}
.value-card h3{font-size:1.5rem;color:var(--gold-deep);margin-bottom:.5rem}
.value-card p{color:var(--ink-soft);font-size:.96rem}
.tick-list{list-style:none;display:grid;gap:.8rem}
.tick-list li{display:flex;gap:.7rem;color:var(--ink-soft)}
.tick-list li::before{content:"\2713";color:var(--gold-deep);font-weight:700}
/* "Where to find us" band */
.find-us-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.find-us-facts .fact{display:flex;gap:.8rem;align-items:flex-start;background:var(--white);border:1px solid var(--sky-line);border-radius:14px;padding:18px 20px}
.find-us-facts .fact-ico{width:38px;height:38px;border-radius:10px;background:var(--sky);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.find-us-facts .fact-ico .ico{width:19px;height:19px}
.find-us-facts .fact div{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.find-us-facts small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:.15rem}
/* one day per line — run together, a day wrapped away from its times */
.find-us-facts .hours-line{display:block}
.find-us-facts a{display:inline-block;padding:.25rem 0}
.find-us-facts a:hover{color:var(--gold-deep)}

@media(max-width:900px){
  .about-intro,.why-row,.value-grid,.find-us-facts{grid-template-columns:1fr}
  .about-intro{gap:36px}
  .why-row{gap:32px}
}

/* ===== tutors.css ===== */
/* Also previously inline on the markup. */
/* A wrapping flex row, not a grid: four tutors in three columns left one card
   alone on a row. Four across, then two by two, then one — and if the team
   grows, a short last row centres rather than hugging the left. */
.tutor-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.tutor-grid>*{flex:0 1 calc((100% - 72px)/4)}
.tutor-promise-band{margin-top:48px;background:var(--sky);border-radius:24px;padding:40px;text-align:center}
.tutor-promise-band h2{font-size:1.6rem;margin-bottom:.5rem}
.tutor-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.tutor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tutor-photo{aspect-ratio:16/10;position:relative;background:linear-gradient(150deg,var(--ink),var(--ink-2));display:grid;place-items:center;font-family:'Playfair Display',serif;font-size:2.4rem;color:var(--gold);font-weight:700}
.tutor-body{padding:22px}
.tutor-body h3{font-size:1.3rem}
.tutor-subj{display:inline-block;font-size:.8rem;font-weight:600;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.05em;margin:.3rem 0 .6rem}
.tutor-body p{color:var(--ink-soft);font-size:.93rem}
/* replaces the inline styles the old markup carried on this row */
.tutor-promise{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;color:var(--ink-soft)}
.tutor-promise span{display:inline-flex;align-items:center;gap:.45rem}
.tutor-promise .ico{color:var(--gold-deep)}

@media(max-width:1080px){.tutor-grid>*{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:900px){.tutor-promise-band{padding:28px 22px}}
@media(max-width:600px){.tutor-grid>*{flex-basis:100%}}

/* ===== courses.css ===== */
.subj-nav{position:sticky;top:82px;z-index:40;background:rgba(252,251,248,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--sky-line)}
.subj-nav .wrap{display:flex;gap:1.6rem;overflow-x:auto;padding-top:14px;padding-bottom:14px;scrollbar-width:none}
.subj-nav .wrap::-webkit-scrollbar{display:none}
/* Phones: the header is 66px tall here, not 82px, so the bar sticks directly
   under it instead of leaving a strip that content scrolls through. The links
   run past the right edge, so that edge fades out to read as "scroll for more"
   rather than a word cut in half; the end padding lets the last link clear it. */
@media(max-width:640px){
  .subj-nav{top:66px}
  .subj-nav .wrap{padding-right:56px;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
}
.subj-nav a{font-size:.9rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;padding:.3rem 0;border-bottom:2px solid transparent;transition:.15s}
.subj-nav a:hover{color:var(--ink);border-color:var(--gold)}
.subj-sec{padding:64px 0;border-bottom:1px solid var(--sky-line)}
.subj-sec.sky{background:var(--sky);border:none}
.subj-head{display:flex;gap:1.2rem;align-items:center;margin-bottom:36px}
.subj-ico{width:74px;height:74px;background:var(--sky);border:1px solid var(--sky-line);color:var(--ink);border-radius:18px;display:grid;place-items:center;flex-shrink:0}
.subj-ico .ico{width:36px;height:36px}
.subj-sec.sky .subj-ico{background:var(--white)}
.subj-head h2{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.subj-head p{color:var(--ink-soft);font-size:1.05rem;margin-top:.2rem}
/* min(): a flat minimum wider than a small phone's content box pushes cards off
   the screen — as .scheme-grid's 300px did at 320px */
.lvl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.lvl-card{background:var(--white);border:1px solid var(--sky-line);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.subj-sec.sky .lvl-card{background:var(--white)}
.lvl-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
/* h3, not h4 — the heading order is h1 page > h2 subject > h3 level. The old
   markup skipped a level, which screen readers announce as a missing section. */
.lvl-top h3{font-size:1.25rem}
.lvl-years{font-size:.75rem;font-weight:600;color:var(--ink-soft);background:var(--sky);padding:.24rem .6rem;border-radius:100px;white-space:nowrap}
.lvl-card p{color:var(--ink-soft);font-size:.92rem;flex:1;margin-bottom:.9rem}
.lvl-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.lvl-tags span{font-size:.75rem;font-weight:600;color:var(--gold-deep);background:rgba(231,181,60,.14);padding:.24rem .6rem;border-radius:100px}
.lvl-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--sky-line);padding-top:.9rem}
.lvl-price{font-size:.86rem;color:var(--ink-soft)}
.lvl-price b{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--ink)}
.lvl-book{font-weight:600;color:var(--gold-deep);font-size:.86rem;white-space:nowrap;display:inline-block;padding:.4rem 0}
.lvl-book:hover{text-decoration:underline}
.crash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.crash-card{background:var(--white);border:1px solid var(--sky-line);border-radius:16px;padding:26px}
.crash-card h3{font-size:1.3rem;margin-bottom:.5rem}
.crash-card p{color:var(--ink-soft);font-size:.93rem;margin-bottom:1rem}
.crash-ref{background:var(--ink);color:#fff}
.crash-ref h4{color:#fff}.crash-ref p{color:#c3d4ec;margin-bottom:0}
.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.del-card{background:var(--white);border:1px solid var(--sky-line);border-radius:20px;padding:32px;position:relative}
.del-card.featured{border-color:var(--gold);box-shadow:0 12px 40px -20px var(--gold-deep)}
.del-badge{position:absolute;top:-12px;left:32px;background:var(--gold);color:#3a2a05;font-size:.75rem;font-weight:700;padding:.3rem .8rem;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.del-ico{width:52px;height:52px;background:var(--sky);border:1px solid var(--sky-line);color:var(--ink);border-radius:14px;display:grid;place-items:center}
.del-ico .ico{width:26px;height:26px}
.del-card h3{font-size:1.5rem;margin:.6rem 0 .5rem}
.del-card>p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem}
.tick-list{list-style:none;display:grid;gap:.6rem}
.tick-list li{display:flex;gap:.6rem;color:var(--ink-soft);font-size:.9rem}
.tick-list li::before{content:"\2713";color:var(--gold-deep);font-weight:700}
.section-head.center{max-width:680px;margin:0 auto 40px;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.cta-band{background:var(--ink);color:#fff;padding:64px 0}
.cta-grid{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3vw,2.4rem);max-width:20ch}
.cta-band p{color:#c3d4ec;margin-top:.5rem;max-width:46ch}
.btn-lg{padding:1.05rem 1.8rem;font-size:1.05rem}
@media(max-width:900px){.crash-grid,.delivery-grid{grid-template-columns:1fr}.subj-head{flex-direction:column;align-items:flex-start;text-align:left}}

/* ===== contact.css ===== */
/* the two-column split used to be an inline style on the .wrap, which meant
   the mobile override below needed !important to beat it — now it is here */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.contact-info h2{font-size:2rem;margin:.5rem 0 1.5rem}
/* The map is a full-width band below both columns. It used to sit in the left
   column and flex to absorb the height difference with the form, but once the
   opening-hours timetable made that column the taller one there was nothing
   left to absorb: the map was squashed to its minimum and the form card
   stretched with empty space. Out of the column, the details + timetable and
   the form come out close to the same height by themselves. */
.contact-map{margin-top:48px}
.info-list{list-style:none;display:grid;gap:1rem;margin-bottom:1.5rem}
.info-list li{display:flex;gap:.8rem;align-items:flex-start}
/* the call and email links — padded to a comfortable tap height */
.info-list a{display:inline-block;padding:.2rem 0}
.info-list a:hover{color:var(--gold-deep)}
/* named .info-ico, not .ico, so it never collides with the global SVG rule */
.info-list .info-ico{width:38px;height:38px;border-radius:10px;background:var(--sky);display:grid;place-items:center;color:var(--gold-deep);flex-shrink:0}
.info-list .info-ico .ico{width:19px;height:19px}
.info-list small{display:block;font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
/* ---- opening hours timetable (contact page) ---- */
.timetable{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;container-type:inline-size}
.timetable__head{display:flex;align-items:center;gap:.85rem;padding:16px 22px;background:var(--ink);color:#fff}
/* --gold, not --gold-deep: on the --ink header the bright gold is the legible one */
.timetable__ico{width:40px;height:40px;border-radius:11px;background:rgba(231,181,60,.14);border:1px solid rgba(231,181,60,.34);color:var(--gold);display:grid;place-items:center;flex-shrink:0}
.timetable__ico .ico{width:20px;height:20px}
.timetable__head h3{color:#fff;font-size:1.15rem;line-height:1.2}
.timetable__head p{color:#c3d4ec;font-size:.8rem;margin-top:.1rem}
.timetable__days{list-style:none}
.tt-day{display:grid;grid-template-columns:170px 1fr;gap:1rem;align-items:start;padding:14px 22px}
.tt-day + .tt-day{border-top:1px solid var(--sky-line)}
/* padding-top lines the day name up with the first line of text in its tiles */
.tt-name{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding-top:.45rem}
.tt-name b{font-size:.92rem;font-weight:600;color:var(--ink)}
.is-closed .tt-name b{color:var(--ink-soft)}
/* a one-line Closed tile is shorter than a slot's two lines, so the name moves
   down to its middle; stacked above the tiles (see @container below) it needs
   no offset */
@container (min-width:560px){.is-closed .tt-name{padding-top:.85rem}}
.tt-slots{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.tt-slot{background:var(--sky);border:1px solid var(--sky-line);border-radius:10px;padding:7px 12px;line-height:1.35}
/* a labelled block (the morning) spans the row; the numbered lessons pair up under it */
.tt-slot--block{grid-column:1/-1}
.tt-slot small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.tt-slot span{display:block;font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap}
/* one grid cell wide, and padded to the height of a two-line slot tile */
.tt-closed{display:block;font-size:.85rem;font-weight:600;line-height:1.35;color:var(--ink-soft);border:1px dashed var(--sky-line);border-radius:10px;padding:16px 12px}
/* today, marked by main.js in London time */
.tt-day.is-today{background:linear-gradient(90deg,rgba(231,181,60,.13),rgba(231,181,60,0) 75%);box-shadow:inset 3px 0 0 var(--gold)}
.tt-day.is-today .tt-slot{background:var(--white);border-color:rgba(231,181,60,.5)}
.tt-today{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--gold);color:#3a2a05;border-radius:100px;padding:.1rem .6rem}
.tt-today[hidden]{display:none}
/* The card takes its layout from its own width, not the screen's: beside the
   form on a tablet it is as narrow as on a phone, where a name column would
   squeeze the tiles into single file. Narrow, the name goes above the tiles. */
@container (max-width:559px){
  .tt-day{grid-template-columns:1fr;gap:.6rem}
  .tt-name{flex-direction:row;align-items:center;padding-top:0}
}
@media(max-width:520px){
  .timetable__head{padding:14px 18px}
  .tt-day{padding:14px 18px}
  .tt-slots{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
  .tt-slot{padding:7px 10px}
  .tt-slot span{font-size:.84rem}
}
/* entrance directions under an address — contact info list and About find-us */
.addr-note{display:block;margin-top:.25rem;font-size:.85rem;color:var(--ink-soft)}
.book-card{background:var(--white);border:1px solid var(--sky-line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.book-card h2{font-size:1.6rem;margin-bottom:.3rem}
.btn-block{width:100%;justify-content:center;margin-top:.4rem}
.book-card .sub{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.4rem}
.field{margin-bottom:.9rem}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.75rem .9rem;border:1.5px solid var(--sky-line);border-radius:10px;font-family:inherit;font-size:.95rem;background:var(--paper)}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:.8rem;text-align:center}
/* the booking form is the primary action, so on one column it goes first */
@media(max-width:900px){
  .contact-split{grid-template-columns:1fr;gap:36px}
  .contact-split .book-card{order:-1}
}
@media(max-width:600px){.field-row{grid-template-columns:1fr}.book-card{padding:24px}}

/* ============================================================
   RESTRUCTURE ADDITIONS
   Components the rebuilt site needs that the old page-per-file
   stylesheets had no home for.
   ============================================================ */

/* Keyboard users should not have to tab the entire nav to reach content. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 8px 0;font-weight:600;font-size:.95rem}
.skip-link:focus{left:0}

/* A visible focus ring everywhere. The old site had none, which made the
   whole thing unusable without a mouse. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold-deep);outline-offset:2px;border-radius:4px}

/* Breadcrumbs — now a real ordered list, generated from the same source as
   the BreadcrumbList JSON-LD so the two cannot disagree. */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0;padding:0}
.crumb li{display:flex;align-items:center;gap:.5rem}
.crumb li+li::before{content:"/";color:#7f9cc4;opacity:.7}
.crumb [aria-current="page"]{color:#c3d4ec}
/* a taller hit area for the one link here a phone user actually taps */
.crumb a{display:inline-block;padding:.25rem 0}

/* ---- form states ---- */
.field .err{display:block;font-size:.8rem;color:#B3261E;margin-top:.3rem;font-weight:500}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#B3261E;background:#FDF6F5}
/* 150px is about six lines. This is where a parent describes what their child
   needs help with, so the extra room is worth having — and it lifts the form
   closer to the height of the column beside it. */
.field textarea{width:100%;padding:.75rem .9rem;border:1.5px solid var(--sky-line);
  border-radius:10px;font-family:inherit;font-size:.95rem;background:var(--paper);
  min-height:150px;resize:vertical}
.field textarea:focus{outline:none;border-color:var(--gold)}
.field .opt{font-weight:400;color:var(--ink-soft)}

.alert{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1.1rem;border-radius:12px;
  font-size:.9rem;margin-bottom:1.2rem;line-height:1.5}
.alert .ico{flex-shrink:0;margin-top:.15rem}
.alert-error{background:#FDF0EF;border:1px solid #F3C9C5;color:#8C1D18}
.alert-error a{color:#8C1D18;text-decoration:underline;font-weight:600}

/* The honeypot: reachable by a form-filling bot, invisible and unfocusable to
   a person. Deliberately not display:none — many bots skip those. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}

/* ---- thank you ---- */
.thanks{min-height:58vh;display:grid;place-items:center;padding:72px 24px;background:var(--sky)}
.thanks-card{background:var(--white);border:1px solid var(--sky-line);border-radius:24px;
  padding:48px 40px;max-width:620px;text-align:center;box-shadow:var(--shadow)}
.thanks-tick{width:64px;height:64px;border-radius:50%;background:rgba(231,181,60,.16);
  color:var(--gold-deep);display:grid;place-items:center;margin:0 auto 1.4rem}
.thanks-tick .ico{width:32px;height:32px;stroke-width:2.2}
.thanks-card h1{font-size:2rem;margin-bottom:.6rem}
.thanks-card p{color:var(--ink-soft);margin-bottom:1rem}
.thanks-ref{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--sky);border:1px solid var(--sky-line);border-radius:8px;padding:.5rem .9rem;
  font-size:.95rem;font-weight:600;letter-spacing:.04em;margin-bottom:1.4rem}
.thanks-next{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* ---- 404 ---- */
.notfound{min-height:56vh;display:grid;place-items:center;padding:80px 24px;text-align:center}
.notfound .code{font-family:'Playfair Display',Georgia,serif;font-size:clamp(4rem,12vw,7rem);
  line-height:1;color:var(--gold);margin-bottom:.4rem}
.notfound h1{font-size:clamp(1.6rem,3.5vw,2.3rem);margin-bottom:.7rem}
.notfound p{color:var(--ink-soft);max-width:46ch;margin:0 auto 1.8rem}
.notfound-links{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ---- tutor photos: self-hosted images, initials as the fallback ---- */
.tutor-card .tutor-photo{overflow:hidden}
.tutor-card .tutor-photo img,.tp-card img{width:100%;height:100%;object-fit:cover;display:block}
/* Pinned to the box. As a grid item its height:100% had nothing definite to
   resolve against — the grid row sized itself to the image — so the photo
   rendered full-height and the box simply cut off its bottom: chins vanished
   whenever the card was wide. Absolutely placed, object-fit crops for real,
   and the 15% focus keeps hair and chin in frame at every card width. */
.tutor-card .tutor-photo img{position:absolute;inset:0;object-position:center 15%}

/* ============================================================
   CHILDCARE PAGE
   ============================================================ */

/* what registration means — three cards */
.reg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reg-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:28px}
.reg-card h3{font-size:1.2rem;margin:1rem 0 .5rem}
.reg-card p{color:var(--ink-soft);font-size:.95rem}

/* the registration itself — deliberately understated until the numbers are
   confirmed, so an unfilled page reads as reticent rather than unfinished */
.reg-detail{margin-top:32px;background:var(--sky);border:1px solid var(--sky-line);
  border-radius:var(--radius);padding:28px 32px}
.reg-detail h3{font-size:1.15rem;margin-bottom:.7rem}
.reg-detail p{color:var(--ink-soft);font-size:.95rem;max-width:64ch;margin-bottom:1.1rem}
.reg-list{list-style:none;display:grid;gap:.7rem;margin-bottom:1.1rem}
.reg-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem}
.reg-ages{font-weight:700;font-size:.95rem}
.reg-num{font-size:.9rem;color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ways to pay */
/* min(): a flat 300px minimum is wider than a 320px phone's content box and
   pushed the cards 16px off the screen */
.scheme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.scheme-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);
  padding:30px;display:flex;flex-direction:column}
.scheme-card.featured{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.scheme-ico{width:48px;height:48px;border-radius:12px;background:rgba(231,181,60,.14);
  color:var(--gold-deep);display:grid;place-items:center;margin-bottom:1rem}
.scheme-card h3{font-size:1.25rem;margin-bottom:.4rem}
.scheme-headline{font-weight:700;color:var(--gold-deep);font-size:1rem;margin-bottom:.7rem}
.scheme-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:1rem}
.scheme-card .tick-list{margin-bottom:1.2rem;font-size:.92rem}
.scheme-card .tick-list li{color:var(--ink-soft)}
/* pushes the link to the bottom so cards of different length still line up */
.scheme-link{margin-top:auto;font-weight:600;font-size:.92rem;color:var(--gold-deep);
  text-decoration:underline;text-underline-offset:3px}
.scheme-link:hover{color:var(--ink)}
/* an honest caveat, not an error — amber, and it reads as information */
.scheme-status{display:flex;gap:.5rem;align-items:flex-start;background:var(--sky);
  border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:.7rem .9rem;
  font-size:.86rem!important;color:var(--ink)!important;margin-bottom:1rem}
.scheme-status .ico{flex-shrink:0;margin-top:.15rem;color:var(--gold-deep)}

.worked-example{margin-top:32px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:32px 36px}
.worked-example h3{font-size:1.35rem;margin-bottom:.6rem}
.we-body{font-size:1.05rem;color:#dbe6f5;max-width:62ch}
.we-note{display:flex;gap:.5rem;align-items:flex-start;font-size:.86rem;color:#a8c0de;
  margin-top:1rem;max-width:66ch}
.we-note .ico{flex-shrink:0;margin-top:.15rem;color:var(--gold)}

/* Safeguarding points spread across the width instead of running as one long
   narrow column — six items read faster in three groups of two. */
.safeguard-grid{grid-template-columns:repeat(3,1fr);gap:1rem 2.5rem;max-width:1100px;margin:0 auto}
.safeguard-grid li{font-size:.96rem}

/* FAQ — <details> so it works with no JavaScript at all */
.faq-list{display:grid;gap:12px;max-width:860px;margin:0 auto}
.faq{background:var(--white);border:1px solid var(--sky-line);border-radius:14px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-deep);line-height:1;flex-shrink:0}
.faq[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--gold-deep)}
.faq-a{padding:0 22px 20px}
.faq-a p{color:var(--ink-soft);font-size:.95rem;max-width:70ch}

@media(max-width:900px){
  .reg-grid{grid-template-columns:1fr}
  .safeguard-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.safeguard-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .reg-detail,.worked-example{padding:24px}
  .scheme-card{padding:24px}
}

/* ============================================================
   PRIVATE EXAM CENTRE PAGE
   ============================================================ */

/* Boards sit immediately under the hero, because it is the first thing a
   private candidate checks. Same sticky-adjacent treatment as .subj-nav. */
.board-bar{background:var(--white);border-bottom:1px solid var(--sky-line)}
.board-bar .wrap{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.board-bar__label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.board-bar__list{list-style:none;display:flex;gap:.6rem;flex-wrap:wrap;margin:0;padding:0}
.board-bar__list li{background:var(--sky);border:1px solid var(--sky-line);border-radius:100px;
  padding:.4rem 1rem;font-weight:700;font-size:.92rem;color:var(--ink)}
.board-bar__quals{margin-left:auto;font-size:.88rem;color:var(--ink-soft);font-weight:600}

.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.who-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:26px}
.who-card h3{font-size:1.1rem;margin:.9rem 0 .45rem}
.who-card p{color:var(--ink-soft);font-size:.93rem}

.centre-number{margin-top:28px;text-align:center}
.centre-number p{display:inline-flex;align-items:center;gap:.6rem;background:var(--sky);
  border:1px solid var(--sky-line);border-radius:100px;padding:.7rem 1.4rem;
  font-size:.92rem;color:var(--ink-soft);max-width:none}
.centre-number .ico{color:var(--gold-deep);flex-shrink:0}

/* "Four things to check" — icon beside text, so each reads as a warning
   rather than a feature */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.check-card{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);
  padding:26px 28px;display:flex;gap:1.1rem;align-items:flex-start}
.check-ico{width:44px;height:44px;border-radius:12px;background:rgba(231,181,60,.14);
  color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0}
.check-ico .ico{width:22px;height:22px}
.check-card h3{font-size:1.08rem;margin-bottom:.45rem}
.check-card p{color:var(--ink-soft);font-size:.93rem}

.deadline-note{margin-top:24px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:30px 34px}
.deadline-note h3{font-size:1.3rem;margin-bottom:.6rem}
.deadline-note p{color:#dbe6f5;max-width:70ch}
.deadline-note .dn-cta{display:flex;gap:.5rem;align-items:flex-start;color:var(--gold);
  font-weight:600;margin-top:.9rem}
.deadline-note .dn-cta .ico{flex-shrink:0;margin-top:.15rem}

/* Numbered because the steps genuinely are sequential */
.step-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0}
.step{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:28px}
.step-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--gold);color:#3a2a05;font-weight:700;font-family:'Playfair Display',serif;
  font-size:1.15rem;margin-bottom:1rem}
.step h3{font-size:1.1rem;margin-bottom:.45rem}
.step p{color:var(--ink-soft);font-size:.93rem}

.standards-band{margin-top:32px;background:var(--sky);border:1px solid var(--sky-line);
  border-radius:var(--radius);padding:30px 34px}
.standards-band h3{font-size:1.2rem;margin-bottom:1rem}
.standards-grid{grid-template-columns:repeat(3,1fr);gap:.9rem 2.5rem}
.standards-grid li{font-size:.94rem}

/* four cards in one row are too narrow to read below ~1080px (an iPad Pro in
   portrait is 1024) */
@media(max-width:1080px){.who-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1000px){
  .step-list{grid-template-columns:1fr}
  .standards-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .check-grid{grid-template-columns:1fr}
  .board-bar__quals{margin-left:0;width:100%}
}
@media(max-width:600px){
  .who-grid{grid-template-columns:1fr}
  .standards-grid{grid-template-columns:1fr}
  .deadline-note,.standards-band{padding:24px}
}

/* ---- live Google reviews ---- */
.review-summary{font-size:1rem;color:var(--ink-soft);margin-top:.6rem}
.review-summary b{color:var(--ink);font-weight:700}
/* Google requires attribution and a link back to the listing. */
.review-attribution{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:1.6rem}
.review-attribution a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Google profile photos come back at 44px; .avatar sizes the initials
   fallback at 42px, so pin both to the same box. */
.avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--sky)}
.ofsted-num{display:block;margin-top:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;letter-spacing:.04em;opacity:.85}