/* ==========================================================================
   FAZAT — فزعات · public website
   "Desert Nocturne" — ported from the app's src/theme/tokens.ts.

   Rules that hold everywhere in this file:
   - Logical properties only (margin-inline, inset-inline, padding-block…).
     The site flips between dir="rtl" and dir="ltr" with no duplicated CSS.
   - Nothing may cause horizontal overflow at 320px.
   - Every interactive target is at least 44x44 CSS px.
   - Colour pairs are checked to >= 4.5:1 against the ground.
   ========================================================================== */

/* ---------- fonts (self-hosted, subset to Arabic + Latin) ---------------- */

@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ------------------------------------------------------- */

:root {
  /* ground */
  --night-900: #050b09;
  --night-800: #07100d;
  --night-700: #0b1714;
  --night-600: #10201b;

  /* rope gold */
  --gold-100: #f6e7c1;
  --gold-200: #e8cb8e;
  --gold-300: #d8b268;
  --gold-400: #c79a45;
  --gold-600: #7c5820;

  /* sand */
  --sand-100: #ede3d2;
  --sand-300: #c9b896;

  /* UAE flag — state and accent only, never decoration */
  --uae-red: #c8102e;
  --uae-green: #00843d;

  /* feedback */
  --amber: #f5a524;
  --teal: #2dd4bf;
  --sky: #38bdf8;
  --danger: #e5484d;

  /* semantic */
  --bg: var(--night-800);
  --bg-deep: var(--night-900);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.075);
  --surface-solid: var(--night-700);
  --hairline: rgba(232, 203, 142, 0.16);
  --hairline-strong: rgba(232, 203, 142, 0.34);

  --gold: var(--gold-200);
  --gold-dim: var(--gold-400);

  /* text — contrast measured against --bg:
     text 18.9:1 · muted 6.8:1 · soft 5.5:1 (all pass AA) */
  --text: #f4efe4;
  --text-muted: rgba(244, 239, 228, 0.72);
  --text-soft: rgba(244, 239, 228, 0.55);
  --on-gold: #1a1206;

  /* spacing — mirrors tokens.ts */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 40px;
  --sp-5xl: 56px;

  /* radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* type */
  --font-display: 'Tajawal', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial,
    sans-serif;
  --font-body: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial,
    sans-serif;

  /* shadow */
  --shadow-card: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 5px 12px rgba(0, 0, 0, 0.32);
  --shadow-gold: 0 8px 20px rgba(199, 154, 69, 0.32);

  /* layout */
  --gutter: clamp(16px, 4.6vw, 28px);
  --page-max: 1120px;
  --prose-max: 68ch;

  /* motion */
  --t-fast: 160ms;
  --t-base: 260ms;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  /* overflow-x guard: nothing on this site may scroll sideways, ever. */
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  letter-spacing: 0;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding-inline-start: 1.35em;
}

a {
  color: var(--gold);
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-color: var(--gold);
}

/* ---------- bilingual text ----------------------------------------------
   Static copy is written into the HTML twice — once .t-ar, once .t-en — and
   only the half matching <html lang> is displayed. Nothing here sets a display
   value, so each element keeps its natural one when shown. This is why the
   site still reads correctly in Arabic with JavaScript disabled.
   ------------------------------------------------------------------------- */

html[lang='ar'] .t-en,
html[lang='en'] .t-ar {
  display: none !important;
}

/* ---------- focus -------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--gold-200);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* keyboard users get a visible ring even on the gold surfaces */
.btn:focus-visible,
.chip:focus-visible,
.select-card:focus-visible {
  outline: 3px solid var(--sand-100);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: -200%;
  inset-inline-start: var(--sp-lg);
  z-index: 200;
  padding: var(--sp-md) var(--sp-xl);
  background: var(--gold-200);
  color: var(--on-gold);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--sp-lg);
}

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

