/* Your School Concept 3, website. Tokens, then components, then page layouts. */
:root, [data-theme="light"] {
  --chalk: #f4f7f2;
  --paper: #ffffff;
  --wash: #e6ede4;
  --ink: #111b15;
  --ink-soft: #46564b;
  --rule: #ccd7cc;
  --rule-strong: #66786c;
  --link: #0d5c8c;
  --focus-ring: #0d5c8c;
  --action: var(--ink);
  --on-action: var(--chalk);
  --stage-pre-primary: #f5b81c;
  --on-stage-pre-primary: #1a1300;
  --stage-pre-primary-tint: #fdf0c6;
  --stage-pre-primary-ink: #6b4800;
  --stage-primary: #17724b;
  --on-stage-primary: #ffffff;
  --stage-primary-tint: #d9efe2;
  --stage-primary-ink: #17724b;
  --stage-secondary: #7e1c34;
  --on-stage-secondary: #ffffff;
  --stage-secondary-tint: #f6dfe5;
  --stage-secondary-ink: #7e1c34;
  --stage-jr-college: #17406f;
  --on-stage-jr-college: #ffffff;
  --stage-jr-college-tint: #dbe7f4;
  --stage-jr-college-ink: #17406f;
  --success: #0b6a82;
  --success-tint: #dbeff5;
  --danger: #b3261e;
  --danger-tint: #fde9e6;
  --glass: #f4f7f2b8;
  --glass-thick: #f4f7f2ee;
  --glass-edge: #ffffffa6;
  --scrim: #0b140e66;
  --shadow-card: 0 1px 2px #111b150a, 0 8px 24px -6px #111b1512;
  --shadow-sm: 0 1px 2px #111b1524, 0 0 0 1px #111b1514;
  --shadow-md: 0 10px 30px #111b1518, 0 2px 6px #111b150f;
  --shadow-lg: 0 28px 70px #111b1526, 0 6px 18px #111b1514;
  color-scheme: light;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --blur-thin: 10px;
  --blur-regular: 18px;
  --blur-thick: 30px;
  --page-max: 1320px;
  --measure: 66ch;
  --tap-min: 44px;
  --rule-h: 7.5rem;
  --z-nav: 100;
  --z-scrim: 200;
  --z-sheet: 210;
  --z-toast: 300;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", Roboto, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", Roboto, sans-serif;
  --font-serif: "New York", "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif Devanagari", serif;
}
.numeral-xl { font-family: var(--font-display); font-size: 9rem; line-height: 0.86; font-weight: 700; letter-spacing: -0.045em; }
.display-xl { font-family: var(--font-display); font-size: 5rem; line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; }
.display { font-family: var(--font-display); font-size: 3.5rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
.title-1 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.title-2 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; }
.title-3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; }
.body-lg { font-family: var(--font-text); font-size: 1.25rem; line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; }
.body { font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; letter-spacing: -0.006em; }
.callout { font-family: var(--font-text); font-size: 0.9375rem; line-height: 1.45; font-weight: 450; letter-spacing: 0; }
.caption { font-family: var(--font-text); font-size: 0.8125rem; line-height: 1.4; font-weight: 450; letter-spacing: 0.005em; }
.overline { font-family: var(--font-text); font-size: 0.75rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; }
.button { font-family: var(--font-text); font-size: 1rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.005em; }
.statement { font-family: var(--font-serif); font-size: 3.5rem; line-height: 1.14; font-weight: 400; letter-spacing: -0.018em; }
.accent { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; font-weight: 400; letter-spacing: 0; }

/* Your School Concept 3: component styles. Every colour, size and radius comes from tokens.css. */

/* ---------- Motion: spring easings sampled from the same equation as the JS springs ---------- */
:root {
  --ease-standard: linear(0, 0.0401, 0.1313, 0.2431, 0.3577, 0.4656, 0.562, 0.6452, 0.7154, 0.7736, 0.821, 0.8594, 0.89, 0.9144, 0.9336, 0.9487, 0.9605, 0.9696, 0.9767, 0.9822, 0.9864, 0.9896, 0.9921, 0.994, 0.9955, 0.9966, 0.9974, 1);
  --dur-standard: 540ms;
  --ease-snappy: linear(0, 0.0403, 0.1318, 0.2439, 0.3588, 0.4668, 0.5633, 0.6465, 0.7167, 0.7747, 0.8221, 0.8603, 0.8908, 0.9151, 0.9342, 0.9492, 0.9609, 0.9699, 0.977, 0.9824, 0.9866, 0.9898, 0.9922, 0.9941, 0.9955, 0.9966, 0.9974, 1);
  --dur-snappy: 406ms;
  --ease-momentum: linear(0, 0.0378, 0.1287, 0.2462, 0.3719, 0.494, 0.6053, 0.702, 0.7829, 0.8484, 0.8996, 0.9385, 0.9669, 0.9869, 1.0002, 1.0085, 1.013, 1.0149, 1.0151, 1.0141, 1.0125, 1.0106, 1.0087, 1.0069, 1.0053, 1.004, 1.0028, 1);
  --dur-momentum: 448ms;
}

/* ---------- Stage scoping: any element with data-stage takes that stage's four colours ---------- */
[data-stage="pre-primary"] { --ground: var(--stage-pre-primary); --on-ground: var(--on-stage-pre-primary); --ground-tint: var(--stage-pre-primary-tint); --ground-ink: var(--stage-pre-primary-ink); }
[data-stage="primary"] { --ground: var(--stage-primary); --on-ground: var(--on-stage-primary); --ground-tint: var(--stage-primary-tint); --ground-ink: var(--stage-primary-ink); }
[data-stage="secondary"] { --ground: var(--stage-secondary); --on-ground: var(--on-stage-secondary); --ground-tint: var(--stage-secondary-tint); --ground-ink: var(--stage-secondary-ink); }
[data-stage="jr-college"] { --ground: var(--stage-jr-college); --on-ground: var(--on-stage-jr-college); --ground-tint: var(--stage-jr-college-tint); --ground-ink: var(--stage-jr-college-ink); }

/* ---------- Base ---------- */
.gc-root { background: var(--chalk); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-text); letter-spacing: -0.006em; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.gc-root, .gc-root *, .gc-root *::before, .gc-root *::after { box-sizing: border-box; }
:where(.gc-root) a { color: var(--link); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.gc-root :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.gc-band:not([class*="gc-band--"]) :focus-visible, [data-stage] .gc-on-ground:focus-visible { outline-color: var(--on-ground); }
.gc-band--ink :focus-visible { outline-color: var(--chalk); }
.gc-root :lang(mr), .gc-root :lang(hi) { line-height: 1.7; letter-spacing: 0; }
.gc-eyebrow { font: 600 0.75rem/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.gc-band .gc-eyebrow { color: inherit; }
.accent { font-style: italic; }
.gc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0}
.gc-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 400; background: var(--action); color: var(--on-action); padding: 0.8em 1.2em; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; }
.gc-skip:focus { top: var(--space-2); }
.gc-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Button ---------- */
.gc-btn { max-width: 100%; overflow-wrap: anywhere; --btn-bg: var(--action); --btn-fg: var(--on-action); --btn-bd: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: var(--tap-min); padding: 0.75em 1.4em; font: 600 1rem/1.1 var(--font-text); letter-spacing: -0.005em; text-decoration: none; text-align: center; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: transform 100ms ease-out, background-color 160ms ease, color 160ms ease, border-color 160ms ease}
.gc-root a.gc-btn { color: var(--btn-fg); }
.gc-btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; border-radius: inherit; pointer-events: none; transition: opacity 120ms ease; }
.gc-btn:hover::before { opacity: 0.1; }
.gc-btn:active { transform: scale(0.97); }
.gc-btn:active::before { opacity: 0.16; }
.gc-btn .gc-i { transition: transform var(--dur-snappy) var(--ease-snappy); }
.gc-btn:hover .gc-i--go { transform: translateX(4px); }
.gc-btn--lg { min-height: 56px; padding-inline: 1.75em; font-size: 1.0625rem; }
.gc-btn--sm { padding: 0.5em 1.1em; font-size: 0.9375rem; }
.gc-btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.gc-btn--quiet { --btn-bg: transparent; --btn-fg: var(--ink); padding-inline: 0.4em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; border-radius: var(--radius-sm); }
.gc-btn--quiet::before { display: none; }
.gc-btn[disabled], .gc-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* Controls invert on a stage band (a .gc-band with no modifier) and on the ink band; tint and wash bands keep the normal buttons. */
.gc-band:not([class*="gc-band--"]) .gc-btn:not(.gc-btn--outline):not(.gc-btn--quiet) { --btn-bg: var(--on-ground); --btn-fg: var(--ground); }
.gc-band:not([class*="gc-band--"]) .gc-btn--outline { --btn-fg: var(--on-ground); --btn-bd: var(--on-ground); }
.gc-band:not([class*="gc-band--"]) .gc-btn--quiet { --btn-fg: var(--on-ground); }
.gc-band--ink .gc-btn:not(.gc-btn--outline):not(.gc-btn--quiet) { --btn-bg: var(--chalk); --btn-fg: var(--ink); }
.gc-band--ink .gc-btn--outline { --btn-fg: var(--chalk); --btn-bd: var(--chalk); }
.gc-band--ink .gc-btn--quiet { --btn-fg: var(--chalk); }
.gc-root .gc-band a:not(.gc-btn) { color: inherit; }

