/* ==========================================================================
   PROF. DR. SAMMY HANNA — MOBILE REFINEMENT LAYER
   Build: 2026-08-15

   PURPOSE
   The approved design was authored desktop-first. On phones the type scale
   inverts: headings render very large (H1 ~52px at 390px wide) while body
   copy and labels render very small (10-13px, some labels at 7px). This file
   corrects the mobile scale only.

   RULES OBSERVED
   - Every rule is inside a max-width media query. Above 900px this file has
     no effect whatsoever, so the approved desktop design is untouched.
   - No colours, fonts, section order or layout architecture are changed.
   - Loaded LAST so it wins on specificity without needing !important,
     except where the original used !important itself.
   ========================================================================== */


/* ==========================================================================
   1. TABLET / SMALL LAPTOP  (<= 900px)
   Gentle heading reduction only; body copy is still comfortable here.
   ========================================================================== */
@media (max-width: 900px) {

  h1 { font-size: clamp(30px, 5.4vw, 44px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(25px, 4.4vw, 36px) !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(18px, 2.9vw, 25px) !important; line-height: 1.24 !important; }

}


/* ==========================================================================
   2. PHONE  (<= 760px)
   The main correction layer.
   ========================================================================== */
@media (max-width: 760px) {

  /* ---- 2.1 Heading scale -------------------------------------------------
     Was: H1 52px, H2 47px, H3 40px at a 390px viewport (~7 chars per line).
     Now: a readable mobile scale that keeps the same visual hierarchy.      */

  h1 { font-size: clamp(27px, 7.4vw, 34px) !important; line-height: 1.14 !important; letter-spacing: -0.015em !important; }
  h2 { font-size: clamp(22px, 6.0vw, 27px) !important; line-height: 1.18 !important; letter-spacing: -0.01em !important; }
  h3 { font-size: clamp(17px, 4.6vw, 21px) !important; line-height: 1.28 !important; }
  h4 { font-size: clamp(15px, 4.0vw, 18px) !important; line-height: 1.32 !important; }

  /* Hero headings carry the most weight; keep them a step up but contained. */
  .hero h1,
  .hero-content h1 { font-size: clamp(29px, 8.2vw, 37px) !important; }

  /* Decorative oversized numerals / eyebrow figures should not dominate. */
  .evidence-number,
  .journey-active-detail > span,
  .form-head > span { font-size: clamp(22px, 6vw, 30px) !important; }


  /* ---- 2.2 Body copy -----------------------------------------------------
     Was: 10-13px. Now: 16px base, which is the accessible minimum for
     sustained reading on a phone and prevents iOS input zoom.               */

  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  main p,
  main li,
  article p,
  article li,
  section p,
  section li,
  .section-shell p,
  .faq-answer p,
  .doctor-lead,
  blockquote {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }

  /* Lead / intro paragraphs sit one step above body. */
  .hero p,
  .hero-content p,
  .section-heading > p,
  .split-heading > p,
  .lead,
  .intro { font-size: 17px !important; line-height: 1.55 !important; }

  /* Secondary descriptive text inside cards. */
  main small,
  section small,
  article small,
  footer small,
  .mega-links small,
  dd { font-size: 13px !important; line-height: 1.45 !important; }

  /* ---- 2.3 Minimum legible size -----------------------------------------
     Nothing on a phone should render below 12px. This catches the many
     eyebrow / label / index / tag elements authored at 7-10px.              */

  .eyebrow,
  .light-eyebrow,
  [class*="-eyebrow"],
  [class*="-index"],
  [class*="-label"],
  .tag-row span,
  .dark-tags span,
  .pathway-tags span,
  [class*="-tags"] span,
  .brand-copy small,
  .breadcrumbs,
  [class*="breadcrumb"] a,
  [class*="breadcrumb"] span,
  .nav-mega-section > strong,
  dt {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.06em !important;
  }

  /* Header wordmark: keep the lockup tight but readable. */
  .brand-copy strong { font-size: 13px !important; letter-spacing: 0.02em !important; }
  .brand-copy small  { font-size: 9.5px !important; letter-spacing: 0.05em !important; }


  /* ---- 2.4 Tap targets ---------------------------------------------------
     Measured 9x9px carousel dots and 21px-tall nav rows. Guidance is 44px.  */

  a, button, summary,
  [role="tab"], [role="button"] { touch-action: manipulation; }

  .desktop-nav a,
  .mobile-submenu a,
  .mobile-nested-links a,
  .mobile-view-all,
  .footer-links a,
  .footer-contact a,
  .faq-list button,
  .concern-tabs button,
  .treatment-list button,
  .evidence-tabs button,
  .journey-track button {
    min-height: 44px;
  }

  .footer-links a,
  .footer-contact a {
    display: flex;
    align-items: center;
    font-size: 15px !important;
  }

  /* Carousel / stepper dots measured at 9x9 — enlarge the hit area only,
     leaving the painted dot visually unchanged via a transparent border. */
  .v3-dots button,
  [class*="-dots"] button,
  [data-d-prev],
  [data-d-next] {
    min-width: 44px;
    min-height: 44px;
    background-clip: content-box;
    border: 12px solid transparent;
  }

  /* Form controls: 16px prevents iOS auto-zoom on focus. */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 48px;
  }
  textarea { min-height: 120px; }


  /* ---- 2.5 Horizontal overflow containment -------------------------------
     /profile/ measured 254px of overflow: .mobile-menu-scroll rendered
     601px wide inside a 390px viewport because the closed drawer is not
     width-constrained. Contain the drawer and guard the document.           */

  /* overflow-x:hidden on html/body makes BODY a scroll container, which
     silently disables position:sticky everywhere inside it. `clip` prevents
     the same horizontal overflow WITHOUT creating a scroll container, so the
     sticky hero and sticky journey photo keep working. */
  html, body { overflow-x: clip !important; }

  .mobile-menu,
  .mobile-menu-head,
  .mobile-menu-scroll,
  .mobile-nav-group,
  .mobile-submenu,
  .mobile-nested,
  .mobile-nested-links {
    max-width: 100%;
    box-sizing: border-box;
  }

  .mobile-menu-scroll {
    width: 100%;
    overflow-x: hidden;
  }

  .mobile-menu-scroll a,
  .mobile-menu-scroll button,
  .mobile-menu-scroll strong,
  .mobile-menu-scroll small,
  .mobile-menu-scroll p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Long clinical terms and URLs should wrap rather than push the layout. */
  main, section, article, footer { overflow-wrap: break-word; }

  /* Media never exceeds its column. */
  img, svg, video, iframe, table { max-width: 100%; }


  /* ---- 2.6 Mobile navigation drawer --------------------------------------
     Keeps the approved visual language; improves list usability.            */

  .mobile-nav-group.is-open .mobile-submenu {
    max-height: min(66vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-group > button {
    min-height: 52px;
    font-size: 15px;
  }

  .mobile-nested summary {
    min-height: 46px;
    font-size: 14px;
  }

  .mobile-nested-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.35;
  }

  .mobile-view-all {
    min-height: 46px;
    font-size: 13px;
  }

  /* Prevent the page behind the open drawer from scrolling. */
  body.menu-open,
  body.is-menu-open,
  html.menu-open { overflow: hidden; }


  /* ---- 2.7 Motion: keep it smooth ----------------------------------------
     Animate compositor-friendly properties only. Reveal thresholds are eased
     so content is already visible by the time it reaches the viewport.      */

  [data-reveal],
  [data-motion] {
    transition-duration: 520ms !important;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform, opacity;
  }

  /* Staggered delays feel slow on a short viewport — compress them. */
  [data-motion][style*="transition-delay"] { transition-delay: 60ms !important; }

  /* Parallax and fixed-attachment backgrounds are unreliable on mobile
     browsers and cause repaint jank; pin them instead. */
  [class*="parallax"],
  .anatomy-section,
  .hero { background-attachment: scroll !important; }

  /* Large decorative orbits/glows are expensive to composite on phones. */
  .footer-orbit,
  .anatomy-glow,
  .mega-orbit { display: none !important; }
}


/* ==========================================================================
   3. SMALL PHONE  (<= 400px)   iPhone SE / mini / base iPhone
   ========================================================================== */
@media (max-width: 400px) {

  h1 { font-size: clamp(25px, 7.2vw, 29px) !important; }
  h2 { font-size: clamp(21px, 5.8vw, 24px) !important; }

  .section-shell { width: min(92vw, 720px) !important; }

  .brand-copy small { font-size: 9px !important; }

  /* Two-up tab rows become single column so labels are not truncated. */
  .concern-tabs { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   4. REDUCED MOTION — respected at every width
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-motion] {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==========================================================================
   5. LEGAL PAGES  (privacy-policy / medical-disclaimer / terms-and-conditions)
   Reuses the existing type and colour system; adds only layout for prose.
   ========================================================================== */
.legal-main { padding: clamp(96px, 12vw, 150px) 0 clamp(60px, 8vw, 96px); }
.legal-shell { max-width: 760px; }

.legal-breadcrumbs { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 22px; }
.legal-breadcrumbs a { text-decoration: none; border-bottom: 1px solid currentColor; }
.legal-breadcrumbs span { margin: 0 6px; }

.legal-head { margin-bottom: clamp(28px, 4vw, 44px); }
/* Headings inherit the site's serif display face. The parent stylesheets scope
   their heading sizes to page-specific wrappers, so the legal pages need their
   own — without this they fall back to the browser default. */
.legal-head h1 {
  margin: 6px 0 16px;
  font-family: var(--serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink, #1c1d21);
  font-weight: 400;
}
.legal-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; opacity: .9; }
.legal-updated { font-size: 13px; opacity: .65; margin-top: 14px; }

.legal-block { margin-bottom: clamp(26px, 3.4vw, 40px); }
.legal-block h2 {
  font-family: var(--serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wine, #641d3b);
  font-weight: 400;
  margin-bottom: 12px;
}
.legal-block p { font-size: 16px; line-height: 1.68; margin-bottom: 12px; }
.legal-block a { text-decoration: underline; text-underline-offset: 3px; }

/* Consent row beside the enquiry form */
.consent-row {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 6px 0 4px; font-size: 13px; line-height: 1.5;
}
.consent-row input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 20px; margin: 2px 0 0; flex: 0 0 auto; cursor: pointer;
}
.consent-row label { cursor: pointer; }
.consent-row a { text-decoration: underline; text-underline-offset: 2px; }

.form-status { font-size: 14px; line-height: 1.5; margin-top: 12px; display: none; }
.form-status.is-visible { display: block; }
.form-status.is-error { color: #b3261e; }

@media (max-width: 760px) {
  .legal-main { padding-top: clamp(84px, 22vw, 118px); }
  .legal-block p, .legal-lead { font-size: 16px !important; }
  .consent-row { font-size: 14px; }
  .consent-row input[type="checkbox"] { width: 24px; height: 24px; min-height: 24px; }
}


/* ==========================================================================
   6. ARABIC TOGGLE — subpages only
   The HOMEPAGE toggle is a working React control with a full Arabic
   translation and RTL switching; it is untouched (it is a <button>).
   The 26 static subpages carry a plain <a class="language-switch"> that has
   no Arabic target and simply returns the visitor to the English homepage.
   Those are hidden until the Arabic subpages exist.
   Reverse by deleting this one block.
   ========================================================================== */
/* Hide every dead toggle. The homepage (data-home) keeps its working one. */
.language-switch { display: none !important; }
/* Homepage override lives in homepage-v8.css, which only the homepage loads,
   because React strips custom attributes from <html> during hydration. */


/* ==========================================================================
   7. HOMEPAGE BRAND MARK
   The homepage previously rendered a text "SH" monogram while all 26 other
   pages rendered the logo image, so the brand read differently on the entry
   page. The image now sits in the SAME 49x49 / 14px-radius slot; only the
   plate colour changes to the cream used site-wide so the dark mark reads.
   Revert by deleting this block and restoring "SH" in index.html.
   ========================================================================== */
.brand-monogram-logo {
  background: #f8f5f0 !important;
  overflow: hidden;
  padding: 3px;
}
.brand-monogram-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ==========================================================================
   8. REMAINING TAP TARGETS (phone)
   Standalone controls only. Inline links inside a sentence are deliberately
   left at text size — enlarging them would break the paragraph's line rhythm.
   ========================================================================== */
@media (max-width: 760px) {

  /* Standalone call-to-action links that sit on their own line. */
  .ka-pattern-result > a,
  .ka-route-content > a,
  .ka-faq-intro > a,
  [class$="-result"] > a,
  [class$="-content"] > a.text-link,
  a.text-link,
  a.footer-book,
  .footer-legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
  }
  .footer-legal a { font-size: 13px !important; }

  /* Breadcrumb rows: give the row height without changing type size. */
  [class$="-breadcrumbs"] a,
  .breadcrumbs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Interactive diagram markers measured at 29x29. */
  .ka-xray-marker,
  [class*="-marker"] {
    min-width: 44px;
    min-height: 44px;
    background-clip: content-box;
    border: 8px solid transparent;
  }

  /* Image credit lines are informational, not navigation — keep them small
     but ensure they are still legible. */
  figcaption a,
  .image-credit a { font-size: 12px !important; }
}


/* ==========================================================================
   9. 404 / NOT FOUND PAGE
   Uses the existing header, footer and design tokens. Replaces the raw
   Next.js default error screen, which had no header, no navigation and no
   route back into the site.
   ========================================================================== */
.nf-main { padding: clamp(110px, 14vw, 180px) 0 clamp(70px, 9vw, 110px); }
.nf-shell { max-width: 900px; }

.nf-main h1 {
  font-family: var(--serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 8px 0 18px;
  color: var(--ink, #1c1d21);
}
.nf-lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 62ch; opacity: .85; }

.nf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: clamp(28px, 4vw, 44px) 0;
}
.nf-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 14px;
  padding: 20px 22px;
  border: 1px solid rgba(28, 29, 33, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.nf-card strong {
  grid-column: 1;
  font-family: var(--serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-size: 19px; font-weight: 400; color: var(--wine, #641d3b);
}
.nf-card span { grid-column: 1; font-size: 14px; line-height: 1.5; opacity: .75; }
.nf-card em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; opacity: .4; align-self: center; }
.nf-card:hover { border-color: var(--wine, #641d3b); transform: translateY(-2px); background: rgba(255,255,255,.9); }

.nf-help { border-top: 1px solid rgba(28,29,33,.12); padding-top: 22px; }
.nf-help p { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.nf-help a { text-decoration: underline; text-underline-offset: 3px; }
.nf-urgent { font-size: 13px !important; opacity: .7; max-width: 70ch; }

.nf-home {
  display: inline-flex; align-items: center; min-height: 46px;
  margin-top: 10px; padding: 0 22px; border-radius: 999px;
  background: var(--wine, #641d3b); color: #fff !important;
  text-decoration: none !important; font-size: 15px;
}
.nf-home:hover { opacity: .9; }

@media (max-width: 760px) {
  .nf-main { padding-top: clamp(92px, 24vw, 130px); }
  .nf-grid { grid-template-columns: 1fr; }
  .nf-card { min-height: 44px; }
  .nf-lead, .nf-help p { font-size: 16px !important; }
}

/* 2026-08-15 mobile doctor-card repair: keep ratings below portrait instead of covering identity/caption */
@media (max-width: 640px) {
  #doctor .doctor-portrait-column {
    padding: 0 !important;
  }
  #doctor .doctor-portrait-column::before {
    display: none !important;
  }
  #doctor .doctor-image-main {
    min-height: 0 !important;
    aspect-ratio: 0.79 !important;
    border-radius: 18px 54px 18px 18px !important;
  }
  #doctor .doctor-image-main .image-caption {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 12px 14px !important;
  }
  #doctor .doctor-review-stack {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }
  #doctor .doctor-review-stack a {
    min-height: 66px !important;
    width: 100% !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 26px rgba(28,29,33,.13) !important;
  }
  #doctor .doctor-copy {
    margin-top: 4px !important;
  }
  #doctor .doctor-copy > .eyebrow {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
    letter-spacing: .14em !important;
    font-size: 9px !important;
  }
}


/* ==========================================================================
   12. PROFILE PAGE — collapsed two-column grids (CRITICAL)
   Build: 2026-08-15

   The profile page rendered 69,391px tall on a 390px phone against 8,943px
   on desktop. Two grids kept desktop two-column definitions at phone widths
   with a minimum first column WIDER than the viewport:

     .profile-v9-journey-grid  ->  minmax(360px, .78fr) minmax(0, 1.22fr)
     .profile-v15-why-layout   ->  minmax(430px, .88fr) minmax(0, 1.12fr)

   The first column took the whole screen, the second collapsed to 0px, and
   its content stretched vertically forever. That is the "everything in the
   corner and the bottom broken" behaviour.

   Forcing a single column restores normal stacking. Desktop is untouched.
   ========================================================================== */
@media (max-width: 900px) {
  .profile-v9-journey-grid,
  .profile-v15-why-layout,
  .profile-v9-journey-shell > *,
  .profile-v15-why-shell > * {
    grid-template-columns: 1fr !important;
  }

  .profile-v9-journey-visual,
  .profile-v9-story,
  .profile-v15-why-layout > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The sticky chapter image is sized for a tall desktop column. */
  .profile-v9-journey-sticky { position: static !important; }
  .profile-v9-journey-sticky figure {
    width: 100% !important;
    height: clamp(260px, 52vw, 360px) !important;
    min-height: 0 !important;
  }

  /* Story chapters stack as normal blocks rather than scroll-driven steps. */
  .profile-v9-story { display: block !important; }
  .profile-v9-story > * { min-height: 0 !important; }
}

/* Any grid whose first track is wider than the phone will collapse the rest.
   This is a safety net for the same pattern elsewhere in the profile family. */
@media (max-width: 640px) {
  .profile-v5-site [class*="-grid"],
  .profile-v5-site [class*="-layout"],
  .profile-v5-site [class*="-row"]:not(.profile-v8-stat-row) {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   13. HERO — remove the duplicated background image on phones
   Build: 2026-08-15

   Below 900px the stylesheet switched .hero-scene-fit from display:none to
   display:block. It paints the SAME photo a second time with
   background-size:contain in a 202-360px band at the top, while .hero-scene
   continues to paint it full-bleed with background-size:cover underneath.
   The result reads as the picture appearing twice, once up and once down.

   One image now, framed to keep the subject in view on a tall screen.
   ========================================================================== */
@media (max-width: 900px) {
  .hero-scene-fit { display: none !important; }

  .hero-scene {
    inset: 0 !important;
    background-size: cover !important;
    background-position: 64% center !important;
  }
}

@media (max-width: 430px) {
  /* Narrower screens crop harder, so bias further toward the subject. */
  .hero-scene { background-position: 68% center !important; }
}


/* ==========================================================================
   14. WHATSAPP BUTTON — redesigned in the site's own palette
   Build: 2026-08-16 (v11)

   The green circle was the one element that belonged to no part of this
   design. Rebuilt as a dark wine pill with a lime hairline and the WhatsApp
   mark — the same shape and weight as the Sakafu button, using Hanna's
   colours rather than Sakafu's gold. Lime is used as a 1px outline only, so
   it never competes with the lime "Book a consultation" CTA.
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  border: 1px solid rgba(201, 232, 74, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, #6d2242 0%, #4a1229 100%);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 12px 30px rgba(28, 10, 20, .38),
    0 2px 6px rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .24s cubic-bezier(.22,.61,.36,1),
              box-shadow .24s ease, border-color .24s ease;
}

.whatsapp-float svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #c9e84a;
}

.whatsapp-float span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 1;
  padding: 0;
}

/* The old unread dot and pulse are gone — the pill reads as a button already. */
.whatsapp-float i { display: none !important; }
.whatsapp-float::after { content: none !important; }

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 232, 74, .9);
    box-shadow: 0 18px 38px rgba(28, 10, 20, .46), 0 3px 8px rgba(0,0,0,.24);
  }
}

/* Phones: icon-only circle so it never covers content, same styling. */
@media (max-width: 640px) {
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .whatsapp-float span { display: none; }
  .whatsapp-float svg { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
}

/* ==========================================================================
   15. SCROLL PERFORMANCE (phones/tablets)
   Scrolling felt heavy. The main costs on mobile were: scroll-linked
   transforms on every large image (--media-shift with will-change:transform,
   which promotes many layers at once), backdrop-filter blur on sticky and
   floating elements, and very large soft shadows.

   Visual design is unchanged; only the per-frame cost is reduced.
   ========================================================================== */
@media (max-width: 900px) {

  /* Stop per-image scroll parallax. Each one forced its own compositor layer
     and a transform update on every scroll frame. */
  .doctor-image-main img,
  .evidence-image img,
  .media-feature-image img,
  .pathway-image img,
  .treatment-image img {
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
  }

  /* backdrop-filter is the single most expensive effect while scrolling.
     Solid equivalents look near-identical at phone size. */
  .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(250,250,247,.96) !important; }
  .doctor-context-card,
  .doctor-review-stack a,
  .hero-float,
  .anatomy-disclaimer,
  .image-caption,
  .hero-scene-controls button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* NOTE: content-visibility:auto was tried here and removed. It applies
     layout containment, which breaks position:sticky inside the section and
     caused the journey section to mis-measure (852px reported against a
     2,637px child). The parallax and backdrop-filter changes above deliver
     the bulk of the scrolling gain without that side effect. */

  /* Decorative infinite animations kept running off screen. */
  .footer-orbit, .mega-orbit, .concern-pulse,
  .evidence-scanline, .journey-line i { animation: none !important; }

  /* Trim the largest blur radii; they are recomputed on every frame. */
  .pathway-card, .knowledge-card, .principle-card,
  .verified-review-card, .review-theme-card {
    box-shadow: 0 8px 22px rgba(28, 29, 33, .10) !important;
  }
}


/* ==========================================================================
   16. MOBILE SCROLL EFFECTS — parity with desktop
   Build: 2026-08-15 (v4)

   Desktop has two scroll behaviours that were absent on phones:
     a) the hero stays put while the next section rises over it
     b) the journey photograph pins while the chapters scroll past it
   Both are rebuilt here specifically for phone dimensions. The desktop
   mechanism is NOT reused: letting it through at phone widths is what
   produced the 69,391px profile page.
   ========================================================================== */

/* ---- 16a. REMOVED — hero pinning on mobile.
   Making the hero sticky caused the following section to scroll OVER the
   hero's own text (the trust ribbon covered "Without limits." and the
   intro paragraph). On desktop the effect works because the hero has room
   beneath the copy; on a phone the copy fills the screen, so anything
   sliding over it lands on top of the words. Reverted deliberately.
   ------------------------------------------------------------------- */

/* ---- 16b. Journey on mobile: pinned photo, Arshad pattern --------------
   Confirmed against handsurgerydoc.com/demo/about.html: that page uses the
   same architecture (one shared photo + counter, then N chapter blocks) and
   pins the photo while chapters scroll past.

   The earlier attempt failed on execution, not concept:
     - the photo was too tall, leaving no reading room
     - the chapter-marker row sat on top of the heading below it
   Photo is now bounded to ~34vh so a full chapter is readable beneath it.
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .profile-v9-journey-grid { display: block !important; }

  .profile-v9-journey-visual {
    position: sticky !important;
    top: 74px;                    /* clears the fixed header */
    z-index: 3;
    margin-bottom: 26px;          /* breathing room before the first chapter */
  }

  .profile-v9-journey-sticky { position: static !important; }

  .profile-v9-journey-sticky figure {
    width: 100% !important;
    height: 34vh !important;
    min-height: 210px !important;
    max-height: 280px !important;
    margin: 0 !important;
  }

  .profile-v9-story { display: block !important; position: static !important; }

  .profile-v9-story-card {
    min-height: 0 !important;
    margin-bottom: 16px;
    padding: 20px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    opacity: .5;
    transition: opacity .4s ease, border-color .4s ease;
  }
  .profile-v9-story-card.is-active {
    opacity: 1;
    border-color: rgba(201, 232, 74, .5);
  }

  .profile-v9-story-card h3 { font-size: 19px !important; line-height: 1.25 !important; margin-bottom: 8px; }
  .profile-v9-story-card p  { font-size: 15px !important; line-height: 1.62 !important; }
  .profile-v9-story-card small { font-size: 11px !important; letter-spacing: .08em; display: block; margin-bottom: 6px; }

  /* The route strip (LONDON — UK STANDING — CANADA — ...) lives INSIDE the
     sticky block and overlapped the heading below it. Verified class name
     against the live DOM: .profile-v9-route / .profile-v11-route. */
  .profile-v9-route,
  .profile-v11-route { display: none !important; }

  /* The on-photo counter already shows progress, so the separate bar I added
     is redundant and was crowding the section heading. */
  .journey-chapter-bar { display: none !important; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .hero { position: relative !important; }
  .profile-v9-journey-visual { position: relative !important; }
  .profile-v9-story-card { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   17. MOBILE ACCORDION — pick and read in one place
   On desktop the options sit beside the detail, so both are visible at once.
   Stacked on a phone that became: choose at the top, scroll down to read,
   scroll back up to choose again. The detail panel is now moved directly
   beneath the option that opened it (see mobile-accordion.js), and these
   rules give it the open/closed appearance.
   ========================================================================== */
@media (max-width: 900px) {
  .m-acc-panel {
    display: none;
    margin: -2px 0 12px;
    border-radius: 0 0 16px 16px;
    animation: mAccIn .32s cubic-bezier(.22,.61,.36,1) both;
  }
  .m-acc-panel.is-open { display: block; }

  @keyframes mAccIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  /* The button that owns the open panel reads as a joined header. */
  .m-acc-trigger.is-open {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* A chevron so it is obvious these expand. */
  .m-acc-trigger::after {
    content: "";
    width: 9px; height: 9px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .55;
    transition: transform .28s ease;
    flex: 0 0 auto;
  }
  .m-acc-trigger.is-open::after { transform: rotate(-135deg) translateY(-2px); }
}


/* ==========================================================================
   18. STICKY ENABLEMENT — overflow containers
   Earlier passes set `overflow-x: hidden !important` on html, body and .site
   to stop sideways scrolling. That works, but `hidden` turns each of those
   into a SCROLL CONTAINER, which silently disables position:sticky for every
   descendant — which is why the hero and the journey photo would not pin.

   `clip` prevents exactly the same horizontal overflow but does NOT create a
   scroll container, so sticky works again. Horizontal overflow re-tested at
   390px and 430px: still zero.
   ========================================================================== */
@media (max-width: 900px) {
  html, body { overflow-x: clip !important; }
  .site {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}


/* ==========================================================================
   19. KNEE / HIP PATTERN FINDER — legend collision (phones)
   On /hip/ and /knee-pain-conditions/ the option list rode up over the
   "…symptoms can overlap" legend beneath the heading, so the legend text sat
   underneath the first option. Give the heading block room to finish before
   the tool starts.
   ========================================================================== */
@media (max-width: 900px) {
  /* The grid was placing the tool back into the heading's row on phones.
     Plain block flow removes the placement entirely and the two stack. */
  .kp-pattern-layout {
    display: block !important;
    row-gap: 0 !important;
  }
  .kp-pattern-layout > * { width: 100% !important; }

  /* The heading carries `position:relative; top:108px` — a deliberate
     stagger for the desktop two-column layout. Once the columns stack, that
     108px push drives the heading straight down into the option list. */
  .kp-pattern-heading {
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 26px;
    padding-bottom: 0;
  }

  .kp-pattern-legend {
    margin-top: 18px !important;
    position: relative;
    z-index: 1;
  }

  .kp-pattern-tool {
    margin-top: 8px !important;
    transform: none !important;
  }
}


/* ==========================================================================
   20. ANATOMY EXPLORER — mobile order and sizing
   Build: 2026-08-15 (v6)

   Two problems on phones:
     - The generic accordion moved .anatomy-detail into the structure list,
       where it collapsed to 0x0 and left a large empty coloured block.
       That section is now excluded from the accordion (see
       mobile-interactions.js) and handled here instead.
     - The diagram sat BELOW the structure list, so tapping a structure
       changed a picture that was off screen.

   Order on phones is now: diagram, then structure list, then the detail for
   whichever structure is selected — everything within one screen's reach.
   ========================================================================== */
@media (max-width: 900px) {

  .anatomy-layout,
  .anatomy-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }

  /* The grid holds two children: .anatomy-copy (selector + detail) and
     .anatomy-visual. Put the diagram first, the copy second. */
  .anatomy-visual,
  .anatomy-stage { order: 1 !important; }
  .anatomy-copy  { order: 2 !important; display: flex !important;
                   flex-direction: column !important; gap: 14px; width: 100% !important; }

  /* Inside the copy column: list, then the explanation under it. */
  .anatomy-selector { order: 1 !important; }
  .anatomy-detail   { order: 2 !important; }

  .anatomy-visual,
  .anatomy-stage {
    width: 100% !important;
    height: clamp(280px, 68vw, 380px) !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* The selector is a plain list on phones, not a tall coloured column. */
  .anatomy-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .anatomy-selector button {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  /* The detail panel must never collapse. */
  .anatomy-detail {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 18px !important;
    border-radius: 16px;
  }
  .anatomy-detail h3 { font-size: 20px !important; line-height: 1.22 !important; }
  .anatomy-detail p  { font-size: 15px !important; line-height: 1.6 !important; }
}

@media (max-width: 400px) {
  .anatomy-selector { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   21 & 22. PROFILE HERO — REVERTED
   Build: 2026-08-15 (v7)

   Two rules were added here to tidy the hero and add a wrapped edge. Both
   were wrong and are removed:

   - The alignment rules targeted .profile-v5-hero-grid and
     .profile-v5-hero-copy, which DO NOT EXIST on this page, so they did
     nothing. But .profile-v5-stage does exist, and shrinking it to
     clamp(280px, 74vw, 400px) collapsed the portrait container inside a
     hero that is a fixed 710px tall with overflow:hidden. The result was the
     intro paragraph cut off mid-sentence and the portrait gone.

   - The wrapped edge pulled the following section up by -26px, which then
     covered the clipped copy instead of just the hero's bottom edge.

   The hero is back to exactly how it rendered in v5. It is not touched here.
   ========================================================================== */

/* ==========================================================================
   23. JOURNEY CHAPTER BAR (profile, phones)
   Slim pinned indicator: chapter number, chapter name, progress. Replaces
   the idea of pinning the photograph, which covered the text being read.
   Injected by mobile-interactions.js, mobile only.
   ========================================================================== */
.journey-chapter-bar { display: none; }

@media (max-width: 900px) {
  .journey-chapter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 76px;
    z-index: 5;
    margin: 0 0 18px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(28, 12, 20, .88);
    border: 1px solid rgba(201, 232, 74, .28);
    backdrop-filter: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
  }

  .jcb-count {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .58);
  }
  .jcb-count b {
    font-size: 14px;
    color: #c9e84a;
    font-weight: 600;
  }

  .jcb-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .jcb-track {
    flex: 0 0 46px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
  }
  .jcb-track i {
    display: block;
    height: 100%;
    width: 16%;
    border-radius: inherit;
    background: #c9e84a;
    transition: width .4s cubic-bezier(.22,.61,.36,1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jcb-track i { transition: none; }
}


/* ==========================================================================
   24. CUSTOM CURSOR — universal
   The lime dot and wine ring were homepage-only because they live inside the
   React bundle. These styles are lifted verbatim from the homepage stylesheet
   so the 26 static pages render an identical cursor. Created by cursor.js.
   Pointer devices only; never shown on touch.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
  }

  .cursor-dot {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--lime, #c9e84a);
    box-shadow: 0 0 12px rgba(201, 232, 74, .75);
  }

  .cursor-ring {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid rgba(100, 29, 59, .65);
    transition: width .15s, height .15s, margin .15s, background .15s;
  }

  .cursor-ring.is-pressed {
    width: 21px;
    height: 21px;
    margin: -10.5px 0 0 -10.5px;
    background: rgba(201, 232, 74, .2);
  }
}


/* ==========================================================================
   25. PROFILE HERO — portrait clear of the buttons (phones)
   Build: 2026-08-15 (v10)

   Measured on a 390px viewport:
     .profile-v5-doctor  absolute, top 398, left 125, 343x341  (face ~430-520)
     .profile-v5-actions in flow at y 452-550, x 44-224
   The two buttons therefore sat directly across his face. Nudging the
   portrait up and to the right puts the face above and beside the buttons
   instead of behind them. Nothing is resized, so the hero's fixed 710px
   height and overflow:hidden are unaffected — which is what broke it before.
   ========================================================================== */
@media (max-width: 900px) {
  .profile-v5-doctor {
    transform: translate(46px, -62px) !important;
    transform-origin: bottom right;
  }
}

@media (max-width: 400px) {
  .profile-v5-doctor { transform: translate(38px, -58px) !important; }
}


/* ==========================================================================
   26. JOURNEY CHAPTERS — steadier and more readable (phones)
   Two complaints: the text felt shaky while scrolling, and the paragraphs
   were too faint when a section came into view.

   Cause of the shake: inactive cards sat at opacity .5 and every card
   animated opacity as the observer flipped between them, so several cards
   were mid-transition at once while the page moved.

   Inactive cards are now only slightly dimmed, the transition is shorter,
   and the body text is heavier with more contrast.
   ========================================================================== */
@media (max-width: 900px) {
  .profile-v9-story-card {
    opacity: .88 !important;
    transition: opacity .2s linear, border-color .2s linear !important;
    transform: none !important;
    will-change: auto !important;
  }
  .profile-v9-story-card.is-active { opacity: 1 !important; }

  /* Reveal animations on these cards compounded the movement. */
  .profile-v9-story-card[data-motion],
  .profile-v9-story-card[data-reveal] {
    opacity: .88 !important;
    transform: none !important;
    transition: opacity .2s linear !important;
  }

  /* CORRECTION: the previous pass set this text to white, assuming dark
     cards. The cards are transparent over a LIGHT section — desktop renders
     the paragraph at rgb(23,35,29). White on light was unreadable. */
  .profile-v9-story-card p {
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    font-weight: 450 !important;
    color: rgba(23, 35, 29, .88) !important;
  }
  .profile-v9-story-card h3 {
    color: rgba(23, 35, 29, .96) !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }
  .profile-v9-story-card small {
    color: var(--wine, #641d3b) !important;
    font-weight: 600 !important;
  }

  /* A card needs a surface of its own on a light background. */
  .profile-v9-story-card {
    background: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(23, 35, 29, .10) !important;
  }
  .profile-v9-story-card.is-active {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(100, 29, 59, .35) !important;
  }
}


/* ==========================================================================
   27. PROFILE HERO — rebuilt for phones
   Build: 2026-08-16 (v12)

   Why the earlier attempts failed: EVERY child of .profile-v5-hero is
   position:absolute on a fixed 710px canvas — .profile-v5-motion-bg,
   .profile-v5-copy, .profile-v5-doctor, .profile-v5-meta, .profile-v5-scroll.
   Absolutely positioned children are out of flow, so flex `order` could
   never reorder them and nudging the portrait only moved a collision around.

   On phones the copy and the portrait are returned to normal flow so they
   stack: text, buttons, then the portrait beneath. The decorative background
   stays absolute. Desktop keeps the absolute canvas untouched.
   ========================================================================== */
@media (max-width: 900px) {
  .profile-v5-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 104px 0 34px !important;   /* clears the fixed header */
  }

  /* Decorative layer stays behind everything. */
  .profile-v5-motion-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  /* Copy into flow, first. */
  .profile-v5-copy {
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 22px !important;
    transform: none !important;
  }

  /* Buttons full width, stacked, directly under the paragraph. */
  .profile-v5-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    width: 100%;
    margin-top: 20px !important;
  }
  .profile-v5-actions > a {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }

  /* Portrait into flow, last — nothing can sit on his face. */
  .profile-v5-doctor {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: 1;
    display: block !important;
    width: calc(100% - 44px) !important;
    height: clamp(300px, 80vw, 420px) !important;
    margin: 22px auto 0 !important;
    border-radius: 18px;
    overflow: hidden;
  }
  .profile-v5-doctor img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 14% !important;   /* keeps his face in frame */
  }

  /* These two measure 0px tall on phones; keep them out of the new flow. */
  .profile-v5-meta,
  .profile-v5-scroll { position: absolute !important; }
}

/* ==========================================================================
   28. MOBILE DRAWER — "Book a consultation" pinned, never overlapping
   The drawer's bottom CTA drifted over the menu list as the list scrolled.
   It is now a fixed footer inside the drawer with the list scrolling above
   it, so the two can never meet.
   ========================================================================== */
@media (max-width: 900px) {
  .mobile-menu {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-menu-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
  }
  .mobile-book {
    flex: 0 0 auto !important;
    position: static !important;
    margin: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - 32px) !important;
    justify-content: center;
    min-height: 52px;
  }
}


/* ==========================================================================
   29. ROBOTIC / STEP PAGES — image card and its text read as one unit
   The caption sat far enough below its image card to look unrelated.
   ========================================================================== */
@media (max-width: 900px) {
  .ka-xray-board,
  .ka-image-result,
  .rk-figure,
  [class$="-figure"] { margin-bottom: 12px !important; }

  .ka-xray-board + *,
  .ka-image-result + * { margin-top: 10px !important; }

  figure + figcaption,
  figure figcaption { margin-top: 8px !important; }
}


/* ==========================================================================
   30. PROFILE — card centring, chapter counter, steadier scroll
   Build: 2026-08-16 (v13)
   ========================================================================== */
@media (max-width: 900px) {

  /* --- Cards were sitting 32px in on the left and touching the right edge.
         Equal gutters both sides so they read as centred. --------------- */
  .profile-v5-site [class*="-fact"],
  .profile-v11-fact,
  .profile-v10-portrait,
  .profile-v9-portrait,
  .profile-v5-site figure,
  .profile-v9-story-card {
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Text inside those cards needs its own even padding, not the card's. */
  .profile-v9-story-card {
    padding: 20px 18px !important;
    text-align: left;
  }
  .profile-v9-story-card > * { max-width: 100%; }

  /* --- Chapter number on the photograph was rgb(18,37,28): near-black
         green over a dark image, so it disappeared. ---------------------- */
  [data-journey-counter],
  .profile-v10-photo-counter b {
    color: #d8f26a !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
    font-weight: 600 !important;
  }
  .profile-v10-photo-counter span {
    color: rgba(255, 255, 255, .82) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5) !important;
  }

  /* --- The chapters still felt fast and shaky. Opacity changes are removed
         entirely on phones: every chapter is simply fully readable. ------ */
  .profile-v9-story-card,
  .profile-v9-story-card[data-motion],
  .profile-v9-story-card[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color .25s ease !important;
    animation: none !important;
  }

  /* Give the sticky photo a gentler settle so it does not appear to jump. */
  .profile-v9-journey-visual { transition: none !important; }
}


/* ==========================================================================
   31. MOBILE DRAWER — must never appear on desktop
   Widening the window past the breakpoint left the drawer open and visible
   on top of the desktop page. This is a hard guard regardless of any
   is-open class that may still be present.
   ========================================================================== */
@media (min-width: 901px) {
  .mobile-menu,
  .mobile-menu.is-open { display: none !important; }
}


/* ==========================================================================
   32. SCROLL LOCK — CRITICAL FIX (all widths)
   Build: 2026-08-16 (v15)

   An earlier pass set `overflow-x: hidden !important` on html and body to
   stop sideways scrolling. On body that computes overflow-y to `auto`, which
   makes BODY the scroll container instead of the document — and the page
   then cannot be scrolled at all. It was fixed for phones only; desktop was
   still locked.

   `clip` prevents the same horizontal overflow WITHOUT creating a scroll
   container, so the document scrolls normally and position:sticky keeps
   working. Applied at every width, deliberately outside any media query.
   ========================================================================== */
/* Put the horizontal clip on HTML only. Setting overflow-x:clip on BODY
   forces the other axis to clip as well, which stops the page scrolling and
   crops content — that was the second version of this same bug. */
/* Overflow on the ROOT element propagates to the viewport, so clip on html
   stops the page scrolling entirely. html and body must stay visible; the
   horizontal containment belongs on the page wrapper instead. */
html, body { overflow: visible !important; }
.site { overflow-x: clip !important; }

/* The drawer still needs to lock the page while it is open. */
body.menu-open,
body.is-menu-open,
html.menu-open { overflow: hidden !important; }


/* ==========================================================================
   33. WHATSAPP BUTTON — stop it colliding with page CTAs
   It sat on top of the footer "Request appointment" button and the in-page
   "WhatsApp clinic" button. Lifted clear, and hidden while the mobile drawer
   is open so it never sits over "Book a consultation".
   ========================================================================== */
.whatsapp-float { bottom: 26px !important; }

@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px !important; right: 14px !important; }
}

body.menu-open .whatsapp-float,
body.is-menu-open .whatsapp-float,
.mobile-menu.is-open ~ .whatsapp-float { opacity: 0 !important; pointer-events: none !important; }


/* ==========================================================================
   34. WHATSAPP BUTTON — one identical button on every page
   Build: 2026-08-16 (v16)

   The homepage rendered a real WhatsApp SVG; the 26 static pages rendered
   <span>◉</span> plus a <b> tag — a typographic circle, not an icon. The
   styling targeted `svg`, so it only ever applied to the homepage. That is
   why it looked right on one page and wrong on every other.

   The markup is now identical site-wide (SVG + "Chat with us"), and these
   rules pin the geometry so the React wrapper cannot make the homepage
   differ by a few pixels.
   ========================================================================== */
.whatsapp-float {
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box;
}
.whatsapp-float b { display: none !important; }
.whatsapp-float span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  .whatsapp-float { height: 52px !important; width: 52px !important; }
}


/* ==========================================================================
   35. PROFILE HERO PORTRAIT — stop cropping his head
   The portrait used object-fit:cover in a short box, so the top of his head
   was cut. Anchoring the crop to the very top of the frame keeps the head
   complete at every phone size.
   ========================================================================== */
@media (max-width: 900px) {
  .profile-v5-doctor img {
    object-position: 50% 0% !important;
  }
  .profile-v5-doctor {
    height: clamp(340px, 92vw, 470px) !important;
  }
}


/* ==========================================================================
   36. PATIENT STORY VIDEO + PUBMED LINKS
   Build: 2026-08-17 (v17)

   Video is a thumbnail card that opens YouTube rather than an embedded
   player: an embed pulls in YouTube's scripts on every page load, and the
   scrolling on this site is already something we are watching.
   ========================================================================== */
.tm-video { padding: clamp(48px, 7vw, 96px) 0; }
.tm-video-shell { display: block; }

.tm-video-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin-top: clamp(22px, 3vw, 38px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(23, 35, 29, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .6);
  text-decoration: none;
  color: inherit;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.tm-video-card img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.tm-video-play {
  position: absolute;
  top: clamp(16px, 2vw, 22px);
  left: clamp(16px, 2vw, 22px);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 12px;
  border-radius: 999px;
  background: rgba(100, 29, 59, .92);
  color: #c9e84a;
  box-shadow: 0 8px 22px rgba(20, 10, 15, .34);
  pointer-events: none;
}

.tm-video-copy { display: block; }
.tm-video-copy small {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wine, #641d3b);
  margin-bottom: 10px;
}
.tm-video-copy strong {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.22;
  margin-bottom: 12px;
}
.tm-video-copy b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wine, #641d3b);
}

@media (hover: hover) and (pointer: fine) {
  .tm-video-card:hover {
    border-color: rgba(100, 29, 59, .4);
    box-shadow: 0 16px 34px rgba(23, 35, 29, .12);
    transform: translateY(-2px);
  }
}

@media (max-width: 760px) {
  .tm-video-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tm-video-card img { min-height: 0; aspect-ratio: 16 / 9; }
  .tm-video-play { width: 46px; height: 46px; margin: 8px; }
}

/* --- PubMed links (profile + qualifications) ---------------------------- */
.profile-pubmed-link,
.qual-pubmed a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--wine, #641d3b);
  text-decoration: none;
  border-bottom: 1px solid rgba(100, 29, 59, .3);
  padding-bottom: 1px;
}
.profile-pubmed-link:hover,
.qual-pubmed a:hover { border-bottom-color: rgba(100, 29, 59, .8); }
.qual-pubmed { margin-top: 10px; }


