/* ============================================================
   Englewood Christian School — ecschool.org
   Design tokens reproduced from the original GoDaddy Airo site.
   ============================================================ */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/bitter-700-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/bitter-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/bitter-700-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/bitter-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/bitter-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Damion';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/damion-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Damion';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/damion-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --blue:#0544a4;         /* primary brand */
  --blue-mid:#095ad4;     /* transportation strip */
  --blue-link:#3b7ee3;    /* links / accents */
  --blue-dark:#022c70;    /* active state */
  --ink:#1b1b1b;          /* body text */
  --ink-soft:#5e5e5e;      /* muted text */
  --ink-faint:#a4a4a4;    /* footer text */
  --dark:#161616;         /* footer bar */
  --wash:#f6f6f6;         /* light section bg */
  --line:#e2e2e2;         /* borders */
  --white:#fff;
  --serif:'Bitter',Georgia,'Times New Roman',serif;
  --script:'Damion',cursive;
  --sans:Helvetica,Arial,sans-serif;
  --wrap:1160px;
  --header-expanded:125px;   /* height at the top of the page */
  --header-compact:76px;     /* height once scrolled */
  --pad:24px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;
  color:var(--ink);background:var(--white);
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--blue);text-decoration:none}
/* Long bare URLs (the USDA complaint form on the About page) would otherwise
   push a phone-width page sideways. */
a{overflow-wrap:anywhere}
a:hover{color:var(--blue-link)}
a:active{color:var(--blue-dark)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.25;margin:0 0 .5em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin-bottom:.35em}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--blue-link);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
/* The original leaves no trailing margin under the last block in a section. */
.wrap > p:last-child,.wrap > div > p:last-child{margin-bottom:0}
/* Space for the fixed header. Reserved at the expanded height so nothing
   reflows when it collapses. */
main{padding-top:var(--header-expanded)}
/* A hero starts at the very top and runs underneath the header. */
.hero{margin-top:calc(-1 * var(--header-expanded))}
/* The original leaves a white gap between the hero and the band below it. */
.hero + .section{margin-top:112px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--white);padding:10px 16px;border:2px solid var(--blue)}

/* ============================================================
   Header + navigation
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  /* Slightly translucent so the hero shows through, matching the original,
     with a blur so the nav stays readable over a busy photo. */
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(226,226,226,.55);
  transition:background .25s ease;
}
/* One row: logo, navigation, phone — as on the original site. */
.header-row{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  max-width:var(--wrap);margin:0 auto;padding:12px var(--pad);
  transition:padding .25s ease;
}
.brand{display:flex;align-items:center;flex:0 0 auto;color:var(--ink)}
.brand img{height:100px;width:auto;transition:height .25s ease}
/* Compact state once the page is scrolled away from the top. */
.site-header.is-compact{background:rgba(255,255,255,.9)}
.site-header.is-compact .header-row{padding:6px var(--pad)}
.site-header.is-compact .brand img{height:52px}

.header-right{display:flex;align-items:center;gap:16px;flex:0 0 auto;margin-left:auto}
.header-tel{font-size:18px;line-height:24px;color:var(--ink);white-space:nowrap}
.header-tel:hover{color:var(--blue)}

