:root{
  --white:#FFFFFF;
  --bg-tint:#F1F8F7;
  --navy:#0A2422;
  --navy-soft:#123A37;
  --ink:#474747;
  --ink-soft:#6E7473;
  --stone:#8F9695;
  --indigo:#49A7A4;
  --indigo-deep:#2E7D79;
  --indigo-pale:#E6F4F3;
  --coral:#3F928E;
  --coral-deep:#215F5C;
  --coral-pale:#E2F1F0;
  --mint:#56ADA8;
  --mint-pale:#E8F6F4;
  --gold:#F2A900;
  --gold-pale:#FDECC4;
  --line:#D9DEDD;
  --focus:#49A7A4;
  --font-display:'Fraunces',serif;
  --font-body:'Inter',sans-serif;
  --maxw:1180px;
  --radius-lg:28px;
  --radius:18px;
  --radius-sm:12px;
  --shadow-soft:0 20px 45px -20px rgba(8,36,34,0.18);
  --shadow-glow:0 24px 60px -18px rgba(73,167,164,0.42);
}
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;scroll-padding-top:88px;
  /* The sticky header's height changes on scroll (see .compact below). CSS
     scroll anchoring reacts to that by nudging scrollY to keep on-screen
     content visually still, which re-crosses the compact threshold and
     retriggers the resize — an infinite flicker loop. Disabling anchoring
     for the whole page scroll (not just the header) is what actually stops
     it, since the browser anchors on content below the header, not the
     header itself. */
  overflow-anchor:none;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--indigo-pale);color:var(--indigo-deep);}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;color:var(--ink);letter-spacing:-0.01em;}
p{margin:0;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}

/* Visually gone, still read out. Used where a glyph carries meaning a screen
   reader cannot get at - the star ratings, the required-field markers. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Offscreen until focused, so a keyboard user does not have to tab the whole
   header (and both dropdowns) before reaching the page. */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:1200;
  background:var(--white);color:var(--indigo-deep);
  font-family:var(--font-body);font-size:14px;font-weight:700;
  padding:11px 18px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  text-decoration:none;box-shadow:var(--shadow-soft);
  transition:top .18s ease;
}
.skip-link:focus{top:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}

.eyebrow{
  font-family:var(--font-body);font-size:12.5px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--indigo-deep);background:var(--indigo-pale);
  display:inline-flex;align-items:center;gap:8px;font-weight:700;
  padding:8px 16px;border-radius:999px;
}
.eyebrow.coral{color:var(--coral-deep);background:var(--coral-pale);}
.eyebrow.mint{color:var(--indigo-deep);background:var(--mint-pale);}
.eyebrow.gold{color:#8A6200;background:var(--gold-pale);}
.eyebrow.on-dark{color:var(--white);background:rgba(255,255,255,0.14);}
.eyebrow.hero-eyebrow{
  font-family:var(--font-body);font-weight:700;
  font-size:clamp(13px,1.1vw,15px);letter-spacing:0.16em;
  padding:0;gap:11px;text-transform:uppercase;
  background:none;color:var(--mint);box-shadow:none;
}
.eyebrow.hero-eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--indigo);flex-shrink:0;
}

/* ---------- NAV ---------- */
header.site-nav{
  /* --nav-h and --logo are the ONLY place header geometry is set; the row,
     the logo and the mobile dropdown all derive from them. */
  --nav-h:104px; --logo:64px;
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px;
  transition:height .28s cubic-bezier(.4,0,.2,1);
}
.nav-brand{
  font-family:var(--font-display);font-weight:700;font-size:19px;
  text-decoration:none;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:13px;
  color:var(--indigo-deep);
}
.nav-brand-logo{width:var(--logo);height:var(--logo);object-fit:contain;flex-shrink:0;
  transition:width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1);}
/* shrinks once you start scrolling, so the full-size mark does not eat the
   viewport for the whole visit */
header.site-nav.compact{--nav-h:72px; --logo:44px;}

.nav-mid{display:flex;align-items:center;flex-grow:1;justify-content:center;}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center;}
.nav-links > li{position:relative;}
.nav-link{
  font-size:14px;font-weight:600;padding:9px 11px;text-decoration:none;color:var(--ink-soft);
  border-radius:999px;transition:background .2s ease,color .2s ease;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover{background:var(--bg-tint);color:var(--ink);}
.nav-link.active{color:var(--white);background:var(--indigo);}
.nav-caret{width:11px;height:11px;transition:transform .2s ease;}
.has-drop:hover .nav-caret, .has-drop:focus-within .nav-caret{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:8px;
  list-style:none;margin:0;opacity:0;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;}
.dropdown a{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--radius-sm);
  text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-soft);
  transition:background .18s ease,color .18s ease;
}
.dropdown a:hover{background:var(--bg-tint);color:var(--ink);}
.dd-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dd-dot.indigo{background:var(--indigo);}
.dd-dot.coral{background:var(--coral);}
.dd-dot.mint{background:var(--mint);}
.dd-dot.gold{background:var(--gold);}

.nav-cta{
  font-size:14px;font-weight:700;padding:11px 22px;text-decoration:none;flex-shrink:0;
  background:linear-gradient(120deg,var(--indigo),var(--indigo-deep));color:var(--white);
  border-radius:999px;box-shadow:var(--shadow-glow);transition:transform .2s ease;white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);}
.nav-cta{display:inline-flex;align-items:center;gap:8px;}
.nav-cta-icon{display:none;width:21px;height:21px;}
.nav-toggle{display:none;background:var(--bg-tint);border:none;padding:10px 12px;flex-shrink:0;border-radius:var(--radius-sm);}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;}

/* The row collapses when it stops fitting, not at a round number. The full
   nav needs about 1150px: brand 223, links 641, WhatsApp 40, booking button
   167, plus gaps and the wrap padding. Below that the CTA was clipping off the
   right edge. js/site.js does NOT repeat this number: it asks whether the
   hamburger is visible, so the two cannot drift apart. */
