/* ==========================================================================
   Sunfire High School — main stylesheet
   1. Tokens          2. Base & reset       3. Layout & utilities
   4. Typography      5. Header & nav       6. Buttons
   7. Components      8. Footer             9. Motion & reveal
   10. Dev-only       11. Media queries
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root{
  /* Brand palette */
  --navy:#2C328C;--navy-deep:#232a78;--navy-bright:#343aa0;
  --yellow:#F5D73A;--yellow-lt:#FCEB8B;--yellow-hover:#f7de5c;--orange:#F0782A;
  --gray:#CFCAD0;--gray-lt:#F2F1F4;--charcoal:#333333;--white:#fff;
  /* Ink (text) colors */
  --ink-soft:#4a4652;--ink-faint:#8b8794;
  --on-navy:#e6e4fb;          /* body text on navy backgrounds */
  --on-navy-soft:#d9d7ee;     /* secondary text on navy */
  --on-yellow:#5a4f16;        /* body text on yellow backgrounds */
  --footer-ink:#c7c4e0;--footer-ink-dim:#9d9ac0;
  --pending-bg:#fff6d9;--pending-ink:#8a6d00;
  --border:#eceaf0;           /* card & component hairlines */
  /* Elevation & shape */
  --shadow:0 10px 30px rgba(44,50,140,.14);
  --shadow-lift:0 16px 38px rgba(44,50,140,.20);
  --radius:18px;--radius-sm:14px;
  --header-h:76px;
  /* Type scale — one size per role, fluid at the top end */
  --fs-xs:.78rem;             /* kickers, uppercase labels, fine print */
  --fs-sm:.875rem;            /* captions, roles, meta text */
  --fs-base:.95rem;           /* component body text (cards, tables, FAQ) */
  --fs-md:1.05rem;            /* emphasized body, FAQ questions */
  --fs-lead:1.125rem;         /* leads, hero subtitles, pull quotes */
  --fs-h3:1.125rem;           /* card / sub-item titles */
  --fs-h3-lg:1.3rem;          /* large card titles */
  --fs-title:1.4rem;          /* oversized feature titles */
  --fs-h2:clamp(1.65rem,3vw,2.1rem);
  --fs-h1:clamp(1.75rem,3.2vw,2.25rem); /* sized so the longest banner/page-head heading stays on ONE line at desktop (client feedback 2026-07-22) */
  --fs-display:clamp(2.25rem,5.5vw,3.2rem);
  /* Spacing scale */
  --sect-y:clamp(56px,7vw,84px);        /* section vertical padding */
  --sect-y-tight:clamp(40px,4.5vw,56px);
  --stack:46px;               /* gap above a new sub-heading mid-section */
  --gap:24px;--gap-lg:32px;   /* grid gutters */
  /* Widths */
  --w-wide:1200px;--w-narrow:900px;
  --w-content:840px;          /* prose components: FAQ, tables, quotes */
  --measure:70ch;             /* comfortable line length for body text */
}

/* 2. Base & reset -------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--charcoal);line-height:1.6;background:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--yellow);padding:10px;z-index:99;border-radius:6px}

/* 3. Layout & utilities --------------------------------------------------- */
.wrap{max-width:var(--w-wide);margin:0 auto;padding:0 clamp(20px,4.5vw,40px)}
.wrap-narrow{max-width:var(--w-narrow)}
section{padding:var(--sect-y) 0}
section.tight{padding:var(--sect-y-tight) 0}
.band{background:var(--gray-lt)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.mt-1{margin-top:18px}.mt-2{margin-top:26px}.mt-3{margin-top:32px}.mt-4{margin-top:40px}
.m-0{margin:0}
.btn-block{width:100%}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 4. Typography ----------------------------------------------------------- */
/* Leading accent dash removed per client feedback (2026-07-21): the client read
   it as an em-dash on eyebrow/section titles and asked for it gone site-wide. */
.kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.kicker.y{color:var(--yellow)}
.h-lg{font-size:var(--fs-h2);font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.01em;margin-bottom:18px}
h2.h-lg{margin-top:0}
h3{color:var(--navy);font-size:var(--fs-h3);line-height:1.3}
p{margin-bottom:14px}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);max-width:var(--measure)}
.card-title-lg{font-size:var(--fs-title)}
/* Larger titles inside the Mission "3 boxes" per client feedback (2026-07-21). */
.grid3 .card-title-lg{font-size:clamp(1.6rem,2.2vw,1.9rem);line-height:1.2}
.tc-navy{color:var(--navy)}
.tc-orange{color:var(--orange)}
.hl{background:var(--yellow);padding:0 .18em;border-radius:4px;color:var(--charcoal)}
.link-inline{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link-inline:hover{color:var(--orange)}
/* Attention box: separates "just talking to us" from "formally enrolling"
   (client feedback 2026-07-23, apply page). White on navy so it stands apart
   from the yellow form button above it (client feedback 2026-07-24). */
.callout{background:var(--navy);border-left:5px solid var(--orange);border-radius:var(--radius-sm);padding:18px 22px;color:#fff;font-size:var(--fs-md);font-weight:600;box-shadow:var(--shadow)}
.callout .link-inline{color:#fff}
.callout .link-inline:hover{color:var(--yellow)}
/* HubSpot Meetings embed (tour page): a centered tile wide enough for the
   scheduler's side-by-side layout; corners clipped, navy behind so the load-in
   doesn't flash white. min-height reserves space until the script sizes it. */
.meetings-iframe-container{max-width:880px;margin:0 auto;min-height:660px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--navy)}
#main .meetings-iframe-container{margin-block-start:56px}
/* Centered section intro (.sc group): keep the measure-capped lead centered too */
.sc .lead{margin-inline:auto}
/* Heading rhythm: a sub-heading that follows content mid-section gets clear
   breathing room; one sitting directly under its kicker stays snug. This keeps
   long document-style pages (compliance, assessments) evenly spaced without
   per-element margin utilities. Scoped to #main to outrank the block-rhythm
   neutralizer below. */
#main :is(section,.sf-section) * + .h-lg{margin-top:var(--stack)}
#main :is(section,.sf-section) .kicker + .h-lg{margin-top:0}
#main :is(section,.sf-section) * + .kicker{margin-top:var(--stack)}

/* 5. Header & navigation --------------------------------------------------- */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 12px rgba(44,50,140,.08);transition:background .3s ease,box-shadow .3s ease}
/* Scrolled: frosted-glass settle — translucent blur + hairline + deeper shadow */
header.scrolled{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);
  box-shadow:0 1px 0 rgba(44,50,140,.06),0 6px 24px rgba(44,50,140,.14)}
