:root {
  --asphalt: #101214;
  --asphalt-deep: #0B0D0F;
  --kerb: #181B1F;
  --kerb-2: #1D2126;
  --line: #2E343B;
  --line-2: #48515B;
  --chalk: #EDF0F1;
  --fog: #A3ACB5;
  --cyan: #22D3E6;
  --cyan-deep: #00697A;
  --yellow: #FFDD00;
  --paper: #EFEADF;
  --paper-2: #E4DDCE;
  --ink: #121314;
  --ink-soft: #4A4D52;
  --f-display: "Saira", "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  --f-text: "Saira", "Bahnschrift", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --cut: clamp(28px, 6.5vw, 96px);
  --gut: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .15, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--asphalt); }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--chalk);
  font: 400 1.0625rem/1.6 var(--f-text);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}
a:hover { text-decoration-thickness: 4px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute;
  z-index: 60;
  left: var(--gut);
  margin-top: 10px;
  padding: .8rem 1.2rem;
  background: var(--yellow);
  color: var(--ink);
  font: 700 .9375rem/1 var(--f-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus-visible { outline-color: var(--chalk); }
.nw { white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gut), 1240px); margin-inline: auto; }

.display {
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: .004em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--cyan);
  font: 600 .8125rem/1.2 var(--f-text);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow__no {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  padding: .28rem .5rem;
  border: 1.5px solid currentColor;
  font: 700 .75rem/1 var(--f-mono);
  letter-spacing: .04em;
  transform: skewX(-14deg);
}
.eyebrow--ink { color: var(--ink); }

/* Buttons lean forward: the box is skewed, the label is set upright again. */
.btn {
  --skew: -14deg;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 3.25rem;
  padding: .75em 1.5em;
  border: 2px solid transparent;
  font-family: var(--f-display);
  font-stretch: semi-condensed;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transform: skewX(var(--skew));
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn > * { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.btn__arrow { width: 1.15em; height: 1.15em; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: skewX(14deg) translateX(4px); }
.btn--go { background: var(--yellow); color: var(--ink); }
.btn--go:hover { background: var(--chalk); }
.btn--line { border-color: var(--chalk); color: var(--chalk); background: transparent; }
.btn--line:hover { background: var(--chalk); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--cyan-deep); }
.btn--sm { min-height: 2.6rem; padding: .55em 1.1em; font-size: .9375rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--chalk); }

/* Diagonal section edges, all on the same forward-rising slope. */
.slant {
  position: relative;
  margin-top: calc(var(--cut) * -1);
  padding: calc(var(--cut) + clamp(56px, 8vw, 120px)) 0 clamp(88px, 11vw, 160px);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.slant::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: var(--cut);
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--edge, transparent) calc(50% - 1px), var(--edge, transparent) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.sec-head .eyebrow { grid-column: 1 / -1; margin-bottom: 1.25rem; }
.sec-title { font-size: clamp(2.75rem, 7vw, 6.25rem); }
.sec-lede { max-width: 30rem; color: #C5CCD2; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }

/* ---------- Header ---------- */
.mast {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 18, 20, .94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .mast { background: rgba(16, 18, 20, .82); backdrop-filter: blur(12px) saturate(1.2); }
}
.mast::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--yellow);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.mast__in { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); min-height: 66px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--chalk);
  text-decoration: none;
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__word { padding-right: .1em; }

