/* ==== tbh-compact-header ==== */

/* Desktop-only header refinement: slimmer bands + more restrained styling.
   Scoped to >=980px so the mobile app-menu and its own compact rules are untouched. */
@media (min-width:980px){
  /* Greeting / translate bar — slimmer */
  .tr-banner{ padding:7px 16px !important; gap:12px !important; box-shadow:0 3px 12px rgba(0,48,135,.12) !important; }
  .tr-banner-icon{ width:26px !important; height:26px !important; }
  .tr-banner-icon svg{ width:14px !important; height:14px !important; }
  body.tr-banner-active{ padding-top:44px !important; }
  body.tr-banner-active .nav,
  body.tr-banner-active header.nav,
  body.tr-banner-active .header{ top:44px !important; }

  /* Search / utility bar — shorter and less shouty */
  .top-bar{ padding:9px 0 !important; }
  .top-bar-inner{ gap:20px !important; }
  .top-search{ max-width:560px !important; border-width:1.5px !important;
               box-shadow:0 0 0 3px rgba(0,169,206,.12) !important;
               padding:4px 5px 4px 24px !important; }
  .top-search input{ padding:9px 8px 9px 0 !important; font-size:0.95rem !important; }
  .top-search button{ width:40px !important; height:40px !important; }

  /* Red emergency strip — slimmer, still prominent */
  #liveBar, .live-bar, .announce-bar.live-bar{ padding:6px 12px !important; }
  #liveBar .live-bar-inner, .live-bar .live-bar-inner{ min-height:0 !important; }
  #liveBar .emerg, .live-bar .emerg{ padding:6px 14px !important; font-size:0.82rem !important; letter-spacing:0.05em !important; }

  /* Logo + action row — tighter, more refined */
  header.nav{ border-top-width:2px !important; border-bottom-width:1px !important; }
  header.nav .nav-inner{ padding:7px 0 !important; }
  header.nav .brand-logo{ width:220px !important; max-width:220px !important; height:55px !important; object-fit:contain !important; object-position:left center !important; overflow:hidden !important; }
  header.nav .nav-right{ gap:8px !important; }
  header.nav .nav-phone,
  header.nav .nav-cta-call,
  header.nav .nav-cta-register,
  header.nav .nav-cta{ padding:6px 14px !important; font-size:0.83rem !important; border-radius:8px!important; min-height:0 !important; height:auto !important; }
  header.nav .nav-phone svg,
  header.nav .nav-cta-call svg,
  header.nav .nav-cta-register svg,
  header.nav .nav-cta svg{ width:15px !important; height:15px !important; }

  /* Service menu (the two wrapped rows) — tighter with refined caps */
  .nav-primary{ gap:2px !important; }
  .nav-primary-btn{ padding:10px 15px !important; font-size:0.83rem !important; letter-spacing:0.07em !important; }
  .nav-primary-btn::after{ bottom:5px !important; left:15px !important; right:15px !important; height:1.5px !important; }
}

/* ============================================================
   MOBILE / PHONE header slimming (<=979px) — less bulky, refined
   ============================================================ */
