/* AL MAHA v3 — homepage styles (RTL first). Tokens live in tokens.css; components use tokens only.
   System rules (spacing / type / surface audit of 13/10):
   R1 tokens only · R2 nothing larger than the hero H1 · R3 every chapter: eyebrow -> H2 -> [lead] -> content, same distances
   R4 padding belongs to the boundary: ONE --section-y between chapters; next to a seam it is measured from the brush edge
   R5 one 12-column grid, three splits (A 4|1|7, B 5|1|6, C 6|1|5), one 4-up / 5-up row component
   R6 balance headings and short leads, pretty body text · R7 Arabic never tracked, mixed runs share a baseline
   R8 brand colours only; light/light changes are ramps, photo -> light is a brush edge, light <-> night is a ribbon seam */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 92px;
  background: var(--ivory);
  scrollbar-color: var(--bordeaux) var(--paper-2);
  hanging-punctuation: first;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--f-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--red);
}
:lang(ar), [lang="ar"] * { letter-spacing: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--ivory); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--bordeaux); border: 3px solid var(--paper-2); border-radius: 10px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; right: 12px; z-index: 100;
  background: var(--ink); color: var(--ivory); padding: 12px 20px; text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease-expo);
}
.skip-link:focus { transform: none; }

/* one container and one 12-column grid for every block (column 1 is the reading start, on the right) */
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.lat { font-family: var(--f-lat); direction: ltr; unicode-bidi: isolate; }

/* the three Latin styles: label (micro), numerals (num), tagline (tag, signature only) */
.label .lat, .fact dt .lat, .channel dt .lat, .svc__en, .sector__en, .step__title .lat, .value__en, .client__name .lat, .work__client .lat, .menu__nav a .lat {
  font: 560 var(--fs-micro)/var(--lh-micro) var(--f-lat); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--muted);
}
@media (min-width: 768px) {
  .label .lat, .fact dt .lat, .channel dt .lat, .svc__en, .sector__en, .step__title .lat, .value__en, .client__name .lat, .work__client .lat { white-space: nowrap; }
}

/* eyebrow: red rule + Arabic + Latin on one baseline; every chapter opens with one */
.label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin: 0 0 var(--space-tight);
  font: 600 var(--fs-small)/var(--lh-small) var(--f-ar); color: var(--bordeaux);
}
.label::before { content: ""; align-self: center; width: 34px; height: 2px; background: var(--red); flex: none; }
.label--center { justify-content: center; }
.label--center::after { content: ""; align-self: center; width: 34px; height: 2px; background: var(--red); flex: none; }
.on-dark .label { color: var(--sand); }
.on-dark .label .lat { color: var(--on-dark-muted); }

/* two-tone display headings (h2 role): line 1 charcoal, line 2 brand red (bordeaux on light, screen red on dark); never tracked */
.display {
  font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-display);
  letter-spacing: 0; text-wrap: balance; color: var(--ink);
}
.display .line { display: block; }
.display .line--accent { color: var(--accent-light); }
.on-dark .display { color: var(--on-dark); }
.on-dark .display .line--accent { color: var(--accent-dark); }
.display + p { margin-top: var(--space-tight); }   /* heading -> its text: one distance everywhere */

p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink); max-width: 34em; text-wrap: balance; }

/* word mask used by the reveal (JS wraps words; Arabic is never split below the word) */
.w { display: inline-block; vertical-align: top; overflow: hidden; padding-block: .32em; margin-block: -.32em; }
.w__i { display: inline-block; }

/* ---------------------------------------------------------------- buttons + links */
.btn {
  --btn-bg: var(--bordeaux); --btn-fg: #fff; --btn-fill: var(--deep);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s-4);
  min-height: 56px; padding-block: 8px; padding-inline: 28px 9px;
  border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  font: 600 var(--fs-btn)/1.2 var(--f-ar); text-decoration: none; white-space: nowrap;
  transition: color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-expo);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .55s var(--ease-expo);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: scale(.98); }
.btn__arrow {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16);
  transition: transform .5s var(--ease-expo), background-color .4s var(--ease);
}
.btn__arrow svg { width: 16px; height: 16px; }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(-5px); }
.btn--ghost {
  --btn-bg: rgba(248, 242, 236, .72); --btn-fg: var(--ink); --btn-fill: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .55);
  padding-inline: 28px; justify-content: center;
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ivory); }
.btn--sm { min-height: 46px; padding-inline: 22px 7px; font-size: var(--fs-btn-sm); gap: var(--s-3); }
.btn--sm .btn__arrow { width: 32px; height: 32px; }

.link {
  color: var(--bordeaux); text-decoration: none; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat;
  transition: background-size .5s var(--ease-expo);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--ink);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header__bar {
  height: var(--header-h); padding-inline: var(--gutter);
  /* one right axis: the logo, the hero copy and every section share the content grid's edge at every width */
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-6);
  transition: height .45s var(--ease-expo);
}
/* frosted bar (v2's proven treatment): near-opaque warm paper, so it reads the same over the photo, the light
   chapters and the night chapter; the backdrop-filter is set from the start so it never pops in */
.site-header { -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
.site-header.is-scrolled { background: rgba(249, 246, 240, .94); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 rgba(34, 34, 34, .08); }
.site-header.is-scrolled .site-header__bar { height: 72px; }

/* header lockup: symbol + Arabic + Latin name (Arabic ~19 px, Latin caps ~7 px at 64 px); phones: symbol + Arabic */
.brand { position: relative; flex: none; display: block; height: 64px; aspect-ratio: 2945 / 753; transition: height .45s var(--ease-expo); }
.site-header.is-scrolled .brand { height: 52px; }
.brand__logo { position: absolute; inset: 0; display: block; transition: opacity .45s var(--ease); }
.brand__logo img { width: 100%; height: 100%; }
.brand__logo--dark { opacity: 0; }
.site-header[data-theme="dark"] .brand__logo--light { opacity: 0; }
.site-header[data-theme="dark"] .brand__logo--dark { opacity: 1; }

.site-nav { position: relative; margin-inline-start: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--nav-gap); }
.site-nav a:not(.btn) {
  display: inline-block; padding: 12px 0; font: 500 var(--fs-btn)/1 var(--f-ar);
  text-decoration: none; color: inherit; opacity: .92; transition: opacity .3s, color .3s;
}
.site-nav a:not(.btn):hover { opacity: 1; color: var(--bordeaux); }
.site-header[data-theme="dark"] .site-nav a:not(.btn):hover { color: var(--sand); }
.site-nav a[aria-current="true"]:not(.btn) { opacity: 1; }
.site-nav__cta { margin-inline-start: var(--s-2); }
/* one solid red call to action per screen: while the hero's own CTA is on screen the header's is an outline
   (motion.js sets .cta-ghost; without it, e.g. no JS, the header CTA stays solid) */
