/* ====================================================
   LORANI — styles.css
   Light split-hero · Arabic-safe typography · refined motion
   ==================================================== */

:root {
  /* palette — warm and pristine */
  --bg:        #F2EDE5;
  --bg-soft:   #F7F3EC;
  --bg-warm:   #EBE3D6;
  --ink:       #1C1815;
  --ink-soft:  #3D352E;
  --mute:      #847566;
  --line:      #D9CFC0;
  --accent:    #9C5A3C;   /* terracotta */
  --accent-2:  #D4A77A;   /* honey sand */
  --night:     #14110F;

  /* type */
  --serif:    'Cormorant Garamond', 'Markazi Text', serif;
  --sans:     'Inter', system-ui, -apple-system, sans-serif;
  /* Arabic — Markazi Text is an editorial Arabic serif that mirrors Cormorant's
     classical elegance; Mada is a refined modern sans for body and UI.
     Noto Kufi Arabic provides geometric editorial alternative for select elements. */
  --arab:     'Mada', 'Noto Kufi Arabic', system-ui, sans-serif;
  --arab-disp:'Markazi Text', 'Noto Kufi Arabic', 'Mada', serif;

  /* sizing */
  --container: 1480px;
  --gutter: 40px;

  /* easings */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--bg); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ====================================================
   RTL — every heading switches to modern Arabic, never Amiri
   Generous line-heights so diacritics never get clipped.
   The brand wordmark "Lorani" and product names stay in serif —
   Latin letters in an Arabic display font look broken.
   ==================================================== */
html[dir="rtl"] {
  font-family: var(--arab);
  font-weight: 300;
  letter-spacing: 0;
}
/* Editorial Arabic headlines — Markazi Text at lighter weights reads as
   premium and refined, mirroring the editorial italic feel of Cormorant. */
