/* ============================================================
   NAAS HOLDING — visual system
   Dark-luxe institutional. Ivory cream / NAAS dark green / sage.
   Palette sourced from the official NAAS Holding brand guide.
   ============================================================ */

:root {
  /* Dark palette — the two deep greens from the NAAS brand guide */
  --void: #00231B;
  --ink: #074432;
  --ink-2: #0d5940;
  --panel: #114f3b;

  /* Light palette — the NAAS ivory/cream */
  --paper: #EDEBE2;
  --paper-2: #e2ded0;
  --white: #ffffff;

  /* Type colours */
  --ivory: #EDEBE2;
  --ivory-dim: rgba(237, 235, 226, 0.62);
  --ivory-faint: rgba(237, 235, 226, 0.34);
  --text: #21352c;
  --text-dim: #5c6d64;
  --ink-strong: #00231B;

  /* Accent — NAAS sage */
  --accent: #074432;
  --accent-live: #7EA59B;
  --accent-glow: rgba(126, 165, 155, 0.5);

  --line-light: #d3cfbe;
  --line-dark: rgba(237, 235, 226, 0.14);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --naskh: "Noto Naskh Arabic", serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --measure: 60ch;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --maxw: 1320px;
}

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

html { scroll-behavior: smooth; background: var(--void); }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ivory);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
::selection { background: var(--accent-live); color: #052a28; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ============================================================
   Global overlays: grain, scroll progress, cursor
   ============================================================ */

.grain {
  position: fixed;
  inset: -100%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grainShift 0.9s steps(3) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

.progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent-live));
  z-index: 9997;
  pointer-events: none;
}
[dir="rtl"] .progress { transform-origin: right center; }

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent-live);
}
.cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(237, 235, 226, 0.4);
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
              margin 0.35s var(--ease), border-color 0.35s ease, opacity 0.3s ease;
}
.cursor-ring.on-light { border-color: rgba(11, 24, 34, 0.35); }
.cursor-ring.hot {
  width: 66px; height: 66px;
  margin: -33px 0 0 -33px;
  border-color: var(--accent-live);
}
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
body.has-cursor a, body.has-cursor button, body.has-cursor select { cursor: none; }

/* ============================================================
   Preloader
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: transform 1s var(--ease), opacity 0.6s ease 0.35s;
}
.loader.done { transform: translateY(-101%); opacity: 0; pointer-events: none; }
.loader-mark { width: 62px; height: 62px; opacity: 0; animation: markIn 0.9s var(--ease) 0.1s forwards; }
@keyframes markIn { from { opacity: 0; transform: scale(0.82) rotate(-8deg); } to { opacity: 1; transform: none; } }
.loader-mark path, .loader-mark rect, .loader-mark polygon { stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawIn 1.3s var(--ease) 0.15s forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.loader-bar { width: min(210px, 40vw); height: 1px; background: rgba(244,239,230,0.16); position: relative; overflow: hidden; }
.loader-bar span { position: absolute; inset: 0; background: var(--accent-live); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s linear; }
.loader-word {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  padding-inline-start: 0.42em;
}

/* ============================================================
   Reveal system
   ============================================================ */

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }

.rv-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); transition-delay: var(--rv-delay, 0ms); }
.rv-wipe.in { clip-path: inset(0 0 0 0); }
[dir="rtl"] .rv-wipe { clip-path: inset(0 0 0 100%); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-wipe { opacity: 1; transform: none; clip-path: none; transition: none; }
  .grain { animation: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Header
   ============================================================ */

.topbar {
  background: transparent;
  color: var(--ivory-faint);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(237, 235, 226, 0.07);
  position: relative;
  z-index: 60;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 1rem; }
.topbar a { color: var(--ivory-faint); transition: color 0.3s ease; }
.topbar a:hover { color: var(--ivory); }
.topbar-right { display: flex; align-items: center; gap: 1.5rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(0, 35, 27, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(237, 235, 226, 0.08);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.site-header.scrolled { background: rgba(0, 35, 27, 0.93); border-bottom-color: rgba(237, 235, 226, 0.13); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 2rem; }

.brand { display: flex; align-items: center; gap: 0.95rem; }
.brand-mark { width: 44px; height: 44px; flex: 0 0 auto; transition: transform 0.7s var(--ease); }
.brand:hover .brand-mark { transform: translateY(-3px); }
.brand-name {
  font-family: var(--serif);
  font-size: 1.36rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ivory);
  line-height: 1.05;
  /* The wordmark is Latin and must read left-to-right even when the page
     is RTL. Without isolation the letters of NAAS — and the words that
     grow out of them — get reordered by the bidi algorithm. */
  direction: ltr;
  unicode-bidi: isolate;
}
.brand-name small {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  margin-top: 0.32rem;
}

.main-nav { display: flex; align-items: center; gap: 2.2rem; }
.main-nav a {
  position: relative;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 0.45rem 0;
  transition: color 0.35s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-live);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
[dir="rtl"] .main-nav a::after { transform-origin: right center; }
.main-nav a:hover { color: var(--ivory); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--ivory); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(237, 235, 226, 0.24);
  padding: 0.5rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(0, 35, 27, 0.98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(237, 235, 226, 0.12);
    padding: 0.6rem 0 1rem;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 1rem var(--gutter); font-size: 0.78rem; }
  .main-nav a::after { display: none; }
}

/* ============================================================
   Shared type
   ============================================================ */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -0.018em; }

.kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-live);
  margin-bottom: 1.6rem;
}
.kicker::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent-live);
  flex: 0 0 auto;
}

