/* Website (Code)/public/assets/css/rental-v5.css
   v3  ·  2026-10-30 MYT

   /rental-v5: on top of v2.css, rental-v3.css (heads, class tiles, steps, stats, close) and rental-v4.css (the trip
   cards, the phone bar): the cut-out hero (the words cut out of the dark with the city behind them), the logo strip,
   the brand tiles, deals of the week, the wedding story, the services accordion beside a picture of the same
   height, the events clips (they play as they rise past the words), and the Google reviews. Classes start r5-. */

.r5-center { text-align: center; }
.r5-center .r3-head__lede, .r5-center .r5-lede { margin-inline: auto; }
.r5-lede { max-width: 720px; margin-top: 18px; color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.r5-lede--dark { color: var(--ink-3); }
.r5-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 32px; }
.r5-btn--light { background: var(--bg-alt); color: var(--ink); }
.r5-btn--light:hover { background: var(--white); }
.r5-more--dark { color: var(--link-dark); }
.r5-more--dark:hover { text-decoration: underline; text-underline-offset: .15em; }
.r5 [hidden] { display: none !important; }
.r5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 1 · Hero: the white car on the ramp, the huge word fading into the picture.
      Scrolling (rental-v5.js sets --p, 0 to 1) grows and dissolves the word while the picture eases back. ── */

