/* =====================================================
   STYLENEW.CSS ... Modern School Website
   Clean Flat Design ... No Gradients ... Fully Responsive
   ===================================================== */

/* =====================================================
   1. CSS CUSTOM PROPERTIES
   ===================================================== */
:root {
  /* Brand Greens */
  --green-900: var(--primary-dark);
  --green-800: var(--primary);
  --green-700: var(--primary);  /* theme override above swaps to the actual shade */
  --green-600: var(--primary-light);
  --green-500: var(--primary-light);
  --green-400: var(--primary-light);  /* theme override drives the actual value */
  --green-300: var(--primary);        /* theme override drives the actual value */
  --green-200: var(--primary-mist);
  --green-100: var(--primary-mist);
  --green-50:  var(--primary-mist);

  /* Deep blue-green (used in admin/portal hero gradients) */
  --navy-950: var(--primary-deeper);
  --navy-900: var(--primary-dark);   /* same as --green-900 */
  --navy-850: var(--primary-deeper);
  --navy-800: var(--primary-dark);

  /* Green surface tints (success / info panels) */
  --green-tint-50:  rgba(var(--primary-rgb), .05);
  --green-tint-100: rgba(var(--primary-rgb), .10);
  --green-tint-200: rgba(var(--primary-rgb), .18);
  --green-tint-300: rgba(var(--primary-rgb), .24);
  --green-tint-400: rgba(var(--primary-rgb), .32);
  --green-ink:      var(--primary-dark);


  --shadow-green:0 8px 24px rgba(var(--primary-rgb),.25);
  --shadow-green-lg:0 16px 40px rgba(var(--primary-rgb),.30);

  /* Warm Amber Accent */
  --amber-700: var(--accent-dark);
  --amber-600: var(--accent);
  --amber-500: var(--gold);
  --amber-200: rgba(var(--accent-rgb), .28);
  --amber-100: rgba(var(--accent-rgb), .14);

  /* Brand Orange (legacy admin accent) */
  --orange-700: var(--accent-dark);
  --orange-600: var(--accent);
  --orange-100: rgba(var(--accent-rgb), .14);

  /* Neutrals */
  --white:    #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f4;
  --gray-200: #e8eaed;
  --gray-300: #d4d7dc;
  --gray-400: #bcc0c7;
  --gray-500: #9aa0a8;
  --gray-600: #6c737a;
  --gray-700: #4a5058;
  --gray-800: #303438;
  --gray-900: #1a1d21;

  /* Semantic aliases */
  --primary:        #0c5430;
  --primary-dark:   #052d1a;
  --primary-deeper: #041f12;
  --primary-light:  #1d8450;
  --primary-mist:   #e5f5ed;
  --primary-glow:   rgba(var(--primary-rgb),.18);
  --accent:         #d97706;
  --accent-dark:    #b45309;
  --accent-light:   rgba(var(--accent-rgb), .14);
  --gold:           #c9a84c;
  --on-primary:        #ffffff;
  --on-primary-dark:   #ffffff;
  --on-primary-deeper: #ffffff;
  --on-primary-light:  #ffffff;
  --on-primary-mist:   #1a1d21;
  --on-accent:         #1a1d21;
  --on-accent-dark:    #ffffff;
  --on-gold:           #1a1d21;

  /* RGB triplets (used by rgba(var(--xxx-rgb), .25) patterns so the
     same hex value can produce transparent variants without re-declaring
     the colour). The dynamic theme system overrides these on every page
     load so the transparency stays in sync with the chosen brand colour. */
  --primary-rgb:        12, 84, 48;
  --primary-dark-rgb:    5, 45, 26;
  --primary-deeper-rgb:  4, 31, 18;
  --primary-light-rgb:  29, 132, 80;
  --primary-mist-rgb:  229, 245, 237;
  --accent-rgb:        217, 119, 6;
  --accent-dark-rgb:   180, 83, 9;
  --gold-rgb:          201, 168, 76;

  /* Constant accent-greens ... kept here so they're available to rgba()
     even though the admin doesn't directly control them. They provide
     the bright highlight tint that reads as "lighter than primary". */
  --green-300-rgb: 110, 231, 183;
  --green-400-rgb:  63, 186, 126;
  --bg:             #fafbfc;
  --bg-alt:         var(--gray-50);
  --bg-dark:        var(--primary-deeper);
  --text:           var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted:     var(--gray-500);
  --border:         var(--gray-200);
  --border-light:   var(--gray-100);

  /* Shadows (multi-layer for depth) */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:   0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 10px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  --shadow-xl:   0 20px 50px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-2xl:  0 30px 80px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.08);
  --shadow-card: 0 2px 8px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03);
  --shadow-hover:0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);


  /* Border Radius */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full:9999px;

  /* Motion */
  --t-fast:   150ms cubic-bezier(.4,0,.2,1);
  --t-base:   250ms cubic-bezier(.4,0,.2,1);
  --t-slow:   400ms cubic-bezier(.4,0,.2,1);
  --t-spring: 500ms cubic-bezier(.34,1.56,.64,1);

  /* Fonts */
  --font-heading: 'Poppins', 'Trirong', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'Trirong', Georgia, serif;

  /* ...
     UNIFIED DERIVED BRAND SCALE
     One common colour combo. Every shade below is derived from the
     admin "Theme & Brand Colours" tokens (--primary / --accent / --gold)
     so a single saved palette recolours the whole site ... homepage
     templates, portal, admin, certificates ... consistently.
     The plain-hex line before each color-mix() line is a safe
     fallback for browsers that don't support color-mix().
     ... */
  --brand-navy:    color-mix(in srgb, var(--primary-deeper) 78%, #0a2540);
  --navy-soft:     color-mix(in srgb, var(--brand-navy) 9%, #ffffff);
  --navy-line:     color-mix(in srgb, var(--brand-navy) 22%, #ffffff);
  --navy-border:   color-mix(in srgb, var(--brand-navy) 34%, #ffffff);

  --gold-bright:   color-mix(in srgb, var(--gold) 68%, #fff6d6);
  --gold-soft:     color-mix(in srgb, var(--gold) 58%, #ffffff);
  --gold-pale:     color-mix(in srgb, var(--gold) 22%, #ffffff);
  --gold-dim:      color-mix(in srgb, var(--gold) 76%, #000000);
  --gold-deep:     color-mix(in srgb, var(--gold) 46%, #000000);

  --amber-bright:  color-mix(in srgb, var(--accent) 82%, #ffffff);
  --amber-soft:    color-mix(in srgb, var(--accent) 16%, #ffffff);
  --amber-line:    color-mix(in srgb, var(--accent) 32%, #ffffff);

  --cream:         color-mix(in srgb, var(--primary-mist) 55%, #fffdf8);
  --cream-deep:    color-mix(in srgb, var(--primary-mist) 80%, #f0e2c4);

}

/* =====================================================
   2. RESET & BASE
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

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

body {
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--primary-light); }

::selection { background: var(--primary); color: var(--white); }
::-moz-selection { background: var(--primary); color: var(--white); }

*:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* =====================================================
   3. TYPOGRAPHY
   ===================================================== */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 1.2rem;
  letter-spacing: -.02em;
}
h1 { font-size: 4.8rem; font-weight: 800; }
h2 { font-size: 3.8rem; font-weight: 800; }
h3 { font-size: 2.8rem; }
h4 { font-size: 2.2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

p { margin-bottom: 1.6rem; color: var(--text-secondary); line-height: 1.85; }

/* =====================================================
   4. LAYOUT
   ===================================================== */
.container {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  width: 100%;
}
.container-fluid { width: 100%; padding-left: 2.4rem; padding-right: 2.4rem; }
.row { margin-left: -1.5rem; margin-right: -1.5rem; display: flex; flex-wrap: wrap; }
.row::after { content:''; display:table; clear:both; }
.row.row-center { align-items: center; }
.row.row-stack-sm { flex-direction: column; }
[class*='col-'] { padding-left:1.5rem; padding-right:1.5rem; float:left; width:100%; }

.col-lg-12 { width: 100%; }
.col-lg-9  { width: 75%; }
.col-lg-8  { width: 66.6667%; }
.col-lg-7  { width: 58.3333%; }
.col-lg-6  { width: 50%; }
.col-lg-5  { width: 41.6667%; }
.col-lg-4  { width: 33.3333%; }
.col-lg-3  { width: 25%; }
.col-lg-2  { width: 16.6667%; }

@media(max-width:991px){
  .col-md-12 { width: 100%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-3  { width: 25%; }
}
@media(max-width:767px){
  [class*='col-'] { float:none !important; width:100% !important; }
}

/* =====================================================
   5. BUTTONS
   ===================================================== */
.ed_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.4rem 3.2rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: center;
  text-decoration: none !important;
  line-height: 1.2;
}
.ed_btn i { font-size: 1.35rem; }

/* Filled primary (legacy: ed_orange ... maps to filled green) */
.ed_orange {
  background: var(--primary);
  color: var(--white) !important;
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--primary-glow);
}
.ed_orange:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow);
}

/* Outlined primary (legacy: ed_green) */
.ed_green {
  background: transparent;
  color: var(--primary) !important;
  border-color: var(--primary);
}
.ed_green:hover {
  background: var(--primary);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow);
}

/* =====================================================
   6. FORM ELEMENTS
   ===================================================== */
input, textarea, select {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--r-sm) !important;
  background: var(--white);
  transition: border-color var(--t-base), box-shadow var(--t-base);
  outline: none;
  width: 100%;
  padding: 1.2rem 1.6rem;
  line-height: 1.4;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--primary-glow) !important;
}
.form-control {
  height: 5rem;
  padding: 1.2rem 1.6rem;
  font-size: 1.5rem;
  border-radius: var(--r-sm) !important;
}

/* =====================================================
   7. SPACING UTILITIES
   ===================================================== */
.ed_toppadder10  { padding-top:1rem; }
.ed_toppadder20  { padding-top:2rem; }
.ed_toppadder30  { padding-top:3rem; }
.ed_toppadder40  { padding-top:4rem; }
.ed_toppadder50  { padding-top:5rem; }
.ed_toppadder60  { padding-top:6rem; }
.ed_toppadder70  { padding-top:7rem; }
.ed_toppadder80  { padding-top:8rem; }
.ed_toppadder90  { padding-top:9rem; }
.ed_toppadder100 { padding-top:10rem; }
.ed_bottompadder10  { padding-bottom:1rem; }
.ed_bottompadder20  { padding-bottom:2rem; }
.ed_bottompadder30  { padding-bottom:3rem; }
.ed_bottompadder40  { padding-bottom:4rem; }
.ed_bottompadder50  { padding-bottom:5rem; }
.ed_bottompadder60  { padding-bottom:6rem; }
.ed_bottompadder70  { padding-bottom:7rem; }
.ed_bottompadder80  { padding-bottom:8rem; }
.ed_bottompadder90  { padding-bottom:9rem; }
.ed_bottompadder100 { padding-bottom:10rem; }
.ed_transprentbg { background: var(--white); }
.ed_graysection  { background: var(--bg-alt); }

#educo_wrapper { width: 100%; position: relative; overflow: hidden; }

/* =====================================================
   8. TOPBAR
   ===================================================== */
.topbar {
  background: var(--primary-deeper);
  padding: .9rem 0;
  font-size: 1.35rem;
  position: relative;
  z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,.05);
  border-top: 2px solid var(--green-700);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.topbar-left a {
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color var(--t-fast);
  opacity: .95;
}
.topbar-left a:hover { color: var(--gold-bright); opacity:1; }
.topbar-left a i { font-size: 1.4rem; color: var(--gold-bright); }
.topbar-right { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.topbar-social { display: flex; align-items: center; gap: .6rem; }
.topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: var(--white) !important;
  font-size: 1.25rem;
  transition: all var(--t-base);
  border: 1px solid rgba(255,255,255,.22);
}
.topbar-social a:hover {
  background: var(--gold);
  color: var(--primary-deeper) !important;
  border-color: var(--gold);
  transform: translateY(-2px);
}
.topbar-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.8rem;
  background: var(--primary-light);
  color: var(--white) !important;
  border-radius: var(--r-full);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all var(--t-base);
}
.topbar-portal-btn:hover {
  background: var(--white);
  color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* =====================================================
   9. MAIN HEADER / NAVIGATION
   ===================================================== */
.main-header {
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 990;
  transition: box-shadow var(--t-base), padding var(--t-base);
}
.main-header.scrolled { box-shadow: var(--shadow-md); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1rem 0;
  position: relative;
}

/* Brand */
.brand {
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none !important;
}
.brand-logo {
  height: 5.6rem;
  width: auto;
  transition: transform var(--t-base);
}
.brand:hover .brand-logo { transform: scale(1.05); }
.brand:hover .brand-name { color: var(--green-700) !important; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.brand-name {
  font-family: 'Playfair Display', 'Trirong', Georgia, serif;
  font-size: clamp(1.25rem, 1rem + 0.85vw, 1.85rem);
  font-weight: 600;
  color: var(--primary) !important;
  white-space: normal;
  max-width: 100%;
  letter-spacing: -.015em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-wrap: balance;
  display: block;
}
.brand-tagline {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 500;
  margin-top: .15rem;
  line-height: 1.2;
  letter-spacing: .01em;
  opacity: .85;
}

/* Desktop Nav */
.desktop-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .1rem;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.4rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gray-800) !important;
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
  letter-spacing: .005em;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 1.4rem;
  right: 1.4rem;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base);
}
.nav-link:hover,
.nav-item.active > .nav-link { color: var(--primary) !important; background: var(--green-50); text-decoration: none; }
.nav-link:hover::after,
.nav-item.active > .nav-link::after { transform: scaleX(0); }
.nav-link .fa-angle-down { font-size: 1.15rem; transition: transform var(--t-base); }
.nav-item.has-dropdown:hover .nav-link .fa-angle-down { transform: rotate(180deg); }

/* Desktop Dropdown */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 24rem;
  background: var(--white);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  padding: .8rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 9999;
}
/* Invisible bridge to keep dropdown open when cursor moves between link and menu */
.nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  z-index: 10000;
}
.nav-item.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown li { display: block; }
.nav-dropdown li a {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text-secondary) !important;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.nav-dropdown li a i {
  width: 1.8rem;
  text-align: center;
  color: var(--primary);
  font-size: 1.35rem;
  flex-shrink: 0;
}
.nav-dropdown li a:hover {
  background: var(--green-50);
  color: var(--primary) !important;
  padding-left: 2.2rem;
}

/* Nav Actions */
.nav-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.btn-admissions {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2.2rem;
  background: var(--primary);
  color: var(--white) !important;
  border-radius: var(--r-sm);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  transition: all var(--t-base);
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.btn-admissions:hover {
  background: var(--primary-dark);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow);
}

/* Hamburger */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  width: 4.4rem;
  height: 4.4rem;
  background: var(--primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25);
}
.hamburger-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .35);
}
.hamburger-btn:active { transform: translateY(0); }
.hamburger-btn .bar {
  display: block;
  width: 2rem;
  height: 2.5px;
  background: var(--white);
  border-radius: 3px;
  transition: transform .3s ease, opacity .25s ease, width .25s ease;
  transform-origin: center;
}
.hamburger-btn.active .bar:nth-child(1) { transform: rotate(45deg) translate(.55rem, .55rem); }
.hamburger-btn.active .bar:nth-child(2) { opacity: 0; width: 0; }
.hamburger-btn.active .bar:nth-child(3) { transform: rotate(-45deg) translate(.55rem, -.55rem); }

/* =====================================================
   10. MOBILE SIDEBAR
   ===================================================== */
.mobile-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34rem;
  max-width: 92vw;
  background: var(--white);
  z-index: 9999;
  transform: translateX(105%);
  transition: transform var(--t-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}
.mobile-sidebar.open { transform: translateX(0); }

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.4rem;
  background: var(--primary);
  flex-shrink: 0;
}
.sidebar-brand img {
  height: 4.8rem;
  width: auto;
  filter: brightness(0) invert(1);
}
.sidebar-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  color: var(--white) !important;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.sidebar-close-btn:hover { background: rgba(255,255,255,.28); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .8rem 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list > li { border-bottom: 1px solid var(--border-light); }
.sidebar-list > li:last-child { border-bottom: none; }

.sidebar-list > li > a,
.sidebar-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.6rem 2.4rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text) !important;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
}
.sidebar-list > li > a:hover,
.sidebar-dropdown-toggle:hover {
  background: var(--green-50);
  color: var(--primary) !important;
  border-left-color: var(--primary);
  padding-left: 2.8rem;
}
.sidebar-list > li > a i:first-child,
.sidebar-dropdown-toggle > i:first-child {
  width: 2rem;
  text-align: center;
  color: var(--primary);
  font-size: 1.45rem;
  flex-shrink: 0;
}
.sidebar-dropdown-toggle .toggle-icon {
  margin-left: auto;
  font-size: 1.3rem;
  transition: transform var(--t-base);
  color: var(--text-muted);
}
.sidebar-has-dropdown.open .toggle-icon { transform: rotate(180deg); }
.sidebar-has-dropdown.open .sidebar-dropdown-toggle {
  background: var(--green-50);
  color: var(--primary) !important;
  border-left-color: var(--primary);
}

.sidebar-dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--gray-50);
  transition: max-height var(--t-slow);
}
.sidebar-dropdown li { border-bottom: 1px solid var(--border-light); }
.sidebar-dropdown li:last-child { border-bottom: none; }
.sidebar-dropdown li a {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 2.4rem 1.3rem 5.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text-secondary) !important;
  border-left: 3px solid transparent;
  transition: all var(--t-fast);
}
.sidebar-dropdown li a i {
  width: 1.8rem;
  text-align: center;
  color: var(--primary);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sidebar-dropdown li a:hover {
  color: var(--primary) !important;
  background: var(--green-100);
  border-left-color: var(--primary);
  padding-left: 6rem;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 2.4rem;
  background: var(--gray-50);
  flex-shrink: 0;
}
.sidebar-footer p {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  color: var(--text-secondary);
  margin-bottom: .8rem;
}
.sidebar-footer p i { color: var(--primary); width: 1.6rem; flex-shrink: 0; }
.sidebar-footer p:last-of-type { margin-bottom: 1.4rem; }
.sidebar-social { display: flex; gap: .8rem; flex-wrap: wrap; }
.sidebar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  background: var(--primary);
  color: var(--white) !important;
  border-radius: 50%;
  font-size: 1.5rem;
  transition: all var(--t-base);
}
.sidebar-social a:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* Mobile Overlay */
.mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-slow);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mob-overlay.active { opacity: 1; visibility: visible; }

/* =====================================================
   11. HERO SLIDER
   ===================================================== */
.ed_slider_form_section { float: left; width: 100%; position: relative; }
.ed_mainslider { position: relative; overflow: hidden; }
.ed_course_single_image_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1;
}

/* Revolution Slider caption styles (moved from inline) */
.tp-slider-caption {
  z-index: 5;
  white-space: nowrap;
  font-size: 3.6rem;
  color: #fff;
  font-family: 'Trirong', serif;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
@media (max-width: 767px) {
  .tp-slider-caption { font-size: 2.4rem; }
}

/* =====================================================
   12. WELCOME / INTRO CARD
   ===================================================== */
.ed_form_box {
  float: left;
  width: 100%;
  position: relative;
  z-index: 10;
  margin-top: -9rem;
  padding: 0 2.4rem;
}
.ed_search_form {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2xl);
  padding: 5rem 5rem 4.5rem;
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--primary);
  max-width: 1240px;
  margin: 0 auto;
}
.ed_search_form::before {
  content: '';
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 26rem;
  height: 26rem;
  background: var(--green-50);
  border-radius: 50%;
  pointer-events: none;
}
.ed_search_form::after {
  content: '';
  position: absolute;
  bottom: -6rem;
  left: -6rem;
  width: 18rem;
  height: 18rem;
  background: var(--amber-100);
  border-radius: 50%;
  opacity: .6;
  pointer-events: none;
}
.ed_search_form .row { align-items: center; position: relative; z-index: 1; }
.ed_search_form .col-lg-3 { text-align: center; }

@keyframes imgGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .12), 0 0 30px rgba(var(--primary-rgb), .2), 0 8px 40px var(--primary-glow); }
  50%      { box-shadow: 0 0 0 18px rgba(var(--primary-rgb), .06), 0 0 60px rgba(var(--primary-rgb), .32), 0 12px 60px rgba(var(--primary-rgb), .28); }
}
.ed_search_form .img-circle {
  width: 20rem;
  height: 20rem;
  border-radius: 50% !important;
  object-fit: cover;
  border: 5px solid var(--primary);
  padding: 0;
  display: block;
  margin: 0 auto;
  animation: imgGlow 3.5s ease-in-out infinite;
  transition: transform var(--t-slow);
}
.ed_search_form .img-circle:hover {
  transform: scale(1.07);
  animation-play-state: paused;
  box-shadow: 0 0 0 10px var(--primary-glow), 0 14px 55px rgba(var(--primary-rgb), .45) !important;
}

.welcome-content { padding-top: 1rem; }
.welcome-label {
  display: inline-block;
  padding: .6rem 1.6rem;
  background: var(--green-100);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.6rem;
}
.welcome-content h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1.4rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.welcome-content .welcome-desc {
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
}
.welcome-content .welcome-brief {
  font-size: 1.5rem;
  line-height: 1.88;
  color: var(--gray-600);
  margin-bottom: 2.4rem;
}
.welcome-content .welcome-cta {
  padding: 1.2rem 3rem;
  font-size: 1.5rem;
  border-radius: var(--r-sm);
}

/* =====================================================
   13. SECTION HEADING
   ===================================================== */
.section-head { text-align: center; margin-bottom: 5.5rem; }
.section-head .label-tag {
  display: inline-block;
  padding: .6rem 1.8rem;
  background: var(--green-100);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1.4rem;
}
.section-head h2,
.section-head h3 {
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 1rem;
  letter-spacing: -.02em;
}
.section-head p {
  max-width: 60rem;
  margin: 0 auto;
  font-size: 1.6rem;
  color: var(--text-secondary);
}
.section-divider {
  width: 8rem;
  height: 1.4rem;
  background: transparent;
  margin: 1.6rem auto 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
  transform: translateY(-50%);
  opacity: .35;
}
.section-divider::after {
  content: '';
  position: relative;
  width: 1rem;
  height: 1rem;
  background: var(--primary);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 .4rem var(--bg);
}
.section-divider.section-divider-left { margin-left: 0; }
.section-divider.section-divider-no-shadow::after { box-shadow: none; }
.ed_transprentbg .section-divider::after { box-shadow: 0 0 0 .4rem var(--white); }
.ed_graysection .section-divider::after { box-shadow: 0 0 0 .4rem var(--bg-alt); }

/* Legacy heading (still used in some pages) */
.ed_heading_top { text-align: center; width: 100%; margin-bottom: 4rem; }
.ed_heading_top h3 {
  display: inline-block;
  margin: 0;
  padding-bottom: 2.2rem;
  font-size: 3rem;
  font-weight: 800;
  color: var(--text);
  position: relative;
}
.ed_heading_top h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

/* =====================================================
   14. MISSION CAROUSEL
   ===================================================== */
.ed_populer_areas_slider { padding: 0 1rem; }
.ed_item_img {
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 2.8rem;
  box-shadow: var(--shadow-lg);
  border: 5px solid var(--green-100);
  transition: border-color var(--t-base), transform var(--t-base);
}
.ed_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.owl-carousel .owl-item:hover .ed_item_img { border-color: var(--primary); transform: scale(1.04); }
.owl-carousel .owl-item:hover .ed_item_img img { transform: scale(1.1); }
.ed_item_description { text-align: center; padding: 0 2rem; }
.ed_item_description h4 { font-size: 1.8rem; color: var(--text); margin-bottom: .8rem; font-weight: 700; }
.ed_item_description p { font-size: 1.5rem; color: var(--text-secondary); line-height: 1.85; margin: 0; }

.owl-theme .owl-nav { margin-top: 3rem; }
.owl-theme .owl-nav button {
  background: var(--white) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text) !important;
  font-size: 1.6rem !important;
  width: 4.8rem;
  height: 4.8rem;
  transition: all var(--t-base);
}
.owl-theme .owl-nav button:hover {
  background: var(--primary) !important;
  color: var(--white) !important;
  transform: scale(1.08);
}
.owl-theme .owl-dots .owl-dot span {
  width: 1rem; height: 1rem; background: var(--border); border-radius: 50%;
  transition: all var(--t-base); margin: 0 .4rem;
}
.owl-theme .owl-dots .owl-dot.active span {
  background: var(--primary); width: 3rem; border-radius: var(--r-full);
}

/* =====================================================
   15. VISION / MISSION CARDS
   ===================================================== */
.skill_section {
  background: var(--white);
  padding: 4rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: all var(--t-slow);
  position: relative;
  overflow: hidden;
  height: 100%;
  margin-bottom: 3rem;
}
.skill_section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 0;
  background: var(--primary);
  transition: height var(--t-slow);
}
.skill_section:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: transparent; }
.skill_section:hover::before { height: 100%; }
.skill_section h4 { font-size: 2.2rem; font-weight: 700; margin-bottom: 2rem; color: var(--text); }
.skill_section h4 a { color: inherit; }
.skill_section h4 a:hover { color: var(--primary); }
.skill_section h4 a i { margin-left: .6rem; color: var(--primary); font-size: 1.8rem; }
.skill_section h5 { font-size: 1.6rem; font-weight: 600; color: var(--primary); margin-bottom: 1.2rem; }
.skill_section p { font-size: 1.5rem; color: var(--text-secondary); line-height: 1.85; float: left; width: 80%; position: relative; z-index: 1; }
.skill_section span { float: left; width: 20%; text-align: center; position: relative; z-index: 1; }
.skill_section span i { font-size: 4.8rem; color: var(--primary); opacity: .8; transition: all var(--t-spring); }
.skill_section:hover span i { color: var(--accent); transform: rotate(12deg) scale(1.15); opacity: 1; }
.skill_section ul { list-style: none; padding: 0; position: relative; z-index: 1; margin: 0; }
.skill_section ul li {
  padding: 1rem 0 1rem 3.4rem;
  position: relative;
  font-size: 1.5rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  line-height: 1.7;
}
.skill_section ul li:last-child { border-bottom: none; }
.skill_section ul li::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  position: absolute;
  left: 0; top: 1rem;
  width: 2.2rem; height: 2.2rem;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* =====================================================
   16. PARALLAX / VIDEO SECTION
   ===================================================== */
.ed_parallax_section {
  width: 100%;
  padding: 10rem 0;
  background: url(../images/content/section_3_bg.jpg) center center / cover fixed;
  position: relative;
  color: var(--white);
}
.ed_parallax_section > .ed_img_overlay {
  position: absolute; inset: 0;
  background: var(--primary-deeper);
  opacity: .92;
}
.ed_parallax_section .container { position: relative; z-index: 1; }

.ed_video_section {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.ed_video_section .ed_video { position: relative; cursor: pointer; }
.ed_video_section .ed_video img { width: 100%; display: block; }
.ed_video_section .ed_video .ed_img_overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base);
}
.ed_video_section .ed_video .ed_img_overlay a i {
  width: 8rem; height: 8rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  color: var(--primary);
  border-radius: 50%;
  font-size: 2.8rem;
  padding-left: .5rem;
  box-shadow: 0 0 0 1.2rem rgba(255,255,255,.2);
  transition: all var(--t-spring);
}
.ed_video_section .ed_video .ed_img_overlay:hover { background: rgba(0,0,0,.45); }
.ed_video_section .ed_video .ed_img_overlay a i:hover {
  transform: scale(1.12);
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 0 0 1.4rem rgba(255,255,255,.15);
}
.ed_video_section_discription {
  padding-left: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.ed_video_section_discription .section-head { text-align: left; margin-bottom: 2.4rem; }
.ed_video_section_discription .section-head h2,
.ed_video_section_discription .section-head h3 {
  color: var(--white) !important;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0;
}
.ed_video_section_discription .section-head .label-tag {
  background: rgba(255,255,255,.16);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.25);
  margin-bottom: 1.2rem;
}
.ed_video_section_discription .section-divider::before { background: var(--white); opacity: .5; }
.ed_video_section_discription .section-divider::after { box-shadow: 0 0 0 .4rem var(--primary-deeper); background: var(--white); }

/* Core values list on dark bg */
.values-list { list-style: none; padding: 0; margin: 0 0 3rem; }
.values-list li {
  padding: 1rem 0;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgba(255,255,255,.92);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.values-list li:last-child { border-bottom: none; }
.values-list li i { font-size: 1.8rem; color: var(--green-300); flex-shrink: 0; }

/* =====================================================
   17. COUNTER / STATS
   ===================================================== */
.ed_counter_wrapper {
  background: transparent;
  border-radius: var(--r-lg);
  padding: 0;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
  width: 100%;
}
.ed_counter {
  flex: 1;
  min-width: 26rem;
  max-width: 36rem;
  text-align: center;
  padding: 4rem 2.8rem 3.6rem;
  position: relative;
  background: var(--bg-dark);
  border-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
  transition: all var(--t-slow);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.ed_counter::before {
  content: '';
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: var(--primary-light);
  opacity: .14;
  pointer-events: none;
}
.ed_counter::after {
  content: '';
  position: absolute;
  bottom: -5rem;
  left: -5rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: var(--green-300);
  opacity: .08;
  pointer-events: none;
}
.ed_counter:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
  border-color: rgba(var(--green-400-rgb), .25);
}
.ed_counter i.fa {
  width: 7.2rem;
  height: 7.2rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--green-300) !important;
  font-size: 2.8rem !important;
  margin-bottom: 1.8rem;
  transition: all var(--t-spring);
  border: 2px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
}
.ed_counter:hover i.fa {
  background: rgba(var(--green-400-rgb), .22);
  border-color: rgba(var(--green-300-rgb), .35);
  transform: scale(1.1) rotate(-8deg);
}
.ed_counter h2 {
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: .4rem;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
  position: relative;
  z-index: 1;
}
.ed_counter h4 {
  font-size: 1.7rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  margin-bottom: 1rem;
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
}
.ed_counter p {
  font-size: 1.4rem;
  color: rgba(255,255,255,.72);
  max-width: 26rem;
  margin: 0 auto;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

/* =====================================================
   18. WHY CHOOSE US CARDS
   ===================================================== */
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.why-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 3.5rem 3rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: all var(--t-slow);
  position: relative;
  overflow: hidden;
}
.why-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
.why-card:hover::after { transform: scaleX(1); }
.why-card-icon {
  width: 7rem; height: 7rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-100);
  border-radius: var(--r-md);
  margin-bottom: 2.4rem;
  transition: all var(--t-spring);
}
.why-card:hover .why-card-icon { background: var(--primary); transform: rotate(5deg) scale(1.1); }
.why-card-icon i { font-size: 3rem; color: var(--primary); transition: color var(--t-base); }
.why-card:hover .why-card-icon i { color: var(--white); }
.why-card h4 { font-size: 2rem; font-weight: 700; margin-bottom: 1.2rem; color: var(--text); }
.why-card p { font-size: 1.5rem; color: var(--text-secondary); line-height: 1.85; margin: 0; }

