/* ==========================================================================
   MENUISIER SAAD — DESIGN SYSTEM & STYLES
   Concept: an architectural monograph about a workshop. Numbered plates,
   hairlines, a carpenter's rule as recurring motif, and reveals that open
   like cabinet doors. Living reference: /design-system.html

   All spacing uses logical properties (inline/block) so the Arabic layout is
   truly mirrored rather than patched.
   ========================================================================== */

/* Fallback faces shaped like the web fonts, so nothing jumps when the fonts arrive */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 89%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }

/* 1. TOKENS ================================================================ */
:root {
  /* Brand palette */
  --ivory: #F5F1E9;
  --beige: #D8C8B2;
  --charcoal: #242321;
  --walnut: #73543D;
  --white: #FFFFFF;

  /* Derived: only tints of the palette, used for lines and quiet text */
  --ivory-deep: #EBE4D6;
  --ink-soft: #5B5650;
  --on-dark-soft: #BDB4A6;
  --line: rgba(36, 35, 33, .18);
  --line-strong: rgba(36, 35, 33, .42);
  --line-on-dark: rgba(245, 241, 233, .22);
  --error: #9A2B1C;

  /* Typefaces */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;

  /* Type scale (fluid) */
  --fs-label: .75rem;
  --fs-small: .875rem;
  --fs-body: clamp(1rem, .97rem + .14vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .36vw, 1.375rem);
  --fs-h4: clamp(1.375rem, 1.2rem + .7vw, 1.875rem);
  --fs-h3: clamp(1.75rem, 1.45rem + 1.35vw, 2.75rem);
  --fs-h2: clamp(2.25rem, 1.65rem + 2.7vw, 4.25rem);
  --fs-h1: clamp(2.875rem, 1.75rem + 5vw, 6.5rem);
  --fs-hero: clamp(2.6rem, 1.45rem + 6.75vw, 7.75rem);

  --lh-tight: 1.04;
  --lh-head: 1.1;
  --lh-body: 1.65;
  --track-display: -.018em;
  --track-label: .13em;
  --case-label: uppercase;
  --display-weight: 300;

  /* Space */
  --gutter: clamp(16px, 3.4vw, 52px);
  --gap: clamp(12px, 1.6vw, 24px);
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);
  --nav-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-door: cubic-bezier(.76, 0, .24, 1);
  --slide-from: -1;
}

@media (min-width: 1000px) { :root { --nav-h: 84px; } }

/* Arabic is a different typographic system, not a translated one:
   no tracking or capitals (they break letter joins), a larger optical size,
   and more generous line height for the diacritics. */
:root[lang="ar"] {
  --font-display: "Markazi Text", "Noto Naskh Arabic", "Geeza Pro", serif;
  --font-body: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --fs-label: .875rem;
  --fs-small: .9375rem;
  --fs-body: clamp(1.0625rem, 1.03rem + .16vw, 1.125rem);
  --fs-lead: clamp(1.25rem, 1.15rem + .42vw, 1.5rem);
  --fs-h4: clamp(1.625rem, 1.4rem + .9vw, 2.25rem);
  --fs-h3: clamp(2rem, 1.65rem + 1.6vw, 3.25rem);
  --fs-h2: clamp(2.625rem, 1.9rem + 3.1vw, 5rem);
  --fs-h1: clamp(3.25rem, 2rem + 5.4vw, 7rem);
  --fs-hero: clamp(2.9rem, 1.7rem + 6.2vw, 7.5rem);
  --lh-tight: 1.16;
  --lh-head: 1.24;
  --lh-body: 1.9;
  --track-display: 0;
  --track-label: 0;
  --case-label: none;
  --display-weight: 400;
  --slide-from: 1;
}

/* Tamazight is written in Tifinagh, left to right like French. Latin words (the brand,
   WhatsApp) keep the Latin faces; Tifinagh letters fall through to Noto Sans Tifinagh.
   Tifinagh has no italic or capitals, so emphasis becomes colour, as in Arabic. Its letters
   are as tall as capitals, so headings are set a little smaller with more air between lines. */
:root[lang="zgh"] {
  --font-display: "Newsreader", "Noto Sans Tifinagh", "Newsreader Fallback", Georgia, serif;
  --font-body: "Hanken Grotesk", "Noto Sans Tifinagh", "Hanken Fallback", Arial, sans-serif;
  --fs-h3: clamp(1.5rem, 1.25rem + 1.15vw, 2.375rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3.5rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 3.9vw, 5.25rem);
  --fs-hero: clamp(2.1rem, 1.2rem + 5.2vw, 6rem);
  --lh-tight: 1.16;
  --lh-head: 1.24;
  --lh-body: 1.8;
  --track-display: 0;
  --track-label: .04em;
}

/* 2. BASE ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--nav-h) + 1rem); }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--beige); }
::selection { background: var(--walnut); color: var(--ivory); }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }

.skip {
  position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 200;
  padding: .75rem 1.25rem; background: var(--charcoal); color: var(--ivory);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 3. TYPE ================================================================== */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--track-display);
  line-height: var(--lh-head);
  text-wrap: balance;
}
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: var(--fs-h4); font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.2; }
em { font-style: italic; }
:root[lang="ar"] em, :root[lang="zgh"] em { font-style: normal; color: var(--walnut); }
:root[lang="ar"] .on-dark em, :root[lang="zgh"] .on-dark em { color: var(--beige); }
.lead { font-size: var(--fs-lead); line-height: 1.5; }
:root[lang="ar"] .lead { line-height: 1.75; }
.soft { color: var(--ink-soft); }
.on-dark .soft { color: var(--on-dark-soft); }
.measure { max-width: 62ch; }
.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: var(--case-label);
  line-height: 1.4;
}

