/* ==========================================================================
   EduCastle Learning Center — Global Stylesheet
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand colours sampled straight from the EduCastle logo artwork.
     Navy + red are the identity; gold is the crest's battlement. */
  --navy-deep: #12335e;
  --navy: #1e4c8a;
  --navy-soft: #2a5fa5;
  --blue: #1e4c8a;
  --blue-light: #4a7ec4;
  --blue-mist: #eaf1f9;
  --gold: #fdca01;
  --gold-deep: #b98f00;
  --gold-light: #ffe066;
  --gold-mist: #fff8e1;
  --red: #a41f2a;
  --red-deep: #7d1a21;
  --red-mist: #fbecee;
  --green: #1f8a4c;
  --green-mist: #e7f5ec;
  --purple: #6b3fa0;
  --purple-mist: #f0eaf9;
  --cream: #fbf7ef;
  --paper: #ffffff;
  --ink: #14304f;
  --muted: #4e6484;
  --line: rgba(30, 76, 138, .14);
  --line-strong: rgba(30, 76, 138, .24);

  --shadow-xs: 0 1px 2px rgba(18, 51, 94, .05);
  --shadow-sm: 0 1px 2px rgba(18, 51, 94, .05), 0 6px 16px -8px rgba(18, 51, 94, .14);
  --shadow: 0 1px 2px rgba(18, 51, 94, .05), 0 16px 34px -18px rgba(18, 51, 94, .28);
  --shadow-lg: 0 2px 4px rgba(18, 51, 94, .05), 0 34px 60px -28px rgba(18, 51, 94, .36);

  --r-xs: 10px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 26px;
  --r-pill: 999px;

  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.28rem); letter-spacing: -.015em; }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }
p  { margin: 0 0 1.05em; }
ul { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }

/* ---------- Icons ---------- */
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--lg { width: 26px; height: 26px; stroke-width: 1.6; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(60px, 8vw, 112px) 0; position: relative; }
.section--tight { padding-top: 0; }
.section--tint { background: var(--cream); }
.section--mist { background: var(--blue-mist); }
.section--navy { background: var(--navy); color: #ccd5f5; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--gold); flex: none;
}
.center .eyebrow { justify-content: center; }
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--gold::before { background: var(--navy); }
.eyebrow--light { color: var(--gold-light); }
.eyebrow--light::before { background: var(--gold-light); }
.eyebrow .ico { width: 15px; height: 15px; stroke-width: 2; }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 64ch; }
.center .lede { margin-inline: auto; }
.section--navy .lede { color: #a9b6e6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: .97rem;
  letter-spacing: -.008em;
  padding: .82rem 1.5rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .ico { width: 17px; height: 17px; stroke-width: 2; transition: transform .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ico { transform: translateX(3px); }
.btn--primary {
  background: var(--gold); color: #3a2800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 18px -6px rgba(201,130,7,.7);
}
.btn--primary:hover { background: #ffc23a; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px -8px rgba(201,130,7,.75); }
.btn--navy {
  background: var(--navy); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px -8px rgba(11,21,56,.7);
}
.btn--navy:hover { background: var(--navy-soft); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.section--navy .btn--ghost, .page-hero .btn--ghost, .cta-band .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.35);
}
.section--navy .btn--ghost:hover, .page-hero .btn--ghost:hover, .cta-band .btn--ghost:hover {
  background: #fff; color: var(--navy); border-color: #fff;
}
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.center .btn-row, .btn-row.center { justify-content: center; }
/* everything inside the centered page heroes and CTA bands lines up on the
   same centered axis as the text above it */
.page-hero .btn-row { justify-content: center }
.page-hero .subnav { justify-content: center }
.cta-band .btn-row { justify-content: center }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(11,21,56,.6); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: .6rem; }
.brand img { height: 46px; width: auto; transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.brand:hover img { transform: translateY(-2px) rotate(-3deg); }
.brand__text { display: block; line-height: 1; }
.brand__text strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.3rem; letter-spacing: -.035em; color: var(--navy);
}
.brand__text strong em { font-style: normal; color: var(--gold-deep); }
.brand__text small {
  display: block; font-family: var(--font-head); font-weight: 500;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
@media (max-width: 420px) { .brand__text strong { font-size: 1.1rem } .brand__text small { font-size: .5rem; letter-spacing: .15em } }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  color: var(--ink); padding: .5rem .9rem; border-radius: var(--r-pill);
  transition: background .2s ease, color .2s ease;
}
.nav a:hover { background: rgba(22,38,107,.06); }
.nav a.is-active { color: var(--navy); font-weight: 700; background: rgba(22,38,107,.07); }
.header-cta { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none; background: var(--navy); color: #fff; border: 0;
  width: 46px; height: 46px; border-radius: 13px; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: .25s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: .25s;
}
.nav-toggle span::before { top: -6px } .nav-toggle span::after { top: 6px }
.nav-toggle.is-open span { background: transparent }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg) }
.nav-toggle.is-open span::after { top: 0; transform: rotate(-45deg) }

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .brand img { height: 38px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: #fff; padding: 1rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); transform: translateY(-140%); transition: transform .34s cubic-bezier(.2,.8,.3,1);
  }
  .nav.is-open { transform: translateY(0) }
  .nav a { padding: .8rem 1rem; font-size: 1.05rem }
  .header-cta .btn { display: none }
  .nav .btn { display: inline-flex; margin-top: .7rem }
}
@media (min-width: 981px) { .nav .btn { display: none } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; text-align: center; color: #cdd7f5;
  background: var(--navy-deep);
  padding: clamp(56px, 8vw, 100px) 0 clamp(80px, 10vw, 124px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 340px at 50% -6%, rgba(76,106,220,.55), transparent 70%),
    radial-gradient(500px 260px at 88% 20%, rgba(245,178,23,.14), transparent 70%);
}
.page-hero > * { position: relative; }
.page-hero h1 { color: #fff }
.page-hero .lede { color: #a9b6e6; margin-inline: auto }
.page-hero .stars { position: absolute; inset: 0; pointer-events: none }
.page-hero .star { position: absolute; width: 2.5px; height: 2.5px; background: #fff; border-radius: 50%; opacity: .5; animation: twinkle 3s ease-in-out infinite }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.7) } 50% { opacity: .9; transform: scale(1.2) } }
.page-hero .wave { position: absolute; bottom: -1px; left: 0; right: 0; line-height: 0 }
.page-hero .wave svg { width: 100%; height: auto }
.crumbs {
  font-family: var(--font-head); font-size: .84rem; letter-spacing: .11em;
  text-transform: uppercase; color: #8d9ddb; margin-bottom: 1rem; font-weight: 600;
}
.crumbs a { color: #b9c6f0 } .crumbs a:hover { color: #fff }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(14px, 1.8vw, 22px) }
.grid-2 { grid-template-columns: repeat(2, 1fr) }
.grid-3 { grid-template-columns: repeat(3, 1fr) }
.grid-4 { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr) } .grid-3 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 660px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr } }

/* ---------- Cards ---------- */
/* Printed-card look rather than the usual hairline-and-drop-shadow panel: a
   visible blue rule and a solid bottom edge, like a card cut from stiff paper. */
.card {
  position: relative; overflow: hidden;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: 0 2px 0 rgba(30, 76, 138, .07);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 4px 0 rgba(30, 76, 138, .10), 0 18px 32px -22px rgba(18, 51, 94, .45);
}
.card h3 { margin-bottom: .4em }
.card p:last-child { margin-bottom: 0 }
.card .lede { font-size: 1rem }

.card--link { display: block; color: inherit }
.card__more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--blue);
}
.card__more .ico { width: 15px; height: 15px; stroke-width: 2.2; transition: transform .2s ease }
.card--link:hover .card__more .ico { transform: translateX(4px) }

