/* Maverick hero + quote card — Figma node 1:100 (1440 x 760). Spec: docs/design/homepage-figma-spec.md §2.
   Line-heights are whole pixels because Figma rounds them (58.32 -> 58, 25.5 -> 26, 26.4 -> 26). */

.mvk-hero {
	position: relative;
	box-sizing: border-box;
	height: 760px;
	margin: 0;
	overflow: hidden;
	background: var(--mvk-navy-deep);
}

.mvk-hero__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Unified vignette (Figma 1:104): four stacked gradients, top layer first. */
.mvk-hero__overlay {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(26, 45, 54, 0.28) 0%, rgba(26, 45, 54, 0.06) 10%, rgba(26, 45, 54, 0) 18%),
		linear-gradient(180deg, rgba(26, 45, 54, 0.32) 0%, rgba(26, 45, 54, 0.1) 12%, rgba(26, 45, 54, 0) 22%),
		linear-gradient(180deg, rgba(26, 45, 54, 0) 45%, rgba(26, 45, 54, 0.18) 60%, rgba(26, 45, 54, 0.55) 78%, rgba(26, 45, 54, 0.85) 100%),
		linear-gradient(90deg, rgba(26, 45, 54, 0) 50%, rgba(26, 45, 54, 0.12) 60%, rgba(26, 45, 54, 0.38) 68%, rgba(26, 45, 54, 0.58) 78%, rgba(26, 45, 54, 0.68) 100%);
}

/* Content is laid out on a 1440px stage, centered; the photo and vignette stay full-bleed. */
.mvk-hero__stage {
	position: relative;
	max-width: 1440px;
	height: 760px;
	margin: 0 auto;
	container-type: inline-size; /* cqw units below = % of the stage width (1440 at the design size) */
}

/* Band + card are anchored to the stage edges (bottom 48px / right 64px): identical to the drawn
   positions at 1440, and they keep their margins when the viewport is narrower. */
.mvk-hero__band {
	position: absolute;
	left: 0;
	bottom: 48px;
	width: min(900px, calc(100cqw - 480px));
}
.mvk-hero__message {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(840px, calc(100cqw - 544px));
	margin-left: 64px;
}
.mvk-hero .mvk-hero__title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: var(--mvk-font-display);
	font-weight: 700;
	font-size: min(54px, 3.75cqw);
	line-height: min(58px, 4.0278cqw);
	letter-spacing: 0;
	text-transform: none;
}
.mvk-hero .mvk-hero__sub {
	width: min(710px, 100%);
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.9);
	font: 400 17px/26px var(--mvk-font-body);
	letter-spacing: 0;
}

/* Quote card (Figma 1:110) --------------------------------------------------- */
.mvk-quote-card {
	position: absolute;
	right: 64px;
	top: 50px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 392px;
	padding: 26px 28px 22px;
	background: var(--mvk-cream);
	border: 1px solid var(--mvk-card-border);
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(61, 41, 20, 0.08), 0 14px 36px rgba(61, 41, 20, 0.16);
	color: var(--mvk-navy);
}

.mvk-quote-card__header { display: flex; flex-direction: column; gap: 10px; }

.mvk-brand { display: flex; align-items: center; gap: 16px; width: fit-content; height: 24px; }
.mvk-brand__logo { display: block; flex: none; width: 118px; height: 24px; max-width: none; object-fit: contain; }
.mvk-brand__divider { flex: none; width: 1px; height: 22px; background: rgba(36, 60, 71, 0.25); }
.mvk-brand__eyebrow {
	flex: none;
	width: 99px; /* Figma text width (rounded) */
	color: var(--mvk-rust);
	font: 700 10px/14px var(--mvk-font-body);
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}

.mvk-quote-card .mvk-quote-card__title {
	margin: 0;
	padding: 0;
	color: var(--mvk-navy);
	font: 700 22px/26px var(--mvk-font-display);
	letter-spacing: 0;
	text-transform: none;
}
.mvk-quote-card .mvk-quote-card__intro {
	margin: 0;
	padding: 0;
	color: rgba(36, 60, 71, 0.8);
	font: 400 14px/21px var(--mvk-font-body);
}

/* Form ---------------------------------------------------------------------- */
.mvk-quote-card .mvk-quote-form { margin: 0; padding: 0; }
.mvk-quote-form__fields { display: flex; flex-direction: column; gap: 10px; }
.mvk-field { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.mvk-quote-card .mvk-field__label {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--mvk-navy);
	font: 600 12px/16px var(--mvk-font-body);
	letter-spacing: 0;
	text-transform: none;
}

.mvk-quote-card .mvk-input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 14px;
	background-color: #fff;
	border: 1px solid var(--mvk-input-border);
	border-radius: 4px;
	box-shadow: none;
	color: var(--mvk-navy);
	font: 400 14px/19px var(--mvk-font-body);
	letter-spacing: 0;
	text-transform: none;
	outline: none;
	transition: border-color var(--mvk-ease), box-shadow var(--mvk-ease);
}
.mvk-quote-card .mvk-input::placeholder { color: rgba(36, 60, 71, 0.5); opacity: 1; }

