/* ==========================================================================
   Charlie — public website
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   The page's one big statement. Depth comes from four stacked layers rather
   than a photograph: a drifting colour mesh, a route diagram that draws
   itself, a fine grid, and grain over the top.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-1000);
  color: var(--on-dark);
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: var(--mesh-red);
  transform-origin: 60% 30%;
}

/* Fine engineering grid, faded out toward the edges. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 15%, transparent 72%);
}

/* The route line: a stylised journey, echoing the pin in the logo. */
.hero__route {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.35;
  /* Kept clear of the headline so it reads as atmosphere, not clutter. */
  mask-image: linear-gradient(180deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
}
.hero__route path {
  fill: none;
  stroke: rgba(var(--red-rgb), 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1400);
  animation: draw 3.6s var(--ease-swift) 500ms both;
}
.hero__route .route-ghost {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-dasharray: none;
  animation: none;
}
.hero__route circle {
  fill: var(--red-500);
  filter: drop-shadow(0 0 10px rgba(var(--red-rgb), 0.9));
}

.hero__inner {
  display: grid;
  gap: var(--sp-12);
  /* Clears the overlaid header, which sits inside the hero rather than above it. */
  padding-block:
    calc(var(--header-h) + clamp(2.5rem, 1.5rem + 6vw, 5.5rem))
    clamp(3rem, 2rem + 5vw, 6rem);
}
@media (min-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: clamp(3rem, 5vw, 6rem);
  }
}

/* ---- Status chip ----
   `.hero__eyebrow` is kept as an alias: the service landing pages use that
   name, and silently losing the pill styling is worse than one extra
   selector. */
.hero__chip,
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.42rem 0.95rem 0.42rem 0.45rem;
  border-radius: var(--r-full);
  border: 1px solid var(--on-dark-line);
  background: var(--on-dark-fill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--text-xs);
  font-weight: 550;
  letter-spacing: var(--tracking-wide);
  color: var(--on-dark);
}
.hero__chip .dot,
.hero__eyebrow .dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--red-500);
  color: #fff;
  flex: none;
}

/* ---- Headline ---- */
.hero h1 {
  margin-top: var(--sp-6);
  font-size: clamp(2.9rem, 1.9rem + 3.6vw, 4.9rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: #fff;
}
/* Let the authored line break stand on wide screens; collapse it on narrow
   ones where the line would otherwise overflow. */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.4rem, 1.4rem + 6vw, 3.2rem); }
  .hero h1 br { display: none; }
}

.hero__lead {
  margin-top: var(--sp-6);
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* ---- Proof strip ---- */
.hero__proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--sp-10);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--on-dark-line);
}
.hero__proof-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero__proof-label {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-dark-subtle);
}

/* --------------------------------------------------------------------------
   BOOKING SELECTOR — glass over the live background
   -------------------------------------------------------------------------- */
/* The glow lives on a wrapper, not on the panel itself: the panel clips its
   own overflow to keep the tab corners crisp, which would otherwise trap the
   bleed inside and tint the white form pink. */
.booker-wrap {
  position: relative;
  isolation: isolate;
}
.booker-wrap::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 42%, rgba(var(--red-rgb), 0.42), transparent 72%);
  filter: blur(46px);
  pointer-events: none;
}

.booker {
  position: relative;
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  color: var(--text);
}

.booker__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--sp-2);
  gap: 2px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--border-subtle);
}
.booker__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  text-align: center;
  transition: color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.booker__tab .c-icon { transition: transform var(--dur-3) var(--ease-spring); }
.booker__tab:hover { color: var(--ink-900); background: rgba(255, 255, 255, 0.7); }
.booker__tab:hover .c-icon { transform: translateY(-3px); }
.booker__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--red-600);
  box-shadow: var(--shadow-sm);
}
.booker__tab[aria-selected="true"] .c-icon { transform: translateY(-1px); }
@media (min-width: 560px) {
  .booker__tab { font-size: var(--text-sm); padding: var(--sp-4) var(--sp-3); }
}

.booker__panel { padding: var(--sp-6); }
.booker__panel[hidden] { display: none; }
@media (min-width: 560px) { .booker__panel { padding: var(--sp-7); } }

