/* styles.css - Urology NSW - Consolidated 2026-04-17 */
/* v4.96 2026-06-12 - brochure source and topic filter chips */
/* v4.95 2026-06-09 - hero title slide height tracks banner aspect-ratio (2560/920) on desktop so full image shows uncropped */
/* v4.94 2026-06-09 - hero-slider flush under header (margin-top 0); #main-header vertical padding 10px */
/* v4.93 2026-06-09 - hero title slide: full-bleed art-directed banner (cover, subject anchored right) via <picture>; replaces masked right-aligned portrait */
/* v4.92 2026-06-07 - restored news-card thumbnail 4:3 lock on desktop (>=600px); was reverted to aspect-ratio:auto + align-self:stretch */
/* v4.91 2026-05-28 - featured team card photo horizontal padding matches body; reset stacked margin-left double-offset */
/* v4.90 2026-05-28 - featured team card: inset photo (20px top/sides) on white, drop gradient when img present so 15px image corners are visible */
/* v4.89 2026-05-28 - featured team card: img padding-top 20px, border-radius 15px; body padding-top 0; h3 margin-top 20px */
/* v4.88 2026-05-28 - tablet portrait: featured photo left-aligned with body text (22px margin) */
/* v4.87 2026-05-28 - header-logo-text padding-left/right 25px */
/* v4.86 2026-05-28 - tablet portrait: support cards stack with 180px centred photo; featured cards cap height at 260px */
/* v4.85 2026-05-28 - team-card--support tablet portrait: 140px photo column; stacks at 600px */
/* v4.84 2026-05-28 - team-card--support + team-list gap; team-list gap 22px */
/* v4.83 2026-05-28 - team-card--support photo locked to square, top-aligned */
/* v4.82 2026-05-28 - team-card--support photo overflow fix */
/* v4.81 2026-05-19 - top-bar Staff Portal pill (.top-bar-staff-portal); hidden by default, opted in by homepage at desktop sizes */
/* v4.80 2026-05-17 19:55:00 - per-image --focal custom property on hero, top-featured and news-card thumbs */
/* v4.79 2026-05-15 - contact form banners honour the [hidden] attribute */
/* v4.78 2026-05-13 - name highlight: more vivid marker yellow, bolder weight */
/* v4.77 2026-05-03 - name highlight span (.name-highlight) */
/* v4.76 2026-05-01 - mega panel prosthetics: single-column image link */
/* v4.75 2026-05-01 - team nurses blurb under names (.team-nurses-blurb) */
/* v4.74 2026-05-01 - team page nurse notes list */
/* v4.73 2026-05-01 - presentation PDF cards */
/* v4.72 2026-05-01 - team directory desktop cards */
/* v4.71 2026-05-01 - brochure index search */
/* v4.70 2026-04-30 - footer: Staff Portal row (.footer-bottom-top, .footer-staff-portal) */
/* v4.69 2026-04-30 - focal therapy mega-menu image cards */
/* v4.68 2026-04-30 - back-to-top control when procedure page TOC is populated (.back-to-top-toc) */
/* v4.67 2026-04-29 - hero title slide: portrait now keeps its natural vertical aspect (height-fit, right-aligned, never horizontally cropped so the face is always visible on wide desktops); dark navy gradient background covers the left side; CSS mask gradient feathers the image's left edge into the navy so there is no visible seam; text sits over the solid dark side */
/* v4.66 2026-04-29 - #home-intro comment: block order is hero then intro then feature boxes */
/* v4.67 2026-05-28 - featured team card: square half-width left-aligned photo at tablet portrait */
/* v4.66 2026-05-28 - team-group and team-card spacing adjustments */
/* v4.65 2026-04-29 - hero title slide reworked as a proper integrated banner (full-bleed image + horizontal navy-to-transparent scrim + overlaid H1/tagline with gold accent bar); replaces the prior split-panel layout */
/* v4.64 2026-04-29 - homepage hero slider slide 1 is now a title slide (.hero-slide--title text panel + portrait image); replaces standalone #home-hero text strip */
/* v4.63 2026-04-29 - short-version sibling section comments */
/* v4.62 2026-04-29 01:13:00 - bottom image galleries */
/* v4.61 2026-04-28 - mobile-only header Second Opinion pill (under the logo, <1024px) */
/* v4.60 2026-04-28 - mega menu CTA current-page colour */
/* v4.59 2026-04-28 - mega menu Second Opinion uplift: .mega-link--cta gold pill on top bar */
/* v4.58 2026-04-28 - .mega-action--accent: gold-pop variant for resources panel Second Opinion CTA */
/* v4.57 2026-04-26 - mega bar: .mega-link parity, .mega-trigger--stacked w/ subtitle, .mega-panel--mini, allow flex-wrap at all desktop widths for 15-item bar */
/* v4.56 2026-04-26 - hero slide images anchor top so faces stay in shot */
/* v4.55 2026-04-26 - storm saffron theme palette */
/* v4.54 2026-04-26 - .experience-callout restyled: stat front-and-centre, H1-scale */
/* v4.53 2026-04-26 - added .experience-callout block (prominent stat panel) */
/* v4.52 2026-04-26 */
/* v4.51 2026-04-26 - removed retired top-bar plain-English entry rules */
/* v4.50 2026-04-26 - short-version sibling pages: .short-version-page typography, .er-eyebrow badge, .er-about disclaimer, .er-switcher pill, .er-risks panel, .er-hub grid */
/* v4.49 2026-04-25 - .brochure-references collapsible (per-brochure citations on the long /rezum/ page) */
/* v4.48 2026-04-25 - brochure web-version helpers: .brochure-source-note, .brochure-source-note-trailer, .content table.data-table */
/* v4.47 2026-04-25 - site search: mega-menu trigger, suggest dropdown, mobile input, results page */
/* v4.46 2026-04-21 - second-opinion-button avatar swapped to /assets/images/secondopinion.jpg */
/* v4.45 2026-04-21 - header: mobile logo reduced (.logo-img 44.8px→36px); desktop unchanged at 47.6px */
/* v4.44 2026-04-21 - header: main SVG logo 40% larger (.logo-img 32px→44.8px, desktop 34px→47.6px) */
/* v4.43 2026-04-21 - CV hero spacing: top-align title/video columns and drop intro+PDF into the text column so they sit flush under the H1 (kills the empty gap between title and lead block) */
/* v4.42 2026-04-21 - CV page: .procedure-hero-lead--cv spans full width under title/video; intro + PDF sit above hero border with structured CV below */
/* v4.41 2026-04-21 - CV hero: .procedure-hero--compact-video variant shrinks the hero video to ~1/4 of its original footprint and floats it beside the H1 on >=720px viewports (stacks with a 320px cap on mobile) */
/* v4.40 2026-04-21 - footer: affiliation pills stretch to equal height (align-items stretch on list; FRACS stays vertically centered in the taller pill) */
/* v4.39 2026-04-21 - footer: affiliation logos larger again on desktop (110px / 168px); pill background switched to solid #fff so the PNG backgrounds blend seamlessly instead of the previous 96% white tint */
/* v4.38 2026-04-21 - footer: affiliation logos 2x height (80px / 124px desktop; 72px / 112px mobile); pill padding and list gap nudged up */
/* v4.38 2026-04-21 - footer: removed .footer-affiliation--tall so FRACS and USANZ badges share one img height (desktop + mobile) */
/* v4.37 2026-04-21 - footer: affiliations strip at top of footer; larger affiliation logos; border-bottom on strip; fixed stray char in .footer-affiliation img block */
/* v4.36 2026-04-21 - footer: added .footer-affiliation--tall variant for USANZ member badge (stacked 4-line text needs ~54px to stay legible); FRACS keeps the 32px height */
/* v4.35 2026-04-20 - footer: FRACS Fellow badge scaled down (desktop 44px -> 32px, mobile 38px -> 30px) so the wide 3.22:1 logo no longer dominates the affiliations strip */
/* v4.34 2026-04-20 23:40:00 - footer: new .footer-affiliations strip (white pill wrappers, FRACS Fellow badge) */
/* v4.33 2026-04-20 - .expertise-body now uses display:flow-root so its internal clearfix no longer clears the page-level #desktop-sidebar float (fixes tall empty gap on /prostate-cancer/ between the text and the stat cards) */
/* v4.32 2026-04-19 - sitewide H2/H3/H4 etc switched to Outfit too (follow-up to v4.31). Logos, stat-numbers and footer branding keep Playfair. */
/* v4.31 2026-04-19 - sitewide H1 switched to Outfit 600 (modern sans, variant 2 from dev/h1-styles preview) */
/* v4.30 2026-04-19 */
/* v4.29 2026-04-18 */
/* v4.28 2026-04-18 - contact page: tightened vertical rhythm (slim hero + compact body variants) */
/* v4.27 2026-04-18 - contact primary card: added .contact-primary-flag pill for 'Main consulting office' label */
/* v4.26 2026-04-18 - homepage feature-boxes: 3-col breakpoint raised 960->1200 so cards aren't cramped next to the desktop sidebar */
/* v4.25 2026-04-18 - top-featured-news: image no longer overflows into expanded body (explicit height + overflow clip on inner) */
/* v4.24 2026-04-18 - sticky page-TOC raised and taller so last items aren't clipped */
/* v4.23 2026-04-18 - breadcrumbs hidden on mobile */
/* v4.22 2026-04-18 - procedure-hero top padding tightened on tablet too */
/* v4.21 2026-04-18 - procedure-hero top padding tightened further on desktop */
/* v4.20 2026-04-18 - procedure-hero top padding tightened on desktop */
/* v4.19 2026-04-18 - inline call-button height matched to second-opinion-button */
/* v4.18 2026-04-18 - hot-topics bar set to Outfit 500 */
/* v4.17 2026-04-17 */
/* v4.16 2026-04-17 */
/* v4.15 2026-04-17 */
/* v4.14 2026-04-17 */
/* v4.13 2026-04-17 */
/* v4.12 2026-04-17 */
/* v4.11 2026-04-17 */
/* v4.10 2026-04-17 */
/* v4.9 2026-04-17 */
/* v4.8 2026-04-17 */
/* v4.7 2026-04-17 */
/* v4.6 2026-04-17 */
/* v4.5 2026-04-17 23:55:00 */
/* v4.4 2026-04-17 23:10:00 */
/* v4.3 2026-04-17 */
/* v3.16 2026-04-17 19:00:00 */
/* v3.15 2026-04-17 18:20:00 */
/* v3.14 2026-04-17 17:45:00 */
/* v3.13 2026-04-17 17:10:00 */
/* v3.12 2026-04-17 14:20:00 */
/* v3.11 2026-04-17 14:05:00 */
/* v3.10 2026-04-17 13:51:45 - tighten related-videos pill height and h3 gap */
/* v3.9 2026-04-17 13:46:53 */
/* v3.8 2026-04-17 13:55:00 */
/* v3.7 2026-04-17 13:40:00 */
/* v3.6 2026-04-17 13:10:00 */
/* v3.5 2026-04-17 12:55:37 */
/* v3.3 2026-04-17 10:55:00 */
/* v3.2 2026-04-17 10:42:00 */
/* v3.4 2026-04-17 10:27:00 */
/* v3.1 2026-04-17 - Added optional .tile-desc rule + .section-hub-tile--with-desc modifier so older hubs (/prostate-cancer/, /kidney/) can adopt the new section-hub style while preserving their existing tile description paragraphs */
/* v3.0 2026-04-17 - Added section-hub styles (pathway-tile hub layout) used by /about/, /cancer/, /kidney-bladder-stones/, /other-conditions/, /resources/; added overrides so h4 > a in the desktop sidebar and mobile-services-nav stay visually identical to the previous plain h4 */
/* v2.8 2026-04-17 */
/* v2.7 2026-04-17 */
/* v2.6 2026-04-17 */
/* v2.5 2026-04-17 */
/* v2.4 2026-04-17 */
/* v2.3 2026-04-17 */
/* v2.2 2026-04-17 */
/* v2.1 2026-04-17 */
/* v2.0 2026-04-17 */


/* ============================================================= */
/* 1. Design Tokens                                              */
/* ============================================================= */

:root {
  --navy: #2e3a4a;
  --navy-mid: #3d4d62;
  --navy-light: #506683;
  --gold: #e8b730;
  --gold-hover: #c69716;
  --gold-light: #f0cd6b;
  --gold-pale: rgba(232, 183, 48, 0.12);
  --white: #ffffff;
  --off-white: #f7f8fc;
  --warm-gray: #f2f2f2;
  --light-gray: #eef1f6;
  --mid-gray: #d1d5db;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-secondary: #475569;
  --text-light: #94a3b8;
  --green: #28a745;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 0.2s ease;
  --max-width: 1200px;
  /* v2.0 2026-04-17 */
  --content-read-width: 760px;
  --hero-h1-size: clamp(1.55rem, 3.2vw + 0.5rem, 2.4rem);
  --hero-sub-size: clamp(1rem, 1.2vw + 0.6rem, 1.15rem);
  --procedure-pad-y: clamp(24px, 4vw, 48px);
  --chip-bg: rgba(46, 58, 74, 0.06);
  --chip-border: rgba(46, 58, 74, 0.1);
}


/* ============================================================= */
/* 2. Reset & Base                                               */
/* ============================================================= */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background-color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--gold);
}

/* v4.32 2026-04-19 - sitewide Outfit heading stack. Any rule that sets its own font-family on a
   heading (e.g. the few remaining Playfair-branded pieces like logos, stat-numbers) still wins. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--navy);
}

iframe {
  border: 0;
}


/* ============================================================= */
/* 3. Typography                                                 */
/* ============================================================= */

@font-face {
  font-family: 'Bodoni';
  src: url('../fonts/bodoni.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ============================================================= */
/* 4. Skip Link (Accessibility)                                  */
/* ============================================================= */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
}

.skip-link:focus {
  top: 0;
}


/* ============================================================= */
/* 5. Top Contact Bar                                            */
/* ============================================================= */

/* v4.7 2026-04-17 */
body > header {
  background: linear-gradient(180deg, var(--navy), var(--navy-light));
}

#top-bar {
  width: 100%;
  background: transparent;
  font-size: 0.82rem;
  padding: 0 20px;
}

.top-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.top-bar-contact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-inner a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition);
}

.top-bar-inner a:hover {
  color: var(--gold);
}

.top-bar-inner i {
  margin-right: 5px;
  font-size: 0.85em;
  color: var(--gold);
}

.top-bar-sep {
  color: rgba(255, 255, 255, 0.25);
  margin: 0 4px;
}

.top-bar-locations {
  display: none;
}

.top-bar-location {
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.top-bar-location:hover {
  color: var(--gold);
}

.top-bar-loc-sep {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 6px;
}

/* Staff Portal pill in the top bar.
   Hidden by default on every page; the homepage opts in via a scoped
   override that only fires at desktop sizes (>=1024px). */
.top-bar-staff-portal {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 3px 12px;
  background: var(--gold, #e5b932);
  color: var(--navy, #2e3a4a) !important;
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.2px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.top-bar-staff-portal i {
  margin-right: 0;
  color: var(--navy, #2e3a4a);
  font-size: 0.85em;
}

.top-bar-staff-portal:hover,
.top-bar-staff-portal:focus {
  background: #d4a623;
  color: var(--navy, #2e3a4a) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.top-bar-staff-portal:focus-visible {
  outline: 2px solid var(--white, #fff);
  outline-offset: 2px;
}


/* ============================================================= */
/* 6. Header & Logo                                              */
/* ============================================================= */

#main-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background: transparent;
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#header-logo-text {
  font-family: 'Playfair Display', 'Bodoni', Georgia, serif;
  font-size: 1.8em;
  font-weight: 400;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  text-align: center;
  letter-spacing: 0.5px;
  padding-left: 25px;
  padding-right: 25px;
}

#header-logo-text a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0;
}

.logo-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--white);
}

.logo-divider {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  background-color: var(--gold);
  margin: 0 12px;
  opacity: 0.9;
  align-self: center;
  position: relative;
  top: 0.02em;
}

.logo-region {
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.95em;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

#header-logo-text a::after {
  content: '';
  display: none;
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.logo-text-row {
  display: flex;
  align-items: center;
  line-height: 1;
}

.logo-accent-line {
  display: none;
}

/* v4.3 2026-04-18 - SVG header logo; v4.44 +40%; v4.45 mobile scaled back to 36px */
.logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
}


/* ============================================================= */
/* 7. Hamburger Icon                                             */
/* ============================================================= */

#hamburger-menu {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 28px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1002;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

#hamburger-menu span {
  display: block;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

#hamburger-menu.is-active {
  opacity: 0;
  pointer-events: none;
}


/* ============================================================= */
/* 8. Menu Overlay                                               */
/* ============================================================= */

#menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#menu-overlay.is-visible {
  display: block;
  opacity: 1;
}


/* ============================================================= */
/* 9. Mobile Menu Panel                                          */
/* ============================================================= */

#mobile-menu {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--navy);
  z-index: 1001;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

#mobile-menu.is-open {
  transform: translateX(0);
}

