/* ==========================================================================
   Olive International Schools — "Modern heritage"
   A printed prospectus, brought to the screen.

   Type     Libre Caslon Display / Text for headlines, Libre Franklin for
            text, labels and navigation.
   Colour   Ivory ground, school green, crest gold. Gold is used as line,
            never as fill on light backgrounds.
   Device   The gold keyline from the crest's shield: it frames photographs,
            quarters the "four pillars" and divides sections.
   Grid     12 columns, 1240px measure, 24px gutters, 8px spacing unit.
   ========================================================================== */

:root {
  --ivory: #F6F2EA;
  --stone: #ECE6DA;
  --paper: #FBF9F4;
  --green-950: #061C16;
  --green-900: #0A2E25;
  --green-800: #0F4235;
  --green-700: #1A5444;
  --gold: #E7B649;
  --gold-soft: #EFCB7A;
  --gold-line: #C4A050;
  --gold-text: #7A5C17;
  --ink: #18221E;
  --ink-2: #47514C;
  --ink-3: #6A726E;
  --rule: #D8D0BF;
  --rule-dark: rgb(255 255 255 / .16);

  --display: "Libre Caslon Display", "Libre Caslon Text", "Big Caslon", Georgia, serif;
  --serif: "Libre Caslon Text", "Big Caslon", Georgia, serif;
  --sans: "Libre Franklin", "Franklin Gothic", "Segoe UI", system-ui, sans-serif;

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --section: clamp(72px, 6vw + 40px, 136px);
  --header-h: 92px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 clamp(1.0625rem, 1rem + .2vw, 1.125rem)/1.66 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-kerning: normal; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--green-900); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: var(--green-800); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgb(15 66 53 / .35); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
a:hover { color: var(--green-700); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold-soft); color: var(--green-950); }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 500; padding: 12px 18px; background: var(--green-900); color: var(--ivory); font: 600 .875rem var(--sans); text-decoration: none; }
.skip-link:focus { top: 16px; color: var(--ivory); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.bg-stone { background: var(--stone); }
.bg-green { background: var(--green-800); color: rgb(246 242 234 / .84); }
.bg-green h2, .bg-green h3 { color: var(--ivory); }

/* ---------- type ---------- */
.display { font-family: var(--display); font-size: clamp(2.9rem, 1.5rem + 4.3vw, 5.5rem); line-height: 1.02; letter-spacing: -.012em; }
.h1 { font-family: var(--display); font-size: clamp(2.7rem, 1.5rem + 3.6vw, 4.75rem); line-height: 1.04; letter-spacing: -.01em; }
h2 { font-family: var(--display); font-size: clamp(2.15rem, 1.35rem + 2.3vw, 3.4rem); line-height: 1.08; letter-spacing: -.006em; }
h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + .4vw, 1.55rem); line-height: 1.25; }
.statement { font-family: var(--serif); font-size: clamp(1.4rem, 1.05rem + 1.05vw, 2.05rem); line-height: 1.42; color: var(--green-900); margin: 0; }
.lede { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.label {
  display: block; margin: 0 0 24px;
  font: 600 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
}
.bg-green .label, .on-dark .label { color: var(--gold); }
.small { font-size: .9375rem; color: var(--ink-3); }
.muted { color: var(--ink-2); }

/* links with a gold line that draws out */
.go {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-800); text-decoration: none; padding: 6px 0;
}
.go::after { content: ""; width: 28px; height: 1px; background: var(--gold-line); transition: width .35s var(--ease); }
.go:hover { color: var(--green-700); }
.go:hover::after { width: 48px; }
.bg-green .go { color: var(--ivory); }
.bg-green .go::after { background: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 16px 28px;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory); background: var(--green-800); border: 1px solid var(--green-800); border-radius: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--green-900); border-color: var(--green-900); color: var(--ivory); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--green-950); }
.btn--line { background: transparent; color: var(--green-800); border-color: var(--green-800); }
.btn--line:hover { background: var(--green-800); color: var(--ivory); }
.btn--line-light { background: transparent; color: var(--ivory); border-color: rgb(246 242 234 / .7); }
.btn--line-light:hover { background: var(--ivory); color: var(--green-900); border-color: var(--ivory); }
.btn--sm { min-height: 44px; padding: 12px 20px; font-size: .75rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- signature: the keyline ---------- */
.keyline { position: relative; }
.keyline::after {
  content: ""; position: absolute; inset: var(--key, 18px); pointer-events: none; z-index: 2;
  border: 1px solid rgb(231 182 73 / .85);
}
.rule-gold { display: flex; align-items: center; gap: 18px; color: var(--gold-line); margin: 0 auto; max-width: 420px; }
.rule-gold::before, .rule-gold::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.rule-gold span { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex: none; }

/* ---------- photos: one consistent, warm grade ---------- */
.photo { overflow: hidden; background: var(--stone); margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.04) sepia(.1) brightness(1.01); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ivory); color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; flex: none; }
.brand .crest { width: 52px; height: auto; }
.brand .crest--on-dark { display: none; }
.wordmark { display: flex; flex-direction: column; gap: 6px; line-height: 1; }
.wordmark b { font: 400 1.0625rem/1.05 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--green-900); transition: color .35s var(--ease); }
.wordmark small { font: 600 .625rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); transition: color .35s var(--ease); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.nav ul { list-style: none; display: flex; gap: 28px; }
.nav ul a {
  position: relative; display: block; padding: 10px 0;
  font: 600 .78rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: inherit; text-decoration: none;
}
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold-line);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav ul a:hover { color: inherit; }
.nav-contact { display: none; }
.header-actions { display: none; margin-left: auto; align-items: center; gap: 10px; }
.menu-toggle {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid currentColor; border-radius: 0; color: inherit; cursor: pointer;
}
.menu-toggle .bars { position: relative; width: 20px; height: 11px; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars::after { top: 9px; }
.menu-toggle[aria-expanded="true"] .bars::before { top: 4.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { top: 4.5px; transform: rotate(-45deg); }

/* home: the header sits over the photograph until the page scrolls */
.page-home .site-header { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: var(--ivory); }
.page-home .site-header .wordmark b { color: var(--ivory); }
.page-home .site-header .wordmark small { color: var(--gold); }
.page-home .site-header .crest--on-dark { display: block; }
.page-home .site-header .crest--on-light { display: none; }
.page-home .site-header .btn { background: transparent; color: var(--ivory); border-color: rgb(246 242 234 / .7); }
.page-home .site-header .btn:hover { background: var(--ivory); color: var(--green-900); }
.page-home .site-header.is-scrolled, .page-home.menu-open .site-header { background: var(--ivory); border-color: var(--rule); color: var(--ink); box-shadow: 0 10px 30px -24px rgb(6 28 22 / .5); }
.page-home .site-header.is-scrolled .wordmark b, .page-home.menu-open .site-header .wordmark b { color: var(--green-900); }
.page-home .site-header.is-scrolled .wordmark small, .page-home.menu-open .site-header .wordmark small { color: var(--gold-text); }
.page-home .site-header.is-scrolled .crest--on-dark, .page-home.menu-open .site-header .crest--on-dark { display: none; }
.page-home .site-header.is-scrolled .crest--on-light, .page-home.menu-open .site-header .crest--on-light { display: block; }
.page-home .site-header.is-scrolled .btn, .page-home.menu-open .site-header .btn { background: var(--green-800); color: var(--ivory); border-color: var(--green-800); }

@media (max-width: 1220px) {
  :root { --header-h: 76px; }
  .brand .crest { width: 44px; }
  .header-actions { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); color: var(--ink); padding: 16px var(--gutter) 40px; overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility 0s linear .25s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transition: opacity .25s var(--ease); }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul li { border-bottom: 1px solid var(--rule); }
  .nav ul a { padding: 20px 0; font: 400 1.75rem/1.1 var(--display); letter-spacing: 0; text-transform: none; color: var(--green-900); }
  .nav ul a::after { display: none; }
  .nav ul a[aria-current="page"] { color: var(--gold-text); }
  .nav > .btn { margin-top: 28px; width: 100%; }
  .page-home .site-header .nav > .btn { background: var(--green-800); color: var(--ivory); border-color: var(--green-800); }
  .nav-contact { display: grid; gap: 8px; margin-top: 24px; font-size: .9375rem; color: var(--ink-2); }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 1221px) { .header-actions { display: none !important; } }
@media (max-width: 560px) {
  .header-inner { gap: 10px; }
  .brand { gap: 10px; min-width: 0; flex: 1 1 auto; }
  .brand .crest { width: 38px; }
  .wordmark { min-width: 0; }
  .wordmark b { font-size: .8125rem; letter-spacing: .07em; line-height: 1.25; }
  .wordmark small { display: none; }
  .header-actions .btn { min-height: 46px; padding: 10px 14px; font-size: .6875rem; letter-spacing: .12em; }
}

/* ---------- inner page opener: title block, then a wide photograph ---------- */
.opener { padding-top: clamp(48px, 5vw, 80px); }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { color: var(--gold-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.opener h1 { max-width: 13em; }
.opener-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-top: 28px; padding-bottom: clamp(36px, 4vw, 56px); }
.opener-foot .lede { grid-column: 1 / span 6; margin: 0; }
.opener-foot .actions { grid-column: 8 / span 5; justify-content: flex-end; }
.opener-photo { height: clamp(300px, 44vw, 560px); }
.opener-photo.keyline { --key: 20px; }
@media (max-width: 860px) {
  .opener-foot .lede, .opener-foot .actions { grid-column: 1 / -1; }
  .opener-foot .actions { justify-content: flex-start; margin-top: 28px; }
  .opener-photo.keyline { --key: 12px; }
}

/* ---------- welcome: statement + "at a glance" ---------- */
.welcome { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.welcome-main { grid-column: 1 / span 7; }
.welcome-main p:not(.statement) { color: var(--ink-2); }
.welcome-main .statement { margin-bottom: 32px; }
.glance { grid-column: 9 / span 4; }
.glance h2 { font: 600 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 18px; }
.glance dl { margin: 0; border-top: 1px solid var(--green-800); }
.glance div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.glance dt { font-size: .8125rem; color: var(--ink-3); margin-bottom: 4px; }
.glance dd { margin: 0; font-family: var(--serif); font-size: 1.125rem; color: var(--green-900); }
.glance dd a { color: inherit; text-decoration: none; }
.glance dd a:hover { text-decoration: underline; text-decoration-color: var(--gold-line); }
@media (max-width: 960px) {
  .welcome-main, .glance { grid-column: 1 / -1; }
  .glance { margin-top: 56px; }
}

/* ---------- section heads ---------- */
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: clamp(40px, 4vw, 64px); }
.head > div:first-child { grid-column: 1 / span 7; }
.head > p, .head > .head-side { grid-column: 9 / span 4; margin: 0; color: var(--ink-2); }
.bg-green .head > p { color: rgb(246 242 234 / .78); }
@media (max-width: 860px) {
  .head > div:first-child, .head > p, .head > .head-side { grid-column: 1 / -1; }
  .head > p, .head > .head-side { margin-top: 18px; }
}

/* ---------- programmes (three columns, numbered) ---------- */
.programmes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.4vw, 36px); }
.programme { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.programme .photo { aspect-ratio: 4 / 3; margin-bottom: 28px; }
.programme .photo img { transition: transform 1.1s var(--ease); }
.programme:hover .photo img { transform: scale(1.04); }
.programme h3 { margin-bottom: 8px; }
.programme .meta { font: 600 .72rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.programme p { color: var(--ink-2); font-size: 1rem; }
.programme .go { margin-top: auto; align-self: flex-start; }
.programme:hover { color: inherit; }
.programme:hover h3 { color: var(--green-700); }
.programmes--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
@media (max-width: 1100px) { .programmes:not(.programmes--three) { grid-template-columns: 1fr 1fr; row-gap: 56px; } }
@media (max-width: 860px) { .programmes--three { grid-template-columns: 1fr; row-gap: 56px; max-width: 560px; } }
@media (max-width: 640px) { .programmes { grid-template-columns: 1fr; } }

/* ---------- the four quarters, laid out like the shield ---------- */
.quarters { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.quarters::before, .quarters::after { content: ""; position: absolute; background: var(--gold); opacity: .75; }
.quarters::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.quarters::after { top: 50%; left: 0; right: 0; height: 1px; }
.quarters .jewel { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); z-index: 1; }
.quarter { padding: clamp(40px, 4.5vw, 64px) clamp(28px, 4.5vw, 72px); }
.quarter:nth-of-type(odd) { padding-left: 0; }
.quarter:nth-of-type(even) { padding-right: 0; }
.quarter svg { width: 56px; height: 48px; color: var(--gold); --cut: var(--green-800); margin-bottom: 28px; }
.quarter .label { margin-bottom: 10px; }
.quarter h3 { font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 1.1vw, 2.5rem); margin-bottom: 14px; }
.quarter p { margin: 0; color: rgb(246 242 234 / .8); max-width: 30em; }
@media (max-width: 760px) {
  .quarters { grid-template-columns: 1fr; }
  .quarters::before, .quarters::after, .quarters .jewel { display: none; }
  .quarter, .quarter:nth-of-type(odd), .quarter:nth-of-type(even) { padding: 36px 0; border-top: 1px solid rgb(231 182 73 / .55); }
}

/* ---------- feature: wide photograph with a framed card ---------- */
.feature { padding-bottom: var(--section); }
.feature-photo { height: clamp(360px, 50vw, 660px); }
.feature-photo.keyline { --key: 20px; }
.feature-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.feature-aside { grid-column: 1 / span 5; padding-top: clamp(56px, 6vw, 88px); }
.feature-aside .statement { margin-bottom: 24px; }
.feature-aside p:not(.statement) { color: var(--ink-2); }
.feature-card {
  grid-column: 7 / span 6; position: relative; z-index: 3; background: var(--paper);
  margin-top: -240px; padding: clamp(36px, 4vw, 56px);
  box-shadow: 0 40px 70px -50px rgb(6 28 22 / .55);
}
.feature-card::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-line); pointer-events: none; opacity: .7; }
.feature-card h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); margin-bottom: 18px; }
.feature-card p { color: var(--ink-2); }
.feature-card ul { list-style: none; margin: 4px 0 28px; border-top: 1px solid var(--rule); }
.feature-card li { padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 1rem; }
.feature-card li strong { color: var(--ink); font-weight: 600; }
.feature-card .go, .feature-card .btn { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .feature-card { grid-column: 1 / -1; grid-row: 1; margin-top: -72px; }
  .feature-aside { grid-column: 1 / -1; grid-row: 2; padding-top: 48px; }
  .feature-photo.keyline { --key: 12px; }
}

