/* =============================================
   TAILOR EXPRESS — style.css
   Step 1: Preloader · Navigation · Hero
   Source of truth: tailor-express/BRAND_CONTEXT.md
   ============================================= */

/* === 1. BRAND TOKENS === */
:root {
  /* Brand colors (per BRAND_STYLE_GUIDE.pdf p.6) */
  --color-plum:         #33202a;
  --color-burgundy:     #60202e;
  --color-coral:        #f06449;
  --color-blush:        #f6e8ea;
  --color-sage:         #515a47;
  --color-coral-light:  #ff8773;
  --color-red-alert:    #ff5050;
  --color-white:        #ffffff;

  /* Semantic aliases */
  --bg-page:        var(--color-white);
  --bg-alt:         var(--color-blush);
  --bg-deep:        var(--color-burgundy);
  --text-primary:   var(--color-plum);
  --text-on-dark:   var(--color-blush);
  --accent:         var(--color-coral);
  --accent-hover:   var(--color-coral-light);

  /* Typography */
  --font-en:      'Raleway', system-ui, -apple-system, sans-serif;
  --font-ar:      'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --fw-bold:     700;
  --fw-semibold: 600;
  --fw-medium:   500;
  --fw-light:    300;

  --fs-hero:    clamp(2.5rem, 6vw, 5rem);
  --fs-h1:      clamp(2.5rem, 5vw, 4rem);
  --fs-h2:      clamp(2rem, 4vw, 3rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.05;
  --lh-snug:    1.3;
  --lh-body:    1.65;
  --lh-body-ar: 1.8;

  --ls-display: 0.05em;
  --ls-eyebrow: 0.18em;
  --ls-body:    0;

  /* Spacing — base-8 */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   24px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-soft: 0 4px 24px rgba(51, 32, 42, 0.08);
  --shadow-lift: 0 12px 48px rgba(51, 32, 42, 0.14);
  --shadow-overlay: 0 4px 12px rgba(51, 32, 42, 0.4);

  /* Motion */
  --ease-elegant:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:   0.4s;
  --duration-medium: 0.8s;
  --duration-slow:   1.2s;
  --duration-slower: 1.8s;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 60px;
}

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

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

body {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[dir="rtl"] {
  font-family: var(--font-ar);
  line-height: var(--lh-body-ar);
}

/* Lock scroll while preloader is up */
body.is-loading { overflow: hidden; }

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

/* === 3. BILINGUAL VISIBILITY ===
   Visibility is a fundamental UI invariant. Uses !important to win
   over any later same-specificity rules. Selectors cover html[dir],
   html[lang], AND body[dir] so we never end up with both visible
   regardless of which attribute is set on which element. */

/* DEFAULT (LTR): hide AR everywhere. */
.ar-text { display: none !important; }

/* RTL/Arabic mode — match any of the three attribute locations */
html[dir="rtl"] .en-text,
html[lang="ar"] .en-text,
body[dir="rtl"] .en-text {
  display: none !important;
}

/* Inline-by-default when AR is shown */
html[dir="rtl"] .ar-text,
html[lang="ar"] .ar-text,
body[dir="rtl"] .ar-text {
  display: inline !important;
}

/* Block-level AR contexts — headline lines etc. need block display */
html[dir="rtl"] .ar-text.hero__line,
html[lang="ar"] .ar-text.hero__line,
body[dir="rtl"] .ar-text.hero__line {
  display: block !important;
}

/* === 4. TYPOGRAPHY DEFAULTS === */
h1, h2, h3, h4 {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3,
body[dir="rtl"] h4 {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

p { max-width: 65ch; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-burgundy);
}
body[dir="rtl"] .eyebrow { letter-spacing: 0.05em; text-transform: none; }

/* === 5. LAYOUT PRIMITIVES === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* === 6. ACCESSIBILITY === */
:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: -40px;
  background: var(--color-burgundy);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  z-index: 10000;
  transition: top var(--duration-fast) var(--ease-elegant);
}
.skip-link:focus { top: 0; }

@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;
  }
}

/* === 7. GSAP REVEAL SAFETY === */
.js-reveal { opacity: 1; }
.no-js .js-reveal { opacity: 1 !important; transform: none !important; }

/* =============================================
   PRELOADER
   Spec: BRAND_CONTEXT.md §10
   Plum bg · coral X stitches · cream Cormorant wordmark · coral bar
   ============================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--color-plum);
  display: grid;
  place-items: center;
  /* JS controls exit fade; CSS gives the safe initial state */
}

.preloader__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.preloader__x {
  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);
  /* JS will set initial transform: scale(0.95) and animate to 1 */
}

/* Stroke-dashoffset animation prep — JS controls timing */
.preloader__x-circle,
.preloader__x-stroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.preloader__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  letter-spacing: 0.18em;
  color: var(--color-blush);
  opacity: 0;
  /* JS fades to 1 */
}
body[dir="rtl"] .preloader__wordmark {
  font-family: var(--font-ar);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
}

.preloader__bar {
  width: 120px;
  height: 1.5px;
  background: rgba(246, 232, 234, 0.18);
  overflow: hidden;
  position: relative;
}
.preloader__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-coral);
  /* JS animates width 0 → 100% */
}

/* =============================================
   NAVIGATION
   Display + visibility are !important to prevent the Step 1 invisibility
   regression. Opacity is NOT pinned so GSAP can animate it for the
   reduced-motion auto-hide path.
   Only the BACKGROUND (frosted blush) animates in on scroll.
   ============================================= */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex !important;
  align-items: center;
  background: transparent;
  visibility: visible !important;
  will-change: transform, opacity;
  transition: background var(--duration-medium) var(--ease-elegant),
              backdrop-filter var(--duration-medium) var(--ease-elegant),
              box-shadow var(--duration-medium) var(--ease-elegant);
}

.nav.is-scrolled {
  background: rgba(246, 232, 234, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(51, 32, 42, 0.06);
}

.nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo → far left, cluster → far right */
  gap: var(--space-3);
}

/* Brand */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-plum);
  flex-shrink: 0;
}
.nav__brand-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 6px rgba(51, 32, 42, 0.18));
}
.nav__brand-icon svg { width: 100%; height: 100%; }
.nav__brand-text {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--color-burgundy);
}
body[dir="rtl"] .nav__brand-text { font-family: var(--font-ar); letter-spacing: 0; }

/* Links */
.nav__links {
  display: flex;
  gap: var(--space-3);
  margin-inline-start: auto;
}
.nav__links a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-plum);
  padding-block: 6px;
}
body[dir="rtl"] .nav__links a {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out-soft);
}
body[dir="rtl"] .nav__links a::after { transform-origin: right; }
.nav__links a:hover::after { transform: scaleX(1); }

/* Right cluster */
.nav__cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav__lang {
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  color: var(--color-burgundy);
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  transition: background var(--duration-fast) var(--ease-elegant),
              color var(--duration-fast) var(--ease-elegant);
}
body[dir="rtl"] .nav__lang { font-family: var(--font-ar); letter-spacing: 0.04em; }
.nav__lang:hover {
  background: var(--color-burgundy);
  color: var(--color-blush);
}
.nav__phone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
  border-radius: 50%;
  color: var(--color-burgundy);
  transition: color var(--duration-fast) var(--ease-elegant),
              transform var(--duration-fast) var(--ease-elegant);
}
.nav__phone:hover { color: var(--color-coral); transform: translateY(-2px); }

/* Burger (mobile only) */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-plum);
  transition: transform var(--duration-fast) var(--ease-elegant),
              opacity var(--duration-fast) var(--ease-elegant);
  transform-origin: center;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

/* Mobile panel — explicitly hidden on desktop so it cannot leak
   into the desktop layout under any circumstance.
   On mobile, the closed state uses visibility + opacity + transform
   AS A DEFENSE-IN-DEPTH bundle: even if one property is reset by a
   browser/engine quirk (we observed transform getting reset to identity
   after scroll on mobile emulation), visibility + opacity still keep
   the panel invisible. */
.nav__panel {
  display: none;
}
@media (max-width: 900px) {
  .nav__panel {
    display: flex;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: var(--color-blush);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 99;
    transition: transform var(--duration-medium) var(--ease-elegant),
                opacity var(--duration-medium) var(--ease-elegant),
                visibility 0s linear var(--duration-medium);
  }
  .nav__panel.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--duration-medium) var(--ease-elegant),
                opacity var(--duration-medium) var(--ease-elegant),
                visibility 0s linear 0s;
  }
}
.nav__panel-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.nav__panel-links a {
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  color: var(--color-plum);
  letter-spacing: 0.08em;
}
body[dir="rtl"] .nav__panel-links a { letter-spacing: 0; }
.nav__panel-lang {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-burgundy);
  border-radius: var(--r-pill);
  color: var(--color-burgundy);
}

/* The simplified nav keeps logo + phone + language toggle + menu button
   visible at ALL sizes. (The old .nav__links / .nav__burger / .nav__panel
   are removed from markup; their rules above are now inert.) */

/* === Hamburger menu toggle (all viewports) === */
.nav-menu-toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  color: var(--color-burgundy);   /* matches the phone + lang colour */
  flex-shrink: 0;
}
.nav-menu-toggle__line {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform-origin: center;
}
@media (hover: hover) {
  .nav-menu-toggle:hover .nav-menu-toggle__line { opacity: 0.7; }
}
.nav-menu-toggle:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Open state — the three lines fold into an X */
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle__line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle__line:nth-child(2) { opacity: 0; }
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle__line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* === Full-screen overlay menu === */
.main-menu {
  position: fixed;
  inset: 0;
  background: rgba(51, 32, 42, 0.98);   /* plum at 98% */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Breathing room from viewport edges so the first item clears the fixed
     nav (top) and the last item never touches the bottom edge. */
  padding: 60px 20px;
  box-sizing: border-box;
  /* Hidden — curtain parked above the viewport */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.5s ease-in-out,
              visibility 0s linear 0.5s,
              transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.main-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s ease-in-out,
              visibility 0s,
              transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.main-menu__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.main-menu__watermark svg { width: 100%; height: auto; }
.main-menu__nav { position: relative; z-index: 1; text-align: center; }
.main-menu__list { list-style: none; padding: 0; margin: 0; }
.main-menu__item {
  margin: 10px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.main-menu[aria-hidden="false"] .main-menu__item { opacity: 1; transform: translateY(0); }
.main-menu[aria-hidden="false"] .main-menu__item:nth-child(1) { transition-delay: 0.30s; }
.main-menu[aria-hidden="false"] .main-menu__item:nth-child(2) { transition-delay: 0.40s; }
.main-menu[aria-hidden="false"] .main-menu__item:nth-child(3) { transition-delay: 0.50s; }
.main-menu[aria-hidden="false"] .main-menu__item:nth-child(4) { transition-delay: 0.60s; }
.main-menu[aria-hidden="false"] .main-menu__item:nth-child(5) { transition-delay: 0.70s; }
.main-menu[aria-hidden="false"] .main-menu__item:nth-child(6) { transition-delay: 0.80s; }
.main-menu__link {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  color: var(--color-blush);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: 8px 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}
body[dir="rtl"] .main-menu__link { font-family: var(--font-ar); letter-spacing: 0; }
.main-menu__link:hover,
.main-menu__link:focus-visible { color: var(--color-coral); transform: translateX(4px); }
body[dir="rtl"] .main-menu__link:hover,
body[dir="rtl"] .main-menu__link:focus-visible { transform: translateX(-4px); }
.main-menu__link[aria-current="page"] { color: var(--color-coral); }

/* Phones: tighter sizing so all 7 items fit comfortably without scrolling */
@media (max-width: 480px) {
  .main-menu { padding: 50px 16px; }
  .main-menu__item { margin: 8px 0; }
  .main-menu__link { font-size: clamp(1.25rem, 4vw, 2rem); padding: 6px 16px; }
}

/* Short viewports (small desktop windows, landscape phones): scale to HEIGHT
   so all 7 items fit without scrolling down to ~600px tall. The clipping was
   height-driven, so width media queries alone can't solve it. */
@media (max-height: 650px) {
  .main-menu { padding: 36px 20px; }
  .main-menu__item { margin: 6px 0; }
  .main-menu__link { font-size: clamp(1.25rem, 3.2vh, 2rem); padding: 6px 18px; }
}

/* Very short viewports (landscape phones ~375px tall): fit all 7 at rest. */
@media (max-height: 430px) {
  .main-menu { padding: 20px; }
  .main-menu__item { margin: 4px 0; }
  .main-menu__link { font-size: clamp(1.125rem, 4.2vh, 1.5rem); padding: 5px 16px; }
}

/* Body scroll lock while the menu is open */
body.menu-open { overflow: hidden; }

/* Keep the nav (logo + X) ABOVE the overlay so the X closes it, and
   recolour its elements blush for contrast over the plum menu. */
body.menu-open .nav {
  z-index: 1001;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.menu-open .nav__brand-text,
body.menu-open .nav__phone,
body.menu-open .nav__lang,
body.menu-open .nav-menu-toggle { color: var(--color-blush); }

@media (prefers-reduced-motion: reduce) {
  .main-menu,
  .main-menu__item,
  .nav-menu-toggle__line { transition: none !important; }
  /* Items appear instantly; the X still forms (just without the tween) */
  .main-menu__item { opacity: 1; transform: none; }
}

/* =============================================
   HERO
   Split-screen 58/42 · video right · text left
   ============================================= */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 100vh;
  padding-top: var(--nav-h);
  background: var(--color-blush);
  overflow: hidden;
}

/* LEFT TEXT COLUMN */
.hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2) var(--container-pad) var(--space-4) calc(var(--container-pad) + var(--space-3));
}
.hero__text-inner {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero__eyebrow {
  opacity: 0; /* JS reveals */
}

.hero__headline {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  color: var(--color-plum);
  margin-block: 0 var(--space-1);
}
:root[dir="rtl"] .hero__headline,
body[dir="rtl"] .hero__headline {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.12;
}
.hero__line {
  display: block;
  overflow: hidden;
  white-space: nowrap; /* belt-and-suspenders against wrap-induced extra lines */
}
.hero__line > * {
  display: inline-block;
}

.hero__subline {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--color-sage);
  max-width: 42ch;
  opacity: 0;
}
body[dir="rtl"] .hero__subline {
  font-family: var(--font-ar);
  font-style: normal;
  font-weight: var(--fw-medium);
}

/* 24/7 element */
.hero__open {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block: var(--space-1);
  opacity: 0;
}
.hero__open-numerals {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
  color: var(--color-burgundy);
  letter-spacing: -0.02em;
}
.hero__open-slash {
  color: var(--color-coral);
  margin-inline: 0.04em;
  font-weight: var(--fw-light);
}
.hero__open-label {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-plum);
}
body[dir="rtl"] .hero__open-label {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  opacity: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.95rem 1.5rem;
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: transform var(--duration-fast) var(--ease-elegant),
              background var(--duration-fast) var(--ease-elegant),
              box-shadow var(--duration-fast) var(--ease-elegant);
}
body[dir="rtl"] .btn {
  font-family: var(--font-ar);
  letter-spacing: 0;
  text-transform: none;
}
.btn--primary {
  background: var(--color-coral);
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(240, 100, 73, 0.28);
}
.btn--primary:hover {
  background: var(--color-coral-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(240, 100, 73, 0.36);
}
.btn__arrow {
  transition: transform var(--duration-fast) var(--ease-elegant);
}
.btn--primary:hover .btn__arrow { transform: translateX(4px); }
body[dir="rtl"] .btn--primary:hover .btn__arrow { transform: translateX(-4px) scaleX(-1); }
body[dir="rtl"] .btn__arrow { transform: scaleX(-1); }

.btn--ghost {
  background: transparent;
  color: var(--color-burgundy);
  border: 1px solid currentColor;
}
.btn--ghost:hover {
  background: var(--color-burgundy);
  color: var(--color-blush);
}

/* Scroll cue */
.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  inset-inline-start: calc(var(--container-pad) + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
}
.hero__scroll-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-burgundy);
}
.hero__scroll-label {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  color: var(--color-burgundy);
  text-transform: uppercase;
}
body[dir="rtl"] .hero__scroll-label { letter-spacing: 0.1em; text-transform: none; }

/* RIGHT MEDIA COLUMN */
.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--color-plum); /* fallback while video buffers */
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__media-tint {
  position: absolute;
  inset: 0;
  background: rgba(51, 32, 42, 0.22); /* 22% plum overlay per §13.4 */
  pointer-events: none;
}
.hero__media-x {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  width: clamp(72px, 8vw, 110px);
  height: clamp(72px, 8vw, 110px);
  filter: drop-shadow(0 4px 12px rgba(51, 32, 42, 0.4));
  pointer-events: none;
  opacity: 0; /* JS fades in */
}

