@charset "UTF-8";
/* ==========================================================================
   Rakhaa Investments — Contemporary Classic Design System
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette */
  --forest: #0f5a41;
  --forest-deep: #0a3f30;
  --forest-ink: #072b21;
  --forest-soft: #146b4e;
  --gold: #d7a64a;
  --gold-soft: #e7c583;
  --gold-deep: #b0812f;
  --ivory: #f5f0e6;
  --ivory-warm: #efe9db;
  --ivory-dim: #e8e1d2;
  --charcoal: #202522;
  --charcoal-mid: #4a5350;
  --charcoal-soft: #737b77;

  /* Semantic */
  --bg: var(--ivory);
  --bg-alt: var(--ivory-warm);
  --ink: var(--charcoal);
  --ink-mid: var(--charcoal-mid);
  --ink-soft: var(--charcoal-soft);
  --rule: rgba(32, 37, 34, 0.14);
  --rule-gold: rgba(215, 166, 74, 0.42);
  --rule-light: rgba(245, 240, 230, 0.16);

  /* Type families */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display-en: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: var(--font-ar);
  --font-display: var(--font-ar);
  --font-num: 'Cormorant Garamond', serif;

  /* Fluid type scale */
  --t-hero: clamp(2.5rem, 1.35rem + 5.1vw, 6.5rem);
  --t-display: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  --t-h2: clamp(1.75rem, 1.15rem + 2.6vw, 3.5rem);
  --t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.85rem);
  --t-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --t-lede: clamp(1.02rem, 0.95rem + 0.42vw, 1.3rem);
  --t-body: clamp(0.95rem, 0.92rem + 0.18vw, 1.06rem);
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;
  --t-mega: clamp(4.5rem, 2rem + 11vw, 13rem);
  --t-counter: clamp(3.25rem, 1.7rem + 6.5vw, 8rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 11rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
  --measure: 62ch;
  --maxw: 1560px;
  --maxw-narrow: 1180px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.65s;
  --dur-fast: 0.32s;

  --header-h: 84px;
}

@media (max-width: 767px) {
  :root { --header-h: 68px; }
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
html.has-lenis { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
}

/* Latin mode */
html[lang='en'] body,
body.is-ltr {
  --font-body: var(--font-en);
  --font-display: var(--font-display-en);
  line-height: 1.7;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
img { background-color: var(--ivory-dim); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.14;
  text-wrap: balance;
}
body.is-ltr h1, body.is-ltr h2, body.is-ltr h3, body.is-ltr h4 { letter-spacing: -0.015em; }
p { text-wrap: pretty; }

::selection { background: var(--gold); color: var(--forest-deep); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--gold-soft); }

.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--forest);
  color: var(--ivory);
  padding: 0.75rem 1.5rem;
  font-size: var(--t-sm);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.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;
}

/* ---------- 3. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--flush-top { padding-block-start: 0; }

.on-dark {
  background: var(--forest);
  color: var(--ivory);
  --ink: var(--ivory);
  --ink-mid: rgba(245, 240, 230, 0.72);
  --ink-soft: rgba(245, 240, 230, 0.55);
  --rule: rgba(245, 240, 230, 0.16);
}

/* Eyebrow label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-deep);
  margin-block-end: var(--s-5);
}
.on-dark .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: '';
  inline-size: 28px;
  block-size: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.75;
}
body.is-ltr .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.eyebrow__num {
  font-family: var(--font-num);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.75;
  color: var(--ink-mid);
  max-width: var(--measure);
}
.rule-gold { block-size: 1px; background: var(--rule-gold); border: 0; }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-fg: var(--ivory);
  --btn-bg: var(--forest);
  --btn-bd: var(--forest);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-block-size: 54px;
  padding: 0.9rem 2.1rem;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: 1px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
  will-change: transform;
}
body.is-ltr .btn { letter-spacing: 0.09em; text-transform: uppercase; font-size: var(--t-xs); }

.btn > span { position: relative; z-index: 2; }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--forest-deep); border-color: var(--gold); }

.btn--gold { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--forest-deep); }
.btn--gold::after { background: var(--ivory); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--forest-deep); border-color: var(--ivory); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgba(245, 240, 230, 0.45); }
.btn--ghost::after { background: var(--ivory); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--forest-deep); border-color: var(--ivory); }

.btn--ink { --btn-bg: transparent; --btn-fg: var(--charcoal); --btn-bd: rgba(32, 37, 34, 0.3); }
.btn--ink::after { background: var(--forest); }
.btn--ink:hover, .btn--ink:focus-visible { color: var(--ivory); border-color: var(--forest); }

.btn--sm { min-block-size: 44px; padding: 0.55rem 1.35rem; }
.btn--block { width: 100%; }

/* Text link with gold underline */
.link-under {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-sm);
  font-weight: 500;
  padding-block-end: 0.35rem;
  border-block-end: 1px solid var(--rule-gold);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
body.is-ltr .link-under { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-xs); }
.link-under:hover { border-color: var(--gold); color: var(--gold-deep); }
.on-dark .link-under:hover { color: var(--gold); }
.link-under .arrow { transition: transform var(--dur-fast) var(--ease); }
.link-under:hover .arrow { transform: translateX(var(--dir-x, 4px)); }

/* Directional arrow helper (flips in RTL) */
.arrow { inline-size: 16px; block-size: 8px; flex: none; }
[dir='rtl'] .arrow { transform: scaleX(-1); }
[dir='rtl'] .link-under:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* ---------- 5. Header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.site-header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Scrolled state: dark forest-green translucent, subtly blurred, slightly
   shorter than the transparent hero overlay state. */
.site-header.is-stuck {
  background: rgba(10, 63, 48, 0.9);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-block-end-color: rgba(215, 166, 74, 0.28);
  box-shadow: 0 1px 30px rgba(7, 43, 33, 0.24);
  block-size: calc(var(--header-h) - 14px);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  color: var(--ivory);
  transition: color 0.5s var(--ease);
}
.brand__mark { inline-size: 34px; block-size: 34px; flex: none; color: var(--gold); }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
}
body.is-ltr .brand__name { font-size: 1.6rem; letter-spacing: 0.04em; }
.brand__sub {
  font-size: 0.58rem;
  font-weight: 400;
  color: var(--gold);
  margin-block-start: 0.3rem;
}
body.is-ltr .brand__sub { letter-spacing: 0.28em; text-transform: uppercase; }
.site-header.is-light .brand { color: var(--forest); }
.site-header.is-light .brand__sub { color: var(--gold-deep); }

