/* ==========================================================================
   Vrindavan Sangeet Samiti: Official Institutional Design System
   Phase 1 Locked Standard: Cultural Heritage, Academic Trust, Editorial Clarity
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. COLOR SYSTEM (Approved Semantic Tokens)
     -------------------------------------------------------------------------- */
  --color-main-bg: #F7F6F2;         /* Warm Ivory: primary background */
  --color-bg: #F7F6F2;              /* Warm Ivory alias */
  --color-cream: #F7F6F2;           /* Warm Ivory alias */
  --color-cream-subtle: #FAF9F6;    /* Soft Ivory */
  --color-white: #FFFFFF;           /* Pure White: surfaces */
  --color-surface: #FFFFFF;         /* Pure White: surface token */
  --color-surface-elevated: #FFFFFF;/* Elevated surface */
  
  --color-earth-dark: #242624;      /* Deep Charcoal: primary text & titles */
  --color-charcoal: #242624;        /* Deep Charcoal alias */
  --color-text: #242624;            /* Primary body text */
  --color-earth: #242624;           /* Deep Charcoal alias */
  --color-text-inverse: #FFFFFF;    /* Text on dark surfaces */
  
  --color-muted: #747873;           /* Muted Grey: secondary text */
  --color-text-muted: #747873;      /* Muted Grey alias */
  --color-earth-medium: #747873;    /* Muted Grey alias */
  --color-earth-light: #747873;     /* Muted Grey alias */
  
  --color-accent: #526B5B;          /* Heritage Green: restrained primary accent */
  --color-primary: #526B5B;         /* Heritage Green alias */
  --color-heritage-green: #526B5B;  /* Heritage Green alias */
  --color-accent-hover: #415548;    /* Deep Heritage Green for hover */
  --color-primary-hover: #415548;   /* Primary hover alias */
  --color-accent-active: #36463C;   /* Deep Heritage Green for active/press */
  --color-primary-active: #36463C;  /* Primary active alias */
  --color-primary-dark: #242624;    /* Deep primary text tone */
  
  --color-accent-subtle: #E8EDE7;   /* Soft Sage: subtle highlighted surfaces */
  --color-secondary-soft: #E8EDE7;  /* Soft Sage alias */
  --color-sage: #E8EDE7;            /* Soft Sage alias */
  --color-surface-subtle: #E8EDE7;  /* Subtle surface token */
  
  --color-border: #E5E3DC;          /* Light Stone: dividers and borders */
  --color-stone: #E5E3DC;           /* Light Stone alias */
  --color-border-subtle: #ECEAE4;   /* Subtle divider */
  --color-border-focus: #526B5B;    /* Focus border */

  /* Semantic State Tokens */
  --color-success: #2E6B4A;
  --color-success-bg: #EDF7F1;
  --color-success-border: #BFE5D0;
  
  --color-warning: #8C6B16;
  --color-warning-bg: #FEF9EB;
  --color-warning-border: #F5E7BA;
  
  --color-error: #992828;
  --color-error-bg: #FDF2F2;
  --color-error-border: #F8C8C8;
  
  --color-info: #2B577A;
  --color-info-bg: #F0F5FA;
  --color-info-border: #C8DCED;

  /* Backward Compatibility Aliases */
  --color-warm-accent: #526B5B;
  --color-light-accent: #627C6C;
  --color-strong-accent: #36463C;
  --color-saffron: #526B5B;
  --color-saffron-light: #627C6C;
  --color-saffron-glow: rgba(82, 107, 91, 0.15);
  --color-gold: #526B5B;
  --color-gold-light: #E8EDE7;
  --color-gold-border: #E5E3DC;
  --color-terracotta: #526B5B;
  --color-gold-burnished: #415548;
  --color-gold-glow: rgba(82, 107, 91, 0.12);
  --color-tulsi-deep: #526B5B;
  --color-earth-charcoal: #242624;

  /* --------------------------------------------------------------------------
     2. SPACING SCALE
     -------------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* --------------------------------------------------------------------------
     3. LAYOUT & CONTAINERS
     -------------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-reading: 760px;
  --container-narrow: 920px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  --grid-gap: var(--space-6);
  --section-padding-y: clamp(3.5rem, 6vw, 6.5rem);

  /* --------------------------------------------------------------------------
     4. TYPOGRAPHY (Bilingual Institutional Token System)
     -------------------------------------------------------------------------- */
  /* Option A (Active): Newsreader — Variable Optical Size (6..72pt) */
  --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
  /* Option B (Documented Alternative): Source Serif 4 */
  /* --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif; */

  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --------------------------------------------------------------------------
     5. ELEVATION & SHADOWS (Restrained & Institutional)
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(36, 38, 36, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(36, 38, 36, 0.06);
  --shadow-lg: 0 8px 24px -4px rgba(36, 38, 36, 0.08);
  --shadow-xl: 0 16px 36px -8px rgba(36, 38, 36, 0.10);
  --shadow-primary: 0 2px 8px rgba(82, 107, 91, 0.18);
  --shadow-saffron: 0 2px 8px rgba(82, 107, 91, 0.18);

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.22s ease-in-out;
  --transition-slow: 0.35s ease-in-out;
  --ease-spring: cubic-bezier(0.2, 0, 0, 1);
  --ease-2026: cubic-bezier(0.2, 0, 0, 1);

  /* --------------------------------------------------------------------------
     FROSTED GLASS / TRANSLUCENT MATERIAL DESIGN TOKENS (VSS Institutional 2026)
     -------------------------------------------------------------------------- */
  --glass-strong-bg: rgba(255, 255, 255, 0.72);
  --glass-strong-blur: blur(18px) saturate(120%);
  --glass-strong-border: 1px solid rgba(255, 255, 255, 0.55);
  --glass-strong-shadow: 0 8px 30px rgba(36, 38, 36, 0.08);

  --glass-medium-bg: rgba(255, 255, 255, 0.58);
  --glass-medium-blur: blur(14px) saturate(115%);
  --glass-medium-border: 1px solid rgba(255, 255, 255, 0.65);
  --glass-medium-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);

  --glass-soft-bg: rgba(255, 255, 255, 0.42);
  --glass-soft-blur: blur(10px);
  --glass-soft-border: 1px solid rgba(255, 255, 255, 0.45);
  --glass-soft-shadow: 0 4px 16px rgba(36, 38, 36, 0.04);

  --glass-bg-ultra: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-subtle: rgba(255, 255, 255, 0.58);
  --glass-bg-dark: #242624;
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-gold: #E5E3DC;
  --glass-border-subtle: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  --glass-shadow-hover: 0 12px 32px rgba(36, 38, 36, 0.09);
  --glass-blur: 14px;
  --glass-2026-bg: rgba(255, 255, 255, 0.58);
  --glass-2026-border: rgba(255, 255, 255, 0.65);
  --glass-2026-border-hover: rgba(255, 255, 255, 0.90);
  --glass-2026-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  --glass-2026-shadow-hover: 0 12px 32px rgba(36, 38, 36, 0.09);
}

/* ==========================================================================
   Hindi Typography System (Active strictly when lang="hi")
   Headings: Noto Serif Devanagari | Body/UI: Noto Sans Devanagari
   ========================================================================== */
html[lang="hi"] {
  --font-heading: 'Noto Serif Devanagari', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans Devanagari', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --st-serif: 'Noto Serif Devanagari', 'Newsreader', Georgia, 'Times New Roman', serif;
  --st-sans: 'Noto Sans Devanagari', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Global Body & Paragraph Polish in Hindi Mode */
html[lang="hi"] body,
html[lang="hi"] body.page-home,
html[lang="hi"] body.site-body {
  font-family: var(--font-body);
  line-height: 1.74;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings in Hindi Mode */
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] h5,
html[lang="hi"] h6,
html[lang="hi"] .section-title,
html[lang="hi"] .page-title,
html[lang="hi"] .hero-title,
html[lang="hi"] .hero-title-main,
html[lang="hi"] .card-title,
html[lang="hi"] .st-title,
html[lang="hi"] .st-title-large,
html[lang="hi"] .st-serif-title,
html[lang="hi"] .programme-title,
html[lang="hi"] .discipline-title {
  font-family: var(--font-heading);
  line-height: 1.36;
  letter-spacing: normal;
}

html[lang="hi"] h1,
html[lang="hi"] .page-title,
html[lang="hi"] .hero-title {
  font-weight: 700;
  line-height: 1.34;
}

html[lang="hi"] h2,
html[lang="hi"] .section-title {
  font-weight: 600;
  line-height: 1.36;
}

html[lang="hi"] h3,
html[lang="hi"] .card-title {
  font-weight: 600;
  line-height: 1.40;
}

/* Body Text, Leads & Descriptions */
html[lang="hi"] p,
html[lang="hi"] li,
html[lang="hi"] .page-lead,
html[lang="hi"] .section-desc,
html[lang="hi"] .hero-desc,
html[lang="hi"] .card-desc,
html[lang="hi"] .text-body,
html[lang="hi"] .rich-text,
html[lang="hi"] .notice-box,
html[lang="hi"] .rule-text {
  font-family: var(--font-body);
  line-height: 1.74;
  letter-spacing: normal;
}

html[lang="hi"] .page-lead {
  line-height: 1.76;
}

/* Eyebrows, Badges & Labels in Hindi */
html[lang="hi"] .page-eyebrow,
html[lang="hi"] .section-eyebrow,
html[lang="hi"] .hero-eyebrow,
html[lang="hi"] .badge,
html[lang="hi"] .st-badge,
html[lang="hi"] .status-badge {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  font-weight: 600;
}

/* Navigation, Header & Dropdowns in Hindi */
html[lang="hi"] .site-header,
html[lang="hi"] .nav-link,
html[lang="hi"] .dropdown-link,
html[lang="hi"] .mobile-nav-link,
html[lang="hi"] .topbar,
html[lang="hi"] .announcement-bar {
  font-family: var(--font-body);
  letter-spacing: normal;
  line-height: 1.5;
}

html[lang="hi"] .nav-link {
  font-weight: 500;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Buttons & Interactive Elements in Hindi */
html[lang="hi"] .btn,
html[lang="hi"] .btn-primary,
html[lang="hi"] .btn-secondary,
html[lang="hi"] .btn-outline,
html[lang="hi"] .button,
html[lang="hi"] button:not(.btn-icon) {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  line-height: 1.5;
  font-weight: 600;
}

/* Forms, Labels, Selects & Inputs in Hindi */
html[lang="hi"] .form-label,
html[lang="hi"] label,
html[lang="hi"] .form-control,
html[lang="hi"] input:not([type="checkbox"]):not([type="radio"]),
html[lang="hi"] select,
html[lang="hi"] textarea,
html[lang="hi"] .input-group {
  font-family: var(--font-body);
  letter-spacing: normal;
  line-height: 1.6;
}

html[lang="hi"] .form-label {
  font-weight: 600;
  margin-bottom: 6px;
}

/* Breadcrumbs & Footer in Hindi */
html[lang="hi"] .page-breadcrumb,
html[lang="hi"] .breadcrumb,
html[lang="hi"] .footer,
html[lang="hi"] .footer-brand-desc,
html[lang="hi"] .footer-col-title,
html[lang="hi"] .footer-link,
html[lang="hi"] .footer-bottom {
  font-family: var(--font-body);
  letter-spacing: normal;
}

html[lang="hi"] .footer-col-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Data, Identifiers, Emails, Phone Numbers & Monospace Preservation (Rule #6) */
html[lang="hi"] a[href^="mailto:"],
html[lang="hi"] a[href^="tel:"],
html[lang="hi"] .phone-number,
html[lang="hi"] .email-address,
html[lang="hi"] .cert-number,
html[lang="hi"] .certificate-id,
html[lang="hi"] .cert-code,
html[lang="hi"] .roll-number,
html[lang="hi"] .roll-no,
html[lang="hi"] .font-mono,
html[lang="hi"] code,
html[lang="hi"] pre,
html[lang="hi"] kbd,
html[lang="hi"] samp,
html[lang="hi"] [data-mono],
html[lang="hi"] .mono-code,
html[lang="hi"] .verification-code-display,
html[lang="hi"] .reg-no,
html[lang="hi"] .centre-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Base Resets & Global Foundation
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg, #F7F6F2);
  background-image:
    radial-gradient(ellipse 70% 50% at 12% 6%, rgba(82, 107, 91, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 75% 55% at 88% 24%, rgba(232, 237, 231, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 15% 68%, rgba(229, 227, 220, 0.50) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 85% 88%, rgba(82, 107, 91, 0.04) 0%, transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-image:
      radial-gradient(ellipse 80% 60% at 10% 5%, rgba(82, 107, 91, 0.04) 0%, transparent 70%),
      radial-gradient(ellipse 90% 65% at 90% 25%, rgba(232, 237, 231, 0.45) 0%, transparent 70%),
      radial-gradient(ellipse 85% 60% at 50% 75%, rgba(229, 227, 220, 0.35) 0%, transparent 70%);
  }
}

/* Prevent body scroll when mobile navigation drawer is active */
body.nav-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Accessible Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}


section[id], div[id] {
  scroll-margin-top: 86px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   Global Layout Containers & Grids
   ========================================================================== */
.container {
  width: min(var(--container-max), calc(100% - 48px));
  margin-inline: auto;
}

.container-wide {
  width: min(var(--container-wide), calc(100% - 48px));
  margin-inline: auto;
}

.container.narrow,
.container-narrow {
  width: min(var(--container-narrow), calc(100% - 48px));
  margin-inline: auto;
}

.container-reading {
  width: min(var(--container-reading), calc(100% - 36px));
  margin-inline: auto;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 992px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container, .container-wide, .container.narrow, .container-narrow {
    width: calc(100% - 32px);
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Section Typography & Headings */
.section {
  padding: var(--section-padding-y) 0;
  position: relative;
}

.section.cream {
  background: var(--color-bg);
}

.section.white {
  background: var(--color-white);
}

/* ==========================================================================
   Traditional Indian Ornamental Pattern (Braj Textile / Jali Texture)
   ========================================================================== */
.section-pattern {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.section-pattern::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -120px;
  right: -120px;
  bottom: -120px;
  background-image: 
    linear-gradient(135deg, rgba(247, 246, 242, 0.35) 0%, rgba(247, 246, 242, 0.35) 100%),
    url('/assets/new-pattern-bg.png');
  background-size: 540px auto;
  background-repeat: repeat;
  background-position: center top;
  opacity: 0.92;
  mix-blend-mode: multiply;
  filter: sepia(0.20) brightness(0.78) contrast(150%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  animation: patternOrnamentDrift 50s ease-in-out infinite alternate;
  transform: translate3d(var(--pattern-shift-x, 0px), calc(var(--pattern-shift-y, 0px) + var(--pattern-scroll-y, 0px)), 0);
}

.section-pattern > * {
  position: relative;
  z-index: 2;
}

@keyframes patternOrnamentDrift {
  0% {
    transform: translate3d(var(--pattern-shift-x, 0px), calc(var(--pattern-shift-y, 0px) + var(--pattern-scroll-y, 0px)), 0) rotate(0deg) scale(1.05);
  }
  25% {
    transform: translate3d(calc(var(--pattern-shift-x, 0px) + 14px), calc(var(--pattern-shift-y, 0px) + var(--pattern-scroll-y, 0px) - 8px), 0) rotate(0.8deg) scale(1.065);
  }
  50% {
    transform: translate3d(calc(var(--pattern-shift-x, 0px) - 8px), calc(var(--pattern-shift-y, 0px) + var(--pattern-scroll-y, 0px) + 14px), 0) rotate(1.5deg) scale(1.055);
  }
  75% {
    transform: translate3d(calc(var(--pattern-shift-x, 0px) + 10px), calc(var(--pattern-shift-y, 0px) + var(--pattern-scroll-y, 0px) + 8px), 0) rotate(0.8deg) scale(1.065);
  }
  100% {
    transform: translate3d(var(--pattern-shift-x, 0px), calc(var(--pattern-shift-y, 0px) + var(--pattern-scroll-y, 0px)), 0) rotate(0deg) scale(1.05);
  }
}

body.page-home {
  background-color: var(--color-bg);
}

.services-showcase-section {
  background-color: #FFFFFF;
}

.faq-section {
  background-color: #FAF5F0;
}

@media (max-width: 768px) {
  .section-pattern::before {
    background-size: 380px auto;
    opacity: 0.88;
    filter: sepia(0.20) brightness(0.76) contrast(145%);
    animation: patternOrnamentDrift 60s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-pattern::before {
    animation: none !important;
    transform: none !important;
  }
}

/* Legacy cleanup */
.ambient-glow-wrap,
.ambient-orb,
.homepage-sacred-bg {
  display: none !important;
  animation: none !important;
  visibility: hidden !important;
}

/* Legacy orb cleanup */
.ambient-glow-wrap,
.ambient-orb {
  display: none !important;
  animation: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   PHASE 1: GLOBAL DESIGN SYSTEM CORE MODULE
   Vrindavan Sangeet Samiti: Standardized Component Framework
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY HIERARCHY & UTILITIES
   -------------------------------------------------------------------------- */
.type-display {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-earth-dark);
}

.type-h1, h1, .h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-earth-dark);
}

.type-h2, h2, .h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-earth-dark);
}

.type-h3, h3, .h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-earth-dark);
}

.type-h4, h4, .h4 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-earth-dark);
  letter-spacing: 0.01em;
}

.type-body, body, p {
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
}

.type-small, small, .text-sm {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
}

.type-caption, .text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  color: var(--color-text-muted);
}

.text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--color-accent) !important; }
.text-charcoal { color: var(--color-earth-dark) !important; }
.text-white { color: var(--color-white) !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* --------------------------------------------------------------------------
   2. SPACING SCALE UTILITIES
   -------------------------------------------------------------------------- */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.p-0 { padding: 0 !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }

/* --------------------------------------------------------------------------
   3. BUTTON SYSTEM (Restrained, Institutional & High-Affordance)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}

/* Primary Button (Heritage Green) */
.btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white) !important;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white) !important;
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

/* Secondary Button (Outlined Institutional) */
.btn-secondary {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-earth-dark) !important;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

.btn-secondary:active {
  background-color: #DDE5DC;
}

/* Tertiary / Text Button */
.btn-tertiary, .btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-accent) !important;
  padding: 8px 12px;
  min-height: auto;
}

.btn-tertiary:hover, .btn-link:hover {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-hover) !important;
}

/* Destructive Button */
.btn-destructive {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-white) !important;
}

.btn-destructive:hover {
  background-color: #7A1F1F;
  border-color: #7A1F1F;
  color: var(--color-white) !important;
}

/* Button Sizes */
.btn-sm {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}

.btn-lg {
  min-height: 48px;
  padding: 13px 28px;
  font-size: 15px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. FORM SYSTEM (Accessible & Fully Responsive)
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-5);
  position: relative;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-label-required::after {
  content: " *";
  color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(82, 107, 91, 0.16);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.92);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(82, 107, 91, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(153, 40, 40, 0.12);
}

.form-helper {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 5px;
  line-height: 1.4;
}

.form-error-msg {
  font-size: 12px;
  color: var(--color-error);
  font-weight: 600;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-success-msg {
  font-size: 12px;
  color: var(--color-success);
  font-weight: 600;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.form-row > .form-group {
  flex: 1;
  min-width: 240px;
}

/* Styled File Upload Dropzone */
.form-file-wrap {
  position: relative;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  background-color: var(--color-cream-subtle);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
}

.form-file-wrap:hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.form-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. CARD SYSTEM (Restrained, Institutional, Editorial)
   -------------------------------------------------------------------------- */
.card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg, 18px);
  padding: var(--space-6);
  box-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 12px 32px rgba(36, 38, 36, 0.09);
}

.card-info {
  border-left: 3.5px solid var(--color-accent);
}

.card-header {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-earth-dark);
  margin: 0;
}

.card-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.card-stat {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: left;
}

.card-stat-value {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-earth-dark);
  line-height: 1.1;
  margin-bottom: 4px;
}

.card-stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   6. TABLE SYSTEM (Clean Institutional Grids & Responsive Wrappers)
   -------------------------------------------------------------------------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  background-color: var(--color-white);
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.table th {
  background-color: #FAF8F5;
  color: var(--color-earth-dark);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 16px;
  border-bottom: 1.5px solid var(--color-border);
  white-space: nowrap;
}

.table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background-color: #F9FAF8;
}

.table-striped tbody tr:nth-child(even) {
  background-color: #FCFBF9;
}

.table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7. STATUS / BADGE SYSTEM (Standardized Semantic States)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3.5px 9px;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  white-space: nowrap;
}

.badge-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.badge-submitted,
.badge-pending {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.badge-under-review {
  background-color: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

.badge-approved,
.badge-active,
.badge-published,
.badge-completed,
.badge-verified {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.badge-rejected,
.badge-revoked,
.badge-inactive {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.badge-superseded {
  background-color: #F4EFEB;
  color: #6E533F;
  border: 1px solid #DDD1C6;
}

/* --------------------------------------------------------------------------
   8. ALERTS, NOTICES & BREADCRUMBS
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}

.alert-info {
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: #1A405F;
}

.alert-success {
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: #164E2F;
}

.alert-warning {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: #614A0F;
}

.alert-error {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: #6D1B1B;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.breadcrumb-separator {
  color: #D1D5DB;
  font-size: 11px;
}

.breadcrumb-active {
  color: var(--color-earth-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. EMPTY STATES & LOADING INDICATORS
   -------------------------------------------------------------------------- */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.empty-state-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-earth-dark);
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Editorial Solid Accent Text Utilities (Clean Solid Colors, No Gradients)
   ========================================================================== */
.text-gradient-saffron {
  color: var(--color-primary, #526B5B);
  display: inline;
}

.text-gradient-gold {
  color: var(--color-warm-accent, #526B5B);
  display: inline;
}

.text-gradient-sunfire {
  color: var(--color-primary, #526B5B);
  display: inline;
}


/* ==========================================================================
   2026 Card Specular Light Reflection & Subtle Depth
   ========================================================================== */
.bento-card,
.dest-card,
.spirituality-card,
.service-grid-card,
.blog-glass-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.bento-card::after,
.dest-card::before,
.spirituality-card::before,
.service-grid-card::before,
.blog-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.15), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 3;
}

.bento-card:hover::after,
.dest-card:hover::before,
.spirituality-card:hover::before,
.service-grid-card:hover::before,
.blog-glass-card:hover::before {
  opacity: 1;
}

.section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 85%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82, 107, 91, 0.22), transparent);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-saffron);
  margin-bottom: 12px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.eyebrow.maroon {
  color: var(--color-earth-dark);
}

.eyebrow.gold {
  color: var(--color-gold);
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  color: var(--color-earth-dark);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(40px, 5.4vw, 70px);
  font-weight: 700;
}

h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
}

h3 {
  font-size: 26px;
  font-weight: 600;
}

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-earth-medium);
}

.divider {
  width: 48px;
  height: 3px;
  background: var(--color-saffron);
  border-radius: 3px;
  margin: 16px auto 20px;
}



