@charset "utf-8";

/* ==========================================================================
   RoadStar Cars Rent — Valencia
   Utility-first rental tool. The page's job is to get someone from "I need a
   car" to a priced WhatsApp message in under a minute, so density and
   scannability beat decoration everywhere.

   Two signatures carry the design:
     1. The plate badge — a Spanish licence plate proportion holding the daily
        rate. Automotive, unmistakably Spanish, and it encodes the one number
        the visitor is scanning for rather than decorating the card.
     2. Live re-pricing — dates entered once in the hero re-price every card in
        the grid to the visitor's actual trip total.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-1.cd56e2ec63d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-1.c5e41aa17045.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The hidden attribute has to beat any component that sets its own display.
   .car is a flex column, so without this a filtered-out card stayed on screen
   and only the result counter moved — which read as "the filters do nothing". */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Violet-cast neutrals, pulled toward the client's existing brand purple so
     the palette reads as one family rather than grey plus an accent. */
  --ink: #17111c;
  --ink-2: #443a4e;
  --ink-3: #6e6478;
  --rule: #e2dce9;
  --rule-soft: #eee9f2;
  --paper: #ffffff;
  --haze: #f6f3f8;
  --haze-2: #efeaf4;

  /* The client's mark is #A848C0. That fails contrast as an action colour, so
     the interactive purple is darkened and the original is kept for tints. */
  --brand: #8a25a8;
  --brand-deep: #5f186f;
  --brand-haze: #f7eafb;
  --brand-line: #e6c9ef;

  /* EU plate blue. Structural, not decorative: it only ever appears on the
     plate badge's country strip. */
  --plate-blue: #12369e;

  --go: #0b7a4b;
  --go-haze: #e7f4ee;
  --flag: #9a4a06;
  --flag-haze: #fdf1e3;

  --font: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --t-2xs: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.15rem, 1.6vw, 1.375rem);
  --t-xl: clamp(1.5rem, 3vw, 2.125rem);
  --t-2xl: clamp(2rem, 4.6vw, 3.125rem);

  --gap: 1rem;
  --pad: clamp(1rem, 4vw, 2rem);
  --shell: 1280px;
  --radius: 6px;
  --radius-lg: 10px;

  --ring: 0 0 0 3px var(--brand-line);
  --lift: 0 1px 2px rgba(23, 17, 28, 0.05), 0 8px 24px -12px rgba(23, 17, 28, 0.22);

  --speed: 160ms;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--haze);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Parked above the viewport rather than 9999px to the left. A negative `left`
   hides it in a left-to-right page and, in Arabic, extends the scrollable area
   by 9999px instead — the whole document scrolled sideways into empty space.
   Moving it vertically is direction-agnostic and needs no RTL override. */
