/* Monarch home page: motion-first sections. Loaded after site.css. */
:root { --accent: #c9b37e; --accent-soft: rgba(201, 179, 126, 0.35); }

/* ---------- Intro reveal ---------- */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; }
.intro__inner { display: grid; justify-items: center; gap: 1.25rem; }
.intro__inner img { width: 96px; opacity: 0; transform: translateY(12px); }
.intro__word { overflow: hidden; font: 500 clamp(2rem, 4vw, 3.2rem)/1.1 var(--serif); letter-spacing: 0.34em; text-transform: uppercase; color: var(--white); }
.intro__word span { display: block; transform: translateY(110%); }
.intro__line { width: 0; height: 1px; background: var(--accent); }
body:not(.intro-ready) .intro { display: none; }
body.intro-ready .intro__inner img { animation: intro-fade 0.7s var(--ease) 0.1s forwards; }
body.intro-ready .intro__word span { animation: intro-rise 0.8s var(--ease) 0.45s forwards; }
body.intro-ready .intro__line { animation: intro-line 0.6s ease-in-out 0.9s forwards; }
body.intro-ready .intro { animation: intro-exit 0.9s cubic-bezier(0.76, 0, 0.24, 1) 1.8s forwards; }
body.intro-done .intro { display: none; }
@keyframes intro-fade { to { opacity: 1; transform: none; } }
@keyframes intro-rise { to { transform: none; } }
@keyframes intro-line { to { width: 180px; } }
@keyframes intro-exit { to { transform: translateY(-101%); } }

/* ---------- Split text ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-line > span { display: block; transform: translateY(110%); will-change: transform; }
.split-done .split-line > span { transform: none; }

/* ---------- Hero extras ---------- */
.hero__media { will-change: transform; }
.hero__kinetic { position: absolute; left: 0; right: 0; bottom: 4vh; z-index: 1; display: flex; gap: 6vw; white-space: nowrap; pointer-events: none; font: 500 clamp(4rem, 12vw, 12rem)/1 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(248, 247, 243, 0.28); opacity: 0.9; }
.hero__kinetic span { padding-right: 6vw; }
.hero__kinetic span:nth-child(even) { -webkit-text-stroke-color: var(--accent-soft); }

/* ---------- Brand marquee ---------- */
/* Marques strip: a full-bleed band of display-size names with dot separators, sitting between the fleet
   rail and the next section (the upperjiujitsu.ca ticker, in our serif and palette). */
.marquee { position: relative; width: 100%; margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem) 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 34s linear infinite; font: 500 clamp(2.2rem, 5vw, 4.4rem)/1.1 var(--serif); letter-spacing: 0.01em; color: var(--platinum); }
.marquee__item { display: inline-block; padding: 0 clamp(1.1rem, 2vw, 1.8rem); white-space: nowrap; }
.marquee__track i { width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--accent); flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .marquee::before, .marquee::after { width: 2.5rem; }
  .marquee__track { animation-duration: 22s; }
}

/* ---------- Home concept 2: editorial hero (home-2.php), words first, clip in a framed panel ---------- */
.hero--editorial { align-items: stretch; padding: calc(var(--nav-h) + 3.5rem) 0 6.5rem; background: var(--bg); }
.hero__atmos { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 46% 38% at 16% 24%, rgba(201, 179, 126, 0.13), transparent 70%),
  radial-gradient(ellipse 36% 46% at 88% 82%, rgba(216, 214, 207, 0.06), transparent 70%),
  linear-gradient(180deg, #0b0b0d 0%, #0e0e11 100%); }
.hero--editorial .hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: end; width: 100%; max-width: var(--container); }
.hero--editorial .hero__copy { display: block; justify-items: start; text-align: left; max-width: none; }
.hero--editorial .hero__copy > * { justify-self: start; }
.hero--editorial .hero__eyebrow { color: var(--accent); text-shadow: none; margin-bottom: 1.75rem; }
.hero--editorial .hero__title { max-width: 8.2em; font-size: clamp(3rem, 7.4vw, 6.8rem); line-height: 0.96; letter-spacing: -0.02em; margin-bottom: 1.75rem; text-shadow: none; text-wrap: wrap; }
.hero--editorial .hero__title .split-line:last-child > span { font-style: italic; font-weight: 400; color: var(--platinum); }
.hero__lede { font: 500 clamp(1.3rem, 1.8vw, 1.7rem)/1.3 var(--serif); color: var(--text); max-width: 28ch; margin: 0 0 1rem; }
.hero__body { max-width: 46ch; color: var(--text-2); margin: 0 0 2rem; }
.hero__links { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-bottom: 2.5rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hero__facts dt { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.hero__facts dd { margin: 0; font: 500 1.15rem/1.2 var(--serif); color: var(--text); }
.hero__frame { position: relative; margin: 0; isolation: isolate; }
.hero--editorial .hero__frame .hero__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-2); }
.hero--editorial .hero__frame .hero__media img { position: absolute; inset: 0; }
.hero--editorial .hero__frame .hero__media video { filter: brightness(0.9) saturate(0.95); }
.hero__frame::before { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; top: 0.75rem; bottom: 3rem; border: 1px solid rgba(201, 179, 126, 0.35); pointer-events: none; z-index: 1; }
.hero__frame figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.85rem; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.hero__frame figcaption span:first-child { color: var(--accent); }
.hero--editorial .hero__scroll { display: none; } /* the facts row and the marques strip already lead the eye down */
/* ---------- Home concept 3: scroll-driven banner (home-3.php), the cars move only as you scroll ---------- */
/* The stage is one screen tall and sticky, so the scroll the banner owns is height minus that screen:
   550vh gives 4.5 screens of scrolling before the page moves on, 5.5 in total. */
