/*
 * MDH Homepage — "Clearwater"
 * Scoped to .mdh-hp. Light ground; dark bands for hero, proof,
 * What to Expect and the map. Tokens follow the site palette.
 */

.mdh-hp {
	--hp-bg: #F7FBFD;
	--hp-panel: #FFFFFF;
	--hp-tint: #EAF4FB;
	--hp-tint-2: #DCEDF9;
	--hp-line: #D7E6F1;
	--hp-navy: #013656;
	--hp-navy-2: #06253A;
	--hp-navy-3: #030F18;
	--hp-ink: #0F2C3F;
	--hp-muted: #4F6B7E;
	--hp-accent: #83C8F3;
	--hp-deep: #1B84C4;
	--hp-gold: #F0A93B;
	--hp-dk-panel: rgba(131, 200, 243, .06);
	--hp-dk-line: rgba(131, 200, 243, .2);
	--hp-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
	--hp-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
	--hp-maxw: 1240px;
	--hp-sticky-offset: 96px;

	font-family: var(--hp-sans);
	background: var(--hp-bg);
	color: var(--hp-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.mdh-hp * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.mdh-hp a { color: inherit; }
.mdh-hp img { max-width: 100%; }
.mdh-hp-wrap { max-width: var(--hp-maxw); margin-inline: auto; padding-inline: 22px; }
.mdh-hp section { position: relative; }

/* ---------- type ---------- */
.mdh-hp-kicker { font: 600 12px var(--hp-sans); letter-spacing: .22em; color: var(--hp-deep); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.mdh-hp-kicker__no { color: #8FA9BB; }
.mdh-hp-kicker::after { content: ""; flex: 0 0 34px; height: 1px; background: linear-gradient(90deg, var(--hp-deep), transparent); }
.mdh-hp-kicker--center { justify-content: center; }
@media (max-width: 640px) { .mdh-hp-kicker--center::after { display: none; } }
.mdh-hp .mdh-hp-on-dark .mdh-hp-kicker,
.mdh-hp-expect .mdh-hp-kicker, .mdh-hp-map .mdh-hp-kicker { color: var(--hp-accent); }
.mdh-hp-expect .mdh-hp-kicker__no, .mdh-hp-map .mdh-hp-kicker__no { color: rgba(143, 174, 194, .8); }
.mdh-hp-expect .mdh-hp-kicker::after, .mdh-hp-map .mdh-hp-kicker::after { background: linear-gradient(90deg, var(--hp-accent), transparent); }
/* 1.15 keeps Poppins descenders (y/g) clear of the next line's ascenders. */
.mdh-hp h1, .mdh-hp h2, .mdh-hp h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; color: var(--hp-navy); }
.mdh-hp h2 { font-size: clamp(30px, 4.8vw, 54px); }
.mdh-hp-h--dim { color: #7C97A9; }
.mdh-hp-h--blue { color: var(--hp-deep); }
.mdh-hp-h--glow { background: linear-gradient(100deg, var(--hp-navy) 0%, #1B84C4 60%, #5FB2E5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mdh-hp-map .mdh-hp-h--glow { background: linear-gradient(100deg, #fff 15%, var(--hp-accent) 65%, #4FA8DC); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Proof span is "With MD Hyperbaric": white dies inside "With", the brand
   name holds the accent. */
.mdh-hp-proof .mdh-hp-h--glow { background: linear-gradient(100deg, #fff 6%, #D7EDFB 16%, var(--hp-accent) 27%, var(--hp-accent) 75%, #4FA8DC 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Why span is "Choose MD Hyperbaric?": navy through "Choose", transition at
   its tail, "MD Hyperbaric?" in the lighter blues. */
.mdh-hp-why .mdh-hp-h--glow { background: linear-gradient(100deg, var(--hp-navy) 20%, #1B84C4 36%, #4FA8DC 75%, #5FB2E5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Hero: symmetric fades — white dies across "of", "Hyperbaric Oxygen" holds
   the accent, then blue fades back to white entering "Therapy". */
.mdh-hp-hero .mdh-hp-h--glow { background: linear-gradient(100deg, #fff 12%, #D7EDFB 18%, var(--hp-accent) 24%, var(--hp-accent) 77%, #D7EDFB 84%, #fff 91%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mdh-hp-expect h2, .mdh-hp-expect h3, .mdh-hp-map h2, .mdh-hp-proof h2 { color: #fff; }
.mdh-hp-sub { color: var(--hp-muted); font-size: clamp(15.5px, 1.6vw, 17.5px); max-width: 58ch; }
.mdh-hp-expect .mdh-hp-sub, .mdh-hp-proof .mdh-hp-sub { color: rgba(255, 255, 255, .72); }
.mdh-hp-sec-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 5vw, 52px); }
.mdh-hp-sec-head--center { text-align: center; justify-items: center; }
.mdh-hp-note { margin-top: 20px; font: 500 11.5px var(--hp-sans); color: #9DB3C2; }
.mdh-hp-center-row { display: flex; justify-content: center; margin-top: 36px; }
.mdh-hp-center-row--gap { gap: 14px; flex-wrap: wrap; }
.mdh-hp-cta-row { margin-top: 30px; }

/* ---------- buttons (full pills, site style) ---------- */
/* Font matches the site header's Request Appointment button. */
.mdh-hp .mdh-hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 500 16px/1 "Open Sans", Arial, sans-serif; text-decoration: none; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s; white-space: nowrap; }
.mdh-hp .mdh-hp-btn svg { width: 17px; height: 17px; flex: none; }
.mdh-hp .mdh-hp-btn:hover { transform: translateY(-2px); }
.mdh-hp .mdh-hp-btn:focus-visible { outline: 2px solid var(--hp-deep); outline-offset: 3px; }
.mdh-hp .mdh-hp-btn--navy { background: var(--hp-navy); color: #fff; box-shadow: 0 8px 24px rgba(1, 54, 86, .22); }
.mdh-hp .mdh-hp-btn--navy:hover { box-shadow: 0 14px 34px rgba(1, 54, 86, .3); color: #fff; }
.mdh-hp .mdh-hp-btn--sky { background: var(--hp-accent); color: var(--hp-navy); }
.mdh-hp .mdh-hp-btn--sky:hover { box-shadow: 0 8px 30px rgba(131, 200, 243, .55); color: var(--hp-navy); }
.mdh-hp .mdh-hp-btn--outline { border-color: var(--hp-navy); color: var(--hp-navy); background: transparent; }
.mdh-hp .mdh-hp-btn--outline:hover { background: var(--hp-navy); color: #fff; }
.mdh-hp .mdh-hp-btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
.mdh-hp .mdh-hp-btn--ghost:hover { border-color: var(--hp-accent); background: rgba(131, 200, 243, .15); color: #fff; }

/* ---------- motion ---------- */
[data-hp-pop] { opacity: 0; transform: translateY(20px) scale(.93); transition: opacity .55s ease, transform .75s cubic-bezier(.3, 1.45, .45, 1); }
[data-hp-pop].is-in { opacity: 1; transform: none; }
[data-hp-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .6, .2, 1), transform .8s cubic-bezier(.2, .6, .2, 1); }
[data-hp-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-hp-pop], [data-hp-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.mdh-hp-marq__track { animation: none !important; }
}

/* ---------- depth gauge ---------- */
/* Circular pressure dial, bottom-left. Dark glass disc; 240° sweep with a
   glowing accent arc and needle driven by scroll depth (1.0 → 2.0 ATA). */
.mdh-hp-gauge { position: fixed; left: 14px; bottom: 14px; z-index: 40; width: 88px; height: 88px; border-radius: 50%; background: #0B1D2C; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 12px 34px rgba(2, 18, 30, .45); opacity: 0; transform: translateY(16px) scale(.94); pointer-events: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.mdh-hp-gauge.is-show { opacity: 1; transform: none; }
.mdh-hp-gauge__dial { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
/* 180° dial: arc runs 9 o'clock → 3 o'clock, entire bottom half stays clear
   for the readout. Arc length = half of the r=44 circumference (138.2). */
.mdh-hp-gauge__ticks { fill: none; stroke: rgba(131, 200, 243, .28); stroke-width: 3; stroke-dasharray: 1.5 11.12; }
.mdh-hp-gauge__track { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 138.2 276.5; transform: rotate(180deg); transform-origin: 60px 60px; }
.mdh-hp-gauge__arc { fill: none; stroke: var(--hp-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 138.2 276.5; stroke-dashoffset: 138.2; transform: rotate(180deg); transform-origin: 60px 60px; filter: drop-shadow(0 0 5px rgba(131, 200, 243, .75)); transition: stroke-dashoffset .25s ease-out; }
.mdh-hp-gauge__needle { transform-origin: 60px 60px; transform: rotate(-90deg); transition: transform .25s ease-out; }
.mdh-hp-gauge__needle line { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.mdh-hp-gauge__needle circle { fill: var(--hp-accent); }
.mdh-hp-gauge__read { position: absolute; left: 0; right: 0; bottom: 19px; text-align: center; font: 700 9.5px var(--hp-sans); letter-spacing: .04em; color: #fff; }
.mdh-hp-gauge__label { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 600 6.5px var(--hp-sans); letter-spacing: .22em; color: rgba(131, 200, 243, .85); }
/* Only show when the side gutter is wide enough that the dial sits fully in
   the page padding and can't touch content: needs ~102px clear of the left
   edge, i.e. viewports ≥ 1400px with the 1240px content column. */
@media (max-width: 1399px) { .mdh-hp-gauge { display: none; } }

/* ---------- marquees ---------- */
.mdh-hp-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mdh-hp-marq__track { display: flex; gap: 12px; width: max-content; animation: mdh-hp-marq 40s linear infinite; }
.mdh-hp-marq--rev .mdh-hp-marq__track { animation-direction: reverse; }
/* Only the reviews marquee pauses on hover (cards are read); logo and chip
   marquees keep moving so they don't read as clickable. */
.mdh-hp-reviews .mdh-hp-marq:hover .mdh-hp-marq__track { animation-play-state: paused; }
/* Loop distance is measured in JS (--hp-marq-shift) so the wrap point is
   pixel-exact — no jump when the animation resets. */
@keyframes mdh-hp-marq { to { transform: translateX(calc(-1 * var(--hp-marq-shift, 50%))); } }

/* ================= HERO ================= */
/* Plain full-height hero — no sticky pin. The pinned dead zone read as a
   scroll hitch; the fade now rides normal scroll position instead. */
.mdh-hp-hero { position: relative; height: 100svh; background: var(--hp-navy-3); }
.mdh-hp-hero__pin { position: relative; height: 100%; overflow: hidden; display: flex; align-items: center; }
.mdh-hp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mdh-hp-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 15, 24, .74), rgba(3, 15, 24, .38) 52%, rgba(3, 15, 24, .1) 78%), linear-gradient(rgba(3, 15, 24, .34), rgba(3, 15, 24, .34)), radial-gradient(120% 90% at 50% 110%, rgba(3, 15, 24, .88), transparent 55%), linear-gradient(180deg, rgba(3, 15, 24, .5), rgba(3, 15, 24, .12) 35%, transparent 55%); }
/* Slight upward shift + wider gap: breathing room between the title and
   the CTAs (margin, not transform — the scrub owns transform). */
.mdh-hp-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--hp-maxw); margin-inline: auto; margin-top: -5vh; text-align: left; display: grid; justify-items: start; gap: 38px; padding-inline: 22px; }
.mdh-hp .mdh-hp-hero__title { color: #fff; font-size: clamp(40px, 6.4vw, 76px); font-weight: 600; max-width: 15ch; letter-spacing: -0.035em; text-shadow: 0 2px 28px rgba(3, 15, 24, .55), 0 1px 3px rgba(3, 15, 24, .45); }
/* text-shadow bleeds through transparent background-clip glyphs — kill it on
   the gradient span or the words render muddy. */
.mdh-hp .mdh-hp-hero__title .mdh-hp-h--glow { text-shadow: none; }
.mdh-hp-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 640px) {
	.mdh-hp-hero__veil { background: linear-gradient(rgba(3, 15, 24, .48), rgba(3, 15, 24, .48)), radial-gradient(140% 90% at 50% 110%, rgba(3, 15, 24, .9), transparent 60%), linear-gradient(180deg, rgba(3, 15, 24, .55), rgba(3, 15, 24, .18) 35%, transparent 55%); }
}
.mdh-hp-hero__descent { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; font: 600 11px var(--hp-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .65); display: grid; justify-items: center; gap: 8px; }
.mdh-hp-hero__descent svg { width: 16px; height: 16px; color: var(--hp-accent); animation: mdh-hp-bob 2s infinite ease-in-out; }
@keyframes mdh-hp-bob { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .mdh-hp-hero__descent svg { animation: none; } }

/* ================= PROOF ================= */
.mdh-hp-proof { background: linear-gradient(180deg, var(--hp-navy-3), var(--hp-navy-2)); padding: clamp(56px, 8vw, 96px) 0 0; overflow: hidden; }
.mdh-hp-proof h2 { text-align: center; margin-inline: auto; max-width: 30ch; font-size: clamp(30px, 4.6vw, 52px); }
.mdh-hp-proof .mdh-hp-sub { text-align: center; margin: 14px auto 0; }
.mdh-hp-proof .mdh-hp-marq { padding: clamp(30px, 4vw, 44px) 0 0; }
.mdh-hp-proof .mdh-hp-marq--rev { padding-top: clamp(16px, 2.2vw, 24px); padding-bottom: clamp(48px, 7vw, 72px); }
.mdh-hp-proof .mdh-hp-marq--rev .mdh-hp-marq__track { animation-duration: 48s; }
.mdh-hp-chip { flex: none; display: flex; align-items: center; gap: 10px; background: var(--hp-dk-panel); border: 1px solid var(--hp-dk-line); padding: 13px 22px; border-radius: 999px; font: 500 14px var(--hp-sans); color: rgba(255, 255, 255, .92); }
.mdh-hp-chip svg { width: 15px; height: 15px; color: var(--hp-accent); flex: none; }

/* ================= LEAGUES ================= */
.mdh-hp-leagues { padding: clamp(46px, 6vw, 68px) 0; border-bottom: 1px solid var(--hp-line); background: var(--hp-panel); }
.mdh-hp-leagues__lead { text-align: center; font: 600 11.5px var(--hp-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hp-muted); margin-bottom: 28px; padding-inline: 20px; }
/* Only 7 logos: keep the marquee in a centered container so it never runs
   edge to edge, and show the logos plain (no chip boxes). */
.mdh-hp-leagues .mdh-hp-marq { max-width: 920px; margin-inline: auto; }
.mdh-hp-leagues .mdh-hp-marq__track { gap: clamp(44px, 6vw, 76px); align-items: center; }
.mdh-hp-league { flex: none; height: 56px; display: flex; align-items: center; justify-content: center; }
.mdh-hp-league img { max-height: 44px; max-width: 104px; object-fit: contain; }
.mdh-hp-league.is-wide img { max-width: 126px; }

/* ================= WHAT IS HBOT ================= */
.mdh-hp-what { background: var(--hp-tint); padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.mdh-hp-what .mdh-hp-sec-head { margin-bottom: 18px; }
.mdh-hp-what__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
@media (max-width: 900px) { .mdh-hp-what__grid { grid-template-columns: 1fr; } }
.mdh-hp-photo { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4/3.3; background: linear-gradient(160deg, #0A4E77, var(--hp-navy)); box-shadow: 0 30px 70px rgba(1, 54, 86, .25); }
.mdh-hp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mdh-hp-photo__chip { position: absolute; left: 18px; top: 18px; z-index: 2; background: rgba(255, 255, 255, .94); border-radius: 16px; padding: 14px 18px; box-shadow: 0 14px 34px rgba(2, 20, 32, .35); }
.mdh-hp-photo__chip b { display: block; font: 600 26px/1 var(--hp-sans); letter-spacing: -.02em; color: var(--hp-deep); font-variant-numeric: tabular-nums; }
.mdh-hp-photo__chip > span { font: 600 10px var(--hp-sans); letter-spacing: .1em; color: var(--hp-muted); }

/* ================= CONDITIONS ================= */
.mdh-hp-conditions { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-panel); }
.mdh-hp-cond-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1080px) { .mdh-hp-cond-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mdh-hp-cond-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; } }
.mdh-hp-cond { position: relative; border-radius: 16px; border: 1px solid var(--hp-line); background: var(--hp-bg); aspect-ratio: 1/1.1; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; overflow: hidden; transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .4s, box-shadow .4s; }
.mdh-hp-cond::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130px 130px at var(--hp-mx, 50%) var(--hp-my, 20%), rgba(131, 200, 243, .35), transparent 70%); opacity: 0; transition: opacity .4s; }
.mdh-hp-cond:hover { transform: translateY(-6px); border-color: var(--hp-accent); box-shadow: 0 20px 44px rgba(1, 54, 86, .16); }
.mdh-hp-cond:hover::before { opacity: 1; }
.mdh-hp-cond__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--hp-tint); border: 1px solid var(--hp-tint-2); display: flex; align-items: center; justify-content: center; color: var(--hp-deep); position: relative; }
.mdh-hp-cond__ic svg { width: 17px; height: 17px; }
.mdh-hp-cond h3 { font-size: 14.5px; line-height: 1.35; letter-spacing: -.01em; position: relative; }
.mdh-hp-cond__go { position: relative; font: 600 10.5px var(--hp-sans); letter-spacing: .12em; color: #8FA9BB; transition: color .3s; }
.mdh-hp-cond:hover .mdh-hp-cond__go { color: var(--hp-deep); }

/* ================= WHY ================= */
.mdh-hp-why { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-bg); }
.mdh-hp-why__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 100px); }
@media (max-width: 900px) { .mdh-hp-why__grid { grid-template-columns: 1fr; } }
.mdh-hp-why__left { position: sticky; top: var(--hp-sticky-offset); align-self: start; display: grid; gap: 18px; height: fit-content; }
@media (max-width: 900px) { .mdh-hp-why__left { position: static; } }
.mdh-hp-why__prog { display: flex; gap: 6px; }
.mdh-hp-why__prog i { width: 34px; height: 3px; border-radius: 3px; background: var(--hp-tint-2); transition: background .4s; }
.mdh-hp-why__prog i.is-on { background: var(--hp-deep); }
.mdh-hp-pillar { border: 1px solid var(--hp-line); background: var(--hp-panel); border-radius: 18px; padding: clamp(24px, 3vw, 38px); margin-bottom: 16px; display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; opacity: .45; transform: translateY(8px) scale(.985); transition: opacity .6s, transform .6s, border-color .6s, box-shadow .6s; }
.mdh-hp-pillar.is-active { opacity: 1; transform: none; border-color: var(--hp-accent); box-shadow: 0 18px 44px rgba(1, 54, 86, .12); }
.mdh-hp-pillar__ic { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--hp-tint-2); display: flex; align-items: center; justify-content: center; color: var(--hp-deep); background: var(--hp-tint); }
.mdh-hp-pillar h3 { font-size: 19px; margin-bottom: 7px; }
.mdh-hp-pillar p { font-size: 14.5px; color: var(--hp-muted); }
@media (prefers-reduced-motion: reduce) { .mdh-hp-pillar { opacity: 1; transform: none; } }

/* ================= WHAT TO EXPECT ================= */
.mdh-hp-expect { background: var(--hp-navy-2); padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 7vw, 90px); }
.mdh-hp-stack { margin-top: clamp(20px, 4vw, 40px); }
.mdh-hp-stack__card { position: sticky; background: linear-gradient(150deg, #0B4266, #062E48); border: 1px solid rgba(131, 200, 243, .25); border-radius: 24px; padding: clamp(26px, 4vw, 46px); margin-bottom: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 3vw, 36px); align-items: center; box-shadow: 0 -14px 40px rgba(2, 18, 30, .45); }
/* Solid translucent fill — -webkit-text-stroke with transparent fill throws
   miter-spike artifacts where glyph paths self-intersect (e.g. "2"). */
.mdh-hp-stack__num { font: 600 clamp(38px, 4.6vw, 58px)/1 var(--hp-sans); letter-spacing: -.03em; color: rgba(131, 200, 243, .32); font-variant-numeric: tabular-nums; }
.mdh-hp-stack__card h3 { color: #fff; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.2; margin-bottom: 8px; }
.mdh-hp-stack__card p { color: rgba(255, 255, 255, .75); font-size: 15px; max-width: 54ch; }
.mdh-hp-stack__tag { font: 600 11px var(--hp-sans); letter-spacing: .12em; color: var(--hp-accent); border: 1px solid rgba(131, 200, 243, .35); padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 700px) { .mdh-hp-stack__card { grid-template-columns: auto 1fr; } .mdh-hp-stack__tag { display: none; } }
/* Mobile: cards flow normally — sticky stacking fought the browser chrome
   collapse and juddered. */
@media (hover: none), (max-width: 900px) { .mdh-hp-stack__card { position: static !important; } }

/* ================= VIDEOS ================= */
.mdh-hp-videos { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-panel); }
.mdh-hp-vid-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1080px) { .mdh-hp-vid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
	.mdh-hp-vid-grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-y: none; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -22px; padding-inline: 22px; scrollbar-width: none; }
	.mdh-hp-vid-grid::-webkit-scrollbar { display: none; }
	.mdh-hp-vid { flex: 0 0 62vw; scroll-snap-align: center; }
}
.mdh-hp-vid { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 9/15; cursor: pointer; border: 1px solid var(--hp-line); background: linear-gradient(170deg, #0A4E77, #031F33); text-align: left; display: block; width: 100%; transition: transform .4s, border-color .4s, box-shadow .4s; }
.mdh-hp-vid:hover { transform: translateY(-6px); border-color: var(--hp-accent); box-shadow: 0 24px 50px rgba(1, 54, 86, .25); }
.mdh-hp-vid:focus-visible { outline: 2px solid var(--hp-deep); outline-offset: 3px; }
.mdh-hp-vid__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mdh-hp-vid__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 15, 24, .1) 45%, rgba(3, 15, 24, .88)); }
.mdh-hp-vid__play { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; background: rgba(3, 15, 24, .45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; transition: background .35s, border-color .35s, color .35s, box-shadow .35s; }
.mdh-hp-vid__play svg { width: 16px; height: 16px; }
.mdh-hp-vid:hover .mdh-hp-vid__play { background: var(--hp-accent); border-color: var(--hp-accent); color: var(--hp-navy); box-shadow: 0 0 34px rgba(131, 200, 243, .6); }
.mdh-hp-vid__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 72px 16px 16px; }
.mdh-hp-vid__meta small { font: 600 10px var(--hp-sans); letter-spacing: .18em; color: var(--hp-accent); }
.mdh-hp-vid__meta h3 { color: #fff; font-size: 16.5px; line-height: 1.25; margin-top: 5px; }

/* video lightbox */
.mdh-hp-lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(3, 15, 24, .88); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mdh-hp-lightbox[hidden] { display: none; }
.mdh-hp-lightbox__frame { width: min(420px, 92vw); aspect-ratio: 9/16; max-height: 86svh; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.mdh-hp-lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Root-class prefix beats the theme kit's `button` rules (see lessons.md). */
.mdh-hp .mdh-hp-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(3, 15, 24, .6); color: #fff; font-size: 26px; font-family: var(--hp-sans); line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mdh-hp .mdh-hp-lightbox__close:hover { border-color: var(--hp-accent); color: var(--hp-accent); background: rgba(3, 15, 24, .6); }

/* ================= OUTCOMES ================= */
.mdh-hp-outcomes { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-tint); }
.mdh-hp-outcomes .mdh-hp-sub { max-width: none; }
.mdh-hp-dash { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
@media (max-width: 940px) { .mdh-hp-dash { grid-template-columns: 1fr; } }
/* Left card distributes its rows over the full card height so a taller
   right card doesn't leave dead space at the bottom. */
.mdh-hp-dash .mdh-hp-card:first-child { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.mdh-hp-dash .mdh-hp-card:first-child .mdh-hp-crit { margin-bottom: 0; }
.mdh-hp-dash .mdh-hp-card:first-child .mdh-hp-adjust { margin-top: 0; }
.mdh-hp-card { border: 1px solid var(--hp-line); background: var(--hp-panel); border-radius: 20px; padding: clamp(20px, 3vw, 30px); box-shadow: 0 12px 34px rgba(1, 54, 86, .07); }
.mdh-hp-card__kicker { display: flex; justify-content: space-between; align-items: center; font: 600 10.5px var(--hp-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hp-muted); margin-bottom: 20px; }
.mdh-hp-card__live { color: #12915B; display: flex; align-items: center; gap: 7px; }
.mdh-hp-card__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12915B; animation: mdh-hp-pulse 2s infinite; }
@keyframes mdh-hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mdh-hp-score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.mdh-hp-score-head__who b { display: block; font: 600 24px/1.2 var(--hp-sans); letter-spacing: -.02em; color: var(--hp-navy); }
.mdh-hp-score-head__who span { font: 500 12px var(--hp-sans); color: var(--hp-muted); }
.mdh-hp-big-score b { font: 600 58px/1 var(--hp-sans); letter-spacing: -.03em; color: var(--hp-deep); font-variant-numeric: tabular-nums; }
.mdh-hp-big-score b i { font: 500 20px var(--hp-sans); color: var(--hp-muted); font-style: normal; }
.mdh-hp-pill { display: inline-flex; margin-top: 8px; font: 700 10.5px var(--hp-sans); letter-spacing: .14em; color: var(--hp-navy); background: var(--hp-accent); padding: 6px 12px; border-radius: 7px; }
.mdh-hp-crit { display: grid; grid-template-columns: 118px 1fr 40px; gap: 12px; align-items: center; margin-bottom: 13px; }
.mdh-hp-crit label { font: 600 10.5px var(--hp-sans); letter-spacing: .12em; color: var(--hp-muted); }
.mdh-hp-crit__bar { height: 7px; border-radius: 5px; background: var(--hp-tint-2); overflow: hidden; }
.mdh-hp-crit__bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--hp-accent), var(--hp-deep)); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.mdh-hp-crit output { font: 600 13px var(--hp-sans); color: var(--hp-deep); text-align: right; font-variant-numeric: tabular-nums; }
.mdh-hp-adjust { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; align-items: stretch; }
.mdh-hp-adjust span { font: 500 11.5px var(--hp-sans); color: var(--hp-deep); background: var(--hp-tint); border: 1px solid var(--hp-tint-2); padding: 7px 12px; border-radius: 8px; }
/* ON TRACK status chip: same size as the adjustment chips, bold, green = good. */
.mdh-hp-adjust .mdh-hp-pill { font: 700 11.5px var(--hp-sans); letter-spacing: .1em; color: #0E7A4E; background: rgba(18, 145, 91, .08); border: 1px solid rgba(18, 145, 91, .32); padding: 7px 12px; border-radius: 8px; margin: 0; display: inline-flex; align-items: center; }
.mdh-hp-spark svg { width: 100%; height: auto; display: block; }
.mdh-hp-spark-meta { display: flex; justify-content: space-between; font: 600 10.5px var(--hp-sans); letter-spacing: .1em; color: var(--hp-muted); margin-top: 10px; }
.mdh-hp-spark-val { color: var(--hp-deep); }
.mdh-hp-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mdh-hp-mini-stats div { background: var(--hp-tint); border-radius: 12px; padding: 14px; }
.mdh-hp-mini-stats b { display: block; font: 600 24px var(--hp-sans); letter-spacing: -.02em; color: var(--hp-deep); font-variant-numeric: tabular-nums; }
.mdh-hp-mini-stats div > span { font: 500 10.5px/1.45 var(--hp-sans); color: var(--hp-muted); display: block; margin-top: 4px; }

/* ================= STORIES ================= */
.mdh-hp-stories { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-bg); }
/* 3-up carousel (5 cards); continuous drift, drag-to-scroll, arrow buttons.
   No snap and no hover lift — cards are passive, just scrollable. */
.mdh-hp-story-wrap { position: relative; }
.mdh-hp-story-grid { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mdh-hp-story-grid.is-dragging { cursor: grabbing; }
.mdh-hp-story-grid::-webkit-scrollbar { display: none; }
/* Root-class prefix beats the theme kit's `button` rules (see lessons.md). */
.mdh-hp .mdh-hp-story-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--hp-line); background: var(--hp-panel); color: var(--hp-navy); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(1, 54, 86, .16); transition: background .25s, color .25s, border-color .25s; }
.mdh-hp .mdh-hp-story-nav svg { width: 15px; height: 15px; }
.mdh-hp .mdh-hp-story-nav:hover { background: var(--hp-navy); color: #fff; border-color: var(--hp-navy); }
.mdh-hp .mdh-hp-story-nav:focus { outline: none; }
.mdh-hp .mdh-hp-story-nav:focus-visible { outline: 2px solid var(--hp-deep); outline-offset: 2px; }
.mdh-hp .mdh-hp-story-nav--prev { left: -8px; }
.mdh-hp .mdh-hp-story-nav--prev svg { transform: rotate(180deg); }
.mdh-hp .mdh-hp-story-nav--next { right: -8px; }
@media (max-width: 900px) { .mdh-hp .mdh-hp-story-nav { display: none; } }
.mdh-hp-story { flex: 0 0 calc((100% - 32px) / 3); }
/* Mobile: cards bleed to the screen edge and the next card peeks in so the
   horizontal scroll is discoverable without arrows. */
@media (max-width: 900px) {
	.mdh-hp-story-grid { margin-inline: -22px; padding-inline: 22px; }
	.mdh-hp-story { flex: 0 0 78%; }
}
.mdh-hp-story { border: 1px solid var(--hp-line); background: var(--hp-panel); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.mdh-hp-story__thumb { aspect-ratio: 16/10; position: relative; background: linear-gradient(150deg, #0A4E77, #04202F); }
.mdh-hp-story__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* Placeholder tile while real card photos are sourced. */
.mdh-hp-story__thumb--ph { display: flex; align-items: center; justify-content: center; background: radial-gradient(90% 120% at 50% 0%, rgba(131, 200, 243, .25), transparent 60%), linear-gradient(150deg, #0A4E77, #04202F); }
.mdh-hp-story__ph-ic { width: 64px; height: 64px; border-radius: 18px; border: 1px solid rgba(131, 200, 243, .4); background: rgba(131, 200, 243, .12); display: flex; align-items: center; justify-content: center; color: var(--hp-accent); }
.mdh-hp-story__ph-ic svg { width: 26px; height: 26px; }
.mdh-hp-story__badge { position: absolute; left: 13px; bottom: 13px; font: 600 10.5px var(--hp-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hp-navy); background: rgba(255, 255, 255, .93); padding: 7px 11px; border-radius: 999px; }
.mdh-hp-story__body { padding: 22px; display: grid; gap: 12px; }
.mdh-hp-story blockquote { font-size: 15.5px; line-height: 1.55; font-style: normal; color: var(--hp-ink); border: 0; padding: 0; margin: 0; }
.mdh-hp-story__who { display: flex; align-items: center; gap: 11px; }
.mdh-hp-story__who b { font-size: 13.5px; color: var(--hp-navy); display: block; }
.mdh-hp-story__who span { font: 500 11.5px var(--hp-sans); color: var(--hp-muted); }

/* ================= REVIEWS ================= */
.mdh-hp-reviews { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 64px); background: var(--hp-panel); overflow: hidden; }
.mdh-hp-reviews .mdh-hp-marq { padding-bottom: 16px; }
/* Draggable review rows (stories-style): native swipe on touch, mouse drag
   on desktop, slow drift when idle. */
.mdh-hp-rev-track { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 22px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mdh-hp-rev-track::-webkit-scrollbar { display: none; }
.mdh-hp-rev-track.is-overflowing { cursor: grab; user-select: none; -webkit-user-select: none; }
.mdh-hp-rev-track.is-overflowing.is-dragging { cursor: grabbing; }
.mdh-hp-rev { flex: none; width: min(360px, 84vw); border: 1px solid var(--hp-line); background: var(--hp-bg); border-radius: 16px; padding: 20px; }
.mdh-hp-rev__stars { color: var(--hp-gold); letter-spacing: 3px; font-size: 12.5px; margin-bottom: 9px; }
.mdh-hp-rev p { font-size: 13.5px; color: var(--hp-ink); }
.mdh-hp-rev__who { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; gap: 10px; }
.mdh-hp-rev__who b { font-size: 12.5px; color: var(--hp-navy); }
.mdh-hp-rev__who span { font: 600 10.5px var(--hp-sans); letter-spacing: .06em; color: var(--hp-deep); border: 1px solid var(--hp-tint-2); background: var(--hp-tint); padding: 4px 9px; border-radius: 7px; white-space: nowrap; }

/* ================= QUESTIONS ================= */
.mdh-hp-questions { padding: clamp(70px, 10vw, 130px) 0; background: radial-gradient(70% 110% at 50% 0%, rgba(131, 200, 243, .28), transparent 60%), var(--hp-bg); }
.mdh-hp-questions__inner { text-align: center; display: grid; gap: 18px; justify-items: center; }

/* ================= MAP ================= */
.mdh-hp-map { background: var(--hp-navy-3); padding: clamp(70px, 10vw, 130px) 0 0; overflow: hidden; }
.mdh-hp-map .mdh-hp-center-row { padding-bottom: clamp(64px, 9vw, 100px); margin-top: 16px; }
.mdh-hp-map__stage { position: relative; margin-top: clamp(16px, 3vw, 36px); height: clamp(380px, 55vw, 640px); touch-action: pan-y; overflow: hidden; }
.mdh-hp-map__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mdh-hp-map__pins { position: absolute; inset: 0; }
/* Resting state: a clean white dot. On hover the dot gives way to the
   spiral logo, which grows in and spins slowly anticlockwise. */
.mdh-hp-map__pin { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); display: block; z-index: 2; }
.mdh-hp-map__pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(131, 200, 243, .8); animation: mdh-hp-pin-pulse 3.2s ease-in-out infinite; animation-delay: var(--hp-pin-delay, 0s); transition: opacity .25s; }
.mdh-hp-map__pin img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transform: scale(.3); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.mdh-hp-map__pin:hover { z-index: 3; }
.mdh-hp-map__pin:hover::before { opacity: 0; }
.mdh-hp-map__pin:hover img { opacity: 1; transform: scale(1.25); animation: mdh-hp-pin-spin 7s linear infinite; }
.mdh-hp-map__pin.is-soon::before { opacity: .5; box-shadow: none; }
.mdh-hp-map__pin.is-soon:hover::before { opacity: 0; }
@keyframes mdh-hp-pin-pulse { 50% { box-shadow: 0 0 14px rgba(131, 200, 243, 1); } }
@keyframes mdh-hp-pin-spin { to { rotate: -360deg; } }
@media (prefers-reduced-motion: reduce) {
	.mdh-hp-map__pin::before { animation: none; }
	.mdh-hp-map__pin:hover img { animation: none; }
}
@media (max-width: 640px) { .mdh-hp-map__pin { width: 26px; height: 26px; } .mdh-hp-map__pin::before { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; } }
/* Touch: iOS keeps :hover sticky after a tap, which let the spiral show
   without its name. The armed class (set by JS together with the tooltip)
   is the only thing that reveals the spiral, so logo and name always
   appear as a pair. */
@media (hover: none) {
	.mdh-hp-map__pin:hover::before { opacity: 1; }
	.mdh-hp-map__pin:hover img { opacity: 0; transform: scale(.3); animation: none; }
	.mdh-hp-map__pin.is-soon:hover::before { opacity: .5; }
	.mdh-hp-map__pin.is-armed::before { opacity: 0 !important; }
	.mdh-hp-map__pin.is-armed img { opacity: 1; transform: scale(1.25); animation: mdh-hp-pin-spin 7s linear infinite; }
	.mdh-hp-map__pin.is-armed { z-index: 3; }
}

/* Counted cluster dot — click zooms the map into the region. */
.mdh-hp .mdh-hp-map__cluster-dot { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #04263C; font: 700 11.5px var(--hp-sans); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 10px rgba(131, 200, 243, .85); animation: mdh-hp-pin-pulse 3.2s ease-in-out infinite; transition: transform .25s; }
.mdh-hp .mdh-hp-map__cluster-dot:hover { transform: translate(-50%, -50%) scale(1.25); }
.mdh-hp .mdh-hp-map__cluster-dot:focus { outline: none; }
.mdh-hp .mdh-hp-map__cluster-dot:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; }
.mdh-hp .mdh-hp-map__back { position: absolute; top: 14px; right: 14px; z-index: 6; font: 600 11.5px var(--hp-sans); letter-spacing: .1em; color: var(--hp-navy); background: var(--hp-accent); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.mdh-hp .mdh-hp-map__back.is-show { opacity: 1; pointer-events: auto; transform: none; }

.mdh-hp-map__tip { position: absolute; z-index: 10; pointer-events: none; background: var(--hp-accent); color: #04263C; font: 600 12px var(--hp-sans); padding: 8px 12px; border-radius: 8px; transform: translate(-50%, -135%); opacity: 0; transition: opacity .2s; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.mdh-hp-map__tip.is-link { pointer-events: auto; cursor: pointer; }

/* ================= NEWS ================= */
.mdh-hp-news { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-bg); }
.mdh-hp-news__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.mdh-hp-feed-badge { font: 600 11px var(--hp-sans); letter-spacing: .1em; color: #12915B; border: 1px solid rgba(18, 145, 91, .3); background: rgba(18, 145, 91, .06); padding: 9px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.mdh-hp-feed-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12915B; animation: mdh-hp-pulse 2s infinite; }
.mdh-hp-feed { border-top: 1px solid var(--hp-line); }
.mdh-hp-feed__item { display: grid; grid-template-columns: 128px 1fr auto; gap: clamp(16px, 3vw, 36px); align-items: center; padding: clamp(18px, 2.6vw, 26px) 8px; border-bottom: 1px solid var(--hp-line); text-decoration: none; transition: background .3s, padding-left .3s; }
.mdh-hp-feed__item:hover { background: var(--hp-tint); padding-left: 18px; }
@media (max-width: 700px) { .mdh-hp-feed__item { grid-template-columns: 1fr; gap: 8px; } .mdh-hp-feed__arrow { display: none; } }
.mdh-hp-feed__src { display: grid; gap: 6px; justify-items: start; }
.mdh-hp-feed__src img { max-height: 26px; max-width: 110px; object-fit: contain; }
.mdh-hp-feed__src small { font: 600 10px var(--hp-sans); color: var(--hp-muted); letter-spacing: .08em; }
.mdh-hp-feed__item h3 { font-size: clamp(16px, 2vw, 19.5px); line-height: 1.35; letter-spacing: -.01em; max-width: 56ch; }
.mdh-hp-feed__meta { display: flex; gap: 9px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.mdh-hp-feed__tag { font: 600 10px var(--hp-sans); letter-spacing: .12em; color: var(--hp-deep); border: 1px solid var(--hp-tint-2); background: var(--hp-tint); padding: 5px 10px; border-radius: 999px; }
.mdh-hp-feed__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--hp-line); display: flex; align-items: center; justify-content: center; color: var(--hp-navy); transition: background .3s, color .3s, transform .3s; }
.mdh-hp-feed__arrow svg { width: 15px; height: 15px; }
.mdh-hp-feed__item:hover .mdh-hp-feed__arrow { background: var(--hp-navy); color: #fff; transform: rotate(-45deg); }

/* ================= FAQ ================= */
/* Location-page style: centered head, airy two-column question rows,
   bare plus toggles — no card boxes. */
.mdh-hp-faq { padding: clamp(64px, 9vw, 120px) 0; background: var(--hp-panel); }
/* List formatting mirrors the location-page FAQ (mdh-loc-faq-list). */
.mdh-hp-faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 900px) { .mdh-hp-faq__cols { grid-template-columns: 1fr; } }
.mdh-hp-qa { border: 0; background: transparent; }
.mdh-hp-qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; font: 500 18px/1.4 "Open Sans", Arial, sans-serif; color: var(--hp-navy); }
/* Themes add a dotted :focus outline to buttons after click — suppress it,
   keep the visible ring for keyboard focus only. */
.mdh-hp-qa button:focus { outline: none; }
.mdh-hp-qa button:focus-visible { outline: 2px solid var(--hp-deep); outline-offset: -2px; }
.mdh-hp-qa__plus { flex: none; width: 16px; height: 16px; position: relative; transition: transform 220ms ease; }
.mdh-hp-qa__plus::before, .mdh-hp-qa__plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--hp-navy); border-radius: 1px; }
.mdh-hp-qa__plus::before { width: 14px; height: 1.5px; }
.mdh-hp-qa__plus::after { width: 1.5px; height: 14px; }
.mdh-hp-qa.is-open .mdh-hp-qa__plus { transform: rotate(45deg); }
.mdh-hp-qa__ans { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2, .7, .2, 1); }
.mdh-hp-qa__ans p { padding: 0 20px 20px; font-size: 15px; color: var(--hp-muted); max-width: 60ch; }

/* ================= CORNER RADIUS ================= */
/* Slight uniform radius on card-level components (matches the conditions
   grid snippet). Pills stay pills — buttons, chips, badges, tags. */
.mdh-hp-photo, .mdh-hp-pillar, .mdh-hp-stack__card, .mdh-hp-vid,
.mdh-hp-lightbox__frame, .mdh-hp-card, .mdh-hp-mini-stats div,
.mdh-hp-story, .mdh-hp-story__ph-ic, .mdh-hp-rev,
.mdh-hp-cond { border-radius: 16px; }
.mdh-hp-pillar__ic, .mdh-hp-cond__ic { border-radius: 10px; }