/* ============================================================
   THE WALLS — style.css
   Single stylesheet for all pages
   ============================================================ */

/* ── SHARED BASE STYLES ── */
/* THE WALLS — SHARED STYLES */

/* PAGE LOAD PROGRESS BAR */
#tw-progress{position:fixed;top:0;left:0;height:2px;background:var(--champagne);z-index:10000;width:0;transition:width .2s ease,opacity .4s ease;pointer-events:none}
#tw-progress.done{opacity:0}

:root {
  --obsidian: #0c0c0b;
  --obsidian-2: #141413;
  --obsidian-3: #1c1c1a;
  --obsidian-4: #252522;
  --champagne: #c9a96e;
  --champagne-light: #e8d5aa;
  --champagne-muted: #8a7253;
  --cream: #f5f0e8;
  --cream-dark: #e8e0d0;
  --gray-muted: #6b6b68;
  --gray-mid: #9a9a96;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
  --display: 'Bebas Neue', sans-serif;
  --arabic: 'Noto Naskh Arabic', serif;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* LANG & BILINGUAL */
[lang="ar"] { font-family: var(--arabic) !important; }
[dir="rtl"] .en-only { display: none !important; }
[dir="ltr"] .ar-only { display: none !important; }
[dir="rtl"] { font-family: var(--arabic); }

/* LANG TOGGLE BUTTON */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  border: 0.5px solid rgba(201,169,110,0.35);
  overflow: hidden; flex-shrink: 0;
}
.lang-btn {
  padding: 8px 16px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  background: transparent; color: var(--gray-mid);
  border: none; cursor: pointer; transition: all 0.25s;
  font-family: var(--sans);
  position: relative;
  min-width: 52px;
  text-align: center;
  line-height: 1;
}
/* Normalize Arabic button inline size to match EN button */
#btnAR { font-size: 12px !important; letter-spacing: 0 !important; }
.lang-btn.active {
  background: var(--champagne); color: var(--obsidian);
}
.lang-btn:not(.active):hover { color: var(--cream); }
.lang-sep { width: 0.5px; background: rgba(201,169,110,0.3); align-self: stretch; }

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--obsidian); }
body {
  background: var(--obsidian);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  transition: font-family 0.3s;
}

/* CURSOR */
.cursor {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: var(--champagne); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 36px; height: 36px;
  border: 0.5px solid rgba(201,169,110,0.5);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
}
.cursor.h { width: 4px; height: 4px; }
.cursor-ring.h { width: 52px; height: 52px; border-color: rgba(201,169,110,0.8); }
@media (hover: none), (pointer: coarse) {
  body { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }
}

/* NAVIGATION */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 60px; transition: background var(--transition), padding var(--transition);
  border-bottom: 0.5px solid transparent; gap: 24px;
}
nav.sc {
  background: rgba(12,12,11,0.95); backdrop-filter: blur(12px);
  padding: 16px 60px; border-bottom-color: rgba(201,169,110,0.15);
}
.nav-logo {
  font-family: var(--serif); font-size: 20px; font-weight: 300;
  color: var(--cream); letter-spacing: 0.12em; text-decoration: none;
  display: flex; align-items: center;
}
.nav-logo span { color: var(--champagne); }
.nav-links {
  display: flex; gap: 32px;
}
.nav-links a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-mid); text-decoration: none; transition: color 0.25s;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 0.5px; background: var(--champagne);
  transform: scaleX(0); transition: transform 0.3s; transform-origin: left;
}
[dir="rtl"] .nav-links a::after { transform-origin: right; }
.nav-links a:hover, .nav-links a.act { color: var(--cream); }
.nav-links a:hover::after, .nav-links a.act::after { transform: scaleX(1); }
.nav-back {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--champagne-muted); text-decoration: none;
  display: flex; align-items: center; gap: 10px; transition: color 0.25s;
}
.nav-back::before { content: '←'; font-size: 14px; }
.nav-back:hover { color: var(--champagne); }
.nav-cta {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--champagne); border: 0.5px solid var(--champagne-muted);
  padding: 10px 24px; text-decoration: none; transition: all 0.3s; white-space: nowrap;
}
.nav-cta:hover { background: var(--champagne); color: var(--obsidian); }
.nav-portal-icon {
  width: 36px; height: 36px;
  background: transparent;
  border: 0.5px solid rgba(201,169,110,0.35);
  color: var(--gray-mid);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0;
  transition: color 0.25s, border-color 0.25s;
}
.nav-portal-icon:hover { color: var(--cream); border-color: rgba(201,169,110,0.6); }
.nav-portal-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  border: 0.5px solid rgba(201,169,110,0.35); overflow: hidden; flex-shrink: 0;
}
.lang-btn {
  padding: 8px 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  background: transparent; color: var(--gray-mid);
  border: none; cursor: pointer; transition: all 0.25s; font-family: var(--sans);
}
.lang-btn.active { background: var(--champagne); color: var(--obsidian); }
.lang-btn:not(.active):hover { color: var(--cream); }
.lang-sep { width: 0.5px; background: rgba(201,169,110,0.3); align-self: stretch; }

/* BUTTONS */
.btn-primary {
  display: inline-block; padding: 14px 32px;
  background: var(--champagne); color: var(--obsidian);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.3s, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:hover { background: var(--champagne-light); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(201,169,110,.22); }

.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; background: #25D366; color: white;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; transition: background 0.3s, transform 0.25s ease;
}
.btn-wa:hover { background: #1ebe59; transform: translateY(-2px); }
.btn-wa svg { width: 18px; height: 18px; fill: white; }

.btn-outline {
  display: inline-block; padding: 14px 32px;
  border: 0.5px solid var(--champagne-muted);
  color: var(--champagne); font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; transition: all 0.3s, transform 0.25s ease;
}
button.btn-outline { background: transparent; cursor: pointer; }
.btn-outline:hover { background: var(--champagne); color: var(--obsidian); border-color: var(--champagne); transform: translateY(-2px); }

/* FORMS */
.form-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--champagne-muted);
}
.form-input, .form-select, .form-textarea {
  background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,0.18);
  color: var(--cream); font-family: var(--sans); font-size: 14px;
  font-weight: 300; padding: 13px 16px; outline: none; width: 100%;
  transition: border-color 0.25s; appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--champagne);
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--gray-muted);
}
.form-select option { background: var(--obsidian-3); }
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

/* CHIPS */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border: 0.5px solid rgba(201,169,110,0.2);
  font-size: 11px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-mid); cursor: pointer;
  transition: all 0.25s; background: transparent; font-family: var(--sans);
}
.chip.sel { background: var(--champagne); color: var(--obsidian); border-color: var(--champagne); }
.chip:hover:not(.sel) { color: var(--cream); border-color: rgba(201,169,110,0.4); }

/* ANIMATIONS */
@keyframes fu {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s, transform 0.7s;
}
.reveal.vis {
  opacity: 1;
  transform: translateY(0);
}
.rd1 { transition-delay: 0.1s; }
.rd2 { transition-delay: 0.2s; }

/* WHATSAPP FLOAT */
.wa-float {
  position: fixed; bottom: 90px; right: 32px; z-index: 90;
  width: 56px; height: 56px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37,211,102,0.4);
}
.wa-float svg { width: 28px; height: 28px; fill: white; }

.wa-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; opacity: 0.6;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* SCROLL TO TOP */
.scroll-top { position: fixed; bottom: 176px; right: 32px; z-index: 500; width: 48px; height: 48px; background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,.35); color: var(--champagne); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease, border-color .3s, background .3s; appearance: none; -webkit-appearance: none; outline: none; }
.scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (hover: hover) { .scroll-top:hover { background: var(--champagne); color: var(--obsidian); border-color: var(--champagne); } }
.scroll-top svg { width: 20px; height: 20px; }
.scroll-top::after { content: ''; position: absolute; inset: -4px; border-radius: 2px; border: 2px solid rgba(201,169,110,.6); transform: scale(1); opacity: 0; pointer-events: none; }
.scroll-top.visible::after { animation: scroll-ring 2s ease-out infinite; }
@keyframes scroll-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }

/* RESPONSIVE */
@media (max-width: 768px) {
  nav { padding: 16px 24px; gap: 16px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 10px; }
  nav.sc { padding: 12px 24px; }
  body { font-size: 14px; }
}

@media (max-width: 480px) {
  nav { padding: 12px 16px; }
  .nav-logo { font-size: 16px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 9px; }
  .btn-wa, .btn-primary, .btn-outline {
    padding: 12px 20px; font-size: 10px;
  }
  .wa-float {
    width: 48px; height: 48px;
    bottom: 100px; right: 24px;
  }
  .wa-float svg { width: 24px; height: 24px; }
  .scroll-top { bottom: 168px; right: 24px; }
}

/* ================================================
   LIGHT MODE THEME
   ================================================ */
