/* =========================================================================
   BuyTides - Heart Health landing page
   =========================================================================

   Scoped entirely to `.hh-page`, the wrapper in
   templates/page-heart-health.html, so nothing here can leak into the
   shop, the product template, or the sitewide chrome.

   The page is built from native Gutenberg blocks. Everything below styles
   those blocks through the classNames set on them in the editor — no block
   output is hand-written, which is what keeps the page visually editable.
   ========================================================================= */

.hh-page {
	--hh-navy: #2b3754;
	--hh-navy-mid: #12406c;
	--hh-navy-deep: #08213a;
	--hh-cyan: #1fc8e3;
	--hh-cyan-soft: #61ddeb;
	--hh-cyan-bright: #6fe4f2;
	--hh-cyan-tint: #eaf9fc;
	--hh-cyan-ink: #9eedf6;
	--hh-teal: #1b7fa8;
	--hh-line: #dde7ee;
	--hh-surface: #f4f7f9;
	--hh-muted: #4b6479;
	--hh-muted-soft: #7c93a3;

	--hh-shell: 1240px;
	--hh-gutter: clamp(20px, 4vw, 48px);

	--hh-sans: "Inter", system-ui, -apple-system, sans-serif;
	--hh-display: "Outfit", "Inter", system-ui, sans-serif;

	background: #fff;
	color: var(--hh-navy);
	font-family: var(--hh-sans);
	line-height: 1.6;
}

/* No root-padding compensation here on purpose. Twenty Twenty-Five declares
   `useRootPaddingAwareAlignments`, but this page's block template gives <main>
   a plain flow layout, so it never receives the `has-global-padding` class and
   `.wp-site-blocks` resolves to `padding: 0`. Subtracting the root padding
   anyway pushed every section 50px wider than the viewport and put the page
   into horizontal scroll. The sections are already full-bleed without it. */

/* Twenty Twenty-Five hands every block a vertical block-gap margin, including
   the wrapper itself as a child of .wp-site-blocks. That outer one put a strip
   of page background between the announcement marquee and the hero video, so
   the video has to be cleared here as well as inside. */
.wp-site-blocks > .hh-page {
	margin-block: 0;
}

.hh-page > *,
.hh-page .wp-block-group,
.hh-page .wp-block-cover {
	margin-block: 0;
}

.hh-page h1,
.hh-page h2,
.hh-page h3 {
	font-family: var(--hh-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 0;
	text-wrap: balance;
}

.hh-page p {
	margin: 0;
	text-wrap: pretty;
}

.hh-page a {
	color: var(--hh-teal);
	text-decoration: none;
}

.hh-page a:hover {
	color: var(--hh-navy);
}

.hh-page ::selection {
	background: var(--hh-cyan-bright);
	color: var(--hh-navy);
}

/* ---- Shared scaffolding ------------------------------------------------ */

.hh-page .hh-wrap {
	max-width: var(--hh-shell);
	margin-inline: auto;
	padding-inline: var(--hh-gutter);
}

.hh-page .hh-sec {
	padding-block: clamp(56px, 7vw, 104px);
}

.hh-page .hh-sec--tint {
	background: var(--hh-surface);
}

.hh-page .hh-sec--navy {
	background: var(--hh-navy);
	color: #fff;
}

.hh-page .hh-h2 {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.1;
	margin-bottom: 12px;
}

.hh-page .hh-kick {
	font-family: var(--hh-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hh-teal);
	margin-bottom: 14px;
}

.hh-page .hh-sec--navy .hh-kick {
	color: var(--hh-cyan-ink);
}

.hh-page .hh-lede {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--hh-muted);
	max-width: 62ch;
	margin-bottom: 34px;
}

.hh-page .hh-sec--navy .hh-lede {
	color: rgba(255, 255, 255, 0.78);
}

/* Running body copy inside a column, where `.hh-lede` would open too much
   space between consecutive paragraphs. */
.hh-page .hh-body {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--hh-muted);
	max-width: 62ch;
	margin-bottom: 16px;
}

.hh-page .hh-body:last-of-type {
	margin-bottom: 30px;
}

.hh-page .hh-grid3,
.hh-page .hh-stats,
.hh-page .hh-timeline,
.hh-page .hh-scroll,
.hh-page .hh-library,
.hh-page .hh-faq {
	margin-top: 34px;
}