/* Nav */
.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 0.3rem + 1.6vw, 2.6rem); }
.site-nav__link {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 400;
  color: rgba(245, 240, 230, 0.88);
  transition: color var(--dur-fast) var(--ease);
}
body.is-ltr .site-nav__link { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.4s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current='page']::after { transform: scaleX(1); }
.site-nav__link:hover { color: var(--ivory); }
.site-header.is-light .site-nav__link { color: var(--charcoal-mid); }
.site-header.is-light .site-nav__link:hover { color: var(--forest); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.lang-toggle {
  min-block-size: 40px;
  padding: 0.4rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(245, 240, 230, 0.9);
  border: 1px solid rgba(245, 240, 230, 0.28);
  border-radius: 1px;
  transition: all var(--dur-fast) var(--ease);
}
.lang-toggle:hover { color: var(--gold); border-color: var(--rule-gold); }
.site-header.is-light .lang-toggle { color: var(--charcoal-mid); border-color: rgba(32, 37, 34, 0.2); }
.site-header.is-light .lang-toggle:hover { color: var(--forest); border-color: var(--gold); }

/* Primary header CTA: solid champagne gold, as in the reference mockup. */
.header-cta { --btn-bg: var(--gold); --btn-fg: var(--forest-deep); --btn-bd: var(--gold); }
.header-cta::after { background: var(--ivory); }
.header-cta:hover, .header-cta:focus-visible { color: var(--forest-deep); border-color: var(--gold); }
.site-header.is-light .header-cta { --btn-fg: var(--forest); --btn-bd: rgba(15, 90, 65, 0.32); }

/* Burger */
.burger {
  display: none;
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  z-index: 120;
}
.burger__bar {
  position: absolute;
  inset-inline: 11px;
  block-size: 1px;
  background: var(--ivory);
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease), background-color 0.4s var(--ease);
}
.burger__bar:nth-child(1) { inset-block-start: 17px; }
.burger__bar:nth-child(2) { inset-block-start: 26px; }
.site-header.is-light .burger__bar { background: var(--forest); }
body.nav-open .burger__bar { background: var(--ivory) !important; }
body.nav-open .burger__bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.nav-open .burger__bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Full-screen mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) var(--s-7);
  background: var(--forest-deep);
  color: var(--ivory);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--ease);
  visibility: hidden;
  overflow-y: auto;
}
body.nav-open .mobile-nav { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('texture-marble.webp') center/cover no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.mobile-nav__list { position: relative; display: flex; flex-direction: column; gap: 0.35rem; }
.mobile-nav__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
body.nav-open .mobile-nav__item { opacity: 1; transform: none; transition-delay: calc(0.22s + var(--i, 0) * 0.06s); }
.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 4.4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  border-block-end: 1px solid rgba(245, 240, 230, 0.1);
}
.mobile-nav__link .n {
  font-family: var(--font-num);
  font-size: 0.75rem;
  color: var(--gold);
  font-variant-numeric: lining-nums;
}
.mobile-nav__foot {
  position: relative;
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule-gold);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  font-size: var(--t-sm);
  color: rgba(245, 240, 230, 0.72);
}
.mobile-nav__foot a:hover { color: var(--gold); }
.mobile-nav__social { display: inline-flex; flex-wrap: wrap; gap: var(--s-5); }

/* The panel sits above the page, so lift the header over it — otherwise the
   close (X) control disappears behind the full-screen menu. */
body.nav-open .site-header {
  z-index: 130;
  background: transparent;
  border-block-end-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
body.nav-open .brand__word, body.nav-open .brand__sub { color: var(--ivory); }
body.nav-open .lang-toggle { color: var(--ivory); border-color: rgba(245, 240, 230, 0.38); }

@media (max-width: 1023px) {
  .site-nav, .header-cta { display: none; }
  .burger { display: block; }
  .header-actions { margin-inline-start: auto; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--forest-ink);
  color: var(--ivory);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  inline-size: 100%;
  block-size: 118%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
  background: var(--forest-ink);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(7, 43, 33, 0.95) 0%, rgba(10, 63, 48, 0.62) 45%, rgba(10, 63, 48, 0.5) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(15, 90, 65, 0.7), transparent 70%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(5.5rem, 3rem + 7vw, 9rem);
}
.hero__kicker {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(0.68rem, 0.62rem + 0.3vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
}
body.is-rtl .hero__title {
  font-size: clamp(1.55rem, 1rem + 2vw, 2.8rem);
  font-weight: 200;
  line-height: 1.22;
  max-width: 26ch;
  margin-block-end: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
body.is-ltr .hero__title { font-weight: 300; max-width: 28ch; letter-spacing: -0.015em; line-height: 1.16; }
.hero__title em {
  font-style: normal;
  color: var(--gold-soft);
}
.hero__lede {
  max-width: 54ch;
  font-size: var(--t-lede);
  line-height: 1.8;
  color: rgba(245, 240, 230, 0.8);
  padding-inline-start: clamp(1rem, 0.4rem + 1.2vw, 1.75rem);
  border-inline-start: 1px solid var(--rule-gold);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-start: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
}
.hero__actions .btn:first-child { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--forest-deep); }
.hero__actions .btn:first-child::after { background: var(--ivory); }

/* Scroll indicator */
.scroll-cue {
  position: absolute;
  inset-block-end: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
  /* Opposite side from the floating dock so the two never collide. */
  inset-inline-start: var(--gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: rgba(245, 240, 230, 0.6);
}
/* Tracking and uppercasing are Latin-only — they break Arabic letter joins. */
body.is-ltr .scroll-cue {
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.scroll-cue__line {
  position: relative;
  inline-size: 1px;
  block-size: 54px;
  background: rgba(245, 240, 230, 0.2);
  overflow: hidden;
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 40%;
  background: var(--gold);
  animation: cue 2.4s var(--ease-inout) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}
@media (max-width: 640px) { .scroll-cue span { display: none; } }

/* ---------- 7. Intro (editorial) ---------- */
.intro { background: var(--bg); }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 1rem + 6vw, 7rem);
  align-items: start;
}
.figure-stat { position: relative; }
.figure-stat__num {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-num);
  font-size: var(--t-mega);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--forest);
  font-variant-numeric: lining-nums;
}
.figure-stat__num sup {
  font-size: 0.3em;
  vertical-align: super;
  color: var(--gold);
  letter-spacing: 0;
  margin-inline-start: 0.06em;
}
.figure-stat__label {
  display: block;
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--rule-gold);
  font-size: var(--t-sm);
  color: var(--ink-mid);
  max-width: 22ch;
}
.intro__title { font-size: var(--t-display); margin-block-end: var(--s-6); max-width: 24ch; }
.intro__body { display: grid; gap: var(--s-5); color: var(--ink-mid); max-width: 66ch; }
.intro__body p { font-size: var(--t-body); line-height: 1.9; }
.intro__figure { margin-block-start: clamp(3rem, 1.5rem + 4vw, 6rem); }
.intro__figure img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.intro__caption {
  display: flex;
  gap: 0.75rem;
  margin-block-start: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
.intro__caption::before { content: ''; inline-size: 20px; block-size: 1px; background: var(--gold); margin-block-start: 0.55em; flex: none; }

@media (max-width: 899px) {
  .intro__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .figure-stat__label { max-width: 100%; }
}

/* ---------- 8. Philosophy ---------- */
.philosophy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(6rem, 3rem + 10vw, 15rem);
}
.philosophy__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.philosophy__bg img {
  inline-size: 100%;
  block-size: 116%;
  object-fit: cover;
  opacity: 0.2;
  filter: saturate(0.6);
  will-change: transform;
}
.philosophy::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--forest) 0%, rgba(15, 90, 65, 0.9) 50%, var(--forest-deep) 100%);
  mix-blend-mode: multiply;
}
.philosophy__inner { max-width: 1080px; margin-inline: auto; text-align: center; }
.philosophy__inner .eyebrow { justify-content: center; }
.philosophy__quote {
  font-size: clamp(1.6rem, 1rem + 3.4vw, 3.9rem);
  font-weight: 200;
  line-height: 1.28;
  color: var(--ivory);
}
body.is-ltr .philosophy__quote { font-weight: 300; }
.philosophy__quote .accent { color: var(--gold); }
.philosophy__quote .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
}
.is-revealed .philosophy__quote .w {
  animation: word-up 0.9s var(--ease) forwards;
  animation-delay: calc(var(--wi, 0) * 0.055s);
}
@keyframes word-up {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.philosophy__sig {
  margin-block-start: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: rgba(245, 240, 230, 0.6);
}
.philosophy__sig::before { content: ''; inline-size: 1px; block-size: 44px; background: var(--rule-gold); }

/* ---------- 9. Services (editorial rows) ---------- */
.services { background: var(--bg-alt); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 0.5rem + 4vw, 5rem);
  align-items: end;
  margin-block-end: clamp(3rem, 2rem + 3vw, 5.5rem);
}
.section-head__title { font-size: var(--t-h2); max-width: 26ch; }
.section-head__aside { color: var(--ink-mid); font-size: var(--t-body); max-width: 46ch; }
@media (max-width: 899px) {
  .section-head { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
}

.svc-list { position: relative; border-block-start: 1px solid var(--rule-gold); }
.svc {
  position: relative;
  display: block;
  border-block-end: 1px solid var(--rule-gold);
  transition: background-color 0.5s var(--ease);
}
.svc:hover { background: rgba(15, 90, 65, 0.045); }
.svc__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 0.95fr) 3rem;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 2vw, 3rem);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
  padding-inline: clamp(0rem, -0.5rem + 1.4vw, 1.5rem);
}
.svc__num {
  font-family: var(--font-num);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 400;
  color: var(--gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
  transition: transform 0.55s var(--ease), color 0.4s var(--ease);
}
.svc:hover .svc__num { transform: translateY(-6px); color: var(--gold); }
.svc__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.24;
  color: var(--forest);
  transition: transform 0.55s var(--ease);
}
.svc:hover .svc__title { transform: translateX(var(--nudge, 6px)); }
[dir='rtl'] .svc { --nudge: -6px; }
.svc__desc { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-mid); }
.svc__go {
  justify-self: end;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--forest);
  opacity: 0;
  transform: translateX(calc(var(--nudge, 6px) * -1.5));
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.svc:hover .svc__go, .svc:focus-visible .svc__go {
  opacity: 1;
  transform: none;
  border-color: var(--rule-gold);
}

