/* =====================================================================
   SRGI Public School
   Palette   ink #16233F  marigold #E0A222  neem #2C5B4C
             paper #FBF8F1  rule #CFC7B4  ash #5B6478
   Type      Zilla Slab (headings) + Mukta (body, Devanagari capable)
   Idea      The printed school circular and the notice board.
             One bold element: the marigold masthead rule.
   ===================================================================== */

:root {
  /* Sampled from the school crest: ribbon #AD072B, laurel #EBB52E,
     leaf green. --ink is the reading colour; --brand is the crest
     maroon, used on surfaces rather than on running text. */
  --ink: #2A171C;
  --brand: #8C0C22;
  --brand-soft: #A81428;
  --brand-deep: #660718;
  --marigold: #EBB52E;
  --marigold-deep: #B4860F;
  --neem: #2C5B4C;
  --paper: #FBF8F1;
  --paper-warm: #F6EFE3;
  --rule: #D6CBBB;
  --ash: #6B5A5F;
  --white: #FFFFFF;
  --danger: #9B2C24;
  --crimson: #AD072B;

  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 2.75rem);
  --stack: clamp(2.5rem, 6vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Mukta', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
}

h1, h2, h3, h4, .slab {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--ink); text-decoration-color: var(--marigold); text-underline-offset: 3px; }
a:hover { color: var(--marigold-deep); }

