/* ============================================================
   Homepage redesign — src-vesey/index.html only.
   Scoped entirely to hp-* classes; never touches the shared
   .card / .card-grid / .eyebrow / .section primitives that the
   other ~300 pages on this site depend on. Loaded after
   main.v3.css and inherits its tokens (--navy, --teal, --gold,
   --cream, --serif, --sans, --shadow*, --radius*).
   ============================================================ */

/* ── Reveal utilities ─────────────────────────────────────── */
/* Content is visible by default (progressive enhancement): JS adds
   .hp-armed before animating in, so a slow/blocked script, a headless
   renderer, or a hidden background tab never leaves a section blank. */
[data-reveal]{opacity:1;transform:none}
.hp-armed[data-reveal="fade"]{opacity:0;transform:translateY(14px)}
.hp-armed[data-reveal="fade"].hp-revealed{
  opacity:1;transform:none;
  transition:opacity .6s var(--hp-ease,cubic-bezier(.16,1,.3,1)),transform .6s var(--hp-ease,cubic-bezier(.16,1,.3,1))
}
.hp-armed[data-reveal="stagger"] > *{opacity:0;transform:translateY(16px)}
.hp-armed[data-reveal="stagger"].hp-revealed > *{
  opacity:1;transform:none;
  transition:opacity .5s var(--hp-ease,cubic-bezier(.16,1,.3,1)) calc(var(--i,0) * 60ms),
             transform .5s var(--hp-ease,cubic-bezier(.16,1,.3,1)) calc(var(--i,0) * 60ms)
}
.hp-armed[data-reveal="stagger"] > :nth-child(1){--i:0}
.hp-armed[data-reveal="stagger"] > :nth-child(2){--i:1}
.hp-armed[data-reveal="stagger"] > :nth-child(3){--i:2}
.hp-armed[data-reveal="stagger"] > :nth-child(4){--i:3}
.hp-armed[data-reveal="stagger"] > :nth-child(5){--i:4}
.hp-armed[data-reveal="stagger"] > :nth-child(6){--i:5}
.hp-armed[data-reveal="stagger"] > :nth-child(7){--i:6}

/* Hero entrance — staggered via --i on .hp-hero-el, played once on load */
.hp-hero-el{opacity:1;transform:none}
.hp-armed .hp-hero-el{opacity:0;transform:translateY(18px)}
.hp-armed.hp-revealed .hp-hero-el{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms),
             transform .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms)
}

@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal] > *,.hp-hero-el{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── Hero: stat ledger + "also available" aside ──────────── */
.hero__stats.hp-ledger{
  display:flex;flex-wrap:wrap;gap:1.25rem 0;
  margin-top:2.25rem;padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.14);
  border-radius:0;background:none
}
.hp-ledger__item{
  display:flex;flex-direction:column;gap:.3rem;
  padding-right:1.5rem;margin-right:1.5rem;
  border-right:1px solid rgba(255,255,255,.14)
}
.hp-ledger__item:last-child{border-right:none;margin-right:0;padding-right:0}

.hp-hero-aside{
  display:flex;flex-direction:column;gap:.75rem;
  justify-self:end;align-self:start;margin-top:2rem
}
.hp-hero-aside__label{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:.1rem
}
.hp-hero-aside__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;
  width:100%;max-width:300px
}
.hp-hero-aside__price{font-family:var(--serif);font-size:1.4rem;color:#fff;font-weight:700;line-height:1}
.hp-hero-aside__meta{font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.3}
.hp-hero-aside__cta{font-size:.76rem;font-weight:600;color:var(--teal-pale);white-space:nowrap}

@media(max-width:900px){
  .hp-hero-aside{justify-self:start;margin-top:0}
  .hp-hero-aside__row{max-width:360px}
}

/* ── Trust bar (was 3 stacked strips: trust-item row, partners, ticker) ─ */
.hp-trust-bar{background:#fff;border-bottom:1px solid var(--border)}
.hp-trust-bar__row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.6rem 2.25rem;padding:1rem 2rem
}
.hp-trust-bar__row--sub{
  gap:.5rem 1.75rem;padding:.7rem 2rem;
  border-top:1px solid var(--border);background:var(--cream)
}
.hp-trust-bar__item{
  display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--navy);
  text-decoration:none;white-space:nowrap
}
.hp-trust-bar__item strong{font-weight:600;color:var(--navy)}
.hp-trust-bar__item--link{transition:opacity .15s}
.hp-trust-bar__item--link:hover{opacity:.72}
.hp-trust-bar__mark{color:var(--teal);font-size:.95rem;flex-shrink:0}
.hp-trust-bar__mark--gold{color:var(--gold);letter-spacing:.02em}
.hp-trust-bar__label{
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;
  flex-shrink:0
}
.hp-partner-link{
  font-size:.8rem;font-weight:600;color:var(--navy);text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;
  transition:color .15s
}
.hp-partner-link:hover{color:var(--teal)}
.hp-partner-link--more{color:var(--teal);font-weight:500}
.hp-partner-link--cta{color:var(--teal);font-weight:700;margin-left:auto}

