/* v1.0.0 - 2026-05-23 - Lams demo-1 (Light) — EGC structural skeleton with Lams brand identity.
   Single body font (Plus Jakarta Sans) for Latin per EGC discipline.
   Cormorant Garamond as the editorial serif for headlines + italic emphasis.
   Tajawal for Arabic everywhere (single-family Arabic discipline).
   Burgundy + slate grey on cream — sampled from the Lams logo. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Surfaces — warm cream */
  --c-bg:        oklch(0.965 0.012 75);
  --c-bg-2:      oklch(0.945 0.014 75);
  --c-paper:     oklch(0.99 0.006 75);
  --c-paper-2:   oklch(0.97 0.010 75);
  --c-line:      oklch(0.85 0.018 70);
  --c-line-soft: oklch(0.91 0.013 70);

  /* Ink hierarchy */
  --c-ink:       oklch(0.21 0.024 50);
  --c-ink-2:     oklch(0.34 0.022 50);
  --c-ink-mute:  oklch(0.52 0.018 50);
  --c-ink-dim:   oklch(0.66 0.013 50);

  /* Brand burgundy (from logo) */
  --c-burg:      oklch(0.36 0.13 12);
  --c-burg-hi:   oklch(0.46 0.16 12);
  --c-burg-lo:   oklch(0.28 0.10 12);

  /* Brand slate grey (the other logo colour) */
  --c-slate:     oklch(0.52 0.014 240);

  /* Tints — used sparingly */
  --c-tint-burg: color-mix(in oklch, var(--c-burg) 8%, transparent);
  --c-tint-warm: color-mix(in oklch, var(--c-burg) 4%, transparent);

  /* WhatsApp brand color (mandatory) */
  --c-wa:        #25D366;
  --c-wa-hi:     #1ebe5d;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6.5rem;
  --s-8: 9rem;

  /* Easing */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);

  /* Typography — single Latin sans family + serif for emphasis, single Arabic family */
  --f-latin-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-latin-display: 'Fraunces', 'Plus Jakarta Sans', 'Georgia', serif;
  --f-ar-body:    'Tajawal', system-ui, sans-serif;
  --f-ar-display: 'Tajawal', system-ui, sans-serif;

  --f-body:    var(--f-ar-body);
  --f-display: var(--f-ar-display);

  /* Layout */
  --container: 1320px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --nav-h:     72px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(42, 31, 24, 0.04);
  --shadow-md: 0 12px 32px -16px rgba(42, 31, 24, 0.18);
  --shadow-lg: 0 40px 80px -30px rgba(42, 31, 24, 0.28);
}

html[lang="en"] {
  --f-body:    var(--f-latin-body);
  --f-display: var(--f-latin-display);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-2);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dt, dd { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: -0.015em;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  font-weight: 700;
  line-height: 1.45;  /* Arabic tashkeel (fatha, damma, shadda) need vertical room — line-height 1.2 was too tight at display sizes and the marks clipped neighbouring lines */
  letter-spacing: 0;
  padding-block-start: 0.12em;  /* extra top space so tashkeel above the first line don't collide with an eyebrow above */
}
p { margin: 0; }
::selection { background: var(--c-burg); color: var(--c-bg); }

.brand-en, html[lang="en"] .brand-ar { display: none; }
html[lang="en"] .brand-en { display: inline; }

/* Italic emphasis for editorial titles. Fraunces ships real italic
   glyphs (variable font), so no synthesis-compensation needed.
   Bumped weight to 600 for better legibility at large display sizes. */
.hero__title em,
.section-title em {
  color: var(--c-burg);
  font-style: italic;
  font-weight: 600;
}
html[lang="ar"] .hero__title em,
html[lang="ar"] .section-title em {
  font-style: normal;
  font-weight: 700;
}

