/* =====================================================================
   City Pride School, Pradhikaran — playful design system
   Bright, rounded and full of character. Built for children and the
   parents who choose for them. No framework, no build step.
   ===================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
  /* --- the crayon box: vivid, saturated, cheerful ------------------ */
  --sky:#2bb3e8;      --sky-dark:#1c8fbd;   --sky-soft:#dff3fc;
  --sun:#ffc02e;      --sun-dark:#e0a005;   --sun-soft:#fff4d6;
  --coral:#ff6f4f;    --coral-dark:#e2512f; --coral-soft:#ffe6df;
  --bubble:#ff5d8f;   --bubble-dark:#df3d70;--bubble-soft:#ffe2ec;
  --grass:#3fc978;    --grass-dark:#24a259; --grass-soft:#dcf7e7;
  --grape:#9166ff;    --grape-dark:#7245e0; --grape-soft:#eee6ff;
  --tangerine:#ff9838;--tangerine-dark:#e07a17; --tangerine-soft:#ffeeda;
  --mint:#25c2c2;     --mint-dark:#0f9d9d;  --mint-soft:#d9f7f7;

  /* --- structure --------------------------------------------------- */
  --navy:#173a63;          /* headings + deep sections   */
  --navy-deep:#0e2745;
  --ink:#2b3a4f;           /* body text                  */
  --ink-soft:#55677f;
  --ink-faint:#7d8ea5;
  --line:#e7edf5;
  --line-soft:#f1f5fa;
  --paper:#ffffff;
  --cream:#fffaf2;         /* warm page tint             */
  --tint:#f3f9fe;          /* cool section tint          */

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

  /* --- shape & motion ---------------------------------------------- */
  --r-sm:12px; --r:20px; --r-lg:28px; --r-xl:38px; --r-pill:999px;
  --blob-a:58% 42% 45% 55% / 48% 52% 48% 52%;
  --blob-b:42% 58% 60% 40% / 55% 45% 55% 45%;

  --sh-sm:0 3px 10px rgba(23,58,99,.07);
  --sh:0 10px 28px rgba(23,58,99,.10);
  --sh-lg:0 22px 55px rgba(23,58,99,.16);
  --sh-pop:0 14px 0 -6px rgba(23,58,99,.10);

  --ease:cubic-bezier(.34,1.4,.5,1);      /* springy */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t:.28s var(--ease);

  --container:1320px;
  --font-head:"Baloo 2","Segoe UI",system-ui,sans-serif;
  --font-body:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --header-h:92px;
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px;
  /* clips the off-screen mobile drawer; body overflow-x cannot clip a fixed child */
  overflow-x:clip;
}
body {
  margin:0; font-family:var(--font-body); font-size:17px; line-height:1.75;
  color:var(--ink); background:var(--paper); overflow-x:hidden;
}
img,svg,video,iframe { max-width:100%; }
img { height:auto; display:block; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:800; line-height:1.15; color:var(--navy); margin:0 0 .5em; }
h1 { font-size:clamp(2.1rem,4.6vw,3.4rem); }
h2 { font-size:clamp(1.75rem,3.4vw,2.6rem); }
h3 { font-size:clamp(1.2rem,2vw,1.55rem); }
p { margin:0 0 1.1em; }
a { color:var(--sky-dark); text-decoration:none; transition:color var(--t); }
a:hover { color:var(--coral); }
ul,ol { margin:0 0 1.1em; padding-left:1.3em; }
address { font-style:normal; }
button { font:inherit; cursor:pointer; }
mark { background:var(--sun-soft); color:inherit; padding:.05em .3em; border-radius:6px; }
hr { border:0; border-top:3px dotted var(--line); margin:1.8rem 0; }

:focus-visible { outline:3px solid var(--grape); outline-offset:3px; border-radius:6px; }

/* The [hidden] attribute must always win — components below set an explicit
   display, which would otherwise leave overlays stuck on screen. */