@media(max-width:820px){
  .hp-partner-link,.hp-trust-bar__item{min-height:44px;box-sizing:border-box}
  .hp-trust-bar__row{padding:.85rem 1.25rem}
  .hp-trust-bar__row--sub{padding:.6rem 1.25rem;justify-content:flex-start;overflow-x:auto}
}

/* ── Condition finder / search ────────────────────────────── */
.hp-finder{background:var(--cream);padding:clamp(2.5rem,5vw,3.5rem) 2rem}
.hp-finder__inner{max-width:640px;margin:0 auto;text-align:center}
.hp-finder__h2{margin-bottom:.6rem;font-size:clamp(1.15rem,2vw,1.5rem)}
.hp-finder__sub{color:var(--muted);font-size:.92rem;line-height:1.7;max-width:52ch;margin:0 auto 1.5rem}
.hp-finder__bar{position:relative}

/* ── Why choose — editorial two-column, replaces a card grid ─ */
.hp-why__inner{
  display:grid;grid-template-columns:minmax(240px,340px) 1fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:start
}
.hp-why__intro{position:sticky;top:96px}
.hp-why__intro h2{margin-bottom:.85rem}
.hp-why__intro p{margin-bottom:1.5rem}
.hp-why__list{list-style:none}
.hp-why__list li{border-top:1px solid var(--border)}
.hp-why__list li:last-child{border-bottom:1px solid var(--border)}
.hp-why__list a{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.4rem 0;text-decoration:none;
  transition:padding-left .25s cubic-bezier(.16,1,.3,1)
}
.hp-why__list a:hover{padding-left:.6rem}
.hp-why__list a:hover .hp-why__title{color:var(--teal)}
.hp-why__title{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--navy);transition:color .2s}
.hp-why__text{color:var(--muted);font-size:.92rem;line-height:1.65;max-width:56ch}

@media(max-width:900px){
  .hp-why__inner{grid-template-columns:1fr;gap:2rem}
  .hp-why__intro{position:static}
}

/* ── Specialties rail — replaces a second card grid ───────── */
.hp-spec__header{text-align:left;max-width:640px;margin:0 auto 2.5rem}
.hp-spec-rail{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 2rem 1.25rem;margin:0 auto;max-width:1160px;
  scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent;
  /* Right edge always fades (there's always more to scroll to). Left edge
     fade is added by JS (.hp-spec-rail--scrolled) once the user has moved
     away from the start, so the first tile never looks pre-emptively cut off. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2rem),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2rem),transparent 100%)
}
.hp-spec-rail.hp-spec-rail--scrolled{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2rem,#000 calc(100% - 2rem),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2rem,#000 calc(100% - 2rem),transparent 100%)
}
.hp-spec-rail:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:8px}
.hp-spec-tile{
  scroll-snap-align:start;flex:0 0 auto;width:200px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.25rem;display:flex;flex-direction:column;gap:.7rem;
  text-decoration:none;color:var(--navy);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s
}
.hp-spec-tile svg{color:var(--teal);flex-shrink:0}
.hp-spec-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal)}
.hp-spec-tile__title{font-family:var(--serif);font-weight:700;font-size:1.05rem}
.hp-spec-tile__text{font-size:.82rem;color:var(--muted);line-height:1.55}
.hp-spec-tile--more{background:var(--teal-xpale);border-color:var(--teal);border-style:dashed;justify-content:center;width:220px}
.hp-spec-tile--more .hp-spec-tile__title{color:var(--teal)}
.hp-spec-pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.5rem}
.hp-spec-pill{
  font-size:.78rem;padding:.4rem .85rem;border:1px solid var(--border);border-radius:20px;
  color:var(--navy);text-decoration:none;background:#fff;display:inline-flex;align-items:center;
  transition:border-color .15s,color .15s
}
.hp-spec-pill:hover{border-color:var(--teal);color:var(--teal)}

@media(max-width:820px){
  .hp-spec-pill{min-height:44px;box-sizing:border-box;padding-top:.5rem;padding-bottom:.5rem}
  .hp-spec-rail{padding:0 1.25rem 1.25rem}
}

/* ── Blood tests — ledger / price-list, replaces a third card grid ─ */
.hp-bloods-ledger{list-style:none;border-top:1px solid var(--border)}
.hp-bloods-ledger li{border-bottom:1px solid var(--border)}
.hp-bloods-ledger a{
  display:grid;grid-template-columns:minmax(140px,220px) 1fr auto;
  align-items:center;gap:1.5rem;padding:1.15rem .25rem;text-decoration:none;
  transition:background .15s
}
.hp-bloods-ledger a:hover{background:var(--teal-xpale)}
.hp-bloods-ledger a:hover .hp-bloods-ledger__arrow{transform:translateX(3px)}
.hp-bloods-ledger__name{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--navy)}
.hp-bloods-ledger__text{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:58ch}
.hp-bloods-ledger__arrow{color:var(--teal);font-weight:700;transition:transform .2s cubic-bezier(.16,1,.3,1)}

