/*
 * ECAR About page — editorial retelling of the old "About Us" page in the
 * site's own visual language: hairline-divided registers, dotted ledgers,
 * a navy panel used as material, and eyebrow-led sections. No icon-card
 * grids, no drop shadows, no rounded feature boxes — same discipline as
 * the homepage sections in hero.css / why-choose-us.css / promise.css.
 *
 * Six sections, alternating bands, exactly one loud (fs-h2-lg) moment
 * besides the H1 — the honesty/repair-or-replace section — so the page
 * has one clear hook instead of every heading shouting equally.
 */

/* --- Shared: eyebrow --- */
.ecar-about-head__eyebrow,
.ecar-letter__eyebrow,
.ecar-honesty__eyebrow,
.ecar-values__eyebrow,
.ecar-process__eyebrow,
.ecar-visit__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ecar-text-secondary);
}

/* =========================================================================
   1. Masthead
   The background photo is optional. Without one, `.has-photo` never
   applies and every rule below that depends on it is inert — the section
   renders exactly as it did before this photo layer existed.
   ========================================================================= */
.ecar-about-head {
  position: relative;
  background-color: var(--ecar-bg);
  padding-block: var(--sp-section-lg) var(--sp-section);
  overflow: hidden;
}

.ecar-about-head.has-photo {
  display: flex;
  align-items: center;
  min-height: clamp(460px, 58vw, 620px);
  padding-block: clamp(64px, 9vw, 100px);
}

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

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

.ecar-about-head__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark scrim over the whole photo. This masthead's text runs the full width
   rather than sitting in a solid-background column like the homepage hero, so
   a directional gradient leaves parts of the photo far too bright for the
   heading and lede on top of it. Heaviest at the very bottom, where the meta
   row's hairlines sit.
 *
 * z-index matters here and was the actual bug: ::before is the frame's FIRST
 * child, while .ecar-about-head__photo is a later positioned sibling, so with
 * both on `z-index: auto` the photo painted straight over the scrim and the
 * masthead rendered at full brightness. (The homepage hero's equivalent scrim
 * has always carried an explicit z-index, which is why it never showed this.)
 *
 * Strength: a daylight exterior shot — bright sky, pale concrete — is the
 * worst case this page has to survive, and 65% was not enough to bring one
 * under white text. 0.78–0.88 keeps the photo readable as a photo while the
 * type sits at roughly 12:1 against it. */
/* Two stacked gradients instead of one flat wash. The horizontal pass keeps
   the text column near-opaque and lets the photo actually read on the right
   third — a masthead photo that is 80% blacked out everywhere is just an
   expensive dark rectangle. The vertical pass re-darkens the bottom, where
   the meta row's hairlines and the badge cards sit.

   Type over the lighter right side is still ~9:1: the headline is white at
   40px+, and the lede/meta never extend into that zone (see the width caps
   below). */
.ecar-about-head.has-photo .ecar-about-head__media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 6, 6, 0.95) 0%, rgba(6, 6, 6, 0.92) 38%, rgba(6, 6, 6, 0.62) 68%, rgba(6, 6, 6, 0.42) 100%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.40) 0%, rgba(6, 6, 6, 0.10) 26%, rgba(6, 6, 6, 0.55) 72%, rgba(6, 6, 6, 0.92) 100%);
}

/* Editorial caption over the photo: three short words stacked on their own
   lines with a rule under them, which is what stops it reading as stray body
   text sitting on a photo. Positioned inside the content column (see the note
   in section-about-intro.php) — the column's top-right corner is empty at
   this width because the headline is capped at 15ch. */
.ecar-about-head__photo-caption {
  position: absolute;
  z-index: 2;
  /* Beside the headline block, not pinned to the very corner — and offset by
     the shell's own gutter, since an absolute `right: 0` here resolves to the
     padding-box edge and would hang the caption into the page margin. */
  top: clamp(72px, 9vw, 124px);
  right: var(--gutter);
  max-width: 8ch;
  margin: 0;
  padding-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(245, 245, 245, 0.88);
}

