/* ============================================================================
   v6 homepage — photograph-led storefront.
   ----------------------------------------------------------------------------
   Replaces v5-home.css + v5-atmosphere.css on the front page only. Site chrome
   (header, announcement bar, drawer, footer) is untouched and still comes from
   v5-chrome.css, so nothing here may leak past `.v6`.

   Every selector in this file is scoped under `.v6`. That is not style — it is
   the containment guarantee that lets this ship without a full-site regression
   pass.
   ========================================================================== */

.v6 {
	--v6-paper: #FFFFFF;
	--v6-warm: #F2ECE4;      /* section band */
	--v6-sand: #E4D8C8;      /* the one deeper warm band */
	--v6-line: #E4E6EA;
	--v6-ink: #101215;
	--v6-ink-2: #2E3238;
	--v6-mute: #5C6068;
	--v6-faint: #6B7078;
	--v6-blue: #0E2CCB;      /* sampled from the logo file, not chosen */
	--v6-blue-lift: #8FA2FF; /* the only blue that clears contrast on navy */
	--v6-navy: #001032;      /* sampled from parts-dark.jpg's own ground */
	--v6-deal: #C8290B;

	--v6-r: 4px;
	--v6-pad: clamp(20px, 4.4vw, 64px);
	--v6-band: clamp(56px, 7vw, 88px);

	--v6-ease: cubic-bezier(.22, 1, .36, 1);

	background: var(--v6-paper);
	color: var(--v6-ink);
	font-family: var(--mk-font);
	font-size: 16px;
	line-height: 1.5;
}

.v6 *,
.v6 *::before,
.v6 *::after { box-sizing: border-box; }

.v6 ul,
.v6 ol { margin: 0; padding: 0; list-style: none; }

.v6 p { margin: 0; }

.v6 img { max-width: 100%; }

.v6-wrap {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--v6-pad);
}

/* ---------------------------------------------------------------- type --- */

.v6-h1,
.v6-h2,
.v6-eng-t,
.v6-kit-t,
.v6-part-symptom {
	font-family: var(--mk-display);
	font-weight: 700;
	letter-spacing: -0.035em;
	margin: 0;
	text-wrap: balance;
}

.v6-h1,
.v6-h2,
.v6-eng-t,
.v6-kit-t,
.v6-part-symptom,
.v6-why-t { color: inherit; }

.v6-h1 { font-size: clamp(40px, 6vw, 86px); line-height: .94; font-stretch: 92%; }
.v6-h2 { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.02; font-stretch: 94%; }

.v6-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--v6-blue);
}
.v6-eyebrow--lift { color: var(--v6-blue-lift); }

.v6-lede {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.55;
	color: var(--v6-ink-2);
	max-width: 52ch;
}
.v6-lede--dark { color: rgba(255,255,255,.74); }

.v6-sku { font-size: 12px; color: var(--v6-faint); }

/* Woo prints price markup we do not control; normalise it rather than fight it. */
.v6 .price,
.v6 ins { text-decoration: none; background: none; }
.v6 del {
	color: var(--v6-faint);
	font-weight: 400;
	font-size: .62em;
	margin-inline-end: .35em;
}
.v6 .woocommerce-Price-amount { white-space: nowrap; }

.v6-rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--v6-ink);
}
.v6-rating b { font-weight: 600; }
.v6-rating-n { color: var(--v6-faint); font-weight: 400; }

/* ------------------------------------------------------------- buttons --- */

