/* ==========================================================================
   KUMBHAKA DHYĀNA ĀŚRAMAM
   Royal Aubergine & Deep Purple Dark Design System
   (Strictly mapped from User Color Spec: #241533, #3B2352, #4A2A6B, #5A3B7A, #7B5A9E, #8B6FA0, #C9A24B)
   ========================================================================== */

/* Google Fonts are loaded via <link> preconnect in HTML — no @import needed here (avoids double load) */

/* ==========================================================================
   USER-SPECIFIED COLOR SYSTEM
   ========================================================================== */
:root {
  /* Radiant Ultra-Bright Watercolor Wash Color System */
  --color-near-black:    #FFFFFF;  /* Pure Luminous White Canvas Base */
  --color-aubergine:     #FFFFFF;  /* Pure White Glass Panels */
  --color-deep-violet:   #F5ECFF;  /* Radiant Watercolor Quote & Highlight Wash */
  --color-royal-purple:  #FAF5FF;  /* Bright Card Hover Watercolor Glow */
  --color-medium-purple: #9333EA;  /* Vivid Radiant Amethyst Accent */
  --color-mauve:         #52316B;  /* Rich Mulberry Subtitles & Muted Accents */
  --color-gold:          #B88828;  /* Deep Antique Warm Gold */
  --color-text-light:    #1E0A38;  /* Deep Crisp Imperial Plum Text for Maximum Readability */

  /* Opacity Variations */
  --gold-50:  rgba(184, 136, 40, 0.5);
  --gold-30:  rgba(184, 136, 40, 0.3);
  --gold-20:  rgba(184, 136, 40, 0.2);
  --gold-10:  rgba(184, 136, 40, 0.1);

  --text-90:  #1E0A38;
  --text-75:  #1E0A38;
  --text-50:  rgba(30, 10, 56, 0.75);

  --purple-20: rgba(147, 51, 234, 0.2);
  --purple-12: rgba(147, 51, 234, 0.12);

  /* Typography System */
  --font-display-serif: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Dimensions */
  --pad-section: clamp(55px, 6vw, 85px);
  --container-width: 1420px;
  --transition-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  font-size: 16px;
  background-color: var(--color-near-black);
  color: var(--color-text-light);
  overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.75;
  background-color: #FFFFFF;
  background-image: 
    radial-gradient(at 12% 10%, rgba(240, 220, 255, 0.9) 0px, transparent 60%),
    radial-gradient(at 88% 18%, rgba(255, 230, 245, 0.88) 0px, transparent 55%),
    radial-gradient(at 25% 55%, rgba(220, 245, 255, 0.88) 0px, transparent 60%),
    radial-gradient(at 85% 82%, rgba(254, 243, 199, 0.85) 0px, transparent 55%),
    radial-gradient(at 50% 38%, rgba(245, 232, 255, 0.8) 0px, transparent 65%);
  background-attachment: fixed;
  color: var(--color-text-light);
  cursor: default;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--color-gold);
  color: var(--color-near-black);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-near-black);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 4rem;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B88828;
  background: rgba(184, 136, 40, 0.12);
  border: 1px solid rgba(184, 136, 40, 0.35);
  padding: 0.35rem 1.1rem;
  border-radius: 20px;
  margin-bottom: 1.2rem;
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--transition-natural), transform 0.6s var(--transition-natural);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   BUTTON SYSTEM
   - Primary: bg var(--color-gold), text var(--color-near-black)
   - Secondary: transparent bg, border var(--color-gold) 1px, text var(--color-gold)
   ========================================================================== */
.btn-primary, .btn-hero-innovative, .footer-sub-btn, .btn-ghost-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 2.5rem;
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 2px;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s var(--transition-natural);
}

.btn-primary:hover, .btn-hero-innovative:hover, .footer-sub-btn:hover, .btn-ghost-gold:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(201, 162, 75, 0.4);
}

.btn-secondary, .btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.2rem;
  background: rgba(15, 5, 25, 0.55);
  backdrop-filter: blur(8px);
  border: 1.5px solid #F5CE68;
  border-radius: 2px;
  color: #F5CE68;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s var(--transition-natural);
}

.btn-secondary:hover, .btn-hero-outline:hover {
  background: rgba(245, 206, 104, 0.25);
  color: #FFFFFF;
  border-color: #F5CE68;
}

/* ==========================================================================
   1. NAVBAR
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184, 136, 40, 0.25);
  box-shadow: 0 4px 25px rgba(147, 51, 234, 0.08);
  transition: all 0.4s var(--transition-natural);
}

.site-nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(147, 51, 234, 0.12);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 3rem;
  max-width: var(--container-width);
  margin: 0 auto;
  gap: 1.2rem;
  overflow: hidden;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-brand-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-logo-img {
  width: auto;
  height: 46px;
  max-height: 46px;
  max-width: 48px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(184, 136, 40, 0.25));
  transition: transform 0.3s ease;
}

.nav-brand:hover .brand-logo-img {
  transform: scale(1.05);
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav-brand-title {
  font-family: var(--font-body);
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  color: #1E0A38;
  font-weight: 800;
  white-space: nowrap;
}

.nav-brand-sub {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #1E0A38;
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--color-gold);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Language Switcher & Controls */
.nav-right-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.lang-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(147, 51, 234, 0.06);
  border: 1px solid rgba(184, 136, 40, 0.35);
  border-radius: 20px;
  padding: 0.22rem 0.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.lang-switch-wrap:hover {
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(184, 136, 40, 0.2);
}

.lang-btn {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-mauve);
  padding: 0.18rem 0.5rem;
  border-radius: 12px;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.lang-btn:hover {
  color: var(--color-gold);
}

.lang-btn.active {
  background: var(--color-gold);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(184, 136, 40, 0.3);
}

.lang-divider {
  font-size: 0.75rem;
  color: rgba(184, 136, 40, 0.4);
  user-select: none;
}

/* Dedicated Navbar CTA Button */
.site-nav .btn-ghost-gold {
  padding: 0.52rem 1.25rem !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  border-radius: 24px !important;
  gap: 0.45rem !important;
  background: var(--color-gold) !important;
  border: 1px solid var(--color-gold) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(184, 136, 40, 0.25);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.site-nav .btn-ghost-gold:hover {
  background: #A0741E !important;
  border-color: #A0741E !important;
  box-shadow: 0 4px 15px rgba(184, 136, 40, 0.4);
  transform: translateY(-1px);
}

.site-nav .btn-user-icon {
  width: 13px;
  height: 13px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 2;
}

/* ==========================================================================
   HINDI OPTICAL SIZE & VISIBILITY TYPOGRAPHY SYSTEM
   ========================================================================== */
html[lang="hi"] body {
  font-family: 'Noto Sans Devanagari', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1.85;
}

/* Global resets for Hindi to prevent broken conjuncts & glyph clipping */
html[lang="hi"] h1, 
html[lang="hi"] h2, 
html[lang="hi"] h3, 
html[lang="hi"] h4,
html[lang="hi"] .nav-brand-title,
html[lang="hi"] .about-main-title,
html[lang="hi"] .teachings-main-title,
html[lang="hi"] .principles-title,
html[lang="hi"] .enquiry-title,
html[lang="hi"] .teacher-title,
html[lang="hi"] .footer-brand-title,
html[lang="hi"] .footer-col-title {
  font-family: 'Noto Sans Devanagari', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="hi"] .nav-link,
html[lang="hi"] .mobile-nav-link,
html[lang="hi"] .mobile-nav-cta,
html[lang="hi"] .site-nav .btn-ghost-gold,
html[lang="hi"] .section-eyebrow,
html[lang="hi"] .hero-tagline-script,
html[lang="hi"] .btn-hero-innovative,
html[lang="hi"] .btn-hero-outline,
html[lang="hi"] .rule-badge,
html[lang="hi"] .pillar-num-badge,
html[lang="hi"] .seq-tab-btn,
html[lang="hi"] .master-cta-btn,
html[lang="hi"] .rule-filter-btn {
  font-family: 'Noto Sans Devanagari', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-feature-settings: "liga" 1, "calt" 1 !important;
}

/* Hero Emblem Hindi Formatting */
html[lang="hi"] .hero-brand-emblem .emblem-line {
  font-family: 'Noto Sans Devanagari', Georgia, serif !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  overflow: visible !important;
  padding: 0.1em 0 !important;
}

html[lang="hi"] .hero-brand-emblem .line-2 {
  padding-bottom: 0.28em !important;
  margin-bottom: 0.25rem !important;
  overflow: visible !important;
  display: block !important;
  text-align: left !important;
}

html[lang="hi"] .hero-brand-emblem .line-3 {
  margin-top: 0.25rem !important;
  text-align: left !important;
}

html[lang="hi"] .hero-tagline-script {
  text-align: left !important;
}

html[lang="hi"] .hero-subtext-body {
  text-align: left !important;
}

/* Brand Logo Text in Hindi */
html[lang="hi"] .nav-brand-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-text-light);
}

