/* ============================================================
 *  ABAA PREPARATORY SCHOOL — Master Stylesheet
 *  css/style.css
 *
 *  Author   : ABAA Web Team / Kawil Digital
 *  Version  : 1.0.0
 *  Updated  : 2025
 *  License  : Proprietary — All rights reserved
 *
 * ============================================================
 *  TABLE OF CONTENTS
 * ============================================================
 *
 *   1.  Google Fonts Import
 *   2.  CSS Custom Properties (Design Tokens)
 *       2a. Brand Colors
 *       2b. Extended Color Palette
 *       2c. Semantic Color Aliases
 *       2d. Typography Scale
 *       2e. Spacing Scale
 *       2f. Border Radius System
 *       2g. Shadows & Elevation
 *       2h. Transitions & Timing
 *       2i. Z-Index Stack
 *   3.  CSS Reset & Normalize
 *   4.  Base / Root Styles
 *   5.  Typography
 *       5a. Headings
 *       5b. Body Text
 *       5c. Special Text Treatments
 *   6.  Layout System
 *       6a. Container
 *       6b. Grid Utilities
 *       6c. Flexbox Utilities
 *   7.  Navigation
 *       7a. Navbar Base
 *       7b. Logo
 *       7c. Nav Links
 *       7d. Dropdown Menus
 *       7e. Mobile Hamburger
 *       7f. Mobile Drawer
 *   8.  Hero Section
 *       8a. Hero Layout
 *       8b. Hero Typography
 *       8c. Hero Decorative Elements
 *       8d. Hero Scroll Indicator
 *   9.  Buttons & CTAs
 *  10.  Badges & Labels
 *  11.  Cards
 *       11a. Program Cards
 *       11b. Activity Cards
 *       11c. Testimonial Cards
 *       11d. News Cards
 *       11e. Team Cards
 *  12.  Section Styles
 *       12a. Section Base
 *       12b. Section Headers
 *       12c. Wave Dividers
 *       12d. Alternating Backgrounds
 *  13.  Stats / Counter Strip
 *  14.  Programs Section
 *  15.  Activities Section
 *  16.  Why Choose ABAA Section
 *  17.  Testimonials Slider
 *  18.  Social Media Feed Strip
 *  19.  Admissions CTA Banner
 *  20.  Gallery
 *       20a. Filter Controls
 *       20b. Grid Layout
 *       20c. Lightbox Overrides
 *  21.  Forms
 *       21a. Input Fields
 *       21b. Select & Textarea
 *       21c. Form Layouts
 *       21d. Form Validation States
 *  22.  About Page Specifics
 *  23.  Programs Page Specifics (Tabs)
 *  24.  Admissions Page Specifics
 *  25.  News & Events Page
 *  26.  Contact Page
 *  27.  Footer
 *  28.  Scroll-To-Top Button
 *  29.  Preloader / Page Loader
 *  30.  Animations & Keyframes
 *  31.  AOS (Animate On Scroll) Overrides
 *  32.  Swiper.js Overrides
 *  33.  Utility Classes
 *       33a. Display
 *       33b. Spacing
 *       33c. Text Alignment
 *       33d. Colors
 *       33e. Backgrounds
 *       33f. Borders
 *       33g. Misc
 *  34.  Responsive Design
 *       34a. Large Desktop (1400px+)
 *       34b. Desktop (1200px)
 *       34c. Tablet Landscape (992px)
 *       34d. Tablet Portrait (768px)
 *       34e. Mobile Large (576px)
 *       34f. Mobile Small (375px)
 *  35.  Print Styles
 *  36.  Accessibility & Focus Styles
 *  37.  Dark-Mode Consideration Stubs
 *
 * ============================================================ */


/* ============================================================
 *  1. GOOGLE FONTS IMPORT
 *  - Fredoka One  : Playful, rounded display font for headings
 *  - Nunito       : Warm, rounded body font — easy on young eyes
 *  - Preconnect   : Performance optimization for DNS resolution
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');


/* ============================================================
 *  2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 *  All values are defined as CSS variables on :root so every
 *  component can reference them. Changing a single token here
 *  updates the entire site — no search-and-replace needed.
 * ============================================================ */

:root {

  /* ----------------------------------------------------------
   *  2a. BRAND COLORS
   *  The two primary brand colors for ABAA School.
   * ---------------------------------------------------------- */
  --clr-primary        : #59022B;   /* Deep Maroon — main brand color           */
  --clr-primary-light  : #8A0340;   /* Lighter maroon — hover states            */
  --clr-primary-dark   : #3D0118;   /* Darkest maroon — active/pressed states   */
  --clr-primary-ghost  : rgba(89,2,43,0.08); /* Very faint maroon for subtle bg  */
  --clr-primary-tint   : #FFF0F7;   /* Near-white with pink warmth              */

  --clr-secondary      : #F2C744;   /* Golden Yellow — accent & highlight       */
  --clr-secondary-dark : #D4A800;   /* Darker gold — text on light bg           */
  --clr-secondary-light: #FFF3BF;   /* Pale gold — soft backgrounds             */
  --clr-secondary-ghost: rgba(242,199,68,0.15); /* Subtle gold wash             */

  /* ----------------------------------------------------------
   *  2b. EXTENDED COLOR PALETTE
   *  Supporting colors that harmonise with the brand palette.
   * ---------------------------------------------------------- */
  --clr-accent-orange  : #FF8C42;   /* Warm orange — energy, CTAs               */
  --clr-accent-green   : #4CAF8A;   /* Friendly green — success, nature         */
  --clr-accent-blue    : #3B8BD4;   /* Calm blue — info, programs               */
  --clr-accent-purple  : #7C4DFF;   /* Creative purple — arts & music           */
  --clr-accent-coral   : #FF6B6B;   /* Coral — fun, activities                  */
  --clr-accent-teal    : #00BFA5;   /* Teal — swimming, outdoor activities      */

  /* ----------------------------------------------------------
   *  2c. NEUTRAL SCALE
   *  Used for backgrounds, text, borders, and dividers.
   * ---------------------------------------------------------- */
  --clr-white          : #FFFFFF;
  --clr-off-white      : #FFF9F4;   /* Warm off-white — base page background    */
  --clr-bg-warm        : #fdf4e3;   /* Warm cream — alternating section bg      */
  --clr-bg-soft        : #FEF2F8;   /* Soft pink-white — card backgrounds       */
  --clr-gray-50        : #F8F4F0;   /* Near-white gray                          */
  --clr-gray-100       : #F0EAE3;
  --clr-gray-200       : #E0D4CA;
  --clr-gray-300       : #C8B8AC;
  --clr-gray-400       : #A89485;
  --clr-gray-500       : #8A7060;
  --clr-gray-600       : #6B5547;
  --clr-gray-700       : #4D3C30;
  --clr-gray-800       : #2E221A;
  --clr-gray-900       : #1A0F08;

  /* ----------------------------------------------------------
   *  2d. SEMANTIC COLOR ALIASES
   *  Descriptive names for common design decisions.
   * ---------------------------------------------------------- */
  --clr-text-primary   : #1A0F08;   /* Main body text                           */
  --clr-text-secondary : #4D3C30;   /* Subtext, descriptions                    */
  --clr-text-muted     : #8A7060;   /* Disabled, placeholder, captions          */
  --clr-text-inverse   : #FFFFFF;   /* Text on dark backgrounds                 */
  --clr-text-on-gold   : #3D0118;   /* Text on --clr-secondary backgrounds      */
  --clr-text-on-maroon : #F2C744;   /* Text on --clr-primary backgrounds        */

  --clr-border-light   : rgba(89,2,43,0.10); /* Subtle maroon-tinted border     */
  --clr-border-medium  : rgba(89,2,43,0.20);
  --clr-border-dark    : rgba(89,2,43,0.35);
  --clr-divider        : #E8DBCF;

  --clr-success        : #2E7D52;
  --clr-success-bg     : #E8F5EE;
  --clr-warning        : #D97706;
  --clr-warning-bg     : #FEF3C7;
  --clr-error          : #B91C1C;
  --clr-error-bg       : #FEE2E2;
  --clr-info           : #1E60A8;
  --clr-info-bg        : #DBEAFE;

  /* ----------------------------------------------------------
   *  2e. TYPOGRAPHY SCALE
   *  Modular scale (ratio ≈ 1.25) for consistent type hierarchy.
   *  All heading sizes are in clamp() for fluid scaling.
   * ---------------------------------------------------------- */
  --font-display       : 'Fredoka One', cursive;    /* Playful headings          */
  --font-body          : 'Nunito', sans-serif;       /* Friendly body text        */

  /* Fluid font sizes: clamp(min, preferred, max) */
  --fs-xs              : clamp(0.65rem,  1.2vw, 0.75rem);   /* 10.4–12px        */
  --fs-sm              : clamp(0.8rem,   1.5vw, 0.875rem);  /* 12.8–14px        */
  --fs-base            : clamp(0.95rem,  1.8vw, 1rem);      /* 15.2–16px        */
  --fs-md              : clamp(1rem,     1.9vw, 1.125rem);  /* 16–18px          */
  --fs-lg              : clamp(1.1rem,   2.2vw, 1.25rem);   /* 17.6–20px        */
  --fs-xl              : clamp(1.25rem,  2.5vw, 1.5rem);    /* 20–24px          */
  --fs-2xl             : clamp(1.5rem,   3vw,   1.875rem);  /* 24–30px          */
  --fs-3xl             : clamp(1.875rem, 4vw,   2.25rem);   /* 30–36px          */
  --fs-4xl             : clamp(2.25rem,  5vw,   3rem);      /* 36–48px          */
  --fs-5xl             : clamp(2.75rem,  6vw,   4rem);      /* 44–64px          */
  --fs-hero            : clamp(3rem,     7vw,   5.5rem);    /* 48–88px hero H1  */

  --fw-light           : 300;
  --fw-regular         : 400;
  --fw-medium          : 500;
  --fw-semibold        : 600;
  --fw-bold            : 700;
  --fw-extrabold       : 800;
  --fw-black           : 900;

  --lh-tight           : 1.15;
  --lh-snug            : 1.3;
  --lh-normal          : 1.6;
  --lh-relaxed         : 1.8;
  --lh-loose           : 2;

  --ls-tight           : -0.03em;
  --ls-normal          : 0;
  --ls-wide            : 0.04em;
  --ls-wider           : 0.08em;
  --ls-widest          : 0.16em;

  /* ----------------------------------------------------------
   *  2f. SPACING SCALE
   *  Based on a 4px base unit. Use multiples of 4.
   * ---------------------------------------------------------- */
  --sp-0    :  0;
  --sp-1    :  0.25rem;  /*  4px */
  --sp-2    :  0.5rem;   /*  8px */
  --sp-3    :  0.75rem;  /* 12px */
  --sp-4    :  1rem;     /* 16px */
  --sp-5    :  1.25rem;  /* 20px */
  --sp-6    :  1.5rem;   /* 24px */
  --sp-8    :  2rem;     /* 32px */
  --sp-10   :  2.5rem;   /* 40px */
  --sp-12   :  3rem;     /* 48px */
  --sp-16   :  4rem;     /* 64px */
  --sp-20   :  5rem;     /* 80px */
  --sp-24   :  6rem;     /* 96px */
  --sp-32   :  8rem;     /* 128px */

  --section-padding-y  : clamp(4rem, 8vw, 7rem);
  --section-padding-x  : clamp(1rem, 5vw, 2rem);

  /* ----------------------------------------------------------
   *  2g. BORDER RADIUS SYSTEM
   *  Mixed radii create a varied, lively layout aesthetic.
   * ---------------------------------------------------------- */
  --radius-none        : 0;
  --radius-sm          : 4px;
  --radius-md          : 8px;
  --radius-lg          : 16px;
  --radius-xl          : 24px;
  --radius-2xl         : 32px;
  --radius-3xl         : 48px;
  --radius-full        : 9999px;   /* Pill shape                                */
  --radius-blob        : 60% 40% 30% 70% / 60% 30% 70% 40%; /* Organic blob   */
  --radius-blob-alt    : 30% 70% 70% 30% / 30% 30% 70% 70%; /* Alt blob shape */
  --radius-card        : 20px;     /* Standard card rounding                    */
  --radius-card-lg     : 28px;     /* Large card / featured card rounding       */
  --radius-image       : 24px;     /* General image rounding                    */
  --radius-image-round : 50%;      /* Fully circular images (team/testimonials) */

  /* ----------------------------------------------------------
   *  2h. SHADOWS & ELEVATION
   *  Layered shadows add depth. Color-tinted for warmth.
   * ---------------------------------------------------------- */
  --shadow-xs  : 0 1px 2px rgba(89,2,43,0.05);
  --shadow-sm  : 0 2px 8px rgba(89,2,43,0.08), 0 1px 3px rgba(89,2,43,0.06);
  --shadow-md  : 0 4px 16px rgba(89,2,43,0.10), 0 2px 6px rgba(89,2,43,0.07);
  --shadow-lg  : 0 8px 32px rgba(89,2,43,0.12), 0 4px 12px rgba(89,2,43,0.08);
  --shadow-xl  : 0 16px 48px rgba(89,2,43,0.15), 0 6px 20px rgba(89,2,43,0.10);
  --shadow-2xl : 0 24px 64px rgba(89,2,43,0.20), 0 10px 30px rgba(89,2,43,0.12);
  --shadow-glow-primary   : 0 0 30px rgba(89,2,43,0.30);
  --shadow-glow-secondary : 0 0 30px rgba(242,199,68,0.50);
  --shadow-inset : inset 0 2px 8px rgba(89,2,43,0.08);
  --shadow-card  : 0 4px 24px rgba(89,2,43,0.08), 0 1px 4px rgba(89,2,43,0.05);
  --shadow-card-hover : 0 12px 40px rgba(89,2,43,0.16), 0 4px 12px rgba(89,2,43,0.10);

  /* ----------------------------------------------------------
   *  2i. TRANSITIONS & TIMING
   *  Consistent motion across interactive elements.
   * ---------------------------------------------------------- */
  --ease-out-cubic   : cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-cubic    : cubic-bezier(0.32, 0, 0.67, 0);
  --ease-in-out      : cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce      : cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring      : cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --dur-instant : 80ms;
  --dur-fast    : 150ms;
  --dur-normal  : 250ms;
  --dur-slow    : 400ms;
  --dur-slower  : 600ms;
  --dur-slowest : 900ms;

  --transition-base      : all var(--dur-normal) var(--ease-out-cubic);
  --transition-transform : transform var(--dur-normal) var(--ease-out-cubic);
  --transition-colors    : background-color var(--dur-normal) var(--ease-out-cubic),
                           color var(--dur-normal) var(--ease-out-cubic),
                           border-color var(--dur-normal) var(--ease-out-cubic);
  --transition-shadow    : box-shadow var(--dur-normal) var(--ease-out-cubic);
  --transition-opacity   : opacity var(--dur-normal) var(--ease-out-cubic);

  /* ----------------------------------------------------------
   *  2j. Z-INDEX STACK
   *  Named layers prevent z-index conflicts across components.
   * ---------------------------------------------------------- */
  --z-below        : -1;
  --z-base         :  0;
  --z-raised       :  10;
  --z-dropdown     :  100;
  --z-sticky       :  200;
  --z-overlay      :  500;
  --z-modal        :  600;
  --z-toast        :  700;
  --z-tooltip      :  800;
  --z-preloader    :  999;

  /* ----------------------------------------------------------
   *  2k. LAYOUT
   *  Container widths and breakpoints.
   * ---------------------------------------------------------- */
  --container-sm   : 640px;
  --container-md   : 768px;
  --container-lg   : 1024px;
  --container-xl   : 1280px;
  --container-2xl  : 1440px;
  --navbar-height  : 80px;
  --navbar-height-scrolled : 64px;
}