.hero--scrub { display: block; height: 550vh; min-height: 0; padding: 0; overflow: visible; }
.hero--scrub .hero__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; background: var(--bg-2); }
/* Once the sequence finishes, the sticky stage still needs a full screen of scrolling to travel away, and the
   bottom of the last frame is dark road. Pull the next section up over that tail so there is no black gap. */
.hero--scrub + .hscroll { margin-top: -100vh; margin-top: -100dvh; position: relative; z-index: 2; }
.hero--scrub .hero__canvas, .hero--scrub .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero--scrub .hero__poster { transition: opacity 0.6s ease; }
.hero--scrub.is-drawn .hero__poster { opacity: 0; }
.hero--scrub .hero__scrim { z-index: -1; }
/* The opening and closing captions share the top band, so a plain crossfade printed one over the other for
   the length of the fade. The outgoing caption now leaves quickly and the incoming one waits for it, which
   hands the band over cleanly instead of showing both sets of words at once. */
.hero__caption { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(18px); transition: opacity 0.3s var(--ease), transform 0.7s var(--ease); pointer-events: none; }
.hero__caption.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.5s var(--ease) 0.28s, transform 0.7s var(--ease) 0.28s; }
.hero__caption--open { top: calc(var(--nav-h) + 1rem); display: flex; justify-content: center; }
.hero__caption--mid { left: var(--gutter); right: auto; bottom: 7rem; max-width: 32rem; }
.hero__caption--mid .hero__eyebrow { color: var(--accent); text-shadow: none; margin-bottom: 0.8rem; }
.hero__midline { font: 500 clamp(1.4rem, 2.2vw, 2.1rem)/1.25 var(--serif); color: var(--white); margin: 0; text-shadow: 0 2px 24px rgba(11, 11, 13, 0.7); }
/* Closing caption sits in the same top band as the opening one: by the end of the sequence the cars and the
   backlight fill the middle of the frame, and that band is the only part that is still dark. */
