/* Layout: sticky header → hero (headline + live quote card over an animated M20 road) → departures-board fares with vehicle tabs → fleet → Kent route signs → booking steps → FAQ. Route, business and driver pages are hash views in this one file. */
/* Fonts are self-hosted (Latin subset from Google Fonts, SIL Open Font License) so text isn't held up by a third-party stylesheet. */
@font-face{font-family:"Archivo"; src:url(fonts/archivo.woff2) format("woff2"); font-weight:400 900; font-stretch:62% 125%; font-display:swap}
@font-face{font-family:"Hanken Grotesk"; src:url(fonts/hanken-grotesk.woff2) format("woff2"); font-weight:400 700; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url(fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight:500; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url(fonts/ibm-plex-mono-600.woff2) format("woff2"); font-weight:600; font-display:swap}
:root{
  --bg:#EDEFEA; --surface:#FFFFFF; --surface-2:#E1E4DC; --ink:#16181C; --ink-2:#4A4F57; --line:#C9CEC4;
  --gold:#EBA912; --gold-hover:#F6B92B; --gold-ink:#1B1406; --gold-text:#875A00;
  --sign:#1B4C9C; --sign-ink:#FFFFFF; --green:#0F6A3A; --route-yellow:#FFD200;
  --plate:#F7C910; --plate-ink:#121316;
  --board:#15171B; --board-cell:#25282E; --board-cell-hi:#30343B; --board-line:#33373E; --board-ink:#F3EFE2; --board-dim:#9A9EA6; --board-amber:#F2B530;
  --err:#B3261E; --ok:#1E7A4C; --link:#1B4C9C;
  --shadow:0 1px 2px rgb(20 24 30 / .06), 0 18px 40px -18px rgb(20 24 30 / .28);
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#101216; --surface:#191C21; --surface-2:#252930; --ink:#ECEDE8; --ink-2:#A4A9B0; --line:#2E333A;
  --gold:#F2B530; --gold-hover:#FFC649; --gold-ink:#1B1406; --gold-text:#F2B530;
  --sign:#2556A8; --green:#0F6A3A;
  --board:#0A0B0D; --board-cell:#1C1E22; --board-cell-hi:#272A30; --board-line:#2A2D33;
  --err:#FF8A80; --ok:#5FD39A; --link:#8DB3FF;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -18px rgb(0 0 0 / .7);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#101216; --surface:#191C21; --surface-2:#252930; --ink:#ECEDE8; --ink-2:#A4A9B0; --line:#2E333A;
  --gold:#F2B530; --gold-hover:#FFC649; --gold-ink:#1B1406; --gold-text:#F2B530;
  --sign:#2556A8; --green:#0F6A3A;
  --board:#0A0B0D; --board-cell:#1C1E22; --board-cell-hi:#272A30; --board-line:#2A2D33;
  --err:#FF8A80; --ok:#5FD39A; --link:#8DB3FF;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -18px rgb(0 0 0 / .7);
  color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--f-body); -webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; line-height:1.02}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--sign); outline-offset:2px; border-radius:4px}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.eyebrow{font:600 12px/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text)}
