/* =============================================================================
   NFWD — design system
   Brand palette, typography, layout, components and motion.
   Everything is written with CSS logical properties so the same rules serve
   both the Arabic (RTL) and English (LTR) renderings without a mirrored sheet.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand — taken verbatim from the corporate identity guide */
  --cream:        #F9E8D8;
  --sand:         #C3AD95;
  --bronze:       #836852;
  --walnut:       #5A4533;
  --ink:          #3C3C3B;

  /* extended neutrals */
  --paper:        #FCF8F3;
  --paper-2:      #F5EDE3;
  --paper-3:      #EFE3D5;
  --espresso:     #241D17;
  --espresso-2:   #1A1512;
  --line:         rgba(90, 69, 51, .16);
  --line-soft:    rgba(90, 69, 51, .09);
  --line-dark:    rgba(249, 232, 216, .14);

  /* semantic */
  --bg:           var(--paper);
  --surface:      #FFFFFF;
  --text:         #2E2721;
  --text-soft:    #6B5D50;
  --text-faint:   #736455;
  --accent:       var(--bronze);
  --accent-deep:  var(--walnut);
  --gold:         #B08D57;

  --ok:           #4A7C59;
  --warn:         #B98A2E;
  --danger:       #A6432F;
  --info:         #4A6A80;

  /* type */
  --font-ar:      'Almarai', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Almarai', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', 'Almarai', Georgia, serif;

  --fs-xs:   clamp(.72rem, .70rem + .10vw, .80rem);
  --fs-sm:   clamp(.82rem, .79rem + .14vw, .92rem);
  --fs-base: clamp(.95rem, .91rem + .20vw, 1.06rem);
  --fs-md:   clamp(1.06rem, 1.00rem + .30vw, 1.22rem);
  --fs-lg:   clamp(1.25rem, 1.13rem + .55vw, 1.62rem);
  --fs-xl:   clamp(1.55rem, 1.30rem + 1.15vw, 2.40rem);
  --fs-2xl:  clamp(2.00rem, 1.55rem + 2.10vw, 3.60rem);
  --fs-3xl:  clamp(2.50rem, 1.70rem + 3.60vw, 5.20rem);

  --lh-tight: 1.18;
  --lh-snug:  1.42;
  --lh-body:  1.85;

  /* space */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem);

  --container: 1280px;
  --container-narrow: 860px;

  /* shape */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 32px;  --r-pill: 999px;

  /* elevation — warm-tinted, never neutral grey */
  --sh-1: 0 1px 2px rgba(58, 44, 32, .05), 0 2px 8px rgba(58, 44, 32, .04);
  --sh-2: 0 4px 12px rgba(58, 44, 32, .07), 0 12px 32px rgba(58, 44, 32, .06);
  --sh-3: 0 12px 28px rgba(58, 44, 32, .10), 0 32px 64px rgba(58, 44, 32, .08);
  --sh-glow: 0 0 0 1px rgba(176, 141, 87, .30), 0 12px 40px rgba(176, 141, 87, .18);

  /* motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: .22s;
  --dur:      .45s;
  --dur-slow: .85s;

  --header-h: 84px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  /* `clip` rather than `hidden`: hidden turns the element into a scroll container,
     and in RTL that shifts the scroll origin to the right — which pushed the whole
     page sideways on narrow screens and cut the start of every Arabic line.
     `clip` trims the same overflow without creating a scrollport. */
  overflow-x: hidden;   /* fallback for browsers without `clip` */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  max-inline-size: 100%;
}

body.is-locked { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
:target { scroll-margin-block-start: calc(var(--header-h) + 2rem); }

::selection { background: var(--sand); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-4);
  z-index: 999;
  background: var(--espresso);
  color: var(--cream);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  transition: inset-block-start var(--dur-fast) var(--ease);
}
.skip-link:focus { inset-block-start: var(--sp-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4, .display {
  font-family: var(--font-ar);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--espresso);
}
:root[lang="en"] h1, :root[lang="en"] h2, :root[lang="en"] h3, :root[lang="en"] .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: 700; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--text-soft);
  font-weight: 300;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: '';
  inline-size: 34px;
  block-size: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  inline-size: 34px;
  block-size: 1px;
  background: currentColor;
  opacity: .55;
}