.hero__caption--close { top: calc(var(--nav-h) + 2.25rem); text-align: center; }
.hero__closeline { font: 500 clamp(2.2rem, 4.4vw, 4rem)/1 var(--serif); color: var(--white); margin: 0 0 1.25rem; text-shadow: 0 2px 30px rgba(11, 11, 13, 0.7); }
.hero__caption--close .hero__links { justify-content: center; margin: 0; }
.hero__progress { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 1px; height: 140px; background: var(--line-strong); z-index: 1; }
.hero__progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.hero__drive { transition: opacity 0.5s var(--ease); }
.hero--scrub.is-moving .hero__drive { opacity: 0; }
@media (max-width: 767px) {
  /* Phones get a shorter run than the desktop's 4.5 screens: a thumb covers far less ground per swipe, so
     the same number of screens feels like a much longer banner on a phone. 400vh is 3 screens of scrolling. */
  .hero--scrub { height: 400vh; }
  /* The poster shows until the first frame is drawn; on a portrait phone it fits the width like the canvas
     does (scrub.js), so all three cars are there from the first paint instead of just the middle one. */
  .hero--letterbox .hero__poster { object-fit: contain; background: #0e0e11; }
  /* A three-car frame fitted to the width of a portrait screen is only about a third of its height, so the
     stage carries a deep empty band under the cars. The section that follows is pulled up over that band,
     which both puts the emptiness to use and brings the page's first content into view sooner. The banner's
     own height is untouched, so the scroll still drives the frames exactly as before.
     Only the letterboxed banner: index-2's Escalade frame fills the screen and has no band to reclaim. */
  .hero--letterbox + * { margin-top: -30vh; position: relative; z-index: 2; }
  /* and the section's own opening padding comes down to match, or it just reintroduces the gap */
  .hero--letterbox + .sfleet { padding-top: 2.5rem; }
  .hero__caption--mid { bottom: 6rem; right: var(--gutter); }
  .hero__progress { display: none; }
}

@media (max-width: 1023px) {
  .hero--editorial .hero__grid { grid-template-columns: 1fr; }
  .hero--editorial .hero__title { font-size: clamp(2.6rem, 9vw, 4.6rem); }
}
@media (max-width: 767px) {
  .hero--editorial { padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 5.5rem; }
  .hero--editorial .hero__eyebrow { margin-bottom: 1.1rem; }
  .hero--editorial .hero__title { max-width: none; font-size: clamp(2.4rem, 11.5vw, 3.2rem); margin-bottom: 1.1rem; }
  .hero__lede { font-size: 1.15rem; }
  .hero__facts { gap: 1rem 1.75rem; }
  .hero--editorial .hero__frame .hero__media { aspect-ratio: 16 / 10; }
  .hero--editorial .hero__scroll { display: none; }
}

/* ---------- Horizontal fleet ---------- */
.hscroll { position: relative; background: var(--bg); }
.hscroll__pin { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: clamp(0.75rem, 1.6vh, 1.5rem); padding: calc(var(--nav-h) + 1rem) 0 1.5rem; overflow: hidden; }
.hscroll__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.hscroll__head h2 { margin-bottom: 0.4rem; font-size: clamp(1.8rem, 3.2vw, 2.9rem); }
.hscroll__head .lede { margin: 0; }
.hscroll__meta { display: grid; gap: 0.75rem; justify-items: end; min-width: 220px; }
.hscroll__index { font: 500 1.1rem/1 var(--serif); letter-spacing: 0.1em; color: var(--muted); }
.hscroll__index b { font-weight: 500; color: var(--white); font-size: 2rem; }
.hscroll__progress { width: 220px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.hscroll__progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hscroll__track { display: flex; gap: 1.25rem; padding: 0 var(--gutter); will-change: transform; }
/* Width is capped by the height left over inside the pinned area, so the whole card (image, name, price and
   spec row) always fits on screen instead of being cut off on shorter laptops. */
.hcard { flex: none; width: clamp(260px, min(78vw, calc((100dvh - 400px) * 1.5)), 560px); background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; transform-style: preserve-3d; transition: border-color 0.4s var(--ease); }
.hcard:hover { border-color: var(--accent-soft); }
.hcard__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-3); }
/* Wider than the frame so the horizontal parallax never slides an edge into view */
.hcard__media img { width: 114%; max-width: none; margin-left: -7%; height: 115%; object-fit: cover; will-change: transform; }
/* Night-studio stills fade into the card body so image and text read as one dark surface */
.hcard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 19, 0) 58%, rgba(16, 16, 19, 0.9) 100%); pointer-events: none; }
.hcard__num { position: absolute; top: 1rem; left: 1rem; font: 500 0.9rem/1 var(--serif); letter-spacing: 0.2em; color: var(--white); background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(6px); padding: 0.5rem 0.7rem; }
.hcard__body { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem 0.5rem; }
.hcard__name { margin: 0 0 0.3rem; font-size: 1.55rem; }
.hcard__name a:hover { color: var(--accent); }
.hcard__tag { margin: 0; color: var(--muted); font-size: 0.9rem; }
.hcard__price { text-align: right; white-space: nowrap; }
.hcard__price strong { display: block; font: 500 1.6rem/1 var(--serif); color: var(--white); }
.hcard__price span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hcard__specs { display: flex; align-items: center; gap: 1.1rem; padding: 0.9rem 1.5rem 1.4rem; font-size: 0.78rem; color: var(--text-2); }
.hcard__specs span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hcard__go { margin-left: auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text); transition: all 0.3s var(--ease); }
.hcard__go:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.hcard--end { justify-content: center; align-items: center; gap: 1.5rem; width: min(60vw, 360px); text-align: center; color: var(--white); }
.hcard__end-text { font: 500 2rem/1.1 var(--serif); }
.hcard__end-arrow { width: 64px; height: 64px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; transition: all 0.35s var(--ease); }
.hcard__end-arrow .icon { width: 26px; height: 26px; }
.hcard--end:hover .hcard__end-arrow { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: translateX(6px); }
/* Short laptops: trim the fixed height around the image so the card still fits on one screen */
@media (max-height: 780px) and (min-width: 900px) {
  .hscroll__head .lede { display: none; }
  .hcard__name { font-size: 1.2rem; }
  .hcard__tag { display: none; }
  .hcard__body { padding: 0.95rem 1.15rem 0.35rem; }
  .hcard__price strong { font-size: 1.25rem; }
  .hcard__specs { padding: 0.55rem 1.15rem 0.95rem; font-size: 0.72rem; gap: 0.85rem; }
  .hcard__go { width: 34px; height: 34px; }
}
.no-gsap .hscroll__pin { min-height: 0; padding-top: var(--section); }
.no-gsap .hscroll__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
.no-gsap .hcard { scroll-snap-align: start; }

/* ---------- Brands: clip reveal ---------- */
/* Hidden only while the motion script is running and able to reveal them again: if it never loads, or bails
   out, the tiles must still be visible rather than clipped away for good. */