/* Floating image preview follows cursor (desktop) */
.svc-preview {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 60;
  inline-size: 300px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
  box-shadow: 0 30px 70px rgba(7, 43, 33, 0.32);
}
.svc-preview.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.svc-preview img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease); }
.svc-preview img.is-active { opacity: 1; }

@media (max-width: 1023px) {
  .svc__row { grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-areas: 'num title' '. desc'; row-gap: 0.5rem; }
  .svc__num { grid-area: num; }
  .svc__title { grid-area: title; }
  .svc__desc { grid-area: desc; }
  .svc__go { display: none; }
  .svc-preview { display: none; }
}

/* Inline thumb for mobile services */
.svc__thumb { display: none; }
@media (max-width: 1023px) {
  .svc__row { grid-template-columns: 3.25rem minmax(0, 1fr) 78px; grid-template-areas: 'num title thumb' '. desc thumb'; }
  .svc__thumb { display: block; grid-area: thumb; align-self: center; }
  .svc__thumb img { inline-size: 78px; aspect-ratio: 1; object-fit: cover; }
}
@media (max-width: 479px) {
  .svc__row { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: 'num title' '. desc'; }
  .svc__thumb { display: none; }
}

/* ---------- 10. Statistics ---------- */
.stats { background: var(--bg); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 1px solid var(--rule-gold);
  border-block-end: 1px solid var(--rule-gold);
}
.stat {
  padding: clamp(2.25rem, 1.5rem + 2.6vw, 4.5rem) clamp(1rem, 0.4rem + 1.6vw, 2.5rem);
  border-inline-start: 1px solid var(--rule);
}
.stat:first-child { border-inline-start: 0; }
.stat__num {
  display: flex;
  align-items: baseline;
  /* A figure and its suffix are one numeric unit and always read
     left-to-right, so "98%" never becomes "%98" in Arabic. */
  direction: ltr;
  unicode-bidi: isolate;
  justify-content: flex-start;
  font-family: var(--font-num);
  font-size: var(--t-counter);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--forest);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__num .suffix { font-size: 0.34em; color: var(--gold); margin-inline-start: 0.1em; letter-spacing: 0; }
[dir='rtl'] .stat__num { justify-content: flex-end; }
.stat__label {
  margin-block-start: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-mid);
  max-width: 20ch;
}
.stat__bar { margin-block-start: var(--s-4); block-size: 1px; background: var(--rule); overflow: hidden; }
.stat__bar i {
  display: block;
  block-size: 100%;
  inline-size: var(--fill, 0%);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 1.6s var(--ease) 0.2s;
}
.is-revealed .stat__bar i { transform: scaleX(1); }
@media (max-width: 767px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .stat:first-child { border-block-start: 0; }
  .stat__label { max-width: 100%; }
}

/* ---------- 11. Insights / Library editorial grid ---------- */
.insights { background: var(--bg-alt); }
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4.5rem) clamp(1.25rem, 0.5rem + 2.5vw, 3.5rem);
}
.ed-feature { grid-column: 1 / span 7; }
.ed-side { grid-column: 9 / span 4; display: grid; gap: clamp(2rem, 1rem + 2.5vw, 3.5rem); align-content: start; padding-block-start: clamp(1rem, 0.5rem + 2vw, 4rem); }

.ed-item { display: block; }
.ed-item__media { position: relative; overflow: hidden; background: var(--forest-deep); }
.ed-item__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.7s var(--ease);
}
.ed-feature .ed-item__media { aspect-ratio: 16 / 10; }
.ed-side .ed-item__media { aspect-ratio: 4 / 3; }
.ed-item:hover .ed-item__media img { transform: scale(1.045); }
.ed-item__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 90, 65, 0) 30%, rgba(15, 90, 65, 0.55));
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.ed-item:hover .ed-item__media::after { opacity: 1; }
.ed-item__go {
  position: absolute;
  z-index: 2;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 240, 230, 0.6);
  border-radius: 50%;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease), background-color 0.4s var(--ease);
}
.ed-item:hover .ed-item__go { opacity: 1; transform: none; }

.ed-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-block-start: var(--s-5);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
body.is-ltr .ed-item__meta { letter-spacing: 0.12em; text-transform: uppercase; }
.ed-item__cat { color: var(--gold-deep); font-weight: 500; }
.ed-item__meta .dot { inline-size: 3px; block-size: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; }
.ed-item__title {
  margin-block-start: var(--s-3);
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--forest);
  line-height: 1.26;
}
.ed-feature .ed-item__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); max-width: 26ch; }
.ed-side .ed-item__title { font-size: var(--t-h4); }
.ed-item__excerpt { margin-block-start: var(--s-4); font-size: var(--t-sm); color: var(--ink-mid); max-width: 52ch; }
.ed-item__more { margin-block-start: var(--s-5); }

.insights__foot {
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--rule-gold);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 899px) {
  .ed-feature, .ed-side { grid-column: 1 / -1; }
  .ed-side { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block-start: 0; }
}
@media (max-width: 599px) {
  .ed-side { grid-template-columns: 1fr; }
}

/* ---------- 12. Why (numbered list) ---------- */
.why { background: var(--forest); color: var(--ivory); }
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.why__title { font-size: var(--t-h2); max-width: 16ch; }
.why__list { border-block-start: 1px solid var(--rule-light); }
.why__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(0.75rem, 0.3rem + 1.4vw, 2rem);
  padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border-block-end: 1px solid var(--rule-light);
  transition: border-color 0.5s var(--ease);
}
.why__item:hover { border-block-end-color: var(--rule-gold); }
.why__n {
  font-family: var(--font-num);
  font-size: 1.15rem;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
  padding-block-start: 0.2em;
}
.why__h {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 400;
  color: var(--ivory);
  margin-block-end: 0.5rem;
}
.why__p { font-size: var(--t-sm); line-height: 1.8; color: rgba(245, 240, 230, 0.68); max-width: 58ch; }
@media (max-width: 899px) {
  .why__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .why__title { max-width: 100%; }
  .why__item { grid-template-columns: 3rem minmax(0, 1fr); }
}

