/* ==========================================================================
   O.P. Rawat Ayurvedic Clinic — Stylesheet
   Tokens, layout, and components for a premium Ayurvedic wellness site.
   ========================================================================== */

:root{
  /* --- Color tokens (matched to the Gangajali Ayurved logo: navy + royal blue + leaf green) --- */
  --green-deep:   #1B5FA8;   /* royal blue — primary brand color */
  --green-deeper: #123F73;   /* deeper blue */
  --green-ink:    #10233F;   /* navy ink — text & dark sections */
  --gold:         #4FAE30;   /* leaf green — accent */
  --gold-light:   #7ECB57;   /* light leaf green */
  --saffron:      #2E8FCF;   /* sky blue — secondary highlight */
  --cream:        #F5F8FB;   /* cool off-white, matches logo background */
  --beige:        #E8EFF6;   /* soft blue-grey */
  --white:        #FFFFFF;
  --line:         rgba(16,35,63,0.12);

  /* --- Type tokens --- */
  --font-display: 'Fraunces', 'Noto Sans Devanagari', 'Georgia', serif;
  --font-body:    'Manrope', 'Noto Sans Devanagari', -apple-system, sans-serif;

  /* --- Rhythm --- */
  --section-pad: clamp(4.5rem, 8vw, 8rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 60px -25px rgba(16,35,63,0.35);
  --shadow-card: 0 12px 30px -14px rgba(16,35,63,0.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset --- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--green-ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--green-ink);
  margin: 0 0 .5em;
  line-height: 1.12;
  font-weight: 600;
}
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; }

:focus-visible{
  outline: 2.5px solid var(--saffron);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1.5px;
  background: var(--gold);
  display:inline-block;
}

.section-head{
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-top:.4em;
}
.section-head p{
  color: rgba(16,35,63,0.68);
  font-size: 1.05rem;
  max-width: 52ch;
}
.section-head.center p{ margin-inline:auto; }

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding: .95em 1.9em;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,0.35);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform .55s var(--ease);
  z-index:-1;
}
.btn:hover::after{ transform: translateX(120%) skewX(-12deg); }
.btn:hover{ transform: translateY(-2px); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--green-ink);
  box-shadow: 0 14px 30px -12px rgba(79,174,48,0.6);
}
.btn-gold:hover{ box-shadow: 0 18px 34px -10px rgba(79,174,48,0.75); }
.btn-outline{
  background: transparent;
  border-color: rgba(245,248,251,0.55);
  color: var(--cream);
}
.btn-outline:hover{ background: rgba(245,248,251,0.12); border-color: var(--cream); }
.btn-outline-dark{
  background: transparent;
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.btn-outline-dark:hover{ background: var(--green-deep); color: var(--white); }
.btn-block{ width:100%; }
.btn-sm{ padding:.7em 1.4em; font-size:.85rem; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 999;
  padding: 1.35rem 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.navbar.scrolled{
  padding: .8rem 0;
  background: rgba(245,248,251,0.9);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px -18px rgba(16,35,63,0.35);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: var(--white); flex: none;
  box-shadow: 0 6px 16px -6px rgba(16,35,63,0.5);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.brand-text{ line-height:1.15; }
.brand-text strong{
  display:block; font-family: var(--font-display); font-size: 1.08rem; letter-spacing:.01em;
  color: var(--navtext, var(--cream));
}
.brand-text span{
  display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--navsub, rgba(245,248,251,0.75));
}
.navbar:not(.scrolled) { --navtext: var(--cream); --navsub: rgba(245,248,251,0.75); }
.navbar.scrolled { --navtext: var(--green-ink); --navsub: rgba(16,35,63,0.6); }

.nav-links{ display:flex; align-items:center; gap: clamp(1.1rem, 2vw, 2rem); }
.nav-links a{
  font-size: .92rem; font-weight:600; letter-spacing:.01em;
  color: var(--navtext, var(--cream));
  position: relative; padding: .3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--gold); transition: right .35s var(--ease);
}
.nav-links a:hover::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.nav-toggle{
  display:none; width: 44px; height:44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,0.15);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background: var(--navtext, var(--cream)); border-radius:2px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: 6rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--green-ink);
}
.hero-bg{
  position:absolute; inset:0; z-index:-3;
  background-image: url("https://images.unsplash.com/photo-1600334129128-685c5582fd35?q=80&w=1800&auto=format&fit=crop");
  background-size: cover; background-position: center 30%;
  will-change: transform;
}
.hero-bg::after{ content:none; }
.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(16,35,63,0.72) 0%, rgba(16,35,63,0.55) 38%, rgba(16,35,63,0.88) 100%),
    linear-gradient(100deg, rgba(10,25,48,0.85) 0%, rgba(10,25,48,0.25) 55%, rgba(10,25,48,0.7) 100%);
}
.leaf-field{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.leaf{
  position:absolute; opacity:.55; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25));
  animation: leafFloat linear infinite;
}
@keyframes leafFloat{
  0%{ transform: translateY(110vh) translateX(0) rotate(0deg); }
  100%{ transform: translateY(-15vh) translateX(40px) rotate(340deg); }
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items:center;
  width:100%;
}
.hero-eyebrow{
  color: var(--gold-light); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; display:flex; align-items:center; gap:.7em; margin-bottom:1.4rem;
}
.hero-eyebrow::before{ content:""; width:34px; height:1.5px; background: var(--gold-light); }
.hero h1{
  color: var(--cream);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  letter-spacing: -.01em;
  max-width: 14ch;
}
.hero h1 em{
  font-style: italic; color: var(--gold-light); font-weight:500;
}
.hero-sub{
  color: rgba(245,248,251,0.82);
  font-size: 1.12rem; max-width: 46ch; margin-bottom: 2.1rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: 1rem; margin-bottom: 2.6rem; }
