/* ============================================================
   CARRERA: the /interior and /exterior pages only.
   Loaded after red.css. The main page loads it too, for the same hero
   plate (its three photos crossfade where these pages play a clip). Everything is scoped to .hero--v / .lp-v
   or to the modifier classes these two pages add.
   ============================================================ */

/* ---------------- hero: Laz's own footage ----------------
   Phone: the clip is a full-bleed band; only the headline sits on it,
   on a scrim no taller than the headline, so the work above stays clear.
   Desktop: the clip is a plate that bleeds off the right edge, full hero
   height; copy and form stand on the page ground, no scrim at all. */
.hero--v { padding-bottom: 44px; }
.hv { position: relative; margin: 0; overflow: hidden; background: #000; }
.hv picture, .hv__still, .hv__vid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hv__still, .hv__vid { object-fit: cover; object-position: 50% 50%; }
/* the still is the clip's own first frame: the fade is a change of state, not of picture */
.hv__vid { opacity: 0; transition: opacity .6s cubic-bezier(.23, 1, .32, 1); }
/* LCP: Chrome rounds the still's area to whole pixels but not the clip's, so on a band with a
   fractional size the clip's first frame "wins" by a fraction and becomes the LCP. The band and
   the panel are therefore snapped to whole pixels below (round()), which keeps the still as the
   LCP with the clip drawn on exactly the same box. */
.hv__vid.is-on { opacity: 1; }
/* a shade under the top bar only, so the mark and the switch read on any frame */
.hv::before { content: ""; position: absolute; inset: 0 0 auto; height: 130px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)); }
.hv figcaption { display: none; }
/* main page: three finished jobs stacked in the plate, fx.js crossfades them */
.hv .hs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s cubic-bezier(.23, 1, .32, 1); }
.hv .hs.is-on { opacity: 1; }
.fx .hv .hs.is-on { animation: heroDrift 3.2s linear both; }
.fx .hv .hs:nth-of-type(2n).is-on { animation-name: heroDrift2; }
.hv figcaption.is-swap { animation: labelSwap .7s cubic-bezier(.23, 1, .32, 1); }

@media (width < 60rem) {
  .hero--v { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr) var(--gut); }
  .hero--v .hero__in, .hero--v .hero__copy { display: contents; }
  /* the band is capped by the screen's HEIGHT, so a short phone (or a phone on its side) still
     shows the headline, the rating and the offer on the card in its first screen */
  .hero--v .hv { grid-column: 1 / -1; grid-row: 1; height: clamp(240px, 60svh, 620px); height: round(down, clamp(240px, 60svh, 620px), 1px); }
  .hero--v h1 { grid-column: 2; grid-row: 1; align-self: end; position: relative; z-index: 2; padding-bottom: 22px; font-size: clamp(30px, min(11.4vw, 8.5svh), 84px); }
  /* phones: headline, the promise, rating, then the offer and the form (Sharif 2026-10-06) */
  .hero--v .hero__sub { grid-column: 2; grid-row: 2; margin-top: 18px; }
  .hero--v .rating { grid-column: 2; grid-row: 3; margin-top: 14px; }
  .hero--v .qf { grid-column: 2; grid-row: 4; margin-top: 18px; }
  /* the scrim belongs to the headline: it starts a little above it and ends at the band's edge */
  .hero--v h1::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); top: -64px; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,.84) 70%, rgba(0,0,0,.9) 100%);
  }
  :root[data-theme] .hero--v h1 { color: #FFFFFF; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  :root[data-theme] .hero--v h1 .rw { color: #FF4557; }
  /* the bar sits on the clip here, in both modes: white mark, white switch */
  :root[data-theme] .lp-v .nav .brand img { filter: none; }
  :root[data-theme] .lp-v .nav .mode { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
}

@media (min-width: 60rem) {
  .hero--v {
    --hv-w: clamp(420px, 46vw, 820px);
    --hv-w: round(down, clamp(420px, 46vw, 820px), 1px);
    display: grid; grid-template-columns: minmax(0, 1fr) var(--hv-w);
    min-height: clamp(720px, 100svh, 980px); padding-bottom: 0; container-type: inline-size;
  }
  .hero--v .hv { grid-column: 2; grid-row: 1; }
  .hero--v .hero__in {
    grid-column: 1; grid-row: 1; max-width: none; margin: 0;
    grid-template-columns: minmax(0, 560px); align-content: center; gap: 24px;
    /* the left edge lines up with the top bar's wrap at every width */
    padding: 100px 56px 40px max(var(--gut), calc(50cqw - 620px + var(--gut)));
  }
  .hero--v .hero__copy, .hero--v .qf { grid-column: 1; }
  .hero--v .qf { max-width: 520px; }
  /* sized by width AND height, so name, phone and Continue clear the fold on a 720px-tall laptop */
  .hero--v h1 { font-size: clamp(44px, min(4.4vw, 7svh), 66px); }
  .hero--v .hero__sub { margin-top: 18px; max-width: 46ch; font-size: 18px; }
  .hero--v .rating { margin-top: 16px; }
  .hv figcaption {
    display: block; position: absolute; left: 22px; bottom: 20px; z-index: 2;
    font: 800 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF;
    text-shadow: 0 1px 10px rgba(0,0,0,.75);
  }
  .hv::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.4), rgba(0,0,0,0)); }
  /* the switch sits on the clip until the bar sticks and turns to page ground */
  :root[data-theme] .lp-v .nav:not(.is-stuck) .mode { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
}

/* ---------------- services: one side of the house, no tabs ---------------- */
.sec--svc .svcl { margin-top: 26px; }
@media (min-width: 64rem) { .svcl--6 { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- three before/afters ---------------- */
.bas--3 .bax:first-child { grid-column: 1 / -1; }
.bas--3 .bax:first-child .ba { aspect-ratio: 4 / 5; }
@media (min-width: 40rem) { .bas--3 .bax:first-child .ba { aspect-ratio: 16 / 11; } }
@media (min-width: 60rem) {
  .bas--3 { grid-template-columns: repeat(3, 1fr); }
  .bas--3 .bax:first-child { grid-column: auto; }
  .bas--3 .bax:first-child .ba { aspect-ratio: 3 / 4; }
}

/* ---------------- the offer, on both form cards ---------------- */
.card__offer { margin-top: 6px; font: 600 15.5px/1.35 var(--f-body); color: var(--ink-2); }
.qf .card__offer + .qf__meter { margin-top: 12px; }
.qform .card__offer { margin-top: -6px; margin-bottom: 4px; }