/* Scroll-reveal — JS adds .is-in */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   NAV — EGC pattern: brand+tagline, 6 links, 2 inline CTAs, hamburger
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-block-end: 1px solid transparent;
  transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  /* NOTE: backdrop-filter intentionally NOT on .nav — it creates a
     containing block for `position: fixed` descendants, which breaks
     the full-screen drawer (it would size to .nav instead of viewport).
     Use .nav__bg below as a sibling of the drawer instead. */
}
.nav__bg {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--c-bg) 90%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: none;
  z-index: -1;
}
.nav.is-pinned {
  border-block-end-color: var(--c-line-soft);
  box-shadow: 0 8px 24px -16px rgba(42, 31, 24, 0.15);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  /* Force LTR layout so the brand always sits on the visual LEFT and the
     controls (lang + hamburger) always sit on the visual RIGHT — matches
     EGC's pattern across both Arabic and English modes. Without this, RTL
     mirrors the grid columns and the brand ends up on the right with the
     controls on the left, which breaks visual muscle memory across the
     language toggle. Text inside the brand still reads RTL (override
     below) so لمس renders correctly. */
  direction: ltr;
}
/* The drawer (fullscreen mobile overlay) keeps the page's natural
   direction — it's a sibling of .nav__inner, not a child, so it
   inherits direction from .nav / <html> as expected */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  grid-column: 1;
  justify-self: start;
}
.nav__brand-mark { width: 36px; height: auto; object-fit: contain; }
.nav__brand-name {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1;
}
html[lang="en"] .nav__brand-name { letter-spacing: 0.14em; font-weight: 600; font-size: 1.05rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  justify-self: center;
}
.nav__links a {
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-ink-2);
  border-radius: var(--r-sm);
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.nav__links a:hover { color: var(--c-burg); background: var(--c-tint-burg); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  grid-column: 3;
  justify-self: end;
}

.lang-toggle {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  font-family: 'Reem Kufi', 'Tajawal', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-paper);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.lang-toggle__glyph {
  font-family: 'Reem Kufi', 'Tajawal', sans-serif;
  font-feature-settings: "kern" 1;
  display: inline-block;
  line-height: 1;
  transform: translateY(-0.5px);
}
/* When showing the AR ع glyph (i.e. page lang is EN), the Arabic letterform
   visually reads MUCH smaller than two Latin caps at the same em — bump it
   well above 1rem so the glyph fills the pill the way "EN" does. */
html[lang="en"] .lang-toggle__glyph { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.lang-toggle:hover { color: var(--c-burg); border-color: var(--c-burg); }

.nav__toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-paper);
}
.nav__toggle:hover { background: var(--c-tint-burg); border-color: var(--c-burg); }
.nav__toggle .i-close { display: none; }
.nav__toggle[aria-expanded="true"] .i-open { display: none; }
.nav__toggle[aria-expanded="true"] .i-close { display: block; }

.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: color-mix(in oklch, var(--c-bg) 97%, transparent);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  padding: 1.5rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 59;
  overflow-y: auto;
}
.nav__drawer[hidden] { display: none; }
.nav__drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--c-ink);
  border-block-end: 1px solid var(--c-line-soft);
}
html[lang="ar"] .nav__drawer a { font-weight: 700; }
.nav__drawer-cta {
  margin-block-start: 1rem;
  background: var(--c-wa) !important;
  color: white !important;
  border-radius: var(--r-pill) !important;
  padding: 1.1rem 1.3rem !important;
  border: 0 !important;
  font-size: 1rem !important;
}
.nav__drawer-cta svg { color: white; }