html[dir="rtl"] .hero__title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .editorial__title,
html[dir="rtl"] .manifesto__text,
html[dir="rtl"] .atelier__caption h3 {
  font-family: var(--arab-disp);
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
html[dir="rtl"] .word blockquote,
html[dir="rtl"] .heritage__text .lead {
  font-family: var(--arab-disp);
  font-weight: 400;
}
html[dir="rtl"] .essence__title {
  font-family: var(--arab-disp);
  font-weight: 500;
}
html[dir="rtl"] .foot__brand p {
  font-family: var(--arab-disp);
  font-weight: 400;
}
/* In RTL the marquee track is mixed Latin + Arabic. Keep the track itself in
   Cormorant serif (for "Lorani", "Made in Morocco" etc.), and only the
   explicitly Arabic-tagged spans use the Arabic display font. */
html[dir="rtl"] .marquee__track {
  font-family: var(--serif);
  font-weight: 400;
}
html[dir="rtl"] em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
/* Brand word + product names stay in editorial Latin serif even in RTL */
html[dir="rtl"] .nav__logo-word,
html[dir="rtl"] .prod__name {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
}
html[dir="rtl"] .heritage__stats strong {
  font-family: var(--arab-disp);
  font-style: normal;
  font-weight: 500;
}
html[dir="rtl"] .prod__price { font-family: var(--serif); }

/* Arabic-safe line heights — diacritics need room, especially at large sizes.
   Markazi Text reads best at slightly more generous line-heights than Latin. */
html[dir="rtl"] .hero__title       { line-height: 1.3;  letter-spacing: 0; }
html[dir="rtl"] .section-title     { line-height: 1.3;  letter-spacing: 0; }
html[dir="rtl"] .editorial__title  { line-height: 1.3;  letter-spacing: 0; }
html[dir="rtl"] .manifesto__text   { line-height: 1.35; letter-spacing: 0; }
html[dir="rtl"] .word blockquote   { line-height: 1.8; }
html[dir="rtl"] .atelier__caption h3 { line-height: 1.3;  letter-spacing: 0; }
html[dir="rtl"] .heritage__text .lead { line-height: 1.8; }
html[dir="rtl"] .essence__title    { line-height: 1.4; }
html[dir="rtl"] .hero__sub,
html[dir="rtl"] p { line-height: 1.85; }
/* Markazi Text at large sizes benefits from a slightly tighter vertical metric
   adjustment so descenders feel anchored, not floating. */
html[dir="rtl"] .hero__title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .manifesto__text,
html[dir="rtl"] .editorial__title {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* For Arabic, remove the overflow clipping on reveal containers — diacritics extend ABOVE the line, and clipping cuts them.
   We use opacity-only fade for RTL (slide-up still works for LTR). */
html[dir="rtl"] .hero__title .line,
html[dir="rtl"] .manifesto__text .m-word {
  overflow: visible;
}

/* CRITICAL — Arabic letters JOIN to each other. Any `letter-spacing > 0`
   breaks the joining and renders Arabic as broken disconnected glyphs.
   Reset tracking to 0 on every element that holds text translated to Arabic. */
html[dir="rtl"] .kicker,
html[dir="rtl"] .nav__links a,
html[dir="rtl"] .nav__cta,
html[dir="rtl"] .btn,
html[dir="rtl"] .link-arrow,
html[dir="rtl"] .hero__eyebrow,
html[dir="rtl"] .hero__meta,
html[dir="rtl"] .hero__scroll-cue,
html[dir="rtl"] .prod__cat,
html[dir="rtl"] .prod__price span,
html[dir="rtl"] .atelier__kicker,
html[dir="rtl"] .atelier__num,
html[dir="rtl"] .atelier__hud,
html[dir="rtl"] .slider__hud,
html[dir="rtl"] .heritage__tag,
html[dir="rtl"] .heritage__stats span,
html[dir="rtl"] .word figcaption,
html[dir="rtl"] .cta__form button,
html[dir="rtl"] .cta__fine,
html[dir="rtl"] .foot__h,
html[dir="rtl"] .foot__bottom,
html[dir="rtl"] .lang {
  letter-spacing: 0;
}
/* Latin language-switcher buttons keep tracking even in RTL — the labels
   "EN" / "FR" are Latin and benefit from the wide-set spacing. */
html[dir="rtl"] .lang__btn[data-lang="en"],
html[dir="rtl"] .lang__btn[data-lang="fr"] { letter-spacing: 0.18em; }

/* ====================================================
   TYPOGRAPHY
   ==================================================== */
.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}
.kicker--light { color: rgba(255,255,255,0.65); }

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-top: 16px;
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.section-title--lg { font-size: clamp(54px, 6.8vw, 116px); }
.section-title--center { text-align: center; }

.section-head { padding-bottom: 64px; }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.section-head--center { text-align: center; }
/* RTL flex rows auto-reverse via dir attribute — DON'T add row-reverse,
   that would double-reverse and break the visual order again. */

/* ====================================================
   GRAIN
   ==================================================== */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 8000;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px;
  animation: grainShift 9s steps(8) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-5%, 4%); }
  50%  { transform: translate(4%, -3%); }
  75%  { transform: translate(-3%, -5%); }
  100% { transform: translate(0,0); }
}

/* ====================================================
   CURSOR
   ==================================================== */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9000;
  transform: translate3d(-50%, -50%, 0);
  mix-blend-mode: difference;
}
.cursor {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 50%;
  transition: width .55s var(--ease-out-expo), height .55s var(--ease-out-expo),
              opacity .5s var(--ease-out-expo);
  opacity: 0;
}
.cursor-dot {
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
}
.cursor.is-active { width: 56px; height: 56px; }
@media (hover: none) { .cursor, .cursor-dot { display: none; } }

