/* =========================================================================
   Kakatiya Educational Institutions — Shared Design Tokens & Layout
   Palette: logo blue + logo orange as primary/secondary; dark green and
   brinjal (eggplant purple) used sparingly as accents. All heading/body
   text is near-black — colour lives in badges, icons, borders and
   buttons (a background that "highlights" the black text), not in the
   text itself.
   Fonts (two families only):
     • Headings  — Cormorant Garamond (Light 300 / Regular 400, thin strokes)
     • Paragraphs & UI text — Playfair Display (Regular 400)
   This file is shared by every page. Each page also loads its own
   static/css/<page>.css for page-specific layout.
   ========================================================================= */

:root {
  /* Brand colors — from the Kakatiya Educational Institutions logo */
  --blue: #1667B0;
  --blue-dark: #0B3F73;
  --blue-light: #4FA3E0;
  --blue-tint: #EAF3FB;

  --orange: #E8790E;
  --orange-dark: #C2620A;
  --orange-light: #F5A850;
  --orange-tint: #FDEEE0;

  /* Used here and there as accents, per brief */
  --forest: #1F4D3A;
  --forest-dark: #163829;
  --forest-tint: #E5EFE9;

  --brinjal: #4B1740;
  --brinjal-dark: #360F2E;
  --brinjal-tint: #F1E6EF;

  /* Neutrals — text stays black/near-black everywhere */
  --ink: #121212;
  --ink-soft: #3B3B3B;
  --cream: #F7F5F0;
  --paper: #FFFFFF;
  --line: #E4E0D8;

  /* Type */
  --font-body: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-head: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-hand: var(--font-body);      /* kept for old rules */
  --font-display: var(--font-head);   /* kept for old rules */

  /* Layout */
  --max-w: 1200px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow: 0 20px 45px -25px rgba(18, 18, 18, 0.28);
  --header-h: 90px;  /* compact (scrolled) header height, used for scroll offsets */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }
/* overflow-x lives on html, not body — overflow on body creates its own
   scrolling box in some browsers, which breaks position: sticky on the
   header inside it (this was why the nav bar stopped sticking on scroll). */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  font-variant-numeric: lining-nums;   /* Playfair/Cormorant default to old-style digits */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Headings: Cormorant Garamond, light/regular, thin strokes.
   Cormorant has a small x-height, so sizes below are nudged up a little. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums;
}
h5, h6 { font-family: var(--font-head); font-weight: 500; margin: 0; }

/* Playfair for form controls and code-ish tags — they don't inherit the
   page font by default, so force them to. (Font Awesome icons keep their
   own icon font because they are set by the .fa-* classes, not by these.) */
button, input, select, textarea, optgroup, code, kbd, samp, pre, table, figcaption, blockquote, label {
  font-family: var(--font-body);
}

