/* Dr. Shehryar Niazi - Local SEO prototype design system
   Responsive: mobile 360+, tablet 768+, laptop 1024+, desktop 1280+, wide 1600+ */

:root{
  --teal-900:#083b38; --teal-700:#0e5c56; --teal-600:#127a70; --teal-500:#1a998c;
  --gold-600:#c08a2d; --gold-500:#d7a53f; --gold-100:#f6ecd6;
  --ink:#14201f; --body:#39494a; --muted:#6c7b7c;
  --line:#e3e9e7; --bg:#ffffff; --bg-soft:#f5f8f6; --bg-tint:#eef4f1;
  --white:#fff;
  --shadow-sm:0 1px 3px rgba(8,59,56,.08),0 1px 2px rgba(8,59,56,.06);
  --shadow:0 10px 30px -12px rgba(8,59,56,.25);
  --shadow-lg:0 24px 60px -20px rgba(8,59,56,.35);
  --radius:14px; --radius-lg:22px; --radius-sm:9px;
  --wrap:1200px; --gap:clamp(1rem,3vw,2rem);
  /* Type system (2026-08-07, user: medical-industry look): Figtree for all headings,
     Jost for everything else (body, nav, buttons, UI). Playfair/Cormorant retired -
     the editorial serif read as fashion, not healthcare. --serif keeps its name so the
     ~20 component rules using it did not need touching; it now resolves to Figtree. */
  --sans:"Jost",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --serif:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --serif-body:"Jost",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--bg);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-600);text-decoration:none}
a:hover{color:var(--teal-700)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.18;font-weight:600;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.35rem + 3.2vw,3.45rem);letter-spacing:-.018em;font-weight:700;line-height:1.12}
h2{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.35rem);letter-spacing:-.012em;font-weight:600}
h3{font-size:clamp(1.18rem,1.02rem + .68vw,1.45rem);font-weight:600}
/* Body copy, nav, buttons and all UI = Jost (inherited from body) */
p{margin:0 0 1.1em}
.lf-note,.hero-cta-note,.foot-credit,.wa-modal-note,.foot-bottom span{
  font-weight:400;font-size:.86rem;letter-spacing:0}
.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
/* The lead is the first thing read on every page, so it gets real presence:
   larger, airier and slightly tightened tracking so it reads as an intro, not body copy. */
/* Inner pages: the intro paragraph is just a larger version of the page's body type,
   so it sits consistently with the copy underneath it. */
.lead{font-family:var(--sans);font-weight:400;
  font-size:clamp(1.1rem,1rem + .52vw,1.32rem);color:var(--ink);line-height:1.62;
  letter-spacing:0;max-width:66ch}
/* Home hero: clean light Jost, sized between body and the old Cormorant scale
   (Jost's x-height is normal, so the Cormorant size bump is no longer needed). */
