/* ============================================================
   Hashtag Media Group — host theme
   ------------------------------------------------------------
   Scope: design tokens, reset, base typography, chrome (header,
   glass nav, footer), buttons, forms, prose, blog cards, and the
   progressive-enhancement hooks that section markup opts into.

   NOT in scope: per-section layout. That ships in the "hashtag"
   HMG package (sections/<id>/style.css, auto-scoped at import),
   so a section can never break another one.

   Load order on the front end is fonts.css -> theme.css ->
   package tokens.css -> package styles.css. Package rules
   therefore win on equal specificity, which is what we want:
   a section should be able to restyle itself without fighting
   the theme. Base element defaults below are wrapped in :where()
   so they carry ZERO specificity and never out-rank a section.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
	/* Surfaces */
	--hm-bg: #0B0C10;
	--hm-bg-2: #14151B;
	--hm-menu-hover: #21232C;
	--hm-sage: #052926;
	--hm-teal-surface: #0a514b;
	--hm-teal-mid: #073b39;
	--hm-ocean: #0b2a3a;
	--hm-ink: #1A1717;

	/* Ink */
	--hm-white: #FFFFFF;
	--hm-cyan: #66FCF1;
	--hm-cyan-deep: #4EBFB7;
	--hm-yellow: #FFD638;
	--hm-text: rgba(255, 255, 255, 0.86);
	--hm-text-dim: rgba(255, 255, 255, 0.62);
	--hm-text-faint: rgba(255, 255, 255, 0.40);
	--hm-border: rgba(255, 255, 255, 0.18);
	--hm-border-soft: rgba(255, 255, 255, 0.10);

	/* Glass */
	--hm-glass-fill: rgba(255, 255, 255, 0.065);
	--hm-glass-fill-strong: rgba(255, 255, 255, 0.10);
	--hm-glass-border: rgba(255, 255, 255, 0.14);
	--hm-glass-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);

	/* Type */
	--hm-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hm-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Fluid type scale — the desktop/tablet/mobile steps measured off the
	   source Elementor kit (h1 80/65/42, h2 56/48/32, h3 24/24/20) expressed
	   as clamps so nothing snaps at a breakpoint edge. */
	--hm-t-h1: clamp(2.625rem, 1.55rem + 4.8vw, 5rem);
	--hm-t-h2: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
	--hm-t-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
	--hm-t-h3-big: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	--hm-t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--hm-t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--hm-t-body: 1rem;
	--hm-t-small: 0.875rem;
	--hm-t-eyebrow: 0.75rem;

	/* Space */
	--hm-s-xs: 0.5rem;
	--hm-s-sm: 1rem;
	--hm-s-md: 1.75rem;
	--hm-s-lg: 3rem;
	--hm-s-xl: 5rem;
	--hm-s-2xl: 7.5rem;
	--hm-sec-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* Shape */
	--hm-r-sm: 8px;
	--hm-r-md: 14px;
	--hm-r-lg: 22px;
	--hm-r-xl: 32px;
	--hm-r-pill: 999px;

	/* Layout */
	--hm-wrap: 1180px;
	--hm-wrap-narrow: 780px;
	--hm-wrap-wide: 1440px;
	--hm-gutter: clamp(1.125rem, 0.7rem + 1.8vw, 2rem);
	--hm-head-h: 96px;

	/* Motion */
	--hm-ease: cubic-bezier(.22, .61, .36, 1);
	--hm-dur: 0.45s;

	/* Bridge the theme palette into the builder's brand slots so a section
	   using var(--hmg-brand-*) lands on brand colour, not a plugin default. */
	--hmg-brand-primary: var(--hm-cyan);
	--hmg-brand-heading: var(--hm-white);
	--hmg-brand-text: var(--hm-text-dim);
	--hmg-brand-bg: var(--hm-bg);
	--hmg-brand-accent: var(--hm-cyan);
}

