/* ============================================================
   SUTRA HEALTH — SITE STYLESHEET
   Single source of truth. This file replaces:
     1) the old inline <style> block that lived in index.html
     2) the old external Index.css (which was a stale, conflicting
        duplicate — see notes at the end of this file)
============================================================ */

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: #f8f6f1;
  color: #243024;
  overflow-x: hidden;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; }
[data-aos] { pointer-events: auto !important; }

/* ============================================================
   FLUID TYPE SCALE
============================================================ */
:root {
  --step--2: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem);
  --step--1: clamp(0.85rem, 0.79rem + 0.3vw, 1rem);
  --step-0:  clamp(0.95rem, 0.88rem + 0.35vw, 1.125rem);
  --step-1:  clamp(1.05rem, 0.96rem + 0.45vw, 1.25rem);
  --step-2:  clamp(1.2rem,  1.05rem + 0.75vw, 1.5rem);
  --step-3:  clamp(1.4rem,  1.15rem + 1.25vw, 1.85rem);
  --step-4:  clamp(1.7rem,  1.3rem  + 2vw,    2.4rem);
  --step-5:  clamp(2.1rem,  1.5rem  + 3vw,    3rem);
  --step-6:  clamp(2.6rem,  1.7rem  + 4.5vw,  4.2rem);
  --step-7:  clamp(3.1rem,  1.9rem  + 6vw,    5.8rem);
  --gold-light: #E9C46A;
  --gold-deep:  #D4AF37;
  --sage:       #2E4A2B;
  --cream:      #FEFCF5;
  --charcoal:   #1C2F1A;
  --glass-white: rgba(255,255,248,0.92);
}

/* ============================================================
   HERO SECTION
   - background: url() is a real fallback image, so if the video
     fails to load for any reason the hero still looks intentional
     instead of breaking.
   - min-height:100vh + flex centering means there is ONE height
     rule, valid at every screen size. No px-height battles.
============================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 140px;
}

/* Glow blobs — z-index 0, below everything */
.hero-section::before {
  content: "";
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: rgba(46,184,114,0.12);
  filter: blur(120px);
  top: -180px; left: -120px;
  z-index: 0;
  pointer-events: none;
}
.hero-section::after {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(233,196,106,0.10);
  filter: blur(120px);
  bottom: -150px; right: -100px;
  z-index: 0;
  pointer-events: none;
}

/* Hero background video — z-index 0, below overlay.
   Starts transparent and fades in once it actually has a frame
   painted, so there's never a flash of a black rectangle over
   the fallback background image. See the small script in
   index.html that toggles .is-ready. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-video.is-ready { opacity: 1; }

/* Dark overlay — z-index 1, non-interactive */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.70);
  z-index: 1;
  pointer-events: none;
}

/* Hero content — z-index 10, fully above overlay */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(40px,8vw,100px) clamp(16px,4vw,20px);
  margin-top: 50px;
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(9px,2vw,12px) clamp(16px,4vw,24px);
  border-radius: 50px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: clamp(18px,4vw,30px);
  flex-wrap: wrap;
  justify-content: center;
}
.tagline span {
  color: #fff;
  font-size: var(--step--2);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--step-7);
  line-height: 1.1;
  color: #fff;
  width: 100% !important;
  margin-bottom: clamp(18px,3vw,25px);
}
.hero-content h1 span { color: #2eb872; }

.hero-content p {
  color: rgba(255,255,255,0.88);
  max-width: 700px;
  margin: 0 auto clamp(28px,5vw,40px);
  font-size: var(--step-1);
}

/* Buttons container — z-index 11 */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(10px,2.5vw,14px);
  flex-wrap: wrap;
  position: relative;
  z-index: 11;
}

/* All buttons — always clickable */
.btn-primary,
.btn-secondary {
  text-decoration: none;
  padding: clamp(12px,2.5vw,15px) clamp(22px,4vw,32px);
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--step-0);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 11;
  font-family: 'DM Sans', sans-serif;
}

.btn-primary {
  background: #2eb872;
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(46,184,114,0.35);
}
.btn-primary:hover {
  transform: translateY(-4px);
  background: #23935c;
  box-shadow: 0 10px 28px rgba(46,184,114,0.45);
}

.btn-secondary {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}