@media (max-width:1160px){
  .nav-mid{display:block;}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--white);border-bottom:1px solid var(--line);
    padding:14px 24px 26px;box-shadow:var(--shadow-soft);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-link{padding:13px 14px;width:100%;justify-content:space-between;}
  .dropdown{
    position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none;
    border:none;border-left:2px solid var(--line);border-radius:0;
    margin:2px 0 6px 20px;padding:2px 0 2px 8px;min-width:0;
    display:none;
  }
  .has-drop.open-sub .dropdown{display:block;}
  .has-drop:hover .dropdown{transform:none;}
  .has-drop:hover .nav-caret{transform:none;}
  .has-drop.open-sub .nav-caret{transform:rotate(180deg);}
  .nav-toggle{display:block;}
  .nav-cta{padding:10px 16px;font-size:13px;}
}
@media (max-width:600px){
  header.site-nav{--nav-h:66px; --logo:40px;}
  header.site-nav.compact{--nav-h:56px; --logo:34px;}
  .nav-inner{padding:0 14px;gap:8px;}
  .nav-brand{font-size:15px;gap:8px;}
  /* icon-only CTA: "Book appointment" plus the logo, name and hamburger
     overflowed the row on small phones. Label kept for screen readers. */
  .nav-cta{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center;gap:0;}
  .nav-cta-text{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .nav-cta-icon{display:block;}
}
/* Narrower than this the name, the two icon buttons and the hamburger cannot
   share a row. The logo keeps the link, and aria-label keeps it named. */
@media (max-width:379px){
  .nav-brand-text{display:none;}
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.03s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.15s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.21s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.27s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.33s;}

/* ---------- HERO ----------
   Background is the site owner's own AI-generated glowing-joint render.
   A left-to-right navy scrim keeps the text column legible over whatever
   sits behind it without hiding the photo outright - the art shows through
   dark on the left and comes fully into view toward the right, where the
   hero-grid leaves it uncovered. */
.hero{
  padding:64px 0 84px;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg, var(--navy) 0%, rgba(10,36,34,0.92) 30%, rgba(10,36,34,0.55) 55%, rgba(10,36,34,0.15) 78%, rgba(10,36,34,0) 100%),
    image-set(url(../img/hero-joints-glow-1280.webp?v=7de95dd7c3) type("image/webp"),
              url(../img/hero-joints-glow-1280.jpg?v=70b051f186) type("image/jpeg"));
  background-size:cover;background-position:center right;
  color:var(--white);
}

.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;position:relative;z-index:1;}
.hero-name{font-size:clamp(40px,5.6vw,64px);line-height:1.05;letter-spacing:-0.02em;margin:16px 0 18px;color:var(--white);}
.hero-name .grad{background:linear-gradient(120deg,var(--indigo) 10%,var(--mint) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-credentials{font-family:var(--font-body);font-size:13px;letter-spacing:0.03em;color:#9FC2BF;margin-bottom:22px;}
.hero-thesis{font-size:18px;line-height:1.65;color:#C7DDDA;max-width:52ch;margin-bottom:34px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:0;align-items:center;}
.btn{
  font-size:14.5px;font-weight:700;padding:16px 30px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;border-radius:999px;
}
.btn-primary{background:var(--indigo);color:var(--white);box-shadow:var(--shadow-glow);}
.btn-primary:hover{transform:translateY(-2px);background:var(--indigo-deep);}
.btn-phone{background:rgba(255,255,255,0.08);color:var(--white);font-size:15.5px;padding:16px 28px;letter-spacing:0.01em;border:1.5px solid rgba(255,255,255,0.28);}
.btn-phone:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px);}
.btn-phone svg{width:19px;height:19px;}
/* ---------- STAT STRIP ---------- */
.stat-strip{padding:64px 0;background:var(--white);}
.stat-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.stat-block{text-align:left;}
.stat-block .stat-num{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.4vw,54px);line-height:1;color:var(--indigo);}
.stat-block .stat-num .stat-sub{font-size:0.5em;color:var(--stone);font-weight:600;vertical-align:middle;}
.stat-block .stat-label{font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-top:10px;line-height:1.4;}
.stat-strip-foot{margin-top:28px;}
.stat-strip-foot a{font-size:13.5px;font-weight:700;color:var(--indigo-deep);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:760px){.stat-strip-grid{grid-template-columns:repeat(2,1fr);gap:26px 20px;}}

/* ---------- SECTION SHELL ---------- */
section{padding:96px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap;}
.section-title{font-size:clamp(30px,3.8vw,44px);letter-spacing:-0.02em;margin-top:14px;}
.section-note{max-width:38ch;color:var(--stone);font-size:14.5px;line-height:1.55;text-align:right;font-weight:500;}
@media (max-width:760px){.section-note{text-align:left;}}
.alt-bg{background:var(--bg-tint);}

/* ---------- ABOUT / ACCORDIONS ---------- */
.about-intro{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;margin-bottom:44px;
}
@media (max-width:860px){.about-intro{grid-template-columns:1fr;gap:28px;}}
.about-portrait{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  aspect-ratio:4/5;box-shadow:var(--shadow-soft);
}
.about-portrait img{width:100%;height:100%;object-fit:cover;}
.about-lede{font-size:18px;line-height:1.7;color:var(--ink-soft);}
.about-lede + .about-lede{margin-top:16px;}

.acc-list{display:flex;flex-direction:column;gap:14px;}
.acc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease;}
.acc.open{box-shadow:var(--shadow-soft);border-color:transparent;}
.acc-head{
  width:100%;display:flex;align-items:center;gap:16px;padding:22px 24px;text-align:left;
}
.acc-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--white);flex-shrink:0;}
.acc-icon svg{width:21px;height:21px;}
.acc-icon.indigo{background:linear-gradient(135deg,var(--indigo),var(--indigo-deep));}
.acc-icon.coral{background:linear-gradient(135deg,var(--coral),var(--coral-deep));}
.acc-icon.mint{background:linear-gradient(135deg,var(--mint),#1F6E69);}
.acc-icon.gold{background:linear-gradient(135deg,var(--gold),#C98600);}
.acc-titles{flex-grow:1;min-width:0;}
.acc-title{display:block;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.25;}
.acc-sub{display:block;font-size:13.5px;color:var(--stone);font-weight:500;margin-top:3px;line-height:1.4;}
.acc-chev{
  width:34px;height:34px;border-radius:50%;background:var(--bg-tint);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease, background .2s ease;
}
.acc-chev svg{width:15px;height:15px;color:var(--ink-soft);}
.acc.open .acc-chev{transform:rotate(180deg);background:var(--indigo);}
.acc.open .acc-chev svg{color:var(--white);}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;}
.acc.open .acc-body{grid-template-rows:1fr;}
.acc-body-inner{overflow:hidden;}
.acc-content{padding:2px 24px 26px;}

/* timeline inside clinical experience */
.tl{position:relative;padding-left:30px;}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--indigo),var(--mint));border-radius:2px;opacity:0.4;}
.tl-item{position:relative;padding:0 0 24px;}
.tl-item:last-child{padding-bottom:0;}
.tl-node{position:absolute;left:-30px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--white);border:3px solid var(--indigo);}
.tl-item.current .tl-node{background:linear-gradient(135deg,var(--indigo),var(--mint));border-color:transparent;box-shadow:0 0 0 5px rgba(73,167,164,0.14);}
.tl-date{font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--stone);text-transform:uppercase;margin-bottom:3px;}
.tl-role{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.3;}
.tl-place{font-size:14px;color:var(--ink-soft);margin-top:2px;}
.tl-mentor{font-size:13px;color:var(--stone);margin-top:4px;}
.tl-badge{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:var(--white);background:linear-gradient(120deg,var(--indigo),var(--indigo-deep));padding:4px 10px;border-radius:999px;}

