/* ============================================================================
   St Luke's College — site.css
   Page-level patterns shared by every page. Load after colors_and_type.css
   and chrome.css. Tokens only: never introduce a hex here.
   ========================================================================== */

:root { --content-w: 1200px; --prose-w: 66ch; --band-y: 104px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------- bands */
.band { padding: var(--band-y) 0; position: relative; }
.band--tint { background: var(--sl-sand-pale); }
.band--sand { background: var(--sl-sand); }
.band--navy { background: var(--sl-navy); color: var(--fg-on-dark); }
.band--navy-2 { background: var(--sl-navy-2); color: var(--fg-on-dark); }
.band--navy h2, .band--navy h3, .band--navy-2 h2, .band--navy-2 h3 { color: var(--sl-white); }
.band--navy p, .band--navy-2 p, .band--navy li, .band--navy-2 li { color: var(--fg-on-dark-muted); }
.container { max-width: var(--content-w); margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: 880px; }
.center { text-align: center; }
.center .section-title, .center .lede { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------- section heads */
.eyebrow-line {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--sl-navy-2); margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow-line::before { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: .6; }
.center .eyebrow-line::after { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: .6; }
.band--navy .eyebrow-line, .band--navy-2 .eyebrow-line { color: var(--sl-blue); }

.section-title {
  font-size: clamp(2rem, 3.7vw, 3.05rem); line-height: 1.12;
  max-width: 25ch; margin: 0 0 20px; text-wrap: balance;
}
.section-title em { color: var(--sl-navy-2); }
.band--navy .section-title em, .band--navy-2 .section-title em { color: var(--sl-blue); }
.lede { font-size: 18.5px; color: var(--fg-2); max-width: var(--prose-w); margin: 0; }
.band--navy .lede, .band--navy-2 .lede { color: var(--fg-on-dark-muted); }

.prose p { font-size: 16.5px; color: var(--fg-2); max-width: var(--prose-w); margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose > p:first-of-type:not(:last-of-type) { font-size: 19.5px; color: var(--fg-1); }
.band--navy .prose p, .band--navy-2 .prose p { color: var(--fg-on-dark-muted); }
.band--navy .prose > p:first-of-type:not(:last-of-type) { color: var(--sl-white); }
.prose ul { padding-left: 20px; color: var(--fg-2); max-width: var(--prose-w); }
.prose li { margin-bottom: 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.center .btn-row { justify-content: center; }

/* --------------------------------------------------------------- layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split--flip > :last-child { order: -1; }
.split__media { position: relative; }
.split__media img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.split__media--arch img { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg); }
/* the offset outline window, as on the brand guide's graphic-device page */
.split__media--arch::before {
  content: ""; position: absolute; inset: -18px 18px 18px -18px; z-index: -1;
  border: 1.5px solid var(--sl-blue);
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg);
}
.split__media, .arch { isolation: isolate; }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--sl-white); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 32px 30px; box-shadow: var(--sh-card); display: flex; flex-direction: column;
}
.card h3 { font-size: 1.5rem; margin: 0 0 10px; }
.card p { font-size: 15.5px; color: var(--fg-2); margin: 0; }
.card__link { margin-top: auto; padding-top: 22px; }
.card--photo { padding: 0; overflow: hidden; }
.card--photo > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sl-navy-2); margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.card__meta::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--sl-blue)); }
.phase-preschool   { --dot: var(--phase-preschool); }
.phase-preparatory { --dot: var(--phase-preparatory); }
.phase-high        { --dot: var(--phase-high); }

/* The phase cards carry a coloured cap, so the three phases read as a set. */
.card--phase { border-top: 5px solid var(--dot); }

/* ------------------------------------------------------------ arch window */
.arch {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 50% 50% var(--r-md) var(--r-md) / 37.5% 37.5% var(--r-md) var(--r-md);
  box-shadow: var(--sh-card); background: var(--sl-sand);
}
.arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 56px; }
.arch-row--3 { grid-template-columns: repeat(3, 1fr); }
.arch-card .arch-card__label { font-family: var(--font-serif); font-size: 1.35rem; margin: 22px 0 6px; color: var(--fg-1); }
.arch-card p { font-size: 15px; color: var(--fg-2); margin: 0; }
.band--navy .arch-card .arch-card__label { color: var(--sl-white); }
.band--navy .arch-card p { color: var(--fg-on-dark-muted); }

