/* =====================================================================
   City Pride School — Nigdi layout theme
   ---------------------------------------------------------------------
   Values below were read from the reference site's own stylesheet
   (cms-custom.css / cms-web-style.css) so the palette, type scale and
   band treatment match rather than approximate:

     --color-primary   #273aad   headings, navigation, body copy
     --color-secondary #feb21e   the highlighted word in a heading
     --color-third     #c6265b   awards / alumni bands
     orange            #ff6b00   news and leadership bands
     teal              #199d7f   footer
     cream             #fffaf3   page background
     header            #fff3dcbd sticky, 3px backdrop blur

   Loaded after style.css, which is token-driven, so re-pointing the
   tokens re-skins every page without touching component rules.
   ===================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
  --cps-primary:#273aad;
  --cps-secondary:#feb21e;
  --cps-third:#c6265b;
  --cps-orange:#ff6b00;
  --cps-teal:#199d7f;
  --cps-cream:#fffaf3;
  --cps-sand:#fff3dc;

  --sky:#273aad;       --sky-dark:#1d2c85;   --sky-soft:#e6e9f8;
  --sun:#feb21e;       --sun-dark:#d9910a;   --sun-soft:#fff3dc;
  --coral:#ff6b00;     --coral-dark:#d95a00; --coral-soft:#ffe8d6;
  --coral-deep:#A34400;
  --bubble:#c6265b;    --bubble-dark:#a11947;--bubble-soft:#fbe2ea;
  --grass:#199d7f;     --grass-dark:#12775f; --grass-soft:#ddf2ec;
  --grape:#273aad;     --grape-dark:#1d2c85; --grape-soft:#e6e9f8;
  --tangerine:#ff6b00; --tangerine-dark:#d95a00; --tangerine-soft:#ffe8d6;
  --mint:#199d7f;      --mint-dark:#12775f;  --mint-soft:#ddf2ec;

  --navy:#273aad;
  --navy-deep:#1b2a7d;
  --ink:#222f3e;
  --ink-soft:#4a5568;
  --ink-faint:#667085;
  --line:#e8e5dd;
  --line-soft:#f3f0e8;
  --paper:#ffffff;
  --cream:#fffaf3;
  --tint:#fff3dc;

  --brand:var(--sky);
  --accent:var(--coral);

  --r-sm:8px; --r:12px; --r-lg:20px; --r-xl:20px; --r-pill:999px;
  --blob-a:20px;
  --blob-b:20px;

  --sh-sm:0 2px 6px rgba(39,58,173,.07);
  --sh:0 4px 16px rgba(39,58,173,.10);
  --sh-lg:0 10px 30px rgba(39,58,173,.14);
  --sh-pop:0 4px 12px rgba(39,58,173,.10);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t:.3s var(--ease);

  --font-head:"Pridi",Georgia,serif;
  --font-body:"Poppins","Segoe UI",Arial,sans-serif;
  --header-h:160px;
}

/* --------------------------------------------------------- typography */
body {
  background:var(--cps-cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
}

h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:400; color:var(--cps-primary); letter-spacing:0; }
h1 { font-size:clamp(1.9rem,3.6vw,2.6rem); }
h2 { font-size:30px; line-height:normal; }
h3 { font-size:clamp(1.1rem,1.6vw,1.3rem); }

/* On the reference site the highlighted word of a heading is amber. */
h2 .pop, h2 span.hl { color:var(--cps-secondary); font-style:normal; }

a { color:var(--cps-primary); }
a:hover { color:var(--cps-orange); }

/* ------------------------------------------------------------- shapes */
.blob, .blob-a, .blob-b { border-radius:var(--r-lg) !important; }