html[data-theme="light"] {
  --obsidian:   #fafaf8;
  --obsidian-2: #f0ede8;
  --obsidian-3: #e8e4dc;
  --obsidian-4: #ddd9d0;
  --cream:      #0c0c0b;
  --cream-dark: #1c1c1a;
  --gray-muted: #5a5a57;
  --gray-mid:   #3a3a37;
}
html[data-theme="light"] nav {
  background: rgba(250,250,248,0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(201,169,110,0.1);
}
html[data-theme="light"] nav.sc {
  background: rgba(250,250,248,0.95);
}
/* Elements using var(--obsidian) as text on champagne — must stay dark */
html[data-theme="light"] .btn-primary { color: #0c0c0b; }
html[data-theme="light"] .lang-btn.active { background: var(--champagne); color: #0c0c0b !important; }
html[data-theme="light"] .chip.sel { color: #0c0c0b; }
html[data-theme="light"] .nav-cta:hover,
html[data-theme="light"] .btn-outline:hover { color: #0c0c0b; }
/* Light mode structural overrides */
html[data-theme="light"] nav.scrolled,
html[data-theme="light"] nav.sc { background: rgba(250,250,248,0.95) !important; }
html[data-theme="light"] footer { background: var(--obsidian-2); border-top: 0.5px solid rgba(201,169,110,0.15); }
html[data-theme="light"] .search-results { background: var(--obsidian-2); border-color: rgba(201,169,110,0.3); }
html[data-theme="light"] .search-result-item { border-color: rgba(201,169,110,0.15); }
html[data-theme="light"] .search-result-item:hover { border-color: rgba(201,169,110,0.4); background: var(--obsidian-3); }
html[data-theme="light"] .service-card { background: var(--obsidian-2); }
html[data-theme="light"] .portfolio-search,
html[data-theme="light"] .search-bar { background: transparent; }
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea { background: var(--obsidian-3); color: var(--cream); }
html[data-theme="light"] .mob-overlay { background: rgba(250,250,248,0.97); }
/* Mobile menu text needs to be dark in light mode */
html[data-theme="light"] .mob-overlay .nav-links a { color: #3a3a37; }
html[data-theme="light"] .mob-overlay .nav-links a:hover,
html[data-theme="light"] .mob-overlay .nav-links a.act { color: #0c0c0b !important; }
/* Mobile hamburger bars */
html[data-theme="light"] .nav-toggle span,
html[data-theme="light"] .mob-close span { background: #0c0c0b; }
/* Text on images must stay light — photos don't change in light mode */
html[data-theme="light"] .hero-h1,
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .hero-stat-num,
html[data-theme="light"] .hero-stat-label { color: #f5f0e8; }
html[data-theme="light"] .project-name,
html[data-theme="light"] .project-loc { color: #f5f0e8; }
html[data-theme="light"] .ba-label-before,
html[data-theme="light"] .ba-label-after { color: #f5f0e8; }

/* Mobile at 480px — cap Arabic headings */
@media(max-width:480px) {
  [dir="rtl"] .hero-h1 { font-size: 32px; }
  [dir="rtl"] .section-title { font-size: 22px; }
  [dir="rtl"] .about-heading { font-size: 22px; }
  .hero-h1 { font-size: clamp(40px,10vw,80px); }
}

/* ================================================
   THEME TOGGLE BUTTON
   ================================================ */
.theme-toggle {
  width: 36px; height: 36px;
  background: transparent;
  border: 0.5px solid rgba(201,169,110,0.35);
  color: var(--gray-mid);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s, border-color 0.25s;
  flex-shrink: 0; padding: 0;
}
.theme-toggle:hover { color: var(--cream); border-color: rgba(201,169,110,0.6); }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ================================================
   COOKIE CONSENT BANNER
   ================================================ */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997;
  background: var(--obsidian-2);
  border-top: 0.5px solid rgba(201,169,110,0.2);
  padding: 24px 60px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cookie-banner.cookie-visible { transform: translateY(0); }
.cookie-banner.cookie-hiding  { transform: translateY(100%); }

.cookie-inner {
  display: flex; align-items: center; gap: 40px;
  max-width: 1400px; margin: 0 auto;
}
.cookie-text { flex: 1; min-width: 0; }
.cookie-text h4 {
  font-family: var(--serif); font-size: 17px; font-weight: 400;
  color: var(--cream); letter-spacing: 0.04em; margin-bottom: 8px;
}
.cookie-text p {
  font-size: 12px; color: var(--gray-mid); line-height: 1.65; max-width: 700px;
}
.cookie-actions {
  display: flex; gap: 10px; align-items: center; flex-shrink: 0; flex-wrap: wrap;
}
.cookie-actions .btn-primary,
.cookie-actions .btn-outline {
  padding: 10px 20px; font-size: 10px; white-space: nowrap;
}

@media (max-width: 768px) {
  .cookie-banner { padding: 20px 24px; }
  .cookie-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cookie-actions .btn-primary,
  .cookie-actions .btn-outline { padding: 10px 16px; }
}
@media (max-width: 480px) {
  .cookie-banner { padding: 16px; }
  .cookie-actions { gap: 8px; }
}

/* ================================================
   FOOTER — shared across all pages
   ================================================ */
footer { background: var(--obsidian); border-top: 0.5px solid rgba(201,169,110,.12); padding: 60px 60px 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 48px; }
[dir="rtl"] .footer-grid { direction: rtl; }
.footer-brand { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--cream); margin-bottom: 16px; letter-spacing: .08em; }
[dir="rtl"] .footer-brand { font-family: var(--arabic); font-size: 26px; letter-spacing: 0; }
.footer-brand span { color: var(--champagne); }
.footer-tagline { font-size: 13px; color: var(--gray-muted); line-height: 1.7; max-width: 260px; }
[dir="rtl"] .footer-tagline { font-family: var(--arabic); font-size: 15px; line-height: 1.9; text-align: right; }
.footer-col-title { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne-muted); margin-bottom: 20px; }
[dir="rtl"] .footer-col-title { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; text-align: right; }
.footer-col a, .footer-col p { display: block; font-size: 13px; color: var(--gray-muted); text-decoration: none; margin-bottom: 10px; line-height: 1.5; transition: color .2s; }
[dir="rtl"] .footer-col a, [dir="rtl"] .footer-col p { font-family: var(--arabic); font-size: 15px; text-align: right; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 0.5px solid rgba(201,169,110,.08); font-size: 11px; color: var(--gray-muted); }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; font-family: var(--arabic); font-size: 13px; }
.footer-legal { display: flex; gap: 24px; }
[dir="rtl"] .footer-legal { flex-direction: row-reverse; }
.footer-legal a { color: var(--gray-muted); text-decoration: none; font-size: 11px; transition: color .2s; }
.footer-legal a:hover { color: var(--cream); }
/* Discreet staff entry point hidden in the copyright mark — looks like plain text. */
.admin-secret { color: inherit; text-decoration: none; cursor: default; }
[dir="rtl"] .footer-legal a { font-family: var(--arabic); font-size: 13px; }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  footer { padding: 48px 24px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-grid > :first-child, .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-grid > :first-child { margin-bottom: 18px; }   /* clean gap below the W strip */
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  /* Confine the W to a clean strip behind the brand only — the link columns
     below sit on clear background so text is never crossed by louver lines.
     Selector is `footer .tw-footer-field` (specificity 0,1,1) so it beats the
     unconditional base rule later in the file (`.tw-footer-field`, 0,1,0). */
  footer .tw-footer-field {
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 17%, transparent 28%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 17%, transparent 28%);
  }
}

/* ── RESPONSIVE / HAMBURGER NAV ── */
/* THE WALLS — GLOBAL RESPONSIVE
   Loaded last on every page.
   Page-level breakpoints live in assets/css/pages/[page].css.
   This file handles: hamburger nav, global image rules, cross-page overrides.
   ─────────────────────────────────────────────────────────────── */

/* ── GLOBAL IMAGE SAFETY ── */
img, video, embed, object { max-width: 100%; }
img { height: auto; }

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 9px 8px;
  background: transparent;
  border: 0.5px solid rgba(201,169,110,.25);
  cursor: pointer;
  z-index: 1100;
  flex-shrink: 0;
  transition: border-color .25s;
}
.nav-toggle:hover { border-color: rgba(201,169,110,.5); }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--cream, #f5f0e8);
  transition: transform .3s ease, opacity .25s ease;
  transform-origin: center;
}

/* Hamburger → X when open (keyed on body.nav-open, not nav.mob-open,
   because nav.sc backdrop-filter creates a new containing block) */
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen overlay — injected as direct child of <body> by shared.js */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,12,11,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1049;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
body.nav-open .mob-overlay { display: flex; }
body.nav-open { overflow: hidden; }

.mob-overlay .nav-links {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.mob-overlay .nav-links a {
  font-size: 13px !important;
  letter-spacing: .22em !important;
  color: var(--gray-mid, #9a9a96) !important;
  padding: 8px 0;
  text-decoration: none;
  transition: color .2s;
}
.mob-overlay .nav-links a:hover,
.mob-overlay .nav-links a.act { color: var(--cream, #f5f0e8) !important; }

.mob-cta {
  display: inline-block;
  padding: 12px 28px;
  border: .5px solid var(--champagne, #c9a96e);
  color: var(--champagne, #c9a96e);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .25s;
  margin-top: 8px;
}
.mob-cta:hover { background: var(--champagne, #c9a96e); color: var(--obsidian, #0c0c0b); }

.mob-portal {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gray-mid, #9a9a96);
  text-decoration: none;
  transition: color .2s;
}
.mob-portal:hover { color: var(--champagne, #c9a96e); }

.mob-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0.5px solid rgba(201,169,110,.25);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  transition: border-color .25s;
}
.mob-close:hover { border-color: rgba(201,169,110,.6); }
.mob-close span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--cream, #f5f0e8);
  transform-origin: center;
}
.mob-close span:nth-child(1) { transform: translateY(0.5px) rotate(45deg); }
.mob-close span:nth-child(2) { transform: translateY(-0.5px) rotate(-45deg); }

/* ── MOBILE BREAKPOINT (≤767px) ── */
@media (max-width: 767px) {

  /* Show hamburger, collapse desktop nav */
  .nav-toggle { display: flex; }
  .nav-links  { display: none !important; }
  .nav-back   { display: none !important; }

  /* Keep lang + theme toggles visible on mobile; hide Book CTA only */
  .nav-right  { display: flex !important; gap: 8px !important; }
  .nav-right .nav-cta { display: none !important; }
  .nav-cta    { display: none !important; }
  /* Hide the Client Login icon on mobile — footer "Track Your Project" covers it */
  .nav-portal-icon { display: none !important; }
  /* Always show logout/sign-out on mobile (no hamburger menu for auth pages) */
  .nav-right .nav-cta.nav-logout { display: flex !important; padding: 7px 14px !important; font-size: 11px !important; }

  /* Compact controls for small screens */
  .lang-btn   { padding: 6px 10px !important; font-size: 10px !important; }
  .theme-toggle { width: 32px !important; height: 32px !important; }

  /* Override any page-level nav padding */
  nav, nav.sc, nav.scrolled { padding: 16px 20px !important; }

  /* Reduce logo so nav height ≈ 88px (56 + 16 + 16) */
  .nav-logo img { height: 56px !important; }

  /* Background scroll lock when menu open (overflow handled globally above) */

  /* WA float position */
  .wa-float { bottom: 100px; right: 16px; width: 48px; height: 48px; }
  .wa-float svg { width: 24px; height: 24px; }
}

/* ── TABLET (768–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  nav, nav.sc, nav.scrolled { padding: 20px 32px !important; }
  .nav-links   { gap: 18px !important; }
  .nav-links a { font-size: 10px !important; }
  .nav-cta     { padding: 8px 16px !important; font-size: 10px !important; }
}

/* ── CROSS-PAGE SECTION FIXES ── */
@media (max-width: 600px) {
  /* Services gallery collapse */
  .svc-gallery { grid-template-columns: 1fr !important; }
  /* Case study padding */
  .cs-hero-content,
  .cs-section,
  .cs-stats,
  .cs-gallery { padding-left: 20px !important; padding-right: 20px !important; }
  /* Ensure page-hero clears the ~88px mobile nav at smallest screens */
  .page-hero { padding-top: 100px !important; }
}

/* ── PAGE: INDEX ── */
:root {
  --obsidian: #0c0c0b;
  --obsidian-2: #141413;
  --obsidian-3: #1c1c1a;
  --obsidian-4: #252522;
  --champagne: #c9a96e;
  --champagne-light: #e8d5aa;
  --champagne-muted: #8a7253;
  --cream: #f5f0e8;
  --cream-dark: #e8e0d0;
  --gray-muted: #6b6b68;
  --gray-mid: #9a9a96;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
  --display: 'Bebas Neue', sans-serif;
  --arabic: 'Noto Naskh Arabic', serif;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* RTL language overrides */
[lang="ar"] { font-family: var(--arabic) !important; }
[dir="rtl"] .en-only { display: none !important; }
[dir="ltr"] .ar-only { display: none !important; }
[dir="rtl"] { font-family: var(--arabic); }

/* Arabic typography tuning */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  font-family: var(--arabic);
  font-weight: 400;
  letter-spacing: 0 !important;
}
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .section-label,
[dir="rtl"] .about-label,
[dir="rtl"] .estimator-tag,
[dir="rtl"] .cta-sub,
[dir="rtl"] .project-cat,
[dir="rtl"] .ba-label,
[dir="rtl"] .footer-col-title,
[dir="rtl"] .service-tag,
[dir="rtl"] .form-label,
[dir="rtl"] .nav-links a,
[dir="rtl"] .nav-cta {
  font-family: var(--sans);
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}
[dir="rtl"] .marquee-item span,
[dir="rtl"] .tier-btn,
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-wa,
[dir="rtl"] .btn-outline {
  font-family: var(--arabic);
  letter-spacing: 0 !important;
}

/* Lang toggle button */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  border: 0.5px solid rgba(201,169,110,0.35);
  overflow: hidden; flex-shrink: 0;
}
.lang-btn {
  padding: 8px 16px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  background: transparent; color: var(--gray-mid);
  border: none; cursor: pointer; transition: all 0.25s;
  font-family: var(--sans);
  position: relative;
  min-width: 52px;
  text-align: center;
  line-height: 1;
}
/* Normalize Arabic button inline size to match EN button */
#btnAR { font-size: 12px !important; letter-spacing: 0 !important; }
.lang-btn.active {
  background: var(--champagne); color: var(--obsidian);
}
.lang-btn:not(.active):hover { color: var(--cream); }
.lang-sep { width: 0.5px; background: rgba(201,169,110,0.3); align-self: stretch; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--obsidian); }
body {
  background: var(--obsidian);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  transition: font-family 0.3s;
}

/* Custom cursor */
.cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--champagne); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .3s,height .3s; }
.cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 0.5px solid rgba(201,169,110,.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .3s,height .3s; }
.cursor.hover { width: 4px; height: 4px; }
.cursor-ring.hover { width: 52px; height: 52px; border-color: rgba(201,169,110,.8); }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 60px;
  transition: background var(--transition), padding var(--transition);
  border-bottom: 0.5px solid transparent;
  gap: 24px;
}
nav.scrolled { background: rgba(12,12,11,.95); backdrop-filter: blur(12px); padding: 18px 60px; border-bottom-color: rgba(201,169,110,.15); }
.nav-logo { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--cream); letter-spacing: 0.12em; text-decoration: none; flex-shrink: 0; }
.nav-logo span { color: var(--champagne); }
[dir="rtl"] .nav-logo { font-family: var(--arabic); font-size: 20px; letter-spacing: 0; }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a { font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-mid); text-decoration: none; transition: color .25s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 0.5px; background: var(--champagne); transform: scaleX(0); transition: transform .3s; transform-origin: left; }
[dir="rtl"] .nav-links a::after { transform-origin: right; }
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); border: 0.5px solid var(--champagne-muted); padding: 10px 24px; text-decoration: none; transition: all .3s; white-space: nowrap; }
.nav-cta:hover { background: var(--champagne); color: var(--obsidian); }
.nav-right { display: flex; align-items: center; gap: 16px; }

/* HERO */
.hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: flex-end; overflow: hidden; background: #0c0c0b; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,12,11,.35) 0%, rgba(12,12,11,.15) 40%, rgba(12,12,11,.82) 80%, rgba(12,12,11,1) 100%); }
.hero-kb { position: absolute; inset: 0; }
.hero-kb-slide { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform, opacity; animation: kb1 14s ease-in-out infinite; }
.hero-kb-slide--2 { animation-name: kb2; }
@keyframes kb1 {
  0%   { opacity: 1;  transform: scale(1.0)  translate(0%,    0%);    }
  43%  { opacity: 1;  transform: scale(1.12) translate(-1.2%, -0.4%); }
  50%  { opacity: 0;  transform: scale(1.12) translate(-1.5%, -0.5%); }
  51%  { opacity: 0;  transform: scale(1.0)  translate(1.2%,  0.4%);  }
  93%  { opacity: 0;  transform: scale(1.1)  translate(0.6%,  0.2%);  }
  100% { opacity: 1;  transform: scale(1.1)  translate(0.6%,  0.2%);  }
}
@keyframes kb2 {
  0%   { opacity: 0;  transform: scale(1.0)  translate(1.2%,  0.5%);  }
  43%  { opacity: 0;  transform: scale(1.1)  translate(0.3%,  0.2%);  }
  50%  { opacity: 1;  transform: scale(1.1)  translate(0.3%,  0.2%);  }
  93%  { opacity: 1;  transform: scale(1.12) translate(-1.2%, -0.4%); }
  100% { opacity: 0;  transform: scale(1.12) translate(-1.5%, -0.5%); }
}
.hero-grid-pattern { position: absolute; inset: 0; opacity: .04; background-image: linear-gradient(var(--champagne) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--champagne) 0.5px, transparent 0.5px); background-size: 80px 80px; }
.hero-image-blocks { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; opacity: .55; }
.hero-block { overflow: hidden; position: relative; }
.hero-block::before { content: ''; position: absolute; top: 40%; left: 15%; right: 15%; bottom: 15%; border: 0.5px solid rgba(201,169,110,.2); z-index: 1; }
.hero-block-inner { width: 100%; height: 100%; background-size: cover; background-position: center; animation: slowzoom 20s ease-in-out infinite alternate; }
@keyframes slowzoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }
.hero-block:nth-child(1) .hero-block-inner { background: linear-gradient(135deg,#2d2420 0%,#3a2f22 40%,#1e1a14 100%), url('../../images/placeholder-interior.svg'); background-size: cover; background-position: center top; background-blend-mode: multiply; animation-delay: 0s; }
.hero-block:nth-child(2) .hero-block-inner { background: url('../../images/placeholder-interior.svg'); background-size: cover; background-position: center; animation-delay: -7s; }
.hero-block:nth-child(3) .hero-block-inner { background: linear-gradient(135deg,#201d1a 0%,#2c2720 40%,#181512 100%), url('../../images/placeholder-interior.svg'); background-size: cover; background-position: center bottom; background-blend-mode: multiply; animation-delay: -14s; }
.hero-content { position: relative; z-index: 10; padding: 0 60px 80px; width: 100%; }
[dir="rtl"] .hero-content { padding: 0 60px 80px; }
.hero-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne); margin-bottom: 20px; display: flex; align-items: center; gap: 16px; opacity: 0; transform: translateY(20px); animation: fadeup .8s .3s ease forwards; }
.hero-eyebrow::before { content: ''; width: 40px; height: 0.5px; background: var(--champagne); }
[dir="rtl"] .hero-eyebrow { flex-direction: row-reverse; }
[dir="rtl"] .hero-eyebrow::before { order: 1; }
.hero-h1 { font-family: var(--serif); font-size: clamp(62px,8vw,116px); font-weight: 300; line-height: .92; color: var(--cream); max-width: 820px; opacity: 0; transform: translateY(30px); animation: fadeup .9s .5s ease forwards; }
[dir="rtl"] .hero-h1 { font-family: var(--arabic); font-size: clamp(36px,6vw,72px); line-height: 1.15; font-weight: 400; max-width: 820px; }
.hero-h1 em { font-style: italic; color: var(--champagne); }
.hero-cycle-slot { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-cycle-word { display: inline-block; transition: transform .55s cubic-bezier(.76,0,.24,1), opacity .45s ease; }
.hero-cycle-word.is-out { transform: translateY(-115%); opacity: 0; }
.hero-cycle-word.is-in  { transform: translateY(115%);  opacity: 0; transition: none; }
[dir="rtl"] .hero-h1 em { font-style: normal; }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 40px; opacity: 0; transform: translateY(20px); animation: fadeup .8s .8s ease forwards; }
[dir="rtl"] .hero-bottom { flex-direction: row-reverse; }
.hero-desc { max-width: 340px; font-size: 14px; line-height: 1.7; color: var(--gray-mid); border-left: 0.5px solid var(--champagne-muted); padding-left: 20px; }
[dir="rtl"] .hero-desc { border-left: none; border-right: 0.5px solid var(--champagne-muted); padding-left: 0; padding-right: 20px; text-align: right; font-family: var(--arabic); font-size: 16px; line-height: 1.85; }
.hero-stats { display: flex; gap: 48px; }
[dir="rtl"] .hero-stats { flex-direction: row-reverse; }
.hero-stat-num { font-family: var(--display); font-size: 48px; color: var(--cream); letter-spacing: .02em; line-height: 1; }
.hero-stat-num span { color: var(--champagne); font-size: 28px; }
.hero-stat-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-muted); margin-top: 4px; }
[dir="rtl"] .hero-stat-label { font-family: var(--arabic); letter-spacing: 0; font-size: 13px; text-transform: none; }
.hero-scroll { position: absolute; right: 60px; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne-muted); display: flex; align-items: center; gap: 14px; animation: fadeup 1s 1.2s ease forwards; opacity: 0; }
.hero-scroll::after { content: ''; width: 48px; height: 0.5px; background: var(--champagne-muted); animation: scrollline 2s 1.5s ease infinite; }
@keyframes scrollline { 0%{transform:scaleX(0);transform-origin:left} 50%{transform:scaleX(1);transform-origin:left} 51%{transform:scaleX(1);transform-origin:right} 100%{transform:scaleX(0);transform-origin:right} }
@keyframes fadeup { to { opacity: 1; transform: translateY(0); } }

/* MARQUEE */
.marquee-wrap { background: var(--champagne); padding: 14px 0; overflow: hidden; direction: ltr; }
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track.ar-only { direction: ltr; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { display: flex; align-items: center; gap: 20px; padding: 0 32px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--obsidian); white-space: nowrap; }
[dir="rtl"] .marquee-item { font-family: var(--arabic); font-size: 14px; letter-spacing: 0; text-transform: none; }
.marquee-dot { width: 4px; height: 4px; background: var(--obsidian-3); border-radius: 50%; flex-shrink: 0; }

/* SECTIONS common */
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 44px; }
[dir="rtl"] .section-header { flex-direction: row-reverse; }
.section-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne); margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.section-label::before { content: attr(data-num); color: var(--champagne-muted); font-size: 10px; }
.section-title { font-family: var(--serif); font-size: clamp(32px,3.2vw,48px); font-weight: 300; line-height: 1.1; color: var(--cream); }
[dir="rtl"] .section-title { font-family: var(--arabic); font-size: clamp(22px,2.8vw,38px); font-weight: 400; line-height: 1.3; }
.section-title em { font-style: italic; color: var(--champagne); }
[dir="rtl"] .section-title em { font-style: normal; }
.section-link { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-muted); text-decoration: none; border-bottom: 0.5px solid var(--champagne-muted); padding-bottom: 2px; transition: color .25s; white-space: nowrap; align-self: flex-end; }
.section-link:hover { color: var(--champagne); }
[dir="rtl"] .section-link { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

.pt-footer { padding: 28px 0 4px calc(44px + 32px); opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.pt-footer.is-visible { opacity: 1; transform: translateY(0); }
.pt-footer-link { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 0.5px solid var(--champagne-muted); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s, letter-spacing 0.25s; }
.pt-footer-link:hover { color: var(--champagne); border-color: var(--champagne); letter-spacing: 0.3em; }
[dir="rtl"] .pt-footer { padding: 28px calc(44px + 32px) 4px 0; }
[dir="rtl"] .pt-footer-link { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
[dir="rtl"] .pt-footer-link:hover { letter-spacing: 0; }
.reveal-delay-4 { transition-delay: .4s; }

/* ABOUT */
.about-strip { padding: 80px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; max-width: 1400px; margin: 0 auto; }
.about-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--champagne); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.about-label::before { content: '01'; color: var(--champagne-muted); font-size: 10px; }
.about-heading { font-family: var(--serif); font-size: clamp(36px,4vw,56px); font-weight: 300; line-height: 1.15; color: var(--cream); }
[dir="rtl"] .about-heading { font-family: var(--arabic); font-weight: 400; line-height: 1.3; font-size: clamp(24px,3.5vw,42px); }
.about-heading em { font-style: italic; color: var(--champagne); }
[dir="rtl"] .about-heading em { font-style: normal; }
.about-body { font-size: 15px; line-height: 1.85; color: var(--gray-mid); margin-top: 28px; }
[dir="rtl"] .about-body { font-family: var(--arabic); font-size: 17px; line-height: 2; text-align: right; }
.about-right { position: relative; }
.about-image-main { width: 100%; aspect-ratio: 4/5; position: relative; overflow: hidden; }
.about-image-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.about-image-main::before { content: ''; position: absolute; inset: 20px; border: 0.5px solid rgba(201,169,110,.25); }
.about-image-float { position: absolute; bottom: -30px; left: -40px; width: 45%; aspect-ratio: 1; background: var(--obsidian-3); border: 3px solid var(--obsidian); overflow: hidden; }
[dir="rtl"] .about-image-float { left: auto; right: -40px; }
.about-image-float::after {content: 'Est. 2018'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--champagne-muted); letter-spacing: .1em; }
.about-accent { position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; border: 0.5px solid rgba(201,169,110,.2); transform: rotate(15deg); }
[dir="rtl"] .about-accent { right: auto; left: -20px; }

/* SERVICES */
.services { padding: 100px 60px; background: var(--obsidian-2); }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--obsidian-4); }
.service-card { background: var(--obsidian-2); padding: 48px 36px; position: relative; overflow: hidden; transition: background var(--transition); }
.service-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--champagne),transparent); transform: scaleX(0); transition: transform .4s; }
.service-card:hover { background: var(--obsidian-3); }
.service-card:hover::before { transform: scaleX(1); }
.service-num { font-family: var(--display); font-size: 72px; line-height: 1; color: rgba(201,169,110,.08); position: absolute; top: 20px; right: 24px; transition: color .3s; }
[dir="rtl"] .service-num { right: auto; left: 24px; }
.service-card:hover .service-num { color: rgba(201,169,110,.18); }
.service-icon { width: 44px; height: 44px; margin-bottom: 28px; border: 0.5px solid var(--champagne-muted); display: flex; align-items: center; justify-content: center; }
.service-icon svg { width: 20px; height: 20px; stroke: var(--champagne); fill: none; stroke-width: 1.2; }
.service-name { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--cream); margin-bottom: 14px; line-height: 1.2; }
[dir="rtl"] .service-name { font-family: var(--arabic); font-size: 20px; line-height: 1.4; text-align: right; }
.service-desc { font-size: 13px; color: var(--gray-muted); line-height: 1.75; }
[dir="rtl"] .service-desc { font-family: var(--arabic); font-size: 15px; line-height: 1.9; text-align: right; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
[dir="rtl"] .service-tags { flex-direction: row-reverse; }
.service-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne-muted); border: 0.5px solid rgba(201,169,110,.2); padding: 4px 10px; }
[dir="rtl"] .service-tag { font-family: var(--arabic); font-size: 12px; letter-spacing: 0; text-transform: none; }

/* SERVICES — "What we do" reveal choreography (entrance stagger + number slide + blueprint icon draw + subtle parallax) */
/* Per-column stagger so cards build in left→right, row by row. Mirrored for RTL. */
.services-grid .service-card { --stagger: 0ms; --py: 0px; }
.services-grid .service-card:nth-child(3n+2) { --stagger: 100ms; }
.services-grid .service-card:nth-child(3n+3) { --stagger: 200ms; }
[dir="rtl"] .services-grid .service-card:nth-child(3n+1) { --stagger: 200ms; }
[dir="rtl"] .services-grid .service-card:nth-child(3n+2) { --stagger: 100ms; }
[dir="rtl"] .services-grid .service-card:nth-child(3n+3) { --stagger: 0ms; }

/* Card transform is driven by --py once revealed so the parallax can ride on top of the entrance. */
.services-grid .service-card.reveal.visible { transform: translateY(var(--py)); transition: opacity .65s ease, transform .4s ease-out, background var(--transition); will-change: transform; }

/* #3 Number slides up into its slot (final faint-gold look preserved). */
.services-grid .service-num { transform: translateY(30px); opacity: 0; transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease, color .3s ease; transition-delay: var(--stagger), var(--stagger), 0s; }
.services-grid .service-card.visible .service-num { transform: translateY(0); opacity: 1; }

