/* Arabic body face (Tajawal) — loaded site-wide so sub-pages share the
   renovated brand type instead of Cairo. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* Self-hosted Satoshi (Latin) — the deck face, now available on EVERY page
   (not only the .lp home), so the 54 sub-pages match the renovated brand
   instead of falling back to Cormorant/Inter. */
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/satoshi-700.woff2') format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/satoshi-900.woff2') format('woff2'); }

:root {
  color-scheme: light only;

  --ivory: #FAF7F2;
  --warm-white: #FFFCF7;
  --cream: #F5EFE3;
  --champagne: #E8DCC4;
  --champagne-soft: #F1E8D4;
  --gold: #C8A96A;
  --gold-dark: #A88947;
  --gold-deep: #8C6F33;
  --gold-soft: #E5D5AE;
  --gold-tint: #F7EFD9;
  --blush: #E9C9C1;
  --charcoal: #1F1B14;
  --ink: #2A2520;
  --text: #2A2520;
  --text-muted: #6B655C;
  --text-subtle: #6E6456;   /* darkened to meet WCAG AA (4.5:1) on light bg */
  --border: #EAE2D2;
  --border-soft: #F1ECE0;
  --quiet-gray: #8A8780;

  /* Brand deck faces (match the renovated home). --serif kept as a name but
     now resolves to Satoshi so headings are consistent site-wide. */
  --serif: 'Satoshi', 'Cormorant Garamond', 'Times New Roman', serif;
  --arabic: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --sans: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
/* Lock page from any horizontal panning / dragging / sideways drift on
   every device. overflow-x: clip is stricter than hidden — it also
   prevents programmatic horizontal scroll, so JS can't accidentally
   pan the page either. Falls back to overflow-x: hidden on older
   browsers via the second declaration. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--arabic);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
  font-family: var(--arabic);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold-dark);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

em.accent-word {
  font-style: normal;
  position: relative;
  color: var(--gold-dark);
  white-space: nowrap;
}

.underline-draw {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: -0.05em;
  height: 0.45em;
  background: linear-gradient(transparent 60%, rgba(200, 169, 106, 0.35) 60%);
  transform: scaleX(0);
  transform-origin: right center;
  animation: draw 0.9s var(--ease-out) 1.2s forwards;
}
@keyframes draw {
  to { transform: scaleX(1); }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-family: var(--arabic);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn-lg { padding: 1rem 1.8rem; font-size: 1rem; }
.btn-primary {
  background: var(--ink);
  color: var(--ivory);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  z-index: 0;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(168, 137, 71, 0.55);
}
.btn-primary:hover::before { opacity: 1; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: var(--gold-tint);
}
.btn-link {
  padding: 0.6rem 0.4rem;
  background: none;
  color: var(--ink);
  font-weight: 500;
}
.btn-link:hover { color: var(--gold-dark); }
.btn.block { display: flex; justify-content: center; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.7);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: all 0.3s var(--ease);
}
.site-header.scrolled {
  background: rgba(250, 247, 242, 0.92);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
/* The logo PNG is now a CLEAN transparent gold calendar+heart icon
   (no baked-in container). The cream rounded-square wrapper is built
   here in CSS, matching the official Evenza brand lockup. Pure CSS =
   the same icon asset can be reused without a container in other
   contexts. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #FBF6E9 0%, #F1E8D0 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;
  padding: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 10px -4px rgba(168, 137, 71, 0.3);
}
.brand-mark img,
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.brand-word {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1;
}

/* Slightly tighter on small screens so the lockup + nav-bar fit. */
@media (max-width: 480px) {
  .brand { gap: 0.55rem; }
  .brand-mark { width: 40px; height: 40px; padding: 5px; border-radius: 9px; }
  .brand-word { font-size: 1.55rem; }
  /* Mobile hero padding cap — keeps the primary CTA above the fold on a
     ~700px-tall mobile viewport. Default padding clamp(4rem, 9vw, 8rem)
     was eating the engagement window on shorter phones. */
  .hero { padding: 2.5rem 0 1.5rem; }
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
}
.primary-nav a {
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
}
.primary-nav a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s var(--ease);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.lang-toggle {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  transition: all 0.25s var(--ease);
  cursor: pointer;
}
.lang-toggle:hover { background: var(--gold-tint); }
.lang-toggle .lang-ar,
.lang-toggle .lang-en {
  transition: color 0.25s var(--ease), font-weight 0.25s var(--ease);
}
.lang-toggle .lang-divider { opacity: 0.4; margin: 0 0.15rem; }

html[lang="ar"] .lang-ar { color: var(--ink); font-weight: 700; }
html[lang="ar"] .lang-en { color: var(--text-muted); font-style: italic; font-weight: 400; }
html[lang="en"] .lang-en { color: var(--ink); font-weight: 700; font-style: normal; }
html[lang="en"] .lang-ar { color: var(--text-muted); font-weight: 400; }

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.menu-btn span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
.menu-btn span:nth-child(1) { width: 22px; margin-inline-start: auto; margin-inline-end: 8px; }
.menu-btn span:nth-child(2) { width: 22px; margin-inline-start: auto; margin-inline-end: 8px; }
.menu-btn span:nth-child(3) { width: 14px; margin-inline-start: auto; margin-inline-end: 8px; }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem var(--gutter) 1.5rem;
  background: var(--ivory);
  border-top: 1px solid var(--border);
}
.mobile-menu a {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 500;
}
.mobile-menu a.btn { border: 0; margin-top: 0.6rem; }
.mobile-menu[hidden] { display: none; }
.mobile-menu.open { display: flex; }

.hero {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--cream) 0%, transparent 70%),
    radial-gradient(circle at 85% 30%, rgba(232, 220, 196, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 15% 75%, rgba(233, 201, 193, 0.25) 0%, transparent 50%),
    var(--ivory);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
  text-align: center;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 1rem 0 1.6rem;
  color: var(--ink);
}
.hero-title .line {
  display: block;
}
.hero-title em.accent-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-dark);
}

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 2.4rem;
}
.hero-sub-en {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text-subtle);
  font-size: 0.95rem;
  margin-top: 0.4rem;
  direction: ltr;
}

.hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.0rem;
}

/* WhatsApp secondary CTA — currently UNUSED in the live hero (no active
   number). Kept for future re-enable: when EVENZA_WHATSAPP_NUMBER (meta)
   is configured, restore the .btn-whatsapp markup in the hero-cta block.
   See git history at commit 89fee98 for the prior markup. */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  border-radius: 14px;
  transition: background 0.18s var(--ease, ease-out), transform 0.12s var(--ease, ease-out), box-shadow 0.18s var(--ease, ease-out);
  box-shadow: 0 6px 18px -10px rgba(37, 211, 102, 0.55);
  min-height: 44px;
}
.btn-whatsapp:hover, .btn-whatsapp:focus-visible {
  background: #1EBE5D;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(37, 211, 102, 0.65);
}
.btn-whatsapp svg { flex-shrink: 0; }

/* Trust line under the primary CTA — small, premium, reassuring. */
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem auto 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding: 0 0.5rem;
}
.hero-trust svg { color: var(--gold-dark); flex-shrink: 0; }
.hero-trust span:empty { display: none; }
@media (max-width: 480px) {
  .hero-cta { gap: 0.6rem; margin-bottom: 0.65rem; }
  .hero-cta .btn-lg { padding: 0.85rem 1.4rem !important; font-size: 0.98rem !important; width: 100%; }
  .hero-trust { font-size: 0.78rem; margin-bottom: 0.4rem; }
}

