/*
Theme Name: Dr. Muhibullah Dawar
Theme URI: https://drmuhibullahdawar.com
Author: Faisal Saleh Hayat — Marketer Hayat
Author URI: https://marketerhayat.com
Description: Custom theme for Dr. Muhibullah Dawar — General, Laparoscopic, Thoracic and Laser Surgeon and Expert Laser Proctologist, consulting in Peshawar, Islamabad and Lahore. Editorial medical layout with category hubs, condition pages and multi-city local SEO schema.
Version: 3.31.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dr-muhibullah-dawar
Tags: medical, one-column, custom-menu, editor-style, translation-ready
*/

:root{
  --ink:#0B1B2B;
  --ink-soft:#33475B;
  --muted:#647D95;
  --navy:#08243D;
  --navy-2:#0E3A5F;
  --navy-line:rgba(255,255,255,.14);
  --teal:#146583;
  --teal-hover:#0f4e67;
  --teal-tint:rgba(11,111,184,.06);
  --teal-soft:#E4F0F9;
  --cyan:#06B6D4;
  --cyan-soft:#DFF6FB;
  --surface:#FFFFFF;
  --paper:#FAFCFE;
  --paper-2:#F1F6FA;
  --mint:#EDF4F9;
  --border:#DDE5EC;
  --border-2:#C3D1DE;
  --container:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-sm:0 1px 2px rgba(8,36,61,.04), 0 2px 8px rgba(8,36,61,.04);
  --sh-md:0 2px 4px rgba(8,36,61,.05), 0 14px 32px rgba(8,36,61,.09);
  --sh-lg:0 3px 8px rgba(8,36,61,.07), 0 28px 64px rgba(8,36,61,.13);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;font-size:16.5px;line-height:1.75;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:44px;line-height:1.16}