.hero-meta{ display:flex; gap: clamp(1.6rem, 3vw, 2.6rem); flex-wrap:wrap; }
.hero-meta div strong{
  display:block; font-family: var(--font-display); font-size: 1.7rem; color: var(--cream);
}
.hero-meta div span{
  display:block; font-size: .74rem; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(245,248,251,0.6); margin-top:.2rem;
}

@keyframes cardFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-16px) rotate(.4deg); }
}
.hero-availability-badge{
  position:absolute; top:-18px; right:26px;
  background: var(--green-deep); color: var(--cream);
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  padding:.55em 1em; border-radius:999px; box-shadow: 0 10px 20px -8px rgba(27,95,168,0.6);
  z-index: 2;
}
.hero-form-card{
  position: relative;
  background: rgba(245,248,251,0.95);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.9rem 1.7rem;
  box-shadow: var(--shadow-soft);
  animation: cardFloat 6.5s ease-in-out infinite;
}
.hero-form-badge{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.4em 1em; border-radius:999px;
  background: rgba(27,95,168,0.1); color: var(--green-deep);
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.9rem;
}
.hero-form-badge i{ color: var(--gold); }
.hero-form-card h3{ font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom:.3rem; }
.hero-form-card .hero-form-sub{ font-size:.87rem; color: rgba(16,35,63,0.62); margin-bottom:1.4rem; }
.hero-form-card .field{ margin-bottom: .85rem; }
.hero-form-card .field label{ font-size:.7rem; }
.hero-form-card .field input, .hero-form-card .field select{ padding:.75em .95em; font-size:.92rem; }
.hero-form-card .form-note{ margin-top: .9rem; }
.hero-form-success{ display:none; text-align:center; padding: 1.6rem .5rem .4rem; }
.hero-form-success.show{ display:block; }
.hero-form-success i{ font-size:2.3rem; color: var(--green-deep); margin-bottom:.7rem; }
.hero-form-success h3{ margin-bottom:.3rem; }
.hero-form-success p{ color: rgba(16,35,63,0.6); font-size:.9rem; }

