.about-road-truck {
  transform: translate3d(-50%, var(--truck-y, 34px), 0) rotate(180deg);
}

.about-road-main .about-phase {
  filter: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-road-truck {
    transform: translate3d(-50%, calc(50svh - 140px), 0) rotate(180deg) !important;
  }
}

.about-factory-intro {
  inset: 12px clamp(28px, 5vw, 76px) auto;
  align-content: start;
  justify-items: end;
  transform: none;
}

.about-factory-intro-copy {
  width: min(100%, 640px);
  margin: 0 0 clamp(22px, 3vh, 34px);
  color: #17212b;
  font-size: clamp(1.15rem, 1.7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.02em;
}

@media (max-width: 780px) {
  .about-factory-intro {
    inset: 22px 18px auto;
  }

  .about-factory-intro-copy {
    margin-bottom: 18px;
    font-size: 1rem;
  }
}

.about-production-intro {
  inset: clamp(150px, 20vh, 220px) clamp(28px, 5vw, 76px) auto;
  align-content: start;
  justify-items: start;
  transform: none;
}

.about-journey {
  height: 850svh;
}

.about-side-left [data-phase="3"],
.about-side-left [data-phase="4"] {
  inset-block-start: clamp(150px, 20vh, 220px);
}

.about-side-right [data-phase="3"],
.about-side-right [data-phase="4"] {
  inset-block-start: 12px;
}

.about-video-slot video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-video-fit {
  display: grid;
  place-items: center;
  background: #f4f3ef;
}

.about-video-fit video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

[data-media-editor] > video,
[data-media-editor] > img {
  pointer-events: none;
  transform: translate(var(--video-x, 0px), var(--video-y, 0px)) scale(var(--video-scale, 1));
}

[data-media-editor="quality-control"] > video {
  object-position: calc(50% - var(--video-x, 0%)) calc(50% - var(--video-y, 0%));
  transform: scale(var(--video-scale, 1));
}

.about-side-left [data-phase="2"].is-active,
.about-side-left [data-phase="3"].is-active,
.about-side-right [data-phase="3"].is-active,
.about-side-right [data-phase="4"].is-active {
  pointer-events: auto;
}

[data-media-editor] {
  position: relative;
}

[data-media-editor="inspection"] { --video-x: 0%; --video-y: 1.2907608695652173%; --video-scale: 1.06; }
[data-media-editor="measurement"] { --video-x: 3.1648251084598704%; --video-y: 0.5400815217391304%; --video-scale: 1.12; }
[data-media-editor="surface"] { --video-x: 0.054229934924078085%; --video-y: -17.057291666666668%; --video-scale: 1.04; }
[data-media-editor="quality-control"] { --video-x: 28.997763015184383%; --video-y: 16.96784420289855%; --video-scale: 1; }

.about-measurement-photo img {
  object-fit: contain;
  background: #fff;
}

/* Portrait phones: keep the road centered and give both roadside stories a
   real column. The previous 92px-road/two-column override placed both sides
   on top of each other and pushed the left media below the visible viewport. */
@media (max-width: 780px) and (orientation: portrait) {
  .about-road-main {
    --road-width: clamp(58px, 18vw, 76px);
  }

  .about-journey-grid {
    grid-template-columns: minmax(0, 1fr) var(--road-width) minmax(0, 1fr);
  }

  .about-road {
    grid-column: 2;
    grid-row: 1;
  }

  .about-side-left {
    grid-column: 1;
    grid-row: 1;
  }

  .about-side-right {
    grid-column: 3;
    grid-row: 1;
  }

  .about-phase {
    inset-inline: 8px;
  }

  .about-side-left [data-phase="1"],
  .about-side-left [data-phase="2"] {
    inset-block-start: clamp(104px, 17svh, 132px);
  }

  .about-side-left [data-phase="3"],
  .about-side-left [data-phase="4"] {
    inset-block-start: clamp(104px, 17svh, 132px);
  }

  .about-side-right [data-phase="1"],
  .about-side-right [data-phase="2"],
  .about-side-right [data-phase="3"],
  .about-side-right [data-phase="4"] {
    inset-block-start: max(18px, env(safe-area-inset-top));
  }

  .about-factory-intro-copy {
    width: 100%;
    margin-bottom: 10px;
    font-size: clamp(.78rem, 3.5vw, .94rem);
    line-height: 1.35;
    letter-spacing: -.025em;
  }

  .about-production-intro {
    inset-inline: 8px;
  }

  .about-production-intro .about-factory-intro-copy {
    font-size: clamp(.78rem, 3.4vw, .9rem);
  }

  .about-photo-slot {
    width: 100%;
    aspect-ratio: 1.08 / 1;
    border-radius: 2px;
  }

  .about-video-slot video {
    object-fit: cover;
  }

  .about-video-fit video {
    object-fit: contain;
  }

  .about-road-truck {
    width: clamp(54px, 15vw, 68px);
    height: clamp(112px, 30svh, 154px);
  }

  .about-mile-marker {
    left: 5px;
    font-size: .46rem;
    letter-spacing: .08em;
    writing-mode: vertical-rl;
  }

  .about-arrival-wordmark {
    top: 27%;
    width: 124vw;
    height: 24vw;
  }

  .about-opening-services {
    top: 43%;
    width: min(100%, 430px);
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    padding: 28px 14px max(28px, env(safe-area-inset-bottom));
  }

  .about-opening-services li {
    min-width: 0;
    padding-left: 10px;
  }

  .about-opening-services svg {
    width: 27px;
    height: 27px;
    margin-bottom: 8px;
  }

  .about-opening-services h2 {
    font-size: clamp(.83rem, 3.8vw, 1rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 780px) {
  .about-road-main {
    --road-width: 92px;
  }

  .about-side-left {
    display: block;
  }

  .about-side-left,
  .about-side-right {
    background: transparent;
  }

  .about-side-left [data-phase="1"],
  .about-side-left [data-phase="2"],
  .about-side-left [data-phase="3"],
  .about-side-left [data-phase="4"] {
    inset-block-start: 340px;
  }

  .about-phase {
    inset-inline: 16px;
  }

  .about-side-right [data-phase="1"],
  .about-side-right [data-phase="2"],
  .about-side-right [data-phase="3"],
  .about-side-right [data-phase="4"] {
    inset-block-start: 22px;
  }

  .about-production-intro {
    inset-inline: 18px;
  }
}