/* ==========================================================================
   Airport transfer landing page (page-template-airport-transfer.php).
   Tokens, hero and the booking panel.
   Values mirror the homepage design system (DESIGN.md): one sky-blue accent
   on neutral paper, hairline-defined surfaces, system sans only.
   ========================================================================== */

.hw-at {
  /* brand */
  --blue: #33a6ff;
  --blue-strong: #1a8cf0;
  --blue-deep: #0c55a6;

  /* neutrals — homepage tokens. --muted is one step darker than the
     homepage's oklch(.556) so body-sized grey clears 4.5:1 on white. */
  --ink: oklch(0.145 0 0);
  --muted: #6e6e6e;
  --border: oklch(0.922 0 0);
  --fog: oklch(0.97 0 0);
  --white: #ffffff;

  /* derived surfaces */
  --band: color-mix(in srgb, var(--fog) 30%, var(--white));
  --tag-fill: color-mix(in srgb, var(--fog) 45%, var(--white));
  --tint: color-mix(in srgb, var(--blue) 12%, transparent);
  --tint-line: color-mix(in srgb, var(--blue) 26%, transparent);
  --border-lit: color-mix(in oklab, var(--blue) 55%, var(--border));
  --icon: color-mix(in oklab, var(--blue) 82%, var(--ink));

  /* radii */
  --r-control: 0.4375rem;
  --r-panel: 0.6875rem;
  --r-lg: 0.75rem;
  --r-cta: 0.875rem;
  --r-card: 1.25rem;
  --r-full: 9999px;
  --radius: 0.625rem;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.hw-at {
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.hw-at *,
.hw-at *::before,
.hw-at *::after {
  box-sizing: border-box;
}

.hw-at :where(a) {
  color: inherit;
  text-decoration: none;
}

/* the theme's reset zeroes this; the design relies on the browser default */
.hw-at :where(dl) {
  margin: 1em 0;
}

.hw-at :where(button, input, select) {
  font: inherit;
}

.hw-at ::selection {
  background: color-mix(in srgb, var(--blue) 28%, transparent);
  color: var(--ink);
}

.hw-at :where(:focus-visible) {
  outline: 2px solid var(--blue-strong);
  outline-offset: 3px;
}

.hw-at :where(input, select) {
  caret-color: var(--blue-strong);
}

.hw-at :where([id]) {
  scroll-margin-top: 28px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: calc(100svh - 119px);
  padding: clamp(66px, 9vh, 108px) 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background-image: url("airport-transfer/kathmandu-airport-transfer.webp");
  background-size: cover;
  background-position: center center;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 27, 49, 0.48) 0%, rgba(5, 27, 49, 0.2) 42%, rgba(5, 27, 49, 0.33) 66%, rgba(5, 27, 49, 0.62) 100%),
    radial-gradient(circle at 50% 20%, rgba(8, 33, 55, 0.18), rgba(4, 24, 42, 0.34));
}

.hero-content {
  width: min(880px, 100%);
  margin: 0 auto clamp(52px, 8vh, 86px);
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 20, 39, 0.34);
}