/* --------------------------------------------------------------- reasons */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 64px; margin-top: 56px; }
.reasons--3 { grid-template-columns: repeat(3, 1fr); }
.reason { border-top: 1.5px solid var(--sl-sand-dark); padding-top: 22px; }
.reason__num { font-family: var(--font-serif); font-style: italic; color: var(--sl-navy-2); font-size: 1.1rem; display: block; margin-bottom: 8px; }
.reason h3 { font-size: 1.45rem; margin: 0 0 10px; }
.reason p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: 48ch; }
.band--navy .reason { border-top-color: var(--line-on-dark); }
.band--navy .reason__num { color: var(--sl-blue); }

/* ----------------------------------------------------------------- facts */
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.facts span {
  font-size: 13.5px; font-weight: 500; color: var(--sl-navy);
  background: var(--sl-white); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 9px 18px;
}
.band--navy .facts span { background: transparent; color: var(--sl-white); border-color: var(--line-on-dark); }

/* stat strip: three or four numbers that answer the first questions */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 54px; border-top: 1px solid var(--line-soft); }
.stat { padding: 28px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line-soft); }
.stat__num { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--sl-navy); display: block; }
.stat__num em { color: var(--sl-navy-2); }
.stat__label { display: block; margin-top: 10px; font-size: 14.5px; color: var(--fg-2); }
.band--navy .stats, .band--navy .stat + .stat { border-color: var(--line-on-dark); }
.band--navy .stat__num { color: var(--sl-white); }
.band--navy .stat__label { color: var(--fg-on-dark-muted); }

/* ------------------------------------------------------------- photo band */
.photo-band { position: relative; height: 58vh; min-height: 360px; overflow: hidden; margin: 0; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; }
.photo-band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 48px 34px;
  background: linear-gradient(180deg, rgba(0,7,90,0), rgba(0,7,90,.82));
  color: var(--sl-white); font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}
.photo-band figcaption em { color: var(--sl-blue); }
.photo-band figcaption span { display: block; max-width: var(--content-w); margin: 0 auto; }

/* --------------------------------------------------------------- quote */
.pullquote { margin: 0; max-width: 34em; }
.pullquote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.3; color: var(--sl-navy); margin: 0 0 18px; }
.pullquote cite { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-navy-2); }
.band--navy .pullquote p { color: var(--sl-white); }
.band--navy .pullquote cite { color: var(--sl-blue); }
.scripture { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--sl-navy-2); }
.band--navy .scripture { color: var(--sl-blue); }

/* ------------------------------------------------------------------ CTA */
.cta { position: relative; overflow: hidden; background: var(--sl-navy-2); color: var(--sl-white); }
.cta .container { position: relative; z-index: 1; padding-top: 92px; padding-bottom: 96px; }
.cta h2 { color: var(--sl-white); font-size: clamp(2rem, 3.8vw, 3rem); margin: 0 0 16px; max-width: 18ch; }
.cta h2 em { color: var(--sl-blue); }
.cta p { color: var(--fg-on-dark-muted); font-size: 17.5px; max-width: 54ch; margin: 0; }
.cta__crest { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 260px; opacity: .1; pointer-events: none; }

/* -------------------------------------------------------------- sub-nav */
.subnav {
  position: sticky; top: var(--wc-header-h, 80px); z-index: 40; display: flex;
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft);
}
.subnav__track {
  flex: 1; max-width: var(--content-w); margin: 0 auto; padding: 0 48px;
  display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none;
}
.subnav__track::-webkit-scrollbar { display: none; }
.subnav__track a {
  flex: none; text-decoration: none; padding: 19px 0; border-bottom: 2px solid transparent;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.subnav__track a:hover { color: var(--sl-navy); opacity: 1; }
.subnav__track a.is-active { color: var(--sl-navy-2); border-bottom-color: var(--sl-navy-2); }
.subnav__chev { display: none; }
.subnav-drop { display: none; }
@media (max-width: 899px) {
  .subnav { display: block; background: transparent; backdrop-filter: none; border: 0; }
  .subnav__track { display: none; }
  .subnav-drop { display: block; position: relative; }
}
.subnav-drop__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; cursor: pointer; background: var(--sl-navy-2); color: var(--sl-white);
  border: 0; padding: 12px 20px; font-family: inherit;
}
.subnav-drop__eyebrow { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.6); }
.subnav-drop__current { display: block; font-size: 16px; font-weight: 600; }
.subnav-drop__meta { display: flex; align-items: center; gap: 12px; }
.subnav-drop__count { font-size: 12px; color: rgba(255,255,255,.65); }
.subnav-drop__tri { width: 20px; height: 20px; transition: transform var(--dur-fast); }
.subnav-drop.is-open .subnav-drop__tri { transform: rotate(180deg); }
.subnav-drop__list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5; list-style: none; margin: 0; padding: 0;
  background: var(--sl-white); max-height: 0; overflow: hidden; box-shadow: var(--sh-lift);
  transition: max-height 300ms var(--ease-natural);
}
.subnav-drop.is-open .subnav-drop__list { max-height: 76vh; overflow: auto; }
.subnav-drop__list a { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-top: 1px solid var(--line-soft); color: var(--fg-2); text-decoration: none; }
.subnav-drop__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sl-sand-dark); }
.subnav-drop__list a.is-active { color: var(--sl-navy); font-weight: 600; background: var(--sl-sand-pale); }
.subnav-drop__list a.is-active .subnav-drop__dot { background: var(--sl-navy-2); }
[data-subnav-section] { scroll-margin-top: calc(var(--wc-header-h, 80px) + var(--wc-subnav-h, 58px) + 10px); }