/* Header height stays constant so a scroll never reflows the page (which would
   feed back into the scroll handler and make the header shudder). The scrolled
   state changes only the shadow/backdrop, which doesn't affect layout. */
.bar{display:flex;align-items:center;gap:22px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px}
/* Logo is sized by HEIGHT with auto width, so it fits any aspect ratio — a
   round seal (square) or a horizontal wordmark — without cropping. Swappable
   from Customizer > Site Identity > Logo. */
/* Logo bumped to 60px per client feedback (2026-07-28);
   size is CONSTANT — no scroll shrink (client feedback 2026-07-22). */
.brand img{height:60px;width:auto;max-width:240px;object-fit:contain}
.brand .bt{font-weight:800;font-size:18px;line-height:1.4;color:var(--navy)}
.brand .bt small{display:block;font-weight:600;font-size:.62rem;letter-spacing:.16em;color:var(--orange)}
nav.top{display:flex;gap:2px;margin-left:6px}
.navitem{position:relative}
.navitem>a,.navitem>button{position:relative;display:flex;align-items:center;gap:6px;background:none;border:none;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--navy);padding:12px 13px;border-radius:8px;cursor:pointer;transition:background .18s ease,color .18s ease}
.navitem>a:hover,.navitem>button:hover,.navitem.open>button{background:var(--gray-lt)}
/* Per client feedback (2026-07-21): the top nav uses a subtle grey background for
   hover/open/current — not the yellow underline (which was removed here). */
.navitem>a.on,.navitem>button.on{background:var(--gray-lt);font-weight:700}
.navitem .cx{font-size:.58rem;color:var(--orange);transition:transform .24s cubic-bezier(.33,1,.68,1)}
.navitem.open .cx{transform:rotate(180deg)}
@media(hover:hover){
  .navitem:hover>button{background:var(--gray-lt)}
  .navitem:hover>button .cx{transform:rotate(180deg)}
}
/* Mega panel. Opens with a soft rise + settle; the close transition carries a
   short grace delay so grazing out and back never flickers it shut. The
   ::before strip bridges the visual gap below the trigger so hover is never
   lost crossing into the panel. */
.mega{position:absolute;top:calc(100% + 10px);left:-6px;background:#fff;border-radius:16px;
  box-shadow:0 2px 8px rgba(44,50,140,.06),0 18px 44px rgba(44,50,140,.18);border:1px solid var(--border);
  padding:10px;min-width:284px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top left;
  transition:opacity .22s cubic-bezier(.33,1,.68,1) .14s,transform .22s cubic-bezier(.33,1,.68,1) .14s,visibility 0s linear .36s}
.mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
/* Caret tying the panel to its trigger */
.mega::after{content:"";position:absolute;top:-6px;left:28px;width:11px;height:11px;background:#fff;
  border-left:1px solid var(--border);border-top:1px solid var(--border);border-top-left-radius:3px;transform:rotate(45deg)}
.navitem:nth-last-child(-n+2) .mega{left:auto;right:-6px;transform-origin:top right}
.navitem:nth-last-child(-n+2) .mega::after{left:auto;right:28px}
@media(hover:hover){
  .navitem:hover .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition-delay:.05s,.05s,0s}
}
.navitem.open .mega,.navitem .mega:focus-within{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition-delay:.05s,.05s,0s}
.mega-wide{display:flex;gap:18px;min-width:560px}
.mega-wide .mcol{flex:1;min-width:238px}
.mega-wide .mcol+.mcol{border-left:1px solid var(--gray-lt);padding-left:18px}
.mega .mhead{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);padding:8px 12px 6px;display:flex;align-items:center;gap:8px}
.mega .mhead::after{content:"";height:1px;flex:1;background:var(--gray-lt)}
.mega a{display:block;padding:11px 12px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--navy);
  transition:background .16s ease,transform .16s ease}
.mega a:hover{background:var(--gray-lt);transform:translateX(3px)}
.mega a small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-faint);margin-top:1px;transition:color .16s ease}
.mega a:hover small{color:var(--ink-soft)}
.spacer{margin-left:auto}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:none;border-radius:10px;cursor:pointer}
.nav-toggle span{display:block;height:3px;width:100%;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--yellow);z-index:60;pointer-events:none}

/* 6. Buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-family:inherit;font-weight:700;border-radius:30px;padding:12px 22px;font-size:.9rem;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(44,50,140,.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{background:var(--yellow);color:var(--charcoal)}
.btn-primary:hover{background:var(--yellow-hover)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-ghost-lt{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost-lt:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* 6b. Block-editor bridge --------------------------------------------------- */
/* Lets page content authored with core blocks reproduce the section design.
   A Group block with .sf-section behaves like a <section>; a .wrap Group
   inside it constrains width exactly like the hand-written markup. */
.sf-section{padding:var(--sect-y) 0}
.sf-section.tight{padding:var(--sect-y-tight) 0}
/* Neutralize core's 24px block rhythm inside our sections so our own element
   margins (kicker/heading/lead) drive spacing, matching the static design.
   Scoped to #main so it outranks core's :root :where(...) global rule. */
