/* ==========================================================================
   Alabbasia — International Transport Company
   Light pages in warm ivory with white surfaces; charcoal (the emblem's frame) for navigation, headings, main
   buttons and the few dark bands; platinum for edges; champagne gold (its calligraphy) as a restrained accent
   for thin lines, icons and active states. The emblem's pointed arch frames the photographs. Surfaces are told apart by a step in tone, not by lines or shadows; corners are
   square; labels are sentence case. Headings in Cormorant Garamond, text in Jost; Arabic and Urdu use
   Amiri, Tajawal and Noto Nastaliq Urdu.
   ========================================================================== */

:root {
  /* Charcoal: navigation, headings, main buttons, the dark bands. */
  --ink-950: #17191b;   /* deepest: the footer's last strip, the photo band */
  --ink-900: #202326;   /* charcoal black */
  --ink: #202326;       /* main buttons and selected states */
  --ink-hover: #34383c; /* hover charcoal */
  --platinum: #bfc3c7;  /* borders, separators */
  --platinum-soft: #e8e9ea;
  --gold: #c6a66b;      /* champagne: thin lines, active indicators, large shapes */
  --gold-2: #c6a66b;    /* champagne on charcoal (6.8:1) */
  --gold-2-hover: #d2b682;
  --gold-3: #a27f3e;    /* champagne icons on light grounds (3.4:1) */
  --ground: #f5f3ef;    /* warm ivory: the page */
  --sand: #e8e9ea;      /* soft platinum: one tone step, panels, quiet controls */
  --wa: #25d366;        /* WhatsApp's own green: only the floating WhatsApp button */
  --wa-ink: #0e7a3f;    /* WhatsApp glyph on the white WhatsApp buttons */
  --radius: 2px;
  --float: 0 18px 40px -22px rgba(32, 35, 38, 0.4); /* only for things that float: sticky bar, hover lift, floating buttons */
  /* Type scale, seven sizes: display, h2, h3 (serif), h4 (sans), body, small, fine print. */
  --fs-display: clamp(2.7rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 3.4vw, 2.9rem);
  --fs-h3: 1.875rem;
  --fs-h4: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-fine: 0.8125rem;
  /* Latin text that stays in English in every language (brand, vehicle names, numbers). */
  --font-latin: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font-latin);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --nav-h: 76px;
  /* Faint champagne lattice from Islamic geometry, used on the charcoal packages band only. */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23c6a66b' stroke-opacity='0.08'%3E%3Crect x='24' y='24' width='40' height='40'/%3E%3Crect x='24' y='24' width='40' height='40' transform='rotate(45 44 44)'/%3E%3Cpath d='M0 0 24 24M88 0 64 24M0 88l24-24M88 88 64 64'/%3E%3C/g%3E%3C/svg%3E");
  /* The emblem's pointed arch, as masks: tall (4:5) and wide (4:3) boxes. */
  --arch-tall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V42C0 23 17 9 40 0C63 9 80 23 80 42V100Z'/%3E%3C/svg%3E");
  --arch-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 75' preserveAspectRatio='none'%3E%3Cpath d='M0 75V30C0 16 22 6 50 0C78 6 100 16 100 30V75Z'/%3E%3C/svg%3E");
}

/* Words on light grounds (the page, and the white cards on the charcoal band)... */
:root, .pkg {
  --text: #252525;
  --heading: #202326;
  --muted: #686868;     /* 5:1 on ivory; for secondary notes only */
  --line: rgba(32, 35, 38, 0.12);
  --accent: var(--ink);
  --gold-text: #7a5f2f; /* champagne words on light (5.4:1 on ivory) */
}
/* ...and on the charcoal ones. */
.topbar, .section--dark, .band, .book__form, .footer, .footer__close {
  --text: #f2f0ec;
  --heading: #fff;
  --muted: #b8bcc0;     /* 8:1 on charcoal */
  --line: rgba(255, 255, 255, 0.14);
  --accent: var(--gold-2);
  --gold-text: var(--gold-2);
  color: var(--text);
}

html[lang="ar"] {
  --font-body: "Tajawal", system-ui, sans-serif;
  --font-display: "Amiri", "Tajawal", serif;
}
html[lang="ur"] {
  --font-body: "Noto Nastaliq Urdu", "Tajawal", serif;
  --font-display: "Noto Nastaliq Urdu", "Amiri", serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="ar"] body { font-size: 1.05rem; }
html[lang="ur"] body { line-height: 2.15; font-size: 15px; }
/* Noto Nastaliq Urdu draws Latin letters and digits as serifs. In Urdu, phone numbers, the website,
   vehicle names and the phone, date, time and number boxes keep the site's Latin face. */
