/* ===== 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{--eb-track:.14em;font-family:'Inter';font-size:.78rem;font-weight:700;letter-spacing:var(--eb-track);text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.6rem}
/* A gold rule on both sides of every label: a symmetric ornament when the label
   is centred, an opening and a closing line when it is left-aligned. */
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;flex-shrink:0}
/* the letter-spacing leaves one track of space after the last letter; pull the
   right-hand line in by the same amount so both gaps look equal */
.eyebrow::after{margin-left:calc(-1 * var(--eb-track))}
/* Small phones: the second rule pushed the longest labels ("Registered, not
   self-declared") onto two lines. Shorter rules, a tighter gap and slightly
   tighter tracking keep every label on one line. */
@media(max-width:400px){
  .eyebrow{--eb-track:.1em;gap:.45rem}
  .eyebrow::before,.eyebrow::after{width:16px}
}
/* the smallest phones: the two longest labels were still 8-15px too wide */
@media(max-width:360px){
  .eyebrow{--eb-track:.08em;gap:.35rem}
  .eyebrow::before,.eyebrow::after{width:10px}
}
.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}
/* the Contact column is the widest so both phone numbers fit on one line */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;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}
/* The logo's navy lettering needs a white ground on the navy footer. At 52px
   its built-in "ALPERTON ACADEMY" text was a few pixels high and the tile read
   as a small grey square; at 96px it is legible, and the fine gold ring and
   shadow lift the tile off the background. */
.foot-logo{background:#fff;border-radius:16px;padding:16px;display:inline-block;margin-bottom:1.1rem;
  box-shadow:0 0 0 1px rgba(231,181,60,.45),0 14px 34px -14px rgba(0,0,0,.6)}
/* 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:96px;width:auto}
@media(max-width:640px){.foot-logo img{height:84px}}
.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}
/* office and mobile numbers share one line; each number stays whole */
.foot-tel{white-space:nowrap}
.foot-sep{margin:0 .45rem 0 .2rem;opacity:.6}
.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)}

.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 a card hung off its edge would
     sit on the screen edge — tuck it inside */
  .fc-results{right: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}
  .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)}
}
/* Hero headline: "Tuition in" over "Alperton / Wembley." on its own line. At a
   fixed size the place names outgrew the column and broke after the slash,
   leaving three short lines and a hollow on the right. The size now follows
   the column's width (cqi = 1% of it), so the gold line always fills one row,
   and "Tuition in" takes the same size. Placed after the phone blocks so it
   replaces their fixed sizes; browsers without container units keep them. */
/* Desktop: header + hero + trust bar make up exactly the first screen, so the
   next section never peeks in underneath. Height comes from the viewport, not
   the content — it used to come from the content, so every wording change
   moved where the first screen ended. The hero absorbs the difference and
   centres its content; the flex column accounts for the trust bar's real
   height even when it wraps. 83px is the sticky header (82px + 1px border).
   Only where the hero is two columns; the stacked layout is taller than a
   screen anyway. The 1200px cap covers 1080p and 1440p screens, and stops the
   hero stretching endlessly on anything taller. */
@media (min-width:1081px){
  .first-screen{display:flex;flex-direction:column;
    min-height:min(calc(100vh - 83px),1200px);
    min-height:min(calc(100svh - 83px),1200px)}
  .first-screen .hero-sec{flex:1;display:flex;align-items:center}
  .first-screen .hero-sec>.wrap{width:100%}
}
.hero-place{display:block}
.hero-slash{font-weight:400;opacity:.55;margin:0 .06em}
@supports (font-size:1cqi){
  .hero-copy{container-type:inline-size}
  /* measured: "Alperton / Wembley." renders 9.31x its font size wide in
     Playfair Display 700, so 10.4cqi fills ~97% of the column and leaves a
     margin for other browsers' font rendering */
  .hero-copy h1{font-size:min(4.2rem,10.4cqi)}
  .hero-place{white-space:nowrap}
}