/* ---------- heading beside content ---------- */
.side { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.side > :first-child { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 32px); }
.side > :last-child { grid-column: 6 / span 7; }
.side > :first-child p { color: var(--ink-2); margin-top: 20px; }
@media (max-width: 900px) {
  .side > :first-child, .side > :last-child { grid-column: 1 / -1; }
  .side > :first-child { position: static; }
  .side > :last-child { margin-top: 40px; }
}

/* ---------- dated list ---------- */
/* key dates: a timeline. A gold line runs down the left with a diamond at each date;
   the line is gold up to today, past dates are dimmed, and the current or next date is marked */
.dates { --rail: 11px; --dot-top: 30px; position: relative; list-style: none; padding-left: 44px; border-top: 0; }
.dates li:first-child { border-top: 1px solid var(--green-800); }
.dates::before { content: ""; position: absolute; left: var(--rail); top: calc(var(--dot-top) + 5px); bottom: 30px; width: 1px; background: var(--rule); }
.dates .is-past::after { /* gold from this date down to the next one */
  content: ""; position: absolute; left: calc(var(--rail) - 44px); top: calc(var(--dot-top) + 5px); bottom: calc(-1 * var(--dot-top) - 6px);
  width: 1px; background: var(--gold); transform-origin: top;
}
.dates li { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: opacity .5s var(--ease); }
.dates li::before { /* the diamond */
  content: ""; position: absolute; left: calc(var(--rail) - 44px - 5px); top: var(--dot-top); z-index: 1;
  width: 11px; height: 11px; box-sizing: border-box; rotate: 45deg;
  background: var(--ivory); border: 1.5px solid var(--gold);
}
.dates .when { font-family: var(--serif); font-size: 1.125rem; color: var(--green-900); }
.dates strong { display: block; font-weight: 600; color: var(--ink); }
.dates span { display: block; color: var(--ink-2); font-size: 1rem; }
.dates .is-past { opacity: .5; }
.dates .is-past:last-child::after { display: none; }
.dates .is-past::before { background: var(--gold); border-color: var(--gold); }
.dates :is(.is-now, .is-next)::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgb(231 182 73 / .2); }
.dates :is(.is-now, .is-next) .when::after {
  display: block; width: max-content; margin-top: 8px; padding: 4px 7px 3px;
  font: 700 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: var(--green-800); color: var(--ivory);
}
.dates .is-now .when::after { content: "Now"; }
.dates .is-next .when::after { content: "Next"; background: transparent; color: var(--gold-text); box-shadow: inset 0 0 0 1px var(--gold-line); }
.bg-stone .dates li::before { background: var(--stone, #ECE5D8); }
@media (max-width: 560px) {
  .dates { --rail: 5px; padding-left: 30px; }
  .dates li { grid-template-columns: 1fr; }
  .dates li::before { left: calc(var(--rail) - 30px - 5px); }
  .dates .is-past::after { left: calc(var(--rail) - 30px); }
}
@media (prefers-reduced-motion: no-preference) {
  .dates .is-now::before { animation: halo 2.6s var(--ease) infinite; }
  @keyframes halo { 0% { box-shadow: 0 0 0 0 rgb(231 182 73 / .5); } 70%, 100% { box-shadow: 0 0 0 10px rgb(231 182 73 / 0); } }
  /* as the list arrives, the diamonds appear one by one and the gold line draws down to today */
  .js-motion .dates li::before { scale: 0; transition: scale .45s var(--ease) calc(var(--i, 0) * 110ms + 150ms); }
  .js-motion .dates .is-past::after { scale: 1 0; transition: scale .5s var(--ease) calc(var(--i, 0) * 110ms + 250ms); }
  .js-motion .dates.is-in li::before { scale: 1; }
  .js-motion .dates.is-in .is-past::after { scale: 1 1; }
}

/* ---------- motto ---------- */
.motto { text-align: center; padding-block: clamp(80px, 9vw, 150px); }
.motto img { width: 76px; margin: 0 auto 36px; }
.motto p { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); line-height: 1.02; letter-spacing: -.01em; color: var(--green-900); }
.motto p.motto-line > span { display: block; }
.motto p .m1 { color: var(--green-900); }
.motto p .m2 { color: var(--gold-text); }
.motto .rule-gold { margin-top: 44px; }

/* ---------- contact block ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.contact-grid > :first-child { grid-column: 1 / span 5; }
.contact-grid > :last-child { grid-column: 7 / span 6; }
.contact-grid > :first-child p { color: var(--ink-2); margin: 20px 0 32px; }
.details { margin: 0; border-top: 1px solid var(--green-800); }
.details div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.details dt { font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.details dd { margin: 0; font-family: var(--serif); font-size: 1.15rem; color: var(--green-900); overflow-wrap: anywhere; }
.details dd a { color: inherit; text-decoration: none; background: linear-gradient(var(--gold-line), var(--gold-line)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.details dd a:hover { background-size: 100% 1px; }
@media (max-width: 860px) {
  .contact-grid > :first-child, .contact-grid > :last-child { grid-column: 1 / -1; }
  .contact-grid > :last-child { margin-top: 40px; }
}
@media (max-width: 520px) { .details div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- call-to-action band ---------- */
.cta-band { padding-block: clamp(64px, 6vw, 104px); }
.cta-band .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.cta-band .wrap > div:first-child { grid-column: 1 / span 7; }
.cta-band .actions { grid-column: 8 / span 5; justify-content: flex-end; }
.cta-band p { margin: 18px 0 0; max-width: 36em; }
@media (max-width: 860px) {
  .cta-band .wrap > div:first-child, .cta-band .actions { grid-column: 1 / -1; }
  .cta-band .actions { justify-content: flex-start; margin-top: 32px; }
}

/* ---------- two programmes side by side ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); }
.compare article { scroll-margin-top: calc(var(--header-h) + 24px); }
.compare .photo { aspect-ratio: 3 / 2; margin-bottom: 32px; }
.compare h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); margin-bottom: 10px; }
.compare .meta { font: 600 .72rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; }
.compare p { color: var(--ink-2); }
.facts { margin: 28px 0 0; border-top: 1px solid var(--green-800); }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 600 .72rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }

/* ---------- pathway timeline ---------- */
.pathway { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; padding-top: 48px; }
.pathway::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--gold-line); }
.pathway li { position: relative; }
.pathway li::before { content: ""; position: absolute; top: -48px; left: 0; width: 13px; height: 13px; background: var(--ivory); border: 1px solid var(--gold-line); transform: rotate(45deg); }
.pathway li:last-child::before { background: var(--gold); border-color: var(--gold); }
.pathway .meta { display: block; font: 600 .72rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.pathway h3 { margin-bottom: 10px; }
.pathway p { color: var(--ink-2); font-size: 1rem; margin: 0; }
@media (max-width: 860px) {
  .pathway { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 36px; }
  .pathway::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .pathway li::before { top: 4px; left: -40px; }
}

/* ---------- subjects ---------- */
.subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.subjects h3 { padding-bottom: 16px; border-bottom: 1px solid var(--green-800); font-size: 1.35rem; }
.subjects ul { list-style: none; }
.subjects li { padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
@media (max-width: 860px) { .subjects { grid-template-columns: 1fr; } }

/* ---------- photograph beside text ---------- */
.pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.pair > .photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.pair > .pair-text { grid-column: 7 / span 6; }
.pair-text p:not(.statement) { color: var(--ink-2); }
.pair-text .statement { margin-bottom: 28px; }
@media (max-width: 860px) {
  .pair > .photo, .pair > .pair-text { grid-column: 1 / -1; }
  .pair > .photo { aspect-ratio: 4 / 3; margin-bottom: 40px; }
}

/* ---------- three ruled columns ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.trio > div { border-top: 1px solid var(--green-800); padding-top: 28px; }
.trio .statement { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); }
.trio .small { margin: 16px 0 0; }
.trio .numeral { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--gold-text); margin-bottom: 16px; }
.trio h3 { margin-bottom: 12px; }
.trio p { margin: 0; color: var(--ink-2); }
.bg-green .trio > div { border-top-color: rgb(231 182 73 / .7); }
.bg-green .trio .numeral { color: var(--gold); }
.bg-green .trio h3 { font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 1vw, 2.4rem); }
.bg-green .trio p { color: rgb(246 242 234 / .8); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* ---------- the crest and its key ---------- */
.crest-key { display: grid; grid-template-columns: 1fr minmax(240px, 360px) 1fr; gap: 24px clamp(28px, 4vw, 64px); align-items: center; }
.crest-key > img { grid-column: 2; grid-row: 1; width: 100%; }
.crest-key .col { display: grid; gap: 40px; grid-row: 1; }
.crest-key .col--left { grid-column: 1; text-align: right; }
.crest-key .col--right { grid-column: 3; }
.crest-key .part { border-top: 1px solid var(--rule); padding-top: 20px; }
.crest-key .part h3 { font-size: 1.3rem; margin-bottom: 6px; }
.crest-key .part p { margin: 0; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 900px) {
  .crest-key { grid-template-columns: 1fr; }
  .crest-key > img { grid-column: 1; width: min(300px, 80%); margin: 0 auto 16px; }
  .crest-key .col, .crest-key .col--left, .crest-key .col--right { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ---------- steps (admissions) ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--green-800); padding-top: 24px; }
.steps li::before { content: counter(step, upper-roman); display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--gold-text); margin-bottom: 20px; }
.steps h3 { margin-bottom: 10px; }
.steps p { margin: 0; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- enquiry form ---------- */
.enquire { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.enquire > .form { grid-column: 1 / span 7; }
.enquire > aside { grid-column: 9 / span 4; }
.enquire > aside h2 { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); margin-bottom: 24px; }
.form { position: relative; background: var(--paper); padding: clamp(32px, 4vw, 56px); box-shadow: 0 40px 70px -56px rgb(6 28 22 / .5); }
.form::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-line); opacity: .6; pointer-events: none; }
.form > * { position: relative; z-index: 1; }
.form h2 { font-size: clamp(2rem, 1.5rem + 1.3vw, 2.6rem); }
.form > p { color: var(--ink-2); margin: 14px 0 32px; }
.field { display: grid; gap: 8px; margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
label, legend { font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.optional { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-3); }
input[type="text"], input[type="tel"], textarea {
  width: 100%; min-height: 50px; padding: 12px 0;
  font: 400 1.0625rem/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid #B9B1A1; border-radius: 0;
  transition: border-color .2s var(--ease);
}
textarea { min-height: 104px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-bottom-color: var(--green-800); box-shadow: 0 1px 0 var(--green-800); }
input::placeholder, textarea::placeholder { color: #9A9F9C; }
fieldset { border: 0; margin: 4px 0 24px; padding: 0; }
legend { margin-bottom: 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid #B9B1A1; font-size: .9375rem; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.choice input:checked + span { background: var(--green-800); border-color: var(--green-800); color: var(--ivory); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form .actions { margin-top: 8px; }
.form-note { margin: 18px 0 0; font-size: .875rem; color: var(--ink-3); }
@media (max-width: 960px) { .enquire > .form, .enquire > aside { grid-column: 1 / -1; } .enquire > aside { margin-top: 56px; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .form .actions .btn { flex: 1 1 100%; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--green-800); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); color: var(--green-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 1.6rem/1 var(--sans); color: var(--gold-text); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--green-700); }
.faq .answer { padding: 0 0 26px; color: var(--ink-2); max-width: 64ch; }
.faq .answer p:last-child { margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--green-950); color: rgb(246 242 234 / .72); font-size: .9375rem; }
.footer-crest { text-align: center; padding: clamp(64px, 6vw, 96px) 0 clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--rule-dark); }
.footer-crest img { width: 92px; margin: 0 auto 24px; }
.footer-crest b { display: block; font: 400 1.25rem/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); }
.footer-crest span { display: block; margin-top: 12px; font-family: var(--serif); font-size: 1.05rem; color: var(--gold); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-block: 56px; }
.site-footer h2 { font: 600 .72rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a { color: rgb(246 242 234 / .88); text-decoration: none; }
.site-footer a:hover { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold); }
.site-footer p { margin: 0; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(246 242 234 / .25); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-950); text-decoration: none; }
.socials svg { width: 18px; height: 18px; }
.footer-base { border-top: 1px solid var(--rule-dark); }
.footer-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px; font-size: .8125rem; color: rgb(246 242 234 / .55); }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

