/*
 * ECAR Hero + trust strip + brand strip.
 *
 * Layout: a fluid content column and a fixed-width booking rail on the right,
 * with the photo bleeding to the edge of the viewport rather than sitting in a
 * symmetric card. One restrained gradient on the photo so it dissolves into
 * the content column — no glow, no blobs.
 *
 * The content column used to be capped at 560px with the form pushed to
 * `flex-end` of a 1fr track, which on any screen wider than ~1400px opened a
 * 300px hole down the middle of the hero. The columns now consume the row:
 * text takes the slack, the form is a rail of a known width.
 *
 * Below 1024px the photo becomes a full-bleed background behind the text
 * instead of a stacked block, which is why .ecar-hero is the positioning
 * context for .ecar-hero__media.
 */

.ecar-hero {
  position: relative;
  background-color: var(--ecar-bg);
  overflow: hidden;
}

.ecar-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 412px);
  align-items: stretch;
  gap: 0 clamp(36px, 4vw, 64px);
  max-width: var(--shell);
  min-height: 660px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* align-items:stretch on the grid (rather than center) gives both columns
   a reliable shared height; text and form then center themselves within that
   frame so the hero reads balanced instead of dropping the form too low. */
.ecar-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(52px, 5vw, 78px);
}

.ecar-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ecar-text-secondary);
  margin-bottom: 20px;
}

.ecar-hero__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ecar-text-primary);
  margin-bottom: 20px;
  /* The editor's own line breaks decide where the headline turns (each
     authored line is its own block span), so the cap only has to be wide
     enough that a line never *soft*-wraps on top of that. At 17ch it did:
     "Same-Day Appliance Repair" broke after "Appliance", orphaning "Repair"
     on a line of its own. 25ch clears the longest sensible headline line and
     still stops the H1 running the full width of a fluid column. */
  max-width: 25ch;
  text-wrap: pretty;
}

/* Lines are block spans rather than <br>-separated text so the closing line
   can take its own colour without the highlight bleeding across the wrap. */
.ecar-hero__heading-line {
  display: block;
}

/* The gold closing line — the one place in the headline where the brand's
   metal appears at display size. A flat colour, not a gradient: at 68px a
   two-stop gradient reads as a rendering artefact on the thin strokes. */
.ecar-hero__heading-line--accent {
  color: var(--ecar-gold);
}

.ecar-hero__description {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.1vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ecar-text-secondary);
  max-width: 46ch;
  margin-bottom: 34px;
}

/* --- Promo banner ---
   Reframed from red urgency to plain value.

   Previously: a red-bordered box with a pulsing glow and an expiry date. That
   sells pressure, which is the opposite of what this hero is selling
   (insurance, warranty, someone who picks up the phone). The offer is
   genuinely open-ended — the diagnostic is free while the company collects its
   first reviews — so it now reads as a standing benefit.

   No accent bar, no corner gradient, no glow. The panel is a flat surface with
   one hairline and the type doing the work: the price row is the loudest thing
   in it because the price is the message. Red survives only on the strike
   through the old figure, where it means "was" rather than "hurry".

   Width is capped independently of the content column — a discount panel
   stretched across 880px stops reading as a price tag. */
/* No card. Everything else in this theme separates with hairlines and
   whitespace — the CSS for the services ledger says so in as many words —
   and a filled, rounded, bordered panel in the middle of that read as a
   supermarket sticker. The offer is unchanged; only its packaging is gone.

   It needs no rule of its own either: the trust strip directly above ends
   with one, and a second line 28px under it would just look like a mistake. */
/* --- Offer + actions row ---
   Bottom-aligned rather than centred: the buttons then sit on the same
   baseline as the offer's last line, which is what makes the pair read as one
   block instead of two things that happen to be next to each other. Wraps to
   two rows on a narrow column, where the buttons fall under the offer exactly
   as they used to. */
.ecar-hero__offer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px clamp(24px, 3vw, 44px);
  margin-bottom: 16px;
}

.ecar-promo-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sized by the row it now shares with the buttons, not by a fixed cap. It
     may shrink to ~280px before the row wraps. */
  flex: 1 1 280px;
  min-width: 0;
  max-width: 460px;
}