/* === HERO RESPONSIVE === */
@media (max-width: 1024px) {
  /* Scroll cue gone earlier — it competes for space below 1024 */
  .hero__scroll-cue { display: none !important; }
}

@media (max-width: 900px) {
  /* Mobile hero — full-bleed video with text overlaid at bottom over a
     plum gradient. Override the desktop two-column grid into a single
     stacking context where the video fills the section and the text
     sits absolutely positioned at the bottom 40%. */
  .hero {
    display: block;
    height: 100vh;
    min-height: 100vh;
    padding-top: 0;
    background: var(--color-plum);
  }
  .hero__media {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
  }
  /* Replace the uniform 22% plum tint with a top-transparent → bottom-
     plum gradient so text overlaid at the bottom remains readable. */
  .hero__media-tint {
    background: linear-gradient(
      180deg,
      rgba(51, 32, 42, 0)    0%,
      rgba(51, 32, 42, 0.15) 50%,
      rgba(51, 32, 42, 0.85) 100%
    );
  }
  .hero__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: var(--space-3) 24px 32px;
    justify-content: flex-end;
  }
  .hero__text-inner { max-width: none; gap: var(--space-2); }

  /* Mobile color overrides — blush-on-plum for legibility against the
     gradient. Desktop colors (burgundy/plum/sage on blush bg) untouched. */
  .hero__eyebrow      { color: var(--color-blush); }
  .hero__headline     { color: var(--color-blush); font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .hero__subline      { color: rgba(246, 232, 234, 0.85); }
  .hero__open-numerals,
  .hero__open-label   { color: var(--color-blush); }
  /* slash stays coral — pops as accent against blush */
  .btn--ghost         { color: var(--color-blush); border-color: rgba(246, 232, 234, 0.5); }
  .btn--ghost:hover   { background: var(--color-blush); color: var(--color-plum); }

  .hero__media-x {
    width: 56px;
    height: 56px;
    top: var(--space-2);
    inset-inline-end: var(--space-2);
  }
  /* Mobile: nowrap can overflow narrow viewports; allow wrap as a release valve */
  .hero__line { white-space: normal; }
}

/* =============================================
   SERVICES CAROUSEL (Step 3)
   - 6-card circular horizontal carousel
   - Active card centered; neighbors curve away with scale + tilt
   - Section bg color animates per active card (via CSS var + GSAP)
   - Header text color flips for dark/light section bgs (via CSS var)
   ============================================= */
.services {
  --services-bg:       var(--color-blush);    /* JS animates */
  --services-fg:       var(--color-plum);     /* heading color, flips by tone */
  --services-fg-soft:  var(--color-burgundy); /* eyebrow color */
  --services-arrow-bg: rgba(51, 32, 42, 0.08);

  position: relative;
  min-height: 100vh;
  background: var(--services-bg);
  overflow: hidden;
  padding-block: clamp(var(--space-8), 9vw, var(--space-12));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.services__header {
  text-align: center;
}
.services__eyebrow {
  color: var(--services-fg-soft);
  display: block;
  margin-bottom: var(--space-2);
}
.services__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--services-fg);
}
:root[dir="rtl"] .services__heading,
body[dir="rtl"] .services__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* Stage holds the carousel + arrows */
.services__stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services__carousel {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  outline: none;
}
.services__carousel:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 8px;
  border-radius: var(--r-md);
}

/* Cards */
.services__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 540px;
  margin-top: -270px;
  margin-left: -190px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 16px 48px rgba(51, 32, 42, 0.28),
    0 4px 12px rgba(51, 32, 42, 0.18);
  background: var(--color-plum);
  cursor: pointer;
  will-change: transform, opacity;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
}

.services__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.services__card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Background applied via inline style from data-overlay-rgba in JS */
  pointer-events: none;
}

.services__card-x {
  position: absolute;
  top: 18px;
  width: 36px;
  height: 36px;
  z-index: 2;
  pointer-events: none;
  color: var(--color-blush);
  opacity: 0.45;
}
.services__card-x--left  { left: 18px; }
.services__card-x--right { right: 18px; }
.services__card[data-overlay-tone="light"] .services__card-x {
  color: var(--color-plum);
}

/* All card text is WHITE on every card regardless of overlay tone.
   With the active card overlay now at 12% the underlying image is mostly
   visible — stronger black drop-shadows compensate for bright image spots. */
.services__card-content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(var(--space-3), 3vw, var(--space-4));
  z-index: 3;
  color: #ffffff;
}

.services__card-title {
  /* Explicit white — overrides the global `h3 { color: var(--text-primary) }`
     rule that would otherwise win over the parent's inherited color. */
  color: #ffffff;
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  letter-spacing: 0.04em;
  line-height: 1.18;
  margin-bottom: var(--space-1);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.40);
}
:root[dir="rtl"] .services__card-title,
body[dir="rtl"] .services__card-title {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.4;
}

.services__card-desc {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.95;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
:root[dir="rtl"] .services__card-desc,
body[dir="rtl"] .services__card-desc {
  font-family: var(--font-ar);
  line-height: 1.75;
}

/* Arrow buttons */
.services__arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(246, 232, 234, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-plum);
  box-shadow: 0 4px 12px rgba(51, 32, 42, 0.16);
  transition: transform var(--duration-fast) var(--ease-elegant),
              background var(--duration-fast) var(--ease-elegant);
}
.services__arrow svg { width: 24px; height: 24px; }
.services__arrow--prev { inset-inline-start: var(--space-3); }
.services__arrow--next { inset-inline-end:  var(--space-3); }
.services__arrow:hover {
  transform: translateY(-50%) scale(1.08);
  background: rgba(246, 232, 234, 1);
}
:root[dir="rtl"] .services__arrow svg,
body[dir="rtl"] .services__arrow svg { transform: scaleX(-1); }

/* Dots */
.services__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.services__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(51, 32, 42, 0.25);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-elegant),
              transform var(--duration-fast) var(--ease-elegant);
}
.services__dot.is-active {
  background: var(--color-coral);
  transform: scale(1.25);
}
.services__dot:hover { background: rgba(51, 32, 42, 0.5); }
.services__dot.is-active:hover { background: var(--color-coral-light); }

/* Mobile layout */
@media (max-width: 900px) {
  .services {
    padding-block: clamp(var(--space-6), 10vw, var(--space-10, 5rem));
    gap: var(--space-3);
  }
  .services__stage {
    height: 540px;
    padding-inline: var(--container-pad);
  }
  /* Pattern A — asymmetric peek-right: active card sits at 85vw with
     its left edge ~20px from the viewport's left edge (left-aligned),
     and the next card peeks from the right at 0.3 opacity / scale 0.97.
     NO left peek — even on middle cards. Last card hides the wrapped
     right neighbor. JS handles the X offsets in mobileConfigForPosition
     (see script.js); base card shadow (defined outside this query) is
     used — no Pattern C heavy-shadow override here. */
  .services__card {
    width: 85vw;
    height: 470px;
    margin-top: -235px;
    margin-left: -42.5vw;
  }
  .services__arrow { display: none; }
}

@media (max-width: 480px) {
  .services__card {
    width: 85vw;
    height: 420px;
    margin-top: -210px;
    margin-left: -42.5vw;
  }
  .services__stage { height: 480px; }
}

/* =============================================
   FLOATING WHATSAPP
   ============================================= */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-3);
  inset-inline-end: var(--space-3);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  z-index: 90;
  transition: transform var(--duration-fast) var(--ease-elegant);
}
.whatsapp-float:hover { transform: scale(1.08); }

.site-footer-placeholder {
  /* Reserved so layout flows correctly during Step 1 demo */
  height: 1px;
}

/* =============================================
   ABOUT SECTION (Step 2A + Amendment: scroll-pinned bg sequence)
   - Layered: background image stack (z:1) → plum overlay (z:2) → foreground (z:3)
   - Section is min-height 100vh so pinned content fits in viewport
   - Foreground text uses light colors for readability on dark bg
   ============================================= */
.about {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: var(--space-6);
}

/* Background image stack (z:1) */
.about__bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  will-change: opacity, transform;
}
/* First bg starts visible — JS will take over once loaded */
.about__bg[data-bg="0"] { opacity: 1; }

/* Plum overlay (z:2) — keeps foreground text readable */
.about__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(51, 32, 42, 0.65);
  pointer-events: none;
}

/* Foreground (z:3) */
.about__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 6vw, var(--space-12));
  align-items: center;
}

/* MEDIA (left) */
.about__media {
  position: relative;
}
.about__image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;   /* portrait frame for the portrait team photo; cover
                            fills the width so no one is cropped at the sides,
                            trimming only the empty wall/counter top & bottom */
  overflow: hidden;
  will-change: transform, opacity;
  /* Initial state matches the JS scrub entry — JS will take over once loaded */
  transform: scale(0.85);
  opacity: 0.6;
}
.about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CONTENT (right) */
.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Foreground text colors — light palette for readability on the
   dark plum-overlaid background image stack */
.about__eyebrow {
  color: var(--color-coral); /* was burgundy in pre-amendment iteration */
  margin-bottom: var(--space-3);
  opacity: 0; /* JS reveals */
  text-shadow: 0 2px 8px rgba(51, 32, 42, 0.4);
}

.about__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--color-blush); /* cream, was plum — readable on dark bg */
  margin-bottom: var(--space-4);
  max-width: 22ch;
  text-shadow: 0 2px 16px rgba(51, 32, 42, 0.6);
}
:root[dir="rtl"] .about__heading,
body[dir="rtl"] .about__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.45;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about__paragraph {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(246, 232, 234, 0.88); /* cream at 88% — was sage */
  max-width: 52ch;
  opacity: 0;
  text-shadow: 0 1px 6px rgba(51, 32, 42, 0.5);
}
:root[dir="rtl"] .about__paragraph,
body[dir="rtl"] .about__paragraph {
  font-family: var(--font-ar);
  line-height: 1.8;
}

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--space-5, 2.5rem);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem; /* 15px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral);
  position: relative;
  padding-block: 0.25rem;
  opacity: 0; /* JS reveals */
}
:root[dir="rtl"] .about__cta,
body[dir="rtl"] .about__cta {
  font-family: var(--font-ar);
  letter-spacing: 0;
  text-transform: none;
}
/* Underline draws left-to-right on hover */
.about__cta::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out-soft);
}
:root[dir="rtl"] .about__cta::after,
body[dir="rtl"] .about__cta::after { transform-origin: right; }
.about__cta:hover::after { transform: scaleX(1); }

.about__cta-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out-soft);
}
.about__cta:hover .about__cta-arrow { transform: translateX(6px); }
:root[dir="rtl"] .about__cta-arrow,
body[dir="rtl"] .about__cta-arrow { transform: scaleX(-1); }
:root[dir="rtl"] .about__cta:hover .about__cta-arrow,
body[dir="rtl"] .about__cta:hover .about__cta-arrow { transform: translateX(-6px) scaleX(-1); }

/* === ABOUT RESPONSIVE === */
@media (max-width: 900px) {
  .about {
    padding-block: clamp(var(--space-6), 12vw, var(--space-10, 5rem));
  }
  .about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about__image-container {
    aspect-ratio: 4 / 5; /* portrait team photo — keep portrait on mobile too
                            (a landscape frame would crop the team's sides) */
  }
  .about__heading { max-width: none; }
  .about__paragraph { max-width: none; }
}

@media (max-width: 480px) {
  .about__heading { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  .about__eyebrow { font-size: 0.75rem; }
}

/* =============================================
   24/7 PILLAR (Step 4)
   Pinned day-cycle section: moon→sun arc + counter + bg gradient.
   Spec: BRAND_CONTEXT.md §11.3, §14.4 + Step 4 brief.
   ============================================= */
.pillar {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background: #1a0d12;           /* deep midnight — animated by GSAP */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* No gap — overlap is controlled by negative margin-top on counter so the
     "24" top edge enters the arc dome interior like a crown frame. */
  padding: var(--space-6) var(--container-pad);
  /* Promote to a paint layer — keeps transform updates on the body smooth */
  will-change: background-color;
}

.pillar__arc-wrap {
  width: min(70vw, 900px);
  pointer-events: none;
  flex-shrink: 0;
}

.pillar__arc {
  width: 100%;
  height: auto;
  display: block;
  /* Allow glow halos to overflow viewBox bounds visually */
  overflow: visible;
}

.pillar__body {
  /* Hint browser that transform changes frequently */
  will-change: transform;
}

.pillar__counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.5vh, 1.25rem);
  text-align: center;
  /* Pull the counter up so the top ~30-40% of "24" enters the arc's dome
     interior — the arc visually wraps and crowns the upper portion of the
     digits. Responsive: -9.5rem ceiling on wide desktop, scaled with vw,
     floored at -3rem on small mobile. Math: overlap = -(H_arc*0.074 + M).
     At 1440px → 37.5% overlap, 768px → 34.5%, 375px → 36%. */
  margin-top: clamp(-9.5rem, -10vw, -3rem);
  /* Counter renders on top of the arc-wrap area but the body never shares
     both x and y with the digits during the journey (apex is well above
     the counter; endpoints are outside its horizontal range). */
  position: relative;
  z-index: 1;
}

.pillar__counter-number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(10rem, 22vw, 18rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f6e8ea;
  /* lining-nums forces uniform-height digits (Cormorant's default oldstyle
     figures have a descending "4" and "5" that collided with the label).
     tabular-nums keeps each digit the same width so 00→24 doesn't jitter. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  display: inline-block;
  min-width: 2.6ch;
  text-align: center;
  /* Color animated by GSAP — declare will-change for performance */
  will-change: color;
}

.pillar__counter-label {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.125rem, 1.25vw, 1.25rem);
  letter-spacing: 0.18em;
  color: #f6e8ea;
  text-transform: uppercase;
  display: inline-block;
}
body[dir="rtl"] .pillar__counter-label,
html[dir="rtl"] .pillar__counter-label {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .pillar__arc-wrap {
    width: calc(100% - 2 * var(--container-pad));
    max-width: 540px;
  }
  .pillar__counter-number {
    font-size: clamp(6rem, 18vw, 10rem);
  }
  .pillar__counter-label {
    font-size: 0.8125rem;
    letter-spacing: 0.15em;
  }
}

@media (max-width: 480px) {
  .pillar {
    min-height: 500px;
  }
}

/* === DESCRIPTION (resting-state copy) ===
   Placeholder copy — owner to approve. Two halves of a 100vh section:
   top half holds the "24" + this description; bottom half holds the "7"
   + the second description. JS sets the initial transform via gsap.set,
   so CSS doesn't include a transform. */
.pillar__description,
.pillar__description2 {
  position: absolute;
  width: min(40%, 480px);
  opacity: 0;                    /* JS reveals during post-animation */
  color: #f6e8ea;
  z-index: 2;
}

.pillar__description {
  /* Top half — anchored 30% from top (was 25%) so the two halves sit
     closer together and read as one composition, not two detached blocks. */
  top: 30%;
  inset-inline-end: 10%;
}

.pillar__description2 {
  /* Bottom half — mirror anchor at 70% (was 75%), tighter vertical gap. */
  top: 70%;
  inset-inline-start: 10%;
}

.pillar__description-body {
  font-family: var(--font-en);
  font-weight: 500;             /* Raleway Medium per brand guide */
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.7;
  max-width: 42ch;
  letter-spacing: 0;
}

.pillar__description-kicker {
  margin-top: 1.5rem;
  font-family: var(--font-en);
  font-weight: 600;             /* Raleway SemiBold — slight emphasis */
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
  max-width: 42ch;
}

body[dir="rtl"] .pillar__description-body,
body[dir="rtl"] .pillar__description-kicker {
  font-family: var(--font-ar);  /* IBM Plex Sans Arabic per brand guide */
  line-height: 1.8;             /* Arabic letterforms need a touch more */
}
body[dir="rtl"] .pillar__description-kicker {
  letter-spacing: 0;            /* AR doesn't tolerate tracking */
}

/* === SECONDARY COUNTER ("7 days a week") ===
   Mirror of .pillar__counter, anchored to the trailing side of the
   bottom half. Hidden until Phase 6 fades it in. */
.pillar__counter2 {
  position: absolute;
  top: 75%;
  inset-inline-end: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.5vh, 1.25rem);
  text-align: center;
  opacity: 0;                    /* JS reveals during Phase 6 */
  z-index: 2;
}

.pillar__counter2-number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(10rem, 22vw, 18rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f6e8ea;
  /* Lining figures keep "0" through "7" uniform-height */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  display: inline-block;
}

