/* ============================================================
   About Us — page-specific styles.
   Reuses tokens/components already defined in styles.css:
   --red / --black / --white / --grey-light / --grey-soft / --text-secondary,
   --font-display / --font-text, --ease, --container-w, .container, .reveal,
   .hero__eyebrow / .hero__eyebrow-line / .hero__eyebrow-text,
   .btn / .btn--primary / .btn--outline, .text-link.
   ============================================================ */

.about-page .container{ max-width: var(--container-wide); margin-left: auto; }

/* The "Our Approach" FAQ reuses the Landing Page's .faq/.faq__inner
   component verbatim (same markup, same styles.css rules) and must
   render at the exact same narrow, centred width. .faq__inner's own
   "max-width: 760px" (one class) otherwise loses to .about-page
   .container above (two classes) on specificity regardless of source
   order, stretching this section to --container-wide instead.
   Restated here at matching specificity so it wins on this page too —
   styles.css and the Landing Page itself are untouched. */
.about-page .faq__inner{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Shared section scaffolding ---------- */
.about-section{
  padding-top: 110px;
  padding-bottom: 110px;
  border-top: 1px solid var(--grey-soft);
  scroll-margin-top: var(--header-h);
}
.about-section--tint{ background: var(--grey-light); }
/* The divider between sections is each section's own border-top, so the
   line at the bottom of "Why RedRoute" is #how-we-work's border-top. */
#how-we-work{ border-top: none; }
.about-section__head{ max-width: 640px; }
.about-section__heading{
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--black);
}
.about-section__subtext{
  margin-top: 12px;
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Hero ---------- */
.about-hero{
  position: relative;
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 40px;
}
.about-hero__layout{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  overflow: clip;
}

/* ---------- Hero — decorative background layer ----------
   Same architectural/logistics language as the Who We Are backdrop:
   an oversized outline wordmark, a pale diagonal block, partial
   contour circles, two dashed route paths with pins/checkpoints, a
   fading dot-grid, two quiet outline icons, a huge faint corner X and
   two red brackets. Pure background dressing at z-index 0, always
   behind the centred copy (z-index 2). */
.about-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-hero-bg__word{
  position: absolute;
  top: 8%;
  left: 6%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(150px, 15vw, 260px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--grey-border);
  opacity: 0.35;
}

.about-hero-bg__circles{
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

.about-hero-bg__dotgrid-tr{
  position: absolute;
  left: 78%;
  right: -4%;
  top: 0;
  height: 48%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse 120% 130% at 100% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 120% 130% at 100% 0%, #000 30%, transparent 78%);
  opacity: 0.3;
}

.about-hero-bg__icon{ position: absolute; opacity: 0.35; }
.about-hero-bg__icon--clipboard{ right: 9%; top: 34%; }
.about-hero-bg__icon--box{ right: 15%; top: 54%; }

.about-hero-bg__corner{
  position: absolute;
  width: 32px;
  height: 32px;
  border-left: 1.5px solid var(--red);
  border-top: 1.5px solid var(--red);
  opacity: 0.7;
}
.about-hero-bg__corner--tl{ left: 20px; top: 20px; }
.about-hero-bg__corner--br{ right: 20px; bottom: 20px; transform: rotate(180deg); }

@media (max-width: 1100px){
  .about-hero-bg__word{ font-size: clamp(120px, 14vw, 200px); opacity: 0.35; }
  .about-hero-bg__circles{ transform: translateY(-50%) scale(0.8); left: -90px; }
}

@media (max-width: 700px){
  .about-hero-bg__word,
  .about-hero-bg__circles,
  .about-hero-bg__icon{
    display: none;
  }
  .about-hero-bg__dotgrid-tr{ left: 60%; height: 30%; opacity: 0.2; }
  .about-hero-bg__corner{ width: 22px; height: 22px; opacity: 0.5; }
  .about-hero-bg__corner--tl{ left: 14px; top: 14px; }
  .about-hero-bg__corner--br{ right: 14px; bottom: 14px; }
}

.about-hero__copy{
  max-width: 640px;
  position: relative;
  z-index: 2;
  text-align: center;
}
.about-hero__copy .hero__eyebrow{
  justify-content: center;
}
.about-h1{
  margin-top: 22px;
  max-width: 640px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--black);
}
.about-h1__dot{ color: var(--red); }
.about-hero__text{
  margin: 18px auto 0;
  max-width: 28rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.about-hero__actions{
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.about-hero__actions .text-link{
  margin-top: 0;
}

/* Reveal cascade */
.about-hero__copy .hero__eyebrow.reveal{ transform: translateY(10px); }
.about-hero__copy .about-h1.reveal{ transition-delay: 0.08s; }
.about-hero__copy .about-hero__text.reveal{ transition-delay: 0.16s; }
.about-hero__copy .about-hero__actions.reveal{ transition-delay: 0.24s; }

/* ---------- Split (Story / Approach) ---------- */
.about-split{
  display: grid;
  grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
  column-gap: clamp(48px, 6vw, 96px);
}
.about-split__head{ align-self: start; }
.about-split__body{
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-split__body p{
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.about-feature__text .about-lede{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--black);
}

/* ---------- Editorial text + image feature (Who We Are / How We Work) ---------- */
.about-feature{
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 48%);
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.about-feature--media-first{
  grid-template-columns: minmax(320px, 46%) minmax(0, 1fr);
}
.about-feature--media-first .about-feature__media{
  display: flex;
  justify-content: center;
}
.about-feature--media-first .media-placeholder{
  width: 92%;
}
.about-feature__text{
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-feature__text p{
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.about-feature__text .hero__eyebrow{ margin-bottom: 4px; }
.about-feature__text p strong{ color: var(--black); font-weight: 600; }
.about-feature__media{ position: static; display: flex; justify-content: center; }
#who-we-are .about-feature__media{ align-self: center; }

/* ---------- Media slots ----------
   Each ratio matches its actual supplied image exactly, so object-fit:
   contain never has to letterbox or crop — the white product-shot
   background just blends straight into the section's own white. */
.media-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
}
.media-placeholder--who-we-are{ aspect-ratio: 3 / 2; width: 92%; transform: translateY(-18px) scale(1.1471); }
.media-placeholder--how-we-work{ aspect-ratio: 1 / 1; }
.media-placeholder--vehicle{ aspect-ratio: 16 / 9; }

/* ---------- Who We Are — decorative backdrop ----------
   Editorial, technical/architectural linework framing the copy and the
   product photo: an oversized outline wordmark, a fading dot-grid, faint
   geometry and dashed route paths, a quiet corner-cross, and one red
   corner accent. Pure background dressing — z-index 0 under the
   container's z-index 1 so it never competes with the copy or the image. */
#who-we-are{ position: relative; overflow: hidden; }
#who-we-are > .container{ position: relative; z-index: 1; }

/* ---------- Who We Are — responsiveness fix ----------
   Root cause of the clipped/overflowing text bug: the shared
   .about-feature grid gave its media column a hard `minmax(320px, 48%)`
   floor, and grid items default to `min-width: auto` (their own
   content's min-content size) rather than shrinking. Below the width
   where 48% would naturally clear 320px, the two column-mins together
   exceeded the available track space, so the grid's rendered content
   overflowed .container — and because #who-we-are has overflow:hidden
   (needed to clip the decorative layer below), that overflow showed up
   as genuinely clipped/missing text instead of a scrollbar.
   Scoped to #who-we-are only — .about-feature--media-first (How We
   Work) is untouched. */
#who-we-are .about-feature{
  grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
}
#who-we-are .about-feature__text,
#who-we-are .about-feature__media{
  min-width: 0;
}

.who-we-are__decor{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.who-we-are__word{
  position: absolute;
  top: 6%;
  left: 27%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(128px, 13.6vw, 256px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #C9C9C9;
  opacity: 0.28;
}

.who-we-are__dotgrid-tr{
  position: absolute;
  top: 0;
  left: 66%;
  right: -4%;
  height: 42%;
  background-image: radial-gradient(rgba(0,0,0,0.12) 1px, transparent 1.4px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse 120% 130% at 100% 0%, #000 30%, transparent 76%);
          mask-image: radial-gradient(ellipse 120% 130% at 100% 0%, #000 30%, transparent 76%);
  opacity: 0.35;
}

.who-we-are__diagonal-tl{
  position: absolute;
  top: -20%;
  left: -16%;
  width: 46%;
  height: 62%;
  background: #FAFAFA;
  transform: rotate(-9deg);
}
.who-we-are__shape-left{
  position: absolute;
  left: -13%;
  bottom: -12%;
  width: 38%;
  aspect-ratio: 1 / 1;
  border: 1px solid #F2F2F2;
  transform: rotate(45deg);
  opacity: 0.6;
}

.who-we-are__route-right{
  position: absolute;
  right: -18px;
  top: 4%;
  opacity: 0.7;
}

.who-we-are__x-band{
  position: absolute;
  right: -190px;
  bottom: -56px;
  width: 640px;
  height: 128px;
  background: rgba(0,0,0,0.022);
}
.who-we-are__x-band--a{ transform: rotate(45deg); }
.who-we-are__x-band--b{ transform: rotate(-45deg); }

.who-we-are__corner{
  position: absolute;
  right: 32px;
  bottom: 26px;
  width: 60px;
  height: 60px;
  border-bottom: 2px solid var(--red);
  border-right: 2px solid var(--red);
  opacity: 0.8;
}

@media (max-width: 1100px){
  .who-we-are__word{ top: 5%; left: 24%; font-size: clamp(96px, 12.8vw, 176px); opacity: 0.22; }
  .who-we-are__dotgrid-tr{ left: 62%; height: 36%; }
  .who-we-are__route-right{ transform: scale(0.82); transform-origin: top right; }
  .who-we-are__x-band{ width: 480px; height: 100px; right: -150px; bottom: -46px; }
  .who-we-are__shape-left{ width: 44%; }
}

@media (max-width: 700px){
  .who-we-are__word,
  .who-we-are__diagonal-tl,
  .who-we-are__shape-left,
  .who-we-are__route-right,
  .who-we-are__x-band{
    display: none;
  }
  .who-we-are__dotgrid-tr{ left: 58%; top: 0; height: 26%; opacity: 0.28; }
  .who-we-are__corner{ width: 44px; height: 44px; right: 20px; bottom: 18px; }
}

/* ---------- Principles / Why RedRoute ----------
   #principles overrides scope every size/layout tweak below to just
   this section, so the shared .about-section__head / .about-section__heading
   classes keep their normal (smaller, single-column) look everywhere
   else on the page. */
#principles{ position: relative; overflow: hidden; background: var(--white); }
#principles > .container{ position: relative; z-index: 2; }

/* Purely ornamental background dressing: corners, a fading dot-grid and two
   tiny outline icons in the empty space below/right of the grid. Sits at
   z-index 0, behind the section's own content (z-index 2), and never
   affects layout, spacing or the existing content in any way. */
.principles-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.principles-bg__corner{
  position: absolute;
  width: 24px;
  height: 24px;
  border-left: 1.5px solid var(--red);
  border-top: 1.5px solid var(--red);
  opacity: 0.7;
}
.principles-bg__corner--tl{ left: 24px; top: 24px; }
.principles-bg__corner--br{ right: 24px; bottom: 24px; transform: rotate(180deg); }

.principles-bg__dotgrid{
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 240px;
  height: 210px;
  background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 65% 55%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 70% at 65% 55%, #000 30%, transparent 78%);
  opacity: 0.5;
}
.principles-bg__dot{
  position: absolute;
  right: 9%;
  bottom: 15%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}
.principles-bg__home{
  position: absolute;
  right: 6.5%;
  bottom: 21%;
  opacity: 0.5;
}
.principles-bg__clipboard{
  position: absolute;
  right: 6.5%;
  bottom: 13%;
  opacity: 0.5;
}

@media (max-width: 1100px){
  .principles-bg__dotgrid{ width: 190px; height: 170px; opacity: 0.38; }
  .principles-bg__corner{ opacity: 0.5; }
}

@media (max-width: 700px){
  .principles-bg__home,
  .principles-bg__clipboard,
  .principles-bg__dot{ display: none; }
  .principles-bg__dotgrid{ width: 140px; height: 120px; right: 4%; bottom: 3%; opacity: 0.28; }
  .principles-bg__corner{ width: 18px; height: 18px; opacity: 0.45; }
  .principles-bg__corner--tl{ left: 16px; top: 16px; }
  .principles-bg__corner--br{ right: 16px; bottom: 16px; }
}

.principles-intro{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
#principles .hero__eyebrow{ justify-content: center; }
/* Intentionally larger than --text-h2: this is a standalone, centered
   statement heading (not a regular section header sitting above a content
   block), so it earns a bigger emphasis size. Deliberate exception, not a
   stray duplicate value. */
#principles .about-section__heading{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.principles-intro__lede{
  margin: 16px auto 0;
  max-width: 560px;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.principles-divider{
  margin-top: 50px;
  height: 1px;
  background: transparent;
}

.principles-grid{
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}
.principle-row{
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 26px 0;
}
/* Dividers sit BETWEEN rows only — the first row already has
   .principles-divider right above it, and the grid's own bottom edge
   doesn't need a second closing line. */
.principle-row:nth-child(n+3){ border-top: 1px solid var(--grey-soft); }

.principle-row__media{
  width: 150px;
  height: 150px;
  min-width: 150px;
  flex: 0 0 150px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.principle-row__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* "Careful handling" (boxes photo) has its box artwork reaching almost to
   the edge of its own source canvas, so there's very little headroom to
   zoom in before the circular mask starts cutting off that corner. This
   is close to the safe limit. */
.principles-grid .principle-row:nth-child(5) .principle-row__media img{ transform: scale(1.02); }

.principle-row__num{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--red);
}
.principle-row__title{
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--black);
  position: relative;
  display: inline-block;
  width: fit-content;
}
.principle-row__title::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.3s var(--ease);
}
.principle-row:hover .principle-row__title::after{ width: 100%; }
.principle-row__body p{
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 32rem;
}

/* ---------- Process: alternating vertical timeline with images, 6 steps ----------
   #how-it-works-about widens the shared .container just for this section (the
   reference layout wants a narrower, more editorial column than the sitewide
   1600px page container). The wrap below is sized so that, with 1fr/1fr row
   columns, the text block (max 360px + 70px padding toward the line) and the
   media box (300px, centred in its half) both land the ~55–80px gutter the
   spec asks for around the central line, without any extra math per row. */
#how-it-works-about .container{ max-width: 1200px; }
#how-it-works-about .about-section__head{
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#how-it-works-about .hero__eyebrow{ justify-content: center; }

/* ---------- How It Works — decorative background layer ----------
   Purely cosmetic dot-grid accents behind the process timeline. Adds
   no background of its own — .about-section--tint's existing
   --grey-light tint shows straight through everywhere. Kept in the
   gutter outside the 900px .about-process-wrap column (and, below
   1100px where that gutter shrinks, tightened further — see the media
   query after this block) so it never sits under text/images or the
   central timeline. */
#how-it-works-about{
  position: relative;
  isolation: isolate;
}
#how-it-works-about .container{
  position: relative;
  z-index: 2;
}

.how-it-works-decor{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.hiw-decor-dots{
  position: absolute;
  opacity: 0.6;
  background-image: radial-gradient(circle, rgba(60, 60, 60, 0.12) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}
.hiw-decor-dots--left-mid{ left: 46px; top: 46%; width: 120px; height: 120px; }
.hiw-decor-dots--right-top{ right: 60px; top: 10%; width: 120px; height: 96px; }
.hiw-decor-dots--bottom-left{ left: 60px; bottom: 8%; width: 100px; height: 84px; }

/* The zig-zag process column narrows a lot at this tier (.about-process-wrap
   drops to 760px, see below) while the section itself has no outer gutter
   once it's under 1200px wide, so the left dot-grid's reach is pulled in
   to match and the right one steps aside entirely. */
@media (max-width: 1100px){
  .hiw-decor-dots--right-top{ display: none; }
  .hiw-decor-dots--left-mid{ left: 6px; width: 90px; height: 90px; }
}

/* Below 700px the process timeline itself restructures (see the
   .about-process__track etc. overrides further down) into a single
   left-aligned column that runs the full available width — there is no
   longer a safe empty flank on either side, so the whole decorative
   layer steps out of the way rather than risk sitting under that text. */
@media (max-width: 700px){
  .how-it-works-decor{ display: none; }
}

.about-process-wrap{
  position: relative;
  margin: 76px auto 0;
  max-width: 900px;
}
.about-process{
  list-style: none;
  padding: 0;
}
/* Ultra-subtle static grey line. The red "progress" element is now the
   optional thin travelled-segment (see about-process-timeline.js) — it
   starts at scaleY(0) and is driven purely by a --seg-progress custom
   property so the per-frame animation only ever touches `transform`. */
.about-process__track,
.about-process__progress{
  position: absolute;
  left: 50%;
  width: 1px;
}
.about-process__track{
  /* top/height are set inline by about-process-timeline.js to match the
     real marker-01 -> marker-06 span exactly; these are just a graceful
     fallback for the instant before that first measure runs. */
  top: 0;
  height: 100%;
  background: var(--grey-soft);
  transform: translateX(-50%);
}
.about-process__progress{
  top: 0;
  height: 0;
  background: var(--red);
  opacity: 0.45;
  transform-origin: top;
  transform: translateX(-50%) scaleY(var(--seg-progress, 0));
  will-change: transform;
}

/* Moving scroll-linked dot — position is set entirely via the --dot-y
   custom property (about-process-timeline.js), so animating it never
   touches layout-affecting properties, only `transform`. --dot-y is the
   exact marker-01 -> marker-06 centre coordinate (see measure() / render()
   in about-process-timeline.js), so the dot's own CENTRE — not its
   top-left corner — must land there: the leading -50% cancels the dot's
   own height the same way translateX(-50%) already cancels its width.
   Without it the dot renders half its own height (5.5px) below every
   computed point, which reads as "doesn't start exactly at the top" and
   "overshoots past the last marker" at the two ends of the line. */
.about-process__dot{
  position: absolute;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.12);
  transform: translate3d(-50%, calc(-50% + var(--dot-y, 0px)), 0);
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}

.about-process__step{
  position: relative;
  padding: 18px 0;
}

/* Marker is just a positioning context spanning the full row — the node
   (circle) and number are each independently absolutely-positioned off
   its own horizontal centre (= the line's centre, since .about-process__step
   spans the wrap's full width), so the circle never has to move to make
   room for the number, and every number lands on the exact same vertical
   line regardless of which step it belongs to. */
.about-process__marker{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
/* Minimal default checkpoint: white centre, light-grey ring. Turns solid
   red once the scroll-linked dot reaches it (about-process-timeline.js
   toggles .is-reached on the parent .about-process__step). Position stays
   dead-centre on the line — only the number sits to its left. */
.about-process__node{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--grey-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.about-process__node::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
}
.about-process-wrap.js-timeline-ready .about-process__step.is-reached .about-process__node{
  background: var(--red);
  border-color: var(--red);
}
/* One-shot checkpoint tick, triggered the instant the moving dot crosses
   this marker — a quick scale pop plus a barely-there expanding ring. */
.about-process__marker.is-pulsing .about-process__node{
  animation: aboutProcessPulseScale 320ms ease;
}
.about-process__marker.is-pulsing .about-process__node::after{
  animation: aboutProcessPulseRing 320ms ease;
}
/* The node's resting position is centred via transform: translate(-50%,-50%)
   (see .about-process__node above) — a keyframe's transform value replaces
   that base value outright rather than composing with it, so every step
   here has to repeat the same translate or the circle jumps off the line
   (to the side) for the duration of the pulse. */
@keyframes aboutProcessPulseScale{
  0%{ transform: translate(-50%, -50%) scale(1); }
  45%{ transform: translate(-50%, -50%) scale(1.35); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}
@keyframes aboutProcessPulseRing{
  0%{ transform: scale(1); opacity: 0.2; }
  100%{ transform: scale(2); opacity: 0; }
}
/* Fixed-width, right-aligned label ending exactly 11px before the node's
   left edge (node radius 4px + 11px gap) — same offset for every step, so
   01–06 all finish flush on one vertical line instead of being positioned
   ad hoc per step. */
.about-process__num{
  position: absolute;
  top: 50%;
  left: calc(50% - 15px);
  transform: translate(-100%, -50%);
  width: 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--red);
  white-space: nowrap;
}
/* Three states as the scroll-linked dot moves through the steps:
   future (not yet reached) = muted grey; completed (passed) = red but
   calm; current (the checkpoint the dot just reached) = full red. */
.about-process-wrap.js-timeline-ready .about-process__num{
  color: #B8B8B8;
  opacity: 0.8;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.about-process-wrap.js-timeline-ready .about-process__step.is-reached .about-process__num{
  color: var(--red);
  opacity: 0.75;
}
.about-process-wrap.js-timeline-ready .about-process__step.is-current .about-process__num{
  opacity: 1;
}

.about-process__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 250px;
}

.about-process__col--text{ max-width: 360px; }
.about-process__row > .about-process__col--text:first-child{
  margin-left: auto;
  padding-right: 70px;
  text-align: right;
}
.about-process__row > .about-process__col--text:last-child{
  margin-right: auto;
  padding-left: 70px;
  text-align: left;
}
.about-process__step h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--black);
}
.about-process__step p{
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Fixed-footprint media box, identical for all six steps, so differing
   PNG canvas sizes/padding never change the box itself — only the scale
   corrections below adjust how large each illustration looks inside it. */
.about-process__col--media{
  width: 300px;
  height: 230px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-process__col--media img{
  --img-scale-base: 1;
  --img-focus: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(calc(var(--img-scale-base) * (1 + var(--img-focus) * 0.06)));
  filter: drop-shadow(0 calc(var(--img-focus) * 14px) calc(var(--img-focus) * 16px) rgba(0, 0, 0, calc(var(--img-focus) * 0.12)));
  will-change: transform;
}
/* 222 and 666 carry more transparent padding than the other four at their
   native canvas size, so contain alone renders them visibly smaller —
   nudged individually to look consistent, per step order. */
.about-process__step:nth-child(2) .about-process__col--media img{ --img-scale-base: 1.07; }
.about-process__step:nth-child(6) .about-process__col--media img{ --img-scale-base: 1.08; }

/* The illustration's lift + soft shadow is driven purely by --img-focus
   (set every animation frame in about-process-timeline.js, from the same
   already-smoothed scroll progress the dot uses) via the base rule above
   — never by an .is-current class flip or a looping @keyframes animation.
   That's deliberate: a CSS animation removal snaps to its resting value
   instantly with no transition, which is exactly what made the old
   version jump on scroll-away instead of easing back down. Scaling
   continuously with scroll position means there's no "enter" or "exit"
   moment to snap at, in either scroll direction. */

/* Per-step content activation as the scroll dot reaches each marker.
   Gated behind .js-timeline-ready (added by about-process-timeline.js
   right after it measures) so the section reads at full opacity/position
   with no JS at all — the dim/offset state only exists once the script
   that can also light it back up is actually running. */
.about-process-wrap.js-timeline-ready .about-process__col--text,
.about-process-wrap.js-timeline-ready .about-process__col--media{
  transition: opacity 480ms ease, transform 480ms ease;
}
.about-process-wrap.js-timeline-ready .about-process__row > .about-process__col--text:first-child{
  opacity: 0.72;
  transform: translateX(-8px);
}
.about-process-wrap.js-timeline-ready .about-process__row > .about-process__col--text:last-child{
  opacity: 0.72;
  transform: translateX(8px);
}
.about-process-wrap.js-timeline-ready .about-process__col--media{
  opacity: 0.8;
  transform: translateY(5px);
}
.about-process-wrap.js-timeline-ready .about-process__step.is-reached .about-process__col--text,
.about-process-wrap.js-timeline-ready .about-process__step.is-reached .about-process__col--media{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce){
  .about-process__dot,
  .about-process__progress{ display: none; }
  .about-process__marker.is-pulsing .about-process__node,
  .about-process__marker.is-pulsing .about-process__node::after{ animation: none !important; }
  .about-process-wrap.js-timeline-ready .about-process__col--text,
  .about-process-wrap.js-timeline-ready .about-process__col--media{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .about-process-wrap.js-timeline-ready .about-process__step.is-current .about-process__col--media img{
    animation: none !important;
    filter: none !important;
    transform: scale(var(--img-scale-base)) !important;
  }
}

/* ============================================================
   Vehicle — "Our Vehicle" showcase
   Flat DOM order (eyebrow, heading, desc, stage, uses, divider,
   assurance) already matches the mobile reading order 1:1, so mobile
   needs zero reordering. Desktop remaps the same children into a
   two-column layout purely via grid-template-areas.
   ============================================================ */
.about-vehicle{
  display: grid;
  grid-template-columns: minmax(340px, 54%) minmax(0, 1fr);
  column-gap: clamp(48px, 6vw, 80px);
  row-gap: 0;
  /* The van+stats column ("stage") spans every row of the right-hand
     content — centering it here (rather than pinning it to the top)
     is what keeps the van vertically balanced against the full height
     of the right column instead of hugging the eyebrow. */
  align-items: center;
  grid-template-areas:
    "stage   eyebrow"
    "stage   heading"
    "stage   desc"
    "stage   uses"
    "stage   divider"
    "stage   assurance";
}
#vehicle{ padding-top: 90px; padding-bottom: 90px; }
.about-vehicle__eyebrow{ grid-area: eyebrow; }
.about-vehicle__heading{
  grid-area: heading;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--black);
}
.about-vehicle__desc{ grid-area: desc; }
.about-vehicle__desc p{
  margin-top: 18px;
  font-family: var(--font-text);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 37.5rem;
}
.about-vehicle__desc p:first-child{ margin-top: 22px; }

.about-vehicle__stage{
  grid-area: stage;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-vehicle__visual{ display: block; }

/* All supplied photos are white-background product shots at their
   slot's exact aspect ratio, so contain never needs to letterbox — the
   white just merges into the section background with no crop, no card,
   no border. */
.about-feature__media img,
.about-vehicle__visual img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Vehicle use cases — flat, editorial, no card ----------
   Column-flow (not row-flow) grid: with grid-auto-flow:column and 3
   explicit rows, the DOM order (House, Furniture, Flat, Long-Distance,
   Office, Student) fills straight down column 1 then column 2 — which
   is exactly the left/right column split the copy needs, with no
   reordering tricks. */
.services-clean-list{
  grid-area: uses;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.service-item{
  border: none;
  border-bottom: 1px solid #E2E2E2;
  background: transparent;
}
.service-item:last-child{
  border-bottom: none;
}
.service-list-link{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 8px 4px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #171717;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s var(--ease);
}
.service-list-link:hover,
.service-list-link:focus-visible{
  background: var(--red-tint);
  outline-offset: -2px;
}
.service-list-link:hover .service-title,
.service-list-link:focus-visible .service-title{
  color: var(--red);
}
.service-list-link:hover .service-arrow svg,
.service-list-link:focus-visible .service-arrow svg{
  transform: translateX(5px);
}
.service-title{
  flex: 1 1 auto;
  min-width: 0;
  transition: color 0.2s var(--ease);
}
.service-check{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red-tint);
}
.service-check svg{
  width: 15px;
  height: 15px;
  color: var(--red);
}
.service-arrow{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A3A3A;
}
.service-arrow svg{
  transition: transform 0.2s var(--ease);
}

.services-divider{
  grid-area: divider;
  width: 100%;
  height: 1px;
  margin-top: 6px;
  margin-bottom: 16px;
  background: #E2E2E2;
}

/* ---------- Vehicle — "Our Promise" reassurance card ----------
   A soft, full-width card (not a bare icon + line) so the closing
   reassurance reads as a distinct, premium beat after the checklist,
   not just another list row. */
.promise-card{
  grid-area: assurance;
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 26px 32px;
  background: var(--red-tint);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}
.promise-card__icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.promise-card__icon svg{
  width: 25px;
  height: 25px;
  color: var(--red);
  stroke-width: 1.6;
}
.promise-card__divider{
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 2px 0;
  background: rgba(225, 6, 0, 0.22);
}
.promise-card__copy{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.promise-card__eyebrow{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.promise-card__copy p{
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: #111;
}

/* ---------- Vehicle — Load Volume / Max Payload, spec panel ----------
   Two equal, mirrored halves either side of a single thin divider,
   floating directly on the page — no outer card/border/shadow. */
.vehicle-metrics-flat{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  width: min(460px, 100%);
  /* Centred under the van (which fills the full stage-column width) —
     equal auto margins, so it stays responsive instead of a fixed
     pixel offset — then nudged slightly left of dead-centre. `left`
     rather than `transform`, since .reveal/.reveal.is-visible already
     animate `transform` and would otherwise fight this on specificity. */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: -56px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  transition: opacity 0.6s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s;
}
.vehicle-metric{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 22px;
  min-width: 0;
}
.metric-icon-circle{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red-tint);
}
.metric-icon{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  stroke: var(--red);
  fill: none;
}
.metric-copy{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.metric-accent{
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 8px;
  background: var(--red);
}
.metric-label{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B6B6B;
  white-space: nowrap;
}
.metric-value{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--black);
  white-space: nowrap;
}
.metric-value small{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.metric-center-divider{
  align-self: center;
  width: 1px;
  height: 60%;
  background: var(--grey-border);
}
/* ---------- Pull quotes / highlighted statements ---------- */
.about-section .about-statement{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
  max-width: 34rem;
}

/* ---------- How We Work — three-line key message ----------
   A dedicated component (not .about-statement, which several other
   pull-quotes on this page reuse as plain <p> tags) so this block's
   typography and hand-drawn underlines stay scoped to just here. No
   rule, card or background — the text stands on its own. */
.key-message p{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
}
.key-message p + p{ margin-top: 11px; }

/* One shared, near-flat underline (see hand-underline.js) — same
   shape, thickness, colour and offset under every key word, not a
   bespoke hand-tuned wobble per word. Drawn into a <svg> whose viewBox
   is set, in pixels, to the word's own measured width/height, not a
   stretched CSS background-image: background-size:100% 100% on a box
   that's short and wide scales x and y independently, which turns
   round stroke caps into skewed, cut-looking ellipses. Keeping the
   viewBox 1:1 with the rendered size keeps the caps genuinely round
   and the stroke crisp at any zoom level. color sets the brand red the
   path's stroke="currentColor" picks up. */
.hand-underline{
  position: relative;
  display: inline-block;
}
.hand-underline__svg{
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 10px;
  display: block;
  overflow: visible;
  pointer-events: none;
  /* Scoped to the svg only (not .hand-underline, which also wraps the
     visible word) so currentColor reaches the path's stroke without
     tinting the word's own text colour. */
  color: var(--red);
}

/* ---------- Our Approach ----------
   Exact copy of the Landing Page's .faq component (see styles.css for
   .faq/.faq__inner/.faq__list/.faq__item/.faq__question/.faq__toggle*/
   .faq__answer* — reused verbatim, no page-specific rules needed).
   about-animation.js already binds the .faq__item accordion sitewide. */

/* Solid-red CTA — .btn--primary is black-at-rest/red-on-hover sitewide;
   this is the inverse (red at rest), used for the one button on this
   page meant to look unmissable. Same component already used on
   services.html, duplicated here since this page doesn't load that
   stylesheet. */
.btn--red{
  background: var(--red);
  color: var(--white);
  padding: 15px 26px;
  border-radius: 9999px;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn--red .btn__arrow{ color: var(--white); transition: transform 0.25s var(--ease); }
.btn--red:hover{ background: var(--red-dark); transform: translateY(-1px); }
.btn--red:hover .btn__arrow{ transform: translateX(3px); }
.btn--red:active{ transform: translateY(0); }

/* ---------- Bottom CTA — final "Ready to..." panel ----------
   Same component/markup as the one reused on services.html and
   prices/index.html (see the matching block in services-page.css) —
   duplicated here, not shared via a cross-page stylesheet, since this
   page doesn't otherwise load services-page.css. */
.about-cta{
  position: relative;
  padding: 142px 0 132px;
  overflow: hidden;
  background: var(--white);
}
.about-cta__bg{
  position: absolute;
  z-index: 0;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 124%;
  max-width: none;
  height: auto;
  object-fit: contain;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}
.about-cta__inner{
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.about-cta__eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--red);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-cta__eyebrow-line{
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  background: var(--red);
}
.about-cta__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  color: var(--black);
}
.about-cta__text{
  max-width: 30rem;
  margin: 14px auto 0;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.about-cta__actions{
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.about-cta__trust{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 44px;
  row-gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.about-cta__trust li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--black);
  white-space: nowrap;
}
.about-cta__trust-icon{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
}

@media (max-width: 700px){
  .about-cta{ padding: 94px 0 86px; }
  .about-cta__trust{
    column-gap: 24px;
    row-gap: 12px;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px){
  .about-hero__copy{ max-width: none; }
  .about-split{ grid-template-columns: 1fr; row-gap: 24px; }
  .about-feature{ grid-template-columns: 1fr; row-gap: 32px; }
  .about-feature--media-first .about-feature__media{ order: -1; }
  /* #who-we-are .about-feature (unconditional, ID-scoped) outranks the
     plain-class rule above by specificity even inside this same media
     query, so on its own the section stayed a squeezed 2-column grid
     on mobile instead of stacking — text and image both crushed to
     ~50% width. Rebuilt here as an explicit flex column with `order`
     (matching or exceeding every desktop selector's specificity) so
     text always renders first and the image always last, regardless
     of any grid/column sizing declared elsewhere for this ID. */
  #who-we-are .about-feature,
  #who-we-are .about-feature.about-feature{
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  #who-we-are .about-feature__text{
    order: 1;
    width: 100%;
    max-width: 100%;
  }
  #who-we-are .about-feature__media{
    order: 2;
    width: 100%;
    max-width: 100%;
    margin-top: 32px;
    align-self: stretch;
    display: flex;
    justify-content: center;
  }
  .media-placeholder--who-we-are{
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .about-vehicle{
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow" "heading" "desc" "stage" "uses" "divider" "assurance";
  }
  .about-vehicle > *{ margin-top: 40px; }
  .about-vehicle__eyebrow{ margin-top: 0; }
  .about-vehicle__heading{ margin-top: 16px; }
  /* Once the vehicle stage is no longer squeezed into a 54%-wide column,
     the desktop right-bias reads as off-centre — plain centring instead. */
  .vehicle-metrics-flat{ margin-left: auto; margin-right: auto; }

  /* Tablet: still 2 columns (plenty of room for them), just tightened up. */
  .principles-grid{ column-gap: 40px; }
  .principle-row{ gap: 22px; padding: 20px 0; }
  .principle-row__media{ width: 130px; height: 130px; min-width: 130px; flex: 0 0 130px; }

  /* Process: keep the centred alternating timeline, just narrower. */
  .about-process-wrap{ max-width: 760px; }
  .about-process__row{ min-height: 210px; }
  .about-process__col--text{ max-width: 300px; }
  .about-process__row > .about-process__col--text:first-child{ padding-right: 56px; }
  .about-process__row > .about-process__col--text:last-child{ padding-left: 56px; }
  .about-process__col--media{ width: 240px; height: 190px; }
}

@media (max-width: 700px){
  .about-section{ padding-top: 72px; padding-bottom: 72px; }
  #vehicle{ padding-top: 72px; padding-bottom: 72px; }
  .about-hero{ padding-bottom: 60px; }
  .about-hero__actions{ gap: 20px 28px; }

  /* Vehicle: stack Load Volume / Max Payload — two columns get cramped
     on a phone. The center divider only makes sense between side-by-
     side columns, so it's dropped once they stack in favour of a plain
     horizontal rule between the two blocks. */
  .vehicle-metrics-flat{ grid-template-columns: 1fr; row-gap: 0; margin-left: auto; margin-right: auto; left: 0; }
  .metric-center-divider{ display: none; }
  .vehicle-metric{ justify-content: flex-start; gap: 20px; padding: 22px 24px; border-top: 1px solid var(--grey-border); }
  .vehicle-metric:first-child{ border-top: none; }
  .metric-icon-circle{ width: 60px; height: 60px; }
  .metric-icon{ width: 26px; height: 26px; }
  .metric-value{ font-size: 1.6rem; }
  .about-vehicle > *{ margin-top: 32px; }
  .about-vehicle__eyebrow{ margin-top: 0; }

  /* Services list: already a single-column vertical list on desktop —
     just trim the row padding and type size a little for a phone. */
  .service-list-link{ padding: 16px 2px; font-size: 1.08rem; }
  .service-check{ width: 32px; height: 32px; }
  .service-check svg{ width: 14px; height: 14px; }
  .services-divider{ margin-top: 10px; margin-bottom: 32px; }
  .promise-card{ gap: 20px; padding: 22px; }
  .promise-card__icon{ width: 72px; height: 72px; }
  .promise-card__icon svg{ width: 30px; height: 30px; }
  .promise-card__copy p{ font-size: 1.2rem; }

  /* Mobile: single column, 01→06 in reading order (matches the DOM). */
  .principles-divider{ margin-top: 32px; }
  .principles-grid{ grid-template-columns: 1fr; column-gap: 0; margin-top: 28px; }
  .principle-row{ gap: 18px; padding: 22px 0; align-items: flex-start; }
  .principle-row:nth-child(n+3){ border-top: none; }
  .principle-row:not(:first-child){ border-top: 1px solid var(--grey-soft); }
  .principle-row__media{ width: 110px; height: 110px; min-width: 110px; flex: 0 0 110px; }
  .principle-row__title{ font-size: 1.15rem; }

  /* Process: collapse the alternating zig-zag into one simple left-aligned
     vertical timeline, every step in the SAME order — number/node, title,
     description, then image, in 01→06 reading order. Desktop's zig-zag
     relies on the media column sitting BEFORE the text column in the DOM
     for even-numbered steps (so it lands on the left), which meant a
     plain block stack here showed the image above the text for those
     steps. Fixed with an explicit flex column + `order` on the two
     columns, so the visual sequence is always text-then-image regardless
     of which side the desktop markup puts them on — no DOM/HTML change,
     so the desktop composition above this breakpoint is untouched. */
  .about-process-wrap{ max-width: none; }
  .about-process__track{ left: 5px; transform: none; }
  /* No horizontal centring trick needed once the line sits flush left,
     but the scroll-driven scaleY (about-process-timeline.js) must survive
     this override, so it's reapplied here rather than reset to none. */
  .about-process__progress{ left: 5px; transform: scaleY(var(--seg-progress, 0)); }
  .about-process__dot{ left: 5px; }
  .about-process__step{ padding: 0 0 52px 50px; }
  .about-process__step:last-child{ padding-bottom: 0; }
  /* Desktop positions the node/number independently (absolute), each off
     --timeline-x — the CENTRE x-coordinate the line/progress/dot above
     also use (50% there, 5px here). Mobile keeps that exact same
     independent-absolute pattern, just re-anchored to the same 5px, so
     "line centre = dot centre" is one shared value rather than two
     separately-tuned ones. (A flex row was tried here previously, but
     .about-process__node's desktop `transform: translate(-50%,-50%)` —
     written for the old `left:50%` — still applied on top of the flex
     layout's own position, silently dragging every dot ~4px off-line;
     independent absolute positioning avoids stacking a flow position
     with a centring transform meant for a different one.) */
  .about-process__marker{
    position: absolute;
    top: 2px;
    left: 0;
    right: auto;
    transform: none;
  }
  .about-process__node{
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translate(-50%, -50%);
  }
  .about-process__num{
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    width: auto;
    text-align: left;
  }
  .about-process__row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }
  /* Matches (and so overrides) the desktop :first-child/:last-child
     selectors' specificity — needed since those set conflicting
     text-align/padding/margin for whichever column happens to be first
     in a given step's DOM order. */
  .about-process__row > .about-process__col--text,
  .about-process__row > .about-process__col--text:first-child,
  .about-process__row > .about-process__col--text:last-child{
    order: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .about-process__row > .about-process__col--media,
  .about-process__row > .about-process__col--media:first-child,
  .about-process__row > .about-process__col--media:last-child{
    order: 2;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 24px 0 0;
    padding: 0;
    text-align: left;
  }
  .about-process__col--media img{ height: auto; }

  /* Single-column stack: a sideways nudge no longer makes sense, and the
     spec asks for reduced reveal intensity here anyway — one small
     vertical nudge for both text and media. */
  .about-process-wrap.js-timeline-ready .about-process__row > .about-process__col--text:first-child,
  .about-process-wrap.js-timeline-ready .about-process__row > .about-process__col--text:last-child,
  .about-process-wrap.js-timeline-ready .about-process__col--media{
    transform: translateY(6px);
  }
}

/* ---------- Vehicle — very narrow phones ---------- */
@media (max-width: 480px){
  .promise-card{ align-items: flex-start; padding: 20px 18px; }
  .promise-card__icon{ width: 60px; height: 60px; }
  .promise-card__icon svg{ width: 26px; height: 26px; }
}