p { margin: 0; color: var(--ink-soft); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Eyebrow = a small colored HIGHLIGHT BEHIND black text, not colored text */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange-tint);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.eyebrow i { color: var(--orange); }
.eyebrow.tone-blue { background: var(--blue-tint); }
.eyebrow.tone-blue i { color: var(--blue); }
.eyebrow.tone-forest { background: var(--forest-tint); }
.eyebrow.tone-forest i { color: var(--forest); }
.eyebrow.tone-brinjal { background: var(--brinjal-tint); }
.eyebrow.tone-brinjal i { color: var(--brinjal); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h1, .section-head h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); }
.section-head p.lede { margin-top: 14px; color: var(--ink-soft); font-size: 1rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

section { padding: 88px 0; }
.section-alt { background: var(--paper); }
.section-tint-blue { background: var(--blue-tint); }
.section-tint-orange { background: var(--orange-tint); }
.section-tint-forest { background: var(--forest-tint); }
.section-tint-brinjal { background: var(--brinjal-tint); }

/* Buttons: color lives here as backgrounds behind white/black text */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.94rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 14px 30px -14px rgba(22, 103, 176, 0.6); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 14px 30px -14px rgba(232, 121, 14, 0.65); }
.btn-orange:hover { background: var(--orange-dark); }
.btn-forest { background: var(--forest); color: #fff; box-shadow: 0 14px 30px -14px rgba(31, 77, 58, 0.6); }
.btn-forest:hover { background: var(--forest-dark); }
.btn-brinjal { background: var(--brinjal); color: #fff; box-shadow: 0 14px 30px -14px rgba(75, 23, 64, 0.6); }
.btn-brinjal:hover { background: var(--brinjal-dark); }
.btn-ghost-light { background: rgba(255,255,255,0.85); color: var(--ink); border-color: rgba(255,255,255,0.9); }
.btn-ghost-light:hover { background: #fff; }
.btn-sm { padding: 10px 18px; font-size: 0.84rem; }

/* Tone helpers reused across pages for icon circles / badges */
.tone-blue .ico, .ico.tone-blue { background: var(--blue-tint); color: var(--blue); }
.tone-orange .ico, .ico.tone-orange { background: var(--orange-tint); color: var(--orange); }
.tone-forest .ico, .ico.tone-forest { background: var(--forest-tint); color: var(--forest); }
.tone-brinjal .ico, .ico.tone-brinjal { background: var(--brinjal-tint); color: var(--brinjal); }

/* =========================================================================
   2. Navbar — clean, professional white header.
   • Left : logo card + school name (KAKATIYA | BRILLIANT STARS / HIGH SCHOOL (E/M))
   • Right: ALL menu pages in ONE single row, in CAPITALS (Times New Roman) — navy text,
            red on hover/active with an animated gradient underline, thin light
            dividers, polished dropdowns
   • After scroll: bar gets shorter, logo + name shrink, shadow gets deeper.
   • The 3-line (hamburger) button is only used on tablets / phones (below 1180px),
     because 9 pages cannot fit in one row on a small screen.
   The header is position: fixed and the page is pushed down by a constant
   (body padding-top), so resizing never moves the page: smooth, no flicker.
   ========================================================================= */
:root {
  --navy: #0A2C66;
  --brand-orange: #E8701A;    /* KAKATIYA */
  --brand-sub: #0A2C66;       /* BRILLIANT STARS */
  --brand-red: #C41A1A;       /* HIGH SCHOOL (E/M) */
  --menu-red: #C8161D;        /* menu hover / active */
  --font-nav: "Times New Roman", Times, "Liberation Serif", serif;

  --stripe: 0px;                               /* (top colour line removed) */
  --bar-h: clamp(80px, 7.2vw, 100px);           /* bar height at top of page */
  --bar-scrolled: clamp(64px, 5.6vw, 76px);     /* bar height after scroll */
  --logo-s: clamp(50px, 4.4vw, 70px);           /* logo size at top */
  --logo-scrolled: clamp(42px, 3.6vw, 54px);    /* logo size after scroll */
  --header-full: calc(var(--stripe) + var(--bar-h));
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .35s;
}

/* page is pushed down by the FULL header height, always (no jumping) */
body { padding-top: var(--header-full); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: #fff;
  box-shadow: 0 1px 0 rgba(10, 44, 102, 0.08), 0 14px 30px -24px rgba(10, 44, 102, 0.45);
  transition: box-shadow var(--dur) var(--ease);
}
.header-bar {
  display: flex; align-items: stretch;
  height: var(--bar-h);
  padding: 0 14px 0 6px;                      /* logo sits at the very left */
  transition: height var(--dur) var(--ease);
}

/* ---- Left: logo + school name ---- */
.brand {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; min-width: 0; margin-right: 12px;
}
.brand-logo {
  width: var(--logo-s); height: var(--logo-s); flex-shrink: 0; object-fit: contain;
  background: #fff; border-radius: 12px; padding: 2px;
  box-shadow: 0 0 0 1.5px #E3E8F0, 0 8px 16px -10px rgba(10, 44, 102, 0.55);
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}
.brand-name { display: flex; flex-direction: row; align-items: center; gap: 0; line-height: 1; }
.brand-name .bn-main {
  font-family: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  font-weight: 400; font-size: clamp(1.2rem, 1.55vw, 2.1rem); letter-spacing: 0.005em; line-height: 1;
  text-transform: uppercase; color: var(--brand-orange);
  display: inline-block; transform: scaleY(1.4); transform-origin: center;   /* taller letters: change 1.4 */
  transition: font-size var(--dur) var(--ease);
}
.brand-name .bn-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin-left: 10px;
  font-family: "Rokkitt", "Rockwell", Georgia, serif;
  font-weight: 800; font-size: clamp(0.66rem, 0.98vw, 1.15rem); line-height: 1.1; letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: font-size var(--dur) var(--ease);
}
.brand-name .bn-sub span { display: block; white-space: nowrap; }
.brand-name .bn-sub span:first-child { color: var(--brand-sub); }
.brand-name .bn-sub span:last-child { color: var(--brand-red); }

/* ---- Right: menu (all pages, one row) ---- */
.header-right { flex: 1; min-width: 0; display: flex; align-items: stretch; }
.main-nav { flex: 1; display: flex; align-items: stretch; justify-content: flex-end; min-width: 0; }
.nav-links {
  flex: 1; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between;
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.nav-links > li { position: relative; display: flex; align-items: stretch; }
.nav-links > li + li::before {                /* thin light line between pages */
  content: ""; position: absolute; left: 0; top: 34%; bottom: 34%;
  width: 1px; background: rgba(10, 44, 102, 0.14);
}
.nav-links > li > a {
  position: relative; color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 clamp(4px, 0.45vw, 10px);
  font-family: var(--font-nav); font-weight: 700;
  font-size: clamp(0.72rem, 1.08vw, 1.3rem);            /* bigger menu text */
  letter-spacing: 0.01em; text-transform: uppercase;   /* CAPITALS (use 'none' for Title Case) */ white-space: nowrap; text-align: center;
  transition: color 0.2s ease;
}
.nav-ico { display: none; }
.dropdown-caret { font-size: 0.66rem; opacity: 0.8; transition: transform 0.2s ease; }
.nav-links > li:hover > a,
.nav-links > li > a.active { color: var(--menu-red); }
.nav-links > li.has-dropdown:hover .dropdown-caret { transform: rotate(180deg); }
/* animated gradient underline */
.nav-links > li > a::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--brand-orange), var(--menu-red));
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.nav-links > li:hover > a::after,
.nav-links > li:focus-within > a::after,
.nav-links > li > a.active::after { transform: scaleX(1); }

/* Dropdown menu — soft pop-in, items rise one after another, no left line */
.nav-item { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0;
  background: #fff; border-top: 3px solid var(--brand-orange);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 28px 50px -22px rgba(10, 44, 102, 0.45), 0 0 0 1px rgba(10, 44, 102, 0.06);
  padding: 8px; min-width: 250px;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.985); transform-origin: top center;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(.2, .8, .2, 1), visibility 0.22s;
  z-index: 600;
}
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.dropdown-menu.dropdown-right,
.nav-links > li:nth-last-child(-n+3) .dropdown-menu { left: auto; right: 0; }
.dropdown-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