.pillar__counter2-label {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.125rem, 1.25vw, 1.25rem);
  letter-spacing: 0.18em;
  color: #f6e8ea;
  text-transform: uppercase;
  display: inline-block;
}
body[dir="rtl"] .pillar__counter2-label,
html[dir="rtl"] .pillar__counter2-label {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

@media (max-width: 900px) {
  /* Mobile: four elements stack vertically, all center-anchored.
     Day-cycle counter1 still lives via flex layout; resting-state JS
     translates it. Description, counter2, and description-2 are
     absolute-positioned at fixed % anchors — tightened so the four
     groups read as one composition. */
  .pillar__description {
    top: 36%;
    inset-inline-end: auto;
    left: 50%;
    width: calc(100% - 2 * var(--container-pad));
    max-width: 36ch;
    text-align: center;
  }
  .pillar__counter2 {
    top: 60%;
    inset-inline-end: auto;
    left: 50%;
    /* xPercent:-50 set via JS to center horizontally */
  }
  .pillar__description2 {
    top: 84%;
    inset-inline-start: auto;
    left: 50%;
    width: calc(100% - 2 * var(--container-pad));
    max-width: 36ch;
    text-align: center;
  }
  .pillar__description-body,
  .pillar__description-kicker {
    margin-inline: auto;
  }
  /* Mobile descriptions: dial font down a touch so 4 stacked elements
     fit in 100vh without crowding. Desktop clamp lower bound is 1.25rem;
     here we override to keep the column compact. */
  .pillar__description-body,
  .pillar__description-kicker {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
}

/* === REDUCED MOTION ===
   Skip pin and entire animation chain; show the final composed state
   immediately: plum bg, "24" top-left, description top-right, "7"
   bottom-right, description bottom-left. */
@media (prefers-reduced-motion: reduce) {
  .pillar {
    background: #33202a;
  }
  .pillar__counter-number,
  .pillar__counter-label,
  .pillar__counter2-number,
  .pillar__counter2-label {
    color: #f6e8ea;
  }
  .pillar__moon,
  .pillar__moon-glow,
  .pillar__sun-circle,
  .pillar__sun-glow,
  .pillar__sun-rays,
  .pillar__arc-path {
    opacity: 0;
  }
  .pillar__description,
  .pillar__description2,
  .pillar__counter2 {
    opacity: 1;
    /* JS positions transforms; reduced-motion path handles them */
  }
  /* Counter1 slid to top-half-left — JS handles the transform */
}

/* =============================================
   BRANCHES (Step 5)
   3-panel locator: stacked images (top-left), map (bottom-left),
   9 brackets (right). Click bracket → shutter-blinds reveal new
   interior image + crossfade exterior + iframe-fade-swap map.
   ============================================= */
.branches {
  position: relative;
  background: var(--color-blush);
  padding-block: clamp(var(--space-8), 10vw, var(--space-16));
  overflow: hidden;
}

/* === Header === */
.branches__header {
  text-align: center;
  margin-bottom: clamp(var(--space-6), 6vw, var(--space-8));
}

.branches__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  color: var(--color-plum);
  line-height: var(--lh-snug);
  /* Mask-wipe reveal — JS sets initial transform on inner span */
  overflow: hidden;
  display: inline-block;
}
body[dir="rtl"] .branches__heading,
html[dir="rtl"] .branches__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.branches__heading-inner {
  display: inline-block;
}

/* === Layout (desktop two-column) === */
.branches__layout {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: start;
}

/* === Left column === */
.branches__panels {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
}

/* === Stacked images (interior + exterior with overlap) === */
.branches__images {
  position: relative;
  width: 100%;
  height: clamp(360px, 38vw, 480px);
  opacity: 0;            /* JS reveals on scroll-in */
  transform: scale(0.95);
}

.branches__interior {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 75%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(51, 32, 42, 0.18);
  background: var(--color-plum);  /* placeholder while images load */
}
.branches__interior img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The 7 shutter strips overlay the base image. Initial state below
   collapses each strip to a horizontal line at its center (invisible).
   JS animates the clip-path open to reveal the new image in stripes. */
.branches__interior-strip {
  pointer-events: none;
}
.branches__interior-strip[data-strip="0"] { clip-path: inset(7.143% 0 92.857% 0); }
.branches__interior-strip[data-strip="1"] { clip-path: inset(21.429% 0 78.571% 0); }
.branches__interior-strip[data-strip="2"] { clip-path: inset(35.714% 0 64.286% 0); }
.branches__interior-strip[data-strip="3"] { clip-path: inset(50% 0 50% 0); }
.branches__interior-strip[data-strip="4"] { clip-path: inset(64.286% 0 35.714% 0); }
.branches__interior-strip[data-strip="5"] { clip-path: inset(78.571% 0 21.429% 0); }
.branches__interior-strip[data-strip="6"] { clip-path: inset(92.857% 0 7.143% 0); }

.branches__exterior {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 55%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(51, 32, 42, 0.20);
  background: var(--color-plum);
}
.branches__exterior img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.branches__exterior-overlay {
  opacity: 0;  /* JS fades it in during transition */
}

/* === Map === */
.branches__map {
  position: relative;
  width: 100%;
  height: clamp(280px, 28vw, 360px);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(51, 32, 42, 0.18);
  background: rgba(51, 32, 42, 0.08);
  opacity: 0;            /* JS reveals on scroll-in */
}
.branches__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transition: opacity 0.4s var(--ease-elegant);
}
.branches__map-link {
  position: absolute;
  inset: 0;
  display: block;
  /* Pointer-events: none lets users interact with the map normally;
     the "Get directions" pill captures clicks for the link target. */
  pointer-events: none;
}
.branches__map-cta {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.875rem;
  color: var(--color-coral);
  background: rgba(255, 255, 255, 0.94);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(51, 32, 42, 0.18);
  pointer-events: auto;  /* capture the link click on this pill only */
  transition: transform 0.3s var(--ease-out-soft), background 0.3s;
}
.branches__map-cta:hover {
  transform: translateY(-2px);
  background: var(--color-white);
}
body[dir="rtl"] .branches__map-cta,
html[dir="rtl"] .branches__map-cta {
  font-family: var(--font-ar);
}

/* === Right column: branch list === */
.branches__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branches__bracket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 64px;
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid rgba(96, 32, 46, 0.10);
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
  opacity: 0;            /* JS reveals on scroll-in with stagger */
  transform: translateY(20px);
  transition:
    background 0.4s var(--ease-out-soft),
    border-color 0.4s var(--ease-out-soft),
    transform 0.4s var(--ease-out-soft),
    box-shadow 0.4s var(--ease-out-soft);
}
.branches__bracket:hover:not(.is-active) {
  background: #f9eef1;
  border-color: rgba(96, 32, 46, 0.25);
  transform: translateX(4px);
}
body[dir="rtl"] .branches__bracket:hover:not(.is-active),
html[dir="rtl"] .branches__bracket:hover:not(.is-active) {
  transform: translateX(-4px);  /* mirror direction in RTL */
}
.branches__bracket.is-active {
  background: var(--color-plum);
  border-color: var(--color-plum);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(51, 32, 42, 0.25);
}

.branches__bracket-name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  color: var(--color-plum);
  letter-spacing: 0;
  line-height: 1.3;
  transition: color 0.4s var(--ease-out-soft);
}
.branches__bracket.is-active .branches__bracket-name {
  color: var(--color-blush);
}
body[dir="rtl"] .branches__bracket-name,
html[dir="rtl"] .branches__bracket-name {
  font-family: var(--font-ar);
}

.branches__bracket-tag {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-coral);
  white-space: nowrap;
  transition: color 0.4s var(--ease-out-soft);
}
.branches__bracket.is-active .branches__bracket-tag {
  color: var(--color-blush);
}
body[dir="rtl"] .branches__bracket-tag,
html[dir="rtl"] .branches__bracket-tag {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

/* Right-side meta column: status tag + "Open in Maps" link, stacked. */
.branches__bracket-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
body[dir="rtl"] .branches__bracket-meta,
html[dir="rtl"] .branches__bracket-meta {
  align-items: flex-start;
}

/* Subtle secondary link — opens the branch's real Google Maps location. */
.branches__bracket-maps {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #60202e;            /* burgundy — quiet against white bracket */
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.8;
  transition: color 0.3s var(--ease-out-soft), opacity 0.3s var(--ease-out-soft);
}
.branches__bracket-maps:hover,
.branches__bracket-maps:focus-visible {
  color: var(--color-coral);
  opacity: 1;
  text-decoration: underline;
}
.branches__bracket.is-active .branches__bracket-maps {
  color: var(--color-blush);
  opacity: 0.9;
}
body[dir="rtl"] .branches__bracket-maps,
html[dir="rtl"] .branches__bracket-maps {
  font-family: var(--font-ar);
}

/* === Mobile (stack vertically) === */
@media (max-width: 900px) {
  .branches__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Mobile reorder: branch list FIRST so user picks a branch before
     seeing visual context. Images + map (inside .branches__panels)
     follow in DOM order (images → map), which is the desired sequence. */
  .branches__list   { order: 1; }
  .branches__panels { order: 2; }
  .branches__images {
    height: clamp(280px, 60vw, 380px);
  }
  .branches__map {
    height: clamp(240px, 50vw, 320px);
  }
  .branches__bracket {
    min-height: 56px;
    padding: 14px 18px;
  }
}

/* === Reduced motion ===
   Skip entry animations and shutter — show everything immediately
   and use instant swap on branch change. */
@media (prefers-reduced-motion: reduce) {
  .branches__eyebrow,
  .branches__heading,
  .branches__heading-inner,
  .branches__images,
  .branches__map,
  .branches__bracket {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================
   GALLERY (Step 6)
   Cartier-inspired floating 3D scene (Option A: Three.js) with
   2D mosaic fallback (Option B: CSS grid). Section background is a
   warmer dark variant — distinct from preloader/footer plum.
   Spec: BRAND_CONTEXT.md §14.3
   ============================================= */
.gallery {
  position: relative;
  min-height: 100vh;
  background: #2a1a22;
  color: var(--color-blush);
  padding-block: clamp(var(--space-8), 8vw, var(--space-12));
  overflow: hidden;
  isolation: isolate;
}

/* === Full-bleed 3D mode (Stage 1 rebuild) =====================
   When .is-3d is set, the section becomes a fixed-height container
   and the canvas fills it edge-to-edge. The header floats over the
   top with a fading gradient behind it. In 2D fallback mode none of
   these overrides apply — the section keeps normal flow.
*/
.gallery.is-3d {
  height: 100vh;
  min-height: 100vh;
  padding-block: 0;
}

/* Subtle 4-X pattern background texture at ~4% opacity per §14.3.
   Rendered as a CSS radial-gradient mesh so we don't ship another
   asset; sits behind everything in the section. */
.gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(240, 100, 73, 0.05) 0, transparent 8%),
    radial-gradient(circle at 78% 24%, rgba(246, 232, 234, 0.04) 0, transparent 9%),
    radial-gradient(circle at 30% 80%, rgba(240, 100, 73, 0.05) 0, transparent 10%),
    radial-gradient(circle at 88% 86%, rgba(246, 232, 234, 0.035) 0, transparent 9%);
  pointer-events: none;
  z-index: 0;
}
/* The pattern texture would compete with the 3D scene; suppress it
   in 3D mode. */
.gallery.is-3d::before { display: none; }

/* Gradient overlay behind the header text — only visible in 3D mode.
   Provides legibility for the eyebrow + heading without creating a
   hard seam against the 3D scene. */
.gallery__overlay {
  display: none;
}
.gallery.is-3d .gallery__overlay {
  display: block;
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 20%;          /* trimmed from 40% — header is smaller now */
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(42, 26, 34, 0.85) 0%,
    rgba(42, 26, 34, 0.5)  50%,
    rgba(42, 26, 34, 0)    100%);
}

/* === Header (sits ABOVE the 3D canvas in the DOM layer) === */
.gallery__header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  margin-top: clamp(1rem, 2vw, 2rem);
}
/* In 3D mode the header floats over the canvas at top-center.
   Pushed higher (top ~5-7vh instead of 9-vh) now that the text is
   smaller — sits in the top ~15% of the section. */
.gallery.is-3d .gallery__header {
  position: absolute;
  top: clamp(40px, 5.5vh, 72px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  max-width: var(--container-max);
  z-index: 3;
  pointer-events: none;          /* lets clicks pass through to canvas */
}

.gallery__eyebrow {
  display: inline-block;
  font-size: 11px;       /* trimmed from 13px — quieter header */
  color: var(--color-coral);
  margin-bottom: 0.625rem;
  opacity: 0;            /* JS reveals on scroll-in */
  transform: translateY(8px);
}

.gallery__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  /* Reduced ~60% from previous clamp(2rem, 4vw, 3rem) so the 3D
     scene + image planes take visual priority. */
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: 0.04em;
  color: var(--color-blush);
  line-height: var(--lh-snug);
  opacity: 0;            /* JS reveals on scroll-in */
  transform: translateY(14px);
}
body[dir="rtl"] .gallery__heading,
html[dir="rtl"] .gallery__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* === Stage (canvas wrapper + fallback grid both live here) === */
.gallery__stage {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* In 3D mode the stage fills the section absolutely so the canvas
   sits edge-to-edge behind the header overlay. */
.gallery.is-3d .gallery__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* === 3D canvas wrapper ===
   When 3D path is active, .is-3d is added to the section and the
   canvas is rendered into this wrapper. Otherwise it stays empty
   and the fallback grid below is visible. */
.gallery__canvas-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
  display: none;             /* Hidden until JS confirms 3D path */
  opacity: 0;                /* Fade-in on scene ready */
  transition: opacity 0.8s var(--ease-out-soft);
}
.gallery.is-3d .gallery__canvas-wrap {
  display: block;
  /* Full-section canvas — Stage 1 rebuild */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
}
.gallery.is-3d.is-3d-ready .gallery__canvas-wrap {
  opacity: 1;
}
.gallery__canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* === 2D fallback mosaic ===
   Default state: shown. JS hides it when 3D scene is initialized. */
.gallery__grid {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 18vw;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  list-style: none;
}
.gallery.is-3d .gallery__grid {
  display: none;             /* 3D path hides the fallback grid */
}

/* Tile aspect-ratio variants — asymmetric mosaic
   Mix of portrait (2 rows), landscape (2 cols), and square (1×1). */
.gallery__tile {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(51, 32, 42, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;                /* JS reveals on scroll-in */
  transform: translateY(28px) scale(0.97);
  will-change: transform;
}
.gallery__tile--portrait  { grid-row: span 2; grid-column: span 1; }
.gallery__tile--landscape { grid-row: span 1; grid-column: span 2; }
.gallery__tile--square    { grid-row: span 1; grid-column: span 1; }

.gallery__tile-btn {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.gallery__tile-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Warm moody filter for visual consistency across placeholder
     photos. Removed when client photography arrives. */
  filter: saturate(0.85) brightness(0.82) sepia(0.18) hue-rotate(-8deg);
  transition:
    transform 0.6s var(--ease-out-soft),
    filter 0.5s var(--ease-out-soft);
}
.gallery__tile-btn::after {
  /* Subtle inner gradient for legibility / drama */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(42, 26, 34, 0.55) 100%);
  pointer-events: none;
}
.gallery__tile-btn:hover img,
.gallery__tile-btn:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1.0) brightness(0.95) sepia(0.08) hue-rotate(-4deg);
}
.gallery__tile-btn:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
}

/* === Responsive 2D fallback === */
@media (max-width: 1100px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 22vw;
  }
}
@media (max-width: 768px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 38vw;
  }
  .gallery__tile--landscape { grid-column: span 2; }
}
@media (max-width: 480px) {
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 60vw;
  }
  .gallery__tile--portrait,
  .gallery__tile--landscape,
  .gallery__tile--square {
    grid-row: span 1;
    grid-column: span 1;
  }
}

/* =============================================
   GALLERY LIGHTBOX
   Plum-backed full-viewport modal with arrows + counter.
   ============================================= */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(51, 32, 42, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out-soft);
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.gallery-lightbox__stage {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: block;
  transform: scale(0.92);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-out-soft),
    opacity 0.4s var(--ease-out-soft);
}
.gallery-lightbox.is-open .gallery-lightbox__img {
  transform: scale(1);
  opacity: 1;
}
.gallery-lightbox.is-changing .gallery-lightbox__img {
  opacity: 0;
  transform: scale(0.98);
}

/* Close button (top-right) */
.gallery-lightbox__close {
  position: absolute;
  top: 28px;
  inset-inline-end: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(246, 232, 234, 0.08);
  color: var(--color-coral);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s var(--ease-out-soft),
    transform 0.3s var(--ease-out-soft);
}
.gallery-lightbox__close svg { width: 24px; height: 24px; }
.gallery-lightbox__close:hover {
  background: rgba(240, 100, 73, 0.18);
  transform: scale(1.06);
}
.gallery-lightbox__close:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
}

/* Counter (top-center) */
.gallery-lightbox__counter {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  color: var(--color-blush);
  user-select: none;
}
.gallery-lightbox__counter-current { color: var(--color-coral); }