.stops { margin-left: auto; }
.stops ol { display: flex; list-style: none; }
.stops li { position: relative; }
.stops li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 2px;
  background: var(--line-2);
}
.stops li:first-child::before { left: 50%; }
.stops li:last-child::before { right: 50%; }
.stops li.is-past::before { background: var(--yellow); }
.stops li.is-here::before { background: linear-gradient(90deg, var(--yellow) 50%, var(--line-2) 50%); }
.stops li:first-child.is-here::before { background: var(--line-2); }
.stops li:last-child.is-here::before { background: var(--yellow); }
.stops a {
  position: relative;
  display: block;
  padding: 14px clamp(8px, 1vw, 14px) 28px;
  color: var(--fog);
  font: 600 .8125rem/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.stops a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 8px;
  width: 10px; height: 10px;
  margin-left: -5px;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  background: var(--asphalt);
  transition: background-color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.stops a:hover { color: var(--chalk); }
.stops a:hover::after { border-color: var(--chalk); }
.stops .is-past a::after { border-color: var(--yellow); background: var(--yellow); }
.stops a[aria-current] { color: var(--chalk); }
.stops a[aria-current]::after { border-color: var(--yellow); background: var(--asphalt); transform: scale(1.35); box-shadow: 0 0 0 3px rgba(255, 221, 0, .18); }
.stops a:focus-visible { outline-offset: -3px; }
.mast__cta { flex: none; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  min-height: 2.6rem;
  padding: 0 .9rem;
  border: 1.5px solid var(--line-2);
  background: transparent;
  color: var(--chalk);
  font: 600 .8125rem/1 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.menu-btn__bars, .menu-btn__bars::before {
  display: block;
  width: 16px; height: 2px;
  background: currentColor;
  transform: skewX(-20deg);
}
.menu-btn__bars { position: relative; margin-top: -5px; }
.menu-btn__bars::before { content: ""; position: absolute; top: 6px; left: 3px; width: 13px; }
.menu-btn[aria-expanded="true"] { border-color: var(--yellow); }
@media (min-width: 961px) { .menu-btn { display: none; } }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(36px, 5vw, 72px) 0 calc(var(--cut) + clamp(40px, 5vw, 64px));
  background: radial-gradient(120% 90% at 85% 10%, #1A2026 0%, transparent 60%), url(noise.svg), var(--asphalt);
}
.hero__plate {
  position: absolute;
  z-index: -1;
  top: -150px;
  right: -210px;
  width: min(1080px, 78vw);
  aspect-ratio: 800 / 560;
  transform: perspective(1700px) rotateX(54deg) rotateZ(-36deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.hero__plate svg { display: block; width: 100%; height: 100%; }
.hero__casing, .hero__route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero__casing { stroke: #0B0D0F; stroke-width: 16; }
.hero__route { stroke: var(--yellow); stroke-width: 8; }
.hero__rider { transform: translate(700px, 440px); }

.hero__in { position: relative; }
.hero__eyebrow { margin-bottom: clamp(18px, 3vw, 36px); }
.hero__title {
  font-size: clamp(2rem, 9.6vw, 8rem);
  line-height: .9;
  color: var(--chalk);
  text-shadow: 0 2px 30px rgba(11, 13, 15, .6);
}
.hero__line { position: relative; display: block; width: fit-content; padding-left: .55em; white-space: nowrap; }
.hero__end { display: block; }
.hero__line:nth-child(2) { margin-left: 1.1em; }
.hero__line:nth-child(3) { margin-left: 2.2em; color: var(--yellow); }
.hero__line::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: .22em; height: .22em;
  border: .055em solid var(--cyan);
  border-radius: 50%;
  background: var(--asphalt);
}
.hero__line:nth-child(3)::before { border-color: var(--yellow); background: var(--yellow); border-radius: 2px; transform: rotate(45deg) scale(.92); }
.hero__line:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: .11em; top: .41em;
  width: 1.1em; height: .9em;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--cyan) calc(50% - 1.5px), var(--cyan) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  opacity: .8;
}
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 31rem) auto;
  align-items: end;
  gap: 28px clamp(28px, 5vw, 72px);
  margin-top: clamp(28px, 4vw, 52px);
}
.hero__lede { max-width: 34rem; color: #CBD2D8; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; padding-left: 8px; }
.hero__status {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  margin-top: clamp(40px, 6vw, 76px);
  border-top: 1px solid var(--line-2);
}
.hero__status > div { padding: 14px 16px 0 0; }
.hero__status > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.hero__status dt { color: var(--fog); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.hero__status dd { margin-top: 4px; font: 600 .9375rem/1.35 var(--f-mono); color: var(--chalk); }

/* ---------- 01 Sizes ---------- */
.carry { --edge: rgba(34, 211, 230, .55); background: var(--kerb); }
.loads {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.5fr;
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  list-style: none;
}
.loads::before {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  top: 0; bottom: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--line-2) calc(50% - 1px), var(--line-2) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: .5;
  pointer-events: none;
}
.load { position: relative; }
.load:nth-child(2) { margin-bottom: clamp(24px, 4vw, 56px); }
.load:nth-child(3) { margin-bottom: clamp(48px, 8vw, 112px); }
.load__art { display: flex; align-items: flex-end; margin-bottom: 20px; }
.load__art svg { display: block; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); }
.load:nth-child(1) .load__art svg { width: 62%; }
.load:nth-child(2) .load__art svg { width: 74%; }
.load:nth-child(3) .load__art svg { width: 88%; }
.load__body { border-top: 2px solid var(--chalk); padding-top: 14px; }
.load__name { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.load__spec { margin: 10px 0 10px; color: var(--cyan); font: 600 .875rem/1.4 var(--f-mono); }
.load__body > p:not([class]) { color: #C5CCD2; }
.load__price { display: flex; align-items: baseline; gap: .6rem; margin-top: 14px; color: var(--fog); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.load__price .display { color: var(--yellow); font-size: 2.25rem; letter-spacing: 0; }
.next-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(32px, 5vw, 56px);
  font-weight: 600;
  font-size: 1.0625rem;
}
.next-link svg { width: 1.2em; height: 1.2em; color: var(--yellow); transition: transform .25s var(--ease); }
.next-link:hover svg { transform: translateX(5px); }

/* ---------- 02 Planner ---------- */
.planner {
  --edge: rgba(255, 221, 0, .7);
  background:
    repeating-linear-gradient(0deg, rgba(237, 240, 241, .025) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(237, 240, 241, .025) 0 1px, transparent 1px 48px),
    url(noise.svg), var(--asphalt-deep);
}
.planner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  align-items: start;
}
.board { position: relative; min-width: 0; }
.board__mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.board__mode-label { color: var(--fog); font-size: .9375rem; }
.seg { display: inline-flex; border: 1.5px solid var(--line-2); }
.seg button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  background: transparent;
  color: var(--fog);
  font-weight: 600;
  font-size: .9375rem;
}
.seg button + button { border-left: 1.5px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); }
.seg button:focus-visible { outline-offset: 2px; }

