/* Google Fonts: Inter (Latin) and Noto Sans Bengali (Bengali) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

:root {
  /* Core Color Tokens */
  --color-brand: #07A0AE;         /* Dominant Teal */
  --color-brand-bright: #0AB7C8;  /* Accent Teal (Gradient partner) */
  --color-brand-tint: #D9F1F3;    /* Icon/chip background */
  --color-brand-wash: #E7F7F7;    /* Section background washes */
  --color-tertiary: #ED6A07;      /* Urgent CTA / Orange accent */
  --color-ink: #101418;           /* Primary text / Headings */
  --color-muted: #5B6670;         /* Subtext / Muted copy */
  --color-surface: #FFFFFF;       /* Cards / Panels */
  --color-shape: #F0F4F5;         /* Subtle decorative blobs */
  --color-alert: #B3261E;         /* Emergency notice red */
  --color-alert-bg: #FDF2F2;      /* Emergency container wash */
  
  /* Shadows & Elevation */
  --shadow-sm: 0 4px 14px rgba(7, 160, 174, 0.12);
  --shadow-ambient: 0 10px 30px rgba(16, 20, 24, 0.06);
  --shadow-raised: 0 14px 40px rgba(7, 160, 174, 0.18);
  
  /* Typography */
  --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bengali: 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* Layout Radius */
  --radius-panel: 32px;
  --radius-card: 16px;
  --radius-pill: 50px;
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width-content: 1200px;
}

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-latin);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
}

/* --- Global Body & Paragraph Justification --- */
p,
.card-body,
.card p,
.urgency-card p,
.chamber-card p,
.question-hint,
.solution-description,
.footer-desc,
.timeline-desc,
.timeline-institution,
.reassurance-content p,
.faq-answer,
.conditions-detail p,
.services-detail p,
.about-content p,
.privacy-content p,
.bullet-list li,
.sidebar-card p,
.form-card p,
.blog-excerpt,
.blog-card p,
article p,
article li,
.modal-body-text,
.trust-item p,
.solution-trust {
  text-align: justify;
  text-justify: inter-word;
}

/* --- Centered Headings, Hero Sections & Section Headers --- */
.text-center,
.text-center p,
.section-header,
.section-header h1,
.section-header h2,
.section-header h3,
.section-header p,
.subpage-hero,
.subpage-hero h1,
.subpage-hero h2,
.subpage-hero p,
.subpage-title,
.subpage-subtitle,
.caption-pos-center,
.stats-section,
.stat-tile,
.hero-subtitle,
.logo,
.btn,
.badge,
.modal-badge,
article .modal-badge,
article h1,
[style*="text-align: center"],
[style*="text-align: center"] p,
[style*="text-align:center"],
[style*="text-align:center"] p {
  text-align: center;
}

/* Lang-specific font styling overrides */
html[lang="bn"] body {
  font-family: var(--font-bengali);
  font-size: 18px;
  line-height: 1.85;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
}

html[lang="bn"] h1, 
html[lang="bn"] h2, 
html[lang="bn"] h3, 
html[lang="bn"] h4 {
  line-height: 1.5;
}

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

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

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: 80px 0;
}

.bg-wash {
  background-color: var(--color-brand-wash);
}

/* Accessibility Focus Indicator */
*:focus-visible {
  outline: 3px solid var(--color-brand-bright);
  outline-offset: 3px;
}

/* Header & Navigation */
.site-header {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

/* White background ONLY for normal subpages or when header becomes visible on scroll */
body:not(.has-hero-scroll) .site-header,
.site-header.header-visible {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(7, 160, 174, 0.1) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04) !important;
}

body:not(.has-hero-scroll) {
  padding-top: 80px;
}

/* Header Hidden State: Hide full bar/logo/menu, show ONLY language toggle & admin button transparently at top right */
.site-header.header-hidden {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.site-header.header-hidden .logo,
.site-header.header-hidden .nav-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-header.header-hidden .nav-links li:not(.lang-switch-item):not(:has(.lang-switch)):not(:has(.admin-nav-btn)) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important;
}

.site-header.header-hidden .nav-links li.lang-switch-item,
.site-header.header-hidden .nav-links li:has(.lang-switch),
.site-header.header-hidden .nav-links li:has(.admin-nav-btn) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.site-header.header-hidden .nav-links a:not(.lang-switch):not(.admin-nav-btn) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-header.header-hidden .lang-switch,
.site-header.header-hidden .admin-nav-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(16, 20, 24, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.site-header.header-hidden .lang-switch:hover,
.site-header.header-hidden .admin-nav-btn:hover {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  display: flex;
  flex-direction: column;
}

.logo-main {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-brand);
}

.logo-sub {
  font-size: 12px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-weight: 500;
  font-size: 15px;
  color: var(--color-muted);
}

.nav-links a:hover, 
.nav-links a.active {
  color: var(--color-brand);
}

.lang-switch {
  background-color: var(--color-brand-wash);
  color: var(--color-brand);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(7, 160, 174, 0.2);
}

.lang-switch:hover {
  background-color: var(--color-brand-tint);
}

.admin-nav-btn {
  background-color: var(--color-brand-wash);
  color: var(--color-brand);
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(7, 160, 174, 0.25);
  transition: var(--transition-smooth);
  text-decoration: none;
  line-height: 1;
}

.admin-nav-btn:hover {
  background-color: var(--color-brand);
  color: var(--color-surface) !important;
  border-color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(7, 160, 174, 0.25);
}

.admin-nav-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-ink);
  position: relative;
  transition: var(--transition-smooth);
}

.nav-toggle-icon::before, 
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: var(--color-ink);
  left: 0;
  transition: var(--transition-smooth);
}

.nav-toggle-icon::before { top: -8px; }
.nav-toggle-icon::after { bottom: -8px; }