.site-nav__cta .btn { transition: color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-expo); }
.site-header.cta-ghost .site-nav__cta .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-fill: var(--ink); box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .5); }
.site-header.cta-ghost .site-nav__cta .btn:hover, .site-header.cta-ghost .site-nav__cta .btn:focus-visible { color: var(--ivory); }
.site-header.cta-ghost .site-nav__cta .btn__arrow { background: rgba(34, 34, 34, .07); }
/* over the night chapters a bordeaux pill sinks into the bar (1.7:1): an ivory outline that fills red on hover */
.site-header[data-theme="dark"] .site-nav__cta .btn { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-fill: var(--red); box-shadow: inset 0 0 0 1px rgba(248, 242, 236, .45); }
.site-header[data-theme="dark"] .site-nav__cta .btn:hover, .site-header[data-theme="dark"] .site-nav__cta .btn:focus-visible { color: #fff; box-shadow: none; }
.site-header[data-theme="dark"] .site-nav__cta .btn__arrow { background: rgba(248, 242, 236, .12); }
.site-nav__indicator {
  position: absolute; bottom: 4px; left: 0; height: 2px; width: 0; background: var(--red);
  transform: translateX(var(--x, 0)); opacity: 0;
  transition: transform .6s var(--ease-expo), width .6s var(--ease-expo), opacity .3s;
  pointer-events: none;
}
.site-nav__indicator.is-on { opacity: 1; }

/* English version: honest "coming soon", not a dead link */
.lang { flex: none; display: flex; align-items: baseline; gap: var(--s-2); margin: 0; font: 560 var(--fs-num)/1 var(--f-lat); letter-spacing: var(--tr-num); }
.lang__soon { font: 500 var(--fs-small)/1 var(--f-ar); letter-spacing: 0; color: var(--muted); }
.site-header[data-theme="dark"] .lang__soon { color: var(--on-dark-muted); }
/* language switch (index.html <-> en.html): a real link, quiet until hovered */
a.lang--switch { color: inherit; text-decoration: none; padding: 10px 4px; margin: -10px -4px; text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: var(--red); transition: color .3s var(--ease); }
a.lang--switch:hover, a.lang--switch:focus-visible { color: var(--bordeaux); text-decoration-line: underline; }
.site-header[data-theme="dark"] a.lang--switch:hover { color: #fff; }
a.lang--switch:lang(ar) { font: 600 var(--fs-btn)/1 "Cairo", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
.menu__foot a.lang--switch { margin: 0; padding: 12px 0; font-size: var(--fs-btn); }

.menu-toggle { display: none; width: 46px; height: 46px; place-items: center; margin-inline-start: auto; color: inherit; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: background-color .3s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; right: 0; height: 2px; background: currentColor; transition: transform .45s var(--ease-expo), width .45s var(--ease-expo); }
.menu-toggle span::before { width: 24px; transform: translateY(-7px); }
.menu-toggle span::after { width: 15px; transform: translateY(7px); }

/* ---------------------------------------------------------------- mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--ivory); color: var(--ink);
  display: flex; flex-direction: column; padding: 14px var(--gutter) 28px;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.menu__brand { height: 64px; aspect-ratio: 2945 / 753; max-width: calc(100% - 60px); }
.menu__brand img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.menu__close { width: 46px; height: 46px; display: grid; place-items: center; }
.menu__close svg { width: 22px; height: 22px; }
.menu__nav { margin-top: var(--s-5); }
.menu__nav li { border-bottom: 1px solid var(--line); }
.menu__nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: 14px 0; font: 600 var(--fs-h2)/var(--lh-display) var(--f-ar); font-size: min(var(--fs-h2), 4.2svh); text-decoration: none;
}
.menu__nav a[aria-current="true"] { color: var(--bordeaux); }
.menu__foot { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-5); }
.menu__foot .btn { justify-content: space-between; }
.lang--menu { justify-content: center; color: var(--ink); }
.signature { display: flex; align-items: center; justify-content: center; gap: 14px; font: 350 var(--fs-tag)/1 var(--f-lat); letter-spacing: var(--tr-tag); text-transform: uppercase; color: var(--muted); direction: ltr; white-space: nowrap; }
.signature::before, .signature::after { content: ""; height: 1.5px; width: 44px; background: var(--red); flex: none; transform: scaleX(var(--draw, 1)); }
.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; min-height: max(620px, 100svh); display: flex; align-items: center; color: var(--ink); overflow-x: clip; }  /* the symbol's stage may reach past the sides (the overture): never a sideways scroll */
/* the photo box stops 2 px short of the hero bottom (hidden under the ivory brush edge): browsers treat an image that
   covers the whole viewport as a background and skip it for LCP; the photo is this page's main content */
.hero { --media-b: 2px; }
.hero__media { position: absolute; inset: 0 0 var(--media-b); z-index: 0; overflow: hidden; background: #d8c7bd; }
.hero__veil .hero__frame--fg { bottom: var(--media-b); }
.hero__frame { position: absolute; inset: 0; transform-origin: 34% 52%; will-change: transform; }
/* one layer per frame (photo + living-photo canvas / cut-out foreground): the intro scales and lights the layers, the
   scroll push-in moves the frames, so the photo, the canvas and the cut-out always share one transform */
.hero__layer { position: absolute; inset: 0; transform-origin: 32% 46%; }
/* the plate is framed per aspect ratio so the flag keeps its place on the left and the sky between the flag and the
   copy stays open for the oryx: --px = object-position x, --pz = extra zoom (anchored right, --pa down).
   The photo <img>, the cinemagraph canvas and the cut-out <img> share these rules: they register to the pixel. */
.hero { --px: 100%; --py: 42%; --pz: 1; --pa: .42; }
.hero__plate, .hero__fg, .hero__cine {
  position: absolute; display: block; right: 0; left: auto; top: calc((1 - var(--pz)) * var(--pa) * 100%);
  width: calc(var(--pz) * 100%); height: calc(var(--pz) * 100%);
  object-fit: cover; object-position: var(--px) var(--py); max-width: none;
}
/* whole pixels: a fractional box would make the compositor resample the canvas (and the photo differently) */
@supports (width: round(1.5px, 1px)) {
  .hero__plate, .hero__fg, .hero__cine {
    top: round(calc((1 - var(--pz)) * var(--pa) * 100%), 1px);
    width: round(calc(var(--pz) * 100%), 1px); height: round(calc(var(--pz) * 100%), 1px);
  }
}
/* 16:10 .. 21:9: a little closer, so the flag stands nearer the left edge and leaves the oryx real air before the copy */
@media (min-aspect-ratio: 155/100) and (max-aspect-ratio: 17/10) { .hero { --pz: 1.04; } }
@media (min-aspect-ratio: 17/10) and (max-aspect-ratio: 21/10) { .hero { --pz: 1.15; } }
@media (max-aspect-ratio: 155/100) { .hero { --px: 89%; } }
@media (max-aspect-ratio: 145/100) { .hero { --px: 76%; } }
@media (max-aspect-ratio: 135/100) { .hero { --px: 67%; } }
@media (max-aspect-ratio: 125/100) { .hero { --px: 57%; } }
@media (max-aspect-ratio: 110/100) { .hero { --px: 47%; } }
@media (max-aspect-ratio: 90/100) { .hero { --px: 38%; } }
/* short viewports: the hero keeps 620 px of height, so its own aspect ratio is width / 620 (same steps as above) */
@media (max-height: 619px) {
  .hero { --pz: 1; --px: 100%; }
  @media (min-width: 961px) and (max-width: 1053px) { .hero { --pz: 1.04; } }
  @media (min-width: 1054px) and (max-width: 1302px) { .hero { --pz: 1.15; } }
  @media (max-width: 960px) { .hero { --px: 89%; } }
  @media (max-width: 898px) { .hero { --px: 76%; } }
  @media (max-width: 836px) { .hero { --px: 67%; } }
  @media (max-width: 774px) { .hero { --px: 57%; } }
  @media (max-width: 681px) { .hero { --px: 47%; } }
}
/* the 3D oryx (js/config.js HERO_CONCEPT, <html data-hero>). A (the signature) and C (the overture) stand in front of
   the veil, in the type layer (the copy stays on top by DOM order); B (the monument) is moved by motion.js into the
   photo: .hero__layer--oryx, above the ivory air, below the wipe and the brush edge, masked by the cut-out so the pole
   and the rocks stand in front of it. True brand colours everywhere: no haze filter, only a warm light wrap. */
.oryx-stage { position: absolute; z-index: 3; pointer-events: none; left: 0; top: 0; width: 0; height: 0; contain: layout style; }
.oryx-stage__inner { position: absolute; inset: 0; opacity: 0; filter: drop-shadow(0 0 18px rgba(255, 214, 170, .35)); }
.hero__frame--oryx { pointer-events: none; }
:root:not([data-hero="b"]) .hero__frame--oryx { display: none; }
.hero__layer--oryx .oryx-stage { z-index: auto; }
/* the monument: a warm rim on the sun side */
.hero__layer--oryx .oryx-stage__inner { filter: drop-shadow(8px 2px 20px rgba(255, 208, 160, .42)); }
/* the overture: no symbol in the photo at rest (the header logo is the only one) */
[data-hero="c"] .oryx-stage:not(.is-overture) { visibility: hidden; }
/* during the overture the header logo's symbol waits for the oryx to land in it (logo-header.svg: the symbol starts at
   2410 / 2945 of the width; logo-header-ar.svg: 2779 / 3315) */
.c-overture .brand__logo--light img { clip-path: inset(-10% 18.3% -10% 0); }
@media (max-width: 760px) { .c-overture .brand__logo--light img { clip-path: inset(-10% 16.2% -10% 0); } }
.oryx-stage.is-static img { position: absolute; inset: 0; margin: auto; width: auto; height: 92%; }
[data-plate="painted"] .oryx-stage, [data-plate="painted"] .hero__frame--fg { display: none; }
/* fallback photo (v2, painted oryx): its own framing, whatever the flag plate's breakpoints say */
[data-plate="painted"] .hero { --px: 30% !important; --py: 42% !important; --pz: 1 !important; }

.hero__veil { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
/* warm morning light: travels right to left once during the intro */
.hero__light {
  position: absolute; inset: -10%; mix-blend-mode: soft-light; opacity: 0;
  background: radial-gradient(48% 60% at 78% 52%, rgba(255, 214, 170, .9), rgba(255, 214, 170, 0) 70%);
}
/* soft ivory air behind the copy so small text stays AA over any cloud */
.hero__air {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 72% at 86% 50%, rgba(248, 242, 236, .62), rgba(248, 242, 236, 0) 72%),
    linear-gradient(180deg, rgba(248, 242, 236, .55) 0, rgba(248, 242, 236, 0) 22%);
}
/* intro wipe: a dawn-coloured cover with a dry-brush front, retreating right to left (transform only) */
.hero__wipe {
  position: absolute; top: 0; bottom: 0; left: 0; width: 160%;
  background: #d8c7bd;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 62.6% 100% no-repeat, url("../img/brush-edge-r.svg") 72.67% 0 / 14% 100% no-repeat;
  mask: linear-gradient(#000, #000) 0 0 / 62.6% 100% no-repeat, url("../img/brush-edge-r.svg") 72.67% 0 / 14% 100% no-repeat;
  transform: translateX(-78%);
}
/* photo -> light (boundary rule a): the ivory brush edge. Its fill carries the sun's apricot spill (#edge-spill, the same
   horizontal profile as .pillars::before, so the cut and the next block register to the pixel); the ribbon is the
   seams' gradient family, bright over the sunlit sea and gone before the dark rocks (#edge-ink through #edge-m) */
.hero__edge { position: absolute; inset: auto 0 -1px; width: 100%; height: clamp(70px, 9vw, 150px); overflow: visible; }
.hero__edge .edge-fill { fill: url(#edge-spill); }

.hero__inner { position: relative; z-index: 3; width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding: calc(var(--header-h) + 3vh) var(--gutter) clamp(120px, 15vh, 180px); }
/* landscape: the block is lifted just enough that the sun (the photo's light, «إشراقاً») is never pinned under a button
   (--hero-lift, motion.js); portrait: --hero-push opens the signature's pocket above the headline (concept A) */
.hero__inner { top: calc(-1 * var(--hero-lift, 0px)); }
/* the copy spans grid columns 1-6 (1280 and up), 1-7 (1024-1279), 1-8 below: 100% = the content width */
.hero__copy { --span: 6; max-width: calc((100% - 11 * var(--grid-gap)) * var(--span) / 12 + (var(--span) - 1) * var(--grid-gap)); }
@media (max-width: 1279px) { .hero__copy { --span: 7; } }
@media (max-width: 1023px) { .hero__copy { --span: 8; } }
.hero h1 { font-size: var(--fs-h1); line-height: var(--lh-display); font-weight: 700; }
/* the sub-line: the lead role, never wider than the headline, balanced into even lines */
.hero__sub { max-width: 26em; font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: balance; color: #3d3633; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--space-cta); }
.hero__actions .btn { min-inline-size: 11.5rem; justify-content: space-between; }
.hero__actions .btn--ghost { justify-content: center; }
@media (min-width: 1024px) { .hero h1 .line { white-space: nowrap; } }
/* short landscape screens (laptops 720-820 px tall): the copy keeps the signature's pocket above line 2 and the sun clear
   of the buttons by taking the system's tighter steps (heading -> sub 16, sub -> buttons 24, sub leading 1.6) */
@media (min-width: 1024px) and (max-height: 820px) and (orientation: landscape) {
  .hero h1 + .hero__sub { margin-top: var(--s-4); }
  .hero__sub { line-height: 1.6; }
  .hero__actions { margin-top: var(--s-5); }
}

/* ---------------------------------------------------------------- the 4-up / 5-up row component (pillars, facts, values) */
.row4, .row5 { display: grid; column-gap: var(--grid-gap); }
.row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- icons: one thin-line set (24 grid, stroke 1.25, round caps,
   one brand-red focal dot). Bordeaux on light, copper on night; never boxed in a tile. The glyphs keep ~3 units of air
   inside the 24 box, so each icon is pulled 10 % toward the reading edge to sit flush (optically) with the Arabic below it. */
.ico {
  --ico-s: 28px; width: var(--ico-s); height: var(--ico-s); flex: none; display: block; overflow: visible;
  fill: none; stroke: var(--ico-c, var(--bordeaux)); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  --ico-dot: var(--red);
}
.on-dark .ico { --ico-c: var(--copper); }
.pillar__ico, .value__ico { margin-inline-start: calc(var(--ico-s) * -.1); }

/* ---------------------------------------------------------------- pillars
   the sun falls on the page: under the hero cut the apricot spill fades into the day (B0) */
.pillars { position: relative; z-index: 2; padding-top: var(--space-head); }
.pillars::before {
  content: ""; position: absolute; inset: 0 0 auto; height: clamp(260px, 28vw, 400px); z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(248, 242, 236, 0) 0, rgba(248, 242, 236, .5) clamp(110px, 12vw, 170px), rgba(248, 242, 236, .86) clamp(190px, 21vw, 300px), var(--ivory) 100%),
    linear-gradient(90deg, #F8F2EC 0, #F8F2EC 40%, #F8E8DA 77%, #F8EDE3 100%);
}
.pillar { position: relative; display: grid; align-content: start; gap: var(--s-1); padding-block: 6px; }
/* dividers stand in the middle of the grid gap */
.pillar + .pillar::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: calc(var(--grid-gap) / -2); width: 1px; background: var(--line); transform-origin: 50% 0; transform: scaleY(var(--draw, 1)); }
.pillar__ico { --ico-s: 36px; margin-bottom: var(--s-3); }
.pillar__title { font: 700 var(--fs-h4)/var(--lh-h4) var(--f-ar); }
.pillar__text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }

/* ---------------------------------------------------------------- about (split C: 6 | 1 | 5) */
.about { position: relative; z-index: 2; padding-top: var(--section-y); }
.about__main { grid-column: 1 / span 6; }
.about__statement { grid-column: 8 / span 5; grid-row: 1; align-self: end; }
.statement { font: 500 var(--fs-statement)/var(--lh-statement) var(--f-ar); color: var(--ink); text-wrap: balance; }
.statement .line { display: block; }
.statement .line + .line { color: var(--bordeaux); }
.statement__sub { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font: 600 var(--fs-small)/var(--lh-small) var(--f-ar); color: var(--muted); }
.statement__sub::before { content: ""; width: 34px; height: 2px; background: var(--red); }
.facts { grid-column: 1 / -1; margin-top: var(--s-9); }
.fact { position: relative; padding-top: var(--s-5); }
.fact::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--ink); opacity: .22; transform-origin: 100% 50%; transform: scaleX(var(--draw, 1)); }
/* info label: inline, Arabic + Latin on one baseline (the same component as the contact channels) */
.fact dt, .channel dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font: 600 var(--fs-small)/var(--lh-small) var(--f-ar); color: var(--bordeaux); }
.fact dd { margin-top: var(--s-2); font: 600 var(--fs-h4)/var(--lh-h4) var(--f-ar); text-wrap: balance; }

/* ---------------------------------------------------------------- services (split A: 4 | 1 | 7) — the heading stays beside the index */
.services { position: relative; z-index: 2; padding-top: var(--section-y); }
.services__head { grid-column: 1 / span 4; position: sticky; top: calc(72px + 40px); align-self: start; }
.services__note { max-width: 20em; color: var(--muted); text-wrap: balance; }
.svc-index { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.svc { border-bottom: 1px solid var(--line); position: relative; }
/* row = [text stack | arrow]: name (h3), Latin label, description; the text is flush with the hairline */
.svc__link {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--s-5); padding-block: 28px;
  text-decoration: none; color: inherit;
}
.svc__link::before {
  content: ""; position: absolute; inset-block: 0; inset-inline: -20px; z-index: -1; background: var(--paper-2);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--ease-expo);
}
.svc__ico { --ico-s: 30px; grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: calc((var(--fs-h3) * var(--lh-h3) - var(--ico-s)) / 2); transition: transform .6s var(--ease-expo); }
.svc.is-active .svc__ico { transform: translateY(-2px); }
.svc__head { grid-column: 2; display: block; }
.svc__name { position: relative; display: inline-block; padding-bottom: 8px; font: 600 var(--fs-h3)/var(--lh-h3) var(--f-ar); text-wrap: balance; }
.svc__en { display: block; text-align: right; transition: color .4s var(--ease); }
.svc__brush { position: absolute; right: 0; bottom: -3px; width: 100%; max-width: none; height: 12px; clip-path: inset(0 0 0 100%); transition: clip-path .8s var(--ease-expo); }
.svc__desc { grid-column: 2; display: block; margin-top: var(--s-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); max-width: 34em; text-wrap: pretty; transition: color .5s var(--ease); }
.svc__go {
  grid-column: 3; grid-row: 1 / span 2;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .3); color: var(--ink);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s, transform .6s var(--ease-expo);
}
.svc__go svg { width: 16px; height: 16px; }
.svc.is-active .svc__link::before { transform: scaleX(1); }
.svc.is-active .svc__brush, .svc__link:focus-visible .svc__brush { clip-path: inset(0 0 0 0); }
.svc.is-active .svc__en { color: var(--bordeaux); }
.svc.is-active .svc__desc { color: var(--ink); }
.svc.is-active .svc__go { background: var(--bordeaux); color: #fff; box-shadow: none; transform: translateX(-6px); }

/* ---------------------------------------------------------------- sectors
   day dims toward the night (B2): ivory continues from services, ramps to paper-2, ends on dusk under the seam */
.sectors {
  position: relative; z-index: 2; text-align: center;
  padding-block: var(--section-y) calc(var(--section-y) + .67 * var(--seam-h));   /* the seam's crest covers ~.67 seam-h at the centre */
  background: linear-gradient(180deg, var(--ivory) 0, var(--paper-2) clamp(200px, 22vw, 320px), var(--paper-2) 52%, var(--dusk) 100%);
}
.sectors .label { margin-bottom: var(--space-head); }
.sectors__list { display: grid; justify-items: center; }
.sector { display: grid; justify-items: center; }
.sector__ar { font: 600 var(--fs-list)/var(--lh-list) var(--f-ar); text-wrap: balance; }
.sector__en { margin-top: var(--s-1); }
.sector__ico { --ico-s: 34px; margin-bottom: var(--s-3); }
.sector + .sector { margin-top: var(--s-7); }

/* ---------------------------------------------------------------- chapter seams: a brush ribbon from the logo is the boundary
   (static shape + a compositor-only wipe: outer translateX, inner counter-translate, dry-brush mask on the front) */
.seam { position: relative; z-index: 3; height: 0; pointer-events: none; }
.seam__shape { position: absolute; left: 0; bottom: -2px; width: 100%; height: var(--seam-h); overflow: visible; }
.seam--in .seam__shape path, .seam--foot .seam__shape path { fill: var(--night); }
.seam--out .seam__shape path { fill: var(--ivory); }
/* the night falls again before the footer: the same curve, flatter, no ribbon (the red is spent in the contact block) */
.seam--foot { --seam-h: var(--seam-foot-h); }
.seam__wipe, .contact__wipe {
  position: absolute; overflow: hidden;
  -webkit-mask: url("../img/brush-edge.svg") 0 0 / 16% 100% no-repeat, linear-gradient(#000, #000) 100% 0 / 84.2% 100% no-repeat;
  mask: url("../img/brush-edge.svg") 0 0 / 16% 100% no-repeat, linear-gradient(#000, #000) 100% 0 / 84.2% 100% no-repeat;
}
.seam__wipe { left: 0; width: 100%; bottom: -62px; height: calc(var(--seam-h) + 120px); }
.seam__wipe-in, .contact__wipe-in { position: absolute; inset: 0; }
.seam__wipe-in svg { position: absolute; left: 0; bottom: 60px; width: 100%; height: var(--seam-h); overflow: visible; }

/* ---------------------------------------------------------------- approach (night chapter, split B: 5 | 1 | 6)
   warm black, a faint bordeaux light at its heart, and an ember rising at its end so the seam-out ribbon reads as dawn (B4) */
.approach {
  position: relative; z-index: 2; color: var(--on-dark); overflow: clip;
  background:
    linear-gradient(0deg, rgb(var(--ember) / .17) 0, rgb(var(--ember) / 0) min(56vh, 520px)),
    radial-gradient(42% 52% at 14% 50%, rgb(var(--ember) / .10), rgb(var(--ember) / 0) 72%),
    var(--night);
}
.approach__pin { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(110px, 13vh, 150px); }
.approach__wm { position: absolute; top: 58%; left: -29vw; height: min(118vh, 1100px); aspect-ratio: 545 / 770; transform: translateY(-50%) rotate(-6deg); pointer-events: none; }
.approach__wm svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .06; will-change: opacity; }
.approach__wm .approach__wm-head { opacity: .035; }
.approach__grid { position: relative; align-items: center; }
.approach__head { grid-column: 1 / span 5; }
.steps-wrap { --track-pad: clamp(20px, 3vw, 44px); grid-column: 7 / span 6; position: relative; padding-inline-start: var(--track-pad); }
.steps__track { position: absolute; top: 8px; bottom: 8px; right: 0; width: 1px; background: var(--line-dark); }
.steps__fill { position: absolute; inset: 0; background: var(--red); transform: scaleY(0); transform-origin: 50% 0; will-change: transform; }
/* number, title and Latin label share one baseline; the dot sits on the centre of the Arabic letters */
.step { --step-pad: var(--s-5); position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: first baseline; padding-block: var(--step-pad); border-bottom: 1px solid var(--line-dark); }
.step:last-child { border-bottom: 0; }
.step::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--track-pad) - 4px); top: calc(var(--step-pad) + .79 * var(--fs-statement) - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1.5px var(--on-dark-muted); transition: background-color .4s, box-shadow .4s; }
.step__no { font: 560 var(--fs-num)/1 var(--f-lat); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-num); color: var(--sand); direction: ltr; text-align: right; }
.step__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font: 600 var(--fs-statement)/var(--lh-h3) var(--f-ar); color: var(--on-dark); transition: color .5s var(--ease); }
.step__title .lat { color: var(--on-dark-muted); }
.step__ico { --ico-s: 30px; align-self: center; }
.step__body { grid-column: 2; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease-expo), opacity .5s var(--ease); }
.step__body > div { overflow: hidden; min-height: 0; }
.step__body p { padding-top: var(--s-2); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--on-dark-muted); max-width: 30em; text-wrap: balance; }
.approach.is-pinned .step:not(.is-active) .step__title { color: var(--on-dark-muted); }
.approach.is-pinned .step:not(.is-active) .step__body { grid-template-rows: 0fr; opacity: 0; }
.approach.is-pinned .step.is-active .step__no { color: var(--on-dark); }   /* red at 13 px on night fails AA: red stays on the dot and the track */
.approach.is-pinned .step.is-active::before, .approach.is-pinned .step.is-done::before { background: var(--red); box-shadow: none; }

