/* =========================================================
Hemani Hospital — Premium Clinical Stylesheet (v2)
Palette: Teal/Green + White (modern medical)
v2 — Left-aligned, image-rich, app-like mobile, marquee
========================================================= */
:root{
--teal-900:#0b3b3a;
--teal-800:#0f4f4d;
--teal-700:#127773;
--teal-600:#159a95;
--teal-500:#1bb6b0;
--teal-400:#3fcdc7;
--teal-300:#80ddd8;
--teal-100:#dff7f5;
--teal-50:#f1fbfa;
--mint:#c8f0e9;
--gold:#d4a24c;
--ink:#0d1f1f;
--ink-2:#324848;
--muted:#5b7373;
--line:#e2eeec;
--bg:#ffffff;
--bg-soft:#f6fbfa;
--shadow-sm:0 2px 8px rgba(13,31,31,.06);
--shadow:0 12px 40px rgba(11,59,58,.08);
--shadow-lg:0 30px 80px rgba(11,59,58,.18);
--radius:18px;
--radius-sm:12px;
--radius-lg:28px;
--container:min(1480px, 94vw);
--container-wide:min(1640px, 96vw);
--container-narrow:min(1180px, 92vw);
--grad: linear-gradient(135deg,#0f4f4d 0%,#127773 45%,#1bb6b0 100%);
--grad-soft: linear-gradient(180deg,#f1fbfa 0%,#ffffff 80%);
--font-display:"Bricolage Grotesque","Fraunces","Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
--font-display-2:"Fraunces","Bricolage Grotesque",Georgia,serif;
--font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
/* Golden-ratio spacing scale (φ ≈ 1.618). */
--s-1:10px;
--s-2:16px;
--s-3:26px;
--s-4:42px;
--s-5:68px;
--s-6:110px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--font-body);
color:var(--ink);
background:var(--bg);
line-height:1.6;
font-size:16px;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--teal-700);text-decoration:none;transition:color .2s}
a:hover{color:var(--teal-500)}
button{font:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--teal-900);line-height:1.15;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.4rem)}
p{color:var(--ink-2)}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(16px, 2vw, 32px)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 clamp(16px, 2vw, 32px)}
.section{padding:var(--s-5) 0;position:relative}
.section-tight{padding:var(--s-4) 0}
.section:has(> .cta-band):not(:has(> .container)){padding:var(--s-4) 0}
.section > .cta-band:only-child{margin-top:0;margin-bottom:0}
.section-soft{background:var(--bg-soft)}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:.78rem;letter-spacing:.18em;font-weight:600;
color:var(--teal-700);text-transform:uppercase;
background:var(--teal-100);padding:8px 14px;border-radius:999px;
margin-bottom:16px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-500)}
.lead{font-size:1.08rem;color:var(--ink-2);max-width:640px}
/* ---------- Top bar ---------- */
.topbar{background:var(--teal-900);color:#cdeae8;font-size:.85rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:12px}
.topbar a{color:#fff}
.topbar .left,.topbar .right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar svg{width:14px;height:14px}
/* ---------- Header ---------- */
.site-header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.85);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line);
transition:box-shadow .2s,background .2s;
}
.site-header.scrolled{box-shadow:0 4px 16px rgba(11,59,58,.06);background:rgba(255,255,255,.95)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{
width:46px;height:46px;border-radius:12px;
background:var(--grad);display:grid;place-items:center;color:#fff;
box-shadow:var(--shadow-sm);
}
.brand .logo svg{width:26px;height:26px}
.brand .name{font-family:var(--font-display);font-weight:800;color:var(--teal-900);font-size:1.1rem;letter-spacing:-.01em;line-height:1}
.brand .sub{display:block;font-size:.72rem;color:var(--muted);font-weight:500;margin-top:3px;letter-spacing:.04em;text-transform:uppercase}
nav.primary{display:flex;align-items:center;gap:6px}
nav.primary a{
padding:10px 14px;border-radius:10px;
color:var(--ink);font-weight:500;font-size:.95rem;
}
nav.primary a:hover, nav.primary a.active{background:var(--teal-100);color:var(--teal-700)}
.cta{
display:inline-flex;align-items:center;gap:8px;
background:var(--grad);color:#fff;
padding:13px 22px;border-radius:12px;font-weight:600;
box-shadow:0 10px 24px rgba(27,182,176,.35);
transition:transform .2s,box-shadow .2s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,182,176,.45);color:#fff}
.cta.outline{background:transparent;color:var(--teal-700);border:1.5px solid var(--teal-500);box-shadow:none}
.cta.outline:hover{background:var(--teal-100);color:var(--teal-700)}
.cta svg{width:16px;height:16px}
.hamburger{display:none;width:42px;height:42px;border-radius:10px;background:var(--teal-100);align-items:center;justify-content:center}
.hamburger span,.hamburger span::before,.hamburger span::after{
content:"";display:block;width:20px;height:2px;background:var(--teal-700);position:relative;transition:.25s;
}
.hamburger span::before{position:absolute;top:-6px}
.hamburger span::after{position:absolute;top:6px}
/* ---------- Hero ---------- */
.hero{
position:relative;
background:
radial-gradient(1200px 600px at 80% -10%, rgba(63,205,199,.25), transparent 60%),
radial-gradient(900px 600px at -10% 100%, rgba(15,79,77,.18), transparent 60%),
var(--grad-soft);
padding:80px 0 90px;
overflow:hidden;
}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hero h1 span.accent{
background:linear-gradient(120deg,var(--teal-700),var(--teal-500));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{margin:20px 0 28px;font-size:1.15rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
/* Hero image (modern stock photo card) */
.hero-image{
position:relative;border-radius:var(--radius-lg);overflow:hidden;
aspect-ratio:4/5;box-shadow:var(--shadow-lg);
background:linear-gradient(135deg,#0f4f4d,#1bb6b0);
}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block}
.hero-image::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,59,58,.55),rgba(0,0,0,0) 45%);
}
.hero-image .floating-badge{
position:absolute;bottom:22px;left:22px;right:22px;
background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
padding:16px;border-radius:18px;display:flex;gap:14px;align-items:center;
box-shadow:0 12px 32px rgba(11,59,58,.20);
}
.hero-image .floating-badge .dot-live{
width:10px;height:10px;background:#1ab06b;border-radius:50%;flex-shrink:0;
box-shadow:0 0 0 6px rgba(26,176,107,.18);
}
.hero-image .floating-badge strong{display:block;color:var(--teal-900);font-family:var(--font-display);font-size:.95rem;line-height:1.25}
.hero-image .floating-badge span{font-size:.82rem;color:var(--muted)}
.hero-card{
background:rgba(255,255,255,.65);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.8);
border-radius:var(--radius-lg);
padding:30px;box-shadow:var(--shadow-lg);
position:relative;overflow:hidden;
}
.hero-card::before{
content:"";position:absolute;inset:-2px;border-radius:inherit;
background:linear-gradient(135deg,rgba(27,182,176,.4),transparent 60%);
z-index:-1;filter:blur(20px);
}
.hero-card h3{margin-bottom:14px;font-size:1.1rem;color:var(--teal-800)}
.hero-card .badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.badge{
display:inline-flex;gap:6px;align-items:center;
background:var(--teal-100);color:var(--teal-700);
padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;
}
.hero-card .quick-list{display:grid;gap:10px;margin-top:8px}
.hero-card .quick-list li{
list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-2)
}
.hero-card .quick-list svg{flex-shrink:0;width:18px;height:18px;color:var(--teal-600);margin-top:2px}
.hero-card .ribbon{
position:absolute;top:18px;right:-40px;background:var(--gold);color:#fff;
font-size:.7rem;letter-spacing:.18em;font-weight:700;padding:6px 50px;
transform:rotate(35deg);text-transform:uppercase;
}
.float-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.6;pointer-events:none}
.blob-1{width:300px;height:300px;background:rgba(63,205,199,.25);top:-50px;right:-50px}
.blob-2{width:250px;height:250px;background:rgba(15,119,115,.2);bottom:-60px;left:-30px}
/* ---------- Hero stats band — full-width, animated counter ---------- */
.hero-stats-band{
background:linear-gradient(135deg, #ffffff 0%, #f1fbfa 100%);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:var(--s-4) 0;
}
.hero-stats-band .container{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);align-items:center;
}
.hero-stats-band .stat{padding:0 var(--s-2);position:relative;text-align:left}
.hero-stats-band .stat + .stat::before{
content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line);
}
.hero-stats-band .stat strong{
display:block;
font-family:var(--font-display);font-weight:800;
/* Match h1 size (clamp 2.2rem, 5vw, 4rem) but visually larger via gradient and tight tracking */
font-size:clamp(2.6rem, 5.4vw, 4.4rem);line-height:1;letter-spacing:-.035em;
background:linear-gradient(120deg,var(--teal-700),var(--teal-500));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
margin-bottom:14px;
}
.hero-stats-band .stat span{font-size:1.08rem;color:var(--ink-2);font-weight:500;letter-spacing:.01em;line-height:1.4}
.hero-stats-band{padding:var(--s-5) 0}
/* ---------- Animated marquee — infinite-scroll, attractive ---------- */
.marquee{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:#fff;
overflow:hidden;
padding:22px 0;
-webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track{
display:flex;gap:48px;align-items:center;
width:max-content;
animation:marquee-scroll 42s linear infinite;
white-space:nowrap;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
font-family:var(--font-display);color:var(--teal-800);font-weight:700;font-size:.92rem;
letter-spacing:.06em;text-transform:uppercase;
}
.marquee-item svg{width:22px;height:22px;color:var(--teal-500);flex-shrink:0}
.marquee-item .sep{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--teal-300);
}
@keyframes marquee-scroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* ---------- Universal feature list ---------- */
ul.feature-list{
list-style:none;display:grid;gap:var(--s-1);padding-left:0;margin:0;
}
ul.feature-list li{
display:flex;gap:10px;align-items:flex-start;
font-size:.96rem;line-height:1.55;color:var(--ink-2);
}
ul.feature-list li svg{
width:18px;height:18px;flex-shrink:0;display:block;
color:var(--teal-600);margin-top:3px;
}
.section ul:not([class]) > li > svg:first-child{
width:18px;height:18px;flex-shrink:0;display:inline-block;
vertical-align:-3px;color:var(--teal-600);margin-right:4px;
}
.section ul:not([class]) > li{
display:flex;gap:10px;align-items:flex-start;
font-size:.96rem;line-height:1.55;color:var(--ink-2);
padding-left:0;
}
/* ---------- Section heads — LEFT-ALIGNED by default ---------- */
.section-head{max-width:760px;margin:0 0 56px;text-align:left}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .lead{margin:14px 0 0}
.section-head.center .lead{margin:14px auto 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.center{text-align:center}
.left{text-align:left}
/* ---------- Cards ---------- */
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:28px;box-shadow:var(--shadow-sm);
transition:transform .25s,box-shadow .25s,border-color .25s;
position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--teal-400)}
.card .icon{
width:54px;height:54px;border-radius:14px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;margin-bottom:18px;
}
.card .icon svg{width:26px;height:26px;stroke-width:1.8}
.card h3{margin-bottom:8px;color:var(--teal-900);font-size:1.15rem}
.card p{font-size:.95rem;color:var(--ink-2)}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.9rem;font-weight:600;color:var(--teal-700)}
.card .more svg{width:14px;height:14px;transition:transform .2s;stroke-width:2.5}
.card:hover .more svg{transform:translateX(4px)}
/* Card with image (used in services & blog cards) */
.card.with-image{padding:0;display:flex;flex-direction:column}
.card.with-image .card-image{
aspect-ratio:16/10;overflow:hidden;background:var(--teal-100);position:relative;
}
.card.with-image .card-image img{
width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;
}
.card.with-image:hover .card-image img{transform:scale(1.04)}
.card.with-image .card-body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card.with-image .card-body .icon{margin-bottom:0;width:44px;height:44px;border-radius:11px}
.card.with-image .card-body .icon svg{width:22px;height:22px}
/* ---------- Stats banner — bigger numbers, animated ---------- */
.stats-banner{
background:var(--grad);color:#fff;
padding:var(--s-5) 0;border-radius:0;
position:relative;overflow:hidden;
}
.stats-banner::before{
content:"";position:absolute;inset:0;
background:radial-gradient(600px 200px at 80% 0%,rgba(255,255,255,.18),transparent 60%);
}
.stats-banner .container{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);position:relative}
.stats-banner .stat{text-align:left;padding:0 var(--s-2);position:relative}
.stats-banner .stat + .stat::before{
content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.18);
}
.stats-banner .stat strong{
display:block;
font-size:clamp(3.2rem, 7vw, 5.4rem);
font-family:var(--font-display);font-weight:800;
line-height:1;letter-spacing:-.03em;
margin-bottom:var(--s-1);
}
.stats-banner .stat strong > span{display:inline-block}
.stats-banner .stat span{opacity:.92;font-size:1rem;font-weight:500;letter-spacing:.02em}
/* Hero trust mini-stats (kept for backward compat — used inside hero text) */
.hero-trust{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap}
.hero-trust .stat strong{
display:block;font-family:var(--font-display);
font-size:clamp(1.9rem, 3.6vw, 2.6rem);
letter-spacing:-.02em;line-height:1;
color:var(--teal-900);font-weight:800;
}
.hero-trust .stat span{font-size:.85rem;color:var(--muted)}
/* ---------- Testimonials ---------- */
.testimonial{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:28px;box-shadow:var(--shadow-sm);
}
.testimonial .quote{font-size:1rem;color:var(--ink);margin-bottom:18px;font-style:italic}
.testimonial .who{display:flex;gap:12px;align-items:center}
.testimonial .avatar{
width:46px;height:46px;border-radius:50%;background:var(--grad);
color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-display);
overflow:hidden;
}
.testimonial .avatar img{width:100%;height:100%;object-fit:cover}
.testimonial .who strong{display:block;font-size:.95rem;color:var(--teal-900)}
.testimonial .who span{font-size:.8rem;color:var(--muted)}
.stars{color:var(--gold);letter-spacing:2px;margin-bottom:8px}
/* ---------- Modern Accordion ---------- */
.faq{width:100%;max-width:none;display:grid;gap:12px}
.acc-item{
background:#fff;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
transition:border-color .25s,box-shadow .25s,transform .25s;
position:relative;
}
.acc-item:hover{border-color:var(--teal-300,#80ddd8)}
.acc-item.open{
border-color:var(--teal-500);
box-shadow:0 12px 32px rgba(15,79,77,.10);
}
.acc-item.open::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,var(--teal-500),var(--teal-700));
border-radius:18px 0 0 18px;
}
.acc-trigger{
width:100%;text-align:left;padding:22px 24px;
display:flex;justify-content:space-between;align-items:center;gap:18px;
font-family:var(--font-display);font-weight:700;color:var(--teal-900);
font-size:1.05rem;line-height:1.4;cursor:pointer;
background:transparent;border:0;
}
.acc-trigger:focus-visible{outline:2px solid var(--teal-500);outline-offset:-2px;border-radius:18px}
.acc-icon{
width:36px;height:36px;border-radius:50%;flex-shrink:0;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;
transition:transform .35s cubic-bezier(.4,.0,.2,1),background .25s,color .25s;
}
.acc-icon svg{width:14px;height:14px}
.acc-item.open .acc-icon{
transform:rotate(45deg);
background:var(--teal-500);color:#fff;
}
.acc-panel{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .35s cubic-bezier(.4,.0,.2,1);
}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel-inner{
overflow:hidden;
padding:0 24px;
}
.acc-item.open .acc-panel-inner{padding:0 24px 22px}
.acc-panel p{
color:var(--ink-2);font-size:.98rem;line-height:1.65;
}
.acc-panel p+p{margin-top:10px}
.acc-panel a{color:var(--teal-700);font-weight:600}
/* ---------- CTA banner ---------- */
.cta-band{
background:var(--teal-900);color:#fff;border-radius:var(--radius-lg);
padding:var(--s-4) var(--s-5);
display:grid;grid-template-columns:1.5fr auto;gap:var(--s-3);align-items:center;
position:relative;overflow:hidden;margin:0 var(--s-3);
}
.cta-band::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(400px 200px at 100% 100%, rgba(63,205,199,.28), transparent 60%),
radial-gradient(300px 180px at 0% 0%, rgba(212,162,76,.18), transparent 60%);
}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.85);margin-top:10px;position:relative}
.cta-band .actions{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band .cta.outline{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .cta.outline:hover{background:rgba(255,255,255,.1);color:#fff}
/* ---------- Footer ---------- */
footer{background:#06292a;color:#bcd9d6;padding:var(--s-5) 0 var(--s-3);margin-top:var(--s-5)}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:var(--s-4);margin-bottom:var(--s-4)}
footer h4{color:#fff;font-size:1rem;margin-bottom:var(--s-2);font-family:var(--font-display)}
footer ul{list-style:none;display:grid;gap:var(--s-1);font-size:.92rem}
footer ul li{white-space:normal}
footer a{color:#bcd9d6;word-break:keep-all}
footer a:hover{color:#fff}
footer .brand .name{color:#fff}
footer .brand .sub{color:#7da9a6}
footer p.about{margin-top:var(--s-2);font-size:.92rem;color:#9bc1bd;max-width:320px}
footer .socials{display:flex;gap:var(--s-1);margin-top:var(--s-2)}
footer .socials a{
width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);
display:grid;place-items:center;
}
footer .socials a:hover{background:var(--teal-500);color:#fff}
footer .socials svg{width:16px;height:16px}
footer .contact-line{
display:flex;align-items:center;gap:8px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
footer .contact-line a{display:inline-block;overflow:hidden;text-overflow:ellipsis}
footer .bottom{
border-top:1px solid rgba(255,255,255,.08);padding-top:var(--s-3);
display:flex;justify-content:space-between;font-size:.85rem;color:#7da9a6;
flex-wrap:wrap;gap:var(--s-1);
}
footer .bottom a{color:#80ddd8;font-weight:600}
footer .bottom a:hover{color:#fff}
/* ---------- Floating action buttons ---------- */
.float-actions{
position:fixed;right:20px;bottom:20px;display:grid;gap:12px;z-index:60;
}
.fab{
width:54px;height:54px;border-radius:50%;
display:grid;place-items:center;color:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.18);transition:.2s;
}
.fab.call{background:var(--teal-700)}
.fab.wa{background:#25d366}
.fab:hover{transform:scale(1.08);color:#fff}
.fab svg{width:24px;height:24px}
/* ---------- Mobile bottom navigation bar (app-like) ---------- */
.mobile-bottom-bar{
display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;
background:rgba(255,255,255,.97);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-top:1px solid var(--line);
padding:8px 12px calc(8px + env(safe-area-inset-bottom));
box-shadow:0 -4px 20px rgba(11,59,58,.08);
}
.mobile-bottom-bar .bar-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mobile-bottom-bar a{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:8px 4px;border-radius:12px;color:var(--ink-2);
font-size:.7rem;font-weight:600;line-height:1;
}
.mobile-bottom-bar a svg{width:22px;height:22px}
.mobile-bottom-bar a.book{background:var(--grad);color:#fff}
.mobile-bottom-bar a:active{transform:scale(.96)}
/* ---------- Page hero (inner pages) ---------- */
.page-hero{
padding:80px 0 56px;
background:
radial-gradient(800px 300px at 100% 0%, rgba(63,205,199,.25), transparent 60%),
var(--grad-soft);
border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);text-align:left}
.page-hero .lead{margin-top:14px;text-align:left}
.breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.breadcrumbs a{color:var(--teal-700);font-weight:500}
/* Page hero with image (services / detail) */
.page-hero.with-image{padding:0;border-bottom:1px solid var(--line)}
.page-hero.with-image .hero-grid{
display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;
max-width:var(--container);margin:0 auto;
}
.page-hero.with-image .hero-text{padding:80px var(--s-3) 60px}
.page-hero.with-image .hero-photo{
position:relative;background:var(--grad);min-height:380px;overflow:hidden;
}
.page-hero.with-image .hero-photo img{
width:100%;height:100%;object-fit:cover;display:block;
position:absolute;inset:0;
}
.page-hero.with-image .hero-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,59,58,.40),rgba(11,59,58,0) 50%);
}
/* ---------- Service detail blocks ---------- */
.service-row{
display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:60px;
}
.service-row.reverse{direction:rtl}
.service-row.reverse > *{direction:ltr}
.service-row .visual{
background:var(--grad);border-radius:var(--radius-lg);
aspect-ratio:4/3;display:grid;place-items:center;color:#fff;
position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.service-row .visual img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.service-row .visual svg{width:50%;height:auto;opacity:.85;position:relative;z-index:1}
.service-row h2{font-size:1.7rem;color:var(--teal-900);margin-bottom:14px}
.service-row ul{margin-top:16px;display:grid;gap:10px;list-style:none}
.service-row ul li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.service-row ul li svg{flex-shrink:0;width:18px;height:18px;color:var(--teal-600);margin-top:3px}
/* Two-column tile pair (service detail "When it helps / The procedure") */
.tile-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:flex-start}
.tile-pair > div{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-4);box-shadow:var(--shadow-sm);
}
.tile-pair > div + div{}
/* Service intro with image side */
.svc-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-4);align-items:center}
.svc-intro .svc-intro-text{display:grid;gap:14px}
.svc-intro .svc-intro-image{
border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--teal-100);
box-shadow:var(--shadow);
}
.svc-intro .svc-intro-image img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- Doctor card ---------- */
.doc-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:36px;display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:center;
box-shadow:var(--shadow-sm);
}
.doc-portrait{
aspect-ratio:1;border-radius:24px;background:var(--grad);color:#fff;
display:grid;place-items:center;font-family:var(--font-display);
font-size:5rem;font-weight:800;letter-spacing:-.04em;
position:relative;overflow:hidden;
}
.doc-portrait img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.doc-portrait::after{
content:"";position:absolute;inset:0;
background:radial-gradient(200px 120px at 70% 30%,rgba(255,255,255,.25),transparent 60%);
pointer-events:none;
}
.doc-card h3{font-size:1.5rem;margin-bottom:6px}
.doc-card .role{color:var(--teal-700);font-weight:600;margin-bottom:14px;font-size:.95rem}
.doc-card .creds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
/* Doctor info blocks — full-width single column with two-column lists inside */
.doc-info-grid{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.doc-info-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:36px var(--s-4);box-shadow:var(--shadow-sm);
}
.doc-info-card h3{
font-size:1.4rem;color:var(--teal-900);margin-bottom:var(--s-3);
display:flex;align-items:center;gap:14px;
}
.doc-info-card h3 .h-icon{
width:46px;height:46px;border-radius:12px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.doc-info-card h3 .h-icon svg{width:24px;height:24px;stroke-width:1.8}
.doc-info-card ul{
list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
gap:var(--s-2) var(--s-4);margin-top:var(--s-2);
}
.doc-info-card ul li{
display:flex;gap:10px;align-items:flex-start;
font-size:.96rem;line-height:1.55;color:var(--ink-2);
}
.doc-info-card ul li::before{
content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;
background:var(--teal-500);margin-top:8px;
}
/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-card{display:grid;gap:18px}
.contact-row{
display:flex;gap:14px;align-items:flex-start;
background:#fff;border:1px solid var(--line);padding:20px;border-radius:var(--radius-sm);
}
.contact-row .ic{
width:44px;height:44px;border-radius:12px;background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.contact-row .ic svg{width:20px;height:20px}
.contact-row strong{color:var(--teal-900);font-family:var(--font-display);display:block;margin-bottom:3px}
.contact-row p,.contact-row a{font-size:.95rem;color:var(--ink-2)}
form.appt{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:28px;display:grid;gap:14px;box-shadow:var(--shadow-sm);
}
form.appt label{font-size:.85rem;font-weight:600;color:var(--teal-900);display:block;margin-bottom:6px}
form.appt input,form.appt select,form.appt textarea{
width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
font:inherit;background:var(--bg-soft);color:var(--ink);
transition:border .2s,box-shadow .2s;
}
form.appt input:focus,form.appt select:focus,form.appt textarea:focus{
outline:0;border-color:var(--teal-500);box-shadow:0 0 0 4px rgba(27,182,176,.15);background:#fff;
}
form.appt textarea{min-height:110px;resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* ---------- Map ---------- */
.map-wrap{
border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);
aspect-ratio:16/10;
}
.map-wrap iframe{width:100%;height:100%;border:0}
/* ---------- Blog cards ---------- */
.post-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;display:flex;flex-direction:column;
transition:transform .25s,box-shadow .25s,border-color .25s;
text-decoration:none;color:inherit;
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--teal-400)}
.post-cover{
aspect-ratio:16/9;display:grid;place-items:center;color:#fff;
font-family:var(--font-display);font-weight:800;font-size:1.05rem;
text-align:left;padding:24px;letter-spacing:-.01em;
position:relative;overflow:hidden;
}
.post-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-cover::after{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(11,59,58,.55),rgba(15,119,115,.30));
}
.post-cover > span:not(.cat){position:relative;z-index:1;align-self:flex-end}
.post-cover .cat{
position:absolute;top:14px;left:14px;
background:rgba(255,255,255,.18);color:#fff;
font-size:.72rem;letter-spacing:.12em;font-weight:600;text-transform:uppercase;
padding:5px 10px;border-radius:999px;backdrop-filter:blur(8px);z-index:2;
}
.post-card-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:10px}
.post-card-body h3{font-size:1.15rem;line-height:1.3;color:var(--teal-900);margin-bottom:0}
.post-card-body p{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.post-meta{
display:flex;gap:14px;font-size:.78rem;color:var(--muted);
margin-top:auto;padding-top:8px;align-items:center;
}
.post-meta .dot{width:3px;height:3px;background:var(--muted);border-radius:50%;display:inline-block}
.post-featured{
display:grid;grid-template-columns:1.1fr 1fr;gap:36px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
overflow:hidden;align-items:stretch;box-shadow:var(--shadow-sm);
transition:transform .25s,box-shadow .25s;
text-decoration:none;color:inherit;
}
.post-featured:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-featured .post-cover{aspect-ratio:auto;min-height:340px}
.post-featured-body{padding:36px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.post-featured-body h2{font-size:1.7rem;color:var(--teal-900);line-height:1.2}
.post-featured-body p{font-size:1.02rem;color:var(--ink-2)}
/* ---------- Blog detail layout — left aligned, sticky sidebar ---------- */
.blog-layout{
max-width:1200px;margin:0 auto;padding:var(--s-4) var(--s-3);
display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-4);
align-items:start;
}
.blog-layout > .post-body{padding:0;max-width:none;margin:0}
.post-aside{
position:sticky;top:96px;
display:grid;gap:var(--s-3);
font-size:.94rem;
}
/* Sidebar sticks rather than internally scrolling */
.aside-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-3);
}
.aside-card h4{
font-family:var(--font-display);font-size:.78rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--teal-700);
margin-bottom:var(--s-2);
}
.toc-list{list-style:none;display:grid;gap:6px;padding:0;margin:0;font-size:.92rem}
.toc-list li{padding:0;margin:0}
.toc-list a{
display:block;color:var(--ink-2);
padding:7px 12px;border-radius:8px;
border-left:2px solid transparent;
text-decoration:none;line-height:1.4;
transition:.18s;
}
.toc-list a:hover{background:var(--teal-50);color:var(--teal-700)}
.toc-list a.active{
background:var(--teal-100);color:var(--teal-800);
border-left-color:var(--teal-500);font-weight:600;
}
.toc-list li.toc-h3 a{padding-left:24px;font-size:.88rem;color:var(--muted)}
.svc-tree{display:grid;gap:6px;font-size:.9rem}
.svc-tree details{border-radius:8px}
.svc-tree details summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;
padding:8px 12px;border-radius:8px;
font-weight:600;color:var(--teal-900);
background:var(--bg-soft);
}
.svc-tree details summary::-webkit-details-marker{display:none}
.svc-tree details summary::after{
content:"";width:8px;height:8px;
border-right:2px solid var(--teal-700);
border-bottom:2px solid var(--teal-700);
transform:rotate(-45deg);transition:.2s;
}
.svc-tree details[open] summary::after{transform:rotate(45deg)}
.svc-tree details summary:hover{background:var(--teal-100)}
.svc-tree ul{list-style:none;padding:6px 0 0;margin:0;display:grid;gap:2px}
.svc-tree ul li a{
display:block;padding:6px 12px 6px 20px;color:var(--ink-2);
border-radius:6px;font-size:.86rem;
}
.svc-tree ul li a:hover{background:var(--teal-50);color:var(--teal-700)}
.svc-tree ul li a.active{background:var(--teal-100);color:var(--teal-800);font-weight:600}
/* Blog post header inside the article column (left-aligned) */
.post-hero-inline{padding:0 0 var(--s-2)}
.post-hero-inline .breadcrumbs{margin-bottom:14px}
.post-hero-inline .cat{
display:inline-block;font-size:.78rem;letter-spacing:.14em;font-weight:600;
text-transform:uppercase;color:var(--teal-700);background:var(--teal-100);
padding:6px 12px;border-radius:999px;margin-bottom:14px;
}
.post-hero-inline h1{
font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.2;text-align:left;
}
.post-hero-inline .meta{
display:flex;gap:14px;font-size:.92rem;color:var(--muted);
margin-top:14px;align-items:center;flex-wrap:wrap;
}
.post-hero-inline .meta strong{color:var(--ink)}
.post-banner-image{
width:100%;aspect-ratio:21/9;border-radius:var(--radius);
overflow:hidden;margin:var(--s-3) 0;
position:relative;background:var(--grad);box-shadow:var(--shadow);
}
.post-banner-image img{width:100%;height:100%;object-fit:cover;display:block}
.post-banner-image::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,59,58,.30),rgba(0,0,0,0) 50%);
}
/* Legacy — kept for any pages still using these */
.post-hero{
padding:60px 0 30px;
background:radial-gradient(800px 300px at 100% 0%, rgba(63,205,199,.25), transparent 60%),var(--grad-soft);
}
.post-hero .container{max-width:none}
.post-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;text-align:left}
.post-hero .cat{
display:inline-block;font-size:.78rem;letter-spacing:.14em;font-weight:600;
text-transform:uppercase;color:var(--teal-700);background:var(--teal-100);
padding:6px 12px;border-radius:999px;margin-bottom:16px;
}
.post-hero .meta{display:flex;gap:14px;font-size:.92rem;color:var(--muted);margin-top:18px;align-items:center;flex-wrap:wrap}
.post-hero .meta strong{color:var(--ink)}
.post-banner{
width:100%;aspect-ratio:21/9;border-radius:var(--radius-lg);
display:grid;place-items:center;color:#fff;font-family:var(--font-display);
font-weight:800;font-size:2rem;padding:28px;text-align:left;letter-spacing:-.02em;
position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.post-banner::after{
content:"";position:absolute;inset:0;
background:radial-gradient(600px 200px at 100% 0%,rgba(255,255,255,.18),transparent 60%);
}
.post-body{
font-size:1.05rem;line-height:1.75;color:var(--ink-2);
}
.post-body h2{
font-size:clamp(1.4rem,2.4vw,1.7rem);color:var(--teal-900);
margin-top:40px;margin-bottom:14px;letter-spacing:-.01em;
}
.post-body h3{
font-size:clamp(1.15rem,1.8vw,1.3rem);color:var(--teal-800);
margin-top:32px;margin-bottom:10px;
}
.post-body p{margin-bottom:18px}
.post-body ul{margin:18px 0 22px;padding-left:0;list-style:none}
.post-body ul li{
position:relative;padding-left:32px;margin-bottom:10px;
}
.post-body ul li::before{
content:"";position:absolute;left:0;top:.7em;
width:18px;height:2.5px;background:var(--teal-500);border-radius:2px;
}
.post-body strong{color:var(--ink)}
.post-body a{color:var(--teal-700);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-cta{
background:linear-gradient(135deg,var(--teal-100),#fff);
border:1px solid var(--teal-300,#80ddd8);
border-radius:var(--radius);padding:28px 30px;margin:32px 0;
display:grid;gap:8px;
}
.post-cta strong{font-family:var(--font-display);color:var(--teal-900);font-size:1.15rem;display:block}
.post-cta p{margin:0;color:var(--ink-2)}
.post-cta a{display:inline-flex;width:max-content;margin-top:8px}
.author-card{
display:flex;gap:16px;padding:22px;background:var(--bg-soft);
border-radius:var(--radius);align-items:center;margin:30px 0;
}
.author-card .av{
width:54px;height:54px;border-radius:50%;background:var(--grad);
color:#fff;display:grid;place-items:center;font-weight:700;
font-family:var(--font-display);flex-shrink:0;
}
.author-card strong{color:var(--teal-900);font-family:var(--font-display)}
.author-card p{font-size:.88rem;color:var(--muted);margin:0}
/* ---------- Animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:translateY(0)}
/* ---------- Responsive ---------- */
@media (max-width:960px){
.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
.hero .container,.contact-grid{grid-template-columns:1fr}
.hero{padding:60px 0}
.hero-stats-band .container{grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.hero-stats-band .stat + .stat::before{display:none}
.stats-banner .container{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.stats-banner .stat + .stat::before{display:none}
.doc-card{grid-template-columns:1fr;text-align:left}
.doc-portrait{max-width:200px;margin:0}
.doc-info-card{padding:30px}
.doc-info-card ul{grid-template-columns:1fr}
.service-row,.service-row.reverse{grid-template-columns:1fr;direction:ltr;margin-bottom:40px}
.service-row .visual{aspect-ratio:16/10;max-height:260px;order:-1}
.tile-pair{grid-template-columns:1fr;gap:var(--s-3)}
.svc-intro{grid-template-columns:1fr}
.svc-intro .svc-intro-image{aspect-ratio:16/10;max-height:280px;order:-1}
.cta-band{padding:36px;grid-template-columns:1fr;text-align:left}
.cta-band .actions{justify-content:flex-start}
footer .grid{grid-template-columns:1fr 1fr}
.page-hero.with-image .hero-grid{grid-template-columns:1fr}
.page-hero.with-image .hero-text{padding:60px var(--s-3) 30px}
.page-hero.with-image .hero-photo{min-height:240px}
.blog-layout{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-4)}
.post-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);order:1}
.post-aside .aside-card{padding:var(--s-2)}
nav.primary{
position:fixed;top:78px;left:0;right:0;background:#fff;
flex-direction:column;align-items:stretch;padding:16px;border-bottom:1px solid var(--line);
transform:translateY(-110%);transition:.3s;box-shadow:var(--shadow);
}
nav.primary.open{transform:translateY(0)}
nav.primary a{padding:14px 16px}
.hamburger{display:flex}
.header-cta{display:none}
}
@media (max-width:720px){
.post-featured{grid-template-columns:1fr}
.post-featured .post-cover{min-height:200px}
.post-featured-body{padding:24px}
.post-featured-body h2{font-size:1.4rem}
.post-body{font-size:1rem}
.post-banner{font-size:1.4rem;padding:20px;aspect-ratio:16/10}
/* App-like mobile UI */
.float-actions{display:none}
.mobile-bottom-bar{display:block}
body{padding-bottom:74px}
}
@media (max-width:560px){
.grid-3,.grid-4,.grid-2,.row-2{grid-template-columns:1fr}
.hero-stats-band{padding:var(--s-3) 0}
.hero-stats-band .container{grid-template-columns:1fr;gap:var(--s-2)}
.hero-stats-band .stat{
background:#fff;padding:var(--s-2) var(--s-3);
border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
}
.hero-stats-band .stat strong{font-size:2.2rem;margin-bottom:0}
.hero-stats-band .stat span{font-size:.88rem}
.stats-banner{padding:var(--s-4) 0}
.stats-banner .container{grid-template-columns:1fr 1fr;gap:var(--s-3)}
.stats-banner .stat strong{font-size:2.4rem}
.post-aside{grid-template-columns:1fr}
.blog-layout{padding:var(--s-2)}
footer .grid{grid-template-columns:1fr}
.section{padding:48px 0}
.topbar{font-size:.78rem}
.topbar .container{justify-content:center;text-align:center;gap:6px;padding:8px 16px}
.topbar .left,.topbar .right{gap:10px;justify-content:center}
.topbar .left span:nth-child(2){display:none}
.container{padding:0 18px}
.hero{padding:40px 0 60px}
.hero h1{font-size:2rem}
.hero .lead{font-size:1rem}
.hero-trust{gap:18px}
.hero-trust .stat strong{font-size:1.5rem}
.cta-band{padding:30px 22px;margin:0 16px}
.cta-band h2{font-size:1.4rem}
.doc-card{padding:24px}
.doc-portrait{font-size:3.2rem;border-radius:18px;max-width:160px}
.doc-info-card{padding:24px}
.page-hero{padding:50px 0 36px}
.page-hero h1{font-size:1.7rem}
.post-hero{padding:30px 0 10px}
.post-hero h1{font-size:1.6rem}
details.qa{padding:16px 18px}
details.qa summary{font-size:.95rem}
.hero-card{padding:22px}
.marquee{padding:18px 0}
.marquee-track{gap:30px;animation-duration:30s}
.marquee-item{font-size:.78rem;gap:8px}
.marquee-item svg{width:18px;height:18px}
form.appt{padding:22px}
.acc-trigger{padding:18px;font-size:.98rem;gap:12px}
.acc-item.open .acc-panel-inner{padding:0 18px 18px}
.acc-icon{width:32px;height:32px}
.section-head{margin-bottom:36px}
.post-banner-image{aspect-ratio:16/10}
/* Mobile-app-like flourish */
.card{border-radius:16px}
.post-card{border-radius:16px}
.testimonial{border-radius:16px;padding:22px}
}
@media (max-width:380px){
.hero h1{font-size:1.7rem}
.stats-banner .stat strong{font-size:2rem}
h2{font-size:1.4rem}
.topbar .left span:first-child{font-size:.8rem}
}
/* =========================================================
v3 — Service detail redesign + image-rich services list
========================================================= */
/* SERVICE HERO V2 — magazine-style, asymmetric */
.svc-hero-v2{
position:relative;overflow:hidden;
background:
radial-gradient(900px 400px at 100% 0%, rgba(63,205,199,.18), transparent 60%),
radial-gradient(700px 350px at 0% 100%, rgba(15,119,115,.10), transparent 60%),
linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
border-bottom:1px solid var(--line);
padding:0;
}
.svc-hero-v2 .svc-hero-grid{
display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-5);
max-width:var(--container);margin:0 auto;padding:0 var(--s-3);
align-items:center;min-height:560px;
}
.svc-hero-v2 .svc-hero-text{padding:80px 0 60px;max-width:600px}
.svc-hero-v2 .breadcrumbs{margin-bottom:18px}
.svc-hero-v2 .svc-pill{
display:inline-flex;align-items:center;gap:8px;
background:var(--teal-100);color:var(--teal-700);
padding:7px 14px;border-radius:999px;
font-size:.78rem;letter-spacing:.14em;font-weight:700;text-transform:uppercase;
margin-bottom:18px;
}
.svc-hero-v2 .svc-pill svg{width:14px;height:14px}
.svc-hero-v2 h1{
font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.025em;
text-align:left;color:var(--teal-900);
margin-bottom:var(--s-2);
}
.svc-hero-v2 .svc-lead{
font-size:clamp(1.05rem,1.4vw,1.18rem);line-height:1.6;color:var(--ink-2);
max-width:540px;margin-bottom:var(--s-3);
}
.svc-hero-v2 .hero-actions{margin-bottom:var(--s-4)}
/* Procedure-stat strip — 4 quick facts under the hero text */
.svc-fact-strip{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);overflow:hidden;
}
.svc-fact-strip .fact{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.svc-fact-strip .fact + .fact{border-left:1px solid var(--line)}
.svc-fact-strip .fact .fact-label{
font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);font-weight:600;
}
.svc-fact-strip .fact .fact-value{
font-family:var(--font-display);font-weight:700;color:var(--teal-900);
font-size:1.05rem;line-height:1.2;
}
.svc-fact-strip .fact .fact-value .icon-inline{
display:inline-flex;align-items:center;gap:6px;
}
.svc-fact-strip .fact .fact-value svg{width:16px;height:16px;color:var(--teal-600)}
/* Hero photo on the right — asymmetric stacked card */
.svc-hero-v2 .svc-hero-photo{
position:relative;align-self:stretch;
display:flex;align-items:center;justify-content:center;
padding:60px 0;
}
.svc-hero-v2 .svc-hero-photo .photo-card{
position:relative;width:100%;max-width:480px;
aspect-ratio:4/5;border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-lg);
background:var(--grad);transform:rotate(0deg);
}
.svc-hero-v2 .svc-hero-photo .photo-card img{
width:100%;height:100%;object-fit:cover;display:block;
}
.svc-hero-v2 .svc-hero-photo .photo-card::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,59,58,.45),rgba(0,0,0,0) 50%);
}
/* Floating trust card */
.svc-hero-v2 .svc-hero-photo .trust-chip{
position:absolute;bottom:30px;left:-30px;
background:#fff;border-radius:18px;
padding:18px 22px;display:flex;gap:14px;align-items:center;
box-shadow:var(--shadow-lg);max-width:300px;
}
.svc-hero-v2 .svc-hero-photo .trust-chip .star-row{
font-size:.85rem;color:var(--gold);letter-spacing:2px;
}
.svc-hero-v2 .svc-hero-photo .trust-chip strong{
display:block;color:var(--teal-900);font-family:var(--font-display);
font-size:1.4rem;line-height:1;
}
.svc-hero-v2 .svc-hero-photo .trust-chip span{
font-size:.8rem;color:var(--muted);display:block;margin-top:4px;
}
.svc-hero-v2 .svc-hero-photo .badge-floating{
position:absolute;top:24px;right:-20px;
background:var(--teal-900);color:#fff;
padding:14px 20px;border-radius:14px;
font-family:var(--font-display);font-weight:700;font-size:.92rem;
box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;
letter-spacing:.04em;
}
.svc-hero-v2 .svc-hero-photo .badge-floating svg{width:18px;height:18px;color:var(--teal-300)}
/* SERVICE INTRO V2 — left-aligned narrative + side image */
.svc-narrative{
display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-5);align-items:start;
}
.svc-narrative .svc-narrative-text{display:grid;gap:14px;font-size:1.04rem;line-height:1.7}
.svc-narrative .svc-narrative-text p{color:var(--ink-2)}
.svc-narrative .svc-narrative-text p strong{color:var(--ink)}
.svc-narrative .svc-narrative-image{
position:sticky;top:96px;
border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
background:var(--teal-100);box-shadow:var(--shadow);
}
.svc-narrative .svc-narrative-image img{width:100%;height:100%;object-fit:cover;display:block}
/* NUMBERED STEP FLOW — for "When it helps" / "The procedure" */
.svc-step-flow{
display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);
align-items:start;
}
.svc-step-flow .step-block{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-4);box-shadow:var(--shadow-sm);
position:relative;overflow:hidden;
}
.svc-step-flow .step-block::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--teal-500),var(--teal-700));
}
.svc-step-flow .step-block.is-procedure::before{
background:linear-gradient(90deg,var(--gold),#b48134);
}
.svc-step-flow .step-block h2{
font-size:1.4rem;color:var(--teal-900);margin-bottom:8px;
}
.svc-step-flow .step-block .step-intro{
font-size:.96rem;color:var(--muted);margin-bottom:var(--s-3);line-height:1.55;
}
.svc-step-flow ol.numbered-steps{
list-style:none;display:grid;gap:var(--s-2);counter-reset:step;
padding:0;margin:0;
}
.svc-step-flow ol.numbered-steps li{
display:grid;grid-template-columns:36px 1fr;gap:14px;
align-items:flex-start;counter-increment:step;
padding:0;
font-size:.96rem;line-height:1.55;color:var(--ink-2);
}
.svc-step-flow ol.numbered-steps li::before{
content:counter(step,decimal-leading-zero);
width:36px;height:36px;border-radius:10px;
background:var(--teal-100);color:var(--teal-700);
font-family:var(--font-display);font-weight:800;font-size:.9rem;
display:grid;place-items:center;flex-shrink:0;
letter-spacing:-.02em;
}
.svc-step-flow .step-block.is-procedure ol.numbered-steps li::before{
background:#fdf3e2;color:#b48134;
}
.svc-step-flow ol.numbered-steps li strong{color:var(--ink);font-weight:700}
/* Bullet variant for the When-it-helps list (uses tick icons) */
.svc-step-flow ul.tick-steps{
list-style:none;display:grid;gap:var(--s-2);padding:0;margin:0;
}
.svc-step-flow ul.tick-steps li{
display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:flex-start;
font-size:.96rem;line-height:1.55;color:var(--ink-2);
}
.svc-step-flow ul.tick-steps li::before{
content:"";width:28px;height:28px;border-radius:50%;
background:var(--teal-100);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:14px 14px;
flex-shrink:0;
}
/* RECOVERY TIMELINE — horizontal bar with labelled markers */
.svc-recovery-timeline{
position:relative;padding:var(--s-3) 0 0;
}
.svc-recovery-timeline .timeline-track{
position:relative;height:6px;border-radius:3px;
background:linear-gradient(90deg, var(--teal-300), var(--teal-500), var(--teal-700));
margin:60px 24px 30px;
}
.svc-recovery-timeline .timeline-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);
margin-top:30px;
}
.svc-recovery-timeline .timeline-grid > .step{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-3);box-shadow:var(--shadow-sm);
position:relative;
}
.svc-recovery-timeline .timeline-grid > .step::before{
content:"";position:absolute;left:24px;top:-14px;
width:28px;height:28px;border-radius:50%;
background:var(--grad);box-shadow:0 4px 12px rgba(15,119,115,.30);
border:4px solid #fff;
}
.svc-recovery-timeline .timeline-grid > .step h3{
font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--teal-700);margin-top:8px;margin-bottom:8px;font-weight:700;
}
.svc-recovery-timeline .timeline-grid > .step p{
font-size:.94rem;line-height:1.55;color:var(--ink-2);margin:0;
}
/* COST + WHY — side-by-side compare cards */
.svc-compare-pair{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
align-items:stretch;
}
.svc-compare-pair > div{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-4);box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;gap:var(--s-2);
position:relative;overflow:hidden;
}
.svc-compare-pair .cost-card{
background:linear-gradient(135deg,#fff,#f6fbfa);
}
.svc-compare-pair .cost-card .cost-pill{
display:inline-flex;align-items:center;gap:8px;
background:#fff;border:1px solid var(--line);
padding:6px 12px;border-radius:999px;
font-size:.78rem;font-weight:700;color:var(--teal-700);
letter-spacing:.04em;
}
.svc-compare-pair .why-card{
background:linear-gradient(135deg,var(--teal-900),var(--teal-800));color:#fff;
}
.svc-compare-pair .why-card h2{color:#fff}
.svc-compare-pair .why-card .eyebrow{
background:rgba(255,255,255,.12);color:#fff;
}
.svc-compare-pair .why-card .eyebrow .dot{background:#3fcdc7}
.svc-compare-pair .why-card ul.feature-list li{color:rgba(255,255,255,.92)}
.svc-compare-pair .why-card ul.feature-list li svg{color:#3fcdc7}
.svc-compare-pair .why-card .cta{
background:#fff;color:var(--teal-800);box-shadow:none;
}
.svc-compare-pair .why-card .cta:hover{background:#f1fbfa;color:var(--teal-800)}
/* SERVICES LIST PAGE — image-rich category sections */
.svc-list-hero{
background:
radial-gradient(800px 320px at 100% 0%, rgba(63,205,199,.22), transparent 60%),
var(--grad-soft);
padding:90px 0 60px;
border-bottom:1px solid var(--line);
}
.svc-list-hero h1{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08}
.svc-list-hero .lead{font-size:1.15rem;margin-top:14px}
/* Category banner — image left, intro right + procedure cards below */
.svc-cat-banner{
display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-4);
align-items:center;margin-bottom:var(--s-4);
}
.svc-cat-banner .cat-image{
border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4;
background:var(--grad);box-shadow:var(--shadow);position:relative;
}
.svc-cat-banner .cat-image img{width:100%;height:100%;object-fit:cover;display:block}
.svc-cat-banner .cat-image::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,59,58,.30),rgba(0,0,0,0) 50%);
}
.svc-cat-banner .cat-image .cat-corner{
position:absolute;top:18px;left:18px;
background:rgba(255,255,255,.96);
padding:8px 14px;border-radius:999px;
font-size:.72rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--teal-700);
}
.svc-cat-banner .cat-info h2{font-size:clamp(1.6rem,2.6vw,2rem);line-height:1.15}
.svc-cat-banner .cat-info .lead{margin:14px 0;font-size:1.04rem}
.svc-cat-banner .cat-info .cat-stats{
display:flex;gap:24px;margin-top:var(--s-2);
}
.svc-cat-banner .cat-info .cat-stats > div{
display:flex;flex-direction:column;
}
.svc-cat-banner .cat-info .cat-stats strong{
font-family:var(--font-display);font-weight:800;color:var(--teal-700);
font-size:1.5rem;line-height:1;
}
.svc-cat-banner .cat-info .cat-stats span{
font-size:.82rem;color:var(--muted);margin-top:4px;
}
/* Procedure cards inside a category — compact image cards */
.svc-list-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);
}
.svc-proc-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;display:flex;flex-direction:column;
transition:transform .25s, box-shadow .25s, border-color .25s;
text-decoration:none;color:inherit;
}
.svc-proc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal-400)}
.svc-proc-card .proc-image{
aspect-ratio:5/3;overflow:hidden;background:var(--teal-100);position:relative;
}
.svc-proc-card .proc-image img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s;
}
.svc-proc-card:hover .proc-image img{transform:scale(1.05)}
.svc-proc-card .proc-body{
padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;
}
.svc-proc-card .proc-icon{
width:42px;height:42px;border-radius:11px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;margin-bottom:6px;
}
.svc-proc-card .proc-icon svg{width:22px;height:22px;stroke-width:1.8}
.svc-proc-card h3{font-size:1.1rem;color:var(--teal-900);margin:0}
.svc-proc-card p{font-size:.92rem;color:var(--ink-2);line-height:1.55;margin:0}
.svc-proc-card .proc-meta{
display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px;
font-size:.78rem;color:var(--muted);
}
.svc-proc-card .proc-meta .pill{
display:inline-flex;align-items:center;gap:4px;
background:var(--bg-soft);padding:3px 10px;border-radius:999px;
font-weight:600;
}
/* Quick category tabs (sticky-friendly) */
.svc-cat-tabs{
display:flex;gap:8px;flex-wrap:wrap;
padding:var(--s-2) 0;margin-bottom:var(--s-3);
border-bottom:1px solid var(--line);
}
.svc-cat-tabs a{
display:inline-flex;align-items:center;gap:8px;
padding:10px 16px;border-radius:999px;
background:#fff;border:1px solid var(--line);
color:var(--ink-2);font-weight:600;font-size:.92rem;
transition:.2s;
}
.svc-cat-tabs a:hover{border-color:var(--teal-400);color:var(--teal-700);background:var(--teal-50)}
.svc-cat-tabs a svg{width:16px;height:16px}
.svc-cat-tabs .count{
background:var(--teal-100);color:var(--teal-700);
font-size:.74rem;font-weight:700;
padding:2px 7px;border-radius:999px;
letter-spacing:.04em;
}
/* RESPONSIVE for v3 sections */
@media (max-width:960px){
.svc-hero-v2 .svc-hero-grid{grid-template-columns:1fr;gap:var(--s-3);min-height:auto}
.svc-hero-v2 .svc-hero-text{padding:60px 0 30px}
.svc-hero-v2 .svc-hero-photo{padding:0 0 50px}
.svc-hero-v2 .svc-hero-photo .photo-card{max-width:420px}
.svc-hero-v2 .svc-hero-photo .trust-chip{left:0}
.svc-hero-v2 .svc-hero-photo .badge-floating{right:0}
.svc-fact-strip{grid-template-columns:repeat(2,1fr)}
.svc-fact-strip .fact{border-left:0!important}
.svc-fact-strip .fact:nth-child(n+2){border-top:1px solid var(--line)}
.svc-fact-strip .fact:nth-child(2){border-left:1px solid var(--line)!important}
.svc-fact-strip .fact:nth-child(4){border-left:1px solid var(--line)!important;border-top:1px solid var(--line)}
.svc-narrative{grid-template-columns:1fr;gap:var(--s-3)}
.svc-narrative .svc-narrative-image{position:static;aspect-ratio:16/10;max-height:340px;order:-1}
.svc-step-flow{grid-template-columns:1fr;gap:var(--s-3)}
.svc-recovery-timeline .timeline-grid{grid-template-columns:repeat(2,1fr)}
.svc-recovery-timeline .timeline-track{display:none}
.svc-compare-pair{grid-template-columns:1fr;gap:var(--s-3)}
.svc-cat-banner{grid-template-columns:1fr;gap:var(--s-3)}
.svc-cat-banner .cat-image{aspect-ratio:16/10;max-height:300px}
.svc-list-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.svc-hero-v2 .svc-hero-grid{padding:0 18px;gap:var(--s-3)}
.svc-hero-v2 .svc-hero-text{padding:42px 0 24px}
.svc-hero-v2 h1{font-size:1.7rem;line-height:1.18}
.svc-fact-strip{grid-template-columns:1fr}
.svc-fact-strip .fact{border-left:0!important}
.svc-fact-strip .fact + .fact{border-top:1px solid var(--line)}
.svc-step-flow .step-block{padding:24px}
.svc-recovery-timeline .timeline-grid{grid-template-columns:1fr}
.svc-list-grid{grid-template-columns:1fr}
.svc-cat-tabs{gap:6px}
.svc-cat-tabs a{padding:8px 12px;font-size:.85rem}
}
/* =========================================================
v4 — Distinct page-hero variants per page type, doctor
profile redesign, services list 1-image-per-category,
recovery spacing fix, blog book-now button
========================================================= */
/* HOME HERO V2 — interactive multi-layer */
.hero-v2{
position:relative;overflow:hidden;
padding:90px 0 100px;
background:
radial-gradient(1200px 600px at 80% -10%, rgba(63,205,199,.22), transparent 60%),
radial-gradient(900px 600px at -10% 100%, rgba(15,79,77,.14), transparent 60%),
var(--grad-soft);
}
.hero-v2 .container{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-v2 .hero-text{max-width:600px}
.hero-v2 .pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.hero-v2 .trust-pill{
display:inline-flex;align-items:center;gap:8px;
background:#fff;border:1px solid var(--line);
padding:6px 14px;border-radius:999px;
font-size:.78rem;font-weight:600;color:var(--ink-2);
}
.hero-v2 .trust-pill .star{color:var(--gold)}
.hero-v2 .trust-pill svg{width:14px;height:14px;color:var(--teal-600)}
.hero-v2 h1{
font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.03em;
margin-bottom:18px;
}
.hero-v2 h1 .accent{
background:linear-gradient(120deg,var(--teal-700),var(--teal-500));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-v2 .lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;margin-bottom:28px}
.hero-v2 .hero-actions{margin-bottom:28px}
.hero-v2 .quick-pills{
display:flex;gap:8px;flex-wrap:wrap;
}
.hero-v2 .quick-pills .qp{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
border:1px solid var(--line);
padding:8px 14px;border-radius:999px;
font-size:.85rem;font-weight:600;color:var(--teal-800);
}
.hero-v2 .quick-pills .qp svg{width:14px;height:14px;color:var(--teal-600)}
/* Right side — image collage with floating cards */
.hero-v2 .hero-collage{position:relative;height:520px}
.hero-v2 .hero-collage .pri{
position:absolute;top:0;right:0;width:62%;height:78%;
border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow-lg);background:var(--grad);
}
.hero-v2 .hero-collage .pri img{width:100%;height:100%;object-fit:cover}
.hero-v2 .hero-collage .sec{
position:absolute;bottom:0;left:0;width:54%;aspect-ratio:5/4;
border-radius:var(--radius);overflow:hidden;
border:6px solid #fff;box-shadow:var(--shadow);
}
.hero-v2 .hero-collage .sec img{width:100%;height:100%;object-fit:cover}
/* Floating "trusted since 2011" card */
.hero-v2 .hero-collage .float-card{
position:absolute;top:24px;left:0;
background:#fff;border-radius:18px;padding:14px 18px;
box-shadow:var(--shadow-lg);
display:flex;gap:12px;align-items:center;
font-size:.86rem;
}
.hero-v2 .hero-collage .float-card .live-dot{
width:10px;height:10px;border-radius:50%;background:#1ab06b;
box-shadow:0 0 0 5px rgba(26,176,107,.18);flex-shrink:0;
}
.hero-v2 .hero-collage .float-card strong{
display:block;color:var(--teal-900);font-family:var(--font-display);font-size:.98rem;line-height:1.2;
}
.hero-v2 .hero-collage .float-card span{font-size:.78rem;color:var(--muted)}
/* Floating rating chip bottom-right */
.hero-v2 .hero-collage .rating-chip{
position:absolute;bottom:30px;right:-12px;
background:var(--teal-900);color:#fff;
padding:14px 20px;border-radius:16px;
display:flex;gap:14px;align-items:center;
box-shadow:var(--shadow-lg);
}
.hero-v2 .hero-collage .rating-chip strong{
font-family:var(--font-display);font-size:1.6rem;line-height:1;
}
.hero-v2 .hero-collage .rating-chip .stars{
color:var(--gold);font-size:.8rem;letter-spacing:1.5px;line-height:1;
}
.hero-v2 .hero-collage .rating-chip span{font-size:.74rem;opacity:.85;display:block;margin-top:3px}
/* PAGE HERO — DOCTOR variant (deep teal + photo) */
.page-hero.doctor-hero{
position:relative;overflow:hidden;padding:0;
background:linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 60%, var(--teal-700) 100%);
color:#fff;border-bottom:0;
}
.page-hero.doctor-hero::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(700px 400px at 100% 0%, rgba(63,205,199,.22), transparent 60%),
radial-gradient(500px 300px at 0% 100%, rgba(255,255,255,.05), transparent 60%);
pointer-events:none;
}
.page-hero.doctor-hero .doctor-grid{
display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-5);align-items:center;
max-width:var(--container);margin:0 auto;padding:80px var(--s-3);
position:relative;z-index:1;
}
.page-hero.doctor-hero .breadcrumbs,
.page-hero.doctor-hero .breadcrumbs a{color:rgba(255,255,255,.7)}
.page-hero.doctor-hero .breadcrumbs a:hover{color:#fff}
.page-hero.doctor-hero .doctor-photo{
position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-lg);
border:4px solid rgba(255,255,255,.10);
max-width:380px;justify-self:start;
}
.page-hero.doctor-hero .doctor-photo img{width:100%;height:100%;object-fit:cover}
.page-hero.doctor-hero .doctor-photo .chip{
position:absolute;bottom:18px;left:18px;right:18px;
background:rgba(255,255,255,.96);color:var(--teal-900);
padding:12px 16px;border-radius:14px;
display:flex;gap:12px;align-items:center;
}
.page-hero.doctor-hero .doctor-photo .chip strong{
font-family:var(--font-display);font-size:1.25rem;line-height:1;
}
.page-hero.doctor-hero .doctor-photo .chip span{font-size:.78rem;color:var(--muted);display:block;margin-top:3px}
.page-hero.doctor-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.025em}
.page-hero.doctor-hero .lead{color:rgba(255,255,255,.85);font-size:clamp(1.05rem,1.3vw,1.15rem);max-width:580px}
.page-hero.doctor-hero .cred-row{
display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s-2);
}
.page-hero.doctor-hero .cred-row .cb{
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
padding:7px 14px;border-radius:999px;
font-size:.82rem;color:#fff;font-weight:600;
display:inline-flex;align-items:center;gap:6px;
}
.page-hero.doctor-hero .cred-row .cb svg{width:14px;height:14px;color:#3fcdc7}
.page-hero.doctor-hero .hero-actions{margin-top:var(--s-3)}
.page-hero.doctor-hero .cta.outline{color:#fff;border-color:rgba(255,255,255,.4)}
.page-hero.doctor-hero .cta.outline:hover{background:rgba(255,255,255,.10);color:#fff}
/* Mini-stats strip */
.page-hero.doctor-hero .mini-stats{
display:grid;grid-template-columns:repeat(3,auto);gap:var(--s-3);
margin-top:var(--s-3);
}
.page-hero.doctor-hero .mini-stats > div{display:flex;flex-direction:column}
.page-hero.doctor-hero .mini-stats strong{
font-family:var(--font-display);font-weight:800;
font-size:1.8rem;line-height:1;color:#3fcdc7;
}
.page-hero.doctor-hero .mini-stats span{font-size:.78rem;opacity:.78;margin-top:6px;letter-spacing:.04em;text-transform:uppercase}
/* PAGE HERO — ABOUT variant: split with editorial pull-quote */
.page-hero.about-hero{
padding:0;border-bottom:1px solid var(--line);
background:
linear-gradient(135deg,#fff 0%, var(--bg-soft) 100%);
position:relative;overflow:hidden;
}
.page-hero.about-hero::after{
content:"";position:absolute;top:0;right:0;width:60%;height:100%;
background:radial-gradient(800px 400px at 100% 0%, rgba(63,205,199,.18), transparent 60%);
pointer-events:none;
}
.page-hero.about-hero .about-grid{
display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-5);align-items:end;
max-width:var(--container);margin:0 auto;padding:90px var(--s-3) 0;
position:relative;z-index:1;
}
.page-hero.about-hero h1{
font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.03em;
}
.page-hero.about-hero h1 em{font-style:normal;color:var(--teal-600)}
.page-hero.about-hero .lead{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:540px}
.page-hero.about-hero .pull-quote{
background:#fff;border-radius:var(--radius);
padding:var(--s-3);box-shadow:var(--shadow);
border-left:4px solid var(--teal-500);
font-family:var(--font-display);font-size:1.1rem;line-height:1.5;
color:var(--teal-900);margin-top:var(--s-3);max-width:520px;
}
.page-hero.about-hero .pull-quote strong{display:block;margin-top:10px;font-size:.85rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.page-hero.about-hero .about-photo{
align-self:end;
aspect-ratio:4/5;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;
box-shadow:var(--shadow-lg);max-width:420px;justify-self:end;
}
.page-hero.about-hero .about-photo img{width:100%;height:100%;object-fit:cover}
/* PAGE HERO — CONTACT variant: light, centered with map preview */
.page-hero.contact-hero{
background:
radial-gradient(700px 350px at 100% 0%, rgba(63,205,199,.18), transparent 60%),
var(--grad-soft);
padding:80px 0 60px;border-bottom:1px solid var(--line);
}
.page-hero.contact-hero .container{max-width:var(--container)}
.page-hero.contact-hero h1{
font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;
}
.page-hero.contact-hero .quick-channels{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);
margin-top:var(--s-3);max-width:780px;
}
.page-hero.contact-hero .qc{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:18px 20px;display:flex;gap:14px;align-items:center;
text-decoration:none;color:inherit;
transition:transform .2s, box-shadow .2s, border-color .2s;
}
.page-hero.contact-hero .qc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal-400)}
.page-hero.contact-hero .qc .qc-ic{
width:42px;height:42px;border-radius:11px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.page-hero.contact-hero .qc .qc-ic svg{width:20px;height:20px}
.page-hero.contact-hero .qc strong{
display:block;font-family:var(--font-display);color:var(--teal-900);font-size:.95rem;
}
.page-hero.contact-hero .qc span{font-size:.78rem;color:var(--muted);display:block;margin-top:2px}
/* PAGE HERO — FAQ variant: compact with search-style input */
.page-hero.faq-hero{
background:
radial-gradient(800px 360px at 50% 0%, rgba(63,205,199,.20), transparent 60%),
var(--grad-soft);
padding:70px 0 50px;border-bottom:1px solid var(--line);
text-align:left;
}
.page-hero.faq-hero h1{
font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.025em;
max-width:780px;
}
.page-hero.faq-hero .lead{max-width:680px}
.page-hero.faq-hero .topic-chips{
display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s-3);
}
.page-hero.faq-hero .topic-chips a{
background:#fff;border:1px solid var(--line);
padding:9px 16px;border-radius:999px;
color:var(--ink-2);font-size:.88rem;font-weight:600;
transition:.2s;
}
.page-hero.faq-hero .topic-chips a:hover{border-color:var(--teal-500);color:var(--teal-700);background:var(--teal-50)}
/* DOCTOR PROFILE V2 — chip-grid education + timeline practice */
.doc-profile-grid{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:start;
}
/* Education panel — chip grid */
.doc-edu-panel{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-4);box-shadow:var(--shadow-sm);
position:relative;overflow:hidden;
}
.doc-edu-panel::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--teal-500),var(--teal-700));
}
.doc-edu-panel h2{
font-size:1.4rem;color:var(--teal-900);margin-bottom:var(--s-2);
display:flex;align-items:center;gap:12px;
}
.doc-edu-panel h2 .ic{
width:42px;height:42px;border-radius:11px;background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.doc-edu-panel h2 .ic svg{width:22px;height:22px}
.doc-edu-panel .edu-intro{font-size:.95rem;color:var(--muted);margin-bottom:var(--s-3)}
/* Year-anchored education entries */
.edu-list{display:grid;gap:var(--s-2);list-style:none;padding:0;margin:0}
.edu-list li{
display:grid;grid-template-columns:90px 1fr;gap:14px;
padding:14px 0;border-bottom:1px dashed var(--line);
align-items:flex-start;
}
.edu-list li:last-child{border-bottom:0}
.edu-list .yr{
font-family:var(--font-display);font-weight:800;font-size:.85rem;
color:var(--teal-700);background:var(--teal-100);
padding:6px 10px;border-radius:8px;
text-align:center;letter-spacing:.04em;line-height:1;align-self:flex-start;
}
.edu-list .body strong{
display:block;color:var(--teal-900);font-family:var(--font-display);font-size:1rem;line-height:1.3;
}
.edu-list .body span{font-size:.88rem;color:var(--ink-2);display:block;margin-top:4px;line-height:1.5}
/* Practice approach panel — pillar tiles */
.doc-practice-panel{
background:linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 100%);
color:#fff;border-radius:var(--radius);
padding:var(--s-4);box-shadow:var(--shadow-sm);
position:relative;overflow:hidden;
}
.doc-practice-panel::after{
content:"";position:absolute;top:0;right:0;width:280px;height:280px;
background:radial-gradient(circle, rgba(63,205,199,.18), transparent 70%);
pointer-events:none;
}
.doc-practice-panel h2{
color:#fff;font-size:1.4rem;margin-bottom:var(--s-2);
display:flex;align-items:center;gap:12px;position:relative;
}
.doc-practice-panel h2 .ic{
width:42px;height:42px;border-radius:11px;
background:rgba(255,255,255,.1);color:#3fcdc7;
display:grid;place-items:center;flex-shrink:0;
}
.doc-practice-panel h2 .ic svg{width:22px;height:22px}
.doc-practice-panel .practice-intro{
color:rgba(255,255,255,.85);font-size:.95rem;margin-bottom:var(--s-3);position:relative;
}
.pillar-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;
}
.pillar{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
border-radius:14px;padding:18px;
}
.pillar .p-num{
font-family:var(--font-display);font-weight:800;font-size:1.6rem;
color:#3fcdc7;line-height:1;
}
.pillar h3{
color:#fff;font-size:1rem;margin:8px 0 6px;
}
.pillar p{
color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.55;margin:0;
}
/* SERVICES LIST V2 — full-width cat-stats strip */
.svc-cat-banner .cat-info .cat-stats-strip{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
margin-top:var(--s-3);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow-sm);
}
.svc-cat-banner .cat-info .cat-stats-strip > div{
padding:18px 20px;
display:flex;flex-direction:column;gap:6px;
position:relative;
}
.svc-cat-banner .cat-info .cat-stats-strip > div + div{
border-left:1px solid var(--line);
}
.svc-cat-banner .cat-info .cat-stats-strip strong{
font-family:var(--font-display);font-weight:800;
font-size:1.7rem;line-height:1;
color:var(--teal-700);letter-spacing:-.02em;
}
.svc-cat-banner .cat-info .cat-stats-strip span{
font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);font-weight:600;
}
/* SERVICES LIST V2 — single-image-per-category procedure list */
.svc-cat-procs{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
margin-top:var(--s-3);
}
.svc-cat-procs .cat-proc{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
text-decoration:none;color:inherit;
transition:transform .2s, box-shadow .2s, border-color .2s;
position:relative;
}
.svc-cat-procs .cat-proc:hover{
transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal-400);
}
.svc-cat-procs .cat-proc .cp-icon{
width:42px;height:42px;border-radius:11px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.svc-cat-procs .cat-proc .cp-icon svg{width:22px;height:22px}
.svc-cat-procs .cat-proc h3{
font-size:1rem;color:var(--teal-900);margin:0 0 4px;line-height:1.3;
}
.svc-cat-procs .cat-proc p{
font-size:.85rem;color:var(--ink-2);line-height:1.5;margin:0 0 8px;
}
.svc-cat-procs .cat-proc .cp-meta{
display:flex;gap:8px;flex-wrap:wrap;
}
.svc-cat-procs .cat-proc .cp-meta span{
display:inline-flex;align-items:center;gap:4px;
background:var(--bg-soft);padding:3px 9px;border-radius:999px;
font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em;
}
.svc-cat-procs .cat-proc .cp-arrow{
position:absolute;top:18px;right:18px;
color:var(--teal-500);opacity:0;transform:translateX(-6px);
transition:opacity .2s, transform .2s;
}
.svc-cat-procs .cat-proc:hover .cp-arrow{opacity:1;transform:translateX(0)}
.svc-cat-procs .cat-proc .cp-arrow svg{width:16px;height:16px}
/* RECOVERY TIMELINE V2 — better spacing + visible track */
.svc-recovery-timeline{padding:var(--s-2) 0 0}
.svc-recovery-timeline .timeline-track{
margin:36px 40px 36px;
}
.svc-recovery-timeline .timeline-grid{
gap:var(--s-3);margin-top:36px;
}
.svc-recovery-timeline .timeline-grid > .step{
padding:28px 24px 24px;
}
.svc-recovery-timeline .timeline-grid > .step::before{
left:50%;transform:translateX(-50%);
width:32px;height:32px;top:-16px;
}
.svc-recovery-timeline .timeline-grid > .step h3{
text-align:center;font-size:.78rem;letter-spacing:.18em;
color:var(--teal-700);margin-bottom:12px;
}
.svc-recovery-timeline .timeline-grid > .step p{
text-align:center;font-size:.92rem;
}
/* BLOG BOOK NOW BUTTON — fix gradient + size */
.post-cta a.cta{
background:var(--grad);color:#fff;
display:inline-flex;align-items:center;gap:8px;
padding:13px 24px;border-radius:12px;font-weight:600;
box-shadow:0 10px 24px rgba(27,182,176,.32);
width:max-content;margin-top:14px;
text-decoration:none;
}
.post-cta a.cta:hover{
transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,182,176,.42);color:#fff;
}
.post-cta a.cta svg{width:14px;height:14px}
/* RESPONSIVE for v4 */
@media (max-width:960px){
.hero-v2 .container{grid-template-columns:1fr;gap:var(--s-4)}
.hero-v2 .hero-collage{height:360px;max-width:520px;margin:0 auto}
.hero-v2 .hero-collage .pri{width:80%;height:75%;right:0}
.hero-v2 .hero-collage .sec{width:50%}
.page-hero.doctor-hero .doctor-grid{grid-template-columns:1fr;gap:var(--s-3);padding:60px var(--s-3)}
.page-hero.doctor-hero .doctor-photo{max-width:280px;margin:0 auto;justify-self:center}
.page-hero.doctor-hero .mini-stats{grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.page-hero.about-hero .about-grid{grid-template-columns:1fr;gap:var(--s-3);padding:60px var(--s-3) 0;align-items:start}
.page-hero.about-hero .about-photo{max-width:340px;justify-self:start;margin-top:var(--s-3)}
.page-hero.contact-hero .quick-channels{grid-template-columns:1fr}
.doc-profile-grid{grid-template-columns:1fr;gap:var(--s-3)}
.pillar-grid{grid-template-columns:1fr}
.svc-cat-banner .cat-info .cat-stats-strip{grid-template-columns:repeat(3,1fr)}
.svc-cat-procs{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.hero-v2{padding:50px 0 70px}
.hero-v2 .hero-collage{height:300px}
.hero-v2 .hero-collage .float-card{padding:10px 14px;font-size:.78rem}
.hero-v2 .hero-collage .rating-chip{padding:10px 14px;right:0}
.page-hero.doctor-hero h1{font-size:1.8rem}
.page-hero.doctor-hero .mini-stats strong{font-size:1.4rem}
.svc-cat-banner .cat-info .cat-stats-strip{grid-template-columns:1fr}
.svc-cat-banner .cat-info .cat-stats-strip > div + div{border-left:0;border-top:1px solid var(--line)}
.svc-cat-procs{grid-template-columns:1fr}
.svc-recovery-timeline .timeline-track{margin:24px 20px 24px}
.edu-list li{grid-template-columns:1fr;gap:6px}
}
/* =========================================================
v5 — Loading screen, font swap, golden-ratio rhythm,
procedure-illustrated hero, services tabs strip, about hero
========================================================= */
/* LOADING SCREEN — 1s splash */
.page-loader{
position:fixed;inset:0;z-index:200;
background:var(--grad);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:var(--s-3);
opacity:1;visibility:visible;
transition:opacity .55s ease, visibility 0s linear .55s;
}
.page-loader.is-out{opacity:0;visibility:hidden}
.page-loader .pl-mark{
width:84px;height:84px;border-radius:22px;
background:rgba(255,255,255,.10);
display:grid;place-items:center;
border:2px solid rgba(255,255,255,.25);
animation:pl-pulse 1.4s ease-in-out infinite;
}
.page-loader .pl-mark svg{width:46px;height:46px;color:#fff}
.page-loader .pl-name{
font-family:var(--font-display);font-weight:800;
font-size:1.4rem;color:#fff;letter-spacing:-.01em;
}
.page-loader .pl-name span{display:block;font-size:.78rem;font-weight:500;opacity:.75;letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.page-loader .pl-bar{
width:160px;height:3px;border-radius:3px;
background:rgba(255,255,255,.18);position:relative;overflow:hidden;
}
.page-loader .pl-bar::before{
content:"";position:absolute;left:-40%;top:0;height:100%;width:40%;
background:rgba(255,255,255,.95);border-radius:3px;
animation:pl-slide 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pl-pulse{
0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.18)}
50%{transform:scale(1.04);box-shadow:0 0 0 18px rgba(255,255,255,0)}
}
@keyframes pl-slide{
0%{left:-40%}
100%{left:100%}
}
@media (prefers-reduced-motion:reduce){
.page-loader .pl-mark{animation:none}
.page-loader .pl-bar::before{animation:none;left:30%}
}
/* GOLDEN-RATIO RHYTHM FIX — section-tight + cta-band spacing */
.section-tight{padding:var(--s-3) 0}
.section-tight + footer,
.section-tight:last-of-type{padding-bottom:var(--s-4)}
.section:has(> .cta-band):not(:has(> .container)){padding:var(--s-3) 0 var(--s-4)}
.section + .section,
.section + .section-tight,
.section-tight + .section{position:relative}
/* Tighter vertical breathing under the very last CTA before footer */
.section-tight:has(.cta-band) + footer{margin-top:0}
footer{margin-top:0}
/* HEADING FONT — Bricolage Grotesque (modern display) */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700}
h1{letter-spacing:-.025em}
h2{letter-spacing:-.022em}
h3{letter-spacing:-.018em}
/* PROCEDURE-ILLUSTRATED HERO — replaces human photo on service detail */
.svc-illus{
position:relative;width:100%;max-width:520px;
aspect-ratio:4/5;border-radius:var(--radius-lg);
overflow:hidden;
background:linear-gradient(135deg, var(--teal-100) 0%, var(--teal-50) 50%, #fff 100%);
box-shadow:var(--shadow-lg);
display:grid;place-items:center;
border:1px solid rgba(15,79,77,.06);
}
.svc-illus::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(380px 220px at 75% 18%, rgba(63,205,199,.30), transparent 60%),
radial-gradient(320px 220px at 18% 82%, rgba(15,119,115,.20), transparent 55%);
pointer-events:none;
}
.svc-illus::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 14% 28%, rgba(15,119,115,.08) 0 1px, transparent 1.5px) 0 0/22px 22px,
radial-gradient(circle at 14% 28%, rgba(15,119,115,.08) 0 1px, transparent 1.5px) 11px 11px/22px 22px;
opacity:.4;mask-image:linear-gradient(135deg, black 0%, transparent 70%);
-webkit-mask-image:linear-gradient(135deg, black 0%, transparent 70%);
pointer-events:none;
}
.svc-illus .illus-icon{
position:relative;z-index:1;
width:62%;aspect-ratio:1;
background:#fff;border-radius:50%;
display:grid;place-items:center;
box-shadow:0 30px 80px rgba(11,59,58,.18), 0 8px 24px rgba(11,59,58,.08);
border:1px solid rgba(15,79,77,.08);
}
.svc-illus .illus-icon svg{
width:55%;height:55%;
color:var(--teal-700);stroke-width:1.4;
}
.svc-illus .illus-tag{
position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
background:#fff;color:var(--teal-900);
padding:10px 18px;border-radius:999px;
font-family:var(--font-display);font-weight:700;font-size:.86rem;
letter-spacing:.04em;
box-shadow:0 12px 30px rgba(11,59,58,.15);
white-space:nowrap;
z-index:2;
}
.svc-illus .illus-corner{
position:absolute;top:18px;right:18px;
background:var(--teal-900);color:#fff;
padding:8px 14px;border-radius:10px;
font-family:var(--font-display);font-weight:700;font-size:.74rem;
letter-spacing:.16em;text-transform:uppercase;
z-index:2;
}
.svc-illus .illus-corner.gold{background:var(--gold)}
/* In hero V2, swap photo card with svc-illus */
.svc-hero-v2 .svc-hero-photo .svc-illus{
width:100%;max-width:480px;
}
/* SERVICES LIST CAT-TABS V2 — full-width strip card with stats */
.svc-cat-tabs-strip{
background:linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 60%, var(--teal-700) 100%);
color:#fff;border-radius:var(--radius-lg);
padding:var(--s-3) var(--s-4);
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
box-shadow:var(--shadow);
margin:0 var(--s-3);
position:relative;overflow:hidden;
}
.svc-cat-tabs-strip::before{
content:"";position:absolute;inset:0;
background:radial-gradient(700px 300px at 100% 0%, rgba(63,205,199,.18), transparent 60%);
pointer-events:none;
}
.svc-cat-tabs-strip a{
position:relative;z-index:1;
display:flex;flex-direction:column;gap:6px;
padding:18px 22px;
color:#fff;text-decoration:none;
border-right:1px solid rgba(255,255,255,.10);
transition:transform .25s, background .25s;
}
.svc-cat-tabs-strip a:last-child{border-right:0}
.svc-cat-tabs-strip a:hover{
background:rgba(255,255,255,.06);
transform:translateY(-2px);
}
.svc-cat-tabs-strip a .tab-top{
display:flex;align-items:center;gap:10px;
font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.78);font-weight:700;
}
.svc-cat-tabs-strip a .tab-top svg{width:16px;height:16px;color:#3fcdc7}
.svc-cat-tabs-strip a .tab-name{
font-family:var(--font-display);font-weight:800;
font-size:1.5rem;line-height:1.05;letter-spacing:-.02em;
color:#fff;margin-top:6px;
}
.svc-cat-tabs-strip a .tab-count{
font-family:var(--font-display);font-weight:800;
font-size:2.4rem;line-height:1;color:#3fcdc7;
letter-spacing:-.03em;margin-top:8px;
}
.svc-cat-tabs-strip a .tab-count-label{
font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.65);font-weight:600;
}
/* ABOUT HERO V2 — full-bleed editorial */
.about-hero-v2{
position:relative;overflow:hidden;
background:
linear-gradient(135deg,#fff 0%, var(--bg-soft) 100%);
border-bottom:1px solid var(--line);padding:0;
}
.about-hero-v2::before{
content:"";position:absolute;top:-200px;right:-200px;
width:700px;height:700px;border-radius:50%;
background:radial-gradient(circle, rgba(63,205,199,.18), transparent 70%);
pointer-events:none;
}
.about-hero-v2::after{
content:"";position:absolute;bottom:-180px;left:-160px;
width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle, rgba(15,119,115,.12), transparent 70%);
pointer-events:none;
}
.about-hero-v2 .container{
max-width:var(--container);
padding:90px var(--s-3) 70px;
position:relative;z-index:1;
display:grid;grid-template-columns:1fr;gap:var(--s-4);
align-items:start;
}
.about-hero-v2 .editorial-row{
display:grid;grid-template-columns:.7fr .3fr;gap:var(--s-5);align-items:end;
}
.about-hero-v2 .small-label{
font-family:var(--font-display);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--teal-700);font-weight:700;margin-bottom:18px;
display:flex;align-items:center;gap:14px;
}
.about-hero-v2 .small-label::before{
content:"";width:36px;height:1px;background:var(--teal-500);
}
.about-hero-v2 h1{
font-family:var(--font-display-2);
font-size:clamp(2.6rem,6vw,5rem);line-height:.98;
letter-spacing:-.04em;color:var(--teal-900);
font-weight:600;
}
.about-hero-v2 h1 .accent{color:var(--teal-600);font-style:italic}
.about-hero-v2 .lead{
font-size:clamp(1.05rem,1.4vw,1.18rem);
margin-top:var(--s-3);max-width:560px;line-height:1.65;
}
.about-hero-v2 .since-card{
background:#fff;border:1px solid var(--line);
padding:var(--s-3);border-radius:var(--radius);
box-shadow:var(--shadow-sm);align-self:end;
}
.about-hero-v2 .since-card .since-row{
display:flex;align-items:baseline;gap:14px;margin-bottom:14px;
}
.about-hero-v2 .since-card .since-num{
font-family:var(--font-display);font-weight:800;
font-size:3.2rem;line-height:1;color:var(--teal-700);letter-spacing:-.04em;
}
.about-hero-v2 .since-card .since-label{
font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);font-weight:600;
}
.about-hero-v2 .since-card .since-list{
list-style:none;display:grid;gap:10px;font-size:.92rem;
padding:0;margin:0;border-top:1px dashed var(--line);padding-top:14px;
}
.about-hero-v2 .since-card .since-list li{display:flex;justify-content:space-between;color:var(--ink-2)}
.about-hero-v2 .since-card .since-list strong{color:var(--teal-900);font-family:var(--font-display)}
.about-hero-v2 .meta-strip{
margin-top:var(--s-3);
display:flex;flex-wrap:wrap;gap:var(--s-2);
padding-top:var(--s-3);border-top:1px solid var(--line);
}
.about-hero-v2 .meta-strip .ms-cell{
display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px;
}
.about-hero-v2 .meta-strip .ms-cell strong{
font-family:var(--font-display);font-weight:800;
font-size:1.6rem;color:var(--teal-700);letter-spacing:-.02em;
}
.about-hero-v2 .meta-strip .ms-cell span{
font-size:.78rem;letter-spacing:.10em;text-transform:uppercase;
color:var(--muted);font-weight:600;
}
/* RESPONSIVE for v5 */
@media (max-width:960px){
.svc-cat-tabs-strip{grid-template-columns:repeat(2,1fr);margin:0 var(--s-3)}
.svc-cat-tabs-strip a{border-right:0;border-bottom:1px solid rgba(255,255,255,.10)}
.svc-cat-tabs-strip a:nth-child(2n){border-right:0}
.svc-cat-tabs-strip a:nth-child(2n-1){border-right:1px solid rgba(255,255,255,.10)}
.about-hero-v2 .editorial-row{grid-template-columns:1fr;gap:var(--s-3)}
}
@media (max-width:560px){
.svc-cat-tabs-strip{grid-template-columns:1fr;margin:0 16px;padding:var(--s-2)}
.svc-cat-tabs-strip a{padding:14px 18px;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.10)}
.svc-cat-tabs-strip a:last-child{border-bottom:0}
.svc-cat-tabs-strip a .tab-name{font-size:1.2rem}
.svc-cat-tabs-strip a .tab-count{font-size:1.8rem}
.about-hero-v2 .container{padding:60px 18px 40px}
.about-hero-v2 h1{font-size:2.2rem}
.about-hero-v2 .meta-strip .ms-cell strong{font-size:1.3rem}
}
/* =========================================================
v6 — Anti-AI tone, fluid container, viewport hero,
shimmer load, breadcrumb v2, recovery v3, full-width
narrative, eyebrow consistency, blog dark fix, pricing
typography consistency
========================================================= */
/* SHIMMER — replaces the spinner. Body fades in smoothly when the page is ready. */
.page-loader{display:none!important} /* kill the splash entirely */
@keyframes shimmer-in{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
body{animation:shimmer-in .35s ease-out 1}
@media (prefers-reduced-motion:reduce){body{animation:none}}
/* Skeleton shimmer utility (used on cards/images while loading) */
.shim{
position:relative;overflow:hidden;
background:linear-gradient(90deg, var(--teal-50), #fff, var(--teal-50));
background-size:200% 100%;animation:shim-slide 1.6s linear infinite;
}
@keyframes shim-slide{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* HERO — fits in viewport (no scroll on first paint) */
.hero-v2{
min-height:calc(100vh - 78px - 40px); /* header + topbar */
padding:clamp(40px,4vw,80px) 0 clamp(40px,4vw,80px);
display:flex;align-items:center;
}
.hero-v2 .container{width:100%}
@media (max-width:960px){
.hero-v2{min-height:auto;padding:48px 0 60px}
}
/* Eyebrow — globally consistent everywhere */
.eyebrow,
.svc-pill,
.about-hero-v2 .small-label,
.svc-hero-v2 .svc-pill{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-display);
font-size:.78rem;letter-spacing:.16em;font-weight:700;
color:var(--teal-700);text-transform:uppercase;
background:var(--teal-100);padding:8px 14px;border-radius:999px;
margin-bottom:18px;border:0;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-500)}
/* Reset overrides */
.about-hero-v2 .small-label{
background:var(--teal-100);padding:8px 14px;border-radius:999px;
display:inline-flex;
}
.about-hero-v2 .small-label::before{display:none}
.svc-pill svg, .eyebrow svg{width:14px;height:14px;color:var(--teal-700)}
/* Inverted eyebrow on dark cards */
.cta-band .eyebrow,
.why-card .eyebrow,
.doc-practice-panel h2 + p ~ * .eyebrow,
.page-hero.doctor-hero .eyebrow{
background:rgba(255,255,255,.14);color:#fff;
}
/* BREADCRUMBS V2 — visual chip-trail */
.breadcrumbs{
display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:.84rem;color:var(--muted);margin-bottom:18px;
background:var(--teal-50);
padding:8px 14px;border-radius:999px;
border:1px solid var(--teal-100);
}
.breadcrumbs a{
color:var(--teal-700);font-weight:600;text-decoration:none;
display:inline-flex;align-items:center;gap:6px;
}
.breadcrumbs a:hover{color:var(--teal-500)}
.breadcrumbs a:not(:last-child)::after,
.breadcrumbs span:not(:last-child)::after{
content:"";display:inline-block;width:14px;height:14px;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain;background-repeat:no-repeat;
margin-left:8px;
}
/* Dark-hero breadcrumbs */
.page-hero.doctor-hero .breadcrumbs,
.svc-cat-tabs-strip + section .breadcrumbs{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.14);
color:rgba(255,255,255,.78);
}
.page-hero.doctor-hero .breadcrumbs a{color:#fff}
/* HOME page · breadcrumb separator override (older non-chip style) */
.svc-list-hero .breadcrumbs,
.about-hero-v2 .breadcrumbs,
.faq-hero .breadcrumbs{
background:#fff;border:1px solid var(--line);
}
/* SERVICE DETAIL · full-width narrative (no side image), more prominent */
.svc-narrative{display:block;max-width:var(--container-narrow);margin:0 auto}
.svc-narrative .svc-narrative-text{
display:grid;gap:18px;
font-size:clamp(1.05rem, 1.3vw, 1.18rem);line-height:1.75;color:var(--ink-2);
max-width:880px;
}
.svc-narrative .svc-narrative-text p{font-size:inherit}
.svc-narrative .svc-narrative-text p:first-child::first-line{
font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
}
.svc-narrative .svc-narrative-image{display:none}
/* SERVICE DETAIL · hero photo card replaces SVG sidebar (already exists), but hide
the gradient illustration: show a procedure-relevant image card instead */
.svc-hero-v2 .svc-hero-photo .svc-illus{
display:none;
}
.svc-hero-v2 .svc-hero-photo .svc-photo-card{
position:relative;width:100%;max-width:480px;
aspect-ratio:4/5;border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-lg);
background:var(--grad);
}
.svc-hero-v2 .svc-hero-photo .svc-photo-card img{width:100%;height:100%;object-fit:cover;display:block}
.svc-hero-v2 .svc-hero-photo .svc-photo-card::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top, rgba(11,59,58,.45), rgba(0,0,0,0) 50%);
}
/* RECOVERY TIMELINE V3 — clean stepper, no broken-bar look */
.svc-recovery-timeline{padding:0;position:relative}
.svc-recovery-timeline .timeline-track{display:none}
.svc-recovery-timeline .timeline-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;
position:relative;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);overflow:hidden;
}
.svc-recovery-timeline .timeline-grid > .step{
background:transparent;border:0;border-radius:0;box-shadow:none;
padding:28px 24px;
position:relative;
display:flex;flex-direction:column;gap:10px;
}
.svc-recovery-timeline .timeline-grid > .step + .step{
border-left:1px solid var(--line);
}
.svc-recovery-timeline .timeline-grid > .step::before{
content:"";position:static;width:auto;height:auto;
background:none;box-shadow:none;border:0;
display:none;
}
/* Vertical step indicator at top of each column */
.svc-recovery-timeline .timeline-grid > .step::after{
content:"";display:block;width:34px;height:34px;border-radius:10px;
background:linear-gradient(135deg,var(--teal-100),var(--teal-50));
position:relative;
border:1px solid var(--teal-300);
}
.svc-recovery-timeline .timeline-grid > .step:nth-child(1)::after{
background:linear-gradient(135deg, var(--teal-200, var(--teal-100)), var(--teal-50));
}
.svc-recovery-timeline .timeline-grid > .step:nth-child(2)::after{
background:linear-gradient(135deg, var(--teal-300), var(--teal-100));
}
.svc-recovery-timeline .timeline-grid > .step:nth-child(3)::after{
background:linear-gradient(135deg, var(--teal-500), var(--teal-300));
}
.svc-recovery-timeline .timeline-grid > .step:nth-child(4)::after{
background:linear-gradient(135deg, var(--teal-700), var(--teal-500));
}
/* Re-style the step number/label as the dot row */
.svc-recovery-timeline .timeline-grid > .step h3{
text-align:left;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--teal-700);font-weight:700;margin:0;
}
.svc-recovery-timeline .timeline-grid > .step p{
text-align:left;font-size:.95rem;color:var(--ink-2);margin:0;line-height:1.55;
}
@media (max-width:960px){
.svc-recovery-timeline .timeline-grid{grid-template-columns:repeat(2,1fr)}
.svc-recovery-timeline .timeline-grid > .step:nth-child(2){border-left:1px solid var(--line)}
.svc-recovery-timeline .timeline-grid > .step:nth-child(3){border-top:1px solid var(--line);border-left:0}
.svc-recovery-timeline .timeline-grid > .step:nth-child(4){border-top:1px solid var(--line)}
}
@media (max-width:560px){
.svc-recovery-timeline .timeline-grid{grid-template-columns:1fr}
.svc-recovery-timeline .timeline-grid > .step + .step{border-left:0;border-top:1px solid var(--line)}
}
/* PRICING + WHY HEMANI — typography consistency, no all-caps */
.svc-compare-pair > div h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.4rem, 2.4vw, 1.8rem);
line-height:1.18;letter-spacing:-.022em;
text-transform:none;
}
.svc-compare-pair .cost-pill,
.svc-compare-pair .eyebrow{
text-transform:none;
font-size:.82rem;letter-spacing:.04em;
background:var(--teal-100);color:var(--teal-700);
padding:7px 14px;border-radius:999px;
font-family:var(--font-body);font-weight:700;
display:inline-flex;align-items:center;gap:8px;
}
.svc-compare-pair .why-card .eyebrow{
background:rgba(255,255,255,.16);color:#fff;
}
.svc-compare-pair > div ul.feature-list li{font-size:.96rem;line-height:1.55}
/* BLOG DETAIL · readable text on dark CTA + post-cta */
.post-cta strong, .post-cta p{color:var(--ink)}
.post-cta a.cta{color:#fff!important}
.aside-card[style*="background:linear-gradient(135deg,#127773,#1bb6b0)"] *{color:#fff!important}
.aside-card[style*="background:linear-gradient(135deg,#127773,#1bb6b0)"] .cta{
background:#fff!important;color:var(--teal-800)!important;
}
/* CONTACT page · phone-only card (replaces form) */
.contact-only{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:start;
}
.call-card{
background:linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 100%);
color:#fff;border-radius:var(--radius-lg);
padding:var(--s-4);
position:relative;overflow:hidden;
box-shadow:var(--shadow-lg);
}
.call-card::before{
content:"";position:absolute;top:-100px;right:-100px;
width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle, rgba(63,205,199,.20), transparent 70%);
pointer-events:none;
}
.call-card .ic-big{
width:64px;height:64px;border-radius:18px;
background:rgba(255,255,255,.12);color:#3fcdc7;
display:grid;place-items:center;margin-bottom:var(--s-2);position:relative;
}
.call-card .ic-big svg{width:30px;height:30px}
.call-card h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin-bottom:14px;position:relative}
.call-card p{color:rgba(255,255,255,.85);font-size:1.02rem;line-height:1.6;margin-bottom:var(--s-3);position:relative}
.call-card .phone-row{
display:flex;flex-direction:column;gap:14px;position:relative;
}
.call-card .phone-row a{
background:#fff;color:var(--teal-900);
padding:18px 22px;border-radius:14px;
display:flex;justify-content:space-between;align-items:center;
font-family:var(--font-display);font-weight:700;font-size:1.15rem;
text-decoration:none;transition:transform .2s, box-shadow .2s;
}
.call-card .phone-row a:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.18)}
.call-card .phone-row a small{color:var(--muted);font-size:.78rem;font-weight:500;display:block;margin-top:4px;font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.call-card .phone-row a .arrow{
width:36px;height:36px;border-radius:10px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.call-card .phone-row a .arrow svg{width:18px;height:18px}
.call-card .wa-row{
display:inline-flex;align-items:center;gap:10px;margin-top:var(--s-3);position:relative;
background:#25d366;color:#fff;
padding:14px 22px;border-radius:14px;
font-weight:700;text-decoration:none;
}
.call-card .wa-row svg{width:20px;height:20px}
.visit-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:var(--s-4);box-shadow:var(--shadow-sm);
display:grid;gap:var(--s-2);
}
.visit-card h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:6px}
.visit-card .vc-row{
display:flex;gap:14px;align-items:flex-start;padding:14px 0;
border-bottom:1px dashed var(--line);
}
.visit-card .vc-row:last-child{border-bottom:0}
.visit-card .vc-row .ic{
width:42px;height:42px;border-radius:11px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.visit-card .vc-row .ic svg{width:20px;height:20px}
.visit-card .vc-row strong{color:var(--teal-900);font-family:var(--font-display);font-size:.95rem;display:block;margin-bottom:4px}
.visit-card .vc-row p, .visit-card .vc-row a{color:var(--ink-2);font-size:.95rem;line-height:1.55;text-decoration:none}
.visit-card .vc-row a{color:var(--teal-700);font-weight:600}
.visit-card .vc-row a:hover{color:var(--teal-500);text-decoration:underline}
@media (max-width:960px){
.contact-only{grid-template-columns:1fr;gap:var(--s-3)}
}
/* HOME breadcrumb (page-hero header) - inverted on dark backgrounds */
/* RESPONSIVE — better mobile/tablet container width */
@media (max-width:960px){
:root{--container:96vw;--container-narrow:96vw}
.container{padding:0 16px}
}
@media (max-width:560px){
:root{--container:100%;--container-narrow:100%}
.container{padding:0 14px}
.hero-v2 .container{padding:0 14px}
}
/* =========================================================
v7 — Service hero v3, recovery v4, scroll-bg, topbar SVG
icons, breadcrumb simple, hero collage z-index fix,
pricing/why auto width, contact equal heights
========================================================= */
/* HOME HERO COLLAGE — fix overlap, OPD card behind image, image on top */
.hero-v2 .hero-collage{position:relative;isolation:isolate}
.hero-v2 .hero-collage .pri{z-index:2}
.hero-v2 .hero-collage .sec{z-index:3}
.hero-v2 .hero-collage .float-card{z-index:1;left:-10px;top:18px}
.hero-v2 .hero-collage .rating-chip{z-index:4}
@media (max-width:960px){
.hero-v2 .hero-collage .float-card{left:0}
}
/* HEADER STATS SPAN — match h1 size hierarchy (small but bold) */
.hero-stats-band .stat span{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.05rem, 1.4vw, 1.4rem);
color:var(--ink);letter-spacing:-.01em;
line-height:1.3;
}
/* TOPBAR — SVG icons replacing emoji, consistent with rest of site */
.topbar .left, .topbar .right{align-items:center}
.topbar .left span, .topbar .right a{
display:inline-flex;align-items:center;gap:8px;
}
.topbar .ic{
width:14px;height:14px;color:var(--teal-300);flex-shrink:0;
}
.topbar a{text-decoration:none}
/* BREADCRUMB SIMPLE — strip pill chrome, keep just the trail */
.breadcrumbs{
background:transparent;border:0;padding:0;
display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
font-size:.86rem;color:var(--muted);margin-bottom:14px;
font-family:var(--font-body);
}
.breadcrumbs a{
color:var(--teal-700);font-weight:600;
text-decoration:none;
}
.breadcrumbs a:hover{color:var(--teal-500)}
.breadcrumbs a:not(:last-child)::after,
.breadcrumbs span:not(:last-child)::after{
content:"/";display:inline-block;margin:0 6px 0 8px;
color:var(--muted);font-weight:400;background:none;width:auto;height:auto;
}
/* Override v6 chevron icon */
.breadcrumbs a::after{background-image:none!important}
/* Inverted on dark heroes */
.page-hero.doctor-hero .breadcrumbs{color:rgba(255,255,255,.65)}
.page-hero.doctor-hero .breadcrumbs a{color:#fff}
.page-hero.doctor-hero .breadcrumbs a:not(:last-child)::after,
.page-hero.doctor-hero .breadcrumbs span:not(:last-child)::after{color:rgba(255,255,255,.45)}
.svc-list-hero .breadcrumbs,
.about-hero-v2 .breadcrumbs,
.faq-hero .breadcrumbs{background:transparent;border:0}
/* ABOUT HERO · small-label tag fix (no full-width) */
.about-hero-v2 .small-label{
display:inline-flex;align-self:flex-start;width:max-content;
background:var(--teal-100);color:var(--teal-700);
padding:6px 14px;border-radius:999px;
font-family:var(--font-display);font-size:.74rem;
letter-spacing:.18em;text-transform:uppercase;font-weight:700;
margin-bottom:18px;
}
/* SERVICE DETAIL HERO V3 — gradient banner over the page top, completely
different layout from home. Centered text + procedure pill + 4-fact strip
on a deep teal banner with abstract pattern. */
.svc-hero-v2{
background:
radial-gradient(800px 380px at 80% 0%, rgba(63,205,199,.20), transparent 60%),
radial-gradient(600px 360px at 0% 100%, rgba(15,119,115,.14), transparent 60%),
linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
}
.svc-hero-v2 .svc-hero-grid{
display:block;
padding:clamp(40px, 5vw, 80px) clamp(16px, 3vw, 40px);
max-width:var(--container);margin:0 auto;
min-height:auto;
}
.svc-hero-v2 .svc-hero-text{
max-width:920px;padding:0;margin:0 auto 0 0;
}
.svc-hero-v2 .breadcrumbs{margin-bottom:14px}
.svc-hero-v2 .svc-pill{margin-bottom:18px;background:#fff;border:1px solid var(--line)}
.svc-hero-v2 h1{
font-size:clamp(2.2rem, 4.6vw, 3.6rem);line-height:1.04;
margin-bottom:18px;max-width:880px;
}
.svc-hero-v2 .svc-lead{
font-size:clamp(1.05rem, 1.35vw, 1.2rem);
line-height:1.7;color:var(--ink-2);max-width:760px;margin-bottom:var(--s-3);
}
.svc-hero-v2 .hero-actions{margin-bottom:var(--s-4)}
.svc-hero-v2 .svc-fact-strip{
margin-top:var(--s-3);max-width:920px;
background:#fff;border:1px solid var(--line);
box-shadow:0 18px 46px rgba(11,59,58,.08);
}
/* Hide the photo/illustration sidebar entirely in v3 */
.svc-hero-v2 .svc-hero-photo{display:none!important}
/* SERVICE DETAIL · second section consistency (svc-narrative)
Full-width container (matches other sections), left-aligned text */
.svc-narrative{
max-width:var(--container);
margin:0 auto;
padding:0 clamp(16px, 2vw, 32px);
}
.svc-narrative .svc-narrative-text{
max-width:none;margin:0;
text-align:left;
}
.svc-narrative .svc-narrative-text p{text-align:left;margin:0 0 14px}
/* All sections inside service detail use a single consistent inner container */
.svc-hero-v2 + .section .container,
.section + .section .container{
max-width:var(--container);
}
/* RECOVERY V4 — bold timeline with numbered chips & connecting line */
.svc-recovery-timeline{padding:0;position:relative}
.svc-recovery-timeline .timeline-track{
display:block;position:absolute;top:42px;left:8%;right:8%;height:2px;
background:linear-gradient(90deg,var(--teal-300),var(--teal-500),var(--teal-700));
z-index:0;
}
.svc-recovery-timeline .timeline-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
background:transparent;border:0;box-shadow:none;
position:relative;z-index:1;margin-top:0;padding:0;
}
.svc-recovery-timeline .timeline-grid > .step{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-3);box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;gap:14px;
position:relative;
}
.svc-recovery-timeline .timeline-grid > .step + .step{border-left:1px solid var(--line)}
.svc-recovery-timeline .timeline-grid > .step::before,
.svc-recovery-timeline .timeline-grid > .step::after{display:none}
/* Numbered chip */
.svc-recovery-timeline .timeline-grid > .step h3{
display:inline-flex;align-items:center;gap:10px;
font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--teal-700);font-weight:700;margin:0;
text-align:left;
}
.svc-recovery-timeline .timeline-grid > .step h3::before{
content:counter(step, decimal-leading-zero);counter-increment:step;
width:34px;height:34px;border-radius:10px;
background:var(--grad);color:#fff;
font-family:var(--font-display);font-weight:800;font-size:.8rem;
display:grid;place-items:center;letter-spacing:0;flex-shrink:0;
}
.svc-recovery-timeline .timeline-grid{counter-reset:step}
.svc-recovery-timeline .timeline-grid > .step p{
font-size:.95rem;color:var(--ink-2);line-height:1.6;margin:0;text-align:left;
}
@media (max-width:960px){
.svc-recovery-timeline .timeline-track{display:none}
.svc-recovery-timeline .timeline-grid{grid-template-columns:repeat(2,1fr)}
.svc-recovery-timeline .timeline-grid > .step + .step{border-left:1px solid var(--line)}
}
@media (max-width:560px){
.svc-recovery-timeline .timeline-grid{grid-template-columns:1fr}
.svc-recovery-timeline .timeline-grid > .step + .step{border-left:0}
}
/* PRICING + WHY HEMANI — auto-width borders on inner content (not full-stretch) */
.svc-compare-pair > div{align-items:flex-start}
.svc-compare-pair > div h2,
.svc-compare-pair > div .eyebrow,
.svc-compare-pair > div .cost-pill,
.svc-compare-pair > div .feature-list,
.svc-compare-pair > div .cta{
align-self:flex-start;
}
.svc-compare-pair .cost-pill,
.svc-compare-pair .why-card .eyebrow{
display:inline-flex;width:max-content;max-width:100%;
}
.svc-compare-pair > div .cta{width:max-content}
/* SERVICES LIST · cat-tabs-strip new hover effect (slide accent bar) */
.svc-cat-tabs-strip a{
position:relative;overflow:hidden;
}
.svc-cat-tabs-strip a::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:#3fcdc7;
transform:scaleX(0);transform-origin:left center;
transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.svc-cat-tabs-strip a::after{
content:"";position:absolute;inset:0;
background:radial-gradient(220px 120px at 50% 100%, rgba(63,205,199,.12), transparent 60%);
opacity:0;transition:opacity .25s;
pointer-events:none;
}
.svc-cat-tabs-strip a:hover{transform:none;background:transparent}
.svc-cat-tabs-strip a:hover::before{transform:scaleX(1)}
.svc-cat-tabs-strip a:hover::after{opacity:1}
.svc-cat-tabs-strip a:hover .tab-name{color:#3fcdc7}
.svc-cat-tabs-strip a:hover .tab-count{transform:translateY(-2px)}
.svc-cat-tabs-strip a .tab-name,
.svc-cat-tabs-strip a .tab-count{transition:transform .25s, color .25s}
/* CONTACT · equal heights, map 50% */
.contact-only{align-items:stretch;grid-auto-rows:1fr}
.contact-only .call-card,
.contact-only .visit-card{height:100%;display:flex;flex-direction:column}
.contact-only .visit-card .vc-row:last-child{margin-top:auto}
/* Map at 50% height */
.map-wrap{aspect-ratio:auto;height:clamp(220px, 32vw, 360px)}
/* Footer address — kill the dashed underline */
footer .contact-line a{border-bottom:0!important;text-decoration:none}
.visit-card .vc-row a{border-bottom:0!important}
footer ul li a[href*="google.com/maps"]{border-bottom:0!important}
/* SCROLL-DRIVEN BACKGROUND TRANSITIONS · subtle hue shift between sections */
.section, .svc-hero-v2, .hero-v2, .page-hero, .svc-list-hero{
transition:background-color .8s ease;
}
/* Section active state — picked up by JS via IntersectionObserver */
body.scroll-progress{
/* Drive a global hue rotation by scroll position */
transition:background-color 1.2s linear;
}
body{
background:#fff;
background-image:
linear-gradient(180deg,
#ffffff 0%,
#f7fbfa 18%,
#ffffff 36%,
#f1fbfa 56%,
#ffffff 76%,
#f7fbfa 100%
);
background-attachment:fixed;
background-size:100% 100%;
}
/* Disable the gradient on opaque sections so they keep their own bg */
.hero, .hero-v2, .stats-banner, .cta-band, footer,
.section.section-soft, .svc-cat-tabs-strip, .doctor-hero{
/* These already paint their own backgrounds */
}
/* ABOUT US · "Our Values" creative redesign — break out of the 3-card pattern */
section.section.section-soft:has(.section-head .eyebrow:has(+ h2:contains("What we promise"))) .grid-3{
/* Selector unsupported in browsers — handled via class below */
}
.values-quilt{
display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--s-3);
margin-top:var(--s-3);
}
.values-quilt .vt{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s-3);box-shadow:var(--shadow-sm);
display:flex;flex-direction:column;gap:var(--s-1);
position:relative;overflow:hidden;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.values-quilt .vt:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal-400)}
.values-quilt .vt-1{grid-column:span 5;background:linear-gradient(135deg, var(--teal-100), #fff)}
.values-quilt .vt-2{grid-column:span 4}
.values-quilt .vt-3{grid-column:span 3}
.values-quilt .vt-4{grid-column:span 4}
.values-quilt .vt-5{grid-column:span 3;background:linear-gradient(135deg, var(--teal-900), var(--teal-800));color:#fff}
.values-quilt .vt-5 h3{color:#fff}
.values-quilt .vt-5 p{color:rgba(255,255,255,.85)}
.values-quilt .vt-6{grid-column:span 5}
.values-quilt .vt h3{font-size:1.15rem;color:var(--teal-900);margin:0}
.values-quilt .vt p{font-size:.95rem;line-height:1.6;color:var(--ink-2);margin:0}
.values-quilt .vt .ic{
width:46px;height:46px;border-radius:12px;
background:var(--teal-100);color:var(--teal-700);
display:grid;place-items:center;flex-shrink:0;
}
.values-quilt .vt .ic svg{width:22px;height:22px;stroke-width:1.8}
.values-quilt .vt-5 .ic{background:rgba(255,255,255,.14);color:#3fcdc7}
@media (max-width:960px){
.values-quilt{grid-template-columns:repeat(6, 1fr)}
.values-quilt .vt-1, .values-quilt .vt-6{grid-column:span 6}
.values-quilt .vt-2, .values-quilt .vt-3, .values-quilt .vt-4, .values-quilt .vt-5{grid-column:span 3}
}
@media (max-width:560px){
.values-quilt{grid-template-columns:1fr}
.values-quilt .vt{grid-column:span 1!important}
}
/* DOCTORS · 3rd doctor card without CTA (visiting consultant slot) */
.doc-card.no-cta .hero-actions{display:none}
.doc-card.no-cta{opacity:.95}
/* SERVICE DETAIL · equipment-style "what's important to know" highlight panel */
.svc-highlight{
background:linear-gradient(135deg, var(--teal-50), #fff);
border:1px solid var(--teal-200, var(--teal-100));
border-left:4px solid var(--teal-500);
border-radius:var(--radius);
padding:var(--s-3) var(--s-3);
display:grid;grid-template-columns:auto 1fr;gap:var(--s-2);
align-items:flex-start;
margin:var(--s-3) 0;max-width:880px;
}
.svc-highlight .hl-ic{
width:42px;height:42px;border-radius:11px;
background:var(--teal-500);color:#fff;
display:grid;place-items:center;flex-shrink:0;
}
.svc-highlight .hl-ic svg{width:22px;height:22px}
.svc-highlight strong{color:var(--teal-900);font-family:var(--font-display);font-size:1.05rem;display:block;margin-bottom:6px}
.svc-highlight p{font-size:.96rem;line-height:1.6;color:var(--ink-2);margin:0}