/* =========================================================
   E-Star Nursery — Design tokens
   Palette named + derived from the logo's purple:
   - Nightbloom  : primary brand purple — pixel-sampled from the
     official logo file (images/estar_logo_off.png, stroke color
     #390170), not an approximation, so nav/hero/buttons match the
     mark exactly
   - Cloud       : warm off-white page background (not stark white)
   - Mist        : pale purple-tinted neutral for section breaks
   - Gold        : star accent — quality/highlight, used sparingly
   - Ink         : near-black body text, purple-tinted for cohesion
   Type:
   - Display: Fraunces (soft optical size) — warmth + premium contrast
     to the logo's chunky playful wordmark
   - Body: Work Sans — humanist, calm, legible
   ========================================================= */

:root{
  --nightbloom: #390170;
  --nightbloom-deep: #1E013A;
  --cloud: #FBF8F4;
  --mist: #EFE6F7;
  --gold: #E3A94C;
  --gold-deep: #C98B2E;
  --ink: #241333;
  --ink-soft: #5B4A6E;
  --white: #FFFFFF;

  --font-display: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1180px;
  --radius: 22px;
  --shadow-soft: 0 20px 60px -20px rgba(30, 1, 58, 0.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1, h2, h3{ font-family: var(--font-display); margin: 0 0 .4em; color: var(--ink); }
p{ margin: 0 0 1em; color: var(--ink-soft); }
ul, ol{ margin: 0; padding: 0; list-style: none; }

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--nightbloom); color: var(--white);
  padding: .8em 1.2em; border-radius: 0 0 10px 0;
}
.skip-link:focus{ left: 0; }

/* Visually hidden but screen-reader accessible -- used for section headings
   that keep the document's heading hierarchy correct without needing a
   visible heading on the page (the h1 already states the page's purpose). */
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Honeypot spam-trap field: hidden from sighted users and from screen
   readers (aria-hidden + tabindex="-1" on the wrapper in markup), but
   still present in the DOM/tab order for basic bots that blindly fill
   every field. Deliberately NOT display:none — some spam scripts skip
   display:none fields, so this is pushed off-canvas instead. See
   js/main.js for the matching submit-time check. */
.hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

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

/* =========================================================
   Utility bits
   ========================================================= */
.eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--nightbloom);
  margin: 0 0 .8em;
}
.eyebrow--light{ color: var(--gold); }

.placeholder-flag{
  border-bottom: 2px dotted currentColor;
  opacity: .8;
  cursor: help;
}
/* The .8 opacity above reads fine on white, but doesn't leave enough contrast
   against the tinted Mist background -- keep it solid there instead. */
.section--mist .placeholder-flag{ opacity: 1; }
/* Info cards are sometimes given a Mist background inline rather than through
   a section-level class -- same contrast fix, applied at the component level
   so it isn't dependent on how the background happens to be set. */
.info-card .placeholder-flag{ opacity: 1; }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.7em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .96rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn--gold{
  background: var(--gold);
  color: var(--nightbloom-deep);
}
.btn--gold:hover{ background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(227,169,77,.55); }
.btn--ghost{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.55);
}
.btn--ghost:hover{ border-color: var(--white); transform: translateY(-2px); }
.btn--small{ padding: .6em 1.2em; font-size: .88rem; }
.btn--full{ width: 100%; }

.section-head{
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}
.section-head--onlight h2{ color: var(--white); }
.section-head--onlight .eyebrow{ color: var(--gold); }
.section-head--onlight .section-lede{ color: rgba(255,255,255,.78); }
.section-lede{ font-size: 1.05rem; }

.constellation .section-head,
.pillars .section-head{ text-align: left; margin-left: 0; }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,248,244,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74,36,130,.08);
}
.nav__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: .9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__brand{
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
  margin-right: auto;
}
/* Logo ships as a transparent PNG with its own cloud-shaped silhouette,
   so it needs no card/shadow/clipping treatment here -- it just sits
   on whatever background it's placed on. */