/* =====================================================
   19. NEWSLETTER
   ===================================================== */
.ed_newsletter_section {
  width: 100%;
  padding: 8rem 0;
  background: url(../images/content/section_6_bg.jpg) center center / cover fixed;
  position: relative;
  color: var(--white);
}
.ed_newsletter_section > .ed_img_overlay {
  position: absolute; inset: 0;
  background: var(--primary-deeper);
  opacity: .94;
}
.ed_newsletter_section .container { position: relative; z-index: 1; }
.ed_newsletter_section_heading .label-tag {
  display: inline-block;
  padding: .6rem 1.8rem;
  background: rgba(255,255,255,.16);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1.2rem;
}
.ed_newsletter_section_heading h4 {
  color: var(--white);
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.ed_newsletter_section_form { position: relative; z-index: 1; }
.ed_newsletter_section_form .newsletter-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.ed_newsletter_section_form .form-control {
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.22) !important;
  color: var(--white);
  height: 5.4rem;
  flex: 1;
  min-width: 0;
  padding: 1.2rem 1.8rem;
}
.ed_newsletter_section_form .form-control::placeholder { color: rgba(255,255,255,.55); }
.ed_newsletter_section_form .form-control:focus {
  border-color: var(--white) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12) !important;
}
.ed_newsletter_section_form .ed_green {
  background: var(--primary-light);
  color: var(--white) !important;
  border-color: var(--primary-light);
  height: 5.4rem;
  padding: 0 2.8rem;
  white-space: nowrap;
  font-size: 1.45rem;
}
.ed_newsletter_section_form .ed_green:hover {
  background: var(--white);
  color: var(--primary) !important;
  border-color: var(--white);
  transform: translateY(-2px);
}

/* =====================================================
   FOOTER ... Master block (used by every homepage template)
   All colours come from the dynamic theme variables
   (--primary, --primary-dark, --primary-deeper, --primary-light,
    --primary-mist, --accent, --accent-dark, --gold) and their
   RGB triplets, so it automatically re-skins when the admin
   changes the school brand colours in School Settings.
   ===================================================== */

/* ---------- Newsletter Strip ---------- */
.ed_footer_newsletter{
  background:
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding:5rem 0;
  position:relative;
  overflow:hidden;
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.06);
}
.ed_footer_newsletter::before{
  content:'';
  position:absolute;
  top:-8rem; right:-6rem;
  width:26rem; height:26rem;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.ed_footer_newsletter::after{
  content:'';
  position:absolute;
  bottom:-10rem; left:-8rem;
  width:30rem; height:30rem;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}
.ed_fnl-blob{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity:.18; pointer-events:none;
}
.ed_fnl-blob--1{ width:24rem; height:24rem; top:-8rem; right:20%; }
.ed_fnl-blob--2{ width:18rem; height:18rem; bottom:-6rem; right:8%; opacity:.12; }
.ed_footer_newsletter .container{ position:relative; z-index:1; }

.ed_fnl-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4rem;
  flex-wrap:wrap;
}
.ed_fnl-text{ flex:1 1 30rem; }
.ed_fnl-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.12);
  color:var(--white);
  font-family:var(--font-body);
  font-size:1.1rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.18em;
  padding:.5rem 1.2rem; border-radius:999px;
  margin-bottom:1.2rem;
  border:1px solid rgba(255,255,255,.2);
}
.ed_fnl-text h4{
  color:var(--white);
  font-size:clamp(2.2rem,3.2vw,2.8rem);
  font-weight:700;
  margin:0 0 1rem;
  letter-spacing:-.01em;
  line-height:1.25;
}
.ed_fnl-text p{
  color:rgba(255,255,255,.85);
  font-size:1.5rem;
  margin:0;
  line-height:1.7;
  max-width:46rem;
}

.ed_fnl-form{
  flex:1 1 32rem;
  display:flex;
  gap:.6rem;
  background:var(--white);
  padding:.6rem;
  border-radius:999px;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  max-width:50rem;
  align-items:center;
  position:relative;
  border:2px solid rgba(255,255,255,.2);
}
.ed_fnl-form input{
  flex:1;
  min-width:0;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:1.5rem;
  padding:1.2rem 1.8rem !important;
  color:var(--gray-900);
  font-family:var(--font-body);
}
.ed_fnl-form input::placeholder{ color:var(--gray-500); }
.ed_fnl-form input:focus{ outline:none; }
.ed_fnl-form button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  background:var(--accent);
  color:var(--white) !important;
  border:none;
  border-radius:999px;
  padding:1.2rem 2.6rem;
  font-family:var(--font-body);
  font-size:1.4rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:.25s;
  flex-shrink:0;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.4);
}
.ed_fnl-form button:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(var(--accent-rgb),.55);
}

/* ---------- Main Footer Top ---------- */
.ed_footer_wrapper{ position:relative; }
.ed_footer_top{
  background:
    linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
  padding:7rem 0 5rem;
  position:relative;
  color:var(--white);
  overflow:hidden;
  border-top:4px solid var(--accent);
}
.ed_footer_top::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:rgba(255,255,255,.06);
}
.ed_footer_top::after{
  content:'';
  position:absolute;
  top:4px; left:0;
  width:10rem; height:2px;
  background:var(--gold);
  border-radius:0 2px 2px 0;
}
.ed_ft-blob{
  position:absolute;
  top:-10rem; right:-8rem;
  width:30rem; height:30rem;
  border-radius:50%;
  background:radial-gradient(circle, var(--primary-light) 0%, transparent 65%);
  opacity:.18;
  pointer-events:none;
  z-index:0;
}
.ed_footer_top::before{ z-index:0; }
.ed_footer_top .ed_ft-blob{ z-index:0; }
.ed_footer_grid{ position:relative; z-index:1; }

.ed_footer_grid{
  display:grid;
  grid-template-columns:1.35fr 2.15fr 1.25fr;
  gap:4rem;
  align-items:start;
}
/* Two-col wrapper for Quick Links + Get In Touch — left aligned beside each other */
.ed_footer_two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 3rem;
  align-items:start;
}
.ed_footer_two-col .text-widget{ text-align:left; }
.ed_footer_two-col .widget-title{ text-align:left; }
.ed_footer_two-col .widget-title::after{ left:0; transform:none; }
.ed_footer_two-col .footer-links li a{ justify-content:flex-start; }
.ed_footer_two-col .footer-contact-list li{ justify-content:flex-start; text-align:left; }

/* Text Widget (per-column) */
.text-widget{ width:100%; }
.text-widget .footer-logo-img{
  max-height:6.4rem;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  margin-bottom:2rem;
  background:#fff;
  padding:10px 16px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:1;
  transition:.3s;
}
.text-widget a:hover .footer-logo-img{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(var(--accent-rgb),.35);
}
.text-widget .widget-desc{
  color:var(--white);
  font-size:1.5rem;
  line-height:1.85;
  margin-bottom:2.2rem;
  opacity:.92;
}

.text-widget h4.widget-title{
  color:var(--white);
  font-size:1.7rem;
  font-weight:800;
  margin:0 0 2.2rem;
  padding-bottom:1.2rem;
  position:relative;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.text-widget h4.widget-title::after{
  content:'';
  position:absolute;
  bottom:-1px; left:0;
  width:4rem; height:2px;
  background:var(--accent);
  border-radius:2px;
}

/* Quick Links */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-links li:last-child{ border-bottom:none; }
.footer-links li a{
  color:var(--white) !important;
  font-size:1.45rem;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.95rem 0;
  opacity:.92;
  transition:.25s;
  font-weight:500;
  text-decoration:none !important;
}
.footer-links li a i{
  color:var(--accent);
  font-size:1.1rem;
  transition:transform .25s;
  flex-shrink:0;
  width:1.6rem;
  text-align:center;
}
.footer-links li a:hover{
  color:var(--white) !important;
  padding-left:.8rem;
}
.footer-links li a:hover i{
  transform:translateX(4px);
  color:var(--gold);
}

/* Contact list with icon box */
.footer-contact-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-contact-list li{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  margin-bottom:1.6rem;
  font-size:1.4rem;
  line-height:1.65;
  color:var(--white);
  opacity:.92;
}
.footer-contact-list li:last-child{ margin-bottom:0; }
.footer-contact-list .fc-icon{
  flex-shrink:0;
  width:3.8rem; height:3.8rem;
  border-radius:12px;
  background:rgba(var(--accent-rgb),.16);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:1.4rem;
  transition:.25s;
  border:1px solid rgba(var(--accent-rgb),.2);
}
.footer-contact-list li:hover .fc-icon{
  background:var(--accent);
  color:var(--white);
  transform:scale(1.08) rotate(-6deg);
  border-color:var(--accent);
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.4);
}
.footer-contact-list a{
  color:rgba(255,255,255,.88) !important;
  transition:color .2s;
  word-break:break-word;
  text-decoration:none !important;
}
.footer-contact-list a:hover{ color:var(--gold) !important; }

/* About / Prospectus column */
.text-widget .widget-brief{
  color:var(--white);
  font-size:1.45rem;
  line-height:1.85;
  margin-bottom:2.2rem;
  opacity:.92;
}
.ed_footer_prospectus{
  display:inline-flex !important;
  align-items:center;
  gap:1rem;
  padding:1.3rem 2.6rem !important;
  font-size:1.4rem;
  border-radius:999px !important;
  margin-top:0;
  font-weight:800;
  background:var(--accent) !important;
  color:var(--white) !important;
  border:2px solid var(--accent) !important;
  box-shadow:0 8px 22px rgba(var(--accent-rgb),.35);
  transition:.3s;
}
.ed_footer_prospectus:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(var(--accent-rgb),.5);
  background:var(--accent-dark) !important;
  border-color:var(--accent-dark) !important;
}
.ed_footer_prospectus i{ font-size:1.3rem; }

/* Social row */
.ed_sociallink{
  margin-top:1rem;
}
.ed_sociallink ul{
  display:flex;
  gap:.9rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.ed_sociallink ul li a{
  width:4.2rem; height:4.2rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.88) !important;
  border-radius:50%;
  font-size:1.55rem;
  border:1px solid rgba(255,255,255,.12);
  transition:.3s;
  text-decoration:none !important;
}
.ed_sociallink ul li a:hover{
  background:var(--accent);
  color:var(--white) !important;
  border-color:var(--accent);
  transform:translateY(-4px) rotate(-8deg);
  box-shadow:0 10px 24px rgba(var(--accent-rgb),.45);
}

/* ---------- Trust Strip (between main and bottom) ---------- */
.ed_footer_trust{
  background:var(--primary-dark);
  padding:2.6rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}
.ed_footer_trust::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0,rgba(var(--gold-rgb),.05) 50%,transparent 100%);
  pointer-events:none;
}
.ed_trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  position:relative; z-index:1;
}
.ed_trust-item{
  display:flex; align-items:center; gap:1.2rem;
  color:var(--white);
}
.ed_trust-item i{
  width:4.4rem; height:4.4rem;
  border-radius:50%;
  background:rgba(var(--gold-rgb),.15);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
  flex-shrink:0;
  border:1px solid rgba(var(--gold-rgb),.25);
}
.ed_trust-item strong{
  display:block;
  font-family:var(--font-body);
  font-size:1.5rem; font-weight:800;
  color:var(--white);
  letter-spacing:.01em;
  margin-bottom:.1rem;
}
.ed_trust-item span{
  display:block;
  font-size:1.2rem;
  color:var(--white);
  opacity:.88;
  font-weight:500;
}

/* ---------- Footer Bottom ---------- */
.ed_footer_bottom{
  background:var(--primary-deeper);
  padding:2.2rem 0;
  position:relative;
  border-top:1px solid rgba(255,255,255,.04);
}
.ed_footer_bottom::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0, var(--accent) 50%, transparent 100%);
  opacity:.5;
}
.ed_footer_bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.4rem;
}
.ed_copy_right{
  flex:1 1 auto;
  min-width:0;
}
.ed_copy_right p{
  color:var(--white);
  font-size:1.35rem;
  margin:0;
  line-height:1.6;
  opacity:.92;
}
.ed_copy_right p a{
  color:var(--gold-bright) !important;
  font-weight:700;
  transition:color .2s;
  text-decoration:none;
}
.ed_copy_right p a:hover{ color:var(--gold) !important; }

.ed_footer_menu{
  flex-shrink:0;
}
.ed_footer_menu ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2.4rem;
  align-items:center;
}
.ed_footer_menu ul li a{
  font-size:1.35rem;
  color:rgba(255,255,255,.7) !important;
  transition:color .2s;
  font-weight:500;
  text-decoration:none;
  position:relative;
}
.ed_footer_menu ul li:not(:last-child) a::after{
  content:'';
  position:absolute;
  right:-1.2rem;
  top:50%;
  transform:translateY(-50%);
  width:3px; height:3px;
  background:rgba(255,255,255,.25);
  border-radius:50%;
}
.ed_footer_menu ul li a:hover{ color:var(--gold) !important; }

/* ---------- Responsive ---------- */
@media(max-width:1199px){
  .ed_fnl-grid{ gap:3rem; }
  .ed_footer_grid{ grid-template-columns:1.15fr 1.9fr 1fr; gap:3rem; }
  .ed_footer_two-col{ gap:2rem 2.4rem; }
}
@media(max-width:991px){
  .ed_fnl-grid{ flex-direction:column; align-items:flex-start; gap:2.4rem; }
  .ed_fnl-form{ width:100%; }
  .ed_footer_top{ padding:5rem 0 3.6rem; }
  .ed_footer_grid{ grid-template-columns:1fr 1fr; gap:3rem; }
  .ed_footer_two-col{ grid-column:1 / -1; gap:2.4rem 3rem; }
  .ed_trust-grid{ grid-template-columns:1fr 1fr; gap:1.6rem; }
  .ed_footer_newsletter{ padding:4rem 0; }
  .ed_footer_bottom-inner{ gap:1.6rem; }
  .ed_footer_menu ul{ gap:.4rem 1.6rem; }
}
@media(max-width:768px){
  .ed_footer_newsletter{ padding:3.6rem 0; }
  .ed_fnl-form{
    flex-direction:column;
    border-radius:20px;
    padding:.8rem;
    background:transparent;
    box-shadow:none;
    border:none;
  }
  .ed_fnl-form input{
    background:var(--white);
    border-radius:14px !important;
    padding:1.3rem 1.6rem !important;
    width:100%;
  }
  .ed_fnl-form button{ width:100%; padding:1.4rem 2rem; }
  .ed_footer_top{ padding:4rem 0 3rem; }
  .ed_footer_top::after{ width:6rem; }
  .ed_footer_grid{ grid-template-columns:1fr; gap:2.8rem; }
  .text-widget{ text-align:center; }
  .text-widget .footer-logo-img{
    max-height:5.4rem;
    margin-left:auto; margin-right:auto;
    display:block;
  }
  .text-widget h4.widget-title{ font-size:1.55rem; margin-bottom:1.6rem; }
  .text-widget h4.widget-title::after{ left:50%; transform:translateX(-50%); }
  .text-widget .widget-desc{ font-size:1.4rem; }
  .footer-links li a{ font-size:1.35rem; padding:.8rem 0; justify-content:center; }
  .footer-contact-list li{ justify-content:center; text-align:left; font-size:1.35rem; gap:1rem; }
  /* Keep Quick Links + Get In Touch as two columns left-aligned even on mobile */
  .ed_footer_two-col{
    grid-template-columns:1fr 1fr;
    gap:2rem 2rem;
    text-align:left;
  }
  .ed_footer_two-col .text-widget{ text-align:left; }
  .ed_footer_two-col .text-widget h4.widget-title{ text-align:left; }
  .ed_footer_two-col .text-widget h4.widget-title::after{ left:0; transform:none; }
  .ed_footer_two-col .footer-links li a{ justify-content:flex-start; }
  .ed_footer_two-col .footer-contact-list li{ justify-content:flex-start; }
  .footer-contact-list .fc-icon{ width:3.4rem; height:3.4rem; font-size:1.3rem; }
  .text-widget .widget-brief{ font-size:1.35rem; }
  .ed_sociallink ul{ justify-content:center; }
  .ed_trust-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .ed_trust-item{ justify-content:center; text-align:left; }
  .ed_footer_prospectus{ width:100%; justify-content:center; font-size:1.3rem; padding:1.2rem 2rem !important; }
  .ed_footer_bottom{ padding:1.8rem 0; }
  .ed_footer_bottom-inner{ flex-direction:column; text-align:center; gap:1.2rem; }
  .ed_copy_right{ text-align:center; }
  .ed_copy_right p{ font-size:1.25rem; }
  .ed_footer_menu ul{ justify-content:center; gap:.3rem 1.6rem; }
  .ed_footer_menu ul li a{ font-size:1.25rem; }
  .ed_footer_menu ul li:not(:last-child) a::after{ display:none; }
}
@media(max-width:480px){
  .ed_fnl-text h4{ font-size:2rem; }
  .ed_fnl-text p{ font-size:1.35rem; }
  .ed_trust-item strong{ font-size:1.35rem; }
  .ed_trust-item span{ font-size:1.1rem; }
  .ed_trust-item i{ width:4rem; height:4rem; font-size:1.4rem; }
  /* Keep Quick Links + Get In Touch as two columns left-aligned (scoped — does not affect other footer styling) */
  .ed_footer_two-col{ grid-template-columns:1fr 1fr; gap:1.8rem 1.4rem; }
  .ed_footer_two-col .text-widget h4.widget-title{ font-size:1.4rem; }
  .ed_footer_two-col .footer-links li a{ font-size:1.28rem; padding:.7rem 0; }
  .ed_footer_two-col .footer-contact-list li{ font-size:1.25rem; }
}
/* =====================================================
   Floating 3D Hero Slider ... bottom-left corner, glassmorphic
   Sits stylishly on top of the trust items
   ===================================================== */
.hp-hero-slider {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  z-index: 5;
  width: 240px;
  perspective: 1500px;
  pointer-events: none;
  display: block;
  animation: hpHeroSlideIn 1.2s cubic-bezier(.4,0,.2,1) .3s both;
}
@keyframes hpHeroSlideIn {
  from { opacity: 0; transform: translateX(-40px) rotateY(25deg) scale(.9); }
  to   { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
}
.hp-hero-slider-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 10px 25px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(0,0,0,.15);
  pointer-events: auto;
  transform: rotateY(-14deg) rotateX(6deg);
  transform-style: preserve-3d;
  animation: hpHeroFloat 7s ease-in-out infinite;
}
@keyframes hpHeroFloat {
  0%,100% { transform: rotateY(-14deg) rotateX(6deg) translateY(0); }
  50%     { transform: rotateY(-12deg) rotateX(4deg) translateY(-10px); }
}
/* Glossy highlight sweep on the frame */
.hp-hero-slider-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.18);
  z-index: 4;
  pointer-events: none;
  transform: translateX(-100%);
  animation: hpSliderShine 6s ease-in-out infinite;
}
@keyframes hpSliderShine {
  0%, 70% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.hp-hero-slider-deco { position: absolute; pointer-events: none; z-index: -1; }
.hp-hero-slider-deco--1 {
  top: -30px; left: -30px;
  width: 90px; height: 90px;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  border-radius: 50%;
  filter: blur(6px);
}
.hp-hero-slider-deco--2 {
  bottom: -25px; right: -25px;
  width: 70px; height: 70px;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  border-radius: 50%;
  filter: blur(6px);
}
.hp-hero-slider-deco--3 {
  top: 40%; left: -40px;
  width: 6px; height: 6px;
  background: var(--green-300);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--green-300);
  animation: hpDot 2.4s ease-in-out infinite;
}
.hp-hero-slider-deco--4 {
  bottom: 22%; right: -32px;
  width: 8px; height: 8px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 16px var(--gold-bright);
  animation: hpDot 3s ease-in-out infinite .8s;
}
@keyframes hpDot {
  0%,100% { opacity: .5; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.4); }
}

/* ... Track & slides ... */
.hp-hero-slider-track {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 24px;
  overflow: hidden;
}
.hp-hero-slider-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hp-hero-slider-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 6s ease-out;
}

/* ... PowerPoint-style TRANSITIONS ... */
/* 1. Ken Burns (slow zoom + pan) */
.hp-hero-slider-slide[data-tx="kenburns"].is-active {
  animation: hpTxKenBurns 7s ease-out both;
}
.hp-hero-slider-slide[data-tx="kenburns"].is-active img {
  animation: hpImgKenBurns 7s ease-out both;
}
.hp-hero-slider-slide[data-tx="kenburns"].is-out {
  animation: hpTxFadeOut 1s ease-in both;
}
@keyframes hpTxKenBurns {
  0%   { opacity: 0; transform: scale(.92) translateX(-30px); visibility: visible; }
  100% { opacity: 1; transform: scale(1) translateX(0); visibility: visible; }
}
@keyframes hpImgKenBurns {
  0%   { transform: scale(1.18) translate(-4%, -3%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* 2. Zoom Flip (zoom-in + slight 3D flip) */
.hp-hero-slider-slide[data-tx="zoom-flip"].is-active {
  animation: hpTxZoomFlip 1.4s cubic-bezier(.4,0,.2,1) both;
}
.hp-hero-slider-slide[data-tx="zoom-flip"].is-out {
  animation: hpTxZoomFlipOut 1s ease-in both;
}
@keyframes hpTxZoomFlip {
  0%   { opacity: 0; transform: scale(1.3) rotateY(35deg); visibility: visible; }
  100% { opacity: 1; transform: scale(1) rotateY(0); visibility: visible; }
}
@keyframes hpTxZoomFlipOut {
  0%   { opacity: 1; transform: scale(1) rotateY(0); }
  100% { opacity: 0; transform: scale(.7) rotateY(-35deg); visibility: hidden; }
}

/* 3. Slide Rotate (rotate in from corner) */
.hp-hero-slider-slide[data-tx="slide-rotate"].is-active {
  animation: hpTxSlideRotate 1.3s cubic-bezier(.34,1.56,.64,1) both;
}
.hp-hero-slider-slide[data-tx="slide-rotate"].is-out {
  animation: hpTxSlideRotateOut 1s ease-in both;
}
@keyframes hpTxSlideRotate {
  0%   { opacity: 0; transform: translate(40px, -40px) rotate(15deg) scale(.85); visibility: visible; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); visibility: visible; }
}
@keyframes hpTxSlideRotateOut {
  0%   { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-40px, 40px) rotate(-15deg) scale(.85); visibility: hidden; }
}

/* 4. Morph Blur (blur in, then sharpen) */
.hp-hero-slider-slide[data-tx="morph-blur"].is-active {
  animation: hpTxMorphBlur 1.4s ease-out both;
}
.hp-hero-slider-slide[data-tx="morph-blur"].is-out {
  animation: hpTxMorphBlurOut 1s ease-in both;
}
@keyframes hpTxMorphBlur {
  0%   { opacity: 0; transform: scale(1.2); filter: blur(20px); visibility: visible; }
  60%  { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); visibility: visible; }
}
@keyframes hpTxMorphBlurOut {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(.9); filter: blur(16px); visibility: hidden; }
}

/* Active fallback for slides without tx data */
.hp-hero-slider-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: hpTxFadeIn 1s ease both;
}
.hp-hero-slider-slide.is-out {
  animation: hpTxFadeOut 1s ease both;
}
@keyframes hpTxFadeIn {
  from { opacity: 0; transform: scale(1.05); visibility: visible; }
  to   { opacity: 1; transform: scale(1); visibility: visible; }
}
@keyframes hpTxFadeOut {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

.hp-hero-slider-overlay {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,.55);
  z-index: 2;
  pointer-events: none;
}
.hp-hero-slider-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem;
  background: rgba(255,255,255,.95);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: .9rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hp-hero-slider-tag i { font-size: .85rem; }

.hp-hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.40);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  z-index: 5;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .3s ease;
  opacity: 0;
}
.hp-hero-slider-frame:hover .hp-hero-slider-arrow { opacity: 1; }
.hp-hero-slider-arrow--prev { left: .5rem; }
.hp-hero-slider-arrow--next { right: .5rem; }
.hp-hero-slider-arrow:hover {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: #1a1d21;
  transform: translateY(-50%) scale(1.1);
}

.hp-hero-slider-dots {
  position: absolute;
  bottom: .8rem; left: 0; right: 0;
  display: flex; gap: .45rem; justify-content: center;
  z-index: 5;
}
.hp-hero-slider-dots button {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .35s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.hp-hero-slider-dots button.is-active {
  background: #fff;
  width: 1.7rem;
  border-radius: 3px;
}
.hp-hero-slider-badge {
  position: absolute;
  top: .9rem; right: .9rem;
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  background: rgba(220,38,38,.95);
  color: #fff;
  font-size: .85rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-full);
  z-index: 5;
  box-shadow: 0 4px 12px rgba(220,38,38,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hp-hero-slider-badge i { font-size: .55rem; animation: hpBadgeBlink 1.4s ease-in-out infinite; }
@keyframes hpBadgeBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Mobile ... beautiful corner placement, no overlap with hero text */
@media(max-width: 767px){
  .hp-hero-slider {
    top: auto;
    bottom: 1rem;
    left: 0;
    right: auto;
    transform: none;
    width: 130px;
    perspective: 1000px;
    z-index: 5;
  }
  .hp-hero-slider-frame {
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    transform: rotateY(-10deg) rotateX(5deg);
    animation: hpHeroFloatMobile 5s ease-in-out infinite;
    box-shadow:
      0 18px 40px rgba(0,0,0,.55),
      0 6px 14px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.45);
  }
  @keyframes hpHeroFloatMobile {
    0%,100% { transform: rotateY(-10deg) rotateX(5deg) translateY(0); }
    50%     { transform: rotateY(-8deg) rotateX(3deg) translateY(-6px); }
  }
  .hp-hero-slider-arrow { opacity: 1; width: 2.2rem; height: 2.2rem; font-size: .95rem; }
  .hp-hero-slider-deco--3, .hp-hero-slider-deco--4 { display: none; }
  .hp-hero-slider-tag { font-size: 0.8rem; padding: .2rem .55rem; }
  .hp-hero-slider-badge { font-size: 0.8rem; padding: .2rem .55rem; top: .5rem; right: .5rem; }
  .hp-hero-slider-dots { bottom: .5rem; gap: .35rem; }
  .hp-hero-slider-dots button { width: .45rem; height: .45rem; }
  .hp-hero-slider-dots button.is-active { width: 1.3rem; }
}
@media(max-width: 480px){
  .hp-hero-slider { width: 110px; bottom: .8rem; }
  .hp-hero-slider-frame { border-radius: 16px; }
}
@media(max-width: 380px){
  .hp-hero-slider { width: 96px; }
  .hp-hero-slider-deco--1, .hp-hero-slider-deco--2 { display: none; }
}

/* Tablet ... keep at bottom-left, slightly bigger */
@media (min-width: 768px) and (max-width: 991px) {
  .hp-hero-slider {
    width: 180px;
    bottom: 1.5rem;
    left: 0;
  }
  .hp-hero-slider-frame {
    aspect-ratio: 3 / 4;
    transform: rotateY(-12deg) rotateX(5deg);
  }
  @keyframes hpHeroFloat {
    0%,100% { transform: rotateY(-12deg) rotateX(5deg) translateY(0); }
    50%     { transform: rotateY(-10deg) rotateX(3deg) translateY(-8px); }
  }
}

/* ...
   Global hero typography & utility
   ... */
.hp-section { position: relative; padding: 9rem 0; overflow: hidden; }
.hp-section--tight { padding: 6rem 0; }
.hp-section--dark { background: var(--bg-dark); color: var(--white); }
.hp-section--alt  { background: var(--cream); }
.hp-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .55rem 1.4rem;
  background: rgba(var(--primary-rgb),.10);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--r-full);
  border: 1px solid rgba(var(--primary-rgb),.18);
  margin-bottom: 1.4rem;
}
.hp-section--dark .hp-eyebrow {
  background: rgba(255,255,255,.10);
  color: #fff; border-color: rgba(255,255,255,.18);
}
.hp-eyebrow i { font-size: 1rem; }
.hp-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 1.4rem;
  color: var(--text);
}
.hp-section--dark .hp-section-title { color: var(--white); }
.hp-section-title .accent {
  background: var(--primary-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hp-section--dark .hp-section-title .accent {
  background: var(--green-300);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hp-section-sub {
  font-size: 1.6rem; color: var(--brand-navy);
  line-height: 1.7; max-width: 68rem; margin: 0 auto 3rem;
  opacity: .88;
}
.hp-section--dark .hp-section-sub { color: rgba(255,255,255,.78); }
.hp-section-head { text-align: center; margin-bottom: 5rem; position: relative; z-index: 1; }
.hp-section-head.left { text-align: left; }
.hp-section-head.left .hp-section-sub { margin: 0 0 3rem; }

/* ...
   HERO (replaces Revolution Slider)
   3D parallax, animated gradient, floating cards
   ... */
.hp-hero {
  position: relative;
  min-height: auto;
  padding: 12rem 0 6rem;
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    var(--primary-deeper);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hp-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    rgba(255,255,255,.045),
    rgba(255,255,255,.045);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  pointer-events: none;
}
.hp-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 80px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 100%, 100% 35%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
.hp-hero-deco {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: -1;
  filter: blur(2px);
}
.hp-hero-deco--1 {
  top: 8%; left: 6%;
  width: 22rem; height: 22rem;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  animation: hpFloat1 14s ease-in-out infinite;
}
.hp-hero-deco--2 {
  bottom: 14%; right: 8%;
  width: 26rem; height: 26rem;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  animation: hpFloat2 18s ease-in-out infinite;
}
.hp-hero-deco--3 {
  top: 40%; right: 22%;
  width: 8rem; height: 8rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  transform: rotate(45deg);
  animation: hpSpin 28s linear infinite;
}
.hp-hero-deco--4 {
  bottom: 24%; left: 30%;
  width: 5rem; height: 5rem;
  background: rgba(var(--accent-rgb),.30);
  border-radius: 10px;
  transform: rotate(-15deg);
  animation: hpFloat3 12s ease-in-out infinite;
}
@keyframes hpFloat1 { 0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)} }
@keyframes hpFloat2 { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-32px) scale(1.05)} }
@keyframes hpFloat3 { 0%,100%{transform:rotate(-15deg) translateY(0)}50%{transform:rotate(-15deg) translateY(-18px)} }
@keyframes hpSpin   { 0%{transform:rotate(45deg)}100%{transform:rotate(405deg)} }