.btn-retreat {
  background: linear-gradient(135deg,#D4AF37,#E9C46A) !important;
  color: #1E2417 !important;
  border: none !important;
}
.btn-retreat:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 26px rgba(212,175,55,0.40) !important;
}

.btn-contact-popup {
  background: #18301f !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.btn-contact-popup:hover {
  transform: translateY(-4px) !important;
  background: #0f241c !important;
}

/* Stats bar — z-index 10 */
.stats-container {
  position: absolute;
  bottom: clamp(16px,4vw,40px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(10px,2vw,20px);
  flex-wrap: wrap;
  justify-content: center;
  z-index: 10;
  width: 100%;
  padding: 0 16px;
}

.stat-box {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  padding: clamp(14px,3vw,20px) clamp(18px,4vw,30px);
  min-width: 140px;
  flex: 1 1 150px;
  max-width: 220px;
  text-align: center;
  transition: transform 0.3s ease;
}
.stat-box:hover { transform: translateY(-4px); }
.stat-box h2 { color: #2eb872; font-size: var(--step-3); margin-bottom: 5px; }
.stat-box p  { color: #fff; font-size: var(--step--1); }

/* ============================================================
   FLOATING WHATSAPP BUTTON
============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 30px; right: 30px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px,10vw,72px);
  height: clamp(56px,10vw,72px);
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 30px rgba(37,211,102,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.10) translateY(-3px);
  box-shadow: 0 8px 40px rgba(37,211,102,0.5);
}
.whatsapp-float svg { width: 55%; height: 55%; fill: white; display: block; }
@media (max-width:480px) { .whatsapp-float { bottom:20px; right:20px; width:56px; height:56px; } }
@media (max-width:380px) { .whatsapp-float { bottom:16px; right:16px; width:48px; height:48px; } }

/* ============================================================
   SCOPE SECTION
============================================================ */
.scope-section { background: #fdf8ee; padding: clamp(60px,10vw,100px) 5%; }
.container-premium { max-width: 1300px; margin: auto; }
.scope-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--step-5);
  margin-bottom: clamp(16px,3vw,25px);
  color: #18301f;
}
.scope-text p { margin-bottom: 20px; font-size: var(--step-0); }
.evidence-badge {
  background: #edf8f1;
  border-left: 4px solid #2eb872;
  padding: 20px;
  border-radius: 15px;
  margin: 25px 0;
  font-size: var(--step-0);
}
.score-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 14px 30px;
  border-radius: 40px;
  background: #18301f;
  color: white;
  text-decoration: none;
  font-size: var(--step-0);
}

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr));
  gap: 25px;
  margin: 60px 0;
}
.protocol-card {
  background: #fff;
  padding: clamp(22px,4vw,30px);
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border: 1px solid rgba(233,196,106,0.15);
}
.protocol-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.12); }
.protocol-card h4 { color: #2eb872; margin-bottom: 12px; font-size: var(--step-1); }
.protocol-card p  { font-size: var(--step-0); }

.conditions-list {
  background: #fff;
  padding: clamp(22px,4vw,35px);
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
.conditions-list p, .conditions-list li { font-size: var(--step-0); }

.approach-highlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr));
  gap: 20px;
  margin: 60px 0;
}
.approach-item {
  background: #fff;
  padding: 25px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  font-size: var(--step-0);
  font-weight: 500;
}