.nav__mark{
  height: 44px;
  width: auto;
  display: block;
}
.nav__word{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--nightbloom);
}
.nav__word em{ font-style: normal; font-weight: 450; color: var(--ink-soft); }
.nav__links{
  display: flex; align-items: center; gap: 1.35rem;
  font-weight: 500; font-size: .93rem;
}
.nav__links > a{ text-decoration: none; position: relative; padding: .3em 0; }
.nav__links > a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__links > a:hover::after,
.nav__links > a[aria-current="page"]::after{ transform: scaleX(1); }
.nav__links > a[aria-current="page"]{ color: var(--nightbloom); }

/* Dropdown groups (Rooms & Ages / Join Us) — pure CSS hover + focus-within,
   no JS required; :focus-within keeps it open while tabbing through items. */
.nav__item{ position: relative; }
.nav__item > .nav__top{
  display: inline-flex; align-items: center; gap: .3em;
  text-decoration: none; position: relative; padding: .3em 0;
  font: inherit; color: inherit; background: none; border: none; cursor: pointer;
}
.nav__item > .nav__top::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__item:hover > .nav__top::after,
.nav__item:focus-within > .nav__top::after{ transform: scaleX(1); }
.nav__caret{ width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.nav__dropdown{
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px);
  min-width: 240px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: .6rem;
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 110;
}
.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav__dropdown a{
  display: flex; flex-direction: column;
  text-decoration: none; padding: .55em .7em; border-radius: 10px;
  font-size: .9rem; font-weight: 500;
}
.nav__dropdown a:hover, .nav__dropdown a:focus-visible{ background: var(--mist); }
.nav__dropdown a span{ font-size: .78rem; font-weight: 400; color: var(--ink-soft); }
.nav__dropdown a[aria-current="page"]{ color: var(--nightbloom); background: var(--mist); }

.nav__toggle{
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav__toggle span{ width: 22px; height: 2px; background: var(--nightbloom); border-radius: 2px; }
.mobile-nav{ display: none; }

@media (max-width: 1080px){
  .nav__links, .nav__cta{ display: none; }
  .nav__toggle{ display: flex; }
  .mobile-nav{
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1rem 1.5rem 1.6rem;
    border-top: 1px solid rgba(74,36,130,.08);
    max-height: 75vh; overflow-y: auto;
  }
  .mobile-nav a{ text-decoration: none; font-weight: 500; padding: .55em 0; }
  .mobile-nav a[aria-current="page"]{ color: var(--nightbloom); }
  .mobile-nav .mobile-nav__group-label{
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-soft); margin: .6em 0 .1em; font-weight: 600;
  }
  .mobile-nav .btn{ margin-top: .5em; }
  .mobile-nav[hidden]{ display: none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--nightbloom) 0%, var(--nightbloom-deep) 100%);
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem clamp(6rem, 12vw, 10rem);
  color: var(--white);
}
.hero__sky{ position: absolute; inset: 0; color: rgba(255,255,255,.05); overflow:hidden; }
.hero__cloud{ position: absolute; width: 60vw; max-width: 720px; opacity: .5; }
.hero__cloud--a{ top: -8%; left: -12%; animation: drift 34s ease-in-out infinite; }
.hero__cloud--b{ bottom: -14%; right: -14%; opacity: .35; animation: drift 40s ease-in-out infinite reverse; }
@keyframes drift{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(2.5%, 1.5%); }
}
.star{
  position: absolute;
  left: var(--x); top: var(--y);
  background: var(--gold);
  clip-path: polygon(50% 0%, 63% 35%, 100% 38%, 72% 60%, 82% 100%, 50% 78%, 18% 100%, 28% 60%, 0% 38%, 37% 35%);
  animation: twinkle 4.5s ease-in-out infinite;
}
.star--lg{ width: 30px; height: 30px; animation-delay: .2s; }
.star--md{ width: 20px; height: 20px; animation-delay: 1.1s; }
.star--sm{ width: 12px; height: 12px; opacity: .8; animation-delay: 2s; }
@keyframes twinkle{
  0%, 100%{ opacity: .55; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.15); }
}

.hero__content{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hero__headline{
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: .5em;
  opacity: 0; transform: translateY(18px);
  animation: rise .9s var(--ease) .15s forwards;
}
.hero__sub{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin: 0 auto 2rem;
  opacity: 0; transform: translateY(14px);
  animation: rise .9s var(--ease) .35s forwards;
}
.hero__actions{
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  animation: rise .9s var(--ease) .55s forwards;
}
@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .hero__headline, .hero__sub, .hero__actions{ opacity: 1; transform: none; animation: none; }
  .hero__cloud, .star{ animation: none; }
}

