@font-face { font-family: Overpass; src: url('/fonts/overpass-latin-wght.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Overpass; src: url('/fonts/overpass-latin-wght-italic.woff2') format('woff2'); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Overpass Mono'; src: url('/fonts/overpass-mono-latin-wght.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --asphalt: #070B14; --asphalt-2: #111D30;
  --paper: #F1ECDF; --paper-line: #D9D1BE;
  --ink: #15181B; --ink-soft: #4A4F54;
  --amber: #FFB000; --sign: #0B5D46; --reflect: #F7F7F2;
  --wt: #0D55D9; --wt-2: #2575FC; --wt-light: #BDDBFF;
  --muted: #D4E0EF; --cyan: #76DBEF; --teal: #4AE0C6;
  --rule: rgba(118,219,239,.22); --glass: rgba(12,24,44,.66);
  --glass-border: rgba(255,255,255,.14); --glass-highlight: inset 0 1px rgba(255,255,255,.16);
  color-scheme: dark; font-family: Overpass, Arial, sans-serif; font-synthesis: none;
  font-weight: 450; background: var(--asphalt); color: var(--reflect);
  scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; isolation: isolate; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, a, input, select, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 5px; }
main:focus { outline: none; }
::selection { background: var(--amber); color: var(--ink); }
p { margin: 0 0 1.25rem; font-weight: 450; line-height: 1.65; }
h1, h2, h3, figure, dl, dd { margin: 0; }
h1, h2 { font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; }
h2 { font-size: clamp(2.7rem, 5.4vw, 5.7rem); line-height: 1.02; max-width: 15ch; text-wrap: balance; }
section[id] { scroll-margin-top: 7rem; }
.wrap { width: min(100% - clamp(2.5rem, 9vw, 10rem), 90rem); margin-inline: auto; }
.mono, .eyebrow, .mile-marker, .small-heading, dt, .status-chip, .chart-type, .chart-row-labels, .remarks h3, .phone figcaption { font-family: 'Overpass Mono', monospace; }
.eyebrow, .small-heading { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.arrow { flex: 0 0 auto; width: 24px; height: 24px; }
.arrow-diagonal { transform: rotate(-45deg); }
.text-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; font-weight: 750; color: var(--reflect); }
.text-link .arrow { transition: transform .2s ease; }
.text-link:hover .arrow { transform: translateX(4px); }
.button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.35rem; min-height: 54px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; font-weight: 800; text-decoration: none; line-height: 1.3; }
.button-light { color: var(--reflect); background: #123E88; }
.button-dark { color: var(--ink); background: var(--amber); }
.button::before, .sign-fill::after { content: ''; position: absolute; z-index: -1; inset: -5% -10%; border-radius: 45% 45% 0 0; transform: translateY(105%); transition: transform .65s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.button::before { background: #174D9C; }
.button-dark::before { background: #FFD475; }
.button:hover::before, .button:focus-visible::before, .highway-sign:hover .sign-fill::after, .highway-sign:focus-visible .sign-fill::after { transform: translateY(0); }
.js-only { display: none; }
.js .js-only { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 1rem; background: var(--amber); color: var(--ink); font-weight: 750; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Luminous color fields soften into a dark blueprint sky. */
.night-canvas { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: #070B14; }
.mesh { position: absolute; width: 110%; height: 110%; inset: -5%; opacity: .65; filter: brightness(.6); }
.mesh-blue { background: radial-gradient(ellipse at 76% 23%, #1E5BFF 0, transparent 49%); }
.mesh-teal { background: radial-gradient(ellipse at 12% 68%, #00C2A8 0, transparent 45%); opacity: .55; }
.mesh-navy { background: radial-gradient(ellipse at 34% 12%, #0B2A6B 0, transparent 55%); opacity: .55; }
.mesh-dawn { background: radial-gradient(ellipse at 63% 103%, rgba(255,176,0,.45) 0, transparent 43%); opacity: .6; }
.mesh-mid { background: radial-gradient(ellipse at 52% 55%, #136BA6 0, transparent 43%); opacity: .55; }
.blueprint-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(118,219,239,.015) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(118,219,239,.015) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(118,219,239,.025) 0 1px, transparent 1px 120px), repeating-linear-gradient(90deg, rgba(118,219,239,.025) 0 1px, transparent 1px 120px); mask-image: radial-gradient(ellipse at 60% 40%, #000 12%, transparent 85%); }
.home-page .mesh { animation: sky-drift 57s ease-in-out infinite alternate paused; }
.home-page .mesh-teal { animation-duration: 69s; animation-direction: alternate-reverse; }
.home-page .mesh-navy { animation-duration: 43s; }
.home-page .mesh-mid { animation-duration: 53s; }
.home-page .mesh-dawn { animation-duration: 63s; animation-direction: alternate-reverse; }
.home-page.page-awake .mesh { animation-play-state: running; }
@keyframes sky-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }
#fx { display: none; position: absolute; inset: 0; width: 100%; height: 100%; mask-image: linear-gradient(90deg, transparent 48%, #000 68%); }
.js #fx { display: block; }

/* One blur per instrument. Children use solid surfaces, never nested blurs. */
.site-header, .highway-sign, .service-sheet, .log-sheet, .registration, .contact-form, .contact-direct, .phone, .phone-figure figcaption, .legal-measure, .wrong-way-sign, .site-footer { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), 0 18px 60px rgba(0,0,0,.15); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.site-header { position: sticky; z-index: 50; top: 12px; width: min(100% - 32px, 100rem); margin: 12px auto 0; border-radius: 18px; }
.header-inner { width: calc(100% - 32px); min-height: 64px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: 0 0 auto; }
.brand span { font-size: .85rem; font-weight: 850; letter-spacing: -.025em; white-space: nowrap; }
.header-inner nav { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 2rem); }
.odometer { font-family: 'Overpass Mono', monospace; color: var(--muted); font-size: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odometer span { display: inline-block; width: 5ch; }
.languages { display: flex; align-items: center; font-size: .75rem; }
.languages a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.languages a[aria-current] { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.nav-contact { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 650; }

.hero { position: relative; min-height: calc(100svh - 78px); display: flex; flex-direction: column; justify-content: center; overflow: clip; }
.hero-inner { position: relative; padding-top: clamp(2rem, 5svh, 3rem); padding-bottom: 2rem; }
.hero .eyebrow { position: relative; margin-bottom: 1.4rem; color: var(--muted); }
.hero .eyebrow::before { content: ''; display: inline-block; vertical-align: middle; width: 1.8rem; height: 2px; margin-right: .75rem; background: var(--amber); }
.hero-intro { position: relative; display: grid; grid-template-columns: minmax(0, 51%) minmax(0, 49%); row-gap: 1.25rem; min-height: calc(70vw * 350 / 1040); }
.hero h1 { grid-column: 1; font-size: clamp(3rem, min(5.5vw, 9svh), 7.5rem); line-height: .99; letter-spacing: -.045em; color: var(--reflect); }
:lang(es) .hero h1 { font-size: clamp(2.5rem, min(5vw, 8.5svh), 6.75rem); }
.headline-line { display: block; white-space: nowrap; }
.headline-line:last-child { color: var(--amber); }
.kinetic-word { display: inline-block; white-space: nowrap; }
.kinetic-letter { display: inline-block; font-variation-settings: 'wght' 800; }
.js-motion .hero.is-active .kinetic-letter { animation: letter-ignition .7s both; }
.headline-line:nth-child(2) .kinetic-letter { animation-delay: .06s; }
.headline-line:nth-child(3) .kinetic-letter { animation-delay: .12s; }
@keyframes letter-ignition { from { transform: translateY(.3em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero-aside { grid-column: 1; max-width: 34rem; align-self: start; padding-right: 1rem; }
.hero-rule { display: block; width: 36px; height: 2px; margin-bottom: .9rem; background: var(--amber); }
.lead { max-width: 34rem; margin: 0; font-size: clamp(1rem, 1.1vw, 1.2rem); line-height: 1.65; color: var(--paper); }
/* 49.625vw + (65 / 1040 * 70vw) puts the cab at 54vw.
   The drawing and its road share the SVG wheel tangent at y=307. */
.truck-blueprint { position: absolute; left: calc(49.625vw - (100vw - 100%) / 2); top: 0; width: 70vw; color: var(--cyan); }
.truck-blueprint svg { display: block; width: 100%; height: auto; overflow: visible; }
.construction { stroke: currentColor; stroke-width: .65; opacity: .24; stroke-dasharray: 6 7; }
.truck-ink { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.cab-window { fill: rgba(118,219,239,.09); }
.seat { stroke: var(--amber); stroke-width: 2; }
.seat-leader { stroke: var(--amber); stroke-width: 1; }
.seat-leader circle { fill: var(--asphalt); }
.callout-plate { fill: var(--asphalt); fill-opacity: .95; stroke: none; }
.seat-leader text { font-family: 'Overpass Mono', monospace; font-size: 16px; fill: var(--amber); stroke: none; }
.blueprint-title { position: absolute; bottom: 0; right: calc(19.625vw + 1rem); width: max-content; max-width: 40vw; border: 1px solid var(--rule); background: rgba(7,11,20,.9); padding: .65rem; font-size: clamp(.55rem, .75vw, .72rem); line-height: 1.5; }
.js-motion .hero.is-active .truck-ink > * { stroke-dasharray: 1000; animation: blueprint-draw 3.5s ease both; }
@keyframes blueprint-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.gantry { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-top: 2.25rem; margin-top: clamp(2rem, 5svh, 3rem); }
.gantry::before { content: ''; position: absolute; top: 1.6rem; left: 0; right: 0; height: 2px; background: var(--rule); }
.highway-sign { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 140px; padding: 1.6rem 3.2rem 1.3rem 1.6rem; border-radius: 16px; color: var(--reflect); background: rgba(11,66,52,.9); text-decoration: none; transition: transform .25s ease; }
.highway-sign::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(247,247,242,.85); border-radius: 10px; pointer-events: none; }
.sign-fill { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sign-fill::after { background: #0B5D46; }
.highway-sign:hover { transform: translateY(-4px); }
.exit-tab { position: absolute; right: 1rem; top: -1.25rem; min-width: 6.8rem; padding: .4rem .7rem; background: #0C4538; border: 1px solid var(--reflect); border-bottom: 0; border-radius: 7px 7px 0 0; font-size: .75rem; font-weight: 700; text-align: center; letter-spacing: .08em; }
.sign-destination { font-size: clamp(1.3rem, 2.4vw, 2.5rem); font-weight: 750; line-height: 1.1; letter-spacing: -.025em; }
.sign-detail { margin-top: .65rem; font-size: .9rem; line-height: 1.4; }
.highway-sign > .arrow { position: absolute; right: 1.2rem; bottom: 1.45rem; width: 28px; height: 28px; }
.road-edge { position: absolute; top: calc(100% * 307 / 390); left: 0; width: 100%; height: 25px; pointer-events: none; border-top: 1px solid rgba(118,219,239,.4); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.road-dashes { position: absolute; top: 16px; width: 100%; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,176,0,.35) 0 64px, transparent 64px 128px); }
.marquee { overflow: hidden; width: 100%; padding-block: 1.4rem; border-block: 1px solid var(--rule); background: rgba(7,11,20,.75); }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: 4rem; padding-right: 4rem; }
.marquee span { font-size: clamp(2.25rem, 5.5vw, 5rem); font-weight: 700; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--muted); letter-spacing: -.035em; }
.marquee span::after { content: '+'; margin-left: 4rem; color: var(--amber); -webkit-text-stroke: 0; font-family: 'Overpass Mono', monospace; }

.section { position: relative; padding-block: clamp(4rem, 7vw, 8rem); }
.mile-marker { position: relative; display: inline-block; min-width: 5.5rem; padding: .75rem .9rem .65rem; margin-bottom: 2.5rem; border-radius: 8px; background: #0C4538; color: var(--reflect); font-size: .75rem; font-weight: 650; line-height: 1; text-transform: uppercase; letter-spacing: .07em; }
.mile-marker::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(247,247,242,.7); border-radius: 4px; }
.section-lead { color: var(--muted); font-size: clamp(1.125rem, 1.55vw, 1.4rem); line-height: 1.65; margin-top: 1.75rem; max-width: 46ch; }
.driving-intro, .record-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: end; }
.driving-intro .section-lead { margin-bottom: 0; }
.service-sheet { padding: .5rem 1.75rem; border-radius: 20px; border-top: 2px solid var(--cyan); }
.service-sheet > div { padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.service-sheet > div:last-child { border: 0; }
dt { font-size: .75rem; font-weight: 550; text-transform: uppercase; letter-spacing: .035em; }
.service-sheet dt { color: var(--muted); margin-bottom: .4rem; }
.service-sheet dd { font-size: 1rem; font-weight: 650; line-height: 1.5; }
.small-heading { margin-top: 3rem; padding-bottom: 1rem; color: var(--muted); }
.liquid-divider { height: 48px; overflow: hidden; pointer-events: none; }
.liquid-divider svg { display: block; width: 100%; height: 100%; }
.liquid-divider path { vector-effect: non-scaling-stroke; }
.wave-echo { opacity: .45; }
.liquid-divider + .section { padding-top: min(3rem, 5vw); }
.wheeltalk { overflow: clip; background: radial-gradient(ellipse at 80% 45%, rgba(13,85,217,.24), transparent 62%); }
.wheeltalk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.product-brand { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.product-brand img { width: 56px; height: 56px; border-radius: 13px; }
.product-brand > span:not(.status-chip) { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; }
.status-chip { padding: .5rem .6rem; border: 1px solid var(--wt-light); color: var(--wt-light); border-radius: 5px; text-transform: uppercase; font-size: .625rem; font-weight: 650; letter-spacing: .035em; background: #0B203F; }
.product-kicker { margin-bottom: 1.2rem; font-size: .75rem; color: var(--wt-light); }
.wheeltalk h2 { font-size: clamp(2.5rem, 4.3vw, 4.8rem); }
.wheeltalk .section-lead { font-size: 1.125rem; }
.feature-list { list-style: none; padding: 0; margin: 2rem 0; border-top: 1px solid var(--rule); }
.feature-list li { position: relative; border-bottom: 1px solid var(--rule); padding: 1rem 0 1rem 1.25rem; }
.feature-list li::before { content: ''; width: 4px; height: 4px; position: absolute; top: 1.5rem; left: 0; background: var(--wt-light); }
.feature-list strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; font-weight: 750; }
.feature-list p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.availability { font-size: .85rem; color: var(--muted); line-height: 1.65; max-width: 48ch; margin-top: 1rem; }
.safety-note { padding: 1rem; border-left: 2px solid var(--wt-light); background: rgba(7,11,20,.8); border-radius: 0 12px 12px 0; font-size: .85rem; line-height: 1.65; margin-top: 1.75rem; max-width: 50ch; }
.product-legal { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.product-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; }
.phone-figure { margin: 0; width: 100%; max-width: 370px; justify-self: center; position: relative; isolation: isolate; }
.fuel-shape { position: absolute; z-index: -1; width: 142%; max-width: none; height: 115%; left: -21%; top: -9%; opacity: .6; }
.phone { border-radius: 40px; padding: 16px 16px 8px; }
.phone-speaker { width: 72px; height: 5px; margin: 0 auto 24px; border-radius: 4px; background: var(--muted); }
.phone-header { display: flex; gap: .55rem; align-items: center; padding: 0 2px 16px; border-bottom: 1px solid var(--rule); font-size: .95rem; font-weight: 800; }
.mentor-avatar { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; background: var(--wt); color: var(--reflect); border-radius: 50%; font-weight: 800; }
.phone-menu { margin-left: auto; display: flex; gap: 3px; }
.phone-menu i { width: 3px; height: 3px; border-radius: 50%; background: var(--reflect); }
.chat { padding-block: 24px 28px; }
.chat p { margin: .3rem 0 0; line-height: 1.65; font-size: 1rem; }
.chat-role { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.chat-mentor { padding: 12px 14px; margin-right: 20px; background: #14253B; border-radius: 3px 16px 16px 16px; }
.chat-user { margin: 22px 0 0 28px; padding: 12px 14px; color: var(--reflect); background: #103D8A; border-radius: 16px 3px 16px 16px; }
.chat-user .chat-role { color: #D4E6FF; }
.correction { margin: 12px 0 24px 16px; padding: 15px; border: 1px solid var(--wt-light); border-left: 3px solid var(--wt-light); border-radius: 8px; background: #0B1C35; }
.correction-label { color: var(--wt-light); font-size: .7rem; font-weight: 750; }
.corrected-words { display: flex; align-items: center; gap: .7rem; margin-top: .75rem; font-size: 1.4rem; font-weight: 750; }
.corrected-words s { color: var(--muted); }
.corrected-words mark { padding: .05rem .35rem; background: var(--amber); color: var(--ink); }
.correction p { margin-top: .65rem; font-size: .85rem; color: var(--muted); }
.phone-bottom { display: flex; justify-content: center; padding-block: 3px; }
.phone-bottom span { width: 98px; height: 4px; background: var(--muted); border-radius: 4px; }
.phone-figure figcaption { padding: .6rem .75rem; border-radius: 8px; color: var(--muted); text-align: center; font-family: 'Overpass Mono', monospace; font-size: .65rem; line-height: 1.6; margin-top: 1.5rem; }

.log-section h2 { margin-bottom: 2.5rem; }
.log-sheet { padding: clamp(1rem, 3vw, 3rem); border-radius: 20px; border-top: 2px solid var(--cyan); }
.log-sheet-note { margin-bottom: 1rem; color: var(--muted); font-size: .72rem; line-height: 1.6; text-transform: uppercase; font-weight: 600; }
.log-scroll { max-width: 100%; padding-bottom: .75rem; }
.log-chart { width: 100%; height: auto; display: block; }
.log-chart-compact { display: none; }
.chart-type { fill: var(--muted); font-size: 23px; font-weight: 650; }
.chart-row-labels { fill: var(--cyan); font-size: 20px; font-weight: 650; }
.chart-grid { stroke: rgba(118,219,239,.4); stroke-width: 1; fill: none; }
.chart-minor { stroke: rgba(118,219,239,.16); }
.log-trace, .log-next { stroke: var(--amber); stroke-width: 6; fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.log-trace { stroke-dasharray: 1000; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(255,176,0,.55)); }
.log-next { stroke: var(--teal); stroke-dasharray: 11 10; }
.chart-origin { fill: var(--amber); }
.log-chart-compact .chart-type { font-size: 14px; }
.log-chart-compact .chart-row-labels { font-size: 15px; }
.log-chart-compact .log-trace, .log-chart-compact .log-next { stroke-width: 3; }
.log-chart-compact .log-next { stroke-dasharray: 5 4; }
.js-motion .log-sheet.trace-pending .log-trace { stroke-dashoffset: 1000; }
.js-motion .log-sheet.is-visible .log-trace { transition: stroke-dashoffset .85s ease-out; }
.js-motion .log-sheet.trace-pending .log-next { opacity: 0; }
.js-motion .log-sheet.is-visible .log-next { animation: next-leg .15s .85s both; }
@keyframes next-leg { from { opacity: 0; } to { opacity: 1; } }
.remarks { display: grid; grid-template-columns: minmax(0, .23fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.remarks h3 { color: var(--cyan); font-size: .75rem; text-transform: uppercase; font-weight: 650; line-height: 1.6; }
.remarks dl > div { display: grid; grid-template-columns: minmax(0, .22fr) minmax(0, 1fr); gap: 1.5rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--rule); }
.remarks dl > div:last-child { margin: 0; }
.remarks dt { padding-top: .15rem; color: var(--muted); line-height: 1.6; }
.remarks dd { font-size: .95rem; line-height: 1.6; }
.record-intro { margin-bottom: 2.5rem; }
.record-intro .section-lead { margin-bottom: 0; }
.registration { border-radius: 20px; padding-inline: 1.75rem; border-top: 2px solid var(--cyan); }
.registration > div { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.registration > div:last-child { border-bottom: 0; }
.registration dt { color: var(--muted); align-self: center; line-height: 1.6; }
.registration dd { font-size: clamp(1rem, 1.65vw, 1.5rem); font-weight: 650; line-height: 1.5; }
.registration a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.record-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.75rem; align-items: start; }
.record-notes p { margin: 0; font-size: .9rem; line-height: 1.65; max-width: 48ch; color: var(--muted); }
.record-notes .text-link { justify-self: start; }

.contact { isolation: isolate; overflow: hidden; }
.contact::before, .contact::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.contact::before { inset: 35% -10% 0; background: radial-gradient(ellipse at 50% 82%, rgba(255,176,0,.32), transparent 62%); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.contact::after { width: 120%; height: 42%; bottom: 0; left: -10%; background: radial-gradient(ellipse at 50% 65%, rgba(255,194,62,.38), rgba(255,176,0,.14) 35%, transparent 68%); transform: translateY(0) scaleX(1); mask-image: linear-gradient(transparent, #000 30%, #000 65%, transparent); }
.js-motion .contact.is-active::after { animation: pool-tide 12s ease-in-out infinite alternate; }
@keyframes pool-tide { to { transform: translateY(-5%) scaleX(1.08); } }
.contact h2 { font-size: clamp(3.1rem, 6.5vw, 7rem); max-width: 15ch; margin-bottom: 3rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.contact-direct { padding: 1.25rem; border-radius: 20px; }
.contact-direct .section-lead { margin-top: 0; font-size: 1.1rem; }
.contact-email { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: clamp(1rem, 2.5vw, 2.6rem); font-weight: 800; letter-spacing: -.045em; color: var(--amber); }
.contact-email .arrow { width: 28px; height: 28px; }
.copy-controls { margin-top: 1.2rem; }
.copy-button { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: .65rem .9rem; color: var(--reflect); border: 1px solid var(--rule); border-radius: 8px; background: #111D30; font-size: .85rem; font-weight: 700; }
.copy-button:hover { text-decoration: underline; }
.copy-feedback { min-height: 1.5em; margin-top: .7rem; font-size: .8rem; line-height: 1.5; }
.contact-form { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 20px; }
.field { min-width: 0; margin-bottom: 1.4rem; }
.field label { display: block; margin-bottom: .5rem; font-size: .9rem; font-weight: 750; }
.field input, .field select, .field textarea { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid #68829D; border-radius: 8px; padding: .8rem .75rem; background: #0A1322; color: var(--reflect); font-size: 1rem; line-height: 1.4; }
.field select { padding-right: 1.5rem; }
.field textarea { resize: vertical; min-height: 160px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field [aria-invalid="true"] { border: 3px solid var(--amber); }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.field-error { margin: .4rem 0 0; color: var(--amber); font-size: .85rem; font-weight: 750; line-height: 1.5; }
.field-error:empty { display: none; }
.form-privacy { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; max-width: 58ch; }
.site-footer { padding: 3rem 0 1.25rem; border-width: 1px 0 0; }
.footer-main { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand { font-size: 1rem; font-weight: 800; }
.footer-brand svg { width: 32px; height: 32px; }
.site-footer address { margin-top: 1rem; font-style: normal; color: var(--muted); font-size: .85rem; line-height: 1.9; }
.site-footer address a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: start; gap: 0 2rem; }
.footer-links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }
.footer-links .arrow { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid var(--rule); padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; }
.footer-bottom p { font-size: .7rem; line-height: 1.65; margin: 0; color: var(--muted); }

/* Documents keep the same sky, with no animation setup or moving instruments. */
.legal-page { padding-block: clamp(2rem, 5vw, 5rem); min-height: 80svh; }
.legal-measure { max-width: 76ch; padding: clamp(1.5rem, 4vw, 4rem); border-radius: 22px; }
.legal-page h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; margin-block: 1.5rem; }
.legal-date { font-size: .75rem; color: var(--muted); line-height: 1.7; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.legal-page section { margin-top: 2.25rem; }
.legal-page h2 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -.02em; text-transform: none; max-width: none; margin-bottom: .8rem; }
.legal-page section p { color: #DFE8F4; font-size: 1.05rem; font-weight: 400; line-height: 1.65; }
.legal-page .text-link { font-size: 1rem; }
.not-found { min-height: 75svh; width: min(100% - 3rem, 45rem); margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 4rem; }
.wrong-way-sign { width: 100%; position: relative; border-radius: 22px; padding: 3rem 2rem; text-align: center; }
.wrong-way-sign::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--rule); border-radius: 12px; pointer-events: none; }
.wrong-way-sign h1 { font-size: clamp(3rem, 10vw, 6rem); line-height: 1; }
.wrong-way-sign > .mono { letter-spacing: .2em; color: var(--amber); }
.wrong-way-spanish { font-size: clamp(1rem, 3vw, 1.5rem); margin: 1rem 0 0; }
.wrong-way-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: 2rem; }
.rise-word { display: inline-block; white-space: nowrap; }
.js-motion .rise-pending .rise-word { transform: translateY(.55em); opacity: 0; }
.js-motion .rise-visible .rise-word { animation: word-rise .65s ease both; }
.rise-word:nth-child(2n) { animation-delay: .07s; }
@keyframes word-rise { from { transform: translateY(.55em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }

@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .site-header, .service-sheet, .log-sheet, .registration, .contact-form, .contact-direct, .phone, .phone-figure figcaption, .legal-measure, .wrong-way-sign, .site-footer { background: #0B1627; }
  .highway-sign { background: #0C4538; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .hero-inner { padding-top: 1.75rem; padding-bottom: 1.5rem; }
  .hero .eyebrow { margin-bottom: 1rem; }
  .gantry { margin-top: 1.25rem; padding-top: 2rem; }
  .highway-sign { min-height: 126px; }
}
@media (max-width: 999px) {
  .hero { min-height: auto; }
  .hero-intro { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-height: 0; }
  .hero h1 { font-size: clamp(2.9rem, 8vw, 5.5rem); }
  :lang(es) .hero h1 { font-size: clamp(2.2rem, 6.3vw, 4.7rem); }
  .truck-blueprint { position: relative; grid-column: 1; left: 0; top: 0; width: calc(100% + (100vw - 100%) / 2); height: clamp(150px, 23vw, 190px); }
  .truck-blueprint svg { width: auto; max-width: none; height: 100%; }
  .blueprint-title { right: 1rem; bottom: 0; max-width: 48%; }
  .seat-leader text { font-size: 32px; }
  .callout-plate { width: 450px; height: 42px; y: -7; }
  .road-edge { width: 100%; }
  #fx { mask-image: linear-gradient(90deg, transparent, #000 25%); }
  .hero-aside { padding: 0; }
  .lead { font-size: 1rem; }
  .sign-destination { font-size: 1.5rem; }
  .highway-sign { padding-left: 1.1rem; padding-right: 2.5rem; }
  .sign-detail { font-size: .8rem; }
  .wheeltalk-grid { gap: 3rem; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .contact-form { max-width: 44rem; }
  .contact-email { font-size: clamp(1.2rem, 4vw, 2.8rem); }
}
@media (max-width: 767px) {
  .section { padding-block: 4rem; }
  .site-header { top: 8px; width: calc(100% - 16px); margin-top: 8px; border-radius: 14px; }
  .header-inner { width: calc(100% - 20px); min-height: 64px; gap: .5rem; }
  .brand { gap: .4rem; }
  .brand svg { width: 28px; height: 28px; }
  .brand span { font-size: .72rem; }
  .header-inner nav { gap: .4rem; }
  .nav-contact { font-size: .75rem; }
  .languages { font-size: .7rem; }
  .languages > span { display: none; }
  .odometer { font-size: .55rem; }
  .hero-inner { padding-top: 2.5rem; padding-bottom: 3rem; }
  .hero .eyebrow { font-size: .62rem; letter-spacing: 0; }
  .hero h1 { font-size: clamp(2.9rem, 12.2vw, 5.5rem); }
  :lang(es) .hero h1 { font-size: clamp(2.2rem, 9.2vw, 4.7rem); }
  .hero-aside { max-width: 34rem; }
  .hero-rule { margin-bottom: .7rem; }
  .lead { font-size: 1.05rem; max-width: 58ch; }
  .gantry { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 1.25rem; padding-top: 2rem; }
  .gantry::before { display: none; }
  .highway-sign { min-height: 112px; padding: 1.6rem 4rem 1.4rem 1.5rem; }
  .sign-destination { font-size: 1.85rem; }
  .sign-detail { font-size: .875rem; margin-top: .5rem; }
  .highway-sign > .arrow { bottom: 1.8rem; right: 1.4rem; }
  .exit-tab { font-size: .65rem; min-width: 6rem; top: -1.1rem; }
  .driving-intro, .wheeltalk-grid, .record-intro, .record-notes { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .section-lead { margin-top: 1.4rem; }
  .service-sheet, .registration { padding-inline: 1.2rem; }
  .small-heading { margin-top: 2.5rem; }
  .wheeltalk h2 { font-size: clamp(2.5rem, 8.5vw, 4rem); }
  .phone-figure { max-width: 330px; width: 90%; margin-top: 1.5rem; }
  .fuel-shape { width: 126%; left: -13%; }
  .log-section h2 { margin-bottom: 2rem; }
  .log-sheet { padding: 1rem; }
  .remarks { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .remarks dl > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .record-intro { gap: 0; }
  .registration > div { grid-template-columns: minmax(0, 1fr); gap: .4rem; padding-block: 1rem; }
  .record-notes { gap: 1rem; }
  .contact h2 { font-size: clamp(3.1rem, 10vw, 5rem); margin-bottom: 2.25rem; }
  .contact-email { font-size: clamp(1.2rem, 5vw, 1.9rem); gap: .35rem; }
  .contact-email .arrow { width: 22px; height: 22px; }
  .form-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-main { flex-direction: column; gap: 1.5rem; padding-bottom: 1.5rem; }
  .footer-links { gap: 0 1.5rem; }
  .footer-bottom { flex-direction: column; gap: .65rem; }
  .liquid-divider + .section { padding-top: 1.5rem; }
}
@media (max-width: 699px), (min-width: 1000px) and (max-height: 820px) { .blueprint-title { display: none; } }
@media (max-width: 700px) { .log-chart-wide { display: none; } .log-chart-compact { display: block; } }
@media (max-width: 479px) {
  .header-inner nav { gap: 0; }
  .odometer { display: none; }
  .nav-contact { font-size: .7rem; min-width: 44px; justify-content: center; }
  .brand { gap: .3rem; }
  .brand svg { width: 24px; height: 24px; }
  .brand span { white-space: nowrap; font-size: .65rem; }
  .status-chip { font-size: .6rem; }
  .product-brand { gap: .65rem; }
  .product-brand img { width: 44px; height: 44px; }
  .product-brand > span:not(.status-chip) { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js-motion .log-sheet.trace-pending .log-trace { stroke-dashoffset: 0; }
  .js-motion .log-sheet .log-next { opacity: 1; }
  .js-motion .rise-pending .rise-word { opacity: 1; transform: none; }
  .kinetic-letter { font-variation-settings: 'wght' 800; opacity: 1; transform: none; }
  .marquee-track { transform: none; }
  .highway-sign:hover, .text-link:hover .arrow { transform: none; }
}