/* ============================================================
   Careby Landing — stylesheet
   Foundation: tokens, reset, headline pattern, buttons, a11y.
   Section blocks are appended below this foundation.
   ============================================================ */

:root{
  /* palette */
  --cb-cream:#F5F3EA; --cb-cream-soft:#FBFAF4;
  --cb-green:#016758; --cb-green-dark:#014C41; --cb-green-tint:#E6F1ED; --cb-green-soft:#9FD3C7;
  --cb-green-line:#CFE6DD;
  --cb-ink:#181B1E; --cb-grey:#7A868B; --cb-grey-dim:#54565A; --cb-white:#FFFFFF;
  --cb-line:#E7E3D7; --cb-line-dark:rgba(255,255,255,.14);
  --cb-alert-bg:#FBEAEA; --cb-alert-ink:#8A2B2B; --cb-alert-line:#F0CFCF;
  /* type scale (fluid) */
  --cb-h1:clamp(2.6rem,7vw,5.5rem);
  --cb-h2:clamp(2rem,4.5vw,3.4rem);
  --cb-h3:1.05rem;
  /* layout */
  --cb-maxw:1440px; --cb-maxw-wide:1680px; --cb-radius:8px; --cb-radius-lg:24px; --cb-radius-xl:32px;
  --cb-section-y:clamp(3.5rem,8vw,7rem);
  --cb-nav-h:64px;
  /* fonts */
  --cb-sans:Inter,"Noto Sans SC",sans-serif;
  --cb-display:"Bricolage Grotesque",var(--cb-sans);
  --cb-serif:Lora,Georgia,serif;
}

/* ---- reset / base (document-level rules are intentionally global: this template owns the page) ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.careby-template{margin:0;padding:0}
.careby-page{margin:0;font-family:var(--cb-sans);color:var(--cb-ink);
  background:var(--cb-cream);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.careby-page :where(img){max-width:100%;height:auto;display:block}
.hero__pic{display:contents}  /* hero image is positioned absolutely */
.careby-page :where(a){color:inherit;text-decoration:none}
/* low-specificity resets (:where) so section margin/spacing rules always win */
.careby-page :where(h1,h2,h3,p,ul,ol){margin:0}
.careby-page :where(ul,ol){padding:0;list-style:none}
.careby-page :where(li){line-height:inherit}  /* neutralise a leaked global `li{line-height:0}` */

/* ---- container ---- */
.cb-container{max-width:var(--cb-maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem);width:100%}

/* ---- headline pattern (reused across sections) ---- */
.cb-headline{font-family:var(--cb-display);font-weight:800;line-height:1.03;
  letter-spacing:-.02em;font-size:var(--cb-h2);margin:0;color:var(--cb-ink)}
.cb-headline .ac{font-family:var(--cb-serif);font-style:italic;font-weight:600;
  letter-spacing:0;color:var(--cb-green);font-size:var(--cb-h2)}
.cb-headline--invert{color:var(--cb-white)}
.cb-headline--invert .ac{color:var(--cb-green-soft)}

.cb-kicker{font-family:var(--cb-sans);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.78rem;color:var(--cb-green);margin:0}

