:root {
  --paper: #FBF7EF;
  --ink: #1E2B2F;
  --ink-2: #5C6A6E;
  --line: #E6DECD;
  --chip: #F2EBDD;
  --chip-hover: #EADFC8;
  --bar: #EEEEEE;
  --yolk: #FDD20B;
  --yolk-2: #E9B308;
  --brick: #B5532E;
  --field-line: #D9CFBB;
  --danger: #A32D2D;
  --logo: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --tag: 'Poppins', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Inset for things pinned to the window's edges: 16px on phones, growing smoothly to 48px on a wide desktop */
  --gutter: clamp(16px, 3.2vw + 2px, 48px);
  --edge-l: max(var(--gutter), env(safe-area-inset-left));
  --edge-r: max(var(--gutter), env(safe-area-inset-right));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: inherit; }
img, svg { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yolk-2); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.app { max-width: 440px; margin: 0 auto; }

/* Header: the logo and Contact sit in the window's top corners at every width */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(var(--gutter) / 2 + 6px) var(--edge-r) 0 var(--edge-l); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-logo { width: 48px; height: 43px; }
.brand-name { display: block; font: 400 30px/.9 var(--logo); letter-spacing: .01em; }
.brand-tag { display: block; font: 300 13px/1.3 var(--tag); color: var(--ink-2); }
.contact { position: relative; }
.btn-contact { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.menu { position: absolute; right: 0; top: 48px; z-index: 30; width: 240px; padding: 6px; background: #fff; border: 1px solid var(--field-line); border-radius: 16px; box-shadow: 0 10px 30px rgba(30, 43, 47, .14); }
.menu a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.menu a:hover { background: var(--chip); }
.menu small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-2); }