[hidden] { display:none !important; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--grape); color:#fff; padding:14px 24px; border-radius:0 0 var(--r) 0; font-weight:800;
}
.skip-link:focus { left:0; color:#fff; }

.container { width:min(100% - 2.4rem, var(--container)); margin-inline:auto; }
.section { position:relative; padding:clamp(3.4rem,6.5vw,6rem) 0; }
.section.tinted { background:var(--tint); }
.muted { color:var(--ink-faint); }
.small { font-size:.9rem; }
.centred { text-align:center; }
.block { display:block; }
.nowrap { white-space:nowrap; }

/* ============================================================ buttons */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.8em; border:0; border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:.01em;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn:hover { transform:translateY(-4px) scale(1.03); }
.btn:active { transform:translateY(-1px) scale(.99); }

.btn-primary { background:var(--sky); color:#fff; box-shadow:0 6px 0 var(--sky-dark), 0 14px 26px rgba(43,179,232,.32); }
.btn-primary:hover { background:var(--sky); color:#fff; box-shadow:0 9px 0 var(--sky-dark), 0 20px 34px rgba(43,179,232,.4); }
.btn-accent { background:var(--sun); color:var(--navy); box-shadow:0 6px 0 var(--sun-dark), 0 14px 26px rgba(255,192,46,.36); }
.btn-accent:hover { background:var(--sun); color:var(--navy); box-shadow:0 9px 0 var(--sun-dark), 0 20px 34px rgba(255,192,46,.46); }
.btn-pink { background:var(--bubble); color:#fff; box-shadow:0 6px 0 var(--bubble-dark), 0 14px 26px rgba(255,93,143,.34); }
.btn-light { background:#fff; color:var(--navy); box-shadow:0 5px 0 var(--line), 0 10px 22px rgba(23,58,99,.1); }
.btn-light:hover { background:#fff; color:var(--sky-dark); box-shadow:0 8px 0 var(--line), 0 16px 30px rgba(23,58,99,.14); }
.btn-ghost { background:rgba(255,255,255,.16); color:#fff; box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.75); backdrop-filter:blur(4px); }
.btn-ghost:hover { background:#fff; color:var(--navy); box-shadow:inset 0 0 0 2.5px #fff, 0 14px 28px rgba(0,0,0,.2); }
.btn-lg { padding:1em 2.2em; font-size:1.1rem; }
.btn-sm { padding:.55em 1.25em; font-size:.9rem; }
.btn-block { display:flex; width:100%; }
.btn + .btn { margin-left:.55rem; }
.btn-block + .btn-block { margin-left:0; margin-top:.65rem; }

.link-more {
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-head); font-weight:700; font-size:.98rem; color:var(--sky-dark);
}
.link-more i { transition:transform var(--t); }
.link-more:hover { color:var(--coral); }
.link-more:hover i { transform:translateX(5px); }

.section-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.section-actions.centred { justify-content:center; }
.section-actions .btn + .btn { margin-left:0; }

/* ------------------------------------------------------- section head */
.section-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.3rem; margin-bottom:2.8rem; }
.section-head.centred { display:block; text-align:center; max-width:800px; margin-inline:auto; }
.section-head h2 { margin-bottom:.3em; }
/* hand-drawn style underline */
.section-head.centred h2::after {
  content:""; display:block; width:120px; height:12px; margin:.5rem auto 0;
  background:
    radial-gradient(circle at 10px 6px, var(--coral) 5px, transparent 5.5px),
    radial-gradient(circle at 34px 6px, var(--sun) 5px, transparent 5.5px),
    radial-gradient(circle at 58px 6px, var(--grass) 5px, transparent 5.5px),
    radial-gradient(circle at 82px 6px, var(--sky) 5px, transparent 5.5px),
    radial-gradient(circle at 106px 6px, var(--grape) 5px, transparent 5.5px);
}
.section-head p { color:var(--ink-soft); margin:0; font-size:1.06rem; }
.section-head.light h2, .section-head.light p { color:#fff; }
.section-head.light.centred h2::after { filter:brightness(1.35); }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:700; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--coral-dark);
  background:var(--coral-soft); padding:.42em 1.15em; border-radius:var(--r-pill); margin-bottom:.9rem;
}
.eyebrow::before { content:"\2726"; color:var(--sun-dark); }
.block-title {
  font-size:1.6rem; margin:0 0 1.3rem; padding-bottom:.55rem;
  border-bottom:4px dotted var(--sky-soft); display:flex; align-items:center; gap:.55rem;
}
.block-title i { color:var(--coral); }
.lede { font-size:1.16rem; color:var(--ink-soft); font-weight:600; }

/* decorative floaters reused across sections */
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.confetti span {
  position:absolute; display:grid; place-items:center;
  width:54px; height:54px; border-radius:18px; font-size:1.3rem; color:#fff;
  animation:bob 6s ease-in-out infinite;
}
.confetti span:nth-child(1) { top:12%; left:4%;  background:var(--coral);  animation-delay:0s;   transform:rotate(-12deg); }
.confetti span:nth-child(2) { top:64%; left:8%;  background:var(--grass);  animation-delay:1.2s; transform:rotate(9deg); }
.confetti span:nth-child(3) { top:20%; right:5%; background:var(--grape);  animation-delay:2.1s; transform:rotate(14deg); }
.confetti span:nth-child(4) { top:72%; right:9%; background:var(--sun);    animation-delay:3.4s; color:var(--navy); transform:rotate(-8deg); }
@keyframes bob { 0%,100% { translate:0 0; } 50% { translate:0 -18px; } }

/* =====================================================================
   HEADER
   ===================================================================== */
.topbar {
  background:linear-gradient(90deg,var(--grape),var(--sky) 45%,var(--mint));
  color:#fff; font-size:.9rem; font-weight:600;
}
.topbar-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; padding:.55rem 0; }
.topbar-notice { margin:0; display:flex; align-items:center; gap:.5em; }
.topbar-notice i { color:var(--sun); }
.topbar-contact { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.topbar a { color:#fff; }
.topbar a:hover { color:var(--sun); }
.topbar-social { display:inline-flex; gap:.45rem; padding-left:.7rem; border-left:2px solid rgba(255,255,255,.3); }
.topbar-social a { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.18); }
.topbar-social a:hover { background:#fff; color:var(--sky-dark); }

.site-header { position:sticky; top:0; z-index:900; background:#fff; transition:box-shadow var(--t); }
.site-header.is-stuck { box-shadow:0 6px 26px rgba(23,58,99,.13); }
.header-inner { display:flex; align-items:center; gap:1.2rem; min-height:var(--header-h); }

.brand { display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.brand-logo { max-height:56px; width:auto; }
.brand-mark {
  display:grid; place-items:center; width:58px; height:58px; border-radius:20px;
  background:linear-gradient(140deg,var(--sky),var(--grape)); color:#fff; font-size:1.65rem;
  box-shadow:0 6px 0 var(--sky-dark);
  transform:rotate(-6deg); transition:transform var(--t);
}
.brand:hover .brand-mark { transform:rotate(6deg) scale(1.06); }
.brand-words strong { display:block; font-family:var(--font-head); font-size:1.2rem; color:var(--navy); line-height:1.12; }
.brand-words small {
  display:block; font-family:var(--font-head); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--coral);
}
/* The logo lockup already spells out the school name, so the words beside it are
   only the motto. Below 1200px the menu needs that space more than the motto does. */
@media (max-width:1200px) { .brand-words small { display:none; } }

.main-nav { margin-left:auto; }
.nav-list { display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0; }
.nav-list > li { position:relative; }
.nav-list > li > a {
  display:flex; align-items:center; gap:.4em; padding:.65rem .8rem; border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:700; font-size:.97rem; color:var(--navy); white-space:nowrap;
}
.nav-list > li > a i:not(.caret) { font-size:.85em; color:var(--sky); transition:transform var(--t); }
.nav-list > li > a .caret { font-size:.55em; opacity:.5; transition:transform var(--t); }
.nav-list > li > a:hover { background:var(--sky-soft); color:var(--sky-dark); }
.nav-list > li > a:hover i:not(.caret) { transform:translateY(-3px) rotate(-8deg); }
.nav-list > li.is-active > a { background:var(--sun); color:var(--navy); }
.nav-list > li.is-active > a i:not(.caret) { color:var(--coral-dark); }
.nav-list > li:hover > a .caret { transform:rotate(180deg); }
.nav-list a.nav-cta { background:var(--coral); color:#fff; }

/* cycle a different accent per top-level item, like a paint set */
.nav-list > li:nth-child(6n+1) > a:hover { background:var(--sky-soft);   color:var(--sky-dark); }
.nav-list > li:nth-child(6n+2) > a:hover { background:var(--coral-soft); color:var(--coral-dark); }
.nav-list > li:nth-child(6n+3) > a:hover { background:var(--grass-soft); color:var(--grass-dark); }
.nav-list > li:nth-child(6n+4) > a:hover { background:var(--grape-soft); color:var(--grape-dark); }
.nav-list > li:nth-child(6n+5) > a:hover { background:var(--bubble-soft);color:var(--bubble-dark); }
.nav-list > li:nth-child(6n+6) > a:hover { background:var(--mint-soft);  color:var(--mint-dark); }

.submenu {
  position:absolute; top:calc(100% + 10px); left:0; min-width:262px; list-style:none;
  margin:0; padding:.6rem; background:#fff; border-radius:var(--r); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); transition:all var(--t); z-index:50;
  border-top:5px solid var(--sun);
}
.submenu::before {
  content:""; position:absolute; top:-11px; left:26px; border:7px solid transparent; border-bottom-color:var(--sun);
}
.nav-list > li:hover > .submenu,
.nav-list > li:focus-within > .submenu { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.submenu li { position:relative; }
.submenu a {
  display:flex; align-items:center; gap:.6em; padding:.62rem .9rem; border-radius:var(--r-sm);
  font-size:.94rem; font-weight:600; color:var(--ink-soft);
}
.submenu a::before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--sky-soft); flex-shrink:0; transition:all var(--t);
}
.submenu a:hover { background:var(--sky-soft); color:var(--sky-dark); padding-left:1.15rem; }
.submenu a:hover::before { background:var(--coral); transform:scale(1.4); }
.submenu .submenu { top:-.6rem; left:100%; }
.submenu-toggle { display:none; }

/* Items at the right-hand end must open leftwards, otherwise their drop-down
   sticks out past the viewport and creates a horizontal scrollbar. */
.nav-list > li:last-child > .submenu,
.nav-list > li:nth-last-child(2) > .submenu,
.nav-more > .submenu { left:auto; right:0; }
.nav-list > li:last-child > .submenu::before,
.nav-list > li:nth-last-child(2) > .submenu::before,
.nav-more > .submenu::before { left:auto; right:26px; }
.nav-more > .submenu .submenu { left:auto; right:100%; }

.header-actions { display:flex; align-items:center; gap:.6rem; }
.icon-btn {
  display:grid; place-items:center; width:46px; height:46px; border:0; border-radius:50%;
  background:var(--sky-soft); color:var(--sky-dark); transition:all var(--t);
}
.icon-btn:hover { background:var(--sky); color:#fff; transform:rotate(8deg) scale(1.08); }
.burger { display:none; width:50px; height:46px; border:0; background:var(--sun); border-radius:16px; padding:12px 11px; }
.burger span { display:block; height:3.5px; background:var(--navy); border-radius:3px; transition:all var(--t); }
.burger span + span { margin-top:5px; }
.burger.is-open span:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; }
.burger.is-open span:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }

.search-drawer { background:var(--sky-soft); padding:1.2rem 0; }
.search-drawer form { display:flex; gap:.6rem; }
.search-drawer input {
  flex:1; padding:.9rem 1.4rem; border:3px solid #fff; border-radius:var(--r-pill);
  font-size:1rem; font-family:inherit; background:#fff; box-shadow:var(--sh-sm);
}
.search-drawer input:focus { outline:none; border-color:var(--sky); }

.nav-mobile-head, .nav-mobile-foot { display:none; }
.nav-backdrop { position:fixed; inset:0; background:rgba(14,39,69,.55); z-index:940; }

/* =====================================================================
   HERO — full-bleed photographic slider
   ===================================================================== */
.hero {
  position:relative; overflow:hidden; isolation:isolate; background:var(--navy-deep);
  min-height:clamp(540px,84vh,880px);
}

/* --- slides: all stacked in one grid cell so they cross-fade in place --- */
.hero-slides { position:relative; z-index:1; display:grid; min-height:inherit; }
.hero-slide {
  grid-area:1 / 1; position:relative; display:grid; align-items:center;
  min-height:clamp(540px,84vh,880px);
  opacity:0; visibility:hidden; transition:opacity .9s var(--ease-soft);
}
.hero-slide.is-active { opacity:1; visibility:visible; }

/* --- the photograph fills the whole band --- */
.hero-media { position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* slow drift so a still photo still feels alive */
.hero-slide.is-active .hero-media img { animation:kenburns 11s ease-out both; }
@keyframes kenburns { from { transform:scale(1.09); } to { transform:scale(1); } }

/* --- brand-coloured scrim, not a flat grey wash --- */
.hero-scrim { position:absolute; inset:0; z-index:1; }
.hero-scrim::before {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(14,39,69,.93) 0%,
      rgba(14,39,69,.78) 30%,
      rgba(14,39,69,.42) 58%,
      rgba(14,39,69,.14) 100%);
}
/* a wash of the slide's own colour across the right-hand side */
.hero-scrim::after {
  content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.5;
  background:linear-gradient(100deg, transparent 34%, var(--tone,var(--sky)) 100%);
}
/* fade the base of the photo into the wave */
.hero-slides::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,.55), transparent);
}

/* --- copy --- */
.hero-inner { position:relative; z-index:3; width:min(100% - 2.4rem, var(--container)); }
.hero-copy { max-width:44rem; padding:clamp(2rem,5vw,4rem) 0 clamp(4.5rem,8vw,6rem); }

.hero-badge {
  display:inline-flex; align-items:center; gap:.55em; margin:0 0 1.2rem;
  padding:.5em 1.3em; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);
  font-family:var(--font-head); font-weight:700; font-size:.94rem;
}
.hero-badge i { color:var(--sun); }
.hero-slide.is-active .hero-badge { animation:heroUp .8s var(--ease) both; }

.hero-title {
  font-family:var(--font-head); font-weight:800; color:#fff; margin:0 0 .45em;
  font-size:clamp(2.2rem,5.4vw,4.1rem); line-height:1.04;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero-title .pop { position:relative; color:var(--sun); white-space:nowrap; }
.hero-title .pop::after {
  content:""; position:absolute; left:-2%; right:-2%; bottom:.04em; height:.16em;
  background:var(--sun); border-radius:var(--r-pill); opacity:.45; transform:rotate(-1deg);
}
.hero-slide.is-active .hero-title { animation:heroUp .8s .1s var(--ease) both; }

.hero-sub {
  color:#eaf4fd; font-size:clamp(1.05rem,1.9vw,1.32rem); font-weight:600;
  max-width:40ch; margin:0 0 2.2rem; text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.hero-slide.is-active .hero-sub { animation:heroUp .8s .2s var(--ease) both; }

.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-actions .btn + .btn { margin-left:0; }
.hero-slide.is-active .hero-actions { animation:heroUp .8s .3s var(--ease) both; }
@keyframes heroUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

/* --- floating stickers, kept out of the text column --- */
.hero-floats { position:absolute; inset:0; z-index:4; pointer-events:none; }
.hero-float {
  position:absolute; display:grid; place-items:center; width:70px; height:70px;
  border-radius:var(--blob-a); color:#fff; font-size:1.5rem; border:4px solid rgba(255,255,255,.9);
  box-shadow:0 14px 32px rgba(0,0,0,.28); animation:floaty 7s ease-in-out infinite;
}
.hero-float.f1 { top:16%; right:9%;  background:var(--coral); }
.hero-float.f2 { top:52%; right:20%; background:var(--sun); color:var(--navy); animation-delay:1.6s; }
.hero-float.f3 { bottom:24%; right:6%; background:var(--grass); animation-delay:3.1s; }
@keyframes floaty { 0%,100% { translate:0 0; rotate:-5deg; } 50% { translate:0 -22px; rotate:6deg; } }

/* --- controls --- */
.hero-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:56px; height:56px; border:0; border-radius:var(--blob-a);
  background:rgba(255,255,255,.2); color:#fff; font-size:1.15rem;
  backdrop-filter:blur(6px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  transition:all var(--t);
}
.hero-arrow:hover { background:var(--sun); color:var(--navy); transform:translateY(-50%) scale(1.12) rotate(-6deg); }
.hero-arrow.prev { left:1.4rem; } .hero-arrow.next { right:1.4rem; }

.hero-dots {
  position:absolute; left:50%; bottom:clamp(3.6rem,6vw,5rem); transform:translateX(-50%);
  z-index:6; display:flex; gap:.55rem;
}
.hero-dot {
  position:relative; width:38px; height:10px; padding:0; border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.38); overflow:hidden; transition:all var(--t);
}
.hero-dot:hover { background:rgba(255,255,255,.6); }
.hero-dot .dot-fill { position:absolute; inset:0; width:0; background:var(--sun); border-radius:inherit; }
.hero-dot.is-active { width:66px; background:rgba(255,255,255,.3); }
.hero-dot.is-active .dot-fill { animation:dotFill var(--hero-delay,6500ms) linear forwards; }
@keyframes dotFill { from { width:0; } to { width:100%; } }

/* wavy dividers */
.hero-wave, .banner-wave, .footer-wave { position:absolute; left:0; right:0; line-height:0; z-index:5; }
.hero-wave { bottom:-1px; } .hero-wave svg { width:100%; height:105px; display:block; fill:#fff; }
.banner-wave { bottom:-1px; } .banner-wave svg { width:100%; height:80px; display:block; fill:#fff; }
.footer-wave { top:-1px; } .footer-wave svg { width:100%; height:80px; display:block; fill:#fff; }
.footer-wave { top:-1px; } .footer-wave svg { width:100%; height:80px; display:block; fill:#fff; }
/* =====================================================================
   PAGE BANNER
   ===================================================================== */
.page-banner {
  position:relative; padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,7.5vw,6rem);
  background:linear-gradient(125deg,var(--grape),var(--sky) 60%,var(--mint));
  color:#fff; text-align:center; overflow:hidden;
}
.page-banner::after {
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 12% 20%, rgba(255,255,255,.22) 0 3px, transparent 3.5px) 0 0/34px 34px;
}
.page-banner.has-image::before {
  content:""; position:absolute; inset:0; background-image:var(--banner);
  background-size:cover; background-position:center; opacity:.28;
}
.page-banner .container { position:relative; z-index:2; }
.page-banner h1 { color:#fff; margin-bottom:.28em; text-shadow:0 3px 20px rgba(0,0,0,.26); }
.banner-sub { color:#eaf5fd; max-width:740px; margin:0 auto 1.1rem; font-size:1.08rem; font-weight:600; }

.crumbs ol { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; list-style:none; margin:0; padding:0; font-size:.93rem; font-weight:600; }
.crumbs li + li::before { content:"\203A"; margin-right:.5rem; opacity:.65; }
.crumbs a { color:#dcefff; } .crumbs a:hover { color:var(--sun); }
.crumbs span[aria-current] { color:var(--sun); font-weight:800; }

/* =====================================================================
   QUICK INFO
   ===================================================================== */
/* Quick-info cards.
   With no heading the whole block lifts onto the hero's white wave.
   With a heading it sits below the hero, so the words stay on white
   and never land on the photograph. */
.section-quick { position:relative; z-index:10; padding-top:clamp(2.5rem,5vw,4rem); }
.section-quick.is-overlap { padding-top:0; margin-top:-4rem; }
.quick-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.quick-card {
  display:flex; align-items:center; gap:1rem; padding:1.35rem 1.4rem;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh);
  border-bottom:6px solid var(--tone,var(--sky)); transition:all var(--t); color:inherit;
}
a.quick-card:hover { transform:translateY(-10px) rotate(-1.5deg); box-shadow:var(--sh-lg); color:inherit; }
.quick-icon {
  display:grid; place-items:center; flex-shrink:0; width:60px; height:60px;
  border-radius:var(--blob-a); font-size:1.45rem; background:var(--tone,var(--sky)); color:#fff;
  transition:border-radius .6s var(--ease-soft), transform var(--t);
}
a.quick-card:hover .quick-icon { border-radius:var(--blob-b); transform:scale(1.08) rotate(-8deg); }
.quick-body { display:block; min-width:0; }
.quick-body strong { display:block; font-family:var(--font-head); font-size:1.08rem; color:var(--navy); }
.quick-body small { display:block; color:var(--ink-faint); font-size:.88rem; }
.quick-go { margin-left:auto; color:var(--tone,var(--sky)); opacity:.35; transition:all var(--t); }
a.quick-card:hover .quick-go { opacity:1; transform:translateX(5px); }

/* shared colour tones */
.tone-primary { --tone:var(--sky);      --tone-soft:var(--sky-soft);    --tone-dark:var(--sky-dark); }
.tone-accent  { --tone:var(--sun);      --tone-soft:var(--sun-soft);    --tone-dark:var(--sun-dark); }
.tone-green   { --tone:var(--grass);    --tone-soft:var(--grass-soft);  --tone-dark:var(--grass-dark); }
.tone-pink    { --tone:var(--bubble);   --tone-soft:var(--bubble-soft); --tone-dark:var(--bubble-dark); }
.tone-purple  { --tone:var(--grape);    --tone-soft:var(--grape-soft);  --tone-dark:var(--grape-dark); }
.tone-orange  { --tone:var(--tangerine);--tone-soft:var(--tangerine-soft);--tone-dark:var(--tangerine-dark); }
.tone-teal    { --tone:var(--mint);     --tone-soft:var(--mint-soft);   --tone-dark:var(--mint-dark); }

/* =====================================================================
   ABOUT
   ===================================================================== */
.section-about { background:var(--cream); }
.about-grid { display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr 1fr; align-items:center; }
.about-media { position:relative; }
.about-media img {
  border-radius:var(--blob-a); box-shadow:var(--sh-lg); width:100%; object-fit:cover; aspect-ratio:4/3;
  transition:border-radius .9s var(--ease-soft);
}
.about-media:hover img { border-radius:var(--blob-b); }
.about-media::before {
  content:""; position:absolute; inset:-22px -22px auto auto; width:170px; height:170px; z-index:-1;
  background:radial-gradient(circle, var(--sun) 3px, transparent 3.5px) 0 0/20px 20px; opacity:.85;
}
.about-media::after {
  content:""; position:absolute; left:-28px; bottom:-18px; width:120px; height:120px; z-index:-1;
  border-radius:var(--blob-b); background:var(--mint-soft);
}
.about-badge {
  position:absolute; right:-14px; bottom:-14px; display:grid; place-items:center; text-align:center;
  width:110px; height:110px; border-radius:50%; font-size:2.2rem; color:#fff;
  background:linear-gradient(140deg,var(--coral),var(--bubble)); box-shadow:0 12px 30px rgba(255,93,143,.4);
  animation:bob 5s ease-in-out infinite;
}
.media-placeholder {
  display:grid; place-items:center; gap:.8rem; padding:3.4rem 1.5rem; text-align:center;
  min-height:320px; border:4px dashed var(--sky-soft); border-radius:var(--r-xl);
  background:#fff; color:var(--ink-faint);
}
.media-placeholder i { font-size:3.2rem; color:var(--sky-soft); }
.media-placeholder span { font-size:.94rem; max-width:290px; }

/* =====================================================================
   VISION
   ===================================================================== */
.vision-grid { display:grid; gap:2.4rem 1.7rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.vision-card {
  position:relative; padding:3.2rem 2rem 2.1rem; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh); transition:all var(--t); border:3px solid var(--sky-soft);
}
.vision-card.v1 { border-color:var(--sun-soft); }
.vision-card.v2 { border-color:var(--bubble-soft); }
.vision-card:hover { transform:translateY(-8px) rotate(1deg); box-shadow:var(--sh-lg); }
.vision-icon {
  position:absolute; top:-32px; left:50%; translate:-50% 0; display:grid; place-items:center;
  width:68px; height:68px; border-radius:var(--blob-a); font-size:1.7rem; color:#fff;
  background:linear-gradient(140deg,var(--sky),var(--grape)); box-shadow:0 10px 24px rgba(43,179,232,.35);
}
.vision-card.v1 .vision-icon { background:linear-gradient(140deg,var(--sun),var(--tangerine)); box-shadow:0 10px 24px rgba(255,192,46,.42); }
.vision-card.v2 .vision-icon { background:linear-gradient(140deg,var(--bubble),var(--coral)); box-shadow:0 10px 24px rgba(255,93,143,.4); }
.vision-card h3 { text-align:center; margin-bottom:.7em; }
.vision-card .rich { color:var(--ink-soft); font-size:1rem; }

/* =====================================================================
   COUNTERS
   ===================================================================== */
.section-counters {
  background:linear-gradient(120deg,var(--grape) 0%,var(--sky) 55%,var(--mint) 100%);
  position:relative; overflow:hidden;
}
.section-counters::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 14% 18%,rgba(255,255,255,.2),transparent 40%),
             radial-gradient(circle at 86% 82%,rgba(255,192,46,.28),transparent 42%),
             radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0 2.5px, transparent 3px) 0 0/40px 40px;
}
.section-counters .container { position:relative; z-index:2; }
.counter-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.counter-card {
  text-align:center; padding:2.3rem 1.2rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.14); border:2.5px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px); transition:all var(--t);
}
.counter-card:hover { background:rgba(255,255,255,.24); transform:translateY(-9px) rotate(-1.5deg); }
.counter-icon {
  display:grid; place-items:center; width:62px; height:62px; margin:0 auto .8rem;
  border-radius:var(--blob-a); background:var(--sun); color:var(--navy); font-size:1.5rem;
}
.counter-value { font-family:var(--font-head); font-size:clamp(2.4rem,4.8vw,3.4rem); font-weight:800; color:#fff; margin:0; line-height:1; }
.counter-label { color:#eaf5fd; margin:.5rem 0 0; font-size:1.02rem; font-weight:700; }

/* =====================================================================
   AWARDS
   ===================================================================== */
.section-awards {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--sun-soft) 100%);
}
.award-strip { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.award-item {
  position:relative; display:block; padding:.9rem; background:#fff; border-radius:var(--r);
  box-shadow:var(--sh-sm); border-bottom:5px solid var(--sun); transition:all var(--t);
}
.award-item:nth-child(4n+2) { border-bottom-color:var(--coral); }
.award-item:nth-child(4n+3) { border-bottom-color:var(--grass); }
.award-item:nth-child(4n+4) { border-bottom-color:var(--grape); }
.award-item:hover { transform:translateY(-9px) rotate(-1.5deg); box-shadow:var(--sh-lg); }
.award-item img { width:100%; height:150px; object-fit:contain; border-radius:var(--r-sm); background:#fff; }
.award-ribbon {
  position:absolute; top:-14px; right:-10px; z-index:2; display:grid; place-items:center;
  width:44px; height:44px; border-radius:var(--blob-a); font-size:1rem; color:#fff;
  background:linear-gradient(140deg,var(--coral),var(--bubble)); box-shadow:0 6px 16px rgba(255,93,143,.4);
}

/* =====================================================================
   SECTION BACKGROUND VARIETY
   Each block gets its own treatment so the page never reads as one long
   list of identical white stripes.
   ===================================================================== */

/* soft dotted paper */
.section-features {
  background:
    radial-gradient(circle at 50% 50%, rgba(43,179,232,.10) 0 2.5px, transparent 3px) 0 0/32px 32px,
    linear-gradient(180deg,#fff,var(--sky-soft));
}

/* warm cream with a big soft blob behind the photo */
.section-about::before {
  content:""; position:absolute; left:-8%; top:12%; width:44vw; height:44vw; max-width:620px; max-height:620px;
  border-radius:var(--blob-b); background:radial-gradient(circle at 35% 35%, rgba(255,192,46,.22), rgba(255,192,46,0) 68%);
  pointer-events:none;
}

/* vision sits on a pale mint field with a wavy top edge */
.section-vision { background:linear-gradient(180deg,var(--mint-soft),#fff); }

/* classes on cream + faint grid, so cards read as cards */
.section-classes {
  background:
    linear-gradient(rgba(255,111,79,.06) 1px, transparent 1px) 0 0/100% 46px,
    var(--cream);
}

/* facilities: cool tint with corner blobs */
.section-facilities { position:relative; background:var(--tint); overflow:hidden; }
.section-facilities::before,
.section-facilities::after {
  content:""; position:absolute; width:340px; height:340px; border-radius:var(--blob-a); pointer-events:none;
}
.section-facilities::before { top:-120px; right:-110px; background:rgba(145,102,255,.10); }
.section-facilities::after  { bottom:-140px; left:-120px; background:rgba(63,201,120,.12); }

/* activities on a deep tint so the photo cards pop */
.section-activities { background:linear-gradient(160deg,var(--sky-soft),var(--grape-soft)); }

/* events on plain white, kept clean between two busy blocks */
.section-events { background:#fff; }

/* news keeps the warm cream */
.section-news {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,93,143,.09) 0 2.5px, transparent 3px) 0 0/30px 30px,
    var(--cream);
}

/* gallery on white so the photographs carry the colour */
.section-gallery { background:#fff; }

/* parent corner: gentle diagonal band */
.section-parent { background:linear-gradient(115deg,#fff 0%,#fff 45%,var(--sun-soft) 45%,var(--coral-soft) 100%); }

/* contact on a cool tint */
.section-contact { background:var(--tint); }

/* =====================================================================
   FEATURES
   ===================================================================== */
.feature-grid { display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.feature-card {
  position:relative; padding:2.2rem 1.7rem; border-radius:var(--r-lg); background:#fff;
  box-shadow:var(--sh-sm); overflow:hidden; transition:all var(--t);
  border-bottom:6px solid var(--tone,var(--sky));
}
.feature-card::after {
  content:""; position:absolute; right:-46px; top:-46px; width:130px; height:130px;
  border-radius:var(--blob-a); background:var(--tone-soft,var(--sky-soft)); transition:transform .55s var(--ease-soft);
}
.feature-card:hover { transform:translateY(-10px) rotate(-1.2deg); box-shadow:var(--sh-lg); }
.feature-card:hover::after { transform:scale(3); }
.feature-icon {
  position:relative; z-index:2; display:grid; place-items:center; width:70px; height:70px;
  border-radius:var(--blob-a); margin-bottom:1.2rem; font-size:1.65rem;
  background:var(--tone,var(--sky)); color:#fff; box-shadow:0 10px 22px rgba(23,58,99,.16);
  transition:border-radius .6s var(--ease-soft), transform var(--t);
}
.feature-card:hover .feature-icon { border-radius:var(--blob-b); transform:rotate(-10deg) scale(1.08); }
.feature-card h3, .feature-card p { position:relative; z-index:2; }
.feature-card h3 { font-size:1.2rem; margin-bottom:.4em; }
.feature-card p { color:var(--ink-soft); font-size:.96rem; margin:0; }

/* =====================================================================
   CLASSES
   ===================================================================== */
.class-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); }
.class-grid.wide { grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); }
.class-card {
  background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  transition:all var(--t); border:3px solid var(--tone-soft,var(--sky-soft));
}
.class-card:hover { transform:translateY(-10px) rotate(1.2deg); box-shadow:var(--sh-lg); border-color:var(--tone,var(--sky)); }
.class-media { position:relative; display:block; aspect-ratio:16/11; background:var(--tone-soft,var(--sky-soft)); overflow:hidden; }
.class-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.class-card:hover .class-media img { transform:scale(1.09); }
.class-initial {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-head); font-size:3.2rem; font-weight:800; color:var(--tone,var(--sky)); opacity:.55;
}
.class-age {
  position:absolute; left:.9rem; bottom:.9rem; padding:.34em 1em; border-radius:var(--r-pill);
  background:var(--tone,var(--sky)); color:#fff; font-family:var(--font-head); font-size:.82rem; font-weight:700;
  box-shadow:var(--sh-sm);
}
.class-body { padding:1.3rem 1.4rem 1.6rem; }
.class-body h2, .class-body h3 { font-size:1.22rem; margin-bottom:.4em; }
.class-body h2 a, .class-body h3 a { color:var(--navy); }
.class-body h2 a:hover, .class-body h3 a:hover { color:var(--tone-dark,var(--sky-dark)); }
.class-body p { color:var(--ink-soft); font-size:.95rem; margin-bottom:1rem; }

/* =====================================================================
   FACILITIES
   ===================================================================== */
.facility-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); }
.facility-card {
  position:relative; display:block; padding:0 0 1.6rem; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh-sm); overflow:hidden; text-align:center; transition:all var(--t);
}
.facility-card:nth-child(7n+1) { --tone:var(--sky);    --tone-soft:var(--sky-soft); }
.facility-card:nth-child(7n+2) { --tone:var(--coral);  --tone-soft:var(--coral-soft); }
.facility-card:nth-child(7n+3) { --tone:var(--grass);  --tone-soft:var(--grass-soft); }
.facility-card:nth-child(7n+4) { --tone:var(--grape);  --tone-soft:var(--grape-soft); }
.facility-card:nth-child(7n+5) { --tone:var(--sun);    --tone-soft:var(--sun-soft); }
.facility-card:nth-child(7n+6) { --tone:var(--bubble); --tone-soft:var(--bubble-soft); }
.facility-card:nth-child(7n+7) { --tone:var(--mint);   --tone-soft:var(--mint-soft); }
.facility-card:hover { transform:translateY(-10px) rotate(-1.2deg); box-shadow:var(--sh-lg); }
.facility-media { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--tone-soft); }
.facility-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.facility-card:hover .facility-media img { transform:scale(1.09); }
.facility-icon {
  display:grid; place-items:center; width:66px; height:66px; margin:-33px auto 1rem;
  position:relative; z-index:2; border-radius:var(--blob-a); font-size:1.55rem; color:#fff;
  background:var(--tone,var(--sky)); box-shadow:0 10px 24px rgba(23,58,99,.2); border:4px solid #fff;
  transition:border-radius .6s var(--ease-soft), transform var(--t);
}
.facility-card:hover .facility-icon { border-radius:var(--blob-b); transform:rotate(-10deg) scale(1.07); }
.facility-card:not(:has(.facility-media)) .facility-icon { margin-top:1.8rem; }
.facility-body { display:block; padding:0 1.3rem; }
.facility-body strong { display:block; font-family:var(--font-head); font-size:1.1rem; color:var(--navy); margin-bottom:.35rem; }
.facility-body small { display:block; color:var(--ink-faint); font-size:.9rem; line-height:1.6; }

/* =====================================================================
   ACTIVITIES
   ===================================================================== */
.activity-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); }
.activity-card {
  position:relative; display:flex; align-items:flex-end; min-height:280px; padding:1.6rem;
  border-radius:var(--r-lg); overflow:hidden; color:#fff;
  background-image:var(--act-img); background-size:cover; background-position:center; transition:all var(--t);
}
.activity-card:nth-child(5n+1).no-image { background:linear-gradient(150deg,var(--sky),var(--grape)); }
.activity-card:nth-child(5n+2).no-image { background:linear-gradient(150deg,var(--coral),var(--bubble)); }
.activity-card:nth-child(5n+3).no-image { background:linear-gradient(150deg,var(--grass),var(--mint)); }
.activity-card:nth-child(5n+4).no-image { background:linear-gradient(150deg,var(--sun),var(--tangerine)); }
.activity-card:nth-child(5n+5).no-image { background:linear-gradient(150deg,var(--grape),var(--bubble)); }
.activity-card:hover { transform:translateY(-10px) rotate(1.2deg); box-shadow:var(--sh-lg); }
.activity-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(14,39,69,.9) 10%,rgba(14,39,69,.1) 70%); transition:all var(--t); }
.activity-card:hover .activity-overlay { background:linear-gradient(to top,rgba(43,179,232,.92) 12%,rgba(145,102,255,.35) 82%); }
.activity-body { position:relative; z-index:2; display:block; }
.activity-icon {
  display:grid; place-items:center; width:54px; height:54px; margin-bottom:.85rem;
  border-radius:var(--blob-a); background:var(--sun); color:var(--navy); font-size:1.25rem;
  transition:border-radius .6s var(--ease-soft), transform var(--t);
}
.activity-card:hover .activity-icon { border-radius:var(--blob-b); transform:rotate(-12deg) scale(1.1); }
.activity-body strong { display:block; font-family:var(--font-head); font-size:1.24rem; margin-bottom:.28rem; }
.activity-body small { display:block; color:#e2eefa; font-size:.9rem; line-height:1.55; }

/* =====================================================================
   SHOWCASE
   ===================================================================== */
.showcase-grid { display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fill,minmax(315px,1fr)); }
.showcase-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:all var(--t); }
.showcase-card:nth-child(4n+1) { --tone:var(--sky);   --tone-soft:var(--sky-soft); }
.showcase-card:nth-child(4n+2) { --tone:var(--coral); --tone-soft:var(--coral-soft); }
.showcase-card:nth-child(4n+3) { --tone:var(--grass); --tone-soft:var(--grass-soft); }
.showcase-card:nth-child(4n+4) { --tone:var(--grape); --tone-soft:var(--grape-soft); }
.showcase-card:hover { transform:translateY(-9px) rotate(-1deg); box-shadow:var(--sh-lg); }
.showcase-media { position:relative; display:block; aspect-ratio:16/10; background:var(--tone-soft); overflow:hidden; }
.showcase-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.showcase-card:hover .showcase-media img { transform:scale(1.08); }
.showcase-placeholder { position:absolute; inset:0; display:grid; place-items:center; font-size:3.4rem; color:var(--tone); opacity:.5; }
.showcase-badge {
  position:absolute; right:1.1rem; bottom:-26px; display:grid; place-items:center;
  width:56px; height:56px; border-radius:var(--blob-a); font-size:1.3rem; color:#fff;
  background:var(--tone,var(--sky)); box-shadow:0 8px 20px rgba(23,58,99,.22); border:4px solid #fff;
}
.showcase-body { padding:2rem 1.5rem 1.6rem; }
.showcase-body h2 { font-size:1.28rem; margin-bottom:.45em; }
.showcase-body h2 a { color:var(--navy); }
.showcase-body h2 a:hover { color:var(--tone-dark); }
.showcase-body p { color:var(--ink-soft); font-size:.96rem; margin-bottom:1rem; }