/* ---------------------------------------------------------------- clients
   dawn (B5): a rose spill from the photo under the ribbon's heavy end, faded in from 0 so the seam keeps one edge */
.clients {
  position: relative; z-index: 2; isolation: isolate; background: var(--ivory);
  padding-block: max(24px, calc(var(--section-y) - .75 * var(--seam-h))) var(--section-y);   /* the ivory crest already gives ~.75 seam-h */
}
.clients::before {
  content: ""; position: absolute; inset: 0 0 auto; height: min(70vh, 620px); z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 22% 30%, rgb(var(--dawn) / .16), rgb(var(--dawn) / 0) 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 clamp(90px, 11vw, 170px));
  mask: linear-gradient(180deg, transparent 0, #000 clamp(90px, 11vw, 170px));
}
.clients__head { margin-bottom: var(--space-head); }
.clients__list { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.clients__list::before, .clients__list::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background: var(--ink); opacity: .2; transform-origin: 100% 50%; transform: scaleX(var(--draw, 1)); }
.clients__list::before { top: 0; }
.clients__list::after { bottom: 0; }
.client { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s-5); padding: var(--s-7) 20px var(--s-6); text-align: center; }
.client + .client::before { content: ""; position: absolute; right: 0; inset-block: 22%; width: 1px; background: var(--ink); opacity: .16; transform-origin: 50% 0; transform: scaleY(var(--draw, 1)); }
/* logos sized by their visible ink, not their box (equal optical weight; --logo-h per mark, measured) */
.client__logo { height: clamp(84px, 8.4vw, 120px); width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; }
.client__logo img { height: var(--logo-h, 100%); width: auto; max-width: min(220px, 100%); object-fit: contain; filter: grayscale(1) brightness(.42) contrast(1.15); opacity: .92; transition: filter .6s var(--ease), opacity .6s var(--ease), transform .8s var(--ease-expo); }
.client__logo img.is-dark { filter: grayscale(1); }
.client__logo--lockup { direction: ltr; }
.client__logo--lockup img { --logo-h: 84%; }   /* IMAR: a light, open mark plus its wordmark (sqrt(w x h) ~ 110 at 1440) */
.client__logo--dense img { --logo-h: 92%; }    /* MUNTADA: the densest ink of the three (~ 95) ; SBF stays at 100 % (~ 103) */
.client__word { font: 560 21px/1.05 var(--f-lat); letter-spacing: .1em; color: #2b2b2b; direction: ltr; text-align: left; transition: color .6s var(--ease); }
.client__word span { display: block; font-weight: 350; font-size: var(--fs-num); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.client:hover .client__logo img, .client:focus-within .client__logo img { filter: none; opacity: 1; transform: scale(1.04); }
.client__name { font: 600 var(--fs-h4)/var(--lh-h4) var(--f-ar); text-wrap: balance; }
.client__name .lat { display: block; margin-top: var(--s-1); }

/* ---------------------------------------------------------------- works («أعمالنا»): real projects, one card system.
   Cover = the client's own tint (each client's palette, never ours) + concentric rings + a ghost numeral, and the real
   deliverable as a plate when there is one (else the official mark). Square corners throughout (the SBF rule, and v3's
   sheets). Hover: the card lifts, the tint turns, the plate rises. The ONE --section-y above is the clients' bottom. */
.works { position: relative; z-index: 2; padding-bottom: var(--section-y); }
.works__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-tight) var(--s-9); margin-bottom: var(--space-head); }
.works__intro { max-width: 22em; color: var(--muted); text-wrap: balance; }
.works__list { display: grid; grid-template-columns: 1.24fr 1fr 1fr; gap: var(--s-4); counter-reset: none; }
.work {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); box-shadow: 0 0 0 1px var(--card-line), 0 6px 38px rgba(31, 26, 22, .025);
  transition: translate .65s var(--ease), box-shadow .65s var(--ease);   /* translate / scale for hover: transform belongs to the reveal */
}
.work--sbf { --tint: radial-gradient(ellipse at 28% 80%, rgba(186, 9, 26, .16), transparent 55%), linear-gradient(150deg, #E5DDD0 0%, #FCF8F2 58%, #DED1C4 100%); --ring: 120 41 42; --ghost: rgba(75, 48, 33, .06); }
.work--muntada { --tint: linear-gradient(150deg, #D8E4ED, #F7FAFC 57%, #D9E2EB); --ring: 29 80 130; --ghost: rgba(29, 60, 100, .07); }
.work--imar { --tint: linear-gradient(150deg, #D5E0F0, #FFFFFF 62%, #C5D7E8); --ring: 29 80 130; --ghost: rgba(29, 60, 100, .07); }
.work__cover { position: relative; isolation: isolate; overflow: hidden; height: clamp(220px, 22vw, 335px); background: var(--cover-base); }
.work__cover::before { content: ""; position: absolute; inset: -18%; z-index: -2; background: var(--tint); transform: rotate(-7deg) scale(1.05); transition: transform 1.2s var(--ease); }
.work__rings { position: absolute; z-index: -1; right: -13%; bottom: -36%; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(var(--ring) / .2); box-shadow: 0 0 0 34px rgb(var(--ring) / .055), 0 0 0 68px rgb(var(--ring) / .03); transform: rotate(25deg); transition: transform 1.2s var(--ease); }
.work__ghost { position: absolute; z-index: -1; left: -4%; bottom: -17%; font: 350 clamp(170px, 22vw, 350px)/1 var(--f-lat); letter-spacing: -.08em; color: var(--ghost); direction: ltr; pointer-events: none; }
/* the deliverable, as a print laid on the client's tint (the photo keeps its own colours) */
.work__plate { position: absolute; inset-inline-start: 9%; top: 15%; width: 82%; aspect-ratio: 16 / 9; display: block; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 26px 50px -14px rgba(31, 22, 16, .32); transition: translate .9s var(--ease-expo), box-shadow .9s var(--ease-expo); }
.work__plate img { width: 100%; height: 100%; object-fit: cover; }
.work--muntada .work__plate img { object-position: 40% 50%; }
.work__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; direction: ltr; transition: translate .8s var(--ease-expo), scale .8s var(--ease-expo); }
.work__mark img { height: 46%; width: auto; filter: drop-shadow(0 20px 16px rgba(19, 14, 10, .12)); }
.work__word { font: 560 26px/1.05 var(--f-lat); letter-spacing: .1em; color: #14306A; }
.work__word span { display: block; margin-top: 4px; font-weight: 350; font-size: var(--fs-num); letter-spacing: .3em; text-transform: uppercase; color: #3F5F8F; }
.work__info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-6); }
.work__no { font: 560 var(--fs-micro)/var(--lh-micro) var(--f-lat); letter-spacing: var(--tr-micro); color: var(--muted); }
.work__title { margin-top: var(--s-1); font: 600 var(--fs-h3)/var(--lh-h3) var(--f-ar); text-wrap: balance; }
.work__client { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font: 600 var(--fs-small)/var(--lh-small) var(--f-ar); color: var(--bordeaux); }
.work__desc { font-size: var(--fs-btn); line-height: var(--lh-body); color: var(--muted); max-width: 30em; }
.work__link { margin-top: auto; padding-top: var(--s-3); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--bordeaux); font: 700 var(--fs-small)/1.2 var(--f-ar); text-decoration: none; transition: gap .45s var(--ease-expo); }
.work__link svg { width: 18px; height: 18px; transform: scaleX(-1); }
.work__link:hover, .work__link:focus-visible { gap: 14px; }
@media (hover: hover) and (pointer: fine) {
  .work:hover { translate: 0 -5px; box-shadow: 0 0 0 1px var(--card-line), 0 22px 60px rgba(20, 18, 15, .085); }
  .work:hover .work__cover::before { transform: rotate(1deg) scale(1.13); }
  .work:hover .work__rings { transform: rotate(40deg) scale(1.04); }
  .work:hover .work__plate { translate: 0 -8px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 36px 60px -16px rgba(31, 22, 16, .36); }
  .work:hover .work__mark { translate: 0 -8px; scale: 1.05; }
}

/* ---------------------------------------------------------------- vision: the second sunrise
   the band opens like a screen (transform-only reveal); champagne at its top (B6), the title stands on the horizon light,
   an ivory brush edge closes it (rule a), and the gold of the horizon spills onto the page (B7). The boundary to the
   contact chapter (B8) belongs to the contact block: its top ramps from the day into paper-2 inside the gap. */
.vision { position: relative; z-index: 2; }
.vision__band { position: relative; height: clamp(520px, 78vh, 820px); }
.vision__clip { position: absolute; inset: 0; overflow: hidden; background: #f1d6bd; transform-origin: 50% 50%; will-change: transform; }
.vision__counter { position: absolute; inset: -2px; transform-origin: 50% 50%; will-change: transform; }
.vision__img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; object-position: 50% 68%; will-change: transform; }
.vision__clip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(246, 225, 198, .40) 0, rgba(246, 225, 198, 0) 50%); }
.vision__edge { position: absolute; inset: auto 0 -1px; z-index: 1; width: 100%; height: clamp(44px, 9vw, 150px); pointer-events: none; }
.vision__band::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: min(46vh, 380px); pointer-events: none; z-index: 0;
  background: radial-gradient(52% 100% at 76% 0, rgb(var(--horizon) / .34), rgb(var(--horizon) / 0) 100%);   /* 76 % = the sun's x in the band */
}
/* the title is anchored to the band's bottom, over the horizon light, at the H1's size (never larger) */
.vision__title-wrap { position: absolute; inset: auto 0 0; z-index: 2; padding-bottom: var(--section-y-s); }
.vision__title { font-size: var(--fs-h1); font-weight: 600; }
.vision__body { position: relative; z-index: 1; margin-top: var(--space-head); }
.vision__lead { grid-column: 1 / span 7; max-width: none; font-size: var(--fs-h3); line-height: 1.6; font-weight: 500; }
.vision__values { grid-column: 1 / -1; margin-top: var(--s-9); }
.value { position: relative; padding-top: var(--s-5); }
.value::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--ink); opacity: .2; transform-origin: 100% 50%; transform: scaleX(var(--draw, 1)); }
.value__ico { margin-bottom: var(--s-3); }
.value__ar { display: block; font: 600 var(--fs-h4)/var(--lh-h4) var(--f-ar); }
.value__en { display: block; margin-top: var(--s-1); text-align: right; }