/* Select: chevron asset 11.6 x 6.93 is the drawn 10 x 5 slot plus Figma's inset (-0.8px left/top), slot 15px from the right edge. */
.mvk-quote-card .mvk-select {
	/* !important: Uncode sets its own arrow on every `select` with higher specificity. */
	background-image: url("../img/chevron-select.svg") !important;
	background-repeat: no-repeat;
	background-position: right 13.2px top 16.7px;
	background-size: 11.6px 6.93px;
	cursor: pointer;
}
.mvk-quote-card .mvk-select:has(option[value=""]:checked) { color: rgba(36, 60, 71, 0.5); }
.mvk-quote-card .mvk-select option { color: var(--mvk-navy); }

.mvk-quote-form__spacer { width: 1px; height: 2px; }
.mvk-quote-card .mvk-quote-form__submit { display: flex; width: 100%; }

/* rgba(36,60,71,.12) over the cream card, as Figma rounds it (a 1-level difference from browser blending). */
.mvk-quote-card__rule { height: 1px; background: #E4E4E2; }

/* Call link ------------------------------------------------------------------ */
.mvk-call {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	height: 21px;
	margin: 0;
	padding: 0;
	font: 400 14px/21px var(--mvk-font-body);
}
.mvk-call__icon { position: relative; flex: none; width: 12.8px; height: 12.8px; color: var(--mvk-navy); transition: color var(--mvk-ease); }
.mvk-call__icon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14.3px;
	height: 14.3px;
	margin: -7.15px 0 0 -7.15px;
	background: currentColor;
	-webkit-mask: url("../img/phone-icon.svg") center / 100% 100% no-repeat;
	mask: url("../img/phone-icon.svg") center / 100% 100% no-repeat;
}
.mvk-call__text { min-width: 160px; color: rgba(36, 60, 71, 0.8); white-space: nowrap; }
.mvk-call .mvk-call__link {
	min-width: 128px;
	color: var(--mvk-navy);
	font-weight: 700;
	text-decoration: underline solid;
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
	white-space: nowrap;
	transition: color var(--mvk-ease);
}
.mvk-call .mvk-call__link:hover { color: var(--mvk-rust); text-decoration: underline solid; }
.mvk-call:has(.mvk-call__link:hover) .mvk-call__icon { color: var(--mvk-rust); }
html body .mvk-call .mvk-call__link:focus-visible { outline: none; }
.mvk-call:has(.mvk-call__link:focus-visible)::before {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2px solid var(--mvk-navy);
	border-radius: 4px;
	pointer-events: none;
}

/* Responsive — NOT DESIGNED in Figma (only 1440 exists). Derived; awaiting operator approval (Decision D7).
   >=1100: the 1440 layout flexes (copy left, card right, both anchored to the stage edges).
   <1100: the tablet photo (hero-photo-tablet.webp, swapped in by <picture> in hero.php) fills the whole hero;
   the headline sits over its top band and the quote card below it. */
@media (max-width: 1099px) {
	.mvk-hero { --mvk-hero-photo-h: 460px; height: auto; }
	.mvk-hero__photo { object-position: 30% 0; }
	/* Replaces the desktop vignette: darken behind the headline (the band is --mvk-hero-photo-h tall), deeper below it. */
	.mvk-hero__overlay {
		background-image: linear-gradient(180deg, rgba(26, 45, 54, 0.3) 0, rgba(26, 45, 54, 0.45) calc(var(--mvk-hero-photo-h) * 0.45), rgba(26, 45, 54, 0.82) var(--mvk-hero-photo-h), rgba(26, 45, 54, 0.9) 100%);
	}
	.mvk-hero__stage { display: flex; flex-direction: column; height: auto; padding: 0 32px 48px; box-sizing: border-box; }
	.mvk-hero__band { position: static; display: flex; align-items: flex-end; box-sizing: border-box; width: auto; min-height: var(--mvk-hero-photo-h); padding-bottom: 32px; }
	.mvk-hero__message { width: 100%; max-width: 720px; margin-left: 0; }
	.mvk-hero .mvk-hero__title { font-size: clamp(34px, 6vw, 48px); line-height: 1.1; }
	.mvk-hero .mvk-hero__sub { width: 100%; font-size: 16px; line-height: 24px; }
	.mvk-quote-card { position: static; width: 100%; max-width: 480px; margin: 0 auto; }
}

@media (max-width: 599px) {
	.mvk-hero { --mvk-hero-photo-h: 400px; }
	.mvk-hero__stage { padding: 0 20px 40px; }
	.mvk-hero .mvk-hero__title { font-size: 34px; }
	.mvk-quote-card { padding-left: 20px; padding-right: 20px; }
}