html[lang="ur"] :is(.topbar a, .book__phone, .hero__ctas a, .ccard__num, .ccard__text strong[dir="ltr"], .footer__links a[dir="ltr"], bdi),
html[lang="ur"] .field :is(input[type="tel"], input[type="date"], input[type="time"], input[type="number"]) { font-family: var(--font-latin); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 600; color: var(--heading); hyphens: none; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4 { line-height: 1.9; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold-2); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
main:focus { outline: none; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* Skip link: hidden until a keyboard user tabs to it. */
.skip {
  position: fixed; z-index: 200; top: 10px; inset-inline-start: 10px; padding: 10px 16px;
  background: var(--ink); color: #fff; font-weight: 500; border-radius: var(--radius);
  transform: translateY(-160%); transition: transform .2s ease;
}
.skip:focus { transform: none; }

.ic {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic--fill { fill: currentColor; stroke: none; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
/* Flat and square. Charcoal on light grounds, champagne on the charcoal ones; the quiet button is white with a
   platinum edge. Hover: a champagne line along the foot of the charcoal button, a champagne edge on the quiet one. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--radius); border: 0;
  font-family: var(--font-latin); font-weight: 500; font-size: var(--fs-body);
  line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
html:not([lang="en"]) .btn { font-family: var(--font-body); font-weight: 600; }
html[lang="ur"] .btn { line-height: 1.9; padding-block: 8px; }
.btn .ic { width: 1.15rem; height: 1.15rem; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-hover); box-shadow: inset 0 -2px 0 var(--gold); }
.btn--gold { background: var(--gold-2); color: var(--ink-900); }
.btn--gold:hover { background: var(--gold-2-hover); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--platinum); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.btn--wa { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--platinum); }
.btn--wa .ic { color: var(--wa-ink); transition: color .2s ease; }
.btn--wa:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn--wa:hover .ic { color: var(--gold-2); }
.btn--sm { padding: 12px 18px; font-size: var(--fs-small); }
.btn--block { width: 100%; }

/* ---------- Arch frame ---------- */
/* An image box cut to the emblem's pointed arch; .arch--wide for landscape boxes. */
.arch { position: relative; margin: 0; }
.arch__img { position: relative; overflow: hidden; height: 100%; background: var(--sand);
  -webkit-mask: var(--arch-tall) center / 100% 100% no-repeat; mask: var(--arch-tall) center / 100% 100% no-repeat; }
.arch--wide .arch__img { -webkit-mask-image: var(--arch-wide); mask-image: var(--arch-wide); }
.arch__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--ground); transition: opacity .6s ease, visibility .6s ease;
}
.loader img { width: 84px; animation: breathe 1.6s ease-in-out infinite; }
.loader__bar { width: 120px; height: 2px; background: var(--sand); overflow: hidden; position: relative; }
.loader__bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--gold); animation: load 1s ease-in-out infinite; }
.loader.is-done { opacity: 0; visibility: hidden; }
html:not(.js) .loader { display: none; }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .85; } }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- Top bar ---------- */
.topbar { background: var(--ink-900); font-size: var(--fs-fine); line-height: 1.4; }
.topbar__inner { display: flex; align-items: center; gap: 8px 28px; min-height: 40px; padding-block: 6px; }
.topbar a, .topbar__addr { display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; transition: color .2s ease; }
.topbar a:hover { color: var(--gold-2); }
.topbar .ic { width: 15px; height: 15px; color: var(--gold-2); }
.topbar .ic--fill { color: var(--gold-2); }
.topbar__addr { margin-inline-start: auto; color: var(--muted); }
html[lang="ur"] .topbar__addr { line-height: 2; }

/* ---------- Nav ---------- */
/* A plain white bar that sticks once the top bar has scrolled away; it casts a shadow only while it floats. taste-skill-ignore */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--platinum-soft);
  transition: box-shadow .3s ease;
}
.nav.is-scrolled { box-shadow: var(--float); } /* taste-skill-ignore: a sticky bar */
.nav__inner { display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 40px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-family: var(--font-latin); font-weight: 600; font-size: var(--fs-body); letter-spacing: 0.18em; color: var(--gold-text); }
.brand__text small { font-family: var(--font-latin); font-size: var(--fs-fine); color: var(--ink); margin-top: 2px; }
[dir="rtl"] .brand__text small { font-family: var(--font-body); }

.nav__links { display: flex; gap: 2px; margin-inline: auto; }
.nav__links a {
  position: relative; padding: 8px 12px; font-size: var(--fs-small); font-weight: 500; color: #4a4d50; white-space: nowrap;
  transition: color .2s ease;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform .25s ease;
}
.nav__links a:hover::after { transform: none; }
.nav__links a.is-active::after { height: 2px; transform: none; }
.nav__links .nav__menu-cta::after { display: none; }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__links .nav__menu-cta { display: none; }

/* Languages: a quiet segmented control, the chosen one charcoal. */
.lang { display: inline-flex; gap: 2px; padding: 2px; background: var(--sand); border-radius: var(--radius); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; padding: 6px 11px; cursor: pointer; border-radius: var(--radius);
  font-size: var(--fs-fine); font-weight: 500; color: var(--text); line-height: 1.4; font-family: "Tajawal", var(--font-latin);
  transition: background .2s ease, color .2s ease;
}
.lang a:not(.is-active):hover { background: #fff; color: var(--ink); }
.lang a.is-active { background: var(--ink); color: #fff; }

.burger {
  display: none; width: 44px; height: 44px; border-radius: var(--radius); border: 0;
  background: var(--sand); cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--heading);
  transition: transform .3s ease, top .3s ease;
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
/* The title, the five services and the two calls to action on one side; on the other, the pictures that take
   turns (Madinah at dusk; the Kaaba; coaches and a hotel room) seen through the emblem's arch. In Arabic and
   Urdu the two sides swap; the pictures themselves are never mirrored. */
.hero { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 6vw, 88px); background: var(--ground); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-display); line-height: 1; letter-spacing: -0.02em; color: var(--ink-900);
}
.hero__lead { max-width: 30em; margin-top: 22px; color: var(--muted); font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.6; }
html[lang="ur"] .hero__lead { line-height: 2.1; }
.hero__title em { font-style: normal; }
html[lang="ar"] .hero__title { font-weight: 700; line-height: 1.3; font-size: clamp(2.5rem, 4.4vw, 4rem); letter-spacing: 0; }
html[lang="ur"] .hero__title { line-height: 1.85; font-size: clamp(2.1rem, 3.6vw, 3.2rem); letter-spacing: 0; }

/* The pictures lie on top of each other inside the arch and show one at a time: the outgoing one fades out
   completely (0.5s) before the next one starts to fade in, so two photos never show through each other. */
/* The frame: charcoal, with a 1px champagne arch drawn 4px inside its edge; the pictures sit 8px in. */
.hero__frame {
  position: relative; padding: 8px; background: var(--ink-900);
  width: min(100%, calc((100svh - 210px) * 0.8)); justify-self: center;
  -webkit-mask: var(--arch-tall) center / 100% 100% no-repeat; mask: var(--arch-tall) center / 100% 100% no-repeat;
}
.hero__frame::before, .hero__frame::after {
  content: ""; position: absolute; inset: 4px; background: var(--gold);
  -webkit-mask: inherit; mask: inherit;
}
.hero__frame::after { inset: 5px; background: var(--ink-900); }
.hero__media {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-900);
  -webkit-mask: var(--arch-tall) center / 100% 100% no-repeat; mask: var(--arch-tall) center / 100% 100% no-repeat;
}
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity .5s ease;
}
.hero__media img.is-active { opacity: 1; transition: opacity .7s ease .5s; }
/* Each picture moves slowly closer while it shows and while it fades out (--delay is set by js/main.js). */
.hero__media img.is-zooming { animation: heroZoom calc(var(--delay, 7s) + 1.2s) ease-out both; }
/* What each crop keeps in the tall arch: the Kaaba under the clock tower; the dome, the coach and the van; the dome and the coaches. */
.hero__media .hero__slide--kaaba { object-position: 55% 50%; }
.hero__media .hero__slide--madinah { object-position: 30% 50%; }
.hero__media .hero__slide--coaches { object-position: 62% 50%; }
@keyframes heroZoom { from { transform: scale(1.06); } }
/* Picture switcher (added by js/main.js): a short line per picture, the current one filling with gold while
   it shows, and a pause button. */