/* ─── Hero audience CTA blocks ─────────────────────────────────────────
   Two clearly separated, audience-labeled cards under the primary CTA:
   one for vendor acquisition (prominent), one for customers who want a
   manual form shortcut (subdued). The audience labels at the top of
   each block tell the visitor immediately which one is meant for them
   — replacing the prior two-similar-looking-links cluster that bled
   the audiences into each other. */
.btn-ghost-strong {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost-strong:hover, .btn-ghost-strong:focus-visible {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(42, 37, 32, 0.4);
}

.audience-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 680px;
  margin: 1.75rem auto 2.5rem;
  text-align: start;
}

.audience-block {
  position: relative;
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.audience-block-vendor {
  background: linear-gradient(180deg, var(--gold-tint) 0%, var(--ivory) 70%);
  border-color: var(--gold-soft);
  padding: 1.75rem 1.75rem 1.6rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 30px -18px rgba(168, 137, 71, 0.4);
}
.audience-block-vendor::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  border-radius: 18px 18px 0 0;
  opacity: 0.85;
}
.audience-block-customer-form {
  background: var(--ivory);
  border-color: var(--border);
}

.audience-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.audience-label svg { flex-shrink: 0; }
.audience-label-vendor {
  background: var(--gold-dark);
  color: var(--ivory);
}
.audience-label-customer {
  background: var(--ink);
  color: var(--ivory);
}

.audience-block-heading {
  font-family: var(--sans);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0.15rem 0 0;
}
.audience-block-heading-sm {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  font-weight: 600;
}

.audience-block-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.audience-block-cta {
  align-self: stretch;
  justify-content: center;
  margin-top: 0.35rem;
}

.audience-block-support {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-subtle);
  margin: 0;
  font-style: italic;
}

@media (min-width: 720px) {
  .audience-blocks { gap: 1.5rem; }
  .audience-block { padding: 1.75rem 1.85rem 1.65rem; }
  .audience-block-vendor { padding: 2rem 1.85rem 1.8rem; }
}

@media (max-width: 480px) {
  .audience-blocks { margin: 1.25rem auto 1.75rem; gap: 1rem; }
  .audience-block { padding: 1.25rem 1.15rem 1.2rem; border-radius: 14px; }
  .audience-block-vendor { padding: 1.45rem 1.15rem 1.3rem; }
  .audience-block-heading { font-size: 1.08rem; }
  .audience-block-heading-sm { font-size: 1rem; }
  .audience-block-body { font-size: 0.9rem; }
  .audience-block-support { font-size: 0.76rem; }
  .audience-label { font-size: 0.68rem; padding: 0.28rem 0.6rem; }
}

.hero-tagline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.85rem;
  margin: 0 auto 3rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  max-width: 620px;
  padding: 0 0.5rem;
}
.hero-tagline .dot {
  color: var(--gold);
  font-weight: 700;
  opacity: 0.85;
}

.hero-stats {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: 1.1rem 2rem;
  background: rgba(255, 252, 247, 0.92);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px -16px rgba(140, 111, 51, 0.35);
}
.stat-value {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.stat-divider {
  width: 1px;
  height: 30px;
  background: var(--border);
}

.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* LCP fix: above-the-fold hero must be visible immediately, not gated by JS
   reveal animation. The IntersectionObserver in main.js adds `.in` after delay,
   but waiting for that puts the CTA below the 10-second engagement threshold
   on slow phones. Override for the whole hero so first paint = final paint.
   Below-fold reveal animations still work as designed. */
.hero-title .reveal,
.hero-sub.reveal, .hero-sub .reveal,
.hero-cta.reveal, .hero-cta .reveal,
.hero-trust.reveal, .hero-trust .reveal,
.hero-tagline.reveal, .hero-tagline .reveal,
.audience-blocks.reveal, .audience-blocks .reveal,
.hero-stats.reveal, .hero-stats .reveal,
.guide-title.reveal,
.guide-title .reveal {
  opacity: 1;
  transform: none;
}

/* No-JS fallback: if JS fails or is slow, ALL reveals must show */
.no-js .reveal { opacity: 1; transform: none; }

.band {
  background: var(--warm-white);
  border-block: 1px solid var(--border);
  padding: 1.5rem 0;
}
.band-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 1.4rem 2rem;
}
.band-item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
.band-item svg { color: var(--gold-dark); flex-shrink: 0; }

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.section-head h2 em.accent-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.section-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

.categories {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.cat-card {
  position: relative;
  grid-column: span 4;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  text-decoration: none;
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.45);
}
.cat-feature {
  grid-column: span 8;
  grid-row: span 2;
  min-height: 580px;
  padding: 2.5rem;
}
.cat-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.2s var(--ease-out);
}
.cat-card:hover .cat-image { transform: scale(1.06); }
.cat-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 14, 6, 0) 30%, rgba(20, 14, 6, 0.55) 70%, rgba(20, 14, 6, 0.85) 100%),
    linear-gradient(0deg, rgba(20, 14, 6, 0.08), rgba(20, 14, 6, 0.08));
  z-index: -1;
  transition: opacity 0.4s var(--ease);
}
.cat-feature .cat-overlay {
  background:
    linear-gradient(180deg, rgba(20, 14, 6, 0) 35%, rgba(20, 14, 6, 0.6) 75%, rgba(20, 14, 6, 0.9) 100%),
    linear-gradient(0deg, rgba(20, 14, 6, 0.1), rgba(20, 14, 6, 0.1));
}

.cat-body { position: relative; z-index: 1; }
.cat-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.35rem 0.85rem;
  background: var(--gold);
  border-radius: 999px;
  color: var(--ink);
  margin-bottom: 1rem;
  font-weight: 700;
}
.cat-card h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  margin-bottom: 0.6rem;
  color: var(--ivory);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.cat-feature h3 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}
.cat-card p {
  font-size: 0.98rem;
  color: rgba(250, 247, 242, 0.9);
  line-height: 1.7;
  margin: 0 0 1.2rem;
  max-width: 38ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gold-soft);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease), color 0.25s var(--ease);
}
.cat-card:hover .cat-cta { gap: 0.9rem; color: var(--ivory); }

.how {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--warm-white) 100%);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: step;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 38px;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  z-index: 0;
}
.step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.step-num {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--warm-white);
  border: 1px solid var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-dark);
  position: relative;
}
.step-num::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed var(--gold-soft);
  opacity: 0.6;
}
.step h3 {
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}
.step p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 32ch;
  margin: 0 auto;
}

.cities {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(ellipse at top, rgba(232, 220, 196, 0.3), transparent 70%),
    var(--ivory);
}
/* Coverage cities — continuous horizontal marquee.
   The track contains the list TWICE back-to-back so when the
   first copy scrolls off screen, the second is already in
   position — looks seamless. */
.city-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Soft fade on both edges so cities appear/disappear gracefully */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.city-marquee-track {
  display: flex;
  width: max-content;
  animation: city-marquee-scroll 50s linear infinite;
}
.city-marquee:hover .city-marquee-track {
  animation-play-state: paused;
}
.city-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2.4rem;
  padding-inline-end: 2.4rem;
}
.city-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text);
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}
/* City separator dot REMOVED 2026-06-05 (founder request). Was a 6px gold
   ::before bullet on every .city-list li. Cities now render as clean names
   with no dots between them. Paired with landing.css (the '·' ::after also
   removed). Cache-bust bumped on index.html + en/index.html. */

