/* Layout: bright, airy clinic — soft sky-to-blush pastel hero, white cards on a pale mint page,
   one coral accent for calls to action. Single light theme by design (requested). */
:root{
  --bg:#f7fbfa; --surface:#ffffff; --ink:#1d3140; --muted:#56697a; --line:#dde9ec;
  --vein:#2f7a9a; --artery:#e0675f; --artery-ink:#ffffff;
  --band:#e8f4fb; --band2:#fdeef0; --band-fg:#1d3140; --band-muted:#4f6577;
  --chip:#eaf5f1; --lav:#efeafb; --peach:#fff1e6;
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
html{scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6}
a{color:var(--vein)}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--artery); outline-offset:2px}
.wrap{max-width:1120px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.15; text-wrap:balance; margin:0}
h2{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.5rem)}
h3{font-size:1.3rem}
p{margin:0}
.eyebrow{font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--vein)}
.lede{color:var(--muted); max-width:62ch}
section{padding-block:var(--s8)}
.sec-head{display:grid; gap:var(--s3); margin-bottom:var(--s6)}

/* Header */
header.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding-block:var(--s3)}
.brand{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1.2}
.brand b{font-family:var(--display); font-size:1.2rem; font-weight:600}
.brand span{font-size:.78rem; color:var(--muted)}
nav.links{display:flex; gap:var(--s5); align-items:center}
nav.links a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem}
nav.links a:hover{color:var(--vein)}
nav.links a.btn{color:var(--artery-ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); padding:.7rem 1.15rem; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:var(--body)}
.btn-primary{background:var(--artery); color:var(--artery-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:currentColor; color:inherit; background:transparent}
.menu-btn{display:none; background:none; border:1.5px solid var(--line); color:var(--ink); border-radius:8px; padding:.45rem .7rem; font:inherit; font-size:.9rem}
@media (max-width: 860px){
  nav.links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:var(--s2)}
  nav.links.open{display:flex}
  nav.links a{padding-block:var(--s3); width:100%}
  nav.links .btn{margin-block:var(--s2); width:auto}
  .menu-btn{display:inline-block}
}

/* Hero */
.hero{background:linear-gradient(120deg, var(--band) 0%, var(--lav) 55%, var(--band2) 100%); color:var(--band-fg); padding-block:var(--s7) var(--s8); position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s7); align-items:center}
.hero h1{font-size:clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); letter-spacing:-.01em}
.hero h1 em{font-style:italic; color:var(--artery)}
.hero .eyebrow{color:var(--vein)}
.hero-copy{display:grid; gap:var(--s5); min-width:0}
.hero-copy p{color:var(--band-muted); max-width:52ch; font-size:1.1rem}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s3)}
.creds{display:flex; flex-wrap:wrap; gap:var(--s2); font-family:var(--mono); font-size:.78rem; letter-spacing:.06em}
.creds span{background:var(--surface); border:1px solid var(--line); padding:.25rem .6rem; border-radius:4px}
.film{position:relative; aspect-ratio:4/5; max-width:100%; border-radius:18px; background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--line)}
.film svg{position:absolute; inset:0; width:100%; height:100%}
.film .tag{position:absolute; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--band-muted)}
.film .tl{top:10px; left:12px} .film .br{bottom:10px; right:12px; text-align:right}
.vessel{fill:none; stroke:var(--vein); stroke-linecap:round; opacity:.35}
.vessel.flow{stroke:var(--artery); stroke-dasharray:6 14; animation:flow 2.4s linear infinite; opacity:1}
@keyframes flow{to{stroke-dashoffset:-40}}
@media (max-width: 860px){ .hero .wrap{grid-template-columns:1fr} }

.hero-photo{position:relative; margin:0; aspect-ratio:4/5; max-width:420px; width:100%; justify-self:end; border-radius:24px; overflow:hidden; box-shadow:0 24px 60px -24px rgba(47,122,154,.45)}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hero-photo figcaption{position:absolute; left:12px; right:12px; bottom:12px; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(6px); border-radius:14px; padding:.6rem .9rem; font-family:var(--display); font-weight:600; font-size:1.05rem; display:grid; gap:2px}
.hero-photo figcaption span{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.08em; color:var(--vein)}
@media (max-width: 860px){ .hero-photo{justify-self:center; max-width:360px} }

