/* ==========================================================================
   Golden Desert Investment L.L.C. — corporate site
   Styles derived from the Golden Desert Design System (design-system-tmp).
   ========================================================================== */

/* ---------- Tokens ----------
   Palette rebuilt 2026-07 from the client brand assets:
   terracotta #c05531 sampled from the logo wordmark; ambers/umbers derived from
   the brand dunes photograph (dune shadow #ee5809, lit dune #fb8932, sun #fdfb99,
   sky amber #fec634) — desaturated and deepened for corporate use. */
:root{
  /* Umber — deep burnt red-browns (dune shadow, carried to near-black) */
  --gd-umber-900:#2b160c;
  --gd-umber-800:#331c10;
  --gd-umber-700:#40251a;
  --gd-ink:#2b1d12;
  --gd-ink-soft:#5c4630;

  /* Cream — warm apricot-tinged ivories */
  --gd-cream-50:#f9f2e7;
  --gd-cream-100:#f4ead9;
  --gd-cream-card:#fcf7ec;

  /* Sand — warm peach-tan neutrals */
  --gd-sand-200:#f0dfc2;
  --gd-sand-300:#e5cda6;
  --gd-sand-400:#d5b586;
  --gd-sand-line:#ead9ba;

  /* Terracotta — the brand accent, from the logo wordmark */
  --gd-terra-400:#e08a54;   /* on-dark accent (lit-dune apricot, tamed) */
  --gd-terra-500:#c05531;   /* primary accent */
  --gd-terra-600:#a5451f;   /* hover / pressed */

  /* Amber — the sun note; reserved for big figures on dark */
  --gd-amber-400:#e2a53f;

  /* Legacy gold aliases (kept for compatibility; now map to terracotta) */
  --gd-gold-400:var(--gd-terra-400);
  --gd-gold-500:var(--gd-terra-500);
  --gd-gold-600:var(--gd-terra-600);
  --gd-terracotta:var(--gd-terra-500);
  --gd-espresso-900:var(--gd-umber-900);
  --gd-espresso-800:var(--gd-umber-800);
  --gd-espresso-700:var(--gd-umber-700);

  --gd-whatsapp:#25d366;
  --gd-white:#ffffff;

  /* Semantic aliases */
  --gd-bg:var(--gd-cream-50);
  --gd-bg-alt:var(--gd-cream-100);
  --gd-bg-dark:var(--gd-umber-800);
  --gd-surface:var(--gd-cream-card);
  --gd-surface-sunk:var(--gd-sand-200);
  --gd-text:var(--gd-ink);
  --gd-text-muted:var(--gd-ink-soft);
  --gd-text-on-dark:var(--gd-cream-50);
  --gd-text-muted-on-dark:#cbaa8d;
  --gd-accent:var(--gd-terra-500);
  --gd-accent-hover:var(--gd-terra-600);
  --gd-accent-on-dark:var(--gd-terra-400);
  --gd-on-accent:#fff6ee;   /* text on terracotta fills */
  --gd-border:var(--gd-sand-line);
  --gd-border-strong:var(--gd-sand-400);
  --gd-border-on-dark:rgba(255,255,255,.16);
  --gd-focus-ring:rgba(192,85,49,.4);

  /* Type — display echoes the logo's light geometric letterforms */
  --gd-font-display:'Jost','Century Gothic','Avenir Next','Futura',sans-serif;
  --gd-font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gd-fs-display:clamp(44px,6vw,84px);
  --gd-fs-h1:clamp(34px,4.2vw,56px);
  --gd-fs-h2:clamp(26px,3vw,38px);
  --gd-fs-h3:22px;
  --gd-fs-h4:18px;
  --gd-fs-body-lg:19px;
  --gd-fs-body:16px;
  --gd-fs-small:14px;
  --gd-fs-eyebrow:13px;
  --gd-ls-eyebrow:0.22em;
  --gd-ls-caps:0.14em;

  /* Spacing */
  --gd-section-y:clamp(64px,9vw,128px);
  --gd-container:1200px;
  --gd-gutter:clamp(20px,5vw,64px);

  /* Effects */
  --gd-radius-xs:4px;
  --gd-radius-sm:8px;
  --gd-radius-md:14px;
  --gd-radius-lg:20px;
  --gd-radius-pill:999px;
  --gd-shadow-xs:0 1px 2px rgba(43,24,12,.06);
  --gd-shadow-sm:0 2px 8px rgba(43,24,12,.07);
  --gd-shadow-md:0 12px 32px -12px rgba(43,24,12,.2);
  --gd-shadow-lg:0 30px 70px -28px rgba(43,24,12,.36);
  --gd-ease:cubic-bezier(.22,.61,.36,1);
  --gd-dur-fast:140ms;
  --gd-dur:220ms;
  --gd-dur-slow:400ms;
  --gd-hero-scrim:linear-gradient(180deg,rgba(43,22,12,.52) 0%,rgba(43,22,12,.74) 100%);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--gd-bg);
  color:var(--gd-text);
  font-family:var(--gd-font-body);
  font-size:var(--gd-fs-body);
  line-height:1.6;
}
/* height:auto stops the HTML height attribute (a presentational hint) from
   beating a CSS aspect-ratio; components that want a fixed height set it themselves. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--gd-font-display);letter-spacing:-0.01em;line-height:1.12;margin:0;color:var(--gd-ink)}
p{margin:0}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gd-focus-ring);border-radius:var(--gd-radius-xs)}

.container{max-width:var(--gd-container);margin:0 auto;padding-left:var(--gd-gutter);padding-right:var(--gd-gutter)}
.section{padding-top:var(--gd-section-y);padding-bottom:var(--gd-section-y)}
.section--alt{background:var(--gd-bg-alt)}
.section--dark{background:var(--gd-bg-dark);color:var(--gd-text-on-dark)}
.section--dark h2,.section--dark h3{color:var(--gd-cream-50)}
/* Key-numbers band — flat umber, no image behind it, so the figures carry the section */
.stats-band{background:var(--gd-umber-900)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gd-espresso-900);color:var(--gd-cream-50);
  padding:10px 18px;border-radius:0 0 var(--gd-radius-sm) 0;
  font-size:14px;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--gd-font-display);
  font-weight:600;
  font-size:var(--gd-fs-eyebrow);
  letter-spacing:var(--gd-ls-eyebrow);
  text-transform:uppercase;
  color:var(--gd-terra-600);
}
.eyebrow--on-dark{color:var(--gd-accent-on-dark)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--gd-font-display);font-weight:600;line-height:1;letter-spacing:.01em;
  border-radius:var(--gd-radius-sm);border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--gd-dur) var(--gd-ease),color var(--gd-dur) var(--gd-ease),
    border-color var(--gd-dur) var(--gd-ease),transform var(--gd-dur-fast) var(--gd-ease);
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:9px 16px;font-size:14px}
.btn--md{padding:13px 22px;font-size:15px}
.btn--lg{padding:16px 30px;font-size:16px}
.btn--primary{background:var(--gd-accent);color:var(--gd-on-accent)}
.btn--primary:hover{background:var(--gd-accent-hover)}
.btn--secondary{background:transparent;color:var(--gd-ink);border-color:var(--gd-ink)}
.btn--secondary:hover{background:rgba(43,24,12,.05)}
.btn--secondary.btn--on-dark{color:var(--gd-text-on-dark);border-color:var(--gd-border-on-dark)}
.btn--secondary.btn--on-dark:hover{background:rgba(255,255,255,.08)}
.btn--ghost{background:transparent;color:var(--gd-terra-600);padding-left:0;padding-right:0}
.btn--ghost:hover{color:var(--gd-terra-500)}
.btn .icon{flex-shrink:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(249,242,231,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gd-border);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gd-gutter);max-width:1400px;margin:0 auto;
}
.wordmark{
  display:inline-flex;align-items:center;gap:12px;min-width:0;
  font-family:var(--gd-font-display);font-weight:600;font-size:15px;
  letter-spacing:var(--gd-ls-caps);color:var(--gd-ink);text-decoration:none;white-space:nowrap;
}
.wordmark__mark{display:block;flex-shrink:0;width:38px;height:38px;border-radius:6px}
.site-footer .wordmark__mark{width:44px;height:44px;border-radius:8px}
.wordmark small{display:block;font-family:var(--gd-font-body);font-weight:500;font-size:10px;letter-spacing:.18em;color:var(--gd-text-muted);margin-top:2px}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a:not(.btn){
  font-size:15px;font-weight:500;color:var(--gd-text-muted);text-decoration:none;white-space:nowrap;
  transition:color var(--gd-dur) var(--gd-ease);
}
.site-nav a:not(.btn):hover{color:var(--gd-ink)}
.site-nav a:not(.btn)[aria-current="page"]{color:var(--gd-accent);font-weight:600}
.nav-toggle{
  display:none;appearance:none;background:none;border:1px solid var(--gd-border-strong);
  border-radius:var(--gd-radius-sm);padding:9px 11px;cursor:pointer;color:var(--gd-ink);
}
@media (max-width:920px){
  .nav-toggle{display:inline-flex;align-items:center;flex-shrink:0}
  .site-header .wordmark{font-size:13px;letter-spacing:.1em}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--gd-cream-50);border-bottom:1px solid var(--gd-border);
    padding:8px var(--gd-gutter) 20px;box-shadow:var(--gd-shadow-md);
  }
  .site-nav.is-open{display:flex}
  .site-nav a:not(.btn){padding:13px 2px;border-bottom:1px solid var(--gd-border);font-size:16px}
  .site-nav .btn{margin-top:16px;justify-content:center}
}
@media (max-width:420px){
  .site-header .wordmark{font-size:11px;letter-spacing:.06em;gap:9px}
  .site-header .wordmark__mark{width:30px;height:30px;border-radius:5px}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--gd-espresso-800)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:var(--gd-hero-scrim)}
