/* Johnny on the Go: the home page.
   Loaded on the front page only. Section order: hero, hub, how, garage, services, reviews, towns, close.
   Every section sits on the shared column edge (--edge-l / --edge-r from style.css); fields of colour run
   to the screen edges. Motion: a load sequence on the hero, a staggered entrance for the parts of every
   section (.rv), shutters on the fleet photographs, sheets that stack, and photographs that drift with
   the scroll. Everything is visible without the script and under reduced motion. */

:root {
	/* Six sizes for the whole page. */
	--fs-xxl: var(--step-shout);
	--fs-xl: clamp(2.5rem, 1.2rem + 4vw, 5.5rem);
	--fs-l: clamp(1.75rem, 1.1rem + 1.9vw, 3.25rem);
	--fs-m: clamp(1.25rem, .95rem + .8vw, 1.625rem);
	--fs-body: 1.125rem;
	--fs-small: .9375rem;
	/* Brand red for large type and fields; these two carry small red text at a readable contrast. */
	--red-on-dark: #FF5A4E;
	--red-on-light: #B3170F;
	--bone: #E7E7E4;
}

.home-main > * { margin-block: 0 !important; }
.home-main section > *, .home-main section .wp-block-group > * { margin-block: 0; }
.sec-title { font: 800 var(--fs-xl)/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); max-width: 18ch; text-wrap: balance; }

