/*
 * am-hero — the top of the Home spine: positioning + the promise, one clear action.
 *
 * Structure (assign these in Elementor's CSS Classes fields):
 *   am-hero                    outer band
 *     am-hero__inner           centred container
 *       am-hero__eyebrow       small label (e.g. the ethos line under the AM name)
 *       am-hero__title         the positioning heading (h1)
 *       am-hero__promise       the promise sentence, larger than body
 *       am-hero__actions       am-cta-group with the primary (+ secondary) action
 *       am-hero__support       optional reassurance line under the buttons
 *
 * Layout is a single readable column, mobile-first. Elementor owns any richer
 * two-column arrangement; this keeps the type and spacing coherent.
 */

/* No own background — transparent by default (= page bg). Add an am-bg-* /
   am-section--* class on the hero to colour the band (e.g. am-bg-inverse for a dark
   hero; the eyebrow/links/buttons adapt via the token remap). */
.am-hero {
	padding-block: var(--am-space-800);
}

@media (min-width: 768px) {
	.am-hero {
		padding-block: var(--am-space-900);
	}
}

.am-hero__inner {
	max-width: var(--am-container-max);
	margin-inline: auto;
	padding-inline: var(--am-container-pad);
}

.am-hero__content {
	max-width: var(--am-content-wide);
}

.am-hero__eyebrow {
	display: block;
	margin-block-end: var(--am-space-400);
	color: var(--am-color-accent);
	font-size: var(--am-font-size-300);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

.am-hero__title {
	font-family: var(--am-font-heading); /* display voice — Archivo Black, native weight */
	font-weight: var(--am-weight-regular);
	font-size: var(--am-font-size-900);
	line-height: var(--am-leading-tight);
	letter-spacing: var(--am-tracking-tight);
}

/* The promise line — reads as lead copy, one notch below the title. */
.am-hero__promise {
	margin-block-start: var(--am-space-500);
	max-width: var(--am-measure);
	color: var(--am-color-text);
	font-size: var(--am-font-size-500);
	font-weight: var(--am-weight-regular);
	line-height: var(--am-leading-snug);
}

.am-hero__actions {
	margin-block-start: var(--am-space-700);
}

.am-hero__support {
	margin-block-start: var(--am-space-400);
	color: var(--am-color-text-muted);
	font-size: var(--am-font-size-200);
}