/* ==========================================================================
   US CRUISERZ — design system and site styles
   Mobile-first. No framework, no build step. Tokens live on :root.
   Sections: 1 fonts · 2 tokens · 3 base · 4 layout · 5 type · 6 buttons
   7 header/nav · 8 hero · 9 sections & components · 10 builds · 11 packages
   12 forms · 13 gallery/lightbox · 14 footer · 15 utilities · 16 motion
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL OFL; see assets/fonts/*.txt) ----------------- */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations"), url("../fonts/archivo-var-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plex Mono";
	src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Plex Mono";
	src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
	font-weight: 500 700;
	font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
	/* Neutrals: ink to bone. Warm whites echo African dust and the "bone" of BONESTOCK. */
	--ink: #0a0b0c;
	--carbon: #111315;
	--graphite: #1a1d20;
	--steel: #2a2e33;
	--gunmetal: #3d4248;
	--iron: #5a6067;
	--ash: #9ba1a7;
	--fog: #c9c4bb;
	--bone: #ece7de;
	--paper: #f6f3ee;
	--white: #ffffff;

	/* Brand signal red, taken from the logo edge-glow. Used sparingly. */
	--red: #c8102e;
	--red-deep: #a10d25;
	--red-on-dark: #ff4d5e;

	--success: #2f7d4f;
	--warning: #b7791f;
	--warning-text: #7a4e0c; /* 7:1 on the light amber note background */

	/* Semantic (light surface defaults; .on-dark flips them) */
	--bg: var(--paper);
	--surface: var(--white);
	--text: var(--ink);
	--text-muted: var(--iron);
	--line: rgba(10, 11, 12, 0.14);
	--line-strong: rgba(10, 11, 12, 0.32);
	--accent: var(--red);

	/* Type */
	--font-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
	--font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
	--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.375rem);
	--step-2: clamp(1.42rem, 1.24rem + 0.9vw, 1.95rem);
	--step-3: clamp(1.8rem, 1.42rem + 1.7vw, 2.85rem);
	--step-4: clamp(2.3rem, 1.6rem + 3vw, 4.3rem);
	--step-5: clamp(2.7rem, 1.6rem + 5vw, 6.6rem);
	--step-6: clamp(3.4rem, 1.4rem + 9vw, 10.5rem);

	/* Space & layout */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--section: clamp(4rem, 2.6rem + 6vw, 9rem);
	--gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
	--container: 84rem;
	--container-narrow: 46rem;
	--header-h: 4.25rem;
	--utility-h: 2.25rem;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 240ms;
	--focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--red);
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	font-stretch: 100%;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
img { background: var(--graphite); }
img[src$=".png"], img[src$=".svg"], .site-logo img, .wp-block-image img[src$=".png"] { background: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 0; }
::selection { background: var(--red); color: var(--white); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

.skip-link {
	position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
	background: var(--red); color: var(--white); padding: var(--space-3) var(--space-5);
	font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); color: var(--white); }
.screen-reader-text, .sr-only {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* Dark surfaces flip the semantic tokens. */
.on-dark, .section--dark, .section--ink, .site-header, .site-footer, .hero {
	--bg: var(--ink);
	--surface: var(--graphite);
	--text: var(--bone);
	--text-muted: var(--ash);
	--line: rgba(236, 231, 222, 0.14);
	--line-strong: rgba(236, 231, 222, 0.34);
	--accent: var(--red-on-dark);
	--focus: 0 0 0 3px var(--ink), 0 0 0 5px var(--red-on-dark);
	--warning-text: #f2b552;
	color: var(--text);
}

/* 4. Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; background: var(--bg); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--paper { background: var(--paper); }
.section--bone { --bg: var(--bone); background: var(--bone); }
.section--white { --bg: var(--white); background: var(--white); }
.section--dark { background: var(--carbon); }
.section--ink { background: var(--ink); }
.section + .section--paper.section, .section--rule { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) {
	.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid--5-7 { grid-template-columns: 5fr 7fr; }
	.grid--7-5 { grid-template-columns: 7fr 5fr; }
	.grid--4-8 { grid-template-columns: 4fr 8fr; }
}
.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }

/* 5. Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
p, ul, ol, dl, blockquote, figure { margin: 0 0 var(--space-5); }
p { text-wrap: pretty; }
.display, .h-display {
	font-size: var(--step-5); font-weight: 820; font-stretch: 118%;
	text-transform: uppercase; line-height: 0.92; letter-spacing: -0.015em;
}
.h1, h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 115%; text-transform: uppercase; line-height: 0.96; letter-spacing: -0.012em; }
.h2, h2 { font-size: var(--step-3); font-weight: 760; font-stretch: 112%; text-transform: uppercase; line-height: 1; }
.h3, h3 { font-size: var(--step-2); font-weight: 680; font-stretch: 104%; line-height: 1.12; }
.h4, h4 { font-size: var(--step-1); font-weight: 650; font-stretch: 100%; line-height: 1.25; }
h5, h6, .h5 { font-size: var(--step-0); font-weight: 650; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text); max-width: 40em; font-stretch: 100%; font-weight: 400; }
.muted { color: var(--text-muted); }
.measure { max-width: 38em; }
strong, b { font-weight: 650; }

.eyebrow {
	display: inline-flex; align-items: center; gap: var(--space-3);
	font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted);
	margin: 0 0 var(--space-5);
}
.eyebrow__index { color: var(--accent); }
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.6; }
.eyebrow--plain::before { display: none; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; }
.tag {
	display: inline-block; font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em;
	padding: 0.32em 0.7em; border: 1px solid var(--line-strong); color: var(--text-muted); line-height: 1.4;
}
.tag--red { border-color: var(--accent); color: var(--accent); }

/* Long-form content from the block editor */
.prose { max-width: var(--container-narrow); }
.prose > * { margin-block: 0 var(--space-5); }
.prose h2 { margin-top: var(--space-8); font-size: var(--step-3); }
.prose h3 { margin-top: var(--space-7); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--accent); }
.prose a:not(.wp-element-button):not(.btn) { color: var(--accent); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-5); font-size: var(--step-1); font-stretch: 100%; }
.prose .alignwide { max-width: var(--container); margin-inline: auto; }
.entry-content > .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.entry-content > *:not(.alignfull):not(.alignwide) { max-width: var(--container-narrow); }
.entry-content { display: flow-root; }
.entry-content.is-wide > *:not(.alignfull) { max-width: none; }