/* --------------------------------------------------------------- tables */
.daytable { width: 100%; max-width: 760px; border-collapse: collapse; margin-top: 30px; }
.daytable th, .daytable td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; vertical-align: top; }
.daytable th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-navy-2); font-weight: 600; }
.daytable td:first-child { font-weight: 600; }
.daytable td:last-child, .daytable th:last-child { text-align: right; padding-right: 0; }

.fee-table-wrap { overflow-x: auto; margin-top: 18px; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--sl-white); box-shadow: var(--sh-card); }
.fee-table { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: tabular-nums; }
.fee-table th, .fee-table td { padding: 13px 18px; text-align: right; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.fee-table th:first-child, .fee-table td:first-child { text-align: left; }
.fee-table thead th { background: var(--sl-navy); color: var(--sl-white); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; vertical-align: bottom; }
.fee-table thead th small { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-on-dark-muted); margin-top: 3px; }
.fee-table .group td { background: var(--sl-sand-pale); font-weight: 600; color: var(--sl-navy-2); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.fee-table td:first-child small { display: block; color: var(--fg-3); font-size: 13px; }
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table .hl { font-weight: 600; color: var(--sl-navy); }

/* fee year toggle */
.yeartabs { display: inline-flex; padding: 5px; gap: 4px; background: var(--sl-white); border: 1px solid var(--line-soft); border-radius: var(--r-pill); margin-top: 30px; }
.yeartabs button { border: 0; background: none; cursor: pointer; padding: 10px 22px; border-radius: var(--r-pill); font: 600 14px var(--font-sans); color: var(--fg-2); }
.yeartabs button[aria-selected="true"] { background: var(--sl-navy); color: var(--sl-white); }
[data-year-panel][hidden] { display: none; }

/* -------------------------------------------------------------- steps */
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; background: var(--sl-white); border-radius: var(--r-lg); padding: 30px 26px; border: 1px solid var(--line-soft); }
.steps li::before {
  content: "0" counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 58px; margin-bottom: 18px; border-radius: 24px 24px 6px 6px;
  background: var(--sl-navy); color: var(--sl-white); font-family: var(--font-serif); font-size: 1.2rem;
}
.steps h3 { font-size: 1.3rem; margin: 0 0 8px; }
.steps p { font-size: 15px; color: var(--fg-2); margin: 0; }

/* Dark version, mirroring the admissions infographic in the brand guide:
   shield-shaped numbers on navy, the last tile a sand shield. */
.steps--dark li { background: transparent; border-color: var(--line-on-dark); }
.steps--dark li::before { background: transparent; border: 1.5px solid var(--sl-blue); color: var(--sl-white); }
.steps--dark h3 { color: var(--sl-white); }
.steps--dark p { color: var(--fg-on-dark-muted); }
.steps--dark .steps__done { background: var(--sl-sand); border-color: var(--sl-sand); }
.steps--dark .steps__done::before { content: "\2713"; background: var(--sl-navy); border-color: var(--sl-navy); }
.steps--dark .steps__done h3 { color: var(--sl-navy); }
.steps--dark .steps__done p { color: var(--fg-2); }