/* ============================================================
   BUTTONS — EGC patterns
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  white-space: nowrap;
}
.btn--sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.btn--full { width: 100%; justify-content: center; }
.btn .trail { transition: transform 220ms var(--ease-out); }
html[dir="rtl"] .btn .trail { transform: scaleX(-1); }
.btn:hover .trail { transform: translateX(3px); }
html[dir="rtl"] .btn:hover .trail { transform: scaleX(-1) translateX(3px); }

.btn--ink {
  background: var(--c-ink);
  color: var(--c-bg);
}
.btn--ink:hover { background: var(--c-burg); transform: translateY(-1px); }

.btn--solid {
  background: var(--c-wa);
  color: white;
  box-shadow: 0 14px 32px -14px color-mix(in oklch, var(--c-wa) 50%, transparent);
}
.btn--solid:hover { background: var(--c-wa-hi); transform: translateY(-1px); }
.btn--solid svg { color: white; }

.btn--ghost {
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  background: var(--c-paper);
}
.btn--ghost:hover { border-color: var(--c-burg); color: var(--c-burg); background: var(--c-tint-burg); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-burg) 35%, transparent);
}

/* ============================================================
   HERO — EGC pattern: copy left, illustrated art right, stats row
   ============================================================ */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)) var(--gutter) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, var(--c-tint-warm), transparent 60%),
    var(--c-bg);
  overflow: hidden;
}
.hero__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100svh - var(--nav-h) - 7rem);
}
.hero__copy { display: flex; flex-direction: column; gap: 1.4rem; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-burg);
  align-self: flex-start;
}
html[lang="ar"] .hero__eyebrow { letter-spacing: 0.04em; text-transform: none; font-size: 0.88rem; }
.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-burg);
  box-shadow: 0 0 8px color-mix(in oklch, var(--c-burg) 60%, transparent);
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--c-ink);
  max-width: 14ch;
}
html[lang="ar"] .hero__title {
  font-weight: 700;
  line-height: 1.5;  /* generous for the tashkeel on قَصّةٌ + تعرفك (multiple stacked marks) */
  letter-spacing: 0;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  max-width: 16ch;
  padding-block-start: 0.15em;
}
.hero__lede {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  color: var(--c-ink-2);
  max-width: 48ch;
  line-height: 1.65;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 0.35rem; }
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block-start: 1.75rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--c-line-soft);
}
.hero__stats > div { display: flex; flex-direction: column; gap: 0.3rem; }
.hero__stats dt {
  font-family: var(--f-display);
  font-size: clamp(0.98rem, 1.5vw, 1.25rem);
  font-weight: 500;
  color: var(--c-burg);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
html[lang="ar"] .hero__stats dt { font-weight: 700; letter-spacing: 0; }
.hero__stats dd {
  font-size: 0.82rem;
  color: var(--c-ink-mute);
  line-height: 1.45;
  margin: 0;
}

.hero__visual { position: relative; }
.hero-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: visible;
}
.hero-art__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-xl);
  background: var(--c-paper-2);
  box-shadow: var(--shadow-md);
}
.hero-art__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  color: var(--c-ink);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.hero-art__chip svg { color: var(--c-burg); }
.hero-art__chip--fabrics {
  inset-block-start: 6%;
  inset-inline-start: -3%;
  transform: rotate(-3deg);
}
.hero-art__chip--location {
  inset-block-end: 8%;
  inset-inline-end: -3%;
  transform: rotate(2deg);
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}
.hero-art__chip--location svg { color: var(--c-bg); }
.hero-art__sparkle {
  position: absolute;
  color: var(--c-burg);
  opacity: 0.5;
}
.hero-art__sparkle--1 { inset-block-start: -10px; inset-inline-end: 12%; }
.hero-art__sparkle--2 { inset-block-end: -10px; inset-inline-start: 8%; }

.hero__hint {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--c-ink-mute);
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
html[lang="ar"] .hero__hint { letter-spacing: 0.04em; text-transform: none; font-size: 0.85rem; }
html[dir="rtl"] .hero__hint { transform: translateX(50%); }
.hero__hint svg { animation: nudge 2.4s ease-in-out infinite; color: var(--c-burg); }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   MARQUEE — scrolling brand promises strip
   ============================================================ */
.marquee {
  background: var(--c-ink);
  color: var(--c-bg);
  padding-block: 1.1rem;
  overflow: hidden;
  border-block: 1px solid var(--c-burg-lo);
}
.marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee__row {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
html[lang="ar"] .marquee__row { font-weight: 700; }
.marquee__dot { color: var(--c-burg-hi); opacity: 0.7; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* ============================================================
   SECTION-HEAD shared
   ============================================================ */
.section-head {
  max-width: var(--container);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.section-head--center { align-items: center; text-align: center; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-burg);
}
html[lang="ar"] .section-eyebrow { letter-spacing: 0.04em; text-transform: none; font-size: 0.88rem; }
.section-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.06;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  max-width: 22ch;
}
html[lang="ar"] .section-title { font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.section-lede {
  font-size: clamp(1rem, 1.2vw, 1.13rem);
  color: var(--c-ink-2);
  line-height: 1.7;
  max-width: 60ch;
}

/* ============================================================
   SERVICES — 2 cards with expandable <details>
   ============================================================ */
.services {
  padding: clamp(4rem, 8vw, var(--s-7)) var(--gutter);
  background: var(--c-bg);
}
.services__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.service-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  position: relative;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-burg);
  box-shadow: var(--shadow-md);
}
.service-card--feature {
  background: linear-gradient(160deg, var(--c-paper), var(--c-tint-warm));
}
.service-card__head { display: flex; align-items: center; justify-content: space-between; }
.service-card__num {
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-burg);
  padding: 0.35rem 0.75rem;
  background: var(--c-tint-burg);
  border-radius: var(--r-pill);
}
html[lang="ar"] .service-card__num { letter-spacing: 0.03em; text-transform: none; font-size: 0.88rem; }
.service-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: 50%;
  margin-block-start: 0.5rem;
}
.service-card__title {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-family: var(--f-display);
}
.service-card__lede { color: var(--c-ink-2); line-height: 1.7; max-width: 42ch; }
.service-card__more {
  margin-block-start: 0.25rem;
  border-block-start: 1px solid var(--c-line-soft);
  padding-block-start: 0.85rem;
}
.service-card__more[open] .service-card__more-toggle svg { transform: rotate(180deg); }
.service-card__more-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-ink);
  user-select: none;
}
.service-card__more-toggle::-webkit-details-marker { display: none; }
.service-card__more-toggle svg { transition: transform 200ms var(--ease-out); }
.service-card__list {
  margin-block-start: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--c-ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
  padding-inline-start: 1rem;
  position: relative;
}
.service-card__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 0.45rem;
  height: 1px;
  background: var(--c-burg);
}
.service-card__cta {
  margin-block-start: auto;
  padding-block-start: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-burg);
  font-weight: 700;
  font-size: 0.92rem;
  transition: gap 200ms var(--ease-out);
}
.service-card__cta:hover { gap: 0.6rem; }
html[dir="rtl"] .service-card__cta svg { transform: scaleX(-1); }
.services__note {
  max-width: var(--container);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  color: var(--c-ink-mute);
  font-size: 0.92rem;
}