.title-rule {
  inline-size: 62px;
  block-size: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-block: var(--sp-4);
  border-radius: var(--r-pill);
}
.title-rule--center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.text-muted  { color: var(--text-soft); }
.text-faint  { color: var(--text-faint); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* rich text coming from the editor */
.prose { font-size: var(--fs-base); line-height: 1.95; color: var(--text-soft); }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose h2 { font-size: var(--fs-lg); margin-block-start: var(--sp-7); color: var(--espresso); }
.prose h3 { font-size: var(--fs-md); margin-block-start: var(--sp-6); color: var(--espresso); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent-deep); }
.prose ul, .prose ol { padding-inline-start: var(--sp-5); }
.prose ul li { list-style: none; position: relative; padding-inline-start: var(--sp-4); margin-block: var(--sp-2); }
.prose ul li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .78em;
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--sand);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-block: var(--sp-2); padding-inline-start: var(--sp-2); }
.prose blockquote {
  border-inline-start: 3px solid var(--sand);
  padding-inline-start: var(--sp-5);
  font-style: italic;
  color: var(--espresso);
}
.prose img { border-radius: var(--r-md); margin-block: var(--sp-5); }
.prose strong { color: var(--espresso); font-weight: 700; }

/* ---------------------------------------------------------------- layout */
.container {
  inline-size: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { inline-size: min(100% - 2.5rem, var(--container-narrow)); }
.container--wide   { inline-size: min(100% - 2rem, 1560px); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--paper { background: var(--paper-2); }
.section--paper .eyebrow, .section--cream .eyebrow { color: #6B5340; }
.section--cream { background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); }
.section--dark  { background: var(--espresso); color: var(--paper-3); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--cream); }
.section--dark .text-muted { color: rgba(249, 232, 216, .68); }
.section--dark .eyebrow { color: var(--sand); }
/* Dark sections inherit the light-background text tokens unless told otherwise —
   --text-soft (#6B5D50) on --espresso is 2.6:1, i.e. invisible. Re-point them all. */
.section--dark,
.section--dark p,
.section--dark .lead,
.section--dark .card__text,
.section--dark .prose,
.section--dark li { color: rgba(249, 232, 216, .78); }
.section--dark .text-faint,
.section--dark .spec__value,
.section--dark .field__hint { color: rgba(249, 232, 216, .60); }
.section--dark .stat__num { color: var(--sand); }
.section--dark a:not(.btn):not(.link) { color: var(--cream); }

.section-head { max-inline-size: 720px; margin-block-end: var(--sp-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-soft); }

.grid { display: grid; gap: var(--sp-5); }
/* Tracks are capped as well as floored. With a bare `1fr`, a grid holding a single
   card stretches it to the whole container — and a 3:4 portrait image then renders
   ~1700px tall. The cap keeps a lone card the same size as a card in a full row. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 560px)); justify-content: center; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 430px)); justify-content: center; }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 340px)); justify-content: center; }

/* Fixed-count rows, for strips that must stay on one line at desktop width.
   Views pick the count from the number of items so a row never ends in an orphan. */
.grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5, .grid--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6, .grid--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .grid--5, .grid--6, .grid--n4, .grid--n5, .grid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grid--5, .grid--6, .grid--n3, .grid--n4, .grid--n5, .grid--n6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}
@media (max-width: 460px) {
  .grid--n2, .grid--n3, .grid--n4, .grid--n5, .grid--n6, .grid--5, .grid--6 {
    grid-template-columns: 1fr;
  }
}

/* No lonely orphans.
   When the item count leaves exactly one card alone on the final row, centre it
   rather than letting it hang at the start of an otherwise empty line. The
   nth-child step has to match the column count, so the rules are restated at each
   breakpoint where that count changes. */
.grid--n3 > *:last-child:nth-child(3n + 1),
.grid--n6 > *:last-child:nth-child(6n + 1),
.grid--6  > *:last-child:nth-child(6n + 1) { grid-column: 2 / span 1; }
.grid--n4 > *:last-child:nth-child(4n + 1) { grid-column: 2 / span 2; }
.grid--n5 > *:last-child:nth-child(5n + 1),
.grid--5  > *:last-child:nth-child(5n + 1) { grid-column: 3 / span 1; }
.grid--n2 > *:last-child:nth-child(odd)    { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .grid--n4 > *:last-child:nth-child(4n + 1),
  .grid--n5 > *:last-child:nth-child(5n + 1),
  .grid--n6 > *:last-child:nth-child(6n + 1),
  .grid--5  > *:last-child:nth-child(5n + 1),
  .grid--6  > *:last-child:nth-child(6n + 1) { grid-column: auto; }
  .grid--n3 > *:last-child:nth-child(3n + 1),
  .grid--n4 > *:last-child:nth-child(3n + 1),
  .grid--n5 > *:last-child:nth-child(3n + 1),
  .grid--n6 > *:last-child:nth-child(3n + 1),
  .grid--5  > *:last-child:nth-child(3n + 1),
  .grid--6  > *:last-child:nth-child(3n + 1) { grid-column: 2 / span 1; }
}

