/*
 * Health Bridge component styles — translated 1:1 from the approved style tile
 * (Website Redesign/HB_Website_Style_Tile.html). Every class here maps to a
 * registered block pattern in inc/patterns.php.
 */

body {
  /* !important: Kadence prints its global typography CSS after child styles */
  font-family: var(--font-body) !important;
  color: var(--body-text);
  font-size: var(--fs-body);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}

.hb-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 900px) { .hb-wrap { padding: 0 22px; } }

/* --- Type utilities --- */
.hb-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-accent-text);
}
.hb-chev { font-family: var(--font-heading); font-weight: 700; }

/* --- Buttons --- */
.hb-btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
/* Variant rules require .hb-btn too: block-button WRAPPERS carry the variant
   class alone, and painting the square wrapper hides the rounded corners. */
.hb-btn.hb-btn--primary { background: var(--brand-primary); color: #fff; }
.hb-btn.hb-btn--inverse { background: #fff; color: var(--brand-primary); }
.hb-btn.hb-btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.wp-block-button.hb-btn--primary, .wp-block-button.hb-btn--inverse, .wp-block-button.hb-btn--ghost { background: transparent; }
.hb-btn:focus-visible { outline: 3px solid var(--hb-sky); outline-offset: 2px; }

/* Hover states — explicit color+background on every variant so Kadence's
   global a:hover / button:hover palette rules can never restyle a brand button. */
.hb-btn,
.wp-block-button .wp-block-button__link {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hb-btn.hb-btn--primary:hover, .hb-btn.hb-btn--primary:focus, .hb-btn.hb-btn--primary:active,
.wp-block-button.hb-btn--primary .wp-block-button__link:hover,
.wp-block-button.hb-btn--primary .wp-block-button__link:focus,
.wp-block-button.hb-btn--primary .wp-block-button__link:active {
  background: color-mix(in srgb, var(--brand-primary) 84%, #000);
  color: #fff;
  box-shadow: 0 6px 16px rgba(27, 33, 55, .22);
}
.hb-btn.hb-btn--inverse:hover, .hb-btn.hb-btn--inverse:focus, .hb-btn.hb-btn--inverse:active,
.wp-block-button.hb-btn--inverse .wp-block-button__link:hover,
.wp-block-button.hb-btn--inverse .wp-block-button__link:focus,
.wp-block-button.hb-btn--inverse .wp-block-button__link:active {
  background: var(--mist);
  color: var(--brand-primary);
  box-shadow: 0 6px 16px rgba(27, 33, 55, .18);
}
.hb-btn.hb-btn--ghost:hover, .hb-btn.hb-btn--ghost:focus, .hb-btn.hb-btn--ghost:active,
.wp-block-button.hb-btn--ghost .wp-block-button__link:hover,
.wp-block-button.hb-btn--ghost .wp-block-button__link:focus,
.wp-block-button.hb-btn--ghost .wp-block-button__link:active {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}
/* Guide links (»-style) underline on hover */
.hb-card__more:hover, .hb-card__more:focus { text-decoration: underline; text-underline-offset: 3px; }

/* --- Hero --- */
.hb-hero {
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 88%, #000) 0%, var(--brand-primary) 55%, color-mix(in srgb, var(--brand-primary) 82%, #fff) 100%);
}
.hb-hero .hb-wrap { position: relative; padding-top: var(--sp-8); padding-bottom: 104px; }
.hb-hero h1 { color: #fff; font-size: var(--fs-display); max-width: 15ch; }
.hb-hero .hb-hero__sub { font-size: 20px; max-width: 34em; margin: 22px 0 36px; color: rgba(255,255,255,.88); }
/* Hero eyebrows use the *-hero-text tokens, not the base brand hexes: at 13px
   the base mint/sky fail AA on the navy gradient. See hb-tokens.css. */
.hb-hero .hb-eyebrow { color: var(--hb-mint-hero-text); margin-bottom: 18px; display: block; }
.brand-orosight .hb-hero .hb-eyebrow { color: var(--hb-sky-hero-text); }
.hb-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hb-hero__watermark {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-heading); font-weight: 700; font-size: 420px; line-height: 1;
  color: rgba(255,255,255,.05); user-select: none; pointer-events: none;
}
@media (max-width: 900px) { .hb-hero__watermark { display: none; } }

/* --- Bands --- */
.hb-band { padding: var(--sp-8) 0; }
.hb-band--mist { background: var(--mist); }
.hb-band--tint { background: var(--brand-tint); }
.hb-band--brand { background: var(--brand-primary); color: #fff; }
.hb-band--brand h2, .hb-band--brand h3 { color: #fff; }
.hb-band__head { max-width: 60ch; margin-bottom: 56px; }
/* centered band head: center the column itself, not just the text (FAQ bands) */
.hb-band__head.hb-center { margin-left: auto; margin-right: auto; }
/* centered heads that carry body copy (Virtuous Cycle, contact form intro):
   headings/eyebrow center, running paragraphs stay left for readability.
   All p need auto margins — .hb-band__head p carries max-width:60ch, which at
   the eyebrow's small font is narrower than the head, so without auto margins
   the eyebrow box pins left and its centered text sits off-center. */
.hb-band__head.hb-center p { margin-left: auto; margin-right: auto; }
.hb-band__head.hb-center p:not(.hb-eyebrow) { text-align: left; }
.hb-band__head.hb-center p:has(.hb-card__more) { text-align: center; }
.hb-band__head h2, .hb-band__head h1 { font-size: var(--fs-h2); margin-top: 10px; }
@media (max-width: 900px) { .hb-band { padding: var(--sp-6) 0; } }

/* --- Grids & cards --- */
.hb-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.hb-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }

.hb-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}
/* Card titles are h2 or h3 depending on the page's heading outline (a card
   sitting directly under the page h1 must be h2; one under a band h2 is h3).
   Both render identically — the level is semantics, not styling. */
.hb-card h2, .hb-card h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.hb-card__more {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  text-decoration: none; display: inline-block; margin-top: 18px;
  color: var(--brand-accent-text);
}

.hb-brandcard { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.hb-brandcard__swash { height: 96px; display: flex; align-items: center; padding: 0 28px; }
.hb-brandcard__body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
/* pin guide links to one baseline across cards with uneven body copy —
   the link's wrapping <p> is the flex child, and the card needs explicit
   height to fill its grid row */
.hb-grid-4 > .hb-brandcard { height: 100%; }
.hb-brandcard__body p:last-child { margin-top: auto; padding-top: 18px; margin-bottom: 0; }
.hb-brandcard__body .hb-card__more { margin-top: 0; }
.hb-brandcard__swash img { max-width: 160px; height: auto; }

.hb-tagpill {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px; margin-bottom: 12px;
  background: var(--brand-tint); color: var(--brand-accent-text);
}

/* --- Brand-layer card (signature treatment; max one per screen of content) --- */
.hb-layercard { position: relative; padding: 0 14px 14px 0; display: flex; flex-direction: column; }
.hb-layercard .hb-layercard__over { flex: 1; }
.hb-layercard__under { position: absolute; top: 14px; left: 14px; right: 0; bottom: 0; border-radius: var(--radius-card); background: var(--brand-accent); }
.hb-layercard__over { position: relative; border-radius: var(--radius-card); padding: 44px 48px; background: var(--brand-primary); color: #fff; }
.hb-layercard__over h3 { color: #fff; }
.hb-layercard--paper .hb-layercard__over { background: #fff; border: 1px solid var(--line); color: var(--body-text); }
.hb-layercard--paper .hb-layercard__over h3 { color: var(--ink); }
/* Underlay variants — the underlay color names the partner brand */
.hb-layercard--under-mint .hb-layercard__under { background: var(--hb-mint); }
.hb-layercard--under-gold .hb-layercard__under { background: var(--opa-gold); }
.hb-layercard--under-orange .hb-layercard__under { background: var(--os-orange-graphic); }
.hb-layercard--under-rust .hb-layercard__under { background: var(--os-rust); }

/* --- Stats --- */
.hb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.hb-stat__num { font-family: var(--font-heading); font-weight: 700; font-size: 58px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand-primary); }
.hb-band--brand .hb-stat__num { color: #fff; }
.hb-stat__label { font-size: 15px; margin-top: 10px; max-width: 24em; }
.hb-band--brand .hb-stat__label { color: rgba(255,255,255,.85); }

/* --- Steps timeline --- */
.hb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.hb-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; }
.hb-step__n { font-family: var(--font-heading); font-weight: 700; color: var(--brand-accent-text); font-size: 15px; letter-spacing: .1em; }
.hb-step h3 { font-size: 18px; margin: 10px 0 8px; }
.hb-step p { font-size: 14.5px; }

/* --- Feature rows --- */
.hb-featrow { display: flex; gap: 18px; align-items: flex-start; }
.hb-featrow__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  background: var(--brand-tint); color: var(--brand-accent-text);
}
.hb-featrow h2, .hb-featrow h3 { font-size: 18px; margin-bottom: 6px; }
.hb-featrow p { font-size: 15px; }

/* --- FAQ accordion --- */
.hb-faq { max-width: 820px; margin: 0 auto; }
.hb-faq__item { border-bottom: 1px solid var(--line); }
.hb-faq__q {
  width: 100%; text-align: left; background: none; border: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  color: var(--ink); padding: 22px 8px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 16px;
}
.hb-faq__q:focus-visible { outline: 3px solid var(--hb-sky); outline-offset: 2px; }
.hb-faq__a { display: none; padding: 0 8px 22px; font-size: 15.5px; max-width: 60ch; }
.hb-faq__item.is-open .hb-faq__a { display: block; }

/* --- CTA band --- */
.hb-ctaband { background: var(--brand-primary); color: #fff; text-align: center; padding: 88px 0; }
.hb-ctaband h2 { color: #fff; font-size: 38px; margin-bottom: 28px; }

/* --- Site header --- */
.hb-sitehead { background: #fff; border-bottom: 1px solid var(--line); position: relative; }
.hb-sitehead__inner { display: flex; align-items: center; gap: 36px; padding-top: 18px; padding-bottom: 18px; }
.hb-sitehead .hb-lockup { text-decoration: none; }
.hb-sitenav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.hb-sitenav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.hb-sitenav__list a {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--ink); text-decoration: none;
}
.hb-sitenav__cta { padding: 11px 22px !important; font-size: 14px !important; }
/* --- Nav dropdowns (Our Brands) --- */
.hb-sitenav__list li { position: relative; list-style: none; }
.hb-sitenav__list .sub-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: -18px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 0; min-width: 250px; margin: 0; z-index: 60;
  box-shadow: 0 8px 24px rgba(27,33,55,.10);
}
.hb-sitenav__list li:hover > .sub-menu,
.hb-sitenav__list li:focus-within > .sub-menu { display: block; }
.hb-sitenav__list .sub-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.hb-sitenav__list .sub-menu a { display: block; padding: 10px 18px; border-bottom: none; }
.hb-sitenav__list .sub-menu a:hover { background: var(--mist); }
.hb-sitenav__list .menu-item-has-children > a::after { content: " »"; font-family: var(--font-heading); }

.hb-nav-toggle { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 10px; }
.hb-nav-toggle__bar { display: block; width: 24px; height: 3px; background: var(--ink); margin: 5px 0; border-radius: 2px; }
.hb-nav-toggle:focus-visible { outline: 3px solid var(--hb-sky); outline-offset: 2px; }

@media (max-width: 900px) {
  .hb-sitehead { position: sticky; top: 0; z-index: 50; }
  .hb-nav-toggle { display: block; }
  .hb-sitenav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 22px 22px;
  }
  .hb-sitehead.is-nav-open .hb-sitenav { display: flex; }
  .hb-sitenav__list { flex-direction: column; gap: 0; width: 100%; }
  .hb-sitenav__list a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .hb-sitenav__list .sub-menu { display: block; position: static; border: none; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .hb-sitenav__list .sub-menu a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
  .hb-sitenav__list .menu-item-has-children > a::after { content: ""; }
  .hb-sitenav__cta { margin-top: 16px; }
}

/* --- Sub-brand secondary nav: slim brand-color strip (L10 feedback) --- */
.hb-subnav { background: color-mix(in srgb, var(--brand-primary) 88%, #000); border-bottom: 1px solid rgba(255,255,255,.12); }
.hb-subnav__inner { display: flex; align-items: center; gap: 28px; padding-top: 9px; padding-bottom: 9px; }
.hb-subnav__brand {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: #fff; text-decoration: none; letter-spacing: .02em;
}
.hb-subnav__list { display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.hb-subnav__list li { list-style: none; }
.hb-subnav__list a {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,.92); text-decoration: none;
}
.hb-subnav__list a:hover { color: #fff; }
@media (max-width: 900px) {
  .hb-subnav__inner { overflow-x: auto; gap: 18px; }
  .hb-subnav__list a { white-space: nowrap; }
}

/* --- Slider (scroll-snap, user-driven; no autoplay per design brief) --- */
.hb-slider { position: relative; }
.hb-slider__track {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 8px;
}
.hb-slider__track::-webkit-scrollbar { display: none; }
.hb-slide { flex: 0 0 min(100%, 620px); scroll-snap-align: start; }
.hb-slider__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.hb-slider__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  color: var(--brand-accent-text); cursor: pointer; line-height: 1;
}
.hb-slider__btn:hover { background: var(--brand-tint); }
.hb-slider__btn:focus-visible { outline: 3px solid var(--hb-sky); outline-offset: 2px; }

/* --- Section-level CTA row (guide people down the path) --- */
/* !important: WP 7 flow-layout CSS zeroes margins on group children; without it
   the row sits flush against the content above (flagged by Becky 2026-07-14). */
.hb-nextstep { margin-top: 44px !important; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
p.hb-nextstep { display: block; }
/* guide links sit beside buttons here — kill the card-context top margin so
   they center on the button's midline */
.hb-nextstep .hb-card__more { margin-top: 0; }
.hb-center .wp-block-buttons, .hb-nextstep.hb-center { justify-content: center; }

/* --- Site footer --- */
.hb-sitefoot { background: var(--footer-bg); color: #B9BFD6; padding: 72px 0 36px; font-size: 14.5px; }
.hb-sitefoot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.hb-sitefoot h3 {
  font-family: var(--font-heading) !important; font-weight: 700; color: #fff; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px;
}
.hb-sitefoot a { color: #B9BFD6; text-decoration: none; display: block; margin-bottom: 10px; }
.hb-sitefoot__blurb { max-width: 30em; }
.hb-sitefoot__endorse { font-family: var(--font-heading); font-size: 12px; letter-spacing: .1em; }
.hb-sitefoot__base {
  border-top: 1px solid #2C3150; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px;
}
@media (max-width: 900px) { .hb-sitefoot__cols { grid-template-columns: 1fr; } }

/* --- Endorsed lockup (sub-brand headers) --- */
.hb-lockup { display: flex; flex-direction: column; gap: 3px; }
.hb-lockup__endorse {
  font-family: var(--font-heading); font-weight: 700; font-size: 10.5px;
  letter-spacing: .14em; color: var(--text-soft);
}
.hb-lockup__endorse strong { color: var(--hb-blue); font-weight: 700; }

/* --- Leadership grid --- */
.hb-grid-3 + .hb-grid-3, .hb-grid-3 + .hb-grid-center3, .hb-grid-center3 + .hb-grid-center3 { margin-top: var(--sp-4); }
/* Rows with fewer items than columns: cards keep the 3-across width, centered */
.hb-grid-center3 { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }
.hb-grid-center3 > * { width: calc((100% - 2 * var(--sp-4)) / 3); min-width: 280px; }
@media (max-width: 700px) { .hb-grid-center3 > * { width: 100%; } }
.hb-leader .hb-photo { margin: 0 0 18px; }
.hb-leader .hb-photo img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.hb-leader h2, .hb-leader h3 { margin-bottom: 2px; }
.hb-leader__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-accent-text); margin: 0 0 10px !important;
}
.hb-leader p:not(.hb-leader__title) { font-size: 14.5px; }

/* --- How-it-works intro: text column beside the tall workflow photo --- */
.hb-howintro { margin-bottom: 56px; }
.hb-howintro .hb-band__head { margin-bottom: 0; }
.hb-howintro .hb-photo { margin: 0; }
.hb-howintro .hb-photo img { max-width: 460px; }

/* --- Virtuous cycle graphic (careers + about) --- */
/* Visit illustration circles (OroMed "the visit" band) — line art sits in a
   brand-tint circle; multiply blend drops the art's white background out */
.hb-visitfigs { margin-top: 8px; }
.hb-visitfig { max-width: 280px; margin: 0 auto; }
.hb-visitfig__circle { background: var(--brand-tint); border-radius: 50%; overflow: hidden; }
.hb-visitfig__circle img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.hb-visitfig figcaption { text-align: center; margin-top: 14px; color: var(--ink); }

.hb-cyclegraphic { margin: 36px 0 8px; }
/* img renders display:block, so text-align can't center it — needs auto margins */
.hb-cyclegraphic img { max-width: 560px; width: 100%; height: auto; margin-left: auto; margin-right: auto; }

/* --- Case study cards: client logo tile above the summary. Stacked (not
   side-by-side) so a card with a logo keeps full body width and stays the
   same height as logo-less cards. --- */
.hb-cscard { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hb-cscard__logo {
  flex: none; width: 96px; height: 96px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 8px; overflow: hidden;
}
.hb-cscard__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hb-cscard__logo--lg { width: 150px; height: 110px; margin-bottom: 20px; padding: 12px; }
.hb-cscard__body { flex: 1; display: flex; flex-direction: column; }
.hb-cscard__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.hb-cscard__titlelink { color: inherit; text-decoration: none; }
.hb-cscard__titlelink:hover, .hb-cscard__titlelink:focus { color: var(--brand-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.hb-cscard__pills .hb-tagpill { margin-bottom: 0; }
.hb-cscard__body .hb-card__more { margin-top: auto; padding-top: 14px; }
.hb-cscard__body { width: 100%; }

/* --- Case study single: hero logo, pull-quote layercard, video grid --- */
.hb-hero--slim .hb-cscard__logo--lg { margin-bottom: 24px; }
.hb-hero--slim .hb-cscard__pills { margin-top: 16px; }
.hb-csquote {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  line-height: 1.5; color: #fff; margin: 0;
}
.hb-cscite { margin-top: 12px !important; font-size: 14px; }
.hb-video-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; margin-top: 40px;
}
.hb-video-grid .hb-card { padding: var(--sp-3); }
.hb-video-grid figcaption { padding: 10px 8px 2px; }

/* --- Prose column (single case study / long-form entries) --- */
.hb-prose { max-width: 72ch; }
.hb-prose h2 { font-size: 26px; margin: 40px 0 12px; }
.hb-prose p { margin: 0 0 16px; }
.hb-prose ul { padding-left: 22px; margin: 0 0 16px; }
.hb-prose li { margin-bottom: 8px; }
.hb-prose blockquote {
  border-left: 3px solid var(--brand-accent); padding-left: 20px; margin: 28px 0;
  font-family: var(--font-heading); font-weight: 700; font-size: 19px;
  color: var(--ink); line-height: 1.5;
}
.hb-prose blockquote cite {
  display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 400;
  font-style: normal; font-size: 14px; color: var(--text-soft);
}
.hb-prose .hb-video { margin: 24px 0; }

/* --- Video embed ([hb_video] shortcode) --- */
.hb-video { margin: 0; }
.hb-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--ink); }
.hb-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hb-video figcaption { font-size: 14px; color: var(--text-soft); margin-top: 10px; }
.hb-video--contained { max-width: 880px; margin: 40px auto 0; }

/* --- Photo treatment --- */
.hb-photo { border-radius: var(--radius-card); overflow: hidden; }
.hb-photo img { display: block; width: 100%; max-width: 100%; height: auto; }
.hb-photo--duotone { position: relative; }
.hb-photo--duotone::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  pointer-events: none;
}

/* --- Block-native compat: core blocks carry our classes --- */
.wp-block-group.hb-band, .wp-block-group.hb-hero, .wp-block-group.hb-ctaband { margin: 0; }
p.hb-eyebrow { margin: 0; }
.hb-band__head p.hb-eyebrow { margin-bottom: 0; }
.hb-eyebrow--green { color: var(--om-green); }
.hb-more--green { color: var(--om-green) !important; }
p.hb-stat__num, p.hb-stat__label { margin: 0; }
p.hb-stat__label { margin-top: 10px; }
p.hb-tagpill { margin: 0 0 12px; }
.hb-card p { margin: 0 0 .4em; }
.hb-card p:last-child { margin-bottom: 0; }
.hb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.wp-block-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.wp-block-button .wp-block-button__link {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  padding: 14px 28px; border-radius: var(--radius-btn);
  border: 2px solid transparent; text-decoration: none;
}
.wp-block-button.hb-btn--primary .wp-block-button__link { background: var(--brand-primary); color: #fff; }
.wp-block-button.hb-btn--inverse .wp-block-button__link { background: #fff; color: var(--brand-primary); }
.wp-block-button.hb-btn--ghost .wp-block-button__link { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.hb-ctaband .wp-block-buttons { justify-content: center; }
/* !important: WP layout CSS prints after child styles and re-adds block margins,
   which inflates the row and breaks vertical centering of beside-button links */
.hb-nextstep .wp-block-buttons { margin: 0 !important; }
.hb-nextstep p { margin: 0; }

/* --- Block-native utility classes (replace inline styles in content) --- */
.hb-center { text-align: center; }
.hb-hero--slim .hb-wrap { padding-top: 72px; padding-bottom: 80px; }
.hb-hero--slim h1 { font-size: 40px; }
.hb-eyebrow--mint { color: var(--hb-mint); }
.hb-eyebrow--gold { color: var(--opa-gold); } /* dark bands only — gold never carries text on white */
.hb-tagpill--green { background: var(--mint-tint); color: var(--om-green); }
.hb-tagpill--gold { background: var(--opa-gold-tint); color: var(--opa-gold-text); }
.hb-more--rust { color: var(--os-rust) !important; }
.hb-more--gold { color: var(--opa-gold-text) !important; }
.hb-split h2, .hb-split .wp-block-heading { font-size: 32px; }
.hb-split > .wp-block-group > p { margin: 0 0 14px; }
.hb-mission {
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
  color: var(--ink); max-width: 32em; margin: 14px auto 0; line-height: 1.4;
}
.hb-mission--lg { font-size: 28px; max-width: 28em; margin-top: 16px; }
.hb-layercard__row { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hb-layercard__main { flex: 1; min-width: 280px; }
.hb-layercard__over p { color: rgba(255,255,255,.85); font-size: 15.5px; margin: 10px 0 0; }
.hb-layercard--paper .hb-layercard__over p { color: var(--body-text); }
.hb-layercard__over .hb-eyebrow { margin: 0; }
.hb-layercard__over h3 { font-size: 26px; margin-top: 10px; }
/* photography placeholders until the shoot (hexes allowed here only as placeholders) */
.hb-photo--placeholder { background: linear-gradient(20deg, #8FA6C8, #5F7DA8); border-radius: var(--radius-card); }
.hb-photo--placeholder-alt { background: linear-gradient(200deg, #8FA6C8, #5F7DA8); border-radius: var(--radius-card); }
.hb-photo--tall { min-height: 420px; }
.hb-photo--med { min-height: 320px; }
.hb-band__head p { margin-top: 12px; max-width: 60ch; }
.hb-band__head p.hb-eyebrow { margin-top: 0; }
.hb-faq-band-foot { text-align: center; margin-top: 40px; font-size: 15px; }

.hb-ctaband .hb-mission { color: #fff; }
.hb-dual { margin-top: 64px; }
.hb-layercard--contained { max-width: 880px; margin-left: auto; margin-right: auto; }

/* --- Band watermark: fills the empty half of text-only bands (double-chevron,
       the only permitted motif). Content stays above via .hb-wrap z-index. --- */
.hb-band--marked { position: relative; overflow: hidden; }
.hb-band--marked .hb-wrap { position: relative; z-index: 1; }
.hb-bandmark {
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-heading); font-weight: 700; font-size: 300px; line-height: 1;
  color: var(--mist); user-select: none; pointer-events: none; z-index: 0;
}
@media (max-width: 900px) { .hb-bandmark { display: none; } }

/* --- Optimize hero: brand gold with ink text (Becky option 3, 2026-07-15).
       Navy stays primary for bands/buttons elsewhere on the page — the gold/navy
       duet is deliberate. Watermark is the Optimize emblem, not the chevrons. --- */
.brand-optimize .hb-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--opa-gold) 90%, #000) 0%, var(--opa-gold) 55%, color-mix(in srgb, var(--opa-gold) 86%, #fff) 100%);
  color: var(--ink);
}
.brand-optimize .hb-hero h1 { color: var(--ink); }
.brand-optimize .hb-hero .hb-hero__sub { color: var(--body-text); }
/* near-black gold: --opa-gold-text alone is unreadable on the pale gold hero.
   Fixed value rather than color-mix — the 62% mix measured only 4.09:1. */
.brand-optimize .hb-hero .hb-eyebrow { color: var(--opa-gold-hero-text); }
.brand-optimize .hb-hero .hb-btn.hb-btn--inverse,
.brand-optimize .hb-hero .wp-block-button.hb-btn--inverse .wp-block-button__link {
  background: var(--ink);
  color: #fff;
}
.brand-optimize .hb-hero .hb-btn.hb-btn--inverse:hover,
.brand-optimize .hb-hero .hb-btn.hb-btn--inverse:focus,
.brand-optimize .hb-hero .wp-block-button.hb-btn--inverse .wp-block-button__link:hover,
.brand-optimize .hb-hero .wp-block-button.hb-btn--inverse .wp-block-button__link:focus {
  background: color-mix(in srgb, var(--ink) 82%, #fff);
  color: #fff;
}
.brand-optimize .hb-hero .hb-btn.hb-btn--ghost,
.brand-optimize .hb-hero .wp-block-button.hb-btn--ghost .wp-block-button__link {
  border-color: color-mix(in srgb, var(--ink) 60%, transparent);
  color: var(--ink);
  background: transparent;
}
.brand-optimize .hb-hero .hb-btn.hb-btn--ghost:hover,
.brand-optimize .hb-hero .hb-btn.hb-btn--ghost:focus,
.brand-optimize .hb-hero .wp-block-button.hb-btn--ghost .wp-block-button__link:hover,
.brand-optimize .hb-hero .wp-block-button.hb-btn--ghost .wp-block-button__link:focus {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: var(--ink);
  color: var(--ink);
}
/* Brand strip on the Optimize page: the emblem's shadow gold (gold + 8% ink),
   so it reads as the watermark tone lifted into a band. Light bg → ink contents. */
.brand-optimize .hb-subnav {
  background: color-mix(in srgb, var(--opa-gold) 92%, #000);
  border-bottom-color: color-mix(in srgb, var(--ink) 15%, transparent);
}
.brand-optimize .hb-subnav__list a { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.brand-optimize .hb-subnav__list a:hover { color: var(--ink); }
.brand-optimize .hb-hero__watermark {
  background: url('../img/optimize-emblem.png') center / contain no-repeat;
  width: 500px;
  height: 500px;
  opacity: .08;
  font-size: 0;
  color: transparent;
}

/* --- OroSight: deliberate orange moments (blue-primary rule unchanged) --- */
/* Hero chevron watermark carries the brand orange as a large graphic fill —
   the one place #BF5528 is allowed (design brief: graphic fills only, never text). */
.brand-orosight .hb-hero__watermark { color: color-mix(in srgb, var(--os-orange-graphic) 30%, transparent); }
/* Closing CTA button goes rust so the conversion moment reads OroSight, not generic blue. */
.brand-orosight .hb-ctaband .hb-btn.hb-btn--inverse,
.brand-orosight .hb-ctaband .wp-block-button.hb-btn--inverse .wp-block-button__link {
  background: var(--os-rust);
  color: #fff;
}
.brand-orosight .hb-ctaband .hb-btn.hb-btn--inverse:hover,
.brand-orosight .hb-ctaband .hb-btn.hb-btn--inverse:focus,
.brand-orosight .hb-ctaband .hb-btn.hb-btn--inverse:active,
.brand-orosight .hb-ctaband .wp-block-button.hb-btn--inverse .wp-block-button__link:hover,
.brand-orosight .hb-ctaband .wp-block-button.hb-btn--inverse .wp-block-button__link:focus,
.brand-orosight .hb-ctaband .wp-block-button.hb-btn--inverse .wp-block-button__link:active {
  background: color-mix(in srgb, var(--os-rust) 82%, #000);
  color: #fff;
}

/* --- Blog (post index + single) --- */
/* Post hero: shorter than the brand-page hero, longer title measure. Brand
   scope on the wrapper themes the gradient + eyebrow (OroMed green + mint). */
.hb-hero--post .hb-wrap { padding-bottom: 72px; }
.hb-hero--post h1 { max-width: 26ch; }
.hb-postmeta {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; letter-spacing: .03em; margin: 0;
}
.hb-hero .hb-postmeta { color: rgba(255,255,255,.82); margin-top: 16px; }
.hb-hero--post .hb-cscard__pills { margin-top: 18px; }
.hb-postmeta__dot { margin: 0 8px; opacity: .55; }

/* Article body: the shared .hb-prose handles typography; center the measure and
   give h3 subheads a rule below h2 (source posts only use one heading level, so
   this is a safety net). */
.hb-prose--article { margin: 0 auto; }
.hb-prose h3 { font-size: 20px; margin: 28px 0 10px; }
.hb-postfeature { margin: 0 auto; max-width: 860px; }
.hb-postfeature img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
.hb-band--tight { padding-bottom: 0; }

/* Post cards on the index */
.hb-postgrid { align-items: stretch; }
.hb-postgrid > * { display: flex; }
.hb-postcard { display: flex; flex-direction: column; width: 100%; }
.hb-postcard__thumb { display: block; margin-bottom: 18px; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9; background: var(--mist); }
.hb-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-postcard h2, .hb-postcard h3 { margin: 0 0 4px; }
.hb-postmeta--card { color: var(--brand-accent-text); margin: 0 0 12px; }
.hb-postcard > p { margin: 0 0 8px; color: var(--ink); }
.hb-postcard .hb-card__more { margin-top: auto; }

/* Pagination */
.hb-pagination { margin-top: var(--sp-4); }
.hb-pagination .page-numbers {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  padding: 8px 14px; margin-right: 6px; border: 1px solid var(--line);
  border-radius: var(--radius-card); color: var(--brand-accent-text);
  text-decoration: none; display: inline-block;
}
.hb-pagination .page-numbers.current { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.hb-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Contact page: one-scheduler direction (Becky, 2026-07-20) --- */
.hb-split--top { align-items: start; }
.hb-list-chev { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 14px; }
.hb-list-chev li { display: flex; gap: 12px; align-items: baseline; max-width: 56ch; }
.hb-list-chev li::before {
  content: "»"; color: var(--brand-accent-text);
  font-family: var(--font-heading); font-weight: 700; flex: none;
}
/* Embed slot: card container for the HubSpot scheduler / form embeds.
   --pending is the staging placeholder look; drop it when the embed lands. */
.hb-embedslot {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(27,33,55,.10); padding: var(--sp-5);
}
.hb-embedslot--pending {
  border-style: dashed; box-shadow: none; min-height: 320px;
  display: grid; place-items: center; text-align: center;
  color: var(--text-soft); font-size: 15px;
}
.hb-embedslot--pending p { max-width: 34ch; margin: 0; }
.hb-contactform { max-width: 640px; margin-left: auto; margin-right: auto; }

/* --- Motion discipline --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}