/* ---------- 13. Big CTA ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(5rem, 3rem + 8vw, 12rem);
  background: var(--forest-deep);
  color: var(--ivory);
  text-align: center;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { inline-size: 100%; block-size: 112%; object-fit: cover; opacity: 0.55; will-change: transform; }
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 63, 48, 0.82), rgba(7, 43, 33, 0.92));
}
.cta-band__inner { max-width: 880px; margin-inline: auto; }
.cta-band__inner .eyebrow { justify-content: center; }
.cta-band__title { font-size: var(--t-display); font-weight: 200; margin-block-end: var(--s-5); }
body.is-ltr .cta-band__title { font-weight: 300; }
.cta-band__lede { margin-inline: auto; color: rgba(245, 240, 230, 0.75); max-width: 52ch; }
.cta-band__actions { margin-block-start: clamp(2rem, 1.4rem + 2vw, 3.25rem); display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ---------- 14. Contact ---------- */
.contact { background: var(--bg); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 1rem + 6vw, 7rem);
  align-items: start;
}
.contact__title { font-size: var(--t-h2); margin-block-end: var(--s-5); }
.contact__lede { margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem); }

.detail-list { border-block-start: 1px solid var(--rule-gold); }
.detail {
  display: grid;
  grid-template-columns: minmax(88px, 0.32fr) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--rule);
  align-items: baseline;
}
.detail__k { font-size: var(--t-xs); color: var(--ink-soft); }
body.is-ltr .detail__k { letter-spacing: 0.14em; text-transform: uppercase; }
.detail__v { font-size: var(--t-body); color: var(--ink); }
.detail__v a { border-block-end: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.detail__v a:hover { color: var(--forest); border-block-end-color: var(--gold); }
.detail__v .stack { display: flex; flex-direction: column; gap: 0.3rem; }
.detail__v .tel { font-family: var(--font-en); letter-spacing: 0.04em; direction: ltr; unicode-bidi: isolate; }
.detail__v .mail { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; word-break: break-word; }

.map-frame {
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  position: relative;
  border: 1px solid var(--rule-gold);
  background: var(--ivory-dim);
}
.map-frame iframe { display: block; inline-size: 100%; block-size: clamp(240px, 32vw, 340px); border: 0; filter: saturate(0.75) contrast(0.95); }

/* Form */
.form { display: grid; gap: clamp(1.25rem, 1rem + 0.8vw, 1.9rem); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; }
.field { position: relative; display: grid; gap: 0.5rem; }
.field label { font-size: var(--t-xs); color: var(--ink-soft); }
body.is-ltr .field label { letter-spacing: 0.14em; text-transform: uppercase; }
.field .req { color: var(--gold-deep); }
.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 0.65rem 0;
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
  appearance: none;
}
.field textarea { min-block-size: 108px; resize: vertical; line-height: 1.7; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
    linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position: right 4px top 1.35rem, right 0 top 1.35rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 1.5rem;
  cursor: pointer;
}
[dir='rtl'] .field select {
  background-position: left 4px top 1.35rem, left 0 top 1.35rem;
  padding-inline-end: 0;
  padding-inline-start: 1.5rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-block-end-color: var(--gold); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 0.7; }