/* Field states and validation (spec §2 "Form states", handoff 1:373-1:511) -------------------------------------- */
.mvk-quote-card .mvk-input:hover { border-color: var(--mvk-input-border-hover); }
/* Focus: 1.5px navy border (1px border + 0.5px inset) and a 3px orange glow at 35%; text nudges 0.5px as drawn. */
.mvk-quote-card .mvk-input:focus {
	padding-left: 14.5px;
	border-color: var(--mvk-navy);
	box-shadow: inset 0 0 0 0.5px var(--mvk-navy), 0 0 0 3px rgba(255, 140, 53, 0.35);
}
.mvk-quote-card .mvk-input[aria-invalid="true"] {
	padding-left: 14.5px;
	border-color: var(--mvk-error);
	box-shadow: inset 0 0 0 0.5px var(--mvk-error);
}
.mvk-quote-card .mvk-input[aria-invalid="true"]:focus {
	box-shadow: inset 0 0 0 0.5px var(--mvk-error), 0 0 0 3px rgba(255, 140, 53, 0.35);
}

/* Error line: 8px below the input (field gap 5 + 3), 16px high, icon + message. `hidden` must win over display:flex. */
.mvk-quote-card .mvk-field__error { display: flex; align-items: center; gap: 6px; height: 16px; margin: 3px 0 0; padding: 0; color: var(--mvk-error); font: 600 12px/16px var(--mvk-font-body); }
.mvk-quote-card .mvk-field__error[hidden] { display: none; }
.mvk-quote-card .mvk-form-error { height: auto; min-height: 16px; margin: 2px 0 0; align-items: flex-start; }
.mvk-field__error-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--mvk-error); color: #fff; font: 700 10px/1 var(--mvk-font-body); }
.mvk-form-error .mvk-field__error-icon { margin-top: 1px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). Humans and assistive tech never reach it. */
.mvk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Submitting */
html body .mvk-quote-form__submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Hero grows (only while errors are showing) so a taller card is not clipped; quote-form.js sets the height. */
.mvk-hero, .mvk-hero__stage { transition: height 150ms ease-out; }

/* In-card confirmation: only used when the thank-you page does not exist on this environment. */
.mvk-quote-success { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0 4px; }
.mvk-quote-success[hidden] { display: none; }
.mvk-quote-success__check { flex: none; display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--mvk-navy) url("../img/check.svg") center / 18px 18px no-repeat; }
.mvk-quote-success__title { margin: 0; color: var(--mvk-navy); font: 700 22px/26px var(--mvk-font-display); }
.mvk-quote-success:focus { outline: none; }
.mvk-quote-success__text { margin: 0; color: rgba(36, 60, 71, 0.8); font: 400 14px/21px var(--mvk-font-body); }

/* Custom select (quote-form.js): trigger styled as .mvk-input; the native <select> stays in the form, visually hidden. */
html body .mvk-quote-card .mvk-select.mvk-select--native {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	background-image: none !important;
}
.mvk-combo { position: relative; }
html body .mvk-quote-card .mvk-combo__trigger {
	display: flex;
	align-items: center;
	text-align: left;
	cursor: pointer;
	letter-spacing: 0;
	text-transform: none;
}
.mvk-combo__trigger .mvk-combo__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvk-combo__trigger.is-placeholder { color: rgba(36, 60, 71, 0.5); }
.mvk-combo__trigger::after {
	content: "";
	position: absolute;
	right: 13.2px;
	top: 16.7px;
	width: 11.6px;
	height: 6.93px;
	background: url("../img/chevron-select.svg") center / 100% 100% no-repeat;
	transition: transform var(--mvk-ease);
}
.mvk-combo__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
/* An open menu keeps the focus look (border + glow) on the field. */
.mvk-quote-card .mvk-combo__trigger[aria-expanded="true"] {
	padding-left: 14.5px;
	border-color: var(--mvk-navy);
	box-shadow: inset 0 0 0 0.5px var(--mvk-navy), 0 0 0 3px rgba(255, 140, 53, 0.35);
}

/* Open menu: white, 1px #CFC3AE, 4px radius, 37px options, 14px left padding, hovered option #F3EFE6 (handoff). Shadow is derived (not drawn). */
.mvk-quote-card .mvk-combo__menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 10;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mvk-input-border);
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(61, 41, 20, 0.14);
}
.mvk-quote-card .mvk-combo__menu[hidden] { display: none; }
.mvk-combo.is-above .mvk-combo__menu { top: auto; bottom: calc(100% + 4px); }
.mvk-quote-card .mvk-combo__option {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 37px;
	margin: 0;
	padding: 0 14px;
	color: var(--mvk-navy);
	font: 400 14px/19px var(--mvk-font-body);
	cursor: pointer;
	transition: background-color var(--mvk-ease);
}
.mvk-quote-card .mvk-combo__option.is-active { background: var(--mvk-section-bg); }
.mvk-quote-card .mvk-combo__option[aria-selected="true"] { font-weight: 600; }