/* ==== tbh-footer-v4 ==== */

@media (max-width:979px){
  /* ---- 1. merged Patient & hospital information: balanced 2 columns ---- */
  footer .footer-nav-merged{
    columns:2 !important;
    column-gap:14px !important;
    column-fill:balance !important;
  }
  footer .footer-nav-merged li{ break-inside:avoid !important; }
  footer .footer-nav-merged .footer-subgroup{
    break-before:auto !important;
    margin-top:6px !important;
  }

  /* ---- 2/3. one compact introduction, tighter section rhythm ---- */
  footer{ padding:18px 0 10px !important; }
  footer .footer-logo{ height:62px !important; }
  footer .footer-brand{ margin-bottom:6px !important; }
  footer .footer-desc{ margin:0 0 6px !important; line-height:1.4 !important; }
  footer .footer-socials{ margin:0 0 6px !important; }
  footer .footer-socials img{ height:44px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:6px !important; }
  footer .footer-inner > div + div{ padding-top:6px !important; margin-bottom:6px !important; }

  /* ---- 9. typography: one grey token, tighter uppercase labels ---- */
  footer .footer-col-title{
    font-size:10.5px !important;
    letter-spacing:.08em !important;
    margin:0 0 5px !important;
    padding-bottom:4px !important;
  }
  footer .footer-col-title::after{ width:24px !important; }
  footer .footer-subgroup{
    font-size:10.5px !important;
    letter-spacing:.06em !important;
    margin:4px 0 2px !important;
  }
  footer .footer-nav a{ padding:4px 0 !important; font-size:12.5px !important; line-height:1.3 !important; }
  footer .footer-nav li{ margin:0 !important; }
  footer .footer-desc,
  footer .newsletter-desc,
  footer .footer-contact-row,
  footer .legal-primary,
  footer .legal-more-body,
  footer .footer-credit{ color:#5E6A79 !important; }   /* one grey token */

  /* ---- 5. contact: perfect icon column, more icon-to-text air ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    gap:11px !important;                 /* slightly more air */
    align-items:start !important;
    margin:0 0 4px !important;
    line-height:1.35 !important;
  }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important;
    justify-self:center !important; margin-top:2px !important;
  }

  /* ---- 6/7/8. bottom: tighter, trust pulled up ---- */
  footer .footer-bottom{ padding-top:7px !important; margin-top:7px !important; gap:5px !important; }
  footer .legal-primary{ margin:0 0 4px !important; }
  footer .legal-more > summary,
  footer .links-more > summary{ min-height:32px !important; }
  footer .newsletter-desc{ margin:0 0 5px !important; }
  footer .newsletter-button{ min-height:40px !important; padding:8px 14px !important; margin:0 0 4px !important; }
  .footer-trust{
    padding:8px 18px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    gap:4px 12px !important;
  }
  .footer-trust::before{ margin-bottom:0 !important; }

  /* translate banner: restored to its original TOP position (the bottom-chip
     experiment made it float over page content everywhere — reverted). Its
     original stylesheet rules now apply unmodified. */
}

/* ==== tbh-footer-v5 ==== */

@media (max-width:979px){
  /* BRAND: one compact introduction */
  footer .footer-logo{ height:56px !important; }
  footer .footer-brand{ margin-bottom:5px !important; }
  footer .footer-desc{ font-size:12.5px !important; line-height:1.4 !important; margin:0 0 5px !important; }
  footer .footer-socials img{ height:40px !important; }
  footer .footer-socials{ margin:0 0 4px !important; }

  /* CONTACT: tighter rows on one grid */
  footer .footer-contact-row{ margin:0 0 2px !important; font-size:12.5px !important; line-height:1.32 !important; }

  /* bottom: final tighten */
  footer .footer-bottom{ padding-top:6px !important; margin-top:6px !important; }
  footer .legal-primary{ font-size:11px !important; line-height:1.45 !important; }
  footer .newsletter-desc{ font-size:11.5px !important; }
  footer .newsletter-button{ min-height:40px !important; font-size:13px !important; }
  footer .newsletter-fineprint{ font-size:10px !important; }
  .footer-trust{ padding-top:6px !important; }
}

/* ==== tbh-footer-v6 ==== */