/* =====================================================================
   EVENTS
   ===================================================================== */
.event-grid { display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fill,minmax(315px,1fr)); }
.event-card {
  display:flex; flex-direction:column; background:#fff; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm); transition:all var(--t);
}
.event-card:hover { transform:translateY(-9px) rotate(1deg); box-shadow:var(--sh-lg); }
.event-media { position:relative; display:block; aspect-ratio:16/10; background:var(--sky-soft); overflow:hidden; }
.event-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.event-card:hover .event-media img { transform:scale(1.08); }
.event-placeholder { position:absolute; inset:0; display:grid; place-items:center; font-size:3.2rem; color:var(--sky); opacity:.42; }
.event-date {
  position:absolute; left:1.1rem; top:1.1rem; display:grid; place-items:center; padding:.6rem .95rem;
  border-radius:18px; background:var(--sun); color:var(--navy);
  font-family:var(--font-head); line-height:1.02; box-shadow:0 6px 0 var(--sun-dark); transform:rotate(-5deg);
}
.event-date strong { font-size:1.5rem; } .event-date small { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.event-body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.event-body h2, .event-body h3 { font-size:1.25rem; margin-bottom:.5em; }
.event-body h2 a, .event-body h3 a { color:var(--navy); }
.event-body h2 a:hover, .event-body h3 a:hover { color:var(--coral); }
.event-body p { color:var(--ink-soft); font-size:.95rem; }
.event-meta { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; list-style:none; margin:0 0 .9rem; padding:0; font-size:.88rem; color:var(--ink-faint); font-weight:600; }
.event-meta li { display:flex; align-items:center; gap:.4em; }
.event-meta i { color:var(--coral); }
.event-body .link-more { margin-top:auto; padding-top:.7rem; }

/* =====================================================================
   NEWS
   ===================================================================== */
.news-ticker {
  display:flex; align-items:center; gap:1rem; margin-bottom:2.8rem; padding:.45rem .6rem .45rem 0;
  background:#fff; border-radius:var(--r-pill); box-shadow:var(--sh); overflow:hidden;
  border:3px solid var(--bubble-soft);
}
.ticker-label {
  flex-shrink:0; display:flex; align-items:center; gap:.5em; padding:.65rem 1.5rem;
  background:linear-gradient(120deg,var(--bubble),var(--coral)); color:#fff;
  border-radius:var(--r-pill); font-family:var(--font-head); font-weight:700; font-size:.94rem;
}
.ticker-viewport { flex:1; overflow:hidden; }
.ticker-track { display:flex; gap:3.5rem; list-style:none; margin:0; padding:0; white-space:nowrap; animation:ticker 34s linear infinite; }
.news-ticker:hover .ticker-track, .ticker-track.is-paused { animation-play-state:paused; }
.ticker-track a { font-weight:700; font-size:.96rem; color:var(--ink); }
.ticker-track a:hover { color:var(--bubble-dark); }
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ticker-pause { flex-shrink:0; width:36px; height:36px; border:0; border-radius:50%; background:var(--bubble-soft); color:var(--bubble-dark); font-size:.78rem; }

.news-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.news-card { display:flex; flex-direction:column; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:all var(--t); }
.news-card:hover { transform:translateY(-9px) rotate(-1deg); box-shadow:var(--sh-lg); }
.news-card.is-featured { border:3px solid var(--sun); }
.news-media { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--sun-soft); }
.news-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.news-card:hover .news-media img { transform:scale(1.08); }
.news-body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.news-body h3, .news-body h2 { font-size:1.12rem; margin-bottom:.45em; }
.news-body h3 a, .news-body h2 a { color:var(--navy); }
.news-body h3 a:hover, .news-body h2 a:hover { color:var(--coral); }
.news-body p { color:var(--ink-soft); font-size:.93rem; }
.news-body .link-more { margin-top:auto; padding-top:.55rem; }
.news-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0 0 .6rem; font-size:.84rem; color:var(--ink-faint); font-weight:600; }
.tag {
  display:inline-flex; align-items:center; gap:.35em; padding:.3em .95em; border-radius:var(--r-pill);
  background:var(--sky-soft); color:var(--sky-dark); font-family:var(--font-head); font-size:.8rem; font-weight:700;
}
.tag-lg { font-size:.9rem; padding:.45em 1.2em; }
.tag-muted { background:var(--line-soft); color:var(--ink-faint); }