.key { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; }
.key--a { border: 3.5px solid var(--cyan); border-radius: 50%; background: var(--ink); }
.key--b { width: 12px; height: 12px; margin: 1px; background: var(--yellow); border: 1.5px solid var(--ink); transform: rotate(45deg); }
.key--plan { width: 22px; height: 4px; background: var(--cyan); vertical-align: 3px; }
.key--done { width: 22px; height: 6px; background: var(--yellow); vertical-align: 2px; }
.key--depot { width: 12px; height: 13px; border: 2px solid var(--yellow); border-bottom: 0; border-radius: 7px 7px 0 0; }

.map-wrap {
  position: relative;
  border: 1px solid var(--line-2);
  background: #121417;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.map { display: block; width: 100%; height: auto; }
.zones rect { fill: transparent; transition: fill .25s ease; }
.zones rect.is-a { fill: rgba(34, 211, 230, .13); }
.zones rect.is-b { fill: rgba(255, 221, 0, .1); }
.zones rect.is-hover { fill: rgba(237, 240, 241, .07); }
.map-names text { fill: var(--chalk); stroke: #121417; stroke-width: 4px; paint-order: stroke; letter-spacing: .06em; }
.js .map-names { display: none; }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route--casing { stroke: #0B0D0F; stroke-width: 15; }
.route--plan { stroke: var(--cyan); stroke-width: 5; }
.route--done {
  stroke: var(--yellow);
  stroke-width: 8;
  stroke-dasharray: var(--len, 2000px);
  stroke-dashoffset: calc(var(--len, 2000px) * (1 - var(--p, 0)));
  transition: stroke-dashoffset .7s var(--ease);
}
.map.is-drawing .route--plan, .map.is-drawing .route--casing {
  stroke-dasharray: var(--len);
  animation: draw .8s var(--ease) both;
}
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.pin { transition: opacity .2s ease; }
.pin__check { opacity: 0; transition: opacity .2s ease; }
.map.is-delivered .pin__check { opacity: 1; }
.rider {
  transform: translate(var(--rx, 300px), var(--ry, 120px)) rotate(var(--ra, 90deg));
  transition: transform .7s var(--ease), opacity .2s ease;
}
.rider path { transform: rotate(0deg); }
.map.is-waiting .rider { opacity: 0; }
.map.is-delivered .rider { opacity: 0; }

.chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .3rem .6rem .3rem .45rem;
  border: 1.5px solid var(--line-2);
  background: rgba(18, 20, 23, .94);
  color: var(--chalk);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - 12px));
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.chip::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 2px; height: 9px;
  margin-left: -1px;
  background: currentColor;
  opacity: .55;
}
.chip__code { font: 700 .75rem/1 var(--f-mono); color: var(--cyan); }
.chip:hover { border-color: var(--chalk); }
.chip.is-a { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.chip.is-b { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.chip.is-a .chip__code, .chip.is-b .chip__code { color: var(--ink); }
.chip:focus-visible { outline-offset: 2px; z-index: 2; }
.chip.is-a, .chip.is-b { z-index: 1; }
@media (pointer: coarse) { .chip { min-height: 2.5rem; } }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  list-style: none;
  color: var(--fog);
  font-size: .8125rem;
  letter-spacing: .04em;
}
.legend li { display: inline-flex; align-items: center; gap: .5rem; }

.tracker { margin-top: 22px; }
@media (min-width: 1101px) { .board > .legend, .board > .tracker { padding-right: 60px; } }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; list-style: none; }
.stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: .6rem;
  padding: .8rem 1.4rem .9rem 1.5rem;
  background: var(--kerb-2);
  color: var(--fog);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  transition: background-color .3s ease, color .3s ease;
}
.stage:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left: 1rem; }
.stage__n { font: 700 .8125rem/1.5 var(--f-mono); }
.stage__name { font-family: var(--f-display); font-stretch: condensed; font-weight: 700; font-style: italic; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; color: var(--chalk); }
.stage__text { grid-column: 1 / -1; margin-top: .35rem; font-size: .875rem; line-height: 1.45; }
.js .stage__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .stage { align-items: center; padding-top: .95rem; padding-bottom: .95rem; }
.stage.is-done { background: #0E3A41; color: #9BEAF2; }
.stage[aria-current="step"] { background: var(--yellow); color: var(--ink); }
.stage[aria-current="step"] .stage__name { color: var(--ink); }
.tracker__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 16px;
}
.tracker__status { flex: 1 1 18rem; min-height: 3em; color: var(--chalk); font-size: .9875rem; line-height: 1.5; }
.tracker__status strong { color: var(--yellow); font-weight: 600; }
.tracker__btns { display: flex; gap: 14px; padding-right: 8px; }