/* ---------------------------------------------------------------- contact (split A: channels 1-4, form 6-12)
   B8: the day ramps into paper-2 inside the gap above the eyebrow (transparent at the top, so the vision's horizon glow
   runs on without a cut); B9: paper-2 ramps to --dusk, then the night seam into the footer */
.contact {
  position: relative; z-index: 2; overflow: clip;
  padding-bottom: calc(var(--section-y) + .62 * var(--seam-foot-h));   /* the footer seam rises ~.62 seam-h under the form */
  background: linear-gradient(180deg, rgb(248 242 236 / 0) 0, var(--paper-2) clamp(200px, 22vw, 320px), var(--paper-2) calc(100% - clamp(220px, 24vw, 340px)), var(--dusk) 100%);
}
.contact__cta { position: relative; padding-block: var(--section-y) var(--space-head); }
.contact__ribbons { position: absolute; left: 0; top: 10%; bottom: 22%; width: min(34vw, 520px); pointer-events: none; }   /* clear of the form sheet below */
.contact__drift { position: absolute; inset: 0; will-change: transform; }
.contact__wipe { inset: -40px 0 -40px -80px; }
.contact__wipe-in svg { position: absolute; left: 80px; top: 40px; bottom: 40px; width: calc(100% - 80px); height: calc(100% - 80px); overflow: visible; }
.contact__cta-inner { position: relative; grid-column: 1 / span 7; }
.contact__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); max-width: 32em; text-wrap: balance; }
.contact__grid { align-items: start; }
/* both column titles start on one line: the channels take the form sheet's inner padding */
.channels { grid-column: 1 / span 4; padding-top: var(--form-pad); }
.form { grid-column: 6 / span 7; }
.channels h3, .form h3 { font: 600 var(--fs-h3)/var(--lh-h3) var(--f-ar); margin-bottom: var(--s-5); text-wrap: balance; }
.channels dl { display: grid; }
.channel { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.channel:last-of-type { border-bottom: 1px solid var(--line); }
.channel__ico { --ico-s: 22px; stroke-width: 1.4; align-self: center; margin-inline-end: var(--s-1); }
.channel dd { margin-top: var(--s-2); font: 600 var(--fs-h4)/var(--lh-h4) var(--f-ar); }
.channel dd a { text-decoration: none; }
.channel dd .lat { font-size: var(--fs-btn); font-weight: 560; letter-spacing: .02em; }

/* form: an ivory sheet with a hairline, like the rest of the page (no floating card) */
.form { background: var(--ivory); padding: var(--form-pad); border: 1px solid var(--line); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); align-content: start; }
.field label { font: 600 var(--fs-small)/1.5 var(--f-ar); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field__control { position: relative; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 50px; padding: 10px 2px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-strong); background: transparent;
  font: 400 var(--fs-btn)/1.6 var(--f-ar); color: var(--ink);
  outline: 2px solid transparent; outline-offset: 2px; appearance: none;
  transition: border-color .3s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 4px 55%; padding-left: 24px; }
