@font-face{font-family:Alexandria;src:url('assets/alexandria.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Dubai;src:local('Dubai Bold');font-weight:700;font-display:swap}
:root{--forest:#123225;--green:#619231;--paper:#f4f6f3;--gray:#5b665f}
*{box-sizing:border-box}
body{margin:0;color:var(--forest);background:var(--paper);font-family:Alexandria,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.page{max-width:1440px;min-height:100svh;margin:0 auto;display:flex;flex-direction:column;padding:0 6%}
.header{height:120px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.logo{width:260px;height:auto;max-width:100%;display:block}
.header-note{font-size:9px;letter-spacing:2px;font-weight:450;color:var(--gray)}
main{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:center;padding:20px 0 35px}
.message{padding:12px 0 20px;position:relative;z-index:1}
p,h1{margin:0}
.status{font-size:9px;line-height:1.7;font-weight:500;letter-spacing:1.6px;display:flex;align-items:center;gap:10px;margin-bottom:29px}
.status>span{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #61923113}
h1{font:700 clamp(62px,6.1vw,92px)/1.02 Dubai,Alexandria,Arial,sans-serif;letter-spacing:-.045em}
h1 span{color:var(--green)}
.announcement{font:700 34px/1.25 Dubai,Alexandria,Arial,sans-serif;letter-spacing:-.025em;margin-top:28px}
.description{font-size:13px;line-height:2;color:var(--gray);font-weight:350;margin-top:17px}
.signature{display:flex;align-items:center;gap:14px;margin-top:42px;font-size:10px;color:var(--gray)}
.signature-line{width:34px;height:2px;background:var(--green);display:block}
.road-scene{height:clamp(360px,calc(100svh - 260px),520px);position:relative;border-radius:12px;background:var(--forest);overflow:hidden;align-self:center}
.road{height:100%;width:100%;display:block;object-fit:cover}
.scene-label{position:absolute;top:29px;left:28px;color:#d8e4ce;font-size:8px;letter-spacing:2px;z-index:1}
.scene-caption{position:absolute;bottom:32px;left:28px;right:28px;display:flex;gap:12px;align-items:center;padding-top:22px;border-top:1px solid #f4f6f32e;color:#e6eddf}
.scene-caption p{font-size:11px;line-height:1.7;font-weight:300}
.scene-caption strong{font-weight:500}
.caption-dot{height:6px;width:6px;flex-shrink:0;background:#a4c27d;border-radius:50%}
footer{min-height:78px;display:flex;align-items:center;gap:18px;border-top:1px solid #d8e0d5;font-size:9px;line-height:1.7;color:var(--gray);padding:20px 0}
.footer-separator{width:3px;height:3px;border-radius:50%;background:#8a9880}
.domain{margin-left:auto;font-size:9px;color:var(--forest)}
@media(min-width:1600px){.page{padding:0 80px}}
@media(max-width:1000px){.header{height:120px}.logo{width:230px}.header-note{font-size:8px;letter-spacing:1.3px}main{gap:6%;grid-template-columns:1.15fr 1fr}.road-scene{height:470px}h1{font-size:66px}.status{font-size:8px;letter-spacing:1.1px}.announcement{font-size:31px}.description{font-size:12px}.desktop-break{display:none}.signature{font-size:9px}.domain{font-size:8px}footer{font-size:8px;gap:14px}}
@media(max-width:700px){.page{padding:0 7%}.header{height:120px;justify-content:center}.logo{width:240px}.header-note{display:none}main{grid-template-columns:1fr;gap:34px;padding:25px 0 38px}.message{padding:0}.status{font-size:8px;letter-spacing:1.3px;margin-bottom:25px}h1{font-size:clamp(51px,11.7vw,75px);line-height:1.08;letter-spacing:-.045em}.announcement{font-size:31px;margin-top:25px}.description{font-size:12px;line-height:1.95;margin-top:15px;max-width:410px}.signature{margin-top:28px;font-size:9px}.signature-line{width:28px}.road-scene{height:230px;width:100%;border-radius:10px}.road{height:570px;width:100%;position:absolute;top:-190px}.scene-label{top:22px;left:22px;font-size:7px}.scene-caption{bottom:22px;left:22px;right:22px;padding-top:17px}.scene-caption p{font-size:10px}.domain{display:block;width:100%;margin:0;font-size:9px}footer{min-height:100px;flex-wrap:wrap;gap:8px 12px;font-size:8px;padding:20px 0}.footer-separator{display:none}footer p{width:100%}}
@media(max-width:360px){.header{height:110px}.logo{width:220px}.status{font-size:7px;letter-spacing:1px}h1{font-size:49px}.description{font-size:11px}.announcement{font-size:29px}}
@media(prefers-reduced-motion:no-preference){.message{animation:appear .7s ease both}.road-scene{animation:appear .8s .1s ease both}.lane-markings{animation:flow 12s linear infinite}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes flow{to{stroke-dashoffset:-100}}}