.h2{font-size:clamp(1.9rem,3.8vw,2.9rem); font-weight:820; font-stretch:112%; letter-spacing:-.01em}
.lead{font-size:1.1rem; color:var(--ink-2); max-width:58ch}
section[id], .view{scroll-margin-top:88px}
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 32px; margin-bottom:32px}
.sec-head > div{display:grid; gap:10px; min-width:0}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; font:650 15px/1 var(--f-body); padding:.9em 1.25em; border-radius:10px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:background .2s, border-color .2s, transform .12s; white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-gold{background:var(--gold); color:var(--gold-ink)}
.btn-gold:hover{background:var(--gold-hover)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:.65em .95em; font-size:14px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn svg{width:18px; height:18px; flex:none}

/* number plate */
.plate{display:inline-flex; align-items:center; background:var(--plate); color:var(--plate-ink); font:800 1em/1 var(--f-display); font-stretch:78%; letter-spacing:.06em; padding:.38em .62em .34em; border-radius:6px; box-shadow:inset 0 0 0 2px rgb(18 19 22 / .85); white-space:nowrap; font-variant-numeric:tabular-nums}

/* header */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex; align-items:center; gap:20px; height:72px; transition:height .2s}
.hdr.scrolled .wrap{height:60px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img{width:31px; height:auto; display:block}
.maplink{justify-self:start; font:600 13px/1.3 var(--f-body); color:var(--link); text-underline-offset:3px}
.maplink:hover{text-decoration-thickness:2px}
.contact-list{display:grid; gap:14px}
.contact-list .lbl{display:block; font:600 11px var(--f-mono); letter-spacing:.14em; color:var(--board-amber); margin-bottom:6px}
.foot-logo{width:200px; height:auto; display:block}
.btn-wa{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-wa:hover{border-color:var(--ink)}
.btn-wa::before{content:""; width:9px; height:9px; border-radius:50%; background:#25D366}
.brand b{display:block; font:900 19px/1 var(--f-display); font-stretch:118%; letter-spacing:.02em}
.brand small{display:block; font:600 10.5px/1.2 var(--f-mono); letter-spacing:.14em; color:var(--ink-2); margin-top:3px}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{font-weight:600; font-size:15px; text-decoration:none; padding:.5em .75em; border-radius:8px; color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); background:var(--surface-2)}
.hdr-cta{display:flex; align-items:center; gap:12px}
.hdr .plate{font-size:17px}
.menu-btn{display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:8px; width:44px; height:40px; cursor:pointer; color:var(--ink)}
@media (max-width:1180px){
  .menu-btn{display:grid; place-items:center}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; background:var(--bg); padding:8px clamp(16px,4vw,32px) 16px; border-bottom:1px solid var(--line); margin:0}
  .nav.open{display:flex}
  .nav a{padding:.8em .5em; font-size:17px}
  .hdr .plate{display:none}
}
@media (max-width:520px){ .hdr-cta .btn{display:none} }

/* hero */
.hero{padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,72px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4vw,56px); align-items:start}
.hero-copy{display:grid; gap:22px; padding-top:clamp(0px,2vw,24px); min-width:0}
.hero h1{font-size:clamp(2.6rem,6vw,4.7rem); font-weight:880; font-stretch:108%; letter-spacing:-.02em; line-height:.95}
.hero h1 em{font-style:normal; background:linear-gradient(transparent 62%, var(--gold) 62% 92%, transparent 92%); padding-inline:.04em}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-facts{display:flex; flex-wrap:wrap; gap:8px 22px; font:500 14px/1.4 var(--f-body); color:var(--ink-2)}
.hero-facts span{display:inline-flex; gap:8px; align-items:center}
.hero-facts span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold)}
.road{width:100%; max-width:620px; height:auto; margin-top:6px}
.road .r-base{stroke:var(--surface-2)}
.road .r-edge{stroke:var(--line)}
.road .r-dash{stroke:var(--gold); stroke-dasharray:14 12; animation:dash 1.1s linear infinite}
.road text{font:600 11px var(--f-mono); letter-spacing:.1em; fill:var(--ink-2)}
.road .rn rect{fill:var(--sign)} .road .rn text{fill:var(--sign-ink); letter-spacing:.04em}
.road .car rect{fill:var(--gold); stroke:var(--ink); stroke-width:1.5}
.road .pin{fill:var(--ink)}
@keyframes dash{to{stroke-dashoffset:-26}}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr} }