.field [dir="ltr"] { text-align: right; }
.field [dir="ltr"]::placeholder { text-align: right; }
/* focus mark: a red rule drawn exactly on the control's bottom edge */
.field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease-expo); pointer-events: none; }
.field__control:focus-within .field__line { transform: scaleX(1); }
.field__meta { display: flex; justify-content: space-between; gap: var(--s-3); }
.field__err { font-size: var(--fs-small); line-height: 1.5; color: var(--bordeaux); }
.field__count { margin-inline-start: auto; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: var(--bordeaux); }
::placeholder { color: var(--muted); opacity: 1; }
.form__consent { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); margin: 0 0 var(--s-5); text-wrap: pretty; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form__status { margin-top: 20px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: var(--paper-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }
.form__status::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: 10px; background: var(--red); }   /* the brand rule, not a side stripe */
.form__status:empty { display: none; }
.form__status .btn-copy { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .4); font: 600 var(--fs-small)/1 var(--f-ar); }
.form__status .btn-copy:hover { background: var(--ink); color: var(--ivory); }

/* ---------------------------------------------------------------- footer (night) */
.site-footer { position: relative; z-index: 2; background: var(--night); color: var(--on-dark); padding-block: var(--s-9) 32px; }
.footer__top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-6) var(--s-9); align-items: start; }
.footer__brand { height: 80px; aspect-ratio: 2117 / 753; display: block; }
.footer__brand img { width: 100%; height: 100%; }
.footer__nav ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: var(--s-2) 56px; justify-content: center; }
.footer__nav a { text-decoration: none; color: var(--on-dark-muted); font-size: var(--fs-btn); line-height: var(--lh-body); transition: color .3s; }
.footer__nav a:hover { color: var(--ivory); }
.footer__reach { display: grid; gap: var(--s-2); justify-items: end; font-size: var(--fs-btn); line-height: var(--lh-body); color: var(--on-dark-muted); }
.footer__reach a { color: var(--on-dark); text-decoration: none; }
.social { display: flex; gap: 10px; margin-top: 8px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(248, 242, 236, .28); color: var(--on-dark); transition: background-color .35s, color .35s, box-shadow .35s; }
.social a:hover { background: var(--ivory); color: var(--ink); box-shadow: none; }
.social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) 28px; margin-top: var(--space-head); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--on-dark-muted); }
.footer__legal { display: flex; gap: var(--s-5); }
.footer__legal a { color: var(--on-dark-muted); text-decoration: none; }
.to-top { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--on-dark); }
.to-top span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(248, 242, 236, .3); transition: transform .5s var(--ease-expo), background-color .35s; }
.to-top:hover span { transform: translateY(-4px); background: rgba(248, 242, 236, .08); }
.to-top svg { width: 15px; height: 15px; }
/* touch: every footer link gets a 44 px tap area */
@media (pointer: coarse) {
  .footer__nav a, .footer__reach a, .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__nav ul { row-gap: 0; }
  .footer__reach { gap: 0; }
}