/* The accordion list is capped at 900px and centred, so a full-width 1240px
   heading above it sat off to the left of its own content. Matching the
   heading to the list's measure and centring it keeps the section on one axis. */
.hh-page #faq .hh-h2 {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.hh-page .hh-split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* ---- Buttons ----------------------------------------------------------- */

.hh-page .wp-block-buttons {
	gap: 14px;
	margin: 0;
}

.hh-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--hh-navy);
	color: #fff;
	font-family: var(--hh-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hh-page .wp-block-button__link:hover {
	background: var(--hh-navy-mid);
	color: #fff;
}

.hh-page .wp-block-button__link:active {
	background: var(--hh-navy-deep);
}

.hh-page .hh-btn-cy .wp-block-button__link {
	background: var(--hh-cyan-soft);
	color: var(--hh-navy);
}

.hh-page .hh-btn-cy .wp-block-button__link:hover {
	background: #3ecfe0;
	color: var(--hh-navy);
}

.hh-page .hh-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	color: #fff;
}

.hh-page .hh-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Card CTA: shorter, cyan, sits on the card's bottom edge. */
.hh-page .hh-btn-sm .wp-block-button__link {
	height: 44px;
	padding: 0 18px;
	font-size: 15px;
	background: var(--hh-cyan-soft);
	color: var(--hh-navy);
}

.hh-page .hh-btn-sm .wp-block-button__link:hover {
	background: #3ecfe0;
}

/* ---- Hero -------------------------------------------------------------- */

.hh-page .hh-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding: clamp(56px, 6.5vw, 96px) 0;
	min-height: 0;
}

.hh-page .hh-hero video.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Two painted layers over the footage: a left-to-right navy wash that holds
   the headline's contrast, then a cyan bloom from the lower left and upper
   right. Separate pseudo-elements because they use different blend geometry. */
.hh-page .hh-hero::before,
.hh-page .hh-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hh-page .hh-hero::before {
	background:
		radial-gradient(
			72% 76% at 50% 46%,
			rgba(6, 26, 45, 0.58) 0%,
			rgba(6, 26, 45, 0.4) 55%,
			rgba(6, 26, 45, 0.18) 100%
		),
		linear-gradient(
			180deg,
			rgba(6, 26, 45, 0.3) 0%,
			rgba(6, 26, 45, 0.12) 42%,
			rgba(6, 26, 45, 0.4) 100%
		);
}

.hh-page .hh-hero::after {
	background-image:
		radial-gradient(
			64% 82% at 2% 100%,
			rgba(31, 200, 227, 0.36) 0%,
			rgba(31, 200, 227, 0.16) 42%,
			rgba(31, 200, 227, 0) 68%
		),
		radial-gradient(
			64% 82% at 98% 100%,
			rgba(111, 228, 242, 0.3) 0%,
			rgba(31, 200, 227, 0.12) 44%,
			rgba(31, 200, 227, 0) 70%
		);
}

.hh-page .hh-hero > .wp-block-cover__background {
	display: none;
}

.hh-page .hh-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
}