/* ==========================================================================
   37. FAQ TOGGLE + LINK COLOURS
   Build: 2026-08-17 (v18)

   FAQ toggle: when a question is open the button turns lime, but the +/x
   glyph stayed wine (rgb(123,30,66)) — dark on light-lime, so the close
   control was almost invisible. Dark ink on the lime state instead.
   ========================================================================== */
.profile-v17-faq button[aria-expanded="true"] i,
.profile-v17-faq-item.is-active button i,
[class*="faq"] button[aria-expanded="true"] i {
  color: #14231c !important;
  opacity: 1 !important;
  font-weight: 500;
}
/* The visible +/x is drawn with pseudo-elements, so they need the colour too. */
.profile-v17-faq button[aria-expanded="true"] i::before,
.profile-v17-faq button[aria-expanded="true"] i::after,
.profile-v17-faq-item.is-active button i::before,
.profile-v17-faq-item.is-active button i::after,
[class*="faq"] button[aria-expanded="true"] i::before,
[class*="faq"] button[aria-expanded="true"] i::after {
  color: #14231c !important;
  background: #14231c !important;
  border-color: #14231c !important;
  opacity: 1 !important;
}

/* The lime state needs a visible boundary of its own. */
.profile-v17-faq button[aria-expanded="true"],
[class*="faq"] button[aria-expanded="true"] {
  color: #14231c !important;
}