.r5-hero { --p: 0; position: relative; height: 170svh; background: var(--bg-alt); color: var(--ink); }
.r5-hero__stage { position: sticky; top: 0; height: calc(100svh - var(--gn-h)); overflow: hidden; }   /* the global nav sits above it at first */
.r5-hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 72%;
    transform: scale(calc(1.14 - .14 * var(--p))); transform-origin: 50% 80%;
}
.r5-hero__wash {            /* light from the top so the words read on the pale concrete; it lifts as the word goes */
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 245, 247, .9) 0%, rgba(245, 245, 247, .55) 32%, rgba(245, 245, 247, 0) 58%);
    opacity: calc(1 - var(--p) * .7);
}
.r5-hero__head {
    position: absolute; left: 0; right: 0; top: 9svh; z-index: 1; text-align: center;
    transform: translateY(calc(var(--p) * -6svh)) scale(calc(1 + var(--p) * .35)); transform-origin: 50% 40%;
    opacity: calc(1 - var(--p) * 1.6);
}
.r5-hero__kicker { font-size: 24px; line-height: 1.16667; font-weight: 500; letter-spacing: .04em; color: rgba(29, 29, 31, .82); }
.r5-hero__title {           /* the huge word: dark at the top, fading into the photograph */
    margin-top: 6px; padding-bottom: .06em;
    font-size: min(12vw, 21svh); line-height: .95; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap;
    background: linear-gradient(180deg, var(--ink) 30%, rgba(29, 29, 31, .55) 70%, rgba(29, 29, 31, 0) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.r5-hero__copy {            /* words bottom-left on the pale concrete, buttons bottom-right; the car stays clear */
    position: absolute; left: 0; right: 0; bottom: 44px; z-index: 1;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.r5-hero__copy::before {    /* a pale wash along the bottom so both ends read over the photo */
    content: ''; position: absolute; left: -50vw; right: -50vw; bottom: -44px; z-index: -1; height: calc(100% + 140px);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 245, 247, 0), rgba(245, 245, 247, .82) 70%);
}
.r5-hero__words { max-width: 380px; }
.r5-hero__sub { color: var(--ink); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; font-weight: 500; }
.r5-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px 24px; }
.r5-hero__cta { padding: 13px 28px; }
.r5-hero__trust { margin-top: 10px; color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
.r5-hero__trust > span[aria-hidden] { margin-inline: .45em; }

/* ── 2 · Logo strip ── */

.r5-logos { padding-block: 64px 64px; background: var(--bg); overflow: hidden; }
.r5-logos__title { color: var(--ink-3); font-size: 14px; line-height: 1.28577; font-weight: 600; letter-spacing: .02em; text-align: center; }
.r5-logos__viewport {       /* the frame: still, with both edges fading to the page */
    margin-top: 32px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--black) 14%, var(--black) 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, var(--black) 14%, var(--black) 86%, transparent 100%);
}
.r5-logos__track { display: flex; width: max-content; }
.r5-logos__set { display: flex; align-items: center; gap: 88px; padding: 8px 88px 26px 0; flex: none; }   /* room for the hover lift and "Watch" */
.r5-logos__set li { display: flex; align-items: center; }
.r5-logo { position: relative; display: block; padding: 10px 6px; border-radius: 12px; }
.r5-logos__set img { display: block; width: auto; height: calc(var(--h) * 1px); max-width: none; opacity: .88; }   /* solid: grey reads as "disabled" */
a.r5-logo { transition: transform .3s var(--ease-hover); }
a.r5-logo img { transition: opacity .3s var(--ease-hover); }
a.r5-logo:hover, a.r5-logo:focus-visible { transform: translateY(-3px) scale(1.05); }
a.r5-logo:hover img, a.r5-logo:focus-visible img { opacity: 1; }
.r5-logo__watch {           /* the three logos with a video say so */
    position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px);
    color: var(--link); font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap;
    opacity: .9; transition: opacity .3s var(--ease-hover);
}
a.r5-logo:hover .r5-logo__watch { opacity: 1; text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
    .r5-logos__track { animation: r5-drift 46s linear infinite; }
    .r5-logos:hover .r5-logos__track { animation-play-state: paused; }
    @keyframes r5-drift { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
    .r5-logos__viewport { -webkit-mask-image: none; mask-image: none; }
    .r5-logos__track { width: auto; justify-content: center; }
    .r5-logos__set { flex-wrap: wrap; justify-content: center; gap: 28px 48px; padding: 0 20px; }
    .r5-logos__set[aria-hidden="true"] { display: none; }
}

/* ── 4 · Brands: a tile per badge (Simple Icons, CC0, in /assets/img/brands; the name alone where there is none) ── */

.r5-brandgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.r5-brand {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    aspect-ratio: 1 / .82; padding: 16px 8px; border-radius: 20px;
    background: var(--bg); color: var(--ink);
    transition: transform .3s var(--ease-hover), box-shadow .3s var(--ease-hover);
}
.r5-brand:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.r5-brand img { width: auto; height: 44px; max-width: 78%; object-fit: contain; }
.r5-brand span { color: var(--ink-2); font-size: 14px; line-height: 1.28577; font-weight: 600; letter-spacing: -0.016em; }
.r5-brand--word b { display: flex; align-items: center; height: 44px; font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.r5-brand--word span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 5 · Trips on a white page keep their spacing ── */

.r5-trips { margin-top: 0; }

/* ── 6 · Deals of the week ── */

.r5-clock { margin-top: 12px; color: var(--gold-ink); font-size: 17px; line-height: 1.23536; font-weight: 600; }
.r5 .deal { width: 372px; height: auto; padding: 0; overflow: hidden; background: var(--bg); }
.r5 .deal__media img { width: 100%; height: auto; aspect-ratio: 372 / 300; object-fit: cover; }
.r5 .deal__media img.is-whole { object-fit: contain; }
.r5 .deal__body { padding: 24px 28px 0; }
.r5 .deal__badge { color: var(--gold-ink); font-size: 12px; line-height: 1.33337; font-weight: 600; }
.r5 .deal__badge:empty { display: none; }
.r5 .deal__name { margin-top: 4px; font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; }
.r5 .deal__class { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.42859; }
.r5 .deal__price { margin-top: 14px; font-size: 17px; line-height: 1.23536; }
.r5 .deal__ctas { margin-top: auto; padding: 20px 28px 28px; }
.r5 .deal__link.btn { min-height: 36px; padding: 8px 18px; font-size: 14px; }
.r5-deal__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.r5-deal__ctas .deal__ask { min-height: 36px; padding: 8px 16px; font-size: 14px; }
.r5-deal__ctas .deal__link { font-size: 14px; }
.r5 .deal__price strong { font-weight: 600; }
.r5 .deal__price s { margin-left: 6px; color: var(--ink-2); }
.r5 .deal__save { display: block; margin-top: 4px; color: var(--success); font-size: 14px; line-height: 1.42859; font-weight: 600; }
.r5-deal-note { margin-top: 28px; color: var(--ink-2); font-size: 14px; line-height: 1.42859; text-align: center; }

/* ── 7 · Weddings: three moments over a picture that changes with them ── */

.r5-wed { padding-bottom: 120px; }
.r5-wed__story { position: relative; margin-top: 72px; }
.r5-wed__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--black); }
.r5-wed__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;   /* wide photos: never cut the car */
    opacity: 0; transform: scale(1.05); transition: opacity 1s var(--ease-standard), transform 6s var(--ease-out);
}
.r5-wed__img.is-shown { opacity: .82; transform: none; }
.r5-wed__stage::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--black) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 70%, var(--black) 100%),
                linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 60%);
}
.r5-wed__moments { position: relative; z-index: 1; margin-top: -100svh; }
.r5-moment { display: flex; align-items: center; min-height: 100svh; width: var(--w); margin-inline: auto; }
.r5-moment__card {
    max-width: 440px; padding: 36px 36px 40px; border-radius: 28px;
    background: rgba(22, 22, 23, .62); color: var(--on-dark);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.r5-moment__time { color: var(--gold); font-size: 14px; line-height: 1.28577; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.r5-moment__title { margin-top: 10px; font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; }
.r5-moment__body { margin-top: 14px; color: rgba(245, 245, 247, .8); font-size: 17px; line-height: 1.47; }
.r5-wed__end { margin-top: 24px; }
.r5-wed__promise { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; }
.r5-wed__note { margin-top: 24px; color: var(--ink-3); font-size: 14px; line-height: 1.42859; }

/* ── 8 · Services: the accordion and its picture ── */

.r5-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.r5-pair__list { border-top: 1px solid var(--hair); }
.r5-pair__item { border-bottom: 1px solid var(--hair); }
.r5-pair__item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 24px 0; cursor: pointer; list-style: none;
    font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em;
}
.r5-pair__item summary::-webkit-details-marker { display: none; }
.r5-pair__item summary::after {
    content: ''; flex: none; width: 12px; height: 12px; margin-right: 6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease-standard); opacity: .56;
}
.r5-pair__item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.r5-pair__item[open][data-closing="true"] summary::after { transform: translateY(-3px) rotate(45deg); }
.r5-pair__body { display: flow-root; padding: 0; }   /* no padding: a row at height 0 must take no room at all */
.r5-pair__body > :last-child { margin-bottom: 28px; }
.r5-pair__body p { color: var(--ink-2); font-size: 17px; line-height: 1.47; }
.r5-pair__body strong { color: var(--ink); font-weight: 600; }
.r5-pair__body .more { margin-top: 14px; }
.r5-pair__media { position: relative; aspect-ratio: 3 / 2; border-radius: 28px; overflow: hidden; background: var(--bg-alt); }
/* The outgoing picture only fades. The incoming one fades in and settles from a slight zoom (one motion, not two). */
.r5-pair__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .7s var(--ease-standard);
}
.r5-pair__media img.is-shown { opacity: 1; animation: r5-settle 1.4s var(--ease-out) both; }
@keyframes r5-settle { from { transform: scale(1.05); } to { transform: none; } }
.r5-pair__item summary::after { transition: transform .45s var(--ease-out); }
.r5-pair__item summary { transition: color .2s var(--ease-hover); }
.r5-pair__item summary:hover { color: var(--ink-2); }

