@font-face { font-family: "Intrepid"; src: url("../fonts/Intrepid.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ==========================================================================
   WSC Group of Companies — v4
   House style: black · gold, RA&A feel — light type, bold gold accents, ambient light blooms.
   ========================================================================== */

:root {
  /* blacks (neutral, no blue cast) */
  --black: #0b0b0c;
  --black-2: #111113;
  --black-3: #18181b;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);

  /* whites */
  --white: #ffffff;
  --light: #f5f5f3;
  --ink: #f7f7f5;
  --muted: rgba(247, 247, 245, .62);
  --muted-2: rgba(247, 247, 245, .4);
  --dark-ink: #0b0b0c;
  --dark-muted: rgba(11, 11, 12, .6);

  /* gold */
  --gold: #c8a45c;
  --gold-light: #e8d09b;
  --gold-deep: #9b7a3c;
  --gold-grad: linear-gradient(120deg, #a7843f 0%, #e8d09b 45%, #c8a45c 70%, #9b7a3c 100%);

  --sans: "Intrepid", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --cut: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote { margin: 0; }
em, strong.hl { font-style: normal; font-weight: 600; color: var(--gold-light); } /* accent words: same font, bold gold */
::selection { background: var(--gold); color: var(--black); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(90px, 11vw, 150px) 0; position: relative; }
.section--alt { background: rgba(255, 255, 255, .012); }

/* Preloader: the values spell in over the globe, then fade away (RA&A) */
body.is-loading { overflow: hidden; }
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; cursor: pointer;
  background: var(--black); /* fully dark while loading: no gold glow; the globe fades in from "Teamwork" */
  transition: opacity .9s var(--ease), visibility 0s .9s, background-color 2.6s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader.show-globe { background-color: rgba(11, 11, 12, 0); }
.preloader__kicker { position: relative; margin: 0; font-size: clamp(12px, 1.1vw, 16px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: rgba(247, 247, 245, .5); }
.preloader__word { position: relative; justify-items: center; margin: 0; font-weight: 300; font-size: clamp(64px, 9vw, 150px); }
.preloader .preloader__word .ch { transition-duration: .7s, .85s, .75s; transition-delay: calc(var(--i) * 38ms); }
.preloader .preloader__word .out .ch { transition-duration: .45s, .5s, .45s; transition-delay: calc(var(--i) * 16ms); }
.is-loading .nav, .is-loading .hero__values { opacity: 0; }
/* arriving via a #link: no intro */
.skip-pre .preloader { display: none; }
.skip-pre body.is-loading { overflow: visible; }
.skip-pre .is-loading .nav, .skip-pre .is-loading .hero__values, .skip-pre .is-loading .hero__globe { opacity: 1; }
.nav { transition: opacity .9s var(--ease), background .4s, box-shadow .4s; }

/* Ambient background: fixed gold light blooms that drift as you scroll (RA&A feel) */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; transition: opacity 1.6s var(--ease); }
.is-loading .ambient { opacity: 0; }
.skip-pre .is-loading .ambient { opacity: 1; }
.ambient i {
  position: absolute; width: 72vmax; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 164, 92, .28), rgba(200, 164, 92, .09) 38%, transparent 68%);
  transition: translate 1.6s var(--ease);
  animation: drift 24s ease-in-out infinite alternate;
}
.ambient i:nth-child(1) { left: -36vmax; top: 18vh; translate: calc(var(--a, 0) * 26vw) calc(var(--p, 0) * -34vh); }
.ambient i:nth-child(2) { right: -38vmax; top: -40vmax; translate: calc(var(--b, 0) * -24vw) calc(var(--p, 0) * 78vh); opacity: .85; animation-delay: -12s; }
.ambient i:nth-child(3) {
  left: 30vw; bottom: -52vmax; width: 60vmax; translate: calc(var(--b, 0) * 30vw) 0;
  background: radial-gradient(circle, rgba(232, 208, 155, .16), rgba(232, 208, 155, .05) 40%, transparent 68%);
  animation-delay: -6s;
}
@keyframes drift { from { scale: .88; } to { scale: 1.12; } }
@keyframes breathe { from { transform: scale(.9) translate(0, 0); opacity: .65; } to { transform: scale(1.1) translate(3%, -3%); opacity: 1; } }

/* Type ------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.title {
  margin-top: 22px;
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 4.1rem); line-height: 1.08; letter-spacing: -.025em;
}

.head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.head__text { color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); max-width: 30em; justify-self: end; }

/* Buttons: "orbit" — letters roll to gold, a ring traces itself around the arrow, a satellite starts to orbit,
   the arrow shoots through and a new one slides in; the orb leans towards the cursor */
.btn {
  position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 18px; padding: 6px 0; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
}
.btn__label { display: inline-flex; overflow: hidden; line-height: 1.5; }
.btn .lt { display: inline-block; white-space: pre; text-shadow: 0 1.5em var(--gold-light); transition: transform .6s cubic-bezier(.65, 0, .2, 1) calc(var(--i) * 18ms); }
.btn:hover .lt, .btn:focus-visible .lt { transform: translateY(-1.5em); }
.btn__orb { position: relative; flex: none; width: 52px; height: 52px; transition: transform .6s var(--ease); }
.btn__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; transform: rotate(-90deg); }
.btn__track { stroke: rgba(200, 164, 92, .4); stroke-width: 1; }
.btn__trace { stroke: var(--gold-light); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .2, 1); }
.btn:hover .btn__trace, .btn:focus-visible .btn__trace { stroke-dashoffset: 0; }
.btn__arrows { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.btn__arrows svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; fill: none; stroke: var(--gold-light); stroke-width: 1.4; transition: transform .6s cubic-bezier(.65, 0, .2, 1); }
.btn__arrows svg + svg { transform: translateX(-36px); }
.btn:hover .btn__arrows svg:first-child, .btn:focus-visible .btn__arrows svg:first-child { transform: translateX(36px); }
.btn:hover .btn__arrows svg + svg, .btn:focus-visible .btn__arrows svg + svg { transform: none; transition-delay: .12s; }
.btn__sat { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.btn__sat::before { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff4dc; }
.btn:hover .btn__sat { opacity: 1; transition-delay: .75s; animation: orbit 2.6s linear .75s infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* small pill (header): gold wells up from the point where the cursor enters, letters roll to black */
.btn--sm { gap: 0; padding: 11px 24px; overflow: hidden; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .6); font-size: 10px; }
.btn--sm::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--gold-grad); transform: translate(-50%, -50%) scale(0); transition: transform .75s cubic-bezier(.65, 0, .2, 1); }
.btn--sm:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn--sm .lt { text-shadow: 0 1.5em var(--black); }