.site-header.nav-open .nav-toggle-icon {
  background-color: transparent;
}

.site-header.nav-open .nav-toggle-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.site-header.nav-open .nav-toggle-icon::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 2px solid transparent;
  gap: 8px;
  white-space: nowrap !important;
}

a[href^="tel:"],
a[href*="wa.me"],
.phone-number,
.btn-phone {
  white-space: nowrap !important;
}

.btn-primary {
  background-color: var(--color-brand);
  color: var(--color-surface);
  box-shadow: 0 4px 14px rgba(7, 160, 174, 0.25);
}

.btn-primary:hover {
  background-color: var(--color-brand-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 160, 174, 0.35);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn-secondary:hover {
  background-color: var(--color-brand-wash);
  transform: translateY(-2px);
}

.btn-white {
  background-color: var(--color-surface);
  color: var(--color-brand);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.btn-white:hover {
  background-color: var(--color-brand-wash);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.btn-outline-white {
  background-color: transparent;
  color: var(--color-surface);
  border-color: var(--color-surface);
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Hero Panel (Teal Inset Panel) */
.hero-wrapper {
  padding: 24px 0;
}

.hero-panel {
  background: linear-gradient(135deg, var(--color-brand-bright), var(--color-brand));
  border-radius: var(--radius-panel);
  padding: 60px 48px;
  color: var(--color-surface);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(7, 160, 174, 0.15);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-title {
  font-size: 48px;
  color: var(--color-surface);
  margin-bottom: 24px;
  line-height: 1.15;
}

/* Staggered Checklist Animation */
.hero-checklist {
  list-style: none;
  margin-bottom: 24px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  opacity: 1; /* Fallback for no-JS */
}

/* Checkmark SVG drawing classes */
.checkmark-svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--color-surface);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.checkmark-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 0; /* Fallback for no-JS */
}

/* JS-driven state handles */
.js-enabled .checklist-item {
  opacity: 0;
  transform: translateY(10px);
}

.js-enabled .checkmark-path {
  stroke-dashoffset: 30;
}

.checklist-item.animated {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.checklist-item.animated .checkmark-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease;
}

/* Reveal line & details styling */
.hero-reveal {
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--color-brand-tint);
  padding-left: 16px;
  opacity: 1;
}

.js-enabled .hero-reveal {
  opacity: 0;
  transform: translateY(10px);
}

.hero-reveal.animated {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-subheadline {
  font-size: 16px;
  opacity: 0.9;
  max-width: 600px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-trust {
  font-size: 13px;
  opacity: 0.8;
  letter-spacing: 0.5px;
}

/* Photo display fallback & cutout */
.hero-photo-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-img-fallback {
  border-radius: var(--radius-panel);
  border: 4px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  max-height: 480px;
  object-fit: cover;
}

/* Section elements styling */
.section-header {
  text-align: center;
  margin: 0 auto 48px auto;
  max-width: 800px;
}

.section-header h1,
.section-header h2,
.section-header h3 {
  font-size: 36px;
  margin-bottom: 12px;
  position: relative;
  text-align: center;
}

.section-header p {
  color: var(--color-muted);
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
}

/* General Card Design System */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card,
.chamber-card,
.urgency-card,
.condition-card-with-bg,
.service-card,
.solution-card {
  transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(7, 160, 174, 0.05);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(7, 160, 174, 0.08);
  border-color: rgba(7, 160, 174, 0.15);
}

.card-icon {
  background-color: var(--color-brand-tint);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--color-brand);
}

.card-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.card-body {
  color: var(--color-muted);
  font-size: 15px;
  flex-grow: 1;
}

/* Urgency strip card list overrides */
.urgency-card {
  cursor: pointer;
  text-decoration: none;
}

/* Credibility Timeline Stack - Thermometer Mercury Uprising/Falling Effect */
.timeline-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-left: 36px;
}

/* Thermometer Outer Glass Stem */
.timeline-stack::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 12px;
  width: 8px;
  background: rgba(7, 160, 174, 0.08);
  border: 1px solid rgba(7, 160, 174, 0.25);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(7, 160, 174, 0.15), 0 0 8px rgba(7, 160, 174, 0.05);
}

/* Uprising / Falling Mercury Liquid Column */
.timeline-progress-line {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 8px;
  height: 0%;
  background: linear-gradient(180deg, #00f2fe 0%, #00c6d7 50%, var(--color-brand) 100%);
  border-radius: 10px;
  transition: height 0.1s ease-out;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.8), 0 0 24px rgba(7, 160, 174, 0.5);
  z-index: 1;
}

/* Glowing Meniscus Cap at the top of rising Mercury */
.timeline-progress-line::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00f2fe;
  box-shadow: 0 0 10px #00f2fe, 0 0 20px #00f2fe, 0 0 30px rgba(0, 242, 254, 0.9);
  transition: transform 0.2s ease;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 16px 20px;
  border-radius: 14px;
  border-bottom: 1px solid rgba(7, 160, 174, 0.1);
  opacity: 0.55;
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item.timeline-revealed {
  opacity: 0.85;
}

.timeline-item:hover,
.timeline-item.timeline-revealed:hover {
  opacity: 1;
  background: rgba(7, 160, 174, 0.06);
  box-shadow: 0 6px 24px rgba(7, 160, 174, 0.12);
  transform: translateX(4px);
}

.timeline-year {
  font-weight: 700;
  font-size: 17px;
  color: var(--color-brand);
}

.timeline-content h3 {
  font-size: 20px;
  margin-bottom: 0px;
  transition: color 0.3s ease;
}

.timeline-item:hover .timeline-content h3 {
  color: var(--color-brand);
}

.timeline-institution {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 15px;
}

.timeline-detail {
  font-size: 15px;
  color: var(--color-muted);
}

/* Hide institution and detail text by default; reveal on mouse hover */
.timeline-institution,
.timeline-detail {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.35s ease;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.timeline-item:hover .timeline-institution,
.timeline-item:hover .timeline-detail {
  opacity: 1;
  max-height: 300px;
  transform: translateY(0);
  margin-top: 6px;
  pointer-events: auto;
}

@media (max-width: 640px) {
  .timeline-stack {
    padding-left: 28px;
  }
  .timeline-stack::before,
  .timeline-progress-line {
    left: 8px;
  }
  .timeline-scroll-pin {
    left: -0.5px;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 0;
  }
}

/* Conditions Page - Emergency alert block */
.emergency-box {
  background-color: var(--color-alert-bg);
  border: 2px solid var(--color-alert);
  border-radius: var(--radius-card);
  padding: 32px;
  margin-bottom: 48px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.emergency-icon {
  background-color: var(--color-alert);
  color: var(--color-surface);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 24px;
  flex-shrink: 0;
}

.emergency-title {
  color: var(--color-alert);
  font-size: 22px;
  margin-bottom: 8px;
}

.emergency-list {
  list-style: none;
  margin-top: 12px;
}

.emergency-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-weight: 500;
}

.emergency-list li::before {
  content: "•";
  color: var(--color-alert);
  position: absolute;
  left: 0;
  font-size: 20px;
  line-height: 1;
}

/* FAQ Accordion Accordion styles */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
}

.accordion-item {
  border: 1px solid rgba(7, 160, 174, 0.1);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-surface);
  transition: var(--transition-smooth);
}