.news-list { display:grid; gap:1.4rem; }
.news-row {
  display:grid; grid-template-columns:86px 240px 1fr; gap:1.5rem; align-items:start;
  background:#fff; border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--sh-sm); transition:all var(--t);
}
.news-row:not(:has(.news-row-media)) { grid-template-columns:86px 1fr; }
.news-row:hover { box-shadow:var(--sh); transform:translateX(6px); }
.news-row-date {
  display:grid; place-items:center; align-content:center; padding:.8rem .3rem; border-radius:18px;
  background:linear-gradient(150deg,var(--sky),var(--grape)); color:#fff; font-family:var(--font-head); line-height:1.08;
  box-shadow:0 6px 0 var(--sky-dark);
}
.news-row-date strong { font-size:1.7rem; }
.news-row-date small { font-size:.76rem; text-transform:uppercase; }
.news-row-date span { font-size:.72rem; opacity:.8; }
.news-row-media { display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:3/2; }
.news-row-media img { width:100%; height:100%; object-fit:cover; }
.news-row-body h2 { font-size:1.26rem; margin-bottom:.4em; }
.news-row-body h2 a { color:var(--navy); }
.news-row-body p { color:var(--ink-soft); font-size:.96rem; margin-bottom:.6rem; }
.news-row-actions { display:flex; flex-wrap:wrap; gap:1.3rem; margin:0; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.masonry { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); grid-auto-rows:175px; gap:1.1rem; }
.masonry-item { position:relative; display:block; border-radius:var(--r); overflow:hidden; background:var(--sky-soft); box-shadow:var(--sh-sm); }
.masonry-item img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.masonry-item:hover img { transform:scale(1.1); }
.masonry-item.m0, .masonry-item.m4 { grid-row:span 2; }
.masonry-item.m3 { grid-column:span 2; }
.masonry-zoom {
  position:absolute; inset:0; display:grid; place-items:center; font-size:1.5rem; color:var(--navy);
  background:rgba(255,192,46,.82); opacity:0; transition:opacity var(--t);
}
.masonry-item:hover .masonry-zoom, .masonry-item:focus-visible .masonry-zoom { opacity:1; }
.masonry-cap {
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem .95rem .75rem; color:#fff; font-size:.87rem; font-weight:600;
  background:linear-gradient(to top,rgba(14,39,69,.9),transparent);
}