/* ============================================================
 *  3. CSS RESET & NORMALIZE
 *  Modern reset based on Josh Comeau's approach.
 *  Removes browser inconsistencies without being opinionated.
 * ============================================================ */

*,
*::before,
*::after {
  box-sizing     : border-box;
  margin         : 0;
  padding        : 0;
  /* Inherit will / font properties from :root */
}

html {
  /* Smooth scrolling for anchor links (JS overrides with Lenis) */
  scroll-behavior : smooth;
  /* Prevent font-size inflation on mobile orientation change */
  -webkit-text-size-adjust : 100%;
  text-size-adjust          : 100%;
  /* Kerning / ligature improvements */
  -webkit-font-feature-settings : 'kern' 1, 'liga' 1;
  font-feature-settings         : 'kern' 1, 'liga' 1;
  /* Tab size for code blocks */
  tab-size : 4;
}

body {
  min-height           : 100vh;
  /* Improves text rendering on macOS */
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering          : optimizeSpeed;
  /* Prevent horizontal overflow */
  overflow-x           : hidden;
  /* Default line height */
  line-height          : var(--lh-normal);
}

img,
picture,
video,
canvas,
svg {
  display    : block;
  max-width  : 100%;
  /* Remove gaps under inline images */
  vertical-align : middle;
}

input,
button,
textarea,
select {
  font           : inherit; /* Override browser defaults */
  color          : inherit;
  letter-spacing : inherit;
}

/* Remove default list styles when lists are used for UI */
ul[role='list'],
ol[role='list'] {
  list-style : none;
}

/* Avoid text overflows */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap : break-word;
  hyphens       : auto;
}

/* Reset anchor defaults */
a {
  text-decoration : none;
  color           : inherit;
}

/* Remove border on focused images (IE11 quirk) */
img {
  border-style : none;
}

/* Sensible table defaults */
table {
  border-collapse : collapse;
  border-spacing  : 0;
}

/* Consistent fieldset reset */
fieldset {
  border  : 0;
  padding : 0;
}

/* Remove button default styling */
button {
  cursor     : pointer;
  border     : none;
  background : transparent;
}

/* Remove number input spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance : none;
  margin             : 0;
}

/* Consistent sizing for hr */
hr {
  border     : none;
  border-top : 1px solid var(--clr-divider);
  margin     : var(--sp-8) 0;
}


/* ============================================================
 *  4. BASE / ROOT STYLES
 *  Applies the design system defaults to the document.
 * ============================================================ */

html {
  font-size : 16px; /* 1rem = 16px */
}

body {
  font-family      : var(--font-body);
  font-size        : var(--fs-base);
  font-weight      : var(--fw-regular);
  color            : var(--clr-text-primary);
  background-color : var(--clr-off-white);
  line-height      : var(--lh-normal);
  letter-spacing   : var(--ls-normal);
}

/* Custom scrollbar — maroon & gold brand styling */
::-webkit-scrollbar {
  width  : 8px;
  height : 8px;
}
::-webkit-scrollbar-track {
  background : var(--clr-gray-100);
}
::-webkit-scrollbar-thumb {
  background    : var(--clr-primary);
  border-radius : var(--radius-full);
  border        : 2px solid var(--clr-gray-100);
}
::-webkit-scrollbar-thumb:hover {
  background : var(--clr-primary-light);
}

/* Selection color — branded */
::selection {
  background-color : var(--clr-secondary);
  color            : var(--clr-text-on-gold);
}
::-moz-selection {
  background-color : var(--clr-secondary);
  color            : var(--clr-text-on-gold);
}


/* ============================================================
 *  5. TYPOGRAPHY
 *  All type treatments stem from the font variables above.
 * ============================================================ */

/* ── 5a. Headings ─────────────────────────────────────────── */
/* All headings use Fredoka One — our playful brand font       */

h1, h2, h3, h4, h5, h6,
.heading-display {
  font-family : var(--font-display);
  font-weight : var(--fw-regular); /* Fredoka One has no weight variations */
  line-height : var(--lh-tight);
  color       : var(--clr-text-primary);
}

h1, .h1 { font-size: var(--fs-5xl); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-4xl); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-3xl); letter-spacing: var(--ls-normal);}
h4, .h4 { font-size: var(--fs-2xl); }
h5, .h5 { font-size: var(--fs-xl);  }
h6, .h6 { font-size: var(--fs-lg);  }

/* ── 5b. Body Text ────────────────────────────────────────── */

p {
  font-size   : var(--fs-base);
  line-height : var(--lh-normal);
  color       : var(--clr-text-secondary);
  max-width   : 70ch; /* Optimal reading width */
}

/* Unrestricted paragraph width inside flex/grid */
.p-fluid { max-width: none; }

/* Lead paragraph — slightly larger intro copy */
.lead {
  font-size   : var(--fs-lg);
  font-weight : var(--fw-medium);
  color       : var(--clr-text-secondary);
  line-height : var(--lh-relaxed);
}

/* ── 5c. Special Text Treatments ─────────────────────────── */

/* Eyebrow label above a section title */
.eyebrow {
  display         : inline-block;
  font-family     : var(--font-body);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-bold);
  letter-spacing  : var(--ls-widest);
  text-transform  : uppercase;
  color           : var(--clr-primary);
  padding         : var(--sp-1) var(--sp-3);
  background      : var(--clr-primary-ghost);
  border-radius   : var(--radius-full);
  border-left     : 3px solid var(--clr-primary);
  margin-bottom   : var(--sp-3);
}

/* Gradient text — maroon to gold */
.text-gradient {
  background          : linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 40%, var(--clr-secondary-dark) 100%);
  -webkit-background-clip : text;
  background-clip         : text;
  -webkit-text-fill-color : transparent;
  color                   : transparent; /* Fallback */
}

/* Gold highlight — like a marker pen stroke behind text */
.text-highlight {
  position         : relative;
  display          : inline-block;
  white-space      : nowrap;
}
.text-highlight::after {
  content          : '';
  position         : absolute;
  bottom           : 4px;
  left             : -4px;
  right            : -4px;
  height           : 40%;
  background       : var(--clr-secondary);
  opacity          : 0.4;
  z-index          : var(--z-below);
  border-radius    : var(--radius-sm);
  transform        : rotate(-0.5deg);
}

/* Overline text — small caps above a stat or label */
.overline {
  font-size       : var(--fs-xs);
  font-weight     : var(--fw-bold);
  letter-spacing  : var(--ls-widest);
  text-transform  : uppercase;
  color           : var(--clr-text-muted);
}

/* Caption text */
.caption {
  font-size   : var(--fs-xs);
  color       : var(--clr-text-muted);
  line-height : var(--lh-normal);
}

/* Strong emphasis */
strong, b {
  font-weight : var(--fw-bold);
  color       : var(--clr-text-primary);
}

/* Italic */
em, i {
  font-style : italic;
}

/* Inline code */
code {
  font-family      : 'Courier New', monospace;
  font-size        : 0.875em;
  background       : var(--clr-primary-ghost);
  color            : var(--clr-primary);
  padding          : 0.1em 0.35em;
  border-radius    : var(--radius-sm);
}

/* Blockquote — used in testimonials */
blockquote {
  font-size     : var(--fs-lg);
  font-style    : italic;
  color         : var(--clr-text-secondary);
  border-left   : 4px solid var(--clr-secondary);
  padding-left  : var(--sp-6);
  margin        : var(--sp-6) 0;
}
blockquote cite {
  display     : block;
  font-style  : normal;
  font-size   : var(--fs-sm);
  font-weight : var(--fw-semibold);
  color       : var(--clr-primary);
  margin-top  : var(--sp-3);
}


/* ============================================================
 *  6. LAYOUT SYSTEM
 * ============================================================ */

/* ── 6a. Container ────────────────────────────────────────── */
/* All page content is wrapped in .container for safe margins  */

.container {
  width     : 100%;
  max-width : var(--container-xl);
  margin    : 0 auto;
  padding   : 0 var(--section-padding-x);
}

.container-sm  { max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--section-padding-x); }
.container-md  { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--section-padding-x); }
.container-lg  { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--section-padding-x); }
.container-2xl { max-width: var(--container-2xl); margin: 0 auto; padding: 0 var(--section-padding-x); }

/* Full-bleed — no max-width, no padding */
.container-fluid {
  width   : 100%;
  padding : 0 var(--section-padding-x);
}

/* ── 6b. Grid Utilities ───────────────────────────────────── */

.grid {
  display               : grid;
  grid-template-columns : repeat(12, 1fr);
  gap                   : var(--sp-6);
}

/* Auto-fit grids — content defines column count */
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-6); }
.grid-auto-md { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-8); }

/* Fixed column counts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

/* Span helpers */
.col-span-1  { grid-column: span 1;  }
.col-span-2  { grid-column: span 2;  }
.col-span-3  { grid-column: span 3;  }
.col-span-4  { grid-column: span 4;  }
.col-span-6  { grid-column: span 6;  }
.col-span-8  { grid-column: span 8;  }
.col-span-12 { grid-column: span 12; }

/* ── 6c. Flexbox Utilities ────────────────────────────────── */

.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center{ align-items: center;     }
.items-end   { align-items: flex-end;   }
.items-stretch{ align-items: stretch;   }
.justify-start  { justify-content: flex-start;    }
.justify-center { justify-content: center;        }
.justify-end    { justify-content: flex-end;      }
.justify-between{ justify-content: space-between; }
.justify-around { justify-content: space-around;  }
.flex-1      { flex: 1;     }
.flex-shrink-0{ flex-shrink: 0; }
.gap-2       { gap: var(--sp-2); }
.gap-3       { gap: var(--sp-3); }
.gap-4       { gap: var(--sp-4); }
.gap-6       { gap: var(--sp-6); }
.gap-8       { gap: var(--sp-8); }


/* ============================================================
 *  7. NAVIGATION
 * ============================================================ */

/* ── 7a. Navbar Base ──────────────────────────────────────── */

.navbar {
  position         : fixed;
  top              : 0;
  left             : 0;
  right            : 0;
  z-index          : var(--z-sticky);
  height           : var(--navbar-height);
  display          : flex;
  align-items      : center;
  /* Glassmorphism base — transparent before scroll */
  background       : transparent;
  transition       : background var(--dur-slow) var(--ease-out-cubic),
                     height     var(--dur-slow) var(--ease-out-cubic),
                     box-shadow var(--dur-slow) var(--ease-out-cubic);
}

/* Scrolled state — added by JS when page scrolls > 80px */
.navbar.scrolled {
  height     : var(--navbar-height-scrolled);
  background : rgba(255, 249, 244, 0.96);
  backdrop-filter : blur(20px);
  -webkit-backdrop-filter : blur(20px);
  box-shadow : 0 2px 24px rgba(89,2,43,0.10);
  border-bottom: 1px solid var(--clr-border-light);
}

/* Navbar on non-hero pages (e.g. About, Contact) starts solid */
.navbar.navbar-solid {
  background : var(--clr-off-white);
  box-shadow : var(--shadow-sm);
}

.navbar__inner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  width           : 100%;
  max-width       : var(--container-2xl);
  margin          : 0 auto;
  padding         : 0 var(--section-padding-x);
  height          : 100%;
}

/* ── 7b. Logo ─────────────────────────────────────────────── */

.navbar__logo {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-3);
  text-decoration : none;
  flex-shrink     : 0;
}

.navbar__logo-image {
  height           : 52px;
  width            : 52px;
  border-radius    : var(--radius-md);
  object-fit       : cover;
  transition       : var(--transition-transform);
}
.navbar.scrolled .navbar__logo-image {
  height : 44px;
  width  : 44px;
}

.navbar__logo-text {
  display    : flex;
  flex-direction : column;
  line-height : 1;
}
.navbar__logo-name {
  font-family : var(--font-display);
  font-size   : var(--fs-lg);
  color       : var(--clr-primary);
  line-height : 1;
}
.navbar__logo-tagline {
  font-size   : var(--fs-xs);
  color       : var(--clr-text-muted);
  font-weight : var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* White logo variant for hero overlay */
.navbar--light .navbar__logo-name    { color: var(--clr-white); }
.navbar--light .navbar__logo-tagline { color: rgba(255,255,255,0.75); }

/* ── 7c. Nav Links ────────────────────────────────────────── */

.navbar__nav {
  display     : flex;
  align-items : center;
  gap         : var(--sp-1);
  list-style  : none;
}

.navbar__link {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-1);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-semibold);
  color           : var(--clr-text-primary);
  padding         : var(--sp-2) var(--sp-3);
  border-radius   : var(--radius-full);
  transition      : var(--transition-colors);
  text-decoration : none;
  white-space     : nowrap;
  position        : relative;
}

/* Underline indicator on hover */
.navbar__link::after {
  content          : '';
  position         : absolute;
  bottom           : 6px;
  left             : 50%;
  transform        : translateX(-50%) scaleX(0);
  width            : 60%;
  height           : 2px;
  background       : var(--clr-secondary);
  border-radius    : var(--radius-full);
  transition       : transform var(--dur-normal) var(--ease-bounce);
  transform-origin : center;
}
.navbar__link:hover::after,
.navbar__link.active::after {
  transform : translateX(-50%) scaleX(1);
}
.navbar__link:hover,
.navbar__link.active {
  color      : var(--clr-primary);
  background : var(--clr-primary-ghost);
}

/* White variant for dark hero overlay */
.navbar--light .navbar__link         { color: rgba(255,255,255,0.90); }
.navbar--light .navbar__link:hover,
.navbar--light .navbar__link.active  {
  color      : var(--clr-white);
  background : rgba(255,255,255,0.15);
}

/* CTA button inside navbar — "Enroll Now" */
.navbar__cta {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-2);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-bold);
  color           : var(--clr-text-on-gold);
  background      : var(--clr-secondary);
  padding         : var(--sp-2) var(--sp-5);
  border-radius   : var(--radius-full);
  border          : 2px solid var(--clr-secondary);
  transition      : var(--transition-base);
  white-space     : nowrap;
  text-decoration : none;
  box-shadow      : var(--shadow-sm);
  flex-shrink     : 0;
}
.navbar__cta:hover {
  background  : var(--clr-primary);
  border-color: var(--clr-primary);
  color       : var(--clr-white);
  box-shadow  : var(--shadow-md);
  transform   : translateY(-1px);
}

/* Dropdown caret icon */
.navbar__link .nav-caret {
  font-size   : 10px;
  transition  : transform var(--dur-normal) var(--ease-out-cubic);
  opacity     : 0.7;
}
.navbar__item:hover .nav-caret,
.navbar__item.dropdown-open .nav-caret {
  transform : rotate(180deg);
}

/* ── 7d. Dropdown Menus ───────────────────────────────────── */

.navbar__item {
  position : relative;
}

.dropdown {
  position       : absolute;
  top            : calc(100% + 8px);
  left           : 50%;
  transform      : translateX(-50%) translateY(-8px);
  background     : var(--clr-white);
  border-radius  : var(--radius-xl);
  box-shadow     : var(--shadow-xl);
  border         : 1px solid var(--clr-border-light);
  min-width      : 240px;
  padding        : var(--sp-3);
  list-style     : none;
  opacity        : 0;
  visibility     : hidden;
  pointer-events : none;
  transition     : opacity var(--dur-normal) var(--ease-out-cubic),
                   transform var(--dur-normal) var(--ease-out-cubic),
                   visibility var(--dur-normal);
  z-index        : var(--z-dropdown);
}

/* Arrow pointing up from dropdown to nav link */
.dropdown::before {
  content       : '';
  position      : absolute;
  top           : -7px;
  left          : 50%;
  transform     : translateX(-50%);
  width         : 14px;
  height        : 14px;
  background    : var(--clr-white);
  border        : 1px solid var(--clr-border-light);
  border-right  : none;
  border-bottom : none;
  rotate        : 45deg;
}

.navbar__item:hover .dropdown,
.navbar__item.dropdown-open .dropdown {
  opacity        : 1;
  visibility     : visible;
  pointer-events : auto;
  transform      : translateX(-50%) translateY(0);
}