/* ---------- Tags and status ---------- */
.gc-tag { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.75em; border-radius: var(--radius-pill); font: 600 0.75rem/1.2 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; background: var(--ground-tint, var(--wash)); color: var(--ink); }
.gc-band--wash .gc-tag, .gc-band--tint .gc-tag { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.gc-status { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.7em 0.3em 0.55em; border-radius: var(--radius-pill); font: 600 0.8125rem/1.2 var(--font-text); letter-spacing: 0; background: var(--success-tint); color: var(--success); }
.gc-status--closed { background: var(--danger-tint); color: var(--danger); }
.gc-status .gc-i { width: 1.1em; height: 1.1em; }

/* ---------- NavBar ---------- */
.gc-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-nav); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-regular)) saturate(160%); backdrop-filter: blur(var(--blur-regular)) saturate(160%); border-top: 1px solid var(--glass-edge); }
.gc-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; background: linear-gradient(to bottom, var(--glass), transparent); -webkit-backdrop-filter: blur(var(--blur-thin)); backdrop-filter: blur(var(--blur-thin)); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); opacity: 0; transition: opacity var(--dur-snappy) var(--ease-snappy); }
.gc-nav[data-scrolled="true"]::after { opacity: 1; }
.gc-nav__in { display: flex; align-items: center; gap: var(--space-5); min-height: 68px; max-width: var(--page-max); margin-inline: auto; padding-block: 6px; padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
.gc-nav__brand { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); color: var(--ink); text-decoration: none; margin-right: auto; min-width: 0; }
.gc-nav__brand img { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); flex: none; }
.gc-nav__brand b { display: block; font: 700 1.1875rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.gc-nav__brand small { display: block; font: 450 0.75rem/1.25 var(--font-text); letter-spacing: 0; color: var(--ink-soft); }
.gc-nav__links { display: flex; align-items: center; gap: 2px; }
.gc-nav__links > a, .gc-nav__tr { position: relative; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 0.85em; font: 500 0.9375rem/1 var(--font-text); letter-spacing: -0.006em; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: var(--radius-pill); transition: background-color 160ms ease, color 160ms ease; }
.gc-nav__links > a:hover, .gc-nav__tr:hover, .gc-nav__item[data-open="true"] > .gc-nav__tr { background: rgba(17, 27, 21, 0.07); background: color-mix(in srgb, var(--ink) 7%, transparent)}
.gc-nav__links > a[aria-current="page"], .gc-nav__tr[aria-current] { background: var(--ink); color: var(--chalk); }
.gc-nav__menu { display: none; align-items: center; gap: 0.5em; min-height: var(--tap-min); padding: 0 1.25em; font: 600 0.9375rem/1 var(--font-text); color: var(--ink); background: transparent; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out; }
.gc-nav__menu:active { transform: scale(0.97); }
@media (max-width: 63.6875em) { .gc-nav__links { display: none; } .gc-nav__menu { display: inline-flex; } }
/* One or two calls to action beside the links: "Find us" (outlined) goes first and steps aside below 900px, the solid one below 560px. */
.gc-nav__ctas { display: flex; align-items: center; gap: var(--space-2); flex: none; }
@media (max-width: 56.1875em) { .gc-nav__find { display: none; } }
@media (max-width: 34.9375em) { .gc-nav__cta, .gc-nav__ctas { display: none; } .gc-nav__brand small { display: none; } }
html[data-nav="compact"] .gc-nav__links { display: none; }
html[data-nav="compact"] .gc-nav__menu { display: inline-flex; }

/* ---------- Mega menu: audience panels that drop from the bar ---------- */
.gc-nav__item { display: flex; }
.gc-nav__tr { gap: 0.35em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gc-nav__tr .gc-i { width: 0.95em; height: 0.95em; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.gc-nav__tr[aria-expanded="true"] .gc-i { transform: rotate(180deg); }
.gc-nav[data-mega="open"] { background: var(--glass-thick); }
.gc-mega { position: absolute; left: 0; right: 0; top: 100%; padding: 6px max(var(--space-4), env(safe-area-inset-right, 0px)) 0 max(var(--space-4), env(safe-area-inset-left, 0px)); visibility: hidden; opacity: 0; transform: translateY(-8px) scale(0.99); transform-origin: 50% 0; pointer-events: none; transition: opacity 140ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 240ms; }
.gc-nav__item[data-open="true"] > .gc-mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 160ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), visibility 0s; }
.gc-mega__in { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--space-5); max-width: var(--page-max); margin-inline: auto; padding: var(--space-3); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--hdr-h, 76px) - var(--space-5)); overflow: auto}
.gc-mega__feat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; overflow: hidden; padding: var(--space-5); color: var(--on-ground, var(--ink)); background: var(--ground, var(--wash)); border-radius: var(--radius-md); }
.gc-mega__feat .gc-eyebrow { color: inherit; margin: 0; }
.gc-mega__feat h3 { margin: 0; font: 700 1.5rem/1.12 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.gc-mega__feat p:not(.gc-eyebrow) { margin: 0; font: 450 0.9375rem/1.45 var(--font-text); }
.gc-mega__feat .gc-btn { align-self: flex-start; margin-top: var(--space-3); }
.gc-mega__feat--photo { padding: 0; color: var(--ink); background: var(--wash); }
.gc-mega__feat--photo img { display: block; width: 100%; height: 9.5rem; object-fit: cover; background: var(--wash); }
.gc-mega__feat--photo .gc-mega__txt { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.gc-mega__feat--photo .gc-eyebrow { color: var(--ink-soft); }
.gc-mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); align-content: start; padding: var(--space-3) var(--space-3) var(--space-3) 0; min-width: 0}
.gc-mega__col { min-width: 0; }
.gc-mega__col > .gc-eyebrow { margin: 0 0 var(--space-2); padding-left: var(--space-3); color: var(--ink-soft); }
.gc-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gc-mega__a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-3); align-items: center; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-md); transition: background-color 140ms ease}
.gc-mega__a:hover, .gc-mega__a:focus-visible { background: var(--wash); }
.gc-mega__a:active { transform: scale(0.985); }
.gc-mega__ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--ground-ink, var(--ink)); background: var(--ground-tint, var(--wash)); border-radius: var(--radius-sm); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.gc-mega__a:hover .gc-mega__ico { transform: scale(1.06); }
.gc-mega__ico .gc-i { width: 1.25rem; height: 1.25rem; }
.gc-mega__t { display: grid; gap: 1px; min-width: 0; }
.gc-mega__t strong { font: 600 0.9375rem/1.25 var(--font-text); letter-spacing: -0.01em; }
.gc-mega__t small { font: 450 0.8125rem/1.35 var(--font-text); color: var(--ink-soft); }
.gc-mega__t .gc-i { display: inline; width: 0.8em; height: 0.8em; vertical-align: -0.05em; margin-left: 0.25em; }
.gc-mega-scrim { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(17, 27, 21, 0.22); background: color-mix(in srgb, var(--ink) 22%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms}
.gc-mega-scrim[data-on="true"] { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
@media (max-width: 63.6875em) { .gc-mega, .gc-mega-scrim { display: none; } }
@media (min-width: 63.75em) and (max-width: 79.9375em) { .gc-nav__brand small { display: none; } .gc-nav__brand b { white-space: nowrap; } }
@media (max-width: 73.6875em) { .gc-mega__in { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr)} .gc-mega__feat h3 { font-size: 1.3125rem; } }

/* Menu sheet groups: the same audience panels, as sections that open in place */
.gc-menu__g { border-top: 1px solid var(--rule); }
.gc-menu__g:last-child { border-bottom: 1px solid var(--rule); }
.gc-menu__tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) 0; color: var(--ink); text-align: left; background: transparent; border: 0; cursor: pointer; touch-action: manipulation}
.gc-menu__tr span { display: grid; }
.gc-menu__tr strong { font: 650 1.625rem/1.1 var(--font-display); letter-spacing: -0.028em; }
.gc-menu__tr[aria-current] strong::after { content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.4em; border-radius: 50%; background: var(--ink); vertical-align: 0.22em; }
.gc-menu__tr small { font: 450 0.9375rem/1.4 var(--font-text); color: var(--ink-soft); }
.gc-menu__tr .gc-i { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.gc-menu__g[data-open="true"] .gc-menu__tr .gc-i { transform: rotate(180deg); }
.gc-menu__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 280ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 280ms; }
.gc-menu__sub > div { overflow: hidden; min-height: 0; }
.gc-menu__g[data-open="true"] .gc-menu__sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 280ms cubic-bezier(.2,.8,.2,1), visibility 0s}
.gc-menu__list { list-style: none; margin: 0; padding: 0 0 var(--space-3) var(--space-3); display: grid; }
.gc-menu__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-3); min-height: var(--tap-min); padding: var(--space-2) 0; border-top: 0; border-bottom: 0}
.gc-menu__list li:last-child a { border-bottom: 0; }
.gc-menu__list strong { font: 600 1.0625rem/1.25 var(--font-text); letter-spacing: -0.012em; }
.gc-menu__list small { grid-column: 1; font: 450 0.875rem/1.35 var(--font-text); color: var(--ink-soft); }
.gc-menu__list .gc-i { grid-row: 1 / span 2; grid-column: 2; width: 1em; height: 1em; color: var(--ink-soft); }
.gc-menu__list a[aria-current="page"] strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ---------- Filter chips ---------- */
.gc-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.gc-filter { display: inline-flex; align-items: center; gap: 0.5em; min-height: var(--tap-min); padding: 0 1.1em; font: 600 0.9375rem/1 var(--font-text); color: var(--ink); background: transparent; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; transition: background-color 140ms ease, color 140ms ease, transform 100ms ease-out; }
.gc-filter:hover { background: var(--wash); }
.gc-filter:active { transform: scale(0.97); }
.gc-filter[aria-pressed="true"] { color: var(--chalk); background: var(--ink); border-color: var(--ink); }
.gc-filter small { font: 600 0.8125rem/1 var(--font-text); font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ---------- Lightbox ---------- */
.gc-lb { position: fixed; inset: 0; z-index: var(--z-sheet); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; background: rgba(10, 16, 12, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: gc-lb-in 220ms cubic-bezier(.2,.8,.2,1); touch-action: pan-y}
.gc-lb[data-leaving="true"] { opacity: 0; transition: opacity 160ms ease; }
@keyframes gc-lb-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.gc-lb__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: max(var(--space-3), env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-4), env(safe-area-inset-left, 0px)); }
.gc-lb__n { margin: 0; font: 600 0.9375rem/1 var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; opacity: 0.9; }
.gc-lb__stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--space-4); cursor: grab; touch-action: pan-y; }
.gc-lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); background: #1b241e; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; will-change: transform}
.gc-lb__foot { padding: var(--space-3) max(var(--space-5), env(safe-area-inset-right, 0px)) max(var(--space-5), env(safe-area-inset-bottom, 0px)) max(var(--space-5), env(safe-area-inset-left, 0px)); text-align: center; }
.gc-lb__cap { margin: 0 auto; max-width: 62ch; min-height: 1.5em; font: 450 1rem/1.5 var(--font-text); }
.gc-lb__btn { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); padding: 0; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out, background-color 140ms ease; }
.gc-lb__btn:hover { background: rgba(255, 255, 255, 0.22); }
.gc-lb__btn:active { transform: scale(0.94); }
.gc-lb__btn:disabled { opacity: 0.35; cursor: default; }
.gc-lb__prev, .gc-lb__next { position: absolute; top: 50%; margin-top: calc(var(--tap-min) / -2); }
.gc-lb__prev { left: max(var(--space-3), env(safe-area-inset-left, 0px)); }
.gc-lb__next { right: max(var(--space-3), env(safe-area-inset-right, 0px)); }
@media (max-width: 34.9375em) { .gc-lb__prev, .gc-lb__next { top: auto; bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); margin-top: 0; } .gc-lb__prev { left: var(--space-3); } .gc-lb__next { right: var(--space-3); } .gc-lb__foot { padding-inline: calc(var(--tap-min) + var(--space-5)); min-height: calc(var(--tap-min) + var(--space-3)); } }
html[data-lb="open"] { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gc-lb { animation: none; } .gc-mega, .gc-nav__item[data-open="true"] > .gc-mega, .gc-mega-scrim, .gc-menu__sub, .gc-menu__tr .gc-i, .gc-nav__tr .gc-i { transition-duration: 0.01ms !important; } .gc-mega { transform: none; } }

