/* ════════════════════════════════════════════════════════════
   ADHAM HOME — Full landing page
   Light luxury theme · dark-brown typography on warm cream
   LTR/RTL via CSS logical properties
════════════════════════════════════════════════════════════ */

:root {
  --cream:      #f6f1e9;                       /* page background        */
  --cream-soft: rgba(246, 241, 233, .92);      /* legibility shade       */
  --card:       #fdfaf5;                       /* card surface           */
  --brown:      #3b2a1e;                       /* dark brown — main text */
  --brown-dim:  rgba(59, 42, 30, .72);         /* secondary text         */
  --brass:      #b08a4a;                       /* decorative gold/brass  */
  --bronze:     #7d5e2a;                       /* text-safe accent (AA)  */
  --hairline:   rgba(59, 42, 30, .16);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui:      "Inter", system-ui, sans-serif;
  --font-ar:      "Tajawal", system-ui, sans-serif;

  /* Scrub runway: hero pins for this many vh of scrolling */
  --scrub-vh: 400;

  /* Driven by JS every frame: 0 → 1 scrub progress */
  --p: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Arabic: swap the whole type system */
html[dir="rtl"] body { font-family: var(--font-ar); }
html[dir="rtl"] .hero__title,
html[dir="rtl"] .section__title,
html[dir="rtl"] .cta__title { font-family: var(--font-ar); font-weight: 500; }

::selection { background: var(--brown); color: var(--cream); }

/* ── Fixed header ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 4vw, 3.5rem);
  /* Soft cream fade so the header stays readable over the video */
  background: linear-gradient(to bottom, rgba(246, 241, 233, .85), transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--brown);
}

.brand__mark {
  inline-size: 10px;
  block-size: 10px;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
  transition: background .4s ease;
}
.brand:hover .brand__mark { background: var(--brass); }

.brand__name {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .34em;
}

.lang-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(59, 42, 30, .35);
  border-radius: 999px;
  color: var(--brown);
  font-family: var(--font-ar);       /* label is "عربي" or "EN" */
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: 0;                 /* label is Arabic in EN mode — no tracking */
  padding: .45rem 1.15rem;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
html[dir="rtl"] .lang-toggle { letter-spacing: .06em; }  /* label is Latin "EN" */
.lang-toggle:hover,
.lang-toggle:focus-visible {
  border-color: var(--brown);
  background: var(--brown);
  color: var(--cream);
  /* Transparent outline: invisible normally, repainted visible in forced-colors */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Inverted header while a dark section (stats/footer) is underneath */
.site-header--on-dark {
  background: linear-gradient(to bottom, rgba(59, 42, 30, .88), transparent);
}
.site-header--on-dark .brand { color: var(--cream); }
.site-header--on-dark .lang-toggle {
  color: var(--cream);
  border-color: rgba(246, 241, 233, .45);
}
.site-header--on-dark .lang-toggle:hover,
.site-header--on-dark .lang-toggle:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--brown);
}

/* ── Hero: runway + sticky stage ──────────────────────────── */
.hero {
  /* The scroll runway. The stage stays pinned for its whole height,
     then the page naturally releases into the next section. */
  block-size: calc(var(--scrub-vh) * 1vh);
  position: relative;
}

.hero__stage {
  position: sticky;
  top: 0;
  block-size: 100vh;
  block-size: 100svh;                /* fallback */
  block-size: 100dvh;                /* tracks the live mobile viewport */
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* GPU-composite the video layer for smooth scrubbing */
  will-change: contents;
  transform: translateZ(0);
}

/* Legibility: cream gradient behind the dark-brown copy.
   Strong (.85+) up to ~48% of the viewport so eyebrow/subtitle
   keep AA contrast over any video frame. */
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--cream-soft) 0%, rgba(246, 241, 233, .85) 48%, rgba(246, 241, 233, .4) 68%, transparent 84%),
    linear-gradient(to bottom, rgba(246, 241, 233, .55) 0%, transparent 22%);
}