/* Solid red tab, not a gold outline pill: the badge names the offer and has
   to be the first thing read in the panel. White on --ecar-promo-deep is
   ~5.4:1, which is why the badge uses the deep tone rather than the bright
   --ecar-promo kept for the price strike. */
.ecar-promo-banner__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  color: var(--ecar-gold);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ecar-promo-banner__badge-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ecar-promo-banner__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* Own line above the figures. Inline with them it was the first thing to get
   pushed onto a second row on a phone, which broke the price apart. */
.ecar-promo-banner__price-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ecar-text-secondary);
  /* The panel's own 14px flex gap is right between blocks but too loose
     between a label and the figure it labels; this pulls the pair to ~7px
     without adding a wrapper element around them. */
  margin-bottom: -7px;
}

/* Red survives in exactly one place: the strike on the superseded price.
   text-decoration-color lets the number itself stay legible grey while the
   rule across it carries the "was" signal. */
.ecar-promo-banner__price-old {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ecar-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--ecar-promo);
  text-decoration-thickness: 2px;
}

.ecar-promo-banner__price-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ecar-gold);
}

.ecar-promo-banner__price-new {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ecar-text-primary);
}

/* "FREE" reads as the third figure in the price line, not as a chip stuck
   to it: same weight as the $0, in the brand orange, so the row scans
   "$59.99 → $0 FREE" in one pass. */
.ecar-promo-banner__price-tag {
  display: inline-flex;
  align-items: center;
  color: var(--ecar-gold-strong);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Two lines under the hairline: what the offer is, then who it is for.
   Previously one sentence whose emphasised half explained the offer by the
   company's review count — that wording is gone at the client's request. */
.ecar-promo-banner__footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-family: var(--font-sans);
}

.ecar-promo-banner__footer-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ecar-text-primary);
}

.ecar-promo-banner__footer-note {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ecar-text-secondary);
}

/* Wraps rather than squeezing: both buttons carry a second line, and a
   translated or edited label must be allowed to push the pair onto two rows
   instead of clipping. */
.ecar-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  flex: 0 1 auto;
}

/* --- CTA reassurance line ---
   The condition attached to the same-day promise, kept directly under the
   buttons so it reads as part of the offer rather than as fine print bolted
   onto the footer. It closes the content column now that the trust strip has
   moved above the offer, so it carries no bottom margin of its own — the
   column's padding does that job. */
.ecar-hero__cta-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ecar-text-secondary);
}

.ecar-hero__cta-note-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--ecar-success);
}

/* --- Trust strip ---
   Hairline dividers between items rather than plain grid-gap: it reads as one
   deliberate bar instead of loose columns, and the same device carries over to
   the brand strip below so the two feel like one system.

   POSITION: directly under the hero description, above the offer and the
   buttons. It used to close the content column, which put it a full screen
   down on a phone — insured / warrantied / same-day / rated is exactly what
   a first-time visitor is checking for before they read anything else, so it
   now sits in the first screenful on every device.

   The Google rating is the strip's last cell, not a separate row underneath.
   Four claims on one line is what the brief asked for, and it saves ~80px of
   hero height — which is the difference between the trust strip being above
   or below the fold on a 1366×768 laptop. */
.ecar-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 28px;
  padding-top: 24px;
  padding-bottom: 26px;
  border-top: 1px solid var(--ecar-border);
  border-bottom: 1px solid var(--ecar-border);
}

/* The bottom edge was ragged because cell 3's text wraps to two lines while
   the others are one, so the strip's closing rule sat well below the short
   cells. Reserving two lines in every cell squares it off, and survives an
   editor rewording any of the three. */
.ecar-trust__text {
  min-height: 2.8em;
}

/* Icon above the copy, not beside it. Beside it, three columns inside a
   560px content well leave ~115px of text width, which is not enough for
   "90-DAY WARRANTY" to stay on one line — and a trust badge that wraps
   mid-phrase stops reading as a badge. Stacking gives each column its full
   width for the label. */
.ecar-trust__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 20px;
}

.ecar-trust__item:first-child {
  padding-left: 0;
}

.ecar-trust__item:last-child {
  padding-right: 0;
}

.ecar-trust__item + .ecar-trust__item {
  border-left: 1px solid var(--ecar-hairline);
}

/* Gold icon in a gold-washed square rather than a bare stroke on black: the
   plate gives the 22px mark enough visual mass to hold its own column, and
   it is the device repeated in Why Choose Us and the services grid so the
   iconography reads as one set. */