#main .sf-section > *,
#main .sf-section :where(.is-layout-flow, .is-layout-constrained) > *{margin-block-start:0}
/* Core wraps images in <figure>; keep them flush like bare <img>. */
.sf-section .wp-block-image{margin:0}
/* Home front page: its hero/cards/split/testimonial frames position the <img>
   itself (absolute / clip-path / object-fit). Core wraps the img in a <figure>,
   so dissolve that box with display:contents and the existing frame img rules
   apply exactly as in the static design (and the image stays a swappable block). */
.blob .mask .wp-block-image,
.fcard .top .wp-block-image,
.aud .wp-block-image,
.tcard .tph .wp-block-image,
.sc .ring .wp-block-image,
.evt .wp-block-image,
.ibubble .wp-block-image{display:contents}
/* The hero band uses .phero (not .sf-section), so extend the block-rhythm
   neutralizer to it so the kicker/heading/lead/ctas keep their own margins. */
#main .phero > *,
#main .phero :where(.is-layout-flow, .is-layout-constrained) > *{margin-block-start:0}
/* Button variants exposed to the editor as block styles on core/button.
   They reuse the .btn look on the inner link. */
.wp-block-button.is-style-sf-primary>.wp-block-button__link,
.wp-block-button.is-style-sf-navy>.wp-block-button__link,
.wp-block-button.is-style-sf-ghost>.wp-block-button__link,
.wp-block-button.is-style-sf-ghost-lt>.wp-block-button__link{
  display:inline-flex;align-items:center;gap:.4em;font-weight:700;border-radius:30px;
  padding:12px 22px;font-size:.9rem;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.wp-block-button.is-style-sf-primary>.wp-block-button__link:hover,
.wp-block-button.is-style-sf-navy>.wp-block-button__link:hover,
.wp-block-button.is-style-sf-ghost>.wp-block-button__link:hover,
.wp-block-button.is-style-sf-ghost-lt>.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(44,50,140,.18)}
.wp-block-button.is-style-sf-primary>.wp-block-button__link{background:var(--yellow);color:var(--charcoal)}
.wp-block-button.is-style-sf-primary>.wp-block-button__link:hover{background:var(--yellow-hover)}
.wp-block-button.is-style-sf-navy>.wp-block-button__link{background:var(--navy);color:#fff}
.wp-block-button.is-style-sf-navy>.wp-block-button__link:hover{background:var(--navy-deep)}
.wp-block-button.is-style-sf-ghost>.wp-block-button__link{background:transparent;color:var(--navy);border-color:var(--navy)}
.wp-block-button.is-style-sf-ghost>.wp-block-button__link:hover{background:var(--navy);color:#fff}
.wp-block-button.is-style-sf-ghost-lt>.wp-block-button__link{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.wp-block-button.is-style-sf-ghost-lt>.wp-block-button__link:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* 6c. Re-assert intentional top margins ------------------------------------- */
/* The neutralizer above strips margin-block-start from every child of a flow
   group — right for paragraphs/headings (their rhythm lives in bottom
   margins), wrong for components whose designed spacing IS a top margin.
   Win those back at #main specificity; ties with the neutralizer resolve to
   these because they are declared later. Values mirror the base rules. */
#main .mt-1{margin-block-start:18px}
#main .mt-2{margin-block-start:26px}
#main .mt-3{margin-block-start:32px}
#main .mt-4{margin-block-start:40px}
#main .ctas{margin-block-start:22px}
#main .tgrid{margin-block-start:24px}
#main .qgrid{margin-block-start:22px}
#main .cred-row{margin-block-start:24px}
#main .slot{margin-block-start:20px}
#main .map-embed{margin-block-start:24px}
#main .sig{margin-block-start:26px}
#main .sig-name{margin-block-start:6px}
#main .faq-group{margin-block-start:var(--stack)}
#main .faq .faq-group:first-child{margin-block-start:0}
#main .quote .attrib{margin-block-start:16px}
#main .qcard .attrib{margin-block-start:auto}
#main .phero p:not(.kicker){margin-block-start:20px}
#main .phero .ctas{margin-block-start:34px}
#main .phero .stat-strip{margin-block-start:12px}
/* Stat cards: outrank the hero-lead 20px rule above (it also matches these
   p's); number sits flush, label 10px below it. */
#main .phero .stat .stat-num{margin-block-start:0}
#main .phero .stat .stat-label{margin-block-start:10px}
#main .banner p:not(.kicker){margin-block-start:16px}
#main .page-head p:not(.kicker){margin-block-start:14px}
/* Breathing room between a section's intro (heading/lead paragraph) and the
   content component that follows it. The neutralizer zeroes the component's top
   margin, leaving only the paragraph's 14px bottom margin, which reads too
   tight. Adjacent-sibling + direct child of .wrap, so it only fires for a real
   section intro (not the hero, whose lead is nested, and not deep content). */
#main .wrap > :is(p,.h-lg) + :is(.grid3,.grid2,.split,.lead-grid,.staff-grid,.quote,.faq,.tbl-wrap){margin-block-start:32px}
/* Mirror of the above: a summary lead that FOLLOWS a card grid needs the same
   breathing room (the neutralizer strips its top margin, so it sits flush under
   the cards). Fires e.g. on the CTE tracks summary (client feedback 2026-07-22). */
#main :is(.grid3,.grid2,.lead-grid) + .lead{margin-block-start:32px}
/* Core Table block authored in a .wrap: give it breathing room under the
   heading/lead above (the neutralizer zeroed its top margin). */
#main .wrap > .wp-block-table{margin-block-start:24px}

/* 7. Components -------------------------------------------------------------- */
/* Hero (home / parents / students) */
.phero{color:#fff;overflow:hidden;position:relative;padding:clamp(52px,6vw,76px) 0 clamp(92px,10.5vw,136px);
  background:radial-gradient(125% 125% at 82% 10%,var(--navy-bright) 0%,var(--navy) 46%,var(--navy-deep) 100%)}
/* Ambient glow orbs — soft depth behind the content (both layered on ::before) */
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(245,215,58,.22),rgba(245,215,58,0) 70%),
    radial-gradient(circle,rgba(240,120,42,.20),rgba(240,120,42,0) 70%);
  background-repeat:no-repeat;
  background-size:min(54vw,640px) min(54vw,640px),min(48vw,560px) min(48vw,560px);
  background-position:right -110px top -120px,left -130px bottom -150px}
/* Wave divider into the next section. White by default (parents/students);
   switches to the band gray when a .band section follows (home). */
.phero{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,34 C240,64 420,6 720,18 C1020,30 1200,58 1440,26 L1440,64 0,64 Z'/%3E%3C/svg%3E")}
.phero:has(+ .band){--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23F2F1F4' d='M0,34 C240,64 420,6 720,18 C1020,30 1200,58 1440,26 L1440,64 0,64 Z'/%3E%3C/svg%3E")}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(34px,6vw,64px);pointer-events:none;z-index:1;
  background:var(--wave) center bottom/100% 100% no-repeat}
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative;z-index:2}
/* Eyebrow: a touch more air below in the hero */
.phero .kicker.y{margin-bottom:18px}
/* Sized so "Your story is not over." (students) holds ONE line at desktop; the
   white text and the yellow .flame span scale together (client feedback 2026-07-23). */
.phero h1{color:#fff;font-size:clamp(2.25rem,4.35vw,3.1rem);font-weight:800;line-height:1.03;letter-spacing:-.025em}
.phero h1 .flame{color:var(--yellow);white-space:nowrap;
  background:linear-gradient(var(--orange),var(--orange)) left 0 bottom .04em/100% .09em no-repeat;padding-bottom:.06em}
.phero p{color:var(--on-navy);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.7;margin:22px 0 0;max-width:46ch}
/* Bigger, weightier CTAs in the hero (covers static .btn and WP block-button markup) */
.phero .ctas .btn,.phero .ctas .wp-block-button__link{padding:15px 28px;font-size:.95rem}
.phero .btn-primary,.phero .is-style-sf-primary>.wp-block-button__link{box-shadow:0 14px 30px rgba(245,215,58,.28)}
.phero .btn-primary:hover,.phero .is-style-sf-primary>.wp-block-button__link:hover{box-shadow:0 18px 38px rgba(245,215,58,.40)}
/* Repurposed decorative marks */
.phero .deco{position:absolute;width:clamp(150px,20vw,250px);aspect-ratio:1;height:auto;border-radius:50%;background:none;opacity:1;
  border:1.5px solid rgba(255,255,255,.14);top:auto;left:auto;bottom:-64px;right:40%;z-index:1;
  animation:sf-float 8s ease-in-out infinite}
.phero .deco2{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--yellow);opacity:.9;
  top:22%;right:5%;bottom:auto;box-shadow:0 0 0 6px rgba(245,215,58,.16);z-index:1;
  animation:sf-float 5.5s ease-in-out infinite}
/* Gentle drift for small ornaments; killed globally by the reduced-motion reset */
@keyframes sf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Hero photo — framed card with an offset accent panel behind it.
   Per client feedback (2026-07-21): the photo frame and the yellow back-shape use
   the brand "off-circle" (slightly imperfect circle) instead of a square, matching
   the Students-page treatment. The mask carries the aspect-ratio in-flow so the
   blob gets height even though the image sits inside a display:contents figure. */
.blob{position:relative;max-width:540px;margin-inline:auto;z-index:2}
.blob::before{content:"";position:absolute;inset:26px -26px -26px 26px;background:var(--yellow);border-radius:54% 46% 53% 47% / 46% 54% 47% 53%;z-index:0;transform:rotate(2.5deg)}
/* Dot-grid square removed per client feedback (2026-07-21) — she asked for the
   "square dot box" gone from the header/hero. The yellow offset panel stays. */
.blob .mask{position:relative;z-index:1;aspect-ratio:1/1;overflow:hidden;border-radius:44% 56% 47% 53% / 55% 45% 52% 48%;clip-path:none;
  box-shadow:0 30px 60px rgba(16,20,70,.45);outline:6px solid rgba(255,255,255,.07);outline-offset:-6px}
.blob .mask img{width:100%;height:100%;object-fit:cover;display:block}
/* Parents hero: keep the two CTAs on one row (client feedback 2026-07-22).
   Give the text column more room and trim the photo so both buttons fit inline.
   Scoped to the Parents page so the Home hero is unaffected, and to desktop
   (min-width:1001px) so the <=1000px single-column rule below still wins on
   tablet/mobile — where the buttons stack normally. */
@media(min-width:1001px){
  body.page-id-15 .phero .wrap{grid-template-columns:1.25fr .75fr}
  body.page-id-15 .phero .blob{max-width:420px}
  body.page-id-15 .phero .ctas{flex-wrap:nowrap}
}
/* Hero stat strip — proof points (frosted cards) spanning both hero columns.
   Vertical space comes from the wrap's row gap; margin stays small. */
.phero .stat-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px;position:relative;z-index:2}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stat .stat-num{font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:800;color:var(--yellow);line-height:1.15;margin:0}
.stat .stat-label{font-size:var(--fs-sm);color:var(--on-navy);margin:3px 0 0}