/* Visible placeholder for missing real-world information */
.ph {
  background: rgba(216, 200, 178, .5);
  color: inherit;
  padding: .04em .32em;
  border-block-end: 1px dashed var(--walnut);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.on-dark .ph { background: rgba(245, 241, 233, .12); border-color: var(--beige); }

/* 4. LAYOUT ================================================================ */
.wrap { padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.on-dark { background: var(--charcoal); color: var(--ivory); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.sec-head { display: grid; gap: 1.25rem; margin-block-end: clamp(2.5rem, 5vw, 5.5rem); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .sec-head > .label { grid-column: 1 / 3; padding-block-start: .85em; }
  .sec-head > .sec-head__title { grid-column: 3 / 11; }
}

/* 5. COMPONENTS ============================================================ */

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.375rem; line-height: 1; letter-spacing: var(--track-display); white-space: nowrap; }
:root[lang="ar"] .brand { font-size: 1.75rem; }
/* The brand is Latin on Tamazight pages too: keep the French letter spacing so it looks the same */
:root[lang="zgh"] .brand { letter-spacing: -.018em; }
.brand svg { width: 24px; height: 24px; flex: none; }

/* Navigation */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-inline: var(--gutter);
  background: var(--ivory);
  transition: transform .5s var(--ease), box-shadow .3s;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__links { display: none; }
.nav__end { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 1000px) {
  .nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
  .nav__toggle { display: none !important; }
}
.nav__link { position: relative; display: inline-block; padding-block: .4rem; font-size: var(--fs-small); }
.nav__link::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: .1rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: var(--origin-end, right); transition: transform .5s var(--ease);
}
:root { --origin-start: left; --origin-end: right; }
:root[lang="ar"] { --origin-start: right; --origin-end: left; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: var(--origin-start); }

.lang { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); line-height: 1; }
.lang__sep { width: 1px; height: .9em; background: var(--line-strong); }
.lang a { padding-block: .6rem; padding-inline: .15rem; opacity: .72; transition: opacity .25s; }
.lang a:hover { opacity: 1; }
.lang [aria-current] { font-weight: 600; }
.lang [lang="ar"] { font-family: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif; }
.lang [lang="zgh"] { font-family: "Noto Sans Tifinagh", "Ebrima", sans-serif; }
.lang__short { display: none; }
/* Phones: three full language names don't fit beside the brand, so the header shows FR · ع · ⵣ.
   The full name stays for screen readers, and the menu keeps the full names. */
@media (max-width: 639.98px) {
  .nav .lang__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav .lang__short { display: inline; }
  .nav .lang a, .nav .lang [aria-current] { min-width: 1.75rem; text-align: center; }
}
@media (max-width: 459.98px) {
  .nav .lang { gap: .3rem; }
  .nav .lang a, .nav .lang [aria-current] { min-width: 1.5rem; padding-inline: 0; }
}
/* Narrowest phones (320 px): the language choice moves into the menu only */
@media (max-width: 374.98px) { .nav .lang { display: none; } }

.nav__toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-size: var(--fs-small); }
.nav__bars { display: grid; gap: 6px; width: 24px; }
.nav__bars i { display: block; height: 1px; background: currentColor; }
.nav__bars i:last-child { width: 62%; justify-self: end; }
/* The word "Menu" shows only from 640 px, where the full language names fit beside it */
@media (max-width: 639.98px) {
  .nav__toggle > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav__toggle { min-width: 44px; justify-content: flex-end; }
}
@media (max-width: 459.98px) {
  .nav { gap: .75rem; }
  .nav__end { gap: .75rem; }
  .brand { font-size: 1.25rem; gap: .45rem; }
  .brand svg { width: 22px; height: 22px; }
}

/* Full-screen menu */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--charcoal); color: var(--ivory);
  transform: translateX(calc(var(--slide-from) * -100%));
  transition: transform .7s var(--ease-door), visibility .7s;
}
.menu[open] { display: flex; flex-direction: column; }
.menu.is-open { transform: none; }
.menu::backdrop { background: transparent; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding-inline: var(--gutter); flex: none; }
.menu__close { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: var(--fs-small); }
.menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--gutter); }
.menu__list li { border-block-start: 1px solid var(--line-on-dark); }
.menu__list li:last-child { border-block-end: 1px solid var(--line-on-dark); }
.menu__list a { display: flex; align-items: baseline; gap: 1rem; padding-block: .65rem; font-family: var(--font-display); font-size: clamp(2.25rem, 11vw, 3.5rem); font-weight: var(--display-weight); line-height: 1.15; }
.menu__num { font-family: var(--font-body); font-size: var(--fs-label); opacity: .6; min-width: 1.6em; }
.menu__foot { flex: none; padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; font-size: var(--fs-small); }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 52px; padding: .75rem 1.5rem;
  background: var(--charcoal); color: var(--ivory);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.2; text-align: center;
  overflow: hidden; isolation: isolate; cursor: pointer;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--walnut);
  transform: scaleX(0); transform-origin: var(--origin-end); transition: transform .6s var(--ease-door);
}
.btn:hover::before { transform: scaleX(1); transform-origin: var(--origin-start); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .5s var(--ease); }
.btn:hover .ico-move { transform: translateX(calc(var(--slide-from) * -4px)); }
.btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--line:hover { color: var(--ivory); }
.on-dark .btn--line { box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.btn--light { background: var(--ivory); color: var(--charcoal); }
.btn--light:hover { color: var(--ivory); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

.link {
  display: inline-flex; align-items: center; gap: .55rem; padding-block: .4rem;
  font-size: var(--fs-small); font-weight: 500;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 100% 1px; background-position: 0 100%;
  transition: background-size .55s var(--ease);
}
:root[lang="ar"] .link { background-position: 100% 100%; }
.link:hover { background-size: 28% 1px; }
.link svg { width: 16px; height: 16px; flex: none; transition: transform .5s var(--ease); }
.link:hover svg { transform: translateX(calc(var(--slide-from) * -4px)); }
.flip { display: inline-block; }
:root[lang="ar"] svg.flip { scale: -1 1; }

/* Figures */
.fig { position: relative; overflow: hidden; background: var(--ivory-deep); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.ratio-wide { aspect-ratio: 8 / 5; }
.ratio-tall { aspect-ratio: 4 / 5; }
.ratio-photo { aspect-ratio: 3 / 2; }
.ratio-pano { aspect-ratio: 21 / 9; }
.tag {
  position: absolute; inset-block-end: .625rem; inset-inline-start: .625rem; z-index: 2;
  max-width: calc(100% - 1.25rem);
  padding: .3em .6em;
  background: rgba(245, 241, 233, .93); color: var(--charcoal);
  font-size: .6875rem; font-weight: 500; line-height: 1.35;
}
:root[lang="ar"] .tag { font-size: .8125rem; }
.tag--placeholder { background: var(--charcoal); color: var(--ivory); }

/* The carpenter's rule: major tick every 10 minor ticks */
.rule {
  display: block; height: 14px; color: inherit; opacity: .55;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 100px);
  background-size: 100% 6px, 100% 14px;
  background-repeat: no-repeat;
}
:root[lang="ar"] .rule {
  background-image:
    repeating-linear-gradient(270deg, currentColor 0 1px, transparent 1px 10px),
    repeating-linear-gradient(270deg, currentColor 0 1px, transparent 1px 100px);
}

/* Page rule: a vertical measure at the screen edge that tracks reading position */
.pagerule { display: none; }
@media (min-width: 1200px) and (hover: hover) {
  .pagerule {
    display: block; position: fixed; inset-block: 0; inset-inline-end: 0; width: 12px; z-index: 40; pointer-events: none;
    color: var(--walnut); mix-blend-mode: normal;
    background-image: repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 12px);
    background-size: 5px 100%; background-repeat: no-repeat; background-position: var(--rule-side, right) top;
    opacity: .38;
  }
  :root[lang="ar"] .pagerule { --rule-side: left; }
  .pagerule i { position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px; background: var(--walnut); transform: translateY(calc(var(--p, 0) * (100vh - 2px))); }
}

/* Mobile action bar: WhatsApp always within thumb reach */
.mbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  background: var(--charcoal); color: var(--ivory);
  padding-block-end: env(safe-area-inset-bottom);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.mbar.is-on { transform: none; }
.mbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; font-size: var(--fs-small); font-weight: 500; }
.mbar a + a { border-inline-start: 1px solid var(--line-on-dark); }
.mbar a:first-child { background: var(--walnut); }
.mbar svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .mbar { display: none; } }