@media (max-width:979px){
  /* Greeting / translate bar */
  .tr-banner{ padding:6px 12px !important; gap:9px !important; box-shadow:0 3px 12px rgba(0,48,135,.12) !important; }
  .tr-banner-icon{ width:22px !important; height:22px !important; }
  .tr-banner-icon svg{ width:12px !important; height:12px !important; }
  .tr-banner-text{ gap:1px 8px !important; line-height:1.2 !important; }
  .tr-banner-greeting{ font-size:0.54rem !important; }
  .tr-banner-title{ font-size:0.76rem !important; line-height:1.2 !important; }

  /* Utility bar: accessibility + language */
  .top-bar{ padding:6px 0 !important; }
  .top-bar-inner{ gap:10px !important; }
  .a11y-controls{ padding:3px !important; gap:3px !important; }
  .a11y-controls > *, .a11y-btn{ width:28px !important; height:28px !important; padding:0 !important; font-size:0.72rem !important; }
  .a11y-btn-mid{ font-size:0.82rem !important; }
  .a11y-btn svg, .a11y-btn-contrast svg{ width:13px !important; height:13px !important; }
  .lang-trigger{ padding:6px 11px !important; font-size:0.82rem !important; }

  /* Red emergency strip */
  #liveBar, .live-bar, .announce-bar.live-bar{ padding:6px 10px !important; }
  #liveBar .emerg, .live-bar .emerg{ font-size:0.72rem !important; letter-spacing:0.03em !important; padding:4px 8px !important; line-height:1.3 !important; }

  /* Logo + action row */
  header.nav{ border-top-width:2px !important; }
  header.nav .nav-inner{ padding:9px 14px !important; gap:12px !important; }
  header.nav .nav-right{ gap:8px !important; }
  header.nav .nav-phone,
  header.nav .nav-cta-call,
  header.nav .nav-cta{ padding:9px 16px !important; font-size:0.88rem !important; }
  header.nav .nav-cta svg,
  header.nav .nav-phone svg,
  header.nav .nav-cta-call svg{ width:16px !important; height:16px !important; }
  header.nav .nav-toggle, #navToggle{ width:46px !important; height:46px !important; min-height:46px !important; border-radius:12px!important; }
  header.nav .nav-phone,
  header.nav .nav-cta-call,
  header.nav .nav-cta{ height:auto !important; min-height:46px !important; border-radius:12px!important; }
  header.nav .brand-logo{ width:190px !important; max-width:190px !important; height:48px !important; object-fit:contain !important; object-position:left center !important; overflow:hidden !important; }
  /* fixed-banner offset (tablet: greeting shown, usually one line) */
  body.tr-banner-active{ padding-top:46px !important; }
  body.tr-banner-active .nav,
  body.tr-banner-active header.nav,
  body.tr-banner-active .header{ top:46px !important; }
}
@media (max-width:600px){
  /* phones: drop the decorative cycling greeting so the notice is one compact line */
  .tr-banner-greeting{ display:none !important; }
  body.tr-banner-active{ padding-top:44px !important; }
  body.tr-banner-active .nav,
  body.tr-banner-active header.nav,
  body.tr-banner-active .header{ top:44px !important; }
}
@media (max-width:480px){
  header.nav .brand-logo{ width:170px !important; max-width:170px !important; height:44px !important; object-fit:contain !important; object-position:left center !important; overflow:hidden !important; }
  header.nav .nav-inner{ padding:8px 12px !important; gap:10px !important; }
  header.nav .nav-phone,
  header.nav .nav-cta-call,
  header.nav .nav-cta{ padding:9px 14px !important; }
  .tr-banner-title{ font-size:0.72rem !important; }
  #liveBar .emerg, .live-bar .emerg{ font-size:0.7rem !important; }
}
/* Hamburger: slightly bolder bars so it reads as a deliberate control */
@media (max-width:979px){
  header.nav .nav-toggle span, #navToggle span{ width:22px !important; height:2.5px !important; border-radius:8px!important; }
}

/* ============================================================
   MOBILE HERO — tighten the dead vertical space
   ============================================================ */
@media (max-width:767px){
  .hero{ padding:26px 0 30px !important; }
  .hero .eyebrow{ margin-top:0 !important; }
  .hero h1{ margin-top:14px !important; }
  .hero .hero-lede{ margin-top:18px !important; }
  .hero-inner{ gap:26px !important; }
  .hero .hero-meta{ margin-top:22px !important; }
  .hero-actions{ margin-top:22px !important; }
}

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

/* ============================================================
   TBH POLISH LAYER — from a measured audit of 153 pages at
   390 / 768 / 1440 / 1920px. Only addresses issues actually
   observed. No changes to cards, grids, colours or content.
   ============================================================ */

/* 1) READING LINE LENGTH
   Audit: 131 pages ran prose at 90-120+ characters per line on
   large screens (measured at 1920px), well past the comfortable
   60-75ch range. Scoped to the two long-form prose containers
   only, so cards/grids/heroes are untouched. */
.pl-body-inner > p, .pl-body-inner > ul, .pl-body-inner > ol,
.cn-body-inner > p, .cn-body-inner > ul, .cn-body-inner > ol {
  max-width: 72ch;
}