/* ---------- backdrop ----------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(160deg, #07100d 0%, #0a1512 45%, #050b09 100%);
}

/* khatam lattice — the app's PatternBackground, as a tiled data URI */
.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2276%22%20height%3D%2276%22%20viewBox%3D%220%200%2076%2076%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E8CB8E%22%3E%3Cpath%20d%3D%22M38.00%2C6.08L44.40%2C22.55L60.57%2C15.43L53.45%2C31.60L69.92%2C38.00L53.45%2C44.40L60.57%2C60.57L44.40%2C53.45L38.00%2C69.92L31.60%2C53.45L15.43%2C60.57L22.55%2C44.40L6.08%2C38.00L22.55%2C31.60L15.43%2C15.43L31.60%2C22.55Z%22%20stroke-width%3D%22.7%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M0%2C38H76M38%2C0V76%22%20stroke-width%3D%22.35%22%20opacity%3D%22.2%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2238%22%20r%3D%222%22%20fill%3D%22%23E8CB8E%22%20opacity%3D%22.35%22%2F%3E%3C%2Fsvg%3E");
  background-size: 76px 76px;
}

/* warm glow anchored to the top, as in the app */
.backdrop::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 42vh;
  background-image: linear-gradient(
    to bottom,
    rgba(232, 203, 142, 0.13),
    rgba(232, 203, 142, 0.03) 55%,
    transparent
  );
}

/* the barely-there flag ribbon along the very top edge */
.flag-ribbon {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(200, 16, 46, 0.5) 0 33.34%,
    rgba(255, 255, 255, 0.35) 33.34% 66.67%,
    rgba(0, 132, 61, 0.5) 66.67% 100%
  );
}

/* ---------- layout ------------------------------------------------------- */

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

.wrap--narrow {
  max-width: 720px;
}

.section {
  padding-block: clamp(40px, 9vw, 76px);
}

.section--tight {
  padding-block: clamp(28px, 6vw, 48px);
}

.stack > * + * {
  margin-block-start: var(--sp-lg);
}

.stack-lg > * + * {
  margin-block-start: var(--sp-2xl);
}

.stack-sm > * + * {
  margin-block-start: var(--sp-sm);
}

/* ---------- header ------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(5, 11, 9, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--hairline);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 60px;
  padding-block: var(--sp-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
  flex-shrink: 0;
}

.brand__mark {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--hairline-strong);
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--gold-100);
}

.brand__sub {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

/* language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 60px;
  padding-inline: var(--sp-md);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--gold-100);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.lang-toggle:hover {
  background: var(--surface-strong);
}

/* Primary nav — a horizontal scroller on phones. It sits OUTSIDE the sticky
   bar on purpose: only 60px of chrome follows the scroll, which matters a lot
   on a 667px-tall phone. The scroller is clipped to its own box, so the page
   itself never moves sideways. */
.site-nav {
  background: rgba(5, 11, 9, 0.55);
  border-block-end: 1px solid var(--hairline);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site-nav__list::-webkit-scrollbar {
  display: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding-inline: var(--sp-md);
  white-space: nowrap;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-block-end: 2px solid transparent;
}

.site-nav__link:hover {
  color: var(--text);
}

.site-nav__link[aria-current='page'] {
  color: var(--gold-100);
  border-block-end-color: var(--gold-300);
}

/* ---------- cards -------------------------------------------------------- */

.card {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background-color: rgba(11, 23, 20, 0.72);
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 60px;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(232, 203, 142, 0.1),
    rgba(232, 203, 142, 0)
  );
}

.card > * {
  position: relative;
}

.card--accent {
  border-color: var(--hairline-strong);
  background-image: linear-gradient(
    135deg,
    rgba(232, 203, 142, 0.2),
    rgba(199, 154, 69, 0.06)
  );
}