@keyframes city-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* RTL: scroll in the opposite direction so the marquee reads
   right-to-left, matching Arabic reading flow */
html[dir="rtl"] .city-marquee-track {
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .city-marquee-track {
    animation: none;
  }
  .city-marquee {
    overflow-x: auto;
  }
  .city-marquee::-webkit-scrollbar { height: 6px; }
}

@media (max-width: 640px) {
  .city-list { gap: 1.6rem; padding-inline-end: 1.6rem; }
  .city-list li { font-size: 0.96rem; }
  .city-marquee-track { animation-duration: 35s; }
}

.vendor-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--ivory);
}
.vendor-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 220, 196, 0.7) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(233, 201, 193, 0.4) 0%, transparent 55%),
    linear-gradient(135deg, var(--warm-white) 0%, var(--cream) 100%);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  isolation: isolate;
}
.vendor-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Decorative spinning gold rings used to dominate the right half
   of the card and pull the eye away from the content. Tucked into
   the far corner now, much smaller, low-opacity, no animation —
   purely a subtle accent. Hidden on tablets/mobile where space
   doesn't allow it to be subtle. */
.vendor-card-art {
  position: absolute;
  inset-inline-end: -10%;
  inset-block-start: -10%;
  width: clamp(180px, 18vw, 240px);
  color: var(--gold);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.vendor-card-art svg {
  width: 100%;
  height: auto;
  animation: none;
}
@media (max-width: 900px) {
  .vendor-card-art { display: none; }
}

.vendor-card-body {
  position: relative;
  z-index: 1;
  /* No max-width — let the content use the full card width so
     form fields aren't cramped on one side. The card already has
     its own padding for breathing room. */
  width: 100%;
}
.vendor-card-body h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 1.2rem;
}
.vendor-card-body h2 em.accent-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.vendor-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  color: var(--text);
  line-height: 1.8;
  margin: 0 0 2rem;
  max-width: 56ch;
}
/* Audience-clarity line under the vendor section heading. Tells visitors
   who arrive from the hero "List Your Business on Evenza" CTA exactly
   who this form is meant for — pairs with the audience pill in the
   hero block to make the customer-vs-vendor distinction unmistakable. */
.vendor-audience-line {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--text-muted);
  line-height: 1.6;
  margin: -0.4rem 0 1.4rem;
  max-width: 60ch;
  font-style: italic;
}
.vendor-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1.6rem;
  margin: 0 0 2.4rem;
  list-style: none;
  padding: 0;
}
.vendor-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.6;
}
.vendor-perks li svg {
  flex-shrink: 0;
  color: var(--gold-dark);
  margin-top: 0.2rem;
}
.vendor-perks strong {
  font-weight: 700;
  color: var(--ink);
}
.vendor-scarcity {
  position: relative;
  background: linear-gradient(135deg, rgba(196, 156, 92, 0.08), rgba(196, 156, 92, 0.02));
  border: 1px solid rgba(196, 156, 92, 0.35);
  border-radius: 14px;
  padding: 1.15rem 1.3rem 1.2rem;
  margin: 0 0 2rem;
  max-width: 56ch;
}
.vendor-scarcity-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(196, 156, 92, 0.18);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.vendor-scarcity-headline {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.vendor-scarcity-headline strong {
  font-weight: 700;
}
.vendor-scarcity-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.vendor-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.4rem;
}
.vendor-meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.vendor-form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.6rem;
  max-width: 720px;
}
.vf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.vf-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.92rem;
}
.vf-label {
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.vf-label em {
  font-style: normal;
  color: var(--gold-dark);
  font-weight: 700;
}
.vendor-form input,
.vendor-form select {
  font-family: var(--arabic);
  /* 16px (1rem) is the iOS Safari threshold below which focusing an input
     auto-zooms the page. Anything <16px on a form field triggers it. */
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--warm-white);
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.vendor-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-dark) 50%),
    linear-gradient(135deg, var(--gold-dark) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 2.2rem;
}
[dir="rtl"] .vendor-form select {
  background-position:
    18px 50%,
    13px 50%;
  padding-inline-end: 1rem;
  padding-inline-start: 2.2rem;
}
.vendor-form input::placeholder { color: var(--text-subtle); }
.vendor-form input:hover,
.vendor-form select:hover { border-color: var(--gold-soft); }
.vendor-form input:focus,
.vendor-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18);
  background: var(--warm-white);
}
.vendor-form input:invalid:not(:placeholder-shown) {
  border-color: #C97070;
}
.vf-hint {
  font-size: 0.78rem;
  color: var(--text-subtle);
}
.vf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}
.vf-submit { min-width: 200px; }
.vf-submit-loading svg { animation: spin 0.9s linear infinite; }
.vf-submit[data-loading="true"] .vf-submit-label,
.vf-submit[data-loading="true"] .vf-submit-arrow { display: none; }
.vf-submit[data-loading="true"] .vf-submit-loading {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
}
.vf-error {
  font-size: 0.92rem;
  color: #B7484A;
  margin: 0.6rem 0 0;
}

.vendor-success {
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-tint) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 1.6rem auto 0;          /* centered horizontally instead of left-anchored */
  max-width: 720px;
  width: 100%;
  animation: vsuccess 0.5s var(--ease-out);
}
/* CRITICAL: the `hidden` HTML attribute applies display:none via the user-agent
   stylesheet. Author CSS that sets display:flex/grid/etc on the same element
   *overrides* the user-agent rule, leaving the element visible even when
   `hidden` is present. This was making the .vendor-success card show alongside
   the form. The rule below ensures [hidden] always wins for these states. */