/* Photo banner (interior pages). Per-page image via inline --banner-img. */
/* Banner height shortened to match the handover design (~74px) per client feedback (2026-07-21). */
.banner{background-image:linear-gradient(90deg,rgba(30,35,110,.94),rgba(30,35,110,.55)),var(--banner-img);background-size:cover;background-position:center;color:#fff;padding:clamp(52px,6.5vw,74px) 0;position:relative;overflow:hidden}
/* Dot-grid square removed from the photo banner per client feedback (2026-07-21). */
.banner .wrap{position:relative;z-index:1}
.banner h1{color:#fff;font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.banner p{color:var(--on-navy);font-size:var(--fs-lead);margin-top:16px;max-width:60ch}

/* Slim page header (pages without a photo banner) */
/* Slim blue header shortened per client feedback (2026-07-21): keep the blue
   header they liked (faculty/governance/contact), just make it less tall. */
.page-head{background:radial-gradient(circle at 80% 20%,var(--navy-bright),var(--navy) 60%);color:#fff;padding:clamp(34px,4vw,48px) 0;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;width:min(30vw,360px);aspect-ratio:1;border-radius:50%;top:-45%;right:5%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,215,58,.16),rgba(245,215,58,0) 70%)}
/* Dot-grid square removed from the slim blue header per client feedback (2026-07-21). */
.page-head .wrap{position:relative;z-index:1}
.page-head .kicker{color:var(--yellow)}
.page-head h1{color:#fff;font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.page-head p{color:var(--on-navy);font-size:var(--fs-lead);margin:14px 0 0;max-width:62ch}
/* Contact header must fit on a single line per client feedback (2026-07-21):
   trim the size a touch and keep it un-wrapped from tablet up (wraps on phones). */
body.page-id-22 .page-head h1{font-size:clamp(1.5rem,3.2vw,2.15rem)}
@media(min-width:900px){body.page-id-22 .page-head h1{white-space:nowrap}}

/* Cards */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px;border:1px solid var(--border);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card h3{color:var(--navy);font-size:var(--fs-h3);margin-bottom:8px}
.card p{font-size:var(--fs-base);color:var(--ink-soft);margin-bottom:0}
.card.acc{border-top:6px solid var(--yellow)}
.card.acc:nth-child(2){border-top-color:var(--orange)}
.card.acc:nth-child(3){border-top-color:var(--navy)}
/* Statement cards (home "three words"): top accent matches each title color */
.grid3>.card:has(>.card-title-lg){border-top:6px solid var(--navy)}
.grid3>.card:has(>.card-title-lg):nth-child(2){border-top-color:var(--yellow)}
.grid3>.card:has(>.card-title-lg):nth-child(3){border-top-color:var(--orange)}
.card>.card-title-lg{margin-bottom:10px}
.fcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border);transition:transform .25s ease,box-shadow .25s ease}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.fcard .top{height:170px;position:relative;overflow:hidden}
.fcard .top img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 86%,0 100%);transition:transform .5s ease}
.fcard:hover .top img{transform:scale(1.05)}
.fcard .b{padding:22px 24px 26px}
.fcard h3{color:var(--navy);font-size:var(--fs-h3);margin-bottom:8px}
.fcard p{font-size:var(--fs-base);color:var(--ink-soft);margin-bottom:0}
.fcard.fcard-cta{background:var(--navy);display:flex;flex-direction:column;justify-content:center;padding:30px 26px;position:relative}
/* Echo the hero's glow + dot-grid so the card reads as part of the same family */
.fcard-cta::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;top:-70px;right:-70px;
  background:radial-gradient(circle,rgba(245,215,58,.30),rgba(245,215,58,0) 70%);pointer-events:none}