/* ==========================================================================
   Modern Editorial Scroll Reveal System (data-reveal & utility classes)
   Tokens: Duration: 600ms | Ease: cubic-bezier(0.22, 1, 0.36, 1) | Distance: 20px
   ========================================================================== */
[data-reveal],
.reveal-up,
.reveal-fade-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-slide-left,
.reveal-slide-right {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal="up"],
.reveal-up,
.reveal-fade-up {
  transform: none;
}

[data-reveal="left"],
.reveal-left,
.reveal-slide-left {
  transform: none;
}

[data-reveal="right"],
.reveal-right,
.reveal-slide-right {
  transform: none;
}

[data-reveal="scale"],
.reveal-scale {
  transform: none;
}

[data-reveal].is-visible,
.reveal-up.is-visible,
.reveal-fade-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-slide-left.is-visible,
.reveal-slide-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger Delays */
[data-reveal-delay="50"]  { transition-delay: 50ms; }
[data-reveal-delay="70"]  { transition-delay: 70ms; }
[data-reveal-delay="80"]  { transition-delay: 80ms; }
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="120"] { transition-delay: 120ms; }
[data-reveal-delay="150"] { transition-delay: 150ms; }
[data-reveal-delay="180"] { transition-delay: 180ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="240"] { transition-delay: 240ms; }
[data-reveal-delay="280"] { transition-delay: 280ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="350"] { transition-delay: 350ms; }
[data-reveal-delay="380"] { transition-delay: 380ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 480ms; }

[data-reveal-stagger] > *:nth-child(1),
.reveal-stagger > *:nth-child(1) { transition-delay: 60ms; }
[data-reveal-stagger] > *:nth-child(2),
.reveal-stagger > *:nth-child(2) { transition-delay: 140ms; }
[data-reveal-stagger] > *:nth-child(3),
.reveal-stagger > *:nth-child(3) { transition-delay: 220ms; }
[data-reveal-stagger] > *:nth-child(4),
.reveal-stagger > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger] > *:nth-child(5),
.reveal-stagger > *:nth-child(5) { transition-delay: 380ms; }
[data-reveal-stagger] > *:nth-child(6),
.reveal-stagger > *:nth-child(6) { transition-delay: 460ms; }

/* Interactive Hover States after Reveal */
.st-service-card[data-reveal].is-visible:hover,
.st-service-card.is-visible:hover {
  transform: translate3d(0, -4px, 0) scale(1);
}

.st-mosaic-item[data-reveal].is-visible:hover,
.st-mosaic-item.is-visible:hover {
  transform: translate3d(0, -3px, 0) scale(1);
}

.editorial-card[data-reveal].is-visible:hover,
.editorial-card.is-visible:hover {
  transform: translate3d(0, -3px, 0) scale(1);
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .reveal-up,
  .reveal-fade-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-slide-left,
  .reveal-slide-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Fallback for no-js & Print */
html.no-js [data-reveal],
html:not(.js-reveal) [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

@media print {
  *, *::before, *::after {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 30px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease,
              box-shadow 220ms ease,
              background-color 220ms ease,
              border-color 220ms ease,
              color 220ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(36, 38, 36, 0.08);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(36, 38, 36, 0.04);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Button Text Flip Hover Animation */
.btn-flip-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 1.15em;
  width: 100%;
}

.btn-flip-front,
.btn-flip-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
}

.btn-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
}

.btn:hover .btn-flip-front {
  transform: translateY(-100%);
}

.btn:hover .btn-flip-back {
  transform: translateY(0);
}

/* No shiny shimmer sweep */
.btn::after {
  display: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--color-accent);
  color: #FFFFFF !important;
  border: 1px solid var(--color-accent);
  box-shadow: none;
  border-radius: 4px;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: none;
}


.btn-secondary {
  background: #FFFFFF;
  color: var(--color-earth-dark);
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 4px;
}

.btn-secondary:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--color-earth-dark);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.btn-outline:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #FFFFFF;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-maroon {
  background: var(--color-accent);
  color: #FFFFFF;
  border: 1px solid var(--color-accent);
  box-shadow: none;
  border-radius: 4px;
}

.btn-maroon:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: none;
}

/* ==========================================================================
   Announcement Utility Topbar: Modern Academic & Institutional Bar
   ========================================================================== */
/* ==========================================================================
   Announcement Utility Topbar: Modern Academic & Institutional Bar
   ========================================================================== */
.topbar,
.announcement-bar {
  background: #1C2420;
  color: #F5F5F2;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  min-height: 36px;
  max-height: 38px;
  height: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 1002;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1360px;
  min-height: 36px;
  max-height: 38px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  gap: 20px;
  box-sizing: border-box;
  white-space: nowrap;
}

.topbar-rotator,
.announcement-content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 36px;
  max-height: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.topbar-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(2px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.topbar-slide.is-active,
.topbar-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.topbar-slide:not(.is-active):not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(2px) !important;
}

/* Topbar Category / Editorial Label (Heritage Green Accent #8FB59C) */
.topbar-label,
.announcement-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8FB59C;
  flex-shrink: 0;
  user-select: none;
  line-height: 1.2;
}

/* Announcement Text & Micro-CTA */
.topbar-text,
.announcement-text {
  color: #F5F5F2;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.topbar-slide-cta,
.announcement-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.70);
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  line-height: 1.3;
}

.topbar-slide-cta:hover,
.announcement-cta:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.topbar-slide-cta:focus-visible,
.announcement-cta:focus-visible {
  outline: 2px solid #8FB59C;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Permanent Fixed Utility Actions (Center/Right-Aligned) */
.topbar-utilities,
.utility-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  margin-left: auto;
  white-space: nowrap;
}

.topbar-contact,
.topbar-util-link {
  color: #E3E5E2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.3;
  flex-shrink: 0;
}

.topbar-contact:hover,
.topbar-util-link:hover {
  color: #FFFFFF;
}

.topbar-contact:focus-visible,
.topbar-util-link:focus-visible {
  outline: 2px solid #8FB59C;
  outline-offset: 2px;
  border-radius: 2px;
  color: #FFFFFF;
}

.topbar-icon,
.topbar-util-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  flex-shrink: 0;
  stroke: #E3E5E2;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  transition: stroke 0.15s ease;
}

.topbar-contact:hover .topbar-icon,
.topbar-contact:hover .topbar-util-icon,
.topbar-util-link:hover .topbar-icon,
.topbar-util-link:hover .topbar-util-icon {
  stroke: #FFFFFF;
}

.utility-verify {
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.50);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6.5px;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.utility-verify svg {
  stroke: #FFFFFF;
  stroke-width: 1.7;
}

.utility-verify:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.topbar-util-sep {
  color: rgba(245, 245, 242, 0.30);
  font-size: 12px;
  user-select: none;
}

.topbar-util-divider {
  display: inline-block;
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 3px;
}

/* Responsive Progressive Reduction (Strictly Single Line) */
@media (max-width: 1200px) {
  .utility-email span {
    display: none;
  }
}

@media (max-width: 992px) {
  .utility-email,
  .utility-email + .topbar-util-sep,
  .utility-phone,
  .utility-phone + .topbar-util-sep {
    display: none;
  }
}

@media (max-width: 768px) {
  .topbar,
  .announcement-bar {
    min-height: 34px;
    max-height: 36px;
    height: 34px;
  }
  .topbar-inner {
    padding: 0 14px;
    gap: 10px;
    min-height: 34px;
    max-height: 36px;
  }
  .topbar-slide-cta,
  .topbar-contact,
  .utility-verify,
  .topbar-util-divider,
  .topbar-util-sep {
    display: none !important;
  }
  .topbar-label {
    font-size: 10.5px;
  }
  .topbar-text {
    font-size: 11.5px;
  }
}

