/* ==========================================================================
   D'Ocean Foundation Academy, v2
   Mobile-first stylesheet built from the design system tokens.
   Token names match the Figma variables exactly.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Primitives, sampled from the school crest */
  --teal-50:#F0F7F9; --teal-100:#D9ECF1; --teal-200:#B3D8E3; --teal-300:#7FBACD;
  --teal-400:#4A97B0; --teal-500:#26798F; --teal-600:#1B6B82; --teal-700:#186078;
  --teal-800:#11495C; --teal-900:#0C2430; --teal-950:#07181F;

  --gold-50:#FFF8EC; --gold-100:#FFEDCC; --gold-200:#FFD894; --gold-300:#FFC05C;
  --gold-400:#FFA82E; --gold-500:#FA9600; --gold-600:#DC7800; --gold-700:#B35C00;
  --gold-800:#8A4700; --gold-900:#663500;

  --sand-50:#FDF9F2; --sand-100:#F7EEDD; --sand-200:#EBDAB9; --sand-300:#DCBE8C; --sand-400:#C9A36A;

  --ink-0:#FFFFFF; --ink-50:#F7F9FA; --ink-100:#EDF1F3; --ink-200:#DCE3E7; --ink-300:#B9C5CC;
  --ink-400:#8C9BA5; --ink-500:#67757F; --ink-600:#4C5A63; --ink-700:#37434B;
  --ink-800:#232D34; --ink-900:#0C2430;

  --success-50:#ECF7F0; --success-700:#15703F; --success-900:#0B3F23;
  --error-50:#FDECEA;   --error-700:#A3241B;   --error-900:#5E130E;

  /* Semantic, the only layer you should need to change */
  --brand:var(--teal-700); --brand-hover:var(--teal-800); --brand-subtle:var(--teal-50);
  --accent:var(--gold-500); --accent-hover:var(--gold-400); --accent-text:var(--gold-800);
  --surface-page:var(--ink-0); --surface-subtle:var(--teal-50); --surface-warm:var(--sand-50);
  --surface-inverse:var(--teal-900);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-600); --text-muted:var(--ink-500);
  --text-on-brand:#FFFFFF; --text-on-accent:var(--teal-900); --text-on-inverse:#FFFFFF;
  --border-subtle:var(--ink-200); --border-strong:var(--ink-300); --border-brand:var(--teal-700);
  --focus:var(--teal-500);

  /* Type */
  --font-display:"Plus Jakarta Sans", ui-rounded, system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space · 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* Radius */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* Elevation, tinted teal, never pure black */
  --e-1:0 1px 2px rgba(12,36,48,.06), 0 1px 3px rgba(12,36,48,.08);
  --e-2:0 4px 12px rgba(12,36,48,.08);
  --e-3:0 12px 28px rgba(12,36,48,.12);
  --e-4:0 24px 48px rgba(12,36,48,.16);

  /* Layout */
  --wrap:1140px;
  --gutter:20px;
  --section-y:56px;
  --header-h:64px;
  --actionbar-h:72px;
}
@media (min-width:600px){ :root{ --gutter:28px; --section-y:72px; } }
@media (min-width:900px){ :root{ --gutter:40px; --section-y:88px; --header-h:76px; } }
@media (min-width:1200px){ :root{ --section-y:104px; } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  color:var(--text-secondary); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
/* The hidden attribute must win. Any author rule that sets display, such as
   .btn{display:inline-flex}, otherwise beats the browser default of
   [hidden]{display:none} and the element stays visible. */
[hidden]{display:none !important}

a{color:var(--brand); text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--brand-hover)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-primary); font-weight:800; line-height:1.15; letter-spacing:-.015em; text-wrap:balance}
h1{font-size:clamp(2rem,7vw,3.5rem); line-height:1.08; letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,4.5vw,2rem); line-height:1.2}
h3{font-size:clamp(1.125rem,3vw,1.375rem); line-height:1.3; font-weight:700}
h4{font-size:1.0625rem; line-height:1.4; font-weight:700}
p{text-wrap:pretty}

.overline{font-family:var(--font-display); font-weight:800; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); margin-bottom:var(--s-2)}
.lead{font-size:clamp(1.0625rem,2.4vw,1.125rem); color:var(--text-secondary)}
.muted{color:var(--text-muted); font-size:.875rem}