@media (max-width: 900px) {
	:root { --hm-head-h: 76px; }
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:where(html) {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hm-head-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	:where(html) { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

:where(body) {
	margin: 0;
	background: var(--hm-bg);
	color: var(--hm-text-dim);
	font-family: var(--hm-font-body);
	font-size: var(--hm-t-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip, not hidden: overflow-x:hidden creates a scroll container and
	   silently kills every position:sticky ancestor below it. */
	overflow-x: clip;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	font-family: var(--hm-font-display);
	color: var(--hm-white);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-wrap: balance;
}

:where(h1) { font-size: var(--hm-t-h1); font-weight: 700; line-height: 1.08; }
:where(h2) { font-size: var(--hm-t-h2); font-weight: 700; line-height: 1.14; }
:where(h3) { font-size: var(--hm-t-h3); font-weight: 600; line-height: 1.3; }
:where(h4) { font-size: var(--hm-t-h4); font-weight: 600; }
:where(h5) { font-size: var(--hm-t-small); font-weight: 600; color: var(--hm-cyan); }
:where(h6) { font-size: var(--hm-t-small); font-weight: 600; }

:where(p) { margin: 0 0 1.15em; text-wrap: pretty; }
:where(p:last-child) { margin-bottom: 0; }

:where(a) { color: var(--hm-cyan); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:where(a:hover) { color: var(--hm-white); }

:where(img, video, svg, canvas) { max-width: 100%; height: auto; display: block; }
:where(ul, ol) { margin: 0 0 1.15em; padding-left: 1.25em; }
:where(li) { margin-bottom: 0.4em; }
:where(strong, b) { color: var(--hm-white); font-weight: 600; }
:where(blockquote) {
	margin: 0 0 1.5em;
	padding-left: 1.25em;
	border-left: 2px solid var(--hm-cyan);
	color: var(--hm-text);
	font-style: normal;
}
:where(hr) { border: 0; border-top: 1px solid var(--hm-border-soft); margin: var(--hm-s-lg) 0; }
:where(table) { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
:where(th, td) { padding: 0.6em 0.8em; border-bottom: 1px solid var(--hm-border-soft); text-align: left; }
:where(th) { color: var(--hm-white); font-family: var(--hm-font-display); font-weight: 600; }
:where(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
:where(figure) { margin: 0 0 1.5em; }
:where(figcaption) { font-size: var(--hm-t-small); color: var(--hm-text-faint); margin-top: 0.6em; }

:focus-visible {
	outline: 2px solid var(--hm-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

::selection { background: var(--hm-cyan); color: var(--hm-bg); }

/* ── Layout helpers ──────────────────────────────────────── */
.hm-wrap {
	width: min(100% - (var(--hm-gutter) * 2), var(--hm-wrap));
	margin-inline: auto;
}
.hm-wrap--narrow { max-width: var(--hm-wrap-narrow); }
.hm-wrap--wide   { width: min(100% - (var(--hm-gutter) * 2), var(--hm-wrap-wide)); }

.hm-main { display: block; min-height: 40vh; }

.hm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--hm-cyan);
	color: var(--hm-bg);
	font-family: var(--hm-font-display);
	font-weight: 600;
	border-radius: 0 0 var(--hm-r-sm) 0;
}
.hm-skip:focus { left: 0; }

.hm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hm-eyebrow {
	display: inline-block;
	font-family: var(--hm-font-display);
	font-size: var(--hm-t-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hm-cyan);
	margin-bottom: 0.9rem;
}

.hm-lead {
	font-size: var(--hm-t-lead);
	line-height: 1.6;
	color: var(--hm-text-dim);
	max-width: 62ch;
}

/* ── Buttons ─────────────────────────────────────────────── */
.hm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.95em 1.9em;
	border-radius: var(--hm-r-pill);
	border: 1px solid transparent;
	font-family: var(--hm-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hm-dur) var(--hm-ease),
	            color var(--hm-dur) var(--hm-ease),
	            border-color var(--hm-dur) var(--hm-ease),
	            transform 0.2s var(--hm-ease);
	background: var(--hm-cyan);
	color: var(--hm-bg);
	/* min touch target — a 44px tap area is the floor on a phone */
	min-height: 44px;
}
.hm-btn:hover, .hm-btn:focus-visible {
	background: var(--hm-white);
	color: var(--hm-bg);
	transform: translateY(-1px);
}
.hm-btn--ghost {
	background: transparent;
	color: var(--hm-white);
	border-color: var(--hm-cyan);
}
.hm-btn--ghost:hover, .hm-btn--ghost:focus-visible {
	background: var(--hm-cyan);
	color: var(--hm-bg);
	border-color: var(--hm-cyan);
}
.hm-btn--quiet {
	background: transparent;
	color: var(--hm-white);
	border-color: var(--hm-border);
}
.hm-btn--quiet:hover, .hm-btn--quiet:focus-visible {
	border-color: var(--hm-cyan);
	color: var(--hm-cyan);
	background: transparent;
}

/* ── Glass surface ───────────────────────────────────────── */
.hm-glass {
	background: var(--hm-glass-fill);
	border: 1px solid var(--hm-glass-border);
	border-radius: var(--hm-r-lg);
	box-shadow: var(--hm-glass-shadow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ── Header ──────────────────────────────────────────────────
 * The header OVERLAYS the page; it does not sit above it.
 *
 * Every section on this site opens with its own full-height, full-bleed hero —
 * the underwater descent, the showreel, the black testimonial wall — and the
 * source runs the nav over the top of that artwork, starting the content at
 * document y=0. `position: relative` put the header back in normal flow, so its
 * padding-block pushed EVERY page down by its own height (131px at 1440), the
 * artwork started below the fold, and the descent's sticky stage could not
 * reach the top of the viewport until you had already scrolled past the offset.
 * Measured against the source: content top src=0 / stg=131 on all five pages
 * checked, and the header element itself contributes 0 height there.
 *
 * Absolute, not fixed: the source header scrolls away with the page rather than
 * pinning. The sections carry their own top padding to clear it (ported with
 * them), so nothing needs a compensating offset here.
 */
.hm-head {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	/* 14px top and bottom puts the bar at 99px against the logo's 71px, which is
	   what the source measures. It was 30px (131px total) — a 32px difference
	   that pushed every hero down and forced thank-you's heading to 150 where
	   the source has it at 122. */
	padding-block: clamp(0.5rem, 0.35rem + 0.6vw, 0.875rem);
}
.hm-head .hm-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hm-s-md);
}
.hm-head__logo { display: inline-flex; flex: 0 0 auto; }
.hm-head__logo img {
	width: clamp(120px, 8vw + 90px, 220px);
	height: auto;
}

/* ── Footer ──────────────────────────────────────────────── */
.hm-foot {
	background: var(--hm-bg);
	border-top: 1px solid var(--hm-border-soft);
	padding-block: clamp(3.5rem, 2rem + 5vw, 5.625rem);
	margin-top: var(--hm-s-xl);
}
.hm-foot__cols {
	display: grid;
	grid-template-columns: 2fr 1.4fr 1.1fr 0.9fr;
	gap: var(--hm-s-lg) var(--hm-s-md);
	align-items: start;
}
.hm-foot__h {
	font-family: var(--hm-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hm-white);
	margin: 0 0 1.25rem;
}
.hm-foot__brand img { width: min(240px, 70%); height: auto; margin-bottom: 1.25rem; }
.hm-foot__tag { color: var(--hm-text-dim); max-width: 34ch; }
.hm-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.hm-foot__list a { color: var(--hm-white); text-decoration: none; }
.hm-foot__list a:hover, .hm-foot__list a:focus-visible { color: var(--hm-cyan); }
.hm-foot__row { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--hm-white); }
.hm-foot__row svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--hm-cyan); margin-top: 0.15em; }
.hm-foot__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hm-s-sm);
	margin-top: var(--hm-s-lg);
	padding-top: var(--hm-s-md);
	border-top: 1px solid var(--hm-border);
	font-size: 0.75rem;
	color: var(--hm-text-dim);
}
.hm-foot__bar a { color: var(--hm-text-dim); text-decoration: none; }
.hm-foot__bar a:hover, .hm-foot__bar a:focus-visible { color: var(--hm-cyan); }
.hm-foot__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.hm-foot__social { display: flex; gap: 0.6rem; }
/* Bare icons, as the source has them — the ringed variant was first-pass theme
   styling that predates the source-faithful rework. The 40x40 box stays: it is
   the source's own hit area, and shrinking to the glyph would make the tap
   target worse than the original for no visual gain. */
.hm-foot__social a {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	color: var(--hm-white);
	transition: color var(--hm-dur) var(--hm-ease);
}
.hm-foot__social a:hover, .hm-foot__social a:focus-visible {
	color: var(--hm-cyan);
}
.hm-foot__social svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
	.hm-foot__cols { grid-template-columns: 1fr 1fr; }
	.hm-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.hm-foot__cols { grid-template-columns: 1fr; }
	.hm-foot__bar { flex-direction: column; align-items: flex-start; }
}