.hero__inner{
  position:relative;max-width:var(--gd-container);margin:0 auto;
  padding:clamp(120px,16vw,200px) var(--gd-gutter) clamp(90px,12vw,150px);
}
.hero--compact .hero__inner{padding:clamp(80px,10vw,128px) var(--gd-gutter) clamp(56px,7vw,88px)}
.hero .eyebrow{color:var(--gd-accent-on-dark);margin-bottom:20px}
.hero h1{font-weight:500;
  max-width:900px;font-size:var(--gd-fs-display);
  line-height:1.03;letter-spacing:-0.02em;color:var(--gd-cream-50);text-wrap:balance;
}
.hero--compact h1{font-size:var(--gd-fs-h1)}
.hero__sub{
  margin-top:22px;max-width:620px;font-size:var(--gd-fs-body-lg);
  line-height:1.6;color:rgba(249,242,231,.88);
}
.hero__actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
/* Heroes that carry the intro cover's photograph. The standard scrim would
   brown it over, so the shade here is held to the side the type sits on and
   the dunes keep the colour the cover shows them in. Narrow screens, where the
   type runs the full width, get an even shade instead. */
.hero--intro .hero__scrim{
  background:
    linear-gradient(var(--gd-hero-intro-dir,90deg),rgba(43,22,12,.62) 0%,rgba(43,22,12,.40) 50%,rgba(43,22,12,.12) 100%),
    linear-gradient(180deg,rgba(43,22,12,.10) 0%,rgba(43,22,12,.24) 100%);
}
[dir="rtl"] .hero--intro{--gd-hero-intro-dir:270deg}
/* The apricot eyebrow is the same hue as the dunes behind it and drops out. */
.hero--intro .eyebrow{color:var(--gd-sand-200)}
@media (max-width:720px){
  .hero--intro .hero__scrim{background:linear-gradient(180deg,rgba(43,22,12,.44) 0%,rgba(43,22,12,.56) 100%)}
}

/* ---------- Intro cover ----------
   The homepage waits behind a full-bleed desert frame until the visitor presses
   Enter. It is display:none here and stays that way unless the inline script in
   head.njk raises .gd-intro on the document, so a browser that never ran that
   line is simply shown the homepage and can never be shut out of it.

   Leaving is one more class. The cover fades to visibility:hidden, and because
   visibility settles at the END of its transition rather than the start, the
   fade finishes and the element takes itself out of the page with no timer in
   the script having to agree with a duration in here. */
.intro{display:none}
.gd-intro .intro{
  display:flex;position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;
  overflow:hidden;background:var(--gd-umber-900);
  opacity:1;visibility:visible;
  transition:opacity 640ms var(--gd-ease-out),visibility 640ms var(--gd-ease-out),
    transform 900ms var(--gd-ease-out);
}
.gd-intro.gd-intro-out .intro{opacity:0;visibility:hidden;pointer-events:none}
/* Nothing scrolls behind the cover. Scoped to the open state, so the page gets
   its scrollbar back the moment the visitor is through rather than on a timer. */
.gd-intro:not(.gd-intro-out),.gd-intro:not(.gd-intro-out) body{overflow:hidden}

/* The photograph is a 3:1 panorama and the window almost never is, so most of
   its width is cropped away. Framing slightly right of centre is what keeps the
   low sun and the warm side of the sky in shot; a portrait window, which keeps
   only a sliver, has to lean further still. */
.intro__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%}
@media (max-aspect-ratio:1/1){.intro__img{object-position:70% 50%}}
/* A vignette would have done the opposite of what is needed here: the type is
   in the middle, so the shade has to be too. A soft pool under the lockup and
   the button carries them, and the frame keeps its glow out at the edges. */
.intro__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(54% 44% at 50% 47%,rgba(43,22,12,.48) 0%,rgba(43,22,12,.20) 62%,rgba(43,22,12,0) 100%),
    linear-gradient(180deg,rgba(43,22,12,.30) 0%,rgba(43,22,12,.05) 42%,rgba(43,22,12,.34) 100%);
}
.intro__inner{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(36px,7vh,68px);padding:var(--gd-gutter);text-align:center;
}
/* The printed lockup, rebuilt from the mark and a cream cut of the wordmark:
   the wordmark is 2.065x the width of the mark and sits 9.6% of the mark's
   width below it. One custom property drives both, so the pair cannot drift. */
.intro__logo{--intro-lockup:clamp(188px,25vw,306px);display:block}
.intro__mark{display:block;margin:0 auto;width:calc(var(--intro-lockup) * .484);height:auto}
.intro__wordmark{display:block;width:var(--intro-lockup);height:auto;margin-top:calc(var(--intro-lockup) * .047)}