.dropdown__item a {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-3);
  padding         : var(--sp-3) var(--sp-4);
  border-radius   : var(--radius-lg);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-semibold);
  color           : var(--clr-text-secondary);
  text-decoration : none;
  transition      : var(--transition-colors);
}

.dropdown__item a:hover {
  background : var(--clr-primary-ghost);
  color      : var(--clr-primary);
}

.dropdown__item-icon {
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-md);
  background      : var(--clr-primary-ghost);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 18px;
  flex-shrink     : 0;
  transition      : var(--transition-colors);
}
.dropdown__item a:hover .dropdown__item-icon {
  background : var(--clr-secondary);
}

.dropdown__divider {
  height     : 1px;
  background : var(--clr-divider);
  margin     : var(--sp-2) var(--sp-4);
}

/* ── 7e. Mobile Hamburger ─────────────────────────────────── */

.navbar__hamburger {
  display         : none; /* Hidden on desktop */
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
  gap             : 5px;
  width           : 44px;
  height          : 44px;
  border-radius   : var(--radius-md);
  background      : var(--clr-primary-ghost);
  border          : 1px solid var(--clr-border-light);
  cursor          : pointer;
  transition      : var(--transition-base);
  padding         : 0;
  flex-shrink     : 0;
}
.navbar__hamburger:hover {
  background  : var(--clr-primary);
}
.navbar__hamburger span {
  display       : block;
  width         : 22px;
  height        : 2px;
  background    : var(--clr-primary);
  border-radius : var(--radius-full);
  transition    : transform var(--dur-slow) var(--ease-bounce),
                  opacity   var(--dur-normal) var(--ease-out-cubic);
}
.navbar__hamburger:hover span { background: var(--clr-white); }

/* Hamburger → X animation */
.navbar__hamburger.open span:nth-child(1) {
  transform : translateY(7px) rotate(45deg);
}
.navbar__hamburger.open span:nth-child(2) {
  opacity   : 0;
  transform : scaleX(0);
}
.navbar__hamburger.open span:nth-child(3) {
  transform : translateY(-7px) rotate(-45deg);
}

/* ── 7f. Mobile Drawer ────────────────────────────────────── */

.mobile-drawer {
  position         : fixed;
  top              : 0;
  right            : 0;
  bottom           : 0;
  width            : min(360px, 90vw);
  background       : var(--clr-white);
  z-index          : var(--z-modal);
  transform        : translateX(100%);
  transition       : transform var(--dur-slower) var(--ease-out-cubic);
  box-shadow       : var(--shadow-2xl);
  border-left      : 1px solid var(--clr-border-light);
  overflow-y       : auto;
  display          : flex;
  flex-direction   : column;
  padding          : var(--sp-6);
  padding-top      : calc(var(--navbar-height) + var(--sp-4));
}

.mobile-drawer.open {
  transform : translateX(0);
}

/* Dark overlay behind drawer */
.mobile-overlay {
  position   : fixed;
  inset      : 0;
  background : rgba(30,5,15,0.5);
  z-index    : calc(var(--z-modal) - 1);
  opacity    : 0;
  visibility : hidden;
  backdrop-filter : blur(4px);
  transition : opacity var(--dur-slower) var(--ease-out-cubic),
               visibility var(--dur-slower);
}
.mobile-overlay.open {
  opacity    : 1;
  visibility : visible;
}

.mobile-nav {
  list-style : none;
  padding    : 0;
  margin     : 0;
}
.mobile-nav__item { border-bottom: 1px solid var(--clr-divider); }
.mobile-nav__link {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : var(--sp-4) 0;
  font-size       : var(--fs-md);
  font-weight     : var(--fw-semibold);
  color           : var(--clr-text-primary);
  text-decoration : none;
  transition      : var(--transition-colors);
}
.mobile-nav__link:hover { color: var(--clr-primary); }

.mobile-nav__sub {
  list-style : none;
  padding    : 0 0 var(--sp-4) var(--sp-6);
}
.mobile-nav__sub-link {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-2);
  padding         : var(--sp-2) 0;
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-medium);
  color           : var(--clr-text-muted);
  text-decoration : none;
  transition      : var(--transition-colors);
}
.mobile-nav__sub-link::before {
  content  : '→';
  color    : var(--clr-primary);
  font-size: var(--fs-xs);
}
.mobile-nav__sub-link:hover { color: var(--clr-primary); }

.mobile-drawer__cta {
  margin-top : var(--sp-8);
}

/* Page offset for fixed navbar */
.page-content {
  padding-top : var(--navbar-height);
}


/* ============================================================
 *  8. HERO SECTION
 * ============================================================ */

/* ── 8a. Hero Layout ──────────────────────────────────────── */

.hero {
  position        : relative;
  min-height      : 100vh;
  display         : flex;
  align-items     : center;
  overflow        : hidden;
  /* Removed top padding since navbar is fixed overlay */
  padding-top     : var(--navbar-height);
}

/* Gradient background — maroon deep to warm purple */
.hero__bg {
  position    : absolute;
  inset       : 0;
  background  : linear-gradient(
    135deg,
    var(--clr-primary-dark) 0%,
    var(--clr-primary)      50%,
    #7B0035               100%
  );
  z-index     : var(--z-below);
}

/* Radial warm glow at bottom for depth */
.hero__bg::after {
  content    : '';
  position   : absolute;
  bottom     : -20%;
  left       : 50%;
  transform  : translateX(-50%);
  width      : 120%;
  height     : 60%;
  background : radial-gradient(ellipse at center,
    rgba(242,199,68,0.18) 0%,
    transparent           70%
  );
}

/* Hero background image with overlay */
.hero__bg-image {
  position   : absolute;
  inset      : 0;
  object-fit : cover;
  width      : 100%;
  height     : 100%;
  opacity    : 0.20;
  z-index    : 0;
  mix-blend-mode : luminosity;
}

/* Floating decorative circles (positioned via JS/inline) */
.hero__circle {
  position      : absolute;
  border-radius : var(--radius-full);
  opacity       : 0.12;
  pointer-events: none;
}

/* Particle canvas (particles.js target) */
#hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Keep it behind text and foreground elements */
  pointer-events: none; /* Allows users to click buttons 'through' the particles */
}

.hero__inner {
  position        : relative;
  z-index         : var(--z-raised);
  width           : 100%;
  max-width       : var(--container-2xl);
  margin          : 0 auto;
  padding         : var(--sp-10) var(--section-padding-x);
  display         : grid;
  grid-template-columns : 1fr 1fr;
  align-items     : center;
  gap             : var(--sp-16);
  min-height      : calc(100vh - var(--navbar-height));
}

/* ── 8b. Hero Typography ──────────────────────────────────── */

.hero__content {
  color : var(--clr-white);
}

.hero__eyebrow {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-2);
  font-size       : var(--fs-xs);
  font-weight     : var(--fw-bold);
  letter-spacing  : var(--ls-widest);
  text-transform  : uppercase;
  color           : var(--clr-secondary);
  padding         : var(--sp-2) var(--sp-4);
  background      : rgba(242,199,68,0.15);
  border-radius   : var(--radius-full);
  border          : 1px solid rgba(242,199,68,0.30);
  margin-bottom   : var(--sp-3);
}
.hero__eyebrow-dot {
  width         : 6px;
  height        : 6px;
  border-radius : var(--radius-full);
  background    : var(--clr-secondary);
  animation     : pulse-dot 2s ease-in-out infinite;
}

.hero__title {
  font-family : var(--font-display);
  font-size   : var(--fs-hero);
  color       : var(--clr-white);
  line-height : var(--lh-tight);
  margin-bottom: var(--sp-5);
}

/* Typed.js target span inside hero title */
.hero__typed-wrap {
  display         : inline-block;
  color           : var(--clr-secondary);
}

.hero__subtitle {
  font-size   : var(--fs-md);
  line-height : var(--lh-relaxed);
  color       : rgba(255,255,255,0.80);
  max-width   : 60ch;
  margin-bottom: var(--sp-4);
}

.hero__actions {
  display   : flex;
  gap       : var(--sp-4);
  flex-wrap : wrap;
}

.hero__stats {
  display        : flex;
  gap            : var(--sp-8);
  margin-top     : var(--sp-10);
  padding-top    : var(--sp-8);
  border-top     : 1px solid rgba(255,255,255,0.15);
}
.hero__stat-value {
  font-family   : var(--font-display);
  font-size     : var(--fs-3xl);
  color         : var(--clr-secondary);
  line-height   : 1;
}
.hero__stat-label {
  font-size   : var(--fs-xs);
  color       : rgba(255,255,255,0.65);
  font-weight : var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-top  : var(--sp-1);
}

/* ── 8c. Hero Decorative Elements ────────────────────────── */

.hero__visual {
  position        : relative;
  display         : flex;
  justify-content : center;
  align-items     : center;
  padding
}

/* Main hero image — blob-shaped frame */
.hero__image-frame {
  position      : relative;
  width         : min(480px, 100%);
  aspect-ratio  : 1;
}

.hero__main-image {
  width         : 90%;
  height        : 90%;
  object-fit    : cover;
  border-radius : var(--radius-blob);
  border        : 5px solid rgba(242,199,68,0.35);
  animation     : blob-morph 12s ease-in-out infinite;
  position      : relative;
  z-index       : 2;
}

/* Floating info cards on hero image */
.hero__badge {
  position        : absolute;
  z-index         : 3;
  background      : var(--clr-white);
  border-radius   : var(--radius-xl);
  box-shadow      : var(--shadow-xl);
  padding         : var(--sp-3) var(--sp-4);
  display         : flex;
  align-items     : center;
  gap             : var(--sp-2);
  animation       : float-y 4s ease-in-out infinite;
}
.hero__badge--tl { top: 10%; left: -5%; animation-delay: 0s; }
.hero__badge--br { bottom: 15%; right: -5%; animation-delay: 2s; }
.hero__badge--tr { top: 40%; right: -8%; animation-delay: 1s; }

.hero__badge-icon {
  font-size       : 24px;
  flex-shrink     : 0;
}
.hero__badge-label {
  font-size       : var(--fs-xs);
  font-weight     : var(--fw-bold);
  color           : var(--clr-text-primary);
  white-space     : nowrap;
}
.hero__badge-sub {
  font-size       : 10px;
  color           : var(--clr-text-muted);
}

/* Blob background shape behind hero image */
.hero__image-bg {
  position      : absolute;
  inset         : 5%;
  background    : rgba(242,199,68,0.18);
  border-radius : var(--radius-blob-alt);
  animation     : blob-morph 10s ease-in-out 2s infinite reverse;
  z-index       : 1;
}

/* ── 8d. Hero Scroll Indicator ────────────────────────────── */

.hero__scroll {
  position        : absolute;
  bottom          : var(--sp-8);
  left            : 50%;
  transform       : translateX(-50%);
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : var(--sp-2);
  color           : rgba(255,255,255,0.60);
  font-size       : var(--fs-xs);
  letter-spacing  : var(--ls-widest);
  text-transform  : uppercase;
  z-index         : var(--z-raised);
  animation       : fade-in-up 1s var(--dur-slower) both;
  cursor          : pointer;
  text-decoration : none;
}
.hero__scroll-line {
  width         : 1px;
  height        : 48px;
  background    : linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  position      : relative;
  overflow      : hidden;
}
.hero__scroll-line::after {
  content    : '';
  position   : absolute;
  top        : -100%;
  left       : 0;
  width      : 100%;
  height     : 100%;
  background : var(--clr-secondary);
  animation  : scroll-drop 1.8s ease-in-out infinite;
}

/* Wave at hero bottom to transition into next section */
.hero__wave {
  position    : absolute;
  bottom      : -2px;
  left        : 0;
  right       : 0;
  z-index     : var(--z-raised);
  line-height : 0;
}
.hero__wave svg {
  width   : 100%;
  height  : auto;
  display : block;
}


/* ============================================================
 *  9. BUTTONS & CTAs
 *  Four main button variants plus icon and icon-only versions.
 * ============================================================ */

/* Base button shared by all variants */
.btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--sp-2);
  font-family     : var(--font-body);
  font-size       : var(--fs-base);
  font-weight     : var(--fw-bold);
  line-height     : 1;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  border          : 2px solid transparent;
  border-radius   : var(--radius-full);
  padding         : var(--sp-3) var(--sp-8);
  transition      : var(--transition-base);
  position        : relative;
  overflow        : hidden;
}

/* Ripple effect on click */
.btn::after {
  content       : '';
  position      : absolute;
  inset         : 0;
  background    : rgba(255,255,255,0.2);
  border-radius : inherit;
  opacity       : 0;
  transform     : scale(0.8);
  transition    : opacity var(--dur-fast), transform var(--dur-fast);
}
.btn:active::after {
  opacity   : 1;
  transform : scale(1);
}
.btn:disabled,
.btn[disabled] {
  opacity        : 0.5;
  cursor         : not-allowed;
  pointer-events : none;
}

/* Primary button — maroon fill */
.btn-primary {
  background   : var(--clr-primary);
  color        : var(--clr-white);
  border-color : var(--clr-primary);
  box-shadow   : 0 4px 16px rgba(89,2,43,0.35);
}
.btn-primary:hover {
  background   : var(--clr-primary-light);
  border-color : var(--clr-primary-light);
  box-shadow   : 0 8px 28px rgba(89,2,43,0.45);
  transform    : translateY(-2px);
}
.btn-primary:active {
  background : var(--clr-primary-dark);
  transform  : translateY(0);
}

/* Secondary button — gold fill */
.btn-secondary {
  background   : var(--clr-secondary);
  color        : var(--clr-text-on-gold);
  border-color : var(--clr-secondary);
  box-shadow   : 0 4px 16px rgba(242,199,68,0.40);
}
.btn-secondary:hover {
  background   : #e0b820;
  border-color : #e0b820;
  box-shadow   : 0 8px 28px rgba(242,199,68,0.55);
  transform    : translateY(-2px);
}
.btn-secondary:active {
  background : var(--clr-secondary-dark);
  transform  : translateY(0);
}

/* Outline button — maroon border */
.btn-outline {
  background   : transparent;
  color        : var(--clr-primary);
  border-color : var(--clr-primary);
}
.btn-outline:hover {
  background   : var(--clr-primary);
  color        : var(--clr-white);
  box-shadow   : var(--shadow-md);
  transform    : translateY(-2px);
}

/* Outline-white — for dark backgrounds */
.btn-outline-white {
  background   : transparent;
  color        : var(--clr-white);
  border-color : rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
  background   : rgba(255,255,255,0.15);
  border-color : var(--clr-white);
  box-shadow   : 0 4px 16px rgba(0,0,0,0.2);
}

/* Ghost button — no border, subtle hover */
.btn-ghost {
  background   : transparent;
  color        : var(--clr-primary);
  border-color : transparent;
  padding-left : var(--sp-4);
  padding-right: var(--sp-4);
}
.btn-ghost:hover {
  background   : var(--clr-primary-ghost);
  border-color : var(--clr-border-light);
}

/* Icon button — square/round, icon only */
.btn-icon {
  padding       : var(--sp-3);
  border-radius : var(--radius-full);
  width         : 48px;
  height        : 48px;
}

/* Size variants */
.btn-sm  { font-size: var(--fs-sm);  padding: var(--sp-2) var(--sp-5); }
.btn-lg  { font-size: var(--fs-lg);  padding: var(--sp-4) var(--sp-10); }
.btn-xl  { font-size: var(--fs-xl);  padding: var(--sp-5) var(--sp-12); }
.btn-block { width: 100%; justify-content: center; }

/* Button with icon + text */
.btn .btn-icon-left  { margin-right: var(--sp-1); }
.btn .btn-icon-right { margin-left : var(--sp-1); }

