/* km510.info — Jalan tol wayfinding: gantry-green signs, retroreflective white borders, kilometre posts, asphalt lanes. */
:root{
 --paper:#ebe9e3;--paper-2:#f4f3ee;--card:#fbfaf6;--ink:#171b19;--ink-2:#2c332f;--muted:#4c5550;--rule:#cdcac0;
 --sign:#0b6446;--sign-2:#084e37;--sign-3:#0e7a54;--brown:#5a3b25;--yellow:#f2c314;--red:#c0321e;
 --asphalt:#1d2220;--asphalt-2:#272d2a;--on-dark:#eeece5;--on-dark-2:#b9c0bb;
 --font-head:"Overpass",system-ui,sans-serif;--font-body:"Atkinson Hyperlegible",system-ui,sans-serif;--font-mono:"Overpass Mono",ui-monospace,monospace;
 --gut:16px;--max:1240px;--hdr:64px;
 --primary:var(--sign);--accent:var(--yellow);--surface:var(--card);--text:var(--ink);--muted-c:var(--muted)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.68 var(--font-body);text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--sign)}
a:hover{color:var(--sign-2)}
:focus-visible{outline:3px solid var(--sign);outline-offset:3px;border-radius:4px}
.gantry :focus-visible,.lane :focus-visible,.foot :focus-visible,.routesign :focus-visible,.exits :focus-visible,.dsign:focus-visible{outline-color:var(--yellow)}
p{text-wrap:pretty}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);text-wrap:balance}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:768px){:root{--gut:28px}}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--yellow);color:var(--ink);font:800 16px/1 var(--font-head);padding:14px 18px;border-radius:8px;text-decoration:none}
.skip:focus{top:10px}
.arw{width:1em;height:1em;flex:none}