/* The run ticket is paper, pinned over the edge of the board. */
.ticket {
  position: relative;
  z-index: 2;
  margin: 58px 0 0 -36px;
  padding: 26px clamp(20px, 2.2vw, 30px) 30px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .85), 0 2px 0 rgba(0, 0, 0, .2);
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background: radial-gradient(circle at 8px 8px, transparent 4.5px, var(--paper) 5px) 0 0 / 16px 8px repeat-x;
}
.ticket::before { top: -8px; }
.ticket::after { bottom: -8px; transform: scaleY(-1); }
.ticket :focus-visible { outline-color: var(--ink); }
.ticket__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  padding-bottom: 14px;
  border-bottom: 2px dashed rgba(18, 19, 20, .35);
}
.ticket__title { font-size: 2.1rem; }
.ticket__no { font: 600 .8125rem/1 var(--f-mono); color: var(--ink-soft); white-space: nowrap; }
.ticket__fields { display: grid; gap: 14px; margin-top: 18px; }
.field { display: grid; gap: 6px; }
.field__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ticket .key--a { background: var(--paper); border-color: var(--cyan-deep); }
.ticket select, .bookform select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 3rem;
  padding: .6rem 2.6rem .6rem .8rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 1.2rem center / 7px 7px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) right calc(1.2rem - 7px) center / 7px 7px no-repeat,
    #FBF9F4;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
}
.ticket select:hover { background-color: #fff; }
.pick-size { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
.pick-size legend { width: 100%; margin-bottom: 6px; }
.pick-size label { position: relative; }
.pick-size input, .bookform__type input, .days input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-size span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 .95rem;
  border: 2px solid var(--ink);
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  transform: skewX(-12deg);
}
.pick-size input:checked + span { background: var(--ink); color: var(--paper); }
.pick-size input:focus-visible + span { outline: 3px solid var(--cyan-deep); outline-offset: 3px; }
.pick-size span:hover { background: var(--paper-2); }
.pick-size input:checked + span:hover { background: var(--ink); }
.readout { display: grid; margin-top: 20px; border-top: 2px solid var(--ink); }
.readout > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(18, 19, 20, .18); }
.readout dt { font: 700 .75rem/1.6 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.readout dd { font-weight: 600; font-size: .9375rem; line-height: 1.45; }
.price {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 14px;
  margin: 18px 0 20px;
}
.price__label { grid-row: 1; align-self: center; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.price__num { grid-row: 1 / span 2; grid-column: 2; justify-self: end; font-size: clamp(3.75rem, 6vw, 5rem); line-height: .8; }
.price__calc { grid-row: 2; font: 600 .8125rem/1.4 var(--f-mono); color: var(--ink-soft); }
.ticket .btn { width: 100%; }

/* ---------- 03 Rates ---------- */
.rates { --edge: rgba(18, 19, 20, .4); background: var(--paper); color: var(--ink); }
.rates :focus-visible { outline-color: var(--ink); }
.rates__top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 28px clamp(24px, 4vw, 64px);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.rates__top .eyebrow { margin-bottom: 1.25rem; }
.rates__rule { max-width: 30rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); color: #2F3237; }
.rates__rule strong { background: var(--yellow); padding: 0 .2em; }
.docket {
  position: relative;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 44px) clamp(22px, 3vw, 36px);
  background: #FBF8F1;
  box-shadow: 0 1px 0 rgba(18, 19, 20, .08), 0 30px 50px -30px rgba(40, 30, 10, .4);
  transform: rotate(-.6deg);
}
.docket::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px;
  height: 8px;
  background: radial-gradient(circle at 8px 8px, transparent 4.5px, #FBF8F1 5px) 0 0 / 16px 8px repeat-x;
}
.docket__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
  font: 700 .8125rem/1.3 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rate-table { width: 100%; border-collapse: collapse; }
.rate-table thead th {
  padding: 16px 12px 10px;
  font: 700 .75rem/1.2 var(--f-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
}
.rate-table thead th:nth-child(n+4) { text-align: right; }
.rate-table tbody th, .rate-table td { padding: 16px 12px; border-top: 1px solid rgba(18, 19, 20, .18); vertical-align: middle; }
.rate-table td { font-size: 1rem; line-height: 1.4; }
.rate-table td:nth-child(3) { font-weight: 600; white-space: nowrap; }
.rate-table td:nth-child(n+4) {
  text-align: right;
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1;
}
.rate-table tbody tr { transition: background-color .2s ease; }
.rate-table tbody tr:hover { background: rgba(255, 221, 0, .22); }
.band {
  display: inline-grid;
  place-items: center;
  width: 2.1em; height: 1.35em;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 1;
  transform: skewX(-14deg);
}
.docket__cut { margin-top: 18px; padding-top: 14px; border-top: 3px solid var(--ink); font-size: .9375rem; color: #2F3237; }
.extras__title {
  margin: clamp(48px, 6vw, 72px) 0 18px;
  font: 700 .8125rem/1.2 var(--f-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.extras > div { padding: 16px 0 18px; border-top: 2px solid var(--ink); }
.extras dt { font-family: var(--f-display); font-stretch: condensed; font-weight: 700; font-style: italic; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; }
.extras dd { margin-top: 6px; color: #2F3237; }

/* ---------- 04 Fleet ---------- */
.fleet { --edge: rgba(34, 211, 230, .55); background: radial-gradient(90% 60% at 10% 100%, #16201F 0%, transparent 70%), var(--asphalt); overflow: clip; }
.fleet .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.fleet__strip {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  width: min(100% - 2 * var(--gut), 1240px);
  margin-inline: auto;
  padding: var(--pt) 0 8px;
  --pt: clamp(80px, 9vw, 130px);
  --s: clamp(40px, 5vw, 70px);
}
.fleet__strip::before {
  content: "";
  position: absolute;
  left: -10vw; right: -10vw;
  top: calc(var(--pt) - 1.7 * var(--s));
  height: calc(3.85 * var(--s));
  background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--yellow) calc(50% - 1.5px), var(--yellow) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  opacity: .45;
  pointer-events: none;
}
.fleet__strip:focus-visible { outline-offset: 8px; }
.bike { position: relative; }
.bike:nth-child(2) { top: calc(var(--s) * -1); }
.bike:nth-child(3) { top: calc(var(--s) * -2); }
.bike__art { display: block; width: 100%; height: auto; margin-bottom: 18px; }
.bike__cap { padding-top: 16px; border-top: 2px solid var(--line-2); }
.bike__name { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.bike__for { margin: 8px 0 10px; color: var(--yellow); font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.bike__cap > p:not([class]) { color: #C5CCD2; }
.bike__spec { margin-top: 12px; color: var(--cyan); font: 600 .8125rem/1.4 var(--f-mono); }

/* ---------- 05 Co-op ---------- */
.coop { --edge: rgba(255, 221, 0, .6); background: var(--kerb); overflow: clip; }
.coop__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.coop__head .eyebrow { margin-bottom: 1.5rem; }
.coop__title { font-size: clamp(3rem, 7vw, 6.75rem); line-height: .86; }
.coop__title span { display: block; width: fit-content; white-space: nowrap; }
.coop__title span:nth-child(2) { margin-left: .7em; }
.coop__title span:nth-child(3) { margin-left: 1.4em; color: var(--yellow); }
.coop__lede { max-width: 34rem; margin-top: clamp(28px, 3.4vw, 48px); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--chalk); }
.coop__body { align-self: end; }
.rules { list-style: none; counter-reset: rule; border-bottom: 1px solid var(--line-2); }
.rules li { position: relative; counter-increment: rule; padding: 20px 0 22px 4.25rem; border-top: 1px solid var(--line-2); }
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0; top: 14px;
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-style: italic;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--cyan);
}
.rules__title { margin-bottom: 6px; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.rules p { color: #C5CCD2; }

.depot { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: clamp(56px, 8vw, 110px); }
.depot__art { grid-column: 1 / -1; grid-row: 1; display: block; width: 100%; height: auto; border-bottom: 3px solid var(--line-2); }
.depot__card {
  grid-column: 1 / span 5;
  grid-row: 1;
  align-self: end;
  position: relative;
  margin: 0 0 -56px 0;
  padding: 26px 28px 24px;
  background: var(--asphalt);
  border: 2px solid var(--yellow);
  box-shadow: 14px 14px 0 rgba(255, 221, 0, .16);
}
.depot__title { font-size: 2.25rem; color: var(--yellow); margin-bottom: 12px; }
.depot__card p + p { margin-top: 10px; color: #C5CCD2; }
.hours { display: grid; margin-top: 16px; border-top: 1px solid var(--line-2); }
.hours > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--fog); }
.hours dd { font: 600 .9375rem/1.5 var(--f-mono); }

/* ---------- 06 FAQ ---------- */
.faq { --edge: rgba(34, 211, 230, .5); background: var(--asphalt); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; padding-top: 40px; }
.faq__head { position: sticky; top: 110px; }
.faq__head .eyebrow { margin-bottom: 1.25rem; }
.faq__note { margin-top: 24px; max-width: 20rem; color: var(--fog); }
.faq__list { border-bottom: 1px solid var(--line-2); }
.faq details { border-top: 1px solid var(--line-2); }
.faq summary {
  position: relative;
  display: block;
  padding: 22px 3.5rem 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -9px;
  border-top: 3px solid var(--yellow);
  border-right: 3px solid var(--yellow);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--yellow); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { max-width: 40rem; padding: 0 0 26px; color: #C5CCD2; }

/* ---------- 07 Book ---------- */
.book { --edge: rgba(18, 19, 20, .5); background: var(--yellow); color: var(--ink); }
.book :focus-visible { outline-color: var(--ink); }
.book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 88px); align-items: start; }
.book__head .eyebrow { margin-bottom: 1.25rem; }
.book__title { font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: .84; }
.book__chev { display: block; width: clamp(150px, 16vw, 220px); height: auto; margin: 28px 0 26px; }
.book__lede { max-width: 28rem; font-size: 1.125rem; color: #26282B; }
.contact { margin-top: 28px; border-top: 2px solid var(--ink); }
.contact > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(18, 19, 20, .3); }
.contact dt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.9; }
.contact dd { font-weight: 600; overflow-wrap: anywhere; }

.bookform {
  position: relative;
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--asphalt);
  color: var(--chalk);
  box-shadow: 18px 18px 0 rgba(18, 19, 20, .22);
}
.bookform :focus-visible { outline-color: var(--yellow); }
.bookform__title { font-size: 2.25rem; margin-bottom: 20px; }
.bookform fieldset { margin: 0; padding: 0; border: 0; }
.bookform legend { margin-bottom: 8px; padding: 0; color: var(--fog); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bookform__type { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px !important; }
.bookform__type legend { width: 100%; }
.bookform__type label, .days label { position: relative; }
.bookform__type span, .days span {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1.5px solid var(--line-2);
  font-weight: 600;
  cursor: pointer;
  transform: skewX(-12deg);
  transition: background-color .2s ease, border-color .2s ease;
}
.days span { min-width: 3.2rem; justify-content: center; padding: 0 .6rem; }
.bookform__type input:checked + span, .days input:checked + span { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.bookform__type input:focus-visible + span, .days input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 3px; }
.bookform__type span:hover, .days span:hover { border-color: var(--chalk); }
.bookform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.bf { display: grid; gap: 6px; }
.bf > span { color: var(--fog); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bf em { font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: none; }
.bf input, .bf textarea, .bookform select {
  width: 100%;
  min-height: 3rem;
  padding: .65rem .8rem;
  border: 0;
  border-bottom: 2px solid var(--line-2);
  border-radius: 0;
  background-color: var(--kerb-2);
  color: var(--chalk);
  font-size: 1rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.bookform select { padding-right: 2.6rem; }
.bf input:hover, .bf textarea:hover, .bookform select:hover { border-bottom-color: var(--fog); }
.bf input:focus, .bf textarea:focus, .bookform select:focus { border-bottom-color: var(--yellow); background-color: #242930; }
.bf input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
.bf textarea { resize: vertical; line-height: 1.5; }
.bf--wide { margin-top: 20px; }
.days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px !important; }
.days legend { width: 100%; }
.bookform .btn { margin-top: 26px; }

/* ---------- Footer ---------- */
.foot {
  position: relative;
  overflow: clip;
  margin-top: calc(var(--cut) * -1);
  padding: var(--cut) 0 36px;
  background: #0A0B0C;
  color: #C5CCD2;
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.foot__word {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0 0;
  font-family: var(--f-display);
  font-stretch: condensed;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3.5rem, 17vw, 17rem);
  line-height: .78;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1A1E23;
  text-align: center;
}
.foot__word::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 34%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--yellow) 12%, var(--yellow) 88%, transparent);
  opacity: .8;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 32px clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.foot__mark { width: 44px; height: 44px; flex: none; }
.foot strong { color: var(--chalk); }
.foot__label { margin-bottom: 8px; color: var(--cyan); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.foot address { font-style: normal; }
.foot__top { display: inline-block; margin-top: 12px; color: var(--chalk); }
.foot__small { margin-top: 40px; color: #8D969F; font-size: .8125rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__line { animation: lean-in .8s var(--ease) both; }
  .hero__line:nth-child(2) { animation-delay: .12s; }
  .hero__line:nth-child(3) { animation-delay: .24s; }
  .hero__eyebrow, .hero__foot, .hero__status { animation: rise .8s var(--ease) both; }
  .hero__foot { animation-delay: .38s; }
  .hero__status { animation-delay: .5s; }
  .hero__plate { animation: plate 1.4s var(--ease) both; }
  .hero__route, .hero__casing { stroke-dasharray: 100; animation: hero-route 2.2s .5s cubic-bezier(.45, 0, .2, 1) both; }
  @supports (offset-path: path("M0 0H1")) {
    .hero__rider {
      transform: none;
      offset-path: path("M100 120V200H400V360H700V440");
      offset-rotate: 0deg;
      offset-distance: 100%;
      animation: hero-rider 2.2s .5s cubic-bezier(.45, 0, .2, 1) both;
    }
  }
  .js [data-reveal].is-pending { opacity: 0; transform: translateX(-32px); }
  .js [data-reveal] { transition: opacity .6s ease-out, transform .8s var(--ease); }
  .docket.is-pending { transform: rotate(-.6deg) translateX(-32px); }
}
@keyframes lean-in { from { opacity: 0; transform: translateX(-.35em); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes plate { from { opacity: 0; transform: perspective(1700px) rotateX(54deg) rotateZ(-36deg) translate(-60px, 30px); } }
@keyframes hero-route { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hero-rider { from { offset-distance: 0%; } to { offset-distance: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stops a { letter-spacing: .08em; }
  .planner__grid { grid-template-columns: minmax(0, 1fr); }
  .ticket { margin: 40px 0 0; max-width: 34rem; justify-self: end; width: 100%; }
}

@media (max-width: 960px) {
  .mast__in { flex-wrap: wrap; row-gap: 0; }
  .stops { order: 4; width: 100%; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; }
  .stops::-webkit-scrollbar { display: none; }
  .js .stops { display: none; }
  .js .stops.is-open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin: 0;
    padding: 12px var(--gut) 20px;
    background: var(--asphalt);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .8);
  }
  .js .stops.is-open ol { flex-direction: column; }
  .js .stops.is-open li::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .js .stops.is-open li:first-child::before { top: 50%; left: 7px; }
  .js .stops.is-open li:last-child::before { bottom: 50%; right: auto; }
  .js .stops.is-open li.is-here::before { background: linear-gradient(180deg, var(--yellow) 50%, var(--line-2) 50%); }
  .js .stops.is-open a { padding: 14px 0 14px 32px; font-size: .9375rem; }
  .js .stops.is-open a::after { left: 8px; top: 50%; bottom: auto; margin: -5px 0 0 -5px; }
  .mast__cta { order: 2; margin-left: auto; }
  .menu-btn { order: 3; margin-left: 0; }

  .hero__plate { top: -60px; right: -44vw; width: 118vw; opacity: .5; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); }
  .hero__actions { padding-left: 6px; }
  .hero__status { grid-template-columns: 1fr 1fr; }
  .hero__status > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__status > div:nth-child(n+3) { margin-top: 12px; border-top: 1px solid var(--line); }

  .sec-head, .rates__top { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sec-head .eyebrow { margin-bottom: 0; }

  .loads { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .loads::before { display: none; }
  .load { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: end; margin: 0 !important; }
  .load:nth-child(2) { padding-left: 6%; }
  .load:nth-child(3) { padding-left: 12%; }
  .load__art { margin: 0; justify-content: center; }
  .load:nth-child(n) .load__art svg { width: 100%; }

  .coop__grid, .faq__grid, .book__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fleet__strip {
    grid-auto-columns: minmax(280px, 78%);
    width: auto;
    margin: 0;
    padding: 70px var(--gut) 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    scrollbar-color: var(--line-2) transparent;
  }
  .bike { scroll-snap-align: start; }
  .fleet__strip { --s: 30px; }
  .fleet__strip::before { display: none; }

  .chip { min-height: 2.5rem; }

  .depot { display: block; }
  .depot__card { margin: -24px 0 0 0; max-width: 26rem; }

  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .brand { font-size: 1.5rem; }
  .brand__mark { width: 30px; height: 30px; }
  .mast__in { min-height: 58px; gap: 10px; }
  .mast__cta { padding-inline: .8em; font-size: .8125rem; }
  .menu-btn { padding: 0 .7rem; }

  .hero__title { font-size: min(10.8vw, 3.4rem); }
  .hero__line { padding-left: .5em; }
  .hero__line:nth-child(2) { margin-left: .55em; }
  .hero__line:nth-child(3) { margin-left: 1.1em; }
  .hero__line:not(:last-child)::after { width: .55em; }
  .hero__plate { top: -8px; bottom: auto; right: -64vw; width: 150vw; opacity: .5; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__status { grid-template-columns: minmax(0, 1fr); }
  .hero__status > div + div, .hero__status > div:nth-child(n) { margin-top: 0; padding: 10px 0 0; border-left: 0; border-top: 0; }
  .hero__status > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }
  .hero__status > div + div { border-top: 1px solid var(--line); margin-top: 10px; }
  .hero__status dd { margin: 0; text-align: right; }
  .hero__status > div:first-child { display: block; }
  .hero__status > div:first-child dd { text-align: left; margin-top: 4px; }

  .load { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .load:nth-child(2) { padding-left: 8%; }
  .load:nth-child(3) { padding-left: 16%; }
  .load__art { justify-content: flex-start; }
  .load:nth-child(1) .load__art svg { width: 48%; }
  .load:nth-child(2) .load__art svg { width: 64%; }
  .load:nth-child(3) .load__art svg { width: 84%; }

  .planner .wrap { width: 100%; }
  .planner .sec-head, .board__mode, .legend, .tracker, .ticket { margin-left: var(--gut); margin-right: var(--gut); }
  .ticket { width: auto; }
  .map-wrap { border-left: 0; border-right: 0; }
  .chip { justify-content: center; min-width: 2.75rem; padding: .3rem .5rem; }
  .chip__code { font-size: .875rem; }
  .chip__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage, .stage:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: 1rem; }
  .stage__name { font-size: 1.15rem; }
  .tracker__btns { width: 100%; }
  .tracker__btns .btn { flex: 1 1 auto; }
  .tracker__btns [data-step="-1"] { flex: 0 0 auto; }
  .readout > div { grid-template-columns: 5.2rem 1fr; }

  .rate-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rate-table, .rate-table tbody, .rate-table tr { display: block; }
  .rate-table tr { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 0 10px; padding: 16px 0; border-top: 1px solid rgba(18, 19, 20, .25); }
  .rate-table tbody th, .rate-table td { display: block; padding: 0; border: 0; }
  .rate-table tbody th { grid-row: 1 / span 2; align-self: start; padding-right: 6px; }
  .rate-table td:nth-child(2) { grid-column: 2 / -1; font-size: .9375rem; }
  .rate-table td:nth-child(3) { grid-column: 2 / -1; margin-top: 2px; font-size: .9375rem; }
  .rate-table td:nth-child(n+4) { grid-row: 3; align-self: end; margin-top: 12px; text-align: left; font-size: 1.6rem; }
  .rate-table td:nth-child(4) { grid-column: 2; }
  .rate-table td:nth-child(5) { grid-column: 3; }
  .rate-table td:nth-child(6) { grid-column: 4; }
  .rate-table td:nth-child(n+4)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 700 .6875rem/1.2 var(--f-text);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .band { font-size: 2rem; }
  .docket { transform: rotate(-.4deg); }
  .extras { grid-template-columns: minmax(0, 1fr); }

  .coop__title span:nth-child(2) { margin-left: .45em; }
  .coop__title span:nth-child(3) { margin-left: .9em; }
  .rules li { padding-left: 3.6rem; }
  .rules li::before { font-size: 2.3rem; }
  .depot__card { margin: -12px 0 0; padding: 22px 20px; box-shadow: 8px 8px 0 rgba(255, 221, 0, .16); }

  .bookform { margin-inline: calc(var(--gut) * -1); box-shadow: none; }
  .bookform__grid { grid-template-columns: minmax(0, 1fr); }
  .bookform .btn { width: 100%; }
  .contact > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .menu-btn { justify-content: center; width: 2.75rem; padding: 0; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 380px) {
  .js .mast__cta { display: none; }
}