:focus-visible {
  outline: 3px solid var(--marigold);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: min(100% - (2 * var(--gutter)), 1140px);
  margin-inline: auto;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: var(--white);
  padding: 0.7rem 1rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- Header */
.topbar {
  background: var(--brand-deep);
  color: #DCE3F0;
  font-size: 0.86rem;
  padding: 0.45rem 0;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; }
.topbar a { color: #DCE3F0; text-decoration: none; }
.topbar a:hover { color: var(--marigold); }
.topbar .spacer { margin-left: auto; }

.masthead {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 0;
}
/* The crest is wider than it is tall, so it is sized on height and
   allowed to keep its own ratio. */
.crest { flex: none; height: 56px; width: auto; }
.crest img { height: 100%; width: auto; display: block; }


.masthead-text .name {
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: clamp(1.15rem, 3.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.masthead-text .sub {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--ash);
  max-width: none;
}

.nav-toggle {
  margin-left: auto;
  display: none;
  background: var(--ink); color: var(--white);
  border: 0; border-radius: 3px;
  padding: 0.55rem 0.85rem;
  font: inherit; font-size: 0.95rem;
  cursor: pointer;
}

/* Navigation sits on the marigold rule: the one bold element. */
.mainnav {
  background: var(--brand);
  border-top: 4px solid var(--marigold);
  position: sticky; top: 0; z-index: 60;
}
.mainnav ul {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.mainnav a {
  display: block;
  padding: 0.8rem 0.95rem;
  color: #E7ECF6;
  text-decoration: none;
  font-size: 0.94rem;
  border-bottom: 3px solid transparent;
}
.mainnav a:hover { background: var(--brand-soft); color: var(--white); }
.mainnav a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--marigold);
  background: var(--brand-soft);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .mainnav { position: static; }
  .mainnav ul { display: none; flex-direction: column; }
  .mainnav ul.open { display: flex; }
  .mainnav a { border-bottom: 1px solid rgba(255,255,255,0.12); }
}

/* ------------------------------------------------------------------ Hero */
.hero {
  background: var(--brand);
  color: var(--white);
  padding: var(--stack) 0 0;
}
.hero h1 { color: var(--white); max-width: 16ch; }
.hero p { color: #C9D3E6; font-size: 1.1rem; max-width: 52ch; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } }

/* Affiliation strip: the first thing parents look for. */
.affil {
  border: 1px solid rgba(224,162,34,0.45);
  border-left: 4px solid var(--marigold);
  padding: 0.85rem 1.1rem;
  margin: 1.5rem 0 0;
  font-size: 0.94rem;
  color: #E7ECF6;
  max-width: 48ch;
}
.affil strong { color: var(--marigold); font-weight: 600; }

/* Notice board panel, pinned like a real circular */
.board {
  background: var(--paper-warm);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 1.35rem 1.4rem;
  position: relative;
}
.board::before {
  content: "";
  position: absolute; top: -9px; left: 50%;
  width: 18px; height: 18px; margin-left: -9px;
  background: var(--marigold);
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.board h2 { font-size: 1.15rem; margin-bottom: 0.9rem; }
.board ul { list-style: none; margin: 0; padding: 0; }
.board li { padding: 0.6rem 0; border-top: 1px dotted var(--rule); }
.board li:first-child { border-top: 0; }
.board .when { display: block; font-size: 0.78rem; color: var(--ash); }
.board a { text-decoration: none; font-weight: 500; }
.board a:hover { text-decoration: underline; }

/* Class ladder: genuinely a sequence, so it is drawn as one. */
.ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: var(--stack);
  border-top: 4px solid var(--marigold);
  background: var(--brand-soft);
}
.ladder a {
  padding: 1.1rem 1rem 1.3rem;
  color: #DCE3F0;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,0.13);
}
.ladder a:last-child { border-right: 0; }
.ladder a:hover { background: rgba(224,162,34,0.16); color: var(--white); }
.ladder .rung { font-size: 0.76rem; color: var(--marigold); display: block; }
.ladder .stage {
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 1.02rem; font-weight: 600;
  color: var(--white); display: block; margin: 0.2rem 0 0.1rem;
}
.ladder .range { font-size: 0.83rem; display: block; }
@media (max-width: 820px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ladder { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Sections */
.section { padding: var(--stack) 0; }
.section--warm { background: var(--paper-warm); }
.section--white { background: var(--white); }

.section-head { margin-bottom: 2rem; }
.section-head p { color: var(--ash); }

.page-head {
  background: var(--brand);
  color: var(--white);
  padding: clamp(2rem, 5vw, 3.2rem) 0;
  border-bottom: 4px solid var(--marigold);
}
.page-head h1 { color: var(--white); margin-bottom: 0.3rem; }
.page-head p { color: #C4CFE3; max-width: 60ch; margin: 0; }

.crumbs { font-size: 0.85rem; color: #98A6C2; margin-bottom: 0.7rem; }
.crumbs a { color: #98A6C2; }

/* Panels, used instead of a uniform card kit */
.panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  padding: 1.4rem 1.5rem;
}
.panel h3 { margin-bottom: 0.45rem; }
.panel--accent { border-top-color: var(--marigold); }
.panel--neem { border-top-color: var(--neem); }

.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stat { border-left: 3px solid var(--marigold); padding-left: 0.9rem; }
.stat .figure {
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
}
.stat .caption { font-size: 0.88rem; color: var(--ash); }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-block;
  background: var(--marigold);
  color: #1B1305;
  border: 0; border-radius: 2px;
  padding: 0.72rem 1.4rem;
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--marigold-deep); color: var(--white); }
.btn--ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.btn--ink { background: var(--brand); color: var(--white); }
.btn--ink:hover { background: var(--brand-soft); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- Tables */
.table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.95rem;
  min-width: 520px;
}
table.data caption {
  text-align: left;
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 1.1rem; font-weight: 600;
  padding-bottom: 0.6rem;
}
table.data th, table.data td {
  border: 1px solid var(--rule);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
table.data thead th { background: var(--brand); color: var(--white); font-weight: 600; }
table.data tbody tr:nth-child(even) { background: var(--paper); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Disclosure doc */
.disclosure-block { margin-bottom: var(--stack); }
.disclosure-block > h2 {
  border-bottom: 2px solid var(--brand);
  padding-bottom: 0.35rem;
  margin-bottom: 1.2rem;
}
.kv { width: 100%; border-collapse: collapse; background: var(--white); font-size: 0.95rem; }
.kv th, .kv td { border: 1px solid var(--rule); padding: 0.6rem 0.8rem; text-align: left; }
.kv th { width: 38%; background: var(--paper-warm); font-weight: 600; }
@media (max-width: 560px) {
  .kv, .kv tbody, .kv tr, .kv th, .kv td { display: block; width: 100%; }
  .kv th { border-bottom: 0; }
  .kv td { border-top: 0; margin-bottom: -1px; }
}

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--neem);
  background: var(--white);
  padding: 0.75rem 1rem;
  margin-bottom: 0.55rem;
}
.doc-list .doc-title { flex: 1 1 20rem; }
.doc-list .doc-meta { font-size: 0.82rem; color: var(--ash); }
.doc-missing { color: var(--danger); font-size: 0.85rem; }

.print-note { font-size: 0.88rem; color: var(--ash); }

/* ----------------------------------------------------------------- Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
.field .hint { font-size: 0.8rem; color: var(--ash); margin-top: 0.25rem; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], input[type=url], input[type=number], select, textarea {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
.req { color: var(--danger); }

.alert {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--neem);
  background: var(--white);
  margin-bottom: 1.2rem;
}
.alert--error { border-left-color: var(--danger); }
.alert ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------- Notices */
.notice-item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand);
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
}
.notice-item.pinned { border-left-color: var(--marigold); }
.notice-meta { font-size: 0.82rem; color: var(--ash); margin-bottom: 0.25rem; }
.tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  margin-right: 0.4rem;
}

/* --------------------------------------------------------------- Gallery */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .album-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .album-grid { grid-template-columns: 1fr; } }
.album-tile {
  background: var(--white);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.album-tile img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.album-tile .body { padding: 0.85rem 1rem; }
.album-empty {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--paper-warm);
  color: var(--ash);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- Footer */
.footer {
  background: var(--brand-deep);
  color: #BCC8DF;
  padding: var(--stack) 0 1.5rem;
  border-top: 4px solid var(--marigold);
  margin-top: var(--stack);
}
.footer h3 { color: var(--white); font-size: 1.02rem; }
.footer a { color: #BCC8DF; text-decoration: none; }
.footer a:hover { color: var(--marigold); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 0.22rem 0; }
.footer p { max-width: 34ch; font-size: 0.93rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2rem; padding-top: 1.1rem;
  font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}

/* ----------------------------------------------------------------- Print */
@media print {
  .topbar, .mainnav, .nav-toggle, .footer, .btn, .btn-row, .print-note, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .page-head { background: #fff; color: #000; border-bottom: 2px solid #000; padding: 0 0 0.5rem; }
  .page-head h1, .page-head p { color: #000; }
  .section { padding: 0.6rem 0; }
  .disclosure-block { break-inside: avoid; margin-bottom: 1.2rem; }
  table.data, .kv { font-size: 10pt; }
  table.data thead th { background: #fff !important; color: #000; border: 1px solid #000; }
  a { text-decoration: none; color: #000; }
}

/* ------------------------------------------------------- Photography */
/* The school's own photographs carry the site. Frame them plainly so the
   picture does the work, not the frame. */
.photo { border: 1px solid var(--rule); background: var(--white); }
.photo img { width: 100%; display: block; }
.photo figcaption { padding: 0.6rem 0.85rem; font-size: 0.86rem; color: var(--ash); }

.hero-photo { border: 1px solid rgba(255,255,255,0.22); }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
@media (max-width: 820px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }
.photo-strip img { aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--rule); }

/* Press clippings are wide and text-heavy: give them room, never crop. */
.press-item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--crimson);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.press-item img { width: 100%; margin-top: 0.8rem; border: 1px solid var(--rule); }
.press-meta { font-size: 0.82rem; color: var(--ash); }

.leader { display: grid; grid-template-columns: 8rem 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 520px) { .leader { grid-template-columns: 1fr; } }
.leader img { border: 1px solid var(--rule); aspect-ratio: 1 / 1; object-fit: cover; }

/* ------------------------------------------------------------ 3D hero */
/* A real depth effect, built from CSS 3D transforms rather than WebGL.
   Reason: most parents open this on a mid-range Android over patchy
   mobile data. A canvas renderer would cost a megabyte and a second of
   battery to say the same thing. This costs nothing and runs on the GPU.
   It reacts to the pointer, so it is motion that answers an action. */

.stage3d { perspective: 1100px; perspective-origin: 50% 40%; }

.stage3d .hero-photo {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
  box-shadow:
    0 1px 1px rgba(0,0,0,.28),
    0 8px 22px rgba(0,0,0,.32),
    0 26px 60px rgba(0,0,0,.30);
  will-change: transform;
}

/* The crest lifts off the photo plane. One element in front, nothing else,
   so the depth reads as depth instead of clutter. */
/* Top-left, not bottom-left: the caption lives along the bottom edge of
   the photograph, and the badge was covering it. */
.stage3d .depth-badge {
  position: absolute;
  left: -0.9rem;
  top: -0.9rem;
  background: var(--marigold);
  color: #1B1305;
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.55rem 0.95rem;
  transform: translateZ(58px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.stage3d .photo-wrap { position: relative; transform-style: preserve-3d; }

/* Touch devices get the depth without the tilt: there is no pointer to
   follow, and a scroll-driven tilt would fight the scroll. */
@media (hover: none) {
  .stage3d .hero-photo { transform: rotateX(2deg) rotateY(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stage3d .hero-photo { transform: none; transition: none; }
  .stage3d .depth-badge { transform: none; }
}

/* ------------------------------------------------------- WhatsApp CTA */
/* Parents here message on WhatsApp; almost nobody emails a school. This
   is the highest-value button on the site, so it is always reachable
   without being large enough to cover the content. */
.wa-float {
  position: fixed;
  right: clamp(0.8rem, 3vw, 1.5rem);
  bottom: clamp(0.8rem, 3vw, 1.5rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #1F8B4C;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.wa-float:hover { background: #176F3C; color: #fff; }
.wa-float svg { width: 1.35rem; height: 1.35rem; flex: none; }
@media (max-width: 560px) {
  .wa-float span { position: absolute; left: -9999px; }
  .wa-float { padding: 0.85rem; }
}
@media print { .wa-float { display: none; } }

/* Hindi second lines: same size, lighter, so they read as a translation
   rather than as separate content. */
.hi {
  display: block;
  font-weight: 400;
  color: inherit;
  opacity: 0.82;
  font-size: 0.92em;
  margin-top: 0.15em;
}

/* ------------------------------------------------------ Footer crest */
.footer-crest { margin-bottom: 0.9rem; }
.footer-crest img { height: 74px; width: auto; }

/* Printed stationery: receipts and report cards carry the crest. */
.stationery-head { display: flex; align-items: center; gap: 1rem; text-align: left; }
.stationery-head img { height: 72px; width: auto; flex: none; }
.stationery-head .text { flex: 1; }
@media (max-width: 520px) { .stationery-head { flex-direction: column; text-align: center; } }

/* Recognition line in the masthead: smaller than the address, because it
   is reassurance rather than navigation, but present on every page
   because it is the first thing a parent checks. */
.sub--recognition {
  font-size: 0.78rem;
  color: var(--brand);
  font-weight: 600;
  margin-top: 0.1rem;
}
@media (max-width: 560px) { .sub--recognition { font-size: 0.74rem; } }

/* Developer credit sits quietly at the end of the footer row. */
.footer-bottom .credit { opacity: 0.75; font-size: 0.82rem; }

/* -------------------------------------------------- Homepage slideshow */
/* Photographs crossfade rather than slide. A crossfade is one opacity
   change on the GPU, where a slide moves the whole layer across the
   screen -- on a cheap phone the difference is visible. */

.slideshow { position: relative; overflow: hidden; }
/* The caption is inside the frame, so the frame must not cut it off. */
.slideshow .slide { display: block; }

.slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: none;
}
.slideshow .slide.is-on { opacity: 1; pointer-events: auto; position: relative; }

.slideshow img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* The caption is what turns a photograph into an argument: the picture
   shows a smart board, the caption says every classroom has one. */
.slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 2.4rem 1rem 1rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: none;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}
@media (max-width: 560px) { .slide-caption { font-size: 0.88rem; padding-top: 1.8rem; } }

.slide-dots {
  position: absolute;
  right: 0.7rem; top: 0.7rem;
  display: flex; gap: 0.35rem;
  z-index: 2;
}
.slide-dot {
  width: 0.55rem; height: 0.55rem;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
}
.slide-dot.is-on { background: var(--marigold); }
.slide-dot:hover { background: #fff; }
/* The visible dot is small; the tappable area is not. */
.slide-dot::after { content: ''; position: absolute; inset: -0.5rem; }
.slide-dots { position: absolute; }
.slide-dot { position: relative; }

/* Someone who has asked for less motion gets the first photograph and
   nothing moving. The dots still work, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
}

/* ------------------------------------------------------ Fee table */
/* Two header rows with grouped columns. The grouping is the point:
   a parent needs to see at a glance which charges are one-time and
   which recur, because that is the difference between 10,000 once and
   10,000 every year. */
.fee-table th.grp {
  background: var(--brand-soft);
  text-align: center;
  font-size: 0.88rem;
}
.fee-table .th-sub {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  opacity: 0.85;
}
.fee-table thead th { vertical-align: middle; }
.fee-table tbody th[scope="row"] { white-space: nowrap; }

.fee-notes {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ash);
  max-width: 62ch;
}
.fee-notes li { margin-bottom: 0.3rem; }

/* =====================================================================
   Motion
   ---------------------------------------------------------------------
   Every animation here moves only `transform` and `opacity`. Those two
   are the only properties a browser can animate on the GPU without
   recalculating layout, which is what keeps a page smooth on the
   mid-range Android phones most of these parents are holding.

   What is deliberately absent: glowing box-shadows that repaint every
   frame, physics simulations, 3D card flips, infinite pulses. They look
   impressive in a demo and cost battery on a real phone for no gain.
   ===================================================================== */

/* ---- Sections rise into view as you scroll --------------------------
   Content is visible by default. It is hidden ONLY when the <html> tag
   carries .js, which an inline script in the header adds before the page
   paints. So if the JavaScript file fails to load, is blocked, or is
   served stale from a cache, every section is simply visible.

   The earlier version hid these with opacity:0 and relied on script to
   reveal them. When the script did not arrive, whole sections stayed
   invisible and left an empty gap on the page with no clue why. Never
   put content behind an animation that might not run. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Children arrive one after another, 70ms apart. Enough to feel
   deliberate, not enough to make anyone wait. */
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease-out, transform 520ms cubic-bezier(.22,.61,.36,1);
}
.js .reveal-group.is-in > * { opacity: 1; transform: none; }
.js .reveal-group.is-in > *:nth-child(2) { transition-delay: 70ms; }
.js .reveal-group.is-in > *:nth-child(3) { transition-delay: 140ms; }
.js .reveal-group.is-in > *:nth-child(4) { transition-delay: 210ms; }
.js .reveal-group.is-in > *:nth-child(5) { transition-delay: 280ms; }
.js .reveal-group.is-in > *:nth-child(6) { transition-delay: 350ms; }

/* ---- Panels lift slightly under the pointer ------------------------- */
.panel {
  transition: transform 220ms cubic-bezier(.22,.61,.36,1),
              box-shadow 220ms ease-out;
}
@media (hover: hover) {
  .panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(42,23,28,0.10);
  }
}

/* ---- Buttons answer the press --------------------------------------- */
/* A button that visibly gives when tapped tells a parent on a slow
   connection that the tap registered, which stops the double-tap that
   submits an enquiry form twice. */
.btn {
  transition: background-color 180ms ease, transform 90ms ease-out;
}
.btn:active { transform: translateY(1px) scale(0.985); }

/* ---- Navigation underline slides in --------------------------------- */
.mainnav a {
  position: relative;
  transition: background-color 200ms ease, color 200ms ease;
}
.mainnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--marigold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.mainnav a:hover::after,
.mainnav a[aria-current="page"]::after { transform: scaleX(1); }
.mainnav a[aria-current="page"] { border-bottom-color: transparent; }

/* ---- Notice board rows ---------------------------------------------- */
.board li a { transition: color 180ms ease; }
.board li { transition: transform 200ms cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) { .board li:hover { transform: translateX(3px); } }

/* ---- Album tiles ----------------------------------------------------- */
.album-tile { transition: transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease; }
@media (hover: hover) {
  .album-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(42,23,28,0.14); }
}

/* ---- WhatsApp button ------------------------------------------------- */
.wa-float { transition: transform 200ms cubic-bezier(.22,.61,.36,1), background-color 200ms ease; }
.wa-float:active { transform: scale(0.95); }
@media (hover: hover) { .wa-float:hover { transform: translateY(-2px); } }

/* ---- The override that matters --------------------------------------
   Someone who has asked their phone for less motion gets a page with no
   motion at all, and every element already in its final position. This
   is not a nicety: motion triggers nausea for some people. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > *, .js .reveal, .js .reveal-group > * {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .panel:hover, .album-tile:hover, .board li:hover, .wa-float:hover { transform: none; }
  .mainnav a::after { transition: none; }
}

/* ------------------------------------------------ Inline PDF viewer */
/* Documents open on the page rather than only downloading, because a
   parent on a phone should not have to leave the site and hunt through a
   downloads folder to read the fee structure. The frame is only created
   when the row is opened, so thirteen certificates do not all load at
   once on a page nobody has expanded. */
.doc-view { flex: 1 1 100%; margin-top: 0.6rem; }

.doc-view > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand);
  padding: 0.3rem 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.doc-view > summary::-webkit-details-marker { display: none; }
.doc-view > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 0.42rem solid currentColor;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  transition: transform 200ms ease;
}
.doc-view[open] > summary::before { transform: rotate(90deg); }
.doc-view > summary:hover { color: var(--marigold-deep); }

.doc-frame {
  margin-top: 0.6rem;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  min-height: 6rem;
}
.doc-frame iframe {
  display: block;
  width: 100%;
  height: min(78vh, 640px);
  border: 0;
  background: #fff;
}
.doc-frame-note {
  margin: 0;
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--ash);
  font-size: 0.9rem;
}

@media print { .doc-view { display: none; } }

/* --------------------------------------------------- Install the app */
/* Shown only when the browser says the site can be installed, so nobody
   is offered a button that would do nothing. */
.install-bar {
  display: none;
  border-radius: 3px;
  align-items: center;
  gap: 0.8rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--marigold);
  padding: 0.8rem 1rem;
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
}
.install-bar.is-on { display: flex; }
.install-bar p { margin: 0; flex: 1; max-width: none; }
.install-bar .btn { flex: none; }
.install-dismiss {
  background: none; border: 0; cursor: pointer;
  color: var(--ash); font: inherit; font-size: 1.3rem; line-height: 1;
  padding: 0 0.3rem;
}
@media print { .install-bar { display: none !important; } }

/* Share a notice to a WhatsApp group. Parents pass circulars around this
   way whatever the school does, so it may as well be one tap and carry
   the right link. */
.share-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1F8B4C;
  text-decoration: none;
}
.share-wa::before {
  content: "";
  width: 0.95rem; height: 0.95rem;
  background: #1F8B4C;
  border-radius: 50%;
  flex: none;
}
.share-wa:hover { color: #176F3C; text-decoration: underline; }
@media print { .share-wa { display: none; } }


/* ---- Images that fail to load ---------------------------------------
   A photograph that 404s used to leave a large empty box, because the
   aspect-ratio still reserved its space. Now the space collapses and,
   where a caption exists, the caption still reads. An absent photo
   should cost a little space, not a screenful of nothing. */
img[src=""], img:not([src]) { display: none; }

.photo-strip img,
.slideshow img,
.album-tile img {
  background: var(--paper-warm);
  min-height: 3rem;
}