/* ============================================================
   FABRICS
   ============================================================ */
.fabrics {
  padding: clamp(4rem, 8vw, var(--s-7)) var(--gutter);
  background: var(--c-bg-2);
  border-block: 1px solid var(--c-line-soft);
}
.fabrics__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.fabric {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.fabric:hover { border-color: var(--c-burg); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.fabric__label {
  align-self: flex-start;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-burg);
  padding: 0.35rem 0.85rem;
  background: var(--c-tint-burg);
  border-radius: var(--r-pill);
}
html[lang="ar"] .fabric__label { letter-spacing: 0.03em; text-transform: none; font-size: 0.88rem; }
.fabric__title {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-style: italic;
  font-weight: 500;
  color: var(--c-ink);
}
html[lang="ar"] .fabric__title { font-style: normal; font-weight: 700; }
.fabric__lede { color: var(--c-ink-2); line-height: 1.7; }
.fabric__points {
  margin-block-start: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fabric__points li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--c-ink);
  font-size: 0.95rem;
}
.fabric__points li svg { color: var(--c-burg); flex-shrink: 0; }
.fabric__note {
  margin-block-start: 0.5rem;
  font-size: 0.82rem;
  color: var(--c-ink-mute);
  font-style: italic;
}
html[lang="ar"] .fabric__note { font-style: normal; }

/* ============================================================
   PROCESS — 4-step strip (Lanieri/EGC pattern)
   ============================================================ */