/* Promise strip */
.facts{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s4); padding-block:var(--s6); border-bottom:1px solid var(--line)}
.fact{display:grid; gap:var(--s1)}
.fact b{font-family:var(--display); font-size:1.25rem; font-weight:600}
.fact span{color:var(--muted); font-size:.92rem}
@media (max-width: 860px){ .facts{grid-template-columns:1fr 1fr} }

/* About */
.about{display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s7); align-items:start}
.about > *{min-width:0}
.portrait{position:relative; aspect-ratio:4/5; max-width:100%; border-radius:18px; overflow:hidden; background:linear-gradient(160deg, var(--band), var(--band2)); display:grid; place-items:center; color:var(--muted); font-family:var(--mono); font-size:.8rem; text-align:center}
.portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top}
.portrait::after{content:""; position:absolute; inset:auto -20% -30% auto; width:70%; aspect-ratio:1; border-radius:50%; background:var(--peach); opacity:.6; z-index:0}
.portrait span{position:relative; z-index:1; padding:var(--s4)}
.about-copy{display:grid; gap:var(--s4)}
.about-copy p{max-width:65ch}
.quals{display:grid; gap:0; border-top:1px solid var(--line); margin-top:var(--s3)}
.quals div{display:grid; grid-template-columns:7.5rem 1fr; gap:var(--s4); padding-block:var(--s3); border-bottom:1px solid var(--line)}
.quals dt{font-family:var(--mono); font-size:.8rem; color:var(--vein); letter-spacing:.06em; padding-top:.15rem}
.quals dd{margin:0}
@media (max-width: 860px){ .about{grid-template-columns:1fr} .about .film{aspect-ratio:16/10} }

/* Treatments */
.alt{background:linear-gradient(180deg, var(--chip), var(--surface)); border-block:1px solid var(--line)}
.tx-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:var(--s4)}
.tx{display:grid; grid-template-rows:auto auto 1fr auto auto; gap:var(--s3); padding:var(--s5); border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.tx .for{font-size:.9rem; color:var(--muted)}
.tx p{font-size:.98rem}
.spec{display:flex; flex-wrap:wrap; gap:var(--s2); font-family:var(--mono); font-size:.72rem; letter-spacing:.04em}
.spec span{background:var(--chip); padding:.2rem .5rem; border-radius:3px; color:var(--ink)}
.tx .more{font-weight:600; font-size:.92rem; text-decoration:none}
.tx .more:hover{text-decoration:underline}
.h-card address{font-style:normal; font-size:.92rem; color:var(--ink); line-height:1.5}
.note{margin-top:var(--s5); font-size:.9rem; color:var(--muted); max-width:70ch}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s5); counter-reset:step}
.step{display:grid; gap:var(--s2); border-top:2px solid var(--vein); padding-top:var(--s4)}
.step::before{counter-increment:step; content:"Step " counter(step); font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vein)}
.step p{color:var(--muted); font-size:.96rem}
@media (max-width: 860px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .steps{grid-template-columns:1fr} }

/* Education */
.edu{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.edu > *{min-width:0}
details.article{border:1px solid var(--line); border-radius:6px; background:var(--surface)}
details.article summary{list-style:none; cursor:pointer; padding:var(--s5); display:grid; gap:var(--s2)}
details.article summary::-webkit-details-marker{display:none}
details.article summary .meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vein)}
details.article summary h3::after{content:" +"; color:var(--artery); font-family:var(--body)}
details.article[open] summary h3::after{content:" –"}
details.article summary p{color:var(--muted); font-size:.95rem}
.article-body{padding:0 var(--s5) var(--s5); display:grid; gap:var(--s3); font-size:.98rem}
.article-body ul{margin:0; padding-left:1.2rem; display:grid; gap:var(--s1)}
.redflag{border-left:3px solid var(--artery); padding:var(--s3) var(--s4); background:var(--chip); border-radius:0 4px 4px 0; font-size:.94rem}
@media (max-width: 860px){ .edu{grid-template-columns:1fr} }
.faq{margin-top:var(--s7); display:grid; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding-block:var(--s4); font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--artery); font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:var(--s4); color:var(--muted); max-width:70ch}