/* items rise in one after another each time the menu opens */
.nav-item.has-dropdown:hover .dropdown-menu li,
.nav-item.has-dropdown:focus-within .dropdown-menu li { animation: ddItem 0.34s cubic-bezier(.2, .8, .2, 1) both; }
.dropdown-menu li:nth-child(1)  { animation-delay: 0.03s; }
.dropdown-menu li:nth-child(2)  { animation-delay: 0.06s; }
.dropdown-menu li:nth-child(3)  { animation-delay: 0.09s; }
.dropdown-menu li:nth-child(4)  { animation-delay: 0.12s; }
.dropdown-menu li:nth-child(5)  { animation-delay: 0.15s; }
.dropdown-menu li:nth-child(6)  { animation-delay: 0.18s; }
.dropdown-menu li:nth-child(7)  { animation-delay: 0.21s; }
.dropdown-menu li:nth-child(8)  { animation-delay: 0.24s; }
.dropdown-menu li:nth-child(9)  { animation-delay: 0.27s; }
.dropdown-menu li:nth-child(n+10) { animation-delay: 0.30s; }
@keyframes ddItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dropdown-menu a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-radius: 10px;
  font-family: var(--font-nav); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.005em;
  color: var(--navy); white-space: nowrap; text-transform: none; text-align: left;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