.hp-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 3;
}

.hp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .6rem 1.4rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--r-full);
  margin-bottom: 2rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hp-hero-eyebrow .dot {
  width: .7rem; height: .7rem;
  background: var(--green-300);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(var(--green-300-rgb),.28);
  animation: hpPulse 2s ease-in-out infinite;
}
@keyframes hpPulse { 0%,100%{box-shadow:0 0 0 5px rgba(var(--green-300-rgb),.28)}50%{box-shadow:0 0 0 10px rgba(var(--green-300-rgb),0)} }

.hp-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(3.6rem, 6.2vw, 6.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 2rem;
  text-shadow: 0 6px 36px rgba(0,0,0,.25);
}
.hp-hero h1 .accent {
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative; display: inline-block;
}
.hp-hero h1 .accent::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 5px;
  background: var(--gold);
  border-radius: 4px;
  animation: hpUnderline 1.2s ease-out forwards;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes hpUnderline { to { transform: scaleX(1); } }

.hp-hero-tag {
  font-size: clamp(1.6rem, 1.8vw, 2rem);
  color: rgba(255,255,255,.85);
  line-height: 1.65;
  max-width: 56rem;
  margin: 0 0 3.2rem;
  font-weight: 500;
}

.hp-hero-cta {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-bottom: 3.5rem;
}
.hp-btn {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.5rem 2.6rem;
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 700;
  border-radius: var(--r-full);
  border: none; cursor: pointer;
  text-decoration: none;
  transition: all var(--t-base);
  position: relative; overflow: hidden;
  letter-spacing: .01em;
}
.hp-btn i { font-size: 1.4rem; transition: transform var(--t-base); }
.hp-btn--gold {
  background: var(--gold-bright);
  color: #1a1d21;
  box-shadow: 0 14px 36px rgba(var(--gold-rgb),.40), inset 0 1px 0 rgba(255,255,255,.55);
}
.hp-btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(var(--gold-rgb),.55), inset 0 1px 0 rgba(255,255,255,.55);
  color: #1a1d21;
}
.hp-btn--gold:hover i { transform: translateX(4px); }
.hp-btn--ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hp-btn--ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.55);
  color: #fff;
  transform: translateY(-3px);
}
.hp-btn--ghost:hover i { transform: translateX(4px); }

/* Floating trust strip */
.hp-hero-trust {
  display: flex; flex-wrap: wrap; gap: 2.6rem;
  align-items: center;
  padding: 2.6rem 0 0 18rem; /* leave room for the floating bottom-left slider on desktop */
  border-top: 1px solid rgba(255,255,255,.14);
  position: relative;
  z-index: 4;
}
.hp-trust-item { display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.85); font-size: 1.4rem; }
.hp-trust-item i { font-size: 1.6rem; color: var(--green-300); }
.hp-trust-item strong { display: block; color: #fff; font-size: 1.8rem; font-weight: 800; font-family: var(--font-heading); }

/* Hero 3D stage (right column) */
.hp-hero-3d {
  position: relative;
  perspective: 1800px;
  transform-style: preserve-3d;
  min-height: 540px;
  display: flex; align-items: center; justify-content: center;
}
.hp-hero-card {
  position: absolute;
  border-radius: 24px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
  overflow: hidden;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.hp-hero-card--main {
  width: 320px; aspect-ratio: 204 / 323;
  z-index: 5;
  transform: rotateY(-12deg) rotateX(6deg) translateZ(40px);
  background: #fff;
  animation: hpHeroMain 6s ease-in-out infinite;
}
@keyframes hpHeroMain { 0%,100%{transform:rotateY(-12deg) rotateX(6deg) translateZ(40px)}50%{transform:rotateY(-10deg) rotateX(4deg) translateZ(60px)} }
.hp-hero-card--back1 {
  width: 280px; aspect-ratio: 204 / 323;
  top: 8%; right: -4%;
  background: var(--green-700);
  z-index: 2;
  transform: rotateY(8deg) rotateX(-4deg) rotateZ(6deg) translateZ(-30px);
  animation: hpHeroBack1 8s ease-in-out infinite;
}
@keyframes hpHeroBack1 { 0%,100%{transform:rotateY(8deg) rotateX(-4deg) rotateZ(6deg) translateZ(-30px)}50%{transform:rotateY(10deg) rotateX(-2deg) rotateZ(8deg) translateZ(-20px)} }
.hp-hero-card--back2 {
  width: 240px; aspect-ratio: 204 / 323;
  bottom: 4%; left: 0;
  background: #1a1d21;
  z-index: 1;
  transform: rotateY(-6deg) rotateX(4deg) rotateZ(-8deg) translateZ(-60px);
  animation: hpHeroBack2 10s ease-in-out infinite;
}
@keyframes hpHeroBack2 { 0%,100%{transform:rotateY(-6deg) rotateX(4deg) rotateZ(-8deg) translateZ(-60px)}50%{transform:rotateY(-8deg) rotateX(6deg) rotateZ(-6deg) translateZ(-50px)} }

.hp-hero-card-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: 1.6rem;
  color: #fff;
}
.hp-hero-card--main .hp-hero-card-inner { color: #1a1d21; }
.hp-hero-card-bar { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.18); margin-bottom: 1.2rem; }
.hp-hero-card--main .hp-hero-card-bar { border-bottom-color: rgba(0,0,0,.08); }
.hp-hero-card-bar .logo-dot { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.hp-hero-card-bar .logo-text { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; }
.hp-hero-card-photo {
  width: 8.4rem; height: 8.4rem;
  border-radius: 50%;
  background: var(--gold);
  margin: 1.2rem auto 1rem;
  border: 3px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 800; color: #fff;
}
.hp-hero-card--main .hp-hero-card-photo { border-color: #fff; }
.hp-hero-card-name { text-align: center; font-size: 1.4rem; font-weight: 800; }
.hp-hero-card-meta { text-align: center; font-size: 1.1rem; opacity: .8; margin-top: .3rem; }
.hp-hero-card-row { display: flex; justify-content: space-between; font-size: 1.1rem; margin-top: .8rem; }
.hp-hero-card-row strong { font-weight: 800; }
.hp-hero-card--main .hp-hero-card-row { color: #303438; }
.hp-hero-card--back1 .hp-hero-card-inner { padding: 1.2rem; }
.hp-hero-card--back1 .hp-hero-card-bar .logo-dot { background: var(--green-300); }
.hp-hero-card--back2 .hp-hero-card-bar .logo-dot { background: var(--white); border: 1px solid var(--border); }

/* Floating notification card */
.hp-hero-floater {
  position: absolute;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  display: flex; align-items: center; gap: 1.2rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  z-index: 6;
  color: #1a1d21;
  font-size: 1.3rem;
  font-weight: 600;
  animation: hpFloater 5s ease-in-out infinite;
}
.hp-hero-floater i { font-size: 1.8rem; }
.hp-hero-floater--1 { top: 14%; left: -2%; animation-delay: 0s; }
.hp-hero-floater--1 i { color: var(--primary-light); }
.hp-hero-floater--2 { bottom: 18%; right: -4%; animation-delay: 1.5s; }
.hp-hero-floater--2 i { color: var(--amber-bright); }
@keyframes hpFloater { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }

.hp-hero-floater small { display: block; font-size: 1.1rem; font-weight: 600; color: var(--primary-light); margin-top: .2rem; }

/* =====================================================
   SCHOOL LEVELS (Nursery / Primary / Secondary)
   ===================================================== */
.hp-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
.hp-levels--count-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.hp-levels--count-2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
@media(max-width: 767px){
  .hp-levels, .hp-levels--count-1, .hp-levels--count-2 { grid-template-columns: 1fr; }
}
.hp-level {
  position: relative;
  background: #fff;
  border-radius: var(--r-2xl);
  padding: 3.6rem 2.6rem 3rem;
  text-align: center;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  overflow: hidden;
  isolation: isolate;
}
.hp-level::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--level-grad, var(--primary));
  opacity: 0; transition: opacity .5s;
}
.hp-level:hover {
  transform: translateY(-12px);
  border-color: transparent;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
  color: #fff;
}
.hp-level:hover::before { opacity: 1; }
.hp-level:hover .hp-level-num,
.hp-level:hover .hp-level-name,
.hp-level:hover .hp-level-desc,
.hp-level:hover .hp-level-meta { color: #fff; }
.hp-level:hover .hp-level-icon { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.hp-level:hover .hp-level-icon i { color: #fff; }
.hp-level:hover .hp-level-cta { color: #fff; border-color: rgba(255,255,255,.45); }
.hp-level:hover .hp-level-cta i { transform: translateX(4px); }

.hp-level-icon {
  width: 7.6rem; height: 7.6rem;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.8rem;
  background: var(--level-soft, var(--green-50));
  border: 1px solid var(--level-border, var(--green-200));
  transition: all .5s;
}
.hp-level-icon i { font-size: 3rem; color: var(--level-color, var(--primary)); transition: all .5s; }
.hp-level[data-level="nursery"]  { --level-color:var(--amber-bright); --level-soft:var(--amber-soft); --level-border:var(--amber-line); --level-grad:var(--amber-bright); }
.hp-level[data-level="primary"]  { --level-color:var(--primary-light); --level-soft:var(--green-50); --level-border:var(--green-200); --level-grad:var(--primary-light); }
.hp-level[data-level="secondary"]{ --level-color:var(--brand-navy); --level-soft:var(--navy-soft); --level-border:var(--navy-border); --level-grad:var(--brand-navy); }

.hp-level-num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 800;
  letter-spacing: .18em;
  color: var(--level-color, var(--primary));
  margin-bottom: .8rem;
  transition: color .5s;
}
.hp-level-name {
  font-family: var(--font-heading);
  font-size: 2.4rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem;
  transition: color .5s;
}
.hp-level-desc {
  font-size: 1.45rem;
  color: var(--brand-navy);
  line-height: 1.65;
  margin: 0 0 2rem;
  transition: color .5s;
  opacity: .88;
}
.hp-level-meta {
  display: flex; justify-content: center; gap: 1.6rem;
  padding: 1.4rem 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 600;
  transition: all .5s;
}
.hp-level-meta span { display: flex; align-items: center; gap: .5rem; }
.hp-level-meta i { color: var(--level-color, var(--primary)); transition: color .5s; }
.hp-level:hover .hp-level-meta { border-color: rgba(255,255,255,.25); }

.hp-level-cta {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1rem 1.8rem;
  border: 1.5px solid var(--level-color, var(--primary));
  border-radius: var(--r-full);
  color: var(--level-color, var(--primary));
  font-weight: 700; font-size: 1.3rem;
  text-decoration: none;
  transition: all .5s;
}
.hp-level-cta i { transition: transform var(--t-base); }

/* =====================================================
   MISSION / VISION ... 3D Split Cards
   ===================================================== */
.hp-vm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  perspective: 1500px;
}
.hp-vm-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-2xl);
  padding: 4.2rem 3.4rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.06);
  border: 1px solid var(--border-light);
  transition: transform .6s cubic-bezier(.4,0,.2,1), box-shadow .6s;
  transform-style: preserve-3d;
  overflow: hidden;
  isolation: isolate;
}
.hp-vm-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 60%; height: 200%;
  background: var(--vm-grad, var(--green-100));
  border-radius: 50%;
  opacity: .45;
  z-index: -1;
  transition: transform .6s;
}
.hp-vm-card:hover {
  transform: rotateY(-4deg) rotateX(2deg) translateY(-8px);
  box-shadow: 0 30px 70px rgba(0,0,0,.12);
}
.hp-vm-card:hover::before { transform: scale(1.15); }
.hp-vm-card--vision { --vm-grad: var(--green-200); }
.hp-vm-card--mission { --vm-grad: var(--amber-line); }

.hp-vm-icon {
  width: 6.8rem; height: 6.8rem;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  margin-bottom: 2.2rem;
  position: relative;
  z-index: 1;
}
.hp-vm-icon i { font-size: 2.8rem; color: var(--primary); }
.hp-vm-card--mission .hp-vm-icon i { color: var(--amber-600); }

.hp-vm-title {
  font-family: var(--font-heading);
  font-size: 2.6rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1.4rem;
  position: relative; z-index: 1;
}
.hp-vm-text {
  font-size: 1.55rem;
  color: var(--brand-navy);
  line-height: 1.75;
  margin: 0 0 2rem;
  position: relative; z-index: 1;
  opacity: .88;
}
.hp-vm-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.hp-vm-list li {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 1.45rem;
  color: var(--brand-navy);
  line-height: 1.6;
  opacity: .9;
}
.hp-vm-list li:last-child { border-bottom: none; }
.hp-vm-list li i {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
  margin-top: .2rem;
}
.hp-vm-card--mission .hp-vm-list li i { background: var(--amber-100); color: var(--amber-700); }

/* =====================================================
   MISSION CAROUSEL ... Modern Card Slider
   ===================================================== */
.hp-mission-stage {
  position: relative;
  overflow: hidden;
  padding: 0 0 2rem;
}
.hp-mission-track {
  display: flex;
  gap: 2.4rem;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hp-mission-card {
  flex: 0 0 calc((100% - 4.8rem) / 3);
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  border: 1px solid var(--border-light);
  transition: all .4s;
}
.hp-mission-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  border-color: transparent;
}
.hp-mission-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hp-mission-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.hp-mission-card:hover .hp-mission-card-img img { transform: scale(1.08); }
.hp-mission-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
}
.hp-mission-card-tag {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  background: rgba(255,255,255,.95);
  color: var(--primary);
  padding: .4rem 1rem;
  border-radius: var(--r-full);
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: 1;
}
.hp-mission-card-body { padding: 2rem 2rem 2.2rem; }
.hp-mission-card-text {
  font-size: 1.45rem;
  color: var(--brand-navy);
  line-height: 1.65;
  margin: 0;
  opacity: .88;
}
.hp-mission-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  margin-top: 3rem;
}
.hp-mission-arrow {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t-base);
}
.hp-mission-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.08); }
.hp-mission-dots { display: flex; gap: .8rem; }
.hp-mission-dots button {
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--border);
  border: none; cursor: pointer;
  padding: 0;
  transition: all var(--t-base);
}
.hp-mission-dots button.is-active { background: var(--primary); width: 2.6rem; border-radius: 5px; }

/* =====================================================
   COUNTERS / STATS ... Glassmorphic on dark bg
   ===================================================== */
.hp-stats {
  position: relative;
  padding: 8rem 0;
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    var(--primary-deeper);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hp-stats::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    rgba(255,255,255,.04),
    rgba(255,255,255,.04);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  pointer-events: none;
}
.hp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
.hp-stat {
  position: relative;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-xl);
  padding: 3.4rem 2.6rem;
  text-align: center;
  transition: all var(--t-base);
  overflow: hidden;
  isolation: isolate;
}
.hp-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stat-color, var(--green-300));
  z-index: 1;
}
.hp-stat:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.35); }
.hp-stat-icon {
  width: 6.4rem; height: 6.4rem;
  border-radius: 20px;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.8rem;
  border: 1px solid rgba(255,255,255,.18);
  transition: all var(--t-base);
}
.hp-stat-icon i { font-size: 2.6rem; color: var(--stat-color, var(--green-300)); }
.hp-stat:hover .hp-stat-icon { transform: scale(1.08) rotate(-6deg); }
.hp-stat-num {
  font-family: var(--font-heading);
  font-size: 4.8rem; font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: .6rem;
  letter-spacing: -.02em;
}
.hp-stat-num .suffix { color: var(--stat-color, var(--green-300)); }
.hp-stat-label {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}
.hp-stat-desc {
  font-size: 1.3rem;
  color: var(--white);
  line-height: 1.6;
  margin: 0;
  opacity: .92;
}

/* =====================================================
   PORTAL FEATURES SHOWCASE ... Bento Grid
   ===================================================== */
.hp-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 1.8rem;
}
.hp-feature {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2.4rem;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
}
.hp-feature::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--feat-grad, var(--primary-mist));
  opacity: 0; transition: opacity .5s;
}
.hp-feature::after {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: var(--feat-color, var(--primary));
  top: -60px; right: -60px;
  opacity: .12;
  z-index: -1;
  transition: transform .5s;
}
.hp-feature:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
  color: var(--white);
}
.hp-feature:hover::before { opacity: 1; }
.hp-feature:hover::after { transform: scale(2.2); }
.hp-feature:hover .hp-feature-title,
.hp-feature:hover .hp-feature-desc,
.hp-feature:hover .hp-feature-link { color: var(--white); }
.hp-feature:hover .hp-feature-icon { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }
.hp-feature:hover .hp-feature-icon i { color: #fff; }

.hp-feature--tall { grid-row: span 2; }
.hp-feature--wide { grid-column: span 2; }

.hp-feature-icon {
  width: 5.2rem; height: 5.2rem;
  border-radius: 16px;
  background: var(--feat-soft, var(--green-50));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.6rem;
  border: 1px solid var(--feat-border, var(--green-200));
  transition: all .5s;
}
.hp-feature-icon i { font-size: 2.2rem; color: var(--feat-color, var(--primary)); transition: all .5s; }
.hp-feature-title {
  font-family: var(--font-heading);
  font-size: 1.9rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 .8rem;
  transition: color .5s;
}
.hp-feature-desc {
  font-size: 1.35rem;
  color: var(--brand-navy);
  line-height: 1.6;
  margin: 0 0 1.2rem;
  transition: color .5s;
  flex: 1;
  opacity: .88;
}
.hp-feature-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.2rem; font-weight: 700;
  color: var(--feat-color, var(--primary));
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: all .5s;
}
.hp-feature-link i { transition: transform var(--t-base); }
.hp-feature:hover .hp-feature-link i { transform: translateX(4px); }

.hp-feature--1 { --feat-color:var(--primary-light); --feat-soft:var(--green-50); --feat-border:var(--green-200); --feat-grad:var(--primary); }
.hp-feature--2 { --feat-color:var(--brand-navy); --feat-soft:var(--navy-soft); --feat-border:var(--navy-border); --feat-grad:var(--brand-navy); }
.hp-feature--3 { --feat-color:var(--amber-bright); --feat-soft:var(--amber-soft); --feat-border:var(--amber-line); --feat-grad:var(--accent-dark); }
.hp-feature--4 { --feat-color:#7c3aed; --feat-soft:#faf5ff; --feat-border:#e9d5ff; --feat-grad:#5b21b6; }
.hp-feature--5 { --feat-color:#db2777; --feat-soft:#fdf2f8; --feat-border:#fbcfe8; --feat-grad:#9d174d; }
.hp-feature--6 { --feat-color:#0891b2; --feat-soft:#ecfeff; --feat-border:#a5f3fc; --feat-grad:#0e7490; }
.hp-feature--7 { --feat-color:#dc2626; --feat-soft:#fef2f2; --feat-border:#fecaca; --feat-grad:#991b1b; }
.hp-feature--8 { --feat-color:#0f766e; --feat-soft:#f0fdfa; --feat-border:#99f6e4; --feat-grad:#134e4a; }

.hp-feature-visual {
  position: relative;
  height: 70px;
  margin-top: auto;
  display: flex; align-items: flex-end; gap: .4rem;
}
.hp-feature-bar {
  flex: 1;
  background: var(--feat-color, var(--primary));
  border-radius: 4px 4px 0 0;
  opacity: .65;
  transition: all .5s;
}
.hp-feature:hover .hp-feature-bar { background: rgba(255,255,255,.6); opacity: 1; }

/* =====================================================
   CORE VALUES ... Hexagonal grid
   ===================================================== */
.hp-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.hp-value {
  position: relative;
  text-align: center;
  padding: 2.4rem 1.6rem;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--t-base);
  overflow: hidden;
}
.hp-value:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.hp-value-num {
  position: absolute;
  top: 1.2rem; right: 1.4rem;
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 800;
  color: rgba(255,255,255,.4);
  letter-spacing: .12em;
}
.hp-value-hex {
  width: 7rem; height: 7rem;
  margin: 0 auto 1.6rem;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--val-color, var(--primary));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
  transition: transform var(--t-base);
}
.hp-value:hover .hp-value-hex { transform: rotate(8deg) scale(1.05); }
.hp-value-hex i { font-size: 2.4rem; color: #fff; position: relative; z-index: 1; }
.hp-value-name {
  font-family: var(--font-heading);
  font-size: 1.7rem; font-weight: 800;
  color: #fff;
  margin: 0 0 .6rem;
}
.hp-value-desc {
  font-size: 1.2rem;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
  margin: 0;
}
.hp-value[data-val="1"] { --val-color:var(--green-300); --val-color2:var(--primary-light); }
.hp-value[data-val="2"] { --val-color:var(--amber-bright); --val-color2:var(--accent-dark); }
.hp-value[data-val="3"] { --val-color:#60a5fa; --val-color2:#1e40af; }
.hp-value[data-val="4"] { --val-color:#c084fc; --val-color2:#6d28d9; }
.hp-value[data-val="5"] { --val-color:#f87171; --val-color2:#b91c1c; }
.hp-value[data-val="6"] { --val-color:#34d399; --val-color2:#065f46; }

/* =====================================================
   VIDEO + CORE VALUES section
   ===================================================== */
.hp-vv {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hp-vv-video {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  aspect-ratio: 16 / 10;
  cursor: pointer;
  border: 3px solid rgba(255,255,255,.15);
  transition: all var(--t-base);
}
.hp-vv-video:hover { transform: scale(1.02); border-color: rgba(255,255,255,.35); }
.hp-vv-video img { width: 100%; height: 100%; object-fit: cover; }
.hp-vv-video::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1;
}
.hp-vv-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all var(--t-base);
}
.hp-vv-play::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  animation: hpPulseRing 2s ease-out infinite;
}
@keyframes hpPulseRing { 0%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0} }
.hp-vv-play i {
  font-size: 2.4rem;
  color: #fff;
  margin-left: .4rem;
}
.hp-vv-video:hover .hp-vv-play { transform: translate(-50%,-50%) scale(1.1); background: var(--amber-500); border-color: #fff; }
.hp-vv-video-badge {
  position: absolute;
  bottom: 1.6rem; left: 1.6rem;
  z-index: 2;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  padding: .8rem 1.4rem;
  color: #fff;
  font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(255,255,255,.2);
}

.hp-vv-text .hp-eyebrow { color: var(--gold-bright); background: rgba(var(--gold-rgb),.13); border-color: rgba(var(--gold-rgb),.28); }

/* ... Variable-color text on the dark hp-stats background
     Uses the same header/footer variable palette:
       --primary-mist / --gold-bright / --gold-soft / --gold-rgb
     so a single Theme & Brand Colours save recolours this block
     together with .topbar and .ed_footer_top ... */
.hp-stats .hp-eyebrow {
  color: var(--gold-bright); background: rgba(var(--gold-rgb),.13); border-color: rgba(var(--gold-rgb),.28);
}
.hp-stats .hp-section-title { color: var(--white); }
.hp-stats .hp-section-title .accent {
  background: var(--gold-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hp-stats .hp-section-sub { color: var(--white); }
.hp-stats .hp-section-sub strong,
.hp-stats .hp-section-sub .hp-highlight { color: var(--gold-bright); font-weight: 700; }
.hp-vv-text .hp-btn--ghost {
  border-color: rgba(var(--gold-rgb),.38);
  color: var(--gold-bright);
  background: rgba(var(--gold-rgb),.08);
}
.hp-vv-text .hp-btn--ghost:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--primary-deeper);
}

/* =====================================================
   WHY CHOOSE US ... Modern 3D card grid
   ===================================================== */
.hp-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.hp-why-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 3rem 2.4rem;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transition: all .5s cubic-bezier(.4,0,.2,1);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hp-why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 4px;
  background: var(--why-color, var(--primary));
  transition: all .5s;
  transform: translateX(-50%);
}
.hp-why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0,0,0,.12);
  border-color: transparent;
}
.hp-why-card:hover::before { width: 100%; }
.hp-why-icon {
  width: 6.4rem; height: 6.4rem;
  margin: 0 auto 1.8rem;
  border-radius: 50%;
  background: var(--why-soft, var(--green-50));
  display: flex; align-items: center; justify-content: center;
  transition: all .5s;
  position: relative;
}
.hp-why-icon::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px dashed var(--why-color, var(--primary));
  opacity: 0;
  transition: all .5s;
}
.hp-why-card:hover .hp-why-icon::before { opacity: 1; transform: rotate(45deg); }
.hp-why-icon i { font-size: 2.4rem; color: var(--why-color, var(--primary)); }
.hp-why-card:hover .hp-why-icon { transform: scale(1.08); }
.hp-why-title {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem;
}
.hp-why-desc {
  font-size: 1.35rem;
  color: var(--brand-navy);
  line-height: 1.6;
  margin: 0;
  opacity: .88;
}
.hp-why-1 { --why-color:var(--primary-light); --why-soft:var(--green-50); }
.hp-why-2 { --why-color:var(--amber-bright); --why-soft:var(--amber-soft); }
.hp-why-3 { --why-color:var(--brand-navy); --why-soft:var(--navy-soft); }
.hp-why-4 { --why-color:#7c3aed; --why-soft:#faf5ff; }

/* =====================================================
   TESTIMONIALS ... Card Carousel
   ===================================================== */
.hp-testimonials {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.hp-testimonial {
  background: #fff;
  border-radius: var(--r-2xl);
  padding: 4rem 4rem 3rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  border: 1px solid var(--border-light);
  text-align: center;
  position: relative;
}
.hp-testimonial::before {
  content: '\201C';
  position: absolute;
  top: 1rem; left: 2.4rem;
  font-family: var(--font-serif);
  font-size: 12rem;
  line-height: 1;
  color: var(--green-200);
  opacity: .5;
}
.hp-testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 2.4rem;
  font-style: italic;
  position: relative; z-index: 1;
}
.hp-testimonial-author {
  display: flex; align-items: center; gap: 1.4rem; justify-content: center;
}
.hp-testimonial-avatar {
  width: 5.6rem; height: 5.6rem;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 2rem; font-weight: 800;
  flex-shrink: 0;
}
.hp-testimonial-meta { text-align: left; }
.hp-testimonial-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--text); margin: 0; }
.hp-testimonial-role { font-size: 1.2rem; color: var(--primary); font-weight: 600; margin: .2rem 0 0; }
.hp-testimonial-stars { color: var(--amber-500); font-size: 1.3rem; margin-top: .4rem; }

/* =====================================================
   NEWS / EVENTS ... Horizontal cards
   ===================================================== */
.hp-news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.hp-news-card {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transition: all var(--t-base);
  display: flex; flex-direction: column;
}
.hp-news-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.10); }
.hp-news-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--green-100);
}
.hp-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.hp-news-card:hover .hp-news-img img { transform: scale(1.08); }
.hp-news-date {
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: #fff; color: var(--text);
  border-radius: var(--r-md);
  padding: .6rem 1rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.hp-news-date strong { display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--primary); }
.hp-news-date span { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); font-weight: 700; }
.hp-news-body { padding: 2.2rem; flex: 1; display: flex; flex-direction: column; }
.hp-news-tag {
  display: inline-block;
  font-size: 1.1rem; font-weight: 800;
  color: var(--primary);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.hp-news-title {
  font-family: var(--font-heading);
  font-size: 1.7rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem;
  line-height: 1.35;
}
.hp-news-excerpt {
  font-size: 1.35rem;
  color: var(--brand-navy);
  line-height: 1.6;
  margin: 0 0 1.4rem;
  flex: 1;
  opacity: .88;
}
.hp-news-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 1.3rem; font-weight: 700;
  color: var(--primary);
}
.hp-news-link i { transition: transform var(--t-base); }
.hp-news-card:hover .hp-news-link i { transform: translateX(4px); }

/* =====================================================
   HOMEPAGE 3D DEPTH + RESPONSIVE TIGHTENING
   (migrated from css/homepage-redesign-v2.css so every
   template shares one stylesheet)
   ===================================================== */
:root{
  --hp-persp: 1600px;
  --hp-tilt: 9deg;
  --hp-lift: -10px;
  --hp-ease: cubic-bezier(.2,.8,.2,1);
  --hp-shadow-rest: 0 6px 18px rgba(var(--primary-deeper-rgb,4,31,18),.08), 0 1px 3px rgba(var(--primary-deeper-rgb,4,31,18),.06);
  --hp-shadow-hover: 0 34px 60px -18px rgba(var(--primary-deeper-rgb,4,31,18),.35), 0 10px 24px -6px rgba(var(--primary-deeper-rgb,4,31,18),.18);
  --hp-gold-line: var(--gold);
}
.hp-levels{ perspective: var(--hp-persp); }
.hp-level{
  transform-style: preserve-3d;
  box-shadow: var(--hp-shadow-rest);
  transition: transform .55s var(--hp-ease), box-shadow .55s var(--hp-ease), background .55s;
}
.hp-level::after{
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background: var(--hp-gold-line);
  opacity:0; transition: opacity .5s;
}
.hp-level:hover{
  transform: translateY(var(--hp-lift)) rotateX(4deg) rotateY(-2deg) scale(1.015);
  box-shadow: var(--hp-shadow-hover);
}
.hp-level:hover::after{ opacity:1; }
.hp-level-icon{ transition: transform .55s var(--hp-ease); }
.hp-level:hover .hp-level-icon{ transform: translateZ(24px) rotateY(8deg); }

.hp-vm{ perspective: var(--hp-persp); }
.hp-vm-card{
  box-shadow: var(--hp-shadow-rest);
  transition: transform .6s var(--hp-ease), box-shadow .6s var(--hp-ease);
}
.hp-vm-card--vision:hover{ transform: perspective(1400px) rotateY(4deg) rotateX(2deg) translateY(-8px); box-shadow: var(--hp-shadow-hover); }
.hp-vm-card--mission:hover{ transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-8px); box-shadow: var(--hp-shadow-hover); }
.hp-vm-icon{ transition: transform .5s var(--hp-ease); }
.hp-vm-card:hover .hp-vm-icon{ transform: translateZ(20px) scale(1.08) rotate(-4deg); }