/* WhatsApp CTA button */
.btn-whatsapp {
  background   : #25D366;
  color        : var(--clr-white);
  border-color : #25D366;
  box-shadow   : 0 4px 16px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover {
  background   : #1da851;
  border-color : #1da851;
  transform    : translateY(-2px);
  box-shadow   : 0 8px 28px rgba(37,211,102,0.45);
}


/* ============================================================
 *  10. BADGES & LABELS
 *  Small pills and tags for categorising content.
 * ============================================================ */

.badge {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-1);
  font-size       : var(--fs-xs);
  font-weight     : var(--fw-bold);
  padding         : var(--sp-1) var(--sp-3);
  border-radius   : var(--radius-full);
  letter-spacing  : var(--ls-wide);
  white-space     : nowrap;
  border          : 1px solid transparent;
}

.badge-primary   { background: var(--clr-primary);        color: var(--clr-white);   }
.badge-secondary { background: var(--clr-secondary);       color: var(--clr-text-on-gold); }
.badge-light     { background: var(--clr-primary-ghost);   color: var(--clr-primary); border-color: var(--clr-border-light); }
.badge-gold-light{ background: var(--clr-secondary-ghost); color: var(--clr-secondary-dark); border-color: rgba(242,199,68,0.3); }
.badge-success   { background: var(--clr-success-bg);      color: var(--clr-success); }
.badge-warning   { background: var(--clr-warning-bg);      color: var(--clr-warning); }
.badge-info      { background: var(--clr-info-bg);         color: var(--clr-info);    }
.badge-orange    { background: rgba(255,140,66,0.12);      color: var(--clr-accent-orange); border-color: rgba(255,140,66,0.25); }
.badge-green     { background: rgba(76,175,138,0.12);      color: var(--clr-accent-green); border-color: rgba(76,175,138,0.25); }
.badge-blue      { background: rgba(59,139,212,0.12);      color: var(--clr-accent-blue); border-color: rgba(59,139,212,0.25); }
.badge-purple    { background: rgba(124,77,255,0.12);      color: var(--clr-accent-purple); border-color: rgba(124,77,255,0.25); }
.badge-coral     { background: rgba(255,107,107,0.12);     color: var(--clr-accent-coral); border-color: rgba(255,107,107,0.25); }

/* Larger tag variant */
.tag {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-2);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-semibold);
  padding         : var(--sp-2) var(--sp-4);
  border-radius   : var(--radius-lg);
  background      : var(--clr-gray-100);
  color           : var(--clr-text-secondary);
  cursor          : pointer;
  border          : 1px solid var(--clr-border-light);
  transition      : var(--transition-base);
}
.tag:hover,
.tag.active {
  background   : var(--clr-primary);
  color        : var(--clr-white);
  border-color : var(--clr-primary);
}

/* Notification dot */
.badge-dot {
  width         : 8px;
  height        : 8px;
  border-radius : var(--radius-full);
  display       : inline-block;
}
.badge-dot-primary { background: var(--clr-primary); }
.badge-dot-success { background: var(--clr-success); }
.badge-dot-warning { background: var(--clr-warning); }


/* ============================================================
 *  11. CARDS
 *  All card components. Each has hover lift + shadow animation.
 * ============================================================ */

/* Shared card base */
.card {
  background    : var(--clr-white);
  border-radius : var(--radius-card);
  border        : 1px solid var(--clr-border-light);
  box-shadow    : var(--shadow-card);
  overflow      : hidden;
  transition    : transform var(--dur-slow) var(--ease-bounce),
                  box-shadow var(--dur-slow) var(--ease-out-cubic);
}
.card:hover {
  transform  : translateY(-6px);
  box-shadow : var(--shadow-card-hover);
}

/* ── 11a. Program Cards ───────────────────────────────────── */

.program-card {
  background    : var(--clr-white);
  border-radius : var(--radius-card-lg);
  overflow      : hidden;
  box-shadow    : var(--shadow-card);
  border        : 1px solid var(--clr-border-light);
  transition    : transform var(--dur-slow) var(--ease-bounce),
                  box-shadow var(--dur-slow) var(--ease-out-cubic);
  display       : flex;
  flex-direction: column;
}
.program-card:hover {
  transform  : translateY(-8px) scale(1.01);
  box-shadow : var(--shadow-card-hover);
}

.program-card__image-wrap {
  position     : relative;
  height       : 200px;
  overflow     : hidden;
}
.program-card__image {
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
  transition      : transform var(--dur-slower) var(--ease-out-cubic);
}
.program-card:hover .program-card__image {
  transform : scale(1.08);
}

/* Gradient overlay on card image */
.program-card__image-overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(to bottom, transparent 50%, rgba(89,2,43,0.6) 100%);
}

.program-card__badge-wrap {
  position : absolute;
  top      : var(--sp-3);
  left     : var(--sp-3);
}
.program-card__age {
  position    : absolute;
  bottom      : var(--sp-3);
  right       : var(--sp-3);
  background  : var(--clr-secondary);
  color       : var(--clr-text-on-gold);
  font-size   : var(--fs-xs);
  font-weight : var(--fw-bold);
  padding     : var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
}

.program-card__body {
  padding : var(--sp-6);
  flex    : 1;
  display : flex;
  flex-direction : column;
}
.program-card__icon {
  font-size      : 2.5rem;
  margin-bottom  : var(--sp-3);
  display        : block;
}
.program-card__title {
  font-family    : var(--font-display);
  font-size      : var(--fs-xl);
  color          : var(--clr-primary);
  margin-bottom  : var(--sp-2);
}
.program-card__desc {
  font-size    : var(--fs-sm);
  color        : var(--clr-text-secondary);
  line-height  : var(--lh-relaxed);
  flex         : 1;
}
.program-card__footer {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-top      : var(--sp-5);
  padding-top     : var(--sp-4);
  border-top      : 1px solid var(--clr-divider);
}
.program-card__link {
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-bold);
  color           : var(--clr-primary);
  display         : flex;
  align-items     : center;
  gap             : var(--sp-1);
  text-decoration : none;
  transition      : gap var(--dur-normal) var(--ease-bounce);
}
.program-card:hover .program-card__link { gap: var(--sp-3); }

/* ── 11b. Activity Cards ──────────────────────────────────── */

.activity-card {
  position      : relative;
  border-radius : var(--radius-card);
  overflow      : hidden;
  aspect-ratio  : 3 / 4;
  cursor        : pointer;
}

.activity-card__image {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform var(--dur-slower) var(--ease-out-cubic);
}
.activity-card:hover .activity-card__image {
  transform : scale(1.12);
}

.activity-card__overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(
    to top,
    rgba(89,2,43,0.90) 0%,
    rgba(89,2,43,0.40) 50%,
    transparent        100%
  );
  transition : background var(--dur-slow) var(--ease-out-cubic);
}
.activity-card:hover .activity-card__overlay {
  background : linear-gradient(
    to top,
    rgba(89,2,43,0.95) 0%,
    rgba(89,2,43,0.60) 60%,
    rgba(89,2,43,0.10) 100%
  );
}

.activity-card__content {
  position       : absolute;
  bottom         : 0;
  left           : 0;
  right          : 0;
  padding        : var(--sp-6);
  color          : var(--clr-white);
  transform      : translateY(0);
  transition     : transform var(--dur-slow) var(--ease-out-cubic);
}

.activity-card__emoji {
  font-size     : 2.5rem;
  margin-bottom : var(--sp-2);
  display       : block;
  transform     : scale(1);
  transition    : transform var(--dur-slow) var(--ease-bounce);
}
.activity-card:hover .activity-card__emoji {
  transform : scale(1.2) rotate(-5deg);
}

.activity-card__title {
  font-family   : var(--font-display);
  font-size     : var(--fs-xl);
  margin-bottom : var(--sp-2);
  color: var(--clr-white);
}

.activity-card__desc {
  font-size   : var(--fs-sm);
  line-height : var(--lh-relaxed);
  color       : rgba(255,255,255,0.80);
  max-height  : 0;
  overflow    : hidden;
  transition  : max-height var(--dur-slower) var(--ease-out-cubic);
}
.activity-card:hover .activity-card__desc {
  max-height : 120px;
}

/* ── 11c. Testimonial Cards ───────────────────────────────── */

.testimonial-card {
  background    : var(--clr-white);
  border-radius : var(--radius-card-lg);
  padding       : var(--sp-8);
  box-shadow    : var(--shadow-card);
  border        : 1px solid var(--clr-border-light);
  position      : relative;
  overflow      : hidden;
}

/* Decorative quote mark */
.testimonial-card::before {
  content       : '\201C';
  position      : absolute;
  top           : -10px;
  left          : var(--sp-6);
  font-family   : var(--font-display);
  font-size     : 8rem;
  color         : var(--clr-secondary);
  opacity       : 0.25;
  line-height   : 1;
  pointer-events: none;
}

.testimonial-card__stars {
  display       : flex;
  gap           : var(--sp-1);
  margin-bottom : var(--sp-4);
}
.testimonial-card__star {
  color     : var(--clr-secondary);
  font-size : var(--fs-md);
}

.testimonial-card__text {
  font-size   : var(--fs-md);
  font-style  : italic;
  line-height : var(--lh-relaxed);
  color       : var(--clr-text-secondary);
  margin-bottom: var(--sp-6);
  max-width   : none;
}

.testimonial-card__author {
  display     : flex;
  align-items : center;
  gap         : var(--sp-4);
}
.testimonial-card__avatar {
  width         : 52px;
  height        : 52px;
  border-radius : var(--radius-image-round);
  object-fit    : cover;
  border        : 3px solid var(--clr-secondary);
  flex-shrink   : 0;
}
.testimonial-card__avatar-placeholder {
  width           : 52px;
  height          : 52px;
  border-radius   : var(--radius-image-round);
  background      : var(--clr-primary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--font-display);
  font-size       : var(--fs-xl);
  color           : var(--clr-secondary);
  flex-shrink     : 0;
  border          : 3px solid var(--clr-secondary);
}
.testimonial-card__name {
  font-weight : var(--fw-bold);
  color       : var(--clr-text-primary);
  font-size   : var(--fs-sm);
}
.testimonial-card__role {
  font-size : var(--fs-xs);
  color     : var(--clr-text-muted);
  margin-top: 2px;
}

/* ── 11d. News Cards ──────────────────────────────────────── */

.news-card {
  background    : var(--clr-white);
  border-radius : var(--radius-card);
  overflow      : hidden;
  box-shadow    : var(--shadow-card);
  border        : 1px solid var(--clr-border-light);
  transition    : transform var(--dur-slow) var(--ease-bounce),
                  box-shadow var(--dur-slow) var(--ease-out-cubic);
  display       : flex;
  flex-direction: column;
}
.news-card:hover {
  transform  : translateY(-6px);
  box-shadow : var(--shadow-card-hover);
}

.news-card__image-wrap {
  height   : 200px;
  overflow : hidden;
  position : relative;
}
.news-card__image {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform var(--dur-slower) var(--ease-out-cubic);
}
.news-card:hover .news-card__image { transform : scale(1.08); }

.news-card__category {
  position      : absolute;
  top           : var(--sp-3);
  left          : var(--sp-3);
}

.news-card__body {
  padding : var(--sp-5);
  flex    : 1;
  display : flex;
  flex-direction : column;
}
.news-card__meta {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-3);
  margin-bottom   : var(--sp-3);
  font-size       : var(--fs-xs);
  color           : var(--clr-text-muted);
}
.news-card__date-dot {
  width         : 3px;
  height        : 3px;
  border-radius : var(--radius-full);
  background    : var(--clr-gray-300);
}
.news-card__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-lg);
  color        : var(--clr-text-primary);
  margin-bottom: var(--sp-2);
  line-height  : var(--lh-snug);
  flex         : 1;
}
.news-card__excerpt {
  font-size  : var(--fs-sm);
  color      : var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  margin-top : var(--sp-2);
  max-width  : none;
}
.news-card__link {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-1);
  color           : var(--clr-primary);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-bold);
  margin-top      : var(--sp-4);
  text-decoration : none;
  transition      : gap var(--dur-normal) var(--ease-bounce);
}
.news-card:hover .news-card__link { gap: var(--sp-3); }

/* ── 11e. Team / Staff Cards ──────────────────────────────── */

.team-card {
  text-align    : center;
  padding       : var(--sp-8) var(--sp-6);
  background    : var(--clr-white);
  border-radius : var(--radius-card-lg);
  box-shadow    : var(--shadow-card);
  border        : 1px solid var(--clr-border-light);
  transition    : transform var(--dur-slow) var(--ease-bounce),
                  box-shadow var(--dur-slow) var(--ease-out-cubic);
}
.team-card:hover {
  transform  : translateY(-6px);
  box-shadow : var(--shadow-card-hover);
}

.team-card__image-wrap {
  position        : relative;
  width           : 120px;
  height          : 120px;
  margin          : 0 auto var(--sp-5);
}
.team-card__image {
  width         : 100%;
  height        : 100%;
  border-radius : var(--radius-full);
  object-fit    : cover;
  border        : 4px solid var(--clr-secondary);
  transition    : border-color var(--dur-normal);
}
.team-card:hover .team-card__image {
  border-color : var(--clr-primary);
}
.team-card__badge {
  position      : absolute;
  bottom        : 0;
  right         : 0;
  background    : var(--clr-primary);
  color         : var(--clr-secondary);
  width         : 32px;
  height        : 32px;
  border-radius : var(--radius-full);
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 14px;
  border        : 3px solid var(--clr-white);
}
.team-card__name {
  font-family   : var(--font-display);
  font-size     : var(--fs-xl);
  color         : var(--clr-primary);
  margin-bottom : var(--sp-1);
}
.team-card__role {
  font-size   : var(--fs-sm);
  color       : var(--clr-text-muted);
  font-weight : var(--fw-medium);
  margin-bottom: var(--sp-4);
}
.team-card__bio {
  font-size  : var(--fs-sm);
  color      : var(--clr-text-secondary);
  line-height: var(--lh-relaxed);
  max-width  : none;
}
.team-card__socials {
  display         : flex;
  justify-content : center;
  gap             : var(--sp-2);
  margin-top      : var(--sp-4);
}
.team-card__social-link {
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary-ghost);
  border          : 1px solid var(--clr-border-light);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--clr-primary);
  font-size       : 14px;
  transition      : var(--transition-base);
}
.team-card__social-link:hover {
  background : var(--clr-primary);
  color      : var(--clr-secondary);
  border-color:var(--clr-primary);
  transform  : translateY(-2px);
}

/* Feature card — used in "Why Choose ABAA" */
.feature-card {
  padding       : var(--sp-8);
  background    : var(--clr-white);
  border-radius : var(--radius-card-lg);
  box-shadow    : var(--shadow-card);
  border        : 1px solid var(--clr-border-light);
  transition    : transform var(--dur-slow) var(--ease-bounce),
                  box-shadow var(--dur-slow) var(--ease-out-cubic),
                  border-color var(--dur-slow);
  position      : relative;
  overflow      : hidden;
}
.feature-card::before {
  content       : '';
  position      : absolute;
  top           : 0;
  left          : 0;
  right         : 0;
  height        : 4px;
  background    : linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  transform     : scaleX(0);
  transform-origin: left;
  transition    : transform var(--dur-slow) var(--ease-out-cubic);
}
.feature-card:hover {
  transform    : translateY(-6px);
  box-shadow   : var(--shadow-card-hover);
  border-color : var(--clr-secondary);
}
.feature-card:hover::before {
  transform : scaleX(1);
}

.feature-card__icon {
  width           : 64px;
  height          : 64px;
  border-radius   : var(--radius-xl);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 2rem;
  margin-bottom   : var(--sp-5);
  transition      : transform var(--dur-slow) var(--ease-bounce);
}
.feature-card:hover .feature-card__icon {
  transform : scale(1.1) rotate(-5deg);
}

