/* Fleet — photo stage, specs and vans drawn to scale. */
.lr.fleet { padding: 128px 0 112px; background: var(--lr-white); color: var(--lr-ink); }
.lr .fleet__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.lr .fleet__head .lead { margin: 0; color: var(--lr-steel); max-width: 32em; }
.lr .fleet__stage { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0; background: var(--lr-paper); border-radius: 24px; overflow: hidden; }
.lr .fleet__photos { position: relative; aspect-ratio: 16 / 9; background: #e4e7ea; }
.lr .fleet__photos img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .5s; }
.lr .fleet__photos img.is-on { opacity: 1; }
.lr .fleet__spec { padding: 40px 40px 36px; display: flex; flex-direction: column; }
.lr .fleet__name { margin: 0; font-weight: 600; font-size: 34px; letter-spacing: -0.025em; line-height: 1.05; color: var(--lr-ink); }
.lr .fleet__model { margin: 6px 0 0; color: var(--lr-steel); font-size: 15px; }
.lr .fleet__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--lr-line); }
.lr .fleet__nums dt { font-size: 13.5px; color: var(--lr-steel); }
.lr .fleet__nums dd { margin: 0; font-weight: 600; font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lr .fleet__good { margin: 24px 0 auto; color: var(--lr-ink-2); }
.lr .fleet__act { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.lr .fleet__more { color: var(--lr-ink); }
.lr .fleet__more:hover { color: var(--lr-amber-d); }
.lr .fleet__more[hidden] { display: none; }

/* The line-up: every van's illustration at one scale (flex-grow = length,
 * picture box aspect = length : height), standing on one ground line. */
.lr .scale { margin-top: 36px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.lr .scale::-webkit-scrollbar { display: none; }
.lr .scale__row { display: flex; align-items: flex-end; gap: 4%; min-width: 980px; padding: 8px 0 0; }
.lr .sv { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; cursor: pointer; outline: none; }
.lr .sv__pic { position: relative; width: 100%; border-bottom: 2px solid var(--lr-line); }
.lr .sv__pic .sv__img { position: absolute; inset: 0 0 -1px; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; filter: grayscale(1); opacity: .45; transition: filter .25s, opacity .25s; }
.lr .sv__pic .sv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; }
.lr .sv .s-body { fill: #d5dae0; transition: fill .2s; }
.lr .sv .s-wheel { fill: #aab3be; transition: fill .2s; }
.lr .sv:hover .sv__img, .lr .sv:focus-visible .sv__img { opacity: .8; }
.lr .sv:hover .s-body, .lr .sv:focus-visible .s-body { fill: #b9c1cb; }
.lr .sv.is-on .sv__img { filter: none; opacity: 1; }
.lr .sv.is-on .s-body { fill: var(--lr-night); }
.lr .sv.is-on .s-wheel { fill: var(--lr-amber); }
.lr .sv__name { display: block; margin-top: 14px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--lr-steel); white-space: nowrap; text-decoration: underline 2px transparent; text-underline-offset: 7px; transition: color .2s, text-decoration-color .2s; }
.lr .sv:hover .sv__name { color: var(--lr-ink); }
.lr .sv.is-on .sv__name { color: var(--lr-ink); font-weight: 600; text-decoration-color: var(--lr-amber); }
.lr .sv:focus-visible .sv__name { outline: 3px solid var(--lr-amber); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1100px) {
	.lr .fleet__stage { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.lr.fleet { padding: 72px 0 64px; }
	.lr .fleet__head { grid-template-columns: 1fr; margin-bottom: 28px; }
	.lr .fleet__stage { border-radius: 18px; }
	.lr .fleet__spec { padding: 24px 20px; }
	.lr .fleet__name { font-size: 28px; }
	.lr .fleet__nums dd { font-size: 24px; }
	.lr .fleet__act .btn { width: 100%; }
	.lr .fleet__act { justify-content: center; }
}