.process {
  padding: clamp(4rem, 8vw, var(--s-7)) var(--gutter);
  background: var(--c-bg);
}
.process__strip {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-paper);
}
.process__step {
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-inline-end: 1px solid var(--c-line-soft);
  transition: background-color 240ms var(--ease-out);
  position: relative;
}
.process__step:last-child { border-inline-end: 0; }
.process__step:hover { background: var(--c-tint-warm); }
.process__num {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-burg);
  margin-block-end: 0.5rem;
}
html[lang="ar"] .process__num { letter-spacing: 0.03em; text-transform: none; font-size: 0.85rem; }
.process__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  font-style: italic;
  font-weight: 500;
  color: var(--c-ink);
}
html[lang="ar"] .process__title { font-style: normal; font-weight: 700; }
.process__body { color: var(--c-ink-2); font-size: 0.95rem; line-height: 1.65; max-width: 32ch; }

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: clamp(4rem, 8vw, var(--s-7)) var(--gutter);
  background: var(--c-bg-2);
  border-block: 1px solid var(--c-line-soft);
}
.faq__list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.faq__item {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out);
}
.faq__item[open] { border-color: var(--c-burg); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: var(--c-ink);
  user-select: none;
}
html[lang="ar"] .faq__item summary { font-weight: 700; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg {
  color: var(--c-burg);
  flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item p {
  padding: 0 1.4rem 1.4rem;
  color: var(--c-ink-2);
  line-height: 1.7;
  font-size: 0.96rem;
}

/* ============================================================
   ATELIER
   ============================================================ */
.atelier {
  padding: clamp(4rem, 8vw, var(--s-7)) var(--gutter);
  background: var(--c-bg);
}
.atelier__points {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.atelier__points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.25rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r);
  color: var(--c-ink);
  font-size: 0.98rem;
  transition: border-color 200ms var(--ease-out);
}
.atelier__points li:hover { border-color: var(--c-burg); }
.atelier__points li svg { color: var(--c-burg); flex-shrink: 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding: clamp(4rem, 8vw, var(--s-7)) var(--gutter);
  background: var(--c-bg-2);
  border-block: 1px solid var(--c-line-soft);
}
.contact__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.contact__card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.contact__card:hover { transform: translateY(-3px); border-color: var(--c-burg); box-shadow: var(--shadow-md); }
a.contact__card { color: inherit; }
.contact__card--wa {
  background: var(--c-wa) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 18px 40px -16px color-mix(in oklch, var(--c-wa) 55%, transparent);
}
.contact__card--wa:hover { background: var(--c-wa-hi) !important; }
.contact__card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--c-tint-burg);
  color: var(--c-burg);
  border-radius: 50%;
  margin-block-end: 0.85rem;
}
.contact__card--wa .contact__card-icon { background: rgba(255,255,255,0.18); color: white; }
.contact__card-label {
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
html[lang="ar"] .contact__card-label { letter-spacing: 0.03em; text-transform: none; font-size: 0.88rem; }
.contact__card--wa .contact__card-label { color: rgba(255,255,255,0.85); }
.contact__card-value {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.4;
}
html[lang="ar"] .contact__card-value { font-weight: 700; }
.contact__card--wa .contact__card-value { color: white; font-variant-numeric: tabular-nums; }
.contact__card-sub { color: var(--c-ink-mute); font-size: 0.88rem; }
.contact__card--wa .contact__card-sub { color: rgba(255,255,255,0.7); }
.contact__card-link, .contact__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: auto;
  padding-block-start: 0.6rem;
  color: var(--c-burg);
  font-weight: 700;
  font-size: 0.92rem;
  transition: gap 200ms var(--ease-out);
}
.contact__card-link svg, .contact__card-cta svg { transition: transform 200ms var(--ease-out); }
html[dir="rtl"] .contact__card-link svg, html[dir="rtl"] .contact__card-cta svg { transform: scaleX(-1); }
.contact__card-link:hover, .contact__card-cta:hover { gap: 0.6rem; }
.contact__card--wa .contact__card-cta { color: white; }
.contact__card-note { color: var(--c-ink-mute); font-size: 0.78rem; font-style: italic; margin-block-start: 0.3rem; }
html[lang="ar"] .contact__card-note { font-style: normal; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: var(--c-wa);
  color: white !important;
  border-radius: 50%;
  box-shadow: 0 16px 40px -10px color-mix(in oklch, var(--c-wa) 55%, transparent), 0 2px 8px rgba(0,0,0,0.15);
  z-index: 50;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 22px 48px -10px color-mix(in oklch, var(--c-wa) 60%, transparent), 0 4px 12px rgba(0,0,0,0.18);
}
.wa-float svg { color: white; }
.wa-float__tip {
  position: absolute;
  inset-inline-end: calc(100% + 0.65rem);
  inset-block-start: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  padding: 0.45rem 0.85rem;
  background: var(--c-ink);
  color: var(--c-bg);
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.wa-float:hover .wa-float__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============================================================
   FOOTER — with prominent Numu link
   ============================================================ */
.ftr {
  background: var(--c-ink);
  color: color-mix(in oklch, var(--c-bg) 80%, transparent);
  padding-block-start: clamp(3rem, 6vw, 5rem);
}
.ftr__top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.ftr__brand { display: flex; align-items: flex-start; gap: 0.9rem; }
.ftr__brand-mark { width: 48px; height: auto; object-fit: contain; filter: brightness(1.6); }
.ftr__brand-name {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-bg);
  margin: 0;
}
html[lang="ar"] .ftr__brand-name { font-weight: 700; }
.ftr__brand-tag {
  margin-block-start: 0.3rem;
  font-size: 0.85rem;
  color: color-mix(in oklch, var(--c-bg) 60%, transparent);
}
.ftr__col h4 {
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-bg) 55%, transparent);
  margin-block-end: 1rem;
}
html[lang="ar"] .ftr__col h4 { letter-spacing: 0.03em; text-transform: none; font-size: 0.88rem; }
.ftr__col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.ftr__col li, .ftr__col a {
  color: color-mix(in oklch, var(--c-bg) 78%, transparent);
  font-size: 0.94rem;
  transition: color 200ms var(--ease-out);
}
.ftr__col a:hover { color: var(--c-bg); }