/* 6. Buttons -------------------------------------------------------------- */
.btn, .wp-element-button, .wp-block-button__link, .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button {
	--btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink);
	display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
	min-height: 3.25rem; padding: 0.85rem 1.5rem;
	background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: 0;
	font-family: var(--font-sans); font-size: var(--step--1); font-weight: 650; font-stretch: 112%;
	text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.2; text-decoration: none; text-align: center;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	cursor: pointer;
}
.btn:hover, .wp-block-button__link:hover, .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { --btn-bg: var(--red); --btn-bd: var(--red); color: var(--white); }
.btn .icon { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .icon-arrow { transform: translateX(3px); }
.btn:hover .icon-external { transform: translate(2px, -2px); }
.btn--primary, .woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce #place_order, .single_add_to_cart_button { --btn-bg: var(--red); --btn-bd: var(--red); --btn-fg: var(--white); }
.btn--primary:hover, .woocommerce .button.alt:hover, .woocommerce button.button.alt:hover, .single_add_to_cart_button:hover { --btn-bg: var(--red-deep); --btn-bd: var(--red-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--text); --btn-bd: var(--text); color: var(--bg); }
.on-dark .btn:not(.btn--primary):not(.btn--ghost), .section--dark .btn:not(.btn--primary):not(.btn--ghost), .section--ink .btn:not(.btn--primary):not(.btn--ghost), .hero .btn:not(.btn--primary):not(.btn--ghost) { --btn-bg: var(--bone); --btn-fg: var(--ink); --btn-bd: var(--bone); }
.btn--sm { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: var(--step--2); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.link-arrow {
	display: inline-flex; align-items: center; gap: 0.5em; font-weight: 650; font-stretch: 110%;
	text-transform: uppercase; letter-spacing: 0.07em; font-size: var(--step--1); text-decoration: none; color: var(--text);
	padding-block: 0.4em; border-bottom: 1px solid var(--line-strong);
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow .icon { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.external-note { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-muted); letter-spacing: 0.04em; }

.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.icon--fill { fill: currentColor; stroke: none; }

/* 7. Header & navigation -------------------------------------------------- */
.utility-bar { background: var(--ink); color: var(--ash); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; border-bottom: 1px solid rgba(236, 231, 222, 0.1); }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 2.25rem; }
.utility-bar a { text-decoration: none; color: var(--ash); display: inline-flex; align-items: center; gap: 0.4em; padding-block: 0.4rem; white-space: nowrap; }
.utility-bar__long { display: none; }
@media (min-width: 40rem) { .utility-bar__long { display: inline; } }
.utility-bar a:hover { color: var(--white); }
.utility-bar__group { display: flex; gap: var(--space-5); align-items: center; }
.utility-bar .icon { width: 0.9rem; height: 0.9rem; }
.utility-bar .utility-bar__hide-sm { display: none; }
@media (min-width: 48rem) { .utility-bar .utility-bar__hide-sm { display: inline-flex; } }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 11, 12, 0.96); border-bottom: 1px solid rgba(236, 231, 222, 0.1); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(10, 11, 12, 0.86); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); } }
.site-header-wrap { display: contents; }
/* Overlay pages (homepage, build showcases): header floats transparent over the hero until scrolled. */
.has-overlay-header .utility-bar { position: relative; z-index: 101; background: transparent; border-color: rgba(236, 231, 222, 0.12); }
.has-overlay-header .site-header.is-top { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.has-overlay-header .hero, .has-overlay-header .build-hero { margin-top: calc(-1 * (var(--header-h) + var(--utility-h) + 2px)); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.site-logo { display: block; flex: none; margin-right: auto; padding-block: var(--space-2); }
.site-logo img { width: clamp(150px, 10vw + 90px, 210px); height: auto; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
	display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; position: relative;
	background: transparent; border: 1px solid transparent; color: var(--bone); text-decoration: none;
}
.icon-btn:hover { color: var(--white); border-color: var(--line-strong); }
.icon-btn .icon { width: 1.3rem; height: 1.3rem; }
.cart-count {
	position: absolute; top: 0.2rem; right: 0.1rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
	display: grid; place-items: center; background: var(--red); color: var(--white);
	font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; line-height: 1;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }
.header-cta { display: none; }
@media (min-width: 40rem) { .header-cta { display: inline-flex; } }

/* Primary nav: hidden on mobile (drawer), inline from 75rem */
.primary-nav { display: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 80rem) {
	.menu-toggle { display: none !important; }
	.primary-nav { display: block; }
	.primary-nav > ul { display: flex; align-items: center; gap: 0; }
	.primary-nav > ul > li { position: relative; display: flex; align-items: center; white-space: nowrap; }
	.primary-nav > ul > li > a, .primary-nav .submenu-toggle {
		display: inline-flex; align-items: center; gap: 0.3rem; min-height: var(--header-h);
		padding-inline: 0.6rem; color: var(--bone); text-decoration: none; background: none; border: 0;
		font-size: 0.8125rem; font-weight: 600; font-stretch: 104%; letter-spacing: 0.05em; text-transform: uppercase;
	}
	.primary-nav > ul > li.menu-item-has-children > a { padding-right: 0.1rem; }
	.primary-nav .submenu-toggle { padding-inline: 0.15rem 0.55rem; min-width: 1.5rem; }
	.primary-nav .submenu-toggle .icon { width: 0.85rem; height: 0.85rem; transition: transform var(--dur) var(--ease); }
	.primary-nav > ul > li > a:hover, .primary-nav > ul > li.current-menu-item > a, .primary-nav > ul > li.current-menu-ancestor > a, .primary-nav > ul > li.current-page-ancestor > a { color: var(--white); }
	.primary-nav > ul > li > a::after {
		content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 1rem; height: 2px; background: var(--red-on-dark);
		transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
	}
	.primary-nav > ul > li > a:hover::after, .primary-nav > ul > li.current-menu-item > a::after, .primary-nav > ul > li.current-menu-ancestor > a::after, .primary-nav > ul > li.current-page-ancestor > a::after { transform: scaleX(1); }
	.primary-nav .sub-menu {
		position: absolute; top: 100%; left: -0.5rem; min-width: 20rem; padding: var(--space-3);
		background: var(--carbon); border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	}
	.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu, .primary-nav li.is-open > .sub-menu {
		opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
	}
	.primary-nav li.is-open > .submenu-toggle .icon, .primary-nav li:hover > .submenu-toggle .icon { transform: rotate(180deg); }
	.primary-nav .sub-menu a { display: block; padding: 0.7rem 0.85rem; text-decoration: none; color: var(--bone); border-left: 2px solid transparent; }
	.primary-nav .sub-menu a:hover, .primary-nav .sub-menu .current-menu-item > a { background: var(--graphite); border-left-color: var(--red-on-dark); color: var(--white); }
	.primary-nav .sub-menu .menu-title { display: block; font-weight: 600; font-size: var(--step--1); letter-spacing: 0.01em; }
	.primary-nav .sub-menu .menu-desc { display: block; font-size: var(--step--2); color: var(--ash); line-height: 1.45; margin-top: 0.15rem; font-family: var(--font-sans); }
	.primary-nav .sub-menu .menu-item-external .menu-title::after { content: " ↗"; color: var(--ash); }
}

/* Mobile drawer */
.mobile-nav {
	position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--bone);
	display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
	/* clip-path (not translateX) so the closed drawer never widens the mobile layout viewport */
	clip-path: inset(0 0 0 100%); transition: clip-path 320ms var(--ease); visibility: hidden;
}
.mobile-nav.is-open { clip-path: inset(0); visibility: visible; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); min-height: var(--header-h); border-bottom: 1px solid var(--line); }
.mobile-nav__head .site-logo img { width: 150px; }
.mobile-nav__body { padding: var(--space-5) var(--gutter) var(--space-7); flex: 1; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .mobile-nav__body > nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav li { position: relative; }
.mobile-nav a { color: var(--bone); text-decoration: none; }
.mobile-nav > .mobile-nav__body > nav > ul > li > a {
	display: flex; align-items: center; min-height: 3.6rem; padding-right: 3.5rem;
	font-size: var(--step-1); font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em;
}
.mobile-nav .submenu-toggle {
	position: absolute; right: 0; top: 0.4rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
	background: transparent; border: 1px solid var(--line); color: var(--bone);
}
.mobile-nav .submenu-toggle .icon { transition: transform var(--dur) var(--ease); }
.mobile-nav li.is-open > .submenu-toggle .icon { transform: rotate(180deg); }
.mobile-nav .sub-menu { display: none; padding: 0 0 var(--space-4) var(--space-4); border-left: 1px solid var(--red-on-dark); margin-bottom: var(--space-4); }
.mobile-nav li.is-open > .sub-menu { display: block; }
.mobile-nav .sub-menu a { display: block; padding: 0.65rem 0; font-size: var(--step-0); color: var(--fog); }
.mobile-nav .sub-menu .menu-desc { display: none; }
.mobile-nav__foot { padding: var(--space-5) var(--gutter) var(--space-7); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); }
.mobile-nav__foot a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fog); }
.menu-toggle { display: inline-grid; }
body.nav-open { overflow: hidden; }

