/* Sanskar Central School — site styles.
   Desktop values match the design canvas (1280–1400px); everything below that
   is handled by the breakpoints at the end of this file. */

:root {
  --ink: #1c3d9c;              /* school blue */
  --ink-deep: #122d7e;
  --ink-bright: #2751c0;
  --accent: oklch(54% .19 42);  /* saffron, darkened to 5.5:1 on white */
  --accent-hi: oklch(58% .2 42);
  --gold: oklch(82% .16 86);        /* only ever on the dark blue panels */
  --gold-ink: oklch(50% .11 82);    /* gold text on light backgrounds */
  --peach-ink: oklch(50% .12 50);   /* rust text on peach chips */
  --faint: oklch(55% .02 85);       /* least important text, on white only */
  --cream: #fdfcf8;
  --line: #e7dcc8;
  --muted: oklch(52% .02 85);
  --body: #555;
  --peach: #feefe3;
  --sky: #e9f0fd;
  --sand: #fdf3d7;
  --pale: #c2d0f2;
  --gutter: clamp(16px, 2.2vw, 56px);   /* side breathing room, scales with the display */
}

* { box-sizing: border-box; }

/* flex/grid display rules would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

.notice-title, .event-title, .doc b, .album-title, .staff-dept, .step-detail,
.discl-row .name, .stops b, .message blockquote, .quote, .notice-body h2 {
  overflow-wrap: anywhere;
}

body {
  margin: 0;
  background: var(--cream);
  font-family: Manrope, system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: var(--ink); }
a:hover { color: var(--accent); }

img { display: block; }
figure, blockquote { margin: 0; }

.wrap { width: 100%; margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10001;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 13px;
  padding: 12px 20px; border-radius: 0 0 12px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* keyboard focus stays visible on the dark blue areas too */
.panel-dark a:focus-visible, .panel-dark button:focus-visible,
.mainnav a:focus-visible, .topbar a:focus-visible, .site-footer a:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px;
}

/* lift-on-hover only where there is a real pointer; a tap should not leave a card raised */
@media (hover: none) {
  .lift:hover, .quick a:hover, .card:hover, .album:hover, .tile:hover, .facility:hover,
  .stage:hover, .doc:hover, .appcard:hover, .leader:hover, .housecard:hover, .submodule:hover {
    transform: none; box-shadow: none;
  }
}

/* ---------------------------------------------------------------- motion */