.ecar-about-head__photo-caption::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  background-color: var(--ecar-gold);
}

/* Admin-only hint shown while no photo is uploaded yet — visitors never see
   an empty dashed box; they just see the plain (non `.has-photo`) section. */
.ecar-about-head__media-hint {
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed var(--ecar-border-strong);
  text-align: center;
}

.ecar-about-head__media-hint p {
  margin: 0;
  max-width: 36ch;
  color: var(--ecar-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ecar-about-head__media-hint strong {
  color: var(--ecar-text-primary);
}

.ecar-about-head__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ecar-about-head.has-photo .ecar-about-head__lede {
  color: #D7D7D7;
}

.ecar-about-head.has-photo .ecar-about-head__meta {
  border-top-color: rgba(245, 245, 245, 0.22);
}

.ecar-about-head.has-photo .ecar-about-head__meta li + li {
  border-left-color: rgba(245, 245, 245, 0.16);
}

.ecar-about-head.has-photo .ecar-about-head__meta-label {
  color: #BFBFBF;
}

.ecar-about-head__title {
  max-width: 15ch;
  margin: 0 0 22px;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* One line per row without relying on <br>, so the accent can be applied per
   line and a three-line heading still behaves. */
.ecar-about-head__title-line {
  display: block;
}

.ecar-about-head__title-line--accent {
  color: var(--ecar-accent);
}

/* 52ch, not 62ch: the lede has to stop before the photo's lighter right
   third, and a 62ch measure is past the comfortable reading limit anyway. */
.ecar-about-head__lede {
  max-width: 52ch;
  margin: 0 0 40px;
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ecar-text-secondary);
}

/* Even columns rather than content-width cells: `grid-auto-flow: column` with
   1fr tracks means the row stays balanced whatever the four values are, and
   it still works if an editor clears one of them. */
.ecar-about-head__meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid var(--ecar-border);
}

.ecar-about-head__meta li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 26px;
}

.ecar-about-head__meta li:first-child {
  padding-left: 0;
}

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

.ecar-about-head__meta-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecar-text-muted);
}

.ecar-about-head__meta-value {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ecar-text-primary);
}

/* --- Credential badges ---
   Four centred cards under the meta row: a 44px line mark over a short
   uppercase claim. No filled icon plate here (unlike the homepage's trust
   strip and Why-Choose cards): four plates in a row directly under a
   hairline table turned the top of the page into a control panel. The mark
   sits bare on the card, which is quieter and lets the four silhouettes do
   the identifying.

   The cards are also the page's one hover-less block on purpose — they are
   statements, not links. */
.ecar-about-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.ecar-about-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 148px;
  padding: 24px 14px 20px;
  text-align: center;
  background-color: var(--ecar-surface);
  border: 1px solid var(--ecar-hairline);
  border-radius: 12px;
}

/* On a photo masthead the cards sit on top of the image, so they need a
   ground of their own to stay readable. */
.ecar-about-head.has-photo .ecar-about-badges__item {
  background-color: rgba(13, 13, 13, 0.86);
  border-color: rgba(245, 245, 245, 0.16);
}

.ecar-about-badges__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--ecar-gold);
}

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

/* 1.5 across all four marks: the SVGs deliberately declare no stroke-width
   so the weight is set once here and none of them can drift. */
.ecar-about-badges__icon svg {
  stroke-width: 1.5;
}

/* Balanced two- and three-line labels: the row only reads as a set if the
   captions wrap at the same rhythm, hence the tight measure and the
   text-wrap hint rather than per-card line breaks. */
.ecar-about-badges__title {
  max-width: 15ch;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ecar-text-primary);
}

/* =========================================================================
   1b. How We Work — four numbered commitments in a navy panel.
       Reuses the pricing promise's "navy as material" device (see
       promise.css) so the page's loudest structural block is the one making
       the actual promises, and closes on the booking CTA.
   ========================================================================= */
.ecar-hww {
  background-color: var(--ecar-bg-raised);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section);
}