/* v4.1 2026-04-17 */
@media (max-width: 1023px) {
  html {
    overflow-x: clip;
  }

  /* v4.2 2026-04-17 22:55:00 - nudge logo left so it doesn't crowd the hamburger on mobile */
  #header-logo-text {
    transform: translateX(-20px);
  }
}

/* v4.61 2026-04-28 - Mobile-only Second Opinion pill directly under the
   urology NSW logo. Lives inside #main-header so the header band itself
   grows to contain it on mobile. Hidden on desktop where the gold pill
   in the mega-menu bar already covers this. */
.header-second-opinion-pill {
  display: none;
}

@media (max-width: 1023px) {
  #main-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 80px;
    padding-bottom: 12px;
  }

  /* Pin the hamburger to the logo row (top of #main-header) so it does
     not drift down when flex-wrap puts the pill on a second row. The
     center of the 80px logo row is 40px from top; the 20px-tall icon
     therefore needs top: 30px. */
  #hamburger-menu {
    top: 30px;
    transform: none;
  }

  .header-second-opinion-pill {
    flex: 1 0 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px auto 0;
    max-width: 360px;
    padding: 11px 18px;
    background: var(--gold);
    color: var(--navy);
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(46, 58, 74, 0.18);
    line-height: 1.15;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .header-second-opinion-pill i {
    color: var(--navy);
    font-size: 1em;
  }

  .header-second-opinion-pill:hover,
  .header-second-opinion-pill:focus {
    background: #d4a623;
    box-shadow: 0 3px 10px rgba(46, 58, 74, 0.24);
    color: var(--navy);
    text-decoration: none;
  }

  .header-second-opinion-pill:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
  }

  .header-second-opinion-pill:active {
    transform: scale(0.98);
  }
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-header-title {
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 1.1em;
  font-weight: bold;
}

.menu-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.6em;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.menu-close:hover {
  color: var(--white);
}

#mobile-menu > ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

#mobile-menu > ul > li {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#mobile-menu a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: block;
  padding: 14px 20px;
  font-size: 0.95em;
  line-height: 1.4;
  transition: background-color 0.15s ease;
}

#mobile-menu a:hover,
#mobile-menu a:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

/* v3.17 2026-04-17 23:20:00 */
#mobile-menu .menu-cta {
  text-align: center;
  padding: 0 20px 14px;
}

#mobile-menu .menu-cta a {
  display: inline-block;
  color: var(--navy);
  background-color: var(--gold);
  font-weight: bold;
  text-align: center;
  margin: 0;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 0.75em;
  line-height: 1.3;
}

#mobile-menu .menu-cta a:hover {
  background-color: var(--gold-hover);
}

.has-children {
  position: relative;
}

/* v3.15 2026-04-17 22:30:00 */
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.95em;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
  outline: none;
}

.submenu-label {
  flex: 1 1 auto;
  min-width: 0;
}

.submenu-toggle .chevron {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 0.8em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.submenu-open > .submenu-toggle .chevron {
  transform: rotate(180deg);
}

.has-children > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background-color: rgba(0, 0, 0, 0.15);
}

.has-children > ul > li {
  margin: 0;
}

.has-children > ul a {
  padding: 11px 20px 11px 36px;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.65);
}

.has-children > ul a::before {
  content: "";
  display: none;
}

.has-children > ul a:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
}

#mobile-menu ul li ul li {
  padding-left: 0;
  list-style: none;
}

#mobile-menu ul li ul li::before {
  display: none;
  content: none;
}

.menu-contact {
  padding: 20px 20px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 10px;
}

.menu-contact a {
  padding: 8px 0;
  color: var(--gold-light);
  font-size: 0.9em;
}

.menu-contact a i {
  width: 20px;
  margin-right: 8px;
  text-align: center;
}


/* ============================================================= */
/* 10. Sitewide Announcement                                     */
/* ============================================================= */

#sitewide-announcement {
  width: 100%;
  height: 40px;
  background-color: var(--gold);
}

#sitewide-announcement-text {
  color: var(--navy);
  font-size: 1em;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  text-align: center;
}


/* ============================================================= */
/* 11. Mega Menu (replaces legacy Hot Topics bar)                */
/* ============================================================= */
/* v4.4 2026-04-26 - 15-item flat bar: .mega-link parity with .mega-trigger, .mega-trigger--stacked, .mega-panel--mini, default flex-wrap on bar */
/* v4.3 2026-04-21 - chevron no longer rotates on open; colour shift instead */
/* v4.3 2026-04-21 - tablet: mega from 768px, portrait panel reflow, narrow landscape wrap */
/* v4.2 2026-04-21 - chevron size dialled back; trigger padding trimmed */
/* v4.1 2026-04-21 - quieter separators, larger chevron           */
/* v4.0 2026-04-21 - full-width mega menu mirroring the sidebar   */

#mega-menu {
  width: 100%;
  position: relative;
  z-index: 50;
  background-color: var(--navy-mid);
  background-image: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  /* On narrow phones we hide the mega menu and rely on the hamburger (below 768px). */
  display: none;
}

#mega-menu::before,
#mega-menu::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

#mega-menu::before { top: 0; }
#mega-menu::after  { bottom: 0; }

.mega-menu-inner {
  position: relative;
  max-width: none;
  margin: 0 auto;
}

/* ---- 11.1 Trigger bar --------------------------------------- */

.mega-menu-bar {
  list-style: none;
  display: flex;
  /* 15 top-level items + search: always allow wrap so nothing clips on narrow desktops */
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  min-height: 48px;
  font-family: 'Outfit', 'Raleway', 'Inter', sans-serif;
}

.mega-menu-bar > li {
  display: flex;
  align-items: stretch;
  position: relative;
}

/* Inter-item separator hidden by default - the 15-item wrapping bar reads cleaner without column rules. */
.mega-menu-bar > li + li::before {
  content: none;
}

.mega-trigger,
.mega-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--white);
  font: inherit;
  font-weight: 500;
  font-size: 0.84em;
  letter-spacing: 0.3px;
  padding: 12px 11px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
  border-bottom: 2px solid transparent;
}

.mega-trigger:hover,
.mega-trigger:focus-visible,
.mega-link:hover,
.mega-link:focus-visible {
  color: var(--gold-light);
  background-color: rgba(255, 255, 255, 0.05);
  outline: none;
}

.mega-trigger:focus-visible,
.mega-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.mega-trigger[aria-expanded="true"] {
  color: var(--gold);
  background-color: rgba(0, 0, 0, 0.18);
  border-bottom-color: var(--gold);
}

.mega-link[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.mega-link--cta[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: transparent;
}

/* ---- 11.1a Stacked trigger (label + parent-level subtitle) -- */

.mega-trigger--stacked {
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  line-height: 1.15;
}

.mega-trigger-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.mega-trigger-main {
  font-weight: 500;
  letter-spacing: 0.3px;
}

.mega-trigger-sub {
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: var(--gold-light);
  opacity: 0.8;
  text-transform: none;
  white-space: nowrap;
}

#mega-menu.has-open .mega-trigger:not([aria-expanded="true"]) .mega-trigger-sub {
  color: inherit;
  opacity: 0.55;
}

/* ---- 11.1b Top-level CTA link (Second Opinion gold pill) ---- */

.mega-link--cta {
  background: var(--gold);
  color: var(--navy);
  border-bottom-color: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  margin: 6px 6px 6px 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(46, 58, 74, 0.18);
}

.mega-link--cta i {
  color: var(--navy);
  font-size: 0.95em;
}

.mega-link--cta:hover,
.mega-link--cta:focus-visible {
  background-color: var(--gold-hover);
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(46, 58, 74, 0.28);
  transform: translateY(-1px);
}

.mega-link--cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(232, 183, 48, 0.35), 0 6px 16px rgba(46, 58, 74, 0.28);
}

#mega-menu.has-open .mega-link.mega-link--cta {
  color: var(--navy);
  opacity: 1;
}

.mega-chevron {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.7;
  margin-left: 2px;
  transition: opacity var(--transition), color var(--transition);
  display: inline-block;
}

.mega-trigger[aria-expanded="true"] .mega-chevron {
  opacity: 1;
  color: var(--gold);
}

/* Dim other top-level items when a panel is open, to reinforce focus */
#mega-menu.has-open .mega-trigger:not([aria-expanded="true"]),
#mega-menu.has-open .mega-link {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- 11.2 Panel --------------------------------------------- */

.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--white);
  color: var(--text);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-lg);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.mega-panel[hidden] {
  display: none;
}

.mega-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel {
    transition: none;
    transform: none;
  }
}

.mega-panel-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(320px, 1.6fr) minmax(200px, 0.8fr);
  gap: 28px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 26px 28px 28px;
  align-items: stretch;
}

.mega-panel-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.06);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.mega-panel-close:hover,
.mega-panel-close:focus-visible {
  background: var(--gold-pale);
  color: var(--navy);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* ---- 11.2a Mini panel (BPH, Urological Prosthetics) --------- */

/* Mini panels carry just a single .mega-links group, no feature card or actions. */
.mega-panel--mini .mega-panel-inner {
  display: block;
  max-width: 520px;
  padding: 22px 26px 22px;
}

.mega-panel--mini .mega-links--mini {
  display: block;
}

.mega-panel--mini .mega-links--mini .mega-links-group {
  margin: 0;
}

.mega-panel--mini .mega-links--mini ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px 18px;
}

.mega-panel--mini .mega-links--mini li {
  margin: 0;
}

.mega-panel--mini .mega-links--mini a {
  display: block;
  padding: 8px 4px;
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.mega-panel--mini .mega-links--mini a:hover,
.mega-panel--mini .mega-links--mini a:focus-visible {
  color: var(--gold-hover);
  border-bottom-color: var(--gold);
  outline: none;
}

.mega-panel--prosthetics.mega-panel--mini .mega-links--mini ul.mega-image-links {
  grid-template-columns: 1fr;
}

.mega-panel--prosthetics.mega-panel--mini .mega-links--mini ul.mega-image-links + ul {
  margin-top: 12px;
}

.mega-panel--focal .mega-panel-inner {
  max-width: 760px;
  padding: 24px 28px 26px;
}

.mega-panel--mini .mega-links--mini ul.mega-image-links {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 14px;
}

.mega-panel--mini .mega-links--mini .mega-image-link {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-height: 132px;
  padding: 10px;
  border: 1px solid rgba(46, 58, 74, 0.12);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--white) 0%, var(--off-white) 100%);
  box-shadow: 0 10px 22px rgba(46, 58, 74, 0.12);
  transform: translateY(0);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition);
}

.mega-panel--mini .mega-links--mini .mega-image-link:hover,
.mega-panel--mini .mega-links--mini .mega-image-link:focus-visible {
  color: var(--navy);
  border-color: rgba(232, 183, 48, 0.85);
  box-shadow: 0 14px 30px rgba(46, 58, 74, 0.2);
  transform: translateY(-3px);
}

.mega-panel--mini .mega-links--mini .mega-image-link:active {
  box-shadow: 0 6px 14px rgba(46, 58, 74, 0.16);
  transform: translateY(0);
}

.mega-image-link img {
  flex: 0 0 150px;
  width: 150px;
  min-height: 112px;
  border-radius: calc(var(--radius-md) - 4px);
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(46, 58, 74, 0.08);
}

.mega-image-link-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.mega-image-link-title {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.1px;
}

.mega-image-link-text {
  color: var(--text-light);
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* ---- 11.3 Feature card -------------------------------------- */

.mega-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mega-feature-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--light-gray);
  text-decoration: none;
}

.mega-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.mega-feature-img:hover img,
.mega-feature-img:focus-visible img {
  transform: scale(1.035);
}

.mega-feature-body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mega-eyebrow {
  font-family: 'Outfit', 'Raleway', 'Inter', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy-mid);
}

.mega-feature-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}

.mega-feature-text {
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.mega-feature-cta {
  margin-top: 6px;
  align-self: flex-start;
  font-family: 'Outfit', 'Raleway', 'Inter', sans-serif;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.mega-feature-cta:hover,
.mega-feature-cta:focus-visible {
  background: var(--gold);
  color: var(--navy);
  transform: translateX(2px);
  outline: none;
}

/* ---- 11.4 Link columns -------------------------------------- */

.mega-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  padding-top: 2px;
}

.mega-links-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-links-heading {
  display: block;
  font-family: 'Outfit', 'Raleway', 'Inter', sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-mid);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.mega-links a {
  display: block;
  padding: 7px 10px 7px 12px;
  font-size: 0.92em;
  color: var(--text);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 3px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), padding-left var(--transition);
}

.mega-links a:hover,
.mega-links a:focus-visible {
  background-color: var(--gold-pale);
  color: var(--navy);
  border-left-color: var(--gold);
  padding-left: 15px;
  outline: none;
}

.mega-links a[aria-current="page"] {
  background-color: var(--chip-bg);
  color: var(--navy);
  border-left-color: var(--gold);
  font-weight: 600;
}

/* Three link columns for merged Prostate mega panel (1200px+ only) */
@media (min-width: 1200px) {
  .mega-panel--wide .mega-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 11.5 Actions rail -------------------------------------- */

.mega-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.mega-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: 'Outfit', 'Raleway', 'Inter', sans-serif;
  font-size: 0.88em;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.mega-action i {
  color: var(--navy-mid);
  width: 16px;
  text-align: center;
}

.mega-action:hover,
.mega-action:focus-visible {
  background-color: var(--off-white);
  border-color: var(--navy-mid);
  transform: translateY(-1px);
  outline: none;
}

.mega-action--primary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.mega-action--primary i {
  color: var(--gold);
}

.mega-action--primary:hover,
.mega-action--primary:focus-visible {
  background: var(--navy-mid);
  border-color: var(--gold);
  color: var(--white);
}

/* Extra-prominent accent CTA inside an actions rail (gold pop) */
.mega-action--accent {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 600;
  font-size: 0.95em;
  padding: 14px 18px;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(46, 58, 74, 0.18);
}

.mega-action--accent i {
  color: var(--navy);
}

.mega-action--accent:hover,
.mega-action--accent:focus-visible {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(46, 58, 74, 0.25);
}

/* ---- 11.6 Responsive visibility ----------------------------- */
/* Tablet and desktop: show the mega menu from 768px. Below 768px use the hamburger. */
@media (min-width: 768px) {
  #mega-menu {
    display: block;
  }
}

/* Portrait tablet: compact bar, tap-friendly panel layout */
@media (min-width: 768px) and (max-width: 1023px) {
  .mega-panel-close {
    display: inline-flex;
  }

  .mega-menu-bar {
    justify-content: center;
  }

  .mega-trigger,
  .mega-link {
    font-size: 0.8em;
    padding: 11px 10px 9px;
    min-height: 44px;
  }

  .mega-trigger--stacked {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .mega-panel-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 48px 18px 22px;
  }

  .mega-panel--mini .mega-panel-inner {
    padding: 48px 18px 22px;
  }

  .mega-feature {
    flex-direction: row;
    gap: 14px;
  }

  .mega-feature-img {
    flex: 0 0 220px;
    aspect-ratio: 4 / 3;
  }

  .mega-links {
    grid-template-columns: 1fr 1fr;
  }

  .mega-actions {
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
}

/* Narrow landscape tablet and small laptop: 2-column panel */
@media (min-width: 1024px) and (max-width: 1199px) {
  .mega-panel-inner {
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.4fr);
    gap: 20px;
    padding: 22px 20px 24px;
  }

  .mega-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }

  .mega-trigger,
  .mega-link {
    font-size: 0.82em;
    padding: 12px 9px 10px;
  }

  .mega-trigger--stacked {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}


/* ============================================================= */
/* 11b. Mobile/Tablet Services Navigation                        */
/* ============================================================= */

#mobile-services-nav {
  display: block;
  width: 100%;
  background-color: var(--navy);
  padding: 14px 12px 10px;
  position: relative;
}

#mobile-services-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 183, 48, 0.2) 30%, rgba(232, 183, 48, 0.2) 70%, transparent 100%);
}

/* v1.1 2026-04-17 10:27:00 */
.services-nav-header {
  text-align: center;
  margin: -14px -12px 22px;
  padding: 30px 20px 26px;
  border-bottom: 1px solid rgba(232, 183, 48, 0.18);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.6);
}