.card__age {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 700; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .7rem;
}
.card__age::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--blue)) }

/* Solid brand shape with a white icon. The pale tinted square with a tinted
   icon inside is the single most over-used card motif on the web; this reads
   as a badge instead. */
.icon-tile {
  width: 48px; height: 48px; border-radius: 50% 50% 50% 12px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem; color: #fff;
  background: var(--navy);
  box-shadow: 0 4px 10px -4px rgba(30, 76, 138, .55);
}
/* brand blue throughout, with gold as the only second voice — six different
   badge colours in one grid is what makes a page look machine-assembled */
.a-gold .icon-tile { background: var(--gold); color: #3f3000; box-shadow: 0 4px 10px -4px rgba(197, 152, 0, .6) }
.icon-tile .ico { width: 23px; height: 23px; stroke-width: 1.9 }

.a-blue  { --accent: var(--blue);  --accent-mist: var(--blue-mist) }
.a-gold  { --accent: var(--gold-deep); --accent-mist: var(--gold-mist); --accent-ink: #8a6a00 }
.a-green { --accent: var(--green); --accent-mist: var(--green-mist) }
.a-red   { --accent: var(--red);   --accent-mist: var(--red-mist) }
.a-purple{ --accent: var(--purple); --accent-mist: var(--purple-mist) }

.card__num {
  position: absolute; right: 18px; top: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 3.4rem;
  color: var(--accent, var(--blue)); opacity: .09; letter-spacing: -.05em; line-height: 1;
}
.section--navy .card {
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1);
}
.section--navy .card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2) }
.section--navy .card p { color: #a9b6e6 }
.section--navy .icon-tile { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14) }

/* ---------- Trust strip ---------- */
.trust {
  position: relative; z-index: 5; margin-top: clamp(-26px, -2vw, -16px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.trust > div {
  display: flex; align-items: center; gap: .8rem;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 24px);
  border-right: 1px solid var(--line);
}
.trust > div:last-child { border-right: 0 }
.trust .ico { width: 24px; height: 24px; color: var(--blue); stroke-width: 1.7 }
.trust span {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  color: var(--navy); line-height: 1.35; letter-spacing: -.01em;
}
@media (max-width: 860px) {
  .trust { grid-template-columns: repeat(2, 1fr) }
  .trust > div:nth-child(2n) { border-right: 0 }
  .trust > div:nth-child(-n+2) { border-bottom: 1px solid var(--line) }
}
@media (max-width: 460px) {
  .trust { grid-template-columns: 1fr }
  .trust > div { border-right: 0; border-bottom: 1px solid var(--line) }
  .trust > div:last-child { border-bottom: 0 }
}

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center }
.split--flip .split__media { order: 2 }
@media (max-width: 860px) { .split { grid-template-columns: 1fr } .split--flip .split__media { order: 0 } }
.split__media {
  position: relative; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 44px);
  background: linear-gradient(160deg, #f1f4fe, #fdfdff);
  border: 1px solid var(--line); display: grid; place-items: center; min-height: 260px; overflow: hidden;
}
.split__media::before {
  content: ""; position: absolute; inset: auto -20% -55% -20%; height: 70%;
  background: radial-gradient(ellipse at 50% 0, rgba(44,70,184,.10), transparent 70%);
}
.split__media img { position: relative; width: auto; max-width: min(340px, 82%); max-height: 340px; filter: drop-shadow(0 22px 30px rgba(11,21,56,.16)) }
.split__media.tint-gold { background: linear-gradient(160deg, #fdf5e4, #fffdf8) }
.split__media.tint-green { background: linear-gradient(160deg, #edf7f0, #fbfefc) }

/* ---------- Checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 1.4rem }
.checks li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .65rem; color: var(--ink) }
.checks .ico { width: 21px; height: 21px; flex: none; margin-top: .22em; color: var(--accent-ink, var(--accent, var(--green))); stroke-width: 2.2 }
.checks--gold .ico { color: var(--gold-deep) }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 30px; margin-top: 1.6rem }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 12px; width: 2px; background: linear-gradient(var(--blue), var(--gold)); border-radius: 2px }
.timeline-item { position: relative; margin-bottom: 1.5rem }
.timeline-item::before {
  content: ""; position: absolute; left: -30px; top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 3px solid var(--blue);
}
.timeline-item .time {
  font-family: var(--font-head); font-weight: 700; color: var(--blue);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.timeline-item h4 { margin: .15rem 0 .2rem; color: var(--navy) }
.timeline-item p { margin: 0; color: var(--muted); font-size: .96rem }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.gallery figure {
  margin: 0; aspect-ratio: 1/1; border-radius: var(--r); overflow: hidden; position: relative;
  display: grid; place-items: center; text-align: center; padding: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, #eef2fe, #fbfcff);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.gallery figure:nth-child(4n+2) { background: linear-gradient(155deg, #fdf4e2, #fffdf8) }
.gallery figure:nth-child(4n+3) { background: linear-gradient(155deg, #ecf7ef, #fbfefc) }
.gallery figure:nth-child(4n)   { background: linear-gradient(155deg, #fdeeee, #fffbfb) }
.gallery figure:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow) }
.gallery .ico { width: 30px; height: 30px; margin: 0 auto .55rem; color: var(--navy); opacity: .78; stroke-width: 1.5 }
.gallery figcaption {
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  color: var(--navy); letter-spacing: -.01em;
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr) } }

/* ---------- Quotes ---------- */
.quote {
  position: relative; background: transparent; border: 0; border-left: 3px solid var(--gold);
  border-radius: 0; padding: 2px 0 2px clamp(18px, 2vw, 26px); box-shadow: none;
  margin: 0;
}
.quote blockquote {
  margin: 0 0 .9rem; font-size: clamp(1.02rem, 1.35vw, 1.14rem); color: var(--ink);
  line-height: 1.62; font-weight: 400;
}
.quote figcaption {
  font-size: .86rem; color: var(--muted); font-family: var(--font-head); font-weight: 600;
  letter-spacing: .01em;
}
@media (max-width: 660px) { .quote { border-left-width: 3px } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(140deg, #2a5fa5 0%, #1e4c8a 46%, #143459 100%);
  border-radius: var(--r-lg); padding: clamp(38px, 5vw, 66px);
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%);
}
.cta-band::after {
  content: ""; position: absolute; left: 50%; top: -40%; width: 620px; height: 620px;
  margin-left: -310px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(245,178,23,.22), transparent 62%);
}
.cta-band > * { position: relative; z-index: 1 }
.cta-band h2 { color: #fff }
.cta-band p { color: #b3c0ec; max-width: 56ch; margin-inline: auto }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-xs); background: #fff }
table { border-collapse: collapse; width: 100%; min-width: 660px }
th, td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem }
thead th {
  background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
tbody tr:hover { background: #fafbff }
tbody tr:last-child td { border-bottom: 0 }
td strong { color: var(--navy); font-family: var(--font-head) }

/* ---------- FAQ ---------- */
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1.05rem 1.3rem; margin-bottom: .7rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm) }
.faq summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600; color: var(--navy);
  font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; width: 11px; height: 11px; flex: none;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px,-2px) }
.faq details p { margin: .85rem 0 0; color: var(--muted); font-size: .97rem }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-sm) }
.field { margin-bottom: 1rem }
.field label {
  display: block; font-family: var(--font-head); font-weight: 600; color: var(--navy);
  margin-bottom: .35rem; font-size: .84rem; letter-spacing: .01em;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .95rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-xs);
  font: inherit; font-size: .96rem; color: var(--ink); background: #fcfdff;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(44,70,184,.1);
}
.field textarea { min-height: 128px; resize: vertical }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr } }
.form-note { font-size: .84rem; color: var(--muted); line-height: 1.5 }
.form-success {
  display: none; align-items: center; gap: .6rem;
  background: var(--green-mist); border: 1px solid #b6e2c1; color: #1b6a2b;
  border-radius: var(--r-xs); padding: .9rem 1.1rem; font-weight: 600; margin-bottom: 1rem; font-size: .95rem;
}
.form-success.is-visible { display: flex }
.form-success .ico { color: var(--green); stroke-width: 2.4 }

