:root { color-scheme: light; --blue: #039edb; --blue-light: #39b9ed; --ink: #101923; --muted: #6d7e8b; --line: #e4ebef; font-family: Arial, Helvetica, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 50; left: 16px; top: -80px; padding: 14px 20px; background: #fff; border-radius: 8px; }
.skip-link:focus { top: 16px; }
@font-face { font-family: 'Archivo'; src: url('/assets/archivo.woff2?v=7b161533') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/ibm-plex-sans.woff2?v=8a161042') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/geist-mono.woff2?v=634d7681') format('woff2'); font-weight: 100 900; font-display: swap; }
.desktop-stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1920 / 1056; overflow: hidden; color: white; font-family: 'IBM Plex Sans', sans-serif; }
.desktop-strip { position: absolute; inset: 0 0 auto; height: 2.291667cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 6.25cqw; background: #039ae1; font-size: .677083cqw; line-height: 1.3; }
.strip-emergency, .strip-details, .strip-details a, .strip-details button { display: flex; align-items: center; }
.strip-emergency { gap: .416667cqw; font-weight: 600; }
.strip-emergency .status-dot { width: .416667cqw; height: .416667cqw; }
.strip-emergency strong { font: 600 .677083cqw 'Geist Mono', monospace; }
.strip-details { gap: 1.25cqw; }
.strip-details a, .strip-details button { gap: .3125cqw; }
.strip-details button { border: 0; background: none; padding: 0; color: inherit; }
.strip-details img { width: .729167cqw; height: .729167cqw; }
.photo-reveal { overflow: hidden; background: var(--blue); }
.photo-reveal img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; }
.hero-photo { position: absolute; left: .885417%; top: 3.229167cqw; width: 97.864583%; height: 50.833333cqw; border-radius: 1.041667cqw; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #00000045, transparent 49.5%, #00000045); pointer-events: none; }
.desktop-header { position: absolute; left: 26.666667%; top: 4.270833cqw; width: 46.666667%; height: 3.854167cqw; display: flex; gap: 1.041667cqw; }
.glass-nav { width: 35.677083cqw; height: 100%; display: flex; align-items: center; padding: 0 .677083cqw 0 1.510417cqw; border: 1px solid #ffffff66; border-radius: 3.229167cqw; background: #ffffff0f; }
.hero-logo { display: flex; flex-shrink: 0; width: 2.291667cqw; height: 1.616667cqw; margin-right: 2.135417cqw; }
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.glass-nav-links { display: flex; align-items: center; gap: 1.666667cqw; white-space: nowrap; }
.glass-nav-links a, .glass-nav-links button { font: 600 .729167cqw 'IBM Plex Sans', sans-serif; background: none; border: 0; padding: .625cqw 0; color: white; transition: color .2s; }
.glass-nav-links a:hover, .glass-nav-links button:hover { color: #57c9f5; }
.hero-call { display: block; width: 2.916667cqw; height: 2.916667cqw; flex-shrink: 0; margin-left: auto; border-radius: 50%; transition: transform .2s; }
.hero-call img { display: block; width: 100%; height: 100%; }
.hero-call:hover { transform: translateY(-2px); }
.hero-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: #039ae1; color: white; border-radius: 999px; font: 700 .729167cqw 'Archivo', sans-serif; text-transform: uppercase; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .2s; }
.hero-button:hover { background: #0286c4; box-shadow: 0 .4cqw 1.4cqw #00000024; transform: translateY(-2px); }
.hero-book { flex: 1; }
.hero-copy { position: absolute; left: 4.53125%; top: 14.84375cqw; width: 34.322917%; }
.hero-eyebrow { margin: 0 0 1.145833cqw; font: 700 .625cqw/ .833333cqw 'Geist Mono', monospace; text-transform: uppercase; color: #d0d0d0; }
.hero-copy h1 { margin: 0 0 1.145833cqw; font: 800 2.916667cqw/3.333333cqw 'Archivo', sans-serif; letter-spacing: 0; }
.hero-copy h1 em { color: #39b9ed; font-style: normal; }
.hero-description { width: 23.4375cqw; margin: 0; font: 400 .9375cqw/1.458333cqw 'IBM Plex Sans', sans-serif; }
.hero-description strong { font-weight: 700; }
.hero-actions { display: flex; gap: .833333cqw; margin-top: 2.1875cqw; }
.hero-actions .hero-button { height: 3.854167cqw; }
.hero-schedule { width: 13.59375cqw; background: #000; }
.hero-schedule:hover, .workshop-directions:hover { background: #17242d; }
.hero-rescue { width: 17.5cqw; gap: 1.458333cqw; }
.hero-rescue img { width: .9375cqw; height: .9375cqw; }
.hero-proof { position: absolute; left: 4.21875%; top: 45.416667cqw; width: 36.666667%; height: 5.625cqw; display: flex; align-items: center; gap: .364583cqw; border-radius: 999px; padding: .208333cqw 1.354167cqw .208333cqw .208333cqw; background: white; color: #555; }
.hero-play { position: relative; flex-shrink: 0; width: 5.208333cqw; height: 5.208333cqw; border-radius: 50%; padding: 0; border: 0; background: #000; }
.play-disc { position: absolute; inset: 0; width: 100%; height: 100%; }
.play-arrow { position: absolute; width: 1.984641cqw; height: 1.640625cqw; left: 53.25%; top: 51%; transform: translate(-50%, -50%) rotate(90deg); }
.hero-play:hover { box-shadow: 0 0 0 .208333cqw #039ae140; }
.hero-proof > div { display: flex; align-items: center; gap: .416667cqw; }
.hero-proof > div:first-of-type { margin-left: 1.197917cqw; }
.hero-proof strong { color: #3889ff; font: 800 1.510417cqw 'Archivo', sans-serif; }
.hero-proof span { width: 6.25cqw; white-space: nowrap; font: 400 .677083cqw/.885417cqw 'IBM Plex Sans', sans-serif; }
.hero-proof > div:last-child span { width: 4.114583cqw; }
.hero-workshop { position: absolute; left: 67.447917%; top: 34.739583cqw; width: 27.604167%; height: 17.291667cqw; }
.workshop-card { position: absolute; inset: 8.333333cqw 0 0; padding: 1.25cqw; border-radius: .885417cqw; background: #039ae1; }
.workshop-card h2 { margin: 0 0 .625cqw; font: 800 .833333cqw/.885417cqw 'Archivo', sans-serif; }
.workshop-card p { margin: 0 0 .625cqw; max-width: 24.322917cqw; min-height: 2.083333cqw; font: 500 .729167cqw/1.041667cqw 'IBM Plex Sans', sans-serif; }
.workshop-directions { height: 2.239583cqw; padding: 0 1.458333cqw; background: #000; border-radius: .3125cqw; }
.workshop-engine { position: absolute; top: 0; left: 14.0625cqw; width: 12.03125cqw; height: 10.46875cqw; object-fit: contain; pointer-events: none; }

/* The photograph stays still. Only square covers fade away within its own bounds. */
.hero-motion-pending .photo-reveal img { opacity: 0; }
.hero-motion-pending .hero-photo-ready .photo-reveal img { opacity: 1; }
.photo-tiles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.photo-tile { position: absolute; display: block; background: var(--blue); }
.hero-motion-playing .photo-tile { animation: photo-square-reveal 170ms ease-out var(--tile-delay) both; }
@keyframes photo-square-reveal { from { opacity: 1; } to { opacity: 0; } }
.hero-enter { --enter-x: 0px; --enter-y: 0px; --enter-offset: 0ms; }
.hero-enter-left { --enter-x: -56px; }
.hero-enter-right { --enter-x: 56px; }
.hero-enter-header { --enter-y: -18px; }
.hero-enter-proof { --enter-offset: 120ms; }
.hero-motion-pending .hero-enter { opacity: 0; transform: translate(var(--enter-x), var(--enter-y)); }
.hero-motion-playing .hero-enter { animation: hero-content-enter 780ms cubic-bezier(.16,1,.3,1) calc(var(--content-delay) + var(--enter-offset)) both; }
@keyframes hero-content-enter { from { opacity: 0; transform: translate(var(--enter-x), var(--enter-y)); } to { opacity: 1; transform: translate(0, 0); } }


/* Shared dialogs for hero actions and service cards. */
body:has(.panel[open]) { overflow: hidden; }
.panel { border: 1px solid #fff; border-radius: 24px; padding: 0; width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overscroll-behavior: contain; color: var(--ink); background: #fbfcfd; box-shadow: 0 32px 100px #07172455; }
.panel[open] { animation: panel-in .25s ease both; }
.panel::backdrop { background: rgb(5 16 25 / 66%); backdrop-filter: blur(9px); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
#panel-content { padding: 44px; }
.close-panel { position: absolute; z-index: 3; right: 14px; top: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #536570; font-size: 25px; line-height: 1; transition: background .2s, transform .2s; }
.close-panel:hover { background: #eaf5fa; transform: rotate(90deg); }
.eyebrow { margin: 0 0 13px; text-transform: uppercase; font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 1px; }
.panel .eyebrow { color: #0085be; }
.panel h2 { margin: 0 0 16px; max-width: 430px; font-size: 36px; line-height: 1.07; letter-spacing: -1.4px; }
.panel h2 em { color: var(--blue); font-style: normal; }
.panel-lead { margin: 0 0 26px; color: #657580; font-size: 15px; line-height: 1.7; }
.button { min-height: 52px; display: inline-flex; gap: 12px; align-items: center; justify-content: center; padding: 15px 23px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .1px; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #039edb20; }
.button:active { transform: translateY(0); }
.button.primary { background: var(--blue); color: white; }
.button.primary:hover { background: #008fc9; }
.button.dark { background: #080b0e; color: #fff; border-color: #b3bdc3; }
.button.secondary { background: #edf3f6; color: #415867; }
.button.small { min-height: 42px; padding: 11px 17px; font-size: 11px; }
.button.full { width: 100%; }
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.service-list { display: grid; gap: 9px; }
.service-choice { display: flex; width: 100%; align-items: center; text-align: left; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .2s, background .2s; }
.service-choice:hover { border-color: var(--blue); background: #f1faff; }
.service-number { color: var(--blue); font: 12px 'Courier New', monospace; }
.service-choice strong { display: block; margin-bottom: 5px; font-size: 14px; }
.service-choice small { color: var(--muted); font-size: 12px; }
.service-arrow { margin-left: auto; color: var(--blue); font-size: 22px; }
.callout { padding: 22px; border-radius: 16px; background: #eaf6fc; border: 1px solid #d0ebf7; }
.callout p { margin: 8px 0 0; color: #526977; font-size: 13px; line-height: 1.6; }
.callout .big-phone { color: #008dc8; font-size: clamp(25px, 5vw, 34px); font-weight: 700; letter-spacing: -.8px; }
.availability { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #44705c; font-size: 12px; }
.status-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.address-card { padding: 22px; background: white; border: 1px solid var(--line); border-radius: 15px; }
.address-card strong { display: block; font-size: 17px; margin-bottom: 8px; }
.address-card p { margin: 5px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
.stat { padding: 22px 12px; border-radius: 14px; background: #eaf6fc; }
.stat strong { display: block; color: #3083ff; font-size: 32px; margin-bottom: 8px; }
.stat span { color: #668498; font-size: 12px; line-height: 1.5; }
.steps { display: grid; gap: 0; padding: 0; list-style: none; margin: 0; }
.steps li { display: flex; gap: 17px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border: 0; }
.step-number { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #eaf6fc; color: var(--blue); font: 12px 'Courier New', monospace; }
.steps strong { font-size: 14px; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.booking-form { display: grid; gap: 17px; }
.booking-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 700; color: #47606f; }
.booking-form input, .booking-form select, .booking-form textarea { width: 100%; min-height: 46px; padding: 12px; background: white; border: 1px solid #d6e1e7; border-radius: 9px; color: var(--ink); font-size: 14px; }
.booking-form textarea { resize: vertical; min-height: 82px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: -1px 0 0; }
.summary-list { margin: 0; display: grid; gap: 14px; }
.summary-list div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 13px; line-height: 1.5; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; overflow-wrap: anywhere; }
.summary-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #cde4ef; font-size: 12px; line-height: 1.6; color: #526977; }
.overview-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 13px; background: #122331; margin-top: 24px; }
.video-caption { color: var(--muted); font-size: 11px; margin: 10px 0 0; }
.video-caption a { text-decoration: underline; text-underline-offset: 3px; }
.video-error { color: #ab3636; font-size: 13px; }
.overview-counter { color: var(--blue); font: 12px 'Courier New', monospace; margin-bottom: 12px; }
.overview-controls { display: flex; align-items: center; gap: 8px; margin-top: 25px; }
.slide-dot { border: 0; border-radius: 99px; width: 28px; height: 5px; padding: 0; background: #dbe5eb; transition: background .2s; }
.slide-dot[aria-current='true'] { background: var(--blue); }
.slideshow-toggle { margin-left: auto; background: #edf3f6; border: 0; border-radius: 999px; padding: 10px 14px; color: #58717f; font-size: 12px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #122b3a; color: #fff; padding: 13px 20px; border-radius: 10px; font-size: 13px; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Reference layout: two wide cards above a wide card and two narrower cards. */
.services-section { padding: 7.8125vw 0 4.6875vw; background: #fff; }
.services-inner { width: 97.864583%; margin-left: .885417%; container-type: inline-size; }
.services-grid { display: grid; grid-template-columns: minmax(0,937fr) minmax(0,494fr) minmax(0,410fr); grid-template-areas: 'diagnostics brakes brakes' 'oil suspension trailers'; gap: .8cqw 1.06cqw; }
.service-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; height: 29.02cqw; min-width: 0; padding: 3.7cqw; overflow: hidden; text-align: left; color: #3284ff; background: #fff; border: 0; border-radius: 2.12cqw; box-shadow: 0 .13cqw 1.06cqw #00000026; cursor: pointer; transition: box-shadow .25s, background-color .25s; }
.service-card:nth-child(1) { grid-area: diagnostics; }
.service-card:nth-child(2) { grid-area: brakes; }
.service-card:nth-child(3) { grid-area: oil; }
.service-card:nth-child(4) { grid-area: suspension; padding: 3.3cqw 2.78cqw; }
.service-card:nth-child(5) { grid-area: trailers; padding: 3.3cqw 2.78cqw; }
.service-card:hover { box-shadow: 0 .2cqw 1.4cqw #00000030; }
.service-card:active { background: #f5f9ff; }
.service-blue { color: #fff; background: #039edb; box-shadow: none; }
.service-blue:hover { background: #0297d3; box-shadow: none; }
.service-blue:active { background: #028cc4; }
.card-title { position: relative; display: block; margin: 0; font: 600 1.862cqw/1.15 'IBM Plex Sans', sans-serif; }
.card-description { position: relative; display: block; max-width: 30cqw; margin-top: .8cqw; font: 400 1.276cqw/1.6 'IBM Plex Sans', sans-serif; color: inherit; }
/* Empty until supplied: either two photos or transparent cutout parts above the copy. */
.service-media { position: absolute; top: 0; left: 0; right: 0; height: 55%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1cqw; padding: 1.8cqw; pointer-events: none; }
.service-media:empty { display: none; }
.service-media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 1cqw; }
.service-media-cutout img { object-fit: contain; border-radius: 0; filter: drop-shadow(0 .8cqw 1cqw #00000026); }
.service-card:focus-visible { outline-offset: 4px; outline-color: var(--blue); }
.reveal-pending .service-card { opacity: 0; transform: translateY(28px) scale(.98); }
.reveal-play .service-card { animation: card-arrive .72s cubic-bezier(.2,.7,.2,1) calc(var(--card-order,0) * 100ms) both; }
.reveal-play .service-card:nth-child(2) { --card-order: 1; }
.reveal-play .service-card:nth-child(3) { --card-order: 2; }
.reveal-play .service-card:nth-child(4) { --card-order: 3; }
.reveal-play .service-card:nth-child(5) { --card-order: 4; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }


/* One shared hero, with the same artwork, content and controls on every device. */
.menu-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 1199px) {
  .desktop-stage { display: block; aspect-ratio: auto; padding: 0 10px 12px; isolation: isolate; }
  .desktop-stage::before { content: ''; position: absolute; z-index: -2; inset: 64px 10px 12px; border-radius: 22px; background: #292e32; }
  .desktop-strip { position: relative; inset: auto; width: calc(100% + 20px); height: auto; min-height: 52px; margin-left: -10px; padding: 4px 14px; justify-content: center; font-size: 10px; line-height: 1.35; }
  .strip-emergency { display: grid; min-height: 44px; align-content: center; grid-template-columns: 6px 1fr; gap: 2px 7px; text-align: center; }
  .strip-emergency .status-dot { width: 6px; height: 6px; align-self: center; }
  .strip-emergency strong { grid-column: 2; font: 600 12px/1.3 'Geist Mono', monospace; }
  .strip-details { display: none; }
  .hero-photo { z-index: -1; top: 64px; left: 10px; width: calc(100% - 20px); height: 360px; border-radius: 22px 22px 0 0; }
  /* Trim the letterbox margins embedded in the supplied photo, preserving its proportions. */
  .hero-photo img { position: absolute; top: -8%; height: 116%; object-position: 68% center; }
  .hero-photo::after { background: linear-gradient(180deg, transparent 50%, #292e3240 69%, #292e32 100%); }
  .desktop-header { top: 80px; left: 24px; width: calc(100% - 48px); height: 54px; gap: 8px; z-index: 5; }
  .glass-nav { flex: 1; width: auto; min-width: 0; padding: 4px 5px 4px 13px; border-radius: 999px; background: #ffffff0f; }
  .hero-logo { width: 44px; height: 44px; margin: 0 auto 0 0; }
  .glass-nav-links { display: none; }
  .hero-call { width: 44px; height: 44px; margin-left: 6px; }
  .menu-toggle { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; gap: 6px; background: transparent; border: 0; color: #fff; border-radius: 50%; }
  .hero-book { flex: 0 0 112px; font-size: 11px; }
  .mobile-menu { position: absolute; z-index: 6; top: 144px; left: 24px; right: 24px; display: grid; padding: 12px 20px; border: 1px solid #ffffff40; border-radius: 20px; background: #253039f2; backdrop-filter: blur(18px); box-shadow: 0 18px 45px #0004; }
  .mobile-menu a, .mobile-menu button { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 12px 0; border: 0; border-bottom: 1px solid #ffffff1f; text-align: left; background: transparent; color: #fff; font: 500 15px/1.45 'IBM Plex Sans', sans-serif; }
  .mobile-menu a[href*='maps'], .mobile-menu button:last-child { font-size: 12px; color: #d0e9f5; }
  .mobile-menu button:last-child { border: 0; }
  .hero-copy { position: relative; top: auto; left: auto; width: auto; margin: 260px 18px 0; }
  .hero-eyebrow { margin: 0 0 15px; font-size: 9px; line-height: 1.5; color: #fff; }
  .hero-copy h1 { margin: 0 0 18px; font-size: clamp(26px, 8vw, 42px); line-height: 1.08; letter-spacing: -.45px; text-shadow: 0 2px 15px #0002; }
  .hero-description { width: auto; max-width: 460px; margin: 0; font-size: 14px; line-height: 1.6; color: #f0f3f5; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1.28fr; gap: 8px; margin-top: 23px; }
  .hero-actions .hero-button { width: auto; min-height: 52px; height: auto; padding: 12px 10px; font-size: 11px; line-height: 1.3; white-space: normal; text-align: center; }
  .hero-rescue { gap: 7px; }
  .hero-rescue img { width: 17px; height: 17px; flex-shrink: 0; }
  .hero-proof { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 76px; margin: 26px 18px 0; padding: 6px 13px 6px 6px; gap: 9px; justify-content: space-between; border-radius: 999px; }
  .hero-play { width: 52px; height: 52px; }
  .play-arrow { width: 21px; height: 17px; }
  .hero-proof > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero-proof > div:first-of-type { margin-left: 0; }
  .hero-proof strong { font-size: 23px; line-height: 1; }
  .hero-proof span, .hero-proof > div:last-child span { width: auto; font-size: 9px; line-height: 1.3; }
  .hero-workshop { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 76px 18px 22px; }
  .workshop-card { position: relative; inset: auto; padding: 24px 20px 20px; border-radius: 15px; }
  .workshop-card h2 { position: relative; z-index: 1; max-width: 64%; margin: 0 0 12px; font-size: 14px; line-height: 1.2; }
  .workshop-card p { max-width: 100%; min-height: 0; margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
  .workshop-directions { min-height: 44px; height: auto; padding: 12px 22px; border-radius: 6px; font-size: 11px; }
  .workshop-engine { top: -64px; left: auto; right: 10px; width: 110px; height: 96px; }
  .services-section { padding: 42px 10px 36px; }
  .services-inner { width: 100%; margin-left: 0; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: 'diagnostics brakes' 'oil oil' 'suspension trailers'; gap: 10px; }
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { min-height: 270px; height: auto; padding: 25px 18px; border-radius: 20px; }
  .card-title { font-size: 21px; line-height: 1.15; }
  .card-description { max-width: 350px; margin-top: 9px; font-size: 14px; line-height: 1.5; }
  .service-media { padding: 15px; gap: 10px; }
  .booking-form input, .booking-form select, .booking-form textarea { font-size: 16px; }
  .close-panel { min-width: 44px; min-height: 44px; }
}
@media (min-width: 620px) and (max-width: 1199px) {
  .desktop-stage { min-height: 810px; padding-bottom: 36px; }
  .desktop-strip { min-height: 44px; font-size: 12px; }
  .strip-emergency { display: flex; min-height: 36px; gap: 8px; }
  .strip-emergency strong { font-size: 12px; }
  .desktop-stage::before { top: 56px; }
  .hero-photo { top: 56px; bottom: 12px; height: auto; border-radius: 22px; }
  .hero-photo img { object-position: 57% center; }
  .hero-photo::after { background: linear-gradient(90deg, #141e2870, transparent 75%), linear-gradient(0deg,#18252f65,transparent 50%); }
  .desktop-header { top: 76px; left: 34px; width: calc(100% - 68px); max-width: 560px; height: 60px; }
  .glass-nav { padding-left: 20px; }
  .hero-logo { width: 44px; height: 44px; }
  .hero-book { flex-basis: 150px; font-size: 12px; }
  .mobile-menu { left: 34px; right: auto; width: min(480px,calc(100% - 68px)); top: 146px; }
  .hero-copy { margin: 126px 28px 0; width: 62%; }
  .hero-eyebrow { font-size: 10px; }
  .hero-copy h1 { font-size: clamp(34px,4.8vw,46px); }
  .hero-description { max-width: 340px; font-size: 16px; }
  .hero-actions { max-width: 440px; }
  .hero-actions .hero-button { min-height: 56px; font-size: 11px; }
  .hero-proof { margin: 108px 28px 0; width: 52%; gap: 10px; }
  .hero-workshop { position: absolute; left: auto; top: auto; right: 32px; bottom: 34px; width: 35%; margin: 0; }
  .workshop-card { padding: 24px 18px 18px; }
  .workshop-card h2 { max-width: none; font-size: 13px; }
  .workshop-card p { font-size: 12px; }
  .workshop-engine { top: -104px; right: 10px; width: 135px; height: 117px; }
}
@media (max-width: 540px) {
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { min-height: 280px; padding: 22px 17px; }
  .service-card:nth-child(3) { min-height: 245px; }
  .card-title { font-size: 19px; }
  .card-description { font-size: 13px; }
  .panel { border-radius: 20px; max-height: calc(100dvh - 24px); }
  #panel-content { padding: 52px 24px 26px; }
  .panel h2 { font-size: 30px; }
  .panel-lead { font-size: 14px; }
  .panel-actions > .button { flex: 1 1 100%; }
  .stats { gap: 7px; }
  .stat { padding: 18px 9px; }
  .stat strong { font-size: 27px; }
  .stat span { font-size: 10px; }
  .form-row { grid-template-columns: minmax(0,1fr); gap: 17px; }
  .summary-list div { grid-template-columns: 85px 1fr; }
}
@media (max-width: 359px) {
  .desktop-header { left: 20px; width: calc(100% - 40px); gap: 6px; }
  .hero-book { flex-basis: 98px; font-size: 10px; }
  .glass-nav { padding-left: 10px; }
  .hero-logo { width: 44px; height: 44px; }
  .hero-copy { margin-left: 14px; margin-right: 14px; }
  .hero-copy h1 { font-size: 26px; }
  .hero-eyebrow { font-size: 8px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .hero-button { min-height: 48px; font-size: 11px; }
  .hero-proof { margin-left: 12px; margin-right: 12px; padding-right: 10px; gap: 6px; }
  .hero-play { width: 44px; height: 44px; }
  .hero-proof strong { font-size: 21px; }
  .hero-proof span, .hero-proof > div:last-child span { font-size: 8px; }
  .hero-workshop { margin-left: 14px; margin-right: 14px; }
  .workshop-card { padding-left: 17px; padding-right: 17px; }
  .card-title { font-size: 17px; }
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { padding: 22px 15px; }
}


/* The mobile header remains available while navigating the page. */
.photo-reveal picture { display: block; width: 100%; height: 100%; }
.desktop-header { z-index: 20; }
.desktop-header > .hero-call { position: absolute; left: 32.083333cqw; top: .46875cqw; margin: 0; }
#services { scroll-margin-top: 76px; }
@media (max-width: 1199px) {
  .desktop-header { position: fixed; left: 22px; top: 60px; width: calc(100% - 44px); max-width: 560px; height: 44px; display: grid; grid-template-columns: minmax(0,1fr) 44px 96px; gap: 6px; transition: top .2s; }
  .desktop-header.nav-scrolled { top: 12px; }
  .glass-nav { width: 100%; height: 44px; display: grid; grid-template-columns: 38px minmax(0,1fr); padding: 0 8px 0 2px; background: #18232e45; backdrop-filter: blur(14px); }
  .nav-scrolled .glass-nav { background: #172632ed; border-color: #ffffff55; box-shadow: 0 4px 18px #14233020; }
  .hero-logo { width: 38px; height: 42px; margin: 0; align-items: center; justify-content: center; }
  .hero-logo img { width: 30px; height: 23px; }
  .desktop-header > .hero-call { position: static; width: 44px; height: 44px; margin: 0; }
  .hero-book { width: 100%; height: 44px; padding: 0 8px; font-size: 10px; }
  .desktop-header .menu-toggle { width: 100%; height: 42px; flex-direction: row; gap: 6px; font: 600 12px/1.2 'IBM Plex Sans',sans-serif; }
  .desktop-header .menu-toggle .menu-section-name { width: auto; min-width: 0; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; transform: none; }
  .menu-chevron { flex-shrink: 0; transition: transform .2s; }
  .menu-toggle[aria-expanded='true'] .menu-chevron { transform: rotate(180deg); }
  .mobile-menu { position: fixed; top: 112px; left: 22px; right: 22px; width: auto; max-width: 560px; max-height: calc(calc(100 * var(--lvh, 1svh)) - 130px); overflow-y: auto; z-index: 21; }
  .desktop-header.nav-scrolled + .mobile-menu { top: 64px; }
  .mobile-menu [aria-current] { color: #50c8f5; }
}
@media (min-width: 620px) and (max-width: 1199px) {
  .desktop-header { top: 76px; left: 34px; width: calc(100% - 68px); }
  .mobile-menu { top: 128px; left: 34px; right: auto; width: min(560px,calc(100% - 68px)); }
}
/* One phone screen: artwork above, a compact information stack below. */
@media (max-width: 619px) {
  .desktop-stage { container-type: normal; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 40px minmax(96px,1fr) auto 54px 116px; gap: 10px; height: calc(100 * var(--lvh, 1svh)); min-height: 560px; padding: 0 22px 16px; }
  .desktop-stage::before { inset: 48px 10px 8px; border-radius: 20px; }
  .desktop-strip { grid-area: 1 / 1; width: calc(100% + 44px); margin-left: -22px; min-height: 0; height: 40px; padding: 0 10px; }
  .strip-emergency { min-height: 40px; font-size: 8.5px; gap: 0 6px; }
  .strip-emergency strong { font-size: 10px; line-height: 1.25; }
  .hero-photo { top: 48px; bottom: 8px; left: 10px; width: calc(100% - 20px); height: auto; border-radius: 20px; }
  .hero-photo img { top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
  .hero-photo::after { background: linear-gradient(180deg,transparent 40%,#111a242b 64%,#111a2440 100%); }
  .hero-copy { grid-area: 3 / 1; position: relative; top: auto; left: auto; align-self: end; width: auto; min-width: 0; margin: 0; }
  .hero-eyebrow { margin: 0 0 8px; font-size: 8px; line-height: 1.2; }
  .hero-copy h1 { margin: 0 0 9px; font-size: clamp(24px,7.6vw,33px); line-height: 1.04; letter-spacing: -.35px; }
  .hero-description { max-width: none; width: auto; margin: 0; font-size: 12.5px; line-height: 1.45; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1.28fr; gap: 8px; max-width: none; margin-top: 12px; }
  .hero-actions .hero-button { min-height: 44px; height: 44px; padding: 7px 8px; font-size: 10.2px; line-height: 1.2; }
  .hero-rescue { gap: 6px; }
  .hero-rescue img { width: 14px; height: 14px; }
  .hero-proof { grid-area: 4 / 1; width: 100%; min-height: 0; height: 54px; margin: 0; padding: 5px 11px 5px 5px; gap: 5px; }
  .hero-play { width: 44px; height: 44px; }
  .play-arrow { width: 18px; height: 15px; }
  .hero-proof > div { gap: 3px; }
  .hero-proof strong { font-size: 20px; }
  .hero-proof span, .hero-proof > div:last-child span { font-size: 7.5px; line-height: 1.25; }
  .hero-workshop { grid-area: 5 / 1; position: relative; inset: auto; width: 100%; height: 116px; margin: 0; }
  .workshop-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; padding: 10px 110px 10px 12px; border-radius: 14px; }
  .workshop-card h2 { max-width: none; margin: 0 0 4px; font-size: 11px; line-height: 1.15; }
  .workshop-card p { max-width: none; margin: 0 0 6px; font-size: 10.5px; line-height: 1.3; }
  .workshop-directions { position: relative; min-height: 32px; height: 32px; padding: 7px 12px; border-radius: 4px; font-size: 9.5px; }
  .workshop-directions::after { content: ''; position: absolute; inset: -6px 0; }
  .workshop-engine { top: 50%; left: auto; right: 12px; width: 88px; height: 92px; max-height: calc(100% - 20px); transform: translateY(-50%); }
}
@media (max-width: 619px) {
  :where(.lvh-700) .hero-photo img { object-position: center 25%; }
  :where(.lvh-700) .desktop-stage { gap: 8px; padding-bottom: 14px; }
  :where(.lvh-700) .hero-copy h1 { font-size: clamp(24px,7.2vw,28px); margin-bottom: 7px; }
  :where(.lvh-700) .hero-eyebrow { margin-bottom: 6px; }
  :where(.lvh-700) .hero-description { font-size: 11.5px; line-height: 1.4; }
  :where(.lvh-700) .hero-actions { margin-top: 9px; }
}
@media (max-width: 359px) {
  .desktop-header { grid-template-columns: minmax(0,1fr) 44px 86px; left: 20px; width: calc(100% - 40px); }
  .desktop-header .menu-toggle { font-size: 11px; gap: 4px; }
  .hero-book { font-size: 9px; }
  .hero-actions .hero-button { font-size: 9px; }
  .workshop-card h2 { font-size: 10px; }
  .workshop-card p { font-size: 10px; }
  .workshop-card { padding-right: 102px; }
  .workshop-engine { width: 82px; right: 10px; }
}

/* Balanced spacing and persistent separation from light and dark backgrounds. */
.hero-button { box-shadow: 0 5px 16px #0b1b2a30, 0 1px 3px #0b1b2a24; }
.hero-call { box-shadow: 0 5px 16px #0b1b2a35, 0 1px 3px #0b1b2a24; }
.hero-play { box-shadow: 0 3px 9px #0b1b2a24; }
@media (hover: hover) and (pointer: fine) {
  .hero-button:hover, .hero-call:hover { box-shadow: 0 8px 22px #0b1b2a40, 0 2px 4px #0b1b2a24; }
}
@media (max-width: 1199px) {
  .desktop-header { top: 64px; left: 28px; width: calc(100% - 56px); height: 52px; grid-template-columns: minmax(0,1fr) 48px 108px; align-items: center; gap: 10px; }
  .desktop-header.nav-scrolled { top: 16px; }
  .glass-nav { height: 52px; grid-template-columns: 36px minmax(0,1fr); padding: 4px 10px 4px 8px; box-shadow: 0 5px 18px #0b1b2a2b; }
  .hero-logo { width: 36px; height: 42px; }
  .desktop-header .menu-toggle { height: 42px; padding: 0 4px; }
  .desktop-header > .hero-call { width: 48px; height: 48px; }
  .hero-book { height: 52px; padding: 12px 16px; font-size: 10px; }
  .mobile-menu { top: 128px; left: 28px; right: 28px; max-height: calc(calc(100 * var(--lvh, 1svh)) - 146px); padding: 12px 22px; }
  .desktop-header.nav-scrolled + .mobile-menu { top: 80px; }
  .mobile-menu a, .mobile-menu button { min-height: 48px; padding: 14px 2px; }
  .hero-proof { display: grid; grid-template-columns: 44px repeat(3,minmax(0,1fr)); align-items: center; justify-content: normal; gap: 10px; padding: 10px 12px; box-shadow: 0 6px 20px #0b1b2a26; }
  .hero-play { width: 44px; height: 44px; }
  .hero-proof > div { min-width: 0; align-items: center; justify-content: center; text-align: center; gap: 4px; }
  .hero-proof > div:first-of-type { margin-left: 0; }
  .hero-proof span, .hero-proof > div:last-child span { width: auto; }
}
@media (min-width: 620px) and (max-width: 1199px) {
  .desktop-header { top: 76px; left: 34px; width: calc(100% - 68px); }
  .mobile-menu { top: 140px; left: 34px; right: auto; width: min(560px,calc(100% - 68px)); }
}
@media (max-width: 619px) {
  .desktop-stage { grid-template-rows: 40px minmax(56px,1fr) auto 72px 124px; row-gap: 12px; padding-left: 24px; padding-right: 24px; }
  .hero-actions { gap: 10px; margin-top: 16px; }
  .hero-actions .hero-button { min-height: 48px; height: 48px; padding: 11px 14px; }
  .hero-rescue { gap: 8px; }
  .hero-proof { height: 72px; padding: 12px; gap: 12px; }
  .hero-proof strong { font-size: 20px; line-height: 1; }
  .hero-proof span, .hero-proof > div:last-child span { font-size: 8px; line-height: 1.3; }
  .workshop-directions { padding: 7px 16px; }
}
@media (max-width: 619px) {
  :where(.lvh-700) .desktop-stage { row-gap: 10px; }
  :where(.lvh-700) .hero-actions { margin-top: 12px; }
}
@media (max-width: 359px) {
  .desktop-header { left: 24px; width: calc(100% - 48px); grid-template-columns: minmax(0,1fr) 48px 94px; gap: 8px; }
  .glass-nav { grid-template-columns: 32px minmax(0,1fr); padding-left: 6px; padding-right: 6px; }
  .hero-logo { width: 32px; }
  .hero-logo img { width: 27px; }
  .desktop-header .menu-toggle { font-size: 10.5px; gap: 4px; padding: 0 2px; }
  .hero-book { font-size: 9px; padding: 12px; }
  .hero-actions .hero-button { padding: 10px; }
  .hero-proof { padding: 10px; gap: 8px; }
  .hero-proof strong { font-size: 19px; }
  .hero-proof span, .hero-proof > div:last-child span { font-size: 7.5px; }
}

/* Mobile spacing follows 4 / 8 / 12 / 16 / 24 / 32 px steps. */
@media (max-width: 1199px) {
  .booking-form { gap: 16px; }
  .form-row { gap: 16px; }
  .panel-lead { margin-bottom: 24px; }
  .panel-actions { gap: 12px; }
}
@media (max-width: 619px) {
  .desktop-stage::before { left: 12px; right: 12px; }
  .hero-photo { left: 12px; width: calc(100% - 24px); }
  .desktop-strip { width: calc(100% + 48px); margin-left: -24px; }
  .hero-copy h1 { margin-bottom: 12px; }
  .hero-eyebrow { margin-bottom: 8px; }
  .hero-actions { margin-top: 16px; gap: 12px; }
  .hero-workshop { height: 124px; }
  .workshop-card { padding: 12px 112px 12px 16px; }
  .workshop-card h2 { margin-bottom: 8px; }
  .workshop-card p { margin-bottom: 8px; }
  .workshop-engine { right: 12px; }
  .services-section { padding: 32px 12px 40px; }
  .services-grid { gap: 12px; }
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { padding: 24px 18px; }
  .card-description { margin-top: 8px; }
  #panel-content { padding: 56px 24px 24px; }
}
@media (max-width: 359px) {
  .workshop-card { padding: 12px 100px 12px 12px; }
  .workshop-engine { right: 10px; }
  .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { padding: 24px 16px; }
  .hero-proof { padding: 12px 10px; gap: 8px; }
}
@media (max-width: 619px) {
  :where(.lvh-700) .hero-copy h1 { margin-bottom: 8px; }
  :where(.lvh-700) .hero-eyebrow { margin-bottom: 8px; }
  :where(.lvh-700) .hero-actions { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .photo-tiles { display: none !important; } .hero-motion-pending .hero-enter, .hero-motion-pending .photo-reveal img { opacity: 1; transform: none; } .reveal-pending .service-card { opacity: 1; transform: none; } }

/* Phone and tablet hero: the photo keeps one inset on every side, and cards keep one padding on every side. */
@media (min-width: 620px) and (max-width: 1199px) {
  .workshop-card { padding: 20px; }
}
@media (max-width: 619px) {
  .desktop-stage { padding-bottom: 24px; }
  .desktop-stage::before { bottom: 12px; }
  .hero-photo { bottom: 12px; }
  .workshop-card { padding: 16px 112px 16px 16px; }
  .workshop-engine { right: 16px; }
  /* Card height = its content + 16 px above and below, so the inner padding is equal on all sides. */
  .desktop-stage { grid-template-rows: 40px minmax(56px,1fr) auto 72px 120px; }
  .hero-workshop { height: 120px; }
}
@media (max-width: 359px) {
  .workshop-card { padding: 14px 100px 14px 14px; }
  .workshop-engine { right: 14px; }
}

/* Short hero labels: both buttons share one width and stay on one line at every size. */
.hero-rescue { width: 13.59375cqw; }
@media (max-width: 1199px) {
  .hero-actions { grid-template-columns: 1fr 1fr; }
  .hero-actions .hero-button { white-space: nowrap; }
}
@media (max-width: 619px) {
  .hero-actions .hero-button { font-size: clamp(11px, 3.1vw, 13px); padding: 0 12px; }
  .hero-rescue { gap: 8px; }
}

/* The truck keeps its roof: portrait screens use the portrait photo pinned to the top and crop only the floor. */
@media (max-width: 619px) {
  .hero-photo img, .hero-photo picture img { object-position: center top; }
}
@media (max-width: 619px) {
  :where(.lvh-700) .hero-photo img { object-position: center top; }
}
@media (min-width: 620px) and (max-width: 1199px) and (max-aspect-ratio: 1/1) {
  .hero-photo img { top: 0; height: 100%; object-position: center top; }
}

/* The blue emergency strip is pinned to the top of the screen on every device; the floating header sits under it. */
:root { --strip-h: 2.291667vw; }
.desktop-strip { position: fixed !important; inset: 0 0 auto !important; z-index: 40; width: auto !important; margin: 0 !important; color: #fff; font-family: 'IBM Plex Sans', sans-serif; }
@media (max-width: 1199px) {
  :root { --strip-h: 44px; }
  .desktop-strip { height: var(--strip-h); min-height: 0; }
  .desktop-header.nav-scrolled { top: calc(var(--strip-h) + 8px); }
  .desktop-header.nav-scrolled + .mobile-menu { top: calc(var(--strip-h) + 68px); max-height: calc(calc(100 * var(--lvh, 1svh)) - var(--strip-h) - 84px); }
}
@media (max-width: 619px) {
  :root { --strip-h: 40px; }
}

/* Phone readability: headline words keep a visible gap, small labels stay legible,
   and the workshop card grows with its text instead of letting the button cover it. */
.hero-copy h1 { word-spacing: .08em; }
@media (max-width: 619px) {
  .desktop-stage { grid-template-rows: 40px minmax(56px,1fr) auto auto auto; }
  .hero-eyebrow { font-size: 10px; line-height: 1.3; letter-spacing: .04em; }
  .hero-copy h1 { line-height: 1.08; }
  .hero-description { font-size: 13.5px; line-height: 1.5; }
  .hero-proof { height: auto; min-height: 72px; }
  .hero-proof span, .hero-proof > div:last-child span { font-size: clamp(9.5px, 2.6vw, 10.5px); line-height: 1.25; }
  .hero-workshop { height: auto; }
  .workshop-card { height: auto; min-height: 120px; }
  .workshop-card h2 { font-size: 12px; line-height: 1.2; }
  .workshop-card p { flex-shrink: 0; font-size: 12px; line-height: 1.45; }
  .workshop-directions { height: 36px; min-height: 36px; font-size: 11px; }
}
@media (max-width: 619px) {
  .strip-emergency { font-size: 10px; }
  .strip-emergency strong { font-size: 11px; }
}
/* Short phones: the workshop card keeps its title and button; the photo keeps its height. */
@media (max-width: 619px) {
  :where(.lvh-700) .workshop-card p { display: none; }
  :where(.lvh-700) .hero-description { font-size: 12.5px; line-height: 1.45; }
}
/* The smallest phones (iPhone SE 1st gen): the eyebrow gives way so nothing runs into the menu. */
@media (max-width: 619px) {
  :where(.lvh-620) .hero-eyebrow { display: none; }
}
/* Narrow phones: the menu pill gets the room it needs so the section name is never cut off. */
@media (max-width: 389px) {
  .desktop-header { grid-template-columns: minmax(0,1fr) 44px 98px; gap: 8px; }
  .desktop-header > .hero-call { width: 44px; height: 44px; }
  .hero-book { padding: 12px 8px; }
}

/* In-app browsers (Telegram) let the page scroll under their translucent top bar. The strip's blue continues
   upward so no page content shows above it; in every other browser this part sits off-screen. */
.desktop-strip::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 50vh; background: inherit; pointer-events: none; }

/* Hero copy reads clearly over the photo: a soft shade on the text side and brighter text. */
@media (min-width: 1200px) {
  .hero-photo::after { background: linear-gradient(90deg, #0b141c85 0%, #0b141c45 30%, transparent 52%), linear-gradient(180deg, #00000045, transparent 49.5%, #00000045); }
  .hero-description { color: #fff; text-shadow: 0 1px 3px #0008; }
  .hero-copy h1 { text-shadow: 0 2px 16px #0006; }
}
@media (max-width: 619px) {
  .hero-photo::after { background: linear-gradient(180deg, transparent 20%, #0b141c4d 42%, #0b141ca8 74%, #0b141cd1 100%), linear-gradient(90deg, #0b141c5c, transparent 72%); }
  .hero-eyebrow { color: #fff; text-shadow: 0 1px 3px #000b; }
  .hero-copy h1 { text-shadow: 0 2px 14px #0007; }
  .hero-description { color: #fff; text-shadow: 0 1px 3px #0009; }
}

/* Phone hero with the branded truck: the photo stays pinned to the top so the truck sits between the menu
   and the copy; the shade starts under its wheels and deepens behind the text. On phones shorter than
   880 px the workshop card keeps only its title and button, so the copy does not climb onto the truck. */
@media (max-width: 619px) {
  .hero-photo::after { background: linear-gradient(180deg, transparent 33%, #0b141c73 45%, #0b141cc7 62%, #0b141ceb 100%); }
  .hero-copy h1 { text-shadow: 0 2px 16px #000a; }
  .hero-description, .hero-eyebrow { text-shadow: 0 1px 4px #000c; }
  :where(.lvh-880) .workshop-card p { display: none; }
}
/* Short phones: the eyebrow and the paragraph give way so the heading, buttons and figures sit under the truck. */
@media (max-width: 619px) {
  :where(.lvh-700) .hero-eyebrow, :where(.lvh-700) .hero-description { display: none; }
}