/* quote card */
.quote{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:clamp(18px,2.4vw,26px); display:grid; gap:16px; min-width:0}
.q-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.q-head h2{font-size:1.45rem; font-weight:800; font-stretch:110%}
.q-step{font:600 12px var(--f-mono); color:var(--ink-2); letter-spacing:.08em}
.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:var(--surface-2); padding:4px; border-radius:11px}
.seg.two{grid-template-columns:1fr 1fr}
.seg label{display:grid; place-items:center; text-align:center; font:600 13.5px/1.15 var(--f-body); padding:.62em .3em; border-radius:8px; cursor:pointer; color:var(--ink-2); transition:background .18s, color .18s}
.seg input:checked + label{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgb(0 0 0 / .14)}
.seg input:focus-visible + label{outline:3px solid var(--sign); outline-offset:1px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fgrid .full{grid-column:1/-1}
.fld{display:grid; gap:6px; min-width:0}
.fld > label, .fld > .lbl{font:600 13px/1.2 var(--f-body); color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%; font:500 15.5px/1.3 var(--f-body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:9px; padding:.68em .75em; min-height:46px; transition:border-color .15s, background .15s}
.fld textarea{min-height:84px; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--sign); background:var(--surface)}
.fld [aria-invalid="true"]{border-color:var(--err)}
.err{font:600 12.5px/1.3 var(--f-body); color:var(--err)}
.note{font:500 13px/1.4 var(--f-body); color:var(--ink-2); background:var(--surface-2); border-radius:8px; padding:.6em .8em}
.fare-line{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; background:var(--board); color:var(--board-ink); border-radius:12px; padding:12px 16px}
.fare-line span{font:600 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--board-dim)}
.fare-line b{grid-row:span 2; justify-self:end; font:600 30px/1 var(--f-mono); color:var(--board-amber); font-variant-numeric:tabular-nums}
.fare-line b.sm{font-size:15px; font-family:var(--f-body); color:var(--board-ink); text-align:right}
.fare-line small{font-size:13px; color:var(--board-ink)}
.q-actions{display:flex; gap:10px; flex-wrap:wrap}
.q-actions .btn{flex:1}
.q-foot{font-size:13px; color:var(--ink-2)}
@media (max-width:440px){ .seg{grid-template-columns:1fr 1fr} .fgrid{grid-template-columns:1fr} }

/* ticker */
.ticker{background:var(--board); color:var(--board-amber); overflow:hidden; border-block:1px solid var(--board-line)}
.ticker-track{display:flex; width:max-content; animation:tick 60s linear infinite}
.ticker-track span{font:600 13px/1 var(--f-mono); letter-spacing:.14em; padding:14px 0; white-space:nowrap}
.ticker-track i{font-style:normal; color:var(--board-dim); padding-inline:18px}
@keyframes tick{to{transform:translateX(-50%)}}

/* board */
.board{background:var(--board); color:var(--board-ink); border-radius:18px; padding:clamp(16px,3vw,30px); display:grid; gap:18px}
.board-top{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
.board-title{font:600 13px var(--f-mono); letter-spacing:.14em; color:var(--board-amber); display:flex; gap:10px; align-items:center}
.board-title::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--board-amber); animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.board-tabs{display:flex; flex-wrap:wrap; gap:6px}
.board-tabs button{font:600 12.5px/1 var(--f-mono); letter-spacing:.06em; color:var(--board-dim); background:transparent; border:1px solid var(--board-line); border-radius:7px; padding:.65em .85em; cursor:pointer; transition:background .15s, color .15s}
.board-tabs button:hover{color:var(--board-ink)}
.board-tabs button[aria-selected="true"]{background:var(--board-amber); color:var(--board); border-color:var(--board-amber)}
.board{--fs:clamp(13px,1.7vw,19px); --cell:calc(var(--fs) * 1.4); --dest-w:calc(var(--cell) * 11 + 30px)}
.bcols,.brow{display:grid; grid-template-columns:var(--dest-w) 3.6rem 4.6rem 4.6rem 1fr; gap:18px; align-items:center}
.bcols{font:600 11px var(--f-mono); letter-spacing:.14em; color:var(--board-dim); padding-bottom:4px}
.bcols span:last-child,.b-fare{justify-self:end}
.brow{padding-block:11px; border-top:1px solid var(--board-line); text-decoration:none; color:var(--board-ink); font:500 14px var(--f-mono); font-variant-numeric:tabular-nums}
.brow:hover .flap{background:var(--board-cell-hi)}
.brow:focus-visible{outline-color:var(--board-amber)}
.flaps{display:inline-flex; gap:3px}
.flap{position:relative; display:inline-grid; place-items:center; width:var(--cell); height:calc(var(--fs) * 1.75); background:var(--board-cell); border-radius:3px; font:600 var(--fs)/1 var(--f-mono); color:var(--board-ink); transition:background .15s}
.flap::after{content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--board)}
.b-fare .flap{color:var(--board-amber)}
.b-code{color:var(--board-amber)}
.b-mi,.b-time{color:var(--board-dim)}
.board-foot{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:13px; color:var(--board-dim)}
.preview-note{color:var(--board-amber)}
@media (max-width:760px){
  .bcols,.brow{grid-template-columns:var(--dest-w) 1fr; gap:12px}
  .bcols span:nth-child(2),.bcols span:nth-child(3),.bcols span:nth-child(4),.b-code,.b-mi,.b-time{display:none}
}