.ecar-trust__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1px solid var(--ecar-gold-line);
  border-radius: 10px;
  background-color: var(--ecar-gold-quiet);
  color: var(--ecar-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecar-trust__icon svg,
.ecar-trust__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Heavier than the 1.6 the inline SVGs carry as a presentation attribute
   (CSS wins over it). At 22px a 1.6px line reads as a grey smudge on a
   phone; 1.85 keeps the mark legible without turning it into a glyph. */
.ecar-trust__icon svg {
  stroke-width: 1.85;
}

.ecar-trust__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ecar-trust__title {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ecar-text-primary);
}

.ecar-trust__text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ecar-text-secondary);
}

/* --- Kicker row: eyebrow + Google rating ---

   The rating sits here, on one quiet line above the headline, rather than as
   a fourth cell of the trust strip below. Two reasons. A rating is not a
   guarantee: the three cells under the headline answer "will this go wrong for
   me", while the rating answers "is this company real", which is a question
   asked earlier. And visually, a four-colour Google mark with gold stars next
   to three matched gold plates broke the set — the strip stopped reading as
   one row of three equal claims.

   Small, muted, one line. It is corroboration, not a badge. */
.ecar-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 20px;
}

/* Its own margin moves to the row. */
.ecar-hero__kicker .ecar-hero__eyebrow {
  margin-bottom: 0;
}

/* No divider between the two halves: the row wraps on a narrow column, and a
   left border on a wrapped item hangs in the middle of nothing. */
.ecar-hero__proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--ecar-text-secondary);
  transition: color var(--dur) var(--ease);
}

.ecar-hero__proof-mark {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ecar-hero__proof-mark svg {
  width: 100%;
  height: 100%;
}

.ecar-hero__proof-text strong {
  color: var(--ecar-text-primary);
  font-weight: 700;
}

a.ecar-hero__proof:hover,
a.ecar-hero__proof:focus-visible {
  color: var(--ecar-text-primary);
}

a.ecar-hero__proof:hover .ecar-hero__proof-text strong,
a.ecar-hero__proof:focus-visible .ecar-hero__proof-text strong {
  color: var(--ecar-gold-strong);
}

.ecar-hero__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--ecar-gold);
}

.ecar-hero__star {
  width: 13px;
  height: 13px;
}

.ecar-hero__star--empty {
  color: var(--ecar-border-strong);
}

/* --- Media + booking stage --- */
.ecar-hero__stage {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 660px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block: clamp(52px, 5vw, 78px);
}

.ecar-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ecar-hero__media-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--ecar-surface);
}

/* Slides stack on top of each other; main.js toggles .is-active on a timer
   for a crossfade. With a single slide (the common case) this is a static
   photo and no JS runs at all. */
.ecar-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.ecar-hero__slide.is-active {
  opacity: 1;
}

.ecar-hero__media-placeholder {
  position: absolute;
  inset: 0;
  background-color: var(--ecar-surface);
  border: 1px dashed var(--ecar-border);
}

/* Whole-hero background image with a dark left overlay for legibility and a
   softer right-side veil so the photo still remains visible behind the form. */
.ecar-hero__media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.92) 24%, rgba(8, 8, 8, 0.76) 42%, rgba(8, 8, 8, 0.44) 64%, rgba(8, 8, 8, 0.3) 100%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.14) 0%, rgba(8, 8, 8, 0.54) 100%);
  z-index: 2;
  pointer-events: none;
}

.ecar-hero__form-wrap {
  position: relative;
  z-index: 4;
  width: min(396px, 100%);
  margin-left: auto;
}

.ecar-hero__form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding: 9px 12px;
  background: rgba(12, 12, 12, 0.92);
  border: 1px solid var(--ecar-border-strong);
  border-bottom: 0;
  color: var(--ecar-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ecar-hero__form-status,
.ecar-hero__form-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ecar-hero__form-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background-color: var(--ecar-success);
}

.ecar-hero__form-wrap .ecar-form {
  background: rgba(21, 21, 21, 0.94);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.48);
  padding: 26px 28px 26px;
}

@supports (backdrop-filter: blur(12px)) {
  .ecar-hero__form-meta,
  .ecar-hero__form-wrap .ecar-form {
    backdrop-filter: blur(12px);
  }
}