/* ---------- WhatsApp shortcut (phones) ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 90; display: none; align-items: center; gap: 10px;
  padding: 13px 18px; background: var(--green-800); color: var(--ivory);
  font: 600 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 14px 30px -12px rgb(6 28 22 / .6);
}
.wa-float svg { width: 19px; height: 19px; color: var(--gold); }
.wa-float:hover { color: var(--ivory); background: var(--green-900); }
@media (max-width: 760px) { .wa-float { display: inline-flex; } }

/* ---------- error page ---------- */
.lost { min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; text-align: center; padding-block: 96px; }
.lost img { width: 110px; margin: 0 auto 32px; }
.lost p { color: var(--ink-2); max-width: 32em; margin: 20px auto 32px; }
.lost .actions { justify-content: center; }

/* ---------- arrival: blocks and photographs ease in once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
}

@media print {
  .site-header, .wa-float, .menu-toggle { display: none !important; }
  .bg-green, .site-footer { background: #fff !important; color: #000 !important; }
}

/* ---------- small corrections ---------- */
.enquire aside .details div { grid-template-columns: 1fr; gap: 4px; }
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; line-height: 1.3; } }

/* ---------- calmer rhythm: a hairline rule between sections that share a background ---------- */
.section--ruled { padding-top: 0; }
/* the rule between sections: two fine lines meeting at a small olive sprig */
.section--ruled > .wrap {
  position: relative; padding-top: var(--section);
  background:
    linear-gradient(var(--rule), var(--rule)) left top / calc(50% - 84px) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right top / calc(50% - 84px) 1px no-repeat;
}
.section--ruled > .wrap::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 145px; height: 29px; translate: -50% -50%;
  background: var(--gold-text);
  -webkit-mask: url(/assets/img/sprig-divider.svg) center / contain no-repeat;
  mask: url(/assets/img/sprig-divider.svg) center / contain no-repeat;
}

