/* ==========================================================================
   ACUdemy · Public school website
   Visual identity: blue-and-gold academic crest. Fraunces serif display for
   an established, warm voice; system sans for clear body. Navy authority,
   ACUdemy blue as brand accent, gold for achievement. Separate from the Metro
   admin UI on purpose — this speaks to visiting parents, not operators.
   ========================================================================== */

@font-face { font-family:'Fraunces'; font-weight:400; font-display:swap; src:url('../vendor/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:600; font-display:swap; src:url('../vendor/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:900; font-display:swap; src:url('../vendor/fonts/fraunces-900.woff2') format('woff2'); }

:root {
  --navy:#0f2747; --navy-2:#0a1c37;
  --blue:#0a7cff; --blue-deep:#0052b4;
  /* Filled buttons use a slightly deeper blue: white on #0a7cff is only
     3.93:1, which fails WCAG AA for text this size. #0d6ee0 gives 4.86:1
     and is visually indistinguishable as a brand colour. */
  --blue-btn:#0d6ee0;
  --gold:#e0a12b; --gold-deep:#b47c14; --gold-soft:#f6e6c2;
  --paper:#f8f7f3; --surface:#ffffff; --surface-2:#f2efe7;
  --ink:#13233d; --ink-soft:#5a6a82; --line:#e7e2d6;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap:1180px; --radius:14px;
  --shadow:0 2px 8px rgba(15,39,71,.06), 0 18px 40px rgba(15,39,71,.10);
  --shadow-sm:0 1px 2px rgba(15,39,71,.06), 0 6px 16px rgba(15,39,71,.07);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--blue-deep); text-decoration:none; }
/* Underline on hover is right for links inside running text, but wrong for
   nav items, buttons and cards — it made every control look like a hyperlink.
   So it is opt-in via .prose / [data-prose] rather than applied to every <a>. */
.prose a:hover, [data-prose] a:hover, p > a:hover, li > a:hover { text-decoration:underline; }
/* Buttons and nav are never underlined, whatever they are nested inside. */
.btn:hover, .btn:focus, nav a:hover, .m-nav a:hover { text-decoration:none; }