.v6-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border-radius: var(--v6-r);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	white-space: nowrap;
	transition: background-color .2s var(--v6-ease), color .2s var(--v6-ease), border-color .2s var(--v6-ease);
}
.v6-btn--primary { background: var(--v6-blue); color: #FFF; }
.v6-btn--primary:hover { background: #0A22A4; color: #FFF; }
.v6-btn--outline { border-color: currentColor; color: var(--v6-ink); }
.v6-btn--outline:hover { background: var(--v6-ink); color: #FFF; border-color: var(--v6-ink); }
.v6-btn--ink { background: var(--v6-ink); color: #FFF; }
.v6-btn--ink:hover { background: #000; color: #FFF; }
.v6-btn--invert { background: #FFF; color: var(--v6-blue); flex-shrink: 0; }
.v6-btn--invert:hover { background: #EDEFFB; color: var(--v6-blue); }
.v6-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; flex-shrink: 0; }
.v6-btn--block { width: 100%; }

.v6-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--v6-blue);
	text-decoration: none;
}
.v6-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.v6-swipe { transition: gap .28s var(--v6-ease); }
.v6-swipe:hover { gap: 16px; }

.v6 a:focus-visible,
.v6 .v6-btn:focus-visible {
	outline: 2px solid var(--v6-blue);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- hero --- */

.v6-hero {
	position: relative;
	min-height: clamp(460px, 52vw, 660px);
	display: flex;
	align-items: stretch;
	overflow: hidden;
}
.v6-hero > picture,
.v6-hero > .v6-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.v6-hero > picture > img,
.v6-hero > .v6-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 46%;
	display: block;
}

/* Legibility, not decoration: the wall behind the copy is a warm mid-tone and
   ink on it misses 4.5:1 without this. */
.v6-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(255,255,255,.92) 0%,
		rgba(255,255,255,.80) 30%,
		rgba(255,255,255,.12) 56%,
		rgba(255,255,255,0) 68%);
}

.v6-hero-inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 44px);
}
.v6-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 26px);
	max-width: 620px;
}
.v6-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.v6-offer {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	background: #FFF;
	border-radius: var(--v6-r);
	box-shadow: 0 6px 24px rgba(16,18,21,.18);
}
.v6-offer-name { font-size: 15px; font-weight: 600; }
.v6-offer-price {
	font-family: var(--mk-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* Hero entrance. One orchestrated sequence on load rather than scattered
   micro-interactions, and a slow settle on the photograph behind it. */
@keyframes v6-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes v6-settle { from { transform: scale(1.06); } to { transform: scale(1); } }

.v6-e1 { animation: v6-rise .75s var(--v6-ease) both; }
.v6-e2 { animation: v6-rise .75s var(--v6-ease) .09s both; }
.v6-e3 { animation: v6-rise .75s var(--v6-ease) .18s both; }
.v6-e4 { animation: v6-rise .75s var(--v6-ease) .27s both; }
.v6-e5 { animation: v6-rise .75s var(--v6-ease) .40s both; }
.v6-hero-img,
.v6-hero picture > img { animation: v6-settle 2.4s var(--v6-ease) both; }

/* ------------------------------------------------------------- marquee --- */

/* THE TRUST ROW. Same band, same ink ground, same position in the page as the
   marquee it replaces — the change is that it holds still and says four things
   instead of scrolling seven. Kept as a grid rather than a flex row so the four
   items share the width evenly and the longest note cannot squeeze the others.
   The .v6-marquee rules below are deliberately retained: reverting the block in
   front-page.php is enough to bring the marquee back. */
.v6-trust {
	background: var(--v6-ink);
	color: #FFF;
	padding-block: 22px;
}
.v6-trust-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.v6-trust-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-left: 15px;
	border-left: 2px solid rgba(255,255,255,.22);
}
.v6-trust-item strong {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.005em;
}
.v6-trust-item span {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255,255,255,.66);
}

.v6-marquee {
	display: flex;
	overflow: hidden;
	background: var(--v6-ink);
	color: #FFF;
	padding-block: 15px;
	font-size: 14px;
	font-weight: 500;
}
.v6-mq-track { display: flex; animation: v6-mq 38s linear infinite; }
.v6-mq-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; flex-shrink: 0; }
.v6-mq-dot {
	width: 5px; height: 5px; flex-shrink: 0;
	background: rgba(255,255,255,.42);
	transform: rotate(45deg);
}
@keyframes v6-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.v6-marquee:hover .v6-mq-track { animation-play-state: paused; }

/* ----------------------------------------------------------------- why --- */