.fcard-cta::after{content:"";position:absolute;width:80px;height:80px;left:-12px;bottom:-12px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.30) 2px,transparent 2.5px);background-size:14px 14px}
.fcard-cta>*{position:relative;z-index:1}
.fcard-cta h3{color:#fff;font-size:var(--fs-h3-lg)}
.fcard-cta p{color:var(--on-navy-soft);margin:8px 0 18px}
.pill-badge{display:inline-block;background:var(--yellow);color:var(--charcoal);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:20px;position:absolute;top:14px;left:16px;z-index:2}

/* Check list */
.tick{list-style:none;max-width:74ch}
.tick li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--ink-soft)}
.tick li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--navy);font-weight:800;background:var(--yellow);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.tick li b{color:var(--charcoal)}

/* Credentials band */
.creds{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.creds .h-lg{color:#fff}
.cred-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;position:relative;z-index:2}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:11px 20px;font-size:var(--fs-sm);font-weight:600;transition:background .2s ease,border-color .2s ease}
.chip:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.chip b{color:var(--yellow)}
.creds .circ{position:absolute;border-radius:50%;background:var(--yellow);opacity:.08;width:240px;height:240px;top:-80px;right:-40px}
/* Echo the hero's ambient language: soft glow low-left, dot grid low-right */
.creds::before{content:"";position:absolute;width:min(40vw,460px);aspect-ratio:1;border-radius:50%;bottom:-55%;left:-8%;
  background:radial-gradient(circle,rgba(240,120,42,.16),rgba(240,120,42,0) 70%);pointer-events:none}
.creds::after{content:"";position:absolute;width:110px;height:110px;right:36px;bottom:22px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.30) 2px,transparent 2.5px);background-size:16px 16px}

/* Numbered steps */
.step .n{width:56px;height:56px;border-radius:16px;background:var(--navy);color:var(--yellow);font-weight:800;font-size:var(--fs-h3-lg);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transform:rotate(-6deg);transition:transform .25s ease;box-shadow:0 8px 18px rgba(44,50,140,.22)}
.step:hover .n{transform:rotate(0deg)}
/* Dashed path linking the step tiles when the cards sit in a row */
@media(min-width:1001px){
  .step{position:relative}
  .step:not(:last-child)::after{content:"";position:absolute;top:56px;right:calc(-1*var(--gap));width:var(--gap);border-top:2px dashed var(--gray)}
}