/* ====================================================
   NAV
   ==================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px 0;
  color: var(--ink);
  transition: background .55s var(--ease-out-expo), padding .55s var(--ease-out-expo),
              backdrop-filter .55s var(--ease-out-expo), border-color .55s var(--ease-out-expo);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding: 14px 0;
  background: rgba(242, 237, 229, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(217, 207, 192, 0.6);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.nav__logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.nav__mark { width: 22px; height: 22px; fill: currentColor; }
.nav__logo-word { font-style: italic; font-weight: 500; }

.nav__links {
  display: flex; justify-content: center;
  gap: 36px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.nav__links a {
  position: relative;
  padding: 8px 2px;
  opacity: 0.85;
  transition: opacity .3s var(--ease-out-expo);
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; right: 100%;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transition: right .55s var(--ease-out-expo);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { right: 0; }

.nav__right { display: flex; align-items: center; gap: 22px; }

.lang {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
  letter-spacing: 0.16em;
  opacity: 0.75;
}
.lang__btn {
  padding: 4px 6px;
  letter-spacing: 0.18em;
  font-weight: 500;
  transition: opacity .3s var(--ease-out-expo);
  opacity: 0.65;
}
.lang__btn[lang="ar"] { font-family: var(--arab); font-size: 17px; letter-spacing: 0; }
.lang__btn:hover { opacity: 1; }
.lang__btn.is-active { opacity: 1; }
.lang__sep { opacity: 0.4; }

.nav__cta {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 18px;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .35s var(--ease-out-expo), color .35s var(--ease-out-expo);
}
.nav__cta:hover { background: var(--ink); color: var(--bg); }

/* ====================================================
   HERO — full-bleed editorial image with a hand-graded
   film treatment (warm color grade, halation, vignette,
   grain) and a cream scrim on the left for legibility.
   Sized to the viewport with a sensible mobile floor.
   All vertical metrics use vh + min() so nothing clips.
   ==================================================== */
.hero {
  position: relative;
  height: 100svh; /* small viewport — avoids mobile URL bar resize jumps */
  min-height: 580px;
  max-height: 1100px;
  overflow: hidden;
  background: var(--bg);
}
@supports not (height: 100svh) {
  .hero { height: 100vh; }
}

/* IMAGE LAYER */
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media-inner {
  position: absolute;
  /* fill the full hero — no extension. lets the subject sit naturally
     and prevents the "cropped face" feel. */
  inset: 0;
  will-change: transform;
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  /* show much more of the figure — torso/drape, not just the face */
  object-position: 65% 35%;
  /* very light grade — keep the image legible */
  filter: saturate(0.96) contrast(1.03) brightness(1.01);
}

/* FILM LAYER — soft vignette only, no multiply darkening */
.hero__film {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* subtle warm bloom top-right */
    radial-gradient(ellipse at 78% 18%, rgba(212, 167, 122, 0.14) 0%, rgba(212, 167, 122, 0) 42%),
    /* gentle edge vignette — much lighter than before */
    radial-gradient(ellipse 95% 85% at 50% 55%, rgba(28, 24, 21, 0) 68%, rgba(28, 24, 21, 0.16) 100%);
}
.hero__film::after {
  content: '';
  position: absolute; inset: 0;
  /* whisper-faint grain — texture without obscuring */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 220px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  animation: grainShift 7s steps(8) infinite;
}

/* CREAM WASH on the left for text legibility — lighter so the image
   breathes through on the right half. Text sits in the heavy zone (0–28%). */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(242, 237, 229, 0.92) 0%,
      rgba(242, 237, 229, 0.82) 22%,
      rgba(242, 237, 229, 0.40) 42%,
      rgba(242, 237, 229, 0.0)  62%);
}

/* CONTENT LAYER */
.hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Padding scales with viewport — shrinks on short screens, grows on tall ones. */
  padding: clamp(80px, 11vh, 132px) var(--gutter) clamp(40px, 7vh, 80px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(8px, 1.5vh, 20px);
  color: var(--ink);
}

/* `justify-self: start` follows writing direction — left in LTR, right in RTL.
   That keeps the text on the same side as the scrim heavy-wash side. */
.hero__top { padding-top: 4px; max-width: 50%; justify-self: start; }
.hero__eyebrow {
  display: inline-flex; align-items: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}

.hero__middle {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 32px);
  max-width: 56%;
  min-height: 0;
  justify-self: start; /* hugs the inline-start side — left in LTR, right in RTL */
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  /* Truly adaptive — scales with the smaller of width OR height,
     so wide-but-short laptops never overflow the viewport and crop the CTA.
     min() picks whichever dimension is more constrained. Floor of 48 keeps
     mobile portrait readable; ceiling at 156 covers very large monitors. */
  font-size: clamp(48px, min(8.4vw, 10.4vh), 156px);
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 14ch;
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero__title .line { display: block; overflow: hidden; padding: 0.08em 0; }
.hero__title .line__inner { display: inline-block; will-change: transform, opacity; }

