/*
 * hbd-hero — the page hero.
 *
 * Every number here is a var(--hbd-*) from assets/css/tokens.css, where the measurement it came from is
 * named. Breakpoints are the ones production actually switches at: 768 / 1024 / 1280
 * (docs/audit/widgets/hero.md). Enqueued as `hbd-widget-hero` only on pages that render the widget.
 */

/* ------------------------------------------------------------------ shell */

.hbd-w-hero { display: flex; align-items: flex-start; }
/* The hero keeps its own gutter scale (80 / 60 / 20) rather than the theme's clamp()ed --hbd-gutter,
   which lands on 56.32px at 1024 and 42.24px at 768 — 3.7 and 17.8px away from live. */
.hbd-w-hero > .hbd-w__inner { width: 100%; max-width: calc(var(--hbd-container) + 2 * var(--hbd-hero-gutter)); padding-inline: var(--hbd-hero-gutter); }

/* ---------------------------------------------------------------- content */

.hbd-w-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--hbd-hero-gap); }
/* The shared eyebrow/list/heading utilities carry their own bottom margins; the column's gap is the
   single source of vertical rhythm here. */
.hbd-w-hero__content > * { margin: 0; }

.hbd-w-hero__eyebrow { font-family: var(--hbd-font-serif-2); font-size: var(--hbd-hero-eyebrow); line-height: var(--hbd-hero-eyebrow-lh); }
/* Live hero H1s have no tracking; base.css puts -0.01em on every heading. */
.hbd-w-hero__heading { font-size: var(--hbd-hero-h1); line-height: var(--hbd-hero-h1-lh); letter-spacing: normal; }
.hbd-w-hero__subheading { font-family: var(--hbd-font-serif-2); font-weight: 500; font-size: var(--hbd-hero-sub); line-height: var(--hbd-hero-sub-lh); }
/* The subheading slot as a dashed capsule — `/service/digital-thermography/` (hero.md §4.2). The
   shared .hbd-pill is 12px mono on 6% tracking with .55rem/.875rem of padding; live's is 14/20 at
   `letter-spacing: normal` with 8px/20px, which is the 428×38 box the screenshot measures. It also
   **wraps**: at 390 live breaks the label over two centred lines inside one capsule, where .hbd-pill
   is `white-space: nowrap` and would have overflowed a 350px column by 78px. */
.hbd-w-hero__pill.hbd-pill { max-width: 100%; padding: var(--hbd-hero-pill-pad); font-size: var(--hbd-hero-pill); line-height: var(--hbd-hero-pill-lh); letter-spacing: normal; white-space: normal; text-align: center; justify-content: center; }
.hbd-w-hero__text { width: 100%; max-width: var(--hbd-hero-text-col); font-size: var(--hbd-hero-text); line-height: var(--hbd-hero-text-lh); letter-spacing: var(--hbd-hero-text-ls); }
.hbd-w-hero__text > p { margin: 0; }
.hbd-w-hero__text > p + p { margin-top: var(--hbd-hero-gap); }
/* The small italic line live puts between the numbered list and the button on /service/virtual-care/.
   Body italic, the same 14/21 step the split hero's intro uses, and no width cap: live lets it run the
   full column (measured 491px of text inside a 610px column at 1440, wrapping to two lines at 1024). */
.hbd-w-hero__note { font-style: italic; font-size: var(--hbd-hero-text-s); line-height: var(--hbd-hero-text-s-lh); }
.hbd-w-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hbd-hero-actions-gap); }
/* Live's filled hero pills have no border and are exactly 44px tall; `.hbd-btn` gives every button a
   1px transparent border, which made them 46. Same fix footer.css already makes for the footer pills. */
.hbd-w-hero__actions .hbd-btn:not(.hbd-btn--outline) { border-width: 0; }