.wafloat { display: none; }
@media (min-width: 900px) {
  .wafloat {
    position: fixed; inset-block-end: 1.75rem; inset-inline-end: 2rem; z-index: 45;
    display: inline-flex; align-items: center; height: 56px; padding-inline: 16px;
    background: var(--walnut); color: var(--ivory); overflow: hidden;
    box-shadow: 0 10px 28px -12px rgba(36, 35, 33, .55);
    transition: background .3s;
  }
  .wafloat:hover { background: var(--charcoal); }
  .wafloat svg { width: 24px; height: 24px; flex: none; }
  .wafloat span { display: block; max-width: 0; opacity: 0; white-space: nowrap; font-size: var(--fs-small); font-weight: 500; transition: max-width .6s var(--ease), opacity .3s, margin .6s var(--ease); }
  .wafloat:hover span, .wafloat:focus-visible span { max-width: 14rem; opacity: 1; margin-inline-start: .7rem; }
}

/* Opening doors: first-visit loading moment on the home page */
.doors {
  position: fixed; inset: 0; z-index: 100; display: flex; pointer-events: none;
  animation: doors-gone .01s linear 1.6s forwards;
}
.doors__leaf { flex: 1; background: var(--walnut); position: relative; }
.doors__leaf::after { content: ""; position: absolute; inset-block: 42%; width: 3px; background: var(--beige); }
.doors__leaf:first-child { animation: leaf-a .95s var(--ease-door) .55s forwards; }
.doors__leaf:last-of-type { animation: leaf-b .95s var(--ease-door) .55s forwards; }
.doors__leaf:first-child::after { inset-inline-end: 16px; }
.doors__leaf:last-of-type::after { inset-inline-start: 16px; }
.doors__seam { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: rgba(36, 35, 33, .5); animation: fade-out .2s linear .55s forwards; }
.doors__name {
  position: absolute; inset-block-start: 1.5rem; inset-inline: 0; text-align: center;
  color: var(--ivory); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem;
  animation: fade-out .3s linear .4s forwards;
}
@keyframes leaf-a { to { transform: translateX(calc(var(--slide-from) * 101%)); } }
@keyframes leaf-b { to { transform: translateX(calc(var(--slide-from) * -101%)); } }
@keyframes doors-gone { to { visibility: hidden; } }
@keyframes fade-out { to { opacity: 0; } }
.returning .doors { display: none; }

/* 6. HOME SECTIONS ========================================================= */

/* Hero */
.hero { --intro: 1.05s; position: relative; padding-block-start: var(--nav-h); }
.returning .hero { --intro: .1s; }
.hero__eyebrow { padding: .75rem var(--gutter) 1rem; }
.hero__fig { aspect-ratio: 4 / 4.1; }
.hero__fig img { animation: settle 2.2s var(--ease) calc(var(--intro) - .4s) both; }
.hero__fig .tag { inset-block-start: .625rem; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: .625rem; }
.hero__title {
  position: relative; z-index: 2;
  margin-block-start: -3.35em; padding-inline-start: var(--gutter);
  font-size: var(--fs-hero); line-height: var(--lh-tight);
}
/* Each line is its own ivory strip: the stepped edge cuts into the photo like a
   finger joint, and keeps the headline legible on any image. */