.accordion-item[open] {
  border-color: rgba(7, 160, 174, 0.3);
  box-shadow: 0 4px 20px rgba(7, 160, 174, 0.05);
}

.accordion-summary {
  padding: 24px;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-summary::after {
  content: "+";
  font-size: 24px;
  color: var(--color-brand);
  transition: transform 0.3s ease;
}

.accordion-item[open] .accordion-summary::after {
  transform: rotate(45deg);
}

.accordion-content {
  padding: 0 24px 24px 24px;
  color: var(--color-muted);
  border-top: 1px solid rgba(7, 160, 174, 0.05);
  margin-top: 0;
}

/* Reassurance & Pullquotes */
.reassurance-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.pullquote-card {
  background-color: var(--color-brand-wash);
  border-left: 4px solid var(--color-brand);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 40px;
}

.pullquote-text {
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-brand);
  font-weight: 500;
  margin-bottom: 16px;
}

.pullquote-attribution {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Form Styles */
.form-card {
  max-width: 650px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(7, 160, 174, 0.2);
  font-family: inherit;
  font-size: 16px;
  color: var(--color-ink);
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-brand-bright);
  box-shadow: 0 0 0 3px rgba(10, 183, 200, 0.15);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.char-counter {
  font-size: 12px;
  color: var(--color-muted);
  text-align: right;
  margin-top: 4px;
}

/* Custom file upload styling */
.file-upload-container {
  position: relative;
}

.file-drop-zone {
  border: 2px dashed rgba(7, 160, 174, 0.3);
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  background-color: var(--color-brand-wash);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.file-drop-zone:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand-tint);
}

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

.file-list {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-brand);
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 6px;
  border: 1px solid rgba(7, 160, 174, 0.1);
}

.file-remove {
  background: none;
  border: none;
  color: var(--color-alert);
  cursor: pointer;
  font-weight: bold;
}

/* Radios style */
.radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.radio-input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
}

/* Checkbox Style */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-brand);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Submission validation output */
.form-feedback {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 500;
  display: none;
}

.form-feedback.success {
  background-color: #DEF7EC;
  color: #03543F;
  border: 1px solid #BCF0DA;
  display: block;
}

.form-feedback.error {
  background-color: #FDE8E8;
  color: #9B1C1C;
  border: 1px solid #FBD5D5;
  display: block;
}

/* Sticky Bottom Mobile Bar */
.sticky-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(7, 160, 174, 0.1);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 90;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.sticky-bar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.sticky-btn-phone {
  background-color: var(--color-brand);
  color: white;
}

.sticky-btn-whatsapp {
  background-color: #25D366;
  color: white;
}

/* Footer styling */
.site-footer {
  background-color: var(--color-ink);
  color: #BAC2CB;
  padding: 60px 0 30px 0;
  border-top: 4px solid var(--color-brand);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand h3 {
  color: var(--color-surface);
  font-size: 22px;
  margin-bottom: 12px;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-credentials {
  font-size: 13px;
  border-left: 2px solid var(--color-brand);
  padding-left: 12px;
  margin-bottom: 16px;
}

.footer-bmdc {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-bright);
}

.footer-nav-col h4 {
  color: var(--color-surface);
  font-size: 16px;
  margin-bottom: 20px;
}

.footer-nav-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-col a {
  font-size: 14px;
}

.footer-nav-col a:hover {
  color: var(--color-surface);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 30px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-disclaimer {
  max-width: 800px;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.5;
}

/* Page Specific layouts & Full-Width Hero Banners */
.subpage-hero {
  position: relative;
  background-color: #0a2e3a;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: none;
  padding: 0;
}

.subpage-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.subpage-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.8;
  display: block;
}

.subpage-hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(10, 46, 58, 0.35) 0%, rgba(10, 46, 58, 0.55) 100%);
}

.subpage-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 90px 20px 70px 20px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.subpage-hero-content .subpage-title {
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.3px;
}

.subpage-hero-content .subpage-subtitle {
  text-align: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.subpage-hero-content .modal-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}

/* About Page Doctor Card Layout */
.about-body-doctor-card {
  width: 220px;
  flex-shrink: 0;
  margin: 0 auto;
}

.about-body-doctor-img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 768px) {
  .subpage-hero {
    min-height: 240px;
  }
  .subpage-hero-content {
    padding: 80px 16px 50px 16px;
  }
  .subpage-hero-content .subpage-title {
    font-size: 28px;
  }
  .subpage-hero-content .subpage-subtitle {
    font-size: 15px;
  }
}