/* =========================================================
   Trust bar
   ========================================================= */
.trust{
  background: var(--white);
  border-bottom: 1px solid rgba(74,36,130,.08);
}
.trust__list{
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem;
  justify-content: center;
  font-size: .92rem;
  color: var(--ink-soft);
}
.trust__list strong{ color: var(--nightbloom); }

/* =========================================================
   Pillars — asymmetric "constellation" (1 large + 2 small),
   mirroring the logo's own star arrangement.
   ========================================================= */
.pillars{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
}
.constellation{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.6rem;
}
.pillar{
  background: var(--mist);
  border-radius: var(--radius);
  padding: 2.2rem;
  position: relative;
}
.pillar--primary{
  grid-row: 1 / 3;
  background: var(--nightbloom);
  color: var(--white);
  padding: 2.8rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pillar--primary h3{ color: var(--white); font-size: 1.7rem; }
.pillar--primary p{ color: rgba(255,255,255,.85); }
.pillar h3{ font-size: 1.3rem; }
.pillar__star{
  position: absolute; top: 1.6rem; right: 1.6rem;
  background: var(--gold);
  clip-path: polygon(50% 0%, 63% 35%, 100% 38%, 72% 60%, 82% 100%, 50% 78%, 18% 100%, 28% 60%, 0% 38%, 37% 35%);
}
.pillar__star--lg{ width: 34px; height: 34px; }
.pillar__star--sm{ width: 18px; height: 18px; background: var(--nightbloom); opacity:.7; }

@media (max-width: 760px){
  .constellation{ grid-template-columns: 1fr; }
  .pillar--primary{ grid-row: auto; }
}

/* =========================================================
   Timeline (real sequence → numbered/time-anchored)
   ========================================================= */
.day{
  background: var(--white);
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
}
.timeline{
  max-width: 760px;
  margin: 0 auto;
  border-left: 2px solid var(--mist);
}
.timeline li{
  display: flex; gap: 1.6rem;
  padding: 0 0 2.2rem 1.8rem;
  position: relative;
}
.timeline li::before{
  content: "";
  position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--mist);
}
.timeline__time{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--nightbloom);
  min-width: 4.2rem;
  flex-shrink: 0;
}
.timeline h3{ font-size: 1.05rem; margin-bottom: .2em; }
.timeline p{ margin: 0; font-size: .95rem; }

/* =========================================================
   Space — cloud-clipped panels (signature container shape)
   ========================================================= */
.space{
  background: var(--nightbloom-deep);
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
}
.cloud-gallery{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.cloud-panel{ margin: 0; text-align: center; }
.cloud-panel__ph{
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--mist), var(--white));
  /* cloud-silhouette-esque rounding, echoing the brand mark instead of a plain rounded rect */
  clip-path: polygon(15% 0%, 85% 0%, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0% 80%, 0% 20%);
  border-radius: 34% 12% 34% 12% / 12% 34% 12% 34%;
}
.cloud-panel figcaption{
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: .92rem;
}
/* The homepage's "space" section is dark (--nightbloom-deep), so cloud-panel
   figcaptions there need the light/gold treatment. Everywhere else cloud-panel
   sits on a plain light background and uses the default dark, readable text
   set above -- scoping this by ancestor keeps both contexts passing contrast. */
.space .cloud-panel figcaption{ color: rgba(255,255,255,.85); }
.space .cloud-panel figcaption .placeholder-flag{ color: var(--gold); }

@media (max-width: 760px){
  .cloud-gallery{ grid-template-columns: 1fr; }
}

/* =========================================================
   Tour / enquiry
   ========================================================= */