[hidden] { display: none !important; }
.vendor-success svg { color: var(--gold-dark); }
.vendor-success h3 {
  font-size: 1.6rem;
  margin: 0;
}
.vendor-success p {
  color: var(--text-muted);
  max-width: 46ch;
  line-height: 1.75;
  margin: 0;
}
@keyframes vsuccess {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .vf-row { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 720px) {
  .vendor-card-art { display: none; }
  .vendor-perks { grid-template-columns: 1fr; }
}

.stat-value {
  transition: color 0.3s var(--ease);
}
.stat.in-view .stat-value {
  color: var(--gold-dark);
}

/* FAQ accordion — bulletproof. Single source of truth. The rules
   below replaced TWO conflicting earlier blocks that fought each
   other in the cascade and left the summary text invisible on some
   pages. !important is used only on visibility-critical properties
   (display, color, opacity, visibility) so this survives any future
   accidental override. */
.faq-list {
  max-width: 820px;
  margin: 2rem auto 0;
  display: flex !important;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
}
.faq-item {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.faq-item[open] {
  border-color: var(--gold-soft);
  box-shadow: 0 8px 24px -14px rgba(168, 137, 71, 0.3);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.5rem;
  font-family: var(--arabic);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.25s var(--ease);
  min-height: 3rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary > * {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.faq-item > summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-dark);
  transition: transform 0.3s var(--ease), content 0s;
  width: auto;
  height: auto;
  border: 0;
}
.faq-item[open] > summary::after {
  content: '−';
  transform: rotate(0deg);
}
.faq-item > summary:hover { color: var(--gold-dark) !important; }
.faq-item > p,
.faq-item details > p {
  padding: 0 1.5rem 1.4rem;
  margin: 0;
  color: var(--text-muted) !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1.85;
  font-size: 0.98rem;
}
@media (max-width: 768px) {
  .faq-item > summary { padding: 1rem 1.15rem; font-size: 0.98rem; }
  .faq-item > p { padding: 0 1.15rem 1.15rem; font-size: 0.95rem; }
}

.app-cta {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: linear-gradient(135deg, var(--ink) 0%, #3A3026 50%, var(--gold-deep) 130%);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.app-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(200, 169, 106, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(233, 201, 193, 0.08) 0%, transparent 40%);
  pointer-events: none;
}
.app-cta-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 4rem;
  position: relative;
}
.app-cta-text .eyebrow { color: var(--gold-soft); }
.app-cta-text .eyebrow::before { background: var(--gold-soft); }
.app-cta-text h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  color: var(--ivory);
  margin-bottom: 1.2rem;
}
.app-cta-text h2 em.accent-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-soft);
}
.app-cta-text p {
  color: rgba(250, 247, 242, 0.75);
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 50ch;
  margin: 0 0 2rem;
}
.app-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.app-cta .btn-primary {
  background: var(--gold);
  color: var(--ink);
}
.app-cta .btn-primary::before {
  background: linear-gradient(135deg, var(--gold-soft), #FFFFFF);
}
.app-cta .btn-ghost {
  color: var(--ivory);
  border-color: rgba(250, 247, 242, 0.3);
}
.app-cta .btn-ghost:hover {
  background: rgba(250, 247, 242, 0.08);
  border-color: var(--gold-soft);
  color: var(--gold-soft);
}

.phone-mock { display: flex; justify-content: center; }
.phone {
  width: 280px;
  height: 560px;
  border-radius: 44px;
  background: linear-gradient(180deg, #3A3026 0%, #2A2520 100%);
  padding: 12px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(200, 169, 106, 0.2);
  position: relative;
  transform: rotate(-4deg);
  transition: transform 0.6s var(--ease);
}
.phone:hover { transform: rotate(0deg); }
.phone-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  display: block;
}

.site-footer {
  background: var(--warm-white);
  border-top: 1px solid var(--border);
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 3rem 2rem;
  margin-bottom: 3rem;
}
.footer-brand p {
  color: var(--text-muted);
  margin: 1rem 0 0;
  max-width: 30ch;
  line-height: 1.7;
}
.brand-footer { margin-bottom: 0.5rem; }
.footer-col h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* Darker than --gold-dark (#A88947 = 3.23:1) to meet WCAG AA at 12.48px */
  color: #7A5F2D; /* 5.86:1 on #FFFCF7 */
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.footer-col a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--text);
  transition: color 0.25s var(--ease);
}
.footer-col a:hover { color: var(--gold-dark); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.88rem;
  color: var(--text-muted);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: var(--text-muted); }
.footer-legal a:hover { color: var(--gold-dark); }

@media (max-width: 1024px) {
  .cat-feature { grid-column: span 12; min-height: 400px; }
  .cat-card { grid-column: span 6; }
  .app-cta-inner { grid-template-columns: 1fr; gap: 3rem; }
  .phone-mock { order: -1; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .primary-nav, .header-actions .btn-ghost { display: none; }
  /* Keep the language toggle visible on mobile — directly accessible
     in the header instead of buried in the hamburger menu. Compact form. */
  .header-actions .lang-toggle {
    display: inline-flex;
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    min-height: 44px;
  }
  .mobile-menu .lang-toggle { display: inline-flex; align-self: flex-start; min-height: 44px; padding: 0.5rem 0.85rem; }
  .menu-btn { display: flex; }
  .mobile-menu { display: none; }
  .mobile-menu.open { display: flex; }
  /* Pad hero clear of the sticky header (~70px) so the eyebrow +
     first headline line don't slide behind the blurred header on
     scroll. Previously 3rem (48px) clipped the title. */
  .hero { padding-top: 5.5rem; }
  /* Stats card: vertical stack on mobile so all 3 stats are visible
     and the +500 line gets full readable width. flex-wrap was creating
     awkward 2+1 layouts where the third stat dropped under one column. */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 1.1rem 1.4rem;
    width: min(100%, 360px);
    text-align: center;
    background: rgba(255, 252, 247, 0.96);
  }
  .hero-stats .stat { padding: 0.35rem 0; }
  .stat-divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }
  .cat-grid { gap: 1rem; }
  .cat-card { grid-column: span 12; min-height: 220px; padding: 1.6rem; }
  .cat-feature { min-height: 320px; }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps::before { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-scroll { display: none; }
}

/* ========== Guides Section (homepage) ========== */
.guides-section {
  padding: 6rem 0;
  background: var(--ivory);
}

.guides-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}

.guide-card {
  display: block;
  padding: 2rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--gold-tint) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.guide-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(200, 169, 106, 0.15);
  transform: translateY(-3px);
}

.guide-card-feature {
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-tint) 100%);
  padding: 2.5rem;
}

.guide-card-tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: var(--gold);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  position: relative;
}
.guide-card-tag-free {
  background: linear-gradient(135deg, #2f7a4d 0%, #4a9b6c 100%);
  color: #ffffff;
  letter-spacing: 0.04em;
}

.guide-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  color: var(--ink);
  position: relative;
}

.guide-card-feature h3 {
  font-size: 1.85rem;
}

.guide-card p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1.5rem;
  position: relative;
}

.guide-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  position: relative;
}

.guide-card-time {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.guide-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--gold-dark);
  font-weight: 600;
  position: relative;
}

.guide-card:hover .guide-card-cta { gap: 0.6rem; }

@media (max-width: 968px) {
  .guides-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .guide-card-feature h3 { font-size: 1.5rem; }
}

@media (max-width: 768px) {
  .guides-section { padding: 3.5rem 0; }
  .guide-card { padding: 1.5rem; }
  .guide-card-feature { padding: 1.75rem; }
  .guide-card h3 { font-size: 1.25rem; }
  .guide-card-feature h3 { font-size: 1.5rem; }
}

/* ========== City Tiles (category hub pages) ========== */
.city-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.city-tile {
  display: block;
  padding: 1.75rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.city-tile::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--gold-tint) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.city-tile:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 24px rgba(200, 169, 106, 0.12);
  transform: translateY(-2px);
}

.city-tile h3 {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--ink);
  position: relative;
}

.city-tile-meta {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  position: relative;
}

.city-tile-price {
  font-size: 0.95rem;
  color: var(--gold-dark);
  font-weight: 600;
  margin: 0 0 1rem;
  position: relative;
}

.city-tile-cta {
  font-size: 0.92rem;
  color: var(--gold-dark);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.city-tile:hover .city-tile-cta { gap: 0.6rem; }

/* ========== Vendor Cards (programmatic city-category pages) ========== */
.vendor-card-result {
  margin: 1rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.vendor-card-result:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(200, 169, 106, 0.1);
}

.vendor-card-header { margin-bottom: 0.5rem; }

.vendor-card-header h3 {
  font-family: var(--arabic);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.25rem;
}

.vendor-card-en {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  font-family: var(--sans);
}

.vendor-card-district {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0.75rem;
}

.vendor-card-description {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1rem;
}

.vendor-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  background: var(--cream);
  border-radius: 8px;
  font-size: 0.92rem;
}

.vendor-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
}

.vendor-meta-item.vendor-price {
  color: var(--gold-dark);
  font-weight: 600;
}

.vendor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  border-radius: 8px;
}

.vendor-empty-state { margin: 2rem 0; }

