/* Homepage redesign, v1.8.0. Loaded on the front page only.
   Existing data, service links, schema and other page templates are preserved. */
body.home{
 --fp-navy:#102f40;--fp-accent:#146583;--fp-sky:#acdbe7;--fp-text:#183542;
 --fp-muted:#526771;--fp-paper:#f7f6f2;--fp-line:#d7e0e2;--fp-serif:Georgia,'Times New Roman',serif;
 /* --teal, --teal-hover and --container now come from style.css: the
    header and footer are shared, so they cannot be redefined here
    without the chrome changing between the homepage and every other
    page. */
}
.fp{color:var(--fp-text);font-size:16px;line-height:1.8}
.fp *{box-sizing:border-box;min-width:0}
.fp p,.fp ul{margin:0}.fp ul{padding:0;list-style:none}
.fp h1,.fp h2,.fp h3{color:inherit;text-wrap:balance}
.fp h1,.fp h2{font-family:var(--fp-serif);font-weight:400;letter-spacing:-.035em}
.fp h3{font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.025em}
.fp a{color:var(--fp-accent)}
.fp a:focus-visible{outline:3px solid #2894bc;outline-offset:5px}
.fp a:hover{text-decoration:none}
.fp-sec{padding:100px 0;scroll-margin-top:100px}
.fp-sec--white{background:#fff}.fp-sec--cream{background:var(--fp-paper)}
.fp-sec--navy{background:var(--fp-navy);color:#fff}
.fp-head{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;margin-bottom:44px}
.fp-head__kicker,.fp-book__kicker{display:block;font-size:12px;line-height:1.6;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--fp-accent);margin-bottom:18px}
.fp-head h2,.fp-about h2,.fp-faq-aside h2{font-size:clamp(34px,3.8vw,49px);line-height:1.13;max-width:23ch}
.fp-head__note{font-size:16px;color:var(--fp-muted);max-width:43ch;justify-self:end}
.fp-sec--navy .fp-head__kicker,.fp-sec--navy .fp-head__note{color:#b7d3dd}
.fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 22px;min-height:52px;border:1px solid transparent;border-radius:4px;font-size:14px;font-weight:600;line-height:1.4;transition:background .2s,color .2s}
.fp-btn svg,.fp-link svg,.fp-area-lead__more svg{width:18px;height:18px;flex:none}
.fp .fp-btn--accent,.fp .fp-btn--navy{background:var(--fp-accent);color:#fff}
.fp .fp-btn--accent:hover,.fp .fp-btn--navy:hover{background:var(--fp-navy)}
.fp .fp-btn--outline{color:var(--fp-navy);border-color:#b8c9ce;background:transparent}
.fp .fp-btn--outline:hover{background:#fff;border-color:var(--fp-accent)}
.fp-wa{color:#17664e}
.fp-link{display:inline-flex;gap:12px;align-items:center;font-size:14px;font-weight:600;line-height:1.6}
.fp-link:hover{border-bottom-color:currentColor}
/* An editorial hero: readable heading and a large, unembellished portrait. */
.fp-hero{padding:72px 0 62px;}
.fp-hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);align-items:center;gap:72px}
.fp-pill{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.7;letter-spacing:.1em;text-transform:uppercase;color:var(--fp-accent);font-weight:600;max-width:44ch}
.fp-pill>span{flex:none}
.fp-hero h1{font-size:clamp(37px,4.1vw,56px);line-height:1.11;}
.fp-hero h1 span{font-style:italic;color:var(--fp-accent);display:block;}
.fp-hero__lede{font-size:16px;line-height:1.8;color:var(--fp-muted);max-width:62ch}
.fp-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fp-portrait{width:100%;max-width:470px;justify-self:end}
.fp-portrait__card{margin:0;background:#fff;overflow:hidden}
.fp-portrait__frame{position:relative;background:#fff}
.fp-portrait__frame picture{display:block}
.fp-portrait__img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.fp-portrait__veil{display:none}
.fp-portrait__cap{position:relative;background:var(--fp-navy);color:#fff;padding:26px 28px;text-align:left}
.fp-portrait__role{display:block;color:var(--fp-on-navy);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;margin-bottom:0}
.fp-portrait__name{font-family:var(--fp-serif);font-size:27px;line-height:1.25;display:block}

.fp-portrait__trust{display:flex;justify-content:space-between;gap:12px;padding:16px 22px;line-height:1.6;color:var(--fp-muted)}
.fp-portrait__trust b{font-weight:500;color:var(--fp-navy)}
.fp-hero__grid--noimg{grid-template-columns:1fr}.fp-hero__grid--noimg h1{max-width:26ch}
/* Credentials use an open horizontal band rather than six cards. */
.fp-credbar{border-bottom:1px solid var(--fp-line)}
.fp-credbar ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
.fp-credbar li+li{border-left:1px solid var(--fp-line);}
.fp-cred__label{display:block;font-size:12px;line-height:1.5;color:var(--fp-muted);margin-bottom:8px}
.fp-cred__value{display:block;font-size:14px;font-weight:600;line-height:1.5;color:var(--fp-navy)}
.fp-cred__det{display:block;font-size:12px;color:var(--fp-muted);line-height:1.6;margin-top:5px}
/* Biography and a margin column for professional background. */
.fp-about{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr);gap:80px}
.fp-about aside{order:2}.fp-about__body{order:1}
.fp-about h2{margin:0 0 28px}
.fp-prose{font-size:16px;color:var(--fp-muted)}.fp-prose p+p{margin-top:18px}
.fp-prose strong{font-weight:600;color:var(--fp-navy)}
.fp-prose a,.fp-quote a,.fp-cond__note a{text-decoration:underline;text-underline-offset:3px}
.fp-qcard{border-left:1px solid var(--fp-rule)}
.fp-qcard__head{display:flex;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fp-accent);padding-bottom:18px;border-bottom:1px solid var(--fp-line)}
.fp-qlist li{font-size:14px;color:var(--fp-muted);padding:14px 0;border-bottom:1px solid var(--fp-line)}
.fp-quote{margin-top:32px;padding-top:28px;border-top:1px solid var(--fp-line)}
.fp-quote__label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fp-accent);margin-bottom:12px}
.fp-quote__text{font-size:14px;line-height:1.9;color:var(--fp-muted)}
.fp-quote blockquote{margin:24px 0 0;border-left:2px solid var(--fp-accent);color:var(--fp-navy)}
.fp-quote blockquote p{font-family:var(--fp-serif);font-size:24px;line-height:1.5;font-style:italic}
.fp-quote cite{display:block;font-size:12px;font-style:normal;margin-top:12px;color:var(--fp-muted)}
/* One lead specialty panel alongside open editorial entries. */
.fp-areas{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);gap:52px}
.fp-area-lead{display:flex;flex-direction:column;justify-content:space-between;padding:38px;background:var(--fp-navy);color:#fff;}
.fp-area-lead__meta{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:1.6;color:var(--fp-on-navy)}
.fp-area-lead h3{font-family:var(--fp-serif);font-weight:400;font-size:36px;line-height:1.18;margin:26px 0 18px;color:#fff}
.fp-area-lead>div>p:not(.fp-area-lead__meta){font-size:16px;color:var(--fp-on-navy)}
.fp-area-lead__items{margin-top:28px}
.fp-area-lead__items a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid #3b5663;color:#fff;font-size:14px}
.fp-area-lead__items a:hover{color:var(--fp-sky)}
.fp-area-lead__items b{font-weight:500}.fp-area-lead__items em{font-style:normal;font-size:12px;color:var(--fp-on-navy);text-align:right}
.fp-area-lead__more{padding-top:26px}.fp-area-lead__more a{display:inline-flex;align-items:center;gap:12px;color:var(--fp-on-navy);font-size:14px}
.fp-area-grid{display:grid;}
.fp-area{border-top:1px solid #b6c9d0;padding-top:24px;display:flex;flex-direction:column;justify-content:space-between}
.fp-area__idx{font-size:12px;line-height:1.6;margin-bottom:16px!important}
.fp-area h3{font-size:23px;margin:0 0 14px}.fp-area p:not(.fp-area__idx):not(.fp-area__more){font-size:16px;color:var(--fp-muted)}
.fp-area__more .fp-link{font-size:14px}
/* Procedure directory: numbered rows, not a wall of small cards. */
.fp-svc{display:grid;gap:0 48px;border-top:1px solid var(--fp-line)}
.fp-svc__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--fp-line);color:var(--fp-text)!important;}
.fp-svc__card:hover{background:var(--fp-hover-ground)}
.fp-svc__card:hover h3,.fp-svc__card:hover .fp-svc__link{color:var(--fp-accent)}
.fp-svc__idx{left:0;top:31px;}
.fp-svc__card p{color:var(--fp-muted)}
.fp-svc__card .fp-svc__tag{display:flex;align-items:center;gap:9px;
  color:var(--fp-muted);}
.fp-svc__card .fp-svc__tag::before{content:"";flex:none;width:16px;height:2px;
  background:var(--fp-gold)}
.fp-svc__more{margin-top:32px!important}
.fp-cond a{justify-content:space-between;gap:16px;}
.fp-cond a::after{content:"";flex:none;width:8px;height:8px;
  border-top:1.6px solid var(--fp-accent);border-right:1.6px solid var(--fp-accent);
  transform:rotate(45deg)}
.fp-cond a:hover{color:var(--fp-accent);border-color:var(--fp-accent)}
.fp-cond__note{font-size:14px;color:var(--fp-muted);margin-top:30px!important;max-width:95ch}
/* Trust content is set as columns on a single navy surface. */
.fp-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.fp-why__card{display:flex;flex-direction:column;border-top:1px solid #4c6571;padding-top:24px}
.fp-why__num{font-family:var(--fp-serif);font-size:28px;}
.fp-why__card h3{font-size:21px;color:#fff;margin:18px 0 16px}.fp-why__card p{font-size:16px;color:var(--fp-on-navy)}
/* Clinic cards are retained where grouping helps the patient. */
.fp-cities{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:24px}
.fp-city{display:flex;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid var(--fp-line);background:#fff;}
.fp-city--main{border-top:3px solid var(--fp-accent)}
.fp-city__top{display:flex;align-items:start;justify-content:space-between;gap:14px}
.fp-city__kicker,.fp-city__label{display:block;color:var(--fp-muted);font-size:12px;line-height:1.6;margin-bottom:6px!important}
.fp-city h3{font-family:var(--fp-serif);font-size:32px;font-weight:400;color:var(--fp-navy)}
.fp-city__area,.fp-city__addr{font-size:14px;line-height:1.8;color:var(--fp-muted)}
.fp-city__badge{font-size:12px;line-height:1.6;border-bottom:1px solid currentColor;white-space:nowrap}
.fp-city__block{margin-top:26px}.fp-city__clinic{font-size:16px;font-weight:600;line-height:1.7}
.fp-city__rows{border-top:1px solid var(--fp-line);margin:22px 0 0;padding-top:14px}
.fp-city__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;line-height:1.65}
.fp-city__row dt{color:var(--fp-muted)}.fp-city__row dd{margin:0;text-align:right;font-weight:500}
.fp-city__hint{font-size:12px;color:var(--fp-muted);margin-top:14px!important}
.fp-city__actions{display:flex;gap:10px;margin-top:24px}.fp-city__actions a{flex:1;display:flex;justify-content:center;align-items:center;min-height:46px;border:1px solid var(--fp-line);font-size:14px;padding:10px;text-align:center;line-height:1.5}
.fp-city__actions .is-primary{background:var(--fp-navy);color:#fff;border-color:var(--fp-navy)}
.fp-city__actions a:hover{background:var(--fp-accent);border-color:var(--fp-accent);color:#fff}
/* A six-step timeline at a readable width. */
.fp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 48px}
.fp-step{border-top:1px solid var(--fp-rule);padding:22px 0;position:relative}
.fp-step__num{font-family:var(--fp-serif);font-size:28px}
.fp-step h3{font-size:22px;margin:12px 0}.fp-step p{font-size:16px;color:var(--fp-muted)}
.fp-faq-grid{display:grid;grid-template-columns:.8fr 1.35fr;gap:80px}
.fp-faq-aside h2{margin:0 0 24px}.fp-faq-aside p{color:var(--fp-muted);font-size:16px}.fp-faq-aside .fp-link{margin-top:24px}

/* A single consultation block, with contact details and booking actions. */
.fp-appt{display:grid;grid-template-columns:.9fr 1.2fr;gap:0;background:var(--fp-paper);border:1px solid var(--fp-line);overflow:hidden}
.fp-visit,.fp-book{padding:42px;display:flex;flex-direction:column;justify-content:space-between}
.fp-visit h2,.fp-book h2{font-family:var(--fp-serif);font-size:36px;font-weight:400;line-height:1.2;margin:0 0 12px}
.fp-visit__place{font-size:14px;color:var(--fp-muted)}
.fp-visit dl{display:grid;gap:22px;margin:26px 0 0}.fp-visit dt{font-size:12px;color:var(--fp-muted);margin-bottom:5px}
.fp-visit dd{margin:0;font-size:14px;line-height:1.8}
.fp 
.fp-book{background:var(--fp-navy);color:#fff}.fp-book__kicker{color:var(--fp-on-navy)}.fp-book h2{color:#fff;font-size:43px}
.fp-book__lede{color:var(--fp-on-navy);font-size:16px}
/* One card now that the call option is gone. auto-fit keeps it full width
   instead of leaving the second column empty, and would take a second
   channel back without another rule. */
.fp-book__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:30px}
.fp-book__action{display:block;padding:20px;border:1px solid var(--fp-rule-navy);}
.fp-book__action:hover{background:#214858}.fp-book__action--wa{border-color:#6c9b93}
.fp-book__action span{display:block;font-size:12px;color:#b4d5df}.fp-book__action b{display:block;font-size:20px;font-weight:600;color:#fff;margin:8px 0;overflow-wrap:anywhere}
.fp-book__action em{display:block;font-size:12px;font-style:normal;line-height:1.6;color:var(--fp-on-navy)}

.fp-book__foot{border-top:1px solid var(--fp-rule-navy);padding-top:24px;margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.fp-book__foot b{font-size:14px;color:#fff}.fp-book__foot p{font-size:12px;color:var(--fp-on-navy)}
.fp-book__foot a{display:inline-flex;align-items:center;min-height:46px;background:#d9edf2;color:var(--fp-navy);padding:10px 16px;font-size:14px;font-weight:600}
.fp-book__foot a:hover{background:#fff}
/* Home-only shared chrome; inner page layouts remain unchanged. */
body.home .header{background:#fff;backdrop-filter:none}
body.home .header__inner{gap:24px;height:88px}
body.home .brand__name{font-family:var(--fp-serif);font-weight:400;font-size:24px}
body.home .brand__role{font-size:10px;letter-spacing:.045em;max-width:44ch;margin-top:4px}
body.home .header .btn{border-radius:3px;font-size:14px}
body.home .util{background:var(--fp-navy);color:var(--fp-on-navy)}
body.home .footer{background:var(--fp-navy)}
body.home .footer__name{font-family:var(--fp-serif);font-weight:400;font-size:26px}
body.home .footer__grid{gap:28px}
.fp .fp-rise{opacity:1;transform:none}
.fp-br{display:none}
@media(min-width:1024px){.fp-about{grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr)}}
@media(max-width:1100px){
 .fp-hero__grid{gap:36px;grid-template-columns:1.2fr .9fr}.fp-hero h1{font-size:44px}
 .fp-hero__actions .fp-btn{padding:14px 18px}.fp-hero__actions{gap:10px}
 .fp-about,.fp-faq-grid{gap:44px}.fp-areas{gap:30px}.fp-area-lead{padding:28px}
 .fp-why{grid-template-columns:1fr 1fr;gap:36px}.fp-cities{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .fp-city{padding:22px}.fp-city__top{flex-wrap:wrap}.fp-city__row{flex-wrap:wrap}.fp-city__row dd{text-align:left}
 .fp-visit,.fp-book{padding:30px}.fp-book__actions{grid-template-columns:1fr}
 body.home .header__inner{gap:16px}body.home .brand__name{font-size:21px}
}
@media(max-width:860px){
 .fp-sec{padding:68px 0}.fp-hero{}.fp-hero__grid{grid-template-columns:1fr;gap:40px}
 /* Portrait first, headline second - stacked layout only. */
 .fp-hero__grid:not(.fp-hero__grid--noimg) > :first-child{order:2}
 .fp-hero__grid:not(.fp-hero__grid--noimg) > :last-child{order:1}
 .fp-hero h1{font-size:clamp(37px,6.5vw,54px);max-width:24ch}.fp-hero__lede{max-width:none}
 .fp-portrait{justify-self:center;}.fp-portrait__card{}
 .fp-credbar ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fp-credbar li:nth-child(4){border-left:0;padding-left:0}
 .fp-head{gap:24px;grid-template-columns:1fr 1fr}.fp-head h2,.fp-about h2,.fp-faq-aside h2{font-size:37px}
 .fp-about{grid-template-columns:1fr;gap:40px}.fp-qcard{padding:24px 0 0;border-left:0;border-top:1px solid var(--fp-line)}
 .fp-areas{grid-template-columns:1fr}.fp-area-lead{padding:32px}.fp-area-grid{gap:28px}
 .fp-svc{gap:0 28px}.fp-svc__card{padding-left:32px;padding-right:12px}.fp-cond{grid-template-columns:1fr 1fr}
 .fp-cities{grid-template-columns:1fr 1fr}.fp-city--main{grid-column:1/-1}.fp-city__row{flex-wrap:nowrap}
 .fp-steps{grid-template-columns:1fr 1fr;gap:10px 32px}.fp-faq-grid{grid-template-columns:1fr;gap:32px}
 .fp-appt{grid-template-columns:1fr}.fp-book__actions{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
 body.home .header__inner{height:76px}body.home .brand__name{font-size:21px}
}
@media(max-width:540px){
 body.home .container{padding-left:22px;padding-right:22px}
 .fp-sec{padding:54px 0}.fp-hero{padding-top:36px}.fp-pill{font-size:11px;letter-spacing:.05em}
 .fp-hero h1{font-size:38px;line-height:1.14}.fp-hero__actions{flex-direction:column;align-items:stretch}.fp-btn{width:100%}
.fp-portrait__name{font-size:25px}
 .fp-portrait__trust{flex-wrap:wrap;padding:16px 22px}.fp-credbar ul{grid-template-columns:1fr 1fr;}
 .fp-credbar li:nth-child(odd){border-left:0;padding-left:0}.fp-credbar li:nth-child(even){border-left:1px solid var(--fp-line);padding-left:16px}
 .fp-head{grid-template-columns:1fr;gap:20px;margin-bottom:30px}.fp-head__note{justify-self:start;font-size:16px}
 .fp-head h2,.fp-about h2,.fp-faq-aside h2{font-size:35px}.fp-head__kicker{margin-bottom:14px}
 .fp-quote blockquote{padding-left:18px}.fp-quote blockquote p{font-size:22px}
.fp-area-lead h3{font-size:32px}.fp-area-lead__meta{flex-wrap:wrap}
 .fp-area-lead__items a{align-items:start}.fp-area-lead__items em{max-width:45%}
 .fp-area-grid,.fp-svc,.fp-cond,.fp-cities,.fp-why{grid-template-columns:1fr}
 .fp-svc__card{padding-top:24px;padding-bottom:24px}.fp-svc__idx{top:27px}.fp-svc__card h3{font-size:22px}
 .fp-why{gap:30px}.fp-why__card h3{font-size:23px}.fp-city--main{grid-column:auto}
 .fp-steps{grid-template-columns:1fr;gap:4px}.fp-step{padding-left:46px;padding-top:22px}.fp-step__num{position:absolute;left:0;top:20px}.fp-step h3{margin-top:0}
 .fp-visit,.fp-book{padding:26px}.fp-visit h2{font-size:32px}.fp-book h2{font-size:36px}
 .fp-book__actions{grid-template-columns:1fr}.fp-book__foot a{width:100%;justify-content:center}
 body.home .brand__name{font-size:19px}body.home .brand__role{font-size:9px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){.fp *,.fp *::before,.fp *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the home menu aligned with its 76px header. */
@media(max-width:860px){body.home .nav-toggle:checked ~ .nav,body.home .nav--open{top:76px}}
@media(min-width:861px) and (max-width:1100px){body.home .header__cta{display:none}}

/* 1.8.3 - Refined surfaces and purposeful interaction. */
body.home{--fp-gold:#a9874c;--fp-motion:cubic-bezier(.22,.61,.36,1)}
/* One hover palette. Every :hover ground, line and tint on this page resolves
   here, so the homepage cannot drift back into four near-identical greys. */
body.home{
  --fp-hover-ground:#faf7f1;    /* warm cream - hovered light surface */
  --fp-hover-navy:#1f4657;      /* hovered dark surface */
  --fp-hover-line:#c2a877;      /* gold hairline on a hovered light card */
  --fp-hover-line-dark:#9b906c; /* the same hairline on navy */
}

/* Three more that had drifted into near-duplicates. */
body.home{
  --fp-on-navy:#c6d8df;    /* text on a dark panel */
  --fp-rule:#b9cbd1;       /* hairline on a light surface */
  --fp-rule-navy:#526e7a;  /* the same, on navy */
  --fp-gold-line:#bfa570;   /* gold rule on a light surface */
  --fp-gold-on-navy:#d6be8b;/* gold text on a dark panel */
}
.fp-hero{position:relative;background:#f3f5f3;border-bottom:0;padding-top:82px;padding-bottom:82px}
.fp-hero>.container{position:relative}
.fp-pill>span{height:2px;background:var(--fp-gold);width:38px}
.fp-hero h1{letter-spacing:-.045em}
.fp-hero h1 span{margin-top:12px}
.fp-portrait{position:relative;padding:10px}
.fp-portrait::before{content:"";position:absolute;inset:0;border:1px solid var(--fp-gold-line);border-radius:150px 150px 16px 16px;pointer-events:none}
.fp-portrait__card{border:1px solid var(--fp-line);border-radius:140px 140px 8px 8px;box-shadow:0 22px 50px -26px rgba(16,47,64,.38)}
.fp-portrait__frame{overflow:hidden}
.fp-portrait__img{transition:transform .7s var(--fp-motion)}
.fp-portrait__cap{padding-top:28px;padding-bottom:28px;border-top:3px solid var(--fp-gold-line)}
.fp-portrait__trust{background:#fff;font-size:12px}
.fp-hero__actions .fp-btn{border-radius:7px;min-height:56px}
.fp .fp-btn--accent{box-shadow:0 8px 18px -10px rgba(20,101,131,.55)}
.fp-credbar{position:relative;background:#fff;box-shadow:0 10px 28px -24px rgba(16,47,64,.3)}
.fp-credbar li{position:relative;}
.fp-cred__value{transition:color .25s var(--fp-motion)}
.fp-head__kicker::before{content:"";display:inline-block;width:22px;height:2px;background:var(--fp-gold);margin-right:11px;vertical-align:middle}
.fp-qcard{background:#fff;border:1px solid var(--fp-line);border-top:3px solid var(--fp-gold);border-radius:8px;padding:28px;box-shadow:0 14px 40px -30px rgba(16,47,64,.35)}
.fp-quote blockquote{background:#eef2ef;border-left-color:var(--fp-gold);padding:26px 28px;border-radius:0 8px 8px 0}
.fp-area-lead{border-radius:12px;box-shadow:0 24px 46px -30px rgba(16,47,64,.6);border:1px solid #36515b}
.fp-area-lead__meta{padding-bottom:20px;border-bottom:1px solid #45616b}
.fp-area-lead__items a{transition:background .25s,color .25s,padding .25s var(--fp-motion)}
.fp-area-grid{gap:22px}
.fp-area{padding:28px;border:1px solid var(--fp-line);border-radius:10px;background:#fff;transition:transform .3s var(--fp-motion),box-shadow .3s var(--fp-motion),border-color .3s}
.fp-area__idx{color:var(--fp-accent)}
.fp-area__more{border-top:1px solid #e5ebeb;margin-top:22px!important;padding-top:20px}
.fp-svc__card{border-radius:7px;transition:background .25s,box-shadow .3s var(--fp-motion),transform .3s var(--fp-motion);padding-right:42px}
.fp-svc__card::after{content:"";position:absolute;width:9px;height:9px;
  border-top:1.7px solid var(--fp-accent);border-right:1.7px solid var(--fp-accent);
  transform:rotate(45deg);transition:transform .25s var(--fp-motion)}
.fp-svc__card h3,.fp-area h3{transition:color .25s}
/* The card heading carries the link; this stretches its hit area over the whole
   card, so the card is still clickable but the link's accessible name is just
   the service name. */
.fp .fp-svc__card .fp-svc__link{color:inherit;text-decoration:none}
.fp-svc__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fp-cond a::after{transition:transform .25s var(--fp-motion)}
.fp-sec--navy{border-top:4px solid #b29966}
.fp-why__card{padding:26px 20px 24px;border:1px solid #36545f;border-radius:9px;background:#163747;transition:background .3s,border-color .3s,transform .3s var(--fp-motion)}
.fp-why__num{color:var(--fp-gold-on-navy)}
.fp-city{border-radius:12px;box-shadow:0 9px 28px -23px rgba(16,47,64,.35);transition:transform .3s var(--fp-motion),box-shadow .3s var(--fp-motion),border-color .3s}
.fp-city--main{border-top-color:var(--fp-gold)}
.fp-city__badge{color:#735b31;background:#f4eee1;padding:5px 9px;border:0;border-radius:4px}
.fp-city__actions a{border-radius:5px;transition:background .25s,color .25s,border-color .25s}
.fp-step{border-top-color:var(--fp-rule)}
.fp-step__num{color:var(--fp-gold)}

.fp-appt{border-radius:14px;box-shadow:0 22px 50px -30px rgba(16,47,64,.35)}
.fp-book{border-top:3px solid var(--fp-gold-line)}
.fp-book__action{border-radius:8px;transition:transform .25s var(--fp-motion),background .25s,border-color .25s}
.fp-book__foot a{border-radius:5px;transition:background .25s,transform .25s var(--fp-motion)}
.fp-btn,.fp-btn svg,.fp-link svg{transition:transform .25s var(--fp-motion),background .25s,color .25s,box-shadow .25s}
/* Keyboard users receive the same emphasis, without requiring a mouse. */
.fp-svc__card:focus-within,.fp-area:focus-within{
  background:var(--fp-hover-ground);border-color:var(--fp-hover-line)}
.fp-city:focus-within{border-color:var(--fp-hover-line);box-shadow:0 16px 36px -22px rgba(16,47,64,.3)}

/* Hover motion applies only to devices that have a precise pointing device. */
@media(hover:hover) and (pointer:fine){
 .fp-portrait:hover .fp-portrait__img{transform:scale(1.025)}
 .fp-btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(16,47,64,.45)}
 .fp-btn:hover svg{transform:translateX(3px)}
 .fp-area:hover{transform:translateY(-5px);border-color:var(--fp-hover-line);box-shadow:0 20px 40px -26px rgba(16,47,64,.4)}
 .fp-area:hover h3{color:var(--fp-accent)}
 .fp-area-lead__items a:hover{background:var(--fp-hover-navy);padding-left:10px;padding-right:10px;color:#fff}
 .fp-svc__card:hover{background:var(--fp-hover-ground);transform:translateY(-2px);box-shadow:0 12px 28px -24px rgba(16,47,64,.4)}
 .fp-svc__card:hover::after{transform:rotate(45deg) translate(3px,-3px)}
 .fp-link:hover svg{transform:translateX(4px)}
 .fp-cond a:hover{background:var(--fp-hover-ground)}
 .fp-cond a:hover::after{transform:rotate(45deg) translate(3px,-3px)}
 .fp-why__card:hover{background:var(--fp-hover-navy);border-color:var(--fp-hover-line-dark);transform:translateY(-4px)}
 .fp-city:hover{transform:translateY(-5px);border-color:var(--fp-hover-line);box-shadow:0 22px 44px -27px rgba(16,47,64,.4)}
 .fp-faq summary:hover{color:var(--fp-accent)}
 .fp-book__action:hover{transform:translateY(-3px);background:var(--fp-hover-navy);border-color:var(--fp-hover-line-dark)}
 .fp-book__action--wa:hover{background:#224b44;border-color:#91c9b6}
 .fp-book__foot a:hover{transform:translateY(-2px)}
}
@media(max-width:1100px){.fp-area{padding:22px}.fp-hero{padding-top:64px;padding-bottom:64px}.fp-qcard{padding:24px}}
@media(max-width:860px){.fp-hero{padding:48px 0}.fp-portrait{max-width:450px}.fp-portrait::before{border-radius:110px 110px 16px 16px}.fp-portrait__card{border-radius:100px 100px 8px 8px}.fp-why__card{padding:26px}}
@media(max-width:540px){.fp-hero{padding:36px 0 46px}.fp-portrait{padding:7px}.fp-portrait__cap{padding:22px}.fp-area{padding:25px}.fp-qcard{padding:22px}.fp-quote blockquote{padding:22px}.fp-area-lead{padding:26px}.fp-credbar{}.fp-svc__card{padding-right:35px}.fp-svc__card::after{right:5px}.fp-appt{border-radius:10px}}
@media(prefers-reduced-motion:reduce){
 .fp *,.fp *::before,.fp *::after{animation:none!important;transition:none!important}
 /* The 45deg is the arrow's shape, not its motion - only the travel goes. */
 .fp-svc__card:hover::after,.fp-cond a:hover::after{transform:rotate(45deg)!important}
 .fp-portrait:hover .fp-portrait__img,.fp-btn:hover,.fp-btn:hover svg,.fp-area:hover,.fp-svc__card:hover,.fp-link:hover svg,.fp-why__card:hover,.fp-city:hover,.fp-book__action:hover,.fp-book__foot a:hover{transform:none!important}
}

/* =========================================================================
   Hero headline
   -------------------------------------------------------------------------
   The block now has three distinct voices instead of three copies of one:
   a small eyebrow naming the clinic, the ranking phrase set large in the
   accent italic, and the full designation beneath it as a sans deck. The
   deck is sans deliberately - against the serif line above it, it reads as
   a subtitle rather than as a second headline competing for the same job.

   Selectors are qualified with .fp-hero h1 because the older
   `.fp-hero h1 span` rule further up is (0,0,1,2) and would otherwise win
   over a bare class and re-italicise the deck.
   ========================================================================= */

body.home{--fp-sans:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif}

.fp-hero h1{max-width:none;margin:22px 0 26px}

/* The name leads the headline at the same size as the specialty, so the two
   read as one nameplate. Qualified with `.fp-hero h1` for the same reason the
   others are: the older `.fp-hero h1 span` rule is (0,0,1,2) and would
   otherwise italicise and re-colour this line. */
.fp-hero h1 .fp-h1__name{
  display:block;font-style:normal;color:var(--fp-navy);
  line-height:1.05;margin-top:0}

.fp-hero h1 .fp-h1__key{
  display:block;font-style:italic;color:var(--fp-accent);
  line-height:1.05;margin-top:2px;max-width:none}

/* A sibling of the H1 now, not a child, so the size cannot be relative to it. */
.fp-hero .fp-h1__sub{
  display:block;font-family:var(--fp-sans);font-style:normal;font-weight:500;
  font-size:clamp(16px,1.75vw,23px);line-height:1.32;letter-spacing:0;
  color:var(--fp-text);margin:16px 0 0;max-width:none}

@media(max-width:1100px){
  .fp-hero .fp-h1__sub{font-size:clamp(16px,2.1vw,22px)}
}
@media(max-width:540px){
  .fp-hero h1{margin:18px 0 22px}
  .fp-hero h1 .fp-h1__name{font-size:.86em}
  .fp-hero .fp-h1__sub{font-size:19px;margin-top:13px}
}

/* =========================================================================
   Credential bar
   -------------------------------------------------------------------------
   All six credentials and every word of their detail are unchanged. What was
   wrong was the alignment: each item was an independent box, so as soon as one
   value wrapped to two lines ("FCPS-II Thoracic Surgery") its detail line
   dropped below the details in the other five columns and the whole row lost
   its horizontal rhythm.

   Each item now spans three shared rows of the parent grid via subgrid, so
   label, value and detail each sit on one common baseline across all six
   columns no matter how any one of them wraps. Behind @supports, because
   without subgrid `grid-row:span 3` on its own would break the layout rather
   than degrade it - browsers that lack it keep exactly what they render today.

   The label also moves to a tracked uppercase micro-label. At 12px sentence
   case it read as body copy competing with the detail line beneath the value;
   the three tiers now separate on sight, and it matches the eyebrow and
   section kickers used elsewhere on the page.
   ========================================================================= */

.fp-credbar ul{grid-template-rows:auto auto auto;align-items:start}

@supports (grid-template-rows:subgrid){
  .fp-credbar li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}

.fp-credbar .fp-cred__label{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fp-muted);align-self:start}
.fp-credbar .fp-cred__value{
  text-wrap:balance;align-self:start}
.fp-credbar .fp-cred__det{align-self:start}

/* The divider now runs the full height of the item, so the six rules match. */

@media(max-width:1100px){
  .fp-credbar .fp-cred__label{letter-spacing:.1em}
}
@media(max-width:540px){
  .fp-credbar .fp-cred__label{font-size:10px;margin-bottom:8px}
}

/* =========================================================================
   Credential bar - premium pass
   -------------------------------------------------------------------------
   The alignment fix made the bar correct; it was still flat. Three changes,
   all borrowed from vocabulary the page already owns rather than invented for
   this strip:

   1. A short gold rule opens each column. The same 2px gold mark already sets
      the hero eyebrow and every section kicker, so the bar stops reading as a
      table dropped under the hero and starts reading as part of the page.
      It is a child of the label, not an absolutely positioned pseudo-element
      on the item, so it inherits the column's padding instead of needing a
      second rule to correct for the gutter.

   2. Values move to the display serif at 19.5px. At 14.5px semibold sans they
      were the same voice as the navigation; in Georgia at regular weight they
      carry the weight a credential should, and they answer the h1 and section
      headings, which are the only other serif on the page.

   3. More air - 56px bands, wider gutters, a longer gold rule on hover. A
      premium strip is mostly space; the previous 38px made six columns feel
      packed against the hero above them.
   ========================================================================= */

.fp-credbar{padding:56px 0}
.fp-credbar ul{gap:0 30px}
.fp-credbar li+li{padding-left:30px}

.fp-credbar .fp-cred__label::before{
  content:"";display:block;width:26px;height:2px;background:var(--fp-gold);
  margin-bottom:15px;transition:width .4s var(--fp-motion)}
.fp-credbar li:hover .fp-cred__label::before,
.fp-credbar li:focus-within .fp-cred__label::before{width:100%}

.fp-credbar li{transition:background-color .32s var(--fp-motion),
  box-shadow .32s var(--fp-motion)}
.fp-credbar li:hover,.fp-credbar li:focus-within{
  background:var(--fp-hover-ground);box-shadow:0 0 0 12px var(--fp-hover-ground)}
.fp-credbar .fp-cred__label{transition:color .3s var(--fp-motion)}
.fp-credbar li:hover .fp-cred__label,
.fp-credbar li:focus-within .fp-cred__label{color:var(--fp-navy)}

.fp-credbar .fp-cred__label{margin-bottom:12px}
.fp-credbar .fp-cred__value{
  font-family:var(--fp-serif);font-weight:400;font-size:19.5px;
  line-height:1.3;letter-spacing:-.012em;color:var(--fp-navy)}
.fp-credbar .fp-cred__det{font-size:12.5px;line-height:1.65;margin-top:9px}

@media(max-width:1100px){
  .fp-credbar{padding:46px 0}
  .fp-credbar ul{gap:32px 26px}
  .fp-credbar li+li{padding-left:26px}
  .fp-credbar .fp-cred__value{font-size:18.5px}
}
@media(max-width:540px){
  .fp-credbar{padding:36px 0}
  .fp-credbar ul{gap:26px 18px}
  .fp-credbar li+li{padding-left:18px}
  .fp-credbar .fp-cred__label::before{width:20px;margin-bottom:12px}
  .fp-credbar .fp-cred__value{font-size:17.5px}
}

/* =========================================================================
   About - qualifications card
   -------------------------------------------------------------------------
   Each row now carries the label that used to sit in the duplicate <dl>
   beneath the list, so the six entries are self-describing and the card no
   longer states three of them twice.

   The aside also becomes sticky. The body column runs roughly 300px longer
   than the card, which left the card marooned at the top of a tall empty
   column; travelling with the reader turns that dead space into the card
   staying available while the three paragraphs are read. `align-self:start`
   is required - a stretched grid item cannot stick.
   ========================================================================= */

.fp-qlist li{display:grid;}
.fp-qlist__label{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fp-accent)}
.fp-qlist__value{font-size:14px;line-height:1.6;color:var(--fp-navy)}
.fp-qlist li:last-child{border-bottom:0}

@media(min-width:1024px){
  .fp-about aside{position:sticky;top:96px;align-self:start}
}

/* ---- qualifications rows: hover ----------------------------------------
   Same vocabulary as the credential bar, so the two qualification displays on
   this page respond alike: the ground warms and a gold mark appears. No colour
   change on the value and no movement - nothing in this card is a link, and a
   row that shifts under the cursor invites a click that goes nowhere.

   The warm ground is bled sideways with two offset shadows rather than a
   spread, because a spread would bleed vertically too and wash over the rows
   above and below. This way the band runs to the card's padding and stops. */

.fp-qlist li{
  position:relative;
  transition:background-color .28s var(--fp-motion),box-shadow .28s var(--fp-motion)}
.fp-qlist li::before{
  content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:2px;
  background:var(--fp-gold);transform:scaleY(0);
  transition:transform .34s var(--fp-motion)}
.fp-qlist li:hover,.fp-qlist li:focus-within{
  background:var(--fp-hover-ground);
  box-shadow:-14px 0 0 var(--fp-hover-ground),14px 0 0 var(--fp-hover-ground)}
.fp-qlist li:hover::before,.fp-qlist li:focus-within::before{transform:scaleY(1)}

/* ---- areas: the lead card had a hole in it -----------------------------
   The navy card spans both rows of the grid beside it, so it is as tall as
   two of the small cards - but its content stopped about 280px short, and
   `justify-content:space-between` pushed "View all proctology procedures" to
   the floor, leaving that gap sitting in the middle of a dark panel where it
   read as a mistake rather than as space.

   The four procedure rows now absorb it. Each row is a flex item that grows,
   so all four share the extra height evenly and their content stays centred
   in the taller row. The rules stay attached to the bottom of each row, so the
   list is still one continuous ruled column rather than four separated strips
   - which is what `justify-content:space-between` on the list would have given.

   Where the card is not height-constrained (single column, below 1024px) the
   rows have no extra height to share and keep their natural size. */

.fp-area-lead>div{flex:1;display:flex;flex-direction:column;min-height:0}
.fp-area-lead__items{flex:1;display:flex;flex-direction:column;min-height:0}
.fp-area-lead__items a{flex:1}

/* ---- process steps: hover, and the path the note promises ---------------
   Ruled items, so the ruled-item gesture: the gold rule draws across the
   hairline the step already has, and the ground warms. No lift and no teal -
   a step is not a link, and this page reserves teal for things that are.

   The connector closes the 48px hole between the three rules in a row, so the
   hairline reads as one line running left to right, which is what "a
   consistent path" describes. It is drawn only between steps in the same row;
   after the third it would point at nothing. */

.fp-step{transition:background-color .3s var(--fp-motion),box-shadow .3s var(--fp-motion)}
.fp-step::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--fp-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--fp-motion)}
.fp-step:hover::before,.fp-step:focus-within::before{transform:scaleX(1)}
.fp-step:hover,.fp-step:focus-within{
  background:var(--fp-hover-ground);
  box-shadow:-14px 0 0 var(--fp-hover-ground),14px 0 0 var(--fp-hover-ground)}

@media(min-width:1101px){
  .fp-step:not(:nth-child(3n))::after{
    content:"";position:absolute;top:-1px;right:-48px;width:48px;height:1px;
    background:var(--fp-rule)}
}
@media(min-width:541px) and (max-width:1100px){
  .fp-step:not(:nth-child(2n))::after{
    content:"";position:absolute;top:-1px;right:-32px;width:32px;height:1px;
    background:var(--fp-rule)}
}

/* ---- city-card actions: the modifiers the markup already asked for -------
   `.is-secondary` and `.is-plain` were applied in the template but defined
   nowhere, so all three buttons drew the same outline and the hierarchy the
   class names describe existed only in the HTML. `.is-plain` is deliberately
   the quietest: it is the sole action on the Islamabad and Lahore cards,
   which are by prior appointment rather than a walk-in clinic. */

.fp-city__actions .is-plain{
  background:transparent;color:var(--fp-muted);border-color:var(--fp-line)}

/* The count beside "Qualifications" was the one class in the markup with no
   rule at all. Tabular figures so it sits square against the label. */
.fp-qcard__count{font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* ---- content update: layout adjustments the approved copy requires ------
   Three areas, not five, so the grid beside the navy lead card holds two
   stacked cards rather than a 2x2. The lead card spans both rows, which is
   what keeps the three areas the same height.

   The hero lede is two paragraphs now, and the About section closes on a link
   to the full profile. */

.fp-area-grid{grid-template-columns:1fr}
.fp-hero__lede + .fp-hero__lede{margin-top:14px}
.fp-about__more{margin-top:26px}

@media(max-width:1023px){
  .fp-area-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .fp-area-grid{grid-template-columns:1fr}
}

/* ---- why-choose: three across ------------------------------------------
   Six cards in a four-column track rendered 4 + 2, leaving half the second row
   empty. Three columns fills both rows. The 1100px breakpoint keeps its two
   columns, which is 3 + 3 -> 2 + 2 + 2 rather than a 3-wide track squeezed. */

/* =========================================================================
   Services directory - redesigned
   -------------------------------------------------------------------------
   Nine cards in a two-column track ran four rows plus a single orphan, so the
   section was ~1400px tall and ended on a half-empty row. Nine divides by
   three exactly: 3 x 3, no orphan, and about a third less height.

   The number was absolutely positioned in a 44px gutter on the left of every
   card. At a third of the width that gutter is expensive, so the number moves
   inline above the title and takes the gold display serif the process steps
   already use - the card now reads number, title, line, qualifier, top to
   bottom, instead of the eye starting in a margin.
   ========================================================================= */

.fp-svc{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px}
.fp-svc__card{padding:26px 34px 26px 18px}
.fp-svc__idx{
  position:static;display:block;font-family:var(--fp-serif);font-weight:400;
  font-size:21px;line-height:1;margin-bottom:13px;color:var(--fp-gold)}
.fp-svc__card h3{font-size:19.5px;line-height:1.3;margin:0 0 10px}
.fp-svc__card p{font-size:14.6px;line-height:1.65}
.fp-svc__card .fp-svc__tag{font-size:11.5px;padding-top:14px}
.fp-svc__card::after{top:31px;right:12px}

@media(max-width:1100px){
  .fp-svc{grid-template-columns:1fr 1fr;column-gap:26px}
}
@media(max-width:860px){
  .fp-svc{grid-template-columns:1fr}
  .fp-svc__card{padding:22px 34px 22px 16px}
}

/* =========================================================================
   Conditions treated - redesigned
   -------------------------------------------------------------------------
   Thirteen items in a three-column grid ran four rows plus one item stranded
   alone on a fifth. Thirteen is prime, so no column count divides it evenly -
   a grid will always orphan something here, whatever number you pick.

   A flowing wrapped list has no rows to leave half-empty: the items pack
   themselves and the count stops mattering. It also removes the other fault -
   each row was a full-width link with its label at one end and a chevron at
   the other, so "Appendicitis" sat with 400px of nothing between it and its
   arrow. The chip is the width of its own words.

   The chevrons go with it. Thirteen arrows in a packed block is noise; the
   border already says these are separate, tappable things, and the hover
   confirms it. Chips are 6px, the radius the service cards use, rather than
   fully rounded pills, which would read as a filter bar from a different site.
   ========================================================================= */

.fp-cond{display:flex;flex-wrap:wrap;gap:10px;grid-template-columns:none}
.fp-cond li{padding:0}
.fp-cond a{
  display:inline-flex;align-items:center;min-height:0;
  padding:12px 18px;border:1px solid var(--fp-line);border-bottom:1px solid var(--fp-line);
  border-radius:6px;background:#fff;font-size:14.5px;line-height:1.4;
  color:var(--fp-navy);
  transition:background-color .28s var(--fp-motion),border-color .28s var(--fp-motion),
             color .28s var(--fp-motion)}
.fp-cond a::after{display:none}
.fp-cond a:hover,.fp-cond a:focus-visible{
  padding-left:18px;background:var(--fp-hover-ground);border-color:var(--fp-hover-line)}

@media(max-width:860px){
  .fp-cond{gap:8px}
  .fp-cond a{padding:10px 15px;font-size:14px}
  .fp-cond a:hover{padding-left:15px}
}

/* ---- qualifications card: the awarding body -----------------------------
   Third tier under each value. It is the part that does the E-E-A-T work -
   "FCPS" means little without "College of Physicians and Surgeons Pakistan" -
   and it was the only field of $dmd_creds the card was throwing away. */

.fp-qlist li{gap:4px}
.fp-qlist__det{font-size:12.5px;line-height:1.55;color:var(--fp-muted)}