/* Grid splits for other pages */
.split-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
}

.sidebar-card {
  background-color: var(--color-brand-wash);
  border: 1px dashed rgba(7, 160, 174, 0.2);
  border-radius: var(--radius-card);
  padding: 32px;
  position: sticky;
  top: 100px;
}

.sidebar-title {
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--color-brand);
}

.bullet-list {
  list-style: none;
  margin-top: 12px;
}

.bullet-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 15px;
}

.bullet-list li::before {
  content: "✓";
  color: var(--color-brand);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* Controlled by mobile nav drawer toggle */
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background-color: var(--color-surface);
    flex-direction: column;
    padding: 30px;
    gap: 20px;
    border-bottom: 1px solid rgba(7, 160, 174, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }
  
  .site-header.nav-open .nav-links {
    display: flex;
  }

  .site-header.header-hidden .nav-links {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-left: auto !important;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .hero-panel {
    padding: 40px 24px;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .hero-photo-container {
    order: -1; /* Image first on mobile */
  }
  
  .hero-img-fallback {
    max-height: 320px;
    width: 100%;
  }
  
  .section-padding {
    padding: 60px 0;
  }
  
  .section-header h2 {
    font-size: 28px;
  }
  
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .reassurance-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .split-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar-card {
    position: static;
  }
  
  .sticky-mobile-bar {
    display: none !important;
  }
  
  body {
    padding-bottom: 0 !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .emergency-box {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 32px;
  }
  
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-cta .btn {
    width: 100%;
  }
  
  .btn {
    padding: 12px 16px;
    font-size: 14px;
    white-space: nowrap !important;
  }
}

/* --- Hero Video Section Styles --- */
.hero-scroll-intro-wrapper {
  position: relative;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-ink);
  overflow: hidden;
}

.hero-scroll-sticky {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 10;
}

.hero-scroll-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-scroll-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-bg-video { display: none; }
  .hero-scroll-bg { background: url('../images/hero-video-poster.png') center/cover; }
}

.hero-scroll-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(8, 14, 22, 0.12) 0%, rgba(5, 10, 18, 0.35) 100%);
  background-color: rgba(6, 14, 24, 0.18);
  mix-blend-mode: multiply;
  backdrop-filter: blur(1px);
}

/* Video-time-synced captions */
.hero-caption-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-caption {
  position: absolute;
  bottom: 13%;
  max-width: 620px;
  padding: 0 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.hero-caption.active {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

.caption-pos-center {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.caption-pos-left {
  left: 7%;
  text-align: left;
}

.hero-caption-text {
  font-size: 46px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
  text-align: inherit;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
  min-height: 1.25em;
}

.hero-caption-text.typing-cursor::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: var(--color-brand-bright);
  animation: cursorBlink 0.85s steps(1) infinite;
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero-name-caption .hero-name-text {
  font-size: 54px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 8px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.3);
  min-height: 1.1em;
}

.hero-name-caption .hero-designation-text {
  font-size: 19px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  text-align: inherit;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  min-height: 1.3em;
}

.hero-name-caption .hero-designation-text.typing-cursor::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: var(--color-brand-bright);
  animation: cursorBlink 0.85s steps(1) infinite;
}

/* Scroll button, present from page load; clicking it jumps to the next section */
.hero-scroll-hint {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s;
  z-index: 4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  animation: heroScrollHintBounce 1.8s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.hero-scroll-hint.visible {
  opacity: 1;
  visibility: visible;
}

.hero-scroll-hint:hover .hero-scroll-hint-icon {
  transform: translateY(3px);
}

.hero-scroll-hint-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint {
    animation: none;
  }
}

@keyframes heroScrollHintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* Meet the Specialist Section (moved below the video) */
.meet-specialist-section {
  background-color: var(--color-surface);
}

.solution-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid rgba(16, 20, 24, 0.06);
  padding: 48px;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-ambient);
}

.solution-content {
  color: var(--color-ink);
}

.solution-eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--color-brand-bright);
  margin-bottom: 12px;
  display: block;
}

.solution-title {
  font-size: 44px;
  color: var(--color-ink);
  margin-bottom: 8px;
  line-height: 1.15;
}

.solution-subtitle {
  font-size: 19px;
  color: rgba(16, 20, 24, 0.75);
  font-weight: 500;
  margin-bottom: 24px;
}

.solution-description {
  font-size: 16px;
  color: rgba(16, 20, 24, 0.65);
  line-height: 1.6;
  margin-bottom: 32px;
}

.solution-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px;
  margin-bottom: 24px;
}

.solution-cta .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  padding: 16px 36px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  background-color: #25D366;
  border-color: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.solution-cta .btn-whatsapp:hover {
  background-color: #20ba5a;
  border-color: #20ba5a;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
}

.btn-icon-svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex-shrink: 0;
}

.solution-trust {
  font-size: 13px;
  color: rgba(16, 20, 24, 0.55);
  line-height: 1.4;
  border-top: 1px solid rgba(16, 20, 24, 0.12);
  padding-top: 16px;
}

.solution-doctor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.doctor-photo-frame {
  border-radius: var(--radius-panel);
  border: 4px solid rgba(16, 20, 24, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-width: 320px;
  aspect-ratio: 3 / 3.8;
}

.doctor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center !important;
}