@media (max-width: 480px) {
  .topbar-inner {
    padding: 0 10px;
    gap: 6px;
  }
  .topbar-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .topbar-text {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-slide {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   VSS Header: Modern Floating Glass Navbar with Automatic Scroll Transformation
   Aesthetic: Warm Ivory, Translucent Glass Blur, Moderately Rounded Floating Capsule
   ========================================================================== */
.site-header,
.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(229, 227, 220, 0.65);
  box-shadow: 0 4px 20px rgba(36, 38, 36, 0.03);
  z-index: 1000;
  box-sizing: border-box;
  transition: top 300ms cubic-bezier(0.16, 1, 0.3, 1),
              padding 300ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

/* Initial state (at top of page): Full-width, clean, spacious */
.header-inner,
.header-container {
  height: 74px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* AUTOMATIC SCROLL TRANSFORMATION: Floating Glass Navbar */
.site-header.scrolled,
.header.scrolled,
.site-header.is-scrolled,
.header.is-scrolled {
  top: 14px;
  padding: 0 24px;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  pointer-events: none;
}

.site-header.scrolled .header-inner,
.header.scrolled .header-inner,
.site-header.is-scrolled .header-inner,
.header.is-scrolled .header-inner,
.site-header.scrolled .header-container,
.header.scrolled .header-container,
.site-header.is-scrolled .header-container,
.header.is-scrolled .header-container {
  height: 58px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 30px rgba(36, 38, 36, 0.08), 0 0 24px rgba(232, 237, 231, 0.55);
  pointer-events: auto;
  gap: 12px;
}

.site-header.scrolled .nav,
.header.scrolled .nav,
.site-header.is-scrolled .nav,
.header.is-scrolled .nav {
  gap: 6px;
}

.site-header.scrolled .nav-link,
.header.scrolled .nav-link,
.site-header.is-scrolled .nav-link,
.header.is-scrolled .nav-link {
  padding: 6px 11px;
  font-size: 13px;
}

.site-header.scrolled .nav > .nav-link.active::after,
.header.scrolled .nav > .nav-link.active::after,
.site-header.scrolled .nav > .nav-item.active > .nav-link::after,
.header.scrolled .nav > .nav-item.active > .nav-link::after,
.site-header.is-scrolled .nav > .nav-link.active::after,
.header.is-scrolled .nav > .nav-link.active::after,
.site-header.is-scrolled .nav > .nav-item.active > .nav-link::after,
.header.is-scrolled .nav > .nav-item.active > .nav-link::after {
  left: 11px;
  right: 11px;
}

.site-header.scrolled .header-actions,
.header.scrolled .header-actions,
.site-header.is-scrolled .header-actions,
.header.is-scrolled .header-actions {
  gap: 8px;
  flex-shrink: 0;
}

.site-header.scrolled .header-btn-login,
.header.scrolled .header-btn-login,
.site-header.is-scrolled .header-btn-login,
.header.is-scrolled .header-btn-login {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-header.scrolled .header-btn-cta,
.header.scrolled .header-btn-cta,
.site-header.is-scrolled .header-btn-cta,
.header.is-scrolled .header-btn-cta {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Brand Logo */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.brand-logo-img {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: height 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .brand-logo-img,
.site-header.scrolled .brand-logo-img {
  height: 38px;
}

.brand-logo:hover {
  opacity: 0.92;
}

/* Navigation Links */
.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  position: relative;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-earth-dark, #242624);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}

/* Shared Animated Underline Indicator — Disabled to eliminate duplicate underline */
.nav-indicator {
  display: none !important;
}

/* Single Intentional Active-Page Indicator (Desktop) */
@media (min-width: 992px) {
  .nav > .nav-link.active::after,
  .nav > .nav-item.active > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background-color: var(--color-accent, #526B5B);
    border-radius: 2px;
    pointer-events: none;
  }
}

.nav-link:hover,
.nav-item:hover > .nav-link {
  color: var(--color-accent, #526B5B);
  background-color: var(--color-accent-subtle, #E8EDE7);
}

.nav-link.active,
.nav-item.active > .nav-link {
  color: var(--color-accent, #526B5B);
  font-weight: 700;
}

.nav-link:focus-visible {
  color: var(--color-accent, #526B5B);
  background-color: var(--color-accent-subtle, #E8EDE7);
  outline: 2px solid rgba(82, 107, 91, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Dropdown Menus */
.dropdown-chevron {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 4px;
  vertical-align: middle;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  cursor: pointer;
}

.nav-item:hover .dropdown-chevron,
.nav-item:focus-within .dropdown-chevron,
.nav-item.open .dropdown-chevron,
.dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: translateY(6px);
  min-width: 220px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 8px 0;
  box-shadow: 0 14px 32px rgba(36, 38, 36, 0.12), 0 2px 6px rgba(36, 38, 36, 0.04);
  border: 1px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 1010;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-link {
  display: block;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-earth-dark, #242624);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.dropdown-link:hover,
.dropdown-link:focus-visible,
.dropdown-link.active {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  transform: translateX(2px);
  outline: none;
}

.dropdown-link.active {
  font-weight: 700;
}

/* Action Buttons */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Restrained Outlined Login Button */
.header-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-earth-dark);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.header-btn-login:hover,
.header-btn-login:focus-visible {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.header-btn-login.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}

.header-btn-login:focus-visible {
  outline: 2px solid rgba(82, 107, 91, 0.35);
  outline-offset: 2px;
}

/* ==========================================================================
   Header Login Dropdown (Clean Floating Card Architecture)
   ========================================================================== */
.login-menu,
.header-login-dropdown-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.login-menu .header-btn-login,
.header-login-dropdown-wrap .header-btn-login {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.login-menu .header-btn-login .dropdown-chevron,
.header-login-dropdown-wrap .header-btn-login .dropdown-chevron {
  display: inline-block !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  transition: transform 200ms ease !important;
  flex-shrink: 0 !important;
}

.login-menu.is-open .header-btn-login .dropdown-chevron,
.login-menu.open .header-btn-login .dropdown-chevron,
.login-menu .header-btn-login[aria-expanded="true"] .dropdown-chevron,
.header-login-dropdown-wrap.is-open .header-btn-login .dropdown-chevron,
.header-login-dropdown-wrap.open .header-btn-login .dropdown-chevron,
.header-login-dropdown-wrap .header-btn-login[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg) !important;
}

/* Floating Card Container */
.login-menu-dropdown,
.header-login-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 300px !important;
  max-width: 360px !important;
  width: max-content !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E3DC !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 35px rgba(36, 38, 36, 0.14), 0 2px 8px rgba(36, 38, 36, 0.04) !important;
  padding: 8px !important;
  z-index: 1020 !important;
  box-sizing: border-box !important;
  text-align: left !important;
  pointer-events: auto !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Hidden state */
.login-menu-dropdown[hidden],
.header-login-dropdown[hidden] {
  display: none !important;
}

/* Open state */
.login-menu-dropdown:not([hidden]),
.login-menu-dropdown.is-open,
.header-login-dropdown:not([hidden]),
.header-login-dropdown.is-open,
.login-menu.is-open > .login-menu-dropdown,
.login-menu.open > .login-menu-dropdown,
.header-login-dropdown-wrap.is-open > .header-login-dropdown,
.header-login-dropdown-wrap.open > .header-login-dropdown {
  display: flex !important;
}

/* Dropdown Section Header */
.login-menu-dropdown .dropdown-label,
.login-menu-dropdown .login-menu-header,
.header-login-dropdown .login-dropdown-meta-header {
  display: block !important;
  padding: 8px 12px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #747873 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid #F0EFEA !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Dropdown Items (Vertical Block Links) */
.login-menu-dropdown a,
.header-login-dropdown a,
.login-menu-item,
.login-dropdown-link {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
  text-align: left !important;
  line-height: 1.35 !important;
}

.login-menu-dropdown a:hover,
.login-menu-dropdown a:focus-visible,
.header-login-dropdown a:hover,
.header-login-dropdown a:focus-visible,
.login-menu-item:hover,
.login-menu-item:focus-visible,
.login-dropdown-link:hover,
.login-dropdown-link:focus-visible {
  background-color: #F7F6F2 !important;
  border-color: #E5E3DC !important;
  outline: none !important;
}

/* Primary Title inside Option */
.login-menu-dropdown a strong,
.header-login-dropdown a strong,
.login-menu-item .login-menu-item-title,
.login-dropdown-link .login-role-title {
  display: block !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #242624 !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.3 !important;
  transition: color 150ms ease !important;
}

.login-menu-dropdown a:hover strong,
.login-menu-dropdown a:focus-visible strong,
.header-login-dropdown a:hover strong,
.header-login-dropdown a:focus-visible strong,
.login-menu-item:hover .login-menu-item-title,
.login-menu-item:focus-visible .login-menu-item-title,
.login-dropdown-link:hover .login-role-title,
.login-dropdown-link:focus-visible .login-role-title {
  color: #526B5B !important;
}

/* Secondary Description inside Option */
.login-menu-dropdown a span,
.header-login-dropdown a span,
.login-menu-item .login-menu-item-desc,
.login-dropdown-link .login-role-desc {
  display: block !important;
  font-size: 11.5px !important;
  color: #747873 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

/* Mobile Drawer Login Accordion */
.mobile-login-accordion {
  width: 100% !important;
  margin-bottom: 8px !important;
}

.mobile-login-accordion .mobile-cta-login-btn {
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.mobile-login-accordion .mobile-cta-login-btn .dropdown-chevron {
  margin-left: auto !important;
  transition: transform 200ms ease !important;
}

.mobile-login-accordion.is-open .mobile-cta-login-btn .dropdown-chevron,
.mobile-login-accordion.open .mobile-cta-login-btn .dropdown-chevron,
.mobile-login-accordion .mobile-cta-login-btn[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg) !important;
}

.mobile-login-drawer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding: 8px !important;
  background: var(--color-surface, #F7F6F2) !important;
  border: 1px solid var(--color-border, #E5E3DC) !important;
  border-radius: 10px !important;
}

.mobile-login-drawer-list[hidden] {
  display: none !important;
}

.mobile-login-accordion.is-open .mobile-login-drawer-list,
.mobile-login-accordion.open .mobile-login-drawer-list {
  display: flex !important;
}

.mobile-login-role-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #EBE9E2 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  min-height: 48px !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.mobile-login-role-item:hover,
.mobile-login-role-item:focus-visible {
  background: #FFFFFF !important;
  border-color: var(--color-accent, #526B5B) !important;
  outline: 2px solid rgba(82, 107, 91, 0.25) !important;
  transform: translateX(2px) !important;
}

.mobile-role-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--color-earth-dark, #242624) !important;
  line-height: 1.3 !important;
}

.mobile-role-sub {
  font-size: 11.5px !important;
  color: var(--color-earth-muted, #747873) !important;
  margin-top: 2px !important;
  line-height: 1.25;
}

/* Login Page Role Switcher Tabs (3 Roles: Students, Centres & Academic Partners, Admin) */
.login-role-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 24px;
  background: var(--color-surface, #F7F6F2);
  padding: 5px;
  border-radius: 10px;
  border: 1px solid var(--color-border, #E5E3DC);
}

.login-role-tab {
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-earth-muted, #747873);
  border-radius: 7px;
  text-decoration: none;
  transition: all 0.15s ease;
  line-height: 1.2;
  border: 1px solid transparent;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.login-role-tab:hover:not(.active) {
  color: var(--color-earth-dark, #242624);
  background: rgba(255, 255, 255, 0.6);
}

.login-role-tab.active {
  background: #FFFFFF;
  color: var(--color-accent, #526B5B);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(36, 38, 36, 0.08);
  border-color: var(--color-border, #E5E3DC);
}

.login-role-tab:focus-visible {
  outline: 2px solid rgba(82, 107, 91, 0.35);
  outline-offset: 1px;
}

@media (max-width: 440px) {
  .login-role-switcher {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Primary CTA: Apply for Admission Button */
.header-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--color-accent, #526B5B);
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  border: 1px solid var(--color-accent, #526B5B);
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(82, 107, 91, 0.16);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  user-select: none;
  box-sizing: border-box;
}

.header-btn-cta .cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.header-btn-cta:hover .cta-arrow,
.header-btn-cta:focus-visible .cta-arrow {
  transform: translate(2px, -2px);
}

.header-btn-cta:hover,
.header-btn-cta:focus-visible {
  background: var(--color-accent-hover, #415548);
  border-color: var(--color-accent-hover, #415548);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 107, 91, 0.24);
}

.header-btn-cta:focus-visible {
  outline: 2px solid rgba(82, 107, 91, 0.4);
  outline-offset: 2px;
}

.header-btn-cta.active {
  background: var(--color-accent-hover, #415548);
  border-color: var(--color-accent-hover, #415548);
}

.cta-label-short {
  display: none;
}

@media (max-width: 600px) {
  .cta-label-full {
    display: none;
  }
  .cta-label-short {
    display: inline;
  }
}

/* Compact Desktop & Tablet Layout (992px to 1340px) */
@media (min-width: 992px) and (max-width: 1340px) {
  .header-inner,
  .header-container {
    padding: 0 20px;
    gap: 12px;
  }
  .nav {
    gap: 4px;
  }
  .nav-link {
    padding: 6px 8px;
    font-size: 12.5px;
  }
  .nav > .nav-link.active::after,
  .nav > .nav-item.active > .nav-link.active::after {
    left: 8px;
    right: 8px;
  }
  .header-actions {
    gap: 8px;
    flex-shrink: 0;
  }
  .header-btn-login {
    padding: 0 12px;
    font-size: 12px;
    height: 36px;
    min-height: 36px;
    flex-shrink: 0;
  }
  .header-btn-cta {
    padding: 0 14px;
    font-size: 12px;
    height: 36px;
    min-height: 36px;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header,
  .header-inner,
  .header-container,
  .nav-link,
  .brand-logo-img,
  .dropdown-menu,
  .nav-link::after {
    transition: none !important;
  }
}

/* Mobile Drawer Custom Buttons */
.mobile-cta-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  height: 42px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1.5px solid var(--color-border);
  color: var(--color-earth-dark);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.mobile-cta-login-btn:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.mobile-cta-admission-btn {
  width: 100% !important;
  justify-content: center !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  border-radius: 8px !important;
}

@media (max-width: 991px) and (min-width: 769px) {
  .header-actions {
    gap: 10px;
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
  }
  .header-btn-cta {
    padding: 0 14px;
    height: 36px;
    min-height: 36px;
    font-size: 11.5px;
  }
  .header-actions .header-btn-login,
  .header-actions .login-menu,
  .header-actions .header-login-dropdown-wrap {
    display: none !important;
  }
}

/* Animated Moving Border Beam Keyframes */
@keyframes borderBeamSpin {
  0% { transform: none; }
  100% { transform: none; }
}

.nav-btn-tour,
.nav-btn-donate {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  overflow: hidden;
  cursor: pointer;
  border: none;
  isolation: isolate;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}

.nav-btn-tour:hover,
.nav-btn-donate:hover {
  transform: translateY(-1px);
}

.nav-btn-tour:active,
.nav-btn-donate:active {
  transform: translateY(0);
}

/* Ensure inner content sits above the moving border beam layer */
.nav-btn-tour > *,
.nav-btn-donate > * {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Moving Border: Support Seva (Saffron & Gold Radiant Moving Beam)
   -------------------------------------------------------------------------- */
.nav-btn-donate {
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(82, 107, 91, 0.32);
}

.nav-btn-donate:hover {
  box-shadow: 0 6px 22px rgba(82, 107, 91, 0.48);
}

/* Continuous rotating light beam around perimeter */
.nav-btn-donate::before {
  display: none !important;
}

/* Inner button surface */
.nav-btn-donate::after {
  display: none !important;
}

.nav-btn-donate:hover::after {
  background: #415548;
}

/* --------------------------------------------------------------------------
   Book Tour (Clean Minimalist Button, Zero Moving Border)
   -------------------------------------------------------------------------- */
.nav-btn-tour {
  border: 1.5px solid rgba(36, 38, 36, 0.28) !important;
  background: #FFFFFF;
  color: var(--color-earth-dark) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-spring);
}

.nav-btn-tour:hover {
  background: var(--color-earth-dark);
  border-color: var(--color-earth-dark);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(36, 38, 36, 0.15);
}

.nav-btn-tour:hover > * {
  color: #FFFFFF !important;
}

.nav-btn-tour:hover .nav-btn-icon svg {
  stroke: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Reusable Moving Border Utility Classes (.btn-moving-border / .has-moving-border)
   -------------------------------------------------------------------------- */
.btn-moving-border,
.has-moving-border {
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  isolation: isolate;
}

.btn-moving-border::before,
.has-moving-border::before {
  display: none !important;
}

.btn-moving-border::after,
.has-moving-border::after {
  display: none !important;
}

.btn-moving-border > *,
.has-moving-border > * {
  position: relative;
  z-index: 2;
}

/* Accessibility: Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .nav-btn-donate::before,
  .btn-moving-border::before,
.has-moving-border::before {
  display: none !important;
}
}

/* Flip-Up Text Track */
.nav-btn-text-track {
  display: inline-flex;
  flex-direction: column;
  height: 14px;
  overflow: hidden;
  line-height: 14px;
}

.nav-btn-text-track > span {
  display: block;
  height: 14px;
  line-height: 14px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.nav-btn-tour:hover .nav-btn-text-track > span,
.nav-btn-donate:hover .nav-btn-text-track > span {
  transform: translateY(-100%);
}

/* Icon scale micro-interaction */
.nav-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-btn-tour:hover .nav-btn-icon,
.nav-btn-donate:hover .nav-btn-icon {
  transform: scale(1.1);
}

.menu-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-earth-dark);
  padding: 6px;
}

.menu-btn svg {
  display: block;
}

.menu-btn .menu-icon-close {
  display: none;
}

.menu-btn.is-active .menu-icon-bars {
  display: none;
}

.menu-btn.is-active .menu-icon-close {
  display: block;
}

@media (min-width: 992px) {
  .menu-btn {
    display: none !important;
  }
}

.mobile-nav-cta {
  display: none;
}

/* ==========================================================================
   VSS Homepage Hero Section (WebP Hero Image, Compact Height, Crisp Overlay)
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 480px;
  height: clamp(480px, 50vh, 540px);
  max-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-earth-dark);
  box-sizing: border-box;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* Light & Transparent Warm Gradient Overlay for Maximum Image Clarity & High Text Contrast */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 38, 36, 0.65) 0%, rgba(36, 38, 36, 0.45) 50%, rgba(36, 38, 36, 0.80) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-content-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 0;
  text-align: center;
  color: #FFFFFF;
  box-sizing: border-box;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 237, 231, 0.18);
  border: 1px solid rgba(232, 237, 231, 0.35);
  border-radius: 4px;
  padding: 5px 16px;
  margin-bottom: 20px;
}

.hero-badge span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #FFF3E0;
}

.hero-title {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 700;
  line-height: 1.15;
  max-width: 880px;
  margin: 0 auto 18px;
  color: #FFFFFF;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-desc {
  font-size: clamp(15px, 1.8vw, 18.5px);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 30px;
  color: #FFFFFF;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-btn-main {
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: #FFFFFF !important;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  border-radius: 4px;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-btn-main:hover {
  filter: brightness(1.10);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(82, 107, 91, 0.55);
  text-decoration: none;
}

.hero-btn-sub {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #FFFFFF !important;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  border-radius: 4px;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-btn-sub:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Critical Swiper Core Layout Rules (Zero CLS / Zero FOUC during async CSS load) */
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.hero-swiper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 3;
}

.hero-swiper .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent !important;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-slide-overlay {
  display: none;
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 160px 0 120px;
  color: #FFFFFF;
}

.hero-slide-content h1 {
  font-family: var(--font-heading);
  color: #FFFFFF;
  font-size: clamp(34px, 4.8vw, 62px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-slide-content .desc {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin-bottom: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.hero-action {
  margin-top: 32px;
}

/* Hero Slide Content Motion System (Subtle, Calm Stagger on Active Slide) */
.hero-swiper .swiper-slide .hero-slide-content h1 {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hero-swiper .swiper-slide .hero-slide-content .desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hero-swiper .swiper-slide .hero-slide-content .hero-action {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hero-swiper .swiper-slide-active .hero-slide-content h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.hero-swiper .swiper-slide-active .hero-slide-content .desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

.hero-swiper .swiper-slide-active .hero-slide-content .hero-action {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.32s;
}

/* Fallback: First slide visible before swiper initialization */
.hero-swiper:not(.swiper-initialized) .swiper-slide:first-child .hero-slide-content h1,
.hero-swiper:not(.swiper-initialized) .swiper-slide:first-child .hero-slide-content .desc,
.hero-swiper:not(.swiper-initialized) .swiper-slide:first-child .hero-slide-content .hero-action {
  opacity: 1;
  transform: translateY(0);
}

.hero-action .btn {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: 28px;
  text-transform: none;
  box-shadow: 0 6px 20px -2px rgba(82, 107, 91, 0.35);
  transition: all 0.3s ease;
}

.hero-action .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -2px rgba(82, 107, 91, 0.48);
}

/* Swiper Navigation Arrows: Removed per user request */
.hero-controls-dock,
.hero-nav-btn {
  display: none !important;
}

.hero-swiper .swiper-pagination {
  bottom: 45px !important;
  left: clamp(24px, 4vw, 50px) !important;
  width: auto !important;
  display: flex;
  align-items: center;
  z-index: 10;
}

.hero-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  opacity: 0.45;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

.hero-swiper .swiper-pagination-bullet-active {
  width: 32px;
  background: var(--color-saffron);
  opacity: 1;
}


/* ==========================================================================
   Floating Live Stat Ticker
   ========================================================================== */
.stat-ticker-wrap {
  position: relative;
  z-index: 5;
  margin: 36px auto 10px;
}

.stat-ticker-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-radius: 24px;
  padding: 34px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  box-shadow: 0 8px 30px rgba(36, 38, 36, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.stat-item {
  text-align: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(82, 107, 91, 0.35), transparent);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 700;
  color: var(--color-saffron);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-earth-medium);
  line-height: 1.4;
}

/* ==========================================================================
   About Us: Serving Braj Dham (2026 Minimal Agency Redesign)
   ========================================================================== */
.about-section {
  background: #FFFFFF;
  padding: 100px 0;
  position: relative;
}

.about-signature-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.about-brush-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.about-brush-wrap {
  width: 100%;
  max-width: 480px;
  position: relative;
  transition: transform 0.6s var(--ease-spring);
}

.about-brush-wrap::before {
  display: none !important;
}

.about-brush-wrap:hover {
  transform: scale(1.025);
}

.about-brush-img {
  width: 100%;
  height: auto;
  display: block;
}

.about-floating-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(36, 38, 36, 0.08);
  color: var(--color-earth-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.about-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #526B5B;
  box-shadow: 0 0 10px rgba(82, 107, 91, 0.7);
}

.about-content-col {
  display: flex;
  flex-direction: column;
}

.about-main-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 700;
  color: var(--color-earth-dark);
  line-height: 1.22;
  margin: 12px 0 18px;
}

.about-main-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-earth);
  margin-bottom: 28px;
}

.about-pillars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 34px;
}

.about-pillar-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 16px -4px rgba(36, 38, 36, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-pillar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 10px 24px -4px rgba(36, 38, 36, 0.08);
}

.about-pillar-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(82, 107, 91, 0.12) 0%, rgba(82, 107, 91, 0.15) 100%);
  color: var(--color-saffron);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.about-pillar-info strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-earth-dark);
  margin-bottom: 2px;
}

.about-pillar-info span {
  display: block;
  font-size: 13px;
  color: var(--color-earth-medium);
  line-height: 1.5;
}

.about-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .about-signature-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-brush-wrap {
    max-width: 380px;
  }
}

/* ==========================================================================
   Foundation Ethos & Sacred Purpose (Minimal 2026 Agency Redesign)
   ========================================================================== */
.ethos-section {
  background: #FAF2F1;
  border-top: 1px solid rgba(203, 191, 191, 0.6);
  border-bottom: 1px solid rgba(203, 191, 191, 0.6);
}

.ethos-minimal-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.ethos-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.24;
  color: var(--color-earth-dark);
  margin-bottom: 18px;
}

.ethos-lead {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--color-earth);
  margin-bottom: 32px;
  max-width: 520px;
}

.ethos-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ethos-visual-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.ethos-visual-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

/* Handcrafted Brush Paint Mask & Container */
.ethos-brush-container {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 16px 36px rgba(45, 30, 18, 0.14));
}

.ethos-brush-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

/* Organic brush stroke animation */
.brush-stroke {
  stroke: #FFFFFF;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: stroke-dashoffset;
}

.brush-stroke-1 {
  stroke-width: 75;
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  transition-delay: 0.0s;
}

.brush-stroke-2 {
  stroke-width: 130;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition-delay: 0.08s;
}

.brush-stroke-3 {
  stroke-width: 140;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  transition-delay: 0.16s;
}

.brush-stroke-4 {
  stroke-width: 140;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  transition-delay: 0.24s;
}

.brush-stroke-5 {
  stroke-width: 130;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition-delay: 0.32s;
}

.brush-stroke-6 {
  stroke-width: 75;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition-delay: 0.40s;
}

/* Triggered State: Broad paint strokes sweep across and reveal the temple */
.ethos-brush-container.is-revealed .brush-stroke {
  stroke-dashoffset: 0;
}

/* Floating Heritage Badge - anchored smoothly under the painted artwork */
.ethos-floating-chip {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(36, 38, 36, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.2s,
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
  pointer-events: none;
}

.ethos-brush-container.is-revealed .ethos-floating-chip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ethos-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E7694D;
  box-shadow: 0 0 8px #E7694D;
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .ethos-minimal-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ethos-visual-card {
    max-width: 520px;
  }
}

@media (max-width: 480px) {
  .ethos-floating-chip {
    font-size: 11.5px;
    padding: 8px 12px;
    bottom: 12px;
    letter-spacing: 0.2px;
  }
}

/* Accessibility: Instant display when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brush-stroke {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .ethos-floating-chip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   2026 Core Seva Bento Grid
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 32px;
  background-size: cover;
  background-position: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
  box-shadow: 0 20px 45px -12px rgba(36, 38, 36, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.bento-card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 28px 56px -14px rgba(36, 38, 36, 0.24);
  border-color: rgba(255, 255, 255, 0.45);
}

.bento-card.col-8 {
  grid-column: span 8;
}

.bento-card.col-4 {
  grid-column: span 4;
}

.bento-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-card:hover .bento-card-bg {
  transform: scale(1.04);
}

.bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 14, 10, 0.94) 0%,
    rgba(20, 14, 10, 0.6) 55%,
    rgba(20, 14, 10, 0.15) 100%
  );
  z-index: 1;
}

.bento-content {
  position: relative;
  z-index: 2;
  color: #FFFFFF;
}

.bento-badge {
  display: inline-block;
  background: rgba(82, 107, 91, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.bento-content h3 {
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.bento-content p {
  color: #FED6C2;
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}

.bento-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ==========================================================================
   Devotee & Pilgrim Services Showcase (8-Card Grid)
   ========================================================================== */
.services-showcase-section {
  background-color: #FFFFFF;
  padding: 100px 0 110px;
  position: relative;
}

.services-showcase-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 24px;
}

.services-showcase-titles {
  max-width: 680px;
}

.services-showcase-title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  color: var(--color-earth-dark);
  line-height: 1.22;
  margin: 10px 0 14px;
}

.services-showcase-subtitle {
  font-size: 16px;
  color: var(--color-earth-medium);
  line-height: 1.6;
}

.btn-services-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-earth-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.btn-services-viewall:hover {
  border-color: var(--color-saffron);
  color: var(--color-saffron);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.services-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-grid-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 310px;
  box-shadow: 0 10px 26px -8px rgba(36, 38, 36, 0.10);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease;
  display: block;
  text-decoration: none;
  border: 1px solid rgba(36, 38, 36, 0.08);
  background-color: #F0ECE4;
}

.service-grid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 38, 36, 0) 35%, rgba(36, 38, 36, 0.12) 65%, rgba(36, 38, 36, 0.42) 100%);
  border-radius: 24px;
  pointer-events: none;
  z-index: 1;
}

.service-grid-card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 24px 48px -10px rgba(82, 107, 91, 0.22), 0 8px 18px -4px rgba(36, 38, 36, 0.08);
  border-color: rgba(82, 107, 91, 0.35);
}

.service-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 24px;
}

.service-grid-card:hover .service-card-bg {
  transform: scale(1.04);
}

/* Glassmorphism Content Panel */
.service-card-pill {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 252, 248, 0.48) 100%);
  backdrop-filter: blur(18px) saturate(185%);
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  border-radius: 18px;
  padding: 12px 16px 11px;
  text-align: left;
  box-shadow: 0 8px 22px -4px rgba(36, 38, 36, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.75) inset;
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;
  box-sizing: border-box;
}

.service-grid-card:hover .service-card-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 252, 248, 0.68) 100%);
  border-color: rgba(82, 107, 91, 0.42);
  box-shadow: 0 14px 30px -4px rgba(82, 107, 91, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

.service-pill-title {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-earth-dark, #242624);
  line-height: 1.25;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-pill-action {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-earth-medium, #5C5248);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease, transform 0.25s ease;
}

.service-grid-card:hover .service-pill-action {
  color: var(--color-saffron, #526B5B);
  transform: translateX(2px);
}

/* Responsive Grid: Desktop (4 cols) -> Tablet (2 cols) -> Mobile (1 col) */
@media (max-width: 991px) {
  .services-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .services-showcase-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .service-grid-card {
    height: 290px;
  }
}

@media (max-width: 600px) {
  .services-showcase-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-grid-card {
    height: 270px;
  }
}

/* ==========================================================================
   Destinations Swiper Multi-Card Carousel (#darshan)
   ========================================================================== */
.destinations-section {
  position: relative;
}

.destinations-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.dest-nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dest-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-earth-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

.dest-nav-btn:hover {
  background: var(--color-saffron);
  border-color: var(--color-saffron);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.destinations-swiper {
  padding: 10px 4px 50px !important;
}

.destinations-swiper .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.dest-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(82, 107, 91, 0.14);
  box-shadow: 0 14px 34px -10px rgba(36, 38, 36, 0.08);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease,
              background 0.45s ease;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.dest-card:hover {
  transform: translateY(-5px) scale(1.012);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(82, 107, 91, 0.40);
  box-shadow: 0 24px 50px -12px rgba(82, 107, 91, 0.16), 0 8px 20px -4px rgba(36, 38, 36, 0.08);
}

.dest-img-box {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #F0ECE4;
  flex-shrink: 0;
}

.dest-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.dest-card:hover .dest-img-box img {
  transform: scale(1.04);
}

.dest-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(36, 38, 36, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FED6C2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 2;
}

/* Elegant Sacred Fallback Visual Treatment when no photo is supplied */
.dest-img-fallback {
  background: linear-gradient(135deg, #1C110C 0%, #381A0F 50%, #200D06 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.dest-fallback-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  width: 100%;
}

.dest-fallback-symbol {
  color: #E27B58;
  opacity: 0.85;
}

.dest-fallback-name {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  color: #FAF5ED;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.dest-body {
  padding: 24px 22px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.dest-body-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dest-body h3,
.dest-title {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-earth-dark, #2A1810);
  margin: 0 0 8px 0;
  line-height: 1.25;
}

.dest-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-earth-medium, #5C4A3A);
  margin: 0 0 14px 0;
}

.dest-highlights {
  list-style: none;
  padding: 10px 0 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px dashed rgba(82, 107, 91, 0.18);
}

.dest-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #4A382A;
  font-weight: 500;
}

.dest-highlight-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-saffron-crimson, #526B5B);
}

.dest-action {
  margin-top: auto;
  padding-top: 6px;
}

.dest-btn {
  width: 100% !important;
  font-size: 11px !important;
  padding: 11px 18px !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* ==========================================================================
   Spirituality & Kirtan Spotlight (#spirituality)
   ========================================================================== */
.spirituality-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.spirituality-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 253, 249, 0.44) 100%);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 18px 40px -10px rgba(36, 38, 36, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.75) inset;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease,
              background 0.45s ease;
}

.spirituality-card:hover {
  transform: translateY(-5px) scale(1.012);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 253, 249, 0.56) 100%);
  border-color: rgba(82, 107, 91, 0.42);
  box-shadow: 0 30px 60px -14px rgba(82, 107, 91, 0.18), 0 12px 28px -6px rgba(36, 38, 36, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

.spirituality-img-wrap {
  height: 250px;
  overflow: hidden;
  position: relative;
}

.spirituality-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.spirituality-card:hover .spirituality-img-wrap img {
  transform: scale(1.04);
}

.spirituality-content {
  padding: 32px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spirituality-content h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.spirituality-content p {
  color: var(--color-earth-medium);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}

.spirituality-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.spirituality-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-earth);
}

.spirituality-features li svg {
  color: var(--color-saffron);
  flex-shrink: 0;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Traditional Indian Jharokha Arch Frame
   ========================================================================== */
.arched-frame {
  border-radius: 120px 120px 24px 24px;
  box-shadow: 0 24px 50px -12px rgba(36, 38, 36, 0.18);
  border: 4px solid #FFFFFF;
  position: relative;
  overflow: hidden;
}

.arched-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-spring);
}

.arched-frame:hover img {
  transform: scale(1.04);
}

/* Subtle Sacred Mandala Background Watermark Removed (Static Clean Background) */
.mandala-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--color-cream-subtle, #FAF2F1);
}

.mandala-watermark {
  display: none !important;
  animation: none !important;
  visibility: hidden !important;
}


/* ==========================================================================
   11. Moments from Braj: Two-Row Infinite Horizontal Photo Slider
   ========================================================================== */
.braj-moments-section {
  background-color: #FFFFFF !important;
  padding: 100px 0 105px !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.braj-moments-section .section-head {
  margin: 0 auto 36px !important;
  text-align: center !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.braj-moments-section .section-head .eyebrow {
  margin-bottom: 10px !important;
  display: inline-block !important;
}

.braj-moments-section .section-head h2 {
  font-size: 38px !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

.braj-moments-section .section-head p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  color: var(--color-earth-light, #7A5843) !important;
}

.braj-moments-slider {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  position: relative !important;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.braj-moments-slider-row {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.braj-moments-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  align-items: center !important;
  will-change: transform !important;
}

/* Row 1: Move leftwards */
.braj-moments-track--left {
  animation: brajMomentsLeft 50s linear infinite !important;
}

/* Row 2: Move rightwards */
.braj-moments-track--right {
  animation: brajMomentsRight 55s linear infinite !important;
}

/* Hover pause */
.braj-moments-slider-row:hover .braj-moments-track {
  animation-play-state: paused !important;
}

@keyframes brajMomentsLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes brajMomentsRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Photo Tiles */
.braj-moments-item {
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  margin: 0 !important;
  margin-right: 18px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #F7EFE9 !important;
  box-shadow: 0 4px 14px rgba(42, 26, 16, 0.08) !important;
  border: 1px solid rgba(139, 46, 19, 0.08) !important;
  box-sizing: border-box !important;
  user-select: none;
}

.braj-moments-image {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  border-radius: 11px !important;
  pointer-events: none;
  transform: scale(1) translateZ(0) !important;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), filter 450ms ease !important;
  will-change: transform !important;
}

@media (hover: hover) and (pointer: fine) {
  .braj-moments-item:hover .braj-moments-image {
    transform: scale(1.03) translateZ(0) !important;
    filter: brightness(1.02) !important;
  }
}

/* Tablet (1024px & down) */
@media (max-width: 1024px) {
  .braj-moments-section {
    padding: 85px 0 !important;
  }
  .braj-moments-section .section-head {
    margin-bottom: 28px !important;
  }
  .braj-moments-section .section-head .eyebrow {
    margin-bottom: 8px !important;
  }
  .braj-moments-section .section-head h2 {
    font-size: 32px !important;
    margin-bottom: 12px !important;
  }
  .braj-moments-section .section-head p {
    font-size: 15px !important;
  }
  .braj-moments-slider {
    gap: 18px !important;
  }
  .braj-moments-item {
    flex: 0 0 230px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
    margin-right: 15px !important;
    border-radius: 10px !important;
  }
  .braj-moments-image {
    border-radius: 9px !important;
  }
}

/* Mobile (767px & down, including 393px, 390px, 375px) */
@media (max-width: 767px) {
  .braj-moments-section {
    padding: 75px 0 !important;
  }
  .braj-moments-section .section-head {
    margin-bottom: 26px !important;
    padding: 0 16px !important;
  }
  .braj-moments-section .section-head .eyebrow {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .braj-moments-section .section-head h2 {
    font-size: 26px !important;
    margin-bottom: 8px !important;
  }
  .braj-moments-section .section-head p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .braj-moments-slider {
    gap: 16px !important;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  }
  .braj-moments-item {
    flex: 0 0 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    margin-right: 12px !important;
    border-radius: 8px !important;
  }
  .braj-moments-image {
    border-radius: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .braj-moments-track--left,
  .braj-moments-track--right {
    animation: none !important;
    transform: none !important;
  }
  .braj-moments-slider-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ==========================================================================
   Devotee Guidelines & FAQ Accordion Section
   ========================================================================== */
.faq-section {
  position: relative;
  background-color: #FFFFFF;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 253, 250, 0.44) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 24px -6px rgba(36, 38, 36, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

.faq-item:hover {
  border-color: rgba(82, 107, 91, 0.40);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 254, 251, 0.56) 100%);
  box-shadow: 0 14px 30px -8px rgba(36, 38, 36, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.faq-item.active {
  border-color: rgba(82, 107, 91, 0.42);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 253, 249, 0.70) 100%);
  box-shadow: 0 18px 40px -10px rgba(82, 107, 91, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

.faq-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 20px 24px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-earth-dark);
  transition: color 0.25s ease;
}

.faq-trigger:hover, .faq-item.active .faq-trigger {
  color: var(--color-saffron);
}

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-earth-light);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-saffron);
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  padding: 0;
  visibility: hidden;
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  padding: 0;
}

.faq-grid .faq-inner {
  padding: 0 24px 24px 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-earth-medium);
  overflow: hidden;
  min-height: 0;
}

.faq-item:not(.active) .faq-inner {
  padding-bottom: 0 !important;
}

.faq-grid .faq-inner a {
  color: var(--color-saffron);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.faq-grid .faq-inner a:hover {
  color: var(--color-primary);
}

.faq-icon svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.active .faq-icon svg {
  transform: rotate(45deg);
}


/* ==========================================================================
   Global Footer: Full-Width Clean Institutional Standard
   Full-Bleed Viewport Width • Solid Warm Sage-Grey (#F1F2ED) • Zero Grid Lines
   Primary Text: #242624 • Secondary: #747873 • Accent: #526B5B • Divider: #DCDDD6
   ========================================================================== */
.footer {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 72px 0 44px !important;
  background-color: #F1F2ED !important;
  background-image: none !important;
  background-size: auto !important;
  color: #242624 !important;
  border-radius: 0 !important;
  border-top: 1px solid #DCDDD6 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clear: both !important;
}

/* Inner responsive content container aligned with the website's main layout */
.footer-container {
  max-width: 1320px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 1. Main Structured Grid: Brand Block + 3 Navigation Columns */
.footer-main-content,
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  column-gap: 56px !important;
  row-gap: 40px !important;
  align-items: start !important;
  width: 100% !important;
  margin-bottom: 48px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 2. Absolute Removal of Any Inner Card / Box Styling & Unconditional Visibility */
.footer-brand,
.footer-nav-col,
.footer-col,
.footer-card,
.footer-main-content > *,
.footer-grid > * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 3. Left Brand Area */
.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 320px !important;
}

.footer-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 0 !important;
  margin-bottom: 20px !important;
  transition: opacity 0.2s ease !important;
}

.footer-logo-link:hover {
  opacity: 0.88 !important;
}

.footer-logo-img {
  width: 155px !important;
  height: auto !important;
  max-width: 170px !important;
  display: block !important;
  object-fit: contain !important;
}

.footer-brand-desc {
  margin: 0 !important;
  max-width: 300px !important;
  font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #4A5048 !important;
  letter-spacing: 0.01em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4. Navigation Columns */
.footer-nav-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-title {
  margin: 0 0 20px 0 !important;
  font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #1B1E1B !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-list li {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-col-list li:last-child {
  margin-bottom: 0 !important;
}

.footer-link {
  font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #4A5048 !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  display: inline-block !important;
  transition: color 200ms ease, transform 200ms ease !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: #526B5B !important;
  transform: translateX(3px) !important;
  outline: none !important;
}

.footer-link:focus-visible {
  outline: 2px solid rgba(82, 107, 91, 0.4) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

/* 5. Center Chevron & Old Divider Suppressed */
.footer-center-chevron,
.footer-divider {
  display: none !important;
}

/* 6. Clean Institutional Bottom Bar */
.footer-elevated-bar,
.footer-bottom-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 28px 0 0 !important;
  border-top: 1px solid #DCDDD6 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.footer-copyright {
  margin: 0 !important;
  color: #5C605A !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-credit {
  margin: 0 !important;
  color: #5C605A !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-credit a {
  color: #242624 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 200ms ease !important;
  white-space: nowrap !important;
}

.footer-credit a:hover {
  color: #526B5B !important;
  text-decoration: none !important;
}

.footer-verify-icon {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  color: #526B5B !important;
  flex-shrink: 0 !important;
  transition: transform 200ms ease !important;
}

.footer-credit a:hover .footer-verify-icon {
  transform: scale(1.1);
}

/* Responsive Footer: True Multi-Device Layout (Clean Full-Width, No Rounded Containers) */
@media (max-width: 1024px) {
  .footer {
    border-radius: 0 !important;
    padding: 64px 0 40px !important;
  }
  .footer-container {
    padding-inline: 32px !important;
  }
  .footer-main-content,
  .footer-grid {
    grid-template-columns: 1.25fr 1fr 1fr 1fr !important;
    column-gap: 36px !important;
    row-gap: 36px !important;
    margin-bottom: 40px !important;
  }
  .footer-brand {
    max-width: 280px !important;
  }
  .footer-logo-img {
    width: 150px !important;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 52px 0 48px !important;
    border-radius: 0 !important;
  }
  .footer-container {
    padding-inline: 24px !important;
  }
  .footer-main-content,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 28px !important;
    margin-bottom: 36px !important;
  }
  .footer-brand {
    grid-column: span 2 !important;
    max-width: 100% !important;
  }
  .footer-logo-img {
    width: 145px !important;
  }
  .footer-elevated-bar,
  .footer-bottom-bar {
    padding-top: 24px !important;
    padding-right: 56px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #DCDDD6 !important;
  }
}

@media (max-width: 600px) {
  .footer {
    padding: 44px 0 56px !important;
    border-radius: 0 !important;
  }
  .footer-container {
    padding-inline: 20px !important;
  }
  .footer-main-content,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 32px !important;
  }
  .footer-brand {
    grid-column: 1 !important;
    max-width: 100% !important;
  }
  .footer-logo-link {
    margin-bottom: 16px !important;
  }
  .footer-logo-img {
    width: 140px !important;
  }
  .footer-brand-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }
  .footer-col-title {
    margin-bottom: 14px !important;
  }
  .footer-col-list li {
    margin-bottom: 12px !important;
  }
  .footer-elevated-bar,
  .footer-bottom-bar {
    padding-top: 20px !important;
    padding-right: 52px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #DCDDD6 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link:hover,
  .footer-link:hover {
    transform: none !important;
  }
}

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #DCDDD6;
  color: #242624;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
}

@media (max-width: 600px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: #526B5B;
  color: #FFFFFF;
  border-color: #526B5B;
  transform: translateY(-3px) scale(1.04);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .bento-card.col-8, .bento-card.col-4 {
    grid-column: span 12;
  }
  .stat-ticker-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .stat-item:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 991px) {
  .site-header,
  .header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(36, 38, 36, 0.03);
    z-index: 1000;
    box-sizing: border-box;
    transition: top 300ms cubic-bezier(0.16, 1, 0.3, 1),
                padding 300ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Initial full-width header at top */
  .header-inner,
  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background: transparent;
    border-radius: 0;
    border: 1px solid transparent;
    box-shadow: none;
    box-sizing: border-box;
    position: relative;
    transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* AUTOMATIC SCROLL TRANSFORMATION: Floating Glass Navbar on Mobile */
  .site-header.scrolled,
  .header.scrolled {
    top: 8px;
    padding: 0 12px;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .site-header.scrolled .header-inner,
  .header.scrolled .header-inner,
  .site-header.scrolled .header-container,
  .header.scrolled .header-container {
    height: 56px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(229, 227, 220, 0.9);
    box-shadow: 0 8px 24px rgba(36, 38, 36, 0.08), 0 2px 6px rgba(36, 38, 36, 0.03);
    padding: 0 14px;
    pointer-events: auto;
  }

  .brand-logo-img {
    height: 40px !important;
    width: auto;
    transition: height 250ms ease;
  }

  .site-header.scrolled .brand-logo-img,
  .header.scrolled .brand-logo-img {
    height: 34px !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-earth-dark, #242624) !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  }

  .menu-btn:hover,
  .menu-btn.is-active {
    background: var(--color-accent-subtle) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
  }
  /* Hero Mobile Full-Bleed Sizing & Typography */
  .hero-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 480px;
  height: clamp(480px, 50vh, 540px);
  max-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-earth-dark);
  box-sizing: border-box;
}
  .hero-video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .hero-poster-img {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    filter: none;
    opacity: 1;
    visibility: visible;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  .hero-video {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    filter: none;
    object-fit: cover;
    object-position: center;
  }
  .hero-swiper {
    min-height: auto;
    height: auto;
    width: 100%;
    max-width: 100%;
  }
  .hero-swiper .swiper-slide {
    min-height: min(78vh, 680px);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
  }
  .hero-slide-content {
    width: 100%;
    max-width: 100%;
    padding: 60px 0 45px;
    text-align: center;
    box-sizing: border-box;
  }
  .hero-slide-content h1 {
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    text-align: center;
  }
  .hero-slide-content .desc {
    font-size: 15px;
    line-height: 1.55;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.94);
  }
  .hero-action {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .hero-action .btn {
    padding: 12px 26px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.04em;
  }
  .nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 18px 22px;
    box-shadow: 0 14px 32px rgba(36, 38, 36, 0.12);
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 999;
    pointer-events: auto;
  }
  .site-header.scrolled .nav,
  .header.scrolled .nav {
    top: calc(100% + 8px);
    border-radius: 16px;
    border: 1px solid rgba(229, 227, 220, 0.9);
    box-shadow: 0 16px 36px rgba(36, 38, 36, 0.14);
  }
  .nav.open {
    display: flex;
    animation: mobileNavSlide 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes mobileNavSlide {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-earth-dark);
    border-radius: 6px;
    border-bottom: 1px solid rgba(36, 38, 36, 0.07);
    width: 100%;
    box-sizing: border-box;
    transition: color 200ms ease, background-color 200ms ease;
  }
  .nav-link:hover {
    color: var(--color-accent);
    background: var(--color-accent-subtle);
  }
  .nav-link.active::after {
    display: none;
  }
  .nav-link.active {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 700;
  }
  .nav-item {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .dropdown-menu {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: rgba(36, 38, 36, 0.03);
    border-radius: 8px;
    padding: 4px 0 4px 12px;
    margin: 4px 0 6px;
    display: none;
  }
  .dropdown-link {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--color-earth-dark);
    border-bottom: 1px solid rgba(36, 38, 36, 0.05);
    transition: color 200ms ease, background-color 200ms ease;
  }
  .dropdown-link:hover {
    color: var(--color-accent);
    background: transparent;
  }
  .dropdown-link:last-child {
    border-bottom: none;
  }
  .nav-item.open .dropdown-menu {
    display: block;
  }
  .mobile-nav-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(36, 38, 36, 0.12);
  }
  .stat-ticker-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .stat-item::after {
    display: none !important;
  }
  .about-grid, .spirituality-showcase, .trust-account-box {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-features-grid {
    grid-template-columns: 1fr;
  }
  .hero-controls-dock {
    display: none;
  }
  .hero-swiper .swiper-pagination {
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 18px !important;
    justify-content: center;
  }
}


/* --- SVG Alignment & Polish (2026 Standards) --- */
.hero-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}


.about-check-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.verified-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 4px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-saffron);
  margin-top: 2px;
}

.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   INTERACTIVE DYNAMIC MODALS & TOAST SYSTEM
   ========================================================================== */
.site-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.site-modal.active {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 7, 5, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 0 16px 45px rgba(45, 25, 15, 0.12), 0 2px 8px rgba(45, 25, 15, 0.04);
  z-index: 2;
  color: #2C1810;
  animation: modalFadeUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalFadeUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content {
  padding: 32px 28px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(90, 70, 60, 0.12);
  padding-bottom: 16px;
}

.modal-title {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: #2C1810;
  line-height: 1.25;
}

.modal-subtitle {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  color: #6B5546;
  margin-top: 4px;
  line-height: 1.4;
}

.modal-close {
  background: rgba(90, 70, 60, 0.06);
  border: none;
  color: #5C4A3A;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(82, 107, 91, 0.12);
  color: var(--color-saffron, #526B5B);
  transform: rotate(90deg);
}

.modal-dialog p {
  color: #6B5546;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2C1810;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(90, 70, 60, 0.16);
  color: #1A120B;
  padding: 12px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(90, 70, 60, 0.45);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: rgba(90, 70, 60, 0.32);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--color-saffron, #526B5B);
  box-shadow: 0 0 0 3px rgba(82, 107, 91, 0.12);
}

.amount-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.amount-pill {
  flex: 1;
  min-width: 70px;
  background: #FAF7F2;
  border: 1px solid rgba(90, 70, 60, 0.16);
  color: #2C1810;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.amount-pill:hover {
  background: #F5EBE1;
  border-color: var(--color-saffron, #526B5B);
  color: var(--color-saffron, #526B5B);
}

.amount-pill.active {
  background: var(--color-saffron, #526B5B);
  border-color: var(--color-saffron, #526B5B);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(82, 107, 91, 0.25);
}

.modal-submit-btn {
  width: 100%;
  background: #526B5B;
  color: #FFF;
  border: none;
  padding: 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(82, 107, 91, 0.25);
}

.modal-submit-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(82, 107, 91, 0.35);
}

/* Toast Notification */
.toast-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-message {
  background: #242624;
  border: 1px solid var(--color-gold);
  color: #FFF;
  padding: 16px 20px;
  border-radius: 4px;
  font-size: 13.5px;
  max-width: 380px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-message.success {
  border-color: #4ADE80;
}

.toast-message.error {
  border-color: #EF4444;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   BPVF Modern Devotee Auth Popup Modal (White Card, Responsive, 440px)
   ========================================================================== */
.auth-site-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10050;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.auth-site-modal.active {
  display: flex !important;
}

.auth-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 10, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.auth-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 94vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  box-shadow: 0 20px 50px rgba(45, 25, 15, 0.12), 0 2px 8px rgba(45, 25, 15, 0.04) !important;
  z-index: 2;
  box-sizing: border-box;
  animation: authModalPop 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes authModalPop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal-card {
  padding: 32px 28px !important;
  position: relative;
  box-sizing: border-box;
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 70, 60, 0.06);
  border: none;
  border-radius: 50%;
  color: #2C1810;
  cursor: pointer;
  padding: 0;
  transition: all 0.18s ease;
  z-index: 10;
  line-height: 1;
}

.auth-modal-close:hover,
.auth-modal-close:focus-visible {
  background: rgba(82, 107, 91, 0.12);
  color: var(--color-saffron, #526B5B);
  transform: rotate(90deg);
}

.auth-card-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: rgba(82, 107, 91, 0.08);
  color: var(--color-saffron, #526B5B);
  margin-bottom: 12px;
}

.auth-card-title {
  font-family: var(--font-heading, 'Newsreader', serif);
  font-size: 24px;
  font-weight: 700;
  color: #2C1810;
  line-height: 1.2;
  margin: 0 0 4px;
}

.auth-card-subtitle {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  color: #6B5546;
  margin: 0;
  line-height: 1.4;
}

.auth-alert-box {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  box-sizing: border-box;
}

.auth-alert-box.is-error {
  background: #FEF2F2;
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #B91C1C;
}

.auth-alert-box.is-success {
  background: #F0FDF4;
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #15803D;
}

.auth-alert-box.is-warning {
  background: #FFFBEB;
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: #B45309;
}

.auth-modal-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.auth-input-label {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2C1810;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-forgot-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-saffron, #526B5B);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.auth-forgot-link:hover,
.auth-forgot-link:focus-visible {
  text-decoration: underline;
  opacity: 0.85;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  color: #9C8572;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.auth-clean-input {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 42px 0 42px;
  border: 1px solid rgba(90, 70, 60, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13.5px;
  color: #1A120B;
  outline: none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-clean-input::placeholder {
  color: rgba(90, 70, 60, 0.45);
}

.auth-clean-input:hover {
  border-color: rgba(90, 70, 60, 0.32);
}

.auth-clean-input:focus {
  border-color: var(--color-saffron, #526B5B);
  background: #FFFFFF;
  box-shadow: 0 0 0 3.5px rgba(82, 107, 91, 0.12);
}

.auth-toggle-pwd {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  padding: 6px;
  color: #9C8572;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: color 0.18s ease;
}

.auth-toggle-pwd:hover,
.auth-toggle-pwd:focus-visible {
  color: var(--color-saffron, #526B5B);
}

.auth-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  border-radius: 4px;
  background: var(--color-saffron, #526B5B);
  border: none;
  color: #FFFFFF;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(82, 107, 91, 0.28);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.auth-primary-btn:hover,
.auth-primary-btn:focus-visible {
  background: #415548;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(207, 93, 0, 0.38);
}

.auth-primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(207, 93, 0, 0.25);
}

.auth-primary-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #8F7665;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(82, 107, 91, 0.24);
}

.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(90, 70, 60, 0.18);
  color: #2C1810;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(36, 38, 36, 0.04);
  transition: all 0.2s ease;
}

.auth-google-btn:hover,
.auth-google-btn:focus-visible {
  background: #FFFFFF;
  border-color: rgba(82, 107, 91, 0.5);
  box-shadow: 0 4px 14px rgba(36, 38, 36, 0.1);
  transform: translateY(-1px);
}

.auth-footer-switch {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: #5C4332;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-switch-tab-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-saffron, #526B5B);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.auth-switch-tab-btn:hover,
.auth-switch-tab-btn:focus-visible {
  text-decoration: underline;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .auth-modal-card {
    padding: 26px 18px !important;
  }
  .auth-card-title {
    font-size: 21px;
  }
}

/* ==========================================================================
   BPVF Global Public Form System (White + Minimal Glassmorphism)
   Scope: Contact, Dedicated Auth Pages, Account Profile, Password Change
   ========================================================================== */

/* 1. Contact Form Card & Inputs */
.contact-form-card,
.contact-grid .editorial-card:has(#contactPageForm),
.contact-page-section .editorial-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 36px rgba(45, 25, 15, 0.08), 0 2px 8px rgba(45, 25, 15, 0.03) !important;
}

#contactPageForm input,
#contactPageForm select,
#contactPageForm textarea {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(90, 70, 60, 0.16) !important;
  border-radius: 12px !important;
  color: #1A120B !important;
  padding: 12px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

#contactPageForm input::placeholder,
#contactPageForm textarea::placeholder {
  color: rgba(90, 70, 60, 0.45) !important;
}

#contactPageForm input:hover,
#contactPageForm select:hover,
#contactPageForm textarea:hover {
  border-color: rgba(90, 70, 60, 0.32) !important;
}

#contactPageForm input:focus,
#contactPageForm select:focus,
#contactPageForm textarea:focus {
  outline: none !important;
  background: #FFFFFF !important;
  border-color: var(--color-saffron, #526B5B) !important;
  box-shadow: 0 0 0 3px rgba(82, 107, 91, 0.12) !important;
}

#contactPageForm label {
  color: #2C1810 !important;
  font-weight: 600 !important;
}

/* 2. Public Devotee Auth Pages & User Account Cards */
.account-auth-container {
  max-width: 480px;
  margin: 140px auto 80px;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  padding: 36px 32px;
  box-shadow: 0 12px 36px rgba(45, 25, 15, 0.08), 0 2px 8px rgba(45, 25, 15, 0.03) !important;
}

.account-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  padding: 28px;
  box-shadow: 0 8px 28px rgba(45, 25, 15, 0.06), 0 2px 6px rgba(45, 25, 15, 0.02) !important;
  margin-bottom: 24px;
}

.account-card div[style*="overflow-x"] > table {
  min-width: 620px;
}

.auth-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(90, 70, 60, 0.16) !important;
  border-radius: 12px !important;
  font-size: 14px;
  color: #1A120B !important;
  background: rgba(255, 255, 255, 0.95) !important;
  font-family: inherit;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-input::placeholder {
  color: rgba(90, 70, 60, 0.45) !important;
}

.auth-input:hover {
  border-color: rgba(90, 70, 60, 0.32) !important;
}

.auth-input:focus {
  outline: none;
  background: #FFFFFF !important;
  border-color: var(--color-saffron, #526B5B) !important;
  box-shadow: 0 0 0 3px rgba(82, 107, 91, 0.12) !important;
}

.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #2C1810 !important;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-btn {
  width: 100%;
  height: 48px;
  background: var(--color-saffron, #526B5B) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(82, 107, 91, 0.25) !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.auth-btn:hover {
  background: #415548 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(82, 107, 91, 0.35) !important;
}

/* ==========================================================================
   BLOG / ARTICLES HOMEPAGE CAROUSEL (MODERN COMPACT GLASSMORPHISM)
   ========================================================================== */
.blog-carousel-section {
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
}

.blog-carousel-section .blog-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.blog-carousel-section .container,
.blog-swiper,
.blog-card,
.dest-card,
.blog-glass-card {
  opacity: 1 !important;
  visibility: visible !important;
}

.blog-head-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.blog-view-all-btn {
  font-size: 11.5px !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}

.blog-swiper {
  padding: 8px 4px 48px !important;
  overflow: hidden;
  cursor: grab;
}

.blog-swiper:active {
  cursor: grabbing;
}

.swiper-slide.blog-slide {
  height: auto !important;
  display: flex !important;
  box-sizing: border-box !important;
}

/* Glassmorphic Card Container */
.blog-glass-card,
.blog-card,
.blog-card-inner,
.dest-card.blog-card {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid rgba(82, 107, 91, 0.14) !important;
  box-shadow: 0 14px 34px -10px rgba(36, 38, 36, 0.08) !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background 0.4s ease !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.blog-glass-card:hover,
.blog-card:hover,
.blog-card-inner:hover,
.dest-card.blog-card:hover {
  transform: translateY(-5px) scale(1.012) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(82, 107, 91, 0.40) !important;
  box-shadow: 0 24px 50px -12px rgba(82, 107, 91, 0.16), 0 8px 20px -4px rgba(36, 38, 36, 0.08) !important;
}

/* Media / Image Box */
.blog-card-media,
.dest-img-box,
.blog-card-img-box {
  position: relative !important;
  height: 190px !important;
  overflow: hidden !important;
  background: #F0ECE4 !important;
  border-radius: 22px 22px 0 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.blog-card-media img,
.dest-img-box img,
.blog-card-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.blog-glass-card:hover .blog-card-media img,
.blog-card:hover .dest-img-box img,
.blog-card:hover .blog-card-img-box img {
  transform: scale(1.04) !important;
}

/* Translucent Glass Pill Category Tag */
.blog-card-tag,
.dest-badge,
.blog-card-badge {
  position: absolute !important;
  top: 13px !important;
  left: 13px !important;
  background: rgba(36, 38, 36, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FED6C2 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 4px 11px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Card Body / Content */
.blog-card-content,
.dest-body,
.blog-card-body {
  padding: 18px 20px 18px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.blog-card-info {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Card Headline / Title */
.blog-card-headline,
.blog-card h3,
.blog-card .blog-card-title {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif) !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #242624 !important;
  margin: 0 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 50px !important;
}

.blog-card-headline a,
.blog-card h3 a,
.blog-card .blog-card-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.blog-glass-card:hover .blog-card-headline a,
.blog-card:hover h3 a,
.blog-card:hover .blog-card-title a {
  color: var(--color-saffron, #526B5B) !important;
}

/* Card Snippet / Excerpt */
.blog-card-snippet,
.blog-card p,
.blog-card .blog-card-excerpt {
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-size: 13.5px !important;
  color: var(--color-earth-medium, #5C5248) !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Meta Row (Date & Read Time) */
.blog-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #7D7063 !important;
  margin-bottom: 14px !important;
  margin-top: auto !important;
}

.blog-card-meta svg {
  color: #B45309 !important;
  flex-shrink: 0 !important;
}

.blog-card-meta .meta-dot {
  color: #C56545 !important;
  font-size: 13px !important;
}

.blog-card-footer {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* CTA Pill Button */
.blog-card-cta,
.blog-card .blog-card-btn,
.blog-card .blog-card-link,
.blog-card a.btn-secondary {
  background: #FFFFFF;
  color: var(--color-earth-dark);
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 4px;
}

.blog-card-cta:hover,
.blog-card .blog-card-btn:hover,
.blog-card .blog-card-link:hover,
.blog-card a.btn-secondary:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: none;
}

/* Swiper Pagination Dots for Blog Slider */
.blog-swiper-pagination {
  position: relative !important;
  margin-top: 18px !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

.blog-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #C56545;
  opacity: 0.35;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  margin: 0 !important;
}

.blog-swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.8;
}

.blog-swiper-pagination .swiper-pagination-bullet-active {
  width: 26px;
  height: 8px;
  background: var(--color-saffron, #526B5B);
  opacity: 1;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(82, 107, 91, 0.35);
}

/* ==========================================================================
   Comprehensive Reduced Motion Support (Accessibility Standard)
   ========================================================================== */
@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;
  }

  .reveal,
  .reveal-up,
  .reveal-fade-up,
  .reveal-fade-in,
  .reveal-scale,
  .reveal-left,
  .reveal-right,
  .reveal-slide-left,
  .reveal-slide-right,
  .section-head.reveal .eyebrow,
  .section-head.reveal h2,
  .section-head.reveal p,
  .services-showcase-head.reveal .eyebrow,
  .services-showcase-head.reveal h2,
  .services-showcase-head.reveal p,
  .services-showcase-head.reveal .services-showcase-title,
  .services-showcase-head.reveal .services-showcase-subtitle,
  .destinations-head-row.reveal .eyebrow,
  .destinations-head-row.reveal h2,
  .destinations-head-row.reveal p,
  .hero-swiper .swiper-slide .hero-slide-content h1,
  .hero-swiper .swiper-slide .hero-slide-content .desc,
  .hero-swiper .swiper-slide .hero-slide-content .hero-action {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .bento-card:hover,
  .dest-card:hover,
  .spirituality-card:hover,
  .blog-glass-card:hover,
  .blog-card:hover,
  .blog-card-inner:hover,
  .service-grid-card:hover,
  .btn:hover,
  .back-to-top:hover {
    transform: none !important;
  }

  .bento-card:hover .bento-card-bg,
  .dest-card:hover .dest-img-box img,
  .spirituality-card:hover .spirituality-img-wrap img,
  .blog-glass-card:hover .blog-card-media img,
  .blog-card:hover .dest-img-box img,
  .blog-card:hover .blog-card-img-box img,
  .service-grid-card:hover .service-card-bg {
    transform: none !important;
  }

  .brush-stroke {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .ethos-floating-chip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: none !important;
  }

  .modal-dialog,
  .auth-modal-dialog,
  .nav.open,
  .toast-message {
    animation: none !important;
  }
}

/* ==========================================================================
   2026 Mobile UI Optimization: Clean, Minimal, Centered & Vertically Balanced
   Applies ONLY to non-Hero sections for screens <= 768px and <= 430px
   ========================================================================== */
@media (max-width: 768px) {
  /* Section Padding & Spacing */
  .section {
    padding: 48px 0 !important;
  }

  /* Centered Eyebrow */
  .eyebrow {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 11.5px !important;
    letter-spacing: 0.12em !important;
    margin: 0 auto 8px !important;
    text-align: center !important;
  }

  .eyebrow::before {
    display: none !important;
  }

  /* Compact Centered Intro Blocks (Controlled 300px - 330px width) */
  .section-head {
    margin: 0 auto 16px !important;
    text-align: center !important;
    max-width: 320px !important;
    margin-inline: auto !important;
  }

  .destinations-head-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto 16px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-inline: auto !important;
    gap: 0 !important;
  }

  .destinations-head-row > div:first-child {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .services-showcase-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto 18px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-inline: auto !important;
  }

  .services-showcase-titles {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .services-showcase-btn-wrap {
    margin: 8px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .btn-services-viewall {
    padding: 8px 18px !important;
    font-size: 11.5px !important;
  }

  /* Section Headings on Mobile (Compact, 1-2 lines max) */
  .section-head h2,
  .destinations-head-row h2,
  .services-showcase-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(30px, 7.8vw, 34px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    margin: 0 auto 8px !important;
    max-width: 100% !important;
  }

  /* Section Descriptions on Mobile (Controlled 300px width, 1-2 lines) */
  .section-head p,
  .services-showcase-subtitle,
  .destinations-head-row p.lead {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    color: var(--color-earth-medium) !important;
    text-align: center !important;
    margin: 0 auto 14px !important;
    max-width: 310px !important;
    margin-inline: auto !important;
  }

  /* Dedicated Carousel Controls Row (Centered below description) */
  .dest-nav-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 14px auto 18px !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .dest-nav-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(36, 38, 36, 0.06) !important;
  }

  .dest-nav-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .blog-head-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 14px auto 18px !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }

  .blog-head-actions .dest-nav-controls {
    margin: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    gap: 10px !important;
  }

  .blog-view-all-btn {
    padding: 8px 16px !important;
    font-size: 11.5px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* Destinations Swiper & Cards on Mobile */
  .destinations-swiper {
    padding: 4px 2px 28px !important;
  }

  .dest-img-box {
    height: 175px !important;
  }

  .dest-body {
    padding: 16px 14px 18px !important;
    text-align: center !important;
  }

  .dest-body h3 {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  .dest-body p {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    color: var(--color-earth-medium) !important;
  }

  .dest-body .btn {
    padding: 8px 16px !important;
    font-size: 11.5px !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* Devotee Services Showcase on Mobile */
  .service-grid-card {
    height: 210px !important;
  }

  /* Spirituality Showcase on Mobile */
  .spirituality-showcase {
    gap: 18px !important;
  }

  .spirituality-img-wrap {
    height: 175px !important;
  }

  .spirituality-content {
    padding: 18px 16px !important;
  }

  .spirituality-content h3 {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }

  .spirituality-content p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .spirituality-features {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .spirituality-features li {
    font-size: 13px !important;
    gap: 8px !important;
  }

  .spirituality-content .btn {
    padding: 9px 18px !important;
    font-size: 11.5px !important;
    margin-top: 4px !important;
  }

  /* Blog Swiper & Cards on Mobile */
  .blog-swiper {
    padding: 4px 2px 28px !important;
  }

  .blog-card-media {
    height: 155px !important;
  }

  .blog-card-content {
    padding: 14px 14px 12px !important;
  }

  .blog-card-headline {
    font-size: 19px !important;
    line-height: 1.25 !important;
    min-height: unset !important;
    margin-bottom: 6px !important;
  }

  .blog-card-snippet {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .blog-card-meta {
    margin-bottom: 10px !important;
    font-size: 11.5px !important;
  }

  .blog-card-cta {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }

  /* FAQ Accordion on Mobile */
  .faq-grid {
    gap: 12px !important;
  }

  .faq-trigger {
    padding: 14px 16px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .faq-content,
  .faq-item.active .faq-content {
    padding: 0 !important;
  }

  .faq-grid .faq-inner {
    padding: 0 16px 14px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .faq-item:not(.active) .faq-inner {
    padding-bottom: 0 !important;
  }

  /* Bento Seva Cards on Mobile */
  .bento-grid {
    gap: 16px !important;
  }

  .bento-card {
    min-height: 220px !important;
    padding: 18px 16px !important;
  }

  .bento-content {
    padding: 0 !important;
  }

  .bento-content h3 {
    font-size: 20px !important;
    margin-bottom: 5px !important;
  }

  .bento-content p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .bento-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
  }
}

/* Specific Extra Compact Tweaks for <= 430px screens (e.g. 390px, 430px) */
@media (max-width: 430px) {
  .section {
    padding: 44px 0 !important;
  }

  .section-head h2,
  .destinations-head-row h2,
  .services-showcase-title {
    font-size: clamp(28px, 7.8vw, 31px) !important;
    line-height: 1.08 !important;
  }

  .section-head p,
  .destinations-head-row p.lead,
  .services-showcase-subtitle {
    font-size: 14px !important;
    max-width: 290px !important;
    margin-inline: auto !important;
  }

  .dest-body,
  .spirituality-content,
  .blog-card-content {
    padding: 14px 12px !important;
  }

  .bento-card {
    padding: 16px 14px !important;
  }
}

/* ==========================================================================
   2026 Accessibility: Reduced Motion & Focus Systems
   ========================================================================== */
@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;
  }

  .homepage-sacred-bg,
  .homepage-sacred-bg::after {
    animation: none !important;
    transform: none !important;
  }

  .bento-card,
  .dest-card,
  .spirituality-card,
  .service-grid-card,
  .blog-glass-card {
    transform: none !important;
    transition: none !important;
  }

  .bento-card::after,
  .dest-card::before,
  .spirituality-card::before,
  .service-grid-card::before,
  .blog-glass-card::before {
    display: none !important;
  }

  .reveal,
  .reveal-up,
  .reveal-scale,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Keyboard Focus Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary, #526B5B) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   Inner Page System: Classical Editorial Standard
   Vrindavan Sangeet Samiti
   ========================================================================== */

/* 1. Page Header (Editorial Hero with Breadcrumbs) */
.page-header {
  position: relative;
  background-color: #F7F6F2;
  background-image: linear-gradient(
    115deg,
    #F4EDE2 0%,
    #F7F3EB 28%,
    #EEF0E6 62%,
    #DCE7DC 100%
  );
  border-bottom: 1px solid rgba(82, 107, 91, 0.16);
  padding: 56px 0 48px;
  overflow: hidden;
}

.page-header-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #8C7B6B;
  font-weight: 500;
  margin-bottom: 20px;
}

.page-breadcrumb a {
  color: #8C7B6B;
  text-decoration: none;
  transition: color 0.2s ease;
}

.page-breadcrumb a:hover {
  color: var(--color-primary, #526B5B);
}

.page-breadcrumb .sep {
  color: rgba(140, 123, 107, 0.45);
  font-size: 11px;
}

.page-breadcrumb .current {
  color: var(--color-earth-dark, #242624);
  font-weight: 600;
}

.page-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #526B5B);
  margin-bottom: 12px;
}

.page-title {
  font-family: var(--font-heading, 'Newsreader', serif);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 600;
  line-height: 1.14;
  color: var(--color-earth-dark, #242624);
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.page-lead {
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.72;
  color: #5C4A3A;
  max-width: 840px;
  margin: 0;
  font-weight: 400;
}

/* 2. Inner Page Main Content Wrapper */
.inner-page-main {
  background-color: var(--color-bg, #FCF9F5);
  padding: 60px 0 96px;
}

/* 3. Editorial Typography & Layout */
.editorial-article {
  color: #382D23;
  font-size: 16px;
  line-height: 1.82;
}

.editorial-article h2 {
  font-family: var(--font-heading, 'Newsreader', serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.22;
  color: var(--color-earth-dark, #242624);
  margin: 44px 0 18px;
  letter-spacing: -0.01em;
}

.editorial-article h2:first-child {
  margin-top: 0;
}

.editorial-article h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #2D2218;
  margin: 32px 0 12px;
}

.editorial-article p {
  margin-bottom: 22px;
}

.editorial-article p.lead-text {
  font-size: 18px;
  line-height: 1.75;
  color: #4A3A2C;
}

.editorial-article blockquote {
  position: relative;
  margin: 36px 0;
  padding: 24px 32px;
  background: #FAF6EF;
  border-left: 3px solid var(--color-primary, #526B5B);
  border-radius: 0 10px 10px 0;
  font-family: var(--font-heading, 'Newsreader', serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-earth-dark, #242624);
}

.editorial-article ul, .editorial-article ol {
  margin: 0 0 26px 20px;
  padding: 0;
}

.editorial-article li {
  margin-bottom: 10px;
  line-height: 1.75;
}

/* 4. Editorial Split 2-Column Section */
.editorial-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: start;
  margin: 44px 0;
}

.editorial-split.reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

/* 5. Editorial Image Card & Frame */
.editorial-image-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(197, 154, 95, 0.25);
  box-shadow: 0 10px 32px rgba(22, 16, 11, 0.05);
  background: #EAE3D6;
}

.editorial-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.editorial-image-frame:hover img {
  transform: scale(1.025);
}

.editorial-image-caption {
  font-size: 12.5px;
  line-height: 1.5;
  color: #7A695A;
  padding: 10px 14px;
  background: #FAF7F2;
  border-top: 1px solid rgba(197, 154, 95, 0.15);
  font-style: italic;
}

/* 6. Editorial Feature & Fact Cards */
.editorial-card {
  background: #FFFFFF;
  border: 1px solid rgba(197, 154, 95, 0.22);
  border-radius: 4px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(22, 16, 11, 0.02);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.editorial-card:hover {
  border-color: rgba(197, 154, 95, 0.45);
  box-shadow: 0 8px 26px rgba(22, 16, 11, 0.06);
}

.editorial-card h3 {
  font-size: 19px;
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--color-earth-dark, #242624);
}

.editorial-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #5C4A3A;
  margin-bottom: 14px;
}

.editorial-card p:last-child {
  margin-bottom: 0;
}

/* Event Card Grid & Form Layout Elements */
.event-card-grid {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 28px;
  align-items: center;
}

.event-card-date-badge {
  background: #FAF7F2;
  border: 1px solid rgba(197, 154, 95, 0.25);
  border-radius: 10px;
  padding: 18px 10px;
  text-align: center;
}

/* Event Showcase & Bilingual Presentation */
.event-showcase-container {
  background: #FFFFFF;
  border: 1px solid rgba(82, 107, 91, 0.25);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(36, 38, 36, 0.05);
  overflow: hidden;
  margin-bottom: 48px;
}

.event-bilingual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.event-lang-column {
  padding: 32px 30px;
  box-sizing: border-box;
}

.event-lang-column:first-child {
  border-right: 1px solid rgba(36, 38, 36, 0.08);
}

@media (max-width: 768px) {
  .event-bilingual-grid {
    grid-template-columns: 1fr !important;
  }
  .event-lang-column {
    padding: 24px 18px !important;
  }
  .event-lang-column:first-child {
    border-right: none !important;
    border-bottom: 1px solid rgba(36, 38, 36, 0.08) !important;
  }
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

/* 7. Grid Layouts */
.editorial-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 36px 0;
}

.editorial-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 36px 0;
}

/* 8. Action Bar & Next Steps Strip */
.editorial-action-bar {
  background: #FAF7F2;
  border: 1px solid rgba(197, 154, 95, 0.25);
  border-radius: 4px;
  padding: 40px 44px;
  margin: 64px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.editorial-action-content {
  max-width: 620px;
}

.editorial-action-content h3 {
  font-family: var(--font-heading, 'Newsreader', serif);
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--color-earth-dark, #242624);
  margin: 0 0 8px;
  font-weight: 600;
}

.editorial-action-content p {
  font-size: 15px;
  line-height: 1.65;
  color: #5C4A3A;
  margin: 0;
}

.editorial-action-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* 9. Related Links Hub */
.related-hub {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(197, 154, 95, 0.2);
}

.related-hub-heading {
  font-family: var(--font-heading, 'Newsreader', serif);
  font-size: 26px;
  color: var(--color-earth-dark, #242624);
  margin-bottom: 22px;
}

.related-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.related-link-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid rgba(197, 154, 95, 0.2);
  border-radius: 4px;
  padding: 22px;
  text-decoration: none;
  transition: all 0.22s ease;
}

.related-link-card:hover {
  border-color: var(--color-primary, #526B5B);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 16, 11, 0.05);
}

.related-link-card .related-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #526B5B);
  margin-bottom: 6px;
}

.related-link-card .related-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-earth-dark, #242624);
  margin-bottom: 6px;
}

.related-link-card .related-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #7A695A;
  margin: 0;
}

/* 10. Gallery System */
.gallery-filter-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.gallery-filter-btn {
  padding: 9px 22px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(197, 154, 95, 0.28);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #5C4A3A;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
  background: var(--color-earth-dark, #242624);
  color: #FFFFFF;
  border-color: var(--color-earth-dark, #242624);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.gallery-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #E8E2D8;
  border: 1px solid rgba(197, 154, 95, 0.2);
  cursor: pointer;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.gallery-card:hover img {
  transform: scale(1.025);
}

.gallery-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 20px;
  background: linear-gradient(to top, rgba(21, 16, 14, 0.92) 0%, rgba(21, 16, 14, 0.4) 60%, transparent 100%);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gallery-card:hover .gallery-card-overlay {
  opacity: 1;
}

.gallery-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #FFFFFF;
}

.gallery-card-category {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}

/* Lightbox Modal */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 7, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.gallery-lightbox.active {
  display: flex;
}

.gallery-lightbox-content {
  position: relative;
  max-width: 1100px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.gallery-lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  background: var(--color-primary, #526B5B);
  border-color: var(--color-primary, #526B5B);
}

.gallery-lightbox-close {
  top: -20px;
  right: 0;
}

.gallery-lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* 11. Contact Form & Transit Grid */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: start;
}

.transit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.transit-card {
  background: #FFFFFF;
  border: 1px solid rgba(197, 154, 95, 0.22);
  border-radius: 4px;
  padding: 26px;
}

.transit-card h4 {
  font-size: 16.5px;
  margin: 10px 0 8px;
  color: var(--color-earth-dark, #242624);
}

.transit-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #5C4A3A;
  margin: 0;
}

/* Contact Location & Google Maps Section */
.contact-location-section {
  margin-top: 64px;
}

.contact-location-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}

.contact-map-wrapper {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(197, 154, 95, 0.28);
  box-shadow: 0 10px 30px -10px rgba(36, 38, 36, 0.08);
  background: #F3EFEA;
}

.contact-map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-location-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-location-title {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-earth-dark);
  margin: 6px 0 12px;
  line-height: 1.25;
}

.contact-location-lead {
  font-size: 15px;
  line-height: 1.65;
  color: #5C4A3A;
  margin-bottom: 24px;
}

.contact-address-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid rgba(197, 154, 95, 0.22);
  border-radius: 4px;
  padding: 20px 22px;
  margin-bottom: 28px;
}

.contact-address-icon {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: rgba(230, 161, 92, 0.15);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-address-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-earth-dark);
  margin: 0 0 6px;
}

.contact-address-text {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: #5C4A3A;
}

.contact-directions-action {
  display: flex;
  align-items: center;
}

.contact-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.contact-directions-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(82, 107, 91, 0.35);
}

/* Responsive Breakpoints for Inner Page System */
@media (max-width: 1024px) {
  .editorial-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .editorial-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .transit-grid {
    grid-template-columns: 1fr;
  }
  .contact-layout-grid {
    grid-template-columns: 1fr;
  }
  .contact-location-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact-map-wrapper {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .contact-location-section {
    margin-top: 48px;
  }
  .contact-location-grid {
    gap: 28px;
  }
  .contact-map-wrapper {
    height: 300px;
    border-radius: 20px;
  }
  .contact-location-title {
    font-size: 26px;
  }
  .contact-address-card {
    padding: 16px 18px;
    margin-bottom: 22px;
  }
  .page-header {
    padding: 38px 0 32px;
  }
  .inner-page-main {
    padding: 44px 0 72px;
  }
  .editorial-grid-3,
  .editorial-grid-2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .editorial-action-bar {
    padding: 30px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-lightbox-prev {
    left: 10px;
  }
  .gallery-lightbox-next {
    right: 10px;
  }
  .event-card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .event-card-date-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    text-align: left !important;
  }
  .event-card-date-badge span {
    display: inline-block !important;
    margin: 0 !important;
  }
  .event-card-grid .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  div[style*="overflow-x: auto"] table {
    min-width: 680px !important;
  }
}

@media (max-width: 600px) {
  .brand-logo-img {
    height: 38px !important;
  }
  .contact-form-card {
    padding: 24px 18px !important;
  }
  .form-row-2col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  .menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: 3 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    color: var(--color-earth-dark);
    flex-shrink: 0;
  }
  .header-actions {
    display: flex !important;
    align-items: center !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .header-actions .header-btn-login,
  .header-actions .login-menu,
  .header-actions .header-login-dropdown-wrap {
    display: none !important;
  }
  .header-actions .header-btn-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .header-actions .header-btn-cta svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* ==========================================================================
   FAQ Word-Level Blurred Stagger Reveal & Accordion (2026 Standards)
   ========================================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.faq-list .faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(197, 154, 95, 0.22);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-list .faq-item:hover {
  border-color: rgba(197, 154, 95, 0.45);
}

.faq-list .faq-item.active {
  border-color: rgba(82, 107, 91, 0.35);
  box-shadow: 0 8px 24px -6px rgba(36, 38, 36, 0.06);
}

.faq-list .faq-trigger {
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-earth-dark);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.faq-list .faq-trigger:hover {
  color: var(--color-primary);
}

.faq-list .faq-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.faq-list .faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-primary);
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.25s ease;
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  max-height: none !important;
  opacity: 1 !important;
  padding: 0 !important;
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
  max-height: none !important;
  opacity: 1 !important;
  padding: 0 !important;
}

.faq-content-inner,
.faq-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-answer-body {
  padding: 0 24px 22px;
}

.faq-answer-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #5C4A3A;
  margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Word-Level Blurred Stagger Reveal */
.faq-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(2px);
  will-change: opacity, filter, transform;
}

/* When item is active and words are revealed */
.faq-item.active .faq-word.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 300ms ease-out, filter 300ms ease-out, transform 300ms ease-out;
}

/* When item collapses, reset immediately without reverse blur */
.faq-item:not(.active) .faq-word {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(2px);
  transition: none !important;
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .faq-content {
    transition: none !important;
  }
  .faq-word,
  .faq-item.active .faq-word.is-revealed,
  .faq-item:not(.active) .faq-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
/* ==========================================================================
   15. FINAL HOMEPAGE CINEMATIC VIDEO CTA SECTION
   Cinematic closing moment of the homepage before global footer
   ========================================================================== */
.footer-video-section {
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  background-color: #0F0805;
  box-sizing: border-box;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.footer-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  border: none;
  outline: none;
  pointer-events: none;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Flush Straight Connection between Video CTA Section and Footer on Homepage
   Eliminates curved cutouts/gaps between video and footer, ensuring a 100% straight edge.
   Inner pages (/about, /contact, etc.) continue to have the elegant rounded top corners. */
.footer-video-section + .footer,
main:has(.footer-video-section) + .footer,
body.page-home .footer,
body:has(.footer-video-section) .footer {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 1px solid #DCDDD6 !important;
}

.footer-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 8, 5, 0.42);
  pointer-events: none;
}

.footer-video-content {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 900px);
  margin-inline: auto;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 56px 0;
}

.footer-video-eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #FED6C2;
  margin-bottom: 16px;
  line-height: 1.3;
}

.footer-video-heading {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: 52px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #FAF5ED;
  margin: 0 0 18px 0;
  text-shadow: 0 2px 16px rgba(15, 8, 5, 0.45);
  max-width: 820px;
}

.footer-video-desc {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(250, 245, 237, 0.90);
  max-width: 600px;
  margin: 0 0 32px 0;
  text-shadow: 0 1px 8px rgba(15, 8, 5, 0.4);
}

.footer-video-action {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  background: #526B5B;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 28px -6px rgba(15, 8, 5, 0.45), 0 4px 12px rgba(82, 107, 91, 0.35);
  cursor: pointer;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s ease,
              background 0.24s ease,
              border-color 0.24s ease;
}

.footer-video-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #EC765C 0%, #D8472B 55%, #C23A20 100%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 14px 34px -6px rgba(15, 8, 5, 0.55), 0 6px 18px rgba(82, 107, 91, 0.45);
}

.footer-video-btn:active {
  transform: translateY(0);
}

/* Tablet Breakpoint (1024px) */
@media (max-width: 1024px) {
  .footer-video-section {
    min-height: 550px;
  }
  .footer-video-content {
    min-height: 550px;
  }
  .footer-video-heading {
    font-size: 44px;
    margin-bottom: 16px;
  }
  .footer-video-desc {
    font-size: 17px;
    margin-bottom: 28px;
  }
}

/* Mobile Breakpoint (768px & below) */
@media (max-width: 768px) {
  .footer-video-section {
    min-height: 480px;
  }
  .footer-video-content {
    min-height: 480px;
    width: calc(100% - 40px);
    max-width: 900px;
    padding: 44px 0;
  }
  .footer-video-eyebrow {
    font-size: 12px;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
  }
  .footer-video-heading {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .footer-video-desc {
    font-size: 15px;
    line-height: 1.55;
    max-width: 320px;
    margin-bottom: 24px;
  }
  .footer-video-btn {
    padding: 14px 28px;
    font-size: 15px;
    width: 100%;
    max-width: 290px;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   9C. Promotional Offers & Packages Banner Slider
   Single-Banner 1000x320 Full-Artwork Layout | Responsive Across All Devices
   ========================================================================== */
.promo-offers-section {
  padding: 60px 0 55px;
  background-color: #FAF7F2;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.promo-offers-container,
.offers-slider-wrapper {
  width: min(1000px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.promo-offers-wrapper,
.offers-slider-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  padding: 4px 0 8px; /* Room for elevation shadow */
}

.promo-track,
.offers-track {
  display: flex;
  transition: transform 650ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Single Banner: exactly 1 banner visible across all viewports */
.promo-slide,
.offers-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.promo-card,
.offers-card {
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(212, 163, 89, 0.25);
  box-shadow: 0 8px 28px rgba(42, 26, 16, 0.08), 0 2px 6px rgba(42, 26, 16, 0.04);
  background-color: #1B1510;
  aspect-ratio: 1000 / 320;
  transition: box-shadow 0.3s ease;
}

.promo-card:hover,
.offers-card:hover {
  box-shadow: 0 12px 36px rgba(42, 26, 16, 0.12), 0 4px 10px rgba(42, 26, 16, 0.06);
}

.promo-img,
.offers-img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1000 / 320;
  object-fit: contain; /* Complete 1000x320 artwork visible without any cropping */
  border-radius: 20px;
}

/* Subtle Centered Pagination Dots */
.promo-dots,
.offers-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.promo-dot,
.offers-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #D8CEBE;
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.promo-dot:hover,
.offers-dot:hover {
  background: #BFA88F;
  transform: scale(1.15);
}

.promo-dot.active,
.offers-dot.active {
  background: #526B5B;
  width: 28px;
  border-radius: 8px;
}

.promo-dot:focus-visible,
.offers-dot:focus-visible {
  outline: 2px solid #526B5B;
  outline-offset: 3px;
}

/* Mobile (< 768px): Responsive 1-Banner with 16px side margins */
@media (max-width: 767px) {
  .promo-offers-section {
    padding: 40px 0 35px;
  }

  .promo-offers-container,
  .offers-slider-wrapper {
    width: calc(100% - 32px); /* 16px left + 16px right */
  }

  .promo-offers-wrapper,
  .offers-slider-viewport,
  .promo-card,
  .offers-card,
  .promo-img,
  .offers-img {
    border-radius: 4px;
    aspect-ratio: 1000 / 320;
  }

  .promo-dots,
  .offers-dots {
    margin-top: 14px;
    gap: 8px;
  }

  .promo-dot,
  .offers-dot {
    width: 8px;
    height: 8px;
  }

  .promo-dot.active,
  .offers-dot.active {
    width: 22px;
  }
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .promo-track,
  .offers-track {
    transition: none !important;
  }
}

/* ==========================================================================
   VSS Institutional Homepage & Unified Component Architecture
   Clean Editorial Standard: Typography, Restrained Palette & Hierarchy
   ========================================================================== */

.vss-section {
  padding: 84px 0;
  background-color: #FFFFFF;
}

.vss-section-alt {
  padding: 84px 0;
  background-color: var(--color-main-bg);
}

.vss-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.vss-header-block {
  margin-bottom: 48px;
}

.vss-header-block.text-center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.vss-header-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 44px;
}

.vss-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.vss-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  color: var(--color-earth-dark);
  line-height: 1.22;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.vss-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}

/* 1. About Institutional Layout */
.vss-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .vss-about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.vss-about-content p {
  color: var(--color-earth);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.vss-about-content p.secondary {
  color: var(--color-muted);
  font-size: 14.5px;
  margin-bottom: 28px;
}

.vss-pillars-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 36px 32px;
}

.vss-pillars-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.vss-pillar-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.vss-pillar-item:last-child {
  margin-bottom: 0;
}

.vss-pillar-num {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.2;
}

.vss-pillar-heading {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin-bottom: 4px;
}

.vss-pillar-desc {
  font-size: 13.5px;
  color: var(--color-muted);
  line-height: 1.6;
}

/* 2. Heritage Lineage Cards */
.vss-heritage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

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

.vss-heritage-card {
  background: var(--color-main-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vss-heritage-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #EAE6DE;
}

.vss-heritage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.vss-heritage-card:hover .vss-heritage-img {
  transform: scale(1.03);
}

.vss-heritage-body {
  padding: 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vss-heritage-card-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin: 0 0 10px;
  line-height: 1.3;
}

.vss-heritage-card-text {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

/* 3. Programmes Grid */
.vss-programmes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

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

.vss-programme-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vss-programme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(36, 38, 36, 0.09);
  border-color: rgba(255, 255, 255, 0.90);
}

.vss-discipline-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.vss-programme-title {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin: 0 0 12px;
  line-height: 1.25;
}

.vss-programme-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0 0 24px;
}

.vss-programme-footer {
  border-top: 1px solid rgba(229, 227, 220, 0.6);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vss-programme-level {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-muted);
}

.vss-programme-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.vss-programme-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* 4. Admissions Callout Banner (Refined Frosted Surface) */
.vss-admissions-banner {
  background: linear-gradient(135deg, rgba(36, 38, 36, 0.92) 0%, rgba(28, 36, 32, 0.95) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px rgba(36, 38, 36, 0.14);
  border-radius: 24px;
  padding: 56px 44px;
  color: #FFFFFF;
}

@media (max-width: 600px) {
  .vss-admissions-banner {
    padding: 36px 24px;
    border-radius: 18px;
  }
}

.vss-admissions-content {
  max-width: 680px;
}

.vss-admissions-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E8EDE7;
  margin-bottom: 12px;
}

.vss-admissions-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 16px;
  line-height: 1.2;
}

.vss-admissions-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 28px;
}

.vss-btn-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* 5. Gurus & Faculty Section */
.vss-faculty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

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

.vss-faculty-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vss-faculty-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(36, 38, 36, 0.09);
  border-color: rgba(255, 255, 255, 0.90);
}

.vss-faculty-discipline-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.vss-faculty-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin: 0 0 10px;
}

.vss-faculty-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

/* 6. Events / Sabhas Grid */
.vss-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

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

.vss-event-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  border-radius: 20px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vss-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(36, 38, 36, 0.09);
  border-color: rgba(255, 255, 255, 0.90);
}

.vss-event-tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 8px;
}

.vss-event-title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin: 0 0 10px;
  line-height: 1.3;
}

.vss-event-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0 0 16px;
}

.vss-event-venue {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-earth);
  border-top: 1px solid rgba(229, 227, 220, 0.6);
  padding-top: 12px;
}

/* 7. Insights / Articles Grid */
.vss-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

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

.vss-insight-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(36, 38, 36, 0.06);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vss-insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(36, 38, 36, 0.09);
  border-color: rgba(255, 255, 255, 0.90);
}

.vss-insight-img-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #EAE6DE;
}

.vss-insight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.vss-insight-card:hover .vss-insight-img {
  transform: scale(1.03);
}

.vss-insight-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vss-insight-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.vss-insight-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-earth-dark);
  margin: 0 0 10px;
  line-height: 1.3;
}

.vss-insight-title a {
  color: inherit;
  text-decoration: none;
}

.vss-insight-title a:hover {
  color: var(--color-accent);
}

.vss-insight-excerpt {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

.vss-insight-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vss-insight-link:hover {
  text-decoration: underline;
}

/* 8. Gallery Grid */
.vss-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 992px) {
  .vss-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .vss-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.vss-gallery-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #EAE6DE;
  border: 1px solid var(--color-border);
}

.vss-gallery-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.vss-gallery-item:hover .vss-gallery-photo {
  transform: scale(1.04);
}

.vss-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(36, 38, 36, 0.90) 0%, transparent 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
}


/* ==========================================================================
   ST BERNARDS LUXURY EDITORIAL THEME (VSS REFINED EDITION)
   Aesthetic: Warm Ivory, Champagne Brass Gold, Architectural Arches,
   Geometric Diamond Crests, Watermark Typography, Asymmetrical Collage
   ========================================================================== */

:root {
  --st-bg: #FAF8F5;
  --st-surface: #FFFFFF;
  --st-gold: #B89A67;
  --st-gold-dark: #9F8252;
  --st-gold-light: #F6F1E9;
  --st-gold-border: rgba(184, 154, 103, 0.35);
  --st-gold-glow: rgba(184, 154, 103, 0.15);
  --st-dark: #202220;
  --st-muted: #6C706B;
  --st-border: #E8E2D5;
  --st-border-subtle: #F0ECE4;
  --st-serif: var(--font-heading, 'Newsreader', Georgia, 'Times New Roman', serif);
  --st-sans: var(--font-body, 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

body.page-home {
  background-color: var(--st-bg) !important;
  color: var(--st-dark) !important;
  font-family: var(--st-sans);
}

/* Watermark typography behind sections removed for clean, uncluttered visual aesthetic */
.st-watermark,
.st-watermark-center {
  display: none !important;
}

/* St Bernards Buttons */
.st-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--st-gold);
  color: #FFFFFF !important;
  font-family: var(--st-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 34px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, #C5A876 0%, #A88956 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(184, 154, 103, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.st-btn-gold:hover {
  background: linear-gradient(135deg, #A88956 0%, #8E7040 100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 28px rgba(184, 154, 103, 0.45);
  transform: translateY(-2px);
}

.st-btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FFFFFF !important;
  font-family: var(--st-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 34px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.st-btn-outline-white:hover {
  background-color: #FFFFFF;
  color: var(--st-dark) !important;
  border-color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.st-btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(184, 154, 103, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--st-gold) !important;
  font-family: var(--st-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 13px 32px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--st-gold);
  box-shadow: 0 4px 14px rgba(184, 154, 103, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.st-btn-outline-gold:hover {
  background-color: var(--st-gold);
  color: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(184, 154, 103, 0.3);
  transform: translateY(-2px);
}

/* ==========================================================================
   1. HERO BANNER CAROUSEL (BANNER 1 & BANNER 2 EDITORIAL PRESENTATION)
   ========================================================================== */
.st-hero-wrap,
.vss-promo-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: var(--color-main-bg, #F7F6F2);
  display: block;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
}

/* Background Carousel Track (2048x768 Master Canvas, 8:3 Aspect Ratio) */
.st-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 768;
  max-height: 620px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  background-color: var(--color-main-bg, #F7F6F2);
  margin: 0;
  padding: 0;
  border: none;
}

.st-hero-slider.is-dragging {
  cursor: grabbing !important;
}

.st-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity;
  z-index: 1;
  pointer-events: none;
}

.st-hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
}

.st-hero-bg,
.vss-promo-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Restrained Left-to-Right Ambient Scrim for Editorial Typography Contrast */
.vss-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(247, 246, 242, 0.95) 0%,
    rgba(247, 246, 242, 0.84) 32%,
    rgba(247, 246, 242, 0.45) 48%,
    rgba(247, 246, 242, 0) 65%
  );
}

/* Overlay Content Positioning */
.vss-hero-content-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
  padding: 0 clamp(1.5rem, 5.5vw, 5rem);
  max-width: var(--container-wide, 1440px);
  margin: 0 auto;
}

.vss-hero-content {
  position: relative;
  max-width: clamp(340px, 45vw, 560px);
  text-align: left;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Tag / Eyebrow */
.vss-hero-badge {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent, #526B5B);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(0.4rem, 0.8vw, 0.7rem);
}

.vss-hero-badge::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background-color: var(--color-accent, #526B5B);
  border-radius: 1px;
}

/* Prominent Heading */
.vss-hero-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 3.1vw, 2.75rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--color-charcoal, #242624);
  margin: 0 0 clamp(0.5rem, 1vw, 0.85rem);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Short Description */
.vss-hero-description {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.12vw, 1.05rem);
  line-height: 1.56;
  color: #4A4D49;
  margin: 0 0 clamp(0.95rem, 1.8vw, 1.55rem);
  max-width: 44ch;
}

/* CTA Wrapper & Button */
.vss-hero-cta-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vss-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-accent, #526B5B);
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  font-weight: 600;
  padding: clamp(0.55rem, 0.9vw, 0.72rem) clamp(1.2rem, 1.5vw, 1.6rem);
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(82, 107, 91, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}

.vss-hero-btn:hover {
  background-color: var(--color-accent-hover, #415548);
  box-shadow: 0 6px 16px rgba(82, 107, 91, 0.3);
  transform: translateY(-2px);
}

.vss-hero-btn:focus-visible {
  outline: 2px solid var(--color-accent, #526B5B);
  outline-offset: 3px;
}

.vss-hero-btn .vss-btn-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.vss-hero-btn:hover .vss-btn-arrow {
  transform: translateX(3px);
}

/* Minimal Carousel Pagination Dots Overlay (Bottom-Center Inside Banner) */
.vss-hero-dots-wrap {
  position: absolute;
  bottom: clamp(14px, 2.2vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  padding: 5px 12px;
  background: rgba(247, 246, 242, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(36, 38, 36, 0.12);
  pointer-events: auto;
}

.vss-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(82, 107, 91, 0.38);
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  box-sizing: border-box;
}

.vss-hero-dot:hover {
  background-color: rgba(82, 107, 91, 0.85);
  transform: scale(1.15);
}

.vss-hero-dot.active {
  background-color: var(--color-accent, #526B5B);
  opacity: 1;
  width: 20px;
  border-radius: 4px;
}

.vss-hero-dot:focus-visible {
  outline: 2px solid var(--color-accent, #526B5B);
  outline-offset: 2px;
}

/* Tablet Refinements */
@media (max-width: 991px) {
  .st-hero-slider {
    aspect-ratio: auto;
    min-height: 380px;
  }
  .st-hero-bg,
  .vss-promo-banner {
    object-position: 75% center;
  }
  .vss-hero-scrim {
    background: linear-gradient(
      90deg,
      rgba(247, 246, 242, 0.96) 0%,
      rgba(247, 246, 242, 0.88) 40%,
      rgba(247, 246, 242, 0.45) 60%,
      transparent 78%
    );
  }
  .vss-hero-content {
    max-width: clamp(320px, 56vw, 460px);
  }
}

/* Mobile Refinements */
@media (max-width: 640px) {
  .st-hero-slider {
    aspect-ratio: auto;
    min-height: 520px;
  }
  .st-hero-bg,
  .vss-promo-banner {
    object-position: 80% 30%;
  }
  .vss-hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(247, 246, 242, 0.95) 0%,
      rgba(247, 246, 242, 0.90) 56%,
      rgba(247, 246, 242, 0.45) 82%,
      rgba(247, 246, 242, 0.2) 100%
    );
  }
  .vss-hero-content-wrap {
    align-items: flex-start;
    padding: 1.5rem 1.25rem 4rem;
  }
  .vss-hero-content {
    max-width: 100%;
  }
  .vss-hero-heading {
    font-size: 1.5rem;
    line-height: 1.22;
    margin-bottom: 0.5rem;
  }
  .vss-hero-description {
    font-size: 0.88rem;
    line-height: 1.48;
    margin-bottom: 1rem;
  }
  .vss-hero-dots-wrap {
    bottom: 14px;
    padding: 4px 10px;
  }
}

/* Hindi Mode Typography Specifics */
html[lang="hi"] .vss-hero-heading {
  font-family: var(--font-heading);
  line-height: 1.32;
  letter-spacing: normal;
}

html[lang="hi"] .vss-hero-description {
  font-family: var(--font-body);
  line-height: 1.68;
  letter-spacing: normal;
}

html[lang="hi"] .vss-hero-badge {
  font-family: var(--font-body);
  letter-spacing: 0.03em;
}

html[lang="hi"] .vss-hero-btn {
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  .st-hero-slide {
    transition: none !important;
  }
  .vss-hero-btn {
    transition: none !important;
    transform: none !important;
  }
}

/* 2. ABOUT US SECTION (With Ambient Glow & Watermark) */
.st-about-section {
  position: relative;
  padding: 110px 0 80px;
  background-color: var(--st-bg);
  overflow: hidden;
}

.st-about-section::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 154, 103, 0.16) 0%, rgba(82, 107, 91, 0.08) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.st-about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .st-about-container {
    padding: 0 16px;
  }
}

.st-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 992px) {
  .st-about-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

.st-eyebrow {
  display: block;
  font-family: var(--st-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-gold);
  margin-bottom: 14px;
}

.st-section-title {
  font-family: var(--st-serif);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 500;
  line-height: 1.18;
  color: var(--st-dark);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}

.st-lead-paragraph {
  font-family: var(--st-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--st-dark);
  margin-bottom: 18px;
  font-weight: 500;
}

.st-body-paragraph {
  font-family: var(--st-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--st-muted);
  margin-bottom: 32px;
}

/* ==========================================================================
   2. INSTITUTIONAL ABOUT SECTION (Clean Editorial Two-Column Standard)
   ========================================================================== */
.vss-about-inst-section {
  position: relative;
  padding: 96px 0 92px;
  scroll-margin-top: 90px;
  background-color: var(--color-main-bg, #F7F6F2);
  background:
    radial-gradient(ellipse 65% 55% at 88% 28%, rgba(232, 237, 231, 0.70) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 82%, rgba(229, 227, 220, 0.45) 0%, transparent 60%),
    var(--color-main-bg, #F7F6F2);
  overflow: hidden;
}

.vss-about-inst-grid {
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  gap: 56px;
  align-items: center;
}

.vss-about-inst-content {
  position: relative;
  z-index: 2;
}

.vss-about-inst-eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent, #526B5B);
  margin-bottom: 14px;
}

.vss-about-inst-heading {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.22;
  color: var(--color-earth-dark, #242624);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}

.vss-about-inst-desc {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 15.5px;
  line-height: 1.75;
  color: #555A54;
  margin: 0 0 32px;
  max-width: 620px;
}

.vss-about-highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
  margin-bottom: 34px;
}

.vss-about-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.vss-highlight-icon-wrap {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background-color: var(--color-accent-subtle, #E8EDE7);
  color: var(--color-accent, #526B5B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(82, 107, 91, 0.18);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.vss-about-highlight-item:hover .vss-highlight-icon-wrap {
  background-color: var(--color-accent, #526B5B);
  color: #FFFFFF;
  border-color: var(--color-accent, #526B5B);
}

.vss-highlight-body {
  flex: 1;
  min-width: 0;
}

.vss-highlight-title {
  font-family: var(--font-heading, 'Newsreader', Georgia, serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-earth-dark, #242624);
  margin: 0 0 4px;
}

.vss-highlight-text {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted, #747873);
  margin: 0;
}

.vss-about-cta-wrap {
  margin-top: 6px;
}

.vss-about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent, #526B5B);
  background-color: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--color-accent, #526B5B);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vss-about-cta-btn .vss-cta-arrow {
  transition: transform 0.25s ease;
}

.vss-about-cta-btn:hover {
  background-color: var(--color-accent, #526B5B);
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(82, 107, 91, 0.22);
  transform: translateY(-2px);
}

.vss-about-cta-btn:hover .vss-cta-arrow {
  transform: translateX(3px);
}

.vss-about-inst-media {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.vss-about-img-frame {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-color: #EAE6DE;
  border: 1px solid var(--color-border, #E5E3DC);
  box-shadow: 0 16px 38px -10px rgba(36, 38, 36, 0.09);
  line-height: 0;
}

.vss-about-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vss-about-img-frame:hover .vss-about-img {
  transform: scale(1.025);
}

@media (max-width: 992px) {
  .vss-about-inst-section {
    padding: 72px 0 68px;
  }
  .vss-about-inst-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .vss-about-inst-media {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .vss-about-inst-section {
    padding: 56px 0 52px;
  }
  .vss-about-inst-grid {
    gap: 36px;
  }
  .vss-about-highlights-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 28px;
  }
  .vss-about-inst-desc {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
  }
}


/* 4. DISCIPLINES / SERVICES (Modern Round Corner Cards with Blur Glass Effect) */
.st-disciplines-section {
  position: relative;
  padding: 90px 0 110px;
  background-color: var(--st-bg);
  overflow: hidden;
}

.st-disciplines-section::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 154, 103, 0.14) 0%, rgba(232, 237, 231, 0.5) 50%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
}

.st-center-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}

.st-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
  .st-cards-row {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Classical Arts & Heritage Disciplines — Premium Modern Card Carousel (Institutional)
   ========================================================================== */
.st-disciplines-header-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  position: relative;
  z-index: 2;
}

.st-disciplines-header {
  text-align: left;
  margin: 0;
  max-width: 760px;
}

.st-disciplines-nav-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.st-disciplines-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 103, 0.35);
  color: #242624;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 14px rgba(36, 38, 36, 0.05);
  padding: 0;
}

.st-disciplines-nav-btn:hover {
  background: #526B5B;
  color: #FFFFFF;
  border-color: #526B5B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(82, 107, 91, 0.25);
}

.st-disciplines-nav-btn:focus-visible {
  outline: 2px solid #526B5B;
  outline-offset: 3px;
}

.st-disciplines-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.st-disciplines-swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  padding: 12px 6px 20px;
  box-sizing: border-box;
}

.st-disciplines-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

.st-discipline-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0;
}

.st-discipline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 103, 0.24);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(36, 38, 36, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
  user-select: none;
  cursor: grab;
}

.st-disciplines-swiper:active .st-discipline-card {
  cursor: grabbing;
}

.st-discipline-card:hover {
  transform: translateY(-8px);
  border-color: rgba(184, 154, 103, 0.55);
  box-shadow: 0 20px 42px -10px rgba(36, 38, 36, 0.12), 0 4px 12px rgba(184, 154, 103, 0.12);
}

.st-discipline-card:focus-visible {
  outline: 2px solid #526B5B;
  outline-offset: 4px;
  transform: translateY(-4px);
  border-color: rgba(82, 107, 91, 0.6);
}

.st-discipline-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #F5F3ED;
  flex-shrink: 0;
}

.st-discipline-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 60%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
  z-index: 1;
}

.st-discipline-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--st-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #242624;
  border: 1px solid rgba(184, 154, 103, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.st-discipline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-discipline-card:hover .st-discipline-img {
  transform: scale(1.055);
}

.st-discipline-body {
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
  background: #FFFFFF;
  box-sizing: border-box;
}

.st-discipline-title {
  font-family: var(--st-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--st-dark, #1F221F);
  margin: 0 0 10px;
  line-height: 1.34;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.st-discipline-card:hover .st-discipline-title {
  color: #526B5B;
}

.st-discipline-text {
  font-family: var(--st-sans);
  font-size: 14.5px;
  line-height: 1.64;
  color: var(--st-muted, #5E635D);
  margin: 0 0 20px;
  flex-grow: 1;
}

.st-discipline-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 154, 103, 0.16);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.st-discipline-link {
  font-family: var(--st-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: #526B5B;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.st-discipline-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

.st-discipline-card:hover .st-discipline-link {
  color: #B89A67;
}

.st-discipline-card:hover .st-discipline-arrow {
  transform: translateX(6px);
  stroke: #B89A67;
}

/* Minimalist Museum-Grade Carousel Pagination */
.st-disciplines-pagination {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin-top: 28px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.st-disciplines-pagination .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #747873 !important;
  opacity: 0.35 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  margin: 0 !important;
}

.st-disciplines-pagination .swiper-pagination-bullet-active {
  width: 28px !important;
  background: #526B5B !important; /* Heritage green */
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(82, 107, 91, 0.3);
}

.st-disciplines-pagination .swiper-pagination-bullet:hover {
  opacity: 0.75 !important;
}

.st-disciplines-cta-wrap {
  margin-top: 36px;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .st-disciplines-header-wrap {
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
  }
  .st-disciplines-header {
    text-align: center;
  }
  .st-disciplines-nav-btns {
    margin-top: 16px;
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .st-discipline-body {
    padding: 20px 18px 20px;
  }
  .st-discipline-title {
    font-size: 18.5px;
  }
  .st-discipline-text {
    font-size: 13.5px;
    margin-bottom: 16px;
  }
  .st-discipline-badge {
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-discipline-card,
  .st-discipline-img,
  .st-discipline-arrow,
  .st-disciplines-nav-btn,
  .st-disciplines-pagination .swiper-pagination-bullet {
    transition: none !important;
  }
}

/* ==========================================================================
   Alternating Heritage Musical Background — Ivory Heritage Sitar and Tabla Banner
   Verified Local Asset: Photos/Ivory Heritage Sitar and Tabla Banner.png (2048 x 768 px)
   ========================================================================== */
.st-bg-sitar-tabla,
.st-bg-musical-airy,
.st-foundations-section.st-bg-sitar-tabla,
.st-foundations-section.st-bg-musical-airy,
.st-disciplines-section.st-bg-sitar-tabla,
.st-gallery-section.st-bg-sitar-tabla,
.st-testimonials-section.st-bg-sitar-tabla,
.st-srikhol-intro-section.st-bg-sitar-tabla {
  position: relative;
  background-color: #FAF8F5;
  background-image: 
    linear-gradient(180deg, rgba(250, 248, 245, 0.88) 0%, rgba(250, 248, 245, 0.78) 50%, rgba(250, 248, 245, 0.88) 100%),
    url('/Photos/Ivory%20Heritage%20Sitar%20and%20Tabla%20Banner.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 1024px) {
  .st-bg-sitar-tabla,
  .st-bg-musical-airy,
  .st-foundations-section.st-bg-sitar-tabla,
  .st-foundations-section.st-bg-musical-airy,
  .st-disciplines-section.st-bg-sitar-tabla,
  .st-gallery-section.st-bg-sitar-tabla,
  .st-testimonials-section.st-bg-sitar-tabla,
  .st-srikhol-intro-section.st-bg-sitar-tabla {
    background-position: 70% top;
  }
}

@media (max-width: 640px) {
  .st-bg-sitar-tabla,
  .st-bg-musical-airy,
  .st-foundations-section.st-bg-sitar-tabla,
  .st-foundations-section.st-bg-musical-airy,
  .st-disciplines-section.st-bg-sitar-tabla,
  .st-gallery-section.st-bg-sitar-tabla,
  .st-testimonials-section.st-bg-sitar-tabla,
  .st-srikhol-intro-section.st-bg-sitar-tabla {
    background-image: 
      linear-gradient(180deg, rgba(250, 248, 245, 0.93) 0%, rgba(250, 248, 245, 0.86) 50%, rgba(250, 248, 245, 0.93) 100%),
      url('/Photos/Ivory%20Heritage%20Sitar%20and%20Tabla%20Banner.png');
    background-position: 85% top;
  }
}

/* ==========================================================================
   Alternating Heritage Decorative Vintage White Design Background
   Verified Local Asset: Photos/decorative-vintage-white-design-background.png (2000 x 1333 px)
   Rendered at 40% visual opacity via ::before pseudo-element layer.
   ========================================================================== */
.st-bg-vintage-white,
.st-foundations-section.st-bg-vintage-white,
.st-disciplines-section.st-bg-vintage-white,
.st-gallery-section.st-bg-vintage-white,
.st-testimonials-section.st-bg-vintage-white,
.st-srikhol-intro-section.st-bg-vintage-white {
  position: relative;
  background-color: #FAF8F5;
  background-image: none;
  overflow: hidden;
}

.st-bg-vintage-white::before,
.st-foundations-section.st-bg-vintage-white::before,
.st-disciplines-section.st-bg-vintage-white::before,
.st-gallery-section.st-bg-vintage-white::before,
.st-testimonials-section.st-bg-vintage-white::before,
.st-srikhol-intro-section.st-bg-vintage-white::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/Photos/decorative-vintage-white-design-background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.st-bg-vintage-white > *,
.st-foundations-section.st-bg-vintage-white > *,
.st-disciplines-section.st-bg-vintage-white > *,
.st-gallery-section.st-bg-vintage-white > *,
.st-testimonials-section.st-bg-vintage-white > *,
.st-srikhol-intro-section.st-bg-vintage-white > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .st-bg-vintage-white::before,
  .st-foundations-section.st-bg-vintage-white::before,
  .st-disciplines-section.st-bg-vintage-white::before,
  .st-gallery-section.st-bg-vintage-white::before,
  .st-testimonials-section.st-bg-vintage-white::before,
  .st-srikhol-intro-section.st-bg-vintage-white::before {
    background-position: center center;
    background-size: cover;
  }
}

@media (max-width: 640px) {
  .st-bg-vintage-white::before,
  .st-foundations-section.st-bg-vintage-white::before,
  .st-disciplines-section.st-bg-vintage-white::before,
  .st-gallery-section.st-bg-vintage-white::before,
  .st-testimonials-section.st-bg-vintage-white::before,
  .st-srikhol-intro-section.st-bg-vintage-white::before {
    background-position: center top;
    background-size: cover;
  }
}


/* Sri Khol Initiative Feature Presentation */
.st-srikhol-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
  .st-srikhol-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.st-srikhol-feature-card {
  background: #FFFFFF;
  border: 1px solid rgba(82, 107, 91, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(36, 38, 36, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-srikhol-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(36, 38, 36, 0.10);
}

.st-srikhol-feature-media {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #EAE5DB;
}

.st-srikhol-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-srikhol-feature-card:hover .st-srikhol-feature-img {
  transform: scale(1.04);
}

.st-srikhol-media-badge {
  position: absolute;
  bottom: 14px;
  left: 16px;
  background: rgba(22, 25, 23, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FAF8F5;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.st-srikhol-card-content {
  padding: 24px 28px 28px;
  text-align: left;
}

.st-srikhol-card-title {
  font-family: var(--st-heading-font, 'Newsreader', serif);
  font-size: 20px;
  color: #526B5B;
  font-weight: 600;
  margin-bottom: 4px;
}

.st-srikhol-card-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #747873;
  margin-bottom: 18px;
  font-weight: 700;
}

.st-srikhol-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 1px solid rgba(82, 107, 91, 0.16);
  padding-top: 18px;
}

.st-srikhol-pillar {
  font-size: 12.5px;
  color: #5C4A3A;
  line-height: 1.5;
}

.st-srikhol-pillar-label {
  color: #526B5B;
  font-weight: 700;
}

/* ==========================================================================
   2b. Four Foundations Section — Modern Airy Editorial Presentation
   ========================================================================== */
.st-foundations-section {
  position: relative;
  padding: 88px 0 96px;
  background-color: var(--color-surface, #F7F6F2);
  border-top: 1px solid rgba(36, 38, 36, 0.07);
  border-bottom: 1px solid rgba(36, 38, 36, 0.07);
  overflow: hidden;
}

.st-foundations-section.st-bg-sitar-tabla,
.st-foundations-section.st-bg-musical-airy {
  background-image: none !important;
  background-color: var(--color-surface, #F7F6F2) !important;
}

.st-foundations-section .st-center-header {
  margin-bottom: 54px;
  text-align: center;
}

.st-foundations-section .st-eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #526B5B);
  margin-bottom: 12px;
}

.st-foundations-section .st-section-title {
  font-family: var(--st-serif, "Newsreader", Georgia, serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--color-earth-dark, #242624);
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}

.st-foundations-section .st-lead-paragraph {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 15px;
  line-height: 1.68;
  color: #5A5D5A;
  max-width: 660px;
  margin: 0 auto;
}

.st-foundations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.st-foundation-card,
.st-foundation-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: transform 220ms ease;
}

.st-foundation-img-wrap,
.st-foundation-visual {
  width: 100%;
  height: 175px;
  max-height: 175px;
  margin: 0 auto 22px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  position: relative;
}

.st-foundation-img {
  max-width: 100%;
  max-height: 165px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(36, 38, 36, 0.05));
  transition: transform 220ms ease, filter 220ms ease;
}

.st-foundation-card:hover .st-foundation-img,
.st-foundation-item:hover .st-foundation-img {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 20px rgba(36, 38, 36, 0.08));
}

.st-foundation-title {
  font-family: var(--st-serif, "Newsreader", Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-earth-dark, #242624);
  margin: 0 0 12px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.st-foundation-card:hover .st-foundation-title,
.st-foundation-item:hover .st-foundation-title {
  color: var(--color-accent, #526B5B);
}

.st-foundation-text {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 13.5px;
  line-height: 1.65;
  color: #5A5D5A;
  margin: 0;
  max-width: 270px;
}

/* Tablet (max-width: 1080px): Balanced 2 × 2 editorial layout */
@media (max-width: 1080px) {
  .st-foundations-section {
    padding: 76px 0 84px;
  }
  .st-foundations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 36px;
    max-width: 680px;
  }
  .st-foundation-img-wrap,
  .st-foundation-visual {
    height: 160px;
    max-height: 160px;
    margin-bottom: 18px;
  }
  .st-foundation-img {
    max-height: 150px;
  }
  .st-foundation-text {
    max-width: 300px;
  }
}

/* Mobile (max-width: 640px): Clean single-column layout */
@media (max-width: 640px) {
  .st-foundations-section {
    padding: 60px 0 68px;
  }
  .st-foundations-section .st-center-header {
    margin-bottom: 40px;
  }
  .st-foundations-section .st-section-title {
    font-size: 28px;
  }
  .st-foundations-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    max-width: 340px;
  }
  .st-foundation-img-wrap,
  .st-foundation-visual {
    height: 150px;
    max-height: 150px;
    margin-bottom: 16px;
  }
  .st-foundation-img {
    max-height: 140px;
  }
  .st-foundation-title {
    font-size: 19px;
  }
  .st-foundation-text {
    font-size: 13.5px;
    max-width: 100%;
  }
}

/* Hindi Typography Enhancements */
html[lang="hi"] .st-foundation-title {
  font-size: 21px;
  line-height: 1.4;
}
html[lang="hi"] .st-foundation-text {
  font-size: 14px;
  line-height: 1.7;
}

.st-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(184, 154, 103, 0.22);
  border-radius: 18px;
  padding: 34px 20px 28px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 6px 20px rgba(36, 38, 36, 0.05);
  overflow: hidden;
}

@media (max-width: 1180px) {
  .st-service-card {
    padding: 28px 16px 24px;
  }
}

@media (max-width: 600px) {
  .st-service-card {
    padding: 28px 18px 24px;
  }
}

.st-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 154, 103, 0.45);
  box-shadow: 0 10px 28px rgba(36, 38, 36, 0.08);
}

.st-service-card::before,
.st-service-card::after {
  display: none;
}

.st-service-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 16px;
  border: 1px solid rgba(184, 154, 103, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-gold);
  background: rgba(184, 154, 103, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(184, 154, 103, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.st-service-card:hover .st-service-icon-wrap {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--st-gold);
  background: rgba(184, 154, 103, 0.14);
  box-shadow: 0 6px 16px rgba(184, 154, 103, 0.16);
}

.st-service-title {
  font-family: var(--st-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--st-dark);
  margin-bottom: 12px;
  line-height: 1.35;
}

.st-service-text {
  font-family: var(--st-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--st-muted);
  margin: 0;
  flex-grow: 1;
}

/* 5. DISCOVER OUR BEAUTIFUL SPACES (Modern Rounded Photo Mosaic with Floating Glass Badges) */
.st-gallery-section {
  position: relative;
  padding: 90px 0 110px;
  background-color: var(--st-surface);
  border-top: 1px solid var(--st-border-subtle);
  border-bottom: 1px solid var(--st-border-subtle);
}

.st-mosaic-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto 48px;
}

.st-mosaic-row-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.st-mosaic-row-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

@media (max-width: 768px) {
  .st-mosaic-row-top,
  .st-mosaic-row-bottom {
    grid-template-columns: 1fr;
  }
}

.st-mosaic-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #EAE6DE;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(32, 34, 32, 0.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-mosaic-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(32, 34, 32, 0.1);
}

.st-mosaic-item-top {
  aspect-ratio: 4/3;
}

.st-mosaic-item-bottom {
  aspect-ratio: 16/9;
}

.st-mosaic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-mosaic-item:hover .st-mosaic-img {
  transform: scale(1.025);
}

.st-mosaic-caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  padding: 10px 18px;
  background: rgba(22, 25, 23, 0.74);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #FFFFFF;
  font-family: var(--st-serif);
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 6. OVERLAPPING EDITORIAL FEATURE BLOCKS (Modern Rounded Glass Surfaces) */
.st-overlap-section {
  position: relative;
  padding: 100px 0;
  background-color: var(--st-bg);
  overflow: hidden;
}

.st-overlap-section::after {
  content: "";
  position: absolute;
  top: 25%;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 154, 103, 0.12) 0%, rgba(82, 107, 91, 0.06) 50%, transparent 70%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 1;
}

.st-overlap-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.st-overlap-block {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  margin-bottom: 90px;
}

@media (max-width: 992px) {
  .st-overlap-block {
    grid-template-columns: 1fr;
    margin-bottom: 60px;
  }
}

.st-overlap-photo-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(32, 34, 32, 0.1);
  aspect-ratio: 4/3;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.st-overlap-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-overlap-card {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 48px 42px;
  margin-left: -60px;
  z-index: 2;
  box-shadow: 0 24px 60px rgba(32, 34, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 0.3s ease;
}

.st-overlap-card:hover {
  transform: translateY(-3px);
}

@media (max-width: 992px) {
  .st-overlap-card {
    margin-left: 0;
    margin-top: -30px;
    padding: 34px 26px;
  }
}

.st-overlap-card-title {
  font-family: var(--st-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--st-dark);
  margin-bottom: 16px;
  line-height: 1.22;
}

.st-overlap-card-text {
  font-family: var(--st-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--st-muted);
  margin-bottom: 26px;
}

/* Secondary Feature: Wide Photo with Overlapping Modern Frosted Glass Card */
.st-wide-feature-wrap {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(32, 34, 32, 0.1);
  height: 480px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.st-wide-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-wide-feature-card {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  max-width: 680px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  padding: 30px 40px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.3s ease;
}

.st-wide-feature-card:hover {
  transform: translateX(-50%) translateY(-3px);
}

.st-wide-feature-title {
  font-family: var(--st-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--st-dark);
  margin-bottom: 8px;
}

.st-wide-feature-text {
  font-family: var(--st-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--st-muted);
  margin: 0 0 16px;
}

/* 7. TESTIMONIALS SECTION (Modern Rounded Glass Capsules) */
.st-testimonials-section {
  position: relative;
  padding: 90px 0 110px;
  background-color: var(--st-bg);
  overflow: hidden;
}

.st-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto 36px;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .st-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .st-testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

.st-testimonial-card {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  padding: 32px 22px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 28px rgba(32, 34, 32, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-testimonial-card:hover {
  transform: translateY(-7px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 44px rgba(184, 154, 103, 0.14), 0 4px 14px rgba(32, 34, 32, 0.04);
  border-color: rgba(184, 154, 103, 0.35);
}

.st-testimonial-node {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--st-gold);
  background: var(--st-surface);
  margin: 0 auto 12px;
  position: relative;
}

.st-testimonial-node::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--st-gold-border);
  transform: translateX(-50%);
}

.st-testimonial-stars {
  color: var(--st-gold);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.st-testimonial-quote {
  font-family: var(--st-sans);
  font-size: 13px;
  line-height: 1.65;
  color: var(--st-muted);
  font-style: italic;
  margin-bottom: 18px;
  flex-grow: 1;
}

.st-testimonial-author {
  font-family: var(--st-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--st-dark);
  margin-bottom: 2px;
}

.st-testimonial-role {
  font-family: var(--st-sans);
  font-size: 11px;
  color: var(--st-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.st-testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.st-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-gold-border);
  transition: background 0.3s ease;
}

.st-dot.active {
  background: var(--st-gold);
  width: 18px;
  border-radius: 999px;
}

/* 8. PRE-FOOTER BANNER (Modern Rounded Container & Floating Glass Capsule) */
.st-prefooter-banner {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #1A1D1B;
  border-radius: 32px;
  max-width: 1240px;
  margin: 40px auto 80px;
  padding: 40px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
}

.st-prefooter-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
}

.st-prefooter-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(20, 24, 21, 0.35) 0%, rgba(18, 21, 19, 0.85) 100%);
}

.st-prefooter-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  padding: 56px 40px;
  background: rgba(22, 25, 23, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 640px) {
  .st-prefooter-content {
    padding: 36px 20px;
    border-radius: 20px;
  }
}

.st-prefooter-title {
  font-family: var(--st-serif);
  font-size: clamp(30px, 4.5vw, 50px);
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 14px;
  line-height: 1.15;
}

.st-prefooter-desc {
  font-family: var(--st-sans);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 580px;
}

/* Bottom Arch for Pre-Footer */
.st-prefooter-arch-top {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 4;
}

/* Footer Geometric Crest */
.st-footer-crest {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}


/* ==========================================================================
   ST BERNARDS EDITORIAL LUXURY FOOTER
   ========================================================================== */
.st-footer {
  position: relative !important;
  background-color: #1A1D1B !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(184, 154, 103, 0.08) 0%, transparent 60%) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 80px 0 36px !important;
  width: 100% !important;
  border-top: 1px solid rgba(184, 154, 103, 0.25) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--st-sans);
}

.st-footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

/* 3-Column Balanced Editorial Grid */
.st-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.05fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}

@media (max-width: 960px) {
  .st-footer-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
}

.st-footer-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 960px) {
  .st-footer-col {
    align-items: center;
  }
}

.st-footer-col-title {
  font-family: var(--st-serif);
  font-size: 22px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 20px;
  letter-spacing: 0.02em;
}

/* Column 1: Quick Links */
.st-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st-footer-link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.25s ease;
  display: inline-block;
}

.st-footer-link:hover {
  color: var(--st-gold);
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .st-footer-link:hover {
    transform: none;
  }
}

/* Column 2: Center Brand Emblem */
.st-footer-col-center {
  align-items: center;
  text-align: center;
}

.st-footer-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--st-gold);
}

.st-footer-brand-title {
  font-family: var(--st-serif);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.st-footer-brand-tagline {
  font-family: var(--st-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-gold);
  margin-bottom: 16px;
}

.st-footer-brand-desc {
  font-family: var(--st-sans);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
  max-width: 440px;
  margin: 0 auto 28px;
}

.st-footer-cta-wrap {
  display: flex;
  justify-content: center;
}

/* Column 3: Contact Info */
.st-footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.st-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 960px) {
  .st-footer-contact-item {
    justify-content: center;
    max-width: 380px;
    margin: 0 auto;
  }
}

.st-footer-contact-icon {
  color: var(--st-gold);
  flex-shrink: 0;
  margin-top: 3px;
}

.st-footer-contact-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.st-footer-contact-item a:hover {
  color: var(--st-gold);
}

/* Socials Row */
.st-footer-socials {
  display: flex;
  gap: 12px;
}

@media (max-width: 960px) {
  .st-footer-socials {
    justify-content: center;
  }
}

.st-social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  text-decoration: none;
}

.st-social-link:hover {
  color: #FFFFFF;
  border-color: var(--st-gold);
  background-color: rgba(184, 154, 103, 0.15);
  transform: translateY(-2px);
}

/* Bottom Sub-Footer Bar */
.st-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .st-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.st-footer-copy {
  margin: 0;
}

.st-footer-credit a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.st-footer-credit a:hover {
  color: var(--st-gold);
}

.st-footer-policies {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-footer-policy-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.st-footer-policy-link:hover {
  color: var(--st-gold);
}

/* ==========================================================================
   VRINDAVAN SANGEET SAMITI: NATIONAL EXAMINATION BOARD UI SUITE
   ========================================================================== */

/* 1. Dynamic Circulars & Notice Board Ticker */
.vss-notice-bar {
  background: #112217;
  border-top: 1px solid rgba(184, 154, 103, 0.25);
  border-bottom: 1px solid rgba(184, 154, 103, 0.25);
  padding: 10px 0;
  position: relative;
  z-index: 20;
}
.vss-notice-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.vss-notice-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(184, 154, 103, 0.2);
  border: 1px solid rgba(184, 154, 103, 0.4);
  color: #D4AF37;
  font-family: var(--st-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vss-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #E25822;
  box-shadow: 0 0 8px #E25822;
  display: inline-block;
  animation: vssPulse 1.8s infinite;
}
@keyframes vssPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.vss-notice-marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.vss-notice-text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--st-sans);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
.vss-notice-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 36px;
}
.vss-notice-item a {
  color: #F7E7CE;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.vss-notice-item a:hover {
  color: #FFFFFF;
}
.vss-notice-link-all {
  color: var(--st-gold);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vss-notice-link-all:hover {
  text-decoration: underline;
}

/* 2. Institutional Stat Counter Cards */
.vss-stats-section {
  background: var(--st-surface);
  border-bottom: 1px solid var(--st-border-subtle);
  padding: 56px 0;
  position: relative;
}
.vss-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.vss-stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 103, 0.22);
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.025);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vss-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(45, 25, 15, 0.08);
  border-color: rgba(184, 154, 103, 0.45);
}
.vss-stat-num {
  font-family: var(--st-serif);
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 600;
  color: #1A3323;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.vss-stat-title {
  font-family: var(--st-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C6D3B;
  margin-bottom: 8px;
}
.vss-stat-desc {
  font-family: var(--st-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: #6B5546;
  margin: 0;
}

/* 3. Master Certification Ladder & Equivalency Table */
.vss-ladder-section {
  padding: 90px 0;
  background: #FFFFFF;
  position: relative;
}
.vss-ladder-table-wrap {
  overflow-x: auto;
  margin-top: 40px;
  background: #FAF8F5;
  border: 1px solid rgba(184, 154, 103, 0.25);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03);
}
.vss-ladder-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--st-sans);
  min-width: 820px;
}
.vss-ladder-table th {
  background: #112217;
  color: #FAF8F5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 20px;
  border-bottom: 2px solid var(--st-gold);
}
.vss-ladder-table td {
  padding: 20px;
  border-bottom: 1px solid rgba(184, 154, 103, 0.15);
  font-size: 14px;
  color: #2C1810;
  vertical-align: middle;
}
.vss-ladder-table tr:last-child td {
  border-bottom: none;
}
.vss-ladder-table tr:hover td {
  background: rgba(184, 154, 103, 0.06);
}
.vss-stage-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vss-stage-badge.foundation { background: #E8F0EA; color: #1E4620; }
.vss-stage-badge.intermediate { background: #FEF3D6; color: #8C6D3B; }
.vss-stage-badge.graduate { background: #FDE8E4; color: #9C2A1E; }
.vss-stage-badge.postgraduate { background: #EDE4F4; color: #5B2C82; }
.vss-stage-badge.doctorate { background: #FFF3CD; color: #73510D; border: 1px solid #D4AF37; }

.vss-equiv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(82, 107, 91, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1A3323;
}

/* 4. Disciplines Grid */
.vss-depts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 45px;
}
.vss-dept-card {
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 103, 0.22);
  border-radius: 12px;
  padding: 32px 28px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.vss-dept-card:hover {
  transform: translateY(-5px);
  border-color: var(--st-gold);
  box-shadow: 0 14px 32px rgba(45, 25, 15, 0.08);
}
.vss-dept-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: rgba(184, 154, 103, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #1A3323;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vss-dept-card:hover .vss-dept-icon-wrap {
  background: #1A3323;
  color: var(--st-gold);
}
.vss-dept-title {
  font-family: var(--st-serif);
  font-size: 24px;
  font-weight: 600;
  color: #1A3323;
  margin: 0 0 10px;
}
.vss-dept-desc {
  font-family: var(--st-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: #6B5546;
  margin-bottom: 18px;
  flex-grow: 1;
}
.vss-dept-sublist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-family: var(--st-sans);
  font-size: 12.5px;
  color: #5C4A3A;
  border-top: 1px solid rgba(184, 154, 103, 0.16);
  padding-top: 14px;
}
.vss-dept-sublist li {
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vss-dept-sublist li::before {
  content: "•";
  color: var(--st-gold);
  font-size: 14px;
}

/* 5. Institutional Credibility / 4 Pillars */
.vss-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.vss-pillar-card {
  background: #FAF8F5;
  border: 1px solid rgba(184, 154, 103, 0.2);
  border-radius: 12px;
  padding: 28px 22px;
  text-align: left;
}
.vss-pillar-num {
  font-family: var(--st-serif);
  font-size: 28px;
  font-weight: 700;
  color: #B89A67;
  margin-bottom: 8px;
}
.vss-pillar-title {
  font-family: var(--st-sans);
  font-size: 16px;
  font-weight: 700;
  color: #1A3323;
  margin-bottom: 10px;
}
.vss-pillar-desc {
  font-family: var(--st-sans);
  font-size: 13px;
  line-height: 1.6;
  color: #6B5546;
  margin: 0;
}

/* 6. B2B Center Affiliation Banner */
.vss-b2b-banner {
  background: linear-gradient(135deg, #0E1D13 0%, #162E1F 55%, #1F3E2B 100%);
  border-radius: 16px;
  padding: 60px 48px;
  color: #FFFFFF;
  margin: 80px 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 154, 103, 0.35);
  box-shadow: 0 16px 40px rgba(10, 20, 14, 0.2);
}
.vss-b2b-banner::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 154, 103, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.vss-b2b-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.vss-b2b-title {
  font-family: var(--st-serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 16px;
  line-height: 1.25;
}
.vss-b2b-text {
  font-family: var(--st-sans);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}
.vss-b2b-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  font-family: var(--st-sans);
  font-size: 13.5px;
  color: #FAF8F5;
}
.vss-b2b-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vss-check-gold {
  color: var(--st-gold);
  flex-shrink: 0;
}
.vss-b2b-action-box {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
}
.vss-b2b-action-box h4 {
  font-family: var(--st-serif);
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 0 8px;
}
.vss-b2b-action-box p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 22px;
}

/* 7. Verification Portal Form & Result Output */
.vss-verify-engine-card {
  background: #FFFFFF;
  border: 1px solid rgba(184, 154, 103, 0.3);
  border-radius: 16px;
  box-shadow: 0 16px 45px rgba(45, 25, 15, 0.07);
  padding: 40px 36px;
  max-width: 680px;
  margin: 0 auto;
}
.vss-input-group {
  margin-bottom: 20px;
  text-align: left;
}
.vss-input-label {
  display: block;
  font-family: var(--st-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1A3323;
  margin-bottom: 8px;
}
.vss-input-field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(90, 70, 60, 0.25);
  border-radius: 8px;
  font-family: var(--st-sans);
  font-size: 15px;
  color: #2C1810;
  background: #FAF8F5;
  transition: all 0.2s ease;
}
.vss-input-field:focus {
  outline: none;
  border-color: #8C6D3B;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(184, 154, 103, 0.18);
}
.vss-verify-result-card {
  margin-top: 32px;
  padding: 24px;
  border-radius: 12px;
  background: #FAF8F5;
  border: 2px dashed rgba(82, 107, 91, 0.4);
  text-align: left;
}
.vss-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E8F5E9;
  color: #1B5E20;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .vss-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .vss-depts-grid { grid-template-columns: repeat(2, 1fr); }
  .vss-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .vss-b2b-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .vss-stats-grid { grid-template-columns: 1fr; }
  .vss-depts-grid { grid-template-columns: 1fr; }
  .vss-pillars-grid { grid-template-columns: 1fr; }
  .vss-b2b-banner { padding: 36px 22px; }
  .vss-b2b-perks { grid-template-columns: 1fr; }
  .vss-notice-inner { flex-direction: column; align-items: flex-start; }
  .vss-notice-marquee { width: 100%; }
}

/* ==========================================================================
   VSS BILINGUAL LANGUAGE SWITCHER (EN | हिंदी)
   ========================================================================== */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 26px;
  min-width: 74px;
  padding: 2px 3px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  line-height: 1.2;
  box-sizing: border-box;
  user-select: none;
  flex-shrink: 0;
}

.lang-opt {
  color: #E2E5E1;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2.5px 6.5px;
  border-radius: 3.5px;
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.lang-opt.lang-en {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.lang-opt.lang-hi {
  font-family: 'Noto Sans Devanagari', sans-serif !important;
  font-size: 12px;
  font-weight: 600;
}

.lang-opt:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
}

.lang-opt.active {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  background: #526B5B !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border-bottom: none;
}

.lang-opt:focus-visible {
  outline: 2px solid #8FB59C;
  outline-offset: 1px;
}

.lang-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  user-select: none;
  margin: 0 1px;
}

.mobile-lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: rgba(82, 107, 91, 0.07);
  border: 1px solid rgba(82, 107, 91, 0.18);
  border-radius: 8px;
  font-size: 13.5px;
}

.mobile-lang-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--color-primary, #526B5B);
}