.album-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); }
.album-grid.wide { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.album-card {
  display:grid; place-items:center; gap:.45rem; padding:2.4rem 1.2rem; text-align:center;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:all var(--t);
}
.album-card:hover { transform:translateY(-8px) rotate(1.5deg); box-shadow:var(--sh-lg); }
.album-icon { display:grid; place-items:center; width:70px; height:70px; border-radius:var(--blob-a); font-size:1.6rem;
  background:linear-gradient(140deg,var(--sky),var(--grape)); color:#fff; }
.album-card strong { font-family:var(--font-head); color:var(--navy); font-size:1.08rem; }
.album-card small { color:var(--ink-faint); font-size:.88rem; }

.album-tile { display:block; border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); transition:all var(--t); }
.album-tile:hover { transform:translateY(-9px) rotate(-1.2deg); box-shadow:var(--sh-lg); }
.album-media { display:block; aspect-ratio:3/2; overflow:hidden; background:var(--sky-soft); position:relative; }
.album-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.album-tile:hover .album-media img { transform:scale(1.08); }
.album-empty { position:absolute; inset:0; display:grid; place-items:center; font-size:2.8rem; color:var(--sky); opacity:.4; }
.album-info { display:block; padding:1.1rem 1.3rem 1.35rem; }
.album-info strong { display:block; font-family:var(--font-head); font-size:1.12rem; color:var(--navy); }
.album-info small { color:var(--ink-faint); font-size:.88rem; }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; background:rgba(14,39,69,.95); padding:2rem; }
.lb-figure { margin:0; max-width:min(1100px,92vw); max-height:86vh; text-align:center; }
.lb-figure img { max-height:76vh; width:auto; margin-inline:auto; border-radius:var(--r); box-shadow:var(--sh-lg); }
.lb-figure figcaption { color:#e6f2fb; margin-top:1.1rem; font-size:.97rem; font-weight:600; }
.lb-close, .lb-prev, .lb-next {
  position:absolute; border:0; background:rgba(255,255,255,.18); color:#fff; border-radius:50%;
  width:54px; height:54px; font-size:1.4rem; transition:all var(--t);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:var(--sun); color:var(--navy); transform:scale(1.1); }
.lb-close { top:1.5rem; right:1.5rem; }
.lb-prev { left:1.5rem; top:50%; transform:translateY(-50%); }
.lb-next { right:1.5rem; top:50%; transform:translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform:translateY(-50%) scale(1.1); }

/* =====================================================================
   VIDEOS
   ===================================================================== */
.video-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fill,minmax(295px,1fr)); }
.video-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:all var(--t); }
.video-card:hover { transform:translateY(-9px) rotate(1deg); box-shadow:var(--sh-lg); }
.video-thumb { position:relative; display:block; width:100%; padding:0; border:0; aspect-ratio:16/9; background:var(--navy); overflow:hidden; }
.video-thumb img { width:100%; height:100%; object-fit:cover; opacity:.9; transition:all .7s var(--ease-soft); }
.video-card:hover .video-thumb img { opacity:1; transform:scale(1.07); }
.video-play {
  position:absolute; inset:0; margin:auto; display:grid; place-items:center; width:72px; height:72px;
  border-radius:50%; background:var(--coral); color:#fff; font-size:1.5rem; padding-left:5px;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:transform var(--t);
}
.video-card:hover .video-play { transform:scale(1.15); background:var(--sun); color:var(--navy); }
.video-body { padding:1.2rem 1.4rem 1.5rem; }
.video-body h2 { font-size:1.12rem; margin-bottom:.4em; }
.video-body p { color:var(--ink-soft); font-size:.93rem; margin:0; }