/* #4 Blueprint draw-on: SVG strokes draw themselves like a measured line. */
.services-grid .service-icon svg > * { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1s ease; transition-delay: calc(var(--stagger) + 140ms); }
.services-grid .service-card.visible .service-icon svg > * { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .services-grid .service-card.reveal.visible { transform: none; transition: opacity .4s ease, background var(--transition); }
  .services-grid .service-num { transform: none; opacity: 1; transition: color .3s ease; }
  .services-grid .service-icon svg > * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* PORTFOLIO */
.portfolio { padding: 100px 60px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px; }
.project-card { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--obsidian-3); cursor: pointer; }
/* TODO: Replace placeholder SVG with real project photos when client provides */
.project-bg { position: absolute; inset: 0; transition: transform .8s var(--transition); background: url('../../images/placeholder-interior.svg') center/cover no-repeat var(--obsidian-3); }
.project-card:hover .project-bg { transform: scale(1.06); }
/* Dark tint overlays — remove gradient layer when adding real photos */
.project-card:nth-child(1) .project-bg { background: linear-gradient(135deg,rgba(29,28,24,.9) 0%,rgba(42,38,32,.9) 40%,rgba(32,30,25,.9) 70%,rgba(21,20,18,.9) 100%), url('../../images/placeholder-interior.svg') center/cover no-repeat; }
.project-card:nth-child(2) .project-bg { background: linear-gradient(135deg,rgba(25,29,28,.9) 0%,rgba(36,43,40,.9) 40%,rgba(23,29,27,.9) 100%), url('../../images/placeholder-interior.svg') center/cover no-repeat; }
.project-card:nth-child(3) .project-bg { background: linear-gradient(135deg,rgba(32,30,27,.9) 0%,rgba(45,41,35,.9) 40%,rgba(26,24,20,.9) 100%), url('../../images/placeholder-interior.svg') center/cover no-repeat; }
.project-card:nth-child(4) .project-bg { background: linear-gradient(135deg,rgba(28,26,24,.9) 0%,rgba(38,34,28,.9) 40%,rgba(22,20,18,.9) 100%), url('../../images/placeholder-interior.svg') center/cover no-repeat; }
.project-inner-lines { position: absolute; inset: 16px; border: 0.5px solid rgba(201,169,110,.12); pointer-events: none; }
.project-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 32px 32px; background: linear-gradient(to top,rgba(12,12,11,.9) 0%,transparent 100%); }
.portfolio-grid .project-info { padding: 28px 20px 20px; }
.portfolio-grid .project-name { font-size: clamp(15px, 1.6vw, 22px); }
[dir="rtl"] .project-info { text-align: right; }
.project-cat { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne); margin-bottom: 8px; }
[dir="rtl"] .project-cat { font-family: var(--arabic); font-size: 12px; letter-spacing: 0; text-transform: none; }
.project-name { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--cream); line-height: 1.1; }
[dir="rtl"] .project-name { font-family: var(--arabic); font-size: 24px; font-weight: 400; line-height: 1.3; }
.project-card:first-child .project-name { font-size: 28px; }
[dir="rtl"] .project-card:first-child .project-name { font-size: 34px; }
.project-loc { font-size: 12px; color: var(--gray-muted); margin-top: 8px; }
[dir="rtl"] .project-loc { font-family: var(--arabic); font-size: 14px; }
.project-hover-cta { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; background: var(--champagne); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-8px); transition: all .3s; }
[dir="rtl"] .project-hover-cta { right: auto; left: 24px; }
.project-hover-cta svg { width: 16px; height: 16px; stroke: var(--obsidian); fill: none; stroke-width: 2; }
.project-card:hover .project-hover-cta { opacity: 1; transform: translateY(0); }
.search-bar { display: flex; align-items: stretch; margin-top: 32px; }
.search-input { flex: 1; min-width: 0; background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,.25); color: var(--cream); font-family: var(--serif); font-size: 18px; font-weight: 300; font-style: italic; padding: 18px 20px; outline: none; transition: border-color .25s; }
[dir="rtl"] .search-input { font-family: var(--arabic); font-style: normal; font-size: 18px; text-align: right; }
.search-input::placeholder { color: var(--gray-muted); }
.search-input:focus { border-color: var(--champagne); }
.search-btn { flex-shrink: 0; width: 54px; background: var(--champagne); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s; }
.search-btn:hover { background: var(--champagne-light); }
.search-btn svg { width: 18px; height: 18px; stroke: var(--obsidian); fill: none; stroke-width: 2; }
.search-results { margin-top: 12px; display: none; }
.search-results.show { display: block; }
.search-result-item { display: flex; gap: 14px; align-items: center; padding: 12px 16px; background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,.12); margin-bottom: 6px; cursor: pointer; transition: border-color .2s; text-decoration: none; color: inherit; }
[dir="rtl"] .search-result-item { flex-direction: row-reverse; text-align: right; }
.search-result-item:hover { border-color: rgba(201,169,110,.3); }
.search-result-thumb { width: 48px; height: 48px; flex-shrink: 0; background: var(--obsidian-4); border: 0.5px solid rgba(201,169,110,.15); }
.search-result-name { font-size: 14px; color: var(--cream); margin-bottom: 3px; }
[dir="rtl"] .search-result-name { font-family: var(--arabic); font-size: 15px; }
.search-result-type { font-size: 11px; color: var(--champagne-muted); letter-spacing: .1em; text-transform: uppercase; }
[dir="rtl"] .search-result-type { font-family: var(--arabic); font-size: 12px; letter-spacing: 0; text-transform: none; }
.sr-name { font-size: 14px; color: var(--cream); display: block; margin-bottom: 2px; }
.sr-meta { font-size: 11px; color: var(--champagne-muted); letter-spacing: .08em; }
.sr-empty { font-size: 13px; color: var(--gray-muted); padding: 12px 16px; }

/* PULSE GLOW — Before/After instruction text */
.shimmer-text.pulse-active { animation: pulse-glow 3s ease-in-out infinite; }
@keyframes pulse-glow {
  0%,100% { color: var(--gray-mid); text-shadow: none; }
  50%      { color: var(--champagne); text-shadow: 0 0 18px rgba(201,169,110,.55), 0 0 32px rgba(201,169,110,.25); }
}

/* BEFORE/AFTER */
.ba-section { padding: 100px 60px; background: var(--obsidian-2); }
.ba-slider-wrap { position: relative; overflow: hidden; aspect-ratio: 16/7; margin-top: 48px; cursor: ew-resize; background: var(--obsidian-3); }
.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-after { clip-path: inset(0 50% 0 0); }
.ba-before-bg, .ba-after-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.ba-before-bg { background-color: #1a1814; }
.ba-after-bg { background-color: #1d2420; }
.ba-label { position: absolute; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 8px 16px; background: rgba(12,12,11,.7); backdrop-filter: blur(4px); }
[dir="rtl"] .ba-label { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
.ba-label-before { top: 24px; left: 24px; color: var(--gray-mid); }
.ba-label-after { top: 24px; right: 24px; color: var(--champagne); }
[dir="rtl"] .ba-label-before { left: auto; right: 24px; }
[dir="rtl"] .ba-label-after { right: auto; left: 24px; }
.ba-divider { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--champagne); left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: var(--champagne); border-radius: 50%; z-index: 11; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.ba-handle svg { width: 18px; height: 18px; stroke: var(--obsidian); fill: none; stroke-width: 2; }
/* Idle hint: gentle glow pulse on the handle while the slider auto-nudges. */
@keyframes baHandlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,.5); }
  50%      { box-shadow: 0 0 0 14px rgba(201,169,110,0); }
}
.ba-slider-wrap.is-hinting .ba-handle { animation: baHandlePulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ba-slider-wrap.is-hinting .ba-handle { animation: none; }
}

/* ESTIMATOR */
.estimator { padding: 88px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
[dir="rtl"] .estimator { direction: rtl; }
.estimator-tag { display: inline-block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); border: 0.5px solid rgba(201,169,110,.3); padding: 6px 14px; margin-bottom: 28px; }
[dir="rtl"] .estimator-tag { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
.estimator-heading { font-family: var(--serif); font-size: clamp(34px,3.5vw,52px); font-weight: 300; line-height: 1.15; color: var(--cream); }
[dir="rtl"] .estimator-heading { font-family: var(--arabic); font-size: clamp(28px,3vw,44px); font-weight: 400; line-height: 1.3; text-align: right; }
.estimator-heading em { font-style: italic; color: var(--champagne); }
[dir="rtl"] .estimator-heading em { font-style: normal; }
.estimator-sub { font-size: 14px; line-height: 1.8; color: var(--gray-muted); margin-top: 20px; }
[dir="rtl"] .estimator-sub { font-family: var(--arabic); font-size: 16px; line-height: 2; text-align: right; }
.estimator-form { background: var(--obsidian-2); border: 0.5px solid rgba(201,169,110,.15); padding: 40px; }
.form-row { margin-bottom: 28px; }
.form-label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-muted); margin-bottom: 10px; }
[dir="rtl"] .form-label { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; text-align: right; }
.form-input, .form-select { width: 100%; background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,.18); color: var(--cream); font-family: var(--sans); font-size: 15px; font-weight: 300; padding: 14px 16px; outline: none; appearance: none; transition: border-color .25s; }
[dir="rtl"] .form-select { font-family: var(--arabic); font-size: 15px; text-align: right; }
.form-select option { background: var(--obsidian-3); }
.form-input:focus, .form-select:focus { border-color: var(--champagne); }
.form-range { width: 100%; accent-color: var(--champagne); height: 2px; cursor: pointer; }
.range-values { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-muted); margin-top: 8px; }
[dir="rtl"] .range-values { flex-direction: row-reverse; font-family: var(--arabic); font-size: 13px; }
.range-current { text-align: center; font-family: var(--serif); font-size: 28px; color: var(--champagne); font-weight: 300; margin-bottom: 6px; }
.tier-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.tier-btn { padding: 12px 8px; text-align: center; border: 0.5px solid rgba(201,169,110,.18); background: transparent; color: var(--gray-mid); font-family: var(--sans); font-size: 12px; font-weight: 400; cursor: pointer; transition: all .25s; letter-spacing: .06em; }
[dir="rtl"] .tier-btn { font-family: var(--arabic); font-size: 14px; letter-spacing: 0; }
.tier-btn.active, .tier-btn:hover { background: var(--champagne); color: var(--obsidian); border-color: var(--champagne); }
.estimate-result { background: var(--obsidian-4); border: 0.5px solid rgba(201,169,110,.2); padding: 28px; margin-top: 8px; display: none; }
.estimate-result.show { display: block; }
[dir="rtl"] .estimate-result { text-align: right; }
.estimate-from { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne-muted); margin-bottom: 8px; }
[dir="rtl"] .estimate-from { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; }
.estimate-range { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--cream); line-height: 1.1; }
.estimate-note { font-size: 12px; color: var(--gray-muted); margin-top: 10px; line-height: 1.6; }
[dir="rtl"] .estimate-note { font-family: var(--arabic); font-size: 14px; line-height: 1.9; }
.btn-primary { width: 100%; padding: 16px; background: var(--champagne); border: none; color: var(--obsidian); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: all .3s; margin-top: 8px; }
[dir="rtl"] .btn-primary { font-family: var(--arabic); font-size: 15px; letter-spacing: 0; text-transform: none; }
.btn-primary:hover { background: var(--champagne-light); }
.btn-outline { display: inline-block; padding: 14px 36px; border: 0.5px solid var(--champagne-muted); color: var(--champagne); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: transparent; transition: all .3s; }
[dir="rtl"] .btn-outline { font-family: var(--arabic); font-size: 15px; letter-spacing: 0; text-transform: none; }
.btn-outline:hover { background: var(--champagne); color: var(--obsidian); border-color: var(--champagne); }

/* 360° TOURS */
.tours-360 { padding: 100px 60px; background: var(--obsidian); }
.tours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.tour-card { position: relative; overflow: hidden; }
.tour-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--obsidian-3); }
.tour-img-inner { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--transition); filter: brightness(0.65); }
.tour-card:hover .tour-img-inner { transform: scale(1.05); filter: brightness(0.5); }
.tour-360-badge { position: absolute; top: 16px; left: 16px; background: rgba(201,169,110,0.15); border: 0.5px solid rgba(201,169,110,0.5); color: var(--champagne); font-size: 11px; letter-spacing: 0.18em; padding: 5px 12px; backdrop-filter: blur(4px); z-index: 2; font-family: var(--display); }
[dir="rtl"] .tour-360-badge { left: auto; right: 16px; }
.beta-badge { display: inline-block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; background: var(--champagne); color: var(--obsidian); padding: 3px 10px; vertical-align: middle; margin-left: 12px; font-family: var(--sans); font-weight: 500; position: relative; top: -4px; }
[dir="rtl"] .beta-badge { margin-left: 0; margin-right: 12px; }
.tour-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; }
.tour-360-icon { width: 60px; height: 60px; border: 1.5px solid rgba(201,169,110,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(12,12,11,0.5); backdrop-filter: blur(8px); transition: transform .3s, background .3s, border-color .3s; }
.tour-card:hover .tour-360-icon { background: rgba(201,169,110,0.12); transform: scale(1.1); border-color: rgba(201,169,110,0.8); }
.tour-360-icon svg { width: 26px; height: 26px; stroke: var(--champagne); fill: none; stroke-width: 1.5; }
.tour-coming { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 24px 20px; background: linear-gradient(to top, rgba(12,12,11,0.95) 0%, transparent 100%); }
[dir="rtl"] .tour-coming { text-align: right; }
.tour-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); margin-bottom: 6px; }
[dir="rtl"] .tour-label { font-family: var(--arabic); font-size: 12px; letter-spacing: 0; }
.tour-title { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--cream); line-height: 1.2; }
[dir="rtl"] .tour-title { font-family: var(--arabic); font-size: 18px; font-weight: 400; }
.tour-status { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne-muted); border: 0.5px solid rgba(201,169,110,0.25); padding: 4px 10px; }
[dir="rtl"] .tour-status { font-family: var(--arabic); font-size: 11px; letter-spacing: 0; }
.tours-360-desc { font-size: 15px; color: var(--gray-mid); max-width: 600px; line-height: 1.75; margin-top: 16px; }
[dir="rtl"] .tours-360-desc { font-family: var(--arabic); font-size: 16px; }

/* INSTAGRAM FEED */
.ig-feed { padding: 100px 60px; background: var(--obsidian); }
.ig-feed-desc { font-size: 15px; color: var(--gray-mid); max-width: 600px; line-height: 1.75; margin-top: 16px; }
[dir="rtl"] .ig-feed-desc { font-family: var(--arabic); font-size: 16px; }
.ig-rail {
  display: flex; gap: 20px; margin-top: 48px; padding-bottom: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--champagne-muted) transparent;
}
[dir="rtl"] .ig-rail { direction: rtl; }
.ig-rail::-webkit-scrollbar { height: 6px; }
.ig-rail::-webkit-scrollbar-track { background: transparent; }
.ig-rail::-webkit-scrollbar-thumb { background: var(--champagne-muted); border-radius: 3px; border: 0; }

/* Gold scrollbar to match the brand (WebKit + Firefox), theme-aware via vars */
html { scrollbar-width: thin; scrollbar-color: var(--champagne) var(--obsidian-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--obsidian-2); }
::-webkit-scrollbar-thumb { background: var(--champagne); border: 3px solid var(--obsidian-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--champagne-light); }
.ig-card {
  flex: 0 0 auto; width: 260px; aspect-ratio: 9/16; position: relative;
  overflow: hidden; scroll-snap-align: start; cursor: pointer;
  background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,0.15);
  text-decoration: none; display: block;
}
.ig-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.92); transition: transform .8s var(--transition), filter .4s var(--transition); }
.ig-card:hover .ig-card-media { transform: scale(1.05); filter: brightness(1); }
.ig-badge { position: absolute; top: 14px; left: 14px; z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(12,12,11,0.5); border: 0.5px solid rgba(201,169,110,0.5); backdrop-filter: blur(4px); color: var(--champagne); }
[dir="rtl"] .ig-badge { left: auto; right: 14px; }
.ig-badge svg { width: 16px; height: 16px; stroke: var(--champagne); fill: none; stroke-width: 1.5; }
.ig-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .3s; }
.ig-card:hover .ig-play { opacity: 0; }
.ig-play-icon { width: 54px; height: 54px; border: 1.5px solid rgba(201,169,110,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(12,12,11,0.45); backdrop-filter: blur(8px); transition: transform .3s, background .3s, border-color .3s; }
.ig-card:hover .ig-play-icon { background: rgba(201,169,110,0.12); transform: scale(1.1); border-color: rgba(201,169,110,0.8); }
.ig-play-icon svg { width: 20px; height: 20px; fill: var(--champagne); stroke: none; margin-left: 3px; }
.ig-caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 36px 18px 16px; background: linear-gradient(to top, rgba(12,12,11,0.95) 0%, transparent 100%); font-family: var(--serif); font-size: 15px; font-weight: 300; color: var(--cream); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[dir="rtl"] .ig-caption { text-align: right; font-family: var(--arabic); font-size: 14px; }
.ig-feed-error { margin-top: 32px; font-size: 13px; color: var(--gray-muted); }
[dir="rtl"] .ig-feed-error { font-family: var(--arabic); font-size: 14px; }
/* In-page Reel player */
.ig-modal { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 72px 16px 24px; background: rgba(8,8,7,0.92); backdrop-filter: blur(6px); cursor: auto; }
.ig-modal.show { display: flex; }
.ig-modal-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ig-modal-video { max-height: 78vh; max-width: min(440px, 92vw); aspect-ratio: 9/16; background: #000; border: 0.5px solid rgba(201,169,110,0.25); display: block; cursor: auto; }
.ig-modal-close { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; font-size: 30px; line-height: 1; color: var(--cream); background: rgba(12,12,11,0.5); border: 0.5px solid rgba(201,169,110,0.4); cursor: pointer; transition: background .25s, border-color .25s; z-index: 2; }
.ig-modal-close:hover { background: rgba(201,169,110,0.15); border-color: var(--champagne); }
.ig-modal-link { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); text-decoration: none; border: 0.5px solid rgba(201,169,110,0.4); padding: 8px 18px; transition: background .25s, color .25s; cursor: pointer; }
.ig-modal-link:hover { background: var(--champagne); color: var(--obsidian); }
[dir="rtl"] .ig-modal-link { font-family: var(--arabic); letter-spacing: 0; }
/* Services nav dropdown (injected by main.js) */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-links .nav-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: rgba(12,12,11,0.97); backdrop-filter: blur(12px); border: 0.5px solid rgba(201,169,110,0.18); padding: 8px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; z-index: 300; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links .nav-dd-menu a { padding: 10px 22px; font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: var(--gray-mid); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.nav-links .nav-dd-menu a::after { display: none; }
.nav-links .nav-dd-menu a:hover { color: var(--cream); background: rgba(201,169,110,0.08); }
[dir="rtl"] .nav-links .nav-dd-menu { left: auto; right: 0; }
[dir="rtl"] .nav-links .nav-dd-menu a { font-family: var(--arabic); }
html[data-theme="light"] .nav-links .nav-dd-menu { background: rgba(245,240,232,0.98); }

/* TESTIMONIALS */
.testimonials { padding: 100px 60px; background: var(--obsidian-2); }
.testimonials-track { overflow: hidden; margin-top: 56px; position: relative; direction: ltr; }
.testimonials-track::before, .testimonials-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.testimonials-track::before { left: 0; background: linear-gradient(to right, var(--obsidian-2) 0%, transparent 100%); }
.testimonials-track::after { right: 0; background: linear-gradient(to left, var(--obsidian-2) 0%, transparent 100%); }
.testimonials-marquee { display: flex; width: max-content; gap: 20px; animation: tmarquee 55s linear infinite; direction: ltr; }
.testimonials-marquee:hover { animation-play-state: paused; }
@keyframes tmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.testimonial-card { background: var(--obsidian-3); border: 0.5px solid rgba(201,169,110,.1); padding: 36px 32px; position: relative; transition: border-color .3s; width: 380px; flex-shrink: 0; }
.testimonial-card:hover { border-color: rgba(201,169,110,.3); }
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 20px; }
[dir="rtl"] .testimonial-stars { flex-direction: row-reverse; }
.star { width: 12px; height: 12px; background: var(--champagne); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.testimonial-quote { font-family: var(--serif); font-size: 16px; font-weight: 300; font-style: italic; line-height: 1.75; color: var(--cream-dark); }
[dir="rtl"] .testimonial-quote { font-family: var(--arabic); font-style: normal; font-size: 17px; line-height: 2; text-align: right; }
.testimonial-author { margin-top: 24px; padding-top: 20px; border-top: 0.5px solid rgba(201,169,110,.12); display: flex; align-items: center; gap: 14px; }
[dir="rtl"] .testimonial-author { flex-direction: row-reverse; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--obsidian-4); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 15px; color: var(--champagne); font-style: italic; flex-shrink: 0; border: 0.5px solid rgba(201,169,110,.2); }
.author-name { font-size: 14px; font-weight: 400; color: var(--cream); }
[dir="rtl"] .author-name { font-family: var(--arabic); font-size: 15px; text-align: right; }
.author-title { font-size: 12px; color: var(--gray-muted); margin-top: 2px; }
[dir="rtl"] .author-title { font-family: var(--arabic); font-size: 13px; text-align: right; }
.testimonial-google { position: absolute; top: 28px; right: 28px; font-size: 10px; letter-spacing: .1em; color: var(--gray-muted); display: flex; align-items: center; gap: 5px; }
[dir="rtl"] .testimonial-google { right: auto; left: 28px; flex-direction: row-reverse; }
.g-dot { width: 8px; height: 8px; border-radius: 50%; }

/* PROCESS TIMELINE */
.process { padding: 80px 60px; }
.process .section-header { justify-content: center; text-align: center; }
.process .section-label { justify-content: center; }
.process-timeline { position: relative; max-width: 640px; margin: 44px auto 0; }
.pt-line-fill { position: absolute; left: 21px; top: 0; width: 0.5px; height: 0%; background: var(--champagne); z-index: 2; pointer-events: none; transition: height 0.12s linear; }
[dir="rtl"] .pt-line-fill { left: auto; right: 21px; }
.process-timeline::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 0.5px; background: linear-gradient(to bottom, transparent, var(--champagne-muted) 4%, var(--champagne-muted) 96%, transparent); }
[dir="rtl"] .process-timeline::before { left: auto; right: 21px; }
.pt-step { display: flex; align-items: flex-start; gap: 32px; padding: 24px 0; border-bottom: 0.5px solid rgba(201,169,110,.06); opacity: 0.3; transition: opacity 0.5s ease; }
.pt-step:last-child { border-bottom: none; }
.pt-step.is-active { opacity: 1; }
.pt-node { width: 44px; height: 44px; flex-shrink: 0; border: 0.5px solid var(--champagne-muted); background: var(--obsidian); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: border-color 0.4s, background 0.4s, box-shadow 0.4s; }
.pt-node svg { width: 16px; height: 16px; stroke: var(--champagne-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; }
.pt-step.is-active .pt-node { border-color: var(--champagne); background: rgba(201,169,110,.07); box-shadow: 0 0 0 6px rgba(201,169,110,.05); }
.pt-step.is-active .pt-node svg { stroke: var(--champagne); }
.pt-body { flex: 1; padding-top: 4px; }
.pt-num { font-family: var(--display); font-size: 32px; line-height: 1; color: var(--cream); opacity: 0.1; letter-spacing: -0.02em; margin-bottom: 3px; transition: opacity 0.45s, color 0.45s; }
.pt-step.is-active .pt-num { opacity: 1; color: var(--champagne); }
.pt-tag { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); margin-bottom: 6px; opacity: 0; transition: opacity 0.45s 0.08s; }
[dir="rtl"] .pt-tag { font-family: var(--arabic); letter-spacing: 0; font-size: 10px; text-transform: none; }
.pt-step.is-active .pt-tag { opacity: 1; }
.pt-name { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--cream); margin-bottom: 7px; line-height: 1.2; }
[dir="rtl"] .pt-name { font-family: var(--arabic); font-size: 17px; line-height: 1.4; }
.pt-desc { font-size: 13px; line-height: 1.72; color: var(--gray-mid); max-width: 460px; }
[dir="rtl"] .pt-desc { font-family: var(--arabic); font-size: 14px; line-height: 1.9; }
@media (max-width: 1024px) { .process { padding: 64px 32px; } }
@media (max-width: 640px) {
  .process { padding: 52px 20px; }
  .process-timeline { margin-top: 32px; }
  .process-timeline::before { left: 21px; }
  [dir="rtl"] .process-timeline::before { left: auto; right: 21px; }
  .pt-step { gap: 22px; padding: 20px 0; }
  .pt-node { width: 44px; height: 44px; }
  .pt-num { font-size: 26px; }
  .pt-name { font-size: 16px; }
  .pt-desc { font-size: 12px; }
}