.services-nav-header h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.9rem;
  color: var(--white);
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: 0.5px;
}

.services-nav-accent {
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hover));
  margin: 0 auto;
  border-radius: 2px;
}

.services-nav-header p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 460px;
  margin: 0 auto;
}

.services-nav-grid {
  columns: 2;
  column-gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

/* v3.1 2026-04-17 - doubled font-size and padding in #mobile-services-nav so the "How Can We Help?" items read at ~2x their previous scale */
.services-nav-group {
  break-inside: avoid;
  padding: 12px 14px 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
}

.services-nav-group h4 {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(232, 183, 48, 0.15);
}

/* v3.0 2026-04-17 - section-heading h4 is clickable; keep it visually identical to the original plain h4 and override the default .services-nav-group a sub-link styling */
.services-nav-group h4 a {
  display: inline;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.services-nav-group h4 a:hover,
.services-nav-group h4 a:focus-visible {
  color: var(--white);
  outline: none;
}

.services-nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.services-nav-group li {
  margin: 0;
}

.services-nav-group a {
  display: block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.4em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.2s ease;
  line-height: 1.3;
}

.services-nav-group a:hover {
  color: var(--gold);
}

@media (min-width: 768px) {
  #mobile-services-nav {
    padding: 16px 16px 12px;
  }

  .services-nav-header {
    margin: -16px -16px 32px;
    padding: 44px 24px 32px;
  }

  .services-nav-header h2 {
    font-size: 2.4rem;
    margin-bottom: 18px;
  }

  .services-nav-accent {
    width: 88px;
    height: 4px;
  }

  .services-nav-header p {
    font-size: 1rem;
  }

  .services-nav-grid {
    columns: 3;
    column-gap: 12px;
  }

  .services-nav-group {
    padding: 14px 16px 12px;
    margin-bottom: 12px;
  }

  .services-nav-group h4 {
    font-size: 1.3em;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
    padding-bottom: 6px;
  }

  .services-nav-group a {
    font-size: 1.45em;
    padding: 6px 0;
  }
}

@media (min-width: 1024px) {
  #mobile-services-nav {
    display: none;
  }
}


/* ============================================================= */
/* 12. Desktop Sidebar Navigation                                */
/* ============================================================= */

#desktop-sidebar {
  display: none;
}

@media (min-width: 768px) {
  #hamburger-menu {
    display: none;
  }

  #mobile-menu {
    display: none;
  }

  #menu-overlay {
    display: none;
  }
}

@media (min-width: 1024px) {
  #desktop-sidebar {
    display: block;
    float: left;
    width: 280px;
    background-color: var(--white);
    box-shadow: 2px 0 16px rgba(46, 58, 74, 0.06);
    padding-bottom: 40px;
    min-height: 500px;
    position: relative;
  }

  #desktop-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 100%);
  }

  .sidebar-nav {
    padding: 20px 0 0;
  }

  .sidebar-category {
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(46, 58, 74, 0.06);
    padding-bottom: 4px;
  }

  .sidebar-category:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .sidebar-category h4 {
    font-family: 'Raleway', 'Inter', sans-serif;
    font-size: 0.72em;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 12px 20px 6px;
    margin: 0;
    background-color: transparent;
    border-left: none;
    position: relative;
  }

  /* v3.0 2026-04-17 - section-heading h4 is now clickable; keep visual parity with the old plain h4 and override the default .sidebar-category a list-link styling */
  .sidebar-category h4 a {
    display: inline;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    padding: 0;
    border-left: none;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .sidebar-category h4 a:hover,
  .sidebar-category h4 a:focus-visible {
    color: var(--gold-hover);
    background: transparent;
    padding-left: 0;
    border-left: none;
    outline: none;
  }

  .sidebar-category h4::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gold);
    margin-top: 5px;
    border-radius: 1px;
    transition: width 0.3s ease;
  }

  .sidebar-category:hover h4::after {
    width: 40px;
  }

  .sidebar-category ul {
    list-style: none;
    padding: 2px 0 6px;
    margin: 0;
  }

  .sidebar-category li {
    margin: 0;
  }

  .sidebar-category a {
    display: block;
    font-family: 'Raleway', 'Inter', sans-serif;
    font-size: 0.88em;
    font-weight: 400;
    color: #4a4a4a;
    padding: 7px 20px;
    line-height: 1.45;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    text-decoration: none;
  }

  .sidebar-category a:hover {
    background-color: rgba(46, 58, 74, 0.03);
    color: var(--navy);
    border-left-color: var(--gold);
    padding-left: 23px;
  }

  .sidebar-category a:active {
    background-color: rgba(46, 58, 74, 0.06);
  }

  main > section:not(#desktop-sidebar),
  main > nav#breadcrumbs {
    margin-left: 290px;
    /* Individual sections set `width: 100%` for full-bleed on mobile;
       on desktop with the floated sidebar that forces them to overflow the viewport
       by the sidebar width. `width: auto` lets the block naturally fill the remaining
       space minus the 290px margin, which is what we actually want.
       #mega-menu is a <nav> (not a section) and is intentionally excluded so the
       trigger bar spans the full viewport width above the sidebar. */
    width: auto;
    box-sizing: border-box;
  }

  main > section:not(#desktop-sidebar):not(#hero-slider):first-of-type,
  main > section#home-hero {
    margin-top: 20px;
  }

  #home-hero h1 {
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  main::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (min-width: 1200px) {
  #desktop-sidebar {
    width: 300px;
  }

  main > section:not(#desktop-sidebar),
  main > nav#breadcrumbs {
    margin-left: 310px;
    width: auto;
    box-sizing: border-box;
  }

  .sidebar-category h4 {
    font-size: 0.74em;
    padding: 13px 22px 6px;
  }

  .sidebar-category a {
    font-size: 0.9em;
    padding: 7px 22px;
  }

  .sidebar-category a:hover {
    padding-left: 25px;
  }
}

@media (min-width: 1400px) {
  #desktop-sidebar {
    width: 320px;
  }

  main > section:not(#desktop-sidebar),
  main > nav#breadcrumbs {
    margin-left: 330px;
    width: auto;
    box-sizing: border-box;
  }

  .sidebar-category h4 {
    font-size: 0.76em;
    letter-spacing: 1.8px;
    padding: 14px 24px 7px;
  }

  .sidebar-category a {
    font-size: 0.93em;
    padding: 8px 24px;
  }

  .sidebar-category a:hover {
    padding-left: 27px;
  }
}


/* ============================================================= */
/* 13. Page Heading & Hero Heading                               */
/* ============================================================= */

.page-heading {
  width: 100%;
  padding: 20px;
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1em;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-heading h1 {
  color: var(--white);
  font-size: 1.2em;
}

#home-hero {
  padding: 12px 20px;
  background: var(--off-white);
  border-bottom: 1px solid rgba(46, 58, 74, 0.06);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

#home-hero h1,
.home-hero-text {
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  font-size: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
  font-weight: 600;
  margin: 0;
  flex-wrap: nowrap;
}

/* v4.31 2026-04-19 - switched from Playfair 700 to Outfit 600 (variant 2 from dev/h1-styles preview).
   v2.8 2026-04-17 - hero-title wraps on mobile instead of overflowing viewport */
.hero-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.15em;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.2px;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  max-width: 100%;
}

.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.95em;
  color: var(--navy);
  opacity: 0.85;
  text-align: center;
  margin: 6px 0 0;
  line-height: 1.4;
  letter-spacing: 0.1px;
}

.hero-divider {
  flex: 0 0 auto;
  width: 1.5px;
  height: 1em;
  background: var(--gold-hover);
  opacity: 0.9;
}

.hero-stat {
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.78em;
  color: var(--gold-hover);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-stat-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.3em;
  color: var(--gold);
  letter-spacing: 0;
}

.hero-stat-year {
  color: var(--gold);
  font-weight: 600;
}

/* v1.1 2026-04-17 */
/* v1.0 2026-04-17 */

/* v1.2 2026-04-26 - hero slider replaces portrait pair */
.hero-slider {
  background: var(--off-white);
  padding: 0;
  border-bottom: 1px solid rgba(46, 58, 74, 0.06);
  position: relative;
  outline: none;
}

.hero-slider:focus-visible {
  box-shadow: inset 0 0 0 3px var(--gold);
}

.hero-slider-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-slider-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 280px;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--off-white);
}

.hero-slide > img,
.hero-slide > video,
.hero-slide > iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center top);
  border: 0;
}

/* v4.67 2026-04-29 - title slide: portrait keeps its natural vertical aspect ratio so the face
   is never cropped at any viewport width. The slide background is a dark navy-to-near-black
   gradient that covers the left side; the image sits absolute, right-aligned, height-fit with
   width: auto so it stays portrait at every breakpoint; a horizontal mask gradient feathers the
   image's left edge into the navy background so there is no visible seam between photo and
   background. Text sits over the solid dark left side. */
.hero-slide--title {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(90deg, #0a1322 0%, #142036 48%, #1c2944 100%);
}

/* v4.93 2026-06-09 - title slide now uses a full-bleed art-directed banner
   (object-fit:cover, subject anchored right so the dark left stays clear for
   the overlaid H1/tagline) served per breakpoint via <picture>; replaces the
   prior right-aligned masked portrait. */
.hero-slide--title > picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.hero-slide--title > picture > img.hero-slide-image,
.hero-slide--title > img.hero-slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: none;
          mask-image: none;
}

.hero-slide--title .hero-slide-text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 65%;
  padding: 18px 22px;
  color: #fff;
  box-sizing: border-box;
}

.hero-slide-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero-slide-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-hover));
  border-radius: 2px;
}

.hero-slide-tagline {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: clamp(0.85rem, 2.6vw, 1rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
  margin: 14px 0 0;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero-slide-tagline em {
  font-style: italic;
}

.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(46, 58, 74, 0.55);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hero-slider-arrow:hover {
  background: rgba(46, 58, 74, 0.8);
}

.hero-slider-arrow:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.hero-slider-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.hero-slider-arrow--prev {
  left: 6px;
}

.hero-slider-arrow--next {
  right: 6px;
}

.hero-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: var(--off-white);
}

.hero-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(46, 58, 74, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hero-slider-dot:hover {
  background: rgba(46, 58, 74, 0.5);
}

.hero-slider-dot.is-active {
  background: var(--navy);
  transform: scale(1.25);
}

.hero-slider-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider-track {
    transition: none;
  }
  .hero-slider-arrow,
  .hero-slider-dot {
    transition: none;
  }
}

/* v1.1 2026-04-29 - homepage intro / practice-ethos between hero slider and feature boxes */
#home-intro {
  background: var(--off-white);
  padding: clamp(28px, 4vw, 44px) 16px;
  border-bottom: 1px solid rgba(46, 58, 74, 0.06);
}

#home-intro .home-intro-inner {
  max-width: 880px;
  margin: 0 auto;
}

#home-intro .home-intro-header {
  text-align: center;
  margin: 0 0 22px;
}

#home-intro .home-intro-header h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: 0.2px;
}

#home-intro .home-intro-accent {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hover));
  margin: 10px auto 0;
  border-radius: 2px;
}

#home-intro .home-intro-body p {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy);
  margin: 0 0 14px;
}

#home-intro .home-intro-body p:last-child {
  margin-bottom: 0;
}

#home-intro .home-intro-lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--navy);
}

.name-highlight {
  background: linear-gradient(120deg, #fff176 0%, #ffeb3b 50%, #fdd835 100%);
  background-repeat: no-repeat;
  background-size: 100% 70%;
  background-position: 0 65%;
  padding: 0 4px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 600;
}

#home-intro .home-intro-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

#home-intro .home-intro-body a:hover,
#home-intro .home-intro-body a:focus-visible {
  color: var(--gold-hover);
}

@media (min-width: 768px) {
  #home-intro {
    padding: clamp(40px, 5vw, 64px) 24px;
  }
  #home-intro .home-intro-header {
    margin-bottom: 28px;
  }
  #home-intro .home-intro-body p {
    font-size: 1.05rem;
  }
  #home-intro .home-intro-lead {
    font-size: 1.18rem;
  }
}

/* v2.9 2026-04-17 - Top featured news block (between portrait and mega menu) */
#top-featured-news {
  background: var(--off-white);
  padding: 24px 16px 28px;
  border-bottom: 1px solid rgba(46, 58, 74, 0.06);
}
#top-featured-news .top-featured-news-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#top-featured-news .news-featured { margin-bottom: 0; }

@media (min-width: 768px) {
  #top-featured-news {
    padding: 36px 24px 40px;
  }
  #top-featured-news .top-featured-news-inner {
    gap: 24px;
  }
}

/* v4.15 2026-04-17 */
@media (min-width: 600px) {
  #top-featured-news .news-featured-inner {
    height: 320px;
    overflow: hidden;
  }
  #top-featured-news .news-featured-img {
    height: 100%;
    min-height: 0;
    object-position: var(--focal, center 28%);
  }
  #top-featured-news .news-featured-body {
    justify-content: center;
  }
}

/* v3.12 2026-04-17 14:20:00 */
@media (min-width: 1024px) {
  #top-featured-news {
    padding: 28px 24px 32px;
  }
  #top-featured-news .top-featured-news-inner {
    max-width: 960px;
    gap: 20px;
  }
  #top-featured-news .news-featured-inner {
    height: 280px;
    overflow: hidden;
  }
  #top-featured-news .news-featured-img {
    width: 42%;
    min-height: 0;
    height: 100%;
  }
  #top-featured-news .news-featured-body {
    width: 58%;
    padding: 22px 28px;
  }
  #top-featured-news .news-featured h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.3;
  }
  #top-featured-news .news-featured-excerpt {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 12px;
  }
  #top-featured-news .news-featured .news-tag {
    margin-bottom: 10px;
  }
}

@media (min-width: 768px) {
  .hero-slide {
    height: 400px;
  }

  .hero-slider-arrow {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .hero-slider-arrow--prev {
    left: 16px;
  }

  .hero-slider-arrow--next {
    right: 16px;
  }

  .hero-slider-dots {
    padding: 16px 0;
  }

  .hero-slide--title .hero-slide-text {
    max-width: 60%;
    padding: 30px 36px;
  }

  .hero-slide-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
  }

  .hero-slide-title::after {
    width: 64px;
    margin-top: 16px;
  }

  .hero-slide-tagline {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    margin-top: 16px;
  }
}

@media (min-width: 1024px) {
  .hero-slide {
    height: 460px;
  }

  /* Title slide height tracks the desktop banner's own proportions
     (2560x920) so the full image always shows - no vertical crop of the
     subject however wide the viewport gets. */
  .hero-slide--title {
    height: auto;
    aspect-ratio: 2560 / 920;
  }

  .hero-slide--title .hero-slide-text {
    max-width: 55%;
    padding: 40px 56px;
  }

  .hero-slide-title {
    font-size: clamp(1.85rem, 2.4vw, 2.3rem);
  }

  .hero-slide-title::after {
    width: 72px;
    margin-top: 18px;
  }

  .hero-slide-tagline {
    font-size: 1.15rem;
    margin-top: 18px;
  }
}


/* ============================================================= */
/* 14. Content Area                                              */
/* ============================================================= */

.content {
  width: 100%;
  margin: 0 auto;
  padding: 30px 24px;
  line-height: 1.7;
  color: var(--text);
  font-size: 1.05rem;
  background-color: var(--white);
}

.content p {
  margin-bottom: 1.4em;
}

.content a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: rgba(3, 10, 138, 0.3);
  text-underline-offset: 2px;
}

.content a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

.content h2 {
  font-size: 1.5rem;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--navy);
}

.content h3 {
  font-size: 1.2rem;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: var(--navy);
}

.content ul,
.content ol {
  padding-left: 24px;
  margin-bottom: 1.4em;
}

.content li {
  margin-bottom: 6px;
  line-height: 1.65;
}

.content strong {
  font-weight: 600;
}

.floating_image_right {
  max-width: 300px;
}

.news-images {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: 10px 0;
}


/* ============================================================= */
/* 14b. News Cards                                               */
/* ============================================================= */

.news-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.news-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.news-section-header h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 2rem;
  color: var(--navy);
  margin-bottom: 8px;
  margin-top: 0;
}
.news-header-accent {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hover));
  margin: 0 auto 16px;
  border-radius: 2px;
}
.news-section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto;
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
}
.filter-btn {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.filter-btn:hover {
  border-color: var(--navy-mid);
  color: var(--navy);
}
.filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
}