.card--flush {
  padding: 0;
}

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 52px;
  padding-inline: var(--sp-2xl);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.985);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn--gold {
  background-image: linear-gradient(135deg, #f6e7c1, #e8cb8e 45%, #c79a45);
  color: var(--on-gold);
  box-shadow: var(--shadow-gold);
}

.btn--gold:hover {
  background-image: linear-gradient(135deg, #fbf1d6, #f0d9a6 45%, #d3a851);
}

.btn--outline {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--gold-100);
}

.btn--outline:hover {
  background: var(--surface-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--gold-100);
}

.btn--ghost:hover {
  background: var(--surface);
}

.btn--sm {
  min-height: 44px;
  font-size: 14px;
  padding-inline: var(--sp-lg);
}

.btn--block {
  width: 100%;
}

.btn__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* the arrow on "next" points along the reading direction */
[dir='rtl'] .btn__icon--forward {
  transform: scaleX(-1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.btn-row > .btn {
  flex: 1 1 220px;
}

/* store badges */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 56px;
  padding: var(--sp-sm) var(--sp-xl);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong);
  background: rgba(5, 11, 9, 0.7);
  color: var(--text);
  text-decoration: none;
  flex: 1 1 200px;
  transition: background var(--t-fast);
}

.store-badge:hover {
  background: var(--surface-strong);
}

.store-badge svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: var(--gold-100);
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.store-badge__small {
  font-size: 11px;
  color: var(--text-soft);
}

.store-badge__big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

/* ---------- type helpers ------------------------------------------------- */

.hero-title {
  font-size: clamp(30px, 8.4vw, 54px);
  line-height: 1.24;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: break-word;
  /* progressive enhancement: evens out the centred headline's line lengths */
  text-wrap: balance;
}

.h1 {
  font-size: clamp(24px, 6.2vw, 34px);
  line-height: 1.3;
}

.h2 {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.35;
}

.h3 {
  font-size: clamp(17px, 4.2vw, 20px);
  line-height: 1.4;
  font-weight: 700;
}

.lede {
  font-size: clamp(16px, 4.2vw, 19px);
  color: var(--text-muted);
  line-height: 1.85;
  max-width: var(--prose-max);
  text-wrap: pretty;
}

.muted {
  color: var(--text-muted);
}

.soft {
  color: var(--text-soft);
  font-size: 13px;
}

.gold {
  color: var(--gold-100);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold-300);
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold-400);
}

.prose > * + * {
  margin-block-start: var(--sp-lg);
}

.prose h2 {
  margin-block-start: var(--sp-3xl);
  font-size: clamp(19px, 4.6vw, 24px);
  color: var(--gold-100);
}

.prose h3 {
  margin-block-start: var(--sp-2xl);
  font-size: clamp(16px, 4vw, 19px);
}

.prose p,
.prose li {
  color: var(--text-muted);
  max-width: var(--prose-max);
}

.prose li + li {
  margin-block-start: var(--sp-sm);
}

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

.hero {
  padding-block: clamp(44px, 10vw, 92px) clamp(40px, 9vw, 76px);
}

/* The hero is a single centred column. Both the decorative vehicle image and
   the second (large) logo were removed at the owner's request — the brand mark
   now appears once, in the header — so the hero is one balanced stack: eyebrow,
   headline, lede, primary actions. The grid child stretches to the column so
   the CTA row and lede lay out predictably at every width. */
.hero__grid {
  display: grid;
  gap: var(--sp-2xl);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero__grid .lede {
  margin-inline: auto;
}

.hero__grid .btn-row {
  justify-content: center;
}

/* The large brand mark is still used on the standalone 404 page, which has no
   site header of its own, so it is the only mark on that screen. */
.hero__mark {
  width: clamp(112px, 30vw, 168px);
  height: auto;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 18px 44px rgba(0, 0, 0, 0.55);
  margin-inline: auto;
}

/* ---------- stat / feature grids ---------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
}

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

@media (min-width: 760px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  text-align: center;
  padding: var(--sp-lg) var(--sp-md);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 6.5vw, 34px);
  color: var(--gold-100);
  line-height: 1.2;
}

.stat__label {
  font-size: 13px;
  color: var(--text-muted);
}

.feature__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(232, 203, 142, 0.12);
  border: 1px solid var(--hairline);
  margin-block-end: var(--sp-md);
}

.feature__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold-200);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature h3 {
  margin-block-end: var(--sp-sm);
  color: var(--text);
}

.feature p {
  color: var(--text-muted);
  font-size: 15px;
}

/* numbered "how it works" steps */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-lg);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 62px;
  min-height: 46px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(232, 203, 142, 0.1);
  color: var(--gold-100);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}

.steps h3 {
  font-size: 17px;
  margin-block-end: 2px;
}

.steps p {
  color: var(--text-muted);
  font-size: 15px;
}

/* ---------- the standing safety notice ---------------------------------- */
/* Non-dismissible by construction: there is no close control and no JS that
   can hide it. It renders before any form field on request.html. */