.hero__line { display: block; width: fit-content; max-width: 100%; background: var(--ivory); padding-inline-end: .2em; padding-block-end: .06em; overflow: hidden; margin-inline-start: calc(var(--gutter) * -1); padding-inline-start: var(--gutter); }
.hero__line + .hero__line { margin-block-start: -1px; }
.hero__line > span { display: block; animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--intro) + var(--i) * 90ms); }
.hero__foot { padding: 1.5rem var(--gutter) 2.25rem; display: grid; gap: 1.5rem; animation: appear .9s var(--ease) calc(var(--intro) + .35s) both; }
.hero__lead { max-width: 34em; }
.hero__cta { display: grid; gap: .625rem; }
.hero__rule { margin-inline: var(--gutter); color: var(--charcoal); }
@keyframes settle { from { transform: scale(1.09); } to { transform: none; } }
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (min-width: 560px) { .hero__cta { grid-auto-flow: column; justify-content: start; } .hero__fig { aspect-ratio: 16 / 11; } }
@media (min-width: 1000px) {
  .hero {
    min-height: min(100svh, 1120px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto auto;
    column-gap: var(--gap);
    padding-inline: var(--gutter);
  }
  .hero__eyebrow { grid-column: 1 / 5; grid-row: 1; padding: 1.25rem 0 0; }
  .hero__fig { grid-column: 5 / -1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 0; margin-inline-end: calc(var(--gutter) * -1); position: relative; }
  .hero__fig img { position: absolute; inset: 0; }
  .hero__title { grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0; padding: 0; }
  .hero__line { margin-inline-start: 0; padding-inline-start: 0; padding-inline-end: .24em; }
  .hero__foot { grid-column: 1 / -1; grid-row: 3; padding: 1.75rem 0 1.5rem; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .hero__lead { grid-column: 1 / 5; }
  .hero__cta { grid-column: 5 / -1; }
  .hero__rule { grid-column: 1 / -1; grid-row: 4; margin: 0; }
}

/* Intro / manifesto */
.intro { padding-block: var(--section); }
.intro__statement { font-size: var(--fs-h3); line-height: 1.22; margin-block: 1rem 3rem; }
:root[lang="fr"] .intro__statement::first-line { font-style: normal; }
.intro__fig { aspect-ratio: 4 / 5; margin-block-end: 1.5rem; }
.intro__body { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 900px) {
  .intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--gutter); }
  .intro > .label { grid-column: 1 / 3; padding-block-start: .85em; }
  .intro__statement { grid-column: 3 / 12; margin-block: 0 clamp(3rem, 7vw, 7.5rem); text-indent: 3.2em; }
  :root[lang="ar"] .intro__statement { text-indent: 2.4em; }
  .intro__fig { grid-column: 3 / 8; grid-row: 2; margin: 0; }
  .intro__body { grid-column: 9 / 13; grid-row: 2; align-self: end; }
}
.intro:not(:has(+ *)) { padding-block-end: var(--section); }
@media (max-width: 899.98px) { .intro { padding-inline: var(--gutter); } }

/* Services index */
.svc { border-block-start: 1px solid var(--line-on-dark); position: relative; }
.svc__item { border-block-end: 1px solid var(--line-on-dark); }
.svc__row {
  display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: baseline; gap: .5rem;
  padding-block: 1.15rem; min-height: 44px;
}
.svc__num { font-size: var(--fs-label); opacity: .65; }
.svc__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--display-weight); line-height: 1.15; letter-spacing: var(--track-display); transition: transform .7s var(--ease), color .3s; }
.svc__mark { align-self: center; width: 22px; height: 22px; opacity: 0; transform: translateX(calc(var(--slide-from) * 10px)); transition: opacity .3s, transform .6s var(--ease); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.svc__panel-in { overflow: hidden; min-height: 0; }
.svc__item.is-active .svc__panel { grid-template-rows: 1fr; }
.svc__fig { aspect-ratio: 3 / 2; margin-block-end: 1rem; }
.svc__short { margin-block-end: .75rem; color: var(--on-dark-soft); }
.svc__panel-body { padding-block-end: 1.5rem; }
.svc__item.is-active .svc__name { color: var(--beige); }
@media (min-width: 1000px) {
  .svc { padding-inline-end: 46%; min-height: 40rem; }
  .svc::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 44%; width: 1px; background: var(--line-on-dark); }
  .svc__row { padding-block: 1.05rem; }
  .svc__item:hover .svc__name, .svc__item.is-active .svc__name { transform: translateX(calc(var(--slide-from) * -14px)); }
  .svc__item.is-active .svc__mark { opacity: 1; transform: none; }
  .svc__panel { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 40%; display: block; visibility: hidden; transition: visibility .7s; }
  .svc__panel-in { overflow: visible; }
  .svc__item.is-active .svc__panel { visibility: visible; z-index: 2; }
  .svc__fig { aspect-ratio: 4 / 5; clip-path: inset(0 0 0 100%); transition: clip-path .85s var(--ease-door); margin-block-end: 1.25rem; }
  :root[lang="ar"] .svc__fig { clip-path: inset(0 100% 0 0); }
  .svc__item.is-active .svc__fig, :root[lang="ar"] .svc__item.is-active .svc__fig { clip-path: inset(0); }
  .svc__fig img { transform: scale(1.1); transition: transform 1.3s var(--ease); }
  .svc__item.is-active .svc__fig img { transform: none; }
  .svc__panel-body { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .5s var(--ease); }
  .svc__item.is-active .svc__panel-body { opacity: 1; transform: none; transition-delay: .25s; }
}
.svc-foot { margin-block-start: 2rem; }

/* Project plates */
.plates-note { max-width: 56ch; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); padding-inline-start: 1rem; border-inline-start: 2px solid var(--walnut); font-size: var(--fs-small); }
@media (min-width: 900px) { .plates-note { margin-inline-start: calc((100% + var(--gap)) / 12 * 2); } }
.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.plate { grid-column: 1 / -1; position: relative; }
.plate.is-out { display: none; }
/* Two cards per row, never overlapping columns, so no card is left alone beside an empty half
   page. The second card of a pair drops a little lower to keep the staggered rhythm. */