/* No shade over the photos: a soft shadow on the lines themselves keeps them readable on light skies. */
.hero__dots { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55)); }
.hero__dots button { position: relative; display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.hero__dots [data-slide]::before, .hero__dots [data-slide]::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 15px; height: 2px; background: rgba(255, 255, 255, 0.6);
}
.hero__dots [data-slide]::after { background: var(--gold-2); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .hero__dots [data-slide]::after { transform-origin: right; }
.hero__dots [data-slide]:hover::before { background: rgba(255, 255, 255, 0.8); }
.hero__dots [aria-pressed="true"]::after { transform: none; }
.hero__dots.is-playing [aria-pressed="true"]::after { animation: heroProgress var(--delay, 7s) linear both; }
@keyframes heroProgress { from { transform: scaleX(0); } }
.hero__pause { width: 32px; }
.hero__pause:hover { color: var(--gold-2); }
.hero__pause .ic { width: 14px; height: 14px; }
.hero__dots button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }

/* The five services as a plain list of links, each with a small gold icon. */
.hero__services { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; max-width: 34em; }
.hero__services a {
  display: inline-flex; align-items: center; gap: 9px; padding-block: 4px;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--text);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
html[lang="ur"] .hero__services a { line-height: 1.9; padding-block: 0; }
.hero__services .ic { width: 20px; height: 20px; color: var(--gold-3); stroke-width: 1.5; }
.hero__services a:hover { color: var(--gold-text); text-decoration-color: var(--gold); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* "Prefer to talk?" with WhatsApp and the phone number, under the buttons. */
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; color: var(--muted); font-size: var(--fs-small); }
.hero__ctas a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color .2s ease;
}
.hero__ctas a:hover { color: var(--gold-text); text-decoration-thickness: 2px; }
.hero__ctas .ic { width: 1.05em; height: 1.05em; color: var(--gold-3); }
.hero__ctas .ic--fill { color: var(--gold-3); }

/* ---------- Why Alabbasia (strip under the hero) ---------- */
.why { padding-block: 40px; background: #fff; }
.why__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; }
.why__item { display: flex; align-items: flex-start; gap: 14px; }
.why__icon { flex: none; color: var(--gold-3); margin-top: 2px; }
.why__icon .ic { width: 24px; height: 24px; }
.why__item h3 { font-size: var(--fs-body); font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.why__item p { font-size: var(--fs-small); line-height: 1.55; }
html[lang="ur"] .why__item p { line-height: 1.9; }

/* ---------- Sections ---------- */
.section { --section-bg: var(--ground); position: relative; padding-block: clamp(80px, 9vw, 128px); }
.section--alt { --section-bg: #fff; background: #fff; }
.section--sand { --section-bg: var(--sand); background: var(--sand); }
/* Charcoal, from the emblem's frame, with its geometry faint behind: the one dark band among the light sections. */
.section--dark { --section-bg: var(--ink-900); background: var(--ink-900) var(--pattern); }
.section > .container { position: relative; }

/* Section heading, centred: the title and one short introduction. */
.section__head {
  display: grid; justify-items: center; text-align: center; max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}
.section__head > h2 + p { max-width: 60ch; margin-top: 16px; font-size: var(--fs-body); text-wrap: pretty; }
p { text-wrap: pretty; }
.section__head h2, .book__intro h2, .how__head h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); letter-spacing: -0.015em; line-height: 1.06; text-wrap: balance;
}
html[lang="ar"] :is(.section__head h2, .book__intro h2, .how__head h2) { font-weight: 700; line-height: 1.4; font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: 0; }
html[lang="ur"] :is(.section__head h2, .book__intro h2, .how__head h2) { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.8; letter-spacing: 0; }