/* ── Forms ───────────────────────────────────────────────── */
.hm-form { display: grid; gap: var(--hm-s-sm); }
.hm-form__grid { display: grid; gap: var(--hm-s-sm); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .hm-form__grid { grid-template-columns: 1fr; } }

.hm-field { display: grid; gap: 0.4rem; }
.hm-field label {
	font-family: var(--hm-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hm-text-dim);
}
.hm-field input,
.hm-field select,
.hm-field textarea {
	width: 100%;
	/* 16px minimum: anything smaller makes iOS Safari zoom the viewport on focus */
	font-size: 1rem;
	font-family: inherit;
	color: var(--hm-white);
	background: var(--hm-glass-fill);
	border: 1px solid var(--hm-border);
	border-radius: var(--hm-r-md);
	padding: 0.85rem 1rem;
	min-height: 48px;
	transition: border-color var(--hm-dur) var(--hm-ease), background var(--hm-dur) var(--hm-ease);
	appearance: none;
}
.hm-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.hm-field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--hm-cyan) 50%),
	                  linear-gradient(135deg, var(--hm-cyan) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}
.hm-field select option { background: var(--hm-bg-2); color: var(--hm-white); }
.hm-field input:focus,
.hm-field select:focus,
.hm-field textarea:focus {
	border-color: var(--hm-cyan);
	background: var(--hm-glass-fill-strong);
}
.hm-field input::placeholder, .hm-field textarea::placeholder { color: var(--hm-text-faint); }