/* night band */
.night{position:relative; display:grid; align-items:center; min-height:clamp(300px,42vw,560px); background:var(--board); color:var(--board-ink); overflow:hidden}
.night img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 64%; animation:drift 22s ease-in-out infinite alternate}
.night::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--board) 8%, rgb(10 11 13 / .55) 45%, rgb(10 11 13 / 0) 72%)}
.night-copy{position:relative; z-index:1; width:100%; display:grid; gap:14px; padding-block:44px; justify-items:start}
.night-copy .eyebrow{color:var(--board-amber)}
.night-copy h2{font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:860; font-stretch:108%; max-width:15ch; letter-spacing:-.01em}
.night-copy p{color:var(--board-dim); max-width:38ch}
.night-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px}
.night-actions .plate{font-size:20px}
@keyframes drift{from{transform:scale(1)} to{transform:scale(1.07) translateX(-1.5%)}}
@media (max-width:640px){
  .night{display:block; min-height:0}
  .night img{position:relative; height:240px; object-position:60% 66%}
  .night::after{inset:0 0 auto; height:240px; background:linear-gradient(180deg, rgb(10 11 13 / 0) 55%, var(--board))}
  .night-copy{padding-block:8px 40px}
}

/* fleet */
.car-media{aspect-ratio:3/2; max-width:100%; border-radius:9px; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; container-type:inline-size}
.car-media img{width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block}
.car-media span{font:900 11cqi/1 var(--f-display); font-stretch:105%; letter-spacing:.03em; color:var(--ink-2); opacity:.32; text-transform:uppercase}
.fleet-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px}
.car{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:12px; align-content:start; transition:border-color .2s, transform .2s}
.car:hover{border-color:var(--ink); transform:translateY(-2px)}
.car.pulse{animation:pulse 1.2s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--gold)}100%{box-shadow:0 0 0 14px transparent}}
.car h3{font-size:1.35rem; font-weight:820; font-stretch:112%}
.car p{font-size:14px; color:var(--ink-2); min-height:2.8em}
.cap{display:grid; gap:6px}
.cap > span{display:flex; align-items:center; gap:3px; font-size:13px; color:var(--ink-2)}
.cap em{font-style:normal; margin-left:6px}
.i-seat{width:9px; height:9px; border-radius:50%; background:var(--ink); flex:none}
.i-bag{width:8px; height:11px; border-radius:2px; border:1.5px solid var(--ink); flex:none}
.car-from{display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed var(--line); padding-top:10px; font-size:13px; color:var(--ink-2)}
.car-from b{font:600 20px var(--f-mono); color:var(--ink)}

