/* ============================================================
   Real Viking Car Rental — Modernist design system
   Base tokens/components from the Modernist design system,
   with the site's gold (#a3282c) baked in as the accent so every
   page and component picks it up automatically.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Gold accent, replacing the design system's default red */
  --color-accent: #a3282c;
  --color-accent-100: #f7e7e7;
  --color-accent-200: #ecc5c6;
  --color-accent-300: #dc9a9c;
  --color-accent-400: #c25f62;
  --color-accent-500: #a3282c;
  --color-accent-600: #8b1518;
  --color-accent-700: #6d0b0d;
  --color-accent-800: #520709;
  --color-accent-900: #370405;
  /* Mono scheme: accent-2 mirrors accent, kept only so both resolve */
  --color-accent-2: #a3282c;
  --color-accent-2-100: #f7e7e7;
  --color-accent-2-200: #ecc5c6;
  --color-accent-2-300: #dc9a9c;
  --color-accent-2-400: #c25f62;
  --color-accent-2-500: #a3282c;
  --color-accent-2-600: #8b1518;
  --color-accent-2-700: #6d0b0d;
  --color-accent-2-800: #520709;
  --color-accent-2-900: #370405;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Photography prints in colour on this site — cars sell on their colour */
.grayscale, .grayscale img, .car-card-img, .cat-card-img { filter: none !important; }

/* — layout — */
.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }
.sec { padding-top: 64px; padding-bottom: 64px; }

/* — motion —
   Scroll-reveal: same mechanism as js/reveal.js (used on terms/privacy/
   refunds already) — add class="reveal" to an element and it fades/slides
   up the first time it enters the viewport. reveal.js sets a staggered
   transition-delay on elements that become visible together, so a row of
   cards animates in left-to-right instead of all at once. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Above-the-fold content (hero, booking bar) can't rely on a scroll
   observer — it's already on screen at load — so it gets a plain CSS
   entrance animation instead, staggered with animation-delay. This runs
   with no JS dependency, so there's no flash-of-invisible-content risk
   if a script is slow or blocked. */
@keyframes gk-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-enter { animation: gk-fade-up .8s cubic-bezier(.22,1,.36,1) both; }
.hero-enter-1 { animation-delay: .05s; }
.hero-enter-2 { animation-delay: .2s; }
.hero-enter-3 { animation-delay: .35s; }

@keyframes gk-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-enter, .hero-enter-1, .hero-enter-2, .hero-enter-3 { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(0) scale(0.97); }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); transform: translateY(-2px); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-glass {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.btn-glass:hover { background: rgba(255,255,255,0.24); transform: translateY(-2px); }
.btn-glass:active { background: rgba(255,255,255,0.3); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: center; }

/* — forms — */

.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 8px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
textarea.input { min-height: 90px; resize: vertical; }

/* — cards / tags — */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* — navigation — */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 2px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ============================================================
   Page-level components (homepage, fleet, about, contact)
   ============================================================ */

/* nav row (all pages) */
.nav-row { height: 76px; }
.nav-row .nav-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 18px; white-space: nowrap; }
.nav-row .nav-brand .dot { width: 8px; height: 8px; background: var(--color-accent); flex: none; }

/* mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle {
  display: none; margin-left: auto; flex: none;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 2px solid var(--color-divider); cursor: pointer;
}
.nav-toggle-bar { display: block; width: 18px; height: 2px; background: var(--color-text); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile dropdown menu — hidden until opened, hidden entirely on desktop */
.nav-mobile-menu { display: none; }

/* hero / page-hero */
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: stretch; border-bottom: 2px solid var(--color-divider); padding-bottom: 56px; }
.hero-img { position: relative; min-height: 420px; overflow: hidden; }
/* Slow, subtle Ken Burns drift — never fully still, never distracting. */
.hero-img img { animation: gk-hero-zoom 16s ease-in-out infinite alternate; }

/* section furniture — these were inline styles repeated across the homepage,
   which meant they couldn't respond to screen size. Same look, now in classes. */
.sec-kicker { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-accent-700); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.sec-head h2, .sec-intro h2 { margin: 0; }
.sec-intro { max-width: 520px; margin-bottom: 40px; }

