/* Eric 10-01 — desktop header, side buttons, rating badge, EN/ES switch.
   Gold and glow copied from H&R Automotive (#FFC233 gold, #F2A900 glow, Space Grotesk 700).
   EN/ES pill is the canonical switch (H&R black-ink.css). */

/* EN/ES pill in the desktop nav (replaces the "Español" text link) */
.desk-lang{height:27px; display:inline-flex; align-items:stretch; flex:0 0 auto; overflow:hidden; border:1px solid #344154; border-radius:999px; background:#070d16}
.desk-lang .ls{display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:27px; padding:0 8px; font:800 9.6px/1 'Inter',Arial,sans-serif; letter-spacing:.06em; text-decoration:none}
.desk-lang .ls + .ls{border-left:1px solid #344154}
.desk-lang .ls[lang="en"]{color:#2f80ed}
.desk-lang .ls[lang="es"]{color:#e53935}
.desk-lang .ls[lang="en"].is-on{background:#2870d0; color:#fff}
.desk-lang .ls[lang="es"].is-on{background:#e53935; color:#fff}
.desk-lang .ls:not(.is-on):hover{background:rgba(255,255,255,.08)}
.desk-lang .ls::after{display:none}
.nav a.ls{padding:0 8px}

/* header: logo hard left, menu items never wrap */
.hdr-in{padding-left:clamp(8px,1vw,18px)}
.nav a{white-space:nowrap}
@media (max-width:1560px){ .nav{gap:16px} .nav a{font-size:14px} }

/* side shortcut buttons: below the header, centred in the visible hero */
@media (min-width:761px){
  .action-rail{top:calc(50vh + var(--hdr-h,172px) / 2)}
}

/* Reviews section (under the self-assessment): 5.0 in H&R gold with a radiant pulse, stars glowing.
   Font, size and star shapes unchanged. The header badge is left exactly as it was. */
.revsec-score{color:#FFC233; animation:preciseRadGlow 2.8s ease-in-out infinite}
.revsec-stars svg{fill:#FFC233; animation:preciseStarGlow 2.8s ease-in-out infinite}
@keyframes preciseRadGlow{
  0%,100%{text-shadow:0 0 6px rgba(242,169,0,.35), 0 0 12px rgba(242,169,0,.18)}
  50%{text-shadow:0 0 12px rgba(242,169,0,.9), 0 0 24px rgba(242,169,0,.6), 0 0 40px rgba(242,169,0,.32)}
}
@keyframes preciseStarGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(242,169,0,.4))}
  50%{filter:drop-shadow(0 0 6px rgba(242,169,0,.95)) drop-shadow(0 0 12px rgba(242,169,0,.55))}
}
@media (prefers-reduced-motion:reduce){ .revsec-score,.revsec-stars svg{animation:none} }

/* the three static review cards: stars centred */
.quote-stars{justify-content:center}
.quote-stars svg{fill:#FFC233; animation:preciseStarGlow 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .quote-stars svg{animation:none} }

/* Public-site accessibility and mobile refinements — October 5, 2026. */
.skip-link{position:fixed;top:8px;left:12px;z-index:10000;transform:translateY(-160%);padding:10px 18px;border:2px solid #14615D;border-radius:999px;background:#E4F4F2;color:#16302E;font:700 14px/1.3 Inter,sans-serif}
.skip-link:focus{transform:none;outline:3px solid #16302E;outline-offset:2px}
main:focus{outline:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #14615D;outline-offset:4px}
main{scroll-margin-top:180px}
.hero .hero-title{font-style:italic;max-width:21ch}
.kb .kb-slide{background-image:var(--hero-image)}
.f-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:#16302E}
label.f-legend{display:block}
button.opt{text-align:left;color:#16302E;min-height:44px;padding:10px 14px;border-radius:999px;background:#EDF8F6;border-color:#6C9690}
button.opt.sel{background:#D5F2E6;border-color:#14615D}
button.opt:focus-visible,a.btn:focus-visible,button.btn:focus-visible{outline:3px solid #14615D;outline-offset:3px}
.hero a.btn:focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kb .kb-slide{animation:none;transform:none;opacity:0;will-change:auto}
  .kb .kb-slide:first-child{opacity:1}
}
@media(max-width:760px){
  .kb .kb-slide{background-image:var(--hero-image-mobile)}
  main{scroll-margin-top:130px}
  .public-home .hero{min-height:var(--opening-hero-height,0px)}
  .public-home .hero-in{padding:64px 20px 30px}
  .public-home .hero-title{font-size:38px;line-height:1.08;max-width:19ch;margin-bottom:16px}
  .public-home .hero-eyebrow{margin-bottom:14px}
  .public-home .hero-sub{font-size:15px;line-height:1.6;margin-bottom:20px}
  .public-home .hero-micro{font-size:12px;gap:8px 14px}
  .public-home .action-rail{gap:0}
  .action-rail > a.rail-btn.rail-mobile-only,.action-rail > a.rail-btn.rail-book{height:48px;border:1px solid #4E7771;border-radius:0;color:#16302E;gap:2px;font-size:11px;box-shadow:0 2px 5px #16302E12}
  .action-rail > a.rail-btn.rail-book{background:#F6DCE5;font-weight:800}
  .action-rail > a.rail-btn.rail-text{background:#DCEAFB}
  .action-rail > a.rail-btn.rail-whatsapp{background:#D5F2E6}
  .action-rail > a.rail-btn.rail-call{background:#E5EDCB}
  .action-rail > a.rail-btn svg{stroke:#16302E;width:18px;height:18px}
  .action-rail > a.rail-btn:hover{filter:brightness(.96)}
  .action-rail > a.rail-btn:focus-visible{outline:3px solid #16302E;outline-offset:2px}
  .action-rail > button.cb-btn{background:#CDEEEA;color:#16302E;border:1px solid #4E7771}
}

/* Facial benefits: widest to narrowest in phone view. */
@media(max-width:480px){
 .facials-page .mini .pill-list{flex-direction:column;align-items:center;margin-bottom:16px!important}
 .facials-page .mini .pill-list>li{order:var(--phone-pill-order,0);max-width:100%}
}

/* Match the featured HydraFacial labels to the phone treatment cards. */
@media(max-width:480px){
 .facials-page .svc-copy .steps,
 .facials-page .svc-copy .factbar{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0 0 18px}
 .facials-page .svc-copy .steps li,
 .facials-page .svc-copy .fact{display:block;width:fit-content;max-width:100%;font-size:13.5px;font-weight:600;line-height:1.5;color:var(--teal-deep);background:var(--teal-light);padding:9px 15px;border:0;border-radius:99px}
 .facials-page .svc-copy .steps li::before,
 .facials-page .svc-copy .fact svg{display:none}
 .facials-page .svc-copy .steps li:nth-child(4){order:1}
 .facials-page .svc-copy .steps li:nth-child(2){order:2}
 .facials-page .svc-copy .steps li:nth-child(1){order:3}
 .facials-page .svc-copy .steps li:nth-child(3){order:4}
 .facials-page .svc-copy .fact:nth-child(1){order:1}
 .facials-page .svc-copy .fact:nth-child(3){order:2}
 .facials-page .svc-copy .fact:nth-child(2){order:3}
 .facials-page .svc-copy>.btn{display:flex;justify-content:center;width:100%;font-size:13.5px}
}

/* Pair the short HydraFacial pills; let the long hydration label span both. */
@media(max-width:480px){
 .facials-page .hydra-details{display:grid;grid-template-columns:max-content max-content;gap:9px;justify-content:start;margin-bottom:18px}
 .facials-page .hydra-details .steps,.facials-page .hydra-details .factbar{display:contents}
 .facials-page .hydra-details .steps li:nth-child(4){grid-column:1 / -1}
 .facials-page .hydra-details .fact:nth-child(1){order:5}
 .facials-page .hydra-details .fact:nth-child(3){order:6}
 .facials-page .hydra-details .fact:nth-child(2){order:7}
}

/* Center the complete public footer in phone view. */
@media(max-width:480px){
 .foot{text-align:center}
 .foot .foot-in{justify-items:center}
 .foot .foot-in>div{width:100%}
 .foot .foot-logo{display:flex;justify-content:center;width:fit-content;margin-inline:auto}
 .foot .foot-logo img{margin-inline:auto}
 .foot .foot-in p{margin-inline:auto}
 .foot .foot-in ul{align-items:center;padding-left:0}
 .foot .foot-bottom{justify-content:center;align-items:center;text-align:center}
}

/* Complete the centered homepage layout below About on phones. */
@media(max-width:480px){
 .public-home .about-in,.public-home .pillars,.public-home .contact-in{text-align:center}
 .public-home .about-in img{display:block;margin-inline:auto}
 .public-home .about-in p,.public-home .contact-in p,.public-home .contact-in .h2{margin-inline:auto}
 .public-home .info-row{flex-direction:column;align-items:center;justify-content:center;gap:10px}
 .public-home .info-row>div{text-align:center}
 .public-home .contact .trust-line{text-align:center!important}
 .public-home .contact .socials{justify-content:center}
}