/* CTA STRIP */
.cta-strip { padding: 100px 60px; background: linear-gradient(135deg,var(--obsidian-3) 0%,var(--obsidian-4) 50%,var(--obsidian-3) 100%); text-align: center; position: relative; overflow: hidden; }
.cta-strip::before { content: 'THE WALLS'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--display); font-size: 220px; letter-spacing: .1em; color: rgba(201,169,110,.03); white-space: nowrap; pointer-events: none; }
.cta-sub { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); margin-bottom: 24px; }
[dir="rtl"] .cta-sub { font-family: var(--arabic); font-size: 15px; letter-spacing: 0; text-transform: none; }
.cta-heading { font-family: var(--serif); font-size: clamp(42px,6vw,80px); font-weight: 300; line-height: 1.05; color: var(--cream); margin-bottom: 40px; }
[dir="rtl"] .cta-heading { font-family: var(--arabic); font-size: clamp(36px,5vw,68px); font-weight: 400; line-height: 1.3; }
.cta-heading em { font-style: italic; color: var(--champagne); }
[dir="rtl"] .cta-heading em { font-style: normal; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.btn-wa { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: #25D366; color: white; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: all .3s; border: none; cursor: pointer; }
[dir="rtl"] .btn-wa { font-family: var(--arabic); font-size: 15px; letter-spacing: 0; text-transform: none; }
.btn-wa:hover { background: #1ebe59; }
.btn-wa svg { width: 18px; height: 18px; fill: white; flex-shrink: 0; }

/* FOOTER */
footer { background: var(--obsidian); border-top: 0.5px solid rgba(201,169,110,.12); padding: 60px 60px 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 48px; }
[dir="rtl"] .footer-grid { direction: rtl; }
.footer-brand { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--cream); margin-bottom: 16px; letter-spacing: .08em; }
[dir="rtl"] .footer-brand { font-family: var(--arabic); font-size: 26px; letter-spacing: 0; }
.footer-brand span { color: var(--champagne); }
.footer-tagline { font-size: 13px; color: var(--gray-muted); line-height: 1.7; max-width: 260px; }
[dir="rtl"] .footer-tagline { font-family: var(--arabic); font-size: 15px; line-height: 1.9; text-align: right; }
.footer-col-title { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne-muted); margin-bottom: 20px; }
[dir="rtl"] .footer-col-title { font-family: var(--arabic); font-size: 13px; letter-spacing: 0; text-transform: none; text-align: right; }
.footer-col a, .footer-col p { display: block; font-size: 13px; color: var(--gray-muted); text-decoration: none; margin-bottom: 10px; line-height: 1.5; transition: color .2s; }
[dir="rtl"] .footer-col a, [dir="rtl"] .footer-col p { font-family: var(--arabic); font-size: 15px; text-align: right; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 0.5px solid rgba(201,169,110,.08); font-size: 11px; color: var(--gray-muted); }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; font-family: var(--arabic); font-size: 13px; }
.footer-legal { display: flex; gap: 24px; }
[dir="rtl"] .footer-legal { flex-direction: row-reverse; }
.footer-legal a { color: var(--gray-muted); text-decoration: none; font-size: 11px; }
[dir="rtl"] .footer-legal a { font-family: var(--arabic); font-size: 13px; }

/* PROJECTS MAP */
.projects-map-section { background: var(--obsidian); padding-bottom: 0; }
.pm-header { text-align: center; padding: 100px 60px 60px; }
.pm-label { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.pm-label::before,.pm-label::after { content: ''; width: 32px; height: .5px; background: var(--champagne); }
.pm-title { font-family: var(--serif); font-size: clamp(36px,4vw,60px); font-weight: 300; color: var(--cream); margin-bottom: 20px; line-height: 1.0; }
.pm-title em { font-style: italic; color: var(--champagne); }
[dir="rtl"] .pm-title { font-family: var(--arabic); }
.pm-desc { font-size: 14px; color: var(--gray-mid); max-width: 500px; margin: 0 auto; line-height: 1.8; }
.pm-map-wrap { position: relative; border-top: .5px solid rgba(201,169,110,.12); }
#projectsMap { width: 100%; height: 560px; background: var(--obsidian-3); }
/* Leaflet overrides for dark theme */
.leaflet-container { background: #0c0c0b; font-family: var(--sans); }
.leaflet-control-zoom a { background: var(--obsidian-3); color: var(--champagne); border: .5px solid rgba(201,169,110,.3); }
.leaflet-control-zoom a:hover { background: var(--obsidian-4); }
/* Custom marker dot */
.pm-dot { width: 14px; height: 14px; background: white; border-radius: 50%; border: 2px solid rgba(201,169,110,.6); box-shadow: 0 0 12px rgba(255,255,255,.5); transition: transform .2s; }
.pm-dot-icon:hover .pm-dot { transform: scale(1.4); }
/* Popup */
.pm-leaflet-popup .leaflet-popup-content-wrapper { background: var(--obsidian-3); border: .5px solid rgba(201,169,110,.25); border-radius: 0; box-shadow: 0 8px 32px rgba(0,0,0,.5); padding: 0; }
.pm-leaflet-popup .leaflet-popup-tip { background: var(--obsidian-3); }
.pm-leaflet-popup .leaflet-popup-content { margin: 0; }
.pm-popup { padding: 16px 20px; }
.pm-popup-name { font-family: var(--serif); font-size: 15px; font-weight: 300; color: var(--cream); margin-bottom: 4px; }
.pm-popup-type { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne-muted); margin-bottom: 10px; }
.pm-popup-link { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); text-decoration: none; border-bottom: .5px solid rgba(201,169,110,.4); }
/* Legend chips */
.pm-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 60px; background: var(--obsidian-2); border-top: .5px solid rgba(201,169,110,.12); }
.pm-chip { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--obsidian-3); border: .5px solid rgba(201,169,110,.15); font-size: 11px; color: var(--cream); letter-spacing: .06em; transition: border-color .2s; }
.pm-chip:hover { border-color: rgba(201,169,110,.4); }
.pm-chip-dot { width: 6px; height: 6px; background: white; border-radius: 50%; flex-shrink: 0; }
.pm-chip-type { font-size: 10px; color: var(--champagne-muted); letter-spacing: .1em; }

/* WHATSAPP FLOAT */
.wa-float { position: fixed; bottom: 90px; right: 32px; z-index: 500; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.35); cursor: pointer; transition: all .3s; text-decoration: none; }
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 28px; height: 28px; fill: white; }
.wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(37,211,102,.3); animation: wapulse 2.5s ease-in-out infinite; }
@keyframes wapulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.7);opacity:0} }


/* Responsive */
@media (max-width:1024px) {
  .pm-header { padding: 80px 32px 48px; }
  .pm-legend { padding: 20px 32px; }
  #projectsMap { height: 440px; }
  nav { padding: 24px 32px; }
  nav.scrolled { padding: 16px 32px; }
  .nav-links { gap: 20px; }
  .hero-content { padding: 0 32px 60px; }
  .about-strip, .estimator { grid-template-columns: 1fr; gap: 48px; padding: 72px 32px; }
  .about-right { display: none; }
  .services, .ba-section, .process, .cta-strip, footer, .testimonials { padding: 72px 32px; }
  .portfolio { padding: 72px 32px; }
  .tours-360 { padding: 72px 32px; }
  .ig-feed { padding: 72px 32px; }
  .tours-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid .project-name { font-size: clamp(16px, 2vw, 24px); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .testimonials { padding: 72px 0; }
  .testimonial-card { width: 300px; }
  .process { padding: 72px 32px; }
  .process .section-header { padding-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width:640px) {
  nav { padding: 20px 20px; }
  nav.scrolled { padding: 14px 20px; }
  .nav-links { display: none; }
  .hero-content { padding: 0 20px 48px; }
  .hero-stats { gap: 24px; }
  .hero-scroll { display: none; }
  .services, .ba-section, .process, .cta-strip, footer, .about-strip, .estimator { padding: 60px 20px; }
  .portfolio { padding: 60px 20px; }
  .tours-360 { padding: 60px 20px; }
  .ig-feed { padding: 60px 20px; }
  .ig-card { width: 220px; }
  .tours-grid { grid-template-columns: 1fr; gap: 12px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-grid .project-name { font-size: 22px; }
  .testimonials { padding: 60px 0; }
  .testimonial-card { width: 280px; padding: 28px 24px; }
  .testimonials-track::before, .testimonials-track::after { width: 40px; }
  .services-grid { grid-template-columns: 1fr; }
  .hero-image-blocks { grid-template-columns: 1fr; }
  .hero-block:not(:first-child) { display: none; }
  .hero-bottom { flex-direction: column; gap: 28px; align-items: flex-start; }
  /* Override the higher-specificity desktop RTL rule so Arabic stacks like English */
  [dir="rtl"] .hero-bottom { flex-direction: column; align-items: flex-end; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-grid > :first-child, .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
  .process { padding: 60px 20px; }
  .process .section-header { padding-right: 0; }
  .wa-float { bottom: 100px; right: 20px; }
  .cta-buttons { flex-direction: column; }
  .pm-header { padding: 60px 20px 40px; }
  .pm-legend { padding: 16px 20px; gap: 8px; }
  #projectsMap { height: 360px; }
  .pm-chip { padding: 6px 12px; font-size: 10px; }
  .lang-btn { padding: 7px 10px; font-size: 10px; }
}

/* ── PAGE: SERVICES ── */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;--arabic:'Noto Naskh Arabic',serif;
  --tr:0.4s cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;overflow-x:hidden;cursor:none}
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 60px;transition:background var(--tr),padding var(--tr);border-bottom:.5px solid transparent;gap:24px}
nav.sc{background:rgba(12,12,11,.95);backdrop-filter:blur(12px);padding:16px 60px;border-bottom-color:rgba(201,169,110,.15)}
.nav-logo{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--cream);letter-spacing:.12em;text-decoration:none}
.nav-logo span{color:var(--champagne)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);text-decoration:none;transition:color .25s}
.nav-links a:hover,.nav-links a.act{color:var(--cream)}
.nav-cta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);border:.5px solid var(--champagne-muted);padding:10px 24px;text-decoration:none;transition:all .3s;white-space:nowrap}
.nav-cta:hover{background:var(--champagne);color:var(--obsidian)}

/* PAGE HERO */
.page-hero{padding:160px 60px 80px;background:var(--obsidian-2);position:relative;overflow:hidden}
.page-hero::before{content:'THE WALLS';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.ph-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fu .8s .2s ease forwards}
.ph-eyebrow::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.ph-h1{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.92;color:var(--cream);max-width:700px;opacity:0;animation:fu .9s .4s ease forwards}
.ph-h1 em{font-style:italic;color:var(--champagne)}
.ph-desc{font-size:15px;line-height:1.85;color:var(--gray-mid);max-width:540px;margin-top:28px;opacity:0;animation:fu .8s .6s ease forwards}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
[dir="rtl"] .en-only{display:none!important}
[dir="ltr"] .ar-only{display:none!important}
[dir="rtl"] body{font-family:var(--arabic)}
[dir="rtl"] .ph-h1,[dir="rtl"] .svc-h2,[dir="rtl"] .svc-cta-left h3{font-family:var(--arabic);letter-spacing:0}
[dir="rtl"] .ph-desc,[dir="rtl"] .svc-p,[dir="rtl"] .svc-item,[dir="rtl"] .svc-proc-label,[dir="rtl"] .svc-cta-left p{font-family:var(--arabic);font-size:calc(1em + 1px);line-height:1.9}
[dir="rtl"] .ph-eyebrow,[dir="rtl"] .svc-eyebrow,[dir="rtl"] .svc-items-title,[dir="rtl"] .svc-process-title{font-family:var(--arabic);letter-spacing:0;text-transform:none}
[dir="rtl"] .svc-tab{font-family:var(--arabic);letter-spacing:0;text-transform:none}
[dir="rtl"] .svc-tabs,[dir="rtl"] .svc-hero-grid,[dir="rtl"] .svc-items-grid,[dir="rtl"] .svc-process-steps{direction:rtl}
.nav-right{display:flex;align-items:center;gap:16px}

/* SERVICE TABS */
.svc-tabs{display:flex;gap:0;padding:0 60px;background:var(--obsidian-2);border-bottom:.5px solid rgba(201,169,110,.12);overflow-x:auto}
.svc-tab{padding:18px 24px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .25s;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.svc-tab.act{color:var(--champagne);border-bottom-color:var(--champagne)}
.svc-tab:hover:not(.act){color:var(--cream)}

/* SERVICE SECTIONS */
.svc-section{display:none;padding:80px 60px}
.svc-section.show{display:block}
.svc-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:72px}
.svc-img-main{width:100%;aspect-ratio:4/3;overflow:hidden;position:relative}
.svc-img-main img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--tr)}
.svc-img-main:hover img{transform:scale(1.04)}
.svc-img-main::before{content:'';position:absolute;inset:16px;border:.5px solid rgba(201,169,110,.15);z-index:1;pointer-events:none}
.svc-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.svc-eyebrow::before{content:attr(data-n);color:var(--champagne-muted);font-size:9px}
.svc-h2{font-family:var(--serif);font-size:clamp(36px,4vw,56px);font-weight:300;line-height:1.05;color:var(--cream);margin-bottom:24px}
.svc-h2 em{font-style:italic;color:var(--champagne)}
.svc-p{font-size:14px;line-height:1.9;color:var(--gray-mid);margin-bottom:16px}
.svc-items{margin-top:32px}
.svc-items-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne-muted);margin-bottom:16px}
.svc-items-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.svc-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.1);font-size:13px;color:var(--cream-dark);transition:border-color .25s}
.svc-item:hover{border-color:rgba(201,169,110,.3)}
.svc-item::before{content:'';width:4px;height:4px;background:var(--champagne);border-radius:50%;flex-shrink:0}

/* PROCESS MINI */
.svc-process{background:var(--obsidian-2);padding:48px;margin:0 -60px;border-top:.5px solid rgba(201,169,110,.1);border-bottom:.5px solid rgba(201,169,110,.1)}
.svc-process-title{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne-muted);margin-bottom:28px}
.svc-process-steps{display:flex;gap:0}
.svc-proc-step{flex:1;padding:0 24px;text-align:center;position:relative}
.svc-proc-step::after{content:'→';position:absolute;right:-10px;top:14px;color:var(--champagne-muted);font-size:14px}
.svc-proc-step:last-child::after{display:none}
.svc-proc-num{font-family:var(--display);font-size:32px;color:rgba(201,169,110,.3);line-height:1;margin-bottom:8px}
.svc-proc-label{font-size:12px;color:var(--gray-mid)}

