/* How the app works: three steps beside one aerial photo of a flatbed on a desert road.
   When it comes right after the hero it is the sheet that slides up over the hero's pinned stage
   (hero.css, ".hero + *"); elsewhere it is an ordinary section.

   Layout: steps (start side) and photo (end side) share the width; the section fills the screen on
   desktop. The photo carries the same cut corner as the fleet panels. Phones stack the steps over
   the whole photo at its own proportions.

   Spacing: the fleet section's gutter and header; 8px rhythm inside a step, 24px between steps. */

.how {
  --gutter: clamp(24px, 5vw, 96px);
  --pad-top: clamp(112px, 12vh, 144px);           /* clears the fixed nav */
  --pad-bottom: clamp(64px, 9vh, 112px);
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
  background: var(--surface-alt);
  color: var(--h10-ink);
}
.how__inner {
  width: 100%; max-width: 1760px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(40px, 6vw, 120px);
}

.how__steps { margin: clamp(32px, 5vh, 48px) 0 0; padding: 0; list-style: none; }
.how__step {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.how__step:last-child { border-bottom: 1px solid var(--line); }
.how__num {
  display: grid; place-items: center; width: 40px; height: 40px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);   /* the fleet panels' cut corner, small */
  background: var(--h10-yellow); color: var(--h10-ink);
  font: 600 15px/1 var(--font-sf); font-variant-numeric: tabular-nums;
}
.how__step h3 { margin: 0 0 8px; padding-top: 4px; font-size: clamp(19px, 1.4vw, 22px); line-height: 1.5; font-weight: 600; }   /* padding: first line centred on the 40px number */
.how__step p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-muted); }

.how__photo {
  margin: 0;
  height: min(calc(100svh - var(--pad-top) - var(--pad-bottom)), 760px);
  min-height: 480px;
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);   /* the fleet panels' cut corner */
  background: #D6D9DE;
}
.how__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; }   /* keeps the lower part (vehicles, slogans) when the frame trims the photo */

@media (max-width: 900px) {
  .how {
    --gutter: 16px; --pad-top: 72px; --pad-bottom: 56px;
    min-height: 0;
  }
  .how__inner { grid-template-columns: none; gap: 32px; }
  .how__step { gap: 16px; padding: 20px 0; }
  .how__photo { height: auto; min-height: 0; aspect-ratio: var(--photo-ratio, 4 / 3); }   /* the whole photo: posters keep their text */
}