/* ===== 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}
/* No price since 1 Oct 2026, so the booking link sits alone on the left,
   matching "Enquire →" on the crash-course cards. */
.lvl-foot{display:flex;justify-content:flex-start;align-items:center;border-top:1px solid var(--sky-line);padding-top:.9rem}
.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}
/* Courses cards respond like the homepage cards: lift 4px and a shadow.
   :focus-within gives keyboard users the same cue when the card's link is focused. */
.lvl-card,.crash-card,.del-card{transition:transform .2s,box-shadow .2s}
.lvl-card:hover,.crash-card:hover,.del-card:hover,
.lvl-card:focus-within,.crash-card:focus-within,.del-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow)}
.lvl-card:hover .lvl-book,.crash-card:hover .lvl-book{text-decoration:underline}
/* the delivery icons turn gold, like the homepage offer-card icons */
.del-ico{transition:background .2s,color .2s,border-color .2s}
.del-card:hover .del-ico{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* Whole card clickable. The card's own "Book trial" / "Enquire" link stretches
   an invisible layer over the card: still one link, the same address (#book),
   the same keyboard tab stop, and no HTML change. */
.lvl-card,.crash-card{position:relative}
.lvl-card .lvl-book::after,.crash-card .lvl-book::after{content:"";position:absolute;inset:0;border-radius:inherit}
.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);
  /* links land on #book; stop the sticky header (82px) covering its heading */
  scroll-margin-top:104px}
@media(max-width:640px){.book-card{scroll-margin-top:82px}}
.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)}

/* 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{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}

/* ============================================================
   PRIVACY POLICY  (templates/pages/privacy.php)
   A sticky "On this page" list beside numbered section cards;
   below 1024px the list moves above the cards.
   ============================================================ */
/* sits between the title and the intro, as in the academy's text */
.page-hero .pv-effective{display:inline-flex;align-items:center;gap:.45rem;margin:.1rem 0 1.1rem;padding:.42rem .95rem;
  border:1px solid rgba(231,181,60,.45);border-radius:100px;background:rgba(231,181,60,.08);
  color:var(--gold);font-size:.88rem;font-weight:600;max-width:none}
.pv-body{padding:72px 0 88px}
.pv-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;align-items:start}
/* top:106px clears the 82px sticky header with room to spare */
.pv-toc{position:sticky;top:106px;background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);
  padding:22px 16px;box-shadow:var(--shadow-sm)}
.pv-toc-title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .6rem .55rem}
/* A bulleted track. The grey line runs from the first bullet to the last; the
   gold line fills down it to the section being read. main.js measures the
   bullets into --pv-first / --pv-track and moves --pv-fill as the page
   scrolls. Without JavaScript the grey track shows and nothing is marked. */
.pv-toc ol{list-style:none;display:grid;gap:2px;position:relative}
.pv-toc ol::before,.pv-toc ol::after{content:"";position:absolute;left:9px;top:var(--pv-first,18px);width:2px;border-radius:2px}
.pv-toc ol::before{height:var(--pv-track,calc(100% - 36px));background:var(--sky-line)}
.pv-toc ol::after{height:var(--pv-fill,0px);background:var(--gold);transition:height .3s ease}
.pv-toc li{position:relative;z-index:1;padding-left:22px}
/* the bullet: centred on the track, level with the first line of its title */
.pv-toc li::before{content:"";position:absolute;left:5px;top:13px;width:10px;height:10px;border-radius:50%;
  box-sizing:border-box;background:var(--white);border:2px solid var(--sky-line);
  transition:background .25s,border-color .25s,box-shadow .25s}
.pv-toc li.is-passed::before{border-color:var(--gold)}
.pv-toc li.is-active::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(231,181,60,.22)}
.pv-toc a{display:block;padding:.45rem .55rem;border-radius:8px;font-size:.9rem;
  line-height:1.35;color:var(--ink-soft);transition:background .15s,color .15s}