/* v3.15 2026-04-17 19:50:00 */
.news-view-all {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.news-view-all .btn-primary-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--gold);
  color: var(--navy) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  border-radius: 6px;
  border: none;
  box-shadow: 0 4px 14px rgba(232, 183, 48, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.news-view-all .btn-primary-gold:hover,
.news-view-all .btn-primary-gold:focus-visible {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 183, 48, 0.32);
}

.news-featured {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(46,58,74,0.18);
}
.news-featured-inner {
  display: flex;
  flex-direction: column;
}
.news-featured-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.news-featured-body {
  padding: 28px 28px 24px;
}
.news-featured .news-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.news-featured h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.45rem;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.35;
}
.news-featured-excerpt {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 16px;
}
.news-featured .read-more {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.news-featured:hover .read-more { gap: 10px; }

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.news-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(3,10,138,0.15);
}
.news-card-row {
  display: flex;
  flex-direction: column;
}
.news-card-thumb-wrap {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  align-self: flex-start;
  overflow: hidden;
  background: var(--off-white);
  flex-shrink: 0;
}
.news-card-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center center);
  transition: transform 0.4s ease;
}
.news-card:hover .news-card-thumb-wrap img {
  transform: scale(1.04);
}
.news-card-no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
}
.news-card-no-img i {
  font-size: 2.5rem;
  color: rgba(255,204,0,0.35);
}
.news-card-thumb-wrap .video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  backdrop-filter: blur(4px);
}

.news-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.news-tag-sm {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.tag-procedure   { background: #e0e7ff; color: #3730a3; }
.tag-milestone   { background: #fef3c7; color: #92400e; }
.tag-innovation  { background: #d1fae5; color: #065f46; }
.tag-video       { background: #fce7f3; color: #9d174d; }
.tag-research    { background: #ede9fe; color: #5b21b6; }
.tag-training    { background: #e0f2fe; color: #075985; }
.tag-recognition { background: #fff7ed; color: #9a3412; }
.tag-treatment   { background: #f0fdf4; color: #166534; }

.news-card h4 {
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 600;
}
.news-card-excerpt {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
}
.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--navy-mid);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 14px;
  transition: color 0.2s ease, gap 0.2s ease;
  text-decoration: none;
}
.news-card:hover .news-card-link { color: var(--gold-hover); gap: 8px; }

.news-card-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, padding 0.3s ease;
  padding: 0 20px;
}
.news-card-expanded.open {
  max-height: 2000px;
  padding: 0 20px 20px;
}
.news-card-expanded-inner {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}
.news-card-expanded-inner img {
  border-radius: var(--radius-sm);
  margin: 14px 0;
  max-width: 100%;
}
.news-card-expanded-inner .responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 16px 0;
  border-radius: var(--radius-sm);
}
.news-card-expanded-inner .responsive-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* v2.8 2026-04-17 - high-contrast white text for expanded body on navy featured card */
.news-featured .news-card-expanded-inner {
  color: rgba(255, 255, 255, 0.92);
}
.news-featured .news-card-expanded-inner p {
  color: rgba(255, 255, 255, 0.92);
}
.news-featured .news-card-expanded-inner strong,
.news-featured .news-card-expanded-inner b {
  color: var(--white);
}
.news-featured .news-card-expanded-inner a {
  color: var(--gold);
}
.news-featured .news-card-expanded-inner a:hover {
  color: var(--gold-hover);
}
.news-featured .news-card-expanded-inner {
  border-top-color: rgba(255, 255, 255, 0.25);
}
.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.gallery-row img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
}

@media (min-width: 600px) {
  .news-card-row { flex-direction: row; align-items: stretch; }
  .news-card-thumb-wrap { width: 220px; aspect-ratio: 4 / 3; height: auto; min-height: 0; align-self: flex-start; }
  .news-featured-inner { flex-direction: row; }
  .news-featured-img { width: 45%; height: auto; min-height: 300px; }
  .news-featured-body { width: 55%; display: flex; flex-direction: column; justify-content: center; padding: 32px 36px; }
}

@media (min-width: 768px) {
  .news-section { padding: 56px 32px 72px; }
  .news-section-header h2 { font-size: 2.3rem; }
}


/* ============================================================= */
/* 15. Video Containers                                          */
/* ============================================================= */
/* Note: .video-container and .video-container-locally-hosted were
   removed in v2.0 (2026-04-17). All content pages now use
   .video-facade + .procedure-hero-media. .responsive-video is kept
   for in-body news-feed embeds. */

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 20px;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ============================================================= */
/* 16. Feature Boxes                                             */
/* ============================================================= */

#feature-boxes {
  padding: 16px;
  background-color: var(--off-white);
}

.feature-boxes-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.feature-box,
.content .feature-box {
  display: block;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border: 2px solid transparent;
}

.feature-box:hover,
.content .feature-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(46, 58, 74, 0.3);
  color: var(--white);
  text-decoration: none;
  border-color: rgba(232, 183, 48, 0.3);
}

.feature-icon {
  font-size: 1.5em;
  margin-bottom: 5px;
  color: var(--gold);
}

.feature-icon i {
  display: inline-block;
}

.feature-box h3 {
  font-size: 0.95em;
  margin-bottom: 4px;
  color: var(--gold);
  text-decoration: none;
}

.feature-box p {
  font-size: 0.85em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  text-decoration: none;
}

.feature-box:hover h3,
.feature-box:hover p {
  text-decoration: none;
}

/* v4.16 2026-04-17 - homepage feature tiles refined to section-hub-tile pattern */
#feature-boxes {
  padding: clamp(20px, 3vw, 32px) 16px;
  background: var(--off-white);
}

#feature-boxes .feature-boxes-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: var(--max-width);
  margin: 0 auto;
}

#feature-boxes .feature-box,
.content #feature-boxes .feature-box {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  background: var(--white);
  border: 1px solid rgba(46, 58, 74, 0.08);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
  padding: 20px 48px 20px 20px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(46, 58, 74, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease;
}

#feature-boxes .feature-box::after {
  content: "\2192";
  position: absolute;
  right: 18px;
  top: 22px;
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform 0.25s ease, color 0.25s ease;
}

#feature-boxes .feature-box:hover,
#feature-boxes .feature-box:focus-visible,
.content #feature-boxes .feature-box:hover {
  transform: translateY(-2px);
  border-left-color: var(--gold);
  box-shadow: 0 10px 26px rgba(46, 58, 74, 0.1);
  color: inherit;
  outline: none;
}

#feature-boxes .feature-box:hover::after,
#feature-boxes .feature-box:focus-visible::after {
  transform: translateX(5px);
  color: var(--gold-hover);
}

#feature-boxes .feature-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(46, 58, 74, 0.06);
  color: var(--navy);
  font-size: 1.2rem;
  margin: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

#feature-boxes .feature-icon i {
  color: inherit;
}

#feature-boxes .feature-box:hover .feature-icon,
#feature-boxes .feature-box:focus-visible .feature-icon {
  background: var(--navy);
  color: var(--gold);
  transform: scale(1.05);
}

#feature-boxes .feature-box h3 {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
  text-decoration: none;
}

#feature-boxes .feature-box p {
  grid-column: 2;
  grid-row: 2;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 4px 0 0;
  text-decoration: none;
}

@media (min-width: 600px) {
  #feature-boxes .feature-boxes-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  #feature-boxes .feature-box {
    padding: 22px 46px 22px 22px;
  }
}

@media (min-width: 1200px) {
  #feature-boxes .feature-boxes-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #feature-boxes .feature-box h3 {
    font-size: 1.12rem;
  }
}

/* v1.0 2026-04-17 */
#topic-hub {
  padding: clamp(20px, 3vw, 40px) 16px clamp(28px, 4vw, 56px);
  background-color: var(--off-white);
}

.topic-hub-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.hub-grid .feature-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
  padding: 20px 22px;
}

.hub-grid .feature-box h3 {
  font-size: 1.05em;
  margin: 0;
}

.hub-grid .feature-box .feature-icon {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .hub-grid {
    gap: 18px;
  }

  .hub-grid .feature-box {
    min-height: 140px;
  }
}


/* ============================================================= */
/* 16b. Section Hub (v3.0 2026-04-17)                            */
/* Fresh pathway-tile style used for /cancer/, /kidney-bladder-  */
/* stones/, /other-conditions/, /resources/, /about/             */
/* ============================================================= */

.section-hub {
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  padding: clamp(24px, 4vw, 48px) 16px clamp(32px, 5vw, 64px);
}

.section-hub-inner {
  max-width: 960px;
  margin: 0 auto;
}

.section-hub-intro {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 36px);
}

.section-hub-eyebrow {
  display: inline-block;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-hover);
  background: rgba(201, 161, 77, 0.08);
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 161, 77, 0.25);
}

.section-hub-intro h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  color: var(--navy);
  margin: 12px 0 8px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
}

.section-hub-intro p {
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.5;
}

.section-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-width: 0;
}

.section-hub-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid rgba(46, 58, 74, 0.08);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
  padding: 18px 52px 18px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(46, 58, 74, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease;
  min-height: 78px;
  min-width: 0;
}

.section-hub-tile::after {
  content: "\2192";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform 0.25s ease, color 0.25s ease;
}

.section-hub-tile:hover,
.section-hub-tile:focus-visible {
  transform: translateY(-2px);
  border-left-color: var(--gold);
  box-shadow: 0 10px 26px rgba(46, 58, 74, 0.1);
  outline: none;
}

.section-hub-tile:hover::after,
.section-hub-tile:focus-visible::after {
  transform: translateY(-50%) translateX(5px);
  color: var(--gold-hover);
}

.section-hub-tile .tile-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(46, 58, 74, 0.06);
  color: var(--navy);
  font-size: 1.25rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.section-hub-tile:hover .tile-icon,
.section-hub-tile:focus-visible .tile-icon {
  background: var(--navy);
  color: var(--gold);
  transform: scale(1.05);
}

.section-hub-tile .tile-text {
  flex: 1 1 auto;
  min-width: 0;
}

.section-hub-tile .tile-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
  display: block;
  overflow-wrap: break-word;
}

.section-hub-tile .tile-desc {
  display: block;
  margin: 6px 0 0;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

.section-hub-tile--with-desc {
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
  min-height: 0;
}

.section-hub-tile--with-desc .tile-icon {
  margin-top: 2px;
}

@media (min-width: 600px) {
  .section-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .section-hub-tile {
    padding: 22px 52px 22px 22px;
  }
  .section-hub-tile .tile-title {
    font-size: 1.15rem;
  }
}

@media (min-width: 960px) {
  .section-hub-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .section-hub-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    margin: 0 auto;
  }
}

/* v4.0 2026-04-17 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .section-hub-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================= */
/* 16c. Sitemap (v4.5 2026-04-17 23:55:00)                       */
/* Card-grid sitemap layout used by /sitemap/                    */
/* ============================================================= */

.sitemap-section {
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  padding: clamp(24px, 4vw, 48px) 16px clamp(32px, 5vw, 64px);
}

.sitemap-inner {
  max-width: 1160px;
  margin: 0 auto;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  min-width: 0;
  align-items: start;
}

.sitemap-card {
  background: var(--white);
  border: 1px solid rgba(46, 58, 74, 0.08);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 18px 20px 16px;
  box-shadow: 0 1px 3px rgba(46, 58, 74, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sitemap-card:hover,
.sitemap-card:focus-within {
  transform: translateY(-2px);
  border-top-color: var(--navy);
  box-shadow: 0 10px 26px rgba(46, 58, 74, 0.1);
}

.sitemap-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(46, 58, 74, 0.08);
}

.sitemap-card .sitemap-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(46, 58, 74, 0.06);
  color: var(--navy);
  font-size: 1.05rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sitemap-card:hover .sitemap-icon,
.sitemap-card:focus-within .sitemap-icon {
  background: var(--navy);
  color: var(--gold);
}

.sitemap-card h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.18rem;
  line-height: 1.2;
  margin: 0;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.sitemap-card h3 a {
  color: inherit;
  text-decoration: none;
  background: none;
}

.sitemap-card h3 a:hover,
.sitemap-card h3 a:focus-visible {
  color: var(--gold-hover);
  text-decoration: underline;
}

.sitemap-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sitemap-card ul li {
  margin: 0;
  padding: 0;
}

.sitemap-card ul a {
  display: block;
  padding: 7px 8px 7px 20px;
  color: var(--text-primary);
  text-decoration: none;
  background: none;
  border-radius: 6px;
  font-size: 0.94rem;
  line-height: 1.35;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  overflow-wrap: anywhere;
}

.sitemap-card ul a::before {
  content: "\203A";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-weight: 700;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sitemap-card ul a:hover,
.sitemap-card ul a:focus-visible {
  background: rgba(46, 58, 74, 0.04);
  color: var(--navy);
  padding-left: 24px;
  outline: none;
}

.sitemap-card ul a:hover::before,
.sitemap-card ul a:focus-visible::before {
  color: var(--gold-hover);
  transform: translateY(-50%) translateX(2px);
}

@media (min-width: 700px) {
  .sitemap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .sitemap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ============================================================= */
/* 17. Second Opinion CTA                                        */
/* ============================================================= */

#second-opinion {
  width: 100%;
  background-color: var(--off-white);
  padding: 28px 0;
  text-align: center;
}

#second-opinion-text {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* v2.9 2026-04-17 17:42:10 */
.second-opinion-button,
.content .second-opinion-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background-color: var(--gold);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.second-opinion-button:hover,
.content .second-opinion-button:hover {
  background-color: var(--gold-hover);
  color: var(--navy);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}

/* v2.12 2026-04-17 10:55:00 */
.second-opinion-button,
.content .second-opinion-button {
  padding: 4px 28px 4px 4px;
}

.second-opinion-button::before,
.content .second-opinion-button::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0 10px 0 0;
  border-radius: 50%;
  background-color: var(--navy);
  background-image: url("/assets/images/secondopinion.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transition: transform var(--transition);
}

.second-opinion-button:hover::before,
.content .second-opinion-button:hover::before {
  transform: translateY(-1px);
}

#second-opinion-text {
  align-items: center;
}

#second-opinion,
#second-opinion.cta-inline,
#second-opinion-text {
  overflow: visible;
}

/* Procedure-hero CTA already sets its own padding; preserve avatar spacing */
.procedure-hero .procedure-hero-cta .second-opinion-button {
  padding: 4px 24px 4px 4px;
}

/* Small screens: shrink avatar so it fits comfortably on phones */
@media (max-width: 520px) {
  .second-opinion-button,
  .content .second-opinion-button {
    padding: 4px 20px 4px 4px;
  }

  .second-opinion-button::before,
  .content .second-opinion-button::before {
    width: 40px;
    height: 40px;
    margin: 0 8px 0 0;
  }

  .procedure-hero .procedure-hero-cta .second-opinion-button {
    padding: 4px 20px 4px 4px;
  }

  .call-button,
  .content .call-button {
    width: 48px;
    height: 48px;
    font-size: 1.1em;
  }
}

/* v4.12 2026-04-17 */
.call-button,
.content .call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--green);
  color: var(--white);
  font-size: 1.25em;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.call-button:hover,
.content .call-button:hover {
  background-color: #218838;
  box-shadow: var(--shadow-md);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
}


/* ============================================================= */
/* 18. Team Page                                                 */
/* ============================================================= */

.team-member {
  margin-bottom: 30px;
}

.team-member h2 {
  color: var(--navy);
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.team-member.principal h2 {
  font-size: 1.7rem;
}

.team-role {
  color: var(--gold);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
  background-color: var(--navy);
  display: inline-block;
  padding: 4px 14px;
  border-radius: 4px;
}

.team-qualifications {
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 16px;
  font-size: 1rem;
}

.team-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 30px 0;
}

.team-directory-section {
  background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}

.team-directory {
  max-width: var(--max-width);
}

.team-section-heading {
  max-width: 760px;
  margin: 0 0 24px;
}

.team-section-heading--secondary {
  margin-top: 44px;
}

.team-eyebrow {
  color: var(--gold-hover);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.team-section-heading h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.35rem);
  margin-bottom: 10px;
}

.team-surgeon-grid,
.team-list {
  display: grid;
  gap: 22px;
}

.team-surgeon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.team-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.team-list--single {
  grid-template-columns: minmax(0, 1fr);
}

.team-group {
  margin-top: 10px;
  padding-top: 0;
  border-top: 1px solid rgba(46, 58, 74, 0.12);
}

