:root {
  --repair-paper: #f2ede2;
  --repair-paper-strong: #e9e1d2;
  --repair-ink: #161409;
  --repair-ink-soft: #5d564c;
  --repair-amber-ink: #74450a;
  --repair-amber-rule: #88520d;
  --repair-amber-star: #9b6219;
  --repair-amber-quote: #a96817;
  --repair-paper-line: rgba(24,21,15,0.13);
  --repair-section: 96px;
  --repair-section-mobile: 58px;
  --repair-radius: 16px;
  --repair-preview-bar: 0px;
  --repair-editorial-aside: 336px;
  --repair-editorial-gap: 82px;
}

.repair-page a,
.repair-page button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(220,154,60,0.18);
}

.repair-page .nav { top: var(--repair-preview-bar); }
.repair-page .mobile-menu { padding-top: calc(100px + var(--repair-preview-bar)); }
.repair-page section[id] { scroll-margin-top: calc(var(--repair-preview-bar) + 104px); }

.repair-page #page-clip {
  background:
    radial-gradient(ellipse 72% 30% at 12% 15%, rgba(58,155,213,0.10), transparent 62%),
    radial-gradient(ellipse 72% 30% at 88% 38%, rgba(76,175,125,0.08), transparent 66%),
    var(--dark);
}

.repair-skip-link {
  position: fixed;
  top: calc(var(--repair-preview-bar) + 10px);
  left: 10px;
  z-index: 10000;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--repair-paper);
  color: var(--repair-ink);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.repair-skip-link:focus { transform: translateY(0); }

.repair-page .nav-links { gap: 22px; }
.repair-page .nav-links a {
  font-size: 13px;
  white-space: nowrap;
}
.repair-page .repair-mm-home { color: var(--amber-light); font-size: 17px; }

.repair-nav-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
}

.repair-nav-klg,
.repair-nav-shop {
  display: flex;
  align-items: center;
  flex: none;
}

.repair-nav-brand-divider {
  width: 1px;
  height: 46px;
  flex: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.24), transparent);
}

.repair-nav-shop-logo {
  display: block;
  width: 138px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.24));
  transition: width 0.3s, opacity 0.2s;
}

.repair-nav-shop:hover .repair-nav-shop-logo,
.repair-nav-shop:focus-visible .repair-nav-shop-logo { opacity: 0.82; }

.repair-nav-klg:focus-visible,
.repair-nav-shop:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(220,154,60,0.82);
  outline-offset: 5px;
}

.repair-page .nav.scrolled .repair-nav-brand-divider { height: 38px; }
.repair-page .nav.scrolled .repair-nav-shop-logo { width: 122px; }

.repair-section-shell {
  width: min(1280px, calc(100% - 80px));
  margin: 0 auto;
}

@media (min-width: 1500px) {
  .repair-section-shell { width: min(1400px, calc(100% - 120px)); }
  /* Footer content column tracks the widened section shell so it stays flush
     with the copy above it. */
  .repair-page .footer > .container { max-width: min(1400px, calc(100% - 120px)); }
}
@media (min-width: 2000px) {
  .repair-section-shell { width: min(1520px, calc(100% - 200px)); }
  .repair-page .footer > .container { max-width: min(1520px, calc(100% - 200px)); }
}

/* "Talk to Andy" nudge keeps its fixed size. On this page it sits higher than
   the shared 18px so it clears the pinned-story scroll counter (bottom: 24px)
   that shares the bottom-right corner; other sections have nothing there. Its
   distance from the corner also grows a little on large screens.
   (The <=680px mobile treatment in style.css is left as-is — the counter is
   hidden there.) */
@media (min-width: 681px) {
  .repair-page .roman-nudge { bottom: 46px; }
}
@media (min-width: 1500px) {
  .repair-page .roman-nudge { right: 28px; bottom: 52px; }
}
@media (min-width: 2000px) {
  .repair-page .roman-nudge { right: 40px; bottom: 60px; }
}

.repair-hero {
  position: relative;
  min-height: 850px;
  padding: calc(var(--repair-preview-bar) + 136px) 40px 88px;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 45%, rgba(76,175,125,0.10), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(58,155,213,0.12), transparent 30%),
    linear-gradient(145deg, #050505 0%, var(--dark2) 58%, #020506 100%);
}

.repair-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.repair-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.72fr);
  gap: 88px;
  align-items: center;
  width: min(1280px, 100%);
  margin: 0 auto;
}

.repair-hero-copy { max-width: 720px; }

.repair-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.repair-breadcrumb:hover,
.repair-breadcrumb:focus-visible { color: var(--amber-light); }

.repair-brand-mark {
  display: block;
  width: min(310px, 70%);
  height: auto;
  margin: 0 0 24px;
}

.repair-eyebrow,
.repair-kicker {
  display: block;
  margin-bottom: 16px;
  color: var(--amber-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.repair-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.repair-eyebrow span {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent);
}

.repair-hero h1 {
  max-width: 720px;
  margin-bottom: 24px;
  color: #f0f0fa;
  font-size: clamp(45px, 5.2vw, 76px);
  text-wrap: balance;
}

.repair-hero-answer {
  max-width: 680px;
  margin-bottom: 32px;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}

.repair-hero-answer strong { color: var(--text); }

.repair-hero-actions,
.repair-location-actions,
.repair-owner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.repair-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 24px;
  border: 1px solid var(--border2);
  border-radius: 15px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.repair-ghost-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
}

.repair-ghost-btn:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.repair-ghost-btn:focus-visible,
.repair-text-link:focus-visible,
.repair-owner-proof:focus-visible,
.repair-services-callout a:focus-visible,
.repair-faq-item a:focus-visible,
.repair-faq-item summary:focus-visible,
.repair-faq-phone:focus-visible,
.repair-faq-map:focus-visible,
.repair-footer-klg-phone:focus-visible,
.repair-footer-recruiting:focus-visible {
  outline: 3px solid rgba(220,154,60,0.78);
  outline-offset: 4px;
}

.repair-hero-facts {
  display: flex;
  gap: 18px 24px;
  flex-wrap: wrap;
  margin-top: 34px;
  list-style: none;
}

.repair-hero-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(232,232,240,0.68);
  font-size: clamp(12px, 0.6rem + 0.25vw, 15px);
  font-weight: 600;
}

.repair-hero-facts i { color: var(--green); }

.repair-hero-fact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
.repair-hero-fact-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.repair-hero-fact-link:focus-visible {
  outline: 2px solid rgba(220,154,60,0.78);
  outline-offset: 4px;
  border-radius: 4px;
}

.repair-hero-facts .repair-google-g {
  width: clamp(14px, 0.7rem + 0.15vw, 17px);
  height: clamp(14px, 0.7rem + 0.15vw, 17px);
}

.repair-hero-visual {
  --repair-photo-brightness: 0.88;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.78;
  --repair-photo-sepia: 0.03;
  position: relative;
  min-width: 0;
  max-width: 510px;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  background: var(--card2);
  box-shadow: 0 35px 90px rgba(0,0,0,0.55);
}

.repair-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(4,22,29,0.20), transparent 48%, rgba(145,82,20,0.07)),
    radial-gradient(ellipse at 54% 38%, transparent 42%, rgba(0,0,0,0.23) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.03) 28%, transparent 50%, rgba(0,0,0,0.86));
}

.repair-hero-visual img {
  display: block;
  width: 100%;
  height: clamp(540px, 63vw, 690px);
  object-fit: cover;
  object-position: 55% 43%;
  filter:
    brightness(var(--repair-photo-brightness))
    contrast(var(--repair-photo-contrast))
    saturate(var(--repair-photo-saturation))
    sepia(var(--repair-photo-sepia));
}

.repair-hero-visual figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 25px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,0.68);
  font-size: 11px;
  letter-spacing: 0.4px;
}

.repair-hero-visual figcaption strong {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   SHOP STORY — Andy → truck → service systems
   Isolated to the truck-repair preview page.
═══════════════════════════════════════════ */
.repair-shop-story {
  position: relative;
  height: 620vh;
  background: #040607;
}

.repair-story-services-anchor {
  position: absolute;
  top: 72%;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.repair-story-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: #050708;
}

.repair-story-layer,
.repair-story-shade,
.repair-story-shade-left,
.repair-story-services {
  position: absolute;
  inset: 0;
}

.repair-story-layer {
  z-index: 1;
  margin: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.repair-story-layer--assembled,
.repair-story-layer--exploded {
  opacity: 0;
}

.repair-story-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  will-change: transform;
}

.repair-story-layer--andy img {
  transform-origin: 29% 32%;
}

.repair-story-layer--assembled img,
.repair-story-layer--exploded img {
  object-position: 68% center;
  transform-origin: 64% 48%;
}

.repair-story-layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Two independent shade layers, cross-faded in sync with the photo layers
   they sit above (see _preview_truck_repair_story.js), instead of one shade
   whose gradient snaps instantly between frames. That snap used to land
   mid-crossfade and briefly show the wrong side lit. */
.repair-story-shade {
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 640px 480px at 76% 52%, rgba(2,4,5,0.4), transparent 72%),
    linear-gradient(90deg, transparent 0%, transparent 42%, rgba(2,4,5,0.74) 100%),
    linear-gradient(180deg, rgba(2,4,5,0.42) 0%, transparent 29%, transparent 58%, rgba(2,4,5,0.82) 100%);
}

.repair-story-shade-left {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(ellipse 640px 480px at 24% 52%, rgba(2,4,5,0.4), transparent 72%),
    linear-gradient(90deg, rgba(2,4,5,0.74) 0%, transparent 58%, transparent 100%),
    linear-gradient(180deg, rgba(2,4,5,0.42) 0%, transparent 29%, transparent 58%, rgba(2,4,5,0.82) 100%);
}

.repair-story-cut {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(ellipse at 68% 56%, rgba(7,12,15,0.92), rgba(2,3,4,0.985) 68%),
    #020304;
  will-change: opacity;
}

.repair-story-copy {
  position: absolute;
  z-index: 4;
  will-change: transform, opacity;
}

.repair-story-copy--hero {
  right: clamp(34px, 5vw, 96px);
  bottom: clamp(160px, 20vh, 210px);
  width: min(610px, 44vw);
}