/* small arrow that slides in on hover (replaces the old red line on the left) */
.dropdown-menu a::after {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6rem;
  color: var(--menu-red); opacity: 0; transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-menu a:hover, .dropdown-menu a.active {
  background: linear-gradient(90deg, #EAF1FB 0%, #F7FAFE 100%); color: var(--menu-red); padding-left: 20px;
}
.dropdown-menu a:hover::after, .dropdown-menu a.active::after { opacity: 1; transform: none; }
.dropdown-menu.dropdown-wide { min-width: 470px; }
.dropdown-menu.dropdown-wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.dropdown-menu.dropdown-wide a { white-space: normal; }

/* 3-line (hamburger) button: hidden on laptops / desktops */
.nav-toggle {
  display: none; align-self: center; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: #fff; color: var(--navy); font-size: 1.25rem; flex-shrink: 0;
  border: 1.5px solid var(--navy); border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-toggle:hover { background: var(--navy); color: #fff; }

/* =========================================================================
   SCROLLED (compact)
   ========================================================================= */
.site-header.header-scrolled { box-shadow: 0 1px 0 rgba(10, 44, 102, 0.1), 0 16px 34px -16px rgba(10, 44, 102, 0.4); }
.site-header.header-scrolled .header-bar { height: var(--bar-scrolled); }
.site-header.header-scrolled .brand-logo { width: var(--logo-scrolled); height: var(--logo-scrolled); }
.site-header.header-scrolled .brand-name .bn-main { font-size: clamp(1.1rem, 1.35vw, 1.8rem); }
.site-header.header-scrolled .brand-name .bn-sub { font-size: clamp(0.62rem, 0.88vw, 1.02rem); }

/* =========================================================================
   Smaller screens (tablet / phone): hamburger menu
   ========================================================================= */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .main-nav { align-items: center; }

  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 3px solid var(--brand-orange);
    padding: 10px 16px 18px; gap: 0;
    box-shadow: 0 30px 50px -24px rgba(10, 44, 102, 0.5);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav-links.open > li { flex-direction: column; align-items: stretch; border-bottom: 1px solid #EDF0F6; }
  .nav-links.open > li:last-child { border-bottom: 0; }
  .nav-links.open > li + li::before { display: none; }
  .nav-links.open > li > a {
    justify-content: flex-start; text-align: left; padding: 14px 8px; font-size: 1.12rem;
  }
  .nav-links > li > a::after { display: none; }
  .nav-links.open > li > a.active { color: var(--menu-red); }

  .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: transparent;
    padding: 0 0 8px 14px; min-width: 0;
  }
  .dropdown-menu.dropdown-wide ul { grid-template-columns: 1fr; }
  .dropdown-menu a { padding: 9px 10px; font-size: 1rem; color: var(--ink-soft); justify-content: flex-start; }
  .dropdown-menu a::after { display: none; }
  .dropdown-menu a:hover, .dropdown-menu a.active { padding-left: 14px; }
  .nav-item.has-dropdown:hover .dropdown-menu li,
  .nav-item.has-dropdown:focus-within .dropdown-menu li { animation: none; }
}
@media (max-width: 700px) {
  :root { --bar-h: 68px; --bar-scrolled: 58px; --logo-s: 46px; --logo-scrolled: 38px; }
  .header-bar { padding: 0 12px 0 6px; }
  .brand { gap: 9px; margin-right: 10px; }
  .brand-name .bn-main { font-size: 1.2rem; }
  .brand-name .bn-sub { font-size: 0.6rem; margin-left: 8px; }
  .site-header.header-scrolled .brand-name .bn-main { font-size: 1.05rem; }
  .site-header.header-scrolled .brand-name .bn-sub { font-size: 0.5rem; }
}
@media (max-width: 400px) {
  .brand-name .bn-main { font-size: 1rem; }
  .brand-name .bn-sub { font-size: 0.5rem; }
  .brand-logo { width: 40px; height: 40px; }
}

/* =========================================================================
   Inner page hero (About / Academics / Admissions / Facilities / Contact)
   ========================================================================= */
.page-hero {
  background: var(--blue-tint);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); max-width: 620px; }
.page-hero p.lede { margin-top: 14px; max-width: 560px; font-size: 1rem; color: var(--ink-soft); }
.page-hero .crumbs { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); margin-bottom: 16px; }
.page-hero .crumbs a:hover { color: var(--blue); }
.page-hero .crumbs i { font-size: 0.65rem; }

/* =========================================================================
   Back to top
   ========================================================================= */
.to-top {
  position: fixed; right: 22px; bottom: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); border: none; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 400;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* =========================================================================
   16. Footer — light, not dark, so black text stays the rule; a top
   gradient bar (blue → orange) carries the brand color instead.
   ========================================================================= */
.site-footer {
  background: var(--paper);
  color: var(--ink-soft);
  padding-top: 60px;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--blue), var(--orange), var(--forest), var(--brinjal)) 1;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px;
  padding-bottom: 50px; border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; }
.footer-brand .name { font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: 1.3rem; }
.footer-brand .tag { font-size: 0.7rem; color: var(--orange); letter-spacing: 0.06em; margin-top: 2px; font-weight: 500; }
.footer-desc { margin-top: 14px; font-size: 0.86rem; max-width: 280px; }
.footer-col h5 { color: var(--ink); font-size: 1.25rem; font-weight: 500; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 0.86rem; }
.footer-col a { color: var(--ink-soft); font-weight: 400; }
.footer-col a:hover { color: var(--blue); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; }
.footer-contact i { color: var(--blue); margin-top: 3px; }
.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-tint); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { background: var(--orange); color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-size: 0.8rem; flex-wrap: wrap; gap: 10px; color: var(--ink-soft);
}
.footer-bottom a:hover { color: var(--blue); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* =========================================================================
   Shared sub-page building blocks — used by the About/Academics/
   Admissions/Facilities/Gallery/Blogs dropdown pages. Each of those pages
   still has its own CSS file (loaded via page_css) for its specific
   tweaks/tone; the structural patterns below are shared so 24 sub-pages
   don't each reinvent the same grid and card layout.
   ========================================================================= */

.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) { .card-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; } }

.simple-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 28px 24px;
}
.simple-card .ico {
  width: 50px; height: 50px; border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  margin-bottom: 16px;
}