.tour{
  position: relative;
  overflow: hidden;
  background: var(--nightbloom);
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
}
.tour__sky{ position: absolute; inset: 0; }
.tour__inner{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.tour__copy h2{ color: var(--white); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.tour__copy p{ color: rgba(255,255,255,.82); max-width: 420px; }

.tour__form{
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}
.form-note{
  font-size: .82rem;
  background: var(--mist);
  color: var(--ink-soft);
  padding: .7em 1em;
  border-radius: 10px;
}
.field{ margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.field label{ font-size: .88rem; font-weight: 600; color: var(--nightbloom); }
.field input{
  font: inherit;
  padding: .8em .9em;
  border-radius: 10px;
  border: 1.5px solid #E2D9EE;
  background: var(--cloud);
}
.field input:focus{ border-color: var(--nightbloom); outline: none; }
.form-status{ font-size: .9rem; color: var(--nightbloom); min-height: 1.2em; margin: .8em 0 0; }

@media (max-width: 860px){
  .tour__inner{ grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background: var(--mist);
  color: rgba(36,19,51,.72);
  padding: 3rem 1.5rem 1.5rem;
}
.footer__inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr repeat(5, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(36,19,51,.14);
}
.footer__brand{
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.1rem;
}
.footer__brand p{ font-family: var(--font-body); font-weight: 400; font-size: .88rem; max-width: 220px; }
.footer__mark{
  height: 36px;
  width: auto;
  display: block;
}
.footer h3{
  color: var(--ink);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .6em;
}
.footer p{ font-size: .9rem; color: rgba(36,19,51,.68); }
.footer .placeholder-flag{ color: #7A5420; opacity: 1; }
.footer__links{ display: flex; flex-direction: column; gap: .55em; }
.footer__links a{ text-decoration: none; font-size: .9rem; color: rgba(36,19,51,.72); }
.footer__links a:hover{ color: var(--nightbloom); text-decoration: underline; }

@media (max-width: 980px){
  .footer__inner{ grid-template-columns: repeat(3, 1fr); }
  .footer__brand{ grid-column: 1 / -1; }
}
.footer__bottom{
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 1.4rem;
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.footer__bottom p{ margin: 0; }
.footer__legal{ display: flex; flex-wrap: wrap; gap: .35em 1.2em; }
.footer__legal a{
  color: inherit; text-decoration: none; font-size: .82rem;
  border-bottom: 1px solid rgba(36,19,51,.3);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.footer__legal a:hover{ color: var(--nightbloom); border-color: var(--nightbloom); }
.footer__credit a{
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(36,19,51,.3);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.footer__credit a:hover{
  color: var(--nightbloom);
  border-color: var(--nightbloom);
}

@media (max-width: 760px){
  .footer__inner{ grid-template-columns: 1fr 1fr; }
}

/* Decorative stars are tuned for a short, wide hero/tour band. On narrow
   viewports the headline wraps to 3-4 lines and the stars start colliding
   with the text, so they step aside and let the soft cloud shapes carry
   the atmosphere instead. */
@media (max-width: 640px){
  .hero__sky .star,
  .tour__sky .star,
  .error-page__sky .star{ display: none; }
}

/* =========================================================
   Scroll reveal (JS toggles .is-visible)
   ========================================================= */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Page hero — secondary banner used on every inner page.
   Shorter than the homepage hero, same sky/star treatment
   so the whole site still feels like one continuous world.
   ========================================================= */
.page-hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--nightbloom) 0%, var(--nightbloom-deep) 100%);
  padding: clamp(2.6rem, 6vw, 4.2rem) 1.5rem clamp(3.2rem, 7vw, 5rem);
  color: var(--white);
}
.page-hero__sky{ position: absolute; inset: 0; overflow: hidden; }
.page-hero__inner{ position: relative; max-width: var(--max); margin: 0 auto; }
.breadcrumb{
  display: flex; flex-wrap: wrap; gap: .4em;
  font-size: .82rem; color: rgba(255,255,255,.65);
  margin: 0 0 1.2em; list-style: none; padding: 0;
}
.breadcrumb a{ color: rgba(255,255,255,.85); text-decoration: none; }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb span[aria-hidden]{ opacity: .5; }
.page-hero h1{
  color: var(--white);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  max-width: 780px;
  margin-bottom: .35em;
}
.page-hero__lede{
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,.82);
  max-width: 620px;
  margin: 0;
}
.page-hero__chips{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* =========================================================
   Chips — small stat/fact pills (ages, ratios, hours)
   ========================================================= */
.chip{
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1em;
  border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.14);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.28);
}
.chip--light{ background: var(--mist); color: var(--nightbloom); border-color: transparent; }
.chip--gold{ background: rgba(227,169,77,.18); color: var(--gold-deep); border-color: rgba(227,169,77,.4); }

/* =========================================================
   404 / error page
   ========================================================= */
.error-page{
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 7rem) 1.5rem clamp(4rem, 8vw, 6rem);
  background: var(--nightbloom-deep);
  color: var(--white);
  text-align: center;
}
.error-page__sky{ position: absolute; inset: 0; overflow: hidden; }
.error-page__inner{ position: relative; max-width: 640px; margin: 0 auto; }
.error-page__code{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  line-height: 1;
  color: var(--gold);
  margin: 0 0 .2em;
}
.error-page h1{ color: var(--white); margin: 0 0 .5em; }
.error-page p{ color: rgba(255,255,255,.8); font-size: 1.05rem; margin: 0 0 2em; }
.error-page__links{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  margin-top: 2.2rem;
}
.error-page__links a{
  font-size: .92rem; font-weight: 600; color: var(--white);
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: .1em;
}
.error-page__links a:hover{ border-color: var(--gold); color: var(--gold); }

/* =========================================================
   Generic section wrapper + alternating backgrounds, so new
   pages can compose sections without bespoke classes each time.
   ========================================================= */
.section{ padding: clamp(3.6rem, 7vw, 6rem) 1.5rem; }
.section--tight{ padding: clamp(2.4rem, 5vw, 3.6rem) 1.5rem; }
.section--white{ background: var(--white); }
.section--mist{ background: var(--mist); }
.section--deep{ background: var(--nightbloom-deep); }
.section--deep h2, .section--deep .section-lede{ color: var(--white); }
.section--deep .section-lede{ color: rgba(255,255,255,.78); }
.section--deep .eyebrow{ color: var(--gold); }
.section-inner{ max-width: var(--max); margin: 0 auto; }
.section-inner--narrow{ max-width: 780px; }
.section-head--left{ text-align: left; margin-left: 0; }

.prose{ max-width: 720px; }
.prose p{ font-size: 1.03rem; }
.prose h2{ margin-top: 1.6em; }
.prose h3{ margin-top: 1.3em; font-size: 1.15rem; }
.prose ul, .prose ol{
  margin: 1em 0 1.4em;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: .55em;
}
.prose ul{ list-style: disc; }
.prose ol{ list-style: decimal; }
.prose li{ font-size: 1.03rem; padding-left: .2em; }
.prose li::marker{ color: var(--nightbloom); }
.prose li ul, .prose li ol{ margin: .55em 0 0; }
.prose a{ color: var(--nightbloom); text-decoration-color: rgba(74,36,130,.35); }
.prose a:hover{ text-decoration-color: currentColor; }
.prose strong{ color: var(--ink); }
.prose table{ width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: .95rem; }
.prose th, .prose td{ text-align: left; padding: .7em .8em; border-bottom: 1px solid #E2D9EE; vertical-align: top; }
.prose th{ font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.prose blockquote{
  margin: 1.4em 0; padding: 1em 1.4em; border-left: 3px solid var(--gold);
  background: var(--mist); border-radius: 0 10px 10px 0; font-style: italic; color: var(--ink-soft);
}
.doc-updated{
  display: inline-block; margin-bottom: 1.6em; padding: .4em .9em;
  border-radius: 999px; background: var(--mist); color: var(--nightbloom);
  font-size: .82rem; font-weight: 600;
}
.doc-callout{
  margin: 0 0 2rem; padding: 1.1em 1.3em; border-radius: var(--radius);
  background: rgba(227,169,77,.14); border: 1px solid rgba(227,169,77,.4);
  font-size: .92rem; color: var(--ink-soft);
}
.doc-callout strong{ color: var(--ink); }
.prose .toc{
  background: var(--mist); border-radius: var(--radius); padding: 1.3em 1.5em; margin: 0 0 2em;
}
.prose .toc p{ font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--ink); margin: 0 0 .6em; }
.prose .toc ul{ margin: 0; gap: .35em; }
.prose .toc a{ font-size: .92rem; }

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.two-col--reverse{ direction: rtl; }
.two-col--reverse > *{ direction: ltr; }
@media (max-width: 860px){
  .two-col{ grid-template-columns: 1fr; }
  .two-col--reverse{ direction: ltr; }
}

/* =========================================================
   Info grid / info card — values, EYFS areas of learning,
   safety features, "why this room" points, etc.
   ========================================================= */
.info-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.info-grid--2{ grid-template-columns: repeat(2, 1fr); }
.info-grid--4{ grid-template-columns: repeat(4, 1fr); }
.info-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem;
  border: 1px solid rgba(74,36,130,.08);
}
.info-card__icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--mist);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.info-card__icon .star{ position: static; }
.info-card h3{ font-size: 1.1rem; margin-bottom: .35em; }
.info-card p{ font-size: .95rem; margin-bottom: 0; }
.info-card--onmist{ background: var(--white); }

@media (max-width: 860px){
  .info-grid, .info-grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .info-grid, .info-grid--2, .info-grid--4{ grid-template-columns: 1fr; }
}

/* =========================================================
   Steps / stepper — admissions journey
   ========================================================= */
.steps{
  max-width: 820px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
}
.step{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.4rem;
  padding-bottom: 2.4rem;
  position: relative;
}
.step:not(:last-child)::before{
  content: "";
  position: absolute; left: 27px; top: 56px; bottom: 0;
  width: 2px; background: var(--mist);
}
.step__num{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--nightbloom);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  flex-shrink: 0; position: relative; z-index: 1;
}
.step h3{ font-size: 1.15rem; margin-bottom: .3em; }
.step p{ margin-bottom: 0; }
.step__meta{ display: inline-block; margin-top: .6em; font-size: .82rem; font-weight: 600; color: var(--nightbloom); }

