/* ══════════════════════════════════════════════════════════════════════════
   ONEPRO DRIVERS — cartoon hiring theme
   Flat colours, thick ink outlines, sticker shadows, bouncy motion.
   1 tokens · 2 base · 3 keyframes · 4 scene layers · 5 nav · 6 hero
   7 sections · 8 cards · 9 calculator · 10 steps · 11 form · 12 faq
   13 footer · 14 responsive
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --ink:#12263F; --ink-soft:#4A5C77; --ink-mute:#7C8BA3;
  --cream:#FFF6E6; --cream2:#FFEFD6; --paper:#FFFFFF;
  --sky:#3BB0FF; --sky-l:#8FDBFF; --sky-t:#E8F6FF;
  --sun:#FFD21E; --sun-d:#FFA91B; --orange:#FF8A1F; --coral:#FF5A3C;
  --green:#17C964; --green-d:#0FA850; --purple:#8B6CFF;
  --ff-head:'Barlow Condensed',ui-sans-serif,'Arial Narrow',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --wrap:1180px; --pad:clamp(16px,4vw,40px);
  --r:20px; --r-lg:28px; --bw:3px;
  --sh:5px 5px 0 var(--ink); --sh-lg:8px 8px 0 var(--ink); --sh-sm:3px 3px 0 var(--ink);
  --ease:cubic-bezier(.22,.61,.36,1); --pop:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  background:var(--cream); color:var(--ink); font-family:var(--ff-body);
  font-size:clamp(15px,.4vw + 14px,17px); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
.ico{width:20px;height:20px;flex:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(38px,6.4vw,78px)}
h2{font-size:clamp(32px,5.2vw,64px)}
h3{font-size:clamp(20px,1.6vw,27px)}
p{text-wrap:pretty}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:4px solid var(--sky);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;left:14px;z-index:999;background:var(--sun);color:var(--ink);
  padding:10px 18px;border-radius:0 0 12px 12px;font-weight:800;transition:top .2s}
.skip:focus{top:0}
.prog{position:fixed;top:0;left:0;height:5px;z-index:120;width:0;
  background:linear-gradient(90deg,var(--sun),var(--orange),var(--coral))}

/* ── 3. KEYFRAMES ──────────────────────────────────────────────────────── */
@keyframes pan{to{transform:translateX(-900px)}}
@keyframes panWide{to{transform:translateX(-1600px)}}
@keyframes drive{from{transform:translateX(1700px)}to{transform:translateX(-400px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bobBig{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-26deg)}75%{transform:rotate(14deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:.6}100%{transform:translate(-42px,-56px) scale(1.7);opacity:0}}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes pulseSun{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fly{0%{transform:translate(-160px,30px)}100%{transform:translate(1700px,-40px)}}
@keyframes dash{to{transform:translateX(-160px)}}
@keyframes popIn{0%{transform:scale(0) rotate(-12deg)}70%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes sway{0%,100%{transform:skewX(0)}50%{transform:skewX(-5deg)}}
@keyframes ringOut{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.2);opacity:0}}
@keyframes sparkle{0%,100%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}}
@keyframes drawTick{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-14px) rotate(-3deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cursor{0%,45%{opacity:1}50%,95%{opacity:0}}

/* reveal */
.rv{opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .7s var(--ease) var(--rd,0s),transform .7s var(--pop) var(--rd,0s)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv,html.no-anim .rv{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
  .drive-a{transform:translateX(360px)}
  .drive-b{transform:translateX(840px)}
}
html.no-anim .drive-a{transform:translateX(360px)}
html.no-anim .drive-b{transform:translateX(840px)}

/* ── 4. SCENE LAYERS ───────────────────────────────────────────────────── */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ly{position:absolute;left:0;right:0;will-change:transform}
.ly svg{width:100%;height:100%}

.ly-sun{top:9%;right:5%;left:auto;width:clamp(120px,15vw,230px);aspect-ratio:1}
.sun-rays{transform-origin:150px 150px;animation:rays 52s linear infinite}
.sun-core{transform-origin:150px 150px;animation:pulseSun 5s ease-in-out infinite}
.ly-cloud1{top:0;height:34%}
.ly-birds{top:8%;height:22%}
:root{--road-h:min(11.5vw,166px)}   /* height of the asphalt band */
.ly-hill1{bottom:calc(var(--road-h) + 54px);height:200px}
.ly-hill2{bottom:calc(var(--road-h) + 26px);height:200px}
.ly-hill3{bottom:calc(var(--road-h) - 6px);height:200px}
.ly-road,.ly-trucks,.ly-front{bottom:0;height:auto}
.ly-road svg,.ly-trucks svg,.ly-front svg{height:auto}

.pan{animation:pan 34s linear infinite}
.pan-slow{animation:panWide 90s linear infinite}
.pan-slow2{animation:pan 64s linear infinite}
.pan-mid{animation:pan 38s linear infinite}
.pan-fast{animation:pan 22s linear infinite}
.fly{animation:fly 26s linear infinite}
.dashes{animation:dash .55s linear infinite}

.truck .wh{transform-box:fill-box;transform-origin:center;animation:spin 1.1s linear infinite}
.truck .tr-body{animation:bob 1s ease-in-out infinite}
.tr-smoke{transform-box:fill-box;transform-origin:center;animation:smoke 2.2s ease-out infinite}
.tr-smoke.s2{animation-delay:1.1s}
.drive-a{animation:drive 17s linear infinite}
.drive-b{animation:drive 26s linear infinite 5s}
.drive-mini{animation:bobBig 2.4s ease-in-out infinite}

.person .pr-bob{animation:bob 2.6s ease-in-out infinite}
.pr-wave{animation:wave 1.3s ease-in-out infinite;transform-box:fill-box}
.pr-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.2s linear infinite}
.bubble{transform-box:fill-box;transform-origin:30px 80px;animation:bobBig 3.4s ease-in-out infinite}
.grass{animation:sway 3s ease-in-out infinite;transform-origin:bottom}

/* step art */
.step-art{width:100%;max-width:230px}
.fl-a{animation:floatA 4.5s ease-in-out infinite}
.fl-b{animation:floatA 4s ease-in-out infinite}
.fl-c{animation:floatB 4.6s ease-in-out infinite}
.pencil{transform-box:fill-box;transform-origin:center;animation:wiggle 1.6s ease-in-out infinite}
.tick path{stroke-dasharray:70;animation:drawTick 1.4s var(--ease) infinite alternate}
.ring-pulse circle{transform-box:fill-box;transform-origin:center;animation:ringOut 1.8s ease-out infinite}
.spark circle{transform-box:fill-box;transform-origin:center;animation:sparkle 1.6s ease-in-out infinite}
.spark circle:nth-child(2){animation-delay:.3s}.spark circle:nth-child(3){animation-delay:.6s}
.spark circle:nth-child(4){animation-delay:.9s}.spark circle:nth-child(5){animation-delay:1.2s}

/* ── 5. NAV ────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background .3s,box-shadow .3s,transform .4s var(--ease)}
.nav.stuck{background:var(--cream);box-shadow:0 var(--bw) 0 var(--ink)}
.nav.hide{transform:translateY(-105%)}
.nav-in{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px);height:78px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:46px;height:46px;flex:none;transition:transform .4s var(--pop)}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}
.logo-txt b{font-family:var(--ff-head);font-size:27px;font-weight:800;display:block;line-height:.82}
.logo-txt b i{font-style:normal;color:var(--orange)}
.logo-txt small{font-size:10px;letter-spacing:.34em;color:var(--ink-mute);font-weight:700;text-transform:uppercase}
.nav-links{display:flex;gap:clamp(6px,1.2vw,20px);margin-left:auto;font-size:15px;font-weight:700}
.nav-links a{padding:9px 12px;border-radius:99px;white-space:nowrap;transition:background .22s,color .22s,transform .22s var(--pop)}
.nav-links a:hover{background:var(--sun);transform:translateY(-2px)}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;white-space:nowrap}
.nav-phone small{display:block;font-size:10px;font-weight:700;color:var(--ink-mute);letter-spacing:.08em;text-transform:uppercase}
.nav-phone:hover{color:var(--coral)}
.lang{display:flex;gap:2px;border:var(--bw) solid var(--ink);border-radius:99px;padding:3px;font-size:12px;font-weight:800;background:#fff}
.lang a{padding:4px 9px;border-radius:99px;color:var(--ink-mute);transition:.2s}
.lang a.on{background:var(--ink);color:var(--cream)}
.burger{display:none;width:48px;height:48px;border:var(--bw) solid var(--ink);border-radius:14px;
  background:#fff;position:relative;cursor:pointer;box-shadow:var(--sh-sm)}
.burger i,.burger::before,.burger::after{content:'';position:absolute;left:11px;right:11px;height:3px;
  background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger i{top:21.5px}.burger::before{top:14px}.burger::after{top:29px}
.burger[aria-expanded=true] i{opacity:0}
.burger[aria-expanded=true]::before{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded=true]::after{top:21.5px;transform:rotate(-45deg)}

/* ── 6. BUTTONS ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  padding:15px 28px;border-radius:99px;font-weight:800;font-size:16px;cursor:pointer;white-space:nowrap;
  border:var(--bw) solid var(--ink);box-shadow:var(--sh);
  transition:transform .18s var(--pop),box-shadow .18s var(--ease),background .25s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--sh-sm)}
.btn-hi{background:var(--sun);color:var(--ink)}
.btn-hi:hover{background:var(--sun-d)}
.btn-go{background:var(--green);color:#fff}
.btn-gh{background:#fff;color:var(--ink)}
.btn-gh:hover{background:var(--sky-t)}
.btn-lg{padding:19px 36px;font-size:18px}

/* ── 7. HERO ───────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(104vh,1010px);display:flex;align-items:flex-start;
  padding:clamp(104px,13vh,146px) 0 clamp(300px,36vh,430px);
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-l) 46%,#FFE9B8 76%,#FFD98F 100%)}
.hero .wrap{position:relative;z-index:3}
.hero-in{max-width:min(100%,780px)}
.kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-head);font-weight:800;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;background:#fff;color:var(--ink);
  border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);padding:7px 18px;border-radius:99px;margin-bottom:20px;
  animation:bobBig 4s ease-in-out infinite}
.kick .dot{width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--ink);flex:none}
h1 .ln{display:block;text-shadow:4px 4px 0 rgba(18,38,63,.14)}
h1 em{font-style:normal;color:var(--sun);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.hero-rot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;
  font-family:var(--ff-head);font-size:clamp(21px,2.6vw,34px);font-weight:800;text-transform:uppercase}
.hero-rot .lb{color:var(--ink-soft);font-size:.62em;letter-spacing:.16em}
.rot{background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);border-radius:99px;
  padding:4px 18px;min-width:clamp(160px,17vw,250px);display:inline-block;color:var(--ink)}
.rot::after{content:'';display:inline-block;width:3px;height:.8em;background:var(--coral);
  margin-left:3px;vertical-align:-.06em;animation:cursor 1.1s steps(1) infinite}
.hero-sub{font-size:clamp(17px,1.3vw,21px);font-weight:600;color:var(--ink);max-width:46ch;margin-top:18px;
  text-shadow:0 2px 0 rgba(255,255,255,.55)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* trust row riding on top of the road */
.trust{position:relative;z-index:3;margin-top:-72px;padding-bottom:12px}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;
  border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden}
.stat{padding:22px 18px;text-align:center;position:relative}
.stat + .stat{border-left:var(--bw) solid var(--ink)}
.stat b{font-family:var(--ff-head);font-size:clamp(34px,4.4vw,52px);font-weight:800;display:block;line-height:.9;color:var(--ink)}
.stat:nth-child(1) b{color:var(--sky)}.stat:nth-child(2) b{color:var(--orange)}
.stat:nth-child(3) b{color:var(--green)}.stat:nth-child(4) b{color:var(--purple)}
.stat p{font-size:13.5px;font-weight:700;color:var(--ink-soft);margin-top:4px;line-height:1.25}

/* ── 8. TICKER ─────────────────────────────────────────────────────────── */
.ticker{background:var(--ink);color:var(--cream);overflow:hidden;padding:12px 0;
  border-block:var(--bw) solid var(--ink);transform:rotate(-1deg) scale(1.03);margin:clamp(40px,6vh,70px) 0}
.ticker-in{display:flex;width:max-content;animation:marq 38s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:14px;padding:0 18px;font-family:var(--ff-head);
  font-size:21px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ticker span::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--sun)}