/* Navigation arrows (vertically centered, outside the image) */
.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: rgba(246, 232, 234, 0.06);
  color: var(--color-coral);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s var(--ease-out-soft),
    transform 0.3s var(--ease-out-soft);
}
.gallery-lightbox__nav svg { width: 28px; height: 28px; }
.gallery-lightbox__nav--prev { inset-inline-start: 32px; }
.gallery-lightbox__nav--next { inset-inline-end: 32px; }
/* Mirror chevrons in RTL so arrows still point the right way */
body[dir="rtl"] .gallery-lightbox__nav svg,
html[dir="rtl"] .gallery-lightbox__nav svg {
  transform: scaleX(-1);
}
.gallery-lightbox__nav:hover {
  background: rgba(240, 100, 73, 0.18);
  transform: translateY(-50%) scale(1.1);
}
.gallery-lightbox__nav:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .gallery-lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .gallery-lightbox__nav--prev { inset-inline-start: 12px; }
  .gallery-lightbox__nav--next { inset-inline-end: 12px; }
  .gallery-lightbox__close { top: 16px; inset-inline-end: 16px; }
  .gallery-lightbox__counter { top: 22px; font-size: 0.8125rem; }
}

/* =============================================
   GALLERY — Reduced Motion
   Disable drift, stagger entry, and lightbox transitions; show
   everything immediately. Hover effects keep working but quicker.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .gallery__eyebrow,
  .gallery__heading,
  .gallery__tile {
    opacity: 1 !important;
    transform: none !important;
  }
  .gallery__canvas-wrap {
    transition: none !important;
  }
  .gallery-lightbox,
  .gallery-lightbox__img {
    transition-duration: 0.15s !important;
  }
  .gallery__tile-btn img {
    transition-duration: 0.2s !important;
  }
}

/* =============================================
   TESTIMONIALS (Section 9 / Step 7)
   Single quote at a time on a blush background. No heading by
   design. Auto-advances with a slow crossfade; pagination dots
   are the only manual control. Premium, restrained, editorial.
   ============================================= */
.testimonials {
  background: var(--color-blush);     /* #f6e8ea — brand "breathing space" */
  padding-block: clamp(80px, 9vw, 120px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.testi__stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* === Decorative opening quote mark ===
   The single Cormorant Garamond use outside the preloader / pillar
   (decorative glyph only, per spec). 40% coral over blush. */
.testi__mark {
  font-family: var(--font-display);   /* Cormorant Garamond */
  font-weight: var(--fw-light);
  font-size: clamp(60px, 6vw, 80px);
  line-height: 0.8;
  color: var(--color-coral);
  opacity: 0.4;
  margin-bottom: 16px;
  user-select: none;
  /* The glyph carries no semantic meaning. Centered via section text-align. */
}

/* === Track / items ===
   Only one item visible at a time. We stack them in the same grid
   cell so they don't push layout when transitioning. JS toggles
   .is-active + aria-hidden + tabindex; GSAP crossfades opacity. */
.testi__track {
  position: relative;
  display: grid;
  /* Single cell; all items live in it stacked. */
  grid-template-columns: 1fr;
  min-height: clamp(160px, 18vh, 220px);
}
.testi__item {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out-soft);
}
.testi__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.testi__quote {
  font-family: var(--font-en);
  font-weight: var(--fw-light);       /* 300 — Raleway Light */
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: var(--color-plum);
  margin: 0 auto;
  max-width: 30ch;
  /* Quotes don't need a max-width too wide — keeps the typographic
     rhythm tight and forces line breaks at editorial intervals. */
}
/* Arabic renders ≈10% larger at equivalent point size — scale down */
body[dir="rtl"] .testi__quote,
html[dir="rtl"] .testi__quote {
  font-family: var(--font-ar);        /* IBM Plex Sans Arabic */
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: 0;
  line-height: 1.75;
}
/* Inside a single .testi__quote, only one of .en-text/.ar-text
   shows (existing global rules). They're inline spans inside a <p>. */

.testi__attribution {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);      /* 500 — Raleway Medium */
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-burgundy);
  margin-top: 48px;
}
body[dir="rtl"] .testi__attribution,
html[dir="rtl"] .testi__attribution {
  font-family: var(--font-ar);
  letter-spacing: 0.02em;
}

/* === Pagination dots ===
   8px circles inactive, animate to 24×8 pill when active. */
.testi__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 64px;
}
.testi__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(51, 32, 42, 0.25);   /* plum @ 25% */
  cursor: pointer;
  transition:
    width 0.4s var(--ease-out-soft),
    background-color 0.3s var(--ease-out-soft),
    opacity 0.3s var(--ease-out-soft);
}
.testi__dot:hover {
  background: rgba(51, 32, 42, 0.5);
}
.testi__dot.is-active {
  width: 24px;
  background: var(--color-coral);
}
.testi__dot.is-active:hover {
  background: var(--color-coral);       /* don't dim the active state */
}
.testi__dot:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 4px;
}

/* === Mobile === */
@media (max-width: 640px) {
  .testimonials {
    padding-block: 80px;
  }
  .testi__stage {
    max-width: 90%;
  }
  .testi__attribution {
    font-size: 13px;
    margin-top: 40px;
  }
  .testi__dots {
    margin-top: 48px;
    gap: 10px;
  }
  .testi__dot {
    width: 6px;
    height: 6px;
  }
  .testi__dot.is-active {
    width: 18px;
  }
}

/* === Reduced motion ===
   No crossfade — instant swap. Auto-advance is disabled in JS. */
@media (prefers-reduced-motion: reduce) {
  .testi__item {
    transition: none !important;
  }
  .testi__dot {
    transition: none !important;
  }
}

/* =============================================
   FAQ (Section 10 / Step 8)
   Classic accordion. Click anywhere on a question row to toggle.
   Multiple questions can be open at once. Clean white section,
   centered column. JSON-LD FAQPage schema in index.html mirrors
   the English content exactly.
   ============================================= */
.faq {
  background: var(--color-white);     /* #ffffff */
  padding-block: clamp(80px, 9vw, 120px);
  color: var(--color-plum);
}

.faq__inner {
  max-width: 800px;
  margin-inline: auto;
}

/* --- Header --- */
.faq__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-plum);
  text-align: center;
  margin-bottom: 64px;
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
}
body[dir="rtl"] .faq__heading,
html[dir="rtl"] .faq__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* --- List --- */
.faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq__item {
  margin: 0;
  padding: 0;
  /* 24px vertical gap between rows per spec, applied as item-level
     padding-bottom so the row's bottom border sits where eye expects */
}
.faq__item + .faq__item {
  margin-top: 24px;
}

/* --- Question button (full-width clickable row) --- */
.faq__q {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(51, 32, 42, 0.08);
  padding: 16px 0;
  margin: 0;
  width: 100%;
  min-height: 48px;          /* touch target floor */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: start;          /* mirrors in RTL automatically */
  color: var(--color-plum);
  transition: color 0.2s var(--ease-out-soft);
  font-family: inherit;
}
.faq__q:hover {
  color: var(--color-burgundy);
}
.faq__q:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq__q-text {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.4;
  color: inherit;
}
body[dir="rtl"] .faq__q-text,
html[dir="rtl"] .faq__q-text {
  font-family: var(--font-ar);
  font-weight: var(--fw-medium);   /* IBM Plex 500 reads ≈ Raleway 600 */
}

/* --- Chevron --- */
.faq__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: rgba(51, 32, 42, 0.6);
  transform-origin: center;
  transition: transform 0.3s var(--ease-out-soft);
}
.faq__q[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
}

/* --- Answer --- */
.faq__a {
  overflow: hidden;
  /* `hidden` attribute on the answer keeps it out of the a11y tree
     until JS expands. CSS shows it once `hidden` is removed. */
}
.faq__a-text {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: rgba(51, 32, 42, 0.8);
  padding-top: 16px;
  padding-bottom: 24px;
  margin: 0;
  max-width: 70ch;
}
body[dir="rtl"] .faq__a-text,
html[dir="rtl"] .faq__a-text {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.85;
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .faq {
    padding-block: 80px;
  }
  .faq__inner {
    max-width: 90%;
  }
  .faq__heading {
    margin-bottom: 48px;
  }
  .faq__q {
    padding: 18px 0;
    gap: 12px;
  }
  .faq__a-text {
    padding-bottom: 20px;
  }
}

/* --- Reduced motion: no chevron rotation transition, no
       slide-down. JS applies an instant height swap. --- */
@media (prefers-reduced-motion: reduce) {
  .faq__chevron,
  .faq__a,
  .faq__q {
    transition: none !important;
  }
}

/* =============================================
   CONTACT (Section 11 / Step 9)
   Two-column dark-plum section: inline form (left) + map (right),
   alternatives strip below, privacy footnote. Borderless premium
   form with floating labels.
   ============================================= */
.contact {
  background: var(--color-plum);
  color: var(--color-blush);
  padding-block: clamp(80px, 9vw, 120px);
}
.contact__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.contact__header {
  margin-bottom: 48px;
  max-width: 720px;
  text-align: start;
}
.contact__eyebrow {
  display: block;
  text-align: start;
  font-size: 11px;
  color: var(--color-coral);
  margin-bottom: 12px;
}
.contact__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-blush);
  text-align: start;
  line-height: var(--lh-snug);
  margin: 0;
  letter-spacing: 0.01em;
}
body[dir="rtl"] .contact__heading,
html[dir="rtl"] .contact__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

.contact__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 80px;
  align-items: start;
}

/* === Floating-label field === */
/* Reused by both inline contact form and the popup form. Two
   variants live side-by-side via .contact-form vs .contact-form--light.
   The dark variant is used in the plum Contact section; the light
   variant is used inside the blush popup card. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}
.field {
  position: relative;
  display: block;
}
.field__input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(246, 232, 234, 0.2);
  color: var(--color-blush);
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 1.4;
  padding: 16px 0 12px;
  outline: none;
  transition: border-bottom-color 0.3s var(--ease-out-soft);
  border-radius: 0;     /* iOS default radii squashed */
}
.field__input:focus {
  border-bottom: 2px solid var(--color-coral);
  padding-bottom: 11px;    /* 12px - 1px to compensate for thicker border */
}
.field__input::placeholder {
  color: transparent;     /* placeholder space is " " to keep :placeholder-shown logic; we never want it visible */
}
body[dir="rtl"] .field__input,
html[dir="rtl"] .field__input {
  font-family: var(--font-ar);
}

.field__label {
  position: absolute;
  inset-inline-start: 0;
  top: 16px;
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 16px;
  color: rgba(246, 232, 234, 0.65);
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  transform-origin: var(--label-origin, top left);
  transition:
    transform 0.25s var(--ease-out-soft),
    color     0.25s var(--ease-out-soft),
    letter-spacing 0.25s var(--ease-out-soft);
  white-space: nowrap;
}
body[dir="rtl"] .field__label,
html[dir="rtl"] .field__label {
  font-family: var(--font-ar);
  --label-origin: top right;
}

/* Float the label up when input is focused or not empty.
   :placeholder-shown is FALSE when input has any text (because
   placeholder=" " is just a space — never shown). So the inverse
   `:not(:placeholder-shown)` matches a filled field. */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-22px) scale(0.75);
  color: var(--color-blush);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field__req {
  color: var(--color-coral);
}

/* Select uses :has() with the empty default option still selected
   to detect "no choice made"; flips back when a real option is chosen. */
.field--select .field__input {
  padding-inline-end: 36px;     /* space for chevron */
  cursor: pointer;
  /* The native select control draws its own dropdown arrow — hide */
  background-image: none;
}
.field--select:has(.field__select:not(:focus) > option[value=""]:checked) .field__label {
  /* Empty + not focused → keep label at rest position */
  transform: none;
  color: rgba(246, 232, 234, 0.65);
  letter-spacing: 0;
  text-transform: none;
}
.field--select:has(.field__select:focus) .field__label,
.field--select:has(.field__select:not(:invalid)) .field__label {
  transform: translateY(-22px) scale(0.75);
  color: var(--color-blush);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field__chevron {
  position: absolute;
  inset-inline-end: 0;
  top: 20px;
  width: 16px;
  height: 16px;
  color: rgba(246, 232, 234, 0.6);
  pointer-events: none;
}

.field__textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: 24px;       /* extra room since textarea label can't overlap */
  font-family: inherit;
}

/* Error message slot — JS toggles aria-invalid + text */
.field__error {
  display: block;
  min-height: 0;
  font-size: 13px;
  color: var(--color-coral);
  margin-top: 6px;
  line-height: 1.4;
  /* Empty span renders zero-height; population by JS expands it */
}
.field[data-invalid="true"] .field__error {
  min-height: 1.2em;
}
.field[data-invalid="true"] .field__input {
  border-bottom-color: var(--color-coral);
}

.contact-form__privacy {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 11px;
  color: rgba(246, 232, 234, 0.5);
  margin: 16px 0 8px;
  line-height: 1.5;
}
body[dir="rtl"] .contact-form__privacy,
html[dir="rtl"] .contact-form__privacy {
  font-family: var(--font-ar);
}

.contact-form__submit {
  appearance: none;
  border: 0;
  background: var(--color-coral);
  color: var(--color-plum);
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 8px;
  cursor: pointer;
  align-self: start;
  margin-top: 16px;
  transition:
    transform 0.3s var(--ease-out-soft),
    box-shadow 0.3s var(--ease-out-soft),
    opacity 0.2s var(--ease-out-soft);
}
.contact-form__submit:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(240, 100, 73, 0.25);
}
.contact-form__submit:active {
  transform: scale(0.98);
}
.contact-form__submit:focus-visible {
  outline: 2px solid var(--color-blush);
  outline-offset: 3px;
}
.contact-form__submit[disabled],
.contact-form.is-sending .contact-form__submit {
  opacity: 0.7;
  cursor: progress;
  animation: contactSendingPulse 1.6s ease-in-out infinite;
}
@keyframes contactSendingPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}
.contact-form__submit--full {
  width: 100%;
  align-self: stretch;
}

.contact-form__error {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--color-coral);
  margin: 12px 0 0;
}
body[dir="rtl"] .contact-form__error,
html[dir="rtl"] .contact-form__error {
  font-family: var(--font-ar);
}

/* === Success state (replaces form on submit) ===
   Default state is hidden via [hidden] HTML attribute — `display:
   flex` only applies once JS removes that attribute. Without the
   :not() guard, the class rule overrides the UA [hidden] rule by
   source order and the success state leaks into the grid as a
   stray cell. */
.contact-form__success {
  display: none;
}
.contact-form__success:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 20px;
  min-height: 320px;
  border: 1px dashed rgba(246, 232, 234, 0.15);
  border-radius: 12px;
}
.contact-form__success-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.contact-form__success-text {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--color-blush);
  max-width: 36ch;
  margin: 0;
  line-height: 1.5;
}
body[dir="rtl"] .contact-form__success-text,
html[dir="rtl"] .contact-form__success-text {
  font-family: var(--font-ar);
}

/* === Map column === */
.contact__map-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact__map {
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: 12px;
  filter: grayscale(40%) contrast(1.1);
  background: #1a0d12;
}
.contact__map-caption {
  text-align: start;
}
.contact__map-name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  color: var(--color-blush);
  margin: 0;
}
.contact__map-address {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: rgba(246, 232, 234, 0.7);
  margin: 4px 0 0;
}
body[dir="rtl"] .contact__map-name,
body[dir="rtl"] .contact__map-address,
html[dir="rtl"] .contact__map-name,
html[dir="rtl"] .contact__map-address {
  font-family: var(--font-ar);
}

/* === Alternatives strip === */
.contact__alts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(246, 232, 234, 0.1);
}
.contact__alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: rgba(246, 232, 234, 0.8);
  text-decoration: none;
  transition: color 0.3s var(--ease-out-soft);
}
.contact__alt:hover {
  color: var(--color-coral);
}
.contact__alt-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
body[dir="rtl"] .contact__alt,
html[dir="rtl"] .contact__alt {
  font-family: var(--font-ar);
}

/* === Contact mobile === */
@media (max-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact__map {
    height: 320px;
  }
  .contact__alts {
    gap: 20px;
    margin-top: 32px;
    flex-direction: column;
    align-items: center;
  }
  .contact__header {
    text-align: center;
  }
  .contact__eyebrow,
  .contact__heading {
    text-align: center;
  }
}

/* =============================================
   POPUP — Lead capture (mounted at body level)
   ============================================= */
.popup {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-soft);
}
.popup[hidden] { display: none; }
.popup.is-open {
  opacity: 1;
  pointer-events: auto;
}
.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(51, 32, 42, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.popup__card {
  position: relative;
  background: var(--color-blush);
  color: var(--color-plum);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 48px 40px;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(26, 13, 18, 0.3);
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-out-soft),
    opacity 0.5s var(--ease-out-soft);
}
.popup.is-open .popup__card {
  transform: scale(1);
  opacity: 1;
}