.pv-toc a:hover{background:var(--sky);color:var(--ink)}
.pv-toc li.is-active a{color:var(--ink);font-weight:600}
.pv-sections{display:grid;gap:22px;min-width:0}
/* the anchor target clears the sticky header too */
.pv-sec{background:var(--white);border:1px solid var(--sky-line);border-radius:var(--radius);padding:34px 38px;scroll-margin-top:106px}
.pv-sec-head{display:flex;align-items:center;gap:16px;margin-bottom:1.1rem}
.pv-sec h2{font-size:clamp(1.35rem,2.2vw,1.65rem)}
.pv-sec p{color:var(--ink-soft);max-width:70ch}
.pv-sec p+p{margin-top:.8rem}
.pv-list{list-style:none;display:grid;gap:.65rem;margin-top:1rem}
.pv-list--cols{grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--rows,4),auto);grid-auto-flow:column;column-gap:2.2rem}
.pv-list li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5}
.pv-list .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(231,181,60,.18);color:var(--gold-deep);stroke-width:2.6;margin-top:.05rem}
.pv-rights{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1rem}
.pv-rights li{display:flex;gap:.9rem;align-items:center;padding:14px 16px;border-radius:14px;background:var(--sky);
  border:1px solid var(--sky-line);font-weight:500;line-height:1.45}
.pv-rights .icon-tile{background:var(--white);color:var(--gold-deep);flex-shrink:0}
.pv-ico{display:flex;gap:.9rem;align-items:flex-start;margin-top:14px;padding:16px 18px;border-radius:14px;
  border:1px dashed rgba(138,100,20,.45);background:var(--paper)}