.hero h1 {
  margin: 0;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero-copy {
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(17px, 1.6vw, 26px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.hero-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.button {
  min-height: 56px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid transparent;
  border-radius: var(--r-full);
  font-size: 16px;
  font-weight: 650;
  text-shadow: none;
  transition: transform 250ms var(--ease), background 250ms ease, border-color 250ms ease;
}

.button svg,
.availability svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary {
  background: var(--blue);
  box-shadow: 0 10px 24px -8px rgba(51, 166, 255, 0.55);
}

.button-primary:hover {
  background: var(--blue-strong);
  transform: translateY(-2px);
}

.button-secondary {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(7, 30, 52, 0.28);
  backdrop-filter: blur(8px);
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(7, 30, 52, 0.48);
  transform: translateY(-2px);
}

.button:focus-visible {
  outline-color: var(--white);
}

.button .whatsapp {
  width: 25px;
  height: 25px;
}

/* ==========================================================================
   Booking panel
   Borderless fields in a hairline grid, the way the homepage search panel
   is built: label row above a native control, no boxes inside boxes.
   ========================================================================== */

.booking-wrap {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.booking-form {
  padding: 10px 20px 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: var(--ink);
  background: var(--white);
  border-radius: var(--r-panel);
  box-shadow: 0 14px 48px rgba(12, 28, 39, 0.22);
}

.booking-form label {
  min-width: 0;
  min-height: 67px;
  padding: 11px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--border);
}

/* the hidden vehicle input is the form's first child, so field rules count
   by type rather than by position */
.booking-form label:nth-of-type(-n + 4) {
  border-bottom: 1px solid var(--border);
}

.booking-form label:nth-of-type(4n + 1) {
  padding-left: 0;
}

.booking-form label:nth-of-type(4n) {
  padding-right: 0;
  border-right: 0;
}

.booking-form label > span {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-form input,
.booking-form select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  font-size: 14.5px;
  cursor: pointer;
  transition: color 160ms ease;
}

.booking-form input::placeholder {
  color: var(--muted);
}

.booking-form select {
  appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e6e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.booking-form input:hover,
.booking-form select:hover,
.booking-form input:focus,
.booking-form select:focus {
  color: var(--ink);
}

.booking-form input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

/* Styled dropdown list where the browser supports it (Chrome/Edge 135+).
   Other browsers keep the native list with the arrow above. */
@supports (appearance: base-select) {
  .booking-form select,
  .booking-form ::picker(select) {
    appearance: base-select;
  }

  .booking-form select {
    padding-right: 0;
    align-items: center;
    background-image: none;
  }

  .booking-form select::picker-icon {
    content: "";
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a8cf0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat center;
    transition: rotate 200ms ease;
  }

  .booking-form select:open::picker-icon {
    rotate: 180deg;
  }

  .booking-form ::picker(select) {
    min-width: max(anchor-size(width), 210px);
    max-height: 320px;
    margin-block: 10px;
    padding: 6px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 44px -12px rgba(12, 28, 39, 0.3);
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 160ms ease, translate 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete;
  }

  .booking-form select:open::picker(select) {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .booking-form select:open::picker(select) {
      opacity: 0;
      translate: 0 -4px;
    }
  }

  .booking-form option {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 9px;
    font-size: 14.5px;
    cursor: pointer;
  }

  /* placeholder ("e.g. ...") stays in the field but not in the list */
  .booking-form option[value=""] {
    display: none;
  }

  .booking-form option:hover,
  .booking-form option:focus-visible {
    outline: 0;
    background: var(--tint);
  }

  .booking-form option:checked {
    color: var(--blue-deep);
    font-weight: 650;
    background: color-mix(in srgb, var(--blue) 16%, transparent);
  }

  .booking-form option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--blue-strong);
  }
}

.availability {
  align-self: center;
  min-height: 56px;
  margin-left: 18px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--white);
  background: var(--blue);
  border: 0;
  border-radius: var(--r-control);
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms var(--ease);
}

.availability:hover {
  background: var(--blue-strong);
  transform: translateY(-1px);
}

/* ==========================================================================
   Service points under the panel
   ========================================================================== */

.service-points {
  width: min(880px, 88%);
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 18, 35, 0.55);
}

.service-points > div {
  padding: 2px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 600;
}

.service-points > div:last-child {
  border-right: 0;
}