/* Audience split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg)}
.aud{position:relative;border-radius:20px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.aud img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.aud:hover img{transform:scale(1.04)}
.aud .ov{position:relative;background:linear-gradient(0deg,rgba(20,24,80,.96),rgba(20,24,80,.75) 55%,rgba(20,24,80,0));color:#fff;padding:34px 28px 30px;width:100%}
.aud .ov em{font-style:italic;font-weight:700;font-size:1.2rem;display:block;margin-bottom:8px}
.aud .ov p{font-size:var(--fs-base);color:var(--on-navy);margin-bottom:16px}
.aud.students .ov{background:linear-gradient(0deg,var(--yellow) 0%,rgba(245,215,58,.94) 55%,rgba(245,215,58,0));color:var(--navy)}
.aud.students .ov em{color:var(--navy)}
.aud.students .ov p{color:#4a4020}

/* Quotes & testimonials */
.quote{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:38px 42px;border-left:8px solid var(--yellow);max-width:var(--w-content);position:relative}
.quote::before{content:"\201C";position:absolute;top:-4px;right:26px;font-size:6rem;line-height:1;font-weight:800;color:var(--yellow);opacity:.5;pointer-events:none}
.quote>*{position:relative}
.quote p{font-size:var(--fs-lead);line-height:1.65;color:var(--charcoal)}
.quote .attrib{margin-top:16px;font-weight:700;color:var(--navy);font-size:.92rem}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:24px}
.tcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;display:grid;grid-template-columns:150px 1fr;transition:transform .25s ease,box-shadow .25s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tcard .tph{position:relative;background:var(--navy);min-height:210px}
.tcard .tph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.tcard .tph-label{display:none}
.tcard .tph.pending{display:flex;align-items:center;justify-content:center;padding:14px}
.tcard .tph.pending img{display:none}
.tcard .tph.pending .tph-label{display:block;color:var(--yellow);font-size:var(--fs-xs);font-weight:600;text-align:center;line-height:1.4}
.tcard .tbody{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.tcard .tbody p{font-size:var(--fs-base);color:var(--ink-soft);line-height:1.6;margin-bottom:14px}
.tcard .attrib{font-weight:700;color:var(--navy);font-size:.92rem;line-height:1.3}
.tcard .attrib span{display:block;font-weight:500;color:var(--ink-faint);font-size:.8rem;margin-top:2px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:22px}
.qcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);border-left:6px solid var(--yellow);padding:26px 28px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.qcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.qcard:nth-child(2){border-left-color:var(--navy)}
.qcard p{font-size:1rem;line-height:1.6;color:var(--charcoal);font-style:italic;margin-bottom:14px}
.qcard p::before{content:"\201C";color:var(--orange);font-weight:800;font-size:1.2rem;margin-right:2px}
.qcard p::after{content:"\201D";color:var(--orange);font-weight:800;font-size:1.2rem;margin-left:1px}
.qcard .attrib{font-weight:700;color:var(--navy);font-size:.92rem;line-height:1.3;margin-top:auto}
.qcard .attrib span{display:block;font-weight:500;color:var(--ink-faint);font-size:.8rem;margin-top:2px}

/* Editable placeholder slot */
.slot{margin-top:20px;border:2px dashed var(--gray);border-radius:16px;padding:24px;color:#7a7486;background:#fbfafc;max-width:var(--w-content)}
.slot b{display:block;color:var(--navy);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.slot span{font-size:var(--fs-sm)}

/* Staff */
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
.sc{text-align:center}
.sc .ring{width:150px;height:150px;margin:0 auto 14px;position:relative}
/* The photo sits on top of the .ini initials layer. When the Image block is
   empty it's transparent, so the initials placeholder shows through; once a
   photo is uploaded it covers the initials. */
.sc .ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:path('M 75,4 C 120,4 146,30 146,75 C 146,113 124,148 79,148 C 34,148 4,120 4,75 C 4,30 30,4 75,4 Z')}
.sc .ring .ini{width:100%;height:100%;background:var(--navy);color:var(--yellow);font-weight:800;font-size:2.1rem;display:flex;align-items:center;justify-content:center;clip-path:path('M 75,4 C 120,4 146,30 146,75 C 146,113 124,148 79,148 C 34,148 4,120 4,75 C 4,30 30,4 75,4 Z')}
.sc h3{color:var(--navy);font-size:1rem;margin-bottom:2px}
.sc .role{font-size:var(--fs-sm);color:var(--ink-faint);margin-bottom:8px;font-weight:600}
.sc .role.pending{color:var(--ink-faint);font-style:italic}
.sc p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55;margin-bottom:0}
.sc p.pending{color:var(--ink-faint);font-style:italic}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);max-width:var(--w-content);margin:0 auto}

/* Principal bio header */
.bio-head{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;margin-bottom:30px}
.bio-photo{width:190px;flex-shrink:0}
.bio-photo .ring{width:190px;height:190px}
.bio-photo .ring img{width:100%;height:100%;object-fit:cover;clip-path:path('M 95,5 C 152,5 185,38 185,95 C 185,143 157,187 100,187 C 43,187 5,152 5,95 C 5,38 38,5 95,5 Z')}
.bio-body{flex:1;min-width:280px}
.bio-body h1{font-size:clamp(1.7rem,3.5vw,2.2rem);color:var(--navy);margin-bottom:0}
.sig{font-family:'Caveat',cursive;font-weight:600;font-size:3rem;color:var(--navy);line-height:1;margin-top:26px}
.sig-name{font-weight:700;color:var(--navy);margin-top:6px}
.sig-role{font-size:.9rem;color:var(--ink-soft)}
.sig-title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}