.mobile-lang-opt {
  color: #3A2F25;
  text-decoration: none;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.mobile-lang-opt:hover {
  background: rgba(82, 107, 91, 0.12);
}

.mobile-lang-opt.active {
  background: var(--color-primary, #526B5B);
  color: #FFFFFF;
  font-weight: 700;
}

.mobile-lang-opt:focus-visible {
  outline: 2px solid var(--color-primary, #526B5B);
  outline-offset: 2px;
}

.mobile-lang-sep {
  color: rgba(92, 74, 58, 0.3);
  font-size: 12px;
  user-select: none;
}

/* ==========================================================================
   VSS Frosted Glass Material Hierarchy & Fallbacks (2026 Institutional Standard)
   ========================================================================== */

/* Strong Frosted Surfaces */
.glass-panel-strong,
.vss-hero-overlay-card,
.stat-ticker-card {
  background: var(--glass-strong-bg, rgba(255, 255, 255, 0.72));
  backdrop-filter: var(--glass-strong-blur, blur(18px) saturate(120%));
  -webkit-backdrop-filter: var(--glass-strong-blur, blur(18px) saturate(120%));
  border: var(--glass-strong-border, 1px solid rgba(255, 255, 255, 0.55));
  box-shadow: var(--glass-strong-shadow, 0 8px 30px rgba(36, 38, 36, 0.08));
}

/* Medium Frosted Surfaces (Major Content & Form Panels) */
.glass-panel-medium,
.academic-card,
.discipline-card,
.heritage-card,
.guru-card,
.event-card,
.faq-card,
.faq-item,
.verification-card,
.auth-card,
.login-card,
.admission-card,
.vss-discipline-card,
.vss-academic-card,
.vss-heritage-card,
.vss-affil-card,
.vss-exam-tier-card {
  background: var(--glass-medium-bg, rgba(255, 255, 255, 0.58));
  backdrop-filter: var(--glass-medium-blur, blur(14px) saturate(115%));
  -webkit-backdrop-filter: var(--glass-medium-blur, blur(14px) saturate(115%));
  border: var(--glass-medium-border, 1px solid rgba(255, 255, 255, 0.65));
  box-shadow: var(--glass-medium-shadow, 0 8px 24px rgba(36, 38, 36, 0.06));
  border-radius: 20px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.academic-card:hover,
.discipline-card:hover,
.heritage-card:hover,
.guru-card:hover,
.event-card:hover,
.faq-card:hover,
.verification-card:hover,
.auth-card:hover,
.login-card:hover,
.admission-card:hover,
.vss-discipline-card:hover,
.vss-academic-card:hover,
.vss-heritage-card:hover,
.vss-affil-card:hover,
.vss-exam-tier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 12px 32px rgba(36, 38, 36, 0.09);
}

/* Soft Frosted Surfaces (Footer & Secondary Information Panels) */
.glass-panel-soft,
.footer-contact-card,
.footer-info-panel,
.footer-brand-box {
  background: var(--glass-soft-bg, rgba(255, 255, 255, 0.42));
  backdrop-filter: var(--glass-soft-blur, blur(10px));
  -webkit-backdrop-filter: var(--glass-soft-blur, blur(10px));
  border: var(--glass-soft-border, 1px solid rgba(255, 255, 255, 0.45));
  box-shadow: var(--glass-soft-shadow, 0 4px 16px rgba(36, 38, 36, 0.04));
  border-radius: 14px;
}

/* Fallback for browsers lacking backdrop-filter support */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header,
  .site-header.scrolled .header-inner,
  .card,
  .vss-programme-card,
  .vss-faculty-card,
  .vss-discipline-card,
  .vss-academic-card,
  .vss-event-card,
  .vss-insight-card,
  .vss-heritage-card,
  .glass-panel-strong,
  .glass-panel-medium,
  .glass-panel-soft,
  .academic-card,
  .discipline-card,
  .heritage-card,
  .guru-card,
  .event-card,
  .faq-card,
  .faq-item,
  .verification-card,
  .auth-card,
  .login-card,
  .admission-card,
  .form-input,
  .form-select,
  .form-textarea {
    background-color: rgba(255, 255, 255, 0.94) !important;
  }
}

/* ==========================================================================
   VSS Subtle Ambient Blur & Soft Gradient Atmosphere System (2026 Standard)
   Natural Light Passing Through Translucent Architectural Surfaces
   ========================================================================== */

/* 1. Global Ambient Page Utility */
.ambient-page {
  background-color: var(--color-bg, #F7F6F2);
  background-image:
    radial-gradient(ellipse 70% 50% at 12% 6%, rgba(82, 107, 91, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 75% 55% at 88% 24%, rgba(232, 237, 231, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 15% 68%, rgba(229, 227, 220, 0.50) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 85% 88%, rgba(82, 107, 91, 0.04) 0%, transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 2. Reusable Decorative Ambient Light Orbs */
.ambient-glow-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow,
.ambient-glow-sage,
.ambient-glow-warm,
.ambient-glow-green,
.ambient-glow-stone {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}

.ambient-glow-sage {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(232, 237, 231, 0.90) 0%, rgba(232, 237, 231, 0.40) 50%, transparent 75%);
  filter: blur(90px);
  -webkit-filter: blur(90px);
  opacity: 0.75;
}

.ambient-glow-warm {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(247, 246, 242, 0.95) 0%, rgba(229, 227, 220, 0.60) 50%, transparent 75%);
  filter: blur(85px);
  -webkit-filter: blur(85px);
  opacity: 0.85;
}

.ambient-glow-green {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(82, 107, 91, 0.12) 0%, rgba(82, 107, 91, 0.04) 50%, transparent 75%);
  filter: blur(105px);
  -webkit-filter: blur(105px);
  opacity: 0.65;
}

.ambient-glow-stone {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(229, 227, 220, 0.85) 0%, rgba(229, 227, 220, 0.35) 50%, transparent 75%);
  filter: blur(80px);
  -webkit-filter: blur(80px);
  opacity: 0.75;
}

/* Subtle Organic Ambient Drift (18-24s ease-in-out) */
@keyframes ambientDriftSlow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -14px, 0) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.ambient-animated {
  animation: ambientDriftSlow 22s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-animated {
    animation: none !important;
  }
}

/* 3. Section-Specific Atmosphere Modifiers */
.section-atmosphere,
.atmosphere-about,
.atmosphere-academics,
.atmosphere-heritage,
.atmosphere-khol,
.atmosphere-admission,
.atmosphere-contact,
.atmosphere-footer {
  position: relative;
}

/* A. About & Institutional Narrative: Warm Ivory + Soft Sage */
.atmosphere-about,
.st-about-section,
.about-section {
  background:
    radial-gradient(ellipse 65% 55% at 88% 30%, rgba(232, 237, 231, 0.70) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 80%, rgba(229, 227, 220, 0.45) 0%, transparent 60%),
    #FFFFFF;
}

/* B. Academics & Classical Disciplines: Ivory + Subtle Heritage Green */
.atmosphere-academics,
.st-disciplines-section,
.vss-programmes-section,
.disciplines-section {
  background:
    radial-gradient(ellipse 70% 60% at 12% 18%, rgba(82, 107, 91, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 88% 82%, rgba(232, 237, 231, 0.55) 0%, transparent 65%),
    #F7F6F2;
}

/* C. Braj Heritage & Acoustic Spaces: Warm Ivory + Sandstone/Stone */
.atmosphere-heritage,
.st-gallery-section,
.st-overlap-section,
.braj-heritage-section {
  background:
    radial-gradient(ellipse 65% 55% at 85% 25%, rgba(229, 227, 220, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 75%, rgba(232, 237, 231, 0.50) 0%, transparent 60%),
    #F7F6F2;
}

/* D. Sri Khol Initiative: Soft Sage + Warm Ivory */
.atmosphere-khol,
.sri-khol-section {
  background:
    radial-gradient(ellipse 65% 60% at 18% 35%, rgba(232, 237, 231, 0.80) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 82% 70%, rgba(247, 246, 242, 0.70) 0%, transparent 60%),
    #F7F6F2;
}

/* E. Admission & Formal Examination: Pure White + Soft Sage */
.atmosphere-admission,
.vss-admissions-section,
.admissions-section,
.examination-section {
  background:
    radial-gradient(ellipse 75% 55% at 50% 100%, rgba(232, 237, 231, 0.60) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 15% 20%, rgba(82, 107, 91, 0.04) 0%, transparent 60%),
    #FFFFFF;
}

/* F. Contact: Ivory + Subtle Green */
.atmosphere-contact,
.contact-section {
  background:
    radial-gradient(ellipse 60% 60% at 80% 25%, rgba(82, 107, 91, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 20% 75%, rgba(232, 237, 231, 0.60) 0%, transparent 65%),
    #F7F6F2;
}

/* G. Footer Transition: Warm Frosted Foundation + Soft Sage Radial Glow */
.atmosphere-footer,
.footer {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232, 237, 231, 0.55) 0%, transparent 70%),
    #F1F2ED;
}

/* 4. Frosted Glass + Ambient Gradient Layering Interplay */
.card-featured,
.vss-programme-card:nth-child(2),
.st-service-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68) 0%, rgba(232, 237, 231, 0.42) 100%);
}