/* Responsiveness overrides */
@media (max-width: 991px) {
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }

  .solution-doctor {
    order: -1;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
  }

  .doctor-photo-frame {
    display: block !important;
    width: 190px !important;
    height: 215px !important;
    max-width: 190px !important;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  }

  .doctor-img,
  .complex-cases-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  .solution-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .hero-caption {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    max-width: 92%;
    bottom: 14%;
    padding: 0 16px;
  }

  .hero-caption-text {
    font-size: 26px;
  }

  .hero-name-caption .hero-name-text {
    font-size: 30px;
  }

  .hero-name-caption .hero-designation-text {
    font-size: 14px;
  }

  .hero-scroll-hint {
    bottom: 4%;
    font-size: 11px;
    padding: 12px 22px;
  }

  .solution-grid {
    padding: 14px 12px 12px 12px;
    width: calc(100% - 16px);
    margin: 0 auto;
    gap: 10px;
  }

  .doctor-photo-frame {
    display: block !important;
    width: 170px !important;
    height: 190px !important;
    max-width: 170px !important;
    margin: 0 auto 4px auto;
    border-radius: 16px;
    overflow: hidden;
  }

  .doctor-img,
  .complex-cases-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  .solution-eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .solution-title {
    font-size: 25px;
    margin-bottom: 4px;
  }

  .solution-subtitle {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .solution-description {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.35;
  }

  .solution-cta {
    gap: 8px;
    padding: 0;
    margin-bottom: 10px;
  }

  .solution-cta .btn-whatsapp {
    padding: 10px 18px;
    font-size: 15px;
  }

  .solution-cta .btn {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1;
  }

  .solution-trust {
    font-size: 10px;
    padding-top: 6px;
    line-height: 1.3;
  }
}

@media (max-height: 680px) and (max-width: 768px) {
  .doctor-photo-frame {
    width: 135px !important;
    height: 150px !important;
  }
  .solution-description {
    margin-bottom: 6px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero-caption-text {
    font-size: 20px;
  }
  .hero-name-caption .hero-name-text {
    font-size: 24px;
  }
  .doctor-photo-frame {
    display: none;
  }
  .solution-title {
    font-size: 22px;
  }
  .solution-description {
    margin-bottom: 12px;
    line-height: 1.3;
  }
}

/* Chamber Cards Section */
.chamber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.chamber-card {
  background: var(--color-surface);
  border: 1px solid rgba(7, 160, 174, 0.15);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chamber-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-brand), var(--color-brand-bright));
}

.chamber-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(7, 160, 174, 0.12);
  border-color: var(--color-brand-bright);
}

.chamber-badge {
  display: inline-block;
  background: var(--color-brand-wash);
  color: var(--color-brand);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(7, 160, 174, 0.2);
  margin-bottom: 12px;
}

.chamber-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.chamber-hospital {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-brand);
  margin-bottom: 8px;
  line-height: 1.4;
}

.chamber-location {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chamber-days {
  font-size: 13px;
  background: var(--color-brand-wash);
  border: 1px solid rgba(7, 160, 174, 0.15);
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--color-ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.chamber-days-icon {
  font-size: 16px;
}

/* Button Icon Styling & Interactivity */
.btn {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.btn-icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover .btn-icon-svg {
  transform: scale(1.18) rotate(-4deg);
}

.btn:hover .btn-arrow-icon {
  transform: translateX(4px);
}

/* Button Ripple Effect */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 3D Card Hover & Lighting */
.card, .chamber-card, .sidebar-card, .urgency-card {
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Scroll Reveal Observer Animation */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accordion FAQ Interactivity */
.accordion-trigger {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.accordion-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-wash);
  color: var(--color-brand);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.legacy-faq-item .faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease, margin 0.3s ease;
}

.legacy-faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
  margin-top: 12px;
}

.accordion-item.active .accordion-chevron {
  transform: rotate(180deg);
  background-color: var(--color-brand);
  color: var(--color-surface);
}

/* Floating Back-to-Top Button */
#back-to-top {
  position: fixed;
  bottom: 84px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s ease, box-shadow 0.3s ease;
  z-index: 99;
}

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

#back-to-top:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 32px rgba(7, 160, 174, 0.25);
  color: var(--color-brand-bright);
}

.progress-ring {
  position: absolute;
  top: 2px;
  left: 2px;
  transform: rotate(-90deg);
}

.progress-ring-bg {
  stroke: rgba(7, 160, 174, 0.15);
  stroke-width: 3;
  fill: transparent;
}

.progress-ring-circle {
  stroke: var(--color-brand);
  stroke-width: 3;
  fill: transparent;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s ease;
}

.arrow-up-icon {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  #back-to-top {
    bottom: 90px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

/* --- SVG Vector Icon Styling --- */
.card-icon-svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.card:hover .card-icon-svg,
.urgency-card:hover .card-icon-svg {
  transform: scale(1.15) rotate(-4deg);
  stroke: var(--color-brand-bright);
}

/* --- Counting Stats Bar --- */
.stats-section {
  padding: 40px 0;
  background: linear-gradient(135deg, var(--color-brand), #057d88);
  color: var(--color-surface);
  box-shadow: 0 10px 30px rgba(7, 160, 174, 0.2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-tile {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  padding: 28px 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.stat-tile:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
}

.stat-number {
  font-size: 42px;
  font-weight: 700;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 8px;
  display: block;
}

.stat-label {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stat-number {
    font-size: 34px;
  }
}

/* --- 2-Column Complex Cases Section --- */
.complex-cases-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

.complex-cases-image-col {
  position: relative;
}

.complex-cases-frame {
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(16, 20, 24, 0.12);
  border: 4px solid var(--color-surface);
  position: relative;
}

.complex-cases-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.complex-cases-frame:hover .complex-cases-img {
  transform: scale(1.03);
}

.complex-cases-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(7, 160, 174, 0.2);
  padding: 16px;
  border-radius: var(--radius-card);
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.complex-cases-badge-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-brand);
}

.complex-cases-badge-sub {
  font-size: 13px;
  color: var(--color-muted);
}

@media (max-width: 991px) {
  .complex-cases-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* --- Interactive Disease Detail Modal --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 20, 24, 0.65);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-panel);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(7, 160, 174, 0.2);
  position: relative;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 36px;
}