/* a large, faint olive branch drawn behind a green section */
.has-branch { position: relative; overflow: hidden; isolation: isolate; }
.has-branch::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -9%; top: -16%; width: min(56vw, 780px); aspect-ratio: 680 / 600;
  background: url(/assets/img/olive-branch.svg) center / contain no-repeat;
  opacity: .085; transform-origin: 85% 15%;
}
.js-motion .has-branch::before { translate: 0 calc(var(--p, 0) * -40px); rotate: calc(var(--p, 0) * -3deg); }
@media (max-width: 760px) { .has-branch::before { width: 110vw; right: -30%; top: -2%; opacity: .08; } }
.quarter svg + h3 { margin-top: 0; }
.motto-invite { max-width: 34em; margin: 40px auto 28px !important; font: 400 1.0625rem/1.6 var(--sans) !important; color: var(--ink-2) !important; letter-spacing: 0 !important; }
.motto-invite a { color: var(--green-800); }
.motto .actions { justify-content: center; }

/* ---------- home hero: a bright photograph, with a printed plate laid over its corner ---------- */
.hero { position: relative; background: var(--ivory); --overlap: clamp(220px, 26vh, 300px); }
.hero-photo { position: relative; height: clamp(580px, 88svh, 900px); background: var(--green-950); }
.hero-photo img { filter: saturate(.9) contrast(1.04) sepia(.06) brightness(1.03); }
.hero-photo::before { /* only enough shade at the top for the menu to read */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(6 28 22 / .6), rgb(6 28 22 / 0));
}
.hero-photo.keyline { --key: calc(var(--header-h) + 8px) 24px 24px; }
.hero-grid {
  position: relative; z-index: 4; margin-top: calc(-1 * var(--overlap));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
}
.hero-plate {
  grid-column: 1 / span 6; position: relative;
  background: var(--green-900); color: rgb(246 242 234 / .86);
  padding: clamp(40px, 4.4vw, 68px);
  box-shadow: 0 60px 90px -60px rgb(6 28 22 / .75);
}
.hero-plate::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(231 182 73 / .5); pointer-events: none; }
.hero-plate > * { position: relative; z-index: 1; }
.hero-plate .label { color: var(--gold); margin-bottom: 22px; }
.hero-plate h1 { color: var(--ivory); font-family: var(--display); font-size: clamp(2.7rem, 1.3rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.012em; }
.hero-plate p { margin: 24px 0 36px; font-size: 1.125rem; line-height: 1.6; max-width: 26em; color: rgb(246 242 234 / .84); }
.hero-facts { grid-column: 8 / span 5; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 4px; }
.hero-facts li { padding: 2px 0 2px 20px; border-left: 1px solid var(--gold-line); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-facts small { display: block; margin-bottom: 10px; font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hero-facts b { display: block; font: 400 1.15rem/1.3 var(--serif); color: var(--green-900); }
@media (min-width: 1500px) { .hero-plate { grid-column: 1 / span 5; } .hero-facts { grid-column: 7 / span 6; } }
@media (max-width: 1000px) {
  .hero { --overlap: 72px; }
  .hero-photo { height: clamp(360px, 62svh, 600px); }
  .hero-photo.keyline { --key: calc(var(--header-h) + 6px) 12px 12px; }
  .hero-plate { grid-column: 1 / -1; }
  .hero-facts { grid-column: 1 / -1; margin-top: 36px; }
}
@media (max-width: 560px) {
  .hero-plate { margin-inline: calc(-1 * var(--gutter) + 12px); padding: 40px 28px; }
  .hero-plate .actions .btn { flex: 1 1 100%; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts li, .hero-facts li:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .hero-facts li:last-child { border-bottom: 1px solid var(--rule); }
  .hero-facts small { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-plate { animation: rise 1.1s var(--ease) .3s both; }
  .js .hero-facts { animation: fade 1.2s var(--ease) .7s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* hero, refined: the plate and the photograph both fit the first screen on a laptop */
.hero { --overlap: 150px; }
.hero-photo { height: clamp(440px, calc(100svh - 240px), 760px); }

.hero-plate { padding: clamp(36px, 3.6vw, 56px) clamp(36px, 3.8vw, 60px); }
.hero-plate h1 { font-size: clamp(2.5rem, 1.2rem + 3vw, 4.1rem); margin-bottom: 30px; }
.hero-side { grid-column: 8 / span 5; padding-bottom: 6px; }
.hero-lede { margin: 0 0 26px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.hero-side .hero-facts { grid-column: auto; padding: 18px 0 0; border-top: 1px solid var(--rule); }
@media (min-width: 1500px) { .hero-side { grid-column: 7 / span 6; } }
@media (max-width: 1000px) {
  .hero { --overlap: 72px; }
  .hero-photo { height: clamp(320px, 56svh, 560px); }

  .hero-side { grid-column: 1 / -1; margin-top: 36px; }
  .hero-side .hero-facts { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-side { animation: fade 1.2s var(--ease) .7s both; }
  .js .hero-facts { animation: none; }
}
@media (min-width: 1500px) { .hero-plate { grid-column: 1 / span 6; } .hero-side { grid-column: 8 / span 5; } }
@media (max-width: 480px) { .hide-phone { display: none; } }
@media (max-width: 560px) {

  .hero-side .hero-facts { border-top: 0; padding-top: 0; }
}

/* ---------- hero slideshow: slow cross-fades, each photograph easing in ---------- */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0; transition: opacity 1.8s var(--ease);
}
.hero-slides img.is-active { opacity: 1; }
@media (max-width: 560px) { .hero-slides img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-slides img { transform: scale(1.07); transition: opacity 1.8s var(--ease), transform 9s linear; }
  .hero-slides img.is-active { transform: scale(1); }
}

.hero-controls {
  position: absolute; z-index: 3; right: 52px; bottom: 50px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; background: rgb(6 28 22 / .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ivory);
}
.hero-count { font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; margin-right: 6px; color: rgb(246 242 234 / .75); font-variant-numeric: tabular-nums; }
.hero-count b { color: var(--ivory); font-weight: 600; }
.hero-dot { position: relative; width: 40px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer; }
.hero-dot::before, .hero-dot::after { content: ""; position: absolute; left: 0; top: 9px; height: 2px; }
.hero-dot::before { right: 0; background: rgb(246 242 234 / .35); }
.hero-dot::after { width: 0; background: var(--gold); }
.hero-dot.is-active::after { width: 100%; }
.hero-dot:hover::before { background: rgb(246 242 234 / .7); }
.hero-pause { width: 28px; height: 28px; margin-left: 4px; padding: 0; display: grid; place-items: center; background: none; border: 1px solid rgb(246 242 234 / .45); color: inherit; cursor: pointer; }
.hero-pause span { width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.hero-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.hero-pause:hover { border-color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-dot.is-active::after { width: 0; animation: progress var(--slide-time, 7s) linear forwards; }
  .js .is-paused .hero-dot.is-active::after { animation-play-state: paused; }
  @keyframes progress { to { width: 100%; } }
}
@media (max-width: 1000px) { .hero-controls { right: 24px; bottom: calc(var(--overlap) + 20px); } }
@media (max-width: 560px) { .hero-controls { right: 16px; padding: 8px 10px 8px 12px; } .hero-dot { width: 26px; } .hero-count { display: none; } }

/* ==========================================================================
   Motion. Everything below runs only when the visitor allows motion
   (the script adds .js-motion). JS writes two numbers per element:
   --p  position in the viewport, from 1 (entering at the bottom) to -1 (leaving at the top)
   --d  how far a line has been drawn, 0 to 1
   so scrolling down and scrolling up play the same movement forwards and backwards.
   ========================================================================== */

/* arrival: blocks fade and rise in, and leave again when scrolled past, in either direction */
.js-motion [data-reveal][data-from="above"] { transform: translateY(-18px); }
.js-motion [data-reveal].is-in { transform: none; }

/* headings rise word by word from behind a mask */
.js-motion .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.js-motion .w > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js-motion [data-from="above"] .w > span { transform: translateY(-112%); }
.js-motion .is-in .w > span, .js-motion .is-in.w-host .w > span { transform: none; }

/* headings and labels drift gently with the scroll */
.js-motion main h2 { translate: 0 calc(var(--p, 0) * 22px); }
.js-motion main .feature-card h2, .js-motion main .form h2, .js-motion main .glance h2, .js-motion main aside h2 { translate: none; }

/* photographs move a little slower than the page, inside their frames */
.js-motion .photo:not(.hero-photo) img { scale: 1.12; translate: 0 calc(var(--p, 0) * 4.5%); }
.js-motion .programme .photo img { scale: 1.1; }
.js-motion .programme:hover .photo img { transform: scale(1.04); }

/* the hero: photograph sinks, plate lifts over it */
.js-motion .hero-slides { translate: 0 min(calc(var(--hs, 0px) * .3), 140px); }
.js-motion .hero-plate { translate: 0 calc(var(--hs, 0px) * -.12); }
.js-motion .hero-side { translate: 0 calc(var(--hs, 0px) * -.05); }
.js-motion .hero-controls { opacity: calc(1 - var(--hs-n, 0)); }
.crop-right { transform: scale(1.08); transform-origin: 92% 8%; }
.js-motion .crop-right { transform: none; transform-origin: 92% 8%; }

/* the four words of the crest, moving sideways with the scroll */
.wordband { overflow: hidden; padding-block: clamp(36px, 4vw, 64px) clamp(40px, 5vw, 80px); background: var(--ivory); }
.wordband-track {
  display: flex; align-items: center; gap: .42em; width: max-content;
  font: 400 clamp(3.4rem, 1.6rem + 6.4vw, 8.5rem)/1 var(--display); letter-spacing: -.015em;
  color: var(--green-900); white-space: nowrap;
  translate: calc(-12% + var(--p, 0) * 9%) 0;
}
.wordband-track span:nth-of-type(even) { color: var(--gold-text); }
.wordband-track i { flex: none; width: .14em; height: .14em; background: var(--gold); rotate: 45deg; }

/* the motto's two lines slide in opposite directions */
.js-motion .motto .m1 { translate: calc(var(--p, 0) * 80px) 0; }
.js-motion .motto .m2 { translate: calc(var(--p, 0) * -80px) 0; }

/* gold lines draw themselves as the section reaches the middle of the screen */
.js-motion .quarters::before { transform: scaleY(var(--d, 1)); transform-origin: top; }
.js-motion .quarters::after { transform: scaleX(var(--d, 1)); transform-origin: left; }
.js-motion .quarters .jewel { scale: var(--d, 1); }
.js-motion .pathway::before { transform: scaleX(var(--d, 1)); transform-origin: left; }
@media (max-width: 860px) { .js-motion .pathway::before { transform: scaleY(var(--d, 1)); transform-origin: top; } }
.js-motion .rule-gold::before, .js-motion .rule-gold::after { transform: scaleX(var(--d, 1)); }
.js-motion .rule-gold::before { transform-origin: right; }
.js-motion .rule-gold::after { transform-origin: left; }

/* the feature card floats over its photograph */
.js-motion .feature-card { translate: 0 calc(var(--p, 0) * 48px); }

/* header: settles smaller once the page moves, with a gold line showing progress down the page */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gold); transform-origin: left; transform: scaleX(var(--scroll, 0));
}
@media (min-width: 1221px) {
  .header-inner { transition: height .4s var(--ease); }
  .brand .crest { transition: width .4s var(--ease); }
  .site-header.is-scrolled .header-inner { height: 74px; }
  .site-header.is-scrolled .brand .crest { width: 44px; }
}

/* a touch more life on interactive things */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .22) 50%, transparent 70%);
  translate: -120% 0; transition: translate .7s var(--ease);
}
.btn:hover::before { translate: 120% 0; }
.btn > * { position: relative; z-index: 1; }
.programme .photo, .compare .photo { transition: box-shadow .5s var(--ease); }
.programme:hover .photo { box-shadow: 0 30px 50px -36px rgb(6 28 22 / .55); }
.socials a:hover svg { transform: translateY(-2px); }
.socials svg { transition: transform .25s var(--ease); }

/* the hero frame draws itself in when the page opens */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero-photo.keyline::after { animation: frame-in 1.6s var(--ease) .2s both; }
  @keyframes frame-in { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
}

@media print {
  .js-motion [data-reveal], .js-motion .w > span { opacity: 1 !important; transform: none !important; }
}

/* phones and tablets: a solid header on the home page, so the photograph starts below it and no face sits under the menu */
@media (max-width: 1000px) {
  .page-home .site-header { position: sticky; background: var(--ivory); border-color: var(--rule); color: var(--ink); }
  .page-home .site-header .wordmark b { color: var(--green-900); }
  .page-home .site-header .wordmark small { color: var(--gold-text); }
  .page-home .site-header .crest--on-dark { display: none; }
  .page-home .site-header .crest--on-light { display: block; }
  .page-home .site-header .btn { background: var(--green-800); color: var(--ivory); border-color: var(--green-800); }
  .hero-photo.keyline { --key: 12px; }
  .hero-photo::before { display: none; }
  .js-motion .hero-slides { translate: 0 min(calc(var(--hs, 0px) * .25), 80px); }
}

/* ---------- KCSE: callout in the hero ---------- */
.hero-kcse {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  margin: 0 0 24px; padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--gold-line);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.hero-kcse:hover { background: #FFFDF7; border-color: var(--gold); color: var(--ink); }
.hero-kcse-tag { font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green-950); background: var(--gold); padding: 7px 9px; white-space: nowrap; }
.hero-kcse-text { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.hero-kcse-text b { color: var(--green-900); font-weight: 600; }
.hero-kcse svg { width: 18px; height: 18px; color: var(--green-800); transition: transform .3s var(--ease); }
.hero-kcse:hover svg { transform: translateX(4px); }

/* ---------- KCSE page ---------- */
.notice { background: var(--green-900); color: rgb(246 242 234 / .86); }
.notice-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 28px; align-items: center; padding-block: 28px; }
.notice-mark { width: 12px; height: 12px; background: var(--gold); rotate: 45deg; }
.notice p { margin: 0; max-width: 62em; }
.notice strong { color: var(--ivory); font-weight: 600; }
.notice .go { color: var(--ivory); }
.notice .go::after { background: var(--gold); }
@media (max-width: 760px) { .notice-inner { grid-template-columns: auto 1fr; } .notice .go { grid-column: 2; } }
.list-ruled { list-style: none; border-top: 1px solid var(--green-800); }
.list-ruled li { padding: 16px 0 16px 26px; border-bottom: 1px solid var(--rule); color: var(--ink-2); position: relative; }
.list-ruled li::before { content: ""; position: absolute; left: 2px; top: 1.55em; width: 7px; height: 7px; background: var(--gold); rotate: 45deg; }
.list-ruled strong { color: var(--ink); font-weight: 600; }

/* ---------- phones: a bottom action bar replaces the floating WhatsApp button ---------- */
.wa-float { display: none !important; }
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: grid; grid-template-columns: 1fr 1fr 1.25fr;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--green-950); border-top: 1px solid rgb(231 182 73 / .35);
    box-shadow: 0 -12px 30px -18px rgb(6 28 22 / .6);
    transition: transform .4s var(--ease);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px;
    font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: var(--ivory); text-decoration: none;
  }
  .mobile-bar a + a { border-left: 1px solid rgb(246 242 234 / .12); }
  .mobile-bar svg { width: 18px; height: 18px; color: var(--gold); }
  .mobile-bar .mobile-bar-main { background: var(--gold); color: var(--green-950); border-left: 0; }
  .mobile-bar a:active { opacity: .85; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .mobile-bar { transform: translateY(110%); }
}

/* ==========================================================================
   Motion, stronger. --amp scales every distance (smaller on phones).
   ========================================================================== */
:root { --amp: 1; }
@media (max-width: 760px) { :root { --amp: .55; } }

/* blocks and headings travel further and take a little longer */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] { transform: translateY(calc(48px * var(--amp))); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
  .js-motion [data-reveal][data-from="above"] { transform: translateY(calc(-48px * var(--amp))); }
  .js-motion [data-reveal].is-in { transform: none; }
  .js-motion .w > span { transition: transform 1.15s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--i, 0) * 70ms); }
}