.booker__note {
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  text-align: center;
}

/* --------------------------------------------------------------------------
   MARQUEE STRIP
   -------------------------------------------------------------------------- */
.strip {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-5);
  background: var(--ink-950);
  border-top: 1px solid var(--on-dark-line);
  border-bottom: 1px solid var(--on-dark-line);
}
.strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--on-dark-subtle);
  white-space: nowrap;
}
.strip__item .c-icon { color: var(--red-500); }
.strip__dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(var(--red-rgb), 0.8);
  flex: none;
}

/* --------------------------------------------------------------------------
   SECTION SHELLS
   -------------------------------------------------------------------------- */
.section--dark {
  position: relative;
  background: var(--ink-1000);
  color: var(--on-dark-muted);
  overflow: clip;
  isolation: isolate;
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70rem 40rem at 85% -10%, rgba(var(--red-rgb), 0.16), transparent 60%);
  pointer-events: none;
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .section-head p { color: var(--on-dark-muted); }
.section--sunken { background: var(--ink-50); }

/* Width is set in rem, not ch: `ch` resolves against this element's own font
   size, which is the body size — so `58ch` here would squeeze a 3rem display
   heading into three short lines. The prose below it keeps a ch measure,
   where it is the right unit. */
.section-head { max-width: 46rem; margin-bottom: var(--sp-12); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--sp-5); }
.section-head p {
  margin-top: var(--sp-5);
  max-width: 58ch;
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}
.section-head--center p { margin-inline: auto; }

/* Compact hero used by the service landing pages: the same lit background as
   the homepage but generated in CSS, since these pages carry no booking panel
   and shouldn't need the extra markup. */
.hero--compact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--mesh-red);
  pointer-events: none;
}
.hero--compact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(110% 90% at 30% 10%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(110% 90% at 30% 10%, #000 10%, transparent 70%);
  pointer-events: none;
}
.hero--compact .container {
  position: relative;
  z-index: 1;
  padding-block:
    calc(var(--header-h) + clamp(2.5rem, 1.5rem + 5vw, 5rem))
    clamp(3rem, 2rem + 4vw, 5rem);
}
.hero--compact h1 {
  margin-top: var(--sp-5);
  font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
  max-width: 18ch;
}

/* --------------------------------------------------------------------------
   SERVICE CARDS
   -------------------------------------------------------------------------- */
.services { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(4, 1fr); } }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  color: var(--on-dark-muted);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-3) var(--ease-swift),
    border-color var(--dur-3) var(--ease-swift),
    box-shadow var(--dur-3) var(--ease-swift);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--red-rgb), 0.45);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  text-decoration: none;
}

/* Oversized ghost numeral — editorial, and free of any asset. */
.service-card__index {
  position: absolute;
  top: -0.32em;
  right: -0.06em;
  font-family: var(--font-display);
  font-size: 11rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  z-index: -1;
  transition: color var(--dur-4) var(--ease-out);
}
.service-card:hover .service-card__index { color: rgba(var(--red-rgb), 0.14); }

.service-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--sp-6);
  border-radius: var(--r-md);
  border: 1px solid var(--on-dark-line);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background-color var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-spring);
}
.service-card:hover .service-card__icon {
  background: var(--red-500);
  border-color: var(--red-500);
  transform: rotate(-5deg) scale(1.08);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: #fff;
}
.service-card__desc {
  margin-top: var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--on-dark-muted);
  flex: 1;
}
.service-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
}
.service-card__meta .c-icon {
  color: var(--red-400);
  transition: transform var(--dur-3) var(--ease-spring);
}
.service-card:hover .service-card__meta .c-icon { transform: translateX(6px); }
.service-card__price { color: var(--on-dark-subtle); font-weight: 500; }