.ticker span:nth-child(3n){color:var(--sun)}

/* ── 9. SECTIONS ───────────────────────────────────────────────────────── */
section{position:relative;padding:clamp(42px,5.6vh,74px) 0}
.sec-head{max-width:620px;margin-bottom:clamp(24px,3.4vh,40px)}
.sec-head.ctr{margin-inline:auto;text-align:center;max-width:780px}
.eyebrow{display:inline-block;font-family:var(--ff-head);font-size:14px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);
  padding:5px 15px;border-radius:99px;margin-bottom:14px;transform:rotate(-1.5deg)}
.sec-head p{color:var(--ink-soft);font-size:17px;font-weight:600;margin-top:12px;max-width:52ch}
.hl{color:var(--coral)}
.band{background:var(--paper);border-block:var(--bw) solid var(--ink)}
.band-sky{background:var(--sky-t);border-block:var(--bw) solid var(--ink)}

/* ── 10. JOB TILES ─────────────────────────────────────────────────────── */
.jobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(12px,1.5vw,18px)}
.job{position:relative;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh);transition:transform .2s var(--pop),box-shadow .2s var(--ease);overflow:hidden}
.job::before{content:'';position:absolute;inset:auto 0 0;height:8px;background:var(--c,var(--sun))}
.job:hover{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:var(--sh-lg)}
.job-art{height:74px;display:grid;place-items:center;margin-bottom:10px}
.job-art svg{height:74px;width:auto;max-width:none;transition:transform .3s var(--pop)}
.job:hover .job-art svg{transform:translateX(-6px) scale(1.06)}
.job h3{font-size:23px;line-height:1}
.job .pay{font-family:var(--ff-head);font-size:27px;font-weight:800;color:var(--green-d);margin-top:8px;line-height:1}
.job .pay i{font-style:normal;font-size:13px;color:var(--ink-mute);font-family:var(--ff-body);font-weight:700}
.job .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:800;font-size:14px;color:var(--sky)}
.job .go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.job:hover .go svg{transform:translateX(5px)}
.job-link{position:absolute;inset:0}