/* ---------- Info tiles ---------- */
.info-tile {
  display: flex; gap: .95rem; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow-xs); transition: transform .25s ease, box-shadow .25s ease;
}
.info-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm) }
.info-tile .ico-wrap {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent, var(--blue)); background: var(--accent-mist, var(--blue-mist));
}
.info-tile .ico-wrap .ico { width: 20px; height: 20px }
.info-tile h4 { margin: 0 0 .2rem; color: var(--navy) }
.info-tile p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5 }

.placeholder-tag {
  display: inline-block; font-family: var(--font-head); font-size: .58rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  background: var(--gold-mist); color: var(--gold-deep); border: 1px solid rgba(201,130,7,.25);
  border-radius: 5px; padding: .1rem .34rem; margin-left: .35rem; vertical-align: middle;
}

.map-placeholder {
  border-radius: var(--r); min-height: 300px; border: 1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)),
    repeating-linear-gradient(0deg, #e6ecfb 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, #e6ecfb 0 1px, transparent 1px 34px),
    #f7f9ff;
  display: grid; place-items: center; text-align: center; color: var(--muted); padding: 1.5rem;
}
.map-placeholder .ico { width: 34px; height: 34px; margin: 0 auto .6rem; color: var(--blue) }
.map-placeholder strong { display: block; font-family: var(--font-head); color: var(--navy); margin-bottom: .3rem }

/* ---------- Steps: a route, not four identical boxes ----------
   The stages are drawn as stops along a dashed line, the way a route is drawn
   on a children's map. No card, no border, no pastel tile. */
.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(26px, 3vw, 40px);
  grid-template-columns: repeat(var(--stops, 4), 1fr);
  position: relative;
}
/* the dashed rail runs pin to pin: each stop draws its own segment, from the
   right edge of its pin across the grid gap to the left edge of the next
   pin, so the line always starts and ends exactly at the circles */
.journey__stop:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: 25px; left: 58px; right: calc(-1 * clamp(26px, 3vw, 40px) + 6px); height: 0;
  border-top: 3px dashed rgba(30, 76, 138, .26);
}
.journey__stop { position: relative; z-index: 1; text-align: left; }
.journey__pin {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.18rem;
  color: #fff; background: var(--navy);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px rgba(30, 76, 138, .16);
}
.journey__stop:last-child .journey__pin { background: var(--gold); color: #3d2f00; }
.journey__stop h3 { margin: 0 0 .35em }
.journey__stop p { margin: 0; color: var(--muted) }
.section--mist .journey__pin { box-shadow: 0 0 0 6px var(--blue-mist), 0 0 0 9px rgba(30, 76, 138, .16) }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr 1fr }
  .journey__stop::after { display: none }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; gap: 22px }
  /* pin on the left spanning both text rows, so the heading and its paragraph
     sit together instead of being pushed apart by the height of the pin */
  .journey__stop { display: grid; grid-template-columns: 52px 1fr; column-gap: 1rem; row-gap: .1rem; align-items: start }
  .journey__pin { margin-bottom: 0; grid-row: 1 / span 2 }
  .journey__stop h3 { grid-column: 2; grid-row: 1 }
  .journey__stop p { grid-column: 2; grid-row: 2 }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #98a6de; padding: clamp(48px, 6vw, 76px) 0 0 }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(22px, 3vw, 44px) }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr } }
.site-footer h4 {
  color: #fff; font-family: var(--font-head); font-size: .76rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer p { font-size: .93rem; line-height: 1.6 }
.site-footer a { color: #98a6de; font-size: .93rem }
.site-footer a:hover { color: var(--gold-light) }
.footer-links { list-style: none; padding: 0; margin: 0 }
.footer-links li { margin-bottom: .5rem; font-size: .93rem }
.footer-logo { background: #fff; border-radius: var(--r-sm); padding: .7rem .9rem; display: inline-block; margin-bottom: 1.1rem }
.footer-logo img { height: 58px; width: auto }
.socials { display: flex; gap: .45rem; margin-top: 1rem }
.socials a {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.07);
  display: grid; place-items: center; color: #b9c6f0;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.socials a:hover { background: var(--gold); color: #3a2800; transform: translateY(-3px) }
.socials .ico { width: 18px; height: 18px }
.footer-bottom {
  margin-top: clamp(30px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.2rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between;
  font-size: .82rem; color: #7583b8; padding-right: 58px;
}
.footer-tag { font-family: var(--font-head); color: var(--gold-light); font-weight: 600; letter-spacing: .02em }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1) }
.reveal.is-in { opacity: 1; transform: none }
.reveal.d1 { transition-delay: .07s } .reveal.d2 { transition-delay: .14s }
.reveal.d3 { transition-delay: .21s } .reveal.d4 { transition-delay: .28s }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--navy); color: #fff;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
  display: grid; place-items: center;
}
.to-top .ico { width: 19px; height: 19px; stroke-width: 2.2 }
.to-top.is-visible { opacity: 1; pointer-events: auto }
.to-top:hover { transform: translateY(-4px); background: var(--blue) }