.hh-page .hh-hero__body {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.hh-page .hh-hero__cta {
	justify-content: center;
}

.hh-page .hh-hero .hh-kick {
	color: var(--hh-cyan-ink);
}

/* Rank Math breadcrumb, sitting where the eyebrow used to. It inherits the
   eyebrow's role, so it takes the eyebrow's type: Outfit, small, wide-tracked,
   in the on-navy accent tint. The trail is the last element before the H1, so
   its bottom margin is what sets the gap to the headline. */
.hh-page .hh-hero .rank-math-breadcrumb {
	margin: 0 0 16px;
}

.hh-page .hh-hero .rank-math-breadcrumb p {
	margin: 0;
	font-family: var(--hh-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hh-cyan-ink);
	line-height: 1.5;
}

.hh-page .hh-hero .rank-math-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hh-page .hh-hero .rank-math-breadcrumb a:hover {
	color: #fff;
}

/* Rank Math marks every UNLINKED crumb `.last`, not just the final one, so
   Health Programs and the page title arrive with the same class. Only the true
   final crumb should read as the current page; the rest sit back with the
   links. */
.hh-page .hh-hero .rank-math-breadcrumb .separator {
	color: rgba(255, 255, 255, 0.42);
	margin: 0 2px;
}

.hh-page .hh-hero .rank-math-breadcrumb .last {
	color: rgba(255, 255, 255, 0.72);
}

.hh-page .hh-hero .rank-math-breadcrumb .last:last-child {
	color: var(--hh-cyan-ink);
}
.hh-page .hh-hero__h1 {
	text-shadow: 0 2px 18px rgba(6, 26, 45, 0.45);
	margin: 0 0 20px;
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.05;
	color: #fff;
}

.hh-page .hh-hero__lede {
	text-shadow: 0 1px 12px rgba(6, 26, 45, 0.5);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: 34px;
}

/* ---- Placeholder art ---------------------------------------------------

   No product photography exists yet. Rather than ship empty frames, each
   image slot renders an on-palette tide gradient with the subject named in
   it, composed at the final image's aspect. Swapping in a real core/image
   block later is a per-card change, not a rebuild.
   ------------------------------------------------------------------------ */

.hh-page .hh-ph {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background:
		radial-gradient(120% 100% at 12% 108%, rgba(31, 200, 227, 0.42) 0%, rgba(31, 200, 227, 0) 62%),
		radial-gradient(90% 90% at 96% -8%, rgba(111, 228, 242, 0.3) 0%, rgba(31, 200, 227, 0) 60%),
		linear-gradient(158deg, #123a60 0%, var(--hh-navy) 52%, var(--hh-navy-deep) 100%);
}

/* A single hairline arc, echoing the tide-gauge mark, so the placeholder
   reads as deliberate art rather than a flat swatch. */
.hh-page .hh-ph::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -46%;
	width: 128%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 1px solid rgba(158, 237, 246, 0.28);
	pointer-events: none;
}

.hh-page .hh-ph__label {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 16px 18px;
	font-family: var(--hh-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(234, 249, 252, 0.72);
}

/* ---- Product cards ----------------------------------------------------- */

.hh-page .hh-grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.hh-page .hh-card {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--hh-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hh-page .hh-card:hover {
	border-color: var(--hh-cyan-soft);
	box-shadow: 0 10px 30px -18px rgba(43, 55, 84, 0.35);
}

.hh-page .hh-card__media {
	height: 210px;
	border-bottom: 1.5px solid var(--hh-line);
}

.hh-page .hh-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--hh-cyan-soft);
	color: var(--hh-navy);
	font-family: var(--hh-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Alternating tag treatment keeps a six-card grid from reading as one flat
   repeat, and marks the navy cards as the multi-receptor compounds. */
.hh-page .hh-card--alt .hh-card__tag {
	background: var(--hh-navy);
	color: #fff;
}

.hh-page .hh-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}

.hh-page .hh-card__body h3 {
	font-size: 21px;
	line-height: 1.2;
}

.hh-page .hh-card__blurb {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--hh-muted);
	flex: 1;
}

.hh-page .hh-card__body .wp-block-buttons {
	margin-top: 6px;
}

/* ---- Mechanism steps --------------------------------------------------- */

.hh-page .hh-steps {
	display: grid;
	gap: 16px;
}

.hh-page .hh-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	padding: 22px;
	border: 1.5px solid var(--hh-line);
	border-radius: 14px;
	background: #fff;
}

.hh-page .hh-step__num {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--hh-cyan-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hh-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--hh-teal);
}

.hh-page .hh-step h3 {
	grid-column: 2;
	font-size: 17.5px;
	margin-bottom: 5px;
}

.hh-page .hh-step__body {
	grid-column: 2;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--hh-muted);
}

/* ---- Evidence figures --------------------------------------------------

   Deliberately not cards. These are three published figures, and a hairline
   rule between them carries the separation without implying each is its own
   raised object.
   ------------------------------------------------------------------------ */

.hh-page .hh-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0;
	border-top: 1.5px solid var(--hh-line);
}

.hh-page .hh-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 34px 32px 34px 0;
}

.hh-page .hh-stat + .hh-stat {
	padding-left: 32px;
	border-left: 1.5px solid var(--hh-line);
}

.hh-page .hh-stat__fig {
	font-family: var(--hh-display);
	font-size: clamp(38px, 4.4vw, 52px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--hh-navy);
	font-variant-numeric: tabular-nums;
}