/* ---------- 4. Layout ---------- */
.wrap{width:min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline:auto}
.section{padding-block:var(--section-y)}
.section--subtle{background:var(--surface-subtle)}
.section--warm{background:var(--surface-warm)}
.section--tight{padding-block:var(--s-8)}

.section-head{max-width:46rem; margin-bottom:var(--s-8)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head p{margin-top:var(--s-3)}

.grid{display:grid; gap:var(--s-4)}
@media (min-width:600px){ .grid{gap:var(--s-5)} .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .grid{gap:var(--s-6)} .grid-3{grid-template-columns:repeat(3,1fr)} }
/* grid-4 goes 1 → 2 → 4 and never 3, so a four-item row never leaves an orphan */
@media (min-width:1000px){ .grid-4{grid-template-columns:repeat(4,1fr)} }

.stack>*+*{margin-top:var(--s-4)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute; left:50%; translate:-50% -150%; z-index:999;
  background:var(--surface-inverse); color:#fff; padding:var(--s-3) var(--s-5);
  border-radius:0 0 var(--r-md) var(--r-md); text-decoration:none; transition:translate .2s}
.skip-link:focus{translate:-50% 0; color:#fff}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--font-display); font-weight:700; font-size:.9375rem;
  min-height:48px; padding:var(--s-3) var(--s-6);
  border-radius:var(--r-full); border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand); color:var(--text-on-brand); box-shadow:var(--e-1)}
.btn--primary:hover{background:var(--brand-hover); color:#fff; box-shadow:var(--e-2)}
.btn--accent{background:var(--accent); color:var(--text-on-accent); box-shadow:var(--e-1)}
.btn--accent:hover{background:var(--accent-hover); color:var(--text-on-accent); box-shadow:var(--e-2)}
.btn--secondary{background:var(--surface-page); color:var(--brand); border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--brand); color:var(--brand)}
.btn--ghost{background:transparent; color:var(--brand); padding-inline:var(--s-3); min-height:44px}
.btn--ghost:hover{background:var(--brand-subtle); color:var(--brand)}
.btn--on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn--on-dark:hover{background:rgba(255,255,255,.14); color:#fff}
.btn--sm{min-height:44px; padding:var(--s-2) var(--s-5); font-size:.875rem}
.btn--block{width:100%}

.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-3)}
.btn-row--stack .btn{flex:1 1 100%}
@media (min-width:480px){ .btn-row--stack .btn{flex:0 1 auto} }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; isolation:isolate;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
}
.nav-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:var(--header-h); padding-block:var(--s-2)}

.brand{display:flex; align-items:center; gap:var(--s-3); text-decoration:none; min-height:44px}
.brand__mark{flex:none; width:40px; height:40px; border-radius:var(--r-sm)}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font-family:var(--font-display); font-weight:800; font-size:1.0625rem; color:var(--text-primary)}
/* Hidden on the narrowest phones, the crest plus "DOFA" is enough there,
   and the full name would wrap to two lines and inflate the sticky header. */
.brand__tag{display:none; font-size:.625rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); white-space:nowrap}
@media (min-width:430px){ .brand__tag{display:block} }
@media (min-width:900px){ .brand__tag{font-size:.6875rem; letter-spacing:.08em} }
@media (min-width:900px){ .brand__mark{width:46px;height:46px} }