.skip {
  position: absolute;
  inset-inline-start: 0;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.shell--narrow { max-width: 760px; }

.band { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.band--tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.band--paper { background: var(--paper); border-block: 1px solid var(--rule); }
.band--ink { background: var(--ink); color: #fff; }

.band-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.band-head p { color: var(--ink-3); max-width: 62ch; margin-top: 0.5rem; }
.band--ink .band-head p { color: #b9b0c4; }

/* Eyebrow labels. Used only where the label names a real category of content,
   never as ornament. */
.eyebrow {
  display: block;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.55rem;
}
.band--ink .eyebrow { color: #cf94e2; }

/* --------------------------------------------------------------------------
   5. Plate badge — signature element
   Spanish plates run 520x110mm. The proportions here follow that so the shape
   reads as a plate at a glance even at card size.
   -------------------------------------------------------------------------- */

.plate {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  line-height: 1;
  flex: none;
}

.plate__eu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  background: var(--plate-blue);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
}

.plate__num {
  display: flex;
  align-items: center;
  padding-inline: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.plate--lg { height: 44px; border-width: 2px; border-radius: 4px; }
.plate--lg .plate__eu { width: 28px; font-size: var(--t-base); }
.plate--lg .plate__num { font-size: 1.625rem; padding-inline: 0.7rem; }

.plate-set { display: flex; align-items: center; gap: 0.5rem; }
.plate-set__unit {
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.1rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--speed) ease, border-color var(--speed) ease,
    color var(--speed) ease, transform var(--speed) ease;
}
.btn:hover { background: var(--brand-deep); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--haze); border-color: var(--ink-3); color: var(--ink); }

.btn--wa { background: #1faa53; }
.btn--wa:hover { background: #17853f; }

/* Telegram sits beside WhatsApp on the hero. Both carry their own brand
   colour rather than the site's purple, because a messaging button is
   recognised by its colour before its label is read — and this one is read by
   people who are not reading English. */
.btn--tg { background: #229ed9; }
.btn--tg:hover { background: #1b82b3; }

.btn--lg { padding: 0.8rem 1.5rem; font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn svg { width: 1em; height: 1em; flex: none; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 58px;
}

/* The client's own mark. It is a low-resolution raster with a grunge texture,
   so it is displayed well below its native width to keep it looking sharp, and
   sits on the dark bar the artwork was drawn for. */
.brandmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  line-height: 0;
}
.brandmark img {
  height: 42px;
  width: auto;
}
@media (max-width: 520px) {
  .brandmark img { height: 34px; }
}

.mainnav { display: flex; align-items: center; gap: 0.25rem; }
.mainnav a {
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
  color: #ddd6e4;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.mainnav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mainnav a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, 0.12); }

.masthead__cta { display: flex; align-items: center; gap: 0.5rem; }

/* Masthead numbers. Two of them, so they are divided rather than left to run
   together as one long string of digits. */
.callnow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
}
.callnow svg { flex: none; opacity: 0.75; }
.callnow__nums {
  display: flex;
  align-items: center;
  line-height: 1.35;
}
.callnow a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  padding-inline: 0.6rem;
}
.callnow a:first-child { padding-left: 0; }
.callnow a + a { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.callnow a:hover { color: #cf94e2; }

@media (max-width: 1180px) {
  .callnow__nums { flex-direction: column; align-items: flex-start; }
  .callnow a { padding: 0; }
  .callnow a + a { border-left: 0; }
}

/* --------------------------------------------------------------------------
   Call bar — both numbers as one control
   Replaces the pair of identical full-width "Call +34 …" buttons that had
   appeared on five pages. One bordered unit, a divider between the numbers,
   each still its own tel: link.
   -------------------------------------------------------------------------- */

.callbar {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  font-size: var(--t-sm);
  max-width: 100%;
}
.callbar--block { display: flex; }

/* Stacked under a button rather than beside one — the hero aside and the
   quote panel. The button rule only spaced button-to-button, so the bar sat
   flush against the one above it. */
.btn + .callbar { margin-top: 0.5rem; }

/* A row of actions where a button and the bar sit side by side. Stretch, not
   centre: btn--lg is 51px and the bar's natural height is 41, so centring them
   left a visible 5px lip above and below the bar. Stretching makes the bar
   take the row's height without hard-coding either number. */
.ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.ctarow .callbar { margin-top: 0; }

/* Once they no longer fit side by side they each take the full width, instead
   of sitting on one line at two different widths. */
@media (max-width: 620px) {
  .ctarow > * { width: 100%; }
}

.callbar__icon {
  display: flex;
  align-items: center;
  padding-inline: 0.7rem;
  color: var(--ink-3);
  background: var(--haze);
  border-right: 1px solid var(--rule);
  flex: none;
}

.callbar__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: 0.6rem 0.85rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--speed), color var(--speed);
}
.callbar__num + .callbar__num { border-left: 1px solid var(--rule); }
.callbar__num:hover { background: var(--brand-haze); color: var(--brand-deep); }

/* On ink. The numbers go white rather than the muted body colour: a phone
   number that reads at the same weight as every other link stops looking like
   something you can act on. */
.callbar--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}
.callbar--dark .callbar__icon {
  background: transparent;
  border-right-color: rgba(255, 255, 255, 0.22);
  color: #cf94e2;
}
.callbar--dark .callbar__num { color: #fff; }
.callbar--dark .callbar__num + .callbar__num { border-left-color: rgba(255, 255, 255, 0.22); }
.callbar--dark .callbar__num:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Narrow screens stack the numbers, but the icon stays a left rail spanning
   both rather than taking a whole row to itself. */
@media (max-width: 520px) {
  .callbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* span 2, not 1 / -1: with no explicit rows declared, -1 resolves to the
     end of the explicit grid, which is row 1, and the icon does not span. */
  .callbar__icon { grid-row: 1 / span 2; }
  .callbar__num {
    justify-content: flex-start;
    padding-inline: 0.85rem;
  }
  .callbar__num + .callbar__num {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .callbar--dark .callbar__num + .callbar__num { border-top-color: rgba(255, 255, 255, 0.22); }
}

.navtoggle {
  display: none;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 860px) {
  .navtoggle { display: inline-flex; }
  .mainnav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--pad) 1rem;
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mainnav[data-open='true'] { display: flex; }
  .mainnav a { padding: 0.7rem 0.5rem; }
  .callnow span { display: none; }
}

/* Language switch in the masthead.

   A <details>, so it works with scripting off. The menu is absolutely
   positioned against the box rather than the bar, which keeps it under the
   trigger at every width without a media query per breakpoint. */
.langswitch__box {
  position: relative;
}
.langswitch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Safari draws its own disclosure triangle unless both of these are set. */
.langswitch__trigger::-webkit-details-marker { display: none; }
.langswitch__trigger::marker { content: ''; }
.langswitch__trigger:hover { background: rgba(255, 255, 255, 0.1); }
.langswitch__box[open] .langswitch__trigger { background: rgba(255, 255, 255, 0.14); }
.langswitch__code { letter-spacing: 0.04em; }

.langswitch__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 50;
  min-width: 10rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
.langswitch__item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  color: #ddd6e4;
  text-align: start;
  cursor: pointer;
}
.langswitch__item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.langswitch__item[aria-current='true'] { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Hero — the search tool is the hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
}

/* Light trails: the long-exposure look of headlights crossing a night road.
   Thin streaks travel the width of the hero at different heights, speeds and
   depths — the near ones fast and sharp, the far ones slow and blurred — so
   the motion reads as traffic passing rather than as a background effect.

   Structural, not decorative colour: each trail is a real element that moves
   across the whole hero, which is what makes this read differently from a
   wash of colour shifting in place. */
.trails {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.trails i {
  position: absolute;
  left: 0;
  height: 2px;
  width: 18%;
  border-radius: 999px;
  /* Bright at the head, tapering to nothing behind it — a light in motion. */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 140, 226, 0.35) 55%,
    rgba(236, 205, 248, 0.95) 92%,
    rgba(255, 255, 255, 0.9) 100%);
  transform: translate3d(-120%, 0, 0);
  will-change: transform;
  animation-name: trail-pass;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Near lane: fast, sharp, brighter. */
.trails i:nth-child(1) { top: 18%; width: 26%; animation-duration: 6.5s;  animation-delay: 0s;    }
.trails i:nth-child(2) { top: 63%; width: 21%; animation-duration: 8s;    animation-delay: 2.6s;  }
.trails i:nth-child(3) { top: 86%; width: 30%; animation-duration: 7.2s;  animation-delay: 5.1s;  }

/* Far lane: slower, softer, thinner — depth without a parallax library. */
.trails i:nth-child(n + 4) {
  height: 1px;
  opacity: 0.5;
  filter: blur(1.5px);
}
.trails i:nth-child(4) { top: 31%; width: 15%; animation-duration: 15s;   animation-delay: 1.2s;  }
.trails i:nth-child(5) { top: 47%; width: 12%; animation-duration: 19s;   animation-delay: 7.4s;  }
.trails i:nth-child(6) { top: 74%; width: 17%; animation-duration: 13s;   animation-delay: 10.8s; }

@keyframes trail-pass {
  from { transform: translate3d(-120%, 0, 0); }
  to   { transform: translate3d(660%, 0, 0); }
}

/* A still bloom low and left so the hero is not flat black where no trail is
   passing. It does not move — the trails carry the motion. */
.hero::before {
  content: '';
  position: absolute;
  inset: 35% 55% -30% -15%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(138, 37, 168, 0.3), transparent 70%);
  filter: blur(80px);
}

/* The hero settles in on arrival, top to bottom, so the eye is walked from the
   headline down to the search tool rather than meeting all of it at once. */
.hero__lede > *,
.hero__aside,
.hero .searchbar,
.assurances {
  animation: hero-rise 620ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero .eyebrow      { animation-delay: 40ms; }
.hero h1            { animation-delay: 110ms; }
.hero__sub          { animation-delay: 180ms; }
.hero__aside        { animation-delay: 250ms; }
.hero .searchbar    { animation-delay: 320ms; }
.assurances         { animation-delay: 400ms; }

@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

.hero__lede { max-width: 46ch; }
.hero h1 { color: #fff; }

/* For the visitor who would rather skip the form and just ask. Placed opposite
   the headline because that space is otherwise dead at desktop width. */
.hero__aside {
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
}
.hero__aside h2 { font-size: var(--t-md); color: #fff; margin-bottom: 0.4rem; }
.hero__aside p { font-size: var(--t-sm); color: #b9b0c4; margin-bottom: 0.9rem; }
.hero__aside .btn { width: 100%; }
.hero__aside .btn + .btn { margin-top: 0.5rem; border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.hero__aside .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hero__sub {
  margin-top: 0.85rem;
  color: #b9b0c4;
  font-size: var(--t-md);
  max-width: 54ch;
}

/* Replaces the old row of raw numbers, which repeated figures the search tool
   and the grid already show. These are the four things a visitor actually
   weighs before booking, and every one is a confirmed commitment. */
.assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 1.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
  padding-inline: 0;
}
.assurances li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}
.assurances svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #c98fdb;
}
.assurances b {
  display: block;
  color: #fff;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.assurances span {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-sm);
  color: #b9b0c4;
}

/* --------------------------------------------------------------------------
   9. Search panel
   -------------------------------------------------------------------------- */

.searchbar {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 0.875rem;
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.6);
}

/* min() on the track floor keeps auto-fit from demanding more width than the
   viewport has. Date inputs have a wide min-content size and will otherwise
   push the whole page sideways on a phone. */
.searchbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 0.625rem;
  align-items: end;
}

@media (max-width: 640px) {
  .searchbar__grid { grid-template-columns: minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.field > label {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.field textarea { min-height: 88px; resize: vertical; }

.field input:hover,
.field select:hover { border-color: var(--ink-3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}

.field--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 0.3rem; }
.field--pair > label { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Booking progress

   Four steps across the top of every page in the flow. The rail is a
   pseudo-element behind the row rather than a separate element, so the dots
   sit on it without any of them needing to know where the others are.
   -------------------------------------------------------------------------- */

.progress {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-block: 0.75rem;
}

.progress__steps {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

/* The connecting line, drawn once behind the dots and stopping half a column
   short at each end so it does not stick out past the first and last. */
.progress__steps::before {
  content: '';
  position: absolute;
  top: 13px;
  inset-inline: 12.5%;
  height: 2px;
  background: var(--rule);
}

.progress__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  min-width: 0;
}

.progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
  font-size: var(--t-2xs);
  font-weight: 800;
  line-height: 1;
}

.progress__label {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.progress__step.is-done .progress__dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.progress__step.is-done .progress__label { color: var(--ink-2); }

.progress__step.is-current .progress__dot {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 4px rgba(138, 43, 178, 0.14);
}
.progress__step.is-current .progress__label { color: var(--ink); }

@media (max-width: 520px) {
  .progress__label { font-size: 0.6rem; letter-spacing: 0.02em; }
}

/* --------------------------------------------------------------------------
   The chosen vehicle, carried through the rest of the booking
   -------------------------------------------------------------------------- */

.chosen {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.chosen__media {
  flex: none;
  width: 92px;
  height: 62px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--haze);
  display: grid;
  place-items: center;
}
.chosen__media img { width: 100%; height: 100%; object-fit: cover; }
.chosen__noimage { color: var(--ink-3); }

.chosen__body { display: flex; flex-direction: column; min-width: 0; }
.chosen__eyebrow {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chosen__name { font-size: var(--t-md); line-height: 1.2; }
.chosen__spec { font-size: var(--t-xs); color: var(--ink-3); }

.chosen__when {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-inline-start: auto;
  padding-inline-start: 1rem;
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-align: center;
}
.chosen__when b { display: block; }
.chosen__when svg { flex: none; color: var(--ink-3); }
/* The arrow means "then", which reads the other way in Arabic. */
[dir='rtl'] .chosen__when svg { transform: scaleX(-1); }

@media (max-width: 620px) {
  .chosen { flex-wrap: wrap; }
  .chosen__when {
    margin-inline-start: 0;
    padding-inline-start: 0;
    width: 100%;
    justify-content: flex-start;
    border-top: 1px solid var(--rule);
    padding-top: 0.6rem;
  }
}

/* A band that follows another with no gap between them. */
.band--top { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* A form laid out in two columns that collapses to one. Used by the details
   page, where a postal code and a city are each half a line and a street is a
   whole one — six full-width boxes would make a short form look long, which is
   the single best way to have it abandoned.

   Two fixed columns rather than auto-fit: auto-fit packs as many as will fit,
   which put three short fields on one row and left the city stranded alone on
   the next. Pairs are what the address actually comes in. */
.formgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1rem;
  margin-top: 1rem;
}
.formgrid .field--wide { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .formgrid { grid-template-columns: minmax(0, 1fr); }
}

.formactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

/* Two buttons that are the same decision at two amounts — pay the 15% or pay
   the lot — so they get equal width rather than one leading and one trailing.
   Stacked below 640px: side by side they wrap mid-price, and "Pay 337.50"
   breaking after "Pay" reads like a different offer. */
.formactions--pay { display: grid; grid-template-columns: 1fr 1fr; }
.formactions--pay .btn { width: 100%; }
@media (max-width: 640px) {
  .formactions--pay { grid-template-columns: 1fr; }
}

/* "optional", beside a heading. Says it once, where the decision is made. */
.badge-soft {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--haze);
  color: var(--ink-3);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A file input is styled by the browser and cannot be restyled far. What can
   be done is stop it overflowing its column, which it does by default. */
.field input[type='file'] {
  padding: 0.5rem;
  font-size: var(--t-sm);
  max-width: 100%;
}

.field__note { font-size: var(--t-2xs); color: var(--ink-3); }

.searchbar__go { display: flex; }
.searchbar__go .btn { width: 100%; height: 42px; }

/* Feedback line under the search bar. Reserves its own row so the layout does
   not jump when a message appears. */
.searchbar__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 1.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.searchbar__status:empty { display: none; }
.searchbar__status b { color: var(--ink); font-weight: 700; }
.searchbar__status[data-tone='error'] { color: var(--flag); }

.chip-clear {
  padding: 0.15rem 0.5rem;
  background: var(--haze);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.chip-clear:hover { background: var(--haze-2); }

/* --------------------------------------------------------------------------
   10. Fleet browser
   -------------------------------------------------------------------------- */

.browser {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

@media (max-width: 900px) {
  .browser { grid-template-columns: minmax(0, 1fr); }
}

/* A <details> so it can collapse on a phone, where an open rail would push the
   fleet a full screen down. The script closes it below 900px at load; the
   summary is hidden entirely on wider screens, where the rail is always open. */
.filters {
  position: sticky;
  top: 74px;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.filters__summary { display: none; }

@media (max-width: 900px) {
  .filters { position: static; padding: 0.5rem 1rem 1rem; }

  .filters__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.5rem -1rem 0;
    padding: 0.85rem 1rem;
    font-size: var(--t-base);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .filters__summary::-webkit-details-marker { display: none; }
  .filters__summary::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--speed) ease;
    flex: none;
  }
  .filters[open] > .filters__summary { border-bottom: 1px solid var(--rule-soft); margin-bottom: 0.75rem; }
  .filters[open] > .filters__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
}

.filters__group + .filters__group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}

.filters__title {
  margin-bottom: 0.6rem;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
}
.check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.check span { flex: 1; }
.check em { font-style: normal; color: var(--ink-3); font-size: var(--t-xs); }
.check:hover { color: var(--brand); }

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
/* Why the grid below has fewer prices on it than vehicles.

   Deliberately not `.alert--warn`: nothing has gone wrong and nobody has made
   a mistake. It is an instruction — rent for longer, or come back nearer the
   time — so it reads as the brand tint, and only turns to the warning colour
   when the answer is that *nothing* on these dates can be booked, which is
   the one case worth stopping for. */
.datesnote {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background: var(--brand-haze);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.datesnote--hard {
  border-color: #f0d6b4;
  background: var(--flag-haze);
}
.datesnote svg { flex: none; margin-top: 0.1rem; color: var(--brand); }
.datesnote--hard svg { color: var(--flag); }
.datesnote__body { min-width: 0; }
.datesnote__body > * + * { margin-top: 0.3rem; }
.datesnote__lead {
  font-weight: 700;
  color: var(--ink);
}

.results-bar__count { font-size: var(--t-sm); color: var(--ink-2); }
.results-bar__count b { color: var(--ink); font-weight: 700; }
.results-bar__sort { display: flex; align-items: center; gap: 0.5rem; }
.results-bar__sort label {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.results-bar__sort select {
  padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--t-sm);
  font-weight: 600;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.empty {
  padding: 2.5rem 1.5rem;
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink-2);
}
.empty h3 { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   11. Vehicle card
   -------------------------------------------------------------------------- */

.car {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease,
    transform var(--speed) ease;
}
.car:hover {
  border-color: var(--brand-line);
  box-shadow: var(--lift);
  transform: translateY(-2px);
}

.car__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: linear-gradient(175deg, var(--paper) 0%, var(--haze) 100%);
}
.car__media img { width: 100%; height: 100%; object-fit: contain; }

.car__flag {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0.18rem 0.45rem;
  background: var(--ink);
  color: #fff;
  border-radius: 3px;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.car__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.875rem;
  border-top: 1px solid var(--rule-soft);
  flex: 1;
}

.car__name { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; }
.car__name a { color: inherit; text-decoration: none; }
.car__name a:hover { color: var(--brand); }

.car__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.car__spec li { display: flex; align-items: center; gap: 0.45rem; }
.car__spec li + li::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--rule);
}

.car__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule-soft);
}

/* Filled in by the quote script once the visitor has picked dates. */
.car__total {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--go);
  text-align: right;
  line-height: 1.3;
}
.car__total:empty { display: none; }
.car__total b { display: block; font-size: var(--t-base); font-weight: 800; }

/* Not a price — the reason there isn't one, usually a minimum rental. Muted
   and narrow so it reads as a note beside the rate rather than competing with
   the totals on the cards either side of it. */
.car__total--note {
  max-width: 22ch;
  color: var(--ink-3);
  font-weight: 600;
}

.car__go { padding: 0.5rem 0.8rem; }

/* --------------------------------------------------------------------------
   12. Vehicle detail
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-block: 0.875rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  list-style: none;
  margin: 0;
}
.crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--rule); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 940px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
}

.showcase {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.showcase__main {
  aspect-ratio: 3 / 2;
  background: linear-gradient(175deg, var(--paper) 0%, var(--haze) 100%);
}
.showcase__main img { width: 100%; height: 100%; object-fit: contain; }

.showcase__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.showcase__strip img { aspect-ratio: 4 / 3; object-fit: cover; background: var(--haze); width: 100%; }
.showcase__strip figure { margin: 0; background: var(--paper); }
.showcase__strip figcaption {
  padding: 0.35rem 0.5rem;
  font-size: var(--t-2xs);
  color: var(--ink-3);
}

/* The image provenance note. It was a loose paragraph hanging under the
   gallery and read as body copy; as a bordered aside it reads as a caption
   belonging to the photographs above it. */
.figure-note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--haze);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-3);
}
.figure-note svg { width: 16px; height: 16px; margin-top: 1px; color: var(--ink-3); }

/* Stacked sections ran together wherever one ended in a list, a table or an
   accordion: the next heading sat straight on top of the previous block and
   the two read as one section under two headings. A rule and real space above
   each makes the boundary unmistakable. Used on the vehicle, rates, questions
   and about pages. */
.docsection {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
/* The first section on a page needs the space but not the rule — there is
   nothing above it to divide it from. */
.docsection--open {
  padding-top: 0;
  border-top: 0;
}
.docsection > h2 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.docsection__lede {
  margin-top: 0;
  margin-bottom: 1.15rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 62ch;
}
/* A section that is itself prose should not re-apply the prose heading gap on
   top of the section's own padding. */
.docsection.prose > h2:first-child { margin-top: 0; }

.specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.specs th,
.specs td {
  padding: 0.6rem 0.875rem;
  text-align: left;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--rule-soft);
}
.specs tr:last-child th,
.specs tr:last-child td { border-bottom: 0; }
.specs th {
  width: 42%;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--haze);
}
.specs td { font-weight: 600; }

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.taglist li {
  padding: 0.3rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   13. Quote panel
   -------------------------------------------------------------------------- */

.quote {
  position: sticky;
  top: 74px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 940px) { .quote { position: static; } }

.quote__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--ink);
  color: #fff;
}
.quote__head h2 { font-size: var(--t-md); color: #fff; }
.quote__head .plate { flex: none; }

.quote__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }

.quote__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
@media (max-width: 420px) { .quote__row { grid-template-columns: 1fr; } }

/* Running total. Lives in a tinted block so it reads as an output, not another
   input. */
/* Priced extras in the quote panel. Both are one charge for the whole rental,
   so they are flat additions rather than another per-day line. */
.addons {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.addons legend {
  padding: 0 0.35rem;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.addon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.3rem 0;
  font-size: var(--t-sm);
  cursor: pointer;
}
.addon input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.addon__price { font-weight: 700; }
.addon:hover .addon__label { color: var(--brand); }
.addon__note {
  margin-top: 0.35rem;
  font-size: var(--t-2xs);
  color: var(--ink-3);
}

.tally {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem;
  background: var(--haze);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-sm);
}
.tally__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tally__line span { color: var(--ink-3); }
.tally__line b { font-weight: 700; }
.tally__line--total {
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-md);
}
.tally__line--total span { color: var(--ink); font-weight: 700; }
.tally__line--total b { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
/* The deposit. Beside the total but visibly not part of it — it is the
   largest single number a customer is asked for on the day, and it comes
   back, so it belongs on the breakdown rather than in a footnote. */
.tally__line--aside {
  align-items: flex-start;
  padding-top: 0.5rem;
  margin-top: 0.15rem;
  border-top: 1px dashed var(--rule);
}
.tally__line--aside span { display: flex; flex-direction: column; }
.tally__line--aside small { font-size: var(--t-2xs); opacity: 0.85; }
.tally__line--aside b { white-space: nowrap; }

.tally__note { font-size: var(--t-2xs); color: var(--ink-3); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Legal documents

   A privacy policy is read by someone who is worried, in a hurry, or checking
   one specific thing. It gets a measured column, real headings and tables that
   scroll rather than squash.
   -------------------------------------------------------------------------- */

.legaldoc { max-width: 68ch; }
.legaldoc .lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}
.legaldoc h2 {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}
.legaldoc h3 { margin-top: 1.5rem; font-size: var(--t-md); }
.legaldoc p, .legaldoc li { line-height: 1.65; }
.legaldoc code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--haze);
  font-size: 0.9em;
}
.legaldoc .note {
  padding: 0.75rem 0.9rem;
  border-inline-start: 3px solid var(--rule);
  background: var(--haze);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.legaldoc__version { font-size: var(--t-2xs); color: var(--ink-3); }

/* A wide table must scroll inside itself. Making the table a block splits
   thead from tbody into two grids that no longer share column widths, so the
   scroll goes on a wrapper the table sits inside. */
.legaltable {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.legaltable th, .legaltable td {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  text-align: start;
  vertical-align: top;
  min-width: 8rem;
}
.legaltable thead th { background: var(--haze); font-weight: 700; }
.legaltable tbody th { background: var(--haze); font-weight: 600; }

/* Something the owner still has to supply. Visible rather than quietly blank:
   a legal notice with an invented tax number is worse than one with a gap. */
.legaldoc .pending { color: #9a4a06; font-style: italic; }
.legaldoc .pendingnote {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #e6c9a8;
  border-inline-start: 4px solid #c8862c;
  border-radius: var(--radius);
  background: #fdf6ec;
  font-size: var(--t-sm);
}

/* The index of documents on /legal/. */
.doclist { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.6rem; }
.doclist__link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
}
a.doclist__link:hover { border-color: var(--brand); background: var(--haze); }
.doclist__link span { font-size: var(--t-xs); color: var(--ink-3); }
.doclist__link--missing { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Cookie consent

   A bar along the bottom, not an overlay. It must not block the page: a
   consent request that holds the content hostage is a cookie wall, and a
   cookie wall is not freely given consent.
   -------------------------------------------------------------------------- */

.cookiebar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ink);
  color: #ddd6e4;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, 0.8);
  animation: cookiebar-rise 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.cookiebar[hidden] { display: none; }

@keyframes cookiebar-rise {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookiebar { animation: none; }
}

.cookiebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

.cookiebar__say { flex: 1 1 22rem; min-width: 0; }
.cookiebar__say b { color: #fff; display: block; font-size: var(--t-sm); }
.cookiebar__say p {
  margin: 0.2rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
}
.cookiebar__say a { color: #cf94e2; }

.cookiebar__choices {
  flex: 1 1 100%;
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cookiebar__choices[hidden] { display: none; }

.cookiebar__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-xs);
  cursor: pointer;
}
.cookiebar__row input { margin-top: 0.15rem; flex: none; }
.cookiebar__row input:disabled { cursor: not-allowed; }
.cookiebar__row b { color: #fff; display: block; }
.cookiebar__row small { color: #b9b0c4; line-height: 1.45; }

.cookiebar__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Accept and Reject are the same button in every respect except the word on
   them: same width, same fill, same contrast, same hover. A quiet outlined
   "Reject" beside a bright "Accept" is the commonest way a consent banner
   fails an audit, and since that is purely a CSS decision it is settled here,
   in one rule both buttons share, rather than left to whoever edits next.

   Neutral rather than brand purple, so neither reads as the encouraged one. */
.cookiebar__btn {
  min-width: 8.5rem;
  justify-content: center;
  background: #f4f2f6;
  border-color: #f4f2f6;
  color: var(--ink);
  font-weight: 700;
}
.cookiebar__btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.cookiebar__btn:focus-visible {
  outline: 2px solid #cf94e2;
  outline-offset: 2px;
}

.cookiebar__more {
  border: 0;
  background: none;
  padding: 0.5rem 0.25rem;
  font: inherit;
  font-size: var(--t-xs);
  color: #cf94e2;
  text-decoration: underline;
  cursor: pointer;
}
.cookiebar__more:hover { color: #fff; }

@media (max-width: 560px) {
  .cookiebar__buttons { width: 100%; }
  .cookiebar__buttons .btn--equal { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   The privacy acknowledgement above a booking button
   -------------------------------------------------------------------------- */

.consent {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--haze);
}
.consent--bad { border-color: #c25151; }
.consent__box {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  cursor: pointer;
}
.consent__box input { margin-top: 0.2rem; flex: none; }
.consent__note {
  margin-top: 0.5rem;
  font-size: var(--t-2xs);
  color: var(--ink-3);
  line-height: 1.5;
}

/* A field the form rejected. The message is already under it; this is so the
   eye lands on the right one of fourteen. */
.field--bad > label { color: #9a1b1b; }
.field--bad input,
.field--bad select,
.field--bad textarea { border-color: #c25151; }

.alert {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
}
.alert[hidden] { display: none; }
.alert--warn { background: var(--flag-haze); color: var(--flag); border: 1px solid #f0d6b4; }

.quote__foot {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-2xs);
  color: var(--ink-3);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   14. Content blocks
   -------------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Heading beside its content, rather than three equal columns. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 780px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

.tile {
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.tile h3 { margin-bottom: 0.4rem; font-size: var(--t-md); }
.tile p { font-size: var(--t-sm); color: var(--ink-2); }

/* Numbered because these genuinely are a sequence — the order is the meaning. */
.steps { counter-reset: step; }
.steps .tile { position: relative; padding-top: 2.4rem; }
.steps .tile::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--brand);
}

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--t-base);
}
.ticks svg { width: 20px; height: 20px; color: var(--go); margin-top: 1px; }

/* --------------------------------------------------------------------------
   15. Prose and FAQ
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; font-size: var(--t-md); }
.prose h2 { margin-top: 2.25rem; margin-bottom: 0.75rem; }
.prose h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: var(--t-base); }
.prose th, .prose td { padding: 0.55rem 0.7rem; border: 1px solid var(--rule); text-align: left; }
.prose th { background: var(--haze); font-weight: 700; }

/* A wide table scrolls inside its own box rather than crushing its columns or
   pushing the page sideways. The table stays a real table so thead and tbody
   still share one set of column widths; only the wrapper scrolls. */
.tablewrap {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.tablewrap table { min-width: 32rem; margin-bottom: 0; }
.tablewrap td, .tablewrap th { white-space: nowrap; }
/* The one column that must be free to wrap, or the table gets very wide. */
.tablewrap td:first-child, .tablewrap th:first-child { white-space: normal; min-width: 12ch; }

.qa {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.qa details + details { border-top: 1px solid var(--rule-soft); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--speed) ease;
  flex: none;
}
.qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qa summary:hover { background: var(--haze); }
.qa__answer { padding: 0 1rem 1rem; font-size: var(--t-base); color: var(--ink-2); }
.qa__answer > :last-child { margin-bottom: 0; }

/* Marks copy that must come from the client before launch. Deliberately loud:
   it should be impossible to ship one of these by accident. */
.needed {
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--flag-haze);
  border: 1px solid #f0d6b4;
  border-left: 4px solid var(--flag);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  color: #6a3405;
}
.needed strong {
  display: block;
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flag);
  margin-bottom: 0.3rem;
}
.needed ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.needed li { margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   16. Contact and footer
   -------------------------------------------------------------------------- */

.contactgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.contactcard {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.contactcard dt {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contactcard dd { margin: 0; font-size: var(--t-md); font-weight: 600; }
.contactcard a { text-decoration: none; }
.contactcard a:hover { text-decoration: underline; }

.map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--haze-2);
}

.colophon {
  background: var(--ink);
  color: #b9b0c4;
  padding-block: clamp(2rem, 4vw, 3rem) 1.25rem;
  font-size: var(--t-sm);
}
.colophon__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.colophon h2 {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.7rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.colophon a { color: #b9b0c4; text-decoration: none; }
.colophon a:hover { color: #fff; text-decoration: underline; }
/* Follow us. Round targets rather than another row of text links: these are
   the one thing in the footer people tap rather than read, and at 44px they
   clear the minimum touch size on a phone. */
.follow__title { margin-top: 1.1rem; }
/* Scoped to beat `.colophon ul`, which sets display:grid and would stack
   these vertically. Specificity, not !important. */
.colophon .follow,
.contactcard .follow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.follow__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.follow__link:hover,
.follow__link:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .follow__link { transition: none; }
  .follow__link:hover, .follow__link:focus-visible { transform: none; }
}

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  padding-top: 1.25rem;
  font-size: var(--t-xs);
}

/* Four separate links rather than one to a hub. Wraps to its own line on a
   phone instead of squeezing the copyright off the row. */
.colophon__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

/* Fixed WhatsApp affordance on small screens, where the sticky quote panel is
   scrolled past rather than pinned. */
/* Hidden until the hero scrolls away, otherwise it lands on top of the search
   button. Script toggles data-show; without script it simply never appears,
   and every page still has WhatsApp links inline. */
.wa-dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  display: none;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
}
@media (max-width: 940px) {
  .wa-dock[data-show='true'] { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   16b. The on-site assistant
   -------------------------------------------------------------------------- */

.ask {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
/* Above where the WhatsApp dock appears on narrow screens. WhatsApp keeps the
   corner: it is how this business actually takes bookings. */
@media (max-width: 940px) {
  .ask { bottom: calc(1rem + 3.25rem); }
}

.ask__launch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55);
}
.ask__launch:hover { background: var(--brand-deep); }
@media (max-width: 560px) {
  .ask__launchtext { display: none; }
  .ask__launch { padding: 0.75rem; }
}

.ask__panel {
  display: none;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 7rem));
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 60px -18px rgba(23, 17, 28, 0.45);
}
.ask[data-open] .ask__panel { display: flex; }
/* The launcher becomes the close control once the panel is open, so the two
   are never stacked on top of each other on a phone. */
.ask[data-open] .ask__launch { display: none; }
@media (min-width: 941px) {
  .ask[data-open] .ask__launch { display: inline-flex; }
}

.ask__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.ask__head strong { display: block; font-size: var(--t-sm); }
.ask__sub { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.ask__close {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.15rem;
  line-height: 0;
}
.ask__close:hover { color: var(--ink); }

.ask__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  font-size: var(--t-sm);
}
.ask__turn p { margin: 0; }
.ask__turn--you {
  justify-self: end;
  max-width: 85%;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 12px 12px 2px 12px;
}
.ask__turn--bot {
  background: var(--wash, #f6f3f9);
  padding: 0.65rem 0.8rem;
  border-radius: 12px 12px 12px 2px;
}
.ask__title {
  margin: 0 0 0.3rem;
  font-size: var(--t-sm);
  font-weight: 700;
}
/* A hedged answer has to look hedged. Same weight as the answer would be a
   disclaimer nobody reads. */
.ask__hedge {
  margin: 0 0 0.5rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--flag, #9a4a06);
  color: var(--ink-2);
  font-size: var(--t-xs);
}
.ask__cite {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--brand-deep);
}
.ask__also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.ask__alsolabel {
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.ask__starters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ask__chip {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: var(--t-xs);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.ask__chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.ask__actions { margin-top: 0.6rem; }

.ask__form {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--rule);
}
.ask__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: inherit;
  font-size: var(--t-sm);
}
.ask__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .car:hover { transform: none; }
  /* Traffic that never moves is just streaks across the headline. Remove it
     outright rather than freezing it mid-pass; the still bloom remains. */
  .trails { display: none; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .searchbar, .filters, .wa-dock, .ask, .quote__foot, .btn { display: none !important; }
  body { background: #fff; }
  .car, .tile, .specs, .showcase { border-color: #bbb; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   19. Google rating badge
   Floats bottom-left so it never covers the WhatsApp dock on the right, and
   is pushed above the dock's height on the narrow screens where both show.
   -------------------------------------------------------------------------- */

.grating {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem 0.5rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgba(23, 17, 28, 0.35);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--speed), box-shadow var(--speed);
}
.grating:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(23, 17, 28, 0.45);
}

.grating__mark { display: flex; flex: none; }
.grating__body { display: grid; gap: 0.1rem; line-height: 1.15; }

.grating__score { display: flex; align-items: center; gap: 0.4rem; }
.grating__score b { font-size: var(--t-md); font-weight: 800; letter-spacing: -0.02em; }

.grating__stars { display: inline-flex; gap: 1px; color: #f5a623; }
.grating__star { flex: none; }
.grating__star--full { fill: currentColor; }
.grating__star--empty { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.35; }

.grating__count {
  font-size: var(--t-2xs);
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 940px) {
  /* The WhatsApp dock appears at this width. Sit above it rather than beside
     it, so neither has to shrink. */
  .grating { bottom: 4.25rem; }
}

@media (max-width: 420px) {
  .grating { padding: 0.4rem 0.65rem 0.4rem 0.5rem; gap: 0.45rem; }
  .grating__count { display: none; }
}

@media print {
  .grating { display: none !important; }
}

/* --------------------------------------------------------------------------
   20. Small utilities
   These exist so no template needs a style attribute. The Content-Security-
   Policy is style-src 'self' with no 'unsafe-inline', which blocks inline
   style attributes outright — a page that relies on them silently loses its
   layout in production while looking fine in development.
   -------------------------------------------------------------------------- */

.u-pad-top      { padding-top: 1rem; }
.u-gap-sm       { margin-top: 0.75rem; }
.u-gap          { margin-top: 1.25rem; }
.u-gap-lg       { margin-top: 1.5rem; }
.u-no-gap       { margin-top: 0; }
.u-muted        { color: var(--ink-3); }
.u-note         { margin-top: 0.75rem; font-size: var(--t-2xs); color: var(--ink-3); }
.u-wrap         { white-space: normal; }
.u-disabled     { opacity: 0.55; cursor: not-allowed; }

.filters__links { margin: 0; }
.filters__links + .filters__links { margin-top: 0.35rem; }

/* The lookup form is one field and a button, not the four-part trip search. */
.searchbar--lookup .searchbar__grid { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 700px) {
  .searchbar--lookup .searchbar__grid { grid-template-columns: minmax(0, 1fr); }
}

/* A vehicle with no photograph yet. An ordinary state — the owner adds a car
   before the pictures exist — so it gets a deliberate placeholder rather than
   a broken image icon, which reads as a broken site. */
.car__noimage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 160px;
  padding: 1rem;
  background: linear-gradient(175deg, var(--paper) 0%, var(--haze-2) 100%);
  color: var(--ink-3);
  font-size: var(--t-xs);
  text-align: center;
}
.car__noimage svg { opacity: 0.45; }
.showcase__main .car__noimage { min-height: 100%; }

/* --------------------------------------------------------------------------
   21. Discounts
   A discount is the one thing on a card a visitor should not have to work out
   for themselves, so it gets its own colour and says why it applied.
   -------------------------------------------------------------------------- */

.car--deal { border-color: var(--go); }
.car--deal:hover { border-color: var(--go); }

.car__flag--deal { background: var(--go); color: #fff; }

.deal {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.55rem;
  background: var(--go-haze);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: #085534;
}
.deal svg { margin-top: 2px; color: var(--go); }
.deal b { color: #085534; }

/* The struck-through original, so the saving is visible rather than asserted. */
.car__was {
  color: var(--ink-3);
  font-weight: 500;
  margin-right: 0.3rem;
}

/* The ladder on a vehicle page: what booking longer would earn. */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.tier--active { border-color: var(--go); background: var(--go-haze); }

.tier__pct {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--go);
}
.tier__terms { display: grid; line-height: 1.25; }
.tier__terms b { font-size: var(--t-sm); }
.tier__terms span { font-size: var(--t-xs); color: var(--ink-3); }

.tier__state {
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--go);
  text-align: right;
}
.tier__state--near { color: var(--ink-3); font-weight: 500; }

/* An empty result set should not be squeezed into one grid column. */
.empty-cell { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   18. Right to left
   Arabic only, for now. The browser mirrors most of the layout from
   dir="rtl" on <html>; what follows is the handful of things that must NOT
   mirror, plus the few rules still written with physical directions.
   -------------------------------------------------------------------------- */

/* A licence plate reads left to right in Spain whatever language is around it,
   and so does a price. Mirroring either produces something that looks like a
   typo to the person who has to recognise it. */
[dir='rtl'] .plate,
[dir='rtl'] .plate-set,
[dir='rtl'] .car__price,
[dir='rtl'] .callnow__nums,
[dir='rtl'] .callbar {
  direction: ltr;
}
/* ...but the label beside the plate is prose, so it flips back. */
[dir='rtl'] .plate-set__unit { direction: rtl; }

[dir='rtl'] .skip { border-radius: 0 0 0 var(--radius); }

[dir='rtl'] .ask { right: auto; left: 1rem; }
[dir='rtl'] .ask { align-items: flex-start; }
[dir='rtl'] .wa-dock { right: auto; left: 1rem; }
[dir='rtl'] .ask__turn--you { border-radius: 12px 12px 12px 2px; }
[dir='rtl'] .ask__turn--bot { border-radius: 12px 12px 2px 12px; }
[dir='rtl'] .ask__hedge {
  padding-left: 0;
  padding-right: 0.6rem;
  border-left: 0;
  border-right: 2px solid var(--flag, #9a4a06);
}

/* The language picker is a row of buttons; nothing in it is directional
   except the gap, which is logical already. Names stay in their own script
   because each carries its own lang attribute. */
[dir='rtl'] .langpick__item { direction: ltr; unicode-bidi: isolate; }

/* The language picker, in the footer above the copyright line. */
.langpick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.langpick__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.langpick__list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.langpick__item {
  border: 0;
  background: none;
  padding: 0.15rem 0.2rem;
  font: inherit;
  font-size: var(--t-sm);
  color: #b9b0c4;
  cursor: pointer;
  border-radius: 4px;
}
.langpick__item:hover { color: #fff; text-decoration: underline; }
.langpick__item[aria-current='true'] { color: #fff; font-weight: 700; }