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

/* ---------- 1. Tokens ---------- */
/* Palette sampled from the Advitya mark (images/advitya_logo_mark.png):
   deep maroon #800000, crimson #A03040/#C04050, coral #E06050/#F08060.
   Token names are kept from the shared Advitya design system. */
: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:clamp(76px,7vw,92px);   /* matches .mnav height so anchors clear the sticky header */
  --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);
  width:100%;max-width:100%;overflow-x:hidden;
}
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;
  width:100%;max-width:100%;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}
/* the skip link must become visible once a keyboard reaches it */
a.sr-only:focus,a.sr-only:focus-visible{
  position:fixed;top:12px;left:12px;z-index:999;width:auto;height:auto;margin:0;clip:auto;
  padding:12px 18px;border-radius:12px;background:#fff;color:var(--navy-800);
  font-family:var(--font-head);font-weight:700;box-shadow:0 10px 26px rgba(58,10,12,.22);
}

/* ---------- 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,#3A0A0C 0%,var(--navy-800) 55%,#78161A 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 colorectal surgery ---------- */
.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 h3,.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 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;
}

/* ---------- 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}
  .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:clamp(260px,88vw,400px);height:auto;aspect-ratio:262/370;
    margin-inline:auto;border-radius:16px;
  }
  .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}
.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(145px,1fr);
  min-height:566px;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:4%;right:4%;text-align:center;padding-right:14px;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:1080px){
  .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;z-index:1}
.loc-map__ph{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;
  color:var(--muted);font-size:.9rem;background:var(--surface-3);
}
.loc-map__ph svg{width:26px;height:26px;color:var(--blue-500);opacity:.7}
.loc-map__ph.is-done{display:none}
.loc-map__ns{position:absolute;inset:auto 0 18px;z-index:2;text-align:center;margin:0;font-size:.9rem}
.loc-map__ns a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.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)}



/* ---------- 31. Care-pathway chips (Continuity of Care card) ---------- */
.pathway{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
.pathway li{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-family:var(--font-head);font-weight:700;font-size:.79rem;color:#fff;white-space:nowrap;
  transition:background .25s,border-color .25s,transform .25s;
}
.pathway li:hover{background:rgba(223,106,80,.24);border-color:rgba(243,179,156,.6);transform:translateY(-2px)}

/* ---------- 32. Why-card extras: numbering, lists, locations spotlight ---------- */
.wcard{position:relative}
.wcard__no{
  position:absolute;top:22px;right:26px;font-family:var(--font-head);font-weight:800;font-size:1.5rem;
  line-height:1;color:rgba(255,255,255,.18);letter-spacing:-.02em;transition:color .3s;
}
.wcard:hover .wcard__no{color:rgba(243,179,156,.5)}
.wcard h3{padding-right:44px}
.wcard ul{display:grid;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
.wcard ul li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.5}
.wcard ul li svg{width:16px;height:16px;color:#F3B39C;flex:none;margin-top:3px}
.wcard--spot{
  background:linear-gradient(150deg,rgba(223,106,80,.2),rgba(158,36,48,.24));
  border-color:rgba(243,179,156,.4);display:flex;flex-direction:column;
}
.wcard--spot:hover{border-color:rgba(243,179,156,.72)}
.spot-locs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.spot-locs div{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);
  padding:13px 14px;display:flex;gap:10px;align-items:flex-start;
}
.spot-locs svg{width:17px;height:17px;color:#F3B39C;flex:none;margin-top:2px}
.spot-locs b{display:block;font-family:var(--font-head);font-size:.92rem;color:#fff;letter-spacing:-.01em}
.spot-locs span{display:block;font-size:.77rem;color:rgba(255,255,255,.72);line-height:1.45}
.wcard--spot .btn{margin-top:auto;align-self:flex-start}

/* ---------- 32b. Locations subheading ---------- */
#locations .tl-head{margin-bottom:10px}
.loc-sub{margin:0 0 clamp(20px,2.6vw,30px);max-width:70ch}

/* ---------- 33. Care close to home band ---------- */
.home-band{
  position:relative;overflow:hidden;color:rgba(255,255,255,.8);text-align:center;
  background:
    radial-gradient(700px 400px at 16% 6%,rgba(223,106,80,.28),transparent 62%),
    radial-gradient(660px 400px at 88% 94%,rgba(158,36,48,.34),transparent 62%),
    linear-gradient(140deg,var(--navy-900),var(--navy-800) 58%,var(--navy-700));
}
.home-band h2{color:#fff}
.home-band .eyebrow{color:#F6C3B0}
.home-band .eyebrow::before{display:none}
.home-band__lede{max-width:760px;margin:0 auto clamp(26px,3.2vw,40px);font-size:clamp(1rem,1.6vw,1.1rem);color:rgba(255,255,255,.8)}
.home-locs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);max-width:820px;margin:0 auto clamp(24px,3vw,36px)}
.home-loc{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,30px);transition:transform .28s cubic-bezier(.2,.7,.3,1),background .28s,border-color .28s;
}
.home-loc:hover{transform:translateY(-5px);background:rgba(255,255,255,.11);border-color:rgba(243,179,156,.55)}
.home-loc .icon-tile{margin-inline:auto;background:linear-gradient(140deg,rgba(223,106,80,.3),rgba(158,36,48,.3));color:#F6C3B0}
.home-loc b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.12rem;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.home-loc span{display:block;margin-top:6px;font-size:.92rem;color:rgba(255,255,255,.76)}
.home-band .btn-row{justify-content:center}


/* ---------- 35. Cancer pathway steps ---------- */
.timeline--4{grid-template-columns:repeat(4,1fr)}
.cancer-note{
  display:flex;gap:14px;align-items:flex-start;max-width:920px;margin:clamp(28px,3.4vw,44px) auto 0;
  background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--radius);padding:20px 24px;
}
.cancer-note svg{width:21px;height:21px;color:var(--blue-600);flex:none;margin-top:2px}
.cancer-note p{margin:0;font-size:.97rem;color:var(--navy-700)}

/* ---------- 37. Footer corrections ---------- */
.footer__brand > span{display:flex;flex-direction:column;line-height:1.2;text-transform:none;letter-spacing:normal}
.footer__brand > span > span{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-500)}

/* ---------- 38. Responsive for the added blocks ---------- */
@media (max-width:1024px){
  .timeline--4{grid-template-columns:repeat(2,1fr);gap:26px 16px}
}
@media (max-width:760px){
  .spot-locs,.home-locs{grid-template-columns:1fr}
  .timeline--4{grid-template-columns:1fr}
  .wcard--spot .btn{align-self:stretch}
  .wcard h3{padding-right:38px}
}

/* ==========================================================================
   39. Mobile menu + mobile refinements
   Everything below is mobile-only: no rule here applies above 900px, so the
   desktop layout, type scale and colours are untouched.
   ========================================================================== */

/* ---------- 39d. Touch targets and small type, phones and tablets ---------- */
@media (max-width:768px){
  /* every control reaches a comfortable touch size */
  .phero__share{width:44px;height:44px}
  .phero__pill i{width:40px;height:40px}
  .picker__btn{width:40px;height:44px}
  .about__toggle{min-height:44px;padding:9px 0}
  .type-card__link{min-height:44px;padding:10px 0 2px}
  .venue__links a{min-height:40px;padding:6px 0}
  .loc-card__go{width:40px;height:40px}
  .footer__links a,.footer__contact a{display:inline-block;min-height:36px;padding:6px 0}
  .faq__q{min-height:56px}
  .radio{padding:4px 0}

  /* small labels stay legible on a phone */
  .eyebrow{font-size:.8rem}
  .ocard__tag{font-size:.76rem}
  .widget__note{font-size:.8rem}
  .slot small{font-size:.82rem}
  .phero__reg{font-size:.88rem}
  .figcaption,.anatomy figcaption{font-size:.86rem}
  .type-card__link{font-size:.92rem}

  /* long strings (emails, addresses) can never push the layout wide */
  .footer__contact a,.venue__addr,.loc-card__text span{overflow-wrap:anywhere}
}

/* ---------- 39e. Tighten rhythm on small phones ---------- */
@media (max-width:480px){
  .phero__pill{font-size:.94rem}
}

/* ==========================================================================
   40. Hero band — light premium theme
   Palette taken from images/advitya_logo_mark.png: deep maroon #800000,
   crimson #A03040 / #C04050, coral #E06050 / #F08060.
   Roughly 75% warm neutral ground, 18% brand-tinted glow, 7% accent.
   Layout, spacing, content and the widget structure are untouched — only
   the background, colours and decorative layers change.
   ========================================================================== */
.phero{
  color:var(--body);
  background:
    radial-gradient(52% 46% at 12% 14%,rgba(240,128,96,.13),transparent 62%),
    radial-gradient(46% 44% at 88% 6%,rgba(160,48,64,.09),transparent 60%),
    radial-gradient(60% 50% at 72% 104%,rgba(224,96,80,.10),transparent 64%),
    linear-gradient(152deg,#FFFFFF 0%,#FFFAF7 42%,#FDF6F2 72%,#F9F4F1 100%);
  border-bottom:1px solid var(--line-soft);
}

/* soft brand orbs — the only "shapes", kept faint and fully inside the band */
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background:
    radial-gradient(circle at 84% 16%,rgba(224,96,80,.10) 0 38%,transparent 39%),
    radial-gradient(circle at 92% 30%,rgba(158,36,48,.05) 0 22%,transparent 23%),
    radial-gradient(circle at 6% 88%,rgba(240,128,96,.08) 0 26%,transparent 27%);
  -webkit-mask-image:none;mask-image:none;
}

/* whisper-fine dot grid for depth, masked so it fades out at the edges */
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 76% 10%,rgba(158,36,48,.16) 0 1px,transparent 1px 30px);
  -webkit-mask-image:radial-gradient(58% 82% at 78% 12%,#000,transparent 72%);
  mask-image:radial-gradient(58% 82% at 78% 12%,#000,transparent 72%);
}

/* ---------- 40a. Content, now dark on light ---------- */
/* muted greys that passed on the old dark ground fail on a light one */
.phero__reg{color:#6D5C5D}
.phero .widget__note{color:#6D5C5D}
.phero h1{color:var(--ink)}
.phero__share{color:var(--muted)}
.phero__share:hover{background:var(--blue-050);color:var(--blue-600)}
.facts li{color:var(--body)}
.facts b{color:var(--ink);font-weight:700}
.phero__rule{background:var(--line)}
.phero__line{color:var(--body)}
.phero__line > svg{color:var(--blue-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,.35);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)}

/* ---------- 40b. Doctor image as a floating white card ---------- */
.phero__photo{
  position:relative;background:#fff;padding:8px;border:1px solid var(--line);
  border-radius:18px;
  box-shadow:
    0 0 56px 6px rgba(224,96,80,.16),
    0 18px 44px rgba(58,10,12,.14),
    0 2px 6px rgba(58,10,12,.05);
}
.phero__photo img{border-radius:12px}

/* ---------- 40c. Booking widget as a premium floating panel ---------- */
.widget{
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 50px rgba(58,10,12,.13),0 2px 8px rgba(58,10,12,.05);
}
.widget__head{
  background:linear-gradient(135deg,#FFF6F3,#FDEDE8);
  border-bottom:1px solid var(--line);
}
.widget__head h2{position:relative;padding-left:14px}
.widget__head h2::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--teal-500),var(--blue-600));
}
.widget__actions{border-top:1px solid var(--line)}

