/* HoLEPIndia.com — unified visual polish
   Purpose: consistent, calm, premium medical presentation across the static site.
   No external fonts or JS added, to preserve speed. */

:root{
  --navy:#0a3450;
  --teal:#0e7280;
  --teal-dark:#095965;
  --mint:#e8f5f1;
  --cream:#f8f7f2;
  --ink:#17313f;
  --muted:#5b707c;
  --line:#d9e4e8;
  --gold:#d5aa4e;
  --white:#fff;
  --page:#fdfefe;
  --shadow:0 14px 38px rgba(10,52,80,.09);
  --shadow-soft:0 7px 24px rgba(10,52,80,.065);
  --radius:22px;
}

html{scroll-behavior:smooth;background:var(--page)}
body{
  color:var(--ink)!important;
  background:var(--page)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
main{overflow:hidden}
section[id]{scroll-margin-top:112px}
::selection{background:#d8efea;color:var(--navy)}

/* Width and rhythm */
.wrap{width:min(1120px,calc(100% - 40px))!important}
section{position:relative}
p{max-width:76ch}
li{max-width:78ch}

/* Top contact strip */
.top{
  background:linear-gradient(90deg,#082c45,var(--navy))!important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.top .wrap{min-height:40px!important}
.top span{letter-spacing:.01em}
.top a{color:#fff!important;text-decoration:none!important}

/* Header and navigation */
header{
  position:sticky!important;
  top:0;
  z-index:40!important;
  background:rgba(255,255,255,.965)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(217,228,232,.9)!important;
  box-shadow:0 4px 18px rgba(10,52,80,.035);
}
nav{min-height:74px!important}
.brand{
  color:var(--navy)!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  font-size:1.34rem!important;
  white-space:nowrap;
}
.brand span{color:var(--teal)!important}
.links,.navlinks{gap:16px!important}
.links a:not(.btn),.navlinks a:not(.btn){
  color:#23414f!important;
  font-weight:720!important;
  transition:color .18s ease,background .18s ease;
}
.links a:not(.btn):hover,.navlinks a:not(.btn):hover{color:var(--teal)!important}

/* Buttons */
.btn,.floating,.whatsapp-float{
  border-radius:999px!important;
  font-weight:850!important;
  letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.btn{
  background:var(--navy)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(10,52,80,.12);
  border:1px solid transparent;
}
.btn:hover,.floating:hover,.whatsapp-float:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(10,52,80,.14);
}
.btn.gold{background:var(--gold)!important;color:#17313f!important;box-shadow:0 6px 16px rgba(151,108,21,.14)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(14,114,128,.28);outline-offset:3px}

/* Hero sections */
.hero{
  background:
    radial-gradient(circle at 88% 10%,rgba(213,170,78,.10),transparent 24%),
    linear-gradient(120deg,#eaf7f3 0,#fff 54%,#edf4f8 100%)!important;
  border-bottom:1px solid rgba(217,228,232,.72);
}
.eyebrow{
  color:var(--teal)!important;
  letter-spacing:.145em!important;
  font-weight:900!important;
}
h1,h2,h3{color:var(--navy)!important}
h1,h2{letter-spacing:-.04em!important}
h1{max-width:900px}
.lead{color:#46606d!important;line-height:1.72!important}
.byline{color:#647985!important}

/* Surfaces, cards and panels */
.soft{background:var(--cream)!important}
.card,.step-card,.stat,.approach,.size{
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-soft)!important;
}
.card,.stat,.approach,.size{background:#fff!important}
.card,.approach,.step-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media(hover:hover){
  .card:hover,.approach:hover,.step-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)!important;border-color:#cbdce1!important}
}
.tag{
  background:#e8f5f1!important;
  color:var(--teal-dark)!important;
  border:1px solid #d5ebe6;
}
.muted,.fine{color:var(--muted)!important}

.note,.quote{
  background:#fff9e9!important;
  border-left:4px solid var(--gold)!important;
  border-radius:14px!important;
  box-shadow:0 6px 18px rgba(10,52,80,.035);
}
.answer-first{font-size:1.03rem}

.panel,.cta,.doctor{
  background:linear-gradient(135deg,#0a3450 0,#0b3f5f 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 18px 44px rgba(7,35,54,.16)!important;
}
.panel,.cta{border-radius:26px!important}
.panel h2,.cta h2,.doctor h2{color:#fff!important}
.panel p,.cta p{color:#e4f0f2}

/* Doctor presentation */
.portrait,.doctor-photo{
  border-radius:26px!important;
  border:1px solid rgba(10,52,80,.10)!important;
  box-shadow:0 18px 40px rgba(10,52,80,.14)!important;
  background:#eaf1f3!important;
}
.credentials,.credential{color:var(--navy)!important}
.doctor .credential{color:#a8ded7!important}
.stats{gap:16px!important}
.stat strong{color:var(--navy)!important}

/* Tables and comparisons */
.compare{border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:var(--shadow-soft);background:#fff}
table{background:#fff}
th{background:var(--navy)!important;color:#fff!important}
th,td{padding:15px 16px!important}
tbody tr:nth-child(even) td{background:#fbfdfd}
.best{background:#eef8f5!important}

/* Article reading experience */
.article{padding-top:58px!important;padding-bottom:68px!important}
.article>.wrap>p,.article>.wrap>ul,.article>.wrap>ol{font-size:1.015rem}
.article h2{margin-top:44px!important;margin-bottom:14px!important}
.article h3{line-height:1.25}
.article a:not(.btn){text-underline-offset:3px;text-decoration-thickness:1px}
.seo-related{
  background:#fbfdfd!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow-soft);
}
.references{color:#405b68}
.references ol{padding-left:1.25rem}
.references li{margin:0 0 12px}

/* Homepage-specific refinement */
.hero-card img{border-radius:30px!important}
.trust div{border-left-color:var(--gold)!important}
.visual{border:1px solid #d0e4e2;box-shadow:var(--shadow)!important}
.timeline .time{border-top-color:var(--teal)!important}
.faq details{padding:19px 0!important}
.faq summary{font-size:1.03rem}
.doctor{border-radius:30px!important}

/* Footer */
footer{
  background:linear-gradient(135deg,#061e2f,#09293d)!important;
  border-top:1px solid rgba(255,255,255,.06);
}
footer a{color:#eef8f8!important;text-underline-offset:3px}

/* Floating contact buttons */
.floating{background:var(--gold)!important;color:#17313f!important;box-shadow:0 10px 25px rgba(7,35,54,.16)!important}
.whatsapp-float{box-shadow:0 10px 25px rgba(7,35,54,.18)!important}

/* Mobile */
@media(max-width:900px){
  .wrap{width:min(100% - 30px,1120px)!important}
  section{padding-top:60px!important;padding-bottom:60px!important}
  .hero{padding-top:52px!important;padding-bottom:52px!important}
  .hero-grid{gap:30px!important}
  .doctor{padding:28px!important}
  .links{gap:10px!important}
}

@media(max-width:850px){
  .navlinks{display:flex!important;margin-left:auto!important;gap:8px!important}
  .navlinks a:not(.btn){display:none!important}
  .navlinks .btn{display:inline-flex!important;padding:10px 15px!important}
}

@media(max-width:600px){
  body{font-size:15.5px!important;line-height:1.68!important}
  .wrap{width:min(100% - 26px,1120px)!important}
  .top .wrap{justify-content:center!important;min-height:38px!important}
  .top span{display:none!important}
  nav{min-height:68px!important}
  .brand{font-size:1.23rem!important}
  h1{font-size:clamp(2.25rem,11vw,3.25rem)!important;line-height:1.02!important}
  h2{font-size:clamp(1.8rem,8vw,2.4rem)!important}
  .hero{padding-top:42px!important;padding-bottom:44px!important}
  section{padding-top:52px!important;padding-bottom:52px!important}
  .card,.stat{padding:20px!important}
  .panel,.cta{padding:24px!important;border-radius:22px!important}
  .portrait{max-width:270px!important;margin-inline:auto}
  .doctor-photo{width:min(250px,100%)!important}
  .floating{left:auto!important;right:14px!important;bottom:70px!important;width:auto!important;max-width:calc(100vw - 28px)!important;padding:12px 16px!important}
  .whatsapp-float{right:14px!important;bottom:14px!important;padding:12px 16px!important}
  .compare{margin-inline:-2px}
  th,td{padding:13px 14px!important}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}