/* ---------------------------------------------------------------- intro gating (hero only): the photo paints on the first frame */
/* the copy block itself is hidden until the release too: its sun lift (--hero-lift) is set while it waits, never as a shift */
.intro-pending .hero [data-intro], .intro-pending .hero__inner, .intro-pending .site-header { visibility: hidden; }
.intro-pending .hero__layer { transform: scale(1.06); filter: brightness(.86) saturate(.9); }
.intro-pending .hero__wipe { transform: translateX(-34%); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
  /* the facts ledger turns 2 x 2 before its answers break into three lines */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); }
}
@media (max-width: 1180px) {
  .site-nav, .site-header .lang { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 1023px) {
  .about__main, .about__statement, .services__head, .svc-index, .approach__head, .steps-wrap, .channels, .form, .contact__cta-inner { grid-column: 1 / -1; }
  .about__statement { grid-row: auto; margin-top: var(--s-9); }
  .services__head { position: static; margin-bottom: var(--space-head); }
  .approach__head { margin-bottom: var(--space-head); }
  .channels { padding-top: 0; margin-bottom: var(--space-head); }
  .vision__lead { grid-column: 1 / -1; }
  .pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .pillar:nth-child(3)::before { display: none; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__nav ul { justify-content: start; }
  .footer__reach { justify-items: start; }
}
@media (max-width: 1023px) {
  .works__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work--imar { grid-column: 1 / -1; flex-direction: row; }
  .work--imar .work__cover { flex: 0 0 50%; height: auto; min-height: 250px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  /* the closing ribbon stays beside the text, never through it */
  .contact__cta-inner { grid-column: 1 / span 7; }
}
/* portrait hero: art-directed plate, headline over the sky, actions over the rock */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 600px) {
  .hero { min-height: max(600px, 100svh); align-items: stretch; }
  /* art-directed 3:4 portrait plate (sky continued above the master): the flag sits between the sub-line and the
     buttons, its pole near the left edge, the oryx in the open sky up and to its right, the pole's foot and the cairn
     left of the buttons. Portrait tablets (3:4) show the whole plate (city and sun included); phones are height-limited
     and show its left part (js reads these values back) */
  .hero { --px: 0%; --py: 38%; --pz: 1; }
  [data-plate="painted"] .hero { --px: 46% !important; --py: 40% !important; --pz: 1 !important; }
  .hero__layer { transform-origin: 40% 60%; }
  .hero__air { background: linear-gradient(180deg, rgba(248, 242, 236, .88) 0, rgba(248, 242, 236, .72) 30%, rgba(248, 242, 236, 0) 43%), linear-gradient(0deg, rgba(20, 12, 10, .55) 0, rgba(20, 12, 10, 0) 26%); }
  .hero__inner { display: flex; flex-direction: column; padding: calc(var(--header-h) + var(--s-5) + var(--hero-push, 0px)) var(--gutter) clamp(28px, 5vh, 44px); top: 0; }
  .hero__copy { max-width: 560px; display: contents; }
  .hero__sub { color: #2e2825; max-width: 32em; }
  /* the buttons stand at the reading start (right) and keep their own width, so the pole runs down to its cairn beside
     them instead of being planted in a button */
  .hero__actions { margin-top: auto; padding-top: var(--s-5); justify-content: flex-start; }
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__actions .btn--ghost { --btn-bg: rgba(248, 242, 236, .9); box-shadow: none; }
  .hero__edge { height: 44px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  /* one compact pair: the primary 52 tall, the secondary a lighter 46 px pill (a bare text link could not guarantee AA
     over the mixed mountains and city lights) */
  .hero__actions { flex-direction: column; align-self: flex-start; width: min(100%, 15rem); gap: 10px; }
  .hero__actions .btn { width: 100%; min-height: 52px; }
  .hero__actions .btn--ghost { min-height: 46px; font-size: var(--fs-btn-sm); }
}
@media (max-width: 760px) {
  :root { --header-h: 70px; }
  .brand { height: 44px; aspect-ratio: 3315 / 753; }
  .site-header.is-scrolled .brand { height: 40px; }
  .site-header.is-scrolled .site-header__bar { height: 64px; }
  .menu__brand { height: 56px; }
  .facts { grid-template-columns: 1fr; }
  .svc__link { padding-block: 20px; }
  .svc__go { width: 42px; height: 42px; }
  .svc.is-active .svc__link::before { transform: scaleX(0); }
  .svc.is-active .svc__go { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(34, 34, 34, .3); transform: none; }
  .svc.is-active .svc__brush { clip-path: inset(0 0 0 100%); }
  .svc.is-active .svc__en { color: var(--muted); }
  .svc.is-active .svc__desc { color: var(--muted); }
  .svc__link:active .svc__brush { clip-path: inset(0 0 0 0); }
  .approach__pin { min-height: 0; padding-block: 120px 110px; }
  .approach__wm { height: 70vh; top: 60%; left: -46vw; }
  .approach__wm svg { opacity: .07; }
  .step { --step-pad: 20px; grid-template-columns: 32px minmax(0, 1fr); }
  .clients__list { grid-template-columns: 1fr; }
  .client { grid-template-columns: 124px 1fr; justify-items: start; align-items: center; text-align: right; gap: 20px; padding: 26px 0; }
  .client + .client::before { inset: 0 0 auto; width: auto; height: 1px; }
  .client__logo { height: 80px; width: 124px; justify-content: flex-start; gap: 8px; }
  .client__logo--lockup img { --logo-h: 62%; }   /* the IMAR lockup fits the 124 px logo column (was 145 px wide) */
  .client__word { font-size: 13px; }
  .client__word span { font-size: 10.5px; letter-spacing: .12em; }
  .client__name .lat { text-align: right; }
  .vision__band { height: clamp(440px, 62svh, 560px); }
  .works__list { grid-template-columns: 1fr; }
  .work--imar { flex-direction: column; }
  .work--imar .work__cover { flex: none; min-height: 0; height: 240px; }
  .work__cover { height: 240px; }
  .work__info { padding: 20px 20px 24px; }
  .svc__ico { --ico-s: 26px; }
  .svc__link { column-gap: var(--s-4); }
  .value { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); align-items: center; }
  .value__ico { grid-row: 1 / span 2; margin: 0; }   /* less empty sky above the title on phones */
  .values { grid-template-columns: 1fr; row-gap: 0; }
  .value { padding-block: var(--s-4); }
  .value:last-child { padding-bottom: 0; }
  .contact__ribbons { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .footer__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: none; gap: var(--s-2) var(--s-5); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer { padding-top: 64px; }
}
@media (max-width: 600px) {
  /* the form sheet runs edge to edge on phones */
  .form { margin-inline: calc(-1 * var(--gutter)); padding: 28px 20px; border-inline: 0; }
}
@media (max-width: 380px) {
  .pillars__list { grid-template-columns: 1fr; }
  .pillar + .pillar::before { display: none; }
  .btn { padding-inline: 20px 8px; font-size: var(--fs-btn-sm); }
  .label .lat, .fact dt .lat, .channel dt .lat, .svc__en, .sector__en, .step__title .lat, .value__en, .client__name .lat, .work__client .lat, .menu__nav a .lat { font-size: 10.5px; letter-spacing: .16em; }
  .signature { letter-spacing: .2em; gap: 10px; }
  .signature::before, .signature::after { width: 28px; }
}
@media (forced-colors: active) {
  .display .line--accent { color: CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .intro-pending .hero [data-intro], .intro-pending .hero__inner, .intro-pending .site-header { visibility: visible; }
  .intro-pending .hero__layer { transform: none; filter: none; }
  .intro-pending .hero__wipe { transform: translateX(-78%); }
}