/* ---------- 40d. Mobile: keep the glow contained ---------- */
@media (max-width:1024px){
  .phero::after{opacity:.36}
}
@media (max-width:760px){
  .phero{
    background:
      radial-gradient(70% 30% at 20% 6%,rgba(240,128,96,.14),transparent 62%),
      radial-gradient(80% 34% at 84% 98%,rgba(224,96,80,.10),transparent 64%),
      linear-gradient(170deg,#FFFFFF 0%,#FFFAF7 46%,#FAF5F2 100%);
  }
  .phero::before{
    background:
      radial-gradient(circle at 88% 8%,rgba(224,96,80,.10) 0 30%,transparent 31%),
      radial-gradient(circle at 4% 92%,rgba(240,128,96,.08) 0 24%,transparent 25%);
  }
  .phero::after{opacity:.3}
  .phero__photo{
    padding:6px;border-radius:16px;
    box-shadow:0 0 40px 4px rgba(224,96,80,.15),0 14px 32px rgba(58,10,12,.13);
  }
}


/* ==========================================================================
   41. Site header — stacked logo only
   ========================================================================== */
.mnav{
  position:fixed;z-index:960;
  top:clamp(10px,1.4vw,18px);
  left:clamp(14px,2.4vw,30px);
  display:inline-flex;align-items:center;
}
.mnav__logo{display:block;line-height:0}
.mnav__logo img{width:clamp(84px,8.5vw,124px);height:auto}

/* top padding keeps the hero clear of the fixed language/tools bar */
.phero{padding-top:clamp(108px,10.5vw,146px)}

/* ==========================================================================
   42. Section menu — floating panel, mobile/tablet only
   Plain rows are quiet links; grouped rows carry an icon, sit bolder and
   open a submenu. Desktop keeps the bare floating logo.
   ========================================================================== */
.mburger{display:none}
.mscrim{display:none}
.mmenu{display:none}

@media (max-width:1023px){

  /* ---------- 42a. Trigger, matching the logo pill ---------- */
  .mburger{
    width:46px;height:46px;flex:none;display:grid;place-items:center;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(170,40,50,.1);
    border-radius:clamp(13px,1.4vw,17px);
    box-shadow:0 10px 26px rgba(58,10,12,.16),0 2px 6px rgba(58,10,12,.05);
    -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
    color:var(--ink);cursor:pointer;transition:color .2s,border-color .2s;
  }
  .mburger svg{width:22px;height:22px}
  .mburger:hover{color:var(--blue-600);border-color:rgba(170,40,50,.28)}
  .mburger[aria-expanded="true"]{opacity:0;pointer-events:none}

  /* ---------- 42b. Overlay ---------- */
  .mscrim{
    display:block;position:fixed;inset:0;z-index:965;background:rgba(40,20,25,.08);
    opacity:0;visibility:hidden;transition:opacity .22s ease-out,visibility .22s;
  }
  .mscrim.is-open{opacity:1;visibility:visible}

  /* ---------- 42c. Panel ---------- */
  .mmenu{
    display:block;position:fixed;z-index:970;
    top:clamp(14px,1.8vw,24px);right:clamp(10px,2vw,24px);
    width:262px;height:426px;
    max-width:calc(100% - 20px);max-height:calc(100vh - clamp(28px,3.6vw,48px));
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fff;border-radius:16px;
    box-shadow:0 18px 44px rgba(58,10,12,.20),0 2px 8px rgba(58,10,12,.06);
    opacity:0;visibility:hidden;transform:translate3d(8px,-10px,0);
    transition:opacity .22s ease-out,transform .22s ease-out,visibility .22s;
    scrollbar-width:thin;scrollbar-color:rgba(170,40,50,.22) transparent;
  }
  .mmenu.is-open{opacity:1;visibility:visible;transform:none}
  .mmenu::-webkit-scrollbar{width:5px}
  .mmenu::-webkit-scrollbar-thumb{background:rgba(170,40,50,.22);border-radius:4px}

  /* ---------- 42d. Panel head ---------- */
  .mmenu__head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:11px 12px 10px 14px;border-bottom:1px solid rgba(170,40,50,.15);
    position:sticky;top:0;background:#fff;z-index:2;
  }
  .mmenu__head b{
    font-family:var(--font-head);font-weight:700;font-size:.97rem;line-height:1.25;
    color:var(--blue-600);letter-spacing:-.01em;overflow-wrap:anywhere;
  }
  .mmenu__close{
    width:38px;height:38px;flex:none;display:grid;place-items:center;
    border:1px solid rgba(170,40,50,.18);border-radius:11px;background:#fff;
    color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s;
  }
  .mmenu__close svg{width:16px;height:16px}
  .mmenu__close:hover{border-color:var(--blue-500);color:var(--blue-600)}

  /* ---------- 42e. Rows ---------- */
  .mmenu__list{margin:0;padding:0 14px;list-style:none}
  .mmenu__list > li{border-bottom:1px solid rgba(170,40,50,.15)}
  .mmenu__list > li:last-child{border-bottom:0}

  .mmenu__list > li > a,
  .mmenu__parent{
    display:flex;align-items:center;gap:9px;width:100%;
    min-height:44px;padding:9px 0;
    font-family:var(--font-body);font-size:.94rem;font-weight:400;line-height:1.32;
    overflow-wrap:anywhere;
    color:var(--ink);background:none;border:0;text-align:left;cursor:pointer;
    transition:color .18s;
  }
  .mmenu__list > li > a:hover,.mmenu__parent:hover{color:var(--blue-600)}

  /* grouped rows read heavier and carry a brand-tinted glyph */
  .mmenu__parent{font-family:var(--font-head);font-weight:700}
  .mmenu__parent > span{flex:1;min-width:0}
  .mmenu__ico{width:16px;height:16px;flex:none;color:var(--blue-600)}
  .mmenu__chev{
    width:13px;height:13px;flex:none;color:var(--ink);opacity:.55;
    transition:transform .22s ease-out,color .18s,opacity .18s;
  }
  .mmenu__parent[aria-expanded="true"] .mmenu__chev{transform:rotate(180deg);color:var(--blue-600);opacity:1}
  .mmenu__parent[aria-expanded="true"]{color:var(--blue-600)}

  /* active section */
  .mmenu__list > li > a.is-active,
  .mmenu__sub a.is-active{color:var(--blue-600);font-weight:600}
  .mmenu__group.has-active > .mmenu__parent{color:var(--blue-600)}

  /* ---------- 42f. Submenu ---------- */
  .mmenu__sub{margin:0;padding:0 0 9px;list-style:none}
  .mmenu__sub a{
    display:flex;align-items:flex-start;min-height:34px;padding:6px 0 6px 24px;
    font-size:.87rem;font-weight:400;line-height:1.3;color:var(--body);
    overflow-wrap:anywhere;
    transition:color .18s;
  }
  .mmenu__sub a::before{
    content:"";width:4px;height:4px;margin:.55em 7px 0 -11px;
    border-radius:50%;background:rgba(170,40,50,.3);flex:none;transition:background .18s;
  }
  .mmenu__sub a:hover{color:var(--blue-600)}
  .mmenu__sub a:hover::before{background:var(--blue-500)}

  body.menu-open{overflow:hidden}
}