/* ── 11. STEPS ─────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2vw,26px)}
.step{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--sh);text-align:center;position:relative;transition:transform .25s var(--pop)}
.step:hover{transform:translateY(-6px) rotate(1deg)}
.step-n{position:absolute;top:-18px;left:-14px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--ff-head);font-size:23px;font-weight:800;
  background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm)}
.step h3{margin:10px 0 6px;font-size:21px}
.step p{font-size:14.5px;color:var(--ink-soft);font-weight:600}

/* ── 12. CALCULATOR ────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(18px,2.6vw,36px);
  background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:clamp(20px,2.8vw,34px)}
.ctrl{margin-bottom:20px}
.ctrl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:12px}
.ctrl-top label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.ctrl-top output{font-family:var(--ff-head);font-size:23px;font-weight:800}
input[type=range]{width:100%;height:12px;border-radius:99px;-webkit-appearance:none;appearance:none;cursor:pointer;
  border:var(--bw) solid var(--ink);
  background:linear-gradient(90deg,var(--sun) var(--p,50%),#EDE4D4 var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);cursor:grab;
  transition:transform .15s var(--pop)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.18);cursor:grabbing}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:grab}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{padding:9px 15px;border-radius:99px;border:var(--bw) solid var(--ink);background:#fff;
  font-size:14px;font-weight:800;cursor:pointer;transition:.18s var(--pop);box-shadow:var(--sh-sm)}
.seg button:hover{transform:translate(-2px,-2px)}
.seg button[aria-pressed=true]{background:var(--sun)}
.calc-out{background:var(--sky-t);border:var(--bw) solid var(--ink);border-radius:var(--r);
  padding:clamp(18px,2.2vw,26px);text-align:center;align-self:start}
.calc-out .lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:800}
.calc-big{font-family:var(--ff-head);font-size:clamp(48px,7vw,80px);font-weight:800;line-height:.92;
  color:var(--green-d);font-variant-numeric:tabular-nums;margin:4px 0}
.bars{margin-top:16px;display:grid;gap:10px;text-align:left}
.bar-row{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;font-size:13px;font-weight:700}
.bar{height:14px;border-radius:99px;background:#fff;border:2.5px solid var(--ink);overflow:hidden}
.bar i{display:block;height:100%;background:var(--sun);width:0;transition:width .6s var(--ease)}
.bar-row b{font-family:var(--ff-head);font-size:17px;font-variant-numeric:tabular-nums}
.calc-note{font-size:13px;color:var(--ink-soft);font-weight:600;margin-top:14px}
.calc-note a{color:var(--sky);font-weight:800}

/* ── 13. FORM ──────────────────────────────────────────────────────────── */
.form-shell{position:relative;background:var(--sun);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:clamp(20px,3vw,40px);display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,40px);overflow:hidden}
.form-side h2{font-size:clamp(30px,3.6vw,46px)}
.form-side p{font-weight:700;margin-top:10px}
.form-side ul{list-style:none;display:grid;gap:9px;margin-top:16px}
.form-side li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;font-weight:700}
.form-side li svg{width:19px;height:19px;flex:none;margin-top:2px}
.form-card{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);padding:clamp(16px,2.2vw,26px)}
.f-prog{height:12px;border-radius:99px;background:#F1E9DA;border:2.5px solid var(--ink);overflow:hidden;margin-bottom:18px}
.f-prog i{display:block;height:100%;width:0;background:var(--green);transition:width .4s var(--ease)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:5px}
.f.full{grid-column:1/-1}
.f label{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.f input,.f select,.f textarea{width:100%;background:#fff;border:2.5px solid var(--ink);border-radius:12px;
  padding:12px 14px;font-size:16px;font-weight:600;transition:.2s;appearance:none}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312263F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px}
.f textarea{min-height:76px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;box-shadow:var(--sh-sm);transform:translate(-2px,-2px)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-mute);font-weight:500}
.f.err input,.f.err select{border-color:var(--coral);background:#FFF0ED}
.f .msg{font-size:11.5px;color:var(--coral);font-weight:800;display:none}
.f.err .msg{display:block}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink-soft);
  font-weight:600;line-height:1.45}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--green)}