/* The hero's numbered list is bigger than the shared utility: 32px marker, 16px gaps, 16px label. */
.hbd-w-hero__list { display: grid; gap: var(--hbd-hero-marker-gap); }
.hbd-w-hero__list .hbd-list__item { grid-template-columns: var(--hbd-hero-marker) 1fr; gap: var(--hbd-hero-marker-gap); align-items: center; }
.hbd-w-hero__list .hbd-list__marker { width: var(--hbd-hero-marker); height: var(--hbd-hero-marker); font-family: var(--hbd-font-body); font-size: var(--hbd-fs-body); }

/* ------------------------------------------------------------------ media */

.hbd-w-hero__media--cover { position: absolute; inset: 0; z-index: 0; }
.hbd-w-hero__media--cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hbd-hero-focal, 50% 0%); } /* `focal`: top unless the instance says otherwise */
/* Above the cover <img>, not below it: the Design section's own overlay (.hbd-row--image::before) is a
   sibling of .hbd-w__inner and would be painted over by this image. Only rendered when the slider is > 0;
   the opacity arrives as the inline --hbd-hero-overlay custom property, the convention design.css uses. */
.hbd-w-hero__overlay { position: absolute; inset: 0; background: var(--hbd-black); opacity: var(--hbd-hero-overlay, 0); pointer-events: none; }
.hbd-w-hero__media--side img { display: block; width: 100%; aspect-ratio: var(--hbd-hero-media-ratio); object-fit: cover; border-radius: var(--hbd-radius-xs); }

/* ------------------------------------------------- layout: full-bleed-image */

/* The cover image is positioned against the <section>, so the inner box must stay unpositioned —
   .hbd-w (design.css) is the relative ancestor and .hbd-w-hero__content carries the z-index instead. */
.hbd-w-hero--full-bleed-image > .hbd-w__inner { position: static; }
/* Phones: live gives each cover hero its own height (959 / 459 / 800 / 811 — the widget's
   `min_height_mobile`, `--hbd-hero-min-h-sm`) and top-aligns the copy in it at an authored offset
   (`mobile_offset`, `--hbd-hero-pad-top-sm`, 72px on most); the photo shows under the copy. A hero
   with no phone height is as tall as its copy plus 72px each side, as before
   (docs/audit/widgets/hero.md §5, client QC 2026-09-23). */
.hbd-w-hero--full-bleed-image { padding-block: var(--hbd-hero-pad-top-sm, var(--hbd-hero-pad-sm)) var(--hbd-hero-pad-bottom-sm, var(--hbd-hero-pad-sm)); min-height: var(--hbd-hero-min-h-sm, 0px); }
.hbd-w-hero__picture { display: block; width: 100%; height: 100%; }
/* Blue accent only where live has it: the dark-text full-bleed heroes (home, both treatments). On a
   light-text hero the accent inherits white, exactly as production does. */
.hbd-w-hero--full-bleed-image .hbd-w-hero__heading em { color: var(--hbd-blue); }
.hbd-w-hero--full-bleed-image.hbd-on-dark .hbd-w-hero__heading em { color: inherit; }

/* The light-text cover hero is production's *service banner* (virtual-care, thermography — hero.md
   §8.4), a different component from home's with its own rhythm: 32px between the copy's groups and
   24px inside the eyebrow/heading/pill group; the H1 at 64px from 768 (home steps 48 → 64 at 1024);
   the eyebrow hidden on phones; the pill no wider than 73vw there. Keyed on the Design scheme —
   `light-text` is what makes a cover hero a banner — so no page carries a class for it. */