.nav-tools{display:flex; align-items:center; gap:var(--s-2)}
.nav-call{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; min-width:44px; padding-inline:var(--s-4);
  background:var(--brand); color:#fff; border-radius:var(--r-full);
  font-family:var(--font-display); font-weight:700; font-size:.875rem; text-decoration:none;
}
.nav-call:hover{background:var(--brand-hover); color:#fff}
.nav-call span{display:none}
@media (min-width:420px){ .nav-call span{display:inline} }

.nav-toggle{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:48px; height:44px; background:var(--surface-page);
  border:1.5px solid var(--border-strong); border-radius:var(--r-full); cursor:pointer;
}
.nav-toggle i{display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform .2s, opacity .2s}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-links{
  position:absolute; top:100%; left:0; right:0;
  display:flex; flex-direction:column; gap:var(--s-1); list-style:none;
  padding:var(--s-4) var(--gutter) var(--s-6);
  background:var(--surface-page); border-bottom:1px solid var(--border-subtle);
  box-shadow:var(--e-3); max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
.nav-links[hidden]{display:none}
/* :not(.btn) matters. Without it this rule (0,1,1) outranks .btn--primary
   (0,1,0) and paints the CTA label dark navy on the teal fill. */
.nav-links a:not(.btn){display:flex; align-items:center; min-height:48px; padding:var(--s-2) var(--s-4);
  border-radius:var(--r-md); font-family:var(--font-display); font-weight:700;
  color:var(--text-primary); text-decoration:none}
.nav-links a:not(.btn):hover{background:var(--brand-subtle); color:var(--brand)}
.nav-links a:not(.btn)[aria-current="page"]{background:var(--brand-subtle); color:var(--brand)}
.nav-links .nav-cta{margin-top:var(--s-3)}

@media (min-width:940px){
  .nav-toggle{display:none}
  .nav-links{position:static; flex-direction:row; align-items:center; gap:var(--s-1);
    padding:0; background:none; border:0; box-shadow:none; max-height:none; overflow:visible}
  .nav-links[hidden]{display:flex}
  .nav-links a:not(.btn){min-height:44px; padding:var(--s-2) var(--s-4); font-size:.9375rem; border-radius:var(--r-full)}
  .nav-links .nav-cta{margin-top:0; margin-left:var(--s-2)}
  .nav-call{display:none}
}

/* ---------- 7. Hero ----------
   Full bleed photograph, centred copy. The scrim is deliberately heavy:
   white text has to clear 4.5:1 over whatever photograph is swapped in,
   and a school photo can be bright. Do not lighten it without re-checking. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--teal-900);
  /* Tighter on phones so the copy and the buttons sit above the fold
     instead of being pushed down by decorative height. */
  min-height:clamp(430px, 62vh, 720px);
  display:grid; align-items:center;
  padding-block:var(--s-10) var(--s-12);
}
.hero__bg{position:absolute; inset:0; z-index:-2}
.hero__bg img{width:100%; height:100%; object-fit:cover}
/* Tuned by measurement, not by eye. Against a pure white photograph this
   still gives white text 6.16:1, so it is safe for any image that gets
   dropped in, while letting much more of the photograph through than a
   heavier scrim would. Re-measure before lightening it further. */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(12,36,48,.55) 0%, rgba(12,36,48,.70) 55%, rgba(12,36,48,.84) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(12,36,48,.14) 0%, rgba(12,36,48,.58) 100%);
}
.hero__inner{text-align:center; max-width:46rem; margin-inline:auto}
.hero .overline{color:var(--gold-300)}
.hero h1{color:#fff; margin-bottom:var(--s-4)}
.hero h1 em{font-style:normal; color:var(--gold-400)}
.hero .lead{color:#DCE9EE; margin-inline:auto; margin-bottom:var(--s-6); max-width:38rem}

.hero__badges{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-2); margin-bottom:var(--s-6)}
.pill{display:inline-flex; align-items:center; gap:var(--s-1);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-full); padding:var(--s-1) var(--s-4);
  font-family:var(--font-display); font-weight:700; font-size:.8125rem; color:#fff;
  backdrop-filter:blur(4px)}
.hero .btn-row{justify-content:center}

/* Photo credit / replace note, bottom corner */
.hero__note{
  position:absolute; left:0; right:0; bottom:var(--s-3); z-index:1;
  text-align:center; font-size:.6875rem; color:rgba(255,255,255,.45);
  letter-spacing:.04em;
}

@media (min-width:900px){
  .hero{min-height:clamp(560px, 74vh, 780px); padding-block:var(--s-20) var(--s-16)}
}



/* ---------- 7b. Background patterns ----------
   Tileable school motifs, drawn as inline SVG so they cost no extra request
   and almost no bytes. They sit on a pseudo element behind the content, so
   opacity can be tuned without ever touching text colour.
   Usage: <section class="section has-pattern pattern-motifs">
   One patterned section per page. More than that and the page buzzes. */
