/* ==========================================================================
   DB-Abschleppdienst — sections
   Hero (code-drawn tow truck) · marquee · statement · services bento ·
   steps · prices + builder · area map · FAQ · contact
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 88px)); }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px); padding: 9px 16px 9px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px);
  color: var(--ink-2); font-size: .9rem; font-variant-numeric: tabular-nums;
}
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #1fbf63; }
.live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1fbf63; animation: live 1.8s var(--ease) infinite; }
@keyframes live { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.hero-title { font-size: clamp(2.4rem, 7.6vw, 7.25rem); font-weight: 800; letter-spacing: -.05em; line-height: .98; }
.hero-title .line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.06em; }
.hero-title .line > span { position: relative; display: inline-block; isolation: isolate; }
.hero-title .ch { display: inline-block; transform: translateY(115%) rotate(8deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease) calc(var(--c) * 26ms + .15s); }
html.is-ready .hero-title .ch { transform: none; }
.line-accent { color: var(--ink); }
.line-accent > span::after { /* marker swash */
  content: ''; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .1em; height: .3em;
  border-radius: .08em; background: var(--yellow);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease) 1.05s;
}
html.is-ready .line-accent > span::after { transform: none; }

.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; margin-top: clamp(28px, 3.6vw, 48px); }
.lead { max-width: 46ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.footnote { margin-top: 14px; color: var(--muted); font-size: .8rem; }

/* scene: truck + road + speed lines */
.scene { position: relative; height: clamp(200px, 33vw, 440px); margin-top: clamp(24px, 4vw, 56px); overflow: hidden; }
.truck {
  position: absolute; left: 50%; bottom: 22px;
  width: min(880px, 94vw); height: auto; translate: -44% 0;
  overflow: visible;
  transform: translateX(-130vw);
}
html.is-ready .truck { animation: drive-in 2.6s cubic-bezier(.22, 1, .36, 1) .25s forwards; }
@keyframes drive-in {
  0% { transform: translateX(-130vw); }
  82% { transform: translateX(1.2%); }
  100% { transform: none; }
}
.truck .draw > * { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.1 2; stroke-dashoffset: 1.2; fill-opacity: 0; }
html.is-ready .truck .draw > * { animation: draw 2s var(--ease) forwards, fill-in .9s var(--ease) 2.5s forwards; }
html.is-ready .truck .draw:nth-of-type(2) > * { animation-delay: .25s, 2.65s; }
html.is-ready .truck .draw:nth-of-type(3) > * { animation-delay: .5s, 2.8s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill-in { to { fill-opacity: 1; } }
.truck .fill-cab { fill: var(--yellow); }
.truck .fill-bed { fill: #23262e; }
.truck .fill-car { fill: #ffffff; }
.truck .fill-glass { fill: #cfdcf7; }
.truck .fill-tyre { fill: var(--ink); }
.truck .bob { animation: bob .9s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2px); } }
.truck .tyre { fill: var(--ink); }
.truck .spin { fill: #f2f1ec; stroke: #f2f1ec; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: spin .55s linear infinite; }
.truck .spin circle { fill: #8c8f98; stroke: none; }
.truck .beacon-bar { fill: var(--yellow-2); stroke: var(--ink); stroke-width: 2.5; }
.truck .beacon-glow { opacity: 0; }
html.is-ready .truck .beacon-glow { animation: flash .9s steps(1) 2.9s infinite; }
html.is-ready .truck .beacon-glow.late { animation-delay: 3.35s; }
@keyframes flash { 0% { opacity: 1; } 50% { opacity: 0; } }
.truck .beam { opacity: 0; }
html.is-ready .truck .beam { animation: beam 3s ease-in-out 3s infinite alternate; }
@keyframes beam { 0% { opacity: .35; } 100% { opacity: .85; } }

.road { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; overflow: hidden; border-top: 2px solid var(--ink); }
.road span {
  position: absolute; left: 0; top: 10px; height: 3px; width: calc(100% + 96px);
  background: repeating-linear-gradient(90deg, var(--faint) 0 48px, transparent 48px 96px);
  animation: road .42s linear infinite;
}
@keyframes road { to { transform: translateX(-96px); } }
.speedlines { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.speedlines i {
  position: absolute; right: -20%; height: 2px; width: clamp(80px, 14vw, 220px); border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(11, 13, 18, .28));
  animation: streak 1.4s linear infinite;
}
.speedlines i:nth-child(1) { top: 26%; animation-delay: -.2s; }
.speedlines i:nth-child(2) { top: 44%; animation-delay: -.9s; animation-duration: 1.1s; }
.speedlines i:nth-child(3) { top: 58%; animation-delay: -.5s; }
.speedlines i:nth-child(4) { top: 72%; animation-delay: -1.2s; animation-duration: 1.7s; }
.speedlines i:nth-child(5) { top: 36%; animation-delay: -.7s; animation-duration: 1.9s; }
@keyframes streak { from { transform: translateX(0); } to { transform: translateX(-140vw); } }

/* ---------- Marquee ---------- */
.marquee { margin: clamp(56px, 7vw, 96px) -2vw 0; padding: 22px 0; background: var(--yellow); transform: rotate(-1.6deg); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(255, 176, 0, .9); }
.marquee-track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track span { color: var(--ink); font: 800 clamp(1.8rem, 4.4vw, 3.8rem)/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.marquee-track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.marquee-track b { color: var(--ink); font-size: clamp(.8rem, 1.4vw, 1.2rem); }
@keyframes marquee { to { transform: translateX(calc(-50% - 18px)); } }

/* ---------- Statement + numbers ---------- */
.scrub { max-width: 26ch; color: var(--ink); font: 600 clamp(1.7rem, 3.7vw, 3.4rem)/1.18 var(--display); letter-spacing: -.03em; }
.scrub .sw { color: var(--faint); transition: color .5s var(--ease); }
.scrub .sw.on { color: var(--ink); }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line-2); }
.numbers > div { padding: 28px 24px 0 0; }
.numbers > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.numbers dt { color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.numbers dd { margin-top: 10px; color: var(--ink); font: 800 clamp(2.6rem, 6vw, 5.2rem)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.numbers small { margin-left: 4px; color: var(--muted); font-size: .38em; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Services bento ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; gap: 10px;
  min-height: 250px; padding: 28px; border-radius: var(--radius);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden; isolation: isolate;
  transition: translate .7s var(--ease), box-shadow .7s var(--ease);
}
.card::before { /* cursor spotlight */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 194, 14, .22), transparent 60%);
  transition: opacity .4s;
}
.card:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.card:hover::before { opacity: 1; }
.card h3 { margin-top: auto; }
.card p { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.card .art { width: 52px; height: 52px; margin-bottom: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .7s var(--ease); }
.card:hover .art { transform: rotate(-6deg) scale(1.08); }
.card .art > * { stroke-dasharray: 1.1 2; stroke-dashoffset: 1.2; transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i, 0) * 90ms + .35s); }
.is-in .card .art > * { stroke-dashoffset: 0; }
.card-feature { grid-column: span 2; grid-row: span 2; padding: clamp(28px, 3.4vw, 44px); background: var(--ink); color: rgba(255, 255, 255, .7); box-shadow: var(--shadow-2); }
.card-feature h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.035em; }
.card-feature p { max-width: 36ch; color: rgba(255, 255, 255, .7); font-size: 1.05rem; }
.card-feature .art { width: clamp(84px, 9vw, 128px); height: auto; aspect-ratio: 1; stroke: var(--yellow); stroke-width: 1.6; }
.card-feature::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 194, 14, .16), transparent 60%); }
.card-feature::after { /* moving scan line */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  animation: scan 3.6s var(--ease-io) infinite;
}
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tag { position: absolute; top: clamp(28px, 3.4vw, 44px); right: clamp(28px, 3.4vw, 44px); padding: 7px 12px; border-radius: 999px; background: rgba(255, 194, 14, .14); color: var(--yellow); font: 600 .8rem/1 var(--display); letter-spacing: .02em; }
.cards > .card:nth-child(6), .cards > .card:nth-child(7) { grid-column: span 2; min-height: 200px; }