/* Search dialog */
.search-dialog { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: rgba(10, 11, 12, 0.94); color: var(--bone); }
.search-dialog::backdrop { background: rgba(10, 11, 12, 0.6); }
.search-dialog__inner { max-width: 50rem; margin: 18vh auto 0; padding: 0 var(--gutter); }
.search-form { display: flex; border-bottom: 2px solid var(--bone); }
.search-form input[type="search"] { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--bone); font-size: var(--step-3); font-stretch: 110%; font-weight: 600; padding: var(--space-4) 0; }
.search-form input[type="search"]::placeholder { color: var(--iron); }
.search-form input:focus { outline: none; }
.search-form button { background: none; border: 0; color: var(--bone); padding: 0 var(--space-4); }
.search-dialog__close { position: absolute; top: var(--space-5); right: var(--gutter); }
.search-dialog__hint { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ash); margin-top: var(--space-4); }
.section .search-form { border-color: var(--text); }
.section .search-form input[type="search"], .section .search-form button { color: var(--text); font-size: var(--step-2); }

/* Breadcrumbs */
.breadcrumbs { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em 0.7em; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.7em; opacity: 0.5; }
.breadcrumbs a { text-decoration: none; color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current] { color: var(--text); }

/* 8. Hero ----------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 62rem); display: flex; flex-direction: column; justify-content: flex-end; background: var(--ink); overflow: hidden; }
/*
 * Slides (one or more) share one grid cell, so the hero is as tall as the tallest slide. Each slide is its own
 * stacking context holding its photo (positioned against .hero, so it fills the whole hero) and the darkening
 * scrim, which keeps a fading slide dark all the way through the crossfade.
 */
.hero__slides { display: grid; }
.hero__slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.hero > .container { position: relative; z-index: 1; } /* Controls and the facts strip sit above every slide. */
.hero__media { position: absolute; inset: 0; z-index: -1; }
/* Art direction: on wide screens extend the image past the right edge so the vehicle sits clear of the headline. */
@media (min-width: 64rem) { .hero__media { right: calc(-1 * var(--hero-shift, 0%)); } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 60% 60%); }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 11, 12, 0.55) 0%, rgba(10, 11, 12, 0) 26%),
		linear-gradient(0deg, rgba(10, 11, 12, 0.92) 0%, rgba(10, 11, 12, 0.55) 34%, rgba(10, 11, 12, 0) 64%),
		linear-gradient(90deg, rgba(10, 11, 12, 0.55) 0%, rgba(10, 11, 12, 0) 60%);
}
@media (max-width: 47.99rem) {
	/* Phones show a narrow slice of a wide photo: an optional second crop point (per slide). */
	.hero__media img { object-position: var(--focal-mobile, var(--focal, 60% 60%)); }
	/* Tall phone crops put more bright sky behind the copy: deepen the scrim. */
	.hero__media::after { background: linear-gradient(180deg, rgba(10, 11, 12, 0.6) 0%, rgba(10, 11, 12, 0.15) 22%), linear-gradient(0deg, rgba(10, 11, 12, 0.95) 0%, rgba(10, 11, 12, 0.72) 45%, rgba(10, 11, 12, 0.3) 75%, rgba(10, 11, 12, 0.2) 100%); }
}

/* Rotating hero: crossfade, controls (pause, slide buttons, previous/next). Without JavaScript the first slide shows. */
.hero--slider .hero__slide { opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease), visibility 0s linear 900ms; }
.hero--slider .hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 900ms var(--ease), visibility 0s; }
.hero__controls { display: none; }
.hero.is-ready .hero__controls { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: calc(-1 * var(--space-5)); padding-bottom: var(--space-4); }
.hero__ctrl {
	display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
	background: rgba(10, 11, 12, 0.35); color: var(--bone); border: 1px solid rgba(236, 231, 222, 0.32);
}
.hero__ctrl:hover { color: var(--white); border-color: var(--white); }
.hero__ctrl:focus-visible, .hero__dot:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.hero__ctrl .icon { width: 1rem; height: 1rem; }
.hero__icon-play, .hero.is-paused .hero__icon-pause { display: none; }
.hero.is-paused .hero__icon-play { display: block; }
.hero__dots { display: flex; align-items: center; margin-inline: var(--space-2); }
.hero__dot { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; }
.hero__dot span { position: relative; display: block; width: 2rem; height: 3px; overflow: hidden; background: rgba(236, 231, 222, 0.35); }
.hero__dot[aria-current="true"] span { background: rgba(236, 231, 222, 0.6); }
.hero__dot span::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.hero__dot[aria-current="true"] span::after { transform: scaleX(1); }
.hero.is-playing .hero__dot[aria-current="true"] span::after { animation: hero-progress var(--hero-interval, 7000ms) linear both; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Slides whose photo has its subject near the middle: a smaller headline keeps it clear of the text. */
.hero__slide--compact .hero__title { font-size: clamp(2.3rem, 1.3rem + 2.9vw, 4.4rem); max-width: 12ch; }
.hero__slide--compact .hero__text { max-width: 26em; }
.hero .hero__cobrand { margin-bottom: var(--space-4); }
.hero .hero__cobrand img { height: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); }
@media (max-width: 47.99rem) {
	.hero.is-ready .hero__controls { justify-content: flex-start; margin-top: calc(-1 * var(--space-4)); }
	.hero .cobrand-logos.hero__cobrand { flex-wrap: nowrap; gap: var(--space-3); }
	.hero .hero__cobrand img, .hero .hero__cobrand svg { height: 1.45rem; width: auto; }
	.hero .hero__cobrand .cobrand-logos__x { font-size: 1.2rem; }
}
.hero .eyebrow { color: var(--fog); }
.hero__content { padding-top: calc(var(--header-h) + 6rem); padding-bottom: var(--space-7); }
.hero__title { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 6.75rem); font-weight: 850; font-stretch: 118%; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; margin-bottom: var(--space-5); max-width: 13ch; color: var(--white); text-wrap: balance; }
.hero__title .accent { color: var(--red-on-dark); }
.hero__text { font-size: var(--step-1); line-height: 1.5; color: var(--fog); max-width: 34em; margin-bottom: var(--space-6); }
.hero__meta {
	border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash);
}
.hero__meta > div { padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.hero__meta strong { display: block; color: var(--bone); font-weight: 500; margin-top: 0.2rem; letter-spacing: 0.06em; }
@media (min-width: 48rem) { .hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero__meta > div + div { border-left: 1px solid var(--line); padding-left: var(--space-4); } }
@media (max-width: 47.99rem) { .hero__meta > div:nth-child(n+3) { display: none; } }

/* Inner-page hero */
.page-hero { position: relative; isolation: isolate; background: var(--ink); padding-top: clamp(3.5rem, 2rem + 6vw, 7rem); padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); overflow: hidden; }
.page-hero--image { min-height: clamp(26rem, 60vh, 44rem); display: flex; align-items: flex-end; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 55%); }
.page-hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.5) 45%, rgba(10, 11, 12, 0.2) 100%); }
.page-hero .container { width: 100%; }
.page-hero__title { font-size: var(--step-5); font-weight: 830; font-stretch: 118%; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.015em; max-width: 16ch; color: var(--white); margin-bottom: var(--space-5); }
.page-hero__lede { font-size: var(--step-1); line-height: 1.5; color: var(--fog); max-width: 38em; margin-bottom: 0; }
.page-hero .btn-row { margin-top: var(--space-6); }
.page-hero--compact .page-hero__title { font-size: var(--step-4); }

