/* =====================================================================================================================
   C. Company and services (S011 page group): the service pages, sell your truck, driver documents, the customer
   portal, about and the company pages, the FAQ, service areas, the legal pages and the thank-you page. Blocks in
   inc/company.php; content in mainland-core includes/data/pages-company.php. Loaded on top of pages.css only where
   one of these prints (mainland_enqueue_pages_css( 'company' )).
   ================================================================================================================== */

/* C1. The hero's right column (a group with .mn-hero-aside in the content): a form card, the documents lookup, the
   yard panel or the CVI facility card. The trade-in form gets the wider column from 1100 px. */
/* The hero's flex column lets children shrink to their content; a container (the form, the lookup) has none, so the
   aside always takes the full width. */
.mn-page-hero--aside .mn-page-hero__aside { align-self: stretch; min-inline-size: 0; }
.mn-page-hero__aside .mn-hero-aside { display: grid; gap: 16px; margin: 0; }
.mn-page-hero__aside .mn-hero-aside > * { margin: 0; }
.mn-page-hero__aside .mn-lead-form { max-inline-size: none; container-type: inline-size; }
.mn-page-hero__aside .mn-form { grid-template-columns: minmax(0, 1fr); }
.mn-page-hero__aside .mn-visit-block .mn-visit { min-block-size: 360px; }
@container (min-width: 22rem) {
	.mn-page-hero__aside .mn-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.mn-page-hero__aside .mn-visit-block .mn-visit { min-block-size: 0; aspect-ratio: 5 / 4; }
}
@media (min-width: 1100px) {
	.mn-page-hero--aside:has([data-type="trade_in"]) .mn-page-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.mn-page-hero--aside:has([data-type="trade_in"]) .mn-page-hero__copy { position: sticky; inset-block-start: calc(var(--mn-sticky-top) + 32px); align-self: start; }
}

/* C2. The service and trade-in forms: short fields in pairs once the card is wide enough (theme.css §22 pairs
   phone and email from 600 px). */
.mn-form:is([data-type="trade_in"], [data-type="service_request"], [data-type="cvi_booking"], [data-type="yard_storage"]) > :is(.mn-form__field--model_year, .mn-form__field--make, .mn-form__field--km, .mn-form__field--hours, .mn-form__field--asking, .mn-form__field--location, .mn-form__field--unit_details, .mn-form__field--unit_number, .mn-form__field--preferred_date, .mn-form__field--bring, .mn-form__field--units, .mn-form__field--unit_numbers, .mn-form__field--cvi_expiry, .mn-form__field--how_many, .mn-form__field--from) { grid-column: auto; }
.mn-form__files { padding: 0.6rem 0.75rem; cursor: pointer; }
.mn-form__files::file-selector-button { margin-inline-end: 12px; padding: 0.5rem 0.875rem; border: 1px solid var(--mn-field-border); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--paper-2); color: var(--mn-text-strong); font: inherit; font-size: var(--wp--custom--font-size--ui); font-weight: 600; cursor: pointer; }

/* C3. The request band: the head, "What happens next" and the call buttons beside the form card (#quote). */
.mn-request__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
.mn-request__copy { display: grid; gap: 30px; align-content: start; min-inline-size: 0; }
.mn-request__copy > * { margin: 0; }
.mn-request__form { min-inline-size: 0; }
.mn-request__form .mn-lead-form { max-inline-size: none; }
/* A Max-Atlas build has no year range (the model page's request, 14 §14.2). */
@supports selector(:has(*)) {
	.mn-form[data-type="source_request"]:has(select[name="looking_for"] option[value="max-atlas"]:checked) > .mn-form__field--years { display: none; }
}
.mn-request__next,
.mn-request__talk { display: grid; gap: 14px; padding-block-start: 22px; border-block-start: 1px solid var(--mn-rule); }
.mn-request__next > *,
.mn-request__talk > * { margin: 0; }
:is(.mn-request__next ol, .mn-request__list) { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
:is(.mn-request__next, .mn-request__list) li { display: flex; align-items: flex-start; gap: 14px; color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--medium); line-height: 1.45; }
.mn-request__n {
	box-sizing: border-box;
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	margin-block-start: -2px;
	border: 1.5px solid var(--wp--preset--color--cyan);
	border-radius: 50%;
	background: var(--mn-ring-bg);
	color: var(--mn-ring-fg);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 700;
	line-height: 1;
}
.mn-request__buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.mn-request__hours { display: flex; align-items: center; gap: 10px; color: var(--mn-text); font-size: var(--wp--custom--font-size--ui); }
.mn-request__hours .mn-icon { flex: none; inline-size: 18px; block-size: 18px; color: var(--mn-link); }
@media (min-width: 960px) {
	.mn-request__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.mn-request__copy { position: sticky; inset-block-start: calc(var(--mn-sticky-top) + 32px); }
}