.hero__sub {
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
}
.hero__sub::before {
  content: '';
  display: block;
  width: 38px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
  margin-bottom: 16px;
  /* Explicit anchor to inline-start (left in LTR, right in RTL) — without
     this, some browsers center the fixed-width block in its parent. */
  margin-inline-end: auto;
}

.hero__actions { display: flex; align-items: center; gap: 16px; }

.hero__bottom {
  display: flex; align-items: flex-end;
  max-width: 50%;
  justify-self: start;
}
.hero__meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ====================================================
   HERO — RTL (Arabic) — image flips to the LEFT half,
   cream scrim washes the RIGHT half, text blocks anchor
   to the right and align right. Without this, the title
   sits on top of the subject with no scrim behind it.
   ==================================================== */
html[dir="rtl"] .hero__media-inner { inset: 0; }
html[dir="rtl"] .hero__img {
  /* mirror the framing to the left so the subject sits in the left half */
  object-position: 35% 35%;
}
html[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(270deg,
      rgba(242, 237, 229, 0.92) 0%,
      rgba(242, 237, 229, 0.82) 22%,
      rgba(242, 237, 229, 0.40) 42%,
      rgba(242, 237, 229, 0.0)  62%);
}
/* `justify-self: start` (set on the base rules) automatically places these
   blocks on the inline-start side — left in LTR, right in RTL — so the text
   sits over the scrim's heavy-wash side in BOTH directions. No margin overrides
   needed. Text alignment is handled by the `dir="rtl"` attribute itself. */
html[dir="rtl"] .hero__title {
  /* Arabic display fonts feel visually heavier at large sizes — step down,
     same adaptive min(vw, vh) logic so it fits any geometry. */
  font-size: clamp(34px, min(6.4vw, 8vh), 120px);
  letter-spacing: 0;
}

/* CENTERED SCROLL CUE — bottom of viewport, independent of meta strip */
.hero__scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mute);
}
.hero__scroll-cue-line {
  display: block;
  width: 1px; height: 44px;
  background: rgba(28, 24, 21, 0.18);
  position: relative;
  overflow: hidden;
}
.hero__scroll-cue-line span {
  position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--accent);
  animation: scrollFall 2.6s var(--ease-out-expo) infinite;
}
@keyframes scrollFall {
  0%   { top: -50%; }
  100% { top: 150%; }
}

/* ====================================================
   BUTTONS
   ==================================================== */
.btn {
  display: inline-flex; align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 30px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  transition: background .45s var(--ease-out-expo), color .45s var(--ease-out-expo);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; transition: transform .45s var(--ease-out-expo); }
.btn:hover svg { transform: translateX(4px); }
html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(4px); }

.btn--ink {
  background: var(--ink);
  color: var(--bg);
}
.btn--ink:hover { background: var(--accent); }

.btn--light {
  background: #F2EDE5;
  color: var(--night);
}
.btn--light:hover { background: var(--accent-2); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out-expo); }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(4px); }
html[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
html[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* ====================================================
   CHAPTER NUMBERS
   ==================================================== */
.chapter { position: relative; }
.chapter__num {
  position: absolute;
  top: 80px;
  left: var(--gutter);
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(200px, 32vw, 520px);
  line-height: 0.8;
  color: var(--accent);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
  will-change: transform, opacity;
}
.chapter__num--right { left: auto; right: var(--gutter); }
.chapter > .container,
.chapter > .heritage__inner { position: relative; z-index: 1; }
html[dir="rtl"] .chapter__num { left: auto; right: var(--gutter); }
html[dir="rtl"] .chapter__num--right { right: auto; left: var(--gutter); }

/* ====================================================
   ORNAMENT
   ==================================================== */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 28px;
  padding: 80px var(--gutter);
  color: var(--accent);
  background: var(--bg);
}
.ornament__line {
  flex: 0 0 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.ornament__star { width: 32px; height: 32px; display: block; will-change: transform; }

/* ====================================================
   ESSENCE
   ==================================================== */
.essence {
  padding: 180px 0 160px;
  background: var(--bg);
}
.essence__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 24px;
}
.essence__card {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.essence__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 28px;
  font-weight: 500;
}
.essence__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.essence__card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ====================================================
   MANIFESTO
   ==================================================== */
.manifesto {
  padding: 200px 0 220px;
  background: var(--bg);
  text-align: center;
  position: relative;
}
.manifesto .kicker { display: block; margin-bottom: 64px; }
.manifesto__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 8.4vw, 144px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 16ch;
  margin: 0 auto;
}
.manifesto__text .m-word {
  display: inline-block;
  overflow: hidden;
  padding: 0.1em 0.06em;
  vertical-align: baseline;
}
.manifesto__text .m-word__in {
  display: inline-block;
  will-change: transform, opacity;
}
.manifesto__text em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.manifesto__alt {
  font-family: var(--arab-disp);
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--mute);
  margin-top: 64px;
  font-weight: 400;
}
html[dir="rtl"] .manifesto__alt {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}