/* 9. Sections & components ------------------------------------------------ */
.section-head { display: grid; gap: var(--space-5); margin-bottom: clamp(2rem, 1rem + 3vw, 4rem); align-items: end; }
@media (min-width: 64rem) { .section-head--split { grid-template-columns: 7fr 5fr; } }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin-bottom: 0; color: var(--text-muted); }

/* Numbered index list: the signature list pattern for services and principles */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); counter-reset: idx; }
.index-list > li { border-bottom: 1px solid var(--line); counter-increment: idx; }
.index-list__link, .index-list__row {
	display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--space-4); align-items: baseline;
	padding: var(--space-5) 0; text-decoration: none; color: var(--text); position: relative;
}
.index-list__link::before, .index-list__row::before { content: counter(idx, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); grid-column: 1; grid-row: 1 / span 2; }
.index-list__title { font-size: var(--step-2); font-weight: 700; font-stretch: 112%; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.005em; display: block; grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: break-word; }
.index-list__desc { display: block; color: var(--text-muted); margin-top: var(--space-2); max-width: 44em; font-size: var(--step-0); grid-column: 2; grid-row: 2; min-width: 0; }
.index-list__link > .icon, .index-list__row > span:last-child:empty { grid-column: 3; grid-row: 1 / span 2; }
.index-list__link > span:not([class]) { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.index-list__link .icon { width: 1.5rem; height: 1.5rem; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); align-self: center; }
.index-list__link::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease); }
.index-list__link:hover { color: var(--text); }
.index-list__link:hover::after { transform: scaleX(1); }
.index-list__link:hover .icon { transform: translateX(4px); color: var(--accent); }
@media (min-width: 64rem) {
	.index-list__link, .index-list__row { grid-template-columns: 5rem 5fr 6fr 2rem; padding: var(--space-6) 0; }
	.index-list__link::before, .index-list__row::before { grid-row: 1; }
	.index-list__desc { margin-top: 0; grid-column: 3; grid-row: 1; }
	.index-list__link > .icon, .index-list__row > span:last-child:empty { grid-column: 4; grid-row: 1; }
	.index-list--compact .index-list__link, .index-list--compact .index-list__row { grid-template-columns: 4rem 1fr 2rem; }
	.index-list--compact .index-list__link > .icon { grid-column: 3; }
	.index-list--compact .index-list__desc { grid-column: 2; grid-row: 2; margin-top: var(--space-2); }
}

/* Editorial split: image + copy */
.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 64rem) {
	.split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 2rem + 4vw, 7rem); }
	.split--wide-media { grid-template-columns: 7fr 5fr; }
	.split--reverse .split__media { order: 2; }
}
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; }
.figure-caption, .wp-element-caption, figcaption {
	font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--text-muted); margin-top: var(--space-3); text-transform: uppercase;
}

/* Spec / key-facts list */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); margin: 0; }
.facts > div { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: var(--space-2); }
.facts dd { margin: 0; font-size: var(--step-2); font-weight: 720; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; }
.facts dd small { display: block; font-size: var(--step--1); font-weight: 400; font-stretch: 100%; text-transform: none; color: var(--text-muted); margin-top: var(--space-2); line-height: 1.4; }
@media (min-width: 64rem) { .facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .facts--4 > div + div { padding-left: var(--space-5); border-left: 1px solid var(--line); } }

/* Spec table */
.spec-table { width: 100%; border-top: 1px solid var(--line-strong); font-size: var(--step-0); }
.spec-table th, .spec-table td { text-align: left; padding: 0.95rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); width: 42%; padding-right: var(--space-4); }
.spec-table td { font-weight: 550; }
.spec-table tr.is-pending td, .spec-table tr.is-pending th { opacity: 0.75; }
.spec-table .tag { margin-left: var(--space-2); vertical-align: middle; }
.spec-source { font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-muted); margin-top: var(--space-4); letter-spacing: 0.04em; }

/* Check list */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 0.7rem 0 0.7rem 2rem; border-bottom: 1px solid var(--line); }
.check-list li::before { content: ""; position: absolute; left: 0.1rem; top: 1.2rem; width: 0.85rem; height: 0.45rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.check-list--plus li::before { width: 0.8rem; height: 0.8rem; border: 0; transform: none; top: 1.15rem; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; }

/* Cards (used sparingly; square, hairline) */
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); height: 100%; }
.card__media { overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); background: var(--graphite); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
a.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__title { font-size: var(--step-1); font-weight: 700; font-stretch: 108%; line-height: 1.15; margin: 0; }
.card__meta { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
a.card:hover { color: var(--text); border-color: var(--line-strong); }
a.card:hover .card__title { color: var(--accent); }

/* CTA band */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--red); color: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 22px); }
.cta-band__inner { display: grid; gap: var(--space-6); align-items: end; }
@media (min-width: 64rem) { .cta-band__inner { grid-template-columns: 7fr 5fr; } }
.cta-band h2 { font-size: var(--step-4); font-weight: 830; font-stretch: 118%; line-height: 0.94; margin: 0; color: var(--white); }
.cta-band p { color: rgba(255, 255, 255, 0.88); margin: var(--space-4) 0 0; max-width: 36em; }
.cta-band .btn { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--white); }
.cta-band .btn:hover { --btn-bg: var(--white); --btn-bd: var(--white); color: var(--ink); }
.cta-band .btn--ghost { --btn-bg: transparent; --btn-bd: rgba(255, 255, 255, 0.6); --btn-fg: var(--white); }
.cta-band .btn--ghost:hover { --btn-bg: var(--white); color: var(--red); }
.cta-band__contacts { display: grid; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--step--1); }
.cta-band__contacts a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.cta-band__contacts a:hover { text-decoration: underline; }

/* Contact options */
.contact-options { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.contact-option { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.contact-option .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: 0.2rem; }
.contact-option__label { display: block; font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.contact-option__value { display: block; font-size: var(--step-1); font-weight: 650; font-stretch: 105%; word-break: break-word; }
a.contact-option:hover .contact-option__value { color: var(--accent); }

/* FAQ */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-5); align-items: center;
	padding: var(--space-5) 0; font-size: var(--step-1); font-weight: 650; font-stretch: 104%; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after, details.faq[open] > summary::after { transform: rotate(45deg); color: var(--accent); }
.faq .faq__answer { padding: 0 0 var(--space-5); max-width: 46em; color: var(--text-muted); }
.faq .faq__answer > :last-child { margin-bottom: 0; }

/* Partner strip */
.partner-strip { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.partner-strip > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; place-items: center; padding: var(--space-5); min-height: 6rem; }
.partner-strip img { max-height: 3.2rem; width: auto; filter: grayscale(1) contrast(1.1); opacity: 0.85; transition: filter var(--dur), opacity var(--dur); background: transparent; }
.partner-strip > *:hover img { filter: none; opacity: 1; }
@media (min-width: 48rem) { .partner-strip { grid-template-columns: repeat(4, 1fr); } }

/* Review-only notices (never rendered for the public in production) */
.review-note {
	border: 1px dashed var(--warning); background: rgba(183, 121, 31, 0.08); color: var(--text);
	padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.55; margin-block: var(--space-5);
}
.review-note strong { color: var(--warning-text); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--2); display: block; margin-bottom: var(--space-2); }
.on-dark .review-note, .section--dark .review-note, .section--ink .review-note { color: var(--fog); }
.tag--pending { border-color: var(--warning); color: var(--warning-text); }