/* GALLERY MINI */
.svc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:48px}
.svc-gal-item{aspect-ratio:4/3;overflow:hidden;position:relative;cursor:pointer}
.svc-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--tr)}
.svc-gal-item:hover img{transform:scale(1.08)}
.svc-img-placeholder{width:100%;height:100%;min-height:320px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.15);display:flex;align-items:center;justify-content:center;}
.svc-gal-item .svc-img-placeholder{min-height:200px;}

/* CTA BAND */
.svc-cta-band{background:var(--obsidian-3);padding:48px 60px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;border-top:.5px solid rgba(201,169,110,.12)}
.svc-cta-left h3{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--cream)}
.svc-cta-left h3 em{font-style:italic;color:var(--champagne)}
.svc-cta-left p{font-size:13px;color:var(--gray-muted);margin-top:6px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-wa{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#25D366;color:white;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.btn-wa:hover{background:#1ebe59}
.btn-wa svg{width:18px;height:18px;fill:white}
.btn-out{display:inline-block;padding:14px 28px;border:.5px solid var(--champagne-muted);color:var(--champagne);font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .3s}
.btn-out:hover{background:var(--champagne);color:var(--obsidian)}

.rev{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}

.wa-float{position:fixed;bottom:90px;right:32px;z-index:500;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px;fill:white}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:wap 2.5s ease-in-out infinite}
@keyframes wap{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}

@media(max-width:900px){
  nav{padding:20px 24px}
  nav.sc{padding:14px 24px}
  .page-hero{padding:120px 24px 60px}
  .svc-tabs{padding:0 24px}
  .svc-section{padding:60px 24px}
  .svc-hero-grid{grid-template-columns:1fr;gap:40px}
  .svc-items-grid{grid-template-columns:1fr}
  .svc-process{padding:40px 24px;margin:0 -24px}
  .svc-process-steps{flex-wrap:wrap;gap:24px}
  .svc-proc-step::after{display:none}
  .svc-cta-band{padding:36px 24px;flex-direction:column;align-items:flex-start}
  .svc-gallery{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}

/* ── PAGE: PORTFOLIO ── */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;
  --tr:0.4s cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;cursor:none}

.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}

/* PAGE HERO */
.page-hero{padding:160px 60px 80px;background:var(--obsidian-2);position:relative;overflow:hidden}
.page-hero::before{content:'THE WALLS';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.ph-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fu .8s .2s ease forwards}
.ph-eyebrow::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.ph-h1{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.92;color:var(--cream);max-width:700px;opacity:0;animation:fu .9s .4s ease forwards}
.ph-h1 em{font-style:italic;color:var(--champagne)}
.ph-desc{font-size:15px;line-height:1.85;color:var(--gray-mid);max-width:540px;margin-top:28px;opacity:0;animation:fu .8s .6s ease forwards}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* FILTER BAR */
.filter-bar{padding:48px 60px;background:var(--obsidian);display:flex;gap:16px;flex-wrap:wrap;align-items:center;border-bottom:.5px solid rgba(201,169,110,.12);overflow-x:auto}
.filter-btn{padding:8px 16px;border:.5px solid rgba(201,169,110,.2);background:transparent;color:var(--gray-mid);font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .25s;white-space:nowrap}
.filter-btn.active{background:var(--champagne);color:var(--obsidian);border-color:var(--champagne)}
.filter-btn:hover:not(.active){color:var(--cream);border-color:rgba(201,169,110,.3)}

/* SEARCH BAR */
.portfolio-search{padding:0 60px 48px;background:var(--obsidian);display:flex;gap:12px;align-items:center;opacity:0;animation:fu .8s .7s ease forwards}
.portfolio-search-bar{max-width:560px;margin:0 60px 48px;}

/* NAV RIGHT */
.nav-right{display:flex;align-items:center;gap:16px}

/* PORTFOLIO GRID */
.portfolio-grid{padding:0 60px 100px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.portfolio-card{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;opacity:0;animation:fu .8s ease forwards;background:url('../../images/placeholder-interior.svg') center/cover no-repeat}
.portfolio-card.show{animation:fu .8s ease forwards}
.portfolio-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,11,.85) 0%,rgba(12,12,11,.2) 60%,transparent 100%);z-index:2;transition:opacity .3s}
.portfolio-card::after{content:'';position:absolute;inset:16px;border:.5px solid rgba(201,169,110,.1);pointer-events:none;z-index:2}
.portfolio-card-content{position:absolute;bottom:0;left:0;right:0;padding:24px;z-index:3;transform:translateY(8px);transition:transform .3s;opacity:.85;transition:opacity .3s,transform .3s}
.portfolio-card:hover .portfolio-card-content{transform:translateY(0);opacity:1}
.portfolio-card:hover::after{border-color:rgba(201,169,110,.25)}
.portfolio-cat{display:inline-block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);background:rgba(201,169,110,.12);padding:4px 10px;margin-bottom:8px}
.portfolio-name{font-family:var(--serif);font-size:18px;font-weight:300;color:var(--cream);margin-bottom:4px}
.portfolio-meta{font-size:12px;color:var(--gray-mid)}
/* Tint variation per card to add visual variety */
.portfolio-card:nth-child(1){background-color:#1d1a14}
.portfolio-card:nth-child(2){background-color:#171c1a;background-position:center top}
.portfolio-card:nth-child(3){background-color:#1a1c18;background-position:center 40%}
.portfolio-card:nth-child(4){background-color:#1c1a14;background-position:center bottom}
.portfolio-card:nth-child(5){background-color:#191714;background-position:right center}
.portfolio-card:nth-child(6){background-color:#161a1c;background-position:left center}
.portfolio-card:nth-child(7){background-color:#1a161a;background-position:center 30%}
.portfolio-card:nth-child(8){background-color:#1c1a16;background-position:center 70%}
.portfolio-card:nth-child(9){background-color:#14171a;background-position:right bottom}

/* REVEAL */
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-hero{padding:120px 24px 60px}
  .page-hero::before{font-size:140px;bottom:-10px;left:-5px}
  .filter-bar,.portfolio-search{padding-left:24px;padding-right:24px}
  .portfolio-search-bar{margin-left:24px;margin-right:24px;max-width:100%;}
  .portfolio-grid{padding:0 24px 80px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
}

@media(max-width:600px){
  .page-hero{padding:80px 16px 40px}
  .ph-h1{font-size:clamp(40px,6vw,56px)}
  .filter-bar{padding:32px 16px;gap:8px}
  .filter-btn{font-size:10px;padding:6px 12px}
  .portfolio-search{padding:0 16px 32px}
  .portfolio-search-bar{margin:0 16px 32px;}
  .search-input{max-width:100%;font-size:14px}
  .portfolio-grid{padding:0 16px 60px}
  .portfolio-card-content{padding:16px}
  .portfolio-name{font-size:14px}
  .portfolio-meta{font-size:11px}
}

/* ── PAGE: ABOUT ── */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;--arabic:'Noto Naskh Arabic',serif;
  --tr:0.4s cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;overflow-x:hidden;cursor:none}
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 60px;transition:background var(--tr),padding var(--tr);border-bottom:.5px solid transparent;gap:24px}
nav.sc{background:rgba(12,12,11,.95);backdrop-filter:blur(12px);padding:16px 60px;border-bottom-color:rgba(201,169,110,.15)}
.nav-logo{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--cream);letter-spacing:.12em;text-decoration:none}
.nav-logo span{color:var(--champagne)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);text-decoration:none;transition:color .25s}
.nav-links a:hover,.nav-links a.act{color:var(--cream)}
.nav-cta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);border:.5px solid var(--champagne-muted);padding:10px 24px;text-decoration:none;transition:all .3s;white-space:nowrap}
.nav-cta:hover{background:var(--champagne);color:var(--obsidian)}
.nav-right{display:flex;align-items:center;gap:16px}

/* PAGE HERO */
.page-hero{padding:160px 60px 80px;background:var(--obsidian-2);position:relative;overflow:hidden}
.page-hero::before{content:'THE WALLS';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.ph-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fu .8s .2s ease forwards}
.ph-eyebrow::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.ph-h1{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.92;color:var(--cream);max-width:700px;opacity:0;animation:fu .9s .4s ease forwards}
.ph-h1 em{font-style:italic;color:var(--champagne)}
.ph-desc{font-size:15px;line-height:1.85;color:var(--gray-mid);max-width:540px;margin-top:28px;opacity:0;animation:fu .8s .6s ease forwards}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* RTL overrides */
[dir="rtl"] .en-only{display:none!important}
[dir="ltr"] .ar-only{display:none!important}
[dir="rtl"] body{font-family:var(--arabic)}
[dir="rtl"] .ph-h1,[dir="rtl"] .mv-heading,[dir="rtl"] .story-heading,[dir="rtl"] .value-name,[dir="rtl"] .team-name,[dir="rtl"] .about-cta-band h3{font-family:var(--arabic);letter-spacing:0}
[dir="rtl"] .ph-desc,[dir="rtl"] .mv-body,[dir="rtl"] .story-body,[dir="rtl"] .value-desc,[dir="rtl"] .about-cta-band p{font-family:var(--arabic);font-size:calc(1em + 1px);line-height:1.9}
[dir="rtl"] .ph-eyebrow,[dir="rtl"] .mv-label,[dir="rtl"] .stat-label,[dir="rtl"] .team-role,[dir="rtl"] .team-dept-title{font-family:var(--arabic);letter-spacing:0;text-transform:none}
[dir="rtl"] .mv-section,[dir="rtl"] .about-story,[dir="rtl"] .values-grid,[dir="rtl"] .stats-band,[dir="rtl"] .team-grid{direction:rtl}

/* SCROLL REVEAL */
.rev{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.12s}.rd2{transition-delay:.24s}.rd3{transition-delay:.36s}.rd4{transition-delay:.48s}

/* ── MISSION / VISION ── */
.mv-section{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:80px 60px;max-width:1280px;margin:0 auto}
.mv-card{border:.5px solid rgba(201,169,110,.22);padding:48px 40px;position:relative;transition:border-color .4s}
.mv-card:hover{border-color:rgba(201,169,110,.5)}
.mv-card::before{content:'';position:absolute;top:0;left:0;width:48px;height:2px;background:var(--champagne)}
.mv-icon{width:36px;height:36px;stroke:var(--champagne);fill:none;stroke-width:1.5;margin-bottom:24px}
.mv-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:14px}
.mv-heading{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);font-weight:300;color:var(--cream);margin-bottom:20px;line-height:1.15}
.mv-heading em{font-style:italic;color:var(--champagne)}
.mv-body{font-size:14px;line-height:1.85;color:var(--gray-mid)}

/* ── COMPANY STORY ── */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:80px 60px;max-width:1280px;margin:0 auto;align-items:center}
.story-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.story-label::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.story-heading{font-family:var(--serif);font-size:clamp(32px,3.2vw,48px);font-weight:300;line-height:1.1;color:var(--cream);margin-bottom:28px}
.story-heading em{font-style:italic;color:var(--champagne)}
.story-body{font-size:14px;line-height:1.9;color:var(--gray-mid);margin-bottom:16px}
.story-img{overflow:hidden;position:relative}
.story-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s ease}
.story-img:hover img{transform:scale(1.04)}

/* ── VALUES ── */
.values-section{padding:80px 60px;max-width:1280px;margin:0 auto}
.values-header{margin-bottom:52px}
.values-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.values-label::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.values-title{font-family:var(--serif);font-size:clamp(32px,3.2vw,48px);font-weight:300;color:var(--cream)}
.values-title em{font-style:italic;color:var(--champagne)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-card{background:var(--obsidian-3);border:.5px solid var(--obsidian-4);padding:40px 32px;transition:border-color .4s}
.value-card:hover{border-color:rgba(201,169,110,.3)}
.value-icon{width:32px;height:32px;stroke:var(--champagne);fill:none;stroke-width:1.5;margin-bottom:24px}
.value-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cream);margin-bottom:14px}
.value-desc{font-size:13px;line-height:1.8;color:var(--gray-mid)}

/* ── STATS BAND ── */
.stats-band{background:var(--obsidian-2);border-top:.5px solid rgba(201,169,110,.1);border-bottom:.5px solid rgba(201,169,110,.1);display:grid;grid-template-columns:repeat(4,1fr)}
.stat-block{text-align:center;border-right:.5px solid rgba(201,169,110,.08);padding:60px 24px}
.stat-block:last-child{border-right:none}
.stat-num{font-family:var(--display);font-size:clamp(52px,5.5vw,80px);color:var(--champagne);line-height:1}
.stat-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-muted);margin-top:10px}

/* ── OFFICE GALLERY ── */
.gallery-section{padding:80px 60px;max-width:1280px;margin:0 auto}
.gallery-header{margin-bottom:40px}
.gallery-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.gallery-label::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.gallery-title{font-family:var(--serif);font-size:clamp(32px,3.2vw,48px);font-weight:300;color:var(--cream)}
.gallery-title em{font-style:italic;color:var(--champagne)}
.office-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:260px 260px;gap:10px}
.gal-item{overflow:hidden;position:relative}
.gal-item:first-child{grid-row:span 2}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.gal-item:hover img{transform:scale(1.06)}

/* ── TEAM ── */
.team-section{padding:80px 60px;max-width:1280px;margin:0 auto}
.team-header{margin-bottom:52px}
.team-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.team-label::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.team-title{font-family:var(--serif);font-size:clamp(32px,3.2vw,48px);font-weight:300;color:var(--cream)}
.team-title em{font-style:italic;color:var(--champagne)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-dept{margin-bottom:56px}
.team-dept:last-child{margin-bottom:0}
.team-dept-title{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);margin-bottom:28px;display:flex;align-items:center;gap:12px}
.team-dept-title::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.team-card{text-align:center}
.team-photo{aspect-ratio:3/4;overflow:hidden;background:var(--obsidian-3);margin-bottom:20px;position:relative}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease;filter:grayscale(10%)}
.team-card:hover .team-photo img{transform:scale(1.04)}
.team-placeholder-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.team-placeholder-icon svg{width:48px;height:48px;stroke:rgba(201,169,110,.2);fill:none;stroke-width:1}
.team-name{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--cream);margin-bottom:6px}
.team-role{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-muted)}

/* ── CTA BAND ── */
.about-cta-band{background:var(--obsidian-3);padding:64px 60px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;border-top:.5px solid rgba(201,169,110,.12)}
.about-cta-band h3{font-family:var(--serif);font-size:36px;font-weight:300;color:var(--cream)}
.about-cta-band h3 em{font-style:italic;color:var(--champagne)}
.about-cta-band p{font-size:13px;color:var(--gray-muted);margin-top:8px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-wa{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#25D366;color:white;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.btn-wa:hover{background:#1ebe59}
.btn-wa svg{width:18px;height:18px;fill:white}
.btn-out{display:inline-block;padding:14px 28px;border:.5px solid var(--champagne-muted);color:var(--champagne);font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .3s}
.btn-out:hover{background:var(--champagne);color:var(--obsidian)}

/* ── WHATSAPP FLOAT ── */
.wa-float{position:fixed;bottom:90px;right:32px;z-index:500;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px;fill:white}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:wap 2.5s ease-in-out infinite}
@keyframes wap{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* ── LIGHT THEME ── */
html[data-theme="light"] body{background:#fafaf8;color:#0c0c0b}
html[data-theme="light"] .page-hero{background:#f0ece4}
html[data-theme="light"] nav.sc{background:rgba(250,250,248,.95)}
html[data-theme="light"] .mv-card{background:#fafaf8}
html[data-theme="light"] .value-card{background:#f0ece4;border-color:#ddd8cf}
html[data-theme="light"] .stats-band{background:#f0ece4}
html[data-theme="light"] .about-cta-band{background:#f0ece4}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .mv-section,.about-story,.gallery-section,.values-section,.team-section{padding:60px 40px}
  .stats-band .stat-block{padding:48px 16px}
  .about-cta-band{padding:48px 40px}
}
@media(max-width:900px){
  nav{padding:20px 24px}
  nav.sc{padding:14px 24px}
  .page-hero{padding:120px 24px 60px}
  .mv-section{grid-template-columns:1fr;padding:48px 24px}
  .about-story{grid-template-columns:1fr;gap:40px;padding:48px 24px}
  .values-grid{grid-template-columns:1fr;gap:16px}
  .values-section{padding:48px 24px}
  .stats-band{grid-template-columns:repeat(2,1fr)}
  .stat-block{border-right:none;border-bottom:.5px solid rgba(201,169,110,.08);padding:36px 16px}
  .stat-block:nth-child(2),.stat-block:last-child{border-bottom:none}
  .gallery-section{padding:48px 24px}
  .office-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gal-item:first-child{grid-row:auto}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .team-section{padding:48px 24px}
  .about-cta-band{padding:48px 24px;flex-direction:column;align-items:flex-start}
  .nav-links{display:none}
}
@media(max-width:600px){
  .mv-section,.about-story,.values-section,.gallery-section,.team-section{padding:40px 20px}
  .mv-card{padding:32px 24px}
  .stats-band{grid-template-columns:1fr 1fr}
  .office-gallery{grid-template-columns:1fr;grid-template-rows:auto}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .about-cta-band{padding:40px 20px}
  .about-cta-band h3{font-size:28px}
}

/* ── PAGE: CONTACT ── */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;--arabic:'Noto Naskh Arabic',serif;
  --tr:0.4s cubic-bezier(.25,.46,.45,.94);
}
[dir="rtl"] .en-only{display:none!important}
[dir="ltr"] .ar-only{display:none!important}
[dir="rtl"] body{font-family:var(--arabic)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--arabic);letter-spacing:0}
[dir="rtl"] p,[dir="rtl"] .contact-detail,[dir="rtl"] .contact-title,[dir="rtl"] .office-info-content,[dir="rtl"] .faq-q,[dir="rtl"] .faq-a,[dir="rtl"] label{font-family:var(--arabic);font-size:calc(1em + 1px);line-height:1.9}
[dir="rtl"] .contact-grid,[dir="rtl"] .office-info,[dir="rtl"] .faq-list{direction:rtl}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;cursor:none}

.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}
@media(hover:none),(pointer:coarse){body{cursor:auto!important}.cursor,.cursor-ring{display:none!important}}

/* PAGE HERO */
.page-hero{padding:160px 60px 80px;background:var(--obsidian-2);position:relative;overflow:hidden}
.page-hero::before{content:'THE WALLS';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.ph-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fu .8s .2s ease forwards}
.ph-eyebrow::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.ph-h1{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.92;color:var(--cream);max-width:700px;opacity:0;animation:fu .9s .4s ease forwards}
.ph-h1 em{font-style:italic;color:var(--champagne)}
.ph-desc{font-size:15px;line-height:1.85;color:var(--gray-mid);max-width:540px;margin-top:28px;opacity:0;animation:fu .8s .6s ease forwards}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* SEND BUTTONS + FOLLOW LINK */
.form-send-options{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.btn-send-db{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 24px;background:var(--champagne);color:var(--obsidian);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:none;cursor:pointer;transition:background .3s,opacity .3s}
.btn-send-db:hover{filter:brightness(1.1)}
.btn-send-db:disabled{opacity:.6;cursor:not-allowed}
.btn-send-db svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
.form-send-alt-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-send-wa{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;background:#25D366;color:#fff;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:none;cursor:pointer;transition:background .3s;flex-shrink:0}
.btn-send-wa:hover{background:#1ebe59}
.btn-send-wa svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
.btn-send-email{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;background:transparent;color:var(--champagne);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:.5px solid var(--champagne-muted);cursor:pointer;transition:all .3s;flex-shrink:0}
.btn-send-email:hover{background:var(--champagne);color:var(--obsidian)}
.btn-send-email svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
.form-status{font-family:var(--sans);font-size:13px;padding:12px 16px;line-height:1.5;display:none}
.form-status.success{background:rgba(37,211,102,.08);color:#25D366;border:.5px solid rgba(37,211,102,.25);display:block}
.form-status.error{background:rgba(255,80,80,.07);color:#ff6060;border:.5px solid rgba(255,80,80,.22);display:block}
.form-follow{margin-top:20px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gray-mid);flex-wrap:wrap}
.follow-ig-link{display:inline-flex;align-items:center;gap:6px;color:var(--champagne);text-decoration:none;font-size:13px;border-bottom:.5px solid rgba(201,169,110,.3);transition:color .25s;padding-bottom:1px}
.follow-ig-link:hover{color:var(--champagne-light)}
.follow-ig-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
@media(max-width:480px){.form-send-alt-row{flex-direction:column}.btn-send-wa,.btn-send-email{justify-content:center}}

/* MAP + FORM — 2-col desktop layout */
.map-form-grid{padding:80px 60px;background:var(--obsidian-2);border-top:.5px solid rgba(201,169,110,.12);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.map-col{}
.form-col{}
.map-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px}
.map-title{font-family:var(--serif);font-size:clamp(32px,3vw,48px);font-weight:300;color:var(--cream);margin-bottom:32px}
.map-container{position:relative;width:100%;height:500px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.12);overflow:hidden}
.map-container iframe{width:100%;height:100%;border:none;filter:grayscale(40%) contrast(1.1) brightness(0.85)}
.map-note{font-size:12px;color:var(--gray-muted);margin-top:16px;font-style:italic}

/* OFFICE INFO STRIP */
.office-info{padding:60px;background:var(--obsidian-3);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:60px 0;border:.5px solid rgba(201,169,110,.12)}
.office-info-item{text-align:center}
.office-info-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-muted);margin-bottom:8px}
.office-info-content{font-size:15px;color:var(--cream)}

/* QUICK FORM */
.quick-form-section{padding:80px 60px;background:var(--obsidian);border-top:.5px solid rgba(201,169,110,.12)}
.qf-title{font-family:var(--serif);font-size:clamp(32px,3vw,48px);font-weight:300;color:var(--cream);margin-bottom:8px}
.qf-sub{font-size:14px;color:var(--gray-mid);margin-bottom:40px}
.quick-form{max-width:600px;display:flex;flex-direction:column;gap:20px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-muted)}
.form-input,.form-textarea{background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.18);color:var(--cream);font-family:var(--sans);font-size:14px;padding:13px 16px;outline:none;transition:border-color .25s}
.form-input:focus,.form-textarea:focus{border-color:var(--champagne)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--gray-muted)}
.form-textarea{resize:vertical;min-height:120px;line-height:1.6}
.btn-submit{padding:14px 28px;background:var(--champagne);color:var(--obsidian);border:none;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.btn-submit:hover{background:var(--champagne-light)}

/* FAQ SECTION */
.faq-section{padding:80px 60px;background:var(--obsidian-2);border-top:.5px solid rgba(201,169,110,.12)}
.faq-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px}
.faq-title{font-family:var(--serif);font-size:clamp(32px,3vw,48px);font-weight:300;color:var(--cream);margin-bottom:40px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.faq-item{background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.12);padding:28px;cursor:pointer;transition:all .25s}
.faq-item.open{background:var(--obsidian-4);border-color:rgba(201,169,110,.3)}
.faq-question{font-family:var(--serif);font-size:16px;font-weight:300;color:var(--cream);display:flex;align-items:flex-start;gap:16px;user-select:none;cursor:pointer;min-height:48px}
.faq-toggle{width:20px;height:20px;border:.5px solid rgba(201,169,110,.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--champagne);transition:all .25s}
.faq-item.open .faq-toggle{background:var(--champagne);color:var(--obsidian)}
.faq-answer{display:none;margin-top:20px;font-size:14px;color:var(--gray-mid);line-height:1.8}
.faq-item.open .faq-answer{display:block}

/* REVEAL */
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:translateY(0)}

