/* Old Airport Ridge School theme. One stylesheet for every page.
   Part 1 is the approved Claude Design canvas CSS. Part 2 adapts it to WordPress block markup.
   Tokens follow the OARS design system. Headings: Newsreader. Text: Source Sans 3. Container 1200px, 12-column grid, 24px gutter,
   112px between sections on desktop and 72px on phones. */

:root {
  --white: #ffffff;
  --paper: #f5f6f2;
  --green-50: #e8efe6;
  --green-700: #255931;
  --green-800: #1c4626;
  --green-900: #13301d;
  --gold-400: #e2b33f;
  --ink: #16201a;
  --ink-soft: #4b574f;
  --line: #d5dcd2;
  --on-dark: #ffffff;
  --on-dark-soft: #c3d2c6;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 8px;
  --section: 112px;
}

.o { font-family: var(--sans); font-size: 17px; line-height: 27px; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
.o *, .o *::before, .o *::after { box-sizing: border-box; }
.o h1, .o h2, .o h3, .o h4, .o p, .o figure, .o blockquote, .o ul, .o ol, .o dl, .o dd { margin: 0; }
.o ul, .o ol { list-style: none; padding: 0; }
.o img { display: block; max-width: 100%; }
.o a { color: inherit; }
.o h1, .o h2 { font-family: var(--serif); font-weight: 600; color: var(--ink); text-wrap: balance; }
.o h2 { font-size: 36px; line-height: 42px; }
.o h3 { font-family: var(--sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.o p { text-wrap: pretty; }
.o :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--paper { background: var(--paper); }
.section--tint { background: var(--green-50); }
.lead { font-size: 20px; line-height: 30px; }
.soft { color: var(--ink-soft); }
.small { font-size: 14px; line-height: 20px; }

/* section heading block */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: 48px; }
.head__text { display: grid; gap: 12px; max-width: 720px; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 2px solid transparent; font: 600 16px/20px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.o .btn--primary { background: var(--green-700); color: var(--on-dark); }
.o .btn--primary:hover { background: var(--green-800); }
.o .btn--secondary { background: transparent; color: var(--green-700); border-color: var(--green-700); }
.o .btn--secondary:hover { background: var(--green-700); color: var(--on-dark); }
.o .btn--gold { background: var(--gold-400); color: var(--ink); }
.o .btn--gold:hover { background: var(--white); }
.o .btn--light { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.o .btn--light:hover { background: var(--on-dark); color: var(--green-900); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.o .more { color: var(--green-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(37, 89, 49, 0.3); transition: text-decoration-color 160ms ease; }
.o .more:hover { text-decoration-color: currentColor; }

/* ---------- header (sticky slot, shrink on scroll, dropdowns) ---------- */
.hdr-slot { position: sticky; top: 0; z-index: 60; }
.hdr { position: relative; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow 250ms ease; }
.hdr.is-scrolled { box-shadow: 0 10px 28px -18px rgba(19, 48, 29, 0.45); }
.hdr__in { display: flex; align-items: center; gap: 28px; min-height: 84px; transition: min-height 250ms ease; }
.hdr.is-scrolled .hdr__in { min-height: 68px; }
.hdr__bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--gold-400); transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; pointer-events: none; }
.o .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand img { height: 56px; width: auto; flex: none; transition: height 250ms ease; }
.hdr.is-scrolled .brand img { height: 46px; }
.brand__name { display: block; font: 600 21px/24px var(--serif); color: var(--green-900); }
.brand__sub { display: block; margin-top: 3px; font-size: 13px; line-height: 17px; color: var(--ink-soft); }
.nav { display: flex; align-items: center; gap: 24px; }
.o .nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; font: 600 16px/20px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer; transition: color 160ms ease; }
.o .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--green-700); transform: scaleX(0); transform-origin: 0 50%; transition: transform 250ms ease; }
.o .nav__link:hover, .o .nav__link.is-current { color: var(--green-700); }
.o .nav__link:hover::after, .o .nav__link.is-current::after { transform: scaleX(1); }
.nav__caret { width: 10px; height: 10px; transition: transform 200ms ease; }
.nav__group { position: relative; }
.nav__group.is-open .nav__caret { transform: rotate(180deg); }
.nav__menu { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 236px; padding: 8px; display: grid; gap: 2px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(19, 48, 29, 0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu, .nav__group.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.o .nav__menu a { display: block; padding: 10px 14px; border-radius: 6px; font: 600 16px/22px var(--sans); color: var(--ink); text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.nav__menu a span { display: block; font-weight: 400; font-size: 14px; line-height: 19px; color: var(--ink-soft); }
.o .nav__menu a:hover { background: var(--green-50); color: var(--green-800); }
.o .nav__menu a.is-current { color: var(--green-700); background: var(--paper); }
.menu-btn { display: none; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--green-700); border-radius: var(--radius); background: var(--white); color: var(--green-700); font: 600 16px/1 var(--sans); cursor: pointer; }

.mmenu { position: fixed; inset: 0; z-index: 80; background: var(--green-900); color: var(--on-dark); display: flex; flex-direction: column; overflow-y: auto; animation: oars-fade 220ms ease; }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 0 20px; border-bottom: 1px solid rgba(195, 210, 198, 0.2); }
.mmenu__top img { height: 44px; width: auto; }
.mmenu__close { min-height: 44px; padding: 0 16px; border: 2px solid var(--on-dark); border-radius: var(--radius); background: transparent; color: var(--on-dark); font: 600 16px/1 var(--sans); cursor: pointer; }
.mmenu__links { display: grid; gap: 6px; padding: 24px 20px; }
.mm__grp { display: grid; gap: 2px; padding-bottom: 8px; }
.o .mm__top { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 600 26px/32px var(--serif); color: var(--on-dark); text-decoration: none; }
.o .mm__top.is-current::before { content: ""; width: 10px; height: 10px; background: var(--gold-400); border-radius: 2px; }
.mm__subs { display: flex; flex-wrap: wrap; gap: 8px; }
.o .mm__subs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid rgba(195, 210, 198, 0.35); border-radius: 999px; font: 600 15px/1 var(--sans); color: var(--on-dark-soft); text-decoration: none; }
.o .mm__subs a.is-current { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink); }
.mmenu__foot { margin-top: auto; padding: 24px 20px 32px; display: grid; gap: 20px; color: var(--on-dark-soft); }