/* =========================================================
   Pricing cards — fees & funding
   ========================================================= */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: stretch;
}
.price-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  border: 2px solid var(--mist);
  display: flex; flex-direction: column;
}
.price-card--featured{
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.price-card__badge{
  position: absolute; top: -14px; left: 2rem;
  background: var(--gold); color: var(--nightbloom-deep);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .35em .9em; border-radius: 999px;
}
.price-card h3{ font-size: 1.2rem; margin-bottom: .2em; }
.price-card__price{
  font-family: var(--font-display); font-weight: 600;
  font-size: 2rem; color: var(--nightbloom);
  margin: .2em 0 .1em;
}
.price-card__price span{ font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.price-card__list{ margin: 1.2rem 0 1.6rem; display: flex; flex-direction: column; gap: .7em; flex-grow: 1; }
.price-card__list li{ display: flex; gap: .6em; font-size: .92rem; color: var(--ink-soft); }
.price-card__list li::before{ content: "✓"; color: var(--nightbloom); font-weight: 700; flex-shrink: 0; }
.price-card .btn{ align-self: flex-start; }

.funding-note{
  background: var(--mist);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  margin-top: 2.5rem;
}
.funding-note h3{ font-size: 1.05rem; }
.funding-note p:last-child{ margin-bottom: 0; }

@media (max-width: 940px){
  .pricing-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* =========================================================
   Accordion — FAQs
   ========================================================= */
.accordion{ max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.accordion__item{
  background: var(--white);
  border-radius: 16px;
  border: 1px solid rgba(74,36,130,.1);
  overflow: hidden;
}
.accordion__trigger{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer;
  padding: 1.2em 1.4em;
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--ink);
  text-align: left;
}
.accordion__trigger:hover{ color: var(--nightbloom); }
.accordion__icon{
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--mist);
  position: relative;
}
.accordion__icon::before, .accordion__icon::after{
  content: ""; position: absolute; background: var(--nightbloom);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.accordion__icon::before{ width: 10px; height: 2px; }
.accordion__icon::after{ width: 2px; height: 10px; transition: transform .25s var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after{ transform: translate(-50%,-50%) rotate(90deg) scaleY(0); }
.accordion__panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
}
.accordion__panel__inner{ padding: 0 1.4em 1.3em; }
.accordion__panel__inner p{ margin: 0; font-size: .96rem; }
.accordion__trigger[aria-expanded="true"] + .accordion__panel{ /* max-height set inline by JS */ }

@media (prefers-reduced-motion: reduce){
  .accordion__panel{ transition: none; }
  .accordion__icon::after{ transition: none; }
}

/* =========================================================
   Gallery grid
   ========================================================= */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.gallery-item{ margin: 0; }
/* ---------------------------------------------------------------
   Real photography convention (for when placeholders are replaced)
   ---------------------------------------------------------------
   Every `.gallery-item__ph` / `.cloud-panel__ph` / `.info-card` photo
   placeholder in this codebase is a plain <div role="img"> with no
   image request at all — so there is nothing to optimise yet. Once
   real photography is dropped in, replace each placeholder <div> with:

     <img
       src="images/gallery/room-a.jpg"
       srcset="images/gallery/room-a.jpg 800w, images/gallery/room-a@2x.jpg 1600w"
       sizes="(max-width: 860px) 100vw, 33vw"
       width="800" height="600"
       loading="lazy" decoding="async"
       alt="Describe what's actually in the photo, not 'photo of room'">

   Rules of thumb:
   - Always set explicit width/height (or aspect-ratio in CSS) so the
     layout doesn't shift while the image loads (CLS).
   - loading="lazy" on every below-the-fold image; the hero/first
     visible photo on a page should instead use loading="eager" (or
     fetchpriority="high") so it isn't delayed.
   - decoding="async" everywhere so decoding never blocks rendering.
   - Ship compressed, modern formats (WebP/AVIF with a JPEG fallback
     via <picture>) rather than dropping in raw camera exports.
   - Write real, specific alt text — never "photo" or the filename.
   See IMAGE-GUIDELINES.md at the repo root for the full checklist. */
.gallery-item__ph{
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--mist), var(--white));
  border-radius: var(--radius);
  position: relative;
}
.gallery-item figcaption{ margin-top: .8rem; font-size: .9rem; color: var(--ink-soft); }
.gallery-item--wide{ grid-column: span 2; }
.gallery-item--wide .gallery-item__ph{ aspect-ratio: 8 / 3; }

@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide{ grid-column: span 2; }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-item--wide{ grid-column: span 1; }
}

