/* =========================================================
   Shri Vidhyabharathi CBSE Senior Secondary School
   Design system: "Royal Crest" — traditional Indian
   institutional style. Royal-blue base, sky + gold + green
   accents, bold uppercase headings, italic script tagline,
   rounded image cards, full-width dark bands, decorative
   swooshes, dotted grids and confetti motifs.
   Palette follows the school's traditional CBSE identity.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Dancing+Script:wght@500;600;700&display=swap");

:root{
  --navy:      #8b1a1a;   /* maroon — logo brand base */
  --navy-deep: #560c0c;   /* deep maroon — full-bleed dark bands */
  --royal:     #a52424;   /* maroon 2 */
  --sky:       #c8860d;   /* gold-deep (maroon→gold gradients) */
  --sky-deep:  #9c6a0a;
  --gold:      #f5a623;   /* logo gold */
  --gold-light:#ffc83d;
  --gold-deep: #b8770b;
  --orange:    #e8602c;   /* high-contrast CTA */
  --green:     #1f9d57;   /* eco / values accent */
  --magenta:   #b23a52;   /* warm rose accent */
  --cream:     #fff8ee;   /* warm light section */
  --cream-2:   #fbe9cf;
  --paper:     #ffffff;
  --ink:       #3e2723;   /* logo dark brown — headings */
  --ink-2:     #6d5648;   /* body text */
  --ink-3:     #9a8a7c;   /* muted */
  --line:      #ecd9b8;   /* warm rule */

  /* pastel card tints — rotated so it never reads single-accent */
  --tint-sky:    #fbe9c8;
  --tint-gold:   #fdf0cf;
  --tint-green:  #e3f4ea;
  --tint-orange: #fdeadc;
  --tint-pink:   #fbe0e0;
  --tint-violet: #f3e7d8;

  --shadow:    0 18px 42px rgba(62,39,35,.16);
  --shadow-sm: 0 8px 20px rgba(62,39,35,.10);
  --shadow-lg: 0 28px 60px rgba(62,39,35,.24);

  --r:    18px;
  --r-sm: 12px;
  --r-lg: 26px;
  --pill: 999px;

  --ease: cubic-bezier(.22,.75,.32,1);

  --head:   "Poppins", "Segoe UI", Arial, sans-serif;
  --body:   "Poppins", "Segoe UI", Arial, sans-serif;
  --script: "Dancing Script", "Brush Script MT", cursive;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 17px;
  --leading-tight: 1.38;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --leading-editorial: 1.74;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--text-base);
  color:var(--ink-2);
  background:var(--cream);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ width:min(1220px, calc(100% - 40px)); margin:0 auto; }
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================================================
   Icons
   ========================================================= */
.icon{
  width:20px; height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-4px;
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease), box-shadow .3s ease; }
.is-visible .stagger > *{ opacity:1; transform:translateY(0); }
.is-visible .stagger > *:nth-child(1){ transition-delay:.04s; }
.is-visible .stagger > *:nth-child(2){ transition-delay:.12s; }
.is-visible .stagger > *:nth-child(3){ transition-delay:.20s; }
.is-visible .stagger > *:nth-child(4){ transition-delay:.28s; }
.is-visible .stagger > *:nth-child(5){ transition-delay:.36s; }
.is-visible .stagger > *:nth-child(6){ transition-delay:.44s; }
.is-visible .stagger > *:nth-child(7){ transition-delay:.52s; }
.is-visible .stagger > *:nth-child(8){ transition-delay:.60s; }

/* =========================================================
   Top utility bar
   ========================================================= */