.hh-page .hh-stat__label {
	font-family: var(--hh-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--hh-teal);
}

.hh-page .hh-stat__note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--hh-muted);
}

.hh-page .hh-fine {
	margin-top: 24px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--hh-muted-soft);
	max-width: 820px;
}

/* ---- Reference calculator ---------------------------------------------- */

.hh-page .hh-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.22);
	outline: none;
	margin: 0;
}

.hh-page .hh-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hh-cyan-soft);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(43, 55, 84, 0.3);
	cursor: pointer;
}

.hh-page .hh-slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hh-cyan-soft);
	border: 3px solid #fff;
	cursor: pointer;
}

.hh-page .hh-slider:focus-visible {
	outline: 2px solid var(--hh-cyan-bright);
	outline-offset: 6px;
}

.hh-page .hh-slider-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hh-cyan-ink);
	margin-bottom: 12px;
}

.hh-page .hh-slider-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
}

.hh-page .hh-calc-out {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.hh-page .hh-calc-panel {
	padding: 26px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

.hh-page .hh-calc-panel--cy {
	background: var(--hh-cyan-soft);
	border-color: transparent;
	color: var(--hh-navy);
}

.hh-page .hh-calc-panel__label {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 8px;
}

.hh-page .hh-calc-panel--cy .hh-calc-panel__label {
	color: var(--hh-navy-mid);
	font-weight: 600;
}

.hh-page .hh-calc-panel__fig {
	font-family: var(--hh-display);
	font-size: clamp(32px, 3.6vw, 44px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.hh-page .hh-calc-panel__foot {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--hh-navy-mid);
}

/* ---- Titration timeline ------------------------------------------------ */

.hh-page .hh-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.hh-page .hh-tl {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hh-page .hh-tl__media {
	height: 150px;
	border-radius: 14px;
}

/* The rule above each stage lengthens across the row, so the five columns read
   as one progression rather than five unrelated items. It is drawn on the
   heading rather than as its own element, so the editor holds no empty block. */
.hh-page .hh-tl h3 {
	font-size: 18px;
}

.hh-page .hh-tl h3::before {
	content: "";
	display: block;
	width: var(--hh-tl-bar, 100%);
	height: 3px;
	margin-bottom: 12px;
	border-radius: 2px;
	background: var(--hh-cyan-soft);
}

.hh-page .hh-tl--1 { --hh-tl-bar: 20%; }
.hh-page .hh-tl--2 { --hh-tl-bar: 40%; }
.hh-page .hh-tl--3 { --hh-tl-bar: 60%; }
.hh-page .hh-tl--4 { --hh-tl-bar: 80%; }
.hh-page .hh-tl--5 { --hh-tl-bar: 100%; }

.hh-page .hh-tl__body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--hh-muted);
}

/* ---- Comparison table -------------------------------------------------- */

.hh-page .hh-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	background: #fff;
	border: 1.5px solid var(--hh-line);
	border-radius: 16px;
}

.hh-page .hh-tbl {
	margin: 0;
}

.hh-page .hh-tbl table {
	width: 100%;
	border-collapse: collapse;
}

.hh-page .hh-tbl th,
.hh-page .hh-tbl td {
	padding: 16px 18px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--hh-line);
	font-size: 14.5px;
	line-height: 1.5;
	vertical-align: top;
	color: #22384d;
}

.hh-page .hh-tbl tbody tr:last-child th,
.hh-page .hh-tbl tbody tr:last-child td {
	border-bottom: 0;
}

.hh-page .hh-tbl th {
	font-family: var(--hh-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hh-muted-soft);
	white-space: nowrap;
}

/* Column heads name compounds, so they keep sentence case at reading size. */
.hh-page .hh-tbl thead th {
	min-width: 180px;
	font-size: 16px;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--hh-navy);
}

.hh-page .hh-tbl thead th:first-child {
	min-width: 150px;
}

.hh-page .hh-tbl-note {
	margin-top: 18px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--hh-muted-soft);
	max-width: 820px;
}

/* ---- Library ----------------------------------------------------------

   An asymmetric pair rather than three equal cards: the lead article runs
   wide with its art beside the copy, the two follow-ups stack beside it.
   ------------------------------------------------------------------------ */

.hh-page .hh-library {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 20px;
	align-items: start;
}