.hp-mission-card{
  transform-style: preserve-3d;
  box-shadow: var(--hp-shadow-rest);
  transition: transform .5s var(--hp-ease), box-shadow .5s var(--hp-ease);
}
.hp-mission-card:hover{
  transform: translateY(-10px) rotateX(3deg);
  box-shadow: var(--hp-shadow-hover);
}

.hp-values{ perspective: var(--hp-persp); }
.hp-value{ transition: transform .55s var(--hp-ease), background .4s, border-color .4s; }
.hp-value:hover{ transform: translateY(-8px) rotateX(6deg); }
.hp-value-hex{ transition: transform .55s var(--hp-ease), box-shadow .4s; }
.hp-value:hover .hp-value-hex{ transform: translateZ(18px) rotateY(10deg); box-shadow: 0 18px 34px rgba(0,0,0,.4); }

.hp-stats-grid{ perspective: var(--hp-persp); }
.hp-stat{ transition: transform .5s var(--hp-ease), border-color .4s, background .4s; }
.hp-stat:hover{ transform: translateY(-10px) rotateX(4deg); border-color: rgba(255,255,255,.4); }
.hp-stat-icon{ transition: transform .5s var(--hp-ease); }
.hp-stat:hover .hp-stat-icon{ transform: translateZ(16px) scale(1.1) rotate(-6deg); }

.hp-features{ perspective: var(--hp-persp); }
.hp-feature{ transform-style: preserve-3d; box-shadow: var(--hp-shadow-rest); }
.hp-feature:hover{ transform: translateY(-8px) rotateX(3deg) rotateY(-2deg); box-shadow: var(--hp-shadow-hover); }
.hp-feature-icon{ transition: transform .5s var(--hp-ease); }
.hp-feature:hover .hp-feature-icon{ transform: translateZ(22px) rotate(-6deg) scale(1.06); }

.hp-why{ perspective: var(--hp-persp); }
.hp-why-card{ transform-style: preserve-3d; box-shadow: var(--hp-shadow-rest); }
.hp-why-card:hover{ transform: translateY(-10px) rotateX(5deg); box-shadow: var(--hp-shadow-hover); }
.hp-why-icon{ transition: transform .55s var(--hp-ease); }
.hp-why-card:hover .hp-why-icon{ transform: translateZ(20px) rotate(6deg) scale(1.08); }

.hp-testimonial{ box-shadow: var(--hp-shadow-rest); transition: transform .5s var(--hp-ease), box-shadow .5s; }
.hp-testimonial:hover{ transform: translateY(-6px); box-shadow: var(--hp-shadow-hover); }

.hp-news{ perspective: var(--hp-persp); }
.hp-news-card{ transform-style: preserve-3d; box-shadow: var(--hp-shadow-rest); }
.hp-news-card:hover{ transform: translateY(-10px) rotateX(3deg); box-shadow: var(--hp-shadow-hover); }

.hp-showcase-grid{ perspective: var(--hp-persp); }
.hp-showcase-card{ transform-style: preserve-3d; box-shadow: var(--hp-shadow-rest); }
.hp-showcase-card:hover{ transform: translateY(-10px) rotateX(4deg) rotateY(2deg); box-shadow: var(--hp-shadow-hover); }
.hp-showcase-doc{ transition: transform .6s var(--hp-ease); }
.hp-showcase-card:hover .hp-showcase-doc{ transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.02); }
.hp-showcase-book{ transition: transform .6s var(--hp-ease); }

.hp-cta-form{ transition: transform .5s var(--hp-ease), box-shadow .5s; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.hp-cta-form:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,.35); }

/* Cursor-reactive 3D depth on the hero mock (paired with hero-3d-interactions.js).
   The JS sets --mx / --my (-1..1) on .hp-hero-mock on mousemove. */
.hp-hero-mock{
  --mx: 0; --my: 0;
  transform: rotateY(calc(var(--mx) * 6deg)) rotateX(calc(var(--my) * -6deg));
  transition: transform .35s var(--hp-ease);
  transform-style: preserve-3d;
}
.hp-mock-decor--1{ transform: translateZ(30px) rotate(7deg); }
.hp-mock-decor--2{ transform: translateZ(-20px) rotate(-12deg); }
.hp-mock-stage{ transform: translateZ(50px) rotate(-3deg); }

.hp-eye { color: var(--gold); }
.hp-section-head:not(.left)::after,
.hp-section-head.left .hp-eyebrow{ position: relative; }
.hp-level-num{ letter-spacing: .16em; }
.hp-level-meta{ align-items: center; }
@media (min-width: 992px){
  .hp-features{ grid-template-rows: 230px 230px; }
}

/* Honour reduced-motion for the 3D depth on every homepage card */
@media (prefers-reduced-motion: reduce){
  .hp-level, .hp-vm-card, .hp-mission-card, .hp-value, .hp-value-hex,
  .hp-stat, .hp-stat-icon, .hp-feature, .hp-feature-icon,
  .hp-why-card, .hp-why-icon, .hp-testimonial, .hp-news-card,
  .hp-showcase-card, .hp-showcase-doc, .hp-cta-form, .hp-hero-mock{
    transition: none !important;
    transform: none !important;
  }
}

/* =====================================================
   NEWSLETTER CTA ... Modern gradient block
   ===================================================== */
.hp-cta {
  position: relative;
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    var(--primary-deeper);
  color: #fff;
  padding: 8rem 0;
  overflow: hidden;
  isolation: isolate;
}
.hp-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    rgba(255,255,255,.04),
    rgba(255,255,255,.04);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
.hp-cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hp-cta-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 4.4vw, 4.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 1.4rem;
  letter-spacing: -.02em;
}
.hp-cta-text p {
  font-size: 1.6rem;
  color: var(--primary-mist);
  line-height: 1.65;
  margin: 0 0 2.2rem;
}
.hp-cta-stats {
  display: flex; gap: 2.6rem; flex-wrap: wrap;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(var(--gold-rgb), .18);
}
.hp-cta-stat strong { display: block; font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; color: var(--gold-bright); line-height: 1; }
.hp-cta-stat span { font-size: 1.2rem; color: var(--gold-soft); }
.hp-cta-form {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-2xl);
  padding: 3.6rem 3rem;
  position: relative;
}
.hp-cta-form h3 {
  font-family: var(--font-heading);
  font-size: 2rem; font-weight: 800;
  color: #fff;
  margin: 0 0 1.6rem;
}
.hp-cta-input {
  width: 100%;
  padding: 1.4rem 1.6rem;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  font-family: inherit;
  transition: all var(--t-base);
}
.hp-cta-input::placeholder { color: rgba(255,255,255,.55); }
.hp-cta-input:focus { outline: none; border-color: var(--amber-500); background: rgba(255,255,255,.18); }
.hp-cta-submit {
  width: 100%;
  padding: 1.4rem 2rem;
  background: var(--gold-bright);
  border: none;
  border-radius: var(--r-md);
  color: #1a1d21;
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  box-shadow: 0 10px 30px rgba(var(--gold-rgb),.4);
  transition: all var(--t-base);
}
.hp-cta-submit:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(var(--gold-rgb),.55); }
.hp-cta-foot { font-size: 1.1rem; color: rgba(255,255,255,.6); text-align: center; margin: 1.2rem 0 0; }

/* =====================================================
   ACADEMIC SHOWCASE ... Sample Result + Yearbook + Gallery
   ===================================================== */
.hp-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
.hp-showcase-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  transition: all .5s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.hp-showcase-card:hover { transform: translateY(-10px); box-shadow: 0 30px 70px rgba(0,0,0,.14); border-color: transparent; }
.hp-showcase-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--show-grad, var(--primary));
  opacity: 0; transition: opacity .5s;
}
.hp-showcase-card:hover::before { opacity: 1; }
.hp-showcase-card:hover .hp-showcase-title,
.hp-showcase-card:hover .hp-showcase-desc,
.hp-showcase-card:hover .hp-showcase-link { color: #fff; }
.hp-showcase-card:hover .hp-showcase-tag { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
.hp-showcase-card:hover .hp-showcase-link i { transform: translateX(4px); }
.hp-showcase-1 { --show-grad: var(--brand-navy); }
.hp-showcase-2 { --show-grad: var(--accent-dark); }
.hp-showcase-3 { --show-grad: var(--primary-light); }

.hp-showcase-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.hp-showcase-visual::after {
  content: '';
  position: absolute; inset: 0;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  pointer-events: none;
}

/* ... Document mock (Result sheet) ... */
.hp-showcase-doc {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
  overflow: hidden;
  transform: perspective(900px) rotateY(-6deg) rotateX(2deg);
  transition: transform .5s;
}
.hp-showcase-card:hover .hp-showcase-doc { transform: perspective(900px) rotateY(-2deg) rotateX(0); }
.hp-doc-band {
  display: flex; align-items: center; gap: 1rem;
  background: #143764;
  padding: 1rem 1.2rem;
  position: relative;
}
.hp-doc-band::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #b49128;
}
.hp-doc-logo {
  width: 3.2rem; height: 3.2rem;
  border-radius: 50%;
  background: #b49128;
  flex-shrink: 0;
}
.hp-doc-lines { flex: 1; }
.hp-doc-line {
  height: .8rem; border-radius: 4px;
  background: rgba(255,255,255,.6);
  margin-bottom: .4rem;
}
.hp-doc-stamp {
  width: 3rem; height: 3rem;
  border: 2px solid #b49128;
  border-radius: 50%;
  flex-shrink: 0;
}
.hp-doc-title-strip {
  height: 1.4rem;
  background: #f1f3f4;
  margin: 1rem;
  border-radius: 3px;
}
.hp-doc-info { padding: 0 1rem 1rem; }
.hp-doc-info-row { display: flex; gap: .8rem; margin-bottom: .4rem; }
.hp-doc-info-row .hp-doc-line { background: #e8eaed; height: .6rem; }
.hp-doc-badges { display: flex; gap: .6rem; padding: 0 1rem 1rem; }
.hp-doc-badge {
  flex: 1;
  padding: .6rem;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  font-family: var(--font-heading);
}
.hp-doc-badge--gold { background: #b49128; color: var(--brand-navy); }
.hp-doc-badge--navy { background: var(--brand-navy); }
.hp-doc-table { padding: 0 1rem; }
.hp-doc-row { display: flex; gap: 2px; margin-bottom: 2px; }
.hp-doc-cell { height: 1.4rem; border-radius: 2px; }
.hp-doc-cell--label { background: #d4d7dc; }
.hp-doc-cell--grade { background: #278250; }
.hp-doc-foot { padding: 1rem; }
.hp-doc-foot .hp-doc-line { height: .4rem; }

/* ... Book mock (Yearbook) ... */
.hp-showcase-visual--book {
  background: #1a1a1a;
  perspective: 1200px;
}
.hp-showcase-book {
  position: relative;
  width: 200px; height: 280px;
  transform: rotateY(-15deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform .6s;
}
.hp-showcase-card:hover .hp-showcase-book { transform: rotateY(-5deg) rotateX(0); }
.hp-book-spine {
  position: absolute; left: -10px; top: 0;
  width: 10px; height: 100%;
  background: #4a3000;
  transform: rotateY(-90deg);
  transform-origin: right center;
  border-radius: 2px 0 0 2px;
}
.hp-book-cover {
  position: relative;
  width: 100%; height: 100%;
  background: var(--gold-deep);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #2a1a00, 0 16px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  text-align: center;
  padding: 1.4rem;
  overflow: hidden;
}
.hp-book-rings {
  position: absolute; left: 8px; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  padding: 1rem 0;
}
.hp-book-rings span {
  width: 1.2rem; height: 1.2rem;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.hp-book-year {
  font-family: var(--font-heading);
  font-size: 3.4rem; font-weight: 800;
  background: #fff8dc;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: .4rem;
}
.hp-book-title {
  font-family: var(--font-heading);
  font-size: 1.6rem; font-weight: 800;
  letter-spacing: .15em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  margin-bottom: .4rem;
}
.hp-book-sub {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: rgba(255,255,255,.85);
  font-style: italic;
}
.hp-book-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.hp-book-deco--1 { top: -20px; right: -20px; width: 60px; height: 60px; background: rgba(255,255,255,.15); }
.hp-book-deco--2 { bottom: -10px; left: -10px; width: 40px; height: 40px; background: rgba(255,255,255,.10); }
.hp-book-deco--3 { top: 30%; left: 30%; width: 80px; height: 80px; background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%); }
.hp-book-edge {
  position: absolute; right: -4px; top: 0;
  width: 4px; height: 100%;
  background: var(--gold);
  transform: rotateY(90deg);
  transform-origin: left center;
}

/* ... Gallery single picture (modern, fully responsive) ... */
.hp-showcase-visual--gallery {
  background: #ecfdf5;
  padding: 1rem;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  aspect-ratio: auto;
  min-height: 320px;
}
.hp-gallery-single {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  background: var(--primary);
  isolation: isolate;
  min-height: 300px;
}
.hp-gallery-single img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}
.hp-showcase-card:hover .hp-gallery-single img { transform: scale(1.08); }
.hp-gallery-single::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1;
  pointer-events: none;
}
.hp-gallery-caption {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .95rem;
  background: rgba(255,255,255,.95);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hp-gallery-caption i { font-size: 1rem; }
.hp-gallery-corner {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 2;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .35s ease;
}
.hp-showcase-card:hover .hp-gallery-corner {
  background: var(--amber-500);
  color: #fff;
  transform: rotate(90deg) scale(1.05);
}

/* ... Responsive ... Tablet ... */
@media (max-width: 991px) {
  .hp-showcase-visual--gallery { padding: .9rem; }
  .hp-gallery-single { min-height: 300px; border-radius: 14px; }
}

/* ... Responsive ... Mobile ... */
@media (max-width: 767px) {
  .hp-showcase-visual--gallery { padding: .9rem; }
  .hp-gallery-single {
    min-height: 240px;
    border-radius: 14px;
  }
  .hp-gallery-caption {
    font-size: 1rem;
    padding: .3rem .8rem;
  }
  .hp-gallery-corner {
    width: 2.6rem; height: 2.6rem;
    font-size: 1.05rem;
    top: .6rem; right: .6rem;
  }
}

/* ... Responsive ... Small phones ... */
@media (max-width: 480px) {
  .hp-showcase-visual--gallery { padding: .7rem; }
  .hp-gallery-single { min-height: 200px; border-radius: 12px; }
  .hp-gallery-caption {
    font-size: .9rem;
    padding: .25rem .65rem;
  }
}

/* ... Showcase body ... */
.hp-showcase-body { padding: 2.4rem; flex: 1; display: flex; flex-direction: column; }
.hp-showcase-tag {
  display: inline-flex; align-items: center; gap: .6rem;
  align-self: flex-start;
  padding: .4rem 1rem;
  background: var(--green-50);
  color: var(--primary);
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r-full);
  border: 1px solid var(--green-200);
  margin-bottom: 1.2rem;
  transition: all .5s;
}
.hp-showcase-title {
  font-family: var(--font-heading);
  font-size: 2rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem;
  transition: color .5s;
}
.hp-showcase-desc {
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 1.4rem;
  flex: 1;
  transition: color .5s;
}
.hp-showcase-link {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: 1.3rem; font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: all .5s;
  margin-top: auto;
}
.hp-showcase-link i { transition: transform var(--t-base); }

@media(max-width: 991px){
  .hp-showcase-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media(max-width: 767px){
  .hp-showcase-visual { aspect-ratio: auto; min-height: 260px; padding: 1.4rem; }
  .hp-showcase-visual--gallery { aspect-ratio: auto; min-height: auto; padding: .9rem; }
  .hp-showcase-title { font-size: 1.7rem; }
  .hp-showcase-desc { font-size: 1.3rem; }
}

@media(min-width: 992px) {
  /* Equal-height cards in the 3-col grid */
  .hp-showcase-grid { grid-auto-rows: 1fr; }
  .hp-showcase-visual { min-height: 320px; }
}

/* =====================================================
   REVEAL ON SCROLL animation
   ===================================================== */
.hp-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.4,0,.2,1);
}
.hp-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.hp-reveal--3d {
  transform: perspective(1200px) translateY(40px) rotateX(8deg);
}
.hp-reveal--3d.is-in {
  transform: perspective(1200px) translateY(0) rotateX(0);
}
.hp-reveal--3d-l {
  transform: perspective(1200px) translateX(-60px) rotateY(-8deg);
}
.hp-reveal--3d-l.is-in {
  transform: perspective(1200px) translateX(0) rotateY(0);
}
.hp-reveal--3d-r {
  transform: perspective(1200px) translateX(60px) rotateY(8deg);
}
.hp-reveal--3d-r.is-in {
  transform: perspective(1200px) translateX(0) rotateY(0);
}
.hp-reveal[data-delay="1"] { transition-delay: .1s; }
.hp-reveal[data-delay="2"] { transition-delay: .2s; }
.hp-reveal[data-delay="3"] { transition-delay: .3s; }
.hp-reveal[data-delay="4"] { transition-delay: .4s; }
.hp-reveal[data-delay="5"] { transition-delay: .5s; }
.hp-reveal[data-delay="6"] { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .hp-reveal, .hp-reveal--3d, .hp-reveal--3d-l, .hp-reveal--3d-r {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .hp-hero-deco, .hp-hero-card, .hp-hero-floater, .hp-stat, .hp-level, .hp-vm-card, .hp-value, .hp-feature, .hp-why-card, .hp-news-card, .hp-mission-card, .hp-cta-stat strong {
    animation: none !important;
  }
}

/* =====================================================
   RESPONSIVE ... Home page redesign
   ===================================================== */
@media (max-width: 1199px) {
  .hp-hero { min-height: auto; padding: 12rem 0 6rem; }
  .hp-hero-3d { min-height: 460px; }
  .hp-features { grid-template-columns: repeat(3, 1fr); }
  .hp-feature--wide { grid-column: span 1; }
  .hp-feature--tall { grid-row: span 1; }
  .hp-stats-grid, .hp-why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .hp-section { padding: 6rem 0; }
  .hp-hero { padding: 12rem 0 6rem; }
  .hp-hero-grid, .hp-vm, .hp-vv, .hp-cta-grid { grid-template-columns: 1fr; gap: 4rem; }
  .hp-hero-3d { min-height: 500px; max-width: 520px; margin: 0 auto; perspective: 1600px; }
  .hp-hero-card--main { width: 300px; }
  .hp-hero-card--back1 { width: 250px; }
  .hp-hero-card--back2 { width: 220px; }
  .hp-levels, .hp-news { grid-template-columns: 1fr; gap: 1.6rem; }
  .hp-features { grid-template-columns: repeat(2, 1fr); }
  .hp-stats-grid, .hp-why { grid-template-columns: 1fr 1fr; }
  .hp-values { grid-template-columns: repeat(2, 1fr); }
  .hp-mission-card { flex: 0 0 calc((100% - 2.4rem) / 2); }
}
@media (max-width: 767px) {
  .hp-hero { padding: 10rem 0 12rem; }
  .hp-hero-grid { gap: 3rem; }
  .hp-hero h1 { font-size: clamp(3.4rem, 13vw, 5rem); }
  .hp-hero-tag { font-size: 1.65rem; }
  .hp-hero-eyebrow { font-size: 1.1rem; }
  .hp-hero-cta { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: .9rem !important; }
  .hp-hero-cta .hp-btn { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap !important; }
  .hp-btn { justify-content: center; letter-spacing: .06em; text-transform: uppercase; font-size: 1.4rem; padding: 1.4rem 2.2rem; border-radius: 999px; }
  .hp-hero-trust {
    display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: .9rem !important; justify-content:center !important; justify-items:center !important;
    padding: 1.4rem 0 0 0 !important; margin: 1.4rem 0 0 !important;
    width: 100% !important; max-width:100% !important; align-self:stretch !important;
  }
  .hp-trust-item { font-size: 1.2rem; }
  .hp-trust-item strong { font-size: 1.7rem; }
  /* Beautiful 3D stage for mobile */
  .hp-hero-3d {
    min-height: 440px;
    perspective: 1400px;
    margin: 0 auto;
    max-width: 420px;
  }
  .hp-hero-card--main {
    width: 230px;
    transform: rotateY(-14deg) rotateX(8deg) translateZ(30px);
    animation: hpHeroMain 5s ease-in-out infinite;
  }
  .hp-hero-card--back1 {
    width: 195px;
    top: 6%; right: -4%;
    transform: rotateY(10deg) rotateX(-5deg) rotateZ(8deg) translateZ(-30px);
    animation: hpHeroBack1 7s ease-in-out infinite;
  }
  .hp-hero-card--back2 {
    width: 175px;
    bottom: 2%; left: -2%;
    transform: rotateY(-8deg) rotateX(5deg) rotateZ(-10deg) translateZ(-60px);
    animation: hpHeroBack2 9s ease-in-out infinite;
  }
  .hp-hero-floater--1 { top: 4%; left: 0; }
  .hp-hero-floater--2 { bottom: 4%; right: 0; }
  .hp-section-title { font-size: 2.6rem; }
  .hp-vm-card { padding: 3rem 2rem; }
  .hp-mission-card { flex: 0 0 calc(100% - 1rem); }
  .hp-mission-card-body { padding: 1.6rem; }
  .hp-mission-arrow { width: 4rem; height: 4rem; font-size: 1.4rem; }
  .hp-features { grid-template-columns: 1fr; }
  .hp-stats-grid, .hp-why { grid-template-columns: 1fr; }
  .hp-values { grid-template-columns: 1fr; }
  .hp-testimonial { padding: 3rem 2rem 2.4rem; }
  .hp-testimonial::before { font-size: 8rem; }
  .hp-testimonial-quote { font-size: 1.5rem; }
  .hp-cta-form { padding: 2.4rem 1.8rem; }
  .hp-cta-stats { gap: 1.6rem; }
  .hp-cta-stat strong { font-size: 2.2rem; }
  .hp-stat { padding: 2.6rem 1.8rem; }
  .hp-stat-num { font-size: 3.8rem; }
  .hp-level { padding: 3rem 2rem 2.4rem; }
}
@media (max-width: 480px) {
  .hp-hero { padding: 9rem 0 5rem; }
  .hp-hero h1 { font-size: clamp(3.4rem, 13vw, 5rem); line-height: 1.05; }
  .hp-hero-tag { font-size: 1.55rem; }
  .hp-hero-eyebrow { font-size: 1.1rem; padding: .55rem 1.2rem; }
  .hp-hero-3d {
    min-height: 360px;
    perspective: 1200px;
  }
  .hp-hero-card--main { width: 200px; }
  .hp-hero-card--back1 { width: 170px; right: -2%; }
  .hp-hero-card--back2 { width: 150px; left: 2%; }
  .hp-hero-floater { font-size: 1.05rem; padding: .8rem 1rem; gap: .8rem; }
  .hp-hero-floater i { font-size: 1.5rem; }
  .hp-hero-floater strong { font-size: 1.15rem; }
  .hp-hero-floater small { font-size: 1rem; }
  .hp-hero-floater--1 { top: 6%; left: -4%; }
  .hp-hero-floater--2 { bottom: 8%; right: -2%; }
  .hp-hero-trust { gap: 1rem; padding-left: 7.5rem; }
  .hp-trust-item { font-size: 1.1rem; }
  .hp-trust-item strong { font-size: 1.5rem; }
  .hp-btn { padding: 1.3rem 2rem; font-size: 1.4rem; }
}

/* =====================================================
   Override revolution slider 5.0 layer caption fonts
   (in case it's still loaded) ... keep safe defaults
   ===================================================== */
.tp-caption.NotGeneric-Title {
  font-family: var(--font-heading) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* =====================================================
   100. ADMISSIONS + ABOUT ... Paper / Document Theme
   Light, parchment-warm, gold & green accent.
   Deliberately distinct from the dark index hero.
   Uses brand variables for full theme adaptability:
     --primary (green-800), --amber-700/600/500, --gold
   ===================================================== */
.pg-wrap { position: relative; background: var(--bg); }

/* Subtle floating atmosphere */
.pg-soft-bg {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}

/* Utility classes for inline-style replacements */
.pg-intro-tag { margin-bottom: 1.6rem !important; }
.pg-intro-loc {
  margin-top: 1.4rem;
  color: var(--primary) !important;
  font-style: italic;
  font-weight: 600;
}
.pg-intro-loc i { color: var(--primary); margin-right: .4rem; }
.pg-cta-center { justify-content: center !important; }
.pg-soft-bg span {
  position: absolute; border-radius: 50%;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  filter: blur(40px);
}
.pg-soft-bg span:nth-child(1) { width: 32rem; height: 32rem; top: -8rem; right: -8rem; }
.pg-soft-bg span:nth-child(2) { width: 26rem; height: 26rem; bottom: -6rem; left: -6rem; background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%); }
.pg-soft-bg span:nth-child(3) { width: 20rem; height: 20rem; top: 40%; left: 50%; background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%); }

/* ===== HERO (shared between admissions & about) ===== */
.pg-hero {
  position: relative;
  padding: 12rem 0 7rem;
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    var(--primary-deeper);
  color: #fff;
  overflow: hidden;
  z-index: 1;
}
.pg-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    rgba(255,255,255,.045),
    rgba(255,255,255,.045);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
.pg-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 50px;
  background: #fff;
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%);
}
.pg-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative; z-index: 2;
}
.pg-hero-text { position: relative; }

.pg-tag {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .65rem 1.4rem;
  background: rgba(255,217,138,.18);
  color: var(--gold-bright);
  border: 1.5px dashed var(--gold-bright);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.8rem;
  position: relative;
  transform: rotate(-1.2deg);
  box-shadow: 0 4px 14px rgba(var(--gold-rgb),.18);
}
.pg-tag::before {
  content: '';
  position: absolute;
  top: -.45rem; left: 50%;
  width: 1rem; height: 1rem;
  background: var(--gold-bright);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--primary-deeper);
}
.pg-tag i { color: var(--gold-bright); font-size: 1rem; }

.pg-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 1.6rem;
  letter-spacing: -.025em;
  text-shadow: 0 6px 30px rgba(0,0,0,.3);
}
.pg-hero h1 .pg-underline {
  position: relative;
  display: inline-block;
  background: rgba(var(--accent-rgb),.55);
  padding: 0 .15em;
}
.pg-hero h1 .pg-highlight {
  background: var(--gold-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 900;
}
.pg-hero-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 1.7vw, 1.85rem);
  color: rgba(255,255,255,.88);
  line-height: 1.65;
  margin: 0 0 2.4rem;
  max-width: 56rem;
}
.pg-hero-lead strong { color: #fff; font-weight: 700; }

.pg-hero-cta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 2.6rem; }
.pg-btn {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.3rem 2.4rem;
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 700;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .3s ease;
  letter-spacing: .01em;
}
.pg-btn i { transition: transform .3s ease; }
.pg-btn--primary {
  background: var(--gold-bright);
  color: #1a1d21;
  border-color: var(--gold);
  box-shadow: 0 14px 36px rgba(var(--gold-rgb),.4), inset 0 1px 0 rgba(255,255,255,.55);
}
.pg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(var(--gold-rgb),.55); }
.pg-btn--primary:hover i { transform: translateX(4px); }
.pg-btn--outline {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pg-btn--outline:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; transform: translateY(-2px); }
.pg-btn--outline:hover i { transform: translateX(4px); }

.pg-stamps { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pg-stamp {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem 1.1rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-md);
  font-size: 1.25rem;
  color: rgba(255,255,255,.88);
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pg-stamp i { color: var(--green-300); font-size: 1.1rem; }

/* ===== Right-side: paper / form card ===== */
.pg-side-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 3.2rem 2.8rem;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.30);
  transform: rotate(1.5deg);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  max-width: 460px;
  margin-left: auto;
  isolation: isolate;
}
.pg-side-card::before {
  content: '';
  position: absolute; inset: 0;
  border: 2px solid var(--gold);
  border-radius: 14px;
  margin: 8px;
  pointer-events: none;
  opacity: .4;
}
.pg-side-card:hover { transform: rotate(0) scale(1.01); }
.pg-paperclip {
  position: absolute;
  top: -1.6rem; right: 3rem;
  width: 2.4rem; height: 5rem;
  background: #94a3b8;
  border-radius: 2rem 2rem 1rem 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  z-index: 3;
}
.pg-paperclip::before {
  content: '';
  position: absolute;
  top: .3rem; left: .4rem; right: .4rem;
  height: 4rem;
  background: transparent;
  border: 4px solid #cbd5e1;
  border-bottom: 0;
  border-radius: 2rem 2rem 0 0;
}

.pg-side-head {
  text-align: center;
  border-bottom: 1.5px dashed #e6dfd0;
  padding-bottom: 1.6rem;
  margin-bottom: 1.8rem;
}
.pg-side-head .ribbon {
  display: inline-block;
  padding: .35rem 1.2rem;
  background: var(--text);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
}
.pg-side-head h3 {
  font-family: var(--font-serif);
  font-size: 2rem; font-weight: 700;
  color: var(--text);
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.pg-side-head .form-id {
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700;
  color: var(--amber-700);
  letter-spacing: .12em;
}

.pg-form-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px dotted #e6dfd0;
}
.pg-form-row:last-of-type { border-bottom: 0; }
.pg-form-row .label {
  flex: 0 0 10rem;
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700;
  color: #6b5e4a;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pg-form-row .line {
  flex: 1;
  border-bottom: 1.5px solid #6b5e4a;
  height: 1.2rem;
}
.pg-form-check {
  display: flex; align-items: center; gap: 1.4rem;
  margin-top: 1.8rem;
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pg-form-check .box {
  width: 2rem; height: 2rem;
  border: 2px solid var(--text);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  position: relative;
}
.pg-form-check.checked .box { background: var(--text); }
.pg-form-check.checked .box::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  color: #fff;
  font-size: 1.1rem;
}
.pg-form-stamp {
  position: absolute;
  bottom: 2rem; right: 2rem;
  width: 9rem; height: 9rem;
  border: 3px solid #b91c1c;
  color: #b91c1c;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  transform: rotate(-15deg);
  opacity: .75;
  background: rgba(185,28,28,.05);
}
.pg-form-stamp span { display: block; font-size: 1.6rem; margin-top: .2rem; }