.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__content { gap: var(--hbd-hero-banner-gap); }
.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__eyebrow + .hbd-w-hero__heading,
.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__heading + .hbd-w-hero__pill,
.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__heading + .hbd-w-hero__subheading { margin-top: calc(var(--hbd-hero-gap) - var(--hbd-hero-banner-gap)); }
/* On phones every cover hero stacks its buttons, left-aligned (live: `md:flex-row flex-col`). */
.hbd-w-hero--full-bleed-image .hbd-w-hero__actions { flex-direction: column; align-items: flex-start; }
/* The three body sizes live authors per banner (`text_size`). Regular is the shared 16/22.4. */
.hbd-w-hero--text-small .hbd-w-hero__text { font-size: var(--hbd-hero-text-sm-phone); line-height: var(--hbd-hero-text-sm-phone-lh); letter-spacing: normal; }
.hbd-w-hero--text-large .hbd-w-hero__text { max-width: var(--hbd-hero-text-col-l); font-size: var(--hbd-hero-text-l); line-height: var(--hbd-hero-text-l-lh); } /* keeps the shared 2.5% tracking: live's `tracking-[2.5%]` is what wraps it to five lines at 390 */
@media (max-width: 767px) {
	.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__eyebrow { display: none; }
	/* The eyebrow is gone, so the in-group margin that follows it must go too (`+` still matches). */
	.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__eyebrow + .hbd-w-hero__heading { margin-top: 0; }
	.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__pill.hbd-pill { max-width: var(--hbd-hero-pill-max-sm); }
	/* The banner's stacked buttons are equal width — the widest one's (live's column has no
	   `items-start`, so the shorter pill stretches to its sibling: 211/211 on thermography). */
	.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__actions { align-items: stretch; }
}

@media (min-width: 768px) {
	/* From 768 live is a fixed-height box (547 / 597 / 650 at 768–1279, the desktop height from 1280)
	   with the copy absolutely positioned and centred in it — its `py-[122px]` is inert, because an
	   absolutely positioned child centred in a padded box lands in the same place as in an unpadded
	   one. So the padding here is only a floor for copy taller than the box: where live would let the
	   text spill past the section's edges, ours grows the section instead (§5). */
	.hbd-w-hero--full-bleed-image { align-items: center; padding-block: var(--hbd-hero-pad-min); min-height: var(--hbd-hero-min-h-md, calc(var(--hbd-hero-min-h, 0px) * var(--hbd-hero-scale-md))); }
	.hbd-w-hero--full-bleed-image .hbd-w-hero__actions { flex-direction: row; align-items: center; }
	.hbd-w-hero--full-bleed-image.hbd-on-dark:not(.hbd-w-hero--has-details) .hbd-w-hero__heading { font-size: var(--hbd-hero-banner-h1); line-height: var(--hbd-hero-banner-h1-lh); }
	/* An authored heading column (`heading_width`): virtual-care's `md:w-[350px]`, which is what
	   wraps "Pay-as-you-Go Care" onto two lines from 768 and lets it run whole on the phone. */
	.hbd-w-hero--full-bleed-image .hbd-w-hero__heading { max-width: var(--hbd-hero-heading-w, none); }
	.hbd-w-hero--text-small .hbd-w-hero__text { font-size: var(--hbd-hero-text-s); line-height: var(--hbd-hero-text-s-lh); }
}
@media (min-width: 1280px) {
	.hbd-w-hero--full-bleed-image { min-height: var(--hbd-hero-min-h, 0px); }
}

/* ------------------------------------------------- layout: + details card */

/* A location hero: the media is a fixed band, the text is top-aligned inside it, and the details card
   Plan 3 fills starts --hbd-hero-details-lift above the band's bottom edge. */