.consent.err{color:var(--coral)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-done{display:none;text-align:center;padding:26px 8px}
.form-done.on{display:block;animation:popIn .55s var(--pop)}
.form-done .ok{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm)}
.form-done .ok svg{width:42px;height:42px;color:#fff}

/* ── 14. FAQ ───────────────────────────────────────────────────────────── */
.faq{display:grid;gap:10px;max-width:860px;margin-inline:auto}
.qa{border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh-sm)}
.qa[open]{background:var(--sun)}
.qa summary{list-style:none;cursor:pointer;padding:16px 50px 16px 20px;position:relative;
  font-family:var(--ff-head);font-size:clamp(18px,1.4vw,22px);font-weight:800;text-transform:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:28px;font-weight:800;line-height:1;transition:transform .3s var(--pop)}
.qa[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.qa .a{padding:0 20px 18px;font-size:15px;font-weight:600;color:var(--ink);animation:rise .35s var(--ease)}

/* ── 15. CTA BAND ──────────────────────────────────────────────────────── */
.cta-band{position:relative;background:var(--ink);color:var(--cream);border-radius:var(--r-lg);
  padding:clamp(28px,4.5vw,56px);text-align:center;overflow:hidden;border:var(--bw) solid var(--ink);box-shadow:var(--sh-lg)}
.cta-band h2{color:#fff}
.cta-band p{color:#CBD6E6;font-weight:600;max-width:42ch;margin:12px auto 24px}
.cta-band .hero-cta{justify-content:center}
.cta-truck{position:absolute;right:-30px;bottom:-14px;width:min(40%,330px);opacity:.22}

/* ── 16. FOOTER ────────────────────────────────────────────────────────── */
footer{background:var(--ink);color:var(--cream);padding:clamp(34px,4.5vw,56px) 0 110px;margin-top:clamp(40px,6vh,72px)}
.f-grid2{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(18px,3vw,40px)}
footer .logo-txt small{color:#8FA3BF}
footer h4{font-size:13px;letter-spacing:.18em;color:var(--sun);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:7px;font-size:14px}
footer a{color:#CBD6E6;transition:color .2s}
footer a:hover{color:var(--sun)}
.f-about p{color:#9FB0C7;font-size:13.5px;margin-top:12px;max-width:40ch}
.f-phone{font-family:var(--ff-head);font-size:30px;font-weight:800;color:var(--sun);display:block;margin-bottom:6px}
.f-bot{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:20px;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;font-size:12.5px;color:#8FA3BF}
.f-bot nav{display:flex;gap:14px;flex-wrap:wrap}
.ai-note{font-size:11.5px;color:#8FA3BF;margin-top:10px}
.ai-note code{font-family:ui-monospace,monospace}

/* ── 17. MOBILE BAR + MISC ─────────────────────────────────────────────── */
.callbar{position:fixed;inset:auto 0 0;z-index:95;display:none;gap:8px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:var(--cream);border-top:var(--bw) solid var(--ink)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;border-radius:14px;
  font-weight:800;font-size:15px;border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm)}
.callbar a.c1{background:var(--green);color:#fff}
.callbar a.c2{background:var(--sun);color:var(--ink)}
.top{position:fixed;right:18px;bottom:22px;z-index:96;width:52px;height:52px;border-radius:50%;display:grid;
  place-items:center;background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);opacity:0;
  transform:translateY(12px);pointer-events:none;transition:.3s var(--ease);cursor:pointer}
.top.on{opacity:1;transform:none;pointer-events:auto}
.top:hover{background:var(--sun)}
.checks{list-style:none;display:grid;gap:9px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600}
.checks li svg{width:19px;height:19px;color:var(--green-d);flex:none;margin-top:3px}
.crumbs{font-size:13.5px;font-weight:700;color:var(--ink-soft);padding-top:100px}
.crumbs a:hover{color:var(--coral)}
.crumbs span{margin:0 7px;opacity:.5}
.rel{display:flex;flex-wrap:wrap;gap:9px}
.rel a{border:var(--bw) solid var(--ink);background:#fff;padding:9px 16px;border-radius:99px;font-size:14px;
  font-weight:800;box-shadow:var(--sh-sm);transition:.18s var(--pop)}
.rel a:hover{transform:translate(-2px,-2px);background:var(--sun)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.card{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px);
  box-shadow:var(--sh)}
.note{background:var(--sky-t);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:16px 20px;
  font-size:14.5px;font-weight:600}
.jp-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,3vw,40px);align-items:start}
.jp-card{background:var(--sun);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,28px);box-shadow:var(--sh-lg);position:sticky;top:100px}
.jp-card .row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:14.5px;font-weight:700;
  border-bottom:2px solid rgba(18,38,63,.14)}
.jp-card .row:last-of-type{border-bottom:0}
.jp-card .row span{color:#6B5A2A}
.jp-big{font-family:var(--ff-head);font-size:clamp(36px,4.4vw,52px);font-weight:800;line-height:1}
.jp-card .btn{width:100%;margin-top:14px}
.hero-mini{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-l),var(--sky-t));
  border-bottom:var(--bw) solid var(--ink);padding-bottom:18px}

/* ── 18. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .calc,.form-shell,.jp-head{grid-template-columns:1fr}
  .jp-card{position:static}
  .f-grid2{grid-template-columns:1fr 1fr}
}
/* the road scene crops to the right on narrow screens so the driver stays in frame */
@media (max-width:760px){
  :root{--road-h:124px}
  .ly-road,.ly-trucks,.ly-front{height:200px}
  .ly-road svg,.ly-trucks svg,.ly-front svg{height:100%}
  .hero{padding-bottom:236px;min-height:auto}
  .ly-hill1,.ly-hill2,.ly-hill3{height:150px}
  .ly-sun{top:7%}
}

@media (max-width:860px){
  .nav-links{position:fixed;inset:78px 0 auto;flex-direction:column;gap:0;background:var(--cream);
    padding:10px var(--pad) 22px;border-bottom:var(--bw) solid var(--ink);box-shadow:0 10px 0 rgba(18,38,63,.1);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease);font-size:18px}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:13px 10px;border-radius:12px}
  .burger{display:block;margin-left:auto}
  .nav-phone{display:none}
  .nav .btn{display:none}
  .lang{margin-left:auto}
  .callbar{display:flex}
  .top{bottom:92px}
  .two{grid-template-columns:1fr}
  .trust-in{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:var(--bw) solid var(--ink)}
  .hero{padding-bottom:clamp(190px,28vh,280px)}
}
@media (max-width:620px){
  .f-grid,.f-grid2{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .trust{margin-top:-48px}
  .ly-sun{width:96px}
  h1 em{-webkit-text-stroke-width:2.5px}
}
@media print{.nav,.callbar,.top,.scene,.ticker{display:none!important}body{background:#fff}}