html[lang="hi"] .nav-brand-sub {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--color-gold);
}

/* Navbar Links in Hindi */
html[lang="hi"] .nav-link {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1E0A38 !important;
}

html[lang="hi"] .nav-link:hover {
  color: var(--color-gold) !important;
}

/* Navbar CTA Button in Hindi */
html[lang="hi"] .site-nav .btn-ghost-gold {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.58rem 1.45rem !important;
}

/* Language Switcher Buttons */
html[lang="hi"] .lang-btn {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

/* Hero Section Hindi Text Boost */
html[lang="hi"] .hero-tagline-script {
  font-size: 1.35rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

html[lang="hi"] .hero-subtext-body {
  font-size: 1.22rem !important;
  line-height: 1.9 !important;
  font-weight: 500 !important;
}

html[lang="hi"] .btn-hero-innovative .btn-text,
html[lang="hi"] .btn-hero-outline span {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* 21 Rules & 5 Pillars Cards in Hindi */
html[lang="hi"] .rule-badge,
html[lang="hi"] .pillar-num-badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

html[lang="hi"] .rule-card-header h4,
html[lang="hi"] .pillar-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

html[lang="hi"] .rule-desc-text,
html[lang="hi"] .pillar-desc-p {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1E0A38 !important;
  font-weight: 500 !important;
}

html[lang="hi"] .form-field-label,
html[lang="hi"] .footer-links-list a {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   TELUGU OPTICAL SIZE & VISIBILITY TYPOGRAPHY SYSTEM
   ========================================================================== */
html[lang="te"] body {
  font-family: 'Noto Sans Telugu', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1.85;
}

/* Global resets for Telugu to prevent broken conjuncts & glyph clipping */
html[lang="te"] h1, 
html[lang="te"] h2, 
html[lang="te"] h3, 
html[lang="te"] h4,
html[lang="te"] .nav-brand-title,
html[lang="te"] .about-main-title,
html[lang="te"] .teachings-main-title,
html[lang="te"] .principles-title,
html[lang="te"] .enquiry-title,
html[lang="te"] .teacher-title,
html[lang="te"] .footer-brand-title,
html[lang="te"] .footer-col-title {
  font-family: 'Noto Sans Telugu', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="te"] .nav-link,
html[lang="te"] .mobile-nav-link,
html[lang="te"] .mobile-nav-cta,
html[lang="te"] .site-nav .btn-ghost-gold,
html[lang="te"] .section-eyebrow,
html[lang="te"] .hero-tagline-script,
html[lang="te"] .btn-hero-innovative,
html[lang="te"] .btn-hero-outline,
html[lang="te"] .rule-badge,
html[lang="te"] .pillar-num-badge,
html[lang="te"] .seq-tab-btn,
html[lang="te"] .master-cta-btn,
html[lang="te"] .rule-filter-btn {
  font-family: 'Noto Sans Telugu', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-feature-settings: "liga" 1, "calt" 1 !important;
}

/* Hero Emblem Telugu Formatting (Zero Descender Clipping for ధ్యాన) */
html[lang="te"] .hero-brand-emblem .emblem-line {
  font-family: 'Noto Sans Telugu', Georgia, serif !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  overflow: visible !important;
  padding: 0.12em 0 !important;
}

html[lang="te"] .hero-brand-emblem .line-2 {
  padding-top: 0.08em !important;
  padding-bottom: 0.32em !important;
  margin-bottom: 0.28rem !important;
  overflow: visible !important;
  display: block !important;
  text-align: left !important;
}

html[lang="te"] .hero-brand-emblem .line-3 {
  margin-top: 0.35rem !important;
  text-align: left !important;
}

html[lang="te"] .hero-tagline-script {
  text-align: left !important;
}

html[lang="te"] .hero-subtext-body {
  text-align: left !important;
}

/* Brand Logo Text in Telugu */
html[lang="te"] .nav-brand-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-text-light);
}

html[lang="te"] .nav-brand-sub {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--color-gold);
}

/* Navbar Links in Telugu */
html[lang="te"] .nav-link {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

html[lang="te"] .nav-link:hover {
  color: var(--color-gold) !important;
}

/* Navbar CTA Button in Telugu */
html[lang="te"] .site-nav .btn-ghost-gold {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.58rem 1.45rem !important;
}

/* Language Switcher Buttons */
html[lang="te"] .lang-btn {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

/* Hero Section Telugu Typography */
html[lang="te"] .hero-tagline-script {
  font-size: 1.35rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

html[lang="te"] .hero-subtext-body {
  font-size: 1.22rem !important;
  line-height: 1.9 !important;
  font-weight: 500 !important;
}

html[lang="te"] .btn-hero-innovative .btn-text,
html[lang="te"] .btn-hero-outline span {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* Section Eyebrows */
html[lang="te"] .section-eyebrow {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

/* Master CTAs & Filter Bar */
html[lang="te"] .master-cta-btn span {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

html[lang="te"] .rule-filter-btn {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* 21 Rules Cards Telugu Scaling */
html[lang="te"] .rule-badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

html[lang="te"] .rule-card-header h4 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

html[lang="te"] .rule-desc-text {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1E0A38 !important;
  font-weight: 500 !important;
}

/* 5 Pillars Telugu Scaling */
html[lang="te"] .pillar-num-badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

html[lang="te"] .pillar-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

html[lang="te"] .pillar-desc-p {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1E0A38 !important;
  font-weight: 500 !important;
}

/* Sequences Telugu Scaling */
html[lang="te"] .seq-tab-btn {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

html[lang="te"] .seq-steps-list li {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
}

/* Form Inputs & Buttons */
html[lang="te"] .form-field-label {
  font-family: 'Noto Sans Telugu', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

html[lang="te"] .form-underline-input {
  font-family: 'Noto Sans Telugu', sans-serif !important;
  font-size: 1rem !important;
}

html[lang="te"] .form-underline-input::placeholder {
  font-family: 'Noto Sans Telugu', sans-serif !important;
  font-size: 0.92rem !important;
}

/* Footer Links & Text */
html[lang="te"] .footer-links-list a {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

html[lang="te"] .footer-brand-desc,
html[lang="te"] .footer-bottom-row p {
  font-family: 'Noto Sans Telugu', sans-serif !important;
  font-size: 0.92rem !important;
}

/* ==========================================================================
   KANNADA OPTICAL SIZE & VISIBILITY TYPOGRAPHY SYSTEM
   ========================================================================== */
html[lang="kn"] body {
  font-family: 'Noto Sans Kannada', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1.85;
}

/* Global resets for Kannada to prevent broken conjuncts & glyph clipping */
html[lang="kn"] h1, 
html[lang="kn"] h2, 
html[lang="kn"] h3, 
html[lang="kn"] h4,
html[lang="kn"] .nav-brand-title,
html[lang="kn"] .about-main-title,
html[lang="kn"] .teachings-main-title,
html[lang="kn"] .principles-title,
html[lang="kn"] .enquiry-title,
html[lang="kn"] .teacher-title,
html[lang="kn"] .footer-brand-title,
html[lang="kn"] .footer-col-title {
  font-family: 'Noto Sans Kannada', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="kn"] .nav-link,
html[lang="kn"] .mobile-nav-link,
html[lang="kn"] .mobile-nav-cta,
html[lang="kn"] .site-nav .btn-ghost-gold,
html[lang="kn"] .section-eyebrow,
html[lang="kn"] .hero-tagline-script,
html[lang="kn"] .btn-hero-innovative,
html[lang="kn"] .btn-hero-outline,
html[lang="kn"] .rule-badge,
html[lang="kn"] .pillar-num-badge,
html[lang="kn"] .seq-tab-btn,
html[lang="kn"] .master-cta-btn,
html[lang="kn"] .rule-filter-btn {
  font-family: 'Noto Sans Kannada', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-feature-settings: "liga" 1, "calt" 1 !important;
}

/* Hero Emblem Kannada Formatting (Zero Descender Clipping for ಧ್ಯಾನ) */
html[lang="kn"] .hero-brand-emblem .emblem-line {
  font-family: 'Noto Sans Kannada', Georgia, serif !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  overflow: visible !important;
  padding: 0.12em 0 !important;
}

html[lang="kn"] .hero-brand-emblem .line-2 {
  padding-top: 0.08em !important;
  padding-bottom: 0.32em !important;
  margin-bottom: 0.28rem !important;
  overflow: visible !important;
  display: block !important;
  text-align: left !important;
}

html[lang="kn"] .hero-brand-emblem .line-3 {
  margin-top: 0.35rem !important;
  text-align: left !important;
}

html[lang="kn"] .hero-tagline-script {
  text-align: left !important;
}

html[lang="kn"] .hero-subtext-body {
  text-align: left !important;
}

/* Brand Logo Text in Kannada */
html[lang="kn"] .nav-brand-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-text-light);
}

html[lang="kn"] .nav-brand-sub {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--color-gold);
}

/* Navbar Links in Kannada */
html[lang="kn"] .nav-link {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

html[lang="kn"] .nav-link:hover {
  color: var(--color-gold) !important;
}

/* Navbar CTA Button in Kannada */
html[lang="kn"] .site-nav .btn-ghost-gold {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.58rem 1.45rem !important;
}

/* Language Switcher Buttons */
html[lang="kn"] .lang-btn {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

/* Hero Section Kannada Typography */
html[lang="kn"] .hero-tagline-script {
  font-size: 1.35rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

html[lang="kn"] .hero-subtext-body {
  font-size: 1.22rem !important;
  line-height: 1.9 !important;
  font-weight: 500 !important;
}

html[lang="kn"] .btn-hero-innovative .btn-text,
html[lang="kn"] .btn-hero-outline span {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* Section Eyebrows */
html[lang="kn"] .section-eyebrow {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

/* Master CTAs & Filter Bar */
html[lang="kn"] .master-cta-btn span {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

html[lang="kn"] .rule-filter-btn {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* 21 Rules Cards Kannada Scaling */
html[lang="kn"] .rule-badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

html[lang="kn"] .rule-card-header h4 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

html[lang="kn"] .rule-desc-text {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1E0A38 !important;
  font-weight: 500 !important;
}

/* 5 Pillars Kannada Scaling */
html[lang="kn"] .pillar-num-badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

html[lang="kn"] .pillar-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

html[lang="kn"] .pillar-desc-p {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1E0A38 !important;
  font-weight: 500 !important;
}

/* Sequences Kannada Scaling */
html[lang="kn"] .seq-tab-btn {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

html[lang="kn"] .seq-steps-list li {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
}

/* Form Inputs & Buttons */
html[lang="kn"] .form-field-label {
  font-family: 'Noto Sans Kannada', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

html[lang="kn"] .form-underline-input {
  font-family: 'Noto Sans Kannada', sans-serif !important;
  font-size: 1rem !important;
}

html[lang="kn"] .form-underline-input::placeholder {
  font-family: 'Noto Sans Kannada', sans-serif !important;
  font-size: 0.92rem !important;
}

/* Footer Links & Text */
html[lang="kn"] .footer-links-list a {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

html[lang="kn"] .footer-brand-desc,
html[lang="kn"] .footer-bottom-row p {
  font-family: 'Noto Sans Kannada', sans-serif !important;
  font-size: 0.92rem !important;
}

/* ==========================================================================
   2. HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: #FFFFFF;
  overflow: hidden;
  padding-top: calc(var(--nav-height, 76px) + 2.5rem);
  padding-bottom: 4.5rem;
}

.hero-bg-video, .hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.92) contrast(1.04);
  z-index: 1;
}

.hero-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 20, 10, 0.65) 0%, rgba(10, 20, 10, 0.35) 45%, transparent 100%),
              linear-gradient(to top, rgba(10, 20, 10, 0.55) 0%, transparent 40%);
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 5;
  padding: 0 3.5rem 0 clamp(4.5rem, 8vw, 10rem);
  max-width: 860px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Accessibility & SEO Screen Reader 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-width: 0;
}

h1.hero-brand-emblem {
  font-weight: normal;
  margin: 0 0 0.8rem 0;
  font-size: inherit;
}

.hero-brand-emblem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.04;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  margin-bottom: 0.8rem;
  width: 100%;
  position: relative;
}

/* Sacred Lotus & Filigree Line Ornaments matching reference image */
.emblem-ornament {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 100%;
  max-width: 380px;
  margin: 0;
}

.top-ornament {
  margin-bottom: 0.6rem;
}

.bottom-ornament {
  margin-top: 0.6rem;
  margin-bottom: 0.8rem;
}

.emblem-ornament .ornament-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #E29B63, transparent);
}

.emblem-ornament .ornament-lotus {
  width: 42px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.hero-brand-emblem .emblem-line {
  display: block;
  text-align: left !important;
  width: 100%;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.25;
  overflow: visible;
  padding: 0.05em 0;
}

/* Line 1: KUMBHAKA - Luminous Ivory-Gold */
.hero-brand-emblem .line-1 {
  color: #FFFDF9;
  -webkit-text-fill-color: #FFFDF9;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.15rem;
}

/* Line 2: DHYĀNA - Warm Metallic Copper-Gold Gradient */
.hero-brand-emblem .line-2 {
  background: linear-gradient(180deg, #FFE4BE 0%, #EAA86D 50%, #C47A40 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
  padding-top: 0.08em;
  padding-bottom: 0.28em;
  margin-bottom: 0.15rem;
  overflow: visible;
  display: block;
  text-align: left !important;
}

/* Line 3: ĀŚRAMAM - Luminous Ivory-Gold */
.hero-brand-emblem .line-3 {
  color: #FFFDF9;
  -webkit-text-fill-color: #FFFDF9;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 0, 0, 0.5);
  margin-top: 0.2rem;
}

/* Tagline Script: luminous warm gold gradient, high contrast drop shadow */
.hero-tagline-script {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  font-style: italic;
  font-weight: 600;
  color: #F8D882;
  background: linear-gradient(135deg, #FFEAB5 0%, #F5CE68 50%, #E29B63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  text-align: left !important;
  width: 100%;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 15px rgba(245, 206, 104, 0.5));
}

.hero-subtext-body {
  font-size: 1.16rem;
  line-height: 1.85;
  color: #FFFFFF;
  font-weight: 500;
  max-width: 660px;
  margin-bottom: 2.2rem;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-cta-wrap {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.btn-lotus-icon {
  width: 18px;
  height: 18px;
  stroke: var(--color-near-black);
  fill: none;
  stroke-width: 1.4;
}

.btn-play-icon {
  width: 14px;
  height: 14px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
}

.hero-teacher-badge {
  position: absolute;
  right: 18vw;
  bottom: 12vh;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  background: rgba(15, 5, 25, 0.85);
  border: 1.5px solid #F5CE68;
  color: #F5CE68;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.badge-lotus-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Social Icon Rail */
.hero-social-rail {
  position: absolute;
  right: 4rem;
  bottom: 7.5rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.social-circle-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-aubergine);
  border: 1px solid var(--gold-30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition: all 0.3s ease;
}

.social-circle-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text-light);
  fill: none;
  stroke-width: 1.4;
}

.social-circle-icon:hover {
  background: var(--color-royal-purple);
  border-color: var(--color-gold);
  transform: translateY(-3px);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.scroll-line-anim {
  width: 1px;
  height: 44px;
  background: rgba(201, 162, 75, 0.2);
  position: relative;
  overflow: hidden;
}

.scroll-line-anim::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-gold);
  animation: scroll-drip 2s infinite;
}

@keyframes scroll-drip {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* ==========================================================================
   3. ABOUT KUMBHAKA MEDITATION (STRUCTURED INNOVATIVE COMPONENTS)
   ========================================================================== */
.philosophy-section {
  background: transparent;
  color: var(--color-text-light);
  padding: var(--pad-section) 0;
  position: relative;
}

.about-header-centered {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 2.5rem auto;
}

.about-main-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  color: #1A0732;
  margin-bottom: 1rem;
}

.about-lead-text {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #2D1845;
  font-weight: 450;
}

/* 17,000+ Years Lineage Grid */
.about-lineage-block {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 2.8rem;
  margin-bottom: 3rem;
  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.08);
}

.lineage-badge-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px dashed rgba(184, 136, 40, 0.3);
}

.lineage-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FAF4E6 0%, #F5EAE0 100%);
  border: 1.5px solid var(--color-gold);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(184, 136, 40, 0.15);
}

.lineage-stat-card .stat-number {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: #B88828;
  line-height: 1;
}

.lineage-stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1E0A38;
  margin-top: 0.5rem;
}

.lineage-sub-title {
  font-family: var(--font-display-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: #1E0A38;
  margin-bottom: 0.6rem;
}

.lineage-desc-p {
  font-size: 1rem;
  line-height: 1.75;
  color: #2D1845;
}

/* Master Chips Grid */
.masters-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.master-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #FAF8FC;
  border: 1px solid rgba(184, 136, 40, 0.3);
  border-radius: 25px;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1E0A38;
  transition: all 0.3s ease;
}

.master-chip:hover {
  background: var(--color-gold);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.master-chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

.master-chip:hover .chip-dot {
  background: #FFFFFF;
}

/* Science of Breath Triad Card */
.about-science-card {
  background: linear-gradient(135deg, #F3E8FF 0%, #FAF4E6 50%, #EBE0FF 100%);
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.1);
  text-align: center;
}

.science-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B88828;
  background: rgba(184, 136, 40, 0.12);
  border: 1px solid rgba(184, 136, 40, 0.3);
  padding: 0.3rem 1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.science-title {
  font-family: var(--font-display-serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: #1E0A38;
  margin-bottom: 1.2rem;
}

.science-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2D1845;
  max-width: 860px;
  margin: 0 auto 2.2rem auto;
}

.science-triad-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

.triad-node {
  background: #FFFFFF;
  border: 1.5px solid var(--color-gold);
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #1E0A38;
  box-shadow: 0 4px 15px rgba(184, 136, 40, 0.15);
}

.triad-connector {
  font-weight: 700;
  color: #B88828;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.bridge-tag {
  background: #B88828;
  color: #FFFFFF;
  padding: 0.25rem 0.8rem;
  border-radius: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
}

/* Dual Glass Cards (Vision & Universal Path) */
.about-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  margin-bottom: 3rem;
}

/* Responsive: About dual grid — single column on small tablets/phones */
@media (max-width: 640px) {
  .about-dual-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.about-glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 2.8rem;
  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.3s ease;
}

.about-glass-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold);
}

.card-icon-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.about-card-svg {
  width: 28px;
  height: 28px;
  stroke: #B88828;
}

.card-icon-header h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #1E0A38;
}

.about-glass-card p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #2D1845;
}

.card-highlight-p {
  background: #FAF6EE;
  border-left: 3px solid #B88828;
  padding: 0.9rem 1.2rem;
  font-style: italic;
  font-weight: 500;
  border-radius: 0 6px 6px 0;
}

/* Tradition & Free Transmission Banner */
.about-tradition-banner {
  background: #FFFFFF;
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.08);
}

.tradition-content h3 {
  font-family: var(--font-display-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: #1E0A38;
  margin-bottom: 1rem;
}

.tradition-content p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #2D1845;
  margin-bottom: 1.8rem;
}

.guru-compassion-box {
  background: linear-gradient(135deg, #FAF4E6 0%, #FFF8EE 100%);
  border: 1.5px solid var(--color-gold);
  border-radius: 10px;
  padding: 1.8rem 2.2rem;
  box-shadow: 0 6px 20px rgba(184, 136, 40, 0.12);
}

.compassion-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B88828;
  margin-bottom: 0.6rem;
}

.guru-compassion-box p {
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #1E0A38;
}

/* Our Mission Pillars Grid */
.about-mission-block {
  margin-bottom: 3.5rem;
}

.mission-section-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: #1E0A38;
  text-align: center;
  margin-bottom: 2rem;
}

.mission-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem;
}

.mission-pill-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(184, 136, 40, 0.3);
  border-radius: 10px;
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.35s ease;
  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.06);
}

.mission-pill-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold);
  box-shadow: 0 14px 35px rgba(184, 136, 40, 0.18);
  background: #FFFFFF;
}

.mission-pill-card .pill-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #B88828;
  background: rgba(184, 136, 40, 0.12);
  border: 1px solid rgba(184, 136, 40, 0.3);
  padding: 0.2rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 1.2rem;
}

.mission-pill-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #1E0A38;
  margin-bottom: 0.6rem;
}

.mission-pill-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #2D1845;
}

/* Sacred Motto Ribbon */
.about-motto-ribbon {
  background: linear-gradient(135deg, #1E0A38 0%, #3B1B60 100%);
  color: #F5CE68;
  border: 1.5px solid #F5CE68;
  border-radius: 35px;
  padding: 1.4rem 2.5rem;
  text-align: center;
  font-family: var(--font-display-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-style: italic;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 30px rgba(30, 10, 56, 0.3);
}

.about-motto-ribbon span {
  font-weight: 600;
  color: #FFFFFF;
}

@media (max-width: 1024px) {
  .lineage-badge-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-dual-grid { grid-template-columns: 1fr; }
  .mission-pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .mission-pillars-grid { grid-template-columns: 1fr; }
  .masters-chips-grid { justify-content: center; }
}

/* ==========================================================================
   4. THE JOURNEY WITHIN (BENEFITS / 5 PILLARS)
   ========================================================================== */
.practice-section {
  background: transparent;
  color: var(--color-text-light);
  padding: var(--pad-section) 0;
}

.practice-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem auto;
}

.practice-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  color: #1A0732;
  margin-bottom: 1rem;
}

.header-divider-ornament {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.divider-line {
  width: 48px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.4;
}

.divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

.practice-subtitle {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-mauve);
  font-weight: 400;
}

.practice-cards-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.8rem;
  align-items: stretch;
}