/* Reveal ----------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Header: logo + dot-grid menu toggle (RA&A) ----------------------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, box-shadow .4s; }
.nav.scrolled { background: rgba(11, 11, 12, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.menu-open .nav.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.nav__inner { position: relative; display: flex; align-items: center; gap: 32px; height: 84px; transition: height .4s var(--ease); }
.nav.scrolled .nav__inner { height: 70px; }
.nav__logo { display: flex; align-items: center; gap: 14px; flex: none; }
.nav__logo img { width: 84px; }
.nav__logo span { font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; line-height: 1.5; color: var(--muted); padding-inline-start: 14px; border-inline-start: 1px solid var(--line-2); }
.nav__right { display: flex; align-items: center; gap: 30px; margin-inline-start: auto; flex: none; }
.menu-open .nav__right .btn { opacity: 0; pointer-events: none; }
.nav__right .btn { transition: opacity .4s, background .3s, color .3s; }
.nav__toggle { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 16px; height: 44px; color: rgba(247, 247, 245, .95); transition: color .3s; }
.nav__toggle:hover, .menu-open .nav__toggle { color: var(--gold-light); }
.nav__toggle svg { width: 34px; height: 34px; fill: currentColor; overflow: visible; }
.nav__toggle circle { transition: transform .6s var(--ease); }
.menu-open .nav__toggle .t { transform: translate(7.5px, 7.5px); }
.menu-open .nav__toggle .r { transform: translate(-7.5px, 7.5px); }
.menu-open .nav__toggle .b { transform: translate(-7.5px, -7.5px); }
.menu-open .nav__toggle .l { transform: translate(7.5px, -7.5px); }
.nav__toggle-label { display: grid; overflow: hidden; font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; line-height: 1.6; }
.nav__toggle-label span { grid-area: 1 / 1; text-align: end; transition: transform .5s var(--ease), opacity .4s; }
.nav__toggle-label span + span { transform: translateY(100%); opacity: 0; }
.menu-open .nav__toggle-label span:first-child { transform: translateY(-100%); opacity: 0; }
.menu-open .nav__toggle-label span + span { transform: none; opacity: 1; }

/* Menu: full-screen overlay, large light links */
.menu {
  position: fixed; inset: 0; z-index: 45; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 30px;
  padding: 110px var(--gutter) 36px; overflow-y: auto; background: var(--black);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s;
}
.menu::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 0% 0%, rgba(200, 164, 92, .14), transparent 70%), radial-gradient(45% 55% at 100% 100%, rgba(200, 164, 92, .1), transparent 70%); }
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu__links { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 1.1vh, 12px); }
.menu__links a {
  position: relative; padding-bottom: 3px; font-size: clamp(26px, 3vw, 38px); font-weight: 200; line-height: 1.35; color: rgba(247, 247, 245, .6);
  opacity: 0; transform: translateY(18px); transition: color .3s, opacity .5s var(--ease), transform .7s var(--ease);
}
.menu__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(247, 247, 245, .16); transition: background .3s; }
.menu__links a:hover, .menu__links a.active { color: var(--white); }
.menu__links a:hover::after, .menu__links a.active::after { background: var(--gold); }
.menu-open .menu__links a { opacity: 1; transform: none; transition-delay: 0s, calc(.1s + var(--i) * .05s), calc(.1s + var(--i) * .05s); }
.menu__foot { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); opacity: 0; transition: opacity .6s .3s; }
.menu-open .menu__foot { opacity: 1; }
.menu__foot a:hover { color: var(--gold-light); }