@media (max-width:400px){
  .mmenu__list > li > a,.mmenu__parent{min-height:44px;font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  .mmenu,.mscrim{transition:none}
}

/* ==========================================================================
   43. Language switcher
   Custom UI over the Google Translate element. The widget's own chrome is
   hidden; !important is unavoidable there because Google injects inline
   styles on <body> and its iframes after load.
   ========================================================================== */

/* ---------- 43a. Hide everything Google injects ---------- */
#google_translate_element{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate{display:none !important}
body{top:0 !important;position:static !important}
.goog-te-gadget-icon,.goog-logo-link,.goog-te-gadget span{display:none !important}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
/* Google's own loading bar / spinner, injected after the script runs */
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}

/* ---------- 43b. Fixed cluster: language + menu trigger ---------- */
.hdr-tools{
  position:fixed;z-index:961;
  top:clamp(14px,1.8vw,24px);right:clamp(14px,2.4vw,30px);
  display:flex;align-items:center;gap:8px;
}

/* ---------- 43c. Trigger pill, matching the logo card ---------- */
.langsel{position:relative}
.langsel__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:66px;height:38px;padding:0;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(170,40,50,.1);
  border-radius:clamp(13px,1.4vw,17px);
  box-shadow:0 10px 26px rgba(58,10,12,.16),0 2px 6px rgba(58,10,12,.05);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.02em;
  color:var(--navy-800);cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s;
}
.langsel__btn:hover{border-color:rgba(170,40,50,.3);color:var(--blue-600)}
.langsel__globe{width:15px;height:15px;flex:none;color:var(--blue-600)}
.langsel__chev{width:10px;height:10px;flex:none;opacity:.6;transition:transform .22s ease-out}
.langsel__btn[aria-expanded="true"] .langsel__chev{transform:rotate(180deg);opacity:1}
.langsel__cur{font-variant-numeric:tabular-nums}