/* Cinematic Condition Modal Banner Header */
.modal-banner-header {
  position: relative;
  height: 220px;
  width: calc(100% + 72px);
  margin: -36px -36px 28px -36px;
  overflow: hidden;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

.modal-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.82;
  filter: brightness(0.92) contrast(1.1);
  display: block;
}

.modal-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(10, 46, 58, 0.3) 0%, rgba(10, 46, 58, 0.88) 100%);
}

.modal-banner-content {
  position: absolute;
  bottom: 20px;
  left: 32px;
  right: 60px;
  z-index: 2;
}

.modal-banner-content .modal-badge {
  background: rgba(7, 160, 174, 0.9);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 8px;
}

.modal-banner-content .modal-title {
  color: #ffffff !important;
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.modal-close {
  z-index: 10;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(4px);
}

.modal-close:hover {
  background: rgba(7, 160, 174, 0.9) !important;
}

/* Split Half-Image & Half-Text Condition Card Pattern */
.card-grid .condition-card-with-bg,
.condition-grid-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  background-color: var(--color-surface) !important;
  border: 1px solid rgba(7, 160, 174, 0.14) !important;
  border-radius: var(--radius-card) !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

.card-grid .condition-card-with-bg:hover,
.condition-grid-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(7, 160, 174, 0.16) !important;
  border-color: var(--color-brand) !important;
}

.condition-card-media {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background-color: #072a34;
  flex-shrink: 0;
}

.condition-card-media .condition-card-bg-img,
.condition-card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  transition: transform 0.4s ease, filter 0.35s ease, opacity 0.35s ease;
}

.card-grid .condition-card-with-bg:hover .condition-card-media .condition-card-bg-img,
.card-grid .condition-card-with-bg:hover .condition-card-media img,
.condition-grid-card:hover .condition-card-media img {
  transform: scale(1.08);
}

.condition-card-media .card-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  margin-bottom: 0 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.condition-card-content {
  padding: 22px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background-color: var(--color-surface);
}

.condition-card-content .card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
  line-height: 1.35;
}

.condition-card-content .card-body {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.condition-card-content .card-action {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.card-grid .condition-card-with-bg:hover .condition-card-content .card-action,
.condition-grid-card:hover .condition-card-content .card-action {
  transform: translateX(5px);
  color: var(--color-brand-bright);
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-brand-wash);
  color: var(--color-ink);
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.modal-close:hover {
  background: var(--color-brand-tint);
  color: var(--color-brand);
  transform: scale(1.1);
}

.modal-badge {
  display: inline-block;
  background: var(--color-brand-wash);
  color: var(--color-brand);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.modal-title {
  font-size: 26px;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.modal-body-text {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 24px;
}

.modal-section-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 20px 0 10px 0;
}

.modal-list {
  padding-left: 20px;
  color: var(--color-muted);
  font-size: 15px;
  margin-bottom: 24px;
}

.modal-list li {
  margin-bottom: 6px;
}

.modal-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(7, 160, 174, 0.15);
  padding-top: 24px;
}

/* --- SEO Blog Layout --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.blog-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid rgba(7, 160, 174, 0.12);
  padding: 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(7, 160, 174, 0.12);
  border-color: var(--color-brand-bright);
}

.blog-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brand);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.blog-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
  line-height: 1.35;
}

.blog-excerpt {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.blog-meta {
  font-size: 13px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;
}

/* Blog cards use the same half-photo / half-text split as the condition cards */
.blog-grid .blog-card {
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: 0;
  border: 1px solid rgba(7, 160, 174, 0.14) !important;
  text-align: left !important;
}

.blog-grid .blog-card:hover {
  border-color: var(--color-brand) !important;
}

.blog-card-media {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background-color: rgba(7, 160, 174, 0.06);
  flex-shrink: 0;
}

.blog-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.08);
}

.blog-card-content {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ===== Cinematic Auto-Slider Banner ===== */
.section-slider-banner {
  position: relative;
  width: 100%;
  min-height: 340px;
  overflow: hidden;
  margin-bottom: 0;
}

.slider-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slider-track img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.slider-track img.slider-active {
  opacity: 0.8;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 46, 58, 0.3) 0%, rgba(10, 46, 58, 0.6) 100%);
  pointer-events: none;
}

.slider-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 60px 20px;
}

.slider-content-inner {
  text-align: center;
  max-width: 850px;
}

.slider-content-inner h2 {
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  line-height: 1.15;
}

.slider-content-inner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.65;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  margin: 0 auto;
}

.slider-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}

.slider-dot.dot-active {
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 768px) {
  .section-slider-banner {
    min-height: 260px;
  }
  .slider-content {
    min-height: 260px;
    padding: 50px 16px;
  }
  .slider-content-inner h2 {
    font-size: 26px;
  }
  .slider-content-inner p {
    font-size: 15px;
  }
}

/* ==========================================================================
   UNIVERSAL SUBPAGE FLOATING CARDS & HOVER ANIMATION SYSTEM
   ========================================================================== */

/* Turn all major subpage section blocks into styled card containers */
/* ==========================================================================
   3D GRAVITATIONAL OBJECT BENDING & FLOATING SYSTEM
   ========================================================================== */

.card,
.chamber-card,
.urgency-card,
.blog-card,
.accordion-item,
.sidebar-card,
.contact-sidebar-card,
.contact-options-card,
.emergency-box,
.pullquote-card,
.solution-cta {
  background-color: var(--color-surface);
  border: 1px solid transparent !important;
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transform-style: flat;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  margin-bottom: 24px;
}

/* Specific styling for inner option boxes inside contact/options cards */
.contact-options-card > div > div,
.contact-options-card div[style*="background:"] {
  border-radius: 14px !important;
  margin-bottom: 0;
  border: 1px solid transparent !important;
  transform: none !important;
  transform-style: flat !important;
}