/* NAV RIGHT */
.nav-right{display:flex;align-items:center;gap:16px}

/* RESPONSIVE */
@media(max-width:900px){
  .page-hero{padding:120px 24px 60px}
  .page-hero::before{font-size:140px}
  .contact-grid{grid-template-columns:1fr;padding:60px 24px;gap:24px}
  .map-form-grid{grid-template-columns:1fr;padding:60px 24px;gap:40px}
  .map-container{height:320px}
  .office-info{grid-template-columns:1fr;gap:24px;padding:40px 24px;margin:40px 0}
  .faq-section{padding:60px 24px}
  .faq-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .page-hero{padding:80px 16px 40px}
  .ph-h1{font-size:clamp(36px,5vw,52px)}
  .contact-grid{padding:40px 16px;gap:20px}
  .map-form-grid{padding:40px 16px;gap:32px}
  .map-container{height:260px}
  .office-info{padding:32px 16px;margin:32px 0;gap:16px}
  .faq-section{padding:40px 16px}
  .faq-item{padding:20px}
  .quick-form{gap:16px}
}

/* ── PAGE: BOOKING ── */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;--arabic:'Noto Naskh Arabic',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;min-height:100vh;cursor:none}

.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor.h,.cursor-ring.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 60px;background:rgba(12,12,11,.95);backdrop-filter:blur(12px);border-bottom:.5px solid rgba(201,169,110,.12)}
.nav-logo{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--cream);letter-spacing:.12em;text-decoration:none}
.nav-logo span{color:var(--champagne)}
.nav-back{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-muted);text-decoration:none;display:flex;align-items:center;gap:10px;transition:color .25s}
.nav-back::before{content:'←'}
.nav-back:hover{color:var(--champagne)}

/* LAYOUT */
.page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;padding-top:76px}

/* LEFT PANEL */
.left-panel{background:var(--obsidian-2);padding:80px 60px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.left-panel::before{content:'CONSULT';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:180px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.left-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:24px;display:flex;align-items:center;gap:12px;opacity:0;animation:fu .8s .2s ease forwards}
.left-eyebrow::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.left-h1{font-family:var(--serif);font-size:clamp(40px,4.5vw,64px);font-weight:300;line-height:1.05;color:var(--cream);margin-bottom:28px;opacity:0;animation:fu .9s .4s ease forwards}
.left-h1 em{font-style:italic;color:var(--champagne)}
.left-desc{font-size:14px;line-height:1.85;color:var(--gray-mid);max-width:400px;margin-bottom:48px;opacity:0;animation:fu .8s .6s ease forwards}
.left-features{display:flex;flex-direction:column;gap:16px;opacity:0;animation:fu .8s .8s ease forwards}
.left-feat{display:flex;align-items:flex-start;gap:14px}
.feat-icon{width:32px;height:32px;border:.5px solid rgba(201,169,110,.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.feat-icon svg{width:14px;height:14px;stroke:var(--champagne);fill:none;stroke-width:1.5}
.feat-text-title{font-size:13px;font-weight:500;color:var(--cream);margin-bottom:3px}
.feat-text-desc{font-size:12px;color:var(--gray-muted);line-height:1.5}

/* Photo strip */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:48px;opacity:0;animation:fu .8s 1s ease forwards}
.photo-strip-item{aspect-ratio:1;overflow:hidden;background:url('../../images/placeholder-interior.svg') center/cover no-repeat;position:relative}
.photo-strip-item::before{content:'';position:absolute;inset:0;background:rgba(12,12,11,.4);transition:background .4s}
.photo-strip-item:hover::before{background:rgba(12,12,11,.1)}
.photo-strip-item:nth-child(1){background-position:center top}
.photo-strip-item:nth-child(2){background-position:center center}
.photo-strip-item:nth-child(3){background-position:center bottom}

/* Inline field validation */
.form-error-msg{font-size:11px;color:#e57373;margin-top:4px;display:none;letter-spacing:.02em}
.form-input.err,.form-select.err{border-color:#e57373}
.form-input.ok,.form-select.ok{border-color:rgba(201,169,110,.5)}
.weekend-note{font-size:11px;color:var(--champagne);margin-top:6px;display:none}
.weekend-note.show{display:block}

/* RIGHT PANEL — FORM */
.right-panel{padding:80px 60px;display:flex;flex-direction:column;justify-content:center}
.form-heading{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--cream);margin-bottom:8px;opacity:0;animation:fu .8s .3s ease forwards}
.form-sub{font-size:13px;color:var(--gray-muted);margin-bottom:40px;opacity:0;animation:fu .8s .5s ease forwards}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;opacity:0;animation:fu .8s .6s ease forwards}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group.full{grid-column:span 2}
.form-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne-muted)}
.form-input,.form-select,.form-textarea{background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.18);color:var(--cream);font-family:var(--sans);font-size:14px;font-weight:300;padding:13px 16px;outline:none;width:100%;transition:border-color .25s;appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--champagne)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--gray-muted)}
.form-select option{background:var(--obsidian-3)}
.form-textarea{resize:vertical;min-height:100px;line-height:1.6}

/* Project type chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border:.5px solid rgba(201,169,110,.2);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-mid);cursor:pointer;transition:all .25s;background:transparent;font-family:var(--sans)}
.chip.sel{background:var(--champagne);color:var(--obsidian);border-color:var(--champagne)}
.chip:hover:not(.sel){color:var(--cream);border-color:rgba(201,169,110,.4)}

/* Budget slider */
.budget-display{font-family:var(--serif);font-size:28px;color:var(--champagne);font-weight:300;margin-bottom:8px;text-align:center}
.budget-range{width:100%;accent-color:var(--champagne);height:2px;cursor:pointer}
.budget-limits{display:flex;justify-content:space-between;font-size:11px;color:var(--gray-muted);margin-top:6px}

/* Date row */
.date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Submit */
.form-submit-row{grid-column:span 2;margin-top:8px;opacity:0;animation:fu .8s .9s ease forwards}
.btn-submit{width:100%;padding:16px;background:var(--champagne);border:none;color:var(--obsidian);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s;position:relative;overflow:hidden}
.btn-submit:hover{background:var(--champagne-light)}
.btn-submit::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .2s}
.btn-submit:active::after{background:rgba(255,255,255,.1)}
.form-note{font-size:11px;color:var(--gray-muted);text-align:center;margin-top:14px;line-height:1.6}
.form-note a{color:var(--champagne-muted);text-decoration:none}

/* Success state */
.success-panel{display:none;text-align:center;padding:40px 20px}
.success-panel.show{display:block}
.success-icon{width:64px;height:64px;border:.5px solid var(--champagne);margin:0 auto 24px;display:flex;align-items:center;justify-content:center}
.success-icon svg{width:28px;height:28px;stroke:var(--champagne);fill:none;stroke-width:1.5}
.success-h{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--cream);margin-bottom:12px}
.success-p{font-size:14px;color:var(--gray-muted);line-height:1.7;max-width:360px;margin:0 auto 32px}
.success-wa{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#25D366;color:white;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.success-wa:hover{background:#1ebe59}
.success-wa svg{width:18px;height:18px;fill:white}

/* WA float */
.wa-float{position:fixed;bottom:90px;right:32px;z-index:500;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px;fill:white}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:wap 2.5s ease-in-out infinite}
@keyframes wap{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
[dir="rtl"] .en-only{display:none!important}
[dir="ltr"] .ar-only{display:none!important}
[dir="rtl"] body,[dir="rtl"] .form-label,[dir="rtl"] .form-input,[dir="rtl"] .form-select,[dir="rtl"] .form-textarea,[dir="rtl"] .chip{font-family:var(--arabic)}
[dir="rtl"] .left-h1,[dir="rtl"] .form-heading,[dir="rtl"] .success-h{font-family:var(--arabic);letter-spacing:0}
[dir="rtl"] .page{direction:rtl}
[dir="rtl"] .left-eyebrow,[dir="rtl"] .feat-text-title,[dir="rtl"] .feat-text-desc,[dir="rtl"] .left-desc,[dir="rtl"] .form-sub,[dir="rtl"] .form-note{font-family:var(--arabic);line-height:1.9}

@media(max-width:900px){
  nav{padding:20px 24px}
  .page{grid-template-columns:1fr}
  .left-panel{padding:100px 32px 60px;min-height:auto}
  .right-panel{padding:48px 32px 80px}
  .photo-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:span 1}
  .form-submit-row{grid-column:span 1}
  .date-grid{grid-template-columns:1fr}
}

/* ── PAGE: BLOG ── */
:root{
  --obsidian:#0c0c0b;--obsidian-2:#141413;--obsidian-3:#1c1c1a;--obsidian-4:#252522;
  --champagne:#c9a96e;--champagne-light:#e8d5aa;--champagne-muted:#8a7253;
  --cream:#f5f0e8;--cream-dark:#e8e0d0;--gray-muted:#6b6b68;--gray-mid:#9a9a96;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--display:'Bebas Neue',sans-serif;
  --tr:0.4s cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;cursor:none}

.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}

/* PAGE HERO */
.page-hero{padding:160px 60px 80px;background:var(--obsidian-2);position:relative;overflow:hidden}
.page-hero::before{content:'THE WALLS';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.ph-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fu .8s .2s ease forwards}
.ph-eyebrow::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.ph-h1{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.92;color:var(--cream);max-width:700px;opacity:0;animation:fu .9s .4s ease forwards}
.ph-h1 em{font-style:italic;color:var(--champagne)}
.ph-desc{font-size:15px;line-height:1.85;color:var(--gray-mid);max-width:540px;margin-top:28px;opacity:0;animation:fu .8s .6s ease forwards}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* BLOG GRID */
.blog-grid{padding:80px 60px 100px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.blog-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.12);padding:40px;transition:border-color .3s;cursor:pointer;text-decoration:none;color:inherit;display:block}
.blog-card:hover{border-color:rgba(201,169,110,.3)}
.blog-tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);background:rgba(201,169,110,.1);padding:4px 10px;display:inline-block;margin-bottom:20px}
.blog-h2{font-family:var(--serif);font-size:clamp(22px,2.5vw,30px);font-weight:300;line-height:1.2;color:var(--cream);margin-bottom:16px}
.blog-h2 em{font-style:italic;color:var(--champagne)}
.blog-excerpt{font-size:14px;line-height:1.8;color:var(--gray-mid);margin-bottom:24px}
.blog-meta{font-size:11px;letter-spacing:.08em;color:var(--gray-muted);display:flex;align-items:center;gap:12px}
.blog-meta::before{content:'';width:20px;height:.5px;background:var(--champagne-muted)}
.blog-read-more{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);margin-top:24px;transition:gap .25s}
.blog-card:hover .blog-read-more{gap:12px}
.blog-read-more svg{width:14px;height:14px;stroke:var(--champagne);fill:none;stroke-width:2}

/* NAV RIGHT */
.nav-right{display:flex;align-items:center;gap:16px}

/* REVEAL */
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rev.vis{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:900px){
  .page-hero{padding:120px 24px 60px}
  .page-hero::before{font-size:140px}
  .blog-grid{padding:60px 24px 80px;gap:24px}
}
@media(max-width:600px){
  .page-hero{padding:80px 16px 40px}
  .ph-h1{font-size:clamp(40px,6vw,56px)}
  .blog-grid{padding:40px 16px 60px;grid-template-columns:1fr}
  .blog-card{padding:28px}
}

/* ── BLOG POST ARTICLE ── */
.article-hero{padding:160px 60px 60px;background:var(--obsidian-2);position:relative;overflow:hidden}
.article-hero::before{content:'';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.article-breadcrumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-muted);margin-bottom:28px;display:flex;align-items:center;gap:12px}
.article-breadcrumb a{color:var(--champagne);text-decoration:none;transition:opacity .25s}
.article-breadcrumb a:hover{opacity:.7}
.article-breadcrumb span{color:var(--gray-muted)}
.article-tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);background:rgba(201,169,110,.1);padding:4px 10px;display:inline-block;margin-bottom:20px}
.article-h1{font-family:var(--serif);font-size:clamp(26px,5vw,72px);font-weight:300;line-height:1.1;color:var(--cream);max-width:800px;opacity:0;animation:fu .9s .3s ease forwards}
.article-h1 em{font-style:italic;color:var(--champagne)}
.article-meta{font-size:12px;letter-spacing:.08em;color:var(--gray-muted);margin-top:24px;display:flex;gap:20px;flex-wrap:wrap}

.article-body{padding:80px 60px;max-width:760px}
.article-body p{font-size:15px;line-height:1.9;color:var(--gray-mid);margin-bottom:24px}
.article-body h2{font-family:var(--serif);font-size:clamp(24px,3vw,36px);font-weight:300;color:var(--cream);margin:48px 0 20px}
.article-body h2 em{font-style:italic;color:var(--champagne)}
.article-body h3{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne-muted);margin:32px 0 12px}
.article-body ul{list-style:none;margin-bottom:24px}
.article-body ul li{font-size:15px;line-height:1.9;color:var(--gray-mid);padding-left:20px;position:relative;margin-bottom:10px}

/* ── PAGE: CLIENT PORTAL ── */