/* ---------- 43d. Dropdown ---------- */
.langsel__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:5;
  margin:0;padding:6px;list-style:none;
  width:212px;max-height:min(60vh,360px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid rgba(170,40,50,.12);border-radius:14px;
  box-shadow:0 18px 44px rgba(58,10,12,.18),0 2px 8px rgba(58,10,12,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease-out,transform .22s ease-out,visibility .22s;
  scrollbar-width:thin;scrollbar-color:rgba(170,40,50,.22) transparent;
}
.langsel__menu.is-open{opacity:1;visibility:visible;transform:none}
.langsel__menu::-webkit-scrollbar{width:5px}
.langsel__menu::-webkit-scrollbar-thumb{background:rgba(170,40,50,.22);border-radius:4px}

.langsel__opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:42px;padding:9px 10px;border:0;border-radius:9px;
  background:none;cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:.92rem;font-weight:500;line-height:1.3;
  color:var(--ink);transition:background .16s,color .16s;
}
.langsel__opt:hover{background:var(--blue-050);color:var(--blue-600)}
.langsel__name i{font-style:normal;color:var(--muted);margin-left:5px}
.langsel__opt:hover .langsel__name i{color:var(--blue-500)}
.langsel__tick{width:15px;height:15px;flex:none;color:var(--blue-600);opacity:0;transition:opacity .16s}
.langsel__opt[aria-selected="true"]{color:var(--blue-600);font-weight:700}
.langsel__opt[aria-selected="true"] .langsel__tick{opacity:1}
.langsel__opt[aria-selected="true"] .langsel__name i{color:var(--blue-500)}

