/* ==== tbh-refine-2 ==== */

/* ============================================================
   MOBILE MENU — subtle refinement pass. No redesign:
   same layout, colours, type, radii. Only proportions.
   ============================================================ */

/* 1. ACTION BUTTONS — taller, not wider */
.tbh-acc .tbh-qa,
.tbh-acc .tbh-qa-pri,
.tbh-acc .tbh-qa-call,
.tbh-acc .tbh-qa-login{
  height:62px !important;          /* 54 -> 62 (+15%) */
  min-height:62px !important;
  padding:10px 14px !important;    /* more vertical padding to tap into */
  gap:6px !important;              /* 4 -> 6: air between icon and label */
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
.tbh-acc .tbh-qa svg{
  width:23px !important;           /* 22 -> 23 (+5%) */
  height:23px !important;
  flex:0 0 23px !important;
}
/* pressed: same subtle scale, plus a whisper of depth */
.tbh-acc .tbh-qa:active{
  transform:scale(.98) !important;
  box-shadow:0 2px 8px rgba(0,33,78,.06) !important;
}
.tbh-acc .tbh-qa + .tbh-qa::before{ top:13px !important; bottom:13px !important; }

/* 2. ACCORDION — denser rows, still >44px */
.tbh-acc .tbh-acc-head{
  min-height:46px !important;      /* 50 -> 46 (-8%), above the 44px floor */
  padding:0 15px !important;
  transition:background-color .16s ease !important;
}
.tbh-acc .tbh-acc-item{ margin:0 0 8px !important; }   /* equal gap, every row */
.tbh-acc .tbh-acc-item::before{
  height:9px !important;                                /* accent line trimmed to match */
  top:calc(50% - 4.5px) !important;                     /* optically centred */
}
.tbh-acc .tbh-acc-head svg{
  align-self:center !important;                          /* chevron dead-centre */
  transition:transform .18s cubic-bezier(.4,0,.2,1), opacity .18s ease !important;
}

/* 3. HIERARCHY — pull the intro up to the control */
.tbh-acc .tbh-acc-actions{ margin-bottom:6px !important; }   /* 15 -> 6 (-9px) */
.tbh-acc .tbh-acc-eyebrow{
  margin:0 0 3px !important;       /* 4 -> 3 */
  letter-spacing:.12em !important; /* .145em -> .12em, slightly tighter */
}
.tbh-acc .tbh-acc-title{ margin:0 0 4px !important; }   /* 5 -> 4 */
.tbh-acc .tbh-acc-sub{ margin:0 0 12px !important; }    /* 14 -> 12 */

/* 5. ALIGNMENT — one left edge for everything */
.tbh-acc .tbh-acc-actions{ margin-left:2px !important; margin-right:2px !important; }
.tbh-acc .tbh-acc-intro{ padding-left:2px !important; padding-right:2px !important; }

@media (prefers-reduced-motion:reduce){
  .tbh-acc .tbh-qa, .tbh-acc .tbh-acc-head, .tbh-acc .tbh-acc-head svg{ transition:none !important; }
  .tbh-acc .tbh-qa:active{ transform:none !important; box-shadow:none !important; }
}

/* ==== tbh-refine-3 ==== */

/* ============================================================
   MOBILE MENU — final proportion pass.
   Pushes the remaining headroom to the top of the requested
   bands. Two items are deliberately held (see notes below)
   because going further would break constraints you set.
   ============================================================ */

/* BUTTONS — to the top of the 15–20% band */
.tbh-acc .tbh-qa,
.tbh-acc .tbh-qa-pri,
.tbh-acc .tbh-qa-call,
.tbh-acc .tbh-qa-login{
  height:65px !important;          /* 54 -> 65 (+20%) */
  min-height:65px !important;
  padding:11px 14px !important;    /* more vertical padding still */
  gap:8px !important;              /* 6 -> 8 (+2px icon-to-text) */
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
.tbh-acc .tbh-qa svg{
  width:24px !important;           /* 23 -> 24 (+5%) */
  height:24px !important;
  flex:0 0 24px !important;
}
.tbh-acc .tbh-qa:active{
  transform:scale(.98) !important;
  box-shadow:0 2px 8px rgba(0,33,78,.07) !important;
}
/* selected segment: identical box, optically centred like the others */
.tbh-acc .tbh-qa-pri{
  height:65px !important; min-height:65px !important;
  padding:11px 14px !important;
  align-items:center !important; justify-content:center !important;
}
.tbh-acc .tbh-qa + .tbh-qa::before{ top:14px !important; bottom:14px !important; }

/* ACCORDION — chevron trimmed, accent line matched, smoother open */
.tbh-acc .tbh-acc-head svg{
  width:15px !important; height:15px !important; flex:0 0 15px !important;   /* 16 -> 15 */
  align-self:center !important;
  transition:transform .18s cubic-bezier(.4,0,.2,1), opacity .18s ease !important;
}
.tbh-acc .tbh-acc-item::before{
  height:8px !important;                      /* 9 -> 8, matches the 46px row */
  top:calc(50% - 4px) !important;
}
.tbh-acc .tbh-acc-head{ transition:background-color .15s ease !important; }
.tbh-acc .tbh-acc-head:active{ background-color:#EDF2F8 !important; }
.tbh-acc .tbh-acc-item{
  margin:0 0 8px !important;                  /* identical spacing, every row */
  transition:box-shadow .18s ease, border-color .18s ease !important;
}
/* smoother expand/collapse */
.tbh-acc .tbh-acc-panel,
.tbh-acc .tbh-acc-body{
  transition:max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease !important;
}

@media (prefers-reduced-motion:reduce){
  .tbh-acc .tbh-qa,.tbh-acc .tbh-acc-head,.tbh-acc .tbh-acc-head svg,
  .tbh-acc .tbh-acc-item,.tbh-acc .tbh-acc-panel,.tbh-acc .tbh-acc-body{ transition:none !important; }
  .tbh-acc .tbh-qa:active{ transform:none !important; box-shadow:none !important; }
}

/* ==== tbh-refine-4 ==== */

/* ============================================================
   HIERARCHY PASS — quick actions up, menu typography down.
   No colour, layout, border, shadow or component changes.
   ============================================================ */

/* 1. QUICK ACTION BAR — more substantial, same width */
.tbh-acc .tbh-qa,
.tbh-acc .tbh-qa-pri,
.tbh-acc .tbh-qa-call,
.tbh-acc .tbh-qa-login{
  height:76px !important;          /* 65 -> 76 (+17%) */
  min-height:76px !important;
  padding:16px 14px !important;    /* vertical 11 -> 16 (+5px) */
  font-size:13.5px !important;     /* 12.5 -> 13.5 (+1px) */
  line-height:1.2 !important;
  gap:8px !important;              /* unchanged */
}
.tbh-acc .tbh-qa svg{
  width:26px !important;           /* 24 -> 26 (+2px) */
  height:26px !important;
  flex:0 0 26px !important;
  stroke-width:1.6 !important;     /* identical across all three, unchanged */
}
.tbh-acc .tbh-qa + .tbh-qa::before{ top:17px !important; bottom:17px !important; }

/* 2. HEADING — steps back so it doesn't compete with the actions */
.tbh-acc .tbh-acc-title{
  font-size:20px !important;       /* 22 -> 20 (-9%) */
}

/* 3. SUBTITLE */
.tbh-acc .tbh-acc-sub{
  font-size:12.5px !important;     /* 13.5 -> 12.5 (-1px) */
  line-height:1.4 !important;      /* 1.45 -> 1.4 */
}

/* The +1px label bump only fits where there's room: on narrower
   phones (<=389px) "Book Consultation" wraps at 13.5px, so those
   widths keep the previous 12.5px. Same design, no wrapping. */
@media (max-width:389px){
  .tbh-acc .tbh-qa,
  .tbh-acc .tbh-qa-pri,
  .tbh-acc .tbh-qa-call,
  .tbh-acc .tbh-qa-login{ font-size:12.5px !important; }
}

/* 4. SERVICE TITLES — lighter, cards unchanged */
.tbh-acc .tbh-acc-head{
  font-size:14.5px !important;     /* 16 -> 14.5 (-9%) */
  min-height:46px !important;      /* card size untouched */
}

/* ==== tbh-no-eyebrow ==== */

/* "Quick Access" eyebrow removed. Without it the heading sat too
   close to the action bar (the 6px gap assumed an eyebrow above),
   so the gap is reopened to 14px to keep the rhythm. */
.tbh-acc .tbh-acc-actions{ margin-bottom:14px !important; }
.tbh-acc .tbh-acc-eyebrow{ display:none !important; }

/* ==== tbh-footer-compact ==== */

/* ============================================================
   MOBILE FOOTER — compaction pass. Same content, same brand,
   same links. Reorganised to remove dead vertical space.
   Biggest wins: 22 legal links were stacked one-per-row (345px);
   long nav lists ran single-column; 104px of outer padding.
   ============================================================ */
@media (max-width:979px){

  /* ---- outer frame ---- */
  footer{ padding:34px 0 18px !important; }
  footer .wrap{ padding:0 18px !important; }

  /* ---- logo + intro ---- */
  footer .footer-logo{ height:75px !important; width:auto !important; }   /* -20% */
  footer .footer-brand{ margin-bottom:10px !important; }
  footer .footer-desc{
    font-size:13.5px !important;
    line-height:1.5 !important;
    margin:0 0 10px !important;
    max-width:52ch !important;
  }
  /* CQC badge sits straight under the paragraph */
  footer .footer-socials{ margin:0 0 4px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:16px !important; }

  /* ---- section headings ---- */
  footer .footer-col-title{
    font-size:11.5px !important;
    margin:0 0 8px !important;      /* 14 -> 8 */
    padding-bottom:6px !important;
    letter-spacing:.12em !important;
  }
  footer .footer-col-title::after{
    width:32px !important;          /* turquoise rule -20% and closer */
    bottom:0 !important;
  }

  /* ---- nav lists: two columns instead of one long stack ---- */
  footer .footer-nav{
    columns:2 !important;
    column-gap:16px !important;
    margin:0 !important;
  }
  footer .footer-nav li{
    margin:0 0 3px !important;      /* 8 -> 3 */
    break-inside:avoid !important;
  }
  footer .footer-nav a{
    padding:6px 0 !important;       /* keeps a comfortable tap area */
    font-size:13.5px !important;
    line-height:1.3 !important;
    display:block !important;
  }
  /* a hairline between groups instead of empty space */
  footer .footer-inner > div + div{
    border-top:1px solid rgba(255,255,255,.07) !important;
    padding-top:14px !important;
    margin-bottom:14px !important;  /* one spacing scale */
  }

  /* ---- contact: compact single-line rows, icons aligned ---- */
  footer .footer-contact-row{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-height:34px !important;     /* 45 -> 34 */
    margin:0 !important;
    font-size:13.5px !important;
    line-height:1.35 !important;
  }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:15px !important; height:15px !important; flex:0 0 15px !important;  /* one optical size */
  }

  /* ---- legal links: the big one. 22 stacked rows -> inline wrap ---- */
  footer .footer-bottom-links{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:4px 10px !important;
    margin:10px 0 0 !important;
  }
  footer .footer-bottom-links a{
    display:inline !important;
    height:auto !important;
    padding:3px 0 !important;
    font-size:11.5px !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
  }

  /* ---- bottom / legal ---- */
  footer .footer-bottom{ padding-top:14px !important; margin-top:14px !important; }
  footer .footer-credit{
    font-size:11.5px !important;
    line-height:1.5 !important;
    display:block !important;
  }
  footer .newsletter-desc{ font-size:12.5px !important; line-height:1.45 !important; margin-bottom:8px !important; }
  footer .newsletter-fineprint{ font-size:10.5px !important; line-height:1.4 !important; }

  /* ---- trust strip ---- */
  .footer-trust{ padding:12px 0 !important; font-size:11.5px !important; }

  /* ---- the real space eater: .footer-inner is a grid with a 28px
       row-gap, stacking on top of the section margins. Collapse it
       and let one spacing scale (14px) do the work. ---- */
  footer .footer-inner{ gap:0 !important; row-gap:0 !important; }
  footer .footer-bottom{ gap:8px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:14px !important; }

  /* legal / registration block: lighter, tighter */
  footer .footer-bottom > div:first-child{ line-height:1.5 !important; }
  footer .cr-year, footer .cr-updated{ font-size:11px !important; line-height:1.45 !important; }
  footer .newsletter-col{ margin-top:0 !important; }
  footer .newsletter-button{ margin-top:6px !important; }

  /* company registration block: same information, visually lighter.
     Was 13.6px on a 20.4px line-height with two trailing empty <br>s. */
  footer .footer-bottom > div:first-child{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  footer .footer-bottom > div:first-child strong{
    font-size:11.5px !important;
    font-weight:600 !important;
  }
  /* collapse the trailing double <br> (32px of nothing) */
  footer .footer-bottom br + br{ display:none !important; }
  footer .footer-credit{ font-size:11px !important; line-height:1.45 !important; margin-top:6px !important; }
  footer .newsletter-col{ font-size:12.5px !important; line-height:1.4 !important; }

  /* intro paragraph: 3 concise lines on mobile (you asked for 2-3) */
  footer .footer-desc{
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  /* one spacing scale, tightened */
  footer{ padding:28px 0 16px !important; }
  footer .footer-inner > div + div{ padding-top:11px !important; margin-bottom:11px !important; }
  footer .footer-bottom{ padding-top:11px !important; margin-top:11px !important; }

  /* ---- keep the floating buttons clear of footer content ---- */
  .footer-trust{ padding:12px 0 52px !important; }
}

/* ==== tbh-footer-v2 ==== */

/* ============================================================
   MOBILE FOOTER v2 — compression + hierarchy.
   Legal detail and 17 policy links moved into collapsed
   disclosures (native <details>: keyboard + VoiceOver work
   with no JS). Nothing deleted.
   ============================================================ */
@media (max-width:979px){

  /* ---- top area ---- */
  footer .footer-desc{
    line-height:1.42 !important;
    margin:0 0 8px !important;
    -webkit-line-clamp:4 !important;   /* new copy is 3-4 lines */
  }
  footer .footer-socials{ margin:0 0 12px !important; }
  footer .footer-inner > div:first-child{ margin-bottom:10px !important; }

  /* ---- headings + turquoise rule ---- */
  footer .footer-col-title{
    font-size:11px !important;
    letter-spacing:.10em !important;
    margin:0 0 6px !important;
    padding-bottom:4px !important;     /* rule 3-4px closer */
  }
  footer .footer-col-title::after{ width:26px !important; }

  /* ---- nav rows: -15% spacing, equal columns ---- */
  footer .footer-nav{ columns:2 !important; column-gap:14px !important; column-fill:balance !important; }
  footer .footer-nav li{ margin:0 0 2px !important; }
  footer .footer-nav a{
    padding:5px 0 !important;
    font-size:13px !important;
    letter-spacing:0 !important;
    line-height:1.3 !important;
  }
  footer .footer-inner > div + div{ padding-top:9px !important; margin-bottom:9px !important; }

  /* ---- contact: one icon column, one text column ---- */
  footer .footer-contact-row{
    display:grid !important;
    grid-template-columns:16px 1fr !important;
    align-items:start !important;
    gap:9px !important;
    min-height:0 !important;
    margin:0 0 6px !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }
  footer .footer-contact-row svg,
  footer .footer-contact-row img{
    width:14px !important; height:14px !important; flex:0 0 14px !important;
    margin-top:2px !important;
  }

  /* ---- legal: primary block + collapsed disclosure ---- */
  footer .footer-bottom{ padding-top:10px !important; margin-top:10px !important; gap:6px !important; }
  footer .legal-primary{
    margin:0 0 6px !important;
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  footer .legal-more,
  footer .links-more{ margin:0 !important; }
  footer .legal-more > summary,
  footer .links-more > summary{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    min-height:36px !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    cursor:pointer !important;
    list-style:none !important;
    opacity:.85 !important;
  }
  footer .legal-more > summary::-webkit-details-marker,
  footer .links-more > summary::-webkit-details-marker{ display:none !important; }
  footer .legal-more > summary::after,
  footer .links-more > summary::after{
    content:"" !important;
    width:6px !important; height:6px !important;
    border-right:1.5px solid currentColor !important;
    border-bottom:1.5px solid currentColor !important;
    transform:rotate(45deg) !important;
    transition:transform .18s ease !important;
    margin-bottom:2px !important;
  }
  footer .legal-more[open] > summary::after,
  footer .links-more[open] > summary::after{ transform:rotate(-135deg) !important; }
  footer .legal-more-body{
    font-size:11px !important;
    line-height:1.5 !important;
    padding-top:6px !important;
    opacity:.9 !important;
  }

  /* ---- policy links: 5 primary, rest behind "More" ---- */
  footer .footer-bottom-links{
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important;
    gap:4px 8px !important;
    margin:6px 0 0 !important;
  }
  footer .footer-bottom-links > a{
    font-size:11.5px !important;
    padding:4px 0 !important;
    white-space:nowrap !important;
  }
  /* subtle separators between the primary links */
  footer .footer-bottom-links > a + a::before{
    content:"·" !important; opacity:.4 !important; margin-right:8px !important;
  }
  footer .links-more{ width:100% !important; }
  footer .links-more-body{
    display:flex !important; flex-wrap:wrap !important;
    gap:4px 8px !important;
    padding-top:6px !important;
  }
  footer .links-more-body a{ font-size:11.5px !important; padding:4px 0 !important; white-space:nowrap !important; }

  /* ---- newsletter ---- */
  footer .newsletter-desc{ font-size:12px !important; line-height:1.4 !important; margin:0 0 8px !important; }
  footer .newsletter-button{
    min-height:44px !important;        /* ~-10% height, still a solid target */
    padding:10px 16px !important;
    font-size:13.5px !important;
    margin:0 0 6px !important;
  }
  footer .newsletter-fineprint{ font-size:10.5px !important; line-height:1.4 !important; }

  /* ---- trust strip: one wrapped row + label ---- */
  .footer-trust{
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; justify-content:center !important;
    gap:6px 14px !important;
    padding:12px 18px calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    font-size:11.5px !important;
  }
  .footer-trust::before{
    content:"Independent profiles and reviews";
    display:block !important; width:100% !important;
    text-align:center !important;
    font-size:10.5px !important;
    letter-spacing:.10em !important;
    text-transform:uppercase !important;
    opacity:.7 !important;
    margin-bottom:2px !important;
  }
  .footer-trust a{ font-size:11.5px !important; padding:5px 0 !important; }
}

/* ==== tbh-footer-v3 ==== */

@media (max-width:979px){
  /* BRAND block was 224px: badge oversized, paragraph running long */
  footer .footer-desc{ -webkit-line-clamp:3 !important; margin:0 0 6px !important; }
  footer .footer-socials img,
  footer .footer-socials a img{ height:48px !important; width:auto !important; }  /* CQC badge */
  footer .footer-socials{ margin:0 0 8px !important; }
  footer .footer-brand{ margin-bottom:8px !important; }
  footer .footer-logo{ height:68px !important; }

  /* CONTACT block was 209px */
  footer .footer-contact-row{ margin:0 0 4px !important; line-height:1.35 !important; }
  footer .footer-contact-row strong{ font-weight:600 !important; }

  /* newsletter */
  footer .newsletter-desc{ margin:0 0 6px !important; }
  footer .newsletter-button{ min-height:42px !important; padding:9px 15px !important; }

  /* one spacing scale, final tighten */
  footer{ padding:22px 0 12px !important; }
  footer .footer-inner > div + div{ padding-top:7px !important; margin-bottom:7px !important; }
  footer .footer-bottom{ padding-top:8px !important; margin-top:8px !important; }

  /* trust strip — keep the safe-area clearance for the floating buttons */
  .footer-trust{ padding:10px 18px calc(46px + env(safe-area-inset-bottom, 0px)) !important; }

  /* FLOATING BUTTONS: shrink footprint and respect safe area near the end */
  .whatsapp-fab, .back-to-top, .mobile-book-fab{
    margin-bottom:env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ==== tbh-footer-fabs ==== */

@media (max-width:979px){
  /* Clearance so the floating controls never sit on footer content.
     Book/WhatsApp FABs are 42px tall at 12px from the bottom; Back-to-Top
     is 44px. 68px + safe-area clears all three. */
  .footer-trust{
    padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* When the footer is in view, collapse "Book Now" to an icon-only
     button: smaller footprint, still fully tappable and still labelled
     for screen readers via aria-label. */
  body.footer-in-view .book-fab{
    width:44px !important;
    min-width:44px !important;
    padding:0 !important;
    justify-content:center !important;
    gap:0 !important;
  }
  body.footer-in-view .book-fab .book-long,
  body.footer-in-view .book-fab .book-short,
  body.footer-in-view .book-fab span{ display:none !important; }
  body.footer-in-view .book-fab svg{ display:block !important; margin:0 !important; }
  .book-fab{ transition:width .18s ease, padding .18s ease !important; }
  /* respect the home indicator */
  .book-fab, .whatsapp-fab, #toTop{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (prefers-reduced-motion:reduce){ .book-fab{ transition:none !important; } }