.nav-toggle{display:none;background:none;border:0;padding:10px;font:inherit;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
/* The original's control is the icon alone; the label stays for screen readers. */
.nav-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-toggle b{width:22px}
.nav-toggle b::before,.nav-toggle b::after{width:22px}
.nav-toggle b{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle b::before,.nav-toggle b::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.nav-toggle b::before{top:-6px}.nav-toggle b::after{top:6px}

/* The nav takes the space between logo and phone, and sheds overflow into
   "More" so the row never wraps. min-width:0 lets it shrink below content. */
.site-nav{flex:1 1 auto;min-width:0}
.nav-list{display:flex;flex-wrap:nowrap;justify-content:center;gap:0;list-style:none;margin:0;padding:0}
.nav-list > li{position:relative}
/* Set by the overflow script on items it has relocated into "More". */
.nav-list > li[hidden]{display:none}
.nav-list > li > a,.nav-list > li > button{
  display:block;padding:14px 13px;color:var(--ink);background:none;border:0;
  font:inherit;font-size:18px;line-height:24px;cursor:pointer;white-space:nowrap;
}
.nav-list > li > a:hover,.nav-list > li > button:hover{color:var(--blue)}
.nav-list > li > a[aria-current=page]{color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}

/* "More" dropdown */
/* A two-border corner reads as a thin chevron and, unlike a solid triangle,
   can be rotated. At 45deg it points down; +180deg lands on up, and because
   the rotation is clockwise it sweeps through left on the way. */
.has-menu > button::after{
  content:'';display:inline-block;width:7px;height:7px;margin:0 0 3px 9px;
  vertical-align:middle;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .45s cubic-bezier(.45,.05,.25,1);
}
.has-menu[data-open=true] > button::after{transform:rotate(225deg)}
@media (prefers-reduced-motion:reduce){
  .has-menu > button::after{transition:none}
}
.submenu{
  position:absolute;right:0;top:100%;background:var(--white);
  border-radius:4px;box-shadow:0 3px 6px 3px rgba(0,0,0,.24);
  list-style:none;margin:0;padding:12px;display:none;z-index:60;
  /* the original sizes the panel to its longest label rather than to a
     min-width, so it is never wider than the words in it */
  white-space:nowrap;
  /* The original caps this at 45vh, which starts scrolling at five items on a
     laptop window. Using the room actually below the header instead shows all
     ten whenever the window can hold them, and still scrolls when it cannot. */
  max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;
}
.has-menu[data-open=true] .submenu{display:block}
.submenu a{display:block;margin:8px 0;font-size:18px;line-height:1.5;color:var(--ink)}
.submenu a:hover{color:var(--blue)}

/* ============================================================
   Sections
   ============================================================ */
.section{padding:56px 0}
.section-wash{background:var(--wash)}
.section-blue{background:#04398d;color:var(--white)}
.section-blue a:not(.btn){color:var(--white)}
.section-tight{padding:32px 0}

/* Rule-flanked centred heading, as on the original */
.section-title{
  display:flex;align-items:center;gap:20px;
  font-size:28px;line-height:1.25;color:var(--blue);margin:0 0 40px;text-align:center;
}
.section-title::before,.section-title::after{content:'';flex:1;height:1px;background:currentColor;opacity:.55}
.section-blue .section-title{color:var(--white)}

/* The original's "featured" page heading: plain sans, not a serif display
   line. Used on the pages that open with a short label rather than a
   rule-flanked section title. */
.page-title{
  font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.25;
  color:var(--ink);margin:0 0 24px;text-align:center;
}
/* The original's intro line is body-sized and body-coloured, centred in the
   same eight-of-twelve column as the form and the prose. */
.lede{
  font-size:16px;line-height:1.5;color:var(--ink-soft);
  width:calc((100% + 48px) * 8 / 12 - 48px);max-width:none;
  margin:0 auto 32px;text-align:center;
}
/* "Get in Touch!" above the contact form */
.form-lede{
  font-family:var(--sans);font-size:22px;line-height:1.25;color:#151515;
  width:calc((100% + 48px) * 8 / 12 - 48px);margin:0 auto 28px;text-align:center;
}

/* Long-form prose */
.prose{
  width:calc((100% + 48px) * 8 / 12 - 48px);max-width:none;margin:0 auto;
  font-size:16px;line-height:1.5;color:var(--ink-soft);
}
.prose h2{font-size:24px;color:var(--blue);margin-top:1.4em;margin-bottom:.35em}
.prose h3,.prose h4{color:var(--ink)}
/* The original runs prose paragraphs together with no gap; headings provide
   the breaks. Matching it keeps page lengths and rhythm the same. */
.prose p{margin-bottom:0}
.prose ul,.prose ol{margin-bottom:0}
.prose > *:first-child{margin-top:0}
.prose strong{color:inherit}
/* Some pages run the column at the container's left edge rather than centred. */
.prose-left{margin-left:0}
/* Text column with a 339px image column beside it, as the original used on
   the dress code (image left) and the archive letters (image right). */
.prose-aside-right{display:grid;grid-template-columns:1fr calc((100% + 48px) / 3 - 48px);gap:48px;align-items:start;max-width:none}
.prose-aside-right > .prose{margin:0;width:auto;max-width:none}
.prose-aside-right img{width:100%;height:auto}
@media (max-width:1023px){
  .prose-aside-right{grid-template-columns:1fr;gap:24px;max-width:none}
}
/* Dress code: image column on the left, text on the right. */
.prose-aside{display:grid;grid-template-columns:calc((100% + 48px) / 3 - 48px) 1fr;gap:48px;align-items:start;max-width:none}
.prose-aside > .prose{margin:0;width:auto;max-width:none}
.prose-aside img{width:100%;height:auto}
@media (max-width:1023px){
  .prose-aside{grid-template-columns:1fr;gap:24px}
}
.prose h3{font-size:19px;margin-top:1.1em;margin-bottom:.3em}
.prose ul,.prose ol{padding-left:2em}
.prose .note{background:var(--wash);border-left:4px solid var(--blue);padding:16px 20px;margin:1.5em 0}
.prose address{font-style:normal;margin:0 0 1em;padding-left:1.2em}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:686px;padding-top:var(--header-expanded);
  display:flex;align-items:center;justify-content:center;
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;overflow:hidden}
.hero-medallion{
  position:relative;z-index:2;width:450px;aspect-ratio:1;border-radius:50%;
  background:rgba(5,68,164,.86);color:var(--white);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:66px;
}
.hero-medallion h1{font-size:39px;margin:0;color:var(--white);line-height:1.27}
.hero-sub{margin:.5em 0 0;font-size:16px}

/* ---------- Announcement band ---------- */
.announce{display:grid;grid-template-columns:calc((100% + 48px) / 3 - 48px) 1fr;gap:48px;align-items:center}
.announce > img{width:100%;aspect-ratio:1/1;object-fit:cover}
.announce-text{text-align:left}
/* Sans-serif regular, matching the original rather than the serif headings. */
.announce h3{font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.25;margin:0 0 14px;color:var(--white)}
.announce p{margin:0 0 6px;font-size:16px;line-height:1.5;color:#d7d8e0}
.announce-cta{margin-top:26px}

/* ---------- Call-to-action strip ---------- */
.strip{background:var(--blue-mid);color:var(--white);padding:56px 0;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
/* One row, 24px inside the container: the heading takes whatever the button
   leaves, which is how the original lands on a 922px heading at 1440px.
   flex-basis 0 rather than auto — with auto, the heading's max-content size
   fills the first flex line on its own and pushes the button onto a second. */
.strip-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;padding:24px 48px}
.strip h2{flex:1 1 0%;min-width:0;font-size:39px;line-height:1.27;margin:0;color:var(--white);text-align:left}
.strip .btn{flex:0 0 auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:8px 32px;font-family:var(--sans);font-size:14px;font-weight:700;line-height:40px;
  border:0;border-radius:0;cursor:pointer;text-align:center;
  background:var(--blue);color:var(--white);box-shadow:4px 4px 0 rgba(0,0,0,.85);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{color:var(--white);transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(0,0,0,.85)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(0,0,0,.85)}
.btn-light{background:var(--white);color:#303030}
.btn-light:hover{color:var(--blue-dark)}

/* ---------- Card grids ---------- */
.grid{display:grid;gap:48px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.feature{text-align:center}
.feature img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:24px}
.feature h3{font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.25;margin:0 0 24px;color:var(--ink)}
.feature p{font-size:16px;line-height:1.5;color:var(--ink-soft);margin:0}

/* Staff cards */
.person{text-align:center}
.person h2{font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.25;margin:0 0 24px;color:var(--ink)}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 18%}
.person .role{font-size:16px;line-height:1.5;color:var(--ink-soft);margin:23px 0 0}
/* The original has the first four roles typed in bold and the rest plain. */
.person .role strong{font-weight:700;color:inherit}

/* Simple link/resource list */
.tiles{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));list-style:none;padding:0;margin:0}
.tile{border:1px solid var(--line);border-radius:4px;padding:24px;background:var(--white)}
.tile h3{font-size:19px;margin:0 0 8px}
.tile p{font-size:16px;color:var(--ink-soft);margin:0 0 16px}

/* ---------- Van schedules: stop name + address, time right-aligned ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Measured on the original: the "Morning" heading has no bottom margin, each
   stop starts 24px below it, the stop name is 22px/27.5 and the time 22px/22
   (so a two-line time is exactly 44px), and the address sits 8px under the
   name row. That puts one stop every 124px, as on the original. */
.route h3{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.25;color:var(--blue);margin:0}
.route-rule{border:0;border-top:1px solid var(--line);margin:40px 0 32px}
.stops{list-style:none;margin:0;padding:0}
/* The name and the time share the first row; the address runs full width
   beneath both, so a two-line time pushes the address down the way it does
   on the original. */
.stops li{
  display:grid;grid-template-columns:1fr 25%;
  grid-template-areas:"name time" "addr addr";
  column-gap:24px;row-gap:8px;padding:24px 0;margin:0;
}
.stops .stop{display:contents}
.stops b{grid-area:name;font-weight:400;font-size:22px;line-height:1.25;color:var(--ink)}
.stops em{grid-area:addr;font-style:normal;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.stops .time{grid-area:time;font-size:22px;line-height:22px;color:var(--ink);text-align:right}

/* ---------- Contact form ---------- */
.form{width:calc((100% + 48px) * 8 / 12 - 48px);max-width:none;margin:0 auto}
/* The original floats each field's label inside the box: centred while the
   field is empty, small and tucked under the top edge once it has focus or
   content. Measured off the live site: 48px tall fields, 23px/8px/7px padding,
   1px #dadada border, 4px radius, 14px #474747 text. */
.form .field{position:relative;margin:0 0 24px}
.form input,.form textarea{
  width:100%;padding:23px 8px 7px;font:inherit;font-size:14px;line-height:18px;color:#474747;
  background:var(--white);border:1px solid #dadada;border-radius:4px;margin:0;
}
.form input{height:48px}
.form textarea{min-height:116px;resize:vertical}
.form .field label{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:14px;line-height:16px;color:#474747;pointer-events:none;
  transition:top .15s ease,transform .15s ease,font-size .15s ease;
}
/* A textarea is tall, so its resting label sits near the top rather than
   halfway down the box. */
.form .field textarea ~ label{top:15px;transform:none}
.form .field input:focus ~ label,
.form .field input:not(:placeholder-shown) ~ label,
.form .field textarea:focus ~ label,
.form .field textarea:not(:placeholder-shown) ~ label{
  top:6px;transform:none;font-size:11px;
}
.form input:focus,.form textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(5,68,164,.12)}
.form .actions{text-align:center;margin-top:6px}
.form-note{font-size:12px;color:var(--ink-soft);text-align:center;margin:16px 0 0}
.hp{position:absolute;left:-9999px}


/* ---------- Embeds (JotForm / Wufoo / Vimeo) ---------- */
.embed{max-width:900px;margin:0 auto}
.embed iframe{width:100%;border:0;display:block}

/* ---------- Gallery ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));list-style:none;padding:0;margin:0}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---------- Figures ---------- */
figure{margin:0 0 28px}
figure img{border:1px solid var(--line)}
figcaption{font-size:14px;line-height:21px;color:#525252;margin-top:8px}
.figure-side{float:right;width:min(339px,40%);margin:0 0 20px 28px}

/* ============================================================
   Footer
   ============================================================ */
/* The original has no footer block of its own — the address and hours sit at
   the foot of the home page's Contact section, in two columns the same total
   width as the form above them, and the only footer is the dark bar below. */
.contact-details{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;
  width:calc((100% + 48px) * 8 / 12 - 48px);margin:56px auto 0;text-align:center;
}
.contact-details h3{
  font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.25;
  color:#151515;margin:0 0 12px;
}
.contact-details p,.contact-details address{
  font-size:16px;line-height:1.5;color:#575757;font-style:normal;margin:0 0 6px;
}
.contact-details p:last-child{margin-bottom:0}

.footer-bar{background:var(--dark);color:#969696;padding:56px 0;font-size:12px}
.footer-bar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bar span{line-height:18px}
.footer-bar a{color:var(--ink-faint)}
.footer-bar a:hover{color:var(--white)}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:1023px){
  .hero{min-height:668px}
  .hero-medallion{width:400px;padding:58px}
}
@media (max-width:1023px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  /* A lone card on the last row is centred, as on the original. */
  .grid-3 > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 24px)}
  /* Below 1024 the strip stacks: heading across the row, button centred. */
  .strip-inner{flex-wrap:wrap;justify-content:center}
  .strip h2{flex:1 1 100%;text-align:center}
  .header-tel{line-height:27px}
}
@media (max-width:767px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  /* one column, so the trailing-card centring no longer applies */
  .grid-3 > :last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
}
/* Below 1024 the original stacks the announcement: the photo above a text
   column ten of twelve wide, centred as a block but still left-aligned. */
@media (max-width:1023px){
  .announce{grid-template-columns:1fr;gap:24px}
  .announce-text{
    text-align:left;
    width:calc((100% + 48px) * 10 / 12 - 48px);margin:0 auto;
  }
}
/* Below 1024px the original switches to a stacked, centred header:
   hamburger at the top left, phone centred on the first row, and an 80px
   logo centred beneath it — about 152px tall in total. */
@media (max-width:1023px){
  :root{--header-expanded:155px}
  .header-row{
    position:relative;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:0;padding:17px var(--pad) 12px;
  }
  /* Visual order is phone, then logo, then the drawer — the reverse of the
     document order, which keeps the logo first for assistive tech. */
  .header-right{order:1;flex:0 0 100%;justify-content:center;margin:0}
  .brand{order:2;flex:0 0 auto;margin-top:14px}
  .brand img{height:80px}
  /* The logo keeps its size here; the original does not shrink it. */
  .site-header.is-compact .brand img{height:80px}
  .site-header.is-compact .header-row{padding:17px var(--pad) 12px}

  .nav-toggle{display:flex;position:absolute;left:var(--pad);top:12px}

  /* The drawer hangs below the bar and spans it edge to edge. Positioning it
     against the header rather than nudging it out of the padded column keeps
     it exact whatever the padding is. */
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;
    border-top:1px solid var(--line);background:var(--white);
    max-height:70vh;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 10px 24px -12px rgba(0,0,0,.25);
  }
  .site-nav[data-open=true]{display:block}
  .nav-list{flex-direction:column;flex-wrap:wrap;padding:8px var(--pad) 16px}
  .nav-list > li > a,.nav-list > li > button{padding:12px 0;font-size:16px;width:100%;text-align:left}
  .nav-list > li > a[aria-current=page]{box-shadow:none}
  .has-menu > button::after{float:right;margin-top:8px}
  .submenu{position:static;box-shadow:none;padding:0 0 0 16px;max-height:none;white-space:normal}
  .submenu a{margin:0;padding:10px 0;font-size:16px;line-height:24px}
}
@media (max-width:760px){
  .section{padding:40px 0}
  .section-title{gap:12px}
  .page-title{font-size:22px}
  .figure-side{float:none;width:100%;margin:0 0 20px}
  .contact-details{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .header-tel{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* Square card images (homepage About Us) */
.feature-square img{aspect-ratio:1/1;border-radius:50%}

/* Alternating image + text rows (About page) */
.row-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:0 0 48px}
.row-split:last-child{margin-bottom:0}
.row-split .txt{text-align:center}
.row-split h2{font-family:Helvetica,Arial,sans-serif;font-weight:400;font-size:22px;color:var(--ink);margin:0 0 16px}
.row-split p{font-size:16px;color:var(--ink-soft)}
.row-split img{width:100%;aspect-ratio:2/1;object-fit:cover}
.row-split .media-first{order:-1}

@media (max-width:760px){
  .row-split{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .row-split .media-first,.row-split .media{order:-1}
}

/* ---------- Alternating content bands (report cards, college info) ----------
   The original built these pages as a stack of white/grey sections, each
   either two-column (text beside an image) or a full-width image with a
   narrower centred text block. */
/* Eight-of-twelve text beside a four-of-twelve image, the split the original
   uses on the report card guide. */
.band-split{display:grid;grid-template-columns:1fr calc((100% + 48px) / 3 - 48px);gap:48px;align-items:center}
.band-split figure,.band-wide figure{margin:0}
.band-split img{width:100%;height:auto;border:1px solid var(--line)}
.band-text{font-size:16px;color:var(--ink-soft)}
.band-text p:last-child{margin-bottom:0}
/* Eight of twelve columns, like the prose column, so it tracks the container
   at every width instead of stopping at a fixed 726px. */
.band-narrow{
  width:calc((100% + 48px) * 8 / 12 - 48px);max-width:none;margin:0 auto;
  font-size:16px;line-height:1.5;color:var(--ink-soft);
}
.band-narrow p:last-child{margin-bottom:0}
.band-wide img{width:100%;height:auto;border:1px solid var(--line);background:var(--white)}
.band-wide > figure{margin:0 0 32px}
figcaption{font-size:14px;line-height:21px;color:#525252;margin-top:8px}
@media (max-width:1023px){
  .band-split{grid-template-columns:1fr;gap:24px}
  .band-split .band-media{order:-1}
  /* stacked: the image runs full width, the text takes the band fraction */
  .band-split .band-text{width:calc((100% + 48px) * 10 / 12 - 48px);margin:0 auto}
  .band-split figcaption{text-align:center}
}
@media (max-width:767px){
  .band-split .band-text{width:100%}
}

/* The original's plain sans sub-heading, used inside a prose column. The
   .prose descendant selector is there so it beats .prose h2 / .prose h3. */
.sub-title,.prose .sub-title,.legal-prose .sub-title{
  font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.25;
  color:var(--ink);margin:0 0 24px;
}

/* STEM competition entries: one full-width, then two across, each centred
   in its cell — the shape the original's video grid had. */
.stem-item{text-align:center;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.stem-item p{margin:0}
.stem-item .sub-title{margin:0 0 8px}
.stem-grid{margin-top:40px}
.stem-grid .stem-item + .stem-item{margin-top:0}

/* ---------- Legal / policy prose (reporting, wellness policy) ----------
   The original sets these pages as one run of body text: the sub-headings are
   bold runs at the body size and colour, the numbered standards keep their
   typed-in markers with no hanging indent, and the whole block is #575757. */
.legal-prose h2,.legal-prose h3,.legal-prose h4{
  font-family:var(--sans);font-size:16px;line-height:24px;font-weight:700;
  color:inherit;margin:1.5em 0 0;
}
/* The reporting and non-discrimination text is a shade darker than the site
   default, and its bold runs stay that same colour rather than going dark. */
.prose--575,.prose--575 strong{color:#575757}
.prose--575 a,.prose--575 a strong{color:var(--blue)}
/* One big blue line opens the wellness policy. */
.legal-prose h2.legal-lead{
  font-size:32px;line-height:40px;font-weight:700;color:var(--blue);margin:0 0 24px;
}
.legal-prose .flat-list,.legal-prose .flat-list ol,.legal-prose .flat-list ul{
  list-style-position:inside;padding-left:0;margin:0;
}
.legal-prose .flat-list li{margin:0}
/* The page opens with its title left-aligned above the text, not centred. */
.page-title--flush{text-align:left;color:#151515;margin:0 0 32px}

/* ---------- Dress code headings ----------
   The original set these as bold body text and one large light-weight sans
   heading rather than the site's serif headings. Matching that appearance
   while keeping real heading tags for the document outline. */
/* Measured on the original: these are bold runs in the body colour at the
   body size, not headings in the heading colour. The one exception is the
   "Appearance" pair, which is a light 32px sans line. */
.dress-prose{font-size:18px}
.dress-prose h2,.dress-prose h3{font-family:var(--sans);color:var(--ink-soft)}
.dress-prose h2{font-size:18px;line-height:27px;font-weight:700;text-decoration:underline;margin:1em 0 0}
.dress-prose h3{font-size:18px;line-height:27px;font-weight:700;margin:1em 0 0}
.dress-prose h2.dc-major{
  font-size:32px;line-height:40px;font-weight:400;color:var(--ink);
  text-decoration:none;margin:0 0 24px;
}
.dress-prose em{font-style:italic}

/* ---------- Field Day carousel ----------
   One large slide centred, the neighbours peeking either side, arrows over
   them, and a thumbnail strip below — the shape the original gallery used. */
.fd{max-width:1112px;margin:0 auto}
.fd-stage{position:relative;overflow:hidden}
.fd-track{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.fd-slide{flex:0 0 40%;padding:0 2.5px;margin:0;opacity:.3;transition:opacity .4s ease}
.fd-slide[data-active]{opacity:1}
.fd-slide img{width:100%;height:600px;object-fit:contain;background:var(--wash)}
.fd-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:64px;border:0;cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--ink);
}
.fd-nav:hover{background:rgba(255,255,255,.92)}
.fd-prev{left:0}
.fd-next{right:0}
/* chevron drawn from two borders so it scales cleanly */
.fd-nav::before{
  content:'';position:absolute;top:50%;left:50%;width:11px;height:11px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
}
.fd-prev::before{transform:translate(-50%,-50%) rotate(225deg)}
.fd-next::before{transform:translate(-50%,-50%) rotate(45deg)}

.fd-thumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  list-style:none;margin:20px 0 0;padding:0}
.fd-thumb{padding:0;border:2px solid transparent;background:none;cursor:pointer;display:block;line-height:0}
.fd-thumb img{width:80px;height:56px;object-fit:cover;display:block}
.fd-thumb[aria-current=true]{border-color:var(--blue)}
.fd-thumb:hover{border-color:var(--blue-link)}

@media (max-width:860px){
  .fd-slide{flex:0 0 80%}
  .fd-slide img{height:380px}
  .fd-thumb img{width:60px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .fd-track{transition:none}
  .fd-slide{transition:none}
}

/* ---------- Documents shown as images ----------
   Rendered from the PDFs at build time. An embedded PDF pulled in the
   browser's own viewer chrome — a dark toolbar that looked nothing like the
   page — so the page shows the rendered page and links the PDF underneath. */
.doc{width:calc((100% + 48px) * 8 / 12 - 48px);max-width:none;margin:0 auto;text-align:center}
/* Landscape documents (menus, calendars, slide decks) need the full width to
   stay readable; the original showed them much wider than the reading column. */
.doc--wide,.docpager.doc--wide{width:100%;max-width:none}
.doc img{width:100%;height:auto;border:1px solid var(--line);background:var(--white)}
.doc img + img{margin-top:16px}
.doc figcaption{font-size:16px;line-height:24px;color:var(--ink-soft);margin-top:12px}
.doc figcaption a{color:var(--blue)}

/* ---------- Multi-page document pager ---------- */
.docpager{width:calc((100% + 48px) * 8 / 12 - 48px);max-width:none;margin:0 auto}
.docpager-dl{text-align:center;font-size:16px;line-height:24px;margin:0 0 20px}
.docpager-pages{list-style:none;margin:0;padding:0}
.docpage{display:none}
.docpage[data-active]{display:block}
.docpage img{width:100%;height:auto;border:1px solid var(--line);background:var(--white)}
.docpager-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0 0;font-size:15px}
.docpager-nav button{
  background:none;border:0;padding:4px 6px;font:inherit;font-size:15px;
  color:var(--blue);cursor:pointer;
}
.docpager-nav button:hover{color:var(--blue-link)}
.docpager-nav button[disabled]{color:var(--ink-faint);cursor:default}
.doc-count{color:var(--ink-soft)}

/* ============================================================
   Responsive bands — kept last so they win over the rules above
   ============================================================ */
/* The original scales the whole page in four steps, driven by the width of
   its 12-column container. Measured off the live site at 1920/1440/1100/860:

     >=1536   container 1280   section title 32   card 379   form 805
     1280..   container 1160   section title 28   card 339   form 725
     1024..   container  984   section title 26   card 280   form 608
     <1024    container 100%   section title 26   (2 columns, form 10/12)
     <768     container 100%   section title 25   (1 column,  form 12/12)

   Everything below follows from that, so the bands are kept together here
   rather than scattered through the file. */
@media (min-width:1536px){
  :root{--wrap:1280px}
  .section-title,.route h3{font-size:32px}
  .hero-medallion h1{font-size:42px}
  .strip h2{font-size:42px}
  .btn{font-size:16px}
  .announce h3,.feature h3{font-size:24px}
  .announce p,.feature p{font-size:18px}
  .form label,.form input,.form textarea,.form .field label{font-size:16px}
  .form textarea{min-height:130px}
  .contact-details p,.contact-details address{font-size:18px;line-height:27px}
  .lede,.prose,.band-narrow{font-size:18px}
  .header-tel{font-size:20px}
  .footer-bar{font-size:14px}
  .footer-bar span{line-height:21px}
  .doc figcaption,.docpager-dl{font-size:18px;line-height:27px}
  .page-title,.person h2,.contact-details h3,.form-lede,.row-split h2,
  .sub-title,.prose .sub-title,.legal-prose .sub-title{font-size:24px}
  /* The generic prose headings come first so the two prose variants below
     override them — media queries add no specificity, so order decides. */
  .prose h2{font-size:27px}
  .prose h3{font-size:21px}
  .prose.legal-prose h2,.prose.legal-prose h3,.prose.legal-prose h4{font-size:18px;line-height:27px}
  .prose.legal-prose h2.legal-lead{font-size:36px;line-height:45px}
  .dress-prose{font-size:20px}
  .prose.dress-prose h2,.prose.dress-prose h3{font-size:20px;line-height:30px}
  .prose.dress-prose h2.dc-major{font-size:36px;line-height:45px}
  .person .role{font-size:18px;line-height:27px}
  .stops b{font-size:24px;line-height:30px}
  .stops .time{font-size:24px;line-height:24px}
  .stops em{font-size:18px;line-height:27px}
  figcaption{font-size:16px;line-height:24px}
}
@media (max-width:1279px){
  :root{--wrap:984px}
  .section-title,.route h3{font-size:26px}
  .prose.dress-prose h2.dc-major,.prose.legal-prose h2.legal-lead{font-size:30px;line-height:37.5px}
  .hero-medallion h1{font-size:33px}
  .strip h2{font-size:33px}
}
/* Below the last fixed container width the page simply fills the viewport. */
@media (max-width:1023px){
  :root{--wrap:100%}
  /* the original stacks the copyright bar's two lines, each centred */
  .footer-bar .wrap{flex-direction:column;align-items:center;text-align:center;gap:8px}
  /* two of twelve columns wider, matching the original's tablet layout */
  .form,.form-lede,.contact-details,.lede,.band-narrow,.prose,.doc,.docpager{width:calc((100% + 48px) * 10 / 12 - 48px)}
  /* the van route block keeps eight of twelve here */
  .band-narrow.route{width:calc((100% + 48px) * 8 / 12 - 48px)}
  /* a stacked aside's text column follows the band, not a fixed 725px */
  .prose-aside > .prose,.prose-aside-right > .prose{
    width:calc((100% + 48px) * 10 / 12 - 48px);margin:0 auto;
  }
  .prose-aside > img,.prose-aside-right > img{
    width:calc((100% + 48px) * 10 / 12 - 48px);margin:0 auto;
  }
  /* a landscape document keeps the whole column at every width */
  .doc--wide,.docpager.doc--wide{width:100%}
}
@media (max-width:767px){
  .section-title,.route h3{font-size:25px}
  .prose.dress-prose h2.dc-major,.prose.legal-prose h2.legal-lead{font-size:28px;line-height:35px}
  /* Below 768 the original stacks each stop: name, then the time under it
     left-aligned, then the address. */
  .stops li{grid-template-columns:1fr;grid-template-areas:"name" "time" "addr";row-gap:7px}
  .stops .time{text-align:left}
  .strip-inner{flex-wrap:wrap}
  .strip h2{flex:1 1 100%;font-size:28px}
  .form,.form-lede,.contact-details,.lede,.band-narrow,.prose,.doc,.docpager{width:100%}
  .band-narrow.route{width:100%}
  .prose-aside > .prose,.prose-aside-right > .prose,
  .prose-aside > img,.prose-aside-right > img{width:100%}
  /* Measured on the original: a 544px hero holding a 280px medallion whose
     heading drops to 28px — at 33px the four lines overflow the circle. */
  .hero{min-height:544px}
  .hero-medallion{width:min(280px,82vw);padding:41px}
  .hero-medallion h1{font-size:28px}
  .announce-text{width:100%}
}