/* education inside accordion */
.edu-item{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);}
.edu-item:first-child{padding-top:0;}
.edu-item:last-child{border-bottom:none;padding-bottom:0;}
.edu-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--mint));flex-shrink:0;margin-top:7px;}
.edu-year{font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--stone);margin-bottom:3px;}
.edu-degree{font-family:var(--font-display);font-size:18px;font-weight:700;}
.edu-inst{font-size:14px;color:var(--ink-soft);}
.sub-heading{font-family:var(--font-body);font-size:13px;text-transform:uppercase;color:var(--indigo-deep);margin:26px 0 14px;font-weight:700;letter-spacing:0.04em;}
.sub-heading:first-child{margin-top:0;}
.badge-row{display:flex;flex-wrap:wrap;gap:9px;}
.badge{padding:8px 15px;font-size:13px;font-weight:600;color:var(--indigo-deep);background:var(--indigo-pale);border-radius:999px;}
.badge.coral{color:var(--coral-deep);background:var(--coral-pale);}

/* publications inside accordion */
.orcid-line{font-family:var(--font-body);font-size:12.5px;color:var(--stone);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.orcid-line a{color:var(--indigo-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.biblio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.biblio li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px;border-radius:var(--radius-sm);background:var(--bg-tint);}
@media (max-width:640px){.biblio li{grid-template-columns:1fr;gap:8px;}}
.biblio-num{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--indigo);}
.biblio-body{display:flex;flex-direction:column;gap:6px;}
.biblio-authors{font-size:12.5px;color:var(--stone);font-weight:600;}
.biblio-title{font-family:var(--font-display);font-size:16.5px;line-height:1.4;font-weight:700;}
.biblio-source{font-size:13px;color:var(--ink-soft);}
.biblio-doi{font-family:var(--font-body);font-size:11px;color:var(--indigo-deep);text-decoration:underline;text-underline-offset:3px;width:fit-content;word-break:break-all;}
.biblio-status{font-size:10.5px;font-weight:700;text-transform:uppercase;padding:4px 11px;width:fit-content;margin-top:3px;border-radius:999px;}
.biblio-status.published{background:var(--mint-pale);color:var(--indigo-deep);}
.biblio-status.submitted{background:var(--gold-pale);color:#8A6200;}

/* awards inside accordion */
.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:6px;}
.filter-chip{font-size:12.5px;font-weight:700;background:var(--bg-tint);padding:9px 16px;color:var(--ink-soft);transition:all .18s ease;border-radius:999px;}
.filter-chip:hover{background:var(--indigo-pale);color:var(--indigo-deep);}
.filter-chip.active{background:var(--ink);color:var(--white);}
.filter-count{color:var(--stone);font-size:12.5px;font-weight:600;margin:14px 0 18px;}
.rec-list{display:flex;flex-direction:column;gap:1px;}
.rec-item{display:grid;grid-template-columns:104px 122px 1fr;gap:16px;padding:15px 14px;align-items:baseline;border-radius:var(--radius-sm);transition:background .2s ease;}
.rec-item:hover{background:var(--bg-tint);}
@media (max-width:760px){.rec-item{grid-template-columns:1fr;gap:5px;}}
.rec-item.hide{display:none;}
.rec-date{font-family:var(--font-body);font-size:11.5px;color:var(--indigo-deep);font-weight:600;}
.rec-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:999px;width:fit-content;align-self:start;}
.rec-tag.talk{background:var(--coral-pale);color:var(--coral-deep);}
.rec-tag.conference{background:var(--indigo-pale);color:var(--indigo-deep);}
.rec-tag.course{background:var(--mint-pale);color:var(--indigo-deep);}
.rec-tag.award{background:var(--gold-pale);color:#8A6200;}
.rec-title{font-size:14px;color:var(--ink-soft);line-height:1.55;}
.rec-title b{color:var(--ink);font-weight:700;}

/* ---------- EXPERTISE ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
.proc-card{
  background:var(--white);padding:28px 26px;border-radius:var(--radius);border:1.5px solid var(--indigo-pale);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;scroll-margin-top:88px;
}
.proc-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(8,36,34,0.2);border-color:var(--indigo);}
.proc-card.flash{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(73,167,164,0.14);}
.proc-media{margin:-28px -26px 20px;height:180px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-tint);}
.proc-media img{width:100%;height:100%;object-fit:cover;display:block;}
.proc-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.proc-icon-wrap{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--white);flex-shrink:0;}
.proc-icon{width:27px;height:27px;}
.proc-joint{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;margin-top:3px;}
.proc-joint.knee{color:var(--indigo-deep);}
.proc-joint.shoulder{color:var(--coral-deep);}
.proc-joint.hip{color:var(--indigo-deep);}
.proc-card p{font-size:14px;color:var(--ink-soft);line-height:1.6;}
.proc-points{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.proc-points li{display:flex;gap:9px;font-size:13.5px;color:var(--stone);line-height:1.5;}
.proc-points svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--indigo);}

/* ---------- PHOTO BAND ----------
   Full-bleed background photos (the site owner's own AI-generated joint
   renders) used as section dividers. A navy wash + glass panel - the same
   same left-to-right navy scrim as .hero (text direct on the photo, no
   boxed panel) - the same visual grammar as the hero, not a second style
   invented for these two sections. */
.photo-band{
  position:relative;min-height:420px;background-size:cover;background-position:center;
  display:flex;align-items:center;padding:64px 0;overflow:hidden;color:var(--white);
}
.photo-band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--navy) 0%, rgba(10,36,34,0.92) 30%, rgba(10,36,34,0.55) 55%, rgba(10,36,34,0.15) 78%, rgba(10,36,34,0) 100%);
}
.photo-band-wrap{position:relative;z-index:1;}
.photo-band-content{max-width:480px;}
/* Level-agnostic on purpose. This band's heading has already changed level
   once for document outline reasons, and a colour rule keyed to the tag turns
   a white headline dark grey on a photograph the moment it does. */