.v6-why {
	position: relative;
	background: var(--v6-navy);
	color: #FFF;
	overflow: hidden;
	padding-block: clamp(56px, 7vw, 92px);
}
.v6-why > picture,
.v6-why > .v6-why-img {
	position: absolute;
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: min(760px, 62vw);
	max-width: none;
}
.v6-why > picture > img,
.v6-why > .v6-why-img { width: 100%; height: auto; display: block; }
.v6-why-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--v6-navy) 0%,
		var(--v6-navy) 34%,
		rgba(0,16,50,.78) 50%,
		rgba(0,16,50,.10) 78%);
}
.v6-why-inner { position: relative; }
.v6-why-lead { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.v6-why-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 44px;
	max-width: 720px;
	padding-top: 48px;
}
.v6-why-t { margin: 0 0 7px; font-size: 17px; font-weight: 600; color: #FFF; }
.v6-why-d { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------- heads --- */

.v6-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 34px;
}
.v6-head--stack { flex-direction: column; align-items: flex-start; gap: 14px; }
.v6-head > div { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.v6-head-note {
	font-size: 16px;
	line-height: 1.55;
	max-width: 360px;
	color: var(--v6-ink-2);
	flex-shrink: 0;
}

.v6-more { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding-top: 28px; }
.v6-more-note { font-size: 15px; color: var(--v6-mute); }

/* --------------------------------------------------------------- cards --- */

.v6-card {
	background: #FFF;
	border-radius: var(--v6-r);
	overflow: hidden;
	transition: transform .28s var(--v6-ease), box-shadow .28s ease;
}
.v6-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(16,18,21,.13); }

/* ------------------------------------------------------- find your part --- */

.v6-parts { padding-block: clamp(56px, 7vw, 88px) 0; }
.v6-part-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.v6-part {
	display: flex;
	border: 1px solid var(--v6-line);
	border-radius: var(--v6-r);
	overflow: hidden;
	transition: transform .28s var(--v6-ease), box-shadow .28s ease;
}
.v6-part:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(16,18,21,.13); }

/* One identical box for every part photograph. The parts range from a 2:1 base
   to a 1:6 gas lift; capping each by its own max-width (which the design draft
   did) rendered them at 5x different areas and drifted them 33px vertically. */