/* ===== SECTIONS base ===== */
.pg-section { position: relative; padding: 8rem 0; z-index: 1; }
.pg-section--paper { background: var(--white); }
.pg-section--warm  { background: var(--bg-alt); }
.pg-section--ink   { background: var(--primary-deeper); color: #fff; }

.pg-section-head { text-align: center; margin-bottom: 4.5rem; }
.pg-section-head.left { text-align: left; }
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .55rem 1.4rem;
  background: var(--white);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--primary);
  margin-bottom: 1.4rem;
  position: relative;
}
.pg-section--ink .pg-eyebrow { background: transparent; color: var(--gold-bright); border-color: var(--gold-bright); }
.pg-eyebrow::before {
  content: '';
  width: .5rem; height: .5rem;
  background: var(--amber-500);
  border-radius: 50%;
  display: inline-block;
}
.pg-eyebrow i { font-size: 1rem; }

.pg-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 1.4rem;
}
.pg-section--ink .pg-section-title { color: #fff; }
.pg-section-title .pg-accent {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 900;
  color: var(--primary);
  font-family: var(--font-serif);
}
.pg-section--ink .pg-section-title .pg-accent { color: var(--gold-bright); }
.pg-section-sub {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 68rem;
  margin: 0 auto;
}
.pg-section--ink .pg-section-sub { color: rgba(255,255,255,.78); }

/* ===== Level pills (file-folder) ===== */
.pg-levels { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pg-level-folder {
  position: relative;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.4rem 2.2rem 1.4rem 1.6rem;
  border-radius: 6px 14px 14px 6px;
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 700;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: all .3s;
  overflow: hidden;
}
.pg-level-folder::before {
  content: '';
  position: absolute;
  top: -1.5rem; left: -.4rem;
  width: 3rem; height: 3rem;
  background: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 0 0 1rem 1rem;
  border-top: 0;
  opacity: .85;
}
.pg-level-folder i { font-size: 1.6rem; z-index: 1; }
.pg-level-folder span { z-index: 1; }
.pg-level-folder--nursery   i { color: var(--amber-700); }
.pg-level-folder--primary   i { color: var(--primary); }
.pg-level-folder--secondary i { color: var(--navy-850); }
.pg-level-folder:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary); }

/* ===== Document cards (used for "What you need") ===== */
.pg-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.pg-doc {
  position: relative;
  background: var(--white);
  border-radius: 8px;
  padding: 2.8rem 2.4rem 2.4rem;
  box-shadow: var(--shadow-card);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pg-doc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--primary);
}
.pg-doc:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.pg-doc-num {
  position: absolute;
  top: 1.6rem; right: 2rem;
  font-family: var(--font-serif);
  font-size: 3rem; font-weight: 800;
  font-style: italic;
  color: rgba(var(--primary-rgb), .12);
  line-height: 1;
}
.pg-doc-icon {
  width: 5.4rem; height: 5.4rem;
  border-radius: 12px;
  background: var(--green-100);
  border: 1.5px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  position: relative;
}
.pg-doc-icon::after {
  content: '';
  position: absolute;
  top: -.5rem; right: -.5rem;
  width: 1.4rem; height: 1.4rem;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
}
.pg-doc-icon i { font-size: 2.2rem; color: var(--primary); }
.pg-doc-title {
  font-family: var(--font-heading);
  font-size: 1.7rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem;
  line-height: 1.25;
}
.pg-doc-text {
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  white-space: pre-line;
}
.pg-doc-divider {
  height: 1px;
  background: var(--border);
  margin: 1.4rem 0 1.2rem;
  opacity: .6;
}
.pg-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pg-doc-list li {
  display: flex; align-items: flex-start; gap: .8rem;
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pg-doc-list li i { color: var(--primary); font-size: 1.05rem; margin-top: .35rem; flex-shrink: 0; }
.pg-doc-foot {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.pg-doc-foot .stamp { color: var(--primary); }

/* ===== Timeline (process) ===== */
.pg-timeline {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem 0;
}
.pg-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--primary);
  transform: translateX(-50%);
  opacity: .25;
}
.pg-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 5rem 1fr;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.8rem;
}
.pg-step:last-child { margin-bottom: 0; }
.pg-step-num {
  grid-column: 2;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 800;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb),.35);
  z-index: 1;
  position: relative;
  margin: 0 auto;
}
.pg-step-body {
  background: var(--white);
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  white-space: pre-line;
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.65;
  position: relative;
  transition: all var(--t-base);
}
.pg-step-body:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); }
.pg-step:nth-child(odd) .pg-step-body  { grid-column: 1; }
.pg-step:nth-child(even) .pg-step-body { grid-column: 3; }
.pg-step:nth-child(even) .pg-step-body { text-align: left; }
.pg-step-body strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--primary);
  font-size: 1.55rem;
  margin-bottom: .4rem;
  letter-spacing: -.01em;
}
.pg-step-body::before {
  content: '\f0c1';
  font-family: 'FontAwesome';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  color: var(--primary);
  font-size: 1.4rem;
  opacity: .5;
}
.pg-step:nth-child(odd) .pg-step-body::before { right: -2.4rem; transform: translateY(-50%) rotate(35deg); }
.pg-step:nth-child(even) .pg-step-body::before { left: -2.4rem; transform: translateY(-50%) scaleX(-1) rotate(35deg); }

/* ===== Contact split (light) ===== */
.pg-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
}
.pg-contact-info {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3.4rem 3rem;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.pg-contact-info::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--primary);
}
.pg-contact-info h3 {
  font-family: var(--font-heading);
  font-size: 2.2rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 .4rem;
}
.pg-contact-info .sub {
  font-family: var(--font-body);
  color: var(--text-muted);
  margin: 0 0 2rem;
  font-size: 1.4rem;
}
.pg-contact-row {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.1rem 0;
  border-top: 1px dashed var(--border);
}
.pg-contact-row:last-of-type { border-bottom: 1px dashed var(--border); }
.pg-contact-row i {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--green-50);
  border: 1.5px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--primary);
  flex-shrink: 0;
}
.pg-contact-row .label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: .2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.pg-contact-row .value {
  display: block;
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}
.pg-contact-row a { color: var(--text); text-decoration: none; }
.pg-contact-row a:hover { color: var(--primary); }

.pg-contact-side { position: relative; display: flex; flex-direction: column; gap: 1.2rem; }
.pg-contact-photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  min-height: 280px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: var(--green-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
}
.pg-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-contact-photo .placeholder { text-align: center; padding: 2rem; }
.pg-contact-photo .placeholder i { font-size: 4rem; opacity: .4; display: block; margin-bottom: 1rem; }
.pg-contact-photo .placeholder p { margin: 0; font-size: 1.2rem; opacity: .7; }

.pg-contact-cta { display: flex; flex-direction: column; gap: 1rem; }

/* ===== FAQ accordion ===== */
.pg-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.pg-faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1.8rem;
  cursor: pointer;
  transition: all .3s;
  box-shadow: var(--shadow-card);
}
.pg-faq-item:hover { transform: translateY(-2px); border-color: var(--primary); }
.pg-faq-item.is-open {
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}
.pg-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 700;
  color: var(--text);
}
.pg-faq-q i { font-size: 1.1rem; color: var(--primary); transition: transform .3s; }
.pg-faq-item.is-open .pg-faq-q i { transform: rotate(180deg); }
.pg-faq-a {
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, margin-top .4s ease, opacity .3s;
  opacity: 0;
}
.pg-faq-item.is-open .pg-faq-a { max-height: 320px; margin-top: 1rem; opacity: 1; }

/* ===== Reveal animations ===== */
.pg-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1); }
.pg-reveal.is-in { opacity: 1; transform: translateY(0); }
.pg-reveal--3d { transform: perspective(1200px) translateY(40px) rotateX(6deg); }
.pg-reveal--3d.is-in { transform: perspective(1200px) translateY(0) rotateX(0); }

/* ===== About-page specifics ===== */

/* Founder / welcome letter block */
.pg-letter {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  padding: 5rem 5.2rem;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.pg-letter::before {
  content: '\201C';
  position: absolute;
  top: -2rem; left: 3rem;
  font-size: 18rem;
  color: rgba(var(--primary-rgb),.06);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.pg-letter-label {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--green-50);
  color: var(--primary);
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1.6rem;
  border-radius: var(--r-full);
  margin-bottom: 2rem;
  border: 1.5px solid var(--primary);
}
.pg-letter h3 {
  font-family: var(--font-heading);
  font-size: 2.6rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 .6rem;
  line-height: 1.2;
}
.pg-letter .from {
  font-size: 1.4rem;
  color: var(--text-muted);
  margin-bottom: 2.4rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.pg-letter-body {
  font-family: var(--font-body);
  font-size: 1.65rem;
  line-height: 1.95;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  white-space: pre-line;
}
.pg-letter-sig {
  margin-top: 2.8rem;
  padding-top: 2.2rem;
  border-top: 1.5px dashed var(--border);
  font-size: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.pg-letter-sig strong {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
}
.pg-letter-sig .ab-sig-title { font-size: 1.3rem; opacity: .75; font-weight: 500; }

/* Signature image */
.pg-signature {
  position: absolute;
  bottom: 5rem; right: 4rem;
  max-width: 14rem;
  max-height: 6rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transform: rotate(-2deg);
  opacity: .9;
}

/* Intro split (about welcome) */
.pg-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4.5rem;
  align-items: center;
  background: var(--white);
  border-radius: 14px;
  padding: 5rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.pg-intro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--primary);
}
.pg-intro-text h2 {
  font-family: var(--font-heading);
  font-size: 3.2rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1.6rem;
  line-height: 1.15;
}
.pg-intro-text h2 .ab-abbr { color: var(--primary); font-size: 65%; font-weight: 600; }
.pg-intro-text p {
  font-family: var(--font-body);
  font-size: 1.7rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 0 0 1.4rem;
}
.pg-intro-text strong { color: var(--text); font-weight: 700; }
.pg-intro-photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 42rem;
  box-shadow: var(--shadow-xl);
  border: 6px solid var(--white);
}
.pg-intro-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pg-intro-photo:hover img { transform: scale(1.04); }
.pg-intro-photo .photo-frame {
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--primary);
  border-radius: 18px;
  pointer-events: none;
  opacity: .35;
}

/* Stats strip (about page) */
.pg-stats-strip {
  background: var(--white);
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pg-stats-strip .container { display: flex; justify-content: center; flex-wrap: wrap; }
.pg-stats-strip .ab-stat {
  flex: 1;
  min-width: 18rem;
  max-width: 24rem;
  text-align: center;
  padding: 3rem 2rem;
  border-right: 1px solid var(--border);
  transition: background var(--t-base);
}
.pg-stats-strip .ab-stat:last-child { border-right: none; }
.pg-stats-strip .ab-stat:hover { background: var(--green-50); }
.pg-stats-strip .ab-stat-num {
  font-family: var(--font-heading);
  font-size: 3.4rem; font-weight: 800;
  color: var(--primary);
  line-height: 1;
  display: block;
  margin-bottom: .6rem;
}
.pg-stats-strip .ab-stat-label {
  font-size: 1.35rem;
  color: var(--text-muted);
  display: block;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Statement grid (vision/mission) */
.pg-stmt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
}
.pg-stmt-card {
  background: var(--white);
  border-radius: 14px;
  padding: 3.6rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: all var(--t-slow);
}
.pg-stmt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 5px;
  background: var(--primary);
}
.pg-stmt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.pg-stmt-icon {
  width: 5.8rem; height: 5.8rem;
  border-radius: 14px;
  background: var(--green-100);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 1.8rem;
  border: 1.5px solid var(--primary);
  transition: all var(--t-spring);
}
.pg-stmt-card:hover .pg-stmt-icon { background: var(--primary); color: #fff; transform: rotate(-6deg) scale(1.08); }
.pg-stmt-card h4 {
  font-family: var(--font-heading);
  font-size: 2.2rem; font-weight: 800;
  color: var(--text);
  margin: 0 0 1.4rem;
}
.pg-stmt-card p {
  font-family: var(--font-body);
  font-size: 1.55rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-line;
}
.pg-mission-list { list-style: none; padding: 0; margin: 0; }
.pg-mission-list li {
  display: flex; align-items: flex-start; gap: 1.4rem;
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.8;
  padding: 1.2rem 0;
  border-bottom: 1px dashed var(--border);
}
.pg-mission-list li:last-child { border-bottom: none; }
.pg-mission-list li i {
  color: var(--primary);
  font-size: 1.5rem;
  margin-top: .35rem;
  flex-shrink: 0;
}

/* Values grid */
.pg-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 2rem;
}
.pg-value-chip {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 2.4rem 1.8rem 2rem;
  text-align: center;
  transition: all var(--t-base);
  box-shadow: var(--shadow-card);
}
.pg-value-chip::before {
  content: '';
  position: absolute;
  top: -.5rem; left: 1.5rem;
  width: 2.4rem; height: 1rem;
  background: var(--amber-500);
  border-radius: 1px;
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  opacity: .85;
}
.pg-value-chip:hover {
  transform: translateY(-4px);
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 12px 30px rgba(var(--primary-rgb),.30);
}
.pg-value-icon {
  font-size: 2.4rem;
  color: var(--primary);
  display: block;
  margin-bottom: 1rem;
  transition: color var(--t-base);
}
.pg-value-chip:hover .pg-value-icon { color: #fff; }
.pg-value-chip span {
  font-family: var(--font-heading);
  font-size: 1.55rem; font-weight: 700;
  color: var(--text);
  display: block;
  transition: color var(--t-base);
}
.pg-value-chip:hover span { color: #fff; }

/* History / milestones */
.pg-history {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.pg-history-text p {
  font-family: var(--font-body);
  font-size: 1.7rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 0 0 1.4rem;
}
.pg-history-text p strong { color: var(--text); }
.pg-milestones {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.pg-milestone {
  background: var(--white);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.pg-milestone .year {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 800;
  color: var(--primary);
  margin-bottom: .3rem;
}
.pg-milestone .text {
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== Responsive ===== */
@media(max-width: 991px){
  .pg-section { padding: 5rem 0; }
  .pg-hero { padding: 11rem 0 5rem; }
  .pg-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pg-side-card { transform: rotate(0); margin: 0 auto; max-width: 100%; }
  .pg-docs { grid-template-columns: 1fr 1fr; }
  .pg-stmt-grid { grid-template-columns: 1fr; }
  .pg-contact-grid { grid-template-columns: 1fr; }
  .pg-intro { grid-template-columns: 1fr; gap: 3rem; padding: 3.6rem 3rem; }
  .pg-history { grid-template-columns: 1fr; }
  .pg-step { grid-template-columns: 4rem 1fr; gap: 1.2rem; }
  .pg-step-num { grid-column: 1; }
  .pg-step:nth-child(odd) .pg-step-body,
  .pg-step:nth-child(even) .pg-step-body { grid-column: 2; text-align: left; }
  .pg-step:nth-child(odd) .pg-step-body::before { display: none; }
  .pg-step:nth-child(even) .pg-step-body::before { display: none; }
  .pg-timeline::before { left: 2.2rem; transform: none; }
}
@media(max-width: 767px){
  .pg-hero { padding: 9rem 0 4rem; }
  .pg-hero h1 { font-size: 3rem; }
  .pg-hero-cta { flex-direction: column; align-items: stretch; }
  .pg-btn { justify-content: center; }
  .pg-docs { grid-template-columns: 1fr; }
  .pg-side-card { padding: 2.4rem 1.8rem; }
  .pg-form-row { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .pg-form-row .label { flex: none; }
  .pg-form-row .line { width: 100%; }
  .pg-step { gap: 1rem; margin-bottom: 2rem; }
  .pg-step-num { width: 3.6rem; height: 3.6rem; font-size: 1.5rem; }
  .pg-step-body { padding: 1.2rem 1.4rem; font-size: 1.3rem; }
  .pg-contact-info { padding: 2.4rem 1.8rem; }
  .pg-form-stamp { width: 6.5rem; height: 6.5rem; font-size: .85rem; bottom: 1.2rem; right: 1.2rem; }
  .pg-form-stamp span { font-size: 1.2rem; }
  .pg-paperclip { right: 1.5rem; }
  .pg-intro { padding: 3rem 2rem; }
  .pg-intro-photo { height: 32rem; }
  .pg-intro-text h2 { font-size: 2.6rem; }
  .pg-letter { padding: 3rem 2.4rem; }
  .pg-letter h3 { font-size: 2.2rem; }
  .pg-signature { bottom: 2rem; right: 1.5rem; max-width: 9rem; }
  .pg-stmt-card { padding: 2.6rem 2rem; }
  .pg-stats-strip .ab-stat { min-width: 50%; }
}
@media(max-width: 480px){
  .pg-stats-strip .ab-stat { min-width: 100%; border-right: none; border-bottom: 1px solid #e6dfd0; }
  .pg-stats-strip .ab-stat:last-child { border-bottom: none; }
  .pg-intro-photo { height: 26rem; }
  .pg-letter-body { font-size: 1.5rem; }
}

/* =====================================================
   300. ID-CARD VERIFICATION POPUP (.vf-*)
   Beautiful, modern modal popup for verify.php
   Used for verifying school & student ID cards
   - Large modal on desktop, full screen on mobile
   - Privacy-protected student photo (blurred by default)
   - Modern fonts (Poppins + Open Sans)
   - Flashy green/red authetic colors
   - Z-index above nav (topbar 200, header 990, mobile sidebar 9999, modal 99999)
   ===================================================== */

/* --- Backdrop & overlay --- */
.vf-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--primary-rgb), .18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(var(--accent-rgb), .12), transparent 45%),
    rgba(var(--primary-deeper-rgb), .85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.vf-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Floating particles in the background --- */
.vf-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.vf-particle {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 0 8px rgba(255, 255, 255, .4);
  animation: vfFloat 18s linear infinite;
  bottom: -20px;
}
@keyframes vfFloat {
  0% { transform: translateY(0) translateX(0) scale(.5); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(40px) scale(1); opacity: 0; }
}

/* --- Main modal (large on desktop) --- */
.vf-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 96rem;
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, .6),
    0 16px 40px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  transform: translateY(30px) scale(.94);
  opacity: 0;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.2rem);
}
.vf-overlay.is-open .vf-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Two-column layout: hero panel (left) + content (right) */
.vf-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- Hero (left) panel with status --- */
.vf-hero {
  position: relative;
  color: var(--white);
  padding: 4rem 3.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}
.vf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    var(--primary-dark);
}
.vf-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  opacity: .55;
}
.vf-hero.unverified::before {
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    #450a0a;
}

.vf-hero-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.vf-hero-deco--1 {
  top: -8rem; right: -7rem;
  width: 22rem; height: 22rem;
  background: rgba(255, 255, 255, .06);
}
.vf-hero-deco--2 {
  bottom: -6rem; left: -5rem;
  width: 16rem; height: 16rem;
  background: rgba(var(--accent-rgb), .22);
}

.vf-hero-top { position: relative; z-index: 1; }

.vf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.2rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1.6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vf-eyebrow i { font-size: 1rem; }

.vf-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.4rem;
  background: rgba(255, 255, 255, .95);
  color: var(--primary);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 1.8rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  position: relative;
}
.vf-hero.unverified .vf-status-badge { color: #b91c1c; }
.vf-status-badge .vf-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  position: relative;
  animation: vfPulse 1.6s ease-in-out infinite;
}
.vf-hero.unverified .vf-status-badge .vf-dot { background: #b91c1c; }
@keyframes vfPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 8px transparent; opacity: .7; }
}
.vf-status-badge .vf-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.vf-hero.unverified .vf-status-badge .vf-check { background: #b91c1c; }

.vf-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1.2rem;
  color: var(--white);
  letter-spacing: -.025em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.vf-hero-sub {
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
  margin: 0;
  max-width: 30rem;
}

.vf-hero-mid {
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}
.vf-school-mini {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 1.6rem;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vf-school-mini-logo {
  width: 5.4rem; height: 5.4rem;
  border-radius: 14px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.vf-school-mini-logo img { width: 100%; height: 100%; object-fit: contain; }
.vf-school-mini-info { flex: 1; min-width: 0; }
.vf-school-mini-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.01em;
  word-break: break-word;
}
.vf-school-mini-tag {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .72);
  font-style: italic;
  margin-top: .2rem;
  line-height: 1.3;
}

.vf-hero-bottom {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
}
.vf-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}
.vf-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
.vf-trust-pill i { color: var(--green-300); font-size: 1.05rem; }

/* --- Right column: content --- */
.vf-content {
  position: relative;
  padding: 3.4rem 3.6rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: var(--white);
}
.vf-content::-webkit-scrollbar { width: 10px; }
.vf-content::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 10px;
  margin: 6px 0;
}
.vf-content::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
  border: 2px solid var(--gray-100);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.vf-content::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
  border-color: var(--green-200);
}
.vf-content {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--gray-100);
}

/* --- Section header in content --- */
.vf-section {
  margin-bottom: 2.2rem;
}
.vf-section:last-child { margin-bottom: 0; }
.vf-section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.vf-section-icon {
  width: 3.8rem; height: 3.8rem;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--primary-glow);
  position: relative;
}
.vf-section-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: var(--amber-500);
  opacity: .25;
  z-index: -1;
}
.vf-section-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
  line-height: 1;
}
.vf-section-sub {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: .3rem;
}

/* --- Info grid (school info) --- */
.vf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.vf-info {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
  transition: all .25s;
  overflow: hidden;
}
.vf-info::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s;
}
.vf-info:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 22px var(--primary-glow);
  transform: translateY(-2px);
}
.vf-info:hover::before { transform: scaleY(1); }
.vf-info--wide { grid-column: 1 / -1; }
.vf-info-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}
.vf-info-label i { color: var(--primary); font-size: 1.1rem; }
.vf-info-value {
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.vf-info-value a { color: inherit; text-decoration: none; }
.vf-info-value a:hover { color: var(--primary); }

/* --- Student card (privacy-protected) --- */
.vf-student {
  position: relative;
  background:
    rgba(220, 38, 38, .06),
    var(--white);
  border: 2px solid var(--green-200);
  border-radius: var(--r-lg);
  padding: 1.8rem 2rem;
  overflow: hidden;
}
.vf-student::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.vf-student::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -30px;
  width: 120px; height: 120px;
background: radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.vf-student-status {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .35);
}
.vf-student-status i { font-size: 1rem; }

.vf-student-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  position: relative;
  z-index: 1;
}

/* Privacy-protected photo */
.vf-photo-wrap {
  position: relative;
  width: 8.4rem; height: 8.4rem;
  flex-shrink: 0;
}
.vf-photo {
  width: 8.4rem; height: 8.4rem;
  border-radius: 50%;
  object-fit: cover;
  filter: blur(16px) saturate(.85) brightness(.95);
  transition: filter .5s ease;
  border: 4px solid var(--white);
  box-shadow: 0 8px 22px rgba(var(--primary-rgb), .18);
  display: block;
}
.vf-photo.is-revealed { filter: blur(0) saturate(1) brightness(1); }
.vf-avatar {
  position: absolute;
  inset: 0;
  width: 8.4rem; height: 8.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  border: 4px solid var(--white);
  box-shadow: 0 8px 22px rgba(var(--primary-rgb), .28);
  transition: opacity .35s, transform .35s;
}
.vf-avatar.is-hidden { opacity: 0; transform: scale(.7); pointer-events: none; }
.vf-photo-toggle {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  border: 2.5px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transition: all .25s;
  font-size: 1.2rem;
  padding: 0;
}
.vf-photo-toggle:hover {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0 6px 18px var(--primary-glow);
}
.vf-photo-toggle.is-active {
  background: var(--primary);
  color: var(--white);
}

.vf-student-info { flex: 1; min-width: 0; }
.vf-student-name {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: .6rem;
  word-break: break-word;
}
.vf-student-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.vf-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .9rem;
  background: var(--white);
  border: 1.2px solid var(--green-200);
  border-radius: var(--r-full);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .01em;
}
.vf-pill i { font-size: 1rem; }

.vf-student-details {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1.5px dashed var(--green-200);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: relative;
  z-index: 1;
}
.vf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px dashed rgba(187, 247, 208, .7);
}
.vf-row:last-child { border-bottom: none; }
.vf-row .lbl {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.vf-row .val {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}
.vf-row .val.is-active { color: var(--primary); }

/* Privacy note under photo */
.vf-privacy-note {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, .65);
  border: 1px dashed var(--green-300);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}
.vf-privacy-note i {
  color: var(--primary);
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* --- Failed state --- */
.vf-fail {
  text-align: center;
  padding: 4rem 2rem 2rem;
}
.vf-fail-icon {
  position: relative;
  width: 11rem; height: 11rem;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fee2e2;
  border: 3px solid #fca5a5;
  animation: vfShake .6s ease;
}
.vf-fail-icon::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed rgba(239, 68, 68, .35);
  animation: vfRotate 18s linear infinite;
}
@keyframes vfShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
@keyframes vfRotate {
  to { transform: rotate(360deg); }
}
.vf-fail-icon i { font-size: 4.5rem; color: #b91c1c; }
.vf-fail-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .8rem;
  letter-spacing: -.02em;
}
.vf-fail-msg {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--text-secondary);
  max-width: 36rem;
  margin: 0 auto 1.8rem;
  line-height: 1.6;
}
.vf-fail-hint {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.6rem;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 1.3rem;
  color: var(--text-muted);
  font-weight: 600;
}
.vf-fail-hint i { color: var(--primary); }

/* --- Modal footer --- */
.vf-modal-foot {
  padding: 1.6rem 3.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}
.vf-seal {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.4rem;
  background: var(--white);
  border: 1.5px solid var(--green-200);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 4px 12px var(--primary-glow);
}
.vf-seal i { color: var(--primary); }
.vf-seal.is-failed {
  border-color: #fecaca;
  color: #b91c1c;
  box-shadow: 0 4px 12px rgba(185, 28, 28, .18);
}
.vf-seal.is-failed i { color: #b91c1c; }

.vf-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  text-align: right;
}
.vf-meta-id {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .04em;
}
.vf-meta-time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 1.15rem;
  color: var(--text-muted);
  font-weight: 500;
}
.vf-meta-time i { font-size: 1.05rem; color: var(--primary); }

/* Close button */
.vf-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 10;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  border: 1.5px solid var(--border);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transition: all .25s;
  padding: 0;
}
.vf-hero .vf-close {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .35);
  color: var(--white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vf-content .vf-close {
  background: var(--white);
  border-color: var(--border);
  color: var(--text);
}
.vf-close:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: var(--white);
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 8px 22px rgba(185, 28, 28, .35);
}

/* --- Responsive: Tablet --- */
@media (max-width: 991px) {
  .vf-overlay { padding: 1.2rem; }
  .vf-modal { max-width: 100%; border-radius: 20px; max-height: calc(100vh - 2.4rem); }
  .vf-grid { grid-template-columns: 1fr; }
  .vf-hero { padding: 3.2rem 2.4rem 2.4rem; }
  .vf-hero-mid { margin-top: 2rem; }
  .vf-hero-bottom { margin-top: 2rem; }
  .vf-content { padding: 2.4rem 2.4rem 2rem; }
  .vf-modal-foot { padding: 1.4rem 2.4rem; }
  .vf-hero-title { font-size: 2.6rem; }
  .vf-info { padding: 1rem 1.2rem; }
  .vf-info-value { font-size: 1.35rem; }
  .vf-photo-wrap, .vf-photo, .vf-avatar { width: 7.2rem; height: 7.2rem; }
  .vf-student-name { font-size: 1.7rem; }
}