body.motion-on [data-clip] { clip-path: inset(0 0 100% 0); }
body.motion-on [data-clip].is-visible { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
[data-clip][data-delay="1"].is-visible { transition-delay: 0.12s; }
[data-clip][data-delay="2"].is-visible { transition-delay: 0.24s; }

/* ---------- Counters ---------- */
/* ---------- 02 The experience: full-bleed photo, centred headline, three glass pillars ---------- */
.experience { position: relative; overflow: hidden; isolation: isolate; padding: clamp(5rem, 11vw, 9.5rem) 0; border-top: 1px solid var(--line); }
.experience__bg { position: absolute; inset: -18% 0; z-index: -2; }
.experience__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(0.7) brightness(0.55); }
.experience::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(11, 11, 13, 0.45) 24%, rgba(11, 11, 13, 0.35) 62%, var(--bg) 100%); }
.experience__head { text-align: center; max-width: 54rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.experience__head .eyebrow { justify-content: center; }
.experience__head h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.02; margin: 0 0 1.25rem; color: var(--white); text-wrap: balance; }
.experience__head .lede { margin: 0 auto; max-width: 58ch; color: var(--text); }
.experience__cta { text-align: center; margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* ---------- 03 In numbers: big champagne figures, one type voice, hairline dividers ---------- */
.stats { position: relative; padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--line); background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(201, 179, 126, 0.07), transparent 70%), var(--bg); }
.stats .eyebrow { display: block; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: grid; gap: 0.6rem; justify-items: center; text-align: center; padding: 0.5rem 1.5rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { font: 400 clamp(3.4rem, 6vw, 6rem)/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat b small { font-size: 0.4em; letter-spacing: 0.02em; margin: 0 0.1em; }
.stat__label { font-size: 1rem; color: var(--white); }
.stat__sub { font: 600 0.62rem/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .stats__grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } .stat:nth-child(3) { border-left: 0; } }
/* Phones keep two to a row rather than dropping to a single column: four figures in one stack made the
   section far longer than it is worth. The divider runs between the pair, so every odd figure loses it. */
@media (max-width: 480px) {
  /* Row gap comes from the cells' own padding rather than the grid, so the divider between the two rows can
     run unbroken across the full width the way the one between the columns does. */
  .stats__grid { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .stat { padding: 1.75rem 0.75rem; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat b { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .stat__label { font-size: 0.92rem; }
  .stat__sub { font-size: 0.56rem; letter-spacing: 0.16em; }
}
@media (max-width: 767px) { .counters__grid { grid-template-columns: 1fr 1fr; } .counter { padding-left: 1rem; } .counter:nth-child(odd) { border-left: 0; padding-left: 0; } }

/* ---------- Sticky-stack steps ---------- */
/* ---------- 04 How it works: a pinned frame whose image changes with the active step, and a timeline of
   steps with large numerals. The step nearest the middle of the screen is active. ---------- */
/* ---------- How it works: a horizontal numbered timeline (includes/home-sections.php) ----------
   Three cards side by side, each carrying its own photo rather than one pinned frame. A rail runs behind
   them and fills in as each card comes into view (data-howworks, assets/js/motion.js); every card is fully
   visible without JS, the fill just jumps straight to full under reduced motion. */
.howworks__head { max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.howworks__head h2 { margin-bottom: 0.75rem; }
.howworks__head .lede { margin: 0; }
.howworks__rail { position: relative; padding-top: clamp(2rem, 4vw, 3rem); }
.howworks__track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.howworks__fill { display: block; height: 100%; width: calc(100% / var(--howworks-steps, 3) * var(--filled, 0)); background: var(--accent); transition: width 0.6s var(--ease); }
.howworks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--howworks-steps, 3), minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); }
.howworks__step { position: relative; }
.howworks__marker { position: absolute; left: 0; top: -1.9rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong); font: 600 0.85rem/1 var(--sans); color: var(--muted); z-index: 1;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.howworks__step.is-visible .howworks__marker { background: var(--accent); border-color: var(--accent); color: #14140f; box-shadow: 0 0 0 6px rgba(201, 179, 126, 0.16); }
.howworks__photo { position: relative; margin: 0 0 1.5rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line); isolation: isolate; }
.howworks__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, 0) 55%, rgba(11, 11, 13, 0.5) 100%); pointer-events: none; }
.howworks__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.howworks__step.is-visible .howworks__photo img { transform: scale(1); }
.howworks__body h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.15; margin-bottom: 0.6rem; color: var(--white); }
.howworks__body p { color: var(--text-2); margin: 0 0 1rem; }
.howworks__link { font-size: 0.7rem; }
/* Depth. Each step is a card that tilts a few degrees toward the pointer (data-tilt, assets/js/motion.js),
   and its parts sit at different depths in front of the list's perspective: the numbered marker highest,
   the copy next, the photograph at the base under a deep shadow. Tilting pulls the layers apart, so the
   card reads as a stack of things rather than a flat picture with text under it. The steps also arrive
   tipped back from the bottom edge and stand up as they come into view, and a light sweeps across the
   photograph when the card is hovered. Touch screens get the entrance and the depth, not the tilt. */
/* Each step supplies the perspective for its own card, so depth projects from that card's centre; one
   perspective on the whole list would push the outer cards' layers sideways and, on a phone, the first
   marker up into the heading. The entrance carries its own perspective() so it tips in 3D everywhere. */