.lede { font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.72; max-width: var(--measure); }

/* ============================================================
   Hero — signature lattice
   ============================================================ */

.hero {
  position: relative;
  min-height: min(92svh, 940px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--void);
}
#lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 12% 45%, rgba(0, 35, 27, 0.92) 20%, rgba(0, 35, 27, 0.35) 62%, transparent 78%),
    linear-gradient(to top, var(--void) 2%, transparent 34%);
}
[dir="rtl"] .hero::after {
  background:
    radial-gradient(1100px 700px at 88% 45%, rgba(0, 35, 27, 0.92) 20%, rgba(0, 35, 27, 0.35) 62%, transparent 78%),
    linear-gradient(to top, var(--void) 2%, transparent 34%);
}
.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.hero-inner { max-width: 62ch; }
.hero h1 {
  color: var(--ivory);
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
  margin-bottom: 2rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-live);
}
.hero-sub {
  max-width: 50ch;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--ivory-dim);
  margin-bottom: 3rem;
}
.hero-actions { display: flex; gap: 1.1rem; flex-wrap: wrap; }

.hero-meta {
  position: absolute;
  bottom: 2.4rem;
  inset-inline-end: var(--gutter);
  z-index: 2;
  text-align: end;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  line-height: 2.1;
}
.hero-meta b { color: var(--accent-live); font-weight: 400; }

.scroll-cue {
  position: absolute;
  bottom: 2.4rem;
  inset-inline-start: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  transition: color 0.3s ease;
}
.scroll-cue:hover { color: var(--ivory); }
.scroll-cue i { display: block; width: 70px; height: 1px; background: rgba(244,239,230,0.22); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent-live);
  transform: translateX(-100%);
  animation: cueSlide 2.8s var(--ease-io) infinite;
}
[dir="rtl"] .scroll-cue i::after { animation-name: cueSlideRtl; }
@keyframes cueSlide { 0% { transform: translateX(-100%);} 55% { transform: translateX(0);} 100% { transform: translateX(100%);} }
@keyframes cueSlideRtl { 0% { transform: translateX(100%);} 55% { transform: translateX(0);} 100% { transform: translateX(-100%);} }

@media (max-width: 820px), (max-height: 660px) {
  .scroll-cue, .hero-meta { display: none; }
  .hero { min-height: 0; }
}

/* ============================================================
   Page hero (interior)
   ============================================================ */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(900px 460px at 14% 46%, rgba(11, 24, 34, 0.88), rgba(11, 24, 34, 0.2) 58%, transparent 76%),
    radial-gradient(700px 340px at 88% 0%, rgba(126, 165, 155, 0.15), transparent 64%);
}
[dir="rtl"] .page-hero::before {
  background-image:
    radial-gradient(900px 460px at 86% 46%, rgba(11, 24, 34, 0.88), rgba(11, 24, 34, 0.2) 58%, transparent 76%),
    radial-gradient(700px 340px at 12% 0%, rgba(126, 165, 155, 0.15), transparent 64%);
}
.page-hero #lattice { z-index: 0; }
.page-hero .wrap {
  position: relative; z-index: 2;
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}
.page-hero h1 { color: var(--ivory); font-size: clamp(2.3rem, 5.4vw, 4.1rem); max-width: 20ch; }
.page-hero p { max-width: 56ch; color: var(--ivory-dim); margin-top: 1.4rem; font-size: 1.06rem; }

/* ============================================================
   Sadu divider
   ============================================================ */