/* ====================================================
   MARQUEE
   ==================================================== */
.marquee {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 4.6vw, 76px);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  will-change: transform;
}
.marquee__track span { display: inline-flex; align-items: center; }
.marquee__track .dia {
  font-size: 0.36em;
  color: var(--accent);
  font-style: normal;
  padding-bottom: 0.25em;
}
.marquee__track span[lang="ar"] {
  font-family: var(--arab-disp);
  font-style: normal;
  font-weight: 500;
  direction: rtl;
  unicode-bidi: isolate;
}

/* ====================================================
   COLLECTION — custom slider (overrides .collection__grid
   grid layout — items now flow horizontally in a track)
   ==================================================== */
.collection {
  padding: 180px 0 160px;
  background: var(--bg);
}
.collection__grid {
  /* old grid layout overridden — slider track flex layout below */
  display: flex;
  gap: 28px;
}
.prod {
  position: relative;
}

/* ====================================================
   CUSTOM SLIDER — used by collection. No browser scrollbar;
   custom progress + arrows in brand style. Drag-to-scroll.
   ==================================================== */
.slider {
  position: relative;
  z-index: 2; /* above .chapter__num so the giant roman numeral never covers cards */
  margin-top: 8px;
}
.slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* reserves height so layout is stable while images stream in */
  min-height: 380px;
  /* keyboard-focus padding without clipping */
  padding: 8px 0;
}
.slider__viewport::-webkit-scrollbar { display: none; height: 0; width: 0; }
.slider__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.slider__viewport.is-dragging * {
  pointer-events: none;
}
.slider__track {
  display: flex;
  gap: 28px;
  padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-inline-end:   max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.slider__item {
  flex: 0 0 clamp(260px, 28vw, 360px);
  scroll-snap-align: start;
  min-width: 0;
}

/* HUD — sits in the container, aligned to design grid */
.slider__hud {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 56px;
  color: var(--ink);
}
.slider__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
  min-width: 80px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.slider__count [data-slider-current] { color: var(--accent); font-weight: 500; }
.slider__count em {
  font-style: italic;
  color: var(--mute);
  opacity: 0.5;
  font-size: 18px;
  font-weight: 300;
}
.slider__count [data-slider-total] { color: var(--mute); }

.slider__progress {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.slider__progress-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: var(--accent);
  transition: width .4s var(--ease-out-expo);
  transform-origin: left center;
  border-radius: 2px;
}
html[dir="rtl"] .slider__progress-fill {
  left: auto; right: 0;
  transform-origin: right center;
}

.slider__arrows {
  display: flex;
  gap: 10px;
  margin-inline-start: auto;
}
.slider__arrow {
  width: 52px; height: 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--ink);
  transition: background .35s var(--ease-out-expo),
              color .35s var(--ease-out-expo),
              border-color .35s var(--ease-out-expo),
              opacity .35s var(--ease-out-expo),
              transform .35s var(--ease-out-expo);
}
.slider__arrow svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out-expo); }
.slider__arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.slider__arrow[data-slider-prev]:hover:not(:disabled) svg { transform: translateX(-3px); }
.slider__arrow[data-slider-next]:hover:not(:disabled) svg { transform: translateX(3px); }
.slider__arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}
html[dir="rtl"] .slider__arrow svg { transform: scaleX(-1); }
html[dir="rtl"] .slider__arrow[data-slider-prev]:hover:not(:disabled) svg { transform: scaleX(-1) translateX(-3px); }
html[dir="rtl"] .slider__arrow[data-slider-next]:hover:not(:disabled) svg { transform: scaleX(-1) translateX(3px); }