.hh-page .hh-art {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--hh-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hh-page .hh-art:hover {
	border-color: var(--hh-cyan-soft);
	box-shadow: 0 10px 30px -18px rgba(43, 55, 84, 0.35);
}

.hh-page .hh-art__media {
	height: 240px;
	border-bottom: 1.5px solid var(--hh-line);
}

.hh-page .hh-art__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 24px;
}

.hh-page .hh-art__cat {
	font-family: var(--hh-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hh-muted-soft);
}

.hh-page .hh-art__body h3 {
	font-size: 19px;
	line-height: 1.25;
}

.hh-page .hh-art--lead .hh-art__body h3 {
	font-size: 26px;
}

.hh-page .hh-art__dek {
	font-size: 14px;
	line-height: 1.55;
	color: var(--hh-muted);
}

.hh-page .hh-art__more {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hh-teal);
}

.hh-page .hh-library__rest {
	display: grid;
	gap: 20px;
}

/* The stacked pair drops its art and runs as text rows, so the lead keeps
   the only image weight in the section. */
.hh-page .hh-library__rest .hh-art__media {
	height: 120px;
}

/* ---- FAQ --------------------------------------------------------------- */

/* The accordion list is capped at 900px and centred, so a full-width 1240px
   heading above it sat off to the left of its own content. Matching the
   heading to the list's measure and centring it keeps the section on one axis. */
.hh-page #faq .hh-h2 {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}
.hh-page .hh-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 900px;
	margin-inline: auto;
}

.hh-page .hh-faq .wp-block-details {
	border: 1.5px solid var(--hh-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.hh-page .hh-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px;
	list-style: none;
	cursor: pointer;
	font-family: var(--hh-display);
	font-size: 17.5px;
	font-weight: 600;
	color: var(--hh-navy);
}

.hh-page .hh-faq summary::-webkit-details-marker {
	display: none;
}

.hh-page .hh-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hh-cyan-tint)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B7FA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E")
		center / 14px no-repeat;
	transition: transform 0.18s ease;
}

.hh-page .hh-faq details[open] summary::after {
	transform: rotate(180deg);
}

.hh-page .hh-faq summary:focus-visible {
	outline: 2px solid var(--hh-teal);
	outline-offset: -3px;
}

.hh-page .hh-faq .wp-block-details > :not(summary) {
	padding: 0 22px 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--hh-muted);
	margin: 0;
}

/* ---- Responsive --------------------------------------------------------

   Every multi-column layout above collapses here. The hero keeps its
   single-column body at all widths, so it needs no rule.
   ------------------------------------------------------------------------ */

/* Fixed-track step-down. The card and timeline grids above are locked to 3 and
   5 tracks so their rows read as intended at desktop; that lock has to be
   released deliberately as the viewport narrows, since fixed tracks cannot
   reflow on their own the way auto-fill did. (hh-grid3 step-down) */
@media (max-width: 1080px) {
	.hh-page .hh-timeline {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1000px) {
	.hh-page .hh-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.hh-page .hh-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.hh-page .hh-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Below this the timeline copy would run at about ten characters a line in two
   tracks, so it stacks rather than squeeze. */
@media (max-width: 520px) {
	.hh-page .hh-timeline {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 980px) {
	.hh-page .hh-library {
		grid-template-columns: 1fr;
	}

	.hh-page .hh-library__rest {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 860px) {
	.hh-page .hh-split {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.hh-page .hh-stat,
	.hh-page .hh-stat + .hh-stat {
		padding: 26px 0;
		border-left: 0;
	}

	.hh-page .hh-stat + .hh-stat {
		border-top: 1.5px solid var(--hh-line);
	}
}

@media (max-width: 560px) {
	.hh-page .hh-calc-out {
		grid-template-columns: 1fr;
	}

	.hh-page .hh-hero__h1 {
		font-size: clamp(30px, 8vw, 38px);
		max-width: none;
	}
}

/* The hero video plays on every device, including where the OS asks for
   reduced motion: the footage is ambient, muted and loops silently, and the
   brand wants it seen. This gradient is painted underneath it permanently, so
   a browser that refuses to decode or autoplay the file still shows the hero
   as designed rather than an empty band. */
.hh-page .hh-hero {
	background: linear-gradient(158deg, #123a60 0%, var(--hh-navy) 55%, var(--hh-navy-deep) 100%);
}