/* Card Panel Background: Aubergine (#3B2352) with Gold Borders */
.practice-card-lux {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(184, 136, 40, 0.35);
  border-radius: 8px;
  padding: 2.4rem 1.6rem 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: 0 14px 38px rgba(147, 51, 234, 0.08), 0 4px 15px rgba(184, 136, 40, 0.12);
  transition: all 0.4s var(--transition-natural);
}

.practice-card-lux:hover {
  transform: translateY(-8px);
  background: #FFFFFF;
  border-color: var(--color-gold);
  box-shadow: 0 18px 45px rgba(147, 51, 234, 0.18), 0 0 25px rgba(184, 136, 40, 0.25);
}

.practice-card-num-badge {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid var(--gold-30);
  padding: 0.2rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 1.6rem;
}

/* Icon circles background */
.practice-card-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-medium-purple);
  border: 1px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  transition: all 0.35s ease;
}

.practice-card-lux:hover .practice-card-icon-wrap {
  background: var(--color-gold);
}

/* Icon strokes & fills */
.practice-svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-text-light);
  transition: stroke 0.35s ease;
}

.practice-svg path {
  fill: var(--color-gold);
}

.practice-card-lux:hover .practice-svg path {
  fill: var(--color-near-black);
}

/* Icon labels */
.practice-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-bottom: 0.8rem;
}