/* --- Responsive: Mobile (full screen) --- */
@media (max-width: 767px) {
  .vf-overlay {
    padding: 0;
    align-items: stretch;
  }
  .vf-modal {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    transform: translateY(20px) scale(1);
  }
  .vf-overlay.is-open .vf-modal { transform: translateY(0) scale(1); }
  .vf-hero {
    padding: 4.2rem 1.6rem 1.8rem;
    min-height: auto;
  }
  .vf-hero-title { font-size: 2.2rem; }
  .vf-hero-sub { font-size: 1.35rem; }
  .vf-school-mini { padding: 1.1rem 1.2rem; gap: 1rem; }
  .vf-school-mini-logo { width: 4.4rem; height: 4.4rem; }
  .vf-school-mini-name { font-size: 1.4rem; }
  .vf-trust-pills { gap: .6rem; }
  .vf-trust-pill { font-size: 1.1rem; padding: .5rem .9rem; }

  .vf-content { padding: 1.8rem 1.4rem 1.4rem; }
  .vf-section-head { margin-bottom: 1.1rem; }
  .vf-section-icon { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; }
  .vf-section-title { font-size: 1.2rem; }
  .vf-section-sub { font-size: 1.05rem; }

  .vf-info-grid { grid-template-columns: 1fr; gap: .8rem; }
  .vf-info--wide { grid-column: auto; }
  .vf-info { padding: 1rem 1.1rem; }
  .vf-info-label { font-size: 1rem; }
  .vf-info-value { font-size: 1.3rem; }

  .vf-student { padding: 1.4rem 1.4rem; }
  .vf-student-head { gap: 1.1rem; }
  .vf-photo-wrap, .vf-photo, .vf-avatar { width: 6.6rem; height: 6.6rem; }
  .vf-photo-toggle { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
  .vf-avatar { font-size: 2rem; }
  .vf-student-name { font-size: 1.55rem; }
  .vf-pill { font-size: 1rem; padding: .3rem .8rem; }
  .vf-row .lbl { font-size: 1.1rem; }
  .vf-row .val { font-size: 1.25rem; }
  .vf-privacy-note { font-size: 1.1rem; padding: .8rem 1rem; }

  .vf-modal-foot {
    padding: 1.2rem 1.4rem;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .vf-seal { justify-content: center; }
  .vf-meta { align-items: center; text-align: center; }
  .vf-fail { padding: 3rem 1.4rem 2rem; }
  .vf-fail-icon { width: 8.6rem; height: 8.6rem; }
  .vf-fail-icon i { font-size: 3.6rem; }
  .vf-fail-title { font-size: 2rem; }
  .vf-fail-msg { font-size: 1.35rem; }

  .vf-close {
    width: 3.4rem; height: 3.4rem;
    font-size: 1.25rem;
    top: 1rem; right: 1rem;
  }
  .vf-student-status {
    top: 1rem; right: 1rem;
    font-size: 1rem;
    padding: .3rem .8rem;
  }
}

@media (max-width: 380px) {
  .vf-hero { padding: 4rem 1.2rem 1.4rem; }
  .vf-content { padding: 1.4rem 1.2rem 1.2rem; }
  .vf-hero-title { font-size: 1.9rem; }
  .vf-student-name { font-size: 1.4rem; }
  .vf-modal-foot { padding: 1rem 1.2rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .vf-particle, .vf-fail-icon::before, .vf-status-badge .vf-dot { animation: none !important; }
  .vf-modal, .vf-overlay, .vf-photo, .vf-avatar, .vf-close, .vf-photo-toggle, .vf-info { transition: none !important; }
}

/* Lock body scroll when modal is open */
body.vf-modal-open { overflow: hidden; }

/*
========================================================================
   HOMEPAGE OVERRIDES ... migrated from index.php inline <style>
======================================================================== */

/* --- Fix: remove text-decoration from all homepage link components --- */
.hp-hero-cta a,
.hp-hero-cta .hp-btn,
a.hp-level,
a.hp-level:link,
a.hp-level:visited,
a.hp-level:hover,
a.hp-level:active,
a.hp-news-card,
a.hp-news-card:link,
a.hp-news-card:visited,
a.hp-news-card:hover,
a.hp-news-card:active,
a.hp-showcase-card,
a.hp-showcase-card:link,
a.hp-showcase-card:visited,
a.hp-showcase-card:hover,
a.hp-showcase-card:active,
a.hp-feature,
a.hp-feature:link,
a.hp-feature:visited,
a.hp-feature:hover,
a.hp-feature:active,
.hp-level-cta,
.hp-feature-link,
.hp-showcase-link,
.hp-news-link,
.hp-btn {
  text-decoration: none !important;
}

/* Ensure all hp-* component links don't get underlines */
.hp-levels a,
.hp-features a,
.hp-news a,
.hp-showcase-grid a,
.hp-why a { text-decoration: none !important; }


/* ...
   GLOBAL PAGE PADDING ... generous breathing room everywhere
   ... */
body #educo_wrapper > * .container,
body .hp-section .container,
body .hp-stats .container,
body .hp-cta .container,
body .ed_parallax_section .container,
body .ed_newsletter_section .container,
body .ed_footer_newsletter .container,
body .ed_footer_top .container,
body .ed_footer_bottom .container {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

/* Header container ... match base */
body .main-header .container {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

/* Topbar container ... match */
body .topbar .container {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

/* ...
   HOMEPAGE HEADER ... premium, modern school branding
   ... */

/* Desktop: bold, elegant, modern gradient */
body .main-header {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 40px rgba(0,0,0,.05) !important;
}
body .main-header.scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 48px rgba(0,0,0,.10) !important;
}
body .brand-name {
  font-family: 'Playfair Display', 'Trirong', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.05rem + 0.85vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  background: var(--primary-deeper);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-wrap: balance;
  max-width: 100%;
  display: block;
}
body .brand-tagline {
  font-family: 'Trirong', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #6b7280;
  font-style: italic;
  letter-spacing: .015em;
  margin-top: .35rem;
  line-height: 1.2;
  opacity: 1;
  transition: color .35s ease;
}
body .brand:hover .brand-name {
  background: var(--green-700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .brand:hover .brand-tagline {
  color: var(--gold);
}

/* ...
   HEADER ... Mobile-first gorgeous top bar & school name
   ... */

/* Topbar: elevated, modern on mobile */
@media (max-width: 991px) {
  body .topbar {
    padding: .75rem 0 !important;
    font-size: 1.35rem !important;
    background: var(--green-700) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  body .topbar .topbar-inner { justify-content: center !important; }
  body .topbar-portal-btn {
    font-size: 1.35rem !important;
    padding: .6rem 1.6rem !important;
    border-radius: 10px !important;
    background: rgba(var(--gold-rgb),.15) !important;
    border: 1px solid rgba(var(--gold-rgb),.35) !important;
    color: var(--gold-bright) !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    transition: all .3s ease;
  }
  body .topbar-portal-btn:hover {
    background: rgba(var(--gold-rgb),.25) !important;
    border-color: rgba(var(--gold-rgb),.55) !important;
    transform: translateY(-1px);
  }
}

/* Mobile-first modern header layout (...991px) */
@media (max-width: 991px) {
  body .nav-inner {
    padding: 1.3rem 0 !important;
    gap: 1.4rem !important;
  }
  body .brand {
    gap: 1.2rem !important;
    max-width: calc(100% - 6.2rem);
    align-items: center !important;
    text-decoration: none !important;
    transition: transform .3s ease;
  }
  body .brand:active { transform: scale(.97); }
  body .brand-logo {
    height: 5.6rem !important;
    width: auto;
    flex-shrink: 0;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  body .brand:hover .brand-logo {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  }
  body .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
    flex: 1;
  }
  body .brand-name {
    font-family: 'Playfair Display', 'Trirong', Georgia, serif !important;
    font-size: clamp(1.35rem, 3.8vw, 1.95rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-wrap: balance !important;
    display: block !important;
    background: var(--primary-deeper) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  /* Hide school motto on mobile — scoped to header only */
  body .brand-tagline {
    display: none !important;
  }
  body .hamburger-btn {
    width: 5rem !important;
    height: 5rem !important;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--green-700) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(15,61,36,.30) !important;
    transition: all .3s ease;
  }
  body .hamburger-btn:hover {
    background: var(--green-700) !important;
    box-shadow: 0 6px 20px rgba(15,61,36,.40) !important;
    transform: translateY(-2px);
  }
  body .hamburger-btn:active {
    background: #0c3320 !important;
    transform: scale(.95);
    box-shadow: 0 2px 8px rgba(15,61,36,.25) !important;
  }
}

/* Tablet (...767px) */
@media (max-width: 767px) {
  body .nav-inner { padding: 1.2rem 0 !important; gap: 1.1rem !important; }
  body .brand { gap: 1.1rem !important; max-width: calc(100% - 5.8rem); }
  body .brand-logo { height: 5.2rem !important; border-radius: 13px; }
  body .brand-name {
    font-family: 'Playfair Display', 'Trirong', Georgia, serif !important;
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-wrap: balance !important;
  }
  body .brand-tagline {
    display: none !important;
  }
  body .hamburger-btn { width: 4.8rem !important; height: 4.8rem !important; }
}

/* Small phones (...480px) */
@media (max-width: 480px) {
  body .nav-inner { padding: 1.1rem 0 !important; }
  body .brand { gap: 1rem !important; max-width: calc(100% - 5.2rem); }
  body .brand-logo { height: 4.8rem !important; border-radius: 12px; }
  body .brand-name {
    font-family: 'Playfair Display', 'Trirong', Georgia, serif !important;
    font-size: clamp(1.15rem, 4.5vw, 1.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-wrap: balance !important;
  }
  body .brand-tagline {
    display: none !important;
  }
  body .hamburger-btn { width: 4.4rem !important; height: 4.4rem !important; border-radius: 12px; }
}

/* Tiny phones (...380px) */
@media (max-width: 380px) {
  body .nav-inner { padding: 1rem 0 !important; }
  body .brand { gap: .85rem !important; max-width: calc(100% - 4.8rem); }
  body .brand-name {
    font-family: 'Playfair Display', 'Trirong', Georgia, serif !important;
    font-size: clamp(1.05rem, 4.8vw, 1.45rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -.012em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-wrap: balance !important;
  }
  body .brand-tagline {
    display: none !important;
  }
  body .brand-logo { height: 4.4rem !important; border-radius: 11px; }
  body .hamburger-btn { width: 4.2rem !important; height: 4.2rem !important; }
}

/* ...
   MOBILE SIDEBAR ... fix logo white box & modern styling
   ... */
body .mobile-sidebar .sidebar-top {
  background: #f8faf8 !important;
  border-bottom: 1px solid rgba(15,61,36,.08) !important;
  padding: 2rem 2.4rem !important;
}
body .mobile-sidebar .sidebar-brand img {
  filter: none !important;
  -webkit-filter: none !important;
  height: 5rem !important;
  width: auto !important;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
body .mobile-sidebar .sidebar-close-btn {
  background: rgba(15,61,36,.08) !important;
  color: var(--green-700) !important;
  border-radius: 10px !important;
  width: 4rem !important;
  height: 4rem !important;
  font-size: 1.6rem !important;
  transition: all .3s ease;
}
body .mobile-sidebar .sidebar-close-btn:hover {
  background: rgba(15,61,36,.15) !important;
}

/* ...
   HOMEPAGE SECTIONS ... match base container width
   ... */
/* Remove max-width overrides ... use base .container (1240px) */
/* Remove padding overrides ... use base .container (2.4rem) */

/* ... Hero: full-width, balanced padding (symmetric) ... */
.hp-hero {
  padding: 11rem 0 4rem !important;
  min-height: auto !important;
  overflow: hidden; /* clip decor cards to hero bounds */
}

/* Global: prevent horizontal overflow on small screens */
html, body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 900px) {
  body > * { max-width: 100vw; overflow-x: hidden; }
}
.hp-hero .container {
  max-width: 1240px !important;
}

/* ... Two-column desktop: text starts at left edge, mock card fills right side ... */
.hp-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  gap: clamp(1rem, 2vw, 2.5rem) !important;
  align-items: center !important;
  position: relative;
  z-index: 3;
  width: 100%;
}
.hp-hero-content {
  padding: 0 !important;
  text-align: left;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hp-hero-side {
  display: flex; justify-content: center; align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
}

/* ... School name: big, bold ... */
.hp-hero h1 {
  font-size: clamp(2.6rem, 4vw, 4rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 1.2rem !important;
  text-shadow: 0 4px 28px rgba(0,0,0,.30) !important;
  display: flex; flex-direction: column; gap: .2rem;
}
.hp-hero-school {
  font-family: 'Poppins', 'Trirong', Georgia, serif;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  font-size: 1em;
  line-height: 1.05;
}
.hp-hero-motto {
  font-family: 'Trirong', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: .45em;
  letter-spacing: .01em;
  background: var(--gold-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  display: inline-block;
  margin-top: 4px;
}

/* ... Eyebrow badge ... */
.hp-hero-eyebrow {
  font-size: 1.05rem !important;
  padding: .5rem 1.2rem !important;
  margin-bottom: 1.4rem !important;
}

/* ... Description ... */
.hp-hero-tag {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 1.35rem !important;
  line-height: 1.65 !important;
  opacity: .9;
  max-width: 100%;
  margin: 0 0 2rem !important;
}

.hp-hero-content{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important; }
.hp-hero-content .hp-hero-eyebrow, .hp-hero-content h1, .hp-hero-content .hp-hero-tag{ align-self:flex-start !important; text-align:left !important; }
.hp-hero-cta {
  gap: .9rem !important;
  margin-bottom: 2.2rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
}
.hp-hero-cta .hp-btn {
  padding: 1.1rem 2rem !important;
  font-size: 1.25rem !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.hp-hero-trust {
  margin: 2rem 0 0 !important;
  padding: 1.8rem 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  justify-content: center !important;
  justify-items: center !important;
}
.hp-trust-item {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 1.2rem 1.1rem !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex !important; flex-direction: column; align-items: center !important; gap: .6rem;
  transition: all .25s;
  text-align: center !important; justify-content:center !important; width:100% !important;
  min-width: 0;
  overflow: hidden;
}
.hp-trust-item:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: translateY(-2px);
}
.hp-trust-item i {
  font-size: 1.6rem !important;
  color: var(--green-300) !important;
  background: rgba(var(--green-300-rgb),.14) !important;
  width: 3.4rem !important; height: 3.4rem !important;
  border-radius: 12px !important;
  display: flex !important; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hp-trust-item div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; overflow-wrap: break-word; word-break: break-word; align-items:center !important; text-align:center !important; }
.hp-trust-item strong {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hp-trust-item span {
  font-size: 1rem !important;
  color: rgba(255,255,255,.62) !important;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ...
   MERGED MOCK CARD ... image slider inside 3D card stack
   (mirrors .stpl-hero-mock from select_template.php)
   ... */
.hp-hero-mock {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  perspective: 1400px;
  transform-style: preserve-3d;
  padding: 4rem 0 2rem;
  overflow: visible; /* keep decor cards within section bounds */
}

/* Decorative background ID card 1 (top-right) */
.hp-mock-decor {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 24px 50px rgba(0,0,0,.30), 0 6px 14px rgba(0,0,0,.16);
}
.hp-mock-decor--1 {
  top: 4%;
  right: 4%;
  width: 48%;
  aspect-ratio: 204 / 323;
  background: var(--green-700);
  z-index: 1;
  transform: rotate(7deg);
  animation: hpMockDecor1 7s ease-in-out infinite;
}
.hp-mock-decor--1 .hp-mock-decor-inner {
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  padding: 1rem;
}
.hp-mock-decor--1 .hp-mock-decor-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.hp-mock-decor--1 .hp-mock-decor-photo {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--green-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800; color: #fff;
  margin-top: 1rem;
}
.hp-mock-decor--1 .hp-mock-decor-name { font-size: .85rem; font-weight: 800; margin-top: .4rem; text-align: center; }
.hp-mock-decor--1 .hp-mock-decor-meta { font-size: .7rem; opacity: .8; margin-top: .2rem; text-align: center; }
@keyframes hpMockDecor1 { 0%,100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-10px); } }

/* Decorative background ID card 2 (bottom-left) */
.hp-mock-decor--2 {
  bottom: -2%;
  left: 4%;
  width: 42%;
  aspect-ratio: 204 / 323;
  background: #1a1d21;
  z-index: 1;
  transform: rotate(-12deg);
  animation: hpMockDecor2 9s ease-in-out infinite;
}
.hp-mock-decor--2 .hp-mock-decor-inner {
  color: #fff;
  height: 100%;
  padding: 1rem;
  display: flex; flex-direction: column;
}
.hp-mock-decor--2 .hp-mock-decor-bar {
  display: flex; align-items: center; gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: .6rem;
}
.hp-mock-decor--2 .hp-mock-decor-row {
  display: flex; justify-content: space-between;
  font-size: .75rem; padding: .25rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hp-mock-decor--2 .hp-mock-decor-row:last-child { border-bottom: 0; }
.hp-mock-decor--2 .hp-mock-decor-row strong { font-weight: 800; }
@keyframes hpMockDecor2 { 0%,100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-14deg) translateY(-8px); } }

/* Shared dot for decor cards */
.hp-mock-decor-dot {
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--green-300);
  flex-shrink: 0;
}
.hp-mock-decor--1 .hp-mock-decor-dot { background: var(--green-300); }
.hp-mock-decor--2 .hp-mock-decor-dot { background: var(--green-300); }
.hp-mock-decor-txt { font-size: .7rem; font-weight: 800; letter-spacing: .04em; opacity: .9; }

/* LIVE stage ... image slider card in front */
.hp-mock-stage {
  position: relative;
  z-index: 5;
  width: 70%;
  margin: 0 auto;
  aspect-ratio: 204 / 323;
  transform: rotate(-3deg);
  transform-style: preserve-3d;
  animation: hpMockMain 5s ease-in-out infinite;
}
@keyframes hpMockMain { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }

.hp-mock-card-live {
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 22px 50px rgba(0,0,0,.35),
    0 6px 16px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.8);
  display: flex; flex-direction: column;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hp-mock-card-live.switch-next { animation: hpMockSwitch .55s cubic-bezier(.4,0,.2,1); }
.hp-mock-card-live.switch-prev { animation: hpMockSwitchRev .55s cubic-bezier(.4,0,.2,1); }
@keyframes hpMockSwitch { 0% { transform: scale(1); } 50% { transform: scale(.96) translateX(-6px); } 100% { transform: scale(1); } }
@keyframes hpMockSwitchRev { 0% { transform: scale(1); } 50% { transform: scale(.96) translateX(6px); } 100% { transform: scale(1); } }

/* Photo area: stacked images with crossfade */
.hp-mock-card-photo {
  position: relative;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--primary-dark);
}
.hp-mock-card-photo-img {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .6s ease, transform 1.2s ease;
  pointer-events: none;
}
.hp-mock-card-photo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hp-mock-card-photo-img.is-active {
  opacity: 1;
  transform: scale(1);
}
.hp-mock-card-photo-img.enter-next { animation: hpMockImgNext .7s ease forwards; }
.hp-mock-card-photo-img.enter-prev { animation: hpMockImgPrev .7s ease forwards; }
@keyframes hpMockImgNext {
  0% { opacity: 0; transform: translateX(40px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hpMockImgPrev {
  0% { opacity: 0; transform: translateX(-40px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.hp-mock-card-photo-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
}

/* Body area: title, meta, stats */
.hp-mock-card-body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: .9rem 1rem 1rem;
  color: #1a1d21;
  background: #fff;
  min-height: 0;
}
.hp-mock-card-bar {
  display: flex; align-items: center; gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: .7rem;
}
.hp-mock-card-dot {
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--primary-light);
  flex-shrink: 0;
}
.hp-mock-card-txt {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: var(--primary-light);
}
.hp-mock-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a1d21;
  line-height: 1.2;
  transition: opacity .25s ease;
}
.hp-mock-card-name.flash { opacity: 0; }
.hp-mock-card-meta {
  font-size: .78rem;
  color: #6c737a;
  margin-top: .25rem;
  line-height: 1.3;
  flex: 1;
}
.hp-mock-card-stats {
  display: flex; gap: .5rem;
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.hp-mock-card-stats > div {
  flex: 1; min-width: 0;
  text-align: center;
  display: flex; flex-direction: column;
  gap: .1rem;
}
.hp-mock-card-stats strong {
  font-size: .9rem; font-weight: 800; color: var(--primary-light); line-height: 1.1;
}
.hp-mock-card-stats span {
  font-size: .6rem; color: #6c737a; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Caption: current moment name */
.hp-mock-meta {
  position: relative;
  z-index: 6;
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  color: #fff;
  text-align: center;
}
.hp-mock-meta-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 3.6rem; height: 2.6rem;
  padding: 0 .7rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hp-mock-meta-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Dots */
.hp-mock-dots {
  position: relative;
  z-index: 6;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.hp-mock-dots button {
  width: .65rem; height: .65rem;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.28);
  padding: 0;
  cursor: pointer;
  transition: all .25s ease;
}
.hp-mock-dots button:hover { background: rgba(255,255,255,.55); transform: scale(1.2); }
.hp-mock-dots button.is-active {
  width: 2rem;
  border-radius: 999px;
  background: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(255,217,138,.25);
}

/* ... Large desktops ... */
@media (min-width: 1400px) {
  .hp-hero .container { max-width: 1240px !important; }
  .hp-hero-grid { gap: 4rem !important; }
  .hp-hero-mock { max-width: 36rem; }
  .hp-hero h1 { font-size: clamp(3rem, 4.2vw, 4.6rem) !important; }
}

/* ... Medium screens ... */
@media (max-width: 1100px) {
  .hp-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }
  .hp-hero h1 { font-size: clamp(2.4rem, 4vw, 3.4rem) !important; }
  .hp-hero-mock { max-width: 28rem; }
}

/* ... Tablet portrait & mobile ... */
@media (max-width: 900px) {
  .hp-hero { padding: 10rem 0 4rem !important; }
  .hp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    justify-items: center !important;
  }
  .hp-hero-content {
    text-align: left;
    max-width: 100%;
    width: 100%;
    margin: 0;
    align-items: stretch !important;
  }
  .hp-hero h1 { align-items: flex-start; }
  .hp-hero-cta { justify-content: flex-start !important; }
  .hp-hero-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
    max-width: 100%;
  }
  .hp-hero-side { justify-content: center !important; }
  .hp-hero-mock { max-width: 26rem; margin: 0 auto; }
}

/* ... Mobile ... */
@media (max-width: 640px) {
  .hp-hero {
    padding: 9rem 0 4rem !important;
    min-height: auto !important;
  }
  .hp-hero h1 { font-size: clamp(3.4rem, 11vw, 5rem) !important; line-height:.96 !important; letter-spacing:-.045em !important; text-wrap:balance; }
  .hp-section-title { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }
  .hp-section { padding: 5rem 0 !important; }
  .hp-hero-motto { font-size: clamp(1.7rem, 4.8vw, 2.4rem) !important; letter-spacing:.01em !important; line-height:1.15 !important; }
  .hp-hero-tag { font-size: 1.65rem !important; line-height:1.65 !important; }
  .hp-hero-cta {
    flex-direction: row !important;
    gap: .7rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .hp-hero-cta .hp-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: .95rem .9rem !important;
    font-size: 1.05rem !important;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }
  .hp-hero-cta .hp-btn i { font-size: 1.1rem !important; }
  .hp-hero-eyebrow { font-size: 1.15rem !important; padding: .65rem 1.4rem !important; letter-spacing:.16em !important; }
  .hp-hero-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    margin: 1.5rem 0 0 !important;
    padding-top: 1.4rem !important;
    width: 100% !important; max-width:100% !important;
    justify-content:center !important; justify-items:center !important; align-self:stretch !important;
  }
  .hp-trust-item {
    flex-direction: column !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .8rem .7rem !important;
    text-align: center !important; justify-content:center !important;
  }
  .hp-trust-item i { width: 2.4rem !important; height: 2.4rem !important; font-size: 1.1rem !important; flex-shrink: 0; }
  .hp-trust-item strong { font-size: .95rem !important; line-height: 1.15; }
  .hp-trust-item span { font-size: .75rem !important; line-height: 1.2; }
  .hp-hero-mock { max-width: 22rem; padding: 4rem 0 2rem; }
  .hp-mock-decor--1 { width: 52%; right: -4%; }
  .hp-mock-decor--2 { width: 44%; left: -2%; }
  .hp-mock-card-name { font-size: 1rem; }
  .hp-mock-card-meta { font-size: .72rem; }
  .hp-mock-card-stats strong { font-size: .8rem; }
  .hp-mock-card-stats span { font-size: .55rem; }
  .hp-mock-meta-name { font-size: 1.1rem; }
  .hp-mock-meta-num { font-size: 1rem; min-width: 3rem; height: 2.2rem; }
}

@media (max-width: 420px) {
  .hp-hero h1 { font-size: clamp(3.2rem, 13vw, 5rem) !important; line-height:.96 !important; }
  .hp-hero-mock { max-width: 19rem; }
  .hp-hero-cta .hp-btn { padding: .8rem .6rem !important; font-size: .9rem !important; }
  .hp-hero-cta .hp-btn i { font-size: 1rem; }
  .hp-trust-item i { width: 2.1rem !important; height: 2.1rem !important; font-size: 1rem; }
  .hp-trust-item strong { font-size: .85rem; }
  .hp-trust-item span { font-size: .68rem; }
}

/* =====================================================
   SECTION 95: MESSAGING MODALS (parent_messages, teacher_messages)
   Centered, brand-green modal with polished form fields.
   Works with both inline style="display:block" and class-based toggles.
   ===================================================== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2rem 1rem;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
}
.modal[style*="display: block"],
.modal[style*="display:block"],
.modal.is-open {
  display: flex !important;
}
.modal .modal-content {
  background: var(--white);
  width: 100%;
  max-width: 560px;
  margin: 4rem auto;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: modalPop .25s cubic-bezier(.16, 1, .3, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 0;
  max-height: none;
  position: relative;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(-20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--primary);
  color: var(--white);
  border: 0;
  margin: 0;
}
.modal .modal-header h3 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white);
  padding: 0;
  border: 0;
}
.modal .modal-header .close {
  background: rgba(255, 255, 255, .15);
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.modal .modal-header .close:hover { background: rgba(255, 255, 255, .3); }

#composeModal form { padding: 1.5rem; }
#composeModal .form-group { margin-bottom: 1.1rem; }
#composeModal label {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gray-700, #334155);
  margin-bottom: .4rem;
}
#composeModal .form-control {
  width: 100%;
  padding: .65rem .85rem;
  font-size: 1.45rem;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--gray-50, #f8fafc);
  color: var(--gray-900, #0f172a);
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-family: inherit;
  box-sizing: border-box;
}
#composeModal .form-control:focus {
  outline: 0;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}
#composeModal textarea.form-control { min-height: 140px; resize: vertical; line-height: 1.5; }
#composeModal input[type="file"].form-control { padding: .55rem; cursor: pointer; }
#composeModal small { display: block; margin-top: .35rem; color: var(--gray-600, #64748b); font-size: 1.25rem; }
#composeModal button[type="submit"] {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--primary);
  color: var(--white);
  border: 0;
  border-radius: 8px;
  font-size: 1.45rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .1s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3);
  margin-top: .5rem;
}
#composeModal button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--primary-rgb), .4); }
#composeModal button[type="submit"]:active { transform: translateY(0); }

#viewMessageModal .modal-content { max-width: 640px; }
#viewMessageModal #messageViewContent { padding: 0; }

@media (max-width: 600px) {
  .modal { padding: 1rem .5rem; }
  .modal .modal-content { margin: 1rem auto; }
  .modal .modal-header { padding: 1rem 1.1rem; }
  .modal .modal-header h3 { font-size: 1.5rem; }
  #composeModal form { padding: 1.1rem; }
}

/* =====================================================
   XX. LEGACY STYLES ... REMOVED (replaced by beautiful modern styles below)
   ===================================================== */

/* =====================================================
   NEW FEATURES ... BATCH 1: VISITOR SECURITY
   Beautiful, modern styling for admin_visitors.php
   - Hero check-in card with photo capture
   - On-site visitors table with avatar
   - Today's log table
   - Beautiful badge & scanner modals (no overflow scroll)
   - Toast notifications
   ===================================================== */

/* ---- Page wrapper ---- */
.vm-page {
  background: var(--bg);
  padding: 3rem 0 6rem;
  min-height: 70vh;
}

/* ---- Hero summary strip ---- */
.vm-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.vm-summary-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2.4rem 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: all var(--t-slow);
  position: relative;
  overflow: hidden;
}
.vm-summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--primary);
  transition: width var(--t-slow);
}
.vm-summary-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.vm-summary-card:hover::before { width: 8px; }
.vm-summary-card.vm-sc-onsite::before { background: var(--primary); }
.vm-summary-card.vm-sc-today::before  { background: var(--amber-600); }
.vm-summary-card.vm-sc-checkouts::before { background: var(--green-500); }
.vm-summary-icon {
  width: 6.2rem; height: 6.2rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  flex-shrink: 0;
  background: var(--green-100);
  color: var(--primary);
  transition: all var(--t-base);
}
.vm-summary-card.vm-sc-today .vm-summary-icon { background: var(--amber-100); color: var(--amber-700); }
.vm-summary-card.vm-sc-checkouts .vm-summary-icon { background: var(--green-50); color: var(--green-700); }
.vm-summary-card:hover .vm-summary-icon { transform: scale(1.08) rotate(-4deg); }
.vm-summary-text { min-width: 0; }
.vm-summary-text small {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .4rem;
}
.vm-summary-text h3 {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1;
  letter-spacing: -.02em;
}

/* ---- Check-in hero card ---- */
.vm-checkin-card {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: 3rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--primary);
}
.vm-checkin-card::before {
  content: '';
  position: absolute;
  top: -8rem; right: -8rem;
  width: 26rem; height: 26rem;
  border-radius: 50%;
  background: var(--green-50);
  pointer-events: none;
}
.vm-checkin-card::after {
  content: '';
  position: absolute;
  bottom: -6rem; left: -6rem;
  width: 20rem; height: 20rem;
  border-radius: 50%;
  background: var(--amber-100);
  opacity: .35;
  pointer-events: none;
}
.vm-checkin-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 1;
}
.vm-checkin-icon {
  width: 5.4rem; height: 5.4rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-size: 2.2rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--primary-glow);
}
.vm-checkin-title {
  flex: 1;
  min-width: 0;
}
.vm-checkin-title h3 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.vm-checkin-title p {
  font-size: 1.4rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Form grid (check-in) ---- */
.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1.8rem;
  position: relative;
  z-index: 1;
}
.vm-field { min-width: 0; }
.vm-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: .6rem;
  letter-spacing: .01em;
}
.vm-field label::after {
  content: '';
}
.vm-field .form-control { height: 5rem; font-size: 1.5rem; }

/* ---- Photo capture row ---- */
.vm-photo-row {
  margin-top: 2.2rem;
  padding: 2rem;
  background: var(--gray-50);
  border-radius: var(--r-lg);
  border: 2px dashed var(--border);
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 2.4rem;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: all var(--t-base);
}
.vm-photo-row:hover { border-color: var(--primary); background: var(--green-50); }
.vm-photo-box {
  width: 14rem; height: 14rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.vm-photo-box video,
.vm-photo-box img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vm-photo-box #vm-photo-placeholder {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem;
}
.vm-photo-box #vm-photo-placeholder i { font-size: 2.6rem; display: block; margin-bottom: .6rem; color: var(--text-muted); }
.vm-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.vm-photo-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 1.1rem 1.8rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  border: 2px solid var(--primary);
  background: var(--primary-mist);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(var(--primary-rgb),.08);
}
.vm-photo-actions .btn:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--primary-glow);
}
.vm-photo-actions .btn#vm-snap-btn {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.vm-photo-actions .btn#vm-snap-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.vm-photo-actions .btn#vm-retake-btn {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.vm-photo-actions .btn#vm-retake-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.vm-photo-actions .btn > input[type="file"] { color: inherit; }

/* ---- Check-in button row ---- */
.vm-checkin-actions {
  margin-top: 2.2rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.vm-btn-checkin {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 3.4rem;
  font-size: 1.55rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  box-shadow: 0 6px 20px var(--primary-glow);
}
.vm-btn-checkin:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--primary-glow);
}
.vm-btn-checkin:disabled { opacity: .7; cursor: not-allowed; }
.vm-btn-checkin i { font-size: 1.4rem; }

/* ---- Visitors panel (table) ---- */
.vm-panel {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  margin-bottom: 3rem;
  overflow: hidden;
}
.vm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 2rem 2.6rem;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 1;
}
.vm-panel-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
}
.vm-panel-title {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.vm-panel-title i {
  width: 4rem; height: 4rem;
  border-radius: var(--r-sm);
  background: var(--green-100);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.vm-panel-count {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.1rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-left: .8rem;
}
.vm-panel-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.vm-btn-scan {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--white);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
}
.vm-btn-scan:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow);
}