.sadu {
  height: 12px;
  background-color: var(--void);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M6 0 L12 6 L6 12 L0 6 Z' fill='%232fa39b'/%3E%3Cpath d='M18 0 L24 6 L18 12 L12 6 Z' fill='%23f4efe6' fill-opacity='0.20'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 12px;}

/* ============================================================
   Marquee
   ============================================================ */

.marquee {
  background: var(--void);
  border-top: 1px solid rgba(244,239,230,0.08);
  border-bottom: 1px solid rgba(244,239,230,0.08);
  overflow: hidden;
  padding: 1.15rem 0;
}
.marquee-track { display: flex; align-items: center; gap: 3.4rem; width: max-content; animation: marq 42s linear infinite; }
[dir="rtl"] .marquee-track { animation-name: marqRtl; }
@keyframes marq { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes marqRtl { from { transform: translateX(0);} to { transform: translateX(50%);} }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-item {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  white-space: nowrap;
}
.mq-dot { color: var(--accent-live); font-size: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.15rem 2.2rem;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.btn span { position: relative; z-index: 2; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.5s var(--ease);
}
.btn:hover::before { transform: scaleY(1); }

.btn-primary { background: var(--accent); color: var(--ivory); }
.btn-primary::before { background: var(--accent-live); }
.btn-primary:hover { color: #04211f; }

.btn-ghost { border-color: rgba(244,239,230,0.28); color: var(--ivory); }
.btn-ghost::before { background: var(--ivory); }
.btn-ghost:hover { color: var(--void); border-color: var(--ivory); }

.btn-dark { border-color: rgba(11,24,34,0.3); color: var(--ink-strong); }
.btn-dark::before { background: var(--ink-strong); }
.btn-dark:hover { color: var(--paper); border-color: var(--ink-strong); }

.btn-arrow { display: inline-block; transition: transform 0.45s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }
[dir="rtl"] .btn-arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(5px); }

/* ============================================================
   Sections
   ============================================================ */

.section { position: relative; padding-top: clamp(5rem, 11vw, 9.5rem); padding-bottom: clamp(5rem, 11vw, 9.5rem); }
.section .wrap { position: relative; z-index: 2; }

.s-light { background: var(--paper); color: var(--text); }
.s-light h1, .s-light h2, .s-light h3 { color: var(--ink-strong); }
.s-light .kicker { color: var(--accent); }
.s-light .kicker::before { background: var(--accent); }
.s-light .lede { color: var(--text); }

.s-dark { background: var(--ink); color: var(--ivory-dim); }
.s-dark h1, .s-dark h2, .s-dark h3 { color: var(--ivory); }

.s-void { background: var(--void); color: var(--ivory-dim); }
.s-void h1, .s-void h2, .s-void h3 { color: var(--ivory); }

.section h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1.5rem; max-width: 20ch; }

/* Section index numeral */
.s-index {
  position: absolute;
  top: clamp(2rem, 5vw, 4rem);
  inset-inline-end: clamp(1rem, 4vw, 4rem);
  z-index: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(7rem, 16vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,239,230,0.075);
  pointer-events: none;
  user-select: none;
}
.s-light .s-index { -webkit-text-stroke: 1px rgba(11,24,34,0.09); }

/* Arabic marginalia — a whisper, not a statement */
.s-index { display: flex; flex-direction: column; align-items: flex-end; }
.s-index .whisper {
  -webkit-text-stroke: 0;
  font-family: var(--naskh);
  direction: rtl;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0;
  color: rgba(237, 235, 226, 0.07);
  margin-top: 0.9rem;
  margin-inline-end: 0.15em;
}
.s-light .s-index .whisper { color: rgba(11, 24, 34, 0.08); }

.hero-whisper {
  position: absolute;
  z-index: 1;
  inset-inline-end: clamp(2rem, 8vw, 7rem);
  top: 30%;
  font-family: var(--naskh);
  direction: rtl;
  font-size: clamp(5rem, 15vw, 14rem);
  line-height: 1;
  color: rgba(237, 235, 226, 0.022);
  pointer-events: none;
  user-select: none;
  animation: breathe 17s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (max-width: 820px) { .hero-whisper { display: none; } }

/* Editorial split with sticky left column */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (min-width: 981px) {
  .split > .split-side { position: sticky; top: 130px; }
}
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }

.prose { max-width: var(--measure); font-size: 1.03rem; }
.prose p + p { margin-top: 1.15rem; }
.s-dark .prose, .s-void .prose { color: var(--ivory-dim); }
.s-light .prose { color: var(--text); }

.statement {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ivory);
  max-width: 20ch;
}
.s-light .statement { color: var(--ink-strong); }
.statement em { font-style: italic; color: var(--accent-live); }
.s-light .statement em { color: var(--accent); }

/* ============================================================
   Sector cards with glyphs
   ============================================================ */

.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244,239,230,0.11);
  border: 1px solid rgba(244,239,230,0.11);
  margin-top: 3.5rem;
}
@media (max-width: 1080px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sector-grid { grid-template-columns: minmax(0, 1fr); } }

.sector {
  position: relative;
  background: var(--ink);
  padding: 2.8rem 2rem 2.6rem;
  overflow: hidden;
  transition: background 0.6s var(--ease);
  isolation: isolate;
}
.sector::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(420px 260px at 50% 0%, rgba(126,165,155,0.22), transparent 70%);
  transition: opacity 0.7s var(--ease);
}
.sector:hover::before { opacity: 1; }
.sector:hover { background: var(--ink-2); }
.sector > * { position: relative; z-index: 1; }