.photo-band-content :is(h1,h2,h3,h4){color:var(--white);font-size:clamp(26px,3.2vw,38px);line-height:1.2;letter-spacing:-0.01em;margin:16px 0 16px;}
.photo-band-content p{color:#C4DBD8;font-size:16px;line-height:1.6;margin-bottom:26px;}
@media (max-width:760px){
  .photo-band{min-height:0;padding:48px 0;}
  .photo-band::before{background:rgba(10,36,34,0.78);}
  .photo-band-content{max-width:100%;}
}

/* ---------- REVIEWS ---------- */
.rating-strip{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:40px;
  padding:24px 28px;border-radius:var(--radius);
  background:linear-gradient(120deg,var(--indigo-pale),var(--mint-pale));
}
.rating-num{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1;}
.rating-stars{color:var(--gold);font-size:17px;letter-spacing:2px;line-height:1;margin:6px 0;}
.rating-meta{font-size:14px;color:var(--ink-soft);line-height:1.5;font-weight:500;}
.rating-meta a{color:var(--indigo-deep);text-decoration:underline;text-underline-offset:3px;font-weight:700;}
.testi-scroller{padding:6px 0 8px;display:flex;overflow-x:auto;scrollbar-width:none;}
.testi-scroller::-webkit-scrollbar{display:none;}
.testi-track{display:flex;gap:22px;}
.testi-card{
  flex:0 0 auto;width:380px;background:var(--white);border:1.5px solid var(--indigo-pale);
  border-radius:var(--radius);padding:30px 26px 26px;display:flex;flex-direction:column;position:relative;
  box-shadow:0 16px 36px -24px rgba(8,36,34,0.2);
}
.testi-card::before{
  content:"\201C";position:absolute;top:10px;left:22px;font-family:Georgia,serif;
  font-size:56px;line-height:1;color:var(--indigo-pale);font-weight:700;pointer-events:none;
}
@media (max-width:520px){.testi-card{width:86vw;}}
.testi-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative;z-index:1;}
.testi-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-body);font-weight:700;font-size:15px;}
.testi-stars{color:var(--gold);font-size:13px;letter-spacing:2px;}
.testi-text{font-size:14.5px;line-height:1.65;color:var(--ink-soft);flex-grow:1;margin-bottom:18px;position:relative;z-index:1;}
.testi-foot{border-top:1px solid var(--line);padding-top:13px;}
.testi-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--indigo-deep);}
.testi-meta{font-family:var(--font-body);font-size:10.5px;font-weight:600;color:var(--stone);}
.testi-controls{display:flex;align-items:center;gap:18px;margin-top:24px;}
.testi-arrow{width:42px;height:42px;background:var(--bg-tint);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;flex-shrink:0;border-radius:50%;}
.testi-arrow:hover{background:var(--ink);color:var(--white);}
.testi-dots{display:flex;gap:8px;flex-wrap:wrap;}
.testi-dot{width:9px;height:9px;border-radius:50%;background:var(--line);padding:0;border:0;flex:0 0 auto;transition:background .2s ease,transform .2s ease;}
.testi-dot.active{background:var(--indigo);transform:scale(1.3);}
.testi-dot[hidden]{display:none;}
.testi-arrow:disabled{opacity:0.32;pointer-events:none;}

/* ---------- GALLERY ---------- */
/* Viewer-driven, not self-driving. The strip used to run left to right on a
   CSS marquee; the photo you wanted was always sliding away from the cursor,
   and pausing it needed a control of its own. It is a plain horizontal
   scroller now - swipe, mouse drag, arrow keys or the two buttons - which
   also removes the duplicated photo set the seamless loop depended on and
   the reduced-motion fallback, since nothing moves on its own any more. */
.gal-grid{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.gal-grid:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--radius-sm);}
/* While a drag is in flight the cursor becomes a fist and text selection is
   suppressed, or dragging across a caption selects it instead of scrolling. */
.gal-grid.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.gal-grid.dragging .gal-item{pointer-events:none;}
.gal-track{display:flex;gap:18px;width:max-content;}

.gal-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:14px;flex-wrap:wrap;
}
.gal-hint{font-size:13px;font-weight:600;color:var(--stone);}
.gal-arrows{display:flex;gap:8px;}
.gal-arrow{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--indigo-pale);color:var(--indigo-deep);
  transition:background .18s ease,color .18s ease,opacity .18s ease;
}
.gal-arrow:hover:not(:disabled){background:var(--indigo);color:var(--white);}
.gal-arrow:disabled{opacity:0.35;cursor:default;}
.gal-arrow svg{width:17px;height:17px;}