.repair-story-kicker {
  margin-bottom: 18px;
  color: var(--amber);
  font-size: clamp(10px, 0.55rem + 0.15vw, 13px);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.repair-story-copy h1,
.repair-story-copy h2,
.repair-story-services-heading h2 {
  margin: 0;
  color: #f7f7f5;
  font-size: clamp(48px, 2.4rem + 1.6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.042em;
  line-height: 1.04;
}

.repair-story-copy h1 {
  text-wrap: balance;
}

.repair-story-copy h1 span,
.repair-story-copy h2 span,
.repair-story-services-heading h2 span {
  color: #dc9a3c;
}

.repair-story-copy--hero > p {
  max-width: 560px;
  margin: 24px 0 28px;
  color: rgba(255,255,255,0.72);
  font-size: clamp(13px, 0.5rem + 0.3vw, 16px);
  line-height: 1.58;
}

.repair-story-copy--hero > p strong { color: #fff; }

.repair-story-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.repair-story-andy {
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.repair-story-copy--truck {
  left: clamp(28px, 5vw, 96px);
  bottom: clamp(150px, 18vh, 210px);
  max-width: 680px;
  opacity: 0;
}

.repair-story-copy--truck > p {
  max-width: 610px;
  margin: 24px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(13px, 0.5rem + 0.3vw, 16px);
  line-height: 1.58;
}

.repair-story-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 610px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.repair-story-proof-stats li {
  min-width: 0;
  padding: 10px 12px 11px;
  border-top: 1px solid rgba(220, 154, 60, 0.72);
  background: linear-gradient(180deg, rgba(10, 14, 16, 0.78), rgba(7, 10, 12, 0.5));
}

.repair-story-proof-stats strong,
.repair-story-proof-stats span {
  display: block;
}

.repair-story-proof-stats strong {
  color: #fff;
  font-size: clamp(18px, 1.45vw, 25px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
}

.repair-story-proof-stats span {
  margin-top: 5px;
  color: rgba(232, 232, 240, 0.64);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.repair-story-proof-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: 610px;
  margin: 12px 0 0;
  padding: 0;
  color: rgba(241, 243, 245, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.025em;
  list-style: none;
}

.repair-story-proof-details li {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.repair-story-proof-details i {
  color: #47be7e;
  font-size: 9px;
}

@media (min-width: 1200px) {
  .repair-story-proof-stats li {
    padding: 12px 14px 13px;
  }

  .repair-story-proof-stats strong {
    font-size: clamp(24px, 1.65vw, 32px);
  }

  .repair-story-proof-stats span {
    margin-top: 6px;
    font-size: clamp(10.5px, 0.72vw, 13px);
    letter-spacing: 0.075em;
    line-height: 1.32;
  }

  .repair-story-proof-details {
    gap: 10px 24px;
    margin-top: 14px;
    font-size: clamp(11.5px, 0.78vw, 14px);
  }

  .repair-story-proof-details i {
    font-size: 10.5px;
  }
}

.repair-story-services {
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.repair-story-services-heading {
  position: absolute;
  /* Floor raised so the "Complete truck support" kicker clears the fixed
     nav (bottom ~121px) on short viewports, where 14vh resolves below it. */
  top: clamp(126px, 14vh, 158px);
  left: clamp(28px, 4vw, 76px);
  max-width: min(620px, 39vw);
  text-align: left;
  will-change: transform, opacity;
}

.repair-story-services-heading h2 {
  font-size: clamp(36px, 2rem + 1.3vw, 62px);
  letter-spacing: -0.03em;
}

.repair-story-services-summary {
  max-width: 560px;
  margin: 12px 0 0;
  color: rgba(255,255,255,0.82);
  font-size: clamp(14px, 0.5rem + 0.3vw, 15.5px);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.repair-story-service-list {
  position: absolute;
  top: 49%;
  left: clamp(28px, 4vw, 76px);
  display: grid;
  width: min(620px, 39vw);
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  list-style: none;
  transform: translateY(-28%);
}

.repair-story-service-list > li {
  min-width: 0;
}

.repair-story-service {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 12px 34px 12px 13px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.24);
  background: linear-gradient(90deg, rgba(4,6,8,0.9) 0%, rgba(4,6,8,0.62) 72%, rgba(4,6,8,0.08) 100%);
  color: #fff;
  border-radius: 0;
  font-size: clamp(16px, 1.15vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  width: 100%;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.repair-story-service::after {
  content: "\2193";
  position: absolute;
  right: 9px;
  color: rgba(255,255,255,0.42);
  font-size: 14px;
  font-weight: 500;
  transition: color 180ms ease, transform 180ms ease;
}

.repair-story-service:hover,
.repair-story-service:focus-visible {
  border-color: rgba(220,154,60,0.78);
  background: linear-gradient(90deg, rgba(220,154,60,0.14) 0%, rgba(5,7,9,0.68) 72%, rgba(5,7,9,0) 100%);
  box-shadow: inset 3px 0 0 rgba(220,154,60,0.86);
  color: #fff;
}

.repair-story-service:hover::after,
.repair-story-service:focus-visible::after {
  color: var(--amber);
  transform: translateY(3px);
}

.repair-story-service.is-active {
  border-color: rgba(220,154,60,0.78);
  background: linear-gradient(90deg, rgba(220,154,60,0.16) 0%, rgba(5,7,9,0.72) 72%, rgba(5,7,9,0) 100%);
  box-shadow: inset 3px 0 0 rgba(220,154,60,0.9);
  color: #fff;
}

.repair-story-service.is-active::after {
  color: var(--amber);
  transform: rotate(180deg);
}

.repair-story-service:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.repair-story-service span {
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.repair-story-service-details {
  position: absolute;
  left: clamp(28px, 4vw, 76px);
  bottom: 72px;
  width: min(620px, 39vw);
  min-height: 112px;
  padding: 15px 18px 14px;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-left: 2px solid rgba(220,154,60,0.72);
  background: linear-gradient(90deg, rgba(3,5,7,0.92) 0%, rgba(3,5,7,0.7) 76%, rgba(3,5,7,0.08) 100%);
  color: rgba(255,255,255,0.94);
  pointer-events: auto;
}

.repair-story-service-hint {
  margin: 2px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.5;
}

.repair-story-service-detail[hidden],
.repair-story-service-hint[hidden] {
  display: none;
}

.repair-story-service-detail h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: clamp(17px, 1.08vw, 20px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

.repair-story-service-detail p {
  max-width: 590px;
  margin: 0 0 8px;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.5;
}

.repair-story-service-detail ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,0.96);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.repair-story-service-detail li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--amber);
}

@media (min-width: 1600px) {
  .repair-story-services-heading {
    max-width: min(820px, 43vw);
  }

  .repair-story-services-heading h2 {
    font-size: clamp(62px, 3vw, 76px);
  }

  .repair-story-services-summary {
    max-width: 760px;
    margin-top: 15px;
    font-size: 15px;
  }

  .repair-story-service-list,
  .repair-story-service-details {
    width: min(820px, 43vw);
  }

  .repair-story-service-list {
    gap: 0 32px;
  }

  .repair-story-service {
    min-height: 62px;
    gap: 15px;
    padding: 14px 40px 14px 16px;
    font-size: clamp(17px, 0.9vw, 20px);
  }

  .repair-story-service span {
    font-size: 11px;
  }

  .repair-story-service-details {
    min-height: 140px;
    padding: 19px 22px 17px;
  }

  .repair-story-service-hint {
    font-size: 16px;
  }

  .repair-story-service-detail h3 {
    margin-bottom: 7px;
    font-size: clamp(20px, 1vw, 23px);
  }

  .repair-story-service-detail p {
    max-width: 760px;
    margin-bottom: 11px;
    font-size: clamp(14px, 0.68vw, 16px);
  }

  .repair-story-service-detail ul {
    gap: 7px 24px;
    font-size: clamp(13px, 0.6vw, 14px);
  }
}

.repair-story-progress {
  position: absolute;
  z-index: 8;
  right: clamp(24px, 3vw, 56px);
  bottom: 24px;
  left: clamp(24px, 3vw, 56px);
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 16px;
  color: rgba(255,255,255,0.54);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.repair-story-progress-track {
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,0.18);
}

.repair-story-progress-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (max-width: 1024px) {
  .repair-shop-story { height: 580vh; }
  .repair-story-stage { min-height: 660px; }
  .repair-story-layer--andy img { object-position: center; transform-origin: 50% 34%; }
  .repair-story-layer--assembled img { object-position: 78% center; }
  .repair-story-layer--exploded img { object-position: 66% center; }
  .repair-story-shade,
  .repair-story-shade-left {
    background:
      linear-gradient(90deg, rgba(2,4,5,0.78) 0%, rgba(2,4,5,0.5) 34%, rgba(2,4,5,0.14) 62%, transparent 80%),
      linear-gradient(180deg, rgba(2,4,5,0.4) 0%, rgba(2,4,5,0.22) 30%, rgba(2,4,5,0.5) 54%, rgba(2,4,5,0.95) 100%);
  }
  .repair-story-copy--hero,
  .repair-story-copy--truck {
    right: 26px;
    bottom: 76px;
    left: 26px;
    width: auto;
    max-width: 650px;
  }
  .repair-story-copy--hero { bottom: clamp(140px, 20vh, 210px); }
  .repair-story-copy--hero > p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.82);
    max-width: 620px;
  }
  .repair-hero-facts li { font-size: 14px; }
  .repair-story-copy--truck { bottom: 92px; }
  .repair-story-proof-stats,
  .repair-story-proof-details { max-width: none; }
  .repair-story-services {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 20px 64px;
    background: linear-gradient(180deg, transparent 24%, rgba(2,4,5,0.34) 48%, rgba(2,4,5,0.96) 100%);
  }
  .repair-story-services-heading {
    position: static;
    margin-bottom: 16px;
    text-align: left;
    transform: none;
  }
  .repair-story-services-heading h2 { font-size: clamp(34px, 7vw, 52px); }
  .repair-story-service-list {
    position: static;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    transform: none;
  }
  .repair-story-service-list--right { margin-top: 8px; }
  .repair-story-service,
  .repair-story-service-list--left .repair-story-service,
  .repair-story-service-list--right .repair-story-service {
    min-height: 46px;
    padding: 9px 10px;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.25;
  }
  .repair-story-service::after { display: none; }
  .repair-story-service-details {
    position: static;
    width: 100%;
    min-height: 104px;
    margin-top: 12px;
    padding: 12px 12px 11px;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .repair-story-layer--assembled img { object-position: 92% center; }
  .repair-story-layer--exploded img { object-position: 50% center; }
}

/* Desktop (>=1025): the base hero treatment (narrow 44vw column + a ~180px
   bottom offset + a headline up to 72px) only clears the fixed nav on a tall
   viewport. On a maximised-laptop viewport (~700-940px tall) the 4-line headline
   pushes the kicker up under the nav. Widen the column so the headline is ~2
   lines, cap its size, and lower the bottom offset (still height-relative, so
   tall screens keep the cinematic low placement). The >=1800 + tall treatment
   (min-height: 1050px) keeps its own larger rule and wins by source order. */
@media (min-width: 1025px) {
  .repair-story-copy--hero {
    width: min(760px, 56vw);
    /* Lifted so the facts row's last item clears the fixed "Talk to Andy"
       nudge in the bottom-right corner (applies at every desktop width). */
    bottom: clamp(122px, 16vh, 176px);
  }
  /* Match the in-flow type scale: H1 stays >= the section headings
     (~58px @1440), body lead sits at the 16/1.62 used in Road Service. */
  .repair-story-copy--hero h1 {
    font-size: clamp(44px, 2.4rem + 1.8vw, 64px);
  }
  .repair-story-copy--hero > p {
    max-width: 600px;
    margin: 20px 0 24px;
    font-size: clamp(16px, 0.9vw, 18px);
    line-height: 1.62;
    color: rgba(255,255,255,0.82);
  }
  .repair-story-copy--hero .repair-hero-facts li {
    font-size: clamp(14px, calc(6px + 0.5vw), 16px);
  }
  /* Frame 2 ("Diagnose first. Repair with a plan.") — same in-flow type scale
     as the hero: heading matches the section headings, body lead at 16/1.62,
     proof stats + detail row lifted off their tiny cinematic sizes. */
  .repair-story-copy--truck {
    max-width: 760px;
    bottom: clamp(96px, 13vh, 180px);
  }
  .repair-story-copy--truck h2 {
    font-size: clamp(44px, 2.4rem + 1.8vw, 64px);
  }
  .repair-story-copy--truck > p {
    max-width: 620px;
    margin: 20px 0 0;
    font-size: clamp(16px, 0.9vw, 18px);
    line-height: 1.62;
    color: rgba(255,255,255,0.82);
  }
  .repair-story-copy--truck .repair-story-proof-stats {
    max-width: 640px;
    margin-top: 24px;
  }
  .repair-story-copy--truck .repair-story-proof-stats strong {
    font-size: clamp(26px, 1.8vw, 34px);
  }
  .repair-story-copy--truck .repair-story-proof-stats span {
    font-size: clamp(11px, calc(4px + 0.5vw), 14px);
    letter-spacing: 0.08em;
  }
  /* Spread the three notes evenly under the three stat cards, and match the
     hero facts row ("4.8 on Google...") typography: 14px / 600 / soft grey. */
  .repair-story-copy--truck .repair-story-proof-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
    max-width: 640px;
    margin-top: 16px;
    color: rgba(232, 232, 240, 0.68);
    font-size: clamp(14px, 0.72vw, 15.5px);
    font-weight: 600;
    letter-spacing: normal;
  }
  .repair-story-copy--truck .repair-story-proof-details li {
    gap: 8px;
    padding-left: 14px;
  }
  .repair-story-copy--truck .repair-story-proof-details i {
    font-size: inherit;
  }
  /* A touch more left-side shade so the wider column stays legible over Andy. */
  .repair-story-shade {
    background:
      radial-gradient(ellipse 640px 480px at 76% 52%, rgba(2,4,5,0.4), transparent 72%),
      linear-gradient(90deg, rgba(2,4,5,0.34) 0%, transparent 36%, rgba(2,4,5,0.78) 100%),
      linear-gradient(180deg, rgba(2,4,5,0.42) 0%, transparent 29%, transparent 58%, rgba(2,4,5,0.82) 100%);
  }
}

/* Frame 3 ("One Shop. Whole Truck.") — bring the summary, service pills and the
   bottom hint/detail panel up to the same in-flow type scale as the hero. This
   frame is a fixed absolute composition (heading top-anchored, service list at
   top:49%, detail panel bottom-anchored), so the larger summary only fits when
   the viewport is tall enough — on a short window it would overlap the list.
   Gate on min-height; short windows keep the compact cinematic scale. */
@media (min-width: 1025px) and (min-height: 760px) {
  .repair-story-services-summary {
    font-size: clamp(16px, 0.9vw, 18px);
    line-height: 1.6;
  }
  .repair-story-service {
    min-height: 60px;
    font-size: clamp(19px, 1.5vw, 24px);
  }
  .repair-story-service span {
    font-size: 12.5px;
  }
  .repair-story-service-hint {
    font-size: clamp(16px, 0.9vw, 18px);
    line-height: 1.55;
  }
  .repair-story-service-detail p {
    font-size: clamp(15.5px, 0.85vw, 17px);
    line-height: 1.55;
  }
  .repair-story-service-detail ul {
    font-size: clamp(13.5px, 0.75vw, 15px);
  }
}

/* Below 1800 the "One Shop" heading is smaller than @1600's, so nudge the
   absolutely-positioned service list down to keep its clearance. At >=1800 the
   heading keeps @1600 / @1800-tall sizing and the base list position. */
@media (min-width: 1025px) and (max-width: 1799px) and (min-height: 760px) {
  .repair-story-services-heading h2 {
    font-size: clamp(44px, 2rem + 1.7vw, 60px);
  }
  .repair-story-service-list {
    top: 52%;
    width: min(690px, 45vw);
  }
}

/* The scene's three pieces (heading, list, detail panel) were independently
   anchored — the list to a % of the stage, the panel to the stage bottom —
   and the 9-item list + an expanded detail panel only clear each other above
   ~950px tall. Below that they overlapped (worst with a service picked, when
   the panel grows). Switch the whole desktop range to the same static
   bottom-aligned flow the mobile layout uses, with vh-scaled sizing: tight
   near ~600px, roomy by ~1000px. `space-between` keeps the original
   heading-top / list-middle / panel-bottom distribution. */
@media (min-width: 1025px) {
  .repair-story-stage { min-height: 0; }
  .repair-story-services {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(128px, 16vh, 176px) clamp(28px, 4vw, 76px) clamp(44px, 6vh, 72px);
    background: linear-gradient(180deg, transparent 18%, rgba(2,4,5,0.32) 44%, rgba(2,4,5,0.92) 100%);
  }
  .repair-story-services-heading {
    position: static;
    transform: none;
    max-width: none;
    margin-bottom: clamp(10px, 1.7vh, 20px);
  }
  /* Match the other scene headings (hero / diagnose / roadside); vh cap keeps
     it from crowding the 9-item list on a short viewport. */
  .repair-story-services-heading h2 { font-size: min(clamp(40px, 2.4rem + 1.8vw, 64px), 7vh); }
  .repair-story-services-summary {
    margin-top: clamp(6px, 1vh, 13px);
    font-size: clamp(13px, 1.7vh, 16px);
    line-height: 1.45;
  }
  .repair-story-service-list {
    position: static;
    transform: none;
    width: min(800px, 50vw);
    gap: 0 20px;
  }
  .repair-story-service {
    min-height: clamp(38px, 5.8vh, 60px);
    padding: clamp(5px, 1vh, 13px) 28px clamp(5px, 1vh, 13px) 13px;
    font-size: clamp(15px, 2.5vh, 24px);
    line-height: 1.25;
  }
  .repair-story-service span { font-size: clamp(10px, 1.6vh, 13px); }
  .repair-story-service-details {
    position: static;
    width: min(800px, 50vw);
    min-height: 0;
    margin-top: clamp(10px, 1.6vh, 16px);
    padding: clamp(10px, 1.5vh, 16px) 18px clamp(11px, 1.6vh, 16px);
  }
  .repair-story-service-detail h3 { font-size: clamp(15px, 2vh, 18px); margin-bottom: 4px; }
  .repair-story-service-detail p { font-size: clamp(13px, 1.8vh, 16px); line-height: 1.45; }
  .repair-story-service-detail ul { font-size: clamp(12px, 1.6vh, 15px); gap: 4px 14px; margin-top: 6px; }
}

/* 1025–1499: a wider empty gutter opens on the right of the hero copy, so pull
   the block toward it a touch. >=1500 keeps the approved 5vw offset. */
@media (min-width: 1025px) and (max-width: 1499px) {
  .repair-story-copy--hero {
    right: clamp(24px, 3vw, 52px);
  }
}

@media (max-width: 680px) {
  .repair-shop-story { height: 560vh; }
  .repair-story-stage { min-height: 620px; }
  .repair-story-layer--andy img { object-position: 50% center; transform-origin: 50% 36%; }
  .repair-story-layer--assembled img { object-position: 94% center; }
  .repair-story-layer--exploded img { object-position: 60% center; }
  /* Keep Andy's face as the human focal point: the mobile portrait owns the
     upper field, while the complete copy stack starts below his face. */
  .repair-story-copy--hero { top: clamp(304px, 38vh, 336px); bottom: auto; }
  /* Text now spans the top half of the frame — darken the scrim across it. */
  .repair-story-shade,
  .repair-story-shade-left {
    background: linear-gradient(180deg, rgba(2,4,5,0.78) 0%, rgba(2,4,5,0.66) 46%, rgba(2,4,5,0.5) 64%, rgba(2,4,5,0.92) 100%);
  }
  .repair-story-kicker { margin-bottom: 9px; font-size: 9px; }
  .repair-story-copy h1,
  .repair-story-copy h2 {
    font-size: clamp(34px, 9vw, 44px);
    letter-spacing: -0.036em;
    line-height: 1.04;
    text-wrap: pretty;
  }
  .repair-story-copy--hero > p { margin: 12px 0 16px; font-size: 12px; line-height: 1.48; }
  .repair-story-copy--truck > p { margin: 10px 0 0; font-size: 12px; line-height: 1.48; }
  .repair-story-copy--truck { bottom: 76px; }
  .repair-story-proof-stats { gap: 5px; margin-top: 13px; }
  .repair-story-proof-stats li { padding: 8px 8px 9px; }
  .repair-story-proof-stats strong { font-size: 17px; }
  .repair-story-proof-stats span { font-size: 7px; letter-spacing: 0.07em; }
  .repair-story-proof-details { gap: 7px 13px; margin-top: 9px; font-size: 8.5px; }
  .repair-story-actions { gap: 10px; flex-direction: column; align-items: flex-start; }
  .repair-story-actions .klg-cta { min-height: 48px; padding-inline: 17px; }
  .repair-story-actions .klg-cta-label { font-size: 12px; }
  .repair-story-andy { font-size: 10px; }
  .repair-story-services { padding: 68px 13px 62px; }
  .repair-story-services-heading h2 { font-size: 32px; }
  .repair-story-services-summary { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
  .repair-story-service span { display: none; }
  .repair-story-service-details { min-height: 98px; }
  .repair-story-service-detail h3 { font-size: 16px; }
  .repair-story-service-detail p { font-size: 13px; }
  .repair-story-service-detail ul { gap: 5px 14px; font-size: 12.5px; }
  .repair-story-progress { right: 15px; left: 15px; grid-template-columns: minmax(70px, 1fr) auto; }
  .repair-story-progress > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .repair-shop-story { height: auto; }
  .repair-story-stage { display: block; height: auto; min-height: 0; overflow: visible; }
  .repair-story-layer { display: none; position: relative; inset: auto; opacity: 1; transform: none; }
  .repair-story-layer--exploded { display: block; height: min(72svh, 760px); }
  .repair-story-copy { position: relative; inset: auto; width: auto; max-width: none; opacity: 1; transform: none; }
  .repair-story-copy--hero { padding: 50px max(24px, 5vw); background: #080b0e; }
  .repair-story-copy--truck { padding: 50px max(24px, 5vw); background: #080b0e; }
  .repair-story-shade,
  .repair-story-shade-left,
  .repair-story-cut,
  .repair-story-progress { display: none; }
  .repair-story-services { position: relative; inset: auto; opacity: 1; padding: 50px max(20px, 5vw) 70px; background: #080b0e; }
}

.repair-roadside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(650px, 54vw, 820px);
  padding: clamp(86px, 8vw, 126px) 0;
  background: var(--dark);
}

.repair-roadside-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
}

.repair-roadside-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.repair-roadside::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Hold the scrim dark across the full width of the copy column (~44vw) so
     text never lands on the bright truck cab, then fall off past it. */
  background: linear-gradient(
    90deg,
    rgba(4, 8, 12, 0.94) 0%,
    rgba(4, 8, 12, 0.90) 30%,
    rgba(4, 8, 12, 0.74) 46%,
    rgba(4, 8, 12, 0.34) 62%,
    rgba(4, 8, 12, 0.08) 82%,
    rgba(4, 8, 12, 0) 100%
  );
}

.repair-roadside::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(2, 6, 10, 0.10), transparent 62%, rgba(2, 6, 10, 0.50)),
    linear-gradient(90deg, rgba(2, 6, 10, 0.12), transparent 56%);
}

.repair-roadside-inner {
  display: block;
}

/* Heading keeps a wider column (stays legible on the dark half of the photo);
   the small body copy + facts are held narrower so they never reach the
   bright truck cab. */
.repair-roadside-copy { max-width: min(660px, 46vw); }
.repair-roadside-copy > p,
.repair-roadside-facts { max-width: 520px; }

.repair-kicker--live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  /* text matches every other kicker; the pulsing dot stays green as the signal */
  color: var(--amber-light);
}

.repair-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(76,175,125,0.55);
  animation: repairLivePulse 1.8s ease-out infinite;
}

@keyframes repairLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,125,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(76,175,125,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
}

.repair-roadside-copy h2 {
  color: #fff;
  margin-bottom: 24px;
}

.repair-roadside-copy > p {
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 30px;
  text-wrap: pretty;
}

.repair-roadside-scope {
  display: block;
  margin-bottom: 16px;
  color: var(--amber-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repair-roadside-facts {
  display: grid;
  gap: 13px;
  margin-bottom: 36px;
  list-style: none;
}

.repair-roadside-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  font-weight: 600;
}

.repair-roadside-facts i { color: var(--green); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .repair-live-dot { animation: none; }
}

.repair-services {
  padding: var(--repair-section) 0;
  background: var(--repair-paper);
  color: var(--repair-ink);
}

.repair-section-heading { max-width: 1040px; margin-bottom: 42px; }
.repair-section-heading--light { color: var(--text); }
.repair-section-heading--dark { color: var(--repair-ink); }
.repair-section-heading--center {
  margin-inline: auto;
  text-align: center;
}
.repair-section-heading--center p { margin-inline: auto; }
/* Kicker gap to the heading is set once on .repair-kicker (16px); sections only
   override the colour to sit on their dark or light background. */
.repair-section-heading .repair-kicker,
.repair-location .repair-kicker { color: #88520d; }
.repair-section-heading--light .repair-kicker,
.repair-owner .repair-kicker { color: var(--amber-light); }

/* One heading scale for every section H2, sized to sit just under the hero H1
   (~62-64px desktop). Mobile stays ~38px. Large-screen jumps removed so it
   holds this scale instead of climbing to 72-76. */
.repair-page .section-title {
  margin-bottom: 18px;
  color: inherit;
  font-size: clamp(38px, 1.2rem + 3vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.repair-page .repair-section-title--compact {
  font-size: clamp(38px, 1.2rem + 3vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.repair-section-heading p,
.repair-location-copy > p,
.repair-owner-copy > p {
  max-width: 760px;
  color: var(--repair-ink-soft);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.repair-section-heading--light p,
.repair-owner-copy > p { color: var(--text-soft); }

.repair-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  border-bottom: 1px solid var(--repair-paper-line);
}

.repair-service-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 20px;
  align-content: start;
  min-height: 0;
  padding: 30px 0 32px;
  border-top: 1px solid var(--repair-paper-line);
  background: transparent;
  scroll-margin-top: calc(var(--repair-preview-bar) + 104px);
}

.repair-service-card--wide {
  grid-column: 1 / -1;
}

.repair-service-card--wide p {
  max-width: 760px;
}

.repair-service-card--wide .repair-service-list {
  max-width: 620px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.repair-service-card-head {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 5px;
}

.repair-service-number {
  color: #88520d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.repair-service-card h3 {
  grid-column: 2;
  margin-bottom: 9px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.45px;
  text-wrap: pretty;
}

.repair-service-card p {
  grid-column: 2;
  max-width: 520px;
  margin-bottom: 16px;
  color: var(--repair-ink-soft);
  font-size: 14.5px;
  line-height: 1.58;
}

.repair-service-list {
  grid-column: 2;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.repair-service-list li {
  position: relative;
  padding-left: 17px;
  color: var(--repair-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}

.repair-service-list li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9a5e0d;
}

.repair-services-callout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 3vw, 48px);
  margin-top: 32px;
  padding: 26px 30px;
  border-radius: 14px;
  background: var(--repair-ink);
  color: var(--text);
}

.repair-services-callout > div { display: flex; flex: 0 1 520px; flex-direction: column; gap: 4px; }
.repair-services-callout > div > span { color: var(--muted); font-size: 12px; }
.repair-services-callout strong { font-size: 15px; }
.repair-services-callout .repair-services-callout-cta {
  flex: 0 0 auto;
  margin-left: auto;
  cursor: pointer;
}
.repair-services-callout .repair-services-callout-cta .klg-cta-label {
  color: inherit;
  font-size: inherit;
}
.repair-services-callout .repair-services-callout-cta .klg-cta-accent {
  color: inherit;
  font-size: inherit;
}

.repair-inside {
  padding: var(--repair-section) 0;
  background:
    radial-gradient(ellipse 60% 70% at 82% 20%, rgba(58,155,213,0.10), transparent 65%),
    var(--dark2);
}

.repair-reviews {
  padding: var(--repair-section) 0;
  border-top: 1px solid var(--repair-paper-line);
  background: var(--repair-paper-strong);
  color: var(--repair-ink);
}

.repair-reviews-head {
  max-width: 920px;
  margin: 0 0 40px;
}

.repair-reviews-head .repair-kicker { color: #88520d; }
.repair-reviews-head p {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--repair-ink-soft);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.repair-google-g { flex: none; display: block; }
.repair-hero-facts .repair-google-g { flex: none; }

/* Reviews: editorial feature + compact proof card. The light section creates a
   deliberate reading pause between the dark cinematic chapters. */
.repair-reviews-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 22px;
  align-items: stretch;
  padding-top: 6px;
}

.repair-reviews-feature {
  position: relative;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  margin: 0;
  padding: clamp(34px, 4.2vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 14%, rgba(45,122,165,0.20), transparent 38%),
    linear-gradient(145deg, #12171b 0%, #07090b 72%);
  box-shadow: 0 1px 3px rgba(20,16,10,0.10), 0 26px 56px rgba(20,16,10,0.16);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1), box-shadow 320ms cubic-bezier(0.16,1,0.3,1);
}
.repair-reviews-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 3px rgba(20,16,10,0.14), 0 32px 64px rgba(20,16,10,0.28);
}
.repair-reviews-feature-label {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.repair-reviews-mark {
  display: block;
  color: var(--repair-amber-quote);
  font-family: Georgia, serif;
  line-height: 0.8;
}
.repair-reviews-feature .repair-reviews-mark { margin: 34px 0 6px; font-size: 52px; opacity: 0.5; }
.repair-reviews-feature blockquote {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.repair-reviews-feature figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.repair-reviews-feature figcaption strong { color: #fff; font-size: 14px; }
.repair-reviews-feature figcaption span { color: rgba(255,255,255,0.52); font-size: 12px; }

.repair-reviews-proof {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(24,21,15,0.08);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  background: #f6f2e8;
  box-shadow: 0 1px 3px rgba(42,32,18,0.05), 0 22px 48px rgba(42,32,18,0.09);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1), box-shadow 320ms cubic-bezier(0.16,1,0.3,1);
}
.repair-reviews-proof:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 3px rgba(42,32,18,0.08), 0 28px 56px rgba(42,32,18,0.16);
}
.repair-reviews-proof:focus-visible { outline: 3px solid rgba(136,82,13,0.62); outline-offset: 3px; }
.repair-reviews-proof-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--repair-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.repair-reviews-score {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border-block: 1px solid var(--repair-paper-line);
}
.repair-reviews-score > div {
  min-width: 0;
  padding: 23px 18px 21px 0;
}
.repair-reviews-score > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--repair-paper-line);
}
.repair-reviews-score strong {
  display: block;
  color: var(--repair-ink);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
.repair-reviews-score > div > span:not(.repair-reviews-score-stars) {
  display: block;
  margin-top: 10px;
  color: var(--repair-ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.repair-reviews-score-stars {
  display: block;
  margin-top: 9px;
  color: var(--repair-amber-star);
  font-size: 12px;
  letter-spacing: 1.5px;
  line-height: 1;
}
.repair-reviews-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.repair-reviews-stats li {
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(136,82,13,0.32);
}
.repair-reviews-stats strong {
  display: block;
  color: var(--repair-ink);
  font-size: clamp(23px, 1.9vw, 29px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.repair-reviews-stats li span {
  display: block;
  margin-top: 7px;
  color: var(--repair-ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* Reads as a button, not a caption: border + padding make the click target
   obvious, and it holds a real link size (14px). */
.repair-reviews-proof-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  align-self: start;
  min-height: 46px;
  margin-top: auto;
  padding: 11px 20px;
  border: 1px solid rgba(136,82,13,0.42);
  border-radius: 11px;
  color: var(--repair-amber-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.repair-reviews-proof-link:hover {
  background: rgba(136,82,13,0.09);
  border-color: rgba(136,82,13,0.72);
}
.repair-reviews-proof-link:focus-visible { outline: 3px solid rgba(136,82,13,0.62); outline-offset: 3px; }
.repair-reviews-proof-link i { font-size: 13px; }

/* All excerpts remain authored in the page for search and accessibility; only
   the visual presentation becomes a user-controlled horizontal review reel. */
.repair-reviews-carousel { margin-top: 52px; }
.repair-reviews-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.repair-reviews-carousel-label {
  color: var(--repair-ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.repair-reviews-carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.repair-reviews-carousel-count {
  min-width: 60px;
  margin-right: 7px;
  color: rgba(22,20,9,0.43);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.repair-reviews-carousel-count strong { color: var(--repair-amber-ink); }
.repair-reviews-carousel-arrow {
  display: inline-grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid rgba(22,20,9,0.18);
  border-radius: 50%;
  background: transparent;
  color: var(--repair-ink);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
.repair-reviews-carousel-arrow:hover {
  border-color: var(--repair-ink);
  background: var(--repair-ink);
  color: #fff;
}
.repair-reviews-carousel-arrow:active { transform: scale(0.9); }
.repair-reviews-carousel-arrow:focus-visible { outline: 3px solid rgba(136,82,13,0.52); outline-offset: 3px; }
.repair-reviews-carousel-arrow:disabled { opacity: 0.26; cursor: default; transform: none; }
.repair-reviews-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.repair-reviews-carousel-viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
/* Snap must be off while the JS settle animates scrollLeft — mandatory snap
   re-snaps every programmatic frame and stalls the arrow/keyboard navigation. */
.repair-reviews-carousel-viewport.is-settling {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.repair-reviews-carousel-viewport::-webkit-scrollbar { display: none; }
.repair-reviews-carousel-viewport:focus-visible { outline: 3px solid rgba(136,82,13,0.52); outline-offset: 4px; }
.repair-reviews-wall {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.repair-reviews-quote {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  min-height: 340px;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px 26px;
  overflow: hidden;
  border: 1px solid rgba(22,20,9,0.08);
  border-radius: 16px;
  background: #f6f2e8;
  box-shadow: 0 1px 2px rgba(42,32,18,0.04), 0 14px 30px rgba(42,32,18,0.07);
  scroll-snap-align: start;
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1), box-shadow 320ms cubic-bezier(0.16,1,0.3,1);
}
.repair-reviews-quote:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 2px rgba(42,32,18,0.07), 0 20px 40px rgba(42,32,18,0.14);
}
.repair-reviews-quote .repair-reviews-mark { font-size: 32px; margin-bottom: 2px; opacity: 0.45; }
.repair-reviews-quote blockquote {
  flex: 1;
  margin: 0;
  color: var(--repair-ink);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.55;
  text-wrap: pretty;
}
.repair-reviews-by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--repair-paper-line);
}
.repair-reviews-by strong { color: var(--repair-ink); font-size: 13px; }
.repair-reviews-by span { color: var(--repair-ink-soft); font-size: 11px; line-height: 1.45; }

.repair-reviews-note {
  max-width: 960px;
  margin: 18px 0 0;
  color: var(--repair-ink-soft);
  font-size: 10px;
  line-height: 1.55;
}

.repair-inside { overflow: hidden; }

.repair-inside-heading {
  max-width: 880px;
  margin-bottom: 48px;
}

.repair-inside-heading h2 { max-width: 820px; }
.repair-inside-heading p { max-width: 680px; }

.repair-film { position: relative; }

.repair-film-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.repair-film-viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.repair-film-viewport.is-settling {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.repair-film-viewport::-webkit-scrollbar { display: none; }

.repair-film-viewport:focus-visible {
  outline: 3px solid rgba(220,154,60,0.78);
  outline-offset: 5px;
  border-radius: var(--repair-radius);
}

.repair-film-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: max-content;
  height: clamp(540px, 45vw, 650px);
  padding: 0 clamp(160px, 24vw, 380px) 6px 0;
}

.repair-film-frame {
  --repair-photo-brightness: 0.91;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.76;
  --repair-photo-sepia: 0.03;
  position: relative;
  width: clamp(320px, 29vw, 420px);
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: var(--repair-radius);
  background: var(--card2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.28), 0 18px 40px rgba(0,0,0,0.32);
  scroll-snap-align: start;
}

.repair-film-frame--hero {
  grid-row: 1 / span 2;
  width: clamp(570px, 50vw, 720px);
}

.repair-film-frame--tall {
  grid-row: 1 / span 2;
}

.repair-film-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--card2);
}

.repair-film-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.repair-film-frame--empty {
  border-color: rgba(255,255,255,0.10);
  background: #080d10;
  box-shadow: none;
}

.repair-film-image--placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.025), transparent 42%),
    radial-gradient(circle at 50% 42%, rgba(43,117,153,0.07), transparent 58%),
    #080d10;
}

.repair-film-image--placeholder::before {
  content: '';
  width: min(108px, 28%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,154,60,0.46), transparent);
}

.repair-film-image--placeholder span {
  position: absolute;
  color: rgba(255,255,255,0.22);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.repair-film-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(4,22,29,0.16), transparent 47%, rgba(145,82,20,0.07)),
    radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(0,0,0,0.30) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.02), transparent 62%, rgba(0,0,0,0.42));
}

.repair-film-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    brightness(var(--repair-photo-brightness))
    contrast(var(--repair-photo-contrast))
    saturate(var(--repair-photo-saturation))
    sepia(var(--repair-photo-sepia));
  transition: transform 650ms cubic-bezier(0.16,1,0.3,1), filter 300ms ease;
  /* Photos must not be grabbed as native drag targets — the reel drags the
     viewport, not the images. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.repair-film-image,
.repair-film-image picture { -webkit-user-drag: none; }

.repair-photo--lead {
  --repair-photo-brightness: 0.88;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.70;
}
.repair-photo--suspension {
  --repair-photo-brightness: 0.90;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.74;
}
.repair-photo--diagnostics {
  --repair-photo-brightness: 0.91;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.70;
}
.repair-photo--andy {
  --repair-photo-brightness: 0.90;
  --repair-photo-contrast: 1.10;
  --repair-photo-saturation: 0.74;
}
.repair-photo--engine {
  --repair-photo-brightness: 0.87;
  --repair-photo-contrast: 1.16;
  --repair-photo-saturation: 0.66;
  --repair-photo-sepia: 0.06;
}
.repair-photo--steering {
  --repair-photo-brightness: 0.90;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.70;
}
.repair-photo--trailer {
  --repair-photo-brightness: 0.98;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.65;
}
.repair-photo--signage {
  --repair-photo-brightness: 0.90;
  --repair-photo-contrast: 1.13;
  --repair-photo-saturation: 0.72;
}
.repair-photo--machining {
  --repair-photo-brightness: 0.89;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.70;
}
.repair-photo--alignment {
  --repair-photo-brightness: 0.88;
  --repair-photo-contrast: 1.13;
  --repair-photo-saturation: 0.66;
}
.repair-photo--cooling {
  --repair-photo-brightness: 0.90;
  --repair-photo-contrast: 1.12;
  --repair-photo-saturation: 0.71;
}
.repair-photo--two-trucks {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--wheel-balancer {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--hunter-alignment {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--mechanic-adjustment {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--wheel-end-service {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--metal-grinding {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--precision-measurement {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--computer-diagnostics {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--trailer-service {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--major-engine-repair {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--tire-service {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--heavy-component-lift {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--brake-drum-hub {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--engine-bay-lifting {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--peterbilt-493-rain {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--stop-engine-diagnostic {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--branded-mudflap {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--andy-service-call {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--heavy-duty-chassis-frame {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--exterior-evening {
  --repair-photo-brightness: 1;
  --repair-photo-contrast: 1;
  --repair-photo-saturation: 1;
  --repair-photo-sepia: 0;
}
.repair-photo--two-trucks img { object-position: center 48%; }
.repair-photo--wheel-balancer img { object-position: center; }
.repair-photo--hunter-alignment img { object-position: center; }
.repair-photo--mechanic-adjustment img { object-position: center; }
.repair-photo--wheel-end-service img { object-position: center; }
.repair-photo--metal-grinding img { object-position: center; }
.repair-photo--precision-measurement img { object-position: center; }
.repair-photo--computer-diagnostics img { object-position: center; }
.repair-photo--trailer-service img { object-position: center; }
.repair-photo--major-engine-repair img { object-position: center; }
.repair-photo--tire-service img { object-position: center; }
.repair-photo--heavy-component-lift img { object-position: center; }
.repair-photo--brake-drum-hub img { object-position: center; }
.repair-photo--engine-bay-lifting img { object-position: center; }
.repair-photo--peterbilt-493-rain img { object-position: center; }
.repair-photo--stop-engine-diagnostic img { object-position: center; }
.repair-photo--branded-mudflap img { object-position: center; }
.repair-photo--andy-service-call img { object-position: center; }
.repair-photo--heavy-duty-chassis-frame img { object-position: center; }
.repair-photo--exterior-evening img { object-position: center; }
.repair-photo--suspension img { object-position: center 46%; }
.repair-photo--diagnostics img { object-position: center 82%; }
.repair-photo--andy img { object-position: center 24%; }
.repair-photo--trailer img { object-position: center 58%; }
.repair-photo--signage img { object-position: center 68%; }
.repair-photo--machining img { object-position: center 42%; }
.repair-photo--alignment img { object-position: center 56%; }

.repair-film-frame figcaption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  min-height: 96px;
  padding: 44px 20px 17px;
  background: linear-gradient(to bottom, transparent, rgba(3,7,10,0.86));
  color: rgba(255,255,255,0.94);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.repair-film-frame--hero figcaption {
  min-height: 124px;
  padding: 58px 28px 24px;
  font-size: 15px;
}

.repair-film-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}

.repair-film-rule { display: none; }

.repair-film-count {
  min-width: 58px;
  margin-right: 6px;
  color: rgba(255,255,255,0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.repair-film-count strong { color: var(--amber-light); }

.repair-film-arrow {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  background: rgba(255,255,255,0.035);
  color: var(--text);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms ease;
}

.repair-film-arrow:hover {
  border-color: rgba(220,154,60,0.58);
  background: rgba(220,154,60,0.08);
  color: var(--amber-light);
}

.repair-film-arrow:active { transform: scale(0.9); }
.repair-film-arrow:focus-visible { outline: 3px solid rgba(220,154,60,0.78); outline-offset: 3px; }
.repair-film-arrow:disabled { opacity: 0.26; cursor: default; transform: none; }
.repair-film-arrow i { font-size: 13px; }

@media (min-width: 1025px) {
  .repair-film-viewport {
    width: calc(100% + max(40px, (100vw - 1280px) / 2));
  }
}

.repair-location {
  padding: var(--repair-section) 0;
  background: var(--repair-paper-strong);
  color: var(--repair-ink);
}

.repair-location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
  gap: clamp(64px, 6vw, 104px);
  align-items: start;
}

.repair-page .repair-location-copy h2 {
  max-width: 820px;
  font-size: clamp(46px, 4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: wrap;
}
.repair-location-title-lead { display: block; }
.repair-location-copy > p { max-width: 720px; margin-bottom: 32px; }
.repair-location-copy strong { color: var(--repair-ink); }

.repair-text-link,
.repair-owner-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--repair-ink);
  font-size: 13px;
  /* 800 read as a heavy slab; 600 keeps these as legible link labels */
  font-weight: 600;
  text-decoration: none;
}

.repair-text-link i,
.repair-owner-proof i { font-size: 10px; transition: transform 180ms ease; }
.repair-text-link:hover i,
.repair-owner-proof:hover i { transform: translate(3px, -2px); }

.repair-location-actions .repair-text-link {
  justify-content: center;
  min-width: 205px;
  min-height: 58px;
  padding: 0 24px;
  border: 1px solid rgba(22,20,9,0.22);
  border-radius: 15px;
  background: rgba(255,255,255,0.22);
  font-size: 14px;
  /* 800 read as a heavy slab on the light card; 700 keeps it a button label */
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 320ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 320ms cubic-bezier(0.16,1,0.3,1),
    background 320ms cubic-bezier(0.16,1,0.3,1),
    border-color 320ms cubic-bezier(0.16,1,0.3,1);
}

.repair-location-actions .repair-text-link:hover {
  transform: translateY(-2px);
  border-color: rgba(22,20,9,0.42);
  background: rgba(255,255,255,0.46);
  box-shadow: 0 10px 24px rgba(22,20,9,0.08);
}

.repair-location-actions .repair-text-link:active {
  transform: scale(0.985);
  transition-duration: 110ms;
}

.repair-contact-card {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: 0;
  border-top: 1px solid rgba(24,21,15,0.28);
  border-bottom: 1px solid var(--repair-paper-line);
  background: transparent;
  color: var(--repair-ink);
  font-style: normal;
  text-align: center;
}

.repair-contact-eyebrow {
  display: block;
  padding-top: 24px;
  color: #88520d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repair-contact-card > img {
  display: block;
  width: auto;
  height: 74px;
  max-width: 80%;
  margin: 18px auto 11px;
}

.repair-contact-sub {
  margin-bottom: 28px;
  color: var(--repair-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.repair-contact-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--repair-paper-line);
  text-align: left;
}

.repair-contact-row span {
  color: #756d62;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repair-contact-row strong { color: var(--repair-ink); font-size: 15px; font-weight: 700; line-height: 1.55; }
.repair-contact-row a { color: #88520d; font-size: 20px; font-weight: 800; line-height: 1.3; text-decoration: none; transition: color 180ms ease; }
.repair-contact-row a:hover { color: var(--repair-ink); }

/* Hours read as a scannable schedule, not one run-on line: a fixed day column
   in the muted label colour, the times at full ink weight beside it. */
.repair-contact-row--hours span:first-child { align-self: start; }
.repair-hours { display: flex; flex-direction: column; gap: 8px; }
.repair-hours > div { display: flex; align-items: baseline; gap: 10px; }
.repair-hours > div > span {
  flex: 0 0 58px;
  color: #756d62;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}
.repair-hours > div > strong { font-size: 15px; font-weight: 700; line-height: 1.3; }

.repair-owner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0;
  background: var(--dark);
}

.repair-owner-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('owner-operator-road-panorama-1920.webp') center 62% / cover no-repeat;
  filter: brightness(1.16) contrast(1.04) saturate(0.96);
}

@media (min-width: 1600px) {
  .repair-owner-bg {
    background-image: url('owner-operator-road-panorama-3828.webp');
  }
}

.repair-owner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.48) 54%, rgba(0,0,0,0.26) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.12) 45%,
      rgba(0,0,0,0.34) 68%,
      rgba(0,0,0,0.78) 86%,
      #000 100%);
}

.repair-owner-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 72px;
  align-items: center;
}

.repair-owner-copy h2 { max-width: 760px; margin-bottom: 14px; }
.repair-owner-copy > p { max-width: 760px; margin: 0; }
.repair-owner-actions { justify-content: flex-end; max-width: 360px; }
.repair-owner-actions .klg-cta {
  --fs: 14px;
  --gap: 10px;
  --pad-x: 22px;
}
.repair-owner .klg-cta-accent {
  background: var(--amber-light);
  opacity: 0.58;
}
.repair-owner .klg-cta:hover .klg-cta-accent { opacity: 0.92; }
.repair-owner-proof {
  color: rgba(243,237,224,0.82);
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
}
.repair-owner-proof:hover { color: var(--amber-light); }

.repair-faq {
  padding: var(--repair-section) 0;
  background: var(--repair-paper);
  color: var(--repair-ink);
}

.repair-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--repair-editorial-aside);
  gap: var(--repair-editorial-gap);
  align-items: start;
}

.repair-faq-layout .repair-section-heading { margin-bottom: 30px; }
.repair-faq-list { border-top: 1px solid var(--repair-paper-line); }

.repair-faq-item {
  border-bottom: 1px solid var(--repair-paper-line);
}

.repair-faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
  padding: 19px 2px;
  color: var(--repair-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.42;
  cursor: pointer;
  list-style: none;
  transition: color 240ms ease;
}

.repair-faq-item summary span { max-width: min(760px, calc(100% - 56px)); text-wrap: pretty; }

.repair-faq-item summary::-webkit-details-marker { display: none; }
.repair-faq-item summary i {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(116,69,10,0.24);
  border-radius: 50%;
  color: var(--repair-amber-ink);
  font-size: 11px;
  transition:
    transform 300ms cubic-bezier(0.22,1,0.36,1),
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}
.repair-faq-item summary:hover { color: var(--repair-amber-ink); }
.repair-faq-item summary:hover i,
.repair-faq-item[open] summary i {
  border-color: rgba(116,69,10,0.52);
  background: rgba(116,69,10,0.07);
}
.repair-faq-item[open]:not(.is-closing) summary i { transform: rotate(45deg); }
.repair-faq-answer { padding: 0 56px 28px 2px; }
.repair-faq-item p { max-width: 720px; color: var(--repair-ink-soft); font-size: 16px; line-height: 1.68; }
.repair-faq-item p a {
  color: var(--repair-amber-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  text-decoration-color: rgba(116,69,10,0.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.repair-faq-cta {
  padding: 32px;
  border-radius: var(--repair-radius);
  background: var(--repair-ink);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(24,21,15,0.1);
}

.repair-faq-cta-label {
  display: block;
  margin-bottom: 22px;
  color: var(--amber-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repair-faq-cta h3 { margin-bottom: 12px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.027em; text-wrap: balance; }
.repair-faq-cta > p { margin-bottom: 26px; color: var(--text-soft); font-size: 14px; line-height: 1.65; }

.repair-faq-phone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 17px 0;
  border-top: 1px solid var(--border2);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(220,154,60,0.2);
  transition: opacity 180ms ease, transform 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .repair-faq-phone:hover { opacity: 0.78; }
}

.repair-faq-phone:active {
  opacity: 0.68;
  transform: scale(0.985);
}
.repair-faq-phone span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.repair-faq-phone strong { color: var(--amber-light); font-size: 19px; }
.repair-faq-map { display: flex; gap: 9px; margin-top: 17px; color: var(--text-soft); font-size: 12px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: color 180ms ease; }
.repair-faq-map:hover { color: var(--text); }
.repair-faq-map i { margin-top: 2px; color: var(--amber-light); }

.repair-review-date {
  margin-top: 24px;
  max-width: 720px;
  color: var(--repair-ink-soft);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}

.repair-page .footer { padding-top: 1px; }
.repair-page .footer::before { background: none; }
.repair-page .footer-hq { margin-top: 80px; }
.repair-page .footer-directions,
.repair-page .footer-copy,
.repair-page .footer-secondary .footer-col-title { color: rgba(255,255,255,0.56); }
.repair-page .footer-nav a { color: rgba(255,255,255,0.62); }
.repair-page .footer-contact-sub { color: rgba(255,255,255,0.58) !important; }
.repair-page .roman-contact-box { overscroll-behavior: contain; }
/* Talk to Andy modal — fade+scale entrance instead of the hard display:none
   cut. JS toggles .is-open a frame after removing .hidden (and removes it
   before re-adding .hidden on close), so this transition actually plays. */
#andyContactModal {
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22,1,0.36,1);
}
#andyContactModal .roman-contact-box {
  transform: scale(0.96);
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1);
}
#andyContactModal.is-open {
  opacity: 1;
}
#andyContactModal.is-open .roman-contact-box {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #andyContactModal,
  #andyContactModal .roman-contact-box {
    transition: none;
    opacity: 1;
    transform: none;
  }
}
/* Talk to Andy modal: make the phone number the visual anchor of each button,
   with the label demoted to an eyebrow. (Homepage "Talk to Roman" keeps its
   own style — scoped to .repair-page.) */