.portal-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;background:var(--obsidian)}
.portal-login-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.14);padding:56px 48px;max-width:480px;width:100%}
.portal-login-eyebrow{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.portal-login-eyebrow::before{content:'';width:28px;height:.5px;background:var(--champagne)}
.portal-login-title{font-family:var(--serif);font-size:clamp(36px,5vw,56px);font-weight:300;line-height:.95;color:var(--cream);margin:0 0 20px}
.portal-login-title em{font-style:italic;color:var(--champagne)}
.portal-login-desc{font-size:14px;line-height:1.7;color:var(--gray-mid);margin:0}

.portal-sent-card{text-align:center}
.portal-sent-icon{width:64px;height:64px;border:1px solid rgba(201,169,110,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;color:var(--champagne)}
.portal-sent-icon svg{width:28px;height:28px}
.portal-sent-title{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--cream);margin:0 0 16px}
.portal-sent-msg{font-size:14px;line-height:1.7;color:var(--gray-mid);margin:0 0 16px}
.portal-sent-note{font-size:13px;color:var(--gray-muted);margin:0}
.portal-link-btn{background:none;border:none;color:var(--champagne);font-size:inherit;cursor:pointer;padding:0;text-decoration:underline;font-family:var(--sans)}

/* Portal loading */
.portal-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--gray-muted);font-size:14px;padding-top:80px}
.portal-loading-spinner{width:32px;height:32px;border:1.5px solid rgba(201,169,110,.2);border-top-color:var(--champagne);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* No project */
.portal-no-project{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 80px;text-align:center}
.portal-no-project-inner{max-width:440px}
.portal-nop-icon{width:80px;height:80px;border:.5px solid rgba(201,169,110,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;color:var(--champagne-muted)}
.portal-nop-icon svg{width:36px;height:36px}
.portal-nop-title{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--cream);margin:0 0 16px}
.portal-nop-desc{font-size:14px;line-height:1.7;color:var(--gray-mid);margin:0}

/* Portal project wrap */
.portal-project-wrap{padding-top:0}

/* Project header */
.portal-project-header{background:var(--obsidian);border-bottom:.5px solid rgba(201,169,110,.15);padding:168px 0 48px}
.portal-project-header-inner{max-width:1100px;margin:0 auto;padding:0 60px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.portal-project-eyebrow{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:14px}
.portal-project-name{font-family:var(--serif);font-size:clamp(32px,4vw,52px);font-weight:300;color:var(--cream);margin:0 0 12px;line-height:1}
.portal-project-meta{font-size:13px;color:var(--gray-muted);letter-spacing:.04em}
.portal-project-status-wrap{padding-top:8px}

/* Status chips */
.portal-status-chip{display:inline-block;padding:6px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;font-family:var(--sans)}
.portal-status-active{background:rgba(201,169,110,.12);color:var(--champagne);border:.5px solid rgba(201,169,110,.3)}
.portal-status-completed{background:rgba(100,180,100,.1);color:#7acc7a;border:.5px solid rgba(100,180,100,.3)}
.portal-status-on-hold{background:rgba(150,150,150,.1);color:var(--gray-mid);border:.5px solid rgba(150,150,150,.2)}

/* Sections */
.portal-section{padding:72px 0}
.portal-section-alt{background:var(--obsidian-2)}
.portal-section-inner{max-width:1100px;margin:0 auto;padding:0 60px}
.portal-section-label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:40px;display:flex;align-items:center;gap:14px}
.portal-section-label::before{content:'';width:28px;height:.5px;background:var(--champagne)}

/* Milestone vertical timeline */
.milestone-timeline{display:flex;flex-direction:column;max-width:560px}
.milestone-empty{font-size:14px;color:var(--gray-muted);padding:24px 0}
.ms-row{display:flex;gap:0;align-items:stretch}
.ms-spine{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0;padding-top:2px}
.ms-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:background .3s,border .3s,box-shadow .3s}
.ms-pending .ms-dot{background:var(--obsidian-3);border:1.5px solid rgba(201,169,110,.4)}
.ms-active .ms-dot{background:var(--champagne);border:1.5px solid var(--champagne);box-shadow:0 0 0 4px rgba(201,169,110,.15)}
.ms-done .ms-dot{background:rgba(201,169,110,.6);border:1.5px solid rgba(201,169,110,.6)}
.ms-line{width:1px;background:rgba(201,169,110,.18);flex:1;margin:6px 0 0}
.ms-body{padding:0 0 28px 16px;flex:1}
.ms-title{font-family:var(--serif);font-size:17px;font-weight:300;color:var(--cream);line-height:1.3;margin-top:-1px}
.ms-pending .ms-title{color:rgba(201,169,110,.45)}
.ms-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.ms-pending .ms-tag{color:rgba(201,169,110,.25)}
.ms-active .ms-tag{color:var(--champagne)}
.ms-done .ms-tag{color:rgba(201,169,110,.6)}

/* Update feed */
.update-feed{display:flex;flex-direction:column;gap:0}
.update-item{display:flex;gap:24px;padding:24px 0;border-bottom:.5px solid rgba(201,169,110,.06)}
.update-item:last-child{border-bottom:none}
.update-dot{width:8px;height:8px;border-radius:50%;background:var(--champagne);flex-shrink:0;margin-top:7px}
.update-content{flex:1}
.update-message{font-size:14px;line-height:1.75;color:var(--cream)}
.update-date{font-size:12px;color:var(--gray-muted);margin-top:8px}
.update-empty{font-size:14px;color:var(--gray-muted);padding:24px 0}

/* Photo grid */
.portal-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.portal-photo-item{position:relative;overflow:hidden;background:var(--obsidian-3);aspect-ratio:4/3}
.portal-photo-item img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .4s var(--transition)}
.portal-photo-item:hover img{transform:scale(1.03)}
.portal-photo-caption{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:linear-gradient(transparent,rgba(12,12,11,.85));font-size:12px;color:var(--cream-dark)}
.photo-empty{font-size:14px;color:var(--gray-muted);padding:24px 0;grid-column:1/-1}

/* Lightbox */
.portal-lightbox{position:fixed;inset:0;background:rgba(12,12,11,.95);z-index:9000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:40px}
.portal-lightbox.open{display:flex}
.portal-lightbox-close{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--gray-mid);cursor:pointer;padding:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.portal-lightbox-close:hover{color:var(--cream)}
.portal-lightbox-close svg{width:20px;height:20px}
.portal-lightbox-img{max-width:100%;max-height:80vh;object-fit:contain}
.portal-lightbox-caption{font-size:13px;color:var(--gray-mid);text-align:center}

/* Doc list */
.doc-list{display:flex;flex-direction:column;gap:2px}
.doc-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.06);transition:border-color .2s}
.doc-item:hover{border-color:rgba(201,169,110,.18)}
.doc-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--champagne-muted)}
.doc-icon svg{width:20px;height:20px}
.doc-info{flex:1;min-width:0}
.doc-name{font-size:14px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-date{font-size:12px;color:var(--gray-muted);margin-top:2px}
.doc-download{display:flex;align-items:center;gap:8px;padding:8px 16px;background:transparent;border:.5px solid rgba(201,169,110,.3);color:var(--champagne);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:var(--sans);white-space:nowrap;transition:background .2s,border-color .2s;flex-shrink:0}
.doc-download:hover{background:rgba(201,169,110,.08);border-color:rgba(201,169,110,.5)}
.doc-download svg{width:14px;height:14px}
.doc-empty{font-size:14px;color:var(--gray-muted);padding:24px 0}

/* Portal footer note */
.portal-footer-note{text-align:center;padding:48px 60px;border-top:.5px solid rgba(201,169,110,.06)}
.portal-footer-note p{font-size:13px;color:var(--gray-muted)}
.portal-footer-note a{color:var(--champagne);text-decoration:none}
.portal-footer-note a:hover{text-decoration:underline}

/* ── ADMIN LOGIN ── */
.admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--obsidian)}
.admin-login-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.12);padding:48px;max-width:420px;width:100%;text-align:center}
.admin-login-logo{margin-bottom:32px}
.admin-login-eyebrow{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:12px}
.admin-login-title{font-family:var(--serif);font-size:36px;font-weight:300;color:var(--cream);margin:0 0 12px}
.admin-login-desc{font-size:13px;color:var(--gray-muted);line-height:1.6;margin:0}

/* ── ADMIN DASHBOARD ── */
.admin-wrap{max-width:1200px;margin:0 auto;padding:120px 60px 80px}
.admin-eyebrow{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:8px}
.admin-page-title{font-family:var(--serif);font-size:clamp(28px,4vw,48px);font-weight:300;color:var(--cream);margin:0}
.admin-page-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.admin-loading{display:flex;align-items:center;gap:16px;padding:60px 0;color:var(--gray-muted);font-size:14px}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--sans)}
.admin-table th{text-align:left;padding:10px 16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne-muted);border-bottom:.5px solid rgba(201,169,110,.12);font-weight:400}
.admin-table td{padding:16px;border-bottom:.5px solid rgba(201,169,110,.06);color:var(--cream);vertical-align:middle}
.admin-table tr:hover td{background:rgba(201,169,110,.03)}
.admin-td-project{font-family:var(--serif);font-size:16px}
.admin-project-link{color:var(--cream);text-decoration:none}
.admin-project-link:hover{color:var(--champagne)}
.admin-client-name{font-size:13px;color:var(--cream)}
.admin-client-email{font-size:12px;color:var(--gray-muted);margin-top:2px}
.admin-td-actions{white-space:nowrap}
.admin-td-actions .admin-edit-btn{margin-right:8px}
.admin-edit-btn{color:var(--champagne);text-decoration:none;font-size:12px;letter-spacing:.08em;white-space:nowrap;vertical-align:middle}
.admin-edit-btn:hover{text-decoration:underline}
.admin-empty{padding:48px 0;color:var(--gray-muted);font-size:14px;text-align:center}
.admin-load-error{padding:40px 0;color:#e07070;font-size:14px;display:flex;flex-direction:column;gap:12px}
.admin-modal{width:100%}

/* ── ADMIN PROJECT PAGE ── */
.admin-project-subtitle{font-size:13px;color:var(--gray-muted);margin-top:8px}
.admin-status-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.2);color:var(--cream);font-size:12px;cursor:pointer;font-family:var(--sans);letter-spacing:.06em;position:relative}
.admin-status-btn:hover{border-color:rgba(201,169,110,.4)}
.admin-status-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.2);min-width:140px;z-index:100}
.admin-status-menu button{display:block;width:100%;padding:10px 16px;background:none;border:none;color:var(--cream);font-size:13px;text-align:left;cursor:pointer;font-family:var(--sans)}
.admin-status-menu button:hover{background:rgba(201,169,110,.08);color:var(--champagne)}
.admin-view-portal-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:transparent;border:.5px solid rgba(201,169,110,.2);color:var(--champagne);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;font-family:var(--sans)}
.admin-view-portal-btn:hover{background:rgba(201,169,110,.06)}

.admin-two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.admin-col{display:flex;flex-direction:column}
.admin-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.1);padding:28px}
.admin-card-header{margin-bottom:20px}
.admin-card-title{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--cream)}
.admin-card-sub{font-size:12px;color:var(--gray-muted);margin-top:4px}
.admin-empty-note{font-size:13px;color:var(--gray-muted);padding:16px 0}
.admin-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.admin-search{flex:1;min-width:200px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.2);color:var(--cream);padding:10px 16px;font-size:13px;font-family:var(--sans);outline:none}
.admin-search::placeholder{color:var(--gray-muted)}
.admin-search:focus{border-color:rgba(201,169,110,.5)}
.admin-filter-select{background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.2);color:var(--cream);padding:10px 14px;font-size:12px;font-family:var(--sans);cursor:pointer;outline:none}
.admin-filter-select:focus{border-color:rgba(201,169,110,.5)}
.admin-delete-row-btn{background:transparent;border:.5px solid rgba(201,169,110,.15);color:var(--gray-muted);padding:6px 8px;cursor:pointer;display:inline-flex;align-items:center;vertical-align:middle;transition:color .2s,border-color .2s}
.admin-delete-row-btn:hover{color:#e07070;border-color:rgba(224,112,112,.4)}

/* Milestone admin */
.milestone-admin-list{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.milestone-admin-item{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.06);transition:border-color .2s}
.milestone-admin-item:hover{border-color:rgba(201,169,110,.16)}
.milestone-admin-cycle{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0}
.milestone-admin-dot{width:14px;height:14px;border-radius:50%;display:block;transition:background .2s}
.milestone-dot-pending{background:var(--obsidian-4);border:1.5px solid rgba(201,169,110,.3)}
.milestone-dot-active{background:var(--champagne)}
.milestone-dot-done{background:#7acc7a}
.milestone-admin-info{flex:1}
.milestone-admin-title{font-size:14px;color:var(--cream)}
.milestone-admin-tag{font-size:11px;margin-top:2px}
.milestone-admin-pending .milestone-admin-tag{color:var(--gray-muted)}
.milestone-admin-active .milestone-admin-tag{color:var(--champagne)}
.milestone-admin-done .milestone-admin-tag{color:#7acc7a}

/* Admin add row */
.admin-add-row{display:flex;gap:8px;align-items:center}
.admin-add-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;background:var(--champagne);color:var(--obsidian);border:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:var(--sans);font-weight:500;white-space:nowrap;flex-shrink:0}
.admin-add-btn:hover{background:var(--champagne-light)}
.admin-add-btn:disabled{opacity:.5;cursor:not-allowed}
.admin-add-btn svg{width:14px;height:14px}

/* Admin delete button */
.admin-delete-btn{background:none;border:none;color:var(--gray-muted);cursor:pointer;padding:4px;display:flex;align-items:center;flex-shrink:0;opacity:.6}
.admin-delete-btn:hover{color:#e07070;opacity:1}
.admin-delete-btn svg{width:15px;height:15px}

/* Messages */
.admin-message-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.admin-message-item{background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.07);padding:14px 16px}
.admin-message-body{font-size:13px;color:var(--cream);line-height:1.65}
.admin-message-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.admin-message-footer span{font-size:11px;color:var(--gray-muted)}
.admin-message-compose{display:flex;flex-direction:column}

/* Admin photos grid */
.admin-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:40px}
.admin-photo-item{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--obsidian-3)}
.admin-photo-item img{width:100%;height:100%;object-fit:cover}
.admin-photo-caption{font-size:10px;color:var(--gray-muted);padding:4px 6px;background:rgba(12,12,11,.7);position:absolute;bottom:0;left:0;right:0}
.admin-photo-delete{position:absolute;top:4px;right:4px;background:rgba(12,12,11,.75);border:none;color:var(--cream);width:22px;height:22px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.admin-photo-delete:hover{background:rgba(200,50,50,.8)}

/* Admin file upload */
.admin-file-label{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.15);color:var(--gray-mid);font-size:13px;cursor:pointer;transition:border-color .2s}
.admin-file-label:hover{border-color:rgba(201,169,110,.35);color:var(--cream)}
.admin-file-label svg{width:16px;height:16px;flex-shrink:0}
.admin-upload-row{display:flex;flex-direction:column}

/* Admin doc list */
.admin-doc-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}

/* Responsive — portal */
@media(max-width:900px){
  .portal-project-header-inner{padding:0 24px;flex-direction:column}
  .portal-section-inner{padding:0 24px}
  .portal-footer-note{padding:40px 24px}
  .admin-wrap{padding:100px 24px 60px}
  .admin-two-col{grid-template-columns:1fr}
  .portal-photo-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .admin-page-header{align-items:flex-start}
  .admin-page-header > div:last-child{margin-left:auto}
}
@media(max-width:600px){
  .portal-login-card{padding:36px 24px}
  .portal-project-header-inner{padding:0 16px}
  .portal-section-inner{padding:0 16px}
  .portal-section{padding:48px 0}
  .admin-photo-grid{grid-template-columns:repeat(2,1fr)}
  .milestone-status-tag{margin-left:8px;margin-top:0}
}
.article-body ul li::before{content:'';position:absolute;left:0;top:12px;width:4px;height:4px;background:var(--champagne);border-radius:50%}
.article-body a{color:var(--champagne);text-decoration:none;border-bottom:.5px solid rgba(201,169,110,.3);transition:border-color .25s}
.article-body a:hover{border-color:var(--champagne)}
.article-body strong{color:var(--cream);font-weight:500}

.article-cta{padding:60px;background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.15);margin:0 60px 80px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.article-cta-text h3{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--cream)}
.article-cta-text h3 em{font-style:italic;color:var(--champagne)}
.article-cta-text p{font-size:13px;color:var(--gray-muted);margin-top:8px}
.btn-book{display:inline-block;padding:14px 28px;background:var(--champagne);color:var(--obsidian);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s;white-space:nowrap}
.btn-book:hover{background:var(--champagne-light)}

.article-related{padding:80px 60px;border-top:.5px solid rgba(201,169,110,.12)}
.related-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-bottom:32px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.related-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.1);padding:28px;text-decoration:none;color:inherit;transition:border-color .25s;display:block}
.related-card:hover{border-color:rgba(201,169,110,.3)}
.related-card-tag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin-bottom:12px}
.related-card-title{font-family:var(--serif);font-size:18px;font-weight:300;color:var(--cream);line-height:1.3}

@media(max-width:900px){
  .article-hero{padding:120px 24px 48px}
  .article-body{padding:60px 24px}
  .article-cta{margin:0 24px 60px;padding:40px 24px;flex-direction:column;align-items:flex-start}
  .article-related{padding:60px 24px}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .article-hero{padding:90px 20px 36px}
  .article-body{padding:40px 16px}
  .article-cta{margin:0 16px 48px;padding:32px 16px}
  .article-related{padding:40px 16px}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .article-hero{padding:85px 16px 32px}
  .article-h1{font-size:22px;line-height:1.15}
}

/* ── PAGE: LEGAL ── */
/* PAGE HERO */
.page-hero{padding:160px 60px 80px;background:var(--obsidian-2);position:relative;overflow:hidden}
.page-hero::before{content:'THE WALLS';position:absolute;bottom:-20px;left:-10px;font-family:var(--display);font-size:220px;color:rgba(201,169,110,.03);line-height:1;pointer-events:none;white-space:nowrap}
.ph-eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fu .8s .2s ease forwards}
.ph-eyebrow::before{content:'';width:32px;height:.5px;background:var(--champagne)}
.ph-h1{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.92;color:var(--cream);max-width:700px;opacity:0;animation:fu .9s .4s ease forwards}
.ph-h1 em{font-style:italic;color:var(--champagne)}
.ph-desc{font-size:15px;line-height:1.85;color:var(--gray-mid);max-width:540px;margin-top:28px;opacity:0;animation:fu .8s .6s ease forwards}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* LEGAL CONTENT */
.legal-section{padding:80px 60px;background:var(--obsidian-2);border-top:.5px solid rgba(201,169,110,.12)}
.legal-content{max-width:800px}
.legal-updated{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne-muted);margin-bottom:56px}
.legal-content h2{font-family:var(--serif);font-size:clamp(28px,2.5vw,40px);font-weight:300;color:var(--cream);margin:48px 0 16px;line-height:1.1}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin:32px 0 12px}
.legal-content p{font-size:14px;color:var(--gray-mid);line-height:1.9;margin-bottom:20px}
.legal-content ul{list-style:none;margin:0 0 20px;padding:0}
.legal-content ul li{font-size:14px;color:var(--gray-mid);line-height:1.9;padding-left:20px;margin-bottom:8px;position:relative}
.legal-content ul li::before{content:'—';position:absolute;left:0;color:var(--champagne-muted)}
.legal-content a{color:var(--champagne);text-decoration:none;border-bottom:.5px solid rgba(201,169,110,.4);transition:border-color .2s}
.legal-content a:hover{border-color:var(--champagne)}
.legal-divider{height:.5px;background:linear-gradient(90deg,transparent,rgba(201,169,110,.3),transparent);margin:48px 0}

