/* Elegance Limousine Service — main stylesheet
   Colours: ink #121211 · panel #1C1C1B · cream #EFEBE2 · stone #DAD4C4 · champagne #C2A679
   Fonts:   Cormorant Garamond (headings) + Jost (text); Arabic: Amiri + Tajawal */

:root {
  --ink: #121211;
  --ink-2: #171716;
  --panel: #1C1C1B;
  --black: #0B0B0A;
  --text: #E8E2D4;
  --text-soft: #CFC9BC;
  --muted: #A8A296;
  --cream: #EFEBE2;
  --stone: #DAD4C4;
  --on-cream: #1A1A19;
  --on-cream-muted: #5E5A52;
  --gold: #C2A679;
  --gold-hover: #D8BE90;
  --gold-dark: #7E6340;
  --line: rgba(232, 226, 212, .12);
  --header-h: 86px;
  --topbar-h: 40px;
  --gutter: clamp(20px, 5vw, 96px);
  --ease: cubic-bezier(.22, .7, .18, 1);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
}
html[lang="ar"] {
  --font-display: 'Amiri', Georgia, serif;
  --font-body: 'Tajawal', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-padding-top: var(--header-h); -webkit-tap-highlight-color: rgba(194, 166, 121, .18); scrollbar-color: rgba(194, 166, 121, .4) #0B0B0A; }
/* Browser surfaces in the site's palette */
::selection { background: rgba(194, 166, 121, .35); color: #fff; }
input, textarea { caret-color: var(--gold); }
a, button, input, select, textarea, label, summary, [role="option"], .tw-col { touch-action: manipulation; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: opacity .32s ease;
}
body.is-leaving { opacity: 0; }
img, video, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--gold); }
a:hover { color: #E0C79A; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: var(--ink); padding: 10px 16px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1520px; margin: 0 auto; padding: 0 var(--gutter); }
/* Top bar, header and hero run edge to edge, aligned to the same side gutter. */
.topbar .wrap, .hdr .wrap, .hero .wrap { max-width: none; }
.disp { font-family: var(--font-display); font-weight: 500; letter-spacing: .005em; }
html[lang="ar"] .disp { font-weight: 400; letter-spacing: 0; }
/* Display numbers (step numbers, rating, quote phone): Cormorant with straight lining figures in both languages,
   so "01" doesn't read as "oı". html[lang] outranks the Arabic .disp rule above. */
html[lang] .step .num, html[lang] .big-rating, html[lang] .side .big { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-variant-numeric: lining-nums; font-feature-settings: "lnum"; }
.eyebrow { font-size: 0.75rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 0.9375rem; }
.muted { color: var(--muted); }
.on-cream { background: var(--cream); color: var(--on-cream); }
.on-cream .muted { color: var(--on-cream-muted); }
.on-cream .eyebrow { color: var(--gold-dark); }
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin-bottom: 56px; }
.sec-head--split { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 40px; }
.sec-title { margin: 0; font-size: 3.5rem; line-height: 1.08; }
.sec-pad { padding: 120px 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 30px; font-family: inherit; font-size: 0.75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: 0; border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s; }
html[lang="ar"] .btn { letter-spacing: 0; font-size: 0.9375rem; }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--ink); }
.btn-line { background: transparent; color: var(--text); border-color: rgba(232, 226, 212, .45); }
.btn-line:hover { border-color: var(--text); color: #fff; }
.btn-dark { background: var(--on-cream); color: var(--cream); border-color: var(--on-cream); }
.btn-dark:hover { background: #000; color: #fff; }
.on-cream .btn-line, .cream-panel .btn-line { color: var(--on-cream); border-color: rgba(26, 26, 25, .45); }
.on-cream .btn-line:hover, .cream-panel .btn-line:hover { border-color: var(--on-cream); color: #000; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Loader (first visit only) */
.loader { position: fixed; inset: 0; z-index: 150; background: #0E0E0D; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.show-loader .loader { display: flex; animation: loaderOut .8s ease 2s forwards; }
.loader img { width: 240px; opacity: 0; animation: logoIn 1.1s ease .15s forwards; }
.loader .bar { width: 180px; height: 1px; background: rgba(232, 226, 212, .14); position: relative; overflow: hidden; }
.loader .bar span { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left center; animation: barGrow 1.8s ease .15s forwards; }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes barGrow { to { transform: scaleX(1); } }

/* Top bar + header */
.topbar { background: var(--black); border-bottom: 1px solid rgba(232, 226, 212, .08); font-size: 0.8125rem; position: relative; z-index: 41; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.topbar-right { display: flex; gap: 18px; align-items: center; }
.topbar a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.topbar .lang-note { color: var(--gold); }
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(14, 14, 13, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(232, 226, 212, .08); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
/* Desktop: equal outer columns keep the menu in the true centre of the page, whatever the logo/button widths */
@media (min-width: 1081px) {
  .hdr .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hdr .brand { justify-self: start; }
  .hdr-actions { justify-self: end; }
}
.brand img { height: 58px; width: auto; }
.nav-links { display: flex; gap: 34px; align-items: center; }
.navlink { color: var(--text); text-decoration: none; font-size: 0.75rem; letter-spacing: .2em; text-transform: uppercase; padding: 14px 2px; transition: color .25s; }
.navlink:hover { color: var(--gold); }
html[lang="ar"] .navlink { letter-spacing: 0; font-size: 0.9375rem; }
.hdr-actions { display: flex; align-items: center; gap: 18px; }
.lang-switch { color: var(--text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; transition: color .25s; }
.lang-switch:hover { color: var(--gold); }
.lang-ar { font-family: 'Tajawal', sans-serif; font-size: 1.0625rem; color: var(--gold); white-space: nowrap; }
html[lang="en"] .lang-switch { font-family: 'Tajawal', sans-serif; font-size: 1.0625rem; }
html[lang="ar"] .lang-switch { font-family: 'Jost', sans-serif; font-size: 0.8125rem; letter-spacing: .16em; text-transform: uppercase; }
.burger { display: none; background: transparent; border: 1px solid rgba(232, 226, 212, .3); color: var(--text); width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; }
.mmenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.mmenu.is-open { grid-template-rows: 1fr; }
.mmenu > div { min-height: 0; overflow: hidden; }
.mmenu nav { display: flex; flex-direction: column; padding: 12px 20px 24px; border-top: 1px solid var(--line); }

/* Hero */
/* Homepage: the top bar and header sit over the hero image so it shows in full. Once the visitor scrolls,
   the top bar slides away and the header takes its dark background (main.js sets .is-scrolled on <body>). */
.home .topbar { position: fixed; top: 0; inset-inline: 0; background: rgba(10, 10, 9, .45); border-bottom: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.home .hdr { position: fixed; top: var(--topbar-h); inset-inline: 0; background: linear-gradient(rgba(10, 10, 9, .45), rgba(10, 10, 9, 0)); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: top .45s var(--ease), background-color .45s, box-shadow .45s; }
.home.is-scrolled .topbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.home.is-scrolled .hdr { top: 0; background: rgba(14, 14, 13, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(232, 226, 212, .08); }
.home .mmenu.is-open { background: rgba(14, 14, 13, .96); }
.home .hero { margin-top: 0; }
.home .hero-content { padding-top: calc(var(--header-h) + var(--topbar-h)); }
.hero { display: flex; flex-direction: column; position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 980px; margin-top: calc(var(--header-h) * -1); overflow: hidden; background: #131312; }
/* Landing photos: they fade into each other every 7 s with a slow zoom (main.js, "Hero photos") */
.hero-show { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* The new photo fades in on top (.is-on) while the old one (.is-out) stays fully visible underneath and keeps its
   slow pan going, so nothing jumps and the picture never dims mid-fade. Odd photos drift right, even ones drift left. */
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; }
.hero-slide.is-on, .hero-slide.is-out { animation: heroPanRight 10s linear both; will-change: transform, opacity; backface-visibility: hidden; }
.hero-slide:nth-child(even).is-on, .hero-slide:nth-child(even).is-out { animation-name: heroPanLeft; }
.hero-slide.is-on { opacity: 1; z-index: 2; transition: opacity 1.8s ease-in-out; }
.hero-slide.is-out { opacity: 1; z-index: 1; }
@keyframes heroPanRight { from { transform: translateX(-2.5%) scale(1.08); } to { transform: translateX(2.5%) scale(1.08); } }
@keyframes heroPanLeft { from { transform: translateX(2.5%) scale(1.08); } to { transform: translateX(-2.5%) scale(1.08); } }
.hero-covered .hero-slide { animation-play-state: paused; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 9, .78) 0%, rgba(10, 10, 9, .35) 60%, rgba(10, 10, 9, .2) 100%); }
html[dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(10, 10, 9, .78) 0%, rgba(10, 10, 9, .35) 60%, rgba(10, 10, 9, .2) 100%); }
/* Text and van sit side by side; the grid follows the page direction, so RTL puts the van on the left. */
.hero-content { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 96px); padding-top: var(--header-h); }
.hero-copy { position: relative; z-index: 1; max-width: 640px; display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: 6.5rem; line-height: .98; margin: 0; }
.hero h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
html[lang="ar"] .hero h1 { font-size: 5.75rem; line-height: 1.25; }
html[lang="ar"] .hero h1 em { font-style: normal; }
.hero-sub { margin: 0; font-size: 1.125rem; max-width: 540px; color: var(--text-soft); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hero-foot { position: relative; display: flex; justify-content: center; padding-bottom: 14px; }
.scroll-cue { color: var(--text); display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Trust strip: closes the services section on the cream, a quiet row of four with short hairline dividers */
.sec-pad.has-trust { padding-bottom: 0; }
.trust-strip { border-top: 1px solid rgba(26, 26, 25, .14); margin-top: 104px; }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 40px 16px 44px; }
.trust-item + .trust-item::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 44px; margin-top: -22px; background: rgba(26, 26, 25, .16); }
.trust-item svg { flex: none; width: 24px; height: 24px; color: var(--gold-dark); }
.trust-item .disp { font-size: 1.3125rem; line-height: 1.2; color: var(--on-cream); }
.trust-item .muted { font-size: 0.8125rem; margin-top: 3px; }

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 44px; }
.svc { border-top: 1px solid rgba(26, 26, 25, .18); padding-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.svc h3 { margin: 0; font-size: 1.6875rem; line-height: 1.15; }
.svc p { margin: 0; font-size: 0.9375rem; }

/* Fleet */
.fleet { background: var(--panel); padding: 110px 0 120px; }
.fleet-list { max-width: 1520px; margin: 0 auto; border-top: 1px solid var(--line); }
.car-row { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: start; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px var(--gutter); transition: background .55s ease, color .55s ease; }
.car-row[aria-expanded="true"] { background: var(--stone); color: var(--on-cream); }
.car-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.row-text { display: flex; flex-direction: column; gap: 6px; }
.row-cls { color: #9E988B; font-size: 0.9375rem; transition: color .55s ease; }
.car-row[aria-expanded="true"] .row-cls { color: var(--on-cream-muted); }
.row-name { font-size: 2.25rem; line-height: 1.1; }
.row-meta { font-size: 0.8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); transition: color .55s ease; }
html[lang="ar"] .row-meta { letter-spacing: 0; font-size: 0.9375rem; }
.car-row[aria-expanded="true"] .row-meta { color: var(--gold-dark); }
.row-meta .when-open { display: none; }
.car-row[aria-expanded="true"] .when-open { display: inline; }
.car-row[aria-expanded="true"] .when-closed { display: none; }

.car { display: block; width: 340px; max-width: 100%; height: auto; overflow: visible; flex-shrink: 0; }
.car .c-body { fill: rgba(0, 0, 0, 0); stroke: var(--stone); stroke-width: 1; transition: fill .6s ease, stroke .6s ease; }
.car .c-win { fill: rgba(0, 0, 0, 0); stroke: var(--stone); stroke-width: .8; transition: fill .6s ease, stroke .6s ease; }
.car .c-line { fill: none; stroke: var(--stone); stroke-width: .7; opacity: .7; transition: stroke .6s ease; }
.car .c-wheel { fill: rgba(0, 0, 0, 0); stroke: var(--stone); stroke-width: 1; transition: fill .6s ease, stroke .6s ease, stroke-width .6s ease; }
.car .c-hub { fill: rgba(0, 0, 0, 0); stroke: var(--stone); stroke-width: .8; transition: fill .6s ease, stroke .6s ease; }
.car .c-shadow { fill: #000; opacity: 0; transition: opacity .6s ease; }
.car-row[aria-expanded="true"] .c-body, .car.filled .c-body { fill: url(#gBody); stroke: #0B0B0B; }
.car-row[aria-expanded="true"] .c-win, .car.filled .c-win { fill: url(#gGlass); stroke: #0B0B0B; }
.car-row[aria-expanded="true"] .c-line, .car.filled .c-line { stroke: rgba(255, 255, 255, .16); }
.car-row[aria-expanded="true"] .c-wheel, .car.filled .c-wheel { fill: #141414; stroke: #262626; stroke-width: 3; }
.car-row[aria-expanded="true"] .c-hub, .car.filled .c-hub { fill: url(#gRim); stroke: #4A4A4A; }
.car-row[aria-expanded="true"] .c-shadow, .car.filled .c-shadow { opacity: .22; }
.car .c-spoke { fill: none; stroke: var(--stone); stroke-width: .6; opacity: .7; transition: stroke .6s ease, opacity .6s ease; }
.car .c-cap { fill: rgba(0, 0, 0, 0); stroke: var(--stone); stroke-width: .7; transition: fill .6s ease, stroke .6s ease; }
.car .c-well { fill: rgba(0, 0, 0, 0); stroke: none; transition: fill .6s ease; }
.car-row[aria-expanded="true"] .c-spoke { stroke: #5A5A5A; opacity: 1; }
.car-row[aria-expanded="true"] .c-cap { fill: #2A2A2A; stroke: #6A6A6A; }
.car-row[aria-expanded="true"] .c-well { fill: #0B0B0B; }
/* the owner's bus is white, so it fills in white */
.car-row[aria-expanded="true"] .car--white .c-body { fill: url(#gWhite); stroke: #9A9A96; }
.car-row[aria-expanded="true"] .car--white .c-line { stroke: rgba(0, 0, 0, .28); }
/* When a real side-view photo is added (see README), it fades in over the drawing on hover. */
.car-side { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 340px; max-width: 100%; }
.car-art { position: relative; width: 340px; max-width: 100%; flex-shrink: 0; }
/* Folded corner at the bottom (inline-end) of each row: a dog-ear that shows the cream underneath, a hint that the
   row opens. It folds open a little more on hover and is gone once the row is open (the whole row is cream then). */
.car-row { position: relative; }
.car-row::after { content: ""; position: absolute; bottom: -1px; inset-inline-end: 0; width: 26px; height: 26px; pointer-events: none;
  background: linear-gradient(to top left, var(--stone) 50%, #2E2D2B 50%); box-shadow: -2px -2px 6px rgba(0, 0, 0, .35);
  transition: width .45s var(--ease), height .45s var(--ease), opacity .45s ease; }
html[dir="rtl"] .car-row::after { background: linear-gradient(to top right, var(--stone) 50%, #2E2D2B 50%); box-shadow: 2px -2px 6px rgba(0, 0, 0, .35); }
.car-row[aria-expanded="true"]::after { opacity: 0; }
/* "Click to view" bubble over the first car, once per visit (main.js); it pops away after the first click */
.car-side { position: relative; }
.tap-hint { display: none; position: absolute; z-index: 2; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: var(--gold); color: #1A1A19; font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); animation: hintBob 2.2s ease-in-out infinite; }
html[lang="ar"] .tap-hint { letter-spacing: 0; font-size: 0.875rem; }
.tap-hint::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--gold); }
.hint-tap { display: none; }
@media (hover: none) { .hint-click { display: none; } .hint-tap { display: inline; } }
.has-hint .tap-hint { display: block; }
.has-hint.is-popping .tap-hint { animation: hintPop .32s ease-in forwards; }
@keyframes hintBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@keyframes hintPop { 40% { transform: translate(-50%, -2px) scale(1.12); opacity: 1; } 100% { transform: translate(-50%, -2px) scale(.3); opacity: 0; } }
/* the first time the fleet comes into view, the first car shows itself briefly (main.js) */
.car-row.is-peek .car-photo { opacity: 1; }
.car-row.is-peek .car-line { opacity: 0; }
.car-art .car-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.car-row[aria-expanded="true"] .car-photo { opacity: 1; }
/* Drawn outline as an image (assets/img/fleet/outline): it gives way to the real car on hover */
.car-art .car-line { display: block; width: 100%; height: auto; transition: opacity .6s ease; }
.car-row[aria-expanded="true"] .car-line { opacity: 0; }

.panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--ease); }
.panel-wrap.is-open { grid-template-rows: 1fr; }
.panel-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .75s; }
.panel-wrap.is-open .panel-inner { visibility: visible; transition-delay: 0s; }
.cream-panel { background: var(--stone); color: var(--on-cream); border-bottom: 1px solid rgba(26, 26, 25, .14); }
.detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; padding: 12px var(--gutter) 56px; opacity: 0; transform: translateY(-14px); transition: opacity .45s ease, transform .6s var(--ease); }
.panel-wrap.is-open .detail { opacity: 1; transform: none; transition-delay: .18s; }
.stage { background: #E6E1D4; display: flex; align-items: center; justify-content: center; padding: 48px 32px; position: relative; }
.stage .car { width: 100%; max-width: 560px; }
.stage-note { position: absolute; bottom: 12px; inset-inline-start: 16px; font-size: 0.8125rem; color: var(--on-cream-muted); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
/* Vehicle photos: the big one on top, small ones underneath pick which is shown */
.stage--photo { padding: 0; background: #1B1B1A; }
.stage-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.thumb { appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; cursor: pointer; position: relative; display: block; opacity: .62; transition: opacity .3s ease; }
.thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .3s ease; }
.thumb:hover, .thumb.is-on { opacity: 1; }
.thumb.is-on::after { border-color: var(--gold-dark); }
.thumb img { display: block; }
.photo-credit { margin: 12px 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--on-cream-muted); }
.photo-credit a { color: inherit; }
.ph { aspect-ratio: 4 / 3; background: #CBC4B2; display: flex; align-items: center; justify-content: center; color: var(--on-cream-muted); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; }
html[lang="ar"] .ph { letter-spacing: 0; font-size: 0.875rem; }
.gallery img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.detail-info { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.detail-info .eyebrow { color: var(--gold-dark); }
.detail-info h3 { margin: 0; font-size: 2.75rem; line-height: 1.05; }
.detail-info p { margin: 0; font-size: 1.0625rem; color: #3C3A35; }
.feat-title { font-size: 0.75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-cream-muted); margin-bottom: 4px; }
html[lang="ar"] .feat-title { letter-spacing: 0; font-size: 0.875rem; }
.feats { list-style: none; margin: 0; padding: 0; }
.feats li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(26, 26, 25, .14); font-size: 0.9375rem; }
.detail-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Destinations */
.dest-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.dest-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; list-style: none; margin: 0; padding: 0; }
.dest { padding: 18px 0; border-bottom: 1px solid var(--line); }
.dest h3 { margin: 0 0 4px; font-size: 1.3125rem; line-height: 1.2; }
.dest .muted { font-size: 0.875rem; }
/* Places slideshow: one photo per place; it moves on by itself every 6 s, the arrows and
   the list below pick a place. Pauses on hover, on keyboard focus and when off screen; no autoplay with reduced motion. */
.show { position: relative; overflow: hidden; background: #1B1B1A; aspect-ratio: 16 / 9; touch-action: pan-y; }
.show-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.show-img.is-on { opacity: 1; }
.show::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(10, 10, 9, .78), rgba(10, 10, 9, 0)); pointer-events: none; }
.show-bar { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 36px 34px; }
.show-cap { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.show-count { font-size: 0.75rem; letter-spacing: .22em; color: var(--gold); font-variant-numeric: tabular-nums; }
html[dir="rtl"] .show-count { align-self: flex-start; }
.show-name { font-size: 2.5rem; line-height: 1.08; color: #fff; }
.show-sub { font-size: 0.875rem; color: rgba(239, 235, 226, .82); }
.show-nav { display: flex; gap: 10px; flex: none; }
.show-btn { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(239, 235, 226, .45); background: rgba(14, 14, 13, .3); color: #fff; cursor: pointer; transition: border-color .25s, color .25s, background-color .25s; }
.show-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(14, 14, 13, .55); }
html[dir="rtl"] .show-btn svg { transform: scaleX(-1); }
/* .show-progress is an invisible 6 s timer: its animation ending moves to the next photo (pausing it pauses the show) */
.show-progress { position: absolute; inset-inline: 0; bottom: 0; height: 1px; visibility: hidden; pointer-events: none; }
.show-progress span { display: block; height: 100%; transform: scaleX(0); }
.show.is-running .show-progress span { animation: showTime 5s linear forwards; }
.show.is-paused .show-progress span { animation-play-state: paused; }
@keyframes showTime { to { transform: scaleX(1); } }
/* the list below the photos: each place picks its photo */
.dest { position: relative; transition: border-color .4s ease; }
.dest h3 { transition: color .3s ease; }
.dest-btn { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.dest-btn::after { content: ""; position: absolute; inset: 0; }
.dest-btn:focus-visible { outline: 0; }
.dest:has(.dest-btn:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.dest:hover h3, .dest.is-on h3 { color: var(--gold); }
.dest.is-on { border-bottom-color: var(--gold); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.step { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(26, 26, 25, .18); padding-top: 22px; }
.step .num { font-size: 3.25rem; line-height: 1; color: #8A6C45; }
.step h3 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.step p { margin: 0; font-size: 0.9375rem; }

/* Reviews */
.reviews { background: var(--ink-2); padding: 110px 0; }
.reviews .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.big-rating { font-size: 7.5rem; line-height: 1; }
.stars { display: flex; gap: 6px; }
.reviews h2 { margin: 6px 0 0; font-size: 2.25rem; line-height: 1.2; max-width: 680px; }
.review-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

/* Quote form */
.quote { background: var(--ink); padding: 120px 0; border-top: 1px solid rgba(232, 226, 212, .08); }
.q-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.qform { display: flex; flex-direction: column; gap: 30px; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 26px; }
.f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 26px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld label, .fld legend { font-size: 0.75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0; }
.fld legend { margin-bottom: 10px; }
html[lang="ar"] .fld label, html[lang="ar"] .fld legend { letter-spacing: 0; font-size: 0.875rem; }
.fld input, .fld select, .fld textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(232, 226, 212, .3); color: var(--text); font-family: inherit; font-size: 1rem; min-height: 46px; padding: 8px 0; border-radius: 0; outline: none; color-scheme: dark; width: 100%; transition: border-color .25s; }
.fld textarea { min-height: 90px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--gold); }
.fld select option { background: #1B1B1A; color: var(--text); }
.fld input::placeholder, .fld textarea::placeholder { color: #89837A; }
.fld .err { color: #E7A08A; font-size: 0.8125rem; display: none; }
.fld.has-error .err { display: block; }
.fld.has-error input, .fld.has-error select { border-color: #E7A08A; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(232, 226, 212, .3); font-size: 0.875rem; transition: background-color .25s, border-color .25s, color .25s; }
.pill input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-error { color: #E7A08A; font-size: 0.9375rem; display: none; }
.form-error.is-visible { display: block; }
.thanks { border: 1px solid rgba(194, 166, 121, .45); padding: 48px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; animation: fadeUp .7s var(--ease) both; }
.thanks h3 { margin: 0; font-size: 2.25rem; line-height: 1.15; }
.thanks p { margin: 0; font-size: 1.0625rem; max-width: 520px; }
.side { border: 1px solid rgba(232, 226, 212, .14); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.side p { margin: 0; }
.side .big { font-size: 1.875rem; text-decoration: none; color: var(--text); }
.side .big:hover { color: var(--gold); }
.side .ar-note { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.side .ar-note span:first-child { font-family: 'Tajawal', sans-serif; font-size: 1.125rem; color: var(--gold); }

/* Date + time pickers (built by main.js over the plain date/time inputs) */
.pick-anchor { position: relative; }
.pick-field, .pick-pop, .pick-pop button, .pick-pop li { -webkit-tap-highlight-color: transparent; }
.pick-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 8px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(232, 226, 212, .3); border-radius: 0; color: var(--text); font-family: inherit; font-size: 1rem; text-align: start; cursor: pointer; transition: border-color .25s; }
.pick-field svg { flex-shrink: 0; color: var(--gold); opacity: .8; }
.pick-field:hover, .pick-field:focus-visible, .picker.is-open .pick-field { border-color: var(--gold); }
.pick-field:focus-visible { outline: none; }
.pick-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-text.is-empty { color: #89837A; }
.fld.has-error .pick-field { border-color: #E7A08A; }
.pick-pop { overscroll-behavior: contain; position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; background: var(--panel); color: var(--text); border: 1px solid rgba(194, 166, 121, .35); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); animation: popIn .22s var(--ease); }
.pick-pop.is-up { top: auto; bottom: calc(100% + 6px); }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cal { width: 308px; padding: 16px 16px 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-title { font-size: 1.375rem; line-height: 1.2; }
.cal-nav { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(232, 226, 212, .18); border-radius: 0; color: var(--text); cursor: pointer; transition: border-color .25s, color .25s; }
.cal-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.cal-nav:disabled { opacity: .3; cursor: default; }
html[dir="rtl"] .cal-nav svg { transform: scaleX(-1); }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { padding: 6px 0; font-weight: 400; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
html[lang="ar"] .cal-grid th { letter-spacing: 0; font-size: 0.8125rem; }
.cal-grid td { padding: 1px; text-align: center; }
.cal-day { width: 100%; height: 38px; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--text); font-family: inherit; font-size: 0.875rem; cursor: pointer; transition: background .2s, color .2s; }
.cal-day:hover:not(:disabled) { background: rgba(194, 166, 121, .14); }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--gold); }
.cal-day.is-selected { background: var(--gold); color: var(--ink); }
.cal-day:disabled { color: #5F5B53; cursor: default; }
.cal-day:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal-day.is-selected:focus-visible { outline-color: var(--text); }
/* Number counters (passengers, luggage) with a line icon and − / + buttons */
.stepper { display: flex; align-items: center; gap: 10px; min-height: 46px; border-bottom: 1px solid rgba(232, 226, 212, .3); transition: border-color .25s; }
.stepper:focus-within { border-color: var(--gold); }
.fld .stepper input { flex: 1; min-width: 0; border: 0; padding: 8px 0; min-height: 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fld-ico { flex-shrink: 0; color: var(--gold); }
.step-btn { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid rgba(232, 226, 212, .22); border-radius: 0; color: var(--text); cursor: pointer; transition: border-color .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.step-btn:hover { border-color: var(--gold); color: var(--gold); }
.fld-hint { font-size: 0.8125rem; margin-top: 2px; }

/* Dropdowns (service, vehicle, hours): themed list over the real, hidden <select> */
.picker { position: relative; }
.fld select.pick-native { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.pick-chev { transition: transform .25s var(--ease); }
.picker.is-open .pick-chev { transform: rotate(180deg); }
.slist { inset-inline-end: 0; min-width: 200px; }
.slist ul { list-style: none; margin: 0; padding: 6px 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; scrollbar-color: rgba(194, 166, 121, .5) transparent; }
.slist li { padding: 11px 16px; font-size: 0.9375rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.slist li.is-active { background: rgba(194, 166, 121, .14); }
.slist li[aria-selected="true"] { background: var(--gold); color: var(--ink); }
.slist ul:focus-visible li.is-active:not([aria-selected="true"]) { box-shadow: inset 2px 0 0 var(--gold); }
html[dir="rtl"] .slist ul:focus-visible li.is-active:not([aria-selected="true"]) { box-shadow: inset -2px 0 0 var(--gold); }

/* Time wheels: three scroll-snap columns; the item in the gold band is the value */
.twheel { width: 280px; padding: 14px 16px 16px; }
.tw-cols { position: relative; display: flex; justify-content: center; align-items: stretch; gap: 6px; direction: ltr; }
html[dir="rtl"] .tw-col[data-col="p"] { order: -1; }
.tw-col { --tw-h: 44px; position: relative; z-index: 1; flex: 1; height: calc(var(--tw-h) * 5); padding: calc(var(--tw-h) * 2) 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; text-align: center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); }
.tw-col::-webkit-scrollbar { display: none; }
.tw-item { height: var(--tw-h); line-height: var(--tw-h); scroll-snap-align: center; color: var(--muted); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.625rem; font-weight: 500; font-variant-numeric: lining-nums; font-feature-settings: "lnum"; cursor: pointer; transition: color .2s; }
.tw-col[data-col="p"] .tw-item { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: .16em; }
html[lang="ar"] .tw-col[data-col="p"] .tw-item { font-size: 1.1875rem; letter-spacing: 0; }
.tw-item.is-sel { color: var(--text); }
.tw-col:focus-visible .tw-item.is-sel { color: var(--gold-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tw-sep { align-self: center; color: var(--gold); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.625rem; }
.tw-band { position: absolute; z-index: 0; inset-inline: 0; top: 50%; height: 44px; transform: translateY(-50%); border-top: 1px solid rgba(194, 166, 121, .55); border-bottom: 1px solid rgba(194, 166, 121, .55); background: rgba(194, 166, 121, .06); pointer-events: none; }
.tw-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.tw-foot .btn { min-height: 42px; padding: 0 24px; }

/* Address suggestions under the pickup / destination boxes */
.ac-pop { position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline: 0; min-width: 260px; background: var(--panel); border: 1px solid rgba(194, 166, 121, .35); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.ac-pop ul { overscroll-behavior: contain; list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(194, 166, 121, .5) transparent; }
.ac-pop li { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ac-pop li:hover, .ac-pop li.is-active { background: rgba(194, 166, 121, .14); }
.ac-pop li.is-active { box-shadow: inset 2px 0 0 var(--gold); }
html[dir="rtl"] .ac-pop li.is-active { box-shadow: inset -2px 0 0 var(--gold); }
.ac-main { font-size: 0.9375rem; color: var(--text); }
.ac-pop li.is-key .ac-main::before { content: "\2605"; color: var(--gold); font-size: 0.6875rem; margin-inline-end: 8px; vertical-align: 1px; }
.ac-sub { font-size: 0.8125rem; color: var(--muted); }
/* English addresses on the Arabic page: order each line by its own text, so "1899 Niagara St" keeps its number in front */
.ac-main, .ac-sub, .pick-anchor input { unicode-bidi: plaintext; }
.ac-note { padding: 6px 14px 8px; border-top: 1px solid var(--line); font-size: 0.6875rem; color: #89837A; }
.pick-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(8, 8, 7, .6); }

/* Footer */
.footer { background: var(--black); padding: 80px 0 40px; border-top: 1px solid rgba(232, 226, 212, .08); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 48px; }
.foot-grid img { width: 200px; height: auto; align-self: flex-start; }
.foot-col { display: flex; flex-direction: column; }
.foot-col .eyebrow { margin-bottom: 12px; }
.foot-link { color: var(--muted); text-decoration: none; font-size: 0.9375rem; line-height: 2.1; }
.foot-link:hover { color: var(--text); }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(232, 226, 212, .08); font-size: 0.8125rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* About page */
.navlink[aria-current="page"] { color: var(--gold); }
.trust-link { color: inherit; text-decoration: none; transition: color .25s; }
.trust-link:hover { color: var(--gold-dark); }
.about-intro { padding: 120px 0 110px; }
.about-intro .sec-head { max-width: 860px; margin-bottom: 48px; }
.about-title { font-size: 4.25rem; }
.about-lead { margin: 0; font-size: 1.1875rem; line-height: 1.7; color: var(--text-soft); }
.facts { list-style: none; margin: 0 0 88px; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts li { display: flex; align-items: center; font-size: 0.9375rem; color: var(--text); }
.facts li + li::before { content: ""; width: 4px; height: 4px; margin: 0 22px; background: var(--gold); transform: rotate(45deg); }
.values-title { margin: 0 0 28px; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.value { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.value h3 { margin: 0; font-size: 1.75rem; line-height: 1.15; }
.value p { margin: 0; font-size: 0.9375rem; }
.cta-band { padding: 80px 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 6px; font-size: 2.75rem; line-height: 1.1; }
.cta-band p { margin: 0; font-size: 1.0625rem; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Simple pages (privacy, thank-you) */
.page { padding: 100px 0 120px; }
.page .wrap { max-width: 820px; }
.page h1 { font-size: 3.5rem; line-height: 1.08; margin: 0 0 24px; }
.page h2 { font-size: 1.75rem; margin: 40px 0 10px; }
.page p, .page li { color: var(--text-soft); }

/* Mobile action bar */
.mbar { display: none; }

/* Reveal on scroll */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Scroll feel (off for reduced motion):
   1. The hero stays pinned while the rest of the page slides up over it.
   2. Where the browser supports scroll-driven animations, text and cards rise and fade in tied to the scroll
      position itself (half-way scrolled = half revealed; scrolling back reverses it). Other browsers keep the
      one-time .reveal fade from main.js. The quote form fields are left still so typing never moves. */
@keyframes scrollRise { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes heroLeave { to { opacity: 0; transform: translateY(-70px); } }
@keyframes heroDim { to { opacity: .7; } }
@media (prefers-reduced-motion: no-preference) {
  .hero { position: sticky; top: 0; z-index: 0; }
  :where(main > section:not(.hero)) { position: relative; z-index: 1; background-color: var(--ink); }
  .footer { position: relative; z-index: 1; }
  @supports (animation-timeline: view()) {
    .hero-content { animation: heroLeave linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .hero::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #0B0B0A; opacity: 0; pointer-events: none; animation: heroDim linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .sec-head > *, .trust-item, .svc, .car-row, .dest, .show, .step,
    .reviews .wrap > *, .q-grid > .side, .facts, .value, .cta-band .wrap > * {
      animation: scrollRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    /* A slight stagger across each row of a grid */
    .svc:nth-child(4n+2), .step:nth-child(2), .dest:nth-child(2n) { animation-range: entry 4% cover 35%; }
    .svc:nth-child(4n+3), .step:nth-child(3) { animation-range: entry 8% cover 38%; }
    .svc:nth-child(4n+4), .step:nth-child(4) { animation-range: entry 12% cover 41%; }
    .step:nth-child(5) { animation-range: entry 16% cover 44%; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }
}

/* Fleet hover effects: only where there is a real mouse, so on phones a single tap opens the vehicle */
@media (hover: hover) {
  .car-row:hover { background: var(--stone); color: var(--on-cream); }
  .car-row:hover .row-cls { color: var(--on-cream-muted); }
  .car-row:hover .row-meta { color: var(--gold-dark); }
  .car-row:hover .c-body { fill: url(#gBody); stroke: #0B0B0B; }
  .car-row:hover .c-win { fill: url(#gGlass); stroke: #0B0B0B; }
  .car-row:hover .c-line { stroke: rgba(255, 255, 255, .16); }
  .car-row:hover .c-wheel { fill: #141414; stroke: #262626; stroke-width: 3; }
  .car-row:hover .c-hub { fill: url(#gRim); stroke: #4A4A4A; }
  .car-row:hover .c-shadow { opacity: .22; }
  .car-row:hover .c-spoke { stroke: #5A5A5A; opacity: 1; }
  .car-row:hover .c-cap { fill: #2A2A2A; stroke: #6A6A6A; }
  .car-row:hover .c-well { fill: #0B0B0B; }
  .car-row:hover .car--white .c-body { fill: url(#gWhite); stroke: #9A9A96; }
  .car-row:hover .car--white .c-line { stroke: rgba(0, 0, 0, .28); }
  .car-row:hover::after { width: 40px; height: 40px; background: linear-gradient(to top left, #CFC8B6 50%, #EFEBE2 50%); box-shadow: -2px -2px 6px rgba(0, 0, 0, .12); }
  html[dir="rtl"] .car-row:hover::after { background: linear-gradient(to top right, #CFC8B6 50%, #EFEBE2 50%); box-shadow: 2px -2px 6px rgba(0, 0, 0, .12); }
  .car-row:hover .car-photo { opacity: 1; }
  .car-row:hover .car-line { opacity: 0; }
}

/* Responsive */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .svc-grid, .steps, .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(3)::before { display: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid rgba(26, 26, 25, .1); }
  .trust-strip { margin-top: 80px; }
  .values { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-title { font-size: 3.375rem; }
  .q-grid, .detail { grid-template-columns: minmax(0, 1fr); }
  .dest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
  .hero-content { flex: 1 0 auto; padding-block-end: 40px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { font-size: 4.75rem; }
  html[lang="ar"] .hero h1 { font-size: 4.25rem; }
}
@media (max-width: 680px) {
  :root { --header-h: 72px; }
  .brand img { height: 46px; }
  .tb-left, .hdr-quote { display: none; }
  .svc-grid, .steps, .f2, .f3, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .dest-list { column-gap: 20px; }
  .show-bar { padding: 0 16px 18px; gap: 12px; }
  .show-name { font-size: 1.375rem; }
  .show-sub { display: none; }
  .show-btn { width: 40px; height: 40px; }
  .dest { padding: 14px 0; }
  .dest h3 { font-size: 1.0625rem; }
  .dest .muted { font-size: 0.8125rem; }
  .trust-item { flex-direction: column; gap: 8px; padding: 26px 8px 24px; text-align: center; }
  .trust-item .disp { font-size: 1.125rem; }
  .trust-item .muted { font-size: 0.75rem; }
  .trust-strip { margin-top: 56px; }
  .car-row { flex-direction: column; align-items: flex-start; padding: 28px 20px; }
  .car-side { align-self: stretch; }
  .tap-hint { bottom: auto; top: 4px; }
  .detail { padding: 8px 20px 36px; gap: 32px; }
  .hero { min-height: 600px; min-height: max(600px, 100svh); }
  .hero-shade, html[dir="rtl"] .hero-shade { background: linear-gradient(180deg, rgba(10, 10, 9, .55) 0%, rgba(10, 10, 9, .62) 55%, rgba(10, 10, 9, .8) 100%); }
  /* Phones: the landing photos are wide (3:2), so they sit whole in a band under the header and the text follows on the
     dark background, instead of a ~3x zoomed slice behind the text. Normal scrolling here (no sticky slide-over). */
  .home .hero { height: auto; min-height: 0; max-height: none; position: relative; }
  .home .hero-show { position: relative; inset: auto; flex: none; width: 100%; aspect-ratio: 3 / 2; margin-top: calc(var(--header-h) + var(--topbar-h)); }
  .home .hero-show::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; z-index: 3; background: linear-gradient(to top, #131312, rgba(19, 19, 18, 0)); pointer-events: none; }
  .home .hero-shade, .home .hero-foot, .home .hero::after { display: none; }
  .home .hero-content { padding-top: 22px; padding-bottom: 48px; animation: none; }
  .hero h1 { font-size: 3.375rem; }
  html[lang="ar"] .hero h1 { font-size: 3.125rem; }
  .sec-title { font-size: 2.5rem; }
  .about-intro { padding: 72px 0 80px; }
  .about-title { font-size: 2.625rem; }
  .facts { flex-direction: column; margin-bottom: 56px; }
  .facts li + li::before { display: none; }
  .cta-band h2 { font-size: 2.125rem; }
  .cta-band { padding: 64px 0; }
  .sec-pad, .quote { padding: 80px 0; }
  .fleet { padding: 80px 0; }
  .big-rating { font-size: 6rem; }
  .side, .thanks { padding: 28px; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; }
  .mbar .btn { flex: 1; min-height: 56px; }
  .mbar .btn-line { background: var(--ink); border-width: 1px 0 0 0; }
  body { padding-bottom: 56px; }
  html { scroll-padding-bottom: 72px; }
  /* Pickers open as a sheet attached to the bottom of the screen */
  .pick-pop, .pick-pop.is-up { position: fixed; z-index: 70; top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: 75vh; border-width: 1px 0 0; box-shadow: 0 -18px 44px rgba(0, 0, 0, .5); animation: sheetUp .3s var(--ease); }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .cal { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
  .cal-day { height: 46px; font-size: 1rem; }
  .twheel { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
  .tw-col { --tw-h: 48px; }
  .tw-band { height: 48px; }
  .tw-foot .btn { width: 100%; min-height: 50px; }
  .slist ul { max-height: 60vh; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .slist li { padding: 15px 20px; font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .show-loader .loader { display: none; }
  .scroll-cue, .tap-hint { animation: none; }
  .car-row::after { transition: none; }
  .car-row, .car *, .panel-wrap, .panel-inner, .detail, body, .mmenu { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .thanks, .pick-pop { animation: none !important; }
  .show-img { transition: none; }
  .hero-slide, .hero-slide.is-on, .hero-slide.is-out { animation: none; transition: none; }
}