/* ---------- Sheet (menu drawer) ---------- */
.gc-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); opacity: 0; touch-action: none; }
.gc-sheet { position: fixed; z-index: var(--z-sheet); top: 0; right: 0; bottom: 0; width: min(92vw, 28rem); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); color: var(--ink); background: var(--glass-thick); -webkit-backdrop-filter: blur(calc(var(--p, 1) * var(--blur-thick))) saturate(160%); backdrop-filter: blur(calc(var(--p, 1) * var(--blur-thick))) saturate(160%); border-left: 1px solid var(--glass-edge); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--shadow-lg); will-change: transform; touch-action: pan-y; overscroll-behavior: contain; outline: none; }
.gc-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.gc-sheet__title { margin: 0; font: 700 1.75rem/1 var(--font-display); letter-spacing: -0.03em; }
.gc-sheet__close { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); color: var(--ink); background: transparent; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out; }
.gc-sheet__close:active { transform: scale(0.94); }
.gc-sheet__body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-6); }
.gc-sheet__inner { transform: scale(calc(0.97 + 0.03 * var(--p, 1))); transform-origin: 100% 0; opacity: calc(0.4 + 0.6 * var(--p, 1)); }
.gc-menu { list-style: none; margin: 0; padding: 0; display: grid; }
.gc-menu a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-3); min-height: 64px; padding: var(--space-3) 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--rule)}
.gc-menu li:last-child a { border-bottom: 1px solid var(--rule); }
.gc-menu strong { font: 650 1.625rem/1.1 var(--font-display); letter-spacing: -0.028em; }
.gc-menu small { grid-column: 1; font: 450 0.9375rem/1.4 var(--font-text); color: var(--ink-soft); }
.gc-menu .gc-i { grid-row: 1 / span 2; grid-column: 2; }
.gc-menu a[aria-current="page"] strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gc-menu a:active strong { transform: translateX(2px); }
.gc-sheet__foot { display: grid; gap: var(--space-3); padding-top: var(--space-5); }
@media (prefers-reduced-transparency: reduce) { .gc-sheet, .gc-nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } .gc-nav::after { display: none; } }

/* ---------- Growth ruler ---------- */
.gc-rule { container-type: inline-size; user-select: none; -webkit-user-select: none}
.gc-rule__track { position: relative; height: var(--rule-h); margin-inline: 0; touch-action: pan-y; cursor: grab; border-radius: var(--radius-sm); }
.gc-rule[data-dragging="true"] .gc-rule__track { cursor: grabbing; }
.gc-rule__bands { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem; display: flex; }
.gc-rule__seg { flex: var(--c) 1 0; display: flex; background: var(--ground); color: var(--on-ground); }
.gc-rule__seg:first-child { border-radius: 999px 0 0 999px; }
.gc-rule__seg:last-child { border-radius: 0 999px 999px 0; }
.gc-rule__cell { position: relative; flex: 1 1 0; min-width: 0; display: grid; place-items: center; --tick: 1rem; }
.gc-rule__cell::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: var(--tick); margin-left: -1px; background: var(--rule-strong); border-radius: var(--radius-xs); }
.gc-rule__cell[data-first="true"] { --tick: 1.75rem; }
.gc-rule__cell[data-first="true"]::before { width: 3px; margin-left: -1.5px; background: var(--ink); }
.gc-rule__lbl { font: 600 min(0.875rem, 4.8cqi)/1 var(--font-text); letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-rule__lbl i { font-style: normal; display: none; }
.gc-rule__lbl .t { display: inline; }
.gc-rule__cell[data-active="true"] .gc-rule__lbl { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gc-rule__cell[data-active="true"]::before { opacity: 0; }
@container (min-width: 560px) { .gc-rule__lbl .t { display: none; } .gc-rule__lbl .s { display: inline; } .gc-rule__lbl { font-size: min(1rem, 3.6cqi); } }
@container (min-width: 960px) { .gc-rule__lbl .s { display: none; } .gc-rule__lbl .f { display: inline; } .gc-rule__lbl { font-size: min(1.0625rem, 1.8cqi); } }
.gc-rule__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; pointer-events: none; }
.gc-rule__bubble { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 3.75rem; padding: 0.28em 1em 0.34em; font: italic 400 1.25rem/1.2 var(--font-serif); white-space: nowrap; color: var(--chalk); background: var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transform: translateX(calc(-50% + var(--bshift, 0px))) rotate(var(--tilt, 0deg)); transform-origin: 50% 100%; transition: scale 160ms ease-out; }
.gc-rule[data-dragging="true"] .gc-rule__bubble { scale: 1.08; }
.gc-rule__mark { position: absolute; top: 2.3rem; bottom: 2.5rem; left: -2px; width: 4px; background: var(--ink); border-radius: var(--radius-xs); box-shadow: 0 0 0 2px var(--chalk); }
.gc-rule__mark::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--ink); border: 2px solid var(--chalk); border-radius: 50%; }
.gc-rule__grab { position: absolute; top: 0; bottom: 0; left: -22px; width: 44px; pointer-events: auto; }
.gc-rule__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.gc-rule__stages { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.gc-rule__steps { display: flex; gap: var(--space-2); margin-left: auto; }
.gc-rule__step { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); color: var(--ink); background: transparent; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out; }
.gc-rule__step:active { transform: scale(0.94); }
.gc-rule__step[disabled] { opacity: 0.35; pointer-events: none; }

/* ---------- Segmented stage chips ---------- */
.gc-chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: var(--tap-min); padding: 0.45em 1.1em; color: var(--ink); background: transparent; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-pill); cursor: pointer; text-align: left; touch-action: manipulation; transition: transform 100ms ease-out, background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.gc-chip b { font: 600 0.9375rem/1.15 var(--font-text); }
.gc-chip small { font: 450 0.8125rem/1.2 var(--font-text); letter-spacing: 0.01em; opacity: 0.85; }
.gc-chip:active { transform: scale(0.97); }
.gc-chip[aria-pressed="true"], .gc-chip[aria-checked="true"] { background: var(--ground, var(--action)); color: var(--on-ground, var(--on-action)); border-color: var(--ground, var(--action)); }
.gc-chip[aria-pressed="true"] small, .gc-chip[aria-checked="true"] small { opacity: 1; }

/* ---------- Band (full-bleed stage ground) ---------- */
.gc-band { background: var(--ground); color: var(--on-ground); transition: background-color 320ms ease, color 320ms ease; }
.gc-band[data-stage] .gc-eyebrow::before { background: currentColor; }
.gc-band--tint { background: var(--ground-tint); color: var(--ink); }
.gc-band--wash { background: var(--wash); color: var(--ink); }
.gc-band--ink { background: var(--ink); color: var(--chalk); }

/* ---------- Stage panel ---------- */
.gc-panel { padding-block: var(--space-7); }
.gc-panel__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6)}
.gc-panel__mark { container-type: inline-size; display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.gc-panel__mark .gc-eyebrow { color: inherit; opacity: 0.9; }
.gc-panel__big { margin: 0; font: 700 clamp(4.5rem, 64cqi, 9rem)/0.86 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gc-panel__big[data-words="true"] { font-size: clamp(2.25rem, 17.5cqi, 5.25rem); line-height: 0.95; letter-spacing: -0.04em; }
.gc-panel__title { margin: 0 0 var(--space-3); font: 700 clamp(1.75rem, 3.4vw, 2.5rem)/1.1 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.gc-panel__lede { margin: 0 0 var(--space-5); max-width: var(--measure); font-size: 1.125rem; line-height: 1.55; }
.gc-panel__act { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.gc-panel__on h3 { margin: 0 0 var(--space-3); font: 650 1.0625rem/1.3 var(--font-display); letter-spacing: -0.012em; }
.gc-panel__on ul { list-style: none; margin: 0; padding: 0; display: grid; }
.gc-panel__on li { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1.5px solid currentColor; border-top-color: rgba(127, 127, 127, 0.35); border-top-color: color-mix(in srgb, currentColor 35%, transparent); font-weight: 600}
.gc-panel__on li small { display: block; font-weight: 400; opacity: 0.9; }
.gc-panel__on li::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.45em; background: currentColor; border-radius: 50%; }
.gc-panel__swap { animation: gc-swap var(--dur-snappy) var(--ease-snappy) both; }
@keyframes gc-swap { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 28px), 0, 0); } to { opacity: 1; transform: none; } }
@media (min-width: 56.25em) { .gc-panel__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-7)} .gc-panel { padding-block: var(--space-8); } }

/* ---------- Class lanes (what is on, class by class) ---------- */
.gc-lanes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4)}
.gc-lane { display: contents; }
.gc-lane__head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); }
.gc-lane__head h3 { margin: 0; font: 600 1.0625rem/1.25 var(--font-text); }
.gc-lane__head p { margin: 0; font: 450 0.9375rem/1.4 var(--font-text); color: var(--ink-soft); }
.gc-lane__track { grid-column: 1; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); height: 1.25rem; margin-top: calc(var(--space-2) * -1)}
.gc-lane__cell { position: relative; background: var(--ground-tint); }
.gc-lane__cell:first-child { border-radius: 999px 0 0 999px; }
.gc-lane__cell:last-child { border-radius: 0 999px 999px 0; }
.gc-lane__cell[data-on="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px; background: var(--ink); }
.gc-lane__cell[data-start="true"]::after { border-radius: 5px 0 0 5px; left: 2px; }
.gc-lane__cell[data-end="true"]::after { border-radius: 0 5px 5px 0; right: 2px; }
.gc-lane__cell[data-start="true"][data-end="true"]::after { border-radius: 5px; }
.gc-lanes__axis { grid-column: 1; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); font: 600 0.75rem/1 var(--font-text); text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: calc(var(--space-2) * -1)}
.gc-lanes__axis span { padding-block: 2px; }
.gc-lanes__axis span[data-sel="true"] { color: var(--ink); }
.gc-lanes__plot { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.gc-lanes__sel { position: absolute; top: -4px; bottom: -4px; left: 0; width: calc(100% / 15); border: 2px solid var(--ink); border-radius: var(--radius-sm); transform: translateX(calc(var(--sel, 0) * 100%)); transition: transform var(--dur-snappy) var(--ease-snappy); }
@media (max-width: 56.1875em) {
  .gc-lanes__sel { display: none; }
  .gc-lane__cell[data-sel="true"] { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 1; }
}
@media (min-width: 56.25em) {
  .gc-lanes { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-4); align-items: center}
  .gc-lane__head { display: block; grid-column: 1; }
  .gc-lane__track { grid-column: 2; height: 1.5rem; margin-top: 0; }
  .gc-lanes__axis { grid-column: 2; margin-bottom: 0; }
  .gc-lanes__plot { left: calc(15rem + var(--space-4)); }
}