.has-pattern{position:relative; isolation:isolate; overflow:hidden}
.has-pattern > *{position:relative; z-index:1}
.has-pattern::before{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none; background-repeat:repeat;
}
@media (prefers-reduced-motion:no-preference){
  .has-pattern::before{will-change:auto}
}
.pattern-motifs::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23186078' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E %3Cg transform='translate(18,20)'%3E %3Cpath d='M0 4c5-3 11-3 16 0v14c-5-3-11-3-16 0z'/%3E %3Cpath d='M16 4c5-3 11-3 16 0v14c-5-3-11-3-16 0z'/%3E %3Cpath d='M16 4v14'/%3E %3C/g%3E %3Cg transform='translate(118,30) rotate(35)'%3E %3Cpath d='M0 0h22l6 5-6 5H0z'/%3E%3Cpath d='M22 0v10'/%3E %3C/g%3E %3Cg transform='translate(42,112)'%3E %3Cpath d='M11 0l3.4 7 7.6 1-5.5 5.3 1.3 7.5L11 17.2 4.2 20.8 5.5 13.3 0 8l7.6-1z'/%3E %3C/g%3E %3Cg transform='translate(120,110)'%3E %3Cpath d='M0 6l14-6 14 6-14 6z'/%3E %3Cpath d='M6 8.5V15c0 2 3.6 3.5 8 3.5s8-1.5 8-3.5V8.5'/%3E %3Cpath d='M28 6v8'/%3E %3C/g%3E %3Cg transform='translate(74,58) rotate(-20)'%3E %3Cpath d='M0 0h34v10H0z'/%3E%3Cpath d='M7 0v4M14 0v6M21 0v4M28 0v6'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.055;
}
/* Patterns are decoration. Drop them on dark bands only at very low
   opacity, and never behind body copy on a tinted surface. */
.surface-inverse .has-pattern::before,
.has-pattern.on-dark::before{opacity:.06; filter:invert(1)}

/* ---------- 8. Photo slots ---------- */
.photo{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--surface-warm); box-shadow:var(--e-2)}
.photo img{width:100%; height:100%; object-fit:cover}
.photo--hero{aspect-ratio:4/3; border-radius:var(--r-xl)}
.photo--wide{aspect-ratio:16/10}
.photo--square{aspect-ratio:1/1}
.photo--tall{aspect-ratio:3/4}
.photo--ph{
  display:grid; place-items:center; text-align:center; padding:var(--s-4);
  background:linear-gradient(140deg,var(--teal-50),var(--sand-100) 60%,var(--gold-50));
  border:2px dashed rgba(12,36,48,.18); box-shadow:none;
}
.photo--ph span{font-family:var(--font-display); font-weight:800; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500)}
.photo--ph small{display:block; font-weight:600; letter-spacing:0; text-transform:none;
  margin-top:var(--s-1); color:var(--ink-400); font-size:.75rem}

.collage{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.collage>:first-child{grid-row:span 2}

/* ---------- 9. Quick links ---------- */
.quicklinks{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3)}
@media (min-width:900px){ .quicklinks{grid-template-columns:repeat(4,1fr); gap:var(--s-4)} }
.quicklink{display:flex; flex-direction:column; gap:var(--s-1); text-decoration:none;
  min-height:88px; padding:var(--s-4); background:var(--surface-page);
  border:1px solid var(--border-subtle); border-radius:var(--r-md);
  color:var(--text-primary); box-shadow:var(--e-1); transition:transform .18s, border-color .18s}
.quicklink:hover{transform:translateY(-2px); border-color:var(--brand); color:var(--text-primary)}
.quicklink strong{font-family:var(--font-display); font-size:.9375rem; margin-top:var(--s-1)}
.quicklink span{font-size:.8125rem; color:var(--text-muted)}

/* ---------- 9b. Icons ----------
   Stroke SVGs from assets/img/icons.svg, inlined per page as a sprite.
   They inherit colour from their parent, so no icon needs its own fill. */
.icon{width:24px; height:24px; flex:none; display:inline-block; vertical-align:middle; color:inherit}
.icon--sm{width:18px; height:18px}
.icon--lg{width:28px; height:28px}
.quicklink .icon{color:var(--brand)}
.card__icon .icon{color:var(--brand)}
.card__icon.is-gold .icon{color:var(--accent-text)}
.card__icon.is-sand .icon{color:var(--teal-800)}
.btn .icon{width:20px; height:20px}
.site-footer .icon{color:var(--gold-300)}