/* Hero: a turning globe with the five values around it (RA&A layout) ------- */
.hero { --k: 1; position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.hero__globe { position: absolute; left: 50%; top: 47.4%; width: calc(325px * var(--k)); aspect-ratio: 1; translate: -50% -50%; transition: opacity 1.2s var(--ease); }
.hero__globe canvas { width: 100%; height: 100%; display: block; }
.is-loading .hero__globe { opacity: .45; }
.hero__values { position: absolute; inset: 0; }
.hv { position: absolute; top: calc(47.4% + var(--y) * var(--k) * 1px); display: grid; transition: opacity .5s var(--ease), transform 1.4s cubic-bezier(.6, 0, .15, 1); }
.hv span, .hv i { transition: opacity .9s var(--ease); }
.hero.is-flying .hv span, .hero.is-flying .hv i { opacity: 0; transition-duration: 0s; }
.hv--r { left: calc(50% + var(--x) * var(--k) * 1px); }
.hv--l { right: calc(50% - var(--x) * var(--k) * 1px); text-align: right; justify-items: end; }
.hv strong { font-size: calc(32px * var(--k)); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.hv span { margin-top: calc(8px * var(--k)); font-size: calc(16px * var(--k)); font-weight: 400; letter-spacing: .02em; line-height: 1.45; text-transform: uppercase; color: rgba(250, 250, 250, .92); }
.hv i { position: absolute; top: calc(30px * var(--k)); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #f3dcaa; }
.hv--r i { left: calc(-55px * var(--k)); }
.hv--l i { right: calc(-55px * var(--k)); }
.hv i::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 92, .3), rgba(200, 164, 92, .08) 45%, transparent 70%); animation: halo 3.6s ease-in-out infinite alternate; }
@keyframes halo { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
.hv:nth-child(2) { transition-delay: .22s; } .hv:nth-child(3) { transition-delay: .44s; } .hv:nth-child(4) { transition-delay: .66s; } .hv:nth-child(5) { transition-delay: .88s; }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
/* spelled word (preloader + hero values): incoming letters rise in, outgoing drift up and blur */
.word { display: grid; font-size: clamp(44px, 6.4vw, 104px); line-height: 1.04; letter-spacing: -.04em; }
.word > span { grid-area: 1 / 1; white-space: nowrap; }
.word .ch { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(10px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.word .in .ch { opacity: 1; transform: none; filter: none; }
.word .out .ch { opacity: 0; transform: translateY(-.22em); filter: blur(10px); transition-duration: .45s, .55s, .5s; transition-delay: calc(var(--i) * 22ms); }
.word i { font-style: normal; color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hero__scroll { position: absolute; left: var(--edge); bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-2); }
.hero__scroll span { position: relative; width: 1px; height: 40px; background: var(--line-2); overflow: hidden; }
.hero__scroll span::after { content: ""; position: absolute; left: 0; width: 1px; height: 14px; background: var(--gold-light); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { top: -14px; } 100% { top: 40px; } }

@keyframes marquee { to { transform: translateX(-50%); } }

/* Stats ------------------------------------------------------------------ */
.stats { padding: clamp(50px, 7vw, 90px) 0; border-top: 1px solid rgba(200, 164, 92, .18); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  display: grid; justify-items: center; align-content: start; text-align: center; gap: 10px;
  padding: 8px 20px; border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, transparent, rgba(200, 164, 92, .55), transparent) 1;
}
.stat:last-child { border-right: 0; }
.stat svg { width: 40px; height: 40px; color: var(--gold); stroke-width: 1; }
.stat strong {
  font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.02em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat:has(svg) strong { font-size: clamp(2rem, 3.4vw, 3rem); }
.stat strong.stat__text { font-size: clamp(1.1rem, 1.9vw, 1.6rem); font-weight: 500; letter-spacing: .06em; padding-top: 6px; }
.stat span { font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

/* About ------------------------------------------------------------------ */
.about { padding-bottom: 0; }
.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.about__video { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--black-3); border: 1px solid var(--line); }
.about__video img, .about__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__video img { filter: grayscale(.25) brightness(.6); transition: transform 1.6s var(--ease); }
.about__video:hover img { transform: scale(1.04); }
.about__video video { z-index: 2; background: #000; object-fit: contain; }
.about__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(232, 208, 155, .7); color: var(--gold-light); transition: background .4s var(--ease), color .3s, scale .5s var(--ease); }
.about__play svg { width: 26px; height: 26px; margin-left: 4px; }
.about__play::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(232, 208, 155, .25); animation: ping 3.2s var(--ease) infinite; }
.about__play:hover { background: var(--gold); color: var(--black); scale: 1.05; }
.about__video.is-playing .about__play { display: none; }
.about__soon { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); }
.about__copy { display: grid; gap: 18px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--muted); }
.about__copy .btn { justify-self: start; margin-top: 4px; }
.about__copy p:first-child { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink); }
.about__motto { margin: clamp(60px, 8vw, 110px) auto 0; max-width: 900px; text-align: center; font-weight: 300; font-size: clamp(15px, 1.2vw, 18px); color: var(--muted); }
.about__motto strong { display: block; margin-top: 14px; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing: -.015em; line-height: 1.2; color: var(--gold-light); }

