/* ============================================================
   global.css — Pass-1 site-wide overrides (Hostinger-staging ready)
   Loaded AFTER main.css and any inline <style> so it wins
   specificity battles. Scope: navbar, footer, section padding,
   full-width rule, mobile menu, booking modal, FAQ safeguards.
   ============================================================ */

/* ---------- 1. NAVBAR — even spacing, larger logo, balanced layout ---------- */
.main-header .container{
  max-width:1440px;
  padding-left:36px !important;
  padding-right:36px !important;
  height:84px !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center;
  gap:24px;
  justify-content:initial !important;
}
.main-header .logo-text,
.main-header a.logo-text{
  display:inline-flex !important;
  align-items:center;
  flex:0 0 auto !important;
  min-width:fit-content;
  height:auto;
  visibility:visible !important;
  opacity:1 !important;
  grid-column:1;
}
.logo-text img.logo-img,
.main-header .logo-text img,
header.main-header img.logo-img{
  height:56px !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.main-header .main-nav{
  grid-column:2;
  justify-self:center !important;
  margin:0 !important;
  gap:4px !important;
}
.main-nav .nav-item{ height:auto; }
.main-nav .nav-link{
  padding:10px 16px !important;
  font-size:14px !important;
  font-weight:500;
  letter-spacing:0.1px;
}
.main-header .header-right{
  grid-column:3;
  justify-self:end !important;
  gap:10px !important;
  margin-left:0 !important;
}
.main-header .header-right .icon-btn{ width:42px; height:42px; }
.main-header .header-right .cta-btn{
  padding:12px 22px !important;
  font-size:13.5px !important;
}
/* Fix the broken </button> -> </a> case where markup ended up nested */
.main-nav .nav-item > a.nav-link + .chevron{ pointer-events:none; }

/* ---------- 2. GLOBAL SECTION PADDING — 36px L/R on desktop only;
   keep pages' own max-width so layouts don't shift. ---------- */
section{ width:100%; }
section > .container,
.content-section > .container{
  padding-left:36px;
  padding-right:36px;
}
/* Narrow-desktop band: 1100-1280px — keep desktop nav visible but tighten everything */
@media(min-width:1101px) and (max-width:1280px){
  .main-header .container{
    padding-left:24px !important;
    padding-right:24px !important;
    height:78px !important;
    gap:14px;
  }
  .logo-text img.logo-img{ height:48px !important; }
  .main-nav .nav-link{
    padding:8px 10px !important;
    font-size:13px !important;
  }
  .main-nav{ gap:0 !important; }
  .main-header .header-right{ gap:6px !important; }
  .main-header .header-right .icon-btn{ width:38px; height:38px; }
  .main-header .header-right .cta-btn{
    padding:10px 16px !important;
    font-size:12.5px !important;
  }
  /* Drop the email icon button at this width to save space */
  .main-header .header-right .icon-btn[href^="mailto"]{ display:none; }
}
@media(max-width:1024px){
  section > .container,
  .content-section > .container{ padding-left:24px; padding-right:24px; }
  .main-header .container{ padding-left:24px !important; padding-right:24px !important; height:72px !important; }
  .logo-text img.logo-img{ height:46px !important; }
}
@media(max-width:768px){
  section > .container,
  .content-section > .container{ padding-left:18px; padding-right:18px; }
  .main-header .container{ padding-left:18px !important; padding-right:18px !important; height:64px !important; }
  .logo-text img.logo-img{ height:40px !important; }
}

/* ---------- 3. MOBILE NAV DRAWER ---------- */
/* These elements are JS-injected into every <nav class="main-nav"> for the
   mobile drawer. They must be hidden by default at ALL widths — the mobile
   media query below re-shows them when body.nav-open. Without this rule
   they show inline on desktop and break the header layout. */
.main-nav .nav-close,
.main-nav .nav-book-cta{ display:none !important; }

@media(max-width:1100px){
  /* IMPORTANT: .main-header has position:sticky + z-index:1000 (chrome.css
     line 33 / physio.css line 40), which creates its own stacking context.
     Because .main-nav lives inside .main-header, the drawer's z-index is
     bounded by the parent's 1000 — meaning the body::after backdrop at
     z-index:1099 paints ON TOP of the drawer (the user sees a navy haze
     covering the menu).
     When the drawer is open, raise .main-header above the backdrop so the
     drawer slides over a properly-stacked surface. Also kill the header's
     backdrop-filter while open (it blurs the page behind, which on Chromium
     leaks into the drawer area too). */
  body.nav-open .main-header{
    z-index:1102 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .main-nav{
    /* Default: drawer is OFF — completely hidden. Triggers nav-open swaps to flex. */
    display:none !important;
  }
  body.nav-open .main-nav{
    display:flex !important;
    position:fixed !important;
    top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
    width:min(360px,86vw) !important;
    height:100vh !important;       /* beat chrome.css/physio.css' height:100% which clips it */
    max-height:100vh !important;
    background-color:#FFFFFF !important;  /* solid white — both `background` and `background-color` to beat any shorthand override */
    background-image:none !important;
    background:#FFFFFF !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    flex-direction:column;
    align-items:stretch;
    padding:60px 22px 32px;
    gap:2px !important;
    box-shadow:-12px 0 40px rgba(17,14,69,0.18);
    z-index:1101;                          /* above backdrop (1099) and above mobile-toggle */
    overflow-y:auto;
  }
  /* Close (×) button injected by js/global.js into every .main-nav */
  .main-nav .nav-close{
    display:none;
  }
  body.nav-open .main-nav .nav-close{
    display:inline-flex !important;
    position:absolute !important;
    top:14px; right:14px;
    width:40px; height:40px;
    border-radius:50%;
    border:1px solid var(--border-soft,#E4E4EC);
    background:#fff !important;
    color:var(--navy,#1A1560);
    align-items:center; justify-content:center;
    cursor:pointer; padding:0;
    z-index:2;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  body.nav-open .main-nav .nav-close:hover{
    background:var(--orange,#E87B1E) !important;
    border-color:var(--orange,#E87B1E);
    color:#fff;
  }
  body.nav-open .main-nav .nav-close svg{ width:18px; height:18px; }
  /* Book Appointment CTA pinned below the last nav item */
  .main-nav .nav-book-cta{ display:none; }
  body.nav-open .main-nav .nav-book-cta{
    display:inline-flex !important;
    align-items:center; justify-content:center; gap:8px;
    margin-top:18px !important;
    padding:14px 18px !important;
    width:100%;
    background:var(--orange,#E87B1E) !important;
    color:#fff !important;
    font-family:var(--font-h,'Outfit',sans-serif);
    font-size:14.5px; font-weight:600;
    text-decoration:none !important;
    border-radius:10px;
    border:0;
    box-shadow:0 8px 18px -6px rgba(232,123,30,.4);
    transition:background .15s ease, transform .15s ease;
  }
  body.nav-open .main-nav .nav-book-cta:hover{
    background:#D06A12 !important;
    transform:translateY(-1px);
  }
  body.nav-open .main-nav .nav-book-cta svg{
    width:16px; height:16px; stroke:currentColor; fill:none; flex-shrink:0;
  }
  /* Backdrop: simple dark tint, no blur. backdrop-filter:blur was painting the
     drawer area semi-transparent on some pages (Chromium quirk with body
     pseudo-elements that have an inset:0 backdrop-filter). pointer-events:none
     so taps reach the drawer. */
  body.nav-open::after{
    content:''; position:fixed; inset:0; background:rgba(17,14,69,0.5);
    z-index:1099; pointer-events:none;
  }
  .main-nav .nav-item{ width:100%; border-bottom:1px solid var(--border-soft,#E4E4EC); display:block !important; }
  .main-nav .nav-link{ width:100%; justify-content:space-between; padding:14px 8px !important; font-size:15px !important; display:flex !important; align-items:center !important; }
  /* Chevron on mobile = visual expand/collapse indicator */
  .main-nav .nav-link .chevron{ width:14px !important; height:14px !important; transition:transform .2s ease; flex-shrink:0; margin-left:auto; }
  .main-nav .nav-item.is-open > .nav-link .chevron{ transform:rotate(180deg); }
  /* Mega menus collapse to vertical accordion panels inside the drawer.
     Closed = display:none. Open (.nav-item.is-open) = display:block. */
  .main-nav .mega-menu{
    display:none !important;
    position:static !important;
    width:100% !important;
    box-shadow:none !important;
    background:#FAFAFD !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:none !important;
  }
  .main-nav .nav-item.is-open > .mega-menu{ display:block !important; }
  .main-nav .mega-inner{ padding:8px 10px 14px !important; }
  .main-nav .mega-grid-4{ display:flex !important; flex-direction:column !important; gap:14px !important; }
  .main-nav .mega-col{ display:flex !important; flex-direction:column !important; gap:2px !important; }
  .main-nav .mega-col-header{ padding:8px 10px 4px !important; }
  .main-nav .mega-col-title{ font-family:var(--font-h,'Outfit',sans-serif); font-size:11px !important; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--orange,#E87B1E); }
  .main-nav .mega-col-subtitle{ display:none !important; }
  .main-nav .mega-link{
    display:flex !important; align-items:center; gap:8px;
    padding:10px 12px !important;
    font-size:14px !important; color:var(--navy,#1A1560) !important;
    text-decoration:none !important; border-radius:6px;
    transition:background .15s ease;
  }
  .main-nav .mega-link:hover{ background:#fff !important; }
  .main-nav .mega-link .bullet{ width:5px; height:5px; border-radius:50%; background:var(--orange,#E87B1E); flex-shrink:0; }
  .main-nav .mega-footer{ padding:10px 12px !important; border-top:1px solid var(--border-soft,#E4E4EC); display:flex !important; flex-direction:column !important; gap:6px !important; margin-top:8px !important; }
  .main-nav .mega-footer-link{
    display:inline-flex !important; align-items:center; gap:6px;
    font-size:13px !important; padding:10px 14px !important;
    background:#fff !important; color:var(--orange,#E87B1E) !important;
    border:1px solid var(--orange,#E87B1E) !important; border-radius:8px !important;
    text-decoration:none !important;
    transition:background .15s ease, color .15s ease !important;
  }
  .main-nav .mega-footer-link:hover{
    background:var(--orange,#E87B1E) !important;
    color:#fff !important;
  }
  /* Mega-link items (Heart Tests, Liver Tests, etc.) — keep navy text on
     hover too so they don't vanish on the white hover background. */
  .main-nav .mega-link{ color:var(--navy,#1A1560) !important; }
  .main-nav .mega-link:hover{
    background:#fff !important;
    color:var(--orange,#E87B1E) !important;
  }
  .mobile-toggle{ display:inline-flex !important; }
}
@media(min-width:1101px){
  .mobile-toggle{ display:none !important; }
}

/* ---------- 4. FOOTER — premium, larger logo, better hierarchy ---------- */
.site-footer{ padding:48px 0 0 !important; }
.site-footer .container{
  max-width:1440px;
  padding-left:36px !important;
  padding-right:36px !important;
}
.site-footer .footer-grid{
  grid-template-columns:1.6fr 1fr 1fr 1.4fr !important;
  gap:48px !important;
  padding-bottom:32px !important;
  align-items:start !important;
}
.footer-logo img.logo-img,
.site-footer .footer-logo img{
  height:60px !important;
  width:auto !important;
  margin-bottom:4px;
}
/* Kill the legacy brightness/invert filter from physio.css that turns the
   colourful VRX logo into a solid white rectangle on the dark footer. */
.site-footer .footer-brand img,
.site-footer .footer-logo img,
.footer-brand img.logo-img,
.footer .footer-brand img{
  filter:none !important;
  -webkit-filter:none !important;
}
.footer-tagline{ font-size:13.5px !important; line-height:1.6 !important; max-width:360px; margin-bottom:16px !important; }
.footer-col h4{ font-size:13px !important; margin-bottom:16px !important; letter-spacing:1.4px !important; }
.footer-col ul li{ margin-bottom:9px !important; }
.footer-col ul li a{ font-size:13.5px !important; }
.footer-contact .f-centre{ margin-bottom:12px !important; padding-bottom:12px !important; }
.footer-contact .f-centre strong{ font-size:13px !important; margin-bottom:3px !important; display:block; }
.footer-contact .f-centre span{ font-size:12.5px !important; margin-bottom:3px !important; line-height:1.45 !important; display:block; }
.footer-contact .f-centre a{ font-size:13px !important; }
.footer-social{ margin-top:14px !important; }
.footer-social .soc-btn{ width:38px !important; height:38px !important; border-radius:10px !important; }
.footer-bottom{ padding:18px 0 !important; }
@media(max-width:1024px){
  .site-footer .footer-grid{ grid-template-columns:1fr 1fr !important; gap:36px !important; }
  .site-footer .footer-col.footer-brand,
  .site-footer .footer-col.footer-contact{ grid-column:1/-1; }
}
@media(max-width:640px){
  .site-footer{ padding-top:48px !important; }
  .site-footer .footer-grid{ grid-template-columns:1fr !important; gap:32px !important; padding-bottom:36px !important; }
  .footer-logo img.logo-img{ height:60px !important; }
}

/* ---------- 5. FAQ — DO NOT override the inline max-height transition.
   The pages use `.faq-a { max-height:0 }` and `.faq-item.open .faq-a { max-height:600px }`.
   We only ensure the trigger looks clickable and JS handler is attached (in global.js). */
.faq-item .faq-q{ cursor:pointer; }

/* ---------- 6. BOOKING MODAL ---------- */
.book-modal{
  position:fixed; inset:0; z-index:2000;
  display:none; align-items:center; justify-content:center;
  background:rgba(17,14,69,0.55);
  padding:20px;
  backdrop-filter:blur(4px);
}
.book-modal.open{ display:flex; }
.book-modal-card{
  background:#fff; width:100%; max-width:520px; border-radius:14px;
  padding:32px 30px 28px; position:relative;
  box-shadow:0 30px 80px rgba(17,14,69,0.32);
  max-height:90vh; overflow-y:auto;
}
.book-modal-card h3{
  font-family:var(--font-h,'Outfit',sans-serif);
  font-size:24px; font-weight:600; color:var(--gray-900,#1E1E2F);
  margin-bottom:6px; letter-spacing:-0.4px;
}
.book-modal-card .book-modal-sub{
  font-size:13.5px; color:var(--gray-500,#72728A); margin-bottom:18px;
}
.book-modal-card .book-modal-test{
  font-size:12.5px; color:var(--orange,#E87B1E); font-weight:600;
  margin-bottom:14px; display:none;
}
.book-modal-card .book-modal-test:not(:empty){ display:block; }
.book-modal-card label{
  display:block; font-size:12px; font-weight:600; color:var(--gray-700,#3D3D4E);
  margin-bottom:5px; letter-spacing:0.2px; text-transform:uppercase;
}
.book-modal-card input,
.book-modal-card textarea,
.book-modal-card select{
  width:100%; padding:11px 13px; border:1px solid var(--border,#D8D8E2);
  border-radius:8px; font-size:14px; font-family:inherit;
  margin-bottom:14px; background:#fff; color:var(--gray-900,#1E1E2F);
  transition:border-color .15s;
}
.book-modal-card input:focus,
.book-modal-card textarea:focus,
.book-modal-card select:focus{
  outline:none; border-color:var(--orange,#E87B1E);
}
.book-modal-card textarea{ min-height:78px; resize:vertical; }
.book-modal-card .book-modal-submit{
  width:100%; padding:13px 18px; background:var(--orange,#E87B1E);
  color:#fff; border:none; border-radius:8px;
  font-family:var(--font-h,'Outfit',sans-serif);
  font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.book-modal-card .book-modal-submit:hover{ background:var(--orange-dark,#D06A12); }
.book-modal-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border:none; background:var(--gray-100,#F2F2F6);
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--gray-600,#555566); transition:background .15s;
}
.book-modal-close:hover{ background:var(--gray-200,#DCDCE6); }
.book-modal-close svg{ width:16px; height:16px; }

/* ---------- 7. MEGA-MENU HOVER FIX (no disappear gap) ----------
   The bug: nav-item button was shorter than header height, leaving a
   vertical gap between the button and the dropdown's `top:100%` position
   on the container. Cursor crossing that gap exited :hover -> menu
   disappeared. Fix: stretch nav-item + nav-link to full header height. */
@media(min-width:1101px){
  .main-header .main-nav{ align-self:stretch; align-items:stretch; }
  .main-nav .nav-item,
  .main-nav .has-wide-mega,
  .main-nav .nav-mega{
    height:100%;
    display:flex;
    align-items:center;
  }
  .main-nav .nav-item > .nav-link,
  .main-nav .has-wide-mega > .nav-link,
  .main-nav .nav-mega > .nav-link{
    height:100%;
    display:inline-flex;
    align-items:center;
  }
  .main-nav .has-wide-mega .mega-menu,
  .main-nav .nav-mega .mega-menu{
    top:100% !important;
    transform:none !important;
    margin-top:0 !important;
    transition:opacity .15s ease, visibility 0s linear .15s !important;
  }
  .main-nav .has-wide-mega:hover .mega-menu,
  .main-nav .has-wide-mega:focus-within .mega-menu,
  .main-nav .nav-mega:hover .mega-menu,
  .main-nav .nav-mega:focus-within .mega-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition-delay:0s !important;
  }
}

/* ---------- 8. Wound & Vein: How It Helps / How We Work — single row on desktop ---------- */
.benefits .benefits-grid,
.benefits .tech-grid,
.benefits .tech-grid--4,
.techniques .tech-grid,
.techniques .tech-grid--4,
.first-visit-h .tech-grid,
.first-visit-h .tech-grid--4{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
}
.benefits .benefits-grid > *,
.benefits .tech-grid > *,
.techniques .tech-grid > *,
.first-visit-h .tech-grid > *{
  min-width:0;
}
/* If a page has 5 boxes, allow 5 in a row at >=1280 */
@media(min-width:1280px){
  .benefits .tech-grid:has(> *:nth-child(5)),
  .techniques .tech-grid:has(> *:nth-child(5)),
  .first-visit-h .tech-grid:has(> *:nth-child(5)){
    grid-template-columns:repeat(5,1fr) !important;
  }
}
@media(max-width:980px){
  .benefits .tech-grid,
  .techniques .tech-grid,
  .first-visit-h .tech-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:560px){
  .benefits .tech-grid,
  .techniques .tech-grid,
  .first-visit-h .tech-grid{ grid-template-columns:1fr !important; }
}
/* Tighten card padding so 4 fit cleanly */
.benefits .tech-card,
.techniques .tech-card,
.first-visit-h .tech-card{ padding:22px 20px !important; }
.benefits .tech-card .tech-card-desc,
.techniques .tech-card .tech-card-desc,
.first-visit-h .tech-card .tech-card-desc{ font-size:13px !important; line-height:1.55 !important; }

/* ---------- 9. Health Packages hero background ---------- */
.health-packages-hero,
section.page-hero.hp-hero,
.hp-page-hero{
  background-image:linear-gradient(95deg, rgba(17,14,69,0.78) 0%, rgba(17,14,69,0.55) 55%, rgba(17,14,69,0.30) 100%), url('../images/diagnoloung-hero.webp') !important;
  background-size:cover !important;
  background-position:center !important;
}

/* ---------- 10. IMAGE FRAMING — better object-position so faces / focal
   points aren't cropped off, and aspect ratios stay balanced. */
.about-visual img,
.intro-visual img,
.pca-photo img,
.ab-hero-bg img,
.svc-image img,
.tech-tile img,
.doc-photo img{
  object-fit:cover;
  object-position:center 30%; /* favour upper portion — keeps faces in frame */
}
/* When a logo / non-photographic asset is placed in a photo frame, contain it */
.about-visual img.logo-image,
.intro-visual img.logo-image,
.pca-photo img.logo-image{
  object-fit:contain !important;
  object-position:center center !important;
  padding:32px;
  background:#fff;
}
/* Drop the dark gradient overlay when the visual is a logo */
.about-visual:has(img.logo-image)::after,
.intro-visual:has(img.logo-image)::after,
.pca-photo:has(img.logo-image)::after{ display:none !important; }
/* Looser min-heights so containers don't squash the image */
.about-visual{ min-height:480px; }
.intro-visual{ aspect-ratio:4/5; max-width:520px; }
.pca-photo{ min-height:520px; }
@media(max-width:768px){
  .about-visual{ min-height:320px; height:auto; }
  .pca-photo{ min-height:320px; height:auto; }
  .intro-visual{ aspect-ratio:16/11; max-width:100%; }
}
/* Hero tightening — REMOVED automatic line-clamp.
   It broke h1 with inline em/span elements. Hero copy length is
   handled by content rewrites, not by CSS truncation. */

/* ---------- 11. ICON SAFETY (minimal — don't override page-specific sizing) ---------- */
/* Only enforce stroke/fill visibility; do NOT touch width/height. */
svg[stroke="currentColor"]{ stroke:currentColor; }
svg[fill="currentColor"]{ fill:currentColor; }

/* ---------- 12. PREVENT CONTENT OVERFLOW (QA safety) ----------
   IMPORTANT: do NOT set overflow on html/body — it breaks position:sticky
   (the sticky element's containing block becomes the nearest scroll
   ancestor, so sticky never engages). Sidebars on test/service pages
   rely on this. We rely on individual sections / containers to keep
   their own children from overflowing. */
.test-card, .hp-card, .pricing-card, .svc-card, .tech-card, .doc-card,
.review-card, .pkg-card, .contact-card, .centre-card{ min-width:0; }

/* Belt-and-braces: ensure no overflow on sticky ancestors */
.page-layout, .left-column{ overflow:visible !important; }
.sidebar{
  position:sticky !important;
  top:96px !important;
  align-self:start !important;
  height:fit-content;
}
/* On narrow screens, drop sticky so the sidebar flows normally */
@media(max-width:980px){
  .sidebar{ position:static !important; top:auto !important; }
  .page-layout{ grid-template-columns:1fr !important; }
}
/* Responsive images — only constrain if not already constrained by a parent rule */
.about-visual img,
.svc-image img,
.tech-tile img,
.doc-photo img,
.hero-slide-bg img{
  /* explicitly keep these as-is — don't override their object-fit/cover behaviour */
}

/* ---------- 13. "View More on Google" testimonial CTA ---------- */
.reviews-head-row .btn-secondary[href="#"],
.reviews-aggregate .btn-secondary[href="#"],
.section-head-center .btn-secondary[href*="google"]{
  /* placeholder */
}

/* ---------- 14. Misc polish ---------- */
.main-header{ z-index:1000 !important; }
img{ max-width:100%; height:auto; }

/* ---------- 14c. AREAS WE SERVE SECTION — usable on every subpage.
   Background is intentionally near-white to blend with the page neutrally. */
.areas-section{
  padding:56px 0 !important;
  background:#F8F8FB !important;
}
.areas-section .areas-head{ text-align:center; max-width:760px; margin:0 auto 32px; padding:0 24px; }
.areas-section .sh-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:600;
  color:var(--orange);
  text-transform:uppercase; letter-spacing:2.4px;
  margin-bottom:14px;
}
.areas-section .sh-eyebrow::before,
.areas-section .sh-eyebrow::after{ content:''; width:22px; height:1px; background:var(--orange); }
.areas-section h2{
  font-family:var(--font-h);
  font-size:38px; font-weight:500;
  color:var(--gray-900);
  line-height:1.1; letter-spacing:-1.2px;
  margin-bottom:12px;
}
.areas-section h2 em{ font-style:normal; color:var(--orange); font-weight:500; }
.areas-section p{ font-size:15px; color:var(--gray-600); line-height:1.65; }
.areas-section .areas-grid{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  max-width:1100px; margin:0 auto;
  padding:0 24px;
}
.areas-section .area-tag{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:50px;
  font-family:var(--font-b,'DM Sans',sans-serif);
  font-size:13.5px; font-weight:500;
  color:var(--gray-900);
  background:#fff;
  border:1px solid var(--border-soft,#E4E4EC);
  transition:all .18s ease;
}
.areas-section .area-tag:hover{
  border-color:var(--orange);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(232,123,30,0.12);
}
.areas-section .area-tag .pin,
.area-tag .pin{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  border-radius:50% !important;
  background:rgba(232,123,30,0.15) !important;
  color:var(--orange) !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
/* Hard cap every SVG inside .area-tag — protects against global img/svg
   rules stretching the icon to fill the container on live. */
.areas-section .area-tag .pin svg,
.areas-section .area-tag svg,
.area-tag .pin svg,
.area-tag svg{
  width:11px !important;
  height:11px !important;
  min-width:11px !important;
  max-width:11px !important;
  min-height:11px !important;
  max-height:11px !important;
  flex-shrink:0 !important;
  display:block !important;
  stroke-width:2 !important;
}
/* Belt-and-braces */
.area-tag *{ max-width:100%; }
@media(max-width:768px){
  .areas-section{ padding:44px 0 !important; }
  .areas-section h2{ font-size:26px; }
  .areas-section .area-tag{ font-size:12px; padding:8px 14px; }
}

/* ---------- 14a. SUBPAGE SECTION PADDING — reduce vertical breathing room
   on every physio-* and wound-vein-* subpage. These pages use shared
   section classes from physio.css with 120px padding. We tighten to 64px
   desktop / 44px mobile so the page reads denser and content is closer. */
section.conditions,
section.benefits,
section.techniques,
section.first-visit-h,
section.why,
section.single-centre,
section.faq,
section.testi,
section.centres,
section.related-services,
section.other-treatments,
section.therapies,
section.service-types,
section.physio-about{
  padding-top:56px !important;
  padding-bottom:56px !important;
}
section.therapies{ padding-bottom:0 !important; }

/* HERO — slim, neat, low padding (scoped to ph-hero / hero.hero-bg only
   so the homepage slider hero, which uses .hero with absolute slide
   controls, is left alone) */
section.ph-hero{
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:auto !important;
}
section.ph-hero .ph-hero-inner{ padding:32px 0 48px !important; }
@media(max-width:768px){
  section.ph-hero .ph-hero-inner{ padding:22px 0 32px !important; }
}

/* Subpage .hero.hero-bg (wound-vein-* + physio-* subpages).
   Compact hero with dark gradient overlay; large, fully white,
   high-contrast text on top of the service image. */
/* CRITICAL OVERRIDE: physio.css sets .hero-bg{min-height:600px} and
   .hero-bg .container{min-height:600px; padding:96px 0;} — those force
   a huge hero. Plus physio.css uses ::after for its lighter overlay and
   disables ::before. So we override ::after directly and kill all the
   min-heights with !important. */
section.hero.hero-bg,
.hero.hero-bg{
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
  position:relative !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:#0B092E !important;
  overflow:hidden !important;
  isolation:isolate;
}
section.hero.hero-bg::after,
.hero.hero-bg::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(
    rgba(30,28,35,0.68),
    rgba(30,28,35,0.68)) !important;
  z-index:1 !important;
  pointer-events:none !important;
  display:block !important;
}
section.hero.hero-bg::before,
.hero.hero-bg::before{ display:none !important; }
section.hero.hero-bg > .container,
.hero.hero-bg > .container{
  position:relative !important;
  z-index:2 !important;
}
section.hero.hero-bg .container,
.hero.hero-bg .container{
  padding-top:90px !important;
  padding-bottom:90px !important;
  min-height:0 !important;
  height:auto !important;
  max-width:1320px !important;
  display:block !important;
  justify-content:initial !important;
}
/* Headline — large, pure white, 2 lines max via width */
section.hero.hero-bg h1,
.hero.hero-bg h1{
  font-size:52px !important;
  line-height:1.08 !important;
  letter-spacing:-1.5px !important;
  margin-bottom:36px !important;
  max-width:none !important;
  width:100%;
  color:#fff !important;
  font-weight:500 !important;
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
section.hero.hero-bg h1 em,
.hero.hero-bg h1 em{
  font-style:normal !important;
  color:var(--orange,#E87B1E) !important;
  font-weight:500 !important;
}
/* Sub — readable white-with-some-transparency */
section.hero.hero-bg .hero-sub,
.hero.hero-bg .hero-sub{
  font-size:15.5px !important;
  line-height:1.75 !important;
  margin-bottom:44px !important;
  max-width:780px;
  color:rgba(255,255,255,0.92) !important;
}
/* Breadcrumb — light enough to read on the dark overlay */
section.hero.hero-bg .hero-breadcrumb,
.hero.hero-bg .hero-breadcrumb{
  margin-bottom:40px !important;
  color:rgba(255,255,255,0.7) !important;
  font-size:13px !important;
}
section.hero.hero-bg .hero-breadcrumb a,
.hero.hero-bg .hero-breadcrumb a{ color:rgba(255,255,255,0.7) !important; }
section.hero.hero-bg .hero-breadcrumb a:hover,
.hero.hero-bg .hero-breadcrumb a:hover{ color:var(--orange,#E87B1E) !important; }
section.hero.hero-bg .hero-breadcrumb .current,
.hero.hero-bg .hero-breadcrumb .current{ color:#fff !important; font-weight:500; }
section.hero.hero-bg .hero-breadcrumb .sep,
.hero.hero-bg .hero-breadcrumb .sep{ color:rgba(255,255,255,0.35) !important; }
section.hero.hero-bg .hero-cta-row,
.hero.hero-bg .hero-cta-row{ margin-bottom:0 !important; }
/* Buttons in hero — primary keeps orange; secondary becomes light outlined */
section.hero.hero-bg .btn-secondary,
.hero.hero-bg .btn-secondary{
  color:#fff !important;
  border-color:rgba(255,255,255,0.5) !important;
  background:transparent !important;
}
section.hero.hero-bg .btn-secondary:hover,
.hero.hero-bg .btn-secondary:hover{
  background:rgba(255,255,255,0.12) !important;
  border-color:#fff !important;
}
@media(max-width:768px){
  section.hero.hero-bg .container,
  .hero.hero-bg .container{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
  section.hero.hero-bg h1,
  .hero.hero-bg h1{ font-size:32px !important; letter-spacing:-0.8px !important; }
  section.hero.hero-bg .hero-sub,
  .hero.hero-bg .hero-sub{ font-size:13px !important; }
}

/* physiotherapy.html main hero (.ph-hero) — same compact look */
section.ph-hero{ padding:0 !important; min-height:auto !important; }
section.ph-hero .ph-hero-inner{ padding:20px 0 !important; }
section.ph-hero .container{ max-width:1320px !important; }
section.ph-hero .ph-hero-bg::after{
  background:linear-gradient(
    rgba(30,28,35,0.68),
    rgba(30,28,35,0.68)) !important;
}
section.ph-hero .ph-hero-inner{ padding:90px 0 !important; }
/* Hide the circular photo on the right, make hero full-width like subpages */
section.ph-hero .ph-hero-grid{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
section.ph-hero .ph-hero-photo-wrap{ display:none !important; }
section.ph-hero .hero-eyebrow{ margin-bottom:40px !important; }
section.ph-hero .ph-hero-cta-row{ margin-bottom:0 !important; }
@media(max-width:768px){
  section.ph-hero .ph-hero-inner{ padding:48px 0 !important; }
}
section.ph-hero h1{
  font-size:52px !important;
  line-height:1.08 !important;
  letter-spacing:-1.5px !important;
  margin-bottom:24px !important;
  color:#fff !important;
}
section.ph-hero .ph-hero-sub{
  font-size:15.5px !important;
  line-height:1.65 !important;
  margin-bottom:32px !important;
  color:rgba(255,255,255,0.92) !important;
}
section.ph-hero .hero-eyebrow{ margin-bottom:28px !important; }
section.ph-hero .ph-hero-cta-row{ margin-bottom:0 !important; }
@media(max-width:768px){
  section.ph-hero .ph-hero-inner{ padding:48px 0 !important; }
  section.ph-hero h1{ font-size:32px !important; }
  section.ph-hero .ph-hero-sub{ font-size:13px !important; }
}

/* (legacy duplicate rule below — kept for backward compat) */
section.ph-hero .ph-hero-inner{ padding:20px 0 !important; }
@media(max-width:768px){
  section.ph-hero .ph-hero-inner{ padding:36px 0 40px !important; }
}

/* CTA BLOCK (uni-cta with parallax) — slim, shorter height */
section.uni-cta{
  padding:0 !important;
}
section.uni-cta .uni-cta-inner,
section.uni-cta .uni-cta-block{
  min-height:auto !important;
}
section.uni-cta .uni-cta-inner{
  padding:48px 32px !important;
}

/* CONDITIONS TREATED — very light off-white bg + extra breathing room
   so it visually separates from the preceding white section. */
section.conditions{
  background:#FBFBFD !important;
  padding-top:76px !important;
  padding-bottom:76px !important;
}
@media(max-width:768px){
  section.conditions{ padding-top:52px !important; padding-bottom:52px !important; }
}

@media(max-width:768px){
  section.conditions,
  section.benefits,
  section.techniques,
  section.first-visit-h,
  section.why,
  section.single-centre,
  section.faq,
  section.testi,
  section.centres,
  section.related-services,
  section.other-treatments,
  section.therapies,
  section.service-types,
  section.physio-about{
    padding-top:36px !important;
    padding-bottom:36px !important;
  }
  section.ph-hero{ padding-top:24px !important; padding-bottom:24px !important; }
  section.ph-hero .ph-hero-inner{ padding:24px 0 !important; }
  section.uni-cta .uni-cta-inner{ padding:36px 22px !important; }
}

/* ---------- 14b. FLOATING CALL / WHATSAPP BUTTONS — these were rendering
   at full container size on pages that don't load physio.css. Constrain
   them globally so the icon stays small. */
.call-float,
.wa-float{
  position:fixed !important;
  bottom:24px !important;
  right:24px !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:998 !important;
  transition:all 0.2s ease !important;
  text-decoration:none !important;
}
.wa-float{ background:#25D366 !important; color:#fff !important; box-shadow:0 12px 32px rgba(37,211,102,0.4) !important; }
.call-float{ background:var(--orange,#E87B1E) !important; color:#fff !important; box-shadow:0 12px 32px rgba(232,123,30,0.35) !important; bottom:90px !important; }
.call-float:hover,.wa-float:hover{ transform:scale(1.08) !important; }
.call-float svg,.wa-float svg{
  width:24px !important;
  height:24px !important;
  stroke-width:2 !important;
  position:relative !important;
  z-index:1 !important;
}
@media(max-width:768px){
  .call-float,.wa-float{ width:48px !important; height:48px !important; bottom:18px !important; right:18px !important; }
  .call-float{ bottom:74px !important; }
  .call-float svg,.wa-float svg{ width:22px !important; height:22px !important; }
}

/* ---------- 15. HERO HEADLINE — cap at 2 lines across viewports ----------
   Uses line-clamp for the visual cap; pairs with responsive font sizes so
   typical copy fits naturally without needing JS truncation. */
.hero h1,
.hero-inner h1,
.page-hero h1,
.test-header h1,
.svc-hero h1{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:1100px){
  .hero-inner h1{ font-size:46px !important; line-height:1.06 !important; }
}
@media(max-width:768px){
  .hero-inner h1{ font-size:32px !important; line-height:1.1 !important; letter-spacing:-0.6px !important; }
  .hero-inner .hero-sub{ font-size:14px !important; }
}
@media(max-width:420px){
  .hero-inner h1{ font-size:26px !important; }
}

/* ---------- 16. MOBILE — 2-column grids for tiles/cards ----------
   The user prefers 2 boxes per row on mobile instead of 1-col stacks for
   service / sub-service / test card grids. Applied at ≤768px only. */
@media(max-width:768px){
  .svc-grid,
  .sub-services-grid,
  .services-grid,
  .test-grid,
  .pricing-grid,
  .areas-grid,
  .usp-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .svc-grid .svc-card,
  .sub-services-grid > *,
  .services-grid > *,
  .test-grid > *{ min-width:0; }
  .svc-card .svc-body{ padding:14px !important; }
  .svc-card h3{ font-size:14.5px !important; line-height:1.25 !important; }
  .svc-card p{ font-size:12px !important; line-height:1.45 !important; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .svc-card .svc-cta-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .svc-card .svc-meta{ font-size:10.5px !important; }
}
@media(max-width:380px){
  /* Keep areas pills 2-per-row even on very narrow viewports */
  .areas-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .usp-grid{ grid-template-columns:1fr !important; }
}

/* ---------- 17b. MOBILE — horizontal carousel for sub-service cards on
   physiotherapy.html, wound-vein.html, diagnostics.html. These pages have
   3-up grids of service cards (.svc-grid, .wv-svc-grid, .pillars). On
   mobile we keep them as a 2-up grid (set in section 16) but also offer
   carousel mode for the "service-types" pillars which look better in a
   single row of cards you swipe through. */
@media(max-width:768px){
  .wv-pillars,
  .st-grid,
  .therapies-head + .th-splits{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    gap:12px !important;
    padding-bottom:14px;
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
    scrollbar-width:none;
  }
  .wv-pillars::-webkit-scrollbar,
  .st-grid::-webkit-scrollbar{ display:none; }
  .wv-pillars > .wv-pillar,
  .st-grid > .st-col{
    flex:0 0 86% !important;
    scroll-snap-align:start;
    min-width:0;
  }
  /* .cond-list (conditions on physiotherapy.html + wound-vein.html) — keep
     vertical but tighten on mobile. */
  .cond-list{ gap:6px !important; }
  .cond-row{ padding:14px !important; gap:12px !important; }
  .cond-row-icon{ width:36px !important; height:36px !important; }
  .cond-row-text h4{ font-size:14px !important; }
  .cond-row-text p{ font-size:12px !important; line-height:1.45 !important; }
  /* ph-svc-track already a carousel via flex+overflow; just ensure card
     width matches mobile viewport */
  .ph-svc-card{ flex:0 0 78% !important; }
}

/* ---------- 17. MOBILE — horizontal carousel for centres / location cards ---
   Vertical stack is wasted scroll; convert to a snap-scroll carousel. */
@media(max-width:768px){
  .centres-grid,
  .locations-grid,
  .centre-cards{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    gap:12px !important;
    padding-bottom:12px;
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
    scrollbar-width:none;
  }
  .centres-grid::-webkit-scrollbar,
  .locations-grid::-webkit-scrollbar,
  .centre-cards::-webkit-scrollbar{ display:none; }
  .centres-grid > *,
  .locations-grid > *,
  .centre-cards > *{
    flex:0 0 84% !important;
    scroll-snap-align:start;
  }
}

/* ---------- 18. CTA section — parallax background (universal) ----------
   Any section with class `.cta-section`, `.cta-block` or `.uni-cta` gets a
   fixed-attachment parallax background. Pages can still set their own
   background-image; this just enforces the parallax behaviour consistently. */
.cta-section,
.cta-block,
.uni-cta,
section.universal-cta{
  background-attachment:fixed !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
/* iOS does not support background-attachment:fixed reliably — fall back to
   a pseudo-element parallax that uses transform on scroll where supported. */
@media(max-width:1024px){
  .cta-section,
  .cta-block,
  .uni-cta,
  section.universal-cta{ background-attachment:scroll !important; }
}

/* ---------- 18b. HERO SPEC STRIP MOBILE WRAP — the 5-column strip below
   .ph-hero (physiotherapy.html, wound-vein.html, wound-vein subpages) is
   too narrow at tablet/phone widths. Wrap to 3-up at <=1024 and 2-up at
   <=640. */
@media(max-width:1024px){
  .hero-spec-strip-inner{ grid-template-columns:repeat(3,1fr) !important; }
  .hero-spec{ padding:18px 18px !important; min-height:80px !important; }
  .hero-spec:nth-child(3){ border-right:none !important; }
  .hero-spec:nth-child(n+4){ border-top:1px solid var(--border-soft); }
}
@media(max-width:640px){
  .hero-spec-strip-inner{ grid-template-columns:repeat(2,1fr) !important; }
  .hero-spec{ padding:14px 12px !important; min-height:74px !important; gap:10px !important; }
  .hero-spec:nth-child(2n){ border-right:none !important; }
  .hero-spec:nth-child(n+3){ border-top:1px solid var(--border-soft); }
  .hero-spec-icon{ width:36px !important; height:36px !important; }
  .hero-spec-icon svg{ width:18px !important; height:18px !important; }
  .hero-spec-text .lbl{ font-size:9px !important; letter-spacing:1px !important; }
  .hero-spec-text strong{ font-size:13px !important; }
}

/* ---------- 19. UNI-CTA BLOCK PARALLAX (physiotherapy.html, wound-vein.html,
   physio subpages) — `.uni-cta-block.cta1-img` had no background image, so
   the parallax block looked flat. Apply a fixed-attachment image with the
   existing dark gradient on top, mobile-fallback to scroll. */
.uni-cta-block.cta1-img,
.uni-cta-block.cta2-img{
  background-image:
    linear-gradient(135deg, rgba(51,43,138,0.92) 0%, rgba(42,35,128,0.86) 50%, rgba(36,29,114,0.92) 100%),
    url('../images/wound-and-vein-hero.webp') !important;
  background-size:cover, cover !important;
  background-position:center, center !important;
  background-attachment:scroll, fixed !important;
  background-repeat:no-repeat !important;
}
.uni-cta-block.cta2-img{
  background-image:
    linear-gradient(135deg, rgba(51,43,138,0.92) 0%, rgba(42,35,128,0.86) 50%, rgba(36,29,114,0.92) 100%),
    url('../images/physiolounge-hero.webp') !important;
}
@media(max-width:1024px){
  .uni-cta-block.cta1-img,
  .uni-cta-block.cta2-img{ background-attachment:scroll, scroll !important; }
}

/* Physio subpages: 80px hero top/bottom padding (desktop) + slimmer min-height */
.hero.hero-bg{ min-height:auto !important; }
.hero.hero-bg .container{
  min-height:auto !important;
  padding-top:80px !important;
  padding-bottom:80px !important;
}
@media(max-width:1024px){
  .hero.hero-bg .container{ padding-top:56px !important; padding-bottom:56px !important; }
}
@media(max-width:768px){
  .hero.hero-bg .container{ padding-top:40px !important; padding-bottom:40px !important; }
}
/* Ensure SVG icons inside hero CTA buttons aren't huge */
.hero .hero-cta-row .btn-primary svg,
.hero .hero-cta-row .btn-secondary svg{
  width:18px !important;
  height:18px !important;
  flex-shrink:0;
}

/* Tighten hero vertical rhythm slightly */
.hero.hero-bg .hero-breadcrumb{ margin-bottom:20px !important; }
.hero.hero-bg h1{ margin-bottom:16px !important; }
.hero.hero-bg .hero-sub{ margin-bottom:26px !important; }

/* Physiotherapy hero spec strip — full-width, single line per cell */
.hero-spec-strip{ width:100% !important; }
.hero-spec-strip > .container{ max-width:none !important; padding:0 !important; }
.hero-spec-strip-inner{ width:100% !important; max-width:none !important; }
.hero-spec-text strong{ white-space:nowrap !important; }

/* Force spec strip truly edge-to-edge */
.hero-spec-strip,
.hero-spec-strip > .container,
.hero-spec-strip-inner{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* Beat .physio-page .container max-width on the spec strip */
.physio-page .hero-spec-strip .container,
body .hero-spec-strip .container{
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* Physio subpages — 70px hero padding + tighter row gaps */
.hero.hero-bg .container{
  padding-top:70px !important;
  padding-bottom:70px !important;
}
.hero.hero-bg .hero-breadcrumb{ margin-bottom:14px !important; }
.hero.hero-bg h1{ margin-bottom:12px !important; line-height:1.08 !important; }
.hero.hero-bg .hero-sub{ margin-bottom:20px !important; }
@media(max-width:1024px){
  .hero.hero-bg .container{ padding-top:50px !important; padding-bottom:50px !important; }
}
@media(max-width:768px){
  .hero.hero-bg .container{ padding-top:36px !important; padding-bottom:36px !important; }
  .hero.hero-bg .hero-breadcrumb{ margin-bottom:10px !important; }
  .hero.hero-bg h1{ margin-bottom:10px !important; }
  .hero.hero-bg .hero-sub{ margin-bottom:16px !important; }
}

/* Tighter hero rhythm — beat .physio-page and inline specificity */
body .hero.hero-bg .container,
body.physio-page .hero.hero-bg .container,
.physio-page section.hero.hero-bg .container{
  padding-top:60px !important;
  padding-bottom:60px !important;
}
body .hero.hero-bg .hero-breadcrumb,
.physio-page .hero.hero-bg .hero-breadcrumb{ margin-bottom:10px !important; }
body .hero.hero-bg h1,
.physio-page .hero.hero-bg h1{ margin-bottom:8px !important; line-height:1.05 !important; }
body .hero.hero-bg .hero-sub,
.physio-page .hero.hero-bg .hero-sub{ margin-bottom:14px !important; }

/* Hero rhythm — breathable middle ground (final) */
body .hero.hero-bg .container,
body.physio-page .hero.hero-bg .container,
.physio-page section.hero.hero-bg .container{
  padding-top:75px !important;
  padding-bottom:75px !important;
}
body .hero.hero-bg .hero-breadcrumb,
.physio-page .hero.hero-bg .hero-breadcrumb{ margin-bottom:18px !important; }
body .hero.hero-bg h1,
.physio-page .hero.hero-bg h1{ margin-bottom:18px !important; line-height:1.1 !important; }
body .hero.hero-bg .hero-sub,
.physio-page .hero.hero-bg .hero-sub{ margin-bottom:24px !important; }

/* Extra breathing after H1 */
body .hero.hero-bg h1,
.physio-page .hero.hero-bg h1{ margin-bottom:28px !important; }

/* === AREAS WE SERVE — bulletproof layout (final hardened) === */
.areas-section{
  background:var(--orange-light, #FEF7F0);
  padding:80px 0 !important;
  overflow:hidden;
}
.areas-section .container{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:0 24px !important;
}
.areas-section .section-head-center{
  text-align:center;
  max-width:780px;
  margin:0 auto 40px !important;
}
.areas-section .areas-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  max-width:1100px !important;
  margin:0 auto !important;
  padding:0 !important;
  list-style:none !important;
}
.areas-section .area-tag{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 18px !important;
  background:#fff !important;
  border:1px solid var(--border, #D8D8E2) !important;
  border-radius:50px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  color:var(--gray-800, #2A2A3B) !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  line-height:1 !important;
  box-shadow:0 1px 2px rgba(17,14,69,0.03);
  transition:all 0.2s ease;
}
.areas-section .area-tag:hover{
  border-color:var(--orange) !important;
  transform:translateY(-1px);
}
/* HARD CAP every SVG inside .area-tag — no balloon ever */
.areas-section .area-tag svg,
.areas-section .area-tag .pin svg,
.area-tag svg,
.area-tag .pin svg{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  max-width:14px !important;
  min-height:14px !important;
  max-height:14px !important;
  flex:0 0 14px !important;
  display:inline-block !important;
  vertical-align:middle !important;
  color:var(--orange) !important;
  fill:none !important;
  stroke:var(--orange) !important;
}
.area-tag .pin{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
}
@media(max-width:768px){
  .areas-section{ padding:48px 0 !important; }
  .areas-section .areas-grid{ gap:8px !important; }
  .areas-section .area-tag{ font-size:12px !important; padding:8px 14px !important; }
}

/* Diagnostics FAQ — force 2-column on desktop */
.faq .faq-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  align-items:start !important;
  max-width:1100px !important;
  margin:0 auto !important;
}
.faq .faq-col{ display:flex !important; flex-direction:column !important; gap:10px !important; }
@media(max-width:768px){
  .faq .faq-list{ grid-template-columns:1fr !important; }
}

/* === Unified FAQ card style sitewide (matches diagnostics look) === */
section.faq, .faq-section{
  padding:80px 0 !important;
  background:#fff;
}
.faq .faq-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  align-items:start !important;
  max-width:1100px !important;
  margin:0 auto !important;
}
.faq .faq-col{ display:flex !important; flex-direction:column !important; gap:14px !important; }
.faq .faq-item{
  border:1px solid var(--border, #E4E4EC) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#fff !important;
  transition:all 0.2s ease !important;
}
.faq .faq-item:hover{ border-color:#D8D8DD !important; }
.faq .faq-item.open{ border-color:var(--orange) !important; box-shadow:0 4px 14px rgba(232,123,30,0.08) !important; }
.faq .faq-q{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:22px 24px !important;
  font-size:16px !important;
  font-weight:500 !important;
  color:var(--gray-900, #1E1E2F) !important;
  background:none !important;
  border:none !important;
  width:100% !important;
  text-align:left !important;
  font-family:var(--font-b, 'DM Sans', sans-serif) !important;
  line-height:1.45 !important;
  cursor:pointer !important;
}
.faq .faq-icon-circle{
  width:32px !important; height:32px !important;
  min-width:32px !important; min-height:32px !important;
  flex-shrink:0 !important;
  border-radius:50% !important;
  background:#FDEFDF !important;
  color:var(--orange) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all 0.25s ease !important;
}
.faq .faq-icon-circle svg{
  width:14px !important; height:14px !important;
  min-width:14px !important; max-width:14px !important;
  stroke:currentColor !important;
  fill:none !important;
  transition:transform 0.25s ease !important;
}
.faq .faq-item.open .faq-icon-circle{
  background:var(--orange) !important;
  color:#fff !important;
  transform:rotate(180deg) !important;
}
.faq .faq-answer{ max-height:0 !important; overflow:hidden !important; transition:max-height 0.3s ease !important; }
.faq .faq-item.open .faq-answer{ max-height:600px !important; }
.faq .faq-answer-inner{
  padding:0 24px 22px !important;
  padding-top:18px !important;
  font-size:15px !important;
  color:var(--gray-600, #555566) !important;
  line-height:1.7 !important;
  border-top:1px solid #F2F2F6 !important;
}
@media(max-width:768px){
  .faq .faq-list{ grid-template-columns:1fr !important; }
  section.faq, .faq-section{ padding:56px 0 !important; }
  .faq .faq-q{ font-size:15px !important; padding:18px 18px !important; }
}

/* Diagnostics FAQ — kill bleed-through + tighten spacing */
section.faq{
  position:relative !important;
  z-index:2 !important;
  background:#fff !important;
  padding:60px 0 !important;
}
.faq .faq-list{ gap:10px !important; }
.faq .faq-col{ gap:10px !important; }
.faq .faq-q{ padding:18px 22px !important; font-size:15.5px !important; }
.faq .faq-answer-inner{ padding:14px 22px 18px !important; font-size:14.5px !important; }

/* Diagnostics page only — clean up FAQ rendering */
body.diagnostics-page .faq .faq-answer-inner,
.diagnostics-page .faq .faq-answer-inner{ border-top:0 !important; }
/* If body class isn't present, fall back to URL-agnostic clean-up on the diagnostics-specific layout */
.faq .faq-item .faq-answer{ border-top:0 !important; }
.faq .faq-item .faq-answer-inner{ border-top:0 !important; padding-top:0 !important; }
.faq .faq-item.open .faq-answer-inner{ padding-top:18px !important; border-top:1px solid #F2F2F6 !important; }
/* Kill any phantom underline under the question when closed */
.faq .faq-item .faq-q{ border-bottom:0 !important; box-shadow:none !important; }

/* Hard re-collapse FAQ answer when not .open (kill leakage) */
.faq .faq-item:not(.open) .faq-answer{
  max-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
}
.faq .faq-item:not(.open) .faq-answer-inner{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
}

/* Restore physio-page FAQ — it uses .faq-grid-2col wrapping two .faq-list columns */
.physio-page .faq .faq-list,
.physio-page .faq-list{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:14px !important;
}
.physio-page .faq .faq-grid-2col,
.physio-page .faq-grid-2col{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px 22px !important;
  max-width:1180px !important;
  margin:0 auto !important;
}
@media(max-width:768px){
  .physio-page .faq .faq-grid-2col,
  .physio-page .faq-grid-2col{ grid-template-columns:1fr !important; }
}

/* === FINAL FAQ FIX — works for BOTH layouts ===
   Layout A (diagnostics): .faq-list = grid, .faq-col = vertical
   Layout B (physio subpages): .faq-grid-2col = grid, .faq-list = vertical
*/
.faq .faq-grid-2col{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px 22px !important;
  max-width:1180px !important;
  margin:0 auto !important;
}
.faq .faq-grid-2col .faq-list{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:14px !important;
  max-width:none !important;
}
@media(max-width:768px){
  .faq .faq-grid-2col{ grid-template-columns:1fr !important; }
}

/* FINAL — force hero-spec-strip truly edge-to-edge + grid stretch */
html body .hero-spec-strip,
html body .hero-spec-strip > .container,
html body .hero-spec-strip-inner{
  display:block !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 !important;
}
html body .hero-spec-strip > .container{ margin:0 !important; }
html body .hero-spec-strip-inner{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  width:100% !important;
  margin:0 !important;
}
html body .hero-spec{ width:auto !important; min-width:0 !important; }
@media(max-width:768px){
  html body .hero-spec-strip-inner{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:10px !important;
    padding:8px 16px !important;
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
  }
  html body .hero-spec-strip-inner::-webkit-scrollbar{display:none}
  html body .hero-spec{
    flex:0 0 auto !important;
    width:auto !important;
    padding:12px 14px !important;
    min-height:auto !important;
    border:1px solid var(--border-soft) !important;
    border-top:1px solid var(--border-soft) !important;
    border-right:1px solid var(--border-soft) !important;
    border-bottom:1px solid var(--border-soft) !important;
    background:var(--white) !important;
    border-radius:10px !important;
    gap:10px !important;
  }
  html body .hero-spec-icon{ width:34px !important; height:34px !important; }
  html body .hero-spec-icon svg{ width:16px !important; height:16px !important; }
  html body .hero-spec-text .lbl{ font-size:9px !important; letter-spacing:1px !important; margin-bottom:2px !important; }
  html body .hero-spec-text strong{ font-size:12px !important; white-space:nowrap !important; }
}

/* WHY CHOOSE US — more breathing room on mobile + section bottom padding */
@media(max-width:768px){
  html body section.why{ padding-bottom:64px !important; }
  html body .why-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:44px !important;
    column-gap:0 !important;
    margin-top:24px !important;
  }
  html body .why-block{
    padding:22px 0 26px !important;
    border-bottom:1px solid var(--border) !important;
  }
  html body .why-block:last-child{ border-bottom:none !important; padding-bottom:0 !important; }
  html body .why-block-icon{ display:none !important; }
  html body .why-block-top{ margin-bottom:12px !important; }
  html body .why-block .num-big{ font-size:48px !important; line-height:1 !important; }
  html body .why-block-divider{ display:none !important; }
  html body .why-block-text h3{ font-size:18px !important; margin-bottom:8px !important; }
  html body .why-block-text p{ font-size:14px !important; line-height:1.6 !important; }
}
@media(max-width:480px){
  html body .why-grid{ row-gap:36px !important; }
}

/* Header nav — slightly larger menu items */
.main-nav .nav-link,
header .nav-link,
.site-header .nav-link,
nav .nav-link{
  font-size:14.5px !important;
  font-weight:500 !important;
  letter-spacing:0.1px !important;
}
@media(max-width:1024px){
  .main-nav .nav-link,
  header .nav-link,
  .site-header .nav-link,
  nav .nav-link{ font-size:14.5px !important; }
}

/* Header call/email icon buttons — visible border */
.header-right .icon-btn,
header .icon-btn{
  border:1.5px solid var(--gray-300, #C8C8D4) !important;
  background:#fff !important;
  color:var(--navy, #1A1560) !important;
  transition:all 0.2s ease !important;
}
.header-right .icon-btn:hover,
header .icon-btn:hover{
  border-color:var(--orange, #E87B1E) !important;
  color:var(--orange, #E87B1E) !important;
  background:#FEF7F0 !important;
}

/* Header — softer tint background + slimmer height */
.main-header{
  background:#FAFAFC !important;
  border-bottom:1px solid #ECECF2 !important;
  box-shadow:0 1px 2px rgba(17,14,69,0.03) !important;
}
.main-header .container{ height:70px !important; }
.logo-text img.logo-img,
.main-header .logo-text img,
header.main-header img.logo-img{ height:48px !important; }
.main-header .header-right .icon-btn{ width:38px !important; height:38px !important; }
.main-header .header-right .cta-btn{ padding:10px 18px !important; font-size:13px !important; }
@media(max-width:1024px){
  .main-header .container{ height:62px !important; }
  .logo-text img.logo-img{ height:42px !important; }
}
@media(max-width:768px){
  .main-header .container{ height:56px !important; }
  .logo-text img.logo-img{ height:38px !important; }
}

/* CTA block logo — circular white bubble around the new logo */
.uni-cta-logo{
  width:100px !important;
  height:100px !important;
  background:#fff !important;
  border-radius:50% !important;
  box-shadow:0 18px 48px rgba(0,0,0,0.25), 0 0 0 8px rgba(255,255,255,0.06) !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.uni-cta-logo img{
  width:75% !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:0 !important;
}
/* ===== Floating WhatsApp + Call FAB stack ===== */
.fab-stack{
  position:fixed;right:24px;bottom:24px;z-index:9999;
  display:flex;flex-direction:column;gap:12px;
  pointer-events:none;
}
.fab-stack .fab{
  pointer-events:auto;
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  text-decoration:none;color:#fff;outline:0;
}
.fab-stack .fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px rgba(0,0,0,.28),0 4px 10px rgba(0,0,0,.16);}
.fab-stack .fab:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 0 5px rgba(0,0,0,.25);}
.fab-stack .fab:active{transform:translateY(0) scale(.97);}
.fab-stack .fab svg{width:28px;height:28px;fill:#fff;display:block;}
.fab-call{background:#128C7E;}        /* WhatsApp brand dark-green — "call" */
.fab-call:hover{background:#0e7468;}
.fab-whatsapp{background:#25D366;}    /* Official WhatsApp green */
.fab-whatsapp:hover{background:#1ebc59;}
/* Subtle pulse to draw eye, runs once on load */
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 8px 24px rgba(0,0,0,.22);}80%{box-shadow:0 0 0 16px rgba(37,211,102,0),0 8px 24px rgba(0,0,0,.22);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 8px 24px rgba(0,0,0,.22);}}
.fab-whatsapp{animation:fabPulse 2.4s ease-out 1.5s 2;}
@media (max-width:480px){
  .fab-stack{right:16px;bottom:16px;gap:10px;}
  .fab-stack .fab{width:50px;height:50px;}
  .fab-stack .fab svg{width:24px;height:24px;}
}
@media (prefers-reduced-motion:reduce){
  .fab-stack .fab,.fab-whatsapp{animation:none;transition:none;}
}

/* ===== Scroll-to-top FAB (bottom-left, frosted glass) ===== */
.scroll-top-fab{
  position:fixed;left:24px;bottom:24px;z-index:9999;
  width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:#1A1560;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(26,21,96,.18);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 4px 14px rgba(17,14,69,.10), inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease,
             background .2s ease, color .2s ease,
             border-color .2s ease, box-shadow .25s ease;
}
.scroll-top-fab.visible{opacity:.92;pointer-events:auto;transform:translateY(0);}
.scroll-top-fab:hover{
  opacity:1;
  background:rgba(26,21,96,.92);
  color:#fff;
  border-color:rgba(26,21,96,.4);
  box-shadow:0 10px 24px rgba(17,14,69,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateY(-2px);
}
.scroll-top-fab:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 0 5px rgba(26,21,96,.35);}
.scroll-top-fab:active{transform:translateY(0) scale(.96);}
.scroll-top-fab svg{width:18px;height:18px;fill:currentColor;display:block;}
@media (max-width:480px){
  .scroll-top-fab{left:16px;bottom:16px;width:42px;height:42px;}
  .scroll-top-fab svg{width:16px;height:16px;}
}
@media (prefers-reduced-motion:reduce){
  .scroll-top-fab{transition:opacity .2s ease;}
}
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter:blur(1px)){
  .scroll-top-fab{background:rgba(255,255,255,.85);}
}

/* ===== Monochrome social buttons (Instagram, Facebook) ===== */
.footer-social .soc-ig,
.footer-social .soc-fb{
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.footer-social .soc-ig svg,
.footer-social .soc-fb svg{ fill:#fff; }
.footer-social .soc-ig:hover,
.footer-social .soc-fb:hover{
  background:rgba(255,255,255,0.16) !important;
  border-color:rgba(255,255,255,0.35) !important;
  transform:translateY(-2px);
}

/* ===== Form submission feedback (success / error) ===== */
.vrx-form-msg{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;border-radius:8px;margin:18px 0;
  font-size:14.5px;line-height:1.6;
}
.vrx-form-msg svg{
  flex-shrink:0;width:24px;height:24px;margin-top:2px;
}
.vrx-form-msg strong{
  display:block;font-family:var(--font-h);font-size:15px;
  font-weight:600;margin-bottom:2px;
}
.vrx-form-msg p{margin:0;}
.vrx-form-msg--success{
  background:#E8F7EE;border:1px solid #B4E3C5;color:#0E6938;
}
.vrx-form-msg--success svg{color:#1A8754;stroke:#1A8754;}
.vrx-form-msg--error{
  background:#FCEEEA;border:1px solid #F4C6BB;color:#A33218;
}
.vrx-form-msg--error svg{color:#C8462A;stroke:#C8462A;}

/* ===== Popup booking form: 2-column grid layout =====
   Name + Email on row 1, Phone + PIN on row 2, then dropdowns + button full-width.
   Applies to both the global modal (.book-modal-form) and the page-specific
   booking modals (#bookingModal .booking-form). Collapses to 1 column on mobile. */
.book-modal-form,
#bookingModal .booking-form{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:14px 12px;
}
/* Full-width children inside the popup forms */
.book-modal-form > select,
.book-modal-form > textarea,
.book-modal-form > button,
.book-modal-form > .book-modal-foot,
#bookingModal .booking-form > label:has(select),
#bookingModal .booking-form > label.full,
#bookingModal .booking-form > button,
#bookingModal .booking-form > .booking-form-foot{
  grid-column:1 / -1;
}
/* Reset margins on labels so the grid spacing is consistent */
#bookingModal .booking-form > label{ margin:0; }
/* Keep the 2-column layout (Name+Email, Phone+PIN) on mobile and tablet too —
   makes the popup feel more compact and reduces vertical scroll. Selects and
   the submit button still span both columns via the grid-column:1/-1 rule
   above. Inputs get a smaller padding/font on very narrow screens so the
   placeholder text doesn't get clipped. */
@media (max-width:520px){
  .book-modal-form,
  #bookingModal .booking-form{
    gap:10px 8px;
  }
  .book-modal-form > input,
  #bookingModal .booking-form > input,
  #bookingModal .booking-form > label > input{
    font-size:13.5px;
    padding:11px 12px;
  }
  .book-modal-form > input::placeholder,
  #bookingModal .booking-form input::placeholder{
    font-size:13px;
  }
}

/* ===== Inline booking-form fix: stack label above input, proper input styling
   Applies to: .booking-form (physio inline + modal), .enquiry-form (contact-us),
   .hp-book-form (health packages), .single-centre-form .booking-form.
   The popup grid layout (.book-modal-form, #bookingModal .booking-form) is
   handled separately above. */
.booking-form > label,
.enquiry-form > label,
.hp-book-form > label{
  display:flex !important;
  flex-direction:column !important;
  gap:6px;
  font-family:var(--font-h);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--gray-600);
  margin:0;
}
.booking-form > label > input,
.booking-form > label > select,
.booking-form > label > textarea,
.enquiry-form > label > input,
.enquiry-form > label > select,
.enquiry-form > label > textarea,
.hp-book-form > label > input,
.hp-book-form > label > select,
.hp-book-form > label > textarea{
  display:block !important;
  width:100% !important;
  padding:12px 14px;
  font-family:var(--font-b);
  font-size:14.5px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:var(--gray-900);
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:6px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance:auto;
}
.booking-form > label > input:focus,
.booking-form > label > select:focus,
.booking-form > label > textarea:focus,
.enquiry-form > label > input:focus,
.enquiry-form > label > select:focus,
.enquiry-form > label > textarea:focus,
.hp-book-form > label > input:focus,
.hp-book-form > label > select:focus,
.hp-book-form > label > textarea:focus{
  outline:none;
  border-color:var(--orange);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(232,123,30,.12);
}
.booking-form > label > input:invalid:not(:placeholder-shown),
.enquiry-form > label > input:invalid:not(:placeholder-shown),
.hp-book-form > label > input:invalid:not(:placeholder-shown){
  border-color:#E55;
}
.booking-form > button[type="submit"],
.enquiry-form > button[type="submit"],
.hp-book-form > button[type="submit"]{
  margin-top:6px;
  width:100%;
}

/* Two-column layout for the inline forms too (Name+Email, Phone+PIN, then full-width fields).
   This matches the popup form layout you wanted. */
.booking-form,
.enquiry-form,
.hp-book-form{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:18px 14px !important;
}
.booking-form > label:has(select),
.booking-form > label.full,
.booking-form > button,
.enquiry-form > label:has(select),
.enquiry-form > label.full,
.enquiry-form > button,
.hp-book-form > label:has(select),
.hp-book-form > label.full,
.hp-book-form > button{
  grid-column:1 / -1;
}
@media (max-width:640px){
  .booking-form,
  .enquiry-form,
  .hp-book-form{
    grid-template-columns:1fr !important;
  }
  .booking-form > *,
  .enquiry-form > *,
  .hp-book-form > *{
    grid-column:auto;
  }
}

/* =========================================================================
   PHYSIO SUBSERVICE PAGES — MOBILE OVERRIDES
   ========================================================================= */
@media(max-width:768px){
  html body section > .container,
  html body .hero > .container,
  html body .hero-spec-strip > .container,
  html body .about-aqua > .container,
  html body .pricing > .container,
  html body .conditions > .container,
  html body .techniques > .container,
  html body .first-visit-h > .container,
  html body .why > .container,
  html body .reviews > .container,
  html body .testi > .container,
  html body .centres > .container,
  html body .areas-section > .container,
  html body .uni-cta > .container,
  html body .faq > .container{
    padding-left:16px !important; padding-right:16px !important;
  }

  html body .hero-breadcrumb{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    gap:6px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:10.5px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }
  html body .hero-breadcrumb a,
  html body .hero-breadcrumb .current,
  html body .hero-breadcrumb .sep{
    font-size:10.5px !important;
    white-space:nowrap;
  }
  html body .hero-breadcrumb .sep{ margin:0 2px !important; opacity:0.6; }

  html body .hero h1{
    font-size:24px !important;
    line-height:1.2 !important;
    letter-spacing:-0.4px !important;
    margin-bottom:12px !important;
  }
  html body .hero .hero-sub{
    font-size:13.5px !important;
    line-height:1.55 !important;
  }

  html body .about-aqua-stats{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    gap:10px !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:8px 0 !important;
  }
  html body .about-aqua-stats::-webkit-scrollbar{display:none}
  html body .about-aqua-stat{
    flex:1 1 0 !important;
    min-width:0 !important;
    text-align:center !important;
    padding:0 6px !important;
    border-right:1px solid var(--border) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center;
    justify-content:center;
  }
  html body .about-aqua-stat:last-child{ border-right:none !important; }
  html body .about-aqua-stat .num{
    font-size:24px !important;
    line-height:1 !important;
    letter-spacing:-0.6px !important;
    margin-bottom:6px !important;
    display:block;
  }
  html body .about-aqua-stat .num em{ font-size:16px !important; }
  html body .about-aqua-stat .lbl{
    font-size:10.5px !important;
    line-height:1.35 !important;
    color:var(--gray-500) !important;
  }

  html body .pricing-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:14px !important;
    padding:8px 4px !important;
  }
  html body .pricing-grid::-webkit-scrollbar{display:none}
  html body .pricing-grid > .pricing-card{
    flex:0 0 calc(100% - 8px) !important;
    scroll-snap-align:center !important;
    min-width:0;
    width:auto;
  }
  html body .pricing-nav{
    display:flex !important;
    justify-content:center;
    gap:12px;
    margin-top:14px;
  }
  html body .pricing-nav-btn{
    width:42px; height:42px; border-radius:50%;
    background:var(--white); border:1px solid var(--border);
    color:var(--navy); display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(17,14,69,0.06); cursor:pointer;
  }
  html body .pricing-nav-btn svg{ width:16px; height:16px; stroke-width:2; }
  html body .pricing-nav-btn:disabled{ opacity:.4; }

  html body .cond-row .cond-row-arrow{ display:none !important; }
  html body .cond-row{ padding-right:16px !important; }

  html body .tech-grid,
  html body .tech-grid.tech-grid--4,
  html body .tech-grid.tech-grid--3{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
  }
  html body .tech-card{ padding:18px 14px !important; min-width:0; }
  html body .tech-card-name{ font-size:14px !important; line-height:1.25 !important; }
  html body .tech-card-desc{ font-size:12.5px !important; line-height:1.5 !important; }
  html body .tech-card-icon{ width:36px !important; height:36px !important; }
  html body .tech-card-icon svg{ width:18px !important; height:18px !important; }
  html body .tech-card-num{ font-size:14px !important; }

  html body .visit-h-track{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:0 !important;
    position:relative;
    padding-left:54px !important;
    margin-top:24px !important;
  }
  html body .visit-h-track::before{
    content:'' !important;
    position:absolute !important;
    left:19px !important;
    top:20px !important;
    bottom:20px !important;
    width:2px !important;
    height:auto !important;
    background-color:#E87B1E !important;
    background-image:none !important;
    border:none !important;
    opacity:1 !important;
    z-index:0 !important;
    pointer-events:none !important;
    display:block !important;
  }
  html body .visit-h-step{
    display:block !important;
    position:relative;
    padding:6px 0 18px 0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  html body .visit-h-step:last-child{ padding-bottom:0 !important; }
  html body .visit-h-step::before{ display:none !important; }
  html body .visit-h-step::after{ display:none !important; }
  html body .visit-h-num{
    position:absolute !important;
    left:-54px !important;
    top:8px !important;
    width:42px !important; height:42px !important;
    border-radius:50% !important;
    background:var(--orange) !important;
    border:3px solid var(--white) !important;
    color:var(--white) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-family:var(--font-h);
    font-size:13px !important;
    font-weight:700 !important;
    z-index:2 !important;
    box-shadow:0 0 0 2px var(--orange), 0 4px 10px rgba(232,123,30,0.28);
  }
  html body .visit-h-content{
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:2px 0 0 0 !important;
    box-shadow:none !important;
  }
  html body .visit-h-content h3{ font-size:15px !important; margin-bottom:4px !important; line-height:1.3 !important; color:var(--navy) !important; }
  html body .visit-h-content p{ font-size:13px !important; line-height:1.55 !important; color:var(--gray-600) !important; }
  html body .visit-h-cta{ flex-direction:column !important; gap:10px !important; margin-top:20px !important; }
  html body .visit-h-cta .btn-primary,
  html body .visit-h-cta .btn-secondary{ width:100% !important; justify-content:center !important; }

  html body section.why .why-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:36px !important;
  }
  html body section.why .why-block .num-big{
    font-size:34px !important;
    line-height:1 !important;
    color:var(--orange) !important;
  }
  html body section.why .why-block-text h3{ font-size:16px !important; }
  html body section.why .why-block-text p{ font-size:13.5px !important; line-height:1.6 !important; }

  html body .sh-eyebrow,
  html body .section-eyebrow{
    display:inline-block !important;
    white-space:nowrap !important;
    font-size:10.5px !important;
    letter-spacing:1.8px !important;
    margin-bottom:10px !important;
  }
  html body .sh-center h2,
  html body .about-aqua-head h2,
  html body .pricing h2,
  html body .conditions h2,
  html body .techniques h2,
  html body .first-visit-h h2,
  html body .visit-h-intro h2,
  html body section.why h2,
  html body .reviews-head-left h2{
    font-size:22px !important;
    letter-spacing:-0.4px !important;
    line-height:1.2 !important;
    margin-bottom:10px !important;
  }
  html body .sh-center p,
  html body .about-aqua-head p,
  html body .visit-h-intro p{
    font-size:13.5px !important;
    line-height:1.55 !important;
  }

  /* Reviews section on mobile — match homepage look */
  html body .reviews{ padding:48px 0 !important; }
  html body .reviews .reviews-head-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin-bottom:22px !important;
  }
  html body .reviews-head-left{ max-width:none !important; }
  html body .reviews-head-left h2{
    font-size:24px !important;
    line-height:1.18 !important;
    letter-spacing:-0.4px !important;
    margin-bottom:10px !important;
  }
  html body .reviews-head-left p{ font-size:13px !important; line-height:1.55 !important; }
  html body .reviews-aggregate{
    flex-direction:row !important;
    align-items:center !important;
    width:100% !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  html body .reviews-agg-num{ font-size:26px !important; }
  html body .reviews-agg-num em{ font-size:16px !important; }
  html body .reviews-agg-lbl{ font-size:11.5px !important; }
  html body .reviews-track-outer{ margin:0 !important; }
  html body .reviews-track-wrap{ padding:12px 0 !important; margin:-12px 0 !important; }
  html body .reviews-track{ gap:14px !important; }
  html body .review-card{
    flex:0 0 100% !important;
    min-height:200px !important;
    padding:22px !important;
    background:var(--white) !important;
    border-radius:18px !important;
  }
  html body .reviews-nav-btn{ display:none !important; }
  html body .reviews-controls{ margin-top:18px !important; }
  html body .reviews-dot{ width:24px !important; height:3px !important; }
  html body .reviews-dot.active{ width:36px !important; background:var(--orange) !important; }
  html body .reviews-more{ margin-top:18px !important; }
  html body .reviews-more-btn{ font-size:12.5px !important; padding:10px 18px !important; }
}
@media(max-width:480px){
  html body .hero h1{ font-size:21px !important; line-height:1.22 !important; }
  html body .hero-breadcrumb{ font-size:9.5px !important; }
  html body .about-aqua-stat .num{ font-size:20px !important; }
  html body .about-aqua-stat .num em{ font-size:13px !important; }
  html body .about-aqua-stat .lbl{ font-size:9.5px !important; }
  html body .tech-card-name{ font-size:13px !important; }
  html body section.why .why-block .num-big{ font-size:28px !important; }
}

/* =====================================================
   MOBILE POLISH PASS  (2026-06)
   Applies site-wide via high-specificity overrides.
   ===================================================== */

/* 1) Floating WhatsApp + Call FABs.
   - Visible everywhere on desktop.
   - Hidden on mobile ONLY for diagnostics sub-service / test pages. */
@media(max-width:760px){
  html body .fab-stack{ right:14px !important; bottom:14px !important; gap:10px !important; }
  html body .fab-stack .fab{ width:46px !important; height:46px !important; }
  html body .fab-stack .fab svg{ width:22px !important; height:22px !important; }
  html body.diagnostics-page .fab-stack{ display:none !important; }
}

/* 2) Diagnostics USP strip — thinner on desktop, marquee on mobile */
@media(min-width:761px){
  html body section.usps{ padding:10px 0 !important; }
  html body section.usps .usp{ padding:4px 24px !important; }
  html body section.usps .usp-icon{ width:34px !important; height:34px !important; }
  html body section.usps .usp-icon svg{ width:16px !important; height:16px !important; }
  html body section.usps .usp-title{ font-size:14px !important; }
}
@media(max-width:760px){
  html body section.usps{ padding:0 !important; overflow:hidden !important; position:relative !important; }
  html body section.usps::before,
  html body section.usps::after{
    content:""; position:absolute; top:0; bottom:0; width:36px; z-index:2; pointer-events:none;
  }
  html body section.usps::before{ left:0; background:linear-gradient(90deg,var(--bg-soft,#FAFAFD),rgba(250,250,253,0)) !important; }
  html body section.usps::after{ right:0; background:linear-gradient(270deg,var(--bg-soft,#FAFAFD),rgba(250,250,253,0)) !important; }
  html body section.usps .usps-inner{
    display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important;
    width:max-content !important; gap:0 !important;
    animation:vrxUspsScroll 12s linear infinite !important;
    padding:11px 0 !important;
  }
  html body section.usps .usp{
    flex:0 0 auto !important; border-right:1px solid var(--line) !important;
    padding:0 22px !important; gap:9px !important;
  }
  html body section.usps .usp-icon{ width:28px !important; height:28px !important; }
  html body section.usps .usp-icon svg{ width:14px !important; height:14px !important; }
  html body section.usps .usp-title{ font-size:13px !important; white-space:nowrap !important; }
}
@keyframes vrxUspsScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* 3) Diagnostics ABOUT stats — 4 in a row on mobile, compact */
@media(max-width:760px){
  html body .about-stats{
    grid-template-columns:repeat(4,1fr) !important;
    gap:0 !important; margin-top:32px !important;
  }
  html body .about-stat{ padding:6px 6px !important; }
  html body .about-stat .num{ font-size:22px !important; margin-bottom:6px !important; letter-spacing:-.4px !important; }
  html body .about-stat .num .small{ font-size:14px !important; }
  html body .about-stat .txt{ font-size:10.5px !important; line-height:1.35 !important; max-width:none !important; }
  html body .about-stat{ border-right-width:1px !important; }
}

/* 4) Tests grid — 2 per row on mobile, tighter card, single-line CTA & pill */
@media(max-width:760px){
  html body .tests-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  html body .test-card{
    padding:16px 14px !important;
    min-height:0 !important;
    border-radius:14px !important;
  }
  html body .test-top{ margin-bottom:12px !important; gap:6px !important; }
  html body .test-icon{ width:36px !important; height:36px !important; border-radius:10px !important; }
  html body .test-icon svg{ width:18px !important; height:18px !important; }
  html body .test-tag{ font-size:10px !important; padding:3px 8px !important; letter-spacing:.2px !important; white-space:nowrap !important; }
  html body .test-tag svg{ width:10px !important; height:10px !important; }
  html body .test-card h3{ font-size:14.5px !important; line-height:1.25 !important; margin-bottom:4px !important; letter-spacing:-.2px !important; }
  html body .test-sub{ font-size:12px !important; margin-bottom:12px !important; line-height:1.45 !important; }
  html body .test-price-row{ margin-bottom:12px !important; gap:6px !important; }
  html body .test-price{ font-size:18px !important; letter-spacing:-.3px !important; }
  html body .test-strike{ font-size:12px !important; }
  html body .test-cta{
    padding:9px 14px !important; font-size:12.5px !important;
    width:100% !important; align-self:stretch !important;
    white-space:nowrap !important;
  }
  html body .test-cta svg{ width:11px !important; height:11px !important; }
  /* keep filter pills usable on mobile */
  html body .filter-bar{ margin-bottom:24px !important; max-width:calc(100vw - 32px) !important; }
  html body .filter-pill{ font-size:13px !important; padding:9px 14px !important; }
}

/* 5) Blogs page — mobile carousel, 1 card per view */
@media(max-width:760px){
  html body section.blog-list .container{ padding-left:0 !important; padding-right:0 !important; }
  html body .blog-grid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
    gap:14px !important;
    padding:4px 16px 18px !important;
    margin:0 !important;
    scroll-padding-left:16px !important;
  }
  html body .blog-grid::-webkit-scrollbar{ display:none !important; }
  html body .blog-grid .blog-card{
    flex:0 0 calc(100% - 12px) !important;
    scroll-snap-align:start !important;
  }
}

/* 6) Contact page — 3 contact tiles in a single row on mobile */
@media(max-width:760px){
  html body .contact-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
  }
  html body .contact-grid .contact-card{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; text-align:center !important;
    padding:14px 8px !important; gap:6px !important;
    border-radius:14px !important; min-width:0 !important;
  }
  html body .contact-grid .contact-card h3,
  html body .contact-grid .contact-card .contact-title{
    font-size:12.5px !important; line-height:1.2 !important; margin:0 !important;
  }
  html body .contact-grid .contact-card .contact-meta,
  html body .contact-grid .contact-card p{ display:none !important; }
  html body .contact-grid .contact-ic{
    width:36px !important; height:36px !important; border-radius:10px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    margin-bottom:2px !important;
  }
  html body .contact-grid .contact-ic svg{ width:18px !important; height:18px !important; }
}

/* =====================================================
   HOMEPAGE-STYLE REVIEWS section (site-wide).
   Overrides per-page .reviews/.reviews-track inline CSS
   so the new markup looks identical to index.html.
   ===================================================== */
html body section.reviews{ padding:88px 0 !important; background:#FAFAFD !important; border-top:0 !important; border-bottom:0 !important; position:relative; overflow:hidden; }
html body section.reviews .reviews-head-row{ display:flex !important; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:48px; }
html body section.reviews .reviews-head-left{ max-width:560px; }
html body section.reviews .reviews-head-left .sh-eyebrow{ display:inline-block; font-family:var(--font-h); font-size:11.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }
html body section.reviews .reviews-head-left h2{ font-family:var(--font-h); font-size:42px; font-weight:400; color:#1A1560; line-height:1.08; letter-spacing:-1.2px; margin-bottom:14px; }
html body section.reviews .reviews-head-left h2 em{ font-style:normal; color:var(--orange); font-weight:500; }
html body section.reviews .reviews-head-left p{ font-size:15px; color:#72728A; line-height:1.65; max-width:480px; margin:0; }
html body section.reviews .reviews-aggregate{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
html body section.reviews .reviews-agg-stars{ display:flex; gap:2px; margin-bottom:2px; }
html body section.reviews .reviews-agg-stars svg{ width:17px; height:17px; fill:var(--orange); color:var(--orange); }
html body section.reviews .reviews-agg-num{ font-family:var(--font-h); font-size:34px; font-weight:600; color:#1A1560; letter-spacing:-1.2px; line-height:1; display:flex; align-items:baseline; gap:4px; }
html body section.reviews .reviews-agg-num em{ font-style:normal; color:#9999A8; font-weight:300; font-size:22px; }
html body section.reviews .reviews-agg-lbl{ font-size:12.5px; color:#72728A; display:flex; align-items:center; gap:7px; font-family:var(--font-h); font-weight:500; }
html body section.reviews .gicon-sm{ width:14px; height:14px; display:inline-block; }
html body section.reviews .gicon-sm svg{ width:100%; height:100%; display:block; }
html body section.reviews .reviews-track-outer{ position:relative; margin:0 -8px; }
html body section.reviews .reviews-track-wrap{ position:relative; overflow:hidden; padding:18px 8px; margin:-18px 0; }
html body section.reviews .reviews-track{ display:flex !important; gap:22px !important; transition:transform .6s cubic-bezier(.4,0,.2,1); transform:translateX(0); will-change:transform; }
html body section.reviews .review-card{ flex:0 0 calc((100% - 44px) / 3) !important; background:#fff !important; border:1px solid #ECECF2 !important; border-radius:14px !important; padding:28px !important; display:flex !important; flex-direction:column !important; min-height:260px !important; transition:all .3s ease; min-width:0; }
html body section.reviews .review-card:hover{ box-shadow:0 12px 28px rgba(17,14,69,.07); transform:translateY(-3px); border-color:#D8D8E2; }
html body section.reviews .review-head{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
html body section.reviews .review-avatar{ width:44px; height:44px; border-radius:50%; background:#1A1560; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:15px; font-weight:600; flex-shrink:0; letter-spacing:-0.3px; }
html body section.reviews .review-avatar.c1{ background:#1A1560; }
html body section.reviews .review-avatar.c2{ background:#0EA5E9; }
html body section.reviews .review-avatar.c3{ background:#7B5CC9; }
html body section.reviews .review-avatar.c4{ background:#E87B1E; }
html body section.reviews .review-avatar.c5{ background:#28C76F; }
html body section.reviews .review-avatar.c6{ background:#C04A6E; }
html body section.reviews .review-meta{ flex:1; min-width:0; }
html body section.reviews .review-name{ font-family:var(--font-h); font-size:14.5px; font-weight:500; color:#1A1560; display:block; }
html body section.reviews .review-date{ font-size:11.5px; color:#9999A8; margin-top:2px; display:block; }
html body section.reviews .review-google-mark{ width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
html body section.reviews .review-google-mark svg{ width:100%; height:100%; display:block; }
html body section.reviews .review-stars{ display:flex; gap:2px; margin-bottom:12px; }
html body section.reviews .review-stars svg{ width:13px; height:13px; fill:var(--orange); color:var(--orange); }
html body section.reviews .review-text{ font-size:14px; color:#3D3D4E; line-height:1.65; flex:1; margin:0; }
html body section.reviews .reviews-controls{ display:flex; align-items:center; justify-content:center; margin-top:32px; gap:16px; }
html body section.reviews .reviews-dots{ display:flex; gap:7px; align-items:center; }
html body section.reviews .reviews-dot{ width:28px; height:3px; border-radius:2px; background:#D8D8E2; border:0; cursor:pointer; transition:all .25s; padding:0; }
html body section.reviews .reviews-dot.active{ background:var(--orange); width:42px; }
html body section.reviews .reviews-nav-btn{ width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid #ECECF2; color:#1A1560; cursor:pointer; display:flex !important; align-items:center; justify-content:center; transition:all .2s; position:absolute; top:50%; transform:translateY(-50%); z-index:10; box-shadow:0 4px 10px rgba(17,14,69,.06); }
html body section.reviews .reviews-nav-btn.prev{ left:-22px; }
html body section.reviews .reviews-nav-btn.next{ right:-22px; }
html body section.reviews .reviews-nav-btn:hover:not(:disabled){ background:#1A1560; color:#fff; border-color:#1A1560; transform:translateY(-50%) scale(1.05); }
html body section.reviews .reviews-nav-btn:disabled{ opacity:.4; cursor:not-allowed; transform:translateY(-50%); }
html body section.reviews .reviews-nav-btn svg{ width:16px; height:16px; stroke-width:2; }
html body section.reviews .reviews-more{ display:flex; justify-content:center; margin-top:24px; }
html body section.reviews .reviews-more-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 22px; background:#fff; color:#1A1560; font-family:var(--font-h); font-size:13.5px; font-weight:600; border-radius:10px; border:1px solid #ECECF2; transition:all .2s; text-decoration:none; }
html body section.reviews .reviews-more-btn:hover{ background:#1A1560 !important; color:#fff !important; border-color:#1A1560; }
html body section.reviews .reviews-more-btn .ext{ width:13px; height:13px; stroke-width:2; stroke:currentColor; fill:none; }
@media(max-width:960px){ html body section.reviews .review-card{ flex-basis:calc((100% - 22px) / 2) !important; } }
@media(max-width:640px){
  html body section.reviews{ padding:54px 0 !important; }
  html body section.reviews .container{ padding-left:16px !important; padding-right:16px !important; }
  html body section.reviews .review-card{ flex-basis:calc(100% - 12px) !important; min-height:auto !important; padding:22px !important; }
  html body section.reviews .reviews-nav-btn{ display:none !important; }
  html body section.reviews .reviews-head-left h2{ font-size:28px !important; }
}