.hbd-w-hero--has-details { --hbd-hero-media-h: calc(var(--hbd-hero-min-h, 0px) * var(--hbd-hero-scale-sm)); --hbd-hero-lift: var(--hbd-hero-details-lift-sm); display: block; padding-block: 0; }
.hbd-w-hero--has-details .hbd-w-hero__media--cover { inset: 0 0 auto; height: var(--hbd-hero-media-h); }
.hbd-w-hero--has-details .hbd-w-hero__content { padding-top: var(--hbd-hero-pad-loc-sm); min-height: calc(var(--hbd-hero-media-h) - var(--hbd-hero-lift)); box-sizing: border-box; }
.hbd-w-hero--has-details .hbd-w-hero__heading { width: 100%; font-size: var(--hbd-hero-h1-md); line-height: var(--hbd-hero-h1-md-lh); }
.hbd-w-hero--has-details .hbd-w-hero__eyebrow { font-size: var(--hbd-hero-eyebrow-loc); line-height: var(--hbd-hero-eyebrow-loc-lh); }
.hbd-w-hero--has-details .hbd-w-hero__content { gap: var(--hbd-hero-gap-loc); }
.hbd-w-hero--has-details .hbd-w-hero__text { max-width: var(--hbd-hero-text-col-loc); font-size: var(--hbd-hero-text-loc-s); line-height: var(--hbd-hero-text-loc-s-lh); letter-spacing: normal; }
.hbd-w-hero--has-details .hbd-w-hero__actions { margin-top: calc(var(--hbd-hero-gap-loc-actions) - var(--hbd-hero-gap-loc)); }
.hbd-w-hero__details { position: relative; z-index: 1; }

@media (min-width: 768px) {
	/* The location media band is 760px from 768px up — it does not take the 0.78 step the other
	   full-bleed heroes take, so the scale is reset here. */
	.hbd-w-hero--has-details { --hbd-hero-media-h: var(--hbd-hero-min-h, 0px); --hbd-hero-lift: var(--hbd-hero-details-lift); }
	.hbd-w-hero--has-details .hbd-w-hero__content { padding-top: var(--hbd-hero-pad-loc); max-width: var(--hbd-hero-col-sm); }
}
@media (min-width: 1024px) {
	.hbd-w-hero--has-details .hbd-w-hero__content { max-width: var(--hbd-hero-col-md); }
}
@media (min-width: 1280px) {
	.hbd-w-hero--has-details .hbd-w-hero__content { max-width: var(--hbd-hero-col); }
	.hbd-w-hero--has-details .hbd-w-hero__heading { font-size: var(--hbd-hero-h1); line-height: var(--hbd-hero-h1-lh); }
	.hbd-w-hero--has-details .hbd-w-hero__text { font-size: var(--hbd-hero-text-loc); line-height: var(--hbd-hero-text-loc-lh); }
}

/* -------------------------------------------------------- layout: split-image */

.hbd-w-hero--split-image { padding-block: var(--hbd-hero-pad-split-sm); }
/* Live stacks the content and the photo 10px apart — the same gutter the two columns get from 1024 up. */
.hbd-w-hero--split-image > .hbd-w__inner { display: grid; gap: var(--hbd-hero-split-gap); }
.hbd-w-hero--split-image .hbd-w-hero__heading { font-size: var(--hbd-hero-h1-md); line-height: var(--hbd-hero-h1-md-lh); }
/* The intro's 530px cap is live's `lg:max-w-[530px] max-w-full`: from 1024 only — at 900 it runs the
   full column, which is what keeps membership's line from wrapping there (2026-09-23 pass). Its
   tracking is live's `tracking-[2.5%]`, shared with the list and the note; at 1440 that is what wraps
   virtual-care's intro onto three lines (docs/audit/widgets/hero.md §8.5). */
.hbd-w-hero--split-image .hbd-w-hero__text { max-width: none; font-size: var(--hbd-hero-text-s); line-height: var(--hbd-hero-text-s-lh); letter-spacing: var(--hbd-hero-text-ls); margin-top: var(--hbd-hero-actions-gap-s); }
.hbd-w-hero--split-image .hbd-w-hero__list,
.hbd-w-hero--split-image .hbd-w-hero__note { letter-spacing: var(--hbd-hero-text-ls); }
/* 24 (the column gap) + 8 = live's 32px above the note and 32px below it. */
.hbd-w-hero--split-image .hbd-w-hero__note { margin-top: var(--hbd-hero-actions-gap-s); }
.hbd-w-hero--split-image .hbd-w-hero__actions { gap: var(--hbd-hero-actions-gap-s); margin-top: var(--hbd-hero-actions-gap-s); }
/* Live stacks the buttons full-width on a phone. */
.hbd-w-hero--split-image .hbd-w-hero__actions .hbd-btn { flex: 1 1 100%; justify-content: center; }