.popup__close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--color-plum);
  cursor: pointer;
  padding: 4px;
  transition: transform 0.3s var(--ease-out-soft);
}
.popup__close svg { width: 100%; height: 100%; }
.popup__close:hover {
  transform: rotate(90deg);
}
.popup__close:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
  border-radius: 4px;
}

.popup__title {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  color: var(--color-plum);
  margin: 0 0 12px;
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
}
body[dir="rtl"] .popup__title,
html[dir="rtl"] .popup__title {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.popup__sub {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 16px;
  color: rgba(51, 32, 42, 0.75);
  margin: 0 0 32px;
  line-height: 1.5;
}
body[dir="rtl"] .popup__sub,
html[dir="rtl"] .popup__sub {
  font-family: var(--font-ar);
}

/* Light variant of the form for use inside the blush popup card */
.contact-form--light .field__input {
  border-bottom-color: rgba(51, 32, 42, 0.2);
  color: var(--color-plum);
}
.contact-form--light .field__input:focus {
  border-bottom-color: var(--color-coral);
}
.contact-form--light .field__label {
  color: rgba(51, 32, 42, 0.6);
}
.contact-form--light .field__input:focus + .field__label,
.contact-form--light .field__input:not(:placeholder-shown) + .field__label {
  color: var(--color-plum);
}
.contact-form--light .field--select:has(.field__select:focus) .field__label,
.contact-form--light .field--select:has(.field__select:not(:invalid)) .field__label {
  color: var(--color-plum);
}
.contact-form--light .field--select:has(.field__select:not(:focus) > option[value=""]:checked) .field__label {
  color: rgba(51, 32, 42, 0.6);
}
.contact-form--light .field__chevron {
  color: rgba(51, 32, 42, 0.6);
}
.contact-form__success--light {
  border-color: rgba(51, 32, 42, 0.15);
}
.contact-form__success--light .contact-form__success-text {
  color: var(--color-plum);
}

/* =============================================
   TRUST STRIP (Section 12)
   ============================================= */
/* Trust Strip — thin blush band with infinite marquee of partner
   badges. ~70px tall. Sits between the contact/inline content
   above and the footer below. */
.trust-strip {
  background: var(--color-blush);
  padding: 18px 0;
  border-top: 1px solid rgba(51, 32, 42, 0.08);
  border-bottom: 1px solid rgba(51, 32, 42, 0.08);
  overflow: hidden;
  position: relative;
}
.trust-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.trust-strip__label {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-burgundy);
  white-space: nowrap;
}
body[dir="rtl"] .trust-strip__label,
html[dir="rtl"] .trust-strip__label {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

.trust-strip__marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
/* Edge fade so logos don't pop at the strip's edges */
.trust-strip__marquee::before,
.trust-strip__marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}
.trust-strip__marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-blush), transparent);
}
.trust-strip__marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-blush), transparent);
}

.trust-strip__marquee-track {
  display: flex;
  align-items: center;
  gap: 50px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}
.trust-strip__marquee-track img {
  height: 45px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* Track has two identical copies; translating -50% lands on the
   second copy, which looks identical to the first → seamless. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* RTL flow: marquee scrolls left-to-right to match reading
   direction. animation-direction: reverse plays the same
   keyframes from "to" back to "from" — visually equivalent
   to scrolling images rightward. */
html[dir="rtl"] .trust-strip__marquee-track,
body[dir="rtl"] .trust-strip__marquee-track {
  animation-direction: reverse;
}

@media (max-width: 768px) {
  .trust-strip {
    padding: 14px 0;
  }
  .trust-strip__inner {
    gap: 20px;
    padding: 0 20px;
  }
  .trust-strip__label {
    font-size: 10px;
  }
  .trust-strip__marquee-track {
    gap: 36px;
    animation-duration: 24s;
  }
  .trust-strip__marquee-track img {
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip__marquee-track {
    animation: none;
  }
}

/* =============================================
   FOOTER (Section 13)
   4 cols desktop / stacked mobile · decorative 4-X texture strip
   ============================================= */
.site-footer {
  background: #2a1a22;       /* deep plum-warm; sibling of section bg */
  color: var(--color-blush);
  padding: 32px 0 0;         /* columns pulled up; wordmark + bottom strip own the lower spacing */
  position: relative;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Decorative 4-X repeating pattern. Pure SVG via data-URI background.
   3% opacity — texture only. The 4-X is the brand mark element. */
.site-footer__pattern {
  height: 40px;
  width: 100%;
  margin-bottom: 48px;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'><g stroke='%23f06449' stroke-width='1.5' stroke-linecap='round' fill='none'><line x1='8'  y1='12' x2='32' y2='28'/><line x1='8'  y1='28' x2='32' y2='12'/><line x1='48' y1='12' x2='72' y2='28'/><line x1='48' y1='28' x2='72' y2='12'/></g></svg>");
  background-repeat: repeat-x;
  background-size: 80px 40px;
  background-position: center;
}

/* Layer 1 — four equal content columns, centered, capped so they
   don't sprawl on ultrawide viewports. */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin-inline: auto;
}

.site-footer__col-heading {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  color: var(--color-coral);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
body[dir="rtl"] .site-footer__col-heading,
html[dir="rtl"] .site-footer__col-heading {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}
.site-footer__col-heading--mt {
  margin-top: 32px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-blush);
}
.site-footer__brand-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
}
.site-footer__brand-icon svg { width: 100%; height: 100%; }
.site-footer__brand-text {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 20px;
  color: var(--color-blush);
  letter-spacing: 0.02em;
}
body[dir="rtl"] .site-footer__brand-text,
html[dir="rtl"] .site-footer__brand-text {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.site-footer__tagline {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 14px;
  color: rgba(246, 232, 234, 0.7);
  margin: 16px 0 0;
  max-width: 280px;
  line-height: 1.6;
}
body[dir="rtl"] .site-footer__tagline,
html[dir="rtl"] .site-footer__tagline {
  font-family: var(--font-ar);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__list li {
  margin: 0 0 12px;
}
.site-footer__list a {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: rgba(246, 232, 234, 0.8);
  text-decoration: none;
  transition: color 0.3s var(--ease-out-soft);
}
.site-footer__list a:hover {
  color: var(--color-coral);
}
body[dir="rtl"] .site-footer__list a,
html[dir="rtl"] .site-footer__list a {
  font-family: var(--font-ar);
}
.site-footer__list--plain li {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: var(--color-blush);
}
body[dir="rtl"] .site-footer__list--plain li,
html[dir="rtl"] .site-footer__list--plain li {
  font-family: var(--font-ar);
}
.site-footer__address {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: rgba(246, 232, 234, 0.6);
}
body[dir="rtl"] .site-footer__address,
html[dir="rtl"] .site-footer__address {
  font-family: var(--font-ar);
}

.site-footer__social {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(246, 232, 234, 0.7);
  transition: color 0.3s var(--ease-out-soft);
}
.site-footer__social-link svg {
  width: 20px;
  height: 20px;
}
.site-footer__social-link:hover {
  color: var(--color-coral);
}
.site-footer__social-link:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Layer 2 — massive edge-to-edge wordmark.
   Full-bleed (sits outside .site-footer__inner). The SVG scales to the
   container width via width:100% on a fixed viewBox; the 35% opacity
   keeps it a restrained brand whisper, not a shout. */
.site-footer__wordmark {
  width: 100%;
  margin: 56px 0 0;
  overflow: hidden;
  line-height: 0;
}
.site-footer__wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}
/* The global .ar-text rule shows Arabic as display:inline; the wordmark
   SVG must be block so width:100% scaling works. Re-assert block in RTL. */
html[dir="rtl"] .site-footer__wordmark .ar-text,
html[lang="ar"] .site-footer__wordmark .ar-text,
body[dir="rtl"] .site-footer__wordmark .ar-text {
  display: block !important;
}

/* Layer 3 — minimal bottom strip: © + legal on one side, demo
   watermark on the other. Sits back inside the padded inner. */
.site-footer__bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(246, 232, 234, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
  flex-wrap: wrap;
}
.site-footer__bottom-group {
  display: flex;
  align-items: center;
  gap: 6px 20px;
  flex-wrap: wrap;
  margin: 0;
}
.site-footer__bottom-group--right {
  justify-content: flex-end;
  text-align: end;
}
.site-footer__copy,
.site-footer__legal {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 12px;
  color: rgba(246, 232, 234, 0.5);
  margin: 0;
}
body[dir="rtl"] .site-footer__copy,
body[dir="rtl"] .site-footer__legal,
html[dir="rtl"] .site-footer__copy,
html[dir="rtl"] .site-footer__legal {
  font-family: var(--font-ar);
}
.site-footer__legal a {
  color: rgba(246, 232, 234, 0.6);
  text-decoration: none;
  transition: color 0.3s var(--ease-out-soft);
}
.site-footer__legal a:hover {
  color: var(--color-blush);
  text-decoration: underline;
}

/* Demo deploy watermark + notice — quiet, on the right side. */
.site-footer__demo-watermark,
.site-footer__demo-notice {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(246, 232, 234, 0.4);
}
body[dir="rtl"] .site-footer__demo-watermark,
body[dir="rtl"] .site-footer__demo-notice,
html[dir="rtl"] .site-footer__demo-watermark,
html[dir="rtl"] .site-footer__demo-notice {
  font-family: var(--font-ar);
}
.site-footer__demo-watermark a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out-soft);
}
.site-footer__demo-watermark a:hover,
.site-footer__demo-watermark a:focus-visible {
  color: var(--color-coral);
}

/* Split mobile wordmark (TAILOR / EXPRESS) — hidden on desktop; the
   single-line .site-footer__wordmark shows instead. Swapped at <=768px. */
.site-footer__wordmark-mobile { display: none; }

/* Footer tablet — 4 columns collapse to a 2×2 grid */
@media (max-width: 1024px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* Footer mobile — 2×2 column grid (left-aligned) + dramatically larger
   split TAILOR / EXPRESS wordmark. The single-line desktop wordmark is
   hidden here; the bottom strip stays centered. */
@media (max-width: 768px) {
  .site-footer {
    padding: 24px 0 0;
    text-align: start;          /* left-aligned (auto-mirrors in RTL) */
  }
  /* 2×2 grid: Explore | Contact (top) · Open | Follow (bottom) */
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;             /* row gap 32 · column gap 24 */
    text-align: start;
  }
  .site-footer__col {
    text-align: start;
  }
  .site-footer__col-heading {
    text-align: start;
  }
  /* Follow icons sit in a left-aligned row */
  .site-footer__social {
    justify-content: flex-start;
  }

  /* Swap the single-line wordmark for the split TAILOR / EXPRESS mark */
  .site-footer__wordmark {
    display: none;
  }
  .site-footer__wordmark-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 24px 0 16px;
  }
  .site-footer__wordmark-mobile svg {
    display: block;
    width: 95vw;
    height: auto;
    margin: 0 auto;             /* center each line horizontally */
  }

  /* Bottom strip stays centered and stacked */
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 16px 20px;
    font-size: 12px;
  }
  .site-footer__bottom-group,
  .site-footer__bottom-group--right {
    justify-content: center;
    text-align: center;
  }
}

/* =============================================
   Section 11-13 — Reduced motion overrides
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .field__input,
  .field__label,
  .contact-form__submit,
  .popup,
  .popup__card,
  .popup__close,
  .site-footer__list a,
  .site-footer__social-link {
    transition: none !important;
    animation: none !important;
  }
  .popup__close:hover {
    transform: none;
  }
  .contact-form__submit:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════
   SERVICES PAGE (services.html)
   Hero · At-a-glance · 6 service sections
   ═══════════════════════════════════════════ */

/* When the nav is on the services page it never has a hero photo
   behind it, so it can be solid blush from the start. */
.nav.nav--solid {
  background: rgba(246, 232, 234, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(51, 32, 42, 0.06);
}

/* Current-page link styling in nav */
.nav__links a[aria-current="page"],
.nav__panel-links a[aria-current="page"] {
  color: var(--color-coral);
}

/* === HERO === */
.svc-hero {
  background: var(--color-plum);
  color: var(--color-blush);
  min-height: 50vh;
  display: flex;
  align-items: center;
  /* Top padding clears the 60px fixed nav; total padding stays
     ~15vh combined so eyebrow→heading→sub-line breathe inside
     the shorter 50vh frame */
  padding: clamp(90px, 11vh, 130px) 0 clamp(30px, 4vh, 60px);
}
.svc-hero__inner {
  text-align: center;
  max-width: 880px;
}
.svc-hero__eyebrow {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: 24px;
  opacity: 0;
}
body[dir="rtl"] .svc-hero__eyebrow {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}
.svc-hero__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  color: var(--color-blush);
  margin-bottom: 24px;
  opacity: 0;
}
body[dir="rtl"] .svc-hero__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.svc-hero__sub {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.5;
  color: rgba(246, 232, 234, 0.8);
  max-width: 640px;
  margin-inline: auto;
  opacity: 0;
}
body[dir="rtl"] .svc-hero__sub {
  font-family: var(--font-ar);
  line-height: 1.75;
}
@media (max-width: 900px) {
  .svc-hero {
    min-height: 45vh;
    padding: clamp(90px, 12vh, 120px) 0 clamp(24px, 4vh, 40px);
  }
}

/* === AT-A-GLANCE OVERVIEW === */
.svc-glance {
  background: var(--color-blush);
  padding: 80px 0;
}
@media (max-width: 900px) {
  .svc-glance { padding: 60px 0; }
}
/* Mobile: hide the at-a-glance overview entirely — users scroll the
   6 real service sections below instead. display:none on the wrapper
   also hides all mini-cards + their scroll/flip animations. */
@media (max-width: 768px) {
  .svc-glance { display: none; }
}
.svc-glance__eyebrow {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-burgundy);
  margin-bottom: 32px;
}
body[dir="rtl"] .svc-glance__eyebrow {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}
.svc-glance__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .svc-glance__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* Card = 3D perspective container. Visual styling (bg, border,
   padding) moves to the two faces. Box-shadow stays on the
   card so the lift wraps both faces during the flip. */
.svc-glance__card {
  position: relative;
  display: block;
  perspective: 1200px;
  border-radius: 12px;
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: box-shadow 0.3s var(--ease-out-soft);
}
.svc-glance__card:hover {
  box-shadow: 0 8px 24px rgba(51, 32, 42, 0.1);
}

/* Inner element holds both faces stacked in the same grid cell
   and is what actually rotates. Default transition is the OUT
   easing (power3.in-equivalent) so mouse-leave reads snappy.
   Hover overrides with the IN easing for a soft landing. */
.svc-glance__card-inner {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.84, 0);
}

.svc-glance__face {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(240, 100, 73, 0.4);
  border-radius: 12px;
  padding: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
}
.svc-glance__face--front {
  background: var(--color-blush);
}
.svc-glance__face--back {
  background: var(--color-plum);
  color: var(--color-blush);
  transform: rotateY(180deg);
  align-items: flex-start;
  justify-content: space-between;
  border-color: rgba(246, 232, 234, 0.18);
}
/* The HERO accent now lives on the front face only */
.svc-glance__card--hero .svc-glance__face--front {
  border-color: var(--color-coral);
}

/* Hover flip — desktop only */
@media (hover: hover) {
  .svc-glance__card:hover .svc-glance__card-inner {
    transform: rotateY(180deg);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .svc-glance__card-inner {
    transition: none;
  }
  .svc-glance__card:hover .svc-glance__card-inner {
    transform: none;
  }
}

/* Back-face content typography */
.svc-glance__back-name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--color-blush);
  margin: 0 0 8px 0;
}
body[dir="rtl"] .svc-glance__back-name { font-family: var(--font-ar); }

.svc-glance__back-time {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin: 0 0 auto 0;
}
body[dir="rtl"] .svc-glance__back-time {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}

.svc-glance__back-cta {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--color-blush);
  border-bottom: 1px solid rgba(246, 232, 234, 0.4);
  padding-bottom: 4px;
  align-self: flex-start;
}
body[dir="rtl"] .svc-glance__back-cta { font-family: var(--font-ar); }

/* Flip-card hover replaces the previous 360° spin. The flip
   mechanic targets .svc-glance__card-inner; per-face styling
   and the hover rule live in their own block below. */

.svc-glance__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}
.svc-glance__icon svg { width: 100%; height: 100%; }
.svc-glance__name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--color-plum);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body[dir="rtl"] .svc-glance__name { font-family: var(--font-ar); }
.svc-glance__teaser {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(51, 32, 42, 0.7);
  margin: 0;
}
body[dir="rtl"] .svc-glance__teaser { font-family: var(--font-ar); line-height: 1.6; }
.svc-glance__badge {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-coral);
  color: var(--color-white);
  padding: 2px 7px;
  border-radius: 9999px;
  line-height: 1.4;
}
.svc-glance__card--hero { border-color: var(--color-coral); }