/* ---------- Tabs (Transport: vehicles / popular routes) ---------- */
.tabs { display: flex; justify-content: center; gap: 4px; margin: 0 auto 32px; width: fit-content; padding: 4px; background: var(--sand); border-radius: var(--radius); }
.tabs__tab {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 24px; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius); color: var(--text);
  font-family: var(--font-latin); font-size: var(--fs-small); font-weight: 500;
  transition: color .2s ease, background .2s ease;
}
[dir="rtl"] .tabs__tab { font-family: var(--font-body); }
.tabs__tab:not([aria-selected="true"]):hover { background: #fff; color: var(--ink); }
.tabs__tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.tabs__tab .ic { width: 20px; height: 20px; }
.tabs__panel[hidden] { display: none; }

/* ---------- Cards ---------- */
/* White on the ground, square, no outline and no shadow until they are pointed at. taste-skill-ignore */
.vehicle, .pkg, .zcard, .route, .review { background: #fff; border-radius: var(--radius); }

/* ---------- Fleet ---------- */
.fleet { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.vehicle { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .3s ease; }
.vehicle__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #3a3a3a; }
.vehicle__media img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 4px 10px; pointer-events: none;
  font-family: var(--font-latin); font-size: var(--fs-fine); font-weight: 500;
  color: var(--ink); background: #fff; border-radius: var(--radius);
}
[dir="rtl"] .tag { font-family: var(--font-body); }
.vehicle__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.vehicle__body h3 { font-size: var(--fs-h4); font-weight: 600; font-family: var(--font-latin); }
.specs { display: grid; gap: 8px; font-size: var(--fs-small); }
.specs li { display: flex; align-items: center; gap: 10px; }
.specs .ic { color: var(--gold-3); }
/* Book (charcoal) and WhatsApp side by side; they stack when the card is narrow. */
.vehicle__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.vehicle__actions .btn { flex: 1 1 auto; }

/* ---------- Routes ---------- */
/* Each route is one link to WhatsApp, asking for its price. */
.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.route {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 18px 20px;
  transition: box-shadow .25s ease;
}
.route__icon { flex: none; color: var(--ink); }
.route__icon .ic { width: 22px; height: 22px; }
.route__body { flex: 1; min-width: 0; display: grid; gap: 3px; line-height: 1.35; }
.route__body strong { font-size: var(--fs-body); font-weight: 600; color: var(--heading); }
.route__body small { color: var(--muted); font-size: var(--fs-fine); }
html[lang="ur"] .route__body { line-height: 1.9; }
.route__cta {
  flex: none; white-space: nowrap; color: var(--ink);
  font-family: var(--font-latin); font-size: var(--fs-small); font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease;
}
[dir="rtl"] .route__cta { font-family: var(--font-body); }
.route:hover .route__cta { text-decoration-color: currentColor; }
.route--other { background: var(--sand); }

/* ---------- Segmented choice (package length, hotel level) ---------- */
/* Real radio buttons laid over the boxes, so arrow keys and forms work as usual; the checked one turns gold.
   Both sit on charcoal (the packages band and the booking form). */
.seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.seg__opts { display: flex; gap: 2px; padding: 2px; background: rgba(0, 0, 0, 0.18); border-radius: var(--radius); }
.seg__opts label { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.seg__opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg__opts span {
  display: grid; place-items: center; align-content: center; height: 100%; padding: 12px 10px; text-align: center; line-height: 1.3;
  color: var(--text); border-radius: var(--radius); transition: background .2s ease, color .2s ease;
}
.seg__opts label:hover span { background: rgba(255, 255, 255, 0.08); }
.seg__opts input:checked + span { background: var(--gold-2); color: var(--ink-900); }
.seg__opts input:focus-visible + span { outline: 2px solid #fff; outline-offset: -4px; }
.seg--form span { min-height: 48px; font-size: var(--fs-small); }

/* ---------- Umrah packages ---------- */
/* Four hotel levels, white cards on the charcoal band. The length picked above sets the nights on every card;
   the bar shows the Makkah (champagne) and Madinah (charcoal) share of the stay. */
.pk-length { display: grid; justify-items: center; margin-bottom: 32px; }
/* The introduction above already says "choose how long you want to stay", so the legend is for screen readers only. */
.pk-length legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pk-length .seg__opts { width: fit-content; }
.pk-length .seg__opts label { flex: none; }
.pk-length span { min-width: 96px; padding: 12px 18px 10px; gap: 2px; }
.pk-length b { font-family: "Cormorant Garamond", Georgia, serif; font-size: var(--fs-h3); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.pk-length small { font-size: var(--fs-fine); }
html[lang="ur"] .pk-length small { line-height: 1.8; }

.pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pkg {
  --pad-t: 24px; --pad-x: 22px;
  position: relative; display: flex; flex-direction: column; padding: var(--pad-t) var(--pad-x) 22px; overflow: hidden;
  color: var(--text);
}
/* Example photo across the top of the card (edge to edge). */
.pkg__media { position: relative; margin: calc(-1 * var(--pad-t)) calc(-1 * var(--pad-x)) 20px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .pkg:hover .pkg__media img { transform: scale(1.04); } }
.pkg__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.pkg__head h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1; }
html[lang="ar"] .pkg__head h3 { line-height: 1.3; }
html[lang="ur"] .pkg__head h3 { font-size: 1.4rem; line-height: 1.9; font-weight: 600; }
.pkg__total { font-size: var(--fs-small); font-weight: 600; color: var(--ink); white-space: nowrap; }
.pkg__stars, .pkg__sub { grid-column: 1 / -1; min-height: 22px; }
.pkg__stars { display: flex; align-items: center; gap: 4px; color: var(--gold-3); }
.pkg__stars .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; opacity: 0.25; }
.pkg__stars .is-on { opacity: 1; }
.pkg__sub { color: var(--muted); font-size: var(--fs-small); line-height: 22px; }
html[lang="ur"] .pkg__sub { line-height: 1.9; }

/* Makkah and Madinah nights on a tone step inside the card. */
.pkg__stay { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 18px 0 20px; padding: 14px 16px 16px; background: var(--ground); }
.pkg__city { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.3; }
.pkg__city + .pkg__city { align-items: flex-end; }
.pkg__city span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-fine); color: var(--muted); }
.pkg__city span::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.pkg__city + .pkg__city span::before { background: var(--ink-hover); }
.pkg__city b { font-size: var(--fs-body); font-weight: 600; color: var(--heading); }
html[lang="ur"] .pkg__city { line-height: 1.9; }
.pkg__bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 4px; margin-top: 12px; }
.pkg__bar i { flex: 1 1 0; background: var(--gold); transition: flex-grow .45s ease; }
.pkg__bar i + i { background: var(--ink-hover); }

.pkg__label { margin-bottom: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--heading); }
.pkg__inc { display: grid; gap: 9px; margin-bottom: 24px; font-size: var(--fs-small); }
.pkg__inc li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
html[lang="ur"] .pkg__inc li { line-height: 2; }
.pkg__inc .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--gold-3); }
.pkg .btn { margin-top: auto; }

.pk-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 30px; text-align: center; font-size: var(--fs-small); }
.pk-note a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pk-note a:hover { color: #fff; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.review { display: flex; flex-direction: column; margin: 0; padding: 28px 28px 24px; }
.review::before { content: "\201C"; height: 30px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 4.2rem; line-height: 1; color: var(--gold); }
.review blockquote { margin: 0 0 22px; font-size: var(--fs-body); }
.review figcaption { margin-top: auto; display: grid; gap: 2px; padding-top: 16px; line-height: 1.45; }
html[lang="ur"] .review figcaption { line-height: 1.9; }
.review figcaption strong { font-weight: 600; }
.review figcaption span { color: var(--muted); font-size: var(--fs-small); }
.review figcaption a { justify-self: start; margin-top: 4px; color: var(--gold-text); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Ziyarat ---------- */
.ziyarat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zcard { position: relative; display: flex; flex-direction: column; padding: 14px 14px 22px; transition: box-shadow .3s ease; }
.zcard__media { aspect-ratio: 4 / 3; }
.zcard__media .arch__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 48%); } /* taste-skill-ignore: neutral scrim over a photo */
/* Arabic place name, set on the photo. Decorative: the heading below carries the meaning. */
.zcard__ar {
  position: absolute; z-index: 1; bottom: 6px; inset-inline-end: 18px; font-family: "Amiri", serif; font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.5; color: var(--gold-2); pointer-events: none; white-space: nowrap;
}
.zcard__body { flex: 1; display: flex; flex-direction: column; padding: 20px 8px 0; }
.zcard h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin-bottom: 12px; }
html[lang="ur"] .zcard h3 { font-size: 1.5rem; font-weight: 600; }
.zcard__list { display: grid; gap: 7px; font-size: var(--fs-small); }
.zcard__list li { display: flex; gap: 10px; align-items: baseline; }
.zcard__list li::before { content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg) translateY(-2px); background: var(--gold); }
.zcard__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zcard__foot .btn { flex: 1 1 auto; }
.zcard__media img, .vehicle__media img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
/* Pointing at a card lifts it a little: the one place these cards cast a shadow. */
@media (hover: hover) {
  .zcard:hover .zcard__media img, .vehicle:hover .vehicle__media img { transform: scale(1.04); }
  .vehicle, .zcard, .route, .pkg { transition: transform .3s ease, box-shadow .3s ease; }
  .vehicle:hover, .zcard:hover, .route:hover, .pkg:hover { transform: translateY(-4px); box-shadow: var(--float), inset 0 -2px 0 var(--gold); } /* taste-skill-ignore: hover feedback, not at rest */
}