.hero .lead{font-family:var(--sans);font-weight:300;
  font-size:clamp(1.14rem,1.02rem + .5vw,1.42rem);line-height:1.58;
  letter-spacing:.006em;color:#dceeea;max-width:58ch}
.eyebrow{font:600 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin:0 0 1rem}
.center{text-align:center}
.muted{color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;
  font-size:1rem;padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold-500);color:#3a2a06;box-shadow:0 8px 20px -8px rgba(192,138,45,.7)}
.btn-primary:hover{background:var(--gold-600);color:#3a2a06}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--white)}
/* Readable "Surgery in <city>" buttons on LIGHT sections (btn-ghost was near-invisible there) */
.btn-city{background:#fff;color:var(--teal-700);border:1.5px solid var(--teal-600);font-weight:600}
.btn-city:hover{background:var(--teal-700);color:#fff;border-color:var(--teal-700)}
.city-links{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.btn-teal{background:var(--teal-700);color:var(--white)}
.btn-teal:hover{background:var(--teal-900);color:#fff}
.btn-lg{padding:1rem 1.9rem;font-size:1.06rem}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar{background:var(--teal-900);color:#cfe6e2;font-size:.85rem}
.topbar .wrap{display:flex;gap:1.2rem;justify-content:space-between;align-items:center;padding:.4rem 0;flex-wrap:wrap}
.topbar a{color:#eaf6f3}
.topbar .tb-right{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.05;font-family:var(--serif);color:var(--ink)}
.brand b{font-size:1.15rem;font-weight:600}
.brand span{font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-600);margin-top:.25rem}
.menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.menu > li > a{position:relative;display:block;padding:.62rem .9rem;color:var(--teal-900);border-radius:8px;
  font-family:var(--sans);font-size:.94rem;font-weight:600;letter-spacing:.005em;
  transition:color .15s ease,background .15s ease}
.menu > li > a:hover{background:var(--bg-tint);color:var(--teal-600)}
/* Hover underline lives on ::before - ::after is already the dropdown chevron and the two
   would otherwise collide on the same pseudo-element. */
.menu > li > a::before{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.28rem;height:2px;
  border-radius:2px;background:var(--teal-500);transform:scaleX(0);transition:transform .18s ease}
.menu > li > a:hover::before,.menu > li.has-sub.open > a::before{transform:scaleX(1)}
.has-sub > a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:270px;background:var(--white);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;list-style:none;margin:0}
.menu > li:hover .submenu,.menu > li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:.55rem .75rem;border-radius:9px;color:var(--body);font-size:.93rem;font-weight:500}
.submenu a:hover{background:var(--bg-tint);color:var(--teal-700)}
.submenu .grp{font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);padding:.6rem .75rem .25rem}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.5rem}
.hamburger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}

/* Hero */
.hero{position:relative;color:#eaf6f3;background:
  radial-gradient(1200px 500px at 80% -10%,rgba(215,165,63,.22),transparent),
  linear-gradient(160deg,var(--teal-900),var(--teal-700))}
.hero .wrap{padding:clamp(2.6rem,6vw,5rem) 1.1rem clamp(3rem,7vw,5.5rem);display:grid;gap:2.5rem;grid-template-columns:1.15fr .85fr;align-items:center}
.hero h1{color:#fff}
.hero .lead{color:#d3e7e3}
.hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.4rem .85rem;font-size:.86rem;font-weight:600;color:#eaf6f3}
/* Hero trust badges: glass pill with a gold accent so they read as proof points, not plain text */
.hero-badges .chip{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.3);padding:.55rem 1.05rem;font-size:.9rem;color:#fff;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(3px);transition:transform .18s ease,box-shadow .18s ease}
.hero-badges .chip:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.hero-badges .chip svg,.hero-badges .chip .ic{color:var(--gold-500)}
.hero-badges .chip:first-child{border-color:rgba(215,165,63,.55);
  background:linear-gradient(180deg,rgba(215,165,63,.24),rgba(215,165,63,.1))}
@media(prefers-reduced-motion:reduce){.hero-badges .chip{transition:none}.hero-badges .chip:hover{transform:none}}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);
  padding:1.5rem;backdrop-filter:blur(6px)}
.hero-card h3{color:#fff;font-size:1.15rem}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
.stat b{font-family:var(--serif);font-size:1.9rem;color:var(--gold-500);display:block;line-height:1}
.stat span{font-size:.82rem;color:#cfe6e2}

/* Sections */
section{padding:clamp(2.6rem,6vw,4.6rem) 0}
.sec-head{max-width:720px;margin:0 auto clamp(1.6rem,4vw,2.6rem)}
.sec-soft{background:var(--bg-soft)}
.sec-tint{background:var(--bg-tint)}

/* Cards grid */
.grid{display:grid;gap:1.2rem}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--bg-tint);color:var(--teal-600);
  display:grid;place-items:center;margin-bottom:1rem;font-size:1.4rem}
.card h3{margin-bottom:.4rem}
.card p{font-size:.96rem;margin-bottom:1rem}
.card .more{margin-top:auto;font-weight:600;color:var(--teal-700);font-size:.95rem}
.card .more::after{content:" \2192"}

/* Content + sidebar layout */
.layout{display:grid;grid-template-columns:1fr 330px;gap:2.5rem;align-items:start}
.prose h2{margin-top:2rem}
.prose ul{padding-left:1.1rem}
.prose li{margin:.35rem 0}
.aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.2rem}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.side-card .sc-head{background:var(--teal-700);color:#fff;padding:.9rem 1.1rem;font:600 1rem/1.2 var(--serif)}
.side-menu{list-style:none;margin:0;padding:.4rem}
.side-menu a{display:block;padding:.6rem .8rem;border-radius:9px;color:var(--body);font-size:.93rem;font-weight:500}
.side-menu a:hover,.side-menu a.active{background:var(--bg-tint);color:var(--teal-700)}
.side-menu a.active{font-weight:700}
.book-card{background:linear-gradient(160deg,var(--teal-700),var(--teal-900));color:#eaf6f3;padding:1.4rem;border-radius:var(--radius);text-align:center}
.book-card h3{color:#fff}
.book-card p{font-size:.92rem;color:#cfe6e2}

/* Breadcrumb */
.crumb{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.85rem 0;font-size:.86rem}
.crumb li+li::before{content:"\203A";margin-right:.4rem;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb [aria-current]{color:var(--ink);font-weight:600}

/* CTA band */
.cta-band{background:#0e5c56;color:#fff;text-align:center;padding:clamp(40px,6vw,56px) 0}
.cta-band h2{color:#fff;font-family:var(--serif);font-weight:500}
.cta-band p{color:rgba(255,255,255,.78);max-width:640px;margin-inline:auto}
.cta-eyebrow{color:rgba(255,255,255,.62)}
.cta-actions{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.4rem}

/* Location cards */
.loc-card{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.loc-map{aspect-ratio:16/10;background:var(--bg-tint);border:0;width:100%}
.loc-body{padding:1.5rem}
.nap{list-style:none;margin:1rem 0;padding:0;font-size:.95rem}
.nap li{display:flex;gap:.6rem;padding:.35rem 0;align-items:flex-start}
.nap .k{color:var(--gold-600);font-weight:700;min-width:1.3rem}
.badge-rate{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold-100);color:#7a5a12;
  font-weight:700;font-size:.85rem;padding:.3rem .7rem;border-radius:999px}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:.7rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal-600);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 1.2rem 1.1rem;color:var(--body)}

/* Trust strip */
.trust{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:center;text-align:center}
.trust .t{flex:1 1 180px}
.trust b{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem+1.4vw,2.3rem);color:var(--teal-700);display:block}
.trust span{font-size:.9rem;color:var(--muted)}

/* Footer */
.site-footer{background:var(--teal-900);color:#bcd6d1;padding:clamp(2.6rem,6vw,4rem) 0 2rem;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1.7fr 1.1fr 1.2fr;gap:2rem}
.site-footer h4{color:#fff;font-size:1.02rem;margin-bottom:.9rem}
.site-footer a{color:#bcd6d1}
.site-footer a:hover{color:#fff}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin:.4rem 0}
/* Services list runs in 2 columns on every size, with its heading centred over both */
.foot-list--2col{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.2rem}
.foot-list--2col li{margin:.35rem 0}
/* Centred over the two sub-columns on wide screens; on a single-column mobile footer it must
   sit left like every other heading, otherwise it reads as misaligned. */
.foot-services h4{text-align:center}
@media (max-width:560px){.foot-services h4{text-align:left}}
/* Footer brand: white signature with the credential lines centred underneath it */
.foot-brand{display:block;width:max-content;max-width:100%;margin:0 0 1.2rem;text-align:center}
.foot-brand img{width:100%;max-width:290px;height:auto;display:block;margin:0 auto}
.foot-tag{display:block;margin-top:.55rem;font-family:var(--sans);text-transform:uppercase;line-height:1.6}
.foot-tag .bt-l1{display:block;font-size:.6rem;font-weight:700;letter-spacing:.13em;color:#eaf6f3}
.foot-tag .bt-l2{display:block;font-size:.56rem;font-weight:600;letter-spacing:.11em;color:var(--gold-500)}
@media (max-width:560px){
  .foot-brand{margin-inline:auto}
  .foot-brand img{max-width:250px}
  .foot-tag .bt-l1{font-size:.55rem;letter-spacing:.1em}
  .foot-tag .bt-l2{font-size:.52rem;letter-spacing:.09em}
}
.foot-social{display:flex;gap:.6rem;margin-top:1.1rem}
.foot-social .soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .2s,transform .2s}
.foot-social .soc:hover{background:var(--gold-500);color:#3a2a06;transform:translateY(-2px)}
.foot-social .soc svg{width:18px;height:18px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8fb3ad;font-size:.85rem}
.foot-credit a{color:#cfe6e2;text-decoration:underline;text-underline-offset:3px}
.foot-credit a:hover{color:#fff}
@media (max-width:560px){.foot-bottom{justify-content:center;text-align:center}}

/* Sticky mobile call bar */
.callbar{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:1.6rem}
  .hero-media{order:-1;justify-content:center}   /* show the doctor photo FIRST on stacked hero */
  .layout{grid-template-columns:1fr}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .side-card,.book-card{flex:1 1 260px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* Mobile header stays clean: logo + hamburger only. The booking CTA is already present
     in the sticky call bar and repeated down the page, so it is not duplicated up here
     (it also used to push the header row wide enough to scroll the whole page sideways). */
  .menu,.nav-cta .btn-teal,.nav-cta .wa-btn{display:none}
  .hamburger{display:flex}
  .cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cols-3,.cols-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .topbar{display:none}
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px -8px rgba(8,59,56,.25)}
  .callbar a,.callbar button{flex:1;text-align:center;padding:.9rem;font-weight:700;font-size:.95rem;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;font-family:inherit;cursor:pointer}
  .callbar .c-call{color:var(--teal-700);background:#fff}
  .callbar .c-book{background:var(--teal-700);color:#fff}
  body{padding-bottom:56px}
}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(8,32,31,.5);opacity:0;visibility:hidden;transition:.25s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(86%,360px);background:#fff;
  transform:translateX(100%);transition:.28s ease;overflow-y:auto;padding:1.2rem}
.drawer.open .drawer-panel{transform:none}
.drawer .d-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.drawer .d-close{background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--ink);line-height:1}
.drawer nav ul{list-style:none;margin:0;padding:0}
.drawer nav > ul > li{border-bottom:1px solid var(--line)}
.drawer nav a{display:block;padding:.8rem .3rem;color:var(--ink);font-weight:600}
.drawer .sub a{padding-left:1.2rem;font-weight:500;color:var(--body);font-size:.94rem}
.drawer .grp{font:700 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);padding:.8rem .3rem .2rem}
.drawer .btn{width:100%;justify-content:center;margin-top:1rem}

/* ===== Images: hero photo, card media, page banners ===== */
.hero-media{position:relative;display:flex;justify-content:flex-end}
/* soft warm glow behind the portrait so it reads as designed, not floating */
.hero-media::before{content:"";position:absolute;z-index:0;right:-26px;bottom:-24px;width:min(78%,340px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(215,165,63,.45),rgba(215,165,63,0) 68%);filter:blur(6px);pointer-events:none}
.hero-photo{position:relative;z-index:1;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
  width:min(420px,100%);border:5px solid #fff;background:#fff;
  box-shadow:0 30px 55px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:calc(var(--radius-lg) - 5px)}
.hero-float{position:absolute;left:-8px;bottom:20px;display:flex;align-items:center;gap:.7rem;
  background:#fff;color:var(--ink);border-radius:14px;padding:.65rem 1rem;box-shadow:var(--shadow)}
.hero-float .hf-star{color:var(--gold-500);display:inline-flex}
.hero-float b{font-family:var(--serif);font-size:1.3rem;color:var(--teal-700);display:block;line-height:1}
.hero-float span{font-size:.76rem;color:var(--muted)}

.card.has-media{padding:0;overflow:hidden}
.card-media{aspect-ratio:16/9;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.card.has-media:hover .card-media img{transform:scale(1.03)}
.card.has-media .ic{margin:-28px 0 .6rem 1.3rem;position:relative;background:#fff;box-shadow:var(--shadow-sm)}
.card.has-media h3{margin:0 1.3rem .4rem}
.card.has-media p{margin:0 1.3rem 1rem}
.card.has-media ul{margin:0 1.3rem 1rem;padding-left:1.15rem;text-align:left}
.card.has-media ul li{margin:.25rem 0}
.card.has-media .more{margin:auto 1.3rem 1.3rem}

.page-banner{margin:1.6rem auto 0;max-width:720px;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line)}
.page-banner img{width:100%;height:auto;object-fit:contain;display:block}

/* Header logo */
.brand img{height:44px;width:auto;display:block}
/* Credential strip: real text on two centred lines under the signature (the artwork's own
   micro-text is about 2px tall at logo size, so it is cropped out of the image entirely). */
.brand .brand-tag{display:block;margin-top:5px;font-family:var(--sans);text-transform:uppercase;
  line-height:1.45;white-space:nowrap}
.brand .brand-tag .bt-l1{display:block;font-size:.545rem;font-weight:700;letter-spacing:.135em;color:var(--teal-600)}
.brand .brand-tag .bt-l2{display:block;font-size:.5rem;font-weight:600;letter-spacing:.12em;color:var(--gold-600)}
@media (max-width:900px){
  .brand img{height:38px}
  .brand .brand-tag .bt-l1{font-size:.53rem;letter-spacing:.1em}
  .brand .brand-tag .bt-l2{font-size:.49rem;letter-spacing:.09em}
}
@media (max-width:400px){
  .brand img{height:33px}
  .brand .brand-tag{margin-top:4px}
  .brand .brand-tag .bt-l1{font-size:.5rem;letter-spacing:.055em}
  .brand .brand-tag .bt-l2{font-size:.46rem;letter-spacing:.045em}
}
/* long 17-category dropdowns scroll instead of overflowing */
.submenu{max-height:74vh;overflow-y:auto}

/* Google reviews widget */
.grev-sec{overflow:hidden}
.grev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.grev-head-text{max-width:34rem}
.grev-eyebrow{display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);margin-bottom:12px}
.grev-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.12;color:var(--ink);margin:0 0 12px}
.grev-sub{font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:var(--body);margin:0}
.grev-cta{display:inline-flex;align-items:center;gap:10px;flex:none;font-family:var(--sans);font-size:.95rem;font-weight:600;color:#fff;background:var(--teal-700);border:1px solid var(--teal-700);padding:13px 22px;border-radius:999px;text-decoration:none;box-shadow:var(--shadow-sm);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.grev-cta:hover{background:var(--teal-900);transform:translateY(-1px);box-shadow:var(--shadow);color:#fff}
.grev-cta-g{display:inline-flex;background:#fff;border-radius:50%;padding:4px;line-height:0}
.grev-star path{fill:var(--gold-500)}
.grev-stars{display:inline-flex;align-items:center;gap:3px;line-height:0}
.grev-panel{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start}
.grev-summary{position:sticky;top:96px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px 30px;box-shadow:var(--shadow-lg);overflow:hidden}
.grev-summary::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--gold-500),var(--gold-600))}
.grev-summary-top{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:22px}
.grev-g-badge{display:inline-flex;line-height:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:50%;padding:8px}
.grev-summary-label{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--muted)}
.grev-score-row{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.grev-score{font-family:var(--serif);font-weight:600;font-size:4rem;line-height:.9;color:var(--ink)}
.grev-score-meta{display:flex;flex-direction:column;gap:6px}
.grev-stars-lg svg{filter:drop-shadow(0 1px 1px rgba(192,138,45,.25))}
.grev-count{font-family:var(--sans);font-size:.84rem;color:var(--muted)}
.grev-trust{display:inline-block;font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--teal-700);background:var(--bg-tint);border:1px solid var(--gold-100);padding:7px 15px;border-radius:999px;margin-bottom:26px}
.grev-dist{display:flex;flex-direction:column;gap:11px}
.grev-dist-row{display:flex;align-items:center;gap:12px}
.grev-dist-star{display:inline-flex;align-items:center;gap:3px;width:26px;flex:none;font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--body)}
.grev-track{flex:1;height:9px;background:var(--bg-tint);border-radius:999px;overflow:hidden}
.grev-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--gold-500)}
.grev-fill-full{background:linear-gradient(90deg,var(--gold-500),var(--gold-600));animation:grev-grow 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes grev-grow{from{width:0}to{width:100%}}
.grev-dist-pct{width:38px;flex:none;text-align:right;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.grev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grev-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 26px;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.grev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-100)}
.grev-card-head{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.grev-avatar{width:46px;height:46px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.25rem;font-weight:600;color:#fff;box-shadow:0 0 0 3px var(--gold-100)}
.grev-av-1{background:var(--teal-600)}
.grev-av-2{background:var(--teal-900)}
.grev-av-3{background:var(--gold-600)}
.grev-av-4{background:var(--teal-700)}
.grev-card-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.grev-name{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.25}
.grev-src{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.76rem;color:var(--muted)}
.grev-g-mini{display:inline-flex;line-height:0}
.grev-card .grev-stars{margin-bottom:13px}
.grev-text{font-family:var(--sans);font-size:.96rem;line-height:1.62;color:var(--body);margin:0}
@media (max-width:900px){.grev-panel{grid-template-columns:1fr}.grev-summary{position:static}}
@media (max-width:640px){.grev-head{margin-bottom:26px}.grev-cta{width:100%;justify-content:center}.grev-grid{grid-template-columns:1fr}.grev-summary{padding:28px 22px 26px}.grev-score{font-size:3.4rem}}
@media (prefers-reduced-motion:reduce){.grev-fill-full{animation:none;width:100%}.grev-card,.grev-cta{transition:none}}

/* Before/after gallery */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.ba-teaser{grid-template-columns:repeat(4,1fr)}
.ba-item{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;border:1px solid var(--line)}
.ba-grid img,.ba-item img{width:100%;height:auto;display:block;border-radius:12px}
@media(max-width:900px){.ba-grid,.ba-teaser{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ba-grid,.ba-teaser{grid-template-columns:1fr}}

/* Before/after slider (home teaser) */
.ba-slider{position:relative;margin-top:1.3rem;padding:0 8px}
.ba-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:.25rem;scrollbar-width:none}
.ba-track::-webkit-scrollbar{display:none}
.ba-slide{position:relative;flex:0 0 calc((100% - 2rem)/3);scroll-snap-align:start;margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;border:1px solid var(--line)}
.ba-slide img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.ba-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--teal-700);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center;transition:background .2s,color .2s,opacity .2s}
.ba-prev{left:-6px}.ba-next{right:-6px}
.ba-arrow:hover{background:var(--teal-700);color:#fff}
.ba-arrow[disabled]{opacity:.3;cursor:default}
.ba-dots{display:flex;gap:.45rem;justify-content:center;margin-top:1rem}
.ba-dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:width .2s,background .2s}
.ba-dot.active{background:var(--gold-500);width:22px;border-radius:5px}
@media(max-width:900px){.ba-slide{flex-basis:calc((100% - 1rem)/2)}}
@media(max-width:560px){.ba-slide{flex-basis:100%}.ba-prev{left:2px}.ba-next{right:2px}}

/* Video testimonials (click-to-load facade) */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
@media(max-width:900px){.vid-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vid-grid{grid-template-columns:1fr}}
.ytf{position:relative;border:0;padding:0;cursor:pointer;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;width:100%;display:block}
.ytf img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:.2s}
.ytf:hover img{opacity:1}
.ytf-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(192,138,45,.94);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ytf-play::after{content:"";border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.vid-grid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block}

/* Patient results page */
.res-hero{background:linear-gradient(160deg,var(--bg-tint),var(--bg-soft));padding:clamp(2rem,5vw,3.4rem) 0}
.res-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.6rem;align-items:center}
.res-hero-text .lead{margin-top:.4rem}
.res-hero-cta{margin-top:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap}
.res-hero-photo{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:#fff;max-width:420px;justify-self:end}
.res-hero-photo img{width:100%;height:auto;display:block}
.res-hero-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .8rem;color:#fff;font-size:.95rem;background:linear-gradient(transparent,rgba(8,59,56,.82))}
.res-hero-photo figcaption b{font-family:var(--serif);font-weight:600}
@media(max-width:820px){.res-hero-grid{grid-template-columns:1fr;gap:1.6rem}.res-hero-photo{justify-self:center}}
/* Before/after gallery overlays */
.ba-item{position:relative;overflow:hidden}
/* (.ba-badge/.ba-cap overlays retired: the supplied result cards carry their own labels) */
/* Services page hero: intro text + framed theatre photo */
.svc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.svc-hero .sec-head{max-width:none;margin:0}
.svc-hero-photo{margin:0;background:#fff;padding:10px;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 26px 50px -24px rgba(8,59,56,.55),0 0 0 1px rgba(8,59,56,.04);overflow:hidden}
.svc-hero-photo img{width:100%;height:auto;display:block;border-radius:calc(var(--radius-lg) - 10px)}
.svc-hero-photo figcaption{margin-top:.7rem;padding:0 .2rem .1rem;font-size:.85rem;color:var(--muted);text-align:center}
@media(max-width:900px){.svc-hero{grid-template-columns:1fr}.svc-hero-photo{max-width:560px;margin-inline:auto}}
/* Transformation message band */
.res-band{background:linear-gradient(160deg,var(--teal-700),var(--teal-900));color:#eaf6f3;text-align:center;padding:clamp(2.4rem,6vw,3.6rem) 0}
.res-band h2{color:#fff;max-width:20ch;margin:0 auto .6rem}
.res-band p{max-width:52ch;margin:0 auto 1.4rem;color:#cfe9e3}
.res-band .cta-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
/* Video cards */
.vid-card{position:relative;margin:0;display:flex;flex-direction:column;gap:.6rem}
.vid-label{position:absolute;top:.6rem;left:.6rem;z-index:3;background:rgba(8,59,56,.82);color:#fff;font:600 .72rem/1 var(--sans);padding:.32rem .55rem;border-radius:999px;pointer-events:none}
.vid-card figcaption{font-size:.88rem;color:var(--muted)}

/* Services dropdown = location-first mega (Service Matrix): Lahore | Bhakkar columns */
.submenu.mega{display:flex;gap:1.4rem;width:min(620px,94vw);left:0;padding:1rem 1.2rem;max-height:74vh;overflow-y:auto}
@media (max-width:1120px){.submenu.mega{left:auto;right:0}}
@media (max-width:560px){.submenu.mega{flex-direction:column;gap:.6rem}}
.mega-col{flex:1;min-width:0;display:flex;flex-direction:column}
.mega-h{font:700 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);padding:.2rem .3rem .55rem;border-bottom:1px solid var(--line);margin-bottom:.35rem}
.submenu.mega a{display:block;padding:.42rem .4rem;font-size:.9rem;color:var(--body);border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.submenu.mega a:hover{background:var(--bg-tint);color:var(--teal-700)}
.submenu.mega a.mega-all{font-weight:700;color:var(--teal-700);margin-bottom:.15rem}
/* Lead / appointment form */
.lead-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);max-width:760px}
/* Inside the 330px sidebar (contact + book pages) the form is a compact card: single-column
   fields, tighter padding, no separate border/shadow (the side-card wrapper already has one). */
.aside .lead-form{max-width:none;padding:0;border:0;box-shadow:none;border-radius:0}
/* Keep 2 columns even in the sidebar (Name+Phone, Email+Clinic per row) - a single column
   made the form nearly twice as tall. Fields keep their NORMAL size (no shrunk font/padding);
   the sidebar itself is widened below (.layout-form) so 2 columns have comfortable room. */
.layout-form{grid-template-columns:1fr 400px}
@media(max-width:1024px){.layout-form{grid-template-columns:1fr}}
/* Quick-call cards on the contact page: real content for anyone who'd rather phone than
   message, and it balances the intro column against the taller form sidebar. */
.contact-quickinfo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.4rem;max-width:600px}
.cqi-item{background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.cqi-city{display:block;font:700 .78rem var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--gold-600);margin-bottom:.5rem}
.cqi-phone{display:flex;align-items:center;gap:.5rem;font:600 1.1rem var(--sans);color:var(--teal-700)}
.cqi-phone:hover{color:var(--teal-900)}
.cqi-phone svg{width:17px;height:17px;flex:none;color:var(--teal-600)}
.cqi-venue{display:block;margin-top:.45rem;font-size:.86rem;color:var(--muted)}
@media(max-width:560px){.contact-quickinfo{grid-template-columns:1fr;max-width:none}}
.lf-honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lf-full{grid-column:1 / -1}
.lead-form label{display:flex;flex-direction:column;gap:.35rem;font:600 .85rem var(--sans);color:var(--ink)}
.lead-form input,.lead-form select,.lead-form textarea{font:400 1rem var(--sans);color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;width:100%}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--teal-500);background:#fff;box-shadow:0 0 0 3px var(--bg-tint)}
.lead-form textarea{resize:vertical;min-height:96px}
.lead-form button[type=submit]{margin-top:1.1rem}
.lf-note{margin:.9rem 0 0;font-size:.84rem;color:var(--muted)}
.form-success{background:var(--bg-tint);border:1px solid var(--line);border-left:4px solid var(--teal-600);
  border-radius:var(--radius);padding:1.7rem 1.8rem;max-width:760px;box-shadow:var(--shadow-sm)}
.form-success .fs-check{width:46px;height:46px;border-radius:50%;background:var(--teal-600);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(18,122,112,.6)}
.form-success h3{margin:.7rem 0 .35rem;font:600 1.35rem var(--serif);color:var(--ink)}
.form-success p{margin:0 0 1.1rem;color:var(--body);max-width:52ch}
.form-success .fs-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.book-side{display:flex;flex-direction:column;gap:1rem}
/* About page (photo floats, text wraps around it) */
.about-body{max-width:940px;margin-top:1.4rem;font-size:1.03rem;line-height:1.72}
.about-body .lead{margin-top:0}
.about-body h2{margin:1.7rem 0 .5rem}
.about-body p{margin:0 0 1rem}
.about-chips{margin:1.1rem 0 1.5rem;gap:.55rem}
.about-chips .chip{background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.about-chips .chip svg{fill:var(--gold-500);color:var(--gold-500)}
.about-photo{float:right;width:min(42%,360px);margin:.2rem 0 1.2rem 2rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:#fff}
.about-photo img{width:100%;height:auto;display:block}
.about-photo figcaption{padding:.7rem 1rem;font-size:.84rem;color:var(--muted);text-align:center;background:var(--bg-soft);border-top:1px solid var(--line)}
.about-cta{clear:both;margin-top:1.6rem;display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:640px){.about-photo{float:none;width:100%;max-width:340px;margin:0 auto 1.4rem}}
/* WhatsApp CTA (spec 3A): white fill on teal bands, dark-teal fill on light backgrounds.
   No gold, no green fill, no chip. Surface inversion is what makes it stand out. */
.wa-btn{display:inline-flex;align-items:center;gap:10px;background:#ffffff;color:#0b4a45;
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  padding:15px 26px;border:0;border-radius:999px;box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;min-height:48px;text-decoration:none}
.wa-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(0,0,0,.7);color:#0b4a45}
.wa-btn:active{transform:translateY(0)}
.wa-btn:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.wa-btn--dark{background:#083b38;color:#ffffff;font-size:14.5px;padding:13px 22px;border-radius:999px;
  box-shadow:0 10px 24px -14px rgba(8,59,56,.95)}
.wa-btn--dark:hover{background:#0e5c56;transform:translateY(-1px);color:#ffffff}
.wa-btn--dark:focus-visible{outline:2px solid #0e5c56;outline-offset:3px}
/* Secondary action: a real outlined button (was a plain text link) */
.call-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;background:transparent;
  border:1.5px solid rgba(255,255,255,.6);border-radius:999px;padding:13px 24px;min-height:48px;
  text-decoration:none;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.call-btn:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;transform:translateY(-1px)}
.call-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.call-btn svg{width:17px;height:17px}
/* Booking side card: white WhatsApp button + call link on the dark teal card */
.bc-cta{display:flex;flex-direction:column;gap:.6rem;align-items:center;margin-top:.9rem}
.bc-call{display:inline-flex;align-items:center;gap:7px;color:#cfe6e2;font-size:.9rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.bc-call:hover{color:#fff}
.bc-call svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.call-btn{transition:none}.call-btn:hover{transform:none}}
/* Sticky floating WhatsApp (bottom-right) */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  background:#ffffff;color:#0b4a45;font-family:var(--sans);font-size:14.5px;font-weight:600;
  padding:14px 20px;border-radius:999px;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(8,59,56,.55),0 0 0 1px rgba(8,59,56,.08);
  transition:transform .18s ease,box-shadow .18s ease}
.wa-fab:hover{transform:translateY(-2px);color:#0b4a45}
.wa-fab .fab-full{display:none}
@media(min-width:768px){.wa-fab .fab-full{display:inline}.wa-fab .fab-short{display:none}}
@media(max-width:767px){.wa-fab{right:14px;bottom:84px;padding:14px}}
@media(prefers-reduced-motion:reduce){.wa-btn,.wa-btn--dark,.wa-fab{transition:none}.wa-btn:hover,.wa-btn--dark:hover,.wa-fab:hover{transform:none}}
button.wa-btn,button.wa-btn--dark{-webkit-appearance:none;appearance:none;line-height:1.1}
/* WhatsApp clinic chooser modal */
body.wa-modal-open{overflow:hidden}
.wa-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.wa-modal[hidden]{display:none}
.wa-modal-backdrop{position:absolute;inset:0;background:rgba(8,32,31,.55)}
.wa-modal-card{position:relative;z-index:1;background:#fff;width:100%;max-width:440px;
  border-radius:20px 20px 0 0;padding:1.6rem 1.4rem 1.3rem;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5);
  animation:waUp .22s ease}
@keyframes waUp{from{transform:translateY(20px);opacity:.5}to{transform:translateY(0);opacity:1}}
.wa-modal-x{position:absolute;top:.6rem;right:.8rem;border:none;background:none;font-size:1.9rem;line-height:1;
  color:var(--muted);cursor:pointer;padding:.2rem .4rem}
.wa-modal-title{font:600 1.14rem var(--serif);color:var(--ink);margin:.1rem 0 1rem;padding-right:1.6rem}
.wa-opt{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:14px;margin-bottom:.7rem;color:var(--ink);text-decoration:none;
  transition:border-color .15s ease,background .15s ease}
.wa-opt:hover,.wa-opt:focus-visible{border-color:var(--teal-500);background:var(--bg-tint);outline:none}
.wa-opt>svg{color:#25D366;flex:none}
.wa-opt-txt{display:flex;flex-direction:column;line-height:1.25;flex:1}
.wa-opt-txt strong{font-size:1rem;color:var(--ink)}
.wa-opt-txt small{font-size:.8rem;color:var(--muted)}
.wa-opt-go{color:var(--teal-500);font-size:1.6rem;line-height:1}
.wa-modal-note{font-size:.78rem;color:var(--muted);margin:.5rem 0 0;text-align:center}
@media(min-width:600px){.wa-modal{align-items:center}.wa-modal-card{border-radius:20px}}
.hero-cta-note{margin:.7rem 0 0;font-size:.86rem;color:rgba(255,255,255,.92)}
@media(max-width:560px){.lf-grid{grid-template-columns:1fr}.lead-form{padding:1.2rem}}
/* City page local-proof + nearby areas */
.loc-crosslink{margin-top:1.4rem}
.localproof{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:start}
@media(max-width:760px){.localproof{grid-template-columns:1fr;gap:1rem}}
.nearby{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem}
.nearby h3{margin:0 0 .5rem;font-size:1.05rem}
.nearby ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.nearby li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.86rem;color:var(--body)}
/* Full service list (city page) */
.svc-list{columns:3;column-gap:2rem;margin-top:1.6rem}
@media(max-width:900px){.svc-list{columns:2}}
@media(max-width:560px){.svc-list{columns:1}}
.svc-list-col{break-inside:avoid;margin-bottom:1.3rem}
.svc-list-cat{display:block;font:600 1rem var(--serif);color:var(--ink);padding-bottom:.4rem;margin-bottom:.35rem;border-bottom:1px solid var(--line)}
.svc-list-cat:hover{color:var(--teal-700)}
.svc-list ul{list-style:none;margin:0;padding:0}
.svc-list li{margin:.2rem 0}
.svc-list li a{font-size:.92rem;color:var(--body)}
.svc-list li a:hover{color:var(--teal-700)}
/* Full service list (city hub) */
.svc-list{columns:3;column-gap:2rem;margin-top:1.6rem}
@media(max-width:900px){.svc-list{columns:2}}
@media(max-width:560px){.svc-list{columns:1}}
.svc-list-col{break-inside:avoid;margin-bottom:1.3rem}
.svc-list-cat{display:block;font:600 1rem var(--serif);color:var(--ink);padding-bottom:.4rem;margin-bottom:.35rem;border-bottom:1px solid var(--line)}
.svc-list-cat:hover{color:var(--teal-700)}
.svc-list ul{list-style:none;margin:0;padding:0}
.svc-list li{margin:.2rem 0}
.svc-list li a{font-size:.92rem;color:var(--body)}
.svc-list li a:hover{color:var(--teal-700)}
.d-choose{display:block;font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);padding:.2rem .3rem .4rem}

/* /services/ location tabs */
.tabs{display:flex;gap:.4rem;margin:0 0 1.8rem;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:.7rem 1.3rem;font:600 1.02rem var(--sans);color:var(--muted);cursor:pointer}
.tab.active{color:var(--teal-700);border-bottom-color:var(--gold-500)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* mobile drawer nested accordion (Services -> location -> services) */
.d-acc2{border-top:1px solid var(--line)}
.d-acc2 summary{padding:.7rem .2rem .7rem .7rem;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.d-acc2 summary::-webkit-details-marker{display:none}
.d-acc2 summary::after{content:"+";color:var(--teal-600)}
.d-acc2[open] summary::after{content:"\2212"}
.d-acc2 .d-acc-body a{padding-left:1.5rem}
.d-acc2 .d-acc-body a.d-all{padding-left:1.4rem;font-weight:700;color:var(--teal-700)}
.d-acc2 .d-acc-body a.d-cat{padding-left:1.4rem;font-weight:600;color:var(--ink)}
.d-acc2 .d-acc-body a.d-child{padding-left:2.6rem;font-weight:500;color:var(--body);font-size:.9rem}

/* Dropdown opens on click (JS adds .open) as well as hover */
.menu>li.has-sub.open .submenu{opacity:1;visibility:visible;transform:translateY(0)}

/* Procedures text list (Bhakkar flat pages, no cross-city links) */
.proc-list{columns:2;column-gap:2rem;padding-left:1.1rem;margin:.2rem 0 1.2rem}
.proc-list li{margin:.4rem 0;break-inside:avoid}
@media (max-width:560px){.proc-list{columns:1}}

/* Mobile drawer accordion */
.drawer nav{display:flex;flex-direction:column}
.drawer .d-top{padding:.85rem .2rem;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.drawer .d-cta{margin-top:1.1rem}
.drawer .d-cta .wa-btn{width:100%;justify-content:center}
.d-acc{border-bottom:1px solid var(--line)}
.d-acc summary{padding:.85rem .2rem;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.d-acc summary::-webkit-details-marker{display:none}
.d-acc summary::after{content:"+";color:var(--teal-600);font-size:1.35rem;line-height:1}
.d-acc[open] summary::after{content:"\2212"}
.d-acc-body{display:flex;flex-direction:column;padding:.1rem 0 .7rem}
.d-acc-body a{padding:.5rem .2rem .5rem 1rem;color:var(--body);font-weight:500;font-size:.95rem}
.d-acc-body a.d-all{font-weight:700;color:var(--teal-700)}
.drawer nav a.btn{display:inline-flex;padding:.9rem 1.5rem;margin-top:1.1rem;color:#3a2a06}

/* Centered service-card grid (3 top, 2 bottom centered) */
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}
.svc-grid>.card{flex:0 1 calc(33.333% - 0.8rem);min-width:250px;max-width:380px}
@media (max-width:820px){.svc-grid>.card{flex:0 1 calc(50% - 0.6rem);max-width:none}}
@media (max-width:560px){.svc-grid>.card{flex:1 1 100%}}

/* ===== Mobile card + hero polish (<=560) ===== */
@media (max-width:560px){
  .hero-photo{max-width:250px;margin-inline:auto}
  .hero-media::before{display:none}
  .hero-float{position:static;margin:1rem auto 0;justify-content:center;width:max-content}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.hero-cta .wa-btn{width:100%;justify-content:center}
  .card:not(.has-media){align-items:center;text-align:center}
  .card:not(.has-media) .ic{margin-left:auto;margin-right:auto}
  .card:not(.has-media) ul{text-align:left;width:100%}
  .card.has-media .ic{margin:-28px auto .6rem}
  .card.has-media h3,.card.has-media p,.card.has-media .more{text-align:center}
  .card .more{margin-left:auto;margin-right:auto}
}

/* Related-procedures block + cross-city twin link (2026-08-07 internal-linking pass) */
.rel-list{list-style:none;padding:0;margin:0 0 1.2em;display:flex;flex-wrap:wrap;gap:.55rem}
.rel-list li a{display:inline-block;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:.42rem .95rem;font-size:.92rem;font-weight:500;color:var(--teal-700)}
.rel-list li a:hover{background:var(--teal-700);color:#fff;border-color:var(--teal-700)}
.twin-link{font-size:.95rem;color:var(--muted);border-left:3px solid var(--gold-500);
  padding:.5rem 0 .5rem .9rem;background:var(--bg-soft);border-radius:0 6px 6px 0}

/* Contact page redesign (2026-08-07): channels row + balanced form/steps grid */
.cx-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.cx-ch{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.cx-ch svg{color:var(--teal-600)}
.cx-label{font:600 .78rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600)}
.cx-val{font-size:1.22rem;font-weight:600;color:var(--teal-700)}
a.cx-val:hover{color:var(--teal-900)}
.cx-ch .wa-btn{margin-top:.1rem}
.cx-sub{font-size:.88rem;color:var(--muted);line-height:1.5}
.cx-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem;margin-top:1.6rem;align-items:stretch}
.cx-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.cx-steps{background:var(--teal-900);color:#d9eae6;border-radius:var(--radius);padding:1.5rem 1.6rem;
  display:flex;flex-direction:column}
.cx-steps h3{color:#fff;margin-bottom:.9rem}
.cx-steps ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.8rem}
.cx-steps li{line-height:1.55}
.cx-steps li b{color:#fff}
.cx-note{margin:1.2rem 0 .6rem;font-weight:600;color:var(--gold-500)}
.cx-note svg{vertical-align:-4px;margin-right:.3rem}
.cx-maps{display:flex;flex-direction:column;gap:.35rem;margin:0}
.cx-maps a{color:#bfe0da;text-decoration:underline;font-size:.92rem}
.cx-maps a:hover{color:#fff}
@media(max-width:900px){.cx-channels{grid-template-columns:1fr}.cx-grid{grid-template-columns:1fr}}