.gal-item{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);transition:transform .25s ease, box-shadow .25s ease;
  flex:0 0 300px;width:300px;scroll-snap-align:center;
  display:block;padding:0;text-align:left;background:none;cursor:zoom-in;
}
@media (max-width:640px){.gal-item{flex-basis:78vw;width:78vw;}}
.gal-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.gal-item:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.gal-item picture{display:block;width:100%;height:100%;}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;}

/* The expertise photo is its own button inside the media box, so the tile
   opens from the keyboard without the card's title link and the image
   competing for the same element. */
.media-zoom{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.media-zoom picture{display:block;width:100%;height:100%;}
.media-zoom:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;}

/* ---------- LIGHTBOX ---------- */
#lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible;}
#lightbox::backdrop{background:rgba(6,20,19,0.9);backdrop-filter:blur(3px);}
#lightbox img{display:block;max-width:96vw;max-height:88vh;width:auto;height:auto;border-radius:var(--radius-sm);}
#lightbox figcaption{color:rgba(255,255,255,0.85);font-size:13.5px;font-weight:600;text-align:center;margin-top:12px;}
#lightbox .lb-bar{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:12px;}
#lbCount{color:rgba(255,255,255,0.55);font-family:var(--font-body);font-size:11.5px;font-weight:500;}
#lightbox figcaption{margin-top:0;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,0.92);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -8px rgba(0,0,0,0.6);transition:background .18s ease;}
.lb-nav:hover{background:var(--white);}
.lb-nav svg{width:22px;height:22px;}
#lbPrev{left:-60px;} #lbNext{right:-60px;}
.lb-nav[hidden]{display:none;}
@media (max-width:900px){#lbPrev{left:8px;} #lbNext{right:8px;}
  .lb-nav{width:40px;height:40px;background:rgba(255,255,255,0.8);}}
#lbClose{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;
  background:var(--white);color:var(--ink);font-size:23px;line-height:1;font-weight:700;
  box-shadow:0 8px 22px -8px rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;}
@media (max-width:640px){#lbClose{top:6px;right:6px;}}

.gal-cap{
  position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,0.94);
  border-radius:var(--radius-sm);padding:11px 14px;display:block;
}
.gal-cap-t{display:block;font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink);}
.gal-cap-s{display:block;font-size:11.5px;color:var(--stone);font-weight:600;margin-top:1px;}

/* ---------- APPOINTMENT ---------- */
.appt-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:44px;align-items:start;}
@media (max-width:900px){.appt-grid{grid-template-columns:1fr;gap:32px;}}
.appt-side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 16px 36px -24px rgba(8,36,34,0.2);}
.appt-side-card + .appt-side-card{margin-top:16px;}
.appt-step{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);}
.appt-step:last-child{border-bottom:none;padding-bottom:0;}
.appt-step:first-child{padding-top:0;}
.appt-step-n{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--indigo-pale);color:var(--indigo-deep);font-weight:700;font-size:13px;
}
.appt-step-t{font-weight:700;font-size:14.5px;}
.appt-step-s{font-size:13px;color:var(--stone);margin-top:1px;line-height:1.5;}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:620px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.field label .req{color:var(--coral-deep);}
.field input, .field select, .field textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);
  padding:13px 18px;border:1.5px solid var(--line);border-radius:999px;
  background:var(--white);transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{resize:vertical;min-height:96px;border-radius:var(--radius-sm);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(73,167,164,0.14);
}
.field .hint{font-size:12px;color:var(--stone);margin-top:6px;}
.field.err input, .field.err select, .field.err textarea{border-color:var(--coral-deep);}
.err-msg{display:none;font-size:12.5px;color:var(--coral-deep);font-weight:600;margin-top:6px;}
.field.err .err-msg{display:block;}
.form-submit{width:100%;justify-content:center;border:none;font-family:inherit;}
.form-foot{font-size:12.5px;color:var(--stone);margin-top:14px;text-align:center;line-height:1.5;}
.form-success{
  display:none;background:var(--mint-pale);border-radius:var(--radius-sm);padding:20px 22px;margin-bottom:18px;
}
.form-success.show{display:block;}
.form-success-t{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--indigo-deep);margin-bottom:5px;}
.form-success-s{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* ---------- CONTACT ---------- */
.contact-section{background:var(--navy);color:var(--white);position:relative;overflow:hidden;}
.contact-section .wrap{position:relative;z-index:1;}
.contact-glow{position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(73,167,164,0.32),transparent 70%);top:-220px;right:-200px;pointer-events:none;}
.contact-glow.two{background:radial-gradient(circle,rgba(86,173,168,0.26),transparent 70%);top:auto;bottom:-260px;left:-200px;right:auto;}
.contact-grid{display:grid;grid-template-columns:1fr;gap:60px;margin-top:44px;position:relative;z-index:1;}
.contact-lede{font-size:18px;line-height:1.6;color:#C4DBD8;max-width:46ch;margin-bottom:30px;}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.btn-call{background:var(--indigo);color:var(--white);box-shadow:0 20px 40px -18px rgba(73,167,164,0.55);}
.btn-call:hover{transform:translateY(-2px);background:var(--indigo-deep);}
.btn-call svg{width:18px;height:18px;}
.btn-outline-light{border:2px solid rgba(255,255,255,0.3);color:var(--white);}
.btn-outline-light:hover{background:var(--white);color:var(--navy);border-color:var(--white);}
.btn-outline-light svg{width:18px;height:18px;}
.map-wrap{
  border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,0.14);
  height:280px;background:rgba(255,255,255,0.06);
}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(0.15);}
.map-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:14px;font-weight:700;color:var(--mint);text-decoration:none;
}
.map-link:hover{text-decoration:underline;text-underline-offset:3px;}
.map-link svg{width:16px;height:16px;flex-shrink:0;}