.video-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; background:rgba(14,39,69,.94); padding:1.5rem; }
.video-modal-box { width:min(960px,94vw); background:var(--navy-deep); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); }
.video-modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; }
.video-modal-head h2 { color:#fff; font-size:1.08rem; margin:0; }
.video-modal-head .icon-btn { background:rgba(255,255,255,.16); color:#fff; }
.video-frame { aspect-ratio:16/9; background:#000; }
.video-frame iframe { width:100%; height:100%; border:0; display:block; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.section-testimonials { background:linear-gradient(180deg,var(--bubble-soft),#fff 70%); }
.testimonial-slider { position:relative; }
.slider-viewport { overflow:hidden; padding:1.6rem .3rem; }
.slider-track { display:flex; gap:1.6rem; transition:transform .55s var(--ease-soft); }
.testimonial-card {
  flex:0 0 calc((100% - 3.2rem)/3); margin:0; padding:2.6rem 1.9rem 1.9rem; background:#fff;
  border-radius:var(--r-lg); box-shadow:var(--sh); position:relative; border-bottom:6px solid var(--sun);
}
.testimonial-card:nth-child(3n+2) { border-bottom-color:var(--coral); }
.testimonial-card:nth-child(3n+3) { border-bottom-color:var(--grass); }
.quote-mark {
  position:absolute; top:-22px; left:1.8rem; display:grid; place-items:center;
  width:52px; height:52px; border-radius:var(--blob-a); font-size:1.2rem; color:#fff;
  background:linear-gradient(140deg,var(--grape),var(--bubble)); box-shadow:0 8px 20px rgba(145,102,255,.35);
}
.testimonial-card blockquote { margin:0 0 1rem; padding:0; color:var(--ink-soft); font-size:1rem; line-height:1.8; }
.stars { color:var(--sun); margin:0 0 1rem; font-size:.95rem; letter-spacing:.1em; }
.testimonial-card figcaption { display:flex; align-items:center; gap:.95rem; padding-top:1.1rem; border-top:3px dotted var(--line); }
.testimonial-card figcaption img { width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid var(--sun-soft); }
.testimonial-card figcaption strong { display:block; font-family:var(--font-head); color:var(--navy); font-size:1.05rem; }
.testimonial-card figcaption small { color:var(--ink-faint); font-size:.88rem; }
.avatar {
  display:grid; place-items:center; width:60px; height:60px; flex-shrink:0; border-radius:50%;
  background:linear-gradient(140deg,var(--sky),var(--grape)); color:#fff;
  font-family:var(--font-head); font-size:1.4rem; font-weight:800;
}
.slider-controls { display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:1.8rem; }
.slider-arrow { width:50px; height:50px; border:0; border-radius:50%; background:#fff; color:var(--sky-dark); box-shadow:var(--sh-sm); transition:all var(--t); }
.slider-arrow:hover { background:var(--sky); color:#fff; transform:scale(1.1); }
.slider-dots { display:flex; gap:.5rem; }
.slider-dots button { width:12px; height:12px; padding:0; border:0; border-radius:50%; background:var(--sky-soft); transition:all var(--t); }
.slider-dots button.is-active { background:var(--sun); width:34px; border-radius:var(--r-pill); }

/* =====================================================================
   PARENT CORNER
   ===================================================================== */
.parent-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); }
.parent-card {
  display:flex; align-items:center; gap:1rem; padding:1.3rem 1.4rem; background:#fff;
  border-radius:var(--r); box-shadow:var(--sh-sm); border-left:6px solid var(--tone,var(--sun)); transition:all var(--t);
}
.parent-card:nth-child(6n+1) { --tone:var(--sky); --tone-soft:var(--sky-soft); }
.parent-card:nth-child(6n+2) { --tone:var(--coral); --tone-soft:var(--coral-soft); }
.parent-card:nth-child(6n+3) { --tone:var(--grass); --tone-soft:var(--grass-soft); }
.parent-card:nth-child(6n+4) { --tone:var(--grape); --tone-soft:var(--grape-soft); }
.parent-card:nth-child(6n+5) { --tone:var(--sun); --tone-soft:var(--sun-soft); }
.parent-card:nth-child(6n+6) { --tone:var(--mint); --tone-soft:var(--mint-soft); }
.parent-card:hover { transform:translateX(8px) rotate(-.8deg); box-shadow:var(--sh); }
.parent-icon {
  display:grid; place-items:center; width:50px; height:50px; flex-shrink:0; border-radius:var(--blob-a);
  background:var(--tone-soft); color:var(--tone); font-size:1.2rem; transition:all var(--t);
}
.parent-card:hover .parent-icon { background:var(--tone); color:#fff; border-radius:var(--blob-b); transform:rotate(-10deg); }
.parent-card strong { font-family:var(--font-head); font-size:1.05rem; color:var(--navy); }
.parent-go { margin-left:auto; color:var(--ink-faint); transition:transform var(--t); }
.parent-card:hover .parent-go { transform:translateX(5px); color:var(--tone); }

/* =====================================================================
   ADMISSION CTA
   ===================================================================== */
.section-cta {
  position:relative; text-align:center; color:#fff; overflow:hidden;
  background:linear-gradient(130deg,var(--coral) 0%,var(--bubble) 48%,var(--grape) 100%);
  background-image:var(--cta-img); background-size:cover; background-position:center;
}
.section-cta[style*="--cta-img"] { background-color:var(--navy); }
.cta-overlay { position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,111,79,.93),rgba(145,102,255,.9)); }
.section-cta:not([style*="--cta-img"]) .cta-overlay {
  background:radial-gradient(circle at 18% 24%,rgba(255,255,255,.2),transparent 44%),
             radial-gradient(circle at 50% 50%, rgba(255,255,255,.13) 0 3px, transparent 3.5px) 0 0/38px 38px;
}
.cta-inner { position:relative; z-index:2; max-width:880px; margin-inline:auto; }
.cta-badge {
  display:inline-flex; align-items:center; gap:.55em; padding:.5em 1.4em; margin-bottom:1.1rem;
  border-radius:var(--r-pill); background:var(--sun); color:var(--navy);
  font-family:var(--font-head); font-weight:700; font-size:.96rem; box-shadow:0 6px 0 var(--sun-dark);
}
.section-cta h2 { color:#fff; font-size:clamp(2rem,4.4vw,3.1rem); }
.cta-sub, .cta-note { color:#fff; font-size:1.12rem; opacity:.95; }
.cta-rich { color:#fff; opacity:.95; }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:2rem; }
.cta-actions .btn + .btn { margin-left:0; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid { display:grid; gap:2.6rem; grid-template-columns:1fr 1fr; align-items:start; }
.contact-cards { list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:1.1rem; }
.contact-cards li { display:flex; gap:1.1rem; padding:1.3rem 1.4rem; background:#fff; border-radius:var(--r); box-shadow:var(--sh-sm); transition:all var(--t); }
.contact-cards li:hover { transform:translateX(6px); box-shadow:var(--sh); }
.ci-icon {
  display:grid; place-items:center; width:54px; height:54px; flex-shrink:0; border-radius:var(--blob-a);
  background:var(--tone,var(--sky)); color:#fff; font-size:1.25rem;
}
.contact-cards strong { display:block; font-family:var(--font-head); color:var(--navy); margin-bottom:.2rem; font-size:1.06rem; }
.contact-cards p, .contact-cards address { margin:0; color:var(--ink-soft); font-size:.96rem; }
.contact-map, .contact-map-full iframe { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); }
.contact-map iframe { width:100%; height:100%; min-height:430px; border:0; display:block; }
.contact-map-full { line-height:0; }
.contact-map-full iframe { width:100%; height:440px; border:0; border-radius:0; }

.contact-page { display:grid; gap:2.8rem; grid-template-columns:.9fr 1.1fr; align-items:start; }
.contact-quick { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.8rem; }
.contact-quick .btn + .btn { margin-left:0; }
.contact-social h3 { font-size:1.1rem; margin-bottom:.6rem; }
.contact-social a {
  display:inline-grid; place-items:center; width:46px; height:46px; margin-right:.5rem;
  border-radius:var(--blob-a); background:var(--sky-soft); color:var(--sky-dark); transition:all var(--t);
}
.contact-social a:hover { background:var(--sky); color:#fff; transform:translateY(-5px) rotate(-8deg); }
.contact-form-wrap { background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh); padding:clamp(1.7rem,3vw,2.6rem); }

/* =====================================================================
   PAGE LAYOUT
   ===================================================================== */
.page-layout { display:grid; gap:clamp(1.9rem,4vw,3.2rem); grid-template-columns:minmax(0,1fr) 330px; align-items:start; }
.page-layout.is-wide { grid-template-columns:minmax(0,1fr); max-width:920px; margin-inline:auto; }
.page-content { min-width:0; }
.page-updated { margin-top:2.6rem; padding-top:1.1rem; border-top:3px dotted var(--line); }

.rich { color:var(--ink-soft); font-size:1.06rem; }
.rich > :first-child { margin-top:0; }
.rich h2 { font-size:1.7rem; margin:2.1rem 0 .8rem; }
.rich h3 { font-size:1.34rem; margin:1.8rem 0 .7rem; color:var(--sky-dark); }
.rich h4 { font-size:1.14rem; margin:1.5rem 0 .6rem; }
.rich ul { list-style:none; padding-left:0; }
.rich ul li { position:relative; padding-left:1.9em; margin-bottom:.55em; }
.rich ul li::before {
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.2em; color:#fff; font-size:.62em;
  background:var(--grass); width:1.55em; height:1.55em; border-radius:50%;
  display:grid; place-items:center;
}
.rich ol { counter-reset:n; list-style:none; padding-left:0; }
.rich ol li { position:relative; padding-left:2.6em; counter-increment:n; margin-bottom:.6em; }
.rich ol li::before {
  content:counter(n); position:absolute; left:0; top:0; display:grid; place-items:center;
  width:1.9em; height:1.9em; border-radius:var(--blob-a); background:var(--sky); color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:.78em;
}
.rich blockquote {
  margin:1.6rem 0; padding:1.3rem 1.7rem; border-left:6px solid var(--sun);
  background:var(--sun-soft); border-radius:0 var(--r) var(--r) 0; color:var(--ink); font-weight:600;
}
.rich table { width:100%; border-collapse:separate; border-spacing:0; margin:1.5rem 0; font-size:.97rem;
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); }
.rich table th, .rich table td { padding:.85rem 1.1rem; border-bottom:1px solid var(--line); text-align:left; }
.rich table th { background:var(--sky); color:#fff; font-family:var(--font-head); }
.rich table tr:nth-child(even) td { background:var(--tint); }
.rich img { border-radius:var(--r); margin:1.2rem 0; box-shadow:var(--sh-sm); }
.rich iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r); margin:1.3rem 0; }
.rich a { font-weight:700; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:4px; }

.detail-figure { margin:0 0 2rem; }
.detail-figure img { width:100%; border-radius:var(--r-lg); box-shadow:var(--sh); object-fit:cover; }
.detail-meta { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1.5rem; }
.detail-cta {
  position:relative; margin-top:2.8rem; padding:2.4rem; border-radius:var(--r-lg); text-align:center;
  background:linear-gradient(135deg,var(--sun-soft),var(--coral-soft)); overflow:hidden;
}
.detail-cta::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 0 3px, transparent 3.5px) 0 0/30px 30px;
}
.detail-cta > * { position:relative; z-index:2; }
.detail-cta h2 { font-size:1.55rem; }
.detail-cta p { color:var(--ink-soft); }
.detail-cta .btn { margin:.3rem; }

.subpages { margin-top:3.2rem; }
.subpage-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.subpage-card {
  display:flex; align-items:center; gap:1rem; padding:1.2rem 1.3rem; background:#fff;
  border-radius:var(--r); box-shadow:var(--sh-sm); transition:all var(--t); border-bottom:4px solid var(--sky-soft);
}
.subpage-card:hover { transform:translateY(-6px); box-shadow:var(--sh); border-bottom-color:var(--sky); }
.subpage-media { flex-shrink:0; width:68px; height:68px; border-radius:var(--blob-a); overflow:hidden; }
.subpage-media img { width:100%; height:100%; object-fit:cover; }
.subpage-icon { display:grid; place-items:center; width:50px; height:50px; flex-shrink:0; border-radius:var(--blob-a);
  background:var(--sky-soft); color:var(--sky-dark); }
.subpage-body { min-width:0; }
.subpage-body strong { display:block; font-family:var(--font-head); color:var(--navy); font-size:1.05rem; }
.subpage-body small { display:block; color:var(--ink-faint); font-size:.88rem; }
.subpage-card > i:last-child { margin-left:auto; color:var(--sky); }

/* sidebar */
.page-side { display:grid; gap:1.3rem; position:sticky; top:115px; }
.side-card { background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:1.5rem; border-top:5px solid var(--sky); }
.side-card h2 { font-size:1.18rem; margin-bottom:1rem; padding-bottom:.65rem; border-bottom:3px dotted var(--sky-soft); }
.side-nav, .side-list { list-style:none; margin:0; padding:0; }
.side-nav a { display:flex; align-items:center; gap:.6em; padding:.6rem .4rem; font-size:.96rem; font-weight:600; color:var(--ink-soft); border-radius:var(--r-sm); }
.side-nav a:hover, .side-nav a.active { background:var(--sky-soft); color:var(--sky-dark); padding-left:.85rem; }
.side-nav i { color:var(--coral); font-size:.75em; }
.side-list li { padding:.7rem 0; border-bottom:2px dotted var(--line); }
.side-list li:last-child { border-bottom:0; }
.side-list a { font-weight:700; font-size:.95rem; color:var(--navy); }
.side-list a:hover { color:var(--coral); }
.side-list small { display:block; color:var(--ink-faint); font-size:.83rem; margin-top:.15rem; font-weight:600; }
.side-cta { background:linear-gradient(150deg,var(--coral),var(--bubble)); color:#fff; border-top-color:var(--sun); }
.side-cta h2 { color:#fff; border-bottom-color:rgba(255,255,255,.35); }
.side-cta p { color:#fff; opacity:.95; font-size:.97rem; }

/* =====================================================================
   PAGE LAYOUT: HUB (landing)
   ===================================================================== */
.section-hub { position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, rgba(43,179,232,.09) 0 2.5px, transparent 3px) 0 0/34px 34px, #fff; }
.hub-intro { max-width:860px; margin:0 auto 3rem; text-align:center; font-size:1.1rem; }
.hub-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); }
.hub-tile {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  border-bottom:6px solid var(--tone,var(--sky)); transition:all var(--t); color:inherit;
}
.hub-tile:hover { transform:translateY(-11px) rotate(-1.3deg); box-shadow:var(--sh-lg); color:inherit; }
.hub-shape {
  position:absolute; top:-70px; right:-70px; width:190px; height:190px; z-index:0;
  border-radius:var(--blob-a); background:var(--tone-soft,var(--sky-soft)); transition:transform .6s var(--ease-soft);
}
.hub-tile:hover .hub-shape { transform:scale(1.6); }
.hub-media { display:block; aspect-ratio:16/9; overflow:hidden; position:relative; z-index:1; }
.hub-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.hub-tile:hover .hub-media img { transform:scale(1.08); }
.hub-icon {
  position:relative; z-index:2; display:grid; place-items:center; width:66px; height:66px;
  margin:1.6rem 1.5rem .9rem; border-radius:var(--blob-a); font-size:1.5rem; color:#fff;
  background:var(--tone,var(--sky)); box-shadow:0 10px 22px rgba(23,58,99,.18);
  transition:border-radius .6s var(--ease-soft), transform var(--t);
}
.hub-tile:has(.hub-media) .hub-icon { margin-top:-33px; border:4px solid #fff; }
.hub-tile:hover .hub-icon { border-radius:var(--blob-b); transform:rotate(-10deg) scale(1.07); }
.hub-body { position:relative; z-index:2; display:block; padding:0 1.5rem 1.6rem; }
.hub-body strong { display:block; font-family:var(--font-head); font-size:1.24rem; color:var(--navy); margin-bottom:.4rem; }
.hub-body small { display:block; color:var(--ink-soft); font-size:.95rem; line-height:1.65; margin-bottom:.9rem; }
.hub-go { display:inline-flex; align-items:center; gap:.4em; font-style:normal;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--tone-dark,var(--sky-dark)); }
.hub-tile:hover .hub-go i { transform:translateX(5px); }
.hub-go i { transition:transform var(--t); }

.section-hubfacts { padding-top:0; background:#fff; }
.hubfact-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.hubfact {
  display:grid; place-items:center; gap:.25rem; text-align:center; padding:1.7rem 1.2rem;
  background:var(--tone-soft,var(--sky-soft)); border-radius:var(--r-lg); transition:all var(--t);
}
.hubfact:hover { transform:translateY(-6px); }
.hubfact-icon { display:grid; place-items:center; width:56px; height:56px; margin-bottom:.4rem;
  border-radius:var(--blob-a); background:var(--tone,var(--sky)); color:#fff; font-size:1.3rem; }
.hubfact strong { font-family:var(--font-head); font-size:1.2rem; color:var(--navy); }
.hubfact small { color:var(--ink-soft); font-size:.9rem; }

/* =====================================================================
   PAGE LAYOUT: MESSAGE (principal / directors / founder)
   ===================================================================== */
.section-message { background:linear-gradient(180deg,var(--sun-soft),#fff 55%); }
.message-layout { display:grid; gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:320px minmax(0,1fr); align-items:start; }
.message-person { position:sticky; top:115px; text-align:center; }
.message-portrait { position:relative; margin-bottom:1.2rem; }
.message-portrait img {
  width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:var(--blob-a);
  box-shadow:var(--sh-lg); transition:border-radius .9s var(--ease-soft);
}
.message-person:hover .message-portrait img { border-radius:var(--blob-b); }
.message-initial {
  display:grid; place-items:center; width:100%; aspect-ratio:5/6; border-radius:var(--blob-a);
  background:linear-gradient(140deg,var(--sky),var(--grape)); color:#fff;
  font-family:var(--font-head); font-size:5rem; font-weight:800; box-shadow:var(--sh-lg);
}
.message-badge {
  position:absolute; right:-10px; bottom:-10px; display:grid; place-items:center;
  width:64px; height:64px; border-radius:var(--blob-b); font-size:1.4rem; color:var(--navy);
  background:var(--sun); box-shadow:0 10px 26px rgba(255,192,46,.5); border:4px solid #fff;
}
.message-name { font-family:var(--font-head); font-weight:800; font-size:1.35rem; color:var(--navy); margin:0; }
.message-role { color:var(--coral-dark); font-family:var(--font-head); font-weight:700; margin:.1rem 0 1rem; }
.message-motto {
  display:inline-flex; align-items:center; gap:.5em; padding:.45em 1.1em; margin:0;
  border-radius:var(--r-pill); background:var(--sky-soft); color:var(--sky-dark);
  font-family:var(--font-head); font-weight:700; font-size:.86rem;
}
.message-motto i { color:var(--sun-dark); }
.message-letter {
  position:relative; background:#fff; border-radius:var(--r-lg); padding:clamp(1.8rem,3.5vw,3rem);
  box-shadow:var(--sh); border-top:7px solid var(--coral);
}
.letter-quote {
  position:absolute; top:.2rem; left:1.6rem; font-family:var(--font-head); font-size:6rem;
  line-height:1; color:var(--sun-soft); pointer-events:none;
}
.message-letter .rich { position:relative; z-index:2; }
.message-letter .rich p:first-of-type { font-size:1.14rem; font-weight:600; color:var(--ink); }
.message-more { margin-top:2.4rem; }

/* =====================================================================
   PAGE LAYOUT: STEPS (admission process)
   ===================================================================== */
.section-steps { background:linear-gradient(180deg,#fff,var(--sky-soft)); }
.step-flow { list-style:none; counter-reset:none; margin:2rem 0; padding:0; position:relative; }
.step-flow::before {
  content:""; position:absolute; left:31px; top:26px; bottom:26px; width:4px; border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--sky) 0 10px, transparent 10px 20px);
}
.step { position:relative; display:flex; gap:1.4rem; padding:0 0 1.8rem 0; }
.step:last-child { padding-bottom:0; }
.step-num {
  position:relative; z-index:2; flex-shrink:0; display:grid; place-items:center;
  width:66px; height:66px; border-radius:var(--blob-a);
  background:var(--tone,var(--sky)); color:#fff; border:5px solid #fff;
  font-family:var(--font-head); font-size:1.6rem; font-weight:800;
  box-shadow:0 8px 20px rgba(23,58,99,.2); transition:all var(--t);
}
.step:hover .step-num { border-radius:var(--blob-b); transform:rotate(-8deg) scale(1.06); }
.step-body {
  flex:1; background:#fff; border-radius:var(--r); padding:1.2rem 1.4rem;
  box-shadow:var(--sh-sm); border-left:5px solid var(--tone,var(--sky)); transition:all var(--t);
}
.step:hover .step-body { transform:translateX(6px); box-shadow:var(--sh); }
.step-body h3 { font-size:1.2rem; margin:0 0 .3em; }
.step-body p { margin:0; color:var(--ink-soft); font-size:.98rem; }

/* =====================================================================
   PAGE LAYOUT: SPLIT (alternating bands)
   ===================================================================== */
.section-splitlead { padding-bottom:1rem; background:#fff; }
.split-lead { max-width:860px; margin-inline:auto; text-align:center; }
.split-band { position:relative; overflow:hidden; padding:clamp(2.6rem,5vw,4.4rem) 0; }
.split-band:nth-child(even) { background:var(--cream); }
.split-band.tone-primary { background:linear-gradient(120deg,var(--sky-soft),#fff); }
.split-band.tone-accent  { background:linear-gradient(120deg,var(--sun-soft),#fff); }
.split-band.tone-green   { background:linear-gradient(120deg,var(--grass-soft),#fff); }
.split-band.tone-purple  { background:linear-gradient(120deg,var(--grape-soft),#fff); }
.split-band.tone-pink    { background:linear-gradient(120deg,var(--bubble-soft),#fff); }
.split-band.tone-teal    { background:linear-gradient(120deg,var(--mint-soft),#fff); }
.split-grid { display:grid; gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; }
.split-band.is-flipped .split-media { order:2; }
.split-media { position:relative; }
.split-media img {
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--blob-a);
  box-shadow:var(--sh-lg); transition:border-radius .9s var(--ease-soft);
}
.split-band:hover .split-media img { border-radius:var(--blob-b); }
.split-placeholder {
  display:grid; place-items:center; width:100%; aspect-ratio:4/3; border-radius:var(--blob-a);
  background:#fff; color:var(--tone,var(--sky)); font-size:3.4rem; box-shadow:var(--sh-sm);
}
.split-dot {
  position:absolute; left:-14px; top:-14px; display:grid; place-items:center;
  width:58px; height:58px; border-radius:var(--blob-b); font-family:var(--font-head);
  font-size:1.5rem; font-weight:800; color:#fff; background:var(--tone,var(--sky));
  border:4px solid #fff; box-shadow:var(--sh);
}
.split-text h2 { margin-bottom:.5em; }
.section-splitkids { background:#fff; padding-top:2rem; }

/* =====================================================================
   FACULTY
   ===================================================================== */
.faculty-block + .faculty-block { margin-top:3.4rem; }
.faculty-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.faculty-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); text-align:center; transition:all var(--t); }
.faculty-card:nth-child(5n+1) { --tone:var(--sky);    --tone-soft:var(--sky-soft); }
.faculty-card:nth-child(5n+2) { --tone:var(--coral);  --tone-soft:var(--coral-soft); }
.faculty-card:nth-child(5n+3) { --tone:var(--grass);  --tone-soft:var(--grass-soft); }
.faculty-card:nth-child(5n+4) { --tone:var(--grape);  --tone-soft:var(--grape-soft); }
.faculty-card:nth-child(5n+5) { --tone:var(--sun);    --tone-soft:var(--sun-soft); }
.faculty-card:hover { transform:translateY(-10px) rotate(-1.3deg); box-shadow:var(--sh-lg); }
.faculty-photo { position:relative; aspect-ratio:1; background:var(--tone-soft); overflow:hidden; }
.faculty-photo img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.faculty-card:hover .faculty-photo img { transform:scale(1.07); }
.faculty-initial { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-head);
  font-size:3.6rem; font-weight:800; color:var(--tone); opacity:.5; }
.faculty-body { padding:1.3rem 1.3rem 1.6rem; border-top:5px solid var(--tone); }
.faculty-body h3 { font-size:1.16rem; margin-bottom:.2em; }
.faculty-role { color:var(--tone-dark,var(--sky-dark)); font-family:var(--font-head); font-weight:700; font-size:.95rem; margin:0 0 .65rem; }
.faculty-qual { display:flex; align-items:center; justify-content:center; gap:.45em; color:var(--ink-faint); font-size:.88rem; margin:0 0 .3rem; }
.faculty-bio { color:var(--ink-soft); font-size:.9rem; margin:.8rem 0 0; }
.faculty-social { margin:1rem 0 0; }
.faculty-social a {
  display:inline-grid; place-items:center; width:38px; height:38px; margin:0 .2rem;
  border-radius:var(--blob-a); background:var(--tone-soft); color:var(--tone); font-size:.9rem; transition:all var(--t);
}
.faculty-social a:hover { background:var(--tone); color:#fff; transform:rotate(-10deg) scale(1.1); }

/* =====================================================================
   DOWNLOADS / FAQ / FILTERS
   ===================================================================== */
.filter-bar { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:2.2rem; }
.chip {
  display:inline-flex; align-items:center; gap:.4em; padding:.55em 1.3em; border-radius:var(--r-pill);
  background:#fff; border:3px solid var(--sky-soft); color:var(--ink-soft);
  font-family:var(--font-head); font-weight:700; font-size:.93rem; transition:all var(--t);
}
.chip:hover { border-color:var(--sky); color:var(--sky-dark); transform:translateY(-3px); }
.chip-active { background:var(--sky); border-color:var(--sky); color:#fff; }
.chip-active:hover { color:#fff; }
.chip em { font-style:normal; opacity:.7; font-size:.85em; }

.download-block + .download-block { margin-top:2.8rem; }
.download-list { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.download-row {
  display:flex; align-items:center; gap:1.2rem; padding:1.25rem 1.4rem; background:#fff;
  border-radius:var(--r); box-shadow:var(--sh-sm); transition:all var(--t); flex-wrap:wrap;
}
.download-row:hover { box-shadow:var(--sh); transform:translateX(6px); }
.download-icon { display:grid; place-items:center; width:56px; height:56px; flex-shrink:0; border-radius:var(--blob-a);
  background:var(--sky-soft); color:var(--sky-dark); font-size:1.45rem; }
.download-icon.ext-pdf { background:var(--coral-soft); color:var(--coral-dark); }
.download-icon.ext-doc, .download-icon.ext-docx { background:var(--sky-soft); color:var(--sky-dark); }
.download-icon.ext-xls, .download-icon.ext-xlsx { background:var(--grass-soft); color:var(--grass-dark); }
.download-body { flex:1; min-width:200px; }
.download-body strong { display:block; font-family:var(--font-head); color:var(--navy); font-size:1.08rem; }
.download-body small { display:block; color:var(--ink-soft); font-size:.9rem; }
.download-meta { color:var(--ink-faint) !important; font-size:.82rem !important; margin-top:.25rem; font-weight:600; }

.accordion { display:grid; gap:.9rem; }
.accordion-item { background:#fff; border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; border-left:6px solid var(--sky); }
.accordion-item:nth-child(4n+2) { border-left-color:var(--coral); }
.accordion-item:nth-child(4n+3) { border-left-color:var(--grass); }
.accordion-item:nth-child(4n+4) { border-left-color:var(--grape); }
.accordion-item h3 { margin:0; font-size:inherit; }
.accordion-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  padding:1.2rem 1.4rem; border:0; background:none; text-align:left;
  font-family:var(--font-head); font-weight:700; font-size:1.06rem; color:var(--navy); transition:all var(--t);
}
.accordion-trigger:hover { background:var(--tint); }
.accordion-trigger i { flex-shrink:0; width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:var(--sky-soft); color:var(--sky-dark); font-size:.8rem; transition:all var(--t); }
.accordion-trigger[aria-expanded="true"] { background:var(--tint); }
.accordion-trigger[aria-expanded="true"] i { background:var(--sun); color:var(--navy); transform:rotate(45deg); }
.accordion-panel { padding:0 1.4rem 1.4rem; }
.faq-block + .faq-block { margin-top:2.6rem; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-page { max-width:920px; margin-inline:auto; }
.form-intro { text-align:center; margin-bottom:2.2rem; }
.form-intro p { color:var(--ink-soft); }
.public-form { background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh); padding:clamp(1.6rem,3.5vw,2.8rem); }
.contact-form-wrap .public-form { background:none; box-shadow:none; padding:0; }
.public-form fieldset { border:0; margin:0 0 1.8rem; padding:0; }
.public-form legend {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--navy);
  padding:0 0 .65rem; margin-bottom:1.1rem; width:100%; border-bottom:3px dotted var(--sky-soft);
}
.field-row { display:grid; gap:1.2rem; grid-template-columns:1fr 1fr; }
.fld { margin-bottom:1.2rem; }
.fld label { display:block; font-family:var(--font-head); font-weight:700; font-size:.97rem; color:var(--navy); margin-bottom:.45rem; }
.req { color:var(--coral); }
.fld input, .fld select, .fld textarea, .search-page-form input {
  width:100%; padding:.88rem 1.1rem; border:3px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:1rem; color:var(--ink); background:#fff; transition:all var(--t);
}
.fld textarea { resize:vertical; min-height:120px; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .search-page-form input:focus {
  outline:none; border-color:var(--sky); box-shadow:0 0 0 5px var(--sky-soft);
}
.fld .hint { font-size:.86rem; color:var(--ink-faint); margin:.4rem 0 0; }
.hp-field { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-note {
  display:flex; align-items:flex-start; gap:.7em; padding:1rem 1.2rem; margin:0 0 1.5rem;
  background:var(--grass-soft); border-radius:var(--r-sm); color:var(--ink-soft); font-size:.92rem; font-weight:600;
}
.form-note i { color:var(--grass-dark); margin-top:.2em; }

.success-panel {
  text-align:center; padding:clamp(2.2rem,5vw,3.6rem); background:#fff;
  border-radius:var(--r-lg); box-shadow:var(--sh); border-top:7px solid var(--grass);
}
.success-icon { display:grid; place-items:center; width:92px; height:92px; margin:0 auto 1.3rem;
  border-radius:var(--blob-a); background:var(--grass); color:#fff; font-size:2.6rem;
  animation:bob 4s ease-in-out infinite; }
.success-panel p { color:var(--ink-soft); }
.success-panel .section-actions { justify-content:center; }

.search-page-form { display:flex; gap:.8rem; margin-bottom:2.2rem; }
.search-page-form input { flex:1; border-radius:var(--r-pill); padding-left:1.5rem; }
.result-count { color:var(--ink-soft); margin-bottom:1.7rem; }
.result-block + .result-block { margin-top:2.6rem; }
.result-list { list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.result-list li { padding:1.3rem 1.4rem; background:#fff; border-radius:var(--r); box-shadow:var(--sh-sm); transition:all var(--t); border-left:5px solid var(--sky); }
.result-list li:hover { box-shadow:var(--sh); transform:translateX(6px); }
.result-list li > a { font-family:var(--font-head); font-weight:700; font-size:1.14rem; color:var(--navy); }
.result-list li > a:hover { color:var(--coral); }
.result-list p { color:var(--ink-soft); font-size:.95rem; margin:.4rem 0 .3rem; }
.result-url { color:var(--grass-dark); font-size:.85rem; font-weight:600; }

.empty-note {
  padding:2.8rem 1.6rem; text-align:center; background:#fff;
  border:4px dashed var(--sky-soft); border-radius:var(--r-lg); color:var(--ink-soft);
}

.alert { display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.4rem; border-radius:var(--r); margin-bottom:1.5rem; font-size:.96rem; }
.alert ul { margin:.3rem 0 0; padding-left:1.3em; }
.alert-danger { background:var(--coral-soft); border-left:6px solid var(--coral); color:var(--coral-dark); }
.alert-success { background:var(--grass-soft); border-left:6px solid var(--grass); color:var(--grass-dark); }
.alert-info { background:var(--sky-soft); border-left:6px solid var(--sky); color:var(--sky-dark); }
.alert-warning { background:var(--sun-soft); border-left:6px solid var(--sun); color:var(--sun-dark); }

/* ========================================================== PAGINATION */
.pagination { margin-top:2.8rem; }
.pagination ul { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; list-style:none; margin:0; padding:0; }
.pagination a, .pagination span {
  display:grid; place-items:center; min-width:48px; height:48px; padding:0 .9rem;
  border-radius:16px; background:#fff; box-shadow:var(--sh-sm);
  font-family:var(--font-head); font-weight:700; font-size:.97rem; color:var(--ink-soft);
}
.pagination a:hover { background:var(--sky-soft); color:var(--sky-dark); transform:translateY(-3px); }
.pagination .current { background:var(--sky); color:#fff; box-shadow:0 5px 0 var(--sky-dark); }
.pagination .dots { box-shadow:none; background:none; }

/* ========================================================== ERROR PAGE */
.error-panel { max-width:740px; margin-inline:auto; text-align:center; }
.error-code { font-family:var(--font-head); font-size:clamp(5.5rem,17vw,11rem); font-weight:800;
  line-height:.88; margin:0; background:linear-gradient(135deg,var(--sky),var(--bubble),var(--sun));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.error-icon { display:grid; place-items:center; width:96px; height:96px; margin:-2rem auto 1.5rem;
  border-radius:var(--blob-a); background:var(--sun); color:var(--navy); font-size:2.4rem;
  box-shadow:0 12px 30px rgba(255,192,46,.4); animation:bob 5s ease-in-out infinite; }
.error-text { color:var(--ink-soft); font-size:1.08rem; margin-bottom:1.9rem; }
.error-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin:1.9rem 0; }
.error-links .btn + .btn { margin-left:0; }

/* ============================================================== FOOTER */
.site-footer { position:relative; background:linear-gradient(165deg,var(--navy),var(--navy-deep)); color:#b6cade; padding-top:5.5rem; }
.site-footer::before {
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 2px, transparent 2.5px) 0 0/34px 34px;
}
.footer-grid { position:relative; z-index:2; display:grid; gap:2.6rem; grid-template-columns:1.5fr 1fr 1fr 1.3fr; padding-bottom:3.2rem; }
.footer-col h2 { color:#fff; font-size:1.18rem; margin-bottom:1.2rem; position:relative; padding-bottom:.65rem; }
.footer-col h2::after { content:""; position:absolute; left:0; bottom:0; width:52px; height:4px;
  background:linear-gradient(90deg,var(--sun),var(--coral)); border-radius:3px; }
.footer-brand { display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; }
.footer-brand img { max-height:62px; width:auto; }
.footer-brand strong { color:#fff; font-family:var(--font-head); font-size:1.14rem; }
.footer-about p { font-size:.97rem; line-height:1.8; }
.footer-social { display:flex; gap:.6rem; margin-top:1.3rem; }
.footer-social a {
  display:grid; place-items:center; width:46px; height:46px; border-radius:var(--blob-a);
  background:rgba(255,255,255,.1); color:#dcecf9; transition:all var(--t);
}
.footer-social a:hover { background:var(--sun); color:var(--navy); transform:translateY(-6px) rotate(-10deg); }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links li { margin-bottom:.65rem; }
.footer-links a { display:flex; align-items:center; gap:.6em; color:#b6cade; font-size:.97rem; font-weight:600; transition:all var(--t); }
.footer-links a:hover { color:var(--sun); transform:translateX(6px); }
.footer-links i { color:var(--coral); font-size:.7em; }
.contact-list { list-style:none; margin:0 0 1.3rem; padding:0; }
.contact-list li { display:flex; gap:.85rem; margin-bottom:1rem; font-size:.96rem; line-height:1.65; }
.contact-list i { color:var(--sun); margin-top:.3em; flex-shrink:0; }
.contact-list a { color:#b6cade; }
.contact-list a:hover { color:var(--sun); }
.footer-bottom { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.12); }
.footer-bottom-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem; padding:1.4rem 0; font-size:.9rem; }
.footer-bottom p { margin:0; }
.footer-mini a { color:#b6cade; } .footer-mini a:hover { color:var(--sun); }
.footer-mini span { margin:0 .45rem; opacity:.4; }

/* floating buttons */
.float-whatsapp {
  position:fixed; left:1.5rem; bottom:1.5rem; z-index:800; display:grid; place-items:center;
  width:60px; height:60px; border-radius:var(--blob-a); background:#25d366; color:#fff; font-size:1.8rem;
  box-shadow:0 10px 28px rgba(37,211,102,.5); transition:all var(--t);
  animation:bob 4s ease-in-out infinite;
}
.float-whatsapp:hover { transform:scale(1.14) rotate(-8deg); color:#fff; }
.to-top {
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:800; width:54px; height:54px; border:0;
  border-radius:var(--blob-a); background:var(--sky); color:#fff; font-size:1.1rem;
  box-shadow:0 8px 0 var(--sky-dark); transition:all var(--t);
}
.to-top:hover { background:var(--coral); box-shadow:0 8px 0 var(--coral-dark); transform:translateY(-5px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Laptops (roughly 1366px): reclaim header space so most menu items stay
   visible on the bar instead of collapsing into "More". */
@media (max-width:1440px) {
  .header-inner { gap:.8rem; }
  .brand { gap:.6rem; }
  .brand-words strong { font-size:1.05rem; }
  .brand-words small { display:none; }          /* tagline lives in the hero anyway */
  .brand-logo { max-height:52px; }
  .brand-mark { width:50px; height:50px; font-size:1.4rem; }
  .nav-list > li > a { padding:.6rem .6rem; font-size:.92rem; gap:.3em; }
  .nav-list > li > a i:not(.caret) { display:none; }
  .header-actions .btn { padding:.7em 1em; }
  .header-actions .btn span.btn-label { display:none; }
  .icon-btn { width:42px; height:42px; }
}

@media (max-width:1150px) {
  .nav-list > li > a { padding:.55rem .5rem; font-size:.88rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .testimonial-card { flex:0 0 calc((100% - 1.6rem)/2); }
}

@media (max-width:1000px) {
  .page-layout { grid-template-columns:minmax(0,1fr); }
  .page-side { position:static; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
  .about-grid, .contact-grid, .contact-page { grid-template-columns:1fr; }
  .contact-map iframe { min-height:340px; }
  .news-row { grid-template-columns:80px 1fr; }
  .news-row-media { display:none; }
}

@media (max-width:880px) {
  :root { --header-h:76px; }
  .hide-md { display:none !important; }
  .burger { display:block; }
  .topbar-notice { display:none; }

  .main-nav {
    position:fixed; top:0; right:0; bottom:0; width:min(350px,89vw); z-index:950;
    background:#fff; box-shadow:-10px 0 50px rgba(14,39,69,.28);
    transform:translateX(105%); transition:transform .4s var(--ease-soft), visibility .4s;
    display:flex; flex-direction:column; overflow-y:auto;
    /* Hidden rather than merely off-screen: keeps the closed drawer out of the
       scrollable area (no phantom horizontal scrollbar) and out of the tab order. */
    visibility:hidden;
  }
  .main-nav.is-open { transform:translateX(0); visibility:visible; }
  .nav-mobile-head {
    display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem;
    background:linear-gradient(120deg,var(--sky),var(--grape)); color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.1rem;
  }
  .nav-close { width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; font-size:1.15rem; }
  .nav-list { flex-direction:column; align-items:stretch; gap:0; padding:.7rem; }
  .nav-list > li { border-bottom:2px dotted var(--line); }
  .nav-list > li > a { padding:1rem .85rem; font-size:1.03rem; border-radius:var(--r-sm); }
  .nav-list > li > a i:not(.caret) { display:inline; }
  .nav-list > li > a .caret { display:none; }

  .submenu, .submenu .submenu {
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border-top:0; border-left:4px dotted var(--sky-soft); border-radius:0;
    margin:0 0 .6rem .9rem; padding:0 0 0 .5rem; display:none; min-width:0;
  }
  .submenu::before { display:none; }
  .submenu.is-open { display:block; }
  .submenu-toggle {
    display:grid; place-items:center; position:absolute; top:.6rem; right:.55rem;
    width:42px; height:42px; border:0; border-radius:50%; background:var(--sky-soft); color:var(--sky-dark);
    transition:transform var(--t);
  }
  .submenu-toggle[aria-expanded="true"] { transform:rotate(180deg); background:var(--sun); color:var(--navy); }
  .nav-mobile-foot { display:block; padding:1.2rem 1.4rem 1.8rem; margin-top:auto; border-top:3px dotted var(--line); }

  /* Hero: shorter band, text centred over the photo, floaters removed so
     they never sit on top of the words on a narrow screen. */
  .hero, .hero-slide { min-height:clamp(460px,72vh,620px); }
  .hero-copy { max-width:none; text-align:center; padding-bottom:5.5rem; }
  .hero-sub { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-floats { display:none; }
  .hero-scrim::before {
    background:linear-gradient(180deg, rgba(14,39,69,.72) 0%, rgba(14,39,69,.86) 100%);
  }
  .hero-scrim::after { opacity:.35; background:linear-gradient(180deg, transparent 30%, var(--tone,var(--sky)) 100%); }
  .hero-arrow { width:46px; height:46px; }
  .hero-arrow.prev { left:.6rem; } .hero-arrow.next { right:.6rem; }
  .hero-dots { bottom:2.6rem; }
  .section-quick.is-overlap { margin-top:-2.5rem; }
  .testimonial-card { flex:0 0 100%; }
  .field-row { grid-template-columns:1fr; }
  .masonry { grid-auto-rows:145px; }
  .masonry-item.m3 { grid-column:span 1; }
  .confetti { display:none; }
}

@media (max-width:640px) {
  body { font-size:16px; }
  .hide-sm { display:none !important; }

  /* The brand is flex-shrink:0 by default so it never squashes on desktop.
     On a phone it must give way, or it pushes the search and menu buttons
     off the right edge. */
  .header-inner { gap:.5rem; }
  .brand { flex-shrink:1; min-width:0; }
  .brand-words { min-width:0; }
  .brand-words strong {
    font-size:.92rem; line-height:1.15;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .brand-words small { display:none; }
  .brand-logo { max-height:44px; }
  .brand-mark { width:44px; height:44px; font-size:1.25rem; }
  .topbar-contact { justify-content:center; width:100%; font-size:.82rem; gap:.8rem; }
  .topbar-social { display:none; }
  .section-head { display:block; }
  .section-head .btn { margin-top:1.1rem; }
  .quick-grid, .footer-grid { grid-template-columns:1fr; }
  .download-row { flex-direction:column; align-items:flex-start; }
  .download-row .btn { width:100%; }
  .news-row { grid-template-columns:1fr; }
  .news-row-date { flex-direction:row; display:flex; gap:.45rem; align-items:baseline; justify-content:flex-start;
    padding:.5rem 1rem; width:max-content; }
  .news-row-date strong { font-size:1.2rem; }
  .masonry { grid-template-columns:repeat(2,1fr); grid-auto-rows:125px; }
  .masonry-item.m0, .masonry-item.m4 { grid-row:span 1; }
  .float-whatsapp { width:54px; height:54px; font-size:1.6rem; }
  .lb-prev, .lb-next { width:44px; height:44px; }
  .lb-prev { left:.4rem; } .lb-next { right:.4rem; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
  .vision-grid { gap:2.8rem 1.5rem; }
}

/* ==================================================== MOTION & PRINT */
[data-reveal] { opacity:0; transform:translateY(30px); transition:opacity .75s var(--ease-soft), transform .75s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1; transform:none; }
  .ticker-track { animation:none; }
  .btn:hover, .quick-card:hover, .feature-card:hover, .class-card:hover { transform:none; }
}

@media print {
  .topbar, .site-header, .site-footer, .float-whatsapp, .to-top,
  .page-side, .hero-arrow, .hero-dots, .filter-bar, .pagination, .confetti { display:none !important; }
  body { font-size:12pt; color:#000; background:#fff; }
  .page-banner { background:none; color:#000; padding:0 0 1rem; }
  .page-banner h1 { color:#000; text-shadow:none; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.85em; color:#555; }
  .section { padding:1rem 0; }
}

/* ------------------------- layout responsiveness ------------------------- */
@media (max-width:1000px) {
  .message-layout { grid-template-columns:minmax(0,1fr); }
  .message-person { position:static; max-width:340px; margin-inline:auto; }
  .split-grid { grid-template-columns:minmax(0,1fr); }
  .split-band.is-flipped .split-media { order:0; }
}
@media (max-width:640px) {
  .step { gap:.9rem; }
  .step-num { width:54px; height:54px; font-size:1.3rem; }
  .step-flow::before { left:25px; }
  .hub-body strong { font-size:1.12rem; }
  .letter-quote { font-size:4rem; }
}