@media (max-width: 1220px) {
  .nav, .hdr__cta { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 600px) {
  .hdr__in, .hdr.is-scrolled .hdr__in { min-height: 64px; gap: 12px; }
  .brand img, .hdr.is-scrolled .brand img { height: 42px; }
  .brand { gap: 10px; }
  .brand__name { font-size: 17px; line-height: 20px; }
  .brand__sub { font-size: 12px; line-height: 15px; }
}
@media (max-width: 400px) { .brand__sub { display: none; } }

/* ---------- home hero: split ---------- */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 600px; background: var(--green-900); color: var(--on-dark); }
.hero-split__copy { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 80px 56px 80px max(24px, calc((100vw - 1200px) / 2)); }
.o .hero-split h1, .o .hero-full h1 { font: 600 56px/62px var(--serif); letter-spacing: -0.01em; color: var(--on-dark); max-width: 19ch; }
.hero-split__lead, .hero-full__lead { font-size: 20px; line-height: 30px; color: var(--on-dark-soft); max-width: 36ch; }
.hero-split__photo { position: relative; min-height: 360px; }
.hero-split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.o .hero-soft { color: var(--on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.o .hero-soft:hover { text-decoration-color: currentColor; }
.hero-actions { display: grid; gap: 20px; justify-items: start; margin-top: 8px; }

/* ---------- home hero: full-bleed ---------- */
.hero-full { position: relative; min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; color: var(--on-dark); background: var(--green-900); }
.hero-full__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.hero-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 48, 29, 0) 45%, rgba(19, 48, 29, 0.55) 100%); pointer-events: none; }
.hero-full .wrap { z-index: 1; }
.hero-full__panel { animation: oars-rise 900ms cubic-bezier(.2, .7, .2, 1) both 150ms; }
.hero-full .wrap { position: relative; padding-bottom: 56px; }
.hero-full__panel { display: grid; gap: 22px; max-width: 640px; padding: 40px; border-radius: var(--radius); background: rgba(19, 48, 29, 0.9); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; max-height: 420px; }
  .hero-split__copy { padding: 40px 20px 48px; gap: 18px; }
  .hero-full { display: block; min-height: 0; }
  .hero-full__img { position: static; height: 300px; transform: none !important; }
  .hero-full::after { display: none; }
  .hero-full .wrap { padding: 0; }
  .hero-full__panel { border-radius: 0; padding: 36px 20px 44px; max-width: none; background: var(--green-900); }
}
@media (max-width: 600px) {
  .o .hero-split h1, .o .hero-full h1 { font-size: 34px; line-height: 40px; }
  .hero-split__lead, .hero-full__lead { font-size: 18px; line-height: 27px; }
}

/* ---------- trust strip ---------- */
.trust { background: var(--green-50); }
.o .trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 40px; padding-bottom: 40px; }
.trust__list b { display: block; font: 600 30px/36px var(--serif); color: var(--green-900); }
.trust__list span { display: block; margin-top: 6px; font-size: 16px; line-height: 22px; }

/* ---------- split block: text and photo ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.split__text { grid-column: 1 / 7; display: grid; gap: 20px; justify-items: start; }
.split__media { grid-column: 8 / 13; }
.split--flip .split__text { grid-column: 7 / 13; }
.split__aside { grid-column: 7 / 13; }
.split__text--top { align-self: start; }
.split--flip .split__media { grid-column: 1 / 6; grid-row: 1; }
.photo { border-radius: var(--radius); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-32 { aspect-ratio: 3 / 2; }
.caption { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }

/* ---------- stage cards ---------- */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.o .stage { display: grid; gap: 18px; align-content: start; text-decoration: none; color: inherit; }
.stage__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.stage__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.stage:hover .stage__img img { transform: scale(1.03); }
.stage__body { display: grid; gap: 8px; justify-items: start; }
.stage__range { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--green-700); }

/* ---------- feature list beside a tall photo ---------- */
.features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.features__media { grid-column: 1 / 6; position: sticky; top: 100px; }
.features__body { grid-column: 7 / 13; display: grid; gap: 40px; }
.features__list { display: grid; gap: 32px; }
.features__list li { display: grid; gap: 8px; }