/* Who we are (RA&A about page): five pillars on a glowing line over a faint globe */
.who { position: relative; margin-top: clamp(80px, 10vw, 140px); padding: clamp(80px, 10vw, 130px) 0 clamp(90px, 11vw, 150px); border-top: 1px solid var(--line); overflow: hidden; }
.who__globe { position: absolute; left: 50%; top: 54%; width: clamp(220px, 21vw, 300px); aspect-ratio: 1; translate: -50% -50%; opacity: .6; pointer-events: none; }
.who__globe canvas { width: 100%; height: 100%; display: block; }
.who__inner { position: relative; max-width: 620px; }
.who__title { font-size: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.who__list { position: relative; margin: clamp(50px, 6vw, 72px) 0 0 32px; display: grid; gap: clamp(64px, 8vw, 104px); }
.who__list.is-in { transform: none; }
.who__list::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 1px; background: linear-gradient(rgba(232, 208, 155, .55), rgba(232, 208, 155, .18)); transform: scaleY(0); transform-origin: top; transition: transform 2.2s var(--ease) .2s; }
.who__list.is-in::before { transform: none; }
.who__list li { position: relative; display: flex; align-items: center; gap: 40px; font-size: 12px; font-weight: 500; letter-spacing: .24em; line-height: 1.5; text-transform: uppercase; opacity: 0; transform: translateX(-14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.who__list.is-in li { opacity: 1; transform: none; }
.who__list li:nth-child(2) { transition-delay: .35s; } .who__list li:nth-child(3) { transition-delay: .7s; } .who__list li:nth-child(4) { transition-delay: 1.05s; } .who__list li:nth-child(5) { transition-delay: 1.4s; }
.who__list i { position: relative; flex: none; width: 9px; height: 9px; margin-inline-start: -4px; border-radius: 50%; background: #f3dcaa; }
.who__list i::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 92, .32), rgba(200, 164, 92, .08) 45%, transparent 70%); animation: halo 3.6s ease-in-out infinite alternate; }
.who__list li:nth-child(even) i::before { animation-delay: -1.8s; }

/* Selected initiatives (RA&A "Selected platforms") ----------------------- */
.plats__title { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.plats__grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.plat { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--black-3); }
.plat img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); transition: transform .8s var(--ease), filter .6s; }
.plat figcaption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: rgba(11, 11, 12, .62); opacity: 0; transition: opacity .35s; }
.plat figcaption span { display: grid; justify-items: center; gap: 12px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.plat figcaption span::after { content: ""; width: 24px; height: 1px; background: var(--gold); }
.plat:hover figcaption { opacity: 1; }
.plat:hover img { transform: scale(1.06); filter: none; }
@media (hover: none) {
  .plat figcaption { opacity: 1; align-items: flex-end; justify-content: flex-start; text-align: start; padding: 12px; background: linear-gradient(transparent 40%, rgba(11, 11, 12, .85)); }
  .plat figcaption span { justify-items: start; gap: 8px; font-size: 12px; }
}

/* Vision & mission (RA&A layout) --------------------------------------- */
.vision { padding: clamp(90px, 9vw, 130px) 0 clamp(60px, 7vw, 100px); }
.vision__item { max-width: 640px; }
.vision__item--offset { margin-block-start: clamp(30px, 3.5vw, 56px); margin-inline-start: auto; max-width: 600px; }
.vision__lead { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(247, 247, 245, .7); }
.vision__text { margin-top: 16px; font-weight: 200; font-size: clamp(1.3rem, 1.85vw, 1.95rem); line-height: 1.38; letter-spacing: -.01em; }
.vision__text b { font-weight: 600; color: var(--gold-light); background: linear-gradient(rgba(232, 208, 155, .45), rgba(232, 208, 155, .45)) 0 100% / 100% 1px no-repeat; padding-bottom: .04em; }
.vision__item .btn { margin-top: 26px; }

/* Industries: line drawings, each linked to its venture ------------------ */
.inds { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.inds > li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ind { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; height: 100%; padding: clamp(26px, 3vw, 40px) 22px 30px; text-align: center; overflow: hidden; transition: background .5s var(--ease); }
.ind::before { content: ""; position: absolute; left: 50%; top: 40%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 92, .14), transparent 68%); opacity: 0; transition: opacity .6s; }
.ind:hover { background: rgba(255, 255, 255, .02); }
.ind:hover::before { opacity: 1; }
.ind svg { position: relative; width: 100%; max-width: 250px; margin-bottom: 8px; color: var(--gold-light); transition: transform .8s var(--ease); }
.ind:hover svg { transform: translateY(-4px); }
.ind__name { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.ind__name::after { content: ""; display: block; width: 36px; height: 1px; margin: 14px auto 0; background: var(--gold-grad); transition: width .5s var(--ease); }
.ind:hover .ind__name::after { width: 72px; }
.ind__go { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin-top: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .45); color: var(--gold); overflow: hidden; transition: box-shadow .4s, color .4s, background .4s; }
.ind .ind__go svg { width: 16px; max-width: none; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: inherit; transition: transform .5s var(--ease); }
.ind:hover .ind__go { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-light); }
.ind:hover .ind__go svg { transform: translate(2px, -2px); }