/* ---------- A11y ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--gold); color: #3a2800;
  padding: .7rem 1.2rem; border-radius: 0 0 12px 0; font-weight: 700; z-index: 999;
}
.skip-link:focus { left: 0 }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
  .reveal { opacity: 1; transform: none }
}


/* ==========================================================================
   THE JOURNEY — a single path that threads the whole site together
   ========================================================================== */

/* paper grain over the entire page, so the site feels like the same stock the
   pop-up castle is cut from */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.82%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22260%22 height=%22260%22 filter=%22url(%23n)%22 opacity=%22.5%22/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: .04; mix-blend-mode: multiply;
}

/* ---------- chapter waypoints ---------- */
.chapter {
  position: relative; text-align: center;
  padding-top: 128px; margin-bottom: clamp(2rem, 3.4vw, 2.9rem);
}
.chapter--flush { padding-top: 0; }
.chapter--flush::before, .chapter--flush::after { display: none; }

/* the path arriving from the section above */
.chapter::before {
  content: ""; position: absolute; left: 50%; top: -96px;
  width: 46px; height: 200px; margin-left: -23px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 46 200%22 width=%2246%22 height=%22200%22 fill=%22none%22%3E%3Cpath d=%22M23 0C11 34 35 62 23 96c-11 32 12 62 0 104%22 stroke=%22%2316266b%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-dasharray=%221 15%22 opacity=%22.55%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
/* the waypoint the path arrives at — a mark, not a numbered step. Numbering
   every section is the giveaway that nobody decided what order meant. */
.chapter::after {
  content: "";
  position: absolute; left: 50%; top: 62px; transform: translateX(-50%) rotate(45deg);
  width: 15px; height: 15px; border-radius: 3px;
  background: var(--navy);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgba(20,63,131,.16);
}
.section--tint .chapter::after { box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px rgba(20,63,131,.16); }
.section--mist .chapter::after { box-shadow: 0 0 0 5px var(--blue-mist), 0 0 0 6px rgba(20,63,131,.16); }
.section--navy .chapter::after { background: var(--gold); box-shadow: 0 0 0 5px var(--navy), 0 0 0 6px rgba(255,255,255,.18); }
.chapter { padding-top: 112px; }
.chapter--mark { padding-top: 106px; }
.chapter--mark::after { top: 56px; }
.chapter .eyebrow { justify-content: center; }
.chapter .lede { margin-inline: auto; }


/* ---------- the chapter rail: a quiet "you are here" down the side ---------- */
.rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: grid; gap: 13px; padding: 12px 9px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(9px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.rail.is-on { opacity: 1; visibility: visible; }
.rail a {
  position: relative; display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong); transition: background .25s ease, transform .25s ease;
}
.rail a:hover { transform: scale(1.35); background: var(--gold); }
.rail a.is-here { background: var(--navy); transform: scale(1.3); }
.rail a span {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: .74rem; font-weight: 600; font-family: var(--font-head);
  color: #fff; background: var(--navy); padding: 5px 10px; border-radius: var(--r-pill);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.rail a:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ---------- torn paper edge between chapters of different colour ---------- */
.section--tint, .section--mist { position: relative; }
.section--tint::before, .section--mist::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 26px;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V8c60-6 96 5 150 2s84-9 140-6 92 10 152 7 96-9 152-6 94 9 148 6 96-8 158-3 90 6 150 2v16z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V8c60-6 96 5 150 2s84-9 140-6 92 10 152 7 96-9 152-6 94 9 148 6 96-8 158-3 90 6 150 2v16z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transform: translateY(-25px);
  pointer-events: none;
}
/* a waypoint on its own, for sections whose heading lives inside a split layout */
.chapter--mark { padding-top: 122px; margin-bottom: 1.1rem; }
.chapter--mark::after { top: 40px; }

/* ==========================================================================
   PHOTO SLOTS — a scrapbook of taped-down shots that degrade to placeholders
   ========================================================================== */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); max-width: 100%; }
.shot {
  position: relative; margin: 0;
  min-width: 0; max-width: 100%;
  background: #fff; padding: 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(11,21,56,.06), 0 16px 30px -18px rgba(11,21,56,.42);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.shot:nth-child(4n+1) { transform: rotate(-1.6deg); }
.shot:nth-child(4n+2) { transform: rotate(1.1deg); }
.shot:nth-child(4n+3) { transform: rotate(-.7deg); }
.shot:nth-child(4n)   { transform: rotate(1.9deg); }
.shot:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); z-index: 2; }
/* the strip of tape */
.shot::before {
  content: ""; position: absolute; left: 50%; top: -11px; width: 78px; height: 24px;
  margin-left: -39px; transform: rotate(-2.4deg);
  background: linear-gradient(105deg, rgba(255,231,163,.72), rgba(255,246,214,.55));
  border-left: 1px solid rgba(0,0,0,.05); border-right: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(11,21,56,.10);
}
.shot:nth-child(even)::before { transform: rotate(2.8deg); width: 64px; margin-left: -32px; }
/* The window carries its own square ratio and the photo flows normally
   inside it. Nothing here depends on an ancestor's height or on Safari
   clipping an absolutely-positioned child inside a rotated box — both of
   which proved fragile on iOS. An in-flow image cannot escape its track. */