.feature-card__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-xl);
  color        : var(--clr-primary);
  margin-bottom: var(--sp-3);
}
.feature-card__desc {
  font-size  : var(--fs-sm);
  line-height: var(--lh-relaxed);
  color      : var(--clr-text-secondary);
  max-width  : none;
}

/* Icon colors for feature cards */
.icon-bg-primary  { background: var(--clr-primary-ghost); color: var(--clr-primary); }
.icon-bg-secondary{ background: var(--clr-secondary-ghost); color: var(--clr-secondary-dark); }
.icon-bg-orange   { background: rgba(255,140,66,0.12); color: var(--clr-accent-orange); }
.icon-bg-green    { background: rgba(76,175,138,0.12); color: var(--clr-accent-green); }
.icon-bg-blue     { background: rgba(59,139,212,0.12); color: var(--clr-accent-blue); }
.icon-bg-purple   { background: rgba(124,77,255,0.12); color: var(--clr-accent-purple); }
.icon-bg-coral    { background: rgba(255,107,107,0.12); color: var(--clr-accent-coral); }
.icon-bg-teal     { background: rgba(0,191,165,0.12); color: var(--clr-accent-teal); }


/* ============================================================
 *  12. SECTION STYLES
 * ============================================================ */

/* ── 12a. Section Base ────────────────────────────────────── */

.section {
  padding : var(--section-padding-y) 0;
  position: relative;
  overflow: hidden;
}

.section--sm   { padding: calc(var(--section-padding-y) * 0.6) 0; }
.section--lg   { padding: calc(var(--section-padding-y) * 1.4) 0; }

/* ── 12b. Section Headers ─────────────────────────────────── */

.section-header {
  text-align    : center;
  margin-bottom : var(--sp-16);
}
.section-header--left {
  text-align : left;
}

.section-title {
  font-family  : var(--font-display);
  font-size    : var(--fs-4xl);
  color        : var(--clr-primary);
  margin-bottom: var(--sp-4);
  position     : relative;
  display      : inline-block;
}

/* Underline decoration on section title */
.section-title--underline::after {
  content       : '';
  display       : block;
  width         : 60px;
  height        : 5px;
  background    : linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  border-radius : var(--radius-full);
  margin        : var(--sp-3) auto 0;
}
.section-header--left .section-title--underline::after {
  margin-left : 0;
}

.section-subtitle {
  font-size  : var(--fs-lg);
  color      : var(--clr-text-secondary);
  max-width  : 60ch;
  margin     : 0 auto;
  line-height: var(--lh-relaxed);
}
.section-header--left .section-subtitle {
  margin-left: 0;
}

/* ── 12c. Wave / Curved Dividers ──────────────────────────── */

/* Top wave divider */
.wave-divider {
  line-height : 0;
  overflow    : hidden;
  position    : relative;
}
.wave-divider svg {
  display : block;
  width   : 100%;
}
.wave-divider--flip {
  transform : rotateX(180deg);
}
.wave-divider--gold svg path  { fill: var(--clr-secondary-light); }
.wave-divider--white svg path { fill: var(--clr-white);           }
.wave-divider--cream svg path { fill: var(--clr-bg-warm);         }
.wave-divider--maroon svg path{ fill: var(--clr-primary);         }

/* ── 12d. Alternating Backgrounds ────────────────────────── */

.section-white  { background: var(--clr-white);        }
.section-cream  { background: var(--clr-bg-warm);       }
.section-soft   { background: var(--clr-bg-soft);       }
.section-gray   { background: var(--clr-gray-50);       }
.section-maroon {
  background : linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  color      : var(--clr-white);
}
.section-maroon .section-title   { color: var(--clr-white); }
.section-maroon .section-subtitle{ color: rgba(255,255,255,0.80); }
.section-maroon .eyebrow          { background: rgba(242,199,68,0.15); color: var(--clr-secondary); border-left-color: var(--clr-secondary); }

/* Decorative background pattern dots */
.section-pattern {
  background-image: radial-gradient(circle, var(--clr-border-light) 1px, transparent 1px);
  background-size: 28px 28px;
}


/* ============================================================
 *  13. STATS / COUNTER STRIP
 * ============================================================ */

.stats-strip {
  background  : linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  padding     : var(--sp-16) 0;
  position    : relative;
  overflow    : hidden;
}

/* Subtle diagonal stripe texture */
.stats-strip::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 24px
  );
}

.stats-strip__inner {
  position        : relative;
  z-index         : var(--z-raised);
  display         : grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap             : var(--sp-8);
  align-items     : center;
}

.stat-item {
  text-align : center;
  color      : var(--clr-white);
  position   : relative;
}

/* Vertical divider between stats (hidden on last child) */
.stat-item:not(:last-child)::after {
  content    : '';
  position   : absolute;
  right      : 0;
  top        : 50%;
  transform  : translateY(-50%);
  height     : 50%;
  width      : 1px;
  background : rgba(255,255,255,0.15);
}

.stat-item__value {
  font-family  : var(--font-display);
  font-size    : var(--fs-5xl);
  color        : var(--clr-secondary);
  line-height  : 1;
  display      : flex;
  align-items  : center;
  justify-content: center;
  gap          : 0;
}
.stat-item__suffix {
  font-family : var(--font-display);
  font-size   : var(--fs-3xl);
  color       : var(--clr-secondary);
  align-self  : flex-start;
  padding-top : var(--sp-2);
}
.stat-item__label {
  font-size     : var(--fs-sm);
  color         : rgba(255,255,255,0.75);
  font-weight   : var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-top    : var(--sp-2);
}
.stat-item__icon {
  font-size     : 2.5rem;
  margin-bottom : var(--sp-2);
  display       : block;
}


/* ============================================================
 *  14. PROGRAMS SECTION
 * ============================================================ */

.programs-section {
  padding    : var(--section-padding-y) 0;
  background : var(--clr-off-white);
}

/* Programs grid with mixed card sizes */
.programs-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(280px, 1fr));
  gap                   : var(--sp-8);
}

/* Featured program — spans 2 columns */
.programs-grid .program-card--featured {
  grid-column : span 2;
  display     : grid;
  grid-template-columns: 1fr 1fr;
}
.programs-grid .program-card--featured .program-card__image-wrap {
  height : 100%;
  min-height: 280px;
}


/* ============================================================
 *  15. ACTIVITIES SECTION
 * ============================================================ */

.activities-section {
  padding    : var(--section-padding-y) 0; 
  background : var(--clr-bg-warm);
}

.activities-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
  gap                   : var(--sp-5);
}

/* Tall card on first item — visual rhythm */
.activities-grid .activity-card:first-child {
  grid-row : span 2;
}


/* ============================================================
 *  16. WHY CHOOSE ABAA SECTION
 * ============================================================ */

.why-section {
  padding    : var(--section-padding-y) 0;
  background : var(--clr-white);
  position   : relative;
}

/* Decorative blob background */
.why-section__blob {
  position       : absolute;
  right          : -200px;
  top            : 50%;
  transform      : translateY(-50%);
  width          : 600px;
  height         : 600px;
  background     : var(--clr-secondary-light);
  border-radius  : var(--radius-blob);
  opacity        : 0.5;
  pointer-events : none;
}

.why-section__image-grid {
  display       : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows   : auto auto;
  gap           : var(--sp-4);
}

.why-section__image {
  border-radius : var(--radius-card);
  object-fit    : cover;
  width         : 100%;
  height        : 100%;
  box-shadow    : var(--shadow-md);
}

/* Different rounding on each image for variety */
.why-section__image:nth-child(1) { border-radius: var(--radius-2xl);  height: 280px; }
.why-section__image:nth-child(2) { border-radius: var(--radius-full) var(--radius-xl) var(--radius-xl) var(--radius-full); height: 200px; }
.why-section__image:nth-child(3) { border-radius: var(--radius-xl) var(--radius-full) var(--radius-full) var(--radius-xl); height: 200px; }
.why-section__image:nth-child(4) { border-radius: var(--radius-2xl);  height: 280px; }


/* ============================================================
 *  17. TESTIMONIALS SLIDER (Swiper.js)
 * ============================================================ */

.testimonials-section {
  padding    : var(--section-padding-y) 0;
  background : var(--clr-primary-tint);
  position   : relative;
}

/* Oversize quotation mark bg watermark */
.testimonials-section::before {
  content       : '\201C';
  position      : absolute;
  top           : -4rem;
  right         : 5%;
  font-family   : var(--font-display);
  font-size     : 24rem;
  color         : var(--clr-primary);
  opacity       : 0.04;
  pointer-events: none;
  line-height   : 1;
}

.testimonials-swiper {
  padding-bottom: var(--sp-12) !important; /* Room for pagination dots */
}

/* Swiper pagination bullets — brand colors */
.testimonials-swiper .swiper-pagination-bullet {
  background : var(--clr-primary);
  opacity    : 0.3;
  width      : 8px;
  height     : 8px;
  transition : all var(--dur-normal) var(--ease-out-cubic);
}
.testimonials-swiper .swiper-pagination-bullet-active {
  background : var(--clr-primary);
  opacity    : 1;
  width      : 24px;
  border-radius: var(--radius-full);
}


/* ============================================================
 *  18. SOCIAL MEDIA FEED STRIP
 * ============================================================ */

.social-strip {
  padding    : var(--section-padding-y) 0;
  background : var(--clr-white);
}

.social-strip__platforms {
  display     : flex;
  gap         : var(--sp-4);
  margin-bottom: var(--sp-10);
  flex-wrap   : wrap;
}
.social-platform-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-2);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-bold);
  padding         : var(--sp-3) var(--sp-5);
  border-radius   : var(--radius-full);
  border          : 2px solid var(--clr-border-light);
  background      : var(--clr-white);
  color           : var(--clr-text-secondary);
  text-decoration : none;
  transition      : var(--transition-base);
}
.social-platform-btn:hover,
.social-platform-btn.active {
  border-color : currentColor;
  box-shadow   : var(--shadow-sm);
}
.social-platform-btn--instagram:hover,
.social-platform-btn--instagram.active {
  color      : #C13584;
  background : #FDF0F8;
  border-color: #C13584;
}
.social-platform-btn--tiktok:hover,
.social-platform-btn--tiktok.active {
  color      : #010101;
  background : #F0F0F0;
  border-color: #010101;
}
.social-platform-btn--facebook:hover,
.social-platform-btn--facebook.active {
  color      : #1877F2;
  background : #EEF3FD;
  border-color: #1877F2;
}
.social-platform-btn--youtube:hover,
.social-platform-btn--youtube.active {
  color      : #FF0000;
  background : #FFF0F0;
  border-color: #FF0000;
}

.social-feed-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
  gap                   : var(--sp-4);
}

.social-feed-item {
  position      : relative;
  aspect-ratio  : 1;
  border-radius : var(--radius-xl);
  overflow      : hidden;
  cursor        : pointer;
}
.social-feed-item img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform var(--dur-slower) var(--ease-out-cubic);
}
.social-feed-item:hover img { transform: scale(1.08); }

.social-feed-item__overlay {
  position    : absolute;
  inset       : 0;
  background  : rgba(89,2,43,0.7);
  opacity     : 0;
  display     : flex;
  align-items : center;
  justify-content: center;
  flex-direction: column;
  gap         : var(--sp-2);
  color       : var(--clr-white);
  transition  : opacity var(--dur-normal) var(--ease-out-cubic);
}
.social-feed-item:hover .social-feed-item__overlay { opacity: 1; }

.social-feed-item__icon {
  font-size   : 2rem;
}
.social-feed-item__type {
  font-size   : var(--fs-xs);
  font-weight : var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* "Follow us" CTA card at end of social grid */
.social-follow-card {
  aspect-ratio    : 1;
  border-radius   : var(--radius-xl);
  background      : linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : var(--sp-3);
  padding         : var(--sp-6);
  text-align      : center;
}
.social-follow-card__handle {
  font-family : var(--font-display);
  font-size   : var(--fs-xl);
  color       : var(--clr-secondary);
}
.social-follow-card__network {
  font-size   : var(--fs-xs);
  color       : rgba(255,255,255,0.70);
  font-weight : var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.social-follow-card__icon {
  font-size   : 3rem;
  color       : var(--clr-white);
}


/* ============================================================
 *  19. ADMISSIONS CTA BANNER
 * ============================================================ */

.cta-banner {
  background    : linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 60%, var(--clr-primary-light) 100%);
  padding       : var(--sp-20) 0;
  position      : relative;
  overflow      : hidden;
  text-align    : center;
}

.cta-banner::before {
  content    : '';
  position   : absolute;
  top        : -50%;
  left       : -20%;
  width      : 60%;
  height     : 200%;
  background : rgba(242,199,68,0.08);
  border-radius: 50%;
}
.cta-banner::after {
  content    : '';
  position   : absolute;
  bottom     : -40%;
  right      : -10%;
  width      : 50%;
  height     : 160%;
  background : rgba(242,199,68,0.06);
  border-radius: 50%;
}

.cta-banner__inner {
  position   : relative;
  z-index    : var(--z-raised);
  color      : var(--clr-white);
}
.cta-banner__eyebrow {
  color      : var(--clr-secondary);
  margin-bottom: var(--sp-4);
}
.cta-banner__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-4xl);
  color        : var(--clr-white);
  margin-bottom: var(--sp-4);
}
.cta-banner__subtitle {
  font-size    : var(--fs-lg);
  color        : rgba(255,255,255,0.80);
  max-width    : 56ch;
  margin       : 0 auto var(--sp-10);
  line-height  : var(--lh-relaxed);
}
.cta-banner__actions {
  display     : flex;
  gap         : var(--sp-4);
  justify-content: center;
  flex-wrap   : wrap;
}


/* ============================================================
 *  20. GALLERY
 * ============================================================ */

/* ── 20a. Filter Controls ─────────────────────────────────── */

.gallery-filters {
  display         : flex;
  justify-content : center;
  gap             : var(--sp-3);
  flex-wrap       : wrap;
  margin-bottom   : var(--sp-10);
}

/* ── 20b. Grid Layout (Isotope.js) ────────────────────────── */

.gallery-grid {
  /* Isotope needs specific structure — do not use CSS grid here */
}

.gallery-grid .gutter-sizer { width: var(--sp-4); }
.gallery-grid .grid-sizer    { width: calc(25% - var(--sp-3)); }

.gallery-item {
  width         : calc(25% - var(--sp-3));
  margin-bottom : var(--sp-4);
  border-radius : var(--radius-card);
  overflow      : hidden;
  cursor        : pointer;
  position      : relative;
}

.gallery-item img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform var(--dur-slower) var(--ease-out-cubic);
}
.gallery-item:hover img { transform: scale(1.06); }

/* Wide items — spans 2 columns */
.gallery-item--wide { width: calc(50% - var(--sp-3)); }
/* Tall items — taller aspect ratio */
.gallery-item--tall img { aspect-ratio: 2/3; }

.gallery-item__overlay {
  position    : absolute;
  inset       : 0;
  background  : rgba(89,2,43,0.75);
  opacity     : 0;
  display     : flex;
  align-items : center;
  justify-content: center;
  transition  : opacity var(--dur-normal);
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }

.gallery-item__zoom {
  width           : 52px;
  height          : 52px;
  border-radius   : var(--radius-full);
  background      : var(--clr-secondary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--clr-text-on-gold);
  font-size       : 24px;
  transform       : scale(0.7);
  transition      : transform var(--dur-normal) var(--ease-bounce);
}
.gallery-item:hover .gallery-item__zoom { transform: scale(1); }

/* ── 20c. GLightbox Overrides ─────────────────────────────── */

.glightbox-container .gslide-description {
  background : rgba(89,2,43,0.95);
  color      : var(--clr-white);
  font-family: var(--font-body);
}
.glightbox-container .gslide-title {
  font-family : var(--font-display);
  color       : var(--clr-secondary);
}
.glightbox-container .gnext,
.glightbox-container .gprev {
  background  : var(--clr-primary);
  color       : var(--clr-secondary);
  border-radius: var(--radius-full);
}
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
  background : var(--clr-secondary);
  color      : var(--clr-primary);
}