/* --------------------------------------------------------------------------
   BENTO — asymmetric feature grid
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .bento { grid-template-columns: repeat(6, 1fr); } }

.bento__cell {
  position: relative;
  padding: var(--sp-7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-3) var(--ease-swift),
              box-shadow var(--dur-3) var(--ease-swift),
              border-color var(--dur-3) var(--ease-swift);
}
.bento__cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}
@media (min-width: 1060px) {
  .bento__cell--wide  { grid-column: span 4; }
  .bento__cell--half  { grid-column: span 3; }
  .bento__cell--third { grid-column: span 2; }
}

.bento__cell--dark {
  background: var(--ink-1000);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-muted);
}
.bento__cell--dark h3 { color: #fff; }
.bento__cell--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(28rem 20rem at 85% 0%, rgba(var(--red-rgb), 0.28), transparent 62%);
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--red-50);
  color: var(--red-600);
}
.bento__cell--dark .bento__icon {
  background: rgba(var(--red-rgb), 0.16);
  color: var(--red-400);
  border: 1px solid rgba(var(--red-rgb), 0.25);
}
.bento__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-950);
}
.bento__cell--dark .bento__title { color: #fff; }
.bento__desc {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
.bento__cell--dark .bento__desc { color: var(--on-dark-muted); }

/* A big number used as the subject of a bento cell. */
.bento__figure {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
}
.bento__cell--dark .bento__figure { color: #fff; }

/* --------------------------------------------------------------------------
   HOW IT WORKS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-8); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }

.step { position: relative; counter-increment: step; padding-top: var(--sp-8); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  color: var(--red-500);
}
.step::after {
  content: "";
  position: absolute;
  top: 9px;
  inset-inline-start: 44px;
  inset-inline-end: calc(var(--sp-6) * -1);
  height: 1px;
  background: linear-gradient(90deg, var(--on-dark-line), transparent);
}
@media (max-width: 899px) { .step::after { display: none; } }
.steps > .step:last-child::after { display: none; }
.step__title {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-950);
}
.section--dark .step__title { color: #fff; }
.step__desc { margin-top: var(--sp-3); color: var(--text-muted); line-height: var(--leading-normal); }
.section--dark .step__desc { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   VEHICLE CARDS
   No stock photography: the artwork is generated from the vehicle's own
   category, so an un-photographed car still looks deliberate rather than
   broken. A real photo simply replaces the generated layer.
   -------------------------------------------------------------------------- */
.vehicle-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 620px)  { .vehicle-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }

.vehicle-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-swift),
              box-shadow var(--dur-3) var(--ease-swift),
              border-color var(--dur-3) var(--ease-swift);
}
.vehicle-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}

.vehicle-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  background: var(--art-bg, linear-gradient(145deg, #1b2030, #0d1017));
}
.vehicle-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-5) var(--ease-swift);
}
.vehicle-card:hover .vehicle-card__media img { transform: scale(1.06); }

/* Generated artwork: a lit gradient field, the brand name ghosted large, and
   a clean silhouette of the car. */
.vehicle-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vehicle-art::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: var(--art-glow, radial-gradient(circle, rgba(var(--red-rgb), 0.45), transparent 62%));
  filter: blur(30px);
}
.vehicle-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.vehicle-art__word {
  position: absolute;
  bottom: 0.4rem;
  left: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  pointer-events: none;
}
.vehicle-art__glyph {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5));
  transition: transform var(--dur-5) var(--ease-swift);
}
.vehicle-card:hover .vehicle-art__glyph { transform: translateX(7px) scale(1.04); }

.vehicle-card__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 17, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.vehicle-card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.vehicle-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-950);
}
.vehicle-card__sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.spec { display: inline-flex; align-items: center; gap: 0.4rem; }
.spec .c-icon { color: var(--ink-400); }