/* ---------- welcome (CEO) ---------- */
.welcome { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: center; }
.welcome__img { width: 240px; height: 240px; border-radius: var(--radius); overflow: hidden; }
.welcome__img img { width: 100%; height: 100%; object-fit: cover; }
.welcome__quote { font: italic 400 30px/42px var(--serif); color: var(--green-900); max-width: 40ch; }
.welcome__who { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.welcome__who b { display: block; font-size: 17px; }
.welcome__who span { display: block; font-size: 15px; color: var(--ink-soft); }

/* ---------- record of achievement ---------- */
.record { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.record li { display: grid; gap: 10px; align-content: start; padding: 32px; background: var(--white); border-radius: var(--radius); }
.record__year { font: 600 44px/48px var(--serif); color: var(--green-700); }
.record li p { color: var(--ink); }

/* ---------- class finder ---------- */
.finder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.finder__intro { grid-column: 1 / 6; display: grid; gap: 16px; }
.finder__tool { grid-column: 7 / 13; display: grid; gap: 14px; padding: 32px; background: var(--white); border-radius: var(--radius); }
.field { display: grid; gap: 8px; font-weight: 600; font-size: 16px; line-height: 20px; }
.o .field input, .o .field select, .o .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--white); font: 400 17px/24px var(--sans); color: var(--ink); }
.o .field textarea { min-height: 140px; resize: vertical; }
.o .field input:focus, .o .field select:focus, .o .field textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px var(--green-50); }
.field__help { font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.result { display: grid; gap: 4px; padding: 18px 20px; background: var(--green-50); border-radius: var(--radius); }
.result b { font: 600 30px/36px var(--serif); color: var(--green-900); }

/* ---------- school life photos ---------- */
.life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.life figure { display: grid; gap: 10px; }
.life__img { aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; }
.life__img img { width: 100%; height: 100%; object-fit: cover; }
.life figcaption { font-size: 15px; line-height: 20px; color: var(--ink-soft); }

/* ---------- news ---------- */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.o .news a { display: grid; gap: 14px; align-content: start; color: inherit; text-decoration: none; }
.news__img { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.news__img img { width: 100%; height: 100%; object-fit: cover; }
.news time { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.news h3 { font-size: 20px; line-height: 27px; transition: color 160ms ease; }
.o .news a:hover h3 { color: var(--green-700); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- call to action panel ---------- */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 56px; border-radius: var(--radius); background: var(--green-700); color: var(--on-dark); }
.o .cta h2 { color: var(--on-dark); }
.cta p { margin-top: 10px; color: var(--green-50); max-width: 52ch; }

/* ---------- page header (inner pages) ---------- */
.phead { background: var(--paper); }
.phead__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.phead__text { grid-column: 1 / 7; display: grid; gap: 18px; }
.o .phead h1 { font-size: 52px; line-height: 58px; letter-spacing: -0.01em; }
.phead__media { grid-column: 8 / 13; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { display: flex; gap: 8px; font-size: 15px; color: var(--ink-soft); }
.o .crumbs a { color: var(--green-700); text-decoration: none; font-weight: 600; }
.o .crumbs a:hover { text-decoration: underline; }

/* ---------- text columns, timeline, values, people ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.cols3 > div { display: grid; gap: 10px; align-content: start; }
.o .serif-h { font-family: var(--serif); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--green-900); }
.prose { display: grid; gap: 18px; max-width: 64ch; }
.timeline { display: grid; gap: 0; }
.timeline { gap: 4px; }
.timeline li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 24px; border-radius: var(--radius); }
.timeline li:nth-child(odd) { background: var(--white); }
.timeline b { font: 600 26px/32px var(--serif); color: var(--green-700); }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.values li { display: grid; gap: 8px; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.people li { display: grid; gap: 12px; align-content: start; }
.people__img { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.people__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.people__role { font-size: 15px; font-weight: 600; color: var(--green-700); }

/* ---------- stage detail (academics) ---------- */
.subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.subjects li { display: grid; gap: 2px; }
.subjects b { font-weight: 600; }
.subjects span { font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.stage-block + .stage-block { margin-top: 96px; }

/* ---------- steps (admissions) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--paper); border-radius: var(--radius); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-700); color: var(--on-dark); font: 600 20px/1 var(--serif); }

/* ---------- table ---------- */
.ages { width: 100%; border-collapse: collapse; font-size: 16px; }
.ages th, .ages td { text-align: left; padding: 12px 16px; }
.ages th { font-weight: 600; color: var(--ink-soft); font-size: 14px; }
.ages tbody tr:nth-child(odd) td { background: var(--paper); }
.ages td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.contact__info { grid-column: 1 / 6; display: grid; gap: 28px; }
.contact__info dt { font-size: 14px; color: var(--ink-soft); }
.contact__info dd { margin-top: 4px; font: 600 22px/30px var(--serif); color: var(--ink); }
.o .contact__info dd a { text-decoration: none; color: var(--green-700); }
.contact__form { grid-column: 7 / 13; display: grid; gap: 18px; padding: 36px; background: var(--paper); border-radius: var(--radius); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.done { display: grid; gap: 8px; padding: 20px; border-radius: var(--radius); background: var(--green-50); }

/* ---------- footer ---------- */
.ftr { background: var(--green-900); color: var(--on-dark-soft); font-size: 16px; line-height: 24px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 32px; padding-top: 80px; padding-bottom: 56px; }
.ftr__brand img { height: 92px; width: auto; }
.ftr__brand b { display: block; margin-top: 18px; font: 600 22px/28px var(--serif); color: var(--on-dark); }
.ftr__brand p { margin-top: 8px; max-width: 32ch; }
.ftr h3 { font: 600 16px/20px var(--sans); color: var(--on-dark); margin-bottom: 16px; }
.ftr li + li { margin-top: 10px; }
.o .ftr a { text-decoration: none; color: var(--on-dark-soft); }
.o .ftr a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid rgba(195, 210, 198, 0.22); font-size: 14px; line-height: 20px; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .o .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 767px) {
  :root { --section: 72px; }
  .o h2 { font-size: 28px; line-height: 34px; }
  .lead { font-size: 18px; line-height: 28px; }
  .head { margin-bottom: 32px; }
  .split, .features, .finder, .contact, .phead__in { grid-template-columns: 1fr; gap: 32px; }
  .split__text, .split__media, .split__aside, .split--flip .split__text, .split--flip .split__media,
  .features__media, .features__body, .finder__intro, .finder__tool, .contact__info, .contact__form,
  .phead__text, .phead__media { grid-column: 1 / -1; grid-row: auto; }
  .features__media { position: static; }
  .features__media .photo { aspect-ratio: 4 / 3; }
  .stages, .news, .record, .cols3 { grid-template-columns: 1fr; gap: 40px; }
  .welcome { grid-template-columns: 1fr; gap: 24px; }
  .welcome__img { width: 120px; height: 120px; }
  .welcome__quote { font-size: 22px; line-height: 32px; }
  .life { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: -20px; padding-right: 20px; padding-bottom: 8px; }
  .life figure { flex: 0 0 72%; scroll-snap-align: start; }
  .values { grid-template-columns: 1fr; gap: 28px; }
  .phead__in { padding-top: 40px; padding-bottom: 48px; }
  .o .phead h1 { font-size: 36px; line-height: 42px; }
  .phead__media { order: -1; }
  .cta { padding: 36px 24px; }
  .finder__tool, .contact__form { padding: 24px 20px; }
  .record li { padding: 24px; }
  .stage-block + .stage-block { margin-top: 64px; }
  .timeline li { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .o .trust__list { gap: 24px 16px; padding-top: 32px; padding-bottom: 32px; }
  .trust__list b { font-size: 24px; line-height: 30px; }
  .trust__list span { font-size: 15px; line-height: 21px; }
  .people { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .steps { grid-template-columns: 1fr; }
  .subjects { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 36px 16px; padding-top: 56px; }
  .btns .btn { flex: 1 1 auto; }
}
/* ======================================================================
   Motion and interaction. Reveal states only apply once the script has
   added html.oars-motion, so the page is complete without it.
   ====================================================================== */
@keyframes oars-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes oars-fade { from { opacity: 0; } to { opacity: 1; } }
.oars-motion .rv { opacity: 0; transform: translateY(32px); transition: opacity 800ms cubic-bezier(.2, .7, .2, 1), transform 800ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.oars-motion .rv.in { opacity: 1; transform: none; }
.oars-motion .rv-img { clip-path: inset(0 0 12% 0 round 8px); transition: clip-path 1100ms cubic-bezier(.2, .7, .2, 1), opacity 800ms ease; opacity: 0; }
.oars-motion .rv-img.in { clip-path: inset(0 0 0 0 round 8px); opacity: 1; }
[id] { scroll-margin-top: 96px; }

/* hover: images zoom gently, cards lift, links move. Touch screens skip it. */
.photo img, .stage__img img, .news__img img, .life__img img, .phead__media img, .people__img img, .gal img, .event__img img { transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.lift { transition: transform 260ms ease, box-shadow 260ms ease, background-color 160ms ease, border-color 160ms ease; }
.o .more::after { content: "\2192"; display: inline-block; margin-left: 8px; text-decoration: none; transition: transform 220ms ease; }
.o .btn:active { transform: scale(0.98); }
@media (hover: hover) {
  .photo:hover img, .stage:hover .stage__img img, .news a:hover .news__img img, .card:hover .news__img img, .life figure:hover img, .phead__media:hover img, .people li:hover .people__img img, .gal figure:hover img, .event:hover .event__img img { transform: scale(1.05); }
  .lift:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(19, 48, 29, 0.4); }
  .o .more:hover::after { transform: translateX(5px); }
  .o .btn:hover { transform: translateY(-1px); }
  .o .btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
}

/* ---------- photo band with parallax ---------- */
.band { position: relative; display: grid; place-items: center; min-height: 560px; overflow: hidden; background: var(--green-900); color: var(--on-dark); text-align: center; }
.band__img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(19, 48, 29, 0.72); }
.band__in { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; padding: 96px 24px; }
.band__label { font: 600 15px/20px var(--sans); color: var(--gold-400); letter-spacing: 0.04em; }
.o .band__text { font: 600 56px/64px var(--serif); color: var(--on-dark); max-width: 24ch; text-wrap: balance; }
.band__text span { display: block; color: var(--on-dark-soft); font-style: italic; font-weight: 400; }

/* ---------- plain page header (no photo) ---------- */
.phead--plain .phead__text { grid-column: 1 / 10; }

/* ---------- filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.o .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font: 600 15px/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.o .chip:hover { border-color: var(--green-700); color: var(--green-700); }
.o .chip.is-on { background: var(--green-700); border-color: var(--green-700); color: var(--on-dark); }
.chip small { font-size: 13px; font-weight: 600; opacity: 0.75; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; }

/* ---------- cards used by news and careers ---------- */
.o .card { display: grid; gap: 14px; align-content: start; color: inherit; text-decoration: none; }
.card h3 { font-size: 21px; line-height: 28px; transition: color 160ms ease; }
.o .card:hover h3 { color: var(--green-700); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.meta b { color: var(--green-700); font-weight: 600; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green-50); color: var(--green-800); font: 600 13px/1 var(--sans); white-space: nowrap; }
.tag--sample { background: #fbf0d3; color: #5c4710; }
.news__img--type { display: grid; place-items: center; background: var(--green-800); color: var(--on-dark); }
.news__img--type b { font: 600 64px/1 var(--serif); color: var(--gold-400); }

/* featured story */
.o .feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; margin-bottom: 72px; color: inherit; text-decoration: none; }
.feature .news__img { grid-column: 1 / 8; aspect-ratio: 16 / 10; }
.feature__body { grid-column: 8 / 13; display: grid; gap: 16px; justify-items: start; }
.o .feature h2 { transition: color 160ms ease; }
.o .feature:hover h2 { color: var(--green-700); }

/* article view */
.view { display: none; }
.view.is-on { display: block; animation: oars-rise 520ms cubic-bezier(.2, .7, .2, 1); }
.article { max-width: 760px; margin: 0 auto; display: grid; gap: 24px; }
.o .article h1 { font-size: 46px; line-height: 54px; letter-spacing: -0.01em; }
.article .prose { max-width: none; }
.article figure img { width: 100%; border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; }
.o .back { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 600 16px/20px var(--sans); color: var(--green-700); cursor: pointer; text-decoration: none; }
.o .back::before { content: "\2190"; transition: transform 220ms ease; }
.o .back:hover::before { transform: translateX(-4px); }
.note { padding: 16px 20px; border-left: 4px solid var(--gold-400); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; font-size: 16px; line-height: 24px; }

/* ---------- careers ---------- */
.jobs { display: grid; gap: 12px; }
.o .job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: inherit; text-decoration: none; }
.o .job:hover { border-color: var(--green-700); }
.job h3 { transition: color 160ms ease; }
.o .job:hover h3 { color: var(--green-700); }
.job__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.job__go { font-weight: 600; color: var(--green-700); white-space: nowrap; }
.job__go::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform 220ms ease; }
.o .job:hover .job__go::after { transform: translateX(5px); }
.empty { padding: 40px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); }
.jobview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.jobview__main { grid-column: 1 / 8; display: grid; gap: 28px; }
.jobview__side { grid-column: 9 / 13; position: sticky; top: 96px; display: grid; gap: 18px; padding: 28px; background: var(--paper); border-radius: var(--radius); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts dt { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.facts dd { margin-top: 2px; font-weight: 600; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 7px; border-left: 2.5px solid var(--green-700); border-bottom: 2.5px solid var(--green-700); transform: rotate(-45deg); }
.o .field input[type="file"] { padding: 10px; min-height: 0; background: var(--white); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-700); flex: none; }
.checks { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.checks legend { font-weight: 600; font-size: 16px; margin-bottom: 8px; padding: 0; }

/* ---------- clubs ---------- */
.clubs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.clubs__tabs { grid-column: 1 / 5; display: grid; gap: 8px; position: sticky; top: 96px; }
.o .ctab { display: grid; gap: 4px; width: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: left; cursor: pointer; color: var(--ink); font: inherit; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; }
.ctab__name { font: 600 22px/28px var(--serif); }
.ctab__sub { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.o .ctab:hover { border-color: var(--green-700); transform: translateX(4px); }
.o .ctab.is-on { background: var(--green-700); border-color: var(--green-700); color: var(--on-dark); transform: none; }
.o .ctab.is-on .ctab__sub { color: var(--green-50); }
.clubs__panel { grid-column: 6 / 13; }
.cpanel { display: none; gap: 28px; }
.cpanel.is-on { display: grid; animation: oars-rise 520ms cubic-bezier(.2, .7, .2, 1); }
.cpanel__art { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.cpanel__art img { width: 100%; height: 100%; object-fit: cover; }
.art { display: grid; align-content: end; gap: 10px; padding: 32px; color: var(--on-dark); }
.art__name { font: 600 48px/52px var(--serif); }
.art__note { font-size: 14px; color: var(--on-dark-soft); }
.art--a { background: var(--green-800); } .art--b { background: var(--green-700); } .art--c { background: var(--green-900); }
.art::before { content: ""; width: 56px; height: 4px; background: var(--gold-400); border-radius: 2px; order: 2; }
.events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.event { display: grid; gap: 14px; align-content: start; }
.event__img { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.event__img img { width: 100%; height: 100%; object-fit: cover; }
.houses { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.houses i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.highlight { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--radius); background: var(--green-50); }
.highlight__year { font: 600 30px/1 var(--serif); color: var(--green-700); }

/* ---------- alumni ---------- */
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gal figure { display: grid; gap: 10px; }
.gal__img { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.gal__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.gal figcaption { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.gal figcaption b { display: block; color: var(--ink); font-size: 17px; }
.benefits { display: grid; gap: 22px; counter-reset: ben; }
.benefits li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; counter-increment: ben; }
.benefits li::before { content: counter(ben); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-50); color: var(--green-800); font: 600 19px/1 var(--serif); }
.benefits h3 { font-size: 19px; line-height: 26px; }

/* ---------- parents' hub ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.o .tile { display: grid; gap: 6px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: inherit; text-decoration: none; }
.tile b { font: 600 22px/28px var(--serif); color: var(--green-900); }
.tile span { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.o .tile:hover { border-color: var(--green-700); }
.day { display: grid; gap: 0; }
.day li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.day li b { font-variant-numeric: tabular-nums; color: var(--green-700); }
.files { display: grid; gap: 10px; }
.files li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 18px 22px; background: var(--white); border-radius: var(--radius); }
.files li span { font-size: 14px; color: var(--ink-soft); }

.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- FAQs ---------- */
.faq-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.faq-main { grid-column: 1 / 9; display: grid; gap: 28px; }
.faq-side { grid-column: 9 / 13; position: sticky; top: 96px; display: grid; gap: 14px; padding: 28px; background: var(--green-900); color: var(--on-dark-soft); border-radius: var(--radius); }
.o .faq-side h2 { color: var(--on-dark); font-size: 26px; line-height: 32px; }
.o .faq-side a:not(.btn) { color: var(--on-dark); font-weight: 600; }
.search { position: relative; }
.o .search input { width: 100%; min-height: 56px; padding: 14px 18px 14px 48px; border: 1.5px solid var(--line); border-radius: var(--radius); font: 400 18px/24px var(--sans); color: var(--ink); background: var(--white); }
.o .search input:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px var(--green-50); }
.search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-soft); }
.faqs { display: grid; gap: 10px; }
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color 160ms ease; }
.faq[open] { border-color: var(--green-700); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; font: 600 18px/26px var(--sans); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-50); color: var(--green-800); font: 600 22px/1 var(--sans); transition: transform 250ms ease, background-color 160ms ease; }
.faq[open] summary::after { transform: rotate(45deg); background: var(--green-700); color: var(--on-dark); }
.faq summary:hover { color: var(--green-700); }
.faq__a { display: grid; gap: 12px; padding: 0 22px 22px; color: var(--ink); }
.faq[open] .faq__a { animation: oars-rise 380ms cubic-bezier(.2, .7, .2, 1); }
.todo { color: #7a5a06; background: #fbf0d3; padding: 0 4px; border-radius: 3px; font-weight: 600; }

/* ---------- privacy (legal) ---------- */
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.toc { grid-column: 1 / 4; position: sticky; top: 96px; display: grid; gap: 2px; }
.toc p { font-weight: 600; margin-bottom: 8px; }
.o .toc a { display: block; padding: 8px 12px; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: 15px; line-height: 21px; transition: color 160ms ease, border-color 160ms ease; }
.o .toc a:hover, .o .toc a.is-on { color: var(--green-700); border-left-color: var(--green-700); }
.o .toc a.is-on { font-weight: 600; }
.legal__body { grid-column: 5 / 12; display: grid; gap: 48px; }
.legal__body section { display: grid; gap: 14px; }
.legal__body ul { display: grid; gap: 8px; }
.legal__body ul li { position: relative; padding-left: 20px; }
.legal__body ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-700); }
.o .legal__body a { color: var(--green-700); font-weight: 600; }

/* ---------- contact map card ---------- */
.mapcard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.mapcard__art { grid-column: 1 / 8; position: relative; min-height: 360px; border-radius: var(--radius); overflow: hidden; background-color: var(--green-800); background-image: linear-gradient(rgba(195, 210, 198, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(195, 210, 198, 0.12) 1px, transparent 1px); background-size: 48px 48px; }
.mapcard__road { position: absolute; background: rgba(195, 210, 198, 0.28); border-radius: 6px; }
.pin { position: absolute; left: 54%; top: 46%; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 8px; }
.pin i { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold-400); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); animation: oars-bob 2.4s ease-in-out infinite; }
.pin span { padding: 6px 12px; border-radius: 6px; background: var(--white); color: var(--ink); font: 600 14px/18px var(--sans); white-space: nowrap; }
@keyframes oars-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.mapcard__info { grid-column: 8 / 13; display: grid; align-content: center; gap: 18px; padding: 36px; background: var(--white); border-radius: var(--radius); }

/* ---------- new layouts: tablet and phone ---------- */
@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .o .band__text { font-size: 34px; line-height: 40px; }
  .band { min-height: 420px; }
  .band__in { padding: 72px 20px; }
  .phead--plain .phead__text { grid-column: 1 / -1; }
  .o .feature, .jobview, .clubs, .faq-layout, .legal, .mapcard { grid-template-columns: 1fr; gap: 32px; }
  .feature .news__img, .feature__body, .jobview__main, .jobview__side, .clubs__tabs, .clubs__panel, .faq-main, .faq-side, .toc, .legal__body, .mapcard__art, .mapcard__info { grid-column: 1 / -1; }
  .o .feature { margin-bottom: 56px; }
  .jobview__side, .faq-side { position: static; padding: 24px 20px; }
  .clubs__tabs { position: static; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin-right: -20px; padding-right: 20px; padding-bottom: 4px; }
  .o .ctab { flex: 0 0 auto; width: auto; padding: 12px 16px; scroll-snap-align: start; }
  .ctab__sub { display: none; }
  .ctab__name { font-size: 18px; line-height: 22px; }
  .o .ctab:hover { transform: none; }
  .events { grid-template-columns: 1fr; gap: 40px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .toc { position: static; padding: 20px; background: var(--paper); border-radius: var(--radius); }
  .o .article h1 { font-size: 34px; line-height: 40px; }
  .art__name { font-size: 34px; line-height: 38px; }
  .art { padding: 24px; }
  .mapcard__art { min-height: 260px; }
  .mapcard__info { padding: 24px 20px; }
  .toolbar { margin-bottom: 28px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding-right: 20px; padding-bottom: 4px; }
  .day li { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .o .job { grid-template-columns: 1fr; padding: 22px 20px; }
  .steps--3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .o .tile { padding: 18px 16px; }
  .tile b { font-size: 19px; line-height: 24px; }
  .tile span { display: none; }
  .gal { gap: 20px 12px; }
}

/* ---------- two generations (home) ---------- */
.o .gens__line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; padding-top: 36px; }
.gens__line::before, .gens__line::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 2px; background: var(--line); }
.gens__line::after { background: var(--green-700); transform-origin: 0 50%; }
.oars-motion .gens__line.rv::after { transform: scaleX(0); transition: transform 1000ms cubic-bezier(.2, .7, .2, 1) 150ms; }
.oars-motion .gens__line.rv.in::after { transform: scaleX(1); }
.gens__line li { position: relative; z-index: 1; display: grid; gap: 4px; align-content: start; }
.gens__line li::before { content: ""; position: absolute; left: 0; top: -36px; width: 19px; height: 19px; border-radius: 50%; background: var(--white); border: 3px solid var(--green-700); }
.gens__line li.is-now::before { background: var(--gold-400); border-color: var(--gold-400); }
.gens__line b { font: 600 28px/34px var(--serif); color: var(--green-700); }
.gens__line span { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.gens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gen { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; padding: 32px; border-radius: var(--radius); background: var(--paper); }
.gen__img { aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; }
.gen__img img { width: 100%; height: 100%; object-fit: cover; }
.gen__body { display: grid; gap: 10px; justify-items: start; }
.gen__role { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--green-700); }
.o .gen__name { font: 600 28px/34px var(--serif); color: var(--green-900); }
.gen--now { background: var(--green-900); color: var(--on-dark-soft); }
.gen--now .gen__role { color: var(--gold-400); }
.o .gen--now .gen__name { color: var(--on-dark); }
.gen__quote p { font: italic 400 21px/31px var(--serif); color: var(--on-dark); }
.o .gen--now .more { color: var(--on-dark); text-decoration-color: rgba(255, 255, 255, 0.4); }
.o .gen--now .more:hover { text-decoration-color: currentColor; }

/* ---------- founder story (about) ---------- */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.story__media { grid-column: 1 / 6; position: sticky; top: 100px; }
.story__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__year { position: absolute; right: -28px; top: calc(100% - 150px); padding: 8px 20px 4px; border-radius: var(--radius); background: var(--white); font: 600 104px/1 var(--serif); color: var(--green-700); letter-spacing: -0.02em; }
.story__text { grid-column: 7 / 13; display: grid; gap: 20px; padding-top: 24px; }
.o .story__pull { margin: 12px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--gold-400); font: italic 400 28px/38px var(--serif); color: var(--green-900); }