.vendor-curation-card {
  margin: 2rem 0;
  padding: 3rem 2.5rem;
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-tint) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.vendor-curation-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 106, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.vendor-curation-card .curation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--ivory);
  color: var(--gold-dark);
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(200, 169, 106, 0.15);
}

.vendor-curation-card h3 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1rem;
  position: relative;
}

.vendor-curation-card p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
  max-width: 580px;
  margin: 0 auto 1.75rem;
  position: relative;
}

.vendor-curation-card .curation-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

@media (max-width: 768px) {
  .vendor-curation-card { padding: 2rem 1.5rem; }
  .vendor-curation-card h3 { font-size: 1.5rem; }
  .vendor-curation-card p { font-size: 0.98rem; }
  .vendor-curation-card .curation-actions { flex-direction: column; }
  .vendor-curation-card .curation-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
  .vendor-card-result { padding: 1.15rem 1.25rem; }
  .vendor-card-meta { flex-direction: column; gap: 0.5rem; }
  .vendor-card-actions { gap: 0.4rem; }
  .btn-sm { flex: 1; text-align: center; }
}

/* ========== Guide Pages (articles) ========== */
.breadcrumb {
  padding: 1.5rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li:not(:last-child)::after {
  content: "›";
  color: var(--gold-dark);
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.breadcrumb a { color: var(--text-muted); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.guide-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--border);
}

.guide-hero .eyebrow { margin-bottom: 1rem; }

.guide-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

.guide-meta-item { display: flex; align-items: center; gap: 0.5rem; }
.guide-meta-item svg { color: var(--gold-dark); }

.last-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: var(--gold-tint);
  /* --gold-dark (#A88947) on --gold-tint (#F7EFD9) is 2.88:1 — fails WCAG AA.
     #6B4E20 hits ~5.5:1 on the same background. */
  color: #6B4E20;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.tldr-box {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  background: var(--cream);
  border-right: 4px solid var(--gold);
  border-radius: 12px;
}

.tldr-box h3 {
  font-family: var(--arabic);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tldr-box p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
}

.methodology-box {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--ivory);
  border: 1px solid var(--gold);
  border-radius: 12px;
  position: relative;
}

.methodology-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  color: var(--gold-dark);
}

.methodology-header strong {
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--arabic);
}

.methodology-box p {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
}

.methodology-box p:last-child { margin-bottom: 0; }

.methodology-box .methodology-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  padding-top: 0.85rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.methodology-box .methodology-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 768px) {
  .methodology-box { padding: 1.25rem; }
  .methodology-box .methodology-meta { flex-direction: column; gap: 0.5rem; }
}

.toc {
  margin: 3rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.toc h3 {
  font-family: var(--arabic);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.toc ol {
  margin: 0;
  padding: 0 1rem 0 0;
  list-style: decimal;
  color: var(--text);
}

.toc li {
  padding: 0.35rem 0;
  font-size: 0.98rem;
}

.toc a { color: var(--ink); transition: color 0.2s ease; }
.toc a:hover { color: var(--gold-dark); }

.guide-article {
  padding: 2.5rem 0 5rem;
  max-width: 820px;
  margin: 0 auto;
}

/* Top-level topic break: H2 starts a new "section" — give it room */
.guide-article h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 4.5rem 0 1.5rem;
  font-weight: 500;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}

/* First H2 in the article shouldn't have a divider above it */
.guide-article > h2:first-of-type,
.guide-article > *:first-child + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 2.5rem;
}

.guide-article h3 {
  font-family: var(--arabic);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 2.75rem 0 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.guide-article p {
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0 0 1.6rem;
  color: var(--text);
}

.guide-article p strong { color: var(--ink); font-weight: 700; }

.guide-article ul, .guide-article ol {
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0.5rem 0 2rem;
  padding-right: 1.5rem;
  color: var(--text);
}

.guide-article li {
  padding: 0.4rem 0;
  margin-bottom: 0.25rem;
}

/* Tables and callouts get extra breathing room around them */
.guide-article .table-scroll { margin: 2rem 0 2.75rem; }
.guide-article .callout { margin: 2rem 0 2.5rem; }
.guide-article .methodology-box { margin: 2rem 0 3rem; }

/* Wrapper that scrolls horizontally on narrow viewports */
.table-scroll {
  margin: 1.5rem 0 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ivory);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  font-size: 0.98rem;
}

/* Ensure parent article never lets table-scroll bust the page width */
.guide-article { overflow-x: hidden; }

.cost-table th {
  background: var(--gold-tint);
  color: var(--gold-dark);
  font-weight: 700;
  padding: 1rem 1.25rem;
  text-align: right;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.cost-table td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.cost-table tr:last-child td { border-bottom: 0; }
.cost-table tr:hover td { background: var(--cream); }
.cost-table td strong { color: var(--ink); display: block; margin-bottom: 0.25rem; }
.cost-table .price-cell { font-weight: 700; color: var(--gold-dark); white-space: nowrap; }

.callout {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--cream);
  border-radius: 12px;
  border-right: 3px solid var(--gold);
}

.callout strong { display: block; margin-bottom: 0.5rem; color: var(--ink); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.callout p:last-child { margin-bottom: 0; }

.guide-cta {
  margin: 4rem 0 0;
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, var(--cream), var(--gold-tint));
  border-radius: 16px;
}

.guide-cta h3 {
  font-family: var(--serif);
  font-size: 2rem;
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-weight: 500;
}

.guide-cta p { margin: 0 0 1.5rem; color: var(--text); }

.related-guides {
  margin: 4rem 0 0;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.related-guides h3 {
  font-family: var(--arabic);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.related-list a {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  font-weight: 500;
  transition: all 0.2s ease;
}

.related-list a:hover {
  border-color: var(--gold);
  background: var(--cream);
  color: var(--gold-dark);
}

@media (max-width: 768px) {
  .guide-hero { padding: 2rem 0 1rem; }
  .guide-meta { gap: 0.75rem; flex-direction: column; align-items: flex-start; }
  .tldr-box, .callout { padding: 1.25rem; }
  .toc { padding: 1.25rem; }
  .cost-table { font-size: 0.92rem; min-width: 560px; }
  .cost-table th, .cost-table td { padding: 0.75rem 0.85rem; }
  .cost-table td { word-break: normal; }
  /* Visual hint that the table can be scrolled */
  .table-scroll {
    background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, transparent, transparent);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%;
    background-attachment: local, local;
  }
  .guide-cta { padding: 2rem 1.25rem; }
  .guide-cta h3 { font-size: 1.5rem; }
}

/* ========== FAQ Section wrapper (only) ==========
   The .faq-list / .faq-item / summary rules are defined ONCE
   higher up in this file (search for "FAQ accordion — bulletproof").
   The previous duplicate block here was causing cascade conflicts
   that made summary text invisible on some pages. */
.faq {
  padding: 6rem 0;
  background: var(--ivory);
}
@media (max-width: 768px) {
  .faq { padding: 3.5rem 0; }
}

/* ========== Sticky Mobile Bottom CTA ========== */
/* Conversion-focused mobile app CTA. Hidden on initial paint to avoid CLS
   and to keep the hero clean — slides up after the user scrolls past 200px
   (toggled by `body.sticky-cta-visible` from main.js). Hidden on desktop
   (sticky header already serves that purpose). */
.sticky-mobile-cta { display: none; }

@media (max-width: 768px) {
  .sticky-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(250, 247, 242, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    align-items: center;
    gap: 0.75rem;
    min-height: 64px;
    /* HIDDEN by default — JS toggles body.sticky-cta-visible past 200px scroll */
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease-out;
  }
  body.sticky-cta-visible .sticky-mobile-cta {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .sticky-mobile-cta .sticky-lead {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex: 0 1 auto;
    line-height: 1.3;
  }
  .sticky-mobile-cta .btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    font-size: 0.98rem;
    padding: 0.85rem 1.4rem;
    min-height: 44px;
  }
  /* Push body content above the sticky bar so nothing is hidden */
  body { padding-bottom: 76px; }
}

/* Respect reduced-motion: keep the toggle, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .sticky-mobile-cta { transition: none; }
}

/* ========== Quick Action Box (under H1 on long pages) ========== */
.quick-action-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-tint) 100%);
  border: 1px solid var(--gold);
  border-radius: 14px;
  position: relative;
}