/* ----------------------------------------------------------- accordion */
.faq { margin-top: 30px; border-top: 1px solid var(--line-soft); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-serif); font-size: 1.22rem; color: var(--sl-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 1.8px solid var(--sl-navy-2); border-bottom: 1.8px solid var(--sl-navy-2); transform: rotate(45deg);
  transition: transform var(--dur-fast);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq__a { padding: 0 0 24px; color: var(--fg-2); max-width: 70ch; }
.faq .faq__a p:last-child { margin-bottom: 0; }
.faq-group { margin-top: 56px; }
.faq-group:first-child { margin-top: 0; }
.faq-group h2 { font-size: 1.8rem; margin: 0; }

/* --------------------------------------------------------------- people */
.people { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: center; }
.people__role { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-navy-2); margin: 0 0 8px; }
.people__name { font-size: clamp(2rem, 3.4vw, 2.7rem); margin: 0 0 22px; }

/* -------------------------------------------------------------- notes */
.note-panel { background: var(--sl-white); border-left: 3px solid var(--sl-navy-2); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 24px 28px; margin-top: 34px; max-width: 70ch; box-shadow: var(--sh-card); }
.note-panel p { margin: 0; color: var(--fg-2); font-size: 15.5px; }
.note-panel p + p { margin-top: 10px; }
.incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.incl h3 { font-size: 1.4rem; margin: 0 0 14px; }
.incl h4 { font: 600 12px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-navy-2); margin: 18px 0 8px; }
.incl ul { margin: 0; padding-left: 18px; color: var(--fg-2); font-size: 14.5px; }
.incl li { margin-bottom: 5px; }

/* ---------------------------------------------------------------- film */
.film { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--sl-navy); box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
.film__frame { position: relative; aspect-ratio: 16 / 9; }
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__sound {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px 11px 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,.95); color: var(--sl-navy); font: 600 14px var(--font-sans);
}
.film__sound svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 34px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--sl-navy); margin-bottom: 7px; }
.form input, .form select, .form textarea {
  width: 100%; font: 16px var(--font-sans); color: var(--sl-ink);
  padding: 13px 15px; border: 1px solid rgba(0,7,90,.22); border-radius: var(--r-md); background: var(--sl-white);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sl-blue); outline-offset: 1px; border-color: var(--sl-navy-2); }
.form textarea { min-height: 130px; resize: vertical; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--fg-2); }
.form .check input { width: auto; margin-top: 4px; }
.form .hp { position: absolute; left: -9999px; }
.form__status { grid-column: 1 / -1; margin: 0; font-size: 15px; min-height: 1.4em; }
.form__status.is-ok { color: var(--sl-teal); font-weight: 600; }
.form__status.is-err { color: var(--sl-clementine); font-weight: 600; }
.form-card { background: var(--sl-white); border-radius: var(--r-lg); padding: 40px; box-shadow: var(--sh-card); border: 1px solid var(--line-soft); }
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--sl-sand-pale); border: 1px solid var(--line-soft); }
.tabs button { border: 0; background: none; cursor: pointer; padding: 10px 20px; border-radius: var(--r-pill); font: 600 14px var(--font-sans); color: var(--fg-2); }
.tabs button[aria-selected="true"] { background: var(--sl-navy); color: var(--sl-white); }

/* contact details list */
.details { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 22px; }
.details li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.details svg { width: 22px; height: 22px; color: var(--sl-navy-2); margin-top: 3px; }
.details strong { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-navy-2); margin-bottom: 3px; }
.details span, .details a { font-size: 16px; color: var(--fg-1); }
.map { border: 0; width: 100%; height: 380px; border-radius: var(--r-lg); display: block; margin-top: 30px; }