.ecar-hww__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 44px) clamp(30px, 4vw, 44px);
  /* Lit from the top-left, the way the pricing promise panel is: a flat navy
     fill at this size reads as a coloured box, the diagonal reads as a
     surface. */
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(52, 116, 178, 0.42) 0%, rgba(52, 116, 178, 0) 62%),
    linear-gradient(165deg, var(--ecar-navy-700) 0%, var(--ecar-navy-900) 100%);
  border: 1px solid var(--ecar-navy-line);
  border-radius: 16px;
}

/* Heading + rule on one baseline. The rule is what makes the panel's title
   read as a section marker rather than another paragraph, and it fills the
   space a short two-word heading leaves behind. */
.ecar-hww__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  margin-bottom: clamp(20px, 3vw, 30px);
}

.ecar-hww__title {
  margin: 0;
  font-size: clamp(1.75rem, 6.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.ecar-hww__head-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  /* Fades out rather than stopping dead at the panel's padding edge. */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.ecar-hww__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spacing, not hairlines. Each item is already a numbered block with its own
   title; adding a rule between them stacked four visual boxes inside a panel
   that is itself a box. */
.ecar-hww__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ecar-hww__item + .ecar-hww__item {
  margin-top: 22px;
}

/* Numbered ring, not a bare numeral: on the navy ground a ghost numeral like
   the homepage's would disappear, and the ring is what tells the reader these
   four lines are a sequence rather than a bullet list. */
.ecar-hww__index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

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

.ecar-hww__item-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
}

.ecar-hww__item-text {
  max-width: 58ch;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(226, 233, 243, 0.78);
}

/* --- CTA + closing line ---
   Both sit outside the panel, on the page ground, and share the panel's
   860px measure so the block reads as one column. */
.ecar-hww__actions {
  display: flex;
  max-width: 860px;
  margin: clamp(20px, 3vw, 28px) auto 0;
}

.ecar-hww__cta {
  position: relative;
  width: 100%;
  justify-content: center;
  gap: 14px;
  padding: 20px 56px;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.ecar-hww__cta .ecar-btn__icon {
  width: 19px;
  height: 19px;
}

/* Pinned to the trailing edge rather than sitting in the flex row: the
   calendar and the label stay optically centred in a full-width button while
   the arrow marks the direction of travel at the far right. */
.ecar-hww__cta-arrow {
  position: absolute;
  top: 50%;
  right: clamp(18px, 4vw, 26px);
  transform: translateY(-50%);
}

/* The generic primary-button hover nudges its icon along a diagonal, which
   is right for the ↗ arrows used elsewhere and wrong for both of these: a
   calendar has no direction, and this arrow points straight ahead. */
.ecar-hww__cta:hover .ecar-btn__icon svg,
.ecar-hww__cta:focus-visible .ecar-btn__icon svg {
  transform: none;
}

.ecar-hww__cta:hover .ecar-hww__cta-arrow svg,
.ecar-hww__cta:focus-visible .ecar-hww__cta-arrow svg {
  transform: translateX(4px);
}

.ecar-hww__tagline {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 860px;
  margin: clamp(26px, 4vw, 36px) auto 0;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ecar-text-muted);
}

.ecar-hww__tagline::before,
.ecar-hww__tagline::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background-color: var(--ecar-hairline);
}

/* =========================================================================
   2. Founder letter — the promise panel's navy-as-material device, scaled
      up to hold a full letter rather than one line.
   ========================================================================= */
.ecar-letter {
  background-color: var(--ecar-bg-raised);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section);
}

.ecar-letter__inner {
  max-width: 800px;
  margin: 0 auto;
}

.ecar-letter__head {
  margin-bottom: 32px;
}

.ecar-letter__title {
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
}

/* Offset hairline behind the panel — a plain depth cue (this reads as one
   deliberate card rather than a flat block) without a drop shadow or any
   glassmorphism. Sits on the wrap, not the panel, so the panel's own solid
   background doesn't need overflow:hidden to contain it. */