/* Media slot: labelled placeholder for an original that must be supplied */
.media-slot {
	position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio, 16 / 9); width: 100%;
	background: repeating-linear-gradient(135deg, var(--graphite) 0 12px, var(--carbon) 12px 24px); color: var(--ash);
	border: 1px dashed var(--gunmetal); text-align: center; padding: var(--space-5);
}
.media-slot__label { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; max-width: 30em; line-height: 1.6; }
.media-slot__label strong { display: block; color: var(--bone); font-size: var(--step--1); margin-bottom: var(--space-2); }

/* Video facade */
.video-facade { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity var(--dur); }
.video-facade button { position: absolute; inset: 0; z-index: 1; width: 100%; background: transparent; border: 0; color: var(--white); display: grid; place-items: center; }
.video-facade__play { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; background: var(--red); transition: transform var(--dur) var(--ease); }
.video-facade button:hover .video-facade__play { transform: scale(1.06); }
.video-facade button:hover + img, .video-facade:hover img { opacity: 1; }
.video-facade__label { position: absolute; left: var(--space-5); bottom: var(--space-5); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; text-align: left; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 10. Builds -------------------------------------------------------------- */
.build-feature { position: relative; display: grid; gap: var(--space-6); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); border-top: 1px solid var(--line); }
.build-feature:first-child { border-top: 0; padding-top: 0; }
/* Sized so a 12-letter name (SUPERCRUISER) fits one line at any width without breaking. */
.build-feature__name {
	font-size: clamp(2.1rem, 8.6vw, 9rem); font-weight: 880; font-stretch: 125%; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.03em;
	margin: 0; color: var(--text); white-space: nowrap;
}
.build-feature__name a { text-decoration: none; color: inherit; }
.build-feature__name a:hover { color: var(--accent); }
.build-feature__media { position: relative; overflow: hidden; }
.build-feature__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1200ms var(--ease); }
.build-feature__media:hover img { transform: scale(1.03); }
.build-feature__index { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--ink); color: var(--bone); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; padding: 0.4rem 0.7rem; text-transform: uppercase; }
.build-feature__sub { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
@media (min-width: 64rem) {
	.build-feature { grid-template-columns: 7fr 5fr; align-items: end; column-gap: clamp(2rem, 1rem + 3vw, 5rem); }
	.build-feature__name { grid-column: 1 / -1; }
	.build-feature--reverse .build-feature__media { order: 2; }
	.build-feature--reverse { grid-template-columns: 5fr 7fr; }
	.build-feature--text { grid-template-columns: minmax(0, 40rem); }
}

.build-hero { position: relative; isolation: isolate; min-height: min(92svh, 58rem); display: flex; align-items: flex-end; background: var(--ink); overflow: hidden; }
.build-hero .page-hero__media img, .build-hero .media-slot { height: 100%; aspect-ratio: auto; }
.build-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 11, 12, 0.7) 0%, rgba(10, 11, 12, 0) 24%), linear-gradient(0deg, rgba(10, 11, 12, 0.96) 0%, rgba(10, 11, 12, 0.35) 50%, rgba(10, 11, 12, 0.1) 100%); }
.build-hero__content { padding-block: calc(var(--header-h) + 4rem) var(--space-7); width: 100%; }
.build-hero__name { font-size: clamp(2.1rem, 8.6vw, 9rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.03em; color: var(--white); margin: 0 0 var(--space-5); }
.build-hero__name.is-long, .build-feature__name.is-long { font-size: clamp(2rem, 1.2rem + 3.6vw, 5.2rem); white-space: normal; line-height: 0.95; letter-spacing: -0.02em; }
.build-hero__sub { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fog); }

/* Headline figures in the build hero */
.build-figures { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); margin: var(--space-7) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.build-figures > div { display: flex; flex-direction: column-reverse; }
.build-figures dd { margin: 0; font-size: var(--step-4); font-weight: 860; font-stretch: 118%; line-height: 0.95; color: var(--white); letter-spacing: -0.02em; }
.build-figures dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fog); margin-top: var(--space-2); }

/* Build list */
/* Columns rather than grid, so groups of different lengths pack without gaps. */
.build-list { column-gap: clamp(2rem, 1rem + 3vw, 5rem); }
@media (min-width: 48rem) { .build-list { column-count: 2; } }
@media (min-width: 75rem) { .build-list { column-count: 3; } }
.build-list__group { break-inside: avoid; padding-bottom: var(--space-6); }
.build-list__title { font-size: var(--step-0); font-weight: 700; font-stretch: 110%; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-strong); margin-bottom: 0; }
.build-list__items { list-style: none; margin: 0; padding: 0; }
.build-list__items li { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); line-height: 1.45; }
.build-list__items li.is-progress span:first-child { color: var(--text-muted); }
.tag--progress { flex: none; border-color: var(--line-strong); color: var(--text-muted); font-size: 0.75rem; padding: 0.2em 0.5em; white-space: nowrap; }

.build-grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 11. Just Autos packages -------------------------------------------------- */
.cobrand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1em 0.4em; font-size: clamp(2.3rem, 1rem + 5.4vw, 7rem); font-weight: 880; font-stretch: 122%; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; color: var(--white); margin: 0; }
.cobrand > span { white-space: nowrap; }
.cobrand__x { font-weight: 300; font-stretch: 80%; color: var(--red-on-dark); font-size: 0.7em; }
.ja-wordmark { font-weight: 880; font-stretch: 125%; letter-spacing: -0.01em; }

.package-group + .package-group { margin-top: var(--space-8); }
.package-group__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); align-items: baseline; border-bottom: 1px solid var(--line-strong); padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.package-group__title { font-size: var(--step-2); margin: 0; }
.packages { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 64rem) { .packages--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .packages--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.package { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); padding: var(--space-6) var(--space-5) var(--space-5); }
.package--recommended { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.package__tier { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: var(--space-2); }
.package__name { font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.2rem); font-weight: 820; font-stretch: 116%; text-transform: uppercase; line-height: 0.98; margin-bottom: var(--space-3); padding-right: 7.5rem; }
.packages--1 { max-width: 34rem; }
@media (min-width: 64rem) { .packages--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .packages--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .packages--4 .package__name { padding-right: 0; margin-top: var(--space-5); } }
.package__headline { font-size: var(--step-2); font-weight: 820; font-stretch: 114%; line-height: 1; margin: 0 0 var(--space-4); color: var(--accent); }
.package-group__by { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin: 0 0 var(--space-2); }
.package-group__logo { height: 1.4rem; }
.compare--values td { font-size: var(--step--1); }
.package__level { color: var(--text-muted); font-size: var(--step--1); margin-bottom: var(--space-4); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.package__intended { margin-bottom: var(--space-5); }
.package__label { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); font-weight: 500; margin: var(--space-5) 0 var(--space-2); }
.package .check-list li { padding-block: 0.55rem; font-size: var(--step--1); }
.package .check-list li::before { top: 1rem; }
.package__compat { font-size: var(--step--1); color: var(--text-muted); border-left: 2px solid var(--warning); padding-left: var(--space-4); margin-top: var(--space-5); }
.package__price { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.package__foot { margin-top: auto; display: grid; gap: var(--space-2); }
.package__source { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.03em; margin-top: var(--space-3); overflow-wrap: anywhere; }
.package .tag--pending { position: absolute; top: var(--space-4); right: var(--space-4); }

.compare-wrap { overflow-x: auto; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.compare { min-width: 40rem; font-size: var(--step--1); }
.compare th, .compare td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); text-align: center; }
.compare thead th { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; font-size: var(--step--2); background: var(--graphite); color: var(--bone); position: sticky; top: 0; }
/* Package columns are centred, heading over values; the row-label column stays left-aligned. */
.compare thead th:first-child { text-align: left; }
.compare tbody th { text-align: left; font-weight: 550; position: sticky; left: 0; background: var(--surface); }
.compare td .icon { margin-inline: auto; color: var(--accent); }
.compare td.is-no { color: var(--text-muted); }
.compare caption { text-align: left; padding: var(--space-4) 1rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-muted); caption-side: bottom; }