@media (min-width: 760px) {
  .plate[data-slot="wt-a"] { grid-column: 1 / 8; }
  .plate[data-slot="wt-b"] { grid-column: 9 / 13; margin-block-start: clamp(3rem, 8vw, 8rem); }
  .plate[data-slot="tw-a"] { grid-column: 1 / 5; }
  .plate[data-slot="tw-b"] { grid-column: 6 / 13; margin-block-start: clamp(2rem, 6vw, 6rem); }
  .plate[data-slot="ww-a"] { grid-column: 1 / 7; }
  .plate[data-slot="ww-b"] { grid-column: 7 / 13; margin-block-start: clamp(2rem, 6vw, 6rem); }
  .plate[data-slot="tt-a"] { grid-column: 2 / 6; }
  .plate[data-slot="tt-b"] { grid-column: 8 / 12; margin-block-start: clamp(3rem, 8vw, 8rem); }
  .plate[data-slot="w-solo"] { grid-column: 3 / 11; }
  .plate[data-slot="t-solo"] { grid-column: 5 / 9; }
  .plate[data-alt="1"][data-slot$="-b"] { margin-block-start: 0; }
  .plate[data-alt="1"][data-slot$="-a"] { margin-block-start: clamp(2.5rem, 7vw, 7rem); }
}
.plate__link { display: block; }
.plate__fig img { transition: transform 1.4s var(--ease); }
.plate__link:hover .plate__fig img { transform: scale(1.025); }
.plate__cap { display: grid; grid-template-columns: auto 1fr auto; column-gap: .9rem; align-items: baseline; padding-block-start: .75rem; border-block-end: 1px solid var(--line); padding-block-end: .75rem; }
.plate__num { font-size: var(--fs-label); color: var(--ink-soft); white-space: nowrap; }
.plate__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--display-weight); line-height: 1.2; }
.plate__cat { font-size: var(--fs-small); color: var(--ink-soft); }
.plate__zoom {
  position: absolute; inset-block-start: .625rem; inset-inline-end: .625rem; z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: rgba(245, 241, 233, .94); color: var(--charcoal);
  transition: background .3s, color .3s;
}
.plate__zoom:hover { background: var(--charcoal); color: var(--ivory); }
.plate__zoom svg { width: 18px; height: 18px; }
.plates-foot { margin-block-start: clamp(2.5rem, 5vw, 5rem); display: flex; justify-content: flex-end; }

/* Process: steps measured along a rule */
.process { background: var(--beige); }
.process__rule { position: relative; height: 14px; margin-block-end: 1.75rem; display: none; }
.process__rule .rule { opacity: .75; }
.process__fill { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 100%; height: 2px; background: var(--walnut); transform: scaleX(var(--fill, 0)); transform-origin: var(--origin-start); transition: transform 1.8s var(--ease-door); }
.process__steps { display: grid; }
.step { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: .5rem; padding-block: 1.25rem; border-block-start: 1px solid var(--line-strong); }
.step__num { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--display-weight); line-height: 1; color: var(--walnut); grid-row: 1 / 3; }
.step__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--display-weight); line-height: 1.2; }
.step__text { margin-block-start: .5rem; font-size: var(--fs-small); line-height: 1.6; color: #3A3734; }
:root[lang="ar"] .step__text { line-height: 1.85; }
@media (min-width: 1000px) {
  .process__rule { display: block; }
  .process__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); }
  .step { display: block; border: 0; padding: 0; margin-block-start: calc(var(--i) * 1.6rem); }
  .step__num { display: block; margin-block-end: 1.25rem; font-size: var(--fs-h2); }
}