.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: rgba(245,248,251,0.7); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .stem{
  width:1px; height:38px; background: linear-gradient(to bottom, var(--gold-light), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue .stem::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background: var(--gold-light); animation: scrollDrip 1.8s ease-in-out infinite;
}
@keyframes scrollDrip{ 0%{ top:-40%; } 100%{ top:100%; } }

/* ==========================================================================
   Leaf-vein divider (signature motif)
   ========================================================================== */
.leaf-divider{ display:block; width:100%; height: 46px; }
.leaf-divider path{ vector-effect: non-scaling-stroke; }

/* ==========================================================================
   About
   ========================================================================== */
.about{ padding: var(--section-pad) 0; background: var(--cream); position:relative; }
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem,5vw,5rem); align-items:center; }
.about-media{ position:relative; }
.about-media .frame-main{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft);
  aspect-ratio: 4/5; object-fit:cover;
}
.about-media .frame-float{
  position:absolute; width: 46%; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: 0 20px 40px -16px rgba(16,35,63,0.4); border: 6px solid var(--cream);
  bottom:-8%; right:-10%; aspect-ratio: 1/1; object-fit:cover;
}
.about-media .exp-badge{
  position:absolute; top: -6%; left: -8%;
  background: var(--green-deep); color: var(--cream);
  width: 128px; height:128px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow: var(--shadow-card);
  border: 3px solid var(--gold);
}
.about-media .exp-badge strong{ font-family: var(--font-display); font-size:2.1rem; line-height:1; }
.about-media .exp-badge span{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; margin-top:.3rem; max-width:80px; }

.about-copy p{ color: rgba(16,35,63,0.72); font-size: 1.03rem; }
.about-list{ display:grid; gap: .85rem; margin: 1.6rem 0 2.2rem; }
.about-list li{ display:flex; align-items:flex-start; gap:.8rem; font-size:.97rem; }
.about-list li i{ color: var(--green-deep); margin-top:.25em; }

.counters{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.2rem; margin-top: 3rem; }
.counter-card{
  text-align:center; padding: 1.6rem 1rem; background: var(--white);
  border-radius: var(--radius-md); border:1px solid var(--line);
}
.counter-card strong{
  display:block; font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.4rem); color: var(--green-deep);
}
.counter-card strong sup{ font-size:.55em; color: var(--saffron); }
.counter-card span{ font-size:.78rem; letter-spacing:.04em; color: rgba(16,35,63,0.62); }

/* ==========================================================================
   Treatments
   ========================================================================== */
.treatments{ padding: var(--section-pad) 0; background: var(--beige); position:relative; }
.treatments-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.treat-card{
  position:relative;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 2rem 1.6rem 1.8rem;
  overflow:hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.treat-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(160deg, var(--green-deep), var(--green-deeper));
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.treat-card > *{ position:relative; z-index:1; }
.treat-card .icon{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--green-ink); font-size:1.4rem; margin-bottom:1.2rem;
  transition: transform .5s var(--ease);
}
.treat-card h3{ font-size:1.18rem; margin-bottom:.5rem; transition: color .4s var(--ease); }
.treat-card p{ font-size:.9rem; color: rgba(16,35,63,0.66); transition: color .4s var(--ease); margin-bottom:1.2rem; }
.treat-card .learn{
  display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:700;
  color: var(--green-deep); transition: color .4s var(--ease), gap .3s var(--ease);
}
.treat-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-card); }
.treat-card:hover::before{ transform: translateY(0); }
.treat-card:hover .icon{ transform: rotate(-8deg) scale(1.05); }
.treat-card:hover h3, .treat-card:hover p, .treat-card:hover .learn{ color: var(--cream); }
.treat-card:hover p{ color: rgba(245,248,251,0.78); }
.treat-card:hover .learn{ gap:.8em; }

/* ==========================================================================
   Why choose us
   ========================================================================== */