/* ---------- CEO letter (about) ---------- */
.letter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.letter__who { grid-column: 1 / 4; position: sticky; top: 100px; display: grid; gap: 16px; }
.letter__img { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; }
.letter__img img { width: 100%; height: 100%; object-fit: cover; }
.letter__who b { display: block; font-size: 18px; }
.letter__who span { display: block; font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.letter__body { grid-column: 5 / 12; display: grid; gap: 22px; }
.o .letter__open { position: relative; font: 400 25px/38px var(--serif); color: var(--green-900); }
.letter__open::before { content: "\201C"; position: absolute; left: -0.6em; top: -0.18em; font: 600 80px/1 var(--serif); color: var(--gold-400); }
.letter__body > p:not(.letter__open):not(.letter__sign) { font-size: 18px; line-height: 30px; }
.o .letter__sign { font: italic 400 30px/36px var(--serif); color: var(--green-700); }

@media (max-width: 1024px) {
  .gen { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 24px; }
  .story__year { right: 16px; font-size: 72px; }
}
@media (max-width: 767px) {
  .o .gens__line { grid-template-columns: 1fr; gap: 20px; padding: 0 0 0 36px; margin-bottom: 32px; }
  .gens__line::before, .gens__line::after { left: 8px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
  .gens__line::after { transform-origin: 50% 0; }
  .oars-motion .gens__line.rv::after { transform: scaleY(0); }
  .oars-motion .gens__line.rv.in::after { transform: scaleY(1); }
  .gens__line li::before { left: -36px; top: 6px; }
  .gens__line b { font-size: 22px; line-height: 26px; }
  .gens { grid-template-columns: 1fr; }
  .gen { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 22px 20px; }
  .o .gen__name { font-size: 22px; line-height: 28px; }
  .gen__quote p { font-size: 18px; line-height: 27px; }
  .story, .letter { grid-template-columns: 1fr; gap: 32px; }
  .story__media, .story__text, .letter__who, .letter__body { grid-column: 1 / -1; position: relative; top: auto; }
  .story__media { position: relative; }
  .story__year { right: 12px; top: auto; bottom: 44px; font-size: 56px; padding: 6px 14px 2px; }
  .story__text { padding-top: 0; }
  .o .story__pull { font-size: 22px; line-height: 30px; }
  .letter__who { grid-template-columns: 88px minmax(0, 1fr); align-items: center; }
  .o .letter__open { font-size: 20px; line-height: 31px; padding-top: 28px; }
  .letter__open::before { left: 0; top: -0.25em; font-size: 64px; }
}


/* ======================================================================
   Part 2. WordPress adaptation. Page content is made of core blocks
   (group, heading, paragraph, image, list, table, buttons), so the
   components above are restated here for that markup.
   ====================================================================== */
body.o { margin: 0; }
.o [hidden] { display: none !important; }
.o .ftr__h { font: 600 16px/20px var(--sans); color: var(--on-dark); margin: 0 0 16px; }
.o .wp-site-blocks { padding: 0; }
.o main.wp-block-group { margin: 0; }
.o figure.wp-block-image, .o .wp-block-table { margin: 0; }
.o .wp-block-image img { display: block; }
.o .wp-block-group { box-sizing: border-box; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--white); color: var(--green-800); font-weight: 600; border-radius: var(--radius); }

/* cropped photos: the figure sets the shape, the image fills it */
.o .photo img, .o .stage__img img, .o .phead__media img, .o .people__img img, .o .event__img img,
.o .gen__img img, .o .letter__img img, .o .story__photo img, .o .gal__img img, .o .life figure img,
.o .news__img img, .o .cpanel__art img { width: 100%; height: 100%; object-fit: cover; }
.o .photo, .o .stage__img, .o .phead__media, .o .people__img, .o .event__img, .o .gen__img, .o .letter__img { overflow: hidden; border-radius: var(--radius); }

/* buttons: core button blocks carry the style class on their wrapper */
.o .wp-block-buttons.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.o .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 2px solid transparent; font: 600 16px/20px var(--sans); text-decoration: none; white-space: nowrap; background: var(--green-700); color: var(--on-dark); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.o .btn--primary > .wp-block-button__link { background: var(--green-700); color: var(--on-dark); }
.o .btn--primary > .wp-block-button__link:hover { background: var(--green-800); }
.o .btn--secondary > .wp-block-button__link { background: transparent; color: var(--green-700); border-color: var(--green-700); }
.o .btn--secondary > .wp-block-button__link:hover { background: var(--green-700); color: var(--on-dark); }
.o .btn--gold > .wp-block-button__link { background: var(--gold-400); color: var(--ink); }
.o .btn--gold > .wp-block-button__link:hover { background: var(--white); }
.o .btn--light > .wp-block-button__link { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.o .btn--light > .wp-block-button__link:hover { background: var(--on-dark); color: var(--green-900); }
@media (hover: hover) { .o .wp-block-button__link:hover { transform: translateY(-1px); } }

/* text links */
.o p.more a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(37, 89, 49, 0.3); transition: text-decoration-color 160ms ease; }
.o p.more a:hover { text-decoration-color: currentColor; }
.o p.more a::after { content: "\2192"; display: inline-block; margin-left: 8px; text-decoration: none; transition: transform 220ms ease; }
@media (hover: hover) { .o p.more a:hover::after { transform: translateX(5px); } }
.o p.hero-soft a { color: var(--on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.o p.crumbs { display: block; font-size: 15px; color: var(--ink-soft); }
.o p.crumbs a { color: var(--green-700); text-decoration: none; font-weight: 600; }
.o p.crumbs a:hover { text-decoration: underline; }
.o .prose a, .o .legal__body a, .o .faq__a a, .o .gen__body p:not(.more) a, .o .benefits a { color: var(--green-700); font-weight: 600; }

/* section heading row */
.o .head > .head__text { display: grid; gap: 12px; max-width: 720px; }

/* hero */
.o .hero-full__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; margin: 0; will-change: transform; }
.o .hero-full__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.o .hero-full__panel h1 { font: 600 56px/62px var(--serif); letter-spacing: -0.01em; color: var(--on-dark); max-width: 19ch; }
.o .hero-full__panel .hero-full__lead { font-size: 20px; line-height: 30px; color: var(--on-dark-soft); max-width: 36ch; }
.o .hero-full__panel .btns { margin-top: 6px; }
@media (max-width: 900px) {
  .o .hero-full__img { position: static; height: 300px; transform: none !important; }
  .o .hero-full__img img { height: 300px; }
}
@media (max-width: 600px) { .o .hero-full__panel h1 { font-size: 34px; line-height: 40px; } .o .hero-full__panel .hero-full__lead { font-size: 18px; line-height: 27px; } }

/* trust strip */
.o .trust__list > * { display: grid; gap: 6px; align-content: start; }
.o .trust__fig { font: 600 30px/36px var(--serif); color: var(--green-900); }
.o .trust__list > * > p:not(.trust__fig) { font-size: 16px; line-height: 22px; }
@media (max-width: 600px) { .o .trust__fig { font-size: 24px; line-height: 30px; } .o .trust__list > * > p:not(.trust__fig) { font-size: 15px; line-height: 21px; } }

/* two generations */
.o .gens__line > * { position: relative; z-index: 1; display: grid; gap: 4px; align-content: start; }
.o .gens__line > *::before { content: ""; position: absolute; left: 0; top: -36px; width: 19px; height: 19px; border-radius: 50%; background: var(--white); border: 3px solid var(--green-700); box-sizing: border-box; }
.o .gens__line > .is-now::before { background: var(--gold-400); border-color: var(--gold-400); }
.o .gl__year { font: 600 28px/34px var(--serif); color: var(--green-700); }
.o .gens__line > * > p:not(.gl__year) { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.o .gen__img--zoom img { transform: scale(1.75); transform-origin: 54% 44%; }
.o .gen__quote { font: italic 400 21px/31px var(--serif); color: var(--on-dark); }
.o .gen--now p.more a { color: var(--on-dark); text-decoration-color: rgba(255, 255, 255, 0.4); }
@media (max-width: 767px) {
  .o .gens__line > *::before { left: -36px; top: 6px; }
  .o .gl__year { font-size: 22px; line-height: 26px; }
  .o .gen__quote { font-size: 18px; line-height: 27px; }
}

/* stage cards: the whole card is a link through its heading */
.o .stage { position: relative; }
.o .stage h3 a { color: inherit; text-decoration: none; }
.o .stage h3 a::after { content: ""; position: absolute; inset: 0; }
.o .stage:hover h3 { color: var(--green-700); }
.o .stage__img { aspect-ratio: 4 / 3; }
@media (hover: hover) { .o .stage:hover .stage__img img { transform: scale(1.05); } }

/* features */
.o .features__media { grid-column: 1 / 6; position: sticky; top: 100px; }
.o .features__list > * { display: grid; gap: 8px; }

/* motto band */
.o .band__img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; margin: 0; will-change: transform; }
.o .band__img img { width: 100%; height: 100%; object-fit: cover; }
.o .band__text em { display: block; color: var(--on-dark-soft); font-style: italic; font-weight: 400; }

/* record */
.o .record > * { display: grid; gap: 10px; align-content: start; padding: 32px; background: var(--white); border-radius: var(--radius); }
.o .record__year { font: 600 44px/48px var(--serif); color: var(--green-700); }
@media (max-width: 767px) { .o .record > * { padding: 24px; } }

/* class finder tool and forms */
.o .finder__tool .result b, .o .result__cls { font: 600 30px/36px var(--serif); color: var(--green-900); }

/* life gallery */
.o .life figure { display: grid; gap: 10px; margin: 0; }
.o .life figure img { aspect-ratio: 1 / 1; border-radius: var(--radius); }
.o .life figure { overflow: visible; }
.o .life figcaption, .o .gal figcaption { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink-soft); text-align: left; }
@media (hover: hover) { .o .life figure:hover img { transform: scale(1.03); } }
@media (max-width: 767px) { .o .life figure { flex: 0 0 72%; scroll-snap-align: start; } }

/* call to action panel */
.o .cta__text { display: grid; gap: 10px; }
.o .cta__text p { margin: 0; }
.o .section--flush { padding-top: 0; }

/* page header */
.o .phead__media { grid-column: 8 / 13; aspect-ratio: 4 / 3; }
.o .phead--plain .phead__text { grid-column: 1 / 10; }
.o .phead h1 { font-size: 52px; line-height: 58px; letter-spacing: -0.01em; }
@media (max-width: 767px) { .o .phead__media { grid-column: 1 / -1; order: -1; } .o .phead h1 { font-size: 36px; line-height: 42px; } }

/* text columns */
.o .cols3 > * { display: grid; gap: 10px; align-content: start; }
.o .cols3--after { margin-top: 72px; }

/* about: timeline, values, people */
.o .timeline > * { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 24px; border-radius: var(--radius); }
.o .timeline > *:nth-child(odd) { background: var(--white); }
.o .tl__year { font: 600 26px/32px var(--serif); color: var(--green-700); }
.o .values { display: grid; grid-template-columns: 1fr; gap: 28px; }
.o .values > * { display: grid; gap: 6px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.o .values > *:last-child { padding-bottom: 0; border-bottom: 0; }
.o .people > * { display: grid; gap: 12px; align-content: start; }
.o .people__img { aspect-ratio: 4 / 5; background: var(--paper); }
.o .people__img img { object-position: 50% 20%; }
.o .people__role { font-size: 15px; font-weight: 600; color: var(--green-700); }
@media (hover: hover) { .o .people > *:hover .people__img img { transform: scale(1.04); } }
@media (max-width: 767px) { .o .timeline > * { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; } }

/* about: founder story and letter */
.o .story__media { position: sticky; top: 100px; }
.o .story__photo { margin: 0; }
.o .story__photo img { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.o .story__photo figcaption { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink-soft); text-align: left; }
.o .story__year { position: absolute; right: -28px; top: calc(100% - 180px); }
.o .letter__img { max-width: 260px; aspect-ratio: 1 / 1; }
.o .letter__name { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.o .letter__name strong { font-size: 18px; color: var(--ink); }
.o .letter__body h2 { margin-bottom: 4px; }
@media (max-width: 1024px) { .o .story__year { right: 16px; } }
@media (max-width: 767px) {
  .o .story__media { position: relative; top: auto; }
  .o .story__year { top: auto; bottom: 44px; }
  .o .letter__img { width: 88px; }
}

/* academics */
.o .stage-block__title { font-size: 30px; line-height: 36px; }
.o .subjects li { display: grid; gap: 2px; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.o .subjects li strong { font-size: 17px; line-height: 24px; color: var(--ink); font-weight: 600; }
.o .events .event { display: grid; gap: 14px; align-content: start; }
.o .event__img { aspect-ratio: 4 / 3; }
.o p.houses { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.o p.houses::before { content: ""; flex: none; width: 74px; height: 14px; background: radial-gradient(circle at 7px 7px, #2e7d32 6.5px, transparent 7px), radial-gradient(circle at 27px 7px, #f2c230 6.5px, transparent 7px), radial-gradient(circle at 47px 7px, #c62828 6.5px, transparent 7px), radial-gradient(circle at 67px 7px, #1e5aa8 6.5px, transparent 7px); }

/* admissions: steps, ages table, contact details */
.o .steps > * { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--paper); border-radius: var(--radius); counter-increment: step; }
.o .steps > *::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-700); color: var(--on-dark); font: 600 20px/1 var(--serif); }
.o .steps--white > * { background: var(--white); }
.o .ages table { width: 100%; border-collapse: collapse; font-size: 16px; }
.o .ages th, .o .ages td { text-align: left; padding: 12px 16px; border: 0; }
.o .ages thead { border: 0; }
.o .ages th { font-weight: 600; color: var(--ink-soft); font-size: 14px; }
.o .ages tbody tr:nth-child(odd) td { background: var(--paper); }
.o .section--paper .ages tbody tr:nth-child(odd) td { background: var(--white); }
.o .ages td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.o .finder__intro .ages { margin-top: 8px; }
.o .contact__info { display: grid; gap: 6px; align-content: start; }
.o .contact__info > h2, .o .contact__info > .head__text { margin-bottom: 22px; }
.o .contact__info > p.more { margin-bottom: 22px; }
.o .ci__label { font-size: 14px; color: var(--ink-soft); }
.o .ci__label:not(:first-of-type) { margin-top: 16px; }
.o .ci__value { font: 600 22px/30px var(--serif); color: var(--ink); }
.o .ci__value a { text-decoration: none; color: var(--green-700); }
.o .contact__info > p.soft { margin-top: 22px; }

/* forms (Contact Form 7 markup uses the field classes) */
.o .contact__form .wpcf7-form { display: grid; gap: 18px; }
.o .contact__form .wpcf7-form > p { margin: 0; }
.o .wpcf7-form-control-wrap { display: block; }
.o .field .wpcf7-form-control-wrap input, .o .field .wpcf7-form-control-wrap select, .o .field .wpcf7-form-control-wrap textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--white); font: 400 17px/24px var(--sans); color: var(--ink); box-sizing: border-box; }
.o .field .wpcf7-form-control-wrap textarea { min-height: 140px; height: 140px; resize: vertical; }
.o .field input[type="file"] { padding: 10px; min-height: 0; }
.o .field .wpcf7-form-control-wrap input:focus, .o .field .wpcf7-form-control-wrap select:focus, .o .field .wpcf7-form-control-wrap textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px var(--green-50); }
.o .wpcf7-submit { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius); background: var(--green-700); color: var(--on-dark); font: 600 16px/20px var(--sans); cursor: pointer; transition: background-color 160ms ease; }
.o .wpcf7-submit:hover { background: var(--green-800); }
.o .wpcf7-spinner { margin: 0 0 0 12px; }
.o .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; font-weight: 600; color: #a3261b; }
.o .wpcf7 form .wpcf7-response-output { margin: 0; padding: 16px 20px; border: 0; border-radius: var(--radius); background: var(--green-50); color: var(--green-900); font-weight: 600; }
.o .wpcf7 form.invalid .wpcf7-response-output, .o .wpcf7 form.failed .wpcf7-response-output { background: #fbe9e7; color: #7a1d14; }
.o .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.o .wpcf7-acceptance label, .o .wpcf7-checkbox label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 22px; }
.o .wpcf7-acceptance input, .o .wpcf7-checkbox input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-700); flex: none; }
.o .wpcf7-checkbox { display: grid; gap: 10px; }
.o .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.o .form-missing { padding: 24px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); }