.v6-part-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 158px;
	flex-shrink: 0;
	background: #FFF;
	border-right: 1px solid #EFF0F2;
}
.v6-part-media img {
	width: 132px;
	height: 132px;
	object-fit: contain;
}
.v6-part-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	flex-grow: 1;
	min-width: 0;
}
.v6-part-symptom { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.v6-part-symptom a { color: inherit; text-decoration: none; }
.v6-part-symptom a:hover { color: var(--v6-blue); }
.v6-part-name { font-size: 15px; font-weight: 600; }
.v6-part-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v6-warranty {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 3px;
	border: 1px solid #C9CDD3;
	color: var(--v6-ink-2);
}
.v6-warranty--long { background: var(--v6-blue); border-color: var(--v6-blue); color: #FFF; font-weight: 700; }
.v6-part-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
}
/* Stacked, not inline: a was-price beside the current one plus the button
   overran the card on the two products that are actually on sale. */
.v6-part-price {
	display: flex;
	flex-direction: column;
	font-family: var(--mk-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	min-width: 0;
}
.v6-part-price del { display: block; font-size: 13px; margin: 0; }

/* --------------------------------------------------------- engineering --- */

.v6-eng {
	margin-top: clamp(56px, 7vw, 88px);
	padding-block: clamp(52px, 6vw, 76px);
	background: var(--v6-warm);
}
.v6-eng-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v6-eng-media { aspect-ratio: 424 / 300; overflow: hidden; }
.v6-eng-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v6-eng-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; }
.v6-eng-t { font-size: 25px; line-height: 1.08; letter-spacing: -0.02em; }
.v6-spec { font-size: 14px; color: var(--v6-mute); }

/* ---------------------------------------------------------------- kits --- */

.v6-kits { padding-block: clamp(56px, 7vw, 88px) 0; }
.v6-kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v6-kit {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 26px;
	border: 1px solid var(--v6-line);
}
.v6-kit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v6-offer-tag {
	background: var(--v6-deal);
	color: #FFF;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 3px;
}
.v6-kit-t { font-size: 28px; line-height: 1.05; letter-spacing: -0.025em; }
.v6-kit-t a { color: inherit; text-decoration: none; }
.v6-kit-t a:hover { color: var(--v6-blue); }
.v6-kit-d { font-size: 15px; line-height: 1.5; color: var(--v6-ink-2); flex-grow: 1; }
.v6-kit-price {
	font-family: var(--mk-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- mesh --- */

.v6-mesh {
	margin-top: clamp(56px, 7vw, 88px);
	padding-block: clamp(52px, 6vw, 76px);
	background: var(--v6-sand);
}
.v6-mesh-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 40px;
	align-items: center;
}
.v6-mesh-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	background: #FFF;
	border-radius: var(--v6-r);
	padding: 20px;
}
.v6-mesh-media img { max-height: 300px; width: auto; object-fit: contain; }
.v6-mesh-copy { display: flex; flex-direction: column; gap: 20px; }
.v6-mesh-copy p { font-size: 17px; line-height: 1.6; max-width: 58ch; color: var(--v6-ink-2); }

/* --------------------------------------------------------------- close --- */

.v6-close { background: var(--v6-blue); color: #FFF; padding-block: clamp(44px, 5vw, 64px); }
.v6-close-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}
.v6-close-note { font-size: 16px; color: rgba(255,255,255,.82); margin-top: 10px; }

/* ------------------------------------------------------------- reveals --- */
/* The markup ships VISIBLE. v6-home.js adds .v6-rv-armed, which is what hides
   it. If the script never runs the page simply reads with no animation — the
   failure mode is never a blank section. */

.v6-rv-armed .v6-rv { opacity: 0; transform: translateY(24px); }
.v6-rv-armed .v6-rv.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .8s var(--v6-ease), transform .8s var(--v6-ease);
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
	.v6-part-grid,
	.v6-eng-grid,
	.v6-kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v6-mesh-grid { grid-template-columns: 1fr; }
	.v6-why-img, .v6-why picture { opacity: .35; right: -140px; }
}

@media (max-width: 860px) {
	.v6-hero-inner { flex-direction: column; align-items: stretch; }
	.v6-offer { align-self: flex-start; }

	/* THE CHAIR HAS TO BE IN THE FRAME.
	   The source is a 3:2 landscape with the chair in its right third. Cropped
	   to a portrait box at 50% the visible slice is the wall and a table leg —
	   the product was absent from the first screen on every phone, which the
	   conversion audit (2026-08-21) caught and the desktop-only check missed.
	   Pulling the origin right puts the chair back; the taller box gives the
	   copy somewhere to sit above it instead of on top of it.
	   Better still is a purpose-shot portrait crop as a <source media> — this
	   is the fix that works with the asset that exists. */
	.v6-hero { min-height: clamp(560px, 118vw, 720px); }
	.v6-hero > picture > img,
	.v6-hero > .v6-hero-img { object-position: 74% 42%; }

	.v6-hero-scrim {
		background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.42) 62%, rgba(255,255,255,.10) 100%);
	}
	.v6-head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.v6-head-note { max-width: none; }
	.v6-why-grid { grid-template-columns: 1fr; padding-top: 32px; }
	.v6-close-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 640px) {
	.v6-part-grid,
	.v6-eng-grid,
	.v6-kit-grid { grid-template-columns: 1fr; }
	.v6-part { flex-direction: column; }
	.v6-part-media {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid #EFF0F2;
		padding-block: 18px;
	}
	.v6-part-foot { flex-wrap: wrap; }
	.v6-trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
}

@media (max-width: 420px) {
	.v6-trust-row { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.v6-mq-track,
	.v6-e1, .v6-e2, .v6-e3, .v6-e4, .v6-e5,
	.v6-hero-img, .v6-hero picture > img { animation: none; }
	.v6-card:hover, .v6-part:hover { transform: none; }
	.v6-rv-armed .v6-rv,
	.v6-rv-armed .v6-rv.is-in { opacity: 1; transform: none; transition: none; }
}