.team-group h3 {
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.team-nurses-blurb {
  margin-top: 18px;
  margin-bottom: 0;
  max-width: 720px;
  line-height: 1.55;
}

.team-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  margin-top: 15px;
  margin-bottom: 15px;
  background: var(--white);
  border: 1px solid rgba(46, 58, 74, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.team-card--featured {
  overflow: hidden;
  padding: 0;
}

.team-card--featured .team-card-photo:not(.team-card-photo--placeholder) {
  padding: 20px 22px 0;
  background: transparent;
}

.team-card--featured .team-card-photo img {
  border-radius: 15px;
}

.team-card--featured .team-card-body {
  padding-top: 0;
}

.team-card--featured .team-card-body h3 {
  margin-top: 20px;
}

.team-card--support {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.team-card-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(46, 58, 74, 0.1), rgba(232, 183, 48, 0.13));
}

.team-card--support .team-card-photo {
  aspect-ratio: 1;
  min-height: unset;
  align-self: start;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-card--support + .team-list {
  margin-top: 24px;
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
}

.team-card-photo--placeholder {
  color: var(--navy-mid);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.team-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.team-card h3,
.team-card h4 {
  margin-bottom: 8px;
}

.team-card h3 {
  font-size: 1.45rem;
}

.team-card h4 {
  font-size: 1.08rem;
}

.team-card p {
  margin-bottom: 12px;
}

.team-card p:last-child {
  margin-bottom: 0;
}

.team-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.team-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--gold-pale);
  border: 1px solid rgba(232, 183, 48, 0.28);
  border-radius: 999px;
}

.team-links a:hover {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

@media (max-width: 980px) {
  .team-surgeon-grid {
    grid-template-columns: 1fr;
  }

  .team-card--featured .team-card-photo {
    width: 50%;
    aspect-ratio: 1 / 1;
    max-height: unset;
    min-height: unset;
    margin-left: 0;
  }

  .team-card--featured .team-card-photo img {
    min-height: unset;
  }

  .team-card--support {
    grid-template-columns: 1fr;
  }

  .team-card--support .team-card-photo {
    width: 180px;
    align-self: start;
    margin-left: 22px;
  }
}

@media (max-width: 700px) {
  .team-card,
  .team-card-body {
    padding: 10px 18px 18px;
  }

  .team-card--featured {
    padding: 0;
  }

  .team-card--featured .team-card-photo:not(.team-card-photo--placeholder) {
    padding: 20px 18px 0;
  }

  .team-card--featured .team-card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 190px;
    margin-left: 0;
  }

  .team-card--featured .team-card-photo img {
    min-height: 190px;
  }

  .team-card-photo,
  .team-card-photo img {
    min-height: 190px;
  }
}


/* ============================================================= */
/* 19. References Section                                        */
/* ============================================================= */

#references-section {
  padding: 20px 24px;
  margin-top: 24px;
  background-color: var(--off-white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

#references-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

#references-section ol {
  padding-left: 20px;
  margin: 0;
}

#references-section li {
  margin: 5px 0;
  line-height: 1.5;
  font-size: 0.82rem;
  color: var(--text-light);
}

#references-section a {
  color: var(--navy-mid);
  text-decoration: none;
}

#references-section a:hover {
  text-decoration: underline;
}


/* ============================================================= */
/* 20. Related Pages                                             */
/* ============================================================= */

/* v1.2 2026-04-17 13:46:53 - tighten gap between h3 and first pill */
/* v1.1 2026-04-17 */
#related-pages {
  width: 100%;
  background: linear-gradient(180deg, #f7f9fc 0%, var(--light-gray) 100%);
  padding: 36px 24px;
  border-top: 1px solid rgba(46, 58, 74, 0.08);
  border-bottom: 1px solid rgba(46, 58, 74, 0.08);
}

#related-pages-text {
  max-width: 1100px;
  margin: 0 auto;
}

#related-pages-text > h3 {
  margin: 0 0 6px 0;
  padding-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

#related-pages-text > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background-color: var(--gold);
  border-radius: 2px;
}

#related-pages-text strong {
  display: block;
  margin: 18px 0 10px 0;
  padding: 8px 14px;
  background-color: rgba(46, 58, 74, 0.05);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

#related-pages-text > strong:first-child,
#related-pages-text > h3 + strong {
  margin-top: 0;
}

#related-pages-text strong a {
  color: var(--navy);
  text-decoration: none;
}

#related-pages-text strong a:hover {
  color: var(--navy-mid);
}

#related-pages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-items: start;
}

#related-pages ul li {
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid rgba(46, 58, 74, 0.08);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#related-pages ul li::before {
  content: none;
}

#related-pages ul li:hover {
  border-color: var(--gold);
  box-shadow: 0 3px 10px rgba(46, 58, 74, 0.08);
  transform: translateY(-1px);
}

#related-pages ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--navy-mid);
  font-size: 0.92rem;
  line-height: 1.35;
  text-decoration: none;
}

#related-pages ul li a::before {
  content: "\203A";
  color: var(--gold);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1;
  flex-shrink: 0;
}

#related-pages ul li a:hover {
  color: var(--navy);
}

#related-pages ul ul {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-left: 22px;
}

#related-pages-text br { display: none; }
#related-pages-text blockquote { display: none; }


/* ============================================================= */
/* 21. Mega Menu (Desktop)                                       */
/* ============================================================= */

#mega-menu {
  background-color: var(--navy);
  position: relative;
  z-index: 100;
}

.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

.main-menu > li {
  position: relative;
  padding: 20px 25px;
}

.main-menu > li > a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition);
}

.main-menu > li:hover > a {
  color: var(--gold);
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--navy-light);
  padding: 24px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-width: 600px;
  max-width: 90vw;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.has-submenu:hover .submenu {
  display: flex;
}

.submenu-column {
  flex: 1;
  padding: 0 20px;
  min-width: 200px;
}

.submenu-column h4 {
  color: var(--gold);
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}

.submenu-column a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin: 6px 0;
  font-size: 0.88rem;
  transition: color var(--transition);
}

.submenu-column a:hover {
  color: var(--gold-light);
}


/* ============================================================= */
/* 22. Video Sidebar (Desktop)                                   */
/* ============================================================= */

.video-with-sidebar {
  display: flex;
  gap: 24px;
  padding: 24px;
}

.video-sidebar {
  width: 240px;
  background-color: var(--off-white);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.video-sidebar h3 {
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: var(--navy);
}

.video-sidebar ul {
  list-style: none;
  padding: 0;
}

.video-sidebar li {
  margin-bottom: 8px;
}

.video-sidebar a {
  text-decoration: none;
  color: var(--navy-mid);
  font-size: 0.9rem;
}

.video-sidebar a:hover {
  color: var(--gold);
}


/* ============================================================= */
/* 22b. Homepage - Surgery Expertise / Credentials section       */
/* ============================================================= */

#surgery-expertise {
  max-width: 1080px;
  margin: 0 auto 40px;
  padding: 24px 0 0;
  position: relative;
}

#surgery-expertise::before {
  content: '';
  display: block;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 20px;
}

.expertise-header {
  text-align: center;
  margin-bottom: 36px;
}

.expertise-eyebrow {
  display: inline-block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-hover);
  margin-bottom: 14px;
}

.expertise-header h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: 0.2px;
  margin: 0 auto 18px;
  max-width: 760px;
}

.expertise-divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto;
  border-radius: 2px;
}

/* Lead pull-quote */
.lead-statement {
  max-width: 820px;
  margin: 0 auto 28px;
  padding: 26px 30px;
  background: linear-gradient(135deg, var(--off-white) 0%, #eef1f6 100%);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}

.lead-statement p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--navy);
  margin: 0 0 12px !important;
  font-family: 'Inter', sans-serif;
}

.lead-statement p:last-child {
  margin: 0 !important;
}

.lead-statement strong {
  color: var(--navy);
  font-weight: 700;
}

/* v4.8 2026-04-17 */
/* Featured-in press block - two citation cards */
.featured-in-badge {
  max-width: 820px;
  margin: 0 auto 42px;
  padding: 0;
  text-align: center;
}

.featured-label {
  display: block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold-hover);
  margin-bottom: 14px;
}

.featured-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

#surgery-expertise .featured-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  transition: box-shadow var(--transition), transform var(--transition), border-left-color var(--transition);
}

#surgery-expertise .featured-item i {
  color: var(--gold-hover);
  font-size: 1.25rem;
  flex-shrink: 0;
}

#surgery-expertise .featured-item span {
  flex: 1;
}

#surgery-expertise .featured-item:hover,
#surgery-expertise .featured-item:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-left-color: var(--navy-mid);
}

/* v4.9 2026-04-17 */
/* Body with lead image - floated editorial layout */
/* v4.33 2026-04-20 - use display:flow-root so the internal clearfix does not clear the page-level #desktop-sidebar float */
.expertise-body {
  margin-bottom: 44px;
  display: flow-root;
}

.expertise-image {
  float: left;
  width: 40%;
  max-width: 400px;
  margin: 4px 30px 14px 0;
  shape-outside: inset(0 round 10px);
}

.expertise-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(46, 58, 74, 0.14);
  border: 1px solid rgba(46, 58, 74, 0.06);
  display: block;
}

.expertise-image figcaption {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

.expertise-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1.05em !important;
}

.expertise-text p:last-child {
  margin-bottom: 0 !important;
}

.expertise-text strong {
  color: var(--navy);
  font-weight: 700;
}

#surgery-expertise .expertise-text a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: rgba(3, 10, 138, 0.3);
  text-underline-offset: 2px;
}

#surgery-expertise .expertise-text a:hover {
  color: var(--gold-hover);
  text-decoration-color: var(--gold);
}

/* Stat cards */
.expertise-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 16px;
  text-align: center;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.25s;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(46, 58, 74, 0.08);
  border-color: rgba(232, 183, 48, 0.4);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.stat-label {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.35;
}

.stat-label span {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 3px;
}

.expertise-stats-note {
  font-size: 0.86rem !important;
  color: var(--text-secondary) !important;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 44px !important;
  line-height: 1.55;
  font-style: italic;
}

.expertise-stats-note sup {
  font-size: 0.7em;
  color: var(--text-light);
}

/* Credentials grid: main card + side column */
.credentials-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.credentials-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 32px;
  transition: box-shadow 0.3s;
}

.credentials-card:hover {
  box-shadow: 0 14px 34px rgba(46, 58, 74, 0.08);
}

.credentials-card h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(232, 183, 48, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
}

.credentials-card h3 i {
  color: var(--gold-hover);
  font-size: 1rem;
}

.credentials-card--accent {
  background: linear-gradient(135deg, rgba(232, 183, 48, 0.08) 0%, rgba(232, 183, 48, 0.02) 100%);
  border-color: rgba(232, 183, 48, 0.3);
}

.credentials-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.credentials-side .expertise-image--davinci img {
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(46, 58, 74, 0.1);
}

.checkmark-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkmark-list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.55;
  font-size: 0.94rem;
  color: var(--text);
  margin: 0 !important;
}

.checkmark-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(232, 183, 48, 0.3);
}

.checkmark-list li sup {
  font-size: 0.7em;
  color: var(--text-light);
  font-weight: 400;
}

.checkmark-list strong {
  color: var(--navy);
  font-weight: 700;
}

/* Mentors card */
.mentors-card {
  background: var(--navy);
  border-radius: 10px;
  padding: 22px 24px;
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  overflow: hidden;
}

.mentors-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mentors-card h4 {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mentors-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mentors-card li {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
  margin: 0 !important;
}

.mentors-card li::before {
  content: '\25C6';
  position: absolute;
  left: 0;
  top: 0.25em;
  font-size: 0.55em;
  color: var(--gold);
}

/* Final CTA panel */
.expertise-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 14px;
  padding: 34px 36px;
  color: var(--white);
  box-shadow: 0 16px 40px rgba(46, 58, 74, 0.2);
  position: relative;
  overflow: hidden;
}

.expertise-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}

.expertise-cta::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(232, 183, 48, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.expertise-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.expertise-cta-text h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 6px;
  border-bottom: none;
}

.expertise-cta-text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
  margin: 0 !important;
  line-height: 1.55;
}

.expertise-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#surgery-expertise .btn-primary-gold {
  display: inline-block;
  padding: 13px 24px;
  background: var(--gold);
  color: var(--navy) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  border-radius: 6px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(232, 183, 48, 0.25);
  border: none;
}

#surgery-expertise .btn-primary-gold:hover {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 183, 48, 0.32);
}

#surgery-expertise .btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  color: var(--white) !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s;
}

#surgery-expertise .btn-ghost-light i {
  color: var(--gold);
}

#surgery-expertise .btn-ghost-light:hover {
  border-color: var(--gold);
  background: rgba(232, 183, 48, 0.08);
}

.expertise-cta-guarantee {
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.expertise-cta-guarantee i {
  color: var(--gold);
}

/* Responsive - tablet */
@media (max-width: 900px) {
  .expertise-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .credentials-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive - mobile */
@media (max-width: 640px) {
  #surgery-expertise {
    margin: 0 auto 28px;
    padding: 16px 0 0;
  }

  .lead-statement {
    padding: 20px 22px;
    margin: 0 14px 24px;
  }

  .lead-statement p {
    font-size: 0.98rem;
  }

  .featured-in-badge {
    margin: 0 14px 32px;
  }

  .featured-items {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #surgery-expertise .featured-item {
    font-size: 0.88rem;
    padding: 12px 14px;
  }

  .expertise-body {
    padding: 0 14px;
  }

  .expertise-image {
    float: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 18px;
    shape-outside: none;
  }

  .expertise-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 14px;
    margin-bottom: 14px;
  }

  .stat-card {
    padding: 18px 12px;
  }

  .stat-number {
    font-size: 1.55rem;
  }

  .stat-label {
    font-size: 0.72rem;
    letter-spacing: 1px;
  }

  .expertise-stats-note {
    padding: 0 14px;
    margin-bottom: 32px !important;
  }

  .credentials-grid {
    gap: 18px;
    padding: 0 14px;
    margin-bottom: 32px;
  }

  .credentials-card {
    padding: 22px 20px;
  }

  .credentials-card h3 {
    font-size: 1.08rem;
  }

  .checkmark-list li {
    font-size: 0.9rem;
  }

  .expertise-cta {
    padding: 26px 22px;
    margin: 0 14px;
    border-radius: 10px;
  }

  .expertise-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .expertise-cta-text h3 {
    font-size: 1.2rem;
  }

  .expertise-cta-actions {
    width: 100%;
  }

  #surgery-expertise .btn-primary-gold,
  #surgery-expertise .btn-ghost-light {
    flex: 1;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
}


/* ============================================================= */
/* 23. Footer                                                    */
/* ============================================================= */

#footer {
  width: 100%;
  background: linear-gradient(180deg, var(--navy-light) 0%, var(--navy) 60%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  line-height: 1.6;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Main footer grid */
.footer-main {
  padding: 40px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr;
  gap: 40px;
}

.footer-heading {
  color: var(--gold);
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* Brand column */
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  line-height: 1;
}

/* v4.3 2026-04-18 - SVG footer logo */
.footer-logo-img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

.footer-logo-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
}

.footer-logo-divider {
  display: inline-block;
  width: 1.5px;
  height: 1.35rem;
  background-color: var(--gold);
  margin: 0 12px;
  opacity: 0.9;
}

.footer-logo-region {
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 20px;
  max-width: 340px;
  font-size: 0.92rem;
}

/* v4.14 2026-04-17 */
.footer-bio-line {
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 20px;
  max-width: 340px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color var(--transition);
}

.footer-contact-item i {
  color: var(--gold);
  width: 16px;
  text-align: center;
  font-size: 0.9em;
}

a.footer-contact-item:hover {
  color: var(--gold-light);
}

.footer-hours {
  color: rgba(255, 255, 255, 0.7);
  cursor: default;
}

/* Locations column */
.footer-location-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: 0;
}

.footer-location-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-location-list strong {
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.footer-location-list span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* v1.1 2026-04-17 */
.footer-location-list .footer-location-role {
  color: var(--gold-light);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 2px;
}

.footer-location-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-light);
  font-size: 0.82rem;
  text-decoration: none;
  margin-top: 3px;
  width: fit-content;
  transition: color var(--transition), gap var(--transition);
}

.footer-location-list a i {
  font-size: 0.85em;
}

.footer-location-list a:hover {
  color: var(--gold);
  gap: 9px;
}

/* Links columns */
.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition), padding-left var(--transition);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--gold);
  padding-left: 4px;
}

/* Professional memberships strip (top of footer, above main grid) */
.footer-affiliations {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 48px 0 32px;
}

.footer-affiliations .footer-heading {
  text-align: center;
  margin: 0 0 16px;
}

.footer-affiliations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px 26px;
}

.footer-affiliation {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 18px 28px;
  border-radius: 6px;
  transition: transform var(--transition);
}

.footer-affiliation img {
  display: block;
  height: 110px;
  width: auto;
  max-width: 100%;
}

