/* ==========================================================================
   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 { 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;
}
.journey::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(100% / var(--stops, 4) / 2); right: calc(100% / var(--stops, 4) / 2);
  top: 25px; 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::before { 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); }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 9px; 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) }