/* map */
.o .mapcard__map { grid-column: 1 / 8; min-height: 380px; border: 0; border-radius: var(--radius); width: 100%; height: 100%; background: var(--green-50); }
@media (max-width: 767px) { .o .mapcard__map { grid-column: 1 / -1; min-height: 300px; } }

/* alumni */
.o .gal figure { display: grid; gap: 10px; margin: 0; }
.o .gal__img img { aspect-ratio: 4 / 5; border-radius: var(--radius); object-position: 50% 25%; }
.o .gal__img.pos-right img { object-position: 72% 40%; }
.o .gal figcaption strong { display: block; color: var(--ink); font-size: 17px; }
.o .gal + .note { margin-top: 40px; }
.o .benefits { display: grid; gap: 22px; counter-reset: ben; }
.o .benefits > * { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; counter-increment: ben; }
.o .benefits > *::before { content: counter(ben); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-50); color: var(--green-800); font: 600 19px/1 var(--serif); }
.o .benefits h3 { font-size: 19px; line-height: 26px; }
.o .contact__info .head__text + .benefits { margin-top: 32px; }
@media (hover: hover) { .o .gal figure:hover img { transform: scale(1.04); } }

/* parents' hub */
.o .section--tiles { padding-top: 56px; padding-bottom: 0; }
.o .tile { position: relative; }
.o .tile__title { font: 600 22px/28px var(--serif); color: var(--green-900); }
.o .tile__title a { color: inherit; text-decoration: none; }
.o .tile__title a::after { content: ""; position: absolute; inset: 0; }
.o .tile__sub { font-size: 15px; line-height: 21px; color: var(--ink-soft); }
.o .tile:hover { border-color: var(--green-700); }
.o .files { display: grid; gap: 8px; }
.o .file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 18px 22px; background: var(--paper); border-radius: var(--radius); }
.o .file__name { font-size: 14px; color: var(--ink-soft); }
.o .file__name strong { font-size: 17px; color: var(--ink); }
.o p.tag { display: inline-flex; }
.o .note--white { margin-top: 32px; background: var(--white); }
@media (max-width: 600px) { .o .tile__title { font-size: 19px; line-height: 24px; } .o .tile__sub { display: none; } }