.vehicle-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
}
.price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-950);
  line-height: 1;
}
.price__unit { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.price__total { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 5px; font-weight: 500; }

/* --------------------------------------------------------------------------
   PACKAGE CARDS
   -------------------------------------------------------------------------- */
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-7);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  transition: all var(--dur-3) var(--ease-swift);
}
.package-card:hover { border-color: var(--red-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.package-card--featured {
  background: var(--ink-1000);
  border-color: transparent;
  box-shadow: var(--shadow-xl);
  color: var(--on-dark-muted);
}
.package-card--featured h3,
.package-card--featured .package-card__price { color: #fff; }
.package-card--featured .package-card__list li { color: var(--on-dark-muted); }
.package-card--featured::before {
  content: "Most booked";
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  padding: 0.24rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--red-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.package-card__price {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--ink-950);
  line-height: 1;
}
.package-card__list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-7); flex: 1; }
.package-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.package-card__list .c-icon { color: var(--success-500); margin-top: 2px; flex: none; }
.package-card--featured .package-card__list .c-icon { color: #3DD68C; }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(3rem, 2rem + 5vw, 5.5rem);
  border-radius: var(--r-2xl);
  background: var(--ink-1000);
  color: var(--on-dark-muted);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45rem 30rem at 88% 115%, rgba(var(--red-rgb), 0.5), transparent 62%),
    radial-gradient(35rem 25rem at 8% -20%, rgba(120, 60, 255, 0.18), transparent 60%);
}
.cta-band h2 { color: #fff; max-width: 16ch; font-size: var(--text-4xl); }
.cta-band p { margin-top: var(--sp-5); max-width: 48ch; color: var(--on-dark-muted); font-size: var(--text-lg); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   CITY CARDS
   -------------------------------------------------------------------------- */
.city-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: all var(--dur-3) var(--ease-swift);
}
.city-card:hover {
  border-color: var(--ink-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.city-card__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-950);
}
.city-card__name .c-icon { color: var(--red-500); }
.city-card__country { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); margin-top: 5px; }
.city-card__services { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.city-card__service {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-xs);
  background: var(--ink-50);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-600);
}

/* --------------------------------------------------------------------------
   SPLIT / CHECKLIST
   -------------------------------------------------------------------------- */
/* `minmax(0, 1fr)`, not `1fr`: an implicit grid column is `auto`-sized, which
   never goes below its content's min-content width. The car booking form puts
   a <fieldset> in here, and a fieldset's min-content is its widest un-wrapped
   child — which stretched this page to 1712px on a 390px phone. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); }
  .split--reverse > *:first-child { order: 2; }
}

/* A booking form's two sides are not equal partners the way a marketing
   page's are. The price card is a handful of lines and needs nowhere near
   half the page; the form carries the map, which wants as much width as it
   can get to make a drawn route through a city's streets legible. Capping
   the aside rather than giving the form a fixed share means the map keeps
   gaining width as the container does, all the way up to the 1500px
   `.container--wide` this page now uses. */
@media (min-width: 960px) {
  .split--booking { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-8); }
}

.checklist { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); line-height: var(--leading-normal); }
.checklist .c-icon {
  flex: none;
  margin-top: 3px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--success-50);
  color: var(--success-700);
}
.section--dark .checklist .c-icon { background: rgba(14, 160, 110, 0.18); color: #4ADE9E; }

/* --------------------------------------------------------------------------
   FEATURE ROW
   -------------------------------------------------------------------------- */
.feature { display: flex; gap: var(--sp-5); padding: var(--sp-5) 0; }
.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--red-50);
  color: var(--red-600);
}
.section--dark .feature__icon {
  background: rgba(var(--red-rgb), 0.14);
  color: var(--red-400);
  border: 1px solid rgba(var(--red-rgb), 0.22);
}
.feature__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-950);
}
.section--dark .feature__title { color: #fff; }
.feature__desc { margin-top: var(--sp-2); color: var(--text-muted); line-height: var(--leading-normal); }
.section--dark .feature__desc { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   VEHICLE DETAIL
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: var(--sp-3); }
.gallery__main {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--art-bg, linear-gradient(145deg, #1b2030, #0d1017));
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.gallery__thumb {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--ink-100);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--red-500); }

.booking-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

/* --------------------------------------------------------------------------
   AVAILABILITY STRIP
   -------------------------------------------------------------------------- */
.avail-strip { display: flex; gap: 3px; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: thin; }
.avail-day { flex: none; width: 34px; text-align: center; font-size: 10px; color: var(--text-subtle); }
.avail-day__bar {
  height: 32px;
  border-radius: var(--r-xs);
  margin-bottom: 5px;
  background: var(--success-50);
  border: 1px solid #BFEBD8;
}
.avail-day--booked .avail-day__bar { background: var(--danger-50); border-color: #F7CBC6; }
.avail-day--blocked .avail-day__bar { background: var(--ink-100); border-color: var(--ink-200); }

/* --------------------------------------------------------------------------
   AUTH
   -------------------------------------------------------------------------- */
.auth { display: grid; min-height: calc(100dvh - var(--header-h)); }
@media (min-width: 1000px) { .auth { grid-template-columns: 1fr 1fr; } }

.auth__form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--gutter) var(--sp-16);
}
.auth__form { width: min(440px, 100%); }
.auth__form h1 { font-size: var(--text-3xl); }
.auth__form > p { margin-top: var(--sp-4); color: var(--text-muted); }
.auth__body { margin-top: var(--sp-8); }
.auth__foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  color: var(--text-muted);
  text-align: center;
}