.footer-affiliation:hover {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .footer-affiliations {
    padding: 28px 0 24px;
  }
  .footer-affiliation img {
    height: 80px;
  }
}

/* Medical disclaimer */
.footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.15);
}

.footer-disclaimer p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  line-height: 1.65;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.footer-disclaimer strong {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

/* Bottom bar */
.footer-bottom {
  background: rgba(0, 0, 0, 0.28);
  padding: 16px 0;
}

.footer-bottom .footer-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.footer-bottom-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}

.footer-staff-portal {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
}

.footer-staff-portal a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-staff-portal a:hover {
  color: var(--gold);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  margin: 0;
}

.footer-legal {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 0.82rem;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-legal a:hover {
  color: var(--gold);
}

.footer-legal span {
  color: rgba(255, 255, 255, 0.25);
}

/* Footer responsive - tablet */
/* v4.10 2026-04-17 */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-areas:
      "brand     services  about"
      "locations locations locations";
    gap: 36px 32px;
  }

  .footer-brand     { grid-area: brand; }
  .footer-locations { grid-area: locations; }
  .footer-col:nth-child(3) { grid-area: services; }
  .footer-col:nth-child(4) { grid-area: about; }

  .footer-locations .footer-heading {
    margin-top: 4px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-location-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 28px;
  }

  .footer-main {
    padding: 44px 0 32px;
  }
}

/* Footer responsive - mobile */
@media (max-width: 640px) {
  .footer-container {
    padding: 0 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 32px;
  }

  .footer-brand,
  .footer-locations,
  .footer-col:nth-child(3),
  .footer-col:nth-child(4) {
    grid-area: auto;
  }

  .footer-locations .footer-heading {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  .footer-location-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .footer-main {
    padding: 36px 0 24px;
  }

  .footer-bottom-top {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }

  .footer-legal {
    justify-content: center;
  }
}


/* ============================================================= */
/* 24. Responsive - Tablet (768px+)                              */
/* ============================================================= */

@media (min-width: 768px) {
  .top-bar-inner {
    justify-content: space-between;
  }

  .top-bar-locations {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  #mobile-menu {
    width: 360px;
  }

  #mobile-menu a {
    font-size: 1em;
    padding: 15px 24px;
  }

  .has-children > ul a {
    padding-left: 42px;
  }

  .submenu-toggle {
    padding: 15px 24px;
    font-size: 1em;
  }

  .feature-boxes-container {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .feature-box {
    flex: 1;
    padding: 22px 22px;
  }

  .feature-box h3 {
    font-size: 1.05em;
    margin-bottom: 6px;
  }

  .feature-box p {
    font-size: 0.85em;
    line-height: 1.5;
  }

  #second-opinion {
    padding: 32px 0;
  }

  .content {
    padding: 40px 30px;
  }

  .floating_image_right {
    float: right;
    margin: 0 0 20px 24px;
    max-width: 320px;
  }

  #home-hero {
    padding: 20px 30px;
  }

  .hero-title {
    font-size: 1.45em;
    white-space: nowrap;
  }

  .hero-stat {
    font-size: 0.85em;
    letter-spacing: 2.2px;
  }

  .hero-divider {
    height: 1.1em;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .top-bar-inner {
    flex-direction: column;
    gap: 2px;
    padding: 5px 0;
  }

  .top-bar-contact {
    order: 1;
  }

  .top-bar-locations {
    order: 2;
    margin-left: 0;
  }
}


/* ============================================================= */
/* 25. Responsive - Desktop (1024px+)                            */
/* ============================================================= */

@media (min-width: 1024px) {
  .top-bar-inner {
    max-width: none;
    padding: 6px 10px;
  }

  #main-header {
    width: 100%;
    height: 60px;
    background: transparent;
  }

  #header-logo-text {
    font-size: 2em;
    height: 60px;
  }

  .logo-main {
    letter-spacing: 3.5px;
  }

  .logo-region {
    letter-spacing: 4px;
  }

  .logo-divider {
    margin: 0 14px;
    height: 0.95em;
  }

  /* v4.3 2026-04-18 - slightly larger SVG logo on desktop; v4.44 +40% */
  .logo-img {
    height: 47.6px;
  }

  .news-images {
    max-width: 500px;
  }

  #home-hero {
    padding: 22px 40px;
  }

  .hero-title {
    font-size: 1.7em;
    white-space: nowrap;
  }

  .hero-stat {
    font-size: 0.9em;
    letter-spacing: 2.8px;
  }

  .hero-stat-number {
    font-size: 1.4em;
  }

  .hero-divider {
    width: 1.5px;
    height: 1.2em;
    margin: 0;
  }
}

@media screen and (max-width: 1024px) {
  .video-with-sidebar {
    flex-direction: column;
  }

  .video-sidebar {
    display: none;
  }

  .video-main {
    width: 100%;
  }
}


/* ============================================================= */
/* 26. Reduced Motion                                            */
/* ============================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }
}


/* ============================================================= */
/* 27. Procedure Page Template v2 (2026-04-17)                   */
/* ============================================================= */
/* Reusable building blocks for procedure / video pages.
   All video/treatment pages use .procedure-hero + .video-facade.
   The homepage hero uses its own dedicated #home-hero styling above. */


/* ---- 27.1 Breadcrumbs ---------------------------------------- */

#breadcrumbs {
  width: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  padding: 10px 20px;
}

#breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  color: var(--text-secondary);
}

#breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#breadcrumbs li + li::before {
  content: "\203A";
  color: var(--text-light);
  font-weight: 600;
}

#breadcrumbs a {
  color: var(--navy-mid);
  text-decoration: none;
}

#breadcrumbs a:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}

#breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 500;
}


/* ---- 27.2 Procedure Hero ------------------------------------- */

.procedure-hero {
  width: 100%;
  padding: var(--procedure-pad-y) 20px;
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--border);
}

.procedure-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.procedure-hero-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.procedure-eyebrow {
  display: inline-block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-hover);
}

/* v4.31 2026-04-19 - treatment-page H1 switched from Playfair 700 to Outfit 600 for sitewide consistency */
.procedure-hero h1 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: var(--hero-h1-size);
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -0.2px;
  margin: 0;
  font-weight: 600;
}

.procedure-hero .hero-tagline {
  font-size: var(--hero-sub-size);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 620px;
}

.procedure-hero .procedure-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.procedure-hero .procedure-hero-cta .second-opinion-button {
  padding: 12px 24px;
}

/* At-a-glance fact chips */
.proc-facts {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proc-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--navy);
  line-height: 1.3;
}

.proc-facts li i {
  color: var(--gold-hover);
  font-size: 0.9em;
}

.proc-facts li .fact-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.proc-facts li .fact-value {
  font-weight: 600;
}

/* Hero media column */
.procedure-hero-media {
  min-width: 0;
}

.procedure-hero-video-native {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: var(--shadow-md);
}

/* Hero image (for pages that use an image instead of a video-facade, e.g. /single-port/).
   Scoped to direct children so it does not fight the video-facade's own poster/iframe. */
.procedure-hero-media > figure > img,
.procedure-hero-media > img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* Hero is single column at every breakpoint (video-first stack).
   H1 sits as a compact caption directly above the full-width video. */


/* ---- 27.3 Video Facade (click-to-load) ----------------------- */

.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.video-facade:hover,
.video-facade:focus-visible {
  outline: none;
}

.video-facade:focus-visible {
  box-shadow: 0 0 0 3px var(--gold), var(--shadow-md);
}

.video-facade img,
.video-facade .video-facade-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  display: block;
  background: #111;
}

.video-facade:hover img,
.video-facade:hover .video-facade-poster {
  transform: scale(1.03);
  filter: brightness(0.92);
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.video-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(232, 183, 48, 0.95);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.video-facade-play i {
  margin-left: 4px;
}

.video-facade:hover .video-facade-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--gold);
}

.video-facade-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 2;
  pointer-events: none;
}

/* Activated state - iframe/video takes over */
.video-facade.is-active {
  cursor: default;
}

.video-facade.is-active::after,
.video-facade.is-active .video-facade-play,
.video-facade.is-active .video-facade-label,
.video-facade.is-active .video-facade-poster,
.video-facade.is-active img {
  display: none;
}

.video-facade iframe,
.video-facade video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}


/* ---- 27.4 Content Column with TOC ---------------------------- */

.procedure-body {
  padding: 40px 0;
  background: var(--white);
}

.procedure-body-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.procedure-body .content {
  max-width: var(--content-read-width);
  padding: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1.7;
  min-width: 0;
}

.procedure-body .content > h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.35rem, 2vw + 0.5rem, 1.7rem);
  color: var(--navy);
  margin-top: 2em;
  margin-bottom: 0.5em;
  letter-spacing: 0.2px;
  scroll-margin-top: 80px;
}

.procedure-body .content > h2:first-child {
  margin-top: 0;
}

.procedure-body .content > h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin-top: 8px;
  border-radius: 1px;
}

.procedure-body .content > h3 {
  font-size: 1.12rem;
  color: var(--navy);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  font-weight: 600;
  scroll-margin-top: 80px;
}

.procedure-body .content > p {
  margin: 0 0 1.1em;
}

.procedure-body .content > ul,
.procedure-body .content > ol {
  padding-left: 22px;
  margin: 0 0 1.3em;
}

.procedure-body .content > ul > li,
.procedure-body .content > ol > li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.page-toc {
  display: none;
}

@media (min-width: 1100px) {
  .procedure-body-inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 48px;
    align-items: start;
  }

  /* v4.24 2026-04-18 */
  /* Sticky-TOC: raise to near the top of the viewport and use most of the
     available height so the last TOC entries are not clipped on standard
     laptop viewports (900-1000px tall). */
  .page-toc {
    display: block;
    position: sticky;
    top: 24px;
    font-size: 0.88rem;
    padding: 18px 18px 20px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }

  .page-toc-heading {
    font-family: 'Raleway', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-hover);
    margin: 0 0 10px;
  }

  .page-toc ol,
  .page-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .page-toc li {
    margin: 0;
  }

  .page-toc a {
    display: block;
    padding: 6px 10px;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.4;
    border-radius: 2px;
    transition: all 0.18s ease;
  }

  .page-toc a:hover,
  .page-toc a.is-active {
    color: var(--navy);
    border-left-color: var(--gold);
    background: rgba(232, 183, 48, 0.08);
  }
}

/* Floating back-to-top: injected by procedure-page.js when .page-toc is built */
.back-to-top-toc {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.back-to-top-toc.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-toc:hover,
.back-to-top-toc:focus-visible {
  color: var(--navy);
  border-color: var(--gold);
  background: rgba(232, 183, 48, 0.12);
  outline: none;
}

.back-to-top-toc:focus-visible {
  box-shadow: 0 0 0 3px rgba(232, 183, 48, 0.35);
}

.back-to-top-toc__text {
  white-space: nowrap;
}

.back-to-top-toc .fa-arrow-up {
  font-size: 0.75rem;
}

@media (max-width: 1023px) {
  .has-procedure-toc .back-to-top-toc {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}


/* ---- 27.5 Content figures ------------------------------------ */

.content-figure {
  margin: 1.8em 0;
  padding: 0;
}

.content-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
}

.content-figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-align: center;
  font-style: italic;
}

.image-gallery-section .content-figure {
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.image-gallery-section .content-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: none;
}

.image-gallery-section .content-figure figcaption {
  margin: 0;
  padding: 11px 13px 13px;
  background: var(--white);
  text-align: left;
}


/* ---- 27.6 Resource cards (PDF brochures) --------------------- */

.procedure-resources {
  padding: 36px 20px;
  background: var(--off-white);
  border-top: 1px solid var(--border);
}

.procedure-resources-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.procedure-resources h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.3rem, 1.8vw + 0.5rem, 1.6rem);
  color: var(--navy);
  margin: 0 0 6px;
}

.procedure-resources h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin-top: 8px;
  border-radius: 1px;
  margin-bottom: 18px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.resource-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.resource-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text);
  text-decoration: none;
}

.resource-card-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}

.resource-card-icon.has-thumb {
  background: transparent;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

.resource-card-icon.has-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.resource-card-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.resource-card-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.resource-card-action {
  flex: 0 0 auto;
  color: var(--navy-mid);
  font-size: 0.95rem;
  transition: color var(--transition);
}

.resource-card:hover .resource-card-action {
  color: var(--gold-hover);
}

/* v4.73 2026-05-01 - presentation PDF cards */
.presentation-intro {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.presentation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}

.presentation-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.presentation-card:hover {
  color: var(--text);
  text-decoration: none;
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.presentation-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 183, 48, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(46, 58, 74, 0.08), rgba(80, 102, 131, 0.12));
  border-bottom: 1px solid var(--border);
}

.presentation-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(46, 58, 74, 0.16);
}

.presentation-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
}

.presentation-card-kicker {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-hover);
  text-transform: uppercase;
}

.presentation-card-title {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.presentation-card-description {
  display: block;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.55;
}

.presentation-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--navy-mid);
  font-size: 0.9rem;
  font-weight: 700;
}

.presentation-card:hover .presentation-card-action {
  color: var(--gold-hover);
}

/* v1.4 2026-04-17 15:05:00 */
/* Variant of .resource-card for linking out to an external video (YouTube).
   Used where an embedded video facade would otherwise sit (e.g. age-restricted clips). */
.video-link-card {
  max-width: 620px;
  margin: 0 auto;
}

.video-link-card .video-link-card-icon {
  background: linear-gradient(135deg, #c4302b, #ff0000);
  color: var(--white);
  font-size: 1.5rem;
}

.video-link-card .resource-card-meta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* v1.6 2026-05-01 */
/* Brochure index: table of contents, category section wrappers, search,
   and subgroup headings on top of the shared .resource-grid pattern. */
.brochure-search-panel {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}

.brochure-search-panel h2 {
  color: var(--white);
  margin-bottom: 8px;
}

.brochure-search-panel h2::after {
  background: var(--gold);
}

.brochure-search-panel p {
  max-width: 760px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.86);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brochure-search-form {
  position: relative;
  max-width: 820px;
}

.brochure-search-form i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--navy-mid);
  pointer-events: none;
}

.brochure-search-input {
  width: 100%;
  min-height: 58px;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0 20px 0 52px;
  font: 600 1rem/1.3 'Inter', sans-serif;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.brochure-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(232, 183, 48, 0.22);
}

.brochure-search-status {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.84);
}

/* v4.96 2026-06-12 - brochure source and topic filter chips */
.brochure-filter-group {
  margin-top: 16px;
}

.brochure-filter-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}

.brochure-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brochure-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-radius: 999px;
  padding: 7px 15px;
  font: 600 0.85rem/1.2 'Inter', sans-serif;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.brochure-chip:hover {
  border-color: var(--gold);
  background: rgba(232, 183, 48, 0.16);
}

.brochure-chip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.brochure-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.brochure-empty-message {
  display: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}

.brochure-empty-message.is-visible {
  display: block;
}

.brochure-toc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.brochure-toc-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 10px;
}

.brochure-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 20px;
}

.brochure-toc-list a {
  display: inline-block;
  color: var(--navy-mid);
  text-decoration: none;
  padding: 3px 0;
  font-size: 0.95rem;
}

.brochure-toc-list a:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}

.brochure-toc-count {
  color: var(--text-light);
  font-size: 0.85rem;
  margin-left: 2px;
}

.brochure-category {
  margin-top: 36px;
  scroll-margin-top: 90px;
}

.brochure-category-head {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.35rem, 1.6vw + 0.6rem, 1.7rem);
  color: var(--navy);
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
}

.brochure-subgroup-head {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--navy-mid);
  margin: 22px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.resource-card--weblink .resource-card-icon {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
}

/* v4.97 2026-06-12 - honour hidden attribute on filtered brochure elements */
.resource-card[hidden],
.resource-grid[hidden],
.brochure-subgroup-head[hidden],
.brochure-category[hidden] {
  display: none;
}


/* ---- 27.7 Secondary video grid ------------------------------- */

.procedure-videos {
  padding: 36px 20px;
  background: var(--white);
}

.procedure-videos-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.procedure-videos h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.3rem, 1.8vw + 0.5rem, 1.6rem);
  color: var(--navy);
  margin: 0 0 6px;
}

.procedure-videos h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin-top: 8px;
  border-radius: 1px;
  margin-bottom: 18px;
}