/* C4. Copy beside the yard panel, and "How to reach us": the address card beside the panel. */
.mn-visit-split,
.mn-reach { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.mn-reach { align-items: stretch; gap: var(--wp--preset--spacing--50); }
.mn-visit-split__copy { display: grid; gap: 20px; align-content: center; min-inline-size: 0; }
.mn-visit-split__copy > * { margin: 0; }
.mn-visit-split__copy > p:not([class]) { max-inline-size: var(--mn-measure); color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); }
.mn-visit-split__panel,
.mn-reach > * { min-inline-size: 0; margin: 0; }
.mn-reach > .mn-visit-block { display: flex; }
.mn-reach > .mn-visit-block .mn-visit { flex: 1; }
@media (min-width: 960px) {
	.mn-visit-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.mn-visit-split .mn-visit { min-block-size: 0; aspect-ratio: 5 / 4; }
	.mn-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* C5. The CVI facility card: the address card's anatomy (sections.css, the eyebrow on its own line), its big line the
   facility number. */
.mn-facility-card__no { display: grid; gap: 6px; margin-block-start: 14px; color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); font-weight: 800; line-height: 1; letter-spacing: var(--wp--custom--tracking--heading); }
.mn-facility-card__label { color: var(--mn-text); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--custom--font-size--ui); font-weight: 600; letter-spacing: 0; }

/* C6. The Google rating card: the figure and the stars beside the dated line and the two links (never schema). */
.mn-rating {
	box-sizing: border-box;
	display: grid;
	gap: 24px 40px;
	padding: clamp(24px, 1rem + 2.4vw, 44px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-card);
}
.mn-rating > * { margin: 0; min-inline-size: 0; }
.mn-rating__score { display: grid; gap: 12px; align-content: start; }
.mn-rating__value { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.mn-rating__value .mn-num { color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.mn-rating__of { color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); font-weight: 600; }
.mn-rating__stars { position: relative; display: inline-flex; inline-size: max-content; color: var(--mn-rule-3); }
.mn-rating__stars .mn-icon { inline-size: 26px; block-size: 26px; }
.mn-rating__track,
.mn-rating__fill { display: inline-flex; gap: 4px; }
.mn-rating__fill { position: absolute; inset: 0; overflow: hidden; inline-size: var(--mn-stars, 100%); color: var(--wp--preset--color--cyan); }
.mn-rating__body { display: grid; gap: 14px; align-content: center; }
.mn-rating__body > * { margin: 0; }
.mn-rating__source { color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 800; letter-spacing: var(--wp--custom--tracking--heading); }
.mn-rating__line { color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); }
.mn-rating__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); padding-block-start: 6px; }
@media (min-width: 760px) {
	.mn-rating { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
	.mn-rating__score { padding-inline-end: 40px; border-inline-end: 1px solid var(--mn-rule); }
}

/* C7. "On this page": a slim white strip of anchor chips under the hero (the FAQ's topics). */
.mn-band.mn-jump { padding-block: 14px; border-block-end: 1px solid var(--mn-rule); }
.mn-kit.mn-jump > .mn-jump__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.mn-jump__inner > * { margin: 0; }
@media (min-width: 960px) {
	.mn-band.mn-jump { position: sticky; inset-block-start: var(--mn-sticky-top); z-index: var(--mn-z-sticky); }
}
.mn-jump__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mn-jump__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--target--min);
	padding: 0 16px;
	border: 1px solid var(--mn-rule-2);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-surface);
	color: var(--mn-text-strong);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-jump__list a:hover { border-color: var(--mn-text-strong); background: var(--wp--preset--color--paper-2); }
.mn-flow [id]:is(.mn-band, section) { scroll-margin-block-start: calc(var(--mn-sticky-top) + 8px); }

/* C8. The driver-documents lookup (the shell until Phase 3): one big field and the primary on a white card. */
.mn-doc-lookup {
	box-sizing: border-box;
	display: grid;
	gap: 18px;
	padding: clamp(22px, 1rem + 2vw, 36px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-card);
}
.mn-doc-lookup > *,
.mn-doc-lookup__form > * { margin: 0; }
.mn-doc-lookup__form { display: grid; gap: 10px; }
.mn-doc-lookup__title { margin-block-end: 6px !important; }
.mn-doc-lookup__row { display: grid; gap: 12px; }
.mn-doc-lookup__input { min-block-size: 56px; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mn-doc-lookup__input::placeholder { text-transform: none; }
.mn-doc-lookup__go { justify-content: center; }
.mn-doc-lookup__result { display: grid; gap: 6px; padding: 16px 18px; border-inline-start: 3px solid var(--wp--preset--color--warn); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--paper-2); color: var(--mn-text-strong); }
.mn-doc-lookup__result[hidden] { display: none; }
.mn-doc-lookup__result > * { margin: 0; }
.mn-doc-lookup__result:focus { outline: 2px solid var(--mn-focus); outline-offset: 2px; }
.mn-doc-lookup__result a { color: var(--mn-link); font-weight: 600; }
/* The live lookup's answer (mainland-rentals doc-lookup.js, 06 §4.2): a large button per document with its date. */
.mn-doc-lookup__docs { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.mn-doc-lookup__doc { display: grid; gap: 4px; margin: 0; }
.mn-doc-lookup__result a.mn-doc-lookup__open { justify-content: center; color: var(--wp--preset--color--ink-0); }
.mn-doc-lookup__badge { margin: 0; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); }
.mn-doc-lookup__badge.is-expired { color: var(--wp--preset--color--error); font-weight: 600; }
.mn-doc-lookup__form .mn-form__turnstile:empty { display: none; }
@container (min-width: 26rem) {
	.mn-doc-lookup__row { grid-template-columns: minmax(0, 1fr) auto; }
}
.mn-page-hero__aside .mn-doc-lookup { container-type: inline-size; }

