/* ═══════════════════════════════════════════════════════
   LUXE ARTISAN — Where Design Meets Craft
   Warm "Nature Distilled" design system · AR/EN · RTL/LTR
   ═══════════════════════════════════════════════════════ */

:root{
  --bg:        #FAF6F0;
  --bg-sand:   #F2EAD9;
  --bg-dark:   #1E1710;
  --bg-dark-2: #2A2118;
  --ink:       #2A2118;
  --ink-soft:  #5F5245;
  --ink-faint: #8A7B6C;
  --bronze:    #8C6442;
  --bronze-2:  #A87F55;
  --gold:      #C9A26E;
  --cream:     #F2EAD9;
  --line:      rgba(42,33,24,.14);
  --line-soft: rgba(42,33,24,.08);
  --card:      #FFFFFF;
  --field:     #FFFFFF;
  --header-bg: rgba(250,246,240,.92);
  --btn-solid-bg: #2A2118;
  --btn-solid-fg: #F2EAD9;
  color-scheme: light;

  --font-ar: 'Almarai', 'Segoe UI', sans-serif;
  --font-head: 'Alexandria', 'Almarai', 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-latin: 'Inter', 'Segoe UI', sans-serif;
  --glass-bg: rgba(250,246,240,.72);
  --glass-border: rgba(140,100,66,.3);

  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem;
  --sp-5: 4rem;  --sp-6: 6rem; --sp-7: 8rem;

  --radius: 4px;
  --ease: cubic-bezier(.22,.8,.3,1);
  --shadow: 0 20px 60px -24px rgba(42,33,24,.28);
  --header-h: 84px;
}