/* Why */
.why { position: relative; overflow: hidden; background: var(--walnut); color: var(--ivory); }
.why::before { content: ""; position: absolute; inset-block-start: -8%; inset-inline-start: -12%; width: min(90vw, 980px); aspect-ratio: 1; background: url("../img/rings-light.svg") center / contain no-repeat; pointer-events: none; }
.why__in { position: relative; display: grid; gap: 2.5rem; }
.why__title { font-size: var(--fs-h2); margin-block-start: 1.25rem; }
.why__item { padding-block: 1.25rem; border-block-start: 1px solid rgba(245, 241, 233, .32); }
.why__item h3 { font-size: var(--fs-h4); line-height: 1.2; }
.why__item p { margin-block-start: .5rem; font-size: var(--fs-small); color: #EFE7DA; line-height: 1.6; }
:root[lang="ar"] .why__item p { line-height: 1.85; }
@media (min-width: 1000px) {
  .why__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .why__head { grid-column: 1 / 6; position: sticky; inset-block-start: calc(var(--nav-h) + 2rem); align-self: start; }
  .why__list { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .why__item:nth-child(even) { margin-block-start: 3rem; }
  .why__item { padding-block-end: 2.75rem; }
}

/* Testimonials */
.voices { display: grid; gap: var(--gap); }
.voice { padding: clamp(1.25rem, 2.4vw, 2.25rem); background: var(--white); display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; min-height: 15rem; }
.voice blockquote { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--display-weight); line-height: 1.3; }
.voice__who { font-size: var(--fs-small); display: grid; gap: .35rem; justify-items: start; }
.voice--pending { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.voice__pending { color: var(--walnut); }
@media (min-width: 900px) {
  .voices { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .voice:nth-child(3n+1) { grid-column: 1 / 6; }
  .voice:nth-child(3n+2) { grid-column: 6 / 10; margin-block-start: 3.5rem; }
  .voice:nth-child(3n) { grid-column: 10 / 13; margin-block-start: -2rem; }
}

/* Closing call to action + footer */
.cta { padding-block: var(--section) clamp(3rem, 6vw, 6rem); }
.cta__title { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.cta__side { display: grid; gap: 1.25rem; margin-block-start: 2rem; justify-items: start; }
.cta__actions { display: grid; gap: .625rem; width: 100%; }
@media (min-width: 560px) { .cta__actions { grid-auto-flow: column; justify-content: start; width: auto; } }
@media (min-width: 1000px) {
  .cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .cta__title { grid-column: 1 / 9; }
  .cta__side { grid-column: 9 / 13; margin: 0; }
  .cta__actions { grid-auto-flow: row; width: 100%; justify-content: stretch; }
}
.foot { padding-block-end: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .foot { padding-block-end: 1.5rem; } }
.foot__cols { display: grid; gap: 2rem; padding-block: 2.5rem; border-block-start: 1px solid var(--line-on-dark); grid-template-columns: 1fr 1fr; font-size: var(--fs-small); }
.foot__cols h2 { font-family: var(--font-body); font-weight: 500; margin-block-end: .75rem; color: var(--on-dark-soft); }
.foot__cols li + li { margin-block-start: .35rem; }
.foot__cols a:not(.link) { display: inline-block; padding-block: .15rem; }
.foot__cols a:not(.link):hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__cols .link { margin-block-start: .5rem; }
.foot__cols p { margin-block-start: .35rem; }
.foot__cols > :nth-child(n+3) { grid-column: 1 / -1; }
address { font-style: normal; }
@media (min-width: 900px) { .foot__cols { grid-template-columns: 2fr 2fr 3fr 3fr; } .foot__cols > :nth-child(n+3) { grid-column: auto; } }
.foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-block: 1rem; border-block-start: 1px solid var(--line-on-dark); font-size: .8125rem; color: var(--on-dark-soft); }

/* 7. INNER PAGES =========================================================== */
.phead { padding: calc(var(--nav-h) + clamp(2rem, 6vw, 6rem)) var(--gutter) clamp(2rem, 4vw, 4rem); }
.phead__title { font-size: var(--fs-h1); line-height: var(--lh-tight); margin-block: 1rem 1.5rem; }
.phead__lead { max-width: 40em; }
@media (min-width: 900px) {
  .phead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .phead > .label { grid-column: 1 / -1; }
  .phead__title { grid-column: 1 / 10; margin-block-end: 0; }
  .phead__lead { grid-column: 8 / 13; margin-block-start: clamp(2rem, 4vw, 4rem); }
}
.phead > * { animation: appear .8s var(--ease) both; }
.phead__title { animation-delay: .06s; }
.phead__lead { animation-delay: .16s; }
.page-rule { margin-inline: var(--gutter); }
.crumb { font-size: var(--fs-small); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .5rem; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }

/* About */
.bio { padding-block: var(--section) 0; display: grid; gap: 2rem; }
.bio__fig { aspect-ratio: 4 / 5; }
.bio__cap { margin-block-start: .625rem; font-size: var(--fs-small); }
.bio__name { font-size: var(--fs-h2); margin-block-end: 1.25rem; }
.bio__text { display: grid; gap: 1rem; }
.facts { margin-block-start: 2.5rem; border-block-start: 1px solid var(--line-strong); }
.facts div { display: grid; gap: .25rem; padding-block: .85rem; border-block-end: 1px solid var(--line); }
.facts dt { font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 620px) { .facts div { grid-template-columns: 11rem 1fr; } }
@media (min-width: 900px) {
  .bio { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
  .bio__media { grid-column: 1 / 6; }
  .bio__content { grid-column: 7 / 13; padding-block-start: 2rem; }
}
.values { border-block-start: 1px solid var(--line-strong); }
.value { display: grid; gap: .5rem; padding-block: 1.5rem; border-block-end: 1px solid var(--line); transition: padding .7s var(--ease); }
.value h3 { font-size: var(--fs-h3); line-height: 1.15; }
.value__num { font-size: var(--fs-label); color: var(--ink-soft); }
@media (min-width: 900px) {
  .value { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding-block: 2rem; }
  .value__num { grid-column: 1 / 3; }
  .value h3 { grid-column: 3 / 8; }
  .value p { grid-column: 8 / 13; }
  .value:hover { padding-inline-start: 1rem; }
}
.about-duo { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .about-duo { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .about-duo > :first-child { grid-column: 1 / 9; }
  .about-duo > :last-child { grid-column: 9 / 13; }
}

/* Services page */
.svc-index { display: flex; flex-wrap: wrap; gap: .375rem .5rem; padding: 1.5rem var(--gutter) 0; font-size: var(--fs-small); }
.svc-index a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: .85rem; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.svc-index a:hover { background: var(--charcoal); color: var(--ivory); }
.spread { padding-block: clamp(3rem, 6vw, 6.5rem); border-block-end: 1px solid var(--line); scroll-margin-block-start: var(--nav-h); }
.spread:last-of-type { border-block-end: 0; }
.spread__fig { margin-block-end: 1.5rem; }
.spread__num { color: var(--ink-soft); }
.spread__title { font-size: var(--fs-h2); margin-block: .75rem 1rem; line-height: 1.08; }
.spread__list { margin-block: 1.5rem; border-block-start: 1px solid var(--line-strong); }
.spread__list li { padding-block: .55rem; border-block-end: 1px solid var(--line); font-size: var(--fs-small); }
.spread__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-block-start: 1.5rem; }
@media (min-width: 900px) {
  .spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .spread__fig { margin: 0; grid-row: 1; }
  .spread__body { grid-row: 1; }
  .spread:nth-of-type(3n+1) .spread__fig { grid-column: 1 / 8; aspect-ratio: 8 / 5.6; }
  .spread:nth-of-type(3n+1) .spread__body { grid-column: 9 / 13; }
  .spread:nth-of-type(3n+2) .spread__fig { grid-column: 8 / 13; aspect-ratio: 4 / 5; }
  .spread:nth-of-type(3n+2) .spread__body { grid-column: 2 / 7; align-self: end; }
  .spread:nth-of-type(3n) .spread__fig { grid-column: 3 / 9; aspect-ratio: 1 / 1; }
  .spread:nth-of-type(3n) .spread__body { grid-column: 9 / 13; padding-inline-start: var(--gap); }
}
@media (max-width: 899.98px) { .spread__fig { aspect-ratio: 3 / 2; } }

/* Filter chips */
.filters { display: flex; gap: .375rem; overflow-x: auto; scrollbar-width: none; padding: 1.5rem var(--gutter); margin-block-end: clamp(1rem, 3vw, 3rem); scroll-snap-type: x proximity; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding-inline: 1rem; font-size: var(--fs-small); box-shadow: inset 0 0 0 1px var(--line); scroll-snap-align: start; transition: background .3s, color .3s; }
.filter sup { font-size: .75em; opacity: .7; line-height: 1; }
.filter:hover { box-shadow: inset 0 0 0 1px var(--charcoal); }
.filter[aria-pressed="true"] { background: var(--charcoal); color: var(--ivory); }
.plates.is-changing { opacity: 0; transition: opacity .2s; }
.plates { transition: opacity .35s; }

/* Project detail */
.pro-head { padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem)) var(--gutter) clamp(1.5rem, 3vw, 3rem); }
.pro-title { font-size: var(--fs-h1); line-height: var(--lh-tight); margin-block: 1.25rem 1rem; max-width: 16em; }
.pro-note { margin-block-start: 1.25rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--walnut); font-size: var(--fs-small); max-width: 60ch; }
.pro-cover { position: relative; cursor: zoom-in; }
.pro-body { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 5rem); }
.pro-meta { border-block-start: 1px solid var(--line-strong); font-size: var(--fs-small); }
.pro-meta div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .625rem; border-block-end: 1px solid var(--line); }
.pro-meta dt { color: var(--ink-soft); }
.pro-text { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .pro-body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
  .pro-meta { grid-column: 1 / 5; align-self: start; }
  .pro-text { grid-column: 6 / 12; }
}
.pro-gallery { display: grid; gap: var(--gap); }
.pro-shot { position: relative; display: block; width: 100%; cursor: zoom-in; }
.pro-shot img { transition: transform 1.2s var(--ease); }
.pro-shot:hover img { transform: scale(1.02); }
@media (min-width: 760px) {
  .pro-gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .pro-shot:nth-child(odd) { grid-column: 1 / 8; }
  .pro-shot:nth-child(even) { grid-column: 8 / 13; }
  .pro-shot:only-child { grid-column: 3 / 11; }
}
.pro-next { display: block; padding-block: clamp(2.5rem, 6vw, 6rem); border-block-start: 1px solid var(--line); margin-block-start: clamp(3rem, 6vw, 6rem); }
.pro-next__title { font-size: var(--fs-h2); line-height: 1.1; margin-block-start: .5rem; display: flex; align-items: center; gap: .4em; transition: transform .7s var(--ease); }
.pro-next:hover .pro-next__title { transform: translateX(calc(var(--slide-from) * -14px)); }
.pro-next__title svg { width: .7em; height: .7em; flex: none; }
.pro-loading { min-height: 70vh; display: grid; place-items: center; padding: var(--nav-h) var(--gutter) 0; text-align: center; }
.pro-loading__rule { width: min(320px, 70vw); margin-block-end: 1rem; animation: measure 1.4s var(--ease-door) infinite alternate; }
@keyframes measure { from { clip-path: inset(0 85% 0 0); } to { clip-path: inset(0); } }