.ecar-letter__panel-wrap {
  position: relative;
}

.ecar-letter__panel-wrap::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  z-index: 0;
  border: 1px solid var(--ecar-navy-line);
}

.ecar-letter__panel {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(32px, 4vw, 52px);
  background-color: var(--ecar-navy-900);
  border: 1px solid var(--ecar-navy-line);
}

.ecar-letter__mark {
  margin: 0 0 4px;
  color: var(--ecar-accent);
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 800;
  line-height: 0.6;
}

.ecar-letter__body p {
  max-width: 62ch;
  margin: 0 0 20px;
  color: var(--ecar-text-primary);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.75;
}

.ecar-letter__body p:first-of-type {
  font-weight: 600;
}

.ecar-letter__body p:last-of-type {
  margin-bottom: 0;
}

.ecar-letter__signature {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 245, 245, 0.14);
}

/* A thin conic ring around the avatar — the one flourish this signature
   gets, standing in for a "verified/featured" cue without an actual badge
   icon or checkmark graphic. */
.ecar-letter__avatar-ring {
  flex-shrink: 0;
  display: block;
  width: 74px;
  height: 74px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--ecar-accent), var(--ecar-accent-dim) 45%, var(--ecar-navy-line) 65%, var(--ecar-accent) 100%);
}

.ecar-letter__avatar {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--ecar-navy-700);
}

.ecar-letter__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ecar-navy-900);
  background-color: var(--ecar-accent);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ecar-letter__signee {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ecar-letter__name {
  color: var(--ecar-text-primary);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* A small tag rather than plain gray text — the one place this signature
   gets an extra bit of craft beyond the homepage promise panel it borrows
   its structure from. */
.ecar-letter__role {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  background-color: var(--ecar-navy-quiet);
  border: 1px solid var(--ecar-navy-line);
  border-radius: var(--r-sm);
  color: var(--ecar-accent-dim);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* =========================================================================
   3. Repair or replace — the page's one loud (fs-h2-lg) statement, built
      as an asymmetric grid: promise-style content column + a two-column
      decision ledger instead of a quote panel.
   ========================================================================= */
.ecar-honesty {
  background-color: var(--ecar-bg);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section-lg);
}

.ecar-honesty__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: 72px;
  align-items: start;
}

.ecar-honesty__heading {
  margin: 0 0 20px;
  font-size: var(--fs-h2-lg);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.ecar-honesty__description {
  max-width: 42ch;
  margin: 0 0 32px;
  color: var(--ecar-text-secondary);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.ecar-honesty__ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ecar-border);
}

.ecar-honesty__col {
  min-width: 0;
  padding: 26px 28px 8px 0;
}

.ecar-honesty__col + .ecar-honesty__col {
  padding-right: 0;
  padding-left: 28px;
  border-left: 1px solid var(--ecar-border);
}

.ecar-honesty__col-title {
  margin: 0 0 16px;
  color: var(--ecar-text-primary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.ecar-honesty__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecar-honesty__col-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ecar-hairline);
  color: var(--ecar-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ecar-honesty__dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background-color: var(--ecar-success);
}

.ecar-honesty__col--replace .ecar-honesty__dot {
  background-color: var(--ecar-danger);
}

/* =========================================================================
   4. Values — the why-choose-us ledger device, reused deliberately so the
      two pages read as one system: same dotted leader, new content.
   ========================================================================= */
.ecar-values {
  background-color: var(--ecar-bg-raised);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section);
}

.ecar-values__head {
  max-width: 620px;
  margin-bottom: 34px;
}

.ecar-values__title {
  font-size: var(--fs-h2);
  margin-bottom: 12px;
}

.ecar-values__description {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ecar-text-secondary);
}

.ecar-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  border-top: 1px solid var(--ecar-border);
}

.ecar-values__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--ecar-border);
  transition: background-color 220ms ease;
}

.ecar-values__row:hover {
  background-color: var(--ecar-surface);
}