/* ---------- Date plate and notice ---------- */
.gc-date { position: relative; flex: none; display: grid; justify-items: center; width: 5.25rem; padding: 0 0 0.45rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-md); overflow: hidden; text-align: center; }
.gc-date__m { width: calc(100% + 4px); margin: -2px -2px 0; padding: 0.34rem 0; background: var(--ink); color: var(--chalk); font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; }
.gc-date__d { font: 700 2.75rem/1 var(--font-display); letter-spacing: -0.04em; padding-top: 0.15rem; font-variant-numeric: tabular-nums; }
.gc-date__y { font: 600 0.8125rem/1 var(--font-text); letter-spacing: 0.04em; }
.gc-notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-5); color: var(--ink); background: var(--ground-tint, var(--wash)); border: 1px solid var(--ground, var(--ink)); border: 1px solid color-mix(in srgb, var(--ground, var(--ink)) 55%, transparent); border-radius: var(--radius-lg)}
.gc-notice__body h3 { margin: var(--space-2) 0 var(--space-1); font: 650 1.625rem/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.gc-notice__body p { margin: 0; max-width: var(--measure); }
.gc-notice__act { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 47.5em) { .gc-notice { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5)} .gc-notice--nodate { grid-template-columns: minmax(0, 1fr)} .gc-notice .gc-notice__act { grid-column: 1 / -1; } }
@media (min-width: 68.75em) { .gc-notice:not(.gc-notice--stack) { grid-template-columns: auto minmax(0, 1fr) auto} .gc-notice--nodate:not(.gc-notice--stack) { grid-template-columns: minmax(0, 1fr) auto} .gc-notice:not(.gc-notice--stack) .gc-notice__act { grid-column: auto; } }

/* ---------- Fact ---------- */
.gc-facts { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: var(--space-5) var(--space-4)}
.gc-fact { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.gc-fact__n { font: 700 clamp(2.25rem, 7cqi, 3.75rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gc-fact__l { font: 450 0.9375rem/1.4 var(--font-text); max-width: 22ch; opacity: 0.92; }

/* ---------- Picture ---------- */
.gc-photo { margin: 0; display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.gc-photo img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: var(--radius-lg); background: var(--wash); }
.gc-photo figcaption { font: 450 0.8125rem/1.4 var(--font-text); letter-spacing: 0.015em; color: var(--ink-soft); }
.gc-band .gc-photo figcaption { color: inherit; opacity: 0.92; }

/* ---------- Accordion ---------- */
.gc-acc { display: grid; gap: var(--space-3); }
.gc-acc__item { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding-inline: var(--space-5); box-shadow: var(--shadow-card); }
.gc-acc__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: 64px; padding: var(--space-3) 0; font: 600 1.0625rem/1.35 var(--font-text); letter-spacing: -0.01em; text-align: left; color: var(--ink); background: transparent; border: 0; cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out; }
.gc-acc__q:active { transform: scale(0.992); }
.gc-acc__q .gc-i { transition: transform var(--dur-snappy) var(--ease-snappy); }
.gc-acc__item[data-open="true"] .gc-acc__q .gc-i { transform: rotate(180deg); }
.gc-acc__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-standard) var(--ease-standard), visibility 0s linear var(--dur-standard); }
.gc-acc__item[data-open="true"] .gc-acc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-standard) var(--ease-standard), visibility 0s}
.gc-acc__panel > div { overflow: hidden; min-height: 0; }
.gc-sheet { -webkit-user-select: none; user-select: none}
.gc-sheet a { -webkit-user-drag: none; }
.gc-acc__item > h3 { margin: 0; font: inherit; }
.gc-acc__panel p { margin: 0 0 var(--space-4); max-width: var(--measure); }

/* ---------- Checklist ---------- */
.gc-check { margin: 0; padding: 0; list-style: none; display: grid; }
.gc-check li { border-top: 1px solid var(--rule); }
.gc-check li:last-child { border-bottom: 1px solid var(--rule); }
.gc-check label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; min-height: 56px; padding: var(--space-3) 0; cursor: pointer; touch-action: manipulation}
.gc-check input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; flex: none; background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 9px; display: grid; place-items: center; cursor: pointer; transition: transform 100ms ease-out, background-color 120ms ease; }
.gc-check input:active { transform: scale(0.92); }
.gc-check input::after { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--on-action); border-bottom: 3px solid var(--on-action); transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform var(--dur-snappy) var(--ease-snappy); }
.gc-check input:checked { background: var(--action); border-color: var(--action); }
.gc-check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.gc-check input:checked + span { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.gc-check__count { margin: var(--space-3) 0 0; font: 600 0.9375rem/1.4 var(--font-text); }

/* ---------- Form fields ---------- */
.gc-field { display: grid; gap: var(--space-1); min-width: 0; }
.gc-field > label, .gc-field > legend { font: 600 0.9375rem/1.3 var(--font-text); padding: 0; }
.gc-field__help { font: 450 0.8125rem/1.4 var(--font-text); letter-spacing: 0.01em; color: var(--ink-soft); }
.gc-input { width: 100%; min-height: 48px; padding: 0.6em 0.8em; font: 400 1rem/1.4 var(--font-text); color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 14px; appearance: none; -webkit-appearance: none; }
textarea.gc-input { min-height: 7rem; resize: vertical; }
select.gc-input { padding-right: 2.4em; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25em) 55%, calc(100% - 0.9em) 55%; background-size: 0.4em 0.4em; background-repeat: no-repeat; }
.gc-input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.gc-input[aria-invalid="true"] { border-color: var(--danger); }
.gc-field__error { display: none; align-items: center; gap: 0.4em; font: 600 0.875rem/1.35 var(--font-text); color: var(--danger); }
.gc-field[data-invalid="true"] .gc-field__error { display: flex; }
.gc-field__error .gc-i { width: 1.1em; height: 1.1em; }

/* ---------- Pictures strip and tape ---------- */
.gc-tape { display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); padding: 0 0 var(--space-4); scrollbar-width: thin; cursor: grab; }
.gc-tape[data-dragging="true"] { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none}
.gc-tape__i { position: relative; flex: 1 0 min(17rem, 78vw); scroll-snap-align: start; padding-top: var(--space-6); }
.gc-tape__i::before { content: ""; position: absolute; left: 0; right: calc(var(--space-4) * -1); top: 0; height: 14px; background: repeating-linear-gradient(to right, var(--rule-strong) 0 2px, transparent 2px 14px); border-bottom: 2px solid var(--ink); }
.gc-tape__i::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 26px; background: var(--ink); border-radius: var(--radius-xs); }
.gc-tape__i:last-child::before { right: 0; }
.gc-tape__y { font: 700 clamp(2.5rem, 6cqi, 3.5rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 0 0 var(--space-2); }
.gc-tape__i h3 { margin: 0 0 var(--space-2); font: 600 1.25rem/1.25 var(--font-text); letter-spacing: -0.012em; }
.gc-tape__i p { margin: 0; max-width: 36ch; color: var(--ink-soft); }
.gc-tape__i .gc-tape__y { max-width: none; color: var(--ink); }

/* ---------- Layout: the margin layout ---------- */
.gc-page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
.gc-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-8)}
.gc-sec__label { align-self: start; min-width: 0; max-width: 40rem; }
.gc-sec__label .gc-eyebrow { display: flex; align-items: center; gap: 0.7em; }
.gc-sec__label .gc-eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--stage-pre-primary); border-radius: 2px; }
.gc-sec__label h2 { margin: var(--space-3) 0 0; font: 700 clamp(2rem, 5.4vw, 2.75rem)/1.08 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.gc-sec__body { min-width: 0; }
@media (min-width: 56.25em) { .gc-sec { gap: var(--space-6); padding-block: var(--space-9); } }

/* ---------- Toast ---------- */
.gc-toast { position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); max-width: min(92vw, 26rem); padding: 0.75em 1.25em; font: 600 0.9375rem/1.35 var(--font-text); color: var(--chalk); background: var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: transform var(--dur-snappy) var(--ease-snappy), opacity 160ms ease; }
.gc-toast[data-on="true"] { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Preferences: reduced motion, transparency, contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  .gc-btn, .gc-btn .gc-i, .gc-chip, .gc-filter, .gc-acc__q, .gc-acc__q .gc-i, .gc-nav__links a::after, .gc-check input::after, .gc-toast { transition-duration: 160ms !important; transition-timing-function: ease !important; }
  .gc-btn:active, .gc-chip:active, .gc-acc__q:active, .gc-rule__step:active, .gc-sheet__close:active, .gc-nav__menu:active { transform: none; }
  .gc-btn:hover .gc-i--go { transform: none; }
  .gc-panel__swap { animation: gc-fade 160ms ease both; }
  .gc-lanes__sel { transition: none; }
  .gc-acc__panel { transition-duration: 160ms !important; }
  .gc-toast { transform: translate(-50%, 0); }
  .gc-rule__bubble { transform: translateX(calc(-50% + var(--bshift, 0px))); scale: 1 !important; }
  .gc-sheet__inner { transform: none; }
  .gc-band { transition-duration: 160ms; }
}
@keyframes gc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-contrast: more) {
  .gc-notice, .gc-photo img, .gc-date { outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
  .gc-nav, .gc-sheet { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid var(--ink); }
  .gc-rule__cell::before { background: var(--ink); }
}
/* the smallest screens with very large text: long words and chips wrap instead of pushing the page wide */
.gc-eyebrow { overflow-wrap: anywhere; }
.gc-filters > li { min-width: 0; max-width: 100%; }
.gc-filter { max-width: 100%; }
@media (max-width: 22.4375em) { .gc-panel__big { font-size: min(4.5rem, 22vw); } .gc-filter { white-space: normal; text-align: left; padding-block: var(--space-2); line-height: 1.2; } }
@media (max-width: 22.4375em) { .gc-sec__label .gc-eyebrow { gap: 0.4em; letter-spacing: 0.04em; } .gc-sec__label .gc-eyebrow::before { width: 0.75rem; } .gc-filter { padding-inline: 0.8em; } }

/* Page layouts for the Your School Concept 3 website. Every colour, size and radius is a token from tokens.css. */

[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--hdr-h, 76px) + var(--space-4)); }
body { margin: 0; background: var(--chalk); }
.gc-root { min-height: 100vh; }
.gc-root main { display: block; }
.gc-root h1, .gc-root h2, .gc-root h3 { text-wrap: balance; overflow-wrap: anywhere; }
.gc-root .row__d, .gc-root .deflist dd, .gc-root .gc-fact__l { overflow-wrap: anywhere; }
.gc-root p { text-wrap: pretty; }
.gc-root p, .gc-root li, .gc-root dd { overflow-wrap: break-word; }
.gc-root img { max-width: 100%; }