.ecar-hero__form-wrap .ecar-form__eyebrow {
  font-size: 0.8125rem;
  margin-bottom: 16px;
}

.ecar-hero__form-wrap .ecar-form__field {
  margin-bottom: 14px;
}

.ecar-hero__form-wrap .ecar-form__label {
  margin-bottom: 6px;
}

.ecar-hero__form-wrap .ecar-form__input {
  padding: 11px 12px;
}

.ecar-hero__form-wrap .ecar-form__phone-group {
  padding-inline: 12px;
}

.ecar-hero__form-wrap .ecar-form__phone-input {
  padding: 11px 0;
}

.ecar-hero__form-wrap .ecar-form__submit {
  min-height: 44px;
  padding-block: 12px;
}

.ecar-hero__form-wrap .ecar-form__status {
  margin-top: 10px;
  min-height: 1.2em;
}

/* --- Brand strip ---
 * Rebuilt. The previous version wrapped the heading in a rounded panel with a
 * pulsing navy bar and a repeating light sweep, and put every logo in its own
 * 18px-radius card: three ambient animations and fourteen identical rounded
 * boxes doing the work that one hairline rhythm does better.
 *
 * Now: a titled rail on the left, separated from the track by a single
 * vertical rule, and logos sitting in hairline-divided slots — the same device
 * as the trust strip above, so the two read as one system. The only motion is
 * the marquee itself, which is the section's actual message ("we work on a lot
 * of brands"), and it pauses on hover/focus and stops entirely under
 * prefers-reduced-motion.
 */
.ecar-brands {
  position: relative;
  background-color: var(--ecar-bg-secondary);
  border-block: 1px solid var(--ecar-border);
  overflow: hidden;
}

.ecar-brands__inner {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.ecar-brands__label-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 26px 32px 26px 0;
  border-right: 1px solid var(--ecar-border);
}

.ecar-brands__label {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ecar-text-primary);
  text-wrap: balance;
}