.practice-card-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-75);
}

/* ==========================================================================
   5. THE TEACHER — GURU SARKAR
   ========================================================================== */
.teacher-section {
  background: transparent;
  color: var(--color-text-light);
  padding: var(--pad-section) 0;
  position: relative;
}

.teacher-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.8rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.teacher-image-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(212, 175, 55, 0.16);
  background: radial-gradient(circle at 50% 30%, rgba(38, 14, 65, 0.5), rgba(10, 4, 18, 0.96));
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.teacher-image-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 45px rgba(212, 175, 55, 0.25);
}

.teacher-image-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 682 / 1024;
  max-height: 840px;
  object-fit: contain;
  object-position: center center;
  display: block;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
  transition: transform 0.8s var(--transition-natural);
}

.teacher-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.08;
  color: #1A0732;
  margin-bottom: 0.5rem;
}

.teacher-subtitle {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 2.2rem;
}

.teacher-bio {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-75);
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.teacher-bio .bio-para {
  margin-bottom: 1.35rem;
}

.teacher-bio .bio-para:last-child {
  margin-bottom: 0;
}

.bio-quote-highlight {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  margin: 0.65rem 0;
  background: rgba(212, 175, 55, 0.08);
  border-left: 2px solid var(--color-gold);
  color: var(--color-gold-light);
  font-size: 0.95rem;
  line-height: 1.7;
  border-radius: 0 4px 4px 0;
}