/* Fallback border highlight when gravitational box is hovered */
.card:hover,
.chamber-card:hover,
.urgency-card:hover,
.blog-card:hover,
.accordion-item:hover,
.sidebar-card:hover,
.contact-sidebar-card:hover,
.contact-options-card:hover,
.emergency-box:hover,
.pullquote-card:hover,
.solution-cta:hover {
  border-color: rgba(7, 160, 174, 0.35) !important;
}

/* ==========================================================================
   LUCIDE SVG ICON PACK SYSTEM (Replaces Emojis)
   ========================================================================== */
.icon-lucide {
  width: 18px;
  height: 18px;
  stroke: var(--color-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  flex-shrink: 0;
}

.icon-lucide-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand-wash);
  border: 1px solid rgba(7, 160, 174, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  flex-shrink: 0;
}

.icon-lucide-box svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ==========================================================================
   RESPONSIVE VIEWPORT IMAGE & SLIDER SYSTEM
   ========================================================================== */
.service-card-img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 160, 174, 0.15);
}

.subpage-hero-bg-img,
.condition-card-bg-img,
.doctor-img,
.complex-cases-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Desktop & Wide Viewport Hero Banner Alignment (Fix cropped photos/heads on Desktop) */
@media (min-width: 769px) {
  .subpage-hero {
    min-height: 480px;
  }
  .subpage-hero-bg-img {
    object-fit: cover;
    object-position: center 30%;
  }
  .subpage-hero-content {
    padding: 130px 20px 95px 20px;
  }

  .about-body-doctor-card {
    width: 280px;
    height: 360px;
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .about-body-doctor-img {
    height: 100%;
    object-position: top center;
  }
}

/* Mobile & Viewport Adjustments */
@media (max-width: 768px) {
  .service-card-img {
    max-height: 240px;
    margin-bottom: 16px;
  }
  .subpage-hero {
    min-height: 280px;
  }
  .section-slider-banner {
    min-height: 280px;
  }
  .slider-content {
    min-height: 280px;
    padding: 40px 16px;
  }
  .slider-content-inner h2 {
    font-size: 26px;
  }
  .slider-content-inner p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .service-card-img {
    max-height: 200px;
  }
}


/* ==========================================================================
   REAL ORGAN / GORE / BLOOD SENSITIVE IMAGE GRAYSCALE & OPACITY SYSTEM
   ========================================================================== */
img[src*="condition-pancreas.png"],
img[src*="service-bile-duct-stone.jpg"],
img[src*="service-liver-cyst-removal.jpg"],
img[src*="service-pancreatic-surgery.jpg"],
img[src*="service-laparoscopic-gallbladder.jpg"],
.sensitive-gore-img {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  opacity: 0.45 !important;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.4s ease !important;
}

/* Hover reveal for sensitive real organ images */
img[src*="condition-pancreas.png"]:hover,
img[src*="service-bile-duct-stone.jpg"]:hover,
img[src*="service-liver-cyst-removal.jpg"]:hover,
img[src*="service-pancreatic-surgery.jpg"]:hover,
img[src*="service-laparoscopic-gallbladder.jpg"]:hover,
.sensitive-gore-img:hover,
.card-grid .condition-card-with-bg:hover .sensitive-gore-img {
  filter: grayscale(20%) !important;
  -webkit-filter: grayscale(20%) !important;
  opacity: 0.85 !important;
}

/* ==========================================================================
   MOBILE-ONLY CENTRAL LOCK & ACCURATE SUBPAGE ALIGNMENT SYSTEM (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal shift & lock viewport centrally on all pages without breaking sticky scroll */
  html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Universal text & heading wrapping to prevent text overflow */
  h1, h2, h3, h4, h5, h6, p, span, a, li {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Flex headings (e.g. h2 with icon badge inside services & conditions) */
  h1[style*="display: flex"],
  h2[style*="display: flex"],
  h3[style*="display: flex"],
  .layout-main h2 {
    display: block !important;
    text-align: center !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    margin: 0 auto 12px auto !important;
  }

  h1[style*="display: flex"] > span,
  h2[style*="display: flex"] > span,
  h3[style*="display: flex"] > span,
  .layout-main h2 > span {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin: 0 auto 8px auto !important;
  }

  /* Centered Paragraphs & Content inside Section Boxes */
  .layout-main p,
  .layout-main div[id] p,
  .contact-options-card p,
  .sidebar-card p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* Centered Service & Section Box Images */
  .service-card-img,
  .card-img,
  .layout-main img,
  .condition-card-media img {
    margin: 0 auto 16px auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  /* Services & Contact Page Specific Mobile Alignment & Min-Width Cleanses */
  .contact-options-card [style*="min-width"],
  .card [style*="min-width"],
  .layout-main [style*="min-width"],
  div[style*="min-width"],
  a[style*="min-width"] {
    min-width: 0 !important;
  }

  .contact-options-card div[style*="display: flex"],
  .layout-main div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .contact-options-card div[style*="display: flex"] > *,
  .layout-main div[style*="display: flex"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }

  .contact-options-card a.btn,
  .contact-options-card .btn,
  .layout-main a.btn {
    width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Buttons & Action Links */
  .btn, a.btn, a[class*="btn"], button[class*="btn"] {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Media containment */
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box !important;
  }

  /* Subpage Hero Banners & Slider Banners */
  .subpage-hero,
  .section-slider-banner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 220px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .subpage-hero-bg,
  .slider-track {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .subpage-hero-bg-img,
  .slider-track img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .subpage-hero-content,
  .slider-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 70px 16px 36px 16px !important;
    margin: 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .subpage-hero-content .subpage-title,
  .slider-content-inner h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .subpage-hero-content .subpage-subtitle,
  .slider-content-inner p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Containers & Section Padding */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .section-padding {
    padding: 36px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* The home page hides the body's top padding so the hero can run full bleed
     under the fixed header. Every section after it then has nothing holding it
     clear of that bar, and 36px is not enough: the doctor's portrait, the first
     thing below the hero, had its top cropped off. --header-h is measured in
     js/main.js because the bar grows a line taller when the logo subtitle wraps
     on narrow screens, so a fixed number would be wrong at some widths. */
  body.has-hero-scroll .meet-specialist-section {
    padding-top: calc(var(--header-h, 96px) + 28px) !important;
  }

  .split-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .layout-main,
  .layout-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Section Cards & Floating Blocks */
  .card,
  .chamber-card,
  .urgency-card,
  .blog-card,
  .accordion-item,
  .sidebar-card,
  .contact-sidebar-card,
  .contact-options-card,
  .emergency-box,
  .pullquote-card,
  .condition-card-with-bg,
  .service-card,
  .solution-card,
  .layout-main div[id] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Contact Options Card Inner Layout Fix */
  .contact-options-card {
    padding: 16px 12px !important;
    text-align: center !important;
  }

  .contact-options-card > div {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .contact-options-card div[style*="background:"] {
    padding: 16px 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .icon-lucide-box {
    margin: 0 auto 8px auto !important;
  }

  .card-grid,
  .chamber-grid,
  .blog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Footer Mobile Centered Lock */
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 40px 0 20px 0 !important;
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .footer-brand,
  .footer-links,
  .footer-contact {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Gallery Page --- */

/* This page has no banner, so the intro block is the first thing under the
   header. It needs no extra top clearance: body:not(.has-hero-scroll) already
   carries padding-top: 80px for the fixed header, and this page is not the
   scroll-hero home page. */
.gallery-intro {
  padding: 56px 0 8px;
}

.gallery-title {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.gallery-intro-text {
  color: var(--color-muted);
  max-width: 62ch;
}

.gallery-section {
  padding: 32px 0 80px;
}

/* Masonry via CSS columns rather than grid.
   The photographs are a mix of shapes and are meant to keep their own
   proportions, which is exactly what columns give for free: each figure keeps
   its intrinsic height and the browser balances the columns. CSS grid would
   need either fixed row heights, which crops, or a JS measuring pass, which is
   a library and a resize listener for a result that plain columns already
   produce. The trade is reading order: columns flow top-to-bottom then across.
   For an unordered set of photographs that carries no meaning, so it costs
   nothing here. It would matter if these were ever ranked or chronological. */
.gallery-masonry {
  columns: 3;
  column-gap: 24px;
}

.gallery-item {
  break-inside: avoid;
  /* Safari still needs the older property to honour break-inside in columns. */
  -webkit-column-break-inside: avoid;
  margin: 0 0 24px;
  background-color: var(--color-surface);
  border: 1px solid rgba(7, 160, 174, 0.05);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(7, 160, 174, 0.08);
  border-color: rgba(7, 160, 174, 0.15);
}

.gallery-media {
  position: relative;
  background-color: var(--color-shape);
}

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

.gallery-caption {
  padding: 18px 20px 20px;
}

.gallery-category {
  display: inline-block;
  background-color: var(--color-brand-tint);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

.gallery-text {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* Sensitive photographs.
   The cover is present in the template and removed at render time for anything
   not flagged, so a rendering failure leaves the photograph covered rather than
   exposed. The blur is applied to the image itself rather than to an overlay,
   because an overlay can be removed with the element inspector while a blurred
   source cannot be un-blurred client side. It is not real access control, but
   it does mean a casual reader cannot see the picture by accident. */
.gallery-item.is-sensitive .gallery-img {
  filter: blur(22px);
  transform: scale(1.06);
}

.gallery-reveal {
  position: absolute;
  inset: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  /* 0.62, not a lighter scrim: against a blurred white photograph the 13px
     hint text only reaches 3.94:1 at 0.55, which fails WCAG AA. At 0.62 the
     title is 6.19:1 and the hint 5.01:1. */
  background-color: rgba(16, 20, 24, 0.62);
  color: #fff;
  font-family: inherit;
  transition: background-color 0.25s ease;
}

.gallery-reveal:hover {
  background-color: rgba(16, 20, 24, 0.74);
}

.gallery-reveal:focus-visible {
  outline: 3px solid var(--color-brand-bright);
  outline-offset: -3px;
}

.gallery-reveal-title {
  font-size: 15px;
  font-weight: 600;
}

.gallery-reveal-hint {
  font-size: 13px;
  opacity: 0.85;
}

@media (max-width: 992px) {
  .gallery-masonry {
    columns: 2;
  }
}

@media (max-width: 768px) {
  .gallery-masonry {
    columns: 1;
  }

  .gallery-intro {
    padding: 36px 0 4px;
  }

  .gallery-title {
    font-size: 30px;
  }

  .gallery-section {
    padding: 24px 0 60px;
  }
}

/* The header carries seven links plus the language switch once Gallery is
   added. Between the 768px drawer breakpoint and roughly 1080px that is enough
   to push the list onto a second line, so the gap tightens rather than the nav
   wrapping. */
@media (max-width: 1080px) and (min-width: 769px) {
  .nav-links {
    gap: 13px;
  }

  .nav-links a {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-reveal {
    transition: none;
  }

  .gallery-item:hover {
    transform: none;
  }
}

/* Shown on a /bn/blog page whose article has no Bengali version yet. */
.article-lang-note {
  margin: 12px 0 4px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-muted);
  background: rgba(7, 160, 174, 0.06);
  border-left: 3px solid var(--color-brand);
  border-radius: 6px;
}

/* "Open in Google Maps" on each chamber card (built from the Chambers list). */
.chamber-map-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
}
.chamber-map-link:hover { text-decoration: underline; }