.ecar-brands__description {
  margin: 0;
  color: var(--ecar-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 34ch;
}

.ecar-brands__viewport {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
}

/* Edge fades tell the eye the track continues past the frame. Masked rather
   than overlaid with gradient blocks, so it works over any band color. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .ecar-brands__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}

.ecar-brands__list {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: ecar-brands-marquee 38s linear infinite;
  will-change: transform;
}

.ecar-brands:hover .ecar-brands__list,
.ecar-brands:focus-within .ecar-brands__list {
  animation-play-state: paused;
}

.ecar-brands__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  min-height: 108px;
  padding: 26px 22px;
  border-right: 1px solid var(--ecar-hairline);
}

/* Logos keep their own brand colors — no filter, no forced monochrome.
   Height-normalised with a width ceiling: brand marks here range from a 1:1
   monogram to a 7.7:1 wordmark, and constraining both axes is what stops the
   widest mark from dwarfing the squarest one. */
.ecar-brands__logo {
  display: block;
  max-height: 32px;
  max-width: 108px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ecar-brands__item--more {
  width: auto;
  padding-inline: 26px;
  color: var(--ecar-text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

@keyframes ecar-brands-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Entrance ---
   One 480ms fade-up on first paint, nothing that repeats or follows scroll. */
@media (prefers-reduced-motion: no-preference) {
  .ecar-hero__content,
  .ecar-hero__stage {
    animation: ecar-fade-up 480ms var(--ease) both;
  }

  .ecar-hero__stage {
    animation-delay: 80ms;
  }
}

@keyframes ecar-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Responsive ---
 *
 * The laptop range is the one that actually needed work here, and it needed it
 * vertically, not horizontally. A 1366×768 or 1536×864 screen gives the hero
 * roughly 690780px of usable height once the sticky header is subtracted, and
 * this hero now stacks eyebrow, H1, lede, offer panel, two two-line buttons, a
 * reassurance line and a four-cell trust strip. At desktop spacing that column
 * measures ~920px, so on every laptop the trust strip — the whole point of the
 * block — sat below the fold.
 *
 * Two things fix it, and neither is a font-size hack: the vertical rhythm
 * tightens by viewport *height* rather than width (a 27" monitor at 1440px wide
 * keeps the roomy spacing; a laptop at the same width does not), and the offer
 * panel's own internal padding comes down with it.
 */

/* ~1500px and below: the booking rail stops growing before the text column
   does, since a wider form adds nothing but a wider input. */
@media (max-width: 1499px) {
  .ecar-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(344px, 384px);
  }

  .ecar-hero__form-wrap {
    width: 100%;
  }
}

/* Short viewports — laptops, and any window that isn't full-screen. Keyed to
   height so the same 1440px-wide layout can breathe on a tall monitor and
   compress on a 768px-tall laptop. */
@media (max-height: 900px) and (min-width: 1024px) {
  .ecar-hero__inner,
  .ecar-hero__stage {
    min-height: 0;
  }

  /* 32px, not 40: measured on a 1366x768 laptop the trust strip's bottom edge
     landed 7px past the fold at 40px. This is the whole reason the block was
     restructured, so it gets the 12px it needs. */
  .ecar-hero__content,
  .ecar-hero__stage {
    padding-block: 32px;
  }

  /* The eyebrow repeats the wordmark that is already in the sticky header two
     inches above it. On a tall screen that repetition is a harmless frame for
     the H1; on a short one it costs 29px that the trust strip needs in order
     to stay above the fold, and the trust strip is the point of the block. */
  .ecar-hero__eyebrow {
    display: none;
  }

  .ecar-hero__heading {
    font-size: clamp(2.25rem, 3.1vw, 3rem);
    margin-bottom: 14px;
  }

  .ecar-hero__description {
    font-size: 1rem;
    margin-bottom: 22px;
  }

  .ecar-promo-banner {
    gap: 8px;
  }

  .ecar-trust {
    padding-top: 18px;
    padding-bottom: 20px;
    margin-bottom: 22px;
  }

  .ecar-trust__item {
    gap: 9px;
  }

  .ecar-trust__icon {
    width: 34px;
    height: 34px;
    padding: 7px;
  }
}

/* Very short (1280×720, or a half-height window). The trust descriptions stay:
   an earlier revision dropped them here, which shrank exactly the content the
   block exists to deliver. Measurement says they fit, so they stay and the
   headline gives up the space instead. */
@media (max-height: 740px) and (min-width: 1024px) {
  .ecar-hero__content,
  .ecar-hero__stage {
    padding-block: 26px;
  }

  .ecar-hero__heading {
    font-size: clamp(2rem, 2.6vw, 2.375rem);
    margin-bottom: 12px;
  }

  .ecar-hero__description {
    margin-bottom: 18px;
  }
}

@media (max-width: 1199px) {
  .ecar-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 0 28px;
    min-height: 0;
  }

  .ecar-hero__stage {
    min-height: 0;
  }

  .ecar-hero__form-wrap {
    width: 100%;
  }

  /* Four trust cells stop fitting before the layout formally goes tablet:
     at 1100px the text column is ~700px, so 2×2 reads better than 4×1. */
  .ecar-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }

  .ecar-trust__item:nth-child(n+3) {
    padding-top: 16px;
    border-top: 1px solid var(--ecar-hairline);
  }

  .ecar-trust__item:nth-child(odd) {
    padding-left: 0;
  }

  .ecar-trust__item:nth-child(3) {
    border-left: 0;
  }

  .ecar-hero__form-wrap .ecar-form {
    padding: 24px;
  }

  .ecar-brands__inner {
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  }

  .ecar-brands__label-wrap {
    padding-right: 26px;
  }

  .ecar-brands__item {
    width: 156px;
    min-height: 96px;
    padding: 22px 18px;
  }
}

@media (max-width: 1023px) {
  .ecar-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-inline: var(--gutter);
  }

  .ecar-hero__content {
    padding-block: clamp(44px, 7vw, 60px) 30px;
  }

  .ecar-hero__stage {
    min-height: 0;
    justify-content: flex-start;
    padding-block: 0 44px;
  }

  .ecar-hero__media-frame::before {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.82) 100%),
      linear-gradient(90deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.46) 100%);
  }

  .ecar-hero__description {
    max-width: 54ch;
  }

  .ecar-hero__form-wrap {
    width: min(420px, 100%);
    margin-left: 0;
  }

  .ecar-brands__inner {
    grid-template-columns: 1fr;
  }

  .ecar-brands__label-wrap {
    padding: 22px 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--ecar-border);
  }

  .ecar-brands__viewport {
    margin-inline: calc(var(--gutter) * -1);
  }
}