.service-points svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .hero {
    min-height: calc(100svh - 111px);
    padding: 64px 24px 28px;
    background-position: 44% center;
  }

  .hero-content {
    margin-bottom: 64px;
  }

  .booking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-form label,
  .booking-form label:nth-of-type(-n + 4) {
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
  }

  .booking-form label:nth-of-type(odd) {
    padding-left: 0;
    border-right: 1px solid var(--border);
  }

  .booking-form label:nth-of-type(even) {
    padding-right: 0;
    border-right: 0;
  }

  /* the seventh field would otherwise leave a hole beside it */
  .booking-form label:nth-of-type(7) {
    grid-column: 1 / -1;
    padding-inline: 0;
    border-right: 0;
  }

  .availability {
    grid-column: 1 / -1;
    margin: 16px 0 0;
  }

  .service-points {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 64px 16px 24px;
    background-position: 38% center;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .hero-copy br {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-content {
    margin-bottom: 54px;
  }

  .booking-form {
    padding: 8px 16px 16px;
    grid-template-columns: 1fr;
  }

  .booking-form label,
  .booking-form label:nth-of-type(odd),
  .booking-form label:nth-of-type(even),
  .booking-form label:nth-of-type(7) {
    min-height: 62px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .availability {
    width: 100%;
    margin-top: 16px;
  }

  .service-points {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 0;
  }

  .service-points > div:nth-child(2) {
    border-right: 0;
  }

  .service-points > div {
    padding: 0 8px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hw-at *,
  .hw-at *::before,
  .hw-at *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .button:hover,
  .availability:hover {
    transform: none;
  }
}


/* ==========================================================================
   Section 3 — Popular routes and fares
   ========================================================================== */

.routes {
  padding: clamp(64px, 8vw, 104px) 24px;
  background: var(--white);
}

.routes-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

/* --- section header ------------------------------------------------------- */

.routes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.routes-head-text {
  max-width: 640px;
}

.routes-eyebrow {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.routes-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.routes-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
  font-weight: 800;
}

.routes-head h2 em {
  font-style: normal;
  color: inherit;
}

.routes-lede {
  margin: 18px 0 0;
  max-width: 66ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.routes-note {
  flex: 0 1 300px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  color: var(--ink);
  background: var(--tag-fill);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.5;
}

.routes-note svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--blue-strong);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.routes-note strong {
  display: block;
  color: var(--ink);
}

.routes-foot {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.routes-foot a {
  color: var(--blue-strong);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- route cards ---------------------------------------------------------- */

.routegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px;
}

.rc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 350ms var(--ease), border-color 350ms ease;
}

.rc:hover,
.rc:focus-within {
  transform: translateY(-3px);
  border-color: var(--border-lit);
}

.rc.is-featured {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

/* map band */

.rc-map {
  position: relative;
  height: 108px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--blue) 24%, transparent) 1px, transparent 0) 0 0 / 14px 14px,
    color-mix(in srgb, var(--blue) 5%, var(--white));
  border-bottom: 1px solid var(--border);
}

.rc-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rc-arc .rc-path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
}

.rc:hover .rc-arc .rc-path {
  animation: rc-travel 900ms linear infinite;
}

@keyframes rc-travel {
  to {
    stroke-dashoffset: -26;
  }
}

/* endpoints sit in CSS, not the SVG, so they stay round while the
   arc stretches to whatever width the card ends up at */
.rc-dot-a,
.rc-dot-b {
  position: absolute;
  top: 64.8%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.rc-dot-a {
  left: 8.125%;
  background: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 20%, transparent);
}

.rc-dot-b {
  left: 91.875%;
  background: var(--white);
  border: 2.5px solid var(--icon);
}

.rc-pill {
  position: absolute;
  right: 14px;
  top: 14px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rc-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  height: 24px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  background: var(--blue-strong);
  border-radius: var(--r-full);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* card body */

.rc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 0;
}

.rc-body h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

/* two lines reserved so price, specs and chips line up across the grid */
.rc-body > p {
  margin: 6px 0 0;
  min-height: 37px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.rc-price {
  margin-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.rc-price b {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.rc-price b i {
  margin-right: 6px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 3px;
}

.rc-price span {
  color: var(--muted);
  font-size: 13.5px;
}

.rc-price.is-quote b {
  font-size: 1.25rem;
  color: var(--blue-strong);
  letter-spacing: -0.02em;
}

.rc-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}

.rc-specs div {
  padding: 15px 4px 15px 0;
}

.rc-specs div + div {
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.rc-specs dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rc-specs dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
}

.rc-specs svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-includes {
  margin: 0;
  padding: 16px 0 20px;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  list-style: none;
}

.rc-includes li {
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--tag-fill);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 650;
}

.rc-includes svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--blue-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-cta {
  margin: 0 22px 22px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--r-cta);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease;
}