/* ============================================================
 *  21. FORMS
 * ============================================================ */

/* ── 21a. Input Fields ────────────────────────────────────── */

.form-group {
  margin-bottom : var(--sp-5);
}

.form-label {
  display      : block;
  font-size    : var(--fs-sm);
  font-weight  : var(--fw-semibold);
  color        : var(--clr-text-secondary);
  margin-bottom: var(--sp-2);
}
.form-label--required::after {
  content : ' *';
  color   : var(--clr-error);
}

.form-input,
.form-select,
.form-textarea {
  display          : block;
  width            : 100%;
  font-family      : var(--font-body);
  font-size        : var(--fs-base);
  font-weight      : var(--fw-medium);
  color            : var(--clr-text-primary);
  background       : var(--clr-white);
  border           : 2px solid var(--clr-border-medium);
  border-radius    : var(--radius-lg);
  padding          : var(--sp-3) var(--sp-4);
  transition       : border-color var(--dur-normal),
                     box-shadow   var(--dur-normal),
                     background   var(--dur-normal);
  outline          : none;
  line-height      : var(--lh-normal);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color       : var(--clr-text-muted);
  font-weight : var(--fw-regular);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color : var(--clr-border-dark);
  background   : var(--clr-bg-soft);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color : var(--clr-primary);
  box-shadow   : 0 0 0 4px var(--clr-primary-ghost);
  background   : var(--clr-white);
}

/* ── 21b. Select & Textarea ───────────────────────────────── */

.form-select {
  appearance     : none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2359022B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right var(--sp-4) center;
  padding-right      : var(--sp-10);
  cursor             : pointer;
}

.form-textarea {
  min-height : 140px;
  resize     : vertical;
  line-height: var(--lh-relaxed);
}

/* ── 21c. Form Layouts ────────────────────────────────────── */

.form-row {
  display : grid;
  gap     : var(--sp-5);
}
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── 21d. Form Validation States ─────────────────────────── */

.form-input--error  { border-color: var(--clr-error) !important; }
.form-input--valid  { border-color: var(--clr-success) !important; }

.form-hint {
  font-size   : var(--fs-xs);
  color       : var(--clr-text-muted);
  margin-top  : var(--sp-1);
}
.form-hint--error   { color: var(--clr-error); }
.form-hint--success { color: var(--clr-success); }

/* Checkbox and Radio styling */
.form-check {
  display     : flex;
  align-items : flex-start;
  gap         : var(--sp-3);
  cursor      : pointer;
}
.form-check-input {
  width         : 20px;
  height        : 20px;
  border        : 2px solid var(--clr-border-medium);
  border-radius : var(--radius-sm);
  background    : var(--clr-white);
  cursor        : pointer;
  appearance    : none;
  flex-shrink   : 0;
  position      : relative;
  margin-top    : 2px;
  transition    : var(--transition-colors);
}
.form-check-input:checked {
  background   : var(--clr-primary);
  border-color : var(--clr-primary);
}
.form-check-input:checked::after {
  content    : '';
  position   : absolute;
  top        : 3px;
  left       : 6px;
  width      : 6px;
  height     : 10px;
  border     : 2px solid white;
  border-top : none;
  border-left: none;
  transform  : rotate(45deg);
}
.form-check-label {
  font-size  : var(--fs-sm);
  color      : var(--clr-text-secondary);
  cursor     : pointer;
  line-height: var(--lh-normal);
}


/* ============================================================
 *  22. ABOUT PAGE SPECIFICS
 * ============================================================ */

/* Timeline for school history */
.timeline {
  position   : relative;
  padding    : var(--sp-4) 0;
}
.timeline::before {
  content    : '';
  position   : absolute;
  left       : 24px;
  top        : 0;
  bottom     : 0;
  width      : 2px;
  background : linear-gradient(to bottom, var(--clr-primary), var(--clr-secondary), var(--clr-primary));
}

.timeline__item {
  display    : flex;
  gap        : var(--sp-6);
  margin-bottom: var(--sp-10);
  position   : relative;
}

.timeline__marker {
  width           : 48px;
  height          : 48px;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary);
  border          : 4px solid var(--clr-secondary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--font-display);
  font-size       : var(--fs-sm);
  color           : var(--clr-secondary);
  flex-shrink     : 0;
  box-shadow      : var(--shadow-md);
  position        : relative;
  z-index         : 2;
}

.timeline__content {
  padding-top : var(--sp-2);
  flex        : 1;
}
.timeline__year {
  font-size   : var(--fs-xs);
  font-weight : var(--fw-bold);
  color       : var(--clr-secondary-dark);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.timeline__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-xl);
  color        : var(--clr-primary);
  margin-bottom: var(--sp-2);
}
.timeline__desc {
  font-size  : var(--fs-sm);
  color      : var(--clr-text-secondary);
  line-height: var(--lh-relaxed);
  max-width  : none;
}

/* Values grid */
.values-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
  gap                   : var(--sp-5);
}
.value-item {
  text-align  : center;
  padding     : var(--sp-6);
  background  : var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow  : var(--shadow-sm);
  border      : 1px solid var(--clr-border-light);
  transition  : var(--transition-base);
}
.value-item:hover {
  transform   : translateY(-4px);
  box-shadow  : var(--shadow-md);
  border-color: var(--clr-secondary);
}
.value-item__icon  { font-size: 2.5rem; margin-bottom: var(--sp-3); display: block; }
.value-item__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-md);
  color        : var(--clr-primary);
  margin-bottom: var(--sp-2);
}
.value-item__desc  {
  font-size    : var(--fs-xs);
  color        : var(--clr-text-muted);
  max-width    : none;
  line-height  : var(--lh-relaxed);
}


/* ============================================================
 *  23. PROGRAMS PAGE SPECIFICS (Tabs)
 * ============================================================ */

.program-tabs {
  border-bottom : 2px solid var(--clr-divider);
  display       : flex;
  gap           : 0;
  overflow-x    : auto;
  margin-bottom : var(--sp-10);
  scrollbar-width: none;
}
.program-tabs::-webkit-scrollbar { display: none; }

.program-tab {
  display         : inline-flex;
  align-items     : center;
  gap             : var(--sp-2);
  font-size       : var(--fs-sm);
  font-weight     : var(--fw-bold);
  color           : var(--clr-text-muted);
  padding         : var(--sp-3) var(--sp-6);
  border-bottom   : 3px solid transparent;
  cursor          : pointer;
  white-space     : nowrap;
  transition      : color var(--dur-normal), border-color var(--dur-normal);
  text-decoration : none;
  margin-bottom   : -2px;
  background      : transparent;
  border-top      : none;
  border-left     : none;
  border-right    : none;
}
.program-tab:hover {
  color        : var(--clr-primary);
}
.program-tab.active {
  color        : var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}

.program-tab-content {
  display : none;
}
.program-tab-content.active {
  display : block;
  animation: fade-in 0.3s var(--ease-out-cubic);
}

/* Curriculum section inside program detail */
.curriculum-list {
  list-style : none;
  display    : grid;
  grid-template-columns: 1fr 1fr;
  gap        : var(--sp-3);
}
.curriculum-list li {
  display     : flex;
  align-items : flex-start;
  gap         : var(--sp-3);
  font-size   : var(--fs-sm);
  color       : var(--clr-text-secondary);
}
.curriculum-list li::before {
  content       : '✓';
  color         : var(--clr-accent-green);
  font-weight   : var(--fw-black);
  font-size     : var(--fs-sm);
  flex-shrink   : 0;
  background    : rgba(76,175,138,0.12);
  width         : 22px;
  height        : 22px;
  border-radius : var(--radius-full);
  display       : flex;
  align-items   : center;
  justify-content: center;
  margin-top    : 1px;
}


/* ============================================================
 *  24. ADMISSIONS PAGE SPECIFICS
 * ============================================================ */

/* Step-by-step enrollment process */
.enrollment-steps {
  counter-reset  : step;
  position       : relative;
}

.enrollment-step {
  display        : flex;
  gap            : var(--sp-6);
  margin-bottom  : var(--sp-8);
  position       : relative;
}

/* Connector line between steps */
.enrollment-step:not(:last-child)::after {
  content    : '';
  position   : absolute;
  left       : 24px;
  top        : 56px;
  bottom     : calc(-1 * var(--sp-8));
  width      : 2px;
  background : linear-gradient(to bottom, var(--clr-primary), transparent);
  opacity    : 0.3;
}

.enrollment-step__number {
  counter-increment : step;
  width             : 48px;
  height            : 48px;
  border-radius     : var(--radius-full);
  background        : var(--clr-primary);
  color             : var(--clr-secondary);
  font-family       : var(--font-display);
  font-size         : var(--fs-xl);
  display           : flex;
  align-items       : center;
  justify-content   : center;
  flex-shrink       : 0;
  box-shadow        : var(--shadow-md);
  border            : 3px solid var(--clr-secondary);
}

.enrollment-step__body { flex: 1; padding-top: var(--sp-1); }
.enrollment-step__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-xl);
  color        : var(--clr-primary);
  margin-bottom: var(--sp-2);
}
.enrollment-step__desc {
  font-size  : var(--fs-sm);
  color      : var(--clr-text-secondary);
  line-height: var(--lh-relaxed);
  max-width  : none;
}

/* Fees table */
.fees-table {
  width          : 100%;
  border-collapse: separate;
  border-spacing : 0 var(--sp-3);
}
.fees-table thead th {
  font-size      : var(--fs-sm);
  font-weight    : var(--fw-bold);
  color          : var(--clr-text-muted);
  text-align     : left;
  padding        : var(--sp-3) var(--sp-5);
  letter-spacing : var(--ls-wide);
  text-transform : uppercase;
  border-bottom  : 2px solid var(--clr-divider);
}
.fees-table tbody tr {
  background    : var(--clr-white);
  box-shadow    : var(--shadow-xs);
  transition    : var(--transition-base);
}
.fees-table tbody tr:hover {
  box-shadow    : var(--shadow-md);
  transform     : translateX(4px);
}
.fees-table tbody td {
  padding       : var(--sp-4) var(--sp-5);
  font-size     : var(--fs-sm);
  color         : var(--clr-text-secondary);
  border-top    : 1px solid var(--clr-divider);
  border-bottom : 1px solid var(--clr-divider);
}
.fees-table tbody td:first-child {
  border-left   : 1px solid var(--clr-divider);
  border-radius : var(--radius-lg) 0 0 var(--radius-lg);
  font-weight   : var(--fw-semibold);
  color         : var(--clr-primary);
}
.fees-table tbody td:last-child {
  border-right  : 1px solid var(--clr-divider);
  border-radius : 0 var(--radius-lg) var(--radius-lg) 0;
  font-weight   : var(--fw-bold);
  color         : var(--clr-accent-green);
}


/* ============================================================
 *  25. NEWS & EVENTS PAGE
 * ============================================================ */

.events-list {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-4);
}
.event-item {
  display        : flex;
  gap            : var(--sp-5);
  padding        : var(--sp-5);
  background     : var(--clr-white);
  border-radius  : var(--radius-card);
  border         : 1px solid var(--clr-border-light);
  box-shadow     : var(--shadow-xs);
  transition     : var(--transition-base);
  align-items    : flex-start;
}
.event-item:hover {
  box-shadow   : var(--shadow-md);
  border-color : var(--clr-primary-light);
  transform    : translateX(4px);
}

.event-item__date {
  width           : 56px;
  min-width       : 56px;
  height          : 64px;
  background      : var(--clr-primary);
  border-radius   : var(--radius-lg);
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
}
.event-item__day {
  font-family : var(--font-display);
  font-size   : var(--fs-2xl);
  color       : var(--clr-secondary);
  line-height : 1;
}
.event-item__month {
  font-size   : var(--fs-xs);
  font-weight : var(--fw-bold);
  color       : rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.event-item__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-lg);
  color        : var(--clr-primary);
  margin-bottom: var(--sp-1);
}
.event-item__meta {
  display      : flex;
  gap          : var(--sp-4);
  font-size    : var(--fs-xs);
  color        : var(--clr-text-muted);
  margin-bottom: var(--sp-2);
  flex-wrap    : wrap;
}
.event-item__desc {
  font-size  : var(--fs-sm);
  color      : var(--clr-text-secondary);
  max-width  : none;
}

/* Newsletter signup bar */
.newsletter-bar {
  background    : linear-gradient(135deg, var(--clr-secondary-light), var(--clr-bg-warm));
  border        : 2px solid var(--clr-secondary);
  border-radius : var(--radius-card-lg);
  padding       : var(--sp-10);
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : var(--sp-8);
  flex-wrap     : wrap;
}
.newsletter-bar__title {
  font-family : var(--font-display);
  font-size   : var(--fs-2xl);
  color       : var(--clr-primary);
}
.newsletter-bar__sub {
  font-size   : var(--fs-sm);
  color       : var(--clr-text-secondary);
  max-width   : none;
}
.newsletter-bar__form {
  display  : flex;
  gap      : var(--sp-2);
  flex-wrap: wrap;
  flex     : 1;
  min-width: 280px;
}
.newsletter-bar__input {
  flex         : 1;
  min-width    : 200px;
  padding      : var(--sp-3) var(--sp-5);
  border       : 2px solid var(--clr-border-medium);
  border-radius: var(--radius-full);
  font-family  : var(--font-body);
  font-size    : var(--fs-sm);
  background   : var(--clr-white);
  outline      : none;
  transition   : var(--transition-base);
}
.newsletter-bar__input:focus {
  border-color : var(--clr-primary);
  box-shadow   : 0 0 0 4px var(--clr-primary-ghost);
}


/* ============================================================
 *  26. CONTACT PAGE
 * ============================================================ */

.contact-grid {
  display               : grid;
  grid-template-columns : 1fr 1.4fr;
  gap                   : var(--sp-12);
  align-items           : start;
}

.contact-info-card {
  background     : var(--clr-primary);
  border-radius  : var(--radius-card-lg);
  padding        : var(--sp-10);
  color          : var(--clr-white);
  position       : relative;
  overflow       : hidden;
}
/* Decorative blob inside contact card */
.contact-info-card::before {
  content       : '';
  position      : absolute;
  bottom        : -60px;
  right         : -60px;
  width         : 200px;
  height        : 200px;
  background    : rgba(242,199,68,0.12);
  border-radius : var(--radius-full);
}

.contact-info-card__title {
  font-family  : var(--font-display);
  font-size    : var(--fs-3xl);
  color        : var(--clr-secondary);
  margin-bottom: var(--sp-2);
}
.contact-info-card__sub {
  font-size   : var(--fs-sm);
  color       : rgba(255,255,255,0.75);
  margin-bottom: var(--sp-8);
  max-width   : none;
}

.contact-info-item {
  display      : flex;
  align-items  : flex-start;
  gap          : var(--sp-4);
  margin-bottom: var(--sp-6);
}
.contact-info-item:last-of-type { margin-bottom: 0; }

.contact-info-item__icon {
  width           : 44px;
  height          : 44px;
  border-radius   : var(--radius-lg);
  background      : rgba(242,199,68,0.15);
  border          : 1px solid rgba(242,199,68,0.25);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 20px;
  flex-shrink     : 0;
}
.contact-info-item__label {
  font-size   : var(--fs-xs);
  color       : rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-weight : var(--fw-bold);
  margin-bottom: var(--sp-1);
}
.contact-info-item__value {
  font-size   : var(--fs-sm);
  font-weight : var(--fw-semibold);
  color       : var(--clr-white);
  max-width   : none;
}
.contact-info-item__value a {
  color           : var(--clr-secondary);
  text-decoration : none;
}
.contact-info-item__value a:hover {
  text-decoration : underline;
}