/* ---------- FOOTER ---------- */
footer{background:var(--indigo-deep);color:var(--white);padding:56px 0 30px;position:relative;overflow:hidden;}
footer .wrap{position:relative;z-index:1;}

/* Oversized, near-invisible brand mark bleeding off a corner - the kind of
   quiet flourish a lot of premium sites tuck into a solid-color panel.
   White-silhouette (matching .footer-logo) at low opacity so it reads as
   texture, not a second logo competing with the real one. Shared between
   the footer and the contact section - the two panels on site with a flat
   brand-color background and no photo already filling the space. */
.section-mark{
  position:absolute;right:-90px;bottom:-140px;width:560px;height:560px;z-index:0;
  opacity:0.055;filter:brightness(0) invert(1);pointer-events:none;user-select:none;
}
@media (max-width:760px){.section-mark{width:380px;height:380px;right:-70px;bottom:-90px;}}
/* Rows, not columns. Four tall link columns left the right half of the footer
   empty and the whole block ~740px deep. As inline rows the same 18 links take
   three lines, and the identity block moves down beside the legal text, which
   was the only genuinely wide thing here. */
.footer-nav{padding-bottom:30px;display:grid;gap:16px;}
.footer-row{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:baseline;}
.footer-row .footer-col-title{margin-bottom:0;}
.footer-inline{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 20px;
}
.footer-inline a{
  font-size:14.5px;font-weight:600;text-decoration:none;color:var(--white);
  opacity:0.92;transition:opacity .15s ease;
}
.footer-inline a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
@media (max-width:700px){
  .footer-row{grid-template-columns:1fr;gap:8px;}
  .footer-inline{gap:6px 16px;}
}

.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-logo{width:48px;height:48px;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1);}
.footer-brand-name{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.2;}
.footer-strap{
  margin-top:14px;
  font-size:13.5px;line-height:1.65;color:rgba(255,255,255,0.72);
}
.footer-col-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#BFE0DC;margin-bottom:16px;}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--white);opacity:0.92;transition:opacity .15s ease;}
.footer-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.footer-social{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;text-decoration:none;color:rgba(255,255,255,0.75);
  transition:color .18s ease;
}
.footer-social:hover{color:var(--white);}
.footer-social svg{width:15px;height:15px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.16);font-size:13px;font-weight:500;color:rgba(255,255,255,0.75);}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .wrap{padding:0 20px;}
  section{padding:70px 0;}
  .hero{padding:52px 0 68px;}
  .acc-head{padding:18px 18px;gap:12px;}
  .acc-content{padding:2px 18px 22px;}
  .form-card{padding:22px;}
}

/* ---------- WHATSAPP ---------- */
/* Deliberately not WhatsApp brand green. Three of these on a page in #25D366
   pulled every eye away from the actual primary action and clashed with the
   teal the rest of the site is built on. The glyph is what makes the channel
   recognisable; the colour does not have to shout it as well. So the buttons
   take the site's own palette and simply sit in whichever button family the
   surface around them already uses. */
.btn-whatsapp{
  background:var(--indigo-pale);color:var(--indigo-deep);
  border:1.5px solid transparent;
}
.btn-whatsapp:hover{background:#D2E9E7;color:var(--navy);transform:translateY(-2px);}
.btn-whatsapp svg{width:19px;height:19px;}

/* On the dark hero and contact panels it matches .btn-phone instead, so the
   secondary actions there read as one set. */
.hero .btn-whatsapp,
.contact-section .btn-whatsapp,
.proc-cta .btn-whatsapp{
  background:rgba(255,255,255,0.08);color:var(--white);
  border:1.5px solid rgba(255,255,255,0.28);
}
.hero .btn-whatsapp:hover,
.contact-section .btn-whatsapp:hover,
.proc-cta .btn-whatsapp:hover{background:rgba(255,255,255,0.16);color:var(--white);}

.nav-wa{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--indigo-pale);color:var(--indigo-deep);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-wa:hover{background:var(--indigo);color:var(--white);transform:translateY(-1px);}
.nav-wa svg{width:21px;height:21px;}
@media (max-width:600px){.nav-wa{width:36px;height:36px;} .nav-wa svg{width:19px;height:19px;}}

/* ---------- BOOKING NOTICES ---------- */
/* Clinic hours are deliberately not published on the site, so these carry the
   one operational fact that is: appointment only. */
.hero-hours{
  display:flex;align-items:center;gap:10px;margin-top:22px;
  font-size:14px;color:#BFE0DC;line-height:1.5;
}
.hero-hours svg{width:18px;height:18px;flex-shrink:0;color:var(--mint);}
.hero-hours b{color:var(--white);font-weight:700;}
@media (max-width:600px){.hero-hours{font-size:13px;align-items:flex-start;}}

.hours-card{border-left:4px solid var(--indigo);}
.hours-note{font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
.hours-note + .hours-note{margin-top:12px;}
.hours-note b{color:var(--ink);}

.hours-strip{
  display:flex;align-items:center;gap:14px;margin:22px 0 26px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);padding:16px 20px;
}
.hours-strip svg{width:24px;height:24px;flex-shrink:0;color:var(--mint);}
.hours-strip-t{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--white);}
.hours-strip-s{font-size:13px;color:rgba(255,255,255,0.72);margin-top:2px;}
@media (max-width:520px){.hours-strip{padding:14px 16px;gap:11px;} .hours-strip-t{font-size:15px;}}

/* ---------- EXPERTISE: LINKS THROUGH TO THE FULL PAGES ---------- */
.proc-card h3{font-size:18px;font-weight:700;line-height:1.25;}
.proc-title-link{text-decoration:none;color:inherit;}
.proc-title-link:hover{color:var(--indigo-deep);text-decoration:underline;text-underline-offset:3px;}
.proc-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:700;color:var(--indigo-deep);text-decoration:none;
}
.proc-more svg{width:15px;height:15px;transition:transform .18s ease;}
.proc-more:hover{text-decoration:underline;text-underline-offset:3px;}
.proc-more:hover svg{transform:translateX(3px);}