/* ---------- The four-colour strip: the ruler's stages, flattened into a rule ---------- */
.gc-strip { display: flex; height: 6px; }
.gc-strip i { flex: var(--f) 1 0; background: var(--ground); }

/* ---------- Inner page opener: tag above, then the title and its lead ---------- */
.open { display: grid; gap: var(--space-4); padding-top: var(--space-7); padding-bottom: var(--space-6); }
.open__tag { margin: 0; display: flex; align-items: center; gap: 0.7em; }
.open__tag::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--stage-pre-primary); border-radius: 2px; }
.open__h { margin: 0; max-width: 18ch; font: 700 clamp(2.5rem, 8vw, 4.5rem)/1.04 var(--font-display); letter-spacing: -0.04em; }
.open__lede { margin: var(--space-5) 0 0; max-width: 56ch; font-size: 1.25rem; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-soft); }
.open__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 56.25em) { .open { padding-top: var(--space-9); padding-bottom: var(--space-7); } }

/* The notice takes an h2 where it is the page's own subject */
.gc-notice__body h2 { margin: var(--space-2) 0 var(--space-1); font: 650 1.625rem/1.12 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }

/* ---------- Home hero: the school, described ---------- */
.hero { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.hero > .gc-eyebrow { display: flex; align-items: center; gap: 0.7em; }
.hero > .gc-eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--stage-pre-primary); border-radius: 2px; }
.hero__h { margin: var(--space-4) 0 0; font: 700 clamp(2.625rem, 11.2vw, 5.5rem)/1.02 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.hero__h span { display: block; }
.hero__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; color: var(--stage-primary-ink); }
.hero__row { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.hero__lede { margin: 0; max-width: 46ch; font-size: 1.1875rem; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-soft); }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hero__stage { position: relative; margin-top: var(--space-7); }
.hero__photo { margin: 0; }
.hero__photo .gc-photo { position: relative; margin: 0; }
.hero__photo img, .hero__photo video { aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 40% 42%; }
.hero__photo figcaption { position: absolute; top: var(--space-3); left: var(--space-3); max-width: calc(100% - 2 * var(--space-3)); padding: 0.4em 0.95em; font: 500 0.75rem/1.35 var(--font-text); letter-spacing: 0; color: var(--ink); background: rgba(255, 255, 255, 0.92); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(var(--blur-thin)); backdrop-filter: blur(var(--blur-thin)); border-radius: var(--radius-pill)}
.hero__card { position: relative; margin: calc(var(--space-6) * -1) var(--space-3) 0; overflow: hidden; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), 0 24px 48px -24px #111b1533; }
.hero__ledger { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr))}
.hero__ledger > div { display: grid; gap: var(--space-1); align-content: start; min-width: 0; padding: var(--space-4); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.hero__ledger > div:nth-child(-n+2) { border-top: 0; }
.hero__ledger > div:nth-child(odd) { border-left: 0; }
.hero__ledger dt { margin: 0; font: 600 0.75rem/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.hero__ledger dd { margin: 0; font: 650 clamp(1.0625rem, 4.2vw, 1.375rem)/1.2 var(--font-display); letter-spacing: -0.022em; overflow-wrap: anywhere; text-wrap: balance; }
@media (min-width: 56.25em) {
  .hero { padding-top: var(--space-8); }
  .hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-7); margin-top: var(--space-6)}
  .hero__photo img, .hero__photo video { aspect-ratio: 2.7 / 1; object-position: 50% 44%; }
  .hero__card { margin: calc(var(--space-7) * -1) var(--space-6) 0; }
  .hero__ledger { grid-template-columns: repeat(4, minmax(0, 1fr))}
  .hero__ledger > div { padding: var(--space-5) var(--space-6); border-top: 0; }
  .hero__ledger > div:nth-child(odd) { border-left: 1px solid var(--rule); }
  .hero__ledger > div:first-child { border-left: 0; }
}
@media (max-width: 34.9375em) { .hero__sec { display: none; } }

/* ---------- Home: the class finder ---------- */
.hero__rule { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.hero__ruleHead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.hero__ask { display: grid; gap: var(--space-2); min-width: 0; flex: 1 1 28rem; }
.hero__ask .gc-eyebrow { display: flex; align-items: center; gap: 0.7em; }
.hero__ask .gc-eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--stage-pre-primary); border-radius: 2px; }
.hero__q { margin: var(--space-1) 0 0; font: 700 clamp(2.125rem, 6.2vw, 3.75rem)/1.05 var(--font-display); letter-spacing: -0.04em; }
.hero__sub { margin: var(--space-1) 0 0; max-width: 42ch; font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); }
.hero__ruleHead .accent { margin: 0; color: var(--ink-soft); }
.rule-fallback { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rule-fallback a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* ---------- Text blocks ---------- */
.prose p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: var(--space-6) 0 var(--space-2); font: 650 1.375rem/1.2 var(--font-display); letter-spacing: -0.022em; }
.sec-lede { margin: 0 0 var(--space-5); max-width: var(--measure); font-size: 1.1875rem; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-soft); }
.gc-band .sec-lede { color: inherit; }
.note { margin: var(--space-4) 0 0; max-width: var(--measure); font-size: 0.9375rem; color: var(--ink-soft); }
.gc-band .note { color: inherit; opacity: 0.92; }
.stack { display: grid; gap: var(--space-5); }
.gc-root .gap-top { margin-top: var(--space-5); }
.acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.tags .gc-tag { overflow-wrap: anywhere; }
.tags { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gc-sec--tight { padding-block: var(--space-6); }
.pad-block { padding-block: var(--space-6); }
.pad-block--lg { padding-block: var(--space-7); }
.pad-block--notice { padding-top: var(--space-7); padding-bottom: 0; }

/* ---------- Lists: rows grouped in one soft card ---------- */
.rows { list-style: none; margin: 0; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--rule)}
.row:first-child { border-top: 0; }
.row__main { min-width: 0; }
.row__t { margin: 0; font: 600 1.0625rem/1.35 var(--font-text); letter-spacing: -0.012em; }
.row__d { margin: var(--space-1) 0 0; max-width: var(--measure); color: var(--ink-soft); }
.row__meta { margin: 0 0 var(--space-2); }
.row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row__meta .gc-status--soon { background: var(--stage-pre-primary-tint); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(245, 184, 28, 0.6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-pre-primary) 60%, transparent)}
.row__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row__acts .gc-btn { max-width: 100%; }
@media (min-width: 43.75em) { .row { grid-template-columns: minmax(0, 1fr) auto} .row__acts { justify-content: flex-end; } }
.gc-band .row__d { color: var(--ink-soft); }
.rows--plain .row { grid-template-columns: minmax(0, 1fr)}

/* ---------- Definition list ---------- */
.deflist { margin: 0; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); border-bottom: 1px solid var(--rule)}
.deflist dt, .deflist dd { margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.deflist dt { padding-top: calc(var(--space-3) + 0.2em); font: 600 0.75rem/1.4 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.deflist dd { overflow-wrap: anywhere; }
.deflist .num { font-variant-numeric: tabular-nums; }
@media (max-width: 32.4375em) { .deflist { grid-template-columns: minmax(0, 1fr)} .deflist dt { padding-bottom: 0; } .deflist dd { border-top: 0; padding-top: var(--space-1); } }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--rule)}
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--on-action); background: var(--action); border-radius: 50%; font: 600 1.0625rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.steps h3 { margin: 0 0 var(--space-1); font: 600 1.125rem/1.3 var(--font-text); letter-spacing: -0.012em; }
.steps p { margin: 0; max-width: var(--measure); color: var(--ink-soft); }

/* ---------- Photographs keep their own proportions ---------- */
.photos { display: grid; gap: var(--space-5) var(--space-5); }
.gallery .photos + .photos { margin-top: var(--space-5); }
@media (min-width: 45em) { .photos { display: flex; align-items: flex-start; } .photos .gc-photo { flex: var(--ar, 1) 1 0; } }
.gallery { display: grid; gap: var(--space-5); }
.wide-photo { margin-bottom: var(--space-5); }

/* ---------- The school video (home page): the same frame as a photograph; the poster shows until, and unless, the video plays ---------- */
.gc-photo video { width: 100%; height: auto; display: block; object-fit: cover; border-radius: var(--radius-lg); background: var(--wash); }
.gc-video__btn { position: absolute; z-index: 2; right: var(--space-3); bottom: calc(var(--space-6) + var(--space-3)); display: inline-flex; align-items: center; gap: 0.5em; min-height: var(--tap-min); padding: 0 1.15em 0 1em; font: 600 0.875rem/1 var(--font-text); letter-spacing: 0; color: var(--ink); background: rgba(255, 255, 255, 0.92); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(var(--blur-thin)); backdrop-filter: blur(var(--blur-thin)); border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out}
.gc-video__btn:active { transform: scale(0.97); }
.gc-video__btn[hidden], .gc-video.is-failed .gc-video__btn { display: none; }
.gc-video__ico { width: 1.15em; height: 1.15em; }
.gc-video[data-state="playing"] .gc-video__ico--play, .gc-video[data-state="paused"] .gc-video__ico--pause { display: none; }
.gc-video__ico--play { fill: currentColor; }
@media (min-width: 56.25em) { .gc-video__btn { bottom: calc(var(--space-7) + var(--space-3)); } }
@media (prefers-reduced-transparency: reduce) { .gc-video__btn, .hero__photo figcaption { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .gc-photo video { outline: 1.5px solid var(--ink); outline-offset: -1.5px; } }

/* ---------- Stage jump links on the Classes page ---------- */
.jump { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--space-2)}
.jump a { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap-min); height: 100%; padding: 0.55em 0.9em; color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--rule); border-left: 6px solid var(--ground); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: background-color 160ms ease, color 160ms ease, transform 100ms ease-out; }
.jump a:hover { background: var(--ground); color: var(--on-ground); }
.jump a:active { transform: scale(0.98); }
.jump b { font: 600 1.0625rem/1.2 var(--font-text); letter-spacing: -0.012em; }
.jump small { font: 450 0.8125rem/1.3 var(--font-text); }
.jump-label { margin: var(--space-6) 0 0; }

