/* ============================================================
   ZIYADISS CAR — car rental, Rabat
   Plain CSS. No build step: what is written here is what ships.

   A bright page built around one photograph: the hero picture runs
   full width behind the headline and the search bar, and the
   sections below sit on white with a lot of air around them. The
   only colour that appears is the gold from the logo, and it is
   load-bearing: if something is gold, it is actionable.
   ============================================================ */

:root {
  /* Paper, not ink. The page is white; depth comes from hairlines
     and whitespace rather than from filled panels. */
  --paper: #ffffff;
  --paper-raised: #f7f8fa;
  --line: #e4e7ed;
  --ink: #14171c;
  --muted: #6d7684;

  /* The two colours off the logo. Slate carries the quiet work —
     hairlines, inactive states, the raised panels. */
  --slate: #8e9aaf;
  --slate-soft: #eef0f4;

  /* Logo gold. Reserved for actions and the active state — never
     decoration. `--gold` is the fill; `--gold-deep` is the same
     colour taken dark enough to read as text on white, which the
     logo gold on its own is not. */
  --gold: #c9a252;
  --gold-deep: #8a6825;
  --gold-bright: #dcbc78;
  --gold-dim: #b8903c;

  /* Errors stay red — gold is for actions, not for warnings. */
  --danger: #b3261e;

  /* Kept for the few places that sit on a photograph. */
  --bone: #f4f2ef;

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  --section: clamp(5rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --nav-h: 4.5rem;

  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-reveal: 0.6s;
}

/* ---------- reset ---------- */

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

* {
  margin: 0;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--gold);
  color: var(--ink);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* ---------- shared ---------- */

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  max-width: 32ch;
  margin-top: 1.5rem;
}

.lead {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.75;
  max-width: 42ch;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 64rem) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn--accent {
  background: var(--gold);
  color: var(--ink);
  margin-top: 2rem;
}

.btn--accent:hover {
  background: var(--gold-dim);
}

.btn--ghost {
  border-color: var(--slate);
  color: var(--ink);
  margin-top: 1.5rem;
  padding: 0.85rem 1.75rem;
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* ============================================================
   layout helpers
   ============================================================ */

/* `.wrap` already carries the horizontal inset, so `.gutter` is a
   positioning hook only — it marks the full-bleed band a `.wrap`
   sits inside, and never adds a second inset on top of it. */
.gutter {
  position: relative;
}

/* Sections do not rule themselves: the hairline is asked for where a
   section genuinely needs separating from the one above. */
.rule-top {
  border-top: 1px solid var(--line);
}

/* ============================================================
   nav
   ============================================================ */

/* The bar lives over two different grounds — the photograph at the top
   of the page, then white once it sticks. Rather than repeat every
   colour twice, the bar publishes its own foreground set and the
   solid state simply reassigns it. */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: var(--nav-h);

  --nav-fg: var(--bone);
  --nav-fg-quiet: rgb(244 242 239 / 0.78);
  --nav-line: rgb(244 242 239 / 0.4);
  --nav-active: var(--gold-bright);
}

.nav.is-solid {
  --nav-fg: var(--ink);
  --nav-fg-quiet: var(--muted);
  --nav-line: var(--line);
  --nav-active: var(--gold-deep);
}

/* Over the hero photograph the bar has no plate of its own, only a
   thin scrim — just enough to hold the links, not enough to dim the
   top of the picture. Once the page scrolls the bar takes a paper
   plate and everything in it flips to ink; the `.nav--over` /
   `.nav.is-solid` pair below is what does the flipping. */
.nav__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(8 9 11 / 0.6), rgb(8 9 11 / 0));
  pointer-events: none;
  transition: background 0.3s;
}

.nav.is-solid .nav__scrim {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* ---------- logo ---------- */

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Sized by height and left to keep its own ratio. The source PNG is
   several times this tall, so it stays crisp on a 2x/3x display
   without a second asset. The badge is round, so height is also its
   width: it needs a little more of it than a wordmark would to read. */
/* The badge carries its own pale ground, which over a bright patch of
   the photograph can sit flush against the sky. The shadow lifts it. */
.nav__logo {
  height: 2.6rem;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 5px rgb(8 9 11 / 0.45));
  transition: filter 0.3s;
}

@media (min-width: 60rem) {
  .nav__logo {
    height: 3rem;
  }
}

/* On the white bar the badge already has its own dark ring, so it needs
   nothing but a hairline of separation. */