.shot__win {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 2px; overflow: hidden;
  background: linear-gradient(155deg, #eef2fe, #fbfcff);
  display: grid; place-items: center;
}
.shots .shot:nth-child(4n+2) .shot__win { background: linear-gradient(155deg, #fdf4e2, #fffdf8); }
.shots .shot:nth-child(4n+3) .shot__win { background: linear-gradient(155deg, #ecf7ef, #fbfefc); }
.shots .shot:nth-child(4n)   .shot__win { background: linear-gradient(155deg, #fdeeee, #fffbfb); }
/* the placeholder sits underneath; a real photo simply covers it */
.shot__ph { text-align: center; padding: 12px; }
.shot__ph .ico { width: 30px; height: 30px; margin: 0 auto .5rem; color: var(--navy); opacity: .6; stroke-width: 1.5; }
.shot__ph em {
  display: block; font-style: normal; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); opacity: .8;
}
/* placeholder and photo share the single grid cell; the photo is IN FLOW,
   so it is sized by the track and cannot paint outside it */
.shot__win > * { grid-area: 1 / 1 }
.shot__win img {
  display: block; width: 100%; height: 100%; max-width: 100%;
  object-fit: cover; z-index: 1;
}
/* iOS fallback: if aspect-ratio is unsupported the window pads itself square */
@supports not (aspect-ratio: 1 / 1) {
  .shot__win::after { content: ""; display: block; padding-top: 100% }
}
/* the caption flows below the photo, so a name that wraps to two lines makes
   the card taller instead of crawling up over the picture */
.shot figcaption {
  padding: 9px 2px 1px; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  line-height: 1.3; color: var(--navy); letter-spacing: -.01em;
}
@media (max-width: 980px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(9,15,40,.86); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 84vh; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 14px; font-family: var(--font-head); font-weight: 600; }
.lightbox__close {
  position: absolute; top: 20px; right: 22px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
}
.lightbox__close:hover { background: rgba(255,255,255,.18); }

/* ==========================================================================
   EXPLORE — the castle map you walk through
   ========================================================================== */
.map {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: linear-gradient(180deg, #d7e2ff 0%, #e9eeff 38%, #f4f0e2 72%, #fdfaf1 100%);
}
.map__art { display: block; width: 100%; height: auto; }
.map__stop {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: clamp(30px, 3.1vw, 44px); height: clamp(30px, 3.1vw, 44px);
  border-radius: 50%; border: 2px solid var(--navy); background: #fff; color: var(--navy);
  font-family: var(--font-head); font-weight: 800; font-size: clamp(.72rem, 1vw, .92rem);
  box-shadow: 0 8px 18px -8px rgba(11,21,56,.6);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), background .2s ease, color .2s ease;
  text-decoration: none;
}
.map__stop::after {
  content: attr(data-label);
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: -.005em;
  color: #fff; background: var(--navy); padding: 4px 10px; border-radius: var(--r-pill);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.map__stop:hover, .map__stop:focus-visible { transform: translate(-50%, -50%) scale(1.22); background: var(--gold); border-color: var(--navy); }
.map__stop:hover::after, .map__stop:focus-visible::after { opacity: 1; }
.map__note {
  position: absolute; left: 18px; bottom: 16px;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.8); padding: 5px 12px; border-radius: var(--r-pill);
}
@media (max-width: 700px) { .map__note { display: none; } }

/* ---------- the stops themselves ---------- */
.stop-card {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3.4vw, 52px);
  align-items: center; scroll-margin-top: 110px;
  padding: clamp(26px, 3vw, 40px) 0;
}
.stop-card:nth-child(even) .stop-card__body { order: 2; }
.stop-card + .stop-card { border-top: 1px dashed var(--line-strong); }
.stop-card__num {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--gold-light);
  font-family: var(--font-head); font-weight: 800; font-size: .95rem; margin-bottom: 1rem;
}
.stop-card h3 { font-size: clamp(1.32rem, 2.3vw, 1.72rem); margin-bottom: .35em; }
.stop-card__who {
  display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-deep); margin-bottom: .8rem;
}
.stop-card__heard {
  margin-top: 1.1rem; padding: 14px 18px; border-left: 3px solid var(--gold);
  background: var(--gold-mist); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .95rem; color: var(--navy);
}
.stop-card__heard b {
  display: block; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .3rem;
}
.stop-card__shot {
  position: relative; margin: 0; aspect-ratio: 4/3; background: #fff; padding: 12px;
  border-radius: 4px; transform: rotate(-1.2deg);
  box-shadow: 0 1px 2px rgba(11,21,56,.06), 0 20px 36px -20px rgba(11,21,56,.45);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.stop-card:nth-child(even) .stop-card__shot { transform: rotate(1.4deg); }
.stop-card__shot:hover { transform: rotate(0) translateY(-5px); }
.stop-card__shot::before {
  content: ""; position: absolute; left: 50%; top: -10px; width: 86px; height: 22px; margin-left: -43px;
  transform: rotate(-2deg);
  background: linear-gradient(105deg, rgba(255,231,163,.72), rgba(255,246,214,.55));
  box-shadow: 0 1px 2px rgba(11,21,56,.10);
}
@media (max-width: 820px) {
  .stop-card { grid-template-columns: 1fr; }
  .stop-card:nth-child(even) .stop-card__body { order: 0; }
}

/* skip link: out of the way until a keyboard user asks for it */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* five programs, five colours — the same five the crest and the flyer use */
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.3vw, 20px); }
@media (max-width: 1080px) { .grid-5 { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 720px)  { .grid-5 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 460px)  { .grid-5 { grid-template-columns: 1fr } }

/* the red "now enrolling" ribbon the center already uses on its flyer */
.ribbon {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 18px; border-radius: var(--r-pill);
  box-shadow: 0 8px 18px -10px rgba(164,31,42,.9);
}
.ribbon .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.ribbon i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: block; }
.social-note { font-size: .78rem; color: #93a3cf; margin-top: .8rem; line-height: 1.5; }

/* the real wordmark, used straight from the brand artwork */
.brand__mark { height: 44px; width: auto; }
.brand:hover .brand__mark { transform: translateY(-2px); }
@media (max-width: 560px) { .brand__mark { height: 34px; } }
.footer-logo img { max-width: 190px; height: auto; }
.muted-line { color: var(--muted); font-size: .92em; }
.scene__words .ribbon { margin-bottom: .9rem; }
.btn--quiet {
  background: transparent; color: var(--navy); border: 1px solid var(--line-strong);
  gap: 8px;
}
.btn--quiet:hover { background: var(--blue-mist); border-color: var(--blue-light); }
.btn--quiet .ico { width: 16px; height: 16px; }

/* ==========================================================================
   THE KNIGHTS — the eight characters, used as the cast of the whole site
   ========================================================================== */
/* the knight stands at the foot of the card, whole — never cropped, never over the text.
   The card is a flex column so every knight in a row lines up on the same floor. */
/* No card chrome here — the knight stands on a patch of ground with the writing
   above him, which reads like a page from a picture book rather than a panel in
   a component library. Sized by HEIGHT, never width: the source drawings are all
   230px wide but differ in height, so matching widths made the short ones
   (the explorer with her globe) render noticeably smaller than the rest. */
.card--knight {
  display: flex; flex-direction: column; overflow: visible;
  background: transparent; border: 0; box-shadow: none;
  padding: clamp(4px, 1vw, 12px) clamp(6px, 1.2vw, 16px) 0;
}
.card--knight:hover { transform: none; box-shadow: none; border-color: transparent }
.card--knight .knight {
  height: 208px; width: auto; align-self: center;
  margin: 1.6rem auto 0; margin-top: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 14px rgba(30, 76, 138, .20));
  transition: transform .45s cubic-bezier(.2,.8,.3,1);
}
.card--knight:hover .knight { transform: translateY(-8px) rotate(-2deg); }
/* the ground the knight is standing on */
.card--knight .knight-floor {
  height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 76, 138, .13), rgba(30, 76, 138, 0) 70%);
}
@media (max-width: 1080px) { .card--knight .knight { height: 190px; } }
@media (max-width: 660px)  { .card--knight .knight { height: 216px; } }

/* a knight standing beside a section, in the split media column */
.knight-stand {
  display: grid; place-items: end center; padding: 6px 0 0;
}
.knight-stand img {
  width: min(74%, 210px); height: auto;
  filter: drop-shadow(0 16px 22px rgba(74,58,34,.22));
  animation: knightIdle 5s ease-in-out infinite;
}
@keyframes knightIdle {
  0%, 100% { transform: translateY(0) rotate(0deg) }
  30%      { transform: translateY(-5px) rotate(-.8deg) }
  65%      { transform: translateY(-8px) rotate(.7deg) }
}
@media (prefers-reduced-motion: reduce) { .knight-stand img { animation: none } }