/* ── 9 · Events: the words hold the middle of the screen; three Instagram-style stories play and rise past them ── */

.r5-life { position: relative; overflow: clip; background: var(--black); color: var(--on-dark); }
.r5-life__panel { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.r5-life__stage { position: relative; z-index: 1; display: grid; width: var(--w); margin: -45svh auto 0; padding-bottom: 24svh; pointer-events: none; }
.r5-clip {
    position: relative; margin: 0; overflow: hidden; pointer-events: auto;
    aspect-ratio: 9 / 16; border-radius: 22px; background: var(--ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .1);
}
.r5-clip--1 { justify-self: center; width: 24%; }
.r5-clip--2 { justify-self: start; width: 21%; margin: 14svh 0 0 3%; }
.r5-clip--3 { justify-self: end; width: 20%; margin: -38svh 3% 0 0; }
.r5-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The story's own chrome, after Instagram: bars, who and when, mute and close, reply bar, like, send. */
.r5-story__top {
    position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 10px 12px 32px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.r5-story__bars { display: flex; gap: 4px; }
.r5-story__seg { flex: 1; height: 2.5px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.r5-story__seg i { display: block; width: 0; height: 100%; background: var(--white); }
.r5-story__seg.is-done i { width: 100%; }
.r5-story__fill { width: calc(var(--t, 0) * 100%) !important; }
/* Who and when on one line, the story's title on a second line under them, as Instagram does. The clips are only
   200 to 300px wide, so a title beside the name wrapped a word per line ("Behind / the / wheel", the "·" alone above
   it). Every text cell is nowrap and the title ends in "…" if a clip is ever too narrow. */
.r5-story__head {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 1px;
    margin-top: 10px; color: var(--white); font-size: 13px; line-height: 1.2; white-space: nowrap;
}
.r5-story__avatar {
    grid-column: 1; grid-row: 1 / span 2;
    width: 30px; height: 30px; padding: 2px; border-radius: 50%;
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.r5-story__avatar img { display: block; width: 100%; height: 100%; padding: 5px; border: 2px solid var(--black); border-radius: 50%; background: var(--white); object-fit: contain; }
.r5-story__user { grid-column: 2; grid-row: 1; font-weight: 600; }
.r5-story__time { grid-column: 3; grid-row: 1; justify-self: start; }
.r5-story__label { grid-column: 2 / span 2; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.r5-story__time, .r5-story__label { color: rgba(255, 255, 255, .72); }
.r5-story__sound {
    grid-column: 4; grid-row: 1 / span 2;
    display: grid; place-items: center; width: 30px; height: 30px;
    padding: 0; border: 0; background: none; color: var(--white); cursor: pointer;
}
.r5-story__sound svg { width: 20px; height: 20px; fill: currentColor; }
.r5-story__sound path[fill="none"] { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.r5-clip__on { display: none; }
.r5-story__sound[aria-pressed="true"] .r5-clip__on { display: block; }
.r5-story__sound[aria-pressed="true"] .r5-clip__off { display: none; }
.r5-story__x { grid-column: 5; grid-row: 1 / span 2; width: 22px; height: 22px; stroke: var(--white); stroke-width: 2; stroke-linecap: round; }
.r5-story__caption {
    position: absolute; left: 14px; right: 14px; bottom: 76px; z-index: 1;
    color: var(--white); font-size: 15px; line-height: 1.35; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.r5-story__bottom {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 14px;
    padding: 36px 12px 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
}
.r5-story__reply {
    flex: 1; display: flex; align-items: center; min-width: 0; min-height: 40px; padding: 0 16px;
    border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 22px; color: var(--white); font-size: 14px;
    transition: background-color .2s var(--ease-hover);
}
.r5-story__reply:hover { background: rgba(255, 255, 255, .14); }
.r5-story__like, .r5-story__share { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; }
.r5-story__like svg, .r5-story__share svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.r5-story__like[aria-pressed="true"] { color: #ff3040; }
.r5-story__like[aria-pressed="true"] svg { fill: currentColor; animation: r5-like .45s var(--ease-out); }
@keyframes r5-like { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ── 10 · Google reviews: the score; one review at a time, large ── */

.r5-voices { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 88px; align-items: center; }
.r5-reviews__title { color: var(--ink-2); font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.r5-score { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; color: var(--ink); }
.r5-score__value { font-size: 128px; line-height: .9; font-weight: 700; letter-spacing: -0.04em; }
.r5-score__stars, .r5-voice__stars { display: inline-flex; gap: 3px; }
.r5-score__stars svg { width: 26px; height: 26px; fill: #e8a317; }
.r5-voice__stars svg { width: 18px; height: 18px; fill: #e8a317; }
.r5-score__count { display: inline-flex; align-items: center; gap: .4em; color: var(--link); font-size: 17px; line-height: 1.23536; }
.r5-score:hover .r5-score__count { text-decoration: underline; text-underline-offset: .15em; }
.r5-g { width: 18px; height: 18px; flex: none; }
.r5-voices__stage { display: flex; flex-direction: column; justify-content: center; min-height: 380px; }
.r5-voice { margin: 0; }
.r5-voice__text { margin: 20px 0 0; color: var(--ink); font-size: 34px; line-height: 1.23; font-weight: 600; letter-spacing: -0.003em; }
.r5-voice--long .r5-voice__text { font-size: 26px; line-height: 1.3; }
.r5-voice--longer .r5-voice__text { font-size: 20px; line-height: 1.45; font-weight: 500; letter-spacing: .01em; }
.r5-voice__by { display: flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--ink-2); font-size: 15px; line-height: 1.33; }
.r5-voice__person { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; }
a.r5-voice__person[href]:hover .r5-voice__name { text-decoration: underline; }
.r5-voice__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--platter); }
.r5-voices__nav { display: flex; align-items: center; gap: 10px; margin-top: 40px; }
.r5-voices__btn {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--ink); cursor: pointer;
    transition: background-color .2s var(--ease-hover);
}
.r5-voices__btn:hover { background: var(--platter); }
.r5-voices__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r5-voices__pause { margin-left: 6px; }
.r5-voices__icon--play { display: none; fill: currentColor !important; }
.r5-voices__pause[aria-pressed="true"] .r5-voices__icon--play { display: block; }
.r5-voices__pause[aria-pressed="true"] .r5-voices__icon--pause { display: none; }
.r5-voices__dots { display: flex; align-items: center; gap: 6px; padding-inline: 4px; }
.r5-voices__dot {
    position: relative; display: block; width: 8px; height: 8px; padding: 0; overflow: hidden;
    border: 0; border-radius: 4px; background: var(--hair); cursor: pointer;
    transition: width .45s var(--ease-out);
}
.r5-voices__dot[aria-current="true"] { width: 32px; }
.r5-voices__dot span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--ink); }
.r5-voices__dot[aria-current="true"] span { transform: scaleX(var(--progress, 1)); }
.r5-reviews .r3-stats { margin-top: 112px; }
.r5-reviews .r3-stat__value { color: var(--gold-ink); }
.r5-reviews .r3-stat__post { color: var(--ink-2); }
.r5-how .r3-step { background: var(--bg); }

/* ── Tablet ── */

@media (max-width: 1068px) {
    .r5-moment__title { font-size: 28px; line-height: 1.14286; }
    .r5-pair { grid-template-columns: 1fr; gap: 32px; }
    .r5-pair__media { order: -1; }
    .r5-wed__promise { font-size: 24px; line-height: 1.16667; }
    .r5-brandgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .r5-clip--1 { width: 30%; }
    .r5-clip--2 { width: 27%; }
    .r5-clip--3 { width: 26%; }
}

/* ── Phone ── */

@media (max-width: 734px) {
    .r5-hero { height: 150svh; }
    /* Phones: the photo is a band between the words and the buttons, fading into the page at both edges, so the car
       is whole and nothing sits on it. */
    .r5-hero__bg {
        top: 30%; bottom: auto; height: 44%; object-position: 52% 70%; transform-origin: 50% 70%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--black) 16%, var(--black) 84%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, var(--black) 16%, var(--black) 84%, transparent 100%);
    }
    .r5-hero__wash { display: none; }
    .r5-hero__copy::before { display: none; }
    .r5-hero__head { top: 7svh; }
    .r5-hero__kicker { font-size: 15px; line-height: 1.3; letter-spacing: .02em; }
    .r5-hero__title {          /* "Drive the / dream." on two lines; the fade is gentler so the second still reads */
        max-width: 4.7em; margin-inline: auto; white-space: normal;
        font-size: 18vw; line-height: .92;
        background-image: linear-gradient(180deg, var(--ink) 45%, rgba(29, 29, 31, .45) 100%);
    }
    .r5-hero__copy { bottom: 24px; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
    .r5-hero__words { max-width: none; }
    .r5-hero__sub { font-size: 17px; line-height: 1.41; }
    .r5-hero__actions { justify-content: center; }

    .r5-logos { padding-block: 44px 36px; }
    .r5-logos__viewport { margin-top: 24px; }
    .r5-logos__set { gap: 52px; padding-right: 52px; }
    .r5-logos__set img { height: calc(var(--h) * .72px); }

    .r5-lede { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .r5-brandgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
    .r5-brand { border-radius: 16px; gap: 10px; }
    .r5-brand img, .r5-brand--word b { height: 34px; }
    .r5-brand span { font-size: 12px; }
    .r5-brand--word b { font-size: 14px; }

    /* Classes on phones: one row each, with name, line and price on the left and the car on the right. */
    .r5 .r3-classes { grid-template-columns: 1fr; gap: 10px; }
    .r5 .r3-class a {
        display: grid; grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: auto auto 1fr;
        align-items: center; column-gap: 8px; min-height: 0; padding: 18px 14px 18px 20px; border-radius: 18px; text-align: left;
    }
    .r5 .r3-class__name { grid-area: 1 / 1; font-size: 21px; line-height: 1.19048; }
    .r5 .r3-class__tag { grid-area: 2 / 1; margin-top: 2px; font-size: 14px; line-height: 1.35; }
    .r5 .r3-class__price { grid-area: 3 / 1; align-self: end; margin-top: 10px; font-size: 14px; line-height: 1.28577; }
    .r5 .r3-class img { grid-area: 1 / 2 / 4 / 3; width: 100%; max-width: none; margin: 0; }

    /* Trips on phones: a two-column grid, not a sideways row, so nothing catches the thumb on the way down. */
    .r5 .r5-trips {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        width: var(--w); margin-inline: auto; padding: 0; overflow: visible; scroll-snap-type: none;
    }
    .r5 .r5-trips .r4-occ { width: auto; }
    .r5 .r5-trips .r4-occ a { border-radius: 16px; }
    .r5 .r5-trips .r4-occ__copy { padding: 14px; }
    .r5 .r5-trips .r4-occ__title { font-size: 15px; line-height: 1.2; }
    .r5 .r5-trips .r4-occ__cta { margin-top: 4px; font-size: 12px; }

    .r5 .deal { width: 78vw; }

    .r5-wed__story { margin-top: 40px; }
    .r5-moment { align-items: flex-end; padding-bottom: 12svh; }
    .r5-wed__img { object-position: 50% 30%; }   /* the picture above the words */
    .r5-moment__card { padding: 26px 24px 28px; border-radius: 22px; }
    .r5-moment__title { font-size: 24px; line-height: 1.16667; }
    .r5-wed__promise { font-size: 21px; line-height: 1.19048; }

    .r5-pair { gap: 24px; }
    .r5-pair__media { border-radius: 20px; }
    .r5-pair__item summary { font-size: 21px; line-height: 1.19048; padding: 20px 0; }

    /* Events on phones: the words, then the clips side by side to swipe (each plays when in view). */
    .r5-life__panel { position: relative; height: auto; padding: 88px 0 8px; }
    .r5-life__stage {
        display: flex; gap: 14px; width: auto; margin: 32px 0 0; padding: 0 calc((100vw - var(--w)) / 2) 80px;
        overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: calc((100vw - var(--w)) / 2); scrollbar-width: none;
        pointer-events: auto; overscroll-behavior-x: auto;   /* a soft snap: a scroll that starts on a story still goes down */
    }
    .r5-life__stage::-webkit-scrollbar { display: none; }
    .r5-clip, .r5-clip--1, .r5-clip--2, .r5-clip--3 { flex: none; width: 66vw; margin: 0; border-radius: 22px; scroll-snap-align: start; }

    .r5-voices { grid-template-columns: 1fr; gap: 36px; }
    .r5-score__value { font-size: 88px; }
    .r5-voices__stage { min-height: 0; }
    .r5-voice__text { font-size: 24px; line-height: 1.29; }
    .r5-voice--long .r5-voice__text { font-size: 20px; line-height: 1.4; }
    .r5-voice--longer .r5-voice__text { font-size: 17px; line-height: 1.47; }
    .r5-voices__nav { margin-top: 28px; }
    .r5-reviews .r3-stats { margin-top: 64px; }
    .r5-clip { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .r5-hero { height: auto; }
    .r5-hero__stage { position: relative; }
    .r5-wed__img { transition: opacity .3s linear; transform: none; }
    .r5-pair__media img { transition: opacity .3s linear; }
    .r5-pair__media img.is-shown { animation: none; }
    .r5-voices__dot { transition: none; }
    .r5-story__like[aria-pressed="true"] svg { animation: none; }
    .r5-brand { transition: none; }
}