/* services */
.svc{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--ink)}
.svc article{padding:22px 22px 26px 0; display:grid; gap:10px; align-content:start; border-bottom:1px solid var(--line)}
.svc article + article{padding-left:22px; border-left:1px solid var(--line)}
.svc h3{font-size:1.3rem; font-weight:800; font-stretch:110%}
.svc p{font-size:15px; color:var(--ink-2)}
.svc a{font-weight:650; font-size:14.5px; text-decoration-color:var(--gold); text-underline-offset:4px; text-decoration-thickness:2px}
@media (max-width:900px){ .svc{grid-template-columns:1fr 1fr} .svc article:nth-child(3){padding-left:0; border-left:0} }
@media (max-width:520px){ .svc{grid-template-columns:1fr} .svc article + article{padding-left:0; border-left:0} }

/* green route signs */
.signs{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.gsign{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; background:var(--green); color:#fff; text-decoration:none; padding:5px; border-radius:10px; transition:transform .15s}
.gsign > *{position:relative}
.gsign::before{content:""; grid-area:1/1/2/4; border:2px solid #fff; border-radius:7px; height:100%; position:relative}
.gsign .in{grid-area:1/1/2/4; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px}
.gsign:hover{transform:translateY(-2px)}
.rn-y{font:800 15px/1 var(--f-display); font-stretch:90%; color:var(--route-yellow); border:2px solid var(--route-yellow); border-radius:4px; padding:.25em .4em}
.gs-name{font:700 18px/1.1 var(--f-display); font-stretch:96%}
.gs-mi{font:700 20px/1 var(--f-display); font-variant-numeric:tabular-nums}
.signs-cap{margin-top:12px; font-size:13px; color:var(--ink-2)}

/* how */
.how{position:relative}
.how-line{position:absolute; left:0; right:0; top:22px; width:100%; height:6px; overflow:visible}
.how-line path{stroke:var(--gold); stroke-width:3; stroke-dasharray:1; stroke-dashoffset:0; fill:none; transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1)}
.how-line.pending path{stroke-dashoffset:1}
.steps{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; margin:0; padding:0}
.steps li{display:grid; gap:10px; align-content:start}
.steps .n{width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--bg); font:700 17px var(--f-mono); box-shadow:0 0 0 6px var(--bg)}
.steps h3{font-size:1.3rem; font-weight:800; font-stretch:110%; margin-top:6px}
.steps p{color:var(--ink-2); font-size:15px; max-width:34ch}
@media (max-width:760px){ .steps{grid-template-columns:1fr} .how-line{display:none} }

/* split band */
.split{display:grid; grid-template-columns:1.3fr 1fr; gap:14px}
.band{border-radius:18px; padding:clamp(22px,3.4vw,40px); display:grid; gap:14px; align-content:start}
.band.dark{background:var(--board); color:var(--board-ink)}
.band.dark .eyebrow{color:var(--board-amber)}
.band.dark p{color:var(--board-dim)}
.band.light{background:var(--surface); border:1px solid var(--line)}
.band.light p{color:var(--ink-2)}
.band h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:820; font-stretch:110%}
.band .btn{justify-self:start; margin-top:6px}
@media (max-width:820px){ .split{grid-template-columns:1fr} }

/* faq */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,64px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:18px 0; font:700 17px/1.35 var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:500 22px/1 var(--f-mono); color:var(--gold-text); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px; color:var(--ink-2); max-width:62ch}
@media (max-width:820px){ .faq{grid-template-columns:1fr} }

