/* =============================================================
   OJCP PREMIUM REDESIGN
   Design Direction: Premium, Government-Grade, Modern, Trustworthy
   Color Palette: Blue #0A4FB7 / Navy #081423 / Yellow #F6C21A
   ============================================================= */

/* ==========================================
   1. DESIGN TOKENS (overrides existing)
   ========================================== */
:root {
  /* Core brand palette */
  --pr-blue: #0A4FB7;
  --pr-blue-royal: #1659D8;
  --pr-blue-deep: #083DAA;
  --pr-navy: #081423;
  --pr-navy-2: #0D1F38;
  --pr-yellow: #F6C21A;
  --pr-gold: #D8A21D;
  --pr-white: #FFFFFF;
  --pr-bg-light: #F8FAFD;
  --pr-bg-alt: #EEF4FF;
  --pr-text-dark: #172033;
  --pr-text-muted: #5D6678;
  --pr-border: rgba(10, 79, 183, 0.12);
  --pr-border-strong: rgba(10, 79, 183, 0.22);
  --pr-blue-rgb: 10, 79, 183;
  --pr-navy-rgb: 8, 20, 35;
  --pr-yellow-rgb: 246, 194, 26;

  /* Shadows */
  --pr-shadow-sm: 0 2px 12px rgba(8, 20, 35, 0.04);
  --pr-shadow-card: 0 8px 32px rgba(8, 20, 35, 0.05), 0 2px 8px rgba(8, 20, 35, 0.03);
  --pr-shadow-card-hover: 0 20px 48px rgba(8, 20, 35, 0.12), 0 4px 16px rgba(8, 20, 35, 0.06);
  --pr-shadow-nav: 0 4px 24px rgba(8, 20, 35, 0.08), 0 1px 4px rgba(8, 20, 35, 0.04);

  /* Typography */
  --pr-font-display: 'Playfair Display', Georgia, serif;
  --pr-font-sans: 'DM Sans', system-ui, sans-serif;

  /* Radii */
  --pr-r-sm: 8px;
  --pr-r-md: 14px;
  --pr-r-lg: 20px;
  --pr-r-xl: 24px;
  --pr-r-pill: 100px;

  /* Section spacing */
  --pr-section-pad: clamp(24px, 3vw, 32px);
}


/* Standard clean sans-serif ampersand style across entire site */
html body .amp,
html body .org-amp,
body .amp,
body .org-amp,
.amp,
.org-amp,
span.amp,
span.org-amp {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* ==========================================
   2. BASE RESETS & BODY
   ========================================== */
html {
  background: var(--pr-navy) !important;
  scroll-behavior: smooth;
}

body {
  font-family: var(--pr-font-sans) !important;
  color: var(--pr-text-dark) !important;
  background: var(--pr-white) !important;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================
   3. SKIP LINK — permanently hidden
   ========================================== */
.skip-link,
.skip-link:focus {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  top: -9999px !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   4. PREMIUM FLOATING NAVIGATION
   ========================================== */
body .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 900 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--pr-border) !important;
  box-shadow: var(--pr-shadow-nav) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 72px !important;
  transition: box-shadow 0.3s ease, background 0.3s ease !important;
}

body .site-header.scrolled,
body .site-header:has(+ *:not(.ticker-wrap)) {
  box-shadow: 0 6px 32px rgba(8, 20, 35, 0.12) !important;
}

body .header-inner {
  display: grid !important;
  grid-template-columns: minmax(220px, auto) 1fr minmax(200px, auto) !important;
  gap: clamp(16px, 2.5vw, 32px) !important;
  align-items: center !important;
  min-height: 72px !important;
}

/* Logo redesign */
body .logo-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

body .logo-emblem {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(8, 20, 35, 0.08) !important;
  box-shadow: 0 2px 8px rgba(8, 20, 35, 0.06) !important;
  display: block !important;
}

body .logo-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

body .logo-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--pr-text-dark) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

body .logo-tagline {
  font-size: 10px !important;
  color: var(--pr-text-muted) !important;
  font-weight: 500 !important;
}

/* Navigation links */
body .main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

body .nav-link {
  position: relative !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--pr-text-dark) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  transition: color 0.2s, background 0.2s !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 14px !important;
  right: 14px !important;
  height: 2px !important;
  background: var(--pr-blue) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transition: transform 0.25s ease !important;
}

body .nav-link:hover {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.06) !important;
}

body .nav-link.active {
  color: var(--pr-blue) !important;
  font-weight: 600 !important;
}

body .nav-link.active::after {
  transform: scaleX(1) !important;
}

/* Header CTAs */
body .header-ctas {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* Global button resets */
body .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--pr-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  border-radius: var(--pr-r-pill) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease !important;
  white-space: nowrap !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(10, 79, 183, 0.15) !important;
  position: relative !important;
  will-change: transform !important;
}

/* Primary = Yellow */
body .btn-primary,
body .btn.btn-primary {
  background: var(--pr-yellow) !important;
  color: var(--pr-text-dark) !important;
  border: 2px solid var(--pr-yellow) !important;
  box-shadow: 0 4px 14px rgba(246, 194, 26, 0.3) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
}

body .btn-primary:hover,
body .btn.btn-primary:hover {
  background: var(--pr-gold) !important;
  border-color: var(--pr-gold) !important;
  box-shadow: 0 6px 18px rgba(216, 162, 29, 0.35) !important;
  transform: translateY(-2px) !important;
  color: var(--pr-text-dark) !important;
}

body .btn-primary:active,
body .btn.btn-primary:active {
  transform: translateY(1px) scale(0.96) !important;
  box-shadow: 0 2px 8px rgba(216, 162, 29, 0.25) !important;
}

/* Outlined = Blue */
body .btn-outline,
body .btn.btn-outline {
  background: #fff !important;
  color: var(--pr-blue) !important;
  border: 2px solid var(--pr-blue) !important;
  box-shadow: 0 2px 8px rgba(10, 79, 183, 0.08) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
}

body .btn-outline:hover,
body .btn.btn-outline:hover {
  background: var(--pr-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(10, 79, 183, 0.28) !important;
  transform: translateY(-2px) !important;
}

body .btn-outline:active,
body .btn.btn-outline:active {
  transform: translateY(1px) scale(0.96) !important;
  background: rgba(10, 79, 183, 0.1) !important;
}

body .btn-outline-dark,
body .btn.btn-outline-dark {
  background: transparent !important;
  color: var(--pr-blue) !important;
  border: 2px solid var(--pr-blue) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
}

body .btn-outline-dark:hover {
  background: var(--pr-blue) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

body .btn-outline-dark:active {
  transform: translateY(1px) scale(0.96) !important;
}

/* Large button variant */
body .btn-lg {
  padding: 15px 32px !important;
  font-size: 15px !important;
  min-height: 54px !important;
}

/* Header CTA overrides */
body .header-ctas .btn-outline {
  min-height: 40px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  border-radius: var(--pr-r-pill) !important;
  border-width: 1.5px !important;
}

body .header-ctas .btn-primary {
  min-height: 40px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  border-radius: var(--pr-r-pill) !important;
}

/* ==========================================
   6. HERO SECTION – PREMIUM CAMPAIGN STYLE
   ========================================== */
body.has-hero .hero,
body .hero {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: var(--nav-h, 72px) !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #ffffff !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Light gradient background with soft blue transition */
body.has-hero .hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(ellipse 70% 80% at 78% 52%, rgba(10, 79, 183, 0.14) 0%, rgba(10, 79, 183, 0.05) 45%, transparent 75%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(246, 194, 26, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #F2F6FC 38%, #E5EFFB 72%, #DAE7F7 100%) !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}

/* Texture overlay */
body.has-hero .hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../images/selected/texture-odisha-stone-engraving.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.035 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}

.hero-bg-texture {
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(rgba(10, 79, 183, 0.05) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.has-hero .hero-inner {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 3vw, 40px) !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  min-height: calc(100vh - var(--nav-h, 72px)) !important;
  min-height: calc(100svh - var(--nav-h, 72px)) !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

body.has-hero .hero-content {
  width: 100% !important;
  max-width: 640px !important;
  padding-top: 24px !important;
  padding-bottom: clamp(48px, 8vh, 96px) !important;
  padding-right: 16px !important;
  text-align: left !important;
  justify-self: start !important;
  align-self: center !important;
  margin-left: 0 !important;
  z-index: 3 !important;
}

/* Eyebrow */
body.has-hero .hero-content>.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pr-blue) !important;
  margin-bottom: 22px !important;
}

body.has-hero .hero-content>.eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 32px !important;
  height: 2px !important;
  background: var(--pr-yellow) !important;
  border-radius: 2px !important;
}

/* Hero headline */
body.has-hero .hero-headline,
body .hero-headline {
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-display) !important;
  font-size: clamp(42px, 4.8vw, 68px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
  max-width: none !important;
  margin-bottom: 10px !important;
}

/* Odia headline – yellow accent */
body.has-hero .hero-headline-odia {
  display: block !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  color: var(--pr-gold) !important;
  font-weight: 600 !important;
  margin: 12px 0 24px !important;
  text-shadow: none !important;
}

/* Hero body */
body.has-hero .hero-body,
body .hero-body {
  max-width: 560px !important;
  color: var(--pr-text-muted) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  text-shadow: none !important;
  margin-bottom: 36px !important;
}

body.has-hero .hero-body strong {
  color: var(--pr-navy) !important;
  font-weight: 700 !important;
}

/* CTAs */
body.has-hero .hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

body.has-hero .hero-ctas .btn {
  min-height: 52px !important;
  padding: 14px 30px !important;
  border-radius: var(--pr-r-pill) !important;
  font-size: 15px !important;
}

/* Portrait column on the right */
body.has-hero .hero-portrait-col {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: auto !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  align-self: center !important;
  z-index: 2 !important;
}

body.has-hero .hero-portrait-img {
  display: block !important;
  width: 100% !important;
  max-width: 380px !important;
  max-height: clamp(320px, 44vh, 420px) !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  margin: 0 auto !important;
  border: none !important;
  border-radius: 36px !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 95%) !important;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 95%) !important;
  pointer-events: auto !important;
}

.hero-portrait-light-aura {
  position: absolute !important;
  bottom: 5% !important;
  right: 5% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(220, 235, 255, 0.5) 45%, transparent 75%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ==========================================
   7. GLOBAL SECTION BACKGROUNDS
   ========================================== */

/* White sections */
body.has-hero .pledges-trio-section,
body.has-hero .three-fights-section,
body.has-hero .founder-section,
body.has-hero .pledges-grid-section {
  background: var(--pr-white) !important;
}

/* Light blue alt sections */
body.has-hero .stats-section,
body.has-hero .vision-section,
body.has-hero .final-cta-section {
  background: none !important;
}

/* Personas – light */
body.has-hero .personas-section {
  background: var(--pr-bg-light) !important;
}

/* Inclusion – deep navy */
body.has-hero .inclusion-section {
  background: var(--pr-navy) !important;
}

/* Override padding for all sections */
body main>section:not(.hero):not(.page-hero):not(.final-cta-section):not(.download-section):not(.alternating-section-group):not(.vision-closing-section) {
  padding-top: var(--pr-section-pad) !important;
  padding-bottom: var(--pr-section-pad) !important;
}

/* Dividers between sections */
body main>section+section::before,
body.about-page .about-hero-redesign+section::before,
body.join-page .join-hero-redesign+section::before,
body.newsroom-page .newsroom-hero-redesign+section::before,
body.vision-page .vision-hero-redesign+section::before,
body.has-hero .hero+section::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: transparent !important;
}

/* Reduced space between Hero section and Content section */
body main>section.hero+section,
body main>section.hero-mobile-only+section,
body main>section.vision-hero-redesign+section,
body main>section.about-hero-redesign+section,
body main>section.join-hero-redesign+section,
body main>section.newsroom-hero-redesign+section,
body main>section.contact-hero-redesign+section,
body.join-page main>#join-section,
body.newsroom-page main>.newsroom-gallery-section,
body.about-page main>.about-founder-section,
body.contact-page main>.contact-channel-section,
body.vision-page main>#feature-chapters,
body.vision-page main>.visions-feature-group,
body.legal-page main>.legal-hero+section,
body main>.page-hero+section,
body main>.legal-hero+section {
  padding-top: clamp(4px, 1vw, 12px) !important;
}

body.newsroom-page main>section .newsroom-flag {
  padding: 0 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

body.newsroom-page #gallery-h2 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body.newsroom-page .newsroom-gallery-grid {
  margin-top: 16px !important;
}

/* ==========================================
   8. EYEBROW LABELS
   ========================================== */
body .eyebrow,
body .eyebrow-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pr-blue) !important;
  margin-bottom: 14px !important;
}

body .eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--pr-yellow) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ==========================================
   9. SECTION TITLES
   ========================================== */
body .section-title {
  font-family: var(--pr-font-display) !important;
  color: var(--pr-navy) !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  max-width: 780px !important;
  margin-top: 10px !important;
}

body .section-title--white {
  font-family: var(--pr-font-display) !important;
  color: #fff !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  max-width: 780px !important;
  margin-top: 10px !important;
}

body.has-hero .personas-cta,
body.has-hero .fights-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin-top: 48px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

body.has-hero .personas-cta .btn,
body.has-hero .fights-cta .btn {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .section-lead {
  font-size: 17px !important;
  color: var(--pr-text-muted) !important;
  line-height: 1.72 !important;
  max-width: 640px !important;
  margin-top: 18px !important;
}

/* ==========================================
   10. STATS SECTION – premium cards on light bg
   ========================================== */
html body.has-hero main>section.stats-section,
html body.has-hero section.stats-section,
body.has-hero .stats-section,
body .stats-section,
.stats-section {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: #F8FAFD !important;
  background: #F8FAFD !important;
  box-sizing: border-box !important;
}

body.has-hero main>.stats-section:first-child,
body.has-hero .stats-section:first-child {
  padding-top: calc(var(--nav-h, 72px) + clamp(36px, 4vw, 56px)) !important;
}

body.has-hero .stats-section::before,
body .stats-section::before,
.stats-section::before,
body.has-hero .stats-section::after,
body .stats-section::after,
.stats-section::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
}

body.has-hero .stats-section>.container,
body .stats-section>.container,
.stats-section>.container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.has-hero .stats-header {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 52px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.has-hero .stats-header .eyebrow {
  color: var(--pr-blue) !important;
  text-align: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.has-hero .stats-header .section-title--white {
  color: var(--pr-navy) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 100% !important;
  width: 100% !important;
  font-size: clamp(1.1rem, 2.7vw, 2.3rem) !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  body.has-hero .stats-header .section-title--white {
    white-space: normal !important;
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
}

body.has-hero .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  border: none !important;
  background: none !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.has-hero .stat-card {
  background: #fff !important;
  border-radius: var(--pr-r-xl) !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 3px solid var(--pr-blue) !important;
  padding: 36px 28px 32px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
}

body.has-hero .stat-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  background: #fff !important;
}

body.has-hero .stat-card::before {
  display: none !important;
}

body.has-hero .stat-number {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 700 !important;
  color: var(--pr-blue) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

body.has-hero .stat-label {
  margin-top: 14px !important;
  font-size: 14px !important;
  color: var(--pr-text-muted) !important;
  line-height: 1.65 !important;
  flex: 1 !important;
}

body.has-hero .stat-source {
  margin-top: 20px !important;
  font-size: 11px !important;
  color: rgba(93, 102, 120, 0.6) !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  align-self: auto !important;
}



/* ==========================================
   12. FLAGSHIP PLEDGES TRIO
   ========================================== */
body.has-hero .pledges-trio-section {
  background: var(--pr-bg-light) !important;
}

body.has-hero .pledges-trio-header {
  text-align: center !important;
  margin-bottom: 52px !important;
}

body.has-hero .pledges-trio-header .eyebrow {
  justify-content: center !important;
  width: 100% !important;
}

body.has-hero .trio-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

body.has-hero .trio-card {
  background: #fff !important;
  border-radius: var(--pr-r-xl) !important;
  border: 1px solid var(--pr-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-top-left-radius: var(--pr-r-xl) !important;
  padding: 36px 30px 32px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

body.has-hero .trio-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--pr-blue), var(--pr-blue-royal)) !important;
  border-radius: var(--pr-r-xl) var(--pr-r-xl) 0 0 !important;
  display: block !important;
}

body.has-hero .trio-card::after {
  display: none !important;
}

body.has-hero .trio-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
}

body.has-hero .trio-card .card-reveal {
  display: none !important;
}

body.has-hero .trio-number {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(40px, 4.5vw, 56px) !important;
  font-weight: 700 !important;
  color: var(--pr-yellow) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
  background: linear-gradient(135deg, var(--pr-yellow), var(--pr-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body.has-hero .trio-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pr-blue) !important;
  margin-bottom: 18px !important;
}

body.has-hero .trio-body {
  color: var(--pr-text-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.68 !important;
  flex: 1 !important;
}

body.has-hero .trio-source {
  font-size: 11px !important;
  color: rgba(93, 102, 120, 0.6) !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-top: 20px !important;
}

/* ==========================================
   13. THREE FIGHTS SECTION
   ========================================== */
body.has-hero .three-fights-section {
  background: #fff !important;
}

body.has-hero .three-fights-section>.container>.eyebrow {
  color: var(--pr-blue) !important;
}

body.has-hero .fights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  margin-top: 48px !important;
}

body.has-hero .fight-block {
  background: #fff !important;
  border-radius: var(--pr-r-xl) !important;
  border: 1px solid var(--pr-border) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 4px solid var(--pr-blue) !important;
  padding: 32px 28px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--pr-r-xl) !important;
}

/* Re-apply full border after left override */
body.has-hero .fight-block {
  border: 1px solid var(--pr-border) !important;
  border-left: 4px solid var(--pr-blue) !important;
}

body.has-hero .fight-block::before,
body.has-hero .fight-block::after {
  display: none !important;
}

body.has-hero .fight-block:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
}

/* Re-enable card-reveal for fight-blocks */
body.has-hero .fight-block .card-reveal {
  display: flex !important;
  /* override the earlier display:none */
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 28px !important;
  border-radius: inherit !important;
  background-image:
    linear-gradient(180deg, rgba(8, 20, 35, 0.03) 0%, rgba(8, 20, 35, 0.22) 42%, rgba(8, 20, 35, 0.72) 100%),
    var(--card-reveal-image, none) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  transition: opacity 260ms ease, transform 560ms cubic-bezier(.2, .8, .2, 1), visibility 260ms ease !important;
  pointer-events: none !important;
}

/* Fight block card text fades in on hover */
body.has-hero .fight-block> :not(.card-reveal) {
  position: relative !important;
  z-index: 2 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity 220ms ease, transform 260ms ease, visibility 220ms ease !important;
}

body.has-hero .fight-block:hover> :not(.card-reveal),
body.has-hero .fight-block:focus-within> :not(.card-reveal) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Hide image on hover */
body.has-hero .fight-block:hover .card-reveal,
body.has-hero .fight-block:focus-within .card-reveal {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.025) !important;
}

/* Reveal label text styles */
body.has-hero .fight-block .card-reveal-kicker {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(246, 194, 26, 0.72) !important;
  color: rgba(246, 194, 26, 0.94) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.44) !important;
}

body.has-hero .fight-block .card-reveal-title {
  display: block !important;
  max-width: 92% !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-family: var(--pr-font-display) !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.48) !important;
}

/* Suppress left border color change on hover so it does not show on the image background */
body.has-hero .fight-block:hover {
  border-left-color: transparent !important;
}

body.has-hero .fight-pledge-id {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pr-blue) !important;
  margin-bottom: 8px !important;
}

body.has-hero .fight-odia {
  display: block !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--pr-gold) !important;
  margin-bottom: 10px !important;
}

body.has-hero .fight-title {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  margin-bottom: 14px !important;
  line-height: 1.28 !important;
}

body.has-hero .fight-body {
  color: var(--pr-text-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.68 !important;
}

body.has-hero .fight-tagline {
  display: inline-block !important;
  margin-top: 18px !important;
  padding: 7px 14px !important;
  background: rgba(10, 79, 183, 0.07) !important;
  border-radius: 100px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--pr-blue) !important;
  letter-spacing: 0.04em !important;
}

body.has-hero .fights-cta {
  text-align: center !important;
  margin-top: 52px !important;
}

/* ==========================================
   14. PERSONAS SECTION
   ========================================== */
body.has-hero .personas-section {
  background: var(--pr-bg-light) !important;
}

body.has-hero .personas-header {
  text-align: center !important;
  margin-bottom: 52px !important;
}

body.has-hero .personas-header .section-title--white {
  color: var(--pr-navy) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.has-hero .personas-header .eyebrow {
  justify-content: center !important;
  width: 100% !important;
}

body.has-hero .personas-subhead {
  color: var(--pr-text-muted) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  margin: 16px auto 0 !important;
}

html body.has-hero main>section.personas-section,
html body.has-hero section.personas-section,
body.has-hero .personas-section,
body .personas-section,
.personas-section {
  overflow: hidden !important;
  position: relative !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.has-hero .personas-section>.container,
body .personas-section>.container,
.personas-section>.container {
  max-width: 1360px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.has-hero .personas-header,
body .personas-header,
.personas-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 28px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ============================================================
   PREMIUM CAROUSEL NAVIGATION CONTROLS (BELOW CARDS)
   ============================================================ */
html body.has-hero section.personas-section .container,
body section.personas-section .container,
.personas-section .container {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

html body.has-hero .personas-nav-controls,
body .personas-nav-controls,
.personas-nav-controls {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 32px auto 24px auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  width: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 10 !important;
}

html body.has-hero .personas-nav-btn,
body .personas-nav-btn,
.personas-nav-btn {
  pointer-events: auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: transparent !important;
  border: none !important;
  color: #0052cc !important;
  font-size: 20px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
  padding: 0 !important;
}

html body.has-hero .personas-nav-btn:hover,
body .personas-nav-btn:hover,
.personas-nav-btn:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #003db3 !important;
  transform: scale(1.15) !important;
  box-shadow: none !important;
}

html body.has-hero .personas-nav-btn:active,
body .personas-nav-btn:active,
.personas-nav-btn:active {
  transform: scale(0.92) !important;
}

html body.has-hero .personas-nav-btn svg,
body .personas-nav-btn svg,
.personas-nav-btn svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #0052cc !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
  transition: stroke 0.2s ease !important;
}

html body.has-hero .personas-nav-btn:hover svg,
body .personas-nav-btn:hover svg,
.personas-nav-btn:hover svg {
  stroke: #003db3 !important;
}

html body.has-hero .personas-nav-dots,
body .personas-nav-dots,
.personas-nav-dots {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 4px !important;
}

html body.has-hero .personas-dot,
body .personas-dot,
.personas-dot {
  width: 32px !important;
  height: 6px !important;
  border-radius: 4px !important;
  background: #d0d7de !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-block !important;
  cursor: pointer !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.has-hero .personas-dot:hover,
body .personas-dot:hover,
.personas-dot:hover {
  background: #b0b9c6 !important;
}

html body.has-hero .personas-dot.active,
body .personas-dot.active,
.personas-dot.active {
  width: 32px !important;
  height: 6px !important;
  border-radius: 4px !important;
  background: #0052cc !important;
}

body.has-hero .personas-grid,
body .personas-grid,
.personas-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 24px !important;
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.has-hero .personas-grid::-webkit-scrollbar,
body .personas-grid::-webkit-scrollbar,
.personas-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

body.has-hero .persona-card,
body .persona-card,
.persona-card {
  flex: 0 0 calc((100% - 48px) / 3.2) !important;
  min-width: 280px !important;
  max-width: 380px !important;
  scroll-snap-align: start !important;
  background: #fff !important;
  border-radius: var(--pr-r-xl) !important;
  border: 1px solid var(--pr-border) !important;
  border-top: none !important;
  padding: 36px 28px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
}

html body .persona-card.fade-in,
body .persona-card.fade-in,
.persona-card.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

body.has-hero .persona-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--pr-yellow) !important;
  display: block !important;
}

body.has-hero .persona-card::after {
  display: none !important;
}

body.has-hero .persona-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
}