/* headings drift against the scroll */
.js-motion main h2 { translate: 0 calc(var(--p, 0) * 60px * var(--amp)); }

/* photographs: deeper parallax inside their frames */
.js-motion .photo:not(.hero-photo) img { scale: 1.2; translate: 0 calc(var(--p, 0) * 8%); }

/* programme cards and steps settle at slightly different speeds */
.js-motion .programme { translate: 0 calc(var(--p, 0) * 36px * var(--amp)); }
.js-motion .programme:nth-child(2) { translate: 0 calc(var(--p, 0) * 64px * var(--amp)); }
.js-motion .programme:nth-child(3) { translate: 0 calc(var(--p, 0) * 46px * var(--amp)); }
.js-motion .programme:nth-child(4) { translate: 0 calc(var(--p, 0) * 72px * var(--amp)); }
.js-motion .steps li:nth-child(even), .js-motion .trio > div:nth-child(2) { translate: 0 calc(var(--p, 0) * 40px * var(--amp)); }

/* hero: the photograph sinks, the plate lifts, the side column drifts */
.js-motion .hero-plate { translate: 0 calc(var(--hs, 0px) * -.22); }
.js-motion .hero-side { translate: 0 calc(var(--hs, 0px) * -.1); }

/* the word band travels much further */
.wordband-track { translate: calc(-20% + var(--p, 0) * 16%) 0; }