.hm-form__gotcha {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.hm-form__status { font-size: var(--hm-t-small); min-height: 1.5em; }
.hm-form__status[data-state="ok"]  { color: var(--hm-cyan); }
.hm-form__status[data-state="err"] { color: #ff8a80; }
.hm-form[aria-busy="true"] .hm-btn { opacity: 0.6; pointer-events: none; }

/* ── Prose (legal pages, blog bodies) ────────────────────── */
.hm-prose {
	max-width: 72ch;
	margin-inline: auto;
	padding-block: var(--hm-sec-y);
	color: var(--hm-text-dim);
}
.hm-prose > h2 { margin-top: 2em; }
.hm-prose > h3 { margin-top: 1.6em; }
.hm-prose a { color: var(--hm-cyan); }

/* An <h1> INSIDE the post body is not the page title — the theme already
 * renders that in .hm-post-hero__title. Every migrated post carries a second
 * h1 in its content (an SEO subtitle on the editorial posts, a "Project
 * Showcase" label on the case studies), and the source styles it as a small
 * cyan eyebrow: 14px/500, uppercase, 2px tracking. Ours inherited the 80px
 * display scale, so all 41 posts rendered a giant duplicate heading
 * mid-article. That is most of why they measured 2.2x the source's height —
 * 6883px against 3080px on one editorial post — and why they read as broken.
 *
 * Styled rather than rewritten: the duplicate h1 is in the CONTENT, and
 * editing 41 posts' markup to demote it would be an unasked-for content
 * change the client cannot undo from the editor. The source keeps it an h1
 * too. Line height on h2 matches the source's 1.3 (72.8/56), not the 1.14
 * the display scale was giving it. */
.hm-prose__body h1 {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--hm-cyan);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 2.4em 0 0.6em;
	max-width: none;
}
.hm-prose__body h1:first-child { margin-top: 0; }

/* Post-body rhythm lives in chrome.css, alongside the other .hm-prose__body
 * rules and AFTER this file in load order. It was here first and silently lost
 * to chrome.css's `.hm-prose__body h2 { margin-top: 2em }` — same specificity,
 * later sheet. Keep prose rules in one file. */

/* ── Blog cards ──────────────────────────────────────────── */
.hm-band { padding-block: var(--hm-sec-y) 0; }
.hm-band__intro { max-width: 62ch; }

.hm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--hm-s-md);
	padding-block: var(--hm-s-lg) var(--hm-s-xl);
	list-style: none;
	margin: 0;
	padding-inline: 0;
}
.hm-card {
	display: flex;
	flex-direction: column;
	background: var(--hm-glass-fill);
	border: 1px solid var(--hm-glass-border);
	border-radius: var(--hm-r-lg);
	overflow: hidden;
	transition: border-color var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease);
	margin: 0;
}
.hm-card:hover { border-color: var(--hm-cyan); transform: translateY(-3px); }
.hm-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hm-bg-2); }
.hm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hm-card__body { padding: var(--hm-s-md); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.hm-card__chip {
	align-self: flex-start;
	font-family: var(--hm-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hm-cyan);
}
.hm-card h2, .hm-card h3 { font-size: var(--hm-t-h3); margin: 0; }
.hm-card h2 a, .hm-card h3 a { color: var(--hm-white); text-decoration: none; }
.hm-card h2 a:hover, .hm-card h3 a:hover { color: var(--hm-cyan); }
.hm-card__excerpt { font-size: var(--hm-t-small); margin: 0; }
.hm-card__meta { margin-top: auto; font-size: 0.75rem; color: var(--hm-text-faint); }

/* Post navigation + pagination */
.hm-pagination { display: flex; justify-content: center; padding-bottom: var(--hm-s-xl); }
.hm-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; min-height: 44px;
	padding: 0 0.6rem; margin: 0 0.2rem;
	border: 1px solid var(--hm-border);
	border-radius: var(--hm-r-sm);
	color: var(--hm-white); text-decoration: none;
}
.hm-pagination .page-numbers.current,
.hm-pagination .page-numbers:hover { border-color: var(--hm-cyan); color: var(--hm-cyan); }