.howworks__step { perspective: 1400px; }
.howworks__step.reveal { transform: perspective(1200px) rotateX(14deg) translateY(36px); transform-origin: 50% 100%; }
.howworks__step.reveal.is-visible { transform: none; }
.howworks__card { position: relative; transform-style: preserve-3d; will-change: transform; }
.howworks__marker { transform: translateZ(56px); transition: background 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.howworks__body { transform: translateZ(28px); }
.howworks__photo { transform: translateZ(0); box-shadow: 0 40px 70px -36px rgba(0, 0, 0, 0.9); transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); }
.howworks__photo::before { content: ''; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.13) 50%, transparent 60%);
  transform: translateX(-70%); transition: transform 1.1s var(--ease); }
.howworks__card:hover .howworks__photo { border-color: rgba(201, 179, 126, 0.45); box-shadow: 0 60px 90px -36px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(201, 179, 126, 0.12); }
.howworks__card:hover .howworks__photo::before { transform: translateX(70%); }
.howworks__card:hover .howworks__photo img { transform: scale(1.04); transition-duration: 1.6s; }
.howworks__card:hover .howworks__marker { box-shadow: 0 0 0 6px rgba(201, 179, 126, 0.16), 0 14px 30px -8px rgba(201, 179, 126, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .howworks__step.reveal { transform: none; }
  .howworks__photo::before { display: none; }
}
/* Phones have no pointer to tilt with, so the layers sit flat there; the tipped entrance stays. */
@media (max-width: 767px) {
  .howworks__step { perspective: none; }
  .howworks__marker, .howworks__body { transform: none; }
}
@media (max-width: 1023px) { .howworks__body h3 { font-size: 1.3rem; } .howworks__list { gap: 1.25rem; } }
@media (max-width: 767px) {
  /* Phones: one step at a time, swiped sideways, rather than three stacked down the page. The rail across
     the top has nothing to span, so it goes, and each step's marker sits above its own photo. A dot per
     step sits underneath (the shared indicator in assets/js/site.js). */
  .howworks__rail { padding-top: 0; }
  .howworks__track { display: none; }
  /* The steps advance with the page. The rail is given a screen of scroll per step and the viewport inside it
     pins, so scrolling down slides the list from one card to the next instead of asking for a sideways swipe
     (assets/js/motion.js drives it). Without the script the list is still an ordinary sideways scroller, and
     the rail's extra height is harmless because the viewport simply sits at the top of it. */
  .howworks__rail { height: calc(var(--howworks-steps, 3) * 78vh); }
  .howworks__viewport { position: sticky; top: calc(var(--nav-h) + 0.5rem);
    height: calc(100svh - var(--nav-h) - 1rem); display: flex; flex-direction: column; justify-content: center; }
  .howworks__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.25rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; }
  .howworks__list::-webkit-scrollbar { display: none; }
  /* Snap is left to the driver: with the page moving the track, a mandatory snap fights it every frame. */
  body.howworks-driven .howworks__list { scroll-snap-type: none; }
  body:not(.howworks-driven) .howworks__list { scroll-snap-type: x mandatory; }
  body:not(.howworks-driven) .howworks__step { scroll-snap-align: start; }
  .howworks__dots { margin-top: 1rem; }
  .howworks__marker { position: static; margin-bottom: 0.9rem; }
  .howworks__photo { aspect-ratio: 16 / 10; }
  .howworks__body h3 { font-size: 1.45rem; }
  .howworks__body p { margin-bottom: 0.75rem; }
}
/* Entrance states apply only while the motion script runs, so nothing is ever hidden without it */
body.motion-on .process__step .process__inner { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
body.motion-on .process__step.is-in .process__inner { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__media { display: none; }
  .process__step { min-height: 0; }
  .process__step-img { display: block; margin: 0 0 1.5rem; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); }
  .process__step-img img { width: 100%; height: 100%; object-fit: cover; }
  .process__num { font-size: 3.6rem; }
}
@media (max-width: 899px) { .stack__card { grid-template-columns: 3rem 1fr; min-height: 0; } .stack__card img { grid-column: 1 / -1; } }

/* ---------- Testimonial spotlight ---------- */
[data-spotlight] { position: relative; }
[data-spotlight]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 179, 126, 0.16), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
[data-spotlight]:hover::before { opacity: 1; }