.intro__enter{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--gd-font-display);font-weight:600;font-size:15px;line-height:1;
  letter-spacing:var(--gd-ls-caps);text-transform:uppercase;
  padding:17px 42px;cursor:pointer;
  border:1px solid rgba(249,242,231,.62);border-radius:var(--gd-radius-pill);
  background:rgba(43,22,12,.26);color:var(--gd-cream-50);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:background var(--gd-dur) var(--gd-ease),color var(--gd-dur) var(--gd-ease),
    border-color var(--gd-dur) var(--gd-ease),transform var(--gd-dur-fast) var(--gd-ease);
}
.intro__enter:hover{background:var(--gd-cream-50);border-color:var(--gd-cream-50);color:var(--gd-umber-900)}
.intro__enter:active{transform:translateY(1px)}
.intro__enter .icon{transform:scaleX(var(--gd-arrow-dir));transition:transform var(--gd-dur) var(--gd-ease)}
.intro__enter:hover .icon{transform:scaleX(var(--gd-arrow-dir)) translateX(4px)}
/* Arabic is not set in caps, and tracking loosened for Latin small caps only
   pulls the joins apart. */
[dir="rtl"] .intro__enter{letter-spacing:normal;text-transform:none}
@media (max-height:520px){.intro__logo{--intro-lockup:clamp(150px,24vw,210px)}.intro__enter{padding:13px 32px}}

/* ---------- Section headings ---------- */
.section-head{max-width:640px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .eyebrow{display:block;margin-bottom:14px}
.section-head h2{font-weight:500;font-size:var(--gd-fs-h2);text-wrap:balance}
.section-head p{margin-top:16px;font-size:var(--gd-fs-body-lg);color:var(--gd-text-muted)}

/* ---------- Two-column split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split--media-first{grid-template-columns:1fr 1.05fr}
.split h2{font-weight:500;font-size:var(--gd-fs-h2);margin-top:16px;text-wrap:balance}
.split .eyebrow{display:block}
.split p{margin-top:20px;font-size:var(--gd-fs-body-lg);line-height:1.65;color:var(--gd-text-muted)}
.split__cta{margin-top:28px}
.media{
  border-radius:var(--gd-radius-md);overflow:hidden;background:var(--gd-sand-300);
  box-shadow:var(--gd-shadow-sm);
}
.media img{width:100%;height:100%;object-fit:cover}
.media--4x3{aspect-ratio:4/3}
.media--16x10{aspect-ratio:16/10}
@media (max-width:860px){
  .split,.split--media-first{grid-template-columns:1fr}
  .split--media-first .media{order:-1}
}

/* ---------- Cards ---------- */
.card{
  display:block;text-decoration:none;
  padding:28px 26px;background:var(--gd-surface);
  border:1px solid var(--gd-border);border-radius:var(--gd-radius-md);
  box-shadow:var(--gd-shadow-sm);
  transition:transform var(--gd-dur) var(--gd-ease),box-shadow var(--gd-dur) var(--gd-ease),
    border-color var(--gd-dur) var(--gd-ease);
}
a.card:hover{transform:translateY(-4px);box-shadow:var(--gd-shadow-md);border-color:var(--gd-border-strong)}
/* The card carries its own box-shadow, which would otherwise beat the global
   :focus-visible ring and leave keyboard users with no indicator at all. */
a.card:focus-visible{box-shadow:0 0 0 3px var(--gd-focus-ring),var(--gd-shadow-md);border-color:var(--gd-border-strong)}
.card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:18px;
  border-radius:var(--gd-radius-pill);border:1px solid var(--gd-border);
  background:var(--gd-bg-alt);color:var(--gd-accent);
  transition:border-color var(--gd-dur) var(--gd-ease),background var(--gd-dur) var(--gd-ease);
}
a.card:hover .card__icon{border-color:var(--gd-accent);background:var(--gd-sand-200)}
.card h3{font-weight:500;font-size:var(--gd-fs-h3);line-height:1.2;margin-bottom:10px}
.card p{font-size:15.5px;line-height:1.6;color:var(--gd-text-muted)}
.card__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--gd-font-display);font-weight:600;font-size:14px;color:var(--gd-terra-600);
}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
/* Cards that carry a variable number of photographs size to their own content
   instead of stretching to the tallest in the row. */
.cards-2--top{align-items:start}
@media (max-width:920px){.cards-3{grid-template-columns:1fr}.cards-2{grid-template-columns:1fr}}

/* ---------- Portfolio card ---------- */
.venture{
  display:block;text-decoration:none;border-radius:var(--gd-radius-md);overflow:hidden;
  background:var(--gd-surface);border:1px solid var(--gd-border);box-shadow:var(--gd-shadow-sm);
  transition:transform var(--gd-dur) var(--gd-ease),box-shadow var(--gd-dur) var(--gd-ease);
}
.venture:hover{transform:translateY(-4px);box-shadow:var(--gd-shadow-md)}
.venture__media{aspect-ratio:16/10;background:var(--gd-sand-300);overflow:hidden}
.venture__media img{width:100%;height:100%;object-fit:cover}
.venture__body{padding:20px 22px 22px}
.venture__body h3{font-weight:500;font-size:20px}
.venture__sector{margin-top:6px;font-size:14px;color:var(--gd-text-muted)}
.venture__desc{margin-top:12px;font-size:15px;line-height:1.6;color:var(--gd-text-muted)}

/* ---------- Stats band ----------
   A single rule threads all four icons together, reading as one investment
   journey rather than four unrelated figures. The line is drawn per stat, from
   its own icon across to the next one, and sits behind the icon discs.
   The band is static, per the client direction: icon and figure are both on
   screen from the start, with nothing to hover, count up or reveal. */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding:clamp(48px,6vw,72px) var(--gd-gutter);
}
.stat{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.stat__slot{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;
}
.stat__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--gd-radius-pill);
  background:var(--gd-umber-900);border:1px solid var(--gd-border-on-dark);
  color:var(--gd-accent-on-dark);
}
/* The rule sits on the centre line of the 52px icon discs. */
.stat::after{
  content:"";position:absolute;z-index:0;top:26px;height:1px;
  inset-inline-start:calc(50% + 34px);inset-inline-end:calc(10px - 50%);
  background:var(--gd-border-on-dark);
}
.stat:last-child::after{display:none}
.stat__value{
  font-family:var(--gd-font-display);font-weight:500;font-size:clamp(46px,6.6vw,92px);
  line-height:.95;letter-spacing:-0.03em;color:var(--gd-amber-400);
}
.stat__label{margin-top:14px;font-size:15px;font-weight:500;color:var(--gd-text-muted-on-dark)}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .stat::after{display:none}
}

/* ---------- Sector grid ---------- */
.sector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sector-card{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:22px;text-decoration:none;
  background:var(--gd-surface);border:1px solid var(--gd-border);
  border-radius:var(--gd-radius-md);box-shadow:var(--gd-shadow-xs);
  transition:transform var(--gd-dur) var(--gd-ease),box-shadow var(--gd-dur) var(--gd-ease),
    border-color var(--gd-dur) var(--gd-ease);
}
.sector-card:hover{transform:translateY(-3px);box-shadow:var(--gd-shadow-md);border-color:var(--gd-border-strong)}
.sector-card__name{font-family:var(--gd-font-display);font-weight:500;font-size:18px;letter-spacing:-0.01em;color:var(--gd-ink)}
.sector-card__group{font-size:13px;color:var(--gd-text-muted);margin-top:6px}
.sector-card__blurb{font-size:14px;line-height:1.55;color:var(--gd-text-muted);margin-top:10px}
.sector-card .icon{color:var(--gd-accent);flex-shrink:0}