.quote-panel { background: var(--graphite); border: 1px solid var(--line); padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; gap: var(--space-6); }
@media (min-width: 64rem) { .quote-panel { grid-template-columns: 7fr 5fr; align-items: center; } }
.quote-panel h3 { font-size: var(--step-3); font-stretch: 115%; text-transform: uppercase; font-weight: 800; }
.quote-panel__actions { display: grid; gap: var(--space-3); }

/* 12. Forms --------------------------------------------------------------- */
.usc-form-wrap { position: relative; }
.usc-form { display: grid; gap: var(--space-5); }
.usc-form__grid { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .usc-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); } .usc-field--wide { grid-column: 1 / -1; } }
.usc-field label, .usc-field legend { display: block; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-2); color: var(--text); }
.usc-field fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.usc-optional { color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; }
.usc-req { color: var(--accent); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="password"], input[type="search"], select, textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single {
	width: 100%; min-height: 3.25rem; padding: 0.8rem 0.95rem; background: var(--white); color: var(--ink);
	border: 1px solid var(--line-strong); border-radius: 0; font-size: 1rem; line-height: 1.4;
	transition: border-color var(--dur), box-shadow var(--dur); appearance: none; -webkit-appearance: none;
}
.on-dark input[type="text"], .on-dark input[type="email"], .on-dark input[type="tel"], .on-dark input[type="number"], .on-dark select, .on-dark textarea,
.section--dark input[type="text"], .section--dark input[type="email"], .section--dark input[type="tel"], .section--dark input[type="number"], .section--dark select, .section--dark textarea {
	background: var(--carbon); color: var(--bone); border-color: var(--gunmetal);
}
textarea { min-height: 8rem; resize: vertical; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235a6067' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--red); }
.usc-form-error { color: var(--red); font-size: var(--step--1); margin: var(--space-2) 0 0; font-weight: 550; }
.on-dark .usc-form-error, .section--dark .usc-form-error { color: var(--red-on-dark); }
.usc-form-error--summary { padding: var(--space-4); border: 1px solid var(--red); margin: 0; }
.usc-choices { display: grid; gap: var(--space-2); }
@media (min-width: 48rem) { .usc-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.usc-choices--inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.usc-choice { display: flex !important; gap: 0.7rem; align-items: flex-start; font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--step--1) !important; line-height: 1.45; cursor: pointer; padding: 0.55rem 0; margin: 0 !important; }
.usc-choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--red); }
.usc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.usc-form__note { font-size: var(--step--2); color: var(--text-muted); margin: 0; font-family: var(--font-mono); letter-spacing: 0.03em; }
.usc-form .btn { justify-self: start; min-width: 14rem; }
.usc-form-success { border: 1px solid var(--success); background: rgba(47, 125, 79, 0.08); padding: var(--space-5); margin-bottom: var(--space-5); }
.usc-form-success__title { font-weight: 700; font-size: var(--step-1); margin-bottom: var(--space-2); }

/* 13. Gallery & lightbox --------------------------------------------------- */
.gallery-grid, .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) !important; }
@media (min-width: 48rem) { .gallery-grid, .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) !important; } }
@media (min-width: 75rem) { .gallery-grid--4, .wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-grid { grid-auto-rows: clamp(7.5rem, 15vw, 15.5rem); grid-auto-flow: dense; }
.gallery-grid a, .wp-block-gallery.has-nested-images figure.wp-block-image { display: block; overflow: hidden; position: relative; margin: 0 !important; width: auto !important; }
.gallery-grid a { height: 100%; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100% !important; height: 100% !important; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 900ms var(--ease); }
.gallery-grid a:hover img, .wp-block-gallery.has-nested-images figure.wp-block-image:hover img { transform: scale(1.04); }
.gallery-grid .is-tall { grid-row: span 2; }
.gallery-grid .is-feature { grid-column: span 2; grid-row: span 2; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { display: none; }

.lightbox { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(6, 7, 8, 0.97); color: var(--bone); }
.lightbox::backdrop { background: rgba(6, 7, 8, 0.9); }
.lightbox__stage { position: absolute; inset: 4rem 0 5rem; display: grid; place-items: center; padding: 0 var(--gutter); }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: transparent; }
.lightbox__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--gutter); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; color: var(--ash); gap: var(--space-4); }
.lightbox__close { position: absolute; top: var(--space-4); right: var(--gutter); }
.lightbox__nav { display: flex; gap: var(--space-2); }
.lightbox .icon-btn { border-color: var(--line); }