.form__note { font-size: var(--t-xs); color: var(--ink-soft); }
.form__status {
  font-size: var(--t-sm);
  padding: 0.85rem 1.1rem;
  border-inline-start: 2px solid var(--gold);
  background: rgba(215, 166, 74, 0.09);
  display: none;
}
.form__status.is-shown { display: block; }
.form__status.is-error { border-inline-start-color: #9a3b2c; background: rgba(154, 59, 44, 0.07); }
.hp { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 899px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 599px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- 15. Footer ---------- */
.site-footer {
  background: var(--forest-ink);
  color: rgba(245, 240, 230, 0.72);
  border-block-start: 1px solid var(--gold);
  padding-block: clamp(3rem, 2rem + 3vw, 5.5rem) var(--s-6);
  font-size: var(--t-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.footer__brand .brand { color: var(--ivory); margin-block-end: var(--s-5); }
.footer__desc { max-width: 44ch; line-height: 1.8; }
.footer__social { display: flex; gap: 0.5rem; margin-block-start: var(--s-5); }
.footer__social a {
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 240, 230, 0.16);
  color: rgba(245, 240, 230, 0.7);
  transition: all var(--dur-fast) var(--ease);
}
.footer__social a:hover { color: var(--forest-ink); background: var(--gold); border-color: var(--gold); }
.footer__social svg { inline-size: 16px; block-size: 16px; }

.footer__h {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--gold);
  margin-block-end: var(--s-5);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid rgba(215, 166, 74, 0.24);
}
body.is-ltr .footer__h { letter-spacing: 0.18em; text-transform: uppercase; }
.footer__list { display: grid; gap: 0.6rem; }
.footer__list a {
  display: inline-block;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--gold); }
.footer__list .ext { font-size: 0.62em; opacity: 0.5; margin-inline-start: 0.35em; }

.footer__bottom {
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(245, 240, 230, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(245, 240, 230, 0.5);
}
@media (max-width: 899px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 519px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- 16. Floating actions ---------- */
.dock {
  position: fixed;
  z-index: 70;
  inset-block-end: clamp(1rem, 0.5rem + 1.4vw, 2rem);
  inset-inline-end: clamp(1rem, 0.5rem + 1.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dock a, .dock button {
  inline-size: 50px;
  block-size: 50px;
  display: grid;
  place-items: center;
  color: var(--ivory);
  background: var(--forest);
  border: 1px solid rgba(215, 166, 74, 0.4);
  box-shadow: 0 12px 30px rgba(7, 43, 33, 0.2);
  transition: all var(--dur-fast) var(--ease);
}
.dock a:hover, .dock button:hover { background: var(--gold); color: var(--forest-deep); border-color: var(--gold); }
.dock svg { inline-size: 20px; block-size: 20px; }
.dock__top { opacity: 0; visibility: hidden; transform: translateY(8px); }
.dock__top.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------- 17. Custom cursor (desktop, fine pointer) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;      /* كان inset-block-start: 0 */
  left: 0;     /* كان inset-inline-start: 0  ← ده كان بيبقى right في RTL */
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  mix-blend-mode: difference;
}
.cursor-dot { inline-size: 5px; block-size: 5px; background: var(--ivory); }
.cursor-ring {
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid rgba(245, 240, 230, 0.6);
  transition: opacity 0.3s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease),
    border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring { inline-size: 58px; block-size: 58px; border-color: rgba(215, 166, 74, 0.9); }
body.cursor-hover .cursor-dot { opacity: 0; }
body.cursor-media .cursor-ring {
  inline-size: 78px;
  block-size: 78px;
  background: rgba(215, 166, 74, 0.22);
  border-color: rgba(215, 166, 74, 0.85);
}
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- 18. Scroll reveals (no layout shift) ---------- */
.rv { opacity: 0; transition: opacity 0.9s var(--ease), clip-path 1s var(--ease), filter 0.9s var(--ease); }
.rv--up { clip-path: inset(0 0 42% 0); }
.rv--fade { filter: blur(4px); }
.rv--img { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease), opacity 0.5s var(--ease); }
.rv.is-in { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
.rv[style*='--d'] { transition-delay: var(--d); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv { opacity: 1 !important; clip-path: none !important; filter: none !important; }
  .philosophy__quote .w { opacity: 1; transform: none; filter: none; }
  .hero__media img, .philosophy__bg img, .cta-band__bg img { block-size: 100%; }
  .scroll-cue__line::after { animation: none; }
}

/* ---------- 19. Interior page hero ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--ivory);
  padding-block: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 8rem)) clamp(3.5rem, 2rem + 5vw, 7rem);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { inline-size: 100%; block-size: 112%; object-fit: cover; opacity: 0.85; will-change: transform; }
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 63, 48, 0.58) 0%, rgba(9, 55, 42, 0.72) 55%, rgba(7, 43, 33, 0.9) 100%),
    linear-gradient(to left, rgba(7, 43, 33, 0.66) 0%, rgba(7, 43, 33, 0.14) 62%, transparent 100%);
}
body.is-ltr .page-hero::after {
  background:
    linear-gradient(180deg, rgba(10, 63, 48, 0.58) 0%, rgba(9, 55, 42, 0.72) 55%, rgba(7, 43, 33, 0.9) 100%),
    linear-gradient(to right, rgba(7, 43, 33, 0.66) 0%, rgba(7, 43, 33, 0.14) 62%, transparent 100%);
}
.page-hero__inner { max-width: 900px; }
.page-hero__title { font-size: var(--t-display); font-weight: 200; margin-block-end: var(--s-5); }
body.is-ltr .page-hero__title { font-weight: 300; }
.page-hero__lede { color: rgba(245, 240, 230, 0.78); max-width: 58ch; }
.page-hero__actions { margin-block-start: clamp(2rem, 1.5rem + 1.6vw, 3rem); display: flex; flex-wrap: wrap; gap: 0.75rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: var(--s-6);
  font-size: var(--t-xs);
  color: rgba(245, 240, 230, 0.55);
}
.crumbs a { transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { opacity: 0.45; }

/* ---------- 20. Service detail page ---------- */
.svc-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.svc-intro__media { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
.svc-intro__media img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc-intro__title { font-size: var(--t-h2); margin-block-end: var(--s-6); max-width: 26ch; }
.svc-intro__body { display: grid; gap: var(--s-5); color: var(--ink-mid); max-width: 68ch; }
.svc-intro__body strong { color: var(--forest); font-weight: 500; }
@media (max-width: 899px) {
  .svc-intro__grid { grid-template-columns: 1fr; }
  .svc-intro__media { position: static; }
  .svc-intro__media img { aspect-ratio: 16 / 9; }
}

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0;
  border-block-start: 1px solid var(--rule-gold);
}
.cap {
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) clamp(0rem, -0.6rem + 2vw, 2.25rem);
  border-block-end: 1px solid var(--rule-gold);
  border-inline-start: 1px solid var(--rule);
  transition: background-color 0.5s var(--ease);
}
.cap:hover { background: rgba(15, 90, 65, 0.04); }
.cap__n {
  font-family: var(--font-num);
  font-size: 1.05rem;
  color: var(--gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
}
.cap__h {
  margin-block: 0.85rem var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 400;
  color: var(--forest);
  line-height: 1.3;
}
.cap__list { display: grid; gap: 0.7rem; font-size: var(--t-sm); color: var(--ink-mid); }
.cap__list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0.75rem; line-height: 1.7; }
.cap__list li::before { content: ''; inline-size: 12px; block-size: 1px; background: var(--gold); margin-block-start: 0.85em; }
@media (min-width: 600px) { .cap:nth-child(odd) { border-inline-start: 0; } }
@media (min-width: 900px) { .cap { border-inline-start: 1px solid var(--rule); } .cap:nth-child(3n + 1) { border-inline-start: 0; } }
@media (max-width: 599px) { .cap { border-inline-start: 0; } }

.svc-nav { background: var(--bg-alt); }
.svc-nav__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.svc-nav__item {
  background: var(--bg-alt);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.svc-nav__item:hover { background: var(--forest); color: var(--ivory); }
.svc-nav__item .n { font-family: var(--font-num); font-size: 0.85rem; color: var(--gold-deep); font-variant-numeric: lining-nums; }
.svc-nav__item:hover .n { color: var(--gold); }
.svc-nav__item .t { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.35; }
.svc-nav__item[aria-current='page'] { background: var(--forest); color: var(--ivory); }
.svc-nav__item[aria-current='page'] .n { color: var(--gold); }

/* ---------- 21. Library page — document register ---------- */
/* The page hero already supplies breathing room above the controls. */
.lib { padding-block-start: clamp(2.5rem, 1.4rem + 3vw, 4.5rem); }
/* The register is one shared grid template used by the column headings and by
   every row, so the two can never drift out of alignment. Columns collapse from
   the least essential inward as the viewport narrows. */

.lib-bar {
  /* Grid, not wrapping flex: the tabs and the tools each hold a full-width row.
     Sharing one line depended on the tab labels' length, which squeezed the
     search field down to a clipped column in English. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: end;
  padding-block-end: var(--s-5);
  border-block-end: 1px solid var(--rule-gold);
}

.lib-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.lib-tab {
  position: relative;
  padding-block: 0.45rem;
  font-size: var(--t-sm);
  color: var(--ink-mid);
  transition: color var(--dur-fast) var(--ease);
}
body.is-ltr .lib-tab { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.lib-tab::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.lib-tab:hover { color: var(--forest); }
.lib-tab[aria-selected='true'] { color: var(--forest); }
.lib-tab[aria-selected='true']::after { transform: scaleX(1); }
.lib-tab .c {
  font-family: var(--font-num);
  font-size: 0.7em;
  color: var(--gold-deep);
  margin-inline-start: 0.35em;
  vertical-align: super;
  font-variant-numeric: lining-nums;
}

.lib-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-5) var(--s-6); }
.lib-search { flex: 1 1 16rem; max-inline-size: 22rem; }

.lib-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-inline-size: min(100%, 15rem);
  border-block-end: 1px solid var(--rule);
}
.lib-search > svg { inline-size: 15px; block-size: 15px; color: var(--ink-soft); flex: none; }
.lib-search input { flex: 1; min-inline-size: 0; padding: 0.55rem 0; background: transparent; border: 0; font-size: var(--t-sm); color: var(--ink); }
.lib-search input:focus { outline: none; }
/* The UA's own clear affordance would sit on top of ours. */
.lib-search input::-webkit-search-cancel-button { display: none; }
.lib-search:focus-within { border-block-end-color: var(--gold); }
.lib-search__clear {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
}
.lib-search__clear:hover { color: var(--forest); }
/* `display: grid` above would otherwise defeat the `hidden` attribute. */
.lib-search__clear[hidden] { display: none; }
.lib-search__clear svg { inline-size: 12px; block-size: 12px; }

.lib-sort { display: flex; align-items: center; gap: 0.6rem; border-block-end: 1px solid var(--rule); }
.lib-sort__k { font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; }
body.is-ltr .lib-sort__k { letter-spacing: 0.14em; text-transform: uppercase; }
.lib-sort select {
  padding-block: 0.55rem;
  padding-inline: 0 1.2rem;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  /* Caret as an inline SVG; declared after any `background` shorthand so the
     shorthand cannot reset the position/repeat that place it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A8802E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 10px 7px;
  background-repeat: no-repeat;
}
[dir='rtl'] .lib-sort select {
  padding-inline: 1.2rem 0;
  background-position: left center;
}
.lib-sort select:focus { outline: none; }
.lib-sort:focus-within { border-block-end-color: var(--gold); }

.lib-count { margin-block: var(--s-6) var(--s-5); font-size: var(--t-xs); color: var(--ink-soft); }
.lib-count #libCount { font-family: var(--font-num); color: var(--gold-deep); font-variant-numeric: lining-nums; }

.doc-reg {
  /* n | title | category | year | pages+size | language | download */
  --doc-cols: 3rem minmax(0, 1fr) 8.5rem 4rem 7.5rem 5.5rem 10.5rem;
  --doc-gap: clamp(0.7rem, 0.4rem + 0.8vw, 1.6rem);
  border-block-start: 1px solid var(--rule-gold);
}
.doc-reg[hidden] { display: none; }
.doc-reg__head,
.doc {
  display: grid;
  grid-template-columns: var(--doc-cols);
  align-items: center;
  gap: var(--doc-gap);
}
.doc-reg__head {
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--rule);
}
.doc-reg__h { font-size: var(--t-xs); color: var(--ink-soft); }
body.is-ltr .doc-reg__h { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; }
.doc-reg__h--get { text-align: center; }

.doc {
  padding-block: clamp(1rem, 0.85rem + 0.6vw, 1.45rem);
  border-block-end: 1px solid var(--rule);
  transition: background-color 0.4s var(--ease);
}
.doc:hover { background: rgba(15, 90, 65, 0.04); }
/* Deep-linked row from the homepage insights band. */
.doc.is-flagged { background: rgba(215, 166, 74, 0.15); }

.doc__n {
  font-family: var(--font-num);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.95rem;
  color: var(--gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
}
.doc__t {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  font-weight: 400;
  color: var(--forest);
  line-height: 1.45;
}
/* Transparent on the wide register: the four cells become row-grid items. */
.doc__meta { display: contents; }
.doc__cell { font-size: var(--t-xs); color: var(--ink-mid); }
.doc__cat { color: var(--gold-deep); }
/* Digits are weak-LTR and lay out correctly inside an RTL line on their own, so
   the year needs no direction override — one there put its separator dot on the
   wrong side of the number. The size string mixes digits with a unit, so it does
   need isolating. */
.doc__year {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums tabular-nums;
}
.doc__bytes {
  font-family: var(--font-num);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Three documents carry no publication year: a hairline keeps the column
   aligned without printing a stray dash as content. */
.doc__nil { display: block; inline-size: 14px; block-size: 1px; background: var(--rule-strong, rgba(15, 90, 65, 0.28)); }
.doc__size { display: flex; flex-direction: column; gap: 0.2rem; }
.doc__pages { font-weight: 400; }
.doc__bytes { font-style: normal; color: var(--ink-soft); }
.doc__lang { color: var(--gold-deep); white-space: nowrap; }

.doc__dl {
  /* The download column is a fixed track and the button fills it, so the row
     grid and the column headings resolve to identical columns. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  color: var(--forest);
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule-gold);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
body.is-ltr .doc__dl { letter-spacing: 0.1em; text-transform: uppercase; }
.doc__dl:hover { background: var(--forest); color: var(--ivory); border-color: var(--forest); }
.doc__dl svg { inline-size: 13px; block-size: 13px; flex: none; }

/* Keep the register clear of the fixed WhatsApp / back-to-top dock. */
@media (min-width: 900px) {
  .doc-reg { padding-inline-end: clamp(4rem, 2rem + 3vw, 5.5rem); }
}
/* Shed the least essential column first, innermost last. */
@media (max-width: 1279px) {
  .doc-reg { --doc-cols: 3rem minmax(0, 1fr) 4rem 7.5rem 5.5rem 10.5rem; }
  .doc__cat, .doc-reg__h--cat { display: none; }
}
@media (max-width: 1023px) {
  .doc-reg { --doc-cols: 2.75rem minmax(0, 1fr) 4rem 7rem 10.5rem; }
  .doc__lang, .doc-reg__h--lang { display: none; }
}
/* Phones and tablets get a stacked row, not a squeezed table: below this the
   title column is too narrow and every title wraps to three lines. */
@media (max-width: 899px) {
  .doc-reg__head { display: none; }
  .doc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.85rem;
    padding-block: 1.15rem;
  }
  .doc__n { flex: 0 0 2rem; }
  .doc__t { flex: 1 1 calc(100% - 3rem); }
  /* A real box again, so it forms one meta line and the action can break below. */
  .doc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.85rem;
    flex: 1 1 100%;
    order: 3;
    margin-inline-start: 2.85rem;
  }
  .doc__cat, .doc__lang { display: inline; }
  /* Inline, not flex: as a flex container its separator dot became a flex item
     and sat on a different baseline from the others. */
  .doc__size { display: inline; }
  /* Set on the un-isolated element so the gap lands between the two values. */
  .doc__pages { margin-inline-end: 0.5rem; }
  /* Gold dots separate the inline facts once they share a line. */
  .doc__cell + .doc__cell::before {
    content: '';
    display: inline-block;
    inline-size: 3px;
    block-size: 3px;
    border-radius: 50%;
    background: var(--rule-strong, rgba(15, 90, 65, 0.28));
    vertical-align: 0.28em;
    margin-inline-end: 0.6rem;
  }
  .doc__dl {
    order: 4;
    flex: 0 0 auto;
    display: inline-flex;
    margin-block-start: 0.7rem;
    margin-inline-start: 2.85rem;
  }
  .doc__nil { display: inline-block; vertical-align: 0.35em; }
}

.lib-empty {
  padding-block: var(--s-8);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}
.lib-empty[hidden] { display: none; }
.lib-empty__t { color: var(--ink-soft); font-size: var(--t-sm); max-width: 46ch; }


/* Map fallback link — keeps the location reachable if the embed is blocked. */
.map-note { margin-block-start: var(--s-4); font-size: var(--t-sm); }
/* Gold on the deep-green panel — the default forest button would vanish. */
.mobile-nav__cta {
  margin-block-start: var(--s-6);
  align-self: flex-start;
  background: var(--gold);
  color: var(--forest-deep);
  border-color: var(--gold);
}
.field [aria-invalid='true'] { border-block-end-color: #9a3b2c; }

/* ==========================================================================
   REFERENCE-MOCKUP RESTYLE
   Presentation-only layer matching the supplied brand sheet and homepage
   mockup. Nothing here touches markup structure, forms or business logic.
   ========================================================================== */

/* --- Hero: copy block on the leading side, skyline readable on the other -- */
.hero__scrim {
  /* linear-gradient() has no logical <side-or-corner> keywords, so the
     direction is flipped explicitly per writing direction instead. */
  background:
    linear-gradient(to left,
      rgba(7, 43, 33, 0.86) 0%,
      rgba(10, 63, 48, 0.66) 32%,
      rgba(10, 63, 48, 0.26) 62%,
      rgba(10, 63, 48, 0.04) 100%),
    linear-gradient(to top, rgba(7, 43, 33, 0.58) 0%, transparent 44%);
}
body.is-ltr .hero__scrim {
  background:
    linear-gradient(to right,
      rgba(7, 43, 33, 0.86) 0%,
      rgba(10, 63, 48, 0.66) 32%,
      rgba(10, 63, 48, 0.26) 62%,
      rgba(10, 63, 48, 0.04) 100%),
    linear-gradient(to top, rgba(7, 43, 33, 0.58) 0%, transparent 44%);
}
/* Background photos are wrapped in <picture> for the WebP/JPEG pair. A default
   <picture> is an inline box of automatic height, so the img's percentage
   block-size (118%/116%/112%, sized for the parallax travel) had nothing to
   resolve against and collapsed to the image's natural aspect ratio — leaving a
   flat green band under every background photo. Making the wrapper a block that
   fills its absolutely positioned parent restores the intended full cover. */
.hero__media picture,
.philosophy__bg picture,
.cta-band__bg picture,
.page-hero__bg picture {
  display: block;
  block-size: 100%;
}
/* The hero is a grid, so make its single row stretch: otherwise the absolutely
   positioned media layer resolves against a copy-height grid area. */
.hero { grid-template-rows: minmax(0, 1fr); }
.hero__media img { object-position: center 46%; }
.hero__inner { align-self: center; }
/* Constrain the copy block to the leading ~48% so the skyline stays visible.
   Note: max-width and max-inline-size are the same property here, so these
   declarations must come after the base rules that set max-width. */
.hero__kicker,
.hero__actions { max-width: min(56%, 42rem); }
.hero__title,
body.is-ltr .hero__title,
.hero__lede { max-width: min(56%, 42rem); }

/* Scroll cue centred under the hero, per the mockup. */
.scroll-cue {
  inset-inline: 0 !important;
  inset-inline-start: 0 !important;
  justify-content: center;
  text-align: center;
}

/* --- About: gold figure, hairline divider, offset-framed portrait --------- */
.intro__grid {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.15fr) minmax(0, 0.8fr);
  column-gap: clamp(1.75rem, 0.5rem + 3.4vw, 4.25rem);
  align-items: start;
}
/* Thin vertical hairline between the figure and the copy. */
.intro__copy {
  padding-inline-start: clamp(1.75rem, 0.5rem + 3.4vw, 4.25rem);
  border-inline-start: 1px solid var(--rule-gold);
}
.figure-stat__num { color: var(--gold-deep); }
.figure-stat__label { border-block-start: 0; padding-block-start: 0; margin-block-start: var(--s-4); }
.figure-stat__rule {
  display: block;
  inline-size: 44px;
  block-size: 2px;
  background: var(--gold);
  margin-block-start: var(--s-5);
}
.intro__figure { margin-block-start: 0; position: relative; }
/* Offset gold outline behind the image. */
.intro__frame { position: relative; overflow: hidden; }
.intro__figure::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-block: 18px -18px;
  inset-inline: 18px -18px;
  border: 1px solid var(--gold);
  opacity: 0.75;
  pointer-events: none;
}
.intro__figure img { aspect-ratio: 3 / 4; position: relative; z-index: 1; }
.intro__caption { position: relative; z-index: 1; margin-block-start: var(--s-5); }

@media (max-width: 1099px) {
  .intro__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .intro__figure { grid-column: 1 / -1; margin-block-start: var(--s-7); max-inline-size: 30rem; }
  .intro__figure img { aspect-ratio: 4 / 3; }
}
@media (max-width: 899px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__copy { padding-inline-start: 0; border-inline-start: 0; }
  .intro__figure::before { inset-block: 12px -12px; inset-inline: 12px -12px; }
}

/* --- Philosophy: gold divider with a centre diamond ---------------------- */
.rule-diamond {
  --d-size: 7px;
  display: block;
  position: relative;
  inline-size: min(320px, 60%);
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: clamp(1.5rem, 1rem + 1.2vw, 2.5rem) auto;
}
.rule-diamond::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--d-size);
  block-size: var(--d-size);
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}
[dir='rtl'] .rule-diamond::after { transform: translate(50%, -50%) rotate(45deg); }

/* --- Services: editorial rows beside an image mosaic + dark panel -------- */
.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(1.75rem, 0.5rem + 3.2vw, 4rem);
  align-items: start;
}
.svc__row {
  grid-template-columns: 3.6rem 2rem minmax(0, 1fr) 2.25rem;
  gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.75rem);
  padding-block: clamp(1.15rem, 0.9rem + 1vw, 1.85rem);
}
.svc__num { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); }
.svc__ico { color: var(--gold-deep); display: flex; align-items: center; transition: color 0.4s var(--ease); }
.svc__ico svg { inline-size: 24px; block-size: 24px; stroke-width: 1.25; }
.svc:hover .svc__ico { color: var(--gold); }
.svc__text { display: grid; gap: 0.35rem; min-inline-size: 0; }
.svc__title { font-weight: 500; }
.svc__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc__thumb { display: none !important; }
.svc-list__foot { margin-block-start: var(--s-6); }