@media (min-width: 768px) {
	.hbd-w-hero--split-image { padding-block: var(--hbd-hero-pad-split); }
	/* Still stacked at 768, but the photo runs 680px wide — wider than the 648px content box — and is
	   centred on the viewport (measured x=44 at 768). */
	/* Centred with negative auto-margins rather than justify-self, because Chromium falls back to
	   start-alignment for a grid item wider than its track. */
	.hbd-w-hero--split-image .hbd-w-hero__media--side { width: var(--hbd-hero-media-w-md); max-width: none; margin-inline: calc((100% - var(--hbd-hero-media-w-md)) / 2); }
	.hbd-w-hero--split-image .hbd-w-hero__actions .hbd-btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
	/* Two equal columns with a 10px gutter (measured: 447 + 10 + 447 = 904 at 1024). */
	/* The text column is centred against the photo, which is why live's eyebrow sits 8.2px below the
	   padding edge at 1440 (472px image vs a 455.6px text column) and flush with it at 1024. */
	/* minmax(0, 1fr), not 1fr: an fr track's automatic minimum is min-content, which the 708px photo
	   would push the columns to 562/708 instead of live's even 635/635. */
	.hbd-w-hero--split-image > .hbd-w__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--hbd-hero-split-gap); align-items: center; }
	.hbd-w-hero--split-image .hbd-w-hero__media--side { width: auto; margin-inline: 0; }
	/* Live's `lg:max-w-[530px]`: the intro's cap exists from 1024 only (2026-09-23 pass). */
	.hbd-w-hero--split-image .hbd-w-hero__text { max-width: var(--hbd-hero-text-col-split); }
}
@media (min-width: 1280px) {
	/* From 1280 up the photo holds its 708px design width and overhangs its 635px column evenly
	   (measured centre 1042.5 at 1440, identical to the column centre). */
	.hbd-w-hero--split-image .hbd-w-hero__media--side { width: var(--hbd-hero-media-w); margin-inline: calc((100% - var(--hbd-hero-media-w)) / 2); }
}

/* ------------------------------------ layout: split-image, photo on the LEFT */

/* `/service/virtual-care/`'s `#section-consultationSection`, measured 2026-09-20 (hero.md §4.1). It is
   the mirror of the membership hero in one respect and not in another, and the class carries both:
     · the photo is the FIRST item — left of the text from 1024 up, and *above* it while stacked
       (live's h1 sits 60px under the photo at 768 and 390, where membership's photo sits under the
       text). `order` moves the grid item without moving it in the DOM, so the reading order stays
       heading-first for a screen reader.
     · the gutter is 60px, not 10 — measured on both axes at once: the columns are 610 + 60 + 610 at
       1440 and 422 + 60 + 422 at 1024, and the stacked gap is the same 60. It is one token because on
       live it is one number; a future media-left hero with a 10px gutter would split them.
   Redefining --hbd-hero-split-gap on the section itself means the `gap` and `column-gap` declarations
   above, and the media's `calc((100% - width) / 2)` overhang, all follow with no second rule. */
.hbd-w-hero--media-left { --hbd-hero-split-gap: var(--hbd-hero-split-gap-wide); }
.hbd-w-hero--media-left .hbd-w-hero__media--side { order: -1; }