/* CURSOR */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--champagne);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:.5px solid rgba(201,169,110,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
.cursor.h{width:4px;height:4px}.cursor-ring.h{width:52px;height:52px;border-color:rgba(201,169,110,.8)}

/* NAV RIGHT */
.nav-right{display:flex;align-items:center;gap:16px}

/* RESPONSIVE */
@media(max-width:900px){
  .page-hero{padding:120px 24px 60px}
  .page-hero::before{font-size:140px}
  .legal-section{padding:60px 24px}
  .legal-content{max-width:100%}
}
@media(max-width:600px){
  .page-hero{padding:80px 16px 40px}
  .ph-h1{font-size:clamp(36px,5vw,52px)}
  .legal-section{padding:40px 16px}
}

/* ESTIMATE SENT MODAL */
.est-modal-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.est-modal-overlay.show{opacity:1;pointer-events:all}
.est-modal{background:var(--obsidian-2,#111110);border:.5px solid rgba(201,169,110,.3);padding:52px 40px 44px;max-width:420px;width:90%;text-align:center;transform:translateY(24px);transition:transform .35s}
.est-modal-overlay.show .est-modal{transform:translateY(0)}
.est-modal-icon{width:60px;height:60px;border-radius:50%;border:.5px solid rgba(201,169,110,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 28px}
.est-modal-icon svg{width:26px;height:26px;stroke:var(--champagne,#c9a96e);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.est-modal-title{font-family:var(--display);font-size:30px;color:var(--cream,#f5f0e8);margin:0 0 14px;font-weight:400;letter-spacing:.02em}
.est-modal-msg{font-family:var(--sans);font-size:14px;color:var(--gray-mid,#8a8a82);line-height:1.75;margin:0 0 36px}
.est-modal-close{display:inline-flex;align-items:center;justify-content:center;padding:13px 36px;background:var(--champagne,#c9a96e);color:var(--obsidian,#0c0c0b);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border:none;cursor:pointer;transition:filter .25s}
.est-modal-close:hover{filter:brightness(1.12)}

/* LOGO HOVER */
.nav-logo img{transition:transform .35s ease,filter .35s ease}
.nav-logo:hover img{transform:scale(1.05);filter:drop-shadow(0 0 12px rgba(201,169,110,.35))}

/* ── COOKIE PREFERENCES MODAL ── */
.cookie-modal-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(12,12,11,.75);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.cookie-modal-overlay.cm-visible{opacity:1;pointer-events:auto}
/* Save-preferences toast */
.tw-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--obsidian-2,#141413);border:.5px solid rgba(201,169,110,.4);color:var(--cream,#f5f0e8);font-size:12px;letter-spacing:.1em;padding:10px 24px;z-index:10000;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;font-family:var(--sans,'DM Sans',sans-serif)}
.tw-toast.tw-toast-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.cookie-modal{
  width:100%;max-width:680px;max-height:85vh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--obsidian-2,#141413);
  border:0.5px solid rgba(201,169,110,.2);
  padding:40px;
  transform:translateY(40px);transition:transform .35s ease;
}
.cookie-modal-body{overflow-y:auto;flex:1;min-height:0}
.cookie-modal-overlay.cm-visible .cookie-modal{transform:translateY(0)}
.cookie-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cookie-modal-title{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:22px;font-weight:300;color:var(--cream,#f5f0e8);letter-spacing:.04em}
.cookie-modal-close-btn{width:32px;height:32px;background:transparent;border:.5px solid rgba(201,169,110,.3);color:var(--gray-mid,#9a9a96);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:border-color .2s,color .2s;flex-shrink:0}
.cookie-modal-close-btn:hover{border-color:rgba(201,169,110,.6);color:var(--cream,#f5f0e8)}
.cookie-modal-desc{font-size:13px;color:var(--gray-mid,#9a9a96);line-height:1.65;margin-bottom:28px}
.cookie-pref-list{display:flex;flex-direction:column;gap:0;margin-bottom:32px;border:.5px solid rgba(201,169,110,.12)}
.cookie-pref-item{padding:20px 24px;border-bottom:.5px solid rgba(201,169,110,.08);transition:background .2s}
.cookie-pref-item:last-child{border-bottom:none}
.cookie-pref-item:hover{background:rgba(201,169,110,.03)}
.cookie-pref-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:16px}
.cookie-pref-name{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream,#f5f0e8);font-family:var(--sans,'DM Sans',sans-serif)}
.cookie-pref-badge{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne-muted,#8a7253);border:.5px solid rgba(201,169,110,.25);padding:3px 10px;white-space:nowrap;font-family:var(--sans,'DM Sans',sans-serif)}
.cookie-pref-sub{font-size:12px;color:var(--gray-mid,#9a9a96);line-height:1.6;margin-bottom:10px}
.cookie-pref-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cookie-pref-bullets li{font-size:11px;color:var(--gray-muted,#6b6b68);padding-left:14px;position:relative}
.cookie-pref-bullets li::before{content:'—';position:absolute;left:0;color:var(--champagne-muted,#8a7253)}
/* Toggle switch */
.cp-toggle{position:relative;width:42px;height:24px;flex-shrink:0}
.cp-toggle input{opacity:0;width:0;height:0;position:absolute}
.cp-toggle-track{position:absolute;inset:0;background:var(--obsidian-4,#252522);border:.5px solid rgba(201,169,110,.2);cursor:pointer;transition:background .25s,border-color .25s;border-radius:12px}
.cp-toggle input:checked+.cp-toggle-track{background:var(--champagne,#c9a96e);border-color:var(--champagne,#c9a96e)}
.cp-toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cp-toggle input:checked+.cp-toggle-track::after{transform:translateX(18px)}
.cp-toggle input:disabled+.cp-toggle-track{opacity:.5;cursor:not-allowed}
/* Action row — always visible at bottom, never inside scroll area */
.cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;padding-top:20px;margin-top:8px;border-top:.5px solid rgba(201,169,110,.12)}
.cookie-modal-actions .btn-primary{padding:12px 28px;font-size:10px}
.cookie-modal-actions .btn-outline{padding:12px 28px;font-size:10px}
@media(max-width:600px){
  .cookie-modal{padding:24px 20px}
  .cookie-pref-item{padding:16px}
  .cookie-modal-actions{flex-direction:column}
  .cookie-modal-actions .btn-primary,.cookie-modal-actions .btn-outline{text-align:center;width:100%}
}

/* ════════════════════════════════════════════════════════════
   SHOP — product grid, cart icon, cart drawer, COD form
   ════════════════════════════════════════════════════════════ */

/* Nav cart icon + badge */
.nav-cart-icon{position:relative;background:transparent;border:none;color:var(--cream);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color .3s}
.nav-cart-icon:hover{color:var(--champagne)}
.nav-cart-icon svg{width:22px;height:22px}
.cart-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--champagne);color:var(--obsidian);font-family:var(--sans);font-size:10px;font-weight:500;line-height:17px;text-align:center}
[dir="rtl"] .cart-badge{right:auto;left:-4px}

/* Product grid */
.shop-grid{max-width:1200px;margin:0 auto;padding:20px 5vw 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.shop-loading{grid-column:1/-1;text-align:center;color:var(--gray-mid);font-family:var(--sans);font-size:14px;letter-spacing:.04em;padding:60px 0}
.shop-card{background:var(--obsidian-2);border:.5px solid rgba(201,169,110,.14);display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s,transform .3s}
.shop-card:hover{border-color:rgba(201,169,110,.4);transform:translateY(-3px)}
.shop-card.is-out{opacity:.72}
.shop-card-img{position:relative;aspect-ratio:4/3;background:var(--obsidian-3);overflow:hidden}
.shop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shop-card:hover .shop-card-img img{transform:scale(1.04)}
.shop-badge{position:absolute;top:12px;left:12px;background:var(--obsidian);color:var(--champagne);border:.5px solid rgba(201,169,110,.4);font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
[dir="rtl"] .shop-badge{left:auto;right:12px}
.shop-card-body{display:flex;flex-direction:column;flex:1;padding:20px}
.shop-card-name{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--cream);margin:0 0 8px;line-height:1.2}
.shop-card-desc{font-family:var(--sans);font-weight:300;font-size:13px;line-height:1.6;color:var(--gray-mid);margin:0 0 18px;flex:1}
.shop-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.shop-card-price{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--champagne);letter-spacing:.02em}
.shop-add{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);background:transparent;border:.5px solid var(--champagne-muted);padding:10px 16px;cursor:pointer;transition:all .3s;white-space:nowrap}
.shop-add:hover:not([disabled]){background:var(--champagne);color:var(--obsidian)}
.shop-add[disabled]{opacity:.45;cursor:not-allowed}
[lang="ar"] .shop-card-name,[lang="ar"] .shop-card-desc{font-family:var(--arabic)}

/* Cart overlay + drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s;z-index:1400}
.cart-overlay.show{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:90vw;background:var(--obsidian-2);border-left:.5px solid rgba(201,169,110,.2);box-shadow:-10px 0 40px rgba(0,0,0,.4);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition);z-index:1450}
.cart-drawer.open{transform:translateX(0)}
[dir="rtl"] .cart-drawer{right:auto;left:0;border-left:none;border-right:.5px solid rgba(201,169,110,.2);box-shadow:10px 0 40px rgba(0,0,0,.4);transform:translateX(-100%)}
[dir="rtl"] .cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:.5px solid rgba(201,169,110,.15)}
.cart-head h2{font-family:var(--serif);font-weight:300;font-size:24px;color:var(--cream);margin:0}
[lang="ar"] .cart-head h2{font-family:var(--arabic)}
.cart-close{background:transparent;border:none;color:var(--gray-mid);cursor:pointer;padding:4px;transition:color .3s}
.cart-close:hover{color:var(--champagne)}
.cart-close svg{width:22px;height:22px}
.cart-body{flex:1;overflow-y:auto;padding:8px 24px}
.cart-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--gray-mid);font-family:var(--sans);font-size:14px}
.cart-empty[hidden],.cart-foot[hidden],.cod-form[hidden],.cart-checkout-choice[hidden],.cart-badge[hidden]{display:none!important}
.cart-line{display:flex;gap:14px;padding:18px 0;border-bottom:.5px solid rgba(201,169,110,.1)}
.cart-line-img{width:64px;height:64px;flex-shrink:0;background:var(--obsidian-3);overflow:hidden}
.cart-line-img img{width:100%;height:100%;object-fit:cover}
.cart-line-info{flex:1;min-width:0}
.cart-line-name{font-family:var(--serif);font-size:16px;color:var(--cream);margin-bottom:3px}
[lang="ar"] .cart-line-name{font-family:var(--arabic)}
.cart-line-price{font-family:var(--sans);font-size:12px;color:var(--champagne);margin-bottom:8px}
.cart-qty{display:inline-flex;align-items:center;gap:0;border:.5px solid rgba(201,169,110,.25)}
.cart-qty button{width:28px;height:28px;background:transparent;border:none;color:var(--champagne);font-size:16px;line-height:1;cursor:pointer;transition:background .25s}
.cart-qty button:hover{background:var(--obsidian-4)}
.cart-qty span{min-width:30px;text-align:center;font-family:var(--sans);font-size:13px;color:var(--cream)}
.cart-line-remove{background:transparent;border:none;color:var(--gray-muted);cursor:pointer;padding:2px;height:fit-content;transition:color .25s}
.cart-line-remove:hover{color:#c87}
.cart-line-remove svg{width:16px;height:16px}
.cart-foot{padding:20px 24px 24px;border-top:.5px solid rgba(201,169,110,.15);background:var(--obsidian-2)}
.cart-subtotal{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.cart-subtotal span{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid)}
.cart-subtotal strong{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--champagne)}
.cart-note{font-family:var(--sans);font-size:11px;color:var(--gray-muted);line-height:1.5;margin:0 0 16px}
.cart-checkout-choice{display:flex;flex-direction:column;gap:10px}
.btn-pay-online{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:var(--champagne);color:var(--obsidian);border:none;padding:15px;cursor:pointer;transition:background .3s}
.btn-pay-online:hover:not([disabled]){background:var(--champagne-light)}
.btn-pay-online[disabled]{opacity:.6;cursor:default}
.btn-pay-cod{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--champagne);border:.5px solid var(--champagne-muted);padding:14px;cursor:pointer;transition:all .3s}
.btn-pay-cod:hover{background:var(--obsidian-3);border-color:var(--champagne)}

/* COD form */
.cod-form{display:flex;flex-direction:column;gap:10px}
.cod-form-title{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:2px}
.cod-form input,.cod-form select{font-family:var(--sans);font-size:14px;color:var(--cream);background:var(--obsidian-3);border:.5px solid rgba(201,169,110,.2);padding:12px 14px;outline:none;transition:border-color .3s}
.cod-form input:focus,.cod-form select:focus{border-color:var(--champagne)}
.cod-form input::placeholder{color:var(--gray-muted)}
.cod-status{font-family:var(--sans);font-size:12px;line-height:1.5;min-height:1px}
.cod-status.ok{color:#7acc7a}
.cod-status.error{color:#e08a6a}
.btn-cod-submit{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:var(--champagne);color:var(--obsidian);border:none;padding:15px;cursor:pointer;transition:background .3s}
.btn-cod-submit:hover:not([disabled]){background:var(--champagne-light)}
.btn-cod-submit[disabled]{opacity:.6;cursor:default}
.btn-cod-back{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--gray-mid);border:none;padding:8px;cursor:pointer;transition:color .3s}
.btn-cod-back:hover{color:var(--champagne)}

@media(max-width:600px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding:16px 4vw 60px}
  .shop-card-body{padding:14px}
  .shop-card-name{font-size:18px}
  .cart-drawer{width:100%;max-width:100vw}
}

/* ============================================================
   PARAMETRIC — "The Field" visual system (parametric.js)
   Louver hero, footer signature, slat curtain.
   ============================================================ */

/* 1. Living Wall hero — canvas above the photo, below .hero-content (z 10) */
.tw-hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;        /* gold lines glow over the dark photo */
  opacity: .9;
}
/* Hero stays dark in both themes (its text is always light), so the field
   always uses screen — switching to multiply would make it vanish on the photo. */

/* 3. Footer signature — the logo's "W" rendered as a louver field across the footer */
footer { position: relative; overflow: hidden; border-top: none; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.45), transparent); }
.tw-footer-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
footer > *:not(.tw-footer-field) { position: relative; z-index: 1; }
/* keep footer text crisp over the mark — thin obsidian halo per glyph (theme-aware via --obsidian) */
footer .footer-grid, footer .footer-bottom { text-shadow: 0 0 7px var(--obsidian), 0 0 4px var(--obsidian), 0 1px 2px var(--obsidian); }
/* brighter text (--cream is light on dark theme, dark on light) + refined gold hover */
footer .footer-col-title { color: var(--champagne); }
footer .footer-col a, footer .footer-col p, footer .footer-tagline { color: var(--cream); }
footer .footer-col a { display: block; position: relative; transition: color .25s ease, padding-left .25s ease, padding-right .25s ease; }
footer .footer-col a::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--champagne); transform: translateY(-50%); transition: width .25s ease; }
footer .footer-col a:hover { color: var(--champagne); padding-left: 14px; }
footer .footer-col a:hover::before { width: 8px; }
[dir="rtl"] footer .footer-col a::before { left: auto; right: 0; }
[dir="rtl"] footer .footer-col a:hover { padding-left: 0; padding-right: 14px; }

/* 4. Slat-sweep page transition — vertical panels that drop in / retract out */
/* Pre-paint cover: a <head> snippet sets [data-sweeping] the instant we arrive
   via a sweep, so the destination never flashes its content before the JS
   curtain mounts. The curtain (z 100000) removes it during the handoff. */
html[data-sweeping]::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--obsidian);
  z-index: 99990;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { html[data-sweeping]::before { display: none; } }
.tw-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  pointer-events: none;       /* never blocks interaction; we navigate anyway */
}
.tw-slat {
  flex: 1 1 0;
  height: 100%;
  /* Overlap neighbours by 1px so sub-pixel flex seams can't let the page show
     through between slats on high-DPI/mobile screens. */
  margin-right: -1px;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--obsidian-3) 0%, var(--obsidian) 100%);
  /* Louver divider as an inset shadow — never creates a transparent gap. */
  box-shadow: inset 1px 0 0 rgba(201, 169, 110, .12);
  will-change: transform;
  transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
}
.tw-slat:first-child { box-shadow: none; }
.tw-slat:last-child { margin-right: 0; }
/* Covered state */
.tw-curtain.is-closed .tw-slat { transform: scaleY(1); }
/* Opening (retract) runs slower than closing for a calmer arrival */
.tw-curtain.is-opening .tw-slat { transition-duration: .72s; }
/* Stagger left→right while closing, right→left while opening */
.tw-curtain.is-closing  .tw-slat:nth-child(1)  { transition-delay: .00s; }
.tw-curtain.is-closing  .tw-slat:nth-child(2)  { transition-delay: .03s; }
.tw-curtain.is-closing  .tw-slat:nth-child(3)  { transition-delay: .06s; }
.tw-curtain.is-closing  .tw-slat:nth-child(4)  { transition-delay: .09s; }
.tw-curtain.is-closing  .tw-slat:nth-child(5)  { transition-delay: .12s; }
.tw-curtain.is-closing  .tw-slat:nth-child(6)  { transition-delay: .15s; }
.tw-curtain.is-closing  .tw-slat:nth-child(7)  { transition-delay: .18s; }
.tw-curtain.is-closing  .tw-slat:nth-child(8)  { transition-delay: .21s; }
.tw-curtain.is-closing  .tw-slat:nth-child(9)  { transition-delay: .24s; }
.tw-curtain.is-closing  .tw-slat:nth-child(10) { transition-delay: .27s; }
.tw-curtain.is-closing  .tw-slat:nth-child(11) { transition-delay: .30s; }
.tw-curtain.is-closing  .tw-slat:nth-child(12) { transition-delay: .33s; }
.tw-curtain.is-opening  .tw-slat:nth-child(12) { transition-delay: .00s; }
.tw-curtain.is-opening  .tw-slat:nth-child(11) { transition-delay: .03s; }
.tw-curtain.is-opening  .tw-slat:nth-child(10) { transition-delay: .06s; }
.tw-curtain.is-opening  .tw-slat:nth-child(9)  { transition-delay: .09s; }
.tw-curtain.is-opening  .tw-slat:nth-child(8)  { transition-delay: .12s; }
.tw-curtain.is-opening  .tw-slat:nth-child(7)  { transition-delay: .15s; }
.tw-curtain.is-opening  .tw-slat:nth-child(6)  { transition-delay: .18s; }
.tw-curtain.is-opening  .tw-slat:nth-child(5)  { transition-delay: .21s; }
.tw-curtain.is-opening  .tw-slat:nth-child(4)  { transition-delay: .24s; }
.tw-curtain.is-opening  .tw-slat:nth-child(3)  { transition-delay: .27s; }
.tw-curtain.is-opening  .tw-slat:nth-child(2)  { transition-delay: .30s; }
.tw-curtain.is-opening  .tw-slat:nth-child(1)  { transition-delay: .33s; }

/* "Loading…" sign — only while the outgoing page is being covered */
.tw-curtain-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity .35s ease .12s;
  color: var(--champagne);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
[dir="rtl"] .tw-curtain-loader { letter-spacing: 0; }
.tw-curtain.is-loading .tw-curtain-loader { opacity: .9; }
.tw-loader-dots { display: inline-flex; gap: 5px; }
.tw-loader-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--champagne);
  animation: tw-loader-pulse 1s ease-in-out infinite;
}
.tw-loader-dots i:nth-child(2) { animation-delay: .15s; }
.tw-loader-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tw-loader-pulse {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) { .tw-curtain { display: none; } }

/* 5. Voronoi material background — faint cellular veining behind card sections */
[data-parametric-bg] { position: relative; }
[data-parametric-bg] > *:not(.tw-voronoi) { position: relative; z-index: 1; }
.tw-voronoi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.tw-voronoi-path {
  fill: none;
  stroke: var(--champagne);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  opacity: .13;
}

/* 6. Portfolio slat-wipe reveal — shutter of vertical slats lifts off each card */
.portfolio-card { position: relative; }
.tw-card-shutter {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  pointer-events: none;
  overflow: hidden;
}
.tw-card-shutter .tw-cs {
  flex: 1 1 0;
  height: 100%;
  background: var(--obsidian);
  transform: scaleY(1);
  transform-origin: top;
  border-right: 0.5px solid rgba(201, 169, 110, .08);
  transition: transform .58s cubic-bezier(0.7, 0, 0.3, 1);
}
.tw-card-shutter .tw-cs:last-child { border-right: 0; }
.portfolio-card.is-revealed .tw-card-shutter .tw-cs { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .tw-card-shutter { display: none; } }