.repair-page .roman-contact-action { padding: 13px 12px; gap: 9px; }
.repair-page .roman-contact-action > i { flex-basis: 18px; width: 18px; font-size: 16px; }
.repair-page .roman-contact-action span { gap: 3px; }
.repair-page .roman-contact-action strong {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.repair-page .roman-contact-action small {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.repair-page .roman-contact-action--call:hover small { color: var(--amber-light); }
.repair-page .footer-brand,
.repair-page .footer-infra {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 24px;
  align-items: stretch;
}
/* Both detail columns fill the (stretched) card height; the last line of each
   is pinned to the baseline so the two columns end level and the divider
   spans real content top-to-bottom instead of dangling. */
.repair-page .repair-footer-brand-details,
.repair-page .footer-infra-details { align-self: stretch; }
.repair-page .footer-email { margin-top: auto; padding-top: 12px; }
.repair-page .footer-truck-services { margin-top: auto; padding-top: 12px; }
/* One logo slot for both columns: identical fixed-height band, both marks
   left-aligned and vertically centred inside it, capped to the same height so
   they read as one pair rather than "big one / small one". */
.repair-page .footer-logo-frame {
  width: 128px;
  height: 40px;
  min-height: 0;
  align-self: start;
  align-items: center;
  justify-content: flex-start;
}
.repair-page .footer-logo-img {
  width: auto;
  max-height: 40px;
  margin: 0;
}
.repair-page .repair-footer-truck-logo-frame {
  justify-content: flex-start;
}
.repair-page .footer-truck-logo {
  width: auto;
  height: 34px;
  max-height: 40px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}
.repair-page .repair-footer-brand-details,
.repair-page .footer-infra-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
.repair-page .footer-company-name,
.repair-page .footer-infra .footer-col-title {
  order: 0;
  margin-bottom: 6px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.repair-footer-service-name {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.repair-page .footer-truck-sub { margin-bottom: 14px; }
.repair-page .footer-truck-phone { min-height: 44px; margin-bottom: 0; }
.repair-page .footer a:focus-visible {
  outline: 3px solid rgba(220,154,60,0.78);
  outline-offset: 4px;
  border-radius: 4px;
}

.repair-footer-klg-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms ease;
}
.repair-footer-klg-phone i { color: var(--amber); font-size: 11px; }
.repair-footer-klg-phone:hover { color: var(--amber-light); }

.repair-footer-recruiting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.5;
}
.repair-footer-recruiting:hover { color: var(--amber-light); }
.repair-footer-recruiting i { font-size: 10px; }

/* "Follow" + social icons sit below the recruiting link in the same column. */
.repair-page .footer-social .repair-footer-follow-title { margin-top: 22px; }
.repair-page .footer-social .social-links { gap: 12px; margin-top: 4px; }
.repair-page .footer-social .social-links a { width: 40px; height: 40px; font-size: 17px; }

@media (min-width: 1181px) {
  /* Footer content aligns to the same left edge as the section copy above it
     (the .container's 40px inset pushed the card in past the text). */
  .repair-page .footer > .container { padding-inline: 0; }

  .repair-page .footer-hq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    padding: 52px 56px;
  }

  .repair-page .footer-brand {
    grid-template-columns: 184px minmax(0, 1fr);
    column-gap: 30px;
    padding-right: 48px;
  }

  .repair-page .footer-infra {
    grid-template-columns: 184px minmax(0, 1fr);
    column-gap: 30px;
    padding-left: 48px;
  }

  .repair-page .footer-logo-frame {
    width: 184px;
    height: 50px;
    min-height: 0;
  }

  .repair-page .footer-logo-img {
    width: auto;
    max-height: 50px;
  }

  .repair-page .footer-truck-logo {
    width: auto;
    height: 42px;
    max-height: 50px;
  }

  .repair-page .footer-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .repair-page .footer-contact {
    align-items: center;
    text-align: center;
  }

  .repair-page .footer-social {
    align-items: flex-end;
    text-align: right;
  }
}

@media (min-width: 1281px) {
  .repair-page .repair-nav-brand {
    transform: translateX(calc((1280px - 100vw) / 2 + 16px));
  }

  .repair-page .repair-nav-shop-logo {
    width: 184px;
  }

  .repair-page .nav.scrolled .repair-nav-shop-logo {
    width: 160px;
  }
}

/* Large desktop review pass. Lowered from 2200/1200 because Chrome on a Retina
   display reports a smaller CSS viewport than the physical 2560 x 1440 panel
   (observed ~1999 x 1151 for a nominal 2560 x 1440 window), so the stricter
   threshold never activated on real large-screen hardware. */
@media (min-width: 1800px) {
  .repair-page .nav-inner {
    width: calc(100% - 176px);
    max-width: none;
    padding-inline: 0;
  }

  .repair-page .repair-nav-brand {
    gap: 18px;
    transform: translateX(-72px);
  }

  .repair-page .nav-links {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 34px;
  }

  .repair-page .repair-nav-klg .logo-img {
    width: 130px;
    height: 101px;
  }

  .repair-page .repair-nav-shop-logo {
    width: 184px;
  }

  .repair-page .repair-nav-brand-divider {
    height: 54px;
  }

  .repair-page .nav.scrolled .repair-nav-klg .logo-img {
    width: 112px;
    height: 87px;
  }

  .repair-page .nav.scrolled .repair-nav-shop-logo {
    width: 160px;
  }
}

/* >=1800 wide, width-only (no min-height gate): on a wide desktop window the
   64px cap on hero/diagnose/services headings reads small against the huge
   photo backdrop. Bump it — every value below is also vh-capped, so on a
   short-but-wide window (e.g. a maximized ultrawide) it scales back down
   instead of overflowing under the nav or past the bottom of the frame. */
@media (min-width: 1800px) {
  /* Pull the hero/diagnose columns further off the frame edges. */
  .repair-story-copy--hero { right: clamp(64px, 4vw, 140px); }
  .repair-story-copy--truck { left: clamp(64px, 4vw, 140px); }
  .repair-story-services { padding-inline: clamp(64px, 4vw, 140px); }
  .repair-shop-story .repair-story-roadside .repair-roadside-inner { padding-inline: clamp(64px, 4vw, 140px); }

  .repair-story-copy--hero h1,
  .repair-story-copy--truck h2 {
    font-size: min(clamp(64px, 3vw, 75px), 7.6vh);
  }
  .repair-story-copy--hero > p,
  .repair-story-copy--truck > p {
    font-size: min(clamp(17px, 0.85vw, 19.5px), 2.4vh);
  }
  .repair-story-copy--hero .repair-hero-facts li {
    font-size: min(clamp(15px, 0.7vw, 17px), 2.1vh);
  }
  .repair-story-copy--truck .repair-story-proof-stats strong {
    font-size: min(clamp(30px, 2vw, 38px), 4.2vh);
  }
  .repair-story-copy--truck .repair-story-proof-details {
    font-size: min(clamp(16px, 0.8vw, 17.5px), 2.3vh);
  }
  .repair-story-services-heading h2 {
    font-size: min(clamp(56px, 2.9vw, 72px), 7vh);
  }
  .repair-story-services-summary {
    font-size: min(clamp(15px, 0.85vw, 17.5px), 2.3vh);
  }
  .repair-story-service-list {
    width: min(880px, 47vw);
  }
  .repair-story-service {
    min-height: min(66px, 7.8vh);
    padding-block: min(16px, 2vh);
    font-size: min(clamp(19px, 1.15vw, 25px), 3.3vh);
  }
}

/* NOTE: there used to be a `@media (min-width: 1800px) and (min-height: 1050px)`
   tier here with fixed-px hero type (86px h1, bottom:198px/right:88px/width:720px
   positioning) for big+tall screens. Removed — it reproduced exactly the overflow
   its own comment warned about (kicker under the nav) on a 3440x1057 ultrawide,
   because 1057 clears the 1050 gate by only 7px. The width-only tier above
   (vh-capped) now covers this range safely at every height. */

/* Chrome on a Retina display reports a smaller CSS viewport than its physical
   2560 x 1440 review window. The review flag keeps this pass isolated while
   reproducing the same large-screen composition. */
html.repair-review-2560 .repair-page .repair-nav-brand {
  gap: 18px;
  transform: translateX(-72px);
}

html.repair-review-2560 .repair-page .nav-inner {
  width: calc(100% - 176px);
  max-width: none;
  padding-inline: 0;
}

html.repair-review-2560 .repair-page .nav-links {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 34px;
}

html.repair-review-2560 .repair-page .repair-nav-klg .logo-img {
  width: 130px;
  height: 101px;
}

html.repair-review-2560 .repair-page .repair-nav-shop-logo {
  width: 184px;
}

html.repair-review-2560 .repair-page .repair-nav-brand-divider {
  height: 54px;
}

html.repair-review-2560 .repair-page .nav.scrolled .repair-nav-klg .logo-img {
  width: 112px;
  height: 87px;
}

html.repair-review-2560 .repair-page .nav.scrolled .repair-nav-shop-logo {
  width: 160px;
}

@media (min-height: 1050px) {
  html.repair-review-2560 .repair-story-copy--hero {
    right: 88px;
    bottom: 198px;
    width: 720px;
  }

  html.repair-review-2560 .repair-story-copy--hero .repair-story-kicker {
    font-size: 14px;
  }

  html.repair-review-2560 .repair-story-copy--hero h1 {
    font-size: 86px;
  }

  html.repair-review-2560 .repair-story-copy--hero > p {
    max-width: 700px;
    margin-bottom: 40px;
    font-size: 19.25px;
    line-height: 1.62;
  }

  html.repair-review-2560 .repair-story-copy--hero .repair-hero-facts {
    margin-top: 40px;
    gap: 20px 30px;
  }

  html.repair-review-2560 .repair-story-copy--hero .repair-hero-facts li {
    gap: 10px;
  }

  html.repair-review-2560 .repair-story-services-heading {
    max-width: 740px;
  }

  html.repair-review-2560 .repair-story-services-heading h2 {
    font-size: 74px;
  }

  html.repair-review-2560 .repair-story-services-summary {
    max-width: 660px;
    font-size: 16px;
  }

  html.repair-review-2560 .repair-story-service-list {
    width: 740px;
  }

  html.repair-review-2560 .repair-story-service {
    font-size: 20px;
  }
}

@media (min-width: 1025px) {
  /* One column at every width — copy, then the actions row directly beneath it.
     The old copy | CTA split left the right half mostly empty. */
  .repair-owner-inner {
    grid-template-columns: 1fr;
    justify-content: start;
    gap: 30px;
  }

  .repair-owner-copy h2,
  .repair-owner-copy > p { max-width: 820px; }

  .repair-owner-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    gap: 20px 28px;
    flex-wrap: wrap;
  }

  .repair-owner-actions .klg-cta {
    justify-content: space-between;
    min-width: 320px;
  }

  .repair-owner-proof {
    justify-content: flex-start;
    padding-left: 0;
  }
}