/* 14. Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--fog); padding-top: var(--section); font-size: var(--step--1); }
.footer-grid { display: grid; gap: var(--space-7); padding-bottom: var(--space-8); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 2fr 3fr; } }
.footer-brand .site-logo img { width: 210px; }
.footer-brand p { color: var(--ash); max-width: 28em; margin-top: var(--space-5); }
.footer-coords { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; color: var(--ash); text-transform: uppercase; margin-top: var(--space-4); }
.footer-col h2 { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin-bottom: var(--space-5); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-col a { color: var(--bone); text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer-contact .icon { width: 1rem; height: 1rem; color: var(--red-on-dark); margin-top: 0.3rem; flex: none; }
.social-links { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.social-links a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); color: var(--bone); }
.social-links a:hover { border-color: var(--bone); color: var(--white); }
.social-links .icon { width: 1.1rem; height: 1.1rem; }
.footer-legal { border-top: 1px solid var(--line); padding-block: var(--space-5) var(--space-7); display: grid; gap: var(--space-4); color: var(--ash); font-size: var(--step--2); line-height: 1.6; }
@media (min-width: 64rem) { .footer-legal { grid-template-columns: 1fr auto; } }
.footer-legal a { color: var(--ash); }
.footer-credit { margin-top: var(--space-2); }
.footer-credit a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-credit a:hover { color: var(--white); }
.footer-legal nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.footer-mega { font-size: clamp(2.4rem, 9vw, 11rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(236, 231, 222, 0.16); margin: 0 0 var(--space-7); user-select: none; white-space: nowrap; overflow: hidden; }

/* WhatsApp button */
.whatsapp-fab {
	position: fixed; right: var(--gutter); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90;
	display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3.25rem; padding: 0 1.15rem 0 1rem;
	background: var(--ink); color: var(--white); border: 1px solid var(--gunmetal); text-decoration: none;
	font-size: var(--step--2); font-weight: 650; font-stretch: 110%; text-transform: uppercase; letter-spacing: 0.08em;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.whatsapp-fab .icon { width: 1.35rem; height: 1.35rem; color: #25d366; }
.whatsapp-fab:hover { color: var(--white); border-color: #25d366; }
@media (max-width: 30rem) { .whatsapp-fab span { display: none; } .whatsapp-fab { padding: 0; width: 3.25rem; justify-content: center; } }

/* Consent banner */
.usc-consent { position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 300; max-width: 40rem; background: var(--ink); color: var(--bone); border: 1px solid var(--gunmetal); padding: var(--space-5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); font-size: var(--step--1); }
.usc-consent a { color: var(--bone); }
.usc-consent__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.usc-consent .btn--ghost { --btn-fg: var(--bone); --btn-bd: var(--gunmetal); }

/* Block-built content (seeded pages + staff patterns) --------------------- */
.entry-content .section > .container > * + * { margin-top: var(--space-5); }
.entry-content .section > .container > .wp-block-heading + .wp-block-heading { margin-top: 0; }
.entry-content .section > .container > p.eyebrow { margin-bottom: var(--space-4); }
.entry-content .section > .container > p.eyebrow + * { margin-top: 0; }
.wp-block-columns { display: grid; gap: clamp(2rem, 1rem + 3vw, 5rem); margin-block: 0 var(--space-5); }
@media (min-width: 64rem) {
	.wp-block-columns { display: flex; align-items: flex-start; }
	.wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; }
	.wp-block-columns > .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
	.wp-block-columns.is-centred { align-items: center; }
}
.wp-block-column > * + * { margin-top: var(--space-4); }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-column > p.eyebrow + * { margin-top: 0; }
.wp-block-image { margin: 0; }
.wp-block-image img { width: 100%; height: auto; }
.wp-block-image.is-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.wp-block-image.is-wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-ghost .wp-block-button__link { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.wp-block-button.is-primary .wp-block-button__link { --btn-bg: var(--red); --btn-bd: var(--red); }
.section--dark .wp-block-button:not(.is-primary):not(.is-ghost) .wp-block-button__link, .section--ink .wp-block-button:not(.is-primary):not(.is-ghost) .wp-block-button__link { --btn-bg: var(--bone); --btn-fg: var(--ink); --btn-bd: var(--bone); }
.entry-content h2.wp-block-heading { font-size: var(--step-3); }
.entry-content .h-display { font-size: var(--step-5); }
.entry-content .wp-block-list.check-list { padding-left: 0; }

/* Service items: numbered two-column grid with hairlines */
.service-items { display: grid; border-top: 1px solid var(--line-strong); counter-reset: svc; }
@media (min-width: 48rem) { .service-items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 5rem); } }
@media (min-width: 75rem) { .service-items.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-item { counter-increment: svc; padding: var(--space-6) 0; border-bottom: 1px solid var(--line); position: relative; }
.service-item::before { content: counter(svc, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); letter-spacing: 0.1em; margin-bottom: var(--space-3); }
.service-item h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: var(--space-3); }
.service-item p { color: var(--text-muted); margin-bottom: var(--space-3); }
.service-item > :last-child { margin-bottom: 0; }
.brand-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
.brand-list li { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line-strong); padding: 0.35rem 0.6rem; margin: 0 !important; line-height: 1.4; }
.brand-list li::marker { content: ""; }

/* FAQ built from core Details blocks */
.faq .wp-block-details { border-bottom: 1px solid var(--line); margin: 0; }
.faq .wp-block-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-5); align-items: center; padding: var(--space-5) 0; font-size: var(--step-1); font-weight: 650; font-stretch: 104%; line-height: 1.3; }
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur) var(--ease); }
.faq .wp-block-details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq .wp-block-details > p { color: var(--text-muted); max-width: 46em; margin: 0 0 var(--space-5); }

/* Conversion option badges */
.conv-options .wp-block-column { border-top: 1px solid var(--line-strong); padding-top: var(--space-5); }
.wp-block-image.conv-badge img { width: clamp(6rem, 10vw, 9rem); height: auto; background: transparent; }

/* Co-branding: US CRUISERZ × Just Autos (Just Autos logo used with permission) */
.cobrand-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.cobrand-logos img { height: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); width: auto; background: transparent; }
.cobrand-logos__x { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 300; color: var(--red-on-dark); line-height: 1; }
.cobrand-logos--lg img { height: clamp(2.6rem, 1.6rem + 4vw, 5.5rem); }
.cobrand-logos--lg .cobrand-logos__x { font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem); }
.cobrand-logos--hero img { height: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.ja-logo { display: inline-block; height: 1.6rem; width: auto; background: transparent; vertical-align: middle; }
.quote-panel__logo { height: 2.4rem; margin-bottom: var(--space-5); }

/* Model coverage chips (Just Autos page) */
.wp-block-list.model-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; }
.wp-block-list.model-list li { margin: 0 !important; border: 1px solid var(--line-strong); padding: 0.55rem 0.9rem; font-weight: 650; font-stretch: 108%; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; }
.wp-block-list.model-list li a { text-decoration: none; color: inherit; }
.wp-block-list.model-list li:hover { border-color: var(--accent); }

/* Branches */
.branches { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 48rem) { .branches { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); } }
.branch { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
.branch__index { font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); margin: 0; }
.branch__name { font-size: var(--step-1); text-transform: uppercase; font-stretch: 110%; margin: 0; }
.branch__address { margin: 0; }
.branch__note { margin: 0; font-size: var(--step--1); }
.branch .link-arrow { align-self: flex-start; margin-top: auto; }
.contact-option__note { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: 0.15rem; }

/* Numbered steps (quote process) */
.wp-block-list.steps { list-style: none; padding: 0 !important; margin: var(--space-6) 0; counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 64rem) { .section .container > .wp-block-list.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); } }
.wp-block-list.steps li { counter-increment: step; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); margin: 0 !important; color: var(--text-muted); }
.wp-block-list.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); margin-bottom: var(--space-2); }
.wp-block-list.steps li strong { color: var(--text); display: block; font-size: var(--step-1); font-stretch: 104%; margin-bottom: var(--space-1); }

/* Price/notice line used on the conversions page */
.price-line { font-family: var(--font-mono); font-size: var(--step-0); letter-spacing: 0.04em; border-top: 1px solid var(--line); padding-top: var(--space-4); }