.notice {
  border: 1px solid rgba(229, 72, 77, 0.55);
  border-radius: var(--r-lg);
  background-color: rgba(72, 12, 16, 0.55);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-soft);
}

.notice__head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-block-end: var(--sp-sm);
}

.notice__head svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: #ff8a8f;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: #ffd7d8;
}

.notice__body {
  color: #f6dedf;
  font-size: 15px;
  line-height: 1.8;
}

.notice__calls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-md);
}

.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  flex: 1 1 150px;
  min-height: 52px;
  padding-inline: var(--sp-lg);
  border-radius: var(--r-md);
  background: #c8102e;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.call-btn:hover {
  background: #e1364e;
}

.call-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.call-btn__num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

/* ---------- forms -------------------------------------------------------- */

.field {
  display: block;
}

.field + .field {
  margin-block-start: var(--sp-lg);
}

.field__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-block-end: var(--sp-sm);
}

.field__req {
  color: var(--gold-300);
  margin-inline-start: 3px;
}

.field__hint {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  margin-block-start: 6px;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(5, 11, 9, 0.6);
  color: var(--text);
  /* 16px keeps iOS Safari from zooming the viewport on focus */
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--t-fast), background var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  color: rgba(244, 239, 228, 0.42);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--hairline-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--gold-300);
  background: rgba(5, 11, 9, 0.82);
  outline: 3px solid rgba(232, 203, 142, 0.35);
  outline-offset: 1px;
}

.textarea {
  min-height: 116px;
  resize: vertical;
  font-family: var(--font-body);
}

.select {
  /* chevron drawn in CSS so the control needs no image request */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-200) 50%),
    linear-gradient(135deg, var(--gold-200) 50%, transparent 50%);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  background-position:
    right calc(var(--sp-lg) + 7px) center,
    right var(--sp-lg) center;
  padding-inline-end: 44px;
}

[dir='rtl'] .select {
  background-position:
    left var(--sp-lg) center,
    left calc(var(--sp-lg) + 7px) center;
  background-image: linear-gradient(315deg, transparent 50%, var(--gold-200) 50%),
    linear-gradient(225deg, var(--gold-200) 50%, transparent 50%);
  padding-inline-end: 44px;
}

.select option {
  background: var(--night-700);
  color: var(--text);
}

/* plate + phone inputs read left-to-right even in an RTL page */
.input--ltr {
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

[dir='rtl'] .input--ltr {
  text-align: right;
}

.field-error {
  display: block;
  margin-block-start: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ff9b9e;
}

.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: #ff9b9e;
}

.field-row {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .field-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-row--plate {
    grid-template-columns: 1fr 96px;
  }
}

/* selectable option cards (problem type) */
.select-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .select-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.select-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  min-height: 72px;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: rgba(5, 11, 9, 0.55);
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.select-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-strong);
}

.select-card[aria-pressed='true'] {
  border-color: var(--gold-300);
  background-image: linear-gradient(
    135deg,
    rgba(232, 203, 142, 0.22),
    rgba(199, 154, 69, 0.07)
  );
  box-shadow: 0 0 0 1px var(--gold-400) inset;
}

.select-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
}

.select-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold-200);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.select-card__text {
  min-width: 0;
}

/* These are spans (a button may not contain block elements in every parser's
   view of "phrasing content"), so the display has to be set explicitly or the
   title and the description run together on one line. */
.select-card__title,
.select-card__desc {
  display: block;
}

.select-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}

.select-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.select-card__tick {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 18px;
  height: 18px;
  opacity: 0;
  stroke: var(--gold-100);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.select-card[aria-pressed='true'] .select-card__tick {
  opacity: 1;
}

/* chips (urgency, emirate) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--sp-lg);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.chip:hover {
  color: var(--text);
  border-color: var(--hairline-strong);
}

.chip[aria-pressed='true'] {
  border-color: var(--gold-300);
  background: rgba(232, 203, 142, 0.16);
  color: var(--gold-100);
}

/* checkbox */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-md);
  min-height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(5, 11, 9, 0.45);
  cursor: pointer;
}

.check input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--gold-300);
  cursor: pointer;
}

.check span {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ---------- stepper ------------------------------------------------------ */

.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: var(--sp-lg);
}