.auth__aside {
  display: none;
  position: relative;
  padding: var(--sp-16) clamp(2.5rem, 5vw, 5rem);
  background: var(--ink-1000);
  color: var(--on-dark-muted);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1000px) { .auth__aside { display: flex; flex-direction: column; justify-content: center; } }
.auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mesh-red);
}
.auth__aside h2 { color: #fff; max-width: 14ch; font-size: var(--text-4xl); }
.auth__quote { margin-top: var(--sp-6); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 38ch; }

/* --------------------------------------------------------------------------
   CONFIRMATION
   -------------------------------------------------------------------------- */
.confirm-hero { text-align: center; padding-block: var(--sp-16) var(--sp-8); }
.confirm-hero__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-7);
  border-radius: var(--r-full);
  background: var(--success-50);
  color: var(--success-500);
  box-shadow: 0 0 0 12px rgba(14, 160, 110, 0.07);
  animation: scale-in var(--dur-5) var(--ease-spring) both;
}
.reference-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--ink-25);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-950);
}

/* --------------------------------------------------------------------------
   FILTER BAR
   -------------------------------------------------------------------------- */
.filter-bar {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
  .filter-bar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
}
.filter-bar .field { margin-bottom: 0; }
.filter-bar .field__label { font-size: var(--text-xs); }
.filter-bar .input,
.filter-bar .select { min-height: 46px; padding-block: 0.65rem; }
/* The submit button is a sibling of three 46px controls on the same
   baseline. Left at the default it sat 8px short and read as an afterthought
   pushed up against them rather than part of the row. */
.filter-bar .field .btn { min-height: 46px; }

/* A tab strip belongs inside the bar it filters, spanning the full width
   above the fields. Floated out beside them it competed with the search
   controls for the same row, and on anything narrower than a desktop the
   two wrapped into a stack of loose parts — which is what the bookings
   screen looked like. */