@media (max-width: 1180px) {
  .repair-nav-brand { gap: 11px; }
  .repair-nav-shop-logo { width: 122px; }
  .repair-page .nav-inner { gap: 20px; }
  .repair-page .nav-links { gap: 16px; }
  .repair-page .nav-links a { padding-inline: 10px; margin-inline: -10px; font-size: 12px; }
  .repair-hero-grid { gap: 54px; }
  .repair-service-grid { column-gap: 48px; }
  .repair-owner-inner { gap: 50px; }
}

@media (min-width: 1025px) and (max-width: 1220px) {
  .repair-page .nav-links li:last-child { display: none; }
}

@media (max-width: 1024px) {
  .repair-section-shell { width: min(100% - 48px, 860px); }
  .repair-hero { min-height: auto; padding: calc(var(--repair-preview-bar) + 136px) 24px 80px; }
  .repair-hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .repair-roadside { min-height: 700px; padding: 86px 0; }
  .repair-roadside-media img { object-position: 58% center; }
  .repair-roadside::before {
    background: linear-gradient(
      90deg,
      rgba(4, 8, 12, 0.95) 0%,
      rgba(4, 8, 12, 0.90) 44%,
      rgba(4, 8, 12, 0.60) 66%,
      rgba(4, 8, 12, 0.16) 100%
    );
  }
  .repair-roadside-inner { max-width: none; }
  .repair-roadside-copy { max-width: 520px; }
  .repair-roadside-copy > p { max-width: 480px; }
  .repair-hero-copy { max-width: 820px; margin: 0 auto; text-align: center; }
  .repair-breadcrumb,
  .repair-eyebrow,
  .repair-hero-actions,
  .repair-hero-facts { justify-content: center; }
  .repair-brand-mark { margin-inline: auto; }
  .repair-hero-answer { margin-inline: auto; }
  .repair-hero-visual { width: min(100%, 680px); max-width: none; margin: 0 auto; }
  .repair-hero-visual img { height: min(780px, 112vw); object-position: 55% 43%; }
  .repair-inside-heading { margin-bottom: 40px; }
  .repair-film-track { height: min(76vw, 620px); padding-right: 220px; }
  .repair-film-frame { width: min(48vw, 380px); }
  .repair-film-frame--hero { width: min(78vw, 620px); }
  .repair-film-image { height: 100%; }
  .repair-location-grid,
  .repair-owner-inner { grid-template-columns: 1fr; gap: 48px; }
  .repair-page .repair-location-copy h2 { max-width: 760px; font-size: clamp(44px, 6vw, 58px); }
  .repair-reviews-lede { grid-template-columns: 1fr; gap: 22px; }
  .repair-reviews-feature .repair-reviews-mark { font-size: 84px; }
  .repair-reviews-proof { display: grid; grid-template-columns: 1fr 1.35fr; align-items: start; }
  .repair-reviews-proof-source,
  .repair-reviews-proof-link { grid-column: 1 / -1; }
  .repair-reviews-score { align-self: stretch; }
  .repair-reviews-stats { align-self: stretch; }
  .repair-reviews-quote { flex-basis: calc((100% - 16px) / 2); }
  .repair-owner-bg {
    background-image: url('owner-operator-road-tablet-1536x1000.webp');
    background-position: center 58%;
  }
  .repair-owner-actions {
    justify-content: flex-start;
    width: min(100%, 390px);
    max-width: none;
    padding-top: 24px;
    border-top: 1px solid rgba(243,237,224,0.16);
  }
  .repair-contact-card { max-width: 620px; }
  .repair-faq-layout { grid-template-columns: 1fr; gap: 42px; }
  .repair-faq-cta { max-width: 620px; }
  .repair-owner::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.66), rgba(0,0,0,0.38)),
      linear-gradient(to bottom,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.14) 48%,
        rgba(0,0,0,0.42) 72%,
        rgba(0,0,0,0.84) 90%,
        #000 100%);
  }
}