/* =========================================================
   CTA band — reusable "book a tour" strip, used on every
   inner page footer-adjacent, lighter-weight than the
   homepage's full tour section (no form).
   ========================================================= */
.cta-band{
  position: relative;
  overflow: hidden;
  background: var(--nightbloom);
  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  text-align: center;
}
.cta-band__inner{ position: relative; max-width: 620px; margin: 0 auto; }
.cta-band h2{ color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); }
.cta-band p{ color: rgba(255,255,255,.82); margin-bottom: 1.6rem; }
.cta-band__actions{ display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   Quote / testimonial block
   ========================================================= */
.quote{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.quote blockquote{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 450;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 .8em;
  line-height: 1.4;
}
.quote cite{ font-style: normal; font-size: .9rem; color: var(--ink-soft); font-weight: 600; }

/* =========================================================
   Room quick-facts bar (room pages)
   ========================================================= */
.quick-facts{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(74,36,130,.1);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: -4.5rem;
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin-left: auto; margin-right: auto;
  box-shadow: var(--shadow-soft);
}
.quick-facts__item{
  background: var(--white);
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.quick-facts__item strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--nightbloom);
  margin-bottom: .15em;
}
.quick-facts__item span{ font-size: .82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 760px){
  .quick-facts{ grid-template-columns: repeat(2, 1fr); margin-top: -3rem; }
}

/* =========================================================
   Room nav (prev/next / all rooms) — bottom of room pages
   ========================================================= */
.room-switch{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  max-width: var(--max); margin: 0 auto;
  padding-top: 2rem; border-top: 1px solid rgba(74,36,130,.1);
}
.room-switch a{ text-decoration: none; font-weight: 600; color: var(--nightbloom); font-size: .92rem; }
.room-switch a:hover{ text-decoration: underline; }

@media (max-width: 860px){
  .pricing-grid, .info-grid, .info-grid--4{ grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide{ grid-column: span 2; }
}