/* === SERVICE SECTIONS === */
.svc-section {
  background: var(--svc-bg, var(--color-white));
  padding: 120px 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  .svc-section { padding: 80px 0; }
}

/* Per-section accent + background tokens */
.svc-section--1 { --svc-accent: var(--color-plum);    --svc-bg: var(--color-blush); }
.svc-section--2 { --svc-accent: #2a1a22;              --svc-bg: var(--color-white); }
.svc-section--3 { --svc-accent: var(--color-sage);    --svc-bg: var(--color-blush); }
.svc-section--4 { --svc-accent: var(--color-coral);   --svc-bg: var(--color-white); }
.svc-section--5 { --svc-accent: var(--color-burgundy);--svc-bg: var(--color-blush); }
.svc-section--6 { --svc-accent: #2a1a22;              --svc-bg: var(--color-white); }

.svc-section__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}
.svc-section--media-right .svc-section__inner {
  flex-direction: row-reverse;
}
@media (max-width: 900px) {
  .svc-section__inner,
  .svc-section--media-right .svc-section__inner {
    flex-direction: column;
    gap: 32px;
  }
}

/* Media side — glass frame around the photo */
.svc-section__media {
  flex: 1;
  min-width: 0;
  /* Glass frame: 12px matte zone around image, blurred video
     visible at the edges, faint white highlight on the top edge */
  position: relative;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 12px 32px rgba(51, 32, 42, 0.25),
    0 4px 12px rgba(51, 32, 42, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.5s var(--ease-out-soft),
    box-shadow 0.5s var(--ease-out-soft);
}

/* Service-image entry: wrapper slides in from its column's
   outer edge as the section enters viewport. Direction flips
   in RTL so the image always slides from the side it visually
   occupies. JS animates to x:0 / opacity:1; once: true. */
.svc-section__media.slide-from-left {
  opacity: 0;
  transform: translateX(-80px);
}
.svc-section__media.slide-from-right {
  opacity: 0;
  transform: translateX(80px);
}
/* RTL: layout flips, so slide-from-left visual position is now
   the right column → it should slide in from the right edge */
html[dir="rtl"] .svc-section__media.slide-from-left,
body[dir="rtl"] .svc-section__media.slide-from-left {
  transform: translateX(80px);
}
html[dir="rtl"] .svc-section__media.slide-from-right,
body[dir="rtl"] .svc-section__media.slide-from-right {
  transform: translateX(-80px);
}
/* Reduced motion: no slide, no fade — images visible immediately.
   The JS animation never runs under reduced motion (initServicesPage
   early-returns), so this CSS reset is what keeps the images on
   screen at all. */
@media (prefers-reduced-motion: reduce) {
  .svc-section__media.slide-from-left,
  .svc-section__media.slide-from-right {
    opacity: 1;
    transform: none;
  }
}

.svc-section__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  /* Image stays sharp — frame owns the shadow.
     Entry motion (slide + fade) now lives on the wrapper
     (.svc-section__media.slide-from-*), so the image itself
     has no initial state. */
}
/* Hover lift — pointer devices only */
@media (hover: hover) {
  .svc-section__media:hover {
    transform: translateY(-4px);
    box-shadow:
      0 16px 40px rgba(51, 32, 42, 0.30),
      0 6px 16px rgba(51, 32, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-section__media {
    transition: none;
  }
  .svc-section__media:hover {
    transform: none;
  }
}

/* Content side */
.svc-section__content {
  flex: 1;
  min-width: 0;
}
.svc-section__number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1;
  color: var(--svc-accent);
  margin-bottom: 16px;
  opacity: 0;
  transform: scale(0.85);
  will-change: transform, opacity;
}
.svc-section__eyebrow {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc-accent);
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
body[dir="rtl"] .svc-section__eyebrow {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}
.svc-section__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  color: var(--color-plum);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(24px);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  will-change: transform, opacity;
}
body[dir="rtl"] .svc-section__heading {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.svc-section__badge {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-coral);
  color: var(--color-white);
  padding: 4px 10px;
  border-radius: 9999px;
  line-height: 1.6;
}
body[dir="rtl"] .svc-section__badge {
  font-family: var(--font-en);
}
.svc-section__desc {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(51, 32, 42, 0.85);
  margin-bottom: 24px;
  max-width: none;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
body[dir="rtl"] .svc-section__desc { font-family: var(--font-ar); line-height: 1.85; }
@media (max-width: 900px) {
  .svc-section__desc { font-size: 16px; }
}

/* Bullet list — coral dot + medium-weight text */
.svc-section__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-section__bullets li {
  position: relative;
  padding-inline-start: 22px;
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-plum);
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
}
body[dir="rtl"] .svc-section__bullets li {
  font-family: var(--font-ar);
}
.svc-section__bullets li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-coral);
}

/* Meta pills */
.svc-section__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(51, 32, 42, 0.2);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.5);
}
.svc-pill__label {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(51, 32, 42, 0.55);
}
body[dir="rtl"] .svc-pill__label {
  font-family: var(--font-ar);
  letter-spacing: 0;
  text-transform: none;
}
.svc-pill__value {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--color-plum);
}
body[dir="rtl"] .svc-pill__value { font-family: var(--font-ar); }

/* CTA — accent bg; blush text on dark accents, plum text on coral.
   Brief said "plum text" but plum-on-plum/burgundy/sage is unreadable. */
.svc-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--svc-accent);
  color: var(--color-blush);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft), filter 0.3s ease;
  box-shadow: 0 4px 16px rgba(51, 32, 42, 0.12);
}
body[dir="rtl"] .svc-section__cta { font-family: var(--font-ar); letter-spacing: 0; }
.svc-section__cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(51, 32, 42, 0.18);
  filter: brightness(1.05);
}
.svc-section--4 .svc-section__cta { color: var(--color-plum); }

/* Reduced motion: instant final state, no hover lift */
@media (prefers-reduced-motion: reduce) {
  .svc-hero__eyebrow,
  .svc-hero__heading,
  .svc-hero__sub,
  .svc-section__img,
  .svc-section__number,
  .svc-section__eyebrow,
  .svc-section__heading,
  .svc-section__desc,
  .svc-section__bullets li {
    opacity: 1 !important;
    transform: none !important;
  }
  .svc-glance__card:hover,
  .svc-section__cta:hover {
    transform: none !important;
    box-shadow: none;
    filter: none;
  }
}

/* ───────────────────────────────────────────
   SERVICES PAGE — BACKDROP VIDEO LAYER
   Fixed video + plum overlay sit behind the at-a-glance and
   6 service sections. Hero/trust/footer remain opaque and
   occlude the video at the page top and bottom.
   ─────────────────────────────────────────── */

.services-backdrop__video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  background-color: #33202a;  /* fallback before video paints */
  pointer-events: none;
}
/* Hide any UA-injected media controls (matches hero video pattern) */
.services-backdrop__video::-webkit-media-controls,
.services-backdrop__video::-webkit-media-controls-panel,
.services-backdrop__video::-webkit-media-controls-play-button,
.services-backdrop__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

.services-backdrop__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #33202a;
  opacity: 0.55;     /* 55% plum dim → 45% video visibility */
  z-index: 1;
  pointer-events: none;
}

/* All in-flow content must layer ABOVE the fixed overlay (z=1).
   Without explicit stacking contexts, normal-flow elements would
   paint below positioned z-indexed elements. */
.svc-hero,
.svc-glance,
.svc-section,
.trust-strip,
.site-footer {
  position: relative;
  z-index: 10;
}

/* ── Mobile-only scroll-driven image-sequence backdrop ──
   Replaces the video on <=768px. Sits at z:0 (same layer the video
   occupied), so the existing 55% plum overlay (z:1) still tints it
   and all content (z:10) still sits above. Desktop: hidden, video
   shows as before. */
.services-mobile-frames {
  display: none;             /* desktop: hidden */
}
@media (max-width: 768px) {
  /* Hide the video on mobile — the image sequence takes its place. */
  .services-backdrop__video {
    display: none !important;
  }
  .services-mobile-frames {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #33202a;      /* plum fallback before a frame paints */
    pointer-events: none;
  }
  .services-mobile-frames__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* HERO — 60% plum tint. Video shows through subtly behind the
   tint so the page reads as one continuous backdrop from the top.
   Effective video visibility = (1 - 0.6) × (1 - 0.55) ≈ 18%. */
.svc-hero { background: rgba(51, 32, 42, 0.6); }

/* Gentle wave at the hero's bottom edge (desktop only). It HANGS below
   the hero (top:100%) rather than sitting inside it — the hero bg is
   itself 60% plum, so an inside wave would composite to ~84% and read as
   a darker band. Below the edge it overlays the same video backdrop, so
   its 60% plum matches the hero exactly and the curve looks continuous.
   The 80px drop lands inside the at-a-glance section's 80px top padding,
   so it never overlaps the cards. */
.svc-hero__bottom-wave {
  position: absolute;
  top: 100%;               /* exactly at the hero edge — hero and wave are
                              both 60% plum over the SAME fixed backdrop, so
                              this is pixel-seamless (no overlap = no tint
                              doubling, integer edge = no sub-pixel gap) */
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 768px) {
  /* Show the wave on mobile but at 60px (25% less than desktop's 80px).
     preserveAspectRatio="none" stretches the SVG to the container, so the
     shorter height scales the curve's amplitude down proportionally. */
  .svc-hero__bottom-wave {
    display: block;
    height: 60px;
  }
}

/* AT-A-GLANCE — section background transparent so video shows
   through cleanly around the cards. Individual cards keep their
   own opaque blush bg (rule lives in the earlier services-page
   block) so they stay readable on their own. */
.svc-glance {
  background: transparent;
}

/* SERVICE SECTIONS — transparent so the video shows through.
   Overrides the alternating blush/white background tokens from the
   earlier services-page block. */
.svc-section,
.svc-section--1,
.svc-section--2,
.svc-section--3,
.svc-section--4,
.svc-section--5,
.svc-section--6 {
  background: transparent;
}

/* Service heading/desc/bullets were dark plum text designed for
   blush/white backgrounds. Over the dimmed video they need to flip
   to a light tone for AA contrast. */
.svc-section__heading { color: var(--color-blush); }
.svc-section__desc { color: rgba(246, 232, 234, 0.92); }
.svc-section__bullets li { color: var(--color-blush); }

/* Meta pills: lighten border + value text to read on dark video */
.svc-section .svc-pill {
  border-color: rgba(246, 232, 234, 0.35);
  background: rgba(51, 32, 42, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.svc-section .svc-pill__label { color: rgba(246, 232, 234, 0.65); }
.svc-section .svc-pill__value { color: var(--color-blush); }

/* Per-service photo shadow is owned by the .svc-section__media
   glass frame (defined earlier). No image-level shadow needed. */

/* TRUST + FOOTER already have opaque backgrounds (blush / deep plum)
   — they occlude the video when scrolled into view. No bg change. */

/* Reduced-motion: hide the video; overlay alone provides plum bg.
   Section text colours stay light so they remain readable on
   the plum overlay. */
@media (prefers-reduced-motion: reduce) {
  .services-backdrop__video {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   CONTACT — booking variant (Section 11 on homepage)
   Map LEFT, info + CTA RIGHT. Form removed.
   ═══════════════════════════════════════════ */
.contact__grid--booking {
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
  min-height: 380px;
}
.contact__grid--booking .contact__map-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 360px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.contact__grid--booking .contact__map {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
  filter: grayscale(35%) contrast(1.05);
}

/* RIGHT column content */
.contact__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.contact__info .contact__eyebrow {
  margin-bottom: 0;
}
.contact__info .contact__heading {
  margin: 0;
}
.contact__sub {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(246, 232, 234, 0.75);
  margin: 0;
  max-width: 52ch;
}
body[dir="rtl"] .contact__sub,
html[dir="rtl"] .contact__sub {
  font-family: var(--font-ar);
  line-height: 1.8;
}
@media (max-width: 768px) {
  .contact__sub { font-size: 16px; }
}

/* Branch info block */
.contact__branch {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(246, 232, 234, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact__branch-label {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin: 0 0 6px 0;
}
body[dir="rtl"] .contact__branch-label,
html[dir="rtl"] .contact__branch-label {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}
.contact__branch-name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--color-blush);
  margin: 0;
}
body[dir="rtl"] .contact__branch-name,
html[dir="rtl"] .contact__branch-name {
  font-family: var(--font-ar);
}
.contact__branch-address {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 14px;
  color: rgba(246, 232, 234, 0.7);
  margin: 0;
}
body[dir="rtl"] .contact__branch-address,
html[dir="rtl"] .contact__branch-address {
  font-family: var(--font-ar);
}
.contact__branch-hours {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--color-coral);
  margin: 6px 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact__branch-clock {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Booking CTA pill — mirrors hero btn--primary */
.contact__cta {
  align-self: flex-start;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: var(--color-coral);
  color: var(--color-plum);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: none;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(240, 100, 73, 0.25);
  transition:
    transform 0.3s var(--ease-out-soft),
    box-shadow 0.3s var(--ease-out-soft),
    filter 0.3s ease;
}
body[dir="rtl"] .contact__cta {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.contact__cta-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}
body[dir="rtl"] .contact__cta-arrow svg {
  transform: scaleX(-1);
}
@media (hover: hover) {
  .contact__cta:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(240, 100, 73, 0.35);
    filter: brightness(1.04);
  }
  .contact__cta:hover .contact__cta-arrow svg {
    transform: translateX(3px);
  }
  body[dir="rtl"] .contact__cta:hover .contact__cta-arrow svg {
    transform: translateX(-3px) scaleX(-1);
  }
}
.contact__cta:focus-visible {
  outline: 3px solid var(--color-blush);
  outline-offset: 3px;
}

/* Mobile stack: map on top, info below */
@media (max-width: 900px) {
  .contact__grid--booking {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
  }
  .contact__grid--booking .contact__map-wrap,
  .contact__grid--booking .contact__map {
    min-height: 280px;
  }
}

/* ═══════════════════════════════════════════
   POPUP — booking CTA variant (homepage only)
   Form removed. Single CTA pill.
   ═══════════════════════════════════════════ */
.popup__card--booking {
  text-align: center;
  padding-block: clamp(40px, 6vw, 56px);
  padding-inline: clamp(28px, 5vw, 48px);
  max-width: 460px;
}
.popup__title--booking {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--color-plum);
  margin: 0 0 8px 0;
  line-height: 1.2;
}
body[dir="rtl"] .popup__title--booking,
html[dir="rtl"] .popup__title--booking {
  font-family: var(--font-ar);
}
.popup__sub--booking {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 16px;
  color: rgba(51, 32, 42, 0.75);
  margin: 0 0 24px 0;
  line-height: 1.5;
}
body[dir="rtl"] .popup__sub--booking,
html[dir="rtl"] .popup__sub--booking {
  font-family: var(--font-ar);
  line-height: 1.8;
}

.popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--color-coral);
  color: var(--color-plum);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(240, 100, 73, 0.25);
  transition:
    transform 0.3s var(--ease-out-soft),
    box-shadow 0.3s var(--ease-out-soft),
    filter 0.3s ease;
}
body[dir="rtl"] .popup__cta {
  font-family: var(--font-ar);
  letter-spacing: 0;
}
.popup__cta-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}
body[dir="rtl"] .popup__cta-arrow svg {
  transform: scaleX(-1);
}
@media (hover: hover) {
  .popup__cta:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(240, 100, 73, 0.35);
    filter: brightness(1.04);
  }
  .popup__cta:hover .popup__cta-arrow svg {
    transform: translateX(3px);
  }
  body[dir="rtl"] .popup__cta:hover .popup__cta-arrow svg {
    transform: translateX(-3px) scaleX(-1);
  }
}
.popup__cta:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════
   CONTACT PAGE (contact.html)
   Hero · Booking CTA · 3 methods · 9 branches · inquiry form
   ═══════════════════════════════════════════ */

/* --- Section 1: hero (solid plum) --- */
.contact-hero {
  background: var(--color-plum);
  color: var(--color-blush);
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: clamp(90px, 11vh, 130px) 0 clamp(30px, 4vh, 60px);
}
.contact-hero__inner { text-align: center; max-width: 880px; }
.contact-hero__eyebrow { color: var(--color-coral); margin: 0 0 24px; }
.contact-hero__heading {
  font-family: var(--font-en); font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1;
  color: var(--color-blush); margin: 0 0 24px;
}
.contact-hero__sub {
  font-family: var(--font-en); font-weight: var(--fw-light);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.5;
  color: rgba(246, 232, 234, 0.8); max-width: 640px; margin: 0 auto;
}