/* ---------- Service rows (Services page) ---------- */
.service-row{
  display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:flex-start;
  padding:26px 0;border-bottom:1px solid var(--gd-border);
}
.service-row:first-child{border-top:1px solid var(--gd-border)}
.service-row__num{
  font-family:var(--gd-font-display);font-weight:600;font-size:15px;color:var(--gd-terra-600);
  padding-top:4px;
}
.service-row h3{font-weight:500;font-size:var(--gd-fs-h3)}
.service-row p{margin-top:8px;max-width:640px;font-size:15.5px;color:var(--gd-text-muted)}
.service-row__tag{font-size:13px;color:var(--gd-text-muted);letter-spacing:.06em;text-transform:uppercase;padding-top:8px;white-space:nowrap}
@media (max-width:720px){.service-row{grid-template-columns:40px 1fr}.service-row__tag{display:none}}

/* ---------- Forms ---------- */
.form-grid{display:flex;flex-direction:column;gap:16px;max-width:560px}
.form-grid__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-grid__pair{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;width:100%}
.field label{font-size:14px;font-weight:600;color:var(--gd-text)}
.field input,.field textarea{
  width:100%;padding:14px 16px;font-family:var(--gd-font-body);font-size:16px;color:var(--gd-ink);
  background:var(--gd-surface-sunk);border:1px solid transparent;border-radius:var(--gd-radius-sm);
  outline:none;resize:vertical;
  transition:border-color var(--gd-dur) var(--gd-ease),box-shadow var(--gd-dur) var(--gd-ease);
}
.field input::placeholder,.field textarea::placeholder{color:#97785c}
.field input:focus,.field textarea:focus{border-color:var(--gd-accent);box-shadow:0 0 0 3px var(--gd-focus-ring)}
.form-note{font-size:13.5px;color:var(--gd-text-muted)}

/* ---------- Contact info column ---------- */
.contact-rows{display:flex;flex-direction:column;gap:26px}
.contact-row{display:flex;gap:14px;align-items:flex-start}
.contact-row__badge{
  display:inline-flex;width:42px;height:42px;flex-shrink:0;align-items:center;justify-content:center;
  border-radius:var(--gd-radius-pill);background:var(--gd-sand-200);color:var(--gd-accent);
}
.contact-row__label{
  font-family:var(--gd-font-display);font-weight:600;font-size:12.5px;
  letter-spacing:var(--gd-ls-caps);text-transform:uppercase;color:var(--gd-text-muted);
}
.contact-row__value{font-size:17px;color:var(--gd-ink);margin-top:4px}
/* `.split p` is a descendant selector, so it reaches paragraphs nested inside
   components that merely happen to sit in a split — it was pushing this row's
   text 20px below its own badge. The row spaces itself with flex gap. */
.contact-row p{margin-top:0}
.contact-row__value>div+div{margin-top:2px}
.contact-row__value a{text-decoration:none;color:inherit}
.contact-row__value a:hover{color:var(--gd-accent-hover)}
.social-row{display:flex;gap:12px}
.social-row a{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--gd-radius-pill);border:1px solid var(--gd-border-strong);color:var(--gd-ink);
  transition:background var(--gd-dur) var(--gd-ease);
}
.social-row a:hover{background:rgba(43,24,12,.05)}
.social-row a.is-whatsapp{color:var(--gd-whatsapp)}

/* ---------- Dark CTA band ---------- */
.cta-band{text-align:center;padding:clamp(56px,7vw,88px) var(--gd-gutter)}
.cta-band h2{max-width:720px;margin:16px auto 0;font-weight:500;font-size:var(--gd-fs-h2);color:var(--gd-cream-50)}
.cta-band p{max-width:560px;margin:14px auto 0;color:var(--gd-text-muted-on-dark);font-size:var(--gd-fs-body-lg)}
.cta-band__actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Value blocks (About) ---------- */
.value-block{
  padding:28px 26px;background:var(--gd-surface);
  border:1px solid var(--gd-border);border-radius:var(--gd-radius-md);
}
.value-block h3{font-weight:500;font-size:var(--gd-fs-h3);margin-bottom:10px}
.value-block p{font-size:15.5px;line-height:1.6;color:var(--gd-text-muted)}

/* ---------- Leadership ---------- */
.leader{display:flex;flex-direction:column;gap:0}
.leader__body{padding:18px 2px 0}
.leader__name{font-family:var(--gd-font-display);font-weight:500;font-size:19px;color:var(--gd-ink)}
.leader__role{font-size:14px;color:var(--gd-text-muted);margin-top:4px}
.leader__bio{font-size:15px;line-height:1.6;color:var(--gd-text-muted);margin-top:10px}

/* ---------- Careers ---------- */
.role-row{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 26px;background:var(--gd-surface);
  border:1px solid var(--gd-border);border-radius:var(--gd-radius-md);box-shadow:var(--gd-shadow-xs);
}
.role-row + .role-row{margin-top:14px}
.role-row h3{font-weight:500;font-size:19px}
.role-row__meta{font-size:14px;color:var(--gd-text-muted);margin-top:5px}
@media (max-width:640px){.role-row{flex-direction:column;align-items:flex-start}}

/* ---------- Subsidiary model panels ---------- */
.model-panel{
  padding:clamp(28px,4vw,44px);background:var(--gd-surface);
  border:1px solid var(--gd-border);border-radius:var(--gd-radius-lg);box-shadow:var(--gd-shadow-sm);
}
.model-panel .eyebrow{display:block;margin-bottom:12px}
.model-panel h3{font-weight:500;font-size:clamp(22px,2.4vw,28px)}
.model-panel > p{margin-top:14px;font-size:var(--gd-fs-body-lg);line-height:1.65;color:var(--gd-text-muted)}
.model-panel ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.model-panel li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--gd-border);
  font-size:15.5px;line-height:1.55;color:var(--gd-ink);
}
.model-panel li .icon{color:var(--gd-accent);flex-shrink:0;margin-top:3px}
.model-panel li span strong{font-weight:600}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--gd-espresso-900);color:var(--gd-text-on-dark);
  padding:clamp(48px,7vw,80px) var(--gd-gutter) 32px;
}
.site-footer__grid{
  display:grid;gap:40px;grid-template-columns:minmax(240px,1.4fr) 1fr 1fr;
  max-width:var(--gd-container);margin:0 auto;
}
.site-footer .wordmark{color:var(--gd-cream-50);letter-spacing:.12em}
.site-footer__ar{
  margin:16px 0 0;font-size:21px;line-height:1.4;color:var(--gd-accent-on-dark);
  font-family:'Geeza Pro','Al Nile','Segoe UI',var(--gd-font-body);text-align:left;
}
.site-footer__tag{margin-top:6px;max-width:300px;color:var(--gd-text-muted-on-dark);font-size:15px}
.site-footer__social{display:flex;gap:14px;margin-top:22px}
.site-footer__social a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--gd-radius-pill);border:1px solid var(--gd-border-on-dark);color:var(--gd-cream-50);
  transition:background var(--gd-dur) var(--gd-ease);
}
.site-footer__social a:hover{background:rgba(255,255,255,.08)}
.site-footer__social a.is-whatsapp{color:var(--gd-whatsapp)}
.site-footer__col-title{
  font-family:var(--gd-font-display);font-weight:600;font-size:13px;
  letter-spacing:var(--gd-ls-caps);text-transform:uppercase;color:var(--gd-text-muted-on-dark);
  margin-bottom:16px;
}
.site-footer__links{display:flex;flex-direction:column;gap:12px}
.site-footer__links a{color:var(--gd-cream-50);text-decoration:none;font-size:15px;transition:color var(--gd-dur) var(--gd-ease)}
.site-footer__links a:hover{color:var(--gd-accent-on-dark)}
.site-footer__contact{display:flex;flex-direction:column;gap:14px;font-size:15px}
.site-footer__contact span,.site-footer__contact a{display:flex;gap:10px;align-items:flex-start;color:var(--gd-cream-50);text-decoration:none}
.site-footer__contact a:hover{color:var(--gd-accent-on-dark)}
.site-footer__contact .icon{color:var(--gd-accent-on-dark);flex-shrink:0;margin-top:2px}
/* Two phone numbers share one icon: the group is the flex row, the list stacks. */
.site-footer__phones{display:flex;gap:10px;align-items:flex-start}
.site-footer__contact .site-footer__phone-list{flex-direction:column;gap:8px}
.site-footer__bottom{
  max-width:var(--gd-container);margin:44px auto 0;padding-top:22px;
  border-top:1px solid var(--gd-border-on-dark);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13.5px;color:var(--gd-text-muted-on-dark);
}
@media (max-width:820px){.site-footer__grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){
  .site-footer .wordmark{white-space:normal;font-size:13px;letter-spacing:.1em}
  .site-footer .wordmark__text{white-space:normal;line-height:1.5}
}