.quick-action-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  border-radius: 12px;
  color: var(--gold-dark);
  box-shadow: 0 2px 6px rgba(200, 169, 106, 0.2);
}

.quick-action-text { flex: 1; min-width: 0; }
.quick-action-text strong {
  display: block;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.quick-action-text span {
  font-size: 0.92rem;
  color: var(--text-muted);
  display: block;
  line-height: 1.5;
}

.quick-action-cta { flex-shrink: 0; }

@media (max-width: 600px) {
  .quick-action-box {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
  }
  .quick-action-cta { width: 100%; }
  .quick-action-cta .btn { width: 100%; justify-content: center; }
}

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

/* ================================================================
   Reviews / Testimonials — magazine layout with featured card,
   avatar circles, decorative quote marks. Bulletproof: every
   layout rule has high specificity to survive cache/CSS-load races.
   ================================================================ */
section.reviews {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 220, 196, 0.5) 0%, transparent 65%),
    linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  position: relative;
  overflow: hidden;
}

/* Carousel viewport — clips overflowing cards, fades the edges */
section.reviews .review-carousel {
  position: relative;
  margin-top: 2.5rem;
}

section.reviews .review-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex !important;
  flex-direction: row;
  gap: 1.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bleed the carousel slightly past the container so cards can
     start flush at the section padding inset, with breathing room. */
  scroll-padding-inline: 0;
}
section.reviews .review-list::-webkit-scrollbar { display: none; }

section.reviews .review-card {
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.7rem 1.5rem;
  display: flex !important;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 0.45s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.45s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
  /* Carousel: 3 cards visible on desktop with the gap accounted for */
  flex: 0 0 calc((100% - 2.8rem) / 3);
  min-height: 320px;
  scroll-snap-align: start;
}

section.reviews .review-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-soft) 100%);
  z-index: 1;
}

section.reviews .review-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-soft);
  box-shadow: 0 18px 40px -22px rgba(140, 111, 51, 0.45);
}

/* (legacy .review-card-featured grid styles removed —
   carousel treats all cards as equal slides) */

/* Decorative giant quote mark */
section.reviews .review-quote-mark {
  position: absolute;
  inset-inline-end: 1.2rem;
  inset-block-start: 0.4rem;
  font-family: var(--serif);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}


section.reviews .review-stars {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 3px;
  color: var(--gold);
  position: relative;
  z-index: 1;
}

section.reviews .review-stars svg {
  display: inline-block !important;
  flex-shrink: 0;
  width: auto;
  height: auto;
}

section.reviews .review-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

section.reviews .review-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
  position: relative;
  z-index: 1;
}

/* Avatar circle with initials in gold gradient */
section.reviews .review-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--ivory);
  font-family: var(--arabic);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 4px 12px -4px rgba(168, 137, 71, 0.5);
}


section.reviews .review-attribution {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

section.reviews .review-name {
  font-family: var(--arabic);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.2;
}

html[lang="en"] section.reviews .review-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
}

section.reviews .review-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

section.reviews .review-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
}

section.reviews .review-badge-city {
  background: var(--gold-tint);
  color: var(--gold-deep);
  border: 1px solid var(--gold-soft);
}

section.reviews .review-badge-event {
  background: var(--cream);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

section.reviews .review-disclaimer {
  margin: 2rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-style: italic;
  opacity: 0.7;
}

html[lang="ar"] section.reviews .review-disclaimer {
  font-style: normal;
}

section.reviews .reviews-cta {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

section.reviews .reviews-cta-line {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  color: var(--ink);
  margin: 0;
  font-style: italic;
}

html[lang="ar"] section.reviews .reviews-cta-line {
  font-family: var(--arabic);
  font-style: normal;
  font-weight: 600;
}

section.reviews .reviews-cta .btn {
  min-height: 44px;
}

/* Carousel controls — prev/next arrows + dot pagination */
section.reviews .review-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

section.reviews .review-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  padding: 0;
}
section.reviews .review-nav:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: var(--gold-tint);
  transform: translateY(-1px);
}
section.reviews .review-nav:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}
/* Mirror the chevron in RTL */
html[dir="rtl"] section.reviews .review-nav svg {
  transform: scaleX(-1);
}

section.reviews .review-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
section.reviews .review-dot {
  /* WCAG target-size: ≥24x24 hit area; visual dot is rendered via ::before */
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
}
section.reviews .review-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s var(--ease);
}
section.reviews .review-dot:hover::before {
  background: var(--gold-soft);
}
section.reviews .review-dot.is-active {
  width: 44px; /* expand parent to fit the 28px visual pill */
}
section.reviews .review-dot.is-active::before {
  background: var(--gold-dark);
  width: 28px;
  border-radius: 999px;
}
section.reviews .review-dot:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}

/* Tablet: 2 cards visible per slide */
@media (max-width: 1024px) {
  section.reviews .review-card {
    flex: 0 0 calc((100% - 1.4rem) / 2);
  }
}

/* Mobile: 1 card per slide, full bleed */
@media (max-width: 640px) {
  section.reviews .review-list {
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  section.reviews .review-card {
    flex: 0 0 86%;
    max-width: 360px;
    padding: 1.8rem 1.5rem 1.4rem;
    min-height: 280px;
  }
  section.reviews .review-controls {
    margin-top: 1.2rem;
  }
}

/* ================================================================
   Mobile design + accessibility — engineer-level fixes from the
   mobile audit. Grouped here so they're easy to maintain.
   ================================================================ */

/* [1] Keyboard focus-visible ring for every interactive element.
   :focus-visible only fires for keyboard users — won't show on
   mouse clicks, so it doesn't pollute the visual design. Critical
   for WCAG 2.1 SC 2.4.7. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.lang-toggle:focus-visible,
.menu-btn:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Skip-to-content link (injected by main.js on every page). Visually hidden
   until keyboard-focused. WCAG 2.4.1 Bypass Blocks. */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%) translateY(-130%);
  z-index: 2000; background: var(--ink); color: #fff; padding: .7rem 1.15rem;
  border-radius: 0 0 10px 10px; font-size: .95rem; font-weight: 700; text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: 3px solid var(--gold-dark); outline-offset: 2px; }
.cat-card:focus-visible,
.review-card:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 4px;
}

/* [2] Touch-action: tell the browser exactly which gestures to
   handle natively on swipe/scroll containers. Prevents 100ms
   delay on tap-after-scroll and stops the OS from highjacking
   the gesture for back-swipe / reload. */
.review-list,
.city-marquee {
  touch-action: pan-x;
}
.cat-grid {
  touch-action: pan-y;
}