.teacher-pullquote {
  border-left: 2px solid var(--color-gold);
  padding-left: 1.8rem;
  margin-bottom: 2.5rem;
}

.teacher-quote-text {
  font-family: var(--font-display-serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-light);
}

.teacher-credentials-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
}

.credential-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--text-75);
}

.credential-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ==========================================================================
   6. OUR GUIDING PRINCIPLES
   ========================================================================== */
/* ==========================================================================
   6. OUR GUIDING PRINCIPLES (ARTWORK & INNOVATIVE ALIGNMENT)
   ========================================================================== */
.principles-section {
  background: transparent;
  color: var(--color-text-light);
  padding: var(--pad-section) 0;
  position: relative;
  overflow: hidden;
}

.principles-container {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 4.5rem;
  align-items: center;
}

/* --- Left Column: Clean Direct Sketch Portrait Artwork (No Mandala, No Heavy Frame) --- */
.principles-image-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.principles-clean-sketch-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.principles-clean-sketch-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.8);
}

.principles-pure-sketch {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  filter: contrast(1.05) brightness(0.98);
}

/* --- Right Column: Innovative Principles Stack --- */
.principles-content-col {
  position: relative;
}

.principles-intro {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-mauve);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  max-width: 580px;
}

.principles-innovative-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.principles-thread-line {
  position: absolute;
  left: 28px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold) 0%, var(--color-medium-purple) 50%, var(--color-aubergine) 100%);
  opacity: 0.35;
  z-index: 1;
}

/* Innovative Principle Item Card */
.principle-item-lux {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(184, 136, 40, 0.3);
  border-radius: 8px;
  padding: 1.25rem 1.6rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 25px rgba(147, 51, 234, 0.08);
}

.principle-item-lux:hover {
  background: #FFFFFF;
  border-color: var(--color-gold);
  transform: translateX(12px);
  box-shadow: 0 12px 35px rgba(147, 51, 234, 0.18);
}

.principle-num-badge {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--color-gold);
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(184, 136, 40, 0.35);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.principle-info {
  display: flex;
  flex-direction: column;
}

.principle-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.principle-sanskrit {
  font-family: var(--font-display-serif);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-gold);
}

.principle-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-90);
  font-weight: 400;
}

@media (max-width: 992px) {
  .principles-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
}

/* ==========================================================================
   7. SANCTUARY GROUNDS
   ========================================================================== */
.sanctuary-section {
  background: transparent;
  color: var(--color-text-light);
  padding: var(--pad-section) 0;
}

.sanctuary-header {
  margin-bottom: 2.5rem;
}

.sanctuary-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: #1A0732;
}

.sanctuary-gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(201, 162, 75, 0.2);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: none;
  transition: transform 0.8s ease;
}

.gallery-card:hover img {
  transform: scale(1.03);
}

.gallery-caption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #241235;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--color-gold);
  padding: 0.4rem 0.9rem;
  backdrop-filter: blur(8px);
}

.sanctuary-gallery-row2 {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.8rem;
}

/* ==========================================================================
   8. TESTIMONIAL / SIGNATURE QUOTE BANNER
   ========================================================================== */
.quote-section {
  position: relative;
  background: linear-gradient(135deg, #EBE0FF 0%, #FAF4E6 50%, #F3E8FF 100%);
  color: var(--color-text-light);
  padding: clamp(90px, 11vw, 150px) 0;
  min-height: 700px;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(184, 136, 40, 0.25);
  border-bottom: 1px solid rgba(184, 136, 40, 0.25);
}

.quote-mandala-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(660px, 88vw);
  height: min(660px, 88vw);
  aspect-ratio: 1 / 1;
  opacity: 0.75;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-sizing: border-box;
}

.mandala-watermark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.15) sepia(1) hue-rotate(245deg) saturate(3.5) drop-shadow(0 4px 15px rgba(26, 7, 50, 0.12));
}

.quote-content {
  position: relative;
  z-index: 5;
  max-width: 920px;
  margin: 0 auto;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(26, 7, 50, 0.05);
}

.quote-text {
  font-family: var(--font-display-serif);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: #1A0732;
  text-shadow: none;
  margin-bottom: 2rem;
}

.quote-attribution {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8C6219;
}

/* ==========================================================================
   9. JOIN OUR COMMUNITY / NEWSLETTER / ENQUIRY
   ========================================================================== */
.enquiry-section {
  background: transparent;
  color: var(--color-text-light);
  padding: var(--pad-section) 0;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5.5rem;
  align-items: start;
}

.enquiry-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  color: #1A0732;
  margin-bottom: 1.2rem;
}

.enquiry-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-75);
  font-weight: 400;
  margin-bottom: 2.5rem;
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  padding: 3rem;
  border-radius: 8px;
  border: 1px solid var(--gold-30);
  box-shadow: 0 15px 40px rgba(92, 61, 116, 0.12);
}

.form-field-group {
  position: relative;
}

.form-field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.form-underline-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(201, 162, 75, 0.3);
  padding: 0.75rem 0;
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-underline-input:focus {
  border-bottom-color: var(--color-gold);
}

