:root{
  --ink:#111111; --ink2:#3b3b3b; --mute:#77736f; --line:#e7e5e1; --bg:#f6f5f2; --card:#ffffff;
  --taupe:#5d5753; --ok:#1f7a4d; --err:#b3261e; --focus:#111;
  --r:14px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.06);
  --h:"League Spartan",system-ui,sans-serif; --b:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--b);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,calc((100vw - 1120px)/2));background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1000}
.brand img{height:62px;width:auto}
.call{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}

.wrap{max-width:1120px;margin:0 auto;padding:28px 16px 40px}
.intro h1{font:800 clamp(34px,6vw,54px)/1 var(--h);letter-spacing:-.02em;margin:0 0 10px}
.intro p{margin:0 0 26px;color:var(--ink2);max-width:640px;font-size:17px}
.paused{background:#fff4d6;border:1px solid #f0dc9c;color:#6b5200;padding:14px 16px;border-radius:var(--r);margin-bottom:18px}

.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;align-items:start}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 24px 24px}
.side{position:sticky;top:96px;display:grid;gap:16px}

fieldset{border:0;margin:0;padding:22px 0 22px;border-bottom:1px solid var(--line);min-width:0}
fieldset:last-of-type{border-bottom:0}
legend{float:left;width:100%;font:700 21px/1 var(--h);display:flex;align-items:center;gap:10px;padding:0;margin:0 0 16px}
legend + *{clear:both}
legend .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:700 14px/1 var(--b)}
label{display:block;font-weight:500;font-size:14px;margin:0 0 6px;color:var(--ink2)}
label em{font-style:normal;color:var(--mute);font-weight:400}
.sublabel{margin-top:16px}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=time],input[type=number],input[type=password],textarea,select{
  width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;outline:none;transition:border-color .15s;font-size:16px}
input[type=date],input[type=time]{appearance:none;-webkit-appearance:none}
textarea{resize:vertical;min-height:84px}
input:focus,textarea:focus,select:focus{border-color:var(--focus)}
input.bad{border-color:var(--err)}
.err{color:var(--err);font-size:13px;margin:6px 0 0;min-height:0}
.err:empty{display:none}
.err.big{font-size:15px;text-align:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.row2 + .row2{margin-top:0}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.route{display:grid;grid-template-columns:18px 1fr 40px;gap:12px;align-items:stretch}
.dots{display:flex;flex-direction:column;align-items:center;padding:42px 0 22px}
.dots i{display:block}
.dots .a{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.dots .b{width:12px;height:12px;border-radius:2px;border:3px solid var(--ink)}
.dots .line{flex:1;width:2px;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 8px);margin:4px 0}
.fields{display:grid;gap:12px;min-width:0}
.swap{align-self:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-size:18px}
.swap:hover{border-color:var(--ink)}
.inline{display:flex;gap:8px}
.inline input{flex:1;min-width:0}
.ac{position:relative}
.sugg{position:absolute;z-index:1200;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.14);max-height:320px;overflow:auto}
.sugg li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:8px;cursor:pointer}
.sugg li.on,.sugg li:hover{background:var(--bg)}
.sugg b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.sugg small{color:var(--mute);font-size:12px}
.sugg .ic{width:18px;flex:none;text-align:center;color:var(--taupe);font-size:12px;padding-top:3px}

button.primary,a.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;transition:transform .1s,opacity .15s}
button.primary:active{transform:scale(.99)}
button.primary:disabled{opacity:.55;cursor:wait}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 16px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-weight:500;white-space:nowrap;text-decoration:none}
.ghost:hover{border-color:var(--ink)}
.ghost.sm{font-size:14px;padding:0 12px}

.stepper{border:1.5px solid var(--line);border-radius:10px;padding:8px 8px 8px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}
.stepper .lbl{font-weight:500;color:var(--ink2);font-size:15px}
.stepper div{display:flex;align-items:center;gap:4px}
.stepper button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:20px;line-height:1;cursor:pointer}
.stepper button:hover{border-color:var(--ink)}
.stepper output{min-width:28px;text-align:center;font-weight:700;font-size:18px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label,.seg label{margin:0;cursor:pointer}
.chips input,.seg input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink);background:#fff}
.chips input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chips input:focus-visible + span,.seg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 8px;border:1.5px solid var(--line);border-radius:10px;font-weight:500;font-size:15px;text-align:center;background:#fff;color:var(--ink)}
.seg input:checked + span{border-color:var(--ink);background:var(--ink);color:#fff}
.toggle{display:flex;align-items:center;gap:10px;margin-top:16px;cursor:pointer;color:var(--ink)}
.toggle input{width:20px;height:20px;accent-color:var(--ink)}
#otherBox{margin-top:12px}
#notes{margin-bottom:6px}
.seg + .err + label{margin-top:16px}

.submit{padding-top:20px}
.fine{color:var(--mute);font-size:13.5px;text-align:center;margin:10px 0 0}

.mapbox{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow);position:relative}
#map{height:380px;background:#eceae5}
.mapinfo{padding:14px 16px;font-size:14px;color:var(--ink2);border-top:1px solid var(--line)}
.mapinfo b{color:var(--ink);font-size:16px}
.pin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--b);color:#fff;background:var(--ink);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pin.b{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:6px}
.leaflet-container{font-family:var(--b)}
.leaflet-tile-pane{filter:grayscale(.85) contrast(1.05) brightness(1.04)}

.perks{list-style:none;margin:0;padding:6px 18px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow)}
.perks li{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.perks li:last-child{border-bottom:0}
.perks b{font:700 17px/1.2 var(--h)}
.perks span{color:var(--mute);font-size:14px}

.mobile-only{display:none}
.done{max-width:560px;margin:0 auto;padding:40px 16px}
.done .card{padding:32px 24px;text-align:center}
.tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:30px}
.done h2{font:800 34px/1 var(--h);margin:0 0 10px}
.done p{color:var(--ink2);margin:0 0 20px}
.recap{text-align:left;border:1px solid var(--line);border-radius:12px;padding:6px 16px;margin-bottom:20px}
.recap div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.recap div:last-child{border-bottom:0}
.recap span{color:var(--mute);flex:none}
.recap b{text-align:right;font-weight:500}
.actions{display:grid;gap:10px}
.foot{text-align:center;color:var(--mute);font-size:13px;padding:10px 16px 40px}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .side{position:static}
  .side .mapbox{display:none}
  .mobile-only{display:block;margin-top:14px}
  .mobile-only #map{height:240px}
}
@media (max-width:560px){
  .brand img{height:44px}
  .call{padding:9px 13px;font-size:14px}
  .call .num{display:none}
  .wrap{padding-top:20px}
  .card{padding:2px 16px 18px}
  .row2{grid-template-columns:1fr;gap:12px}
  .route{grid-template-columns:14px 1fr 36px;gap:8px}
  .swap{width:36px;height:36px}
  .ghost.sm .t{display:none}
  .seg span{font-size:14px}
}
a.ghost{color:var(--ink)}