/* --- Section 2: booking CTA (blush) --- */
.contact-booking { background: var(--color-blush); padding: clamp(60px, 8vh, 80px) 0; text-align: center; }
.contact-booking__eyebrow { margin: 0 0 16px; }
.contact-booking__heading {
  font-family: var(--font-en); font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.15;
  color: var(--color-plum); margin: 0 0 16px;
}
.contact-booking__sub {
  font-family: var(--font-en); font-weight: var(--fw-light); font-size: 17px;
  color: rgba(51, 32, 42, 0.75); max-width: 560px; margin: 0 auto 32px; line-height: 1.5;
}
.contact-booking__cta,
.inquiry-form__submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-coral); color: var(--color-plum);
  font-family: var(--font-en); font-weight: var(--fw-semibold);
  font-size: 14px; letter-spacing: 0.05em;
  padding: 18px 40px; border: none; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft);
}
.contact-booking__cta-arrow svg { width: 18px; height: 18px; display: block; }
/* RTL: flip the booking-CTA arrow to point left (matches the other CTA arrows) */
[dir="rtl"] .contact-booking__cta-arrow svg { transform: scaleX(-1); }
@media (hover: hover) {
  .contact-booking__cta:hover,
  .inquiry-form__submit:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(240, 100, 73, 0.35); }
}
.contact-booking__cta:focus-visible,
.inquiry-form__submit:focus-visible { outline: 3px solid var(--color-burgundy); outline-offset: 3px; }

/* --- Section 3: contact methods (white) --- */
.contact-methods { background: #ffffff; padding: clamp(60px, 8vh, 80px) 0; }
.contact-methods__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.method-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(51, 32, 42, 0.08);
  border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft);
}
@media (hover: hover) {
  .method-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(51, 32, 42, 0.10); }
}
.method-card__icon {
  font-size: 26px; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 14px;
  background: rgba(96, 32, 46, 0.06); color: var(--color-burgundy); margin-bottom: 20px;
}
.method-card__icon--whatsapp { color: #25D366; background: rgba(37, 211, 102, 0.08); }
.method-card__name {
  font-family: var(--font-en); font-weight: var(--fw-semibold);
  font-size: 1.25rem; color: var(--color-plum); margin: 0 0 12px;
}
.method-card__value {
  font-family: var(--font-en); font-weight: var(--fw-medium); font-size: 1rem;
  color: var(--color-burgundy); text-decoration: none; margin-bottom: 4px;
  transition: color 0.3s var(--ease-out-soft);
}
.method-card__value:hover { color: var(--color-coral); }
.method-card__value--link { font-weight: var(--fw-semibold); }
.method-card__desc {
  font-family: var(--font-en); font-weight: var(--fw-light); font-size: 0.875rem;
  color: rgba(51, 32, 42, 0.65); line-height: 1.6; margin: 12px 0 0;
}

/* --- Section 4: branches grid (blush) --- */
.contact-branches { background: var(--color-blush); padding: clamp(60px, 8vh, 80px) 0; text-align: center; }
.contact-branches__eyebrow { margin: 0 0 16px; }
.contact-branches__heading {
  font-family: var(--font-en); font-weight: var(--fw-bold);
  font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--color-plum); margin: 0 0 12px;
}
.contact-branches__sub {
  font-family: var(--font-en); font-weight: var(--fw-light); font-size: 17px;
  color: rgba(51, 32, 42, 0.7); margin: 0 auto 40px;
}
.contact-branches__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: start; }
.contact-branch-card {
  background: #ffffff; border: 1px solid rgba(51, 32, 42, 0.08);
  border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.contact-branch-card .branch-number {
  font-family: var(--font-display); font-weight: 300; font-size: 28px;
  color: var(--color-coral); line-height: 1;
}
.contact-branch-card .branch-name {
  font-family: var(--font-en); font-weight: var(--fw-semibold);
  font-size: 18px; color: var(--color-plum); margin: 0;
}
.contact-branch-card .branch-status {
  display: inline-block; font-family: var(--font-en); font-weight: var(--fw-semibold);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #515a47; background: rgba(81, 90, 71, 0.10); padding: 4px 10px; border-radius: var(--r-pill);
}
.contact-branch-card .branch-maps-link {
  font-family: var(--font-en); font-weight: var(--fw-semibold); font-size: 0.8125rem;
  color: var(--color-coral); text-decoration: none; margin-top: 4px;
}
.contact-branch-card .branch-maps-link:hover { text-decoration: underline; }

/* --- Section 5: inquiry form (plum-warm) --- */
.contact-inquiry { background: #2a1a22; padding: clamp(60px, 8vh, 80px) 0; }
.contact-inquiry__inner { max-width: 720px; }
.contact-inquiry__eyebrow { color: var(--color-coral); margin: 0 0 16px; }
.contact-inquiry__heading {
  font-family: var(--font-en); font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-blush); margin: 0 0 16px;
}
.contact-inquiry__sub {
  font-family: var(--font-en); font-weight: var(--fw-light); font-size: 17px;
  color: rgba(246, 232, 234, 0.75); margin: 0 0 32px; line-height: 1.5;
}
.inquiry-form { display: flex; flex-direction: column; gap: 20px; }
.inquiry-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.inquiry-form__field { display: flex; flex-direction: column; gap: 8px; }
.inquiry-form__label {
  font-family: var(--font-en); font-weight: var(--fw-medium); font-size: 0.8125rem;
  letter-spacing: 0.04em; color: rgba(246, 232, 234, 0.7);
}
.inquiry-form__input {
  font-family: var(--font-en); font-size: 1rem; color: var(--color-blush);
  background: rgba(246, 232, 234, 0.05); border: 1px solid rgba(246, 232, 234, 0.2);
  border-radius: 8px; padding: 14px 16px; width: 100%;
  transition: border-color 0.3s var(--ease-out-soft), background 0.3s var(--ease-out-soft);
}
.inquiry-form__input::placeholder { color: rgba(246, 232, 234, 0.4); }
.inquiry-form__input:focus { outline: none; border-color: var(--color-coral); background: rgba(246, 232, 234, 0.08); }
.inquiry-form__textarea { resize: vertical; min-height: 120px; }
.inquiry-form__submit { align-self: flex-start; margin-top: 4px; }
.inquiry-form__note {
  font-family: var(--font-en); font-weight: var(--fw-light); font-size: 0.8125rem;
  color: rgba(246, 232, 234, 0.5); margin: 4px 0 0;
}

/* --- RTL font swap for Arabic --- */
body[dir="rtl"] .contact-hero__heading,
body[dir="rtl"] .contact-hero__sub,
body[dir="rtl"] .contact-booking__heading,
body[dir="rtl"] .contact-booking__sub,
body[dir="rtl"] .contact-booking__cta,
body[dir="rtl"] .method-card__name,
body[dir="rtl"] .method-card__value,
body[dir="rtl"] .method-card__desc,
body[dir="rtl"] .contact-branches__heading,
body[dir="rtl"] .contact-branches__sub,
body[dir="rtl"] .contact-branch-card .branch-name,
body[dir="rtl"] .contact-inquiry__heading,
body[dir="rtl"] .contact-inquiry__sub,
body[dir="rtl"] .inquiry-form__label,
body[dir="rtl"] .inquiry-form__input,
body[dir="rtl"] .inquiry-form__submit,
body[dir="rtl"] .inquiry-form__note { font-family: var(--font-ar); }
body[dir="rtl"] .contact-hero__eyebrow,
body[dir="rtl"] .contact-booking__eyebrow,
body[dir="rtl"] .contact-branches__eyebrow,
body[dir="rtl"] .contact-inquiry__eyebrow,
body[dir="rtl"] .contact-branch-card .branch-status {
  font-family: var(--font-ar); letter-spacing: 0.04em; text-transform: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .contact-branches__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .contact-methods__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .contact-hero { min-height: 45vh; }
  .contact-branches__grid { grid-template-columns: 1fr; }
  .inquiry-form__row { grid-template-columns: 1fr; }
  .inquiry-form__submit { align-self: stretch; justify-content: center; width: 100%; }
}

/* ═══════════════════════════════════════════
   GALLERY PAGE (gallery.html)
   A single immersive 3D experience: a 180° semi-circular
   gallery where the camera rotates in place as the user scrolls.
   ═══════════════════════════════════════════ */

.gallery-experience {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #0a0508; /* matches the Three.js scene void so there's no flash before WebGL paints */
}

.gallery-experience__canvas-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#gallery-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.gallery-experience__overlay {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease-out; /* 0.8s so the post-intro fade-in reads cinematic */
}

/* Scroll-fade (during scroll) and intro-hidden (during the page-enter animation) */
.gallery-experience__overlay.is-faded,
.gallery-experience__overlay.is-hidden {
  opacity: 0;
}

/* Scroll lock while the 4s page-enter intro plays */
body.intro-playing {
  overflow: hidden;
  height: 100vh;
}

.gallery-experience__eyebrow {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f06449;
  margin-bottom: 12px;
}

.gallery-experience__heading {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #f6e8ea;
  text-shadow: 0 2px 12px rgba(51, 32, 42, 0.8);
  margin: 0;
}

.gallery-experience__sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(246, 232, 234, 0.7);
  margin-top: 8px;
}

/* Arabic overlay uses the Arabic font stack and aligns right in RTL */
body[dir="rtl"] .gallery-experience__heading,
body[dir="rtl"] .gallery-experience__sub { font-family: var(--font-ar); }
body[dir="rtl"] .gallery-experience__overlay { text-align: right; }

/* Reduced motion: no scroll-driven pin (handled in JS) — the section is a
   simple static viewport showing the initial camera framing. Keep the
   overlay visible since there's no "engagement" scroll to fade it out. */
@media (prefers-reduced-motion: reduce) {
  .gallery-experience__overlay { transition: none; }
}

@media (max-width: 768px) {
  .gallery-experience__overlay { top: 72px; }
}

/* ───────────────────────────────────────────
   GALLERY PAGE — transparent floating nav
   Scoped to .gallery-page-body so homepage/services/contact nav
   are untouched. Overrides .nav--solid AND .nav.is-scrolled (both
   single-class) via the higher-specificity body-scoped selector.
   Adapts the spec's .site-nav* names to this project's .nav* markup.
   ─────────────────────────────────────────── */
.gallery-page-body .nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nav elements high-contrast (blush) against the dark 3D scene */
.gallery-page-body .nav__brand-text,
.gallery-page-body .nav__phone,
.gallery-page-body .nav__lang,
.gallery-page-body .nav-menu-toggle {
  color: var(--color-blush);
}

/* Language toggle: blush text + faint blush border (its border uses
   currentColor by default, so pin the border explicitly at 0.4) */
.gallery-page-body .nav__lang {
  border-color: rgba(246, 232, 234, 0.4);
  background: transparent;
}

/* Logo text: subtle shadow so it stays legible over varied plane content */
.gallery-page-body .nav__brand-text { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

/* Phone icon + hamburger lines: subtle drop-shadow for readability */
.gallery-page-body .nav__phone,
.gallery-page-body .nav-menu-toggle__line {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* When the full-screen menu is open, the shared body.menu-open rules take
   over (transparent nav + blush elements) — already correct, nothing to add. */


/* ═══════════════════════════════════════════
   FAQ PAGE (faq.html)
   Reuses .contact-hero (solid plum hero), .faq / .faq__* accordion
   (wired by the shared initFAQ), trust strip, and footer. Only the
   welcome intro, category labels, accordion container width, and the
   "still have questions" CTA are page-specific.
   ═══════════════════════════════════════════ */

/* Hero — slightly shorter than the contact hero (FAQ is utilitarian) */
.faq-page-body .faq-hero { min-height: 45vh; display: flex; align-items: center; }
@media (max-width: 768px) {
  .faq-page-body .faq-hero { min-height: 40vh; }
}

/* Section 2 — welcome intro (blush band, elegant Cormorant italic) */
.faq-welcome {
  background: var(--color-blush);
  padding: clamp(40px, 7vw, 60px) 0;
}
.faq-welcome__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.faq-welcome__message {
  font-family: var(--font-display);   /* Cormorant Garamond */
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2rem);   /* ~28–32px */
  line-height: 1.5;
  color: var(--color-plum);
  margin: 0;
}
/* Cormorant has no Arabic glyphs — use the Arabic stack, upright */
body[dir="rtl"] .faq-welcome__message,
html[dir="rtl"] .faq-welcome__message {
  font-family: var(--font-ar);
  font-style: normal;
  line-height: 1.8;
}

/* Section 3 — accordion: widen container; category eyebrows between groups */
.faq-page-body .faq__inner { max-width: 880px; }
.faq__category {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-burgundy);
  margin: 40px 0 20px;
}
.faq__category:first-child { margin-top: 0; }
body[dir="rtl"] .faq__category,
html[dir="rtl"] .faq__category {
  font-family: var(--font-ar);
  letter-spacing: 0.05em;
  text-transform: none;
}
/* Answer links inherit the coral accent for affordance */
.faq__a-text a { color: var(--color-coral); text-decoration: underline; text-underline-offset: 2px; }
.faq__a-text a:hover { color: var(--color-burgundy); }

/* Section 4 — "still have questions" CTA (plum) */
.faq-cta {
  background: var(--color-plum);
  color: var(--color-blush);
  padding: clamp(48px, 8vw, 60px) 0;
  text-align: center;
}
.faq-cta__inner { max-width: 720px; margin-inline: auto; }
.faq-cta__heading {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-blush);
  margin: 8px 0 12px;
  letter-spacing: 0.01em;
}
body[dir="rtl"] .faq-cta__heading,
html[dir="rtl"] .faq-cta__heading { font-family: var(--font-ar); letter-spacing: 0; }
.faq-cta__sub {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: rgba(246, 232, 234, 0.75);
  margin: 0 0 28px;
}
body[dir="rtl"] .faq-cta__sub,
html[dir="rtl"] .faq-cta__sub { font-family: var(--font-ar); }
.faq-cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.faq-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 9999px;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out-soft), background 0.3s, color 0.3s;
}
body[dir="rtl"] .faq-cta__btn,
html[dir="rtl"] .faq-cta__btn { font-family: var(--font-ar); letter-spacing: 0; }
.faq-cta__btn--primary { background: var(--color-coral); color: var(--color-plum); }
.faq-cta__btn--ghost { background: transparent; color: var(--color-blush); border: 1px solid rgba(246, 232, 234, 0.5); }
@media (hover: hover) {
  .faq-cta__btn--primary:hover { transform: scale(1.02); }
  .faq-cta__btn--ghost:hover { background: var(--color-blush); color: var(--color-plum); }
}
.faq-cta__btn:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 3px; }
@media (max-width: 600px) {
  .faq-cta__actions { flex-direction: column; }
  .faq-cta__btn { justify-content: center; }
}

/* ═══════════════════════════════════════════
   BLOG — listing page (blog.html) + article pages (blog/*.html)
   Reuses .contact-hero (plum hero), trust strip, footer.
   ═══════════════════════════════════════════ */

/* Hero (reuses .contact-hero; just a height) */
.blog-hero { min-height: 42vh; display: flex; align-items: center; }
@media (max-width: 768px) { .blog-hero { min-height: 38vh; } }

/* Listing grid */
.blog-list { background: var(--color-blush); padding: clamp(48px, 8vw, 80px) 0; }
.blog-list__inner { max-width: 1100px; margin-inline: auto; }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.blog-card--featured { grid-column: 1 / -1; }
@media (max-width: 760px) { .blog-grid { grid-template-columns: 1fr; gap: 20px; } }

.blog-card {
  display: block;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(51, 32, 42, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft);
}
@media (hover: hover) {
  .blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(51, 32, 42, 0.12); }
}
.blog-card:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 3px; }
.blog-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #e9d9dd; }
.blog-card__body { padding: 24px; }
.blog-card__title {
  font-family: var(--font-en); font-weight: var(--fw-semibold);
  font-size: 1.375rem; line-height: 1.3; color: var(--color-plum); margin: 0 0 10px;
}
body[dir="rtl"] .blog-card__title { font-family: var(--font-ar); }
.blog-card__excerpt {
  font-family: var(--font-en); font-weight: var(--fw-regular, 400);
  font-size: 0.9375rem; line-height: 1.6; color: rgba(51, 32, 42, 0.78); margin: 0 0 16px;
}
body[dir="rtl"] .blog-card__excerpt { font-family: var(--font-ar); }
.blog-card__meta {
  font-family: var(--font-en); font-size: 0.8125rem; color: rgba(51, 32, 42, 0.55); margin: 0 0 12px;
}
body[dir="rtl"] .blog-card__meta { font-family: var(--font-ar); }
.blog-card__link { font-family: var(--font-en); font-weight: var(--fw-semibold); font-size: 0.875rem; color: var(--color-coral); }
body[dir="rtl"] .blog-card__link { font-family: var(--font-ar); }