.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
/* ==========================================================================
   SACRED TEACHINGS DYNAMIC HUB (3 MASTER CTAs)
   ========================================================================== */
.teachings-hub-section {
  padding: var(--pad-section) 0;
  background: transparent;
}

.teachings-header-centered {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 3rem auto;
}

.teachings-main-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: #1A0732;
  margin-bottom: 0.8rem;
}

.teachings-sub-text {
  font-size: 1.08rem;
  color: #2D1845;
  margin-bottom: 2.2rem;
}

/* Master CTA Buttons Container */
.master-cta-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  padding: 0.6rem 0.8rem;
  border-radius: 50px;
  border: 1.5px solid rgba(184, 136, 40, 0.3);
  box-shadow: 0 10px 30px rgba(30, 10, 56, 0.08);
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

.master-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1.4rem;
  border-radius: 35px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4A2B68;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex: 1;
  white-space: nowrap;
}

.master-cta-btn .cta-svg {
  width: 20px;
  height: 20px;
  stroke: #B88828;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.master-cta-btn:hover {
  color: #1A0732;
  background: rgba(184, 136, 40, 0.1);
  transform: translateY(-2px);
}

.master-cta-btn.active {
  background: linear-gradient(135deg, #1A0732 0%, #3B1B68 100%);
  color: #F7E9B8;
  border-color: #B88828;
  box-shadow: 0 8px 25px rgba(26, 7, 50, 0.3);
}

.master-cta-btn.active .cta-svg {
  stroke: #F7E9B8;
  transform: scale(1.15);
}

/* Master Tab Panels */
.master-tab-panel {
  display: none;
}

.master-tab-panel.active {
  display: block;
  animation: fadeInCard 0.4s ease forwards;
}

.sub-filter-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.sub-filter-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #B88828;
  text-transform: uppercase;
}

.pillars-container-stack {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.pillar-card-lux {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(15px);
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 2.2rem 2.6rem;
  box-shadow: 0 10px 30px rgba(30, 10, 56, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.pillar-card-lux:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 14px 35px rgba(184, 136, 40, 0.15);
}

.pillar-card-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(184, 136, 40, 0.3);
}

.pillar-num-badge {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #B88828;
  background: rgba(184, 136, 40, 0.12);
  border: 1px solid rgba(184, 136, 40, 0.35);
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
}

.pillar-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #1A0732;
}

.pillar-desc-p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: #1E0A38;
  font-weight: 500;
}

.rule-desc-text {
  font-size: 1.02rem;
  line-height: 1.78;
  color: #1E0A38;
  font-weight: 500;
}

/* ==========================================================================
   5. THE 21 RULES SECTION
   ========================================================================== */
.rules-section {
  background: transparent;
  padding: var(--pad-section) 0;
}

.rules-header-centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.8rem auto;
}

.rules-main-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: #1A0732;
  margin-bottom: 0.8rem;
}

.rules-sub-text {
  font-size: 1.05rem;
  color: #2D1845;
  margin-bottom: 1.8rem;
}

.rules-filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.rule-filter-btn {
  background: #FFFFFF;
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  color: #1A0732;
  padding: 0.5rem 1.3rem;
  border-radius: 25px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rule-filter-btn:hover,
.rule-filter-btn.active {
  background: #1A0732;
  color: #F5CE68;
  border-color: #1A0732;
  box-shadow: 0 6px 20px rgba(26, 7, 50, 0.2);
}

.rules-grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.rules-grid-container .rule-card-lux {
  flex: 1 1 calc(50% - 0.9rem);
  min-width: 280px;
}

.rule-card-lux {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(15px);
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(30, 10, 56, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

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

.rule-card-lux.filter-visible {
  display: flex !important;
  animation: fadeInCard 0.35s ease forwards;
}

.rule-card-lux.filter-hidden {
  display: none !important;
}

.rule-card-lux:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 14px 35px rgba(184, 136, 40, 0.15);
}

.rule-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed rgba(184, 136, 40, 0.3);
}

.rule-badge {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: #B88828;
  background: rgba(184, 136, 40, 0.12);
  border: 1px solid rgba(184, 136, 40, 0.35);
  padding: 0.25rem 0.8rem;
  border-radius: 15px;
  white-space: nowrap;
}

.rule-card-header h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1A0732;
  line-height: 1.35;
}

.rule-tel-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #B88828;
}

.rule-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.rule-tel, .rule-eng {
  font-size: 0.92rem;
  line-height: 1.68;
  color: #2D1845;
}

.rule-tel strong, .rule-eng strong {
  color: #B88828;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   6. PRACTICAL KUMBHAKA PRACTICE SEQUENCES SECTION
   ========================================================================== */
.sequence-section {
  background: transparent;
  padding: var(--pad-section) 0;
}

.sequence-header-centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.8rem auto;
}

.sequence-main-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: #1A0732;
  margin-bottom: 0.8rem;
}

.sequence-sub-text {
  font-size: 1.05rem;
  color: #2D1845;
}

.sequence-stepper-wrapper {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(184, 136, 40, 0.35);
  border-radius: 12px;
  padding: 2.8rem;
  box-shadow: 0 12px 35px rgba(30, 10, 56, 0.08);
}

.sequence-tabs-nav {
  display: flex;
  gap: 0.8rem;
  border-bottom: 1.5px solid rgba(184, 136, 40, 0.3);
  padding-bottom: 1.2rem;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
}

.seq-tab-btn {
  background: transparent;
  border: 1px solid rgba(184, 136, 40, 0.3);
  color: #1A0732;
  padding: 0.6rem 1.4rem;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.seq-tab-btn:hover,
.seq-tab-btn.active {
  background: #1A0732;
  color: #F5CE68;
  border-color: #1A0732;
  box-shadow: 0 4px 15px rgba(26, 7, 50, 0.2);
}

.seq-panel {
  display: none;
}

.seq-panel.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.seq-panel-header {
  margin-bottom: 1.8rem;
}

.seq-step-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #B88828;
  background: rgba(184, 136, 40, 0.12);
  border: 1px solid rgba(184, 136, 40, 0.3);
  padding: 0.3rem 0.9rem;
  border-radius: 15px;
  margin-bottom: 0.8rem;
}

.seq-panel-header h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: #1A0732;
}

.seq-formula-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}

.formula-box {
  background: #FAF6EE;
  border: 1.5px solid var(--color-gold);
  border-radius: 10px;
  padding: 1.8rem;
  text-align: center;
}

.formula-box.highlight {
  background: linear-gradient(135deg, #1A0732 0%, #3B1B60 100%);
  color: #FFFFFF;
  border-color: #F5CE68;
}

.formula-box .box-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: #B88828;
  display: block;
  margin-bottom: 0.6rem;
}

.formula-box.highlight .box-num {
  color: #F5CE68;
}

.formula-box p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.seq-desc-note {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #2D1845;
}

.seq-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.seq-steps-list li {
  background: #FAF8FD;
  border: 1px solid rgba(184, 136, 40, 0.25);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  font-size: 0.98rem;
  color: #2D1845;
}

.seq-steps-list li strong {
  color: #1A0732;
}

.seq-content-box {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #2D1845;
}

.highlight-quote {
  background: #FAF4E6;
  border-left: 4px solid #B88828;
  padding: 1.2rem 1.6rem;
  font-style: italic;
  font-weight: 500;
  color: #1A0732;
  border-radius: 0 8px 8px 0;
}

.benediction-box {
  background: linear-gradient(135deg, #1A0732 0%, #3B1B60 100%);
  color: #F5CE68;
  border: 1.5px solid #F5CE68;
  border-radius: 12px;
  padding: 2.2rem;
  text-align: center;
  margin-top: 1rem;
  box-shadow: 0 10px 30px rgba(26, 7, 50, 0.25);
}

.benediction-box h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: #FFFFFF;
  margin-bottom: 0.8rem;
}