.sel { margin: var(--space-5) 0 var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sel__c { display: block; font: 700 clamp(2.25rem, 6.4vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.04em; }
.sel__c span { color: var(--ground-ink); }
.sel p { margin: var(--space-2) 0 0; max-width: var(--measure); }
.lanes { margin-top: var(--space-5); overflow-x: hidden; overflow-x: clip}

/* ---------- Chapters: one band per stage, never two side by side ---------- */
.chapter .gc-sec { padding-block: var(--space-8); }
.chapter__tag { margin: 0 0 var(--space-4); max-width: 26ch; font: 650 clamp(1.625rem, 3.8vw, 2.375rem)/1.14 var(--font-display); letter-spacing: -0.032em; }
.chapter .gc-facts { margin-top: var(--space-6); }
.chapter .tags { margin-top: var(--space-6); }
.stepup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2)}
.stepup p { margin: 0; max-width: var(--measure); }
.stepup .pencil { color: var(--ink-soft); }

/* ---------- Labs ---------- */
.labs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3)}
.labs li { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
@media (min-width: 40em) { .labs { grid-template-columns: repeat(5, minmax(0, 1fr))} }
.labs span { overflow-wrap: anywhere; }
.labs b { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--stage-secondary-tint); color: var(--stage-secondary-ink); border-radius: 12px; font: 650 1.0625rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.labs span { font: 600 1.125rem/1.25 var(--font-display); letter-spacing: -0.02em; }

/* ---------- Mission, values, people ---------- */
.quote { margin: 0 0 var(--space-6); }
.quote:last-child { margin-bottom: 0; }
.quote p { margin: var(--space-2) 0 0; max-width: 26ch; font: 400 clamp(1.75rem, 3.8vw, 2.625rem)/1.2 var(--font-serif); letter-spacing: -0.015em; text-wrap: balance; }
.quote .gc-eyebrow { font-family: var(--font-text); }
.quote .gc-eyebrow { opacity: 0.95; }
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4)}
.values li { padding: var(--space-5); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.values h3 { margin: 0 0 var(--space-2); font: 650 1.375rem/1.2 var(--font-display); letter-spacing: -0.025em; }
.values p { margin: 0; color: var(--ink-soft); }
.person { margin: var(--space-6) 0 0; padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-card); max-width: var(--measure); }
.person__y { margin: 0; font: 700 clamp(2rem, 5vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.person h3 { margin: var(--space-2) 0 var(--space-1); font: 600 1.25rem/1.25 var(--font-text); letter-spacing: -0.012em; }
.person p:last-child { margin: 0; color: var(--ink-soft); }

/* ---------- Forms ---------- */
.enq { display: grid; gap: var(--space-5); max-width: 46rem; }
.enq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-5)}
.enq__result { margin: 0; padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-card); }
.enq__result b { display: block; margin-bottom: var(--space-1); font: 650 1.375rem/1.2 var(--font-display); letter-spacing: -0.025em; }
.enq__result p { margin: 0 0 var(--space-3); max-width: var(--measure); }
.enq__result .row__acts { margin-top: var(--space-3); }
.enq__note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); max-width: 46rem; border: 1px solid rgba(245, 184, 28, 0.55); border: 1px solid color-mix(in srgb, var(--stage-pre-primary) 55%, transparent); background: var(--stage-pre-primary-tint); border-radius: var(--radius-md)}
.enq__count { text-align: right; }
.search { display: grid; gap: var(--space-1); max-width: 30rem; margin-bottom: var(--space-4); }
.search label { font: 600 0.9375rem/1.3 var(--font-text); }
.search__n { margin: var(--space-2) 0 0; font: 450 0.9375rem/1.4 var(--font-text); color: var(--ink-soft); }

/* ---------- Library status ---------- */
.libstat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-5); }
.libstat .gc-status { font-size: 0.9375rem; }
/* A closed library is a fact, not an error: keep it neutral rather than red. */
.libstat .gc-status--closed { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* ---------- Map: a small vector map of an invented neighbourhood, drawn on a canvas by assets/map.js. Without script, the poster picture shows. ---------- */
.map { position: relative; width: 100%; max-width: 1024px; height: clamp(28rem, 74vw, 32rem); max-height: 88vh; min-height: 20rem; overflow: hidden; isolation: isolate; border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); background: #f3f0e9; color: var(--ink); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent}
.map[data-dragging="true"] { cursor: grabbing; }
.map:focus-visible { outline-offset: -3px; }
.map [hidden] { display: none !important; }
.map__cv { position: absolute; left: 0; top: 0; display: block; }
.map__poster, .map__poster img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; -webkit-user-drag: none; }
.map__poster { z-index: 1; pointer-events: none; transition: opacity 320ms ease-out; }
.map[data-ready] .map__poster { opacity: 0; visibility: hidden; transition: opacity 320ms ease-out, visibility 0s linear 320ms; }
/* the pin: before the script runs it sits at the middle (the poster is centred on the school); after, the script places it */
.map__pin { position: absolute; z-index: 2; left: 50%; top: 50%; width: 32px; height: 44px; transform: translate(-50%, -100%); pointer-events: none; }
.map[data-ready] .map__pin { left: 0; top: 0; }
.map__pin svg { display: block; fill: var(--stage-secondary); stroke: var(--paper); stroke-width: 2.5; filter: drop-shadow(0 3px 3px rgba(17, 27, 21, 0.3)); }
.map__pin circle { fill: var(--paper); stroke: none; }
.map__tag { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 0.25em 0.9em 0.3em; font: italic 400 1.125rem/1.15 var(--font-serif); white-space: nowrap; color: var(--chalk); background: var(--ink); border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(17, 27, 21, 0.25); }
/* the place card, like the one a web map shows when you pick a place */
.map__card { position: absolute; z-index: 3; left: var(--space-3); top: var(--space-3); width: min(19.5rem, calc(100% - 6rem)); box-sizing: border-box; padding: var(--space-4); background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-md); cursor: default; user-select: text; -webkit-user-select: text}
.map__kind { margin: 0 0 2px; font: 600 0.75rem/1.4 var(--font-text); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.map__name { margin: 0; font: italic 400 1.5rem/1.15 var(--font-serif); color: var(--ink); }
.map__addr { margin: var(--space-2) 0 0; font: 400 0.875rem/1.45 var(--font-text); color: var(--ink-soft); }
.map__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.map__acts .gc-btn { flex: 1 1 auto; justify-content: center; }
.map__acts .map__copy { flex: 0 1 auto; }
.map__chip { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); font: 500 0.8125rem/1.4 var(--font-text); color: #1d4fb4; background: #e8f0fd; border-radius: var(--radius-sm); }
.map__ctl { position: absolute; z-index: 3; right: var(--space-3); top: calc(var(--space-3) + var(--tap-min) + 10px); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; cursor: default; }
.map__btn, .map__expand { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); padding: 0; color: var(--ink); background: transparent; border: 0; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; }
.map__btn + .map__btn { border-top: 1px solid var(--rule); }
.map__btn:hover, .map__expand:hover { background: var(--wash); }
.map__btn:active, .map__expand:active { background: var(--rule); }
.map__btn:focus-visible, .map__expand:focus-visible { outline-offset: -4px; }
.map__expand { position: absolute; z-index: 3; right: var(--space-3); top: var(--space-3); background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.map__expand .gc-i--x { display: none; }
.map[data-full="true"] .map__expand .gc-i--x { display: block; }
.map[data-full="true"] .map__expand .gc-i--ex { display: none; }
.map__scale { position: absolute; z-index: 2; left: var(--space-3); bottom: 26px; display: flex; align-items: flex-end; gap: 6px; font: 600 11px/1 var(--font-text); color: #3d4047; pointer-events: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.map__scale i { display: block; width: 60px; height: 6px; border: 2px solid #4b4e55; border-top: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); }
.map__credit { position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; padding: 2px 8px 2px 10px; font: 450 11px/1.5 var(--font-text); color: #3d4047; background: rgba(255, 255, 255, 0.82); border-top-left-radius: var(--radius-sm); pointer-events: none; }
.map__hint { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; display: grid; place-items: center; box-sizing: border-box; padding: var(--space-4); margin: 0; text-align: center; font: 500 1.0625rem/1.4 var(--font-text); color: #fff; background: rgba(17, 27, 21, 0.55); opacity: 0; visibility: hidden; transition: opacity 220ms ease-out, visibility 0s linear 220ms; pointer-events: none; }
.map__hint.is-on { opacity: 1; visibility: visible; transition: opacity 220ms ease-out; }
/* full screen: the script moves the map to the end of the page and sets data-full */
.map[data-full="true"] { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; touch-action: none; transform: none !important; opacity: 1 !important; visibility: visible !important}
.map[data-full="true"] .map__expand { top: max(var(--space-3), env(safe-area-inset-top)); right: max(var(--space-3), env(safe-area-inset-right)); }
.map[data-full="true"] .map__ctl { top: calc(max(var(--space-3), env(safe-area-inset-top)) + var(--tap-min) + 10px); right: max(var(--space-3), env(safe-area-inset-right)); }
.map[data-full="true"] .map__card { top: max(var(--space-3), env(safe-area-inset-top)); left: max(var(--space-3), env(safe-area-inset-left)); }
.map[data-full="true"] .map__scale, .map[data-full="true"] .map__credit { bottom: max(0px, env(safe-area-inset-bottom)); }
.map[data-full="true"] .map__scale { bottom: calc(max(0px, env(safe-area-inset-bottom)) + 26px); }
/* phones and narrow windows: the card moves to the bottom and the scale to the top, so neither covers the school's pin */
@media (max-width: 55.99em) {
  .map__card { left: var(--space-2); right: var(--space-2); top: auto; bottom: 24px; width: auto; max-width: 30rem; padding: var(--space-3); }
  .map__kind { display: none; }
  .map__ct { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}
  .map__acts { margin-top: var(--space-2); }
  .map__acts .map__copy { flex: none; min-width: 44px; padding-inline: 0.8em; }
  .map__acts [data-route] { flex: 1 1 11rem; }
  .map[data-compact] .map__addr { display: none; }
  .map__name { font-size: 1.25rem; }
  .map__addr { margin-top: 2px; font-size: 0.8125rem; }
  .map__scale { top: var(--space-3); bottom: auto; }
  .map[data-full="true"] .map__card { top: auto; bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)); left: max(var(--space-2), env(safe-area-inset-left)); right: max(var(--space-2), env(safe-area-inset-right)); width: auto; max-width: 30rem; }
  .map[data-full="true"] .map__scale { top: max(var(--space-3), env(safe-area-inset-top)); bottom: auto; }
}
/* on a phone, while the walk is shown, the pin's name steps aside so the buttons never cut it in half (the card names the school) */
@media (max-width: 55.99em) { .map[data-route-on] .map__tag { visibility: hidden; } }
@media (max-width: 22em) { .map__tag { font-size: 0.875rem; padding-inline: 0.65em; } }
@media (prefers-reduced-motion: reduce) { .map__poster, .map__hint { transition: none; } }
@media (forced-colors: active) { .map__btn, .map__expand, .map__card { border: 1px solid CanvasText; } .map__btn + .map__btn { border-top-color: CanvasText; } }
.places-h { margin: var(--space-6) 0 0; font: 600 1.125rem/1.3 var(--font-text); }
.places { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 0 var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr))}
.places li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.places__ico { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); color: #fff; background: var(--pc, #3b6fcc); }
.places__ico .gc-i { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.places b { display: block; font: 600 1rem/1.35 var(--font-text); color: var(--ink); }
.places small { display: block; font: 400 0.875rem/1.4 var(--font-text); color: var(--ink-soft); }
.map-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }


/* ---------- Serif italic accent word in a page heading ---------- */
.open__h em.accent { font-family: var(--font-serif); font-style: italic; font-size: 1em; line-height: inherit; font-weight: 400; letter-spacing: -0.025em; color: var(--stage-primary-ink); padding-right: 0.02em; }

/* ---------- On this page: a row of jump links that sticks under the bar ---------- */
.pnav { position: sticky; top: calc(var(--hdr-h, 68px) - 1px); z-index: calc(var(--z-nav) - 2); padding-block: var(--space-2); background: rgba(244, 247, 242, 0.94); background: color-mix(in srgb, var(--chalk) 94%, transparent); box-shadow: 0 0 0 100vmax rgba(244, 247, 242, 0.94); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--chalk) 94%, transparent); clip-path: inset(0 -100vmax)}
.pnav ul { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pnav ul::-webkit-scrollbar { display: none; }
.pnav a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 1em; font: 500 0.9375rem/1 var(--font-text); white-space: nowrap; color: var(--ink); text-decoration: none; border-radius: var(--radius-pill); transition: background-color 140ms ease, color 140ms ease; }
.pnav a:hover { background: rgba(17, 27, 21, 0.07); background: color-mix(in srgb, var(--ink) 7%, transparent)}
.pnav a[aria-current="location"] { color: var(--chalk); background: var(--ink); }
html:has(.gc-nav[data-hide="true"]) .pnav { top: 0; }

/* ---------- Link cards: an icon chip, a title, one line, an arrow ---------- */
.xcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--space-4)}
.xcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ico ico" "t arrow" "d d"; align-items: center; gap: var(--space-1) var(--space-3); height: 100%; padding: var(--space-5); color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease, border-color 160ms ease}
.xcard:hover { transform: translateY(-2px); border-color: var(--rule-strong); box-shadow: var(--shadow-card), 0 18px 36px -20px #111b1540; }
.xcard:active { transform: scale(0.99); }
.xcard .cap__ico { grid-area: ico; margin-bottom: var(--space-3); }
.xcard b { grid-area: t; font: 650 1.25rem/1.2 var(--font-display); letter-spacing: -0.022em; }
.xcard small { grid-area: d; font: 450 0.9375rem/1.45 var(--font-text); color: var(--ink-soft); }
.xcard > .gc-i { grid-area: arrow; width: 1.25rem; height: 1.25rem; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.xcard:hover > .gc-i { transform: translateX(4px); }
.gc-band .xcard { color: var(--ink); }

/* ---------- Icon cards (non-link) ---------- */
.icards { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4)}
.icard { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.icard .cap__ico { margin-bottom: var(--space-2); }
.icard h3 { margin: 0; font: 650 1.25rem/1.2 var(--font-display); letter-spacing: -0.022em; }
.icard p { margin: 0; color: var(--ink-soft); }

/* ---------- A year as a path: four stops with the class range on each ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); position: relative; }
.timeline__i { position: relative; display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.timeline__i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ground); }
.timeline__w { margin: 0; font: 600 0.75rem/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ground-ink); }
.timeline__i h3 { margin: 0; font: 650 1.375rem/1.2 var(--font-display); letter-spacing: -0.025em; }
.timeline__i p:last-child { margin: 0; max-width: var(--measure); color: var(--ink-soft); }
@media (min-width: 56.25em) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr))} }

/* ---------- Gallery ---------- */
.gal { list-style: none; margin: var(--space-4) 0 0; padding: 0; columns: 3 17rem; column-gap: var(--space-4); }
.gal__li { break-inside: avoid; margin: 0 0 var(--space-4); }
.gal__li[hidden] { display: none; }
.gal__i { display: block; color: var(--ink); text-decoration: none; }
.gal__i img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--wash); box-shadow: var(--shadow-card); transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease; }
.gal__i:hover img { transform: translateY(-3px); box-shadow: var(--shadow-card), 0 18px 36px -20px #111b1550; }
.gal__i:active img { transform: scale(0.99); }
.gal__c { display: block; margin-top: var(--space-2); font: 450 0.875rem/1.4 var(--font-text); color: var(--ink-soft); }

/* ---------- About: a fact strip card and the Principal ---------- */
.gc-facts--card { padding: var(--space-6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr))}
.person--role { margin-top: 0; }
.person--role h3 { font: 700 clamp(1.75rem, 4vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -0.03em; margin: var(--space-2) 0 var(--space-1); }

/* ---------- Footer ---------- */
.site-foot { margin-top: var(--space-7); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.site-foot__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-7); padding-top: var(--space-8); padding-bottom: var(--space-6)}
.site-foot__in p { margin: 0; }
.site-foot__brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; max-width: 36ch}
.site-foot__brand p { overflow-wrap: anywhere; }
.site-foot__logo { display: inline-grid; place-items: center; width: 80px; height: 80px; background: var(--paper); border-radius: 50%; }
.site-foot__logo img { width: 64px; height: 64px; border-radius: 50%; }
.site-foot__name { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.site-foot ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px; }
.site-foot li, .site-foot a { overflow-wrap: anywhere; }
.site-foot nav a, .site-foot__contact a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.site-foot__contact li:first-child { margin-bottom: var(--space-2); }
.site-foot__word { font: 700 clamp(2.5rem, 10.2vw, 8.5rem)/0.95 var(--font-display); letter-spacing: -0.05em; color: rgba(127, 127, 127, 0.28); color: color-mix(in srgb, currentColor 28%, transparent)}
.site-foot__base { display: grid; gap: var(--space-1); padding-top: var(--space-4); font: 450 0.8125rem/1.5 var(--font-text); border-top: 1px solid rgba(127, 127, 127, 0.3); border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent)}
@media (min-width: 56.25em) { .site-foot__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.3fr); } .site-foot__word, .site-foot__base { grid-column: 1 / -1; } .site-foot__base { grid-template-columns: auto auto; justify-content: space-between; gap: var(--space-5); } }

/* ---------- Growth chart: fifteen bars above the ruler, one per class ---------- */
.growth { --bars-h: clamp(5.5rem, 15vw, 11rem); display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); align-items: end; height: var(--bars-h); margin-bottom: var(--space-2)}
.growth i { display: block; height: calc(var(--bars-h) * (0.16 + 0.70 * var(--i) / 14)); padding-inline: min(2px, 0.4vw); transform-origin: 50% 100%; }
.growth b { display: block; height: 100%; border-radius: 8px 8px 0 0; background: var(--ground-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ground) 40%, transparent); transform-origin: 50% 100%; transform: scaleY(var(--mag, 1)); transition: background-color 240ms ease, box-shadow 240ms ease}
.growth i[data-sel] b { background: var(--ground); background: color-mix(in srgb, var(--ground) 40%, var(--ground-tint))}
.growth i[data-now] b { background: var(--ground); box-shadow: none; }


/* ---------- A statement that reads in as you scroll ---------- */
.statement-sec { padding-block: var(--space-7); }
@media (min-width: 56.25em) { .statement-sec { padding-block: var(--space-8); } }
.statement, .statement *, .quote p, .quote p * { overflow-wrap: anywhere; }
.statement { margin: 0; max-width: 26ch; font: 400 clamp(2rem, 5.2vw, 3.75rem)/1.14 var(--font-serif); letter-spacing: -0.02em; text-wrap: balance; }
.hl { white-space: nowrap; --u: 1; background-image: linear-gradient(var(--ground), var(--ground)); background-repeat: no-repeat; background-position: 0 90%; background-size: calc(var(--u) * 100%) 0.13em; }

/* ---------- What the school offers ---------- */
.caps { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: var(--space-4)}
.cap { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-2); align-content: stretch; min-width: 0; padding: var(--space-5); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: box-shadow 200ms ease, border-color 200ms ease}
.cap:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-card), 0 18px 36px -20px #111b1540; }
.cap__ico { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-2); color: var(--ground-ink); background: var(--ground-tint); border-radius: 14px; }
.cap__ico .gc-i { width: 1.5rem; height: 1.5rem; }
.cap h3 { margin: 0; font: 650 1.375rem/1.2 var(--font-display); letter-spacing: -0.025em; }
.cap p:not(.gc-eyebrow) { margin: 0; max-width: 40ch; color: var(--ink-soft); }
.cap .gc-btn { justify-self: start; align-self: end; margin-top: var(--space-2); margin-left: -0.4em; }