/* ---------- 10. Cards ---------- */
.card{background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:var(--s-6); box-shadow:var(--e-1)}
.card h3{margin-bottom:var(--s-2)}
.card p{font-size:.9375rem}
.card__icon{width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center;
  margin-bottom:var(--s-4); font-size:1.25rem; background:var(--brand-subtle)}
.card__icon.is-gold{background:var(--gold-50)}
.card__icon.is-sand{background:var(--sand-100)}

.stage{display:block; text-decoration:none; color:inherit;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-top:4px solid var(--brand); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--e-1); transition:transform .18s, box-shadow .18s}
/* Only lift on hover when the card is actually a link. The stage cards on
   the landing page are plain articles, so a lift would promise a click
   that does nothing. */
a.stage:hover{transform:translateY(-3px); box-shadow:var(--e-2); color:inherit}
.stage:nth-child(even){border-top-color:var(--accent)}
.age{display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  padding:var(--s-1) var(--s-3); border-radius:var(--r-full);
  background:var(--brand-subtle); color:var(--teal-800); margin-bottom:var(--s-3)}
.stage:nth-child(even) .age{background:var(--gold-50); color:var(--accent-text)}
.stage h3{margin-bottom:var(--s-2)}
.stage p{font-size:.875rem; color:var(--text-secondary)}

/* ---------- 11. Split / welcome ---------- */
.split{display:grid; gap:var(--s-8); align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr; gap:var(--s-16)} }

.byline{display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-6)}
.avatar{width:48px; height:48px; border-radius:var(--r-full); flex:none; display:grid; place-items:center;
  background:var(--surface-warm); color:var(--accent-text);
  font-family:var(--font-display); font-weight:800; font-size:.9375rem}
.byline cite{font-style:normal; display:block; font-family:var(--font-display);
  font-weight:800; color:var(--text-primary); font-size:.9375rem}
.byline span{font-size:.875rem; color:var(--text-muted)}

/* ---------- 12. Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); text-align:center}
.stat b{display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.75rem,6vw,2.75rem); line-height:1; color:var(--brand)}
.stat span{display:block; font-size:.8125rem; color:var(--text-muted); margin-top:var(--s-2)}
@media (min-width:600px){ .stat span{font-size:.875rem} }

/* ---------- 13. Motto band ---------- */
.motto-band{background:var(--surface-inverse); border-radius:var(--r-xl);
  padding:var(--s-10) var(--s-5); text-align:center}
.motto-band .motto{display:block; font-family:var(--font-display); font-weight:800;
  color:var(--accent); font-size:clamp(1.25rem,4.5vw,1.75rem); margin-bottom:var(--s-2)}
.motto-band p{color:#BFD6DE; font-size:.9375rem; max-width:42ch; margin-inline:auto}

/* ---------- 14. News ---------- */
.news-card{display:flex; flex-direction:column; overflow:hidden; padding:0;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); box-shadow:var(--e-1)}
.news-card .photo{border-radius:0; box-shadow:none}
.news-card__body{padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); flex:1}
.tag{align-self:flex-start; font-family:var(--font-display); font-weight:800;
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  padding:var(--s-1) var(--s-3); border-radius:var(--r-full);
  background:var(--brand-subtle); color:var(--teal-800)}
.news-card time{font-size:.8125rem; color:var(--text-muted)}
.news-card p{font-size:.9375rem}

/* ---------- 14b. Blog ---------- */
.page-banner{background:var(--surface-subtle); border-bottom:1px solid var(--border-subtle);
  padding-block:var(--s-10)}
.page-banner p{max-width:46ch; margin-top:var(--s-3)}
.crumbs{display:flex; align-items:center; gap:var(--s-2); font-size:.875rem;
  color:var(--text-muted); margin-bottom:var(--s-3)}
.crumbs a{color:var(--text-muted); text-decoration:none; display:inline-flex; align-items:center; gap:var(--s-1)}
.crumbs a:hover{color:var(--brand)}