.nav.is-solid .nav__logo {
  filter: drop-shadow(0 1px 2px rgb(8 9 11 / 0.14));
}

.nav__inner {
  position: relative;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nav-fg-quiet);
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
  transition: color 0.2s;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--nav-fg);
}

/* The active rule is drawn, not coloured in: a hairline that grows
   from the start edge, so the state reads at a glance. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--nav-active);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-reveal);
}

[dir="rtl"] .nav__link::after {
  transform-origin: right;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

/* ---------- language ---------- */

.lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lang__sep {
  color: var(--nav-line);
  font-size: 0.6875rem;
}

.lang__link {
  background: none;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--nav-fg-quiet);
  transition: color 0.2s;
}

.lang__link:hover {
  color: var(--nav-fg);
}

.lang__link.is-active {
  color: var(--nav-active);
}

/* ---------- menu toggle and panel ---------- */

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__toggle {
  background: none;
  border: 1px solid var(--nav-line);
  color: var(--nav-fg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.nav__toggle:hover {
  border-color: var(--nav-active);
  color: var(--nav-active);
}

@media (min-width: 60rem) {
  .nav__toggle {
    display: none;
  }
}

/* The panel closes by height rather than by `display`, so it can be
   animated; `inert` is what actually takes its links out of reach
   while it is shut. */
.nav__panel {
  position: absolute;
  inset-inline: 0;
  top: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s var(--ease-reveal);

  /* The panel is always paper, even while the bar above it is still
     sitting on the photograph, so it opts out of the bar's light-on-
     dark set rather than inheriting it. */
  --nav-fg: var(--ink);
  --nav-fg-quiet: var(--muted);
  --nav-line: var(--line);
  --nav-active: var(--gold-deep);
}

.nav__panel.is-open {
  max-height: 32rem;
}

@media (max-width: 768px) {
  .nav__panel:not(.is-open) {
    border-bottom: 0;
  }
}

.nav__panel-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.nav__panel .nav__link {
  font-size: 0.875rem;
  letter-spacing: 0.12em;
}

/* ---------- book ---------- */

/* Booking is the one thing the bar is actually asking for, so it stops
   being a link and becomes the only filled element in the nav. It is
   gold on both grounds — the fill carries itself against the paper bar
   and against the photograph alike. */
.nav__link[data-section="booking"] {
  background: var(--gold);
  color: var(--ink);
  padding: 0.55rem 1.35rem;
  margin-inline-start: 0.5rem;
  transition: background-color 0.2s, color 0.2s;
}

.nav__link[data-section="booking"]:hover,
.nav__link[data-section="booking"].is-active {
  background: var(--gold-dim);
  color: var(--ink);
}

/* The growing hairline is the wrong signal on a filled chip. */
.nav__link[data-section="booking"]::after {
  content: none;
}

/* In the stacked panel it goes back to sitting on its own line, but
   keeps the fill so it still reads as the action. */
.nav__panel .nav__link[data-section="booking"] {
  margin-inline-start: 0;
  padding: 0.7rem 1.5rem;
}

@media (min-width: 60rem) {
  .nav__panel {
    display: none;
  }
}

/* ============================================================
   hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;

  /* The hero owns horizontal gestures: without this a swipe back to the
     previous slide is read by the browser as the back gesture and the
     visitor leaves the page. Vertical panning stays with the browser, so
     scrolling through the hero still works normally. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

/* The slide stack fills the hero; every photograph is laid on the same
   spot and only opacity separates them, so the crossfade costs no layout
   and never shifts the headline. */
.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: 0;
  transition: opacity 0.7s var(--ease-reveal);
}

.hero__photo.is-current {
  opacity: 1;
}

/* Add 100px to each slide's width-fitted height on mobile. Cover keeps
   the cars proportional, with centered side cropping and a soft foot. */
@media (max-width: 768px) {
  .hero {
    background-color: #08090b;
  }

  .hero__photo {
    height: calc(56.25vw + 100px);
    object-fit: cover;
    object-position: center top;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  }

  .hero__photo:nth-child(2) {
    height: calc(66.69304vw + 100px);
  }

  .hero__photo:nth-child(3) {
    height: calc(54.54545vw + 100px);
  }
}

/* Stillness was asked for: the slides stop crossfading and the script
   stops advancing them, so the hero is one steady photograph. */
@media (prefers-reduced-motion: reduce) {
  .hero__photo {
    transition: none;
  }
}

/* The photograph is the point, so the scrim is spent only where the
   type actually sits. Above the halfway line it is gone entirely and
   the picture runs at full brightness — the car, the light on it and
   whatever is behind it stay legible as a picture, not as a texture
   behind a headline. Neutral black only, never a colour cast. */
.hero__wedge {
  position: absolute;
  inset: 0;
  background:
    /* A soft column behind the type. The headline sits on the leading
       edge, so the scrim is spent there and the far side of the
       photograph — where the cars are — stays untouched. */
    linear-gradient(
      to right,
      rgb(8 9 11 / 0.62) 0%,
      rgb(8 9 11 / 0.38) 34%,
      rgb(8 9 11 / 0.06) 62%,
      rgb(8 9 11 / 0) 78%
    ),
    /* Shade the bottom of the photograph behind the picker. */
    linear-gradient(
      to top,
      rgb(8 9 11 / 0.42) 0%,
      rgb(8 9 11 / 0.2) 22%,
      rgb(8 9 11 / 0) 46%
    );
}

/* Right-to-left: the type moves to the other edge, so the column has to
   follow it. */
[dir="rtl"] .hero__wedge {
  background:
    linear-gradient(
      to left,
      rgb(8 9 11 / 0.62) 0%,
      rgb(8 9 11 / 0.38) 34%,
      rgb(8 9 11 / 0.06) 62%,
      rgb(8 9 11 / 0) 78%
    ),
    linear-gradient(
      to top,
      rgb(8 9 11 / 0.42) 0%,
      rgb(8 9 11 / 0.2) 22%,
      rgb(8 9 11 / 0) 46%
    );
}

/* Narrow screens have no free side to protect: the type runs the full
   width, so the scrim becomes a plain vertical one covering the text
   band and the picture keeps the top of the frame. */
@media (max-width: 768px) {
  .hero__wedge,
  [dir="rtl"] .hero__wedge {
    background:
    linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.70) 0%,
      rgb(0 0 0 / 0.45) 20%,
      rgb(0 0 0 / 0.15) 40%,
      rgb(0 0 0 / 0) 60%
    ),
    linear-gradient(
      to top,
      rgb(8 9 11 / 0.72) 0%,
      rgb(8 9 11 / 0.58) 38%,
      rgb(8 9 11 / 0.3) 62%,
      rgb(8 9 11 / 0.05) 82%,
      rgb(8 9 11 / 0) 100%
    );
  }
}