.procedure-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* v3.14 2026-04-17 17:45:00 */
@media (min-width: 760px) {
  .procedure-videos-grid:has(> .procedure-video-item + .procedure-video-item) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.procedure-video-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.procedure-videos-grid > .procedure-video-item:only-child {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.procedure-video-item .video-facade {
  border-radius: var(--radius-sm);
}

.procedure-video-item .responsive-video {
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  background: #000;
  box-shadow: var(--shadow-md);
}

.procedure-video-caption {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.procedure-video-caption strong {
  color: var(--navy);
  font-weight: 600;
}


/* ---- 27.7c Brochure web-version helpers ---------------------- */
/* Source-attribution callout used at the top of pages that
   reproduce a third-party PDF brochure as web content,
   plus a small trailer note inside the references block. */

.brochure-source-note {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.brochure-source-note a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: rgba(3, 10, 138, 0.3);
}

.brochure-source-note a:hover {
  color: var(--gold-hover);
  text-decoration-color: var(--gold);
}

.brochure-source-note-trailer {
  margin-top: 16px;
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 0 20px 16px;
  font-size: 0.82rem;
  color: var(--text-light);
}

/* Per-brochure references collapsible used on the long /rezum/ page
   when each web brochure is inlined as its own h2 section. Lets the
   citation list and safety trailer collapse so the page stays readable
   without losing the source-of-truth references. */
.content details.brochure-references {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 16px 0 32px;
  overflow: hidden;
}

.content details.brochure-references > summary {
  cursor: pointer;
  padding: 12px 18px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--navy);
}

.content details.brochure-references > summary::-webkit-details-marker {
  display: none;
}

.content details.brochure-references > summary::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--gold-hover);
  transition: transform 0.2s ease;
}

.content details.brochure-references[open] > summary {
  border-bottom: 1px solid var(--border);
}

.content details.brochure-references[open] > summary::after {
  transform: rotate(180deg);
}

.content details.brochure-references ol {
  padding: 14px 18px 8px 38px;
  margin: 0;
  list-style: decimal;
}

.content details.brochure-references li {
  margin: 0 0 8px;
  line-height: 1.55;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.content details.brochure-references li:last-child {
  margin-bottom: 0;
}

.content details.brochure-references a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: rgba(3, 10, 138, 0.3);
}

.content details.brochure-references a:hover {
  color: var(--gold-hover);
  text-decoration-color: var(--gold);
}

.content details.brochure-references .brochure-source-note-trailer {
  padding: 0 18px 16px;
  font-size: 0.78rem;
}

/* Simple data table used inside .procedure-body .content for
   reproducing risk-and-rate tables from BAUS leaflets etc. */
.content table.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.95rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.content table.data-table thead {
  background: var(--off-white);
}

.content table.data-table th,
.content table.data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}

.content table.data-table th {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--navy);
}

.content table.data-table tbody tr:last-child th,
.content table.data-table tbody tr:last-child td {
  border-bottom: none;
}


/* ---- 27.8 References (collapsible) --------------------------- */

#references-section.references-v2 {
  padding: 0;
  margin-top: 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px 32px;
}

#references-section.references-v2 > details {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}

#references-section.references-v2 > details > summary {
  cursor: pointer;
  padding: 16px 20px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy);
  user-select: none;
}

#references-section.references-v2 > details > summary::-webkit-details-marker {
  display: none;
}

#references-section.references-v2 > details > summary::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--gold-hover);
  transition: transform 0.2s ease;
}

#references-section.references-v2 > details[open] > summary::after {
  transform: rotate(180deg);
}

#references-section.references-v2 > details[open] > summary {
  border-bottom: 1px solid var(--border);
}

#references-section.references-v2 ol {
  padding: 16px 20px 20px 40px;
  margin: 0;
  counter-reset: reference;
  list-style: decimal;
}

#references-section.references-v2 li {
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

#references-section.references-v2 li:last-child {
  margin-bottom: 0;
}

#references-section.references-v2 a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: rgba(3, 10, 138, 0.3);
}

#references-section.references-v2 a:hover {
  color: var(--gold-hover);
  text-decoration-color: var(--gold);
}

/* Open by default on larger screens */
@media (min-width: 768px) {
  #references-section.references-v2 > details {
    /* no-op - toggle state controlled by HTML "open" attribute */
  }
}


/* ---- 27.8b Video transcript collapsible ---------------------- */
/* v4.4 2026-04-17 */
/* Placed directly under .procedure-hero, above #second-opinion.
   Closed by default. Visual language mirrors #references-section.references-v2
   so the two collapsibles feel like a matched pair (one at top for the
   transcript, one at bottom for the references). */

.video-transcript-wrapper {
  max-width: var(--max-width);
  margin: 16px auto 24px;
  padding: 0 20px;
}

.video-transcript-wrapper > .video-transcript {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-transcript-wrapper > .video-transcript > summary {
  cursor: pointer;
  padding: 14px 20px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy);
  user-select: none;
}

.video-transcript-wrapper > .video-transcript > summary::-webkit-details-marker {
  display: none;
}

.video-transcript-wrapper > .video-transcript > summary::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--gold-hover);
  transition: transform 0.2s ease;
}

.video-transcript-wrapper > .video-transcript[open] > summary::after {
  transform: rotate(180deg);
}

.video-transcript-wrapper > .video-transcript[open] > summary {
  border-bottom: 1px solid var(--border);
}

.video-transcript-wrapper > .video-transcript > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.video-transcript-body {
  padding: 16px 20px 20px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.video-transcript-body > h2,
.video-transcript-body > h3 {
  font-size: 1.05rem;
  margin: 12px 0 8px;
  color: var(--navy);
}

.video-transcript-body > p {
  margin: 0 0 10px;
}

.video-transcript-body > p:last-child {
  margin-bottom: 0;
}

.video-transcript-body figure.content-figure {
  margin: 12px 0;
}

@media (max-width: 767px) {
  .video-transcript-wrapper {
    padding: 0 14px;
    margin: 12px auto 20px;
  }
  .video-transcript-wrapper > .video-transcript > summary {
    padding: 12px 16px;
    font-size: 0.72rem;
    letter-spacing: 1.4px;
  }
  .video-transcript-body {
    padding: 14px 16px 18px;
    font-size: 0.92rem;
  }
}


/* ---- 27.9 CTA band v2 (reusable) ----------------------------- */

.cta-band {
  width: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}

.cta-band-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.cta-band-text h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.8vw + 0.4rem, 1.45rem);
  color: var(--white);
  margin: 0 0 4px;
  font-weight: 700;
}

.cta-band-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 620px;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cta-band .cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(232, 183, 48, 0.25);
  transition: all var(--transition);
}

.cta-band .cta-primary:hover {
  background: var(--gold-hover);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(232, 183, 48, 0.35);
  text-decoration: none;
}

.cta-band .cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: transparent;
  color: var(--white);
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition);
}

.cta-band .cta-secondary i {
  color: var(--gold);
}

.cta-band .cta-secondary:hover {
  border-color: var(--gold);
  background: rgba(232, 183, 48, 0.08);
  color: var(--white);
  text-decoration: none;
}


/* ---- 27.10 Second Opinion v2 (inline CTA refresh) ------------ */

#second-opinion.cta-inline {
  background: var(--off-white);
  padding: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#second-opinion.cta-inline #second-opinion-text {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* v4.19 2026-04-18 match call-button height to second-opinion-button */
#second-opinion.cta-inline .call-button {
  width: auto;
  height: 60px;
  padding: 0 24px;
  border-radius: 999px;
  gap: 10px;
}

#second-opinion.cta-inline .call-button .call-label {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

@media (max-width: 520px) {
  #second-opinion.cta-inline .call-button .call-label {
    display: none;
  }

  #second-opinion.cta-inline .call-button {
    width: 48px;
    height: 48px;
    padding: 0;
  }
}


/* ---- 27.11 Mobile sticky CTA bar ----------------------------- */

.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(46, 58, 74, 0.08);
  gap: 8px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.mobile-cta-bar.is-hidden {
  transform: translateY(110%);
}

.mobile-cta-bar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  line-height: 1.1;
}

.mobile-cta-bar .mcta-call {
  background: var(--green);
  color: var(--white);
}

.mobile-cta-bar .mcta-call i {
  color: var(--white);
}

.mobile-cta-bar .mcta-opinion {
  background: var(--gold);
  color: var(--navy);
}

.mobile-cta-bar .mcta-opinion i {
  color: var(--navy);
}

@media (min-width: 1024px) {
  .mobile-cta-bar {
    display: none;
  }
}


/* ---- 27.12 Related treatments rail --------------------------- */

.related-treatments {
  padding: 32px 20px;
  background: var(--light-gray);
}

.related-treatments-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.related-treatments h2 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(1.2rem, 1.8vw + 0.4rem, 1.55rem);
  color: var(--navy);
  margin: 0 0 6px;
}

.related-treatments h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin-top: 8px;
  border-radius: 1px;
  margin-bottom: 18px;
}

.related-treatments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .related-treatments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .related-treatments-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.related-treatments-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition);
  line-height: 1.35;
}

.related-treatments-grid a::before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--gold);
  flex: 0 0 auto;
}

.related-treatments-grid a:hover {
  border-color: var(--gold);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  text-decoration: none;
}


/* ---- 27.13 Sidebar offset adjustments for new sections ------- */

@media (min-width: 1024px) {
  /* New template sections should participate in the same sidebar offset
     that legacy sections use. .mobile-cta-bar is fixed so it's excluded. */
  main > section.procedure-hero,
  main > section.procedure-body,
  main > section.procedure-videos,
  main > section.procedure-resources,
  main > section.related-treatments,
  main > section.cta-band,
  main > section#breadcrumbs {
    /* already covered by existing rule:
       main > section:not(#desktop-sidebar) { margin-left: 290px; }
       No override needed - keeping this comment for clarity. */
  }

  /* Allow the hero's inner grid to breathe on desktop */
  main > section.procedure-hero > .procedure-hero-inner {
    max-width: calc(var(--max-width) - 60px);
  }

  /* v3.8 2026-04-17 13:55:00 */
  /* Give the main content area breathing room from the left sidebar edge,
     and tighten the vertical whitespace between the hero and the first
     content element so the page feels less empty. */
  /* v3.15 2026-04-17 */
  main > nav#breadcrumbs {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* v3.14 2026-04-17 */
  /* Align the breadcrumb list with the hero's inner content column so the
     Home icon starts at the same x-position as the H1 below it, instead of
     sitting hard against the sidebar edge on wide viewports. */
  main > nav#breadcrumbs > ol {
    max-width: calc(var(--max-width) - 60px);
    margin: 0 auto;
  }

  /* v4.21 2026-04-18 */
  /* Trim top padding on desktop so the h1 sits closer to the breadcrumbs. */
  main > section.procedure-hero {
    padding: 8px 40px var(--procedure-pad-y);
  }

  /* v4.28 2026-04-18 - slim hero variant keeps tight top+bottom on desktop */
  main > section.procedure-hero.procedure-hero--slim {
    padding-top: 8px;
    padding-bottom: 14px;
  }

  /* Generic legacy content sections (team, CV placeholders, etc.) */
  main > section > .content {
    padding: 24px 40px 36px;
  }

  /* Remove the extra top margin that the first heading/wrapper inside a
     generic .content block would otherwise add on top of the section's
     own top padding. */
  main > section > .content > *:first-child {
    margin-top: 0;
  }
  main > section > .content > .team-member:first-child > h2 {
    margin-top: 0;
  }
}

/* v4.22 2026-04-18 */
/* Also tighten the top padding on tablet widths; mobile keeps the clamp
   floor so the h1 still has breathing room on narrow screens. */
@media (min-width: 768px) and (max-width: 1023px) {
  .procedure-hero {
    padding-top: 12px;
  }
}

/* v4.23 2026-04-18 */
/* Hide breadcrumbs on mobile only - they clutter the narrow viewport. */
@media (max-width: 767px) {
  #breadcrumbs {
    display: none;
  }
}


/* ============================================================= */
/* 28. Publications list (Dr Kooner publications page)           */
/* v1.0 2026-04-17 */
/* ============================================================= */

.publications-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 28px;
  padding: 16px 20px;
  background: var(--off-white);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}

.publications-intro a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.publications-year {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 36px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

.publication-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.publication-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.publication-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.publication-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 8px;
}

.publication-authors {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 6px;
}

.publication-authors strong {
  color: var(--navy);
  font-weight: 700;
}

.publication-journal {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 10px;
}

.publication-journal em {
  color: var(--navy);
  font-style: italic;
}

.publication-link {
  margin: 0;
}

.publication-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background var(--transition), color var(--transition);
}

.publication-link a:hover,
.publication-link a:focus {
  background: var(--navy);
  color: var(--gold);
}

@media (max-width: 600px) {
  .publication-item {
    padding: 14px 14px;
  }
  .publication-title {
    font-size: 0.95rem;
  }
  .publication-authors,
  .publication-journal {
    font-size: 0.85rem;
  }
}


/* ============================================================= */
/* 29. Contact & International Patients                          */
/* ============================================================= */

.contact-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* v4.28 2026-04-18 - tighten vertical rhythm on the contact page */
.procedure-hero--slim {
  padding-top: clamp(8px, 1.2vw, 14px);
  padding-bottom: clamp(10px, 1.4vw, 18px);
}

/* v4.41 2026-04-21 - CV hero: compact video variant.
   The full-width 16:9 hero video dominated the CV page; here we shrink it to
   roughly a quarter of its previous footprint and float it beside the H1 on
   wider screens, and cap its width on mobile so it still stacks cleanly. */
.procedure-hero--compact-video .procedure-hero-inner {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
}
.procedure-hero--compact-video .procedure-hero-media {
  max-width: 320px;
  width: 100%;
  margin: 0;
}
@media (min-width: 720px) {
  .procedure-hero--compact-video .procedure-hero-inner {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 28px;
    row-gap: 18px;
  }
  .procedure-hero--compact-video .procedure-hero-media {
    max-width: 300px;
    justify-self: end;
  }
  .procedure-hero--compact-video .procedure-hero-lead--cv {
    grid-column: 1;
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  .procedure-hero--compact-video .procedure-hero-inner {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .procedure-hero--compact-video .procedure-hero-media {
    max-width: 340px;
  }
}
.procedure-hero--compact-video .procedure-hero-lead--cv {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.procedure-hero-lead--cv .procedure-hero-lead-text {
  font-size: var(--hero-sub-size);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 14px;
  max-width: 640px;
}
.procedure-hero-lead--cv .procedure-hero-lead-cta {
  margin: 0;
}
.procedure-hero-lead--cv .cv-pdf-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background-color: var(--navy, #2e3a4a);
  color: #fff;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.procedure-hero-lead--cv .cv-pdf-button .fas {
  font-size: 1.05rem;
}
.procedure-body--contact {
  padding-top: 16px;
  padding-bottom: 32px;
}
.procedure-body--contact .contact-layout > .contact-subtitle:first-child {
  margin-top: 4px;
}

/* v4.29 2026-04-18 - small embedded map preview above each Get Directions link */
.location-map-thumb {
  width: 100%;
  height: 140px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 14px;
  background: var(--off-white);
  box-shadow: 0 2px 8px rgba(46, 58, 74, 0.06);
}
.location-map-thumb iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-primary-card .location-map-thumb {
  height: 170px;
}

.contact-subtitle {
  font-family: 'Outfit', 'Inter', sans-serif;
  color: var(--navy);
  font-size: 1.2rem;
  margin: 32px 0 16px;
  letter-spacing: 0.005em;
}
.contact-subtitle em { font-style: italic; color: var(--text-secondary); font-weight: 500; }
.contact-subtitle strong { font-weight: 700; }

.contact-primary-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}
@media (min-width: 760px) {
  .contact-primary-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
}

.contact-primary-card .location-title,
.contact-location-card .location-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 12px;
}
.contact-primary-card .location-title { font-size: 1.35rem; }
.contact-primary-card .location-title em { font-style: italic; font-weight: 600; }

.contact-primary-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 183, 48, 0.18);
  color: var(--navy);
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(232, 183, 48, 0.55);
  margin: 0 0 10px;
  line-height: 1;
}
.contact-primary-flag i { color: var(--gold); font-size: 0.72rem; }
.contact-location-card .location-title { font-size: 1.12rem; }
.contact-primary-card .location-title i,
.contact-location-card .location-title i { color: var(--gold); font-size: 1rem; }

.location-address {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.98rem;
  margin-bottom: 16px;
}

.directions-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid var(--navy);
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 999px;
  transition: all 0.2s ease;
  align-self: flex-start;
}
.directions-link i { color: var(--gold); transition: transform 0.2s ease; font-size: 0.8rem; }
.directions-link:hover,
.directions-link:focus-visible {
  background: var(--navy);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(46, 58, 74, 0.18);
}
.directions-link:hover i,
.directions-link:focus-visible i { color: var(--gold); transform: translateX(3px); }