@media(max-width:640px){
  .hp-bloods-ledger a{grid-template-columns:1fr;gap:.35rem;padding:1.1rem 0}
  .hp-bloods-ledger__arrow{display:none}
}

/* ── Health assessments — asymmetric two-tier comparison ──── */
.hp-ha__inner{display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,420px);gap:clamp(2rem,4vw,4rem);align-items:start}
.hp-ha__intro h2{margin-bottom:.85rem}
.hp-ha__intro > p:first-of-type{margin-bottom:1.75rem}
.hp-ha__includes-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.hp-ha__includes{list-style:none;color:var(--muted);font-size:.9rem;line-height:1.9}
.hp-ha__includes li{padding-left:1.1rem;position:relative}
.hp-ha__includes li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--teal)}

.hp-ha__tiers{display:flex;flex-direction:column;gap:1rem}
.hp-ha__tier{
  display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.5rem 1.75rem;position:relative;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s
}
.hp-ha__tier:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hp-ha__tier--featured{
  background:var(--navy);border-color:var(--navy);color:#fff;padding:1.85rem 2rem
}
.hp-ha__tier-badge{
  position:absolute;top:-.65rem;right:1.5rem;background:var(--gold);color:var(--navy);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:20px
}
.hp-ha__tier-name{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.hp-ha__tier--featured .hp-ha__tier-name{color:var(--teal-pale)}
.hp-ha__tier-price{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:var(--navy);line-height:1}
.hp-ha__tier--featured .hp-ha__tier-price{color:#fff}
.hp-ha__tier-text{font-size:.88rem;color:var(--muted);line-height:1.6;margin:.35rem 0 .5rem}
.hp-ha__tier--featured .hp-ha__tier-text{color:rgba(255,255,255,.7);line-height:1.75}
.hp-ha__tier-cta{font-size:.85rem;font-weight:700;color:var(--teal)}
.hp-ha__tier--featured .hp-ha__tier-cta{color:#fff}

@media(max-width:820px){
  .hp-ha__inner{grid-template-columns:1fr}
}

/* ── NHS wait comparison — same content, cleaner classes ──── */
.hp-nhs{background:var(--navy);padding:clamp(2.5rem,5vw,3.5rem) 1rem}
.hp-nhs__inner{max-width:820px}
.hp-nhs__h2{text-align:center;color:#fff;font-size:clamp(1.15rem,2vw,1.5rem);margin-bottom:1.75rem}
.hp-nhs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem}
.hp-nhs__stat{
  text-align:center;background:rgba(255,255,255,.05);padding:1.4rem 1rem;
  border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)
}
.hp-nhs__stat--vesey{background:rgba(13,122,110,.3);border-color:rgba(13,194,166,.25)}
.hp-nhs__stat-label{color:rgba(255,255,255,.5);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.6rem}
.hp-nhs__stat--vesey .hp-nhs__stat-label{color:var(--teal-pale)}
.hp-nhs__stat-num{color:#fff;font-size:2.1rem;font-weight:700;font-family:var(--serif);line-height:1;margin-bottom:.35rem}
.hp-nhs__stat-num--bad{color:#f87171}
.hp-nhs__stat-sub{color:rgba(255,255,255,.5);font-size:.72rem}
.hp-nhs__stat--vesey .hp-nhs__stat-sub{color:rgba(255,255,255,.75)}
.hp-nhs__source{text-align:center;color:rgba(255,255,255,.55);font-size:.68rem;margin-bottom:1.75rem}

/* ── How to book ───────────────────────────────────────────── */
.hp-book{background:#fff}
.hp-quote-sm{
  text-align:center;font-style:italic;color:var(--muted);font-size:.9rem;
  max-width:580px;margin:0 auto 2rem;line-height:1.8
}
.hp-quote-sm cite{display:block;margin-top:.4rem;font-style:normal;font-weight:600;color:var(--navy);font-size:.82rem}

/* ── FAQ — same interactive markup, homepage-scoped spacing only ─ */
.hp-faq{background:var(--cream)}

/* ── Proof — consolidated testimonials + Doctify widget ───── */
.hp-proof{background:var(--navy);padding:clamp(3rem,6vw,4.5rem) 1rem}
.hp-proof__inner{max-width:760px}
.hp-proof__header{text-align:center;margin-bottom:2.5rem}
.hp-proof__header h2{color:#fff;margin-bottom:.6rem}
.hp-proof__rating{color:rgba(255,255,255,.7);font-size:.92rem}
.hp-proof__stars{color:var(--gold);letter-spacing:.04em}
.hp-proof__lead{
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.5;
  color:#fff;text-align:center;position:relative;margin-bottom:2.5rem
}
.hp-proof__mark{display:block;font-size:3rem;line-height:1;color:var(--teal);margin-bottom:.5rem}
.hp-proof__lead cite{display:block;margin-top:1rem;font-family:var(--sans);font-style:normal;font-size:.8rem;font-weight:600;color:var(--teal-pale)}
.hp-proof__secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-bottom:2.25rem}
.hp-proof__sm{
  font-style:italic;color:rgba(255,255,255,.72);font-size:.88rem;line-height:1.7;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.1rem
}
.hp-proof__sm cite{display:block;margin-top:.6rem;font-style:normal;font-weight:600;color:#fff;font-size:.78rem}
.hp-proof__cta{text-align:center;margin-bottom:2.5rem}
.hp-proof__widget{background:rgba(255,255,255,.04);border-radius:var(--radius-lg);padding:1rem}

/* ── Mid-page quiz CTA — solid teal, not a gradient band ──── */
.hp-cta-panel{background:var(--teal);padding:clamp(2.5rem,5vw,3.25rem) 1rem}
.hp-cta-panel__h2{color:#fff;font-size:clamp(1.15rem,2vw,1.5rem);margin-bottom:.6rem;max-width:600px;margin-left:auto;margin-right:auto}
.hp-cta-panel__sub{color:rgba(255,255,255,.85);max-width:480px;margin:0 auto 1.5rem;font-size:.92rem;line-height:1.7}
.hp-quiz-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hp-quiz-cta{
  padding:.8rem 1.75rem;border-radius:7px;font-size:.9rem;font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:transform .15s,box-shadow .15s
}
.hp-quiz-cta:hover{transform:translateY(-1px)}
.hp-quiz-cta--primary{background:#fff;color:var(--teal)}
.hp-quiz-cta--primary:hover{box-shadow:0 6px 20px rgba(0,0,0,.15)}
.hp-quiz-cta--outline{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35);font-weight:600}
.hp-quiz-cta--outline:hover{background:rgba(255,255,255,.22)}

@media(max-width:820px){
  .hp-quiz-cta{min-height:44px;box-sizing:border-box;width:100%;text-align:center;justify-content:center}
  .hp-quiz-ctas{flex-direction:column;align-items:stretch}
}

/* ── Coverage strip ────────────────────────────────────────── */
.hp-coverage{background:var(--cream);padding:clamp(2rem,4vw,2.75rem) 1rem}
.hp-coverage__inner{max-width:900px;text-align:center}
.hp-coverage__h2{font-size:clamp(1.15rem,2vw,1.5rem);margin-bottom:.6rem}
.hp-coverage__sub{color:var(--muted);font-size:.92rem;max-width:640px;margin:0 auto 1rem;line-height:1.7}
.hp-coverage__pills{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:1rem}
.hp-coverage__cta{font-size:.85rem}
.hp-loc-pill{
  font-size:.78rem;padding:.3rem .75rem;border:1px solid var(--border);border-radius:4px;
  color:var(--navy);text-decoration:none;background:#fff;display:inline-flex;align-items:center;
  transition:border-color .15s,color .15s
}
.hp-loc-pill:hover{border-color:var(--teal);color:var(--teal)}

@media(max-width:820px){
  .hp-loc-pill{min-height:44px;box-sizing:border-box}
}