/* Where to? bar: the whole left side is one link; When is a small nested link */
.where { display: flex; align-items: center; height: 56px; margin: 14px 16px 0; padding-right: 8px; border-radius: 999px; background: var(--bar); }
.where-go { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding-left: 18px; border-radius: 999px; color: #3D3D3D; font-size: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.where-go .icon { width: 23px; height: 23px; color: #000; stroke-width: 2.6; }
.when { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 10px; border-radius: 999px; background: #fff; color: #000; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.when .clock { width: 17px; height: 17px; }
.when .clock circle { fill: #000; transition: fill .15s; }
.when .clock path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.when:hover { background: var(--ink); color: #fff; }
.when:hover .clock circle { fill: #fff; }
.when:hover .clock path { stroke: var(--ink); }

/* Hudson first / Beyond Hudson */
.rows { padding: 4px 16px 0; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.row:last-child { border-bottom: 0; }
.ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--chip); }
.row-title { display: block; font-size: 15px; font-weight: 600; }
.row-sub { display: block; font-size: 13px; color: var(--ink-2); }
.band { height: 8px; margin-top: 6px; background: var(--chip); }

/* Services */
.services { padding: 14px 16px 0; }
.h-small { margin: 0; font: 500 20px var(--display); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; text-decoration: none; }
.tile-box { width: 100%; max-width: 80px; aspect-ratio: 62 / 50; display: grid; place-items: center; border-radius: 14px; background: var(--chip); transition: background .15s; }
.tile:hover .tile-box { background: var(--chip-hover); }
.disc { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--yolk); }
.disc .icon { width: 21px; height: 21px; }

/* Animated map. Below 1024px it runs edge to edge under the controls: phone-shaped (300:222) at most, and
   never so tall that the heading below it drops off the first screen. home.js measures --rest, everything
   else on that screen. It keeps at least 220px, and never gets flatter than 10:3. home.js fits the view to its shape. */
.home { --rest: 560px; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--edge-r) 6px var(--edge-l); }
.cap { min-width: 0; margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--chip); cursor: pointer; }
.map { position: relative; height: clamp(max(220px, 30vw), 100vh - var(--rest), 74vw); height: clamp(max(220px, 30vw), 100svh - var(--rest), 74vw); overflow: hidden; }
.map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.north { position: absolute; right: var(--edge-r); top: 8px; display: flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; background: var(--paper); font-size: 11px; font-weight: 600; }
.north .icon { width: 12px; height: 12px; transform: rotate(-45deg); }
.pins { font-size: 98px; fill: var(--ink); }
.pin circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pin text { opacity: 0; transition: opacity .3s; paint-order: stroke; stroke: var(--paper); stroke-width: 24px; stroke-linejoin: round; }
.pin.on circle { transform: scale(1); }
.pin.on text { opacity: 1; }
.far .pin text { opacity: 0; }
#m1r { opacity: 0; transition: opacity .5s; }
#m1r.shown { opacity: 1; }
#cab { transition: opacity .3s; }
.lb text { paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.range { font-style: italic; font-weight: 600; fill: #B38E72; paint-order: stroke; stroke: var(--paper); stroke-width: 2400px; stroke-linejoin: round; }
.sea text { font-style: italic; font-weight: 600; fill: #7FA6AF; paint-order: stroke; stroke: #CFE3E6; stroke-width: 1600px; stroke-linejoin: round; }
.dl { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease-out; }
.go .dl { stroke-dashoffset: 0; }
.dl:nth-child(2) { transition-delay: .1s; } .dl:nth-child(3) { transition-delay: .2s; } .dl:nth-child(4) { transition-delay: .3s; }
.dl:nth-child(5) { transition-delay: .4s; } .dl:nth-child(6) { transition-delay: .5s; } .dl:nth-child(7) { transition-delay: .6s; }
.dl:nth-child(8) { transition-delay: .7s; }
.tag { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.go .tag { transform: scale(1); }
.tag:nth-child(1) { transition-delay: .9s; } .tag:nth-child(2) { transition-delay: 1s; }
.tag:nth-child(3) { transition-delay: 1.1s; } .tag:nth-child(4) { transition-delay: 1.2s; }
.tag:nth-child(5) { transition-delay: 1.3s; }
@media (prefers-reduced-motion: reduce) {
  .pin circle, .pin text, #m1r, .dl, .tag, #cab { transition: none; }
}

/* Desktop map view: the page works like a map app. The top bar (logo, Where to? dead center, Contact) and the
   map, filling the window right of a phone-width column as on the ride page, stay put; the rest of the site
   scrolls in that column, lined up with the logo. */
@media (min-width: 1024px) {
  .page-home { --bar-h: 80px; --pane: calc(var(--edge-l) + 440px); }
  .page-home [id] { scroll-margin-top: calc(var(--bar-h) + 12px); }
  .page-home .top { position: sticky; top: 0; z-index: 20; height: var(--bar-h); padding-block: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
  .page-home .where { position: fixed; z-index: 21; top: calc((var(--bar-h) - 56px) / 2); left: 50%; width: 408px; margin: 0; transform: translateX(-50%); }
  .page-home main { width: var(--pane); padding: 0 16px 0 calc(var(--edge-l) - 16px); }
  .page-home .rows { padding-top: 12px; }
  .page-home .steps { grid-template-columns: 1fr; }
  .page-home .footer { width: var(--pane); padding-inline: var(--edge-l) 32px; }
  .map-pane { position: fixed; inset: var(--bar-h) 0 0 var(--pane); border-left: 1px solid var(--line); }
  .map-pane .map { height: 100%; }
  .map-head { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--paper); box-shadow: 0 2px 12px rgba(30, 43, 47, .14); }
  .north { top: auto; bottom: 16px; }
}

/* Content sections */
.section { max-width: 760px; margin: 0 auto; padding: 44px 16px 8px; }
.section h2 { margin: 0 0 12px; font: 500 28px/1.15 var(--display); }
.lead { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 38em; }
.points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.points li { display: flex; gap: 10px; align-items: flex-start; }
.points .icon { margin-top: 3px; color: var(--yolk-2); stroke-width: 3; }
.steps { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.step { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.step-n { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--yolk); font-weight: 700; font-size: 14px; }
.step h3 { margin: 0 0 4px; font-size: 17px; }
.step p { margin: 0; color: var(--ink-2); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.facts { display: grid; gap: 4px; margin: 0; }
.facts p { margin: 0 0 8px; }
.rates { width: 100%; margin: 0 0 12px; border-collapse: collapse; }
.rates caption { text-align: left; }
.rates th, .rates td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.rates td { text-align: right; font-weight: 600; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 1em; font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink-2); text-align: center; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 14px; color: var(--ink-2); }
.cta-band { max-width: 760px; margin: 36px auto 0; padding: 28px 16px 40px; text-align: center; }
.cta-band h2 { margin: 0 0 14px; font: 500 28px var(--display); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Buttons */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cta.ghost { background: var(--chip); color: var(--ink); }
.cta[disabled] { opacity: .65; cursor: progress; }
.link { color: var(--ink); font-weight: 600; }

/* Footer: the logo on the left, where to find us on the right, and the fine print below, light on ink.
   Light text on a dark ground reads heavier and blurrier than the same text on paper, so it's antialiased
   thinner, set a size up with a little more air, and the secondary text is a warm grey at 7:1 (AAA), not a fade. */
.footer {
  --f-text: var(--paper);                  /* 13.6:1 on ink */
  --f-muted: #BDB6A8;                      /* 7.2:1 on ink */
  --f-rule: rgba(251, 247, 239, .16);
  --f-underline: rgba(251, 247, 239, .4);
  margin-top: 24px;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--f-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footer-in { max-width: 680px; margin: 0 auto; }
.footer p { margin: 0; }
.footer .brand-tag { color: var(--f-muted); }
.f-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.f-info { display: grid; gap: 8px; font-size: 15px; line-height: 1.45; letter-spacing: .01em; color: var(--f-muted); text-align: right; text-wrap: balance; }
.f-legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--f-rule); font-size: 13px; line-height: 1.55; letter-spacing: .01em; color: var(--f-muted); }
.f-legal p { flex: 1 1 300px; }
.f-legal > a { flex: none; font-weight: 600; color: var(--f-text); }
/* Rides from Hudson: a quiet row of links to the trip pages, set like the fine print */
.f-trips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; font-size: 13px; line-height: 1.55; letter-spacing: .01em; }
.f-trips a { color: var(--f-muted); }
.f-info a, .f-legal a, .f-trips a { text-decoration-color: var(--f-underline); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.f-info a:hover, .f-legal a:hover, .f-trips a:hover { text-decoration-color: currentColor; }
.page-home .footer-in { max-width: 760px; }
.page-ride .footer-in { max-width: 408px; } /* the form's content width */

/* Request Pickup page: the stage spans the window; header, form and sent message keep a phone-width column.
   When the form is shorter than the window, the footer still sits at its bottom edge. */
.page-ride { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app-ride { max-width: none; flex: 1 0 auto; margin: 0; }
.app-ride .ride-top, .app-ride .ride-form, .app-ride .sent { max-width: 440px; margin-inline: auto; }
.ride-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.ride-top h1 { margin: 0; font: 500 24px var(--display); }
.back { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -8px; border-radius: 50%; }
.back .icon { width: 22px; height: 22px; }
/* Idling SUV in place of the map */
.idle-suv {
  --suv-paint: #5D636C;        /* gunmetal body */
  --suv-paint-shade: #4E535B;  /* lower body shade */
  --suv-ink: var(--ink);       /* outlines, black roof and pillars */
  --suv-trim: #26272C;         /* arch trim, rocker, bumpers */
  --suv-trim-2: #4A4C53;       /* grille bars */
  --suv-tire: #232428;
  --suv-bronze: #8E6340;       /* wheels */
  --suv-bronze-dark: #4A3222;
  --suv-glass: #CFE3E6;
  --suv-lens: #FFF8D6;
  --suv-amber: #FFB547;
  --suv-light: #FFE07A;        /* headlight beam */
  --suv-tail: #FF5A4F;
  --suv-tail-glow: #FF3B30;    /* taillight glow */
  --suv-ground: var(--line);
  --suv-shadow: rgba(30,43,47,.12);
  --suv-rpm: .6s;              /* one idle "chug"; lower = rougher idle */
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 14px 16px 0;
}
.idle-suv svg { display: block; width: 100%; height: auto; overflow: visible; }

.idle-suv .s-ink    { stroke: var(--suv-ink); stroke-linejoin: round; stroke-linecap: round; }
.idle-suv .s-trim   { stroke: var(--suv-trim); stroke-linejoin: round; }
.idle-suv .s-trim2  { stroke: var(--suv-trim-2); stroke-linecap: round; }
.idle-suv .s-bronze { stroke: var(--suv-bronze); stroke-linecap: round; }
.idle-suv .s-white  { stroke: #fff; stroke-linecap: round; }
.idle-suv .s-ground { stroke: var(--suv-ground); }
.idle-suv .f-paint  { fill: var(--suv-paint); }
.idle-suv .f-shade  { fill: var(--suv-paint-shade); }
.idle-suv .f-ink    { fill: var(--suv-ink); }
.idle-suv .f-trim   { fill: var(--suv-trim); }
.idle-suv .f-tire   { fill: var(--suv-tire); }
.idle-suv .f-bronze { fill: var(--suv-bronze); }
.idle-suv .f-bronze-dk { fill: var(--suv-bronze-dark); }
.idle-suv .f-glass  { fill: var(--suv-glass); }
.idle-suv .f-lens   { fill: var(--suv-lens); }
.idle-suv .f-amber  { fill: var(--suv-amber); }
.idle-suv .f-tail   { fill: var(--suv-tail); }
.idle-suv .shadow   { fill: var(--suv-shadow); }
.idle-suv .stop-light { stop-color: var(--suv-light); }
.idle-suv .stop-tail  { stop-color: var(--suv-tail-glow); }

/* the rumble: a slow breath with a soft chug on top */
.idle-suv .sway,
.idle-suv .chassis,
.idle-suv .tire,
.idle-suv .shadow { transform-box: fill-box; }
.idle-suv .sway    { transform-origin: 50% 100%; animation: suv-sway 3s ease-in-out infinite; }
.idle-suv .chassis { transform-origin: 50% 100%; animation: suv-chug var(--suv-rpm) cubic-bezier(.45,0,.55,1) infinite; }
.idle-suv .tire    { transform-origin: 50% 100%; animation: suv-squish var(--suv-rpm) ease-in-out infinite; }
.idle-suv .shadow  { transform-origin: 50% 50%;  animation: suv-shadow var(--suv-rpm) ease-in-out infinite; }
.idle-suv .beam    { animation: suv-beam var(--suv-rpm) ease-in-out infinite; }

@keyframes suv-sway {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}
@keyframes suv-chug {
  0%, 100% { transform: translateY(0) rotate(0); }
  18%      { transform: translateY(-1.7px) rotate(-.3deg); }
  38%      { transform: translateY(.3px) rotate(.08deg); }
  58%      { transform: translateY(-.9px) rotate(.18deg); }
  78%      { transform: translateY(0) rotate(0); }
}
@keyframes suv-squish {
  0%, 18%, 58%, 100% { transform: none; }
  38%      { transform: scale(1.015, .98); }
  78%      { transform: scale(1.008, .99); }
}
@keyframes suv-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  18%      { transform: scaleX(.975); opacity: .82; }
  58%      { transform: scaleX(.99); opacity: .92; }
}
@keyframes suv-beam {
  0%, 100% { opacity: .92; }
  18%      { opacity: 1; }
  58%      { opacity: .86; }
}
@media (prefers-reduced-motion: reduce) {
  .idle-suv * { animation: none !important; }
}

/* Sent state: the car revs while the request goes out, then drives off to reveal
   a New York State-style guide sign that was crouched behind it all along. */
.ride-car {
  --suv-drive: max(450px, 240px + 60vw); /* past the window's right edge at any car size below */
  max-width: none;
  overflow-x: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.ride-car svg { width: min(100%, 290px + 18vw); margin-inline: auto; } /* grows gently: ~365px on a big phone, ~470px just under desktop */
.idle-suv { --sign-green: #04703F; --sign-post: #A9AFB6; }
.idle-suv .f-sign { fill: var(--sign-green); }
.idle-suv .f-post { fill: var(--sign-post); }
.idle-suv .s-legend { stroke: #fff; }
.idle-suv .sign-1,
.idle-suv .sign-2 { fill: #fff; font-family: Overpass, 'Arial Narrow', Arial, sans-serif; font-weight: 700; text-anchor: middle; }
.idle-suv .sign-1 { font-size: 28px; letter-spacing: .5px; }
.idle-suv .sign-2 { font-size: 15px; letter-spacing: .3px; }
.idle-suv .sign { transform-box: fill-box; transform-origin: 50% 100%; }
/* squashed into the strip the car's body covers; scaled about the panel's bottom edge */
.idle-suv .sign-panel { transform: scaleY(.364); transform-box: view-box; transform-origin: 169px 146px; }
/* upstate New York fall: sugar maple, red maple, birch, oak, beech */
.idle-suv .leaf-orange  { fill: #DD7A27; }
.idle-suv .leaf-scarlet { fill: #C73A2C; }
.idle-suv .leaf-crimson { fill: #932C2B; }
.idle-suv .leaf-gold    { fill: #E8B33C; }
.idle-suv .leaf-russet  { fill: #8C4B2B; }
.idle-suv .leaf-bronze  { fill: #B9792F; }

.idle-suv.is-revving { --suv-rpm: .3s; }

.idle-suv.is-leaving .car     { animation: suv-drive 2.6s both; }
.idle-suv.is-leaving .spin    { transform-box: fill-box; transform-origin: 50% 50%; animation: suv-spin 2.6s both; }
.idle-suv.is-leaving .sway    { animation: suv-pitch 2.6s ease-in-out both; }
.idle-suv.is-leaving .chassis { animation: suv-hop .34s ease-in-out .5s infinite; }
.idle-suv.is-leaving .beam    { animation: suv-flash .24s ease-in-out 2, suv-beam .3s ease-in-out .48s infinite; }
.idle-suv.is-leaving .sign-panel { animation: suv-sign-stand .75s cubic-bezier(.3, 1.55, .6, 1) 1s both; }
.idle-suv.is-leaving .sign { animation: suv-sign-wobble .9s ease-out 1.75s; }
.idle-suv.is-leaving ~ .sent { animation: sent-in .5s ease-out .7s both; }

@keyframes suv-drive {
  0%   { transform: translateX(0); animation-timing-function: ease-in-out; }
  20%  { transform: translateX(-6px); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  100% { transform: translateX(var(--suv-drive, 450px)); }
}
@keyframes suv-spin {
  0%   { transform: rotate(0); animation-timing-function: ease-in-out; }
  20%  { transform: rotate(-14.6deg); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  100% { transform: rotate(1097deg); }
}
@keyframes suv-pitch {
  0%   { transform: none; }
  12%  { transform: translateY(1px) rotate(.8deg); }
  24%  { transform: rotate(-1.6deg); }
  40%  { transform: rotate(-.6deg); }
  100% { transform: rotate(-.4deg); }
}
@keyframes suv-hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.6px); }
}
@keyframes suv-flash {
  0%, 100% { opacity: .9; }
  50%      { opacity: .1; }
}
@keyframes suv-sign-stand {
  from { transform: scaleY(.364); }
  to   { transform: scaleY(1); }
}
@keyframes suv-sign-wobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-1.4deg); }
  55%      { transform: rotate(.8deg); }
  80%      { transform: rotate(-.3deg); }
}
@keyframes sent-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .idle-suv.is-leaving .car { visibility: hidden; }
  .idle-suv.is-leaving .sign-panel { transform: none; }
  .idle-suv.is-leaving ~ .sent { animation: none; }
}

/* Desktop: the form keeps its phone-width column on the left and the stage fills the rest of the
   window, where a map would sit, and stays put like the home page's map. The footer closes out the
   column, at the bottom of the window when the form is short. The car drives far enough to clear the
   stage's right edge. */
@media (min-width: 1024px) {
  .page-ride .footer { width: 488px; margin-top: 0; padding-inline: 40px; }
  .app-ride .ride-top, .app-ride .ride-form, .app-ride .sent { margin-inline: 24px 0; }
  .app-ride .ride-car {
    --suv-drive: 700px;
    --suv-ground: var(--field-line);
    position: fixed;
    inset: 0 0 0 488px;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background: var(--chip);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .app-ride .ride-car svg { width: min(100%, 1300px); }
  .app-ride .s-ground { transform: scaleX(12); transform-box: fill-box; transform-origin: center; }
}
.ride-form { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 28px; }
.route { display: flex; gap: 10px; }
.route-glyph { display: flex; flex-direction: column; align-items: center; padding: 18px 0; }
.route-glyph .dot { width: 10px; height: 10px; border: 2.5px solid var(--ink); border-radius: 50%; }
.route-glyph .line { flex: 1; width: 2px; margin: 3px 0; background: var(--ink); }
.route-glyph .sq { width: 10px; height: 10px; background: var(--ink); }
.route-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.field { position: relative; }
.ride-form input, .ride-form textarea { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: 12px; background: #fff; font-size: 16px; }
.ride-form textarea { height: auto; min-height: 72px; padding: 12px; resize: vertical; line-height: 1.4; }
.ride-form input:focus, .ride-form textarea:focus { outline: 2px solid var(--yolk-2); outline-offset: 0; border-color: var(--yolk-2); }
.ride-form [aria-invalid="true"] { border-color: var(--danger); }
.ride-form .has-loc input { padding-right: 48px; }
.loc { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.loc:hover { background: var(--chip); }
.loc.busy { opacity: .5; cursor: progress; }
/* Address suggestions under the pickup and drop-off fields (places.js) */
.suggest { position: absolute; z-index: 20; top: 52px; left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; overflow: hidden; border: 1px solid var(--field-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(30,43,47,.16); }
.suggest li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; line-height: 1.3; cursor: pointer; }
.suggest li .icon { margin-top: 1px; color: var(--ink-2); }
.suggest li:hover { background: var(--paper); }
.suggest li[aria-selected="true"] { background: var(--chip); }
.sg-main { display: block; font-weight: 600; overflow-wrap: anywhere; }
.sg-detail { display: block; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.when-seg { display: flex; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--chip); }
.when-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.when-seg label { flex: 1; height: 40px; line-height: 40px; text-align: center; border-radius: 999px; font-weight: 600; cursor: pointer; }
.when-seg input:checked + label { background: var(--ink); color: var(--paper); }
.when-seg input:focus-visible + label { outline: 2px solid var(--yolk-2); outline-offset: 2px; }
.later-fields { display: none; gap: 10px; }
.when-seg:has(#when-later:checked) + .later-fields, .ride-form.is-later .later-fields { display: flex; }
.later-fields .field { flex: 1; }
.later-fields label { display: block; margin: 0 0 4px 2px; font-size: 13px; color: var(--ink-2); }
.field-err, .form-err { margin: 4px 0 0 2px; color: var(--danger); font-size: 14px; }
.field-err:empty, .form-err:empty { display: none; }
.form-err a { color: inherit; font-weight: 600; }
.fine { margin: 0; text-align: center; font-size: 12px; color: var(--ink-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent { padding: 12px 16px 40px; }
.sent:focus { outline: none; }
.sent h2 { margin: 14px 0 6px; font: 500 26px var(--display); }
.sent p { margin: 0 0 10px; color: var(--ink-2); }
.sent .ref { font-weight: 600; color: var(--ink); }
.sent .test-note { padding: 10px 12px; border-radius: 10px; background: var(--chip); color: var(--ink); }
.sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }

/* Simple pages: privacy, sent, try again, 404 */
.page { max-width: 680px; margin: 0 auto; padding: 8px 16px 40px; }
.page h1 { margin: 18px 0 10px; font: 500 30px/1.15 var(--display); }
.page h2 { margin: 28px 0 8px; font: 500 21px var(--display); }
.page p, .page li { color: #33444A; }
.page .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Trip pages (/jfk, /amtrak, ...): the privacy-page layout plus the home page's rates table and questions */
.page .lead { margin: 0 0 22px; }
.page .note { margin: 0; font-size: 14px; color: var(--ink-2); }
.page .faq { margin-top: 32px; }
.page .more { margin-top: 28px; font-size: 15px; }
.compare { width: 100%; margin: 4px 0 8px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.compare th, .compare td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare th { font-weight: 600; }
.compare thead th { font-size: 13px; color: var(--ink-2); }