.filter-bar .tabs { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   LOCATION PICKER

   Dropping the two ends of a trip onto a map, on the booking form.

   Shares no classes with the dispatch board's map on purpose: that one is a
   staff tool on an authenticated page and can be tall and dense, this one
   sits inside a form a customer is filling in on a phone and has to leave
   room for the fields above and below it. Two sets of rules is cheaper than
   one set with four exceptions.
   -------------------------------------------------------------------------- */
.picker-wrap {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.picker-wrap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.picker-wrap__ends { display: flex; gap: var(--sp-2); }

/* On a phone the three controls share 320px and the search box collapses to
   about three characters — wide enough to show "Sea" of "Search". Stack them
   instead: the box gets the full width, the two buttons share the row under
   it. This is the viewport most bookings are made on, so it is the one the
   layout should be designed around rather than squeezed into. */
@media (max-width: 620px) {
  .picker-wrap__head { display: block; }
  .picker-wrap__head .field { margin-bottom: var(--sp-3); }
  .picker-wrap__ends > .btn { flex: 1; justify-content: center; }
  .picker__locate { width: 100%; justify-content: center; }
}

/* "A taxi, from here, now" is the commonest booking there is, so the
   control that says "here" sits on its own line above the map rather than
   competing for space with the other three. */
.picker__locate { margin-bottom: var(--sp-3); }
.picker-wrap__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  min-width: 0;
}

/* Which end the next tap places. Without this the map is a coin toss. */
.picker__end.is-active {
  background: var(--ink-950);
  border-color: var(--ink-950);
  color: #fff;
}

/* Sized identically whichever renderer is inside it — Google's own map
   draws its own zoom buttons and attribution once it mounts, so the
   .picker__controls / .picker__credit markup below is OSM-only and simply
   isn't rendered in the Google branch of the template. */
.picker {
  position: relative;
  /* Large enough to actually read the road a route follows, not just see
     that two pins exist. The first size, 360–640px, was enough to place a
     pin accurately but too short to make sense of a drawn route through a
     city's streets. Still bounded by the viewport — a map taller than the
     screen makes the form feel like it has no end — but the bound itself
     is now generous rather than conservative. */
  height: clamp(480px, 72vh, 860px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  touch-action: none;
  cursor: crosshair;
  contain: strict;
}
.picker__layer { position: absolute; inset: 0; }
.picker__tile {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 256px;
  height: 256px;
  user-select: none;
  -webkit-user-drag: none;
}

.picker__pin {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  /* The transform puts the element's origin on the coordinate; the margin
     lifts the dot so its centre, not its corner, is the place meant. */
  margin: -11px 0 0 -11px;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.picker__dot {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: var(--r-full);
  background: var(--ink-950);
  box-shadow: 0 2px 8px rgba(16, 16, 20, 0.35);
}
.picker__pin--dropoff .picker__dot { background: var(--red-500); }
.picker__flag {
  position: absolute;
  top: -26px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--ink-950);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.picker__pin--dropoff .picker__flag { background: var(--red-500); }

.picker__controls {
  position: absolute;
  top: var(--sp-3);
  inset-inline-end: var(--sp-3);
  display: grid;
  gap: 1px;
  z-index: 4;
}
.picker__controls button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-800);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.picker__controls button:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.picker__controls button:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }

.picker__credit {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 2;
  padding: 2px 6px;
  border-start-start-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  color: var(--ink-600);
}

.picker__status { min-width: 0; flex: 1; }
.picker__distance {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  white-space: nowrap;
}
/* An approximated distance has to look different from a measured one, or the
   word "approximate" beside it is the only thing carrying the difference. */
.picker__distance.is-estimate { color: var(--text-muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   Route options (Google's map, route-options.js)
   -------------------------------------------------------------------------- */
.route-pill {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-950);
  font: 600 13px/1.2 var(--font-sans, system-ui, sans-serif);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  white-space: nowrap;
}
.route-pill--selected { background: #1A3FD8; color: #fff; }

.route-sheet {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.route-sheet[hidden] { display: none; }
.route-sheet__title { font-weight: 650; font-size: var(--text-md); }
.route-sheet__modes { display: flex; gap: var(--sp-2); margin: var(--sp-3) 0; }
.route-sheet__mode {
  padding: 6px 14px;
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.route-sheet__mode.is-active { background: #E8F0FE; border-color: #1A3FD8; color: #1A3FD8; }
.route-sheet__headline { font-size: 22px; font-weight: 500; margin: 0; }
.route-sheet__time.is-fast { color: #188038; }
.route-sheet__time.is-slow { color: #B06000; }
.route-sheet__how { color: var(--text-muted, #6B7280); margin: 2px 0 var(--sp-3); }
.route-sheet__options { display: grid; gap: 4px; }
.route-sheet__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
}
.route-sheet__option:hover, .route-sheet__option.is-selected { background: #F1F3F4; }
.route-sheet__note { font-size: var(--text-sm); color: var(--text-muted, #6B7280); margin: var(--sp-3) 0 0; }
.route-sheet__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }

.picker-recent {
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.08));
  overflow: hidden;
}
.picker-recent[hidden] { display: none; }
.picker-recent__head { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-weight: 650; color: var(--text-muted, #6B7280); }
.picker-recent__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  border: 0;
  border-top: 1px solid var(--border-subtle, #E5E7EB);
  background: #fff;
  cursor: pointer;
}
.picker-recent__item:hover { background: #F1F3F4; }