/* ---------- kilometre post ---------- */
.kmpost{display:inline-grid;grid-template-rows:auto 1fr;width:36px;height:46px;flex:none;border-radius:18px 18px 4px 4px;overflow:hidden;background:#f8f7f2;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18),0 2px 0 rgba(0,0,0,.18);text-align:center}
.kmpost b{display:block;background:var(--red);color:#fff;font:800 9px/1 var(--font-head);letter-spacing:.06em;padding:7px 0 3px}
.kmpost i{display:grid;place-items:center;font:700 13px/1 var(--font-mono);font-style:normal;color:var(--ink);letter-spacing:-.02em}
.kmpost-sm{width:30px;height:38px}
.kmpost-sm b{font-size:8px;padding-top:6px}.kmpost-sm i{font-size:11px}
.kmpost-xl{width:128px;height:196px;border-radius:64px 64px 8px 8px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.14),14px 14px 0 -2px rgba(23,27,25,.12)}
.kmpost-xl b{font-size:30px;padding:30px 0 12px}
.kmpost-xl i{font-size:44px;align-self:start;padding-top:22px}

/* ---------- gantry header ---------- */
.gantry{position:sticky;top:0;z-index:50;background:var(--sign);color:#fff;box-shadow:0 3px 0 #9aa49f,0 6px 14px -6px rgba(0,0,0,.35)}
.gantry-in{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--hdr);padding-block:8px}
.gantry-in::before{content:"";position:absolute;inset:5px calc(var(--gut) - 10px);border:2px solid rgba(255,255,255,.92);border-radius:10px;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-height:44px;flex:none}
.brand:hover{color:#fff}
.brand-t{display:grid;line-height:1}
.bn{font:900 22px/1 var(--font-head);letter-spacing:-.01em}
.bt{font:600 11px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.86;margin-top:4px}
.lsw{order:1;margin-left:auto;display:flex;gap:4px}
.lsw a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 6px;border-radius:7px;color:#fff;text-decoration:none;font:700 13px/1 var(--font-mono);letter-spacing:.06em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.lsw a:hover{box-shadow:inset 0 0 0 2px #fff;color:#fff}
.lsw a[aria-current]{background:#fff;color:var(--sign);box-shadow:none}
.lsw-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-btn{order:2;display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:7px;background:#fff;color:var(--sign);font:800 15px/1 var(--font-head);cursor:pointer}
.mb-i{display:grid;gap:4px;width:18px}
.mb-i i{display:block;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.is-open .mb-i i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.is-open .mb-i i:nth-child(2){opacity:0}
.is-open .mb-i i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:419px){.mb-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.menu-btn{padding:0 13px}.bn{font-size:20px}.bt{letter-spacing:.08em}}
.nav{display:none}
.g-play{display:none}
@media (max-width:979px){
 .gantry.is-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;margin-top:3px;background:var(--sign-2);padding:6px var(--gut) 18px;box-shadow:0 18px 30px -12px rgba(0,0,0,.45);max-height:calc(100dvh - var(--hdr) - 3px);overflow-y:auto}
 .nav a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:8px 2px;border-bottom:1.5px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;font:700 19px/1.25 var(--font-head)}
 .nav a .arw{width:20px;height:20px;opacity:.8}
 .nav a[aria-current]{color:var(--yellow);box-shadow:inset 4px 0 0 var(--yellow);padding-left:14px}
 .nav .nav-play{margin-top:16px;border:0;border-radius:9px;background:var(--yellow);color:var(--ink);padding:10px 16px;box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 5px var(--ink)}
 .nav .nav-play:hover{color:var(--ink)}
}
@media (min-width:980px){
 :root{--hdr:72px}
 .gantry-in{gap:14px}
 .menu-btn{display:none}
 .nav{order:1;display:flex;margin-left:auto;gap:2px}
 .nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 11px;border-radius:6px;color:#fff;text-decoration:none;font:700 15.5px/1.2 var(--font-head);white-space:nowrap}
 .nav a .arw{width:13px;height:13px;opacity:.6}
 .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
 .nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--yellow)}
 .nav .nav-play{display:none}
 .lsw{order:2;margin-left:4px}
 .bn{font-size:24px}
}
@media (min-width:1180px){
 .g-play{order:3;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--yellow);color:var(--ink);text-decoration:none;font:800 15px/1 var(--font-head);white-space:nowrap}
 .g-play:hover{color:var(--ink);background:#ffd43a}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:9px;font:800 17px/1.2 var(--font-head);text-decoration:none;text-align:center;border:0;cursor:pointer}
.btn-y{background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 5px var(--ink)}
.btn-y:hover{background:#ffd43a;color:var(--ink)}
.btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-k{background:var(--ink);color:#fff}
.btn-k:hover{background:var(--sign-2);color:#fff}

/* ---------- home hero ---------- */
.hero{position:relative}
.hero-home{background:radial-gradient(120% 90% at 100% 0%,rgba(11,100,70,.07),transparent 55%),var(--paper)}
.hero-grid{display:grid;gap:34px;padding-block:30px 44px}
.plate-badge{display:inline-flex;margin:0;padding:6px 11px 5px;border-radius:6px;background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font:700 12.5px/1.35 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.hero h1{margin:.45em 0 .35em;font-weight:900;font-size:clamp(34px,6.4vw,66px);line-height:1.02;letter-spacing:-.018em;max-width:19ch}
.lead p{margin:0;font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 12px 6px 11px;background:var(--card);border-radius:4px;box-shadow:inset 4px 0 0 var(--sign),0 0 0 1px var(--rule);font:600 14px/1.35 var(--font-head);color:var(--ink-2)}
.routesign{position:relative;align-self:start;container:rs/inline-size;background:var(--sign);color:#fff;border-radius:14px;padding:10px 8px 12px;margin-bottom:44px;box-shadow:0 2px 0 var(--sign-2),0 24px 36px -26px rgba(0,0,0,.55)}
.routesign::before{content:"";position:absolute;inset:6px;border:2px solid #fff;border-radius:10px;pointer-events:none}
.routesign::after{content:"";position:absolute;left:18%;right:18%;top:100%;height:44px;background:linear-gradient(90deg,#8d9792 0 12px,transparent 12px calc(100% - 12px),#8d9792 calc(100% - 12px));pointer-events:none}
.rs-top{display:flex;align-items:center;gap:10px;padding:10px 14px 10px;font:700 12.5px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.rs-row{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:12px;min-height:56px;margin-inline:6px;padding:9px 10px;border-top:2px solid rgba(255,255,255,.3);color:#fff;text-decoration:none;font:800 19px/1.2 var(--font-head)}
.rs-row .arw{width:28px;height:28px}
.rs-row:hover{background:var(--sign-2);color:#fff}
.rs-row.rs-play{color:var(--yellow)}
.rs-row.rs-play:hover{color:var(--yellow)}
@media (max-width:699px){.hero-home .routesign{display:none}.hero-grid{padding-block:26px 36px}}
@container rs (min-width:420px){.rs-row{font-size:21px;min-height:60px}}
@media (min-width:980px){
 .hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr);gap:56px;align-items:center;padding-block:52px 66px}
}

/* ---------- play lane ---------- */
.lane{position:relative;background:var(--asphalt);color:var(--on-dark);padding-block:34px 46px;scroll-margin-top:var(--hdr)}
.lane::before,.lane::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.lane::before{top:0;height:12px;background:linear-gradient(#e9e6dc 0 4px,transparent 4px)}
.lane::after{bottom:16px;height:5px;background:repeating-linear-gradient(90deg,var(--yellow) 0 46px,transparent 46px 82px)}
.lane.moving::after{animation:dash .7s linear infinite}
@keyframes dash{to{background-position:-82px 0}}
.lane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.lane-t{margin:0;color:#fff;font-weight:800;font-size:clamp(22px,3vw,30px);line-height:1.15}
.demo-tag{flex:none;padding:5px 9px 4px;border-radius:4px;background:var(--yellow);color:var(--ink);font:700 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.console{container:pl/inline-size;background:#141816;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 24px 40px -24px rgba(0,0,0,.7)}

/* ---------- body: article + exits ---------- */
.body{display:grid;gap:30px;padding-block:40px 60px}
.content{min-width:0;counter-reset:sec;max-width:760px}
.content>:first-child,.content .intro-extra>:first-child{margin-top:0}
.content p{margin:0 0 1.05em}
.content strong{font-weight:700;color:var(--ink)}
.content a{text-decoration-thickness:1.5px;text-underline-offset:3px}
.plate{counter-increment:sec;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin:1.9em 0 .7em;font-size:clamp(24px,3.1vw,32px);font-weight:800;line-height:1.14;letter-spacing:-.01em;scroll-margin-top:calc(var(--hdr) + 16px)}
.plate::before{content:counter(sec,decimal-leading-zero);display:grid;place-items:center;min-width:44px;height:38px;margin-top:-.08em;padding:3px 6px 0;border-radius:7px;background:var(--sign);color:#fff;font:700 16px/1 var(--font-mono);box-shadow:inset 0 0 0 2.5px var(--sign),inset 0 0 0 4.5px #fff}
.plate-q::before{content:"?";background:var(--yellow);color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--yellow),inset 0 0 0 4.5px var(--ink);font-family:var(--font-head);font-weight:900;font-size:20px}
.content h2.plate:first-child{margin-top:0}
.content h3{margin:1.6em 0 .5em;font-size:21px;font-weight:800;line-height:1.25}
.content ul,.content ol{margin:0 0 1.2em;padding:0;list-style:none}
.content li{position:relative;margin:.5em 0}
.content ul>li{padding-left:28px}
.content ul>li::before{content:"";position:absolute;left:4px;top:.5em;width:10px;height:10px;transform:rotate(45deg);background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.content ol{counter-reset:step}
.content ol>li{counter-increment:step;padding-left:46px;min-height:32px}
.content ol>li::before{content:counter(step);position:absolute;left:0;top:.05em;width:32px;height:30px;display:grid;place-items:center;padding-top:2px;border-radius:6px;background:var(--ink);color:#fff;font:700 14px/1 var(--font-mono)}
.content code{font:500 .9em var(--font-mono);background:var(--paper-2);padding:1px 5px;border-radius:4px}
.tbl{overflow-x:auto;margin:1.2em 0 1.5em;border-radius:10px;box-shadow:0 0 0 2px var(--ink);background:var(--card)}
.tbl table{width:100%;min-width:480px;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.tbl th{background:var(--sign);color:#fff;text-align:left;font:700 14.5px/1.3 var(--font-head);padding:12px}
.tbl td{padding:11px 12px;border-top:1px solid var(--rule);vertical-align:top}
.faq{margin-top:2.4em}
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:14px;align-items:center;min-height:58px;padding:14px 2px;cursor:pointer;list-style:none;font:700 18.5px/1.35 var(--font-head);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:30px;height:30px;border-radius:6px;background:linear-gradient(currentColor,currentColor) center/14px 2.5px no-repeat,linear-gradient(currentColor,currentColor) center/2.5px 14px no-repeat,var(--yellow);color:var(--ink);transition:transform .2s}
.faq details[open] summary i{transform:rotate(45deg);background-color:var(--ink);color:var(--yellow)}
.faq summary:hover span{text-decoration:underline;text-decoration-color:var(--sign);text-underline-offset:4px}
.faq .ans{padding:0 44px 16px 2px;color:var(--ink-2)}
.cta{margin-top:44px;padding:24px;border-radius:12px;background:var(--yellow);box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 5px var(--ink);display:grid;gap:16px;justify-items:start}
.cta p{margin:0;font:700 19px/1.4 var(--font-head);color:var(--ink);max-width:52ch}
.side{min-width:0}
.side-in{display:grid;gap:20px}
.exits{position:relative;background:var(--sign);color:#fff;border-radius:12px;padding:14px 12px 12px}
.exits::before{content:"";position:absolute;inset:5px;border:2px solid #fff;border-radius:8px;pointer-events:none}
.exits-t{margin:4px 8px 8px;color:#fff;font:700 12.5px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.exits ol{list-style:none;margin:0;padding:0;counter-reset:x}
.exits li{counter-increment:x}
.exits a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;min-height:46px;padding:7px 8px;border-top:1.5px solid rgba(255,255,255,.24);color:#fff;text-decoration:none;font:600 15.5px/1.3 var(--font-head)}
.exits a::before{content:counter(x);display:grid;place-items:center;height:22px;padding-top:2px;border-radius:4px;background:#fff;color:var(--sign);font:700 12px/1 var(--font-mono)}
.exits a:hover{background:var(--sign-2);color:#fff}
.exits a[aria-current]{color:var(--yellow)}
.exits a[aria-current]::before{background:var(--yellow);color:var(--ink)}
.demo-card{padding:20px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.demo-card strong{display:block;font:800 20px/1.2 var(--font-head)}
.demo-card p{margin:8px 0 16px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.demo-card .btn{width:100%}
@media (max-width:1099px){
 .side,.side-in{display:contents}
 .exits{order:-1}
 .demo-card{order:2}
}
@media (min-width:1100px){
 .body{grid-template-columns:minmax(0,1fr) 320px;gap:64px;padding-block:56px 76px}
 .side-in{position:sticky;top:calc(var(--hdr) + 22px)}
}

/* ---------- inner hero ---------- */
.hero-page{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.hp-grid{display:grid;gap:24px;padding-block:18px 26px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 15px/1.2 var(--font-head)}
.crumbs li{display:flex;align-items:center;gap:6px;min-width:0}
.crumbs li+li::before{content:"";width:8px;height:8px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);margin-right:4px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;background:var(--sign);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 3.5px #fff}
.crumbs a:hover{background:var(--sign-2);color:#fff}
.crumbs span{color:var(--muted);padding-block:12px}
.hero-page h1{font-size:clamp(30px,5vw,56px);max-width:22ch;margin:.4em 0 .4em}
.hp-post{display:none}
.road{height:40px;background:repeating-linear-gradient(90deg,var(--yellow) 0 40px,transparent 40px 74px) 0 50%/100% 4px no-repeat,var(--asphalt);box-shadow:inset 0 5px 0 var(--asphalt),inset 0 7px 0 #d7d4ca,inset 0 -5px 0 var(--asphalt),inset 0 -7px 0 #d7d4ca}
@media (min-width:900px){
 .hp-grid{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;padding-block:26px 0}
 .hp-post{display:block;padding-right:18px;align-self:end;margin-bottom:-2px}
 .hp-copy{padding-bottom:34px}
}

/* ---------- related direction signs ---------- */
.more{background:var(--paper-2);border-top:1px solid var(--rule);padding-block:44px 58px}
.more .wrap{container:more/inline-size}
.more-t{margin:0 0 20px;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.15}
.dsigns{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.dsign{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:20px 20px 18px;border-radius:12px;background:var(--sign);color:#fff;text-decoration:none}
.dsign::before{content:"";position:absolute;inset:5px;border:2px solid #fff;border-radius:8px;pointer-events:none}
.dsign strong{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font:800 20px/1.2 var(--font-head)}
.dsign strong .arw{width:24px;height:24px;color:var(--yellow)}
.dsign span{font-size:15.5px;line-height:1.5;color:#dfeae4}
.dsign:hover{background:var(--sign-2);color:#fff}
.dsign.s-responsible-gaming,.dsign.s-about{background:var(--brown)}
.dsign.s-responsible-gaming:hover,.dsign.s-about:hover{background:#472e1c}
.dsign.s-responsible-gaming span,.dsign.s-about span{color:#efe3d8}
@container more (min-width:560px){.dsigns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container more (min-width:980px){.dsigns{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- footer ---------- */
.foot{background:var(--asphalt);color:var(--on-dark-2)}
.lane-edge{height:11px;background:linear-gradient(var(--yellow) 0 3px,transparent 3px 8px,var(--yellow) 8px 11px)}
.foot-grid{display:grid;gap:30px;padding-block:42px 26px}
.brand-foot .bn{color:#fff}
.foot-id p{margin:16px 0 0;font-size:15px;line-height:1.6;max-width:52ch}
.foot-col h2{margin:0 0 8px;color:var(--yellow);font:700 12.5px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col a{display:flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none;font:600 16px/1.3 var(--font-head)}
.foot-col a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:4px}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14.5px}
.age{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 6px var(--red);color:var(--ink);font:900 15px/1 var(--font-head);flex:none}
.age span{padding-top:2px}
.copy{margin-left:auto;font-family:var(--font-mono);font-size:13.5px}
@media (min-width:360px) and (max-width:859px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}.foot-id,.foot-base{grid-column:1/-1}}
@media (min-width:860px){.foot-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px}.foot-base{grid-column:1/-1}}

/* ---------- 404 ---------- */
.nf{display:grid;gap:28px;align-items:center;padding-block:64px 90px}
.nf h1{margin:0 0 .3em;font-size:clamp(32px,6vw,56px);font-weight:900;line-height:1.05}
.nf p{margin:0 0 22px;color:var(--ink-2)}
@media (min-width:700px){.nf{grid-template-columns:auto minmax(0,1fr);gap:56px}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
 .btn,.dsign,.rs-row,.exits a,.g-play{transition:background-color .18s,color .18s,transform .18s}
 .btn:hover,.dsign:hover{transform:translateY(-2px)}
 .hero-home .routesign{animation:swing .45s cubic-bezier(.2,.8,.2,1) both}
 @keyframes swing{from{transform:translateY(-8px)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}