.sector-idx {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  color: var(--accent-live);
  margin-bottom: 2.2rem;
}
.glyph {
  width: 62px; height: 62px;
  margin-bottom: 1.8rem;
  color: var(--ivory-faint);
  transition: color 0.6s var(--ease), transform 0.9s var(--ease);
}
.sector:hover .glyph { color: var(--accent-live); transform: rotate(45deg); }
.glyph * { vector-effect: non-scaling-stroke; }
.sector h3 { color: var(--ivory); font-size: 1.34rem; margin-bottom: 0.85rem; letter-spacing: -0.01em; }
.sector p { font-size: 0.93rem; color: var(--ivory-dim); line-height: 1.72; }

/* ============================================================
   Index rows (principles, criteria)
   ============================================================ */

.rows { margin-top: 3rem; border-top: 1px solid var(--line-light); }
.s-dark .rows, .s-void .rows { border-top-color: var(--line-dark); }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 3.2fr) minmax(0, 6fr);
  gap: 1.6rem;
  padding: 2.4rem 1.2rem;
  margin: 0 -1.2rem;
  border-bottom: 1px solid var(--line-light);
  transition: background 0.55s var(--ease);
}
.s-dark .row, .s-void .row { border-bottom-color: var(--line-dark); }
.row:hover { background: rgba(126,165,155,0.055); }
.row-idx { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--accent-live); padding-top: 0.4rem; transition: transform 0.55s var(--ease); }
.s-light .row-idx { color: var(--accent); }
.row:hover .row-idx { transform: translateX(8px); }
[dir="rtl"] .row:hover .row-idx { transform: translateX(-8px); }
.row h3 { font-size: 1.28rem; }
.s-light .row h3 { color: var(--ink-strong); }
.row p { font-size: 0.97rem; }
.s-light .row p { color: var(--text-dim); }
.s-dark .row p, .s-void .row p { color: var(--ivory-dim); }
@media (max-width: 800px) {
  .row { grid-template-columns: 54px 1fr; gap: 0.9rem 1rem; }
  .row p { grid-column: 2; }
}

/* ============================================================
   Pillars
   ============================================================ */

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.8rem, 3.4vw, 3rem); margin-top: 3rem; }
.pillar { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--line-light); transition: transform 0.6s var(--ease); }
.s-dark .pillar, .s-void .pillar { border-top-color: var(--line-dark); }
.pillar::after {
  content: "";
  position: absolute; top: -1px; inset-inline-start: 0;
  width: 0; height: 1px;
  background: var(--accent-live);
  transition: width 0.7s var(--ease);
}
.pillar:hover::after { width: 100%; }
.pillar:hover { transform: translateY(-6px); }
.pillar h3 { font-size: 1.18rem; margin-bottom: 0.7rem; }
.pillar p { font-size: 0.95rem; }
.s-light .pillar p { color: var(--text-dim); }
.s-dark .pillar p, .s-void .pillar p { color: var(--ivory-dim); }

/* ============================================================
   Chairman
   ============================================================ */

.chairman { position: relative; max-width: 74ch; padding-inline-start: clamp(1.6rem, 3.4vw, 3rem); }
.chairman::before {
  content: "";
  position: absolute;
  inset-block: 0.4rem;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-live), transparent);
}
.chairman blockquote { font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.5; letter-spacing: -0.015em; color: var(--ink-strong); }
.s-dark .chairman blockquote, .s-void .chairman blockquote { color: var(--ivory); }
.chairman-body {
  margin-top: 1.6rem;
  max-width: 58ch;
  font-size: 1.03rem;
  color: var(--text-dim);
}
.s-dark .chairman-body, .s-void .chairman-body { color: var(--ivory-dim); }

.chairman figcaption { margin-top: 1.8rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); line-height: 2; }
.s-dark .chairman figcaption, .s-void .chairman figcaption { color: var(--ivory-faint); }
.chairman figcaption strong { color: var(--ink-strong); font-weight: 500; }
.s-dark .chairman figcaption strong, .s-void .chairman figcaption strong { color: var(--ivory); }

/* ============================================================
   Definition rows
   ============================================================ */