/* The artwork behind it is the *same* Sanity/Steer file the membership hero uses, turned 180° — the
   four corner colours of the two live 1440 screenshots match diagonally to within 4/255
   (blue top-right + orange bottom-left on membership; orange top-left + blue bottom-right here), and
   no rotated variant of that file exists on the CDN. CSS cannot rotate a background image, so the
   section's own background is redrawn on a pseudo-element that can be rotated: `background: inherit`
   copies the inline `background-image` plus design.css's center/cover/no-repeat, and an opaque cover
   image at `inset: 0` hides the unrotated one underneath. The inner box is lifted above it, because a
   positioned ::after would otherwise paint over the content. Only on this modifier — the membership
   hero keeps the plain background. */
/* Three layers, and the order matters: the rotated artwork (::after) is an OPAQUE cover image, so it
   paints over anything below it. design.css's overlay is ::before with no z-index of its own, and a
   positioned ::after paints after a positioned ::before at the same level — which left a media-left
   hero with Design → Dark overlay set showing no overlay at all. So the three are stacked explicitly:
   artwork 0 → overlay 1 → content 2. */
.hbd-w-hero--media-left.hbd-row--image::after { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; transform: rotate(180deg); pointer-events: none; }
.hbd-w-hero--media-left.hbd-row--image::before { z-index: 1; }
.hbd-w-hero--media-left.hbd-row--image > .hbd-w__inner { z-index: 2; }

/* ---------------------------------------------------------- layout: centered */

.hbd-w-hero--centered { padding-block: var(--hbd-hero-pad-centered-sm) 0; }
.hbd-w-hero--centered > .hbd-w__inner { --hbd-hero-gutter: var(--hbd-hero-gutter-centered); }
.hbd-w-hero--centered .hbd-w-hero__content { align-items: center; text-align: center; }
.hbd-w-hero--centered .hbd-w-hero__heading { width: 100%; max-width: var(--hbd-hero-head-col-centered); font-weight: 400; font-size: var(--hbd-hero-h1-centered); line-height: var(--hbd-hero-h1-centered-lh); }
.hbd-w-hero--centered .hbd-w-hero__text { max-width: var(--hbd-hero-intro-col-centered); font-size: var(--hbd-hero-intro); line-height: var(--hbd-hero-intro-lh); letter-spacing: normal; }

@media (min-width: 1024px) {
	.hbd-w-hero--centered { padding-block: var(--hbd-hero-pad-centered) 0; }
}

/* ------------------------------------------------- the /our-story/ image strip (`strip`)

   Two rows of photographs that travel left under the centred heading. Live drives each row with a JS
   carousel (an 8s linear transform transition per step); this is two CSS tracks, so it runs with
   JavaScript off, and `prefers-reduced-motion` stops it — which live's does not. Measured on
   /our-story/ #section-ourStoryBanner (docs/audit/widgets/hero.md §4.3): the cards are flush (the
   pitch IS the card width), the two rows are 6px apart, and the block sits --hbd-hero-strip-top under
   the intro.

   The strip runs gutter to gutter, so the inner loses its cap and its padding and the content column
   takes them instead — which is also why this pair of rules is scoped to --has-strip and leaves a
   strip-less centered hero exactly as Plan 2 measured it. */
.hbd-w-hero--has-strip > .hbd-w__inner { max-width: none; padding-inline: 0; }
.hbd-w-hero--has-strip .hbd-w-hero__content { width: 100%; padding-inline: var(--hbd-hero-gutter-centered); box-sizing: border-box; }
/* Live pins the section's height per width and lets the strip overflow it where the pin is shorter
   than the strip (−6.19 at 1024–1279, −15.05 at ≤767, hero.md §4.3.1): a negative --hbd-hero-strip-bottom
   pulls the section's bottom up by that much (the strip overflows visibly, as live's does) and a
   positive one pads it. The 2026-09-23 pass adopted live's negatives instead of clamping them at 0. */
.hbd-w-hero--has-strip { padding-bottom: max(0px, var(--hbd-hero-strip-bottom)); overflow: visible; }
.hbd-w-hero--has-strip .hbd-w-hero__strip { margin-bottom: min(0px, var(--hbd-hero-strip-bottom)); }