/* Hospitals & contact */
.hosp{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s4)}
.h-card{display:grid; gap:var(--s3); padding:var(--s5); border-radius:16px; background:var(--chip); align-content:start}
.h-card:nth-child(2){background:var(--band2)}
.h-card p{color:var(--muted); font-size:.95rem}
.h-card .area{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vein)}
.h-card a{font-size:.92rem; font-weight:600}
@media (max-width: 520px){ .hosp{grid-template-columns:1fr} }
.contact{display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s7); margin-top:var(--s7); align-items:start}
.contact > *{min-width:0}
.c-list{display:grid; gap:var(--s4)}
.c-item{display:grid; gap:var(--s1)}
.c-item small{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.c-item .val{font-size:1.15rem; font-weight:600; display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; overflow-wrap:anywhere}
.copy{font:inherit; font-size:.8rem; font-weight:500; padding:.2rem .6rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
form.book{display:grid; gap:var(--s4); padding:var(--s5); border:1px solid var(--line); border-radius:6px; background:var(--bg)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
@media (max-width: 520px){ .row2{grid-template-columns:1fr} }
label{display:grid; gap:var(--s1); font-size:.9rem; font-weight:600}
input, select, textarea{font:inherit; font-weight:400; font-size:1rem; padding:.65rem .75rem; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); width:100%}
textarea{min-height:96px; resize:vertical}
.form-note{font-size:.82rem; color:var(--muted)}
@media (max-width: 860px){ .contact{grid-template-columns:1fr} }

footer{background:var(--lav); color:var(--band-muted); padding-block:var(--s6); font-size:.88rem}
footer .wrap{display:grid; gap:var(--s3)}
footer b{color:var(--band-fg); font-family:var(--display); font-size:1.1rem}
footer a{color:var(--band-fg)}
.wa-float{position:fixed; left:calc(16px + env(safe-area-inset-left, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:20; box-shadow:0 6px 20px rgba(224,103,95,.35)}

/* Treatment pages */
.crumbs{font-size:.85rem; color:var(--muted); padding-block:var(--s4) 0}
.crumbs a{color:var(--muted)}
.page-hero{background:linear-gradient(120deg, var(--band) 0%, var(--lav) 55%, var(--band2) 100%); padding-block:var(--s7)}
.page-hero .wrap{display:grid; gap:var(--s4)}
.page-hero h1{font-size:clamp(2rem, 1.3rem + 2.6vw, 3rem); max-width:22ch}
.page-hero p{color:var(--band-muted); max-width:60ch; font-size:1.08rem}
.prose-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s7); align-items:start; padding-block:var(--s7)}
.prose{display:grid; gap:var(--s4); max-width:68ch}
.prose h2{font-size:1.6rem; margin-top:var(--s5)}
.prose ul{margin:0; padding-left:1.2rem; display:grid; gap:var(--s2)}
.aside{position:sticky; top:calc(88px + env(safe-area-inset-top, 0px)); display:grid; gap:var(--s4); padding:var(--s5); border-radius:16px; background:var(--chip)}
.aside h3{font-size:1.15rem}
.aside p, .aside address{font-size:.92rem; color:var(--muted); font-style:normal}
.aside img{border-radius:12px; height:auto; aspect-ratio:1; object-fit:cover; object-position:center top; width:100%}
.cmp{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.cmp table{border-collapse:collapse; width:100%; min-width:560px; font-size:.92rem}
.cmp th,.cmp td{padding:.6rem .75rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--chip); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase}
.cmp tbody th{font-weight:600; white-space:nowrap}
.related{display:flex; flex-wrap:wrap; gap:var(--s2)}
.related a{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; font-size:.88rem; text-decoration:none; color:var(--ink)}
@media (max-width: 860px){ .prose-wrap{grid-template-columns:1fr} .aside{position:static} }