/* route page */
.page-head{padding-block:clamp(24px,4vw,44px) 8px; display:grid; gap:20px}
.back{font:600 14px var(--f-body); color:var(--ink-2); text-decoration:none; justify-self:start}
.back:hover{color:var(--ink)}
.msign{background:var(--sign); color:var(--sign-ink); padding:6px; border-radius:16px; max-width:640px}
.msign.green{background:var(--green)}
.msign .in{border:3px solid var(--sign-ink); border-radius:11px; padding:18px 22px; display:grid; grid-template-columns:1fr auto; gap:10px 20px; align-items:end}
.msign .rns{display:flex; gap:8px; flex-wrap:wrap; grid-column:1/-1}
.msign .rn{font:800 16px/1 var(--f-display); border:2px solid var(--sign-ink); border-radius:5px; padding:.28em .45em}
.msign.green .rn{color:var(--route-yellow); border-color:var(--route-yellow)}
.msign .dest{font:800 clamp(2rem,6vw,3.4rem)/1 var(--f-display); font-stretch:96%}
.msign .dist{font:800 clamp(1.8rem,5vw,2.8rem)/1 var(--f-display); font-variant-numeric:tabular-nums}
.route-h1{font-size:clamp(2rem,4.6vw,3.4rem); font-weight:860; font-stretch:108%; letter-spacing:-.015em}
.route-body{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(24px,4vw,48px); padding-block:24px 80px}
.vfares{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.vfare{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:10px}
.vfare-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.vfare h3{font-size:1.15rem; font-weight:800; font-stretch:110%}
.vfare .price{font:600 24px var(--f-mono); font-variant-numeric:tabular-nums}
.vfare small{color:var(--ink-2); font-size:13px}
.facts{display:grid; gap:0; align-content:start; border-top:2px solid var(--ink)}
.facts div{display:grid; gap:4px; padding:14px 0; border-bottom:1px solid var(--line)}
.facts dt{font:600 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.facts dd{margin:0; font-weight:600}
.facts dl{margin:0}
.route-body h2{font-size:1.5rem; font-weight:800; font-stretch:110%; margin-bottom:14px}
.prose{display:grid; gap:14px; color:var(--ink-2); max-width:62ch; margin-top:28px}
@media (max-width:860px){ .route-body{grid-template-columns:1fr} }

/* forms pages */
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); padding-block:28px 88px; align-items:start}
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:2px solid var(--ink)}
.ticks li{display:grid; grid-template-columns:28px 1fr; gap:10px; padding:16px 0; border-bottom:1px solid var(--line)}
.ticks li::before{content:""; width:18px; height:18px; margin-top:3px; border-radius:50%; background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%231B1406' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ticks b{display:block}
.ticks span{color:var(--ink-2); font-size:15px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(18px,2.6vw,28px); display:grid; gap:16px; box-shadow:var(--shadow)}
.panel h2{font-size:1.4rem; font-weight:800; font-stretch:110%}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.checks label{display:inline-flex; gap:8px; align-items:center; border:1.5px solid var(--line); border-radius:9px; padding:.55em .8em; font-weight:600; font-size:14px; cursor:pointer}
.checks input{accent-color:var(--gold)}
@media (max-width:860px){ .two-col{grid-template-columns:1fr} }

/* footer */
.foot{background:var(--board); color:var(--board-ink); padding-block:56px 32px; margin-top:24px}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
.foot .brand small{color:var(--board-dim)}
.foot h3{font:600 11px var(--f-mono); letter-spacing:.14em; color:var(--board-amber); margin-bottom:12px; text-transform:uppercase}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.foot a{color:var(--board-ink); text-decoration:none}
.foot a:hover{color:var(--board-amber)}
.foot a.plate, .foot a.plate:hover{color:var(--plate-ink)}
.foot p{color:var(--board-dim); font-size:15px}
.foot .plate{font-size:22px}
.copyrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.copybtn{font:600 12.5px var(--f-mono); letter-spacing:.06em; background:transparent; border:1px solid currentColor; color:inherit; border-radius:7px; padding:.5em .7em; cursor:pointer; opacity:.8}
.copybtn:hover{opacity:1}
.foot-base{margin-top:40px; padding-top:20px; border-top:1px solid var(--board-line); font-size:13px; color:var(--board-dim); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1/-1} }

/* mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgb(0 0 0 / .25)}
  .mbar .btn{padding:.85em .5em}
  body{padding-bottom:76px}
}

/* sheet */
.sheet{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgb(10 11 13 / .55); animation:fade .2s ease-out}
.sheet-card{width:min(560px,100%); max-height:calc(100% - 32px); overflow:auto; background:var(--surface); color:var(--ink); border-radius:18px; padding:clamp(18px,3vw,28px); display:grid; gap:14px; box-shadow:var(--shadow); animation:rise .28s cubic-bezier(.2,.8,.2,1)}
.sheet-card h2{font-size:1.5rem; font-weight:820; font-stretch:110%}
.sheet-card p{color:var(--ink-2); font-size:15px}
.sheet-card textarea{width:100%; min-height:220px; font:500 13.5px/1.5 var(--f-mono); color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:12px; resize:vertical}
.sheet-actions{display:flex; flex-wrap:wrap; gap:10px}
.sheet-actions .btn{flex:1}
.sheet-x{justify-self:end; background:none; border:none; color:var(--ink-2); font:600 14px var(--f-body); cursor:pointer; padding:6px}
.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:70; background:var(--ink); color:var(--bg); font:600 14px var(--f-body); padding:.7em 1.1em; border-radius:999px; animation:rise .2s ease-out}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(12px)}}
.toast{animation:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .ticker-track{animation:none}
}

/* ===== multi-page site additions ===== */
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--gold); color:var(--gold-ink); padding:.6em 1em; border-radius:8px; font-weight:700; text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
a.plate{text-decoration:none; transition:transform .12s}
a.plate:hover{transform:translateY(-1px)}
.plate-lg{font-size:22px}
.opt{font-weight:500}
.q-step-body{display:grid; gap:14px}
.lead-narrow{max-width:40ch}
.sec-tight{padding-top:0}
.faq-head{display:grid; gap:12px; align-content:start}
.car-media picture{display:block; width:100%; height:100%}
.night picture{position:absolute; inset:0}
.fare-gap{margin-bottom:14px}
.note-gap{margin-top:12px}
.aside-cta{display:grid; gap:10px; margin-top:20px}
.aside-cta .btn{white-space:normal; text-align:center}
.prose h2{color:var(--ink); margin:0}
.stack{display:grid; gap:20px; align-content:start}
.h3{font-size:1.4rem; font-weight:800; font-stretch:110%}
fieldset.fld{border:0; padding:0; margin:0; min-width:0}
legend.lbl{font:600 13px/1.2 var(--f-body); color:var(--ink-2); padding:0; margin-bottom:6px}
.consent{font-size:13px; color:var(--ink-2)}
.consent a{color:var(--link)}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.btn[aria-busy="true"]{cursor:progress; opacity:.75}
.sheet-status{justify-self:start; font:600 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:.55em .8em; border-radius:999px}
.sheet-status.ok{background:var(--ok); color:var(--surface)}
.sheet-status.warn{background:var(--gold); color:var(--gold-ink)}
.sheet-details summary{cursor:pointer; font-weight:650; font-size:14px; color:var(--ink-2); padding:4px 0 10px}
.foot .foot-h{font:600 11px var(--f-mono); letter-spacing:.14em; color:var(--board-amber); margin:0 0 12px; text-transform:uppercase}
.foot-map{color:var(--board-amber)!important}
.legal{max-width:72ch; padding-block:8px 88px; display:grid; gap:10px}
.legal h2{font-size:1.25rem; font-weight:800; font-stretch:110%; margin-top:16px}
.legal p{color:var(--ink-2)}
.nf{padding-bottom:96px}
@media (max-width:640px){
  .night picture{position:relative; display:block; inset:auto}
  .hero-actions .plate-lg{font-size:19px}
}
@media (max-width:380px){
  .q-actions .btn{flex-basis:100%}
  .hero-actions .btn{flex:1 1 auto}
}
.car{display:flex; flex-direction:column; gap:12px}
.car > .btn{margin-top:auto}
.cap > span{flex-wrap:wrap; row-gap:4px}
.cap em{white-space:nowrap}
.vfare{display:flex; flex-direction:column; gap:10px}
.vfare > .btn{margin-top:auto}
@media (max-width:1180px){ .hdr-cta{margin-left:auto} .menu-btn{margin-left:0} }