/* ====================================================
   GLOBAL CUSTOM SCROLLBAR — editorial, warm, slim.
   Cream-soft track with a hairline rule, ink thumb floating
   on a cream collar so it reads as a pill, terracotta on hover.
   Matches the page's quiet-luxury palette — no neo-brutalism.
   ==================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--bg-soft);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: var(--bg-soft);
  border-left: 1px solid var(--line);
}
html[dir="rtl"] ::-webkit-scrollbar-track {
  border-left: 0;
  border-right: 1px solid var(--line);
}
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 3px solid var(--bg-soft);
  border-radius: 999px;
  background-clip: padding-box;
  min-height: 60px;
  transition: background .35s var(--ease-out-expo);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--accent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: var(--bg-soft); }

/* ====================================================
   TOP SCROLL-PROGRESS BAR — a 2px terracotta→honey rule
   pinned to the very top of the viewport, fills as you read.
   Sits above the nav so it tracks the whole document, not
   just the section under the nav. Editorial reading cue.
   ==================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 110; /* above .nav (100), below cursor (9000) */
  background: rgba(28, 24, 21, 0.06);
  pointer-events: none;
  overflow: hidden;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
html[dir="rtl"] .scroll-progress__bar {
  transform-origin: right center;
}

/* ====================================================
   PRODUCT CARD — used inside the slider track
   ==================================================== */
.prod__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-warm);
}
.prod__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out-expo), filter 1.6s var(--ease-out-expo);
  filter: saturate(0.85) contrast(1.03);
}
.prod:hover .prod__media img { transform: scale(1.04); filter: saturate(0.95) contrast(1.05); }
/* film vignette + warm wash so the four shots cohere as one set */
.prod__media::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 95% at 50% 60%, rgba(28,24,21,0) 65%, rgba(28,24,21,0.20) 100%),
    linear-gradient(180deg, rgba(242,237,229,0.04) 0%, rgba(156,90,60,0.06) 100%);
  mix-blend-mode: multiply;
}
.prod__media::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='pg'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23pg)'/></svg>");
  background-size: 180px;
  opacity: 0.10;
  mix-blend-mode: overlay;
}
.prod__meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 20px 4px 0;
  gap: 12px;
}
.prod__cat {
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--mute);
  margin-bottom: 6px;
}
.prod__name {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.prod__price {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
}
.prod__price span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--mute);
  margin-left: 6px;
}

/* ====================================================
   ATELIER — pinned horizontal scroll
   ==================================================== */
.atelier {
  background: var(--ink);
  color: #F2EDE5;
  overflow: hidden;
}
.atelier__pin {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
}
.atelier__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.atelier__panel {
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  padding: 120px var(--gutter) 100px;
  align-items: center;
}
.atelier__media {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 70vh;
  overflow: hidden;
  border-radius: 2px;
}
.atelier__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) contrast(1.08) brightness(0.92);
  transform: scale(1.06);
  transition: transform 2s var(--ease-out-expo);
}
.atelier__panel.is-in .atelier__media img { transform: scale(1.0); }
/* warm-tone overlay so every panel feels of one piece against the ink backdrop */
.atelier__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 90% at 50% 50%, rgba(20,17,15,0) 65%, rgba(20,17,15,0.5) 100%),
    linear-gradient(180deg, rgba(20,17,15,0.05) 0%, rgba(156,90,60,0.10) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.atelier__caption { max-width: 460px; }
.atelier__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 237, 229, 0.55);
  margin-bottom: 36px;
}
.atelier__num {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.15em;
  color: var(--accent-2);
  margin-bottom: 20px;
}
.atelier__caption h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(48px, 5.2vw, 92px);
  line-height: 1.02;
  color: #F2EDE5;
  margin-bottom: 28px;
  letter-spacing: -0.015em;
}
.atelier__caption p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(242, 237, 229, 0.78);
  max-width: 40ch;
}
html[dir="rtl"] .atelier__panel { direction: rtl; }