/* Before / after */
.ba-wrap { padding-block: clamp(1rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem); }
.ba-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-block-end: 1rem; }
.ba { --pos: 50%; position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: var(--ivory-deep); touch-action: pan-y; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
:root[lang="ar"] .ba__before { clip-path: inset(0 0 0 calc(100% - var(--pos))); }
.ba__line { position: absolute; inset-block: 0; inset-inline-start: var(--pos); width: 2px; margin-inline-start: -1px; background: var(--ivory); box-shadow: 0 0 0 1px rgba(36, 35, 33, .25); pointer-events: none; }
.ba__knob { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 48px; height: 48px; margin-block-start: -24px; margin-inline-start: -24px; display: grid; place-items: center; background: var(--charcoal); color: var(--ivory); }
.ba__knob svg { width: 22px; height: 22px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba__range:focus-visible ~ .ba__line .ba__knob { outline: 2px solid var(--beige); outline-offset: 3px; }
.ba__tag { position: absolute; inset-block-start: .625rem; padding: .25em .6em; background: rgba(245, 241, 233, .94); font-size: .75rem; font-weight: 500; pointer-events: none; }
.ba__tag--before { inset-inline-start: .625rem; }
.ba__tag--after { inset-inline-end: .625rem; }

/* Lightbox */
.lb { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--charcoal); color: var(--ivory); }
.lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: appear-flat .35s var(--ease); }
.lb::backdrop { background: var(--charcoal); }
@keyframes appear-flat { from { opacity: 0; } to { opacity: 1; } }
.lb__top, .lb__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem var(--gutter); font-size: var(--fs-small); min-height: 60px; }
.lb__stage { position: relative; min-height: 0; display: grid; place-items: center; padding-inline: var(--gutter); }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .3s; }
.lb__img.is-loading { opacity: 0; }
.lb__spin { position: absolute; width: min(220px, 50vw); opacity: 0; color: var(--beige); }
.lb__img.is-loading + .lb__spin { opacity: .8; animation: measure 1.1s var(--ease-door) infinite alternate; }
.lb__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 48px; min-height: 48px; }
.lb__btn svg { width: 22px; height: 22px; }
.lb__nav { display: flex; gap: .25rem; }
.lb__nav .lb__btn { box-shadow: inset 0 0 0 1px var(--line-on-dark); transition: background .3s, color .3s; }
.lb__nav .lb__btn:hover { background: var(--ivory); color: var(--charcoal); }
.lb__cap { flex: 1; min-width: 0; }

/* Contact */
.contact { display: grid; gap: 3rem; padding-block: clamp(1.5rem, 4vw, 4rem) var(--section); }
.ways { border-block-start: 1px solid var(--line-strong); }
.way { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem 1rem; padding-block: 1.1rem; border-block-end: 1px solid var(--line); }
.way__label { grid-column: 1; font-size: var(--fs-small); color: var(--ink-soft); }
.way__value { grid-column: 1; font-size: var(--fs-h4); font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.25; overflow-wrap: anywhere; }
.way--static .way__value { font-size: var(--fs-lead); }
.way svg { grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; transition: transform .5s var(--ease); }
a.way:hover svg { transform: translateX(calc(var(--slide-from) * -4px)); }
.way--primary { background: var(--walnut); color: var(--ivory); padding-inline: 1.25rem; border: 0; transition: background .3s; }
.way--primary:hover { background: var(--charcoal); }
.way--primary .way__label { color: var(--ivory); opacity: .85; }
@media (min-width: 1000px) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); align-items: start; }
  .ways { grid-column: 1 / 6; position: sticky; inset-block-start: calc(var(--nav-h) + 1.5rem); }
  .forms { grid-column: 7 / 13; }
}

.forms__title { font-size: var(--fs-h3); margin-block-end: 1.25rem; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 1px var(--line-strong); margin-block-end: 2rem; }
.tab { min-height: 52px; font-size: var(--fs-small); font-weight: 500; transition: background .3s, color .3s; }
.tab[aria-selected="true"] { background: var(--charcoal); color: var(--ivory); }
.tab:not([aria-selected="true"]):hover { background: var(--ivory-deep); }