/* ----------------------------------------------------------------- news */
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.news-card { text-decoration: none; color: inherit; }
.news-card:hover { opacity: 1; }
.news-card img { aspect-ratio: 16 / 10 !important; }
.news-card time, .article time { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-navy-2); display: block; margin-bottom: 10px; }
.news-card h3 { font-size: 1.35rem; margin: 0 0 10px; }
.article { max-width: 70ch; }
.article p, .article li { font-size: 17.5px; line-height: 1.7; color: var(--fg-2); }
.article p { margin: 0 0 22px; }
.article > p:first-of-type { font-size: 20px; color: var(--fg-1); }
.article h2 { font-size: 1.7rem; margin: 44px 0 16px; }
.article blockquote { margin: 30px 0; padding-left: 24px; border-left: 3px solid var(--sl-blue); font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--sl-navy); }
.article__cover { width: 100%; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 40px; box-shadow: var(--sh-card); }
.article-nav { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .rv-h .rv-line { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
  .rv-h .rv-line__i { display: block; transform: translateY(115%); transition: transform .82s cubic-bezier(.16,1,.3,1); transition-delay: var(--rv-d, 0s); }
  .rv-h.is-in .rv-line__i { transform: none; }
  .rv-fade { opacity: 0; transform: translateY(18px); transition: opacity .66s ease, transform .66s cubic-bezier(.16,1,.3,1); transition-delay: var(--rv-d, 0s); }
  .rv-fade.is-in { opacity: 1; transform: none; }
  .rv-tile { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--rv-d, 0s); }
  .rv-tile.is-in { opacity: 1; translate: none; }
}
@media (hover: hover) and (pointer: fine) {
  .card, .arch-card, .news-card { transition: transform .34s var(--ease-natural), box-shadow .34s var(--ease-natural); }
  .card:hover, .news-card:hover .card { transform: translateY(-4px); box-shadow: var(--sh-lift); }
  .arch-card:hover { transform: translateY(-5px); }
  .card--photo > img, .arch img, .split__media img { transition: transform .8s var(--ease-natural); }
  .card--photo:hover > img, .arch-card:hover .arch img { transform: scale(1.05); }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .grid--4, .arch-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .incl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split--flip > :last-child { order: 0; }
  .grid--3, .news-list, .reasons--3, .arch-row--3 { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: 1fr; gap: 36px; }
  .people .split__media { max-width: 340px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  :root { --band-y: 72px; }
  .container { padding: 0 20px; }
  .grid--2, .grid--3, .grid--4, .news-list, .reasons, .reasons--3, .steps, .incl { grid-template-columns: 1fr; }
  .arch-row, .arch-row--3 { grid-template-columns: 1fr 1fr; gap: 18px; }
  .arch-card .arch-card__label { font-size: 1.1rem; margin-top: 14px; }
  .arch-card p { font-size: 14px; }
  .form { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; }
  .photo-band figcaption { padding: 60px 20px 24px; }
  .film { margin-inline: -20px; border-radius: 0; }
  .split__media--arch::before { inset: -12px 12px 12px -12px; }
  .subnav__track { padding: 0 20px; }
  .daytable td, .daytable th { font-size: 14.5px; }
}

/* Grid children must be allowed to shrink below their content width, and long
   button labels must wrap on a phone, or a single button widens the page. */
.split > *, .grid > *, .people > * { min-width: 0; }
.split--form { grid-template-columns: 1.25fr 1fr; align-items: start; }
@media (max-width: 1000px) { .split--form { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .wc-btn { white-space: normal; text-align: center; line-height: 1.3; }
}

/* ============================================================================
   ROUND 2 (Iris's review, 7 Oct 2026)
   ========================================================================== */

/* Stats: one colour throughout, three across */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat__num em { font-style: normal; color: inherit; }
@media (max-width: 1000px) { .stats--3 { grid-template-columns: 1fr 1fr 1fr; } .stats--3 .stat:nth-child(3) { border-left: 1px solid var(--line-soft); padding-left: 24px; } }
@media (max-width: 560px) {
  .stats--3 { grid-template-columns: 1fr; }
  .stats--3 .stat, .stats--3 .stat + .stat { border-left: 0; padding: 22px 0 0; }
}

/* Campus spaces: photo tiles with the caption on the image */
.spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.space { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sh-card); background: var(--sl-navy); }
.space > img, .space__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.space figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 20px; color: var(--sl-white);
  background: linear-gradient(180deg, rgba(0,7,90,0), rgba(0,7,90,.85));
}
.space figcaption strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; }
.space figcaption span { display: block; font-size: 14px; color: var(--fg-on-dark-muted); margin-top: 2px; }
/* Stand-in until a real photo of the space arrives. Search data-placeholder. */
.space__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-bottom: 50px; background: var(--sl-navy-2); }
.space__placeholder img { width: 64px; opacity: .35; }
.space__placeholder span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@media (max-width: 1000px) { .spaces { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .spaces { grid-template-columns: 1fr; } }

/* Lucky Luke: the coffee shop's own teal and mint, from its brand lockup */
.band--mint { background: var(--sl-mint); }
.band--mint .eyebrow-line, .band--mint .section-title em { color: var(--sl-navy); }
.lucky__badge { display: flex; justify-content: center; }
.lucky__badge img { width: min(300px, 70%); height: auto; filter: drop-shadow(0 24px 34px rgba(1,169,169,.25)); }

/* Banking card on the navy band */
.bank-card { background: rgba(255,255,255,.06); border-color: var(--line-on-dark); box-shadow: none; }
.bank-card h3 { color: var(--sl-white); }
.band--navy .bank-card p { color: var(--sl-white); font-size: 16px; line-height: 1.7; }
.band--navy .bank-card p:last-child { color: var(--fg-on-dark-muted); font-size: 14px; }

/* School hours as a list, not a sentence */
.hours { margin: 14px 0 0; }
.hours div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.hours dt { color: var(--fg-2); }
.hours dd { margin: 0; font-weight: 600; color: var(--sl-navy); white-space: nowrap; }

/* News cards: equal heights, summaries clamped */
.news-card { display: flex; }
.news-card > .card { flex: 1; width: 100%; }
.news-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .card__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Hover: every rounded photo gets the same slow push, inside a frame that stays put */
.split__media, .people .split__media, .space { overflow: hidden; }
.split__media--arch { overflow: visible; }
.split__media--arch img { transition: transform .9s var(--ease-natural); }
@media (hover: hover) and (pointer: fine) {
  .split__media img, .space > img { transition: transform .9s var(--ease-natural); }
  .split__media:hover img, .space:hover > img, .arch:hover img { transform: scale(1.05); }
  .split__media--arch:hover img { transform: scale(1.035); }
}

/* The arch window is the frame; the photo moves inside it. */
.arch-frame { overflow: hidden; border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg); box-shadow: var(--sh-card); }
.split__media--arch .arch-frame img { border-radius: 0; box-shadow: none; display: block; }
@media (hover: hover) and (pointer: fine) {
  .split__media--arch:hover .arch-frame img { transform: scale(1.05); }
}
.split__media:not(.split__media--arch) { border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.split__media--teal::before { border-color: var(--sl-teal); }
.lucky__logo { display: block; width: 84px; height: auto; margin-bottom: 18px; }

/* Articles line up with the page: same left edge as the hero heading, a
   full-width cover, and a reading column of comfortable length. */
.article { max-width: none; }
.article > :not(.article__cover):not(.article-nav) { max-width: 74ch; }
.article__cover { aspect-ratio: 21 / 9; margin-bottom: 48px; }
@media (max-width: 760px) { .article__cover { aspect-ratio: 16 / 10; } }

/* Michael's portrait: a square window, so he can sit further back in the frame */
@media (min-width: 1001px) { .people { grid-template-columns: 420px 1fr; } }
.split__media--square .arch-frame img { aspect-ratio: 1 / 1; }
.split__media--square .arch-frame, .split__media--square::before { border-radius: 50% 50% var(--r-lg) var(--r-lg) / 46% 46% var(--r-lg) var(--r-lg); }
@media (max-width: 1000px) { .people .split__media--square { max-width: 400px; } }

/* Subject groups (High School core and electives) */
.pill-group { margin-top: 34px; }
.pill-group + .pill-group { margin-top: 26px; }
.pill-group__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-navy-2); margin: 0; }