/* ---------- Why-choose pillars (home) ---------- */
.pillars{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
}
.pillar{
  display:flex;align-items:center;gap:12px;
  padding:20px 22px;background:var(--gd-surface);
  border:1px solid var(--gd-border);border-radius:var(--gd-radius-md);
  font-family:var(--gd-font-display);font-weight:500;font-size:17px;color:var(--gd-ink);
}
.pillar__badge{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:var(--gd-radius-pill);
  background:var(--gd-sand-200);color:var(--gd-accent);
}
.pillar .icon{color:var(--gd-accent);flex-shrink:0}

/* ---------- Split media (About mission | vision) ---------- */
.split-media{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:860px;margin:0 auto 34px;
  border-radius:var(--gd-radius-md);overflow:hidden;
  box-shadow:var(--gd-shadow-sm);background:var(--gd-sand-300);
}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
@media (max-width:640px){.split-media img{aspect-ratio:1/1}}

/* ---------- Portfolio logo strip ---------- */
.logo-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,5vw,60px);max-width:880px;margin:0 auto 34px;
}
.logo-strip__item{display:inline-flex;align-items:center;justify-content:center;height:34px}
.logo-strip img{max-height:34px;width:auto;object-fit:contain}
.logo-strip__name{
  font-family:var(--gd-font-display);font-weight:500;font-size:15px;
  letter-spacing:var(--gd-ls-caps);text-transform:uppercase;color:var(--gd-cream-50);
}
/* Same strip on a cream section — the fallback names need the ink tone instead. */
.logo-strip__name--on-light{color:var(--gd-ink-soft)}
/* On the dark band the logos are knocked back to a single cream tone so a mixed
   bag of brand colours still reads as one row; hover restores the real mark. */
.logo-strip--on-dark img{filter:brightness(0) invert(1);opacity:.72;transition:opacity var(--gd-dur) var(--gd-ease),filter var(--gd-dur) var(--gd-ease)}
.logo-strip--on-dark .logo-strip__item:hover img{filter:none;opacity:1}
.logo-strip--on-dark .logo-strip__name{opacity:.72}
[dir="rtl"] .logo-strip__name{letter-spacing:normal;text-transform:none}

/* ---------- Portfolio card extras ---------- */
.venture__logo{max-height:26px;width:auto;object-fit:contain;margin-bottom:14px}
.venture__sector{
  display:inline-block;margin-top:8px;padding:5px 12px;
  border-radius:var(--gd-radius-pill);background:var(--gd-sand-200);
  font-size:12.5px;font-weight:600;letter-spacing:var(--gd-ls-caps);text-transform:uppercase;
  color:var(--gd-ink-soft);
}
[dir="rtl"] .venture__sector{letter-spacing:normal;text-transform:none}
.venture__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;text-decoration:none;
  font-family:var(--gd-font-display);font-weight:600;font-size:14px;color:var(--gd-terra-600);
}
.venture__link:hover{color:var(--gd-terra-500)}
/* Where a company has more than one photograph, the extras run as a strip
   directly under the main image so each card can show its operation from more
   than one angle. Cards with a single photo are unaffected. */
.venture__gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px;background:var(--gd-surface);
}
.venture__gallery img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
/* Companies whose logo file we don't hold yet fall back to the name set in the
   display face, so every card carries the same brand slot. */
.venture__wordmark{
  display:inline-block;margin-bottom:14px;
  font-family:var(--gd-font-display);font-weight:600;font-size:15px;
  letter-spacing:var(--gd-ls-caps);text-transform:uppercase;color:var(--gd-ink-soft);
}
[dir="rtl"] .venture__wordmark{letter-spacing:normal;text-transform:none}

/* ---------- Grouped services (Services page) ---------- */
.service-group + .service-group{margin-top:clamp(44px,6vw,72px)}
.service-group__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.service-group__icon{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:50px;height:50px;border-radius:var(--gd-radius-pill);
  border:1px solid var(--gd-border-strong);background:var(--gd-surface);color:var(--gd-accent);
}
.service-group__title{font-family:var(--gd-font-display);font-weight:500;font-size:var(--gd-fs-h3);color:var(--gd-ink)}
.service-group__blurb{margin-top:6px;max-width:560px;font-size:15.5px;line-height:1.6;color:var(--gd-text-muted)}
/* Optional per-group photograph — rendered only when one is set in the CMS. */
.service-group__img{
  width:120px;height:90px;flex-shrink:0;object-fit:cover;margin-inline-start:auto;
  border-radius:var(--gd-radius-sm);box-shadow:var(--gd-shadow-xs);
}
@media (max-width:720px){.service-group__img{display:none}}

/* ---------- Image gallery (Careers) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--gd-radius-md);box-shadow:var(--gd-shadow-xs);
}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery > :last-child{grid-column:1/-1}
  .gallery > :last-child img{aspect-ratio:16/9}
}

/* ---------- Send-your-CV actions ---------- */
.cv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cv-action{
  display:inline-flex;align-items:center;gap:9px;padding:11px 17px;text-decoration:none;
  border:1px solid var(--gd-border-strong);border-radius:var(--gd-radius-pill);
  font-family:var(--gd-font-display);font-weight:600;font-size:14.5px;color:var(--gd-ink);
  transition:border-color var(--gd-dur) var(--gd-ease),color var(--gd-dur) var(--gd-ease),
    background var(--gd-dur) var(--gd-ease);
}
.cv-action .icon{color:var(--gd-accent);flex-shrink:0}
.cv-action:hover{border-color:var(--gd-accent);color:var(--gd-terra-600);background:rgba(192,85,49,.05)}

/* ---------- Contact: map link + office surroundings ---------- */
.map-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.map-link .icon{color:var(--gd-accent);flex-shrink:0}
.contact-media{border-radius:var(--gd-radius-md);overflow:hidden;box-shadow:var(--gd-shadow-sm);margin:0}
.contact-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.contact-media figcaption{
  padding:12px 16px;background:var(--gd-surface);border-top:1px solid var(--gd-border);
  font-size:13.5px;color:var(--gd-text-muted);
}

/* ---------- Numbered approach steps (about) ----------
   Staged as a journey: one rule runs through all four icons, and the stage
   number is the largest thing in each column. */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.step{position:relative}