.contact-social-links {
  display    : flex;
  gap        : var(--sp-3);
  margin-top : var(--sp-8);
  flex-wrap  : wrap;
}
.contact-social-link {
  width         : 42px;
  height        : 42px;
  border-radius : var(--radius-full);
  background    : rgba(255,255,255,0.10);
  border        : 1px solid rgba(255,255,255,0.20);
  display       : flex;
  align-items   : center;
  justify-content: center;
  color         : var(--clr-white);
  font-size     : 16px;
  transition    : var(--transition-base);
  text-decoration: none;
}
.contact-social-link:hover {
  background   : var(--clr-secondary);
  color        : var(--clr-text-on-gold);
  border-color : var(--clr-secondary);
  transform    : translateY(-3px);
}

/* Contact form card */
.contact-form-card {
  background     : var(--clr-white);
  border-radius  : var(--radius-card-lg);
  padding        : var(--sp-10);
  box-shadow     : var(--shadow-lg);
  border         : 1px solid var(--clr-border-light);
}
.contact-form-card__title {
  font-family   : var(--font-display);
  font-size     : var(--fs-2xl);
  color         : var(--clr-primary);
  margin-bottom : var(--sp-2);
}
.contact-form-card__sub {
  font-size     : var(--fs-sm);
  color         : var(--clr-text-muted);
  margin-bottom : var(--sp-8);
  max-width     : none;
}

/* Map embed */
.map-wrap {
  border-radius : var(--radius-card-lg);
  overflow      : hidden;
  box-shadow    : var(--shadow-md);
  border        : 3px solid var(--clr-secondary);
}
.map-wrap iframe {
  display    : block;
  width      : 100%;
  height     : 400px;
  border     : none;
}

/* Hours table */
.hours-table { width: 100%; }
.hours-table tr {
  display : flex;
  justify-content: space-between;
  padding : var(--sp-3) 0;
  border-bottom: 1px solid var(--clr-divider);
}
.hours-table tr:last-child { border-bottom: none; }
.hours-table td {
  font-size : var(--fs-sm);
  color     : var(--clr-text-secondary);
}
.hours-table td:last-child {
  font-weight : var(--fw-semibold);
  color       : var(--clr-primary);
}
.hours-table .hours-closed td:last-child { color: var(--clr-error); }


/* ============================================================
 *  27. FOOTER
 * ============================================================ */

.footer {
  background : var(--clr-primary-dark);
  color      : rgba(255,255,255,0.80);
  padding-top: var(--sp-20);
}

.footer__grid {
  display               : grid;
  grid-template-columns : 2fr 1fr 1fr 1fr;
  gap                   : var(--sp-12);
  padding-bottom        : var(--sp-16);
  border-bottom         : 1px solid rgba(255,255,255,0.10);
}

.footer__brand { }

.footer__logo {
  display       : flex;
  align-items   : center;
  gap           : var(--sp-3);
  margin-bottom : var(--sp-5);
  text-decoration: none;
}
.footer__logo-img {
  width         : 52px;
  height        : 52px;
  border-radius : var(--radius-md);
  object-fit    : cover;
  border        : 2px solid rgba(242,199,68,0.30);
}
.footer__logo-name {
  font-family : var(--font-display);
  font-size   : var(--fs-xl);
  color       : var(--clr-secondary);
  line-height : 1;
}
.footer__logo-tagline {
  font-size   : var(--fs-xs);
  color       : rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-weight : var(--fw-medium);
}

.footer__about {
  font-size  : var(--fs-sm);
  line-height: var(--lh-relaxed);
  color      : rgba(255,255,255,0.60);
  margin-bottom: var(--sp-6);
  max-width  : none;
}

.footer__socials {
  display : flex;
  gap     : var(--sp-2);
}
.footer__social-link {
  width           : 38px;
  height          : 38px;
  border-radius   : var(--radius-full);
  background      : rgba(255,255,255,0.08);
  border          : 1px solid rgba(255,255,255,0.12);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : rgba(255,255,255,0.70);
  font-size       : 15px;
  text-decoration : none;
  transition      : var(--transition-base);
}
.footer__social-link:hover {
  background   : var(--clr-secondary);
  color        : var(--clr-text-on-gold);
  border-color : var(--clr-secondary);
  transform    : translateY(-3px);
}

/* Footer columns */
.footer__col-title {
  font-family   : var(--font-display);
  font-size     : var(--fs-md);
  color         : var(--clr-white);
  margin-bottom : var(--sp-5);
  position      : relative;
  padding-bottom: var(--sp-3);
}
.footer__col-title::after {
  content       : '';
  position      : absolute;
  bottom        : 0;
  left          : 0;
  width         : 32px;
  height        : 3px;
  background    : var(--clr-secondary);
  border-radius : var(--radius-full);
}

.footer__links {
  list-style : none;
  display    : flex;
  flex-direction: column;
  gap        : var(--sp-3);
}
.footer__link {
  font-size       : var(--fs-sm);
  color           : rgba(255,255,255,0.60);
  text-decoration : none;
  display         : flex;
  align-items     : center;
  gap             : var(--sp-2);
  transition      : color var(--dur-normal), gap var(--dur-normal) var(--ease-bounce);
}
.footer__link::before {
  content       : '→';
  color         : var(--clr-secondary);
  font-size     : var(--fs-xs);
  opacity       : 0;
  transition    : opacity var(--dur-normal), transform var(--dur-normal) var(--ease-bounce);
  transform     : translateX(-8px);
}
.footer__link:hover {
  color : var(--clr-secondary);
  gap   : var(--sp-3);
}
.footer__link:hover::before {
  opacity   : 1;
  transform : translateX(0);
}

/* Footer contact detail items */
.footer__contact-item {
  display      : flex;
  gap          : var(--sp-3);
  align-items  : flex-start;
  margin-bottom: var(--sp-4);
}
.footer__contact-icon {
  color     : var(--clr-secondary);
  font-size : var(--fs-base);
  flex-shrink: 0;
  margin-top : 2px;
}
.footer__contact-text {
  font-size  : var(--fs-sm);
  color      : rgba(255,255,255,0.60);
  max-width  : none;
  line-height: var(--lh-relaxed);
}
.footer__contact-text a {
  color           : rgba(255,255,255,0.80);
  text-decoration : none;
}
.footer__contact-text a:hover { color: var(--clr-secondary); }

/* Footer bottom bar */
.footer__bottom {
  padding    : var(--sp-6) 0;
  display    : flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap  : wrap;
  gap        : var(--sp-4);
}
.footer__copyright {
  font-size : var(--fs-xs);
  color     : rgba(255,255,255,0.40);
}
.footer__copyright a {
  color           : rgba(255,255,255,0.60);
  text-decoration : none;
}
.footer__copyright a:hover { color: var(--clr-secondary); }
.footer__bottom-links {
  display    : flex;
  gap        : var(--sp-5);
  list-style : none;
}
.footer__bottom-link {
  font-size       : var(--fs-xs);
  color           : rgba(255,255,255,0.40);
  text-decoration : none;
  transition      : color var(--dur-normal);
}
.footer__bottom-link:hover { color: rgba(255,255,255,0.70); }


/* ============================================================
 *  28. SCROLL-TO-TOP BUTTON
 * ============================================================ */

.scroll-top {
  position        : fixed;
  bottom          : var(--sp-8);
  right           : var(--sp-8);
  width           : 48px;
  height          : 48px;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary);
  color           : var(--clr-secondary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 20px;
  z-index         : var(--z-sticky);
  box-shadow      : var(--shadow-lg);
  border          : 2px solid var(--clr-secondary);
  cursor          : pointer;
  opacity         : 0;
  visibility      : hidden;
  transform       : translateY(16px);
  transition      : opacity    var(--dur-slow) var(--ease-out-cubic),
                   visibility var(--dur-slow),
                   transform  var(--dur-slow) var(--ease-out-cubic),
                   background var(--dur-normal),
                   box-shadow var(--dur-normal);
}
.scroll-top.visible {
  opacity    : 1;
  visibility : visible;
  transform  : translateY(0);
}
.scroll-top:hover {
  background  : var(--clr-secondary);
  color       : var(--clr-primary);
  box-shadow  : var(--shadow-glow-secondary);
  transform   : translateY(-4px);
}


/* ============================================================
 *  29. PRELOADER / PAGE LOADER
 *  Full-screen loading overlay — hidden after page loads.
 * ============================================================ */
/* Initial state: Hide scrollbar while loading */
body:not(.loaded) {
  overflow: hidden;
}

.preloader {
  position         : fixed;
  inset            : 0;
  background       : var(--clr-primary-dark, #59022B);
  z-index          : 9999; /* Highest priority */
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  justify-content  : center;
  gap              : 2rem;
  transition       : opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1),
                     visibility 0.6s;
}

/* Container for overlapping elements */
.preloader__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}

.preloader__logo {
  position: absolute;
  z-index : 2;
  display : flex;
  align-items: center;
  justify-content: center;
  /* Gentle pulse animation for the logo */
  animation: logo-pulse 2s ease-in-out infinite;
}

.preloader__logo img {
  width: 90px; /* Adjust to fit comfortably in the 120px circle */
  height: auto;
  display: block;
}

.preloader__spinner {
  position: absolute;
  width       : 100%;
  height      : 100%;
  border      : 3px solid rgba(242,199,68,0.1);
  border-top  : 3px solid var(--clr-secondary, #F2C744);
  border-radius : 50%;
  animation   : spin 1s linear infinite;
  z-index     : 1;
}

.preloader__text {
  font-size     : 0.85rem;
  color         : rgba(255,255,255,0.6);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight   : 500;
  margin: 0;
}

/* Hidden State */
.preloader.preloader--hidden {
  opacity    : 0;
  visibility : hidden;
  pointer-events: none;
}

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.8; }
}


/* ============================================================
 *  30. ANIMATIONS & KEYFRAMES
 *  All @keyframe definitions.  Components use these via
 *  animation: <name> <dur> <easing> <delay> <fill>;
 * ============================================================ */

/* Blob border-radius morphing */
@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%       { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; }
  50%       { border-radius: 70% 30% 40% 60% / 30% 60% 40% 70%; }
  75%       { border-radius: 30% 70% 60% 40% / 70% 40% 60% 30%; }
}

/* Gentle vertical float */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* Pulse dot for live indicator */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Scale pulse — preloader logo */
@keyframes pulse-scale {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.08); opacity: 0.8; }
}

/* Spinner rotation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Scroll drop — navbar scroll indicator line */
@keyframes scroll-drop {
  0%   { top: -100%; }
  100% { top: 200%;  }
}

/* Fade in from below — AOS base */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Fade in from left */
@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0);      }
}

/* Fade in from right */
@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Simple fade in */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Zoom in */
@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Shimmer — loading skeleton */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Hero parallax move */
@keyframes parallax-slow {
  0%, 100% { transform: translate(0, 0) rotate(0deg);     }
  33%       { transform: translate(8px, -8px) rotate(2deg); }
  66%       { transform: translate(-6px, 6px) rotate(-1deg); }
}

/* Typing cursor blink */
@keyframes cursor-blink {
  0%, 100% { border-color: transparent; }
  50%       { border-color: var(--clr-secondary); }
}

/* Bounce on hover — icon reaction */
@keyframes bounce-once {
  0%   { transform: translateY(0);    }
  30%  { transform: translateY(-10px);}
  50%  { transform: translateY(-5px); }
  70%  { transform: translateY(-8px); }
  100% { transform: translateY(0);    }
}

/* Slide in from top (navbar on mobile) */
@keyframes slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Progress bar fill */
@keyframes fill-bar {
  from { width: 0; }
  to   { width: var(--bar-width, 100%); }
}

/* Rotating gradient border */
@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

/* Confetti fall (used on graduation/achievement pages) */
@keyframes confetti-fall {
  0%   { transform: translateY(-100%) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(100vh)  rotate(720deg); opacity: 0; }
}

/* Ripple on click */
@keyframes ripple {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(4); opacity: 0;   }
}


/* ============================================================
 *  31. AOS (ANIMATE ON SCROLL) OVERRIDES
 *  AOS.js adds [data-aos] attributes. We override defaults
 *  here to match our brand timing and easing curves.
 * ============================================================ */

/* Ensure AOS animations use our custom easing */
[data-aos] {
  transition-timing-function : var(--ease-out-cubic) !important;
}

/* Increase default AOS duration slightly */
[data-aos][data-aos-duration='400'] {
  transition-duration : 400ms;
}

/* Custom AOS fade-up variant */
[data-aos='abaa-fade-up'] {
  transform  : translateY(40px);
  opacity    : 0;
  transition : transform 0.6s var(--ease-out-cubic),
               opacity   0.6s var(--ease-out-cubic);
}
[data-aos='abaa-fade-up'].aos-animate {
  transform : translateY(0);
  opacity   : 1;
}

/* Custom AOS scale-in variant */
[data-aos='abaa-scale'] {
  transform  : scale(0.9);
  opacity    : 0;
  transition : transform 0.5s var(--ease-spring),
               opacity   0.5s var(--ease-out-cubic);
}
[data-aos='abaa-scale'].aos-animate {
  transform : scale(1);
  opacity   : 1;
}


/* ============================================================
 *  32. SWIPER.JS OVERRIDES
 *  Override Swiper's defaults to match the ABAA brand.
 * ============================================================ */

/* Navigation arrows */
.swiper-button-prev,
.swiper-button-next {
  width         : 48px;
  height        : 48px;
  border-radius : var(--radius-full);
  background    : var(--clr-white);
  border        : 2px solid var(--clr-border-medium);
  box-shadow    : var(--shadow-md);
  transition    : var(--transition-base);
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size  : 14px;
  font-weight: var(--fw-black);
  color      : var(--clr-primary);
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background   : var(--clr-primary);
  border-color : var(--clr-primary);
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  color : var(--clr-secondary);
}

/* Pagination dots */
.swiper-pagination-bullet {
  background : var(--clr-gray-300);
  opacity    : 1;
  transition : background var(--dur-normal),
               width     var(--dur-normal) var(--ease-bounce);
}
.swiper-pagination-bullet-active {
  background    : var(--clr-primary);
  width         : 24px;
  border-radius : var(--radius-full);
}


/* ============================================================
 *  33. UTILITY CLASSES
 * ============================================================ */

/* ── 33a. Display ─────────────────────────────────────────── */
.d-none    { display: none !important;         }
.d-block   { display: block !important;        }
.d-flex    { display: flex !important;         }
.d-grid    { display: grid !important;         }
.d-inline  { display: inline !important;       }
.d-inline-flex { display: inline-flex !important; }
.d-inline-block{ display: inline-block !important;}

/* ── 33b. Spacing ─────────────────────────────────────────── */
.m-0  { margin: 0 !important;             }
.mt-0 { margin-top: 0 !important;         }
.mb-0 { margin-bottom: 0 !important;      }
.mt-4 { margin-top: var(--sp-4);          }
.mt-6 { margin-top: var(--sp-6);          }
.mt-8 { margin-top: var(--sp-8);          }
.mb-4 { margin-bottom: var(--sp-4);       }
.mb-6 { margin-bottom: var(--sp-6);       }
.mb-8 { margin-bottom: var(--sp-8);       }
.mb-10{ margin-bottom: var(--sp-10);      }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-0  { padding: 0 !important;            }
.p-4  { padding: var(--sp-4);             }
.p-6  { padding: var(--sp-6);             }
.p-8  { padding: var(--sp-8);             }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }

/* ── 33c. Text Alignment ──────────────────────────────────── */
.text-left   { text-align: left !important;   }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important;  }

/* ── 33d. Text Colors ─────────────────────────────────────── */
.text-primary   { color: var(--clr-primary)   !important; }
.text-secondary { color: var(--clr-secondary-dark) !important; }
.text-white     { color: var(--clr-white)     !important; }
.text-muted     { color: var(--clr-text-muted)!important; }
.text-success   { color: var(--clr-success)   !important; }
.text-warning   { color: var(--clr-warning)   !important; }
.text-error     { color: var(--clr-error)     !important; }