.top-bar{
  background:linear-gradient(90deg, var(--navy-deep), var(--navy));
  color:#f1e4d2;
  font-size:13.5px;
}
.top-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  flex-wrap:wrap;
}
.top-bar__contact{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.top-bar__contact a, .top-bar__contact span{ display:inline-flex; align-items:center; gap:7px; transition:color .2s ease; }
.top-bar__contact a:hover{ color:var(--gold); }
.top-bar__contact .icon{ width:15px; height:15px; color:var(--gold); }
.top-admit{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:12.5px;
}
.top-admit .pulse{
  width:9px; height:9px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(244,115,31,.7);
  animation:admitPulse 2s infinite;
}
@keyframes admitPulse{
  0%{ box-shadow:0 0 0 0 rgba(244,115,31,.6); }
  70%{ box-shadow:0 0 0 9px rgba(244,115,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(244,115,31,0); }
}
.top-bar__actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.top-cta{
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg, var(--orange), #ff8a3d);
  color:#fff !important;
  font-family:var(--head); font-weight:700; font-size:13px;
  letter-spacing:.01em;
  padding:7px 16px; border-radius:var(--pill);
  box-shadow:0 6px 16px rgba(244,115,31,.35);
  white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.top-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(244,115,31,.45); color:#fff !important; }
.top-cta .icon{ width:15px; height:15px; transition:transform .3s var(--ease); }
.top-cta:hover .icon{ transform:translateX(3px); }
.top-link{
  display:inline-flex; align-items:center; gap:7px;
  color:#f4e7d4;
  font-family:var(--head); font-weight:700; font-size:13px;
  padding:6px 14px; border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.28);
  white-space:nowrap;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.top-link:hover, .top-link[aria-current="page"]{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep); }
.top-link .icon{ width:15px; height:15px; }
.top-social{ display:flex; align-items:center; gap:8px; }
.top-social a{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#f4e7d4;
  transition:background .25s ease, color .25s ease;
}
.top-social a:hover{ background:var(--gold); color:var(--navy-deep); transform:translateY(-2px); }
.top-social .icon{ width:15px; height:15px; }

/* =========================================================
   Header / nav
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  box-shadow:0 2px 0 rgba(11,42,107,.04);
  transition:box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.nav-row{
  min-height:92px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  min-width:0;
}
.brand__crest{
  position:relative;
  width:64px; height:64px;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, var(--royal), var(--navy));
  box-shadow:var(--shadow-sm), inset 0 0 0 3px rgba(255,255,255,.18);
  flex:none;
}
.brand__crest img{ width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.brand__crest::after{
  content:""; position:absolute; inset:-4px;
  border-radius:50%; border:2px dashed rgba(244,178,26,.55);
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.brand__text strong{
  display:block;
  font-family:var(--head);
  font-weight:800;
  font-size:19.5px;
  line-height:1.08;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.brand__text small{
  display:block;
  font-family:var(--script);
  font-weight:600;
  color:var(--orange);
  font-size:18px;
  line-height:1;
  margin-top:3px;
}
.brand__tag{
  font-family:var(--head);
  font-weight:600;
  font-size:11.4px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sky-deep);
  margin-top:2px;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  flex:1;
  min-width:0;
}
.main-nav > a, .nav-item{
  position:relative;
  padding:10px 10px;
  font-family:var(--head);
  font-weight:600;
  font-size:15.5px;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
  transition:color .2s ease;
}
.main-nav > a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:8px;
  height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--orange), var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.main-nav > a:hover, .nav-item:hover{ color:var(--royal); }
.main-nav > a:hover::after, .main-nav > a.is-active::after{ transform:scaleX(1); }
.main-nav > a.is-active, .nav-item.is-active{ color:var(--royal); }
.nav-item.is-active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:8px;
  height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--orange), var(--gold));
}

/* dropdown */
.has-drop{ cursor:pointer; position:relative; }
.drop-panel{
  position:absolute; top:100%; left:0;
  min-width:252px;
  background:var(--paper);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow);
  padding:10px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s var(--ease), visibility .25s;
  z-index:5;
}
.has-drop:hover .drop-panel, .has-drop:focus-within .drop-panel{ opacity:1; visibility:visible; transform:translateY(0); }
/* the right-most dropdown anchors to its right edge so it cannot spill past the viewport */
.main-nav > .has-drop:last-of-type .drop-panel{ left:auto; right:0; }
.drop-panel a{
  display:flex; align-items:center; gap:9px;
  padding:11px 13px; border-radius:8px;
  color:var(--ink-2); font-weight:500; font-size:15px;
}
.drop-panel a .icon{ width:17px; height:17px; color:var(--sky); }
.drop-panel a:hover{ background:var(--tint-sky); color:var(--navy); }


.menu-toggle{
  display:none;
  width:46px; height:46px; border-radius:12px;
  border:0; cursor:pointer;
  background:var(--navy); color:#fff;
  position:relative;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:2px; background:#fff; border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .2s ease;
}
.menu-toggle span::before{ transform:translate(-50%,-7px); }
.menu-toggle span::after{ transform:translate(-50%,7px); }
.menu-toggle.is-open span{ background:transparent; }
.menu-toggle.is-open span::before{ transform:translate(-50%,-50%) rotate(45deg); }
.menu-toggle.is-open span::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 28px;
  border-radius:var(--pill);
  font-family:var(--head); font-weight:700; font-size:15px;
  border:0; cursor:pointer; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn .icon{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover .icon{ transform:translateX(4px); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn-orange{ background:linear-gradient(135deg, var(--orange), #ff8a3d); color:#fff; box-shadow:0 12px 26px rgba(244,115,31,.36); }
.btn-orange:hover{ box-shadow:0 16px 32px rgba(244,115,31,.5); }
.btn-royal{ background:linear-gradient(135deg, var(--royal), var(--sky)); color:#fff; box-shadow:0 12px 26px rgba(28,69,207,.36); }
.btn-royal:hover{ box-shadow:0 16px 32px rgba(28,69,207,.5); }
.btn-gold{ background:linear-gradient(135deg, var(--gold), #ffd25e); color:var(--navy-deep); box-shadow:0 12px 26px rgba(244,178,26,.36); }
.btn-gold:hover{ box-shadow:0 16px 32px rgba(244,178,26,.5); }
.btn-outline{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
.btn-outline:hover{ background:#fff; color:var(--navy); }
.btn-white{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
.btn-white:hover{ box-shadow:var(--shadow); }
.btn-block{ width:100%; }

/* =========================================================
   Section scaffolding + headings
   ========================================================= */
.section{ padding:92px 0; position:relative; }
.section--tight{ padding:64px 0; }
.section-head{ max-width:760px; margin:0 auto 50px; text-align:center; }
.section-head.left{ margin:0 0 40px; text-align:left; }
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 14px;
  font-family:var(--head); font-weight:700;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sky-deep);
}
.eyebrow::before, .eyebrow::after{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after{ background:linear-gradient(90deg, var(--gold), transparent); }
.eyebrow.left::before{ display:none; }
.section h2{
  margin:0 0 16px;
  font-family:var(--head); font-weight:800;
  font-size:clamp(28px, 3.5vw, 42px);
  line-height:1.12; color:var(--navy);
  letter-spacing:-.01em;
}
.section h2 span{ color:var(--orange); }
.section h2 .accent-sky{ color:var(--sky-deep); }
.section h2 .accent-green{ color:var(--green); }
.section--dark h2{ color:#fff; }
.lead{ margin:0 auto; max-width:680px; color:var(--ink-2); font-size:16px; }

/* =========================================================
   Shared inner-page foundations
   ========================================================= */
.inner-hero{
  position:relative;
  min-height:460px;
  display:grid;
  align-items:end;
  padding:104px 0 84px;
  background:var(--hero-img) center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.inner-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:6px;
  background:linear-gradient(90deg,var(--orange),var(--gold),var(--green),var(--sky));
}
.inner-hero__inner{ position:relative; z-index:1; }
.inner-hero h1{
  margin:0;
  max-width:820px;
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(34px,4vw,54px);
  line-height:1.08;
  letter-spacing:0;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 14px rgba(30,4,4,.55);
}
.content-prose{ max-width:76ch; }
.content-prose h2,
.content-prose h3,
.content-prose h4{
  margin:0 0 14px;
  font-family:var(--head);
  line-height:1.18;
  color:var(--navy);
  letter-spacing:0;
}
.content-prose h2{ font-size:clamp(26px,3vw,38px); }
.content-prose h3{ font-size:clamp(21px,2.2vw,28px); margin-top:22px; }
.content-prose h4{ font-size:18px; margin-top:18px; color:var(--ink); }
.content-prose p{ margin:0 0 15px; font-size:var(--text-base); line-height:var(--leading-editorial); }
.content-prose ul{ margin:14px 0 0; padding-left:22px; }
.content-prose li{ margin:7px 0; line-height:1.62; }
.content-prose blockquote{
  margin:20px 0 0;
  padding:16px 18px;
  border-left:5px solid var(--gold);
  background:#fff;
  border-radius:10px;
  color:var(--ink);
}
.prose-justify,
.content-prose.prose-justify p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

@media (max-width:640px){
  .prose-justify,
  .content-prose.prose-justify p{
    text-align:left;
    hyphens:none;
  }
}
.inner-media{ margin:0; }
.inner-media img{
  width:100%;
  object-fit:cover;
  object-position:center;
}
.table-scroll{
  overflow-x:auto;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.table-scroll table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:15px;
}
.table-scroll th,
.table-scroll td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
}
.table-scroll th{
  background:var(--cream);
  color:var(--navy);
  font-weight:800;
}
.table-scroll tr:last-child td{ border-bottom:0; }
.on-dark .table-scroll{ border-color:rgba(255,255,255,.18); }
.on-dark .table-scroll th,
.on-dark .table-scroll td{ color:var(--ink); }

/* =========================================================
   Decorative motifs
   ========================================================= */
.dots{ background-image:radial-gradient(rgba(28,69,207,.16) 1.6px, transparent 1.6px); background-size:18px 18px; }
.dots-light{ background-image:radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px); background-size:18px 18px; }
.confetti{ position:absolute; pointer-events:none; opacity:.5; }

/* corner brackets on a media frame */
.frame{ position:relative; }
.frame::before, .frame::after{
  content:""; position:absolute; width:30px; height:30px;
  border:3px solid var(--gold); z-index:2;
}
.frame::before{ top:-10px; left:-10px; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.frame::after{ bottom:-10px; right:-10px; border-left:0; border-top:0; border-bottom-right-radius:8px; }
.frame--sky::before, .frame--sky::after{ border-color:var(--sky); }

/* swoosh divider between sections */
.wave{ position:relative; line-height:0; }
.wave svg{ display:block; width:100%; height:60px; }
.wave.flip svg{ transform:rotate(180deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  background:#400606;
  overflow:hidden;
  line-height:0;
}
.hero__banner{ display:block; width:100%; height:auto; }
.hero > :not(.hero__banner):not(.hero-band){ display:none; }
.hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(440px circle at var(--mx,70%) var(--my,30%), rgba(244,178,26,.1), transparent 65%);
  opacity:0; transition:opacity .5s ease;
}
.hero:hover .hero__glow{ opacity:.7; }
.hero__inner{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:40px; align-items:center; }

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);
  padding:8px 16px; border-radius:var(--pill);
  font-family:var(--head); font-weight:600; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:22px;
}
.hero-badge .icon{ width:16px; height:16px; color:var(--gold); }
.hero h1{
  margin:0;
  font-family:var(--head); font-weight:800;
  font-size:clamp(36px, 5vw, 62px);
  line-height:1.04; letter-spacing:-.01em;
  text-transform:uppercase;
  text-shadow:0 3px 14px rgba(0,0,0,.18);
}
.hero h1 .grad{
  background:linear-gradient(120deg, var(--gold), #ffd25e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__script{
  font-family:var(--script); font-weight:700;
  font-size:clamp(28px, 3.4vw, 40px);
  color:var(--gold);
  margin:14px 0 6px; line-height:1.1;
  text-transform:none;
}
.hero p.hero-text{ max-width:560px; margin:0 0 28px; font-size:17px; color:#f4e7d4; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* hero rating / proof */
.hero__proof{
  display:flex; align-items:center; gap:16px;
  margin-top:30px; flex-wrap:wrap;
}
.hero__proof .stars{ display:inline-flex; gap:2px; color:var(--gold); }
.hero__proof .stars .icon{ width:18px; height:18px; fill:currentColor; stroke:none; }
.hero__proof small{ font-size:13px; color:#f0e2cd; }

/* hero floating card */
.hero-card{
  position:relative;
  background:rgba(255,255,255,.95);
  border-radius:var(--r-lg);
  padding:30px;
  box-shadow:0 16px 36px rgba(62,39,35,.16);
  color:var(--ink-2);
}
.hero-card__stamp{
  position:absolute; top:-26px; right:-16px;
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange), #ff8a3d);
  color:#fff; display:grid; place-items:center; text-align:center;
  font-family:var(--head); font-weight:800; line-height:1.05;
  box-shadow:var(--shadow-sm); transform:rotate(5deg);
  border:3px solid #fff;
}
.hero-card__stamp b{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.hero-card__stamp span{ display:block; font-family:var(--script); font-size:18px; font-weight:700; }
.hero-card h3{ margin:0 0 14px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:18px; }
.hero-quick{ display:grid; gap:12px; }
.hero-quick div{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--ink); }
.hero-quick .iq{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center; color:#fff;
}
.hero-quick .iq .icon{ width:19px; height:19px; }
.iq-1{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.iq-2{ background:linear-gradient(135deg,var(--green),#34d27f); }
.iq-3{ background:linear-gradient(135deg,var(--orange),#ff9a52); }
.iq-4{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }

/* feature badge band overlapping hero bottom */
.hero-band{
  position:static;
  z-index:5;
  width:min(1220px, calc(100% - 40px));
  margin:24px auto;
  transform:none;
  line-height:normal;
}
.feature-pills{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.feature-pills a{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:98px;
  padding:24px 22px;
  border-right:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
  transition:background .25s ease, color .25s ease, transform .25s var(--ease);
}
.feature-pills a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--fp-img) center/cover no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity .32s ease, transform .5s var(--ease);
}
.feature-pills a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(86,12,12,.9), rgba(139,26,26,.62));
  opacity:0;
  transition:opacity .32s ease;
}
.feature-pills a:last-child{ border-right:0; }
.feature-pills .fp-ico{
  width:50px; height:50px; border-radius:14px; flex:none;
  display:grid; place-items:center; color:#fff;
  transition:transform .3s var(--ease);
}
.feature-pills .fp-ico .icon{ width:24px; height:24px; }
.feature-pills a:hover::before,
.feature-pills a:focus-visible::before{
  opacity:1;
  transform:scale(1);
}
.feature-pills a:hover::after,
.feature-pills a:focus-visible::after{ opacity:1; }
.feature-pills a:hover .fp-ico,
.feature-pills a:focus-visible .fp-ico{ transform:rotate(-8deg) scale(1.08); background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.feature-pills b{ display:block; font-family:var(--head); font-weight:800; color:var(--navy); font-size:17px; }
.feature-pills span{ display:block; font-size:12.5px; color:var(--ink-3); font-weight:500; }
.feature-pills a > span{ position:relative; z-index:1; }
.feature-pills a:hover b,
.feature-pills a:focus-visible b,
.feature-pills a:hover span span,
.feature-pills a:focus-visible span span{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.fp-1{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.fp-2{ background:linear-gradient(135deg,var(--gold),#ffd25e); color:var(--navy-deep); }
.fp-3{ background:linear-gradient(135deg,var(--green),#34d27f); }
.fp-4{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }

/* =========================================================
   About
   ========================================================= */
.about-section{ background:var(--cream); padding-top:92px; position:relative; }
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:60px; align-items:center; }

/* ---- organic crest collage (distinct from rectangular photo cards elsewhere) ---- */
.about-media{ position:relative; min-height:460px; display:grid; place-items:center; }
.about-media__ring{
  position:absolute; inset:6% 14%;
  border-radius:50%;
  border:2px dashed rgba(245,166,35,.55);
  background:radial-gradient(circle at 50% 42%, rgba(245,166,35,.14), transparent 66%);
}
.about-blob{
  position:relative; z-index:2;
  width:min(100%, 420px); aspect-ratio:1/1;
  border-radius:46% 54% 53% 47% / 57% 47% 53% 43%;
  overflow:hidden; box-shadow:var(--shadow-lg);
  border:6px solid #fff;
}
.about-blob img{ width:100%; height:100%; object-fit:cover; display:block; }

/* circular gold "EST. 2026" seal */
.about-seal{
  position:absolute; left:4%; top:4%; z-index:4;
  width:118px; height:118px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--gold-light), var(--sky) 72%);
  color:var(--navy); display:grid; place-items:center; text-align:center;
  box-shadow:var(--shadow); border:4px solid #fff;
}
.about-seal__inner{ display:grid; justify-items:center; gap:2px; line-height:1; }
.about-seal b{ font-size:11px; letter-spacing:.22em; }
.about-seal strong{ font-family:var(--head); font-weight:800; font-size:30px; color:var(--navy-deep); }
.about-seal small{ font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); }

/* confetti accents scattered around the collage */
.confetti{ position:absolute; z-index:3; }
.confetti .icon{ width:26px; height:26px; }
.cf-1{ left:2%; bottom:14%; color:var(--magenta); }
.cf-2{ right:2%; top:10%; color:var(--green); }
.cf-3{ right:12%; bottom:6%; color:var(--orange); }
.cf-3 .icon{ width:18px; height:18px; }

/* rounded-square inset side photo */
.about-sub{
  position:absolute; right:2%; bottom:4%; z-index:3;
  width:34%; aspect-ratio:4/3;
  border:5px solid #fff; border-radius:var(--r-sm);
  box-shadow:var(--shadow); overflow:hidden;
}
.about-sub img{ width:100%; height:100%; object-fit:cover; }

/* ---- body ---- */
.about-body h2{ margin:6px 0 16px; }
.about-body p{ margin:0 0 14px; }

/* bracket-framed pillar tiles (distinct from tick-list & numbered cards) */
.about-pillars{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0 20px; }
.pillar{
  position:relative; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 14px 13px 16px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.pillar::before, .pillar::after{ content:""; position:absolute; width:11px; height:11px; border:2.5px solid var(--gold); }
.pillar::before{ top:6px; left:6px; border-right:0; border-bottom:0; }
.pillar::after{ bottom:6px; right:6px; border-left:0; border-top:0; }
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pillar__ic{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--royal),var(--sky));
}
.pillar__ic .icon{ width:20px; height:20px; }
.pillar:nth-child(2) .pillar__ic{ background:linear-gradient(135deg,var(--green),#34d27f); }
.pillar:nth-child(3) .pillar__ic{ background:linear-gradient(135deg,var(--orange),#ff8a3d); }
.pillar:nth-child(4) .pillar__ic{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }
.pillar b{ display:block; font-family:var(--head); font-weight:700; color:var(--navy); font-size:14px; line-height:1.2; }
.pillar > div > span{ display:block; font-size:11.5px; color:var(--ink-2); }

/* script motto flourish */
.about-motto{
  font-family:var(--script); font-weight:600;
  font-size:28px; line-height:1.1; color:var(--sky-deep);
  margin:0 0 18px;
}

.about-cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   Vision / Mission / Philosophy — numbered pastel cards
   ========================================================= */
.vision-section{ background:var(--paper); position:relative; }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{
  position:relative;
  border-radius:var(--r);
  padding:38px 30px 32px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(11,42,107,.05);
  transition:transform .35s var(--ease), box-shadow .35s ease;
}
.value-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.value-card__num{
  position:absolute; top:14px; right:20px;
  font-family:var(--head); font-weight:800; font-size:62px;
  color:rgba(11,42,107,.07); line-height:1;
}
.value-card .icon-badge{
  width:62px; height:62px; border-radius:18px;
  display:grid; place-items:center; color:#fff; margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.value-card .icon-badge .icon{ width:30px; height:30px; }
.value-card h3{ margin:0 0 10px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:21px; }
.value-card p{ margin:0; font-size:14.5px; }
.value-card .kicker{ display:block; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.v-sky{ background:var(--tint-sky); } .v-sky .icon-badge{ background:linear-gradient(135deg,var(--royal),var(--sky)); } .v-sky .kicker{ color:var(--sky-deep); }
.v-gold{ background:var(--tint-gold); } .v-gold .icon-badge{ background:linear-gradient(135deg,var(--gold),#ffd25e); color:var(--navy-deep); } .v-gold .kicker{ color:var(--gold-deep); }
.v-green{ background:var(--tint-green); } .v-green .icon-badge{ background:linear-gradient(135deg,var(--green),#34d27f); } .v-green .kicker{ color:#128a45; }

/* =========================================================
   Stats — full-bleed dark band
   ========================================================= */
.stats-section{
  background:
    linear-gradient(rgba(86,12,12,.93), rgba(86,12,12,.93)),
    url("assets/playground.JPG") center/cover fixed no-repeat;
  color:#fff;
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ text-align:center; padding:20px 18px; border-right:1px solid rgba(255,255,255,.12); }
.stat:last-child{ border-right:0; }
.stat .ic-circle{
  width:58px; height:58px; border-radius:50%; margin:0 auto 14px;
  display:grid; place-items:center;
  background:rgba(244,178,26,.14); color:var(--gold);
  border:1.5px solid rgba(244,178,26,.4);
}
.stat .ic-circle .icon{ width:26px; height:26px; }
.stat strong{ display:block; font-family:var(--head); font-weight:800; font-size:44px; color:var(--gold); line-height:1; }
.stat span{ display:block; margin-top:8px; font-family:var(--head); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#f0e2cd; }

/* =========================================================
   Academics - grade level cards
   ========================================================= */
.academics-section{ background:var(--cream); }
.acad-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.acad-card{
  position:relative;
  border-radius:var(--r); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s ease;
  display:flex; flex-direction:column;
  isolation:isolate;
}
.acad-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--acad-img) center/cover no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity .32s ease, transform .55s var(--ease);
}
.acad-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(86,12,12,.42), rgba(86,12,12,.58));
  opacity:0;
  transition:opacity .32s ease;
}
.acad-card:hover,
.acad-card:focus-within{ transform:translateY(-8px); box-shadow:var(--shadow); }
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1::before,
.acad-card:hover::before,
.acad-card:focus-within::before{
  opacity:1;
  transform:scale(1);
}
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1::after,
.acad-card:hover::after,
.acad-card:focus-within::after{ opacity:1; }
.acad-card__top{
  position:relative;
  z-index:2;
  padding:22px 24px; color:#fff;
  transition:opacity .25s ease;
}
.acad-card__top .pill{
  display:inline-block; background:rgba(255,255,255,.2);
  padding:4px 12px; border-radius:var(--pill);
  font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.06em;
  transition:background .32s ease, color .32s ease, box-shadow .32s ease;
}
.acad-card__top .icon{ position:absolute; right:18px; top:18px; width:30px; height:30px; opacity:.85; }
.acad-card__top h3{ margin:12px 0 0; font-family:var(--head); font-weight:700; font-size:19px; }
.acad-card__body{ position:relative; z-index:2; padding:20px 24px 24px; flex:1; display:flex; flex-direction:column; transition:opacity .25s ease; }
.acad-card__body p{ margin:0 0 14px; font-size:14px; }
.acad-card__body .subs{ font-family:var(--head); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; transition:color .32s ease; }
.acad-card__body .tags{ display:flex; flex-wrap:wrap; gap:6px; }
.acad-card__body .tags span{ font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:7px; background:var(--cream-2); color:var(--navy); transition:background .32s ease, color .32s ease; }
.acad-card:hover .acad-card__top,
.acad-card:focus-within .acad-card__top,
.acad-card:hover .acad-card__body,
.acad-card:focus-within .acad-card__body{
  opacity:1;
}
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1 .acad-card__top,
.acad-card:hover .acad-card__top,
.acad-card:focus-within .acad-card__top{
  background:transparent;
}
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1 .acad-card__body,
.acad-card:hover .acad-card__body,
.acad-card:focus-within .acad-card__body,
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1 .acad-card__body .subs,
.acad-card:hover .acad-card__body .subs,
.acad-card:focus-within .acad-card__body .subs{
  color:#fff;
}
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1 .acad-card__body p,
.acad-card:hover .acad-card__body p,
.acad-card:focus-within .acad-card__body p{
  text-shadow:0 2px 12px rgba(0,0,0,.32);
}
.acad-grid:not(:hover):not(:focus-within) .acad-card.a1 .acad-card__body .tags span,
.acad-card:hover .acad-card__body .tags span,
.acad-card:focus-within .acad-card__body .tags span{
  background:rgba(255,255,255,.88);
  color:var(--navy);
}
.a1 .acad-card__top{ background:linear-gradient(135deg,#128a45,var(--green)); }
.a2 .acad-card__top{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.a3 .acad-card__top{ background:linear-gradient(135deg,#b4510e,var(--orange)); }
.a4 .acad-card__top{ background:linear-gradient(135deg,#7a2391,var(--magenta)); }

/* =========================================================
   Senior Secondary streams
   ========================================================= */
.streams-section{ background:var(--paper); }
.streams-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.stream-card{
  border-radius:var(--r); padding:26px 20px; text-align:center;
  background:#fff; box-shadow:var(--shadow-sm);
  border-top:5px solid var(--royal);
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.stream-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); }
.stream-card .code{
  width:54px; height:54px; border-radius:50%; margin:0 auto 14px;
  display:grid; place-items:center;
  font-family:var(--head); font-weight:800; font-size:22px; color:#fff;
}
.stream-card h3{ margin:0 0 10px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:16px; min-height:42px; }
.stream-card .subs{ font-size:13px; color:var(--ink-2); }
.s1{ border-top-color:var(--green); } .s1 .code{ background:linear-gradient(135deg,var(--green),#34d27f); }
.s2{ border-top-color:var(--royal); } .s2 .code{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.s3{ border-top-color:var(--sky-deep); } .s3 .code{ background:linear-gradient(135deg,var(--sky-deep),var(--sky)); }
.s4{ border-top-color:var(--gold-deep); } .s4 .code{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--navy-deep); }
.s5{ border-top-color:var(--magenta); } .s5 .code{ background:linear-gradient(135deg,#7a2391,var(--magenta)); }
.streams-note{ text-align:center; margin-top:30px; font-size:14px; color:var(--ink-2); }

/* =========================================================
   Facilities — feature + carousel
   ========================================================= */
.facilities-section{ background:var(--cream); }
.facility-layout{ display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; align-items:stretch; }
.facility-feature{
  position:relative; border-radius:var(--r); overflow:hidden;
  color:#fff; box-shadow:var(--shadow);
}
.facility-feature img{ width:100%; height:100%; min-height:420px; object-fit:cover; transition:transform .6s var(--ease); }
.facility-feature:hover img{ transform:scale(1.06); }
.facility-feature__overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px;
  background:linear-gradient(transparent, rgba(60,9,9,.92));
}
.facility-feature__overlay h3{ display:flex; align-items:center; gap:9px; margin:0 0 8px; font-family:var(--head); font-weight:700; font-size:23px; color:#fff; }
.facility-feature__overlay h3 .icon{ color:var(--gold); }
.facility-feature__overlay p{ margin:0; color:#ecdcc2; font-size:14.5px; }

.facility-slider{ position:relative; background:#fff; border-radius:var(--r); box-shadow:var(--shadow-sm); padding:26px 60px 56px; }
.slider-track{ position:relative; min-height:440px; }
.facility-card{ position:absolute; inset:0; opacity:0; transform:translateX(28px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.facility-card.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.facility-card img{ width:100%; height:330px; object-fit:cover; border-radius:var(--r-sm); transition:transform .5s var(--ease); }
.facility-card:hover img{ transform:scale(1.03); }
.facility-card h3{ display:flex; align-items:center; gap:9px; margin:18px 0 6px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:22px; }
.facility-card h3 .icon{ color:var(--orange); }
.facility-card p{ margin:0; font-size:14.5px; }
.slider-btn{
  position:absolute; top:170px; z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy); color:#fff;
  display:grid; place-items:center;
  box-shadow:var(--shadow-sm);
  transition:background .25s ease, transform .25s var(--ease);
}
.slider-btn:hover{ background:var(--orange); transform:scale(1.08); }
.prev{ left:9px; } .next{ right:9px; }
.slider-dots{ position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.slider-dots button{ width:24px; height:4px; border:0; border-radius:4px; background:var(--cream-2); cursor:pointer; transition:background .25s ease, width .25s ease; }
.slider-dots button.is-active{ background:var(--orange); width:36px; }

.facility-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; }
.facility-mini .fm{
  border-radius:var(--r-sm); padding:18px 16px; text-align:center;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.facility-mini .fm:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.facility-mini .fm .icon{ width:30px; height:30px; }
.facility-mini .fm span{ display:block; margin-top:8px; font-family:var(--head); font-weight:600; font-size:13px; color:var(--navy); }
.fm-1 .icon{ color:var(--royal); } .fm-2 .icon{ color:var(--green); } .fm-3 .icon{ color:var(--orange); } .fm-4 .icon{ color:var(--magenta); }

/* =========================================================
   Why choose us
   ========================================================= */
.choose-section{ background:var(--paper); }
.choose-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.choose-list{ display:grid; gap:14px; }
.choose-item{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--cream); border-radius:var(--r); padding:18px 20px;
  transition:transform .3s var(--ease), box-shadow .3s ease, background .3s ease;
}
.choose-item:hover{ transform:translateX(6px); box-shadow:var(--shadow-sm); background:#fff; }
.choose-item .num{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  font-family:var(--head); font-weight:800; font-size:17px; color:#fff;
}
.choose-item b{ display:block; font-family:var(--head); font-weight:700; color:var(--navy); font-size:16px; }
.choose-item p{ margin:2px 0 0; font-size:13.5px; color:var(--ink-2); }
.c1 .num{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.c2 .num{ background:linear-gradient(135deg,var(--green),#34d27f); }
.c3 .num{ background:linear-gradient(135deg,var(--orange),#ff8a3d); }
.c4 .num{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }
.choose-media{ position:relative; }
.choose-media img{ width:100%; height:500px; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.choose-media .badge{
  position:absolute; left:-16px; bottom:24px;
  background:#fff; border-radius:var(--r); padding:16px 20px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px;
}
.choose-media .badge .big{ font-family:var(--head); font-weight:800; font-size:34px; color:var(--orange); line-height:1; }
.choose-media .badge small{ display:block; font-family:var(--head); font-weight:600; font-size:12px; color:var(--ink); max-width:120px; }

/* =========================================================
   Student life / activities — image mosaic + activity chips
   ========================================================= */
.life-section{ background:var(--navy-deep); color:#fff; position:relative; overflow:hidden; }
.life-section .dots-light{ position:absolute; inset:0; opacity:.5; }
.life-section .wrap{ position:relative; }
.life-section h2{ color:#fff; }
.life-section .eyebrow{ color:var(--gold); }
.life-section .eyebrow::before, .life-section .eyebrow::after{ background:linear-gradient(90deg,transparent,var(--gold)); }
.mosaic{ display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-auto-rows:220px; gap:16px; }
.tile{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(45,12,10,.82) 100%); }
.tile:hover img{ transform:scale(1.08); }
.tile.tall{ grid-row:span 2; }
.tile.wide{ grid-column:span 2; }
.tile figcaption{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.04em;
  background:var(--gold); color:var(--navy-deep);
  padding:7px 13px; border-radius:var(--pill);
  transition:background .3s ease, transform .3s var(--ease);
}
.tile:hover figcaption{ background:#fff; transform:translateY(-3px); }

.activities{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:36px; }
.activities span{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:9px 16px; border-radius:var(--pill);
  font-family:var(--head); font-weight:600; font-size:13px; color:#f1e4d2;
  transition:background .25s ease, transform .25s var(--ease);
}
.activities span .icon{ width:16px; height:16px; color:var(--gold); }
.activities span:hover{ background:var(--gold); color:var(--navy-deep); transform:translateY(-2px); }
.activities span:hover .icon{ color:var(--navy-deep); }

/* =========================================================
   Leadership / management — circular + messages
   ========================================================= */
.leader-section{ background:var(--cream); }
.leader-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.leader-card{
  background:#fff; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s ease;
}
.leader-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.leader-card__head{
  padding:30px 24px 0; position:relative;
  background:linear-gradient(180deg, var(--tint-sky), #fff);
}
.leader-card.s2 .leader-card__head{ background:linear-gradient(180deg, var(--tint-gold), #fff); }
.leader-card.s3 .leader-card__head{ background:linear-gradient(180deg, var(--tint-green), #fff); }
.leader-avatar{
  width:120px; height:120px; border-radius:50%; margin:0 auto;
  display:grid; place-items:center; color:#fff; position:relative;
  box-shadow:var(--shadow); border:5px solid #fff;
}
.leader-avatar .icon{ width:56px; height:56px; }
.leader-avatar::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:2px dashed rgba(11,42,107,.18); }
.s1 .leader-avatar{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }
.s2 .leader-avatar{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.s3 .leader-avatar{ background:linear-gradient(135deg,var(--green),#34d27f); }
.leader-card__body{ padding:22px 26px 28px; }
.leader-card h3{ margin:0 0 2px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:18px; }
.leader-card .qual{ font-size:13px; color:var(--ink-3); margin:0 0 12px; }
.leader-card .role{
  display:inline-block; font-family:var(--head); font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  padding:6px 16px; border-radius:var(--pill); margin-bottom:16px;
}
.s1 .role{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }
.s2 .role{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.s3 .role{ background:linear-gradient(135deg,var(--green),#34d27f); }
.leader-card .msg{ font-size:13.5px; color:var(--ink-2); font-style:italic; }
.leader-card .msg::before{ content:"“"; color:var(--gold); font-size:24px; font-style:normal; font-weight:700; vertical-align:-6px; margin-right:2px; }

/* =========================================================
   Admissions
   ========================================================= */
.admit-section{
  background:
    linear-gradient(120deg, rgba(60,9,9,.95), rgba(110,22,22,.86)),
    url("assets/front.png") center/cover no-repeat;
  color:#fff;
}
.admit-section h2{ color:#fff; }
.admit-section .eyebrow{ color:var(--gold); }
.admit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-top:20px; }
.steps{ display:grid; gap:14px; }
.step{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:16px 18px;
  transition:background .25s ease, transform .25s var(--ease);
}
.step:hover{ background:rgba(255,255,255,.12); transform:translateX(5px); }
.step .n{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-family:var(--head); font-weight:800; font-size:16px;
  background:linear-gradient(135deg,var(--orange),#ff8a3d); color:#fff;
}
.step b{ display:block; font-family:var(--head); font-weight:700; font-size:15px; color:#fff; }
.step span{ font-size:13px; color:#f0e2cd; }
.doc-card{
  background:#fff; color:var(--ink-2); border-radius:var(--r-lg);
  padding:30px; box-shadow:var(--shadow-lg);
}
.doc-card h3{ display:flex; align-items:center; gap:10px; margin:0 0 16px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:20px; }
.doc-card h3 .icon{ color:var(--orange); }
.doc-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.doc-card li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:500; color:var(--ink); }
.doc-card li .ic{ width:22px; height:22px; border-radius:50%; flex:none; margin-top:1px; display:grid; place-items:center; background:var(--tint-green); color:var(--green); }
.doc-card li .ic .icon{ width:13px; height:13px; stroke-width:2.6; }
.doc-card .fee{
  margin-top:18px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--ink-2);
}
.doc-card .fee b{ color:var(--navy); }

/* =========================================================
   Parents' corner — index-card policies
   ========================================================= */
.rules-section{ background:var(--cream); }
.policy-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.policy-card{
  background:#fff; border-radius:var(--r); padding:28px 22px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.policy-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.policy-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; }
.p1::before{ background:linear-gradient(90deg,var(--royal),var(--sky)); }
.p2::before{ background:linear-gradient(90deg,var(--orange),#ff9a52); }
.p3::before{ background:linear-gradient(90deg,var(--green),#34d27f); }
.p4::before{ background:linear-gradient(90deg,var(--magenta),#f56aa6); }
.policy-card .pico{
  width:50px; height:50px; border-radius:14px; margin-bottom:14px;
  display:grid; place-items:center; color:#fff;
}
.policy-card .pico .icon{ width:24px; height:24px; }
.p1 .pico{ background:linear-gradient(135deg,var(--royal),var(--sky)); }
.p2 .pico{ background:linear-gradient(135deg,var(--orange),#ff9a52); }
.p3 .pico{ background:linear-gradient(135deg,var(--green),#34d27f); }
.p4 .pico{ background:linear-gradient(135deg,var(--magenta),#f56aa6); }
.policy-card h3{ margin:0 0 8px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:17px; }
.policy-card p{ margin:0; font-size:13.5px; }

/* =========================================================
   Contact
   ========================================================= */
.contact-section{ background:var(--paper); }
.contact-grid{ display:grid; grid-template-columns:1fr 460px; gap:44px; align-items:start; }
.contact-info .address{ display:flex; align-items:flex-start; gap:12px; font-family:var(--head); font-weight:600; font-size:18px; color:var(--navy); margin-bottom:8px; }
.contact-info .address .icon{ color:var(--orange); width:24px; height:24px; flex:none; margin-top:3px; }
.contact-info .meta{ display:grid; gap:14px; margin:22px 0; }
.contact-info .meta a, .contact-info .meta div{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink); font-weight:600; }
.contact-info .meta .icon{ width:20px; height:20px; color:var(--royal); }
.timings{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.timings .trow{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--cream); }
.timings .trow strong{ display:flex; align-items:center; gap:8px; font-family:var(--head); font-weight:700; color:var(--navy); font-size:14px; }
.timings .trow strong .icon{ width:16px; height:16px; color:var(--orange); }
.timings .trow span{ font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--ink-2); }
.map-embed{ margin-top:22px; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:240px; border:0; display:block; }

.enquiry-form{
  background:linear-gradient(160deg, var(--navy), var(--navy-deep));
  border-radius:var(--r-lg); padding:32px; color:#fff;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.enquiry-form::before{ content:""; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(244,178,26,.2), transparent 70%); }
.enquiry-form h3{ position:relative; font-family:var(--head); font-weight:700; color:#fff; margin:0 0 6px; font-size:22px; }
.enquiry-form .sub{ position:relative; margin:0 0 20px; color:#f0e2cd; font-size:13.5px; }
.field{ position:relative; margin-bottom:14px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea{
  width:100%; min-height:48px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  border-radius:12px; padding:13px 15px; font:inherit; color:#fff;
  transition:border-color .2s ease, background .2s ease;
}
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder{ color:#b89a6e; }
.enquiry-form select{ color:#f4e7d4; }
.enquiry-form select option{ color:#111; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(255,255,255,.1);
}
.enquiry-form textarea{ min-height:96px; resize:vertical; }
.form-note{ position:relative; margin:14px 0 0; font-size:12px; color:#b89a6e; text-align:center; }

/* =========================================================
   CTA strip
   ========================================================= */
.cta-strip{ background:linear-gradient(120deg, var(--orange), #ff7a2a); color:#fff; text-align:center; padding:54px 0; position:relative; overflow:hidden; }
.cta-strip .dots-light{ position:absolute; inset:0; opacity:.4; }
.cta-strip .wrap{ position:relative; }
.cta-strip h2{ color:#fff; margin:0 0 6px; font-size:clamp(26px,3vw,38px); }
.cta-strip h2 span{ color:var(--navy-deep); }
.cta-strip p{ margin:0 auto 24px; max-width:560px; color:#fff; font-weight:500; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--navy-deep); color:#d9c4a4; padding-top:64px; position:relative; }
.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--orange),var(--gold),var(--green),var(--sky),var(--royal)); }
.footer-grid{ display:grid; grid-template-columns:1.5fr .8fr .9fr 1.1fr; gap:34px; }
.footer-brand{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.footer-brand .brand__crest{ width:50px; height:50px; }
.footer-brand .brand__crest img{ width:40px; height:40px; }
.footer-brand strong{ font-family:var(--head); font-weight:800; color:#fff; font-size:17px; text-transform:uppercase; line-height:1.15; }
.footer-brand small{ font-family:var(--script); color:var(--gold); font-size:17px; }
.footer p{ font-size:14px; line-height:1.7; margin:0 0 16px; }
.footer-tagline{ color:var(--gold); font-weight:600; }
.footer h4{ font-family:var(--head); font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.1em; font-size:13px; margin:0 0 16px; }
.footer a.flink, .footer span.flink{ display:flex; align-items:center; gap:9px; margin:9px 0; font-size:14px; color:#d9c4a4; transition:color .2s ease, transform .2s var(--ease); }
.footer a.flink .icon{ width:16px; height:16px; color:var(--gold); flex:none; }
.footer a.flink:hover{ color:#fff; transform:translateX(4px); }
.footer-bottom{
  margin-top:26px; padding:18px 0; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:#a88a5e;
}
.footer-bottom b{ color:var(--gold); }
/* designer credit: the supplied logo has a solid white background,
   so it sits in a rounded white chip rather than as a bare block */
.footer-credit{ display:inline-flex; align-items:center; gap:10px; }
.footer-credit img{
  display:block;
  height:40px; width:auto;
  padding:5px 9px;
  border-radius:8px;
  background:#fff;
}

/* =========================================================
   Floating actions
   ========================================================= */
.floating-actions{ position:fixed; right:18px; bottom:18px; z-index:35; display:grid; gap:10px; }
.fab{
  display:flex; align-items:center; gap:9px;
  min-width:54px; padding:13px 16px; border-radius:var(--pill);
  font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; box-shadow:var(--shadow);
  transition:transform .25s var(--ease);
  opacity:0; animation:fabIn .5s var(--ease) forwards;
}
.floating-actions .fab:nth-child(1){ animation-delay:.15s; }
.floating-actions .fab:nth-child(2){ animation-delay:.3s; }
.floating-actions .fab:nth-child(3){ animation-delay:.45s; }
@keyframes fabIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:translateX(0); } }
.fab .icon{ width:18px; height:18px; }
.fab-wa{ background:#25d366; }
.fab-call{ background:var(--orange); }
.fab-top{ background:var(--navy); }
.fab:hover{ transform:translateX(-4px); }
.fab-wa::before{ content:""; position:absolute; width:100%; height:100%; border-radius:inherit; border:2px solid #25d366; opacity:0; animation:ring 2.2s ease-out infinite; }
@keyframes ring{ 0%{ opacity:.7; transform:scale(1); } 100%{ opacity:0; transform:scale(1.5); } }
.fab span{ position:relative; }

/* scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; height:4px; width:0%; z-index:60; background:linear-gradient(90deg, var(--orange), var(--gold)); transition:width .1s linear; }

/* =========================================================
   Responsive
   ========================================================= */
/* below this the four footer columns get too cramped to balance,
   so they fold to two before stacking entirely at 1024 */
@media (min-width: 1025px) and (max-width: 1149px){
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:38px; }
}
/* the full nav plus the enlarged logo needs ~1240px; below that the
   links collapse into the menu toggle (script.js uses the same width) */
@media (max-width: 1239px){
  .menu-toggle{ display:block; }
  .main-nav{
    position:absolute; left:20px; right:20px; top:112px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-radius:var(--r); box-shadow:var(--shadow);
    padding:14px; display:none;
  }
  .main-nav.is-open{ display:flex; }
  .main-nav > a{ padding:13px 14px; border-radius:10px; }
  .main-nav > a::after{ display:none; }
  .main-nav > a:hover{ background:var(--tint-sky); }
  .has-drop .drop-panel{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; padding:4px 0 4px 12px; min-width:0; display:none; }
  .has-drop.is-open .drop-panel{ display:block; }
}
@media (max-width: 1024px){
  .inner-hero{ min-height:400px; padding:84px 0 68px; }
  .streams-grid{ grid-template-columns:repeat(3,1fr); }
  .facility-mini{ grid-template-columns:repeat(2,1fr); }
  .top-bar__inner{ justify-content:center; text-align:center; }
  .top-bar__contact{ justify-content:center; }

  .hero__inner{ grid-template-columns:1fr; }
  .hero-card{ display:none; }
  .hero-band{ width:min(100% - 32px, 1220px); margin:18px auto; }
  .feature-pills{ grid-template-columns:repeat(2,1fr); }
  .feature-pills a{ min-height:86px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .feature-pills a:nth-child(2n){ border-right:0; }
  .feature-pills a:nth-last-child(-n+2){ border-bottom:0; }
  .about-section{ padding-top:92px; }

  .about-grid, .choose-grid, .facility-layout, .admit-grid, .contact-grid, .footer-grid{ grid-template-columns:1fr; }
  .about-media{ min-height:auto; padding:6px 6px 28px; }
  .about-seal{ width:96px; height:96px; }
  .about-seal strong{ font-size:24px; }
  .about-pillars{ grid-template-columns:1fr 1fr; }
  .value-grid, .acad-grid, .leader-grid, .policy-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat{ border-bottom:1px solid rgba(255,255,255,.12); }
  .streams-grid{ grid-template-columns:repeat(2,1fr); }
  .mosaic{ grid-template-columns:1fr 1fr; }
  .choose-media img{ height:380px; }
}
@media (max-width: 768px){
  .inner-hero{ min-height:340px; padding:68px 0 56px; }
  .top-bar__contact{ gap:12px; }
  .top-bar__contact span{ display:none; }
  .nav-row{ min-height:82px; }
  .brand__crest{ width:56px; height:56px; }
  .brand__crest img{ width:45px; height:45px; }
  .brand__text strong{ font-size:18.5px; }
  .brand__text small{ font-size:17.5px; }
  .main-nav{ top:92px; }
  .hero-band{ margin:16px auto; }
  .feature-pills .fp-ico{ width:44px; height:44px; border-radius:12px; }
  .feature-pills b{ font-size:15px; }
  .about-section{ padding-top:72px; }
}
@media (max-width: 640px){
  .inner-hero{ min-height:300px; padding:56px 0 46px; }
  .wrap{ width:min(100% - 28px, 1220px); }
  .section{ padding:62px 0; }
  .value-grid, .acad-grid, .streams-grid, .policy-grid, .leader-grid{ grid-template-columns:1fr; }
  .feature-pills, .facility-mini{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-right:0; }
  .brand__text strong{ font-size:17px; }
  .brand__text small{ font-size:16px; }
  .brand__tag{ font-size:10.5px; letter-spacing:.08em; }
  .top-bar__contact a:nth-child(2){ display:none; }
  .top-social{ display:none; }
  .nav-row{ min-height:74px; gap:12px; }
  .brand{ gap:10px; }
  .brand__crest{ width:50px; height:50px; }
  .brand__crest img{ width:40px; height:40px; }
  .main-nav{ left:14px; right:14px; top:82px; }
  .mosaic{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .tile.tall, .tile.wide{ grid-row:auto; grid-column:auto; }
  .hero-band{
    width:min(100% - 28px, 1220px);
    margin:14px auto;
  }
  .feature-pills{ border-radius:12px; }
  .feature-pills a{ min-width:0; min-height:92px; padding:13px 12px; gap:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .feature-pills a:nth-child(2n){ border-right:0; }
  .feature-pills a:nth-last-child(-n+2){ border-bottom:0; }
  .feature-pills .fp-ico{ width:38px; height:38px; border-radius:10px; }
  .feature-pills .fp-ico .icon{ width:21px; height:21px; }
  .feature-pills b{ font-size:13.5px; line-height:1.25; }
  .feature-pills span{ min-width:0; font-size:11.5px; line-height:1.35; }
  .about-section{ padding-top:62px; }
  .about-blob{ width:min(100%, 300px); }
  .about-pillars{ grid-template-columns:1fr; }
  .about-sub{ width:42%; }
  .about-motto{ font-size:24px; }
  .facility-slider{ padding:20px 48px 62px; }
  .slider-track{ min-height:510px; }
  .facility-card img{ height:300px; }
  .facility-card h3{ font-size:20px; }
  .slider-btn{ top:145px; width:40px; height:40px; }
  .facility-mini{ gap:12px; margin-top:20px; }
  .facility-mini .fm{ min-height:104px; padding:16px 10px; display:grid; place-content:center; }
  .leader-grid{ gap:20px; }
  .leader-card__head{ padding-top:26px; }
  .leader-card__body{ padding:20px 24px 24px; }
  .leader-avatar{ width:104px; height:104px; }
  .leader-avatar .icon{ width:48px; height:48px; }
  .leader-card .msg{ max-width:280px; margin:0 auto; font-size:14px; line-height:1.7; }
  .floating-actions{ right:12px; bottom:12px; }
  .fab span{ display:none; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

/* =========================================================
   ENHANCED ANIMATIONS & HOVER EFFECTS  (additive)
   Ambient motion + hover micro-interactions for every
   section. Does NOT alter existing layout, structure,
   content or design tokens — only adds motion.
   Floats use the `translate` property so existing
   `transform` rules are never clobbered. All of this is
   auto-disabled under prefers-reduced-motion (see top).
   ========================================================= */

/* ---- shared keyframes ---- */
@keyframes floatY{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
@keyframes floatYsm{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }
@keyframes sheen{ 0%{ background-position:200% 0; } 62%,100%{ background-position:-120% 0; } }

/* ---- ambient floating (decorative stamps / badges) ---- */
.hero-card__stamp{ animation:floatYsm 6.5s ease-in-out infinite; }
.about-seal{ animation:floatYsm 5s ease-in-out .3s infinite; }
.choose-media .badge{ animation:floatYsm 5.5s ease-in-out infinite; }

/* ---- CTA strip moving sheen (purely additive pseudo) ---- */
.cta-strip::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  background-size:220% 100%;
  animation:sheen 7s ease-in-out infinite;
}

/* ---- Hero quick-highlight chips ---- */
.hero-quick .iq{ transition:transform .3s var(--ease); }
.hero-quick div:hover .iq{ transform:scale(1.05) rotate(-2deg); }

/* ---- About ---- */
.about-blob img{ transition:transform .7s var(--ease); }
.about-blob:hover img{ transform:scale(1.06); }
.confetti{ animation:floatYsm 6s ease-in-out infinite; }
.cf-2{ animation-delay:.9s; } .cf-3{ animation-delay:1.6s; }
.pillar__ic{ transition:transform .3s var(--ease); }
.pillar:hover .pillar__ic{ transform:scale(1.1) rotate(-6deg); }

/* ---- Vision / Mission / Philosophy ---- */
.value-card .icon-badge{ transition:transform .4s var(--ease); }
.value-card:hover .icon-badge{ transform:rotate(-8deg) scale(1.1); }

/* ---- Stats ---- */
.stat .ic-circle{ transition:transform .4s var(--ease), background .3s ease; }
.stat:hover .ic-circle{ transform:rotate(10deg) scale(1.08); background:rgba(244,178,26,.24); }
.stat strong{ transition:transform .3s var(--ease), text-shadow .3s ease; }
.stat:hover strong{ transform:scale(1.06); text-shadow:0 4px 18px rgba(245,166,35,.55); }

/* ---- Senior Secondary streams ---- */
.stream-card .code{ transition:transform .4s var(--ease); }
.stream-card:hover .code{ transform:rotate(8deg) scale(1.12); }

/* ---- Facilities (mini grid) ---- */
.facility-mini .fm .icon{ transition:transform .35s var(--ease); }
.facility-mini .fm:hover .icon{ transform:scale(1.18) rotate(-6deg); }

/* ---- Why choose us ---- */
.choose-media img{ transition:transform .6s var(--ease); }
.choose-media:hover img{ transform:scale(1.05); }
.choose-media .badge{ transition:transform .3s var(--ease); }
.choose-media:hover .badge{ transform:scale(1.05); }

/* ---- Student life / activity chips ---- */
.activities span .icon{ transition:transform .35s var(--ease); }
.activities span:hover .icon{ transform:rotate(12deg) scale(1.18); }

/* ---- Leadership ---- */
.leader-avatar{ transition:transform .4s var(--ease); }
.leader-card:hover .leader-avatar{ transform:scale(1.06); }
.leader-avatar::after{ transition:transform .6s var(--ease); }
.leader-card:hover .leader-avatar::after{ transform:rotate(60deg); }

/* ---- Parents' corner / policy cards ---- */
.policy-card .pico{ transition:transform .4s var(--ease); }
.policy-card:hover .pico{ transform:rotate(-10deg) scale(1.1); }


/* =========================================================
   JUSTIFIED BODY COPY
   Inner pages are body#top; the homepage <body> has no id.
   Each is handled separately so the homepage's centred
   section leads and card copy keep their designed alignment.
   ========================================================= */

body#top main p{
  text-align:justify;
  text-justify:inter-word;
}

/* keep labels and centred statements as designed */
body#top main .eyebrow{
  text-align:left;
}
body#top main .statement-prose p{
  text-align:center;
}


/* ---- homepage ---- */

body:not(#top) main p{
  text-align:justify;
  text-justify:inter-word;
}

/* labels and single-line accents follow their container
   (section-head centres its eyebrow; .eyebrow.left does not) */
body:not(#top) main .eyebrow,
body:not(#top) main .hero__script,
body:not(#top) main .about-motto{
  text-align:inherit;
}

/* blocks the homepage centres by design stay centred */
body:not(#top) main .lead,
body:not(#top) main .subs,
body:not(#top) main .streams-note,
body:not(#top) main .qual,
body:not(#top) main .msg{
  text-align:center;
}