.step__icon{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--gd-radius-pill);
  background:var(--gd-bg-alt);border:1px solid var(--gd-border-strong);color:var(--gd-accent);
}
.section--alt .step__icon{background:var(--gd-surface)}
.step::after{
  content:"";position:absolute;z-index:0;top:28px;height:1px;
  inset-inline-start:68px;inset-inline-end:-14px;
  background:var(--gd-border-strong);
}
.step:last-child::after{display:none}
.step__num{
  display:block;font-family:var(--gd-font-display);font-weight:500;
  font-size:clamp(48px,5.6vw,76px);line-height:1;letter-spacing:-0.03em;
  color:var(--gd-sand-400);margin:20px 0 4px;
}
.step h3{font-weight:500;font-size:var(--gd-fs-h3);margin-bottom:8px}
.step p{font-size:15.5px;line-height:1.6;color:var(--gd-text-muted)}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .step:nth-child(2n)::after{display:none}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .step::after{display:none}
}

/* ---------- Leadership ---------- */
/* The portrait is a cutout on white, so the frame carries white rather than
   the sand fill and takes the photograph's own proportions. A fixed ratio here
   either crops into the shoulders or letterboxes a white band beneath them. */
.media--portrait{background:#fff;max-width:400px}
.media--portrait img{height:auto}
/* The biography reads the same whether or not a portrait sits beside it, so
   the paragraph styling lives on the block rather than on .split. */
.leader-bio p{margin-top:20px;font-size:var(--gd-fs-body-lg);line-height:1.65;color:var(--gd-text-muted)}
.leader-bio p:first-child{margin-top:0}

.roles-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.roles-list li{
  padding:12px 0;border-top:1px solid var(--gd-border);
  font-size:15.5px;line-height:1.5;color:var(--gd-ink);
}
.roles-list li:first-child{border-top:none;padding-top:0}
/* A long roster splits into two columns once the panel is wide enough to
   carry them. Columns need a block container, so the flex layout stands down —
   and the roster sits inside .model-panel, whose `ul` rule would otherwise
   outrank a lone class selector and hold it in flex. */
@media (min-width:820px){
  .model-panel ul.roles-list--dual{display:block;columns:2;column-gap:clamp(28px,5vw,64px)}
  .roles-list--dual li{break-inside:avoid}
}
.leader__role{margin-top:8px;font-size:var(--gd-fs-body-lg);color:var(--gd-terra-600);font-weight:500}

/* ==========================================================================
   Bilingual — language switcher, Arabic typography, RTL
   English is the default at "/"; Arabic is served under "/ar/" with dir="rtl".
   The layout is flex/grid, so most of it mirrors automatically under dir="rtl";
   only the corrections below are needed.
   ========================================================================== */

/* Language switch link (sits at the end of the primary nav), led by a globe so
   the second language is findable without reading the label. */
/* Qualified with .site-nav a so it outweighs `.site-nav a:not(.btn)` — at bare
   `.lang-switch` weight the generic nav-link colour won, and the hover state
   put muted ink on terracotta at roughly 1.8:1. */
.site-nav a.lang-switch,.lang-switch{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--gd-font-display);font-weight:600;font-size:14px;letter-spacing:.04em;
  color:var(--gd-terra-600);text-decoration:none;white-space:nowrap;line-height:1;
  border:1px solid var(--gd-border-strong);border-radius:var(--gd-radius-pill);padding:7px 15px;
  transition:background var(--gd-dur) var(--gd-ease),color var(--gd-dur) var(--gd-ease),
    border-color var(--gd-dur) var(--gd-ease);
}
.site-nav a.lang-switch:hover,.lang-switch:hover{background:var(--gd-accent);border-color:transparent;color:var(--gd-on-accent)}
[dir="rtl"] .lang-switch{letter-spacing:normal}
@media (max-width:920px){
  .site-nav a.lang-switch{
    align-self:flex-start;margin-top:16px;padding:9px 16px;font-size:14px;
    border:1px solid var(--gd-border-strong);border-radius:var(--gd-radius-pill);
  }
}

/* Arabic webfonts (loaded only on Arabic pages — see head.njk).
   Noto Kufi Arabic echoes the logo's geometric letterforms for display;
   IBM Plex Sans Arabic is the clean text companion. */
html[lang="ar"]{
  --gd-font-display:'Noto Kufi Arabic','Jost','Century Gothic',sans-serif;
  --gd-font-body:'IBM Plex Sans Arabic','Figtree',system-ui,-apple-system,sans-serif;
}
html[lang="ar"] body{line-height:1.75}

/* Latin tracking + uppercasing are wrong for Arabic joined script — reset them. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .wordmark,
[dir="rtl"] .contact-row__label,
[dir="rtl"] .site-footer__col-title,
[dir="rtl"] .service-row__tag,
[dir="rtl"] .step__num{letter-spacing:normal;text-transform:none}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .hero h1,[dir="rtl"] .stat__value,[dir="rtl"] .sector-card__name{letter-spacing:normal}

/* Skip-link mirrors to the right edge in RTL */
[dir="rtl"] .skip-link{left:auto;right:-9999px;border-radius:0 0 0 var(--gd-radius-sm)}
[dir="rtl"] .skip-link:focus{left:auto;right:0}

/* Forward arrows point the other way in RTL. Handled by --gd-arrow-dir in the
   motion section below, so the flip survives the hover translate. */

/* On Arabic pages the wordmark is already Arabic — hide the duplicate footer name */
[dir="rtl"] .site-footer__ar{display:none}

/* ==========================================================================
   Motion
   Gated on .gd-motion, which the inline script in head.njk adds only when the
   engine has IntersectionObserver AND the visitor has not asked for reduced
   motion — so no-JS and reduced-motion visitors never meet a hidden starting
   state. main.js adds .is-in as each element arrives and clears the gate if it
   ever fails. Transforms, opacity and clip-path only: nothing here lays out.

   The vocabulary is deliberately not "everything fades up". Type unmasks line
   by line from behind its own baseline; photographs wipe open while the image
   inside them settles back from an overscale; the page carries inertia. Those
   three do most of the work, and they are what separates considered motion
   from a theme's default reveal.
   ========================================================================== */
:root{
  /* Expo-out. Almost all of the distance is covered in the first third, then it
     glides — the curve that reads as weight rather than speed. */
  --gd-ease-out:cubic-bezier(.16,1,.3,1);
  --gd-ease-mask:cubic-bezier(.22,1,.24,1);
  --gd-dur-reveal:1150ms;
  --gd-dur-mask:1250ms;
  --gd-reveal-y:34px;
  /* Flipped to -1 under RTL so arrows point the way the language reads. */
  --gd-arrow-dir:1;
}
[dir="rtl"]{--gd-arrow-dir:-1}

/* While the inertial scroller is driving, native smooth scrolling would fight
   it — main.js sets this class only when it has taken over. */
.gd-smooth{scroll-behavior:auto}

/* ---------- Type: line masks ----------
   main.js measures where each heading actually wraps, then rebuilds it as one
   masked row per line. The rows are clipped, so the type rises from behind its
   own baseline rather than fading in on the spot. Splitting is by whole words,
   which leaves Arabic shaping untouched. */
.gd-line{
  display:block;
  /* clip-path rather than overflow:hidden. The mask has to bleed past the line
     box to clear descenders, and with overflow that means padding cancelled by
     negative margins — which collapse between siblings and would have shifted
     the leading. clip-path takes no part in layout, so it bleeds for free.
     Only the underside needs masking: the line rises from below, so nothing
     above the box ever has to be hidden, and leaving the top open protects
     ascenders and Arabic marks. Arabic descends further, so it gets more. */
  clip-path:inset(-1em 0 -0.3em 0);
}
html[lang="ar"] .gd-line{clip-path:inset(-1.2em 0 -0.45em 0)}
.gd-line__i{display:block}
/* Parked below the mask's lower bleed, not merely below the line box — at a
   flat 115% the tops of Arabic glyphs peeked out under the bleed. */