/* ===== blog ===== */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.post-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s}
.post-card:hover{border-color:var(--ink); transform:translateY(-2px)}
.post-media{aspect-ratio:3/2; max-width:100%; background:var(--surface-2); overflow:hidden}
.post-media picture,.post-media img{display:block; width:100%; height:100%; object-fit:cover}
.post-body{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1}
.post-body h3{font-size:1.2rem; font-weight:800; font-stretch:106%; line-height:1.15}
.post-body p{font-size:14.5px; color:var(--ink-2)}
.post-meta{font:600 11.5px/1.3 var(--f-mono)!important; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-text)!important}
.post-more{margin-top:auto; padding-top:6px; font-weight:650; font-size:14px; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; text-decoration-thickness:2px}
.blog-wrap{padding-block:16px 88px}
.blog-empty{color:var(--ink-2); padding:24px 0}
.article{max-width:820px; padding-block:clamp(24px,4vw,44px) 40px; display:grid; gap:22px}
.article-head{display:grid; gap:14px}
.article-hero{border-radius:16px; overflow:hidden; aspect-ratio:3/2; max-width:100%; background:var(--surface-2)}
.article-hero picture,.article-hero img{display:block; width:100%; height:100%; object-fit:cover}
.article-body{font-size:1.075rem; line-height:1.7; max-width:68ch; display:grid; gap:16px; min-width:0}
.article-body h2{font-size:1.55rem; font-weight:820; font-stretch:108%; margin-top:14px}
.article-body h3,.article-body h4{font-size:1.2rem; font-weight:800; margin-top:8px}
.article-body ul,.article-body ol{margin:0; padding-left:1.3em; display:grid; gap:8px}
.article-body a{color:var(--link); text-underline-offset:3px}
.article-body blockquote{margin:0; padding:4px 0 4px 18px; border-left:3px solid var(--gold); color:var(--ink-2)}
.article-body figure{margin:0; display:grid; gap:8px}
.article-body figure img{border-radius:12px; width:100%; height:auto}
.article-body figcaption{font-size:13px; color:var(--ink-2)}
.article-body hr{border:0; border-top:1px solid var(--line); margin:8px 0}
.article-body pre{overflow-x:auto; background:var(--surface-2); padding:14px; border-radius:10px; font:14px/1.5 var(--f-mono)}
.article-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px}
.article-gallery img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px}
.table-wrap{overflow-x:auto}
.table-wrap table{border-collapse:collapse; min-width:100%}
.table-wrap td{border:1px solid var(--line); padding:8px 10px; vertical-align:top}
.article-cta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; background:var(--board); color:var(--board-ink); border-radius:16px; padding:clamp(20px,3vw,30px); margin-top:10px}
.article-cta > div{display:grid; gap:8px; min-width:0; flex:1 1 280px}
.article-cta .eyebrow{color:var(--board-amber)}
.article-cta h2{font-size:1.5rem; font-weight:820; font-stretch:108%}
.article-cta p{color:var(--board-dim)}
.more-posts{padding-block:8px 88px; display:grid; gap:18px}
@media (max-width:1300px) and (min-width:1181px){ .nav a{padding:.5em .55em; font-size:14.5px} }
.nav a{white-space:nowrap}

/* ===== route FAQs + related links ===== */
.qa{margin-top:34px; display:grid; gap:0}
.qa h2{font-size:1.5rem; font-weight:800; font-stretch:110%; margin-bottom:12px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font:700 16px/1.35 var(--f-body)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; font:500 22px/1 var(--f-mono); color:var(--gold-text); transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 0 16px; color:var(--ink-2); max-width:62ch}
.related{margin-top:34px}
.related h2{font-size:1.5rem; font-weight:800; font-stretch:110%; margin-bottom:12px}
.related ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.related li{display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface)}
.related a{font-weight:650; color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:3px}
.related li span{font-size:13px; color:var(--ink-2)}