.stepper__bar {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.stepper__bar[data-state='done'],
.stepper__bar[data-state='current'] {
  background-image: linear-gradient(to right, #e8cb8e, #c79a45);
}

.stepper__bar[data-state='current'] {
  opacity: 0.65;
}

.stepper__label {
  font-size: 13px;
  color: var(--text-soft);
  margin-block-end: var(--sp-sm);
}

.step {
  display: none;
}

.step[data-active='true'] {
  display: block;
}

.step__title {
  font-size: clamp(20px, 5.2vw, 26px);
  margin-block-end: 6px;
}

.step__sub {
  color: var(--text-muted);
  font-size: 15px;
  margin-block-end: var(--sp-xl);
}

/* the wizard's action bar sticks to the bottom of the viewport on phones so
   "next" is always in thumb reach */
.form-actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 30;
  display: flex;
  gap: var(--sp-md);
  padding-block: var(--sp-md);
  padding-block-end: max(var(--sp-md), env(safe-area-inset-bottom));
  margin-block-start: var(--sp-xl);
  background-image: linear-gradient(
    to bottom,
    rgba(5, 11, 9, 0),
    rgba(5, 11, 9, 0.86) 38%,
    rgba(5, 11, 9, 1)
  );
}

.form-actions .btn {
  flex: 1;
}

.form-actions .btn--back {
  flex: 0 0 auto;
  min-width: 96px;
}

/* ---------- photos ------------------------------------------------------- */

.photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  width: 100%;
  min-height: 132px;
  padding: var(--sp-xl);
  border-radius: var(--r-lg);
  border: 1px dashed var(--hairline-strong);
  background: rgba(5, 11, 9, 0.45);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}

.photo-drop:hover {
  background: var(--surface-strong);
  border-color: var(--gold-400);
}

.photo-drop svg {
  width: 30px;
  height: 30px;
  stroke: var(--gold-200);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-drop__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-100);
  font-size: 15px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-sm);
  margin-block-start: var(--sp-md);
}

.photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--night-600);
}

.photo-item img,
.photo-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-item__remove {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(5, 11, 9, 0.82);
  color: #ffd7d8;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

/* The visible control is 32px so it does not swallow a 96px thumbnail, but the
   touch target is expanded to 44px with a transparent pseudo-element. */
.photo-item__remove::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.photo-item__remove:hover {
  background: #c8102e;
  color: #fff;
}

.photo-item__badge {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(5, 11, 9, 0.85);
  color: var(--gold-100);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- map ---------------------------------------------------------- */

.map-shell {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--night-600);
}

.map {
  width: 100%;
  height: clamp(240px, 46vh, 380px);
  background: var(--night-600);
}

/* the pin is fixed dead-centre; the user moves the map under it */
.map-pin {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -100%);
  z-index: 500;
  pointer-events: none;
  width: 34px;
  height: 44px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.map-hint {
  position: absolute;
  inset-block-end: var(--sp-sm);
  inset-inline: var(--sp-sm);
  z-index: 500;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-sm);
  background: rgba(5, 11, 9, 0.86);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  pointer-events: none;
}

.map-fallback {
  padding: var(--sp-xl);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Leaflet's own controls, restyled for the dark ground */
.leaflet-container {
  background: var(--night-600);
  font-family: var(--font-body);
}

.leaflet-control-zoom a {
  background: rgba(5, 11, 9, 0.9) !important;
  color: var(--gold-100) !important;
  border-color: var(--hairline) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
}

.leaflet-control-attribution {
  background: rgba(5, 11, 9, 0.78) !important;
  color: var(--text-soft) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--gold-300) !important;
}

/* The OSM raster is a light-theme image and there is no dark tile server
   without an API key, so invert it and rotate the hues back: roads and labels
   come out light on a dark ground, which is the only treatment that sits
   correctly on this palette. Slight desaturation stops the inverted greens
   from reading as magenta. */
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.68);
}

/* ---------- info rows / summary ----------------------------------------- */

.info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-block: var(--sp-md);
  border-block-end: 1px solid var(--hairline);
}

.info-row:last-child {
  border-block-end: 0;
}

.info-row__label {
  color: var(--text-soft);
  font-size: 13px;
  flex-shrink: 0;
}

.info-row__value {
  font-weight: 600;
  font-size: 15px;
  text-align: end;
  overflow-wrap: anywhere;
}