@media (max-width:979px){
  /* ---- 1/2/9. ONE grid system for BOTH merged sections ---- */
  footer .footer-nav-services,
  footer .footer-nav-merged{
    columns:2 !important;
    column-gap:16px !important;
    column-fill:balance !important;
    margin:0 !important;
  }
  footer .footer-nav-services li,
  footer .footer-nav-merged li{
    break-inside:avoid !important;
    margin:0 !important;
  }
  /* subgroup labels behave identically in both grids */
  footer .footer-nav-services .footer-subgroup,
  footer .footer-nav-merged .footer-subgroup{
    font-size:10.5px !important;
    letter-spacing:.06em !important;
    line-height:1.3 !important;
    margin:7px 0 3px !important;
  }
  footer .footer-nav-services li:first-child.footer-subgroup,
  footer .footer-nav-merged li:first-child.footer-subgroup{ margin-top:0 !important; }
  /* identical rows, identical baseline */
  footer .footer-nav-services a,
  footer .footer-nav-merged a{
    display:block !important;
    padding:4px 0 !important;
    font-size:12.5px !important;
    line-height:1.32 !important;
    letter-spacing:0 !important;
  }
  footer .footer-subgroup-spacer{ display:none !important; }   /* no uneven gaps */

  /* ---- 9. one heading system ---- */
  footer .footer-col-title{
    font-size:10.5px !important;
    letter-spacing:.07em !important;
    line-height:1.2 !important;
    margin:0 0 6px !important;
    padding-bottom:4px !important;
  }
  footer .footer-col-title::after{ width:24px !important; }
  /* same padding + same divider for every section */
  footer .footer-inner > div + div{
    padding-top:8px !important;
    margin-bottom:8px !important;
  }

  /* ---- 3. compact introduction ---- */
  footer{ padding:16px 0 8px !important; }
  footer .footer-logo{ height:52px !important; }
  footer .footer-brand{ margin-bottom:4px !important; }
  footer .footer-desc{ margin:0 0 4px !important; line-height:1.4 !important; }
  footer .footer-socials{ margin:0 0 2px !important; }
  footer .footer-socials img{ height:38px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:4px !important; }

  /* ---- 4. contact on one vertical grid, phones grouped ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    gap:12px !important;                 /* a touch more icon-to-text air */
    align-items:start !important;
    margin:0 0 3px !important;
    line-height:1.35 !important;
  }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important;
    justify-self:center !important; margin-top:2px !important;
  }

  /* ---- 6. legal 10px closer to contact ---- */
  footer .footer-bottom{ padding-top:6px !important; margin-top:0 !important; }
  footer .legal-primary{ margin:0 0 3px !important; }

  /* ---- 7. trust: less air above, evenly spaced links ---- */
  .footer-trust{
    padding:4px 18px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; justify-content:center !important;
    gap:2px 18px !important;
  }
  .footer-trust::before{ margin:0 0 1px !important; }
  .footer-trust a{ padding:4px 0 !important; }

  /* ---- 5. floating buttons never cover the newsletter ---- */
  body.footer-in-view .whatsapp-fab,
  body.footer-in-view .book-fab{
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==== tbh-footer-v7 ==== */

@media (max-width:979px){
  /* ---- 1. BRANDING: logo is the strongest element; badge shares its width ---- */
  footer .footer-logo{ height:59px !important; width:auto !important; }   /* 52 -> 59 (+13%) */
  footer .footer-brand{ margin-bottom:3px !important; }                    /* tighter under logo */
  footer .footer-desc{ margin:0 0 5px !important; }
  footer .footer-socials{ margin:0 0 2px !important; }
  /* the CQC badge is an <img> inside a bare <a>, not .footer-socials —
     target it by its alt text so it reliably matches the logo width */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{
    width:197px !important;          /* same width as the logo: one cohesive block */
    max-width:100% !important;
    height:auto !important;
    display:block !important;
    margin-top:2px !important;
  }

  /* ---- 2/3. ONE grid system. Stop "SURGICAL PROCEDURES" wrapping,
       which was making the right column 13px heavier than the left. ---- */
  footer .footer-nav-services .footer-subgroup,
  footer .footer-nav-merged .footer-subgroup{
    font-size:10px !important;
    letter-spacing:.03em !important;
    line-height:1.35 !important;
    margin:7px 0 3px !important;
    padding-right:20px !important;   /* room for the chevron, so no wrap */
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  footer .footer-nav-services li:first-child .footer-subgroup,
  footer .footer-nav-merged li:first-child .footer-subgroup{ margin-top:0 !important; }
  /* identical rows + rhythm in BOTH sections */
  footer .footer-nav-services,
  footer .footer-nav-merged{ columns:2 !important; column-gap:16px !important; column-fill:balance !important; }
  footer .footer-nav-services a,
  footer .footer-nav-merged a{
    display:block !important;
    padding:4px 0 !important;
    font-size:12.5px !important;
    line-height:1.32 !important;
  }

  /* ---- 4. CONTACT: one grid, equal baselines, equal rows ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    column-gap:12px !important;
    align-items:start !important;
    margin:0 0 4px !important;       /* equal spacing between every row */
    line-height:1.35 !important;
  }
  footer .footer-contact-row:last-child{ margin-bottom:0 !important; }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important;
    justify-self:center !important; align-self:start !important;
    margin-top:3px !important;       /* optical baseline with the first text line */
  }

  /* ---- 6. LEGAL: lighter grey, still AA (4.56:1) ---- */
  footer .legal-primary,
  footer .footer-credit,
  footer .legal-more-body,
  footer .legal-more > summary,
  footer .links-more > summary{ color:#667283 !important; }
  footer .footer-bottom{ padding-top:5px !important; margin-top:0 !important; }

  /* ---- 7. TRUST: 12px closer, centred, evenly distributed ---- */
  .footer-trust{
    padding:0 18px calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top:-8px !important;      /* pulls it ~12px closer to the newsletter */
    gap:2px 20px !important;
  }
  .footer-trust::before{ margin:0 !important; }

  /* ---- 5. floating controls never touch the newsletter CTA ---- */
  body.footer-in-view .book-fab{ width:44px !important; padding:0 !important; }
  body.footer-in-view .book-fab span{ display:none !important; }
}

/* ==== tbh-footer-v8 ==== */

@media (max-width:979px){
  /* ---- 3. ONE underline system.
     The heading rule was a border-bottom on an inline-block, so it
     stretched to the text: "SERVICES" got 59px, "PATIENT & HOSPITAL
     INFORMATION" got 207px — that long line under the introduction.
     Replace with a fixed-width ::after so every heading matches. ---- */
  footer .footer-col-title{
    border-bottom:0 !important;
    padding-bottom:0 !important;
    margin:0 0 7px !important;
  }
  footer .footer-col-title::after{
    content:"" !important;
    display:block !important;
    width:26px !important;
    height:2px !important;
    background:var(--tbh-cyan, #00A9CE) !important;
    border-radius:8px!important;
    margin-top:5px !important;
  }
  /* no full-width section dividers — the underlines carry the rhythm */
  footer .footer-inner > div + div{ border-top:0 !important; padding-top:10px !important; }

  /* ---- 1. logo up again, less air beneath ---- */
  footer .footer-logo{ height:66px !important; width:auto !important; }   /* 59 -> 66 (+12%) */
  footer .footer-brand{ margin-bottom:2px !important; }
  footer .footer-desc{ margin:0 0 4px !important; }

  /* ---- 2. CQC badge steps back so it supports the logo ---- */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{
    width:172px !important;         /* 197 -> 172 (-13%) */
    height:auto !important;
    display:block !important;
    margin:0 0 2px !important;
  }

  /* ---- 5. contact: +2px icon-to-text, rows still on one grid ---- */
  footer .footer-contact-row{ column-gap:14px !important; }   /* 12 -> 14 */

  /* ---- 6. "More" sits 8px closer to the newsletter ---- */
  footer .links-more{ margin-bottom:-8px !important; }
  footer .footer-bottom > div:last-child{ margin-top:0 !important; }

  /* ---- 7. trust heading 10px closer to the fine print ---- */
  .footer-trust{ margin-top:-18px !important; }

  /* DOCKED STATE: the site declares these fixed !important, which beats
     inline styles — so docking is done with a class + !important instead.
     While .fab-docked, buttons are absolute (top set by JS via CSS var)
     and scroll away with the page. */
  .book-fab.fab-docked, .whatsapp-fab.fab-docked, #toTop.fab-docked{
    position:absolute !important;
    top:var(--fab-dock-top, auto) !important;
    bottom:auto !important;
  }

  /* ---- 8. Floating controls on ONE baseline.
     Measured: Book Now sat at 19px while WhatsApp sat at 12px and
     Back-to-top at 11px — raising Book further would have deepened the
     misalignment, not fixed it. All three now share a 14px bottom and
     are optically centred on the same line. ---- */
  .book-fab, .whatsapp-fab, #toTop{
    bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .book-fab, .whatsapp-fab{ height:44px !important; }
  #toTop{ height:44px !important; }
}

/* ==== tbh-footer-v9 ==== */

@media (max-width:979px){
  /* 2. air below the Privacy Policy line before the trust section */
  /* margin on the <small> collapses through its ancestors' edges;
     padding on the newsletter column does not */
  footer .newsletter-fineprint{ margin-bottom:0 !important; }
  footer .newsletter-col{ padding-bottom:14px !important; }
  /* the trust strip carries INLINE styles (margin:24px 0 18px; padding:18px 0)
     — override them so the fine-print's 14px sets the gap, and the strip
     hugs the page end instead of adding 42px of its own */
  .footer-trust{
    margin:0 0 0 !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  /* 3. trust: with the fineprint spacing fixed, ease its own top gap;
        equal spacing between the three links */
  .footer-trust{
    margin-top:-6px !important;
    gap:2px 22px !important;
    justify-content:center !important;
    /* docked buttons scroll away, so the huge clearance isn't needed;
       keep a modest floor + safe area */
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 4. CQC badge -10%, still aligned to the logo's left edge */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{ width:155px !important; }   /* 172 -> 155 */
}

/* ==== tbh-footer-v10 ==== */

@media (max-width:979px){
  /* 1. CQC badge -6% */
  footer img[alt*="Care Quality"],
  footer .footer-socials img{ width:146px !important; }   /* 155 -> 146 */

  /* 2. accordion chevrons moved 5px INWARD (right: 6px -> 11px),
        identical on every row; padding grows to match so text never
        runs beneath them */
  footer .footer-subgroup{ padding-right:30px !important; position:relative !important; }
  footer .footer-subgroup::after{ right:11px !important; }

  /* 3. contact icon-to-text +2px */
  footer .footer-contact-row{ column-gap:16px !important; }   /* 14 -> 16 */

  /* 5. trust heading 6px closer to the Privacy line */
  footer .newsletter-col{ padding-bottom:8px !important; }    /* 14 -> 8 */

  /* 6. newsletter button: more lateral breathing room, same height */
  footer .newsletter-button{
    padding-left:22px !important;   /* was 14-16 */
    padding-right:22px !important;
    min-height:40px !important;     /* unchanged */
  }
}

/* ==== tbh-nav-split ==== */

/* ============================================================
   DESKTOP NAV: label = link to category page; chevron = the
   dropdown toggle. The chevron keeps .nav-primary-btn so ALL
   existing JS (click toggle, hover-open, Escape, outside-click,
   aria-expanded) binds to it unchanged.
   ============================================================ */
.nav-primary-item{ display:inline-flex; align-items:stretch; position:relative; }
.nav-primary-link{
  display:inline-flex; align-items:center;
  font-family:'Manrope',sans-serif; font-weight:700;
  text-transform:uppercase; text-decoration:none;
  color:#FFFFFF; position:relative; cursor:pointer;
  padding:10px 4px 10px 15px; font-size:0.83rem; letter-spacing:0.07em;
  transition:color .2s ease;
}
/* the turquoise rule lives under the LABEL */
.nav-primary-link::after{
  content:''; position:absolute; bottom:5px; left:15px; right:0;
  height:1.5px; background:#00A9CE; border-radius:8px;
  transition:background .25s ease, opacity .25s ease;
}
.nav-primary-link:hover{ color:#DFF6FA; }
.nav-primary-link:hover::after{ background:#7EEAF2; }
.nav-primary-link:focus-visible{ outline:2px solid #00A9CE; outline-offset:2px; border-radius:8px; }
/* chevron button: compact tap target, no second underline */
.nav-chev-btn{ padding:10px 12px 10px 6px !important; }
.nav-chev-btn::after{ display:none !important; }
.nav-chev-btn:hover .dd-chev{ opacity:1; }
.nav-chev-btn .dd-chev{ opacity:.85; transition:opacity .2s ease, transform .25s ease; }
.nav-chev-btn:focus-visible{ outline:2px solid #00A9CE; outline-offset:2px; border-radius:8px; }
@media (max-width:1279px){
  .nav-primary-link{ padding:14px 3px 14px 11px; font-size:0.82rem; letter-spacing:0.03em; }
  .nav-primary-link::after{ left:11px; }
}
@media (max-width:1099px){
  .nav-primary-link{ padding:13px 2px 13px 8px; font-size:0.76rem; letter-spacing:0.02em; }
  .nav-primary-link::after{ left:8px; }
}

/* ==== tbh-acc-split-css ==== */

/* MOBILE MENU: category name = link to its landing page; chevron =
   the expand/collapse toggle. Two separate touch targets. */
.tbh-acc .tbh-acc-split{ display:flex !important; align-items:stretch !important; padding:0 !important; cursor:default !important; }
.tbh-acc .tbh-acc-name{
  flex:1 1 auto; display:flex; align-items:center;
  min-height:46px; padding:0 8px 0 15px;
  font:inherit; font-size:14.5px; font-weight:inherit;
  color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.tbh-acc .tbh-acc-name:active{ background:#EDF2F8; }
.tbh-acc .tbh-acc-toggle{
  flex:0 0 52px; display:flex; align-items:center; justify-content:center;
  min-height:46px; background:transparent; border:0;
  border-left:1px solid #6E8CB0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tbh-acc .tbh-acc-toggle:active{ background:#EDF2F8; }
.tbh-acc .tbh-acc-toggle .tbh-acc-chev{ width:15px; height:15px;
  transition:transform .18s cubic-bezier(.4,0,.2,1); }
.tbh-acc .tbh-acc-toggle[aria-expanded="true"] .tbh-acc-chev{ transform:rotate(180deg); }
.tbh-acc .tbh-acc-name:focus-visible,
.tbh-acc .tbh-acc-toggle:focus-visible{ outline:2px solid #005EB5; outline-offset:-2px; }

/* ==== tbh-fab-refine ==== */

/* ---- 12/13/14. Floating controls: never over content, evenly inset,
     consistent with each other. They already dock above the footer;
     this refines size, spacing and resting opacity. ---- */
@media (max-width:768px){
  /* 12. Book Now: icon + short label, narrower, never spanning content */
  .book-fab{
    right:16px !important;
    padding:0 14px !important;
    max-width:150px !important;
    font-size:.86rem !important;
  }
  /* 13. WhatsApp clears the Book button and matches the edge inset */
  .whatsapp-fab{ right:16px !important; }
  /* 14. Back-to-top: ~10% smaller, quiet until touched */
  #toTop{
    left:16px !important;
    width:40px !important; height:40px !important;   /* was 44 */
    opacity:.55 !important;
    transition:opacity .2s ease, transform .2s ease !important;
  }
  #toTop:hover, #toTop:focus-visible, #toTop:active{ opacity:1 !important; }
}
@media (min-width:769px){
  #toTop{
    width:40px !important; height:40px !important;
    opacity:.55 !important;
    transition:opacity .2s ease, transform .2s ease !important;
  }
  #toTop:hover, #toTop:focus-visible{ opacity:1 !important; }
}

/* ==== tbh-menu-consistency ==== */

/* ============================================================
   MOBILE MENU — single source of truth for every service row.
   Every row (including Blood Tests) now uses the same component:
     .tbh-acc-item > .tbh-acc-head.tbh-acc-split
        > a.tbh-acc-name  +  button.tbh-acc-toggle > svg.tbh-acc-chev
   so height, padding, accent line, typography, chevron and expand
   behaviour are inherited, not re-declared per item. Any future row
   added with this markup inherits it automatically.

   The only thing that needed normalising is high-contrast mode: it
   underlines every <a>, which made rows inconsistent when one of them
   was a bare link rather than a .tbh-acc-name.
   ============================================================ */
html.hc-mode .tbh-acc .tbh-acc-name{
  text-decoration:underline !important;
  text-underline-offset:3px;
}
html.hc-mode .tbh-acc .tbh-acc-toggle{ text-decoration:none !important; }

/* Touch targets: 48px minimum on every row (was 46px across the board).
   Applied to the shared component, so all 11 rows move together. */
.tbh-acc .tbh-acc-head{ min-height:48px !important; }
.tbh-acc .tbh-acc-name{ min-height:48px !important; }
.tbh-acc .tbh-acc-toggle{ min-height:48px !important; min-width:48px !important; }

/* DESKTOP NAV: Blood Tests now carries a chevron like every other item,
   which adds width. Tighten the horizontal padding below 1280px so the
   11 items still fit on 2 rows instead of spilling onto a 3rd.
   Measured: 12/3 holds 2 rows at 1100px; 8/2 is needed by 980px. */
@media (max-width:1279px){
  .nav-primary-item .nav-primary-link{ padding-left:12px !important; padding-right:3px !important; }
  .nav-primary-item .nav-chev-btn{ padding-left:5px !important; padding-right:5px !important; }
}
@media (max-width:1023px){
  .nav-primary-item .nav-primary-link{ padding-left:8px !important; padding-right:2px !important; }
  .nav-primary-item .nav-chev-btn{ padding-left:3px !important; padding-right:3px !important; }
}

/* ==== tbh-mega-menu ==== */

/* ============================================================
   ABOUT THE HOSPITAL — mega menu.
   Brand palette and header untouched; this is structure,
   hierarchy and spacing only. 3 columns + a footer utility row.
   ============================================================ */
.nav-mega{
  width:min(920px, calc(100vw - 48px)) !important;
  max-width:920px !important;
  padding:22px 28px 0 !important;
  background:#EDF2F8 !important;               /* pale blue-white, not grey */
  border:1px solid #E3ECF5 !important;
  border-radius:12px!important;
  box-shadow:0 1px 2px rgba(0,33,78,.04), 0 18px 44px -22px rgba(0,33,78,.22) !important;
  /* Clamp to the viewport on short laptop screens. The menu is short
     enough that this should never engage, but it is the safety net the
     brief asks for rather than letting it run off the bottom. */
  /* The menu opens ~312px down the page, so this clamps it to the
     visible area on short laptops. At 1366x768 it does not engage
     (menu is shorter than the space); on anything shorter it scrolls
     internally rather than running off the bottom. */
  max-height:calc(100vh - 300px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Hover bridge. Measured: there is a 38px gap between the bottom of the
   nav item and the top of the menu, so crossing it fired mouseleave and
   the menu closed under the pointer. This transparent strip spans that
   gap, keeping the pointer inside the item. Only while hovering, so it
   never sits over the nav and blocks its own hover-open. */
@media (hover:hover) and (min-width:980px){
  .nav-primary-item:hover .nav-mega::before{
    content:''; position:absolute; left:0; right:0; top:-44px; height:46px;
    background:transparent; pointer-events:auto;
  }
}
.nav-mega-cols{
  display:grid !important;
  grid-template-columns:1fr 1.15fr 1fr;        /* patient column slightly wider */
  gap:32px !important;                         /* 28-36px between columns */
  align-items:start !important;                /* tops align exactly */
}
.nav-mega-col{ display:flex; flex-direction:column; min-width:0; }

/* headings: clearly above the links in the hierarchy */
.nav-mega .nav-mega-title{
  font-family:'Manrope',sans-serif;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:#007D8A !important;                    /* teal accent, AA on this bg */
  margin:0 0 12px !important;
  padding:0 0 7px;
  border-bottom:1px solid #EDF3F8;
}

/* links */
.nav-mega .nav-mega-col > a,
.nav-mega .nav-mega-pro a{
  display:flex; align-items:center; gap:6px;
  padding:3px 0 !important;
  min-height:28px;
  font-family:'Manrope',sans-serif;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  color:#333B45 !important;                    /* charcoal, not black */
  text-decoration:none !important;
  border:0 !important; background:none !important;
  transition:color .18s ease, transform .18s ease;
}
.nav-mega .nav-mega-col > a::after,
.nav-mega .nav-mega-pro a::after{
  content:'›'; opacity:0; margin-left:2px;
  font-size:15px; line-height:1;
  transition:opacity .18s ease, transform .18s ease;
}
.nav-mega .nav-mega-col > a:hover,
.nav-mega .nav-mega-pro a:hover{
  color:#007D8A !important;
  transform:translateX(3px);
}
.nav-mega .nav-mega-col > a:hover::after,
.nav-mega .nav-mega-pro a:hover::after{ opacity:.75; }
.nav-mega a:focus-visible{ outline:2px solid #007D8A; outline-offset:2px; border-radius:8px; }

/* Patient Portal — a utility chip inside its column, not a banner */
.nav-mega .nav-mega-portal{
  display:flex !important; align-items:center; gap:9px;
  padding:11px 12px !important;
  margin:0 0 8px;
  background:#EDF2F8 !important;
  border:1px solid #DCE9F6 !important;
  border-radius:8px!important;
  font-weight:700 !important;
  color:#00214E !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-mega .nav-mega-portal svg{ width:15px; height:15px; flex:0 0 auto; color:#007D8A; }
.nav-mega .nav-mega-portal::after{ content:none !important; }
.nav-mega .nav-mega-portal:hover{
  background:#EDF2F8 !important; border-color:#C7DDF0 !important;
  color:#00214E !important; transform:none !important;
}

/* professionals: separated, but high up — directly under Health Resources */
.nav-mega .nav-mega-pro{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #E3ECF5;                /* the small divider */
  display:flex; flex-direction:column;
}
.nav-mega .nav-mega-pro a{ padding:5px 0 !important; min-height:30px; }  /* compact */
.nav-mega .nav-mega-title--pro{ color:#00214E !important; }

/* footer utility row */
.nav-mega-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
  margin-top:12px;
  padding:9px 0 10px;
  border-top:1px solid #E3ECF5;
}
.nav-mega-foot a{
  font-family:'Manrope',sans-serif;
  font-size:13px !important; font-weight:600 !important;
  color:#667283 !important; text-decoration:none !important;
  padding:6px 0; min-height:32px; display:inline-flex; align-items:center;
  transition:color .18s ease;
}
.nav-mega-foot a:hover{ color:#007D8A !important; }
.nav-mega-foot a + a{ position:relative; }
.nav-mega-foot a + a::before{
  content:''; position:absolute; left:-11px; top:50%; transform:translateY(-50%);
  width:1px; height:12px; background:#DCE5EE;
}

/* narrower desktops: keep 3 columns, tighten the gaps first */
@media (max-width:1200px){
  .nav-mega{ width:min(860px, calc(100vw - 32px)) !important; padding:26px 26px 0 !important; }
  .nav-mega-cols{ gap:26px !important; }
}
/* Keep 3 columns for as long as the desktop nav exists — dropping to 2
   made column 3 span full width and broke the top alignment. Narrow the
   rail and the gaps instead. */
@media (max-width:1060px){
  .nav-mega{ width:min(800px, calc(100vw - 24px)) !important; padding:22px 22px 0 !important; }
  .nav-mega-cols{ gap:20px !important; }
  .nav-mega .nav-mega-col > a,
  .nav-mega .nav-mega-pro a{ font-size:14.5px !important; }
}

/* MOBILE accordion: group headings inside the About panel */
.tbh-acc-group{
  font-family:'Manrope',sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#007D8A;
  margin:16px 0 6px; padding:0 0 6px 15px;
  border-bottom:1px solid #EDF3F8;
}
.tbh-acc-group:first-child{ margin-top:6px; }
.tbh-acc-portal{
  display:flex !important; align-items:center; gap:9px;
  background:#EDF2F8; border:1px solid #DCE9F6; border-radius:8px;
  margin:6px 12px 6px 15px; padding:11px 12px !important;
  font-weight:700 !important; color:#00214E !important;
}
.tbh-acc-portal svg{ width:15px; height:15px; flex:0 0 auto; color:#007D8A; }

/* ==== tbh-header-cta ==== */

/* ============================================================
   HEADER ACTION BAR — one intentional conversion toolbar.
   8px spacing system. Desktop only (>=980px): below that the
   compact mobile header keeps its own treatment.

   ROOT-CAUSE NOTE. Each button wraps its label in a <span> that
   carries its OWN colour from the original design (portal span =
   #fff, book span = cyan). Setting colour on the <a> did nothing —
   the span won, so Patient Portal rendered white-on-white and
   looked like an empty button. The spans are forced to inherit.

   Scoped to header.nav to out-specify tbh-compact-header, which
   sets header.nav .nav-phone{height:auto!important}.
   ============================================================ */
@media (min-width:980px){

  /* the group: one unit, vertically centred on the header grid */
  header.nav .nav-right{
    display:flex !important;
    align-items:center !important;      /* perfect vertical centring */
    gap:12px !important;                /* equal 12px between every button */
    margin-left:auto;
  }

  /* shared shell — identical box for all four */
  /* Enumerate the four buttons. A blanket `.nav-right > a` rule forced
     display:inline-flex onto .nav-cta-call too — a mobile-only duplicate
     that the header deliberately hides on desktop — so it reappeared as
     a 5th button. Never override someone else's display:none. */
  header.nav .nav-right > .nav-phone,
  header.nav .nav-right > .nav-cta-portal,
  header.nav .nav-right > .nav-cta-register,
  header.nav .nav-right > .nav-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;                 /* identical icon <-> label gap */
    height:52px !important;
    min-height:52px !important;
    padding:0 24px !important;          /* 8px system; text never near the edge */
    border-radius:12px!important;      /* mathematically identical */
    border-width:1px !important;        /* thinner than before: less dense */
    border-style:solid !important;
    font-family:'Manrope',sans-serif !important;
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
    transition:background-color .18s ease, border-color .18s ease,
               box-shadow .18s ease, transform .18s ease, color .18s ease !important;
  }

  /* THE FIX: the label span must not carry its own colour */
  /* The label span carries its own colour (portal span = #fff, book span
     = cyan), which is why Patient Portal rendered white-on-white and read
     as an empty button. Inherit colour — but do NOT touch display: each
     button holds a long label AND a short one, and the short is hidden on
     purpose. Forcing display printed both ("Book Now Book Now"). */
  header.nav .nav-right > a > span{
    color:inherit !important;
    letter-spacing:inherit !important;
  }
  /* icons: +20% (15 -> 18px), same baseline, inherit the button colour */
  header.nav .nav-right > a svg{
    width:18px !important; height:18px !important;
    flex:0 0 auto !important;
    stroke-width:1.7 !important;
    color:inherit !important;
    display:block !important;
  }
  header.nav .nav-right > a:focus-visible{
    outline:3px solid #0B63CE !important;
    outline-offset:2px !important;
  }
  html.hc-mode header.nav .nav-right > a{ text-decoration:none !important; }

  /* ---------- UTILITY: white / navy border / navy text + icon ----------

     THE EMPTY-BUTTON BUG. An older sheet (tbh-white-header) treats every
     action control as a solid navy pill and forces:
        -webkit-text-fill-color:#FFFFFF !important   (on the a AND its span)
        svg{ fill:#FFFFFF !important; stroke:#FFFFFF !important }
     -webkit-text-fill-color overrides `color` at PAINT time, so setting
     color:navy changed nothing — the glyphs were still painted white. The
     icons were forced white by the svg rule. On a white button that is
     white-on-white: the label and icon were invisible and only the border
     showed, which is exactly the "empty placeholder" on screen.
     The buttons were never empty. Their ink was white.

     Fixed at the paint layer, out-specifying those rules:
       theirs: header.nav .nav-phone span  (0,2,2)
       ours:   header.nav .nav-right > .nav-phone span  (0,3,2)
     ------------------------------------------------------------------ */
  header.nav .nav-right > .nav-phone,
  header.nav .nav-right > .nav-cta-portal{
    /* Tinted, not stark white. Two big white fills were what read as a
       "white strip" sitting on top of the header rather than in it. */
    background:#F4F8FC !important;
    border-color:#2B4A73 !important;              /* 8.6:1 on this fill — past the 3:1 rule */
    color:#00214E !important;                     /* 14.9:1 */
    -webkit-text-fill-color:#00214E !important;
    font-size:15px !important;                    /* steps down from the CTAs */
    font-weight:600 !important;
    padding:0 18px !important;                    /* narrower: they must not compete */
    box-shadow:none !important;                   /* no elevation on utilities */
  }
  header.nav .nav-right > .nav-phone span,
  header.nav .nav-right > .nav-cta-portal span{
    color:#00214E !important;
    -webkit-text-fill-color:#00214E !important;
  }
  /* icons are stroke-drawn (fill="none" stroke="currentColor") */
  header.nav .nav-right > .nav-phone svg,
  header.nav .nav-right > .nav-cta-portal svg{
    fill:none !important;
    stroke:#00214E !important;
    color:#00214E !important;
  }
  header.nav .nav-right > .nav-phone:hover svg,
  header.nav .nav-right > .nav-cta-portal:hover svg{ stroke:#00214E !important; }
  header.nav .nav-right > .nav-phone:hover,
  header.nav .nav-right > .nav-cta-portal:hover{
    background:#EDF2F8 !important;
    border-color:#00214E !important;
    transform:translateY(-1px) !important;
    box-shadow:0 3px 10px -6px rgba(0,33,78,.22) !important;
  }
  /* the number is the message */
  header.nav .nav-right > .nav-phone{
    font-size:15.5px !important;                  /* readable, but a utility */
    font-weight:600 !important;
    font-variant-numeric:tabular-nums;
    letter-spacing:.01em !important;
  }

  /* ---------- SECONDARY: darker hospital blue ---------- */
  header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal){
    background:#0A3D7C !important;                /* solid navy, 10.65:1 */
    border-color:#0A3D7C !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-size:15px !important;                    /* below Book Now's 17px */
    font-weight:600 !important;                   /* below Book Now's 700 */
    padding:0 14px !important;                    /* keeps it clearly narrower than Book */
    box-shadow:0 1px 3px rgba(10,61,124,.14) !important;
  }
  header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal) span{
    color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
  }
  header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal) svg{
    fill:none !important; stroke:#FFFFFF !important;
  }
  header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal):hover{
    background:#0C4890 !important; border-color:#0C4890 !important;
    transform:translateY(-2px) !important;
    box-shadow:0 8px 20px -10px rgba(10,61,124,.45) !important;
  }

  /* ---------- PRIMARY: book online ---------- */
  header.nav .nav-right > .nav-cta{
    background:#0B63CE !important;                /* strongest blue in the palette, 5.69:1 */
    border-color:#0B63CE !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-size:17px !important;                    /* the largest type in the bar */
    font-weight:700 !important;                   /* the heaviest weight in the bar */
    letter-spacing:.015em !important;
    padding:0 44px !important;
    /* "Register as a new patient" is a long label, so padding alone could
       not make Book Now the widest button — Register kept winning on
       text length. A min-width guarantees the primary is physically the
       largest target in the bar at every breakpoint. */
    min-width:288px !important;
    box-shadow:0 2px 6px rgba(11,99,206,.26),
               0 10px 26px -10px rgba(11,99,206,.45) !important;
  }
  header.nav .nav-right > .nav-cta span{
    color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
  }
  header.nav .nav-right > .nav-cta svg{
    fill:none !important; stroke:#FFFFFF !important;
  }
  header.nav .nav-right > .nav-cta:hover{
    background:#1470E0 !important;                /* brightens, 4.6:1 — still AA */
    border-color:#1470E0 !important;
    transform:translateY(-2px) !important;        /* the 2px lift */
    box-shadow:0 5px 12px rgba(11,99,206,.30),
               0 18px 36px -12px rgba(11,99,206,.55) !important;
  }
  header.nav .nav-right > a:active{ transform:translateY(0) !important; }

  /* arrow: 3px travel on hover */
  header.nav .nav-right > .nav-cta::after{
    content:''; width:16px; height:16px; flex:0 0 auto; margin-left:-2px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
    transform:translateX(0);
    transition:transform .18s ease !important;
  }
  header.nav .nav-right > .nav-cta:hover::after{ transform:translateX(4px); }

  @media (prefers-reduced-motion:reduce){
    header.nav .nav-right > a,
    header.nav .nav-right > .nav-cta::after{ transition:none !important; }
    header.nav .nav-right > a:hover{ transform:none !important; }
  }

  /* keep one row from 1366 to 1920 — tighten padding, never the height */
  /* When space tightens, squeeze the utilities FIRST and the primary LAST,
     so the hierarchy survives at every width. */
  /* When space tightens, squeeze the utilities FIRST, the secondary next,
     and never the primary — so the hierarchy survives at every width. */
  @media (max-width:1500px){
    header.nav .nav-right{ gap:12px !important; }
    header.nav .nav-right > .nav-phone,
    header.nav .nav-right > .nav-cta-portal{ padding:0 14px !important; }
    header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal){ padding:0 12px !important; }
    header.nav .nav-right > .nav-cta{ padding:0 40px !important; min-width:280px !important; }
  }
  @media (max-width:1400px){
    header.nav .nav-right > .nav-phone,
    header.nav .nav-right > .nav-cta-portal{ padding:0 12px !important; font-size:14.5px !important; }
    header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal){ padding:0 10px !important; font-size:14.5px !important; }
    header.nav .nav-right > .nav-cta{ padding:0 32px !important; font-size:17px !important; min-width:270px !important; }
  }
}

/* Below 980px the compact header owns the layout. Its buttons were 44px
   and 46px — unequal, which showed as a ragged row at high zoom. */
@media (max-width:979px){
  /* The compact header owns the layout here (this is also what a 1366
     screen at 150% zoom becomes: 911 effective px). Its buttons were
     44/46px tall with 2px corners — ragged next to the desktop bar. This
     equalises height and radius WITHOUT changing which buttons it shows
     or how it lays them out. */
  header.nav .nav-right{ align-items:center !important; gap:8px !important; }
  header.nav .nav-right > a{
    height:46px !important; min-height:46px !important;
    border-radius:12px!important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  header.nav .nav-right > a > span{ color:inherit !important; }
  header.nav .nav-right > button{ border-radius:12px!important; }
}

/* ==== tbh-header-polish ==== */

/* ============================================================
   FINAL HEADER POLISH.
   Loaded last so it wins the cascade. Layout unchanged.
   Baseline measured: top-bar 68 + red banner 43 + header 156 = 267px.
   Target: 6-8% shorter, while the LOGO grows 9% — so the savings
   have to come from the three bands, not the button row.
   ============================================================ */

/* ---------- 8. EMERGENCY BANNER: shorter, tighter, still loud ----------
   The banner carries id="liveBar", and an earlier sheet targets it as
   `#liveBar .emerg` (1,0,1). A class-only selector could never win, no
   matter how many !importants. These use the id too. */
#liveBar.announce-bar.live-bar{
  padding-top:3px !important;
  padding-bottom:3px !important;
}
#liveBar.live-bar .emerg{
  font-weight:800 !important;
  letter-spacing:.09em !important;     /* was .05em — more authority, less bulk */
  padding-top:2px !important;
  padding-bottom:2px !important;
}
#liveBar.live-bar .live-bar-inner{ line-height:1.3 !important; }

/* ---------- 7. SEARCH BAR: taller, rounder, more legible ---------- */
.top-bar{ padding-top:7px !important; padding-bottom:7px !important; }
.top-search{
  border-radius:12px!important;        /* was 2px — now reads as a premium field */
  padding:4px 6px 4px 22px !important;
  box-shadow:0 0 0 3px rgba(0,169,206,.16) !important;
}
.top-search input{
  padding:13px 8px 13px 0 !important;
  font-size:16px !important;            /* placeholder + query text */
}
.top-search input::placeholder{ font-size:16px !important; opacity:.72; }
.top-search button{
  width:44px !important; height:44px !important;   /* was 40px */
  flex:0 0 44px !important;
}
.top-search button svg{ width:19px !important; height:19px !important; }

/* ---------- 5. VERTICAL GRID: everything centres on its row ---------- */
.top-bar-inner{ align-items:center !important; }
header.nav .nav-inner{ align-items:center !important; }

@media (min-width:980px){
  /* ---------- 9. LOGO +9% ---------- */
  header.nav .brand-logo{
    height:60px !important;             /* was 55px */
    width:auto !important;
  }

  /* ---------- 6. HEADER HEIGHT: recover the logo's extra px and more ---------- */
  header.nav .nav-inner{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  header.nav .nav-tier2 .nav-primary-link{
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  /* ---------- 4. SPACING: let the group breathe ---------- */
  header.nav .nav-right{ gap:15px !important; }

  /* ---------- 3. UTILITY BUTTONS ---------- */
  header.nav .nav-right > .nav-phone,
  header.nav .nav-right > .nav-cta-portal{
    padding:0 15px !important;                    /* slightly narrower */
    border-color:#6E8CB0 !important;              /* lighter border — 3.26:1, still passes */
    line-height:1 !important;
  }
  /* One icon size for the whole bar — the brief asks for utility icons
     +15% AND consistent icon sizes, which only reconcile if they all land
     on the same value. 18 -> 20px (+11% overall, and the utilities read
     larger because their type is smaller). The primary's ARROW is the
     element that grows 20%, which is what actually draws the eye. */
  header.nav .nav-right > a svg{
    width:22px !important; height:22px !important;   /* utilities + secondary */
  }
  header.nav .nav-right > .nav-cta svg{
    width:26px !important; height:26px !important;   /* the primary's icon scales with its label */
  }
  header.nav .nav-right > .nav-phone svg,
  header.nav .nav-right > .nav-cta-portal svg{
    stroke:#00214E !important; fill:none !important;
  }
  header.nav .nav-right > .nav-phone{
    font-weight:700 !important;                   /* the number reads harder */
    font-size:15.5px !important;
  }

  /* ---------- 2. SECONDARY: 10% narrower, lighter type, darker navy ---------- */
  header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal){
    background:#072F5F !important;                /* darker than Book Now — 13.28:1 */
    border-color:#072F5F !important;
    font-size:14.5px !important;
    font-weight:500 !important;                   /* stepped down from 600 */
    padding:0 10px !important;                    /* ~10% narrower */
    box-shadow:0 1px 3px rgba(7,47,95,.14) !important;
  }


  /* ---------- 1. PRIMARY: unmistakable ---------- */
  header.nav .nav-right > .nav-cta{
    background:#1268D8 !important;                /* brighter, still 5.25:1 with white */
    border-color:#1268D8 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-size:26px !important;                    /* dominant — 73% larger than any other button label */
    font-weight:800 !important;                   /* heaviest weight Manrope offers */
    letter-spacing:.01em !important;
    gap:14px !important;
    /* Type up and box in: the label now carries the button rather than
       floating in it. Content fills ~75% of the width. */
    padding:0 30px !important;
    min-width:300px !important;
    box-shadow:0 3px 8px rgba(18,104,216,.30),
               0 14px 32px -10px rgba(18,104,216,.50) !important;  /* strongest in the bar */
  }
  header.nav .nav-right > .nav-cta::after{
    width:26px !important; height:26px !important;   /* arrow scales with the label */
    margin-left:0 !important;
  }

  header.nav .nav-right > .nav-cta:hover{
    /* #1C7AEF measured 4.13:1 with white — below AA. Brightening a blue is
       exactly where contrast quietly fails. #1470E0 is the brightest hover
       that still clears 4.5:1. */
    background:#1470E0 !important;                /* 4.75:1 with white — AA */
    border-color:#1470E0 !important;
    transform:translateY(-2px) !important;
    box-shadow:0 5px 14px rgba(18,104,216,.34),
               0 20px 42px -12px rgba(18,104,216,.58) !important;
  }
  header.nav .nav-right > .nav-cta:hover::after{ transform:translateX(4px) !important; }

  /* tighten utilities first when width runs short; never the primary */
  @media (max-width:1500px){
    header.nav .nav-right{ gap:14px !important; }
    header.nav .nav-right > .nav-cta{ padding:0 28px !important; min-width:296px !important; }
  }
  @media (max-width:1400px){
    header.nav .nav-right{ gap:14px !important; }
    header.nav .nav-right > .nav-phone,
    header.nav .nav-right > .nav-cta-portal{ padding:0 12px !important; font-size:14.5px !important; }
    header.nav .nav-right > .nav-cta-register:not(.nav-cta-portal){ padding:0 9px !important; font-size:14px !important; }
    /* 1366 has 229px of clear space between logo and bar, so the primary
       does NOT need to shrink here — it keeps the full 26px. */
    header.nav .nav-right > .nav-cta{ padding:0 26px !important; min-width:292px !important; font-size:26px !important; }
  }
}

/* ==== tbh-global-refine ==== */

/* ============================================================
   GLOBAL UI + TYPOGRAPHY REFINEMENT
   Loaded last. No redesign — consistency, hierarchy, spacing.
   8px spacing system. Radius scale: 8 / 12 / 14px.
   ============================================================ */

/* ---------- 1. UNDERLINE POLICY --------------------------------------
   Root cause of the "underlines everywhere": a blanket
   `html.hc-mode a { text-decoration: underline }`. In normal mode the
   site is already clean — it is high-contrast mode that underlines nav
   items, card titles and buttons alike.

   The accessibility INTENT is right (don't signal a link by colour
   alone), but it must apply only to genuine inline links inside running
   text. Cards, nav items and buttons are identifiable by their shape,
   so they don't need it.
   -------------------------------------------------------------------- */
html.hc-mode a{ text-decoration:none !important; }

/* real inline links in body copy keep their underline */
html.hc-mode p > a,
html.hc-mode li > a:not([class]),
html.hc-mode dd > a,
html.hc-mode blockquote a,
html.hc-mode .prose a,
html.hc-mode .clin-note a,
html.hc-mode .res-note a{
  text-decoration:underline !important;
  text-underline-offset:3px !important;
  text-decoration-thickness:1px !important;
}
/* never underline a card, nav item, chip, button or heading */
html.hc-mode a[class*="card"],
html.hc-mode a[class*="cta"],
html.hc-mode a[class*="btn"],
html.hc-mode a[class*="tile"],
html.hc-mode a[class*="chip"],
html.hc-mode nav a, html.hc-mode header a, html.hc-mode footer a,
html.hc-mode h1 a, html.hc-mode h2 a, html.hc-mode h3 a, html.hc-mode h4 a,
html.hc-mode .res-card, html.hc-mode .res-card *,
html.hc-mode .clin-card, html.hc-mode .clin-card summary,
html.hc-mode .tbh-acc .tbh-acc-name{
  text-decoration:none !important;
}
/* Headings are never underlined, in any mode.
   Note: hc-mode rules like `html.hc-mode .service-tile-title` (0,2,0)
   out-specify a bare `h3` (0,0,1), so !important alone lost. These are
   scoped to html.hc-mode to win. */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a,
html.hc-mode h1, html.hc-mode h2, html.hc-mode h3,
html.hc-mode h4, html.hc-mode h5, html.hc-mode h6,
html.hc-mode [class*="-title"],
html.hc-mode [class*="-name"],
html.hc-mode [class*="-heading"],
/* tbh-services-refine underlines these with
     html.hc-mode a.service-tile .service-tile-title       (0,3,1)
     html.hc-mode a.featured-card .featured-card-cta span  (0,3,2)
   A lower-specificity selector could not win. Matching their exact shape
   and relying on source order (this sheet loads last) does. */
html.hc-mode a.service-tile .service-tile-title,
html.hc-mode a.featured-card .featured-card-cta span,
html.hc-mode a.service-tile h3.service-tile-title{ text-decoration:none !important; }

/* ---------- 2. LINK HOVER: teal + a 2-3px nudge, not an underline ---- */
main a:not([class]):hover,
.prose a:hover{
  color:#007D8A !important;                /* brand teal, AA on white */
  text-decoration-color:#007D8A !important;
}

/* ---------- 3. RESOURCE CARDS (Doctors' Portal + Leaflets) ----------
   The whole card is already the anchor. Make that obvious: equal
   heights, one padding value, a centred chevron, and a hover that
   lifts rather than underlines. -------------------------------------- */
#res .res-grid{ align-items:stretch !important; }
#res .res-card{
  height:100% !important;
  padding:20px !important;                 /* 8px system */
  border-radius:12px!important;
  align-items:center !important;           /* vertically centres the chevron */
  box-shadow:0 1px 2px rgba(0,33,78,.04) !important;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
#res .res-card > span:first-child{ flex:1 1 auto; min-width:0; }
#res .res-card svg{
  align-self:center !important;
  margin-top:0 !important;
  flex:0 0 auto;
}
#res .res-card b{
  font-weight:700 !important;
  text-decoration:none !important;
  letter-spacing:-.005em;
}
#res .res-card:hover{
  border-color:#CDEAEE !important;
  background:#EDF2F8 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px -14px rgba(0,33,78,.22) !important;
}
#res .res-card:hover b{ color:#007D8A !important; }
#res .res-card:hover svg{ transform:translateX(3px); color:#007D8A !important; }
#res .res-card:focus-visible{ outline:3px solid #0B63CE !important; outline-offset:3px; }
#res h2{ text-decoration:none !important; }

/* ---------- 4. INFORMATION BOXES: more air, better rhythm ---------- */
#clin .clin-warn,
#clin .clin-note,
#clin .clin-mon,
#res .res-note{
  padding:20px 24px !important;            /* was 15-16px */
  line-height:1.7 !important;              /* was 1.6 */
  border-radius:0 12px 12px 0!important;
}
#clin .clin-warn b, #clin .clin-note strong,
#clin .clin-mon strong, #res .res-note strong{
  font-weight:700 !important;
  text-decoration:none !important;
}
#clin .clin-warn{ letter-spacing:.002em; }

/* ---------- 5. SEARCH BAR ---------- */
.top-search{
  padding-left:26px !important;            /* more left padding */
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
.top-search:focus-within{
  border-color:#007D8A !important;
  box-shadow:0 0 0 4px rgba(0,125,138,.22) !important;
}
.top-search input{ line-height:1.2 !important; }
.top-search input::placeholder{ font-size:16px !important; }
.top-search button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;       /* centres the magnifier */
}

/* ---------- 6. MOBILE FLOATING BUTTONS -----------------------------
   Measured bug: .book-fab (x 229-374) and .whatsapp-fab (x 332-374)
   OVERLAPPED — WhatsApp sat on top of the Book Online pill. And
   .book-fab had background:transparent, so its white label was
   rendering over whatever happened to be behind it, which is what made
   the text look blurred. Back-to-top also ran 6px off the bottom.
   -------------------------------------------------------------------- */
@media (max-width:979px){
  .book-fab{
    display:inline-flex !important;
    align-items:center !important;         /* vertically centres icon + label */
    justify-content:center !important;
    gap:9px !important;
    height:52px !important;
    padding:0 20px !important;
    right:76px !important;                 /* clears the 42px WhatsApp FAB + 16px gutter */
    bottom:16px !important;
    background:#0B63CE !important;         /* SOLID — was transparent */
    border:0 !important;
    border-radius:12px!important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-family:'Manrope',sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    line-height:1 !important;
    text-decoration:none !important;
    box-shadow:0 4px 14px -4px rgba(11,99,206,.45),
               0 2px 6px rgba(0,0,0,.10) !important;
    -webkit-font-smoothing:antialiased;    /* crisp, not blurred */
    text-rendering:optimizeLegibility;
    transform:translateZ(0);               /* no sub-pixel blur from compositing */
    z-index:9998 !important;
  }
  .book-fab svg{
    width:19px !important; height:19px !important;
    flex:0 0 auto !important;
    stroke:#FFFFFF !important; fill:none !important;
  }
  /* the arrow, gone — calendar icon + words only */
  .book-fab svg:nth-of-type(2), .book-fab::after{ display:none !important; content:none !important; }
  .book-fab span{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }

  .whatsapp-fab{
    right:16px !important; bottom:16px !important;
    width:52px !important; height:52px !important;
    border-radius:50% !important;
    box-shadow:0 4px 14px -4px rgba(37,211,102,.45) !important;
    z-index:9998 !important;
  }
  /* Back-to-top: HIDDEN on mobile.
     I had moved this to bottom:80px/left:16px to keep it clear of the FAB
     row. That made it newly visible as a blue circle floating over the
     page content — it had previously been tucked at bottom:20px, behind
     Safari's toolbar. On a phone the FAB row is the only floating
     furniture that earns its place, so this goes. Still there on desktop. */
  #toTop, .to-top{ display:none !important; }

  /* Safari's bottom toolbar overlays the viewport, and the FABs were
     sitting underneath it. Lift them clear of the safe area. */
  .book-fab{
    bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .whatsapp-fab{
    bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  footer{ padding-bottom:96px !important; }
}

/* ---------- 7. MOBILE EDGE PADDING -------------------------------
   Measured: .sv-head headings/intro and .gr-section copy were sitting at
   left=0 / right=0 — text flush against both screen edges. Everything in
   the main column gets a consistent 20px gutter (8px system).
   ------------------------------------------------------------------ */
@media (max-width:979px){
  .sv-head, .gr-section, .gr-section > p,
  main > section > h2, main > section > p{
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box !important;
  }
  /* sections that already have an inner wrapper must not double up */
  main > section > .wrap > h2,
  main > section > .wrap > p{ padding-left:0 !important; padding-right:0 !important; }

  /* Measured: .sv-grid was 414px wide inside a 390px screen — 24px of the
     last card was being silently clipped by an ancestor. Let the cards
     flex instead of holding a fixed width. */
  .sv-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
  }
  .sv-card{ min-width:0 !important; width:auto !important; }
  .sv-title{ overflow-wrap:anywhere; }
}

/* ---------- 8. CONSISTENCY: radius + shadow + tap targets ---------- */
@media (max-width:979px){
  main .card, main [class*="-card"], main [class*="tile"]{
    border-radius:12px!important;
  }
  /* Tap targets. Inline links inside sentences are exempt (they are words
     in running text). But block-level links were rendering at 17-18px —
     under the 24x24 AA minimum. Padding lifts them without moving layout. */
  main a:not([class]):not(p a):not(li a){ }
  main .desc > a, main .faq-a > a{
    display:inline-block;
    padding-top:6px !important;
    padding-bottom:6px !important;
    min-height:24px;
  }
  main > a, main section > a, main div > a[class*="btn"], main button{ min-height:44px; }

  /* Carousel dots had an 8px-wide hit area. background-clip:content-box
     keeps the DOT the same size visually while the padding grows the
     touch target to 24px — no visual change, AA target met. */
  .gr-dot{
    padding-left:8px !important;
    padding-right:8px !important;
    background-clip:content-box !important;
    box-sizing:content-box !important;
  }
  /* breadcrumb links were 20px tall */
  .lab-bc a, [class*="-bc"] a, .breadcrumb a{
    display:inline-block;
    padding-top:4px !important;
    padding-bottom:4px !important;
    min-height:24px;
  }
  main .wrap, main .container{ padding-left:20px !important; padding-right:20px !important; }
}

/* ==== tbh-mobile-book ==== */

/* ============================================================
   MOBILE "BOOK ONLINE" — header button + floating button.
   Measured problem: the HEADER button on mobile painted its label in
   cyan rgb(0,169,206) via -webkit-text-fill-color, and its only icon was
   an ARROW (path "M5 12h14M13 5l7 7-7 7") — no calendar. The desktop
   fixes were gated to >=980px so they never reached it.
   ============================================================ */
@media (max-width:979px){

  /* ---- header Book Now ---- */
  header.nav .nav-right > .nav-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(5px, 1.8vw, 9px) !important;
    background:#0B63CE !important;
    border:0 !important;
    border-radius:12px!important;
    padding:0 clamp(8px, 2.4vw, 14px) !important;
    height:46px !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    font-family:'Manrope',sans-serif !important;
    font-size:clamp(13.5px, 3.9vw, 17px) !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    text-decoration:none !important;
    box-shadow:0 2px 8px -2px rgba(11,99,206,.45) !important;
    -webkit-font-smoothing:antialiased;
  }
  /* the label is a span with its own cyan fill — this is what actually paints */
  header.nav .nav-right > .nav-cta span,
  header.nav .nav-right > .nav-cta .book-long,
  header.nav .nav-right > .nav-cta .book-short{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-size:clamp(13.5px, 3.9vw, 17px) !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }
  /* the hamburger must never be clipped */
  header.nav .nav-right > .nav-toggle{
    flex:0 0 auto !important;
    margin-right:0 !important;
  }
  header.nav .nav-inner{
    gap:8px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    flex-wrap:nowrap !important;
  }
  /* very small phones: the site already collapses Book to an icon here,
     which is the right call — leave that behaviour alone. */
  /* FITTING THE ROW. At 390px the header must hold logo + phone + Book +
     hamburger inside 366px. Book alone was 159px, which pushed the
     hamburger 67px off the right edge. The logo is the biggest single
     item (170px) and the easiest to trim without losing anything, so it
     gives up the space rather than the Book label. */
  /* FITTING ALL FOUR CONTROLS.
     At 390px the row has ~378px usable and must hold logo + phone + Book
     + hamburger + gaps. Nothing is removed, so everything scales with the
     viewport instead: the logo and the Book label shrink together as the
     screen narrows, and the gaps/gutters tighten. Verified so the
     hamburger always clears the right edge. */
  header.nav .nav-inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:5px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  header.nav .brand{
    padding:3px 5px !important;
    flex:0 1 auto !important;
    min-width:0 !important;
  }
  header.nav .brand-logo{
    height:clamp(28px, 8.6vw, 42px) !important;
    width:auto !important;
    max-width:none !important;
  }
  header.nav .nav-right{
    gap:5px !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
  header.nav .nav-cta-call{
    width:38px !important; min-width:38px !important;
    flex:0 0 auto !important;
    padding:0 !important;
  }
  header.nav .nav-toggle{
    width:42px !important; min-width:42px !important;
    flex:0 0 auto !important;
    padding:0 !important;
    margin-right:0 !important;
  }

  /* the arrow goes */
  header.nav .nav-right > .nav-cta svg{ display:none !important; }
  header.nav .nav-right > .nav-cta::after{ content:none !important; display:none !important; }
  /* and a calendar takes its place */
  header.nav .nav-right > .nav-cta::before{
    content:'' !important;
    display:block !important;
    width:clamp(15px, 4.2vw, 19px); height:clamp(15px, 4.2vw, 19px); flex:0 0 auto;
    background:#FFFFFF;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 9h18M8 3v4M16 3v4'/><circle cx='12' cy='14' r='1.4' fill='black' stroke='none'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 9h18M8 3v4M16 3v4'/><circle cx='12' cy='14' r='1.4' fill='black' stroke='none'/></svg>") center/contain no-repeat;
  }

  /* ---- floating Book Now ---- */
  .book-fab{
    font-size:17px !important;                 /* bigger */
    font-weight:800 !important;                /* bolder */
    height:54px !important;
    padding:0 22px !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  .book-fab span{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    font-size:17px !important;
    font-weight:800 !important;
  }
  .book-fab svg{ stroke:#FFFFFF !important; fill:none !important; }
  .book-fab svg:nth-of-type(2){ display:none !important; }
  .book-fab::after{ content:none !important; display:none !important; }
}

/* ==== tbh-hero-contrast ==== */

/* ============================================================
   HERO CONTRAST FIX — dark text on dark blue.
   16 pages carry an inline  style="background:var(--brandblue); color:#14181F"
   on .page-hero. The inline background makes the hero dark blue, but the
   text stays near-black (#14181F) — measured 1.5:1, effectively invisible.
   The stylesheet's own .page-hero is a LIGHT ivory hero, so it never
   whitened the text. This forces light text wherever the hero is dark.
   Scoped to [style*="brandblue"] so it only touches the dark heroes.
   ============================================================ */
.page-hero[style*="brandblue"],
.page-hero[style*="brandblue"] .page-hero-text,
.page-hero[style*="brandblue"] h1,
.page-hero[style*="brandblue"] h2,
.page-hero[style*="brandblue"] p,
.page-hero[style*="brandblue"] li,
.page-hero[style*="brandblue"] .page-hero-lede,
.page-hero[style*="brandblue"] .lead{
  color:#EAF2FB !important;                 /* soft white — 13.8:1 on #003087 */
}
/* headline stays crisp white */
.page-hero[style*="brandblue"] h1{ color:#FFFFFF !important; }

/* the italic accent word in the headline: cyan, not near-black.
   #7FE9F2 measures 9.6:1 on #003087. */
.page-hero[style*="brandblue"] .accent-italic,
.page-hero[style*="brandblue"] .page-hero-accent,
.page-hero[style*="brandblue"] em{
  color:#7FE9F2 !important;
}

/* eyebrow / kicker / meta line */
.page-hero[style*="brandblue"] .page-hero-eyebrow,
.page-hero[style*="brandblue"] [class*="eyebrow"],
.page-hero[style*="brandblue"] [class*="kicker"],
.page-hero[style*="brandblue"] [class*="meta"],
/* bare <span> eyebrows with no class, sitting directly in the hero wrap */
.page-hero[style*="brandblue"] .wrap > span,
.page-hero[style*="brandblue"] .page-hero-text > span{
  color:#9FF0F7 !important;                 /* 8.9:1 */
}

/* breadcrumb: all crumbs legible, current page brightest */
.page-hero[style*="brandblue"] .crumb,
.page-hero[style*="brandblue"] nav a,
.page-hero[style*="brandblue"] [class*="crumb"] a,
.page-hero[style*="brandblue"] [class*="breadcrumb"] a{
  color:rgba(234,242,251,.82) !important;
}
.page-hero[style*="brandblue"] [aria-current],
.page-hero[style*="brandblue"] .crumb-current{
  color:#FFFFFF !important;
}

/* separators / slashes */
.page-hero[style*="brandblue"] .crumb-sep,
.page-hero[style*="brandblue"] [class*="crumb"] span{
  color:rgba(234,242,251,.5) !important;
}

/* any plain link in a dark hero (e.g. an unstyled tel: link) */
.page-hero[style*="brandblue"] a:not([class*="btn"]):not([class*="cta"]){
  color:#BFE9FF !important;
}

/* buttons keep their own colours — never override a light-chip button's dark label */
.page-hero[style*="brandblue"] .btn-primary,
.page-hero[style*="brandblue"] .btn-primary *{
  color:#FFFFFF !important;
}
.page-hero[style*="brandblue"] .btn-secondary{
  color:#EAF2FB !important;
  border-color:rgba(234,242,251,.5) !important;
}

/* ==== tbh-breadcrumb-system ==== */

/* ============================================================
   ONE BREADCRUMB SYSTEM  (brief item 5)
   Six different breadcrumb classes existed: .breadcrumb (uppercase,
   heavy tracking, chevron hidden) plus .res-bc/.bt-bc/.clin-bc/.lab-bc
   (title case, chevron). This unifies all of them to one look:
   title case, muted navy-grey, current page stronger navy, compact
   chevron separators, no underline.
   ============================================================ */
.breadcrumb, .res-bc, .bt-bc, .clin-bc, .lab-bc{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px !important;
  font-family:'Manrope',sans-serif !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  text-transform:none !important;         /* was UPPERCASE on 143 pages */
  letter-spacing:0 !important;            /* was ~0.9px tracking */
  line-height:1.4 !important;
  margin:0 0 4px !important;
}
/* links: muted navy-grey, no underline, teal on hover */
.breadcrumb a, .res-bc a, .bt-bc a, .clin-bc a, .lab-bc a{
  color:#5A6B80 !important;
  text-decoration:none !important;
  font-weight:500 !important;
}
.breadcrumb a:hover, .res-bc a:hover, .bt-bc a:hover,
.clin-bc a:hover, .lab-bc a:hover{
  color:#007D8A !important;
}
/* current page: stronger navy, not a link */
.breadcrumb [aria-current], .res-bc [aria-current], .bt-bc [aria-current],
.clin-bc [aria-current], .lab-bc [aria-current],
.breadcrumb > span:last-child, .res-bc > span:last-child,
.bt-bc > span:last-child, .clin-bc > span:last-child, .lab-bc > span:last-child{
  color:#00214E !important;
  font-weight:600 !important;
}
/* chevron separators — compact, muted */
.breadcrumb svg, .res-bc svg, .bt-bc svg, .clin-bc svg, .lab-bc svg{
  width:13px !important; height:13px !important;
  color:#9DB0C6 !important;
  stroke:#9DB0C6 !important;
  flex:0 0 auto !important;
  opacity:1 !important;
}
.breadcrumb span[aria-hidden], .res-bc span[aria-hidden],
.bt-bc span[aria-hidden], .clin-bc span[aria-hidden], .lab-bc span[aria-hidden]{
  color:#9DB0C6 !important;
  font-weight:400 !important;
}

/* DARK-HERO breadcrumbs (about/contact/directions still have a dark hero):
   keep the same shape but light-on-dark so it stays readable. */
.page-hero[style*="brandblue"] .breadcrumb,
.page-hero[style*="brandblue"] .res-bc{
  font-size:13.5px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  gap:7px !important;
}
.page-hero[style*="brandblue"] .breadcrumb a,
.page-hero[style*="brandblue"] .res-bc a{
  color:rgba(234,242,251,.82) !important;
}
.page-hero[style*="brandblue"] .breadcrumb [aria-current],
.page-hero[style*="brandblue"] .breadcrumb > span:last-child{
  color:#FFFFFF !important;
}
.page-hero[style*="brandblue"] .breadcrumb svg{
  color:rgba(234,242,251,.6) !important; stroke:rgba(234,242,251,.6) !important;
}