@media (max-width: 680px) {
  :root { --repair-radius: 14px; }
  .repair-nav-brand { gap: 9px; }
  .repair-nav-brand-divider { height: 34px; }
  .repair-nav-shop-logo { width: 104px; }
  .repair-page .nav.scrolled .repair-nav-brand-divider { height: 30px; }
  .repair-page .nav.scrolled .repair-nav-shop-logo { width: 92px; }
  .repair-section-shell { width: calc(100% - 36px); }
  .repair-hero { padding: calc(var(--repair-preview-bar) + 108px) 18px 64px; }
  .repair-hero h1 { font-size: clamp(28px, 7.4vw, 41px); }
  .repair-roadside { display: block; min-height: 0; padding: 0; }
  .repair-roadside-media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(232px, 66vw, 330px);
  }
  .repair-roadside-media img { object-position: 64% center; }
  .repair-roadside::before {
    inset: 0 0 auto;
    z-index: 1;
    height: clamp(232px, 66vw, 330px);
    background: linear-gradient(to bottom, rgba(4, 8, 12, 0.02) 40%, var(--dark) 100%);
  }
  .repair-roadside::after { display: none; }
  .repair-roadside-inner {
    position: relative;
    z-index: 2;
    max-width: none;
    margin-top: -24px;
    padding-bottom: var(--repair-section-mobile);
  }
  .repair-roadside-copy { max-width: none; text-align: left; }
  .repair-roadside-copy > p { max-width: none; }
  .repair-roadside-scope { font-size: 10.5px; letter-spacing: 0.08em; margin-bottom: 10px; }
  .repair-kicker--live { justify-content: flex-start; }
  .repair-roadside-facts { width: auto; margin-inline: 0; text-align: left; }
  .repair-breadcrumb { margin-bottom: 14px; }
  .repair-brand-mark { width: min(280px, 78%); margin-bottom: 20px; }
  .repair-hero-answer { font-size: 14.5px; line-height: 1.7; }
  .repair-hero-actions { flex-direction: column; align-items: stretch; }
  .repair-hero-actions .klg-cta,
  .repair-ghost-btn { width: 100%; justify-content: center; }
  .repair-hero-facts { display: grid; justify-content: stretch; gap: 10px; text-align: left; }
  .repair-hero-visual img { height: 118vw; max-height: 580px; }
  .repair-hero-visual figcaption { left: 18px; right: 18px; bottom: 17px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .repair-services,
  .repair-inside,
  .repair-reviews,
  .repair-location,
  .repair-owner,
  .repair-faq { padding: var(--repair-section-mobile) 0; }
  .repair-section-heading { margin-bottom: 32px; text-align: center; }
  .repair-section-heading p { font-size: 15px; }
  .repair-service-grid { grid-template-columns: 1fr; }
  .repair-reviews-head p { font-size: 15px; }
  .repair-reviews-lede { gap: 16px; padding-top: 0; }
  .repair-reviews-feature { min-height: 410px; padding: 30px 24px; border-radius: 18px; }
  .repair-reviews-feature .repair-reviews-mark { margin-top: 34px; font-size: 68px; }
  .repair-reviews-feature blockquote { font-size: clamp(23px, 6.6vw, 29px); letter-spacing: -0.85px; text-wrap: pretty; }
  .repair-reviews-proof { display: flex; gap: 20px; padding: 27px 22px; border-radius: 18px; }
  .repair-reviews-score { grid-template-columns: 1fr 1fr; }
  .repair-reviews-score > div { padding-right: 14px; }
  .repair-reviews-score > div + div { padding-left: 16px; }
  .repair-reviews-score strong { font-size: 38px; }
  .repair-reviews-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repair-reviews-proof-link { width: 100%; padding-block: 13px; }
  .repair-reviews-carousel { margin-top: 36px; }
  .repair-reviews-carousel-head { gap: 12px; }
  .repair-reviews-carousel-count { min-width: 52px; margin-right: 2px; }
  .repair-reviews-carousel-arrow { width: 44px; height: 44px; flex-basis: 44px; }
  .repair-reviews-wall { gap: 12px; padding-right: 9%; }
  .repair-reviews-quote { flex-basis: 91%; min-height: 360px; padding: 26px 22px 24px; }
  .repair-service-card { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 24px 0 26px; }
  .repair-service-card-head { margin: 0; padding-top: 4px; }
  .repair-service-card h3 { font-size: 19px; }
  .repair-service-card--wide .repair-service-list { grid-template-columns: 1fr; }
  .repair-services-callout { align-items: flex-start; flex-direction: column; gap: 18px; padding: 24px 22px; }
  .repair-services-callout > div { flex: none; width: 100%; }
  .repair-services-callout .repair-services-callout-cta { width: 100%; margin-left: 0; justify-content: space-between; }
  .repair-inside-heading { margin-bottom: 32px; }
  .repair-film-track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: auto;
    padding-right: 44px;
  }
  .repair-film-frame,
  .repair-film-frame--hero,
  .repair-film-frame--portrait,
  .repair-film-frame--landscape {
    grid-row: auto;
    width: 88vw;
    height: min(116vw, 460px);
    flex: 0 0 88vw;
  }
  .repair-film-frame--landscape.repair-photo--exterior-evening {
    height: min(66vw, 448px);
  }
  .repair-film-image { height: 100%; }
  .repair-film-frame figcaption,
  .repair-film-frame--hero figcaption { min-height: 104px; padding: 48px 18px 18px; font-size: 12px; }
  .repair-film-controls { margin-top: 22px; }
  .repair-film-arrow { width: 46px; height: 46px; flex-basis: 46px; border-radius: 50%; }
  .repair-location-grid { gap: 36px; }
  .repair-location-copy { text-align: center; }
  .repair-page .repair-location-copy h2 { font-size: clamp(33px, 9vw, 37px); line-height: 1.08; }
  .repair-location-title-lead { white-space: nowrap; }
  .repair-location-copy > p { margin-bottom: 26px; }
  .repair-owner-bg {
    background-image: url('owner-operator-road-mobile-1080x1600.webp');
    background-position: center 56%;
  }
  .repair-owner::after {
    background:
      linear-gradient(180deg,
        rgba(2,5,8,0.26) 0%,
        rgba(0,0,0,0.34) 45%,
        rgba(0,0,0,0.64) 76%,
        #000 100%),
      linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.16));
  }
  .repair-location-actions,
  .repair-owner-actions { flex-direction: column; align-items: stretch; }
  .repair-location-actions .klg-cta,
  .repair-owner-actions .klg-cta { width: 100%; justify-content: center; }
  .repair-text-link,
  .repair-owner-proof { justify-content: center; }
  .repair-contact-card { max-width: none; padding: 0; }
  .repair-contact-row { grid-template-columns: 1fr; gap: 8px; }
  .repair-owner-inner { gap: 38px; }
  .repair-owner-copy { text-align: center; }
  .repair-owner-actions {
    justify-content: center;
    width: 100%;
    padding-top: 26px;
  }
  .repair-faq-layout { gap: 32px; }
  .repair-faq-item summary { min-height: 72px; gap: 16px; padding-block: 17px; font-size: 16px; line-height: 1.42; }
  .repair-faq-item summary span { max-width: calc(100% - 50px); }
  .repair-faq-item summary i { width: 32px; height: 32px; flex-basis: 32px; }
  .repair-faq-answer { padding: 0 44px 24px 0; }
  .repair-faq-item p { font-size: 14px; }
  .repair-faq-cta { padding: 28px 24px; }
  .repair-page .footer-hq { margin-top: 52px; }
}

