/* ============================================================
   LUXDAY — shared chrome
   The film behind every page, the motion control, header, mobile
   menu, breadcrumb, service switcher, contact band and footer.
   Used by every page including the suite. All classes carry the
   lx- prefix (or site-bg / motion-) so this file can sit beside
   the suite's own stylesheet without either restyling the other.

   The whole site sits on one fixed film. Sections are layers of
   smoked glass over it, never solid ground, so the footage stays
   visible while the page scrolls.
   ============================================================ */

:root {
  --lx-ivory: #f2eee6;
  --lx-ink: #0f0e0c;
  --lx-text: #f2eee6;
  --lx-soft: #d6cfc3;          /* body copy on smoke */
  --lx-muted: #b3ab9e;         /* secondary copy on smoke */
  --lx-line: rgba(242, 238, 230, 0.16);
  --lx-line-strong: rgba(242, 238, 230, 0.34);
  --lx-gold: #d8b983;
  --lx-gold-bright: #e2c48f;
  --lx-smoke: rgba(12, 10, 12, 0.62);        /* default section layer */
  --lx-smoke-light: rgba(12, 10, 12, 0.46);
  --lx-smoke-deep: rgba(10, 9, 10, 0.78);
  --lx-glass: rgba(250, 248, 243, 0.07);     /* cards on smoke */
  --lx-radius: 10px;
  --lx-header-h: 72px;
  --lx-gutter: clamp(16px, 4.2vw, 60px);
  --lx-maxw: 1320px;
  --lx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lx-font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --lx-font-lat: "Manrope", "IBM Plex Sans Arabic", sans-serif;
}

@media (max-width: 900px) {
  :root { --lx-header-h: 62px; }
}

html { scroll-padding-top: calc(var(--lx-header-h) + 16px); }

body.lx {
  padding-top: var(--lx-header-h);
  color: var(--lx-text);
  background: #16111a;   /* under the film until its first frame arrives */
}

body.lx-menu-open { overflow: hidden; }

/* ---------------- the film behind every page ---------------- */

.site-bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;       /* the large viewport: no jump when the phone's toolbar hides */
  overflow: hidden;
  pointer-events: none;
}

.site-bg video,
.site-bg .bg-poster,
.site-bg .bg-poster img,
.site-bg .motion-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-bg video { z-index: 0; }
/* The poster sits over the clip until it really plays, instead of hiding the
   clip itself: Safari will not start a muted clip it considers invisible. */
.site-bg .bg-poster { z-index: 1; transition: opacity 1.1s ease; }
.site-bg video.is-playing ~ .bg-poster { opacity: 0; }
.site-bg .motion-image { z-index: 2; }

.site-bg video::-webkit-media-controls,
.site-bg video::-webkit-media-controls-start-playback-button,
.site-bg video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* a whisper of shade over the whole film; sections add their own layer */
.site-bg-shade {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: rgba(14, 10, 16, 0.12);
}

/* the still frame drifts slowly where no moving image is available */
.motion-image.is-drifting { animation: lx-drift 26s ease-in-out infinite alternate; }

@keyframes lx-drift {
  from { transform: scale(1.02) translateX(0); }
  to { transform: scale(1.08) translateX(-1.4%); }
}

/* the one control for the film, on every page */
.motion-toggle {
  position: fixed;
  z-index: 55;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--lx-line-strong);
  border-radius: 999px;
  color: var(--lx-text);
  background: rgba(12, 10, 12, 0.58);
  font: 500 13px/1 var(--lx-font-ar);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.motion-toggle:hover { background: rgba(12, 10, 12, 0.78); }
.motion-toggle svg { width: 11px; height: 11px; fill: currentColor; }
.motion-toggle .icon-play { display: none; }
html[data-motion="off"] .motion-toggle .icon-play { display: block; }
html[data-motion="off"] .motion-toggle .icon-pause { display: none; }
body.lx-menu-open .motion-toggle { display: none; }

@media (max-width: 600px) {
  .motion-toggle { width: 42px; padding: 0; justify-content: center; }
  .motion-toggle .motion-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------------- small shared pieces ---------------- */

.lx-arrow {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lx-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lx-skip {
  position: fixed;
  z-index: 1000;
  top: 12px;
  right: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--lx-ink);
  background: var(--lx-ivory);
  font: 500 14px/1 var(--lx-font-ar);
  transform: translateY(-200%);
  transition: transform 0.25s ease;
}
.lx-skip:focus { transform: translateY(0); }

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

.lx-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: var(--lx-header-h);
  color: var(--lx-text);
  border-bottom: 1px solid var(--lx-line);
}

/* The blur sits on a pseudo-element: a backdrop-filter on the header itself
   would make it the containing block of the fixed phone menu and trap the
   menu inside the header's 62px. */