.svc-aside { display: grid; gap: 1px; position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
.svc-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; }
.svc-mosaic__cell { display: block; overflow: hidden; }
.svc-mosaic__cell img { inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.svc-panel {
  background: var(--forest);
  color: var(--ivory);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  display: grid;
  gap: var(--s-5);
}
.svc-panel__text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 300;
  line-height: 1.5;
}
.svc-panel__mark { display: flex; align-items: center; gap: 0.7rem; color: var(--ivory); }
.svc-panel__mark .brand__mark { inline-size: 30px; block-size: 30px; flex: none; }
.svc-panel__wm {
  display: flex;
  flex-direction: column;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.9);
}
.svc-panel__wm em {
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  color: var(--gold);
}

@media (max-width: 1023px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-aside { position: static; }
  .svc-mosaic { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 599px) {
  .svc-mosaic { grid-template-columns: 1fr 1fr; }
  .svc__row { grid-template-columns: 2.5rem 1.6rem minmax(0, 1fr); }
  .svc__go { display: none; }
}

/* --- Statistics: dark band, gold icons, ivory serif figures -------------- */
.stats {
  position: relative;
  background: var(--forest-deep);
  color: var(--ivory);
  isolation: isolate;
}
.stats__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.stats__bg img {
  inline-size: 100%;
  block-size: 116%;
  object-fit: cover;
  opacity: 0.16;
  will-change: transform;
}
.stats::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 63, 48, 0.82), rgba(7, 43, 33, 0.92));
}
.stats .section-head__title { color: var(--ivory); }
.stats__grid {
  border-block-start-color: rgba(215, 166, 74, 0.32);
  border-block-end-color: rgba(215, 166, 74, 0.32);
}
.stat { border-inline-start-color: rgba(245, 240, 230, 0.16); text-align: center; }
.stat__ico { display: block; color: var(--gold); margin-block-end: var(--s-5); }
.stat__ico svg { inline-size: 30px; block-size: 30px; margin-inline: auto; stroke-width: 1.15; }
.stat__num { color: var(--ivory); justify-content: center; }
[dir='rtl'] .stat__num { justify-content: center; }
.stat__label { color: rgba(245, 240, 230, 0.72); max-width: 22ch; margin-inline: auto; }
/* display:block is required: the bar is a <span>, and an inline box ignores
   block-size, which would let the gold fill grow into a solid slab. */