.btn {
  border-radius:6px;
  font-family:var(--font-body);
  font-weight:600;
  box-shadow:none;
  text-transform:none;
}
.btn:hover, .btn:focus-visible { transform:none; box-shadow:var(--sh-sm); }
.btn-primary { background:var(--cps-primary); border-color:var(--cps-primary); }
.btn-accent  { background:var(--cps-orange);  border-color:var(--cps-orange); color:#fff; }
.btn-ghost   { border:2px solid var(--cps-primary); color:var(--cps-primary); background:transparent; }
.section-cta .btn-ghost, .site-footer .btn-ghost,
.band .btn-ghost { border-color:#fff; color:#fff; }
.section-cta .btn-ghost:hover, .site-footer .btn-ghost:hover,
.band .btn-ghost:hover { background:#fff; color:var(--cps-primary); }

/* The playful build's wave dividers are replaced by the torn-paper bands. */
.footer-wave, .hero-wave, .banner-wave { display:none !important; }

/* =====================================================================
   CONFETTI PAGE TEXTURE
   The reference site lays a colour-dot image behind its pale sections.
   ===================================================================== */
.confetti-bg {
  background-image:url("../img/confetti.svg");
  background-repeat:repeat;
  background-size:620px 620px;
  background-position:center;
}

/* =====================================================================
   TORN-PAPER BANDS
   A coloured band whose top and bottom edges are torn out in the page
   colour, as the reference site does with its SVG overlays.
   ===================================================================== */
/* .section.band, not .band: the plain .section padding rule sits later in
   this sheet and would win a specificity tie, flattening this to 3rem. */
.section.band, .band {
  position:relative;
  overflow:hidden;
  /* The torn edges eat ~78px top and bottom; content must clear them. */
  padding:8rem 0 8.5rem;
  background:var(--cps-orange);
}
.band::before,
.band::after {
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:78px;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  z-index:2;
}
.band::before { top:-1px;    background-image:url("../img/torn-top.svg"); }
.band::after  { bottom:-1px; background-image:url("../img/torn-bottom.svg"); }
.band > .container { position:relative; z-index:3; }

.band-orange { background:var(--cps-orange); }
.band-pink   { background:var(--cps-third); }

/* Band headings follow the reference site's own treatment: on the orange it
   sets the heading in indigo with the highlighted word white
   (.masters-section h2 { color: var(--color-primary) }). That reads at 4.3:1,
   where white on the same orange would be only 2.9:1. The pink band is dark
   enough for white, at 5.5:1. */
.band > .container > .section-head h2,
.band > .container > .section-head p { color:var(--cps-primary); }
.band > .container > .section-head p { font-size:1.15rem; font-weight:600; opacity:1; }
.band > .container > .section-head h2 .pop { color:#fff; }

.band-pink > .container > .section-head h2,
.band-pink > .container > .section-head p { color:#fff; }
.band-pink > .container > .section-head h2 .pop { color:var(--cps-secondary); }

/* Cards inside a band keep their normal colours — they sit on white. */
.band .card, .band .news-card, .band .event-card, .band .leader-card {
  background:var(--paper);
  border-color:rgba(255,255,255,.45);
}

/* =====================================================================
   NEWS BAND — ticker, then two white panels (events | news)
   ===================================================================== */
.section-news .news-ticker { margin-bottom:2.4rem; }
.section-news .section-head { margin-bottom:2.2rem; }

.news-duo {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem;
  align-items:stretch;
}
@media (max-width:880px) { .news-duo { grid-template-columns:1fr; } }

.news-panel {
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border-radius:14px;
  padding:1.5rem 1.6rem 1.2rem;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.news-panel-head {
  display:flex; align-items:center; gap:.7rem;
  padding-bottom:.9rem; margin-bottom:.3rem;
  border-bottom:3px solid var(--cps-secondary);
}
.news-panel-head h3 { margin:0; font-size:1.25rem; color:var(--cps-primary); }
.panel-icon {
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--sun-soft); color:var(--coral-deep); font-size:1.05rem;
}

.news-panel-list { position:relative; max-height:300px; overflow:hidden; }
.panel-track { list-style:none; margin:0; padding:0; }
.panel-track li {
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem .15rem;
  border-bottom:1px dashed var(--line);
}
.panel-track li:last-child { border-bottom:0; }
.panel-track a { color:var(--ink); font-weight:500; line-height:1.45; }
.panel-track a:hover { color:var(--cps-primary); }
.panel-track time, .panel-meta { flex-shrink:0; font-size:.8rem; color:var(--ink-faint); white-space:nowrap; }
.panel-meta { display:inline-flex; align-items:center; gap:.5rem; }
.panel-meta .tag {
  background:var(--sky-soft); color:var(--cps-primary);
  border-radius:4px; padding:.1em .55em; font-size:.72rem; font-weight:600;
}

/* Long lists drift upward; hovering pauses to read. The second copy of the
   list rendered by the template makes the loop seamless. */
.news-panel-list.is-scrolling .panel-track { animation:panelScroll 22s linear infinite; }
.news-panel-list.is-scrolling:hover .panel-track { animation-play-state:paused; }
@keyframes panelScroll { to { transform:translateY(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .news-panel-list.is-scrolling .panel-track { animation:none; }
}

.news-panel-foot {
  margin-top:auto; padding-top:1rem; text-align:right;
  border-top:1px solid var(--line-soft);
}
.news-panel-foot .link-more { color:var(--cps-primary); font-weight:600; }

/* =====================================================================
   HEADER — sticky, cream, blurred, shrinking on scroll
   ===================================================================== */
.topbar {
  background:var(--cps-primary);
  color:#fff;
  font-size:.82rem;
  border-bottom:0;
}
.topbar a, .topbar-notice { color:#fff; }
.topbar a:hover { color:var(--cps-secondary); }

.site-header {
  background:rgba(255,243,220,.74);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-bottom:0;
  transition:all .3s ease;
}
.site-header.is-stuck {
  background:rgba(255,243,220,.94);
  box-shadow:0 2px 12px rgba(39,58,173,.14);
}

/* Three-part masthead: crest left, name centred, badge right, menu button
   at the far right — the reference site's arrangement. */
/* Flex, not grid: .main-nav is a fixed-position panel, and as a grid item it
   still claimed a track — which collapsed .header-actions into a 0px column.
   Out of flow in flex, it takes no space at all. */
.header-inner {
  display:flex;
  align-items:center;
  gap:1.2rem;
  min-height:var(--header-h);
}
.masthead-crest, .masthead-badge, .header-actions { flex:0 0 auto; }
.brand { flex:1 1 auto; min-width:0; }

/* The reference masthead carries only the menu button. Admissions already has
   its own tab on the right rail, and search lives inside the menu panel. */
.header-actions .icon-btn,
.header-actions .btn-accent { display:none !important; }
.header-actions { margin-left:auto; }
.burger {
  width:52px; height:44px; border-radius:8px;
  background:var(--cps-primary); border:0; padding:0;
  display:inline-flex !important; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
}
/* flex-shrink:0 matters: the base sheet's padding and margins overflowed the
   flex column, and the 3px bars were being shrunk to zero height. */
.burger span { display:block; flex:0 0 3px; width:24px; height:3px; border-radius:2px; background:#fff; }
.burger span + span { margin-top:0; }
.burger:hover { background:var(--cps-secondary); }
.burger:hover span { background:var(--cps-primary); }
.masthead-crest img { max-height:104px; width:auto; }
.masthead-badge img { max-height:80px; width:auto; }

.brand { flex-direction:column; align-items:center; gap:.2rem; text-align:center; justify-self:center; }
.brand-logo { max-height:78px; max-width:min(560px,60vw); transition:max-height .3s ease; }
.site-header.is-stuck .brand-logo { max-height:52px; }
.site-header.is-stuck .masthead-crest img { max-height:64px; }
.site-header.is-stuck .masthead-badge img { max-height:54px; }

/* The accreditation line is pink and prominent on the reference site
   (.head-line { color:#c6265b; font-size:22px; font-weight:700 }). */
.brand-affiliation {
  display:block;
  font-family:var(--font-body);
  font-size:clamp(.9rem,1.5vw,1.25rem);
  font-weight:700;
  letter-spacing:0;
  color:var(--cps-third);
  margin-top:.2rem;
}

/* =====================================================================
   CLOUD BAND — the scalloped teal shapes below the masthead
   ===================================================================== */
.cloud-band {
  height:170px;
  margin-bottom:-96px;      /* the slider frame overlaps it */
  background:url("../img/clouds.svg") center bottom / 100% 100% no-repeat;
  pointer-events:none;
}
@media (max-width:880px) { .cloud-band { height:96px; margin-bottom:-52px; } }

/* =====================================================================
   MENU — a full-height panel sliding in from the right, at every width
   ===================================================================== */
.burger { display:inline-flex !important; }
.main-nav {
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px,88vw);
  margin-left:0;
  /* The green is painted by the ::before ellipse below, so the panel's own
     box stays invisible and the visible shape is an oval sweep, not a
     rectangle — as on the reference. */
  background:transparent;
  padding:1.1rem 0 2rem;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  visibility:hidden;
  z-index:1300;
}
/* A huge translucent ellipse, much taller than the screen, whose left arc
   forms the panel's curved edge. rgba(16,95,76,.9) blends to ~#2F7260 over
   the cream page: white text reads at 4.6:1. */
.main-nav::before {
  content:"";
  position:absolute;
  /* Wide enough that the arc clears every row (including the darkened
     active one) at all heights, while hugging the panel like the original
     shape — the bulge over the page stays modest. */
  top:-32%; bottom:-32%; left:-12%; right:-46%;
  border-radius:50%;
  background:rgba(14,88,70,.96);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:-12px 0 36px rgba(0,0,0,.2);
  z-index:-1;
  pointer-events:none;
}
.main-nav.is-open { transform:none; visibility:visible; }

.main-nav .nav-mobile-head { display:flex; justify-content:space-between; align-items:center;
  padding:.4rem 1.4rem 1rem; color:#fff; font-family:var(--font-body); font-weight:600; }
.main-nav .nav-close { background:transparent; border:0; color:#fff; font-size:1.4rem; }

.main-nav .nav-list { display:block; padding:0 .5rem; }
.main-nav .nav-list > li { position:relative; border-bottom:1px solid rgba(255,255,255,.4); }
.main-nav .nav-list > li > a,
.main-nav .nav-list ul a {
  display:block;
  padding:.85rem 1.1rem;
  text-align:right;
  color:#fff;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:500;
  border-radius:0;
}
.main-nav .nav-list > li > a:hover,
.main-nav .nav-list ul a:hover { background:rgba(255,255,255,.12); color:var(--cps-secondary); }
/* The current page reads in amber, as on the reference. A darkened row,
   not an amber wash: amber text on the lightened wash measured 2.4:1,
   while on the darkened row it reaches 5.6:1. */
.main-nav .nav-list > li.is-active > a,
.main-nav .nav-list > li > a[aria-current="page"] {
  background:rgba(0,0,0,.28);
  color:var(--cps-secondary);
  box-shadow:inset -4px 0 0 var(--cps-secondary);
}
/* Submenus. The base sheet hid them with opacity — an invisible block that
   still held its height — and re-showed them on hover in the wrong place.
   Reset all of that; each breakpoint below decides how they appear. */
.main-nav .nav-list .submenu {
  display:none;
  opacity:1; visibility:visible; transform:none;
  background:#0d5a47;
  padding:.2rem 0; margin:0;
  box-shadow:none; border:0; border-radius:0;
  max-height:none;
}
.main-nav .nav-list .submenu a { font-size:.9rem; padding-right:2rem; }

/* Phones: an inline accordion, opened by the arrow. The panel scrolls, so a
   flyout would be clipped; the ellipse is skipped for a solid panel too. */
@media (max-width:880px) {
  .main-nav { overflow-y:auto; background:rgba(14,88,70,.97); }
  .main-nav::before { display:none; }
  .main-nav .nav-list .submenu { position:static; }
  .main-nav .nav-list .submenu.is-open { display:block; }
}

/* Desktop: the submenu flies out to the LEFT of the panel on hover, as on
   the reference site. Click on the arrow pins it open for keyboards. */
@media (min-width:881px) {
  .main-nav .nav-list > li > a { padding:.62rem 1.1rem; }
  /* The panel cannot scroll on desktop (flyouts would be clipped), so it
     must fit the screen. The foot buttons duplicate the Admissions side
     tab and the topbar phone number — dropped here. */
  .main-nav .nav-mobile-foot { display:none; }
  .main-nav { padding-bottom:1rem; }
  .main-nav .nav-list .submenu {
    position:absolute;
    right:calc(100% - .5rem); top:0; left:auto;
    min-width:300px; max-width:360px;
    border-radius:12px;
    box-shadow:0 14px 34px rgba(0,0,0,.32);
    padding:.4rem 0;
  }
  .main-nav .nav-list > li:hover > .submenu,
  .main-nav .nav-list > li:focus-within > .submenu,
  .main-nav .nav-list .submenu.is-open { display:block; }
  .main-nav .nav-list .submenu a {
    text-align:left;
    padding:.6rem 1.2rem;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  .main-nav .nav-list .submenu li:last-child a { border-bottom:0; }
}
.main-nav .submenu-toggle {
  position:absolute; left:.6rem; top:.55rem; right:auto;
  background:transparent; border:0; color:#fff;
  width:32px; height:32px; display:grid; place-items:center;
  transition:transform .25s var(--ease);
}
.main-nav .submenu-toggle[aria-expanded="true"] { transform:rotate(180deg); }
.main-nav .caret { display:none; }

/* Plain right-aligned labels, as on the reference — no module icons. */
.main-nav .nav-list a > i:not(.caret) { display:none; }

/* The panel needs a backdrop so the page behind is obviously inert. */
/* Invisible but still catches the click-outside-to-close. The reference
   leaves the page undimmed behind its translucent menu. */
.nav-backdrop {
  position:fixed; inset:0; z-index:1250;
  background:transparent;
}

@media (max-width:880px) { .masthead-badge { display:none; } }

/* 160px of masthead is a fifth of a phone screen. Tighten it there. */
@media (max-width:880px) {
  :root { --header-h:96px; }
  .header-inner { gap:.6rem; }
  .brand-logo { max-height:44px; }
  .site-header.is-stuck .brand-logo { max-height:36px; }
  .masthead-crest img { max-height:56px; }
  .site-header.is-stuck .masthead-crest img { max-height:44px; }
}

.nav-list > li > a {
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  color:var(--cps-primary);
  border-radius:4px;
  padding:.5rem .58rem;
}
.nav-list > li > a:hover,
.nav-list > li > a[aria-current="page"] { background:var(--cps-primary); color:#fff; }

.dropdown-panel, .nav-list ul {
  border-radius:0 0 8px 8px;
  border-top:3px solid var(--cps-secondary);
  box-shadow:var(--sh);
}

/* =====================================================================
   HERO — a teal field, scalloped top and bottom, with the slider
   floating on it inside a white frame. This is the reference site's
   arrangement: the colour runs behind the picture rather than the
   picture bleeding to the window edge.
   ===================================================================== */
.hero {
  position:relative;
  /* The cloud field is the client's own artwork (header-bg1.svg): scalloped
     top and bottom, the darker echo layers and the thought bubbles are all
     part of the drawing, so no constructed strips are needed. */
  background:url("../img/hero-clouds.svg") center top / 100% 100% no-repeat;
  padding:5.5rem 0 11rem;
  margin-top:0;
  overflow:visible;
}
.hero-clouds, .hero-scallop { display:none; }

/* The white picture frame. */
.hero-frame {
  position:relative;
  z-index:3;
  max-width:min(1180px,88vw);
  margin:6.5rem auto 0;
  border:6px solid #fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.16);
  background:#fff;
}
.hero-slides { border-radius:16px; overflow:hidden; }

/* The base theme sized slides for a full-bleed banner with copy on top.
   Here the photograph IS the slide, so the image drives the height and
   everything else is switched off. */
.hero, .hero-slide { min-height:0; }
.hero-slide { align-items:stretch; }
.hero-media { position:static; }
.hero-media img { height:clamp(280px,40vw,520px); object-fit:cover; width:100%; }
.hero-slides::after { display:none; }                  /* white base fade */
.hero-slide.is-active .hero-media img { animation:none; }  /* Ken Burns zoom */
.hero-speckle { display:none; }

/* Arrows sit under the frame on the left, as on the reference site. */
.hero-controls {
  position:relative; z-index:3;
  max-width:min(1180px,88vw);
  margin:1.1rem auto 0;
  display:flex; gap:.8rem;
}
.hero-arrow {
  position:static;
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--cps-primary);
  border:0; display:grid; place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
  transform:none;
}
.hero-arrow:hover { background:var(--cps-secondary); color:var(--cps-primary); transform:none; }

.hero-dots {
  position:relative; z-index:3;
  max-width:min(1180px,88vw);
  margin:1rem auto 0;
  display:flex; gap:.5rem; justify-content:flex-end;
}

@media (max-width:880px) {
  .hero { padding-bottom:4.5rem; }
  .hero-frame { margin-top:3.4rem; border-width:4px; border-radius:16px; }
  .hero-clouds { height:86px; }
  .hero-scallop { height:76px; }
}

/* =====================================================================
   SIDE RAILS — the reference site's fixed edge furniture
   ===================================================================== */

/* Accessibility toolbar, left. */
.a11y-bar {
  position:fixed; left:0; top:22%; z-index:1200;
  display:flex; flex-direction:column;
}
.a11y-bar button {
  width:42px; height:42px;
  border:0; border-bottom:1px solid rgba(255,255,255,.25);
  background:var(--cps-primary); color:#fff;
  font-size:1rem; line-height:1;
  display:grid; place-items:center;
  transition:background .2s var(--ease);
}
.a11y-bar button:first-child { border-radius:0 6px 0 0; }
.a11y-bar button:last-child  { border-radius:0 0 6px 0; border-bottom:0; }
.a11y-bar button:hover,
.a11y-bar button[aria-pressed="true"] { background:var(--cps-secondary); color:var(--cps-primary); }
.a11y-bar.is-collapsed button + button { display:none; }
@media (max-width:880px) { .a11y-bar { top:auto; bottom:96px; } }

/* Vertical tabs on the right edge. */
.side-tabs { position:fixed; right:0; top:30%; z-index:1150; display:flex; flex-direction:column; gap:10px; }
.side-tabs a {
  writing-mode:vertical-rl;
  padding:16px 9px;
  border-radius:8px 0 0 8px;
  font-family:var(--font-body);
  font-size:.8rem; font-weight:600;
  color:#fff; background:var(--cps-primary);
  box-shadow:-2px 2px 8px rgba(0,0,0,.18);
  transition:padding-right .2s var(--ease);
}
/* Deeper than the reference's #ff6b00 / #199d7f: at 12.8px the label needs
   4.5:1, which those two only reach at 2.9 and 3.4. */
.side-tabs a:nth-child(2) { background:var(--coral-deep); }
.side-tabs a:nth-child(3) { background:var(--grass-dark); }
.side-tabs a:hover { padding-right:15px; color:#fff; }
@media (max-width:880px) { .side-tabs { display:none; } }

/* Social rail, lower left. */
.social-rail { position:fixed; left:0; bottom:16%; z-index:1150; list-style:none; margin:0; padding:0; }
.social-rail li a {
  display:grid; place-items:center;
  width:42px; height:42px;
  color:#fff; background:var(--cps-primary);
  border-bottom:1px solid rgba(255,255,255,.25);
  transition:width .2s var(--ease);
}
.social-rail li:first-child a { border-radius:0 6px 0 0; }
.social-rail li:last-child a  { border-radius:0 0 6px 0; border-bottom:0; }
.social-rail li a:hover { width:54px; background:var(--cps-secondary); color:var(--cps-primary); }
@media (max-width:880px) { .social-rail { display:none; } }

/* =====================================================================
   SCROLL-IN ANIMATION  (the reference site's WOW fadeIn)
   ===================================================================== */
.reveal { opacity:0; transform:translateY(26px); }
.reveal.is-in { opacity:1; transform:none; transition:opacity .75s var(--ease), transform .75s var(--ease); }
@media (prefers-reduced-motion:reduce) {
  .reveal, .reveal.is-in { opacity:1; transform:none; transition:none; }
}

/* --------------------------------------------------------- sections */
.section { padding:3rem 0; }
.section-alt, .section-tint { background:var(--paper); }

.card, .news-card, .event-card, .facility-card, .activity-card,
.class-card, .video-card, .download-card, .faculty-card {
  border-radius:var(--r);
  border:1px solid var(--line);
  box-shadow:none;
  background:var(--paper);
}
.card:hover, .news-card:hover, .event-card:hover, .facility-card:hover,
.activity-card:hover, .class-card:hover, .faculty-card:hover {
  transform:none; box-shadow:var(--sh); border-color:var(--sky-soft);
}

/* "Dive into Academics" tiles. */
.stage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stage-tile { text-align:center; }
.stage-tile img { border-radius:20px; width:100%; aspect-ratio:3/2; object-fit:cover; }
.stage-tile p { margin:.7rem 0 0; font-weight:600; color:var(--cps-primary); font-size:1.05rem; }
.stage-tile .stage-age { color:var(--ink-faint); font-size:.82rem; }
.stage-initial {
  display:grid; place-items:center; aspect-ratio:3/2; border-radius:20px;
  background:var(--sky-soft); color:var(--cps-primary);
  font-family:var(--font-head); font-size:2rem;
}
@media (max-width:860px) { .stage-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .stage-grid { grid-template-columns:1fr; } }

/* "Our Guiding Force". */
.leader-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.leader-card { border-radius:var(--r); padding:1.4rem; text-align:center; }
.leader-card img,
.leader-initial {
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  margin:0 auto .8rem; display:grid; place-items:center;
  background:var(--sky-soft); color:var(--cps-primary);
  font-size:2.4rem; font-family:var(--font-head);
}
.leader-card h3 { margin:0 0 .2rem; font-size:1.12rem; }
.leader-card .leader-role { margin:0; font-size:.85rem; font-weight:600; color:var(--coral-deep); }
@media (max-width:1000px) { .leader-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px)  { .leader-grid { grid-template-columns:1fr; max-width:380px; margin-inline:auto; } }

/* ----------------------------------------------------------- footer */
.site-footer { background:var(--grass-dark); color:#fff; }
.site-footer h2, .site-footer h3 {
  color:#ffc85d; font-family:var(--font-body); font-weight:400; font-size:25px;
}
.site-footer a, .site-footer p, .site-footer address, .site-footer li {
  color:#fff; font-family:var(--font-body);
}
.site-footer a { transition:all ease .2s; }
.site-footer a:hover { color:var(--cps-secondary); letter-spacing:1.2px; }
.footer-bottom { background:rgba(0,0,0,.16); }
.footer-social a { background:rgba(255,255,255,.16); color:#fff; }
.footer-social a:hover { background:var(--cps-secondary); color:var(--cps-primary); }

/* ------------------------------------------------------------ misc */
.page-banner, .banner { background:var(--cps-primary); }
.breadcrumbs, .breadcrumbs a { color:rgba(255,255,255,.92); }
.chip { border-radius:4px; border:1px solid var(--line); }
.chip-active { background:var(--cps-primary); border-color:var(--cps-primary); color:#fff; }
.eyebrow, .section-eyebrow, .kicker { color:var(--coral-deep); }
.float-whatsapp { border-radius:50%; }
.to-top { border-radius:4px; background:var(--cps-primary); }

/* Accessibility toolbar states, applied to <html>. */
html.a11y-contrast { filter:contrast(1.45); }
html.a11y-gray { filter:grayscale(1); }
html.a11y-underline a { text-decoration:underline !important; }

/* =====================================================================
   CLIENT CHANGE-LIST (December review)
   ===================================================================== */

/* 1. No blue band across the top — the reference has none. */
.topbar { display:none; }

/* 3+4. Social rail: pink, and sitting at the top of the cloud area. */
.social-rail { top:calc(var(--header-h) + 56px); bottom:auto; }
.social-rail li a {
  width:46px; height:44px;
  background:#d94f7e;
  border-bottom:1px solid rgba(255,255,255,.35);
  border-radius:0;
}
.social-rail li:first-child a { border-radius:0 10px 0 0; }
.social-rail li:last-child a  { border-radius:0 0 10px 0; border-bottom:0; }
.social-rail li a:hover { width:58px; background:var(--cps-third); color:#fff; }

/* 5+7. Right-edge tabs: reference colours, roomier spacing, hover shift. */
.side-tabs { gap:16px; top:24%; }
.side-tabs a {
  padding:22px 11px;
  font-size:.85rem;
  border-radius:10px 0 0 10px;
  background:var(--cps-primary);
  transition:padding-right .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.side-tabs a:nth-child(2) {
  background:var(--cps-secondary);
  color:var(--cps-primary);            /* white on amber is unreadable */
}
.side-tabs a:nth-child(3) { background:var(--cps-primary); }
.side-tabs a:hover {
  padding-right:18px;
  background:var(--cps-third);
  color:#fff;
}

/* 6. "May I Help You" bubble and a round to-top, bottom right. */
.may-help {
  position:fixed; right:18px; bottom:92px; z-index:1150;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.7em 1.1em;
  border-radius:16px 16px 2px 16px;
  background:var(--cps-primary); color:#fff;
  font-family:var(--font-body); font-size:.88rem; font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.may-help:hover { background:var(--cps-third); color:#fff; }
.to-top {
  right:18px; bottom:26px;
  width:48px; height:48px; border-radius:50%;
  background:var(--cps-primary); color:#fff;
  border:2px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
@media (max-width:880px) { .may-help { display:none; } }

/* Band 3: no white boxes — the lists sit straight on the orange, per the
   client's note. Bold white with a soft shadow to keep the labels legible
   on the reference's own #ff6b00. */
.news-panel {
  background:transparent;
  box-shadow:none;
  padding:0;
  border-radius:0;
}
.news-panel-head { border-bottom-color:rgba(255,255,255,.55); }
.news-panel-head h3 { color:#fff; text-shadow:0 1px 6px rgba(90,30,0,.45); }
.panel-icon { background:rgba(255,255,255,.9); }
.panel-track li { border-bottom-color:rgba(255,255,255,.35); }
.panel-track a {
  color:#fff; font-weight:600;
  text-shadow:0 1px 4px rgba(90,30,0,.45);
}
.panel-track a:hover { color:var(--cps-secondary); }
.panel-track time, .panel-meta { color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(90,30,0,.4); }
.panel-meta .tag { background:rgba(255,255,255,.9); }
.news-panel-foot { border-top:0; }
.news-panel-foot .link-more { color:#fff; font-weight:700; }
.news-panel-foot .link-more:hover { color:var(--cps-secondary); }

/* Bands 4 + 8: colour-splash backdrops. */
.section-classes, .section-testimonials {
  background-image:url("../img/splash.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Band 5: the awards band, a size shorter. */
.section.band.section-awards { padding:5.5rem 0 6rem; }

/* Band 6: Learning Spaces strip. */
.spaces-strip {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1.6rem 2.2rem;
}
.space-chip {
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  width:108px; text-align:center;
}
.space-icon {
  display:grid; place-items:center;
  width:76px; height:76px; border-radius:50%;
  color:var(--cps-primary); font-size:1.6rem;
  box-shadow:0 4px 12px rgba(39,58,173,.14);
  transition:transform .2s var(--ease);
}
.space-chip:hover .space-icon { transform:translateY(-4px); }
.space-name { font-size:.82rem; font-weight:600; color:var(--ink); line-height:1.3; }

/* Band 9: alumni JOIN US button — amber on the pink band. */
.btn-sun {
  background:var(--cps-secondary);
  border-color:var(--cps-secondary);
  color:var(--cps-primary);
  font-weight:700;
  letter-spacing:.06em;
}
.btn-sun:hover { background:#fff; border-color:#fff; color:var(--cps-third); }
.section-alumni { padding-bottom:9rem; }

/* Band 11: partner logo strip. */
.partners-strip {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2rem 3rem;
}
.partner-logo { margin:0; }
.partner-logo img {
  max-height:88px; width:auto;
  background:#fff; border-radius:10px; padding:.6rem .9rem;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

/* Welcome band (band 2): three columns, tour film, pencils. */
.welcome-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:2.4rem;
}
@media (max-width:960px) { .welcome-grid { grid-template-columns:1fr; max-width:620px; margin-inline:auto; } }
.welcome-col h3 { color:var(--cps-primary); margin-bottom:.6rem; }
.welcome-tour-head { margin-top:1.4rem; }
.welcome-tour {
  position:relative; display:block; width:100%; max-width:340px;
  border:0; padding:0; border-radius:14px; overflow:hidden; cursor:pointer;
  box-shadow:0 8px 22px rgba(39,58,173,.18);
}
.welcome-tour img { width:100%; display:block; }
.welcome-tour .video-play {
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:2.2rem;
  background:rgba(20,30,60,.28);
}
.welcome-vision { position:relative; }
.welcome-pencils { margin-top:.8rem; }

/* The menu now holds 19 top-level items; tighter rows keep it on one screen. */
@media (min-width:881px) {
  .main-nav { padding-top:.6rem; }
  .main-nav .nav-list > li > a { padding:.33rem 1.1rem; font-size:.9rem; }
  .main-nav .nav-mobile-head { padding-bottom:.4rem; }
}

/* =====================================================================
   "MAY I HELP YOU" GUIDED CHAT
   ===================================================================== */
.cps-chat {
  position:fixed; right:18px; bottom:150px; z-index:1400;
  width:min(320px, calc(100vw - 36px));
  display:flex; flex-direction:column;
  max-height:min(480px, calc(100vh - 180px));
  background:#ffe9c0;
  border-radius:16px;
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  overflow:hidden;
  font-family:var(--font-body);
}

.chat-head {
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem;
  background:#fff7e6;
  border-bottom:2px solid rgba(198,38,91,.18);
}
.chat-head strong { color:var(--cps-third); font-size:1rem; flex:1; }
.chat-close {
  border:0; background:transparent; color:var(--ink);
  font-size:1.05rem; cursor:pointer; padding:.2rem .35rem;
}
.chat-close:hover { color:var(--cps-third); }

/* The mascot bobs, and its eyes blink — the "logo animation". */
.chat-bot svg { display:block; animation:botBob 2.6s ease-in-out infinite; }
.bot-eyes { transform-origin:24px 24px; animation:botBlink 4.2s infinite; }
@keyframes botBob   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes botBlink { 0%, 92%, 100% { transform:scaleY(1); } 95% { transform:scaleY(.12); } }
@media (prefers-reduced-motion:reduce) { .chat-bot svg, .bot-eyes { animation:none; } }

.chat-log {
  flex:1; overflow-y:auto;
  padding:.9rem .8rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.chat-row { display:flex; align-items:flex-end; gap:.45rem; }
.chat-row.user { justify-content:flex-end; }
.chat-avatar {
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cps-primary); color:#fff; font-size:.7rem;
}
.chat-bubble {
  max-width:82%;
  background:#fffdf6;
  border-radius:12px;
  padding:.55rem .75rem;
  font-size:.86rem; line-height:1.5; color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  animation:bubbleIn .28s var(--ease) both;
}
.chat-row.user .chat-bubble { background:var(--cps-primary); color:#fff; }
.chat-bubble a { color:var(--cps-primary); font-weight:600; text-decoration:underline; }
.chat-row.user .chat-bubble a { color:#fff; }
@keyframes bubbleIn { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .chat-bubble { animation:none; } }

.chat-options { display:flex; flex-wrap:wrap; gap:.45rem; padding-left:32px; }
.chat-options button {
  border:1.5px solid var(--cps-primary);
  background:#fffdf6; color:var(--cps-primary);
  border-radius:9px; padding:.4rem .8rem;
  font:600 .84rem var(--font-body);
  cursor:pointer;
  animation:bubbleIn .28s var(--ease) both;
}
.chat-options button:hover { background:var(--cps-primary); color:#fff; }

.chat-input {
  display:flex; gap:.5rem;
  padding:.6rem .7rem;
  background:#fff7e6;
  border-top:2px solid rgba(198,38,91,.14);
}
.chat-input input {
  flex:1; border:0; border-radius:9px;
  padding:.55rem .8rem;
  font:400 .86rem var(--font-body);
  background:#fffdf6; color:var(--ink);
}
.chat-input input:focus { outline:2px solid var(--cps-primary); }
.chat-input button {
  border:0; border-radius:9px;
  width:42px;
  background:var(--cps-primary); color:#fff;
  cursor:pointer; font-size:.95rem;
}
.chat-input button:hover { background:var(--cps-third); }

@media (max-width:880px) {
  .may-help { display:inline-flex; }        /* the bubble now opens the chat */
  .cps-chat { bottom:120px; }
}

/* On desktop the right edge belongs to the side tabs; the bubble and the
   chat panel sit just left of that column instead of underneath it. */
@media (min-width:881px) {
  .may-help { right:78px; bottom:84px; }
  .cps-chat { right:78px; bottom:142px; }
}

/* =====================================================================
   RED-PEN REVIEW FIXES
   ===================================================================== */

/* Side tabs: more breathing room, and the labels rotated so they read
   facing the outside edge, as marked on the notes. */
.side-tabs { gap:26px; }
.side-tabs a {
  padding:26px 12px;
  transform:rotate(180deg);
  border-radius:0 10px 10px 0;
}
.side-tabs a:hover { padding-right:12px; padding-left:19px; }

/* Pink social buttons: separated, each its own rounded chip. */
.social-rail li + li { margin-top:9px; }
.social-rail li a,
.social-rail li:first-child a,
.social-rail li:last-child a {
  border-radius:0 10px 10px 0;
  border-bottom:0;
}

/* Band heights, as marked: news and awards both shorter. */
.section.band.section-news   { padding:5.5rem 0 6rem; }
.section.band.section-awards { padding:4.5rem 0 5rem; }

/* The bubble is now the client's own "May I Help You" image. */
.may-help {
  background:transparent !important;
  box-shadow:none;
  padding:0;
  border:0;
  border-radius:0;
}
.may-help img { display:block; width:150px; height:auto; }
.may-help:hover img { transform:scale(1.04); transition:transform .2s var(--ease); }

/* The boy and girl stand either side of the open chat panel. */
.cps-chat { overflow:visible; }
.chat-kid { position:absolute; bottom:34px; width:auto; pointer-events:none; }
.chat-kid-boy  { left:-64px;  height:120px; }
.chat-kid-girl { right:-60px; height:124px; }
@media (max-width:880px) { .chat-kid { display:none; } }

/* The chat panel corners must stay rounded with overflow visible. */
.cps-chat > .chat-head { border-radius:16px 16px 0 0; }
.cps-chat > .chat-input { border-radius:0 0 16px 16px; }

/* =====================================================================
   PARTNERS SPLASH + ALUMNI PHOTO WALL
   ===================================================================== */

/* The partners strip sits on the colour burst, like the reference. */
.section-partners {
  background-image:url("../img/splash.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(1400px,100%) auto;
}

/* Alumni band: the network drawing over the pink, photos in droplets.
   .section.band's background shorthand carries (0,2,0), so this needs the
   full three-class selector to keep its image. */
.section.band.section-alumni {
  background-color:var(--cps-third);
  background-image:url("../img/alumni-net.png");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}
.alumni-wall {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2.2rem 3rem;
  margin-top:2.4rem;
}
.alumni-drop {
  display:block;
  width:170px; height:170px;
  border-radius:50% 50% 50% 6px;   /* the droplet shape */
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  background:#fff;
}
.alumni-drop img { width:100%; height:100%; object-fit:cover; display:block; }
/* stagger alternate photos, like the reference's scattered wall */
.alumni-drop:nth-child(even) { transform:translateY(34px); border-radius:50% 50% 6px 50%; }
@media (max-width:880px) {
  .alumni-drop { width:128px; height:128px; }
  .alumni-drop:nth-child(even) { transform:translateY(20px); }
}
.section.band.section-alumni { padding-bottom:11rem; }

/* =====================================================================
   PARTNERS CAROUSEL + SOCIAL CHIP SHAPE (reference details)
   ===================================================================== */

/* Sliding logo row: five visible, the rest scroll through. */
.partners-viewport { overflow:hidden; }
.partners-viewport .partners-strip {
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:2.5rem;
  will-change:transform;
}
.partners-viewport .partner-logo { flex:0 0 calc((100% - 10rem) / 5); }
.partners-viewport .partner-logo img {
  width:100%; height:110px; object-fit:contain;
  background:#fff; border-radius:8px; padding:.7rem 1rem;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
@media (max-width:1100px) { .partners-viewport .partner-logo { flex-basis:calc((100% - 5rem)/3); } }
@media (max-width:640px)  { .partners-viewport .partner-logo { flex-basis:calc((100% - 2.5rem)/2); } }

.partners-nav {
  display:flex; justify-content:flex-end; gap:.7rem;
  margin:-2.2rem 0 1.2rem;
}
.partners-nav .slider-arrow {
  width:42px; height:42px; border-radius:50%;
  background:#fff; color:var(--cps-primary); border:0;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.partners-nav .slider-arrow:hover { background:var(--cps-secondary); }

/* Social chips shaped like the reference: rounded squares with a sharp
   bottom-left tail, floated just off the edge. */
.social-rail { left:10px; }
.social-rail li a,
.social-rail li:first-child a,
.social-rail li:last-child a {
  width:46px; height:46px;
  border-radius:14px 14px 14px 0;
  border-bottom:0;
  font-size:1.15rem;
}
.social-rail li a:hover { width:46px; transform:translateX(6px); }

/* =====================================================================
   SPLASH SIZING + SOCIAL RAIL POSITION (screenshot comparison round)
   ===================================================================== */

/* The reference's burst sits centred behind the heading and tiles at a
   contained width — not stretched edge-to-edge over the whole band. */
.section-classes, .section-testimonials {
  background-image:url("../img/splash.webp");
  background-repeat:no-repeat;
  background-position:center 34%;
  background-size:min(1250px, 94%) auto;
}
.section-partners {
  background-image:url("../img/splash.webp");
  background-repeat:no-repeat;
  background-position:center 58%;
  background-size:min(1250px, 94%) auto;
}

/* Social chips: lower down the screen, clear of the accessibility button,
   floated a little off the edge, with the reference's slide-out name label. */
ul.social-rail { left:10px; top:36%; bottom:auto; z-index:1180; }
ul.social-rail li a { position:relative; overflow:visible; }
ul.social-rail li a::after {
  content:attr(title);
  position:absolute;
  right:calc(100% + 2px); top:50%;
  transform:translateY(-50%) scaleX(0);
  transform-origin:right center;
  background:#d94f7e; color:#fff;
  font:600 .8rem var(--font-body);
  padding:.45em 1em;
  border-radius:8px 0 0 8px;
  white-space:nowrap;
  transition:transform .2s var(--ease);
  pointer-events:none;
}
ul.social-rail li a:hover::after { transform:translateY(-50%) scaleX(1); }
/* the label slides LEFT out of the chip — flip its side to the right */
ul.social-rail li a::after { right:auto; left:calc(100% + 2px); border-radius:0 8px 8px 0; transform-origin:left center; }

/* Social chips flush to the screen edge, like the accessibility button. */
ul.social-rail { left:0; }
ul.social-rail li a,
ul.social-rail li:first-child a,
ul.social-rail li:last-child a {
  border-radius:0 14px 14px 0;
}

/* =====================================================================
   VISION PENCILS RIGHT + SOCIAL HOVER FLUSH (screenshot round 2)
   ===================================================================== */

/* Pencils anchored to the right of the Vision column, tall like the
   reference; the text keeps room beside them. */
.welcome-vision { position:relative; padding-right:170px; min-height:320px; }
.welcome-vision .welcome-pencils {
  position:absolute;
  right:0; top:44px;
  width:156px; height:auto;
  margin:0;
}
@media (max-width:960px) {
  .welcome-vision { padding-right:130px; min-height:0; }
  .welcome-vision .welcome-pencils { width:110px; top:30px; }
}

/* Chips never leave the edge — the old hover nudge is retired — and the
   whole rail sits a little lower. The label reads data-name now that the
   title attribute (and its browser tooltip) is gone. */
ul.social-rail { top:42%; }
ul.social-rail li a:hover { transform:none; width:46px; }
ul.social-rail li a::after { content:attr(data-name); }

/* =====================================================================
   ROUND 4 — the Dec 16-18 review notes
   ===================================================================== */

/* Band 3: shorter, three columns, lists that step up one row at a time. */
.section.band.section-news { padding:4rem 0 4.4rem; }
.section-news .section-head { margin-bottom:1.6rem; }
.news-duo.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px) { .news-duo.cols-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:880px)  { .news-duo.cols-3 { grid-template-columns:1fr; } }
.news-panel-list { max-height:none; }
.news-panel-list.js-colstep { overflow:hidden; }   /* height set by the stepper */
.news-panel-list.js-colstep .panel-track { will-change:transform; }

/* Band 4: hover effect on the four stage tiles. */
.stage-tile { transition:transform .25s var(--ease); }
.stage-tile img { transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.stage-tile:hover { transform:translateY(-8px); }
.stage-tile:hover img {
  transform:scale(1.04);
  box-shadow:0 14px 30px rgba(39,58,173,.22);
}

/* Band 5: shorter again. */
.section.band.section-awards { padding:3.8rem 0 4.2rem; }

/* Band 6: seven learning spaces on screen, the rest slide through. */
.spaces-viewport { overflow:hidden; }
.spaces-viewport .spaces-strip {
  flex-wrap:nowrap; justify-content:flex-start;
  will-change:transform;
}
.spaces-viewport .space-chip { flex:0 0 calc((100% - 6 * 2.2rem) / 7); width:auto; }
@media (max-width:1100px) { .spaces-viewport .space-chip { flex-basis:calc((100% - 4 * 2.2rem)/5); } }
@media (max-width:760px)  { .spaces-viewport .space-chip { flex-basis:calc((100% - 2 * 2.2rem)/3); } }

/* Band 7: portraits as rounded rectangles, not circles. */
.leader-card img,
.leader-initial {
  width:150px; height:190px;
  border-radius:14px;
  object-fit:cover; object-position:top center;
}

/* Band 8: Testimonials — four white cards in the Guiding Force style. */
.testi-viewport { overflow:hidden; }
.testi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.testi-grid.testi-track {
  display:flex; flex-wrap:nowrap; gap:1.5rem;
  will-change:transform;
}
.testi-track .testi-card { flex:0 0 calc((100% - 3 * 1.5rem) / 4); }
@media (max-width:1080px) {
  .testi-grid { grid-template-columns:1fr 1fr; }
  .testi-track .testi-card { flex-basis:calc((100% - 1.5rem)/2); }
}
@media (max-width:640px) {
  .testi-grid { grid-template-columns:1fr; }
  .testi-track .testi-card { flex-basis:100%; }
}
.testi-card {
  display:flex; flex-direction:column; gap:.9rem;
  margin:0; padding:1.4rem;
  background:#fff; border-radius:var(--r);
  box-shadow:0 6px 18px rgba(39,58,173,.10);
}
.testi-card blockquote {
  margin:0; padding:0; border:0;
  font-size:.92rem; line-height:1.55; color:var(--ink);
  flex:1;
}
.testi-card blockquote::before { content:"\201C"; color:var(--cps-secondary); font-size:1.6rem; line-height:0; margin-right:.15rem; font-family:var(--font-head); }
.testi-card figcaption { display:flex; align-items:center; gap:.7rem; }
.testi-card figcaption img,
.testi-card .avatar {
  width:56px; height:56px; border-radius:14px; object-fit:cover;
  display:grid; place-items:center; flex-shrink:0;
  background:var(--sky-soft); color:var(--cps-primary);
  font-family:var(--font-head); font-size:1.4rem;
}
.testi-card figcaption strong { display:block; font-size:.95rem; color:var(--cps-primary); }
.testi-card figcaption small { display:block; font-size:.78rem; color:var(--ink-faint); }
.testi-card .link-more { font-size:.85rem; font-weight:600; color:var(--cps-third); }

/* Band 10: four videos across, like the reference. */
.section-student-videos .video-grid { grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px) { .section-student-videos .video-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px)  { .section-student-videos .video-grid { grid-template-columns:1fr; } }

/* Band 11: a little taller. */
.section.section-partners { padding:4.4rem 0 4.7rem; }

/* Inner-page banner: light band, white-washed pencils on the left, one
   image on the right; heading and crumbs sit left, in ink on cream. */
.page-banner, .banner {
  position:relative;
  background:var(--cps-cream, #fffaf3);
  padding:2.6rem 0 2.8rem;
  overflow:hidden;
  border-bottom:1px solid rgba(39,58,173,.10);
}
.page-banner::before, .page-banner::after { content:none; }
.banner-pencils {
  position:absolute; left:-30px; top:50%;
  width:min(420px,46vw); height:150px;
  transform:translateY(-50%);
  background:url("../../uploads/images/welcome-pencils.png") left center / contain no-repeat;
  opacity:.18;                                  /* the white-washed look */
  pointer-events:none;
}
.banner-inner {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.banner-text { text-align:left; }
.page-banner h1 { color:var(--cps-primary); text-shadow:none; margin-bottom:.25em; }
.page-banner .banner-sub { color:var(--ink); margin:0 0 .9rem; max-width:640px; }
.page-banner .crumbs ol { justify-content:flex-start; }
.page-banner .crumbs a { color:var(--cps-third); }
.page-banner .crumbs a:hover { color:var(--cps-primary); }
.page-banner .crumbs span[aria-current] { color:var(--cps-primary); }
.banner-photo { flex:0 0 auto; }
.banner-photo img {
  display:block; width:min(300px,32vw); height:150px;
  object-fit:cover; border-radius:16px;
  box-shadow:0 10px 24px rgba(39,58,173,.18);
}
@media (max-width:700px) {
  .banner-photo { display:none; }
  .banner-pencils { width:70vw; opacity:.12; }
}

/* Footer: the Site Visitors boxes. */
.footer-visitors-head { margin-top:1.4rem; }
.footer-visitors { display:flex; gap:.3rem; margin:0; }
.footer-visitors span {
  display:grid; place-items:center;
  width:30px; height:38px;
  background:linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%);
  border:1px solid #000;
  border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.35);
  font-weight:700; font-size:1.05rem; color:#fff;
  font-variant-numeric:tabular-nums;
}

/* The reference has no floating confetti chips — the "colourful dots"
   the review keeps striking out. Off everywhere in this theme. */
.confetti, .confetti-bg::before, .confetti-bg::after { display:none !important; }
.confetti-bg { background-image:none !important; }

/* No coloured-dot underline beneath headings either (bands 3 & 4 notes). */
.section-head.centred h2::after { content:none; }

/* =====================================================================
   ROUND 5 — the October change document (menu parity with the reference)
   ===================================================================== */

/* 1. The header must stay pinned while scrolling. style.css already makes
   it sticky; body{overflow-x:hidden} turned body into a scroll container
   and silently broke it. clip clips without breaking sticky. */
body { overflow-x:clip; }

/* 7. The reference's banner on every internal page: the page's photo under
   a warm overlay, white title, breadcrumb beneath, torn edge below. */
.page-banner, .banner {
  position:relative;
  padding:3.4rem 0 4.2rem;
  background:
    linear-gradient(100deg, rgba(198,38,91,.92) 0%, rgba(198,38,91,.72) 38%, rgba(198,38,91,.28) 100%),
    var(--banner, linear-gradient(120deg, #c6265b, #8e1b42)) center 35% / cover no-repeat;
  border-bottom:0;
  overflow:visible;
}
.page-banner::before { content:none; }
.page-banner::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:26px;
  background:url("../img/torn-bottom.svg") bottom center / 100% 100% no-repeat;
  pointer-events:none;
}
.banner-pencils, .banner-photo { display:none; }
.page-banner .banner-inner { display:block; text-align:left; }
.page-banner h1 {
  color:#fff; text-shadow:0 2px 14px rgba(90,10,40,.5);
  text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom:.3em;
}
.page-banner .banner-sub { display:none; }
.page-banner .crumbs ol { justify-content:flex-start; }
.page-banner .crumbs a { color:#ffe3ee; text-decoration:underline; }
.page-banner .crumbs a:hover { color:#fff; }
.page-banner .crumbs span[aria-current] { color:#fff; }

/* 4. Side tabs sit centred on the screen edge. */
.side-tabs { top:50%; transform:translateY(-50%); }

/* 5. Scroll-top must never hide behind the tabs or the chat. */
.to-top { z-index:1250; right:16px; bottom:18px; }

/* 6. A smaller chatbot bubble. */
.may-help img { width:112px; }
.may-help { right:70px; bottom:66px; }
.chat-kid { transform:scale(.82); transform-origin:bottom; }

/* Deeper flyouts: Achievement → Student's Achievement → its eight pages. */
@media (min-width:881px) {
  .main-nav .nav-list > li > a { padding:.5rem 1.1rem; }
  .main-nav .submenu li { position:relative; }
  .main-nav .submenu li:hover > .submenu,
  .main-nav .submenu li:focus-within > .submenu { display:block; }
  .main-nav .submenu .submenu { right:calc(100% + .3rem); top:-.4rem; }
}

/* Tabbed pages (Facilities, Activities, Dive into Academics). */
.vtabs { display:grid; grid-template-columns:280px minmax(0,1fr); gap:2rem; align-items:start; }
.vtabs-nav { display:flex; flex-direction:column; gap:.55rem; position:sticky; top:110px; }
.vtab-link {
  text-align:left; border:0; cursor:pointer;
  padding:.78rem 1.1rem; border-radius:10px;
  background:var(--coral, #ff6868); background:#ef6a6a; color:#fff;
  font-weight:600; font-size:.93rem; line-height:1.35;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.vtab-link:hover { transform:translateX(4px); }
.vtab-link.is-active { background:var(--cps-secondary); color:var(--navy); }
.vtab-pane { display:none; }
.vtab-pane.is-active { display:block; }
.vtab-pane h2 { color:var(--cps-third); }
@media (max-width:880px) {
  .vtabs { grid-template-columns:1fr; }
  .vtabs-nav { position:static; flex-direction:row; flex-wrap:wrap; }
  .vtab-link { flex:1 1 calc(50% - .55rem); }
}

/* Message From Directors: two portrait blocks. */
.director-block { margin-bottom:2.6rem; }
.director-block img {
  width:150px; height:190px; object-fit:cover; object-position:top center;
  border-radius:14px; box-shadow:0 8px 22px rgba(39,58,173,.18);
}
.director-block h3 { margin:.9rem 0 .15rem; color:var(--cps-primary); }

/* Testimonials page: the full wall of cards. */
.testi-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.6rem; }
@media (max-width:1080px) { .testi-page-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px)  { .testi-page-grid { grid-template-columns:1fr; } }
.testi-page-grid .testi-card:target { outline:3px solid var(--cps-secondary); outline-offset:4px; }
.centred-intro { text-align:center; max-width:760px; margin:0 auto 1rem; }

/* Community blog cards. */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:1080px) { .blog-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px)  { .blog-grid { grid-template-columns:1fr; } }
.blog-single .rich { max-width:820px; }

/* =====================================================================
   ROUND 6 — reference banner edges, rotating stationery, home button,
   see-through menu (October screenshots)
   ===================================================================== */

/* The menu's oval, more transparent like the reference — the page stays
   readable behind it. White text still reads at better than 4:1 over the
   blended green. */
.main-nav::before {
  background:rgba(14,88,70,.82);
}

/* Inner-page banner: the client's own torn-paper strips, cream over the
   photo — orangebg.svg along the top, orangedwn.svg along the bottom. */
.page-banner { padding:5.2rem 0 5.8rem; }
/* Natural-size strips, exactly as the reference places them: 83px proud of
   the banner on each side, torn fringe dipping ~60px into the photo, drop
   shadow falling on the cream. Wider screens stretch them slightly. */
.page-banner::before,
.page-banner::after {
  content:"";
  position:absolute; left:-52px;
  width:max(2081px, calc(100% + 104px));
  pointer-events:none;
}
.page-banner::before {
  top:-83px; bottom:auto; height:145px; opacity:1;
  background:url("../img/banner-torn-top.svg") top left / 100% 145px no-repeat;
}
.page-banner::after {
  top:auto; bottom:-83px; right:auto; height:149px; opacity:1;
  background:url("../img/banner-torn-bottom.svg") bottom left / 100% 149px no-repeat;
}

/* Round home button on inner pages, beside the burger. */
.home-btn {
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:#e97613; color:#fff; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.home-btn:hover { background:var(--cps-primary); color:#fff; transform:translateY(-2px); }

/* Faint stationery behind inner-page content — the reference's own
   recipe: the ring sits at screen centre and pulses while it rotates
   (grows from nothing to double size and back over one 40s turn); a
   pencil cluster peeks in from each side at half opacity. z-index:-1
   keeps them behind all content but above the page background. */
.inner-decor { pointer-events:none; }
.inner-decor img { pointer-events:none; }
.decor-ring {
  position:fixed; z-index:-1;
  top:50%; left:50%;
  width:100%; height:100%;
  object-fit:contain;
  opacity:.5;
  transform:translate(-50%,-50%);
  animation:decorSpin 40s linear infinite;
}
.decor-pencil1 {
  position:fixed; z-index:-1;
  left:-68px; top:49%;
  width:200px; height:200px; object-fit:cover;
  opacity:.6;
}
.decor-pencil2 {
  position:fixed; z-index:-1;
  right:-68px; top:60%;
  width:200px; height:200px; object-fit:cover;
  opacity:.6;
  transform:rotate(180deg);
}
@keyframes decorSpin {
  0%   { transform:translate(-50%,-50%) rotate(0deg)   scale(1); }
  50%  { transform:translate(-50%,-50%) rotate(180deg) scale(1.25); }
  100% { transform:translate(-50%,-50%) rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .decor-ring { animation:none; }
}
@media (max-width:880px) {
  .page-banner { padding:4.4rem 0 5rem; }
}

/* Learning Spaces: the reference's own flat icon images inside the circles. */
.space-icon img { width:44px; height:44px; object-fit:contain; display:block; }

/* =====================================================================
   ROUND 7 — October PDF review
   ===================================================================== */

/* F] Digital Partners: larger logos. */
.partners-viewport .partner-logo img { height:140px; }