/* ---------- Parallax band ---------- */
.band--parallax { position: relative; overflow: hidden; isolation: isolate; }
.band__bg { position: absolute; inset: -20% 0; z-index: -1; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.band--parallax::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 13, 0.92) 0%, rgba(11, 11, 13, 0.6) 55%, rgba(11, 11, 13, 0.3) 100%); }
.band__inner--single { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
/* This modifier loads after site.css and was overriding its phone rule, leaving the band two-column on a
   phone with the copy squeezed into the left 7/12 and cut off. */
@media (max-width: 767px) { .band__inner--single { grid-template-columns: 1fr; } }

/* ---------- Magnetic buttons ---------- */
[data-magnetic] { will-change: transform; }

/* ---------- Footer wordmark ---------- */
/* ---------- Signature line: stroked on like handwriting, then inked in (".statement" is taken by the About page) ---------- */
.signature { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--line); overflow: hidden; }
.signature__svg { display: block; width: 100%; height: auto; overflow: visible; }
.signature__text { text-anchor: middle; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 118px; letter-spacing: -0.01em; fill: rgba(248, 247, 243, 0); stroke: var(--accent); stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.reveal.is-visible .signature__text { animation: signature-write 3.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards, signature-ink 1.8s ease 2.6s forwards; }
@keyframes signature-write { to { stroke-dashoffset: 0; } }
@keyframes signature-ink { to { fill: rgba(248, 247, 243, 0.94); stroke: rgba(201, 179, 126, 0.2); } }
.signature__sig { text-align: center; margin: 2rem 0 0; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.signature__sig span { display: inline-block; width: 2.5rem; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 1rem; }
/* Phones: the line used to be blown up to 160% and bled off both sides, which cut its first and last letters;
   it now fits the screen whole. */
@media (max-width: 767px) { .signature__svg { width: 100%; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .signature__text { animation: none !important; fill: var(--white); stroke: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .split-line > span { transform: none !important; }
  .marquee__track { animation: none; }
  [data-clip] { clip-path: none; }
  .signature__text { animation: none; fill: var(--white); stroke: none; }
  .hero__kinetic { display: none; }
}

/* ---------- Tonal backgrounds (kept last so they win): the page is no longer one flat black. Sections sit on
   slightly different shades of the same palette, with soft pools of champagne and platinum light. ---------- */
.hscroll { background:
  radial-gradient(ellipse 55% 60% at 6% 10%, rgba(201, 179, 126, 0.08), transparent 65%),
  radial-gradient(ellipse 40% 50% at 96% 90%, rgba(216, 214, 207, 0.05), transparent 65%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.experience::before { background: linear-gradient(180deg, var(--bg-2) 0%, rgba(11, 11, 13, 0.45) 24%, rgba(11, 11, 13, 0.35) 62%, var(--bg-2) 100%); }
.stats { background:
  radial-gradient(ellipse 50% 75% at 50% 50%, rgba(201, 179, 126, 0.11), transparent 70%),
  linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%); }
.marquee { background: linear-gradient(90deg, var(--bg-3) 0%, #1b1b20 50%, var(--bg-3) 100%); }
.marquee::before { background: linear-gradient(90deg, var(--bg-3), transparent); }
.marquee::after { background: linear-gradient(270deg, var(--bg-3), transparent); }
.process { background:
  radial-gradient(ellipse 45% 60% at 90% 28%, rgba(201, 179, 126, 0.09), transparent 65%),
  radial-gradient(ellipse 45% 45% at 8% 92%, rgba(216, 214, 207, 0.06), transparent 65%),
  var(--bg-2); }
.howworks__photo { background: var(--bg-4); }
.reviews { background:
  radial-gradient(ellipse 60% 55% at 50% 100%, rgba(201, 179, 126, 0.08), transparent 70%),
  linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 35%, var(--bg) 100%); }
.reviews .quote { background: rgba(22, 22, 25, 0.92); }
.signature { background: radial-gradient(ellipse 55% 75% at 50% 50%, var(--bg-3) 0%, var(--bg) 78%); }
.visit-section { background:
  radial-gradient(ellipse 42% 60% at 92% 18%, rgba(216, 214, 207, 0.07), transparent 65%),
  radial-gradient(ellipse 40% 40% at 5% 100%, rgba(201, 179, 126, 0.06), transparent 65%),
  var(--bg-2); }

/* ---------- Fleet, a sticky stack (includes/home-fleet.php) ----------
   One studio photograph fills each card; a frosted panel over its left side carries the copy and the picture
   shows through it. Cards pin a little lower than the one before, so each vehicle slides up over the last and
   the run of edges down the screen shows how far through the fleet you are. assets/js/fleet.js shrinks and
   dims a card as the next one covers it, and drifts the photograph inside its frame. */
.sfleet { position: relative; padding: clamp(7rem, 14vw, 12rem) 0 clamp(6rem, 12vw, 10rem); background: var(--bg); }
/* Exactly the visible card's box (.sfleet__inner: the stack's width less its gutters, capped at
   80vh x 2.25, centred), so the heading starts where the card starts at every screen size. The
   lede keeps its own measure. */
.sfleet__head {
  max-width: none; padding-inline: 0; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 4rem);
  width: min(calc(100% - 2 * var(--gutter)), calc(80vh * 2.25));
}
.sfleet__title { font: 500 clamp(2.2rem, 5vw, 4rem)/1.02 var(--serif); letter-spacing: -0.02em; color: var(--white); margin: 1rem 0 0.9rem; }
.sfleet__lede { margin: 0; max-width: 44ch; color: var(--text-2); }
/* Full width: only a slim gutter, no container cap, so the cards run edge to edge of the viewport. */
.sfleet__stack { padding-inline: var(--gutter); }
.sfleet__card { position: sticky; top: calc(var(--nav-h) + 1.25rem + var(--i) * 0.85rem); margin-bottom: 10vh;
  transform: scale(var(--s, 1)); transform-origin: 50% 0; will-change: transform; }
.sfleet__card:last-child { margin-bottom: 0; }
/* The card is wider than the photographs (2.25:1 against 16:9) so the picture can be shown whole on the
   right with the glass panel beside it rather than over the car. It is as wide as the gutter allows until
   that would make it taller than the screen, then it holds at 80vh and centres. */
.sfleet__inner { position: relative; width: min(100%, calc(80vh * 2.25)); aspect-ratio: 2.25 / 1; margin-inline: auto; border-radius: 24px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.12); background: #0d0d10; box-shadow: 0 34px 90px -44px rgba(0, 0, 0, 0.95);
  filter: brightness(var(--dim, 1)); transition: filter 0.3s linear;
  /* The card is a size container so the picture box can be measured against the room beside the glass. */
  container-type: size; --glass-x: clamp(0.85rem, 1.6vw, 1.4rem); --glass-w: min(30rem, 46cqw); }
/* Behind everything, the same picture blown up and blurred, so the card has no hard edge where the photograph
   stops and the glass has something of the car's own light to sit on. Oversized to keep the blur's faded
   rim outside the frame. */
.sfleet__ambient { position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; object-fit: cover; z-index: 0; pointer-events: none;
  filter: blur(30px) saturate(1.1) brightness(0.55); }
/* The photograph, whole: a box pinned to the right edge at the card's full height, 16:9 unless the card says
   otherwise (--pic-ar, includes/home-fleet.php). The picture's background may run under the glass panel,
   the car may not: the card says where the car begins (--car-x, a fraction of the picture's width), and
   only if full height would put that point behind the panel does the box shrink to the width that keeps
   the car clear, sitting centred. On an ordinary desktop every card is full height; the shrink is for
   narrow laptops. The left edge fades into the blur over --fade of its width; the top and bottom fade
   only by as much as the box is shorter than the card, so a full-height picture has no vertical fade at
   all. --par is the scroll drift from assets/js/fleet.js; a slipped edge only ever shows the blur, so the
   picture needs no zoom to hide it. */
.sfleet__pic { position: absolute; top: 50%; right: 0; z-index: 1; overflow: hidden;
  --room: calc(100cqw - var(--glass-x) - var(--glass-w) - 1.25rem);
  --h: min(100cqh, calc(var(--room) / (1 - var(--car-x, 0.2)) / (var(--pic-ar, 16 / 9))));
  height: var(--h); width: calc(var(--h) * (var(--pic-ar, 16 / 9)));
  --vfade: clamp(0px, calc((100cqh - var(--h)) * 0.6), 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 16%)), linear-gradient(180deg, transparent, #000 var(--vfade), #000 calc(100% - var(--vfade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 16%)), linear-gradient(180deg, transparent, #000 var(--vfade), #000 calc(100% - var(--vfade)), transparent);
  mask-composite: intersect;
  transform: translate3d(0, calc(-50% + var(--par, 0) * 1px), 0) scale(var(--img-s, 1)); transform-origin: 100% 50%;
  transition: transform 1.1s var(--ease); will-change: transform; }
/* Each card sets --focus (includes/home-fleet.php) so the little trim a 3:2 picture gets in the 16:9 box
   comes off sky and floor, never the car. */
.sfleet__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.sfleet__card:hover .sfleet__pic { --img-s: 1.03; }
/* The glass. Sits over the left of the picture; a soft dark ramp behind it keeps the type on its contrast
   where the backlight blows the photograph out. */
.sfleet__glass { position: absolute; left: var(--glass-x); top: clamp(0.85rem, 1.6vw, 1.4rem); bottom: clamp(0.85rem, 1.6vw, 1.4rem);
  width: var(--glass-w); z-index: 2; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.4rem, 2.6vw, 2.4rem); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(28, 28, 33, 0.62), rgba(14, 14, 17, 0.5));
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.sfleet__count { display: block; font: 400 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--serif); letter-spacing: -0.03em; color: transparent;
  -webkit-text-stroke: 1px rgba(216, 214, 207, 0.4); margin-bottom: 1.2rem; }
.sfleet__count i { font: 600 0.58rem/1 var(--sans); font-style: normal; letter-spacing: 0.22em; color: var(--muted); -webkit-text-stroke: 0; vertical-align: 0.75em; }
.sfleet__make { display: block; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem; }
.sfleet__name { margin: 0 0 0.6rem; font: 500 clamp(1.7rem, 2.9vw, 2.7rem)/1.06 var(--serif); letter-spacing: -0.018em; }
.sfleet__name a { color: var(--white); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.45s var(--ease), color 0.3s var(--ease); }
.sfleet__name a:hover { color: var(--accent); background-size: 100% 1px; }
.sfleet__tagline { margin: 0 0 1rem; max-width: 34ch; color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; line-height: 1.5; }
/* Doors, seats and colour each behind their own icon, the way the live site's cards show them. */
.sfleet__specs { margin: 0 0 1.6rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.sfleet__specs li { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.6rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--platinum); }
.sfleet__specs .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; }
.sfleet__price { margin: 0 0 1.4rem; display: flex; align-items: baseline; gap: 0.15rem; }
.sfleet__price b { font: 500 clamp(1.8rem, 2.8vw, 2.4rem)/1 var(--serif); color: var(--white); letter-spacing: -0.02em; }
.sfleet__price span { font: 500 1rem/1 var(--serif); color: var(--platinum); }
.sfleet__cta { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 13rem; padding: 0.95rem 1.7rem; border-radius: 999px;
  background: var(--white); color: #111; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
.sfleet__cta:hover { transform: translateY(-2px); background: var(--accent); }
@media (max-width: 899px) {
  /* Narrow: a portrait window would have to cut a landscape photograph in half, so the card stacks instead:
     the picture sits on top at its own proportions, fully visible, and the glass panel follows underneath. */
  .sfleet__card { top: calc(var(--nav-h) + 0.75rem + var(--i) * 0.5rem); margin-bottom: 7vh; }
  .sfleet__inner { width: 100%; aspect-ratio: auto; border-radius: 18px; container-type: normal; }
  .sfleet__pic { position: relative; top: auto; right: auto; width: 100%; height: auto; -webkit-mask-image: none; mask-image: none;
    transform: translate3d(0, calc(var(--par, 0) * 1px), 0) scale(var(--img-s, 1)); }
  .sfleet__glass { left: auto; width: auto; }
  .sfleet__count { display: none; }
  .sfleet__name { font-size: 1.5rem; margin-bottom: 0.4rem; }
  .sfleet__glass { position: relative; inset: auto; width: auto; margin: 0 0.6rem 0.6rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: 14px; }
  .sfleet__tagline { margin-bottom: 0.7rem; }
  .sfleet__specs { margin-bottom: 1rem; }
  .sfleet__price { margin-bottom: 1rem; }
  /* Both buttons on one row on a phone, so the labels have to lose a little tracking and padding to fit
     on a single line each. */
  .sfleet__cta { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sfleet__card { position: static; transform: none; margin-bottom: 2.5rem; }
  .sfleet__photo, .sfleet__inner { transition: none; }
}
/* ---------- Opening curtain (includes/home-loader.php + assets/js/loader.js) ---------- */
body.loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #08080a;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease); }
.loader.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { display: grid; justify-items: center; width: min(22rem, 78vw); text-align: center; }
.loader__crest { width: 58px; height: auto; opacity: 0.9; margin-bottom: 1.75rem; animation: loader-breathe 3.2s var(--ease) infinite; }
.loader__bar { position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.loader__bar span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* .loader__pct removed: the curtain shows progress with the bar alone, no numeric readout. */
.loader__cue { margin: 1.6rem 0 0; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
  animation: loader-rise 0.7s var(--ease) both; }
.loader.is-ready .loader__bar span { background: var(--white); }
@keyframes loader-rise { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }
@keyframes loader-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

@media (max-width: 767px) {
  /* Portrait banner only. The landscape banner put flat dark stage behind the opening copy; the portrait
     frame puts bright studio haze there instead. line-height:1 leaves Cormorant's descenders sitting on
     the paragraph below - harmless over flat black, but it reads as a collision over the lit frame. Give
     the title its descender room and deepen the scrim behind the copy. */
  .hero--has-portrait .hero__title { line-height: 1.08; margin-bottom: 1rem; }
  .hero--has-portrait .hero__scrim {
    background:
      radial-gradient(ellipse 94% 30% at 50% 12%, rgba(11, 11, 13, 0.92) 0%, rgba(11, 11, 13, 0.8) 52%, rgba(11, 11, 13, 0.34) 78%, rgba(11, 11, 13, 0) 100%),
      linear-gradient(180deg, rgba(11, 11, 13, 0.84) 0%, rgba(11, 11, 13, 0.46) 24%, rgba(11, 11, 13, 0) 44%, rgba(11, 11, 13, 0) 84%, rgba(11, 11, 13, 0.6) 100%);
  }
}

@media (max-width: 767px) {
  /* Portrait banner: the closing caption was pinned just under the bar, which left it hard against the
     logo with an obvious gap before the car roof. Give it a band running from below the header down to
     the top of the car and centre it inside that, so it sits between the menu and the vehicle.
     align-content, not translateY - .hero__caption animates its transform on reveal. */
  .hero--has-portrait .hero__caption--close {
    top: calc(var(--nav-h) + 1rem);
    bottom: 64%;
    display: grid;
    align-content: center;
  }
}

@media (max-width: 767px) {
  /* Portrait banner, opening caption: the gold subtext is dropped on phones - it pushed the lockup hard
     against the wordmark and repeats what the fleet section says just below. Eyebrow and title then sit
     centred in the band between the header and the cars, matching the closing caption. */
  .hero--has-portrait .hero__caption--open {
    top: calc(var(--nav-h) + 1rem);
    bottom: 58%;
    align-items: center;
  }
  .hero--has-portrait .hero__caption--open .hero__text { display: none; }
  .hero--has-portrait .hero__caption--open .hero__title { margin-bottom: 0; }
}