/* --------------------------------------------------------------------------
   PubMed links — coloured for the background they sit on.
   Wine on the near-black qualifications page read as dark brown and was
   effectively invisible, which is what "odd / red / can't see" was.
   -------------------------------------------------------------------------- */

/* Qualifications page: dark background -> lime */
.qual-pubmed a {
  color: #c9e84a !important;
  border-bottom-color: rgba(201, 232, 74, .45) !important;
}
.qual-pubmed a:hover { border-bottom-color: #c9e84a !important; }

/* Profile page: light background -> wine */
.profile-pubmed-link {
  color: var(--wine, #641d3b) !important;
  border-bottom-color: rgba(100, 29, 59, .35) !important;
}
.profile-pubmed-link:hover { border-bottom-color: rgba(100, 29, 59, .9) !important; }

/* Both: clearly a link, not decorative text. */
.qual-pubmed a,
.profile-pubmed-link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}


/* Thumbnails come from YouTube's CDN. If that ever fails to load, show a
   branded frame with the play control rather than broken-image alt text. */
.vid-card-thumb.is-fallback {
  background-image: linear-gradient(160deg, rgba(100,29,59,.9), rgba(20,35,28,.95)),
                    url('/images/dr-hanna/robotic-surgery-hanna.webp');
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
}


/* ==========================================================================
   38. VIDEO GRID — Teaching & media
   Build: 2026-08-17 (v21)

   Card grid, thumbnail on top and copy beneath — the shape YouTube and
   Disney+ use, adapted for a medical site: the description is a real element
   with room for two or three lines, because a patient reading it is deciding
   whether to trust a surgeon, not picking something to watch.

   Cards are ~400px so that copy has space. The grid wraps on its own, so one
   video sits top-left at natural card size and more simply fill the rows —
   nothing to change when a dashboard starts publishing.
   ========================================================================== */
.vgrid { padding: clamp(34px, 4.4vw, 68px) 0; }

.vgrid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.vgrid-head-copy { max-width: 62ch; }

/* Arrows: hidden with a single video, shown once a second card exists. */
.vgrid-nav { display: none; gap: 8px; flex: 0 0 auto; }
.vgrid:has(.vgrid-card + .vgrid-card) .vgrid-nav { display: flex; }
.vgrid-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(100, 29, 59, .26);
  background: #fff;
  color: var(--wine, #641d3b);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.vgrid-btn:hover { background: var(--wine, #641d3b); color: #fff; }
.vgrid-btn[disabled] { opacity: .3; cursor: default; }
.vgrid-btn[disabled]:hover { background: #fff; color: var(--wine, #641d3b); }
.vgrid-head p {
  margin: 0 0 9px;
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wine, #641d3b);
}
.vgrid-head h2 {
  margin: 0 0 10px;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.14;
}
.vgrid-head span {
  display: block;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(23, 35, 29, .66);
}

/* Wrapping grid. Cards keep a sensible width and simply fill the rows. */
/* Horizontal rail rather than a wrapping grid, so the section reads as
   "more videos go here" even while there is only one. Snapping is native, so
   swipe works on touch with no JavaScript; the arrows are for mouse users. */
.vgrid-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 340px);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.vgrid-list::-webkit-scrollbar { display: none; }
.vgrid-list:focus-visible { outline: 2px solid var(--wine, #641d3b); outline-offset: 5px; }
.vgrid-card { scroll-snap-align: start; }

.vgrid-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(23, 35, 29, .1);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(23, 35, 29, .05);
  transition: box-shadow .26s ease, transform .26s ease, border-color .26s ease;
}
.vgrid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(100, 29, 59, .24);
  box-shadow: 0 18px 38px rgba(23, 35, 29, .12);
}

/* --- thumbnail on top --- */
.vgrid-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #14231c;
  cursor: pointer;
  overflow: hidden;
}
.vgrid-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.vgrid-play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(201, 232, 74, .96);
  color: #14231c;
  box-shadow: 0 8px 20px rgba(12, 6, 9, .32);
  transition: transform .26s ease, background .2s ease;
  pointer-events: none;
}
.vgrid-play svg { margin-left: 2px; }
.vgrid-card:hover .vgrid-thumb img { transform: scale(1.05); }
.vgrid-card:hover .vgrid-play { background: #d8f26a; }
.vgrid-thumb:focus-visible { outline: 3px solid #c9e84a; outline-offset: -3px; }

/* --- copy beneath: this is the part that matters on a medical site --- */
.vgrid-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px 14px;
}
.vgrid-chip {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(100, 29, 59, .08);
  color: var(--wine, #641d3b);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
}
/* Two lines maximum keeps every card the same, shorter height. */
.vgrid-body h3 {
  margin: 0 0 6px;
  font-family: var(--serif, Georgia, serif);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.22;
  color: #14231c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Trimmed to three lines so the card stays compact; the full text is still
   in the markup for search engines and screen readers. */
.vgrid-body p {
  margin: 0 0 11px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(23, 35, 29, .7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vgrid-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: #c9e84a;
  color: #14231c;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background .2s ease;
}
.vgrid-cta:hover { background: #d8f26a; }

/* --- phones: one card per row, full width --- */
@media (max-width: 760px) {
  .vgrid-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vgrid-nav { display: none !important; }
  .vgrid-list { grid-auto-columns: 84%; gap: 12px; }
  .vgrid-body { padding: 13px 14px 15px; }
  .vgrid-body h3 { font-size: 16.5px; }
  .vgrid-body p { font-size: 12.5px; -webkit-line-clamp: 2; }
  .vgrid-play { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .vgrid-card, .vgrid-thumb img, .vgrid-play, .vgrid-cta { transition: none; }
}

/* ---- lightbox ---- */
.vshow-modal {
  position: fixed; inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 48px);
  background: rgba(8, 5, 7, .9);
  animation: vshowIn .26s ease both;
}
.vshow-modal[hidden] { display: none; }
@keyframes vshowIn { from { opacity: 0 } to { opacity: 1 } }

.vshow-modal-frame {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.vshow-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.vshow-modal-close {
  position: absolute;
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.vshow-modal-close:hover { background: rgba(255, 255, 255, .18); }

@media (prefers-reduced-motion: reduce) {
  .vshow-media, .vshow-media img, .vshow-play { transition: none; }
  .vshow-modal { animation: none; }
  .vshow-track { scroll-behavior: auto; }
}