/* ---------- 43e. The menu trigger joins the cluster ---------- */
@media (max-width:1023px){
  .mburger{position:static;top:auto;right:auto}
}

/* ---------- 43f. Small phones: compact pill, dropdown stays in view ---------- */
@media (max-width:480px){
  .hdr-tools{gap:6px}
  .mburger{width:44px;height:44px}
  .langsel__menu{width:min(212px,calc(100vw - 28px))}
}

@media (prefers-reduced-motion:reduce){
  .langsel__menu{transition:none}
}

/* ==========================================================================
   44. Motion
   Only opacity and transform are animated, so nothing here can shift layout
   or trigger reflow. Every rule is gated on .js, so with scripting off the
   page renders fully visible and static.
   ========================================================================== */

@keyframes ah-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ah-rise-img{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- 44a. Hero entrance: image, heading, body, then the CTAs ---------- */
.js .phero__photo,
.js .phero__reg,
.js .phero__nameline,
.js .facts,
.js .phero__rule,
.js .phero__line,
.js .phero__pill,
.js .widget{
  animation:ah-rise .7s cubic-bezier(.2,.7,.3,1) both;
  will-change:opacity,transform;
}
.js .phero__photo{animation-name:ah-rise-img;animation-duration:.85s;animation-delay:0ms}
.js .phero__reg{animation-delay:120ms}
.js .phero__nameline{animation-delay:150ms}
.js .facts{animation-delay:300ms}
.js .phero__rule{animation-delay:360ms}
.js .phero__line{animation-delay:390ms}
.js .phero__pill{animation-delay:450ms}
.js .widget{animation-delay:300ms;animation-duration:.8s}

/* the hero runs once; drop the hint so the compositor can let the layers go */
.js .phero__photo,.js .widget{animation-fill-mode:both}

/* ---------- 44b. Scroll reveal: image variant ---------- */
.js .reveal--img{transform:translateY(20px) scale(.97)}
.js .reveal--img.is-in{transform:none}
.js .reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}