/* ---------- Visa & hotels ---------- */
/* Two columns: hotels (two arches) and visa help (the 3D passport), each with its own call to action. */
.vh { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.vh__col { display: flex; flex-direction: column; align-items: flex-start; }
/* Both pictures sit in matching sand panels: the full width of their column, the same height (so the two
   headings line up), the picture centred inside. */
.vh__visual {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 480px; margin-bottom: 34px; padding: 36px 28px;
  background: var(--sand); border-radius: var(--radius);
}
.vh__visual > .hotel-photos { max-width: 440px; }
.vh__visual > .passport { width: min(360px, 100%); margin: 0; }
.vh__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.1; }
html[lang="ar"] .vh__title { line-height: 1.4; }
html[lang="ur"] .vh__title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.9; font-weight: 600; }
.vh__lead { margin-top: 14px; max-width: 60ch; }
.vh .checks { margin: 22px 0 28px; }
/* Visa types: each opens the booking form with that visa chosen. */
.vtypes { display: grid; gap: 8px; width: 100%; margin: 22px 0 28px; }
.vtypes a {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
  border-radius: var(--radius); background: var(--ground); transition: background .2s ease, box-shadow .2s ease;
}
.vtypes a:hover { background: #fff; box-shadow: inset 2px 0 0 var(--gold); }
[dir="rtl"] .vtypes a:hover { box-shadow: inset -2px 0 0 var(--gold); }
.vtypes .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--gold-3); }
.vtypes span { display: grid; gap: 2px; line-height: 1.45; }
html[lang="ur"] .vtypes span { line-height: 1.9; }
.vtypes strong { font-weight: 600; color: var(--heading); }
.vtypes small { color: var(--muted); font-size: var(--fs-small); }
.checks { display: grid; gap: 12px; margin: 30px 0 36px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks .ic {
  width: 24px; height: 24px; padding: 5px; border-radius: 50%; stroke-width: 2.4; margin-top: 2px;
  color: var(--gold-2); background: var(--ink);
}

/* Two arches, Makkah and Madinah. */
.hotel-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; max-width: 560px; margin-inline: auto; width: 100%; }
.hotel-photos figure { margin: 0; }
.hotel-photos .arch { aspect-ratio: 4 / 5; }
.hotel-photos figcaption { display: grid; gap: 2px; padding: 14px 4px 0; line-height: 1.3; }
.hotel-photos figcaption strong { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--heading); }
.hotel-photos figcaption span { font-size: var(--fs-small); color: var(--muted); }
html[lang="ur"] .hotel-photos figcaption { line-height: 1.9; }
html[lang="ur"] .hotel-photos figcaption strong { font-size: 1.1rem; font-weight: 600; }

.visa__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.visa__note { margin-top: 24px; max-width: 60ch; color: var(--muted); font-size: var(--fs-small); }

/* 3D passport. --u is one unit of the 440×480 artboard, so the whole piece scales with its box.
   The book opens on a loop; .passport__shift slides it right so the open spread stays centred. */