.def-rows { margin-top: 2.4rem; border-top: 1px solid var(--line-light); }
.s-dark .def-rows, .s-void .def-rows { border-top-color: var(--line-dark); }
.def-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 1.6rem;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--line-light);
}
.s-dark .def-row, .s-void .def-row { border-bottom-color: var(--line-dark); }
.def-row h3 { font-size: 1.14rem; }
.def-row p { font-size: 0.97rem; max-width: 62ch; }
.s-light .def-row p { color: var(--text-dim); }
.s-dark .def-row p, .s-void .def-row p { color: var(--ivory-dim); }
@media (max-width: 720px) { .def-row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ============================================================
   Saudi feature
   ============================================================ */

.ksa { position: relative; overflow: hidden; background: var(--void); }
.ksa-arabic {
  font-family: var(--naskh);
  direction: rtl;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.6;
  color: var(--accent-live);
  margin-bottom: 1.6rem;
}
html:not([dir="rtl"]) .ksa-arabic { text-align: left; }
.ksa-watermark {
  position: absolute;
  inset-inline-end: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--naskh);
  direction: rtl;
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 1;
  color: rgba(244,239,230,0.022);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ============================================================
   CTA
   ============================================================ */

.cta {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 78% 50%, rgba(126,165,155,0.18), transparent 66%);
}
.cta .wrap {
  position: relative; z-index: 1;
  padding-top: clamp(4.5rem, 9vw, 7rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.5rem;
}
.cta h2 { color: var(--ivory); font-size: clamp(1.8rem, 3.6vw, 2.9rem); max-width: 20ch; margin: 0; }
.cta p { color: var(--ivory-dim); margin-top: 0.9rem; max-width: 48ch; }

/* ============================================================
   Contact
   ============================================================ */

.contact-grid { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5.5rem); }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form { background: var(--white); border: 1px solid var(--line-light); padding: clamp(1.9rem, 4vw, 3.2rem); box-shadow: 0 40px 90px rgba(7,16,24,0.10); }
.form-row { margin-bottom: 1.5rem; }
.form-row label { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-strong); margin-bottom: 0.6rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-light);
  padding: 0.95rem 1rem;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: #c4c0b4; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,94,90,0.12);
}
.form-note { font-size: 0.82rem; color: var(--text-dim); margin-top: 1.2rem; }

.contact-list { list-style: none; margin-top: 2rem; }
.contact-list li { padding: 1.4rem 0; border-bottom: 1px solid var(--line-light); display: grid; grid-template-columns: 140px 1fr; gap: 1rem; font-size: 0.96rem; color: var(--text-dim); }
.contact-list .label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); padding-top: 0.25rem; }
@media (max-width: 600px) { .contact-list li { grid-template-columns: 1fr; gap: 0.35rem; } }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { position: relative; background: var(--void); color: var(--ivory-dim); font-size: 0.92rem; overflow: hidden; border-top: 1px solid rgba(244,239,230,0.08); }
.footer-ghost {
  position: absolute;
  bottom: -0.2em;
  inset-inline-start: -0.05em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(8rem, 25vw, 22rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(244,239,230,0.026);
  pointer-events: none;
  user-select: none;
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) repeat(3, minmax(0, 2fr));
  gap: 2.8rem;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } }

.footer-brand .brand-name { font-size: 1.6rem; }
.footer-ar { font-family: var(--naskh); direction: rtl; font-size: 1.24rem; color: var(--ivory-dim); margin-top: 1rem; }
html:not([dir="rtl"]) .footer-ar { text-align: left; }
.footer-brand p:last-child { margin-top: 1.2rem; max-width: 38ch; font-size: 0.88rem; line-height: 1.8; color: var(--ivory-faint); }

.site-footer h4 { font-family: var(--mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ivory); margin-bottom: 1.4rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.75rem; }
.site-footer li a { color: var(--ivory-faint); font-size: 0.9rem; transition: color 0.3s ease, padding 0.35s var(--ease); display: inline-block; }
.site-footer li a:hover { color: var(--ivory); padding-inline-start: 6px; }

.footer-legal {
  border-top: 1px solid rgba(244,239,230,0.09);
  padding-top: 1.6rem;
  padding-bottom: 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.3);
  text-transform: uppercase;
}
.footer-legal span:last-child { max-width: 62ch; text-transform: none; letter-spacing: 0.04em; font-family: var(--sans); font-size: 0.72rem; }

/* ============================================================
   Language selector
   ============================================================ */

.lang-select {
  background: transparent;
  color: var(--ivory-dim);
  border: 1px solid rgba(244,239,230,0.22);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.lang-select:hover { border-color: var(--accent-live); color: var(--ivory); }
.lang-select:focus { outline: 1px solid var(--accent-live); outline-offset: 2px; }
.lang-select option { color: #00231B; background: #fff; }

/* ============================================================
   RTL
   ============================================================ */

[dir="rtl"] .chairman::before { left: auto; right: 0; }

/* ============================================================
   Per-language typography
   ============================================================ */

html[lang="ar"] body,
html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .brand-name, html[lang="ar"] .statement,
html[lang="ar"] .mq-item, html[lang="ar"] .chairman blockquote {
  font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
  letter-spacing: 0;
}
html[lang="ar"] .kicker, html[lang="ar"] .main-nav a, html[lang="ar"] .btn,
html[lang="ar"] .brand-name small, html[lang="ar"] .form-row label,
html[lang="ar"] .site-footer h4, html[lang="ar"] .site-footer .footer-h, html[lang="ar"] .contact-list .label,
html[lang="ar"] .chairman figcaption, html[lang="ar"] .topbar,
html[lang="ar"] .mq-item, html[lang="ar"] .scroll-cue, html[lang="ar"] .nav-toggle,
html[lang="ar"] .sector-idx, html[lang="ar"] .row-idx, html[lang="ar"] .hero-meta,
html[lang="ar"] .footer-legal {
  letter-spacing: 0;
}
html[lang="ar"] body { line-height: 1.95; }
html[lang="ar"] .hero h1 { line-height: 1.32; letter-spacing: 0; }
html[lang="ar"] .page-hero h1, html[lang="ar"] .section h2 { line-height: 1.4; letter-spacing: 0; }
html[lang="ar"] .statement { line-height: 1.55; letter-spacing: 0; }

html[lang="zh-CN"] body,
html[lang="zh-CN"] input, html[lang="zh-CN"] select, html[lang="zh-CN"] textarea {
  font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3,
html[lang="zh-CN"] .statement, html[lang="zh-CN"] .chairman blockquote {
  font-family: "Source Serif 4", "Songti SC", "SimSun", serif;
  letter-spacing: 0.01em;
}
html[lang="zh-CN"] .hero h1 { line-height: 1.24; letter-spacing: 0.01em; }
html[lang="zh-CN"] .page-hero h1, html[lang="zh-CN"] .section h2 { line-height: 1.35; }

html[lang="ru"] .hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); }
html[lang="ru"] .section h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
html[lang="fr"] .hero h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); }