/* [3] Kill the full-page grain SVG on mobile.
   `position: fixed` + `mix-blend-mode: multiply` over the whole
   viewport forces the GPU to recomposite every frame — drops
   FPS hard on low-to-mid Android. Desktop GPUs handle it fine. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .grain { display: none !important; }
}

/* [4] Pause heavy decorative animations on mobile.
   vendor-card-art spin (90s) — purely cosmetic.
   The marquee + form spinner stay (functional / explicitly designed
   to scroll). Saves battery, removes repaint cost. */
@media (max-width: 768px) {
  .vendor-card-art svg {
    animation: none;
  }
  .vendor-card-art {
    opacity: 0.3;
  }
}

/* [5] Respect prefers-reduced-motion site-wide for the marquee
   and any infinite animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll,
  .vendor-card-art svg {
    animation: none !important;
  }
}

/* [6] Mobile form spacing — reduce padding so vendor signup form
   fits without horizontal scroll on 360px viewports. */
@media (max-width: 480px) {
  .vendor-form input,
  .vendor-form select {
    padding: 0.95rem 0.9rem;
  }
  .vf-row {
    gap: 0.75rem;
  }
}

/* [7] Prevent text auto-inflation on iOS landscape rotation.
   Without this, iOS Safari grows text 1.2-1.5x in landscape,
   breaking layouts. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* [8] Tap highlight color — use brand gold for the iOS/Android
   tap flash instead of the default ugly translucent black. */
* {
  -webkit-tap-highlight-color: rgba(200, 169, 106, 0.2);
}

/* ================================================================
   Contact Us section — sits between app-cta and footer.
   Premium card on cream background, decorative gold rings,
   prominent clickable email, italic trust line at the bottom.
   ================================================================ */
.contact-section {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
  background: var(--ivory);
}

.contact-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(232, 220, 196, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, var(--warm-white) 0%, var(--cream) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 40px -22px rgba(140, 111, 51, 0.25);
}

.contact-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

.contact-art {
  position: absolute;
  inset-block-start: -40px;
  inset-inline-end: -40px;
  width: clamp(200px, 24vw, 280px);
  color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.contact-art svg {
  width: 100%;
  height: auto;
}

.contact-card .eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 0.85rem;
  justify-content: center;
}
.contact-card .eyebrow::before { display: none; }

.contact-title {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.contact-title em.accent-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}

.contact-subtitle {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 auto 2rem;
  max-width: 46ch;
}

.contact-email {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  background: var(--ink);
  color: var(--ivory);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  margin-bottom: 1.6rem;
  word-break: break-all;
}
.contact-email:hover {
  transform: translateY(-2px);
  background: var(--gold-deep);
  box-shadow: 0 14px 30px -12px rgba(140, 111, 51, 0.55);
}
.contact-email:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 4px;
}
.contact-email-icon { color: var(--gold-soft); flex-shrink: 0; }
.contact-email-arrow { opacity: 0.7; flex-shrink: 0; }
html[dir="rtl"] .contact-email-arrow { transform: scaleX(-1); }

.contact-body {
  position: relative;
  z-index: 1;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 auto 1.2rem;
  max-width: 50ch;
}

.contact-trust {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
  margin: 0 auto;
  max-width: 44ch;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(168, 137, 71, 0.18);
}
html[lang="ar"] .contact-trust {
  font-family: var(--arabic);
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 640px) {
  .contact-card {
    border-radius: var(--radius-lg);
    padding: 2.2rem 1.4rem 2rem;
  }
  .contact-art { display: none; }
  .contact-email {
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
  }
  .contact-email-address { font-size: inherit; }
}

/* =====================================================================
   Lead drawer — short-form CTA replacement (PR: feat/short-form-drawer)
   ---------------------------------------------------------------------
   Replaces the high-friction "click → leave site → 9-step form on the app"
   flow with a 2-step in-page drawer. Step 1: 4 low-commitment fields
   (event type, city, date estimate, contact method). Step 2: identity
   fields gated behind step 1 completion.

   The drawer is created in JS (assets/js/main.js) and appended to <body>
   on every page, so these styles cover the entire surface. Mobile-first:
   slides up from the bottom on viewports ≤768px, slides in from the
   end-side (right in LTR, left in RTL) on larger viewports.
   ===================================================================== */
.lead-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  /* Hidden state — opacity transitions before display:none kicks in via
     the [hidden] attribute being removed from JS at the right moment.
     The aria-hidden attribute toggles separately for assistive tech. */
}
.lead-drawer[hidden] { display: none; }
.lead-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 27, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  pointer-events: auto;
}
.lead-drawer.is-open .lead-drawer-backdrop { opacity: 1; }
.lead-drawer-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  background: var(--warm-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -24px 64px -16px rgba(31, 27, 20, 0.35);
  transform: translateY(100%);
  transition: transform 0.42s var(--ease-out);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lead-drawer.is-open .lead-drawer-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lead-drawer-backdrop,
  .lead-drawer-panel { transition: none; }
}

/* Header — close + progress + step copy. The header is a flex child that
   sizes to its content; the form below it owns the remaining height and
   scrolls. Sticky is NOT used because the panel itself has overflow:hidden
   (which neutralizes sticky); the body owns the scroll instead. */
.lead-drawer-header {
  flex: 0 0 auto;
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--warm-white);
}

/* Form is the second flex child of the panel — it must take the remaining
   vertical space AND become a flex column itself so the inner .lead-drawer-body
   has a bounded parent to scroll within. min-height:0 is required on both
   the form and the body because flex items default to min-height:auto, which
   prevents them from shrinking below their intrinsic content height — that
   was the bug: the body's overflow-y:auto did nothing because its computed
   height was effectively content-height, not panel-height-minus-header. */
.lead-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.lead-drawer-close {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 0.9rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lead-drawer-close:hover {
  background: var(--gold-tint);
  color: var(--gold-dark);
}
.lead-drawer-eyebrow {
  font-family: var(--arabic);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 0.4rem;
}
.lead-drawer-title {
  font-family: var(--arabic);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.lead-drawer-sub {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.lead-drawer-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}
.lead-drawer-progress .lead-progress-bar {
  display: inline-block;
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.lead-drawer-progress .lead-progress-bar::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  transition: width 0.32s var(--ease);
}
.lead-drawer.is-step-2 .lead-drawer-progress .lead-progress-bar::after { width: 100%; }

/* Body — owns the scroll. min-height:0 must be paired with flex:1 1 auto
   for the overflow-y:auto to actually clip and scroll instead of pushing
   the panel taller than the viewport. */
.lead-drawer-body {
  padding: 1.2rem 1.5rem 1.6rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  /* Respect iOS safe area at the bottom so the last button isn't
     hidden behind the home indicator on phones with no chin. */
  padding-bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
}

/* Steps — only one visible at a time. Stack vertically with opacity
   cross-fade to keep height stable across step transitions. */
.lead-step { display: none; }
.lead-step.is-active { display: block; animation: leadStepIn 0.32s var(--ease-out); }
@keyframes leadStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fieldset + choice tiles — large touch targets, no native radios.
   Each choice is a real <button type="button"> for keyboard a11y;
   "selected" state is tracked via aria-pressed + a data attr the
   JS reads at step-completion time. */
.lead-fieldset {
  border: 0;
  margin: 0 0 1.1rem;
  padding: 0;
}
.lead-fieldset > legend {
  display: block;
  font-family: var(--arabic);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.55rem;
  padding: 0;
}
.lead-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}
.lead-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--arabic);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.25;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}
.lead-choice:hover {
  border-color: var(--gold);
  background: var(--gold-tint);
}
.lead-choice[aria-pressed="true"] {
  border-color: var(--gold-dark);
  background: var(--ink);
  color: var(--ivory);
  font-weight: 600;
}
.lead-choice:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* Step 2 — name/phone/email/budget. Stacks vertically; uses the existing
   .vf-field pattern as a visual reference but lives in its own namespace
   so changes to the vendor form don't drag the drawer along. */