.gd-motion .gd-line__i{transform:translate3d(0,calc(100% + 0.5em),0)}
.gd-motion .is-in .gd-line__i,
.gd-motion .hero.is-in .gd-line__i{
  animation:gd-line-in var(--gd-dur-mask) var(--gd-ease-mask) calc(var(--gd-line-i, 0) * 95ms + var(--gd-reveal-delay, 0ms)) backwards;
  transform:none;
}
@keyframes gd-line-in{
  from{transform:translate3d(0,calc(100% + 0.5em),0)}
  to{transform:none}
}

/* ---------- Photographs: wipe open, image settles back ----------
   The frame uncovers upward while the picture inside eases down from an
   overscale, so the two move against each other. The animation carries no
   forwards fill, which is what lets .venture:hover keep its own scale
   afterwards instead of being pinned by the reveal's end state. */
.gd-motion main :where(.media,.contact-media,.split-media) img,
.gd-motion main .venture:not(.is-in) .venture__media img,
.gd-motion main .gallery:not(.is-in) img{clip-path:inset(0 0 100% 0)}

.gd-motion main :where(.media,.contact-media,.split-media).is-in img,
.gd-motion main .venture.is-in .venture__media img,
.gd-motion main .gallery.is-in img{
  clip-path:none;
  animation:gd-img-in var(--gd-dur-mask) var(--gd-ease-mask) var(--gd-reveal-delay,0ms) backwards;
}
@keyframes gd-img-in{
  from{clip-path:inset(0 0 100% 0);transform:scale(1.24)}
  to{clip-path:inset(0 0 0 0);transform:none}
}
/* The two halves of the mission | vision frame uncover a beat apart. */
.gd-motion main .split-media.is-in img:last-child{animation-delay:180ms}
/* The gallery is observed as one block, so its frames stagger from here rather
   than from the per-target delay JS writes. */
.gd-motion main .gallery.is-in img:nth-child(2){animation-delay:calc(var(--gd-reveal-delay,0ms) + 120ms)}
.gd-motion main .gallery.is-in img:nth-child(3){animation-delay:calc(var(--gd-reveal-delay,0ms) + 240ms)}

/* ---------- Everything else ----------
   An animation with NO fill, never a transition. A transition would have to own
   two properties on every component it touched — replacing each card's own
   transition list, and pinning transform:none over the hover lifts. An
   animation writes nothing once finished, so components keep their own
   behaviour and the reveal leaves no trace. */
.gd-motion main :where(
  .section-head,.split > *:not(.media),.model-panel,
  .card,.venture,.pillar,.step,.sector-card,
  .service-row,.service-group__head,.role-row,
  .logo-strip__item,.cv-action,.contact-row,
  .form-grid,.cta-band,
  .media,.contact-media,.split-media,.gallery
):not(.is-in){opacity:0}

/* :not(.hero) matters — the hero also carries .is-in (it plays on arrival, not
   on scroll) and it lives inside <main>, so without this it would pick up the
   generic reveal and blank itself out a beat after it had already painted. */
.gd-motion main .is-in:not(.hero){
  animation:gd-reveal var(--gd-dur-reveal) var(--gd-ease-out) var(--gd-reveal-delay,0ms) backwards;
}
@keyframes gd-reveal{
  from{opacity:0;transform:translate3d(0,var(--gd-reveal-y),0)}
  to{opacity:1;transform:none}
}
/* Frames only fade — their content is already carrying the movement. */
.gd-motion main :where(.media,.contact-media,.split-media,.gallery).is-in{animation-name:gd-fade}
@keyframes gd-fade{from{opacity:0}to{opacity:1}}
/* A heading that unmasks does not also need to travel. */
.gd-motion main .section-head.is-in{animation-name:gd-fade}

/* Tab order can outrun the observer. If focus lands on something still waiting
   its turn, show it at once rather than moving focus to an invisible target. */
.gd-motion main :where(
  .section-head,.split > *:not(.media),.model-panel,
  .card,.venture,.pillar,.step,.sector-card,
  .service-row,.service-group__head,.role-row,
  .logo-strip__item,.cv-action,.contact-row,
  .form-grid,.cta-band,
  .media,.contact-media,.split-media,.gallery
):not(.is-in):focus-within{opacity:1}

/* ---------- Hero ----------
   The photograph eases down from an overscale while the copy unmasks over it.
   main.js owns the image transform end to end — entrance and scroll drift in a
   single write — so the starting scale lives here only to avoid a flash before
   the script runs. */
.gd-motion .hero__img{transform:scale(1.08)}
.gd-motion .hero__inner > *{opacity:0}
.gd-motion .hero.is-in .hero__inner > *{
  animation:gd-fade 900ms var(--gd-ease-out) var(--gd-hero-delay,0ms) backwards;
  opacity:1;
}
.gd-motion .hero.is-in .hero__inner > :nth-child(1){--gd-hero-delay:120ms}
.gd-motion .hero.is-in .hero__inner > :nth-child(2){--gd-hero-delay:180ms}
.gd-motion .hero.is-in .hero__inner > :nth-child(3){--gd-hero-delay:620ms}
.gd-motion .hero.is-in .hero__inner > :nth-child(4){--gd-hero-delay:720ms}
/* The h1 carries its own line stagger, so it only needs the mask, not a fade. */
.gd-motion .hero.is-in .hero__inner > h1{animation:none;opacity:1}

/* ---------- Intro cover ----------
   The frame settles out of a slight overscale while the lockup and the button
   arrive a beat apart. On the way in the whole cover pushes forward as it
   fades, so the homepage is stepped into rather than cut to. The push is set on
   the cover and the settle on the photograph inside it: two elements, so a
   visitor who presses Enter while the settle is still running does not watch
   one transform hand over to the other. */
.gd-motion .gd-intro .intro__img{animation:gd-intro-settle 2600ms var(--gd-ease-out) both}
.gd-motion .gd-intro .intro__logo{animation:gd-intro-rise 1200ms var(--gd-ease-out) 160ms backwards}
.gd-motion .gd-intro .intro__enter{animation:gd-intro-rise 1200ms var(--gd-ease-out) 640ms backwards}
.gd-motion .gd-intro.gd-intro-out .intro{transform:scale(1.05)}
@keyframes gd-intro-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes gd-intro-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

/* ---------- Page transitions ----------
   The cross-document View Transition API, so this is the browser's own
   compositor doing the work: no overlay element, nothing to get stuck behind,
   and engines without support simply navigate as they always did. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  /* The UA composites these two with plus-lighter, which is what keeps a
     cross-fade from dipping through a washed-out middle. Overriding `animation`
     drops that default, so it is restored explicitly — and the two curves are
     kept the same length and mirrored, because plus-lighter only composites
     correctly when the pair of opacities sums to 1 throughout. */
  ::view-transition-old(root),
  ::view-transition-new(root){mix-blend-mode:plus-lighter}
  ::view-transition-old(root){animation:gd-page-out 520ms var(--gd-ease-out) both}
  ::view-transition-new(root){animation:gd-page-in 520ms var(--gd-ease-out) both}
  /* The header is continuous between pages, so it carries its own name and
     stays put instead of blinking. Only position-stable elements can be named:
     a named element animates from its old viewport box to its new one, and the
     header is sticky at y=0 in both captures. The footer deliberately is NOT
     named — it sits wherever the visitor had scrolled to, so naming it made it
     fly the length of the page on any navigation from the footer nav. */
  .site-header{view-transition-name:gd-header}
}
@keyframes gd-page-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-18px,0)}}
@keyframes gd-page-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* ---------- Connecting rules draw themselves ----------
   The approach steps hang off one horizontal line. Drawing it as the row
   arrives is what makes it read as a journey rather than four separate
   columns. (The key-numbers band carries the same rule but stays static.) */