/* ============================================================
   Material refinements
   The screen is stone and carved wood, not flat colour. Light
   sections carry the lattice as a watermark; dark sections carry
   depth rather than a single tone.
   ============================================================ */

.s-light {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Cg fill='none' stroke='%230b1822' stroke-opacity='0.055' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='21'/%3E%3Ccircle cx='74' cy='0' r='21'/%3E%3Ccircle cx='0' cy='74' r='21'/%3E%3Ccircle cx='74' cy='74' r='21'/%3E%3Ccircle cx='37' cy='37' r='21'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 74px 74px;
}

.s-dark, .s-void { position: relative; isolation: isolate; }
.s-dark::before, .s-void::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 70% at 72% 0%, rgba(126, 165, 155, 0.075), transparent 62%),
    radial-gradient(90% 60% at 8% 100%, rgba(232, 154, 85, 0.045), transparent 66%);
}
[dir="rtl"] .s-dark::before, [dir="rtl"] .s-void::before {
  background:
    radial-gradient(130% 70% at 28% 0%, rgba(126, 165, 155, 0.075), transparent 62%),
    radial-gradient(90% 60% at 92% 100%, rgba(232, 154, 85, 0.045), transparent 66%);
}

/* Sector cards — the glyph carries more weight, the lattice shows at the corner */

.sector { padding: 3rem 2.1rem 2.8rem; }
.sector::after {
  content: "";
  position: absolute;
  inset-inline-end: -34px;
  bottom: -34px;
  width: 132px;
  height: 132px;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66'%3E%3Cg fill='none' stroke='%23f4efe6' stroke-opacity='0.1' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='19'/%3E%3Ccircle cx='66' cy='0' r='19'/%3E%3Ccircle cx='0' cy='66' r='19'/%3E%3Ccircle cx='66' cy='66' r='19'/%3E%3Ccircle cx='33' cy='33' r='19'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 66px 66px;
  transition: opacity 0.7s var(--ease);
}
.sector:hover::after { opacity: 1; }
.glyph { width: 74px; height: 74px; margin-bottom: 2rem; color: rgba(237, 235, 226, 0.42); }
.sector h3 { font-size: 1.42rem; }

/* Emphasis inside display type — used once or twice, never more */
.section h2 em, .page-hero h1 em { font-style: italic; color: var(--accent-live); }
.s-light h2 em { color: var(--accent); }

/* The CTA is the last thing seen; give it the weave too */
.cta { isolation: isolate; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Cg fill='none' stroke='%23f4efe6' stroke-opacity='0.07' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='21'/%3E%3Ccircle cx='74' cy='0' r='21'/%3E%3Ccircle cx='0' cy='74' r='21'/%3E%3Ccircle cx='74' cy='74' r='21'/%3E%3Ccircle cx='37' cy='37' r='21'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 74px 74px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 62%);
  mask-image: linear-gradient(to left, #000, transparent 62%);
}
[dir="rtl"] .cta::after {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 62%);
  mask-image: linear-gradient(to right, #000, transparent 62%);
}

/* Contact form sits on the watermark — lift it clear */
.contact-form { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   The light crosses stone as well as wood. On the pale sections
   the weave is cut into the surface rather than lit through it,
   so it deepens where the hand passes instead of glowing.
   ------------------------------------------------------------ */

.s-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Cg fill='none' stroke='%230b1822' stroke-opacity='0.17' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='21'/%3E%3Ccircle cx='74' cy='0' r='21'/%3E%3Ccircle cx='0' cy='74' r='21'/%3E%3Ccircle cx='74' cy='74' r='21'/%3E%3Ccircle cx='37' cy='37' r='21'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(circle 250px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0,0,0,0.55) 42%, transparent 72%);
  mask-image: radial-gradient(circle 250px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0,0,0,0.55) 42%, transparent 72%);
}
.s-light.lit::after { opacity: 1; }