/* ---- Modern table ---- */
.vm-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.vm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.vm-table thead th {
  background: var(--gray-50);
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1.4rem 1.6rem;
  text-align: left;
  border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
.vm-table tbody td {
  padding: 1.4rem 1.6rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.vm-table tbody tr {
  transition: background var(--t-fast);
}
.vm-table tbody tr:hover { background: var(--green-50); }
.vm-table tbody tr:last-child td { border-bottom: none; }
.vm-table tbody td strong { color: var(--text); font-weight: 700; }
.vm-table tbody td small { color: var(--text-muted); font-size: 1.2rem; }

.vm-avatar {
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--green-100);
  transition: all var(--t-base);
}
.vm-table tbody tr:hover .vm-avatar { border-color: var(--primary); transform: scale(1.06); }

.vm-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem;
  background: var(--green-50);
  color: var(--primary);
  border: 1px solid var(--green-200);
  border-radius: var(--r-full);
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.vm-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.2rem;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vm-status::before {
  content: '';
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: currentColor;
}
.vm-status-onsite {
  background: var(--green-100);
  color: var(--green-ink);
}
.vm-status-left {
  background: var(--gray-100);
  color: var(--gray-700);
}

.vm-btn-checkout {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.4rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--white);
  color: #b91c1c;
  border: 2px solid #fecaca;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.vm-btn-checkout:hover {
  background: #b91c1c;
  color: var(--white);
  border-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(185, 28, 28, .25);
}

.vm-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-muted);
}
.vm-empty i {
  font-size: 4.4rem;
  display: block;
  margin-bottom: 1.2rem;
  color: var(--gray-300);
}
.vm-empty p { font-size: 1.4rem; color: var(--text-muted); margin: 0; }

/* ---- Overlay & beautiful modals (no overflow scroll) ---- */
.vm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--primary-deeper-rgb), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: vmFadeIn .25s ease;
}
@keyframes vmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vm-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: vmSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  border-top: 5px solid var(--primary);
}
.vm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.2rem 2.6rem;
  background: var(--primary);
  color: var(--white);
  position: relative;
}
.vm-modal-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.vm-modal-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vm-modal-head h3 i {
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.vm-modal-close {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.vm-modal-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.vm-modal-body {
  padding: 2.4rem 2.6rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.vm-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.6rem 2.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.vm-modal-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
}
.vm-modal-foot .btn:hover { border-color: var(--gray-500); }

/* ---- Badge modal: visitor ID card ---- */
.vm-badge-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 380px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: vmSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  text-align: center;
}
.vm-badge-head {
  padding: 2.6rem 2rem 2rem;
  background: var(--primary);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.vm-badge-head::before {
  content: '';
  position: absolute;
  top: -6rem; right: -6rem;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}
.vm-badge-head::after {
  content: '';
  position: absolute;
  bottom: -4rem; left: -4rem;
  width: 14rem; height: 14rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.vm-badge-icon {
  width: 6rem; height: 6rem;
  margin: 0 auto 1.2rem;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  position: relative;
  z-index: 1;
}
.vm-badge-head h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 .3rem;
  position: relative;
  z-index: 1;
  letter-spacing: -.01em;
}
.vm-badge-sub {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, .82);
  position: relative;
  z-index: 1;
  margin: 0;
}
.vm-badge-body {
  padding: 2.4rem 2rem 1rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.vm-badge-name {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .4rem;
  line-height: 1.3;
}
.vm-badge-visit {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin: 0 0 1.6rem;
}
.vm-badge-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem;
  background: var(--white);
  border: 2px dashed var(--green-200);
  border-radius: var(--r-md);
  margin-bottom: 1.2rem;
}
.vm-badge-qr img,
.vm-badge-qr canvas { display: block; max-width: 100%; height: auto; }
.vm-badge-hint {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}
.vm-badge-foot {
  padding: 1.4rem 2rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-shrink: 0;
}
.vm-badge-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.vm-badge-foot .btn:hover { border-color: var(--gray-500); }
.vm-badge-foot .btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.vm-badge-foot .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ---- Scanner modal ---- */
.vm-scan-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: vmSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
}
.vm-scan-modal .vm-modal-body { padding: 1.6rem; }
.vm-scan-modal #vm-scan-region {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  min-height: 240px;
}

/* ---- Toast notification ---- */
#vm-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  padding: 1.4rem 2.2rem;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  max-width: 420px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: vmToastIn .4s cubic-bezier(.34, 1.56, .64, 1);
  border-left: 5px solid rgba(255, 255, 255, .4);
}
@keyframes vmToastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
#vm-toast::before {
  font-family: 'FontAwesome';
  font-size: 1.4rem;
}
#vm-toast[style*="background: rgb(16, 185, 65)"]::before,
#vm-toast[style*="background:#10b981"]::before { content: '\f00c'; }
#vm-toast[style*="background: rgb(239, 68, 68)"]::before,
#vm-toast[style*="background:#ef4444"]::before { content: '\f071'; }

/* ---- Visitor Security responsive ---- */
@media (max-width: 991px) {
  .vm-summary { grid-template-columns: 1fr; gap: 1.4rem; }
  .vm-summary-card { padding: 2rem; }
  .vm-summary-text h3 { font-size: 2.6rem; }
  .vm-photo-row { grid-template-columns: 1fr; }
  .vm-photo-box { margin: 0 auto; }
}
@media (max-width: 767px) {
  .vm-checkin-card { padding: 2rem 1.6rem; }
  .vm-checkin-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-photo-actions .btn { flex: 1 1 calc(50% - .5rem); justify-content: center; }
  .vm-checkin-actions { flex-direction: column; }
  .vm-btn-checkin { width: 100%; justify-content: center; }
  .vm-panel-head { flex-direction: column; align-items: stretch; }
  .vm-panel-actions { width: 100%; }
  .vm-btn-scan { width: 100%; justify-content: center; }
  .vm-table thead th, .vm-table tbody td { padding: 1rem 1.2rem; font-size: 1.25rem; }
  .vm-modal { max-width: 95vw; }
  .vm-badge-modal { max-width: 95vw; }
}

/* =====================================================
   NEW FEATURES ... BATCH 2: PTA GOVERNANCE & TRANSPARENCY
   Beautiful styling for admin_pta.php & pta_portal.php
   - Summary cards (Total Raised / Spent / Balance)
   - Tabs navigation
   - Executive member cards
   - Election cards with candidate cards (winner highlight)
   - Minutes & Ledger tables
   - All modals (executive, election, candidate, minutes, ledger, vote)
   - Toast notifications
   ===================================================== */

/* ---- Page wrapper ---- */
.pta-page {
  background: var(--bg);
  padding: 3rem 0 6rem;
  min-height: 70vh;
}
.pta-container{ max-width:118rem; margin:0 auto; padding:0 2.4rem; }
@media (max-width:768px){ .pta-container{ padding:0 1.4rem; } }

/* ---- Summary cards (3 columns) ---- */
.pta-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.pta-summary-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2.4rem 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: all var(--t-slow);
  position: relative;
  overflow: hidden;
  color: var(--text);
}
.pta-summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--primary);
  transition: width var(--t-slow);
}
.pta-summary-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pta-summary-card:hover::before { width: 8px; }
.pta-summary-card.pta-sc-green::before  { background: var(--green-600); }
.pta-summary-card.pta-sc-red::before    { background: #b91c1c; }
.pta-summary-card.pta-sc-blue::before   { background: var(--primary); }

.pta-summary-card i {
  width: 6.2rem; height: 6.2rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  flex-shrink: 0;
  background: var(--green-100);
  color: var(--green-700);
  transition: all var(--t-base);
}
.pta-summary-card.pta-sc-red i { background: #fee2e2; color: #b91c1c; }
.pta-summary-card.pta-sc-blue i { background: var(--green-100); color: var(--primary); }
.pta-summary-card:hover i { transform: scale(1.08) rotate(-4deg); }
.pta-summary-card > div { min-width: 0; }
.pta-summary-card small {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .4rem;
}
.pta-summary-card h3 {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1;
  letter-spacing: -.02em;
}

/* ---- Tabs ---- */
.pta-tabs {
  display: flex;
  gap: .6rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: .6rem;
  margin-bottom: 2.4rem;
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
  overflow-x: auto;
}
.pta-tab {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 2rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  white-space: nowrap;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 14rem;
}
.pta-tab i { font-size: 1.3rem; color: var(--text-muted); transition: color var(--t-fast); }
.pta-tab:hover {
  background: var(--green-50);
  color: var(--primary);
}
.pta-tab:hover i { color: var(--primary); }
.pta-tab.active {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 14px var(--primary-glow);
}
.pta-tab.active i { color: var(--white); }

/* ---- Tab panel (wrapper) ---- */
.pta-tab-panel { animation: ptaFadeIn .3s ease; }
@keyframes ptaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Panel (card wrapper) ---- */
.pta-panel {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  margin-bottom: 2.4rem;
  overflow: hidden;
}
.pta-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 2rem 2.6rem;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.pta-panel-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
}
.pta-panel-title {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.pta-panel-title i {
  width: 4rem; height: 4rem;
  border-radius: var(--r-sm);
  background: var(--green-100);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* ---- Add button (panel actions) ---- */
.pta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 2.2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.pta-btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow);
}

/* ---- Executive grid & cards ---- */
.pta-executive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 2rem;
  padding: 2.4rem;
}
.pta-exec-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 3rem 2rem 2.4rem;
  text-align: center;
  transition: all var(--t-slow);
  overflow: hidden;
}
.pta-exec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6rem;
  background: var(--green-50);
  z-index: 0;
}
.pta-exec-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
  z-index: 1;
}
.pta-exec-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
.pta-exec-card:hover::after { transform: scaleX(1); }
.pta-exec-card > * { position: relative; z-index: 1; }
.pta-exec-photo {
  width: 10rem; height: 10rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.4rem;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
  transition: all var(--t-slow);
}
.pta-exec-card:hover .pta-exec-photo { transform: scale(1.08); box-shadow: var(--shadow-lg); }
.pta-exec-card h4 {
  margin: 0 0 .4rem;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.pta-exec-pos {
  display: inline-block;
  padding: .35rem 1.1rem;
  background: var(--green-100);
  color: var(--primary);
  border-radius: var(--r-full);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: .02em;
}
.pta-exec-card small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 1.25rem;
  color: var(--text-muted);
  margin: .3rem 0;
}
.pta-exec-card small i { color: var(--primary); font-size: 1.15rem; }
.pta-exec-bio {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-top: 1.2rem;
  line-height: 1.7;
  text-align: left;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
}
.pta-exec-actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
}
.pta-exec-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
}
.pta-exec-actions .btn:hover { border-color: var(--primary); color: var(--primary); }
.pta-exec-actions .btn.btn-danger:hover { border-color: #b91c1c; color: #b91c1c; }

/* ---- Election card (parent card containing candidates) ---- */
.pta-election-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
  overflow: hidden;
  border-top: 4px solid var(--primary);
}
.pta-election-head {
  padding: 2rem 2.4rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.pta-election-info { flex: 1 1 30rem; min-width: 0; }
.pta-election-info h4 {
  margin: 0 0 .4rem;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.pta-election-info h4 small {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-muted);
}
.pta-election-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.25rem;
  color: var(--text-secondary);
}
.pta-election-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}
.pta-btn-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.4rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.pta-btn-action:hover { border-color: var(--primary); color: var(--primary); }
.pta-btn-action.pta-btn-success { background: var(--green-50); color: var(--green-700); border-color: var(--green-200); }
.pta-btn-action.pta-btn-success:hover { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.pta-btn-action.pta-btn-danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pta-btn-action.pta-btn-danger:hover { background: #b91c1c; color: var(--white); border-color: #b91c1c; }

/* ---- Status pill ---- */
.pta-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.2rem;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pta-status::before {
  content: '';
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: currentColor;
}
.pta-status-draft  { background: var(--gray-100); color: var(--gray-700); }
.pta-status-open   { background: var(--green-100); color: var(--green-ink); }
.pta-status-closed { background: #fee2e2; color: #991b1b; }

/* ---- Candidate grid & cards ---- */
.pta-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.6rem;
  padding: 2.4rem;
}
.pta-candidate-card {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  padding: 1.6rem;
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--r-md);
  transition: all var(--t-base);
  position: relative;
}
.pta-candidate-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pta-candidate-card.pta-winner {
  border-color: var(--amber-500);
  background: var(--amber-100);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), .25);
}
.pta-candidate-card.pta-winner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--amber-500);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.pta-candidate-card.pta-my-vote {
  border-color: var(--primary);
  background: var(--green-50);
  box-shadow: 0 8px 24px var(--primary-glow);
}
.pta-candidate-card.pta-my-vote::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.pta-candidate-photo {
  width: 6rem; height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.pta-candidate-info { flex: 1; min-width: 0; }
.pta-candidate-info b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.pta-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--amber-500);
  color: var(--white);
  font-size: 1.05rem;
  padding: .2rem .8rem;
  border-radius: var(--r-full);
  font-weight: 700;
  margin-left: .5rem;
  letter-spacing: .02em;
}
.pta-candidate-manifesto {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-top: .4rem;
  line-height: 1.55;
}
.pta-candidate-votes {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-top: .4rem;
}
.pta-candidate-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  padding: .55rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--green-600);
  color: var(--white);
  border: 2px solid var(--green-600);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.pta-candidate-vote-btn:hover { background: var(--green-700); border-color: var(--green-700); transform: translateY(-2px); }
.pta-my-vote-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  padding: .55rem 1.2rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-sm);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
}

.pta-voted-info {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 1.8rem;
  margin: 0 2.4rem 2rem;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-md);
  color: var(--green-ink);
  font-size: 1.3rem;
  font-weight: 600;
}
.pta-voted-info i { color: var(--primary); font-size: 1.4rem; }

/* ---- Election description ---- */
.pta-election-desc {
  padding: 0 2.4rem 1.6rem;
  font-size: 1.35rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ---- Empty state ---- */
.pta-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-muted);
}
.pta-empty i {
  font-size: 4.4rem;
  display: block;
  margin-bottom: 1.2rem;
  color: var(--gray-300);
}
.pta-empty p { font-size: 1.4rem; color: var(--text-muted); margin: 0; }

/* ---- Modern table (minutes, ledger) ---- */
.pta-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.pta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.pta-table thead th {
  background: var(--gray-50);
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1.4rem 1.6rem;
  text-align: left;
  border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
.pta-table tbody td {
  padding: 1.4rem 1.6rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.pta-table tbody tr { transition: background var(--t-fast); }
.pta-table tbody tr:hover { background: var(--green-50); }
.pta-table tbody tr:last-child td { border-bottom: none; }
.pta-table tbody td strong { color: var(--text); font-weight: 700; }
.pta-table tbody td small { color: var(--text-muted); font-size: 1.2rem; }

.pta-type-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pta-type-income {
  background: var(--green-100);
  color: var(--green-ink);
}
.pta-type-expense {
  background: #fee2e2;
  color: #991b1b;
}
.pta-amount-positive { color: var(--green-600); font-weight: 700; }
.pta-amount-negative { color: #b91c1c; font-weight: 700; }

.pta-transparency-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 2.4rem 1.4rem;
  padding: 1.2rem 1.6rem;
  background: var(--green-50);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-sm);
  color: var(--green-ink);
  font-size: 1.3rem;
  line-height: 1.6;
}
.pta-transparency-note i { color: var(--primary); font-size: 1.4rem; flex-shrink: 0; }

/* ---- Overlay & modals (no overflow scroll) ---- */
.pta-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--primary-deeper-rgb), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: ptaFadeIn .25s ease;
}

.pta-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: ptaSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  border-top: 5px solid var(--primary);
}
@keyframes ptaSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pta-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.2rem 2.6rem;
  background: var(--primary);
  color: var(--white);
  position: relative;
  flex-shrink: 0;
}
.pta-modal-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.pta-modal-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pta-modal-head h3 i {
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.pta-close {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all var(--t-fast);
  flex-shrink: 0;
  cursor: pointer;
}
.pta-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.pta-modal-body {
  padding: 2.4rem 2.6rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.pta-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.6rem 2.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.pta-modal-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.pta-modal-foot .btn:hover { border-color: var(--gray-500); }
.pta-modal-foot .ed_btn.ed_orange { color: var(--white) !important; }

/* ---- Form fields inside modals ---- */
.pta-field { margin-bottom: 1.6rem; }
.pta-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: .6rem;
  letter-spacing: .01em;
}
.pta-field .form-control { height: 5rem; font-size: 1.5rem; }
.pta-field textarea.form-control { height: auto; min-height: 9rem; resize: vertical; line-height: 1.6; }
.pta-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.pta-field-row .pta-field { margin-bottom: 0; }

/* ---- Vote confirmation modal (special centered card) ---- */
.pta-vote-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: ptaSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  text-align: center;
  border-top: 5px solid var(--primary);
}
.pta-vote-body {
  padding: 3rem 2.6rem 2rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.pta-vote-icon {
  width: 7rem; height: 7rem;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  box-shadow: 0 8px 24px var(--primary-glow);
  position: relative;
}
.pta-vote-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed var(--green-300);
  animation: ptaRotate 18s linear infinite;
}
@keyframes ptaRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pta-vote-modal h3 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.pta-vote-candidate {
  padding: 1.4rem 1.8rem;
  background: var(--green-50);
  border-radius: var(--r-md);
  border-left: 4px solid var(--primary);
  margin: 1.4rem 0;
  font-size: 1.4rem;
  color: var(--text);
  line-height: 1.6;
}
.pta-vote-candidate strong { color: var(--primary); font-weight: 700; }
.pta-vote-election {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
  font-style: italic;
}
.pta-vote-warning {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--amber-100);
  color: #92400e;
  border-radius: var(--r-md);
  border-left: 4px solid var(--amber-600);
  margin: 1.6rem 0 0;
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: left;
}
.pta-vote-warning i { color: var(--amber-700); font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.pta-vote-warning strong { display: block; margin-bottom: .2rem; }

.pta-vote-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 1.6rem 2.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.pta-btn-vote-confirm {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 2.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.pta-btn-vote-confirm:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow);
}
.pta-btn-vote-confirm:disabled { opacity: .7; cursor: not-allowed; }
.pta-btn-vote-cancel {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 2.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--white);
  color: var(--gray-700);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.pta-btn-vote-cancel:hover { border-color: var(--gray-500); }

/* ---- Toast notification ---- */
#pta-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  padding: 1.4rem 2.2rem;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  max-width: 420px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: ptaToastIn .4s cubic-bezier(.34, 1.56, .64, 1);
  border-left: 5px solid rgba(255, 255, 255, .4);
}
@keyframes ptaToastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
#pta-toast::before {
  font-family: 'FontAwesome';
  font-size: 1.4rem;
}
#pta-toast[style*="background: rgb(16, 185, 65)"]::before,
#pta-toast[style*="background:#10b981"]::before { content: '\f00c'; }
#pta-toast[style*="background: rgb(239, 68, 68)"]::before,
#pta-toast[style*="background:#ef4444"]::before { content: '\f071'; }

/* ---- PTA responsive ---- */
@media (max-width: 991px) {
  .pta-summary-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .pta-summary-card { padding: 2rem; }
  .pta-summary-card h3 { font-size: 2.4rem; }
  .pta-tab { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .pta-tabs { padding: .4rem; }
  .pta-tab { padding: .9rem 1.2rem; font-size: 1.25rem; min-width: 0; }
  .pta-tab span { display: none; }
  .pta-tab { flex: 1 1 0; }
  .pta-panel-head { flex-direction: column; align-items: stretch; }
  .pta-btn-primary { width: 100%; justify-content: center; }
  .pta-executive-grid { padding: 1.4rem; grid-template-columns: 1fr; }
  .pta-candidate-grid { padding: 1.4rem; grid-template-columns: 1fr; }
  .pta-election-head { flex-direction: column; align-items: stretch; }
  .pta-election-actions { width: 100%; }
  .pta-btn-action { flex: 1; justify-content: center; }
  .pta-table thead th, .pta-table tbody td { padding: 1rem 1.2rem; font-size: 1.25rem; }
  .pta-field-row { grid-template-columns: 1fr; }
  .pta-modal { max-width: 95vw; }
  .pta-vote-modal { max-width: 95vw; }
  .pta-vote-actions { flex-direction: column; }
  .pta-btn-vote-confirm, .pta-btn-vote-cancel { width: 100%; justify-content: center; }
}

/* =====================================================
   NEW FEATURES ... BATCH 3: SCHOOL MARKETPLACE
   Beautiful styling for admin_marketplace.php & marketplace.php
   - Hero panel with category filter
   - Product card grid (image, badges, price, features, add to cart)
   - Modern admin product table
   - Floating cart button
   - Beautiful cart drawer modal
   - Beautiful checkout modal with Paystack info
   - Beautiful product add/edit modal
   - Toast notifications
   ===================================================== */

/* ---- Page wrapper ---- */
.mkt-page {
  background: var(--bg);
  padding: 3rem 0 6rem;
  min-height: 70vh;
}

/* ---- Hero panel (filter row) ---- */
.mkt-hero {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: 2.4rem 3rem;
  margin-bottom: 2.4rem;
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--primary);
}
.mkt-hero::before {
  content: '';
  position: absolute;
  top: -8rem; right: -8rem;
  width: 24rem; height: 24rem;
  border-radius: 50%;
  background: var(--green-50);
  pointer-events: none;
}
.mkt-hero::after {
  content: '';
  position: absolute;
  bottom: -6rem; left: -6rem;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: var(--amber-100);
  opacity: .4;
  pointer-events: none;
}
.mkt-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.mkt-hero-title {
  display: flex; align-items: center; gap: 1.4rem;
}
.mkt-hero-icon {
  width: 5.4rem; height: 5.4rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-size: 2.2rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--primary-glow);
}
.mkt-hero-text h3 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.mkt-hero-text p {
  font-size: 1.4rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Category filter pills ---- */
.mkt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.mkt-filters-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: .4rem;
}
.mkt-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: all var(--t-base);
  white-space: nowrap;
}
.mkt-filter:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--green-50);
  transform: translateY(-2px);
}
.mkt-filter.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--primary-glow);
}

/* ---- Product grid ---- */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: 2.4rem;
}
.mkt-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.mkt-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

/* ---- Product image area ---- */
.mkt-card-img {
  position: relative;
  height: 22rem;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
  pointer-events: none;
}
.mkt-card-img::before {
  content: '\f03e';
  font-family: 'FontAwesome';
  font-size: 4.4rem;
  color: var(--gray-300);
  position: absolute;
}
.mkt-featured-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  background: var(--amber-500);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--r-full);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), .35);
  z-index: 2;
}
.mkt-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.1rem;
  background: rgba(var(--primary-deeper-rgb), .8);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--r-full);
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.mkt-sale-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.1rem;
  background: #b91c1c;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: var(--r-full);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(185, 28, 28, .35);
  z-index: 2;
}

/* ---- Product body ---- */
.mkt-card-body {
  padding: 2rem 1.8rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mkt-card-body h4 {
  margin: 0 0 .8rem;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.35;
  min-height: 4.2rem;
}
.mkt-price-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: .4rem 0 .8rem;
  flex-wrap: wrap;
}
.mkt-price {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--green-600);
  letter-spacing: -.02em;
  line-height: 1;
}
.mkt-old-price {
  font-size: 1.3rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
}
.mkt-condition {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.2rem;
  color: var(--text-muted);
  margin: 0 0 1.2rem;
  flex-wrap: wrap;
}
.mkt-condition span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.mkt-condition i { color: var(--primary); font-size: 1.1rem; }
.mkt-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 1.25rem;
  flex: 1;
}
.mkt-features li {
  padding: .35rem 0 .35rem 1.8rem;
  position: relative;
  color: var(--text-secondary);
  line-height: 1.5;
}
.mkt-features li::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  position: absolute;
  left: 0; top: .4rem;
  color: var(--green-600);
  font-size: 1rem;
  font-weight: 700;
}
.mkt-desc {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  line-height: 1.55;
  flex: 1;
}

/* ---- Card action row ---- */
.mkt-card-actions {
  display: flex;
  gap: .8rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--border);
}
.mkt-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  flex: 1;
  padding: 1.1rem 1.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.mkt-btn-add:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow);
}
.mkt-qty-stepper {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1;
  background: var(--green-50);
  border: 2px solid var(--green-200);
  border-radius: var(--r-sm);
  padding: .4rem;
  justify-content: space-between;
}
.mkt-qty-btn {
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  color: var(--primary);
  border: 1px solid var(--green-200);
  border-radius: var(--r-sm);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-base);
  font-family: var(--font-heading);
}
.mkt-qty-btn:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.mkt-qty-value {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  min-width: 3rem;
  text-align: center;
}
.mkt-btn-remove {
  width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  color: #b91c1c;
  border: 2px solid #fecaca;
  border-radius: var(--r-sm);
  font-size: 1.4rem;
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.mkt-btn-remove:hover {
  background: #b91c1c;
  color: var(--white);
  border-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(185, 28, 28, .25);
}

/* ---- Empty state ---- */
.mkt-empty {
  text-align: center;
  padding: 6rem 2rem;
  color: var(--text-muted);
}
.mkt-empty i {
  font-size: 4.4rem;
  display: block;
  margin-bottom: 1.4rem;
  color: var(--gray-300);
}
.mkt-empty p { font-size: 1.5rem; color: var(--text-muted); margin: 0; }

/* ---- Admin product table (inside mkt-panel) ---- */
.mkt-table-wrap { width: 100%; overflow-x: auto; }
.mkt-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.mkt-admin-table thead th {
  background: var(--gray-50);
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1.4rem 1.6rem;
  text-align: left;
  border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
.mkt-admin-table tbody td {
  padding: 1.4rem 1.6rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.mkt-admin-table tbody tr { transition: background var(--t-fast); }
.mkt-admin-table tbody tr:hover { background: var(--green-50); }
.mkt-admin-table tbody tr:last-child td { border-bottom: none; }
.mkt-admin-table tbody td strong { color: var(--text); font-weight: 700; }
.mkt-admin-table tbody td small { color: var(--text-muted); font-size: 1.2rem; }

.mkt-tbl-avatar {
  width: 4.8rem; height: 4.8rem;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 2px solid var(--green-100);
}
.mkt-tbl-featured {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  padding: .2rem .8rem;
  background: var(--amber-100);
  color: var(--amber-700);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
}
.mkt-tbl-featured i { color: var(--amber-600); font-size: 1rem; }
.mkt-tbl-actions {
  display: flex;
  gap: .6rem;
  white-space: nowrap;
}
.mkt-tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.mkt-tbl-btn:hover { border-color: var(--primary); color: var(--primary); }
.mkt-tbl-btn.mkt-tbl-danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.mkt-tbl-btn.mkt-tbl-danger:hover { background: #b91c1c; color: var(--white); border-color: #b91c1c; }

/* ---- Floating cart button ---- */
.mkt-cart-float {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  width: 6.8rem; height: 6.8rem;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white) !important;
  font-size: 2.4rem;
  z-index: 9990;
  box-shadow: 0 12px 32px var(--primary-glow);
  transition: all var(--t-base);
  text-decoration: none;
  border: 4px solid var(--white);
}
.mkt-cart-float:hover {
  background: var(--primary-dark);
  color: var(--white) !important;
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 16px 40px var(--primary-glow);
}
.mkt-cart-float-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #b91c1c;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  min-width: 2.6rem;
  height: 2.6rem;
  border-radius: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0 .5rem;
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(185, 28, 28, .35);
}

/* ---- Overlay & modals (no overflow scroll on whole modal) ---- */
.mkt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--primary-deeper-rgb), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: mktFadeIn .25s ease;
}
@keyframes mktFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mktSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Generic modal (product add/edit, checkout) ---- */
.mkt-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: mktSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  border-top: 5px solid var(--primary);
}
.mkt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.2rem 2.6rem;
  background: var(--primary);
  color: var(--white);
  position: relative;
  flex-shrink: 0;
}
.mkt-modal-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.mkt-modal-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mkt-modal-head h3 i {
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.mkt-close {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all var(--t-fast);
  flex-shrink: 0;
  cursor: pointer;
  border: none;
}
.mkt-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.mkt-modal-body {
  padding: 2.4rem 2.6rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.mkt-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.6rem 2.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.mkt-modal-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.mkt-modal-foot .btn:hover { border-color: var(--gray-500); }
.mkt-modal-foot .ed_btn.ed_orange { color: var(--white) !important; }

/* ---- Form fields inside modals ---- */
.mkt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.mkt-field-full { grid-column: 1 / -1; }
.mkt-field { min-width: 0; }
.mkt-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: .6rem;
  letter-spacing: .01em;
}
.mkt-field .form-control { height: 5rem; font-size: 1.5rem; }
.mkt-field textarea.form-control { height: auto; min-height: 9rem; resize: vertical; line-height: 1.6; }
.mkt-checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-top: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--green-50);
  border: 2px solid var(--green-200);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
}
.mkt-checkbox input[type="checkbox"] {
  width: 2rem; height: 2rem;
  accent-color: var(--primary);
  margin: 0;
  cursor: pointer;
}
.mkt-photo-preview {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem;
  background: var(--green-50);
  border-radius: var(--r-sm);
  border: 1px dashed var(--green-200);
}
.mkt-photo-preview img {
  width: 7rem; height: 7rem;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.mkt-photo-preview small { color: var(--text-muted); font-size: 1.2rem; }

/* ---- Cart drawer modal ---- */
.mkt-cart-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: mktSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  border-top: 5px solid var(--primary);
}
.mkt-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.2rem 2.6rem;
  background: var(--primary);
  color: var(--white);
  position: relative;
  flex-shrink: 0;
}
.mkt-cart-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.mkt-cart-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mkt-cart-head h3 i {
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.mkt-cart-head h3 #mkt-cart-count {
  background: rgba(255, 255, 255, .22);
  padding: .2rem 1rem;
  border-radius: var(--r-full);
  font-size: 1.4rem;
  margin-left: .4rem;
}
.mkt-cart-body {
  padding: 1.6rem 2.6rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.mkt-cart-item {
  display: grid;
  grid-template-columns: 5.6rem 1fr auto auto 3rem;
  gap: 1.2rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border-light);
}
.mkt-cart-item:last-child { border-bottom: none; }
.mkt-cart-item-img {
  width: 5.6rem; height: 5.6rem;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 2px solid var(--green-100);
}
.mkt-cart-item-info { min-width: 0; }
.mkt-cart-item-info strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.mkt-cart-item-info small {
  display: block;
  font-size: 1.2rem;
  color: var(--text-muted);
}
.mkt-cart-qty {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--green-50);
  border: 2px solid var(--green-200);
  border-radius: var(--r-sm);
  padding: .3rem;
}
.mkt-cart-qty .mkt-qty-btn { width: 3rem; height: 3rem; font-size: 1.2rem; }
.mkt-cart-qty .mkt-qty-value { font-size: 1.4rem; min-width: 2.4rem; }
.mkt-cart-item-subtotal {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}
.mkt-cart-remove {
  width: 3.4rem; height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  color: #b91c1c;
  border: 2px solid #fecaca;
  border-radius: var(--r-sm);
  font-size: 1.4rem;
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.mkt-cart-remove:hover { background: #b91c1c; color: var(--white); border-color: #b91c1c; }
.mkt-cart-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-muted);
}
.mkt-cart-empty i { font-size: 4.4rem; display: block; margin-bottom: 1rem; color: var(--gray-300); }
.mkt-cart-empty p { font-size: 1.4rem; color: var(--text-muted); margin: 0; }
.mkt-cart-foot {
  padding: 2rem 2.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  flex-shrink: 0;
}
.mkt-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.mkt-cart-total strong {
  font-size: 2.4rem;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: -.02em;
}
.mkt-btn-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.4rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--primary);
  color: var(--white) !important;
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  box-shadow: 0 6px 20px var(--primary-glow);
}
.mkt-btn-checkout:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--primary-glow);
}