/* ── Overlay copy ─────────────────────────────────────────── */
.hero__copy {
  position: absolute;
  inset-inline-start: clamp(1.25rem, 6vw, 5.5rem);
  inset-block-end: clamp(4.5rem, 12vh, 8rem);
  max-inline-size: min(640px, 86vw);
  z-index: 2;

  /* Parallax fade-out as the user scrubs (–p is set by JS).
     Copy is fully gone by ~45% progress so the video takes over. */
  opacity: calc(1 - var(--p) * 2.2);
  transform: translateY(calc(var(--p) * -60px));
  pointer-events: none;
}
.hero__copy > * { pointer-events: auto; }
/* Once faded out: drop from tab order + accessibility tree too */
.hero__copy.is-hidden { visibility: hidden; }

.eyebrow {
  color: var(--bronze);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .85rem; }  /* tracking severs Arabic joins */

.hero__eyebrow { margin-block-end: 1.1rem; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--brown);
  text-wrap: balance;
  margin-block-end: 1.25rem;
}
html[dir="rtl"] .hero__title { line-height: 1.3; letter-spacing: 0; }

.hero__subtitle {
  color: var(--brown-dim);
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  font-weight: 400;
  line-height: 1.75;
  max-inline-size: 46ch;
  margin-block-end: 2.25rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 1px solid var(--brown);
  color: var(--brown);
  background: transparent;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color .45s ease, border-color .45s ease;
  z-index: 0;
}
html[dir="rtl"] .btn { letter-spacing: 0; font-size: .95rem; }

/* Dark-brown sweep fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brown);
  transform: scaleX(0);
  transform-origin: 0 50%;           /* sweeps from the start edge */
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
  z-index: -1;
}
html[dir="rtl"] .btn::before { transform-origin: 100% 50%; }
.btn:hover, .btn:focus-visible {
  color: var(--cream);
  /* Transparent outline: invisible normally, repainted visible in forced-colors */
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

/* Solid variant (primary CTA) — bronze sweep keeps cream text ≥ 4.5:1 */
.btn--solid { background: var(--brown); color: var(--cream); }
.btn--solid::before { background: var(--bronze); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--cream); border-color: var(--bronze); }

.btn__arrow {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  transition: transform .45s ease;
}
html[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

/* ── Scroll hint (fades out on first scrub) ───────────────── */
.hero__hint {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline-end: clamp(1.25rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  opacity: calc(1 - var(--p) * 8);   /* gone after ~12% progress */
}

.hero__hint-text {
  color: var(--brown-dim);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
html[dir="rtl"] .hero__hint-text {
  writing-mode: horizontal-tb;       /* vertical Arabic is illegible */
  letter-spacing: 0;
  font-size: .78rem;
}

.hero__hint-line {
  inline-size: 1px;
  block-size: 56px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  animation: hint-drop 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
  transform-origin: top;
}
@keyframes hint-drop {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Scrub progress rail ──────────────────────────────────── */
.hero__progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: rgba(59, 42, 30, .12);
}
.hero__progress-fill {
  block-size: 100%;
  inline-size: 100%;
  background: var(--brass);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
html[dir="rtl"] .hero__progress-fill { transform-origin: 100% 50%; }

/* Fallback when the hero video fails to load: JS collapses the
   runway to one viewport and adds this class — hide scrub chrome */
.hero--static .hero__hint,
.hero--static .hero__progress { display: none; }

/* ── Shared section shell ─────────────────────────────────── */
.section {
  padding: clamp(4.5rem, 10vw, 8.5rem) clamp(1.5rem, 6vw, 5.5rem);
}

.section__head {
  max-inline-size: 720px;
  margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__eyebrow { margin-block-end: 1rem; }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.12;
  text-wrap: balance;
  margin-block-end: 1.1rem;
}
html[dir="rtl"] .section__title { line-height: 1.4; }

.section__text {
  color: var(--brown-dim);
  line-height: 1.8;
  max-inline-size: 56ch;
}
.section__head--center .section__text { margin-inline: auto; }

/* ── Collection: module cards ─────────────────────────────── */
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-inline-size: 1200px;
  margin-inline: auto;
}

.module-card {
  --card-pad: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: var(--card-pad);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .5s ease, box-shadow .5s ease;
}
.module-card:hover {
  transform: translateY(-6px);
  border-color: var(--brass);
  box-shadow: 0 24px 48px -24px rgba(59, 42, 30, .25);
}

/* Full-bleed photo at the top of a card (services) */
.module-card__media {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.module-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.module-card:hover .module-card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .module-card:hover .module-card__media img { transform: none; }
}

.module-card__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--brass);
  line-height: 1;
  margin-block-end: 1.4rem;
}

.module-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-block-end: .7rem;
}
html[dir="rtl"] .module-card__title { letter-spacing: 0; }
/* Arabic-Indic digits aren't covered by the display serif */
html[dir="rtl"] .module-card__num,
html[dir="rtl"] .step__num { font-family: var(--font-ar); }