body.has-hero .persona-card .card-reveal {
  display: none !important;
}

body.has-hero .persona-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  height: 34px !important;
  padding: 0 18px !important;
  border: none !important;
  border-left: none !important;
  background: rgba(10, 79, 183, 0.08) !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--pr-blue) !important;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
}

body.has-hero .persona-title {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(24px, 2.2vw, 28px) !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
}

body.has-hero .persona-title::after {
  display: none !important;
}

body.has-hero .persona-body {
  color: #334155 !important;
  font-size: clamp(15.5px, 1.25vw, 17px) !important;
  line-height: 1.72 !important;
  flex: 1 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

body.has-hero .persona-pledge {
  margin-top: 18px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--pr-blue) !important;
  text-transform: uppercase !important;
  align-self: auto !important;
}

/* ==========================================
   15. FOUNDER SECTION
   ========================================== */
html body.has-hero main>section.founder-section,
html body.has-hero section.founder-section,
body.has-hero .founder-section,
body .founder-section,
.founder-section {
  background: #fff !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.has-hero .founder-inner {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  gap: clamp(48px, 6vw, 80px) !important;
  align-items: center !important;
}

body.has-hero .founder-portrait-block {
  position: relative !important;
}

body.has-hero .founder-portrait-img {
  border-radius: var(--pr-r-xl) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(10, 79, 183, 0.15), 0 8px 24px rgba(10, 79, 183, 0.08) !important;
  position: relative !important;
  background-color: #187380 !important;
}

body.has-hero .founder-portrait-img::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: calc(var(--pr-r-xl) + 4px) !important;
  background: linear-gradient(135deg, var(--pr-blue), var(--pr-yellow)) !important;
  z-index: -1 !important;
}

body.has-hero .founder-portrait-img img,
body.has-hero .founder-portrait-img:hover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 8% !important;
  display: block !important;
  border-radius: var(--pr-r-xl) !important;
  pointer-events: none !important;
  transform: scaleX(-1) !important;
  transition: none !important;
}

body.has-hero .founder-name {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--pr-navy) !important;
  text-align: center !important;
  margin-top: 20px !important;
}

body.has-hero .founder-role {
  font-size: 13px !important;
  color: var(--pr-text-muted) !important;
  text-align: center !important;
  margin-top: 4px !important;
}

body.has-hero .founder-content-block>.eyebrow {
  color: var(--pr-blue) !important;
}

body.has-hero .founder-headline {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  line-height: 1.15 !important;
  margin: 16px 0 24px !important;
  letter-spacing: -0.01em !important;
}

body.has-hero .founder-quote {
  position: relative !important;
  margin: 0 0 28px !important;
  padding: 24px 28px 24px 32px !important;
  background: var(--pr-bg-light) !important;
  border-radius: var(--pr-r-lg) !important;
  border: 1px solid var(--pr-border) !important;
  border-left: 4px solid var(--pr-blue) !important;
  box-shadow: none !important;
}

body.has-hero .founder-quote p {
  font-size: 15.5px !important;
  line-height: 1.74 !important;
  color: var(--pr-text-dark) !important;
  font-style: italic !important;
  margin: 0 !important;
}

body.has-hero .founder-body {
  font-size: 15.5px !important;
  line-height: 1.76 !important;
  color: var(--pr-text-muted) !important;
}

body.has-hero .founder-body strong {
  color: var(--pr-navy) !important;
}

body.has-hero .founder-actions {
  margin-top: 28px !important;
}

body.has-hero .founder-actions .btn {
  border-radius: var(--pr-r-pill) !important;
}

/* ==========================================
   16. INCLUSION SECTION – DEEP NAVY
   ========================================== */
/* ==========================================
   16. INCLUSION SECTION – LIGHT THEME
   ========================================== */
body.has-hero .inclusion-section,
body .inclusion-section {
  background: #f8fafc !important;
  /* Soft off-white light background */
  padding: 80px 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.has-hero .inclusion-header {
  text-align: center !important;
  margin-bottom: 48px !important;
}

body.has-hero .inclusion-header .eyebrow {
  color: #f6c31a !important;
  justify-content: center !important;
  width: 100% !important;
}

body.has-hero .inclusion-header .eyebrow::before {
  background: #f6c31a !important;
}

body.has-hero .inclusion-header .section-title,
body .inclusion-header .section-title {
  color: #0b192c !important;
  /* Deep navy title */
}

body.has-hero .inclusion-lead {
  color: #475569 !important;
  /* Slate navy readable text */
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: 660px !important;
  margin: 14px auto 0 !important;
  text-align: center !important;
}

body.has-hero .inclusion-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

body.has-hero .inclusion-card {
  flex: 1 1 300px !important;
  max-width: 360px !important;
  min-width: 260px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  /* Solid crisp white card */
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid #f6c31a !important;
  /* #f6c31a Golden yellow top border line */
  padding: 30px 24px !important;
  text-align: center !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease !important;
  box-shadow: 0 4px 20px rgba(11, 25, 44, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
}

body.has-hero .inclusion-card:nth-child(4),
body.has-hero .inclusion-card:nth-child(5) {
  grid-column: auto !important;
}

body.has-hero .inclusion-card:hover {
  transform: translateY(-5px) !important;
  border-color: #cbd5e1 !important;
  border-top-color: #f6c31a !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(246, 195, 26, 0.22) !important;
}

body.has-hero .inclusion-icon,
body .inclusion-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 16px !important;
  background: rgba(246, 195, 26, 0.22) !important;
  /* Golden yellow tint #f6c31a */
  border: 1px solid rgba(246, 195, 26, 0.6) !important;
  border-radius: 100px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #0b192c !important;
  /* Deep navy text on golden badge */
  text-transform: uppercase !important;
  margin: 0 auto 16px !important;
  text-align: center !important;
}

body.has-hero .inclusion-title,
body .inclusion-title,
body.has-hero .inclusion-card h3,
body .inclusion-card h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0b192c !important;
  /* Crisp dark navy title */
  margin: 0 auto 12px auto !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  line-height: 1.3 !important;
}

body.has-hero .inclusion-body,
body .inclusion-body,
body.has-hero .inclusion-card p,
body .inclusion-card p {
  font-size: 14px !important;
  color: #475569 !important;
  /* Slate navy readable description */
  line-height: 1.6 !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
  border-top: none !important;
}

body.has-hero .inclusion-card::after,
body .inclusion-card::after {
  display: none !important;
  content: none !important;
}

/* ==========================================
   17. VISION 2036 SECTION
   ========================================== */
body.has-hero .vision-section {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(10, 79, 183, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--pr-bg-light) 0%, #fff 50%, var(--pr-bg-light) 100%) !important;
}

body.has-hero .vision-header {
  text-align: center !important;
  margin-bottom: 56px !important;
}

body.has-hero .vision-header .section-title--white {
  color: var(--pr-navy) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.has-hero .vision-header .eyebrow {
  justify-content: center !important;
  width: 100% !important;
}

body.has-hero .vision-lead {
  color: var(--pr-text-muted) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 600px !important;
  margin: 18px auto 0 !important;
}

/* Vision story layout */
body.has-hero .vision-story {
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 48px !important;
  align-items: center !important;
  margin-bottom: 64px !important;
}

body.has-hero .vision-cinematic-strip {
  min-height: clamp(340px, 34vw, 460px) !important;
  border-radius: var(--pr-r-xl) !important;
  border: 1px solid var(--pr-border) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  background-image: url('../images/selected/vision-transformation-odisha.webp') !important;
  background-size: cover !important;
  background-position: 48% center !important;
}

body.has-hero .vision-cinematic-strip::after {
  border-radius: var(--pr-r-xl) !important;
  background: linear-gradient(180deg, transparent, rgba(8, 20, 35, 0.15)) !important;
}

body.has-hero .vision-strip-content {
  position: static !important;
  max-width: 360px !important;
  padding: 0 0 0 0 !important;
  border-left: none !important;
}

body.has-hero .vision-strip-kicker {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pr-blue) !important;
  margin-bottom: 14px !important;
}

body.has-hero .vision-strip-content h3 {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  line-height: 1.12 !important;
  margin-bottom: 16px !important;
}

body.has-hero .vision-strip-content p {
  color: var(--pr-text-muted) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Vision grid */
body.has-hero .vision-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
}

body.has-hero .vision-card {
  background: #fff !important;
  border-radius: var(--pr-r-xl) !important;
  border: 1px solid var(--pr-border) !important;
  padding: 26px 22px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

body.has-hero .vision-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--pr-blue), var(--pr-blue-royal)) !important;
  display: block !important;
}

body.has-hero .vision-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-color: rgba(10, 79, 183, 0.2) !important;
}

body.has-hero .vision-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 28px !important;
  padding: 0 14px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border: none !important;
  border-left: none !important;
  background: rgba(10, 79, 183, 0.08) !important;
  border-radius: 100px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--pr-blue) !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

body.has-hero .vision-pillar {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  line-height: 1.36 !important;
  margin-bottom: 10px !important;
}

body.has-hero .vision-body {
  font-size: 13px !important;
  color: var(--pr-text-muted) !important;
  line-height: 1.65 !important;
}

/* ==========================================
   18. 15 PLEDGES GRID
   ========================================== */
body.has-hero .pledges-grid-section {
  background: var(--pr-bg-light) !important;
}

body.has-hero .pledges-grid-section>.container>.eyebrow {
  color: var(--pr-blue) !important;
}

body.has-hero .pledges-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  margin-top: 48px !important;
}

body.has-hero .pledge-mini {
  background: #fff !important;
  border-radius: var(--pr-r-lg) !important;
  border: 1px solid var(--pr-border) !important;
  padding: 24px 20px !important;
  box-shadow: var(--pr-shadow-sm) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body.has-hero .pledge-mini:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pr-shadow-card) !important;
  border-color: rgba(10, 79, 183, 0.22) !important;
}

