/* =============================================================================
   HERO: DARK MASK + WHITE TEXT  (loaded last)
   Dark text over moving footage was hard to read on phones. The hero now
   masks the video in navy and sets the copy in white; the rest of the site
   stays light.
   ============================================================================= */
html body .hero-canvas-wrapper,html body .hero-canvas-frame{background:#0A1626!important}
html body .hero-bg-video{filter:saturate(1.05) contrast(1.05)!important}
html body .hero-bg-poster{filter:none!important}
html body .hero-bg-overlay{background:
  radial-gradient(ellipse 75% 60% at 50% 42%,rgba(6,16,34,.42) 0%,rgba(6,16,34,.62) 70%,rgba(6,16,34,.78) 100%),
  linear-gradient(180deg,rgba(6,16,34,.55) 0%,rgba(6,16,34,.25) 30%,rgba(6,16,34,.40) 62%,rgba(6,16,34,.92) 100%)!important}
@media (max-width:768px){html body .hero-bg-overlay{background:
  linear-gradient(180deg,rgba(6,16,34,.62) 0%,rgba(6,16,34,.50) 28%,rgba(6,16,34,.58) 55%,rgba(6,16,34,.88) 100%)!important}}
html body .fx-aurora i{opacity:.35!important}
html body .fx-spot{background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),rgba(120,170,255,.12),rgba(120,170,255,0) 70%)!important}

/* copy */
html body #heroH1 .ln-primary,html body #heroH1 .ln-secondary{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 24px rgba(0,0,0,.35)!important}
html body #heroH1 .accent-editorial{color:#8EC5FF!important;-webkit-text-fill-color:#8EC5FF!important;text-shadow:0 2px 24px rgba(0,0,0,.3)!important;
  background-image:linear-gradient(90deg,rgba(142,197,255,.45),rgba(56,189,248,.45))!important}
html body .hero-sub{color:rgba(255,255,255,.86)!important;text-shadow:0 1px 14px rgba(0,0,0,.4)!important}
html body .hero-sub strong,html body .hero-sub a{color:#fff!important}

/* buttons: primary stays a white pill, WhatsApp becomes a clear glass outline */
html body .hero-wa-btn{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.4)!important;box-shadow:none!important}
html body .hero-wa-btn .btn-text{color:#fff!important}
html body .hero-wa-btn .btn-contact-icon{color:#4ADE80!important}

/* clinic cards */
html body .hc-card{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:0 18px 40px -24px rgba(0,0,0,.6)!important;color:#fff!important}
html body .hc-card:hover{border-color:rgba(142,197,255,.6)!important}
html body .hc-pin{background:rgba(255,255,255,.14)!important;color:#fff!important}
html body .hc-txt b{color:#fff!important}
html body .hc-txt span{color:rgba(255,255,255,.75)!important}
html body .hc-go{background:#fff!important;color:#1554B8!important}
html body .hc-card:hover .hc-go{background:#8EC5FF!important;color:#0A1626!important}
html body .hc-status{color:rgba(255,255,255,.82)!important;text-shadow:0 1px 10px rgba(0,0,0,.4)}
html body .hc-status.open span b{color:#4ADE80!important}
html body .hc-status.open i,html body .hc-status.open i::after{background:#4ADE80;border-color:#4ADE80}

/* trust strip */
html body .hero-trust-strip{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important}
html body .hero-trust-strip .trust-stat-title{color:#fff!important}
html body .hero-trust-strip .trust-badges-row span{color:rgba(255,255,255,.78)!important}
html body .hero-trust-strip .trust-badges-row span::before{color:#8EC5FF!important}
html body #heroVideoToggle,html body .hero-canvas-frame .video-toggle-btn{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}

/* ---------------- phones ---------------- */
@media (max-width:768px){
  html body .hero-sub{font-size:15.5px!important;line-height:1.6!important}
  html body .hero-centres{gap:10px}
  html body .hc-card{grid-template-columns:auto 1fr;padding:12px 14px}
  html body .hc-go{grid-column:2;justify-self:start;margin-top:4px}
  html body .hc-status{font-size:13px;text-align:center;justify-content:center;line-height:1.4}
  /* the floating buttons repeat the hero's own WhatsApp + Directions: keep them away until the hero is passed */
  html.fx-hero-in body .cb-launch-container{opacity:0!important;pointer-events:none!important;transform:translateY(24px)!important}
  html body .cb-launch-container{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
}