h2{font-size:36px;line-height:1.2}
h3{font-size:19px;line-height:1.35;letter-spacing:-.012em}
h4{font-size:16px;line-height:1.4}
p{margin:0}
a{color:var(--teal);text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.container{max-width:var(--container);margin:0 auto;padding:0 28px}

.section{padding:100px 0}
.s-paper{background:var(--paper)}
.s-mint{background:var(--mint)}
.s-line{border-top:1px solid var(--border)}
.s-line-b{border-bottom:1px solid var(--border)}

/* Section head */
.head{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;padding-bottom:26px;border-bottom:1px solid var(--border);margin-bottom:48px}
.head__idx{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--teal);font-variant-numeric:tabular-nums}
.head__idx span{color:var(--muted);letter-spacing:.14em}
.head h2{margin-top:16px;max-width:24ch}
.head__note{font-size:15.5px;line-height:1.7;color:var(--muted);max-width:36ch;padding-bottom:4px}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--teal)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.lede{font-size:17.5px;line-height:1.7;color:var(--ink-soft);font-weight:400}
.measure{max-width:48ch}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;font-size:14.5px;font-weight:500;letter-spacing:.02em;line-height:1;border:1px solid var(--teal);transition:background-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.btn--primary{background:var(--teal);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--teal-hover);border-color:var(--teal-hover);color:#fff;box-shadow:var(--sh-md)}
.btn--secondary{background:transparent;color:var(--teal)}
.btn--secondary:hover{background:var(--teal);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--light{background:#fff;border-color:#fff;color:var(--navy)}
.btn--light:hover{background:#E8F0F7;border-color:#E8F0F7;color:var(--navy);transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--navy-line);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34);color:#fff;transform:translateY(-1px)}
.link-u{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;letter-spacing:.02em;color:var(--teal)}
.link-u i{width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .22s var(--ease)}
.link-u:hover i{transform:rotate(45deg) translate(2px,-2px)}
.link-u::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.link-u:hover::after{transform:scaleX(1)}
/* Icon-only variant. The card itself is the link and carries the heading, so the
   arrow marks the affordance without a second, non-descriptive label in the HTML.
   The hover underline is dropped here — a 1px rule under a 6px arrow reads as a
   rendering fault rather than a link. */
.link-u--icon{gap:0;width:22px;height:22px;justify-content:center;border:1px solid var(--border-2);border-radius:50%;transition:border-color .22s var(--ease),background-color .22s var(--ease)}
.link-u--icon::after{display:none}
.card:hover .link-u--icon{border-color:var(--teal);background:rgba(26,95,88,.06)}

/* Utility bar + header */
.util{background:var(--navy);color:#91A6BB;font-size:12.5px}
.util__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:2px 24px;min-height:40px;padding-top:6px;padding-bottom:6px}
.util a{color:#D2DDE8;border-bottom:1px solid rgba(212,222,223,.7);padding-bottom:1px}
.util a:hover{color:#fff;border-bottom-color:#fff}

/* The strip carries three cities now, not one clinic's hours. Each city stays
   on one line; below the breakpoint the whole strip wraps to two rows rather
   than truncating a city out of sight. */
.util__hours{display:flex;flex-wrap:wrap;gap:4px 18px;min-width:0}
.util__city{white-space:nowrap}
.util__city b{color:#D2DDE8;font-weight:600}
/* Names what the times are. Reads as a label rather than competing with the
   city names, and keeps its own line on narrow screens. */
.util__label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;padding-right:14px;margin-right:2px;border-right:1px solid #38566B}

.appt__hours-day{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}

@media (max-width:1080px){
  /* Below desktop the strip carries the consulting hours only - the address and
     phone stay in the footer and on the contact page - so the hours are centred
     rather than pushed to one edge by space-between. */
  .util__place{display:none}
  .util__inner{justify-content:center;gap:2px}
  .util__hours{justify-content:center;gap:2px 14px}
  /* Centred and wrapping, so the divider would float mid-air. */
  .util__label{border-right:0;padding-right:0;flex-basis:100%;text-align:center}
}
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--border);transition:box-shadow .28s var(--ease),background-color .28s var(--ease)}
.header.is-stuck{box-shadow:0 1px 16px rgba(15,37,48,.08);background:rgba(255,255,255,.98)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:36px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand__text{display:block;min-width:0}
.brand__name{display:block;font-size:19.5px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.brand__role{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.nav{display:flex;align-items:center;gap:32px;position:relative}
.nav__link,.nav__toggle{position:relative;color:var(--ink);font-size:14.5px;line-height:1;padding:8px 0;background:none;border:0;font-family:inherit;cursor:pointer;transition:color .2s var(--ease)}
.nav__link::after,.nav__toggle::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.nav__link:hover,.nav__toggle:hover{color:var(--teal)}
.nav__link:hover::after,.nav__toggle:hover::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--teal)}
.nav__link.is-active::after{transform:scaleX(1)}
.nav__toggle{display:inline-flex;align-items:center;gap:7px}
.nav__toggle svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .24s var(--ease)}
/* The panel resolves against .nav, not the item, so it cannot be pushed off
   the right edge by where the item happens to sit. */
.nav__item{position:static}
.nav__item[data-open="true"] .nav__toggle svg{transform:rotate(180deg)}
.nav__panel{position:absolute;top:calc(100% + 22px);left:auto;right:0;min-width:0;width:min(760px,calc(100vw - 40px));background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--sh-lg);padding:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 40px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav__item[data-open="true"] .nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__group-title{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.nav__panel a{display:block;font-size:14.5px;padding:6px 0;color:var(--ink);transition:color .18s var(--ease),transform .18s var(--ease)}
.nav__panel a:hover{color:var(--teal);transform:translateX(3px)}
.burger{display:none;background:none;border:1px solid var(--border);border-radius:4px;width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--paper);overflow:hidden}
.hero::before{content:"";position:absolute;top:-10%;right:-6%;width:56%;height:120%;
  background:radial-gradient(closest-side,rgba(36,100,96,.10),rgba(36,100,96,.03) 55%,rgba(36,100,96,0) 100%);
  pointer-events:none}

.hero h1{margin:22px 0 0;font-size:clamp(32px,3.7vw,46px);line-height:1.16;max-width:22ch}
.hero h1 em{font-style:normal;color:var(--teal)}

.btn--wa{background:#fff;color:var(--ink);border-color:var(--border-2);gap:10px;box-shadow:var(--sh-sm)}
.btn--wa svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.7}
.btn--wa:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);box-shadow:var(--sh-md);background:#fff}
.btn--wa:hover svg{stroke:var(--teal)}
.btn{border-radius:11px}

/* ---- WhatsApp button -----------------------------------------------------
   The mark is a filled path, but .btn--wa svg was written for a stroked icon
   and sets fill:none - which would render it invisible. The mark carries its
   own fill, so it works in any button it is dropped into. */

/* .btn--wa svg is (0,0,1,1) and sets fill:none for a stroked icon, so this
   needs two classes to win rather than relying on source order. */
.btn .wa-btn__mark,.wa-btn__mark{flex:none;width:18px;height:18px;fill:currentColor;stroke:none;color:#17664e}

/* In the header it sits beside the search button, so it matches that height
   rather than the 48px page buttons. Below the nav breakpoint the label is
   dropped and it becomes a square icon button next to the burger - the only
   contact control in the header now that the phone line is gone. */
.header__wa{height:40px;padding:0 16px;gap:8px;font-size:13.5px;flex:0 0 auto;border-radius:8px}
.header__wa .wa-btn__label{white-space:nowrap}

@media (max-width:1080px){
  .header__wa{padding:0 13px}
}
@media (max-width:860px){
  .header__wa{width:40px;padding:0;border-radius:4px}
  .header__wa .wa-btn__label{display:none}
}
.btn--primary:hover{transform:translateY(-2px)}

/* Portrait composition */
.portrait{position:relative;margin:0 0 0 auto;max-width:460px;width:100%}

@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroImg{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

/* ---------- Trust strip ---------- */
.trust{background:var(--paper);padding:0 0 clamp(28px,4vw,44px)}
.trust ul{display:grid;}
.trust li{position:relative;display:flex;align-items:center;gap:12px;
  transition:color .18s var(--ease)}
.trust li:first-child{padding-left:0}
.trust li svg{width:26px;height:26px;flex:none;stroke:var(--teal);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.trust li:hover svg{transform:translateY(-2px)}

.authorbio__quote,.inlinequote{margin:16px 0 0;padding:16px 18px;background:#fff;border:1px solid var(--border);border-radius:12px}
.inlinequote{margin:18px 0 6px}
.authorbio__quote p,.inlinequote p{margin:0;font-size:15px;line-height:1.7;color:var(--ink);font-style:italic}
.authorbio__quote cite,.inlinequote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;color:var(--muted)}
@media (max-width:760px){}
.about__body p a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.about__body p a:hover{text-decoration-thickness:2px}
.trust li::after{content:"";position:absolute;right:0;top:50%;width:1px;
  background:var(--border);transform:translateY(-50%)}
.trust li:last-child::after{display:none}

@media (max-width:1180px){
  
  
  
  .trust ul{gap:14px 0}
  .trust li:first-child{padding-left:16px}
  .trust li:nth-child(3n)::after{display:none}
}
@media (max-width:1024px){
  
  .hero h1{max-width:26ch}
  .portrait{max-width:440px;margin:0}
  
}
@media (max-width:860px){
  .portrait{max-width:none}
  
  
  
  
  
  
  .trust{padding-bottom:32px}
  
  .trust li:first-child{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){
  
}

/* ---------- Card base ---------- */
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--sh-sm);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.card:hover{border-color:#B7C9DC;box-shadow:var(--sh-md);transform:translateY(-4px)}
.card:hover::before{transform:scaleX(1)}
.panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:34px;box-shadow:var(--sh-sm)}

/* ---------- About ---------- */
.about__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,4.5vw,72px);align-items:start}
.quals li{position:relative;display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);font-size:14.5px;line-height:1.55;color:var(--ink-soft);transition:color .18s var(--ease),transform .18s var(--ease)}
.quals li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--border-2);transition:background-color .18s var(--ease),transform .18s var(--ease)}
.quals li:last-child{border-bottom:0}
.quals li:hover{color:var(--teal);transform:translateX(3px)}
.quals li:hover::before{background:var(--teal);transform:scale(1.3)}

.about__body h2{margin:20px 0 0;font-size:clamp(26px,2.8vw,36px);line-height:1.2;max-width:24ch}
.about__accent{width:52px;height:3px;background:var(--teal);border-radius:2px;margin:24px 0 22px}
.about__body p{max-width:62ch;color:var(--ink-soft);font-size:16px;line-height:1.8}
.about__body p+p{margin-top:18px}

/* ---------- Featured areas ---------- */
.areas{display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:20px}
.area{display:flex;flex-direction:column;border-radius:16px}
.area__idx{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.area__idx b{font-weight:600;color:var(--teal);letter-spacing:.1em}

.area h3{margin:14px 0 12px;font-size:19.5px;line-height:1.32;max-width:22ch;transition:color .22s var(--ease)}
.area:not(.area--lead):hover h3{color:var(--teal)}
.area p{font-size:14.8px;line-height:1.68;color:var(--muted)}
.area__list{margin:24px 0 0;padding-top:6px;border-top:1px solid var(--navy-line);flex:1}
.area__list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--navy-line);font-size:14.2px;color:#C0D2E0;
  transition:color .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.area__list a::after{content:"";flex:none;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.area__list a:hover{color:#fff;transform:translateX(4px);border-bottom-color:rgba(255,255,255,.28)}
.area__list a:hover::after{opacity:.85}
.area .link-u{margin-top:22px;align-self:flex-start}

.area:not(.area--lead) .link-u{margin-top:auto;padding-top:22px}

/* ---------- Services ---------- */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.svc__num{font-size:11px;letter-spacing:.18em;color:var(--teal);font-variant-numeric:tabular-nums}

.svc__foot{margin-top:40px;padding-top:26px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.svc__foot p{font-size:15px;color:var(--muted)}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.step{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 20px;box-shadow:var(--sh-sm);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.step::after{content:"";position:absolute;right:-16px;top:44px;width:16px;height:1px;background:var(--border-2)}
.step:last-child::after{display:none}
.step{overflow:hidden}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.step:hover{border-color:#A6C2DC;box-shadow:var(--sh-md);transform:translateY(-3px)}
.step:hover::before{transform:scaleX(1)}

.step h3{margin:16px 0 8px;font-size:16.5px}
.step p{font-size:14px;line-height:1.65;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.faq__aside h2{margin-top:16px}
.faq__aside p{margin-top:18px;color:var(--muted);font-size:15.5px;max-width:32ch}
.faq__aside .btn{margin-top:30px}
.faq details{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:12px;transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.faq details:hover{border-color:#B7C9DC;box-shadow:var(--sh-sm)}
.faq details[open]{border-color:#A6C2DC;box-shadow:var(--sh-sm)}
.faq summary{list-style:none;cursor:pointer;padding:22px 52px 22px 24px;position:relative;font-size:16.5px;font-weight:500;line-height:1.5;transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}

.faq summary:hover{color:var(--teal)}
.faq summary::after{content:"";position:absolute;right:24px;top:29px;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);transition:transform .26s var(--ease),border-color .2s var(--ease)}
.faq details[open] summary{color:var(--teal)}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--teal)}

@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- Clinic ---------- */
.visit__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.visit__info{padding:38px 34px}
.visit__info h2{margin:16px 0 6px}
.visit__place{font-size:14.5px;color:var(--muted);margin-bottom:28px}
.visit dl{margin:0;border-top:1px solid var(--border);padding-top:24px}
.visit dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:8px}
.visit dd{margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--border);font-size:16px;line-height:1.7;color:var(--ink-soft)}
.visit dd:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:0}
.visit dd a{color:var(--ink);border-bottom:1px solid var(--border-2);transition:color .18s var(--ease),border-color .18s var(--ease)}
.visit dd a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.appt{background:var(--navy);border:1px solid var(--navy);border-radius:16px;padding:38px 34px;color:#fff;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--sh-md)}
.appt h3{font-size:23px;margin:14px 0 14px;letter-spacing:-.02em}
.appt p{color:#A0B4C8;font-size:15px;line-height:1.7;max-width:46ch}
.appt__actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
/* Spans both grid columns. Used where the visit grid holds three children rather
   than two, so the card does not sit in column one with column two left empty. */
.appt--wide{grid-column:1 / -1}
.appt--wide p{max-width:78ch}
.appt__hours{margin-top:32px;padding-top:22px;border-top:1px solid var(--navy-line);font-size:13.5px;color:#8CA2B8;line-height:1.8;border-collapse:collapse;width:100%;text-align:left}
.appt__hours strong,.appt__hours th{color:#fff;font-weight:500;text-align:left;padding:0 14px 6px 0;white-space:nowrap;vertical-align:top;width:1%}
.appt__hours td{padding:0 0 6px;color:#8CA2B8;vertical-align:top;text-align:right;white-space:nowrap}
.appt__hours caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
@media (max-width:420px){.appt__hours th,.appt__hours td{white-space:normal}.appt__hours td{text-align:right}}

.cta__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#4FB3E8}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#fff;font-size:14.5px;border-top:1px solid var(--navy-line)}
/* Resting state is now white, so hover cannot brighten the colour - it
   underlines instead. */
.footer a{color:#fff;transition:opacity .18s var(--ease)}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:52px;}
/* The footer's column labels; h2 because they sit in the footer landmark
   rather than under a page section. */
.footer h2,.footer h3{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.footer li{padding:6px 0}
.footer__name{font-size:21px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.3}
.footer__role{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:6px}
.footer__brand p{margin-top:16px;line-height:1.7;max-width:32ch;color:#fff}
.footer address{font-style:normal;line-height:1.8}
.footer__bottom{border-top:1px solid var(--navy-line);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#fff}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.portrait{animation:fadeIn .75s var(--ease) .2s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .svc{grid-template-columns:repeat(3,1fr)}
  
  .steps{grid-template-columns:repeat(3,1fr)}
  .step::after{display:none}
  .why{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .section{padding:80px 0}
  .head{grid-template-columns:1fr;gap:18px;align-items:start}
  .head__note{max-width:56ch}
  .about__grid{grid-template-columns:1fr;gap:44px}
  
  
  .areas{grid-template-columns:1fr 1fr}
  
  
  .faq__grid{grid-template-columns:1fr;gap:40px}
  .visit__grid{grid-template-columns:1fr}
  
  
}
@media (max-width:860px){
  body{font-size:16px}
  h1{font-size:33px}
  h2{font-size:28px}
  h3{font-size:18.5px}
  .lede{font-size:17px}
  .section{padding:60px 0}
  .container{padding:0 22px}
  .util__inner{padding:8px 0;font-size:12px;align-items:center;justify-content:center;text-align:center}
  .util__hours{justify-content:center;gap:2px 12px}
  .nav{display:none}
  .burger{display:inline-flex}
  .header__cta{display:none}
  .header__inner{height:68px;gap:16px}
  .brand__name{font-size:17.5px}
  .brand__role{font-size:9.5px;letter-spacing:.12em}.nav--open,.nav-toggle:checked ~ .nav{display:block;}.nav--open .nav__link,.nav--open .nav__item,.nav-toggle:checked ~ .nav .nav__link,.nav-toggle:checked ~ .nav .nav__item{display:block;padding:14px 0;border-bottom:1px solid var(--border)}.nav--open .nav__link::after,.nav--open .nav__toggle::after,.nav-toggle:checked ~ .nav .nav__link::after,.nav-toggle:checked ~ .nav .nav__toggle::after{display:none}
  .nav__panel{position:static;min-width:0;border:0;box-shadow:none;padding:14px 0 4px;grid-template-columns:1fr;gap:20px;opacity:1;visibility:visible;transform:none;display:none}
  .nav__item[data-open="true"] .nav__panel{display:grid}
  .svc,.cond,.steps,.why,.areas,.credgrid{grid-template-columns:1fr;gap:14px}
  
  .area{min-height:0}
  .card{padding:24px}
  .panel,.visit__info,.appt{padding:26px 22px}
  
  
  .faq summary{font-size:16px;padding:20px 46px 20px 20px}
  
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Hub page ---------- */
.phero{background:var(--paper);border-bottom:1px solid var(--border);padding:clamp(38px,4.5vw,64px) 0 clamp(40px,5vw,68px)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--teal)}
.crumb span{color:var(--border-2)}
.crumb b{font-weight:400;color:var(--ink)}
.phero h1{font-size:clamp(30px,3.6vw,42px);line-height:1.16;max-width:24ch;margin:14px 0 0}
.phero__accent{width:52px;height:3px;background:var(--teal);border-radius:2px;margin:22px 0 20px}
.phero p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.72;color:var(--ink-soft);max-width:56ch}
.phero__actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hubcard{display:flex;flex-direction:column;border-radius:16px}
.hubcard h2,.hubcard h3{font-size:19px;margin:12px 0 10px;line-height:1.35;transition:color .22s var(--ease)}
.hubcard:hover h2,.hubcard:hover .hubcard__link{color:var(--teal)}
/* The heading carries the link and its hit area covers the card, so the card is
   still clickable while the link's name is just the procedure. */
.card.hubcard .hubcard__link{color:inherit;text-decoration:none}
.hubcard__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hubcard p{font-size:14.6px;line-height:1.68;color:var(--muted);flex:1}
.hubcard .link-u{margin-top:20px;align-self:flex-start;font-size:13.5px}
.endblocks{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.endcard{border-radius:16px;padding:34px}
.endcard h2{font-size:23px;margin:12px 0 12px}
.endcard p{color:var(--muted);font-size:15px;line-height:1.7;max-width:40ch}
.endcard--navy{background:var(--navy);border:1px solid var(--navy);color:#fff;box-shadow:var(--sh-md)}
.endcard--navy h2{color:#fff}
.endcard--navy p{color:#A0B4C8}
.endcard .btn{margin-top:26px}
.endcard address{font-style:normal;font-size:15px;line-height:1.75;color:#A0B4C8;margin-top:22px}
.endcard address a{color:#fff;border-bottom:1px solid var(--navy-line)}
@media (max-width:1024px){.hubgrid{grid-template-columns:repeat(2,1fr)}.endblocks{grid-template-columns:1fr}}
@media (max-width:860px){.hubgrid{grid-template-columns:1fr;gap:14px}.endcard{padding:26px 22px}}

.memberships{display:flex;flex-wrap:wrap;gap:12px 0;justify-content:center;margin-top:44px;padding-top:28px;border-top:1px solid var(--border)}
.memberships li{position:relative;padding:0 22px;font-size:14.5px;color:var(--ink-soft)}
.memberships li::after{content:"";position:absolute;right:0;top:50%;width:1px;height:14px;background:var(--border-2);transform:translateY(-50%)}
.memberships li:last-child::after{display:none}

@media (max-width:1024px){
  
  
  
  
  
  
  
  
}
@media (max-width:860px){
  
  
  
  
  
  
  
  .memberships{flex-direction:column;align-items:flex-start;gap:8px}
  .memberships li{padding:0}
  .memberships li::after{display:none}
  
}

.sduo{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:stretch}
.sduo .card{padding:32px}
.sduo h2{font-size:21px;margin-bottom:16px}
.sduo p{font-size:15px;line-height:1.75;color:var(--ink-soft)}
.sduo p+p{margin-top:14px}

.phases{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:30px auto auto;gap:14px 16px;margin-top:30px;justify-items:center;text-align:center}
.phases::before{content:"";position:absolute;left:12.5%;right:12.5%;top:15px;height:1px;background:var(--border);z-index:0}
.phases{border-collapse:collapse;width:100%}
.phases caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.phases tbody{display:contents}
.phase{display:contents}
.phase strong,.phase th{grid-row:2;display:block;font-size:13.8px;line-height:1.45;letter-spacing:-.005em;max-width:20ch;font-weight:600;text-align:center;padding:0}
.phase span:not(.phase__n),.phase td:not(.phase__n){grid-row:3;display:block;font-size:12.5px;color:var(--muted);line-height:1.4;text-align:center;padding:0}
.recnote{margin-top:26px;background:var(--mint);border:1px solid var(--border);border-radius:12px;padding:18px 20px;font-size:14.2px;line-height:1.65;color:var(--ink-soft)}
.recnote b{color:var(--ink);font-weight:600}

.sfaq{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sfaq .card{padding:26px}
.sfaq h3{font-size:16px;line-height:1.45;margin-bottom:10px;padding-left:38px;position:relative}
.sfaq h3::before{content:"?";position:absolute;left:0;top:-3px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.sfaq p{font-size:14.2px;line-height:1.7;color:var(--muted)}

.sband{background:var(--navy);border-radius:16px;padding:clamp(30px,3.6vw,46px);display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3vw,48px);color:#fff;box-shadow:var(--sh-md);align-items:center}
.sband h2{color:#fff;font-size:clamp(21px,2.2vw,26px);line-height:1.3}
.sband p{margin-top:12px;color:#A0B4C8;font-size:15.5px;line-height:1.7;max-width:46ch}

@media (max-width:1024px){
  
  
  .sduo,.recgrid{grid-template-columns:1fr}
  
  
  .sfaq{grid-template-columns:1fr}
  .sband{grid-template-columns:1fr;gap:26px}
}
@media (max-width:860px){
  
  
  .sduo .card,.recgrid .card,.snavy{padding:24px 20px}
  
  
  
  
  
  
}

/* ---------- Responsive fixes (v1.4.0) ---------- */
@media (max-width:1024px){
  /* hero is single column here, so the key-point card should not hug the right edge */
  
}
@media (max-width:620px){
  /* separators must not dangle at the end of a wrapped row */
  
  
  
  /* the longest category label must not push the pill past the viewport */
  
  /* once the credential facts stack they need their own separation */
  
  
  
}
@media (max-width:400px){
  .btn{padding:0 18px;font-size:14px}
  .container{padding:0 18px}
  .brand__role{display:none}
  .brand__name{font-size:18px}
  .card{padding:22px 18px}
  
  .sband,.locband,.cta{padding:26px 20px}
  .sband .btn{width:100%}
  .faq summary{padding:18px 40px 18px 16px}
  
  
  
}

/* ---------- Related procedures ---------- */
.rel{border-top:1px solid var(--border);padding-top:26px;margin-top:6px}

/* the appointment panel repeats the clinic block on mobile, so hide it there */
@media (max-width:860px){
  .appt{display:none}
  .visit__grid{grid-template-columns:1fr}
}

/* ---------- Medical references ---------- */
.refs{border-top:1px solid var(--border);padding-top:22px;margin-top:30px}
.refs ul{display:grid;gap:8px}
.refs li{font-size:13.5px;line-height:1.6;color:var(--muted)}
.refs a{color:var(--ink-soft);border-bottom:1px solid var(--border-2);transition:color .18s var(--ease),border-color .18s var(--ease)}
.refs a:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* ---------- Audit fixes: 1,2,3,4,5,6,7,10 ---------- */

/* the booking button belongs in the mobile sheet only */
.nav__cta{display:none}

/* 10 — desktop credentials strip: six rigid columns forced three-line wraps */
.trust ul{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:18px 0}
.trust li{padding:4px 20px}
.trust li::after{height:34px}

@media (max-width:1180px){
  .trust ul{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}

@media (max-width:1024px){
  /* 3 — the three credential cards repeat the qualifications list once the
     About column stacks, so hide them from that width down */
  
}

@media (max-width:860px){
  /* 1 — hero pill was crowding the header and running edge to edge */
  
  

  /* 2 — credentials one per line on mobile */
  
  .trust ul{grid-template-columns:1fr;gap:0}
  .trust li{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
  .trust li:last-child{border-bottom:0;padding-bottom:0}
  .trust li::after{display:none}
  
  

  /* 3 — about page repeats the qualifications as cards; hide the duplicate on mobile */
  /* 5 — footer identity block on one line each */
  .footer__role{letter-spacing:.1em;font-size:10px}
  .footer__brand p{max-width:none}

  /* 6 — footer baseline centred */
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:8px}/* 7 — mobile navigation: real tap targets,clear hierarchy,booking action in the sheet */
  .nav--open,booking action in the sheet */
  .nav-toggle:checked ~ .nav{padding:8px 22px 48px}.nav--open .nav__link,.nav-toggle:checked ~ .nav .nav__link{font-size:18px;padding:17px 0;font-weight:500}.nav--open .nav__toggle,.nav-toggle:checked ~ .nav .nav__toggle{font-size:18px;padding:17px 0;font-weight:500;width:100%;justify-content:space-between}.nav--open .nav__item,.nav-toggle:checked ~ .nav .nav__item{padding:0}.nav--open .nav__panel,.nav-toggle:checked ~ .nav .nav__panel{padding:4px 0 18px}.nav--open .nav__group-title,.nav-toggle:checked ~ .nav .nav__group-title{margin-top:8px}.nav--open .nav__panel a,.nav-toggle:checked ~ .nav .nav__panel a{font-size:16px;padding:11px 0}
  .nav__cta{display:block;margin-top:26px}
  .nav__cta .btn{width:100%;height:52px}
}

@media (max-width:1024px){
  /* 4 — let headings use the full column once the layout stacks */
  .head h2,.about__body h2,.hero h1,.ahero h1,.phero h1,.shero h1{max-width:none}
}

/* 7 — the menu button becomes a close button while the sheet is open */
.burger__close{display:none}

/* 1 — keep the hero clear of the sticky header on small screens */
@media (max-width:860px){
  .hero{padding-top:8px}
  
}

/* ---------- 1.7.4: header-to-hero spacing, all stacked widths ---------- */
@media (max-width:1024px){
  .hero{padding-top:0}
  
  .phero,.shero,.ahero{padding-top:40px}
  .crumb{margin-bottom:26px}
  
}
@media (max-width:860px){
  
  .phero,.shero,.ahero{padding-top:34px}
}

/* ---------- 1.7.5: credentials strip, one per line on phones ----------
   Higher specificity than any earlier .trust ul rule, so this wins no matter
   where those rules sit in the sheet. Breakpoint raised to 900px because the
   two-column layout was still showing on larger phones. */
@media (max-width:900px){
  
  
  
  
  
  
  
  
}

/* ---------- 1.7.5 ---------- */
@media (max-width:860px){
  /* the whole qualifications column is hidden on mobile: the same credentials already
     appear in the strip under the hero, so this was the third time on one screen */
  
  .about__grid{gap:0}
}/* the menu sheet still scrolls,it just no longer paints a scrollbar over the page */
.nav--open,it just no longer paints a scrollbar over the page */
.nav-toggle:checked ~ .nav{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.nav--open::-webkit-scrollbar,.nav-toggle:checked ~ .nav::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- 1.7.6: menu works with no JavaScript at all ---------- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.burger{user-select:none}
.nav-toggle:focus-visible ~ .burger{outline:2px solid var(--teal);outline-offset:3px}

@media (max-width:860px){
  /* the sheet opens purely from the checkbox state */
  .nav-toggle:checked ~ .nav{
    display:block;position:fixed;inset:68px 0 0;background:#fff;
    padding:8px 22px 48px;overflow-y:auto;border-top:1px solid var(--border);z-index:70;
  }
  /* no script means no toggle state, so the services list is simply open in the sheet */
  .nav-toggle:checked ~ .nav .nav__panel{display:grid}
  .nav-toggle:checked ~ .nav .nav__toggle{cursor:default}
  .nav-toggle:checked ~ .nav .nav__toggle svg{display:none}
  /* button becomes a close button */
  .nav-toggle:checked ~ .burger .burger__open{display:none}
  .nav-toggle:checked ~ .burger .burger__close{display:block}
  .nav-toggle:checked ~ .burger{border-color:var(--teal)}
  .nav-toggle:checked ~ .burger svg{stroke:var(--teal)}
}
@media (min-width:861px){
  /* never let a stale checked state affect desktop */
  .nav-toggle:checked ~ .nav{position:static;inset:auto;padding:0;background:none;border:0}
}

/* ---------- 1.7.8: the sheet was being trapped inside the header ----------
   .header carries backdrop-filter, and a backdrop-filter creates a containing block
   for fixed-position descendants. So the menu's position:fixed was resolving against
   the header box, not the viewport, which is why it opened as a small strip.
   On mobile the filter is dropped and the sheet is anchored to the header instead. */
@media (max-width:860px){
  .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .nav--open,.nav-toggle:checked ~ .nav{
    position:absolute;inset:auto;top:100%;left:0;right:0;
    height:calc(100dvh - 68px);
    max-height:calc(100dvh - 68px);
    background:#fff;border-top:1px solid var(--border);
    padding:8px 22px 48px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:70;
  }
}

/* ---------- Footer credit ---------- */
.footer__credit{color:#fff}
.footer__credit a{color:#fff;border-bottom:1px solid #2E4356;padding-bottom:1px;transition:color .18s var(--ease),border-color .18s var(--ease)}
.footer__credit a:hover{color:#fff;border-bottom-color:#4FB3E8}
.footer__heart{color:#B4564F;font-size:13px;line-height:1;padding:0 2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
@media (max-width:860px){
  .footer__credit{margin-top:2px}
}

/* ---------- 1.7.10: credentials strip on desktop ----------
   auto-fit left a divider hanging at the end of the first row and split the six
   items unevenly. A fixed three-column grid gives two even rows, and the divider
   is dropped on every third item so no line ever meets the panel edge. */
@media (min-width:861px){
  
  
  .trust ul{grid-template-columns:repeat(3,1fr);gap:24px 0}
  .trust li{padding:2px 26px;align-items:start}
  .trust li:nth-child(3n+1){padding-left:0}
  .trust li:nth-child(3n)::after{display:none}
  .trust li::after{top:4px;transform:none;height:38px}
  .trust li svg{margin-top:1px}
}

/* ---------- 1.7.12: each recovery phase becomes its own hoverable box ----------
   The rows stay aligned across phases by using subgrid, so a one-line title still
   lines up with a two-line one. Browsers without subgrid keep the flat layout. */
@supports (grid-template-rows: subgrid){
  @media (min-width:861px){
    .phases{gap:14px 10px}
    .phases::before{left:14%;right:14%;top:31px}
    .phase{
      display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:14px 0;
      padding:16px 12px 18px;border:1px solid transparent;border-radius:14px;
      justify-items:center;text-align:center;
      transition:background-color .22s var(--ease),border-color .22s var(--ease),
                 transform .22s var(--ease),box-shadow .22s var(--ease);
    }
    .phase:hover{
      background:var(--teal-tint);border-color:#A6C2DC;
      transform:translateY(-2px);box-shadow:var(--sh-sm);
    }
    
    .phase:hover strong{color:var(--teal)}
    .phase strong{transition:color .22s var(--ease)}
  }
}

@media (max-width:860px){
  /* mobile keeps the simple stacked layout */
  .phases{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:26px 16px;align-items:start}
  .phases::before{display:none}
  .phase{display:flex;flex-direction:column;align-items:center;gap:12px;grid-row:auto;padding:0;border:0}
  .phase__n,.phase strong,.phase span:not(.phase__n){grid-row:auto}
}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;font-size:14px}
.skip-link:focus{left:0;color:#fff}

/* ---------- Utility classes (replacing inline styles) ---------- */
.section--flush{padding-top:0}

.hubcard__title{font-size:19.5px;margin:14px 0 12px}
@media (max-width:1024px){}

/* ---------- 1.8.4: stop the entrance animation delaying LCP ----------
   The portrait is the largest contentful paint. It was running a fade-in with
   fill-mode both and a 180ms delay, which held it at opacity 0 during first paint
   and showed up in Lighthouse as element render delay. The image now paints
   immediately; the hover scale is unchanged. */
.portrait{animation:none!important;opacity:1!important;transform:none!important}

/* ---------- Social profile links ---------- */
.social{display:grid;gap:2px}
.social__link{display:inline-flex;align-items:center;gap:11px;padding:7px 0;font-size:14.5px;transition:color .18s var(--ease)}
.social__link svg{width:17px;height:17px;flex:none;fill:currentColor;stroke:none;opacity:.85;transition:opacity .18s var(--ease)}
.social__link:hover svg{opacity:1}
.social li{padding:0}

/* ---------- Trust signals ---------- */
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13.5px;color:var(--muted);line-height:1.6}
.byline__who a{color:var(--ink-soft);border-bottom:1px solid var(--border-2);padding-bottom:1px}
.byline__who a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.byline__date{position:relative;padding-left:19px}
.byline__date::before{content:"";position:absolute;left:0;top:50%;width:1px;height:13px;background:var(--border-2);transform:translateY(-50%)}

.disclaimer{background:var(--paper-2);border:1px solid var(--border);border-left:3px solid var(--border-2);border-radius:12px;padding:24px 26px}
.disclaimer__label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.disclaimer p{font-size:14.2px;line-height:1.75;color:var(--muted);max-width:78ch}
.disclaimer p+p{margin-top:12px}

.footer__disclaimer{border-top:1px solid var(--navy-line);font-size:13px;line-height:1.7;color:#fff;}
.footer__disclaimer + .footer__bottom{margin-top:20px}

@media (max-width:860px){
  .byline{gap:4px 0;flex-direction:column}
  .byline__date{padding-left:0}
  .byline__date::before{display:none}
  .disclaimer{padding:20px}
}

/* ---------- Legal / policy pages ---------- */
.legal{max-width:76ch}
.legal__block+.legal__block{margin-top:38px;padding-top:34px;border-top:1px solid var(--border)}
.legal h2{font-size:clamp(19px,2vw,23px);margin-bottom:16px}
.legal p{font-size:16px;line-height:1.8;color:var(--ink-soft)}
.legal p+p{margin-top:14px}

/* ---------- Map: click to load ---------- */
.mapframe{border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);background:var(--mint);line-height:0;display:flex}
.mapframe iframe{flex:1 1 auto;}
.mapframe iframe{display:block;width:100%;height:100%;min-height:360px;border:0}
.mapframe__fallback{display:block;padding:28px;font-size:15px;text-align:center;line-height:1.6}
@media (max-width:860px){
  .mapframe iframe{height:280px}
}

/* ---------- Footer: six columns on one row ----------
   The footer grew from four columns to six (brand, pages, specialties, follow,
   policies, contact) but the grid still declared four, so the last two wrapped onto
   a second row and left the first row half empty. */
@media (min-width:1025px){
  .footer__grid{grid-template-columns:1.55fr .85fr 1.15fr .8fr .95fr 1.2fr;gap:40px;align-items:start}
  .footer__brand p{max-width:28ch}
  .footer address{font-size:14px}
  .footer li{padding:5px 0}
}
@media (max-width:1024px){
  .footer__grid{grid-template-columns:repeat(3,1fr);gap:40px}
}
@media (max-width:860px){
  .footer__grid{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media (max-width:520px){
  .footer__grid{grid-template-columns:1fr;gap:30px}
}

/* ---------- Footer disclaimer: rule spans the footer, text keeps its measure ---------- */
.footer__disclaimer{max-width:none}
.footer__disclaimer span{display:block;max-width:92ch}

/* ---------- Footer vertical rhythm ----------
   The gaps either side of the two hairlines were inconsistent: 8px of grid padding
   plus a 44px margin above the first rule, 26px below it, then 44px and 24px around
   the second. Every rule now sits the same distance from what precedes and follows it. */
.footer__grid{padding:64px 0 0}
.footer__disclaimer{margin-top:36px;padding-top:32px}
.footer__bottom{margin-top:32px;padding:32px 0 40px}
@media (max-width:860px){
  .footer__grid{padding:48px 0 0}
  .footer__disclaimer{margin-top:30px;padding-top:26px}
  .footer__bottom{margin-top:26px;padding:26px 0 34px}
}

/* ---------- Footer bottom line: centred ----------
   The copyright and the credit were pushed to opposite edges, which left a wide
   empty span between them on desktop. They now stack in the middle of the footer,
   which is what the two lines are: one closing statement, not two columns. */
.footer__bottom--center{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
}

/* ---------- Back to top ----------
   Sits out of the reading column, appears once the page has been scrolled past a
   screen, and is a real anchor so it still works if scripting is blocked. */
.to-top{
  position:fixed;
  right:24px;
  /* Offset above the WhatsApp button, which is anchored at the corner. */
  bottom:88px;
  z-index:60;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  box-shadow:var(--sh-md);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease),background-color .18s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--teal-hover)}
.to-top svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (max-width:860px){
  .to-top{right:16px;bottom:76px;width:42px;height:42px}
  .to-top svg{width:18px;height:18px}
}
/* ---- floating WhatsApp button --------------------------------------------
   Anchored at the corner so it never moves; back-to-top is offset above it and
   is the one that appears on scroll. Visible from the start, because this is
   the only way to contact the clinic now that the phone line is gone.

   The label is kept in the markup for screen readers and assistive tech rather
   than dropped, so the control is not an unlabelled icon. */

.wa-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:60;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#17664e;
  box-shadow:var(--sh-md);
  transition:background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.wa-fab:hover{background:#12523e;transform:translateY(-2px);box-shadow:var(--sh-lg)}
.wa-fab:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.wa-fab .wa-btn__mark{width:27px;height:27px;color:#fff}

/* Visible to assistive tech, not on screen. */
.wa-fab .wa-btn__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:860px){
  .wa-fab{right:16px;bottom:16px;width:48px;height:48px}
  .wa-fab .wa-btn__mark{width:25px;height:25px}
}

@media (prefers-reduced-motion:reduce){
  .to-top,.wa-fab{transition:none}
}

/* ---------- Footer disclaimer: centred ----------
   Sits above a centred copyright line, so left-aligning it left the whole block
   looking off-axis. The measure is kept; it is just centred within the footer. */
.footer__disclaimer{text-align:center}
.footer__disclaimer span{margin-left:auto;margin-right:auto}

/* ---------- Footer hours on one line ----------
   The opening hours were breaking after "4:00", leaving a stranded "PM". The line is
   held together and the contact column given the width to carry it. */
.footer__hours{white-space:nowrap}
@media (min-width:1100px){
  .footer__grid{grid-template-columns:1.45fr .8fr 1.1fr .78fr .9fr 1.32fr}
}

/* 12 — v2.2.0 additions: key takeaways, brand logo, footer search, HTML sitemap */

/* Key takeaways box on procedure pages. Same visual language as .snote so it reads
   as part of the existing system rather than a bolted-on block. */
.section--tight{padding-top:0}
.keypoints{background:var(--paper);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:16px;padding:28px 30px;box-shadow:var(--sh-sm)}
.keypoints__title{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0 0 16px;font-weight:500}
.keypoints__lead{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--ink);max-width:78ch;font-weight:500}
.keypoints__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.keypoints__list li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:78ch}
.keypoints__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
@media (max-width:760px){.keypoints{padding:22px 20px}.keypoints__list li{font-size:14.5px}}

/* Optional logo image in the header. Sits above the wordmark, capped so a large
   upload cannot break the header height. */
.brand__logo{display:block;flex:0 0 auto;height:auto;max-height:42px;width:auto;max-width:120px;object-fit:contain;object-position:left center}
@media (max-width:760px){.brand__logo{max-height:32px;max-width:90px}.brand{gap:9px}}

/* Header search. A CSS-only toggle, same checkbox pattern the mobile menu uses:
   the icon opens a panel under the header bar rather than squeezing a text field
   into a row that already holds the brand, five nav items and the booking CTA. */
.search-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.search-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:4px;background:none;color:var(--ink);cursor:pointer;flex:0 0 auto;transition:border-color .2s var(--ease),color .2s var(--ease)}
.search-btn:hover{border-color:var(--teal);color:var(--teal)}
.search-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.search-btn__close{display:none}
.search-toggle:checked ~ .header__inner .search-btn__open{display:none}
.search-toggle:checked ~ .header__inner .search-btn__close{display:block}
.header__search{display:none;border-top:1px solid var(--border);background:#fff}
.search-toggle:checked ~ .header__search{display:block}
.hsearch{display:flex;gap:10px;padding:16px 0;max-width:560px}
.hsearch__input{flex:1 1 auto;min-width:0;background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--ink);font-family:inherit;font-size:15px}
.hsearch__input::placeholder{color:var(--muted)}
.hsearch__input:focus{outline:2px solid var(--teal);outline-offset:1px;background:#fff}
.hsearch__btn{flex:0 0 auto;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:11px 22px;font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:opacity .2s var(--ease)}
.hsearch__btn:hover{opacity:.9}
@media (max-width:760px){.hsearch{padding:14px 0}.hsearch__input{font-size:16px}}

/* HTML sitemap. */
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px 40px}
.sitemap__block h2{font-size:17px;letter-spacing:-.015em;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--border)}

@media (max-width:760px){}
.authorsteps{margin:18px 0 0;padding-left:20px;display:grid;gap:11px}
.authorsteps li{font-size:15px;line-height:1.7;color:var(--ink-soft);padding-left:4px}
.sitemap__note{font-size:13.8px;line-height:1.6;color:var(--muted);margin:-6px 0 14px;max-width:52ch}
.sitemap__block ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sitemap__block li a{font-size:14.8px;line-height:1.55;color:var(--ink-soft);transition:color .18s var(--ease)}
.sitemap__block li a:hover{color:var(--teal)}

/* ---------- Cities (multi-location) ---------- */
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.city{display:flex;flex-direction:column}
@media (max-width:1024px){.cities{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.cities{grid-template-columns:1fr;gap:14px}}

/* Hub links in the services mega-menu are now anchors, not plain labels. */
.nav__group-title a{color:inherit}
.nav__group-title a:hover{color:var(--teal)}

/* Tinted panel variant and its heading. Both classes were used by the contact and
   hub templates but had no rules, so the aside rendered as a plain white box with an
   unstyled paragraph where its heading should be. */
.panel--tint{background:var(--mint);border-color:var(--border-2)}
.qual__title{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border-2);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* ---- services directory -------------------------------------------------
   Three clusters, so a three-column track. .areas--two left an orphan in the
   second row; three items in two columns always will. The card is a list, not
   a prose card, so the number sits above the name and the conditions read as
   a ruled column underneath. */

.areas--three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.areas--three .area{display:flex;flex-direction:column;padding:28px}
.areas--three .area__idx{margin-bottom:10px}
.areas--three .area__idx b{font-family:var(--serif,Georgia,serif);font-size:22px;font-weight:400;color:#a9874c}
.areas--three .hubcard__title{margin:0 0 18px;font-size:20px;line-height:1.3}
.areas--three .area__list{flex:1;border-top:1px solid var(--border);margin-bottom:18px}
.areas--three .area__list a{display:block;padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--ink);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.areas--three .area__list a:hover{color:var(--teal);padding-left:6px}
.areas--three .link-u{align-self:flex-start}

@media (max-width:1024px){.areas--three{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.areas--three{grid-template-columns:1fr}}

/* ---- FAQ accordion (shared) ---------------------------------------------
   One FAQ presentation across the site: service pages, hub pages, the FAQ page
   and the homepage. A row per question, full width, hairline separated, with
   the answer opening underneath.

   Built on the site tokens rather than the service palette so it renders the
   same wherever it appears — service.css scopes its own tokens to
   body.dmd-service and cannot be relied on outside those templates.

   The panel opens with grid-template-rows 0fr -> 1fr, which animates to the
   answer's real height; max-height cannot, without a guessed number that
   eventually clips a long answer. */

.dmd-acc{display:flex;flex-direction:column;gap:14px}
.dmd-acc__item{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.dmd-acc__item:hover{border-color:var(--border-2);box-shadow:var(--sh-sm)}
.dmd-acc__item.is-open{border-color:var(--border-2)}
.dmd-acc__h{margin:0;font-size:inherit;font-weight:inherit}

.dmd-acc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;padding:26px 28px;
  background:none;border:0;text-align:left;cursor:pointer;
  font-family:inherit;color:var(--ink);
  transition:color .2s var(--ease)}
.dmd-acc__q{font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.01em}
.dmd-acc__btn:hover{color:var(--teal)}
.dmd-acc__btn:focus-visible{outline:2px solid var(--teal);outline-offset:-4px;border-radius:14px}

/* A chevron drawn from two borders on a rotated square: no icon font, no SVG
   in the markup, and the same span serves both states by rotating 180deg. */
.dmd-acc__icon{
  position:relative;flex:none;width:20px;height:20px;
  transition:transform .3s var(--ease)}
.dmd-acc__icon::before{
  content:"";position:absolute;top:5px;left:5px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  border-radius:0 0 2px 0;
  transform:rotate(45deg);
  transition:border-color .2s var(--ease)}
.dmd-acc__btn:hover .dmd-acc__icon::before{border-color:var(--teal)}
.dmd-acc__item.is-open .dmd-acc__icon{transform:rotate(180deg)}
.dmd-acc__item.is-open .dmd-acc__icon::before{border-color:var(--teal)}

/* Open by default; only a live accordion collapses anything. */
.dmd-acc__panel{display:grid;grid-template-rows:1fr;overflow:hidden}
.dmd-acc.is-live .dmd-acc__panel{
  grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.dmd-acc.is-live .dmd-acc__item.is-open .dmd-acc__panel{grid-template-rows:1fr}
.dmd-acc__inner{min-height:0}
.dmd-acc__inner p{
  margin:0;padding:0 28px 26px;max-width:76ch;
  font-size:15px;line-height:1.75;color:var(--ink-soft)}
.dmd-acc.is-live .dmd-acc__inner{opacity:0;transition:opacity .2s var(--ease)}
.dmd-acc.is-live .dmd-acc__item.is-open .dmd-acc__inner{opacity:1;transition:opacity .3s var(--ease) .08s}

/* The chevron only means something once the script can act on it. */
.dmd-acc:not(.is-live) .dmd-acc__icon{display:none}
.dmd-acc:not(.is-live) .dmd-acc__btn{cursor:default}

@media (max-width:640px){
  .dmd-acc{gap:12px}
  .dmd-acc__btn{padding:20px 20px;gap:16px}
  .dmd-acc__q{font-size:15.5px}
  .dmd-acc__inner p{padding:0 20px 20px;font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .dmd-acc__btn,.dmd-acc__item,.dmd-acc__icon,.dmd-acc__icon::before,
  .dmd-acc.is-live .dmd-acc__panel,.dmd-acc.is-live .dmd-acc__inner{transition:none}
}