/* ==========================================================================
   PROGRAMME CARDS — the real room, not a pastel icon in a rounded square
   ========================================================================== */
.rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); }
@media (max-width: 1150px) { .rooms { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 760px)  { .rooms { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px)  { .rooms { grid-template-columns: 1fr } }

.room {
  position: relative; display: flex; flex-direction: column; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-xs);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.room:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.room__shot {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--accent-mist, var(--blue-mist));
  display: grid; place-items: center;
}
.room__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.room:hover .room__shot img { transform: scale(1.06); }
.room__shot .ico { width: 34px; height: 34px; color: var(--accent, var(--blue)); opacity: .5; stroke-width: 1.4; }
/* a wash of the room's own colour over the photo, so the five read as a set */
.room__shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16,37,78,.62) 0%, rgba(16,37,78,.14) 42%, rgba(16,37,78,0) 68%);
}
.room__age {
  position: absolute; left: 12px; bottom: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 700; font-size: .69rem;
  letter-spacing: .07em; text-transform: uppercase; color: #fff;
}
.room__age i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--accent, var(--blue)); box-shadow: 0 0 0 2.5px rgba(255,255,255,.85);
}
/* the room's colour as a thick rule across the top of the photo */
.room::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 3;
  background: var(--accent, var(--blue));
}
.room__body { padding: clamp(15px, 1.5vw, 20px); display: flex; flex-direction: column; flex: 1; }
.room__body h3 { margin-bottom: .35em; font-size: clamp(1.02rem, 1.5vw, 1.18rem); }
.room__body p { font-size: .93rem; color: var(--muted); margin-bottom: 1rem; }
.room__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  color: var(--accent-ink, var(--accent, var(--blue)));
}
.room__more .ico { width: 15px; height: 15px; stroke-width: 2.2; transition: transform .2s ease; }
.room:hover .room__more .ico { transform: translateX(4px); }
.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid {
  border-color: var(--red); background: var(--red-mist);
}
.room-plain {
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: -.4em 0 1.1em;
}

/* ==========================================================================
   THE KINGDOM MAP — every room in the building has a name
   ========================================================================== */
.kingdom {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 38px);
}
@media (max-width: 880px) { .kingdom { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .kingdom { grid-template-columns: 1fr } }
.kingdom h4 {
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .9rem;
}
.kingdom dl { margin: 0; }
.kingdom dt {
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy);
  line-height: 1.3;
}
.kingdom dd {
  margin: 0 0 .9rem; font-size: .86rem; color: var(--muted);
}
.kingdom dd::before { content: ""; }
.kingdom-note {
  margin-top: clamp(22px, 2.6vw, 32px); padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line); font-size: .96rem; color: var(--muted);
  max-width: 62ch;
}
.room__plain {
  font-family: var(--font-head); font-weight: 600; font-size: .74rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-ink, var(--accent, var(--muted)));
  margin: -.15em 0 .7em; opacity: .85;
}

/* ==========================================================================
   ROOM PHOTO — the big picture beside each programme, filling its column
   ========================================================================== */
.room-photo {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg);
  background: var(--accent-mist, var(--blue-mist));
  display: grid; place-items: center;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(11,42,92,.05), 0 32px 54px -30px rgba(11,42,92,.40);
}
.room-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.room-photo:hover img { transform: scale(1.035); }
/* the room's own colour as a rule across the top, matching the homepage cards */
.room-photo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2;
  background: var(--accent, var(--blue));
}
.room-photo__ph { text-align: center; padding: 20px; }
.room-photo__ph .ico { width: 38px; height: 38px; margin: 0 auto .6rem; color: var(--accent, var(--blue)); opacity: .45; stroke-width: 1.3; }
.room-photo__ph em {
  display: block; font-style: normal; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); opacity: .8;
}
@media (max-width: 860px) { .room-photo { aspect-ratio: 16 / 10; } }

/* the live Google map */
.map-embed {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  aspect-ratio: 4 / 3; background: var(--blue-mist);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .map-embed { aspect-ratio: 3 / 2; } }

/* ==========================================================================
   TOUCH & SMALL SCREENS
   Everything below exists because a finger is not a mouse pointer. Apple and
   Google both put the comfortable minimum at around 44px; anything under that
   gets mis-tapped, and a mis-tap on a phone feels like the site is broken.
   ========================================================================== */
/* Touch targets are keyed off the POINTER, not the width: an iPad Pro is
   1180px wide and still driven by a thumb. */
@media (max-width: 900px), (pointer: coarse) {
  .footer-links li { margin-bottom: 0 }
  .footer-links a { display: block; padding: .6rem 0; font-size: 1rem }
  .site-footer .socials a { width: 46px; height: 46px }
  .info-tile p a, .site-footer p a { display: inline-block; padding: .55rem 0 }
  .faq summary { padding-block: .55rem; font-size: 1.05rem }
  .crumbs a { padding: .5rem .1rem; display: inline-block }
  .map__stop { width: 46px; height: 46px; font-size: .86rem; border-width: 2.5px }
  .form-note a { padding-block: .5rem; display: inline-block }

  /* the section rail dots are 10px of paint; give them a 40px hit area so a
     thumb can actually land on one without hitting the page behind */
  .rail a { width: 40px; height: 40px; background: none; display: grid; place-items: center }
  .rail a::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--line-strong); transition: background .25s ease, transform .25s ease;
  }
  .rail a.is-here { transform: none }
  .rail a.is-here::before { background: var(--navy); transform: scale(1.3) }
  .rail { gap: 0 !important }
}

@media (max-width: 980px) {

  /* The menu fills the screen below the header instead of stopping halfway
     down. A half-height white panel with the page showing underneath reads as
     a rendering fault, and on a long page the seam lands in a different place
     every time.
     NOTE: the header uses backdrop-filter, which makes it the containing block
     for its own position:fixed children. So `bottom: 0` resolves to the bottom
     of the 72px header, not the viewport, and collapses the panel. The height
     has to come from viewport units instead. */
  .nav {
    inset: var(--header-h) 0 auto 0;
    min-height: calc(100dvh - var(--header-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2.5rem;
  }
  @supports not (height: 100dvh) {
    .nav { min-height: calc(100vh - var(--header-h)) }
  }
}

/* Very narrow phones (iPhone SE and friends) — stop the type from crowding
   the edges and let the big display sizes come down a step. */
@media (max-width: 380px) {
  body { font-size: 16px }
  .wrap { padding-inline: 18px }
  .btn { width: 100%; justify-content: center }
  .btn-row { flex-direction: column; align-items: stretch; width: 100% }
  .hero h1, .section h2 { letter-spacing: -.02em }
  .journey__stop { grid-template-columns: 46px 1fr }
  .journey__pin { width: 46px; height: 46px; font-size: 1.05rem }
  .map__stop { width: 42px; height: 42px }
  .cta-band { padding: 30px 20px }
  .card { padding: 20px 18px }
}

/* Landscape phones: the header plus a full-height hero leaves no room to read,
   so let the scene shrink instead of pushing everything off-screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .scene__words .lede { display: none }
  .hero { padding-block: 28px }
}

/* ==========================================================================
   PINCH ZOOM
   Phone browsers let you zoom out below 100%. When that happens the layout
   viewport stays 390px wide while the visible area gets wider, so anything
   position:fixed anchors to the wrong rectangle and ends up floating over the
   middle of the page. Zoom is never disabled here (people need it) — instead
   the floating furniture is either removed on touch or re-anchored in JS to
   the part of the page the eye can actually see.
   ========================================================================== */
/* `clip`, deliberately, not `hidden`: overflow-x:hidden on html or body kills
   position:sticky, and both the header and the whole opening animation depend
   on sticky. */
html, body { overflow-x: clip; max-width: 100%; }

@media (pointer: coarse) {
  /* the section rail is a mouse affordance; on a phone it is one more thing to
     come unstuck when the page is pinched */
  .rail { display: none !important }
  .to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) }
}

