:root {
  color-scheme: light;
  --ink: #22231f;
  --muted: #d6dae1;
  --surface: #fdfcf8;
  --gold: #f3d78a;
  --gold-strong: #ffdf86;
  --black: #211d17;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 12% 8%, #596370, transparent 56%), #323842;
  color: #fbfaf6;
  font: 16px/1.45 system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid #478fff; outline-offset: 3px; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 3; transform: translateY(-160%); background: var(--black); padding: 10px; }
.skip:focus { transform: none; }
.shell { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.masthead {
  display: flex; align-items: center; gap: 17px;
  margin-top: 24px; margin-bottom: 24px; padding: 17px 22px;
  background: var(--black); border: 1px solid #57472f; border-radius: 21px;
}
.logo { display: grid; place-items: center; flex: 0 0 auto; width: 98px; padding: 9px 5px; border-radius: 10px; background: #fff6df; }
.logo img { width: 100%; height: auto; display: block; }
.brand-copy h1 { margin: 0; color: var(--gold); font-size: clamp(1.12rem, 3vw, 1.65rem); line-height: 1.12; }
.brand-copy p { display: flex; align-items: center; gap: 7px; margin: 5px 0 0; color: #d7cfbf; font-size: .8rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #91dbad; flex: 0 0 auto; }
.nav-link { margin-left: auto; color: var(--gold); font-size: .88rem; font-weight: 650; text-underline-offset: 4px; }
.role-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 25px; }
.role-actions a { display: grid; align-content: center; gap: 2px; padding: 11px 14px; text-decoration: none; line-height: 1.25; }
.role-actions small { font-size: .75rem; font-weight: 650; }
.driver-link { color: var(--gold); background: var(--black); border: 1px solid #82704f; border-radius: 12px; }
.driver-link:hover { border-color: var(--gold); }
.quote { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.quote-heading { grid-column: 1 / -1; }
.quote-heading h2 { margin-bottom: 6px; }
.quote-heading p, .registration-description { margin: 0; color: var(--muted); font-size: .92rem; }
.map-window { position: relative; border: 2px solid #fffbef; border-radius: 19px; overflow: hidden; background: #eae7dc; height: clamp(340px, 42vw, 535px); }
#city-map { width: 100%; height: 100%; isolation: isolate; }
.map-fallback { position: absolute; inset: 50% 12px auto; transform: translateY(-50%); margin: 0; text-align: center; color: #323842; pointer-events: none; }
.map-label { position: absolute; top: 11px; right: 11px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 10px; background: var(--surface); color: #242d37; font-size: .78rem; font-weight: 750; box-shadow: 0 2px 8px #0002; pointer-events: none; }
.map-label .dot { background: #9c6316; }
.map-caption { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: space-between; margin: 8px 2px 0; color: var(--muted); font-size: .8rem; }
.map-caption a, .form-route { color: var(--gold-strong); font-weight: 650; text-underline-offset: 3px; }
form, .form-stack { display: grid; gap: 16px; min-width: 0; }
.form-stack { gap: 13px; }
.field-title { display: block; margin: 0 0 6px; padding: 0; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .075em; }
.field-title span { color: var(--gold); margin-right: 4px; }
fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.location-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
input:not([type="radio"]), select, textarea, .location-row button, .location-row a, .choice span, details, .extra-service {
  background: var(--surface); color: var(--ink); border: 1px solid #cdd0d6; border-radius: 12px;
}
input:not([type="radio"]), select, textarea { min-width: 0; width: 100%; display: block; padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: #666b73; opacity: 1; }
textarea { resize: vertical; min-height: 74px; }
.location-row button, .location-row a { display: grid; place-content: center; padding: 8px 11px; white-space: nowrap; font-size: .81rem; font-weight: 700; text-decoration: none; }
.location-row button:disabled { opacity: .65; cursor: wait; }
.location-status { margin: 0; font-size: .82rem; color: var(--gold); }
.location-status:empty { display: none; }
.form-route { justify-self: start; font-size: .85rem; }
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.zone-picker { grid-column: 1 / -1; width: min(100%, 400px); }
.zone-picker .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zone-picker .choice span { min-height: 44px; }
#trip-options .options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice { position: relative; cursor: pointer; min-width: 0; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span { display: grid; place-content: center; gap: 2px; min-height: 62px; height: 100%; padding: 7px 3px; text-align: center; font-size: .88rem; font-weight: 750; }
.choice small { display: block; color: #52545a; font-size: .71rem; font-weight: 600; }
.choice input:checked + span { background: var(--gold); border-color: #d39c3e; box-shadow: inset 0 0 0 1px #d39c3e; }
.choice input:focus-visible + span { outline: 3px solid #478fff; outline-offset: 2px; }
.payment .choice span { min-height: 45px; font-size: .81rem; }
.payment .choice input:checked + span { background: var(--black); color: var(--gold-strong); }
.hint { margin: 6px 0 0; color: var(--muted); font-size: .76rem; }
details { overflow: clip; }
summary { padding: 12px; cursor: pointer; font-weight: 750; }
summary small, .estimate small { margin-left: 5px; font-size: .74rem; font-weight: 500; }
summary small { color: #93402c; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fields label, .estimate label { display: block; margin-bottom: 4px; font-size: .81rem; font-weight: 650; }
.fields .wide { grid-column: 1 / -1; }
.customer-fields { padding: 0 12px 12px; }
.extra-service { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; }
.extra-service button { border: 0; background: transparent; color: #774505; padding: 5px; text-decoration: underline; }
.estimate { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.estimate small, .estimate span { color: var(--muted); }
.estimate span { font-size: .8rem; }
.estimate output { display: block; color: var(--gold-strong); font-size: 1.4rem; font-weight: 800; }
.primary { min-height: 49px; padding: 10px 15px; border: 1px solid #d39c3e; border-radius: 12px; background: var(--gold); color: #2c210d; font-weight: 800; }
.primary:hover, .location-row a:hover, .location-row button:hover { background: #ffebae; }
.primary span { margin-left: 6px; }
.services, .coverage { border-top: 1px solid #ffffff32; margin-top: 34px; padding-top: 25px; }
.registration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 34px; padding: clamp(16px, 3vw, 26px); background: var(--black); border: 1px solid #82704f; border-radius: 19px; }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 0 0 12px; line-height: 1.15; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.card { text-decoration: none; text-align: left; padding: 12px; border-radius: 12px; background: var(--surface); color: var(--ink); border: 1px solid #cdd0d6; }
.card:hover, .card[aria-pressed="true"] { background: var(--gold); }
.card strong, .card small { display: block; }
.card small { color: #52545a; margin-top: 3px; }
.coverage p:not(.eyebrow) { color: var(--muted); margin: 0 0 10px; }
.coverage ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
.coverage li { background: #262b33; border-radius: 24px; padding: 6px 10px; font-size: .79rem; }
footer { margin-top: 25px; padding: 15px 0 24px; display: flex; flex-wrap: wrap; gap: 8px 15px; justify-content: space-between; border-top: 1px solid #ffffff32; font-size: .82rem; color: var(--muted); }
section[id] { scroll-margin-top: 12px; }
@media (max-width: 760px) {
  .shell { width: min(580px, calc(100% - 30px)); }
  .masthead { margin-top: 16px; margin-bottom: 16px; padding: 13px 12px; gap: 11px; }
  .logo { width: 75px; }
  .nav-link { display: none; }
  .quote { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .role-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registration { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .map-window { height: clamp(205px, 65vw, 340px); }
  .location-row button, .location-row a { padding-inline: 8px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
  .location-row { gap: 5px; }
  .location-row button, .location-row a { padding-inline: 6px; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 475px) {
  #trip-options .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.quote.no-map { grid-template-columns: minmax(0, 540px); justify-content: center; }
.route-hint { margin: 0; }
.location-status:not(:empty) { margin-top: 6px; }
.place-results {
  list-style: none; margin: 5px 0 0; padding: 3px; background: var(--surface);
  border-radius: 12px; max-height: 200px; overflow: auto;
}
.place-results button {
  display: block; width: 100%; min-height: 42px; border: 0; border-radius: 8px;
  color: var(--ink); background: transparent; text-align: left; padding: 8px 10px;
  font-size: .85rem;
}
.place-results button:hover { background: #f9edcc; }
.estimate {
  padding: 12px 14px; align-items: start; gap: 4px 10px;
  border: 1px solid #76654a; border-radius: 12px; background: #282821;
}
.estimate strong { display: block; font-size: 1.15rem; margin-top: 3px; }
.estimate .hint { grid-column: 1 / -1; margin: 0; }
#city-map.leaflet-container { background: #efede4; }

.masthead-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.languages { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
.languages label { font-size: .79rem; font-weight: 700; }
.languages select, .install-button { min-height: 36px; padding: 4px 9px; border-radius: 7px; font-size: .83rem; font-weight: 700; }
.languages select { width: auto; }
.install-button { background: var(--gold); color: var(--black); }
.install-button { border: 1px solid #d39c3e; white-space: nowrap; }
#install-dialog { width: min(440px, calc(100% - 32px)); padding: 22px; border: 1px solid #d39c3e; border-radius: 16px; background: var(--surface); color: var(--ink); }
#install-dialog::backdrop { background: #211d17bb; }
#install-dialog form { justify-content: end; }
@media (max-width: 530px) {
  .masthead { flex-wrap: wrap; }
  .brand-copy { flex: 1 1 150px; }
  .masthead-actions { width: 100%; justify-content: space-between; }
}

#ride-checkout { display: grid; gap: 8px; }
#ride-checkout p, #tracking-note { margin: 0; }
#ride-state, #driver-state { color: var(--gold); font-weight: 700; }
#ride-detail, #job-detail { white-space: pre-line; overflow-wrap: anywhere; }
#tracking-map { height: clamp(230px, 35vw, 350px); border-radius: 12px; overflow: hidden; isolation: isolate; background: #eae7dc; }
#tracking-note { margin-block: 8px; }
.ride-secondary { padding: 8px 12px; color: var(--gold); background: var(--black); border: 1px solid #82704f; border-radius: 9px; font-weight: 650; }
.ride-job { margin-top: 14px; padding: 13px; border: 1px solid #82704f; border-radius: 12px; }
.ride-job p { margin: 6px 0; }
.ride-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#ride-book:disabled { opacity: .55; cursor: default; }

.delivery-shortcut {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px;
  margin-bottom: 22px; padding: 12px 16px; border: 1px solid #94774a;
  border-radius: 12px; background: #2e261b; color: #ffdf96; text-decoration: none;
}
.delivery-shortcut a { font-weight: 750; text-underline-offset: 3px; }
.delivery-shortcut a:hover { color: #fff1d1; }
.delivery-pilot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(20px, 4vw, 46px); margin-block: 36px;
  padding: clamp(20px, 4vw, 40px); border: 1px solid #9d7944; border-radius: 21px;
  background: radial-gradient(ellipse at 0 0, #4a3523, transparent 68%), #211d17;
}
.delivery-intro h2 { margin: 7px 0 12px; font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.04; color: #ffe4a3; }
.delivery-intro p { max-width: 36ch; }
.delivery-preview {
  display: inline-block; margin-bottom: 0; padding: 5px 10px; border-radius: 6px;
  border: 1px solid #a98a56; color: #ffe5ae; font-size: .78rem; font-weight: 750;
}
.delivery-ticket { min-width: 0; padding: clamp(14px, 3vw, 24px); border-radius: 14px; background: #fff8e8; color: #292119; }
.delivery-ticket h3 { margin: 0 0 12px; }
.delivery-ticket label { display: block; margin-bottom: 4px; font-size: .8rem; font-weight: 750; }
.delivery-ticket .delivery-meter-label { margin-top: 15px; }
.delivery-ticket progress { display: block; width: 100%; height: 12px; accent-color: #86601d; }
.delivery-result { font-size: .9rem; font-weight: 750; }
.delivery-totals { margin: 12px 0; padding-top: 8px; border-top: 1px dashed #a99a7a; }
.delivery-totals div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.delivery-totals div:last-child { font-weight: 800; }
.delivery-totals dd { margin: 0; }
.delivery-fine-print { margin: 12px 0 0; color: #5d5141; font-size: .77rem; }
@media (max-width: 720px) { .delivery-pilot { grid-template-columns: 1fr; } }

.delivery-point { margin-top: 17px; padding-top: 14px; border-top: 1px dashed #a99a7a; }
.delivery-point h3 { margin-bottom: 4px; }
.delivery-point p { margin: 0 0 10px; font-size: .85rem; }
.delivery-courier-preview {
  display: grid; gap: 2px; margin-top: 10px; padding: 9px 11px;
  border-radius: 8px; background: #f3e7cb; overflow-wrap: anywhere;
}
.delivery-courier-preview span { font-size: .75rem; font-weight: 750; }
.delivery-courier-preview output { font-size: .88rem; }

.delivery-neighbors {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: start; gap: clamp(20px, 4vw, 46px); padding-top: 26px; border-top: 1px solid #9d7944;
}
.delivery-neighbors h3 { margin: 6px 0 12px; color: #ffe4a3; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; }
.delivery-neighbors h4 { margin: 0 0 12px; }
.delivery-neighbors .neighbors-point { margin: 13px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.delivery-neighbors dd { text-align: end; }
@media (max-width: 720px) { .delivery-neighbors { grid-template-columns: 1fr; } }

.delivery-markets { max-width: 290px; margin-bottom: 15px; }
.delivery-markets label { display: block; margin-bottom: 4px; font-size: .8rem; font-weight: 750; }
.delivery-markets input, .delivery-markets select { margin-bottom: 8px; }
#delivery-title, #neighbors-market { overflow-wrap: anywhere; }
#delivery-local-charge { margin-top: 10px; }