.sanskrit-prayer {
  font-family: var(--font-display-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: #F5CE68;
  margin-bottom: 0.4rem;
}

.english-prayer {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.benediction-box .translation {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #E2D5F0;
  display: block;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .pillar-body-grid { grid-template-columns: 1fr; }
  .rules-grid-container { flex-direction: column; }
  .rules-grid-container .rule-card-lux { flex: 1 1 100%; min-width: unset; }
  .seq-formula-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. SITE FOOTER — Royal Luxury Alignment & Harmonious Aesthetics
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: #FAF6FD;
  background-image: 
    radial-gradient(at 50% 0%, rgba(240, 222, 255, 0.85) 0px, transparent 65%),
    linear-gradient(180deg, #FAF6FD 0%, #F3EAFB 100%);
  color: #1E0A38;
  padding-top: 0;
  padding-bottom: 2.8rem;
  border-top: 1px solid rgba(184, 136, 40, 0.35);
  overflow: hidden;
}

/* Top Ornamental Lotus Divider */
.footer-top-ornament {
  padding: 2.2rem 0 3.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-top-ornament .emblem-ornament {
  max-width: 540px;
  margin: 0 auto;
}

/* Luxury 4-Column Grid */
.footer-luxury-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1fr 1.3fr;
  gap: clamp(2rem, 3.8vw, 4.5rem);
  margin-bottom: 3.8rem;
  align-items: start;
}

/* Col 1: Brand */
.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-brand-logo-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(184, 136, 40, 0.3);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(184, 136, 40, 0.12);
}

.footer-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.footer-brand-title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 800;
  color: #1E0A38;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.2;
}

.footer-brand-subtitle {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-brand-desc {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #2D1845;
  font-weight: 450;
  margin: 0;
}

.footer-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(184, 136, 40, 0.08);
  border: 1px solid rgba(184, 136, 40, 0.25);
  border-radius: 20px;
  width: fit-content;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1E0A38;
}

.footer-loc-icon {
  width: 15px;
  height: 15px;
  color: var(--color-gold);
  flex-shrink: 0;
}

/* Col 2 & 3: Links */
.footer-col-links {
  display: flex;
  flex-direction: column;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.4rem;
  position: relative;
  padding-bottom: 0.4rem;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: #1E0A38;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-link-item .link-bullet {
  font-size: 0.65rem;
  color: var(--color-gold);
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.footer-link-item:hover {
  color: var(--color-gold);
  transform: translateX(4px);
}

.footer-link-item:hover .link-bullet {
  opacity: 1;
  transform: scale(1.3);
}

/* Col 4: Newsletter */
.footer-col-newsletter {
  display: flex;
  flex-direction: column;
}

.footer-sub-prompt {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #2D1845;
  margin-bottom: 1.1rem;
  font-weight: 450;
}

.footer-subscribe-form {
  margin-bottom: 1.4rem;
  width: 100%;
}

.footer-input-pill-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid rgba(184, 136, 40, 0.4);
  border-radius: 30px;
  padding: 4px;
  box-shadow: 0 4px 18px rgba(184, 136, 40, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-input-pill-wrap:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 4px 22px rgba(184, 136, 40, 0.22);
}

.footer-email-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: #1E0A38;
  outline: none;
  min-width: 0;
}

.footer-email-input::placeholder {
  color: rgba(30, 10, 56, 0.5);
}

.footer-sub-btn {
  padding: 0.65rem 1.3rem;
  background: linear-gradient(135deg, #FFEAB5 0%, #D4A359 50%, #B88828 100%);
  border: none;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1A0732;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(184, 136, 40, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.footer-sub-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(184, 136, 40, 0.45);
}

/* Social Rail */
.footer-social-rail {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.social-circle-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(184, 136, 40, 0.35);
  color: #1E0A38;
  box-shadow: 0 2px 8px rgba(184, 136, 40, 0.1);
  transition: all 0.25s ease;
  text-decoration: none;
}

.social-circle-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: stroke 0.25s ease;
}

.social-circle-icon:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(184, 136, 40, 0.3);
}

/* Symmetrical Bottom Row */
.footer-bottom-row {
  border-top: 1px solid rgba(184, 136, 40, 0.25);
  padding-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: #1E0A38;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.footer-bottom-divider-dot {
  color: var(--color-gold);
  font-size: 0.7rem;
  opacity: 0.8;
}

.footer-tradition-text {
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

/* ==========================================================================
   HAMBURGER BUTTON — hidden on desktop
   ========================================================================== */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  background: transparent;
  border: 1.5px solid rgba(184, 136, 40, 0.45);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.nav-hamburger:hover {
  border-color: var(--color-gold);
  background: rgba(184, 136, 40, 0.08);
}

.nav-hamburger.active {
  background: rgba(184, 136, 40, 0.12);
  border-color: var(--color-gold);
}

.ham-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-light);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

.nav-hamburger.active .ham-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.active .ham-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.active .ham-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   MOBILE NAV DRAWER
   ========================================================================== */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 20, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-overlay.visible {
  display: block;
  opacity: 1;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(88vw, 340px);
  height: 100dvh;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid rgba(184, 136, 40, 0.3);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) 0;
  -webkit-overflow-scrolling: touch;
}

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

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  padding: 5.5rem 2rem 3rem 2rem;
  gap: 0.5rem;
  min-height: 100%;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2.5rem;
}

.mobile-nav-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-light);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(184, 136, 40, 0.15);
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: var(--color-gold);
  padding-left: 0.5rem;
}

.mobile-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: var(--color-gold);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-top: auto;
  transition: filter 0.25s ease;
}

.mobile-nav-cta:hover {
  filter: brightness(1.1);
}

/* ==========================================================================
   RESPONSIVE DESIGN — COMPREHENSIVE CROSS-DEVICE SYSTEM
   ========================================================================== */

/* ── 1440px+ Wide Desktop ── */
@media (min-width: 1440px) {
  .container { padding: 0 5rem; }
}

/* ── 1280px Laptop ── */
@media (max-width: 1280px) {
  .container { padding: 0 3rem; }
  .nav-container { padding: 0 2.5rem; }
  .footer-luxury-grid { gap: 3rem; }
}

/* ── 1200px ── */
@media (max-width: 1200px) {
  .practice-cards-container { grid-template-columns: repeat(3, 1fr); }
}

/* ── 1024px Tablet Landscape / iPad Pro ── */
@media (max-width: 1024px) {
  .container { padding: 0 2rem; }
  .nav-container { padding: 0 1.5rem; }
  .teacher-grid, .enquiry-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .teacher-image-wrapper { position: relative; top: 0; max-width: 480px; margin: 0 auto; width: 100%; }
  .principles-timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .footer-luxury-grid { grid-template-columns: 1fr 1fr; gap: 2.8rem; }
  .pillar-body-grid { grid-template-columns: 1fr; }
  .rules-grid-container { flex-direction: column; }
  .rules-grid-container .rule-card-lux { flex: 1 1 100%; min-width: unset; }
  .seq-formula-grid { grid-template-columns: 1fr; }
}

/* ── 992px Tablet ── */
@media (max-width: 992px) {
  .practice-cards-container { grid-template-columns: repeat(2, 1fr); }
  :root { --pad-section: clamp(40px, 5vw, 65px); }
}