/* ---------- 44c. Sequenced blocks (section heads, final CTA) ---------- */
.js .reveal-seq > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .reveal-seq.is-in > *{opacity:1;transform:none}
.js .reveal-seq.is-in > *:nth-child(2){transition-delay:120ms}
.js .reveal-seq.is-in > *:nth-child(3){transition-delay:240ms}
.js .reveal-seq.is-in > *:nth-child(4){transition-delay:360ms}
.js .reveal-seq.is-in > *:nth-child(5){transition-delay:450ms}

/* ---------- 44d. Hover polish, pointer devices only ---------- */
@media (hover:hover) and (pointer:fine){
  .phero__photo{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
  .phero__photo img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .phero__photo:hover img{transform:scale(1.035)}

  .anatomy{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
  .anatomy:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

  .tcard .icon-tile,.scard .icon-tile,.tstrip__item .icon-tile,
  .type-card__art,.wcard .icon-tile{
    transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,background .28s;
  }
  .tcard:hover .icon-tile,.tstrip__item:hover .icon-tile,
  .type-card:hover .type-card__art,.wcard:hover .icon-tile{transform:scale(1.06)}

  .btn{transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s,background .24s,color .24s,border-color .24s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
}

/* ---------- 44e. Phones: shorter travel, quicker settle ---------- */
@media (max-width:768px){
  .js .reveal{transform:translateY(14px);transition-duration:.5s}
  .js .reveal--img{transform:translateY(12px) scale(.985)}
  .js .reveal-seq > *{transform:translateY(10px);transition-duration:.45s}
  .js .phero__photo,.js .phero__reg,.js .phero__nameline,.js .facts,
  .js .phero__rule,.js .phero__line,.js .phero__pill,.js .widget{
    animation-duration:.55s;
  }
  .js .facts{animation-delay:220ms}
  .js .phero__rule{animation-delay:260ms}
  .js .phero__line{animation-delay:280ms}
  .js .phero__pill{animation-delay:320ms}
  .js .widget{animation-delay:240ms}
}

/* ---------- 44f. Motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .js .phero__photo,.js .phero__reg,.js .phero__nameline,.js .facts,
  .js .phero__rule,.js .phero__line,.js .phero__pill,.js .widget{
    animation:none !important;opacity:1;transform:none;
  }
  .js .reveal,.js .reveal--img,.js .reveal-seq > *{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .phero__photo:hover img,.anatomy:hover{transform:none !important}
}

/* no italic text anywhere on the page */
em,i,cite,address,dfn,var{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} }

/* ===================================================================
   The link out of this microsite. It sits at the foot of the menu and
   is set apart from the in-page links above it, because it leaves the
   page rather than scrolling it.
   =================================================================== */
.mmenu__out {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.mmenu__out a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

.mmenu__outico {
  width: 14px;
  height: 14px;
  flex: none;
  transform: rotate(-90deg);
  opacity: .6;
}

/* ---------- Colorectal Conditions: illustrated cards ----------
   Each condition carries its own clinical illustration, 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}
}


/* ---------- 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}