.stat__bar { display: block; background: rgba(245, 240, 230, 0.18); max-inline-size: 180px; margin-inline: auto; }

/* --- Projects: editorial architectural grid ------------------------------ */
.projects { background: var(--bg-alt); }
.proj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 2.6vw, 3.25rem);
  align-items: start;
}
.proj-feature { position: relative; display: block; overflow: hidden; }
.proj-feature__media { display: block; overflow: hidden; }
.proj-feature__media img {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.proj-feature:hover .proj-feature__media img { transform: scale(1.03); }
.proj-feature__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.6rem) clamp(1.1rem, 0.9rem + 1vw, 1.9rem);
  background: rgba(10, 63, 48, 0.93);
  color: var(--ivory);
}
.proj-feature__ico { color: var(--gold); flex: none; display: flex; }
.proj-feature__ico svg { inline-size: 24px; block-size: 24px; }
.proj-feature__type { display: grid; gap: 0.25rem; min-inline-size: 0; }
.proj-feature .proj__title { color: var(--ivory); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); }
.proj-feature .proj__cat { color: var(--gold); }
.proj-feature .proj__year { color: rgba(245, 240, 230, 0.7); }

.proj-list { border-block-start: 1px solid var(--rule-gold); }
.proj {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 4.5rem 2rem;
  align-items: center;
  gap: clamp(0.7rem, 0.4rem + 0.8vw, 1.25rem);
  padding-block: clamp(1rem, 0.85rem + 0.8vw, 1.6rem);
  border-block-end: 1px solid var(--rule-gold);
  transition: background-color 0.45s var(--ease);
}
a.proj:hover { background: rgba(15, 90, 65, 0.05); }
.proj__ico { color: var(--gold-deep); display: flex; }
.proj__ico svg { inline-size: 20px; block-size: 20px; }
.proj__text { display: grid; gap: 0.3rem; min-inline-size: 0; }
.proj__title {
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.proj__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: var(--t-xs); }
.proj__cat { color: var(--gold-deep); }
.proj__year { color: var(--ink-soft); font-family: var(--font-en); unicode-bidi: isolate; }
.proj__thumb { display: block; overflow: hidden; }
.proj__thumb-in { display: block; }
.proj__thumb img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.proj__go { color: var(--gold-deep); opacity: 0; transform: translateX(-6px); transition: all 0.45s var(--ease); }
[dir='rtl'] .proj__go { transform: translateX(6px); }
a.proj:hover .proj__go, a.proj:focus-visible .proj__go { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .proj-grid { grid-template-columns: 1fr; }
  .proj-feature__media img { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .proj { grid-template-columns: 1.6rem minmax(0, 1fr) 3rem; }
  .proj__go { display: none; }
}

/* --- Contact: filled icon chips and boxed inputs ------------------------- */
.detail {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
}
.detail__chip {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: var(--gold);
  flex: none;
}
.detail__chip svg { inline-size: 20px; block-size: 20px; }
.detail__body { display: grid; gap: 0.3rem; min-inline-size: 0; }
.detail__k { order: 2; }

/* Thin-bordered fields with a gold focus ring. */
.field input,
.field select,
.field textarea {
  padding: 0.8rem 0.9rem;
  background: var(--white, #fff);
  border: 1px solid var(--rule);
  border-block-end: 1px solid var(--rule);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  border-block-end-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(215, 166, 74, 0.16);
}
.field [aria-invalid='true'] { border-color: #9a3b2c; border-block-end-color: #9a3b2c; }
/* The boxed input restyle changes the select's padding, so the two-triangle
   caret trick no longer lines up. A single SVG chevron is position-stable. */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23B8862F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 8px;
  /* The boxed-field `background` shorthand above resets background-repeat,
     so it has to be re-declared here or the chevron tiles across the field. */
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.4rem;
}
[dir='rtl'] .field select {
  background-position: left 1rem center;
  padding-inline-end: 0.9rem;
  padding-inline-start: 2.4rem;
}

/* --- Footer tagline ----------------------------------------------------- */
.footer__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 300;
  color: var(--gold);
  margin-block-end: var(--s-4);
  max-width: 26ch;
}

/* --- Brand mark colouring ----------------------------------------------- */
/* The mark's tower and R inherit currentColor; its pillar is always gold. */
.brand__mark { inline-size: 36px; block-size: 36px; }
.site-header .brand__mark { color: var(--ivory); }
.site-header.is-light .brand__mark { color: var(--forest); }
.footer__brand .brand__mark { color: var(--ivory); }
.footer__brand .brand { color: var(--ivory); }

/* =========================================================================
   RESPONSIVE CORRECTIONS FOR THE RESTYLE
   The blocks above are unmediated and therefore win over the base media
   queries that appear earlier in the file. Everything the mockup treats
   differently on tablet/handset is re-stated here, after those rules.
   ========================================================================= */

@media (max-width: 1023px) {
  /* Hero: the copy takes the full column; the skyline fills the whole frame. */
  .hero__kicker,
  .hero__actions,
  .hero__title,
  body.is-ltr .hero__title,
  .hero__lede { max-width: 100%; }
  .hero__media img { object-position: center 40%; }
  /* Vertical wash instead of the horizontal one: the skyline stays legible
     the whole height while the copy keeps its contrast. */
  .hero__scrim,
  body.is-ltr .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(7, 43, 33, 0.88) 0%,
        rgba(10, 63, 48, 0.7) 40%,
        rgba(10, 63, 48, 0.5) 70%,
        rgba(10, 63, 48, 0.34) 100%);
  }

  /* About: the gold figure keeps its column beside the copy, per the mockup;
     the portrait moves to a full-width band underneath. */
  .intro__grid { grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr); }
  .intro__figure { grid-column: 1 / -1; margin-block-start: var(--s-7); }
  .intro__figure img { aspect-ratio: 16 / 10; }

  /* Services: rows stack the icon beside the number, aside drops below. */
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-aside { position: static; inset-block-start: auto; margin-block-start: var(--s-7); }
  .svc__row {
    grid-template-columns: 2.75rem 1.75rem minmax(0, 1fr);
    grid-template-areas: none;
  }
  .svc__num,
  .svc__ico,
  .svc__text { grid-area: auto; }
  .svc__title,
  .svc__desc { grid-area: auto; }
  .svc__ico { align-items: start; padding-block-start: 0.15rem; }

  /* Projects: feature above the list. */
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-feature { order: -1; }
  .proj-feature__media img { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
  .svc-mosaic { grid-template-columns: 1fr 1fr; }
  .svc__row { grid-template-columns: 2.25rem 1.5rem minmax(0, 1fr); }
  .svc__ico svg { inline-size: 20px; block-size: 20px; }
  /* Stacked statistics, each as a full-width row with its own hairline. */
  .stat { border-inline-start: 0; text-align: start; }
  .stat__ico svg { margin-inline: 0; }
  .stat__num { justify-content: flex-start; }
  [dir='rtl'] .stat__num { justify-content: flex-end; }
  [dir='rtl'] .stat { text-align: right; }
  .stat__label { max-width: none; margin-inline: 0; }
  .stat__bar { max-inline-size: none; margin-inline: 0; }
  /* Hero actions share one width so the pair reads as a stack. */
  .hero__actions .btn { justify-content: center; }
}

