/* "Calm Calculator, with a Human" — hero + calculator card. CWV-safe:
   box reserved at final size (zero CLS), transform/opacity-only motion. */
.hz-hero {
  background: linear-gradient(180deg, var(--hz-teal) 0%, var(--hz-teal-deep) 100%);
  color: var(--hz-white);
  padding: var(--hz-s6) 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.hz-hero .hz-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: var(--hz-s7); align-items: start; }
/* hero promise — yokehealth.com display font (Source Sans Pro), varied sizing + Horizon brand colours to make it pop */
.hz-hero__promise { font-family: "Source Sans Pro", var(--hz-grotesk); }
.hz-hero h1 { font-family: "Source Sans Pro", var(--hz-grotesk); font-weight: 900; font-size: clamp(44px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.02em; color: var(--hz-white); }
.hz-hero__pop { color: var(--hz-spark); }
.hz-hero .hz-eyebrow { color: var(--hz-spark); font-size: 14px; letter-spacing: .12em; }
.hz-hero__lead { font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; line-height: 1.3; color: var(--hz-white); max-width: 28ch; margin: 0 0 var(--hz-s5); }
.hz-hero__points { list-style: none; margin: 0 0 var(--hz-s6); padding: 0; display: grid; gap: var(--hz-s3); max-width: 48ch; }
.hz-hero__points li { position: relative; padding-left: var(--hz-s6); font-size: var(--hz-body-lg); line-height: 1.45; color: rgba(255,255,255,.92); }
.hz-hero__points li::before { content: "\2713"; position: absolute; left: 0; top: -.02em; color: var(--hz-gold); font-weight: 900; font-size: 1.15em; }
.hz-hero__points li strong { color: var(--hz-spark); font-weight: 700; }
.hz-hero__talk { color: var(--hz-spark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* calculator card — min-height reserved so the result paint causes ZERO CLS */
.hz-calc {
  background: var(--hz-white); color: var(--hz-ink); border-radius: var(--hz-radius);
  box-shadow: var(--hz-shadow-card); border-top: 1px solid var(--hz-gold);
  padding: var(--hz-s6); min-height: 360px; display: flex; flex-direction: column; gap: var(--hz-s4);
}
/* calc heading is an <h2> for valid heading order, styled as the card sub-head (was h3 visual) */
.hz-calc__h { font-family: var(--hz-grotesk); font-size: var(--hz-h3); font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0; }
.hz-calc__field label { display: block; font-weight: 600; margin-bottom: var(--hz-s2); }
.hz-calc__row { display: flex; align-items: center; gap: var(--hz-s4); }
.hz-calc__range { flex: 1; height: 8px; accent-color: var(--hz-teal); }
.hz-calc__num { width: 130px; font-size: var(--hz-body); padding: var(--hz-s2) var(--hz-s3); border: 1px solid #c9d2cf; border-radius: 8px; font-variant-numeric: tabular-nums; }
/* result block — reserved height; prompt is the LCP element (static, server-rendered) */
.hz-calc__result { min-height: 110px; display: flex; flex-direction: column; justify-content: center; }
.hz-calc__prompt { font-size: var(--hz-body-lg); color: #4a5a55; }
.hz-calc__figure { font-size: var(--hz-result); font-weight: 620; line-height: 1; color: var(--hz-teal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hz-calc__indicative { font-size: var(--hz-caption); color: #4a5a55; margin-top: var(--hz-s2); }
.hz-calc__gauge { height: 6px; border-radius: 999px; background: #e6ece9; overflow: hidden; }
.hz-calc__gauge > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hz-gold), var(--hz-spark)); }
.hz-calc__micro { font-size: var(--hz-caption); color: #4a5a55; }
/* the white order-card sits inside the .hz-on-teal hero, whose brand.css rule forces every
   descendant h2/p to white — invisible on the card. Restore the card's own dark text. */
.hz-on-teal .hz-calc__h { color: var(--hz-ink); }
.hz-on-teal .hz-calc__prompt,
.hz-on-teal .hz-calc__indicative,
.hz-on-teal .hz-calc__micro { color: #4a5a55; }
.hz-on-teal .hz-calc__figure { color: var(--hz-teal); }

/* trust banner (sand) — supersize GOLD ticks that overflow the card top (pin: no clip-art, big ticks) */
.hz-trust { background: var(--hz-sand); color: var(--hz-ink); padding: calc(var(--hz-s7) + 20px) 0 var(--hz-s7); }
.hz-trust .hz-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hz-s5); align-items: stretch; }
/* Neutralise wpautop-inserted <br> so page-content trust bars flow as the designed block row (not stacked) */
.hz-trust br { display: none; }
.hz-trust span {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: var(--hz-s2);
  background: var(--hz-white); color: var(--hz-ink); font-weight: 700;
  font-size: var(--hz-body-lg); line-height: 1.35;
  padding: calc(var(--hz-s7) + 22px) var(--hz-s4) var(--hz-s5);
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-shadow-card);
}
/* big gold tick, sitting proud of the box (overrides box size) */
.hz-trust span::before {
  content: "✓"; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--hz-gold); color: var(--hz-teal);
  font-size: 42px; font-weight: 900; line-height: 1;
  border: 4px solid var(--hz-white);
  box-shadow: 0 8px 20px rgba(14,34,51,.20);
}
@media (max-width: 880px) {
  .hz-trust .hz-wrap { grid-template-columns: repeat(2, 1fr); row-gap: calc(var(--hz-s7) + 20px); }
}
@media (max-width: 520px) {
  .hz-trust .hz-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .hz-hero { padding: var(--hz-s7) 0; min-height: 0; }
  .hz-hero .hz-wrap { grid-template-columns: 1fr; gap: var(--hz-s6); }
  .hz-hero__order-card { order: -1; } /* card-first on mobile */
  .hz-calc { padding: var(--hz-s5); }
}

/* sticky mobile CTA — reserves space so it never covers the FCA legal line */
.hz-sticky { display: none; }
@media (max-width: 880px) {
  .hz-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--hz-teal); padding: var(--hz-s3); text-align: center; }
  body { scroll-padding-bottom: 80px; }
}

/* neighbourhood image tiles with smoky-glass overlay (pin build 2026-07-10) */
.hz-hoods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hz-s5);margin-top:var(--hz-s6)}
.hz-hood{position:relative;aspect-ratio:5/4.3;min-height:230px;border-radius:var(--hz-radius);overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;box-shadow:0 12px 32px rgba(10,34,51,.16);transition:transform .25s ease,box-shadow .25s ease}
.hz-hood:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(10,34,51,.24)}
.hz-hood__panel{position:relative;width:100%;margin:0;padding:var(--hz-s5) var(--hz-s5) var(--hz-s4);color:#fff;background:linear-gradient(to top,rgba(10,34,51,.97) 0%,rgba(10,34,51,.84) 52%,rgba(14,60,54,.30) 80%,transparent 100%)}
.hz-hood__panel::before{content:"";position:absolute;inset:0;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);-webkit-mask-image:linear-gradient(to top,#000 60%,transparent 100%);mask-image:linear-gradient(to top,#000 60%,transparent 100%);z-index:0}
.hz-hood__panel>*{position:relative;z-index:1}
.hz-hood__panel h3{margin:0 0 .3em;color:var(--hz-spark);font-weight:800;font-size:clamp(18px,1.5vw,21px);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hz-hood__panel p{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.9)}
.hz-hoods__credit{margin-top:var(--hz-s4);font-size:.72rem;color:#6b7770;opacity:.85}
@media (max-width:980px){ .hz-hoods{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .hz-hoods{grid-template-columns:1fr} }

/* Hub-page hero header — big bold WHITE headline + yellow accent word, matching the
   front-page hero treatment (pin build 2026-07-10). Scoped to .hz-band--teal so the
   home .hz-hero is untouched. Values are native: brand.css .hz-band--teal gradient +
   calculator.css .hz-hero h1 weight/size. Accent word uses the existing .hz-hero__pop. */
.hz-band--teal { background: linear-gradient(160deg, var(--hz-teal) 0%, var(--hz-teal-deep) 100%); color: var(--hz-white); padding: var(--hz-s8) 0; }
.hz-band--teal h1 { font-family: "Source Sans Pro", var(--hz-grotesk); font-weight: 900; font-size: clamp(44px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.02em; color: var(--hz-white); }
.hz-band--teal .hz-eyebrow { color: var(--hz-spark); font-size: 14px; letter-spacing: .12em; }
.hz-band--teal .hz-lede, .hz-band--teal p { color: var(--hz-white); }
.hz-band--teal a { color: var(--hz-spark); }
.hz-band--teal a.hz-cta { color: var(--hz-ink); }

/* testimonials — "In our clients' own words": horizon-gold oversized stars, big
   decorative quote mark, card pop. Section styling scoped with :has(.hz-quotes) so
   other white bands are untouched; the .hz-quote* rules are class-specific and safe
   wherever the markup lands (home + hub rollout is a separate job). pin build 2026-07-10 */
.hz-band:has(.hz-quotes){padding:var(--hz-s7) 0}
.hz-band:has(.hz-quotes) h2{font-family:"Source Sans Pro",var(--hz-grotesk);font-weight:900;font-size:var(--hz-h2);line-height:1.05;letter-spacing:-.01em;text-align:center;margin:0 0 var(--hz-s3)}
.hz-band:has(.hz-quotes) .hz-lede{text-align:center;max-width:60ch;margin:0 auto var(--hz-s6);color:#4a5a55}
.hz-quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hz-s5)}
.hz-quote{position:relative;background:var(--hz-white);border-radius:var(--hz-radius);border-top:3px solid var(--hz-gold);box-shadow:var(--hz-shadow-card);padding:var(--hz-s6) var(--hz-s5) var(--hz-s5);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.hz-quote:hover{transform:translateY(-6px);box-shadow:0 30px 72px rgba(10,34,51,.32)}
.hz-quote::before{content:"\201C";position:absolute;top:-.22em;right:.1em;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(104px,10vw,168px);line-height:1;color:var(--hz-gold);opacity:.16;pointer-events:none;z-index:0}
.hz-quote>figure{position:relative;z-index:1}
.hz-quote__stars{margin:0 0 var(--hz-s3);color:var(--hz-gold);font-size:clamp(28px,2.6vw,36px);line-height:1;letter-spacing:.14em;text-shadow:0 1px 2px rgba(242,176,30,.35)}
.hz-quote blockquote{margin:0;padding:0;border:0;flex:1}
.hz-quote blockquote p{font-size:var(--hz-body-lg);line-height:1.5;color:var(--hz-ink);margin:0 0 var(--hz-s3)}
.hz-quote blockquote p:last-child{margin-bottom:0}
.hz-quote figcaption{margin-top:var(--hz-s4);font-weight:700;color:var(--hz-teal);font-size:var(--hz-body)}
.hz-quote figcaption::before{content:"— "}
@media (max-width:980px){ .hz-quotes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .hz-quotes{grid-template-columns:1fr} }

/* WHY READING — enhanced design (pin build 2026-07-10). Scoped to .hz-why so no other band is affected. */
.hz-why{background:radial-gradient(120% 140% at 85% 0%,#eef5f3 0%,#f7faf9 55%,var(--hz-white) 100%)}
.hz-why__card{position:relative;background:var(--hz-white);border:1px solid #e9e4d6;border-top:4px solid var(--hz-gold);border-radius:var(--hz-radius);box-shadow:0 16px 44px rgba(10,34,51,.09);padding:var(--hz-s6)}
.hz-why__eyebrow{display:inline-block;color:var(--hz-teal);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--hz-s3)}
.hz-why h2{margin:0}
.hz-why h2 .hz-pop{color:var(--hz-gold)}
.hz-why h2::after{content:"";display:block;width:72px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--hz-gold),var(--hz-spark));margin-top:var(--hz-s3)}
.hz-why .hz-lede--lead{font-size:clamp(20px,2.2vw,23px);line-height:1.5;color:var(--hz-ink);border-left:4px solid var(--hz-gold);padding-left:var(--hz-s4);margin:var(--hz-s5) 0 var(--hz-s4)}
/* pin: make Why-Reading text fill the card full width (was capped at 64ch) */
.hz-why__card .hz-lede{max-width:none}
@media (max-width:880px){ .hz-why__card{padding:var(--hz-s5)} }