/* =========================================================================
   PREMIUM SUB-PAGE KIT  (.sp-*)
   One shared design system for About sub-pages, Blogs, News, Facilities and
   Admissions landing pages — same structure as the Hostel / Labs / Library
   reference pages:
     1. banner placeholder right under the navbar (1920 x 600)
     2. intro  : breadcrumb, big title, gold rule, tagline (+ optional stats)
     3. content sections (cards, timeline, photos, quotes, profiles)
     4. closing call-to-action band
   Pick a colour theme on the wrapper:  <div class="sp-page theme-blue">
   Themes: theme-blue | theme-orange | theme-forest | theme-brinjal
   Markup helpers live in templates/_kit.html.
   ========================================================================= */

.sp-page {
  --sp-dark: #0B3F73; --sp-main: #1667B0; --sp-light: #4FA3E0;
  --sp-tint: #EAF3FB; --sp-soft: #F5FAFE; --sp-gold: #FFC400;
  background: #fff;
}
.sp-page.theme-orange  { --sp-dark: #8A3E04; --sp-main: #E8790E; --sp-light: #F5A850; --sp-tint: #FDEEE0; --sp-soft: #FFF8F1; }
.sp-page.theme-forest  { --sp-dark: #163829; --sp-main: #1F6B4C; --sp-light: #4DA37F; --sp-tint: #E5EFE9; --sp-soft: #F4F9F6; }
.sp-page.theme-brinjal { --sp-dark: #360F2E; --sp-main: #6A2A5C; --sp-light: #A35C93; --sp-tint: #F1E6EF; --sp-soft: #FAF5F9; }

/* ---------- 1. Banner placeholder ---------- */
.sp-hero {
  position: relative; width: 100%;
  height: clamp(240px, 31.25vw, 600px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--sp-dark) 0%, var(--sp-main) 100%);
}
.sp-hero::before {                       /* soft light + dotted texture */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 196, 0, 0.28), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(rgba(255, 255, 255, 0.10) 1.4px, transparent 1.6px) 0 0 / 26px 26px;
}
.sp-hero-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.sp-hero-ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; text-align: center; color: #fff;
}
.sp-hero-ph i { font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--sp-gold); }
.sp-hero-ph b { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; }
.sp-hero-ph span { font-size: clamp(0.85rem, 1.4vw, 1rem); color: rgba(255, 255, 255, 0.9); }
.sp-hero-ph code { background: rgba(255, 255, 255, 0.18); padding: 3px 10px; border-radius: 6px; font-size: 0.9em; }

/* ---------- 2. Intro ---------- */
.sp-intro { padding: 64px 0 60px; text-align: center; }
.sp-crumbs {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.88rem; font-weight: 400; color: var(--ink-soft); margin-bottom: 18px;
}
.sp-crumbs a:hover { color: var(--sp-main); }
.sp-crumbs i { font-size: 0.62rem; opacity: 0.7; }
.sp-crumbs span { color: var(--sp-main); font-weight: 500; }
.sp-title {
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 300; line-height: 1.02;
  letter-spacing: -0.01em; color: var(--sp-dark);
}
.sp-rule {
  display: block; width: 88px; height: 4px; border-radius: 99px; margin: 22px auto 0;
  background: linear-gradient(90deg, var(--sp-gold), var(--sp-main));
}
.sp-tagline {
  margin: 22px auto 0; max-width: 780px;
  font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 400; line-height: 1.85; color: var(--ink-soft);
}
.sp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px;
  max-width: 880px; margin: 44px auto 0;
}
.sp-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 16px;
  box-shadow: 0 20px 40px -28px rgba(18, 18, 18, 0.4); text-align: center;
  border-bottom: 4px solid var(--sp-main);
}
.sp-stat b { display: block; font-family: var(--font-head); font-size: 2.6rem; font-weight: 500; color: var(--sp-main); line-height: 1; }
.sp-stat span { display: block; margin-top: 10px; font-size: 0.84rem; font-weight: 400; color: var(--ink-soft); }

/* ---------- 3. Sections ---------- */
.sp-section { padding: 88px 0; }
.sp-section.alt { background: var(--sp-tint); }
.sp-section.soft { background: var(--sp-soft); }
.sp-head { max-width: 780px; margin: 0 auto 52px; text-align: center; }
.sp-eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 20px; border-radius: 999px; margin-bottom: 16px;
  background: var(--sp-dark); color: #fff; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  box-shadow: 0 10px 22px -12px rgba(18, 18, 18, 0.45);
}
.sp-eyebrow i { color: var(--sp-gold); }
.sp-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--sp-dark); }
.sp-head p { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); }

/* colour tones for individual cards */
.t-blue    { --c: var(--blue);    --c-tint: var(--blue-tint); }
.t-orange  { --c: var(--orange);  --c-tint: var(--orange-tint); }
.t-forest  { --c: var(--forest);  --c-tint: var(--forest-tint); }
.t-brinjal { --c: var(--brinjal); --c-tint: var(--brinjal-tint); }