/* The nun answers when you come near it */
.s-index .whisper {
  color: rgba(237, 235, 226, 0.18);
  opacity: 0.38;
  transition: opacity 0.5s var(--ease);
}
.s-light .s-index .whisper { color: rgba(11, 24, 34, 0.2); }
.hero-whisper { transition: color 0.6s var(--ease); }
.hero-whisper.near { color: rgba(237, 235, 226, 0.055); }

@media (prefers-reduced-motion: reduce) {
  .s-light::after { display: none; }
  .s-index .whisper { opacity: 0.38; }
}

/* ------------------------------------------------------------
   The footer lockup opens. NAAS are his initials, so on hover
   each letter grows the word it stands for -- the third carries
   `Al` along with Abdulmalik, kept dim so it reads as part of the
   name without claiming a letter of the acronym. The capitals stay
   bright and the rest arrives dimmer, so the acronym is still
   legible inside the full name.
   ------------------------------------------------------------ */

.brand-reveal { cursor: default; }
/* Each capital travels with the word it opens, so a narrow footer column
   breaks between names and never inside one. */
.brand-reveal .nl { white-space: nowrap; }
.brand-reveal .np {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  /* `top` is the one value that lands the revealed word exactly on the
     baseline of the capital beside it; measured, not guessed. */
  vertical-align: top;
  opacity: 0;
  transition: max-width 0.85s var(--ease), opacity 0.55s ease;
}
.brand-reveal .np > i {
  font-style: normal;
  color: rgba(237, 235, 226, 0.58);
}
/* max-width only caps a shrink-to-fit box, so a generous value opens to the
   word's natural width and never pads a gap after it. */
.brand-reveal:hover .np,
.brand-reveal:focus-within .np { max-width: 7ch; opacity: 1; }
.brand-reveal:hover .nl:nth-of-type(3) .np,
.brand-reveal:focus-within .nl:nth-of-type(3) .np { max-width: 14ch; }

.brand-reveal .nl:nth-of-type(1) .np { transition-delay: 0ms; }
.brand-reveal .nl:nth-of-type(2) .np { transition-delay: 80ms; }
.brand-reveal .nl:nth-of-type(3) .np { transition-delay: 160ms; }
.brand-reveal .nl:nth-of-type(4) .np { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .brand-reveal .np { transition: none; }
}

/* ============================================================
   Brand lockup — traced from the NAAS brand guide (page 3 for
   Latin, page 2 for Arabic). The guide only ever sets the logo
   on ivory #EDEBE2, and its dark-green diagonal (#074432) all
   but vanishes against --void. So the top bar and header carry
   the ivory, and the lockup appears exactly as specified.
   ============================================================ */

.brand { color: #000; }
.brand-lockup {
  display: block;
  height: 50px;
  width: auto;
  flex: 0 0 auto;
  transition: transform 0.7s var(--ease);
}
.brand:hover .brand-lockup { transform: translateY(-2px); }

/* Latin lockup by default; the Arabic one when the page is Arabic */
.brand .brand-lockup--ar,
.loader .brand-lockup--ar { display: none; }
html[lang="ar"] .brand .brand-lockup--en,
html[lang="ar"] .loader .brand-lockup--en { display: none; }
html[lang="ar"] .brand .brand-lockup--ar,
html[lang="ar"] .loader .brand-lockup--ar { display: block; }

.topbar {
  background: var(--paper);
  color: var(--text-dim);
  border-bottom-color: rgba(0, 35, 27, 0.08);
}
.topbar a { color: var(--text-dim); }
.topbar a:hover { color: var(--ink-strong); }

/* Opaque, not frosted: any dark section bleeding through the blur
   turns the ivory grey and shifts the lockup off its brand ground. */
.site-header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: rgba(0, 35, 27, 0.1);
}
.site-header.scrolled {
  background: var(--paper);
  border-bottom-color: rgba(0, 35, 27, 0.14);
  box-shadow: 0 12px 30px -20px rgba(0, 35, 27, 0.55);
}
.main-nav a { color: var(--text-dim); }
.main-nav a:hover,
.main-nav a.active { color: var(--ink-strong); }
.main-nav a::after { background: var(--accent); }
.nav-toggle { border-color: rgba(0, 35, 27, 0.25); color: var(--ink-strong); }

.lang-select { color: var(--text-dim); border-color: rgba(0, 35, 27, 0.22); }
.lang-select:hover { color: var(--ink-strong); border-color: var(--accent); }
.lang-select:focus { outline-color: var(--accent); }

@media (max-width: 960px) {
  .main-nav {
    background: rgba(237, 235, 226, 0.98);
    border-bottom-color: rgba(0, 35, 27, 0.12);
  }
}
@media (max-width: 600px) {
  .brand-lockup { height: 40px; }
}

/* Preloader — the lockup on its own ground before the page opens */
.loader { background: var(--paper); }
.loader-lockup {
  display: block;
  width: min(260px, 60vw);
  height: auto;
  color: #000;
  opacity: 0;
  animation: markIn 0.9s var(--ease) 0.1s forwards;
}
.loader-bar { background: rgba(0, 35, 27, 0.12); }
.loader-bar span { background: var(--accent); }