.contact-details-panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(14px, 2vw, 20px);
  display: grid;
  gap: 4px;
  align-self: start;
}

.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s ease;
  border-radius: 6px;
}
.contact-detail-row:last-child { border-bottom: none; }
.contact-detail-row .icon-wrap {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.contact-detail-row .detail-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 3px;
}
.contact-detail-row .detail-value {
  display: block;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
  font-size: 0.98rem;
  word-break: break-word;
}
.contact-detail-row .detail-value small {
  display: block;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-top: 2px;
}
a.contact-detail-row:hover,
a.contact-detail-row:focus-visible { background: var(--off-white); }
a.contact-detail-row:hover .icon-wrap,
a.contact-detail-row:focus-visible .icon-wrap { background: var(--navy); color: var(--gold); }

/* v3.16 2026-04-17 19:00:00 */
.contact-locations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.contact-location-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-card);
}
.contact-location-card:hover {
  border-color: var(--gold);
  border-left-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.contact-location-card .location-title {
  font-size: 1.28rem;
  margin-bottom: 14px;
}
.contact-location-card .location-address {
  flex: 1;
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 20px;
}

.contact-location-card .location-role {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(232, 183, 48, 0.14);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(232, 183, 48, 0.45);
  margin: 0 0 16px;
}
.contact-location-card .location-role i {
  color: var(--gold);
  font-size: 0.85rem;
  margin-top: 3px;
  flex-shrink: 0;
}


/* International Patients */

.intl-announcement {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 0 20px;
}

.intl-contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.intl-contact-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 58, 74, 0.08);
  color: var(--navy);
  font-size: 1.3rem;
}

.intl-contact-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 500;
}

.intl-contact-text a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.intl-contact-text a:hover,
.intl-contact-text a:focus-visible {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

@media (max-width: 560px) {
  .intl-contact-card {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}

.intl-body .procedure-body-inner {
  grid-template-columns: 1fr;
}

.intl-body .content {
  margin: 0 auto;
}

.intl-map-figure {
  margin: 32px auto 0;
  text-align: center;
}
.intl-map-figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  background: var(--off-white);
  box-shadow: var(--shadow-card);
}
.intl-map-figure figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
}

/* ============================================================= */
/* 30. Print Styles                                              */
/* ============================================================= */

@media print {
  #top-bar,
  #hamburger-menu,
  #mobile-menu,
  #menu-overlay,
  #desktop-sidebar,
  #mega-menu,
  #second-opinion,
  .video-sidebar,
  .video-facade,
  .mobile-cta-bar,
  .cta-band,
  #breadcrumbs,
  .page-toc,
  .back-to-top-toc,
  #canberra-banner,
  #footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .content,
  .procedure-body .content {
    padding: 0;
    box-shadow: none;
    max-width: 100%;
  }

  .procedure-hero,
  .procedure-resources,
  .procedure-videos,
  .related-treatments {
    padding: 0;
    background: #fff;
    border: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}


/* ---- 27.12 Contact form (v4.30 2026-04-19) ----------------- */

.contact-form-section {
  padding: 28px 20px 36px;
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.contact-form-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.contact-form-title {
  color: var(--navy);
  font-size: 1.6rem;
  margin: 0 0 6px;
  letter-spacing: 0.2px;
}

.contact-form-lede {
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.55;
}

.contact-form-lede a {
  color: var(--navy-light);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.contact-form-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-form-banner[hidden] {
  display: none;
}

.contact-form-banner i {
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-form-banner--success {
  background: rgba(40, 167, 69, 0.08);
  color: #1f7a34;
  border: 1px solid rgba(40, 167, 69, 0.25);
}

.contact-form-banner--error {
  background: rgba(220, 53, 69, 0.06);
  color: #8a1a24;
  border: 1px solid rgba(220, 53, 69, 0.25);
}

.contact-form {
  background: var(--white);
  padding: 22px 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.contact-form-field--full {
  grid-column: 1 / -1;
}

.contact-form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
}

.contact-form-label .req {
  color: #c0392b;
  margin-left: 2px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  padding: 11px 13px;
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23475569' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(4, 12, 175, 0.15);
}

.contact-form-field.is-invalid input,
.contact-form-field.is-invalid select,
.contact-form-field.is-invalid textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.contact-form-error {
  color: #8a1a24;
  font-size: 0.85rem;
  min-height: 1em;
}

.contact-form-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile {
  margin: 16px 0 4px;
  min-height: 65px;
}

.contact-form-privacy {
  margin: 14px 0 16px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.contact-form-actions {
  display: flex;
  justify-content: flex-end;
}

.contact-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--navy);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  min-width: 180px;
}

.contact-form-submit:hover {
  background: var(--navy-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.contact-form-submit:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.contact-form-submit[disabled],
.contact-form-submit.is-loading {
  cursor: progress;
  opacity: 0.85;
  transform: none;
}

.contact-form-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: contact-form-spin 0.7s linear infinite;
}

.contact-form-submit.is-loading .contact-form-submit-spinner {
  display: inline-block;
}

@keyframes contact-form-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .contact-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-form {
    padding: 18px 16px 16px;
  }
  .contact-form-section {
    padding: 22px 14px 28px;
  }
  .contact-form-title {
    font-size: 1.4rem;
  }
  .contact-form-submit {
    width: 100%;
  }
}

/* ============================================================= */
/* === Site search                                          v1.0 */
/* === Mega-menu trigger, suggest dropdown, mobile menu     ==== */
/* === input, and /search/ results page.                    ==== */
/* ============================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Mega-menu search trigger -------------------------------- */

.mega-menu-search {
  margin-left: auto;
  position: relative;
}

.mega-menu-bar > li.mega-menu-search + li::before,
.mega-menu-bar > li.mega-menu-search::before {
  display: none;
}

.mega-search-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--white);
  cursor: pointer;
  width: 44px;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 1rem;
  transition: color var(--transition), background-color var(--transition);
  border-bottom: 2px solid transparent;
}

.mega-search-toggle:hover,
.mega-search-toggle:focus-visible {
  color: var(--gold-light);
  background-color: rgba(255, 255, 255, 0.05);
  outline: none;
}

.mega-search-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.mega-menu-search.is-open .mega-search-toggle {
  color: var(--gold);
  background-color: rgba(0, 0, 0, 0.18);
  border-bottom-color: var(--gold);
}

.mega-menu-search.is-open .mega-search-toggle .fa-search::before {
  content: "\f00d"; /* Font Awesome times - close icon */
}

.mega-search-form {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(420px, 92vw);
  z-index: 65;
}

.mega-search-form[hidden] {
  display: none;
}

.mega-search-input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  background: transparent;
  color: var(--text);
  min-width: 0;
}

.mega-search-input::placeholder {
  color: var(--text-light);
}

.mega-search-submit {
  appearance: none;
  border: 0;
  background: var(--navy);
  color: var(--white);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
  flex: 0 0 auto;
}

.mega-search-submit:hover,
.mega-search-submit:focus-visible {
  background: var(--navy-light);
  outline: none;
}

.mega-search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--white);
  border: 1px solid rgba(46, 58, 74, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 60vh;
  overflow-y: auto;
}

.mega-search-suggest[hidden] {
  display: none;
}

.mega-search-suggest-item {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-search-suggest-item:hover,
.mega-search-suggest-item.is-active {
  background: var(--gold-pale);
}

.mega-search-suggest-title {
  color: var(--navy);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
}

.mega-search-suggest-section {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* On narrow viewports the menu bar wraps; hide the trigger on
   small screens because the mobile menu carries its own input. */
@media (max-width: 767.98px) {
  .mega-menu-search {
    display: none;
  }
}

/* ---- Mobile menu search input -------------------------------- */

#mobile-menu .mobile-search {
  padding: 8px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 8px;
}

#mobile-menu .mobile-search form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 4px 4px 4px 10px;
}

#mobile-menu .mobile-search input[type="search"] {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 0;
  min-width: 0;
}

#mobile-menu .mobile-search input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

#mobile-menu .mobile-search button {
  appearance: none;
  border: 0;
  background: var(--gold);
  color: var(--navy);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#mobile-menu .mobile-search button:hover,
#mobile-menu .mobile-search button:focus-visible {
  background: var(--gold-hover);
  outline: none;
}

/* ---- Search results page ------------------------------------- */

.search-page-section {
  padding: 32px 0 64px;
}

.search-page-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-page-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  padding: 8px 10px 8px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.search-page-form:focus-within {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px var(--gold-pale);
}

.search-page-input-icon {
  color: var(--navy);
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.search-page-input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 1.05rem;
  padding: 10px 6px;
  background: transparent;
  color: var(--text);
  min-width: 0;
}

.search-page-input::placeholder {
  color: var(--text-light);
}

.search-page-submit {
  appearance: none;
  border: 0;
  background: var(--navy);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color var(--transition);
  flex: 0 0 auto;
}

.search-page-submit:hover,
.search-page-submit:focus-visible {
  background: var(--navy-light);
  outline: none;
}

.search-page-status {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 4px 4px 16px;
  min-height: 1.25em;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-result {
  background: var(--white);
  border: 1px solid rgba(46, 58, 74, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.search-result:hover {
  border-color: rgba(46, 58, 74, 0.2);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.search-result-link {
  display: block;
  padding: 16px 18px;
  color: inherit;
  text-decoration: none;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.search-result-section {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold-pale);
  padding: 3px 8px;
  border-radius: 999px;
}

.search-result-url {
  font-size: 0.78rem;
  color: var(--text-light);
  word-break: break-all;
}

.search-result-title {
  margin: 2px 0 6px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--navy);
}

.search-result-snippet {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.search-result mark {
  background: var(--gold-pale);
  color: var(--navy);
  padding: 0 2px;
  border-radius: 3px;
}

.search-page-empty {
  margin: 16px 0;
  padding: 16px;
  border: 1px dashed rgba(46, 58, 74, 0.15);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: rgba(46, 58, 74, 0.02);
}

@media (max-width: 600px) {
  .search-page-form {
    flex-wrap: wrap;
  }
  .search-page-submit-label {
    display: none;
  }
  .search-page-submit {
    padding: 10px 12px;
  }
  .search-result-link {
    padding: 14px 14px;
  }
}

/* ============================================================= */
/* Canberra visitor banner (v1.0 2026-04-25)                     */
/* Slim notice prompting ACT visitors to visit urologyact.com.au */
/* ============================================================= */

#canberra-banner {
  background: var(--navy);
  color: var(--white);
  font-size: 0.9rem;
  border-bottom: 2px solid var(--gold);
}

.canberra-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.canberra-banner-msg {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}

.canberra-banner-msg i {
  color: var(--gold);
  margin-right: 6px;
}

.canberra-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.canberra-banner-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.canberra-banner-btn--primary {
  background: var(--gold);
  color: var(--navy);
}

.canberra-banner-btn--primary:hover,
.canberra-banner-btn--primary:focus-visible {
  background: var(--gold-hover);
  color: var(--navy);
}

.canberra-banner-btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.45);
}

.canberra-banner-btn--ghost:hover,
.canberra-banner-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--white);
}

.canberra-banner-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: color var(--transition);
}

.canberra-banner-close:hover,
.canberra-banner-close:focus-visible {
  color: var(--gold);
}

@media (max-width: 600px) {
  .canberra-banner-inner {
    padding: 8px 12px;
    gap: 8px;
  }
  .canberra-banner-msg {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.85rem;
  }
  .canberra-banner-actions {
    justify-content: center;
  }
}

/* ============================================================
   Short-version sibling pages (v4.50)
   - Plain-English versions of detailed clinical pages.
   - Scope is a wrapper class .short-version-page so the existing
     header.html <body> tag does not need to change.
   - Risk panel .er-risks is required on every short-version page
     that has a risks section on its detailed parent (AHPRA balance).
   ============================================================ */
.short-version-page {
  --er-text: #1a1a1a;
  --er-muted: #555;
  --er-rule: #d8d8e0;
}
.short-version-page .content {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--er-text);
}
.short-version-page .content > h2 {
  font-size: 1.45rem;
  margin: 2rem 0 0.6rem;
  color: var(--navy);
}
.short-version-page .content > h3 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.4rem;
  color: var(--navy);
}
.short-version-page .content > p {
  margin: 0 0 1rem;
}
.short-version-page .content ul,
.short-version-page .content ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
.short-version-page .content li {
  margin-bottom: 0.4rem;
}
.short-version-page .content strong {
  color: var(--navy);
}
.short-version-page .procedure-hero-text h1 {
  margin-bottom: 0;
}

/* Eyebrow badge over the H1 */
.er-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* About-this-page disclaimer panel */
.er-about {
  background: #f7f7fb;
  border-left: 4px solid var(--gold);
  padding: 14px 18px;
  margin: 18px auto 24px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--er-muted);
  border-radius: 4px;
}
.er-about p {
  margin: 0 0 6px;
}
.er-about p:last-child {
  margin-bottom: 0;
}
.er-about a {
  color: var(--navy);
  text-decoration: underline;
}

/* Switcher pill (used on the detailed-page hero AND on short-version pages) */
.er-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.2;
  transition: background var(--transition), border-color var(--transition);
}
.er-switcher:hover,
.er-switcher:focus-visible {
  background: var(--gold-hover);
  color: var(--navy);
}
.er-switcher--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.er-switcher--ghost:hover,
.er-switcher--ghost:focus-visible {
  background: var(--gold-pale);
}
.er-switcher i {
  font-size: 0.85rem;
}

/* Inline switcher row inside the procedure hero on detailed pages */
.er-switcher-row {
  margin-top: 10px;
}
.er-switcher-row .er-switcher {
  font-size: 0.9rem;
  padding: 6px 14px;
}

/* Risks and side effects panel - required on short-version pages whose
   detailed parent lists complications. Keeps risks visible and
   proportionate to the rest of the page (AHPRA prohibition 4). */
.er-risks {
  background: #fff8e6;
  border: 1px solid #f1d77a;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
}
.er-risks h3 {
  margin-top: 0;
  color: var(--navy);
}
.er-risks ul {
  margin-bottom: 0;
}

/* "What you can do next" panel */
.er-next {
  background: #f5f7ff;
  border: 1px solid var(--er-rule);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
}
.er-next h3 {
  margin-top: 0;
  color: var(--navy);
}
.er-next ul {
  margin-bottom: 0;
}

/* Hub page - lists every topic that has a short-version sibling */
.er-hub {
  max-width: 1000px;
  margin: 24px auto 48px;
  padding: 0 16px;
}
.er-hub-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--er-text);
  margin: 0 0 24px;
  max-width: 62ch;
}
.er-hub-section-head {
  margin: 28px 0 10px;
  font-size: 1.15rem;
  color: var(--navy);
  border-bottom: 1px solid var(--er-rule);
  padding-bottom: 6px;
}
.er-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.er-hub-tile {
  display: block;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--er-rule);
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.er-hub-tile:hover,
.er-hub-tile:focus-visible {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.er-hub-tile-title {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--navy);
}
.er-hub-tile-meta {
  display: block;
  font-size: 0.85rem;
  color: var(--er-muted);
}

@media (max-width: 700px) {
  .short-version-page .content {
    font-size: 1.02rem;
    line-height: 1.65;
  }
}

/* ============================================================
   .experience-callout - prominent stat panel highlighting
   surgeon experience (e.g. "Over 3,000 cases"). Designed to
   sit inside .content (full pages) or .short-version-page .content.
   Figures must already be supported in body copy; this is a
   visual emphasis layer, not a place to introduce new claims.
   ============================================================ */
.experience-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: #fff;
  border-left: 6px solid var(--gold);
  border-radius: 8px;
  padding: 38px 32px;
  margin: 32px 0;
  box-shadow: 0 3px 10px rgba(46, 58, 74, 0.15);
}
.experience-callout-stat {
  display: block;
  font-size: clamp(3.6rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.experience-callout-body {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  max-width: 56ch;
  color: #fff;
}
.experience-callout-body strong {
  color: var(--gold-light);
  font-weight: 700;
}
.short-version-page .experience-callout {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .experience-callout {
    gap: 10px;
    padding: 28px 20px;
  }
  .experience-callout-stat {
    font-size: clamp(3rem, 14vw, 4.4rem);
  }
  .experience-callout-body {
    font-size: 1.05rem;
  }
}

/* v4.98 2026-07-24 19:55:49 - View BAUS brochures jump button (patient-information-brochures hero) */
.baus-jump-button,
.content .baus-jump-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background-color: var(--gold);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.baus-jump-button:hover,
.content .baus-jump-button:hover {
  background-color: var(--gold-hover);
  color: var(--navy);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}