/* line art (industries + skylines): strokes draw in on reveal */
.draw { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.draw .dash { stroke-dasharray: 3 4; opacity: .6; }
.draw .fine { stroke-width: .7; opacity: .5; }
.draw .body { stroke-width: 2.4; }
.draw .dots { stroke-width: 1; stroke-dasharray: .1 3.4; opacity: .55; }
.draw--ready .dots { opacity: 0; transition: opacity 1.2s ease calc(var(--d, 0s) + 1.6s); }
.is-in .draw--ready .dots { opacity: .55; }
.draw--ready :is(path, circle, rect, ellipse):not(.dash):not(.dots) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.6, 0, .2, 1) calc(var(--d, 0s) + .15s); }
.is-in .draw--ready :is(path, circle, rect, ellipse):not(.dash):not(.dots) { stroke-dashoffset: 0; }

/* Global presence -------------------------------------------------------- */
.presence { position: relative; padding: clamp(90px, 11vw, 150px) 0 clamp(80px, 9vw, 120px); overflow: hidden; }
.presence__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.presence__head .head__text { justify-self: end; }
.presence__globe { position: relative; height: clamp(440px, 62vw, 760px); margin: -10px 0 -30px; }
#globe { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#globe.is-dragging { cursor: grabbing; }
.cities { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); position: relative; z-index: 2; background: rgba(11, 11, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cities li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cities button { display: grid; justify-items: center; align-content: start; gap: 6px; width: 100%; height: 100%; padding: 30px 16px 28px; text-align: center; color: var(--ink); transition: background .5s var(--ease); }
.cities .skyline { width: 100%; max-width: 210px; margin-bottom: 14px; color: rgba(232, 208, 155, .75); transition: color .4s; }
.city { display: grid; justify-items: center; gap: 6px; }
.city b { font-weight: 600; font-size: clamp(11px, 1vw, 14px); letter-spacing: .2em; text-transform: uppercase; }
.city small { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.city::after { content: ""; width: 40px; height: 1px; margin: 10px 0 8px; background: var(--gold-grad); transition: width .5s var(--ease); }
.addr { display: flex; gap: 10px; text-align: start; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--muted); }
.addr__pin { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }
.cities button:hover, .cities button.on { background: rgba(200, 164, 92, .05); }
.cities button:hover .skyline, .cities button.on .skyline { color: var(--gold-light); }
.cities button.on .city::after, .cities button:hover .city::after { width: 80px; }
.cities button.on b { color: var(--gold-light); }

/* Partners --------------------------------------------------------------- */
.partners { overflow: hidden; }
.partners .head { margin-bottom: clamp(56px, 7vw, 90px); }
.partners .head__text { display: grid; gap: 14px; }
.logos { overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos + .logos { border-bottom: 1px solid var(--line); }
.logos__track { display: flex; align-items: center; gap: clamp(48px, 6vw, 90px); width: max-content; animation: marquee 48s linear infinite; }
.logos--reverse .logos__track { animation-direction: reverse; animation-duration: 56s; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos { --k: 1; }
/* each logo carries its own size (--h) and trims its transparent padding (--m, --v), so all logos read with equal presence */
.logos img { height: calc(var(--h, 44) * var(--k) * 1px); width: auto; max-width: none; margin: calc(var(--v, 0) * var(--k) * 1px) calc(var(--m, 0) * var(--k) * 1px); translate: 0 calc(var(--t, 0) * var(--k) * 1px); filter: grayscale(1); opacity: .55; transition: opacity .4s, filter .4s; }
.logos img:hover { opacity: 1; filter: none; }

/* Connect ---------------------------------------------------------------- */
.connect { padding: clamp(120px, 13vw, 190px) 0; border-top: 1px solid var(--line); }
.connect__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.connect__copy .title { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.connect__links { margin-top: 34px; display: flex; gap: 28px; flex-wrap: wrap; }
.connect__links a { display: inline-flex; align-items: center; gap: 12px; font-weight: 300; font-size: clamp(18px, 1.8vw, 24px); border-bottom: 1px solid rgba(200, 164, 92, .6); padding-bottom: 6px; transition: color .3s; }
.connect__links a:hover { color: var(--gold-light); }
.connect__links svg { width: 20px; height: 20px; color: var(--gold); }
.connect__card {
  position: relative; padding: clamp(28px, 4vw, 48px);
  background: rgba(17, 17, 19, .6); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.connect__card h3 { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-weight: 200; font-size: clamp(2.2rem, 3.6vw, 3.2rem); letter-spacing: -.02em; line-height: 1; }
.clock { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--gold-light); padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .45); font-variant-numeric: tabular-nums; }
.connect__card address { margin-top: 20px; font-style: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.9; color: var(--muted); }
.connect__offices { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; }
.connect__offices li { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: rgba(247, 247, 245, .8); }

/* Footer ----------------------------------------------------------------- */
.footer { position: relative; background: var(--black); border-top: 1px solid var(--line); padding: 30px 0; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); }
.footer__row { display: flex; align-items: center; gap: 14px 36px; flex-wrap: wrap; }
.footer__logo img { width: 64px; opacity: .9; transition: opacity .3s; }
.footer__logo:hover img { opacity: 1; }
.footer__meta { margin-inline-end: auto; }
.footer__legal { display: flex; gap: 26px; }
.footer a { transition: color .25s; }
.footer__legal a:hover, .footer__credit a:hover { color: var(--gold-light); }
.footer__credit a { color: var(--muted); }

/* About page -------------------------------------------------------------- */
.page-hero { padding-top: clamp(150px, 16vw, 210px); }
.intro { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(40px, 7vw, 110px); padding-top: clamp(40px, 5vw, 70px); border-top: 1px solid var(--line); }
.intro__lead { font-size: clamp(18px, 1.55vw, 23px); font-weight: 300; line-height: 1.55; }
.intro__body { display: grid; gap: 20px; font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--muted); }
.about-film .about__video { aspect-ratio: 21 / 9; }
.about--page .who { margin-top: clamp(90px, 10vw, 140px); }
.page-cta__inner { display: grid; justify-items: center; gap: 22px; text-align: center; }
.page-cta__inner .eyebrow { justify-self: center; }

/* Legal pages ------------------------------------------------------------ */
.legal { padding: clamp(140px, 16vw, 190px) 0 clamp(90px, 10vw, 130px); }
.legal__head { max-width: 760px; }
.legal__lead { margin-top: 26px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; line-height: 1.7; color: var(--muted); }
.legal__date { margin-top: 18px; font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--muted-2); }
.legal__body { max-width: 760px; margin-top: clamp(50px, 6vw, 80px); border-top: 1px solid var(--line); }
.legal__body section { padding: 34px 0; border-bottom: 1px solid var(--line); }
.legal__body h2 { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); }
.legal__body p, .legal__body li { font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(247, 247, 245, .75); }
.legal__body p { margin-top: 14px; }
.legal__body ul { margin-top: 14px; display: grid; gap: 10px; }
.legal__body li { position: relative; padding-inline-start: 22px; }
.legal__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 8px; height: 1px; background: var(--gold); }
.legal__body strong { font-weight: 600; color: var(--ink); }
.legal__body a { color: var(--gold-light); border-bottom: 1px solid rgba(232, 208, 155, .4); }
.legal__body a:hover { border-color: var(--gold-light); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cities { grid-template-columns: repeat(6, 1fr); }
  .cities li { grid-column: span 2; border: 1px solid var(--line); margin: 0 -1px -1px 0; }
  .cities { border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cities button { background: rgba(11, 11, 12, .55); }
  .cities li:nth-child(4) { grid-column: 2 / span 2; }
  .inds { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .nav__inner, .nav.scrolled .nav__inner { height: 70px; }
  /* hero (RA&A mobile): globe centred behind the five values, stacked and centred */
  .hero { min-height: 620px; }
  .hero__globe { top: 50%; width: min(74vw, 340px); }
  .hero__values { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 4.2vh, 40px); padding: 80px var(--gutter) 24px; }
  .hv, .hv--l, .hv--r { position: relative; left: auto; right: auto; top: auto; text-align: center; justify-items: center; text-shadow: 0 1px 14px rgba(11, 11, 12, .7); }
  .hv strong { font-size: 21px; }
  .hv span { margin-top: 6px; font-size: 12px; font-weight: 300; letter-spacing: .05em; line-height: 1.65; }
  .hv i { display: none; }
  .about__grid, .intro { grid-template-columns: 1fr; }
  .about-film .about__video { aspect-ratio: 16 / 10; }
  .plats__grid { grid-template-columns: repeat(2, 1fr); }
  .who__globe { top: 56%; width: min(62vw, 280px); opacity: .5; }
  .vision__item--offset { margin-inline-start: 0; }

  .head, .presence__head, .connect__grid { grid-template-columns: 1fr; }
  .head__text, .presence__head .head__text { justify-self: start; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .stat:nth-child(2) { border-right: 0; }
  .footer__row { flex-direction: column; text-align: center; }
  .footer__meta { margin: 0; }
}

@media (max-width: 560px) {
  .nav__logo span { display: none; }
  .nav__right { gap: 20px; }
  .nav__right .btn, .nav__toggle-label { display: none; }
  .who__list { margin-inline-start: 12px; }
  .who__list li { gap: 28px; font-size: 11px; letter-spacing: .2em; }
  .nav__logo img { width: 70px; }
  .preloader__word { font-size: clamp(34px, 10.2vw, 52px); }
  .cities { grid-template-columns: repeat(2, 1fr); }
  .cities li, .cities li:nth-child(4) { grid-column: auto; }
  .cities li:last-child { grid-column: 1 / -1; }
  .cities li:last-child .skyline { max-width: 170px; }
  .cities button { padding: 22px 10px; }
  .addr { font-size: 11px; }
  .inds { grid-template-columns: 1fr 1fr; }
  .ind { padding: 22px 10px 24px; }
  .ind__name { font-size: 10px; letter-spacing: .18em; }
  .ind__go { width: 34px; height: 34px; }
  .logos { --k: .74; }
  .presence__globe { height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .draw--ready :is(path, circle, rect, ellipse):not(.dash):not(.dots) { stroke-dashoffset: 0; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Who we are — Horizon (homepage): the globe rises from below, the values sit on a gold arc */
.who--horizon { height: clamp(560px, 78vh, 760px); padding: 0; }
.who--horizon .who__globe { left: 50%; top: 58%; width: min(120vw, 1500px); translate: -50% 0; opacity: .9; }
.who--horizon .who__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 2; background: linear-gradient(transparent, var(--black)); pointer-events: none; }
.who--horizon .who__title { position: absolute; left: 0; right: 0; top: clamp(56px, 7vw, 80px); z-index: 4; text-align: center; }
.who__arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.who__arc path { fill: none; stroke: url(#whoArc); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.who--horizon.is-in .who__arc path { stroke-dashoffset: 0; }
.who__pts li { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 190px; margin-left: -95px; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .24em; line-height: 1.5; text-transform: uppercase; opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.who--horizon.is-in .who__pts li { opacity: 1; transform: none; }
.who__pts li:nth-child(1) { transition-delay: .5s; } .who__pts li:nth-child(2) { transition-delay: .8s; } .who__pts li:nth-child(3) { transition-delay: 1.1s; } .who__pts li:nth-child(4) { transition-delay: 1.4s; } .who__pts li:nth-child(5) { transition-delay: 1.7s; }
.who__pts i { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #f3dcaa; }
.who__pts i::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 92, .32), rgba(200, 164, 92, .08) 45%, transparent 70%); animation: halo 3.6s ease-in-out infinite alternate; }
.who__pts li:nth-child(even) i::before { animation-delay: -1.8s; }
@media (max-width: 960px) {
  .who--horizon { height: auto; padding: 60px 0 80px; }
  .who--horizon .who__title { position: relative; top: auto; margin-bottom: 50px; }
  .who__arc { display: none; }
  .who--horizon .who__globe { top: 30%; width: 140vw; opacity: .5; }
  .who__pts { position: relative; z-index: 4; display: grid; gap: 50px; justify-items: center; }
  .who__pts li { position: static; margin: 0; flex-direction: column-reverse; }
}

/* Content protection: no selection, no image dragging, no iOS long-press save (form fields stay usable) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, video, svg { -webkit-user-drag: none; user-drag: none; }

/* v12 mobile fixes: B2B stat on one line, Saudi office on top (others 2x2), no empty band under the logos */
/* no empty band between the logo rows and Connect, on every screen size */
.partners { padding-bottom: 0; }
#connect { border-top: 0; }
@media (max-width: 560px) {
  .stat { padding: 8px 6px; }
  .stat strong.stat__text { font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
  .cities li:last-child { grid-column: auto; }
  .cities li:last-child .skyline { max-width: none; }
  .cities li:first-child { grid-column: 1 / -1; }
  .cities li:first-child button { padding: 30px 16px 28px; }
  .cities li:first-child .skyline { max-width: 250px; }
  .cities li:first-child b { font-size: 1.15em; }
}

/* v12 contact form dialog */
.cform { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(28px, 4vw, 46px); color: var(--ink); background: #111113; border: 1px solid var(--line-2); box-shadow: 0 40px 90px rgba(0, 0, 0, .6); overflow-x: hidden; overflow-y: auto; opacity: 0; translate: 0 18px; transition: opacity .45s var(--ease), translate .45s var(--ease), overlay .45s allow-discrete, display .45s allow-discrete; }
.cform[open] { opacity: 1; translate: 0 0; }
@starting-style { .cform[open] { opacity: 0; translate: 0 18px; } }
.cform::backdrop { background: rgba(5, 5, 6, .86); }
/* while the form is open everything behind it stands still (no marquee, drifting glow or globe redraws) */
.form-open .logos__track, .form-open .ambient i, .form-open .btn__sat, .form-open .hv i::before, .form-open .who__pts i::before { animation-play-state: paused !important; }
.cform__close { position: absolute; top: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); transition: color .3s, box-shadow .3s; }
.cform__close:hover { color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .45); }
.cform__close svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.cform__title { margin: 14px 0 26px; font-weight: 200; font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; }
.cform__title em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cform__form { display: grid; gap: 22px; }
.cform__field { display: grid; gap: 8px; }
.cform__field span { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cform__field input, .cform__field textarea { width: 100%; padding: 10px 0 12px; font: 300 16px/1.5 var(--sans); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; outline: 0; resize: vertical; transition: border-color .3s; }
.cform__field input:focus, .cform__field textarea:focus { border-color: var(--gold); }
.cform__field.is-bad input, .cform__field.is-bad textarea { border-color: #b4574a; }
.cform__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cform__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.cform__status { flex: 1 1 200px; font-size: 13px; font-weight: 300; color: var(--muted); min-height: 1.4em; }
.cform__status.ok { color: var(--gold-light); }
.cform__status.err { color: #d08a7e; }
.cform__send { margin-inline-start: auto; }
.cform__send:disabled { opacity: .5; cursor: progress; }

/* v13 initiatives: each tile links to the event site */
.plat__link { display: block; }
.plat figcaption small { display: block; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); }
.plat__link:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.plat__link:focus-visible figcaption { opacity: 1; }

/* v14 language switch (EN | العربية) — replaces the Connect pill in the header */
.lang { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .45); font-size: 10px; font-weight: 700; letter-spacing: .2em; line-height: 1; }
.lang a { display: grid; place-items: center; min-width: 40px; height: 30px; padding: 0 12px; border-radius: 999px; color: var(--muted); transition: color .3s, background .3s; }
.lang a[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.lang a:hover { color: var(--gold-light); }
.lang a.is-on { color: var(--black); background: var(--gold-grad); }
.lang span { color: var(--line-2); font-weight: 300; }
.menu-open .lang { opacity: 1; }
@media (max-width: 560px) { .lang a { min-width: 34px; height: 28px; padding: 0 9px; } }

/* v14 Arabic / right-to-left */
html[lang="ar"] { --sans: "Intrepid", "IBM Plex Sans Arabic", "Montserrat", sans-serif; }
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; }   /* tracking breaks Arabic letter joining */
html[lang="ar"] .title, html[lang="ar"] .vision__lead, html[lang="ar"] .cform__title, html[lang="ar"] .connect__card h3 { line-height: 1.35; }
html[lang="ar"] .eyebrow, html[lang="ar"] .stat span, html[lang="ar"] .ind__name, html[lang="ar"] .plats__title, html[lang="ar"] .cform__field span, html[lang="ar"] .btn { font-size: 13px; }
html[lang="ar"] .stat strong:not([data-count]):not(.stat__text) { font-size: clamp(1.8rem, 3vw, 2.6rem); }
html[lang="ar"] .legal__body p, html[lang="ar"] .legal__body li, html[lang="ar"] .intro p, html[lang="ar"] .head__text { line-height: 1.95; }
[dir="rtl"] .logos { direction: ltr; }                      /* marquees keep running the same way */
[dir="rtl"] .btn__arrows, [dir="rtl"] .ind__go svg { scale: -1 1; }   /* arrows point to the reading direction */
[dir="rtl"] .addr__pin { flex: none; }
[dir="rtl"] .hv--r { text-align: left; justify-items: left; }   /* text hugs its dot, as in English */
@media (max-width: 960px) { [dir="rtl"] .hv--r { text-align: center; justify-items: center; } }
html[lang="ar"] .legal__body h2 { font-size: 16px; }
[dir="rtl"] .stat strong { direction: ltr; unicode-bidi: isolate; }   /* keeps "50+" instead of "+50" */

/* v15: B2B – B2G – B2C sits on the same line as the figures beside it */
.stat strong.stat__text { display: flex; align-items: center; min-height: clamp(2rem, 3.4vw, 3rem); padding-top: 0; }

/* v17 menu links thin: Intrepid has a single (bold-ish) weight, so the menu uses Jost, a Futura-style face with a true light weight */
html:not([lang="ar"]) .menu__links a { font-family: "Jost", var(--sans); font-weight: 200; letter-spacing: .01em; }

/* v18 initiatives: same circled arrow as Industries, always visible in the tile corner */
.plat__go { position: absolute; z-index: 2; bottom: 14px; inset-inline-end: 14px; margin: 0; background: rgba(11, 11, 12, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.plat .plat__go svg { width: 16px; height: auto; object-fit: initial; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: none; transition: transform .5s var(--ease); }
.plat:hover .plat__go { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-light); }
.plat:hover .plat__go svg { transform: translate(2px, -2px); }
[dir="rtl"] .plat__go svg { scale: -1 1; }
/* v18 B2B · B2G · B2C: gold dots instead of dashes */
.stat__dot { flex: none; display: inline-block; width: .3em; height: .3em; margin: 0 .55em; border-radius: 50%; background: var(--gold-grad); }