/* ── 33e. Backgrounds ─────────────────────────────────────── */
.bg-primary   { background: var(--clr-primary)       !important; }
.bg-secondary { background: var(--clr-secondary)     !important; }
.bg-white     { background: var(--clr-white)         !important; }
.bg-cream     { background: var(--clr-bg-warm)       !important; }
.bg-tint      { background: var(--clr-primary-tint)  !important; }

/* ── 33f. Borders ─────────────────────────────────────────── */
.rounded-sm   { border-radius: var(--radius-sm)   !important; }
.rounded-md   { border-radius: var(--radius-md)   !important; }
.rounded-lg   { border-radius: var(--radius-lg)   !important; }
.rounded-xl   { border-radius: var(--radius-xl)   !important; }
.rounded-2xl  { border-radius: var(--radius-2xl)  !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ── 33g. Misc ────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden;   }
.relative        { position: relative; }
.absolute        { position: absolute; }
.w-full          { width: 100%;        }
.h-full          { height: 100%;       }
.object-cover    { object-fit: cover;  }
.object-contain  { object-fit: contain;}
.pointer         { cursor: pointer;    }
.no-select       { user-select: none;  }
.sr-only         {   /* Visually hidden but accessible to screen readers */
  position   : absolute;
  width      : 1px;
  height     : 1px;
  padding    : 0;
  margin     : -1px;
  overflow   : hidden;
  clip       : rect(0, 0, 0, 0);
  white-space: nowrap;
  border     : 0;
}

/* Loading skeleton animation */
.skeleton {
  background    : linear-gradient(90deg,
    var(--clr-gray-100) 25%,
    var(--clr-gray-50)  50%,
    var(--clr-gray-100) 75%
  );
  background-size : 200% 100%;
  animation       : shimmer 1.5s ease-in-out infinite;
  border-radius   : var(--radius-md);
}

/* Aspect ratio helpers */
.aspect-square  { aspect-ratio: 1 / 1;  }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-portrait{ aspect-ratio: 3 / 4;  }
.aspect-wide    { aspect-ratio: 21 / 9; }

/* Text size utilities */
.text-xs   { font-size: var(--fs-xs)   !important; }
.text-sm   { font-size: var(--fs-sm)   !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg)   !important; }
.text-xl   { font-size: var(--fs-xl)   !important; }
.text-2xl  { font-size: var(--fs-2xl)  !important; }
.text-3xl  { font-size: var(--fs-3xl)  !important; }
.text-4xl  { font-size: var(--fs-4xl)  !important; }

/* Font weight utilities */
.font-light     { font-weight: var(--fw-light);     }
.font-regular   { font-weight: var(--fw-regular);   }
.font-medium    { font-weight: var(--fw-medium);    }
.font-semibold  { font-weight: var(--fw-semibold);  }
.font-bold      { font-weight: var(--fw-bold);      }
.font-extrabold { font-weight: var(--fw-extrabold); }

/* Font family */
.font-display  { font-family: var(--font-display) !important; }
.font-body     { font-family: var(--font-body)    !important; }

/* Divider with label */
.divider-label {
  display     : flex;
  align-items : center;
  gap         : var(--sp-4);
  color       : var(--clr-text-muted);
  font-size   : var(--fs-sm);
  font-weight : var(--fw-medium);
}
.divider-label::before,
.divider-label::after {
  content    : '';
  flex       : 1;
  height     : 1px;
  background : var(--clr-divider);
}

/* Glassmorphism card */
.glass-card {
  background      : rgba(255,255,255,0.15);
  backdrop-filter : blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border          : 1px solid rgba(255,255,255,0.20);
  border-radius   : var(--radius-card);
}

/* Decorative blob shape */
.blob {
  border-radius : var(--radius-blob);
  animation     : blob-morph 12s ease-in-out infinite;
}
.blob-alt {
  border-radius : var(--radius-blob-alt);
  animation     : blob-morph 10s ease-in-out 3s infinite reverse;
}

/* Progress bar */
.progress {
  width         : 100%;
  height        : 8px;
  background    : var(--clr-gray-100);
  border-radius : var(--radius-full);
  overflow      : hidden;
}
.progress__bar {
  height        : 100%;
  border-radius : var(--radius-full);
  background    : linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  animation     : fill-bar 1.2s var(--ease-out-cubic) both;
}

/* Sticky sidebar */
.sticky-top {
  position : sticky;
  top      : calc(var(--navbar-height) + var(--sp-6));
}

/* Separator dot */
.sep-dot {
  width         : 5px;
  height        : 5px;
  border-radius : var(--radius-full);
  background    : var(--clr-gray-300);
  display       : inline-block;
  vertical-align: middle;
  margin        : 0 var(--sp-2);
}


/* ============================================================
 *  34. RESPONSIVE DESIGN
 *  Mobile-first: base styles apply to all screen sizes.
 *  Media queries ADD adjustments for larger screens.
 * ============================================================ */

/* ── 34a. Large Desktop (1400px+) ─────────────────────────── */
@media (min-width: 1400px) {
  .container { max-width: var(--container-2xl); }

  .hero__inner {
    grid-template-columns: 1fr 0.9fr;
  }

  .footer__grid {
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
  }
}

/* ── 34b. Desktop (≤1200px) ───────────────────────────────── */
@media (max-width: 1200px) {
  .gallery-grid .grid-sizer,
  .gallery-item { width: calc(33.333% - var(--sp-3)); }
  .gallery-item--wide { width: calc(66.666% - var(--sp-3)); }

  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .footer__grid > *:first-child {
    grid-column : span 3;
  }
}

/* ── 34c. Tablet Landscape (≤992px) ──────────────────────── */
@media (max-width: 992px) {

  /* Navigation collapses to hamburger */
  .navbar__nav,
  .navbar__cta {
    display : none;
  }
  .navbar__hamburger {
    display : flex;
  }

  /* Hero becomes single column */
  .hero__inner {
    grid-template-columns : 1fr;
    text-align            : center;
    gap                   : var(--sp-12);
  }
  .hero__visual {
    order : -1; /* Image above content */
  }
  .hero__subtitle,
  .hero__actions { max-width: none; }
  .hero__actions { justify-content: center; }
  .hero__stats   { justify-content: center; }

  /* Programs featured card breaks grid */
  .programs-grid .program-card--featured {
    grid-column           : span 1;
    grid-template-columns : 1fr;
  }
  .programs-grid .program-card--featured .program-card__image-wrap {
    height : 240px;
  }

  /* Why section collapses */
  .why-section__image-grid {
    grid-template-columns : 1fr 1fr;
  }

  /* Contact grid stacks */
  .contact-grid {
    grid-template-columns : 1fr;
  }

  /* Testimonials hide arrows */
  .swiper-button-prev,
  .swiper-button-next {
    display : none;
  }

  /* Footer grid */
  .footer__grid {
    grid-template-columns : 1fr 1fr;
    gap                   : var(--sp-8);
  }
  .footer__grid > *:first-child {
    grid-column : span 2;
  }

  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ── 34d. Tablet Portrait (≤768px) ───────────────────────── */
@media (max-width: 768px) {

  :root {
    --navbar-height : 64px;
    --navbar-height-scrolled: 56px;
  }

  /* Gallery 2 columns */
  .gallery-grid .grid-sizer,
  .gallery-item { width: calc(50% - var(--sp-2)); }
  .gallery-item--wide { width: calc(100%); }

  /* Form rows collapse */
  .form-row-2,
  .form-row-3 { grid-template-columns: 1fr; }

  /* About timeline */
  .timeline::before { left: 20px; }
  .timeline__marker {
    width  : 40px;
    height : 40px;
  }

  /* Stats strip */
  .stats-strip__inner {
    grid-template-columns : 1fr 1fr;
    gap                   : var(--sp-6);
  }
  .stat-item:not(:last-child)::after { display: none; }

  /* Section headers */
  .section-header { margin-bottom: var(--sp-10); }
  .section-title  { font-size: var(--fs-3xl); }

  /* Footer */
  .footer__grid {
    grid-template-columns : 1fr;
  }
  .footer__grid > *:first-child { grid-column: span 1; }

  /* Programs grid */
  .programs-grid { grid-template-columns: 1fr; }

  /* Activities grid 2 cols */
  .activities-grid {
    grid-template-columns: 1fr 1fr;
  }
  .activities-grid .activity-card:first-child { grid-row: span 1; }

  /* Grid utilities override */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Newsletter bar stacks */
  .newsletter-bar {
    flex-direction : column;
    text-align     : center;
  }

  /* CTA banner */
  .cta-banner__title { font-size: var(--fs-3xl); }

  /* Curriculum list 1 col */
  .curriculum-list { grid-template-columns: 1fr; }

  /* Why image grid 2 cols */
  .why-section__image-grid {
    grid-template-columns : 1fr 1fr;
  }
  .why-section__image:nth-child(1),
  .why-section__image:nth-child(2),
  .why-section__image:nth-child(3),
  .why-section__image:nth-child(4) {
    height        : 180px;
    border-radius : var(--radius-card);
  }

  /* Scroll top position */
  .scroll-top {
    bottom : var(--sp-6);
    right  : var(--sp-6);
    width  : 44px;
    height : 44px;
  }
}

/* ── 34e. Mobile Large (≤576px) ───────────────────────────── */
@media (max-width: 576px) {

  :root { --section-padding-x: 1rem; }

  /* Hero */
  .hero__image-frame { width: min(320px, 90vw); }
  .hero__badge { display: none; } /* Too cramped on small screens */
  .hero__title { font-size: var(--fs-4xl); }
  .hero__stats { gap: var(--sp-5); flex-wrap: wrap; justify-content: center; }

  /* Gallery 1 column */
  .gallery-grid .grid-sizer,
  .gallery-item { width: 100%; }
  .gallery-item--wide { width: 100%; }

  /* Activities 1 col */
  .activities-grid { grid-template-columns: 1fr; }

  /* Stats 1 col */
  .stats-strip__inner { grid-template-columns: 1fr 1fr; }

  /* CTA buttons stack */
  .hero__actions,
  .cta-banner__actions { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; justify-content: center; }

  /* Contact form */
  .contact-form-card { padding: var(--sp-6); }
  .contact-info-card { padding: var(--sp-6); }

  /* Program tabs scroll */
  .program-tabs { gap: var(--sp-2); }
  .program-tab  { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }

  /* News card */
  .news-card__image-wrap { height: 160px; }

  /* Team card */
  .team-card { padding: var(--sp-6) var(--sp-4); }

  /* Footer bottom */
  .footer__bottom {
    flex-direction : column;
    text-align     : center;
  }

  /* Buttons full width on very small screens */
  .btn-block-mobile {
    width            : 100%;
    justify-content  : center;
  }
}

/* ── 34f. Mobile Small (≤375px) ───────────────────────────── */
@media (max-width: 375px) {

  :root {
    --navbar-height : 60px;
  }

  .hero__title   { font-size: var(--fs-3xl); }
  .section-title { font-size: var(--fs-2xl); }

  .stats-strip__inner {
    grid-template-columns : 1fr;
    gap : var(--sp-5);
  }

  .grid-4 { grid-template-columns: 1fr; }

  .feature-card { padding: var(--sp-6); }
}


/* ============================================================
 *  35. PRINT STYLES
 *  Clean, printer-friendly layout.
 * ============================================================ */

@media print {
  *,
  *::before,
  *::after {
    background   : transparent !important;
    color        : #000 !important;
    box-shadow   : none !important;
    text-shadow  : none !important;
  }

  /* Show the URL after links */
  a[href]::after {
    content : ' (' attr(href) ')';
    font-size: 0.8em;
    color    : #555;
  }

  /* Hide non-printable elements */
  .navbar,
  .mobile-drawer,
  .mobile-overlay,
  .scroll-top,
  .preloader,
  .hero__scroll,
  .social-strip,
  .cta-banner,
  footer {
    display : none !important;
  }

  /* Ensure images print */
  img { max-width: 100% !important; }

  /* Remove page breaks inside key elements */
  .card,
  .testimonial-card,
  .program-card,
  .news-card {
    page-break-inside : avoid;
  }

  /* Section padding reduction for print */
  .section { padding: 1rem 0; }

  .container { max-width: 100%; padding: 0; }
}


/* ============================================================
 *  36. ACCESSIBILITY & FOCUS STYLES
 *  High-visibility focus indicators for keyboard navigation.
 * ============================================================ */

/* Global focus ring — visible to keyboard users, hidden for mouse */
:focus-visible {
  outline        : 3px solid var(--clr-secondary);
  outline-offset : 3px;
  border-radius  : var(--radius-sm);
}

/* Remove default outline for mouse users (handled by :focus-visible) */
:focus:not(:focus-visible) {
  outline : none;
}

/* Ensure interactive elements have meaningful hover/focus cursor */
a, button, [role='button'], [tabindex='0'],
input, select, textarea, label {
  cursor : pointer;
}
input, textarea, select {
  cursor : text;
}

/* Skip to main content link — visible on focus */
.skip-link {
  position        : fixed;
  top             : var(--sp-4);
  left            : var(--sp-4);
  padding         : var(--sp-3) var(--sp-6);
  background      : var(--clr-primary);
  color           : var(--clr-secondary);
  font-weight     : var(--fw-bold);
  border-radius   : var(--radius-full);
  z-index         : calc(var(--z-preloader) + 1);
  transform       : translateY(-100px);
  transition      : transform var(--dur-normal);
  text-decoration : none;
}
.skip-link:focus {
  transform : translateY(0);
}

/* Increase touch target size on mobile */
@media (max-width: 768px) {
  .btn, a, button,
  .navbar__link,
  .footer__link,
  .form-check {
    min-height : 44px; /* WCAG 2.5.5 minimum touch target */
  }
}

/* Respect OS reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration    : 0.01ms !important;
    animation-iteration-count : 1 !important;
    transition-duration   : 0.01ms !important;
    scroll-behavior       : auto !important;
  }

  .blob,
  .blob-alt,
  .hero__main-image { animation: none !important; }
}

/* High contrast mode adjustments */
@media (forced-colors: active) {
  .btn-primary,
  .btn-secondary {
    border : 2px solid ButtonText;
  }
  .card {
    border : 1px solid ButtonText;
  }
}


/* ============================================================
 *  37. DARK MODE CONSIDERATION STUBS
 *  Reserved for future dark mode implementation.
 *  School sites often remain light for readability.
 *  These stubs allow easy activation via class or media query.
 * ============================================================ */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --clr-off-white       : #1A0F08;
    --clr-bg-warm         : #200D05;
    --clr-white           : #2E1A10;
    --clr-text-primary    : #F5EDE8;
    --clr-text-secondary  : #C8B8AC;
    --clr-text-muted      : #8A7060;
    --clr-border-light    : rgba(242,199,68,0.10);
    --clr-border-medium   : rgba(242,199,68,0.15);
    --clr-divider         : #3D2518;
    --shadow-card         : 0 4px 24px rgba(0,0,0,0.25);
    --shadow-card-hover   : 0 12px 40px rgba(0,0,0,0.40);
  }
}
*/


/* ============================================================
 *  END OF STYLESHEET
 *  Total design tokens : 80+ CSS variables
 *  Total components    : 30+ component groups
 *  Total keyframes     : 15 named animations
 *  Breakpoints covered : 6 (375px → 1400px+)
  Accessibility       : Focus styles, skip link, reduced motion
  Print styles        : Clean layout, URL visibility, hidden nav/footer
  Future-proofing     : Dark mode stubs, utility classes
  Performance         : Minimal use of heavy properties, optimized animations
 *  This stylesheet is designed to be a comprehensive, scalable foundation
 *  for any ABAA school website, with a focus on maintainability and brand consistency.
 *  It is intended to be used with the Tailwind CSS framework, but can be used alone.
  For best results, pair with a well-structured HTML and minimal JavaScript.
 * ============================================================ */