.lx-header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(12, 10, 12, 0.5);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  content: "";
}

.lx-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: var(--lx-maxw);
  margin: 0 auto;
  padding: 0 var(--lx-gutter);
}

.lx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: inherit;
  text-decoration: none;
}

.lx-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(216, 185, 131, 0.6);
  border-radius: 8px;
  background: rgba(12, 10, 12, 0.5);
}

.lx-brand-mark svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--lx-gold);
  stroke-width: 1.8;
}

.lx-brand-name {
  font: 700 18px/1 var(--lx-font-lat);
  letter-spacing: 0.02em;
}

.lx-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}

.lx-nav a {
  position: relative;
  padding: 8px 0;
  color: var(--lx-text);
  font: 500 15px/1 var(--lx-font-ar);
  text-decoration: none;
}

.lx-nav a::after {
  position: absolute;
  inset: auto 0 0;
  height: 1.5px;
  background: var(--lx-gold);
  content: "";
  transform: scaleX(0);
  transition: transform 0.35s var(--lx-ease);
}

.lx-nav a:hover::after,
.lx-nav a[aria-current="page"]::after { transform: scaleX(1); }

.lx-nav a .lx-nav-no { display: none; }

.lx-header-end {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.lx-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--lx-ink);
  background: var(--lx-ivory);
  font: 500 14px/1 var(--lx-font-ar);
  text-decoration: none;
  transition: background 0.25s ease;
}

.lx-cta:hover { background: #fff; }
.lx-cta svg { width: 16px; height: 16px; fill: #1a8d4f; }

.lx-menu-button {
  display: none;
  width: 46px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--lx-ink);
  background: var(--lx-ivory);
  cursor: pointer;
}

.lx-menu-button span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 3px 0;
  background: currentColor;
  transition: transform 0.3s var(--lx-ease);
}

.lx-menu-button[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.lx-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .lx-header-inner { grid-template-columns: 1fr auto; }
  .lx-cta { display: none; }
  .lx-menu-button { display: grid; align-content: center; }

  .lx-nav {
    position: fixed;
    z-index: 59;
    inset: var(--lx-header-h) 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px var(--lx-gutter) 32px;
    overflow-y: auto;
    background: rgba(12, 10, 12, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s var(--lx-ease), visibility 0s linear 0.3s;
  }

  .lx-nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s var(--lx-ease);
  }

  .lx-nav a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--lx-line);
    font-size: 26px;
    font-weight: 500;
  }

  .lx-nav a::after { display: none; }
  .lx-nav a[aria-current="page"] { color: var(--lx-gold); }

  .lx-nav a .lx-nav-no {
    display: inline;
    color: var(--lx-muted);
    font: 500 12px/1 var(--lx-font-lat);
  }

  .lx-nav-contact {
    display: block;
    margin-top: auto;
    padding-top: 28px;
    color: var(--lx-muted);
    font: 400 14px/1.6 var(--lx-font-ar);
  }

  .lx-nav .lx-nav-contact a {
    display: inline;
    padding: 0;
    border: 0;
    color: var(--lx-text);
    font-size: 15px;
  }
}

@media (min-width: 901px) {
  .lx-nav-contact { display: none; }
}

/* ---------------- section page head ---------------- */

.lx-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  color: var(--lx-muted);
  font: 400 14px/1.5 var(--lx-font-ar);
  list-style: none;
}

.lx-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.lx-crumbs li + li::before { color: var(--lx-muted); content: "/"; }
.lx-crumbs a { color: var(--lx-text); text-decoration: underline; text-decoration-color: var(--lx-line-strong); text-underline-offset: 4px; }
.lx-crumbs a:hover { text-decoration-color: currentColor; }
.lx-crumbs [aria-current] { color: var(--lx-soft); }

/* ---------------- other services ---------------- */

.lx-next {
  padding: clamp(64px, 8vw, 112px) var(--lx-gutter);
  color: var(--lx-text);
  background: var(--lx-smoke);
}

.lx-next-inner { max-width: calc(var(--lx-maxw) - 2 * var(--lx-gutter)); margin: 0 auto; }

.lx-next-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 28px;
}

.lx-next-head h2 {
  margin: 0;
  font: 500 clamp(26px, 3vw, 40px)/1.3 var(--lx-font-ar);
}

.lx-next-head h2 span { color: var(--lx-muted); }
.lx-next-head p { margin: 0; color: var(--lx-soft); font: 400 15px/1.8 var(--lx-font-ar); }

.lx-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.lx-next-card {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  color: inherit;
  background: var(--lx-glass);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.35s var(--lx-ease), background 0.25s ease;
}