.ecar-values__label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ecar-text-primary);
  flex-shrink: 0;
}

.ecar-values__leader {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--ecar-border);
  transform: translateY(-5px);
  transition: border-color 220ms ease;
}

.ecar-values__row:hover .ecar-values__leader {
  border-color: var(--ecar-accent);
}

.ecar-values__value {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ecar-text-secondary);
  text-align: right;
  flex-shrink: 0;
  transition: color 220ms ease;
}

.ecar-values__row:hover .ecar-values__value {
  color: var(--ecar-text-primary);
}

/* =========================================================================
   5. Process — new section, not on the old page. A three-step register on
      the denser #111 band so it reads as its own distinct moment, the same
      way the brand strip/reviews sit on --ecar-bg-secondary on the homepage.
   ========================================================================= */
.ecar-process {
  background-color: var(--ecar-bg-secondary);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section);
}

.ecar-process__head {
  max-width: 560px;
  margin-bottom: 40px;
}

.ecar-process__title {
  font-size: var(--fs-h2);
}

.ecar-process__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ecar-border);
}

.ecar-process__step {
  padding: 28px 32px 4px 0;
}

.ecar-process__step + .ecar-process__step {
  padding-left: 32px;
  border-left: 1px solid var(--ecar-border);
}

.ecar-process__index {
  display: block;
  margin-bottom: 18px;
  color: var(--ecar-numeral);
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ecar-process__rule {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 16px;
  background-color: var(--ecar-accent);
}

.ecar-process__step-title {
  margin: 0 0 10px;
  color: var(--ecar-text-primary);
  font-size: 1.125rem;
}

.ecar-process__step-text {
  margin: 0;
  color: var(--ecar-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* =========================================================================
   6. Visit / closing CTA — a short closing statement, kept deliberately
      plain. The address/phone/hours facts and the map now live sitewide in
      the footer directly below every page (and in full on the Contact
      page), so repeating them here a second time right above that same
      footer would just be noise.
   ========================================================================= */
.ecar-visit {
  background-color: var(--ecar-bg);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section-lg);
}

.ecar-visit__inner {
  max-width: 720px;
}

.ecar-visit__title {
  margin: 0 0 14px;
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.ecar-visit__description {
  margin: 0 0 32px;
  max-width: 52ch;
  color: var(--ecar-text-secondary);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ecar-visit__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1199px) {
  .ecar-honesty__inner {
    gap: 48px;
  }

  .ecar-honesty__heading {
    max-width: 18ch;
  }
}

@media (max-width: 1023px) {
  .ecar-about-head__title {
    max-width: 18ch;
  }

  .ecar-letter__inner {
    max-width: none;
  }

  .ecar-honesty__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ecar-honesty__heading,
  .ecar-honesty__description {
    max-width: 60ch;
  }

  /* Four badge cards need ~200px each to keep their label on two lines. */
  .ecar-about-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecar-process__steps {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .ecar-process__step {
    padding: 24px 0;
    border-top: 1px solid var(--ecar-border);
  }

  .ecar-process__step + .ecar-process__step {
    padding-left: 0;
    border-left: 0;
  }

  .ecar-visit__title,
  .ecar-visit__description {
    max-width: 56ch;
  }
}

@media (max-width: 767px) {
  .ecar-about-head {
    padding-block: clamp(44px, 8vw, 64px) 48px;
  }

  .ecar-about-head__title {
    font-size: clamp(2.25rem, 8.4vw, 2.75rem);
    max-width: none;
  }

  .ecar-about-head__lede {
    margin-bottom: 22px;
  }

  /* Back into the flow on a phone: one line, right-aligned, with the rule
     beside it instead of under it — it sits between the lede and the meta
     row, which is exactly where the reference layout shows it, and it can no
     longer collide with the cards below. */
  .ecar-about-head__photo-caption {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    max-width: none;
    margin: 0 0 22px;
    padding-bottom: 0;
    line-height: 1.4;
  }

  .ecar-about-head__photo-caption::after {
    position: static;
    width: 30px;
  }

  /* Four facts stay in one row down to 480px — the row is the masthead's
     spec sheet and it reads best as a single band — but the dividers move
     from padding-based columns to a tighter grid. */
  .ecar-about-head__meta {
    gap: 0;
    padding-top: 22px;
  }

  .ecar-about-head__meta li {
    padding: 0 10px;
  }

  .ecar-about-head__meta li:first-child {
    padding-left: 0;
  }

  .ecar-about-head__meta li:last-child {
    padding-right: 0;
  }

  .ecar-about-head__meta-label {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .ecar-about-head__meta-value {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .ecar-about-badges {
    gap: 8px;
    margin-top: 20px;
  }

  .ecar-about-badges__item {
    min-height: 0;
    gap: 12px;
    padding: 18px 8px 16px;
  }

  .ecar-about-badges__icon {
    width: 34px;
    height: 34px;
  }

  .ecar-about-badges__title {
    max-width: none;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }

  .ecar-hww__item {
    gap: 12px;
  }

  .ecar-hww__index {
    width: 27px;
    height: 27px;
    font-size: 0.8125rem;
  }

  .ecar-hww__cta {
    padding: 18px 48px;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
  }

  .ecar-letter__panel {
    padding: 26px 22px;
  }

  .ecar-letter__signature {
    flex-wrap: wrap;
  }

  .ecar-honesty__heading {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }

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

  .ecar-honesty__col + .ecar-honesty__col {
    padding: 22px 0 8px;
    border-left: 0;
    border-top: 1px solid var(--ecar-border);
  }

  .ecar-values__row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .ecar-values__leader {
    display: none;
  }

  .ecar-values__value {
    text-align: left;
  }

  .ecar-visit__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ecar-visit__actions .ecar-btn {
    width: 100%;
  }
}

/* --- Narrow phones ---
   The reference layout keeps all four credential cards in one row here too,
   and on a 375px screen that leaves ~61px of text per card: "BACKGROUND-
   CHECKED TECHNICIANS" comes out at 9px and breaks mid-word. Four claims
   nobody can read is worse than two rows of two, so the badges — and only
   the badges — fold to 2×2 below 480px. The meta row above them stays a
   single band: its values are short enough to hold at 13px. */
@media (max-width: 479px) {
  /* Four columns cannot hold these labels here: at 375px each cell is ~64px
     of text, so "SERVICE AREA" breaks onto two lines and "Major appliance
     repair" onto three, leaving a ragged four-column table. 2×2 keeps the
     label on one line and the values at a readable 13px. From 480px up the
     row is the single band the reference layout shows. */
  .ecar-about-head__meta {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  /* `li + li` also has to be named here: it carries the column divider at a
     higher specificity than a bare `li`, and a hairline that only spans one
     cell of a 2×2 grid reads as a rendering fault, not as a divider. */
  .ecar-about-head__meta li,
  .ecar-about-head__meta li + li,
  .ecar-about-head__meta li:first-child,
  .ecar-about-head__meta li:last-child {
    padding: 0;
    border-left: 0;
  }

  .ecar-about-head__meta-label {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  .ecar-about-head__meta-value {
    font-size: 0.875rem;
  }

  .ecar-about-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ecar-about-badges__item {
    gap: 14px;
    padding: 20px 12px 18px;
  }

  .ecar-about-badges__icon {
    width: 40px;
    height: 40px;
  }

  .ecar-about-badges__title {
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
  }

  .ecar-about-head__photo-caption {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
  }

  /* The closing line is 303px wide at this size, so the two flanking rules
     collapse to ~16px stubs. One full-width rule above the text does the same
     job honestly. */
  .ecar-hww__tagline {
    display: block;
    padding-top: 20px;
    border-top: 1px solid var(--ecar-hairline);
    letter-spacing: 0.14em;
  }

  .ecar-hww__tagline::before,
  .ecar-hww__tagline::after {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecar-values__row,
  .ecar-values__leader,
  .ecar-values__value {
    transition: none;
  }
}