/* ---------- FAQ ---------- */
/* <details>/<summary>, so it opens without JavaScript, is findable by the
   browser's own in-page search, and needs no ARIA of its own. */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 4px;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--radius-sm);}
.faq-item summary h3{
  font-family:var(--font-display);font-size:17.5px;font-weight:700;
  line-height:1.35;color:var(--ink);margin:0;
}
.faq-item:hover summary h3{color:var(--indigo-deep);}
.faq-mark{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--indigo-pale);color:var(--indigo-deep);
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s ease,background .18s ease;
}
.faq-mark svg{width:15px;height:15px;}
.faq-item[open] .faq-mark{transform:rotate(180deg);background:var(--indigo);color:var(--white);}
.faq-body{padding:0 60px 24px 4px;}
.faq-body p{font-size:15.5px;line-height:1.75;color:var(--ink-soft);}
.faq-body a{color:var(--indigo-deep);font-weight:600;}
@media (max-width:640px){
  .faq-item summary{padding:18px 2px;gap:14px;}
  .faq-item summary h3{font-size:16px;}
  .faq-body{padding:0 0 20px;}
}

/* ---------- FORM ---------- */
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.form-actions .btn{flex:1 1 200px;justify-content:center;}
/* WhatsApp is the intended path off this form, so its submit takes the
   primary fill and the email one stays outlined. Without that the two soft
   buttons read as equals and neither looks like the thing to press. */
.form-actions .btn-whatsapp{background:var(--indigo);color:var(--white);box-shadow:var(--shadow-glow);}
.form-actions .btn-whatsapp:hover{background:var(--indigo-deep);color:var(--white);}
.btn-outline{border:2px solid var(--line);color:var(--ink);background:var(--white);}
.btn-outline:hover{border-color:var(--indigo);color:var(--indigo-deep);}
.err-msg[hidden]{display:none;}
.form-success[hidden]{display:none;}

/* ---------- LEGAL ---------- */
.footer-legal{
  border-top:1px solid rgba(255,255,255,0.14);
  padding:26px 0 4px;
  display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;
}
.footer-legal-text{display:grid;gap:14px;}
.footer-ident{order:2;}
@media (max-width:860px){
  .footer-legal{grid-template-columns:1fr;gap:24px;}
  .footer-ident{order:-1;}
}
.footer-legal-text p{
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,0.62);
}
.footer-legal-text b{color:rgba(255,255,255,0.86);font-weight:700;}

/* ---------- APPOINTMENT SIDEBAR ---------- */
.appt-call{width:100%;justify-content:center;margin-top:14px;}
.appt-call svg{width:17px;height:17px;}

.section-title.on-dark{color:var(--white);margin-bottom:6px;}

/* ---------- PROCEDURE PAGES ---------- */
/* procedures/*.html are generated by tools/build-procedures.py and share this
   stylesheet, so everything above (header, footer, buttons, .faq-*) is already
   theirs. What follows is only what those pages add. */
.crumbs{background:var(--bg-tint);border-bottom:1px solid var(--line);padding:14px 0;}
.crumbs ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--stone);
}
.crumbs li + li::before{content:"/";margin-right:8px;color:var(--line);}
.crumbs a{color:var(--indigo-deep);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px;}
.crumbs [aria-current]{color:var(--ink);}

.proc-hero{background:var(--white);padding:56px 0 44px;border-bottom:1px solid var(--line);}
.proc-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:52px;align-items:center;}
.proc-hero h1{
  font-size:clamp(31px,4.4vw,50px);line-height:1.08;letter-spacing:-0.02em;margin:16px 0 20px;
}
.proc-lede{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:56ch;}
.proc-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.proc-hours{
  margin-top:18px;font-size:13.5px;color:var(--stone);font-weight:600;line-height:1.55;
}
.proc-hero-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--line);}
.proc-hero-media picture{display:block;}
.proc-hero-media img{width:100%;height:100%;max-height:420px;object-fit:cover;}
@media (max-width:900px){
  .proc-hero{padding:36px 0 32px;}
  .proc-hero-grid{grid-template-columns:1fr;gap:30px;}
  .proc-hero-media{order:-1;}
  .proc-hero-media img{max-height:260px;}
}

/* .proc-body keeps the .wrap gutter so the prose starts on the same left edge
   as the hero above it; the reading measure is capped on the blocks inside
   rather than by centring the column, which would leave the two misaligned. */
/* padding-top/bottom, never the shorthand: .proc-body also carries .wrap, and
   a `padding: 56px 0 88px` silently zeroes the left/right gutter .wrap sets.
   Desktop hides that, because .wrap's 1180px max-width leaves margin either
   side anyway; on a phone the text goes flush against both edges. */
.proc-body{padding-top:56px;padding-bottom:88px;}
.proc-section,.proc-disclaimer,.proc-cta,.proc-nextprev{max-width:840px;}
/* the global section{padding:96px 0} would otherwise stack on top of the
   spacing these already set for themselves */
.proc-section{padding:0;}
.proc-section + .proc-section{margin-top:46px;}
.proc-section h2{font-size:clamp(23px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:18px;}
.proc-section p{font-size:16.5px;line-height:1.78;color:var(--ink-soft);}
.proc-section p + p{margin-top:15px;}
/* a paragraph following a list needs the same gap; p + p does not match it */
.proc-list + p{margin-top:18px;}
.proc-section .faq-list{margin-top:6px;}

.proc-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px;}
.proc-list li{
  position:relative;padding-left:30px;font-size:16px;line-height:1.7;color:var(--ink-soft);
}
.proc-list li::before{
  content:"";position:absolute;left:8px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--indigo);
}
.proc-list b{color:var(--ink);font-weight:700;}

.proc-disclaimer{
  margin-top:46px;background:var(--bg-tint);border-left:4px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;
}
.proc-disclaimer p{font-size:14px;line-height:1.7;color:var(--ink-soft);}
.proc-disclaimer b{color:var(--ink);}