/* FAQ */
.faq{max-width:var(--w-content)}
.faq-group{font-size:var(--fs-h3);font-weight:800;color:var(--navy);letter-spacing:.02em;margin:var(--stack) 0 14px}
.faq .faq-group:first-child{margin-top:0}
.faq details{background:#fff;border:1px solid var(--gray);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;transition:border-color .2s ease}
.faq details:hover{border-color:var(--navy)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;color:var(--navy);font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.4rem;font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] p{animation:faq-in .3s ease}
.faq p{padding:0 22px 18px;color:var(--ink-soft);font-size:var(--fs-base);margin:0}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Closing CTA band */
.closing{background:linear-gradient(120deg,var(--yellow),var(--yellow-lt));color:var(--navy);text-align:center;position:relative;overflow:hidden}
.closing h2{font-size:var(--fs-h2);font-weight:800;margin-bottom:6px;color:var(--navy)}
.closing p{margin-bottom:20px;color:var(--on-yellow);font-weight:500}
.closing .ctas{justify-content:center;position:relative;z-index:2}
.closing .circ{position:absolute;border-radius:50%;background:#fff;opacity:.28}
.closing .circ.c1{width:200px;height:200px;top:-60px;left:-40px}
.closing .circ.c2{width:120px;height:120px;bottom:-40px;right:10%}
/* Navy counterparts of the hero ornaments, tuned for the yellow surface */
.closing::before{content:"";position:absolute;width:104px;height:104px;left:6%;bottom:26px;pointer-events:none;
  background-image:radial-gradient(rgba(44,50,140,.22) 2px,transparent 2.5px);background-size:15px 15px}
.closing::after{content:"";position:absolute;width:150px;aspect-ratio:1;border-radius:50%;right:5%;top:-52px;pointer-events:none;
  border:2px solid rgba(44,50,140,.14)}

/* Notices */
.pending{color:var(--ink-faint);font-style:italic;font-size:.92rem;max-width:74ch}
.arch{background:var(--yellow);color:var(--navy);border-radius:var(--radius-sm);padding:18px 22px;font-weight:600;max-width:var(--w-content)}
.crisis{background:#fff;border:1px solid var(--gray);border-radius:var(--radius-sm);padding:22px 24px;margin-bottom:14px}
.crisis b{color:var(--navy);display:block;margin-bottom:4px}
.crisis b.b-inline{display:inline;margin:0}
.crisis span{font-size:var(--fs-base);color:var(--ink-soft)}

/* Tables */
.tbl{width:100%;border-collapse:collapse;max-width:var(--w-content)}
.tbl td,.tbl th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--gray);font-size:var(--fs-base)}
.tbl thead th{color:var(--navy);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.tbl tbody th{color:var(--charcoal);font-weight:700}
/* Core Table block authored on a page: render it like the static .tbl. Its
   first body column is a plain cell (not a <th scope="row">), so re-bold it to
   match the hand-written tables. */
.wp-block-table.tbl{margin:0;max-width:var(--w-content)}
.wp-block-table.tbl table{width:100%;border-collapse:collapse}
/* Override core's full-cell borders + 3px thead rule so it reads like the
   static .tbl: no outer/vertical borders, just a light row separator. */
.wp-block-table.tbl :is(td,th){text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--gray);font-size:var(--fs-base)}
.wp-block-table.tbl thead{border-bottom:0}
.wp-block-table.tbl thead th{color:var(--navy);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.wp-block-table.tbl tbody td:first-child{color:var(--charcoal);font-weight:700}

/* Forms */
.form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;max-width:520px;border:1px solid var(--border)}
.form label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:5px}
.form input,.form textarea,.form select{width:100%;padding:11px 13px;border:1px solid var(--gray);border-radius:10px;font-family:inherit;font-size:var(--fs-base);margin-bottom:14px;transition:border-color .15s ease,box-shadow .15s ease}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(44,50,140,.12)}
.form-note{font-size:.8rem;color:var(--ink-faint);margin-top:10px;font-style:italic}
.map-embed{margin-top:24px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.map-embed iframe{border:0;display:block}

/* Events */
.evt{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--border);transition:transform .25s ease,box-shadow .25s ease}
.evt:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.evt img{height:190px;width:100%;object-fit:cover;transition:transform .5s ease}
.evt:hover img{transform:scale(1.05)}
.evt .b{padding:18px 20px}
.evt h3{color:var(--navy);font-size:var(--fs-h3);margin-bottom:4px}
.evt p{font-size:var(--fs-base);color:var(--ink-soft);margin:0}