/* ----------------------------------------------------------------------------
   Fee tables on a phone: a five-column table cannot be read by scrolling
   sideways, so below 760px each row becomes its own small card (the same
   pattern as the Waterford College and Broadacres fee pages). The grade is the
   heading, then one line per payment option, labelled from data-label. The
   monthly figure keeps its emphasis as a tinted pill. No JS needed.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .fee-table-wrap { overflow-x: visible; }
  .fee-table { min-width: 0; display: block; }
  .fee-table thead { display: none; }
  .fee-table tbody, .fee-table tr, .fee-table td { display: block; width: 100%; }
  .fee-table tbody tr { padding: 16px 20px 14px; border-bottom: 1px solid var(--line-soft); }
  .fee-table tbody tr:last-child { border-bottom: 0; }
  .fee-table .group { padding: 0; border-bottom: 0; }
  .fee-table .group td { padding: 12px 20px; }
  .fee-table td:first-child { padding: 0 0 10px; border: 0; font-size: 16.5px; font-weight: 600; color: var(--sl-navy); text-align: left; }
  .fee-table .group td:first-child { font-size: 12.5px; padding: 12px 20px; }
  .fee-table td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 7px 0; border: 0; text-align: right; font-size: 15px;
  }
  .fee-table td[data-label]::before {
    content: attr(data-label); flex: 1 1 auto; text-align: left;
    font-size: 13.5px; font-weight: 400; color: var(--fg-3);
  }
  .fee-table td.hl { background: var(--sl-sand-pale); border-radius: 10px; padding: 9px 12px; margin: 4px 0; }
  .fee-table td.hl::before { color: var(--sl-navy-2); font-weight: 600; }
}