/* JS adds this while a pinch-zoom is in progress so nothing chases the finger */
.is-zooming .to-top { opacity: 0 !important; pointer-events: none }

/* ==========================================================================
   HAND-SET SECTIONS
   The tell of a generated page is the same rhythm repeating: marker, heading,
   lede, grid of identical cards. These pieces exist so long pages can breathe
   differently — a letter, a printed list of rules, a plain checklist — the way
   a person lays out a page when nobody gave them a component library.
   ========================================================================== */

/* A letter from the center: one measured column of prose, navy on white */
.letter {
  max-width: 720px; margin-inline: auto;
  font-size: clamp(1.02rem, 1.2vw, 1.13rem); line-height: 1.85;
}
.letter p + p { margin-top: 1.2em }
.letter .letter__open {
  font-family: var(--font-head); font-weight: 700; color: var(--navy);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.45; letter-spacing: -.015em;
}
.letter .letter__sign {
  margin-top: 1.6em; font-family: var(--font-head); font-weight: 600; color: var(--navy);
}
.section--navy .letter { color: #dbe3f8 }
.section--navy .letter .letter__open, .section--navy .letter .letter__sign { color: #fff }
.section--navy .letter strong { color: var(--gold) }

/* House rules: a printed numbered list, no cards */
.rules {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(36px, 5vw, 72px);
  max-width: 980px; margin-inline: auto;
}
.rules li {
  break-inside: avoid; display: grid; grid-template-columns: 44px 1fr;
  column-gap: 14px; padding: 1.05rem 0; align-items: start;
}
.rules li + li { border-top: 0 }
.rules .rules__n {
  font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1.1;
  color: var(--gold); -webkit-text-stroke: 1px rgba(30,76,138,.35);
}
.rules h3 { margin: 0 0 .25em; font-size: 1.06rem }
.rules p { margin: 0; color: var(--muted); font-size: .98rem }
@media (max-width: 760px) { .rules { columns: 1 } }

/* A two-column plain checklist for the safety facts */
.factlist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem clamp(28px, 4vw, 56px);
  max-width: 980px; margin-inline: auto;
}
.factlist > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px }
.factlist .ico { width: 21px; height: 21px; margin-top: .2em; color: var(--green); stroke-width: 2.2 }
.factlist h3 { margin: 0 0 .2em; font-size: 1.04rem }
.factlist p { margin: 0; color: var(--muted); font-size: .97rem }
@media (max-width: 700px) { .factlist { grid-template-columns: 1fr } }

/* Chapter variants so the same ornament doesn't open every section.
   --plain: no dotted path, no mark, just breathing room.
   --flag:  the dotted path arrives at a small gold pennant instead of the
            diamond, like a flag planted at this stop of the walk. */
.chapter--plain { padding-top: clamp(30px, 4vw, 52px) }
.chapter--plain::before, .chapter--plain::after { display: none }
.chapter--flag::after {
  transform: translateX(-50%); rotate: none;
  width: 22px; height: 15px; border-radius: 0; box-shadow: none;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.chapter--flag { --polemark: 1 }
.chapter--flag h2 { position: relative }

/* a single taped photo used outside the gallery grid — sits directly on the
   page, no panel behind it, because a frame around a frame is exactly the
   kind of thing no person tapes to a fridge */
.split__plain { display: grid; place-items: center; align-self: center }
.shot--solo {
  aspect-ratio: 1 / 1.02; width: min(100%, 440px); margin-inline: auto;
  transform: rotate(-1.4deg);
}
.shot--solo .shot__win { position: relative }
.shot--solo .shot__win img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  max-width: none; max-height: none; filter: none;
}
.shot--solo:hover { transform: rotate(0) translateY(-6px) scale(1.01); }
/* the caption flows below the photo like every other polaroid, so it can
   never crawl up over the picture; the figure grows to fit it */
.shot--solo { aspect-ratio: auto }
.shot--solo .shot__win { aspect-ratio: 1 / 1.02 }
.shot__cap {
  padding: 9px 2px 1px; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--muted);
}

/* inline links inside paragraphs get a taller tap area on touch screens */
@media (pointer: coarse) {
  .lede a, p a { padding-block: .42rem; display: inline-block }
}

/* anchored jumps (rail dots, footer links, on-page hashes) land with the
   heading clear of the sticky header instead of underneath it */
section[id], .chapter[id], [id^="stop-"], [id^="ch-"] { scroll-margin-top: calc(var(--header-h) + 26px) }
.stop-card { scroll-margin-top: calc(var(--header-h) + 26px) }

/* The privacy note above the moments gallery — a quiet statement, not a
   legal disclaimer box */
.privacy-note {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
  max-width: 640px; margin: 0 auto clamp(1.8rem, 3vw, 2.6rem);
  padding: 16px 20px; border-radius: var(--r-sm);
  background: var(--blue-mist); border: 1.5px solid var(--line);
}
.privacy-note .ico { width: 24px; height: 24px; margin-top: .1em; color: var(--navy); stroke-width: 1.8 }
.privacy-note p { margin: 0; font-size: .95rem; color: var(--ink) }
.privacy-note b { color: var(--navy) }

/* ==========================================================================
   THE CASTLE MAP ON PHONES
   Scaling a 1200x640 illustrated map down to a 390px screen leaves 28px tap
   targets scattered over a picture nobody can read. Below 700px the picture
   map steps aside and the same eight stops become a signpost trail — larger
   to tap, in walking order, jumping to the same places on the page.
   ========================================================================== */