@media (max-width: 479px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr); }
  .intro__copy {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--s-6);
    border-block-start: 1px solid var(--rule-gold);
  }
  .hero__actions { display: grid; gap: var(--s-4); }
  .hero__actions .btn { inline-size: 100%; }
  .svc__ico { display: none; }
  .svc__row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .proj-feature__media img { aspect-ratio: 3 / 2; }
}

/* --- Final alignment corrections ----------------------------------------- */
/* The numeral runs are LTR-isolated, so their flex alignment has to be set
   explicitly rather than inherited from text-align. */
.figure-stat__num { justify-content: flex-start; }
[dir='rtl'] .figure-stat__num { justify-content: flex-end; }
[dir='rtl'] .figure-stat { text-align: right; }
body.is-ltr .figure-stat { text-align: left; }
/* A hairline reads as noise against the dark band; 2px keeps the gold fill
   legible without turning into a progress bar. */
.stats .stat__bar { block-size: 2px; }

/* ---------- 26. Custom error pages ---------- */
/* One dark full-height band, so 404/500/etc. read as part of the brand rather
   than as the server's default white page. */
.error-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--ivory);
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem)) clamp(3rem, 2rem + 4vw, 6rem);
}
.error-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(215, 166, 74, 0.14) 0%, transparent 62%),
    linear-gradient(180deg, rgba(10, 63, 48, 0.2) 0%, rgba(7, 43, 33, 0.85) 100%);
}
.error-page__inner { text-align: center; max-inline-size: 76ch; }
.error-page .eyebrow { justify-content: center; color: var(--gold); }
.error-page__code {
  font-family: var(--font-num);
  font-size: clamp(5rem, 2rem + 14vw, 12rem);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-block: var(--s-3) var(--s-4);
  color: transparent;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  direction: ltr;
}
.error-page__t {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.2;
  margin-block: 0 var(--s-4);
}
.error-page__p {
  font-size: var(--t-lede);
  line-height: 1.75;
  color: rgba(245, 240, 230, 0.78);
  margin-inline: auto;
  margin-block: 0 var(--s-6);
  max-inline-size: 52ch;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}
.error-page__help {
  margin-block: var(--s-6) 0;
  font-size: var(--t-sm);
  color: rgba(245, 240, 230, 0.55);
}
.error-page__inner::before {
  content: '';
  display: block;
  inline-size: 1px;
  block-size: clamp(2rem, 4vw, 3.5rem);
  margin: 0 auto var(--s-4);
  background: linear-gradient(to bottom, transparent, var(--rule-gold));
}