.atelier__hud {
  position: absolute;
  bottom: 32px; left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; gap: 24px;
  color: rgba(242, 237, 229, 0.55);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 3;
}
.atelier__hud-num { min-width: 80px; }
.atelier__hud-bar {
  flex: 1; height: 1px;
  background: rgba(242, 237, 229, 0.12);
  position: relative; overflow: hidden;
}
.atelier__hud-bar span {
  position: absolute; left: 0; top: 0;
  height: 100%; width: 0;
  background: var(--accent-2);
  transition: width .2s linear;
}
.atelier__hud-hint { opacity: 0.6; }

/* ====================================================
   HERITAGE
   ==================================================== */
.heritage {
  padding: 200px 0;
  background: var(--bg-soft);
  overflow: hidden;
}
.heritage__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 90px;
  align-items: center;
}
.heritage__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  will-change: transform;
}
.heritage__media img {
  width: 100%; height: 115%; object-fit: cover;
  transform: translateY(-7%);
  filter: saturate(0.85) contrast(1.06) sepia(0.06);
}
.heritage__media::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 95% at 50% 60%, rgba(28,24,21,0) 65%, rgba(28,24,21,0.22) 100%);
  mix-blend-mode: multiply;
}
.heritage__tag {
  position: absolute; left: 24px; bottom: 24px;
  display: flex; gap: 8px;
  padding: 10px 18px;
  background: rgba(242, 237, 229, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.heritage__text { max-width: 560px; }
.heritage__text .lead {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 40px 0 24px;
}
.heritage__text p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.heritage__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.heritage__stats > div { display: flex; flex-direction: column; gap: 6px; }
.heritage__stats strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
}
.heritage__stats span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ====================================================
   EDITORIAL
   ==================================================== */
.editorial {
  position: relative;
  height: 92vh;
  min-height: 680px;
  overflow: hidden;
  background: var(--night);
}
.editorial__media {
  position: absolute;
  top: -10%; left: 0; right: 0; bottom: -10%;
  will-change: transform;
}
.editorial__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.12) brightness(0.84) sepia(0.12);
}
.editorial::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    /* halation top-right — sunset bloom */
    radial-gradient(ellipse at 82% 22%, rgba(212, 167, 122, 0.22) 0%, rgba(212, 167, 122, 0) 40%),
    /* darkening for legibility */
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.62) 100%),
    linear-gradient(90deg, rgba(28,24,21,0.70) 0%, rgba(28,24,21,0.18) 50%, rgba(28,24,21,0.0) 100%);
  pointer-events: none;
}

/* Ramadan crescent — floats in the night sky on the right.
   Honey-warm, with a soft outer glow so it reads as luminous, not flat.
   GSAP drives the actual transform values for the entry + drift. */
.editorial__moon {
  position: absolute;
  top: clamp(48px, 9vh, 110px);
  right: clamp(40px, 7vw, 140px);
  width: clamp(56px, 7vw, 108px);
  height: clamp(56px, 7vw, 108px);
  z-index: 2;
  color: var(--accent-2);
  display: block;
  filter:
    drop-shadow(0 0 16px rgba(212, 167, 122, 0.55))
    drop-shadow(0 0 38px rgba(212, 167, 122, 0.28));
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
html[dir="rtl"] .editorial__moon {
  right: auto;
  left: clamp(40px, 7vw, 140px);
}
.editorial__overlay {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #F2EDE5;
}
.editorial__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 7.6vw, 140px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 20px 0 28px;
  color: #F2EDE5;
  max-width: 14ch;
}
.editorial__title em {
  font-style: italic; font-weight: 400;
  color: var(--accent-2);
}
.editorial__overlay p {
  font-size: 16px;
  color: rgba(242, 237, 229, 0.82);
  margin-bottom: 36px;
  max-width: 480px;
}

/* ====================================================
   WORDS / Testimonials
   ==================================================== */