/* ── Article page ── */
.article-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--color-plum);
}
@media (max-width: 768px) { .article-hero { min-height: 50vh; } }
.article-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(51,32,42,0.15) 0%, rgba(51,32,42,0.45) 55%, rgba(51,32,42,0.88) 100%);
}
.article-hero__inner { position: relative; z-index: 1; padding-block: clamp(32px, 6vw, 64px); max-width: 820px; }
.article-hero__eyebrow { color: var(--color-coral); }
.article-hero__title {
  font-family: var(--font-en); font-weight: var(--fw-bold);
  font-size: clamp(1.875rem, 4.5vw, 3rem); line-height: 1.15; color: var(--color-blush); margin: 8px 0 0;
  text-align: start;
}
body[dir="rtl"] .article-hero__title { font-family: var(--font-ar); }

.article-meta { background: #ffffff; border-bottom: 1px solid rgba(51,32,42,0.08); }
.article-meta__inner { display: flex; align-items: center; gap: 12px; padding-block: 16px; flex-wrap: wrap; }
.article-meta__item { font-family: var(--font-en); font-size: 0.875rem; color: rgba(51,32,42,0.6); }
body[dir="rtl"] .article-meta__item { font-family: var(--font-ar); }
.article-meta__dot { color: rgba(51,32,42,0.3); }
.article-meta__share { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.article-share__btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(51,32,42,0.15);
  background: none; cursor: pointer; display: grid; place-items: center;
  color: var(--color-plum); font-size: 0.9375rem; text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
@media (hover: hover) { .article-share__btn:hover { background: var(--color-plum); color: var(--color-blush); border-color: var(--color-plum); } }
.article-share__btn.is-copied { background: var(--color-coral); color: var(--color-plum); border-color: var(--color-coral); }

.blog-article { background: #ffffff; padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 80px); }
.blog-article__inner { max-width: 720px; margin-inline: auto; }
.blog-article__lead {
  font-family: var(--font-en); font-weight: var(--fw-light); font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6; color: var(--color-plum); margin: 0 0 32px;
}
body[dir="rtl"] .blog-article__lead { font-family: var(--font-ar); line-height: 1.9; }
.blog-article h2 {
  font-family: var(--font-en); font-weight: var(--fw-bold); font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.25; color: var(--color-plum); margin: 40px 0 14px; letter-spacing: 0.01em;
}
body[dir="rtl"] .blog-article h2 { font-family: var(--font-ar); letter-spacing: 0; }
.blog-article p {
  font-family: var(--font-en); font-weight: var(--fw-regular, 400); font-size: 1rem;
  line-height: 1.75; color: rgba(51,32,42,0.85); margin: 0 0 16px;
}
body[dir="rtl"] .blog-article p { font-family: var(--font-ar); line-height: 1.95; }
.blog-article strong { font-weight: var(--fw-semibold); color: var(--color-plum); }
.blog-article a { color: var(--color-coral); text-decoration: underline; text-underline-offset: 2px; }
.blog-article a:hover { color: var(--color-burgundy); }

/* In-article closing CTA */
.blog-article__cta {
  margin-top: 40px; padding: 32px; border-radius: 16px;
  background: var(--color-blush); text-align: center;
}
.blog-article__cta-text {
  font-family: var(--font-en); font-weight: var(--fw-regular, 400); font-size: 1.0625rem;
  line-height: 1.6; color: var(--color-plum); margin: 0 0 22px;
}
body[dir="rtl"] .blog-article__cta-text { font-family: var(--font-ar); }
.blog-article__cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* dark-text ghost button (for light backgrounds) */
.faq-cta__btn--ghost-dark {
  background: transparent; color: var(--color-plum); border: 1px solid rgba(51,32,42,0.35);
}
@media (hover: hover) { .faq-cta__btn--ghost-dark:hover { background: var(--color-plum); color: var(--color-blush); } }

/* Author / brand box */
.article-author { background: var(--color-blush); padding: clamp(32px, 5vw, 48px) 0; }
.article-author__inner { max-width: 720px; margin-inline: auto; display: flex; gap: 20px; align-items: flex-start; }
.article-author__icon { width: 56px; height: 56px; flex-shrink: 0; }
.article-author__icon svg { width: 100%; height: 100%; }
.article-author__name { font-family: var(--font-en); font-weight: var(--fw-bold); font-size: 1.25rem; color: var(--color-burgundy); margin: 0 0 6px; }
.article-author__desc { font-family: var(--font-en); font-weight: var(--fw-light); font-size: 0.9375rem; line-height: 1.6; color: rgba(51,32,42,0.8); margin: 0 0 10px; }
body[dir="rtl"] .article-author__desc { font-family: var(--font-ar); }
.article-author__links { font-family: var(--font-en); font-size: 0.875rem; color: rgba(51,32,42,0.5); margin: 0; }
.article-author__links a { color: var(--color-coral); text-decoration: none; }
.article-author__links a:hover { text-decoration: underline; }
@media (max-width: 560px) { .article-author__inner { flex-direction: column; } }

/* Related articles */
.blog-related { background: #ffffff; padding: clamp(40px, 6vw, 64px) 0; border-top: 1px solid rgba(51,32,42,0.08); }
.blog-related__inner { max-width: 1100px; margin-inline: auto; }
.blog-related__heading { font-family: var(--font-en); font-weight: var(--fw-bold); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-plum); margin: 0 0 28px; text-align: start; }
body[dir="rtl"] .blog-related__heading { font-family: var(--font-ar); }
.blog-grid--related { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .blog-grid--related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid--related { grid-template-columns: 1fr; } }

/* ===========================================================
   LEGAL PAGES — privacy.html / terms.html  (DRAFT)
   Utility pages. Reuses .contact-hero (plum hero) + a quiet,
   readable long-form text column. Includes a fixed coral DRAFT
   warning banner that sits directly below the fixed nav.
   =========================================================== */

/* Draft warning banner — fixed, just below the 60px nav, always visible. */
.draft-banner {
  position: fixed;
  top: var(--nav-h);
  inset-inline: 0;
  z-index: 99;                 /* below nav (100), above page content */
  background: #f06449;         /* coral */
  color: #33202a;              /* plum  */
  padding: 12px 20px;
  font-family: var(--font-en); /* Raleway */
  font-weight: 600;            /* SemiBold */
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
body[dir="rtl"] .draft-banner { font-family: var(--font-ar); }

/* Legal hero variant — shorter than other heroes, and with enough top
   padding to clear BOTH the fixed nav and the fixed draft banner. */
.contact-hero--legal {
  min-height: 30vh;
  padding-top: clamp(132px, 17vh, 176px);
  padding-bottom: clamp(28px, 4vh, 48px);
}

/* Long-form legal content column */
.legal-content { background: #ffffff; padding: 60px 0; }
.legal-content__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.legal-doc h2 {
  font-family: var(--font-en); font-weight: 600;
  font-size: 24px; line-height: 1.3;
  color: var(--color-plum);
  margin: 40px 0 16px;
}
.legal-doc__section:first-child h2 { margin-top: 0; }
.legal-doc p {
  font-family: var(--font-en); font-weight: 400;
  font-size: 16px; line-height: 1.7;
  color: rgba(51, 32, 42, 0.85);
  margin: 0 0 16px;
}
.legal-doc ul { margin: 0 0 16px; padding-inline-start: 22px; }
.legal-doc li {
  font-family: var(--font-en); font-weight: 400;
  font-size: 16px; line-height: 1.7;
  color: rgba(51, 32, 42, 0.85);
  margin-bottom: 8px;
}
.legal-doc strong { font-weight: 600; color: var(--color-plum); }
.legal-doc a { color: var(--color-burgundy); }
.legal-doc a:hover { color: var(--color-coral); }

/* "Pending legal review" status block (Last Updated section) */
.legal-status {
  margin-top: 32px;
  padding: 20px 24px;
  background: rgba(240, 100, 73, 0.08);
  border: 1px solid rgba(240, 100, 73, 0.30);
  border-radius: 12px;
}
.legal-status__label {
  font-family: var(--font-en); font-weight: 600;
  font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-burgundy);
  margin: 0 0 8px;
}
.legal-status p { margin: 0; }

/* RTL: Arabic font + right alignment for the document body */
body[dir="rtl"] .legal-content__inner { text-align: right; }
body[dir="rtl"] .legal-doc h2,
body[dir="rtl"] .legal-doc p,
body[dir="rtl"] .legal-doc li { font-family: var(--font-ar); }
body[dir="rtl"] .legal-status__label { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }

@media (max-width: 768px) {
  .draft-banner { font-size: 13px; padding: 10px 16px; }
  .contact-hero--legal { min-height: 25vh; padding-top: clamp(146px, 24vh, 188px); }
  .legal-content { padding: 40px 0; }
}

/* ===========================================================
   SEO/A11Y FIXES (audit follow-up, 2026-06-15)
   Mobile tap targets, blog pricing table, numbered steps,
   breadcrumbs. Desktop behaviour unchanged.
   =========================================================== */

/* --- FIX 1: Mobile tap targets >= 44x44 + readable fine print --- */
@media (max-width: 768px) {

  /* Services carousel dots: 44px hit area, visible 10px dot via ::before
     (avoids the square-clip artefact of background-clip on a small box) */
  .services__dots { gap: 4px; }
  .services__dot {
    width: 44px; height: 44px;
    background: transparent;
    border-radius: 0;
    position: relative;
    transform: none;
  }
  .services__dot::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: rgba(51, 32, 42, 0.25);
    transition: background var(--duration-fast) var(--ease-elegant),
                transform var(--duration-fast) var(--ease-elegant);
  }
  .services__dot:hover::before { background: rgba(51, 32, 42, 0.5); }
  .services__dot.is-active::before { background: var(--color-coral); transform: scale(1.25); }
  .services__dot.is-active:hover::before { background: var(--color-coral-light); }
  /* Neutralise base active/hover BUTTON paint (higher specificity than .services__dot);
     only the ::before should show the visible dot. */
  .services__dot.is-active,
  .services__dot:hover { background: transparent; transform: none; }

  /* Testimonial dots: same 44px hit area; visible pill (8px -> 24px active) via ::before */
  .testi__dots { gap: 4px; }
  .testi__dot {
    width: 44px; height: 44px;
    background: transparent;
    position: relative;
  }
  .testi__dot::before {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 999px;
    background: rgba(51, 32, 42, 0.25);
    transition: width 0.4s var(--ease-out-soft), background-color 0.3s var(--ease-out-soft);
  }
  .testi__dot.is-active::before { width: 24px; background: var(--color-coral); }
  /* Neutralise base active-button paint/width so only ::before shows; keep 44px hit area */
  .testi__dot.is-active { background: transparent; width: 44px; }

  /* Nav cluster: phone / language / hamburger -> 44px minimum */
  .nav__cluster { gap: 8px; }
  .nav__phone { width: 44px; height: 44px; }
  .nav-menu-toggle { width: 44px; height: 44px; }
  .nav__lang { min-height: 44px; display: inline-flex; align-items: center; }

  /* Article share buttons: 36 -> 44 */
  .article-share__btn { width: 44px; height: 44px; }

  /* Footer fine print: 11 -> 12px minimum readable body text */
  .site-footer__demo-watermark,
  .site-footer__demo-notice { font-size: 12px; }
}

/* --- FIX 4: Blog pricing table (AEO-friendly) --- */
.blog-article__pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-family: var(--font-en);
}
body[dir="rtl"] .blog-article__pricing-table { font-family: var(--font-ar); }
.blog-article__pricing-table caption {
  font-weight: 600;
  text-align: start;
  padding: 0 0 16px;
  color: var(--color-plum);
}
.blog-article__pricing-table th,
.blog-article__pricing-table td {
  padding: 12px 16px;
  text-align: start;
  border-bottom: 1px solid rgba(51, 32, 42, 0.1);
  vertical-align: top;
}
.blog-article__pricing-table th {
  background: var(--color-blush);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-plum);
}
.blog-article__pricing-table td { font-size: 15px; color: rgba(51, 32, 42, 0.85); }
.blog-article__pricing-table td:nth-child(2) { white-space: nowrap; font-weight: 600; color: var(--color-burgundy); }
@media (max-width: 768px) {
  .blog-article__pricing-table { font-size: 14px; }
  .blog-article__pricing-table th,
  .blog-article__pricing-table td { padding: 10px 8px; }
  .blog-article__pricing-table td:nth-child(2) { white-space: normal; }
}

/* --- FIX 5: Numbered process steps --- */
.blog-article__steps {
  margin: 0 0 24px;
  padding-inline-start: 24px;
  list-style: decimal;
}
.blog-article__steps li {
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(51, 32, 42, 0.85);
  margin-bottom: 12px;
  padding-inline-start: 4px;
}
.blog-article__steps li strong { color: var(--color-plum); }
body[dir="rtl"] .blog-article__steps li { font-family: var(--font-ar); }

/* --- FIX 6: Breadcrumbs (blog articles) --- */
.breadcrumbs {
  background: var(--color-blush);
  padding: 16px 0;
}
.breadcrumbs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  padding-inline: var(--container-pad);
}
body[dir="rtl"] .breadcrumbs__list { font-family: var(--font-ar); }
.breadcrumbs__item { color: rgba(51, 32, 42, 0.7); }
.breadcrumbs__item:not(:last-child)::after {
  content: "\203A"; /* › */
  margin-inline-start: 8px;
  color: rgba(51, 32, 42, 0.5);
}
[dir="rtl"] .breadcrumbs__item:not(:last-child)::after { content: "\2039"; /* ‹ */ }
.breadcrumbs__item a { color: var(--color-coral); text-decoration: none; }
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item--current { color: var(--color-plum); font-weight: 600; }

/* ============ FOUNDER QUOTE + BY THE NUMBERS (homepage) ============ */
.founder { background: var(--color-blush); padding: clamp(64px, 10vh, 120px) 0; }
.founder__inner { max-width: 960px; text-align: center; }
.founder__eyebrow { color: var(--color-coral); margin-bottom: 24px; }
.founder__quote { margin: 0 0 48px; }
.founder__quote-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.45;
  color: var(--color-plum);
  margin: 0 0 24px;
}
[dir="rtl"] .founder__quote-text { font-family: var(--font-ar); font-style: normal; }
.founder__attribution {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-burgundy);
}
[dir="rtl"] .founder__attribution { font-family: var(--font-ar); }
.founder__stats {
  list-style: none; margin: 0; padding: 48px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid rgba(96, 32, 46, 0.18);
}
.founder__stat { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.founder__stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1;
  color: var(--color-burgundy);
  font-variant-numeric: lining-nums tabular-nums;
}
.founder__stat-label {
  font-family: var(--font-en);
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-plum);
  max-width: 14ch;
}
[dir="rtl"] .founder__stat-label { font-family: var(--font-ar); }
@media (max-width: 720px) {
  .founder__stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}
@media (max-width: 380px) {
  .founder__stats { grid-template-columns: 1fr; }
}

/* ============ SERVICES PAGE — WHAT MAKES US DIFFERENT ============ */
.svc-diff { position: relative; z-index: 10; padding: clamp(64px, 9vh, 110px) 0; background: rgba(51, 32, 42, 0.82); }
.svc-diff__inner { max-width: 1080px; }
.svc-diff__eyebrow { color: var(--color-coral); text-align: center; margin-bottom: 12px; }
.svc-diff__heading {
  font-family: var(--font-en); font-weight: 700; font-size: var(--fs-h2);
  letter-spacing: 0.03em; color: var(--color-blush); text-align: center; margin: 0 0 16px;
}
[dir="rtl"] .svc-diff__heading { font-family: var(--font-ar); }
.svc-diff__lead {
  text-align: center; color: rgba(246, 232, 234, 0.85); max-width: 60ch;
  margin: 0 auto 40px; font-family: var(--font-en); line-height: 1.6;
}
[dir="rtl"] .svc-diff__lead { font-family: var(--font-ar); }
.svc-diff__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
.svc-diff__item-title {
  font-family: var(--font-en); font-weight: 600; font-size: 1.1rem;
  color: var(--color-coral-light); margin: 0 0 8px; letter-spacing: 0.02em;
}
[dir="rtl"] .svc-diff__item-title { font-family: var(--font-ar); }
.svc-diff__item-text {
  font-family: var(--font-en); font-size: 0.95rem; line-height: 1.6;
  color: rgba(246, 232, 234, 0.82); margin: 0;
}
[dir="rtl"] .svc-diff__item-text { font-family: var(--font-ar); }
@media (max-width: 760px) { .svc-diff__grid { grid-template-columns: 1fr; gap: 28px; } }