@media (max-width: 700px) {
  .grid--n3 > *:last-child:nth-child(3n + 1),
  .grid--n4 > *:last-child:nth-child(3n + 1),
  .grid--n5 > *:last-child:nth-child(3n + 1),
  .grid--n6 > *:last-child:nth-child(3n + 1),
  .grid--5  > *:last-child:nth-child(3n + 1),
  .grid--6  > *:last-child:nth-child(3n + 1) { grid-column: auto; }
  .grid--n3 > *:last-child:nth-child(odd),
  .grid--n4 > *:last-child:nth-child(odd),
  .grid--n5 > *:last-child:nth-child(odd),
  .grid--n6 > *:last-child:nth-child(odd),
  .grid--5  > *:last-child:nth-child(odd),
  .grid--6  > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .grid [class] > *:last-child { grid-column: auto; }
}

.grid--gap-lg { gap: var(--sp-6); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--top { align-items: start; }

.stack > * + * { margin-block-start: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster--center { justify-content: center; }
.spacer { flex: 1; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--cream);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: .95em 2.1em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
/* the wash that sweeps across on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, var(--bronze), var(--walnut) 55%, var(--gold));
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: var(--cream); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--walnut); --btn-fg: var(--cream); }
.btn--gold    { --btn-bg: var(--gold);   --btn-fg: var(--espresso); }
.btn--ghost   { --btn-bg: transparent;   --btn-fg: var(--espresso); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-fg: var(--cream); border-color: transparent; }
.btn--light   { --btn-bg: var(--cream);  --btn-fg: var(--walnut); }
.btn--onDark  { --btn-bg: transparent;   --btn-fg: var(--cream); --btn-bd: rgba(249,232,216,.35); }
.btn--sm { padding: .7em 1.5em; font-size: var(--fs-xs); }
.btn--lg { padding: 1.1em 2.6em; font-size: var(--fs-base); }
.btn--block { inline-size: 100%; }
.btn--icon { padding: .85em; aspect-ratio: 1; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }

.btn .btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(var(--arrow-dx, 4px)); }
[dir="rtl"] .btn { --arrow-dx: -4px; }

/* text link with an animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent-deep);
  position: relative;
  padding-block-end: 3px;
}
.link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--uo, right);
  transition: transform var(--dur) var(--ease-out);
}
[dir="ltr"] .link { --uo: left; }
.link:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .38em .9em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--paper-3);
  color: var(--walnut);
  border: 1px solid var(--line-soft);
}
.badge--gold   { background: rgba(176,141,87,.14); color: #7A5F30; border-color: rgba(176,141,87,.28); }
.badge--ok     { background: rgba(74,124,89,.12);  color: #35604A; border-color: rgba(74,124,89,.25); }
.badge--warn   { background: rgba(185,138,46,.13); color: #8A6416; border-color: rgba(185,138,46,.28); }
.badge--danger { background: rgba(166,67,47,.11);  color: #8A3323; border-color: rgba(166,67,47,.24); }
.badge--info   { background: rgba(74,106,128,.12); color: #3B586B; border-color: rgba(74,106,128,.25); }
.badge--muted  { background: rgba(120,105,90,.10); color: var(--text-soft); }
.badge--dot::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Column flex so cards in a row share a height and their CTAs line up on one
     baseline instead of following each card's own text length. */
  display: flex;
  flex-direction: column;
  block-size: 100%;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: rgba(176,141,87,.30); }
.card__media { position: relative; overflow: hidden; background: var(--paper-3); }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.card__media--portrait { aspect-ratio: 3 / 4; }
.card__media--wide     { aspect-ratio: 16 / 10; }
.card__media--square   { aspect-ratio: 1; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: var(--fs-md); font-weight: 700; color: var(--espresso); margin-block-end: var(--sp-2); }
.card__text  { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.75; }
.card__foot  { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-start: auto; padding-block-start: var(--sp-4); }
.card__tag {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  z-index: 2;
  background: rgba(36,29,23,.72);
  backdrop-filter: blur(8px);
  color: var(--cream);
  padding: .35em .85em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
}
.card--flat { background: transparent; border: 0; }
.card--flat:hover { transform: none; box-shadow: none; }
.card--flat .card__body { padding-inline: 0; }

/* full-bleed link overlay so the whole card is clickable without nesting <a> */
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }

/* editorial hover card used for doors & projects */
.tile {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--espresso);
  isolation: isolate;
}
.tile img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity var(--dur) var(--ease);
}
.tile:hover img { transform: scale(1.07); }
.tile__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(26,21,18,.90) 0%, rgba(26,21,18,.45) 38%, rgba(26,21,18,0) 72%);
  transition: opacity var(--dur) var(--ease);
}
.tile__content {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  color: var(--cream);
}
.tile__content h3 { color: var(--cream); font-size: var(--fs-lg); }
.tile__meta { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-block-end: var(--sp-2); }
.tile__content .card__text, .tile__content p { color: rgba(249, 232, 216, .80); }
.tile__reveal {
  max-block-size: 0; opacity: 0; overflow: hidden;
  transition: max-block-size var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease), margin var(--dur) var(--ease);
}
.tile:hover .tile__reveal, .tile:focus-within .tile__reveal {
  max-block-size: 12rem; opacity: 1; margin-block-start: var(--sp-3);
}
.tile--tall  { aspect-ratio: 3 / 4.2; }
.tile--wide  { aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------- feature list */
.feature {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-soft);
}
.feature:last-child { border-block-end: 0; }
.feature__icon {
  flex: 0 0 auto;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  color: var(--bronze);
  background: var(--surface);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature:hover .feature__icon { background: var(--walnut); color: var(--cream); border-color: var(--walnut); }
.feature__title { font-weight: 700; color: var(--espresso); font-size: var(--fs-sm); margin-block-end: 2px; }
.feature__text  { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.7; }

.section--dark .feature { border-color: var(--line-dark); }
.section--dark .feature__icon { border-color: var(--line-dark); background: rgba(249,232,216,.05); color: var(--sand); }
.section--dark .feature__title { color: var(--cream); }
.section--dark .feature__text { color: rgba(249,232,216,.62); }

/* compact icon-over-label spec chips */
/* Four spec chips is the common case, so pin four columns rather than letting
   auto-fit drop to three and strand the fourth. */
/* Flex rather than grid: the number of spec chips varies per door (4, 5, 6…), and
   a wrapping centred flex row leaves the final line centred by itself, whatever
   the count. A grid would need a column rule per possible count. */
.spec-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}
.spec-grid > * { flex: 1 1 130px; max-inline-size: 210px; }
@media (max-width: 380px) { .spec-grid > * { flex-basis: 100%; max-inline-size: none; } }
.spec {
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.spec:hover { transform: translateY(-4px); box-shadow: var(--sh-1); }
.spec__icon { color: var(--bronze); margin-inline: auto; margin-block-end: var(--sp-2); }
.spec__label { font-size: var(--fs-xs); font-weight: 700; color: var(--espresso); }
.spec__value { font-size: var(--fs-xs); color: var(--text-faint); margin-block-start: 2px; }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-5); }
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
:root[lang="ar"] .stat__num { font-family: var(--font-ar); font-weight: 800; }
.stat__label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-block-start: var(--sp-2); }
.section--dark .stat__label { color: rgba(249,232,216,.6); }

/* ---------------------------------------------------------------- swatches */
/* Centred so a partial last row (20 finishes rarely divide evenly into the
   available columns) reads as deliberate instead of ragged-left. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
/* One tidy row of finishes rather than a 5 + 1 wrap. */
.swatches--row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}
.swatches--row .swatch { inline-size: auto; }
@media (max-width: 900px) { .swatches--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .swatches--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swatch { inline-size: 96px; text-align: center; }
.swatch__chip {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.swatch__chip img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.swatch:hover .swatch__chip { transform: translateY(-5px) rotate(-1.2deg); box-shadow: var(--sh-2); }
.swatch__name { font-size: var(--fs-xs); font-weight: 600; color: var(--espresso); margin-block-start: var(--sp-2); }
.section--dark .swatch__name { color: var(--cream); }

/* ---------------------------------------------------------------- forms */
.field { margin-block-end: var(--sp-5); }
.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--espresso);
  margin-block-end: var(--sp-2);
}
.field__label .opt { font-weight: 400; color: var(--text-faint); font-size: var(--fs-xs); }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); margin-block-start: var(--sp-2); }
.field__error {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--danger); margin-block-start: var(--sp-2); font-weight: 500;
}

.input, .textarea, .select {
  inline-size: 100%;
  padding: .95em 1.1em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--sand); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(176,141,87,.14);
}
.textarea { min-block-size: 150px; resize: vertical; line-height: 1.8; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236B5D50' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.1em center;
  padding-inline-end: 1.1em;
  padding-inline-start: 2.6em;
}
[dir="ltr"] .select { background-position: right 1.1em center; padding-inline-start: 1.1em; padding-inline-end: 2.6em; }
.has-error .input, .has-error .textarea, .has-error .select { border-color: var(--danger); background: rgba(166,67,47,.03); }

.check {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-soft); cursor: pointer;
}
.check input { inline-size: 18px; block-size: 18px; accent-color: var(--walnut); margin-block-start: 3px; flex: 0 0 auto; }