.trust-item { padding: 0 24px; }
.trust-item.is-first { padding-inline-start: 0; }
.trust-item.has-rule { border-right: 2px solid var(--color-divider); }
.trust-num { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-accent-700); }
.trust-item h4 { margin: 12px 0 8px; }
.trust-item p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.steps li h3 { margin: 12px 0 8px; }
.steps li p { margin: 0; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* Homepage section bands: vertical rhythm scales down on small screens
   instead of holding 64px of air above and below every block. */
.sec-band { padding: clamp(40px, 7vw, 64px) 0; border-bottom: 2px solid var(--color-divider); }

.cta-copy { max-width: 520px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* hero copy — every size scales with the viewport instead of stepping at
   breakpoints, so the 320px phones and the 430px phones both get type that
   fits the column rather than filling it edge to edge. */
.hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-kicker { margin: 0 0 clamp(12px, 3vw, 20px); font-size: clamp(9.5px, 2.6vw, 11px);
  font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); }
.hero-title { margin: 0 0 clamp(14px, 3.4vw, 24px); font-size: clamp(29px, 7.6vw, 64px);
  line-height: 1.03; overflow-wrap: break-word; }
.hero-lede { margin: 0 0 clamp(20px, 5vw, 32px); font-size: clamp(14.5px, 3.9vw, 17px);
  line-height: 1.6; max-width: 44ch; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(26px, 6vw, 48px); }

/* hero video panel — the showroom clip in the same frame the photo used to sit in */
.hero-media { background: #201e1d; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Darkens only the lower third, so the buttons stay readable over any frame. */
.hero-media-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(32,30,29,.78) 0%, rgba(32,30,29,.34) 32%, rgba(32,30,29,0) 62%); }
.hero-media-overlay { position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.hero-media-tag { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: #f3f2f2; }
.hero-media-tag .rule { width: 28px; height: 2px; background: var(--color-accent-300); flex: none; }
.hero-media-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Play/pause sits out of the way until you hover, or until the clip is stopped. */
.hero-media-toggle { position: absolute; top: 16px; right: 16px; inset-inline-end: 16px; z-index: 2; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(32,30,29,0.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
  opacity: 0; transition: opacity .25s ease, background .2s ease; }
.hero-media:hover .hero-media-toggle,
.hero-media-toggle:focus-visible,
.hero-media.is-paused .hero-media-toggle { opacity: 1; }
.hero-media-toggle:hover { background: rgba(32,30,29,0.62); }
.hero-media-toggle .icon-play { display: none; }
.hero-media.is-paused .hero-media-toggle .icon-play { display: block; }
.hero-media.is-paused .hero-media-toggle .icon-pause { display: none; }

/* Loop progress, drawn as one of the site's own 2px rules. */
.hero-media-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; overflow: hidden;
  background: rgba(243,242,242,0.18); transition: opacity .25s ease; }
.hero-media-bar i { display: block; height: 100%; background: var(--color-accent-500); transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .hero-media-bar i { transform-origin: right center; }
html[dir="rtl"] .hero-media-toggle { right: auto; left: 16px; }
.hero-media.is-paused .hero-media-bar { opacity: 0; }

@media (hover: none) { .hero-media-toggle { opacity: 1; } }
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; border-top: 2px solid var(--color-divider); padding-top: 24px; margin: 0; }

.stat dt { font-family: var(--font-heading); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; }
.stat dd { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.page-hero, .fleet-hero { position: relative; overflow: hidden; background: #201e1d; }
.page-hero .kicker, .fleet-hero .kicker { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-300); margin: 0 0 18px; }
.page-hero .kicker .rule, .fleet-hero .kicker .rule { width: 40px; height: 2px; background: var(--color-accent-300); }
.page-hero h1, .fleet-hero h1 { font-size: 52px; line-height: 1.02; color: #f3f2f2; margin: 0 0 16px; }
.page-hero p, .fleet-hero p { max-width: 46ch; color: rgba(243,242,242,.7); font-size: 17px; line-height: 1.6; margin: 0; }

/* booking bar */
.book-bar { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 0; border: 2px solid var(--color-divider); }
.book-bar .field { padding: 16px 20px; border-right: 2px solid var(--color-divider); }
.book-bar .input { border: 0; background: transparent; padding: 0; }
.book-bar button { border-radius: 0; padding: 0 40px; font-size: 15px; }

/* live search preview dropdown (homepage) */
.search-preview {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40;
  background: var(--color-bg); border: 2px solid var(--color-divider);
  box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto;
}
.search-preview-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--color-text);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.search-preview-item:last-of-type { border-bottom: 0; }
.search-preview-item img {
  width: 56px; height: 40px; object-fit: cover; flex: none;
  background: var(--color-surface);
}
.search-preview-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.search-preview-item-text strong { font-size: 13.5px; font-weight: 700; }
.search-preview-item-text small { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.search-preview-item-price { font-family: var(--font-heading); font-weight: 800; font-size: 14px; white-space: nowrap; text-align: end; }
.search-preview-item-price small { font-weight: 600; font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.search-preview-item:hover, .search-preview-item.is-active { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.search-preview-more {
  display: block; text-align: center; padding: 11px; font-size: 12.5px; font-weight: 700;
  color: var(--color-accent-700); text-decoration: none; background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.search-preview-more:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.search-preview-empty { margin: 0; padding: 16px 14px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* grids */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--color-divider); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-divider); margin: 0; }
.stat-grid .stat { background: var(--color-bg); padding: 32px; }
.stat-grid .stat dt { font-size: 40px; }
.stat-grid .stat dd { margin-top: 6px; }

/* category cards */
.cat-card { position: relative; aspect-ratio: 4/3; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; text-decoration: none; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); z-index: 2; }
.cat-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,22,26,.92) 0%, rgba(23,22,26,.55) 32%, rgba(23,22,26,.10) 70%); }
.cat-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transition: filter .3s, transform .5s cubic-bezier(.22,1,.36,1); }
.cat-card:hover .cat-card-img { transform: scale(1.06); }