/* ---------- The school on the web: Facebook, YouTube and Google reviews ---------- */
.soc { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.soc .gc-btn { gap: 0.55em; }
.soc-h { margin-top: var(--space-6); }
.row__acts .soc { margin: 0; }
.gc-sheet__soc { padding-top: var(--space-6); }
.gc-sheet__soc .soc { margin-top: var(--space-2); }
.gc-band .deflist { border-color: rgba(127, 127, 127, 0.35); border-color: color-mix(in srgb, currentColor 35%, transparent)}
.gc-band .deflist dt, .gc-band .deflist dd { border-color: rgba(127, 127, 127, 0.35); border-color: color-mix(in srgb, currentColor 35%, transparent)}
.gc-band .deflist dt { color: inherit; opacity: 0.92; }
.site-foot__act { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(127, 127, 127, 0.3); border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent)}
.site-foot .soc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.site-foot__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 56.25em) { .site-foot__act { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end} .site-foot__cta { justify-content: flex-end; } }

/* ---------- Phones: the two actions most visitors want stay at the foot of the screen ---------- */
.gc-act { display: none; }
/* The bar is measured in ems as well, so a visitor who has enlarged their text a long way does not lose a third of the screen to it: Admission enquiry and Find us stay in the menu and on the page. */
@media (min-width: 14em) and (max-width: 34.9375em) {
  .gc-act { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: var(--space-2); padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right, 0px)) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) max(var(--space-3), env(safe-area-inset-left, 0px)); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-regular)) saturate(160%); backdrop-filter: blur(var(--blur-regular)) saturate(160%); border-top: 1px solid var(--rule)}
  .gc-act .gc-btn { min-height: 48px; padding-inline: 0.7em; font-size: 1rem; }
  html { scroll-padding-bottom: 5rem; }
  .site-foot__in { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .gc-toast { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 23.6875em) { .gc-act .gc-i { display: none; } }
@media (prefers-reduced-transparency: reduce) { .gc-act { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Bands sit inside the page as soft rounded cards ---------- */
main > .gc-band { margin-block: var(--space-4); margin-inline: max(var(--space-3), calc((100% - var(--page-max)) / 2 + var(--space-4))); border-radius: var(--radius-lg); overflow: hidden; overflow: clip}
main > .gc-band .gc-page { padding-inline: clamp(1.25rem, 4.2vw, 3.5rem); }

/* ---------- Motion layer: scroll progress, photo frames, masked lines ---------- */
.progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 4px; pointer-events: none; }
.progress__fill { display: flex; height: 100%; will-change: clip-path}
.progress__fill i { flex: var(--f) 1 0; background: var(--ground); }
.ph-frame { display: block; overflow: hidden; border-radius: var(--radius-lg); }
.ph-frame img, .ph-frame video { border-radius: 0; will-change: transform; }
.ln-mask { padding-bottom: 0.34em; margin-bottom: -0.34em; padding-top: 0.08em; margin-top: -0.08em; }   /* SplitText's line mask: room for descenders (g, y) and the comma */
.site-foot__word { overflow: hidden; padding-bottom: 0.12em; }
.gc-nav { transition: transform var(--dur-standard) var(--ease-standard), box-shadow 240ms ease; }
.gc-nav[data-scrolled="true"] { box-shadow: 0 1px 0 var(--rule), 0 8px 24px -12px #111b1533; }
.gc-nav__brand small { transition: opacity 240ms ease; }
.gc-nav[data-scrolled="true"] .gc-nav__brand small { opacity: 0.0; }
@media (max-width: 56.1875em) { .gc-nav[data-hide="true"] { transform: translateY(-110%); } }
.gc-nav:focus-within { transform: none !important; }

/* Pages hand over like a native app: a short cross-fade, and the bar stays put. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .gc-nav { view-transition-name: site-nav; }
  ::view-transition-group(site-nav) { animation: none; }
  ::view-transition-old(root) { animation: vt-out 180ms cubic-bezier(0.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: vt-in 420ms var(--ease-standard) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
}

/* What shows before the script has run (and if it never does): the first screen waits for its entrance,
   and a CSS failsafe shows it after 3 seconds either way. The script cancels the failsafe once it takes over. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero .gc-eyebrow, .hero__h, .hero__lede, .hero__acts .gc-btn, .hero .gc-strip i, .hero__photo .gc-photo, .hero__ledger > div,
  .hero__ruleHead, .growth i, .hero__rule #rule, .hero__rule .gc-rule__row,
  .open__tag, .open__h, .open__lede, .open__acts { opacity: 0; animation: m-failsafe 0s linear 3s forwards; }
}
@keyframes m-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .progress { display: none; } .growth b { transition: none; } }

/* ---------- Print ---------- */
@media print { main *, .site-foot * { opacity: 1 !important; transform: none !important; clip-path: none !important} .progress, .growth, .gc-act, .gc-video__btn { display: none !important; } .gc-nav, .gc-strip, .map__ctl, .map__expand, .map__hint, .map__acts, .gc-toast { display: none !important; } .gc-band { background: none !important; color: #000 !important; } }

/* ---------- Google reviews (sample): colours for this concept; the layout rules are appended by build.py from rev/gr.py ---------- */
.gr { --gr-r: var(--radius-lg); --gr-sum-bg: var(--wash); --gr-card-bg: var(--paper); --gr-ink: var(--ink); --gr-soft: var(--ink-soft); --gr-line: var(--rule); --gr-track: var(--rule);
  --gr-star: var(--stage-pre-primary); --gr-star-ink: var(--on-stage-pre-primary); --gr-off: var(--rule); --gr-chip-bg: var(--stage-primary-tint); --gr-chip-ink: var(--stage-primary-ink);
  --gr-shadow: var(--shadow-card); --gr-focus: var(--focus-ring); }


/* ---------- Google reviews (sample): the summary card, the rating bars and the review cards ---------- */
.gr__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gr { --gr-gap: clamp(1rem, 2.4vw, 1.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gr-gap); min-width: 0; text-align: left}
.gr *, .gr *::before, .gr *::after { box-sizing: border-box; }
.gr p, .gr ul { margin: 0; padding: 0; }
.gr ul { list-style: none; }
.gr__sum { display: grid; gap: 1rem; align-content: start; padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: var(--gr-r); background: var(--gr-sum-bg); color: var(--gr-ink); border: 1px solid var(--gr-line); min-width: 0; }
.gr__src { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; font-weight: 650; font-size: 1.0625rem; line-height: 1.2; }
.gr__ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gr-star); color: var(--gr-star-ink); }
.gr__ico svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.gr__chip { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; background: var(--gr-chip-bg); color: var(--gr-chip-ink); }
.gr__score { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gr__num { font-size: clamp(3.25rem, 9vw, 4.25rem); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.gr__stars { display: inline-flex; line-height: 1; font-size: 1.125rem; vertical-align: middle; }
.gr__s { width: 1.25em; height: 1.25em; fill: var(--gr-star); flex: none; }
.gr__s.is-off { fill: var(--gr-off); }
.gr__stars--avg { position: relative; display: inline-block; width: 6.25em; height: 1.25em; font-size: 1.5rem; font-size: min(1.5rem, 7vw); }
.gr__stars--avg .gr__off, .gr__stars--avg .gr__on { position: absolute; top: 0; left: 0; display: flex; height: 100%; }
.gr__stars--avg .gr__on { width: calc(var(--p) * 0.0625em); overflow: hidden; }
.gr__stars--avg .gr__on .gr__s, .gr__stars--avg .gr__off .gr__s { flex: none; }
.gr__count { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--gr-soft); }
.gr__bars { display: grid; gap: 0.45rem; }
.gr__bar { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 2.25rem; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-variant-numeric: tabular-nums}
.gr__bar i { display: block; height: 0.5rem; border-radius: 999px; background: var(--gr-track); overflow: hidden; }
.gr__bar b { display: block; height: 100%; width: calc(var(--w) * 1%); min-width: 0; border-radius: 999px; background: var(--gr-star); }
.gr__bc { text-align: right; color: var(--gr-soft); }
.gr__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}
.gr__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gr__main { display: grid; gap: 0.9rem; min-width: 0; }
/* phones: one row of cards you swipe through, with the next card peeking in */
.gr__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gr-bleed, 0px); margin-inline: calc(-1 * var(--gr-bleed, 0px)); padding-inline: var(--gr-bleed, 0px); padding-bottom: 0.9rem; scrollbar-width: thin; }
.gr__scroll:focus-visible { outline: 3px solid var(--gr-focus); outline-offset: 2px; border-radius: 12px; }
.gr__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 21.5rem); gap: 0.9rem; }
.gr__card { display: flex; min-width: 0; scroll-snap-align: start; }
.gr__a { display: grid; grid-template-rows: auto auto 1fr; gap: 0.75rem; width: 100%; min-width: 0; padding: clamp(1.05rem, 2.6vw, 1.35rem); border-radius: var(--gr-r); background: var(--gr-card-bg); color: var(--gr-ink); border: 1px solid var(--gr-line); box-shadow: var(--gr-shadow)}
.gr__who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.gr__av { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; background: var(--av-bg); color: var(--av-ink); }
.gr__name { font-weight: 650; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.gr__meta { font-size: 0.875rem; line-height: 1.3; color: var(--gr-soft); overflow-wrap: anywhere; }
.gr__row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.7rem; }
.gr__row .gr__stars { font-size: 1rem; font-size: min(1rem, 4.4vw); }
.gr__when { font-size: 0.875rem; color: var(--gr-soft); }
.gr__text { font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; hyphens: auto; max-width: 62ch; }
.gr__note { font-size: 0.875rem; line-height: 1.5; color: var(--gr-soft); max-width: 64ch; }
@media (min-width: 40em) {
  .gr__scroll { overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
  .gr__scroll:focus-visible { outline: 0; }
  .gr__list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, calc(50% - var(--gr-gap)))), 1fr)); gap: var(--gr-gap)}
  .gr__sum { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: center}
  .gr__src, .gr__acts { grid-column: 1 / -1; }
  .gr__acts { grid-row: 3; }
  .gr__score { grid-column: 1; grid-row: 2; }
  .gr__bars { grid-column: 2; grid-row: 2; }
}
@media (min-width: 75em) {
  .gr { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); align-items: start}
  .gr__sum { grid-template-columns: minmax(0, 1fr); align-items: start}
  .gr__score, .gr__bars, .gr__acts { grid-column: 1; grid-row: auto; }
}
@media (forced-colors: active) {
  .gr__a, .gr__sum { border: 1px solid CanvasText; }
  .gr__s { fill: CanvasText; } .gr__s.is-off { fill: GrayText; }
  .gr__bar b { background: CanvasText; } .gr__bar i { background: Canvas; border: 1px solid GrayText; }
}
@media print { .gr__scroll { overflow: visible; } .gr__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr))} .gr__acts { display: none; } }