.why{ padding: var(--section-pad) 0; background: var(--green-ink); color: var(--cream); position:relative; overflow:hidden; }
.why::before{
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(79,174,48,0.15), transparent 70%);
  top:-200px; right:-150px;
}
.why .eyebrow{ color: var(--gold-light); }
.why .eyebrow::before{ background: var(--gold-light); }
.why .section-head h2{ color: var(--cream); }
.why .section-head p{ color: rgba(245,248,251,0.68); }
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; position:relative; z-index:1; }
.why-card{
  padding: 2.2rem 1.8rem; border-radius: var(--radius-md);
  border: 1px solid rgba(245,248,251,0.14);
  background: rgba(245,248,251,0.04);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.why-card:hover{ background: rgba(245,248,251,0.08); border-color: rgba(79,174,48,0.5); transform: translateY(-6px); }
.why-card .num{ font-family: var(--font-display); font-size:.85rem; color: var(--gold-light); letter-spacing:.1em; }
.why-card i{
  display:block; font-size:1.5rem; color: var(--gold-light); margin: 1rem 0 1.1rem;
}
.why-card h3{ color: var(--cream); font-size:1.15rem; }
.why-card p{ color: rgba(245,248,251,0.65); font-size:.92rem; margin:0; }

/* ==========================================================================
   Panchakarma Wheel (signature)
   ========================================================================== */
.wheel-section{ padding: var(--section-pad) 0; background: var(--cream); overflow:hidden; }
.wheel-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
.wheel-stage{ position:relative; aspect-ratio:1/1; max-width:560px; margin:0 auto; width:100%; }
.wheel-svg{ width:100%; height:100%; transform-origin:center; animation: wheelSpin 90s linear infinite; }
@keyframes wheelSpin{ to{ transform: rotate(360deg); } }
.wheel-center{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none;
}
.wheel-center-inner{
  width: 34%; aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 65%, #2E7A1C);
  display:grid; place-items:center; box-shadow: 0 20px 40px -14px rgba(79,174,48,0.65);
}
.wheel-center-inner span{ font-family: var(--font-display); font-size: .95rem; color: var(--green-ink); font-weight:700; line-height:1.2; padding: 0 8%; }
.wheel-node{
  position:absolute; width: 118px; margin-left:-59px; margin-top:-46px;
  text-align:center; cursor:pointer;
}
.wheel-node .dot{
  width:16px; height:16px; border-radius:50%; margin:0 auto .6rem;
  background: var(--green-deep); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--green-deep);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.wheel-node strong{ display:block; font-size:.86rem; font-family: var(--font-display); }
.wheel-node span{ display:block; font-size:.7rem; color: rgba(16,35,63,0.55); }
.wheel-node:hover .dot, .wheel-node.active .dot{ background: var(--saffron); transform: scale(1.3); }
.wheel-detail{
  background: var(--white); border-radius: var(--radius-lg); padding: 2.2rem 2.4rem;
  border: 1px solid var(--line); box-shadow: var(--shadow-card); min-height: 280px;
}
.wheel-detail .stage-index{
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color: var(--saffron); font-weight:700;
}
.wheel-detail h3{ font-size:1.7rem; margin: .5rem 0 .8rem; }
.wheel-detail p{ color: rgba(16,35,63,0.68); }
.wheel-dots{ display:flex; gap:.5rem; margin-top:1.6rem; }
.wheel-dots button{
  width:34px; height:6px; border-radius:4px; border:none; background: var(--beige); transition: background .3s;
}
.wheel-dots button.active{ background: var(--green-deep); }

/* ==========================================================================
   Doctor profile
   ========================================================================== */
.doctor{ padding: var(--section-pad) 0; background: var(--beige); }

/* Two-doctor grid */
.doctors-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.5rem); }
.doctor-card{
  background: var(--white); border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doctor-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.doctor-card-media{ position:relative; width:100%; aspect-ratio: 5/4; overflow:hidden; }
.doctor-card-media img{ width:100%; height:100%; object-fit:cover; object-position: top center; display:block; transition: transform .6s var(--ease); }
.doctor-card:hover .doctor-card-media img{ transform: scale(1.04); }
.doctor-card-media .role-chip{
  position:absolute; left:1rem; bottom:1rem; background: rgba(16,35,63,0.82); backdrop-filter: blur(4px);
  color: var(--gold-light); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.5em .9em; border-radius:999px;
}
.doctor-card-body{ padding: clamp(1.5rem, 2.5vw, 2.2rem); display:flex; flex-direction:column; }
.doctor-tag{ display:inline-block; padding:.4em 1em; border-radius:999px; background: rgba(27,95,168,0.1); color: var(--green-deep); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.9rem; width:max-content; }
.doctor-card-body h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom:.2rem; }
.doctor-role{ color: var(--saffron); font-weight:700; font-size:.9rem; margin-bottom:1rem; }
.doctor-copy p{ color: rgba(16,35,63,0.68); font-size:.94rem; }
.doctor-facts{ display:grid; grid-template-columns: 1fr; gap: .6rem; margin: 1.2rem 0 0; }
.doctor-facts div{ border-top:1px solid var(--line); padding-top:.6rem; display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.doctor-facts strong{ font-family: var(--font-display); font-size:.92rem; text-align:right; }
.doctor-facts span{ font-size:.78rem; color: rgba(16,35,63,0.55); }
.doctor-quote{
  margin-top:1.2rem; padding-top:1.1rem; border-top: 1px dashed var(--line);
  font-family: var(--font-display); font-style:italic; font-size:.98rem; color: var(--green-deep);
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{ padding: var(--section-pad) 0; background: var(--cream); }
.gallery-grid{
  columns: 3 220px; column-gap: 1.2rem;
}
.gallery-item{
  break-inside: avoid; margin-bottom: 1.2rem; border-radius: var(--radius-md); overflow:hidden;
  position:relative; cursor: zoom-in;
}
.gallery-item img{ width:100%; display:block; transition: transform .6s var(--ease); }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item .cap{
  position:absolute; inset:auto 0 0 0; padding: 1.6rem 1.2rem .9rem;
  background: linear-gradient(to top, rgba(16,35,63,0.85), transparent);
  color: var(--cream); font-size:.85rem; font-weight:700; letter-spacing:.03em;
  transform: translateY(10px); opacity:0; transition: all .4s var(--ease);
}
.gallery-item:hover .cap{ transform: translateY(0); opacity:1; }

.lightbox{
  position: fixed; inset:0; z-index: 2000; display:none; align-items:center; justify-content:center;
  background: rgba(10,20,14,0.92); backdrop-filter: blur(6px); padding: 2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width: min(900px, 90vw); max-height: 85vh; border-radius: var(--radius-md); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lightbox-close, .lightbox-nav{
  position: absolute; background: rgba(245,248,251,0.12); border: 1px solid rgba(245,248,251,0.3);
  color: var(--cream); width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  transition: background .3s;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(245,248,251,0.25); }
.lightbox-close{ top: 2rem; right: 2rem; }
.lightbox-nav.prev{ left: 2rem; top:50%; transform: translateY(-50%); }
.lightbox-nav.next{ right: 2rem; top:50%; transform: translateY(-50%); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ padding: var(--section-pad) 0; background: var(--green-deep); position:relative; overflow:hidden; }
.testimonials::before{
  content:"“"; position:absolute; font-family: var(--font-display); font-size: 34rem; line-height:1;
  color: rgba(245,248,251,0.05); top:-6rem; left: -2rem;
}
.testimonials .eyebrow{ color: var(--gold-light); }
.testimonials .eyebrow::before{ background: var(--gold-light); }
.testimonials .section-head h2{ color: var(--cream); }
.testimonials .section-head p{ color: rgba(245,248,251,0.72); }
.t-track-wrap{ position:relative; z-index:1; overflow:hidden; }
.t-track{ display:flex; transition: transform .6s var(--ease); }
.t-card{ flex: 0 0 100%; padding: 0 1rem; }
@media(min-width:860px){ .t-card{ flex-basis: 50%; } }
.t-card-inner{
  background: rgba(245,248,251,0.08); border: 1px solid rgba(245,248,251,0.16);
  border-radius: var(--radius-lg); padding: 2.2rem; height:100%;
  backdrop-filter: blur(6px);
}
.t-stars{ color: var(--gold-light); font-size:.9rem; letter-spacing:.2em; margin-bottom:1rem; }
.t-card-inner p{ color: rgba(245,248,251,0.88); font-family: var(--font-display); font-size:1.15rem; font-style:italic; }
.t-person{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.t-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.t-person strong{ color: var(--cream); display:block; font-size:.92rem; }
.t-person span{ color: rgba(245,248,251,0.6); font-size:.78rem; }
.t-controls{ display:flex; justify-content:center; gap:1rem; margin-top: 2.2rem; position:relative; z-index:1; }
.t-controls button{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,248,251,0.3);
  background: transparent; color: var(--cream); display:grid; place-items:center; transition: background .3s;
}
.t-controls button:hover{ background: rgba(245,248,251,0.15); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding: var(--section-pad) 0; background: var(--cream); }
.faq-wrap{ max-width: 780px; margin: 0 auto; display:grid; gap: 1rem; }
.faq-item{ border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; background: var(--white); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.3rem 1.6rem; background:none; border:none; text-align:left;
  font-family: var(--font-display); font-size:1.05rem; color: var(--green-ink);
}
.faq-q .plus{
  width:30px; height:30px; border-radius:50%; background: var(--beige); flex:none;
  display:grid; place-items:center; position:relative; transition: background .3s, transform .4s var(--ease);
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background: var(--green-deep); transition: transform .3s var(--ease);
}
.faq-q .plus::before{ width:12px; height:2px; }
.faq-q .plus::after{ width:2px; height:12px; }
.faq-item.open .faq-q .plus{ background: var(--green-deep); transform: rotate(180deg); }
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{ background: var(--cream); }
.faq-item.open .faq-q .plus::after{ transform: scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding: 0 1.6rem 1.5rem; color: rgba(16,35,63,0.68); font-size:.95rem; max-width: 62ch; }

/* ==========================================================================
   Appointment
   ========================================================================== */
.appointment{ padding: var(--section-pad) 0; background: var(--green-ink); position:relative; overflow:hidden; }
.appointment::before{
  content:""; position:absolute; inset:0;
  background: url("https://images.unsplash.com/photo-1611072965169-e4d6b8b8b8b8?q=80&w=1600&auto=format&fit=crop") center/cover;
  opacity: .12; mix-blend-mode: luminosity;
}
.appt-wrap{ position:relative; z-index:1; display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
.appt-info .eyebrow{ color: var(--gold-light); }
.appt-info .eyebrow::before{ background: var(--gold-light); }
.appt-info h2{ color: var(--cream); font-size: clamp(2rem,3.6vw,2.8rem); }
.appt-info p{ color: rgba(245,248,251,0.72); }
.appt-points{ display:grid; gap:1rem; margin-top:1.6rem; }
.appt-points li{ display:flex; gap:.8rem; color: rgba(245,248,251,0.85); font-size:.95rem; align-items:flex-start; }
.appt-points i{ color: var(--gold-light); margin-top:.2em; }
.appt-form{
  background: var(--cream); border-radius: var(--radius-lg); padding: clamp(1.8rem,3vw,2.6rem);
  box-shadow: var(--shadow-soft);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field{ margin-bottom: 1.1rem; }
.field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: rgba(16,35,63,0.6); margin-bottom:.4rem; }
.field input, .field select, .field textarea{
  width:100%; padding: .85em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: var(--white); font-size: .95rem; color: var(--green-ink); transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--green-deep); box-shadow: 0 0 0 4px rgba(27,95,168,0.12); outline:none;
}
.field textarea{ resize: vertical; min-height: 90px; }
.form-note{ font-size:.78rem; color: rgba(16,35,63,0.5); margin-top:.8rem; text-align:center; }
.form-success{
  display:none; text-align:center; padding: 2rem 1rem;
}
.form-success.show{ display:block; }
.form-success i{ font-size:2.4rem; color: var(--green-deep); margin-bottom:.8rem; }
.form-success h3{ margin-bottom:.4rem; }
.form-success p{ color: rgba(16,35,63,0.6); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding: var(--section-pad) 0; background: var(--beige); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-card{
  background: var(--white); border-radius: var(--radius-lg); padding: 2.2rem;
  border: 1px solid var(--line);
}
.contact-list{ display:grid; gap: 1.4rem; margin-bottom: 1.8rem; }
.contact-list li{ display:flex; gap: 1rem; align-items:flex-start; }
.contact-list .ic{
  width:44px; height:44px; border-radius: 12px; background: rgba(27,95,168,0.1); color: var(--green-deep);
  display:grid; place-items:center; flex:none;
}
.contact-list strong{ display:block; font-family: var(--font-display); font-size:1rem; }
.contact-list span{ color: rgba(16,35,63,0.62); font-size:.9rem; }
.contact-socials{ display:flex; gap:.7rem; }
.contact-socials a{
  width:42px; height:42px; border-radius:50%; border: 1px solid var(--line); display:grid; place-items:center;
  color: var(--green-deep); transition: background .3s, color .3s, transform .3s;
}
.contact-socials a:hover{ background: var(--green-deep); color: var(--cream); transform: translateY(-3px); }
.map-card{ border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--line); position:relative; min-height: 340px; }
.map-placeholder{
  position:absolute; inset:0; background:
    linear-gradient(rgba(27,95,168,0.88), rgba(27,95,168,0.88)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; text-align:center; padding:2rem;
}
.map-placeholder i{ font-size:2.4rem; color: var(--gold-light); }
.map-placeholder strong{ color: var(--cream); font-family: var(--font-display); font-size:1.2rem; }
.map-placeholder span{ color: rgba(245,248,251,0.7); font-size:.9rem; max-width:32ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background: var(--green-ink); color: rgba(245,248,251,0.75); padding: 4.5rem 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(245,248,251,0.1); }
.footer-brand p{ font-size:.92rem; margin: 1rem 0 1.3rem; max-width: 32ch; }
.footer-socials{ display:flex; gap:.7rem; }
.footer-socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(245,248,251,0.2); display:grid; place-items:center;
  transition: background .3s, transform .3s;
}
.footer-socials a:hover{ background: var(--gold); color: var(--green-ink); transform: translateY(-3px); }
.footer h4{ color: var(--cream); font-size: 1rem; margin-bottom: 1.2rem; }
.footer ul{ display:grid; gap:.7rem; }
.footer ul a{ font-size:.9rem; transition: color .3s, padding-left .3s; }
.footer ul a:hover{ color: var(--gold-light); padding-left: 4px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 1.6rem 0; font-size: .8rem; flex-wrap:wrap; gap:1rem; }
.footer-bottom .legal{ display:flex; gap:1.5rem; }

/* ==========================================================================
   Floating utility buttons
   ========================================================================== */
.fab-stack{ position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 800; display:flex; flex-direction:column; gap: .8rem; align-items:flex-end; }
.fab{
  width: 54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem;
  box-shadow: var(--shadow-card); border:none; transition: transform .3s var(--ease);
}
.fab:hover{ transform: translateY(-4px) scale(1.05); }
.fab-whatsapp{ background: #25D366; color: #fff; }
.fab-call{ background: var(--gold); color: var(--green-ink); }
.fab-top{ background: var(--green-deep); color: var(--cream); opacity:0; pointer-events:none; transform: translateY(10px); }
.fab-top.show{ opacity:1; pointer-events:auto; transform:none; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="zoom"]{ transform: scale(.92); }
[data-reveal="zoom"].in{ transform: scale(1); }
[data-reveal-group] [data-reveal]{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .treatments-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .counters{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .about-grid, .wheel-wrap, .appt-wrap, .contact-grid{ grid-template-columns: 1fr; }
  .doctors-grid{ grid-template-columns: 1fr; }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-form-card{ max-width: 460px; }
  .about-media .frame-float{ display:none; }
}
@media (max-width: 760px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .treatments-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .counters{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ columns: 2 160px; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .wheel-node{ position:static !important; margin:0; display:inline-block; width:auto; padding:.4rem .7rem; }
  .wheel-svg{ display:none; }
  .wheel-stage{ aspect-ratio:auto; }
  .wheel-nodes-mobile-row{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
}

/* Mobile nav drawer */
.mobile-drawer{
  position: fixed; inset:0; z-index: 1500; background: var(--green-ink);
  display:flex; flex-direction:column; padding: 2rem;
  transform: translateX(100%); transition: transform .45s var(--ease);
}
.mobile-drawer.open{ transform: translateX(0); }
.mobile-drawer .close-drawer{
  align-self:flex-end; width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,248,251,0.3);
  color: var(--cream); background:none; display:grid; place-items:center; margin-bottom: 2.5rem;
}
.mobile-drawer a{
  color: var(--cream); font-family: var(--font-display); font-size: 1.6rem; padding: .8rem 0;
  border-bottom: 1px solid rgba(245,248,251,0.1);
}
.mobile-drawer .btn{ margin-top: 2rem; }