/* ==========================================================================
   Advitya Healthcares — Gallbladder Surgery
   Design system + page styles
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-900:#3A0A0C;
  --navy-800:#5A1013;
  --navy-700:#78161A;
  --navy-600:#8F2126;
  --blue-600:#9E2430;
  --blue-500:#C24A44;
  --blue-100:#F7E1DF;
  --blue-050:#FDF5F3;
  --teal-600:#C4523C;
  --teal-500:#DF6A50;
  --teal-100:#FBE6DF;
  --amber-700:#B25E09;
  --amber-050:#FFF7EC;
  --ink:#2A1214;
  --body:#5B4F50;
  --muted:#8A7A7B;
  --line:#EFE3E1;
  --line-soft:#F6EEEC;
  --surface:#FFFFFF;
  --surface-2:#FBF7F6;
  --surface-3:#F5EDEB;

  --radius-xs:10px;
  --radius-sm:14px;
  --radius:18px;
  --radius-lg:24px;
  --radius-xl:32px;

  --shadow-xs:0 1px 2px rgba(58,10,12,.06);
  --shadow-sm:0 4px 14px rgba(58,10,12,.06);
  --shadow:0 12px 30px rgba(58,10,12,.08);
  --shadow-lg:0 26px 60px rgba(58,10,12,.12);
  --shadow-blue:0 14px 30px rgba(158,36,48,.24);

  --font-head:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  --header-h:0px;
  --wrap:1240px;
  --gutter:clamp(18px,4vw,32px);
  --section-y:clamp(54px,5.8vw,90px);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,1.05vw,1.0625rem);
  line-height:1.68;
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0 0 .5em;line-height:1.16;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.15rem,4.4vw,3.85rem);letter-spacing:-.032em}
h2{font-size:clamp(1.78rem,3vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.015em}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue-100);color:var(--navy-800)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--surface-2)}
.section--soft{background:linear-gradient(180deg,#FFF 0%,var(--surface-2) 100%)}
.sec-head{max-width:760px;margin-bottom:clamp(30px,4vw,52px)}
.sec-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-600);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--teal-500),var(--blue-500));border-radius:2px}
.sec-head--center .eyebrow::before{display:none}
.sec-sub{font-size:clamp(1rem,1.5vw,1.09rem);color:var(--muted);margin:0}
.lead{font-size:clamp(1.02rem,1.6vw,1.14rem);color:var(--body)}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:var(--blue-600);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,color .22s,border-color .22s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(135deg,var(--blue-600),var(--navy-700));box-shadow:var(--shadow-blue)}
.btn--primary:hover{box-shadow:0 18px 38px rgba(158,36,48,.32)}
.btn--ghost{background:#fff;color:var(--navy-800);border-color:var(--line);box-shadow:var(--shadow-xs)}
.btn--ghost:hover{border-color:var(--blue-500);color:var(--blue-600);box-shadow:var(--shadow-sm)}
.btn--teal{background:linear-gradient(135deg,var(--teal-500),var(--teal-600));box-shadow:0 14px 30px rgba(196,82,60,.26)}
.btn--wa{background:#1FA855;box-shadow:0 14px 30px rgba(31,168,85,.24)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--white{background:#fff;color:var(--navy-800);box-shadow:var(--shadow)}
.btn--sm{padding:11px 20px;font-size:.875rem}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 6b. Specialist profile band + booking widget ---------- */
.phero{
  position:relative;color:#fff;
  padding-top:clamp(92px,7.5vw,108px);
  padding-bottom:34px;
  background:linear-gradient(103deg,#480D10 0%,#6A1418 32%,#8A2320 58%,#5A1013 80%,#360A0C 100%);
}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-radial-gradient(circle at 74% 8%,rgba(255,255,255,.16) 0 1px,transparent 1px 30px);
  -webkit-mask-image:radial-gradient(60% 90% at 78% 10%,#000,transparent 72%);
  mask-image:radial-gradient(60% 90% at 78% 10%,#000,transparent 72%);
}
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-radial-gradient(circle at 18% 118%,rgba(255,255,255,.12) 0 1px,transparent 1px 38px);
  -webkit-mask-image:radial-gradient(55% 80% at 22% 110%,#000,transparent 70%);
  mask-image:radial-gradient(55% 80% at 22% 110%,#000,transparent 70%);
}
.phero .wrap{max-width:1700px}
.phero__grid{position:relative;z-index:2;display:grid;grid-template-columns:300px minmax(0,1fr) 500px;gap:44px;align-items:start}

.phero__photo{width:300px;height:424px;border-radius:12px;overflow:hidden;background:#6E1418;box-shadow:0 16px 34px rgba(30,6,8,.32)}
.phero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.phero__reg{font-size:.83rem;color:rgba(255,255,255,.78);margin:0 0 10px;letter-spacing:.01em}
.phero__nameline{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.phero h1{color:#fff;font-size:clamp(1.9rem,2.5vw,2.2rem);font-weight:700;margin:0;letter-spacing:-.02em}
.phero__share{
  width:30px;height:30px;flex:none;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.9);
  display:grid;place-items:center;border-radius:50%;transition:background .2s;
}
.phero__share:hover{background:rgba(255,255,255,.14)}
.phero__share svg{width:19px;height:19px}
.facts{display:grid;gap:9px;margin:0 0 18px;max-width:760px}
.facts li{font-size:.95rem;color:rgba(255,255,255,.94);line-height:1.5}
.facts b{font-weight:600}
.phero__rule{height:1px;background:rgba(255,255,255,.28);max-width:920px;margin:0}
.phero__line{display:flex;align-items:center;gap:12px;padding:13px 0;font-size:.93rem;color:#fff;margin:0}
.phero__line > svg{width:17px;height:17px;color:#fff;opacity:.9;flex:none}
.phero__line span{display:inline-flex;align-items:center;gap:9px}
.phero__line span::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;opacity:.85}
.phero__pill{
  display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:0;
  font-family:var(--font-body);font-weight:500;font-size:.98rem;color:#fff;
}
.phero__pill i{
  width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
  display:grid;place-items:center;flex:none;transition:background .2s;
}
.phero__pill i svg{width:16px;height:16px;color:#fff}
.phero__pill:hover i{background:rgba(255,255,255,.18)}

/* booking widget */
.widget{
  position:absolute;top:0;right:0;width:500px;z-index:3;
  background:#fff;border:1px solid #EFE1DF;border-radius:8px;
  box-shadow:0 18px 44px rgba(30,6,8,.22);overflow:hidden;
}
.widget__head{padding:19px 26px;background:#FBF5F4;border-bottom:1px solid #EFE1DF}
.widget__head h2{margin:0;font-size:1.14rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.widget__body{padding:20px 26px 22px}
.widget__label{display:block;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink);margin:0 0 12px}
.radios{display:grid;gap:12px;margin-bottom:20px}
.radio{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.94rem;color:var(--body)}
.radio input{
  appearance:none;-webkit-appearance:none;width:17px;height:17px;border-radius:50%;flex:none;margin:2px 0 0;
  border:1.6px solid #D3BDBB;background:#fff;transition:border-color .2s,box-shadow .2s;
}
.radio input:checked{border-color:var(--blue-600);box-shadow:inset 0 0 0 3.5px var(--blue-600)}
.radio input:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px}
.radio span{line-height:1.45}
.radio span b{display:block;font-family:var(--font-body);font-weight:600;color:var(--navy-800);font-size:.94rem}
.radio span small{color:var(--muted);font-size:.81rem}
.radio input:checked ~ span b{color:var(--blue-600)}

.picker{display:flex;align-items:center;gap:6px;margin-bottom:20px}
.picker__btn{
  width:26px;height:40px;flex:none;border:0;background:none;cursor:pointer;color:#A5908F;
  display:grid;place-items:center;transition:color .2s;
}
.picker__btn:hover:not(:disabled){color:var(--blue-600)}
.picker__btn:disabled{opacity:.35;cursor:default}
.picker__btn svg{width:17px;height:17px}
.picker__btn--prev svg{transform:rotate(180deg)}
.picker__track{display:flex;gap:9px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px 0}
.picker__track::-webkit-scrollbar{display:none}
.slot{
  flex:none;width:66px;border:1px solid #EFE1DF;background:#fff;border-radius:8px;
  padding:9px 4px;cursor:pointer;text-align:center;font-family:var(--font-body);
  transition:border-color .2s,background .2s,color .2s;
}
.slot:hover{border-color:var(--blue-500)}
.slot small{display:block;font-size:.78rem;font-weight:500;color:#93807F;line-height:1.3}
.slot b{display:block;font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.3}
.slot[aria-pressed="true"]{background:#9E2430;border-color:#9E2430}
.slot[aria-pressed="true"] small{color:rgba(255,255,255,.86)}
.slot[aria-pressed="true"] b{color:#fff}
.slot--time{width:70px;padding:8px 4px}
.slot--time b{font-size:.98rem}
.slot--time small{font-size:.8rem}
.widget__note{margin:0;font-size:.74rem;color:#A5908F;line-height:1.5}
.widget__actions{display:grid;grid-template-columns:1fr 1fr}
.widget__actions a,.widget__actions button{
  display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 12px;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:.98rem;transition:filter .2s,background .2s,color .2s;
}
.widget__actions svg{width:17px;height:17px}
.widget__book{background:linear-gradient(135deg,#DF6A50,#9E2430);color:#fff}
.widget__book:hover{filter:brightness(1.05)}
.widget__book svg{width:15px;height:15px}
.widget__call{background:#fff;color:var(--navy-700);border-left:1px solid #EFE1DF}
.widget__call:hover{color:var(--blue-600);background:#FDF5F3}

/* about band under the profile band, clear of the overlapping widget */
.about-band{padding-block:clamp(40px,4.4vw,62px) clamp(40px,4.6vw,66px)}
.about-band .wrap{max-width:1700px}
.about-band__grid{display:grid;grid-template-columns:minmax(0,1fr) 546px;gap:46px;align-items:start}
.about h2{font-family:var(--font-head);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:400;color:var(--ink);margin:0 0 24px;letter-spacing:-.01em}
.about h2 em{font-style:normal;font-weight:800}
.about p{color:var(--body);font-size:1rem;line-height:1.72;max-width:74ch}
.about a.inline{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.about__more{max-height:0;overflow:hidden;transition:max-height .4s ease}
.about__more.is-open{max-height:1400px}
.about__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:22px}
.about__toggle{
  border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:.98rem;color:var(--blue-600);padding:0;
}
.about__toggle svg{width:15px;height:15px;transform:rotate(0);transition:transform .3s}
.about__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.about__ask{
  display:inline-flex;align-items:center;gap:10px;background:var(--navy-700);color:#fff;
  border-radius:999px;padding:15px 28px;font-family:var(--font-head);font-weight:700;font-size:.98rem;
  transition:background .22s,transform .22s;
}
.about__ask:hover{background:var(--navy-800);transform:translateY(-2px)}
.about__ask svg{width:15px;height:15px}

/* ---------- 7. Trust bar ---------- */
.trustbar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.tcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,28px);box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.tcard h3{margin-bottom:.35em;font-size:1.02rem}
.tcard p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6}
.icon-tile{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(140deg,var(--blue-100),var(--teal-100));color:var(--blue-600);
}
.icon-tile svg{width:24px;height:24px}
.icon-tile--teal{background:linear-gradient(140deg,var(--teal-100),#FBEDE4);color:var(--teal-600)}

/* ---------- 7b. Profile band + appointment card (Apollo-style) ---------- */
.profile-band{padding-block:clamp(30px,4vw,56px) clamp(48px,6vw,86px);background:linear-gradient(180deg,#FEF9F8 0%,var(--surface-2) 100%)}
.profile{display:grid;grid-template-columns:1.22fr .88fr;gap:clamp(20px,2.4vw,30px);align-items:start}
.pcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,34px);box-shadow:var(--shadow-sm);
}
.pcard__head{padding-bottom:20px;border-bottom:1px solid var(--line-soft);margin-bottom:24px}
.pcard h2{font-size:clamp(1.42rem,2.2vw,1.86rem);margin-bottom:.25em}
.pcard__org{font-family:var(--font-head);font-weight:700;color:var(--blue-600);font-size:1.02rem;margin:0 0 4px}
.pcard__sub{margin:0;color:var(--muted);font-size:.96rem}
.pmeta{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,22px)}
.pmeta__item{display:flex;gap:14px;align-items:flex-start;padding-left:16px;border-left:3px solid var(--teal-100)}
.pmeta__item:hover{border-left-color:var(--teal-500)}
.pmeta__item svg{width:20px;height:20px;color:var(--blue-600);flex:none;margin-top:4px}
.pmeta__label{display:block;font-family:var(--font-head);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pmeta__value{font-family:var(--font-head);font-weight:700;color:var(--navy-800);font-size:.98rem;line-height:1.42}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft)}
.pchips__label{width:100%;font-family:var(--font-head);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.pnote{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--muted)}
.pnote svg{width:18px;height:18px;color:var(--blue-600);flex:none;margin-top:3px}

.bookcard{
  position:sticky;top:calc(var(--header-h) + 18px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.bookcard__head{
  padding:clamp(20px,2.2vw,26px);color:rgba(255,255,255,.82);
  background:radial-gradient(380px 240px at 12% 0%,rgba(223,106,80,.42),transparent 60%),linear-gradient(145deg,#360A0C 0%,var(--navy-800) 55%,#7A1B1C 100%);
  border-bottom:3px solid var(--teal-500);
}
.bookcard__head h2{color:#fff;font-size:clamp(1.24rem,1.9vw,1.5rem);margin-bottom:.3em}
.bookcard__head p{margin:0;font-size:.92rem;color:rgba(255,255,255,.76)}
.bookcard__body{padding:clamp(20px,2.2vw,26px)}
.bookcard .form-grid{gap:14px}
.bookcard .form-actions{margin-top:18px;gap:10px}
.bookcard .btn{width:100%}
.bookcard__alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bookcard__alt .btn{padding:12px 16px;font-size:.88rem}

.bookcard--static{position:static;box-shadow:var(--shadow)}
.bookcard__head h3{color:#fff;font-size:clamp(1.2rem,1.8vw,1.42rem);margin-bottom:.3em}
.pcard__head h3{font-size:clamp(1.24rem,1.9vw,1.5rem);margin-bottom:.25em}

/* ---------- 13b. Patient experience strip ---------- */
.tstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.tstrip__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.2vw,28px);border-top:3px solid var(--teal-500);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.tstrip__item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tstrip__item h3{font-size:1.06rem;margin-bottom:.35em}
.tstrip__item p{margin:0;font-size:.92rem;color:var(--muted)}

/* ---------- 8. Symptom cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.scard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,30px);overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.scard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue-500),var(--teal-500));
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease;
}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.scard:hover::before{transform:scaleY(1)}
.scard h3{margin-bottom:.4em}
.scard p{margin:0;font-size:.94rem;color:var(--muted)}

.alert{
  display:flex;gap:20px;align-items:flex-start;margin-top:clamp(20px,2.6vw,30px);
  background:var(--amber-050);border:1px solid #F6DFC0;border-left:5px solid var(--amber-700);
  border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);
}
.alert__icon{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--amber-700);flex:none;box-shadow:var(--shadow-xs)}
.alert__icon svg{width:24px;height:24px}
.alert h3{color:#8A4708;margin-bottom:.3em}
.alert p{margin:0 0 14px;color:#7A4B18;font-size:.96rem}
.alert .btn{--btn-bg:var(--amber-700)}

/* ---------- 9. Condition cards ---------- */
.type-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,28px);height:100%;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.type-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.type-card__art{
  width:88px;height:88px;border-radius:22px;margin-bottom:18px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-050),var(--teal-100));
}
.type-card__art svg{width:auto;height:64px}
.type-card p{font-size:.93rem;color:var(--muted);margin-bottom:18px}
.type-card__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-weight:700;font-size:.87rem;color:var(--blue-600);
}
.type-card__link svg{width:15px;height:15px;transition:transform .25s}
.type-card:hover .type-card__link svg{transform:translateX(4px)}
.type-note{margin-top:26px;text-align:center;font-size:.92rem;color:var(--muted)}

/* ---------- 10. What is the gallbladder ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:center}
.anatomy{
  margin:0;background:linear-gradient(160deg,#F4F9FF,#E9F6F4);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-sm);
}
.anatomy figcaption{margin-top:14px;font-size:.82rem;color:var(--muted);text-align:center}
.note{
  display:flex;gap:14px;align-items:flex-start;margin-top:26px;background:var(--blue-050);
  border:1px solid var(--blue-100);border-radius:var(--radius);padding:18px 20px;
}
.note svg{width:20px;height:20px;color:var(--blue-600);flex:none;margin-top:2px}
.note p{margin:0;font-size:.9rem;color:var(--navy-700)}
.factlist{display:grid;gap:12px;margin:24px 0 0}
.factlist li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.factlist svg{width:20px;height:20px;color:var(--teal-600);flex:none;margin-top:3px}

/* ---------- 11. Why choose (dark) ---------- */
.why{
  position:relative;color:rgba(255,255,255,.78);overflow:hidden;
  background:
    radial-gradient(760px 420px at 82% 6%,rgba(223,106,80,.28),transparent 62%),
    radial-gradient(680px 420px at 6% 92%,rgba(158,36,48,.30),transparent 62%),
    linear-gradient(150deg,var(--navy-900),var(--navy-800) 60%,#7A1B1C);
}
.why::after{
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}
.why > *{position:relative;z-index:1}
.why h2{color:#fff}
.why .eyebrow{color:#F6C3B0}
.why .sec-sub{color:rgba(255,255,255,.72);font-family:var(--font-head);font-weight:600}
.wcard{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,30px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s;
}
.wcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(223,106,80,.5)}
.wcard h3{color:#fff;margin-bottom:.4em}
.wcard p{margin:0;font-size:.93rem;color:rgba(255,255,255,.72)}
.wcard .icon-tile{background:linear-gradient(140deg,rgba(223,106,80,.28),rgba(194,74,68,.24));color:#F3B39C}
.counters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(30px,4vw,52px);
  padding-top:clamp(28px,3.4vw,42px);border-top:1px solid rgba(255,255,255,.14);
}
.counter b{display:block;font-family:var(--font-head);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1}
.counter span{font-size:.86rem;color:rgba(255,255,255,.66)}

/* ---------- 12. Surgical options ---------- */
.ocard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.ocard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.ocard__top{position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--blue-600),var(--teal-500))}
.ocard__tag{display:inline-block;font-family:var(--font-head);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600);background:var(--teal-100);padding:6px 12px;border-radius:999px;margin-bottom:16px}
.ocard h3{font-size:clamp(1.28rem,2.1vw,1.6rem);margin-bottom:.45em}
.ocard p{font-size:.98rem}
.ocard ul{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.ocard li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--muted)}
.ocard li svg{width:18px;height:18px;color:var(--blue-600);flex:none;margin-top:3px}
.decide{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;text-align:center;
  margin-top:clamp(20px,2.6vw,30px);background:linear-gradient(120deg,var(--navy-800),var(--navy-600));
  color:#fff;border-radius:var(--radius);padding:22px 28px;
}
.decide svg{width:24px;height:24px;color:#F3B39C;flex:none}
.decide p{margin:0;font-family:var(--font-head);font-weight:600;font-size:clamp(1rem,1.7vw,1.14rem)}

/* ---------- 13. Journey timeline ---------- */
.timeline{position:relative;list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(26px,3vw,40px)}
.timeline::before{
  content:"";position:absolute;left:8%;right:8%;top:30px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-100),var(--blue-500),var(--teal-500));
}
.step{position:relative;text-align:center}
.step__num{
  position:relative;z-index:2;width:60px;height:60px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--blue-100);
  font-family:var(--font-head);font-weight:800;font-size:1.02rem;color:var(--blue-600);
  box-shadow:var(--shadow-sm);transition:transform .3s,border-color .3s,background .3s,color .3s;
}
.step:hover .step__num{transform:translateY(-4px) scale(1.05);background:linear-gradient(140deg,var(--blue-600),var(--navy-700));color:#fff;border-color:transparent}
.step h3{font-size:1rem;margin-bottom:.3em}
.step p{font-size:.86rem;color:var(--muted);margin:0}

/* ---------- 16. Appointment ---------- */
.appt{display:grid;grid-template-columns:.85fr 1.15fr;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.appt__aside{
  position:relative;padding:clamp(28px,3.4vw,46px);color:rgba(255,255,255,.8);overflow:hidden;
  background:radial-gradient(600px 400px at 20% 0%,rgba(223,106,80,.34),transparent 60%),linear-gradient(160deg,var(--navy-900),var(--navy-700));
}
.appt__aside h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.05rem)}
.appt__aside .eyebrow{color:var(--teal-500)}
.appt__aside p{color:rgba(255,255,255,.74);font-size:.98rem}
.appt__list{display:grid;gap:16px;margin-top:28px;padding-top:26px;border-top:1px solid rgba(255,255,255,.15)}
.appt__list li{display:flex;gap:14px;align-items:flex-start}
.appt__list svg{width:20px;height:20px;color:#F3B39C;flex:none;margin-top:3px}
.appt__list b{display:block;font-family:var(--font-head);color:#fff;font-size:.95rem;font-weight:700}
.appt__list span,.appt__list a{font-size:.9rem;color:rgba(255,255,255,.74)}
.appt__list a:hover{color:#fff}
.appt__form{padding:clamp(26px,3.2vw,44px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-head);font-size:.84rem;font-weight:700;color:var(--navy-800)}
.field label span{color:var(--blue-600)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--radius-xs);
  background:var(--surface-2);font-size:.95rem;transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-500);background:#fff;box-shadow:0 0 0 4px rgba(194,74,68,.14);
}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.form-note{font-size:.8rem;color:var(--muted);margin:16px 0 0}
.form-status{margin-top:14px;font-size:.9rem;font-weight:600;color:var(--teal-600);display:none}
.form-status.is-visible{display:block}

/* ---------- 17. FAQ ---------- */
.faq{max-width:900px;margin-inline:auto}
.faq__item h3{margin:0;font-size:inherit}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.faq__item.is-open{box-shadow:var(--shadow);border-color:var(--blue-100)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
  background:none;border:0;cursor:pointer;padding:20px clamp(18px,2.2vw,26px);
  font-family:var(--font-head);font-weight:700;font-size:clamp(.98rem,1.5vw,1.06rem);color:var(--navy-800);
}
.faq__q:hover{color:var(--blue-600)}
.faq__icon{width:32px;height:32px;border-radius:50%;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center;flex:none;transition:transform .3s,background .3s,color .3s}
.faq__icon svg{width:16px;height:16px}
.faq__item.is-open .faq__icon{transform:rotate(180deg);background:var(--blue-600);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .34s ease}
.faq__a p{margin:0;padding:0 clamp(18px,2.2vw,26px) 22px;font-size:.95rem;color:var(--muted)}

/* ---------- 18. Final CTA ---------- */
.final{
  position:relative;overflow:hidden;text-align:center;color:rgba(255,255,255,.82);
  background:
    radial-gradient(700px 400px at 78% 10%,rgba(223,106,80,.32),transparent 60%),
    radial-gradient(620px 380px at 12% 90%,rgba(158,36,48,.3),transparent 62%),
    linear-gradient(140deg,var(--navy-900),var(--navy-700));
}
.final .eyebrow::before{display:none}
.final .eyebrow{color:#F6C3B0}
.final h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem)}
.final p{max-width:620px;margin:0 auto 30px;font-size:clamp(1rem,1.6vw,1.1rem);color:rgba(255,255,255,.78)}
.final .btn-row{justify-content:center}

/* ---------- 19. Footer ---------- */
.footer{background:var(--navy-900);color:rgba(255,255,255,.66);padding-top:clamp(48px,6vw,76px);font-size:.92rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(24px,3vw,44px)}
.footer h4{font-family:var(--font-head);color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.02em;margin:0 0 18px}
.footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.footer__brand img{height:46px;width:auto}
.footer__brand b{font-family:var(--font-head);color:#fff;font-size:1.05rem;display:block;letter-spacing:-.02em}
.footer__brand span{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-500)}
.footer p{color:rgba(255,255,255,.6);max-width:38ch}
.footer__links{display:grid;gap:11px}
.footer__links a{color:rgba(255,255,255,.66);transition:color .2s,padding-left .2s}
.footer__links a:hover{color:#fff;padding-left:4px}
.footer__contact{display:grid;gap:14px}
.footer__contact li{display:flex;gap:12px;align-items:flex-start}
.footer__contact svg{width:18px;height:18px;color:var(--teal-500);flex:none;margin-top:3px}
.footer__contact a{color:rgba(255,255,255,.78)}
.footer__contact a:hover{color:#fff}
.footer__bottom{
  margin-top:clamp(34px,4vw,54px);padding-block:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-size:.85rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__legal a:hover{color:#fff}

/* ---------- 20. Sticky mobile CTA ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(58,10,12,.1);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-cta a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:#fff;padding:10px 6px;font-family:var(--font-head);font-weight:700;font-size:.74rem;color:var(--navy-800);
}
.mobile-cta a svg{width:19px;height:19px}
.mobile-cta a.is-call svg{color:var(--teal-600)}
.mobile-cta a.is-wa svg{color:#1FA855}
.mobile-cta a.is-book{background:linear-gradient(135deg,var(--blue-600),var(--navy-700));color:#fff}

/* ---------- 21. Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- 22. Responsive ---------- */
@media (max-width:1180px){
  .phero__grid{grid-template-columns:180px minmax(0,1fr) 360px}
  .widget{width:360px}
  .about-band__grid{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:1024px){
  .phero__grid{grid-template-columns:170px minmax(0,1fr)}
  .widget{position:static;width:auto;max-width:520px;grid-column:1/-1;margin-top:10px}
  .about-band__grid{grid-template-columns:1fr}
  .about-band{padding-block:clamp(38px,5vw,60px)}
}
@media (max-width:1100px){
  .profile{grid-template-columns:1fr}
  .bookcard{position:static}
  .tstrip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .trustbar__grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:34px}
  .timeline{grid-template-columns:repeat(3,1fr);gap:26px 16px}
  .timeline::before{display:none}
  .appt{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .counters{grid-template-columns:repeat(2,1fr);gap:26px 18px}
}
@media (max-width:760px){
  body{padding-bottom:66px}
  .phero__grid{grid-template-columns:1fr;gap:20px}
  .phero__photo{max-width:200px;aspect-ratio:3/3.5}
  .widget{max-width:none}
  .phero__rule{max-width:none}
  .mobile-cta{display:grid}
  .trustbar__grid,.grid-3,.grid-2,.tstrip{grid-template-columns:1fr}
  .pmeta{grid-template-columns:1fr}
  .bookcard__alt{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr;gap:0;text-align:left;padding-left:8px}
  .step{display:grid;grid-template-columns:60px 1fr;gap:0 18px;text-align:left;padding-bottom:26px}
  .step::before{content:"";position:absolute;left:29px;top:66px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue-100),var(--teal-100))}
  .step:last-child::before{display:none}
  .step__num{margin:0}
  .step h3{grid-column:2;align-self:center;margin-bottom:.2em}
  .step p{grid-column:2}
  .alert{flex-direction:column;gap:14px}
  .form-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .decide{flex-direction:column;gap:10px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
}
@media (max-width:400px){
  .widget__actions a,.widget__actions button{font-size:.86rem;padding:15px 6px;gap:6px}
  .slot--time{min-width:74px}
  :root{--gutter:16px}
  .mobile-cta a{font-size:.68rem}
}


/* ---------- 23. Profile band responsive ---------- */
@media (max-width:1400px){
  .phero .wrap,.about-band .wrap{max-width:1240px}
  .phero__grid{grid-template-columns:280px minmax(0,1fr) 460px;gap:36px}
  .phero__photo{width:280px;height:396px}
  .widget{width:460px}
  .about-band__grid{grid-template-columns:minmax(0,1fr) 500px;gap:36px}
}
@media (max-width:1180px){
  .phero__grid{grid-template-columns:248px minmax(0,1fr) 404px;gap:24px}
  .phero__photo{width:248px;height:350px}
  .widget{width:404px}
  .widget__head,.widget__body{padding-left:20px;padding-right:20px}
  .about-band__grid{grid-template-columns:minmax(0,1fr) 436px;gap:28px}
}
@media (max-width:1024px){
  .phero{padding-bottom:30px}
  .phero__grid{grid-template-columns:262px minmax(0,1fr);gap:26px}
  .phero__photo{width:262px;height:370px}
  .widget{position:static;width:auto;max-width:560px;grid-column:1/-1;margin-top:20px}
  .about-band__grid{grid-template-columns:1fr}
  .about-band{padding-block:clamp(36px,5vw,56px)}
}
@media (max-width:760px){
  .phero__grid{grid-template-columns:1fr;gap:22px}
  .phero__photo{width:262px;height:370px}
  .phero__rule{max-width:none}
  .widget{max-width:none}
  .about h2{margin-bottom:18px}
  .about__actions{gap:16px}
  .about__ask{width:100%;justify-content:center}
}
@media (max-width:400px){
  .widget__head,.widget__body{padding-left:16px;padding-right:16px}
  .widget__actions a,.widget__actions button{font-size:.88rem;padding:16px 8px;gap:7px}
  .slot{width:60px}
  .slot--time{width:66px}
}

/* ---------- 24. Quick-start modal ---------- */
.modal{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(6,20,34,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.modal.is-open{display:flex;animation:modal-fade .18s ease}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
.modal__card{
  position:relative;width:100%;max-width:430px;background:#fff;border-radius:10px;
  padding:34px 34px 28px;box-shadow:0 30px 70px rgba(30,6,8,.4);
  animation:modal-rise .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes modal-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal__close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:none;cursor:pointer;
  color:var(--ink);display:grid;place-items:center;border-radius:50%;transition:background .2s;
}
.modal__close:hover{background:var(--surface-2)}
.modal__close svg{width:19px;height:19px}
.modal__card h2{font-size:1.42rem;font-weight:700;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em}
.modal__sub{font-size:.98rem;color:var(--body);margin:0 0 22px}
.modal__sub b{font-weight:600;color:var(--blue-600)}
.modal__field{
  display:flex;align-items:stretch;border:1px solid #E5D2D0;border-radius:8px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.modal__field:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(194,74,68,.14)}
.modal__prefix{
  display:flex;align-items:center;padding:0 14px;font-size:1rem;color:var(--ink);
  border-right:1px solid #EFE0DE;background:#fff;
}
.modal__field input{
  flex:1;min-width:0;border:0;outline:none;background:#fff;padding:14px 14px;font-size:1rem;letter-spacing:.02em;
}
.modal__error{display:none;margin:10px 0 0;font-size:.86rem;color:#B24A4A}
.modal__error.is-ok{color:var(--teal-600);font-weight:600}
.modal__error.is-visible{display:block}
.modal__go{
  width:100%;margin-top:24px;border:0;border-radius:999px;cursor:pointer;padding:17px 20px;
  background:linear-gradient(135deg,#DF6A50,#9E2430);color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:1rem;letter-spacing:.06em;text-transform:uppercase;transition:filter .2s,transform .2s;
}
.modal__go:hover{filter:brightness(1.04);transform:translateY(-1px)}
.modal__back{
  display:block;width:100%;margin-top:18px;border:0;background:none;cursor:pointer;text-align:center;
  font-family:var(--font-head);font-weight:700;font-size:.98rem;color:var(--blue-600);
}
.modal__back:hover{text-decoration:underline;text-underline-offset:3px}
body.modal-open{overflow:hidden}

/* appointment form inside the modal */
.modal{overflow-y:auto;z-index:2100}   /* above the floating logo, language pill and menu */
.modal__card--form{max-width:560px;max-height:calc(100dvh - 44px);overflow-y:auto;padding:30px 30px 24px}
.modal__card--form h2{padding-right:34px}
.bkf__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bkf__field{margin-bottom:12px;min-width:0}
.bkf__field label{display:block;margin:0 0 6px;font-size:.84rem;font-weight:600;color:var(--ink)}
.bkf__field > input,.bkf__field > select,.bkf__field > textarea{
  width:100%;border:1px solid #E5D2D0;border-radius:8px;background:#fff;padding:12px 13px;
  font:inherit;font-size:.97rem;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;
}
.bkf__field > textarea{resize:vertical;min-height:84px}
.bkf__field > input:focus,.bkf__field > select:focus,.bkf__field > textarea:focus{
  border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(194,74,68,.14)
}
.bkf__field .modal__field input{padding:12px 13px;font-size:.97rem}
.bkf [aria-invalid="true"],.bkf .modal__field:has([aria-invalid="true"]){border-color:#B24A4A}
.bkf__err{margin:6px 0 0;font-size:.8rem;color:#B24A4A}
.bkf__consent{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:flex-start;margin:4px 0 0;font-size:.84rem;color:var(--body);line-height:1.45;cursor:pointer}
.bkf__consent span{flex:1;min-width:0}
.bkf__consent .bkf__err{flex-basis:100%;margin:2px 0 0 28px}
.bkf__consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--blue-600)}
.bkf .modal__go{margin-top:18px}
.bkf .modal__go[disabled]{opacity:.7;cursor:progress;transform:none}
.appt-done{text-align:center;padding:10px 0 0}
.appt-done__icon{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--teal-100);color:var(--teal-600);margin-bottom:14px}
.appt-done__icon svg{width:28px;height:28px}
.appt-done p{color:var(--body);margin:0 0 10px}
.appt-done__small{font-size:.88rem}
.appt-done__small a{color:var(--blue-600);font-weight:600}
@media (max-width:520px){
  .bkf__row{grid-template-columns:1fr;gap:0}
  .modal__card--form{padding:26px 20px 20px}
}
@media (max-width:420px){
  .modal__card{padding:30px 22px 24px}
  .modal__card h2{font-size:1.28rem}
}

/* ---------- 25. Alternating experience-style timeline ---------- */
.tl-section{background:#FBF6F5;padding-block:clamp(42px,4.8vw,70px)}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,2.4vw,30px)}
.tl-head h2{
  font-family:var(--font-head);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.15rem);
  color:#6B5758;margin:0;letter-spacing:-.01em;
}
.tl-head h2 em{font-style:normal;font-weight:800;color:var(--ink)}
.tl-nav{display:flex;gap:10px;flex:none}
.tl-nav button{
  width:44px;height:44px;border-radius:50%;border:1px solid #E0CDCB;background:#fff;cursor:pointer;
  display:grid;place-items:center;color:#7A6465;transition:border-color .2s,color .2s,background .2s;
}
.tl-nav button:hover:not(:disabled){border-color:#9E2430;color:#9E2430}
.tl-nav button:disabled{opacity:.4;cursor:default}
.tl-nav button svg{width:16px;height:16px}
.tl-nav .tl-prev svg{transform:rotate(180deg)}

.tline{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(186px,1fr);
  min-height:430px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;list-style:none;margin:0;padding:0;
}
.tline::-webkit-scrollbar{display:none}
.tline::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:#9E2430;opacity:.5;
}
.tstep{position:relative;min-width:0}
.tstep__node{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;background:#fff;border:2.5px solid #9E2430;z-index:2;
  transition:transform .25s,background .25s;
}
.tstep:hover .tstep__node{transform:translate(-50%,-50%) scale(1.18);background:#9E2430}
.tstep__body{position:absolute;left:6%;right:6%;text-align:center;padding-right:16px;border-right:1px solid #EADCDA}
.tstep--up .tstep__body{bottom:calc(50% + 30px)}
.tstep--down .tstep__body{top:calc(50% + 30px)}
.tstep__year{
  display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(1.5rem,2.2vw,1.95rem);
  color:#8A211F;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px;
}
.tstep h3{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 6px}
.tstep p{margin:0;font-size:.88rem;line-height:1.6;color:#8A7A7B}

@media (max-width:900px){
  .tline{
    grid-auto-flow:row;grid-auto-columns:auto;min-height:0;overflow:visible;
    padding-left:34px;gap:0;
  }
  .tline::before{left:10px;right:auto;top:8px;bottom:8px;width:1.5px;height:auto}
  .tstep{padding:0 0 30px}
  .tstep__node{left:-24px;top:8px;transform:none}
  .tstep:hover .tstep__node{transform:scale(1.15)}
  .tstep__body{position:static;text-align:left;border-right:0;border-left:2px solid #EEDFDD;padding:0 0 0 16px}
  .tstep--up .tstep__body,.tstep--down .tstep__body{bottom:auto;top:auto}
  .tstep__year{font-size:1.3rem;margin-bottom:4px}
  .tl-nav{display:none}
  .tl-head{margin-bottom:22px}
}

/* ---------- 26. Symptom cards, refined ---------- */
.section--signs{
  background:
    radial-gradient(720px 320px at 50% -6%,rgba(158,36,48,.06),transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#FBF5F4 100%);
}
.section--signs .grid-3{gap:clamp(18px,1.8vw,26px)}

.scard{
  position:relative;background:#fff;border:1px solid #F0E4E2;border-radius:20px;
  padding:clamp(26px,2.4vw,32px) clamp(24px,2.2vw,30px) clamp(28px,2.4vw,32px);
  overflow:hidden;box-shadow:0 1px 2px rgba(58,10,12,.04);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.scard::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--blue-600),var(--teal-500));
  transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.scard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(58,10,12,.10);border-color:#DCE7F3}
.scard:hover::before{transform:scaleX(1)}

.scard__no{
  position:absolute;top:22px;right:24px;font-family:var(--font-head);font-weight:800;
  font-size:1.62rem;line-height:1;color:#F5E7E5;letter-spacing:-.02em;transition:color .3s;
}
.scard:hover .scard__no{color:#EED8D5}

.scard .icon-tile{
  width:56px;height:56px;border-radius:16px;margin-bottom:20px;
  background:linear-gradient(140deg,#FBE9E6,#FBEDE4);color:var(--blue-600);
  box-shadow:0 0 0 6px rgba(158,36,48,.05);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.scard .icon-tile svg{width:25px;height:25px}
.scard .icon-tile--teal{background:linear-gradient(140deg,#FBEDE4,#FBE9E6);color:var(--teal-600);box-shadow:0 0 0 6px rgba(196,82,60,.05)}
.scard:hover .icon-tile{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 8px rgba(158,36,48,.06)}

.scard h3{font-size:1.12rem;margin-bottom:12px;letter-spacing:-.015em}
.scard h3::after{
  content:"";display:block;width:26px;height:2px;border-radius:2px;margin-top:12px;
  background:linear-gradient(90deg,var(--blue-500),var(--teal-500));opacity:.55;
  transition:width .34s cubic-bezier(.2,.7,.3,1),opacity .3s;
}
.scard:hover h3::after{width:46px;opacity:1}
.scard p{margin:0;font-size:.95rem;line-height:1.65;color:#6D5C5D}

/* urgent-care callout */
.alert{
  align-items:flex-start;gap:22px;border:1px solid #F3DEC0;border-left:4px solid var(--amber-700);
  border-radius:20px;background:linear-gradient(120deg,#FFF9F0 0%,#FFFDF9 60%);
  box-shadow:0 10px 26px rgba(178,94,9,.07);
}
.alert__icon{width:52px;height:52px;border-radius:16px;box-shadow:0 0 0 6px rgba(178,94,9,.05)}
.alert h3{font-size:1.14rem}
.alert p{max-width:74ch}

/* ---------- 27. Consultation locations (map + venue panel) ---------- */
.loc-section{padding-block:clamp(42px,4.8vw,70px)}
.loc-layout{display:grid;grid-template-columns:1.62fr 1fr;gap:0;align-items:stretch}

.loc-map{position:relative;overflow:hidden;border-radius:6px 0 0 6px;background:#F1E7E5;min-height:460px}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc-card{
  position:absolute;top:18px;left:18px;z-index:2;max-width:288px;background:#fff;border-radius:6px;
  box-shadow:0 6px 18px rgba(58,10,12,.18);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
}
.loc-card__text{min-width:0}
.loc-card__text b{display:block;font-family:var(--font-head);font-size:.92rem;color:var(--ink);margin-bottom:4px}
.loc-card__text span{display:block;font-size:.79rem;line-height:1.5;color:#8A7A7B}
.loc-card__go{
  width:34px;height:34px;flex:none;border-radius:50%;border:1px solid #EFE1DF;display:grid;place-items:center;
  color:var(--blue-600);transition:border-color .2s,background .2s;
}
.loc-card__go:hover{border-color:var(--blue-500);background:var(--blue-050)}
.loc-card__go svg{width:15px;height:15px}

.loc-panel{background:#FAF3F1;border-radius:0 6px 6px 0;padding:clamp(28px,3vw,46px) clamp(24px,2.6vw,38px);display:flex;flex-direction:column;justify-content:center}
.venue{border:0;background:none;padding:0;width:100%;text-align:left;display:block;cursor:pointer}
.venue + .venue{margin-top:26px;padding-top:26px;border-top:1px solid #EDDFDD}
.venue__name{
  font-family:var(--font-head);font-weight:700;font-size:clamp(1.02rem,1.4vw,1.14rem);
  color:var(--navy-800);margin:0 0 10px;transition:color .2s;letter-spacing:-.01em;
}
.venue:hover .venue__name{color:var(--blue-600)}
.venue.is-active .venue__name{color:#9E2430}
.venue__addr{margin:0 0 14px;font-size:.93rem;line-height:1.62;color:#6D5C5D}
.venue__links{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.venue__links a{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--blue-600)}
.venue__links a:hover{text-decoration:underline;text-underline-offset:3px}
.venue__links a svg{width:16px;height:16px}
.venue__links .venue__book{color:var(--teal-600)}
.venue.is-active::after{
  content:"";display:block;width:38px;height:2px;border-radius:2px;margin-top:16px;
  background:linear-gradient(90deg,#DF6A50,#9E2430);
}

@media (max-width:980px){
  .loc-layout{grid-template-columns:1fr}
  .loc-map{border-radius:6px 6px 0 0;min-height:0;aspect-ratio:16/10}
  .loc-panel{border-radius:0 0 6px 6px}
}
@media (max-width:560px){
  .loc-card{max-width:none;left:12px;right:12px;top:12px}
  .loc-map{aspect-ratio:4/3}
  .venue__links{gap:10px 18px}
}

/* ---------- 28. FAQ, enlarged and refined ---------- */
#faqs{
  background:
    radial-gradient(760px 340px at 50% 0%,rgba(158,36,48,.07),transparent 62%),
    linear-gradient(180deg,#FCF7F6 0%,#F6EBE9 100%);
}
#faqs .sec-head{margin-bottom:clamp(28px,3.4vw,44px)}

.faq{max-width:1000px}
.faq__item{
  background:#fff;border:1px solid #F0E2E0;border-radius:18px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(58,10,12,.04);
  transition:box-shadow .28s,border-color .28s,transform .28s cubic-bezier(.2,.7,.3,1);
}
.faq__item:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(58,10,12,.08);border-color:#EAD5D2}
.faq__item.is-open{
  border-color:transparent;box-shadow:0 18px 40px rgba(58,10,12,.10);
  background:linear-gradient(180deg,#FFFFFF 0%,#FEF9F8 100%);
}
.faq__item.is-open::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--blue-600),var(--teal-500));
}
.faq__item{position:relative;overflow:hidden}

.faq__q{
  gap:22px;padding:clamp(22px,2.2vw,26px) clamp(22px,2.4vw,30px);
  font-size:clamp(1.06rem,1.35vw,1.2rem);font-weight:700;line-height:1.45;letter-spacing:-.015em;
}
.faq__item.is-open .faq__q{color:var(--blue-600)}

.faq__icon{
  width:38px;height:38px;background:#FBECEA;color:var(--blue-600);
  box-shadow:0 0 0 5px rgba(158,36,48,.05);transition:transform .32s,background .28s,color .28s,box-shadow .28s;
}
.faq__icon svg{width:18px;height:18px}
.faq__item.is-open .faq__icon{
  background:linear-gradient(140deg,var(--blue-600),var(--navy-700));color:#fff;
  box-shadow:0 0 0 6px rgba(158,36,48,.10);
}

.faq__a p{
  padding:0 clamp(22px,2.4vw,30px) clamp(24px,2.4vw,28px);
  font-size:clamp(1rem,1.15vw,1.06rem);line-height:1.72;color:#6D5C5D;max-width:82ch;
}

@media (max-width:600px){
  .faq__q{gap:14px;font-size:1.02rem;padding:20px 18px}
  .faq__icon{width:34px;height:34px}
  .faq__a p{font-size:.98rem;padding:0 18px 22px}
}

/* ---------- 29. Tighter rhythm between the trust strip and FAQ ---------- */
#experience{padding-block:clamp(34px,4vw,58px)}
#faqs{padding-top:clamp(34px,4vw,58px)}
#locations{padding-bottom:clamp(34px,4vw,58px)}


/* ---------- 30. Fixed brand mark ---------- */
.brandmark{
  position:fixed;top:clamp(12px,1.6vw,18px);left:clamp(12px,2.4vw,30px);z-index:960;
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.95);border:1px solid rgba(158,36,48,.12);
  border-radius:14px;padding:9px 18px 9px 12px;
  box-shadow:0 10px 26px rgba(58,10,12,.18);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  transition:padding .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,transform .28s;
}
.brandmark:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(58,10,12,.22)}
.brandmark img{height:44px;width:auto;transition:height .28s cubic-bezier(.2,.7,.3,1)}
.brandmark__text{display:flex;flex-direction:column;line-height:1.15;transition:opacity .22s,max-width .3s}
.brandmark__text b{font-family:var(--font-head);font-weight:800;font-size:.98rem;color:var(--navy-800);letter-spacing:-.02em}
.brandmark__text small{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600)}
.brandmark.is-compact{padding:8px 12px}
.brandmark.is-compact img{height:38px}
.brandmark.is-compact .brandmark__text{opacity:0;max-width:0;overflow:hidden}
@media (max-width:760px){
  .brandmark{padding:8px 14px 8px 10px;border-radius:12px;gap:9px}
  .brandmark img{height:34px}
  .brandmark__text b{font-size:.88rem}
  .brandmark__text small{font-size:.58rem;letter-spacing:.12em}
}

/* ==========================================================================
   31. Surgery close to home
   ========================================================================== */
.home-band{
  position:relative;overflow:hidden;color:rgba(255,255,255,.8);
  background:
    radial-gradient(680px 420px at 84% 8%,rgba(223,106,80,.32),transparent 62%),
    radial-gradient(620px 380px at 8% 94%,rgba(158,36,48,.3),transparent 62%),
    linear-gradient(145deg,var(--navy-900),var(--navy-700));
}
.home-band::after{
  content:"";position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}
.home-band > *{position:relative;z-index:1}
.home-band h2{color:#fff}
.home-band .eyebrow{color:#F6C3B0}
.home-band .eyebrow::before{background:linear-gradient(90deg,var(--teal-500),#fff)}
.home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,58px);align-items:center}
.home-copy p{font-size:clamp(1rem,1.6vw,1.12rem);color:rgba(255,255,255,.78);max-width:56ch;margin:0 0 26px}
.home-spots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
.home-spot{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,30px);transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s;
}
.home-spot:hover{transform:translateY(-6px);background:rgba(255,255,255,.11);border-color:rgba(223,106,80,.5)}
.home-spot .icon-tile{background:linear-gradient(140deg,rgba(223,106,80,.3),rgba(158,36,48,.28));color:#F3B39C}
.home-spot h3{color:#fff;margin-bottom:.3em;font-size:1.22rem}
.home-spot p{margin:0 0 14px;font-size:.93rem;color:rgba(255,255,255,.72)}
.home-spot a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.88rem;color:#F6C3B0}
.home-spot a svg{width:15px;height:15px;transition:transform .25s}
.home-spot a:hover svg{transform:translateX(4px)}
@media (max-width:1024px){.home-grid{grid-template-columns:1fr}}
@media (max-width:600px){.home-spots{grid-template-columns:1fr}}

/* ==========================================================================
   32. Page refinements
   ========================================================================== */
.venue{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,26px);box-shadow:var(--shadow-xs);
  transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.3,1);
}
.venue:hover{border-color:var(--blue-100);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.venue.is-active{border-color:var(--blue-500);box-shadow:var(--shadow-sm)}
.venue + .venue{margin-top:18px;padding-top:clamp(20px,2.2vw,26px);border-top:1px solid var(--line)}
.loc-panel{background:var(--surface-2);border:1px solid var(--line);border-left:0}



.wcard .type-card__link{color:#F6C3B0;margin-top:14px}
.wcard--accent{
  background:linear-gradient(150deg,rgba(223,106,80,.22),rgba(158,36,48,.18));
  border-color:rgba(223,106,80,.45);box-shadow:0 18px 40px rgba(30,6,8,.28);
}
.wcard--accent .icon-tile{background:linear-gradient(140deg,rgba(223,106,80,.42),rgba(158,36,48,.34));color:#fff}

.footer .footer__grid > div > p{max-width:42ch}

@media (max-width:980px){
  .loc-panel{border-left:1px solid var(--line);border-top:0}
}

/* ---------- 33. Care journey: room for taller steps, clearer text ---------- */
.tline{min-height:540px;padding-block:18px}
.tstep__body{padding-inline:6px}
.tstep__year{font-size:clamp(1.6rem,2.4vw,2.05rem);color:var(--navy-700);margin-bottom:8px}
.tstep h3{font-size:1.04rem;line-height:1.3;color:var(--ink);margin-bottom:8px}
.tstep p{font-size:.92rem;line-height:1.62;color:var(--body)}
@media (max-width:900px){
  .tline{min-height:0;padding-block:0}
  .tstep__body{padding-inline:0 0}
}

/* ==========================================================================
   34. Global responsive safety net
   ========================================================================== */
html{width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
img{height:auto}

/* the skip link is screen-reader only until it is focused */
.sr-only:focus{
  position:fixed;top:12px;left:12px;z-index:1200;width:auto;height:auto;margin:0;overflow:visible;
  clip:auto;white-space:normal;padding:12px 18px;border-radius:12px;
  background:#fff;color:var(--navy-800);font-family:var(--font-head);font-weight:700;
  box-shadow:var(--shadow);
}

/* ==========================================================================
   35. Tablet and mobile refinements (desktop layout untouched)
   ========================================================================== */
@media (max-width:760px){
  /* the brand mark scrolls away with the page instead of floating over the text.
     On desktop it sits in the wide side margin; on a phone there is no margin, so
     fixed positioning made it cover headings and body copy while scrolling. */
  body{position:relative}
  .brandmark{position:absolute;top:12px;left:var(--gutter)}

  /* hero portrait fills the column instead of sitting in a narrow 200px strip */
  .phero__photo{width:100%;max-width:100%;height:auto;aspect-ratio:1/1.26}
  .phero__photo img{height:100%;object-position:50% 6%}
  .phero{padding-top:clamp(84px,22vw,104px)}
}

@media (max-width:768px){
  /* comfortable tap targets */
  .phero__share{width:44px;height:44px}
  .phero__pill{gap:14px;padding:6px 0}
  .phero__pill i{width:44px;height:44px}
  .phero__pill i svg{width:19px;height:19px}
  .about__toggle{padding:11px 2px;min-height:44px}
  .about__ask{min-height:48px}
  .type-card__link{padding:10px 0;min-height:44px}
  .radio{padding:6px 0;min-height:44px;align-items:center}
  .radio input{width:22px;height:22px;margin-top:0}
  .radio input:checked{box-shadow:inset 0 0 0 5px var(--blue-600)}
  .venue__links a{padding:8px 0;min-height:44px}
  .loc-card__go{width:44px;height:44px}
  .widget__actions a,.widget__actions button{min-height:52px}
  .faq__q{min-height:56px}
  .footer__links a,.footer__contact a,.footer__legal a{display:inline-block;padding:9px 0}

  /* legible minimum type sizes */
  .brandmark__text small{font-size:.74rem}
  .footer__brand span{font-size:.74rem}
  .home-spot a{padding:9px 0;min-height:44px}
  .ocard__tag{font-size:.74rem}
  .widget__note{font-size:.78rem}
  .slot small{font-size:.8rem}

  /* nothing sits under the sticky bar */
  .footer__bottom{padding-bottom:8px}
}

@media (max-width:600px){
  /* long CTA labels wrap instead of forcing the section wider than the screen */
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .btn--lg{padding:15px 24px}
  .home-copy .btn{width:100%}
  .home-spot h3{overflow-wrap:anywhere}
}

@media (max-width:480px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .mobile-cta a{font-size:.72rem;padding:11px 4px}
  .mobile-cta a svg{width:20px;height:20px}
  .sec-head{margin-bottom:26px}
  .venue__links{gap:4px 18px}
  .tl-head h2,.about h2{overflow-wrap:break-word}
  .phero h1{overflow-wrap:break-word}
  .facts li{overflow-wrap:anywhere}
}

@media (max-width:600px){
  /* keep the anatomy labels legible once the diagram scales down */
  .anatomy svg text{font-size:16px}
}

@media (max-width:440px){
  /* two half-width actions forced "Book Appointment" onto two ragged lines */
  .widget__actions{grid-template-columns:1fr}
  .widget__call{border-left:0;border-top:1px solid var(--line)}
}

@media (max-width:400px){
  .mobile-cta{grid-template-columns:1fr 1fr 1.3fr}
  .mobile-cta a{font-size:.72rem;gap:3px;padding-inline:4px}
  .btn{padding:13px 18px;font-size:.9rem}
  .btn--lg{padding:14px 18px;font-size:.94rem}
  .btn--sm{padding:11px 16px}
  .alert .btn{width:100%}
  .home-spot{padding:20px 18px}
  .loc-card__text b{font-size:.88rem}
}


/* ==========================================================================
   37. Hero theme — light premium medical, palette taken from the logo
   (flame coral #E06050, crimson #A03040, deep maroon #700000)
   ========================================================================== */
.phero{
  color:var(--body);
  background:
    radial-gradient(circle at 16% 18%, rgba(224,96,80,.13), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(160,48,64,.09), transparent 32%),
    radial-gradient(circle at 72% 96%, rgba(224,120,72,.08), transparent 38%),
    linear-gradient(147deg,#FFFFFF 0%,#FFFAF7 46%,#F9F5F3 100%);
  border-bottom:1px solid var(--line-soft);
}

/* decorative layers: faint brand rings + dot field, both fluid so they never
   introduce a fixed width that could overflow a small screen */
.phero::before{
  opacity:.55;
  background:repeating-radial-gradient(circle at 78% 6%,rgba(160,48,64,.10) 0 1px,transparent 1px 30px);
  -webkit-mask-image:radial-gradient(62% 92% at 80% 8%,#000,transparent 74%);
  mask-image:radial-gradient(62% 92% at 80% 8%,#000,transparent 74%);
}
.phero::after{
  opacity:.5;
  background:
    radial-gradient(circle at 12% 108%,transparent 61%,rgba(224,96,80,.16) 61.5%,transparent 63%),
    radial-gradient(circle at 12% 108%,transparent 47%,rgba(160,48,64,.12) 47.5%,transparent 49%),
    repeating-radial-gradient(circle at 16% 116%,rgba(224,96,80,.12) 0 1px,transparent 1px 38px);
  -webkit-mask-image:radial-gradient(58% 84% at 20% 108%,#000,transparent 72%);
  mask-image:radial-gradient(58% 84% at 20% 108%,#000,transparent 72%);
}

/* text: charcoal-maroon for reading, brand accent only on the small label */
.phero__reg{
  color:#A8402B;font-family:var(--font-head);font-weight:700;
  font-size:.78rem;letter-spacing:.02em;
}
.phero h1{color:var(--ink)}
.phero__share{color:var(--muted)}
.phero__share:hover{background:var(--surface-3);color:var(--blue-600)}
.facts li{color:var(--body)}
.facts b{color:var(--navy-800);font-weight:700}
.phero__rule{background:var(--line);max-width:920px}
.phero__line{color:var(--navy-800)}
.phero__line > svg{color:var(--teal-600);opacity:1}
.phero__line span::before{background:var(--teal-500);opacity:1}
.phero__pill{color:var(--navy-800);font-weight:600}
.phero__pill i{border-color:rgba(158,36,48,.32);background:#fff;box-shadow:var(--shadow-xs)}
.phero__pill i svg{color:var(--blue-600)}
.phero__pill:hover i{background:var(--blue-050);border-color:var(--blue-500)}

/* doctor portrait sits on a white card with a soft brand glow behind it */
.phero__photo{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:8px;
  box-shadow:0 22px 52px rgba(90,16,19,.14),0 2px 6px rgba(90,16,19,.05);
}
/* glow via shadow, not a negatively-inset pseudo-element: the card clips its own
   overflow, so the old ::before was both invisible and a source of inner overflow */
.phero__photo{
  box-shadow:
    0 0 46px 10px rgba(224,96,80,.20),
    0 22px 52px rgba(90,16,19,.14),
    0 2px 6px rgba(90,16,19,.05);
}
.phero__photo img{border-radius:14px}

/* booking panel reads as a floating premium card on the light ground */
.widget{
  border-color:var(--line);
  box-shadow:0 22px 52px rgba(90,16,19,.13),0 2px 6px rgba(90,16,19,.05);
}
.widget__head{
  background:linear-gradient(120deg,#FFF7F4 0%,#FFFDFC 100%);
  border-bottom:1px solid var(--line);
}
.widget__head h2{color:var(--navy-800)}

@media (max-width:760px){
  .phero__photo{padding:6px;border-radius:18px}
  .phero__photo img{border-radius:13px}
  .phero__photo{box-shadow:0 0 34px 6px rgba(224,96,80,.18),0 16px 34px rgba(90,16,19,.13)}
  .phero::before,.phero::after{opacity:.42}
}

/* ==========================================================================
   38. Mobile header — logo only (<=768px; desktop keeps the floating brand pill)
   ========================================================================== */
.mhead{display:none}

@media (max-width:768px){
  /* the floating desktop brand pill is replaced by a real header on mobile */
  .brandmark{display:none}
  body{padding-top:clamp(74px,20vw,90px)}
  .phero{padding-top:clamp(18px,5vw,30px)}

  .mhead{
    position:fixed;top:0;left:0;right:0;z-index:1020;
    height:clamp(74px,20vw,90px);
    display:flex;align-items:center;justify-content:flex-start;
    padding:0 clamp(12px,4vw,20px);background:#fff;border-bottom:1px solid var(--line-soft);
    box-shadow:0 2px 14px rgba(90,16,19,.05);
  }
  .mhead__brand{display:flex;align-items:center;gap:10px;max-width:100%;min-width:0}
  .mhead__brand img{width:clamp(56px,17vw,72px);height:auto;flex:none}
  .mhead__brandtext{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .mhead__brandtext b{font-family:var(--font-head);font-weight:800;font-size:clamp(.92rem,4.2vw,1.08rem);color:var(--navy-800);letter-spacing:-.02em;white-space:nowrap}
  .mhead__brandtext small{font-size:clamp(.72rem,2.8vw,.78rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600);white-space:nowrap}









}

@media (max-width:400px){
  /* measured at 360px: 12+58 logo +10 gap +(62+7+90+7+40 tools) +12 = 358, so the
     reference control sizes fit without shrinking below spec */
  .mhead{padding:0 12px;gap:10px}
  .mhead__brand img{width:58px}
  .mhead__brandtext b{font-size:.8rem}
  .mhead__brandtext small{font-size:.52rem;letter-spacing:.1em}
}



/* ==========================================================================
   42. Booking card sits inside the hero band
   The card is already the third item of .phero__grid and the grid reserves a
   column for it, but position:absolute took it out of flow, so the hero never
   grew to fit it and the card hung 51-138px into the white .about-band below
   (the amount changed with viewport width). Keeping it in flow preserves the
   exact position and lets the hero close underneath it.
   Below 1025px it was already static, so this only touches desktop.
   ========================================================================== */
@media (min-width:1025px){
  .widget{position:static;margin-left:auto}
}


/* ==========================================================================
   43. Language switcher
   Custom control over the Google Translate engine; Google's own chrome is
   suppressed at the bottom of this block. Ported from the Hernia page.
   ========================================================================== */
.lang{position:relative}
.lang__short{display:none}

.lang__trigger{
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;
  background:rgba(255,255,255,.95);border:1px solid rgba(158,36,48,.12);border-radius:14px;
  cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink);
  box-shadow:0 10px 26px rgba(58,10,12,.18);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  transition:border-color .2s,color .2s,box-shadow .2s;
}
.lang__trigger:hover{border-color:var(--blue-500);color:var(--blue-600)}
.lang__trigger[aria-expanded="true"]{border-color:var(--blue-500);color:var(--blue-600)}
.lang__globe{width:17px;height:17px;flex:none;color:var(--blue-600)}
.lang__current{white-space:nowrap}
.lang__chev{width:12px;height:12px;flex:none;color:var(--muted);transition:transform .22s ease}
.lang__trigger[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}

.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  min-width:236px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(58,10,12,.04),0 18px 44px rgba(58,10,12,.14);
  max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1),visibility .22s;
}
.lang__menu[hidden]{display:block}
.lang.is-open .lang__menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.lang__menu::-webkit-scrollbar{width:4px}
.lang__menu::-webkit-scrollbar-thumb{background:rgba(158,36,48,.22);border-radius:4px}

.lang__opt{
  display:flex;align-items:center;gap:11px;width:100%;min-height:46px;
  padding:8px 10px;border:0;background:none;cursor:pointer;text-align:left;border-radius:10px;
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  transition:background .18s,color .18s;
}
.lang__opt:hover,.lang__opt:focus-visible{background:var(--surface-2);color:var(--blue-600)}
.lang__code{
  flex:none;width:30px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--navy-700);
  font-family:var(--font-head);font-weight:800;font-size:.66rem;letter-spacing:.06em;
}
.lang__name{flex:1;min-width:0}
.lang__name i{font-style:normal;color:var(--muted);font-size:.9em;margin-left:5px}
.lang__tick{width:16px;height:16px;flex:none;color:var(--blue-600);opacity:0;transition:opacity .18s}
.lang__opt.is-active{color:var(--blue-600);font-weight:600}
.lang__opt.is-active .lang__code{background:var(--blue-100);color:var(--blue-600)}
.lang__opt.is-active .lang__name i{color:var(--blue-500)}
.lang__opt.is-active .lang__tick{opacity:1}

/* on mobile it rides inside the fixed header bar, compacted to the code */
@media (max-width:768px){
  .lang__trigger{height:44px;padding:0 10px;gap:6px}
  .lang__current{display:none}
  .lang__short{display:inline;font-size:.86rem;letter-spacing:.02em}
  .lang__menu{min-width:222px;max-height:calc(100dvh - 110px)}
}
@media (max-width:390px){
  .lang__trigger{height:42px;padding:0 8px}
  .lang__menu{min-width:206px}
  .lang__opt{font-size:.92rem;min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  .lang__menu{transition:none}
}

/* ---------- keep Google's own chrome out of the page ----------
   Google renames these classes periodically, so cover the legacy names and
   the current VIpgJd-* ones. !important is unavoidable: they are set inline. */
iframe.skiptranslate,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
body{top:0 !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
#google_translate_element{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ==========================================================================
   34. Mobile menu
   Sized to match the main Advitya site nav: left-aligned rows on thin
   separators, no pills, current page in maroon. Mobile/tablet only, so the
   desktop layout is untouched.
   ========================================================================== */

/* ---------- 34a. Hamburger ---------- */
.burger{
  display:none;position:fixed;top:clamp(12px,1.6vw,18px);right:clamp(12px,2.4vw,20px);z-index:965;
  width:46px;height:46px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.95);border:1px solid rgba(158,36,48,.12);border-radius:14px;
  box-shadow:0 10px 26px rgba(58,10,12,.18);color:var(--navy-800);cursor:pointer;
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
}
.burger svg{width:22px;height:22px}
.burger:active{transform:scale(.96)}

/* ---------- 34b. Slide-in drawer ---------- */
.scrim{
  position:fixed;inset:0;z-index:970;background:rgba(30,6,8,.5);opacity:0;visibility:hidden;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .28s,visibility .28s;
}
.scrim.is-open{opacity:1;visibility:visible}
.scrim[hidden]{display:none}

.drawer{
  /* height follows the content instead of filling the screen, so no empty
     white gap is left under the last row; it still scrolls when it is long */
  position:fixed;top:0;right:0;bottom:auto;z-index:980;width:min(330px,86vw);background:#fff;
  max-height:100vh;max-height:100dvh;
  border-bottom-left-radius:16px;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(30,6,8,.24);visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
.drawer[hidden]{display:none}

.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;border-bottom:1px solid var(--line);
}
.drawer__head b{font-family:var(--font-head);font-size:1rem;color:var(--navy-800);letter-spacing:-.01em}
.drawer__close{
  width:44px;height:44px;flex:none;border:1px solid var(--line);background:#fff;border-radius:12px;
  display:grid;place-items:center;color:var(--navy-800);cursor:pointer;transition:background .2s,border-color .2s;
}
.drawer__close:hover{background:var(--surface-2);border-color:var(--blue-500)}
.drawer__close svg{width:18px;height:18px}

/* rows: the sizing from the reference nav */
.drawer__links{
  flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;display:block;
  padding:0 0 calc(6px + env(safe-area-inset-bottom));
}
.drawer__links a{
  display:flex;align-items:center;min-height:52px;padding:14px 16px;
  margin-inline:6px;border-bottom:1px solid var(--line-soft);
  font-family:var(--font-head);font-weight:600;font-size:1rem;line-height:1.35;
  color:var(--ink);overflow-wrap:anywhere;transition:color .2s,background .2s;
}
.drawer__links a:last-child{border-bottom:0}
.drawer__links a.is-current{color:var(--blue-600)}
.drawer__links a:hover,.drawer__links a:focus-visible{color:var(--blue-600);background:var(--blue-050)}

body.drawer-open{overflow:hidden}
html.drawer-open{overflow:hidden}

/* ---------- 34c. Mobile and tablet only ---------- */
@media (max-width:900px){
  .burger{display:flex}
  .brandmark{max-width:calc(100% - 84px)}   /* logo stays clear of the hamburger */
  .brandmark__text{min-width:0}
  .brandmark__text b,.brandmark__text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- 34d. Short viewports: fit all rows, never slice one ---------- */
@media (max-height:760px){
  .drawer__head{padding-top:calc(11px + env(safe-area-inset-top));padding-bottom:11px}
  .drawer__links a{min-height:46px;padding:10px 16px}
  /* anything still below the fold fades, so it reads as "more below" */
  .drawer__links{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent 100%);
  }
}
@media (max-height:640px){
  .drawer__links a{min-height:44px;font-size:.95rem}
}
@media (max-width:390px){
  .drawer{width:min(300px,88vw)}
}
@media (prefers-reduced-motion:reduce){
  .drawer,.scrim{transition:none}
}



/* ==========================================================================
   37. Mobile drawer accordion (<=900px)
   ========================================================================== */
.acc{border-bottom:1px solid var(--line-soft)}
.acc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:52px;padding:12px 16px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink);
}
.acc__btn > span{display:inline-flex;align-items:center;gap:10px;min-width:0}
.acc__btn > span svg{width:17px;height:17px;flex:none;color:var(--blue-600)}
.acc__chev{width:13px;height:13px;flex:none;color:var(--muted);transition:transform .24s ease}
.acc__btn[aria-expanded="true"]{color:var(--blue-600)}
.acc__btn[aria-expanded="true"] .acc__chev{transform:rotate(180deg)}
.acc__btn:hover{background:var(--surface-2)}

.acc__panel{background:var(--surface-2);padding:2px 0 8px}
.acc__panel[hidden]{display:none}
.acc__panel a{
  display:block;min-height:44px;padding:11px 16px 11px 42px;
  font-size:.94rem;font-weight:500;color:var(--body);
  border-bottom:1px solid rgba(170,40,50,.08);
}
.acc__panel a:last-child{border-bottom:0}
.acc__panel a:hover,.acc__panel a:focus-visible{color:var(--blue-600);background:#fff}
.acc__panel a.is-current{color:var(--blue-600);font-weight:700}



/* ==========================================================================
   41. Mobile header row: logo bar + language pill + hamburger
   The logo bar (.mhead) is fixed at z1020, so the burger needs to sit above it
   and the language pill has to make room for it instead of stacking on top.
   ========================================================================== */
@media (max-width:900px){
  .burger{
    z-index:1040;
    top:0;right:clamp(12px,4vw,20px);
    height:clamp(74px,20vw,90px);
    width:46px;background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    display:flex;align-items:center;justify-content:center;
    color:var(--navy-800);border-radius:12px;
  }
  .burger svg{width:24px;height:24px}
  .burger:active{background:var(--surface-3)}

  /* language pill sits to the left of the hamburger, same optical row */

  /* the drawer already carries its own language control, so hide the duplicate
     while the drawer is open is unnecessary — the pill is simply below it (z1030 < z1980) */
  .drawer{z-index:1990}
  .scrim{z-index:1980}
}

@media (max-width:400px){
  .burger{width:42px;right:10px}
  .lang__trigger{padding:0 8px}
}

/* the drawer's own language control is a full-width row, not the compact
   floating header pill — undo the pill rules inside the drawer */
@media (max-width:900px){
  .drawer__lang{padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
  .drawer__lang .lang{position:relative;display:block;width:100%}
  .drawer__lang .lang__trigger{
    position:static;width:100%;height:46px;justify-content:flex-start;gap:9px;padding:0 12px;
  }
  .drawer__lang .lang__current{display:inline}
  .drawer__lang .lang__short{display:none}
  .drawer__lang .lang__chev{margin-left:auto}
  .drawer__lang .lang__menu{left:0;right:0;min-width:0;max-width:100%;transform-origin:top center}
}

/* the open drawer sits over the header row; fade the burger out so the two
   controls never read as stacked on top of each other */
@media (max-width:900px){
  body.drawer-open .burger{opacity:0;pointer-events:none;transition:opacity .2s}
}

/* ==========================================================================
   42. Language pill in the header row, immediately left of the hamburger
   ========================================================================== */
.langfix{
  position:fixed;z-index:1035;
  top:clamp(12px,1.6vw,18px);right:clamp(12px,2.4vw,30px);
}
.langfix .lang__short{display:none}

@media (max-width:900px){
  .langfix{
    top:0;right:calc(clamp(12px,4vw,20px) + 50px);
    height:clamp(74px,20vw,90px);display:flex;align-items:center;
  }
  /* compact on phones: globe + language code only */
  .langfix .lang__trigger{height:42px;padding:0 10px;gap:6px}
  .langfix .lang__current{display:none}
  .langfix .lang__short{display:inline;font-size:.86rem;letter-spacing:.02em}
  .langfix .lang__menu{right:0;left:auto;min-width:190px}
}

@media (max-width:400px){
  .langfix{right:calc(10px + 46px)}
  .langfix .lang__trigger{height:40px;padding:0 9px}
  .langfix .lang__menu{min-width:176px}
}

/* the open drawer covers the header row */
@media (max-width:900px){
  body.drawer-open .langfix{opacity:0;pointer-events:none;transition:opacity .2s}
}

/* ==========================================================================
   43. Mobile header as floating pills (logo card · language · hamburger)
   ========================================================================== */
@media (max-width:900px){
  /* the full-width white bar gives way to the same floating card used on desktop */
  .mhead{display:none}
  body{padding-top:0}

  .brandmark{
    display:inline-flex;position:fixed;z-index:1035;
    top:12px;left:12px;
    padding:8px 14px 8px 10px;border-radius:14px;gap:9px;
    background:rgba(255,255,255,.96);border:1px solid rgba(158,36,48,.26);
    box-shadow:0 0 0 1px rgba(158,36,48,.05),0 4px 14px rgba(58,10,12,.10),0 8px 22px rgba(58,10,12,.10);
  }
  .brandmark img{height:34px}
  .brandmark__text{display:flex}
  .brandmark__text b{font-size:.86rem}
  .brandmark__text small{font-size:.58rem;letter-spacing:.12em}

  /* hamburger returns to a white pill, matching the logo card */
  .burger{
    top:12px;right:12px;height:44px;width:44px;
    background:rgba(255,255,255,.96);border:1px solid rgba(158,36,48,.26);border-radius:13px;
    box-shadow:0 0 0 1px rgba(158,36,48,.05),0 4px 14px rgba(58,10,12,.10),0 8px 22px rgba(58,10,12,.10);
  }
  .burger svg{width:22px;height:22px}

  /* language pill sits between the two, same optical row */
  .langfix{top:12px;right:64px;height:44px;display:flex;align-items:center}
  .langfix .lang__trigger{
    height:44px;padding:0 10px;gap:6px;border-radius:13px;
    border:1px solid rgba(158,36,48,.26);
    box-shadow:0 0 0 1px rgba(158,36,48,.05),0 4px 14px rgba(58,10,12,.10),0 8px 22px rgba(58,10,12,.10);
  }
  .langfix .lang__menu{top:calc(100% + 10px)}

  /* the hero starts under the floating row again */
  .phero{padding-top:clamp(74px,20vw,92px)}
}

@media (max-width:400px){
  .brandmark{padding:7px 11px 7px 9px;gap:8px}
  .brandmark img{height:30px}
  .brandmark__text b{font-size:.8rem}
  .brandmark__text small{font-size:.54rem}
  .burger{width:42px;height:42px;right:10px;top:10px}
  .langfix{right:60px;top:10px;height:42px}
  .langfix .lang__trigger{height:42px;padding:0 9px}
}

/* ==========================================================================
   44. Brand mark uses the full stacked logo (icon + ADVITYA HEALTHCARES)
   ========================================================================== */
.brandmark,.brandmark.is-compact{
  padding:0;gap:0;background:none;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.brandmark:hover{box-shadow:none}
.brandmark img{height:88px}
.brandmark.is-compact img{height:64px}
.phero{padding-top:128px}   /* clears the taller logo */
@media (max-width:900px){
  .brandmark{padding:0;background:none;border:0;box-shadow:none}
  .brandmark img{height:64px}
  .brandmark.is-compact img{height:52px}
  .phero{padding-top:92px}
}
/* sharper 1023px portrait is a bit wider than the old crop: keep face near top */
.phero__photo img{object-position:50% 12%}

/* no italic text anywhere on the page (em / i / cite default to italic in browsers) */
em,i,cite,dfn,var,address{font-style:normal}


/* ==========================================================================
   Specialist surgical consultations -- cross-links to the other dedicated
   surgical pages on the main site. Tiles rather than banners so the block
   stays one screenful above the footer.
   ========================================================================== */
.xlinks__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);
}
.xlinks__tile{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(18px,2vw,24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.xlinks__tile:hover,.xlinks__tile:focus-visible{
  transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100);
}
.xlinks__ico{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:4px;
  border-radius:12px;background:var(--blue-050);color:var(--blue-600);
}
.xlinks__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.xlinks__tile b{font-family:var(--font-head);font-size:1.03rem;color:var(--ink)}
.xlinks__txt{font-size:.94rem;color:var(--body);line-height:1.55}
.xlinks__cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
  font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--blue-600);
}
.xlinks__cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.xlinks__tile:hover .xlinks__cta svg{transform:translateX(3px)}

@media (max-width:900px){ .xlinks__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .xlinks__grid{grid-template-columns:1fr} }


/* ---------- About band: the booking card's overhang ----------
   The band used to reserve a full-height column on the right so the hero's
   absolutely positioned booking card could hang into it. The card only
   overhangs by 50-140px, so the rest of that column was empty space beside
   the text. The reserve is now a floated spacer whose height is the measured
   overhang, and the copy wraps back to full width underneath it. */
.about-band__grid{display:block}
.about-band__spacer{
  float:right;width:546px;height:var(--about-cutout,0px);
  margin:0 0 10px 46px;pointer-events:none;
}
@media (max-width:1400px){
  .about-band__spacer{width:360px}
}
@media (max-width:1024px){
  .about-band__spacer{display:none}
}

/* The About copy was a step smaller than the body text elsewhere on the page;
   it now reads at the same size, with the line length still capped. */
.about p{font-size:clamp(1.04rem,.45vw + .95rem,1.14rem);line-height:1.75}
.about__toggle,.about__ask{font-size:1.02rem}

/* ---------- Condition cards: illustrated ----------
   Each gallbladder condition carries its own plate, so the art is a band
   across the top of the card rather than the 88px icon tile. The square rule
   above still serves any card left on an icon. */
.type-card__art--photo{
  width:100%;height:clamp(168px,19vw,208px);border-radius:16px;margin-bottom:20px;
  overflow:hidden;background:linear-gradient(140deg,var(--blue-050),var(--teal-100));
}
.type-card__art--photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.type-card:hover .type-card__art--photo img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .type-card:hover .type-card__art--photo img{transform:none}
}

/* The anatomy figure carries an illustration rather than an inline SVG. */
.anatomy img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}

/* These plates are single objects on a pale ground, not scenes: cropping them
   to a letterbox cut the stones and the labels off at the edges. They are
   shown whole instead, centred in a slightly taller band. */
#conditions .type-card__art--photo{
  height:clamp(200px,23vw,250px);display:block;padding:8px;
  background:linear-gradient(140deg,#F4F9FF,#EAF4FC);
}
#conditions .type-card__art--photo img{
  /* block band with a fixed height: the plate resolves against it and
     letterboxes inside, so no label is cut off */
  width:100%;height:100%;object-fit:contain;
}