@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
:root{--ink:#102c27;--green:#0b5749;--orange:#f06436;--paper:#f3f0e7;--cream:#fffef9;--line:#d5d9d0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}header{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-bottom:1px solid var(--line)}header small,.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--green)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.brand>b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px 12px 12px 4px;background:var(--orange);color:#fff}.brand em,h1 em{font-family:'Playfair Display',serif}main{min-height:calc(100vh - 116px)}footer{padding:15px;text-align:center;background:var(--ink);color:#bcd0c8;font-size:10px}.welcome{min-height:680px;padding:70px 8vw;display:grid;grid-template-columns:1fr 380px;gap:8vw;align-items:center;background:var(--cream)}h1{font:700 clamp(48px,6vw,82px)/.95 'Playfair Display',serif;letter-spacing:-.05em;margin:20px 0}.welcome h1 em{color:var(--orange)}.welcome p{max-width:620px;color:#61736e;font-size:18px;line-height:1.6}.welcome form{max-width:620px;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.welcome label{display:grid;gap:6px;font-size:11px;font-weight:800}.welcome input{height:48px;padding:0 13px;border:1px solid #aeb8b2;border-radius:9px;background:#fff}.welcome button,.status button{grid-column:1/-1;height:52px;border:0;border-radius:9px;background:var(--orange);color:#fff;font-weight:800;box-shadow:0 5px 0 #b94420}.trap{position:absolute;left:-10000px}.welcome aside{padding:45px;display:grid;grid-template-columns:auto 1fr;gap:22px;background:linear-gradient(145deg,var(--green),#073c34);border-radius:28px;color:#fff;box-shadow:0 25px 70px #102c2730}.welcome aside b{font:700 38px 'Playfair Display',serif;color:#d2df69}.welcome aside span{align-self:center}.test{padding:34px 5vw 65px}.meta{max-width:1200px;margin:0 auto 15px;display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:.12em}.scene{height:400px;max-width:1200px;margin:auto;position:relative;overflow:hidden;border-radius:24px;background:#bfe0e7;box-shadow:0 18px 50px #102c2722}.sky{position:absolute;inset:0 0 40%;background:linear-gradient(#79b9d5,#e7f2ef)}.sky:after{content:'';position:absolute;right:10%;top:35px;width:55px;height:55px;border-radius:50%;background:#ffe28a;box-shadow:0 0 30px #fff3a8}.mountains{position:absolute;inset:18% -10% 39%;background:linear-gradient(145deg,transparent 0 28%,#799284 29% 55%,transparent 56%),linear-gradient(220deg,transparent 0 34%,#486b5d 35% 62%,transparent 63%);animation:world 5s linear forwards}.road{position:absolute;inset:auto -5% 0;height:40%;background:#444b4a;transform:perspective(350px) rotateX(5deg)}.road:after{content:'';position:absolute;left:0;right:0;top:57%;height:5px;background:repeating-linear-gradient(90deg,#f5e989 0 60px,transparent 60px 100px);animation:lines .7s linear 5}.truck{position:absolute;z-index:5;left:-100px;bottom:68px;font-size:84px;filter:drop-shadow(0 8px 3px #0004);animation:drive 3s ease forwards}.truck i{position:absolute;left:6px;top:22px;font-size:17px;font-style:normal}.event{position:absolute;z-index:6;right:15%;bottom:100px;font-size:58px;opacity:0;animation:event .5s 1.25s forwards}.caption{position:absolute;z-index:12;left:20px;top:20px;padding:12px 15px;display:flex;flex-direction:column;border-radius:9px;background:#0b5749ee;color:#fff}.caption span{font-size:9px;color:#c7ded6}.fogbank{position:absolute;z-index:7;inset:35% -20% 0;background:repeating-linear-gradient(0deg,#ffffffd9 0 18px,#dce8e8a0 18px 45px);filter:blur(8px);animation:fog 2s 1s both}.radar{position:absolute;z-index:9;right:8%;bottom:55px;width:72px;padding:8px;text-align:center;background:#111;border:5px solid #ddd;border-radius:8px;color:#f43;opacity:0;animation:event .4s .9s forwards}.radar b{display:block;font-size:28px}.radar small{display:block;color:#fff}.notes{position:absolute;z-index:8;left:40%;bottom:150px;color:#843ba0;font-size:32px;animation:notes .8s infinite alternate}.stop .truck,.brake .truck{animation:stop 3s ease forwards}.turn .truck{animation:turn 3s ease forwards}.swerve .truck{animation:swerve 3s ease forwards}article{max-width:1200px;margin:22px auto 0;padding:34px;background:var(--cream);border:1px solid var(--line);border-radius:18px}article h2{font:700 clamp(28px,4vw,43px)/1.08 'Playfair Display',serif;max-width:920px}.answers{display:grid;gap:10px}.answers button{min-height:58px;padding:12px 18px;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.answers button:hover{border-color:var(--green);background:#edf4f0}.answers b{display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:#e9ece6}.status{min-height:680px;padding:90px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--cream)}.status h1{font-size:58px}.status strong{font-size:28px;color:var(--green)}.status small{margin-top:18px}.spinner{width:60px;height:60px;border:7px solid #dce2dd;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}.result-icon{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;color:#fff;font-size:34px;font-weight:800}.result-icon.pass{background:#278452}.result-icon.fail{background:#bc4b2e}@keyframes drive{to{left:40%}}@keyframes stop{0%{left:-100px}60%{left:45%}100%{left:38%;transform:translateY(8px)}}@keyframes turn{0%{left:-100px}65%{left:45%;transform:rotate(-10deg)}100%{left:36%}}@keyframes swerve{0%{left:-100px}55%{left:40%}72%{transform:translateY(-22px) rotate(-5deg)}100%{left:38%}}@keyframes event{to{opacity:1;transform:scale(1.05)}}@keyframes lines{to{background-position:100px 0}}@keyframes world{to{transform:translateX(-12%)}}@keyframes fog{from{opacity:0}to{opacity:.85}}@keyframes notes{to{transform:translateY(-18px)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){header{padding:0 18px}.welcome{padding:45px 20px;grid-template-columns:1fr}.welcome form{grid-template-columns:1fr}.welcome aside{display:none}.test{padding:22px 12px 50px}.scene{height:340px}.truck{font-size:62px;bottom:65px}article{padding:24px 18px}.status h1{font-size:44px}}
@media(max-width:480px){header{height:64px;padding:0 14px}header small{display:none}.brand>b{width:36px;height:36px}.brand span{font-size:15px}.welcome{min-height:calc(100vh - 104px);padding:34px 16px;align-items:start}.welcome h1{font-size:48px;margin:16px 0}.welcome p{font-size:15px}.welcome form{margin-top:22px;gap:14px}.welcome input{width:100%;height:52px;font-size:16px}.welcome button,.status button{min-height:54px;font-size:15px}.test{padding:16px 10px 42px}.meta{padding:0 3px;font-size:8px}.scene{height:300px;border-radius:17px}.caption{left:12px;right:12px;top:12px;padding:10px 12px}.caption b{font-size:12px}.caption span{font-size:8px}.mountains{inset:24% -30% 39%}.truck{bottom:53px;font-size:55px}.truck i{left:4px;top:15px;font-size:13px}.event{right:8%;bottom:78px;font-size:43px}.radar{right:5%;bottom:45px;transform:scale(.8)}.notes{left:37%;bottom:115px;font-size:25px}article{margin-top:14px;padding:22px 15px;border-radius:14px}article h2{font-size:29px;margin:13px 0 20px}.answers button{min-height:64px;padding:12px 11px;font-size:13px;line-height:1.35}.answers b{min-width:34px;height:34px}.status{min-height:calc(100vh - 104px);padding:65px 17px}.status h1{font-size:42px}.status p{line-height:1.55}}
@media(max-width:350px){.welcome h1{font-size:42px}.scene{height:275px}.truck{font-size:49px}.event{font-size:38px}article h2{font-size:26px}.answers button{font-size:12px}}
.certificate-page{padding-top:55px}.certificate{width:min(760px,100%);padding:46px 55px;position:relative;border:2px solid var(--green);outline:8px double #d2df69;outline-offset:-18px;background:linear-gradient(135deg,#fffef9,#f2f5e8);box-shadow:0 22px 65px #102c2720}.certificate:before,.certificate:after{content:"";position:absolute;width:85px;height:85px;border-color:var(--orange);opacity:.35}.certificate:before{left:25px;top:25px;border-left:3px solid;border-top:3px solid}.certificate:after{right:25px;bottom:25px;border-right:3px solid;border-bottom:3px solid}.certificate-mark{width:68px;height:68px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:34px}.certificate-label{margin:13px 0 0;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.2em}.certificate h1{margin:13px 0;font-size:59px;color:var(--green)}.certificate h2{margin:8px 0 17px;font:700 36px 'Playfair Display',serif;border-bottom:1px solid #aebbad;padding-bottom:8px}.certificate-score{margin:25px auto;display:flex;flex-direction:column}.certificate-score b{font:700 45px 'Playfair Display',serif;color:var(--orange)}.certificate-score span{font-size:11px}.certificate-details{margin-top:30px;display:flex;justify-content:space-between;gap:20px;text-align:left;font-size:12px}.certificate-details span{display:flex;flex-direction:column}.certificate-details small{margin:0 0 4px;color:#71817b;font-size:8px;letter-spacing:.12em}.certificate-page>button{margin-top:22px;padding:0 25px}
@media(max-width:600px){.certificate-page{padding:35px 12px}.certificate{padding:38px 25px}.certificate h1{font-size:43px}.certificate h2{font-size:29px}.certificate-details{flex-direction:column;align-items:center;text-align:center}}
@media print{body{background:#fff}header,footer,.certificate-page>p,.certificate-page>button{display:none}.certificate-page{min-height:0;padding:20px;background:#fff}.certificate{width:100%;box-shadow:none}.certificate h1{font-size:54px}}
.delivery-warning{max-width:680px;padding:12px 16px;border-radius:9px;background:#fff0d8;color:#7b4d00;font-size:13px}.delivery-ok{color:var(--green)}
.written-response{display:grid;gap:10px}.written-response label{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--green)}.written-response textarea{width:100%;min-height:150px;padding:16px;border:1px solid #aeb8b2;border-radius:10px;background:#fff;color:var(--ink);font:16px/1.5 'DM Sans',Arial,sans-serif;resize:vertical}.written-response textarea:focus{outline:3px solid #0b574922;border-color:var(--green)}.written-response small{margin:0;color:#71817b}.written-response button{justify-self:start;min-width:170px;height:50px;padding:0 22px;border:0;border-radius:9px;background:var(--orange);color:#fff;font-weight:800;box-shadow:0 5px 0 #b94420}
.driver-action{position:absolute;z-index:5;left:14%;bottom:58px;display:grid;grid-template-columns:42px 42px;align-items:center;column-gap:2px;padding:8px 10px;border:2px solid #fff;border-radius:10px;background:#fffef9e8;box-shadow:0 6px 0 #102c2730;transform-origin:50% 100%}.driver-action span{font-size:36px;line-height:1}.driver-action small{grid-column:1/-1;margin-top:5px;color:var(--green);font-size:8px;font-weight:800;letter-spacing:.06em;text-align:center;text-transform:uppercase}.driver-action .driver-tool{animation:driverTool 1s ease-in-out infinite alternate}.driver-action.documents .driver-person,.driver-action.sign .driver-person,.driver-action.checkin .driver-person{animation:driverWave 1.1s ease-in-out infinite alternate}.driver-action.measure .driver-tool{animation:driverMeasure 1.1s ease-in-out infinite alternate}.driver-action.signal,.driver-action.mirror,.driver-action.radio{bottom:102px}.driver-action.radio .driver-tool{animation:radioTalk .7s ease-in-out infinite alternate}.driver-action.tire{left:43%;bottom:35px;background:#fff7e7}.driver-action.tire .driver-person{animation:driverKneel .9s ease-in-out infinite alternate}.driver-action.tire .driver-tool{animation:tireTurn .55s linear infinite}.driver-action.inspect,.driver-action.camera,.driver-action.mechanic,.driver-action.chains{left:55%;bottom:49px}.driver-action.inspect .driver-tool,.driver-action.camera .driver-tool,.driver-action.mechanic .driver-tool,.driver-action.chains .driver-tool{animation:toolBob .65s ease-in-out infinite alternate}.driver-action.wipers{left:36%;bottom:106px}.driver-action.message{left:52%;bottom:75px}.driver-action.message .driver-tool{animation:messageBlink .75s steps(1) infinite}.driver-action.rest,.driver-action.scale,.driver-action.fuel,.driver-action.yield{left:42%;bottom:48px}@keyframes driverTool{to{transform:translateY(-6px) rotate(-8deg)}}@keyframes driverWave{to{transform:rotate(-12deg) translateY(-3px)}}@keyframes driverMeasure{to{transform:scaleX(1.24)}}@keyframes radioTalk{to{transform:scale(1.16);filter:drop-shadow(0 0 5px #f06436)}}@keyframes driverKneel{to{transform:translateY(8px) rotate(-9deg)}}@keyframes tireTurn{to{transform:rotate(360deg)}}@keyframes toolBob{to{transform:translateY(-8px) rotate(10deg)}}@keyframes messageBlink{50%{opacity:.3}}@media(max-width:760px){.driver-action{left:7%;bottom:55px;transform:scale(.83);transform-origin:left bottom}.driver-action.inspect,.driver-action.camera,.driver-action.mechanic,.driver-action.chains{left:48%}.driver-action.tire{left:35%;bottom:28px}.driver-action.wipers{left:26%}}@media(prefers-reduced-motion:reduce){.driver-action span{animation:none!important}}