/* The category grid sizes itself to however many categories exist — index.php
   sets --cat-cols to a number they divide into exactly. The 2px gaps show the
   grid's own background, which is what draws the hairlines between tiles; that
   background only goes on when the tiles fill the grid (.cat-grid-lined), so a
   half-empty last row can never leave a bare grey block. When they don't fill
   it, each tile carries its own outline instead. */
.cat-grid { display: grid; grid-template-columns: repeat(var(--cat-cols, 4), 1fr); gap: 2px; }
.cat-grid-lined { background: var(--color-divider); }
.cat-grid:not(.cat-grid-lined) > .cat-card { outline: 2px solid var(--color-divider); }

/* A category with no photo set yet. Without this it renders as the grid's grey
   background showing through, which reads as a broken tile rather than a
   deliberate one. */
.cat-card.is-photoless { background: linear-gradient(158deg, #3b3437 0%, #211d1f 55%, #2a1113 100%); }
.cat-card.is-photoless::before { background: linear-gradient(to top, rgba(23,22,26,.75), rgba(23,22,26,.05)); }
.cat-card .cat-card-body { position: relative; color: #f3f2f2; }
.cat-card .cat-card-body span { display: block; font-size: 11px; font-weight: 600; opacity: .82;
  letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.cat-card .cat-card-body h3 { margin: 6px 0 0; color: #f3f2f2; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* car cards + price rows */
.car-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.car-card { background: var(--color-bg); display: flex; flex-direction: column; outline: 2px solid var(--color-divider); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.car-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); z-index: 2; }
.car-card .car-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-surface); }
.car-card .car-card-body { padding: 20px; }
.car-card-img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.car-card:hover .car-card-img { transform: scale(1.07); }

/* --- 3D photo, added by js/card-3d.js on pointer devices ---
   The frame tilts under the cursor, the photo drifts the other way inside
   it (that opposing drift is what sells the depth), and a soft highlight
   tracks the pointer across the glass. Nothing here applies until the
   script adds .is-3d, so touch devices and no-JS keep the flat card. */
.car-card.is-3d { perspective: 1000px; }
.car-card.is-3d .car-card-media {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.car-card.is-3d .car-card-img {
  transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
/* While the pointer is actually on the card, tracking has to be immediate —
   an easing curve here reads as lag, not smoothness. */
.car-card.is-3d.is-tilting .car-card-media {
  transition: transform .1s linear, box-shadow .3s ease;
  box-shadow: 0 22px 44px -20px rgba(32, 30, 29, 0.6);
}
.car-card.is-3d.is-tilting .car-card-img {
  transform: scale(1.12) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .1s linear;
}
.car-card.is-3d .car-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 62%);
}
.car-card.is-3d.is-tilting .car-card-media::after { opacity: 1; }
/* The badge sits above the highlight, not under it. */
.car-card .car-card-media .tag, .car-card .car-card-media .offer-badge { z-index: 2; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; }
.price-row + .price-row { border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.price-row span:first-child { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.price-row b { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.price-row.is-day b { font-size: 24px; }
.car-card-wa-btn:hover { background: #1DA851 !important; }

/* --- car slider (homepage category strips) ---
   Built on the browser's own horizontal scrolling with snap points, so
   swipe, trackpad, keyboard and the arrow buttons all drive the same
   thing. Without JavaScript it's still a usable scrolling row. */
.car-slider { position: relative; }
.car-slider-track {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Vertical breathing room inside the scroller. overflow-x forces
     overflow-y to clip, so the card's hover lift and the 3D tilt would be
     sliced off without this; the negative margin takes the space back. */
  padding: 16px 2px 18px;
  margin: -16px -2px -12px;
}
.car-slider-track::-webkit-scrollbar { display: none; }
.car-slider-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.car-slider-track > .car-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  outline: 2px solid var(--color-divider);
}

/* Arrows live in the section header, next to the "view all" link, rather
   than floating over the photos. */
.sec-head-actions { display: flex; align-items: center; gap: 14px; }
.car-slider-ctrl { display: flex; gap: 8px; }
.car-slider-ctrl[hidden] { display: none; }
.slider-arrow {
  width: 38px; height: 38px; padding: 0; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border, color-mix(in srgb, var(--color-text) 26%, transparent));
  background: var(--glass-tint, rgba(255,255,255,0.55));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-highlight, rgba(255,255,255,0.65));
  color: var(--color-text);
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.slider-arrow:hover { background: var(--glass-tint-hover, rgba(255,255,255,0.78)); transform: translateY(-1px); }
.slider-arrow:active { transform: translateY(0) scale(0.96); }
.slider-arrow:disabled { opacity: .35; cursor: default; transform: none; }
html[dir="rtl"] .slider-arrow svg { transform: scaleX(-1); }

/* Position rail — the same 2px gold rule used elsewhere on the site. */
.car-slider-rail { height: 2px; background: var(--color-divider); margin-top: 8px; overflow: hidden; }
.car-slider-rail i {
  display: block; height: 100%; width: 100%;
  background: var(--color-accent-500);
  transform: scaleX(0.33); transform-origin: left center;
  /* Updated every animation frame while scrolling, so a transition here
     would only add lag. */
}
html[dir="rtl"] .car-slider-rail i { transform-origin: right center; }

@media (max-width: 1024px) {
  .car-slider-track > .car-card { flex-basis: calc((100% - 16px) / 2); }
  .sec-head-actions { justify-content: center; }
}
@media (max-width: 720px) {
  /* A sliver of the next card showing is what tells someone it swipes. */
  .car-slider-track > .car-card { flex-basis: 86%; }
  .car-slider-ctrl { display: none; }
  .car-slider-rail { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .car-slider-track { scroll-behavior: auto; }
  .slider-arrow { transition: none; }
  .slider-arrow:hover, .slider-arrow:active { transform: none; }
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; list-style: none; margin: 0; padding: 0; }
.steps li { border-top: 2px solid var(--color-text); padding-top: 20px; }
.steps .num { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-accent-700); }

/* fleet layout */
.fleet-body { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.filter-link { display: block; padding: 9px 0; font-size: 14px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 65%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.filter-link:hover { color: var(--color-text); }
.filter-link.is-active { color: var(--color-accent-700); font-weight: 700; }
.sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 2px solid var(--color-divider); }

/* contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border: 2px solid var(--color-divider); }
.contact-info { padding: 40px; border-right: 2px solid var(--color-divider); }
.contact-form { padding: 40px; }
.info-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.info-row .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); min-width: 74px; padding-top: 2px; }
.info-row .v { font-size: 15px; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* poster CTA */
.cta-poster { background: var(--color-accent); padding: 72px 0; }
.cta-poster h2 { color: var(--color-bg); margin: 0 0 12px; }
.cta-poster p { color: color-mix(in srgb, var(--color-bg) 82%, transparent); margin: 0; }
.cta-poster .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-poster .btn-light { background: var(--color-bg); color: var(--color-text); }
.cta-poster .btn-outline-light { border: 1px solid var(--color-bg); color: var(--color-bg); background: transparent; }

/* value cards (about) */
.value-card { outline: 2px solid var(--color-divider); padding: 28px; }
.value-card .num { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--color-accent-700); }

/* site footer */
.site-footer { padding: 48px 0 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); border-top: 2px solid var(--color-divider); }
.site-footer .nav-brand { font-size: 16px; color: var(--color-text); }
.site-footer .foot-links { display: flex; gap: 24px; flex-wrap: wrap; }

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

/* nav collapses to a hamburger below 880px */
@media (max-width: 880px) {
  .nav-row { height: 68px; }
  .nav-links-desktop { display: none !important; }
  .nav-toggle { display: flex; }
  .nav-mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--color-bg); border-bottom: 2px solid var(--color-divider);
    box-shadow: var(--shadow-md);
    flex-direction: column; padding: 8px clamp(16px, 4vw, 32px) 20px;
  }
  .nav-mobile-menu.is-open { display: flex; }
  .nav-mobile-menu a {
    padding: 14px 4px; font-size: 15px; text-decoration: none; color: var(--color-text);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  }
  .nav-mobile-menu a.is-active { color: var(--color-accent-700); font-weight: 700; }
  .nav-mobile-menu a.btn { border-bottom: 0; text-align: center; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-img { min-height: 320px !important; order: -1; }
  /* Portrait footage, so give it real height instead of a letterboxed strip. */
  /* Fluid height, never a fixed step: scales with the viewport width and is
     capped by viewport height so landscape phones don't get a panel taller
     than the screen. height (not min-height) so max-height can win. */
  .hero-media { min-height: 0 !important; height: 380px; height: clamp(300px, 46vw, 460px); max-height: 66vh; }

  /* Single column from here down — the copy sits under the video rather than
     beside it, so it's centred. On desktop it stays left-aligned against the
     video panel. To centre it there too, move these four rules out of this
     media query. */
  .hero-copy { align-items: center; text-align: center; }
  .hero-lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-stats .stat { text-align: center; }

  /* Every section follows the hero: one column, so the copy is centred. */
  .sec-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .sec-intro { max-width: none; margin-left: auto; margin-right: auto; text-align: center; }
  .trust-item, .steps li { text-align: center; }
  .cat-card { justify-content: flex-end; }
  .cat-card .cat-card-body { text-align: center; }
  .cta-poster .container { flex-direction: column; align-items: center; text-align: center; }
  .cta-copy { max-width: none; }
  .cta-actions { justify-content: center; }
  .book-bar { grid-template-columns: 1fr 1fr !important; }
  .book-bar > * { border-right: 0 !important; border-bottom: 2px solid var(--color-divider); }
  .book-bar > *:first-child, .book-bar > button { grid-column: 1 / -1; }
  .book-bar > button { padding: 16px 40px !important; border-bottom: 0; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 24px !important; background: transparent !important; }
  .grid-4 > * { border-right: 0 !important; padding: 0 !important; }
  .grid-4 > .cat-card { outline: 2px solid var(--color-divider); }
  .grid-3 { grid-template-columns: 1fr 1fr !important; background: transparent !important; gap: 24px !important; }
  .grid-3 > .car-card { outline: 2px solid var(--color-divider); }
  .steps { grid-template-columns: 1fr !important; gap: 28px !important; }
  .sec { padding-top: 44px !important; padding-bottom: 44px !important; }
  .fleet-body { grid-template-columns: 1fr; gap: 32px; }
  .car-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .nav-row { height: auto !important; flex-wrap: wrap; gap: 14px 20px !important; padding-top: 16px; padding-bottom: 16px; }
  .nav-row .nav-brand { width: 100%; margin-right: 0 !important; }
}
@media (max-width: 720px) {
  .book-bar { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .hero { padding-top: 0 !important; }
  /* The title wraps on its own down here — a forced break would leave a
     lonely word on the first line at 320px. */
  .hero-title-break { display: none; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 150px; }
  /* Roughly a 4:5 portrait crop, expressed in vw so it tracks every phone
     width instead of snapping at breakpoints. No aspect-ratio, so iOS
     Safari 14 and older behave identically. */
  .hero-media { height: 420px; height: clamp(340px, 116vw, 560px); max-height: 74vh; }
  .hero-media-overlay { left: 16px; right: 16px; bottom: 18px; }
  .hero-media-toggle { top: 12px; right: 12px; inset-inline-end: 12px; }
  .hero-media-actions .btn { flex: 1 1 130px; }
  .hero-stats { gap: 12px !important; }
  .hero-stats .stat { text-align: center; border-right: 1px solid var(--color-divider); }
  .hero-stats .stat:last-child { border-right: 0; }
  .hero-stats .stat dt { font-size: 22px !important; }
  .hero-stats .stat dd { font-size: 9.5px !important; letter-spacing: 0.06em !important; line-height: 1.4 !important; }
  h2 { font-size: 30px !important; }
  .car-grid { grid-template-columns: 1fr; }
  .fleet-hero h1, .page-hero h1 { font-size: 34px !important; }
  .sort-bar { flex-direction: column; align-items: flex-start !important; }
  .contact-info, .contact-form { padding: 24px; }
  .form-row { grid-template-columns: 1fr !important; }
  .value-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .sort-bar form { width: 100%; flex-wrap: wrap; }
  .sort-bar select.input { width: 100% !important; }
  .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .input { min-height: 44px; }
  .grid-4 { gap: 14px !important; }
  /* The four-point strip is hidden on phones — stacked, it was four screens
     of scrolling before the fleet. Delete this rule to bring it back. */
  .trust-strip { display: none !important; }
  .cat-card { padding: 18px !important; }
  .cat-card .cat-card-body h3 { font-size: 17px; }
}

/* extra-small phones */
@media (max-width: 420px) {
  .container { padding-left: 16px; padding-right: 16px; }
  h1:not(.hero-title) { font-size: 32px !important; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 140px; }
  h2 { font-size: 24px !important; }
  .cta-poster { padding: 48px 0 !important; }
  .cta-poster .container { flex-direction: column; align-items: center !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .hero-stats { gap: 10px !important; }
  .hero-stats .stat dt { font-size: 19px !important; }
  .hero-stats .stat dd { font-size: 9px !important; }
  .value-card, .contact-info, .contact-form { padding: 20px !important; }
  .grid-4 { gap: 10px !important; }
  .cat-card { padding: 14px !important; }
  .cat-card .cat-card-body h3 { font-size: 16px !important; margin-top: 4px !important; }
  .cat-card .cat-card-body span { font-size: 10.5px !important; }
  .hero-media-overlay { left: 12px; right: 12px; bottom: 14px; gap: 10px; }
  .hero-media-tag { font-size: 10px; letter-spacing: 0.14em; }
  .hero-media-tag .rule { width: 18px; }
  .hero-media-actions { gap: 8px; }
  .hero-media-actions .btn { flex: 1 1 118px; font-size: 13px; padding-left: 10px; padding-right: 10px; }
  .hero-media-toggle { width: 30px; height: 30px; top: 10px; right: 10px; }
}

/* Phone held sideways — short, wide viewport. Keep the two-column hero rather
   than stacking: a full-width band would crop the portrait clip to a slice.
   The panel takes its height from the text column, same as on desktop. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {
  .hero { padding-top: 20px !important; }
  .hero-grid { grid-template-columns: 1.15fr 1fr !important; gap: 28px !important; }
  .hero-img { order: 0 !important; }
  .hero-media { height: auto !important; min-height: 260px !important; max-height: none; }
  .hero-title { font-size: 34px; }
  .hero-lede { font-size: 15px; }
  .hero-title-break { display: inline; }
  /* Two columns again here, so the copy goes back to the left edge. */
  .hero-copy { align-items: flex-start; text-align: start; }
  .hero-lede { margin-left: 0; margin-right: 0; }
  .hero-cta { justify-content: flex-start; }
  .hero-stats .stat { text-align: start; }
  .sec-head { flex-direction: row; align-items: flex-end; text-align: start; }
  .sec-intro, .trust-item, .steps li, .cta-poster .container { text-align: start; }
  .cta-poster .container { align-items: center !important; }
}

/* ============================================================
   Arabic / RTL
   The layout is nearly all flexbox and grid, which mirror
   automatically under dir="rtl". These rules fix the pieces that
   don't: hard-coded sides, the float in the fleet filters, and
   anything that reads as a direction rather than a start/end.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .btn, html[dir="rtl"] .nav-brand,
html[dir="rtl"] .input, html[dir="rtl"] .price-row b,
html[dir="rtl"] .stat dt {
  font-family: "Cairo", "Noto Kufi Arabic", system-ui, sans-serif;
}

/* Arabic reads better with a touch more line height and no tight tracking */
html[dir="rtl"] body { line-height: 1.7; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
  letter-spacing: 0; line-height: 1.3;
}
html[dir="rtl"] .hero h1 { line-height: 1.25; }

/* Kickers/labels: drop the wide Latin letter-spacing, it breaks Arabic shaping */
html[dir="rtl"] .kicker,
html[dir="rtl"] .card-kicker,
html[dir="rtl"] h6,
html[dir="rtl"] .table th,
html[dir="rtl"] .stat dd,
html[dir="rtl"] .info-row .k,
html[dir="rtl"] .price-row span:first-child,
html[dir="rtl"] .cat-card .cat-card-body span,
html[dir="rtl"] .sec-kicker,
html[dir="rtl"] .hero-kicker,
html[dir="rtl"] .hero-media-tag,
html[dir="rtl"] [style*="letter-spacing"] {
  letter-spacing: 0 !important;
  text-transform: none;
}

/* Numbers, prices, phone numbers and dates stay left-to-right */
html[dir="rtl"] .price-row b,
html[dir="rtl"] .stat dt,
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] .ltr-num {
  direction: ltr; unicode-bidi: embed;
}
html[dir="rtl"] .price-row b { text-align: left; }

/* Fleet sidebar: the count floated right in LTR, so flip it */
html[dir="rtl"] .filter-link span[style*="float:right"],
html[dir="rtl"] .filter-link span[style*="float: right"] {
  float: left !important;
}

/* Dividers that sat on one edge need to swap sides */
html[dir="rtl"] .contact-info {
  border-right: 0;
  border-left: 2px solid var(--color-divider);
}
html[dir="rtl"] .book-bar .field { border-right: 0; border-left: 2px solid var(--color-divider); }
html[dir="rtl"] .book-bar .field:last-of-type { border-left: 0; }
html[dir="rtl"] .nav-row .nav-brand { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .btn-block { justify-content: center; }

/* The trust strip draws a divider on all but the last column */
html[dir="rtl"] .trust-item.has-rule {
  border-right: 0 !important;
  border-left: 2px solid var(--color-divider);
}

/* Language switcher in the nav */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--color-text); padding: 6px 12px;
  border: 2px solid var(--color-divider);
}
.lang-switch:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

@media (max-width: 880px) {
  /* In the mobile panel the switcher becomes a full-width row */
  .nav-mobile-menu .lang-switch {
    justify-content: center; margin-top: 10px; border-bottom: 2px solid var(--color-divider);
  }
  html[dir="rtl"] .contact-info { border-left: 0; border-bottom: 2px solid var(--color-divider); }
}

@media (max-width: 1024px) {
  html[dir="rtl"] .book-bar > * { border-left: 0 !important; }
  html[dir="rtl"] .trust-item.has-rule { border-left: 0 !important; }
}

/* Anyone who's asked their OS for less motion gets none of the above —
   no Ken Burns drift, no hover lift/zoom, no smooth-scroll. Content and
   layout are unaffected, only the animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img img { animation: none; }
  /* The clip itself stays on its poster frame until it's asked to play. */
  .hero-media-toggle, .hero-media-bar { transition: none !important; }
  .btn, .btn-primary:hover, .btn-secondary:hover, .btn-glass:hover, .btn:not(:disabled):active,
  .cat-card, .cat-card-img, .car-card, .car-card-img, .input {
    transition: none !important;
  }
  .cat-card:hover, .car-card:hover, .btn-primary:hover, .btn-secondary:hover, .btn-glass:hover, .btn:not(:disabled):active {
    transform: none !important;
  }
  .cat-card:hover .cat-card-img, .car-card:hover .car-card-img { transform: none !important; }
  .car-card.is-3d .car-card-media, .car-card.is-3d .car-card-img { transform: none !important; transition: none !important; }
  .car-card.is-3d .car-card-media::after { display: none; }
}