.pv-ico .ico{color:var(--gold-deep);margin-top:.15rem}
.pv-ico a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* 09 Contact Us closes the page as a navy card, echoing the page hero */
.pv-sec--contact{background:var(--ink);border-color:var(--ink);position:relative;overflow:hidden}
.pv-sec--contact::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(231,181,60,.16),transparent 70%);pointer-events:none}
.pv-sec--contact h2{color:#fff}
.pv-sec--contact p{color:#c3d4ec}
.pv-contact{margin-top:1.3rem;position:relative;z-index:1}
.pv-contact-name{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.2rem;color:#fff;margin-bottom:.8rem}
.pv-contact-links{display:flex;flex-wrap:wrap;gap:12px}
.pv-contact-item{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1.15rem;border-radius:14px;min-width:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:600;
  transition:background .15s,border-color .15s}
.pv-contact-item:hover{background:rgba(255,255,255,.12);border-color:var(--gold)}
.pv-contact-item .ico{color:var(--gold)}
.pv-contact-item span{overflow-wrap:anywhere}
.pv-contact-item small{color:#9db8d8;font-weight:500;font-size:.85rem;margin-right:.15rem}
@media(max-width:1024px){
  .pv-layout{grid-template-columns:1fr;gap:24px}
  .pv-toc{position:static}
  .pv-toc ol{grid-template-columns:1fr 1fr;column-gap:12px}
  /* above the content in two columns: bullets stay, the track has no
     single line to follow, and nothing is "being read" yet */
  .pv-toc ol::before,.pv-toc ol::after{display:none}
}
@media(max-width:640px){
  .pv-body{padding:40px 0 56px}
  .pv-sec{padding:24px 20px}
  .pv-sec-head{gap:12px}
  .pv-list--cols,.pv-rights,.pv-toc ol{grid-template-columns:1fr}
  .pv-list--cols{grid-template-rows:none;grid-auto-flow:row}
  .pv-contact-links{flex-direction:column}
  /* the email is too long to share a line with its label; stack both alike */
  .pv-contact-item small{display:block}
}

/* footer legal row: copyright, privacy link, cookie settings */
.foot-legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.1rem}
.foot-legal a,.foot-legal button{color:inherit;padding:.3rem 0;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(157,184,216,.45)}
.foot-legal button{background:none;border:none;font:inherit;cursor:pointer}
.foot-legal a:hover,.foot-legal button:hover{color:#fff}
.form-note a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   COOKIE CONSENT  (templates/partials/cookie-consent.php, main.js)
   First-visit card, the preferences window, the floating button,
   and the map placeholder shown until Google Maps is allowed.
   ============================================================ */
/* these all start hidden; their own display rules must not undo that */
.cc-banner[hidden],.cc-fab[hidden],.cc-cat-more[hidden],[data-cc][hidden]{display:none!important}
.cc-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1.25rem;line-height:1.2;color:var(--ink)}
.cc-btn{justify-content:center;padding:.7rem .9rem;font-size:.88rem;white-space:nowrap}
/* Reject All and Accept All carry equal weight: both solid. */
.cc-btn--gold{background:var(--gold);color:#3a2a05}
.cc-btn--ink{background:var(--ink);color:#fff}
.cc-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--sky-line)}
.cc-btn--gold:hover,.cc-btn--ink:hover{transform:translateY(-1px)}
.cc-btn--ghost:hover{border-color:var(--ink)}

.cc-banner{position:fixed;left:24px;bottom:24px;z-index:70;width:min(450px,calc(100% - 48px));background:var(--white);
  border:1px solid var(--sky-line);border-radius:20px;padding:24px 24px 22px;
  box-shadow:0 26px 60px -22px rgba(14,35,64,.5);animation:cc-in .35s ease-out}
.cc-banner p:not(.cc-title){font-size:.9rem;color:var(--ink-soft);line-height:1.6;margin:.55rem 0 1.15rem}
.cc-banner a,.cc-intro a,.cc-cookies a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@keyframes cc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the phone booking bar would sit under the card; hide it until a choice is made */
body.cc-banner-open .sticky-cta{display:none!important}

/* margin:auto is what centres a modal <dialog>; the global *{margin:0} reset
   at the top of this file removes it, which pinned the window top-left */
.cc-dialog{margin:auto;width:min(760px,calc(100% - 32px));max-height:min(86vh,780px);padding:0;border:none;border-radius:20px;
  background:var(--white);color:var(--ink);box-shadow:0 30px 80px -24px rgba(14,35,64,.6);overflow:hidden}
.cc-dialog[open]{display:flex;flex-direction:column}
.cc-dialog::backdrop{background:rgba(14,35,64,.55);backdrop-filter:blur(2px)}
html.cc-lock{overflow:hidden}
.cc-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:20px 24px 18px 28px;border-bottom:1px solid var(--sky-line)}
.cc-dialog-head .cc-title{font-size:1.35rem}
.cc-close{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}
.cc-close:hover{background:var(--sky);color:var(--ink)}
.cc-close .ico{width:20px;height:20px}
.cc-dialog-body{overflow-y:auto;padding:16px 28px 22px;flex:1;min-height:0}
.cc-intro{font-size:.92rem;color:var(--ink-soft);padding-bottom:14px;border-bottom:1px solid var(--sky-line)}
.cc-cat{padding:16px 0;border-bottom:1px solid var(--sky-line)}
.cc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cc-cat-toggle{display:inline-flex;align-items:center;gap:.45rem;background:none;border:none;padding:.3rem 0;cursor:pointer;
  font:inherit;font-weight:700;font-size:1rem;color:var(--ink)}
.cc-chev{width:18px;height:18px;color:var(--ink-soft);transition:transform .2s}
.cc-cat-toggle[aria-expanded="true"] .cc-chev{transform:rotate(90deg)}
.cc-always{font-size:.86rem;font-weight:700;color:#1E7A3E}
.cc-cat-desc{font-size:.9rem;color:var(--ink-soft);margin-top:.25rem;padding-left:1.6rem}
.cc-cat-more{margin-top:.75rem;padding-left:1.6rem}
.cc-cookies{display:grid;gap:8px}
.cc-cookies>div{background:var(--sky);border-radius:12px;padding:10px 14px}
.cc-cookies dt{font-weight:600;font-size:.86rem}
.cc-cookies dd{font-size:.85rem;color:var(--ink-soft);margin:.1rem 0 0}
.cc-none{display:flex;align-items:center;gap:.5rem;margin-top:16px;font-size:.88rem;color:var(--ink-soft)}
.cc-none .ico{color:#1E7A3E;stroke-width:2.4}
.cc-dialog-foot{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:10px;padding:16px 28px 20px;border-top:1px solid var(--sky-line);background:var(--paper)}

/* the Functional switch: a real checkbox, announced as a switch */
.cc-switch{position:relative;display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}
.cc-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* #7F95B5 keeps the "off" track at 3:1 against white, as a control's edge must be */
.cc-switch-track{width:46px;height:26px;border-radius:100px;background:#7F95B5;position:relative;transition:background .2s}
.cc-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.cc-switch input:checked+.cc-switch-track{background:var(--ink)}
.cc-switch input:checked+.cc-switch-track::after{transform:translateX(20px)}
.cc-switch input:focus-visible+.cc-switch-track{outline:3px solid var(--gold-deep);outline-offset:2px}
.cc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cc-fab{position:fixed;left:20px;bottom:20px;z-index:65;width:48px;height:48px;border-radius:50%;
  background:var(--white);border:1px solid var(--sky-line);color:var(--gold-deep);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .18s,border-color .18s}
.cc-fab:hover{transform:translateY(-2px);border-color:var(--gold)}
.cc-fab .ico{width:24px;height:24px}

/* map placeholder: a soft street-grid on sky with the pin, until consent */
.site-map__consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;padding:24px;text-align:center;
  background:radial-gradient(circle at 50% 42%,rgba(231,181,60,.2),transparent 42%),
    linear-gradient(rgba(211,224,240,.75) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(211,224,240,.75) 1px,transparent 1px) 0 0/34px 34px,var(--sky)}
.site-map__frame.is-loaded .site-map__consent{display:none}
.site-map__consent-pin{width:52px;height:52px;border-radius:50%;background:var(--white);color:var(--gold-deep);display:grid;
  place-items:center;box-shadow:var(--shadow-sm);margin-bottom:.25rem}
.site-map__consent b{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;line-height:1.25;text-wrap:balance}
.site-map__consent p{font-size:.92rem;color:var(--ink-soft);max-width:46ch}
.site-map__consent .btn{margin-top:.35rem}

@media(max-width:640px){
  .cc-banner{left:0;right:0;bottom:0;width:100%;border-radius:20px 20px 0 0;border-bottom:none;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom))}
  .cc-actions{grid-template-columns:1fr 1fr}
  .cc-actions [data-cc="customise"]{grid-column:1 / -1;order:3}
  /* the window takes the whole screen; the list scrolls, the buttons stack */
  .cc-dialog{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0}
  .cc-dialog-head{padding:16px 14px 14px 20px}
  .cc-dialog-head .cc-title{font-size:1.2rem}
  .cc-dialog-body{padding:12px 20px 18px}
  .cc-dialog-foot{grid-template-columns:1fr;padding:14px 20px calc(16px + env(safe-area-inset-bottom))}
  /* With the booking bar, the button sits INSIDE the bar on its left (the bar
     is 80px tall, so bottom:16px centres a 48px button) and the booking button
     moves over to make room. Floating above the bar instead covered body text. */
  .cc-fab{left:14px}
  body.has-sticky-cta .cc-fab{bottom:16px}
  body.has-sticky-cta.cc-fab-on .sticky-cta{padding-left:74px}
}
@media(max-width:560px){
  /* the 4:3 phone map is too short for the placeholder's message */
  .site-map__frame:not(.is-loaded){min-height:310px}
  .site-map__consent{padding:18px}
  .site-map__consent b{font-size:1.1rem}
  .site-map__consent p{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){.cc-banner{animation:none}}