/* ── Progressive enhancement hooks ───────────────────────────
   Every rule below is an ENHANCEMENT applied only once JS has
   marked the document. Without JS the base state is the readable
   one, so the editor canvas (which runs no theme JS) and any
   crawler both see complete content. */

/* Scroll reveal. Base = visible. */
.js .hm-rv {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--hm-ease), transform 0.7s var(--hm-ease);
	will-change: opacity, transform;
}
.js .hm-rv.is-in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
	.js .hm-rv { opacity: 1; transform: none; }
}

/* Horizontal track. Base = a normal wrapping grid, fully readable.
   With JS on a wide viewport it becomes a pinned horizontal scroller. */
.hm-track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--hm-s-md);
}
.js .hm-track[data-hm-track].is-live {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hm-s-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}
.js .hm-track[data-hm-track].is-live::-webkit-scrollbar { display: none; }
.js .hm-track[data-hm-track].is-live > * {
	flex: 0 0 clamp(260px, 30vw, 420px);
	scroll-snap-align: start;
}

/* Accordion (FAQ). Base = all answers open and readable. */
.hm-acc__q {
	display: flex;
	width: 100%;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	background: none;
	border: 0;
	padding: 1.15rem 0;
	color: var(--hm-white);
	font-family: var(--hm-font-display);
	font-size: var(--hm-t-h3);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
}
.hm-acc__item { border-bottom: 1px solid var(--hm-border-soft); }
.hm-acc__a { padding-bottom: 1.25rem; }
.hm-acc__icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--hm-cyan); transition: transform var(--hm-dur) var(--hm-ease); }
.js .hm-acc__q[aria-expanded="false"] + .hm-acc__a { display: none; }
.js .hm-acc__q[aria-expanded="true"] .hm-acc__icon { transform: rotate(45deg); }
/* No JS: the toggle button is inert, so hide its affordance rather than lie. */
html:not(.js) .hm-acc__icon { display: none; }
html:not(.js) .hm-acc__q { cursor: default; }

/* Video facade */
.hm-video { position: relative; }
.hm-video__btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--hm-bg-2);
	border-radius: var(--hm-r-lg);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
}
.hm-video__btn img { width: 100%; height: 100%; object-fit: cover; }
.hm-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.hm-video__play::before {
	content: "";
	width: 76px; height: 76px;
	border-radius: 50%;
	background: var(--hm-cyan);
	box-shadow: 0 10px 40px rgba(102, 252, 241, 0.35);
}
.hm-video__play::after {
	content: "";
	position: absolute;
	width: 0; height: 0;
	border-left: 20px solid var(--hm-bg);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	margin-left: 6px;
}
.hm-video iframe, .hm-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-r-lg); display: block; }

/* ── Print ───────────────────────────────────────────────── */
@media print {
	.hm-head, .hm-foot, .hm-skip, [data-hm-track] { display: none !important; }
	:where(body) { background: #fff; color: #000; }
	:where(h1, h2, h3, h4, h5, h6) { color: #000; }
}