.module-card__text {
  color: var(--brown-dim);
  font-size: .92rem;
  line-height: 1.75;
}

/* ── Gallery: 3D parallax unfurling showcase ──────────────── */
/* JS springs scroll progress into two custom props on .gallery:
   --u (banner growth, 0→1) and --v (matrix unfurl, 0→1).
   Everything else is CSS calc() reading those props. */
.gallery {
  --gal-vh: 500;                       /* scroll runway length */
  --u: 0;
  --v: 0;
  block-size: calc(var(--gal-vh) * 1vh);
  position: relative;
  background: #16120e;                 /* warm near-black */
}

.gallery__stage {
  position: sticky;
  top: 0;
  block-size: 100vh;
  block-size: 100svh;
  block-size: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rounded card that grows to fullscreen over --u */
.gallery__banner {
  position: relative;
  overflow: hidden;
  background: #0d0b08;
  border-style: solid;
  border-color: rgba(176, 138, 74, .35);
  border-width: calc(4px * (1 - var(--u)));
  border-radius: calc(48px * (1 - var(--u)));
  inline-size: calc(90vw + 10vw * var(--u));
  block-size: calc(80vh + 20vh * var(--u));
  max-inline-size: 1920px;
}

/* Heading overlay — visible on the card, gone once unfurling starts */
.gallery__head {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1rem;
  padding: 1.5rem;
  pointer-events: none;
  opacity: calc(1 - var(--v) * 4);
}

.gallery__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  line-height: 1.12;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
html[dir="rtl"] .gallery__title { font-family: var(--font-ar); font-weight: 500; line-height: 1.4; }

.gallery__persp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  pointer-events: none;
}

/* Ambient vignette so the matrix melts into darkness at the edges */
.gallery__vignette,
.gallery__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 100px 150px -50px rgba(0, 0, 0, 1),
    inset 0 -100px 150px -50px rgba(0, 0, 0, 1),
    inset 150px 0 150px -50px rgba(0, 0, 0, 1),
    inset -150px 0 150px -50px rgba(0, 0, 0, 1);
}

/* The 3D matrix: tilted deep in space, unfurls flat over --v */
.gallery__matrix {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 120vw;
  block-size: 150vh;
  transform-style: preserve-3d;
  will-change: transform;
  transform:
    translateZ(calc(-800px * (1 - var(--v))))
    rotateX(calc(25deg - 21deg * var(--v)))
    rotateY(calc(-45deg + 37deg * var(--v)))
    rotateZ(calc(15deg - 13deg * var(--v)));
}