.lead-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  color: var(--text-muted);
  font-family: var(--arabic);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.35rem 0;
  margin-bottom: 0.8rem;
  transition: color 0.2s var(--ease);
}
.lead-back:hover { color: var(--ink); }
.lead-back svg {
  width: 14px;
  height: 14px;
  /* RTL: arrow visually flips via CSS logical inset; the SVG itself stays
     pointing left, but we rotate it 180° in LTR contexts so the arrow
     always points back-in-reading-direction. */
}
[dir="ltr"] .lead-back svg { transform: scaleX(-1); }

.lead-trust-copy {
  background: var(--gold-tint);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--gold-deep);
  margin: 0 0 1rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.lead-trust-copy svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.lead-field {
  display: block;
  margin-bottom: 0.85rem;
}
.lead-field-label {
  display: block;
  font-family: var(--arabic);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.lead-field-label em {
  color: var(--gold-dark);
  font-style: normal;
  margin-inline-start: 0.15rem;
}
.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--arabic);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.lead-field textarea {
  min-height: 84px;
  resize: vertical;
}
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18);
}
.lead-field input:invalid:not(:placeholder-shown),
.lead-field select:invalid:not(:focus) {
  /* Show validation styling ONLY after the user has typed something —
     pristine empty fields don't get a red border on first paint. */
  border-color: rgba(180, 60, 60, 0.45);
}
.lead-field-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-subtle);
  margin-top: 0.3rem;
}

/* Footer — submit + WhatsApp fallback / direct-help copy. */
.lead-actions {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.lead-actions .btn { width: 100%; justify-content: center; }
.lead-next[disabled],
.lead-submit[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.lead-wa-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--arabic);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  text-align: center;
}
.lead-wa-fallback:hover {
  color: var(--ink);
  background: var(--cream);
}
.lead-wa-fallback svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.lead-help-copy {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-subtle);
  margin: 0;
  line-height: 1.5;
}

/* Success screen — drops in after submit completes. */
.lead-success {
  text-align: center;
  padding: 1.5rem 0.5rem 0.5rem;
}
.lead-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.lead-success h3 {
  font-family: var(--arabic);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.lead-success p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Error banner — inline above the submit button when network fails. */
.lead-error {
  background: rgba(180, 60, 60, 0.08);
  border: 1px solid rgba(180, 60, 60, 0.3);
  color: rgba(140, 40, 40, 1);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin: 0 0 0.8rem;
}

/* ── Tablet+ (≥769px) ── slide in from the end-side instead of bottom.
   Centered on very wide screens looks marooned; pinning to the
   side gives a consistent "panel" feel across desktop widths. */
@media (min-width: 769px) {
  .lead-drawer {
    align-items: stretch;
    justify-content: flex-end;
  }
  .lead-drawer-panel {
    max-width: 480px;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    transform: translateX(100%);
    box-shadow: -24px 0 64px -16px rgba(31, 27, 20, 0.3);
  }
  /* In RTL the drawer comes from the left of the viewport (which is the
     "end" in RTL reading direction). */
  [dir="rtl"] .lead-drawer-panel {
    transform: translateX(-100%);
    box-shadow: 24px 0 64px -16px rgba(31, 27, 20, 0.3);
  }
  .lead-drawer.is-open .lead-drawer-panel { transform: translateX(0); }
}

/* Tiny phones — keep choice tiles 2-up on the narrowest viewports rather
   than collapsing to a single column which makes the drawer feel long. */
@media (max-width: 360px) {
  .lead-choices { grid-template-columns: 1fr 1fr; }
}

/* Body lock when drawer is open — prevents background scroll on iOS.
   Applied by JS, not pure :has() so it works in Safari 14 / older browsers. */
body.lead-drawer-open {
  overflow: hidden;
  /* Padding-right would compensate for scrollbar disappearance on desktop;
     we skip it because the site already uses overflow-x: clip which removes
     the scrollbar in most layouts. */
}

/* ── Consent banner (injected by main.js; GDPR/ePrivacy + PDPL) ──────────── */
.evz-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1.25rem; padding: .9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
  background: var(--ink, #2A2520); color: #F8F3ED;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18); font-size: .9rem; line-height: 1.5;
}
.evz-consent-msg { margin: 0; max-width: 720px; }
.evz-consent-link { color: #E7CFA0; text-decoration: underline; }
.evz-consent-actions { display: flex; gap: .6rem; flex: none; }
.evz-consent-btn {
  font: inherit; font-weight: 700; cursor: pointer; border-radius: 8px;
  padding: .55rem 1.1rem; border: 1.5px solid transparent; min-height: 44px;
}
.evz-consent-accept { background: var(--gold, #C8A96A); color: var(--ink, #2A2520); }
.evz-consent-accept:hover { background: #d8bd86; }
.evz-consent-decline { background: transparent; color: #F8F3ED; border-color: rgba(248,243,237,.5); }
.evz-consent-decline:hover { border-color: #F8F3ED; }
.evz-consent-btn:focus-visible { outline: 3px solid var(--gold, #C8A96A); outline-offset: 2px; }
@media (max-width: 560px) {
  .evz-consent { justify-content: stretch; }
  .evz-consent-actions { width: 100%; }
  .evz-consent-btn { flex: 1; }
}

/* ─── Support contact form (contact.html / en/contact.html) ──────────────
   Reuses the existing .vendor-form / .vf-* / .btn system. These rules only
   add what the lead form didn't need: a <textarea> (the base rules target
   input/select only), the off-screen honeypot, the submit spinner toggle,
   and the success/error status panels. Tokens only — no new palette. */
.vendor-form textarea {
  font-family: var(--arabic);
  font-size: 1rem;               /* ≥16px: avoids iOS focus auto-zoom */
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--warm-white);
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  width: 100%;
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
  appearance: none;
  -webkit-appearance: none;
}
.vendor-form textarea::placeholder { color: var(--text-subtle); }
.vendor-form textarea:hover { border-color: var(--gold-soft); }
.vendor-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18);
  background: var(--warm-white);
}

/* Honeypot — visually + semantically gone, still in the DOM for bots. */
.evz-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit spinner: hidden at rest, shown + spinning while posting. */
.vf-submit .vf-submit-spinner { display: none; }
.vf-submit[data-loading="true"] .vf-submit-label { display: none; }
.vf-submit[data-loading="true"] .vf-submit-spinner {
  display: inline-flex;
  animation: evz-spin 0.9s linear infinite;
}
@keyframes evz-spin { to { transform: rotate(360deg); } }

/* Success / error status panels under the form. */
.form-status {
  max-width: 720px;
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  font-size: 0.98rem;
  line-height: 1.6;
}
.form-status-success {
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-tint) 100%);
  border: 1px solid var(--gold-soft);
  color: var(--ink);
}
.form-status-error {
  background: #FBEFEF;
  border: 1px solid #E7C3C3;
  color: #B7484A;
}
.form-status-error a { color: #B7484A; font-weight: 700; }