/* selectable option cards (project type, budget, …) */
/* Seven project types: four columns give 4 + 3, which reads as intentional.
   auto-fit gave 3 + 3 + 1 and stranded the last chip. */
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__box {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
  transition: all var(--dur-fast) var(--ease);
}
.choice input:hover + .choice__box { border-color: var(--sand); }
.choice input:checked + .choice__box {
  border-color: var(--walnut);
  background: var(--walnut);
  color: var(--cream);
  box-shadow: var(--sh-2);
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--gold); outline-offset: 2px; }

/* honeypot — visually and programmatically hidden, but present in the DOM */
.hp-field {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; opacity: 0; pointer-events: none;
}

/* ---------------------------------------------------------------- alerts */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-sm);
  margin-block-end: var(--sp-5);
}
.alert--success { background: rgba(74,124,89,.08);  border-color: rgba(74,124,89,.28);  color: #2F5641; }
.alert--error   { background: rgba(166,67,47,.07);  border-color: rgba(166,67,47,.26);  color: #7E3020; }
.alert--warning { background: rgba(185,138,46,.09); border-color: rgba(185,138,46,.28); color: #7E5A14; }
.alert--info    { background: rgba(74,106,128,.08); border-color: rgba(74,106,128,.26); color: #37536A; }
.alert svg { flex: 0 0 auto; margin-block-start: 2px; }

/* toast stack */
.toasts {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-inline-size: min(90vw, 380px);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--espresso);
  color: var(--cream);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size: var(--fs-sm);
  animation: toast-in .5s var(--ease-out) both;
}
.toast--success { background: #2F5641; }
.toast--error   { background: #7E3020; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- header */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              block-size var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-block-end: 1px solid transparent;
}
.header::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(252,248,243,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.header.is-stuck { --header-h: 68px; border-block-end-color: var(--line-soft); }
.header.is-stuck::before { opacity: 1; }

/* Interior pages (no full-bleed hero) get a solid header from the very top.
   Without this the header background stayed transparent and its dark nav text sat
   over the dark page-hero image — invisible. Only pages that opt into a transparent
   header (home + door details, which have their own bright hero) skip this. */
.header:not(.is-transparent)::before { opacity: 1; }
.header:not(.is-transparent) { border-block-end-color: var(--line-soft); }
.header__inner { inline-size: min(100% - 2.5rem, var(--container)); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-5); }

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.brand svg, .brand img { block-size: clamp(30px, 3.4vw, 40px); inline-size: auto; color: var(--walnut); transition: block-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.header.is-transparent .brand svg { color: var(--cream); }

.nav { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.5rem); margin-inline-start: auto; }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  padding: .5em .25em;
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--uo, right);
  transition: transform var(--dur) var(--ease-out);
}
[dir="ltr"] .nav__link { --uo: left; }
.nav__link:hover, .nav__link.is-active { color: var(--espresso); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.header.is-transparent .nav__link { color: rgba(249,232,216,.78); }
.header.is-transparent .nav__link:hover, .header.is-transparent .nav__link.is-active { color: var(--cream); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  padding: .55em 1em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  transition: all var(--dur-fast) var(--ease);
}
.lang-toggle:hover { border-color: var(--walnut); color: var(--espresso); }
.header.is-transparent .lang-toggle { border-color: rgba(249,232,216,.28); color: rgba(249,232,216,.85); }

.burger {
  display: none;
  inline-size: 44px; block-size: 44px;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--espresso);
}
.header.is-transparent .burger { color: var(--cream); }
.burger__bars { position: relative; inline-size: 22px; block-size: 14px; }
.burger__bars span {
  position: absolute; inset-inline: 0; block-size: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.burger__bars span:nth-child(1) { inset-block-start: 0; }
.burger__bars span:nth-child(2) { inset-block-start: 6.2px; }
.burger__bars span:nth-child(3) { inset-block-start: 12.4px; }
.burger.is-open .burger__bars span:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.burger.is-open .burger__bars span:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bars span:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 199;
  background: var(--espresso);
  color: var(--cream);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + var(--sp-6)) var(--sp-6) var(--sp-6);
  clip-path: circle(0% at var(--cp-x, 90%) 5%);
  transition: clip-path .7s var(--ease-out), visibility 0s linear .7s;
  visibility: hidden;
  overflow-y: auto;
}
[dir="ltr"] .drawer { --cp-x: 10%; }
.drawer.is-open { clip-path: circle(150% at var(--cp-x, 90%) 5%); visibility: visible; transition: clip-path .7s var(--ease-out); }
.drawer__nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.drawer__link {
  font-family: var(--font-ar);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  color: var(--cream);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line-dark);
  opacity: 0;
  transform: translateY(18px);
}
.drawer.is-open .drawer__link { animation: drawer-item .55s var(--ease-out) forwards; }
.drawer.is-open .drawer__link:nth-child(1) { animation-delay: .18s; }
.drawer.is-open .drawer__link:nth-child(2) { animation-delay: .24s; }
.drawer.is-open .drawer__link:nth-child(3) { animation-delay: .30s; }
.drawer.is-open .drawer__link:nth-child(4) { animation-delay: .36s; }
.drawer.is-open .drawer__link:nth-child(5) { animation-delay: .42s; }
.drawer.is-open .drawer__link:nth-child(6) { animation-delay: .48s; }
.drawer.is-open .drawer__link:nth-child(7) { animation-delay: .54s; }
.drawer.is-open .drawer__link:nth-child(8) { animation-delay: .60s; }
.drawer.is-open .drawer__link:nth-child(9) { animation-delay: .66s; }
@keyframes drawer-item { to { opacity: 1; transform: none; } }
.drawer__foot { margin-block-start: auto; padding-block-start: var(--sp-6); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-block-size: min(100svh, 940px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--espresso);
  color: var(--cream);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transform: scale(1.12);
  animation: hero-zoom 14s var(--ease-out) forwards;
  will-change: transform;
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(26,21,18,.92) 0%, rgba(26,21,18,.35) 55%, rgba(26,21,18,.55) 100%),
    radial-gradient(120% 80% at 70% 40%, rgba(26,21,18,0) 0%, rgba(26,21,18,.5) 100%);
}
.hero__inner { padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9); max-inline-size: 760px; }
.hero h1 {
  font-size: var(--fs-3xl);
  color: var(--cream);
  line-height: 1.08;
  margin-block-end: var(--sp-5);
}
.hero .eyebrow { color: var(--sand); }
.hero__text { font-size: var(--fs-md); color: rgba(249,232,216,.80); font-weight: 300; max-inline-size: 56ch; margin-block-end: var(--sp-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.hero__scroll {
  position: absolute;
  inset-block-end: var(--sp-6);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(249,232,216,.6);
}
.hero__scroll span { inline-size: 1px; block-size: 46px; background: linear-gradient(to bottom, var(--sand), transparent); }
.hero__scroll span::after {
  content: ''; position: absolute; inline-size: 1px; block-size: 14px; background: var(--cream);
  animation: scroll-dot 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } }

/* page banner for interior pages */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
  background: var(--espresso);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; opacity: .40; }