.map-trail { display: none }
@media (max-width: 700px) {
  .map { display: none }
  .map-trail {
    display: block; list-style: none; margin: 0; padding: 0;
    position: relative;
  }
  .map-trail::before {
    content: ""; position: absolute; left: 25px; top: 14px; bottom: 14px;
    border-left: 3px dashed rgba(30, 76, 138, .28);
  }
  .map-trail li { position: relative }
  .map-trail a {
    display: grid; grid-template-columns: 52px 1fr; column-gap: 14px;
    align-items: center; padding: 9px 0; text-decoration: none;
  }
  .map-trail__n {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 800; font-size: 1rem;
    color: var(--navy); background: #fff; border: 2.5px solid var(--navy);
    box-shadow: 0 0 0 5px var(--paper);
    position: relative; z-index: 1;
  }
  .map-trail b { display: block; font-family: var(--font-head); color: var(--navy); font-size: 1.04rem }
  .map-trail em { display: block; font-style: normal; font-size: .85rem; color: var(--muted) }
  .map-trail li:last-child .map-trail__n { background: var(--gold); border-color: var(--navy) }
  .map-trail a:active .map-trail__n { background: var(--gold) }
}

/* ============================ v21 additions ============================ */

/* --- Castle news (homepage) --- */
.news { display: grid; grid-template-columns: 1.3fr .85fr; gap: clamp(20px, 2.5vw, 32px); align-items: stretch }
.news-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column }
.news-item__body { padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; align-items: flex-start; gap: .35rem }
.news-item__body p { margin: .35rem 0 .6rem }
.news-item h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--navy); margin: 0 }
.news-tag { display: inline-flex; align-items: center; gap: .5em; font: 700 .74rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase; color: var(--navy); background: var(--blue-mist); border-radius: 999px; padding: .55em 1em; margin-bottom: .55rem }
.news-tag .ico { width: 14px; height: 14px }
.news-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; background: var(--line) }
.news-strip img { width: 100%; height: clamp(120px, 14vw, 185px); object-fit: cover; display: block }
.news-aside { display: grid; gap: clamp(16px, 2vw, 24px); align-content: stretch }
.news-aside .news-item { height: 100% }
.news-date { font-size: .84rem; color: var(--muted); margin-top: auto; padding-top: .4rem }
@media (max-width: 900px) {
  .news { grid-template-columns: 1fr }
  .news-strip { grid-template-columns: repeat(2, 1fr) }
  .news-strip img { height: 30vw }
}

/* --- About sub-navigation --- */
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem }
.subnav a {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 .92rem/1 var(--font-head); color: var(--navy);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: .62em 1.15em; text-decoration: none; transition: background .18s, color .18s, border-color .18s;
}
.subnav a:hover { background: var(--navy); border-color: var(--navy); color: #fff }

/* --- Director & team --- */
.director { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start }
.director .shot { max-width: 340px }
.director h3 { color: var(--navy); font-size: 1.05rem; margin: 1.2rem 0 .4rem }
.teachers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: 1.8rem }
.teacher { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; display: grid; grid-template-columns: minmax(120px, 168px) 1fr }
.teacher img { width: 100%; height: 100%; object-fit: cover; display: block }
.teacher__body { padding: clamp(16px, 2vw, 24px) }
.teacher__body h3 { margin: 0; color: var(--navy); font-size: 1.12rem }
.teacher__role { font: 600 .8rem/1.3 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--red); margin: .3rem 0 .65rem }
.teacher__body p { margin: 0; font-size: .95rem }
@media (max-width: 900px) {
  .director { grid-template-columns: 1fr }
  .director .shot { margin: 0 auto }
  .teachers { grid-template-columns: 1fr }
}
@media (max-width: 430px) { .teacher { grid-template-columns: 1fr } .teacher img { max-height: 300px } }

/* --- Franchise page --- */
.fr-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: 1.6rem }
.fr-point { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow-sm) }
.fr-point .ico { width: 30px; height: 30px; color: var(--navy); stroke-width: 1.7; margin-bottom: .7rem }
.fr-point h3 { color: var(--navy); font-size: 1.08rem; margin: 0 0 .45rem }
.fr-point p { margin: 0; font-size: .95rem }
@media (max-width: 900px) { .fr-points { grid-template-columns: 1fr } }

/* --- Tuition assistance (CCS / WPA) --- */
.assist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); max-width: 920px; margin: 1.8rem auto 0 }
.assist-card { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 2vw, 24px); box-shadow: var(--shadow-sm) }
.assist-card img { width: 92px; height: 92px; object-fit: contain; display: block }
.assist-card h3 { margin: 0 0 .3rem; color: var(--navy); font-size: 1.04rem }
.assist-card p { margin: 0; font-size: .92rem }
@media (max-width: 760px) { .assist { grid-template-columns: 1fr } }

/* --- About dropdown in the main nav --- */
.nav-drop { position: relative; display: flex; align-items: center }
.nav-drop__top { display: inline-flex; align-items: center; gap: .35em }
.nav-drop__top .ico { width: 11px; height: 11px; transform: rotate(90deg); transition: transform .2s; stroke-width: 3 }
.nav-drop__menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 6px);
  min-width: 195px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: .45rem;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  display: flex; flex-direction: column; gap: 2px; z-index: 60;
}
/* invisible bridge so the pointer can travel from the link to the menu */
.nav-drop__menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px }
.nav-drop__menu a { border-radius: 9px; padding: .6rem .95rem; white-space: nowrap }
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) }
.nav-drop:hover .nav-drop__top .ico,
.nav-drop:focus-within .nav-drop__top .ico { transform: rotate(-90deg) }
@media (max-width: 980px) {
  /* in the phone menu the sub-pages are simply listed, indented, always visible */
  .nav-drop { flex-direction: column; align-items: stretch }
  .nav-drop__top .ico { display: none }
  .nav-drop__menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; border-radius: 0; padding: 0 0 .2rem 1.1rem; min-width: 0;
  }
  .nav-drop__menu::before { display: none }
  .nav-drop__menu a { padding: .55rem 1rem; font-size: .98rem; color: var(--muted) }
  .nav-drop__menu a.is-active { color: var(--navy) }
}

/* --- sibling-page cards (More of the castle) --- */
.siblings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin-top: 1.6rem }
.sib { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: #fff; text-decoration: none }
.sib img { width: 100%; height: 205px; object-fit: cover; object-position: center 22%; display: block; transition: transform .35s ease }
.sib--pad img { object-fit: contain; background: var(--blue-mist); padding: 18px }
.sib span { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.15rem; font: 700 1.02rem/1.2 var(--font-head); color: var(--navy) }
.sib span .ico { width: 16px; height: 16px; stroke-width: 2.4 }
.sib:hover img { transform: scale(1.04) }
.sib--pad:hover img { transform: none }
@media (max-width: 760px) { .siblings { grid-template-columns: 1fr } .sib img { height: 175px } }

/* --- Blog post cards (director page) --- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px) }
.post { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) }
.post img { width: 100%; height: 190px; object-fit: cover; display: block }
.post > div { padding: 1.05rem 1.2rem 1.25rem }
.post time { font: 600 .72rem/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.post h3 { margin: .4rem 0 0; color: var(--navy); font-size: 1.02rem; line-height: 1.4 }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr 1fr } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr } .post img { height: 175px } }