@keyframes scsTicker { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes scsFloat  { 0%,100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-18px) rotate(6deg) } }
@keyframes scsFloat2 { 0%,100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(14px) rotate(-8deg) } }
@keyframes scsUp     { 0% { opacity: 0; transform: translateY(26px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes scsShine  { 0% { background-position: -200% center } 100% { background-position: 200% center } }
@keyframes scsKen    { 0% { transform: scale(1.06) translate3d(0,0,0) } 100% { transform: scale(1.14) translate3d(-1.4%,-1.6%,0) } }
@keyframes scsSheen  { 0% { transform: translateX(-120%) skewX(-18deg) } 55%,100% { transform: translateX(240%) skewX(-18deg) } }
@keyframes scsDot    { 0%,100% { opacity: .45; transform: scale(1) } 50% { opacity: 1; transform: scale(1.5) } }
@keyframes scsScroll { 0% { transform: translateY(0); opacity: 0 } 25% { opacity: 1 } 100% { transform: translateY(13px); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ---------------------------------------------------------------- header */

.topbar {
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 7px var(--gutter);
}
.topbar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; gap: 14px; align-items: center; flex: none; }
.topbar-right span { white-space: nowrap; }
.topbar-sep { opacity: .55; }
.topbar-link {
  color: #fff; background: rgba(0,0,0,.22); padding: 5px 14px;
  border-radius: 14px; text-decoration: none; font-weight: 700;
  white-space: nowrap; transition: background .25s;
}
.topbar-link:hover { background: rgba(0,0,0,.34); color: #fff; }

.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px var(--gutter); background: var(--cream);
}
.brand { display: flex; gap: 14px; align-items: center; text-decoration: none; min-width: 0; }
.brand-mark { width: 52px; height: 52px; border-radius: 13px; flex: none; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-title { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 21px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.brand-chip {
  flex: none; white-space: nowrap; font-size: 11px; font-weight: 800; color: var(--accent);
  background: var(--peach); border: 1px solid #f3d4bc; padding: 3px 11px;
  border-radius: 20px; letter-spacing: .3px;
}
.brand > span { display: block; min-width: 0; }
.brand-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

.brand-actions { display: flex; gap: 10px; align-items: center; flex: none; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--ink); color: var(--ink); font-weight: 800; font-size: 12.5px;
  padding: 9px 18px; border-radius: 22px; text-decoration: none; white-space: nowrap;
  transition: background .25s, transform .25s;
}
.btn-ghost:hover { background: var(--sky); transform: translateY(-2px); color: var(--ink); }
.btn-solid {
  background: var(--accent); color: #fff; font-weight: 800; font-size: 12.5px;
  padding: 10px 20px; border-radius: 22px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px oklch(62% .21 42 / .35);
  transition: transform .25s, box-shadow .25s;
}
.btn-solid:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 10px 22px oklch(62% .21 42 / .45);
}

.mainnav {
  display: flex; align-items: center; gap: 2px; padding: 0 var(--gutter);
  background: var(--ink); box-shadow: 0 4px 14px oklch(38% .16 264 / .18);
}
.mainnav a {
  font-size: 13px; font-weight: 700; white-space: nowrap;
  color: oklch(85% .04 264); text-decoration: none; padding: 13px 16px;
  border-bottom: 3px solid transparent; transition: background .25s, color .25s;
}
.mainnav a:hover { background: oklch(100% 0 0 / .1); color: #fff; }
/* on a phone the nav scrolls sideways — fade the edge so that is visible */
@media (max-width: 980px) {
  .mainnav {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
}
.mainnav a[aria-current="page"] {
  color: #fff; background: oklch(100% 0 0 / .12); border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------- ticker */

.ticker { background: var(--ink); overflow: hidden; white-space: nowrap; padding: 8px 0; }
.ticker-track {
  display: inline-flex; gap: 60px;
  animation: scsTicker 26s linear infinite; will-change: transform;
}
.ticker-track span { font-size: 12.5px; font-weight: 600; color: #dbe4fa; }
.ticker-track .hot { color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- hero */

.hero {
  margin: 16px var(--gutter) 0; border-radius: 26px; overflow: hidden; position: relative;
  min-height: 588px; display: flex; align-items: flex-end;
  box-shadow: 0 24px 60px oklch(35% .11 264 / .22);
}
.hero-stage { position: absolute; inset: 0; overflow: hidden; }
.hero-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: scsKen 26s ease-in-out infinite alternate; will-change: transform;
  transition: opacity 1.2s ease; opacity: 0;
}
.hero-stage img:nth-of-type(2) { animation-direction: alternate-reverse; }
.hero-stage img.is-on { opacity: 1; }

.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(260deg,
    oklch(24% .08 264 / .88) 0%, oklch(30% .12 264 / .72) 32%,
    oklch(32% .12 264 / .18) 58%, transparent 100%);
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 18% 78%, transparent 55%, oklch(22% .09 264 / .28) 100%);
}
.hero-blob-a {
  position: absolute; top: 70px; left: 8%; width: 58px; height: 58px; border-radius: 16px;
  background: oklch(62% .21 42 / .62); transform: rotate(12deg);
  animation: scsFloat 6s ease-in-out infinite; box-shadow: 0 18px 40px oklch(22% .09 264 / .4);
}
.hero-blob-b {
  position: absolute; bottom: 150px; left: 4%; width: 34px; height: 34px; border-radius: 50%;
  background: oklch(81% .15 84 / .75);
  animation: scsFloat2 7s ease-in-out infinite; box-shadow: 0 14px 32px oklch(22% .09 264 / .4);
}

.hero-facts {
  position: absolute; left: 52px; bottom: 52px;
  display: flex; flex-direction: column; gap: 12px; max-width: 300px;
}
.fact {
  display: flex; gap: 11px; align-items: center;
  background: oklch(26% .1 264 / .55); backdrop-filter: blur(10px);
  border: 1px solid oklch(100% 0 0 / .16); border-radius: 16px; padding: 12px 16px;
  transition: transform .35s cubic-bezier(.22,.68,0,1), background .35s, border-color .35s;
}
.fact:hover {
  transform: translateX(6px);
  background: oklch(28% .11 264 / .72); border-color: oklch(62% .21 42 / .6);
}
.fact-dot {
  width: 8px; height: 8px; border-radius: 50%; background: oklch(70% .17 150);
  animation: scsDot 2.4s ease-in-out infinite; flex: none;
}
.fact-icon { font-size: 15px; flex: none; }
.fact-text { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.4; }
.fact-text span { font-weight: 600; color: oklch(78% .04 264); }

.hero-copy {
  position: relative; padding: 78px 56px 58px; max-width: 560px;
  margin-left: auto; text-align: right;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: oklch(62% .21 42 / .2); border: 1px solid oklch(62% .21 42 / .55);
  color: oklch(88% .07 60); font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  padding: 8px 17px; border-radius: 20px; animation: scsUp .7s ease both;
}
.eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: oklch(71% .21 42);
  animation: scsDot 2s ease-in-out infinite;
}
.hero-text { transition: opacity .45s ease, transform .45s ease; }
.hero-text.is-fading { opacity: 0; transform: translateY(10px); }
.hero-head {
  font-size: 50px; font-weight: 800; line-height: 1.08; color: #fff; margin: 20px 0 0;
  text-wrap: pretty; text-shadow: 0 2px 24px oklch(22% .09 264 / .5);
  animation: scsUp .7s .15s ease both;
}
.hero-head em {
  font-style: normal;
  background: linear-gradient(90deg, oklch(69% .21 42), oklch(85% .15 84), oklch(69% .21 42));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: scsShine 5s linear infinite;
}
.hero-sub {
  font-size: 16px; line-height: 1.65; color: oklch(88% .03 264); margin-top: 16px;
  animation: scsUp .7s .3s ease both;
}
.hero-cta {
  display: flex; gap: 14px; margin-top: 28px; justify-content: flex-end;
  animation: scsUp .7s .45s ease both;
}
.btn-apply {
  position: relative; overflow: hidden; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 14.5px; padding: 15px 32px; border-radius: 28px;
  text-decoration: none; box-shadow: 0 10px 28px oklch(62% .21 42 / .45);
  transition: transform .3s cubic-bezier(.22,.68,0,1), box-shadow .3s, background .3s;
}
.btn-apply:hover {
  transform: translateY(-4px) scale(1.035); background: var(--accent-hi); color: #fff;
  box-shadow: 0 18px 40px oklch(62% .21 42 / .58);
}
.btn-apply .sheen {
  position: absolute; top: 0; left: 0; width: 36%; height: 100%;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / .38), transparent);
  animation: scsSheen 4.5s ease-in-out infinite; pointer-events: none;
}
.btn-explore {
  background: oklch(100% 0 0 / .13); backdrop-filter: blur(8px);
  border: 1.5px solid oklch(100% 0 0 / .45); color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 15px 30px; border-radius: 28px; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.68,0,1), background .3s, border-color .3s;
}
.btn-explore:hover { transform: translateY(-4px); background: oklch(100% 0 0 / .24); border-color: #fff; color: #fff; }

.hero-meta {
  display: flex; gap: 18px; justify-content: flex-end; align-items: center; margin-top: 26px;
  animation: scsUp .7s .6s ease both;
}
.hero-caption {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  color: oklch(72% .04 264); transition: opacity .45s ease;
}
.hero-caption.is-fading { opacity: 0; }
.hero-dots { display: flex; gap: 3px; align-items: center; }
.hero-dots button {
  padding: 8px; border: none; background: none; cursor: pointer; display: block;
}
.hero-dots button::before {
  content: ""; display: block; height: 8px; width: 8px; border-radius: 5px;
  background: oklch(100% 0 0 / .45);
  transition: width .35s cubic-bezier(.22,.68,0,1), background .35s;
}
.hero-dots button[aria-current="true"]::before { width: 26px; background: var(--accent); }

.hero-scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.68,0,1), opacity .3s;
}
.hero-scroll:hover { transform: translateX(-50%) translateY(4px); opacity: .85; }
.hero-scroll .mouse {
  width: 22px; height: 34px; border: 1.5px solid oklch(100% 0 0 / .4); border-radius: 12px;
  display: flex; justify-content: center; padding-top: 6px;
}
.hero-scroll .mouse i {
  width: 3px; height: 7px; border-radius: 2px; background: oklch(100% 0 0 / .8);
  animation: scsScroll 1.9s ease-in-out infinite;
}
.hero-scroll span {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; color: oklch(100% 0 0 / .55);
}

/* ---------------------------------------------------------------- quick links */

.quick { display: flex; gap: 14px; padding: 22px var(--gutter); scroll-margin-top: 24px; }
.quick a {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  display: flex; gap: 14px; align-items: center; text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.quick a:hover {
  transform: perspective(800px) rotateX(4deg) translateY(-6px);
  box-shadow: 0 18px 36px rgba(23,53,107,.14);
}
.quick-badge {
  width: 46px; height: 46px; border-radius: 13px; font-size: 20px;
  display: grid; place-items: center; font-weight: 800; flex: none;
}
.quick-badge.is-a { background: var(--peach); color: var(--accent); }
.quick-badge.is-s { background: var(--sky); color: var(--ink); }
.quick-badge.is-v { background: var(--sand); color: var(--gold-ink); }
.quick-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.quick-note { display: block; font-size: 12px; color: var(--muted); }
.quick .is-feature {
  background: linear-gradient(135deg, var(--ink), var(--ink-bright)); border: none;
  color: #fff; flex-direction: column; justify-content: center; align-items: stretch;
}
.quick .is-feature:hover { box-shadow: 0 18px 36px rgba(23,53,107,.3); }
.quick .is-feature .quick-title { color: #fff; }
.quick .is-feature .quick-note { color: var(--pale); margin-top: 2px; }

/* ---------------------------------------------------------------- intro strip */

.welcome {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  padding: 26px var(--gutter); align-items: center;
}
.kicker { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 2px; margin: 0 0 10px; }
.welcome p { font-size: 15px; line-height: 1.75; color: var(--body); max-width: 600px; text-wrap: pretty; margin: 0; }
.welcome p a { font-weight: 800; color: var(--accent); text-decoration: none; }
.counts { display: flex; gap: 28px; justify-content: flex-end; }
.count { text-align: center; margin: 0; }
.count b { display: block; font-size: 32px; font-weight: 800; color: var(--accent); }
.count span { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }

/* ---------------------------------------------------------------- notices / events / admissions */

.boards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 8px var(--gutter); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  transition: box-shadow .3s;
}
.card:hover { box-shadow: 0 12px 28px rgba(23,53,107,.1); }
.card-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
}
.card-head b { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
.card-head a { font-size: 11.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.notice { padding: 11px 0; border-top: 1px solid #f5f0e6; }
.notice-title { margin: 0; font-size: 13.5px; font-weight: 700; color: #2a2a2a; line-height: 1.45; }
.tag-new {
  background: var(--accent); color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}
.notice-date { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.events { display: flex; flex-direction: column; gap: 14px; }
.event { display: flex; gap: 12px; align-items: center; }
.event-date {
  margin: 0;
  background: var(--peach); border-radius: 10px; padding: 8px 12px; text-align: center;
  flex: none; min-width: 34px;
}
.event-date b { display: block; font-size: 17px; font-weight: 800; color: var(--accent); }
.event-date span { font-size: 9.5px; font-weight: 800; color: var(--peach-ink); }
.event-title { margin: 0; font-size: 13.5px; font-weight: 700; color: #2a2a2a; line-height: 1.45; }

.card-admissions {
  background: linear-gradient(135deg, var(--sand), #fce9b8);
  border: 1px solid #ecd9a4; border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; transition: box-shadow .3s;
}
.card-admissions:hover { box-shadow: 0 12px 28px rgba(176,125,0,.18); }
.card-admissions .kicker { color: var(--gold-ink); letter-spacing: 1px; }
.card-admissions .lede {
  font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.4;
  text-wrap: pretty; margin: 0; flex: 1;
}
.btn-enquiry {
  background: var(--accent); color: #fff; text-align: center; font-weight: 800; font-size: 13.5px;
  padding: 12px; border-radius: 24px; text-decoration: none; margin-top: 16px;
  transition: transform .25s;
}
.btn-enquiry:hover { transform: scale(1.04); color: #fff; }

/* ---------------------------------------------------------------- why sanskar */

.why { padding: 32px var(--gutter) 8px; }
.why-inner { border-radius: 22px; padding: 38px 42px; }
.why .kicker { color: var(--gold); margin-bottom: 6px; }
.why h2 { font-size: 26px; font-weight: 800; margin: 0 0 24px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.why-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 22px; transition: transform .3s, background .3s;
}
.why-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); }
.why-num { margin: 0; font-size: 24px; font-weight: 800; color: var(--gold); }
.why-card h3 { font-size: 14.5px; font-weight: 800; margin: 8px 0 0; }
.why-card p { font-size: 12.5px; color: var(--pale); line-height: 1.6; margin: 5px 0 0; }

/* ---------------------------------------------------------------- principal + glance */

.principal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px var(--gutter) 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.panel .kicker { letter-spacing: 1.5px; }
.quote { font-size: 14.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; margin: 0; }
.byline { font-size: 13px; font-weight: 800; color: var(--ink); margin-top: 12px; }
.byline span { font-weight: 600; color: var(--muted); }
.readmore {
  display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 800;
  color: var(--accent); text-decoration: none;
}
.glance { background: var(--sand); border-radius: 18px; padding: 28px; }
.glance .kicker { color: var(--gold-ink); letter-spacing: 1.5px; margin-bottom: 14px; }
.glance dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; font-size: 13px; margin: 0;
}
.glance dt { font-weight: 800; color: var(--ink); }
.glance dd { color: #5a4a12; margin: 0; }

/* ---------------------------------------------------------------- gallery */

.gallery { padding: 32px var(--gutter) 8px; }
.gallery-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px; padding: 0 20px;
}
.gallery-head h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin: 0; }
.gallery-head a { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile {
  border-radius: 16px; height: 190px; overflow: hidden; position: relative;
  transition: transform .35s, box-shadow .35s;
}
.tile:hover {
  transform: perspective(700px) rotateY(4deg) scale(1.04);
  box-shadow: 0 16px 34px rgba(23,53,107,.16);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile figcaption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(15,42,92,.85));
  padding: 24px 14px 12px; font-size: 12px; font-weight: 700; color: #fff;
}

/* ---------------------------------------------------------------- visit us */

.visit { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; padding: 26px var(--gutter) 44px; }
.visit .kicker { letter-spacing: 1.5px; margin-bottom: 12px; }
.address { margin: 0; font-size: 14px; line-height: 1.8; color: #444; }
.hours { font-size: 13px; margin-bottom: 0; color: var(--muted); margin-top: 12px; }
.btn-contact {
  display: inline-block; margin-top: 16px; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 13px; padding: 11px 22px; border-radius: 22px;
  text-decoration: none; transition: transform .25s;
}
.btn-contact:hover { transform: translateY(-2px); color: #fff; }

.map {
  border-radius: 18px; overflow: hidden; position: relative; min-height: 240px;
  border: 1px solid var(--line); background: var(--sky);
}
.map iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }
.map-card {
  position: absolute; left: 14px; top: 14px; background: oklch(100% 0 0 / .94);
  backdrop-filter: blur(6px); border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 6px 20px oklch(35% .11 264 / .16); max-width: 260px;
}
.map-card b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.map-card span { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.map-actions { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.map-actions a {
  font-size: 12px; font-weight: 800; padding: 10px 18px; border-radius: 20px;
  text-decoration: none; transition: transform .28s cubic-bezier(.22,.68,0,1);
}
.map-actions a:hover { transform: translateY(-3px); }
.map-dir { background: var(--accent); color: #fff; box-shadow: 0 6px 18px oklch(62% .21 42 / .38); }
.map-dir:hover { color: #fff; }
.map-open { background: oklch(100% 0 0 / .94); color: var(--ink); box-shadow: 0 6px 18px oklch(35% .11 264 / .18); }
.map-open:hover { color: var(--ink); }

/* ---------------------------------------------------------------- app banner */

.appbar { padding: 0 var(--gutter) 44px; }
.appbar-inner {
  background: linear-gradient(135deg, var(--ink-deep), var(--ink) 55%, var(--ink-bright));
  border: 1px solid oklch(52% .16 264 / .6); border-radius: 20px; padding: 26px 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.appbar-tag {
  display: inline-block; background: oklch(62% .21 42 / .2);
  border: 1px solid oklch(62% .21 42 / .55); color: oklch(88% .07 60);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; padding: 6px 14px; border-radius: 16px;
}
.appbar h2 { font-size: 22px; font-weight: 800; color: #fff; margin: 10px 0 0; }
.appbar p { font-size: 12.5px; color: var(--pale); margin: 4px 0 0; max-width: 440px; line-height: 1.6; }
.appbar-more {
  display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 800;
  color: var(--gold); text-decoration: none;
}
.appbar-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 14px 0 0; }
.appbar-links a { font-size: 13px; font-weight: 800; text-decoration: none; }
.appbar-get {
  background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 22px;
  box-shadow: 0 6px 18px oklch(54% .19 42 / .45); transition: transform .25s, box-shadow .25s;
}
.appbar-get:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px oklch(54% .19 42 / .55); }
.appbar-guide { color: #fff; border-bottom: 1px solid oklch(100% 0 0 / .45); padding-bottom: 2px; }
.appbar-guide:hover { color: var(--gold); border-color: var(--gold); }
.appbar-links .appbar-more { margin: 0; }
.appbar-links a.is-unavailable { opacity: .55; cursor: default; box-shadow: none; }

.appstrip { padding: 14px var(--gutter) 8px; }
.appstrip .panel-dark {
  padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.appstrip h2 { font-size: 20px; font-weight: 800; margin: 8px 0 0; }
.appstrip p { font-size: 13px; color: var(--pale); line-height: 1.65; margin: 6px 0 0; max-width: 560px; }
.appstrip-actions { display: flex; flex-direction: column; gap: 10px; }
.appstrip-actions a { justify-content: center; white-space: nowrap; }
@media (max-width: 980px) {
  .appstrip .panel-dark { grid-template-columns: 1fr; padding: 24px 22px; }
  .appstrip-actions a { width: 100%; }
}

.appcard {
  background: #fff; border-radius: 16px; padding: 16px 18px; text-decoration: none;
  display: flex; gap: 14px; align-items: center; min-width: 280px;
  box-shadow: 0 18px 44px oklch(20% .09 264 / .5);
  transition: transform .32s cubic-bezier(.22,.68,0,1);
}
.appcard:hover { transform: translateY(-5px) rotate(-.4deg); }
.appcard-icon {
  width: 52px; height: 52px; border-radius: 13px; background: var(--cream);
  border: 1px solid var(--line); flex: none; display: grid; place-items: center; overflow: hidden;
}
.appcard-icon img { width: 88%; height: 88%; object-fit: contain; }
.appcard-body { min-width: 0; flex: 1; }
.appcard-name { display: block; font-size: 14px; font-weight: 800; color: #1a1a1a; line-height: 1.2; }
.appcard-dev { display: block; font-size: 10.5px; font-weight: 700; color: #1c7d46; margin-top: 1px; }
.appcard-meta { display: block; font-size: 10px; color: #6f6f6f; margin-top: 1px; }
.appcard-cta {
  background: #1c7d46; color: #fff; font-weight: 800; font-size: 12px;
  padding: 9px 18px; border-radius: 9px; flex: none;
}

/* ---------------------------------------------------------------- announcement popup */

.popup {
  position: fixed; inset: 0; background: oklch(15% .06 264 / .78); backdrop-filter: blur(6px);
  z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.popup-box {
  position: relative; max-width: min(620px, 92vw); max-height: 86vh; border-radius: 20px;
  overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.5); background: #fff;
}
.popup-box img {
  max-width: 100%; max-height: 70vh; width: 100%; object-fit: contain; background: var(--cream);
}
.popup-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; background: #fff; border-top: 1px solid #f0ede6;
}
.popup-cta {
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
  padding: 11px 24px; border-radius: 22px; text-decoration: none;
}
.popup-note { font-size: 12px; color: var(--muted); font-weight: 600; }
.popup-close {
  font-size: 12.5px; font-weight: 800; color: var(--ink); cursor: pointer;
  padding: 10px 18px; border: 1px solid #e0dcd0; border-radius: 20px; background: #fff;
  font-family: inherit; transition: background .25s;
}
.popup-close:hover { background: #f6f3ec; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: var(--pale); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px;
  padding: 44px var(--gutter) 36px; margin: 0;
}
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.footer-mark {
  width: 46px; height: 46px; border-radius: 12px; background: var(--cream);
  flex: none; overflow: hidden; padding: 3px;
}
.footer-mark img { width: 100%; height: 100%; object-fit: contain; }
.footer-name { font-size: 16px; font-weight: 800; color: #fff; }
.footer-about { font-size: 12.5px; line-height: 1.7; text-wrap: pretty; }
.footer-affil { font-size: 12px; margin-top: 14px; color: #9db2e4; }
.footer-title {
  font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 1.5px; margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.footer-links a { color: var(--pale); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.6; }
.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social a { color: var(--pale); text-decoration: none; font-weight: 700; }
.footer-admin {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 12.5px;
  padding: 10px 20px; border-radius: 22px; text-decoration: none;
}
.footer-admin:hover { color: #fff; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12); font-size: 11.5px; padding: 14px var(--gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0;
}
.footer-legal div { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- breakpoints */

@media (max-width: 1180px) {
  .hero-facts { display: none; }
  .hero-copy { max-width: 640px; padding: 70px 44px 54px; }
  .hero-head { font-size: 42px; }
  .welcome { padding: 26px 24px; }
  .counts { gap: 20px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .topbar { padding: 7px 20px; font-size: 11.5px; }
  .topbar > span { display: none; }
  .topbar-right { margin: 0 auto; }
  .brandbar { padding: 12px 20px; flex-wrap: wrap; }
  .mainnav { overflow-x: auto; padding: 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .hero { min-height: 520px; margin: 12px 16px 0; }
  /* the design's side-lit gradient only shields right-aligned copy; once the
     copy moves over the photo the veil has to come from the bottom instead */
  .hero-veil {
    background: linear-gradient(180deg,
      oklch(24% .08 264 / .5) 0%, oklch(24% .08 264 / .74) 45%, oklch(22% .07 264 / .92) 100%);
  }
  .hero-copy { max-width: none; margin: 0; text-align: left; padding: 64px 32px 54px; }
  .hero-cta, .hero-meta { justify-content: flex-start; }
  /* left-aligned copy now runs through where these sat */
  .hero-scroll, .hero-blob-a, .hero-blob-b { display: none; }
  .quick { flex-wrap: wrap; padding: 18px 16px; }
  .quick a { flex: 1 1 46%; }
  .welcome { grid-template-columns: 1fr; gap: 18px; padding: 22px 16px; }
  .counts { justify-content: flex-start; flex-wrap: wrap; gap: 24px; }
  .boards { grid-template-columns: 1fr; padding: 8px 16px; }
  .why { padding: 24px 16px 8px; }
  .why-inner { padding: 28px 24px; }
  .principal { grid-template-columns: 1fr; padding: 18px 16px 0; }
  .gallery { padding: 26px 16px 8px; }
  .gallery-head { padding: 0; flex-wrap: wrap; gap: 8px; }
  .visit { grid-template-columns: 1fr; padding: 20px 16px 36px; }
  .map { min-height: 300px; }
  .appbar { padding: 0 16px 36px; }
  .appbar-inner { grid-template-columns: 1fr; padding: 24px; }
  .appcard { min-width: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 24px 28px; }
  .footer-legal { padding: 14px 24px; }
}

@media (max-width: 620px) {
  .topbar-affil, .topbar-sep { display: none; }
  .brand-name { font-size: 18px; white-space: normal; }
  .brand-title { flex-wrap: wrap; gap: 6px; }
  .brand-actions { width: 100%; }
  .brand-actions a { flex: 1; justify-content: center; text-align: center; }
  .hero { min-height: 460px; border-radius: 20px; }
  .hero-copy { padding: 48px 20px 44px; }
  .hero-head { font-size: 31px; }
  .hero-sub { font-size: 14.5px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 1px; padding: 7px 13px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta a { text-align: center; padding: 14px 20px; }
  .quick a { flex: 1 1 100%; }
  .count b { font-size: 27px; }
  .why-grid { grid-template-columns: 1fr; }
  .why h2 { font-size: 22px; }
  .glance dl { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-head h2 { font-size: 20px; }
  .map-actions { left: 14px; right: 14px; justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
}

/* ================================================================ shared page furniture
   Used by every page other than the homepage. */

.pagehead { padding: 36px var(--gutter) 8px; }
.crumbs { font-size: 12px; color: var(--muted); margin: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs b { color: var(--accent); font-weight: 700; }
.pagehead h1 { font-size: 34px; font-weight: 800; color: var(--ink); margin: 10px 0 0; }
.pagehead .lede {
  font-size: 15px; color: #666; max-width: 640px; line-height: 1.7;
  margin: 8px 0 0; text-wrap: pretty;
}

.panel-dark {
  background: linear-gradient(135deg, var(--ink-deep), var(--ink) 55%, var(--ink-bright));
  border: 1px solid oklch(52% .16 264 / .6); border-radius: 20px; color: #fff;
}
.panel-dark .kicker { color: var(--gold); }

/* white card that lifts on hover — the standard sub-page card */
.lift { transition: transform .32s cubic-bezier(.22,.68,0,1), box-shadow .32s, border-color .32s; }
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px oklch(35% .11 264 / .13); border-color: oklch(85% .04 70);
}

.section { padding: 22px var(--gutter) 8px; }
.section-head { padding: 0 20px; margin-bottom: 18px; }
.section-head h2:not(.kicker) { font-size: 24px; font-weight: 800; color: var(--ink); margin: 6px 0 0; }
.section-head.row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.section-head.row a { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; flex: none; }
.note-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--muted); padding: 14px 20px;
}

.cta-dark {
  display: inline-block; margin-top: 24px; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 14px; padding: 13px 28px; border-radius: 26px;
  text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.cta-dark:hover {
  color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px oklch(62% .21 42 / .45);
}

@media (max-width: 980px) {
  .pagehead { padding: 26px 16px 4px; }
  .pagehead h1 { font-size: 27px; }
  .section { padding: 18px 16px 8px; }
  .section-head { padding: 0; }
  .note-mono { padding: 12px 0; }
}

/* ================================================================ page: About */

.overview {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
  padding: 28px var(--gutter); align-items: stretch;
}
.overview p { font-size: 14.5px; line-height: 1.8; color: var(--body); text-wrap: pretty; margin: 0; }
.overview p + p { margin-top: 16px; }
.overview b { color: var(--ink); }
.factchips { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.factchip { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; }
.factchip dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.factchip dd { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; }
.overview-photo { border-radius: 16px; overflow: hidden; min-height: 300px; }
.overview-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

.promise { padding: 14px var(--gutter) 8px; }
.promise .panel-dark { padding: 34px 40px; }
.promise h2 { font-size: 24px; font-weight: 800; max-width: 640px; line-height: 1.3; margin: 0; text-wrap: pretty; }
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.promise-card {
  background: oklch(100% 0 0 / .08); border: 1px solid oklch(100% 0 0 / .14);
  border-radius: 14px; padding: 20px; transition: transform .3s, background .3s;
}
.promise-card:hover { transform: translateY(-4px); background: oklch(100% 0 0 / .14); }
.promise-card h3 { font-size: 15px; font-weight: 800; margin: 0; }
.promise-card p { font-size: 12.5px; color: var(--pale); line-height: 1.6; margin: 6px 0 0; }
.promise-card a { color: var(--gold); font-weight: 800; }

.vision { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 14px var(--gutter); }
.vision > div { border-radius: 16px; padding: 26px; }
.vision-a { background: var(--ink); border: 1px solid oklch(52% .16 264 / .6); color: #fff; }
.vision-a .kicker { color: var(--gold); letter-spacing: 1.5px; }
.vision-a p { font-size: 14px; line-height: 1.7; color: #dbe4fa; text-wrap: pretty; margin: 0; }
.vision-b { background: #fff; border: 1px solid var(--line); }
.vision-b .kicker { letter-spacing: 1.5px; }
.vision-b p { font-size: 14px; line-height: 1.7; color: var(--body); text-wrap: pretty; margin: 0; }
.vision-c { background: var(--sand); border: 1px solid #ecd9a4; }
.vision-c .kicker { color: var(--gold-ink); letter-spacing: 1.5px; }
.valuechips { display: flex; flex-wrap: wrap; gap: 8px; }
.valuechips span {
  background: #fff; border-radius: 16px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
}

.messages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px var(--gutter); }
.message { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.message-who > span:last-child { min-width: 0; }
.message-who { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden; background: var(--peach);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.is-blank {
  background: repeating-linear-gradient(45deg, #e9f0fd, #e9f0fd 7px, #dde8fa 7px, #dde8fa 14px);
}
.message-name { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.message-role { display: block; font-size: 12px; color: var(--muted); }
.message blockquote { font-size: 13.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; }

.committee { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.member {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center;
}
.member .avatar {
  width: 72px; height: 72px; margin: 0 auto 12px;
  background: repeating-linear-gradient(45deg, #f4f2ee, #f4f2ee 8px, #ece9e3 8px, #ece9e3 16px);
}
.member-name { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.member-role { margin: 3px 0 0; font-size: 11.5px; color: var(--accent); font-weight: 700; margin-top: 3px; }
.member-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.award { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.award b { display: block; font-size: 26px; font-weight: 800; color: var(--accent); }
.award-title { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.award-note { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.showcase { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: stretch; }
.shot { position: relative; border-radius: 16px; overflow: hidden; height: 360px; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-veil { position: absolute; inset: 0; background: linear-gradient(transparent 45%, oklch(24% .1 264 / .92)); }
.shot-copy { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.shot-tag {
  display: inline-block; background: var(--accent); font-size: 10px; font-weight: 800;
  letter-spacing: 1px; padding: 4px 11px; border-radius: 10px; margin-bottom: 8px;
}
.shot-tag.is-blue { background: oklch(52% .14 264); }
.shot-copy h3 { font-size: 15.5px; font-weight: 800; line-height: 1.35; margin: 0; }
.shot-copy p { font-size: 12px; color: oklch(85% .03 264); margin: 3px 0 0; line-height: 1.5; }

.beyond {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; height: 360px;
  padding: 26px; display: flex; flex-direction: column;
}
.beyond h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.beyond > p { font-size: 12.5px; line-height: 1.65; color: #666; margin: 8px 0 0; text-wrap: pretty; }
.beyond ul {
  list-style: none; margin: 14px 0 0; padding: 0; flex: 1;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.beyond li {
  display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #f5f0e6;
  font-size: 12.5px; font-weight: 700; color: #2a2a2a; line-height: 1.45;
}
.beyond li:last-child { border-bottom: 1px solid #f5f0e6; }
.beyond li i {
  width: 32px; height: 32px; border-radius: 10px; font-style: normal; font-size: 14px;
  display: grid; place-items: center; flex: none;
}
.beyond .i-orange { background: var(--peach); }
.beyond .i-blue { background: var(--sky); }
.beyond .i-gold { background: var(--sand); }
.beyond .i-green { background: #e8f5ea; }
.beyond .note-mono { padding: 10px 0 0; font-size: 10px; }

.whychoose { padding: 14px var(--gutter) 44px; }
.whychoose .panel-dark { padding: 36px 40px; }
.whychoose .kicker { margin-bottom: 16px; }
.whychoose ol {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px;
  list-style: none; margin: 0; padding: 0; counter-reset: why;
}
.whychoose li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 14px; line-height: 1.6; color: #dbe4fa; counter-increment: why;
}
.whychoose li::before { content: "0" counter(why); color: var(--gold); font-weight: 800; flex: none; }

@media (max-width: 1180px) {
  .promise-grid, .committee, .awards { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: 1fr 1fr; }
  .beyond { height: auto; min-height: 360px; }
}
@media (max-width: 980px) {
  .overview { grid-template-columns: 1fr; gap: 22px; padding: 20px 16px; }
  .overview-photo, .overview-photo img { min-height: 240px; }
  .promise, .whychoose { padding: 14px 16px 8px; }
  .whychoose { padding-bottom: 36px; }
  .promise .panel-dark, .whychoose .panel-dark { padding: 26px 22px; }
  .vision, .messages { grid-template-columns: 1fr; padding: 14px 16px; }
  .showcase { grid-template-columns: 1fr; }
  .shot { height: 280px; }
  .whychoose ol { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .promise-grid, .committee, .awards { grid-template-columns: 1fr; }
  .promise h2, .section-head h2 { font-size: 21px; }
}

/* ================================================================ page: Academics */

.cardbox { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.cardbox .kicker { letter-spacing: 1.5px; }

.photostrip { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; padding: 24px var(--gutter) 0; }
.photostrip > div { border-radius: 18px; overflow: hidden; height: 300px; }
.photostrip img { width: 100%; height: 100%; object-fit: cover; }

.submodules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px var(--gutter) 4px; }
.submodule {
  border-radius: 18px; padding: 26px 30px; text-decoration: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: transform .32s cubic-bezier(.22,.68,0,1), box-shadow .32s, border-color .32s;
}
.submodule:hover { transform: translateY(-5px); }
.submodule .kicker { display: block; margin: 0; letter-spacing: 1.5px; }
.submodule.is-dark .kicker { color: var(--gold); }
.submodule > span:first-child { min-width: 0; }
.submodule h2 { font-size: 19px; font-weight: 800; margin: 6px 0 0; }
.submodule p { font-size: 12.5px; margin: 4px 0 0; line-height: 1.5; }
.submodule .arrow { font-size: 22px; font-weight: 800; flex: none; }
.submodule.is-dark { color: #fff; }
.submodule.is-dark:hover { box-shadow: 0 18px 38px oklch(35% .11 264 / .3); color: #fff; }
.submodule.is-dark p { color: var(--pale); }
.submodule.is-light { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.submodule.is-light:hover { box-shadow: 0 16px 34px oklch(35% .11 264 / .13); border-color: oklch(85% .04 70); }
.submodule.is-light p { color: var(--muted); }
.submodule.is-light .arrow { color: var(--accent); }

.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 28px var(--gutter) 8px; }
.stage {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  border-top: 4px solid var(--stage, var(--accent));
}
.stage.is-gold { --stage: var(--gold); }
.stage.is-blue { --stage: var(--ink); }
.stage-range { margin: 0; font-size: 11px; font-weight: 800; color: var(--stage, var(--accent)); letter-spacing: 1px; }
.stage h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 6px 0 10px; }
.stage p { font-size: 12.5px; line-height: 1.65; color: #666; margin: 0; }
.stage-tags { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-soft {
  background: #f8f5ef; border-radius: 12px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: #6b6656;
}

.subjects { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; padding: 22px var(--gutter); }
.subject-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.subject {
  margin: 0;
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid #f5f0e6;
}
.subject::before { content: "•"; color: var(--accent); font-weight: 800; font-size: 12px; }
.subject b { display: block; font-size: 13.5px; font-weight: 700; color: #2a2a2a; }
.subject span { font-size: 11.5px; color: var(--muted); }
.sidestack { display: flex; flex-direction: column; gap: 14px; }

.timings {
  background: var(--ink); border: 1px solid oklch(52% .16 264 / .6); border-radius: 16px;
  padding: 24px; color: #fff;
}
.timings .kicker { color: var(--gold); letter-spacing: 1.5px; }
.timings dl { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; margin: 0; }
.timings dl > div { display: flex; justify-content: space-between; gap: 12px; }
.timings dt { color: var(--pale); }
.timings dd { font-weight: 700; margin: 0; }

.downloads-card { background: var(--sand); border: 1px solid #ecd9a4; border-radius: 16px; padding: 24px; }
.downloads-card .kicker { color: var(--gold-ink); letter-spacing: 1.5px; }
.dl-list { display: flex; flex-direction: column; gap: 9px; }
.dl-row {
  background: #fff; border-radius: 10px; padding: 11px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  text-decoration: none;
}
.dl-row span:first-child { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dl-row span:last-child { font-size: 11px; font-weight: 800; color: var(--accent); flex: none; }
.downloads-card .note-mono { padding: 10px 0 0; font-size: 10.5px; }

.assess { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 var(--gutter) 22px; }
.assess p { font-size: 13.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; margin: 0; }
.calendar { display: flex; flex-direction: column; gap: 10px; }
.calendar div { display: flex; gap: 14px; align-items: center; }
.calendar b {
  font-weight: 800; font-size: 11px; padding: 5px 10px; border-radius: 8px; flex: none;
  background: var(--peach); color: var(--accent);
}
.calendar .m-blue { background: var(--sky); color: var(--ink); }
.calendar .m-gold { background: var(--sand); color: var(--gold-ink); }
.calendar span { font-size: 13px; color: #444; font-weight: 600; }
.assess .note-mono { padding: 12px 0 0; font-size: 10.5px; }

@media (max-width: 1180px) {
  .stages { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .photostrip { grid-template-columns: 1fr; padding: 18px 16px 0; }
  .photostrip > div { height: 220px; }
  .submodules, .subjects, .assess { grid-template-columns: 1fr; padding: 18px 16px; }
  .assess { padding-bottom: 18px; }
  .stages { padding: 20px 16px 8px; }
  .subject-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .stages { grid-template-columns: 1fr; }
  .submodule { padding: 22px; }
}

/* ================================================================ page: Admissions */

.admissions {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px;
  padding: 28px var(--gutter) 44px; align-items: start;
}
.adm-side { display: flex; flex-direction: column; gap: 14px; }
.adm-photo { border-radius: 18px; overflow: hidden; height: 220px; }
.adm-photo img { width: 100%; height: 100%; object-fit: cover; }

.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 14px; }
.step b {
  width: 28px; height: 28px; border-radius: 50%; background: var(--peach); color: var(--accent);
  font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none;
}
.step-title { font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 0; }
.step-detail { font-size: 12.5px; color: #6b6b6b; line-height: 1.5; margin: 0; }

.elig { display: flex; flex-direction: column; }
.elig div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid #f5f0e6;
}
.elig dt { font-size: 13px; font-weight: 700; color: #2a2a2a; }
.elig dd { font-size: 13px; color: #666; text-align: right; margin: 0; }

.faq details { border-top: 1px solid #f5f0e6; }
.faq summary {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 13px 0; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: #2a2a2a;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 16px; font-weight: 800; color: var(--accent); flex: none;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  font-size: 13px; line-height: 1.7; color: #666;
  margin: 0; padding: 0 0 14px; max-width: 560px; text-wrap: pretty;
}

.adm-parentinfo {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--ink); border: 1px solid oklch(52% .16 264 / .6); border-radius: 16px;
  padding: 22px 26px; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.68,0,1), box-shadow .3s;
}
.adm-parentinfo:hover { transform: translateY(-4px); box-shadow: 0 16px 34px oklch(35% .11 264 / .3); }
.adm-parentinfo b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.adm-parentinfo span { display: block; font-size: 12px; color: var(--pale); margin-top: 3px; }
.adm-parentinfo .arrow { color: var(--gold); font-size: 18px; font-weight: 800; flex: none; margin: 0; }

.adm-fees { background: var(--sand); border: 1px solid #ecd9a4; border-radius: 16px; padding: 26px; }
.adm-fees .kicker { color: var(--gold-ink); letter-spacing: 1.5px; }
.adm-fees p { font-size: 13px; line-height: 1.7; color: #5a4a12; text-wrap: pretty; margin: 0; }
.adm-fees a { font-weight: 800; color: var(--gold-ink); }
.adm-fees code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; }

.enquiry {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px;
  box-shadow: 0 4px 20px rgba(23,53,107,.06); position: sticky; top: 20px;
}
.enquiry h2 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0; }
.enquiry .hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 20px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font-size: 12px; font-weight: 700; color: #444; }
.field input, .field select, .field textarea {
  border: 1px solid #e5ddcc; border-radius: 9px; padding: 10px 13px; font-size: 13px;
  background: var(--cream); font-family: inherit; color: #222; width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-wide { margin-top: 12px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.consent input { margin-top: 2px; accent-color: var(--accent); }
.consent span { font-size: 12px; color: #666; line-height: 1.5; }
.form-error {
  background: #fdecea; border: 1px solid #f5c6c0; border-radius: 9px; padding: 10px 14px;
  font-size: 12.5px; color: #a33a2e; font-weight: 600; margin-top: 12px;
}
.btn-submit {
  display: block; width: 100%; background: var(--accent); color: #fff; text-align: center;
  font-weight: 800; font-size: 14.5px; padding: 14px; border-radius: 26px; margin-top: 16px;
  cursor: pointer; border: none; font-family: inherit;
  box-shadow: 0 3px 10px rgba(242,107,33,.3); transition: transform .25s, box-shadow .25s;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242,107,33,.4); }
.form-foot { font-size: 11px; color: var(--faint); text-align: center; margin: 10px 0 0; }
.form-done {
  background: #eaf7ec; border: 1px solid #bfe3c6; border-radius: 12px; padding: 20px; text-align: center;
}
.form-done b { font-size: 16px; font-weight: 800; color: oklch(48% .13 150); }
.form-done p { font-size: 13px; color: #3a6b46; margin: 6px 0 0; line-height: 1.6; }
.form-done button {
  margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer;
  text-decoration: underline; background: none; border: none; font-family: inherit;
}

@media (max-width: 980px) {
  .admissions { grid-template-columns: 1fr; padding: 20px 16px 36px; }
  .enquiry { position: static; padding: 24px 20px; order: -1; }
}
@media (max-width: 620px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* ================================================================ page: Campus Life */

.stripe-warm { background: repeating-linear-gradient(45deg, #fde8d6, #fde8d6 14px, #fcdfc6 14px, #fcdfc6 28px); }
.stripe-cool { background: repeating-linear-gradient(45deg, #e9f0fd, #e9f0fd 14px, #dde8fa 14px, #dde8fa 28px); }
.stripe-gold { background: repeating-linear-gradient(45deg, #fdf3d7, #fdf3d7 14px, #faecc2 14px, #faecc2 28px); }
.stripe-grey { background: repeating-linear-gradient(45deg, #f4f2ee, #f4f2ee 14px, #ece9e3 14px, #ece9e3 28px); }

.facilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.facility {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: transform .32s cubic-bezier(.22,.68,0,1), box-shadow .32s, border-color .32s;
}
.facility:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px oklch(35% .11 264 / .15); border-color: oklch(85% .04 70);
}
.facility-media {
  height: 170px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.facility-media img { width: 100%; height: 100%; object-fit: cover; }
.facility-media span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted);
  background: rgba(255,255,255,.92); padding: 4px 9px; border-radius: 4px;
}
.facility-body { padding: 18px 22px; }
.facility-body h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.facility-body p { font-size: 12.5px; color: #6b6b6b; margin: 5px 0 0; line-height: 1.6; }

.activities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.activity { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.activity b {
  width: 42px; height: 42px; border-radius: 12px; font-size: 17px; font-weight: 800;
  display: grid; place-items: center; margin-bottom: 12px;
  background: var(--sky); color: var(--ink);
}
.activity.is-orange b { background: var(--peach); color: var(--accent); }
.activity.is-gold b { background: var(--sand); color: var(--gold-ink); }
.activity h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; }
.activity p { font-size: 12px; color: var(--muted); margin: 4px 0 0; line-height: 1.55; }

.lifephotos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 30px var(--gutter) 0; }
.lifephoto { border-radius: 18px; overflow: hidden; height: 280px; position: relative; }
.lifephoto img { width: 100%; height: 100%; object-fit: cover; }
.lifephoto figcaption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(15,42,92,.85));
  padding: 28px 16px 14px; font-size: 13px; font-weight: 800; color: #fff;
}

.houses { padding: 36px var(--gutter) 44px; }
.houses .panel-dark { padding: 36px 40px; background: var(--ink); }
.houses h2 { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.house-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.house {
  background: rgba(255,255,255,.08); border-radius: 14px; padding: 20px;
  border-top: 4px solid var(--house);
}
.house.is-red { --house: #e2504a; }
.house.is-blue { --house: #4a90e2; }
.house.is-green { --house: #57b45e; }
.house.is-yellow { --house: oklch(82% .16 86); }
.house b { font-size: 15px; font-weight: 800; }
.house span { display: block; font-size: 12px; color: var(--pale); margin-top: 4px; }
.houses .note-mono { color: #9db2e4; padding: 14px 0 0; }

@media (max-width: 1180px) {
  .facilities { grid-template-columns: 1fr 1fr; }
  .activities { grid-template-columns: 1fr 1fr; }
  .house-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .lifephotos { grid-template-columns: 1fr; padding: 20px 16px 0; }
  .houses { padding: 26px 16px 36px; }
  .houses .panel-dark { padding: 26px 22px; }
}
@media (max-width: 620px) {
  .facilities, .activities, .house-grid { grid-template-columns: 1fr; }
}

/* ================================================================ page: Gallery */

@keyframes scsLbIn { 0% { opacity: 0; transform: scale(.965) } 100% { opacity: 1; transform: scale(1) } }
@keyframes scsLbFade { 0% { opacity: 0 } 100% { opacity: 1 } }

.filters { display: flex; gap: 8px; padding: 24px var(--gutter) 8px; flex-wrap: wrap; }
.filters button, .filterbar .chips button {
  padding: 8px 18px; border-radius: 20px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: #fff; color: #555; border: 1px solid #e5ddcc; font-family: inherit;
  transition: transform .25s cubic-bezier(.22,.68,0,1), background .25s, color .25s, box-shadow .25s;
}
.filters button:hover, .filterbar .chips button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px oklch(35% .11 264 / .14); }
.filters button[aria-pressed="true"], .filterbar .chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px var(--gutter) 44px; }
.album {
  display: block; width: 100%; text-align: left; padding: 0; font-family: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform .35s cubic-bezier(.22,.68,0,1), box-shadow .35s, border-color .35s;
}
.album:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px oklch(35% .11 264 / .18); border-color: oklch(85% .04 70);
}
.album-media {
  display: flex; align-items: center; justify-content: center;
  height: 210px; position: relative; overflow: hidden;
}
.album-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.68,0,1);
}
.album:hover .album-media img { transform: scale(1.07); }
.album-media .ph {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted);
  background: rgba(255,255,255,.92); padding: 4px 9px; border-radius: 4px;
}
.album-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 55%, oklch(26% .1 264 / .55));
}
.album-title {
  position: absolute; bottom: 10px; left: 12px; color: #fff; font-size: 12px; font-weight: 800;
  text-shadow: 0 1px 8px oklch(22% .09 264 / .8);
}
.album-count {
  position: absolute; bottom: 10px; right: 12px; background: oklch(26% .1 264 / .85); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px;
}
.album-foot {
  padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.album-meta { font-size: 11.5px; color: var(--muted); }
.album-view { font-size: 11.5px; font-weight: 800; color: var(--accent); }

.albums-empty {
  grid-column: 1 / -1; background: #fff; border: 1px dashed #e5ddcc; border-radius: 16px;
  padding: 44px; text-align: center;
}
.albums-empty span { font-size: 26px; }
.albums-empty b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.albums-empty p { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; }

.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  border: none; padding: 24px; margin: 0; background: oklch(18% .04 264 / .94);
  flex-direction: column; align-items: center; justify-content: center;
}
.lightbox[open] { display: flex; animation: scsLbFade .3s ease both; }
.lightbox::backdrop { background: oklch(18% .04 264 / .6); }
.lb-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; padding: 18px 26px; gap: 16px;
}
.lb-bar h2 { color: #fff; font-size: 15px; font-weight: 800; margin: 0; }
.lb-bar h2 span { color: #9db2e4; font-weight: 600; font-size: 12px; margin-left: 8px; }
.lb-btn {
  width: 42px; height: 42px; border-radius: 50%; background: oklch(100% 0 0 / .12);
  border: 1px solid oklch(100% 0 0 / .25); color: #fff; font-size: 17px; font-weight: 800;
  display: grid; place-items: center; cursor: pointer; flex: none; font-family: inherit;
  transition: background .25s, transform .25s;
}
.lb-btn:hover { background: var(--accent); transform: scale(1.08); }
.lb-stage {
  display: flex; align-items: center; gap: 18px; width: 100%; max-width: 1060px; justify-content: center;
}
.lb-stage .lb-btn { width: 48px; height: 48px; font-size: 19px; }
.lb-stage .lb-btn:hover { transform: scale(1.1); }
.lb-stage img {
  max-width: calc(100% - 140px); max-height: 66vh; border-radius: 14px; object-fit: contain;
  box-shadow: 0 30px 90px oklch(8% .02 264 / .7);
  animation: scsLbIn .38s cubic-bezier(.22,.68,0,1) both;
}
.lb-blank {
  width: min(720px, 80vw); height: min(430px, 56vh); border-radius: 14px;
  background: repeating-linear-gradient(45deg, #2b55c4, #2b55c4 16px, #3560d0 16px, #3560d0 32px);
  display: flex; align-items: center; justify-content: center;
}
.lb-blank span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--pale);
  background: oklch(26% .1 264 / .75); padding: 8px 14px; border-radius: 6px;
}
.lb-thumbs { display: flex; gap: 8px; margin-top: 18px; max-width: 80vw; overflow-x: auto; padding: 4px; }
.lb-thumbs img {
  width: 64px; height: 48px; border-radius: 8px; object-fit: cover; cursor: pointer; flex: none;
  border: 2px solid transparent; opacity: .55; transition: opacity .25s, transform .25s;
}
.lb-thumbs img:hover { transform: scale(1.08); opacity: 1; }
.lb-thumbs img[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.lb-help { color: #9db2e4; font-size: 11.5px; font-weight: 600; margin: 12px 0 0; }

@media (max-width: 1180px) { .albums { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) {
  .filters { padding: 18px 16px 4px; }
  .albums { grid-template-columns: 1fr; padding: 16px 16px 36px; }
  .lb-stage img { max-width: 100%; }
  .lb-stage .lb-btn { width: 40px; height: 40px; }
}

/* ================================================================ page: Notices */

.filterbar { display: flex; gap: 12px; padding: 24px var(--gutter) 8px; align-items: center; flex-wrap: wrap; }
.filterbar .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filterbar .spacer { flex: 1; }
.filterbar input {
  border: 1px solid #e5ddcc; border-radius: 20px; padding: 9px 18px; font-size: 13px;
  background: #fff; width: 220px; font-family: inherit; color: #222;
}
.filterbar input:focus { border-color: var(--accent); }

.noticelist {
  padding: 20px var(--gutter) 44px; display: flex; flex-direction: column; gap: 10px;
  list-style: none; margin: 0;
}
.noticerow {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px;
  display: flex; gap: 18px; align-items: center; border-left: 4px solid var(--mark, var(--ink));
}
.noticerow.is-orange { --mark: var(--accent); }
.noticerow.is-gold { --mark: var(--gold); --mark-ink: var(--gold-ink); }
.notice-when { text-align: center; flex: none; width: 44px; }
.notice-when b { display: block; font-size: 19px; font-weight: 800; color: var(--mark-ink, var(--mark, var(--ink))); }
.notice-when span { font-size: 10px; font-weight: 800; color: var(--muted); }
.notice-body { flex: 1; min-width: 0; }
.notice-body h2 { font-size: 14.5px; font-weight: 800; color: #2a2a2a; line-height: 1.4; margin: 0; }
.notice-meta { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.tag-pin {
  background: var(--sand); color: var(--gold-ink); font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}
.notice-pdf {
  background: var(--peach); color: var(--accent); font-size: 11px; font-weight: 800;
  padding: 6px 14px; border-radius: 14px; flex: none; text-decoration: none; transition: transform .25s;
}
.notice-pdf:hover { transform: translateY(-2px); color: var(--accent); }
.notice-pdf.is-soon { background: #f4f2ee; color: var(--muted); }
.notices-empty {
  background: #fff; border: 1px dashed #e5ddcc; border-radius: 16px; padding: 40px; text-align: center;
  color: var(--muted); font-size: 14px; font-weight: 600;
}
.noticelist .note-mono { padding: 8px 0 0; }

@media (max-width: 980px) {
  .filterbar { padding: 18px 16px 4px; }
  .filterbar input { width: 100%; }
  .noticelist { padding: 16px 16px 36px; }
  .noticerow { flex-wrap: wrap; gap: 12px; }
  .notice-body { flex: 1 1 60%; }
}

.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================ page: Parent Info */

.uniform-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.uniform-head {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; padding: 14px 24px;
  letter-spacing: .5px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.uniform-head h2 { font-size: 13px; font-weight: 800; margin: 0; }
.uniform-head em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--pale); }
.uniform-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.uniform-day { padding: 20px 24px; border-bottom: 1px solid #f5f0e6; border-right: 1px solid #f5f0e6; }
.uniform-day b {
  display: inline-block; background: var(--peach); color: var(--peach-ink);
  font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 5px 14px; border-radius: 14px;
}
.uniform-day.c-blue b { background: var(--sky); color: oklch(52% .14 264); }
.uniform-day.c-gold b { background: var(--sand); color: var(--gold-ink); }
.uniform-day h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 10px 0 0; }
.uniform-day p { font-size: 12.5px; color: #666; line-height: 1.65; margin: 4px 0 0; }
.uniform-foot { padding: 13px 24px; font-size: 12px; color: var(--muted); background: #faf8f4; margin: 0; }
.uniform-foot code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; }

.viewer3d { padding: 14px var(--gutter) 8px; }
.viewer3d .panel-dark {
  padding: 28px 34px; border-radius: 18px;
  display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: center;
}
.viewer3d h2 { font-size: 22px; font-weight: 800; line-height: 1.25; margin: 0; text-wrap: pretty; }
.viewer3d .intro { font-size: 13px; color: var(--pale); line-height: 1.65; margin: 10px 0 0; }
.seg {
  display: inline-flex; gap: 4px; background: oklch(100% 0 0 / .1);
  border: 1px solid oklch(100% 0 0 / .2); border-radius: 22px; padding: 4px; margin-top: 18px;
}
.seg button {
  padding: 8px 22px; border-radius: 18px; font-size: 12.5px; font-weight: 800; cursor: pointer;
  background: transparent; color: #fff; border: none; font-family: inherit; transition: background .25s;
}
.seg button[aria-pressed="true"] { background: var(--accent); }
.daybtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.daybtns button {
  padding: 8px 15px; border-radius: 18px; font-size: 12px; font-weight: 800; cursor: pointer;
  background: oklch(100% 0 0 / .1); color: #fff; border: 1px solid oklch(100% 0 0 / .25);
  font-family: inherit; transition: transform .25s, background .25s, border-color .25s;
}
.daybtns button:hover { transform: translateY(-2px); }
.daybtns button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.sel-title { font-size: 13.5px; font-weight: 800; margin: 16px 0 0; }
.sel-detail { font-size: 12.5px; color: var(--pale); line-height: 1.6; margin: 3px 0 0; max-width: 420px; }
.houses-pick { display: flex; gap: 9px; align-items: center; margin-top: 14px; }
.houses-pick b { font-size: 11.5px; font-weight: 800; color: #9db2e4; }
.houses-pick button {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 3px solid transparent; transition: transform .25s;
}
.houses-pick button:hover { transform: scale(1.15); }
.houses-pick button[aria-pressed="true"] { border-color: #fff; }
.stage3d {
  background: oklch(100% 0 0 / .07); border: 1px solid oklch(100% 0 0 / .14);
  border-radius: 16px; overflow: hidden; position: relative;
}
.stage3d canvas { width: 100%; height: 440px; display: block; cursor: grab; }
.stage3d span {
  position: absolute; bottom: 10px; right: 14px; font-size: 10.5px; font-weight: 700;
  color: #9db2e4; pointer-events: none;
}

.dayinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px var(--gutter) 8px; }
.timings-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.timings-card .kicker { letter-spacing: 1.5px; margin-bottom: 14px; }
.timings-card dl { display: flex; flex-direction: column; margin: 0; }
.timings-card dl > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid #f5f0e6;
}
.timings-card dt { font-size: 13.5px; font-weight: 700; color: #2a2a2a; }
.timings-card dd { font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; margin: 0; }
.timings-card > p { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }

.stops-card {
  background: var(--ink); border: 1px solid oklch(52% .16 264 / .6); border-radius: 16px;
  padding: 26px; color: #fff;
}
.stops-card .kicker { color: var(--gold); letter-spacing: 1.5px; margin-bottom: 14px; }
.stops-card .intro { font-size: 13px; color: var(--pale); line-height: 1.6; margin: 0 0 14px; }
.stops { list-style: none; margin: 0; padding: 0; }
.stops li { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; }
.stops i {
  display: flex; flex-direction: column; align-items: center; flex: none; align-self: stretch;
}
.stops i::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
  flex: none; margin-top: 4px;
}
.stops i::after { content: ""; width: 2px; flex: 1; background: oklch(100% 0 0 / .18); }
.stops li:last-child i::after { background: transparent; }
.stops b { display: block; font-size: 13.5px; font-weight: 800; }
.stops span { display: block; font-size: 11.5px; color: #9db2e4; margin-top: 1px; }
.stops-card > p:last-child { font-size: 11.5px; color: #9db2e4; margin: 12px 0 0; line-height: 1.6; }
.stops-card a { color: var(--gold); font-weight: 800; }

.helpcard { padding: 14px var(--gutter) 44px; }
.helpcard > div {
  background: linear-gradient(135deg, var(--sand), #fce9b8); border: 1px solid #ecd9a4;
  border-radius: 18px; padding: 26px 30px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.helpcard h2 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.helpcard p { font-size: 13px; color: var(--gold-ink); margin: 4px 0 0; }
.helpcard .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.helpcard .actions a {
  font-weight: 800; font-size: 13px; padding: 12px 24px; border-radius: 24px;
  text-decoration: none; color: #fff; transition: transform .25s;
}
.helpcard .actions a:hover { transform: translateY(-2px); color: #fff; }
.helpcard .a-call { background: var(--ink); }
.helpcard .a-contact { background: var(--accent); }

@media (max-width: 1180px) {
  .viewer3d .panel-dark { grid-template-columns: 1fr 340px; }
}
@media (max-width: 980px) {
  .uniform-grid { grid-template-columns: 1fr 1fr; }
  .viewer3d { padding: 14px 16px 8px; }
  .viewer3d .panel-dark { grid-template-columns: 1fr; padding: 24px 22px; }
  .stage3d canvas { height: 340px; }
  .dayinfo { grid-template-columns: 1fr; padding: 14px 16px 8px; }
  .helpcard { padding: 14px 16px 36px; }
}
@media (max-width: 620px) {
  .uniform-grid { grid-template-columns: 1fr; }
  .helpcard .actions a { flex: 1; text-align: center; }
}

/* ================================================================ page: Contact */

.contact {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px;
  padding: 28px var(--gutter) 44px; align-items: start;
}
.contact-side { display: flex; flex-direction: column; gap: 14px; }
.office dl { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; font-size: 13.5px; }
.office dl > div { display: flex; gap: 10px; }
.office dt { width: 90px; color: var(--muted); font-weight: 700; flex: none; }
.office dd { font-weight: 700; color: var(--ink); margin: 0; }
.contact .map, .contact .map iframe { min-height: 300px; border-radius: 16px; }

@media (max-width: 980px) {
  .contact { grid-template-columns: 1fr; padding: 20px 16px 36px; }
  .contact .enquiry { position: static; padding: 24px 20px; }
}

.btn-submit.is-blue { background: var(--ink); box-shadow: 0 3px 10px oklch(38% .16 264 / .3); }
.btn-submit.is-blue:hover { box-shadow: 0 10px 24px oklch(38% .16 264 / .4); }

/* ================================================================ page: Downloads */

.appblock { padding: 28px var(--gutter) 8px; }
.appblock .panel-dark {
  padding: 38px 42px; border-radius: 22px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
}
.appblock .appbar-tag { font-size: 11.5px; padding: 7px 16px; border-radius: 18px; }
.appblock h2 { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 16px 0 0; text-wrap: pretty; }
.appblock .lead { font-size: 14px; color: var(--pale); line-height: 1.7; margin: 12px 0 0; max-width: 520px; }
.appblock .actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.btn-apk {
  display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 14.5px; padding: 14px 28px; border-radius: 26px; text-decoration: none;
  box-shadow: 0 10px 28px oklch(62% .21 42 / .45);
  transition: transform .3s cubic-bezier(.22,.68,0,1), box-shadow .3s;
}
.btn-apk:hover { transform: translateY(-4px); box-shadow: 0 18px 40px oklch(62% .21 42 / .58); color: #fff; }
.btn-manual {
  display: inline-flex; align-items: center; gap: 10px; background: oklch(100% 0 0 / .13);
  border: 1.5px solid oklch(100% 0 0 / .45); color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 14px 26px; border-radius: 26px; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.68,0,1), background .3s;
}
.btn-manual:hover { transform: translateY(-4px); background: oklch(100% 0 0 / .24); color: #fff; }
.app-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: #9db2e4;
}
.app-howto { font-size: 11.5px; color: #9db2e4; line-height: 1.7; margin: 16px 0 0; max-width: 540px; }

.platform-note {
  margin: 14px 0 0; padding: 11px 16px; border-radius: 12px; max-width: 540px;
  background: oklch(82% .16 86 / .16); border: 1px solid oklch(82% .16 86 / .45);
  color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.6;
}

.fingerprint {
  margin-top: 16px; padding: 14px 18px; border-radius: 12px;
  background: oklch(100% 0 0 / .08); border: 1px solid oklch(100% 0 0 / .16);
  max-width: 540px;
}
.fingerprint b { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: .6px; }
.fingerprint p { font-size: 11.5px; color: var(--pale); line-height: 1.6; margin: 4px 0 0; }
.fingerprint code {
  display: block; margin-top: 4px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; color: #fff; word-break: break-all; line-height: 1.5;
}

.storecard {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px oklch(20% .08 264 / .45);
  transition: transform .35s cubic-bezier(.22,.68,0,1);
}
.storecard:hover { transform: translateY(-6px) rotate(-.4deg); }
.storecard-top > span:last-child { min-width: 0; }
.storecard-top { display: flex; gap: 14px; align-items: center; padding: 18px 20px 14px; }
.storecard-icon {
  width: 58px; height: 58px; border-radius: 14px; background: var(--cream);
  border: 1px solid var(--line); flex: none; display: grid; place-items: center; overflow: hidden;
}
.storecard-icon img { width: 88%; height: 88%; object-fit: contain; }
.storecard-name { display: block; font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1.25; }
.storecard-dev { display: block; font-size: 11.5px; font-weight: 700; color: #1c7d46; margin-top: 2px; }
.storecard-cat { display: block; font-size: 10px; color: #6f6f6f; margin-top: 1px; }
.storecard-stats {
  display: flex; justify-content: space-around; padding: 8px 18px 12px; border-bottom: 1px solid #f0ede6;
}
.storecard-stats div { text-align: center; }
.storecard-stats b { font-size: 12.5px; font-weight: 800; color: #1a1a1a; }
.storecard-stats b.boxed { border: 1px solid #6f6f6f; border-radius: 4px; padding: 0 5px; display: inline-block; }
.storecard-stats span { display: block; font-size: 9.5px; color: #6f6f6f; margin-top: 1px; }
.storecard-stats .rule { width: 1px; background: #f0ede6; }
.storecard-shots { display: flex; gap: 6px; padding: 14px 20px 6px; justify-content: space-between; }
.storecard-shots div {
  flex: 1; min-width: 0; max-width: 70px; height: 128px; border-radius: 10px; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.storecard-shots span:first-child { font-size: 16px; }
.storecard-shots span + span {
  font-size: 8.5px; font-weight: 800; letter-spacing: .4px; text-align: center; line-height: 1.4;
}
.shot-notices { background: linear-gradient(160deg, var(--ink), var(--ink-bright)); }
.shot-homework { background: linear-gradient(160deg, oklch(62% .21 42), oklch(70% .19 55)); }
.shot-fees { background: linear-gradient(160deg, var(--gold-ink), oklch(82% .16 86)); }
.shot-events { background: linear-gradient(160deg, #1c7d46, #3aa86b); }
.storecard-foot { padding: 12px 20px 18px; }
.storecard-foot a {
  display: block; background: #1c7d46; color: #fff; text-align: center; font-weight: 800;
  font-size: 13.5px; padding: 12px; border-radius: 10px; text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.storecard-foot a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #1c7d4655; color: #fff; }
.storecard-foot p { font-size: 9.5px; color: #6f6f6f; text-align: center; margin: 8px 0 0; }

.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doc {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.68,0,1), box-shadow .3s;
}
.doc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px oklch(35% .11 264 / .12); }
.doc b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.doc span.cat { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.doc .pill {
  background: var(--peach); color: var(--accent); font-size: 11px; font-weight: 800;
  padding: 7px 15px; border-radius: 15px; flex: none;
}
.doc.is-pending { cursor: default; }
.doc.is-pending:hover { transform: none; box-shadow: none; }
.doc.is-pending .pill { background: #f0ede6; color: var(--muted); }

.docs-empty {
  grid-column: span 2; background: #fff; border: 1px dashed #e5ddcc; border-radius: 14px;
  padding: 32px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600;
}

@media (max-width: 980px) {
  .appblock { padding: 20px 16px 8px; }
  .appblock .panel-dark { grid-template-columns: 1fr; padding: 26px 22px; }
  .appblock h2 { font-size: 24px; }
  .docs { grid-template-columns: 1fr; }
  .docs-empty { grid-column: span 1; }
}

/* ================================================================ page: Disclosure */

.discl { padding: 14px var(--gutter) 8px; }
.discl:first-of-type { padding-top: 28px; }
.discl-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: transform .32s cubic-bezier(.22,.68,0,1), box-shadow .32s, border-color .32s;
}
.discl-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px oklch(35% .11 264 / .15); border-color: oklch(85% .04 70);
}
.discl-card h2 {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 800;
  padding: 14px 24px; letter-spacing: .5px; margin: 0;
}
.discl-general { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.discl-general > div { display: flex; padding: 13px 24px; border-bottom: 1px solid #f5f0e6; gap: 16px; }
.discl-general dt { font-size: 12.5px; font-weight: 700; color: var(--muted); width: 200px; flex: none; }
.discl-general dd { font-size: 13px; font-weight: 700; color: #2a2a2a; margin: 0; }

.discl-row {
  display: flex; padding: 13px 24px; border-bottom: 1px solid #f5f0e6; gap: 16px; align-items: center;
}
.discl-row .name { font-size: 13px; font-weight: 700; color: #2a2a2a; flex: 1; }
.discl-row .state { width: 110px; flex: none; }
.discl-row .state span {
  font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 10px;
  background: var(--sand); color: var(--gold-ink);
}
.discl-row .state span.is-live { background: #eaf7ec; color: oklch(48% .13 150); }
.discl-row .go { width: 110px; flex: none; }
.discl-row .go a { display: inline-block; padding: 5px 0; font-size: 11.5px; font-weight: 800; color: var(--accent); text-decoration: none; }
.discl-row .go span { font-size: 11.5px; color: var(--faint); font-weight: 700; }

.discl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px var(--gutter) 44px; align-items: start; }
.discl-list { margin: 0; }
.discl-list > div {
  display: flex; justify-content: space-between; padding: 11px 24px;
  border-bottom: 1px solid #f5f0e6; gap: 16px;
}
.discl-list dt { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.discl-list dd { font-size: 13px; font-weight: 800; color: var(--ink); text-align: right; margin: 0; }
.discl-video { padding: 13px 24px; margin: 0; }
.discl-video a { font-size: 12.5px; font-weight: 800; color: var(--accent); text-decoration: none; }

@media (max-width: 980px) {
  .discl, .discl:first-of-type { padding: 14px 16px 8px; }
  .discl-general { grid-template-columns: 1fr; }
  .discl-general dt { width: 140px; }
  .discl-pair { grid-template-columns: 1fr; padding: 14px 16px 36px; }
  .discl-row { flex-wrap: wrap; }
  .discl-row .name { flex: 1 1 100%; }
}

/* ================================================================ page: Staff */

.leadership { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 28px var(--gutter) 8px; }
.leader {
  background: linear-gradient(135deg, var(--ink-deep), var(--ink));
  border: 1px solid oklch(52% .16 264 / .6); border-radius: 16px; padding: 24px; color: #fff;
  transition: transform .32s cubic-bezier(.22,.68,0,1), box-shadow .32s;
}
.leader:hover { transform: translateY(-4px); box-shadow: 0 18px 38px oklch(35% .11 264 / .3); }
.leader-post { font-size: 11px; font-weight: 800; color: var(--gold); letter-spacing: 1.5px; margin: 0; }
.leader h2 { font-size: 17px; font-weight: 800; margin: 6px 0 0; }
.leader-qual { font-size: 12px; color: var(--pale); margin: 3px 0 0; }

.staff-count { font-size: 12px; font-weight: 700; color: var(--muted); }

.stafftable { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.stafftable h2 {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 800;
  padding: 14px 24px; letter-spacing: .5px; margin: 0;
}
.stafftable h2.h-blue { background: oklch(52% .14 264); }
.stafftable h2.h-gold { background: var(--gold-ink); }
.staffhead, .staffrow { display: flex; padding: 13px 24px; gap: 16px; align-items: center; }
.staffhead {
  padding: 10px 24px; border-bottom: 1px solid #f0e7d8; background: #faf8f4;
  font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .5px;
}
.staffrow { border-bottom: 1px solid #f5f0e6; transition: background .25s; }
.staffrow:hover { background: #faf8f4; }
.staff-name { flex: 1.2; display: flex; gap: 12px; align-items: center; font-size: 13.5px; font-weight: 800; color: #2a2a2a; }
.staff-initial {
  width: 34px; height: 34px; border-radius: 50%; background: var(--peach); color: var(--accent);
  font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none;
}
.staffhead .staff-name { font-weight: 800; color: var(--muted); font-size: 11px; }
.staff-post { width: 150px; flex: none; }
.staff-post span {
  font-size: 10.5px; font-weight: 800; padding: 4px 11px; border-radius: 10px;
  background: var(--sky); color: oklch(52% .14 264);
}
.staff-post .p-prt { background: var(--peach); color: var(--peach-ink); }
.staff-post .p-ntt { background: var(--sand); color: var(--gold-ink); }
.staff-post .p-pet { background: #e8f5ea; color: oklch(48% .13 150); }
.staff-dept { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--body); }
.staff-classes { width: 130px; flex: none; font-size: 12px; color: var(--muted); }
.staff-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; margin: 0; }

.staffpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px var(--gutter) 8px; align-items: stretch; }
.staffpair-col { display: flex; flex-direction: column; gap: 14px; }
.supportrow {
  display: flex; justify-content: space-between; gap: 16px; padding: 13px 24px;
  border-bottom: 1px solid #f5f0e6; align-items: center;
}
.supportrow b { display: block; font-size: 13.5px; font-weight: 800; color: #2a2a2a; }
.supportrow span span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pill-blue, .pill-gold {
  font-size: 10.5px; font-weight: 800; padding: 4px 11px; border-radius: 10px; flex: none;
}
.pill-blue { background: var(--sky); color: oklch(52% .14 264); }
.pill-gold { background: var(--sand); color: var(--gold-ink); }

.joinus {
  background: linear-gradient(135deg, var(--ink-deep), var(--ink));
  border: 1px solid oklch(52% .16 264 / .6); border-radius: 16px; padding: 26px; color: #fff;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.joinus .kicker { color: var(--gold); letter-spacing: 1.5px; margin-bottom: 8px; }
.joinus h2 { font-size: 16px; font-weight: 800; line-height: 1.4; margin: 0; text-wrap: pretty; }
.joinus p { font-size: 12.5px; color: var(--pale); line-height: 1.65; margin: 8px 0 0; }
.joinus a {
  display: inline-block; margin-top: 14px; background: var(--accent); color: #fff; font-weight: 800;
  font-size: 12.5px; padding: 10px 20px; border-radius: 20px; text-decoration: none;
  align-self: flex-start; transition: transform .25s;
}
.joinus a:hover { transform: translateY(-2px); color: #fff; }

.pagelinks { display: flex; gap: 14px; padding: 22px var(--gutter) 44px; }
.pagelinks a {
  flex: 1; border-radius: 16px; padding: 20px 24px; text-decoration: none;
  font-size: 14px; font-weight: 800; transition: transform .3s;
}
.pagelinks a:hover { transform: translateY(-3px); }
.pagelinks .prev { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.pagelinks .next {
  background: var(--ink); border: 1px solid oklch(52% .16 264 / .6); color: #fff; text-align: right;
}
.pagelinks .next:hover { color: #fff; }

@media (max-width: 1180px) { .leadership { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .leadership { padding: 20px 16px 8px; }
  .staffpair { grid-template-columns: 1fr; padding: 14px 16px 8px; }
  .staffhead { display: none; }
  .staffrow { flex-wrap: wrap; gap: 8px 12px; }
  .staff-name { flex: 1 1 100%; }
  .staff-dept { flex: 1 1 100%; }
  .pagelinks { padding: 18px 16px 36px; flex-direction: column; }
  .pagelinks .next { text-align: left; }
}

/* ================================================================ page: Students' Corner */

.council { padding: 28px var(--gutter) 8px; }
.council .panel-dark { padding: 30px 34px; border-radius: 18px; }
.council h2 { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.council-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.council-card {
  background: oklch(100% 0 0 / .08); border: 1px solid oklch(100% 0 0 / .14);
  border-radius: 14px; padding: 18px; transition: transform .3s, background .3s;
}
.council-card:hover { transform: translateY(-4px); background: oklch(100% 0 0 / .14); }
.council-post { font-size: 11px; font-weight: 800; color: var(--gold); letter-spacing: 1px; margin: 0; }
.council-name { font-size: 14.5px; font-weight: 800; margin: 5px 0 0; }
.council-class { font-size: 11.5px; color: var(--pale); margin: 2px 0 0; }
.council .note-mono { color: #9db2e4; font-size: 10.5px; padding: 14px 0 0; }

.housecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px var(--gutter) 8px; }
.housecard {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  border-top: 5px solid var(--house);
  transition: transform .32s cubic-bezier(.22,.68,0,1), box-shadow .32s;
}
.housecard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px oklch(35% .11 264 / .13); }
.housecard h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
/* house colour stays bright on the border; the label is darkened so it reads */
.housecard .motto {
  font-size: 12px; font-weight: 700; margin: 2px 0 0;
  color: color-mix(in oklab, var(--house), #000 45%);
}
.housecard dl { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 0; font-size: 12px; color: #666; }
.housecard dl > div { display: flex; justify-content: space-between; gap: 10px; }
.housecard dd { margin: 0; font-weight: 700; color: var(--ink); }

.routine { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 22px var(--gutter) 8px; align-items: stretch; }
.routine-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.routine-card h2 {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 800;
  padding: 14px 24px; letter-spacing: .5px; margin: 0;
}
.routine-row {
  display: flex; padding: 12px 24px; border-bottom: 1px solid #f5f0e6; gap: 16px;
  align-items: center; flex: 1;
}
.routine-row time {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px;
  color: var(--accent); font-weight: 700; width: 150px; flex: none;
}
.routine-row span { font-size: 13px; font-weight: 700; color: #2a2a2a; }

.calstack { display: flex; flex-direction: column; gap: 14px; }
.calcard { border-radius: 16px; padding: 24px; }
.calcard .kicker { letter-spacing: 1.5px; margin-bottom: 12px; }
.calcard .callist > div { display: flex; gap: 12px; padding: 7px 0; align-items: baseline; }
.calcard b {
  background: #fff; font-weight: 800; font-size: 10.5px; padding: 4px 10px; border-radius: 8px;
  flex: none; min-width: 34px; text-align: center;
}
.calcard span { font-size: 12.5px; font-weight: 700; }
.cal-academic { background: var(--sand); border: 1px solid #ecd9a4; }
.cal-academic .kicker, .cal-academic b { color: var(--gold-ink); }
.cal-academic span { color: #5a4a12; }
.cal-training { background: var(--sky); border: 1px solid #c9d9f2; }
.cal-training .kicker, .cal-training b { color: oklch(52% .14 264); }
.cal-training span { color: #28439a; }
.cal-pastoral { background: var(--peach); border: 1px solid #f3d4bc; }
.cal-pastoral .kicker, .cal-pastoral b { color: var(--peach-ink); }
.cal-pastoral span { color: #6b4326; }

@media (max-width: 1180px) {
  .council-grid, .housecards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .council { padding: 20px 16px 8px; }
  .council .panel-dark { padding: 24px 22px; }
  .housecards { padding: 14px 16px 8px; }
  .routine { grid-template-columns: 1fr; padding: 18px 16px 8px; }
  .routine-row { flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 620px) {
  .council-grid, .housecards { grid-template-columns: 1fr; }
}

/* a download whose file has not been uploaded yet */
.btn-apk.is-unavailable, .btn-manual.is-unavailable, .storecard-foot a.is-unavailable {
  background: oklch(100% 0 0 / .14); border-color: oklch(100% 0 0 / .3); color: #dbe4fa;
  box-shadow: none; cursor: default; transform: none;
}
.storecard-foot a.is-unavailable { background: #ece9e3; color: #6b6b6b; }

/* ================================================================ 404 */

.notfound { padding: clamp(48px, 9vw, 120px) var(--gutter); max-width: 720px; }
.notfound img { margin-bottom: 18px; }
.notfound h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; color: var(--ink); margin: 6px 0 0; }
.notfound .lede { font-size: 15px; color: #666; line-height: 1.7; margin: 10px 0 0; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.notfound-help { font-size: 13px; color: var(--muted); margin: 22px 0 0; line-height: 1.7; }

/* ================================================================ print */

@media print {
  .topbar, .brandbar, .mainnav, .ticker, .site-footer, .hero-scroll, .filters,
  .filterbar, .appstrip, .helpcard, .skip, #scs-top, #scs-prog { display: none !important; }
  body { background: #fff; }
  .wrap { width: auto; }
  .panel-dark, .why-inner, .leader, .joinus, .stops-card, .timings-card {
    background: #fff !important; color: #000 !important; border: 1px solid #999;
  }
  .panel-dark *, .why-inner *, .leader *, .joinus *, .stops-card * { color: #000 !important; }
  section, .card, .cardbox, .discl-card, .noticerow { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* ================================================================ small screens
   Everything below was added after measuring the real device matrix: 320/360/390/
   412/430 px phones, phone landscape, and iPad in both orientations. */

/* --- nothing may stick out sideways on a 320 px phone ------------------ */
@media (max-width: 420px) {
  .topbar {
    flex-wrap: wrap; justify-content: center; gap: 6px 12px; text-align: center;
    padding: 8px var(--gutter);
  }
  .topbar-right { flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 0; }
}

@media (max-width: 620px) {
  /* office contact list: label above value instead of a fixed 90 px column */
  .office dl > div { flex-direction: column; gap: 1px; }
  .office dt { width: auto; }

  /* times and stop names may wrap rather than push the card wider */
  .timings-card dl > div { flex-direction: column; gap: 1px; }
  .timings-card dd { white-space: normal; }

  /* disclosure rows: the 200 px label column does not fit a phone */
  .discl-general > div { flex-direction: column; gap: 2px; padding: 12px var(--gutter); }
  .discl-general dt { width: auto; }
  .discl-list > div { flex-wrap: wrap; }
  .discl-list dd { text-align: left; }
}

/* --- readable type on a phone, or wherever the pointer is a finger -------
   Both conditions, because a desktop browser resized down to phone width is
   still worth reading, and a large touch screen still has no fine pointer. */
@media (max-width: 620px), (pointer: coarse) {
  .brand-chip, .eyebrow, .hero-caption, .note-mono, .uniform-foot code, .adm-fees code,
  .shot-tag, .tag-soft, .form-foot, .album-count, .album-meta, .album-view,
  .storecard-cat, .storecard-meta, .appcard-meta, .admin-hint, .uniform-head em,
  .leader-post, .council-post, .member-role, .member-note, .award-note, .quick-note,
  .notice-when span, .event-date span, .staff-post span, .pill-blue, .pill-gold,
  .discl-row .state span, .discl-row .go a, .discl-row .go span, .calendar b,
  .dl-row span:last-child, .doc span.cat, .stops span, .app-meta, .fingerprint p {
    font-size: 12px;
  }
  .tag-new, .tag-pin { font-size: 11.5px; padding: 3px 8px; }
  .fingerprint code { font-size: 11.5px; }
  .crumbs, .notice-date, .notice-meta, .message-role, .hours, .map-card span { font-size: 12.5px; }
}

/* --- comfortable targets for fingers ------------------------------------ */
@media (max-width: 620px), (pointer: coarse) {
  .card-head a, .section-head.row a, .readmore, .gallery-head a, .appbar-more,
  .appbar-guide, .footer-links a, .footer-social a, .crumbs a, .discl-video a {
    display: inline-block; padding: 6px 0; min-height: 24px;
  }
  .footer-social { gap: 16px; flex-wrap: wrap; }
  .map-actions a, .btn-contact, .btn-enquiry, .dl-row { min-height: 44px; }
  .dl-row { align-items: center; }
  .filters button, .filterbar .chips button, .daybtns button, .seg button { min-height: 40px; }
  .houses-pick button { width: 34px; height: 34px; }
  /* the phone and e-mail address in the office panel are links, not labels */
  .office dd a, .contact-side a { display: inline-block; padding: 4px 0; min-height: 24px; }
}

/* --- the last few pieces of small print --------------------------------
   These carry their own size rules further up the stylesheet, so they need
   naming again here to be lifted to a readable size on a phone. */
@media (max-width: 620px), (pointer: coarse) {
  .appcard-dev { font-size: 12px; }
  .beyond .note-mono,
  .downloads-card .note-mono,
  .cardbox .note-mono,
  .panel-dark .note-mono { font-size: 12px; }
  .facility-media span { font-size: 11.5px; }
  .notice-pdf, .notice-pdf.is-soon { font-size: 12px; }
  .uniform-day b { font-size: 11.5px; letter-spacing: .6px; }
  .stage3d span { font-size: 11.5px; }
  .hero-scroll span { font-size: 11.5px; letter-spacing: 1px; }
  .storecard-shots span + span { font-size: 11.5px; letter-spacing: 0; }
  .storecard-foot p { font-size: 11.5px; }
  .staffhead .staff-name, .staffhead .staff-post { font-size: 12px; }
  .storecard-stats span { font-size: 11.5px; }
  .doc .pill { font-size: 12px; }
  .calcard b { font-size: 11.5px; }
}

/* --- notches and rounded corners ---------------------------------------- */
@supports (padding: max(0px)) {
  .topbar { padding-left: max(var(--gutter), env(safe-area-inset-left));
            padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .brandbar { padding-left: max(var(--gutter), env(safe-area-inset-left));
              padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .mainnav { padding-left: max(var(--gutter), env(safe-area-inset-left));
             padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .footer-legal { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  #scs-top { bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* The rule above would otherwise replace the tighter padding the phone layout
   sets, so restate it here with the notch inset folded in. */
@supports (padding: max(0px)) {
  @media (max-width: 980px) {
    .topbar { padding-left: max(20px, env(safe-area-inset-left));
              padding-right: max(20px, env(safe-area-inset-right)); }
    .brandbar { padding-left: max(20px, env(safe-area-inset-left));
                padding-right: max(20px, env(safe-area-inset-right)); }
    .mainnav { padding-left: max(12px, env(safe-area-inset-left));
               padding-right: max(12px, env(safe-area-inset-right)); }
  }
}

/* --- a phone held sideways has very little height ----------------------- */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 300px; }
  .hero-copy { padding: 28px var(--gutter) 24px; }
  .hero-head { font-size: 26px; }
  .hero-sub { font-size: 13.5px; margin-top: 8px; }
  .hero-cta { margin-top: 14px; flex-direction: row; }
  .hero-meta { margin-top: 12px; }
  .stage3d canvas { height: 260px; }
}

/* --- very small phones: tighten the biggest type ------------------------ */
@media (max-width: 360px) {
  .brand-name { font-size: 16.5px; }
  .pagehead h1 { font-size: 24px; }
  .hero-head { font-size: 28px; }
  .why h2, .promise h2, .section-head h2, .gallery-head h2 { font-size: 19px; }
  .count b { font-size: 24px; }
  .quick a, .card, .cardbox, .panel, .glance, .message, .facility-body { padding: 18px; }
}