/* ---------- Steps ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 6px; }
.steps::before, .steps::after { content: ''; position: absolute; left: 28px; right: 12%; top: 33px; height: 2px; border-radius: 2px; }
.steps::before { background: var(--line-2); }
.steps::after { background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.2s var(--ease-io) .3s; }
.steps.is-in::after { transform: none; }
.steps li { position: relative; z-index: 1; padding-right: 12px; }
.step-num {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px;
  border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink);
  color: var(--ink); font: 700 1rem/1 var(--display); font-variant-numeric: tabular-nums;
  transition: background-color .5s var(--ease) calc(var(--i) * .5s + .6s), box-shadow .5s var(--ease) calc(var(--i) * .5s + .6s), transform .6s var(--ease) calc(var(--i) * .5s + .6s);
}
.steps.is-in .step-num { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 8px rgba(255, 194, 14, .18); transform: scale(1.06); }
.steps h3 { margin-bottom: 8px; font-size: 1.4rem; }
.steps p { color: var(--muted); }

/* ---------- Prices + builder ---------- */
.price-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table tr { border-bottom: 1px dashed var(--line-2); transition: background-color .3s; }
.price-table tr:hover { background: rgba(255, 194, 14, .1); }
.price-table th { padding: 20px 8px 20px 0; color: var(--ink-2); font-weight: 500; text-align: left; }
.price-table td { padding: 20px 0 20px 8px; color: var(--ink); font: 700 clamp(1.3rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -.03em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 28px; color: var(--ink-2); font-size: .95rem; }
.checks li { display: flex; align-items: center; gap: 10px; }
.checks .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--yellow); color: var(--ink); stroke-width: 3; }