/* ─── Dark theme — cinematic charcoal + gold ─── */
:root[data-theme="dark"]{
  --bg:        #14110D;
  --bg-sand:   #1C1712;
  --bg-dark:   #0E0B08;
  --ink:       #F7F2E9;
  --ink-soft:  #CDC2AF;
  --ink-faint: #9C8F7D;
  --bronze:    #D9A24B;
  --bronze-2:  #E8C876;
  --gold:      #E8C876;
  --line:      rgba(247,242,233,.18);
  --line-soft: rgba(247,242,233,.10);
  --card:      #1E1913;
  --field:     #272017;
  --header-bg: rgba(14,11,8,.9);
  --btn-solid-bg: linear-gradient(135deg, #E8C876, #D9A24B);
  --btn-solid-fg: #14110D;
  --shadow: 0 20px 60px -24px rgba(0,0,0,.65);
  --glass-bg: rgba(20,17,13,.72);
  --glass-border: rgba(232,200,118,.35);
  color-scheme: dark;
}
:root[data-theme="dark"] .btn--solid:hover{ background: var(--cream); color: #1E1710; }
/* bronze is lighter in dark mode — flip white-on-bronze text to dark for contrast */
:root[data-theme="dark"] .step.is-active .step__num,
:root[data-theme="dark"] .about__badge,
:root[data-theme="dark"] .social-row a:hover,
:root[data-theme="dark"] .lang-toggle:hover,
:root[data-theme="dark"] .theme-toggle:hover{ color:#1E1710; }
:root[data-theme="dark"] .header__logo--dark{ opacity:0 !important; }
:root[data-theme="dark"] .header__logo--light{ opacity:1 !important; }
:root[data-theme="dark"] .preloader__logo--dark{ display:none; }
:root:not([data-theme="dark"]) .preloader__logo--light{ display:none; }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  overflow-x: hidden; /* fallback for older Safari */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--font-ar);
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-x: clip;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
html[lang="en"] body{ font-family: var(--font-latin); line-height:1.7; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
.latin{ font-family: var(--font-latin); }
html[lang="en"] .latin{ font-family: inherit; }

.container{ width:min(1200px, 100% - 3rem); margin-inline:auto; }
.section{ position:relative; padding-block: clamp(4rem, 10vw, 7.5rem); }
.section--sand{ background: var(--bg-sand); }
.section--dark{ background: var(--bg-dark); color: var(--cream); }

/* soft blends between adjacent sections (reference: blend-top-only/bottom-only) */
.blend-top::before, .blend-bottom::after{
  content:""; position:absolute; inset-inline:0; height:110px;
  pointer-events:none; z-index:1;
}
.blend-top::before{ top:0; background: linear-gradient(to bottom, var(--bg), transparent); }
.blend-bottom::after{ bottom:0; background: linear-gradient(to top, var(--bg), transparent); }

/* ─── Type scale ─── */
.h2{
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-3);
}
.h3{ font-family: var(--font-head); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; line-height:1.55; }
.h4{ font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.body{ color: var(--ink-soft); }

.label{
  display:flex; align-items:center; gap:.9rem;
  color: var(--bronze);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.label::before{ content:""; width:2.6rem; height:1px; background: var(--bronze); flex:none; }

.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: var(--sp-3); margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head__note{ max-width: 34ch; color: var(--ink-faint); font-size:.98rem; }

/* ─── Buttons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .95rem 2.1rem;
  border-radius: var(--radius);
  font-weight: 700; font-size: .95rem;
  border: 1px solid transparent;
  transition: all .28s var(--ease);
  cursor:pointer;
}
.btn--sm{ padding:.55rem 1.3rem; font-size:.85rem; }
.btn--solid{ background: var(--btn-solid-bg); color: var(--btn-solid-fg); }
.btn--solid:hover{ background: var(--bronze); color:#fff; transform: translateY(-2px); }
.btn--gold{ background: var(--gold); color: var(--bg-dark); }
.btn--gold:hover{ background: var(--cream); transform: translateY(-2px); }
.btn--ghost{ border-color: var(--ink); color: var(--ink); background:transparent; }
.btn--ghost:hover{ background: var(--ink); color: var(--bg); }
.btn--ghost-light{ border-color: rgba(242,234,217,.5); color: var(--cream); }
.btn--ghost-light:hover{ background: var(--cream); color: var(--ink); }

/* ─── Accessibility ─── */
.skip-link{
  position:fixed; top:-100px; inset-inline-start:1rem; z-index:200;
  background:var(--ink); color:var(--cream); padding:.7rem 1.4rem; border-radius:var(--radius);
  transition: top .2s;
}
.skip-link:focus{ top:1rem; }
:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ─── Glass utility ─── */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
}

/* ─── Scroll progress ─── */
.progress-top{
  position:fixed; top:0; inset-inline:0; height:3px; z-index:110;
  pointer-events:none;
}
.progress-top span{
  display:block; height:100%;
  background: linear-gradient(90deg, #E8C876, #D9A24B);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
}
[dir="rtl"] .progress-top span{ --origin-start: right; }
.progress-mark{
  position:fixed; bottom:1.4rem; inset-inline-start:1.4rem; z-index:90;
  width:44px; height:46px;
  opacity:0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.progress-mark.is-visible{ opacity:1; transform:none; }
.progress-mark svg{ width:100%; height:100%; }
.progress-mark__track{ fill: var(--ink); opacity:.22; }
.progress-mark__fill{ fill: var(--gold); }

/* ─── Floating WhatsApp ─── */
.wa-float{
  position:fixed; bottom:1.4rem; inset-inline-end:1.4rem; z-index:90;
  width:56px; height:56px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #2AAE4F, #1E8E3E);
  color:#fff;
  border-radius:50%;
  box-shadow: 0 10px 30px -8px rgba(30,142,62,.55);
  opacity:0; transform: translateY(14px) scale(.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.wa-float.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover{ transform: translateY(-3px) scale(1.04); }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border: 2px solid rgba(42,174,79,.5);
  animation: waPulse 2.4s var(--ease) infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.8; } 70%,100%{ transform:scale(1.45); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .wa-float::after{ animation:none; } }

/* ─── Hero hint + skip ─── */
.hero__hint{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  z-index:3;
  display:flex; align-items:center; gap:.55rem;
  color: rgba(247,242,233,.75);
  font-size:.85rem; letter-spacing:.06em;
  white-space:nowrap;
}
.hero__hint svg{ animation: hintBob 1.8s var(--ease) infinite; }
@keyframes hintBob{ 0%,100%{ transform:translateY(-3px); opacity:.5; } 50%{ transform:translateY(3px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__hint svg{ animation:none; } }
.hero__skip{
  position:absolute; bottom:1.6rem; inset-inline-end:2rem; z-index:3;
  font-size:.82rem; color: rgba(247,242,233,.55);
  border-bottom:1px solid rgba(247,242,233,.3);
  padding-bottom:.15rem;
  transition: color .3s;
}
.hero__skip:hover{ color: var(--gold); border-color: var(--gold); }

/* ─── Before / After slider ─── */
.ba__frame{
  position:relative;
  max-width: 920px; margin-inline:auto;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select:none;
  background: var(--card);
}
.ba__frame:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.ba__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.ba__after{
  position:absolute; inset:0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background: var(--gold);
  transform: translateX(-50%);
  will-change: left;
  z-index:3;
  box-shadow: 0 0 18px rgba(232,200,118,.65);
}
.ba__grip{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:46px; height:46px;
  display:grid; place-items:center;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border:1px solid var(--glass-border);
  border-radius:50%;
  color: var(--gold);
  font-size:1.1rem; letter-spacing:.05em;
  white-space:nowrap;
}
.ba__tag{
  position:absolute; bottom:1rem; z-index:2;
  padding:.4rem 1.1rem;
  font-size:.82rem; font-weight:700;
  color: var(--ink);
}
.ba__tag--after{ left:1rem; }
.ba__tag--before{ right:1rem; }
.ba__hint{
  text-align:center; margin-top:1.2rem;
  color: var(--ink-faint); font-size:.88rem;
}

/* ─── Lenis ─── */
html.lenis-on{ scroll-behavior:auto; }
html.lenis-on body{ overscroll-behavior:none; }

/* ─── Preloader ─── */
.preloader{
  position:fixed; inset:0; z-index:120;
  background: var(--bg);
  display:grid; place-items:center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__logo{ width:90px; animation: pulse 1.6s var(--ease) infinite alternate; }
@keyframes pulse{ from{ opacity:.35; transform:scale(.96);} to{ opacity:1; transform:scale(1);} }
@media (prefers-reduced-motion: reduce){ .preloader{ display:none; } }

/* ─── Header ─── */
.header{
  position:fixed; top:0; inset-inline:0; z-index:100;
  transition: background .35s var(--ease), box-shadow .35s, transform .4s var(--ease);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  height: var(--header-h);
}
.header__logo{ width:64px; height:auto; transition: opacity .3s; }
.header__logo--light{
  position:absolute; top:0; inset-inline-start:0; opacity:1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.header__brand{ position:relative; display:block; }
.header__logo--dark{ opacity:0; }
.header.is-solid{ background: var(--header-bg); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); }
.header.is-solid .header__logo--dark{ opacity:1; }
.header.is-solid .header__logo--light{ opacity:0; }
.header.is-hidden{ transform: translateY(-110%); }

.header__nav{ display:flex; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.nav-link{
  position:relative; font-weight:700; font-size:.95rem;
  color: var(--cream);
  padding-block:.4rem;
  transition: color .3s;
}
.nav-link::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:100%; height:1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after{ transform: scaleX(1); }
.header.is-solid .nav-link{ color: var(--ink); }

.header__actions{ display:flex; align-items:center; gap: 1rem; }
.lang-toggle{
  font-family: var(--font-latin);
  font-weight:600; font-size:.85rem; letter-spacing:.06em;
  color: var(--cream);
  border:1px solid rgba(242,234,217,.5);
  border-radius: var(--radius);
  padding:.45rem .9rem;
  transition: all .3s;
}
.header.is-solid .lang-toggle{ color: var(--ink); border-color: var(--line); }
.lang-toggle:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; }

.theme-toggle{
  width:40px; height:40px;
  display:grid; place-items:center;
  color: var(--cream);
  border:1px solid rgba(242,234,217,.5);
  border-radius:50%;
  transition: all .3s;
}
.header.is-solid .theme-toggle{ color: var(--ink); border-color: var(--line); }
.theme-toggle:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

.burger{ display:none; width:44px; height:44px; position:relative; z-index:110; }
.burger span{
  position:absolute; inset-inline:10px; height:2px; background: var(--cream);
  transition: all .35s var(--ease);
}
.header.is-solid .burger span, .header.menu-open .burger span{ background: var(--ink); }
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:26px; }
.header.menu-open .burger span:nth-child(1){ top:21px; transform: rotate(45deg); }
.header.menu-open .burger span:nth-child(2){ top:21px; transform: rotate(-45deg); }

/* ─── Hero ─── */
.hero{
  position:relative;
  min-height:100vh; /* fallback for older iOS */
  min-height:100svh;
  display:flex; align-items:flex-end;
  color: var(--cream);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; transform-origin:center; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,14,8,.88) 0%, rgba(20,14,8,.42) 45%, rgba(20,14,8,.30) 100%);
}
.hero__content{ position:relative; z-index:2; padding-block: 9rem 5.5rem; }
.hero__eyebrow{
  font-size: clamp(.8rem, 1.4vw, .95rem);
  letter-spacing: .35em;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}
.hero__title{
  font-family: var(--font-head);
  font-size: clamp(3rem, 10.5vw, 8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-3);
  max-width: 12ch;
}
.hero__sub{
  max-width: 52ch;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: rgba(242,234,217,.88);
  margin-bottom: var(--sp-4);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap: 1rem; margin-bottom: var(--sp-5); }
.hero__stats{
  display:flex; flex-wrap:wrap; gap: clamp(1.5rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(242,234,217,.22);
  padding-top: var(--sp-3);
}
.hero__stats li{ display:flex; flex-direction:column; gap:.15rem; }
.stat-num{
  font-family: var(--font-latin);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 300;
  color: var(--gold);
  line-height:1.2;
}
.hero__stats span{ font-size:.9rem; color: rgba(242,234,217,.75); }
.hero__scroll{
  position:absolute; bottom:2rem; inset-inline-end:2.5rem; z-index:3;
  width:1px; height:70px; overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset-inline:0; top:-40%; height:40%;
  background: var(--gold);
  animation: scrollHint 2s var(--ease) infinite;
}
@keyframes scrollHint{ to{ top:110%; } }

/* ─── Cinematic journey ─── */
.journey{
  background:
    radial-gradient(ellipse 90% 60% at 50% 40%, rgba(232,200,118,.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(232,200,118,.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(232,200,118,.045) 0 1px, transparent 1px 48px),
    #0E0B08;
  color: #F7F2E9;
}
.journey__stage{ padding: clamp(3rem, 7vw, 5rem) 0; }
.journey__eyebrow{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.journey__eyebrow .latin{ color:#E8C876; letter-spacing:.34em; font-size:.8rem; }
.journey__eyebrow [data-i18n]{ color: rgba(247,242,233,.55); font-size:.9rem; }
.journey__layout{
  width:min(1200px, 100% - 3rem); margin-inline:auto;
  display:grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.journey__chapters{ position:relative; }
.journey__ch{ max-width: 40ch; }
.journey__ch + .journey__ch{ margin-top: 2.2rem; }
.journey__num{
  display:inline-grid; place-items:center;
  width:52px; height:52px;
  border:1px solid #E8C876; border-radius:50%;
  color:#E8C876; font-size:.95rem;
  margin-bottom: .9rem;
}
.journey__ch .h3{ color:#F7F2E9; margin-bottom:.5rem; }
.journey__ch p{ color: rgba(247,242,233,.72); font-size:1rem; }
.journey__scene{
  position:relative;
  width:100%; max-width:540px;
  aspect-ratio:1;
  margin-inline:auto;
}
.journey__blueprint{
  position:absolute; inset:0; width:100%; height:100%;
  stroke:#E8C876; stroke-width:2; stroke-linecap:round;
  filter: drop-shadow(0 0 6px rgba(232,200,118,.45));
  display:none; /* revealed only in animated mode */
}
.journey__real{
  position:absolute; inset:0;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.journey__real img{ width:100%; height:100%; object-fit:cover; }
.journey__glow{
  position:absolute; inset-inline:0; top:100%;
  height:3px;
  background: linear-gradient(90deg, transparent, #E8C876, transparent);
  box-shadow: 0 0 24px 4px rgba(232,200,118,.55);
  opacity:0;
}
.journey__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius: var(--radius);
  display:none;
}

/* animated mode (JS + motion allowed) */
.journey--anim .journey__track{ height: 320vh; }
.journey--anim .journey__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0;
  overflow:hidden;
}
.journey--anim .journey__blueprint{ display:block; }
.journey--anim .journey__ch{
  position:absolute; top:50%; inset-inline-start:0;
  transform: translateY(-50%);
  margin:0;
  opacity:0; visibility:hidden;
}
.journey--anim .journey__chapters{ min-height: 240px; }
.journey--anim .journey__glow{ opacity:1; }

/* QA flat mode — journey frozen inline, no sticky/scroll needed */
.journey--flat .journey__track{ height:auto !important; }
.journey--flat .journey__stage{ position:relative !important; height:auto !important; min-height:900px; padding:3rem 0 !important; }
.qa-flat .hero{ min-height:600px !important; }

/* frames engine */
.journey[data-engine="frames"] .journey__blueprint{ display:none !important; }
.journey[data-engine="frames"] .journey__canvas{ display:block; }
.journey[data-engine="frames"] .journey__real{ opacity:0; }

@media (max-width: 860px){
  .journey__layout{ grid-template-columns: 1fr; gap:1.6rem; }
  .journey__scene{ max-width: min(78vw, 420px); order:-1; }
  .journey--anim .journey__track{ height: 260vh; }
  .journey--anim .journey__chapters{ min-height: 190px; }
  .journey__ch{ text-align:center; margin-inline:auto; }
  .journey--anim .journey__ch{ inset-inline:0; }
  .journey__num{ width:44px; height:44px; }
}

/* ─── Marquee ─── */
.marquee{
  background: var(--bg-dark);
  color: rgba(242,234,217,.72);
  overflow:hidden;
  padding-block: 1.05rem;
  border-block: 1px solid rgba(242,234,217,.08);
}
.marquee__track{
  display:flex; width:max-content;
  animation: marquee 30s linear infinite;
}
.marquee__track span{ white-space:nowrap; font-size:.95rem; letter-spacing:.08em; padding-inline-end:.5rem; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
[dir="rtl"] .marquee__track{ animation-direction: reverse; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ─── About ─── */
.about__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items:center;
}
.about__stats{
  display:flex; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.about__stats li{ display:flex; flex-direction:column; gap:.2rem; }
.about__stats .stat-num{ color: var(--bronze); }
.about__stats span{ font-size:.88rem; color: var(--ink-faint); }
.about__media{ position:relative; padding-block: var(--sp-3); }
.about__img{ overflow:hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.about__img img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.about__img:hover img{ transform: scale(1.05); }
.about__img--main{ aspect-ratio: 4/3; }
.about__img--accent{
  position:absolute; bottom:0; inset-inline-start:-12%;
  width:52%; aspect-ratio:1;
  border: 6px solid var(--bg);
}
.about__badge{
  position:absolute; top:0; inset-inline-end:0;
  background: var(--bronze); color:#fff;
  font-size:.72rem; letter-spacing:.28em; font-weight:500;
  padding:.55rem 1.1rem;
}

/* ─── Values ─── */
.values .h2{ margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.values__grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.value-card{
  background: var(--bg-sand);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  transition: background .4s var(--ease);
}
.value-card:hover{ background: var(--bg); }
.value-card__icon{
  width: 42px; height:42px; color: var(--bronze);
  margin-bottom: var(--sp-2);
}
.value-card .h4{ margin-bottom:.6rem; }
.value-card p{ font-size:.94rem; color: var(--ink-soft); }

/* ─── Services ─── */
.services__grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
}
.svc-card{
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.svc-card__media{ aspect-ratio: 4/3; overflow:hidden; }
.svc-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.svc-card:hover .svc-card__media img{ transform: scale(1.07); }
.svc-card__body{ padding: 1.6rem 1.6rem 1.9rem; position:relative; flex:1; }
.svc-card__num{
  position:absolute; top:-1.4rem; inset-inline-end:1.4rem;
  background: var(--bg-dark); color: var(--gold);
  font-size:.8rem; font-weight:500; letter-spacing:.1em;
  padding:.5rem .85rem; border-radius: var(--radius);
}
.svc-card .h3{ margin-bottom:.5rem; font-size:1.15rem; }
.svc-card p{ font-size:.92rem; color: var(--ink-soft); }

/* ─── Quote ─── */
.quote{ position:relative; padding-block: clamp(5rem, 12vw, 9rem); overflow:hidden; }
.quote__bg{
  position:absolute; inset:0;
  background: url("../img/bg-grain-dark.webp") center/cover no-repeat;
  opacity:.5;
}
.quote__bg::after{ content:""; position:absolute; inset:0; background: rgba(30,23,16,.72); }
.quote .container{ position:relative; z-index:2; }
.quote__text{
  max-width: 30ch;
  margin-inline:auto;
  text-align:center;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.85;
  color: var(--cream);
}
html[lang="en"] .quote__text{ font-family: var(--font-serif); font-weight:500; font-style:italic; line-height:1.6; max-width:36ch; }
.quote__text .qw{ display:inline-block; } /* dimming handled by GSAP so text stays readable if animations are unavailable */

/* ─── Process ─── */
.process__grid{
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.process__figure{ position:sticky; top: calc(var(--header-h) + 2rem); }
.process__frame{
  position:relative; aspect-ratio:1;
  border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--card);
}
.process__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.process__result{ opacity:0; }
.process__frame-label{
  position:absolute; bottom:1rem; inset-inline-start:1rem; z-index:3;
  background: rgba(30,23,16,.82); color: var(--gold);
  font-size:.7rem; letter-spacing:.22em; font-weight:500;
  padding:.5rem .9rem; border-radius: var(--radius);
}
.process__steps{
  display:flex; flex-direction:column;
  gap: clamp(2rem, 4vw, 3.2rem);
  position:relative;
  padding-inline-start: 0;
}
.step{
  display:flex; gap: clamp(1.2rem, 2.5vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line-soft);
}
.step:last-child{ border-bottom:0; padding-bottom:0; }
.step__num{
  flex:none;
  width: 58px; height:58px;
  display:grid; place-items:center;
  border:1px solid var(--bronze);
  color: var(--bronze);
  border-radius:50%;
  font-weight:500; font-size:1rem;
  transition: all .4s var(--ease);
}
.step.is-active .step__num{ background: var(--bronze); color:#fff; }
.step .h3{ margin-bottom:.45rem; }
.step p{ color: var(--ink-soft); font-size:.97rem; max-width: 52ch; }

/* ─── Works ─── */
.works__grid{
  columns: 3;
  column-gap: 1.4rem;
}
.work{
  position:relative;
  break-inside: avoid;
  margin-bottom: 1.4rem;
  border-radius: var(--radius);
  overflow:hidden;
}
.lb-enabled .work{ cursor: zoom-in; }
/* touch devices: captions always visible (no hover) */
@media (hover: none){
  .work figcaption{ opacity:1; transform:none; }
}
.work img{ width:100%; transition: transform .8s var(--ease); }
.work:hover img, .work:focus-visible img{ transform: scale(1.06); }
.work figcaption{
  position:absolute; inset-inline:0; bottom:0;
  padding: 2.2rem 1.2rem .9rem;
  background: linear-gradient(to top, rgba(20,14,8,.78), transparent);
  color: var(--cream);
  font-size:.88rem; font-weight:700;
  opacity:0; transform: translateY(8px);
  transition: all .45s var(--ease);
}
.work:hover figcaption, .work:focus-visible figcaption{ opacity:1; transform:none; }

/* ─── Vision ─── */
.vision__grid{
  display:grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items:center;
}
.vision__media{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.vision__h{
  color: var(--bronze);
  display:flex; align-items:center; gap:.8rem;
  margin: var(--sp-3) 0 .5rem;
}
.vision__h::after{ content:""; height:1px; flex:1; max-width:5rem; background: var(--bronze); opacity:.4; }
.vision__text .body{ max-width: 58ch; }

/* ─── CTA ─── */
.cta{ position:relative; overflow:hidden; padding-block: clamp(5rem, 11vw, 8.5rem); }
.cta__bg{
  position:absolute; inset:0;
  background: url("../img/bg-planks-dark.webp") center/cover no-repeat;
}
.cta__bg::after{ content:""; position:absolute; inset:0; background: rgba(30,23,16,.8); }
.cta__inner{ position:relative; z-index:2; text-align:center; }
.cta__title{
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  font-weight:700; color: var(--cream);
  margin-bottom: var(--sp-2);
}
.cta__sub{ color: rgba(242,234,217,.8); font-size:1.08rem; margin-bottom: var(--sp-4); }
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }

/* ─── Contact ─── */
.contact__grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.contact__cards{ display:flex; flex-direction:column; gap:1.1rem; }
.contact-card{
  display:flex; align-items:center; gap:1.2rem;
  background: var(--card);
  border:1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: all .35s var(--ease);
}
a.contact-card:hover{ border-color: var(--bronze); transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-card svg{ width:30px; height:30px; color: var(--bronze); flex:none; }
.contact-card__label{ display:block; font-size:.82rem; color: var(--ink-faint); }
.contact-card strong{ font-size:1.02rem; }
.contact__social{ padding-top: .8rem; }
.social-row{ display:flex; gap:.8rem; margin-top:.6rem; }
.social-row a{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color: var(--ink-soft);
  transition: all .3s var(--ease);
}
.social-row a:hover{ background: var(--bronze); border-color: var(--bronze); color:#fff; transform: translateY(-3px); }
.social-row svg{ width:20px; height:20px; }

.contact__form{
  background: var(--bg-sand);
  border:1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display:flex; flex-direction:column;
}
.contact__form .h3{ margin-bottom:.4rem; }
.contact__form-note{ color: var(--ink-faint); font-size:.92rem; margin-bottom: var(--sp-3); }
.contact__form label{ font-weight:700; font-size:.9rem; margin-bottom:.45rem; }
.contact__form input, .contact__form textarea{
  font: inherit;
  background: var(--field);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:.85rem 1.1rem;
  margin-bottom: 1.3rem;
  color: var(--ink);
  transition: border-color .3s;
  resize: vertical;
}
.contact__form input:focus, .contact__form textarea:focus{
  outline:none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(140,100,66,.14);
}

/* ─── Footer ─── */
.footer{ background: var(--bg-dark); color: rgba(242,234,217,.78); }
.footer__grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5) var(--sp-4);
  align-items:start;
}
.footer__brand img{ width:96px; margin-bottom: var(--sp-2); }
.footer__tag{ font-size:.8rem; letter-spacing:.18em; color: var(--gold); }
.footer__nav{ display:flex; flex-direction:column; gap:.7rem; }
.footer__nav a, .footer__contact a{ transition: color .3s; }
.footer__nav a:hover, .footer__contact a:hover{ color: var(--gold); }
.footer__contact{ display:flex; flex-direction:column; gap:.7rem; }
[dir="rtl"] .footer__contact a.latin{ text-align: right; }
[dir="ltr"] .footer__contact a.latin{ text-align: left; }
.footer__bottom{
  border-top:1px solid rgba(242,234,217,.12);
  padding-block: 1.4rem;
  font-size:.85rem;
  color: rgba(242,234,217,.5);
}

/* ─── Lightbox ─── */
.lightbox{
  border:0; padding:0;
  background: transparent;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
}
.lightbox::backdrop{ background: rgba(20,14,8,.9); backdrop-filter: blur(6px); }
.lightbox img{ max-height: 78vh; width:auto; max-width:100%; margin-inline:auto; border-radius: var(--radius); }
.lightbox__caption{ text-align:center; color: #F2EAD9; padding-top:1rem; font-family: inherit; }
.lightbox__close{
  position:fixed; top:1.2rem; inset-inline-end:1.6rem;
  font-size:2.6rem; line-height:1; color: var(--cream);
  z-index:5;
  transition: color .3s, transform .3s;
}
.lightbox__close:hover{ color: var(--gold); transform: rotate(90deg); }

/* ─── Responsive ─── */
@media (max-width: 1024px){
  .services__grid{ grid-template-columns: repeat(2, 1fr); }
  .values__grid{ grid-template-columns: repeat(2, 1fr); }
  .works__grid{ columns: 2; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  :root{ --header-h: 72px; }
  .header__logo{ width:54px; }
  .header__nav{
    position:fixed; inset:0;
    background: var(--bg);
    flex-direction:column; justify-content:center; align-items:center;
    gap: 2.2rem;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    z-index: 105;
  }
  .header.menu-open .header__nav{ transform: none; }
  .nav-link{ color: var(--ink) !important; font-size:1.5rem; }
  .burger{ display:block; }
  .header__cta{ display:none; }

  .about__grid, .vision__grid, .contact__grid, .process__grid{ grid-template-columns: 1fr; }
  .about__media{ order:-1; max-width:520px; }
  .process__figure{ position:relative; top:0; max-width:440px; margin-inline:auto; }
  .vision__media{ max-width:520px; }
  .hero__content{ padding-block: 8rem 4.5rem; }
  .hero__scroll{ display:none; }
}

@media (max-width: 620px){
  .services__grid{ grid-template-columns: 1fr; }
  .values__grid{ grid-template-columns: 1fr; }
  .works__grid{ columns: 1; }
  .footer__grid{ grid-template-columns: 1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .about__img--accent{ inset-inline-start:-4%; }
  .work figcaption{ opacity:1; transform:none; }
}

/* ─── Reduced motion: everything visible, no transforms ─── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}