.hbd-w-hero__strip { display: grid; gap: var(--hbd-hero-strip-row-gap); width: 100%; margin-top: var(--hbd-hero-strip-top); }
.hbd-w-hero__strip-row { overflow: hidden; }
.hbd-w-hero__strip-track { display: flex; width: max-content; animation: hbd-hero-strip var(--hbd-hero-strip-speed) linear infinite; }
/* The card IS the pitch, so the gutter between two photographs is drawn inside it rather than as a track
   `gap` — that keeps the measured pitch exact while leaving production's ground between them — and the
   photograph carries the corner radius (client QC, 2026-09-21: the strip shipped flush and square). */
.hbd-w-hero__strip-card { flex: 0 0 var(--hbd-hero-strip-card-w); width: var(--hbd-hero-strip-card-w); height: var(--hbd-hero-strip-card-h); padding-inline: var(--hbd-hero-strip-inset); box-sizing: border-box; }
.hbd-w-hero__strip-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--hbd-hero-strip-radius); }

/* Production's rows travel in opposite directions — the top one left, the bottom one right. One keyframe
   serves both: the second row plays it in reverse, which is the same half-track loop read backwards, so
   the seam stays invisible and the reduced-motion rule below still stops both tracks. */
.hbd-w-hero__strip-row:nth-child(2) .hbd-w-hero__strip-track { animation-direction: reverse; }

/* The list is in the DOM twice, so one pass is exactly half the track. */
@keyframes hbd-hero-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hbd-w-hero__strip-track { animation: none; } }

/* ------------------------------------------------------ layout: cover-column (/pincc/)

   `full-bleed-image`'s sibling: the same cover <img> behind the copy, in a column that shares its row
   with a second widget. The row is what makes the photograph span both cells — see
   `.hbd-page-hero-row` in assets/css/pages.css, which is where that one page-level rule lives.
   Measured 2026-09-21 (docs/audit/widgets/hero.md §4.4). */
.hbd-w-hero--cover-column > .hbd-w__inner { position: static; }
/* No min-height below 1024: the column is a band above the marquee there, and live sizes it from its
   own content (docs/audit/widgets/hero.md §4.4). The floor only binds once the two are side by side. */
.hbd-w-hero--cover-column { align-items: center; padding-block: var(--hbd-hero-cc-pad) 0; }
.hbd-w-hero--cover-column .hbd-w-hero__content { gap: 0; }
.hbd-w-hero--cover-column .hbd-w-hero__heading { font-size: var(--hbd-hero-cc-h1); line-height: var(--hbd-hero-cc-h1-lh); }
.hbd-w-hero--cover-column .hbd-w-hero__subheading { font-size: var(--hbd-hero-cc-sub); line-height: var(--hbd-hero-cc-sub-lh); margin-top: var(--hbd-hero-cc-gap); }
.hbd-w-hero--cover-column .hbd-w-hero__actions { gap: var(--hbd-hero-actions-gap-s); margin-top: var(--hbd-hero-cc-actions-gap); }
/* Live stacks the two buttons full-width on a phone, as the split hero does. */
.hbd-w-hero--cover-column .hbd-w-hero__actions .hbd-btn { flex: 1 1 100%; justify-content: center; }

.hbd-w-hero__logo { display: block; }
.hbd-w-hero__logo-img { display: block; width: var(--hbd-hero-cc-logo-w); height: var(--hbd-hero-cc-logo-h); object-fit: contain; object-position: left center; }

@media (min-width: 768px) {
	.hbd-w-hero--cover-column .hbd-w-hero__actions .hbd-btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
	/* From 1024 the column stops being a band above the marquee and becomes the left half of the row,
	   vertically centred inside live's 700px band. */
	.hbd-w-hero--cover-column { padding-block: 0; height: 100%; min-height: var(--hbd-hero-min-h, 0px); }
}