/* =========================================================================
   VEIL HEROES — the three treatments (System §5). No fourth without
   amending the Design System doc.
   A: Statement (Home only)  B: Ledger/Feature (hubs, about)  C: Dossier (service detail + form)
   Exact per-page compositions (ghost glyphs, split portrait, situation bar)
   live in pages/*.css — these are the shared shells.
   ========================================================================= */

/* Shared dark hero shell — soft-glow standard */
.veil-hero {
	position: relative;
	overflow: hidden;
	background: var(--veil-dark-surface);
	color: #fff;
}
.veil-hero .veil-eyebrow { color: var(--veil-mist); }
.veil-hero h1 { color: #fff; }
.veil-hero h1 em { color: var(--veil-mist); }
.veil-hero .sub { font-size: 17px; color: var(--veil-dark-body); line-height: 1.6; max-width: 560px; margin-top: 18px; }

/* A — STATEMENT (Home only): full-height, oversized H1, stat rail right */
.veil-hero--statement { min-height: 86vh; display: flex; align-items: center; }
.veil-hero--statement h1 { font-size: clamp(44px, 5.6vw, 70px); line-height: 1.02; max-width: 780px; }
/* Two-column grid per reference .vh-in (home.html): 1fr 250px / 60px gap */
.veil-hero--statement .veil-wrap { position: relative; display: grid; grid-template-columns: 1fr 250px; gap: 60px; width: 100%; }
.veil-hero--statement .statrail { display: grid; gap: 26px; border-left: 1px solid rgba(127, 201, 162, .25); padding-left: 28px; }
/* Numerals per reference .vh-n / .vh-n span (home.html): 40px #fff, green suffix span */
.veil-hero--statement .statrail .n { font-family: var(--veil-font-display); font-weight: 700; font-size: 40px; color: #fff; line-height: 1; }
.veil-hero--statement .statrail .n span { color: var(--veil-accent); }
.veil-hero--statement .statrail .l { font-size: 12.5px; color: #aecdbb; margin-top: 6px; font-weight: 600; }
/* Secondary CTA per reference .vh-b2 (home.html): underlined text link, not a pill */
.veil-scope.veil-hero--statement a.vh-b2,
.veil-scope.veil-hero--statement a.vh-b2:visited {
	display: inline-block;
	color: #dff0e7;
	font-family: var(--veil-font-body);
	font-weight: 700;
	border-bottom: 2px solid var(--veil-accent);
	padding-bottom: 4px;
	text-decoration: none;
}
/* Mobile stack per reference @media(max-width:900px) (home.html):
   single column; rail becomes a border-top horizontal 3-stat row */
@media (max-width: 900px) {
	.veil-hero--statement .veil-wrap { grid-template-columns: 1fr; }
	.veil-hero--statement .statrail { border-left: none; border-top: 1px solid rgba(127, 201, 162, .25); padding: 26px 0 0; display: flex; gap: 30px; }
}

/* B — LEDGER / FEATURE (hubs, industries, about): compact band, fast drop into content.
   Variants (light Services hero, Story dark opening, Bio split) compose in pages/. */
.veil-hero--ledger { padding: 64px 0 150px; }
.veil-hero--ledger h1 { font-size: clamp(40px, 4.6vw, 54px); max-width: 780px; line-height: 1.08; }
/* Pull quote per Design System v1.2 (owner Option B, overrides our-story.html export):
   Source Serif 4 UPRIGHT 400, 21px, lh 1.65; #c9e2d4, 640px max, no left rule */
.veil-hero--ledger .q {
	font-family: var(--veil-font-display);
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	color: #c9e2d4;
	line-height: 1.65;
	max-width: 640px;
	margin: 26px 0 0;
}
.veil-hero--ledger .q b { color: var(--veil-mist); font-weight: 700; }

/* Light hero variant (Services "Situation Room" opening) — cream, not dark */
.veil-hero--light {
	position: relative;
	overflow: hidden;
	background: var(--veil-cream);
	color: var(--veil-ink);
	padding: 76px 0 46px;
}
.veil-hero--light .veil-eyebrow { color: var(--veil-eyebrow-light); }
.veil-hero--light .sub { color: var(--veil-muted); }

/* C — DOSSIER (service detail): headline + chips left, form right */
.veil-hero--dossier .grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; }
/* Form panel per reference compliance.html hero wp:group around the
   gravityform shortcode: #0a1d15 surface, 1px #1d4b38 border, 16px radius,
   26px padding; light text inherited from the dark banner (#e9f3ee) */
.veil-hero--dossier .form-card {
	background: #0a1d15;
	border: 1px solid #1d4b38;
	border-radius: 16px;
	padding: 26px;
	color: #e9f3ee;
}
@media (max-width: 1000px) { .veil-hero--dossier .grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
 * Service-hero topic tags (UXFIX-PILLS, owner-approved 2026-08-13, variant A1).
 *
 * These four items name what a service page covers. They shipped as
 * `wp:button` blocks: filled, bordered, pill-radius — every visual cue of a
 * control — with no `href`. The owner reported them as "appear clickable but
 * are not", and the defect was on ALL SIX service heroes, not just the page
 * it was spotted on.
 *
 * An <a> with no href is also unreachable by keyboard and announced
 * inconsistently by screen readers, so the old markup failed WCAG 2.2 SC 2.4.7
 * in spirit while looking interactive. The fix is honest markup: a list of
 * words, styled as metadata rather than as buttons.
 *
 * Dividers are ::before pseudo-elements on purpose — a literal "|" character
 * would be read aloud between every item.
 * ---------------------------------------------------------------------- */
/* Deliberately NOT display:flex. The service heroes are not all aligned the
 * same way — crypto-recovery centres its column, others do not — and the
 * buttons this replaces inherited that alignment from the block layout. A flex
 * container ignores text-align and would pin the row left on every page, which
 * is exactly the regression the first cut of this CSS shipped. inline-block
 * items inherit the parent's text-align, so each hero keeps its own. */
.veil-hero-tags {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	line-height: 1.9;
}

.veil-hero-tags li {
	display: inline-block;
	vertical-align: middle;
	font-family: var(--veil-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8fc4a7;
}

.veil-hero-tags li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	background: #2f5d47;
	margin: 0 14px;
}

@media (max-width: 600px) {
	.veil-hero-tags li + li::before { margin: 0 10px; }
}