/* ============================================================
   TRAFFIC LIGHT IMAGE SECTION
============================================================ */
.traffic-image-section {
  padding: clamp(50px,10vw,80px) 5%;
  background: linear-gradient(135deg,#f8f6f1 0%,#f0ebe0 100%);
}
.traffic-image-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px,6vw,60px);
  align-items: center;
}
.traffic-image-left h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--step-5);
  color: #18301f;
  margin-bottom: 20px;
}
.traffic-image-left p { font-size: var(--step-0); color: #4a5a4a; line-height: 1.8; margin-bottom: 20px; }
.traffic-image-left .highlight-box {
  background: #edf8f1;
  border-left: 4px solid #2eb872;
  padding: clamp(14px,3vw,20px) clamp(16px,4vw,25px);
  border-radius: 12px;
  margin-top: 20px;
  font-size: var(--step-0);
}
.traffic-image-right { display: flex; justify-content: center; align-items: center; }
.traffic-image-right img {
  max-width: 100%; height: auto;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.traffic-image-right img:hover { transform: scale(1.02); box-shadow: 0 30px 60px rgba(0,0,0,0.2); }
.traffic-image-right .image-placeholder {
  width: 100%; max-width: 500px;
  background: linear-gradient(135deg,#2B7A3E,#E9C46A,#C44536);
  border-radius: 24px;
  padding: clamp(30px,6vw,60px) clamp(20px,4vw,40px);
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.image-placeholder .emoji-big { font-size: clamp(3rem,8vw,5rem); display: block; margin-bottom: 20px; }
.image-placeholder h3 { color: white; font-size: var(--step-4); margin-bottom: 10px; font-family: 'Playfair Display', serif; }
.image-placeholder .colors { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.image-placeholder .colors span { display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); }
.image-placeholder .colors .green  { background: #2B7A3E; }
.image-placeholder .colors .yellow { background: #E9C46A; }
.image-placeholder .colors .red    { background: #C44536; }
@media(max-width:900px){ .traffic-image-container{ grid-template-columns:1fr; } }

/* ============================================================
   TRAFFIC LIGHT TEXT BOX
============================================================ */
.traffic-light {
  background: #fff;
  padding: clamp(22px,4vw,35px);
  border-radius: 25px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}
.traffic-light h3 { margin-bottom: 15px; color: #18301f; font-size: var(--step-2); }
.traffic-light p { font-size: var(--step-0); }

/* ============================================================
   YOGA TIMELINE SECTION
============================================================ */
.section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(50px,8vw,70px) clamp(20px,6vw,8%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px,6vw,80px);
}
.left { flex: 1 1 320px; max-width: 600px; }
.tag {
  padding-top: clamp(24px,6vw,100px);
  font-size: var(--step--1);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #2eb872;
  margin-bottom: 20px;
  font-weight: 600;
}
.title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--step-6);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 28px;
  color: #0f241c;
}
.desc { font-size: var(--step-0); line-height: 1.8; color: #5b625e; margin-bottom: clamp(30px,6vw,50px); }
.timeline { position: relative; padding-left: 35px; }
.timeline::before { content:''; position:absolute; left:6px; top:10px; width:1px; height:100%; background:#2eb872; }
.item { position:relative; margin-bottom:45px; }
.dot { width:12px; height:12px; background:#1c5138; border-radius:50%; position:absolute; left:-35px; top:5px; }
.time { color:#2eb872; font-size:var(--step--2); font-weight:700; letter-spacing:2px; margin-bottom:10px; }
.item h3 { font-size:var(--step-3); margin-bottom:10px; font-family:'Cormorant Garamond',serif; }
.item p  { color:#636965; line-height:1.7; font-size:var(--step-0); }
.right { flex:1 1 320px; min-width:0; display:grid; grid-template-columns:1.1fr 0.9fr; gap:22px; align-items:stretch; width:100%; }
.big-card { aspect-ratio:4/5; }
.small-wrapper { display:flex; flex-direction:column; gap:22px; }
.card { position:relative; overflow:hidden; border-radius:26px; cursor:pointer; width:100%; }
.card img { width:100%; height:100%; object-fit:cover; transition:0.5s; display:block; }
.small-card { flex:1; aspect-ratio:5/4; }
.card .overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.65),transparent); }
.label { position:absolute; left:18px; bottom:18px; background:rgba(20,20,20,0.45); backdrop-filter:blur(10px); color:white; padding:8px 14px; border-radius:50px; font-size:var(--step--2); font-weight:600; }
@media(max-width:1100px){ .right{ grid-template-columns:1fr; } .small-wrapper{ flex-direction:row; } .small-card{ aspect-ratio:1/1; } .big-card{ aspect-ratio:16/10; } }
@media(max-width:520px){ .small-wrapper{ flex-direction:column; } .small-card{ aspect-ratio:16/10; } }

/* ============================================================
   ABOUT SECTION
============================================================ */
.about-section {
  padding: clamp(70px,12vw,150px) clamp(20px,6%,80px) clamp(60px,9vw,120px);
  background: radial-gradient(circle at 10% 30%,#FEF9EF,#F4EFE3);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.about-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjUiIG51bU9jdGF2ZXM9IjMiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjZikiIG9wYWNpdHk9IjAuMDMiLz48L3N2Zz4=');
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.about-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px,7vw,80px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.about-image {
  flex: 1 1 320px;
  position: relative;
  border-radius: clamp(28px,5vw,48px);
  overflow: hidden;
  box-shadow: 0 30px 50px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(233,196,106,0.2) inset;
  transition: transform .4s cubic-bezier(0.2,0.9,0.4,1.1);
}
.about-image img { width:100%; height:auto; display:block; object-fit:cover; transition:transform .8s ease; }
.about-image:hover img { transform:scale(1.05); }
.floating-card {
  position: absolute;
  bottom: clamp(20px,5vw,40px);
  left: clamp(20px,5vw,40px);
  right: clamp(20px,5vw,40px);
  background: rgba(255,255,245,0.98);
  backdrop-filter: blur(18px);
  border-radius: clamp(24px,5vw,32px);
  padding: clamp(20px,4vw,28px) clamp(24px,5vw,32px);
  box-shadow: 0 25px 40px -12px rgba(0,0,0,0.25);
  border: 1px solid rgba(233,196,106,0.6);
  transition: all .3s ease;
}
.floating-card:hover { transform:translateY(-6px); border-color:var(--gold-deep); }
.floating-card .small-text { font-size:var(--step--1); letter-spacing:3px; text-transform:uppercase; color:#B8873A; font-weight:700; background:rgba(233,196,106,0.2); padding:4px 12px; border-radius:100px; }
.floating-card h4 { font-family:'Playfair Display',serif; font-size:clamp(1.2rem,5vw,1.9rem); font-weight:800; margin-top:14px; color:#1E2A1C; line-height:1.3; }
.about-content { flex:1 1 320px; padding:clamp(10px,2vw,20px); min-width:0; }
.section-tag { display:inline-flex; align-items:center; gap:12px; font-size:var(--step--1); letter-spacing:3px; text-transform:uppercase; color:#C49A45; font-weight:700; background:rgba(233,196,106,0.18); padding:6px 20px; border-radius:60px; margin-bottom:clamp(24px,4vw,32px); }
.section-tag::before { content:"✦"; font-size:1.2rem; color:#E9C46A; }
.about-content h2 { font-family:'Playfair Display',serif; font-size:var(--step-5); font-weight:800; line-height:1.2; margin-bottom:clamp(20px,3vw,28px); background:linear-gradient(135deg,#1C2F1A 0%,#3B5C34 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.about-content > p { font-size:var(--step-1); line-height:1.7; color:#3f553b; margin-bottom:clamp(34px,6vw,48px); border-left:4px solid #E9C46A; padding-left:clamp(20px,4vw,28px); font-weight:450; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(24px,4vw,36px); margin-top:20px; }
.feature-box { display:flex; align-items:flex-start; gap:clamp(16px,3vw,22px); background:rgba(255,255,252,0.8); backdrop-filter:blur(4px); padding:clamp(20px,3.5vw,26px) clamp(22px,4vw,28px); border-radius:clamp(28px,5vw,36px); transition:all .35s; box-shadow:0 12px 24px -12px rgba(0,0,0,0.05); border:1px solid rgba(233,196,106,0.3); }
.feature-box:hover { transform:translateY(-8px); border-color:var(--gold-light); box-shadow:0 25px 35px -16px rgba(0,0,0,0.15); background:#FFFFFF; }
.icon-box { font-size:clamp(2.2rem,7vw,3rem); background:linear-gradient(145deg,#FEF3E0,#F9E9D2); width:clamp(60px,12vw,70px); height:clamp(60px,12vw,70px); display:flex; align-items:center; justify-content:center; border-radius:clamp(22px,5vw,28px); flex-shrink:0; box-shadow:0 5px 12px rgba(0,0,0,0.05); }
.feature-box h4 { font-size:var(--step-1); font-weight:800; color:#1E3A2B; margin-bottom:8px; }
.feature-box p  { color:#6b7a66; font-size:var(--step--1); line-height:1.5; }
@media(max-width:860px){ .about-section{ padding:80px 5% 60px; } .about-container{ flex-direction:column; } }
@media(max-width:680px){ .feature-box{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   PHILOSOPHY SECTION
============================================================ */
.philosophy-section {
  background: linear-gradient(112deg,#F1EFE7 0%,#FAF7EF 100%);
  padding: clamp(70px,12vw,100px) clamp(20px,5%,80px);
  border-top: 1px solid rgba(233,196,106,0.3);
  border-bottom: 1px solid rgba(233,196,106,0.2);
}
.philosophy-container { max-width:1350px; margin:0 auto; text-align:center; }
.philosophy-container h3 { font-family:'Playfair Display',serif; font-size:var(--step-4); color:#1C2F1A; margin-bottom:clamp(32px,6vw,48px); font-weight:700; position:relative; display:inline-block; }
.philosophy-container h3:after { content:''; display:block; width:70px; height:3px; background:#E9C46A; margin:16px auto 0; border-radius:3px; }
.stats-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,6vw,48px); margin-top:20px; }
.stat-item { background:rgba(255,255,255,0.9); backdrop-filter:blur(4px); padding:clamp(28px,5vw,38px) clamp(24px,4vw,30px); border-radius:clamp(32px,6vw,44px); min-width:min(180px,100%); flex:1 1 200px; text-align:center; box-shadow:0 20px 35px -12px rgba(0,0,0,0.08); transition:all .3s ease; border:1px solid rgba(233,196,106,0.3); }
.stat-item:hover { transform:translateY(-8px); background:white; border-color:#E9C46A; }
.stat-item .number { font-size:var(--step-5); font-weight:800; color:#D4AF37; font-family:'Playfair Display',serif; line-height:1.2; margin-bottom:12px; }
.stat-item p { font-size:var(--step-0); font-weight:600; color:#2e422a; }
.mission-card { background:rgba(255,255,255,0.96); backdrop-filter:blur(12px); border-radius:clamp(28px,7vw,56px); padding:clamp(28px,8vw,58px) clamp(22px,6vw,48px); margin-top:clamp(48px,9vw,70px); text-align:left; border-left:8px solid #E9C46A; box-shadow:0 40px 50px -25px rgba(0,0,0,0.12); transition:transform .3s; }
.mission-card:hover { transform:scale(1.01); }
.mission-card h3 { font-size:var(--step-2) !important; }
.mission-card p { font-size:var(--step-1); line-height:1.65; color:#2d3a2a; }
.mission-card p strong { color:#B8873A; }
.inner-highlight { margin-top:30px; background:linear-gradient(120deg,#F8F3E4,#FEF9EF); padding:clamp(18px,4vw,24px) clamp(18px,4vw,28px); border-radius:28px; border-left:4px solid #E9C46A; font-size:var(--step-0); }
@media(max-width:680px){ .stats-grid{ gap:20px; } .mission-card{ padding:clamp(24px,6vw,32px) clamp(18px,5vw,24px); } }

/* ============================================================
   SUITABILITY CARD
============================================================ */
.suitability-card { background:linear-gradient(135deg,#fff,#f8f1df); padding:clamp(24px,5vw,40px); border-radius:30px; margin-top:50px; }
.suitability-card h3 { font-family:'Playfair Display',serif; margin-bottom:20px; font-size:var(--step-3); }
.suitability-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; font-size:var(--step-0); line-height:2; }
@media(max-width:600px){ .suitability-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ SECTION
============================================================ */
.faq-section {
  padding: clamp(60px,10vw,100px) 5%;
  background: linear-gradient(135deg,#f8f6f1 0%,#f0ebe0 100%);
}
.faq-container { max-width:900px; margin:0 auto; }
.faq-section h2 { font-family:'Playfair Display',serif; font-size:var(--step-5); text-align:center; color:#18301f; margin-bottom:clamp(16px,3vw,25px); }
.faq-section .subtitle { text-align:center; font-size:var(--step-0); color:#6b7a66; margin-bottom:clamp(40px,6vw,60px); }
.faq-item { background:#fff; border-radius:16px; margin-bottom:16px; box-shadow:0 4px 20px rgba(0,0,0,0.06); overflow:hidden; transition:box-shadow 0.3s ease; border:1px solid rgba(233,196,106,0.2); }
.faq-item:hover { box-shadow:0 8px 30px rgba(0,0,0,0.10); }
.faq-question { width:100%; padding:clamp(18px,3vw,24px) clamp(20px,4vw,30px); background:none; border:none; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:var(--step-1); font-weight:600; color:#18301f; text-align:left; font-family:'DM Sans',sans-serif; transition:background 0.3s ease; gap:16px; }
.faq-question:hover { background:rgba(233,196,106,0.08); }
.faq-question .icon { font-size:var(--step-2); flex-shrink:0; transition:transform 0.3s ease; color:#2eb872; }
.faq-item.active .faq-question .icon { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s ease; padding:0 clamp(20px,4vw,30px); }
.faq-item.active .faq-answer { max-height:500px; padding:0 clamp(20px,4vw,30px) clamp(20px,3vw,28px); }
.faq-answer p { font-size:var(--step-0); color:#4a5a4a; line-height:1.8; }

/* ============================================================
   CONTACT POPUP MODAL
============================================================ */
.contact-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,15,0.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 16px;
  opacity: 0;
  transition: opacity .3s ease;
}
.contact-modal-overlay.show { display:flex; opacity:1; }
.contact-modal-card {
  background: #fff;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 28px;
  padding: clamp(26px,5vw,38px);
  position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.35);
  transform: translateY(24px) scale(0.97);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1);
}
.contact-modal-overlay.show .contact-modal-card { transform:translateY(0) scale(1); }
.contact-modal-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:var(--step--2); letter-spacing:2px; text-transform:uppercase; color:#B8873A; font-weight:700; background:rgba(233,196,106,0.18); padding:6px 16px; border-radius:60px; margin-bottom:14px; }
.contact-modal-card h3 { font-family:'Playfair Display',serif; font-size:var(--step-3); color:#18301f; margin-bottom:8px; }
.contact-modal-card .modal-sub { font-size:var(--step--1); color:#6b7a66; margin-bottom:22px; line-height:1.6; }
.cm-field { margin-bottom:16px; }
.cm-field label { display:flex; align-items:center; gap:8px; font-size:var(--step--2); font-weight:600; color:#2e422a; margin-bottom:6px; }
.cm-field input, .cm-field textarea { width:100%; padding:12px 14px; border:1px solid #e3ded1; border-radius:12px; font-family:'DM Sans',sans-serif; font-size:var(--step--1); color:#243024; background:#fbfaf6; transition:border-color .2s ease; }
.cm-field input:focus, .cm-field textarea:focus { outline:none; border-color:#2eb872; }
.cm-field textarea { resize:vertical; min-height:80px; }
.cm-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#2eb872; color:#fff; border:none; padding:14px 20px; border-radius:50px; font-size:var(--step-0); font-weight:700; cursor:pointer; margin-top:6px; transition:background .25s ease, transform .2s ease; font-family:'DM Sans',sans-serif; }
.cm-submit:hover { background:#23935c; transform:translateY(-2px); }
.cm-submit:disabled { opacity:.7; cursor:default; transform:none; }
.cm-note { margin-top:14px; font-size:var(--step--2); color:#8a978a; text-align:center; line-height:1.5; }
.cm-success { display:none; text-align:center; padding:20px 0 4px; }
.cm-success.show { display:block; }
.cm-success i { font-size:2.4rem; color:#2eb872; margin-bottom:10px; }
.cm-success h4 { font-family:'Playfair Display',serif; color:#18301f; margin-bottom:8px; font-size:var(--step-2); }
.cm-success p { color:#6b7a66; font-size:var(--step--1); }

/* ============================================================
   DOCTOR-LED HERO
   The homepage starts with the clinician and consultation, not a
   generic catalogue of wellness services.
=========================================================== */
.hero-section {
  min-height: min(920px, 100svh);
  padding: 110px clamp(20px, 6vw, 88px) 132px;
  justify-content: stretch;
  background: #0d251c;
}
.hero-overlay { background: linear-gradient(90deg, rgba(7, 23, 16, .96) 0%, rgba(9, 31, 21, .88) 48%, rgba(8, 28, 19, .48) 100%); }
.hero-layout {
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(350px, .86fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.hero-content.hero-copy { max-width: 650px; padding: 0; text-align: left; }
.hero-eyebrow {
  color: #d8e9cf !important;
  font-size: var(--step--2) !important;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  margin-bottom: 18px !important;
  text-transform: uppercase;
}
.hero-content h1 { max-width: fit-content; font-size: clamp(3rem, 5.1vw, 5.65rem); margin: auto; letter-spacing: -.04em; }
.hero-content h1 span { color: #c8dba6; }
.hero-lead { max-width: 590px !important; margin: 0 0 24px !important; font-size: var(--step-1) !important; line-height: 1.65; }
.hero-doctor-line { display: flex; align-items: flex-start; gap: 12px; color: #f6f5ed; font-size: var(--step--1); line-height: 1.5; margin: 0 0 30px; }
.doctor-mark { color: #d8b55d; font-size: 1.2rem; padding-top: 2px; }
.hero-buttons { justify-content: flex-start; }
.hero-buttons .btn-secondary { background: transparent; }
.hero-contact-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; }
.hero-contact-links a { color: #e9f2e5; font-size: var(--step--1); text-decoration-color: rgba(216, 233, 207, .45); text-underline-offset: 5px; }
.hero-portrait { position: relative; margin: 0; align-self: stretch; min-height: 470px; overflow: hidden; border-radius: 2px 46px 2px 46px; box-shadow: 28px 28px 0 rgba(200, 219, 166, .15); }
.hero-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 44%, rgba(8, 27, 18, .86) 100%); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; display: block; }
.hero-portrait figcaption { position: absolute; z-index: 1; left: clamp(20px, 4vw, 34px); right: 22px; bottom: clamp(20px, 4vw, 32px); color: #fff; }
.hero-portrait figcaption span { display: block; margin-bottom: 8px; color: #d8e9cf; font-size: var(--step--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-portrait figcaption strong { display: block; max-width: 320px; font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.25; }
.stats-container.hero-proof { gap: 0; width: min(1120px, calc(100% - 40px)); bottom: 26px; padding: 0; flex-wrap: nowrap; border: 1px solid rgba(226, 238, 219, .2); border-radius: 2px; background: rgba(9, 31, 21, .72); }
.hero-proof .stat-box { min-width: 0; max-width: none; flex: 1; padding: 14px clamp(10px, 2vw, 26px); border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.hero-proof .stat-box + .stat-box { border-left: 1px solid rgba(226, 238, 219, .18); }
.hero-proof .stat-box h2 { color: #d8e9cf; font-family: 'Playfair Display', serif; font-size: var(--step-2); }

@media (max-width: 820px) {
  .hero-section { min-height: auto; padding: 108px 20px 190px; }
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-content.hero-copy { max-width: 680px; }
  .hero-portrait { min-height: min(110vw, 500px); width: min(620px, calc(100% - 18px)); margin: 0 0 0 auto; border-radius: 2px 34px 2px 34px; }
  .stats-container.hero-proof { width: calc(100% - 32px); bottom: 24px; }
}
@media (max-width: 540px) {
  .hero-section { padding: 104px 18px 210px; }
  .hero-content h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .hero-buttons { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero-buttons .btn-primary, .hero-buttons .btn-secondary { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero-contact-links { gap: 16px; }
  .hero-portrait { min-height: 390px; width: calc(100% - 10px); box-shadow: 14px 14px 0 rgba(200, 219, 166, .15); }
  .stats-container.hero-proof { display: grid; grid-template-columns: 1fr; width: calc(100% - 36px); }
  .hero-proof .stat-box { padding: 10px 16px; display: flex; gap: 12px; align-items: baseline; text-align: left; }
  .hero-proof .stat-box + .stat-box { border-left: 0; border-top: 1px solid rgba(226, 238, 219, .18); }
  .hero-proof .stat-box h2 { margin: 0; white-space: nowrap; }
}

/* ============================================================
   ACCESSIBILITY: REDUCED MOTION
   Users with this OS setting get a still hero image instead of
   a moving video, and all transitions/animations are cut short.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-video { display: none; }
}

/* ============================================================
   NOTES FOR WHOEVER MAINTAINS THIS NEXT
   ------------------------------------------------------------
   This file replaces two things that used to exist side by side
   and fight each other:

   1. An inline <style> block that used to sit in index.html's
      <head>. It was the version actually styling the page
      (every class used in the HTML body was defined here), so
      its rules were moved into this file wholesale.

   2. An old external Index.css (2,800 lines) that duplicated
      most of the above with different, conflicting values —
      six separate "@media (max-width: 768px)" blocks for the
      hero alone, fixed pixel heights (440px / 470px / 590px /
      600px / 620px, etc.) instead of one fluid rule, and 77
      !important flags used to force each new patch to win over
      the last one. None of its selectors were actually required
      by the live page, so it has been retired rather than merged
      — merging it back in would just reintroduce the cascade
      war. If you need to check what it used to contain, it's
      still in version control / the original upload.
============================================================ */