body.has-hero .pledge-id {
  font-family: var(--pr-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--pr-yellow) !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  background: linear-gradient(135deg, var(--pr-yellow), var(--pr-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body.has-hero .pledge-odia {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--pr-blue) !important;
  margin-bottom: 4px !important;
}

body.has-hero .pledge-en {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  margin-bottom: 10px !important;
}

body.has-hero .pledge-desc {
  font-size: 12.5px !important;
  color: var(--pr-text-muted) !important;
  line-height: 1.6 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

body.has-hero .pledges-cta {
  text-align: center !important;
  margin-top: 52px !important;
}

/* ==========================================
   19. FINAL CTA SECTION
   ========================================== */
html body.has-hero section.final-cta-section,
body.has-hero .final-cta-section,
body .final-cta-section,
.final-cta-section {
  background: var(--pr-white) !important;
  padding: 32px 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 1px solid var(--pr-border) !important;
}

body.has-hero .final-cta-section::after {
  display: none !important;
}

body.has-hero .final-cta-inner {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

body.has-hero .final-cta-eyebrow {
  color: var(--pr-yellow) !important;
  justify-content: center !important;
}

body.has-hero .final-cta-eyebrow::before {
  background: var(--pr-yellow) !important;
}

body.has-hero .final-cta-headline {
  font-family: var(--pr-font-display) !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  margin: 20px 0 20px !important;
}

body.has-hero .final-cta-sub {
  color: var(--pr-text-muted) !important;
  font-size: 16.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 40px !important;
}

body.has-hero .final-cta-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

body.has-hero .final-cta-buttons .btn-primary {
  box-shadow: none !important;
}

body.about-page .final-cta-buttons .btn-outline {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

body.about-page .final-cta-buttons .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ==========================================
   20. FOOTER
   ========================================== */
body .site-footer,
body.has-hero .site-footer,
.site-footer {
  background: #050b18 !important;
  background-color: #050b18 !important;
  border-top: none !important;
  color: #ffffff !important;
  position: relative !important;
}

body .site-footer::before {
  display: none !important;
  content: none !important;
}

body .footer-main {
  padding-top: 72px !important;
  padding-bottom: 52px !important;
  gap: 52px !important;
}

body .footer-logo-emblem {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  display: block !important;
}

body .footer-logo-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body .footer-odia {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
}

body .footer-tagline-en {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

body .footer-mission {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13.5px !important;
  line-height: 1.72 !important;
  margin-top: 14px !important;
}

body .footer-col h3 {
  color: var(--pr-yellow) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

body .footer-col a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  line-height: 1.8 !important;
  transition: color 0.2s !important;
}

body .footer-col a:hover {
  color: #ffffff !important;
}

body .footer-contact address {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

body .footer-contact a:hover {
  color: #ffffff !important;
}

body .footer-hours {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

body .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 26px !important;
  padding-bottom: 28px !important;
  gap: 20px !important;
}

body .footer-legal-links a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12.5px !important;
}

body .footer-legal-links a:hover {
  color: #ffffff !important;
}

body .footer-disclaimer {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11.5px !important;
  line-height: 1.65 !important;
}

body .footer-copyright {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
}

/* ==========================================
   21. MOBILE NAV
   ========================================== */
body .mobile-nav {
  background: #fff !important;
  border-top: 1px solid var(--pr-border) !important;
  box-shadow: 0 12px 40px rgba(8, 20, 35, 0.15) !important;
}

body .mobile-nav .nav-link {
  color: var(--pr-text-dark) !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
}

body .mobile-nav .nav-link:hover {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
}

body .mobile-nav-close {
  color: var(--pr-text-dark) !important;
}

body .mobile-nav-close:hover {
  background: rgba(10, 79, 183, 0.08) !important;
  color: var(--pr-blue) !important;
}

body .hamburger span {
  background: var(--pr-text-dark) !important;
}

/* ==========================================
   22. WHATSAPP FLOAT & COOKIE
   ========================================== */
body .wa-float {
  background: #25D366 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(8, 20, 35, 0.15) !important;
  width: 58px !important;
  height: 58px !important;
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 800 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body .wa-float:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(8, 20, 35, 0.25) !important;
}

body .wa-float svg {
  fill: #fff !important;
  width: 28px !important;
  height: 28px !important;
}

body .cookie-banner {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 48px)) !important;
  background: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--pr-border, #eaecf0) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  box-shadow: 0 12px 32px rgba(8, 20, 35, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 9999 !important;
  transition: all 0.3s ease !important;
}

body .cookie-banner.hidden {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  pointer-events: none !important;
}

body .cookie-banner p {
  font-family: var(--pr-font-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--pr-text-dark, #1d2939) !important;
  margin: 0 !important;
  flex: none !important;
  text-align: left !important;
}

body .cookie-banner p a {
  color: var(--pr-blue, #0a4fb7) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-bottom: 1.5px dashed rgba(10, 79, 183, 0.4) !important;
  transition: all 0.2s ease !important;
}

body .cookie-banner p a:hover {
  color: var(--pr-navy, #081423) !important;
  border-bottom-color: var(--pr-navy, #081423) !important;
}

body .cookie-btns {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}

body .cookie-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  font-family: var(--pr-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  border-radius: 20px !important;
}

body .cookie-btn-accept {
  background: var(--pr-yellow, #f2d21b) !important;
  color: var(--pr-navy, #081423) !important;
}

body .cookie-btn-accept:hover {
  background: var(--pr-navy, #081423) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(8, 20, 35, 0.15) !important;
}

body .cookie-btn-reject {
  background: #f5f8fc !important;
  color: var(--pr-text-dark, #1d2939) !important;
  border: 1px solid var(--pr-border, #eaecf0) !important;
}

body .cookie-btn-reject:hover {
  background: #eaecf0 !important;
  color: var(--pr-navy, #081423) !important;
  transform: translateY(-1px) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
  body .cookie-banner {
    right: 16px !important;
    bottom: 16px !important;
    width: calc(100vw - 32px) !important;
    padding: 16px 20px !important;
    gap: 14px !important;
  }
}

/* ==========================================
   23. FADE-IN ANIMATIONS
   ========================================== */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* JS adds both .visible (main.js) and .is-visible */
  .fade-in.visible,
  .fade-in.is-visible {
    opacity: 1;
    transform: none;
  }

  .fade-in-delay-1 {
    transition-delay: 0.1s;
  }

  .fade-in-delay-2 {
    transition-delay: 0.2s;
  }

  .fade-in-delay-3 {
    transition-delay: 0.3s;
  }

  .fade-in-delay-4 {
    transition-delay: 0.4s;
  }
}

/* ==========================================
   24. RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {

  body.has-hero .trio-grid,
  body.has-hero .fights-grid {
    grid-template-columns: 1fr !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.has-hero .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.has-hero .vision-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.has-hero .inclusion-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
  }

  body.has-hero .inclusion-card,
  body.has-hero .inclusion-card:nth-child(4),
  body.has-hero .inclusion-card:nth-child(5) {
    flex: 1 1 280px !important;
    max-width: 340px !important;
    min-width: 250px !important;
    grid-column: auto !important;
  }

  body.has-hero .pledges-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  body.has-hero .founder-inner {
    grid-template-columns: 300px 1fr !important;
  }

  body.has-hero .vision-story {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body .site-header {
    min-height: 76px !important;
  }

  body .header-inner {
    display: flex !important;
    gap: 12px !important;
    min-height: 76px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body .main-nav {
    display: none !important;
  }

  body .header-ctas {
    display: none !important;
  }

  body.has-hero .hero-inner {
    grid-template-columns: 1fr !important;
    padding-bottom: 52px !important;
  }

  body.has-hero .hero::after {
    display: none !important;
  }

  body.has-hero .hero {
    background: linear-gradient(135deg, #F0F6FF 0%, #FAFCFF 40%, #F8FAFD 100%) !important;
  }

  body.has-hero .hero-content {
    padding-right: 0 !important;
    padding-top: 36px !important;
  }

  body.has-hero .hero-trust {
    max-width: 100% !important;
    gap: 0 !important;
  }

  /* IDEOLOGY SECTION MOBILE */
  body.has-hero .ideology-section {
    padding: 0 !important;
  }

  body.has-hero .ideology-headline {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.25 !important;
  }

  body.has-hero .ideology-body {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-top: 14px !important;
    padding-top: 16px !important;
  }

  /* PERSONAS GRID MOBILE (2 per row, 5th centered spanning 2 cols) */
  body.has-hero .personas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  body.has-hero .persona-card {
    min-height: 360px !important;
    max-height: none !important;
    height: auto !important;
    padding: 28px 22px !important;
    border-radius: 16px !important;
  }

  body.has-hero .persona-icon {
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 16px !important;
    margin-bottom: 16px !important;
  }

  body.has-hero .persona-card .card-reveal {
    padding: 22px 18px !important;
    gap: 6px !important;
    background-position: center 20% !important;
  }

  body.has-hero .persona-card .card-reveal-kicker {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 4px !important;
  }

  body.has-hero .persona-card .card-reveal-title,
  body.has-hero .persona-card .persona-title {
    font-size: 22px !important;
    line-height: 1.28 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
  }

  body.has-hero .persona-card .persona-body {
    font-size: 15px !important;
    line-height: 1.68 !important;
    color: #334155 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }


  body.has-hero .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  body.has-hero .stat-card {
    padding: 18px 14px 16px !important;
    border-radius: 12px !important;
  }

  body.has-hero .stat-number {
    font-size: clamp(22px, 5.5vw, 30px) !important;
  }

  body.has-hero .stat-label {
    margin-top: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  body.has-hero .stat-source {
    margin-top: 10px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.03em !important;
  }

  body.has-hero .vision-grid {
    grid-template-columns: 1fr !important;
  }

  body.has-hero .inclusion-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  body.has-hero .inclusion-card,
  body.has-hero .inclusion-card:nth-child(4),
  body.has-hero .inclusion-card:nth-child(5) {
    flex: 1 1 260px !important;
    max-width: 100% !important;
    min-width: 100% !important;
    grid-column: auto !important;
  }

  body.has-hero .pledges-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.has-hero .founder-inner {
    grid-template-columns: 1fr !important;
  }

  body.has-hero .founder-portrait-img img {
    height: 340px !important;
  }

  .footer-main {
    flex-direction: column !important;
    gap: 36px !important;
  }
}

@media (max-width: 480px) {

  /* IDEOLOGY SECTION SMALL MOBILE */
  body.has-hero .ideology-section {
    padding: 0 !important;
  }

  body.has-hero .ideology-headline {
    font-size: clamp(20px, 5vw, 25px) !important;
    line-height: 1.25 !important;
  }

  body.has-hero .ideology-body {
    font-size: 12.5px !important;
    line-height: 1.48 !important;
    margin-top: 12px !important;
    padding-top: 14px !important;
  }

  /* PERSONAS GRID SMALL MOBILE */
  body.has-hero .personas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  body.has-hero .persona-card {
    min-height: 340px !important;
    max-height: none !important;
    height: auto !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }

  body.has-hero .persona-card .card-reveal {
    padding: 18px 14px !important;
    gap: 4px !important;
    background-position: center 18% !important;
  }

  body.has-hero .persona-card .card-reveal-kicker {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 3px !important;
  }

  body.has-hero .persona-card .card-reveal-title,
  body.has-hero .persona-card .persona-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }


  body.has-hero .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  body.has-hero .stat-card {
    padding: 14px 10px 12px !important;
    border-radius: 10px !important;
  }

  body.has-hero .stat-number {
    font-size: clamp(20px, 5vw, 26px) !important;
  }

  body.has-hero .stat-label {
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.38 !important;
  }

  body.has-hero .stat-source {
    margin-top: 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }

  body.has-hero .inclusion-grid {
    grid-template-columns: 1fr !important;
  }

  body.has-hero .inclusion-card,
  body.has-hero .inclusion-card:nth-child(4),
  body.has-hero .inclusion-card:nth-child(5) {
    grid-column: span 1 !important;
  }

  body.has-hero .pledges-grid {
    grid-template-columns: 1fr !important;
  }

  body.has-hero .hero-ctas {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.has-hero .hero-trust {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  body.has-hero .hero-trust-divider {
    display: none !important;
  }
}

/* ==========================================
   25. INNER PAGE HERO (about, contact etc.)
   ========================================== */
body:not(.has-hero) main .page-hero,
body.newsroom-page main>.newsroom-masthead-strip {
  background: linear-gradient(135deg, var(--pr-navy) 0%, #0D2050 50%, var(--pr-navy-2) 100%) !important;
  border-bottom: 1px solid rgba(10, 79, 183, 0.3) !important;
}

body:not(.has-hero) main .page-hero::after,
body.newsroom-page main>.newsroom-masthead-strip::after {
  background: linear-gradient(180deg, transparent, rgba(248, 250, 253, 0.92) 96%, var(--pr-bg-light) 100%) !important;
}

/* Legal Page Light Hero Redesign */
body.legal-page main .legal-hero {
  background: #ffffff !important;
  color: var(--pr-text-dark) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  min-height: auto !important;
  height: auto !important;
  padding: calc(var(--nav-h, 72px) + 16px) 0 48px !important;
  text-align: center !important;
}

body.legal-page main .legal-hero .container {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.legal-page main .legal-hero::before,
body.legal-page main .legal-hero::after {
  display: none !important;
  content: none !important;
}

body.legal-page main .legal-hero h1 {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  margin: 18px auto 0 !important;
  max-width: 820px !important;
  text-align: center !important;
}

body.legal-page main .legal-hero h1::after {
  display: none !important;
  content: none !important;
}

body.legal-page main .legal-hero .eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  display: inline-block !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.legal-page main .legal-hero .updated {
  color: var(--pr-text-muted) !important;
  font-size: 15px !important;
  margin: 10px auto 0 !important;
  max-width: 680px !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* ==========================================
   26. FORM ELEMENTS
   ========================================== */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body textarea,
body select {
  border: 1.5px solid var(--pr-border-strong) !important;
  border-radius: var(--pr-r-md) !important;
  padding: 13px 18px !important;
  font-family: var(--pr-font-sans) !important;
  font-size: 15px !important;
  color: var(--pr-text-dark) !important;
  background: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
}

body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--pr-blue) !important;
  box-shadow: 0 0 0 4px rgba(10, 79, 183, 0.1) !important;
}

/* ==========================================
   27. SCROLLBAR (subtle)
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--pr-bg-light);
}

::-webkit-scrollbar-thumb {
  background: rgba(10, 79, 183, 0.3);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 79, 183, 0.5);
}

/* ==========================================
   28. FOCUS STYLES
   ========================================== */
body *:focus-visible {
  outline: 3px solid rgba(10, 79, 183, 0.5) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ==========================================
   29. DECORATIVE BACKGROUND SHAPES
   ========================================== */
body.has-hero .pledges-trio-section::before,
body.has-hero .three-fights-section::before,
body.has-hero .pledges-grid-section::before {
  background: linear-gradient(90deg, transparent, var(--pr-border), transparent) !important;
}

/* ==========================================
   30. ANNOUNCEMENT TOP BAR
   ========================================== */
.announcement-bar {
  position: relative;
  z-index: 1001;
  background: #F6C21A !important;
  color: #172033 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  padding: 8px 20px !important;
  text-transform: uppercase !important;
}

/* ==========================================
   31. GLOBAL BG CONSISTENCY
   ========================================== */
body {
  background: #FFFFFF !important;
}

html {
  background: #081423 !important;
}

body main {
  background: transparent !important;
}

/* ==========================================
   32. INNER PAGE HERO
   ========================================== */
body:not(.has-hero) main .page-hero {
  background: linear-gradient(135deg, #081423 0%, #0D2050 50%, #0D1F38 100%) !important;
  border-bottom: 1px solid rgba(10, 79, 183, 0.25) !important;
}

/* ==========================================
   33. JOIN PAGE FORM
   ========================================== */
body.join-page .form-card {
  border-radius: 24px !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  box-shadow: var(--pr-shadow-card) !important;
}



/* ==========================================
   35. FINAL CARD HOVER CLEANUP
   ========================================== */
body .stat-card:hover,
body .trio-card:hover,
body .fight-block:hover,
body .persona-card:hover,
body .vision-card:hover,
body .pledge-mini:hover {
  border-color: rgba(10, 79, 183, 0.2) !important;
}

/* ==========================================
   36. HEADING COLOR NORMALIZATION
   ========================================== */
body h2:not(.section-title--white):not(.final-cta-headline):not(.founder-headline) {
  color: #172033;
}


/* ==========================================
   STATS BAR HERO SPACING FIX
   ========================================== */
body.has-hero .hero {
  padding-bottom: 76px !important;
  /* space for the 76px stats bar */
  min-height: clamp(640px, 88svh, 820px) !important;
  position: relative !important;
}

body.has-hero .hero-inner {
  min-height: clamp(640px, 88svh, 820px) !important;
  padding-bottom: 48px !important;
}

@media (max-width: 768px) {
  body.has-hero .hero {
    padding-bottom: 0 !important;
  }
}



/* ==========================================
   PERSONA CARD HOVER IMAGE REVEAL – RESTORED
   The "OJC is not one man's party" section
   ========================================== */

/* Re-enable card-reveal ONLY for persona cards */
body.has-hero .persona-card .card-reveal {
  display: flex !important;
  /* override the earlier display:none */
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 28px !important;
  border-radius: inherit !important;
  background-image:
    linear-gradient(180deg, rgba(8, 20, 35, 0.03) 0%, rgba(8, 20, 35, 0.22) 42%, rgba(8, 20, 35, 0.72) 100%),
    var(--card-reveal-image, none) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  transition: opacity 260ms ease, transform 560ms cubic-bezier(.2, .8, .2, 1), visibility 260ms ease !important;
  pointer-events: none !important;
}

/* Persona card text fades in on hover */
body.has-hero .persona-card> :not(.card-reveal) {
  position: relative !important;
  z-index: 2 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity 220ms ease, transform 260ms ease, visibility 220ms ease !important;
}

body.has-hero .persona-card:hover> :not(.card-reveal),
body.has-hero .persona-card:focus-within> :not(.card-reveal) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Hide image on hover */
body.has-hero .persona-card:hover .card-reveal,
body.has-hero .persona-card:focus-within .card-reveal {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.025) !important;
}

/* Reveal label text styles */
body.has-hero .persona-card .card-reveal-kicker {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(246, 194, 26, 0.72) !important;
  color: rgba(246, 194, 26, 0.94) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.44) !important;
}

body.has-hero .persona-card .card-reveal-title {
  display: block !important;
  max-width: 92% !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-family: var(--pr-font-display) !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.48) !important;
}

/* Also restore the ::before pseudo-element suppression 
   so the card's blue-top bar doesn't bleed through the image */
body.has-hero .persona-card:hover::before {
  opacity: 0 !important;
}

/* ==========================================
   26. ABOUT PAGE LIGHT OVERRIDES
   ========================================== */
body.about-page {
  background-color: #ffffff !important;
}

/* Page Hero on About Page */
body.about-page main .page-hero {
  background: #ffffff !important;
  color: var(--pr-text-dark) !important;
  border-bottom: none !important;
  min-height: auto !important;
  padding: calc(var(--nav-h, 72px) + 56px) 0 64px !important;
}

body.about-page main .page-hero-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.about-page main .page-hero::before,
body.about-page main .page-hero::after {
  display: none !important;
  content: none !important;
}

body.about-page main .page-hero h1 {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.about-page main .page-hero-sub {
  color: var(--pr-text-muted) !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  text-align: center !important;
}

body.about-page main .page-hero .eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
}

/* Seven Pillars Section on About Page */
body.about-page .about-pillars-section {
  background: #ffffff !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
  border-top: 1px solid var(--pr-border) !important;
}

body.about-page .about-pillars-section .eyebrow {
  color: var(--pr-blue) !important;
}

body.about-page .about-pillars-section .section-title {
  color: var(--pr-navy) !important;
}

body.about-page .about-pillars-section .about-pillars-lead {
  color: var(--pr-text-muted) !important;
  font-size: 16.5px !important;
  line-height: 1.72 !important;
}

/* Pillar Card Overrides */
body.about-page .pillar-card {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  padding: 32px 28px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

body.about-page .pillar-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-top-color: var(--pr-yellow) !important;
}

body.about-page .pillar-card::before,
body.about-page .pillar-card::after {
  display: none !important;
  content: none !important;
}

body.about-page .pillar-card .pillar-number {
  display: inline-flex !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pr-blue) !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

body.about-page .pillar-card .pillar-name {
  font-family: var(--pr-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  margin-bottom: 12px !important;
}

body.about-page .pillar-card .pillar-body {
  color: var(--pr-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
}

/* Official Flag Image Override on About Page */
body.about-page .about-flag-inner::before {
  content: "" !important;
  display: block !important;
  max-width: 480px !important;
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  margin: 0 auto 40px !important;
  border: 1px solid rgba(8, 20, 35, 0.08) !important;
  background-image: url('../images/selected/ojcp-flag-official.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: var(--pr-shadow-card) !important;
  border-radius: var(--pr-r-md) !important;
}

/* ==========================================
   27. VISION PAGE LIGHT OVERRIDES
   ========================================== */
body.vision-page {
  background-color: #ffffff !important;
}

/* Page Hero on Vision Page */
body.vision-page main .page-hero {
  background: #ffffff !important;
  color: var(--pr-text-dark) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  min-height: auto !important;
  padding: calc(var(--nav-h, 72px) + 56px) 0 64px !important;
}

body.vision-page main .page-hero-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
  text-align: center !important;
  /* Centered title on Vision page */
}

body.vision-page main .page-hero::before,
body.vision-page main .page-hero::after {
  display: none !important;
  content: none !important;
}

body.vision-page main .page-hero h1 {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
}

body.vision-page main .page-hero-sub {
  color: var(--pr-text-muted) !important;
  max-width: 720px !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
}

body.vision-page main .page-hero .eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
}

/* Vision outcomes section background */
body.vision-page .vision-section {
  background: #ffffff !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
  border-top: 1px solid var(--pr-border) !important;
  position: relative !important;
}

body .vision-section::after {
  display: none !important;
  content: none !important;
}

body.vision-page .vision-header .eyebrow {
  color: var(--pr-blue) !important;
}

body.vision-page .vision-header .section-title {
  color: var(--pr-navy) !important;
}

body.vision-page .vision-lead {
  color: var(--pr-text-muted) !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

/* Vision Grid resets */
body.vision-page .vision-grid {
  background: transparent !important;
  border: none !important;
  gap: 24px !important;
}

/* Vision Card style */
body.vision-page .vision-card {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  padding: 32px 28px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

body.vision-page .vision-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-top-color: var(--pr-yellow) !important;
}

body.vision-page .vision-card::before,
body.vision-page .vision-card::after {
  display: none !important;
  content: none !important;
}

body.vision-page .vision-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: auto !important;
  padding: 4px 10px !important;
  margin-bottom: 20px !important;
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.06) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.vision-page .vision-pillar {
  font-family: var(--pr-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--pr-navy) !important;
  margin-bottom: 12px !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
}

body.vision-page .vision-body {
  color: var(--pr-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
  max-width: 100% !important;
}

/* Implementation phases layout */
body.vision-page .implementation-phases {
  background: transparent !important;
  border: none !important;
  gap: 24px !important;
  margin-top: 48px !important;
}

body.vision-page .phase-card {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  padding: 32px 28px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  min-height: auto !important;
}

body.vision-page .phase-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-top-color: var(--pr-yellow) !important;
}

body.vision-page .phase-card::after {
  display: none !important;
  content: none !important;
}

body.vision-page .phase-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 4px 10px !important;
  margin-bottom: 16px !important;
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.06) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.vision-page .phase-title {
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

body.vision-page .phase-body {
  color: var(--pr-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
}

/* Manifesto Closing Quote Card */
body.vision-page .manifesto-closing-note {
  background: var(--pr-bg-light) !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  box-shadow: var(--pr-shadow-sm) !important;
  padding: clamp(28px, 4vw, 42px) !important;
  margin-top: 48px !important;
}

body.vision-page .manifesto-closing-text {
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-sans) !important;
  font-style: italic !important;
  font-size: 16.5px !important;
  line-height: 1.74 !important;
}

body.vision-page .manifesto-closing-cite {
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
}

/* ==========================================
   28. JOIN PAGE LIGHT OVERRIDES
   ========================================== */
body.join-page {
  background-color: #ffffff !important;
}

/* Page Hero on Join Page */
body.join-page main .page-hero {
  background: #ffffff !important;
  color: var(--pr-text-dark) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  min-height: auto !important;
  padding: calc(var(--nav-h, 72px) + 56px) 0 64px !important;
}

body.join-page main .page-hero-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
  text-align: center !important;
}

body.join-page main .page-hero::before,
body.join-page main .page-hero::after {
  display: none !important;
  content: none !important;
}

body.join-page main .page-hero h1 {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
}

body.join-page main .page-hero-sub {
  color: var(--pr-text-dark) !important;
  max-width: 720px !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-left: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-md) !important;
  padding: 20px 24px !important;
  box-shadow: var(--pr-shadow-sm) !important;
  text-shadow: none !important;
}

body.join-page .join-hero-emphasis {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.06) !important;
  border: 1px solid rgba(10, 79, 183, 0.15) !important;
  border-radius: var(--pr-r-sm) !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
}

body.join-page main .page-hero .eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
}

/* Reason Cards on Join Page */
body.join-page .reasons-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

@media (max-width: 767px) {
  body.join-page .reasons-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  body.join-page .reason-card {
    padding: 14px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  body.join-page .reason-badge {
    padding: 3px 8px !important;
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  body.join-page .reason-title {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    min-height: 0 !important;
    display: block !important;
    text-align: left !important;
  }

  body.join-page .reason-body {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-top: 4px !important;
  }

  body.join-page .reason-card--wide,
  body.join-page .reasons-grid>.reason-card:last-child {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }

  body.join-page .reason-card--wide .reason-title,
  body.join-page .reasons-grid>.reason-card:last-child .reason-title {
    min-height: 0 !important;
  }
}

body.join-page .reason-card {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  padding: 20px 18px !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  min-height: 0 !important;
}

body.join-page .reason-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-top-color: var(--pr-yellow) !important;
}

body.join-page .reason-card::before,
body.join-page .reason-card::after {
  display: none !important;
  content: none !important;
}

body.join-page .reason-badge {
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
  border-radius: var(--pr-r-sm) !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  margin: 0 auto 10px auto !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
}

body.join-page .reason-title {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  min-height: 2.6em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.join-page .reason-body {
  text-align: center !important;
  margin-top: 8px !important;
}

body.join-page .reason-card--wide,
body.join-page .reasons-grid>.reason-card:last-child {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}

/* OJC Wings Overrides */
body.join-page #wings {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  padding: 32px 28px !important;
  box-shadow: var(--pr-shadow-card) !important;
}

body.join-page #wings h3 {
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

body.join-page #wings>div>div {
  background: var(--pr-bg-light) !important;
  border: 1px solid var(--pr-border) !important;
  border-left: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-md) !important;
  padding: 20px !important;
  color: var(--pr-text-dark) !important;
  box-shadow: var(--pr-shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.join-page #wings>div>div:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--pr-shadow-card) !important;
}

body.join-page #wings strong::after {
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
  border-radius: var(--pr-r-sm) !important;
  padding: 4px 8px !important;
  letter-spacing: 0.08em !important;
}

body.join-page #wings span {
  color: var(--pr-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Join Form Card Overrides */
html body.join-page .form-card,
body.join-page .form-card,
.form-card {
  background: #faf9f5 !important;
  border: 1.5px solid #dbeafe !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

html body.join-page .form-card::before,
body.join-page .form-card::before,
.form-card::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  opacity: 0 !important;
}

html body.join-page .form-card>h2::after,
body.join-page .form-card>h2::after,
.form-card>h2::after,
body.join-page .form-card h2::after {
  background: #2563eb !important;
  width: 54px !important;
  height: 2.5px !important;
  border-radius: 2px !important;
  margin-top: 10px !important;
  display: block !important;
}

@media (max-width: 768px) {

  html body.join-page .form-card,
  body.join-page .form-card,
  .form-card {
    border: 1.5px solid #dbeafe !important;
  }

  html body.join-page .form-card::before,
  body.join-page .form-card::before,
  .form-card::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    opacity: 0 !important;
  }
}

/* District Grid Section on Join Page — Cinematic Background Redesign */
html body.join-page main section.district-grid-section,
body .district-grid-section,
.district-grid-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #050b18 !important;
  color: #ffffff !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.district-bg-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.district-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: brightness(0.85) contrast(1.05) !important;
}

.district-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(7, 17, 38, 0.85) 0%, rgba(5, 11, 24, 0.92) 100%) !important;
}

html body.join-page main section.district-grid-section .container,
body .district-grid-section .container {
  position: relative !important;
  z-index: 2 !important;
}

html body.join-page main section.district-grid-section .eyebrow {
  color: #FADE25 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(250, 222, 37, 0.4) !important;
  border-left: 3.5px solid #FADE25 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 14px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
  border-radius: 6px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html body.join-page main section.district-grid-section .section-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 1024px) {

  html body.join-page main section.district-grid-section .district-grid,
  body .district-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.join-page main section.district-grid-section .district-tag,
  body .district-tag {
    padding: 12px 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 640px) {

  html body.join-page main section.district-grid-section .district-tag,
  body .district-tag {
    padding: 10px 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
}

html body.join-page main section.district-grid-section .district-tag,
html body.join-page main section.district-grid-section ul.district-grid li.district-tag,
body .district-tag,
.district-tag {
  background: rgba(7, 17, 38, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  border-radius: var(--pr-r-lg) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  padding: 13px 16px !important;
  opacity: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body.join-page main section.district-grid-section .district-tag:hover,
html body.join-page main section.district-grid-section ul.district-grid li.district-tag:hover,
body .district-tag:hover,
.district-tag:hover {
  transform: translateY(-3px) !important;
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================
   29. NEWSROOM PAGE LIGHT OVERRIDES
   ========================================== */
body.newsroom-page {
  background-color: #ffffff !important;
}

/* Masthead on Newsroom Page */
body.newsroom-page main>div:first-of-type,
body.newsroom-page main>.newsroom-masthead-strip {
  background: #ffffff !important;
  color: var(--pr-text-dark) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  min-height: auto !important;
  padding: calc(var(--nav-h, 72px) + 56px) 0 64px !important;
}

body.newsroom-page main>div:first-of-type::before,
body.newsroom-page main>div:first-of-type::after {
  display: none !important;
  content: none !important;
}

body.newsroom-page main>div:first-of-type .newsroom-flag {
  align-items: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.newsroom-page main>div:first-of-type .newsroom-dateline {
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
  border-radius: var(--pr-r-sm) !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 18px !important;
}

body.newsroom-page main>div:first-of-type .newsroom-dateline::before {
  background: var(--pr-blue) !important;
  box-shadow: none !important;
}

body.newsroom-page main>div:first-of-type .newsroom-flag-title {
  color: var(--pr-navy) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.newsroom-page main>div:first-of-type .newsroom-flag-title::after {
  background: linear-gradient(90deg, transparent, var(--pr-blue), transparent) !important;
  margin: 26px auto 0 !important;
}

/* Latest news strip */
body.newsroom-page .newsroom-latest-strip,
body.newsroom-page main>div:nth-of-type(2) {
  background: var(--pr-navy) !important;
  border-bottom: none !important;
}

body.newsroom-page .newsroom-latest-strip span:first-child,
body.newsroom-page main>div:nth-of-type(2) span:first-child {
  color: var(--pr-yellow) !important;
  font-weight: 700 !important;
}

body.newsroom-page .newsroom-latest-strip span:last-child,
body.newsroom-page main>div:nth-of-type(2) span:last-child {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Statements Section background */
body.newsroom-page .newsroom-statements-section,
body.newsroom-page main>section:nth-of-type(1) {
  background: #ffffff !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
}

body.newsroom-page .newsroom-rule {
  border-top: 1px solid var(--pr-border) !important;
}

body.newsroom-page .newsroom-rule-thin {
  border-top-color: var(--pr-border) !important;
}

body.newsroom-page .s-category {
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
  border-radius: var(--pr-r-sm) !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

body.newsroom-page .statement-featured::before {
  background: var(--pr-blue) !important;
}

body.newsroom-page .statement-featured h2 {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
}

body.newsroom-page .statement-featured .s-deck {
  color: var(--pr-text-muted) !important;
}

body.newsroom-page .statement-card h3 {
  color: var(--pr-navy) !important;
  font-weight: 700 !important;
}

body.newsroom-page .statement-card p {
  color: var(--pr-text-muted) !important;
}

body.newsroom-page .statement-card:hover {
  background: rgba(10, 79, 183, 0.03) !important;
}

/* Press Kit tiles */
body.newsroom-page .press-kit-section,
body.newsroom-page main>section:nth-of-type(2) {
  background: #ffffff !important;
  border-top: 1px solid var(--pr-border) !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
}

body.newsroom-page .presskit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body.newsroom-page .presskit-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 280px !important;
  padding: 32px 28px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  text-decoration: none !important;
}

body.newsroom-page .presskit-tile:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-top-color: var(--pr-yellow) !important;
}

body.newsroom-page .presskit-tile-icon {
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  color: var(--pr-blue) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
}

body.newsroom-page .presskit-tile-title {
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-top: 18px !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

body.newsroom-page .presskit-tile-desc {
  color: var(--pr-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  flex-grow: 1 !important;
}

body.newsroom-page .presskit-tile-link {
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  margin-top: auto !important;
}

@media (max-width: 768px) {
  body.newsroom-page .presskit-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ==========================================================================
   DATA-DRIVEN VISION DASHBOARD (EXACT MOCKUP REDESIGN)
   ========================================================================== */
.stats-dossier-redesign {
  position: relative;
  background: #f4f7fc !important;
  padding: clamp(70px, 8vw, 110px) 0 !important;
  isolation: isolate;
  overflow: hidden;
}

.stats-dossier-redesign::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(42, 109, 181, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.stats-dossier-container {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(24px, 4vw, 64px) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
  margin: 0 auto !important;
}

/* HEADER STYLING */
.stats-dossier-header {
  text-align: left !important;
  margin-bottom: 30px !important;
  width: 100% !important;
}

.stats-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.stats-header-badge .badge-line {
  width: 32px;
  height: 2px;
  background: #f2b705;
}

.stats-header-badge .badge-text {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  color: #d97706;
  text-transform: uppercase;
}

.stats-main-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.3rem, 3.8vw, 3.4rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.16 !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
  text-align: left !important;
}

.stats-main-headline .blue-accent {
  color: #0b57d0 !important;
}

.stats-dossier-intro {
  margin-top: 8px;
  margin-bottom: 28px;
}

.stats-intro-lead {
  font-family: var(--font-sans, 'DM Sans', sans-serif) !important;
  font-size: clamp(16px, 1.8vw, 18px) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.5 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;
}

.stats-intro-body {
  font-family: var(--font-sans, 'DM Sans', sans-serif) !important;
  font-size: clamp(14.5px, 1.6vw, 16px) !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 0 16px 0 !important;
  text-align: left !important;
}

.stats-disclaimer-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #edf4fc !important;
  border: 1px solid rgba(11, 87, 208, 0.14) !important;
  border-left: 3.5px solid #0b57d0 !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.stats-disclaimer-bar .disclaimer-icon {
  flex-shrink: 0 !important;
  color: #0b57d0 !important;
}

.stats-disclaimer-bar span {
  font-family: var(--font-sans, 'DM Sans', sans-serif) !important;
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  font-style: italic !important;
}

@media (max-width: 768px) {
  .stats-disclaimer-bar {
    align-items: flex-start !important;
    padding: 10px 14px !important;
  }
}

.stats-card-tagline {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  margin: 0 0 18px 0;
}

/* FILTER PILLS */
.stats-filter-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-filter-pills .filter-pill {
  border: 1px solid rgba(203, 213, 225, 0.8);
  background: #ffffff;
  color: #475569;
  font-family: var(--font-sans, sans-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.stats-filter-pills .filter-pill:hover {
  background: #f8fafc;
  color: #0a192f;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.stats-filter-pills .filter-pill.active {
  background: #f2b705 !important;
  color: #0a192f !important;
  border-color: #f2b705 !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(242, 183, 5, 0.35);
}

/* DASHBOARD GRID */
.stats-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

@media (max-width: 991px) {
  .stats-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* CARDS STYLING */
.stats-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(10, 25, 47, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(10, 25, 47, 0.12);
}

.stats-card-bg-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 44%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to right, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
  pointer-events: none;
}

/* CARD VARIANT GRADIENTS */
.card-healthcare {
  background: linear-gradient(135deg, #edf6fc 0%, #e2f0fb 100%) !important;
}

.card-education {
  background: linear-gradient(135deg, #fdf8eb 0%, #f7eed7 100%) !important;
}

.card-economy {
  background: linear-gradient(135deg, #eff6f2 0%, #e1f0e7 100%) !important;
}

.card-social {
  background: linear-gradient(135deg, #fdf2f2 0%, #f9e2e2 100%) !important;
}

.stats-card-content {
  position: relative;
  z-index: 2;
  padding: 32px clamp(22px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ICON BADGES */
.card-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  width: fit-content;
}

.card-icon-badge.badge-blue {
  background: rgba(27, 59, 140, 0.12);
  color: #1b3b8c;
}

.card-icon-badge.badge-gold {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.card-icon-badge.badge-green {
  background: rgba(16, 122, 87, 0.12);
  color: #0f766e;
}

.card-icon-badge.badge-rose {
  background: rgba(190, 24, 93, 0.12);
  color: #be185d;
}

.stats-card-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  color: #0a192f !important;
  line-height: 1.2;
  margin-bottom: 24px;
}

/* STATS ITEMS GRID INSIDE CARD */
.stats-grid-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 14px;
  margin-bottom: 28px;
  flex-grow: 1;
}

@media (max-width: 640px) {
  .stats-grid-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-item {
  border-left: 3px solid #f2b705;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-healthcare .stat-item {
  border-left-color: #1b3b8c;
}

.card-education .stat-item {
  border-left-color: #d97706;
}

.card-economy .stat-item {
  border-left-color: #0f766e;
}

.card-social .stat-item {
  border-left-color: #be185d;
}

.stat-item.full-width {
  grid-column: 1 / -1;
}

.stat-num {
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(19px, 2.5vw, 23px);
  font-weight: 800;
  color: #0a192f;
  line-height: 1.15;
  margin-bottom: 3px;
}

.stat-desc {
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}

.stat-source {
  color: #64748b;
  font-size: 11px;
  display: inline;
}

.stat-context {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

/* FOOTER LINK */
.stats-card-footer {
  margin-top: auto;
  padding-top: 12px;
}

.stats-card-link {
  font-family: var(--font-sans, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: #1b3b8c !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.stats-card-link:hover {
  gap: 10px;
  color: #0f2b70 !important;
}

/* STATS LIST ITEMS INSIDE CARD */
.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.stats-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans, sans-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: #334155;
}

.stats-list li .bullet {
  color: #f2b705;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.2;
}

.card-healthcare .stats-list li .bullet {
  color: #1b3b8c;
}

.card-education .stats-list li .bullet {
  color: #d97706;
}

.card-economy .stats-list li .bullet {
  color: #0f766e;
}

.card-social .stats-list li .bullet {
  color: #be185d;
}

.stats-list li strong {
  color: #0a192f;
  font-weight: 700;
}

.stats-list li em {
  font-style: italic;
  color: #52637a;
  font-weight: 400;
}

/* DIVIDER */
.stats-footer-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}

.stats-footer-divider .divider-line {
  height: 1px;
  width: 120px;
  background: #cbd5e1;
}

.stats-footer-divider .divider-text {
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #94a3b8;
  text-transform: uppercase;
}

/* Media contact banner at the bottom */
body.newsroom-page .newsroom-media-contact-section {
  background: #050b18 !important;
  border-top: 1px solid rgba(242, 183, 5, 0.25) !important;
  border-bottom: none !important;
  padding: clamp(70px, 8vw, 100px) 0 !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.newsroom-page .press-contact-strip {
  color: var(--pr-text-muted) !important;
}

body.newsroom-page .press-contact-info {
  color: var(--pr-text-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

body.newsroom-page .press-contact-info strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-display) !important;
  font-size: clamp(24px, 3vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

body.newsroom-page .press-contact-info a {
  color: var(--pr-blue) !important;
  font-weight: 600 !important;
}

body.newsroom-page .press-contact-info a:hover {
  text-decoration: underline !important;
}

body.newsroom-page .press-contact-strip .btn {
  border-radius: var(--pr-r-pill) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.newsroom-page .press-contact-strip .btn-outline-dark {
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-navy) !important;
  background: transparent !important;
}

body.newsroom-page .press-contact-strip .btn-outline-dark:hover {
  background: rgba(8, 20, 35, 0.05) !important;
  border-color: var(--pr-navy) !important;
}

body.newsroom-page .press-contact-strip .btn-primary {
  background: var(--pr-blue) !important;
  border: 1px solid var(--pr-blue) !important;
  color: #ffffff !important;
}

body.newsroom-page .press-contact-strip .btn-primary:hover {
  background: #083ea2 !important;
  border-color: #083ea2 !important;
}

/* ==========================================
   30. CONTACT PAGE LIGHT OVERRIDES
   ========================================== */
body.contact-page {
  background-color: #ffffff !important;
}

/* Page Hero on Contact Page */
body.contact-page main .page-hero {
  background: #ffffff !important;
  color: var(--pr-text-dark) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  min-height: auto !important;
  padding: calc(var(--nav-h, 72px) + 56px) 0 64px !important;
}

body.contact-page main .page-hero-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
  text-align: center !important;
}

body.contact-page main .page-hero::before,
body.contact-page main .page-hero::after {
  display: none !important;
  content: none !important;
}

body.contact-page main .page-hero h1 {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
}

body.contact-page main .page-hero-sub {
  color: var(--pr-text-dark) !important;
  max-width: 720px !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-left: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-md) !important;
  padding: 20px 24px !important;
  box-shadow: var(--pr-shadow-sm) !important;
  text-shadow: none !important;
}

body.contact-page main .page-hero .eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
}

/* Contact cards (channels grid and left side info) */
body.contact-page .contact-card {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  box-shadow: var(--pr-shadow-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

body.contact-page .contact-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-top-color: var(--pr-yellow) !important;
}

body.contact-page .contact-card-icon {
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  color: var(--pr-blue) !important;
  box-shadow: none !important;
}

body.contact-page .contact-card-title {
  color: var(--pr-navy) !important;
  font-weight: 700 !important;
}

body.contact-page .contact-card-detail {
  color: var(--pr-text-muted) !important;
}

body.contact-page .contact-card-detail a {
  color: var(--pr-blue) !important;
  font-weight: 700 !important;
}

/* Hours note */
body.contact-page .hours-note {
  border: 1px solid var(--pr-border) !important;
  border-left: 4px solid var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.03) !important;
  border-radius: var(--pr-r-md) !important;
  color: var(--pr-text-muted) !important;
  box-shadow: var(--pr-shadow-sm) !important;
}

/* Accreditation note */
body.contact-page .contact-accreditation-note {
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  background: #ffffff !important;
  box-shadow: var(--pr-shadow-card) !important;
}

body.contact-page .contact-accreditation-title {
  color: var(--pr-navy) !important;
  font-weight: 700 !important;
}

body.contact-page .contact-accreditation-body {
  color: var(--pr-text-muted) !important;
}

/* Form Card contact page */
body.contact-page .form-card {
  border: 1px solid var(--pr-border) !important;
  border-top: 4px solid var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) !important;
  background: #ffffff !important;
  box-shadow: var(--pr-shadow-card) !important;
}

body.contact-page .form-card h2::after {
  background: linear-gradient(90deg, var(--pr-blue), transparent) !important;
}

/* Clean sections backgrounds */
body.contact-page main>section:nth-of-type(2),
body.contact-page .contact-channel-section {
  background: #ffffff !important;
}

body.contact-page main>section:nth-of-type(3),
body.contact-page .contact-main-section {
  background: var(--pr-bg-light) !important;
}

/* ==========================================
   31. VISION PAGE DOWNLOAD SECTION OVERRIDES
   ========================================== */
body.vision-page .download-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(48px, 6vw, 68px) 0 clamp(64px, 7vw, 84px) !important;
  background: #f8fbfe !important;
  border-top: none !important;
  text-align: center !important;
}

/* Subtle Odisha landmark background watermark at 5% opacity */
body.vision-page .download-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('../images/odisha-landmarks-banner-bg.webp') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  mix-blend-mode: multiply !important;
}

/* Soft radial glow behind heading */
body.vision-page .download-section::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 500px !important;
  height: 260px !important;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.4) 0%, rgba(59, 130, 246, 0.1) 45%, transparent 70%) !important;
  filter: blur(28px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body.vision-page .download-section .container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 780px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Decorative Gold Accent Line */
.about-definition-dots .dot.active {
  width: 28px !important;
  border-radius: 12px !important;
  background: #1B3A8C !important;
}

/* ============================================================
   ORGANIC HERO BOTTOM DIVIDER (SEAMLESS CURVED TRANSITION)
   ============================================================ */
.hero-bottom-divider {
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  line-height: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.hero-divider-svg {
  display: block !important;
  width: 100% !important;
  height: clamp(36px, 6vw, 75px) !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom !important;
}

@media (max-width: 1023px) {
  .hero-bottom-divider {
    height: auto !important;
    bottom: -2px !important;
  }
}

@media (max-width: 640px) {
  .hero-bottom-divider {
    height: auto !important;
    bottom: -2px !important;
  }
}

body.vision-page .download-section .cta-accent-line {
  width: 36px !important;
  height: 3px !important;
  background: #daa520 !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
}

body.vision-page .download-section h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #071126 !important;
  font-size: clamp(2rem, 4vw, 2.85rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 28px !important;
}

body.vision-page .download-section .download-actions {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

body.vision-page .download-section .btn {
  border-radius: var(--pr-r-pill) !important;
  padding: 14px 28px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.vision-page .download-section .btn-primary {
  background: linear-gradient(135deg, #0b49aa 0%, #062b66 100%) !important;
  border: 1px solid #0b49aa !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(11, 73, 170, 0.22) !important;
}

body.vision-page .download-section .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(11, 73, 170, 0.32) !important;
  background: linear-gradient(135deg, #0d52be 0%, #083378 100%) !important;
}

body.vision-page .download-section .btn-outline-dark {
  border: 1px solid rgba(11, 73, 170, 0.28) !important;
  color: #0b49aa !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(7, 17, 38, 0.05) !important;
}

body.vision-page .download-section .btn-outline-dark:hover {
  background: #0b49aa !important;
  color: #ffffff !important;
  border-color: #0b49aa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(11, 73, 170, 0.2) !important;
}

/* ==========================================
   32. MOBILE VIEW VISUAL FIXES
   ========================================== */

/* Fix Founder portrait aspect ratio and top crop on mobile */
@media (max-width: 768px) {
  body.has-hero .founder-portrait-img {
    aspect-ratio: 4 / 5 !important;
    /* Premium portrait format instead of distorted landscape */
    min-height: auto !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  body.has-hero .founder-portrait-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    /* Keep founder's head fully visible */
  }
}

@media (max-width: 520px) {
  body.has-hero .founder-portrait-img {
    max-width: 280px !important;
    /* Scale down cleanly on smaller screens */
  }
}

/* Fix Hero and Stats Bar squishing on mobile & Center/decrease text */
@media (max-width: 768px) {
  body.has-hero .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
  }

  body.has-hero .hero-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

body.has-hero .hero-content {
  text-align: left !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 28px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

body.has-hero .hero-content>.eyebrow {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 18px !important;
  font-size: 10px !important;
}

body.has-hero .hero-headline,
body .hero-headline {
  text-align: left !important;
  font-size: clamp(30px, 6vw, 38px) !important;
  margin: 12px 0 16px !important;
  line-height: 1.12 !important;
}

body.has-hero .hero-headline-odia {
  text-align: left !important;
  margin: 0 0 16px !important;
  font-size: clamp(18px, 4vw, 22px) !important;
}

body.has-hero .hero-body {
  text-align: left !important;
  margin: 0 0 24px !important;
  font-size: 14.5px !important;
  padding: 0 !important;
}

body.has-hero .hero-ctas {
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 12px !important;
}

/* About Page flag cards 1 column on tablet and mobile (<= 1024px) */
@media (max-width: 1024px) {
  body.about-page .about-flag-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body.about-page .about-flag-card,
  body.about-page .about-flag-card:nth-child(3),
  body.about-page .about-flag-card:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(13, 26, 42, 0.1) !important;
    border-radius: var(--pr-r-xl, 12px) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--pr-shadow-card, 0 10px 30px rgba(10, 79, 183, 0.05)) !important;
    min-height: auto !important;
    padding: 24px 20px !important;
    margin-bottom: 0 !important;
  }

  body.about-page .about-flag-body {
    max-width: 100% !important;
  }
}

/* Decrease logo size, center it, and make header more compact on mobile */
@media (max-width: 768px) {
  body .site-header {
    min-height: 58px !important;
  }

  body .site-header .container,
  body .header-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    min-height: 58px !important;
    gap: 6px !important;
  }

  body .logo-link {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body .logo-emblem {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  body .logo-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  body .logo-name {
    font-size: clamp(12px, 3.4vw, 13.5px) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    line-height: 1.15 !important;
  }

  body .logo-tagline {
    display: none !important;
  }

  body .lang-toggle-pill--header-mobile {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    margin: 0 4px 0 auto !important;
    flex-shrink: 0 !important;
  }

  body .hamburger {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    padding: 3px !important;
  }
}

/* ── Premium Vision Page Manifesto Sections Redesign ──────────────── */

/* Chapters Section */
body.vision-page .chapters-section {
  background: #ffffff !important;
  border-top: 1px solid var(--pr-border) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
}

body.vision-page .chapters-section .eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
}

body.vision-page .chapters-section .section-title {
  color: var(--pr-navy) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

body.vision-page .chapters-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 48px !important;
  border: none !important;
  background: transparent !important;
}

body.vision-page .chapter-card {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-radius: var(--pr-r-xl) !important;
  box-shadow: var(--pr-shadow-card) !important;
  padding: 32px 28px !important;
  min-height: auto !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.vision-page .chapter-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--pr-blue) !important;
  border-radius: var(--pr-r-xl) var(--pr-r-xl) 0 0 !important;
  display: block !important;
  opacity: 0.8 !important;
}

body.vision-page .chapter-card::after {
  display: none !important;
  /* Remove the old ugly line */
}

body.vision-page .chapter-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-color: rgba(10, 79, 183, 0.25) !important;
  background: #ffffff !important;
}

body.vision-page .chapter-num {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin-bottom: 20px !important;
  padding: 5px 12px !important;
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.15) !important;
  border-left: 3px solid var(--pr-blue) !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

body.vision-page .chapter-title {
  color: var(--pr-navy) !important;
  font-family: var(--pr-font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  margin-bottom: 6px !important;
}

body.vision-page .chapter-odia {
  color: var(--pr-yellow) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

body.vision-page .chapter-desc {
  color: var(--pr-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Pledges Section */
body.vision-page .pledges-register-section {
  background: #fbfaf6 !important;
  border-top: 1px solid var(--pr-border) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  padding: clamp(80px, 8vw, 112px) 0 !important;
}

body.vision-page .pledges-register-eyebrow {
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.12) !important;
  border-left: 3px solid var(--pr-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
}

body.vision-page .pledges-register-lead {
  color: var(--pr-text-muted) !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
  margin-bottom: 40px !important;
}

body.vision-page .pledge-full {
  background: #ffffff !important;
  border: 1px solid var(--pr-border) !important;
  border-radius: var(--pr-r-xl) !important;
  box-shadow: var(--pr-shadow-card) !important;
  padding: 32px 36px !important;
  margin-bottom: 20px !important;
  border-left: 6px solid var(--pr-blue) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

body.vision-page .pledge-full:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pr-shadow-card-hover) !important;
  border-color: rgba(10, 79, 183, 0.2) !important;
  border-left-color: var(--pr-yellow) !important;
  background: #ffffff !important;
}

body.vision-page .pledge-full-header {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

body.vision-page .pledge-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  height: 48px !important;
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.06) !important;
  border: 1px solid rgba(10, 79, 183, 0.16) !important;
  border-radius: 50% !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.vision-page .pledge-full-meta {
  display: flex !important;
  flex-direction: column !important;
}

body.vision-page .pledge-full-odia {
  color: var(--pr-yellow) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

body.vision-page .pledge-full-en {
  color: var(--pr-navy) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

body.vision-page .pledge-full-meaning {
  color: var(--pr-text-muted) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.vision-page .pledge-full-body {
  color: var(--pr-text-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
}

body.vision-page .pledge-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.vision-page .pledge-num-tag {
  padding: 6px 14px !important;
  color: var(--pr-blue) !important;
  background: rgba(10, 79, 183, 0.05) !important;
  border: 1px solid rgba(10, 79, 183, 0.15) !important;
  border-radius: var(--pr-r-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ==========================================
   EDITORIAL WHITE-FADE HERO BANNER REDESIGN
   ========================================== */

/* ==========================================
   THREE INDEPENDENT RESPONSIVE HERO BREAKPOINTS
   1. Desktop (min-width: 1025px)
   2. Tablet / Foldable (768px to 1024px)
   3. Mobile (max-width: 767px)
   ========================================== */

/* 1. DESKTOP (>= 1025px) - Untouched Flag + Person Hero */
@media (min-width: 1025px) {

  body.has-hero .hero,
  body .hero {
    position: relative !important;
    width: 100% !important;
    min-height: clamp(480px, 60vh, 640px) !important;
    background-color: #ffffff !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    isolation: isolate !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--pr-border, #e2e8f0) !important;
  }

  body.has-hero .hero::before,
  body.has-hero .hero::after,
  body .hero::before,
  body .hero::after {
    display: none !important;
    content: none !important;
  }

  body.has-hero .hero-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: min(100% - 64px, var(--max-w, 1360px)) !important;
    max-width: var(--max-w, 1360px) !important;
    margin: 0 auto !important;
    padding-top: 56px !important;
    padding-bottom: 64px !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body.has-hero .hero-content {
    width: 100% !important;
    max-width: 780px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    z-index: 3 !important;
    position: relative !important;
  }

  body.has-hero .hero-headline,
  body .hero-headline {
    color: #0b192c !important;
    font-size: clamp(48px, 5.5vw, 68px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin: 0 0 14px 0 !important;
    text-shadow: none !important;
    letter-spacing: -0.015em !important;
  }

  body.has-hero .hero-headline-odia {
    color: #f6c31a !important;
    font-size: clamp(22px, 2.5vw, 32px) !important;
    font-weight: 700 !important;
    margin: 0 0 22px 0 !important;
    display: block !important;
    text-shadow: none !important;
  }

  body.has-hero .hero-body,
  body.has-hero p.hero-body {
    display: block !important;
    color: #334155 !important;
    font-size: 17px !important;
    line-height: 1.68 !important;
    margin: 0 0 34px 0 !important;
    text-shadow: none !important;
    max-width: 540px !important;
  }

  body.has-hero .hero-body-first-line,
  body.has-hero .hero-body-rest {
    display: inline !important;
  }

  body.has-hero .hero-body strong {
    color: #0f172a !important;
    font-weight: 700 !important;
  }

  body.has-hero .hero-mobile-media {
    display: none !important;
  }

  body.has-hero .hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    align-items: center !important;
    margin-top: 0 !important;
  }

  body.has-hero .hero-ctas .btn-primary {
    background: #facc15 !important;
    color: #0b192c !important;
    border: 1px solid #facc15 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25) !important;
  }

  body.has-hero .hero-ctas .btn-outline {
    background: transparent !important;
    color: #0b192c !important;
    border: 1.5px solid #0b192c !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }
}

/* 2. TABLET & FOLDABLE (768px to 1024px) - Dedicated Text-First Hero (No Image, ~65vh Height, Full Content & CTAs) */
@media (min-width: 768px) and (max-width: 1024px) {

  body.has-hero .hero,
  body .hero {
    position: relative !important;
    width: 100% !important;
    min-height: clamp(440px, 65vh, 580px) !important;
    background: #ffffff !important;
    background-image: none !important;
    /* No image, no fade, no overlay */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    isolation: isolate !important;
    margin: 0 !important;
    padding: 40px 32px 0 32px !important;
    border-bottom: 1px solid var(--pr-border, #e2e8f0) !important;
  }

  body.has-hero .hero::before,
  body.has-hero .hero::after,
  body .hero::before,
  body .hero::after {
    display: none !important;
    content: none !important;
  }

  body.has-hero .hero-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 0 32px 0 !important;
    box-sizing: border-box !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body.has-hero .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 3 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* REMOVE ALL IMAGE CONTAINERS ON TABLET/FOLDABLE (NO BLANK CONTAINER, NO RESERVED SPACE) */
  body.has-hero .hero-mobile-media,
  body.has-hero .hero-mobile-img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Heading "Odisha For Odias" */
  body.has-hero .hero-headline,
  body .hero-headline {
    color: #0b192c !important;
    font-size: clamp(44px, 5.5vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    letter-spacing: -0.015em !important;
  }

  /* Odia Subtitle */
  body.has-hero .hero-headline-odia {
    color: #f6c31a !important;
    font-size: clamp(20px, 2.6vw, 26px) !important;
    font-weight: 700 !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
    text-align: center !important;
    text-shadow: none !important;
  }

  /* Paragraph Text */
  body.has-hero .hero-body,
  body.has-hero p.hero-body {
    display: block !important;
    color: #334155 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin: 0 auto 30px auto !important;
    text-align: center !important;
    text-shadow: none !important;
    max-width: 660px !important;
  }

  body.has-hero .hero-body-first-line,
  body.has-hero .hero-body-rest {
    display: inline !important;
  }

  body.has-hero .hero-body strong {
    color: #0f172a !important;
    font-weight: 700 !important;
  }

  /* CTA Buttons */
  body.has-hero .hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 16px !important;
    align-items: center !important;
    margin-top: 0 !important;
  }

  body.has-hero .hero-ctas .btn {
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
  }

  body.has-hero .hero-ctas .btn-primary {
    background: #facc15 !important;
    color: #0b192c !important;
    border: 1px solid #facc15 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25) !important;
  }

  body.has-hero .hero-ctas .btn-outline {
    background: transparent !important;
    color: #0b192c !important;
    border: 1.5px solid #0b192c !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }
}

/* 3. MOBILE (<= 767px) - Premium Political Campaign Layout (Portrait visible on right side) */
@media (max-width: 767px) {

  body.has-hero .hero,
  body .hero {
    position: relative !important;
    width: 100% !important;
    min-height: clamp(480px, 72vh, 600px) !important;
    height: auto !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    padding: clamp(76px, 10vw, 88px) 16px 0 16px !important;
    overflow: hidden !important;
    border-bottom: none !important;
    margin: 0 !important;
  }

  body.has-hero .hero::before,
  body .hero::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(ellipse 80% 70% at 85% 60%, rgba(10, 79, 183, 0.16) 0%, rgba(10, 79, 183, 0.05) 50%, transparent 80%),
      linear-gradient(135deg, #FFFFFF 0%, #F2F6FC 40%, #E5EFFB 80%, #DAE7F7 100%) !important;
    z-index: 0 !important;
  }

  body.has-hero .hero::after,
  body .hero::after {
    display: block !important;
    content: '' !important;
    opacity: 0.03 !important;
  }

  body.has-hero .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: clamp(400px, 62vh, 520px) !important;
  }

  body.has-hero .hero-content {
    flex: 1 1 58% !important;
    max-width: 60% !important;
    padding: 12px 0 28px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  body.has-hero .hero-portrait-col {
    display: flex !important;
    flex: 0 0 40% !important;
    max-width: 42% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body.has-hero .hero-portrait-img {
    display: block !important;
    width: 100% !important;
    max-height: clamp(220px, 38vh, 320px) !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    margin: 0 auto !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 95%) !important;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 95%) !important;
  }

  .hero-portrait-light-aura {
    width: 220px !important;
    height: 220px !important;
    right: -10px !important;
    bottom: 0 !important;
  }

  /* Heading "Odisha For Odias" */
  body.has-hero .hero-headline,
  body .hero-headline {
    color: #0b192c !important;
    font-size: clamp(25px, 6.8vw, 34px) !important;
    font-weight: 800 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.1 !important;
    text-align: left !important;
    text-shadow: none !important;
    letter-spacing: -0.015em !important;
  }

  /* Odia Subtitle */
  body.has-hero .hero-headline-odia {
    color: #d8a21d !important;
    font-size: clamp(14px, 3.8vw, 19px) !important;
    font-weight: 700 !important;
    margin: 2px 0 10px 0 !important;
    display: block !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  /* Paragraph Text */
  body.has-hero .hero-body,
  body.has-hero p.hero-body {
    display: block !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    line-height: 1.48 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-shadow: none !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.has-hero .hero-body-first-line,
  body.has-hero .hero-body-rest {
    display: inline !important;
  }

  /* CTA BUTTONS */
  body.has-hero .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
    height: auto !important;
  }

  body.has-hero .hero-ctas .btn {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    min-height: 40px !important;
  }

  body.has-hero .hero-ctas .btn-primary {
    background: var(--pr-yellow) !important;
    color: #0b192c !important;
    border: 1px solid var(--pr-yellow) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(246, 194, 26, 0.25) !important;
  }

  body.has-hero .hero-ctas .btn-outline {
    background: transparent !important;
    color: #0b192c !important;
    border: 1.5px solid #0b192c !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }
}

/* ==========================================
   ABOUT PAGE FLAG COLORS ("Three colours. One vision.")
   ========================================== */
body.about-page .about-flag-card--gold {
  --flag-accent: #fade25 !important;
}

body.about-page .about-flag-card--gold::before {
  background: #fade25 !important;
}

body.about-page .about-flag-card--gold .about-flag-swatch {
  background: #fade25 !important;
  border-color: rgba(250, 222, 37, 0.5) !important;
}

body.about-page .about-flag-card--white {
  --flag-accent: #fdfeff !important;
}

body.about-page .about-flag-card--white::before {
  background: #fdfeff !important;
  border-right: 1px solid #e2e8f0 !important;
}

body.about-page .about-flag-card--white .about-flag-swatch {
  background: #fdfeff !important;
  border-color: #cbd5e1 !important;
}

body.about-page .about-flag-card--blue {
  --flag-accent: #296db6 !important;
}

body.about-page .about-flag-card--blue::before {
  background: #296db6 !important;
}

body.about-page .about-flag-card--blue .about-flag-swatch {
  background: #296db6 !important;
  border-color: rgba(41, 109, 182, 0.5) !important;
}

/* ============================================================
   REMOVE ALL SECTION SEPARATOR LINES & DIVIDERS ACROSS WHOLE SITE
   ============================================================ */
.pledges-trio-section::before,
.chapters-section::before,
.hero-trust-divider,
.contact-info::before,
.newsroom-rule,
.newsroom-rule-thin,
hr,
.divider,
.section-divider {
  display: none !important;
  height: 0 !important;
  border: none !important;
}

section,
.pledges-trio-section,
.founder-section,
.pledges-grid-section,
.three-fights-section,
.press-kit-section,
.district-grid-section,
.about-pillars-section,
.timeline-section,
.stats-section,
.ideology-section,
.personas-section {
  border-top: none !important;
  border-bottom: none !important;
}

/* Mirror / Invert Founder Portrait Image Horizontally */
.founder-portrait-img img,
.founder-official-image-slot img,
body .founder-portrait-img img {
  transform: scaleX(-1) !important;
}

/* Founder role kicker styling */
.founder-role-kicker {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  color: var(--pr-gold, #D8A21D) !important;
  display: block !important;
  max-width: 210px !important;
}

/* ============================================================
   REMOVE ALL SECTION SEPARATOR LINES & DIVIDERS ACROSS WHOLE SITE
   ============================================================ */
.pledges-trio-section::before,
.chapters-section::before,
.hero-trust-divider,
.contact-info::before,
.newsroom-rule,
.newsroom-rule-thin,
hr,
.divider,
.section-divider {
  display: none !important;
  height: 0 !important;
  border: none !important;
}

section,
.pledges-trio-section,
.founder-section,
.pledges-grid-section,
.three-fights-section,
.press-kit-section,
.district-grid-section,
.about-pillars-section,
.timeline-section,
.stats-section,
.ideology-section,
.personas-section {
  border-top: none !important;
  border-bottom: none !important;
}

/* Mirror / Invert Founder Portrait Image Horizontally */
.founder-portrait-img img,
.founder-official-image-slot img,
body .founder-portrait-img img {
  transform: scaleX(-1) !important;
}

/* Stat Cards & Persona Cards Scroll Pop-Out Animation & Hover */
.stat-card,
.persona-card {
  will-change: transform, opacity;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.55s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 16px 38px rgba(11, 25, 44, 0.12) !important;
}

.persona-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(11, 25, 44, 0.15) !important;
}



/* Pillar Card Header & Swatches */
body.about-page .pillar-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

body.about-page .pillar-icon-block {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #2474D2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.about-page .pillar-icon-block svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  display: block;
}

/* ============================================================
   ABOUT PAGE — PHONE MOBILE COMPACT 2-COLUMN LAYOUT (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ── NINE PILLARS — white-background reference design ── */
  html body.about-page .about-pillars-section {
    padding: 44px 0 56px !important;
    background: #f5f6f8 !important;
    background-color: #f5f6f8 !important;
    background-image: none !important;
  }

  html body.about-page .about-pillars-section::before {
    display: none !important;
  }

  /* Section title & lead: switch to dark text */
  body.about-page .about-pillars-section .eyebrow {
    color: #0a4fb7 !important;
  }

  body.about-page .about-pillars-section .section-title {
    color: #071126 !important;
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.18 !important;
    margin-top: 8px !important;
  }

  body.about-page .about-pillars-section .about-pillars-lead {
    color: rgba(13, 26, 42, 0.65) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  /* Grid */
  body.about-page .about-pillars-section .pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 28px !important;
    border: none !important;
    background: transparent !important;
  }

  /* White card */
  html body.about-page .about-pillars-section .pillar-card,
  html body.about-page .about-pillars-section .pillar-card:nth-child(n + 5),
  html body.about-page .about-pillars-section .pillar-card:last-child {
    grid-column: auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 16px 14px 18px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(13, 26, 42, 0.07) !important;
    box-shadow: 0 2px 12px rgba(13, 26, 42, 0.07) !important;
    overflow: visible !important;
  }

  html body.about-page .about-pillars-section .pillar-card:last-child,
  body.about-page .about-pillars-section .pillar-card:last-child {
    grid-column: auto !important;
  }

  /* Card header: icon + badge side by side */
  body.about-page .about-pillars-section .pillar-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Blue icon block with white SVG icon centered */
  body.about-page .about-pillars-section .pillar-icon-block {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #2474D2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.about-page .pillar-icon-block svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    display: block !important;
  }

  /* Yellow badge - pale soft yellow with top border & golden text */
  body.about-page .about-pillars-section .pillar-number {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #DA8900 !important;
    background: #FFF7E6 !important;
    border: 1px solid rgba(251, 192, 45, 0.25) !important;
    border-top: 2px solid #F9CE27 !important;
    border-radius: 3px !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Title & body text */
  body.about-page .about-pillars-section .pillar-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin-bottom: 7px !important;
    max-width: 100% !important;
    color: #071126 !important;
  }

  body.about-page .about-pillars-section .pillar-body {
    font-size: 12px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    color: rgba(13, 26, 42, 0.6) !important;
  }

  /* ── WHY THIS PARTY WAS FORMED (2-col, compact) ── */
  body.about-page .about-definition-section {
    padding: 44px 0 52px !important;
  }

  body.about-page .about-definition-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    margin-top: 22px !important;
  }

  body.about-page .about-definition-card {
    min-height: 0 !important;
    padding: 14px 12px 16px !important;
    border-top-width: 3px !important;
  }

  body.about-page .about-definition-kicker {
    font-size: 10px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    margin-bottom: 10px !important;
  }

  body.about-page .about-definition-card h3 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  body.about-page .about-definition-card p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  body.about-page .about-definition-lead {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Section heading size reduction */
  body.about-page .about-pillars-section .section-title,
  body.about-page .about-definition-section .section-title {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.18 !important;
    margin-top: 8px !important;
  }

  /* ── PARTY LEADERSHIP & ORGANISATION (2-col compact) ── */
  body.about-page .about-organisation-section {
    padding: 44px 0 52px !important;
  }

  body.about-page .about-organisation-section .section-title {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.18 !important;
  }

  body.about-page .org-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    white-space: nowrap !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 22px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.about-page .org-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }

  body.about-page .org-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
  }

  body.about-page .org-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.about-page .org-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  body.about-page .org-card-name {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  body.about-page .org-card-role {
    font-size: 10.5px !important;
    margin-top: 3px !important;
  }

  body.about-page .org-group-title {
    font-size: 15px !important;
    margin: 22px 0 10px !important;
  }

  body.about-page .media-cell-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 24px !important;
  }

  body.about-page .media-cell-sidebar {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.about-page .media-cell-main {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.about-page .media-cell-main .org-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* ── VISION PAGE — COMPACT MOBILE LAYOUT (≤ 640px) ── */
  body.vision-page .pledges-register-section {
    padding: 32px 0 44px !important;
  }

  /* Top banner hero */
  body.vision-page .pledges-banner-hero {
    padding: 16px 16px 18px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }

  body.vision-page .pledges-banner-illustration {
    max-height: 90px !important;
    opacity: 0.4 !important;
  }

  body.vision-page .illustration-img {
    max-height: 90px !important;
  }

  body.vision-page .pledges-banner-title {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  body.vision-page .pledges-banner-sub {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  /* Grid of pledge cards */
  body.vision-page .pledges-grid-ref {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  /* Compact pledge card */
  html body.vision-page .pledge-card-ref {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 12px 14px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(11, 73, 170, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(7, 17, 38, 0.04) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body.vision-page .pledge-ribbon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    height: 22px !important;
    width: auto !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #0b49aa !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    clip-path: none !important;
    align-self: flex-start !important;
  }

  body.vision-page .pledge-icon-circle {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    background: rgba(11, 73, 170, 0.08) !important;
  }

  body.vision-page .pledge-icon-circle svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Main content text */
  body.vision-page .pledge-main-content {
    padding: 8px 0 0 0 !important;
  }

  body.vision-page .pledge-accent-bar {
    display: none !important;
  }

  body.vision-page .pledge-card-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    color: #071126 !important;
  }

  body.vision-page .pledge-card-desc {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: rgba(13, 26, 42, 0.68) !important;
  }

  /* Other vision cards compact styling */
  body.vision-page .chapter-card,
  body.vision-page .phase-card,
  body.vision-page .vision-card {
    padding: 14px 14px 16px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }

  body.vision-page .chapter-title,
  body.vision-page .phase-title,
  body.vision-page .vision-pillar {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  body.vision-page .chapter-body,
  body.vision-page .phase-body,
  body.vision-page .vision-body {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

/* ── CONTACT PAGE — COMPACT 2-COLUMN MOBILE LAYOUT (≤ 1024px) ── */
.contact-card-icon::before,
.contact-card-icon::after,
body.contact-page .contact-card-icon::before,
body.contact-page .contact-card-icon::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 1024px) {

  body.contact-page .contact-channel-grid,
  body.contact-page main>section:nth-of-type(2) .container>div,
  body.contact-page .contact-channels,
  body.contact-page .contact-cards,
  .contact-channel-grid,
  .contact-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.contact-page .contact-card,
  .contact-card {
    padding: 14px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    min-height: 0 !important;
  }

  body.contact-page .contact-card-icon,
  .contact-card-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 9.5px !important;
    margin-bottom: 8px !important;
    margin-right: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.contact-page .contact-card-title,
  .contact-card-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    min-height: 2.6em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.contact-page .contact-card-detail,
  .contact-card-detail {
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    word-break: break-word !important;
  }

  body.contact-page .contact-cards>.contact-card:first-child,
  body.contact-page .contact-cards>.contact-card:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* ============================================================
   CLEAN RESPONSIVE LAYOUT: STATS SECTION & ODISHA LANDSCAPE (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* 1. Remove all artificial height & background overlays on Stats Section */
  body.has-hero .stats-section,
  body .stats-section,
  .stats-section {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: clamp(28px, 4vw, 44px) !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #F8FAFD !important;
    background: #F8FAFD !important;
    box-sizing: border-box !important;
  }

  body.has-hero .stats-section::before,
  body .stats-section::before,
  .stats-section::before,
  body.has-hero .stats-section::after,
  body .stats-section::after,
  .stats-section::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
  }

  body.has-hero .stats-section>.container,
  body .stats-section>.container,
  .stats-section>.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.has-hero .stats-header,
  body .stats-header,
  .stats-header {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  body.has-hero .stats-grid,
  body .stats-grid,
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.has-hero .stat-card,
  body .stat-card,
  .stat-card {
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* 2. Flow Ideology Section directly after Stats Section with 0 gap */
  body.has-hero .ideology-section,
  body .ideology-section,
  .ideology-section {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    background: #2A6DB5 !important;
    background-color: #2A6DB5 !important;
    box-sizing: border-box !important;
  }

  body.has-hero .ideology-section::before,
  body .ideology-section::before,
  .ideology-section::before,
  body.has-hero .ideology-section::after,
  body .ideology-section::after,
  .ideology-section::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
  }

  /* 3. Image block fills available width in standard document flow */
  body.has-hero .ideology-bg-image,
  body .ideology-bg-image,
  .ideology-bg-image {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.has-hero .ideology-bg-image img,
  body .ideology-bg-image img,
  .ideology-bg-image img {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* 4. Text Container follows immediately under the image */
  body.has-hero .ideology-section>.container,
  body .ideology-section>.container,
  body.has-hero .ideology-container,
  body .ideology-container,
  .ideology-container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 32px 20px 48px 20px !important;
    background-color: #2A6DB5 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 580px) {

  body.has-hero .stats-grid,
  body .stats-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   REBUILT IDEOLOGY COMPONENT (SINGLE TWO-COLUMN GRID ROW)
   ============================================================ */
/* ============================================================
   WAVY HERO SPLIT SECTION (IDEOLOGY SECTION)
   ============================================================ */
body.has-hero .ideology-section,
body .ideology-section,
.ideology-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  clip-path: url(#topClip) !important;
  -webkit-clip-path: url(#topClip) !important;
  display: block !important;
}

body.has-hero .ideology-section::before,
body .ideology-section::before,
.ideology-section::before,
body.has-hero .ideology-section::after,
body .ideology-section::after,
.ideology-section::after {
  display: none !important;
  content: none !important;
}

body.has-hero .ideology-photo,
body .ideology-photo,
.ideology-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 72% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
}

/* Straight-edged blue panel — right side only, no curve on this boundary */
body.has-hero .ideology-panel,
body .ideology-panel,
.ideology-panel,
.hero-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 45% !important;
  background: #2A6DB5 !important;
  z-index: 2 !important;
  opacity: 1 !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.has-hero .ideology-copy,
body .ideology-copy,
.ideology-copy {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 45% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px 64px 48px 64px !important;
  color: #ffffff !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, text-shadow 0.4s ease, box-shadow 0.4s ease !important;
  cursor: default !important;
}

/* Hover reveal effect: background image shines through behind text (DESKTOP / TAB ABOVE 768px ONLY) */
@media (min-width: 769px) {

  body.has-hero .ideology-copy,
  body .ideology-copy,
  .ideology-copy {
    cursor: pointer !important;
  }

  body.has-hero .ideology-section:has(.ideology-copy:hover) .ideology-panel,
  body .ideology-section:has(.ideology-copy:hover) .ideology-panel,
  .ideology-section:has(.ideology-copy:hover) .ideology-panel,
  .ideology-panel.reveal-photo-bg {
    opacity: 0 !important;
  }

  body.has-hero .ideology-copy:hover,
  body .ideology-copy:hover,
  .ideology-copy:hover,
  .ideology-copy.hovered-active {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

body.has-hero .ideology-headline,
body .ideology-headline,
.ideology-headline {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(26px, 2.8vw, 42px) !important;
  line-height: 1.18 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.ideology-divider {
  display: none !important;
}

body.has-hero .ideology-body,
body .ideology-body,
.ideology-body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 16px 0 20px 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  text-align: left !important;
}

body.has-hero .ideology-callout,
body .ideology-callout,
.ideology-callout {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  font-weight: 700 !important;
  color: #FADE25 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* RESPONSIVE BREAKPOINTS FOR WAVY HERO SPLIT SECTION */
@media (max-width: 1024px) {

  body.has-hero .ideology-panel,
  body .ideology-panel,
  .ideology-panel {
    width: 50% !important;
  }

  body.has-hero .ideology-copy,
  body .ideology-copy,
  .ideology-copy {
    width: 50% !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
}

@media (max-width: 768px) {

  /* High-specificity override for mobile (all sizes <= 768px): remove white space above & below ideology image section */
  html body.has-hero main>section.stats-section:not(.hero):not(.page-hero):not(.final-cta-section),
  html body main>section.stats-section:not(.hero):not(.page-hero):not(.final-cta-section),
  html body.has-hero section.stats-section,
  html body section.stats-section,
  body.has-hero .stats-section,
  body .stats-section,
  .stats-section {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #F8FAFD !important;
    box-sizing: border-box !important;
  }

  html body.has-hero main>section.stats-section:not(.hero):not(.page-hero)>.container,
  html body.has-hero .stats-section>.container,
  body .stats-section>.container,
  .stats-section>.container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  html body.has-hero .stats-grid,
  body .stats-grid,
  .stats-grid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  html body.has-hero .stat-card,
  body .stat-card,
  .stat-card {
    margin-bottom: 0 !important;
  }

  html body.has-hero main>section.ideology-section:not(.hero):not(.page-hero):not(.final-cta-section),
  html body main>section.ideology-section:not(.hero):not(.page-hero):not(.final-cta-section),
  html body.has-hero section.ideology-section,
  html body section.ideology-section,
  body.has-hero .ideology-section,
  body .ideology-section,
  .ideology-section {
    height: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background: transparent !important;
    overflow: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  body.has-hero .ideology-photo,
  body .ideology-photo,
  .ideology-photo {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: 360px !important;
    object-fit: cover !important;
    object-position: center 72% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
  }

  body.has-hero .ideology-panel,
  body .ideology-panel,
  .ideology-panel {
    display: none !important;
  }

  body.has-hero .ideology-copy,
  body .ideology-copy,
  .ideology-copy {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: #2A6DB5 !important;
    padding: 28px 20px 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
  }

  body.has-hero .ideology-copy::before,
  body .ideology-copy::before,
  .ideology-copy::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -24px !important;
    left: 0 !important;
    width: 100% !important;
    height: 25px !important;
    background: #2A6DB5 !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C180,20 320,120 500,60 C680,0 820,50 1000,30 L1000,100 L0,100 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C180,20 320,120 500,60 C680,0 820,50 1000,30 L1000,100 L0,100 Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E") !important;
    mask-size: 100% 100% !important;
    -webkit-mask-size: 100% 100% !important;
    z-index: 3 !important;
  }

  /* High specificity override for Personas, Founder, and Final CTA top/bottom padding on mobile */
  html body.has-hero main>section.personas-section:not(.hero):not(.page-hero):not(.final-cta-section),
  html body main>section.personas-section:not(.hero):not(.page-hero):not(.final-cta-section),
  html body.has-hero section.personas-section,
  html body section.personas-section,
  body.has-hero .personas-section,
  body .personas-section,
  .personas-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html body.has-hero main>section.founder-section,
  html body.has-hero section.founder-section,
  body.has-hero .founder-section,
  .founder-section,
  html body.has-hero main>section.final-cta-section,
  html body.has-hero section.final-cta-section,
  body.has-hero .final-cta-section,
  .final-cta-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
}

/* ============================================================
   GLOBAL FOOTER UNIFORM STYLING (ALL PAGES)
   ============================================================ */
html body .site-footer,
body .site-footer,
body.has-hero .site-footer,
.site-footer {
  background: #0B1727 !important;
  background-color: #0B1727 !important;
  border-top: 3.5px solid #F6C21A !important;
  color: #ffffff !important;
  position: relative !important;
}

/* ============================================================
   APPLE-STYLE HORIZONTAL SCROLLING CAROUSEL — PERSONAS SECTION
   ============================================================ */
body.has-hero .personas-grid,
body .personas-grid,
.personas-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: 16px !important;
  padding-bottom: 44px !important;
  padding-right: clamp(24px, 5.5vw, 90px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab !important;
}

body.has-hero .personas-grid.is-dragging,
body .personas-grid.is-dragging,
.personas-grid.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
  scroll-snap-type: none !important;
}

body.has-hero .personas-grid::-webkit-scrollbar,
body .personas-grid::-webkit-scrollbar,
.personas-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* DESKTOP CARD SIZING & PROPORTIONS (3 full + 15-25% peek of 4th card) */
@media (min-width: 1025px) {

  body.has-hero .persona-card,
  body .persona-card,
  .persona-card {
    flex: 0 0 clamp(360px, 26.5vw, 420px) !important;
    width: clamp(360px, 26.5vw, 420px) !important;
    min-width: clamp(360px, 26.5vw, 420px) !important;
    max-width: clamp(360px, 26.5vw, 420px) !important;
    height: clamp(460px, 32vw, 540px) !important;
    min-height: 460px !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }
}

/* TABLET CARD SIZING (2 full + ~20% peek of 3rd card) */
@media (min-width: 769px) and (max-width: 1024px) {

  body.has-hero .persona-card,
  body .persona-card,
  .persona-card {
    flex: 0 0 clamp(340px, 42vw, 420px) !important;
    width: clamp(340px, 42vw, 420px) !important;
    min-width: clamp(340px, 42vw, 420px) !important;
    max-width: clamp(340px, 42vw, 420px) !important;
    height: 440px !important;
    min-height: 440px !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }
}

/* MOBILE CARD SIZING (1 full + ~18% peek of 2nd card) */
@media (max-width: 768px) {

  body.has-hero .persona-card,
  body .persona-card,
  .persona-card {
    flex: 0 0 84vw !important;
    width: 84vw !important;
    min-width: 270px !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 360px !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }
}

body.has-hero .persona-card:nth-child(n),
body .persona-card:nth-child(n),
.persona-card:nth-child(n) {
  grid-column: auto !important;
}

/* ============================================================
   NINE PILLARS SECTION — REFERENCE DESIGN OVERRIDE
   ============================================================ */
body.about-page .about-pillars-section,
.about-pillars-section {
  background-color: #f8fafc !important;
  background-image: none !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: center !important;
}

body.about-page .about-pillars-section .container,
.about-pillars-section .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

html body.about-page .about-pillars-section .eyebrow,
body.about-page .about-pillars-section .eyebrow,
.about-pillars-section .eyebrow {
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 auto 12px auto !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

html body.about-page .about-pillars-section .eyebrow::before,
html body.about-page .about-pillars-section .eyebrow::after,
body.about-page .about-pillars-section .eyebrow::before,
body.about-page .about-pillars-section .eyebrow::after,
.about-pillars-section .eyebrow::before,
.about-pillars-section .eyebrow::after {
  display: none !important;
  content: none !important;
}

html body.about-page .about-pillars-section .section-title,
html body.about-page .about-pillars-section #pillars-h2,
body.about-page .about-pillars-section .section-title,
body.about-page .about-pillars-section #pillars-h2,
.about-pillars-section .section-title,
#pillars-h2 {
  color: #0f172a !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 auto 44px auto !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

body.about-page .about-pillars-section .about-pillars-lead,
.about-pillars-section .about-pillars-lead {
  display: none !important;
}

html body.about-page .about-pillars-section .pillars-grid,
html body.about-page .pillars-grid,
body.about-page .about-pillars-section .pillars-grid,
body.about-page .pillars-grid,
.about-pillars-section .pillars-grid,
.pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  margin-top: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

@media (max-width: 1024px) {

  html body.about-page .about-pillars-section .pillars-grid,
  html body.about-page .pillars-grid,
  body.about-page .about-pillars-section .pillars-grid,
  body.about-page .pillars-grid,
  .about-pillars-section .pillars-grid,
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {

  html body.about-page .about-pillars-section .pillars-grid,
  html body.about-page .pillars-grid,
  body.about-page .about-pillars-section .pillars-grid,
  body.about-page .pillars-grid,
  .about-pillars-section .pillars-grid,
  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Pillar Card */
html body.about-page .about-pillars-section .pillar-card,
html body.about-page .about-pillars-section .pillar-card:nth-child(n),
html body.about-page .about-pillars-section .pillar-card:last-child,
body.about-page .about-pillars-section .pillar-card,
body.about-page .about-pillars-section .pillar-card:nth-child(n),
body.about-page .about-pillars-section .pillar-card:last-child,
body.about-page .pillar-card,
.pillar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  position: relative !important;
  overflow: visible !important;
  text-align: left !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.about-page .about-pillars-section .pillar-card:hover,
body.about-page .pillar-card:hover,
.pillar-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

body.about-page .pillar-card::before,
body.about-page .pillar-card::after,
.pillar-card::before,
.pillar-card::after {
  display: none !important;
  content: none !important;
}

/* Header inside card */
body.about-page .pillar-card-header,
.pillar-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Badge (Official Flag Yellow rounded box) */
body.about-page .pillar-badge,
.pillar-badge {
  background: #fade25 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  width: 36px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(250, 222, 37, 0.35) !important;
  border: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Icon (Official Flag Blue) */
body.about-page .pillar-icon,
.pillar-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #2a6db5 !important;
}

body.about-page .pillar-icon svg,
.pillar-icon svg {
  stroke: #2a6db5 !important;
}

width: 28px !important;
height: 28px !important;
background: transparent !important;
border-radius: 0 !important;
}

body.about-page .pillar-icon svg,
.pillar-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #1e3a8a !important;
  color: #1e3a8a !important;
  display: block !important;
}

/* Title */
body.about-page .pillar-name,
.pillar-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  flex-grow: 1 !important;
}

/* Body description */
body.about-page .pillar-body,
.pillar-body {
  color: #475569 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* ============================================================
   WHY THIS PARTY WAS FORMED — REFERENCE DESIGN OVERRIDE
   ============================================================ */
html body.about-page .about-definition-section,
body.about-page .about-definition-section,
.about-definition-section {
  background-color: #f8fafc !important;
  background-image: none !important;
  padding: clamp(60px, 7vw, 96px) 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: center !important;
}

html body.about-page .about-definition-section .container,
body.about-page .about-definition-section .container,
.about-definition-section .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

html body.about-page .about-definition-section .eyebrow,
body.about-page .about-definition-section .eyebrow,
.about-definition-section .eyebrow {
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 auto 12px auto !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

html body.about-page .about-definition-section .eyebrow::before,
html body.about-page .about-definition-section .eyebrow::after,
body.about-page .about-definition-section .eyebrow::before,
body.about-page .about-definition-section .eyebrow::after,
.about-definition-section .eyebrow::before,
.about-definition-section .eyebrow::after {
  display: none !important;
  content: none !important;
}

html body.about-page .about-definition-section .section-title,
html body.about-page .about-definition-section #definition-h2,
body.about-page .about-definition-section .section-title,
body.about-page .about-definition-section #definition-h2,
.about-definition-section .section-title,
#definition-h2 {
  color: #0f172a !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 auto 14px auto !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

html body.about-page .about-definition-section .about-definition-lead,
body.about-page .about-definition-section .about-definition-lead,
.about-definition-section .about-definition-lead {
  display: block !important;
  max-width: 720px !important;
  margin: 0 auto 44px auto !important;
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* 4-column Grid */
html body.about-page .about-definition-section .about-definition-grid,
body.about-page .about-definition-section .about-definition-grid,
body.about-page .about-definition-grid,
.about-definition-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

@media (max-width: 1024px) {

  html body.about-page .about-definition-section .about-definition-grid,
  body.about-page .about-definition-section .about-definition-grid,
  .about-definition-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {

  html body.about-page .about-definition-section .about-definition-grid,
  body.about-page .about-definition-section .about-definition-grid,
  .about-definition-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Card Styling */
html body.about-page .about-definition-section .about-definition-card,
body.about-page .about-definition-section .about-definition-card,
body.about-page .about-definition-card,
.about-definition-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px 22px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  position: relative !important;
  overflow: visible !important;
  text-align: left !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body.about-page .about-definition-section .about-definition-card:hover,
body.about-page .about-definition-card:hover,
.about-definition-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

body.about-page .about-definition-card::before,
body.about-page .about-definition-card::after,
.about-definition-card::before,
.about-definition-card::after {
  display: none !important;
  content: none !important;
}

/* Blue Box Kicker/Badge */
html body.about-page .about-definition-card .about-definition-kicker,
body.about-page .about-definition-card .about-definition-kicker,
.about-definition-card .about-definition-kicker {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.25) !important;
  border: none !important;
  margin: 0 0 16px 0 !important;
  line-height: 1 !important;
}

/* Icon inside kicker */
body.about-page .about-definition-card .about-definition-kicker svg,
.about-definition-card .about-definition-kicker svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
  display: block !important;
}

/* Card Heading */
html body.about-page .about-definition-card h3,
body.about-page .about-definition-card h3,
.about-definition-card h3 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

/* Card Description */
html body.about-page .about-definition-card p,
body.about-page .about-definition-card p,
.about-definition-card p {
  color: #475569 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* PHONE VIEW 2-COLUMN CARD OPTIMIZATION (Why This Party Was Formed) */
@media (max-width: 640px) {

  html body.about-page .about-definition-section .about-definition-card,
  body.about-page .about-definition-card,
  .about-definition-card {
    padding: 16px 14px 18px !important;
    border-radius: 12px !important;
  }

  html body.about-page .about-definition-card h3,
  body.about-page .about-definition-card h3,
  .about-definition-card h3 {
    font-size: 14.5px !important;
  }

  html body.about-page .about-definition-card p,
  body.about-page .about-definition-card p,
  .about-definition-card p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   ABOUT HERO REDESIGN — FULL-BLEED EDITORIAL HERO (DESKTOP & MOBILE)
   ============================================================ */
body.about-page section.page-hero,
body.about-page .page-hero {
  display: none !important;
}

/* ============================================================
   SHARED MASTHEAD HERO POSITIONING (CLEARING FIXED SITE HEADER)
   Matches homepage hero spacing so hero starts cleanly below header
   Desktop: 72px nav height; Mobile: 58px nav height
   ============================================================ */
body.about-page .about-hero-redesign,
body.join-page .join-hero-redesign,
body.newsroom-page .newsroom-hero-redesign,
body.contact-page .contact-hero-redesign,
body.vision-page .vision-hero-redesign,
.about-hero-redesign,
.join-hero-redesign,
.newsroom-hero-redesign,
.contact-hero-redesign,
.vision-hero-redesign,
.hero-redesign {
  margin-top: var(--nav-h, 72px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  height: clamp(500px, 62vh, 640px) !important;
  min-height: clamp(500px, 62vh, 640px) !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {

  body.about-page .about-hero-redesign,
  body.join-page .join-hero-redesign,
  body.newsroom-page .newsroom-hero-redesign,
  body.contact-page .contact-hero-redesign,
  body.vision-page .vision-hero-redesign,
  .about-hero-redesign,
  .join-hero-redesign,
  .newsroom-hero-redesign,
  .contact-hero-redesign,
  .vision-hero-redesign,
  .hero-redesign {
    margin-top: 58px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: clamp(300px, 42vh, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(34px, 7vw, 44px) !important;
    padding-bottom: clamp(74px, 15vw, 92px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }
}

body.about-page .about-hero-redesign,
.about-hero-redesign {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: clamp(500px, 62vh, 640px) !important;
  min-height: clamp(500px, 62vh, 640px) !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  margin-top: var(--nav-h, 72px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  border: none !important;
  outline: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: #0a192f !important;
}

body.about-page .about-hero-redesign .hero-bg-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

body.about-page .about-hero-redesign .hero-bg-image,
body.about-page .about-hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 60% !important;
  display: block !important;
}

body.about-page .about-hero-redesign .hero-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.82) 42%, rgba(10, 25, 47, 0.3) 75%, transparent 100%) !important;
}

body.about-page .about-hero-redesign .vision-hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding-left: clamp(48px, 6.5vw, 110px) !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.about-page .about-hero-redesign .vision-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  width: auto !important;
}

body.about-page .about-hero-redesign .eyebrow-text {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #fade25 !important;
  display: inline-block !important;
  width: auto !important;
}

body.about-page .about-hero-redesign .eyebrow-line {
  width: 18px !important;
  height: 2px !important;
  background: #fade25 !important;
  display: inline-block !important;
}

body.about-page .about-hero-redesign .vision-hero-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.5px !important;
  max-width: 780px !important;
  text-align: left !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
}

body.about-page .about-hero-redesign .vision-hero-sub {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem) !important;
  color: #d1dced !important;
  max-width: 580px !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

body.about-page .about-hero-redesign,
body.newsroom-page .newsroom-hero-redesign,
body.join-page .join-hero-redesign,
body.vision-page .vision-hero-redesign,
.about-hero-redesign,
.newsroom-hero-redesign,
.join-hero-redesign,
.vision-hero-redesign {
  overflow: visible !important;
}

body.about-page .about-hero-redesign .hero-curved-divider,
body.newsroom-page .newsroom-hero-redesign .hero-curved-divider,
body.join-page .join-hero-redesign .hero-curved-divider,
body.vision-page .vision-hero-redesign .hero-curved-divider,
.hero-curved-divider {
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  width: 100% !important;
  height: clamp(50px, 8vw, 85px) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  margin-bottom: 0 !important;
}

body.about-page .about-hero-redesign .curved-wave-svg,
body.newsroom-page .newsroom-hero-redesign .curved-wave-svg,
.curved-wave-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: scaleY(1.03) !important;
  transform-origin: bottom center !important;
}

/* RESPONSIVE MOBILE ART DIRECTION FOR ABOUT HERO (LEFT-ALIGNED, BIG & BOLD HEADLINE) */
@media (max-width: 768px) {

  body.about-page .about-hero-redesign,
  .about-hero-redesign {
    margin-top: 58px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: clamp(300px, 42vh, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(34px, 7vw, 44px) !important;
    padding-bottom: clamp(74px, 15vw, 92px) !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.about-page .about-hero-redesign .hero-bg-image-wrapper {
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.about-page .about-hero-redesign .hero-bg-image,
  body.about-page .about-hero-bg-image {
    object-position: center 60% !important;
  }

  body.about-page .about-hero-redesign .hero-cinematic-overlay {
    background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.84) 65%, rgba(10, 25, 47, 0.45) 100%) !important;
  }

  body.about-page .about-hero-redesign .vision-hero-content {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
    text-align: left !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  body.about-page .about-hero-redesign .vision-eyebrow-badge {
    margin: 0 0 10px 0 !important;
    justify-content: flex-start !important;
    display: inline-flex !important;
    gap: 8px !important;
  }

  body.about-page .about-hero-redesign .eyebrow-text {
    font-size: 0.62rem !important;
    letter-spacing: 1.4px !important;
  }

  body.about-page .about-hero-redesign .eyebrow-line {
    width: 14px !important;
  }

  body.about-page .about-hero-redesign .vision-hero-headline {
    font-size: clamp(1.65rem, 5.2vw, 2.1rem) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  body.about-page .about-hero-redesign .vision-hero-sub {
    font-size: clamp(0.88rem, 3.2vw, 0.98rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  body.about-page .about-hero-redesign .hero-curved-divider {
    height: clamp(35px, 7vw, 48px) !important;
    bottom: -1px !important;
    z-index: 5 !important;
  }
}

/* ============================================================
   JOIN HERO REDESIGN — FULL-BLEED EDITORIAL HERO (DESKTOP & MOBILE)
   ============================================================ */
body.join-page section.page-hero,
body.join-page .page-hero {
  display: none !important;
}

body.join-page .join-hero-redesign,
.join-hero-redesign {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: clamp(500px, 62vh, 640px) !important;
  min-height: clamp(500px, 62vh, 640px) !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  margin-top: var(--nav-h, 72px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  border: none !important;
  outline: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: #0a192f !important;
}

body.join-page .join-hero-redesign .hero-bg-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

body.join-page .join-hero-redesign .hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  display: block !important;
}

body.join-page .join-hero-redesign .hero-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.82) 42%, rgba(10, 25, 47, 0.3) 75%, transparent 100%) !important;
}

body.join-page .join-hero-redesign .vision-hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding-left: clamp(48px, 6.5vw, 110px) !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.join-page .join-hero-redesign .vision-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  width: auto !important;
}

body.join-page .join-hero-redesign .eyebrow-text {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #fade25 !important;
  display: inline-block !important;
  width: auto !important;
}

body.join-page .join-hero-redesign .eyebrow-line {
  width: 18px !important;
  height: 2px !important;
  background: #fade25 !important;
  display: inline-block !important;
}

body.join-page .join-hero-redesign .vision-hero-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.5px !important;
  max-width: 780px !important;
  text-align: left !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
}

body.join-page .join-hero-redesign .vision-hero-sub {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem) !important;
  color: #d1dced !important;
  max-width: 580px !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

body.join-page .join-hero-redesign .hero-curved-divider {
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: clamp(40px, 7vw, 75px) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

body.join-page .join-hero-redesign .curved-wave-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* RESPONSIVE MOBILE ART DIRECTION FOR JOIN HERO (LEFT-ALIGNED, BIG & BOLD HEADLINE) */
@media (max-width: 768px) {

  body.join-page .join-hero-redesign,
  .join-hero-redesign {
    margin-top: 58px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: clamp(300px, 42vh, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(34px, 7vw, 44px) !important;
    padding-bottom: clamp(74px, 15vw, 92px) !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.join-page .join-hero-redesign .hero-bg-image-wrapper {
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.join-page .join-hero-redesign .hero-bg-image {
    object-position: center 40% !important;
  }

  body.join-page .join-hero-redesign .hero-cinematic-overlay {
    background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.84) 65%, rgba(10, 25, 47, 0.45) 100%) !important;
  }

  body.join-page .join-hero-redesign .vision-hero-content {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
    text-align: left !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  body.join-page .join-hero-redesign .vision-eyebrow-badge {
    margin: 0 0 10px 0 !important;
    justify-content: flex-start !important;
    display: inline-flex !important;
    gap: 8px !important;
  }

  body.join-page .join-hero-redesign .eyebrow-text {
    font-size: 0.62rem !important;
    letter-spacing: 1.4px !important;
  }

  body.join-page .join-hero-redesign .eyebrow-line {
    width: 14px !important;
  }

  body.join-page .join-hero-redesign .vision-hero-headline {
    font-size: clamp(1.65rem, 5.2vw, 2.1rem) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  body.join-page .join-hero-redesign .vision-hero-sub {
    font-size: clamp(0.88rem, 3.2vw, 0.98rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  body.join-page .join-hero-redesign .hero-curved-divider {
    height: clamp(35px, 7vw, 48px) !important;
    bottom: -1px !important;
    z-index: 5 !important;
  }
}

/* ============================================================
   NEWSROOM HERO REDESIGN — FULL-BLEED EDITORIAL HERO (DESKTOP & MOBILE)
   ============================================================ */
body.newsroom-page .newsroom-hero-redesign,
.newsroom-hero-redesign {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: clamp(500px, 62vh, 640px) !important;
  min-height: clamp(500px, 62vh, 640px) !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  margin-top: var(--nav-h, 72px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  border: none !important;
  outline: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: #0a192f !important;
}

body.newsroom-page .newsroom-hero-redesign .hero-bg-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

body.newsroom-page .newsroom-hero-redesign .hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 45% !important;
  display: block !important;
}

body.newsroom-page .newsroom-hero-redesign .hero-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.82) 45%, rgba(10, 25, 47, 0.35) 78%, transparent 100%) !important;
}

body.newsroom-page .newsroom-hero-redesign .vision-hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 840px !important;
  margin: 0 !important;
  padding-left: clamp(48px, 6.5vw, 110px) !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.newsroom-page .newsroom-hero-redesign .vision-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  width: auto !important;
}

body.newsroom-page .newsroom-hero-redesign .eyebrow-text {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #fade25 !important;
  display: inline-block !important;
  width: auto !important;
}

body.newsroom-page .newsroom-hero-redesign .eyebrow-line {
  width: 18px !important;
  height: 2px !important;
  background: #fade25 !important;
  display: inline-block !important;
}

body.newsroom-page .newsroom-hero-redesign .vision-hero-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.4rem, 4.2vw, 3.8rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.5px !important;
  max-width: 840px !important;
  text-align: left !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
}

body.newsroom-page .newsroom-hero-redesign .vision-hero-sub {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem) !important;
  color: #d1dced !important;
  max-width: 580px !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

body.newsroom-page .newsroom-hero-redesign .hero-curved-divider {
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: clamp(40px, 7vw, 75px) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

body.newsroom-page .newsroom-hero-redesign .curved-wave-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

body.newsroom-page .newsroom-gallery-section,
.newsroom-gallery-section,
body.about-page .about-founder-section,
body.join-page #join-section,
body.vision-page #feature-chapters,
body.contact-page .contact-channel-section,
.contact-channel-section {
  background: #ffffff !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* RESPONSIVE MOBILE ART DIRECTION FOR NEWSROOM HERO */
@media (max-width: 768px) {

  body.newsroom-page .newsroom-hero-redesign,
  .newsroom-hero-redesign {
    margin-top: 58px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: clamp(300px, 42vh, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(34px, 7vw, 44px) !important;
    padding-bottom: clamp(74px, 15vw, 92px) !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.newsroom-page .newsroom-hero-redesign .hero-bg-image-wrapper {
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.newsroom-page .newsroom-hero-redesign .hero-bg-image {
    object-position: center 45% !important;
  }

  body.newsroom-page .newsroom-hero-redesign .hero-cinematic-overlay {
    background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.84) 65%, rgba(10, 25, 47, 0.45) 100%) !important;
  }

  body.newsroom-page .newsroom-hero-redesign .vision-hero-content {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
    text-align: left !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  body.newsroom-page .newsroom-hero-redesign .vision-eyebrow-badge {
    margin: 0 0 10px 0 !important;
    justify-content: flex-start !important;
    display: inline-flex !important;
    gap: 8px !important;
  }

  body.newsroom-page .newsroom-hero-redesign .eyebrow-text {
    font-size: 0.62rem !important;
    letter-spacing: 1.4px !important;
  }

  body.newsroom-page .newsroom-hero-redesign .eyebrow-line {
    width: 14px !important;
  }

  body.newsroom-page .newsroom-hero-redesign .vision-hero-headline {
    font-size: clamp(1.65rem, 5.2vw, 2.1rem) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  body.newsroom-page .newsroom-hero-redesign .vision-hero-sub {
    font-size: clamp(0.88rem, 3.2vw, 0.98rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  body.newsroom-page .newsroom-hero-redesign .hero-curved-divider {
    height: clamp(35px, 7vw, 48px) !important;
    bottom: -1px !important;
    z-index: 5 !important;
  }
}

/* ============================================================
   CONTACT HERO REDESIGN — FULL-BLEED EDITORIAL HERO (DESKTOP & MOBILE)
   ============================================================ */
body.contact-page .contact-hero-redesign,
.contact-hero-redesign {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: clamp(500px, 62vh, 640px) !important;
  min-height: clamp(500px, 62vh, 640px) !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  margin-top: var(--nav-h, 72px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  border: none !important;
  outline: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: #0a192f !important;
}

body.contact-page .contact-hero-redesign .hero-bg-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

body.contact-page .contact-hero-redesign .hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top right !important;
  display: block !important;
}

body.contact-page .contact-hero-redesign .hero-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.82) 45%, rgba(10, 25, 47, 0.35) 78%, transparent 100%) !important;
}

body.contact-page .contact-hero-redesign .vision-hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 840px !important;
  margin: 0 !important;
  padding-left: clamp(48px, 6.5vw, 110px) !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

body.contact-page .contact-hero-redesign .vision-eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  width: auto !important;
}

body.contact-page .contact-hero-redesign .eyebrow-text {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: #fade25 !important;
  display: inline-block !important;
  width: auto !important;
}

body.contact-page .contact-hero-redesign .eyebrow-line {
  width: 18px !important;
  height: 2px !important;
  background: #fade25 !important;
  display: inline-block !important;
}

body.contact-page .contact-hero-redesign .vision-hero-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.4rem, 4.2vw, 3.8rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.5px !important;
  max-width: 840px !important;
  text-align: left !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
}

body.contact-page .contact-hero-redesign .vision-hero-sub {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem) !important;
  color: #d1dced !important;
  max-width: 580px !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

body.contact-page .contact-hero-redesign .hero-curved-divider {
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  width: 100% !important;
  height: clamp(50px, 8vw, 85px) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

body.contact-page .contact-hero-redesign .curved-wave-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: scaleY(1.03) !important;
  transform-origin: bottom center !important;
}

@media (max-width: 768px) {

  body.contact-page .contact-hero-redesign,
  .contact-hero-redesign {
    margin-top: 58px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: clamp(300px, 42vh, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(34px, 7vw, 44px) !important;
    padding-bottom: clamp(74px, 15vw, 92px) !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.contact-page .contact-hero-redesign .hero-bg-image-wrapper {
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.contact-page .contact-hero-redesign .hero-bg-image {
    object-position: top right !important;
  }

  body.contact-page .contact-hero-redesign .hero-cinematic-overlay {
    background: linear-gradient(to right, rgba(10, 25, 47, 0.94) 0%, rgba(10, 25, 47, 0.84) 65%, rgba(10, 25, 47, 0.45) 100%) !important;
  }

  body.contact-page .contact-hero-redesign .vision-hero-content {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
    text-align: left !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 6 !important;
  }

  body.contact-page .contact-hero-redesign .vision-eyebrow-badge {
    margin: 0 0 10px 0 !important;
    justify-content: flex-start !important;
    display: inline-flex !important;
    gap: 8px !important;
  }

  body.contact-page .contact-hero-redesign .eyebrow-text {
    font-size: 0.62rem !important;
    letter-spacing: 1.4px !important;
  }

  body.contact-page .contact-hero-redesign .eyebrow-line {
    width: 14px !important;
  }

  body.contact-page .contact-hero-redesign .vision-hero-headline {
    font-size: clamp(1.65rem, 5.2vw, 2.1rem) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  body.contact-page .contact-hero-redesign .vision-hero-sub {
    font-size: clamp(0.88rem, 3.2vw, 0.98rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  body.contact-page .contact-hero-redesign .hero-curved-divider {
    height: clamp(35px, 7vw, 48px) !important;
    bottom: -1px !important;
    z-index: 5 !important;
  }
}

/* ============================================================
   NEWSROOM PAGE — VISION STATISTICS SECTION REDESIGN
   ============================================================ */
body.newsroom-page .stats-dossier {
  background: #edf4fd !important;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 44px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(42, 109, 181, 0.12) !important;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

/* ============================================================
   CONTACT PAGE — COMPLETE REDESIGN MATCHING REFERENCE SPEC
   ============================================================ */

body.contact-page .container {
  max-width: 1320px !important;
  width: 95% !important;
}

/* 1. TOP CHANNEL CARDS (4-COLUMN GRID) */
.contact-channel-section {
  padding: 24px 0 16px !important;
  background: #ffffff !important;
}

.contact-channel-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}

.contact-channel-card {
  background: #ffffff !important;
  border: 1px solid rgba(42, 109, 181, 0.16) !important;
  border-radius: 20px !important;
  padding: 36px 24px 32px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.28s ease !important;
}

.contact-channel-card:hover {
  transform: translateY(-6px) !important;
  border-color: #2A6DB5 !important;
  box-shadow: 0 16px 36px rgba(42, 109, 181, 0.14) !important;
}

.channel-badge-pill {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  color: #2A6DB5 !important;
  background: #eff6ff !important;
  border: 1px solid rgba(42, 109, 181, 0.18) !important;
  padding: 5px 16px !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
}

.channel-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}

.channel-icon-wrapper svg {
  width: 54px !important;
  height: 54px !important;
}

.channel-yellow-dash {
  width: 36px !important;
  height: 3.5px !important;
  background: #FADE25 !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
}

.channel-card-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  margin: 0 0 14px 0 !important;
  text-transform: uppercase !important;
}

.channel-card-email {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #2A6DB5 !important;
}

.contact-channel-card:hover .channel-card-email {
  text-decoration: underline !important;
}

/* 2. FIND US IN BHUBANESWAR & HQ DOSSIER CARD */
.contact-hq-section {
  padding: 16px 0 20px !important;
  background: #ffffff !important;
}

.contact-hq-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
}

.hq-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.5rem, 4.2vw, 3.6rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.5px !important;
}

.hq-yellow-dash {
  width: 40px !important;
  height: 4px !important;
  background: #FADE25 !important;
  border-radius: 2px !important;
  margin-bottom: 24px !important;
}

.hq-body {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: 360px !important;
}

.contact-hq-dossier-card {
  background: #ffffff !important;
  border: 1px solid rgba(42, 109, 181, 0.16) !important;
  border-radius: 20px !important;
  padding: 20px 40px !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04) !important;
}

.hq-dossier-row {
  display: flex !important;
  gap: 28px !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid #eff6ff !important;
}

.hq-dossier-row:last-child {
  border-bottom: none !important;
}

.hq-badge-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 48px !important;
}

.hq-badge-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #2A6DB5 !important;
  letter-spacing: 1.4px !important;
}

.badge-dash {
  width: 18px !important;
  height: 2.5px !important;
  background: #FADE25 !important;
  margin-top: 5px !important;
}

.hq-content-cell {
  flex: 1 !important;
}

.hq-block-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase !important;
}

.hq-block-desc {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.hq-split-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

.hq-split-col {
  display: flex !important;
  gap: 24px !important;
}

.hq-link {
  color: #2A6DB5 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.hq-link:hover {
  text-decoration: underline !important;
}

.hq-phone-link {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.hq-map-quicklink {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #2A6DB5 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.hq-map-quicklink:hover {
  color: #1e518b !important;
  text-decoration: underline !important;
}

/* CONTACT MAP SECTION */
.contact-map-wrapper {
  margin-top: 36px !important;
  background: #ffffff !important;
  border: 1px solid rgba(42, 109, 181, 0.16) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05) !important;
}

.contact-map-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 22px 32px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(42, 109, 181, 0.12) !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.map-header-info {
  flex: 1 !important;
  min-width: 260px !important;
}

.map-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  color: #2A6DB5 !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.map-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
}

.map-sub {
  font-size: 0.92rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

.map-directions-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  color: #2A6DB5 !important;
  border: 1.5px solid #2A6DB5 !important;
  background: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.map-directions-btn:hover {
  background: #2A6DB5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(42, 109, 181, 0.2) !important;
}

.contact-map-frame-container {
  width: 100% !important;
  height: 420px !important;
  position: relative !important;
  background: #f1f5f9 !important;
}

.contact-map-frame-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* 3. BLUE DOSSIER BANNER (RESPONSE TIMES & ACCREDITATION) */
.contact-blue-dossier-section {
  padding: 20px 0 24px !important;
  background: #ffffff !important;
}

.contact-blue-dossier-card {
  background: linear-gradient(135deg, #091e42 0%, #0b2545 100%) !important;
  border-radius: 20px !important;
  padding: 54px 56px !important;
  display: grid !important;
  grid-template-columns: 1.12fr 0.88fr !important;
  gap: 48px !important;
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.28) !important;
}

.blue-dossier-col.left-col {
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding-right: 36px !important;
}

.blue-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #FADE25 !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.blue-dossier-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2rem, 3vw, 2.7rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 28px 0 !important;
  line-height: 1.2 !important;
}

.response-times-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.response-times-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 1.05rem !important;
  color: #e2e8f0 !important;
}

.yellow-bullet-dash {
  color: #FADE25 !important;
  font-size: 12px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.time-val {
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}

.accreditation-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

.gold-doc-icon svg {
  width: 42px !important;
  height: 42px !important;
}

.accreditation-body {
  font-size: 1.05rem !important;
  color: #cbd5e1 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.gold-email-link {
  color: #FADE25 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* 4. SEND US A MESSAGE FORM SECTION */
.contact-form-section {
  padding: 24px 0 48px !important;
  background: #ffffff !important;
}

.contact-form-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
  gap: 48px !important;
}

.form-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #2A6DB5 !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 14px !important;
}

.form-headline {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.1rem, 3.4vw, 3.5rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
}

.form-lead {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.contact-form-card {
  background: #ffffff !important;
  border: 1px solid rgba(42, 109, 181, 0.16) !important;
  border-radius: 20px !important;
  padding: 48px !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05) !important;
}

.form-grid-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}

.form-label {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.form-input,
.form-select,
.form-textarea {
  font-size: 1.02rem !important;
  padding: 16px 18px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #2A6DB5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 109, 181, 0.15) !important;
}

.form-group.full-width {
  margin-bottom: 24px !important;
}

.consent-label {
  font-size: 0.98rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

.contact-submit-btn {
  background: #2A6DB5 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  padding: 18px !important;
  border-radius: 10px !important;
  width: 100% !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(42, 109, 181, 0.25) !important;
}

.contact-submit-btn:hover {
  background: #1e518b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(42, 109, 181, 0.35) !important;
}

/* RESPONSIVE BREAKPOINTS FOR CONTACT PAGE */
@media (max-width: 1024px) {
  .contact-channel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .contact-hq-layout,
  .contact-form-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .contact-blue-dossier-card {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .blue-dossier-col.left-col {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-right: 0 !important;
    padding-bottom: 32px !important;
  }
}

@media (max-width: 768px) {
  .contact-channel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .contact-channel-card {
    padding: 18px 10px 14px !important;
    border-radius: 14px !important;
  }

  .channel-icon-wrapper {
    margin-bottom: 8px !important;
  }

  .channel-icon-wrapper svg {
    width: 36px !important;
    height: 36px !important;
  }

  .channel-yellow-dash {
    width: 24px !important;
    height: 2.5px !important;
    margin-bottom: 8px !important;
  }

  .channel-card-title {
    font-size: 0.76rem !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  .channel-card-email {
    font-size: 0.74rem !important;
    word-break: break-all !important;
  }
}

@media (max-width: 640px) {
  .contact-channel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .hq-split-row,
  .form-grid-2col {
    grid-template-columns: 1fr !important;
  }

  .contact-form-card {
    padding: 24px 20px !important;
  }

  .form-headline {
    font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important;
    white-space: nowrap !important;
  }

  .contact-blue-dossier-card {
    padding: 28px 24px !important;
  }

  .contact-map-header {
    padding: 16px 18px !important;
  }

  .contact-map-frame-container {
    height: 300px !important;
  }
}

body.newsroom-page .stats-dossier {
  background: #edf4fd !important;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 44px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(42, 109, 181, 0.12) !important;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

body.newsroom-page .stats-dossier-flag {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: 28px !important;
  border: none !important;
  padding: 0 !important;
}

body.newsroom-page .stats-dossier-title {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

body.newsroom-page .stats-dossier-sub {
  font-size: 0.92rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: block !important;
  margin: 0 !important;
}

body.newsroom-page .stats-dossier-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

body.newsroom-page .dossier-block {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 26px 30px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.newsroom-page .dossier-block:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

body.newsroom-page .dossier-block h3 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #2a6db5 !important;
  display: block !important;
}

body.newsroom-page .dossier-block ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.newsroom-page .dossier-block li {
  position: relative !important;
  padding-left: 18px !important;
  margin-bottom: 12px !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

body.newsroom-page .dossier-block li:last-child {
  margin-bottom: 0 !important;
}

body.newsroom-page .dossier-block li::before {
  content: "–" !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  color: #fade25 !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
}

body.newsroom-page .dossier-block li strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  body.newsroom-page .stats-dossier {
    padding: 24px 16px !important;
    border-radius: 14px !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }

  body.newsroom-page .stats-dossier-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.newsroom-page .dossier-block {
    padding: 20px 18px !important;
  }
}

/* ============================================================
   JOIN PAGE — WHY JOIN OJC & WINGS REFERENCE DESIGN OVERRIDE
   ============================================================ */

/* Eyebrow Accent Bar */
body.join-page .join-reasons .join-eyebrow-accent,
.join-reasons .join-eyebrow-accent {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

body.join-page .join-reasons .eyebrow::before,
body.join-page .join-reasons .eyebrow::after,
body.join-page .join-reasons .section-title::before,
body.join-page .join-reasons .section-title::after {
  display: none !important;
  content: none !important;
}

body.join-page .join-reasons .eyebrow-bar,
.join-reasons .eyebrow-bar {
  width: 3.5px !important;
  height: 14px !important;
  background: #fade25 !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

/* Reasons Section Title */
body.join-page .join-reasons .section-title,
.join-reasons .section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 0 0 32px 0 !important;
  text-align: left !important;
}

/* Reasons 2-Column Grid */
body.join-page .join-reasons .reasons-grid,
.join-reasons .reasons-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 48px !important;
  width: 100% !important;
}

@media (max-width: 640px) {

  body.join-page .join-reasons .reasons-grid,
  .join-reasons .reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Reason Card */
body.join-page .join-reasons .reason-card,
.join-reasons .reason-card {
  background: #f8fafc !important;
  border: 1px solid #dbeafe !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 12px !important;
  padding: 22px 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.join-page .join-reasons .reason-card--wide,
.join-reasons .reason-card--wide,
body.join-page .reasons-grid>.reason-card:last-child {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}

body.join-page .join-reasons .reason-card--wide .reason-title,
body.join-page .join-reasons .reason-card--wide .reason-body,
.join-reasons .reason-card--wide .reason-title,
.join-reasons .reason-card--wide .reason-body {
  text-align: left !important;
  width: 100% !important;
}

body.join-page .join-reasons .reason-card:hover,
.join-reasons .reason-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.1) !important;
  border-color: #bfdbfe !important;
}

/* Reason Card Header: Icon + Pill Badge */
body.join-page .reason-card .reason-card-header,
.reason-card .reason-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

body.join-page .reason-card .reason-icon,
.reason-card .reason-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2a6db5 !important;
}

body.join-page .reason-card .reason-icon svg,
.reason-card .reason-icon svg,
body.join-page .wing-card .wing-icon svg,
.wing-card .wing-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #2a6db5 !important;
}

body.join-page .reason-card .reason-badge,
.reason-card .reason-badge {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1.5px solid #93c5fd !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 3px 12px !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

/* Reason Card Typography */
body.join-page .reason-card .reason-title,
.reason-card .reason-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  display: block !important;
  min-height: 0 !important;
  width: auto !important;
}

body.join-page .reason-card .reason-body,
.reason-card .reason-body {
  color: #475569 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* WINGS SECTION */
body.join-page .wings-wrapper,
.wings-wrapper {
  margin-top: 40px !important;
  width: 100% !important;
}

body.join-page .wings-wrapper .wings-section-title,
.wings-wrapper .wings-section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  margin: 0 0 22px 0 !important;
  text-align: left !important;
}

body.join-page .wings-wrapper .wings-dash,
.wings-wrapper .wings-dash {
  color: #94a3b8 !important;
}

body.join-page .wings-wrapper .wings-subtitle,
.wings-wrapper .wings-subtitle {
  font-weight: 400 !important;
  color: #475569 !important;
}

body.join-page .wings-wrapper .wings-grid,
.wings-wrapper .wings-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

@media (max-width: 640px) {

  body.join-page .wings-wrapper .wings-grid,
  .wings-wrapper .wings-grid {
    grid-template-columns: 1fr !important;
  }
}

body.join-page .wings-wrapper .wing-card,
.wings-wrapper .wing-card {
  background: #f8fafc !important;
  border: 1px solid #dbeafe !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 12px !important;
  padding: 18px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  text-align: left !important;
}

body.join-page .wings-wrapper .wing-card--wide,
.wings-wrapper .wing-card--wide {
  grid-column: 1 / -1 !important;
}

body.join-page .wings-wrapper .wing-card:hover,
.wings-wrapper .wing-card:hover {
  transform: translateY(-2px) !important;
  border-color: #93c5fd !important;
}

body.join-page .wings-wrapper .wing-icon,
.wings-wrapper .wing-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #2563eb !important;
}

body.join-page .wings-wrapper .wing-icon svg,
.wings-wrapper .wing-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #2563eb !important;
}

body.join-page .wings-wrapper .wing-info,
.wings-wrapper .wing-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body.join-page .wings-wrapper .wing-name,
.wings-wrapper .wing-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

body.join-page .wings-wrapper .wing-desc,
.wings-wrapper .wing-desc {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
}

/* ============================================================
   GLOBAL HERO BACKGROUND IMAGE TOP ANCHORING (CROPS ONLY BOTTOM)
   ============================================================ */
html body .hero-bg-image,
body .hero-bg-image,
.hero-bg-image {
  object-fit: cover !important;
  object-position: top center !important;
}

/* ============================================================
   ABOUT PAGE FLAG SECTION — 2-COLUMN DESKTOP LAYOUT (FLAG LEFT, HEADING+3 CARDS RIGHT)
   ============================================================ */
html body.about-page main section.about-flag-section,
body.about-page .about-flag-section,
.about-flag-section {
  background: #eff6ff !important;
  padding: clamp(60px, 6vw, 90px) 0 !important;
  border-top: 1px solid #dbeafe !important;
  border-bottom: 1px solid #dbeafe !important;
  box-sizing: border-box !important;
}

html body.about-page .about-flag-2col-wrapper,
body.about-page .about-flag-2col-wrapper,
.about-flag-2col-wrapper {
  display: grid !important;
  grid-template-columns: 310px 1fr !important;
  gap: 32px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

@media (max-width: 992px) {

  html body.about-page .about-flag-2col-wrapper,
  body.about-page .about-flag-2col-wrapper,
  .about-flag-2col-wrapper {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  html body.about-page .flag-left-col,
  body.about-page .flag-left-col,
  .flag-left-col {
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  html body.about-page .flag-graphic-card,
  body.about-page .flag-graphic-card,
  .flag-graphic-card {
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  html body.about-page .flag-official-img,
  body.about-page .flag-official-img,
  .flag-official-img {
    max-width: 320px !important;
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Left Column Flag Graphic Card — Proper Flag Proportion & Sizing */
html body.about-page .flag-left-col,
body.about-page .flag-left-col,
.flag-left-col {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.about-page .flag-graphic-card,
body.about-page .flag-graphic-card,
.flag-graphic-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body.about-page .flag-official-img,
body.about-page .flag-official-img,
.flag-official-img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 320px !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
}

html body.about-page .flag-band,
.flag-band {
  flex: 1 !important;
  width: 100% !important;
  position: relative !important;
}

html body.about-page .flag-band--yellow,
.flag-band--yellow {
  background: #fade25 !important;
}

html body.about-page .flag-band--white,
.flag-band--white {
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.about-page .flag-band--blue,
.flag-band--blue {
  background: #004fb7 !important;
}

html body.about-page .flag-emblem,
.flag-emblem {
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.about-page .emblem-svg,
.emblem-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Right Column (Header + 3 Cards) */
html body.about-page .flag-right-col,
.flag-right-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

html body.about-page .flag-header-box,
.flag-header-box {
  text-align: center !important;
  margin-bottom: clamp(48px, 5vw, 64px) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.about-page .about-flag-eyebrow,
.about-flag-eyebrow {
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body.about-page .about-flag-eyebrow::before,
.about-flag-eyebrow::before {
  content: "" !important;
  width: 22px !important;
  height: 3px !important;
  background: #fade25 !important;
  display: inline-block !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

html body.about-page .about-flag-title,
.about-flag-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  text-align: center !important;
}

html body.about-page .flag-cards-row,
body.about-page .flag-cards-row,
.flag-cards-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: stretch !important;
}

@media (max-width: 768px) {

  html body.about-page .flag-cards-row,
  body.about-page .flag-cards-row,
  .flag-cards-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Card Specifications with Top Border Strip */
html body.about-page .flag-info-card,
.flag-info-card {
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 16px !important;
  padding: 22px 18px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 250px !important;
}

html body.about-page .flag-info-card--yellow,
.flag-info-card--yellow {
  border-top: 4px solid #fade25 !important;
}

html body.about-page .flag-info-card--white,
.flag-info-card--white {
  border-top: 4px solid #ffffff !important;
}

html body.about-page .flag-info-card--blue,
.flag-info-card--blue {
  border-top: 4px solid #2a6db5 !important;
}

/* Top Row inside Card: Badge on Left, Color Swatch on Right */
html body.about-page .flag-card-top,
.flag-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

html body.about-page .flag-badge,
.flag-badge {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body.about-page .flag-badge--yellow,
.flag-badge--yellow {
  background: #fade25 !important;
  color: #0f172a !important;
}

html body.about-page .flag-badge--white,
.flag-badge--white {
  background: #ffffff !important;
  border: 1.5px solid #93c5fd !important;
  color: #2563eb !important;
}

html body.about-page .flag-badge--blue,
.flag-badge--blue {
  background: #2a6db5 !important;
  color: #ffffff !important;
}

html body.about-page .flag-swatch,
.flag-swatch {
  width: 30px !important;
  height: 20px !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html body.about-page .flag-swatch--yellow,
.flag-swatch--yellow {
  background: #fade25 !important;
}

html body.about-page .flag-swatch--white,
.flag-swatch--white {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html body.about-page .flag-swatch--blue,
.flag-swatch--blue {
  background: #2a6db5 !important;
}

html body.about-page .flag-card-name,
.flag-card-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
}

html body.about-page .flag-card-body,
.flag-card-body {
  font-size: 14px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* ============================================================
   PARTY LEADERSHIP & ORGANISATION SECTION BACKGROUND UPDATE
   ============================================================ */
html body.about-page section.about-organisation-section,
body.about-page .about-organisation-section,
#organisation,
.about-organisation-section {
  background: #eff6ff !important;
  border-top: 1px solid #dbeafe !important;
  border-bottom: 1px solid #dbeafe !important;
}

html body.about-page .about-organisation-section .org-card,
.about-organisation-section .org-card,
.org-card {
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

/* ============================================================
   FINAL CTA SECTION (HOMEPAGE / ABOUT / VISION) BG UPDATE
   ============================================================ */
html body.has-hero section.final-cta-section,
html body section.final-cta-section,
body.has-hero .final-cta-section,
body .final-cta-section,
.final-cta-section {
  background: #eff6ff !important;
  border-top: 1px solid #dbeafe !important;
  border-bottom: 1px solid #dbeafe !important;
}

/* ============================================================
   HOMEPAGE HERO SECTION — IMAGE ONLY (NEVER CROP TOP, CROP BOTTOM ONLY)
   ============================================================ */
/* ============================================================
   NAVBAR RESPONSIVE INTEGRITY: DESKTOP & LAPTOP (>= 769px)
   ============================================================ */
@media (min-width: 769px) {

  body .hamburger,
  .hamburger {
    display: none !important;
  }

  body .main-nav,
  .main-nav {
    display: flex !important;
  }

  body .header-ctas,
  .header-ctas {
    display: flex !important;
  }

  body .site-header {
    min-height: 72px !important;
    height: 72px !important;
  }

  body .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    min-height: 72px !important;
    height: 72px !important;
  }

  body.has-hero .hero,
  body .hero,
  .hero {
    margin-top: 72px !important;
  }
}

/* Compact laptop header fit (769px - 1100px) so logo and links never cramp */
@media (max-width: 1100px) and (min-width: 769px) {
  body .header-inner {
    gap: 12px !important;
  }

  body .logo-name {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  body .logo-tagline {
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  body .nav-link {
    padding: 6px 8px !important;
    font-size: 12.5px !important;
  }

  body .header-ctas {
    gap: 6px !important;
  }

  body .header-ctas .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }
}

body.has-hero .hero,
body .hero,
.hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: var(--nav-h, 72px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  aspect-ratio: 1920 / 864 !important;
  /* Crops 20% from bottom */
  max-height: calc(100vh - var(--nav-h, 72px)) !important;
  /* If not fitting screen, crops from bottom only */
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: block !important;
  position: relative !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}

@media (max-width: 768px) {

  body.has-hero .hero,
  body .hero,
  .hero {
    margin-top: 58px !important;
    aspect-ratio: 1920 / 1080 !important;
    /* Full natural image ratio: shows 100% full width and full height without side-cropping */
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  body.has-hero .hero-image,
  body .hero-image,
  .hero-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: top center !important;
  }
}

body.has-hero .hero::before,
body.has-hero .hero::after,
body .hero::before,
body .hero::after,
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

body.has-hero .hero-image,
body .hero-image,
.hero-image {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: top center !important;
  /* Anchors strictly to top: never crops top, crops bottom only */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform-origin: center center !important;
  animation: heroImageCinematic 1.6s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity;
}

/* Hero Text Block (20% away from left) */
body.has-hero .hero .hero-text-block,
body .hero .hero-text-block,
.hero .hero-text-block {
  position: absolute !important;
  left: 20% !important;
  top: 48% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  max-width: 540px !important;
  pointer-events: auto !important;
  text-align: left !important;
}

/* ============================================================
   HERO ENTRANCE ANIMATIONS (CINEMATIC SMOOTH REVEAL & SLIDE)
   ============================================================ */

@keyframes heroImageCinematic {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroPopUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }

  65% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSlideFromSide {
  0% {
    opacity: 0;
    transform: translateX(-55px);
  }

  70% {
    opacity: 1;
    transform: translateX(4px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

body.has-hero .hero .hero-text-title,
body .hero .hero-text-title,
.hero .hero-text-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(32px, 4vw, 60px) !important;
  font-weight: 900 !important;
  color: #071126 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 10px 0 !important;
  text-shadow: none !important;
  animation: heroPopUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important;
}

body.has-hero .hero .hero-text-odia,
body .hero .hero-text-odia,
.hero .hero-text-odia {
  font-family: 'Noto Sans Oriya', sans-serif !important;
  font-size: clamp(20px, 2.6vw, 36px) !important;
  font-weight: 700 !important;
  color: #FADE25 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-shadow: none !important;
  animation: heroPopUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important;
}

/* Hide redundant Odia subtitle when page language is Odia for all screen sizes */
:lang(od) body.has-hero .hero .hero-text-odia,
:lang(od) body .hero .hero-text-odia,
:lang(od) .hero .hero-text-odia,
:lang(od) .hero-text-odia,
:lang(or) body.has-hero .hero .hero-text-odia,
:lang(or) body .hero .hero-text-odia,
:lang(or) .hero .hero-text-odia,
:lang(or) .hero-text-odia,
html[lang="od"] .hero-text-odia,
html[lang="or"] .hero-text-odia,
html[lang^="od"] .hero-text-odia,
html[lang^="or"] .hero-text-odia,
body.lang-od .hero-text-odia,
body.lang-or .hero-text-odia {
  display: none !important;
}

body.has-hero .hero .hero-text-desc,
body .hero .hero-text-desc,
.hero .hero-text-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  line-height: 1.55 !important;
  margin: 14px 0 0 0 !important;
  max-width: 480px !important;
  text-shadow: none !important;
  animation: heroPopUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both !important;
}

body.has-hero .hero .hero-text-desc strong,
body .hero .hero-text-desc strong,
.hero .hero-text-desc strong {
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Hero CTA Action Buttons */
body.has-hero .hero .hero-buttons,
body .hero .hero-buttons,
.hero .hero-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 22px !important;
  pointer-events: auto !important;
}

body.has-hero .hero .hero-btn,
body .hero .hero-btn,
.hero .hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border-radius: 9999px !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}

/* Primary: Rich Yellow Pill Button - Slides in from side */
body.has-hero .hero .hero-btn-primary,
body .hero .hero-btn-primary,
.hero .hero-btn-primary {
  background: #FADE25 !important;
  color: #071126 !important;
  border: 1.5px solid #FADE25 !important;
  box-shadow: none !important;
  animation: heroSlideFromSide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both !important;
}

body.has-hero .hero .hero-btn-primary:hover,
body .hero .hero-btn-primary:hover,
.hero .hero-btn-primary:hover {
  background: #facc15 !important;
  border-color: #facc15 !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
  color: #071126 !important;
}

/* Secondary: Party Blue Pill Button - Slides in from side */
body.has-hero .hero .hero-btn-secondary,
body .hero .hero-btn-secondary,
.hero .hero-btn-secondary {
  background: #2A6DB5 !important;
  color: #ffffff !important;
  border: 1.5px solid #2A6DB5 !important;
  box-shadow: none !important;
  animation: heroSlideFromSide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both !important;
}

body.has-hero .hero .hero-btn-secondary:hover,
body .hero .hero-btn-secondary:hover,
.hero .hero-btn-secondary:hover {
  background: #1f5694 !important;
  border-color: #1f5694 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

/* Laptop (1024px) & Large Tablets: Keep paragraph and buttons visible & beautifully spaced */
@media (max-width: 1024px) {

  body.has-hero .hero .hero-text-block,
  body .hero .hero-text-block,
  .hero .hero-text-block {
    left: 8% !important;
    top: 50% !important;
    max-width: 450px !important;
  }

  body.has-hero .hero .hero-text-title,
  body .hero .hero-text-title,
  .hero .hero-text-title {
    font-size: clamp(30px, 3.8vw, 46px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 6px !important;
  }

  body.has-hero .hero .hero-text-odia,
  body .hero .hero-text-odia,
  .hero .hero-text-odia {
    font-size: clamp(18px, 2.4vw, 26px) !important;
    margin-bottom: 8px !important;
  }

  body.has-hero .hero .hero-text-desc,
  body .hero .hero-text-desc,
  .hero .hero-text-desc {
    display: block !important;
    font-size: clamp(12.5px, 1.3vw, 14.5px) !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
    max-width: 440px !important;
  }

  body.has-hero .hero .hero-buttons,
  body .hero .hero-buttons,
  .hero .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 18px !important;
    gap: 12px !important;
  }

  body.has-hero .hero .hero-btn,
  body .hero .hero-btn,
  .hero .hero-btn {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
}

/* Tablet Screens (768px - 820px): Keep paragraph and buttons visible, sized to fit comfortably */
@media (max-width: 820px) {

  body.has-hero .hero .hero-text-block,
  body .hero .hero-text-block,
  .hero .hero-text-block {
    left: 6% !important;
    max-width: 340px !important;
    top: 48% !important;
  }

  body.has-hero .hero .hero-text-title,
  body .hero .hero-text-title,
  .hero .hero-text-title {
    font-size: clamp(24px, 3.6vw, 30px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 4px !important;
  }

  body.has-hero .hero .hero-text-odia,
  body .hero .hero-text-odia,
  .hero .hero-text-odia {
    font-size: clamp(15px, 2.2vw, 19px) !important;
    margin-bottom: 6px !important;
  }

  body.has-hero .hero .hero-text-desc,
  body .hero .hero-text-desc,
  .hero .hero-text-desc {
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    max-width: 320px !important;
    margin-top: 6px !important;
  }

  body.has-hero .hero .hero-buttons,
  body .hero .hero-buttons,
  .hero .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.has-hero .hero .hero-btn,
  body .hero .hero-btn,
  .hero .hero-btn {
    font-size: 11.5px !important;
    padding: 7px 14px !important;
  }
}

/* Narrow Mobile Phones (<= 600px): Visible, elegant description & compact button sizing */
@media (max-width: 600px) {

  body.has-hero .hero .hero-text-block,
  body .hero .hero-text-block,
  .hero .hero-text-block {
    left: 4.5% !important;
    max-width: clamp(180px, 50vw, 240px) !important;
    top: 48% !important;
  }

  body.has-hero .hero .hero-text-title,
  body .hero .hero-text-title,
  .hero .hero-text-title {
    font-size: clamp(20px, 5.4vw, 26px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 2px !important;
  }

  body.has-hero .hero .hero-text-odia,
  body .hero .hero-text-odia,
  .hero .hero-text-odia {
    font-size: clamp(13px, 3.4vw, 17px) !important;
    margin: 2px 0 4px 0 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7),
                 0 0 3px rgba(0, 0, 0, 0.5) !important;
  }

  body.has-hero .hero .hero-text-desc,
  body .hero .hero-text-desc,
  .hero .hero-text-desc {
    display: block !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    max-width: 100% !important;
    margin: 4px 0 8px 0 !important;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8) !important;
  }

  :lang(od) body.has-hero .hero .hero-text-desc,
  :lang(od) body .hero .hero-text-desc,
  :lang(od) .hero .hero-text-desc {
    font-size: clamp(8.5px, 2.2vw, 10.5px) !important;
    line-height: 1.4 !important;
  }

  body.has-hero .hero .hero-buttons,
  body .hero .hero-buttons,
  .hero .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  body.has-hero .hero .hero-btn,
  body .hero .hero-btn,
  .hero .hero-btn {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    line-height: 1.15 !important;
    border-radius: 9999px !important;
    letter-spacing: 0.1px !important;
  }
}

/* Hero Curved Bottom Accent Line Divider */
body.has-hero .hero .hero-curved-divider,
body .hero .hero-curved-divider,
.hero .hero-curved-divider {
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: clamp(40px, 5.5vw, 68px) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.has-hero .hero .curved-wave-svg,
body .hero .curved-wave-svg,
.hero .curved-wave-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: scaleY(1.02) !important;
  transform-origin: bottom center !important;
}

@media (max-width: 768px) {

  body.has-hero .hero .hero-curved-divider,
  body .hero .hero-curved-divider,
  .hero .hero-curved-divider {
    height: clamp(26px, 7vw, 40px) !important;
    bottom: -1px !important;
  }
}

/* ============================================================
   TRANSFORMED ODISHA / MOVEMENT GALLERY SHOWCASE (INSPIRATION CAROUSEL)
   ============================================================ */
html body main>section.transformed-section,
html body .transformed-section,
body .transformed-section,
.transformed-section {
  background: #F8FAFD !important;
  padding: 32px 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

html body .transformed-header,
body .transformed-header,
.transformed-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  margin-bottom: 36px !important;
}

@media (max-width: 768px) {

  html body main>section.transformed-section,
  html body .transformed-section,
  body .transformed-section,
  .transformed-section {
    padding: 24px 0 !important;
  }

  html body .transformed-header,
  body .transformed-header,
  .transformed-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
}

html body .transformed-title-block,
body .transformed-title-block,
.transformed-title-block {
  flex: 1 !important;
}

html body .transformed-eyebrow,
body .transformed-eyebrow,
.transformed-eyebrow {
  display: block !important;
  font-family: 'Noto Sans Oriya', sans-serif !important;
  font-size: 2.3rem !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.5px !important;
}

html body .transformed-title,
body .transformed-title,
.transformed-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

html body .transformed-subhead-block,
body .transformed-subhead-block,
.transformed-subhead-block {
  flex: 1.2 !important;
  border-left: 3.5px solid #f59e0b !important;
  padding-left: 20px !important;
}

@media (max-width: 768px) {

  html body .transformed-subhead-block,
  body .transformed-subhead-block,
  .transformed-subhead-block {
    border-left-width: 3px !important;
    padding-left: 14px !important;
  }
}

html body .transformed-subhead,
body .transformed-subhead,
.transformed-subhead {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
}

html body .transformed-carousel-wrapper,
body .transformed-carousel-wrapper,
.transformed-carousel-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

html body .transformed-carousel-grid,
body .transformed-carousel-grid,
.transformed-carousel-grid {
  display: flex !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x mandatory !important;
  padding: 12px 4px 20px 4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  width: 100% !important;
  will-change: scroll-position !important;
  contain: layout style paint !important;
  transform: translateZ(0) !important;
}

.transformed-carousel-grid::-webkit-scrollbar {
  display: none !important;
}

html body .transformed-card,
body .transformed-card,
.transformed-card {
  flex: 0 0 calc(33.333% - 16px) !important;
  min-width: 320px !important;
  scroll-snap-align: start !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
  background: #0f172a !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

@media (max-width: 992px) {

  html body .transformed-card,
  body .transformed-card,
  .transformed-card {
    flex: 0 0 calc(50% - 12px) !important;
    min-width: 280px !important;
  }
}

@media (max-width: 640px) {

  html body .transformed-card,
  body .transformed-card,
  .transformed-card {
    flex: 0 0 76% !important;
    min-width: 220px !important;
  }

  html body .transformed-card-img-wrapper,
  body .transformed-card-img-wrapper,
  .transformed-card-img-wrapper {
    height: 185px !important;
  }
}

html body .transformed-card:hover,
body .transformed-card:hover,
.transformed-card:hover {
  transform: translateY(-6px) translateZ(0) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
}

html body .transformed-card-img-wrapper,
body .transformed-card-img-wrapper,
.transformed-card-img-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

html body .transformed-card-img-wrapper img,
body .transformed-card-img-wrapper img,
.transformed-card-img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

html body .transformed-card:hover .transformed-card-img-wrapper img,
body .transformed-card:hover .transformed-card-img-wrapper img,
.transformed-card:hover .transformed-card-img-wrapper img {
  transform: scale(1.05) translateZ(0) !important;
}

html body .transformed-card-overlay,
body .transformed-card-overlay,
.transformed-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(5, 11, 24, 0.92) 0%, rgba(5, 11, 24, 0.35) 55%, transparent 100%) !important;
  pointer-events: none !important;
}

html body .transformed-card-content,
body .transformed-card-content,
.transformed-card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px 22px !important;
  z-index: 2 !important;
  color: #ffffff !important;
}

html body .transformed-card-odia,
body .transformed-card-odia,
.transformed-card-odia {
  display: block !important;
  font-family: 'Noto Sans Oriya', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

html body .transformed-card-title,
body .transformed-card-title,
.transformed-card-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
}

html body .transformed-nav-btn,
body .transformed-nav-btn,
.transformed-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

html body .transformed-prev-btn,
body .transformed-prev-btn,
.transformed-prev-btn {
  left: -20px !important;
}

html body .transformed-next-btn,
body .transformed-next-btn,
.transformed-next-btn {
  right: -20px !important;
}

@media (max-width: 768px) {

  html body .transformed-nav-btn,
  body .transformed-nav-btn,
  .transformed-nav-btn {
    display: none !important;
  }
}

html body .transformed-nav-btn:hover,
body .transformed-nav-btn:hover,
.transformed-nav-btn:hover {
  background: #ffffff !important;
  transform: translateY(-50%) scale(1.1) !important;
  color: #16a34a !important;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.2) !important;
}

html body .transformed-nav-dots,
body .transformed-nav-dots,
.transformed-nav-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 18px auto 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}

html body .transformed-dot,
body .transformed-dot,
.transformed-dot {
  width: 40px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background-color: #cbd5e1 !important;
  cursor: default !important;
  pointer-events: none !important;
  transition: background-color 0.25s ease, transform 0.2s ease !important;
  display: inline-block !important;
  border: none !important;
  outline: none !important;
}

html body .transformed-dot:hover,
body .transformed-dot:hover,
.transformed-dot:hover {
  background-color: #94a3b8 !important;
}

html body .transformed-dot.active,
body .transformed-dot.active,
.transformed-dot.active {
  background-color: #0052cc !important;
}

@media (max-width: 640px) {

  html body .transformed-nav-dots,
  body .transformed-nav-dots,
  .transformed-nav-dots {
    gap: 8px !important;
    margin: 14px auto 0 auto !important;
  }

  html body .transformed-dot,
  body .transformed-dot,
  .transformed-dot {
    width: 24px !important;
    height: 5px !important;
  }
}

/* Centered Header Style */
html body .transformed-header-centered,
body .transformed-header-centered,
.transformed-header-centered {
  text-align: center !important;
  max-width: 1200px !important;
  margin: 0 auto 24px auto !important;
  padding: 0 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body .transformed-eyebrow-centered,
body .transformed-eyebrow-centered,
.transformed-eyebrow-centered {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  color: #1d4ed8 !important;
  margin-bottom: 12px !important;
}

html body .transformed-eyebrow-centered .eyebrow-dash,
body .transformed-eyebrow-centered .eyebrow-dash,
.transformed-eyebrow-centered .eyebrow-dash {
  width: 24px !important;
  height: 2.5px !important;
  background: #f59e0b !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

html body .transformed-title-centered,
body .transformed-title-centered,
.transformed-title-centered {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(0.75rem, 2.7vw, 2.3rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

@media (max-width: 768px) {

  html body .transformed-title-centered,
  body .transformed-title-centered,
  .transformed-title-centered {
    font-size: clamp(0.72rem, 3.2vw, 1.4rem) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {

  html body .transformed-title-centered,
  body .transformed-title-centered,
  .transformed-title-centered {
    font-size: clamp(0.68rem, 3.3vw, 1.05rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.4px !important;
  }
}

/* ============================================================
   PARTY LEADERSHIP & ORGANISATION PREMIUM REDESIGN (MATCHING MOCKUP)
   ============================================================ */
html body section.about-organisation-section,
body .about-organisation-section {
  background: linear-gradient(180deg, #edf4fc 0%, #f4f8fd 50%, #f8fafc 100%) !important;
  padding: 64px 0 80px 0 !important;
  border-top: 1px solid #dbeafe !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: relative !important;
  overflow: hidden !important;
}

html body section.about-organisation-section .org-container,
body .about-organisation-section .org-container {
  max-width: 1400px !important;
  width: 94% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* Header layout with watermark quote */
.org-header-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 32px !important;
  position: relative !important;
}

.org-header-left {
  max-width: 760px !important;
}

.org-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  color: #94a3b8 !important;
  margin-bottom: 12px !important;
}

.org-eyebrow-line {
  width: 24px !important;
  height: 3px !important;
  background: #f59e0b !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

.org-main-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.4rem, 3.5vw, 3.2rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
}

.org-title-highlight {
  color: #0b57d0 !important;
}

.org-subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* Watermark script quote on top right */
.org-header-quote {
  text-align: right !important;
  margin-top: 10px !important;
  user-select: none !important;
  pointer-events: none !important;
}

.quote-text {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  color: #7890b2 !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  opacity: 0.85 !important;
}

.quote-line {
  width: 60px !important;
  height: 3px !important;
  background: #f59e0b !important;
  margin: 8px 0 0 auto !important;
  border-radius: 2px !important;
}

@media (max-width: 992px) {
  .org-header-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .org-header-quote {
    text-align: left !important;
    margin-top: 0 !important;
  }

  .quote-line {
    margin: 8px 0 0 0 !important;
  }
}

/* Tab Navigation Pills */
html body .org-tabs-nav,
body .org-tabs-nav,
.org-tabs-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  scrollbar-width: none !important;
  gap: 10px !important;
  margin-bottom: 32px !important;
  padding-bottom: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.org-tabs-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .org-tab-btn,
body .org-tab-btn,
.org-tab-btn {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 9999px !important;
  border: 1px solid #dbeafe !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

html body .org-tab-btn:hover,
body .org-tab-btn:hover,
.org-tab-btn:hover {
  background: #f8fafc !important;
  border-color: #bfdbfe !important;
  color: #0b57d0 !important;
}

html body .org-tab-btn.active,
body .org-tab-btn.active,
.org-tab-btn.active {
  background: #0b57d0 !important;
  color: #ffffff !important;
  border-color: #0b57d0 !important;
  box-shadow: 0 4px 12px rgba(11, 87, 208, 0.25) !important;
}

/* Category Headings with Gold Pipe Bar */
html body .org-group-title,
body .org-group-title,
.org-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: #1e3a8a !important;
  margin: 36px 0 16px 0 !important;
}

.org-group-title:first-child {
  margin-top: 0 !important;
}

.title-bar {
  width: 4px !important;
  height: 18px !important;
  background: #f59e0b !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

/* Responsive Grid */
html body.about-page .org-grid,
html body .org-grid,
body .org-grid,
.org-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px) {

  html body.about-page .org-grid,
  html body .org-grid,
  body .org-grid,
  .org-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {

  html body.about-page .org-grid,
  html body.about-page .media-cell-main .org-grid,
  html body .org-grid,
  body .org-grid,
  .org-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
}

/* Card Component Design matching reference structure */
html body.about-page section.about-organisation-section .org-card,
html body.about-page .org-card,
html body .org-card,
body.about-page .org-card,
body .org-card,
.org-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e5edfb !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body.about-page section.about-organisation-section .org-card:hover,
html body.about-page .org-card:hover,
html body .org-card:hover,
body.about-page .org-card:hover,
body .org-card:hover,
.org-card:hover {
  background: #0b57d0 !important;
  border-color: #0b57d0 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 26px rgba(11, 87, 208, 0.28) !important;
}

html body.about-page section.about-organisation-section .org-card-avatar,
html body.about-page .org-card-avatar,
html body .org-card-avatar,
body.about-page .org-card-avatar,
.org-card-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: #fff7d6 !important;
  border: 1px solid #feecb3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

html body.about-page section.about-organisation-section .org-card:hover .org-card-avatar,
html body.about-page .org-card:hover .org-card-avatar,
html body .org-card:hover .org-card-avatar,
body.about-page .org-card:hover .org-card-avatar,
.org-card:hover .org-card-avatar {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0b57d0 !important;
}

html body.about-page section.about-organisation-section .org-card:hover .org-card-avatar svg path,
html body.about-page .org-card:hover .org-card-avatar svg path,
html body .org-card:hover .org-card-avatar svg path,
body.about-page .org-card:hover .org-card-avatar svg path,
.org-card:hover .org-card-avatar svg path {
  stroke: #0b57d0 !important;
}

html body.about-page section.about-organisation-section .org-card-info,
html body.about-page .org-card-info,
html body .org-card-info,
body.about-page .org-card-info,
.org-card-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body.about-page section.about-organisation-section .org-card-name,
html body.about-page .org-card-name,
html body .org-card-name,
body.about-page .org-card-name,
.org-card-name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #1e2a38 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  margin: 0 0 2px 0 !important;
  text-align: left !important;
  transition: color 0.25s ease !important;
}

html body.about-page section.about-organisation-section .org-card:hover .org-card-name,
html body.about-page .org-card:hover .org-card-name,
html body .org-card:hover .org-card-name,
body.about-page .org-card:hover .org-card-name,
.org-card:hover .org-card-name {
  color: #ffffff !important;
}

html body.about-page section.about-organisation-section .org-card-role,
html body.about-page .org-card-role,
html body .org-card-role,
body.about-page .org-card-role,
.org-card-role {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  margin: 0 !important;
  text-align: left !important;
  transition: color 0.25s ease !important;
}

html body.about-page section.about-organisation-section .org-card:hover .org-card-role,
html body.about-page .org-card:hover .org-card-role,
html body .org-card:hover .org-card-role,
body.about-page .org-card:hover .org-card-role,
.org-card:hover .org-card-role {
  color: #ffffff !important;
}

html body.about-page section.about-organisation-section .org-card-arrow,
html body.about-page .org-card-arrow,
html body .org-card-arrow,
body.about-page .org-card-arrow,
.org-card-arrow {
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

html body.about-page section.about-organisation-section .org-card:hover .org-card-arrow,
html body.about-page .org-card:hover .org-card-arrow,
html body .org-card:hover .org-card-arrow,
body.about-page .org-card:hover .org-card-arrow,
.org-card:hover .org-card-arrow {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* Media Cell Container */
html body.about-page .media-cell-container,
.media-cell-container {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {

  html body.about-page .media-cell-container,
  .media-cell-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 24px !important;
  }

  html body.about-page .media-cell-sidebar,
  .media-cell-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.about-page .media-cell-main,
  .media-cell-main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   JOIN PAGE — WAVY FLAG BRAND BANNER IN LEFT COLUMN FREE SPACE
   ============================================================ */
.join-flag-banner,
body.join-page .join-flag-banner {
  position: relative !important;
  width: 100% !important;
  min-height: 290px !important;
  margin-top: 32px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #050b18 0%, #081636 50%, #0d2557 100%) !important;
  border: 1.5px solid rgba(250, 222, 37, 0.45) !important;
  box-shadow: 0 16px 40px rgba(7, 17, 38, 0.18) !important;
  isolation: isolate !important;
  padding: 44px 38px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.join-flag-bg-wrapper,
body.join-page .join-flag-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.join-flag-bg-image,
body.join-page .join-flag-bg-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.22 !important;
  filter: brightness(0.7) contrast(1.2) !important;
  transform: scale(1.05) !important;
  transition: transform 6s ease !important;
}

.join-flag-banner:hover .join-flag-bg-image {
  transform: scale(1.1) !important;
}

.join-flag-overlay,
body.join-page .join-flag-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 30%, rgba(42, 109, 181, 0.25), transparent 70%),
    radial-gradient(circle at 80% 80%, rgba(250, 222, 37, 0.12), transparent 60%) !important;
  z-index: 1 !important;
}

.join-flag-content,
body.join-page .join-flag-content {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.join-flag-logo-badge,
body.join-page .join-flag-logo-badge {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  padding: 5px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 3.5px #FADE25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.join-flag-emblem,
body.join-page .join-flag-emblem {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.join-flag-text-group,
body.join-page .join-flag-text-group {
  flex: 1 !important;
}

.join-flag-eyebrow,
body.join-page .join-flag-eyebrow {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #FADE25 !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.join-flag-title,
body.join-page .join-flag-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.65rem, 2.5vw, 2.3rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.join-flag-sub,
body.join-page .join-flag-sub {
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {

  .join-flag-banner,
  body.join-page .join-flag-banner {
    display: none !important;
  }
}

/* REMOVE VISION SIDEBAR / SIDE RIBBON COMPLETELY */
.vision-sticky-sidebar,
aside.vision-sticky-sidebar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   ABOUT PAGE FOUNDER SECTION — CENTERED PORTRAIT & NAME/ROLE
   ============================================================ */
html body.about-page .about-founder-section .founder-portrait-block,
body.about-page .about-founder-section .founder-portrait-block,
body.about-page .founder-portrait-block,
.about-founder-section .founder-portrait-block {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 340px !important;
}

html body.about-page .about-founder-section .founder-portrait-img,
body.about-page .about-founder-section .founder-portrait-img,
body.about-page .founder-portrait-img,
.about-founder-section .founder-portrait-img {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 340px !important;
}

@media (max-width: 768px) {
  html body.about-page .about-founder-section .founder-portrait-block,
  body.about-page .about-founder-section .founder-portrait-block,
  body.about-page .founder-portrait-block,
  .about-founder-section .founder-portrait-block,
  html body.about-page .about-founder-section .founder-portrait-img,
  body.about-page .about-founder-section .founder-portrait-img,
  body.about-page .founder-portrait-img,
  .about-founder-section .founder-portrait-img {
    max-width: 290px !important;
  }
}

@media (max-width: 480px) {
  html body.about-page .about-founder-section .founder-portrait-block,
  body.about-page .about-founder-section .founder-portrait-block,
  body.about-page .founder-portrait-block,
  .about-founder-section .founder-portrait-block,
  html body.about-page .about-founder-section .founder-portrait-img,
  body.about-page .about-founder-section .founder-portrait-img,
  body.about-page .founder-portrait-img,
  .about-founder-section .founder-portrait-img {
    max-width: 275px !important;
  }
}


html body.about-page .about-founder-section .founder-name,
body.about-page .about-founder-section .founder-name,
body.about-page .founder-name,
.about-founder-section .founder-name {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

html body.about-page .about-founder-section .founder-role,
body.about-page .about-founder-section .founder-role,
body.about-page .founder-role,
.about-founder-section .founder-role {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ============================================================
   JOIN PAGE & CONTACT PAGE FORMS — MOBILE RESIZING
   (STRICTLY TARGETING ONLY THE 2 FORMS ON JOIN & CONTACT PAGES)
   ============================================================ */
@media (max-width: 768px) {

  /* 1. JOIN PAGE FORM (#join-form & .form-card on join-page) */
  body.join-page .form-card,
  body.join-page #join-form-wrap,
  html body.join-page .form-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
  }

  body.join-page .form-card h2,
  html body.join-page .form-card h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  body.join-page .form-card p,
  html body.join-page .form-card p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  body.join-page #join-form .form-group {
    margin-bottom: 8px !important;
  }

  body.join-page #join-form .form-row-2 {
    gap: 6px !important;
    margin-bottom: 0 !important;
    grid-template-columns: 1fr !important;
  }

  body.join-page #join-form .form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }

  body.join-page #join-form .form-input,
  body.join-page #join-form .form-select {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
  }

  body.join-page #join-form button[type="submit"],
  body.join-page #join-form .btn {
    height: 36px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
  }

  /* 2. CONTACT PAGE FORM (#contact-form & .contact-form-card on contact-page) */
  body.contact-page .contact-form-card,
  body.contact-page .form-card,
  html body.contact-page .contact-form-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
  }

  body.contact-page .contact-form-card h2,
  body.contact-page .form-card h2,
  html body.contact-page .contact-form-card h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  body.contact-page .contact-form-card p,
  body.contact-page .form-card p,
  html body.contact-page .contact-form-card p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  body.contact-page #contact-form .form-group {
    margin-bottom: 8px !important;
  }

  body.contact-page #contact-form .form-grid-2col {
    gap: 6px !important;
    margin-bottom: 0 !important;
    grid-template-columns: 1fr !important;
  }

  body.contact-page #contact-form .form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }

  body.contact-page #contact-form .form-input,
  body.contact-page #contact-form .form-select {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
  }

  body.contact-page #contact-form textarea,
  body.contact-page #contact-form .form-textarea {
    min-height: 60px !important;
    height: 60px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
  }

  body.contact-page #contact-form button[type="submit"],
  body.contact-page #contact-form .btn {
    height: 36px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
  }
}