/* 15. Utilities ----------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.rule-top { border-top: 1px solid var(--line-strong); padding-top: var(--space-5); }
.coords { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ratio-wide img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pagination, .nav-links { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-7); }
.page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.6rem; border: 1px solid var(--line); text-decoration: none; font-family: var(--font-mono); font-size: var(--step--1); }
.page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.disclaimer { font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; max-width: 60em; }
.legal { max-width: var(--container-narrow); }
.legal > * { margin-block: 0 var(--space-4); }
.legal h2 { margin-top: var(--space-8); font-size: var(--step-2); }
.legal h3 { margin-top: var(--space-6); font-size: var(--step-1); }
.legal-notice { margin-block: var(--space-6) var(--space-8); padding: var(--space-5) var(--space-6); border-left: 3px solid var(--accent); background: var(--surface-2, rgba(0, 0, 0, 0.04)); }
.legal-notice h3 { margin-top: 0; }
.legal-notice p:last-child { margin-bottom: 0; }
.legal-list { list-style: lower-alpha; }

/* 16. Motion -------------------------------------------------------------- */
/* Everything here is skipped when the visitor's device asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* A soft fade between pages (browsers with cross-page view transitions; others simply load the page).
	   The header is its own layer, so it stays put while the page underneath fades. */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: usc-fade-out 180ms var(--ease) both; }
	::view-transition-new(root) { animation: usc-fade-in 380ms var(--ease) both; }
	.site-header { view-transition-name: usc-header; }
	@keyframes usc-fade-out { to { opacity: 0; } }
	@keyframes usc-fade-in { from { opacity: 0; } }
	@keyframes usc-rise { from { opacity: 0; transform: translateY(16px); } }

	/* Content below the first screen fades up as it scrolls into view (main.js adds .reveal; grids stagger). */
	.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--reveal-delay, 0ms); }
	.js .reveal.is-visible { opacity: 1; transform: none; }
	.js .reveal-delay-1 { --reveal-delay: 90ms; }
	.js .reveal-delay-2 { --reveal-delay: 180ms; }

	/* Photos fade in as they finish loading instead of popping in. */
	.js img.img-fade { opacity: 0; transition: opacity 600ms var(--ease); }
	.js img.img-fade.is-loaded { opacity: 1; }

	/* Page headers: the title, intro and buttons rise in one after another. */
	.page-hero .container > * { animation: usc-rise 700ms var(--ease) backwards; }
	.page-hero .container > :nth-child(2) { animation-delay: 60ms; }
	.page-hero .container > :nth-child(3) { animation-delay: 120ms; }
	.page-hero .container > :nth-child(4) { animation-delay: 180ms; }
	.page-hero .container > :nth-child(n+5) { animation-delay: 240ms; }

	/* Homepage hero: the photo settles in; the first slide's text rises in on arrival, and on the rotating hero
	   each new slide's text follows its photo in. */
	.hero__slide.is-active .hero__media img { animation: hero-settle 2200ms var(--ease) both; }
	@keyframes hero-settle { from { transform: scale(1.05); } to { transform: none; } }
	.hero__slide:first-child .hero__content > * { animation: usc-rise 800ms var(--ease) backwards; }
	.hero__slide:first-child .hero__content > :nth-child(2) { animation-delay: 90ms; }
	.hero__slide:first-child .hero__content > :nth-child(3) { animation-delay: 180ms; }
	.hero__slide:first-child .hero__content > :nth-child(n+4) { animation-delay: 270ms; }
	.hero--slider.is-ready .hero__content > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
	.hero--slider.is-ready .hero__slide.is-active .hero__content > * { opacity: 1; transform: none; }
	.hero--slider.is-ready .hero__slide.is-active .hero__content > :nth-child(1) { transition-delay: 250ms; }
	.hero--slider.is-ready .hero__slide.is-active .hero__content > :nth-child(2) { transition-delay: 330ms; }
	.hero--slider.is-ready .hero__slide.is-active .hero__content > :nth-child(3) { transition-delay: 410ms; }
	.hero--slider.is-ready .hero__slide.is-active .hero__content > :nth-child(n+4) { transition-delay: 490ms; }

	/* Search and the photo viewer fade in and out; photos in the viewer crossfade when you move between them. */
	.search-dialog, .lightbox { opacity: 0; transition: opacity 260ms var(--ease), overlay 260ms allow-discrete, display 260ms allow-discrete; }
	.search-dialog[open], .lightbox[open] { opacity: 1; }
	@starting-style { .search-dialog[open], .lightbox[open] { opacity: 0; } }
	.search-dialog::backdrop, .lightbox::backdrop { opacity: 0; transition: opacity 260ms var(--ease), overlay 260ms allow-discrete, display 260ms allow-discrete; }
	.search-dialog[open]::backdrop, .lightbox[open]::backdrop { opacity: 1; }
	@starting-style { .search-dialog[open]::backdrop, .lightbox[open]::backdrop { opacity: 0; } }
	.lightbox__stage img { transition: opacity 260ms var(--ease); }
	.lightbox__stage img.is-swapping { opacity: 0; }

	/* FAQ answers and phone-menu sections open and close smoothly (browsers that can animate to "auto"). */
	@supports (interpolate-size: allow-keywords) {
		:root { interpolate-size: allow-keywords; }
		.faq details::details-content, details.faq::details-content { block-size: 0; overflow-y: clip; transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete; }
		.faq details[open]::details-content, details.faq[open]::details-content { block-size: auto; }
		.mobile-nav .sub-menu { display: block; block-size: 0; padding-block: 0; margin-bottom: 0; overflow: clip; visibility: hidden; transition: block-size 300ms var(--ease), padding 300ms var(--ease), margin 300ms var(--ease), visibility 0s linear 300ms; }
		.mobile-nav li.is-open > .sub-menu { block-size: auto; padding-bottom: var(--space-4); margin-bottom: var(--space-4); visibility: visible; transition: block-size 300ms var(--ease), padding 300ms var(--ease), margin 300ms var(--ease), visibility 0s; }
	}
}
/* Eight top-level menu items (Brands added 5 Nov 2026): tighter spacing until there is room. */
@media (min-width: 80rem) and (max-width: 89.99rem) {
	.primary-nav > ul > li > a, .primary-nav .submenu-toggle { padding-inline: 0.36rem; letter-spacing: 0.02em; font-size: 0.76rem; }
	.primary-nav > ul > li.menu-item-has-children > a { padding-right: 0.05rem; }
	.primary-nav .submenu-toggle { padding-inline: 0.05rem 0.34rem; }
	.site-header__inner { gap: var(--space-3); }
	.site-logo img { width: 170px; }
}

/* Brands we offer ([usc_brands]) and brand store pages --------------------- */
.brand-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.brand-nav a {
	display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; padding: 0.5rem 0.95rem;
	border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--text);
	font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase;
}
.brand-nav a:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.brand-nav__count { opacity: 0.6; }
.brand-group { scroll-margin-top: calc(var(--header-h, 5rem) + 1rem); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.brand-group__head { display: grid; gap: var(--space-2, 0.5rem); margin-bottom: var(--space-5); }
.brand-group__head h2 { font-size: var(--step-2); margin: 0; }
.brand-group__head p { margin: 0; }
.brand-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr)); }
@media (min-width: 48rem) { .brand-grid { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); } }
@media (max-width: 47.99rem) { .brand-tile__name { padding-inline: var(--space-3); font-size: var(--step--1); } .brand-tile__what { padding-inline: var(--space-3); } }
.brand-tile__link {
	display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text);
	background: var(--white); border: 1px solid var(--line); transition: border-color 160ms var(--ease, ease), transform 160ms var(--ease, ease);
}
.brand-tile__link:hover { border-color: var(--ink); transform: translateY(-2px); }
.brand-tile__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.brand-tile__logo { aspect-ratio: 2 / 1; display: grid; place-items: center; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.brand-tile__img { width: 100%; height: 100%; object-fit: contain; }
.brand-tile__logo--text { padding: var(--space-4); }
.brand-tile__wordmark { font-weight: 850; font-stretch: 118%; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; font-size: 1.15rem; text-align: center; color: var(--ink); }
.brand-tile__name { padding: var(--space-3) var(--space-4) 0; font-weight: 700; }
.brand-tile__what { padding: 0.15rem var(--space-4) var(--space-4); font-size: var(--step--1); color: var(--text-muted); line-height: 1.4; }
.brand-tile__link > :last-child { padding-bottom: var(--space-4); }
.brand-bar { display: grid; gap: var(--space-5); align-items: center; margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .brand-bar--logo { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } }
.brand-bar__logo { aspect-ratio: 2 / 1; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
.brand-bar__logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-bar__links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--step--1); }
.brand-empty { max-width: 40em; }
.brand-empty h2 { font-size: var(--step-2); }

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

@media print {
	.site-header, .utility-bar, .site-footer, .whatsapp-fab, .cta-band, .mobile-nav, .usc-consent { display: none !important; }
	body { background: #fff; color: #000; }
}