/* ---- Checkout summary banner ---- */
.mkt-checkout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.8rem;
  background: var(--green-50);
  border-radius: var(--r-md);
  border-left: 4px solid var(--primary);
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
  gap: .8rem;
}
.mkt-checkout-summary strong { color: var(--primary); font-size: 1.5rem; }

.mkt-pay-method {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 1.8rem;
  background: var(--green-50);
  border: 2px solid var(--green-200);
  border-radius: var(--r-md);
}
.mkt-pay-method-icon {
  width: 5rem; height: 5rem;
  background: var(--green-600);
  color: var(--white);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.mkt-pay-method-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-ink);
  margin-bottom: .2rem;
}
.mkt-pay-method-text small {
  display: block;
  font-size: 1.2rem;
  color: var(--green-ink);
  opacity: .8;
}

/* ---- Toast notification ---- */
#mkt-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  padding: 1.4rem 2.2rem;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  max-width: 420px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: mktToastIn .4s cubic-bezier(.34, 1.56, .64, 1);
  border-left: 5px solid rgba(255, 255, 255, .4);
}
@keyframes mktToastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
#mkt-toast::before {
  font-family: 'FontAwesome';
  font-size: 1.4rem;
}
#mkt-toast[style*="background: rgb(16, 185, 65)"]::before,
#mkt-toast[style*="background:#10b981"]::before { content: '\f00c'; }
#mkt-toast[style*="background: rgb(239, 68, 68)"]::before,
#mkt-toast[style*="background:#ef4444"]::before { content: '\f071'; }

/* ---- Marketplace responsive ---- */
@media (max-width: 991px) {
  .mkt-grid { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
  .mkt-hero { padding: 2rem; }
  .mkt-cart-float { width: 6rem; height: 6rem; font-size: 2rem; bottom: 2rem; right: 2rem; }
}
@media (max-width: 767px) {
  .mkt-hero { padding: 1.6rem; }
  .mkt-hero-top { flex-direction: column; align-items: stretch; }
  .mkt-filters { gap: .6rem; }
  .mkt-filter { padding: .65rem 1.2rem; font-size: 1.2rem; }
  .mkt-grid { grid-template-columns: 1fr; }
  .mkt-card-img { height: 18rem; }
  .mkt-card-body { padding: 1.4rem; }
  .mkt-card-body h4 { font-size: 1.5rem; min-height: 0; }
  .mkt-price { font-size: 1.9rem; }
  .mkt-modal { max-width: 95vw; }
  .mkt-cart-modal { max-width: 95vw; }
  .mkt-form-grid { grid-template-columns: 1fr; }
  .mkt-modal-head, .mkt-modal-body, .mkt-modal-foot, .mkt-cart-head, .mkt-cart-body, .mkt-cart-foot { padding-left: 1.6rem; padding-right: 1.6rem; }
  .mkt-cart-item { grid-template-columns: 4.4rem 1fr; row-gap: .8rem; }
  .mkt-cart-item-img { width: 4.4rem; height: 4.4rem; }
  .mkt-cart-item .mkt-cart-qty { grid-column: 1 / -1; justify-self: start; }
  .mkt-cart-item .mkt-cart-item-subtotal { grid-column: 1 / -1; justify-self: end; }
  .mkt-cart-item .mkt-cart-remove { grid-column: 1 / -1; justify-self: end; }
  .mkt-cart-float { width: 5.4rem; height: 5.4rem; font-size: 1.8rem; bottom: 1.4rem; right: 1.4rem; }
}

/* =====================================================
   NEW FEATURES ... BATCH 4: HEALTH MONITORING
   Beautiful styling for admin_health_records.php & parent_health_record.php
   - Class group selector (Pre-Primary, Primary, Junior Sec, Senior Sec)
   - Class chip filter
   - Student table with health flags
   - Health record edit modal
   - Emergency health card modal
   - Parent form for updating health record
   - Print styling for emergency card
   - Toast notifications
   ===================================================== */

/* ---- Page wrapper ---- */
.hm-page {
  background: var(--bg);
  padding: 3rem 0 6rem;
  min-height: 70vh;
}

/* ---- Class group panel (admin) ---- */
.hm-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.hm-group-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: 2.4rem 2.6rem;
  transition: all var(--t-slow);
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--primary);
}
.hm-group-card::before {
  content: '';
  position: absolute;
  top: -6rem; right: -6rem;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: var(--green-50);
  pointer-events: none;
  transition: all var(--t-slow);
}
.hm-group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.hm-group-card:hover::before { transform: scale(1.2); }
.hm-group-card.hm-group-baby::before { background: #fdf2f8; }
.hm-group-card.hm-group-baby { border-top-color: #ec4899; }
.hm-group-card.hm-group-primary::before { background: var(--amber-100); opacity: .5; }
.hm-group-card.hm-group-primary { border-top-color: var(--amber-600); }
.hm-group-card.hm-group-junior::before { background: #e0e7ff; }
.hm-group-card.hm-group-junior { border-top-color: #4f46e5; }
.hm-group-card.hm-group-senior::before { background: var(--green-50); }
.hm-group-card.hm-group-senior { border-top-color: var(--primary); }
.hm-group-card.hm-group-other::before { background: var(--gray-100); }
.hm-group-card.hm-group-other { border-top-color: var(--gray-500); }
.hm-group-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 1;
}
.hm-group-icon {
  width: 5.2rem; height: 5.2rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--green-100);
  color: var(--primary);
  font-size: 2.2rem;
  flex-shrink: 0;
  transition: all var(--t-base);
}
.hm-group-baby .hm-group-icon { background: #fce7f3; color: #be185d; }
.hm-group-primary .hm-group-icon { background: var(--amber-100); color: var(--amber-700); }
.hm-group-junior .hm-group-icon { background: #e0e7ff; color: #4338ca; }
.hm-group-other .hm-group-icon { background: var(--gray-100); color: var(--gray-700); }
.hm-group-card:hover .hm-group-icon { transform: scale(1.08) rotate(-4deg); }
.hm-group-title {
  flex: 1;
  min-width: 0;
}
.hm-group-title h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.hm-group-title p {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin: 0;
}
.hm-class-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  position: relative;
  z-index: 1;
}
.hm-class-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: all var(--t-base);
  white-space: nowrap;
}
.hm-class-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--green-50);
  transform: translateY(-2px);
}
.hm-class-chip.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 4px 14px var(--primary-glow);
}
.hm-group-baby .hm-class-chip.active { background: #ec4899; border-color: #ec4899; box-shadow: 0 4px 14px rgba(236, 72, 153, .3); }
.hm-group-primary .hm-class-chip.active { background: var(--amber-600); border-color: var(--amber-600); box-shadow: 0 4px 14px rgba(var(--accent-rgb), .3); }
.hm-group-junior .hm-class-chip.active { background: #4f46e5; border-color: #4f46e5; box-shadow: 0 4px 14px rgba(79, 70, 229, .3); }
.hm-group-other .hm-class-chip.active { background: var(--gray-700); border-color: var(--gray-700); }

.hm-empty-state {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  text-align: center;
  padding: 5rem 2rem;
  margin-bottom: 2.4rem;
}
.hm-empty-state i {
  font-size: 5rem;
  color: var(--gray-300);
  display: block;
  margin-bottom: 1.4rem;
}
.hm-empty-state p { font-size: 1.5rem; color: var(--text-muted); margin: 0; }
.hm-empty-state a { color: var(--primary); font-weight: 600; }

/* ---- Selected class header (with search) ---- */
.hm-class-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--border-light);
}
.hm-class-header-text h3 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .4rem;
  letter-spacing: -.01em;
}
.hm-class-header-text h3 .hm-class-label { color: var(--primary); }
.hm-class-header-text small {
  font-size: 1.3rem;
  color: var(--text-muted);
}
.hm-search-wrap {
  position: relative;
  width: 32rem;
  max-width: 100%;
}
.hm-search-wrap input {
  width: 100%;
  height: 5rem;
  padding: 1rem 1.6rem 1rem 4.6rem;
  font-size: 1.4rem;
  border: 2px solid var(--border);
  border-radius: var(--r-full);
  background: var(--white);
  transition: all var(--t-base);
}
.hm-search-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
  outline: none;
}
.hm-search-wrap > i {
  position: absolute;
  left: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.5rem;
  pointer-events: none;
}
.hm-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-height: 32rem;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: var(--shadow-xl);
}
.hm-search-item {
  padding: 1rem 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--t-fast);
}
.hm-search-item:hover { background: var(--green-50); }
.hm-search-item img {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hm-search-item-info { min-width: 0; }
.hm-search-item-info strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--text);
  font-weight: 700;
}
.hm-search-item-info small {
  font-size: 1.2rem;
  color: var(--text-muted);
}

/* ---- Student table (health monitoring) ---- */
.hm-table-wrap { width: 100%; overflow-x: auto; }
.hm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.hm-table thead th {
  background: var(--gray-50);
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1.4rem 1.6rem;
  text-align: left;
  border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
.hm-table tbody td {
  padding: 1.4rem 1.6rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.hm-table tbody tr { transition: background var(--t-fast); cursor: pointer; }
.hm-table tbody tr:hover { background: var(--green-50); }
.hm-table tbody tr:last-child td { border-bottom: none; }
.hm-table tbody td strong { color: var(--text); font-weight: 700; }
.hm-table tbody td small { color: var(--text-muted); font-size: 1.2rem; }

.hm-avatar {
  width: 4.8rem; height: 4.8rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--green-100);
  transition: all var(--t-base);
}
.hm-table tbody tr:hover .hm-avatar { border-color: var(--primary); transform: scale(1.06); }

/* Health flag pills */
.hm-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin: .15rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.hm-flag i { font-size: 1.05rem; }
.hm-flag-asthma   { background: var(--amber-100); color: #92400e; }
.hm-flag-asthma i { color: var(--amber-700); }
.hm-flag-epilepsy { background: #fee2e2; color: #991b1b; }
.hm-flag-epilepsy i { color: #b91c1c; }
.hm-flag-allergy  { background: #e0e7ff; color: #3730a3; }
.hm-flag-allergy i { color: #4f46e5; }
.hm-flag-none { color: var(--text-muted); font-style: italic; font-size: 1.2rem; font-weight: 500; }

.hm-blood-group {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
}
.hm-blood-group i { color: #b91c1c; font-size: 1.2rem; }
.hm-blood-group .hm-divider { color: var(--text-muted); font-weight: 500; margin: 0 .4rem; }

.hm-tbl-actions {
  display: flex;
  gap: .6rem;
  white-space: nowrap;
}
.hm-tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.hm-tbl-btn:hover { border-color: var(--primary); color: var(--primary); }
.hm-tbl-btn.hm-tbl-danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.hm-tbl-btn.hm-tbl-danger:hover { background: #b91c1c; color: var(--white); border-color: #b91c1c; }

/* ---- Overlay & modals (no overflow scroll on whole modal) ---- */
.hm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--primary-deeper-rgb), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: hmFadeIn .25s ease;
}
@keyframes hmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hmSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hm-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: hmSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  border-top: 5px solid var(--primary);
}
.hm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.2rem 2.6rem;
  background: var(--primary);
  color: var(--white);
  position: relative;
  flex-shrink: 0;
}
.hm-modal-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.hm-modal-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hm-modal-head h3 i {
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.hm-modal-head h3 .hm-modal-student-name { color: var(--green-300); }
.hm-close {
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all var(--t-fast);
  flex-shrink: 0;
  cursor: pointer;
  border: none;
}
.hm-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.hm-modal-body {
  padding: 2.4rem 2.6rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.hm-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.6rem 2.6rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.hm-modal-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.hm-modal-foot .btn:hover { border-color: var(--gray-500); }
.hm-modal-foot .ed_btn.ed_orange { color: var(--white) !important; }

/* ---- Form fields inside modals ---- */
.hm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.hm-field-full { grid-column: 1 / -1; }
.hm-field { min-width: 0; }
.hm-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: .6rem;
  letter-spacing: .01em;
}
.hm-field .form-control { height: 5rem; font-size: 1.5rem; }
.hm-field textarea.form-control { height: auto; min-height: 9rem; resize: vertical; line-height: 1.6; }
.hm-checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-top: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--green-50);
  border: 2px solid var(--green-200);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
}
.hm-checkbox.hm-checkbox-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.hm-checkbox input[type="checkbox"] {
  width: 2rem; height: 2rem;
  accent-color: var(--primary);
  margin: 0;
  cursor: pointer;
}
.hm-checkbox.hm-checkbox-danger input[type="checkbox"] { accent-color: #b91c1c; }
.hm-section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .8rem 0 0;
  padding-top: 1.4rem;
  border-top: 2px dashed var(--border-light);
  grid-column: 1 / -1;
}
.hm-section-divider h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.hm-section-divider h4 i { color: var(--primary); font-size: 1.4rem; }

/* ---- Emergency Health Card modal ---- */
.hm-ec-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: hmSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
  border-top: 5px solid #b91c1c;
}
.hm-ec-modal .hm-modal-head { background: #b91c1c; }
.hm-ec-modal .hm-modal-head h3 i { background: rgba(255, 255, 255, .2); }

.hm-ec-body { padding: 0; }
.hm-ec-alert {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #b91c1c;
  padding: 1.4rem 2rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hm-ec-alert i { font-size: 1.6rem; }
.hm-ec-list {
  padding: 1.4rem 2.4rem 2.4rem;
}
.hm-ec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.2rem 0;
  border-bottom: 1px dashed var(--border-light);
  font-size: 1.4rem;
}
.hm-ec-row:last-child { border-bottom: none; }
.hm-ec-row .lbl {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
  min-width: 14rem;
}
.hm-ec-row .val {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}
.hm-ec-row .val.hm-ec-emergency { color: #b91c1c; font-size: 1.6rem; }
.hm-ec-row .val.hm-ec-emergency i { color: #b91c1c; }

/* ---- Parent health record form ---- */
.hm-parent-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: 3rem 3.2rem;
  margin-bottom: 2.4rem;
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--primary);
}
.hm-parent-card::before {
  content: '';
  position: absolute;
  top: -6rem; right: -6rem;
  width: 20rem; height: 20rem;
  border-radius: 50%;
  background: var(--green-50);
  pointer-events: none;
}
.hm-parent-card::after {
  content: '';
  position: absolute;
  bottom: -5rem; left: -5rem;
  width: 16rem; height: 16rem;
  border-radius: 50%;
  background: #fee2e2;
  opacity: .4;
  pointer-events: none;
}
.hm-parent-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 1;
}
.hm-parent-icon {
  width: 5.6rem; height: 5.6rem;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-size: 2.4rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--primary-glow);
  position: relative;
}
.hm-parent-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--r-md);
  border: 2px dashed var(--green-300);
  animation: hmRotate 18s linear infinite;
}
@keyframes hmRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hm-parent-title {
  flex: 1;
  min-width: 0;
}
.hm-parent-title h3 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.hm-parent-title p {
  font-size: 1.4rem;
  color: var(--text-muted);
  margin: 0;
}

.hm-parent-banner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.8rem;
  background: var(--amber-100);
  color: #92400e;
  border-radius: var(--r-md);
  border-left: 4px solid var(--amber-600);
  margin-bottom: 2rem;
  font-size: 1.35rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
.hm-parent-banner i { color: var(--amber-700); font-size: 1.6rem; flex-shrink: 0; }
.hm-parent-banner strong { display: block; margin-bottom: .2rem; }

.hm-parent-success {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.8rem;
  background: var(--green-tint-100);
  color: var(--green-ink);
  border-radius: var(--r-md);
  border-left: 4px solid var(--green-600);
  margin-bottom: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.hm-parent-success i { color: var(--green-700); font-size: 1.6rem; flex-shrink: 0; }

.hm-parent-actions {
  margin-top: 2.4rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.hm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.2rem 2.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--white);
  color: var(--gray-700);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
}
.hm-btn-secondary:hover { border-color: var(--gray-500); }
.hm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 2.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-heading);
  background: var(--primary);
  color: var(--white) !important;
  border: 2px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base);
  text-decoration: none;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.hm-btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--primary-glow);
}

/* ---- Toast notification ---- */
#hm-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  padding: 1.4rem 2.2rem;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  max-width: 420px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: hmToastIn .4s cubic-bezier(.34, 1.56, .64, 1);
  border-left: 5px solid rgba(255, 255, 255, .4);
}
@keyframes hmToastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
#hm-toast::before {
  font-family: 'FontAwesome';
  font-size: 1.4rem;
}
#hm-toast[style*="background: rgb(16, 185, 65)"]::before,
#hm-toast[style*="background:#10b981"]::before { content: '\f00c'; }
#hm-toast[style*="background: rgb(239, 68, 68)"]::before,
#hm-toast[style*="background:#ef4444"]::before { content: '\f071'; }

/* ---- Print styles (Emergency Health Card) ---- */
@media print {
  body * { visibility: hidden; }
  #ec-print-area, #ec-print-area * { visibility: visible; }
  #ec-print-area {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  #ec-print-area .hm-modal-head,
  #ec-print-area .hm-modal-foot { display: none !important; }
  .no-print { display: none !important; }
  .hm-overlay { background: white !important; backdrop-filter: none !important; padding: 0 !important; }
}

/* ---- Health record responsive ---- */
@media (max-width: 991px) {
  .hm-group-grid { grid-template-columns: 1fr; }
  .hm-search-wrap { width: 100%; }
}
@media (max-width: 767px) {
  .hm-parent-card { padding: 2rem 1.6rem; }
  .hm-parent-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hm-class-header { flex-direction: column; align-items: stretch; }
  .hm-form-grid { grid-template-columns: 1fr; }
  .hm-table thead th, .hm-table tbody td { padding: 1rem 1.2rem; font-size: 1.25rem; }
  .hm-tbl-actions { flex-direction: column; }
  .hm-modal { max-width: 95vw; }
  .hm-ec-modal { max-width: 95vw; }
  .hm-modal-head, .hm-modal-body, .hm-modal-foot, .hm-ec-list { padding-left: 1.6rem; padding-right: 1.6rem; }
  .hm-ec-row { flex-direction: column; gap: .4rem; }
  .hm-ec-row .lbl { min-width: 0; }
  .hm-ec-row .val { text-align: left; }
  .hm-parent-actions { flex-direction: column-reverse; }
  .hm-btn-primary, .hm-btn-secondary { width: 100%; justify-content: center; }
}

/* =====================================================
   100. DARK HERO BACKGROUNDS ... used by gallery.php, verify.php,
        and any other "dark hero with brand gradient" sections.
        Every value tracks the theme via CSS custom properties.
   ===================================================== */
.dh-hero{
  position: relative;
  padding: 12rem 0 5rem;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  background:
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
radial-gradient(circle at center, rgba(var(--primary-rgb), .20), transparent 65%),
    var(--primary);
}
.dh-hero::before{
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    rgba(255,255,255,.04),
    rgba(255,255,255,.04);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
.dh-hero::after{
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 100%);
  z-index: 1;
}
.dh-hero-inner{ text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
.dh-hero-eyebrow{
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .6rem 1.4rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--white);
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dh-hero-eyebrow::before{
  content: '';
  width: .7rem; height: .7rem;
  background: var(--green-300);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(var(--green-300-rgb), .28);
}
.dh-hero h1{
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.6vw, 5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 1.2rem;
}
.dh-hero h1 .accent{
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dh-hero p{
  font-size: 1.6rem;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  max-width: 60rem;
  margin: 0 auto;
}

/* Gold-text accent ... for headings that should be tinted with the
   chosen gold colour rather than the brand primary. */
.gold-text-accent{
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

/* =====================================================
   101. GALLERY PAGE  (gallery.php)
        Brand-coloured helpers extracted from the page's inline
        <style> block. Tracks --primary / --green-* / --gold.
   ===================================================== */
.gl-wrap{ position: relative; background: var(--bg); padding-bottom: 6rem; }
.gl-hero{ /* alias ... kept for backward-compat with existing markup */
  padding: 12rem 0 5rem;
}
.gl-hero-eyebrow{ /* alias */
  letter-spacing: .14em;
}
.gl-hero h1 .accent{ /* alias */ }

.gl-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.4rem;
  margin: 4rem 0 2.6rem;
  padding: 1.4rem 1.8rem;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.gl-toolbar-info{ display: flex; align-items: center; gap: 1rem; color: var(--text-secondary); font-size: 1.4rem; font-weight: 600; }
.gl-toolbar-info i{ color: var(--primary); font-size: 1.6rem; }
.gl-toolbar-info strong{ color: var(--text); font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; }
.gl-toolbar-actions{ display: flex; align-items: center; gap: .8rem; }
.gl-filter{
  padding: .8rem 1.6rem;
  background: var(--bg-alt);
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-base);
}
.gl-filter:hover{ background: var(--primary-mist); color: var(--primary); }
.gl-filter.is-active{
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), .30);
}
.gl-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 1.4rem;
}
.gl-tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  isolation: isolate;
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.gl-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gl-tile img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.gl-tile:hover img{ transform: scale(1.1); }
.gl-tile--tall  { grid-row: span 2; }
.gl-tile--wide  { grid-column: span 2; }
.gl-tile--big   { grid-row: span 2; grid-column: span 2; }
.gl-tile--normal{ grid-row: span 1; grid-column: span 1; }
.gl-tile::after{
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
  opacity: 0;
  transition: opacity .35s;
  z-index: 1;
}
.gl-tile:hover::after{ opacity: 1; }
.gl-tile-cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.4rem 1.4rem;
  z-index: 2;
  transform: translateY(20px);
  opacity: 0;
  transition: all .35s;
}
.gl-tile:hover .gl-tile-cap{ transform: translateY(0); opacity: 1; }
.gl-tile-cap-title{
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 800;
  color: var(--white);
  margin: 0 0 .4rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.gl-tile-cap-meta{
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.1rem;
  color: rgba(255,255,255,.85);
}
.gl-tile-cap-meta i{ color: var(--gold); }
.gl-tile-badge{
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  color: var(--white);
  font-size: 1rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.gl-tile-badge i{ color: var(--green-300); font-size: .9rem; }
.gl-tile-badge--featured{ background: var(--gold); }
.gl-tile-badge--featured i{ color: var(--white); }
.gl-tile-zoom{
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(.7);
  transition: all .3s;
  cursor: pointer;
}
.gl-tile:hover .gl-tile-zoom{ opacity: 1; transform: scale(1); }
.gl-tile-zoom:hover{ background: var(--accent); border-color: var(--accent); color: var(--gray-900); }
.gl-lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.gl-lightbox.is-open{ display: flex; animation: glLbIn .3s ease; }
@keyframes glLbIn{ from{ opacity: 0; } to{ opacity: 1; } }
.gl-lb-stage{ position: relative; max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.gl-lb-stage img{ max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 12px; box-shadow: var(--shadow-2xl); }
.gl-lb-close, .gl-lb-nav{
  position: fixed;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: var(--white);
  border-radius: 50%;
  width: 4.4rem; height: 4.4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all var(--t-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gl-lb-close{ top: 2rem; right: 2rem; }
.gl-lb-nav{ top: 50%; transform: translateY(-50%); }
.gl-lb-nav--prev{ left: 2rem; }
.gl-lb-nav--next{ right: 2rem; }
.gl-lb-close:hover, .gl-lb-nav:hover{ background: var(--accent); border-color: var(--accent); color: var(--gray-900); }
.gl-lb-counter{
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: var(--white);
  border-radius: var(--r-full);
  padding: .8rem 1.6rem;
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gl-lb-caption{
  position: fixed;
  bottom: 6.5rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.6);
  color: var(--white);
  padding: .8rem 1.6rem;
  border-radius: var(--r-md);
  font-size: 1.4rem;
  max-width: 90vw;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gl-empty{
  text-align: center;
  padding: 6rem 2rem;
  background: var(--white);
  border-radius: var(--r-2xl);
  border: 2px dashed var(--border);
}
.gl-empty-icon{
  width: 8rem; height: 8rem;
  border-radius: 50%;
  background: var(--primary-mist);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 2rem;
  color: var(--primary);
  font-size: 3.4rem;
}
.gl-empty h3{ font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--text); margin: 0 0 1rem; }
.gl-empty p{ color: var(--text-secondary); font-size: 1.5rem; max-width: 50rem; margin: 0 auto; }

@media (max-width: 1199px){ .gl-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px){
  .dh-hero, .gl-hero{ padding: 10rem 0 4rem; }
  .gl-toolbar{ flex-direction: column; align-items: stretch; padding: 1.4rem; gap: 1rem; }
  .gl-grid{ grid-template-columns: repeat(2, 1fr); }
  .gl-tile--big, .gl-tile--wide{ grid-column: span 1; }
}
@media (max-width: 480px){ .gl-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   102. ADMIN SECTION ICONS ... used by admin_generate_id_cards,
        admin_generate_certificates and similar admin pages.
        Replaces inline `style="color:var(--primary-light)"` etc.
   ===================================================== */
.admin-section-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: var(--r-md);
  background: var(--primary-mist);
  color: var(--primary);
  font-size: 1.7rem;
  flex-shrink: 0;
  transition: all var(--t-base);
}
.admin-section-icon:hover{
  background: var(--primary);
  color: var(--white);
  transform: scale(1.05);
}
.admin-section-icon--accent{
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
}
.admin-section-icon--accent:hover{
  background: var(--accent);
  color: var(--white);
}
.admin-section-icon--gold{
  background: rgba(var(--gold-rgb), .18);
  color: var(--gold);
}
.admin-section-icon--gold:hover{
  background: var(--gold);
  color: var(--white);
}
.admin-section-icon--sm{ width: 3.2rem; height: 3.2rem; font-size: 1.4rem; }
.admin-section-icon--lg{ width: 5rem; height: 5rem; font-size: 2rem; }

/* Brand-coloured heading icon ... replaces inline `style="color:var(--primary-light)"`. */
.h-icon-primary{ color: var(--primary); }
.h-icon-accent { color: var(--accent); }
.h-icon-gold   { color: var(--gold); }
.h-icon-light  { color: var(--green-300); }

/* Brand-coloured card border accent ... replaces inline
   `style="border-left:4px solid var(--primary-light)"`. */
.card-accent-primary{ border-left: 4px solid var(--primary) !important; }
.card-accent-gold   { border-left: 4px solid var(--gold) !important; }
.card-accent-accent { border-left: 4px solid var(--accent) !important; }

/* Pill-style status badges using theme colours. */
.themed-badge{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .9rem;
  border-radius: var(--r-full);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.themed-badge--primary{ background: var(--primary-mist); color: var(--primary); }
.themed-badge--accent { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.themed-badge--gold   { background: rgba(var(--gold-rgb), .18); color: var(--gold); }
.themed-badge--success{ background: rgba(var(--green-400-rgb), .15); color: var(--green-400); }

/* =====================================================
   103. VERIFY PAGE  (verify.php)
        Dark hero with student status icons.
   ===================================================== */
.vf-wrap{
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 6rem;
}
.vf-hero{
  /* alias ... see .dh-hero */
  padding: 10rem 0 4rem;
}
.vf-section-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--white);
  font-size: 1.6rem;
  flex-shrink: 0;
}
.vf-section-icon--accent{
  background: var(--accent);
}
.vf-section-icon--gold{
  background: var(--gold);
  color: var(--gray-900);
}
.vf-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--font-heading);
  margin: 0 auto;
}
.vf-avatar--accent{ background: var(--accent); }
.vf-avatar--gold  { background: var(--gold); color: var(--gray-900); }
.vf-student-status{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.2rem;
  border-radius: var(--r-full);
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 700;
}
.vf-student-status--accent{
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent);
}
.vf-row{
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border-light);
}
.vf-row:last-child{ border-bottom: none; }
.vf-row .lbl{
  flex: 0 0 14rem;
  color: var(--text-muted);
  font-size: 1.3rem;
  font-weight: 600;
}
.vf-row .val{
  flex: 1;
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 500;
}
.vf-row .val.is-active{
  color: var(--primary);
  font-weight: 700;
}
.vf-row .val.is-active::before{
  content: '\25CF';
  color: var(--primary);
  margin-right: .5rem;
}

/* =====================================================
   104. HEADER & FOOTER ICON HELPERS ... used by inc/header.inc.php
        and inc/footer.inc.php to tint icons by category.
   ===================================================== */
.icon-circle-primary{
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: var(--primary-mist);
  color: var(--primary);
  flex-shrink: 0;
}
.icon-circle-accent{
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  flex-shrink: 0;
}
.icon-circle-gold{
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), .18);
  color: var(--gold);
  flex-shrink: 0;
}

/* =====================================================
   105. HOMEPAGE TEMPLATE 5 ... "PLAYFUL"
        A kindergarten paper-craft magazine identity ...
        COMPLETELY different visual language from T1...T4.
        Hand-drawn crayon fonts, scallop & zigzag borders,
        sticker bursts, washi tape, polaroids, comic-book
        POW! bursts, kindergarten-crayon strokes, paper
        textures, asymmetric layouts, badge ribbons, hand-
        drawn SVG doodles, marker highlights. Each section
        gets a unique craft treatment.
        COLOURS: 100% driven by the shared theme system
        in :root (--play-* playful family derives from
        --primary / --accent / --gold). The admin's
        Theme & Brand Colours control cascades here.
   ===================================================== */