.lx-next-card:hover { border-color: var(--lx-line-strong); background: rgba(250, 248, 243, 0.12); transform: translateY(-2px); }

.lx-next-card img {
  width: 112px;
  height: 84px;
  border-radius: 7px;
  object-fit: cover;
}

.lx-next-card small {
  display: block;
  color: var(--lx-gold);
  font: 600 12px/1 var(--lx-font-lat);
}

.lx-next-card strong {
  display: block;
  margin-top: 8px;
  font: 500 19px/1.4 var(--lx-font-ar);
}

.lx-next-card .lx-arrow { margin-inline-end: 8px; }

/* ---------------- contact band ---------------- */

.lx-contact {
  position: relative;
  padding: clamp(72px, 9vw, 132px) var(--lx-gutter);
  color: var(--lx-text);
  background: var(--lx-smoke-deep);
}

.lx-contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  max-width: calc(var(--lx-maxw) - 2 * var(--lx-gutter));
  margin: 0 auto;
}

.lx-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font: 500 14px/1 var(--lx-font-ar);
}

.lx-label::before {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--lx-ink);
  background: var(--lx-gold);
  font: 600 14px/1 var(--lx-font-lat);
  content: "+";
}

.lx-contact h2 {
  margin: 0;
  font: 500 clamp(34px, 5vw, 68px)/1.2 var(--lx-font-ar);
}

.lx-contact-lead {
  max-width: 44ch;
  margin: 22px 0 0;
  color: var(--lx-soft);
  font: 400 clamp(15px, 1.2vw, 17px)/1.9 var(--lx-font-ar);
}

.lx-contact-wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-top: 32px;
  padding: 0 26px;
  border-radius: 999px;
  color: var(--lx-ink);
  background: var(--lx-ivory);
  font: 600 16px/1 var(--lx-font-ar);
  text-decoration: none;
  transition: background 0.25s ease;
}

.lx-contact-wa:hover { background: #fff; }
.lx-contact-wa svg { width: 20px; height: 20px; fill: #1a8d4f; }

.lx-contact-list {
  display: grid;
  align-content: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-contact-list a {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lx-line);
  color: var(--lx-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lx-contact-list li:first-child a { border-top: 1px solid var(--lx-line); }
.lx-contact-list a:hover { color: var(--lx-gold); }

.lx-contact-list span {
  color: var(--lx-muted);
  font: 400 14px/1 var(--lx-font-ar);
}

.lx-contact-list strong {
  font: 500 clamp(16px, 1.4vw, 19px)/1.4 var(--lx-font-lat);
  overflow-wrap: anywhere;
  text-align: right; /* phone and handles are ltr runs; keep them on the same edge as the email */
}

@media (max-width: 820px) {
  .lx-contact-inner { grid-template-columns: 1fr; }
  .lx-contact-list a { grid-template-columns: 76px 1fr auto; }
}

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

.lx-footer {
  color: var(--lx-text);
  background: var(--lx-smoke);
  border-top: 1px solid var(--lx-line);
}

.lx-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px 48px;
  max-width: var(--lx-maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--lx-gutter) clamp(36px, 4vw, 56px);
}

.lx-wordmark {
  margin: 0;
  font: 700 clamp(64px, 12.5vw, 188px)/0.82 var(--lx-font-lat);
  letter-spacing: -0.045em;
  direction: ltr;
  text-align: right;
}

.lx-footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-footer-links a {
  color: var(--lx-text);
  font: 400 15px/1.8 var(--lx-font-ar);
  text-decoration: none;
}

.lx-footer-links a:hover,
.lx-footer-links a[aria-current="page"] { color: var(--lx-gold); }

.lx-footer-bar {
  color: var(--lx-muted);
  background: rgba(8, 7, 8, 0.82);
}

.lx-footer-bar div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: var(--lx-maxw);
  margin: 0 auto;
  padding: 18px var(--lx-gutter);
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 70px));
  font: 400 13px/1.6 var(--lx-font-ar);
}

@media (min-width: 901px) {
  .lx-footer-bar div { padding-bottom: 18px; }
}

@media (max-width: 820px) {
  .lx-footer-top { grid-template-columns: 1fr; }
}

/* ---------------- floating WhatsApp (phones only) ---------------- */

.lx-wa-float {
  position: fixed;
  z-index: 50;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  display: none;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1a8d4f;
  box-shadow: 0 10px 26px rgba(8, 7, 8, 0.4);
}

.lx-wa-float svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 900px) {
  .lx-wa-float { display: grid; }
  body.lx-menu-open .lx-wa-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-nav, .lx-next-card, .lx-menu-button span { transition: none !important; }
  .motion-image.is-drifting { animation: none; }
}