.page-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--espresso) 4%, rgba(26,21,18,.62) 70%);
}
.page-hero h1 { color: var(--cream); margin-block-end: var(--sp-3); }
.page-hero p { color: rgba(249,232,216,.74); max-inline-size: 62ch; }
.page-hero .eyebrow { color: var(--sand); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: rgba(249,232,216,.55); margin-block-end: var(--sp-4); }
.breadcrumb a:hover { color: var(--cream); }
.breadcrumb__sep { opacity: .5; }

/* ---------------------------------------------------------------- media frame */
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.frame--portrait { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1; }
/* thin gold outline offset behind the image — a quiet luxury device */
.frame--offset::before {
  content: '';
  position: absolute;
  inset-block: var(--sp-5);
  inset-inline: var(--sp-5);
  border: 1px solid rgba(249,232,216,.32);
  border-radius: var(--r-md);
  z-index: 2;
  pointer-events: none;
}
.frame-stack { position: relative; }
.frame-stack::after {
  content: '';
  position: absolute;
  inset-block-start: var(--sp-5);
  inset-inline-start: var(--sp-5);
  inline-size: 100%; block-size: 100%;
  border: 1px solid var(--sand);
  border-radius: var(--r-lg);
  z-index: -1;
}

/* ---------------------------------------------------------------- accordion */
.accordion { border-block-start: 1px solid var(--line-soft); }
.accordion__item { border-block-end: 1px solid var(--line-soft); }
.accordion__trigger {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  text-align: start;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--espresso);
  font-family: var(--font-ar);
  transition: color var(--dur-fast) var(--ease);
}
:root[lang="en"] .accordion__trigger { font-family: var(--font-body); font-weight: 600; }
.accordion__trigger:hover { color: var(--accent); }
.accordion__icon {
  flex: 0 0 auto; inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); background: var(--walnut); color: var(--cream); border-color: var(--walnut); }
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body { padding-block-end: var(--sp-5); color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.9; }