/* FAQs side panel */
.o .faq-side p a { color: var(--on-dark); font-weight: 600; }
.o .faq-side h2 { color: var(--on-dark); font-size: 26px; line-height: 32px; }

/* privacy */
.o .toc__title { font-weight: 600; margin-bottom: 8px; }
.o .toc__link a { display: block; padding: 8px 12px; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: 15px; line-height: 21px; transition: color 160ms ease, border-color 160ms ease; }
.o .toc__link a:hover, .o .toc__link a.is-on { color: var(--green-700); border-left-color: var(--green-700); }
.o .toc__link a.is-on { font-weight: 600; }
.o .legal__sec { display: grid; gap: 14px; }
.o .legal__sec ul { display: grid; gap: 8px; }
.o .legal__sec ul li { position: relative; padding-left: 20px; }
.o .legal__sec ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-700); }

/* news and job pages (single views) */
.o .article__back { margin-bottom: 4px; }
.o .article .wp-post-image, .o .article__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.o .article__content { display: grid; gap: 18px; }
.o .article__content > * { margin: 0; }
.o .jobview__main .article__content h2 { font: 600 26px/32px var(--serif); color: var(--green-900); }
.o .jobview__main .article__content ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.o .jobview__main .article__content ul li { position: relative; padding-left: 28px; }
.o .jobview__main .article__content ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 7px; border-left: 2.5px solid var(--green-700); border-bottom: 2.5px solid var(--green-700); transform: rotate(-45deg); }
.o .closed { padding: 16px 20px; border-radius: var(--radius); background: #fbe9e7; color: #7a1d14; font-weight: 600; }

/* placeholders the school still has to fill */
.o mark.todo, .o .todo { color: #7a5a06; background: #fbf0d3; padding: 0 4px; border-radius: 3px; font-weight: 600; }

/* plain fallback pages (404, search, archives) */
.o .plain { padding-top: 72px; padding-bottom: 112px; }
.o .plain .news { margin-top: 40px; }

/* logged-in staff: keep the sticky header and phone menu below the WordPress admin bar */
.admin-bar .hdr-slot { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .mmenu { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 600px) { .admin-bar .hdr-slot { top: 0; } }

/* fixes after the first WordPress render */
.o p.more::after { content: none; }
@media (max-width: 767px) {
  .o .features__media { grid-column: 1 / -1; position: static; }
  .o .phead--plain .phead__text { grid-column: 1 / -1; }
}
.o .cpanel__title { font-size: 32px; line-height: 38px; }
.o .cpanel__content { display: grid; gap: 14px; }
.o .cpanel__content > p:first-child { font-size: 20px; line-height: 30px; }
.o .cpanel__content h4 { font-size: 19px; line-height: 26px; }
.o .cpanel__content ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.o .cpanel__content ul li { position: relative; padding-left: 28px; }
.o .cpanel__content ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 7px; border-left: 2.5px solid var(--green-700); border-bottom: 2.5px solid var(--green-700); transform: rotate(-45deg); }
.o .section:not(.section--paper) .finder__tool { background: var(--paper); }
@media (max-width: 767px) { .o .cpanel__title { font-size: 26px; line-height: 32px; } .o .cpanel__content > p:first-child { font-size: 18px; line-height: 28px; } }
/* the style class sits on the button wrapper; only the link inside is the button */
.o .wp-block-button[class*="btn--"] { background: none; border: 0; padding: 0; min-height: 0; }
.o .mmenu__foot .wp-block-button__link { width: 100%; min-height: 52px; font-size: 17px; }
.o .wpcf7-submit:disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .o *, .o *::before, .o *::after { transition: none !important; animation: none !important; }
  .hero-full__img, .band__img { transform: none !important; }
}