/* Visible keyboard focus everywhere — the previous rules left focus invisible. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid rgba(10,124,255,.45); outline-offset:2px; border-radius:6px;
}
h1,h2,h3 { font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.015em; color:var(--navy); margin:0 0 .5rem; text-wrap:balance; }
h1 { font-weight:900; }
p { margin:0 0 1rem; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.serif { font-family:var(--serif); }

/* eyebrow with a gold tick */
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem; font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 1rem;
}
.eyebrow::before { content:""; width:22px; height:2px; background:var(--gold); display:inline-block; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:650; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn--gold { background:var(--gold); color:var(--navy); box-shadow:0 6px 18px rgba(224,161,43,.35); }
.btn--gold:hover, .btn--gold:focus-visible {
  /* Use the darker version of the school's configured brand colour.
     This keeps hover text legible and avoids switching a green brand to yellow. */
  background:var(--gold-deep);
  color:#fff !important;
}
.btn--blue { background:var(--blue-btn); color:#fff; box-shadow:0 6px 18px rgba(10,124,255,.30); }
.btn--blue:hover { background:var(--blue-deep); }
.btn--ghost { background:transparent; border-color:rgba(15,39,71,.25); color:var(--navy); }
.btn--ghost:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.btn--onnavy { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn--onnavy:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn--lg { padding:1rem 1.8rem; font-size:1.05rem; }

/* ---- Header ----
   The brand and the menu share one row, so the school's own name — typed into
   Settings and unbounded in length — is what breaks this bar. Four rules keep
   it stable for any name:
     • the bar grows (min-height) rather than clipping what overflows it;
     • the brand is capped and allowed to shrink, so it can never starve the
       menu or push it off the row;
     • the name wraps to at most two lines and then ellipsises, instead of
       running under the menu or into the tagline;
     • the menu never shrinks — the brand absorbs the squeeze instead, because
       a half-width nav item reads as broken while a wrapped name does not. */
.site-header { position:sticky; top:0; z-index:40; background:rgba(248,247,243,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
/* padding-block, not the shorthand — .wrap owns the 24px side gutter and a
   `padding:.4rem 0` here would silently reset it and run the bar edge-to-edge. */
.site-header__bar { display:flex; align-items:center; gap:1.25rem; min-height:76px; padding-block:.4rem; }

.brand { display:flex; align-items:center; gap:.65rem; flex:0 1 auto; min-width:0; max-width:min(34%, 340px); }
/* Schools upload anything from a square crest to a wide wordmark, so bound
   both axes and letterbox — never trust the uploaded aspect ratio. */
.brand img { flex:none; height:42px; width:auto; max-width:120px; object-fit:contain; }
.brand__text { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.brand__name {
  font-family:var(--serif); font-weight:900; color:var(--navy);
  font-size:clamp(.95rem, 1.15vw, 1.24rem); line-height:1.14;
  /* Two lines is the most that fits beside a 42px crest inside the bar. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere;
}
.brand__tag {
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.3;
  color:var(--gold-deep); font-weight:700;
  /* Decorative: it truncates rather than adding a second line to the bar. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.nav { display:flex; align-items:center; gap:.15rem; margin-left:auto; flex:none; }
.nav a { font-weight:600; font-size:.92rem; color:var(--navy); padding:.5rem .62rem; border-radius:8px; white-space:nowrap; }
.nav a:hover { background:var(--surface-2); text-decoration:none; }
.nav a.is-active { color:var(--blue-deep); }
.nav a.is-active::after { content:""; display:block; height:2px; background:var(--gold); border-radius:2px; margin-top:2px; }
.nav .nav__cta { min-width:100px; justify-content:center; margin-left:.35rem; padding:.52rem .78rem; white-space:nowrap; }
.nav .nav__cta:hover, .nav .nav__cta:focus-visible {
  background:var(--gold-deep);
  color:#fff !important;
}
.nav .nav__portal {
  display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .72rem;
  border:1.5px solid var(--blue); border-radius:999px; color:var(--blue-deep) !important;
}
.nav .nav__portal:hover { border-color:var(--blue-deep); background:rgba(10,124,255,.08); }
.hamburger { display:none; flex:none; margin-left:auto; background:none; border:0; font-size:1.5rem; color:var(--navy); cursor:pointer; }

/* ---- Hero ---- */
.hero { padding:4.5rem 0 4rem; }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero h1 { font-size:clamp(2.5rem, 5vw, 3.9rem); }
.hero h1 .u { background:linear-gradient(transparent 62%, var(--gold-soft) 62%); padding:0 .05em; }
.hero__sub { font-size:1.2rem; color:var(--ink-soft); max-width:34ch; margin:1.2rem 0 1.8rem; }
.hero__cta { display:flex; gap:.8rem; flex-wrap:wrap; }
.hero__trust { display:flex; gap:2rem; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.hero__trust b { font-family:var(--serif); font-weight:900; font-size:1.8rem; color:var(--navy); display:block; line-height:1; }
.hero__trust span { font-size:.82rem; color:var(--ink-soft); }

/* hero visual: crest panel with floating cards */
.hero__visual { position:relative; }
.hero__panel {
  position:relative; border-radius:24px; padding:2.5rem; aspect-ratio:1/1.02; overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(10,124,255,.35), transparent 60%),
    linear-gradient(150deg, var(--navy), var(--navy-2));
  box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;
}
.hero__photo { position:absolute; inset:0; z-index:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.hero__panel::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(5,17,34,.84) 0%, rgba(7,24,48,.42) 44%, rgba(7,24,48,.08) 72%), radial-gradient(rgba(255,255,255,.11) 1.3px, transparent 1.3px); background-size:auto,20px 20px; }
.hero__crest { width:150px; position:relative; z-index:1; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
/* A school's own logo may be dark or have a white backing — a white card keeps
   it legible on the navy hero panel, whatever they upload. */
.hero__crest--logo { width:auto; max-width:230px; max-height:120px; background:#fff; padding:16px 22px; border-radius:16px; object-fit:contain; }
.hero__panel h3 { color:#fff; font-size:1.6rem; margin:1.2rem 0 .3rem; position:relative; z-index:1; }
.hero__panel p { color:#c6d5ea; margin:0; position:relative; z-index:1; font-size:.95rem; }
.seal {
  position:absolute; top:20px; right:20px; width:96px; height:96px; border-radius:50%;
  background:var(--gold); color:var(--navy); display:grid; place-items:center; text-align:center;
  font-weight:800; font-size:.72rem; line-height:1.15; text-transform:uppercase; letter-spacing:.05em;
  box-shadow:0 8px 20px rgba(0,0,0,.3); transform:rotate(-8deg); z-index:2;
}
.float-card {
  position:absolute; background:#fff; border-radius:12px; padding:.7rem .9rem; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:.6rem; z-index:3; font-size:.82rem;
}
.float-card b { font-family:var(--serif); font-weight:900; font-size:1.2rem; color:var(--navy); display:block; line-height:1; }
.float-card .ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; flex:none; }
.float-card--tl { top:32%; left:-26px; } .float-card--br { bottom:8%; right:-20px; }

/* Full-width admissions hero: the photograph carries the welcome, the left
   side deliberately remains dark and calm so the school name is never lost. */
.hero { position:relative; isolation:isolate; min-height:630px; display:flex; align-items:center; overflow:hidden; padding:5rem 0 4rem; background:var(--navy-2); }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg, rgba(5,18,35,.98) 0%, rgba(9,29,55,.94) 34%, rgba(10,31,57,.65) 57%, rgba(10,28,51,.13) 100%); }
.hero__slides { position:absolute; z-index:-2; inset:0; }
/* All slides stacked; cross-fade between them. object-fit:cover guarantees a
   full-bleed fill with no stretching, whatever the uploaded image size. */
.hero__slides .hero__photo { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; opacity:0; transition:opacity 1.1s ease; }
.hero__slides .hero__photo.is-active { opacity:1; }
/* Single legacy photo (no slider wrapper) keeps its old behaviour. */
.hero > .hero__photo { position:absolute; z-index:-2; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.hero__grid { display:block; width:100%; }
.hero__content { max-width:650px; color:#fff; }
.hero .eyebrow { color:var(--gold); }
.hero h1 { color:#fff; font-size:clamp(2.65rem, 5vw, 4.2rem); text-shadow:0 3px 24px rgba(0,0,0,.32); }
.hero h1 .u { background:linear-gradient(transparent 62%, rgba(224,161,43,.55) 62%); }
.hero__sub { font-size:1.18rem; color:#e1eaf5; max-width:38ch; }
.hero .btn--ghost { border-color:rgba(255,255,255,.65); color:#fff; }
.hero .btn--ghost:hover { border-color:#fff; background:rgba(255,255,255,.12); }
.hero > .hero__seal { z-index:2; }
.hero__visual { display:none; }

/* Marketing carousel: every slide tells a complete school-management story.
   The images intentionally keep their left edge quiet; this veil still protects
   the copy if HQ later replaces a background with a brighter photograph. */
.marketing-hero::after { background:linear-gradient(90deg, rgba(5,18,35,.98) 0%, rgba(8,25,48,.94) 34%, rgba(8,27,51,.66) 59%, rgba(8,26,49,.12) 100%); }
.marketing-hero__copies { position:relative; min-height:292px; }
.marketing-hero__copy { position:absolute; inset:0; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .5s ease, transform .5s ease; }
.marketing-hero__copy.is-active { position:relative; opacity:1; transform:none; pointer-events:auto; }
.marketing-hero__copy h1 { max-width:15ch; margin-bottom:0; }
.marketing-hero__controls { display:flex; align-items:center; gap:.7rem; margin-top:1.8rem; color:#d8e3f2; }
.marketing-hero__arrow { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; background:rgba(5,18,35,.28); cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .18s ease; }
.marketing-hero__arrow:hover, .marketing-hero__arrow:focus-visible { color:var(--navy); background:#fff; border-color:#fff; transform:translateY(-1px); }
.marketing-hero__tabs { display:flex; align-items:center; gap:.42rem; }
.marketing-hero__tab { width:38px; height:5px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.32); cursor:pointer; transition:width .25s ease, background .25s ease; }
.marketing-hero__tab.is-active { width:62px; background:var(--gold); }
.marketing-hero__tab:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.marketing-hero__counter { min-width:42px; font-size:.74rem; font-weight:800; letter-spacing:.08em; color:#fff; font-variant-numeric:tabular-nums; }

/* ---- Section scaffolding ---- */
.section { padding:4.5rem 0; }
.section--paper2 { background:var(--surface-2); }
.section__head { max-width:640px; margin-bottom:2.5rem; }
.section__head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section__head h2 { font-size:clamp(1.9rem, 3.5vw, 2.6rem); }
.section__head p { color:var(--ink-soft); font-size:1.1rem; margin:0; }

/* stat band */
.band { background:linear-gradient(150deg, var(--navy), var(--navy-2)); color:#fff; }
.band__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:3rem 0; text-align:center; }
.band__grid b { font-family:var(--serif); font-weight:900; font-size:2.8rem; color:var(--gold); display:block; line-height:1; }
.band__grid span { color:#b9c8de; font-size:.95rem; }

/* school community: three perspectives, deliberately kept as one editorial story */
.community { padding:5rem 0; background:var(--surface); }
.community__grid { display:grid; grid-template-columns:1.06fr .94fr 1.06fr; gap:1.25rem; align-items:start; }
.community-card { position:relative; min-height:510px; overflow:hidden; border-radius:18px; background:var(--navy); box-shadow:var(--shadow-sm); isolation:isolate; }
.community-card--teachers { margin-top:2.5rem; }
.community-card img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .45s ease; }
.community-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 28%, rgba(6,20,40,.32) 54%, rgba(6,20,40,.92) 100%); }
.community-card:hover img { transform:scale(1.035); }
.community-card__body { position:absolute; inset:auto 0 0; z-index:1; padding:1.35rem 1.5rem 1.5rem; color:#fff; background:linear-gradient(135deg, rgba(5,19,38,.96), rgba(8,35,67,.9)); border-top:1px solid rgba(255,255,255,.2); }
.community-card__index { display:inline-block; margin-bottom:.55rem; color:#f6cf72; font-size:.73rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.community-card h3 { margin:0 0 .45rem; color:#fff; font-size:1.45rem; }
.community-card p { margin:0; max-width:30ch; color:#fff; font-size:.93rem; line-height:1.55; }

/* feature cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.feature { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.feature:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.feature__ic { width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem; color:#fff; margin-bottom:1.1rem; }
.feature h3 { font-size:1.25rem; margin-bottom:.4rem; }
.feature p { color:var(--ink-soft); margin:0; font-size:.98rem; }

/* colour helpers for icon chips */
.ic-blue{background:linear-gradient(135deg,#3a9bff,#0052b4)} .ic-gold{background:linear-gradient(135deg,#f0c25a,#c8890f)}
.ic-navy{background:linear-gradient(135deg,#2a4d7a,#0d2244)} .ic-green{background:linear-gradient(135deg,#3fce8b,#0f7a45)}

/* academics preview */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.proglist { list-style:none; padding:0; margin:1.2rem 0 0; }
.proglist li { display:flex; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.proglist li:last-child { border-bottom:1px solid var(--line); }
.proglist .k { font-family:var(--serif); font-weight:900; color:var(--gold-deep); font-size:1.1rem; flex:none; width:84px; }
.proglist .v b { color:var(--navy); }
.proglist .v span { color:var(--ink-soft); font-size:.92rem; }

/* ---- Newsroom ---------------------------------------------------------- */
.post__cat { display:block; font-size:.71rem; font-weight:800; letter-spacing:.105em; text-transform:uppercase; color:var(--gold-deep); }
.post__date { display:block; font-size:.81rem; color:var(--ink-soft); margin-top:.8rem; }
.post__date i { margin-right:.28rem; }
.post__date .fa-arrow-right { margin-left:.55rem; margin-right:0; color:var(--blue); }

/* Home: feature one story, with a concise rail for the rest. */
.home-news { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr); gap:1.45rem; align-items:stretch; }
.home-news__lead { min-height:370px; position:relative; overflow:hidden; border-radius:18px; background:var(--navy); box-shadow:var(--shadow); color:#fff; display:flex; align-items:flex-end; }
.home-news__lead::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,17,33,.93) 0%,rgba(4,17,33,.45) 47%,rgba(4,17,33,.04) 75%); }
.home-news__lead img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.home-news__lead:hover img { transform:scale(1.035); }
.home-news__lead-copy { position:relative; z-index:1; padding:1.8rem; max-width:64ch; }
.home-news__lead .post__cat { color:#f2c86b; }
.home-news__lead h3 { color:#fff; font-size:clamp(1.55rem,2.5vw,2.2rem); line-height:1.08; margin:.42rem 0 .55rem; }
.home-news__lead p { color:#e1ebf7; margin:0; max-width:57ch; }
.home-news__lead .post__date { color:#f0f5fb; }
.home-news__briefs { display:grid; gap:1rem; align-content:stretch; }
.news-brief { min-height:calc(50% - .5rem); display:grid; grid-template-columns:128px minmax(0,1fr); gap:1rem; padding:.75rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.news-brief:hover,.news-card:hover,.news-lead:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.news-brief img { width:100%; height:100%; min-height:118px; object-fit:cover; border-radius:10px; }
.news-brief > span { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.news-brief strong { color:var(--navy); font-family:var(--serif); font-size:1.12rem; line-height:1.08; margin:.32rem 0 .45rem; }
.news-brief small { color:var(--ink-soft); font-size:.79rem; }

/* Listing: all uploads share an intentional aspect ratio. */
.news-lead { display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; margin-bottom:1.8rem; }
.news-lead__image { min-height:315px; overflow:hidden; background:var(--navy); }
.news-lead__image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-lead:hover img { transform:scale(1.025); }
.news-lead__copy { padding:2.15rem; align-self:center; }
.news-lead h2 { margin:.5rem 0 .7rem; font-size:clamp(1.65rem,2.7vw,2.35rem); line-height:1.08; }
.news-lead p,.news-card p { color:var(--ink-soft); margin:0; }
.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.45rem; }
.news-card { display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.news-card__image { aspect-ratio:16/10; overflow:hidden; background:var(--navy); }
.news-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-card:hover img { transform:scale(1.035); }
.news-card__body { padding:1.3rem 1.35rem 1.4rem; display:flex; flex:1; flex-direction:column; }
.news-card h2 { font-size:1.25rem; line-height:1.12; margin:.42rem 0 .55rem; }
.news-card p { font-size:.94rem; }
.news-card .post__date { margin-top:auto; padding-top:1rem; }

/* public listing pagination */
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; margin:2.4rem 0 .2rem; }
.pagination__link { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-width:2.55rem; min-height:2.55rem; padding:.45rem .75rem; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--navy); font-size:.9rem; font-weight:700; box-shadow:var(--shadow-sm); }
.pagination__link:hover { background:var(--surface-2); border-color:var(--blue); text-decoration:none; }
.pagination__link.is-current { background:var(--navy); border-color:var(--navy); color:#fff; cursor:default; }
.pagination__gap { padding:.35rem .12rem; color:var(--ink-soft); font-weight:700; }

/* CTA band */
.cta { background:linear-gradient(150deg, var(--navy), var(--navy-2)); color:#fff; border-radius:24px; padding:3.5rem; text-align:center; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; top:-40%; right:-10%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(224,161,43,.35), transparent 70%); }
.cta h2 { color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); position:relative; }
.cta p { color:#c6d5ea; max-width:48ch; margin:.6rem auto 1.8rem; position:relative; }
.cta__btns { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; position:relative; }

/* ---- Content page (about/academics) ---- */
.page-hero { background:linear-gradient(150deg, var(--navy), var(--navy-2)); color:#fff; padding:4rem 0 3.5rem; }
.page-hero .eyebrow { color:var(--gold); }
.page-hero h1 { color:#fff; font-size:clamp(2.2rem,4.5vw,3.2rem); }
.page-hero p { color:#c6d5ea; font-size:1.15rem; max-width:56ch; margin:0; }
.prose { max-width:none; margin:0; }
.prose h2 { font-size:1.7rem; margin:2.2rem 0 .6rem; }
.prose h3 { font-size:1.25rem; margin:1.6rem 0 .4rem; color:var(--blue-deep); }
.prose p, .prose li { color:#33445e; }
.prose ul { padding-left:1.2rem; } .prose li { margin-bottom:.5rem; }
.prose ul li::marker { color:var(--gold); }

/* Article page */
.article-back { display:inline-flex; align-items:center; gap:.45rem; color:#d7e6f7; font-size:.9rem; font-weight:700; margin-bottom:1.35rem; }
.article-back:hover { color:#fff; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,330px); gap:3.2rem; align-items:start; }
.article-story { min-width:0; }
.article-story__cover { margin:0 0 1.75rem; overflow:hidden; border-radius:18px; aspect-ratio:16/9; background:var(--navy); box-shadow:var(--shadow-sm); }
.article-story__cover img { width:100%; height:100%; object-fit:cover; }
.article-story__intro { color:var(--navy) !important; font-family:var(--serif); font-size:1.32rem; line-height:1.45; border-left:3px solid var(--gold); padding-left:1.2rem; margin:0 0 1.55rem; }
.article-story__return { margin-top:2.5rem; }
.article-rail { display:grid; gap:1.5rem; }
.rail-section { border-top:3px solid var(--navy); padding-top:1rem; }
.rail-section--recent { border-top-color:var(--gold); }
.rail-section__eyebrow { color:var(--gold-deep); margin:0 0 .2rem; font-size:.7rem; font-weight:800; letter-spacing:.105em; text-transform:uppercase; }
.rail-section h2 { font-size:1.35rem; margin:0 0 .95rem; }
.rail-story { display:grid; grid-template-columns:82px minmax(0,1fr); gap:.8rem; padding:.72rem 0; border-top:1px solid var(--line); }
.rail-story img { width:82px; aspect-ratio:1/1; object-fit:cover; border-radius:9px; }
.rail-story strong { color:var(--navy); display:block; font-family:var(--serif); font-size:1rem; line-height:1.12; }
.rail-story small,.recent-news small { display:block; margin-top:.28rem; color:var(--ink-soft); font-size:.76rem; }
.recent-news { list-style:none; padding:0; margin:0; counter-reset:recent; }
.recent-news li { counter-increment:recent; border-top:1px solid var(--line); }
.recent-news a { display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.25rem .6rem; padding:.82rem 0; color:var(--navy); }
.recent-news a::before { content:"0" counter(recent); grid-row:1 / span 2; color:var(--gold-deep); font-family:var(--serif); font-weight:900; font-size:1.05rem; }
.recent-news span { font-family:var(--serif); font-size:1.02rem; font-weight:700; line-height:1.1; }
.recent-news small { margin:0; }

/* ---- Contact ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-weight:650; font-size:.9rem; margin-bottom:.4rem; color:var(--navy); }
.field input, .field textarea { width:100%; padding:.85rem 1rem; font:inherit; font-size:1rem; background:var(--surface); border:1.5px solid var(--line); border-radius:10px; outline:0; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
/* Radios & checkboxes are controls, not full-width text fields. */
.field input[type=radio], .field input[type=checkbox] { width:auto; flex:none; padding:0; margin:0; accent-color:var(--blue); }
.field input:focus, .field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,124,255,.14); }
.field textarea { min-height:140px; resize:vertical; }
.info-row { display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.info-row .ic { width:44px; height:44px; border-radius:11px; background:var(--surface-2); display:grid; place-items:center; color:var(--blue-deep); font-size:1.1rem; flex:none; }
.info-row b { color:var(--navy); display:block; }
.info-row span { color:var(--ink-soft); font-size:.95rem; }

.notice { padding:1rem 1.2rem; border-radius:12px; margin-bottom:1.4rem; font-weight:550; }
.notice--ok { background:#e6f6ec; color:#0f7a45; border:1px solid #b9e6c9; }
.notice--err { background:#fdeaea; color:#c23b45; border:1px solid #f4c7cb; }
.err-text { color:#c23b45; font-size:.85rem; margin-top:.3rem; }

/* ---- Footer ---- */
.site-footer { background:var(--navy-2); color:#c6d5ea; padding:3.5rem 0 1.5rem; margin-top:2rem; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer h4 { color:#fff; font-family:var(--sans); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1rem; }
.site-footer a { color:#c6d5ea; display:block; padding:.25rem 0; font-size:.95rem; }
.site-footer a:hover { color:#fff; }
.footer-brand__name { font-family:var(--serif); font-weight:900; color:#fff; font-size:1.3rem; }
.footer-brand p { font-size:.92rem; margin-top:.6rem; max-width:32ch; }
.footer-social { display:flex; gap:.6rem; margin-top:1rem; }
.footer-social a { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; padding:0; }
.footer-social a:hover { background:var(--gold); color:var(--navy); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:1.4rem; font-size:.85rem; color:#8ba0bd; flex-wrap:wrap; gap:.5rem; }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ---- Responsive ---- */
/* The header collapses on its own schedule, ahead of the page grids below.
   Seven links plus Portal and Apply Now stop fitting beside a real school
   name well above 940px, so the bar gets two steps of its own: tighten the
   menu first, then hand it to the hamburger while there is still room to
   spare — a menu crammed against the crest looks worse than a menu button. */
@media (max-width:1180px){
  .site-header__bar{gap:.9rem;}
  .brand{max-width:min(32%, 300px);}
  .brand img{height:38px; max-width:104px;}
  .nav{gap:.05rem;}
  .nav a{font-size:.875rem; padding:.45rem .5rem;}
  .nav .nav__portal{padding:.34rem .62rem;}
  .nav .nav__cta{min-width:96px; margin-left:.3rem; padding:.5rem .7rem;}
}
@media (max-width:1024px){
  .nav{display:none;}
  .hamburger{display:block;}
  /* Menu gone → give the name the full bar, minus the hamburger. */
  .brand{max-width:none;}
  .brand img{height:42px; max-width:120px;}
  /* top:100% tracks the bar's real height, so the panel stays flush even
     when a two-line school name makes the header taller than 76px. */
  .nav.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line); padding:1rem; gap:.2rem; box-shadow:var(--shadow);}
  /* Restore comfortable touch targets: the tightening above is for a
     horizontal bar, not for a stacked panel with room to breathe. */
  .nav.open a{font-size:1rem; padding:.7rem .9rem;}
  /* Stretched full-bleed, the active item's gold underline reads as a divider
     between menu rows. In the stacked panel mark it with a left accent. */
  .nav.open a.is-active{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--gold);}
  .nav.open a.is-active::after{display:none;}
  .nav.open .nav__portal{justify-content:center;}
  .nav.open .nav__cta{margin:.5rem 0 0; min-width:0;}
}
@media (max-width:940px){
  .hero__grid,.two-col,.contact-grid{grid-template-columns:1fr; gap:2.5rem;}
  .hero__grid{display:block;}
  .hero{min-height:590px;}
  .hero__visual{max-width:440px;margin:0 auto;width:100%;}
  .cards,.news-grid,.community__grid{grid-template-columns:1fr 1fr;}
  .home-news,.article-layout{grid-template-columns:1fr;}
  .home-news__briefs{grid-template-columns:1fr 1fr;}
  .news-lead{grid-template-columns:1fr;}
  .news-lead__image{min-height:280px;}
  .article-rail{grid-template-columns:1fr 1fr;}
  .community-card--teachers{margin-top:0;}
  .community-card--parents{grid-column:1 / -1; min-height:430px;}
  .band__grid{grid-template-columns:1fr 1fr; gap:2rem;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  /* Nav collapse now lives in its own 1024px step above. */
}
@media (max-width:560px){
  .cards,.news-grid,.community__grid,.home-news__briefs,.article-rail{grid-template-columns:1fr;}
  .home-news__lead{min-height:360px;}
  .home-news__lead-copy{padding:1.35rem;}
  .news-brief{min-height:128px;}
  .news-lead__image{min-height:220px;}
  .news-lead__copy{padding:1.5rem;}
  .hero{min-height:550px;padding:3.4rem 0 2.5rem;align-items:flex-start;}
  .hero > .hero__photo{object-position:68% center;}
  .hero::after{background:linear-gradient(90deg,rgba(5,18,35,.97) 0%,rgba(9,29,55,.91) 64%,rgba(10,28,51,.4) 100%);}
  .marketing-hero::after{background:linear-gradient(90deg,rgba(5,18,35,.98) 0%,rgba(7,24,47,.94) 65%,rgba(7,24,47,.46) 100%);}
  .marketing-hero .hero__photo{object-position:65% center;}
  .marketing-hero__copies{min-height:305px;}
  .marketing-hero__copy h1{max-width:12ch;}
  .marketing-hero__controls{margin-top:1.35rem;}
  .marketing-hero__tab{width:29px;}
  .marketing-hero__tab.is-active{width:46px;}
  .hero h1{font-size:clamp(2.3rem,9vw,2.75rem);}
  .hero__sub{font-size:1.05rem;margin:1rem 0 1.45rem;}
  .community{padding:3.7rem 0;}
  .community-card,.community-card--parents{min-height:440px; grid-column:auto;}
  .cta,.hero__panel{padding:2rem;}
  .section{padding:3.2rem 0;}
}

/* ---- Pricing plans -------------------------------------------------------
   Previously a generic .feature card with inline styles: the price, the plan
   name and the body copy all competed, the "Most popular" badge overlapped the
   card edge, and the three CTAs sat at different heights when blurbs wrapped.
   Cards are now equal-height flex columns with the CTA pinned to the bottom. */
.plan {
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.6rem 1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.plan--featured { border:2px solid var(--blue); box-shadow:var(--shadow); }
.plan__badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--navy); font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:999px;
  white-space:nowrap; box-shadow:0 4px 12px rgba(224,161,43,.4);
}
.plan__name { font-size:1.15rem; margin:0 0 .35rem; color:var(--ink-soft); font-family:var(--sans); font-weight:700; }
.plan__price { font-family:var(--serif); font-weight:900; font-size:2.5rem; color:var(--navy); line-height:1.05; }
.plan__per { font-size:.85rem; font-weight:400; color:var(--ink-soft); font-family:var(--sans); }
.plan__blurb { margin:.6rem 0 1rem; color:var(--ink-soft); font-size:.94rem; }
.plan__list { list-style:none; margin:0 0 1.4rem; padding:0; }
.plan__list li { display:flex; align-items:flex-start; gap:.6rem; padding:.42rem 0; font-size:.94rem; }
.plan__list i { color:var(--good); margin-top:.3rem; flex:none; }
/* margin-top:auto pins every CTA to the card bottom, so they line up across
   the row even when one plan's blurb wraps onto a second line. */
.plan__cta { margin-top:auto; width:100%; justify-content:center; }

@media (max-width:860px) {
  /* Stack rather than squeeze: three columns below ~860px made the price and
     the button text wrap awkwardly. */
  .cards[style*="repeat(3"] { grid-template-columns:1fr !important; max-width:420px !important; }
  .plan--featured { order:-1; }   /* lead with the recommended plan on phones */
}