.words {
  padding: 200px 0;
  background: var(--bg);
}
.words__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 72px;
}
.word {
  position: relative;
  padding: 56px 36px 44px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-soft);
  transition: transform .6s var(--ease-out-expo), border-color .6s var(--ease-out-expo),
              background .6s var(--ease-out-expo);
}
.word::before {
  content: '\201C';
  position: absolute;
  top: 12px; left: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
}
.word:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  background: var(--bg);
}
.word blockquote {
  position: relative;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 32px;
  font-weight: 400;
}
.word figcaption {
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.word__name { color: var(--ink); font-weight: 500; }
.word__city { color: var(--mute); }

/* ====================================================
   CTA / NEWSLETTER
   ==================================================== */
.cta {
  padding: 200px 0 220px;
  background: var(--bg-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before, .cta::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  opacity: 0.28;
  filter: blur(90px);
}
.cta::before { background: var(--accent-2); top: -100px; left: 8%; }
.cta::after  { background: var(--accent);   bottom: -120px; right: 8%; }
.cta > * { position: relative; z-index: 2; }

.cta__form {
  display: flex;
  max-width: 540px;
  margin: 64px auto 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  transition: border-color .35s var(--ease-out-expo);
}
.cta__form:focus-within { border-color: var(--ink); }
.cta__form input {
  flex: 1;
  height: 48px;
  padding: 0 22px;
  background: transparent;
  border: 0; outline: 0;
  font: inherit; font-size: 15px;
  color: var(--ink);
}
.cta__form input::placeholder { color: var(--mute); }
.cta__form button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 26px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background .35s var(--ease-out-expo);
}
.cta__form button:hover { background: var(--accent); }
.cta__form button svg { width: 16px; height: 16px; }
html[dir="rtl"] .cta__form button svg { transform: scaleX(-1); }

.cta__fine {
  max-width: 480px;
  margin: 0 auto;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mute);
  line-height: 1.7;
}

/* ====================================================
   FOOTER
   ==================================================== */
.foot {
  background: var(--ink);
  color: rgba(242, 237, 229, 0.7);
  padding: 120px 0 36px;
}
.foot__top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(242, 237, 229, 0.12);
}
.foot__brand { display: flex; flex-direction: column; gap: 24px; }
.foot__mark { width: 56px; height: 56px; fill: var(--bg); }
.foot__brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: #F2EDE5;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.foot__h {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #F2EDE5;
  margin-bottom: 22px;
  font-weight: 500;
}
.foot__cols ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot__cols a {
  font-size: 14px;
  color: rgba(242, 237, 229, 0.65);
  transition: color .3s var(--ease-out-expo);
}
.foot__cols a:hover { color: #F2EDE5; }

.foot__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 36px;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.foot__bottom a {
  color: rgba(242, 237, 229, 0.65);
  transition: color .3s var(--ease-out-expo);
}
.foot__bottom a:hover { color: #F2EDE5; }

/* ====================================================
   REVEAL initial states
   ==================================================== */
.reveal-up { opacity: 0; transform: translateY(28px); will-change: transform, opacity; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto auto; }
  /* keep adaptive padding/gap — DON'T overwrite with fixed values */
  .hero__top, .hero__middle, .hero__bottom { max-width: 100%; }
  /* On narrower screens the text stacks over the top of the image,
     so wash from top instead of side. */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(242, 237, 229, 0.92) 0%,
        rgba(242, 237, 229, 0.5) 28%,
        rgba(242, 237, 229, 0.0) 55%);
  }
  .hero__img { object-position: 65% 32%; }
  html[dir="rtl"] .hero__img { object-position: 35% 32%; }
  .essence__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .slider__hud { gap: 18px; padding-top: 40px; }
  .slider__arrow { width: 44px; height: 44px; }
  .heritage__inner { grid-template-columns: 1fr; gap: 48px; }
  .heritage__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .heritage__stats strong { font-size: 32px; }
  .words__grid { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; gap: 56px; }
  .foot__bottom { flex-direction: column; gap: 12px; }
  .atelier__panel { grid-template-columns: 1fr; gap: 36px; padding: 90px 24px 80px; }
  .atelier__media { max-height: 50vh; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .essence__grid { grid-template-columns: 1fr; }
  .slider__item { flex: 0 0 78vw; }
  .slider__hud { flex-wrap: wrap; }
  .slider__progress { order: 3; flex: 1 0 100%; margin-top: 8px; }
  /* hero title clamp is already adaptive via min(vw, vh) — no override needed */
  /* scroll cue sits at the centered bottom and can overlap the meta strip
     at narrow widths — hide it on mobile (the page is short enough that
     scrolling is obvious without a cue). */
  .hero__scroll-cue { display: none; }
  .cta__form { flex-direction: column; padding: 8px; border-radius: 20px; }
  .cta__form input { height: 52px; }
  .cta__form button { width: 100%; justify-content: center; }
}