/* 5. Mobile Adjustments for Ambient Blur (390px, 375px) */
@media (max-width: 768px) {
  .ambient-glow-sage,
  .ambient-glow-warm,
  .ambient-glow-green,
  .ambient-glow-stone {
    width: 300px;
    height: 300px;
    filter: blur(48px);
    -webkit-filter: blur(48px);
    opacity: 0.40;
  }
  .ambient-animated {
    animation: none !important;
  }
}

/* ==========================================================================
/* ==========================================================================
   VSS Assistant (Cultural Institutional Chatbot Component)
   Compact Lead-Oriented Architecture & Frosted Glass Design
   ========================================================================== */

/* 1. Compact Launcher Floating Trigger */
.vss-assistant-launcher-wrap {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9990 !important;
  display: block !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

.vss-assistant-launcher-wrap.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: scale(0.85) !important;
}

.vss-assistant-launcher {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #526B5B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 28px rgba(36, 38, 36, 0.24) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.vss-assistant-launcher:hover {
  background: #415548 !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 14px 34px rgba(82, 107, 91, 0.35) !important;
}

.vss-assistant-launcher-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
}

.vss-assistant-launcher-badge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #34A853 !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 0 6px rgba(52, 168, 83, 0.6) !important;
}

/* 2. Compact Chat Panel Overlay Container */
.vss-assistant-widget {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 370px !important;
  height: 540px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 40px) !important;
  z-index: 9991 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%) !important;
  border: 1px solid rgba(255, 255, 255, 0.70) !important;
  box-shadow: 0 18px 50px rgba(36, 38, 36, 0.18) !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(14px) scale(0.96) !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
}