.gd-motion .step::after{
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--gd-ease-out) 260ms;
}
/* dir and .gd-motion both sit on <html>, so this has to be a compound selector
   — "[dir=rtl] .gd-motion" would look for a descendant and never match. */
[dir="rtl"].gd-motion .step::after{transform-origin:right}
.gd-motion .step.is-in::after{transform:scaleX(1)}

/* ---------- Header ----------
   Compaction is deliberately visual only. The header is sticky, so animating
   its padding would change its flow height and shunt the whole document up and
   down as the visitor scrolls past the trigger. */
.site-header{
  transition:box-shadow var(--gd-dur) var(--gd-ease),background-color var(--gd-dur) var(--gd-ease);
}
.gd-motion .site-header.is-scrolled{box-shadow:0 1px 20px -8px rgba(43,24,12,.28);background:rgba(249,242,231,.97)}
.gd-motion .site-header .wordmark__mark{transition:transform var(--gd-dur) var(--gd-ease)}
.gd-motion .site-header.is-scrolled .wordmark__mark{transform:scale(.92)}

/* Nav links draw an underline from the reading edge and retract to the other.
   The language switcher is excluded — it is a bordered pill, not a nav link,
   and an underline slicing through it reads as a mistake. */
@media (min-width:921px){
  .site-nav a:not(.btn):not(.lang-switch){position:relative}
  .site-nav a:not(.btn):not(.lang-switch)::after{
    content:"";position:absolute;inset-inline:0;bottom:-5px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform 460ms var(--gd-ease-out);
  }
  [dir="rtl"] .site-nav a:not(.btn):not(.lang-switch)::after{transform-origin:left}
  .site-nav a:not(.btn):not(.lang-switch):hover::after,
  .site-nav a:not(.btn):not(.lang-switch):focus-visible::after,
  .site-nav a:not(.btn):not(.lang-switch)[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
  [dir="rtl"] .site-nav a:not(.btn):not(.lang-switch):hover::after,
  [dir="rtl"] .site-nav a:not(.btn):not(.lang-switch):focus-visible::after,
  [dir="rtl"] .site-nav a:not(.btn):not(.lang-switch)[aria-current="page"]::after{transform-origin:right}
}
/* Mobile menu items fan in behind the panel. */
.gd-motion .site-nav.is-open > *{animation:gd-nav-in .5s var(--gd-ease-out) backwards}
.gd-motion .site-nav.is-open > :nth-child(1){animation-delay:.03s}
.gd-motion .site-nav.is-open > :nth-child(2){animation-delay:.07s}
.gd-motion .site-nav.is-open > :nth-child(3){animation-delay:.11s}
.gd-motion .site-nav.is-open > :nth-child(4){animation-delay:.15s}
.gd-motion .site-nav.is-open > :nth-child(5){animation-delay:.19s}
.gd-motion .site-nav.is-open > :nth-child(6){animation-delay:.23s}
.gd-motion .site-nav.is-open > :nth-child(7){animation-delay:.27s}
.gd-motion .site-nav.is-open > :nth-child(8){animation-delay:.31s}
.gd-motion .site-nav.is-open > :nth-child(9){animation-delay:.35s}
@keyframes gd-nav-in{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}

/* ---------- Arrows lean toward where they lead ---------- */
.btn .icon,.card__more .icon,.venture__link .icon{
  transform:scaleX(var(--gd-arrow-dir));
  transition:transform var(--gd-dur) var(--gd-ease);
}
.btn:hover .icon,
a.card:hover .card__more .icon,
.venture__link:hover .icon{transform:scaleX(var(--gd-arrow-dir)) translateX(4px)}

/* ---------- Cards ---------- */
.card__icon{transition:border-color var(--gd-dur) var(--gd-ease),background var(--gd-dur) var(--gd-ease),
  transform 520ms var(--gd-ease-out)}
a.card:hover .card__icon{transform:translateY(-3px) scale(1.08)}
/* Portfolio photographs push in slightly under the card's own lift. */
.venture__media img,.venture__gallery img{transition:transform 900ms var(--gd-ease-out)}
.venture:hover .venture__media img{transform:scale(1.05)}
.sector-card,.role-row,.model-panel{transition:transform var(--gd-dur) var(--gd-ease),
  box-shadow var(--gd-dur) var(--gd-ease),border-color var(--gd-dur) var(--gd-ease)}
.pillar{transition:transform var(--gd-dur) var(--gd-ease),border-color var(--gd-dur) var(--gd-ease)}
.pillar:hover{transform:translateY(-2px);border-color:var(--gd-border-strong)}
.pillar__badge{transition:transform 520ms var(--gd-ease-out),background var(--gd-dur) var(--gd-ease)}
.pillar:hover .pillar__badge{transform:rotate(90deg);background:var(--gd-sand-300)}
.cv-action .icon{transition:transform var(--gd-dur) var(--gd-ease)}
.cv-action:hover .icon{transform:translateY(-2px)}
.social-row a,.site-footer__social a{transition:background var(--gd-dur) var(--gd-ease),
  transform var(--gd-dur) var(--gd-ease),border-color var(--gd-dur) var(--gd-ease)}
.social-row a:hover,.site-footer__social a:hover{transform:translateY(-2px)}

/* ---------- Forms ---------- */
.field input,.field textarea{transition:border-color var(--gd-dur) var(--gd-ease),
  box-shadow var(--gd-dur) var(--gd-ease),background var(--gd-dur) var(--gd-ease)}
.field input:hover,.field textarea:hover{background:var(--gd-sand-300)}

/* ---------- Print ----------
   Printing and PDF export do not scroll, so the observer never reaches most of
   the page and anything still waiting its turn would come out blank. Release
   every motion starting state unconditionally. */
@media print{
  /* The cover is a way in, not part of the document. */
  .intro{display:none!important}
  /* Paper does not scroll, so the observer never reaches most of the page and
     anything still waiting its turn would come out blank. Release every motion
     starting state the rebuilt layer introduces — reveals, line masks, image
     clips, the hero — unconditionally. */
  .gd-motion main :where(
    .section-head,.split > *:not(.media),.model-panel,
    .card,.venture,.pillar,.step,.sector-card,
    .service-row,.service-group__head,.role-row,
    .logo-strip__item,.cv-action,.contact-row,
    .form-grid,.cta-band,
    .media,.contact-media,.split-media,.gallery
  ):not(.is-in){opacity:1!important}
  .gd-motion main .is-in,
  .gd-motion .hero__inner > *,
  .gd-motion .site-nav.is-open > *{animation:none!important;opacity:1!important;transform:none!important}
  /* Headings are rebuilt as clipped rows; unclip them or every line prints blank. */
  .gd-motion .gd-line{clip-path:none!important}
  .gd-motion .gd-line__i{animation:none!important;transform:none!important;will-change:auto!important}
  /* Photographs are held behind a closed clip until they are revealed. */
  .gd-motion main img{clip-path:none!important;animation:none!important;transform:none!important}
  .gd-motion .hero__img{transform:none!important}
  .gd-motion .step::after{transform:none!important}
}

/* ---------- Utility ---------- */
.icon{display:inline-block;vertical-align:middle}
.mt-0{margin-top:0}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}