/* ── 768px Tablet Portrait / Large Phone ── */
@media (max-width: 768px) {
  /* ── NAV: switch to hamburger mode ── */
  .nav-container {
    padding: 0 1rem;
    height: 64px;
    gap: 0.6rem;
    overflow: hidden;
  }
  .nav-brand { gap: 0.5rem; flex-shrink: 1; min-width: 0; }
  .nav-brand-text { overflow: hidden; min-width: 0; }
  .nav-brand-title {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-brand-sub { display: none; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; flex-shrink: 0; }
  .nav-join-btn { display: none; }
  .nav-right-wrap { gap: 0.5rem; flex-shrink: 0; }
  .lang-switch-wrap { padding: 0.15rem 0.35rem; gap: 0.1rem; }
  .lang-btn { padding: 0.12rem 0.32rem; font-size: 0.7rem; }
  .lang-divider { font-size: 0.65rem; }

  /* ── HERO ── */
  .hero-section { min-height: 100svh; padding-top: calc(var(--nav-height, 64px) + 3.2rem); padding-bottom: 3.5rem; }
  .hero-content { padding: 0 1.2rem; }
  .hero-brand-emblem .emblem-line { font-size: clamp(2rem, 10vw, 2.8rem); }
  .hero-tagline-script { font-size: 1.4rem; }
  .hero-subtext-body { font-size: 0.95rem; }
  .hero-social-rail { display: none; }
  .hero-cta-wrap { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .btn-hero-innovative, .btn-hero-outline { width: 100%; justify-content: center; padding: 1rem 1.5rem; }

  /* ── TAB BAR: stack buttons on mobile ── */
  .master-cta-nav {
    flex-direction: column;
    border-radius: 16px;
    gap: 0.4rem;
    padding: 0.5rem;
  }
  .master-cta-btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 0.8rem 1.1rem;
    font-size: 0.85rem;
    white-space: normal;
  }
  .master-cta-btn.active { border-radius: 10px; }

  /* ── SECTIONS ── */
  .container { padding: 0 1.2rem; }
  :root { --pad-section: clamp(36px, 8vw, 55px); }
  .practice-cards-container { grid-template-columns: 1fr; }
  .principles-timeline-grid { grid-template-columns: 1fr; }
  .sanctuary-gallery-grid, .sanctuary-gallery-row2 { grid-template-columns: 1fr; }
  .form-row-grid { grid-template-columns: 1fr; }

  /* ── FOOTER ── */
  .footer-luxury-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom-row { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-bottom-divider-dot { display: none; }
}


/* ── 600px Large Phone ── */
@media (max-width: 600px) {
  .nav-brand-sub { display: none; }
  .nav-brand-title { font-size: 0.78rem; }

  /* Hero */
  .hero-content { padding: 0 1rem 4.5rem 1rem; }

  /* Triad — stack vertically, hide arrow connectors */
  .science-triad-graphic { flex-direction: column; gap: 1rem; }
  .triad-connector { display: none; }

  /* Tabs & Filter Pills */
  .master-tab-bar { gap: 0.5rem; flex-wrap: wrap; }
  .master-cta-btn { font-size: 0.7rem; padding: 0.6rem 1rem; }
  .rule-filter-bar { flex-wrap: wrap; gap: 0.5rem; }
  .rule-filter-btn { font-size: 0.68rem; padding: 0.45rem 0.9rem; }
  .seq-tab-bar { flex-wrap: wrap; gap: 0.5rem; }
  .seq-tab-btn { font-size: 0.7rem; padding: 0.55rem 1rem; }
}

/* ── 480px Standard Android Phone ── */
@media (max-width: 480px) {
  .container { padding: 0 0.9rem; }
  .nav-container { padding: 0 0.9rem; }

  /* Hero */
  .hero-brand-emblem .emblem-line { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .hero-tagline-script { font-size: 1.2rem; }
  .hero-subtext-body { font-size: 0.9rem; }

  /* Cards */
  .rule-card-lux { padding: 1.2rem; }
  .pillar-header { padding: 1.2rem; }
  .pillar-body { padding: 1.2rem; }

  /* Section headings */
  .about-main-title,
  .teachings-main-title,
  .principles-title,
  .enquiry-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}

/* ── 390px iPhone 15 / Pixel 8 ── */
@media (max-width: 390px) {
  .container { padding: 0 0.8rem; }
  .nav-container { padding: 0 0.8rem; height: 62px; }
  .nav-brand-logo { width: 38px; height: 38px; }
  .brand-logo-img { height: 36px; max-height: 36px; max-width: 38px; }
  .nav-brand-title { font-size: 0.7rem; letter-spacing: 0.04em; }

  /* Compact language switcher on small phones */
  .lang-switch-wrap { gap: 0; padding: 0.12rem 0.3rem; }
  .lang-btn { padding: 0.1rem 0.28rem; font-size: 0.65rem; }
  .lang-divider { font-size: 0.6rem; }

  /* Hero */
  .hero-brand-emblem .emblem-line { font-size: clamp(1.5rem, 8.5vw, 2rem); }
  .hero-tagline-script { font-size: 1.1rem; }
  .hero-subtext-body { font-size: 0.85rem; }
  .btn-hero-innovative, .btn-hero-outline { font-size: 0.7rem; padding: 0.85rem 1.2rem; }

  /* Footer */
  .footer-subscribe-form { gap: 0; }

  /* Prevent any horizontal overflow */
  .nav-right-wrap { gap: 0.5rem; }
}

/* ── 360px Small Android (Galaxy A series) ── */
@media (max-width: 360px) {
  .container { padding: 0 0.7rem; }
  .nav-container { padding: 0 0.7rem; }
  .nav-brand-title { font-size: 0.72rem; letter-spacing: 0.04em; }
  .hero-brand-emblem .emblem-line { font-size: clamp(1.35rem, 8vw, 1.8rem); }
}

/* ── iOS Safe Area Support (Notch / Dynamic Island / Home Indicator) ── */
@supports (padding: env(safe-area-inset-top)) {
  .site-nav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .hero-content {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
  @media (max-width: 768px) {
    .hero-content {
      padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }
  }
}

/* ── Landscape Mode on Phones ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section { min-height: 100vw; }
  .hero-content { padding-bottom: 2.5rem; }
  .hero-brand-emblem .emblem-line { font-size: clamp(1.2rem, 6vw, 2rem); }
  .nav-container { height: 56px; }
}

/* ── Reduced Motion Accessibility ── */
@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;
  }
  .mobile-nav-drawer, .mobile-nav-overlay { transition: none; }
}

/* ── High DPI Screens (Retina / 4K) ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-bg-image { image-rendering: -webkit-optimize-contrast; }
}



/* Luxury Toast Notification */
.lux-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999999;
  background: rgba(26, 7, 50, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #F7E9B8;
  border: 1px solid rgba(212, 160, 23, 0.4);
  padding: 1.1rem 1.8rem;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 160, 23, 0.2);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.lux-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lux-toast-icon {
  font-size: 1.3rem;
  color: var(--color-gold);
}

/* Smooth Tab Panel Animations */
@keyframes fadeInUpSmooth {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.master-tab-panel.active {
  display: block;
  animation: fadeInUpSmooth 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.seq-panel.active {
  display: block;
  animation: fadeInUpSmooth 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Touch action optimization for fast tapping */
button, .lang-btn, .master-cta-btn, .seq-tab-btn, .rule-filter-btn {
  touch-action: manipulation;
}

/* Hide Google Translate top banner frame & prevent body shift */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe[name=":1.container"],
iframe[id=":1.container"],
.goog-te-banner,
.VIpgJd-yDnbfe-bN9bZe,
.VIpgJd-yDnbfe-bN9bZe-OHL4nd,
.VIpgJd-ZGain-G2fdfe-widget {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  max-height: 0 !important;
  pointer-events: none !important;
}

html, body {
  top: 0px !important;
  position: static !important;
  margin-top: 0px !important;
}

/* Suppress Google Translate tooltips & popups */
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-spinner-pos,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

font, .goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}