.post-card{display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); box-shadow:var(--e-1); transition:transform .18s, box-shadow .18s}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--e-2); color:inherit}
.post-card__body{padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); flex:1}
.post-card h3{font-size:1.0625rem}
.post-card p{font-size:.9375rem; color:var(--text-secondary)}
.post-card time{font-size:.8125rem; color:var(--text-muted)}
.post-card .more{margin-top:auto; padding-top:var(--s-3); font-family:var(--font-display);
  font-weight:700; font-size:.875rem; color:var(--brand);
  display:inline-flex; align-items:center; gap:var(--s-2)}

/* Single post */
.post{max-width:68ch; margin-inline:auto}
.post__meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4)}
.post h1{font-size:clamp(1.75rem,5.5vw,2.75rem); margin-bottom:var(--s-4)}
.post .photo{margin-block:var(--s-6)}
.prose>*+*{margin-top:var(--s-5)}
.prose p{font-size:1.0625rem; line-height:1.75; color:var(--text-secondary)}
.prose h2{font-size:clamp(1.25rem,3.5vw,1.5rem); margin-top:var(--s-8)}
.prose ul{padding-left:1.25rem; display:grid; gap:var(--s-2)}
.prose li{font-size:1.0625rem; line-height:1.7}
.prose strong{color:var(--text-primary); font-weight:600}

.back-link{display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  font-family:var(--font-display); font-weight:700; font-size:.9375rem;
  color:var(--brand); text-decoration:none}
.back-link:hover{color:var(--brand-hover)}

/* ---------- 14c. Forms ----------
   Inputs are 16px minimum. Anything smaller makes iOS Safari zoom the page
   on focus, which on a phone feels like the form is fighting you. */
.form{display:grid; gap:var(--s-4)}
.field{display:grid; gap:var(--s-2)}
.field label{font-family:var(--font-display); font-weight:700; font-size:.875rem;
  color:var(--text-primary)}
.field input,.field select,.field textarea{
  width:100%; min-height:48px; padding:var(--s-3) var(--s-4);
  border:1.5px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--surface-page); color:var(--text-primary);
  font:inherit; font-size:1rem;
}
.field textarea{min-height:8rem; line-height:1.6; resize:vertical; padding-block:var(--s-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted)}
/* iOS Safari gives date and time inputs an intrinsic width that ignores
   width:100%, so on a phone they spill out of their card. Dropping the
   native appearance and allowing them to shrink keeps them in the frame. */
.field{min-width:0}
.field input{min-width:0; max-width:100%}
.field input[type="date"],.field input[type="time"]{
  -webkit-appearance:none; appearance:none; display:block; text-align:left;
}
.field input[type="date"]::-webkit-date-and-time-value{text-align:left}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--teal-100);
}
.field .hint{font-size:.8125rem; color:var(--text-muted)}
.field.is-error input,.field.is-error textarea{border-color:var(--error-700)}
.field.is-error .hint{color:var(--error-700)}
.form-note{font-size:.8125rem; color:var(--text-muted)}
/* Stacked on phones, with the same gap the form uses, side by side above
   620px. minmax(0,1fr) rather than 1fr, so a wide input cannot push its
   column wider than half. */
.field-row{display:grid; gap:var(--s-4)}
@media (min-width:620px){
  .field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- 14d. Contact list and map ---------- */
.contact-list{list-style:none; padding:0; display:grid; gap:var(--s-5)}
.contact-list li{display:flex; gap:var(--s-4); align-items:flex-start}
.contact-list .ci{flex:none; width:44px; height:44px; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--brand-subtle)}
.contact-list strong{display:block; font-family:var(--font-display); font-weight:700;
  color:var(--text-primary); margin-bottom:2px}
.contact-list a{display:inline-block; min-height:30px}

.map-embed{border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  overflow:hidden; aspect-ratio:16/10; background:var(--surface-warm)}
.map-embed iframe{display:block; width:100%; height:100%; border:0}

/* ---------- 14e. Tick list ----------
   The tick is an inline SVG rather than a character, so it stays consistent
   with the icon set and does not smuggle a dingbat into the copy. */