.ftr__bottom {
  border-block-start: 1px solid color-mix(in oklch, var(--c-bg) 14%, transparent);
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: color-mix(in oklch, var(--c-bg) 55%, transparent);
}
.ftr__numu {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in oklch, var(--c-bg) 25%, transparent);
  border-radius: var(--r-pill);
  color: var(--c-bg);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.ftr__numu:hover { background: var(--c-burg); border-color: var(--c-burg); }
.ftr__numu strong { font-weight: 700; color: var(--c-bg); }
.ftr__numu-arrow svg { transition: transform 200ms var(--ease-out); }
html[dir="rtl"] .ftr__numu-arrow svg { transform: scaleX(-1); }
.ftr__numu:hover .ftr__numu-arrow svg { transform: translateX(3px); }
html[dir="rtl"] .ftr__numu:hover .ftr__numu-arrow svg { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 1024px) {
  .nav__inner { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__cta .btn--ghost { display: none; }

  .hero__grid { grid-template-columns: 1fr; row-gap: 2rem; min-height: auto; }
  .hero__visual { order: -1; }
  .hero-art { max-width: 560px; margin-inline: auto; aspect-ratio: 4 / 3; }

  .services__grid { grid-template-columns: 1fr; }

  .process__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__step:nth-child(2) { border-inline-end: 0; }
  .process__step:nth-child(1), .process__step:nth-child(2) { border-block-end: 1px solid var(--c-line-soft); }

  .contact__grid { grid-template-columns: 1fr; }

  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}

/* ============================================================
   MOBILE — consolidated block at end (PRIMARY case)
   ============================================================ */
@media (max-width: 640px) {
  :root { --gutter: 1.25rem; --nav-h: 64px; }

  .nav__inner { padding: 0.75rem var(--gutter); }
  .nav__brand-mark { width: 32px; }
  .nav__brand-name { font-size: 1rem; }
  /* Mobile nav: just lang toggle + hamburger. The floating WhatsApp
     button bottom-right covers the WA-pill role, so drop the duplicate
     from the nav to free space and reduce visual clutter. */
  .nav__cta { gap: 0.5rem; }
  .nav__cta .btn { display: none; }   /* hide both inline CTAs (ghost + WA pill) */
  .lang-toggle { width: 44px; height: 44px; }
  html[lang="en"] .lang-toggle__glyph { font-size: 2rem; }
  .nav__toggle { width: 38px; height: 38px; }
  .nav__toggle svg { width: 20px; height: 20px; }

  .hero { padding-block-start: calc(var(--nav-h) + 1.75rem); padding-block-end: 3rem; }
  .hero-art { max-width: 340px; }
  .hero-art__chip { font-size: 0.7rem; padding: 0.4rem 0.7rem; }
  .hero-art__sparkle--1 svg { width: 18px; height: 18px; }
  .hero-art__sparkle--2 svg { width: 20px; height: 20px; }
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.6rem); max-width: 100%; }
  html[lang="ar"] .hero__title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .hero__lede { font-size: 1rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; width: 100%; }
  .hero__stats { grid-template-columns: 1fr; gap: 0.85rem; padding-block-start: 1.25rem; margin-block-start: 1.25rem; }
  .hero__hint { font-size: 0.78rem; }

  .marquee { padding-block: 0.85rem; }
  .marquee__row { font-size: 1.05rem; gap: 1.75rem; }

  .services, .fabrics, .process, .faq, .atelier, .contact { padding-block: 3.5rem; }
  .service-card { padding: 1.5rem; }
  .service-card__title { font-size: 1.4rem; }

  .fabrics__grid { grid-template-columns: 1fr; }
  .fabric { padding: 1.5rem; }
  .fabric__title { font-size: 1.6rem; }

  .process__strip { grid-template-columns: 1fr; }
  .process__step { border-inline-end: 0; border-block-end: 1px solid var(--c-line-soft); padding: 1.25rem 1.25rem; }
  .process__step:last-child { border-block-end: 0; }
  .process__title { font-size: 1.3rem; }

  .faq__item summary { padding: 0.95rem 1.1rem; font-size: 1rem; }
  .faq__item p { padding: 0 1.1rem 1.2rem; }

  .atelier__points { grid-template-columns: 1fr; }

  .contact__card { padding: 1.4rem; }

  .wa-float { width: 54px; height: 54px; inset-block-end: 1rem; inset-inline-end: 1rem; }
  .wa-float__tip { display: none; }

  .ftr__top { grid-template-columns: 1fr; gap: 2rem; }
  .ftr__bottom { justify-content: center; text-align: center; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}