.gallery__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  flex: none;
  inline-size: 22vw;
  min-inline-size: 200px;
  will-change: transform;
  pointer-events: auto;
}
/* Parallax drift — each column travels at its own speed/direction */
.gallery__col--1 { transform: translateY(calc(-40% * var(--v))); }
.gallery__col--2 { transform: translateY(calc(-40% + 50% * var(--v))); }
.gallery__col--3 { transform: translateY(calc(-40% * var(--v))); }
.gallery__col--4 { transform: translateY(calc(-30% + 50% * var(--v))); }

.gallery__card {
  block-size: clamp(200px, 28vw, 400px);
  flex: none;
  background: #111;
  transition: transform .3s ease;
}
.gallery__card:hover { transform: scale(1.02); }

.gallery__card img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  opacity: .8;
  transition: opacity .3s ease;
  -webkit-user-drag: none;
}
.gallery__card:hover img { opacity: 1; }

/* ── Compare: before/after slider (vanilla SideBySideSlide) ── */
.compare {
  max-inline-size: 1000px;
  margin-inline: auto;
}

.compare__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--card);
  aspect-ratio: 4 / 3;                 /* matches the 1400×1050 photos */
  cursor: col-resize;
  /* horizontal drags scrub, vertical still scrolls, pinch stays native */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.compare__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

/* Clipped top layer — clip-path is physical (left-anchored) by design */
.compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--cream);
  box-shadow: 0 0 8px rgba(59, 42, 30, .35);
  transform: translateX(-50%);
  pointer-events: none;                /* pointer input is handled on the frame */
}
.compare__divider:focus-visible {
  /* Transparent: invisible normally, repainted visible in forced-colors */
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* Visible focus ring rides on the handle circle */
.compare__divider:focus-visible + .compare__handle {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.compare__handle {
  position: absolute;
  top: 50%;
  /* Follows --cx (set by JS) but never slides off the frame edge */
  left: clamp(26px, var(--cx, 50%), calc(100% - 26px));
  transform: translate(-50%, -50%);
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--brown);
  box-shadow: 0 4px 16px rgba(59, 42, 30, .3);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.compare__handle svg { inline-size: 20px; block-size: 20px; }

/* Chips use physical left/right on purpose: the revealed "before"
   area is always the physical left, in LTR and RTL alike */
.compare__chip {
  position: absolute;
  top: 1rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(59, 42, 30, .78);
  color: var(--cream);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
html[dir="rtl"] .compare__chip { letter-spacing: 0; font-size: .82rem; }
.compare__chip--before { left: 1rem; }
.compare__chip--after { right: 1rem; }

/* ── Stats band (inverted, dark brown) ────────────────────── */
/* ⚠️ Numbers are placeholders — set the real figures */
.stats {
  background: var(--brown);
  color: var(--cream);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5.5rem);
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 500;
  color: var(--brass);
  line-height: 1.1;
}
html[dir="rtl"] .stat__value { font-family: var(--font-ar); }

.stat__label {
  margin-block-start: .5rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246, 241, 233, .75);
}
html[dir="rtl"] .stat__label { letter-spacing: 0; font-size: .95rem; }

/* ── Steps ────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-inline-size: 1200px;
  margin-inline: auto;
}

.step {
  border-block-start: 1px solid var(--brown);
  padding-block-start: 1.5rem;
}

.step__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bronze);
  letter-spacing: .2em;
  margin-block-end: .9rem;
}

.step__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-block-end: .6rem;
}

.step__text {
  color: var(--brown-dim);
  font-size: .92rem;
  line-height: 1.75;
}

/* ── CTA / contact ────────────────────────────────────────── */
.cta {
  text-align: center;
  border-block-start: 1px solid var(--hairline);
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  max-inline-size: 22ch;
  margin-inline: auto;
  text-wrap: balance;
  margin-block: 1rem 2.5rem;
}
html[dir="rtl"] .cta__title { line-height: 1.4; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--brown);
  color: var(--cream);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5.5rem) 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.footer .brand { color: var(--cream); }