/* generic card grid */
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sp-card {
  --c: var(--sp-main); --c-tint: var(--sp-tint);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 32px 26px 28px;
  box-shadow: 0 22px 44px -32px rgba(18, 18, 18, 0.35);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.sp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.sp-card:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -30px rgba(18, 18, 18, 0.45); }
.sp-ico {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.35rem; background: var(--c-tint); color: var(--c); margin-bottom: 18px; flex-shrink: 0;
}
.sp-card h3 { font-size: 1.55rem; font-weight: 400; color: var(--ink); }
.sp-card p { margin-top: 10px; font-size: 0.92rem; line-height: 1.75; }
.sp-chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
  background: var(--c-tint); color: var(--c); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em;
}
.sp-num {                                   /* big watermark numeral */
  position: absolute; right: 18px; top: 14px; font-family: var(--font-head); font-size: 3.6rem; font-weight: 500; line-height: 1;
  color: var(--c); opacity: 0.12; letter-spacing: -0.02em;
}

/* timeline (Awards) */
.sp-timeline { position: relative; max-width: 900px; margin: 0 auto; padding-left: 56px; }
.sp-timeline::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--sp-gold), var(--sp-main));
}
.sp-tl-item { position: relative; margin-bottom: 28px; }
.sp-tl-item:last-child { margin-bottom: 0; }
.sp-tl-dot {
  position: absolute; left: -56px; top: 26px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: #fff; font-size: 0.95rem;
  border: 4px solid #fff; box-shadow: 0 0 0 3px var(--c-tint), 0 10px 20px -8px rgba(18, 18, 18, 0.5);
}
.sp-tl-card {
  --c: var(--sp-main); --c-tint: var(--sp-tint);
  display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px;
  box-shadow: 0 22px 44px -32px rgba(18, 18, 18, 0.35);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.sp-tl-card:hover { transform: translateX(6px); box-shadow: 0 30px 56px -30px rgba(18, 18, 18, 0.45); }
.sp-tl-year {
  font-family: var(--font-head);
  font-size: 2.7rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; text-align: center;
  color: var(--c); background: var(--c-tint); border-radius: 16px; padding: 22px 8px;
}
.sp-tl-body h3 { font-size: 1.6rem; font-weight: 400; color: var(--ink); }
.sp-tl-org { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.82rem; font-weight: 500; color: var(--c); }
.sp-tl-body p { margin-top: 10px; font-size: 0.92rem; }

/* featured quote + testimonial cards */
.sp-feature {
  position: relative; max-width: 960px; margin: 0 auto; overflow: hidden;
  background: linear-gradient(135deg, var(--sp-dark), var(--sp-main)); color: #fff;
  border-radius: 28px; padding: clamp(32px, 5vw, 60px);
  box-shadow: 0 34px 70px -34px rgba(18, 18, 18, 0.6);
}
.sp-feature > .fa-quote-left { position: absolute; right: 30px; top: 18px; font-size: 6rem; color: var(--sp-gold); opacity: 0.22; }
.sp-feature blockquote { margin: 0; position: relative; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 400; line-height: 1.6; color: #fff; }
.sp-who { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.sp-who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; flex-shrink: 0; background: var(--sp-tint); }
.sp-who b { display: block; font-family: var(--font-head); font-size: 1.3rem; font-weight: 500; color: inherit; }
.sp-who small { display: block; font-size: 0.8rem; opacity: 0.8; }
.sp-stars { color: var(--sp-gold); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 14px; }
.sp-card .sp-stars { color: var(--orange); }
.sp-card .sp-quote { font-size: 0.98rem; line-height: 1.75; color: var(--ink); font-weight: 400; margin-top: 0; }
.sp-card .sp-who { margin-top: auto; padding-top: 22px; }
.sp-card .sp-who img { border-color: var(--c-tint); width: 48px; height: 48px; }
.sp-card .sp-who small { color: var(--ink-soft); }

/* values strip */
.sp-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sp-value {
  --c: var(--sp-main); --c-tint: var(--sp-tint);
  display: flex; align-items: center; gap: 14px; padding: 14px 26px 14px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-weight: 500; color: var(--ink);
  box-shadow: 0 16px 30px -24px rgba(18, 18, 18, 0.5);
}
.sp-value i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-tint); color: var(--c); }