/* the motto's two lines part and meet */
.js-motion .motto .m1 { translate: calc(var(--p, 0) * 180px * var(--amp)) 0; }
.js-motion .motto .m2 { translate: calc(var(--p, 0) * -180px * var(--amp)) 0; }

/* the homeschool card floats over its photograph */
.js-motion .feature-card { translate: 0 calc(var(--p, 0) * 96px * var(--amp)); }

/* everything moved by the engine is hinted to the browser for smooth compositing */
.js-motion main h2, .js-motion .photo:not(.hero-photo) img, .js-motion .programme, .js-motion .wordband-track,
.js-motion .motto .m1, .js-motion .motto .m2, .js-motion .feature-card, .js-motion .hero-plate, .js-motion .hero-side { will-change: translate; }

/* hero, with KCSE: both buttons on one line, and the side column starts below the photograph */
.hero-plate .actions { flex-wrap: nowrap; }
.hero-plate .btn { padding-inline: 20px; letter-spacing: .12em; }
.hero-side { align-self: start; padding-top: calc(var(--overlap) + 30px); padding-bottom: 0; }
.hero-lede { margin-bottom: 20px; }
@media (max-width: 1000px) { .hero-side { padding-top: 0; } }
@media (max-width: 560px) {
  .hero-plate .actions { flex-wrap: wrap; }
  .hero-kcse { grid-template-columns: 1fr auto; }
  .hero-kcse-tag { justify-self: start; grid-column: 1 / -1; }
}
.hero-plate { align-self: start; }
@media (max-width: 560px) { .opener-foot .actions .btn { flex: 1 1 100%; } }
.opener-foot .actions { grid-column: 7 / span 6; }
@media (max-width: 860px) { .opener-foot .actions { grid-column: 1 / -1; } }
.programmes .programme h3 { font-size: clamp(1.2rem, 1.05rem + .35vw, 1.35rem); }

/* ==========================================================================
   Programme cards under the hero (Cambridge IGCSE, Pearson Edexcel, AS, A Level)
   ========================================================================== */
.qual { padding-top: clamp(56px, 6vw, 88px); }
.qual-title {
  font: 600 .75rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--green-900); text-align: center; margin: 0 0 14px;
}
.qual-title::after { content: ""; display: block; width: 34px; height: 2px; background: var(--gold); margin: 14px auto 0; }
.qual-grid { --cols: 5; --gap: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 28px; }
.qual-grid > .qual-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.qual-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 18px 28px; background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 6px 22px -14px rgb(6 28 22 / .18);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.qual-card::before { /* a gold line draws across the top on hover */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform .45s var(--ease);
}
.qual-card:hover, .qual-card:focus-within { translate: 0 -6px; box-shadow: 0 22px 40px -22px rgb(6 28 22 / .35); border-color: var(--gold-line); }
.qual-card:hover::before, .qual-card:focus-within::before { transform: scaleX(1); }
.qual-badge {
  --cut: var(--green-800);
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 18px;
  background: var(--green-800); color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--green-800), inset 0 0 0 4px rgb(231 182 73 / .55);
  transition: box-shadow .45s var(--ease);
}
.qual-badge svg { width: 34px; height: 34px; transition: scale .45s var(--ease); }
.qual-card:hover .qual-badge, .qual-card:focus-within .qual-badge { box-shadow: inset 0 0 0 3px var(--green-800), inset 0 0 0 4px var(--gold); }
.qual-card:hover .qual-badge svg, .qual-card:focus-within .qual-badge svg { scale: 1.08; }
.qual-card h3 {
  font: 400 clamp(1.08rem, .95rem + .3vw, 1.24rem)/1.2 var(--serif); letter-spacing: 0; text-transform: none; text-wrap: balance;
  color: var(--green-900); margin: 0 0 10px;
}
.qual-card p { margin: 0 0 22px; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); flex-grow: 1; max-width: 22em; }
.qual-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-800); text-decoration: none;
}
.qual-link::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; rotate: 45deg; transition: translate .3s var(--ease); }
.qual-link::before { content: ""; position: absolute; inset: 0; } /* the whole card is clickable */
.qual-card:hover .qual-link { color: var(--gold-text); }
.qual-card:hover .qual-link::after { translate: 4px 0; }
.qual-card .qual-link:focus-visible { outline: none; }
.qual-card:has(.qual-link:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1100px) { .qual-grid { --cols: 3; } }
@media (max-width: 700px) { .qual-grid { --cols: 2; } }
@media (max-width: 480px) {
  .qual-grid { --gap: 12px; }
  .qual-card { padding: 26px 14px 22px; }
  .qual-badge { width: 50px; height: 50px; margin-bottom: 14px; }
  .qual-badge svg { width: 30px; height: 30px; }
  .qual-card h3 { font-size: 1.05rem; }
  .qual-card p { font-size: .875rem; margin-bottom: 16px; }
}

/* ---------- Learning: Pearson Edexcel block ---------- */
.board { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(36px, 5vw, 80px); margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.board-head .qual-badge { margin-bottom: 22px; }
.board-head h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); margin-bottom: 10px; }
.board-head .meta { font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.board-body p { color: var(--ink-2); }
.board-body .facts { margin-top: 20px; }
@media (max-width: 860px) { .board { grid-template-columns: 1fr; } }

/* ---------- Admissions: rate cards ---------- */
.rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rate-card { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--green-800); padding: 28px 24px 10px; transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.rate-card:hover { translate: 0 -4px; box-shadow: 0 22px 40px -26px rgb(6 28 22 / .35); }
.rate-card header { padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.rate-card h3 { font-family: var(--display); font-size: 1.65rem; line-height: 1.1; margin-bottom: 8px; }
.rate-card .meta { margin: 0; font-size: .8125rem; color: var(--ink-3); }
.rate-card dl { margin: 0; }
.rate-card dl div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rate-card dl div:last-child { border-bottom: 0; }
.rate-card dt { font: 600 .68rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.rate-card dd { margin: 0; font-size: .875rem; color: var(--ink-3); }
.rate-card dd b { display: block; font: 400 1.5rem/1.15 var(--serif); color: var(--green-900); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 1100px) { .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rates { grid-template-columns: 1fr; } }

.fee-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); margin-top: clamp(40px, 4vw, 56px); }
.fee-info > div { border-top: 1px solid var(--green-800); padding-top: 24px; }
.fee-info h3 { font: 600 .75rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green-900); margin-bottom: 16px; }
.fee-big { margin: 0 0 6px; font: 400 2.4rem/1 var(--display); color: var(--green-900); }
.fee-info .small { margin: 10px 0 0; }
.fee-info .list-ruled li { padding-block: 12px; }
.pay { margin: 0; }
.pay div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.pay dt { color: var(--ink-2); font-size: .9375rem; }
.pay dd { margin: 0; color: var(--ink); }
.pay dd b { font: 400 1.2rem/1 var(--serif); color: var(--green-900); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.fee-note { margin-top: 28px; }
@media (max-width: 860px) { .fee-info { grid-template-columns: 1fr; } }

/* ---------- floating WhatsApp button ---------- */
.wa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 96; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wa-fab-icon {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; box-shadow: 0 14px 30px -10px rgb(6 28 22 / .5), 0 2px 6px rgb(0 0 0 / .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-fab-icon svg { width: 34px; height: 34px; }
.wa-fab-label {
  padding: 10px 14px; background: var(--green-950); color: var(--ivory);
  font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgb(6 28 22 / .5);
  opacity: 0; translate: 10px 0; pointer-events: none; transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.wa-fab:hover .wa-fab-icon, .wa-fab:focus-visible .wa-fab-icon { transform: scale(1.07); box-shadow: 0 18px 36px -12px rgb(6 28 22 / .55); }
.wa-fab:hover .wa-fab-label, .wa-fab:focus-visible .wa-fab-label { opacity: 1; translate: 0 0; }
.wa-fab:focus-visible { outline: none; }
.wa-fab:focus-visible .wa-fab-icon { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .wa-fab { animation: fab-in .6s var(--ease) 1.2s both; }
  @keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
  .wa-fab-icon::after { /* a soft ring every few seconds, so it is noticed without nagging */
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
    animation: fab-ring 4s var(--ease) 2.5s infinite; pointer-events: none;
  }
  @keyframes fab-ring { 0% { opacity: .7; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.55); } }
}
@media (max-width: 760px) {
  .wa-fab { right: 14px; bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px); }
  .wa-fab-icon { width: 54px; height: 54px; }
  .wa-fab-icon svg { width: 30px; height: 30px; }
  .wa-fab-label { display: none; }
  body.menu-open .wa-fab { opacity: 0; pointer-events: none; }
}
@media print { .wa-fab { display: none !important; } }

/* card grids: the grid triggers the reveal, the cards arrive one after another */
.js-motion .qual-grid[data-reveal], .js-motion .rates[data-reveal] { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .qual-grid[data-reveal] > *, .js-motion .rates[data-reveal] > * {
    opacity: 0; transform: translateY(calc(40px * var(--amp, 1)));
    transition: opacity 1s var(--ease), transform 1.1s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    transition-delay: calc(var(--n, 0) * 110ms), calc(var(--n, 0) * 110ms), 0s, 0s, 0s;
  }
  .js-motion .qual-grid[data-reveal][data-from="above"] > *, .js-motion .rates[data-reveal][data-from="above"] > * { transform: translateY(calc(-40px * var(--amp, 1))); }
  .js-motion .qual-grid.is-in > *, .js-motion .rates.is-in > * { opacity: 1; transform: none; }
  .qual-grid > :nth-child(2), .rates > :nth-child(2) { --n: 1; }
  .qual-grid > :nth-child(3), .rates > :nth-child(3) { --n: 2; }
  .qual-grid > :nth-child(4), .rates > :nth-child(4) { --n: 3; }
  .qual-grid > :nth-child(5) { --n: 4; }
}
@media (min-width: 561px) { .hero-side .hero-facts { grid-template-columns: auto auto auto; justify-content: space-between; } .hero-side .hero-facts li { padding-right: 20px; } .hero-side .hero-facts li:last-child { padding-right: 0; } }
.hero-side .hero-facts b { font-size: 1.06rem; }

/* ==========================================================================
   Application form (/apply)
   ========================================================================== */
.opener--plain { padding-bottom: 0; }
.opener--plain .opener-foot { padding-bottom: clamp(40px, 4vw, 64px); }
.apply-section { padding-top: clamp(48px, 5vw, 80px); }
.apply { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; }
.apply-form, .apply-success { grid-column: 1; grid-row: 1; }
.apply-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
@media (max-width: 960px) {
  .apply { grid-template-columns: 1fr; }
  .apply-aside { grid-column: 1; grid-row: auto; position: static; }
}

/* sections of the form */
.form-section { margin: 0 0 8px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--rule); }
.form-section + .form-section { padding-top: 32px; }
.form-section > legend {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; margin: 0 0 22px;
  font: 400 clamp(1.5rem, 1.25rem + .7vw, 1.9rem)/1.15 var(--display); letter-spacing: 0; text-transform: none; color: var(--green-900);
}
.form-section + .form-section > legend { padding-top: 0; }
.form-num {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green-800); color: var(--gold); font: 400 .9rem/1 var(--display);
}
.form-section > legend .optional { font: 400 .9rem/1 var(--sans); letter-spacing: 0; }
.field-label { font: 600 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.form-hint { margin: -8px 0 20px; font-size: .9375rem; color: var(--ink-3); }

/* inputs the base form styles don't cover */
input[type="email"], input[type="date"], select {
  width: 100%; min-height: 50px; padding: 12px 0;
  font: 400 1.0625rem/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid #B9B1A1; border-radius: 0;
  transition: border-color .2s var(--ease);
}
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F4235' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat;
}
input[type="email"]:focus, input[type="date"]:focus, select:focus { outline: none; border-bottom-color: var(--green-800); box-shadow: 0 1px 0 var(--green-800); }
.apply-form .choices { gap: 8px; }
.apply-form .choice span { font-size: .9rem; }