/* ---------- hero dots ----------

   In the content flow, between the headline and the picker, so they can
   never collide with the search bar at a width nobody tested. Gold marks
   the active slide: on this page, if it is gold it is actionable. */
.hero__dots {
  display: flex;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
}

.hero__dot {
  width: 2.25rem;
  height: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(244 242 239 / 0.45);
  box-shadow: 0 1px 3px rgb(8 9 11 / 0.45);
  cursor: pointer;
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.hero__dot:hover {
  background: rgb(244 242 239 / 0.75);
}

.hero__dot[aria-current="true"] {
  background: var(--gold);
}

.hero__dot:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* A finger needs more than a hairline. The target is grown with padding
   and the paint clipped back to the content box, so the tap area is
   comfortable while the mark itself stays thin. */
@media (pointer: coarse) {
  .hero__dot {
    height: 0.85rem;
    padding: 0.3rem 0;
    background-clip: content-box;
    gap: 0.75rem;
  }
}
/* The only block on the page that does not sit on paper: the headline
   rides the photograph, so it opts out of the body's ink and takes
   bone instead. The scrim above is shaped to land exactly here. */
.hero__content {
  position: relative;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 3rem;
  color: var(--bone);
}

.hero__title {
  font-size: clamp(2.75rem, 8vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin-top: 1.25rem;
  max-width: 15ch;
  text-shadow: 0 2px 18px rgb(8 9 11 / 0.55);
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 40ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: rgb(244 242 239 / 0.82);
  text-shadow: 0 1px 12px rgb(8 9 11 / 0.6);
}

/* Over the photograph the eyebrow needs more weight than it does on a
   plain ink section. */
/* The scrim is deliberately thin this high up the picture, which
   leaves small gold type sitting on open sky. The colour stays on
   brand and the legibility is bought with shadow instead — a tight
   one to cut the edge, a wide one to darken the ground behind it. */
.eyebrow--deep {
  color: var(--gold-bright);
  text-shadow:
    0 1px 2px rgb(8 9 11 / 0.9),
    0 2px 16px rgb(8 9 11 / 0.75);
}

/* The picker sits over the photograph. */
.hero .picker {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: -1px;
}

.hero .picker .eyebrow {
  margin-bottom: 1.25rem;
}

/* Labels sit directly on the hero photograph. */
.hero .picker .field__label {
  color: var(--bone);
  text-shadow: 0 1px 4px rgb(8 9 11 / 0.9);
}

.btn--dark,
.btn--solid {
  background: var(--gold);
  color: var(--ink);
  margin-top: 2rem;
}

.btn--dark:hover,
.btn--solid:hover {
  background: var(--gold-dim);
}

/* ============================================================
   fleet
   ============================================================ */

.grid-cars {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 44rem) {
  .grid-cars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .grid-cars {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  text-align: start;
  background: none;
  border: 1px solid var(--line);
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.25s;
}

.card:hover,
.card:focus-visible {
  border-color: var(--slate);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-reveal);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__name {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.card__foot {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.card .price {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.card__more {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   three-up columns — what is included, and the routes
   ============================================================ */

.cols {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 44rem) {
  .cols--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cols h3 {
  font-size: 1.125rem;
  margin-top: 1rem;
  letter-spacing: -0.01em;
}

.cols p {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--muted);
}

/* A route has a real distance and a real duration — the figures are
   the content here, not decoration. */
.route__to {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.route__meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   full-bleed plate
   ============================================================ */

.plate {
  position: relative;
  height: clamp(18rem, 46vw, 32rem);
  overflow: hidden;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The copy below rides up over the bottom edge of the plate, so the
   photograph and the section it introduces read as one block. */
.pull-up {
  position: relative;
  margin-top: clamp(-6rem, -8vw, -3rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}

@media (min-width: 60rem) {
  .pull-up {
    margin-inline-end: clamp(0px, 12vw, 10rem);
  }
}

/* ============================================================
   forms
   ============================================================ */

.field {
  display: block;
  text-align: start;
}

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input {
  width: 100%;
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0.8rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, background-color 0.2s;
}

.field__input:hover {
  border-color: var(--slate);
}

.field__input:focus {
  border-color: var(--gold);
  outline: none;
}

/* The fields are white now, so the browser default glyph is already
   the right way round — it only wants toning down. */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.picker {
  margin-top: 2rem;
  width: 100%;
  max-width: 44rem;
  border: 0;
  background: transparent;
  padding: 0 0 1.5rem;
}

.picker__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .picker__grid {
    grid-template-columns: 1fr 1fr 1.3fr;
  }
}

.picker .btn {
  width: 100%;
  margin-top: 1.25rem;
}

.field--dark .field__input {
  background: var(--paper);
  border-color: var(--line);
}

/* ---------- booking ---------- */

.booking {
  display: grid;
  gap: 3rem;
  margin-top: 3.5rem;
}

@media (min-width: 64rem) {
  .booking {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
}

.form-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .form-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.extras {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}

.extra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.extra:hover {
  border-color: var(--slate);
}

.extra input {
  accent-color: var(--gold);
  width: 1rem;
  height: 1rem;
}

.extra__name {
  flex: 1;
  font-size: 0.875rem;
}

.extra__price {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-deep);
}

/* The one panel on the page that is allowed a fill, and it takes the
   slate tint rather than a neutral grey — it is the running total, so
   it should sit slightly apart from the form feeding it. */
.summary {
  border: 1px solid var(--line);
  background: var(--slate-soft);
  padding: 1.75rem;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.summary__row span:last-child {
  color: var(--ink);
  font-family: var(--font-mono);
}

.summary__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding-top: 1.25rem;
}

.summary__total span:first-child {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary__total span:last-child {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  color: var(--gold-deep);
}

.summary__note {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
}

.form-error {
  margin-top: 1rem;
  border-inline-start: 2px solid var(--danger);
  padding-inline-start: 0.85rem;
  font-size: 0.8125rem;
  color: var(--danger);
}

.form-error:empty {
  display: none;
}

/* ============================================================
   page sections below the film
   ============================================================ */

.prose p {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 65ch;
}

.stats {
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 40rem) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat__value {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
}

.contact-grid {
  display: grid;
  gap: 3rem;
  margin-top: 3.5rem;
}

@media (min-width: 48rem) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .contact-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-grid h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.contact-grid p {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--muted);
}

.contact-grid a:hover {
  color: var(--ink);
}

.footer {
  border-top: 1px solid var(--line);
  padding-block: 5rem 3rem;
}

.footer__grid {
  display: grid;
  gap: 3.5rem;
}

@media (min-width: 40rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.footer a,
.footer li {
  font-size: 0.875rem;
  color: var(--muted);
  transition: color 0.2s;
}

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

.footer__base {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  font-size: 0.75rem;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .footer__base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- whatsapp dock ---------- */

.dock {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #25d366;
  color: #05300f;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -12px rgb(20 23 28 / 0.28);
  transition: transform 0.2s;
}

.dock:hover {
  transform: translateY(-2px);
}

.dock svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.dock__label {
  display: none;
}

@media (min-width: 40rem) {
  .dock__label {
    display: inline;
  }
}

/* ---------- car detail ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgb(20 23 28 / 0.55);
  backdrop-filter: blur(8px);
}

.modal.is-open {
  display: flex;
}

.modal__box {
  position: relative;
  width: min(56rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
}

.modal__close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
}

.modal__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.modal__body {
  padding: 2rem;
}

.modal__body .price {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--gold-deep);
  margin-top: 1.5rem;
}

.price__unit {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-start: 0.35rem;
}

.card__blurb {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--muted);
}

.specs {
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-block: 0.85rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.spec-row span:last-child {
  color: var(--ink);
  font-family: var(--font-mono);
}

.included {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.6rem;
}

.included li {
  font-size: 0.875rem;
  color: var(--muted);
  padding-inline-start: 1.25rem;
  position: relative;
}

.included li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gold);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.modal__actions .btn--accent {
  margin-top: 0;
}

/* ============================================================
   animation

   Everything that hides an element is scoped twice: to `html.motion`,
   a class the script adds only for a visitor who has NOT asked for
   reduced motion, and to the no-preference media query. If the script
   never runs, nothing is ever hidden — text is never left invisible
   waiting for a transition that will not arrive.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Nav links arrive one after another on load, left cluster first. */
  .motion .nav__link {
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity 0.5s var(--ease-reveal) var(--delay, 0s),
      transform 0.5s var(--ease-reveal) var(--delay, 0s);
  }

  .motion .nav.is-ready .nav__link {
    opacity: 1;
    transform: none;
  }

  .motion .reveal .eyebrow {
    --delay: 0s;
  }

  .motion .reveal .section-title {
    --delay: 0.09s;
  }

  .motion .reveal .lead {
    --delay: 0.18s;
  }

  .motion .reveal .eyebrow,
  .motion .reveal .section-title,
  .motion .reveal .lead {
    opacity: 0;
    transform: translateY(0.6rem);
    transition:
      opacity var(--dur-reveal) var(--ease-reveal) var(--delay, 0s),
      transform var(--dur-reveal) var(--ease-reveal) var(--delay, 0s);
  }

  .motion .reveal.is-in .eyebrow,
  .motion .reveal.is-in .section-title,
  .motion .reveal.is-in .lead {
    opacity: 1;
    transform: none;
  }
}

.motion .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s var(--ease-reveal) var(--delay, 0s),
    transform 0.7s var(--ease-reveal) var(--delay, 0s);
}

.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Arabic ---------- */

:lang(ar) body,
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) input,
:lang(ar) select,
:lang(ar) textarea,
:lang(ar) button,
[lang="ar"] {
  font-family: var(--font-arabic);
}

/* Arabic is a joined script: letterspacing pulls the connections apart,
   and there is no case to transform. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .nav__link,
[dir="rtl"] .nav__toggle,
[dir="rtl"] .lang__link,
[dir="rtl"] .field__label,
[dir="rtl"] .card__more,
[dir="rtl"] .route__to,
[dir="rtl"] .route__meta,
[dir="rtl"] .contact-grid h3,
[dir="rtl"] .footer h2,
[dir="rtl"] .summary__total span:first-child,
[dir="rtl"] .modal__close,
[dir="rtl"] .dock,
[dir="rtl"] .price__unit {
  letter-spacing: 0;
  text-transform: none;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  letter-spacing: 0;
}

[dir="rtl"] p,
[dir="rtl"] li {
  line-height: 1.85;
}

/* ---------- motion off ---------- */

/* Everything resolves to its final state here — no movement, no fades,
   nothing that could trigger vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .nav__link {
    opacity: 1 !important;
    transform: none !important;
  }

  .card__media img {
    transform: none !important;
  }
}