/* ---------------------------------------------------------------- process */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); counter-reset: step; }
@media (max-width: 860px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .process { grid-template-columns: 1fr; } }
.process__step { position: relative; padding-block-start: var(--sp-6); counter-increment: step; }
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--sand);
  opacity: .55;
  line-height: 1;
}
.process__step::after {
  content: ''; position: absolute; inset-block-start: 10px; inset-inline-start: 0;
  inline-size: 100%; block-size: 1px; background: var(--line); z-index: -1;
}
.process__step h4 { margin-block: var(--sp-4) var(--sp-2); }
.process__step p { font-size: var(--fs-sm); color: var(--text-soft); }

/* ---------------------------------------------------------------- marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-8); inline-size: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.marquee__item {
  display: grid; place-items: center;
  min-inline-size: 200px;
  padding-block: var(--sp-4);
  /* Partner marks stay in their own colours — a greyscale filter would misrepresent
     brands the client does not own. Only a light opacity lift on hover. */
  opacity: .88;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.marquee__item:hover { opacity: 1; transform: translateY(-2px); }
/* Partner marks arrive at wildly different proportions; normalise on height so
   they read at the same optical weight in the strip. */
.marquee__item img {
  block-size: clamp(38px, 4vw, 54px);
  inline-size: auto;
  max-inline-size: 210px;
  object-fit: contain;
}

/* ---------------------------------------------------------------- testimonial */
.quote-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative;
  block-size: 100%;
  display: flex; flex-direction: column;
}
.quote-card::before {
  content: '\201D';
  position: absolute;
  inset-block-start: -.15em;
  inset-inline-start: var(--sp-5);
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--sand);
  opacity: .35;
}
.quote-card__text { font-size: var(--fs-sm); line-height: 1.95; color: var(--text-soft); position: relative; z-index: 1; flex: 1; }
.quote-card__who { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line-soft); }
.avatar {
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--walnut); color: var(--cream);
  font-weight: 700; font-size: var(--fs-sm);
  flex: 0 0 auto; overflow: hidden;
}
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.quote-card__name { font-weight: 700; color: var(--espresso); font-size: var(--fs-sm); }
.quote-card__role { font-size: var(--fs-xs); color: var(--text-faint); }
.stars { color: var(--gold); display: flex; gap: 2px; margin-block-end: var(--sp-3); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--espresso); color: rgba(249,232,216,.72); padding-block: var(--sp-8) var(--sp-5); position: relative; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--sp-7); margin-block-end: var(--sp-7); }
.footer__brand svg { block-size: 46px; inline-size: auto; color: var(--cream); margin-block-end: var(--sp-4); }
/* The footer is dark, so the light-background muted/faint tokens are unreadable
   here. Re-point them the way .section--dark already does. */
.footer .text-muted { color: rgba(249, 232, 216, .70); }
.footer .text-faint { color: rgba(249, 232, 216, .52); }
.footer__brand p { color: rgba(249, 232, 216, .70); font-size: var(--fs-sm); line-height: 1.9; margin-block-end: var(--sp-5); }
.footer .field__label { color: var(--cream); }
.footer .input { background: rgba(249, 232, 216, .06); border-color: var(--line-dark); color: var(--cream); }
.footer .input::placeholder { color: rgba(249, 232, 216, .42); }
.footer .input:hover { border-color: rgba(249, 232, 216, .32); }
.footer .input:focus { border-color: var(--sand); box-shadow: 0 0 0 3px rgba(195, 173, 149, .18); }
.footer h4 { color: var(--cream); font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; margin-block-end: var(--sp-4); font-weight: 700; }
.footer__links li { margin-block-end: var(--sp-3); }
.footer__links a { font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease), padding-inline-start var(--dur-fast) var(--ease); }
.footer__links a:hover { color: var(--cream); padding-inline-start: var(--sp-2); }
.footer__contact li { display: flex; gap: var(--sp-3); align-items: flex-start; margin-block-end: var(--sp-4); font-size: var(--fs-sm); }
.footer__contact svg { color: var(--sand); flex: 0 0 auto; margin-block-start: 3px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line-dark);
  font-size: var(--fs-xs);
  color: rgba(249,232,216,.72);
}
.socials { display: flex; gap: var(--sp-3); }
.social {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: rgba(249,232,216,.75);
  transition: all var(--dur-fast) var(--ease);
}
.social:hover { background: var(--sand); color: var(--espresso); border-color: var(--sand); transform: translateY(-3px); }

/* ---------------------------------------------------------------- floating actions */
.float-actions {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 150;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.float-btn {
  inline-size: 54px; block-size: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--walnut);
  color: var(--cream);
  box-shadow: var(--sh-2);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.float-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--sh-3); }