/* ---------- status / timeline ------------------------------------------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 7px var(--sp-lg);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(232, 203, 142, 0.12);
  color: var(--gold-100);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.status-pill::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex-shrink: 0;
}

.status-pill[data-status='completed'] {
  border-color: rgba(0, 132, 61, 0.6);
  background: rgba(0, 132, 61, 0.18);
  color: #7ee0a4;
}

.status-pill[data-status='cancelled'] {
  border-color: rgba(229, 72, 77, 0.55);
  background: rgba(229, 72, 77, 0.14);
  color: #ff9b9e;
}

.ref-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 8vw, 38px);
  letter-spacing: 0.12em;
  color: var(--gold-100);
  direction: ltr;
  display: inline-block;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  position: relative;
  padding-inline-start: 34px;
  padding-block-end: var(--sp-lg);
}

.timeline li::before {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: 7px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--night-600);
  border: 2px solid var(--gold-400);
}

.timeline li[data-done='true']::before {
  background: var(--gold-200);
}

.timeline li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 22px;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
}

.timeline__title {
  font-weight: 600;
  font-size: 15px;
}

.timeline__time {
  font-size: 12.5px;
  color: var(--text-soft);
}

/* ---------- alerts ------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-lg);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

.alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-block-start: 3px;
  stroke: var(--gold-200);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alert--error {
  border-color: rgba(229, 72, 77, 0.5);
  background: rgba(72, 12, 16, 0.42);
  color: #f6dedf;
}

.alert--error svg {
  stroke: #ff9b9e;
}

.alert--success {
  border-color: rgba(0, 132, 61, 0.5);
  background: rgba(0, 60, 28, 0.4);
  color: #d5f2e0;
}

.alert--success svg {
  stroke: #7ee0a4;
}

.alert[hidden] {
  display: none;
}

/* the "preview mode" strip, only shown with ?mock=1 */
.mock-banner {
  padding: var(--sp-sm) var(--gutter);
  background: rgba(245, 165, 36, 0.16);
  border-block-end: 1px solid rgba(245, 165, 36, 0.4);
  color: #ffd79a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ---------- spinner ------------------------------------------------------ */

.spinner {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(26, 18, 6, 0.3);
  border-top-color: var(--on-gold);
  animation: spin 720ms linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- footer ------------------------------------------------------- */

.site-footer {
  margin-block-start: var(--sp-4xl);
  border-block-start: 1px solid var(--hairline);
  background: rgba(5, 11, 9, 0.6);
  padding-block: var(--sp-3xl) var(--sp-2xl);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-2xl);
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer h2 {
  font-size: 14px;
  color: var(--gold-100);
  margin-block-end: var(--sp-md);
  font-weight: 700;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14.5px;
}

.footer-links a:hover {
  color: var(--gold-100);
  text-decoration: underline;
}

.site-footer__legal {
  margin-block-start: var(--sp-2xl);
  padding-block-start: var(--sp-lg);
  border-block-start: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-soft);
}

/* ---------- utilities ---------------------------------------------------- */

.center {
  text-align: center;
}

.hidden,
[hidden] {
  display: none !important;
}

/* Block-start spacing hooks. These exist so no element on the site needs a
   style="" attribute — which is what lets the CSP ship without
   style-src 'unsafe-inline'. */
/* The attribute is doubled so these beat `.field + .field` (0,2,0). */
[data-mt][data-mt='none'] {
  margin-block-start: 0;
}
[data-mt][data-mt='sm'] {
  margin-block-start: var(--sp-sm);
}
[data-mt][data-mt='md'] {
  margin-block-start: var(--sp-md);
}
[data-mt][data-mt='lg'] {
  margin-block-start: var(--sp-lg);
}
[data-mt][data-mt='xl'] {
  margin-block-start: var(--sp-xl);
}

.divider {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin-block: var(--sp-xl);
}

.badge-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* TODO slots left for the legal copy another agent will write */
.todo-slot {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  padding: var(--sp-lg);
  background: rgba(245, 165, 36, 0.07);
  color: var(--text-muted);
  font-size: 14px;
}

.todo-slot__tag {
  display: inline-block;
  margin-block-end: var(--sp-sm);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(245, 165, 36, 0.2);
  color: #ffd79a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}