.footer__tagline {
  color: rgba(246, 241, 233, .72);
  font-size: .95rem;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

.footer__social a {
  color: rgba(246, 241, 233, .78);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .3s ease;
}
html[dir="rtl"] .footer__social a { letter-spacing: .05em; font-size: .9rem; }
.footer__social a:hover { color: var(--cream); }

.footer__rights {
  color: rgba(246, 241, 233, .72);
  font-size: .78rem;
  border-block-start: 1px solid rgba(246, 241, 233, .14);
  padding-block-start: 1.5rem;
  inline-size: 100%;
}

/* ── Scroll-reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children inside grids */
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }

/* ── Language-swap fade ───────────────────────────────────── */
[data-i18n] { transition: opacity .28s ease; }
.i18n-fading [data-i18n] { opacity: 0; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__hint-line { animation: none; }
  .hero__copy { transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .module-card, .module-card:hover { transform: none; }
  /* Gallery: skip the unfurl — short static section in its final state */
  .gallery { --gal-vh: 120; --u: 1; --v: 1; }
  .gallery__card:hover { transform: none; }
}

/* ── Small screens (phones — Android + iOS) ───────────────── */
@media (max-width: 640px) {
  .hero__copy {
    inset-inline: 1.25rem;
    inset-block-end: 5rem;
  }
  .hero__hint { display: none; }
  .cta__actions .btn { inline-size: 100%; }

  /* Header: tighten the brand tracking so it never crowds the toggle */
  .brand__name { letter-spacing: .22em; font-size: .74rem; }
  .site-header { padding-inline: 1.1rem; }

  /* Gallery: shorter runway (5 screens of scroll is too much on a
     phone), narrower/denser columns so the flat grid reads well, and
     softer 3D angles so columns don't fly off a narrow viewport */
  .gallery { --gal-vh: 320; }
  .gallery__matrix {
    inline-size: 165vw;
    gap: .7rem;
    transform:
      translateZ(calc(-520px * (1 - var(--v))))
      rotateX(calc(18deg - 15deg * var(--v)))
      rotateY(calc(-32deg + 27deg * var(--v)))
      rotateZ(calc(10deg - 9deg * var(--v)));
  }
  .gallery__col {
    inline-size: 40vw;
    min-inline-size: 130px;
    gap: .7rem;
  }
  .gallery__card { block-size: clamp(150px, 42vw, 240px); }
  /* Weaker edge vignette — the huge spreads swallow a small screen */
  .gallery__banner::after {
    box-shadow:
      inset 0 60px 80px -40px rgba(0, 0, 0, 1),
      inset 0 -60px 80px -40px rgba(0, 0, 0, 1),
      inset 70px 0 80px -40px rgba(0, 0, 0, 1),
      inset -70px 0 80px -40px rgba(0, 0, 0, 1);
  }

  /* Compare: give the tall photo a touch more height on a phone */
  .compare__frame { aspect-ratio: 3 / 4; }
  .compare__chip { font-size: .64rem; padding: .3rem .7rem; }
  html[dir="rtl"] .compare__chip { font-size: .74rem; }
}

/* Very narrow phones (≤380px, e.g. iPhone SE / small Androids) */
@media (max-width: 380px) {
  .brand__name { letter-spacing: .16em; }
  .lang-toggle { padding: .4rem .9rem; }
  .gallery__col { inline-size: 44vw; min-inline-size: 118px; }
}

/* Coarse pointers (touch): no hover states to rely on, so keep the
   gallery images at full opacity instead of the desktop .8 → 1 hover */
@media (hover: none) {
  .gallery__card img { opacity: .92; }
  .gallery__card:hover img { opacity: .92; }
  .gallery__card:hover { transform: none; }
  .module-card:hover { transform: none; box-shadow: none; }
  .module-card:hover .module-card__media img { transform: none; }
}