/* Three trust columns stop working before the layout formally becomes mobile:
   at 768px each column is ~230px, which breaks "EXPERIENCED TECHNICIANS" onto
   three lines.

   Two columns, not one. The strip sits in the first screenful now, so its own
   height is the constraint: four full-width rows with a hairline between each
   ran to ~290px and pushed the offer and the call button off the phone
   screen, which is the opposite of the point. A 2×2 block of icon-beside-copy
   cells holds all four claims in ~150px. */
@media (max-width: 899px) {
  /* The reserved second line squares off a multi-column row. Once the cells
     stack it only adds dead space under each one. */
  .ecar-trust__text {
    min-height: 0;
  }

  .ecar-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }

  /* Back to icon-beside-copy once each cell owns half a row: a stacked
     icon in a narrow cell wastes a whole line of height per item. */
  .ecar-trust__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
  }

  /* No dividers inside the block — at this size the 2×2 grid is already read
     as one unit by the rules above and below it, and eight hairlines in a
     150px band just looks noisy. */
  .ecar-trust__item + .ecar-trust__item,
  .ecar-trust__item:nth-child(n+3) {
    border-left: 0;
    border-top: 0;
    padding-top: 0;
  }

  .ecar-trust__icon {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 9px;
  }

  /* 11px keeps "90-DAY WARRANTY" and "SAME-DAY SERVICE" on one line in a
     half-width cell; at 12px both wrapped and the badges stopped scanning. */
  .ecar-trust__title {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }

  .ecar-trust__text {
    font-size: 0.75rem;
    line-height: 1.35;
  }
}

@media (max-width: 767px) {
  .ecar-hero__inner {
    padding-inline: var(--gutter);
  }

  .ecar-hero__content {
    padding-block: 38px 30px;
  }

  .ecar-hero__stage {
    min-height: 0;
    padding: 0 0 30px;
  }

  .ecar-hero__media-frame::before {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.72) 0%, rgba(8, 8, 8, 0.86) 100%);
  }

  .ecar-hero__form-wrap {
    width: 100%;
    max-width: 480px;
    margin-left: 0;
  }

  .ecar-hero__form-wrap .ecar-form {
    padding: 24px 22px;
  }

  .ecar-hero__form-meta {
    gap: 10px;
    font-size: 0.625rem;
    letter-spacing: 0.045em;
  }

  .ecar-hero__heading {
    font-size: clamp(2.25rem, 8.4vw, 2.75rem);
    margin-bottom: 16px;
  }

  .ecar-hero__description {
    font-size: 1rem;
    margin-bottom: 26px;
  }

  /* Full row of its own once the column is this narrow: side by side, the
     offer and the buttons would each be too cramped to read. */
  .ecar-promo-banner {
    flex: 1 1 100%;
    max-width: none;
  }

  .ecar-promo-banner__price-new {
    font-size: 1.5rem;
  }

  .ecar-promo-banner__price-old {
    font-size: 1rem;
  }

  .ecar-hero__cta-group {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ecar-hero__cta-group .ecar-btn {
    width: 100%;
  }

  .ecar-brands__label {
    font-size: 0.9375rem;
  }

  .ecar-brands__item {
    width: 138px;
    min-height: 84px;
    padding: 18px 14px;
  }

  .ecar-brands__logo {
    max-height: 28px;
    max-width: 94px;
  }

  .ecar-brands__item--more {
    padding-inline: 20px;
  }

  .ecar-brands__list {
    animation-duration: 28s;
  }
}

/* Motion preference.
   NOTE: the previous version targeted .ecar-brands__label::before/::after
   while the animations were declared on .ecar-brands__label-wrap::before/
   ::after — so the pulse and the sweep kept running for users who had asked
   for reduced motion. Those decorations are gone; what remains is the marquee,
   which is genuinely disabled here and becomes a manually scrollable track. */
@media (prefers-reduced-motion: reduce) {
  .ecar-hero__slide {
    transition: none;
  }

  .ecar-brands__list {
    animation: none;
    width: auto;
  }

  .ecar-brands__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The duplicated half only exists to make the marquee seamless. */
  .ecar-brands__item--duplicate {
    display: none;
  }
}