/* ============================================================
   Mobile & accessibility pass — from the device audit
   (344–852px wide, EN / AR / RU) and Lighthouse.
   ============================================================ */

/* Footer headings are h2 now (h1 → h4 skipped a level for screen
   readers); they keep the small mono look of the old h4. */
.site-footer .footer-h {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 1.2rem;
}

/* Nothing essential below ~11px. */
.brand-name small { font-size: 0.66rem; }
.footer-brand .brand-name small { font-size: 0.7rem; }
.form-row label { font-size: 0.72rem; }
.contact-list .label { font-size: 0.7rem; }
.lang-select { font-size: 0.7rem; }
.footer-legal { font-size: 0.68rem; }
.footer-legal span:last-child { font-size: 0.8rem; }

/* Footer contrast: the faint ivory failed WCAG AA on the void green. */
.footer-brand p:last-child { color: rgba(237, 235, 226, 0.68); }
.site-footer li a { color: rgba(237, 235, 226, 0.72); }
.footer-legal { color: rgba(237, 235, 226, 0.58); }
.brand-reveal small { color: rgba(237, 235, 226, 0.62); }

/* Form fields at 16px: iOS Safari zooms the whole page into any
   field smaller than that the moment it's tapped. */
.form-row input, .form-row select, .form-row textarea { font-size: 1rem; }

/* Touch screens: 44px targets, no field zoom, and no animated
   full-screen grain (a blended layer three screens tall, redrawn
   every frame — invisible on a phone, but it costs battery). */
@media (pointer: coarse) {
  .lang-select { font-size: 16px; min-height: 44px; padding: 0.4rem 0.6rem; }
  .topbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-toggle { min-height: 44px; padding-inline: 1rem; }
  .site-footer li { margin-bottom: 0; }
  .site-footer li a { padding-block: 0.6rem; }
  .grain { display: none; }
}

/* Phones: the top bar holds to one line — the company name goes
   (the logo sits right under it) and the enquiries link keeps the
   rest of the row. */
@media (max-width: 720px) {
  .topbar .wrap { min-height: 44px; }
  .topbar .wrap > span:first-child { display: none; }
  .topbar-right { flex: 1; min-width: 0; justify-content: space-between; gap: 0.9rem; }
  .topbar-right a {
    display: block;
    line-height: 44px;
    min-width: 0;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kicker { font-size: 0.72rem; }
  .btn { font-size: 0.74rem; }
  .nav-toggle { font-size: 0.72rem; }
  .site-header .wrap { min-height: 70px; }
}
@media (max-width: 380px) {
  .topbar-right a { letter-spacing: 0.02em; }
  .topbar-right { gap: 0.6rem; }
}

/* ============================================================
   Privacy Notice, thank-you and 404 pages
   ============================================================ */

.legal { max-width: 72ch; }
.legal h3 { font-size: 1.22rem; color: var(--ink-strong); margin: 2.4rem 0 0.7rem; }
.legal h3:first-of-type { margin-top: 1.6rem; }
.legal p { margin-bottom: 0.9rem; }
.legal ul { padding-inline-start: 1.25rem; margin: 0.4rem 0 1rem; }
.legal li { margin-bottom: 0.55rem; }
.legal a, .legal-jump { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.page-hero .legal-jump { color: var(--accent-live); white-space: nowrap; margin-inline-start: 0.4rem; }
.legal-date { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.legal-ar { border-top: 1px solid var(--line-light); padding-top: clamp(3rem, 7vw, 5rem); }
.legal-ar, .legal-ar .legal, .legal-ar h2, .legal-ar h3 { font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif; }
.legal-ar .legal { line-height: 2; }
.legal-ar h2 { color: var(--ink-strong); font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 1rem; }
.legal-ar .kicker, .legal-ar .legal-date { letter-spacing: 0; }

/* Contact email — the address always reads left-to-right, even on the Arabic page */
.contact-email {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  margin-top: 1.8rem; padding: 1.1rem 1.3rem;
  background: var(--white); border: 1px solid var(--line-light); border-inline-start: 3px solid var(--accent);
}
.contact-email .label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.contact-email a { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; color: var(--ink-strong); word-break: break-all; }
.contact-email a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
html[lang="ar"] .contact-email .label { letter-spacing: 0; }
.site-footer .footer-email { unicode-bidi: isolate; }

.form-note-link { margin-top: 0.5rem; }
.form-note-link a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .form-note-link a { display: inline-block; padding-block: 0.7rem; } }

.page-hero--tall .wrap { min-height: min(62svh, 560px); display: flex; flex-direction: column; justify-content: center; }
.page-actions { margin-top: 2.4rem; }

/* Phones held sideways: the sticky header was a third of the screen */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar .wrap { min-height: 36px; }
  .site-header .wrap { min-height: 56px; }
  .brand-lockup { height: 34px; }
}