.vss-assistant-widget.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* 3. Compact Header (58px) */
.vss-assistant-header {
  height: 58px !important;
  padding: 0 14px !important;
  background: rgba(247, 246, 242, 0.92) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.vss-assistant-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.vss-assistant-avatar {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(82, 107, 91, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  flex-shrink: 0 !important;
}

.vss-assistant-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.vss-assistant-status-dot {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 8px !important;
  height: 8px !important;
  background: #34A853 !important;
  border: 1.5px solid #FFFFFF !important;
  border-radius: 50% !important;
}

.vss-assistant-titles {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.vss-assistant-title {
  font-family: var(--font-display, 'Newsreader', Georgia, serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #242624 !important;
  margin: 0 !important;
}

.vss-assistant-sub {
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-size: 10.5px !important;
  color: #7A695A !important;
  margin: 1px 0 0 !important;
}

.vss-assistant-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.vss-assistant-action-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #526B5B !important;
  background: rgba(82, 107, 91, 0.08) !important;
  cursor: pointer !important;
  border: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.vss-assistant-action-btn:hover {
  background: rgba(82, 107, 91, 0.18) !important;
  color: #242624 !important;
  transform: scale(1.06) !important;
}

/* 4. Scrollable Body & Conversation Area */
.vss-assistant-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 14px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(82, 107, 91, 0.25) transparent !important;
}

.vss-assistant-body::-webkit-scrollbar {
  width: 4px !important;
}

.vss-assistant-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.vss-assistant-body::-webkit-scrollbar-thumb {
  background: rgba(82, 107, 91, 0.22) !important;
  border-radius: 4px !important;
}

.vss-assistant-body::-webkit-scrollbar-thumb:hover {
  background: rgba(82, 107, 91, 0.45) !important;
}

.vss-assistant-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.vss-msg {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  animation: vssMsgFadeIn 0.2s ease forwards !important;
}

.vss-msg-assistant {
  align-items: flex-start !important;
}

.vss-msg-user {
  align-items: flex-end !important;
}

.vss-bubble {
  max-width: 86% !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
}

.vss-msg-assistant .vss-bubble {
  background: rgba(247, 246, 242, 0.96) !important;
  color: #242624 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-top-left-radius: 4px !important;
}

.vss-msg-user .vss-bubble {
  background: #526B5B !important;
  color: #FFFFFF !important;
  border-top-right-radius: 4px !important;
}

.vss-msg-assistant .vss-bubble p {
  margin: 0 0 6px 0 !important;
}

.vss-msg-assistant .vss-bubble p:last-child {
  margin-bottom: 0 !important;
}

.vss-msg-assistant .vss-bubble a {
  color: #384A3F !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* Thinking Indicator */
.vss-thinking-bubble {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 12px !important;
  background: rgba(247, 246, 242, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 14px !important;
  border-top-left-radius: 4px !important;
  font-size: 11px !important;
  color: #7A695A !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
}

.vss-thinking-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.vss-thinking-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #526B5B !important;
  animation: vssBounceDot 0.6s infinite alternate !important;
}

.vss-thinking-dot:nth-child(2) { animation-delay: 0.2s !important; }
.vss-thinking-dot:nth-child(3) { animation-delay: 0.4s !important; }

/* 5. Lead-Oriented Action Chips */
.vss-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
  width: 100% !important;
}

.vss-action-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(82, 107, 91, 0.28) !important;
  border-radius: 11px !important;
  color: #384A3F !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.vss-action-chip:hover {
  background: #526B5B !important;
  color: #FFFFFF !important;
  border-color: #526B5B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(82, 107, 91, 0.2) !important;
}

.vss-action-chip-primary {
  background: rgba(232, 237, 231, 0.95) !important;
  border-color: rgba(82, 107, 91, 0.45) !important;
  font-weight: 600 !important;
}

.vss-action-chip-primary:hover {
  background: #526B5B !important;
  color: #FFFFFF !important;
}

.vss-chips-toggle {
  margin-top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  color: #526B5B !important;
  font-weight: 600 !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.vss-chips-toggle:hover {
  background: rgba(82, 107, 91, 0.08) !important;
}

/* 6. Compact Footer Composer */
.vss-assistant-footer {
  padding: 8px 12px !important;
  background: rgba(247, 246, 242, 0.96) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.vss-assistant-input {
  flex: 1 !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: #FFFFFF !important;
  font-size: 12.5px !important;
  font-family: var(--font-body, 'Source Sans 3', sans-serif) !important;
  color: #242624 !important;
  outline: none !important;
}

.vss-assistant-input:focus {
  border-color: #526B5B !important;
  box-shadow: 0 0 0 2px rgba(82, 107, 91, 0.15) !important;
}

.vss-assistant-send-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #526B5B !important;
  color: #FFFFFF !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.vss-assistant-send-btn:hover {
  background: #415548 !important;
  transform: scale(1.05) !important;
}

/* 7. Mobile Viewport Refinements (390px, 375px) */
@media (max-width: 600px) {
  .vss-assistant-launcher-wrap {
    bottom: 16px !important;
    right: 16px !important;
  }
  .vss-assistant-launcher {
    width: 54px !important;
    height: 54px !important;
  }
  .vss-assistant-widget {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    height: min(620px, calc(100vh - 24px)) !important;
    border-radius: 18px !important;
  }
}