/* photo placeholders (same behaviour as Hostel) */
.sp-photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.sp-shot {
  --c: var(--sp-main);
  position: relative; overflow: hidden; margin: 0; flex: 0 1 calc((100% - 48px) / 3); min-width: 260px;
  aspect-ratio: 4 / 3; border-radius: 22px; border: 6px solid #fff; background: linear-gradient(135deg, #fff, var(--sp-tint));
  box-shadow: 0 24px 48px -26px rgba(18, 18, 18, 0.5);
}
.sp-shot:nth-child(3n+2) { --c: var(--orange); }
.sp-shot:nth-child(3n+3) { --c: var(--forest); }
.sp-shot img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sp-shot:hover img { transform: scale(1.08); }
.sp-shot-ph {
  position: absolute; inset: 12px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 12px; border: 2px dashed var(--sp-light); border-radius: 14px; color: var(--sp-dark);
}
.sp-shot-ph i { font-size: 2.6rem; color: var(--c); opacity: 0.85; }
.sp-shot-ph b { font-family: var(--font-head); font-size: 1.4rem; font-weight: 400; }
.sp-shot-ph span { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.6; }
.sp-shot-ph code { background: #fff; padding: 2px 8px; border-radius: 6px; font-size: 0.8rem; color: var(--sp-dark); }

/* people (Directors / Blogs index) */
.sp-person {
  --c: var(--sp-main); --c-tint: var(--sp-tint);
  background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; text-align: center;
  box-shadow: 0 22px 44px -32px rgba(18, 18, 18, 0.4); transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex; flex-direction: column;
}
.sp-person:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -30px rgba(18, 18, 18, 0.5); }
.sp-portrait {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(160deg, var(--c-tint), #fff);
  display: grid; place-items: center;
}
.sp-portrait > i { font-size: 4rem; color: var(--c); opacity: 0.35; }
.sp-portrait img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s ease; }
.sp-person:hover .sp-portrait img { transform: scale(1.05); }
.sp-person-body { padding: 24px 22px 28px; display: flex; flex-direction: column; align-items: center; flex: 1; }
.sp-person-body h3 { font-size: 1.6rem; font-weight: 400; color: var(--ink); }
.sp-qual { margin-top: 4px; font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); }
.sp-role { display: inline-block; margin-top: 12px; padding: 6px 16px; border-radius: 999px; background: var(--c); color: #fff; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.02em; }
.sp-person-body p { margin-top: 14px; font-size: 0.9rem; line-height: 1.75; }
.sp-readmore { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.86rem; color: var(--c); }
.sp-readmore i { transition: transform 0.2s ease; }
a.sp-person:hover .sp-readmore i { transform: translateX(5px); }

/* avatar stack on the Blogs index */
.sp-avatars { display: flex; justify-content: center; margin: 0 0 6px; }
.sp-avatar {
  position: relative; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; margin-left: -20px;
  border: 5px solid #fff; background: var(--c-tint); color: var(--c); display: grid; place-items: center; font-size: 1.6rem;
  box-shadow: 0 12px 24px -12px rgba(18, 18, 18, 0.5);
}
.sp-avatar:first-child { margin-left: 0; }
.sp-avatar img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* profile (Principal / Vice-Principal) */
.sp-profile { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
.sp-profile-card { --c: var(--sp-main); position: sticky; top: calc(var(--header-h) + 20px); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 28px 56px -34px rgba(18, 18, 18, 0.5); }
.sp-profile-card .sp-portrait { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--sp-tint), #fff); }
.sp-profile-card .sp-portrait > i { color: var(--sp-main); }
.sp-profile-card .meta { padding: 22px 20px 26px; border-top: 5px solid var(--sp-main); }
.sp-profile-card h3 { font-size: 1.8rem; font-weight: 400; color: var(--sp-dark); }
.sp-profile-card .meta span { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; background: var(--sp-main); color: #fff; font-size: 0.78rem; font-weight: 500; }
.sp-message {
  position: relative; border-radius: 24px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 44px) clamp(56px, 6vw, 84px);
  background: var(--sp-tint); border-left: 6px solid var(--sp-main);
}
.sp-message > i { position: absolute; left: clamp(18px, 2.4vw, 30px); top: clamp(22px, 3vw, 34px); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--sp-main); opacity: 0.55; }
.sp-message p { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 400; line-height: 1.45; color: var(--sp-dark); }
.sp-bio { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; }
.sp-bio p { font-size: 1rem; line-height: 1.9; }
.sp-bio p:first-child::first-letter { float: left; font-family: var(--font-head); font-size: 4rem; line-height: 0.85; font-weight: 500; color: var(--sp-main); padding: 6px 10px 0 0; }
.sp-focus { margin-top: 44px; }
.sp-focus h4 { font-size: 1.5rem; font-weight: 400; color: var(--sp-dark); margin-bottom: 16px; }
.sp-focus .sp-grid { gap: 18px; }
.sp-focus .sp-card { padding: 24px 20px 22px; }
.sp-focus .sp-card h3 { font-size: 1.3rem; }
.sp-focus .sp-card p { font-size: 0.86rem; }

/* ---------- 4. Call-to-action band ---------- */
.sp-cta { position: relative; overflow: hidden; padding: 76px 0; color: #fff; background: linear-gradient(135deg, var(--sp-dark), var(--sp-main)); }
.sp-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 10%, rgba(255, 196, 0, 0.3), transparent 40%), radial-gradient(rgba(255, 255, 255, 0.08) 1.4px, transparent 1.6px) 0 0 / 26px 26px; }
.sp-cta .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sp-cta h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 400; }
.sp-cta p { margin-top: 10px; max-width: 560px; color: rgba(255, 255, 255, 0.9); font-size: 1rem; }
.sp-cta .sp-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.sp-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.sp-cta .btn-ghost:hover { background: #fff; color: var(--sp-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-shot { flex-basis: calc((100% - 24px) / 2); }
  .sp-profile { grid-template-columns: 1fr; gap: 32px; }
  .sp-profile-card { position: static; max-width: 380px; margin: 0 auto; width: 100%; }
}
@media (max-width: 700px) {
  .sp-intro { padding: 44px 0 42px; }
  .sp-section { padding: 60px 0; }
  .sp-head { margin-bottom: 34px; }
  .sp-grid, .sp-grid.cols-2 { grid-template-columns: 1fr; }
  .sp-timeline { padding-left: 46px; }
  .sp-timeline::before { left: 14px; }
  .sp-tl-dot { left: -46px; width: 32px; height: 32px; top: 22px; font-size: 0.8rem; }
  .sp-tl-card { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .sp-tl-year { padding: 14px 8px; font-size: 2.1rem; }
  .sp-cta .container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) { .sp-shot { flex-basis: 100%; } }

/* ---------- Scroll reveal (only when JS is on; never hides content otherwise) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Flash message toast (form success / error) ---------- */
.toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 10px; width: min(560px, calc(100% - 28px)); }
.toast {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; color: var(--ink);
  font-size: 0.92rem; font-weight: 400; line-height: 1.55; box-shadow: 0 24px 50px -20px rgba(18, 18, 18, 0.55);
  border-left: 6px solid var(--forest); animation: toastIn 0.4s ease both;
}
.toast i.lead { margin-top: 3px; color: var(--forest); font-size: 1.15rem; }
.toast.error { border-left-color: #D32F2F; }
.toast.error i.lead { color: #D32F2F; }
.toast button { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ink-soft); font-size: 1rem; padding: 2px 4px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Button row under an intro (Admissions landing) */
.sp-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: -14px 0 34px; padding: 0 24px; }

/* ---------- Premium polish for the shared building blocks ---------- */
.btn { letter-spacing: 0.01em; font-weight: 500; }
.btn:hover { box-shadow: 0 18px 34px -16px rgba(18, 18, 18, 0.45); }
.btn-primary:hover, .btn-orange:hover, .btn-forest:hover, .btn-brinjal:hover { transform: translateY(-3px); }
.section-head h1, .section-head h2 { font-weight: 400; }
.eyebrow { font-weight: 500; }
::selection { background: var(--orange); color: #fff; }
.dropdown-menu { border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(18, 18, 18, 0.45); }
.simple-card, .news-card-full, .facility-card-full { transition: transform 0.28s ease, box-shadow 0.28s ease; }
.news-card-full:hover, .facility-card-full:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -30px rgba(18, 18, 18, 0.45); }
img { height: auto; }

/* =========================================================================
   Home hero slider — placeholder shown behind each slide until the real
   image exists (hero-slide-1.jpg / 2 / 3, 1920 x 550). Same size as the
   slider itself, so replacing it never changes the layout.
   ========================================================================= */
.carousel-slide img { position: relative; z-index: 1; }
.hero-ph {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
}
.carousel-slide:nth-child(2) .hero-ph { background: linear-gradient(135deg, var(--forest-dark), var(--forest)); }
.carousel-slide:nth-child(3) .hero-ph { background: linear-gradient(135deg, var(--brinjal-dark), var(--brinjal)); }
.hero-ph::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.10) 1.4px, transparent 1.6px) 0 0 / 26px 26px;
}
.hero-ph > * { position: relative; }
.hero-ph i { font-size: clamp(2.2rem, 4vw, 3.4rem); color: #FFC400; }
.hero-ph b { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 400; }
.hero-ph span { font-size: clamp(0.8rem, 1.2vw, 1rem); color: rgba(255, 255, 255, 0.92); }
.hero-ph code { background: rgba(255, 255, 255, 0.18); padding: 3px 10px; border-radius: 6px; font-size: 0.92em; }

/* =========================================================================
   Footer — decorative blue/yellow ribbons, diagonal yellow band and corner
   triangle are removed (also removed from the markup in base.html);
   whole footer is a little smaller.
   ========================================================================= */
.lh-footer .lh-band, .lh-footer .lh-tri, .lh-footer .lh-swoosh { display: none !important; }
.lh-footer { zoom: 0.86; }