/* ====================================================
   CSS CUSTOM PROPERTIES (THEME VARIABLES)
==================================================== */
:root {
  /* Colors */
  --primary:      #0d0d1a;
  --primary-soft: #1a1a2e;
  --accent:       #c9a96e;
  --accent-light: #e8c98a;
  --accent-dark:  #a07840;
  --white:        #ffffff;
  --off-white:    #faf9f7;
  --gray:         #f4f4f4;
  --gray-mid:     #e0e0e0;
  --text:         #222222;
  --text-mid:     #555555;
  --text-light:   #888888;
  --success:      #28a745;

  /* Typography */
  --font-ar:      'Cairo', sans-serif;
  --font-en:      'Poppins', sans-serif;
  --font-heading: 'Playfair Display', serif;

  /* Spacing */
  --section-py:   100px;
  --container:    1200px;
  --gap:          2rem;

  /* Transitions */
  --ease:         cubic-bezier(0.25, 0.8, 0.25, 1);
  --speed:        0.35s;

  /* Shadows */
  --shadow-sm:    0 4px 15px rgba(0,0,0,0.08);
  --shadow-md:    0 10px 40px rgba(0,0,0,0.12);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.18);
  --shadow-dark:  0 10px 40px rgba(0,0,0,0.4);

  /* Border radius */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
}

/* ====================================================
   PHASE 2 — PREMIUM DARK LUXURY PALETTE
   Strict color system: #0b0b0b / #c8a96a / #3b2a1f
==================================================== */
:root {
  /* === STRICT COLOR SYSTEM === */
  --primary:      #0b0b0b;   /* deep black — primary background */
  --primary-soft: #100d09;   /* warm dark — alternating sections */
  --secondary:    #3b2a1f;   /* warm brown — accent sections */
  --bg-warm:      #1a110b;   /* rich brown — most distinctive sections */

  /* Gold accent — single source of truth */
  --accent:       #c8a96a;
  --accent-light: #e2c98a;
  --accent-dark:  #a07840;
  --accent-glow:  rgba(200, 169, 106, 0.35);

  /* Text — warm white hierarchy for dark bg */
  --text:         #ece4d8;
  --text-mid:     rgba(236, 228, 216, 0.72);
  --text-light:   rgba(236, 228, 216, 0.48);
  --text-muted:   rgba(236, 228, 216, 0.32);

  /* Premium display font */
  --font-heading: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-en:      'DM Sans', 'Poppins', sans-serif;

  /* Elevated shadows for dark bg */
  --shadow-sm:
    0 2px 8px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.25);
  --shadow-md:
    0 6px 24px rgba(0,0,0,0.45),
    0 12px 48px rgba(0,0,0,0.30),
    0 2px 6px rgba(0,0,0,0.20);
  --shadow-lg:
    0 12px 40px rgba(0,0,0,0.60),
    0 24px 80px rgba(0,0,0,0.40),
    0 4px 12px rgba(0,0,0,0.30);
  --shadow-dark:
    0 8px 30px rgba(0,0,0,0.75),
    0 20px 60px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.40);
  --shadow-gold:
    0 8px 32px rgba(200,169,106,0.25),
    0 2px 8px rgba(200,169,106,0.15);

  /* Generous vertical breathing space */
  --section-py:   150px;
}

/* ---- Typography hierarchy — cinematic scale ---- */
.section-title {
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.section-subtitle { line-height: 2.0; font-size: 1.08rem; }
.about-desc       { line-height: 2.2; font-size: 1.08rem; }

/* ====================================================
   RESET & BASE
==================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto; /* Lenis handles smooth scrolling */
  font-size: 16px;
}

body {
  font-family: var(--font-ar);
  color: var(--text);
  background: #0b0b0b;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* English language override */
body.lang-en {
  font-family: var(--font-en);
  direction: ltr;
}

img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--speed) var(--ease); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ====================================================
   UTILITY CLASSES
==================================================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: var(--section-py) 0;
  border-top: 1px solid rgba(200, 169, 106, 0.07); /* subtle gold divider */
}
/* Dark theme section alternation — creates visual rhythm */
.bg-white  { background: var(--primary-soft); } /* warm near-black */
.bg-gray   { background: var(--bg-warm); }       /* rich brown — most distinctive */
.bg-dark   { background: var(--primary); }        /* deep black */
.text-center { text-align: center; }
.mt-lg { margin-top: 2rem; }

/* ====================================================
   TYPOGRAPHY
==================================================== */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 2px;
  background: var(--accent);
}
.eyebrow.light { color: var(--accent-light); }
.eyebrow.light::after { background: var(--accent-light); }

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);        /* white on dark bg always */
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}
.section-title.light { color: var(--white); }

.section-subtitle {
  font-size: 1rem;
  color: var(--text-mid);     /* warm off-white at 72% opacity */
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.section-subtitle.light { color: var(--text-mid); }

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* ====================================================
   DESIGN ENGINE — LAYOUT CLASSES
   Applied dynamically per client via build_site.py
==================================================== */

/* layout-centered: classic centered column layout */
.layout-centered #hero .hero-content {
  text-align: center;
  margin: 0 auto;
}
.layout-centered .about-inner {
  flex-direction: column;
  text-align: center;
}
.layout-centered .about-image {
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
.layout-centered .section-header {
  text-align: center;
}

/* layout-split: two-column hero with text left, visual right */
.layout-split #hero {
  display: flex;
  align-items: stretch;
}
.layout-split .hero-content {
  width: 50%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}
.layout-split .hero-bg {
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
@media (max-width: 768px) {
  .layout-split .hero-content { width: 100%; }
  .layout-split .hero-bg      { width: 100%; }
}

/* layout-fullbg: hero is pure fullscreen video, no overlay column */
.layout-fullbg #hero .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.85) 100%
  );
}
.layout-fullbg .hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* ====================================================
   DESIGN ENGINE — STYLE TYPE OVERRIDES
   Fine-tune per business type using injected CSS vars
==================================================== */

/* Café: warm, airy, serif-forward */
body.type-cafe {
  --font-heading: var(--design-font-en, 'Cormorant Garamond', serif);
  --font-ar:      var(--design-font-ar, 'Cairo', sans-serif);
}
body.type-cafe .section-title { letter-spacing: 0.05em; }
body.type-cafe .eyebrow       { letter-spacing: 4px; }
body.type-cafe .service-card  { border-radius: 16px; }

/* Burger: bold, high-contrast, condensed */
body.type-burger {
  --font-heading: var(--design-font-en, 'Bebas Neue', sans-serif);
  --font-ar:      var(--design-font-ar, 'Poppins', sans-serif);
}
body.type-burger .section-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.type-burger .eyebrow { letter-spacing: 5px; font-weight: 900; }
body.type-burger .service-card { border-radius: 4px; }
body.type-burger .btn-primary  { border-radius: 4px; text-transform: uppercase; letter-spacing: 2px; }

/* Restaurant: classic luxury dark */
body.type-restaurant {
  --font-heading: var(--design-font-en, 'Playfair Display', serif);
  --font-ar:      var(--design-font-ar, 'Tajawal', sans-serif);
}
body.type-restaurant .section-title { letter-spacing: 0.03em; }

/* Dessert: soft, pastel, rounded */
body.type-dessert {
  --font-heading: var(--design-font-en, 'Quicksand', sans-serif);
  --font-ar:      var(--design-font-ar, 'Cairo', sans-serif);
}
body.type-dessert .service-card { border-radius: 24px; }
body.type-dessert .btn-primary  { border-radius: 50px; }
body.type-dessert .eyebrow      { letter-spacing: 3px; }

/* ====================================================