.passport {
  position: relative; width: min(440px, 100%); aspect-ratio: 440 / 480; margin-inline: auto;
  container-type: inline-size; --u: calc(100cqw / 440); direction: ltr;
}
.passport__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.passport__orbit--back { z-index: 0; }
.passport__orbit--front { z-index: 2; }
.passport__trail { fill: none; stroke: rgba(167, 122, 18, 0.55); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.passport__plane { fill: var(--gold-3); }
.passport__scene {
  position: absolute; z-index: 1; left: calc(120 * var(--u)); top: calc(100 * var(--u));
  width: calc(200 * var(--u)); height: calc(280 * var(--u)); perspective: calc(1400 * var(--u));
}
.passport__shift, .passport__book, .passport__cover { position: absolute; inset: 0; transform-style: preserve-3d; }
.passport__shift { animation: passportShift 10s ease-in-out infinite; }
.passport__book { transform: rotateX(-8deg) rotateY(-24deg); animation: passportFloat 8s ease-in-out infinite; }
.passport__back, .passport__page, .passport__face {
  position: absolute; inset: 0;
  border-radius: calc(5 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u));
}
/* The book itself is a drawn object, so it keeps its own shading. */
.passport__back { transform: translateZ(calc(-16 * var(--u))); background: #0b3426; }
.passport__spine {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(16 * var(--u));
  transform-origin: left center; transform: rotateY(90deg); background: #114a37;
}
.passport__edge { position: absolute; --stripes: #f3ead2 0 calc(1.5 * var(--u)), #cfc3a3 calc(1.5 * var(--u)) calc(2.5 * var(--u)); }
.passport__edge--right {
  top: calc(3 * var(--u)); bottom: calc(3 * var(--u)); left: calc(100% - 2 * var(--u)); width: calc(14 * var(--u));
  transform-origin: left center; transform: rotateY(90deg) translateX(var(--u));
  background: repeating-linear-gradient(90deg, var(--stripes)); /* taste-skill-ignore: page edges of a drawn book */
}
.passport__edge--top, .passport__edge--bottom {
  left: calc(2 * var(--u)); right: calc(3 * var(--u)); height: calc(14 * var(--u));
  transform-origin: center top; transform: rotateX(-90deg) translateY(var(--u));
  background: repeating-linear-gradient(0deg, var(--stripes)); /* taste-skill-ignore: page edges of a drawn book */
}
.passport__edge--top { top: calc(2 * var(--u)); }
.passport__edge--bottom { top: calc(100% - 2 * var(--u)); }

.passport__page {
  inset: calc(2 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u)) var(--u);
  transform: translateZ(calc(-1 * var(--u)));
  padding: calc(18 * var(--u)) calc(16 * var(--u)); overflow: hidden; color: #2b2a24; background: #f6efdc;
}
.passport__photo {
  width: calc(54 * var(--u)); height: calc(66 * var(--u)); border-radius: calc(4 * var(--u));
  display: grid; place-items: center; background: #e3d9c0; color: #9c8f6f;
}
.passport__photo .ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke-width: 1.4; }
.passport__lines { position: absolute; top: calc(24 * var(--u)); left: calc(84 * var(--u)); right: calc(16 * var(--u)); display: grid; gap: calc(9 * var(--u)); }
.passport__lines i { display: block; height: calc(4 * var(--u)); border-radius: 2px; background: #d9cfb6; }
.passport__lines i:nth-child(even) { width: 68%; }
.passport__stamp {
  position: absolute; right: calc(8 * var(--u)); bottom: calc(30 * var(--u)); width: calc(108 * var(--u));
  transform: rotate(-14deg); fill: none; stroke: #1d6b52; stroke-width: 2.4; opacity: .85;
}
.passport__stamp text { fill: #1d6b52; stroke: none; font: 600 11px "Jost", sans-serif; }
.passport__mrz {
  position: absolute; left: calc(14 * var(--u)); right: calc(10 * var(--u)); bottom: calc(12 * var(--u));
  overflow: hidden; white-space: nowrap; color: #6f6754;
  font: 600 calc(8.5 * var(--u)) / 1 "Courier New", monospace; letter-spacing: calc(0.6 * var(--u)); /* taste-skill-ignore: a passport's machine-readable line is monospace */
}

.passport__cover { transform-origin: left center; transform: translateZ(1px); animation: passportOpen 10s ease-in-out infinite; }
.passport__face { overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.passport__front {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  color: #e2c27a; background: #0f4532;
}
.passport__ar, .passport__en { color: #e7c983; }
.passport__ar { font-family: "Amiri", serif; font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.2; }
.passport__en { font-family: var(--font-latin); font-weight: 500; font-size: calc(12 * var(--u)); letter-spacing: .38em; padding-left: .38em; }
.passport__emblem { width: calc(92 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; }
.passport__chip { width: calc(30 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .9; }
.passport__inner { transform: rotateY(180deg); display: grid; place-items: center; background: #efe6cc; }
.passport__inner img { width: calc(70 * var(--u)); height: auto; opacity: .35; }
.passport__shadow {
  position: absolute; left: 4%; right: 4%; bottom: calc(-34 * var(--u)); height: calc(26 * var(--u));
  border-radius: 50%; background: rgba(32, 35, 38, 0.16); filter: blur(calc(8 * var(--u)));
  animation: passportShadow 8s ease-in-out infinite;
}
@keyframes passportFloat {
  0%, 100% { transform: rotateX(-8deg) rotateY(-24deg) translateY(0); }
  50% { transform: rotateX(-4deg) rotateY(-16deg) translateY(calc(-10 * var(--u))); }
}
@keyframes passportOpen {
  0%, 16% { transform: translateZ(1px) rotateY(0deg); }
  34%, 72% { transform: translateZ(1px) rotateY(-150deg); }
  90%, 100% { transform: translateZ(1px) rotateY(0deg); }
}
@keyframes passportShift {
  0%, 16% { transform: translateX(0); }
  34%, 72% { transform: translateX(calc(100 * var(--u))); }
  90%, 100% { transform: translateX(0); }
}
@keyframes passportShadow { 50% { transform: scale(.9); opacity: .7; } }

/* ---------- How booking works ---------- */
/* The heading and the WhatsApp button on one side, the four steps on the other. The steps are a real <ol>,
   numbered by the list itself in large gold figures. */
.how { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.how__head { position: sticky; top: calc(var(--nav-h) + 30px); display: grid; justify-items: start; gap: 28px; }
.steps { display: grid; gap: 34px; list-style: decimal; padding-inline-start: 2.6em; }
.step { padding-inline-start: 10px; }
.step::marker { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.2rem; font-weight: 600; color: var(--gold-text); }
.step h3 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: 6px; line-height: 1.3; }
.step p { max-width: 52ch; }

/* ---------- Booking ---------- */
/* The introduction on the light page; the form itself on a charcoal panel with white fields. */
.book { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.book__intro { position: sticky; top: calc(var(--nav-h) + 30px); }
.book__intro > p { margin-top: 18px; max-width: 46ch; }
.book__call { margin-top: 34px; display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-small); }
.book__phone { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-latin); font-size: var(--fs-h4); font-weight: 500; color: var(--heading); justify-self: start; }
.book__phone .ic { color: var(--gold-3); }
.book__form {
  position: relative; border-radius: var(--radius); padding: clamp(22px, 3vw, 38px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: var(--ink-900);
}
.field { display: grid; gap: 8px; }
.field[hidden] { display: none; }
.field--full, .form__error, .book__form .btn { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 500; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius); border: 2px solid transparent;
  background: #fff; color: #252525; outline: none; color-scheme: light;
  transition: border-color .2s ease;
}
html[lang="ur"] .field input, html[lang="ur"] .field select, html[lang="ur"] .field textarea { padding-block: 8px; font-size: 16px; }
.field textarea { resize: vertical; min-height: 92px; }
.field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a27f3e' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; padding-inline-end: 40px; }
[dir="rtl"] .field select { background-position: left 16px center; }
.field select option { background: #fff; color: #252525; }
.field input::placeholder, .field textarea::placeholder { color: #686868; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-2); }
.field.is-invalid input, .field.is-invalid select { border-color: #ff9d8c; }

/* Vehicle suggestion in the booking form, filled in by js/main.js */
.suggest { gap: 2px; padding: 14px 18px; border-radius: var(--radius); background: rgba(0, 0, 0, 0.2); }
.suggest.is-empty { display: none; }
.suggest__label { font-size: var(--fs-fine); color: var(--muted); }
.suggest__vehicle { font-size: var(--fs-body); font-weight: 600; color: var(--gold-2); }
.suggest__msg { font-size: var(--fs-small); color: var(--muted); }
.suggest__warn { font-size: var(--fs-small); color: #ffc2b8; }
.form__error { color: #ffc2b8; font-size: var(--fs-small); }
.book__form .btn { margin-top: 6px; padding-block: 17px; }

/* ---------- Closing call to action ---------- */
/* Masjid al-Haram at night under a neutral charcoal shade (for the white words), behind a short invitation. */
.band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(100px, 13vw, 170px); text-align: center; background: var(--ink-950); }
.band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23, 25, 27, 0.76); }
.band h2 { max-width: 860px; margin-inline: auto; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 1.05; text-wrap: balance; }
html[lang="ar"] .band h2 { font-weight: 700; line-height: 1.4; }
html[lang="ur"] .band h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.9; }
.band p { max-width: 54ch; margin: 22px auto 0; }
.band__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.band .btn--ghost { background: rgba(255, 255, 255, 0.14); color: #fff; }
.band .btn--ghost:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 400px 1fr; gap: 24px; }
.contact__cards { display: grid; gap: 4px; align-content: start; }
.ccard { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0; }
a.ccard:hover .ccard__text strong { color: var(--gold-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ccard__icon { flex: none; width: 28px; display: grid; place-items: center; color: var(--gold-3); }
.ccard__icon--wa { color: var(--gold-3); }
.ccard__icon .ic { width: 24px; height: 24px; }
.ccard__text { display: grid; gap: 2px; min-width: 0; }
.ccard__text small { color: var(--muted); font-size: var(--fs-fine); }
.ccard__text strong, .ccard__num { font-family: var(--font-latin); font-size: var(--fs-body); font-weight: 500; color: var(--heading); }
html:not([lang="en"]) .ccard__text strong:not([dir="ltr"]) { font-family: var(--font-body); }
.ccard__num { justify-self: start; transition: color .2s ease; }
.ccard__num:hover { color: var(--gold-text); }
[dir="rtl"] .ccard__text strong[dir="ltr"] { text-align: right; }
.ccard__text strong[dir="ltr"] { overflow-wrap: anywhere; }
.ccard__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ccard__social a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius);
  font-family: var(--font-latin); font-size: var(--fs-small); font-weight: 500;
  background: var(--sand); transition: background .2s ease, color .2s ease;
}
.ccard__social a:hover { background: var(--ink); color: #fff; }
.ccard__social .ic { width: 1.05em; height: 1.05em; }
.contact__map { border-radius: var(--radius); overflow: hidden; min-height: 380px; background: var(--sand); }
.contact__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: saturate(.85); }

/* ---------- Footer ---------- */
.footer { padding-top: 72px; background: var(--ink-900); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.1fr; gap: 40px; padding-bottom: 48px; }
.footer__brand .brand img { width: 52px; }
.footer .brand__text strong { color: var(--gold-2); }
.footer .brand__text small { color: var(--muted); }
.footer__brand p { margin-top: 20px; max-width: 42ch; font-size: var(--fs-small); color: var(--muted); }
.footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.social {
  width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); color: var(--text); transition: background .2s ease, color .2s ease;
}
.social:hover { background: var(--gold-2); color: var(--ink-900); }
.social .ic { width: 18px; height: 18px; }
.footer h4 { font-family: var(--font-latin); font-size: var(--fs-body); font-weight: 600; color: var(--gold-2); margin-bottom: 18px; }
[dir="rtl"] .footer h4 { font-family: var(--font-body); }
.footer__links { display: grid; gap: 10px; color: var(--muted); font-size: var(--fs-small); }
.footer__links a:hover { color: var(--gold-2); }
[dir="rtl"] .footer__links a[dir="ltr"] { justify-self: start; }
/* The close: the year and name, the legal links, the prayer. */
.footer__close { background: var(--ink-950); }
/* Room on the far side for the floating WhatsApp and call buttons, so they never cover the last line. */
.footer__bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; padding-block: 26px 30px; padding-inline-end: 96px; color: var(--muted); font-size: var(--fs-fine); }
.footer__legal-links { display: flex; gap: 20px; }
.footer__legal-links a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer__legal-links a:hover { color: var(--gold-2); }
.footer__dua { color: var(--gold-2); font-family: var(--font-display); font-style: italic; font-size: var(--fs-h4); }
[dir="rtl"] .footer__dua { font-style: normal; font-size: var(--fs-body); }
.footer__contact { gap: 18px; }
.footer__contact li { display: grid; gap: 4px; justify-items: start; }
.footer__contact small { font-size: var(--fs-fine); color: var(--muted); }
.footer__num { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.footer__wa {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius);
  color: var(--gold-2); background: rgba(255, 255, 255, 0.08); transition: background .2s ease, color .2s ease;
}
.footer__links .footer__wa:hover { background: var(--gold-2); color: var(--ink-900); }
.footer__wa .ic { width: 15px; height: 15px; }
/* Registration and licence numbers. A line without a number is hidden, and so is the strip (see index.html). */
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-block: 0; padding-bottom: 24px; font-size: var(--fs-small); }
.footer__legal div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.footer__legal dt { color: var(--muted); }
.footer__legal dd { margin: 0; font-family: var(--font-latin); color: var(--text); }
.footer__legal div:has(> dd:empty), .footer__legal:not(:has(dd:not(:empty))) { display: none; }

/* ---------- Text pages (privacy policy) ---------- */
.doc__back { margin-inline-start: auto; }
.doc { max-width: 68ch; padding-block: clamp(48px, 7vw, 96px); }
.doc h1 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.015em; }
.doc__date { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); }
.doc h2 { margin: 40px 0 12px; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 14px; }
.doc ul { display: grid; gap: 8px; padding-inline-start: 1.3em; list-style: disc; }
.doc li::marker { color: var(--gold-3); }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc a:hover { color: var(--ink-hover); }
.doc .doc__date + p { margin-top: 28px; }
.credits { gap: 12px; }
.credits span { display: block; color: var(--muted); font-size: var(--fs-small); }

/* ---------- Floating WhatsApp and call buttons ---------- */
.floats {
  position: fixed; z-index: 40; bottom: 22px; inset-inline-end: 22px; display: grid; gap: 12px;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.floats.is-hidden { opacity: 0; visibility: hidden; transform: translateY(16px); }
.float {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: var(--float); transition: transform .25s ease; /* taste-skill-ignore: fixed buttons that float over the page */
}
.float:hover { transform: scale(1.06); }
.float .ic { width: 26px; height: 26px; }
.float--call { background: var(--ink); color: #fff; box-shadow: var(--float), inset 0 0 0 1px rgba(198, 166, 107, 0.6); } /* the champagne ring keeps it visible over the charcoal bands */
.float--call .ic { width: 22px; height: 22px; }
.float--wa { background: var(--wa); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .nav .brand__text small { display: none; }
  .nav__links a { padding-inline: 10px; }
  .nav__links a::after { inset-inline: 10px; }
}

/* Below this width the nav links no longer fit beside the brand, the languages and the WhatsApp button. */
@media (max-width: 1180px) {
  .ziyarat { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .burger { display: block; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1; margin: 0; padding: calc(var(--nav-h) + 56px) 24px 40px;
    flex-direction: column; gap: 0; overflow-y: auto; background: var(--ground);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
  }
  .nav__links a { font-size: 1.8rem; font-weight: 600; padding: 12px 4px; color: var(--heading); font-family: var(--font-display); }
  .nav__links a::after { display: none; }
  .nav__links .nav__menu-cta {
    display: inline-flex; flex: none; margin-top: 30px; padding: 16px 26px;
    font-family: var(--font-latin); font-size: 1rem; color: #fff;
  }
  html:not([lang="en"]) .nav__links .nav__menu-cta { font-family: var(--font-body); }
  .menu-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .menu-open { overflow: hidden; }
  .nav__actions { margin-inline-start: auto; }
}

@media (max-width: 1080px) {
  .topbar__mail { display: none; }
  .contact { grid-template-columns: 1fr; }
  .contact__cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .why__list { grid-template-columns: repeat(2, 1fr); }
  .pkgs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  /* Phones and tablets: the arch on top (wider and lower), the words under it. */
  .topbar__addr { display: none; }
  .hero { padding-top: 16px; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__frame { order: -1; width: 100%; padding: 6px; -webkit-mask-image: var(--arch-wide); mask-image: var(--arch-wide); }
  .hero__frame::before { inset: 3px; }
  .hero__frame::after { inset: 4px; }
  .hero__media { aspect-ratio: 4 / 3; -webkit-mask-image: var(--arch-wide); mask-image: var(--arch-wide); }
  .hero__media .hero__slide--kaaba { object-position: 50% 42%; }
  .hero__media .hero__slide--madinah { object-position: 50% 62%; }
  .hero__media .hero__slide--coaches { object-position: 50% 62%; }
  .hero__text { max-width: 640px; }

  .fleet { grid-template-columns: repeat(2, 1fr); }
  .vh { grid-template-columns: 1fr; row-gap: 72px; }
  .vh__visual { min-height: 0; }
  .how { grid-template-columns: 1fr; }
  .how__head { position: static; }
  .book { grid-template-columns: 1fr; }
  .book__intro { position: static; }
}

@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  .topbar { display: none; }
  .nav__cta { display: none; }
  .brand__text small { display: none; }
  .brand__text strong { font-size: 0.95rem; }
  .brand img { width: 32px; }
  .lang a { padding: 5px 8px; }
  .nav__inner { gap: 10px; }

  html[lang="en"] .hero__title { font-size: min(3rem, 12.4vw); }
  html[lang="ar"] .hero__title { font-size: min(2.6rem, 10.6vw); }
  html[lang="ur"] .hero__title { font-size: min(2rem, 8.4vw); }
  .hero { padding-top: 12px; padding-bottom: 48px; }
  .hero__inner { gap: 22px; }
  .hero__lead { margin-top: 16px; }
  .hero__services { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 22px; }
  .hero__btns { flex-direction: column; gap: 10px; margin-top: 26px; }

  .why { padding-block: 32px; }
  .why__list { grid-template-columns: 1fr; gap: 20px; }
  .routes { grid-template-columns: 1fr; gap: 8px; }
  .route { padding: 16px; gap: 14px; }

  /* Fleet: one swipeable row instead of six full-width cards stacked down the page.
     The next card peeks in from the edge so it is clear the row scrolls. */
  .fleet {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .fleet::-webkit-scrollbar { display: none; }
  .vehicle { scroll-snap-align: start; }

  /* Packages: the same swipeable row; the length switch above stretches to the full width. */
  .pkgs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 4px 16px 18px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .pkgs::-webkit-scrollbar { display: none; }
  .pkg { --pad-t: 22px; --pad-x: 18px; scroll-snap-align: start; padding-bottom: 20px; }
  .pk-length { margin-bottom: 22px; }
  .pk-length .seg__opts { width: 100%; }
  .pk-length .seg__opts label { flex: 1 1 0; }
  .pk-length span { min-width: 0; padding-inline: 6px; }
  .seg--form span { padding-inline: 4px; }

  .tabs { width: 100%; }
  .tabs__tab { flex: 1 1 0; justify-content: center; padding-inline: 10px; }

  /* Ziyarat: the same swipeable row as the vehicles. */
  .ziyarat {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .ziyarat::-webkit-scrollbar { display: none; }
  .zcard { scroll-snap-align: start; padding: 12px 12px 20px; }
  .zcard__body { padding: 18px 6px 0; }
  .hotel-photos { gap: 14px; }
  .book__form { grid-template-columns: 1fr; }
  .steps { gap: 26px; padding-inline-start: 2.2em; }

  .footer__grid { grid-template-columns: 1fr; }
  .floats { bottom: 16px; inset-inline-end: 16px; gap: 10px; }
  .float { width: 50px; height: 50px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; padding-inline-end: 0; padding-bottom: 136px; }
}

@media (max-width: 380px) {
  .brand__text { display: none; }
}

/* ---------- Touch screens: tap areas of about 44px ---------- */
@media (pointer: coarse) {
  .lang a { min-height: 40px; }
  .btn--sm { min-height: 44px; }
  .ccard__num { padding-block: 6px; }
  .ccard__social a { min-height: 44px; padding-inline: 16px; }
  .book__phone { padding-block: 4px; }
  .hero__services a { min-height: 40px; }
  /* Footer lists: the same spacing as before, but each link is a 40px-tall target. */
  .footer__links { gap: 0; }
  .footer__links > * { padding-block: 5px; }
  .footer__links a:not(.footer__wa) { padding-block: 9px; }
  .footer__legal-links a { display: inline-block; padding-block: 8px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .passport__plane { display: none; }
}