.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .25rem; align-content: start; }
.field > label, .field > .field__label { font-size: var(--fs-small); font-weight: 500; }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.field__hint { font-size: .8125rem; color: var(--ink-soft); line-height: 1.5; }
.input {
  width: 100%; min-height: 48px; padding: .6rem 0;
  background: transparent; border: 0; border-block-end: 1px solid var(--line-strong); border-radius: 0;
  font-size: max(16px, var(--fs-body)); line-height: 1.4; transition: border-color .25s, box-shadow .25s;
  appearance: none; -webkit-appearance: none;
}
.input::placeholder { color: #6F6A63; opacity: 1; }
.input:focus { outline: 0; border-color: var(--walnut); box-shadow: 0 1px 0 0 var(--walnut); }
.input:focus-visible { outline: 0; }
textarea.input { min-height: 7.5rem; resize: vertical; }
select.input {
  padding-inline-end: 1.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23242321' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
}
:root[lang="ar"] select.input { background-position: left center; }
input[type="tel"].input { direction: ltr; }
:root[lang="ar"] input[type="tel"].input { text-align: right; }
.field__err { color: var(--error); font-size: .875rem; line-height: 1.45; }
.field.is-invalid .input { border-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.drop { position: relative; display: grid; justify-items: center; gap: .4rem; padding: 1.5rem 1rem; text-align: center; box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; cursor: pointer; transition: background .3s; }
.drop:hover, .drop.is-over { background: var(--ivory-deep); }
.drop:focus-within { outline: 2px solid var(--walnut); outline-offset: 2px; }
.drop svg { width: 26px; height: 26px; color: var(--walnut); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop__t { font-weight: 500; font-size: var(--fs-small); }
.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .625rem; }
.thumb { position: relative; width: 84px; height: 84px; background: var(--ivory-deep); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 32px; height: 32px; display: grid; place-items: center; background: var(--charcoal); color: var(--ivory); }
.thumb button svg { width: 14px; height: 14px; }

.form__actions { display: grid; gap: .625rem; }
@media (min-width: 620px) { .form__actions { grid-template-columns: 1.3fr 1fr; } }
.form__alert { padding: .75rem 1rem; background: rgba(154, 43, 28, .09); color: var(--error); font-size: var(--fs-small); }
.form__privacy { font-size: .8125rem; color: var(--ink-soft); line-height: 1.55; }
.done { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); }
.done:focus { outline: 0; }
.done__mark { display: grid; place-items: center; width: 52px; height: 52px; background: var(--walnut); color: var(--ivory); }
.done__mark svg { width: 24px; height: 24px; }
.done__title { font-size: var(--fs-h3); }
.done__actions { display: flex; flex-wrap: wrap; gap: .625rem 1.25rem; align-items: center; }

/* Map */
.map { position: relative; }
.map__frame { display: block; width: 100%; height: clamp(320px, 52vw, 620px); border: 0; filter: grayscale(.85) sepia(.18) contrast(.96); transition: filter .6s; background: var(--ivory-deep); }
.map:hover .map__frame, .map:focus-within .map__frame { filter: none; }
.map__card { display: grid; gap: .5rem; justify-items: start; padding: 1.25rem var(--gutter); background: var(--ivory); }
.map__card .t-h4 { margin-block-end: .25rem; }
@media (min-width: 900px) {
  .map__card { position: absolute; inset-block-end: 2rem; inset-inline-start: var(--gutter); max-width: 24rem; padding: 1.5rem; }
}

/* 404 */
.nf { min-height: 86vh; display: grid; align-content: center; justify-items: start; gap: 1.5rem; padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem; }
.nf .rule { width: min(460px, 80%); }

/* 8. MOTION ================================================================ */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* The frame stays in place as a quiet panel while the image slides open inside it.
   The clip sits on the image, not the frame: a fully clipped element would never
   count as visible for the IntersectionObserver that triggers it. */
.js [data-reveal="door"] { opacity: 1; transform: none; }
.js [data-reveal="door"] > img { clip-path: inset(0 100% 0 0); transform: scale(1.1); transition: clip-path 1.25s var(--ease-door), transform 1.6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
:root[lang="ar"].js [data-reveal="door"] > img { clip-path: inset(0 0 0 100%); }
.js [data-reveal="door"].is-in > img, :root[lang="ar"].js [data-reveal="door"].is-in > img { clip-path: inset(0); transform: none; }
.js [data-reveal="door"] > .tag { opacity: 0; transition: opacity .6s linear .9s; }
.js [data-reveal="door"].is-in > .tag { opacity: 1; }
.js .step[data-reveal] { transition-delay: calc(var(--i, 0) * 120ms); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-parallax] img { scale: 1.12; animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { translate: 0 -4.5%; } to { translate: 0 4.5%; } }
  }
}

/* Cross-page transition: the new page slides in like a panel */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .4s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .8s var(--ease-door) both; }
  :root[lang="ar"]::view-transition-new(root) { animation-name: vt-in-rtl; }
  @keyframes vt-out { to { opacity: .35; transform: translateY(-14px); } }
  @keyframes vt-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
  @keyframes vt-in-rtl { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

  /* The same gesture where cross-document view transitions are missing (Firefox today):
     app.js fades the page before leaving, then the next page eases in from the reading side.
     Only opacity and transform, which Firefox animates smoothly. The page background stays
     ivory throughout, so there is never a white flash between the two pages. */
  .is-leaving body, .is-leaving dialog[open] { animation: pt-out .28s var(--ease) both; }
  .is-leaving main { animation: pt-lift .28s var(--ease) both; }
  .page-in body { animation: pt-fade .5s var(--ease) both; }
  .page-in main { animation: pt-slide .9s var(--ease) both; }
  @keyframes pt-out { to { opacity: 0; } }
  @keyframes pt-lift { to { transform: translateY(-14px); } }
  @keyframes pt-fade { from { opacity: 0; } }
  @keyframes pt-slide { from { transform: translateX(calc(var(--slide-from) * -56px)); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal="door"] { opacity: 1; transform: none; }
  .js [data-reveal="door"] > img, :root[lang="ar"].js [data-reveal="door"] > img { clip-path: none; transform: none; }
  .js [data-reveal="door"] > .tag { opacity: 1; }
  .doors { display: none; }
}

@media print {
  .nav, .mbar, .wafloat, .pagerule, .doors, .map, .forms { display: none !important; }
  .js [data-reveal], .js [data-reveal] > img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}