/* C9. The thank-you panel: the success mark, the reference chip, the next steps and the contact buttons. */
.mn-thanks__card {
	box-sizing: border-box;
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	padding: clamp(24px, 1rem + 2.4vw, 44px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-card);
}
.mn-thanks__card > * { margin: 0; }
.mn-thanks__main,
.mn-thanks__next { display: grid; align-content: start; justify-items: start; gap: 16px; min-inline-size: 0; }
.mn-thanks__main > *,
.mn-thanks__next > * { margin: 0; }
.mn-thanks__headline { color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xxx-large); font-weight: 800; line-height: 1.02; letter-spacing: var(--wp--custom--tracking--heading); }
@media (min-width: 960px) {
	.mn-thanks__card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.mn-thanks__next { padding-inline-start: clamp(24px, 3vw, 48px); border-inline-start: 1px solid var(--mn-rule); }
}
.mn-thanks__mark { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--ok) 12%, transparent); color: var(--wp--preset--color--ok); }
.mn-thanks__mark .mn-icon { inline-size: 28px; block-size: 28px; }
.mn-thanks__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--mn-text-strong); font-weight: 600; }
.mn-thanks__ref[hidden] { display: none; }
.mn-thanks__ref .mn-chip { block-size: 34px; padding-inline: 12px; font-size: var(--wp--custom--font-size--ui); letter-spacing: 0.04em; }
.mn-thanks__reply { color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); }
.mn-thanks__title { font-size: var(--wp--preset--font-size--x-large); }

/* C12. The team (mainland/team, Settings → Team): photo cards at 4:5, two across on phones, up to five on wide
   screens; the compact variant (the About page teaser) links each person to their anchor on /team/. */
.mn-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .mn-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mn-team { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mn-person { display: grid; grid-template-rows: auto 1fr; overflow: hidden; margin: 0; border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--lg); background: var(--mn-surface); box-shadow: var(--mn-shadow-card); scroll-margin-block-start: calc(var(--mn-sticky-top) + 24px); }
.mn-person__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--paper-2); }
.mn-person__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 20%; }
.mn-person__body { display: grid; gap: 6px; align-content: start; padding: clamp(14px, 1.4vw, 20px); }
.mn-person__body > * { margin: 0; }
.mn-person__name { color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 800; line-height: 1.15; letter-spacing: var(--wp--custom--tracking--heading); }
.mn-person__name a { color: inherit; text-decoration: none; }
.mn-person__name a::after { content: ""; position: absolute; inset: 0; }
.mn-team--compact .mn-person { position: relative; }
.mn-team--compact .mn-person:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--cyan-700); outline-offset: 2px; }
.mn-team--compact .mn-person__name a:hover { text-decoration: underline; }
.mn-person__title { color: var(--mn-text); font-size: var(--wp--custom--font-size--ui); font-weight: 600; }
.mn-person__facts { display: grid; gap: 4px; margin: 4px 0 0 !important; padding: 0; list-style: none; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); }
.mn-person__k { display: block; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--micro); font-weight: 600; letter-spacing: var(--wp--custom--tracking--spec); text-transform: uppercase; }
.mn-person__call { display: flex; align-items: center; gap: 8px; margin-block-start: 8px !important; font-size: var(--wp--preset--font-size--small); }
.mn-person__call .mn-icon { flex: none; inline-size: 16px; block-size: 16px; color: var(--wp--preset--color--cyan-700); }
.mn-person__call a { display: inline-flex; align-items: center; min-block-size: var(--wp--custom--target--min); color: var(--mn-text-strong); font-weight: 600; }

/* C13. The office video (mainland/office-video): the player beside what it shows; stacked on phones. */
.mn-video { display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (min-width: 960px) { .mn-video { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.mn-video__frame { overflow: hidden; margin: 0; border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--ink); box-shadow: var(--mn-shadow-card); aspect-ratio: 16 / 9; }
.mn-video__player { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mn-video__copy { display: grid; gap: 16px; align-content: start; min-inline-size: 0; }
.mn-video__copy > * { margin: 0; }
.mn-video__title { color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; line-height: 1.05; letter-spacing: var(--wp--custom--tracking--title); }
.mn-video__lede { color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); }
.mn-video__shows { display: grid; gap: 8px; }
.mn-video__shows > * { margin: 0; }
.mn-video__k { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--micro); font-weight: 600; letter-spacing: var(--wp--custom--tracking--spec); text-transform: uppercase; }