/* Icon bubbles & quick links */
.ibubble{width:92px;height:92px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.ibubble::before{content:"";position:absolute;inset:0;background:var(--gray-lt);clip-path:path('M 46,3 C 74,3 89,18 89,46 C 89,70 76,91 48,91 C 21,91 3,74 3,46 C 3,18 18,3 46,3 Z')}
.ibubble.navy::before{background:rgba(44,50,140,.08)}
.ibubble img,.ibubble svg{position:relative;width:52px;height:52px}
.ibubble.sm{width:66px;height:66px;margin-bottom:12px}
.ibubble.sm img{width:38px;height:38px}
.track-head{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.track-head h3{margin:0}
.quicklink{display:flex;align-items:flex-start;gap:16px}
.quicklink .ibubble{margin-bottom:0}
.rocket-head{display:flex;align-items:center;gap:20px;margin-bottom:8px;flex-wrap:wrap}

/* Student photo trio */
.student-trio{position:relative;aspect-ratio:1/1;min-height:440px}
.student-trio .b{position:absolute;overflow:hidden;border:5px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.student-trio .b img{width:100%;height:100%;object-fit:cover}
.student-trio .b1{width:42%;height:42%;left:2%;top:2%;z-index:2;border-radius:44% 56% 47% 53% / 55% 45% 52% 48%}
.student-trio .b2{width:42%;height:42%;right:2%;top:2%;z-index:2;border-radius:54% 46% 53% 47% / 46% 54% 47% 53%}
.student-trio .b3{width:56%;height:56%;left:22%;top:40%;z-index:3;border-radius:49% 51% 45% 55% / 53% 47% 54% 46%}

/* 8. Footer -------------------------------------------------------------------- */
footer{background:var(--navy-deep);color:var(--footer-ink);padding:clamp(44px,5vw,60px) 0;font-size:var(--fs-sm)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--gap-lg)}
footer h4{color:#fff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
footer a{display:block;color:var(--footer-ink);padding:4px 0;transition:color .15s ease}
footer a:hover{color:var(--yellow)}
footer .fa{color:var(--footer-ink);line-height:1.7;margin:0}
.foot-social{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}
.foot-social a{display:inline-block;padding:0;font-weight:600;color:#fff}
.foot-social a:hover{color:var(--yellow)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:18px;font-size:var(--fs-xs);color:var(--footer-ink-dim)}
.foot-credit{white-space:nowrap}
.foot-credit a{display:inline;color:var(--footer-ink);text-decoration:underline;padding:0}

/* 9. Motion & reveal (classes added by main.js; site fully visible without JS) --- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.revealed{opacity:1;transform:none}
@keyframes drawer-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* 10. Dev-only: build notes (do not ship to production) -------------------------- */
.dn-btn{position:fixed;bottom:20px;right:20px;z-index:70;background:var(--navy);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:.82rem;padding:12px 18px;border-radius:30px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.dn-panel{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:94vw;background:#fff;z-index:71;box-shadow:-8px 0 30px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s;overflow-y:auto;padding:26px 26px 60px}
.dn-panel.show{transform:translateX(0)}
.dn-panel h3{color:var(--navy);font-size:1.15rem;margin-bottom:4px}
.dn-panel .sub{color:var(--orange);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.dn-panel h4{color:var(--navy);font-size:.9rem;margin:18px 0 6px;border-top:1px solid var(--gray);padding-top:14px}
.dn-panel p,.dn-panel li{font-size:.84rem;color:var(--ink-soft);line-height:1.55}
.dn-panel ul{margin:6px 0 6px 18px}
.dn-panel .flag{background:#fff6e5;border-left:3px solid var(--orange);padding:8px 12px;border-radius:6px;margin:8px 0;font-size:.82rem}
.dn-panel .stop{background:#fdecec;border-left:3px solid #c00000;padding:8px 12px;border-radius:6px;margin:8px 0;font-size:.82rem}
.dn-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--navy)}

/* 11. Media queries --------------------------------------------------------------- */
@media(max-width:1000px){
  .phero .wrap,.split,.grid2,.lead-grid{grid-template-columns:1fr}
  .phero .blob{max-width:400px;margin-top:8px}
  .phero .deco{display:none}
  .phero .stat-strip{grid-template-columns:1fr 1fr}
  .grid3,.staff-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .student-trio{min-height:320px;max-width:420px;margin:0 auto}
  .tgrid,.qgrid{grid-template-columns:1fr}

  /* Bar: logo + toggle only. The Apply CTA moves into the drawer so the brand
     never gets squeezed into a wrap. */
  .bar{gap:16px}
  .bar>.btn-primary{display:none}
  .brand .bt small{white-space:nowrap}
  /* CRITICAL: no backdrop-filter on the mobile header. A filtered ancestor
     becomes the containing block for the fixed drawer inside it, which would
     collapse the drawer's box and let page content show through. Solid header
     is also cleaner on small screens. */
  header.scrolled{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

  /* Off-canvas navigation drawer: right-anchored panel + dim backdrop */
  .nav-toggle{display:flex}
  nav.top{position:fixed;top:var(--header-h);right:0;bottom:0;left:auto;width:min(380px,88vw);background:#fff;flex-direction:column;gap:0;margin:0;padding:14px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(102%);visibility:hidden;box-shadow:-16px 0 44px rgba(20,24,80,.18);transition:transform .34s cubic-bezier(.33,1,.68,1),visibility .34s;z-index:55}
  body.nav-open nav.top{transform:none;visibility:visible}
  body.nav-open{overflow:hidden}
  /* Below the header's stacking context (z-50) so it dims the PAGE, not the
     drawer — the drawer lives inside <header> and must stay crisp on top. */
  .nav-backdrop{position:fixed;inset:var(--header-h) 0 0 0;background:rgba(20,24,80,.38);opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s;z-index:49;cursor:pointer;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  .navitem{border-bottom:1px solid var(--gray-lt)}
  .navitem>a,.navitem>button{width:100%;justify-content:space-between;padding:15px 6px;font-size:1rem;border-radius:0}
  .navitem .cx{font-size:.7rem}
  /* Accordion panels: animated height instead of display toggling */
  .mega{position:static;min-width:0;opacity:1;visibility:hidden;transform:none;box-shadow:none;border:none;border-radius:0;
    display:block;max-height:0;overflow:hidden;padding:0 6px;
    transition:max-height .32s cubic-bezier(.33,1,.68,1),padding .32s cubic-bezier(.33,1,.68,1),visibility 0s .32s}
  .mega::before,.mega::after{display:none}
  .mega-wide{min-width:0;flex-direction:column;gap:0}
  .mega-wide .mcol+.mcol{border-left:none;padding-left:0}
  .navitem.open .mega{max-height:560px;visibility:visible;padding:0 6px 12px;transition-delay:0s}
  /* Drawer CTA: the Apply button, cloned into the drawer by main.js */
  .nav-cta{display:inline-flex;width:100%;margin-top:22px;padding:15px 22px;font-size:1rem;
    box-shadow:0 10px 24px rgba(245,215,58,.30)}
  .nav-cta.reveal,.nav-cta.revealed{opacity:1;transform:none} /* never a scroll-reveal target */

  /* Drawer items ease in with a light stagger (killed by the reduced-motion reset) */
  body.nav-open .navitem,body.nav-open .nav-cta{animation:drawer-in .34s cubic-bezier(.33,1,.68,1) both}
  body.nav-open .navitem:nth-child(2){animation-delay:.05s}
  body.nav-open .navitem:nth-child(3){animation-delay:.10s}
  body.nav-open .navitem:nth-child(4){animation-delay:.15s}
  body.nav-open .navitem:nth-child(5){animation-delay:.20s}
  body.nav-open .navitem:nth-child(6){animation-delay:.25s}
  body.nav-open .nav-cta{animation-delay:.30s}
  /* Logo stays the same size scrolled or not (see the desktop rule above). */
  .brand img{max-width:180px}
}
/* Drawer-only element; hidden in the desktop nav row */
@media(min-width:1001px){.nav-cta{display:none}}
@media(max-width:600px){
  .staff-grid,.grid3{grid-template-columns:1fr}
  .creds::after,.closing::before{display:none}
  .quote{padding:28px 24px}
}
@media(max-width:520px){
  .tcard{grid-template-columns:1fr}
  .tcard .tph{min-height:240px}
  .foot-grid{grid-template-columns:1fr;gap:22px}
}