.float-btn--wa { background: #25D366; color: #fff; }
.float-btn--top { background: var(--surface); color: var(--walnut); border: 1px solid var(--line); opacity: 0; pointer-events: none; }
.float-btn--top.is-visible { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-block-start: var(--sp-8); }
.pagination a, .pagination span {
  min-inline-size: 42px; block-size: 42px;
  display: grid; place-items: center;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  transition: all var(--dur-fast) var(--ease);
}
.pagination a:hover { border-color: var(--walnut); color: var(--espresso); }
.pagination .is-current { background: var(--walnut); border-color: var(--walnut); color: var(--cream); }
.pagination .is-gap { border-color: transparent; }

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(20,16,13,.94);
  display: grid; place-items: center;
  padding: var(--sp-5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
.lightbox img { max-inline-size: 100%; max-block-size: 86vh; border-radius: var(--r-md); box-shadow: var(--sh-3); }
.lightbox__close, .lightbox__nav {
  position: absolute;
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(249,232,216,.10);
  color: var(--cream);
  transition: background var(--dur-fast) var(--ease);
}
.lightbox__close { inset-block-start: var(--sp-5); inset-inline-end: var(--sp-5); }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(249,232,216,.22); }
.lightbox__nav--prev { inset-inline-start: var(--sp-5); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-end: var(--sp-5); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__caption { position: absolute; inset-block-end: var(--sp-6); inset-inline: 0; text-align: center; color: rgba(249,232,216,.7); font-size: var(--fs-sm); }

/* gallery grid */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.gallery__item { position: relative; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; background: var(--paper-3); }
.gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.06); }

/* ---------------------------------------------------------------- motion */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="mask"]  { opacity: 1; clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 1.1s var(--ease-out); }
[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }
[dir="rtl"] [data-reveal="mask"] { clip-path: inset(0 0 0 100%); }
[dir="rtl"] [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

/* stagger children */
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: .00s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: .08s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: .40s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: .48s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: .56s; }
[data-stagger].is-visible > *:nth-child(n+9) { transition-delay: .64s; }

.parallax { will-change: transform; }

/* ---------------------------------------------------------------- utilities
   A deliberately small set. CSP forbids inline style attributes, so anything a
   template needs to nudge lives here as a class instead. */
.mt-2 { margin-block-start: var(--sp-2); }
.mt-3 { margin-block-start: var(--sp-3); }
.mt-4 { margin-block-start: var(--sp-4); }
.mt-5 { margin-block-start: var(--sp-5); }
.mt-6 { margin-block-start: var(--sp-6); }
.mt-7 { margin-block-start: var(--sp-7); }
.mb-2 { margin-block-end: var(--sp-2); }
.mb-3 { margin-block-end: var(--sp-3); }
.mb-4 { margin-block-end: var(--sp-4); }
.mb-5 { margin-block-end: var(--sp-5); }
.mb-6 { margin-block-end: var(--sp-6); }
.mi-auto { margin-inline: auto; }
.flush { padding-block: 0 !important; }
.full-w { inline-size: 100%; }
.relative { position: relative; }
.hide { display: none !important; }
@media (max-width: 900px) { .hide\@md { display: none !important; } }
@media (max-width: 640px) { .hide\@sm { display: none !important; } }

.code-block {
  overflow: auto;
  font-size: .74rem;
  line-height: 1.7;
  background: var(--surface);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  direction: ltr;
  text-align: left;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav { display: none; }
  .burger { display: grid; }
  .header__actions .btn { display: none; }
  /* .nav carried the `margin-inline-start: auto` that pushed the actions to the far
     end of the bar. It is hidden here, so the burger and language toggle have to
     claim that space themselves — otherwise they bunch up against the logo. */
  .header__actions { margin-inline-start: auto; }
  .hero { min-block-size: min(92svh, 780px); }
  .split { gap: var(--sp-6); }
}

@media (max-width: 640px) {
  /* The offset outline behind a framed image is a desktop flourish; at phone
     widths it pokes past the 20px gutter and adds horizontal overflow. */
  .frame-stack::after { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .float-actions { inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); }
  .float-btn { inline-size: 48px; block-size: 48px; }
  .card__body { padding: var(--sp-4); }
  .toasts { inset-inline: var(--sp-4); max-inline-size: none; }
}

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__media img { animation: none; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --text-soft: #4A3E33; --text-faint: #5C4F42; --line: rgba(90,69,51,.34); }
}

@media print {
  .header, .footer, .float-actions, .drawer, .hero__scroll, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}

/* =============================================================================
   APPENDED — public site, part 1.
   helpers()->picture() wraps every <img> in a <picture>. The component rules
   above size the <img> against a box the wrapper now interrupts, so the wrapper
   has to inherit that box. Nothing else here; no new component vocabulary.
   ========================================================================== */
.hero__media picture,
.page-hero__media picture,
.frame picture,
.tile picture,
.card__media picture,
.swatch__chip picture,
.gallery__item picture,
.avatar picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}