/* ---- buttons ---- */
.cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.85rem 1.6rem;border-radius:var(--cb-radius);
  font:600 1rem/1 var(--cb-sans);text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.cb-btn--primary{background:var(--cb-green);color:#fff}
.cb-btn--primary:hover{background:var(--cb-green-dark)}
.cb-btn--outline{background:transparent;color:var(--cb-green);border-color:var(--cb-green)}
.cb-btn--outline:hover{background:var(--cb-green-tint)}
.cb-btn--invert{background:#fff;color:var(--cb-green)}
.cb-btn--invert:hover{background:var(--cb-cream)}
.cb-book__trigger{font-family:var(--cb-sans)}
/* ACF book_button popup trigger is rendered hidden; our .cb-book__trigger drives it */
.cb-book__proxy{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* booking flow: the Popup-AOC (custombox) overlay is z-index 100002; lift the
   LatePoint booking modal above it so it isn't hidden behind the popup */
.latepoint-lightbox-w{z-index:100005!important}

/* ---- skip link ---- */
.cb-skip-link{position:absolute;left:8px;top:-60px;z-index:1100;
  background:var(--cb-green);color:#fff;padding:.75rem 1rem;border-radius:0 0 8px 8px;
  text-decoration:none;transition:top .15s ease}
.cb-skip-link:focus{top:0}

/* ---- focus ring (WCAG 2.4.7) ---- */
.careby-page :focus-visible{outline:3px solid var(--cb-green);outline-offset:2px;border-radius:3px}
.covers :focus-visible,.footer :focus-visible{outline-color:#fff}

/* ---- bilingual visibility (DESIGN §5) ---- */
[data-lang="en"] .lang.zh{display:none}
[data-lang="zh"] .lang.en{display:none}
.careby-page .lang{color:inherit}  /* bilingual spans take their parent's colour (guard vs global bleed) */
.lang.zh{font-family:var(--cb-sans)}

/* ---- anchor offset for fixed nav ---- */
[id]{scroll-margin-top:calc(var(--cb-nav-h) + 1rem)}

/* ---- reduced motion (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .careby-page *,.careby-page *::before,.careby-page *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ============================================================
   nav
   ============================================================ */
.cb-nav{position:fixed;inset:0 0 auto 0;z-index:1000;padding-block:.7rem}
.cb-nav__inner{display:flex;align-items:center;gap:1.4rem;min-height:48px;max-width:var(--cb-maxw-wide);
  background:rgba(251,250,244,.9);-webkit-backdrop-filter:saturate(125%) blur(10px);
  backdrop-filter:saturate(125%) blur(10px);
  border:1px solid var(--cb-line);border-radius:16px;
  box-shadow:0 4px 22px rgba(24,27,30,.07);
  padding-block:.5rem;padding-inline:1.15rem 1rem}
.cb-nav__brand{display:inline-flex;align-items:center;flex:0 0 auto}
.cb-nav__brand img.cb-nav__logo{height:30px;width:auto}
.cb-nav__menu{display:flex;align-items:center;gap:1.7rem}
.cb-nav__menu a{font-weight:500;font-size:.94rem;text-decoration:none;color:var(--cb-ink);
  padding:.4rem .1rem;border-bottom:2px solid transparent;white-space:nowrap}
.cb-nav__menu a:hover{color:var(--cb-green)}
.cb-langswitch{display:inline-flex;align-items:center;gap:.15rem;margin-left:auto;
  background:rgba(24,27,30,.05);border-radius:999px;padding:.2rem}
.cb-langswitch__btn{min-height:36px;min-width:46px;padding:.35rem .75rem;border:0;
  background:transparent;border-radius:999px;cursor:pointer;
  font:600 .85rem/1 var(--cb-sans);color:var(--cb-grey-dim)}
.cb-langswitch__btn:hover{color:var(--cb-ink)}
.cb-langswitch__btn[aria-pressed="true"]{background:var(--cb-ink);color:#fff}
/* mobile hamburger */
.cb-nav__toggle{display:none;align-items:center;gap:.5rem;margin-left:auto;
  background:transparent;border:0;cursor:pointer;font:600 .9rem/1 var(--cb-sans);color:var(--cb-ink)}
.cb-nav__toggle-bars,.cb-nav__toggle-bars::before,.cb-nav__toggle-bars::after{
  content:"";display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative}
.cb-nav__toggle-bars::before{position:absolute;top:-6px}
.cb-nav__toggle-bars::after{position:absolute;top:6px}
@media (max-width:820px){
  .cb-nav__toggle{display:inline-flex}
  .cb-nav__menu{position:absolute;left:0;right:0;top:calc(100% + .4rem);flex-direction:column;
    align-items:stretch;gap:0;background:var(--cb-cream-soft);border:1px solid var(--cb-line);
    border-radius:14px;box-shadow:0 10px 30px rgba(24,27,30,.12);padding:.4rem;
    display:none}
  .cb-nav__menu.is-open{display:flex}
  .cb-nav__menu a{padding:.85rem 1rem;border-bottom:1px solid var(--cb-line)}
  .cb-nav__menu li:last-child a{border-bottom:0}
  .cb-nav__inner{position:relative;gap:.75rem}
  .cb-langswitch{margin-left:0}
}

/* ============================================================
   hero
   ============================================================ */
.hero{position:relative;background:var(--cb-cream)}
.hero__top{position:relative;overflow:hidden}
/* Left copy column. The image (.hero__img) still bleeds full-width to the
   viewport edge; only the copy text aligns to the nav — same left padding
   (1.15rem) plus the nav's 1680-band centring offset on ultra-wide screens,
   with the width capped to the band's 43% so it never drifts past the nav. */
.hero__copy{position:relative;z-index:2;max-width:none;
  width:min(43%,calc(0.43 * var(--cb-maxw-wide)));
  margin-inline-start:max(0px,calc((100% - var(--cb-maxw-wide)) / 2));margin-inline-end:0;
  padding-inline-start:1.15rem;
  padding-top:calc(var(--cb-nav-h) + clamp(2rem,5vw,3.5rem));
  padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero__h1{font-size:var(--cb-h1);margin-bottom:1.35rem}
.hero__h1 .ac{display:block}  /* accent ("when you need it") drops to its own line */
.hero__sub{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--cb-grey-dim);max-width:32ch;margin-bottom:1.9rem}
.hero__cta{margin-bottom:.9rem}
.hero__note{font-size:.85rem;color:var(--cb-grey-dim);margin-bottom:1.15rem}
.hero__img{position:absolute;top:0;right:0;width:57%;height:100%;object-fit:cover;object-position:center 30%;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 60%);
  mask-image:linear-gradient(to right,transparent 0,#000 60%)}
/* trust bar */
.hero__trust{background:var(--cb-white);border-top:1px solid var(--cb-line)}
.hero__trust-list{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  max-width:var(--cb-maxw-wide);padding-block:1.15rem;flex-wrap:wrap}
.hero__trust-list li{display:inline-flex;align-items:center;gap:.6rem;
  font-size:.95rem;font-weight:500;color:var(--cb-grey-dim)}
.hero__trust-icon{color:var(--cb-green);flex:0 0 auto}
/* stack below 1320px so the large H1 always has room in the copy column */
@media (max-width:1320px){
  .hero__copy{width:auto;max-width:none;padding-bottom:1.75rem}
  .hero__img{position:static;width:100%;height:auto;aspect-ratio:16/10;
    border-radius:var(--cb-radius-lg);margin-bottom:clamp(2rem,5vw,3rem);
    -webkit-mask-image:none;mask-image:none}
}
@media (max-width:600px){
  .hero__trust-list{justify-content:flex-start;gap:1rem 2rem}
}

/* ============================================================
   how to use it
   ============================================================ */
.how{padding-block:var(--cb-section-y)}
.how__head{text-align:center;margin-inline:auto; margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.how__h2{margin:.7rem 0 1.1rem}
.how__h2 .ac{display:block}  /* accent ("Two ways to get care faster") drops to its own line */
.how__intro{color:var(--cb-grey-dim);font-size:1.05rem;margin-bottom:1.4rem}
.how__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2rem)}
.how__card{background:var(--cb-cream-soft);border:1px solid var(--cb-line);
  border-radius:var(--cb-radius-lg);padding:clamp(1.5rem,3vw,2.25rem)}
.how__card-kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cb-green);margin-bottom:.6rem}
.how__card-title{font-family:var(--cb-display);font-weight:700;font-size:1.45rem;
  color:var(--cb-ink);letter-spacing:-.01em;margin-bottom:1.5rem}
.how__steps{display:flex;flex-direction:column}
.how__step{display:flex;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--cb-line)}
.how__step:first-child{border-top:0;padding-top:0}
.how__step-num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--cb-green);color:#fff;font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;margin-top:.1rem}
.how__step-title{font-weight:600;color:var(--cb-ink);margin-bottom:.3rem}
.how__step-desc{color:var(--cb-grey-dim);font-size:.95rem;line-height:1.55}
@media (max-width:768px){
  .how__cards{grid-template-columns:1fr}
}

/* ============================================================
   covers (dark green)
   ============================================================ */
.covers{background:var(--cb-green);color:#fff;padding-block:var(--cb-section-y)}
.covers__head{text-align:center;max-width:680px;margin-inline:auto;
  margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.covers__intro{color:rgba(255,255,255,.85);font-size:1.05rem;margin-top:1rem}
.covers__grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
.covers__features{display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.8rem 2rem;margin-bottom:2.25rem}
.covers__feature-title{margin:0;font:inherit}
.covers__feature-btn{display:flex;align-items:center;gap:.9rem;width:100%;
  background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:default}
.covers__icon{flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.covers__feature-label{font-family:var(--cb-sans);font-weight:600;font-size:1.02rem;color:#fff}
.covers__chevron{display:none}
.covers__feature-desc{color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.55;
  padding-left:calc(40px + .9rem);margin-top:.4rem}
.covers__pic{display:block;align-self:stretch}
.covers__img{width:100%;height:100%;max-height:620px;object-fit:cover;border-radius:var(--cb-radius-lg)}
@media (max-width:1024px){
  .covers__grid{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
  .covers__pic{align-self:auto;max-width:560px;margin-inline:auto}
  .covers__img{max-height:420px}
}
@media (max-width:820px){
  /* mobile: image first, features become accessible accordion cards */
  .covers__pic{order:-1;margin-bottom:.4rem}
  .covers__img{max-height:300px}
  .covers__features{grid-template-columns:1fr;gap:.6rem;margin-bottom:1.75rem}
  .covers__feature{background:#fff;border-radius:12px}
  .covers__feature-btn{align-items:center;gap:.75rem;cursor:pointer;position:relative;
    padding:.95rem 2.75rem .95rem 1rem}
  .covers__icon{width:34px;height:34px;background:var(--cb-green-soft);color:var(--cb-green)}
  .covers__feature-label{color:var(--cb-green);font-size:.95rem}
  .covers__chevron{display:block;position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);width:14px;height:14px}
  .covers__chevron::before,.covers__chevron::after{content:"";position:absolute;background:var(--cb-green);
    border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .covers__chevron::before{top:6px;left:0;width:14px;height:2px}
  .covers__chevron::after{left:6px;top:0;width:2px;height:14px}
  .covers__feature-btn[aria-expanded="true"] .covers__chevron::after{transform:rotate(90deg);opacity:0}
  .covers__feature-desc{color:var(--cb-grey-dim);font-size:.9rem;margin-top:0;
    padding:0 1rem 0 calc(34px + .75rem + 1rem);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .covers__feature.is-open .covers__feature-desc{max-height:340px;padding-bottom:.95rem}
}

/* ============================================================
   faq (accordion)
   ============================================================ */
.faq{padding-block:var(--cb-section-y)}
.faq__head{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.faq__head .cb-headline{margin-top:.7rem}
.faq__list{max-width:760px;margin-inline:auto;border-top:1px solid var(--cb-line)}
.faq__item{border-bottom:1px solid var(--cb-line)}
.faq__q{margin:0;font-size:inherit;font-weight:inherit}
.faq__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:1.4rem .25rem;font:600 1.12rem/1.4 var(--cb-display);color:var(--cb-ink)}
.faq__trigger:hover{color:var(--cb-green)}
.faq__icon{position:relative;flex:0 0 auto;width:20px;height:20px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--cb-green);
  border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.faq__icon::before{top:9px;left:2px;width:16px;height:2px}
.faq__icon::after{left:9px;top:2px;width:2px;height:16px}
.faq__trigger[aria-expanded="true"] .faq__icon::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 .25rem 1.5rem}
.faq__a p{color:var(--cb-grey-dim);line-height:1.65;max-width:64ch}

/* ============================================================
   cta + emergency notice + disclaimer
   ============================================================ */
.cta{padding-top:var(--cb-section-y)}
.cta__card{background:#fff;border:1px solid var(--cb-line);border-radius:var(--cb-radius-xl);
  text-align:center;padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
  max-width:820px;margin-inline:auto}
.cta__h2{margin-bottom:1rem}
.cta__sub{color:var(--cb-grey-dim);font-size:1.08rem;max-width:46ch;margin:0 auto 2rem}
.cta__btn{margin-bottom:1.5rem}
.cta__phone{color:var(--cb-grey-dim);font-size:.98rem}
.cta__phone a{color:var(--cb-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta__alert{background:var(--cb-alert-bg);border-block:1px solid var(--cb-alert-line);
  color:var(--cb-alert-ink);margin-top:clamp(3rem,6vw,5rem)}
.cta__alert-inner{display:flex;align-items:center;justify-content:center;gap:.65rem;
  text-align:center;padding-block:1rem;font-size:.95rem}
.cta__alert-icon{flex:0 0 auto}
.cta__disclaimer{color:var(--cb-grey-dim);font-size:.82rem;line-height:1.6;
  text-align:center;max-width:760px;padding-block:clamp(2rem,4vw,2.75rem)}

/* ============================================================
   footer (dark)
   ============================================================ */
.footer{background:var(--cb-ink);color:rgba(255,255,255,.75)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);padding-block:clamp(3rem,5vw,4rem)}
.footer__brand img.footer__logo{height:30px;width:auto;
  filter:brightness(0) invert(1);margin-bottom:1.25rem}
.footer__tag{color:#fff;font-weight:600;font-size:1.02rem;margin-bottom:.6rem;max-width:32ch}
.footer__sub{color:rgba(255,255,255,.62);font-size:.9rem;max-width:38ch;line-height:1.55}
.footer__kicker{color:var(--cb-green-soft);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;font-size:.74rem;margin-bottom:1rem}
.footer__col ul{display:flex;flex-direction:column;gap:.7rem}
.footer__col a{color:rgba(255,255,255,.78);font-size:.95rem}
.footer__col a:hover{color:#fff;text-decoration:underline}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;border-top:1px solid var(--cb-line-dark);padding-block:1.25rem}
.footer__copy{color:rgba(255,255,255,.62);font-size:.85rem}
.cb-langswitch--footer{background:rgba(255,255,255,.08);margin-left:0}
.cb-langswitch--footer .cb-langswitch__btn{color:rgba(255,255,255,.78)}
.cb-langswitch--footer .cb-langswitch__btn:hover{color:#fff}
.cb-langswitch--footer .cb-langswitch__btn[aria-pressed="true"]{background:#fff;color:var(--cb-ink)}
@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr;gap:2rem}
}