/* ---- Hero: poster field over a red band, the trophy standing on the band like a podium ---- */
.hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: max(660px, 100svh); overflow: clip; view-timeline-name: --hero; }
.hero .field { position: relative; min-height: 0; }
.hero .shout { position: absolute; left: var(--edge-l); top: 18%; z-index: 1; margin: 0; font: 800 var(--fs-xxl)/.84 var(--display); text-transform: uppercase; letter-spacing: -.015em; }
.ln { display: block; overflow: clip; padding-bottom: .05em; margin-bottom: -.05em; }
.ln > span { display: block; }
.hero-rating { position: absolute; left: var(--edge-l); bottom: 48px; display: flex; align-items: baseline; gap: 14px; max-width: 34ch; font: 500 var(--fs-body)/1.3 var(--text); }
.hero-rating strong { font: 800 var(--fs-l)/.9 var(--display); color: var(--red); }
.hero .trophy { position: absolute; z-index: 2; right: calc(var(--edge-r) + 3vw); bottom: -12px; height: 80%; max-height: 760px; width: auto; aspect-ratio: 900 / 1366; margin: 0; }
.hero .trophy img { width: 100%; height: 100%; object-fit: contain; }
.hero .band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px var(--edge-r) 26px var(--edge-l); background: var(--red); }
.hero .band p { max-width: 46ch; font: 500 var(--fs-m)/1.3 var(--text); color: #fff; }

/* ---- Hub: the line-up, with a photograph that follows the row you point at ---- */
.hub { padding: clamp(96px, 11vw, 176px) var(--edge-r) clamp(96px, 10vw, 160px) var(--edge-l); }
.hub-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
.lineup { grid-column: 1 / 9; min-width: 0; }
.lineup .sec-title { margin-bottom: 40px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 32% minmax(0, 1fr) 5.4em 24px; align-items: baseline; column-gap: 20px; position: relative; padding: 22px 16px 22px 0; color: var(--ink); text-decoration: none; font: 700 var(--fs-m)/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; transition: background-color 180ms ease, padding-left 300ms var(--ease-out); }
.row .when, .row .price { color: var(--soft); }
.row .price { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.row .go { justify-self: end; align-self: center; width: 22px; height: 22px; color: var(--red); transition: transform 300ms var(--ease-out); }
.row .thumb { display: none; }
.row:hover, .row.is-active { background: var(--ground-2); padding-left: 16px; color: var(--ink); }
.row:hover .go, .row.is-active .go { transform: translateX(5px); }
.row:hover .price, .row.is-active .price, .row:hover .when, .row.is-active .when { color: var(--ink); }
.panel { grid-column: 9 / 13; display: grid; gap: 14px; }
.frame { position: relative; aspect-ratio: 4 / 5; overflow: clip; background: var(--ground-2); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 2.4s var(--ease-out); }
.frame img.on { opacity: 1; transform: none; }
.panel-note { margin: 0; min-height: 3.2em; font-size: var(--fs-body); }

/* ---- How: four lines that step down and across; the photograph holds the right-hand side ---- */
.how { padding: clamp(96px, 10vw, 160px) var(--edge-r) clamp(96px, 10vw, 160px) var(--edge-l); background: var(--ground-2); }
.how .sec-title { margin-bottom: clamp(48px, 6vw, 88px); }
.stair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: clamp(40px, 4.5vw, 64px); align-items: start; }
.stair-step { grid-column: 1 / 7; }
.stair-step h3 { font: 800 var(--fs-l)/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.stair-step p { max-width: 38ch; margin-top: 14px !important; font-size: var(--fs-body); line-height: 1.5; }
.stair-step:nth-child(2) { margin-left: 6% !important; }
.stair-step:nth-child(3) { margin-left: 12% !important; }
.stair-step:nth-child(4) { margin-left: 18% !important; }
.stair-step:nth-child(4) h3 { color: var(--red); }
/* 16:9, the photograph's own framing, so the whole truck stays in view; no drift on this one for the same reason. */
.how-photo { grid-column: 7 / 13; grid-row: 1 / 5; align-self: start; position: sticky; top: 14vh; margin: 0 !important; aspect-ratio: 16 / 9; overflow: clip; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Garage: Optimus and Ironhide on two fields, edge to edge; Sentinel underneath ---- */
.garage { padding-top: clamp(96px, 11vw, 176px); }
.garage-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; padding: 0 var(--edge-r) clamp(40px, 5vw, 72px) var(--edge-l); }
.garage-head .sec-title { grid-column: 1 / 8; }
.garage-intro { grid-column: 8 / 13; font-size: var(--fs-m); line-height: 1.4; }
.rigs { display: grid; grid-template-columns: 1fr 1fr; }
.rig { display: flex; flex-direction: column; padding-bottom: clamp(40px, 4vw, 64px); }
.rig-optimus { background: var(--ground-2); padding-left: var(--edge-l); }
.rig-ironhide { background: var(--bone); color: var(--ground); padding-right: var(--edge-r); }
.rig-optimus > :not(.rig-photo) { padding-right: 40px; }
.rig-ironhide > :not(.rig-photo) { padding-left: 40px; }
.rig-photo { margin: 0 !important; aspect-ratio: 5 / 4; overflow: clip; }
.rig-optimus .rig-photo { margin-left: calc(-1 * var(--edge-l)) !important; }
.rig-ironhide .rig-photo { margin-right: calc(-1 * var(--edge-r)) !important; }
.rig-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rig-name { margin-top: 32px !important; font: 800 var(--fs-xl)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: inherit; }
.rig-kind { margin-top: 10px !important; font: 700 var(--fs-m)/1.2 var(--display); text-transform: uppercase; color: var(--red-on-dark); }
.rig-ironhide .rig-kind { color: var(--red-on-light); }
.rig-text { margin-top: 14px !important; max-width: 40ch; font-size: var(--fs-body); line-height: 1.5; }
.rig-sentinel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; padding: clamp(40px, 5vw, 72px) var(--edge-r) 0 var(--edge-l); }
.rig-sentinel .rig-photo { grid-column: 1 / 8; aspect-ratio: 16 / 9; }
.sentinel-text { grid-column: 8 / 13; }
.sentinel-text .rig-name { margin-top: 0 !important; font-size: var(--fs-l); }

/* ---- Services: three sheets that stack as you scroll. Each sheet's contents recede as the next slides
   over it, so nothing is ever left lying underneath another layer. ---- */
.svc { padding: clamp(96px, 11vw, 176px) 0 clamp(64px, 7vw, 112px); }
.svc > .sec-title { padding: 0 var(--edge-r) 0 var(--edge-l); margin-bottom: clamp(40px, 5vw, 64px); max-width: calc(18ch + var(--edge-l)); box-sizing: content-box; }
.sheets { position: relative; timeline-scope: --sheet-2, --sheet-3; }
.sheet { position: sticky; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 88px auto 1fr; column-gap: 32px; height: min(66svh, 620px); padding: 0 var(--edge-r) 0 var(--edge-l); box-sizing: border-box; }
.sheet-1 { top: 0; background: var(--ground-2); color: var(--ink); }
.sheet-2 { top: 88px; background: var(--bone); color: var(--ground); view-timeline-name: --sheet-2; }
.sheet-3 { top: 176px; background: var(--red); color: #fff; view-timeline-name: --sheet-3; }
.sheet-name { grid-column: 1 / 7; grid-row: 1; align-self: center; font: 800 var(--fs-l)/1 var(--display); text-transform: uppercase; color: inherit; }
.sheet-list { grid-column: 1 / 7; grid-row: 2; list-style: none; margin: 24px 0 0 !important; padding: 0; }
.sheet-list li { margin: 0; }
.sheet-list a { display: inline-flex; align-items: center; gap: 14px; padding: 6px 0; font: 700 var(--fs-l)/1.05 var(--display); text-transform: uppercase; text-decoration: none; color: inherit; }
.sheet-list a::after { content: ""; width: .55em; height: .55em; background: currentColor; opacity: 0; transform: translateX(-8px); transition: opacity 180ms ease, transform 300ms var(--ease-out);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.sheet-photo { grid-column: 7 / 13; grid-row: 1 / 4; margin: 0 calc(-1 * var(--edge-r)) 0 0 !important; overflow: clip; }
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-note { padding: clamp(32px, 4vw, 56px) var(--edge-r) 0 var(--edge-l); max-width: calc(60ch + var(--edge-l)); font-size: var(--fs-body); }

/* ---- Reviews: the rating, then three real reviews on paper slips ---- */
.reviews { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 56px; padding: clamp(96px, 11vw, 176px) var(--edge-r) clamp(96px, 10vw, 160px) var(--edge-l); align-items: start; }
.review-head { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
.review-head .sec-title { grid-column: 1 / 7; }
.review-score { grid-column: 7 / 10; display: grid; gap: 6px; font-size: var(--fs-body); line-height: 1.35; }
.review-score strong { font: 800 var(--fs-xl)/.85 var(--display); color: var(--red); }
.review-award { grid-column: 10 / 13; font-size: var(--fs-body); line-height: 1.5; }
.review-award a { display: inline-block; margin-top: 8px; font: 700 var(--fs-m)/1.2 var(--display); text-transform: uppercase; color: var(--red-on-dark); text-decoration: none; }
.review-award a:hover { text-decoration: underline; text-underline-offset: .2em; }
.slips { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.slip { margin: 0 !important; padding: 40px 32px 44px !important; border: 0 !important; background: var(--bone); color: var(--ground);
	clip-path: polygon(0 8px, 4% 0, 8% 8px, 12% 0, 16% 8px, 20% 0, 24% 8px, 28% 0, 32% 8px, 36% 0, 40% 8px, 44% 0, 48% 8px, 52% 0, 56% 8px, 60% 0, 64% 8px, 68% 0, 72% 8px, 76% 0, 80% 8px, 84% 0, 88% 8px, 92% 0, 96% 8px, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0 100%); }
.slip:nth-child(2) { margin-top: 64px !important; }
.slip:nth-child(3) { margin-top: 28px !important; }
.slip p { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.slip p::before { content: "\201C"; }
.slip p::after { content: "\201D"; }
.slip cite { display: block; margin-top: 22px; font: 700 var(--fs-m)/1.25 var(--display); font-style: normal; text-transform: uppercase; color: var(--ground); }

/* ---- Towns: the names running off both edges ---- */
.towns-wrap { padding-top: clamp(32px, 4vw, 56px); }
.towns-title { padding: 0 var(--edge-r) clamp(32px, 4vw, 56px) var(--edge-l); max-width: calc(18ch + var(--edge-l)); box-sizing: content-box; }
.towns { background: var(--ink); color: var(--ground); height: 32vh; min-height: 220px; display: flex; align-items: center; overflow: hidden; }
.track { display: flex; width: max-content; animation: jotg-run 48s linear infinite; }
.towns:hover .track { animation-play-state: paused; }
.track span { display: inline-flex; align-items: center; font: 800 8vw/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.track span::after { content: ""; width: .26em; height: .26em; border-radius: 50%; background: var(--red); margin: 0 .5em; }
@keyframes jotg-run { to { transform: translateX(-50%); } }
.towns-note { padding: 24px var(--edge-r) clamp(96px, 10vw, 160px) var(--edge-l); max-width: calc(60ch + var(--edge-l)); font-size: var(--fs-body); }

/* ---- Close: the invitation, as a card on the red field ---- */
.close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; padding: clamp(96px, 10vw, 160px) var(--edge-r) clamp(96px, 10vw, 160px) var(--edge-l); background: var(--red); color: #fff; }
.close-side { grid-column: 1 / 6; max-width: 32ch; font-size: var(--fs-m); line-height: 1.4; }
.close-side a { color: #fff; font-weight: 600; text-underline-offset: .15em; }
.close-card { grid-column: 6 / 13; padding: clamp(36px, 4vw, 56px); background: var(--bone); color: var(--ground); }
.close-card h2 { font: 800 var(--fs-xl)/.9 var(--display); text-transform: uppercase; color: var(--ground); }
.close-card p { margin-top: 18px !important; font-size: var(--fs-body); line-height: 1.5; max-width: 44ch; }
.close-card .wp-block-buttons { margin-top: 32px !important; gap: 12px; }
.close-card .btn .wp-block-button__link { background: var(--ground); color: var(--ink); }
.close-card .btn .wp-block-button__link:hover { background: #000; }
.close-card .is-style-outline .wp-block-button__link { color: var(--ground); }
.close-card .is-style-outline .wp-block-button__link:hover { background: var(--ground); color: var(--ink); border-color: var(--ground); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference) {
	/* Load: the shout's lines rise from behind their baselines, then the band, the rating and the trophy. */
	.js .hero .ln > span { transform: translateY(105%); animation: jotg-up 950ms var(--ease-expo) forwards; }
	.js .hero .ln:nth-child(2) > span { animation-delay: 110ms; }
	.js .hero .hero-rating, .js .hero .band > * { opacity: 0; transform: translateY(16px); animation: jotg-rise 600ms var(--ease-out) forwards; }
	.js .hero .band > :first-child { animation-delay: 420ms; }
	.js .hero .band > :last-child { animation-delay: 540ms; }
	.js .hero .hero-rating { animation-delay: 640ms; }
	.js .hero .trophy { opacity: 0; transform: translateY(48px); animation: jotg-rise 1100ms var(--ease-expo) 240ms forwards; }

	/* The parts of each section arrive in reading order; the script staggers them and adds .is-in once. */
	.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); }
	.js .rv.is-in { opacity: 1; transform: none; }
	.js .row { opacity: 0; transform: translateY(18px); }
	.js .row.seen { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-expo), background-color 180ms ease, padding-left 300ms var(--ease-out); }

	/* The fleet photographs open like a shutter. */
	.js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
	.js .shutter img { transform: scale(1.12); transition: transform 1300ms var(--ease-expo); }
	.js .shutter.is-in { clip-path: inset(0); }
	.js .shutter.is-in img { transform: none; }

	/* Each sheet's list arrives row by row as the sheet slides in. */
	.js .sheet .sheet-list li { opacity: 0; transform: translateX(-16px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-expo); }
	.js .sheet.is-in .sheet-list li { opacity: 1; transform: none; }
	.js .sheet.is-in .sheet-list li:nth-child(2) { transition-delay: 70ms; }
	.js .sheet.is-in .sheet-list li:nth-child(3) { transition-delay: 140ms; }
	.js .sheet.is-in .sheet-list li:nth-child(4) { transition-delay: 210ms; }

	@media (hover: hover) and (pointer: fine) {
		.sheet-list a:hover::after { opacity: 1; transform: none; }
	}
}
@keyframes jotg-up { to { transform: none; } }
@keyframes jotg-rise { to { opacity: 1; transform: none; } }

/* Scroll-linked, locked to the scrollbar: the trophy lifts away as the hero leaves, the driveway and
   service photographs drift a few percent inside their frames, and each sheet's contents recede as the
   next sheet slides over. Browsers without scroll timelines keep everything still. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.hero .trophy img { animation: jotg-lift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
		.sheet-photo img { animation: jotg-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		.sheet-1 .sheet-list { animation: jotg-recede linear both; animation-timeline: --sheet-2; animation-range: entry 45% entry 85%; }
		.sheet-2 .sheet-list { animation: jotg-recede linear both; animation-timeline: --sheet-3; animation-range: entry 45% entry 85%; }
	}
}
@keyframes jotg-lift { to { transform: translateY(-14%); } }
@keyframes jotg-drift { from { transform: translateY(-4%) scale(1.1); } to { transform: translateY(4%) scale(1.1); } }
@keyframes jotg-recede { to { opacity: 0; transform: translateY(-20px); visibility: hidden; } }

/* ---- Tablet ---- */
@media (max-width: 1100px) and (min-width: 701px) {
	.hero .trophy { right: 6vw; height: 58%; }
	.lineup { grid-column: 1 / 13; }
	.panel { display: none; }
	.stair-step { grid-column: 1 / 13; }
	.how-photo { position: static; grid-column: 1 / 13; grid-row: auto; aspect-ratio: 16 / 9; }
	.garage-head .sec-title { grid-column: 1 / 13; }
	.garage-intro { grid-column: 1 / 10; margin-top: 20px !important; }
	.review-head .sec-title { grid-column: 1 / 13; }
	.review-score { grid-column: 1 / 7; margin-top: 28px !important; }
	.review-award { grid-column: 7 / 13; margin-top: 28px !important; }
	.slips { grid-template-columns: 1fr 1fr; }
	.slip:nth-child(3) { grid-column: 1 / 3; max-width: 70%; margin-top: 0 !important; }
	.close-side { grid-column: 1 / 13; margin-bottom: 40px !important; }
	.close-card { grid-column: 1 / 13; }
}

/* ---- Phone: its own composition ---- */
@media (max-width: 700px) {
	:root { --fs-xl: clamp(2.25rem, 1.4rem + 4.4vw, 3rem); --fs-l: 1.75rem; --fs-m: 1.375rem; --fs-body: 1.125rem; }
	/* The field stacks the shout and the trophy; the trophy takes whatever height is left and stands on the band. */
	.hero { min-height: max(600px, 100svh); }
	.hero .field { display: flex; flex-direction: column; padding: max(96px, 13svh) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
	.hero .shout { position: static; font-size: 19vw; }
	.hero-rating { display: none; }
	.hero .trophy { position: static; flex: 1 1 0; min-height: 0; height: auto; max-height: none; width: auto; aspect-ratio: auto; display: flex; align-items: flex-end; justify-content: center; margin: 20px 0 -8px !important; }
	.hero .trophy img { width: auto; height: 100%; max-width: 78vw; object-fit: contain; }
	.hero .band { flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
	.hero .band p { font-size: var(--fs-body); }
	.hero .btn, .hero .btn .wp-block-button__link { width: 100%; }

	.hub { padding-block: 72px 64px; }
	.hub-in { display: block; }
	.lineup .sec-title { margin-bottom: 24px; }
	.panel { display: none; }
	.rows { display: grid; gap: 10px; }
	.row { grid-template-columns: minmax(0, 1fr) 34%; grid-template-rows: auto auto; column-gap: 0; align-items: stretch; padding: 0; min-height: 96px; background: var(--ground-2); overflow: hidden; font-size: var(--fs-small); }
	.row:hover, .row.is-active { padding-left: 0; background: var(--ground-3); }
	.row .name { grid-column: 1; grid-row: 1; padding: 16px 14px 2px 16px; font-size: var(--fs-m); align-self: end; }
	.row .when { grid-column: 1; grid-row: 2; padding: 0 14px 16px 16px; font: 500 1.0625rem/1.3 var(--display); text-transform: none; letter-spacing: 0; color: var(--ink); }
	.row .when::after { content: attr(data-price); display: block; margin-top: 2px; color: var(--ink); font-weight: 700; }
	.row .price { display: none; }
	.row .thumb { display: block; grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; object-fit: cover; }
	.row .go { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; padding: 8px; background: var(--red); color: #fff; border-radius: 50%; }

	.how { padding-block: 72px; }
	.stair { display: block; }
	.stair-step + .stair-step { margin-top: 36px !important; }
	.stair-step:nth-child(2) { margin-left: 6vw !important; }
	.stair-step:nth-child(3) { margin-left: 12vw !important; }
	.stair-step:nth-child(4) { margin-left: 18vw !important; }
	.how-photo { position: static; margin-top: 44px !important; aspect-ratio: 16 / 9; }

	.garage { padding-top: 72px; }
	.garage-head { display: block; padding-bottom: 32px; }
	.garage-intro { margin-top: 16px !important; }
	.rigs { grid-template-columns: 1fr; }
	.rig-optimus, .rig-ironhide { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
	.rig-optimus > :not(.rig-photo), .rig-ironhide > :not(.rig-photo) { padding-left: 0; padding-right: 0; }
	.rig-optimus .rig-photo, .rig-ironhide .rig-photo { margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) !important; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))) !important; aspect-ratio: 4 / 3; }
	.rig-name { margin-top: 24px !important; }
	.rig-sentinel { display: block; padding-top: 32px; }
	.sentinel-text { margin-top: 20px !important; }

	.svc { padding-top: 72px; }
	.sheet { display: flex; flex-direction: column; height: auto; min-height: 72svh; padding-bottom: 32px; }
	.sheet-2 { top: 60px; }
	.sheet-3 { top: 120px; }
	.sheet-name { order: 1; align-self: stretch; min-height: 60px; display: flex; align-items: center; }
	.sheet-photo { order: 3; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) !important; aspect-ratio: 4 / 3; }
	.sheet-list { order: 2; margin: 4px 0 24px !important; }

	.reviews { display: block; padding-block: 72px; }
	.review-head { display: block; }
	.review-score { margin-top: 28px !important; }
	.review-award { margin-top: 16px !important; }
	.slips { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px !important; }
	.slip:nth-child(2), .slip:nth-child(3) { margin-top: 0 !important; }

	.towns { height: 22vh; min-height: 150px; }
	.track span { font-size: 15vw; }
	.towns-note { padding-bottom: 72px; }

	.close { display: block; padding-block: 72px; }
	.close-side { margin-bottom: 32px !important; }
	.close-card .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.close-card .wp-block-button, .close-card .wp-block-button__link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.track { animation: none; }
	.frame img { transition: none; }
}