.rc-cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rc:hover .rc-cta,
.rc-cta:hover,
.rc-cta:focus-visible {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.rc:hover .rc-cta svg {
  transform: translateX(3px);
}

.rc.is-featured .rc-cta {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
  .routes {
    padding: 56px 16px;
  }

  .routes-note {
    flex: 1 1 100%;
  }

  .routegrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc:hover .rc-arc .rc-path {
    animation: none;
  }

  .rc:hover,
  .rc:focus-within {
    transform: none;
  }
}

.routes-head { flex-direction: column; align-items: center; text-align: center; }
.routes-lede { margin-inline: auto; }


/* ==========================================================================
   Section 4 — How airport pickup works
   Horizontal 4-step flight line; the rail draws itself in once .is-in lands
   on the section (script.js). Collapses to a vertical timeline under 860px.
   ========================================================================== */

.works {
  padding: clamp(64px, 8vw, 104px) 24px;
  background: var(--band);
}

.works-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.works-eyebrow {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.works-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.works h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
  font-weight: 800;
}

.works h2 em {
  font-style: normal;
  color: inherit;
}

.works-lede {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.works .works-head {
  max-width: 700px;
  margin: 0 auto clamp(48px, 5vw, 72px);
  text-align: center;
}

.works .works-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.works .works-lede {
  max-width: 62ch;
  margin-inline: auto;
}

.flightline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.fl-step {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* rail runs node-centre to node-centre: (column width + gap) minus two radii */
.fl-step:not(:last-child)::before,
.fl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(50% + 31px);
  width: calc(100% - 34px);
  height: 2px;
}

.fl-step::before {
  background: repeating-linear-gradient(90deg, var(--border) 0 7px, transparent 7px 15px);
}

.fl-step::after {
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 820ms cubic-bezier(0.65, 0, 0.35, 1);
}

.works.is-in .fl-step::after {
  transform: scaleX(1);
}

.fl-step:nth-child(2)::after { transition-delay: 380ms; }
.fl-step:nth-child(3)::after { transition-delay: 760ms; }

.fl-node {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease, border-color 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}

.works.is-in .fl-node {
  color: var(--blue-strong);
  border-color: var(--blue);
}

.fl-step:nth-child(2) .fl-node { transition-delay: 380ms; }
.fl-step:nth-child(3) .fl-node { transition-delay: 760ms; }
.fl-step:nth-child(4) .fl-node { transition-delay: 1140ms; }

.fl-step:last-child .fl-node,
.works.is-in .fl-step:last-child .fl-node {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.fl-step:last-child .fl-node svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-step:hover .fl-node {
  transform: scale(1.06);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 12%, transparent);
}

/* chips line up across the row however the copy wraps */
.fl-card {
  margin-top: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fl-card h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.fl-card p:not(.fl-meta) {
  margin: 9px 0 14px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.fl-meta {
  margin: auto 0 0;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  background: var(--tag-fill);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 650;
}

.fl-meta svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue-strong);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.works-foot {
  margin: clamp(40px, 4vw, 56px) 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.works-foot a {
  color: var(--blue-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .flightline {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fl-step {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
  }

  .fl-step:not(:last-child)::before,
  .fl-step:not(:last-child)::after {
    top: 52px;
    left: 22px;
    width: 2px;
    height: calc(100% - 22px);
  }

  .fl-step::before {
    background: repeating-linear-gradient(180deg, var(--border) 0 7px, transparent 7px 15px);
  }

  .fl-step::after {
    transform: scaleY(0);
    transform-origin: center top;
  }

  .works.is-in .fl-step::after {
    transform: scaleY(1);
  }

  .fl-card {
    margin-top: 0;
    padding-top: 9px;
    align-items: flex-start;
    text-align: left;
  }

  .works-foot {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .works {
    padding: 56px 16px;
  }

  .works .works-eyebrow::after {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .fl-step:hover .fl-node {
    transform: none;
  }
}


/* ==========================================================================
   Section 5 — Pickup and drop-off details
   Two tabs (arrival / departure) over one panel: a checklist grid plus an
   aside card carrying the fact people actually ask for. Tabs are driven by
   script.js; the sliding indicator reads data-active on .pd-tabs.
   ========================================================================== */

.pd {
  padding: clamp(64px, 8vw, 104px) 24px;
  background: var(--white);
}

.pd-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

/* --- section header ------------------------------------------------------- */

.pd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-bottom: clamp(32px, 3.5vw, 44px);
}

.pd-head-text {
  flex: 1 1 460px;
  max-width: 620px;
}

.pd-eyebrow {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pd-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.pd-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
  font-weight: 800;
}

.pd-head h2 em {
  font-style: normal;
  color: inherit;
}

.pd-lede {
  margin: 18px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- tabs ----------------------------------------------------------------- */

.pd-tabs {
  position: relative;
  flex: 0 0 auto;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* the pill that slides between the two triggers */
.pd-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 5px;
  width: calc(50% - 7px);
  height: calc(100% - 10px);
  background: var(--blue-strong);
  border-radius: 999px;
  box-shadow: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-tabs[data-active="1"]::before {
  transform: translateX(calc(100% + 4px));
}

.pd-tab {
  position: relative;
  z-index: 1;
  padding: 11px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 240ms ease;
}

.pd-tab[aria-selected="true"] {
  color: var(--white);
}

.pd-tab:not([aria-selected="true"]):hover {
  color: var(--ink);
}

.pd-tab:focus-visible {
  outline: 2px solid var(--blue-strong);
  outline-offset: 3px;
}

.pd-tab svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- panel ---------------------------------------------------------------- */

.pd-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
  animation: pd-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pd-panel[hidden] {
  display: none;
}

@keyframes pd-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pd-panel:focus-visible {
  outline: 2px solid var(--blue-strong);
  outline-offset: 6px;
  border-radius: 18px;
}

/* --- checklist ------------------------------------------------------------ */

.pd-list {
  margin: 0;
  padding: clamp(18px, 2vw, 26px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(18px, 2vw, 30px);
  align-content: space-between;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.pd-list li {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  border-top: 1px solid var(--border);
}

/* the first row of each column keeps its top edge clean */
.pd-list li:nth-child(-n + 2) {
  padding-top: 4px;
  border-top: 0;
}

/* an odd last item runs the full width instead of leaving a hole */
.pd-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.pd-ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--tint);
  border-radius: var(--r-lg);
}

.pd-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-list h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pd-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* --- aside ---------------------------------------------------------------- */

.pd-aside {
  padding: clamp(20px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  color: color-mix(in srgb, var(--white) 86%, var(--blue));
  background: radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--blue) 55%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-strong) 100%);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--blue-deep) 70%, transparent);
}

.pd-aside-tag {
  margin: 0 0 12px;
  align-self: flex-start;
  justify-self: start;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  background: color-mix(in srgb, var(--white) 20%, transparent);
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-aside h3 {
  margin: 0;
  color: var(--white);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.pd-aside > p {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--white) 80%, var(--blue));
  font-size: 13.5px;
  line-height: 1.6;
}

.pd-steps {
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: pd-step;
}

.pd-steps li {
  padding: 11px 0;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13.5px;
  line-height: 1.5;
}

.pd-steps li::before {
  counter-increment: pd-step;
  content: counter(pd-step, decimal-leading-zero);
  color: color-mix(in srgb, var(--white) 72%, var(--blue));
  font-size: 0.5625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pd-buffer {
  margin: 18px 0 20px;
}

.pd-buffer div {
  padding: 13px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-buffer dt {
  color: color-mix(in srgb, var(--white) 80%, var(--blue));
  font-size: 13.5px;
}

.pd-buffer dd {
  margin: 0;
  color: var(--white);
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pd-aside-cta {
  margin-top: auto;
  align-self: flex-start;
  justify-self: start;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
  box-shadow: 0 1px 2px rgba(8, 12, 18, 0.12);
}

.pd-aside-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(8, 12, 18, 0.45);
}

.pd-aside-cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-foot {
  margin: clamp(28px, 3vw, 40px) 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pd-foot a {
  color: var(--blue-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .pd-panel {
    grid-template-columns: 1fr;
  }

  /* the aside turns into a wide two-column strip under the checklist */
  .pd-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 36px;
    align-items: start;
  }

  .pd-steps,
  .pd-buffer {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .pd-list {
    grid-template-columns: 1fr;
  }

  .pd-list li,
  .pd-list li:nth-child(2) {
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  .pd-list li:first-child {
    padding-top: 4px;
    border-top: 0;
  }

  .pd-aside {
    grid-template-columns: 1fr;
  }

  .pd-steps,
  .pd-buffer {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .pd {
    padding: 56px 16px;
  }

  .pd-tabs {
    width: 100%;
  }

  .pd-tab {
    padding: 11px 10px;
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-panel {
    animation: none;
  }

  .pd-tabs::before {
    transition: none;
  }

  .pd-aside-cta:hover {
    transform: none;
  }
}

.pd-head { flex-direction: column; align-items: center; text-align: center; }
.pd-head-text { flex: none; }
.pd-lede { margin-inline: auto; }

.pd-panel:not(:has(.pd-aside)) { grid-template-columns: minmax(0, 1fr); }


/* ==========================================================================
   Choose your vehicle
   Tall photo cards: the model name sits on the dark evening sky of each shot,
   the car stays in the lower frame. Seats and bags get the big numerals,
   because on an airport run that is the whole decision.
   ========================================================================== */

.fleet {
  padding: clamp(64px, 8vw, 104px) 24px;
  background: var(--white);
}

.fleet-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.fleet-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.fleet-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
  font-weight: 800;
}

.fleet-head h2 em {
  font-style: normal;
  color: inherit;
}

.fleet-lede {
  max-width: 66ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- grid ----------------------------------------------------------------- */

.fleet-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.vc {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 350ms var(--ease), border-color 350ms ease;
}

.vc:hover {
  transform: translateY(-3px);
  border-color: var(--border-lit);
}

.vc.is-selected {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

/* --- photo ---------------------------------------------------------------- */

.vc-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--blue-deep);
}

.vc-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 74%;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vc:hover .vc-photo img {
  transform: scale(1.05);
}

/* the sky in every shot is dark already; the scrim only guarantees contrast */
.vc-photo figcaption {
  position: absolute;
  inset: 0 0 auto;
  padding: 20px 20px 48px;
  background: linear-gradient(180deg, rgba(8, 14, 22, 0.72) 0%, rgba(8, 14, 22, 0) 100%);
}

.vc-type {
  display: block;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.vc-model {
  margin: 4px 0 0;
  color: var(--white);
  font-size: clamp(20px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

/* --- body ----------------------------------------------------------------- */

.vc-body {
  flex: 1;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
}

.vc-cap {
  margin: 0 -20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.vc-cap div {
  padding: 16px 20px 14px;
}

.vc-cap div + div {
  border-left: 1px solid var(--border);
}

.vc-cap dt {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.vc-cap dd {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.vc-cap svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vc-cap b {
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.vc-facts {
  margin: 0;
  padding: 14px 0 18px;
  list-style: none;
  display: grid;
  gap: 9px;
}

.vc-facts li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.vc-facts svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- price + select ------------------------------------------------------- */

.vc-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.vc-price {
  margin: 0;
  min-height: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.vc-price span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.vc-price b {
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vc-price b i {
  margin-right: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 3px;
}

.vc-price a {
  color: var(--blue-strong);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.vc-price a:hover {
  color: var(--ink);
}

.vc-select {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-cta);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}

.vc-select:hover {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.vc-select:focus-visible,
.vc-price a:focus-visible,
.fleet-status a:focus-visible {}

.vc-select svg {
  width: 17px;
  height: 17px;
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vc-select-on {
  display: none;
}

.vc-select[aria-pressed="true"] {
  color: var(--white);
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  box-shadow: none;
}

.vc-select[aria-pressed="true"] .vc-select-idle {
  display: none;
}

.vc-select[aria-pressed="true"] .vc-select-on,
.vc-select[aria-pressed="true"] svg {
  display: inline;
}

/* --- status line ---------------------------------------------------------- */

.fleet-status {
  margin: clamp(24px, 3vw, 34px) 0 0;
  color: var(--muted);
  font-size: 14.5px;
  text-align: center;
}

.fleet-status b {
  color: var(--ink);
}

.fleet-status a {
  color: var(--blue-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .fleet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vc-photo {
    aspect-ratio: 16 / 12;
  }
}

@media (max-width: 640px) {
  .fleet {
    padding: 56px 16px;
  }

  .fleet-grid {
    grid-template-columns: 1fr;
  }

  .vc-photo {
    aspect-ratio: 4 / 3.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc,
  .vc-photo img {
    transition: none;
  }

  .vc:hover {
    transform: none;
  }

  .vc:hover .vc-photo img {
    transform: none;
  }
}

.fleet-head { margin-inline: auto; text-align: center; }
.fleet-lede { margin-inline: auto; }


/* ==========================================================================
   Section 6 — What the fare includes
   One fare statement split in two: everything the quoted price already covers,
   and the short list that can be added on top. A dark total strip closes it,
   so the section ends on the number rather than on a bullet.
   ========================================================================== */

.fare {
  padding: clamp(64px, 8vw, 104px) 24px;
  background: var(--band);
}

.fare-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

/* --- section header ------------------------------------------------------- */

.fare-head {
  max-width: 700px;
  margin: 0 auto clamp(40px, 4.5vw, 60px);
  text-align: center;
}

.fare-eyebrow {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fare-eyebrow::before,
.fare-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.fare-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
  font-weight: 800;
}

.fare-head h2 em {
  font-style: normal;
  color: inherit;
}

.fare-lede {
  max-width: 62ch;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- the sheet ------------------------------------------------------------ */

.fare-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.fare-col {
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
}

/* the extras side sits back a step: quieter surface, quieter marks */
.fare-col.is-extra {
  background: var(--band);
  border-left: 1px solid var(--border);
}

.fare-col-head {
  padding-bottom: 18px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}

.fare-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--tint);
  border-radius: var(--r-lg);
}

.fare-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-extra .fare-mark {
  background: var(--tag-fill);
  border: 1px solid var(--border);
}

.is-extra .fare-mark svg {
  stroke: var(--muted);
}

.fare-col-head h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.fare-col-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --- the lists ------------------------------------------------------------ */

.fare-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fare-list li {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 13px;
  align-items: center;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.fare-list svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-extra .fare-list li {
  color: var(--ink);
  font-weight: 450;
  border-top-color: var(--border);
}

.is-extra .fare-list svg {
  stroke: var(--muted);
  stroke-width: 2;
}

/* pinned to the foot of the shorter column so the two sides end level */
.fare-col-note {
  margin: auto 0 0;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.fare-col-note svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- total strip ---------------------------------------------------------- */

.fare-total {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  background:
    radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--blue) 55%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-strong) 100%);
}

.fare-total b {
  display: block;
  color: var(--white);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.fare-total span {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--white) 80%, var(--blue));
  font-size: 13.5px;
}

.fare-total-cta {
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  background: var(--white);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.fare-total-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(8, 12, 18, 0.45);
}

.fare-total-cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fare-foot {
  margin: clamp(26px, 3vw, 38px) 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.fare-foot a {
  color: var(--blue-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .fare-sheet {
    grid-template-columns: 1fr;
  }

  .fare-col.is-extra {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .fare-col-note {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .fare {
    padding: 56px 16px;
  }

  .fare-list li {
    font-size: 14.5px;
  }

  .fare-total {
    align-items: stretch;
    flex-direction: column;
  }

  .fare-total-cta {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fare-total-cta:hover {
    transform: none;
  }
}

/* Hero form: the home hero's search panel (hw-mustang-hero.css), minus the tabs. */
.hw-at-search {
  --hw-blue: #53a3db;
  --hw-blue-dark: #3c8fce;
  --hw-ink: #202a36;
  width: 100%;
  margin: 0;
}
.hw-at-search .hw-transfer-form { padding-top: 14px; }

/* The .hw-at link reset above isn't in a layer, so it beat Tailwind's text-white on the CTA. */
#at-cta .text-white { color: #fff; }