.builder { display: grid; gap: 22px; }
.builder h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -.03em; }
.builder legend, .builder label { display: block; margin-bottom: 10px; color: rgba(255, 255, 255, .55); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  padding: 10px 16px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 500 .95rem/1 var(--body);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .4s var(--ease);
}
.chips button:hover { background: rgba(255, 255, 255, .12); }
.chips button:active { transform: scale(.95); }
.chips button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 24px -10px rgba(255, 194, 14, .9); }
.field input {
  width: 100%; padding: 15px 16px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: box-shadow .3s, background-color .3s;
}
.field input::placeholder { color: rgba(255, 255, 255, .38); }
.field input:focus { outline: none; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--yellow); }
.field-row { display: flex; gap: 8px; }
.geo { display: grid; place-items: center; flex: none; width: 52px; border: 0; border-radius: 14px; background: rgba(255, 194, 14, .14); color: var(--yellow); transition: background-color .3s; }
.geo:hover { background: rgba(255, 194, 14, .24); }
.geo.is-loading .ic { animation: spin 1s linear infinite; }
.geo-status { min-height: 0; margin-top: 8px; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.geo-status:empty { display: none; }
.geo-status.ok { color: #6ee7a3; }
.geo-status.err { color: #ffb4a8; }
.builder-out { display: grid; gap: 14px; margin-top: 6px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.estimate { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.estimate span { color: rgba(255, 255, 255, .55); font-size: .9rem; }
.estimate strong { display: inline-block; color: var(--yellow); font: 800 clamp(2rem, 3.6vw, 2.8rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.estimate strong.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* ---------- Area / map ---------- */
.area { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: stretch; }
.map-panel { padding: 0; overflow: hidden; background: var(--surface-2); }
.map svg { width: 100%; height: auto; }
#map .route { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i) * .18s + .4s); }
.is-in #map .route { stroke-dashoffset: 0; }
#map .city { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--ease) calc(var(--i, 0) * .18s + .9s), transform .8s var(--ease) calc(var(--i, 0) * .18s + .9s); }
.is-in #map .city { opacity: 1; transform: none; }
#map .city .marker { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease), fill .3s; }
#map .city.is-hot .marker { transform: scale(1.6); fill: var(--yellow); }
#map .pulse { transform-box: fill-box; transform-origin: center; animation: map-pulse 2.2s var(--ease) infinite; }
@keyframes map-pulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
#map .ring { stroke-dasharray: 3 7; transform-origin: 286px 238px; animation: spin 90s linear infinite; }
.area .city-list li {
  display: flex; align-items: center; gap: 14px; padding: 18px 4px;
  border-bottom: 1px solid var(--line); color: var(--ink);
  font: 600 clamp(1.2rem, 1.8vw, 1.5rem)/1.1 var(--display); letter-spacing: -.02em;
  transition: translate .5s var(--ease), color .3s, opacity .9s var(--ease) calc(var(--i, 0) * 80ms + .1s), transform 1.1s var(--ease) calc(var(--i, 0) * 80ms + .1s);
}
.city-list li small { margin-left: auto; color: var(--muted); font: 500 .8rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.city-list li:hover, .city-list li.is-hot { translate: 12px 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transition: transform .4s var(--ease), background-color .3s; }
.city-list li.is-hot .dot { transform: scale(1.5); background: var(--yellow); }
.dot-hq { background: var(--yellow); box-shadow: 0 0 0 0 rgba(255, 194, 14, .7); animation: ping 1.8s var(--ease) infinite; }
.note { margin-top: 24px; color: var(--muted); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 920px; border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 0; border: 0; background: none; color: var(--ink); text-align: left; font: 600 clamp(1.1rem, 2vw, 1.45rem)/1.3 var(--display); letter-spacing: -.02em; }
.qa button:hover span { transform: translateX(6px); }
.qa button span { transition: transform .5s var(--ease); }
.qa i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .4s, box-shadow .4s, transform .6s var(--ease); }
.qa i::before, .qa i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--ink); transition: transform .5s var(--ease); }
.qa i::after { transform: rotate(90deg); }
.qa.is-open i { background: var(--yellow); box-shadow: none; transform: rotate(180deg); }
.qa.is-open i::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; }
.qa-a p { max-width: 62ch; padding-bottom: 26px; color: var(--ink-2); opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.qa.is-open .qa-a p { opacity: 1; transform: none; transition-delay: .12s; }

/* ---------- Contact ---------- */
.contact { position: relative; margin: var(--sec) clamp(8px, 1.4vw, 20px) 0; padding: clamp(96px, 13vw, 176px) 0; border-radius: clamp(28px, 4vw, 48px); background: var(--yellow); overflow: hidden; isolation: isolate; text-align: center; }
.contact-inner { position: relative; display: grid; justify-items: center; }
.contact h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.kicker-light { color: var(--ink); }
.kicker-light::before { background: var(--ink); }
.phone {
  position: relative; display: inline-block; margin: clamp(18px, 3vw, 32px) 0 clamp(28px, 4vw, 44px);
  color: var(--ink); font: 800 clamp(2.6rem, 10vw, 9rem)/1 var(--display); letter-spacing: -.055em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.phone::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.06em; height: .06em; border-radius: 1em; background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--ease); }
.phone:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.cta-center { justify-content: center; }
.address { margin-top: 32px; color: rgba(11, 13, 18, .7); font-size: .95rem; }
.rings { position: absolute; left: 50%; top: 52%; z-index: -1; width: min(110vw, 1100px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(11, 13, 18, .16); animation: ring 6s var(--ease) infinite; }
.rings i:nth-child(2) { animation-delay: -2s; }
.rings i:nth-child(3) { animation-delay: -4s; }
@keyframes ring { from { transform: scale(.15); opacity: 1; } to { transform: scale(1); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card-feature { grid-row: auto; }
  .cards > .card:nth-child(6), .cards > .card:nth-child(7) { grid-column: auto; }
  .price-grid, .area { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero-row { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps { grid-template-columns: 1fr; gap: 36px; padding-left: 80px; }
  .steps::before, .steps::after { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .steps::after { transform: scaleY(0); transform-origin: 50% 0; }
  .steps li { padding-right: 0; }
  .step-num { position: absolute; left: -80px; top: 0; margin: 0; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .pill-extra { display: none; }
  .cta .btn { flex: 1 1 auto; }
  .scene { height: 200px; }
  .truck { width: 118vw; translate: -50% 0; }
  .cards { grid-template-columns: 1fr; }
  .card-feature { grid-column: auto; }
  .card { min-height: 0; }
  .checks { grid-template-columns: 1fr; }
  .numbers > div { padding-right: 12px; }
  .numbers > div + div { padding-left: 12px; }
  .price-table th { font-size: .95rem; }
  .contact { padding: 88px 0; }
}

/* stagger children keep their reveal timing; hover uses `translate` so it never fights it */
.cards > .card { transition: opacity .9s var(--ease) calc(var(--i, 0) * 80ms + .1s), transform 1.1s var(--ease) calc(var(--i, 0) * 80ms + .1s), translate .7s var(--ease), box-shadow .7s var(--ease); }

/* desktop: copy + CTAs on the left, the truck drives in on the right of the same band */
@media (min-width: 1081px) {
  .hero-row { grid-template-columns: minmax(0, 560px); gap: 28px; }
  .scene { height: 380px; margin-top: -236px; pointer-events: none; }
  .truck { left: auto; right: 0; width: min(780px, 54vw); translate: none; }
  .speedlines { left: 46%; }
  .cta, .lead { position: relative; z-index: 1; }
}