/* ============================================================
   v75 REPAIR LAYER  — loaded last
   ============================================================
   Dr. Arshad asked for larger paragraphs and smaller headings. My
   typography passes applied that to every font-size on the site,
   including interface chrome that was never reading copy:

       nav links      12px  ->  16.5px
       brand name     12px  ->  16.5px
       brand subtitle  9px  ->  14.5px
       button labels  11px  ->  16px
       kickers         9px  ->  14.5px

   The nav row outgrew its shell, so the BOOK CONSULTATION pill
   landed on top of "Locations".

   This layer puts chrome back to a compact-but-legible scale and
   leaves body copy where it is. Nothing here touches paragraphs,
   list items or headings.
   ============================================================ */

/* --- header: brand lockup ------------------------------------ */
.brand__text strong { font-size: 13px !important; }
.brand__text small  { font-size: 9.5px !important; }
.brand__mark        { flex-shrink: 0; }

/* --- header: nav labels -------------------------------------- */
.nav-links a,
.nav-mega__trigger  { font-size: 13.5px !important; }
.nav-links          { gap: 18px !important; min-width: 0; }
.nav-actions        { gap: 10px !important; flex-shrink: 0; }
.nav-shell .btn--small {
  font-size: 12px !important;
  padding-inline: 16px !important;
  white-space: nowrap;
}

/* --- narrower desktops: tighten before anything collides ----- */
@media (max-width: 1330px) {
  .nav-links a,
  .nav-mega__trigger { font-size: 12.5px !important; }
  .nav-links         { gap: 14px !important; }
}

/* --- tablet and below: the drawer button takes over ---------- */
@media (max-width: 1120px) {
  .nav-links { display: none !important; }
}

/* --- buttons and eyebrow labels elsewhere on the page --------
   Uppercase, letter-spaced labels read much larger than their px
   value. At 16px they were competing with the headings. */
.btn                { font-size: 13.5px !important; }
.btn--small         { font-size: 12px !important; }
.care-kicker,
.eyebrow            { font-size: 11px !important; }

/* --- fixed header clearance on anchor jumps ------------------ */
:root { scroll-padding-top: 110px; }
[id] { scroll-margin-top: 110px; }

/* --- theatre image framing -----------------------------------
   The source is nearly square; in a wide 455px-tall slot the crop
   was landing on the ceiling lights instead of the surgeons. */
.surgery-visual img,
.proc-decision__visual img { object-position: center 62% !important; }

/* --- keep the scroll animation alive -------------------------------
   The header shrinks on scroll (JS toggles .is-compact past ~80px) and
   expands again over the hero. Everything above is font-size only, so
   the width / min-height / box-shadow transitions in styles.css still
   drive that. Nothing here sets a width on .nav-shell -- an !important
   width would freeze the shell and kill the animation.

   The compact state hides the brand text, which frees ~250px, so the
   restored 13.5px labels have room in both states. */
.site-header,
.nav-shell,
.brand__text,
.brand__mark { transition-property: width, min-height, box-shadow, opacity, height; }


/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.wa-float{
  position:fixed; left:20px; bottom:20px; z-index:900;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-float:hover,
.wa-float:focus-visible{
  transform:scale(1.07);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.wa-float:focus-visible{ outline:3px solid #0b3d2c; outline-offset:3px; }
.wa-float svg{ width:30px; height:30px; fill:#fff; display:block; }

/* label appears on wider screens only; the circle alone is enough on a phone */
.wa-float__label{
  position:absolute; left:66px; white-space:nowrap;
  padding:8px 13px; border-radius:999px;
  background:#0b3d2c; color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  opacity:0; pointer-events:none; transform:translateX(-6px);
  transition:opacity .22s ease, transform .22s ease;
}
.wa-float:hover .wa-float__label{ opacity:1; transform:translateX(0); }

@media (max-width:640px){
  .wa-float{ left:16px; bottom:16px; width:52px; height:52px; }
  .wa-float svg{ width:27px; height:27px; }
  .wa-float__label{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wa-float,.wa-float__label{ transition:none; }
  .wa-float:hover{ transform:none; }
}