/* 2) MOBILE TAP TARGETS
   Audit: footer group links and language options rendered under
   40px tall at 390px — below the accessible minimum. Raised on
   touch widths only; desktop layout unchanged. */
@media (max-width: 979px) {
  .footer-subgroup a, .footer-links a, .lang-opt {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* 3) LAYOUT SHIFT
   Paired with explicit width/height now set on 132 <img> tags:
   keeps them fluid while the reserved space stops the reflow. */
img[width][height] { height: auto; max-width: 100%; }

/* 5) COLOUR CONTRAST (WCAG AA)
   Audit: the small uppercase "KEY TAKEAWAYS" label used the bright
   cyan (#00A9CE) on a cream card — a 1.93:1 ratio against the 4.5:1
   required for text this size. Deepened to a darker shade of the same
   brand cyan (5.55:1). Same hue family, now legible. */
.art-takeaways-eyebrow { color: #007D8A !important; }

/* 4) HORIZONTAL OVERFLOW
   Audit: community-support.html pushed 75px of horizontal scroll at
   390px — a decorative, absolutely-positioned 540px element spilling
   off-screen. Clipped rather than resized, so the visual is unchanged
   on desktop where there is room for it. */
@media (max-width: 700px) {
  .tbh-herospot { max-width: 100vw; overflow: hidden; }
  body { overflow-x: hidden; }
}

/* ==== tbh-seg-css ==== */

/* ============================================================
   MOBILE MENU — production refinement
   Segmented control + directory, one coherent radius/shadow
   system. Everything sits INTO the page; nothing floats.
   ============================================================ */

/* ---------- Segmented quick-action control ---------- */
.tbh-acc .tbh-acc-actions{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  grid-template-areas:"call book" "patient doctors" !important;
  gap:0 !important;
  margin:0 2px 20px !important;              /* flush with the cards below */
  padding:0 !important;
  background:#FFFFFF !important;
  border:1px solid #EEF2F6 !important;
  border-radius:18px!important;
  box-shadow:0 1px 2px rgba(0,33,78,.017) !important;   /* -30% opacity */
  overflow:hidden !important;
}
.tbh-acc .tbh-qa,
.tbh-acc .tbh-qa-pri,
.tbh-acc .tbh-qa-call,
.tbh-acc .tbh-qa-login{
  position:relative !important;
  grid-area:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;                        /* tighter icon → label */
  height:50px !important;                    /* -6% */
  min-height:50px !important;
  padding:0 14px !important;                 /* slightly roomier */
  border:0 !important; border-radius:0!important;
  background:#FFFFFF !important; background-image:none !important;
  color:#00214E !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Manrope,sans-serif !important;
  font-weight:600 !important;
  font-size:11.5px !important;
  letter-spacing:-.008em !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-shadow:none !important; transform:none !important;
  transition:transform .16s ease, background-color .16s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}
.tbh-acc .tbh-qa + .tbh-qa::before{
  content:"" !important; position:absolute !important;
  left:0 !important; top:9px !important; bottom:9px !important;
  width:1px !important; background:#EEF2F6 !important;
}
/* thin SF-Symbols-weight icons, optically centred */
.tbh-acc .tbh-qa svg{
  width:21px !important; height:21px !important; flex:0 0 21px !important;
  stroke-width:1.45 !important;
  color:#00214E !important; opacity:1 !important; display:block !important;
}
/* active segment — whisper-quiet tint */
.tbh-acc .tbh-qa-pri{
  background:#EDF2F8 !important;
  color:#153E90 !important;
  font-weight:600 !important;
}
.tbh-acc .tbh-qa-pri svg{ color:#153E90 !important; }
/* press feedback only */
.tbh-acc .tbh-qa:active{ transform:scale(.98) !important; background-color:#EDF2F8 !important; }
.tbh-acc .tbh-qa-pri:active{ background-color:#EDF2F8 !important; }
.tbh-acc .tbh-qa:hover{ transform:none !important; box-shadow:none !important; }
.tbh-acc .tbh-qa:focus-visible{ outline:2px solid #005EB5 !important; outline-offset:-2px !important; }
/* label swap: full names by default, short names when space is tight */
.tbh-acc .qa-short{ display:none !important; }
.tbh-acc .qa-long{ display:inline !important; }
@media (max-width:359px){
  .tbh-acc .qa-long{ display:none !important; }
  .tbh-acc .qa-short{ display:inline !important; }
  .tbh-acc .tbh-qa{ padding:0 10px !important; }
}

/* ---------- Editorial intro ---------- */
.tbh-acc .tbh-acc-intro{ padding:0 2px 6px !important; }
.tbh-acc .tbh-acc-eyebrow{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Manrope,sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
  color:#5A6B82 !important;
  margin:0 0 7px !important;
  line-height:1 !important;
}
.tbh-acc .tbh-acc-title{
  font-size:22px !important;
  font-weight:600 !important;
  letter-spacing:-.018em !important;
  line-height:1.18 !important;
  margin:0 0 5px !important;
}
.tbh-acc .tbh-acc-sub{
  font-size:13.5px !important;
  color:#5E6A79 !important;            /* AA-compliant (5.27:1) */
  opacity:.9 !important;
  line-height:1.5 !important;
  margin:0 0 14px !important;
}

/* ---------- Accordion cards ---------- */
.tbh-acc .tbh-acc-item{
  border-radius:18px!important;              /* same family as the control */
  border:1px solid #EEF2F6 !important;
  box-shadow:0 1px 2px rgba(0,33,78,.017) !important;
  margin:0 0 8px !important;
  transition:box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
  transform:none !important;
}
.tbh-acc .tbh-acc-item.open{
  box-shadow:0 2px 6px -3px rgba(0,48,135,.10) !important;
  border-color:#E2EAF3 !important;
  transform:none !important;                  /* no lift — nothing floats */
}
.tbh-acc .tbh-acc-head{
  min-height:52px !important;                 /* slimmer, still >44px target */
  padding:0 16px !important;
  gap:12px !important;
  font-weight:600 !important;
  letter-spacing:-.008em !important;
  transition:background-color .16s ease !important;
}
.tbh-acc .tbh-acc-head:active{ background-color:#EDF2F8 !important; }
.tbh-acc .tbh-acc-head:focus-visible{ outline:2px solid #005EB5 !important; outline-offset:-2px !important; }
.tbh-acc .tbh-acc-head svg{
  width:16px !important; height:16px !important; flex:0 0 16px !important;
  stroke-width:1.6 !important; opacity:.5 !important;
  transition:transform .18s ease, opacity .18s ease !important;
}
.tbh-acc .tbh-acc-head[aria-expanded="true"] svg{ opacity:.85 !important; }
@media (prefers-reduced-motion:reduce){
  .tbh-acc .tbh-qa, .tbh-acc .tbh-acc-item, .tbh-acc .tbh-acc-head, .tbh-acc .tbh-acc-head svg{ transition:none !important; }
  .tbh-acc .tbh-qa:active{ transform:none !important; }
}
body.nav-menu-open header.nav .nav-inner{ padding-top:6px !important; padding-bottom:6px !important; }

/* ------------------------------------------------------------
   FINAL CRAFTSMANSHIP PASS — audit-driven, no layout changes.
   Fixes only what the audit found: two competing greys, an
   off-scale 150ms transition, chevron weight/rotation, and a
   4% trim on the accordion rows.
   ------------------------------------------------------------ */

/* 6) COLOUR TOKENS — the menu had two greys (#5A6B82 + #5E6A79).
      Collapse to one muted token (AA-safe at 5.27:1). */
.tbh-acc .tbh-acc-eyebrow{
  color:#5E6A79 !important;
  margin:0 0 4px !important;          /* 2) tightened to the heading by 3px */
  letter-spacing:.145em !important;
  text-indent:-.02em !important;      /* optical: tracked caps sit 1px right */
}
.tbh-acc .tbh-acc-sub{
  color:#5E6A79 !important;
  line-height:1.45 !important;        /* 2) very slightly tighter */
  opacity:.92 !important;
}
.tbh-acc .tbh-acc-title{
  font-weight:600 !important;          /* matches the control's 600 */
  letter-spacing:-.019em !important;   /* 2) kerning nudge */
}

/* 3) ACCORDION — 4% shorter, tighter internal padding */
.tbh-acc .tbh-acc-head{
  min-height:50px !important;          /* 52 → 50 (-4%), still >44px target */
  padding:0 15px !important;
}
.tbh-acc .tbh-acc-head svg{
  opacity:.6 !important;               /* 3) slightly more visible, still elegant */
  transition:transform .18s ease, opacity .18s ease !important;
  transform-origin:50% 50% !important;
}
.tbh-acc .tbh-acc-head[aria-expanded="true"] svg{
  transform:rotate(180deg) !important; /* 3) smooth 180ms rotate */
  opacity:.9 !important;
}

/* 9) ANIMATION — one curve, one timing band (160–180ms).
      .tbh-acc-link ran at 150ms, off the scale. */
.tbh-acc .tbh-acc-link{ transition:background-color .16s ease, color .16s ease !important; }

/* 4) Keep the active tint stable when Android/Chrome applies
      auto-dark: opt the sheet into a light colour scheme. */
.tbh-acc, .tbh-acc .tbh-acc-actions{ color-scheme:light !important; }

/* ------------------------------------------------------------
   BRAND ACCENT PASS — ~90% neutral, ~10% accent.
   Uses only the existing --tbh-cyan token (#007D8A), the same
   one on the accordion accent bars. No new colours, no gradients.
   ------------------------------------------------------------ */

/* Icons: turquoise for the two supporting actions, navy for the
   primary. Stroke lifted 1.45 -> 1.6 on ALL THREE so the lighter
   turquoise carries the same optical weight as the navy. */
.tbh-acc .tbh-qa svg{ stroke-width:1.6 !important; }
.tbh-acc .tbh-qa-call svg,
.tbh-acc .tbh-qa-login svg{ color:var(--tbh-cyan) !important; }
/* one navy token throughout: --tbh-navy (#00214E).
   The active segment is distinguished by tint + inset edge +
   the turquoise rule — it does not need a second navy. */
.tbh-acc .tbh-qa-pri svg{ color:var(--tbh-navy) !important; }
.tbh-acc .tbh-qa,
.tbh-acc .tbh-qa-pri,
.tbh-acc .tbh-qa span,
.tbh-acc .tbh-qa-pri span{ color:var(--tbh-navy) !important; }

/* Active segment: tint deepened ~6%, plus a 1px inset navy edge
   at 10% for definition. Still no solid block. */
.tbh-acc .tbh-qa-pri{
  background:#EDF2F8 !important;   /* +2.5%: restores emphasis now the rule is gone */
  box-shadow:inset 0 0 0 1px rgba(0,33,78,.10) !important;
}

/* No accent indicator on the active segment. Turquoise has ONE
   semantic job in this interface: brand accent for the supporting
   actions. The active state is carried by tint + inset edge +
   centre position alone. */
.tbh-acc .tbh-qa-pri::after{ content:none !important; }

/* Press: keep the existing motion, add a whisper of turquoise. */
.tbh-acc .tbh-qa-call:active,
.tbh-acc .tbh-qa-login:active{ background-color:rgba(0,125,138,.05) !important; }
.tbh-acc .tbh-qa-pri:active{ background-color:#EDF2F8 !important; }

/* ------------------------------------------------------------
   SCALE PASS — the control measured the same height as the cards
   (52px) but read smaller because its labels are 11.5px against
   the cards' 16px. Scaled up so it sits in the same optical
   system. Width, radius, colours and internal spacing unchanged.
   ------------------------------------------------------------ */
.tbh-acc .tbh-qa,
.tbh-acc .tbh-qa-pri,
.tbh-acc .tbh-qa-call,
.tbh-acc .tbh-qa-login{
  height:54px !important;          /* 50 -> 54 (+8%) */
  min-height:54px !important;
  gap:4px !important;              /* +2px internal vertical breathing */
  font-size:12.5px !important;     /* 11.5 -> 12.5 (+1px) */
  line-height:1.15 !important;     /* optical lift */
}
.tbh-acc .tbh-qa svg{
  width:22px !important;           /* 21 -> 22 (+1px) */
  height:22px !important;
  flex:0 0 22px !important;
  stroke-width:1.6 !important;     /* unchanged, identical across all three */
}
.tbh-acc .tbh-qa + .tbh-qa::before{ top:10px !important; bottom:10px !important; }

/* pull the eyebrow up so the control and the content below feel connected */
.tbh-acc .tbh-acc-actions{ margin-bottom:15px !important; }   /* 20 -> 15 (-5px) */

/* ==== tbh-ins-v2 ==== */

/* ============================================================
   PRIVATE MEDICAL INSURANCE — logo panels, not placeholder boxes
   Fixes a real regression: the global img[width][height]{height:auto}
   rule was overriding the wall's sizing, so logos rendered at their
   full 120px intrinsic height and the cards ballooned.
   ============================================================ */
.ins-wall{
  list-style:none !important; margin:0 auto !important; padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;   /* mobile: 2 per row */
  gap:10px !important;
  max-width:980px !important;
}
.ins-wall li{
  min-width:0 !important; min-height:0 !important;
  height:68px !important;                            /* was ~150px: -55% */
  padding:10px 14px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:#FFFFFF !important;
  border:1px solid #EEF2F6 !important;
  border-radius:18px!important;
  box-shadow:0 1px 2px rgba(0,33,78,.025) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.ins-wall li:hover,.ins-wall li:active{
  transform:translateY(-2px) !important;
  box-shadow:0 6px 16px rgba(0,33,78,.07) !important;
}
/* logo: ~50% of card height, natural proportions, brand colours restored */
.ins-wall li img,
.ins-wall img[width][height]{
  height:34px !important;                            /* 50% of the 68px card */
  width:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  filter:none !important;                            /* was grayscale(100%) */
  opacity:1 !important;                              /* was .62 */
  image-rendering:auto !important;
}
/* header */
.ins-eyebrow{ letter-spacing:.20em !important; }
.ins-head{
  font-size:clamp(21px,2.2vw,29px) !important;
  line-height:1.28 !important;
  letter-spacing:-.015em !important;
  margin:0 !important;
}
.ins-sub{
  margin:12px auto 0 !important;
  max-width:44ch !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
  color:#5E6A79 !important;
}
/* trust line */
.ins-trust{
  margin:20px auto 0 !important;
  max-width:56ch !important;
  text-align:center !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
  color:#5E6A79 !important;
  opacity:.9 !important;
}
@media (min-width:600px){ .ins-wall{ grid-template-columns:repeat(3,1fr) !important; } }
@media (min-width:900px){
  .ins-wall{ grid-template-columns:repeat(4,1fr) !important; gap:12px !important; }
  .ins-wall li{ height:76px !important; }
  .ins-wall li img,.ins-wall img[width][height]{ height:38px !important; }
}
/* 8 insurers: 4x2 is balanced. 5-6 per row would leave an orphan
   row of 3 or 2, which reads as a mistake rather than a grid. */
@media (min-width:1100px){ .ins-wall{ grid-template-columns:repeat(4,1fr) !important; } }
@media (prefers-reduced-motion:reduce){
  .ins-wall li{ transition:none !important; }
  .ins-wall li:hover,.ins-wall li:active{ transform:none !important; }
}

/* ==== tbh-overscroll ==== */

/* ============================================================
   iOS OVERSCROLL ("rubber band") COLOUR
   <html> had no background, so Safari filled the overscroll
   gutter — and the status-bar area — by sampling the page, and
   latched onto the red emergency bar. Giving the canvas an
   explicit colour fixes it: the gutter now matches the page.
   ============================================================ */
html{ background-color:#F6F6F4 !important; }
/* keep the top gutter matching the header band rather than the
   body, so a downward pull reveals the site's own light blue */
@supports (padding:env(safe-area-inset-top)){
  html{ background-color:#F6F6F4 !important; }
}

/* ==== tbh-emerg-fix ==== */

/* ============================================================
   iOS OVERSCROLL — red gutter fix
   The emergency bar was position:sticky; top:0; z-index:9990.
   Verified it never actually pins (it scrolls away like any
   normal block), so the sticky served no purpose — but on iOS
   a sticky element at top:0 smears its background into the
   rubber-band gutter, which is why pulling down flooded the
   screen red. Making it static removes the smear and changes
   nothing about how the bar looks or behaves.
   ============================================================ */
#liveBar, .live-bar, .announce-bar.live-bar{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
}

/* ==== tbh-lang-more ==== */

.lang-more{ border-top:1px solid #EEF2F6; margin-top:10px; padding-top:10px; }
.lang-more-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; min-height:44px; padding:0 12px;
  background:#EDF2F8; border:1px solid #6E8CB0; border-radius:12px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Manrope,sans-serif;
  font-weight:600; font-size:13px; color:#00214E; cursor:pointer;
  transition:background-color .16s ease;
}
.lang-more-btn:hover,.lang-more-btn:active{ background:#EDF2F8; }
.lang-more-btn:focus-visible{ outline:2px solid #005EB5; outline-offset:2px; }
.lang-more-btn svg{ width:16px; height:16px; transition:transform .18s ease; }
.lang-more-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
#gtWrap{ margin-top:10px; }
#gtWrap[hidden]{ display:none; }
/* style GTranslate's own select to match the picker */
#gtWrap select, #gtWrap .gt_selector{
  width:100% !important; min-height:44px !important; padding:0 12px !important;
  border:1px solid #6E8CB0 !important; border-radius:12px!important;
  background:#FFFFFF !important; color:#00214E !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Manrope,sans-serif !important;
  font-size:14px !important; font-weight:600 !important;
}
.lang-more-note{
  margin:8px 2px 0; font-size:11px; line-height:1.4;
  color:#5E6A79; opacity:.9;
}

/* ==== quick-action strip: call + book above, both portals paired below ====
   Matched to .tbh-acc .tbh-acc-actions specificity so the named grid holds.
   Checkerboard fill so the four tiles read as distinct quadrants rather than
   one block. Existing tokens only: #FFFFFF and #EDF2F8. */
.tbh-acc .tbh-qa-call{grid-area:call !important;background:#FFFFFF !important}
.tbh-acc .tbh-qa-pri{grid-area:book !important;background:#EDF2F8 !important}
.tbh-acc .tbh-qa-login{grid-area:patient !important;background:#EDF2F8 !important}
.tbh-acc .tbh-qa-doc{grid-area:doctors !important;background:#FFFFFF !important}

/* dividers — visible against both fills */
.tbh-acc .tbh-qa-pri{border-left:1px solid #C9D8EA !important}
.tbh-acc .tbh-qa-login,.tbh-acc .tbh-qa-doc{border-top:1px solid #C9D8EA !important}
.tbh-acc .tbh-qa-doc{border-left:1px solid #C9D8EA !important}

/* the two portals share weight and type, secondary to call and book */
.tbh-acc .tbh-qa-login,.tbh-acc .tbh-qa-doc{
  color:#00214E !important;min-height:62px !important;font-size:.78rem !important}
.tbh-acc .tbh-qa-login .tbh-qa-ic,.tbh-acc .tbh-qa-doc .tbh-qa-ic{opacity:.9}
.tbh-acc .tbh-qa-call:hover,.tbh-acc .tbh-qa-call:active,
.tbh-acc .tbh-qa-doc:hover,.tbh-acc .tbh-qa-doc:active{background:#F4F7FB !important}
.tbh-acc .tbh-qa-pri:hover,.tbh-acc .tbh-qa-pri:active,
.tbh-acc .tbh-qa-login:hover,.tbh-acc .tbh-qa-login:active{background:#E3EAF4 !important}
.tbh-acc .tbh-qa-login:focus-visible,.tbh-acc .tbh-qa-doc:focus-visible,
.tbh-acc .tbh-qa-call:focus-visible,.tbh-acc .tbh-qa-pri:focus-visible{
  outline:3px solid #005EB5 !important;outline-offset:-3px}