@media (max-width: 420px) {
  .repair-section-shell { width: calc(100% - 28px); }
  .repair-services-callout { padding-inline: 14px; }
  .repair-services-callout .repair-services-callout-cta {
    --pad-x: 12px;
    --fs: 13px;
    justify-content: center;
  }
  .repair-services-callout .repair-services-callout-cta .klg-cta-arrow { display: none; }
  .repair-hero { padding-inline: 14px; }
  .repair-hero-visual { border-radius: 20px; }
  .repair-location-actions .repair-text-link { min-height: 48px; border-radius: 12px; }
  .repair-page .footer-brand,
  .repair-page .footer-infra { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; }
  .repair-page .footer-logo-frame { width: 96px; height: 34px; min-height: 0; }
  .repair-page .footer-logo-img { width: auto; max-height: 34px; }
  .repair-page .footer-truck-logo { width: auto; height: 28px; max-height: 34px; }
  .repair-contact-row a { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .repair-film-frame img,
  .repair-ghost-btn,
  .repair-reviews-proof-link,
  .repair-reviews-carousel-arrow,
  .repair-faq-item summary,
  .repair-faq-item summary i { transition: none; }
  .repair-film-viewport,
  .repair-reviews-carousel-viewport { scroll-behavior: auto; }
  .repair-film-frame:hover img,
  .repair-ghost-btn:hover,
  .repair-film-arrow:hover,
  .repair-film-arrow:active,
  .repair-reviews-carousel-arrow:hover,
  .repair-reviews-carousel-arrow:active { transform: none; }
}

@media (prefers-contrast: more) {
  .repair-reviews-proof,
  .repair-reviews-quote { border-color: rgba(24,21,15,0.4); }
  .repair-reviews-carousel-arrow { border-color: rgba(22,20,9,0.5); }
  .repair-reviews-feature-label,
  .repair-reviews-carousel-label,
  .repair-reviews-score > div > span:not(.repair-reviews-score-stars),
  .repair-reviews-stats li span { color: var(--repair-ink); }

  .repair-film-frame { border-color: rgba(255,255,255,0.4); }
  .repair-film-frame figcaption {
    background: rgba(3,7,10,0.96);
    color: #fff;
  }
  .repair-film-image::after { opacity: 0.4; }
  .repair-film-arrow { border-color: rgba(255,255,255,0.5); }
  .repair-film-count { color: rgba(255,255,255,0.7); }
}

/* Road Service is the fourth frame of the pinned shop story. The more
   specific selectors keep the approved standalone composition intact while
   preventing the general responsive section rules from breaking the frame. */
.repair-shop-story .repair-story-roadside {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

/* Top padding always clears the fixed nav; the copy then sits in the band
   above the story progress bar rather than bottom-heavy against it. */
.repair-shop-story .repair-story-roadside .repair-roadside-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding-block: clamp(150px, 19vh, 210px) 48px;
}

.repair-shop-story .repair-story-roadside .repair-roadside-copy {
  will-change: transform, opacity;
}

@media (max-width: 680px) {
  .repair-shop-story .repair-story-roadside {
    display: flex;
    min-height: 0;
    padding: 0;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-media img {
    object-position: 64% center;
  }

  .repair-shop-story .repair-story-roadside::before {
    inset: 0;
    z-index: -1;
    height: auto;
    background: linear-gradient(
      to bottom,
      rgba(4, 8, 12, 0.82) 0%,
      rgba(4, 8, 12, 0.80) 46%,
      rgba(4, 8, 12, 0.62) 68%,
      rgba(4, 8, 12, 0.42) 86%,
      rgba(4, 8, 12, 0.50) 100%
    );
  }

  .repair-shop-story .repair-story-roadside::after {
    display: block;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-inner {
    margin: 0 auto;
    padding-block: 72px 78px;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-copy > p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-facts {
    gap: 9px;
    margin-bottom: 24px;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-facts li {
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
  }

  .repair-shop-story .repair-story-roadside .klg-cta {
    width: 100%;
    justify-content: center;
  }

  /* Secondary footer centred on mobile to match the already-centred footer-bottom. */
  .repair-page .footer-secondary { text-align: center; }
  .repair-page .footer-nav,
  .repair-page .footer-contact,
  .repair-page .footer-social { align-items: center; }
  .repair-page .footer-contact a,
  .repair-page .repair-footer-recruiting { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .repair-shop-story .repair-story-roadside {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: clamp(650px, 54vw, 820px);
    padding: clamp(86px, 8vw, 126px) 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .repair-shop-story .repair-story-roadside {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(232px, 66vw, 330px);
  }

  .repair-shop-story .repair-story-roadside::before {
    inset: 0 0 auto;
    z-index: 1;
    height: clamp(232px, 66vw, 330px);
    background: linear-gradient(to bottom, rgba(4, 8, 12, 0.02) 40%, var(--dark) 100%);
  }

  .repair-shop-story .repair-story-roadside::after {
    display: none;
  }

  .repair-shop-story .repair-story-roadside .repair-roadside-inner {
    margin-top: -24px;
    padding-block: 0 var(--repair-section-mobile);
  }
}

/* ── Large-screen scale-up ────────────────────────────────────────────────
   Below ~1440 the type is tuned. Past that, fixed-px body/labels froze and
   the layout became a ~1280 island. These tiers let headings, body copy,
   micro-labels and the service panels grow on 1600–2560 displays.
   Placed last so it wins over the earlier min-width tiers at these widths. */
@media (min-width: 1500px) {
  /* NOTE: the pinned shop story (hero / "Diagnose" / "One Shop" / service list)
     is a fixed absolute-positioned composition — do NOT scale its headings or
     summary here; it breaks the frame. It keeps its base + @1600 + mobile tuning. */
  /* Section H2 holds its ~64px cap here (was jumping to 72) so it stays just
     under the hero rather than matching it. */

  /* Lead / body copy (in-flow sections only) */
  .repair-section-heading p,
  .repair-location-copy > p,
  .repair-owner-copy > p,
  .repair-reviews-head p,
  .repair-roadside-copy > p { font-size: 17px; line-height: 1.62; }
  .repair-faq-item p { font-size: 16px; }
  .repair-faq-cta > p { font-size: 14.5px; }

  /* Road Service: the left dark band is wide on big screens — give the
     headline room for 2 lines instead of 4, keep body at a readable measure. */
  .repair-roadside-copy { max-width: min(1040px, 52vw); }
  .repair-roadside-copy > p,
  .repair-roadside-facts { max-width: 620px; }
  .repair-shop-story .repair-story-roadside .repair-roadside-inner { padding-block: clamp(180px, 21vh, 260px) 64px; }

  /* Kickers + uppercase micro-labels */
  .repair-kicker { font-size: 13px; }
  .repair-roadside-scope,
  .repair-reviews-proof-source,
  .repair-reviews-carousel-label,
  .repair-contact-eyebrow,
  .repair-faq-cta-label,
  .repair-page .footer-company-name,
  .repair-page .footer-infra .footer-col-title { font-size: 12px; }
  .repair-reviews-feature-label,
  .repair-reviews-stats li span,
  .repair-reviews-by span,
  .repair-contact-row span,
  .repair-faq-phone span,
  .repair-reviews-carousel-count,
  .repair-reviews-note { font-size: 11px; }
  .repair-reviews-score > div > span:not(.repair-reviews-score-stars) { font-size: 10.5px; }
  .repair-roadside-facts li { font-size: 15.5px; }

  /* Reviews numerics + quote cards */
  .repair-reviews-feature blockquote { font-size: clamp(36px, 2.4vw, 44px); }
  .repair-reviews-score strong { font-size: clamp(52px, 3.6vw, 62px); }
  .repair-reviews-stats strong { font-size: clamp(29px, 2vw, 34px); }
  .repair-reviews-quote blockquote { font-size: 17px; }
  .repair-reviews-by strong { font-size: 14px; }

  /* Contact card values */
  .repair-contact-row strong { font-size: 16px; }
  .repair-contact-row a { font-size: 22px; }
  .repair-faq-phone strong { font-size: 21px; }

  /* Footer logos scale up a step with the screen */
  .repair-page .footer-brand,
  .repair-page .footer-infra { grid-template-columns: 210px minmax(0, 1fr); }
  .repair-page .footer-logo-frame { width: 210px; height: 56px; }
  .repair-page .footer-logo-img { max-height: 56px; }
  .repair-page .footer-truck-logo { height: 47px; max-height: 56px; }
}

@media (min-width: 2000px) {
  .repair-owner-inner {
    grid-template-columns: minmax(0, 900px) 360px;
  }
  .repair-owner-copy h2,
  .repair-owner-copy > p { max-width: 900px; }
  .repair-section-heading p,
  .repair-location-copy > p,
  .repair-owner-copy > p,
  .repair-reviews-head p,
  .repair-roadside-copy > p { font-size: 18px; }
  .repair-reviews-quote blockquote { font-size: 18px; }
  .repair-reviews-feature blockquote { font-size: 46px; }

  .repair-page .footer-brand,
  .repair-page .footer-infra { grid-template-columns: 236px minmax(0, 1fr); }
  .repair-page .footer-logo-frame { width: 236px; height: 62px; }
  .repair-page .footer-logo-img { max-height: 62px; }
  .repair-page .footer-truck-logo { height: 52px; max-height: 62px; }
}

/* ── Pinned shop story: coherent large-screen composition ────────────────
   A physical 2560px Retina display can report ~1999 CSS px, so this tier
   starts at 1800 rather than 2000. Smaller approved layouts are untouched.
   Keep all four frames on the same inner rhythm: generous side fields,
   comparable type scale, and copy grouped as one composition instead of
   drifting into separate top/middle/bottom islands. */
@media (min-width: 1800px) {
  /* 01 — give the right-hand story enough presence against the full-bleed
     portrait, and move it inward instead of pinning a 760px island to edge. */
  .repair-story-copy--hero {
    right: clamp(112px, 6.5vw, 176px);
    bottom: clamp(150px, 15vh, 216px);
    width: min(920px, 46vw);
  }
  .repair-story-copy--hero h1 {
    font-size: min(clamp(72px, 3.35vw, 86px), 8.2vh);
  }
  .repair-story-copy--hero > p {
    max-width: 700px;
    font-size: min(clamp(18px, 0.82vw, 20px), 2.25vh);
  }

  /* 02 — align its lower edge with frame 01 and widen the proof composition,
     removing the visual drop that happened during the cross-fade. */
  .repair-story-copy--truck {
    left: clamp(112px, 6.5vw, 176px);
    bottom: clamp(132px, 14vh, 196px);
    width: min(920px, 46vw);
    max-width: 920px;
  }
  .repair-story-copy--truck h2 {
    font-size: min(clamp(72px, 3.35vw, 86px), 8.2vh);
  }
  .repair-story-copy--truck > p,
  .repair-story-copy--truck .repair-story-proof-stats,
  .repair-story-copy--truck .repair-story-proof-details {
    max-width: 760px;
  }
  .repair-story-copy--truck > p {
    font-size: min(clamp(18px, 0.82vw, 20px), 2.25vh);
  }

  /* 03 — stop distributing heading, services and detail panel across the
     entire viewport height. They now read as one deliberate left-side unit. */
  .repair-story-services {
    justify-content: flex-start;
    padding: clamp(160px, 14vh, 202px) clamp(112px, 6.5vw, 176px) clamp(82px, 8vh, 116px);
  }
  .repair-story-services-heading {
    max-width: 900px;
    margin-bottom: clamp(34px, 3.2vh, 48px);
  }
  .repair-story-services-heading h2 {
    font-size: min(clamp(70px, 3.2vw, 82px), 7.8vh);
  }
  .repair-story-services-summary {
    max-width: 720px;
    font-size: min(clamp(18px, 0.82vw, 20px), 2.25vh);
  }
  .repair-story-service-list,
  .repair-story-service-details {
    width: min(940px, 47vw);
  }
  .repair-story-service-details {
    margin-top: clamp(24px, 2.4vh, 34px);
  }

  /* 04 — use the same large-screen field and heading authority as 01–03,
     while keeping body copy at a readable line length. */
  .repair-shop-story .repair-story-roadside .repair-roadside-inner {
    padding: clamp(176px, 16vh, 230px) clamp(112px, 6.5vw, 176px) 72px;
  }
  .repair-shop-story .repair-story-roadside .repair-roadside-copy {
    max-width: min(1180px, 58vw);
  }
  .repair-shop-story .repair-story-roadside .repair-roadside-copy h2 {
    font-size: min(clamp(72px, 3.35vw, 86px), 8.2vh);
  }
  .repair-shop-story .repair-story-roadside .repair-roadside-copy > p,
  .repair-shop-story .repair-story-roadside .repair-roadside-facts {
    max-width: 720px;
  }
}