/* invalid fields, shown only after a submit attempt */
.was-validated :is(input, select, textarea):invalid { border-bottom-color: #B3261E; box-shadow: 0 1px 0 #B3261E; }
.was-validated .choices:has(input:required:invalid) .choice span { border-color: #B3261E; }
.was-validated .check:has(input:invalid) span::before { border-color: #B3261E; }

/* file pickers */
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.file {
  position: relative; display: grid; gap: 6px; padding: 18px 16px; cursor: pointer;
  border: 1px dashed #B9B1A1; background: rgb(255 255 255 / .5);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.file:hover, .file:focus-within { border-color: var(--green-800); background: #fff; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-title { font: 600 .72rem/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.file-name { font-size: .875rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file.has-file { border-style: solid; border-color: var(--green-800); background: #fff; }
.file.has-file .file-name { color: var(--green-800); font-weight: 600; }
.file.has-error { border-color: #B3261E; }
.file.has-error .file-name { color: #B3261E; white-space: normal; }
.file:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 700px) { .files { grid-template-columns: 1fr; } }

/* declaration checkboxes */
.check { position: relative; display: block; margin: 0 0 16px; cursor: pointer; font: 400 .9375rem/1.55 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.check input { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; opacity: 0; margin: 0; cursor: pointer; }
.check span { display: block; padding-left: 34px; position: relative; }
.check span::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  border: 1.5px solid #8E877A; background: #fff; transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.check span::after {
  content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 11px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); rotate: 45deg; opacity: 0;
}
.check input:checked + span::before { background: var(--green-800); border-color: var(--green-800); }
.check input:checked + span::after { opacity: 1; }
.check input:focus-visible + span::before { outline: 2px solid var(--gold); outline-offset: 2px; }

/* spam trap: kept out of sight and out of the tab order */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* status line */
.form-status { margin: 20px 0 0; font-size: .9375rem; }
.form-status:empty { display: none; }
.form-status.is-error { padding: 14px 16px; border-left: 3px solid #B3261E; background: #FBEDEC; color: #6B1A14; }
.form-status.is-info { padding: 14px 16px; border-left: 3px solid var(--gold); background: #FBF4E2; color: var(--ink); }
.form-status a { color: inherit; font-weight: 600; }
.apply-form .actions { margin-top: 24px; }
.apply-form button[disabled] { opacity: .7; cursor: progress; }

/* success panel */
.apply-success { position: relative; background: var(--paper); padding: clamp(32px, 4vw, 56px); box-shadow: 0 40px 70px -56px rgb(6 28 22 / .5); }
.apply-success::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-line); opacity: .6; pointer-events: none; }
.apply-success > * { position: relative; z-index: 1; }
.apply-success .qual-badge { margin-bottom: 22px; font-size: 1.4rem; }
.apply-success h2 { margin-bottom: 14px; }
.apply-success .lede { margin-bottom: 28px; }
.apply-success h3 { font: 600 .75rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green-900); margin-bottom: 12px; }
.next-steps { margin: 0 0 28px; padding-left: 1.2em; color: var(--ink-2); }
.next-steps li { padding: 6px 0; }
.apply-success:focus { outline: none; }

/* side panel */
.apply-box { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--green-800); padding: 24px; }
.apply-box h2 { font: 600 .75rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green-900); margin-bottom: 14px; }
.apply-box .list-ruled li { padding-block: 10px; font-size: .9375rem; }
.apply-box .fee-big { font-size: 2rem; }
.apply-box .small { margin: 8px 0 0; }
@media (min-width: 1001px) and (max-width: 1180px) { .hero-side .hero-facts { grid-template-columns: 1fr; } .hero-side .hero-facts li, .hero-side .hero-facts li:first-child { padding: 10px 0; border-left: 0; border-top: 1px solid var(--rule); } .hero-side .hero-facts small { margin-bottom: 2px; } }
.file-name { font: 400 .875rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.file.has-file .file-name { font-weight: 600; }

/* ==========================================================================
   Application page, v2: a focused three-step form
   ========================================================================== */
.page-apply { background: var(--ivory); }
.page-apply body, body.page-apply { padding-bottom: 0; }

/* minimal header: crest and a way back */
.apply-header .header-inner { justify-content: space-between; }
.apply-back { font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green-800); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.apply-back:hover { color: var(--gold-text); }
@media (max-width: 560px) { .apply-back { font-size: .7rem; letter-spacing: .08em; } }

/* banner */
.apply-banner {
  position: relative; text-align: center; color: rgb(246 242 234 / .86);
  padding: clamp(40px, 5vw, 64px) 0 clamp(44px, 5vw, 68px);
  background:
    linear-gradient(rgb(10 46 37 / .88), rgb(10 46 37 / .92)),
    url("/assets/photos/slide-study-sm.jpg") center 30% / cover no-repeat;
}
.apply-banner .label { color: var(--gold); margin-bottom: 12px; }
.apply-banner h1 { color: var(--ivory); font-family: var(--display); font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.05; }
.apply-banner p { max-width: 34em; margin: 14px auto 0; font-size: 1.0625rem; }

/* body */
.apply-body { padding: clamp(32px, 4vw, 48px) 0 clamp(56px, 6vw, 88px); }
.apply-body .wrap { max-width: 820px; }

/* progress steps */
.stepper { list-style: none; display: flex; justify-content: space-between; position: relative; max-width: 520px; margin: 0 auto 28px; padding: 0; }
.stepper[hidden] { display: none; }
.stepper::before { content: ""; position: absolute; left: 34px; right: 34px; top: 17px; height: 2px; background: var(--rule); }
.stepper::after { content: ""; position: absolute; left: 34px; top: 17px; height: 2px; background: var(--green-800); width: calc((100% - 68px) * var(--progress, 0)); transition: width .45s var(--ease); }
.stepper li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 68px; }
.stepper .dot {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule); color: var(--ink-3);
  font: 600 .875rem/1 var(--sans); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.stepper .name { font: 600 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stepper .is-active .dot { background: var(--green-800); border-color: var(--green-800); color: var(--gold); box-shadow: 0 0 0 5px rgb(15 66 53 / .12); }
.stepper .is-active .name { color: var(--green-900); }
.stepper .is-done .dot { background: var(--green-800); border-color: var(--green-800); color: transparent; position: relative; }
.stepper .is-done .dot::after { content: ""; position: absolute; width: 6px; height: 11px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); rotate: 45deg; margin-top: -3px; }
.stepper .is-done .name { color: var(--green-800); }

/* the card */
.apply-card {
  position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: clamp(24px, 4vw, 40px); box-shadow: 0 30px 60px -45px rgb(6 28 22 / .45);
}
.apply-card::after { display: none; }
.step-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 1.15rem/1.3 var(--sans); letter-spacing: 0; color: var(--green-900);
  padding-bottom: 14px; margin: 0 0 24px; border-bottom: 2px solid var(--green-800);
}
.step-title:focus { outline: none; }
.step-title svg { width: 22px; height: 22px; color: var(--green-800); flex: none; }
.step-count { margin-left: auto; font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* fields: filled boxes, plain labels */
.apply-card .field { gap: 7px; margin-bottom: 18px; }
.apply-card .field > label { font: 600 .875rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.apply-card .req { color: #B3261E; }
.apply-card :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea) {
  min-height: 48px; padding: 12px 14px; font-size: 1rem;
  background-color: #F4F0E8; border: 1px solid #E3DBCB; border-radius: 6px; box-shadow: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.apply-card select { padding-right: 38px; background-position: right 14px center; }
.apply-card textarea { min-height: 96px; }
.apply-card :is(input, select, textarea)::placeholder { color: #9A9890; }
.apply-card :is(input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea):focus {
  outline: none; background-color: #fff; border-color: var(--green-800); box-shadow: 0 0 0 3px rgb(15 66 53 / .14);
}
.apply-card .field-row { gap: 0 18px; }
.apply-step.was-validated :is(input, select, textarea):invalid { border-color: #B3261E; box-shadow: 0 0 0 3px rgb(179 38 30 / .12); }
.apply-step.was-validated .check:has(input:invalid) span::before { border-color: #B3261E; }

/* documents */
.docs-title { margin: 8px 0 10px; font: 600 .875rem/1.3 var(--sans); color: var(--ink); }
.docs-title span { font-weight: 400; color: var(--ink-3); }
.apply-card .files { margin-bottom: 22px; }
.apply-card .file { border-radius: 6px; background: #FAF8F3; }
.apply-card .file-title { text-transform: none; letter-spacing: 0; font: 600 .84rem/1.35 var(--sans); color: var(--ink); }

/* next / back */
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.step-nav .btn { min-height: 48px; border-radius: 6px; }
.apply-card .form-status { margin-top: 18px; border-radius: 4px; }
@media (max-width: 560px) {
  .step-count { display: none; }
  .step-nav .btn { flex: 1 1 0; padding-inline: 14px; }
}

/* success */
.apply-success { text-align: center; padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); }
.success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--green-800); color: var(--gold); }
.success-mark svg { width: 30px; height: 30px; }
.apply-success h2 { font-family: var(--display); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); margin-bottom: 12px; }
.apply-success > p { color: var(--ink-2); max-width: 34em; margin: 0 auto 24px; }
.next-box { text-align: left; background: var(--ivory); border-radius: 6px; padding: 20px 22px; margin: 0 auto 26px; max-width: 560px; }
.next-box h3 { font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green-900); margin-bottom: 8px; }
.next-box ol { margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: .975rem; }
.next-box li { padding: 4px 0; }
.apply-success .actions { justify-content: center; }
.apply-success .btn { border-radius: 6px; }

.apply-help { text-align: center; margin: 22px 0 0; font-size: .9375rem; color: var(--ink-3); }

/* slim footer */
.apply-footer { background: var(--green-950); color: rgb(246 242 234 / .65); font-size: .875rem; text-align: center; padding: 22px 0; }
.apply-footer a { color: rgb(246 242 234 / .85); }
@media (max-width: 760px) { .page-apply .wa-fab { bottom: 16px; } }

/* step change: a gentle slide */
@media (prefers-reduced-motion: no-preference) {
  .apply-step:not([hidden]) { animation: step-in .45s var(--ease) both; }
  .apply-step.from-back:not([hidden]) { animation-name: step-in-back; }
  @keyframes step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes step-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
}
.apply-card .step-title { font-size: 1.15rem; line-height: 1.3; }
.apply-card h2.step-title { font-family: var(--sans); }

/* ==========================================================================
   Page changes: a soft fade between pages, with the header and the
   WhatsApp button holding still (browsers without support simply jump)
   ========================================================================== */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.wa-fab { view-transition-name: wa-fab; }
::view-transition-old(root) { animation: page-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-in .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Fees: study-mode switch. Each card shows one price; prices roll to the
   new figure when the mode changes. Without JavaScript all three are listed.
   ========================================================================== */
.rate-switch { position: relative; display: inline-flex; padding: 4px; margin: 0 0 28px; background: var(--paper); border: 1px solid var(--rule); isolation: isolate; }
.rate-switch[hidden] { display: none; }
.rate-switch::before { /* the green marker slides to the chosen mode */
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: var(--x, 4px); width: var(--w, 0);
  background: var(--green-800); transition: left .45s var(--ease), width .45s var(--ease);
}
.rate-switch button {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 13px 22px;
  font: 600 .72rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green-900);
  transition: color .3s var(--ease);
}
.rate-switch button:hover { color: var(--gold-text); }
.rate-switch button[aria-pressed="true"] { color: var(--ivory); }
.rate-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rates.is-switched .rate-card { padding-bottom: 22px; }
.rates.is-switched .rate-card dl div { border-bottom: 0; padding-bottom: 0; }
.rates.is-switched .rate-card dd b { font-size: clamp(1.75rem, 1.45rem + .8vw, 2.1rem); }
@media (prefers-reduced-motion: no-preference) {
  .rate-card dl div.is-rolling dt { animation: rate-label .5s var(--ease) both; }
  @keyframes rate-label { from { opacity: 0; translate: 0 6px; } }
}
@media (max-width: 560px) {
  .rate-switch { display: flex; }
  .rate-switch button { flex: 1 1 0; padding: 12px 6px; font-size: .66rem; letter-spacing: .08em; }
}

/* ==========================================================================
   Application sent: the tick draws itself and the reference number settles in
   ========================================================================== */
.success-mark { position: relative; }
.ref-ticket {
  display: inline-grid; gap: 6px; margin: 0 auto 28px !important; padding: 16px 30px 18px;
  border: 1px dashed var(--gold-line); border-radius: 6px; background: #FBF8F1;
}
.ref-ticket span { font: 600 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ref-ticket strong { display: block; font: 400 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1.1 var(--serif); letter-spacing: .06em; color: var(--green-900); font-variant-numeric: lining-nums tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .apply-success:not([hidden]) .success-mark { animation: mark-in .55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .apply-success:not([hidden]) .success-mark path { stroke-dasharray: 21; stroke-dashoffset: 21; animation: tick-draw .45s var(--ease) .4s forwards; }
  .apply-success:not([hidden]) .success-mark::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold);
    animation: mark-ring 1s var(--ease) .55s both;
  }
  .apply-success:not([hidden]) > :is(h2, p, .next-box, .actions) { animation: success-rise .6s var(--ease) both; }
  .apply-success:not([hidden]) > h2 { animation-delay: .3s; }
  .apply-success:not([hidden]) > p:not(.ref-ticket) { animation-delay: .4s; }
  .apply-success:not([hidden]) > .ref-ticket { animation-delay: .55s; }
  .apply-success:not([hidden]) > .ref-ticket strong { animation: ref-settle .9s var(--ease) .65s both; }
  .apply-success:not([hidden]) > .next-box { animation-delay: .75s; }
  .apply-success:not([hidden]) > .actions { animation-delay: .85s; }
  @keyframes mark-in { from { scale: .4; opacity: 0; } }
  @keyframes tick-draw { to { stroke-dashoffset: 0; } }
  @keyframes mark-ring { from { scale: 1; opacity: .9; } to { scale: 1.7; opacity: 0; } }
  @keyframes success-rise { from { opacity: 0; translate: 0 14px; } }
  @keyframes ref-settle { from { opacity: 0; letter-spacing: .4em; } }
}

/* ==========================================================================
   Admissions: the question form, quieter than the application
   ========================================================================== */
.form--quiet h2 { font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); }
.form--quiet > p { margin: 10px 0 24px; }
.form--quiet > p a { color: var(--green-800); font-weight: 600; }
.form--quiet legend { font: 600 .875rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 10px; }
.form--quiet .choice span { border-radius: 6px; border-color: #E3DBCB; background: #F4F0E8; min-height: 42px; padding: 9px 16px; font: 500 .9375rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.form--quiet .choice input:checked + span { background: var(--green-800); border-color: var(--green-800); }
.form--quiet .actions .btn { border-radius: 6px; }