.ticklist{list-style:none; padding:0; display:grid; gap:var(--s-3)}
.ticklist li{display:flex; gap:var(--s-3); align-items:flex-start; font-size:.9375rem}
.ticklist li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:2px;
  border-radius:var(--r-full);
  background:var(--success-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315703F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- 14f. Tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border-subtle);
  border-radius:var(--r-md); background:var(--surface-page)}
table{border-collapse:collapse; width:100%; min-width:34rem}
th,td{text-align:left; padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border-subtle); font-size:.9375rem}
th{font-family:var(--font-display); font-weight:800; font-size:.8125rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--teal-800);
  background:var(--brand-subtle)}
tbody tr:last-child td{border-bottom:0}

/* numbered step cards on the admissions page */
.card__icon strong{font-family:var(--font-display); font-weight:800; color:var(--brand)}
.card__icon.is-gold strong{color:var(--accent-text)}
.card__icon.is-sand strong{color:var(--teal-800)}

/* ---------- 14g. Contact page layout ----------
   Default .split centres its columns, which leaves the shorter column
   floating and the map unable to reach the bottom. On the contact page the
   columns top align instead, and the map grows to close the gap. */
.split--stretch{align-items:stretch}
.map-note{margin-top:var(--s-3)}
/* Full width map band. Height rather than aspect ratio, so a wide desktop
   does not give it a letterbox three times taller than it needs. */
.map-embed--wide{aspect-ratio:auto; height:clamp(260px, 40vh, 440px)}

/* ---------- 15. Empty state ---------- */
.empty-state{background:var(--surface-page); border:2px dashed var(--border-strong);
  border-radius:var(--r-lg); padding:var(--s-8) var(--s-5); text-align:center}
.empty-state h3{margin-bottom:var(--s-2)}
.empty-state p{max-width:40ch; margin:0 auto var(--s-5); font-size:.9375rem}
.empty-state .btn-row{justify-content:center}

/* ---------- 16. CTA band ---------- */
.cta-band{background:var(--surface-inverse); border-radius:var(--r-xl);
  padding:var(--s-12) var(--s-5); text-align:center; box-shadow:var(--e-3)}
.cta-band h2{color:#fff; margin-bottom:var(--s-3)}
.cta-band p{color:#BFD6DE; max-width:42ch; margin:0 auto var(--s-6)}
.cta-band .btn-row{justify-content:center}

/* ---------- 17. Footer ---------- */
.site-footer{background:var(--surface-inverse); color:#B9C2D6; padding-block:var(--s-12) 0}
.footer-grid{display:grid; gap:var(--s-8)}
@media (min-width:600px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr} }
.site-footer h4{color:#fff; font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); margin-bottom:var(--s-4)}
.site-footer ul{list-style:none; padding:0; display:grid; gap:var(--s-2)}
.site-footer a{color:#B9C2D6; text-decoration:none; font-size:.9375rem;
  display:inline-flex; align-items:center; min-height:32px}
.site-footer a:hover{color:var(--gold-300)}
.site-footer .brand__name{color:#fff}
.site-footer .brand__tag{color:#8794AE}
.footer-about p{font-size:.9375rem; margin-top:var(--s-4); max-width:34ch}
.footer-bottom{margin-top:var(--s-10); border-top:1px solid rgba(255,255,255,.12);
  padding-block:var(--s-5); font-size:.8125rem;
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); justify-content:space-between}
.footer-bottom .motto-inline{color:var(--gold-300)}

/* ---------- 18. Mobile action bar ----------
   Fixed to the bottom under 768px only. Calling is the dominant contact
   method for this audience, so it stays in thumb reach at every scroll
   position rather than hiding in the menu. */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:var(--s-2);
  padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--surface-page); border-top:1px solid var(--border-subtle);
  box-shadow:var(--e-3);
}
.action-bar .btn{flex:1; min-height:48px; font-size:.875rem; padding-inline:var(--s-3)}
body{padding-bottom:var(--actionbar-h)}
@media (min-width:768px){
  .action-bar{display:none}
  body{padding-bottom:0}
}

/* ---------- 19. Reveal ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }

/* ---------- 20. Print ---------- */
@media print{
  .site-header,.site-footer,.action-bar,.cta-band,.motto-band{display:none !important}
  body{background:#fff; color:#000; padding-bottom:0}
}