.proc-cta{
  margin-top:46px;background:var(--navy);color:var(--white);
  border-radius:var(--radius-lg);padding:38px 40px;
  display:grid;grid-template-columns:1.3fr auto;gap:30px;align-items:center;
}
.proc-cta h2{color:var(--white);font-size:clamp(21px,2.4vw,27px);margin-bottom:10px;}
.proc-cta p{font-size:15px;line-height:1.7;color:#C4DBD8;max-width:52ch;}
.proc-cta-actions{display:flex;flex-direction:column;gap:11px;}
.proc-cta-actions .btn{justify-content:center;white-space:nowrap;}
.proc-cta-actions .btn-outline{background:transparent;border-color:rgba(255,255,255,0.3);color:var(--white);}
.proc-cta-actions .btn-outline:hover{background:var(--white);color:var(--navy);border-color:var(--white);}
@media (max-width:760px){
  .proc-cta{grid-template-columns:1fr;padding:28px 24px;gap:22px;}
}

.proc-nextprev{
  margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.proc-nextprev-link{
  display:block;border:1.5px solid var(--indigo-pale);border-radius:var(--radius);
  padding:18px 22px;text-decoration:none;transition:border-color .18s ease,transform .18s ease;
}
.proc-nextprev-link:hover{border-color:var(--indigo);transform:translateY(-2px);}
.proc-nextprev-link.right{text-align:right;}
.proc-nextprev-l{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--stone);margin-bottom:5px;
}
.proc-nextprev-t{
  display:block;font-family:var(--font-display);font-weight:700;font-size:16px;
  line-height:1.3;color:var(--ink);
}
@media (max-width:560px){
  .proc-nextprev{grid-template-columns:1fr;}
  .proc-nextprev-link.right{text-align:left;}
}

/* ---------- 404 ---------- */
.notfound{padding:80px 0 100px;}
.notfound h1{font-size:clamp(32px,5vw,52px);letter-spacing:-0.02em;margin:16px 0 18px;}
.notfound-lede{font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:52ch;}
.notfound-links{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);}
.notfound-links .footer-links a{color:var(--indigo-deep);}

/* ---------- NAP BLOCK ---------- */

/* The appointment sidebar stacks four of these under two other cards, which
   left the column running well past the form beside it. */

/* ---------- AFFILIATIONS ---------- */
/* Its own tab under About me, deliberately: the hospital and clinic names were
   scattered across the hero, the appointment panel, the contact block, the FAQ
   and the footer, which read as promoting them. They belong in one place, as
   part of the CV, not as page furniture. */
.affil-list{display:grid;gap:14px;}
.affil-item{
  position:relative;background:var(--bg-tint);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:18px 20px;
}
.affil-role{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--stone);margin-bottom:5px;
}
.affil-place{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.3;}
.affil-where{font-size:14px;color:var(--ink-soft);margin-top:3px;}
.affil-note{margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);}
@media (max-width:520px){
}

/* ---------- CONDITIONS ---------- */
/* The entry point for someone who searched a symptom rather than an operation.
   Deliberately lighter than the expertise cards: no photograph, because the
   job here is to be scanned and clicked through, not to dwell on. */
.cond-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.cond-card{
  display:flex;flex-direction:column;
  background:var(--white);border:1.5px solid var(--indigo-pale);border-radius:var(--radius);
  padding:24px;text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cond-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(8,36,34,0.2);border-color:var(--indigo);}
.cond-card-area{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--indigo-deep);margin-bottom:9px;
}
.cond-card-t{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);line-height:1.25;}
.cond-card-s{font-size:14px;line-height:1.6;color:var(--ink-soft);margin-top:8px;flex-grow:1;}
.cond-card-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:700;color:var(--indigo-deep);
}
.cond-card-go svg{width:15px;height:15px;transition:transform .18s ease;}
.cond-card:hover .cond-card-go svg{transform:translateX(3px);}

/* ---------- RELATED PROCEDURES, ON A CONDITION PAGE ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px;}
.rel-card{
  display:flex;flex-direction:column;
  border:1.5px solid var(--indigo-pale);border-radius:var(--radius);padding:18px 20px;
  text-decoration:none;transition:border-color .18s ease, transform .18s ease;
}
.rel-card:hover{border-color:var(--indigo);transform:translateY(-2px);}
.rel-card-l{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--stone);margin-bottom:5px;
}
.rel-card-t{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);line-height:1.3;}
.rel-card-s{font-size:13px;line-height:1.55;color:var(--ink-soft);margin-top:6px;}


/* ---------- PRACTICE LOCATIONS ---------- */
/* One practice address, plus a note. He can still travel to Solan
   occasionally, but a second address card would read as a second regular
   clinic and send someone on a two hour drive on the wrong day. The
   difference between "where he practises" and "where he can sometimes go" has
   to survive in the layout, not just the wording. */
.loc-main{max-width:520px;margin-bottom:12px;}
.loc-note{
  font-size:13.5px;line-height:1.7;color:#A9C7C4;max-width:60ch;margin-bottom:4px;
}
.loc-note b{color:var(--white);font-weight:700;}
.loc{
  font-style:normal;display:grid;grid-template-columns:auto 1fr;
  gap:2px 12px;align-items:start;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.13);
  border-radius:var(--radius-sm);padding:16px 18px;
}
.loc-pin{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.1);color:var(--mint);}
.loc-pin svg{width:16px;height:16px;}
.loc-city{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--white);}
.loc-addr{font-size:13.5px;line-height:1.6;color:#C4DBD8;}

.loc-dir{
  grid-column:2;display:inline-flex;align-items:center;gap:6px;width:fit-content;
  margin-top:9px;font-size:13px;font-weight:700;color:var(--mint);text-decoration:none;
}
.loc-dir svg{width:14px;height:14px;transition:transform .18s ease;}
.loc-dir:hover{color:var(--white);}
.loc-dir:hover svg{transform:translateX(3px);}

.index-cross{margin-top:34px;font-size:14.5px;font-weight:600;}
.index-cross a{color:var(--indigo-deep);text-decoration:none;}
.index-cross a:hover{text-decoration:underline;text-underline-offset:3px;}