/* base.css */
/* Shared base for the round 1 directions: font, tokens, header, wheel structure. Each direction sets the look. */
@font-face { font-family: 'Parkinsans'; src: url('fonts/Parkinsans-VariableFont_wght.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
/* Arabic: Readex Pro (SIL OFL) until Technify confirms a web licence for DIN Next LT Arabic; only Arabic code points load it */
@font-face { font-family: 'Readex Pro'; src: url('fonts/ReadexPro-Arabic-wght.woff2') format('woff2'); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
:root {
  --sky: #58BFED; --navy: #23366D; --ink: #0E1A3A; --night: #081129;
  --ice: #EEF6FC; --line: rgba(35, 54, 109, .14); --grey: #5B6478;
  --wrap: 1240px; --gut: 32px;
  --font: 'Parkinsans', 'Readex Pro', system-ui, sans-serif;   /* Latin in Parkinsans, Arabic code points fall through to Readex Pro */
  --dir: 1;     /* reading direction sign for transforms (slides, hover nudges); Arabic pages set -1 */
  --to-end: 90deg;   /* gradients that run with the reading direction (scrims behind text, progress fills) */
  --track: 1;   /* letter-spacing multiplier: Arabic letters join, so Arabic pages set it to 0 */
}
/* Arabic pages: no tracking, a taller line for the script's ascenders and dots */
:root:lang(ar) { --track: 0; --dir: -1; --to-end: 270deg; }
html:lang(ar) body { line-height: 1.8; }
html:lang(ar) :is(h1, h2, h3) { line-height: 1.4; }
*, *::before, *::after { box-sizing: border-box; }
i { font-style: normal; }   /* <i> carries arrows and icons here, never italic text (Parkinsans has no italic face) */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   /* no grey box on tap (wheel slices showed their bounding square); controls show their own pressed and focus states */
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: #fff; }
img { display: block; max-width: 100%; height: auto; }   /* width/height attributes reserve space; CSS keeps the ratio */
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 600; letter-spacing: calc(-.02em * var(--track)); }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .2s, background .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn i { font-style: normal; }

/* Wheel structure */
.w-svg svg { width: 100%; height: auto; overflow: visible; }
.w-seg, .w-ring, .w-ringpart { cursor: pointer; transition: fill .35s, opacity .35s, stroke .35s, filter .35s; }
.w-seg:focus, .w-ring:focus { outline: none; }                      /* SVG paths show focus with a stroke instead (below) */
.w-seg:focus-visible, .w-ring:focus-visible { stroke: #fff; stroke-width: 2.5; }
.w-label, .w-coretext, .w-coresub, .w-ringtext { pointer-events: none; transition: opacity .35s, fill .35s; }
.w-label { font-size: 14px; font-weight: 600; }
.w-coretext { font-size: 19px; font-weight: 700; letter-spacing: calc(.12em * var(--track)); }
.w-coretext.is-name { letter-spacing: calc(.02em * var(--track)); }   /* phone centre: the chosen pillar name */
.w-coresub { font-size: 12px; letter-spacing: calc(.04em * var(--track)); }
.w-ringtext { font-size: 12px; font-weight: 600; letter-spacing: calc(.28em * var(--track)); direction: ltr; }   /* text on a path keeps its start anchor on RTL pages (Arabic still shapes and reads right to left) */
.w-card h3 { font-size: 28px; margin: 6px 0 10px; }
.w-kicker { font-size: 12px; font-weight: 600; letter-spacing: calc(.14em * var(--track)); text-transform: uppercase; }
.w-line { font-size: 16px; margin-bottom: 18px; }
.w-caps, .w-sec, .w-paths { list-style: none; padding: 0; margin: 0; }
.w-caps li { padding: 9px 0; font-size: 15px; border-top: 1px solid var(--line); }
.w-sechead { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: calc(.14em * var(--track)); text-transform: uppercase; }
.w-sec { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.w-sec li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: var(--sky); }
.w-paths li { display: grid; grid-template-columns: 84px 1fr; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.w-paths span { font-weight: 600; color: var(--sky); }
.w-cta { display: inline-flex; gap: 8px; margin-top: 22px; font-weight: 600; font-size: 15px; }
.w-cta i { font-style: normal; transition: transform .2s; }
.w-cta:hover i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* phone numbers and e-mail addresses read left to right inside Arabic text (else "+966 54 095 4462" shows reversed) */
a[href^="tel:"]:not([class]), a[href^="mailto:"]:not([class]), .ltr { direction: ltr; unicode-bidi: isolate; }

/* live.css */
/* Live photos (see live.js). The media box behaves like background-size: cover with a chosen x focus (--fx). */
.live { position: absolute; top: 0; bottom: 0; left: var(--fx, 50%); aspect-ratio: var(--ar); min-width: 100%; transform: translateX(calc(var(--fx, 50%) * -1)); }
.live svg { display: block; width: 100%; height: 100%; }
.l-fx * { transform-box: view-box; }
.live.is-paused * { animation-play-state: paused; }

/* Hero: tower windows switching on and off */
.l-win { fill: #FFE2B0; opacity: 0; animation: l-win var(--t) var(--d) infinite; }
@keyframes l-win { 0%, 100% { opacity: 0; } 6%, 55% { opacity: .95; } 61% { opacity: 0; } }
/* aircraft warning beacons on the tower tips */
.l-beacon__dot { fill: #FF4A4A; }
.l-beacon__halo { fill: #FF4A4A; opacity: .0; }
.l-beacon { animation: l-beacon 2.2s var(--d) infinite steps(1); opacity: .25; }
.l-beacon .l-beacon__halo { animation: l-halo 2.2s var(--d) infinite; }
@keyframes l-beacon { 0% { opacity: 1; } 45% { opacity: .25; } }
@keyframes l-halo { 0% { opacity: .45; transform: scale(1); } 40% { opacity: 0; } }
.l-beacon__halo { transform-origin: center; transform-box: fill-box; }
/* car lights travelling along the highways */
.l-road { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 97; animation: l-road 5.5s linear infinite; }
.l-road--0 { stroke: #FFD7A1; }
.l-road--1 { stroke: #FF6B5A; animation-duration: 3.2s; }
.l-road--late { animation-delay: -2.4s; stroke: #FF7A66; animation-direction: reverse; }
@keyframes l-road { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* a rare meteor across the empty sky */
.l-meteor { opacity: 0; animation: l-meteor 11s var(--d) infinite ease-out; }
.l-meteor line { stroke-width: 1.6; stroke-linecap: round; }
.l-meteor__head { fill: #fff; }
@keyframes l-meteor {
  0% { opacity: 0; transform: translate(var(--x), var(--y)); }
  1.5% { opacity: 1; }
  9% { opacity: 0; transform: translate(calc(var(--x) + 330px), calc(var(--y) + 62px)); }
  100% { opacity: 0; transform: translate(calc(var(--x) + 330px), calc(var(--y) + 62px)); }
}

/* Ops: data pulses across the wall screens, nodes breathing */
.l-pulse { fill: none; stroke: #CDEFFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 92; stroke-dashoffset: 100; opacity: .95; animation: l-pulse var(--t) var(--d) infinite linear; }
@keyframes l-pulse { to { stroke-dashoffset: 0; } }
.l-node { fill: #BFEAFF; opacity: .15; transform-origin: center; transform-box: fill-box; animation: l-node 3.6s var(--d) infinite; }
@keyframes l-node { 0%, 100% { opacity: .1; transform: scale(.7); } 30% { opacity: .95; transform: scale(1.25); } 60% { opacity: .2; transform: scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .l-win { opacity: .8; } .l-beacon { opacity: 1; } .l-meteor, .l-road, .l-pulse { display: none; } .l-node { opacity: .6; }
}

/* shell.css */
/* Shell: header (Upward fold + Digilayers mega/drawer patterns), animated logo, footer. */
:root { --hdr-h: 84px; --hdr-h-s: 64px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease: cubic-bezier(.4, 0, .2, 1); }

/* ── Skip link: hidden until keyboard focus ── */
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: var(--sky); color: var(--night); font-weight: 600; transform: translateY(-160%); }   /* no transition: it must be on screen the moment it gets focus */
.skip:focus { transform: none; }

/* ── Header ─────────────────────────────────────────── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 1000; color: #fff; transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.hdr.is-scrolled { background: rgba(8, 17, 41, .92); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hdr__bar { width: min(1360px, 100% - 2 * var(--gut)); display: flex; align-items: center; gap: 12px; height: var(--hdr-h); transition: height .35s var(--ease-out); }
.hdr.is-scrolled .hdr__bar { height: var(--hdr-h-s); }
.hdr__progress { position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--navy), var(--sky)); opacity: 0; transition: opacity .3s; }
.hdr.is-scrolled .hdr__progress { opacity: 1; }

/* logo: wordmark folds into the N mark once the page scrolls (the N alone is the approved secondary logo) */
.hdr__logo { flex: none; display: block; height: 22px; width: 160px; box-sizing: content-box; padding-block: 11px; }   /* 44px tap area, same look */
.lg { height: 100%; width: auto; overflow: visible; display: block; }
.lg-l { fill: currentColor; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s var(--ease-out), opacity .3s; }
.lg-sym { fill: var(--sky); }
.lg-n { transform-box: view-box; transition: transform .55s var(--ease-out); }
.hdr.is-scrolled .lg-l { transform: scale(.2) translateY(30%); opacity: 0; }
.hdr.is-scrolled .lg-t { transition-delay: .12s; } .hdr.is-scrolled .lg-e { transition-delay: .08s; } .hdr.is-scrolled .lg-c { transition-delay: .04s; }
.hdr.is-scrolled .lg-y { transition-delay: .12s; } .hdr.is-scrolled .lg-f { transition-delay: .08s; } .hdr.is-scrolled .lg-i { transition-delay: .04s; }
.lg-n { transform-origin: 419px 54px; }
.hdr.is-scrolled .lg-n { transform: translateX(-419px) scale(1.55); }   /* the mark grows to read as the logo on its own */
/* the N's circuit: a light runs along its two strokes and each node lights as it passes */
.lg-run { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 400; stroke-dashoffset: 14; opacity: 0; }
.lg-node { fill: none; stroke: #fff; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lg.is-run .lg-run { animation: lg-run 1.3s var(--ease) forwards; }
.lg.is-run .lg-run--b { animation-delay: .55s; }
.lg.is-run .lg-node { animation: lg-node .9s var(--ease) calc(var(--i) * .16s) forwards; }
@keyframes lg-run { 0% { opacity: 1; stroke-dashoffset: 14; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -150; } }
@keyframes lg-node { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: .95; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.6); } }
/* first load: letters rise in, then the circuit runs once */
.lg.is-intro .lg-l { animation: lg-in .7s var(--ease-out) both; }
.lg.is-intro .lg-e { animation-delay: .05s; } .lg.is-intro .lg-c { animation-delay: .1s; } .lg.is-intro .lg-h { animation-delay: .15s; }
.lg.is-intro .lg-i { animation-delay: .2s; } .lg.is-intro .lg-f { animation-delay: .25s; } .lg.is-intro .lg-y { animation-delay: .3s; }
@keyframes lg-in { from { opacity: 0; transform: translateY(40%); } }

/* nav */
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.hdr__item { position: static; }
.hdr__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; border: 0; background: none; color: inherit; font: 500 14px/1 var(--font); white-space: nowrap; cursor: pointer; opacity: .88; transition: opacity .2s; }
.hdr__link::after { content: ''; position: absolute; inset-inline-start: 8px; inset-inline-end: 8px; bottom: 6px; height: 1.5px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.hdr__link:hover, .hdr__link[aria-expanded="true"] { opacity: 1; }
.hdr__link:hover::after, .hdr__link[aria-expanded="true"]::after { transform: scaleX(1); }
.hdr__link svg { width: 9px; height: 9px; transition: transform .3s var(--ease-out); }
.hdr__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr__support { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; opacity: .88; white-space: nowrap; }
.hdr__lang { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color .2s, background .2s; }
.hdr__lang:hover { border-color: var(--sky); background: rgba(88, 191, 237, .1); }
.drawer__foot .hdr__lang { align-self: flex-start; height: 40px; }
/* Support: a headset pill (same family as the language pill) that opens the three support channels on hover or focus */
.hdr__sup { position: relative; }
.hdr__support { height: 34px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); opacity: 1; transition: border-color .25s, background .25s; }
.hdr__support svg { width: 17px; height: 17px; fill: none; stroke: var(--sky); stroke-width: 1.6; stroke-linecap: round; }
.hdr__sup:hover .hdr__support, .hdr__sup:focus-within .hdr__support { border-color: var(--sky); background: rgba(88, 191, 237, .1); }
.sup-pop { position: absolute; top: 100%; inset-inline-end: 0; width: 290px; margin-top: 10px; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, #13295A, #0B1736); border: 1px solid rgba(88, 191, 237, .3); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--ease-out), visibility 0s .25s; }
.sup-pop::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }   /* bridges the gap so the pointer can travel from the pill into the panel */
.hdr__sup:hover .sup-pop, .hdr__sup:focus-within .sup-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sup-pop small { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: calc(.12em * var(--track)); text-transform: uppercase; color: var(--sky); }
.sup-pop__ch { display: block; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.sup-pop__ch b { display: block; font-size: 14px; font-weight: 600; }
.sup-pop__ch span { font-size: 14px; color: rgba(255, 255, 255, .68); }
.sup-pop__ch:hover b { color: var(--sky); }
.sup-pop__all { display: block; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; font-weight: 600; color: var(--sky); }
.hdr__cta { height: 42px; padding: 0 18px; background: var(--sky); color: var(--night); font-size: 14px; }
.hdr__cta i { transition: transform .25s var(--ease-out); }
.hdr__cta:hover i { transform: translateX(calc(3px * var(--dir))); }
.hdr__burger { display: none; width: 44px; height: 44px; margin-inline-start: auto; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; background: none; color: inherit; cursor: pointer; }
.hdr__burger span { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: currentColor; transition: transform .3s var(--ease-out); }
.hdr__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* mega menu */
.mm { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 100%; padding: 28px 0 34px; background: rgba(9, 18, 44, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .32s var(--ease-out), visibility 0s .32s; }
.mm.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .32s var(--ease-out); }
.mm__grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.mm__spot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 22px; border-radius: 18px; overflow: hidden; background: #0E1E48 center / cover; isolation: isolate; }
.mm__spot::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 17, 41, .95) 10%, rgba(8, 17, 41, .2) 70%); }
.mm__spot small { font-size: 11px; font-weight: 600; letter-spacing: calc(.14em * var(--track)); text-transform: uppercase; color: var(--sky); }
.mm__spot b { display: block; margin: 6px 0 12px; font-size: 19px; line-height: 1.25; font-weight: 600; }
.mm__spot a { font-size: 14px; font-weight: 600; color: var(--sky); }
.mm__spot--blend { background-color: #000; } /* 3D renders on black use screen blend inside the card */
.mm__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 28px; align-content: start; }
.mm__list--3 { grid-template-columns: repeat(3, 1fr); }
.mm__link { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; transition: background .2s; }
.mm__link:hover { background: rgba(88, 191, 237, .08); }
.mm__link b { display: block; font-size: 15px; font-weight: 600; }
.mm__link span { display: block; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.mm__ico { width: 52px; height: 52px; border-radius: 12px; background: #000 center / 150% auto no-repeat; border: 1px solid rgba(88, 191, 237, .2); }
.mm__ico--node { display: grid; place-items: center; background: rgba(88, 191, 237, .08); }
.mm__ico--node::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sky); box-shadow: 0 0 0 5px rgba(88, 191, 237, .12); transition: box-shadow .3s; }
.mm__link:hover .mm__ico--node::before { box-shadow: 0 0 0 9px rgba(88, 191, 237, .1); }

/* mobile drawer (right sheet) */
.drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; overflow: hidden; }   /* clip the off-canvas sheet so phones keep a 1:1 layout viewport */
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(4, 9, 24, .6); opacity: 0; transition: opacity .35s; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__sheet { position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: min(400px, 88vw); display: flex; flex-direction: column; padding: 22px 22px 26px; background: linear-gradient(180deg, #0D1B42, #070F27); color: #fff; transform: translateX(calc(100% * var(--dir))); transition: transform .4s var(--ease); overflow-y: auto; }
.drawer.is-open .drawer__sheet { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drawer__top .lg { height: 20px; }
.drawer__close { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: none; color: #fff; font-size: 20px; cursor: pointer; }
.acc { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.acc > button, .acc > a { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 2px; border: 0; background: none; color: #fff; font: 600 19px/1.2 var(--font); text-align: start; cursor: pointer; }
.acc > button::after { content: '+'; font-weight: 400; font-size: 22px; color: var(--sky); transition: transform .3s var(--ease-out); }
.acc > button[aria-expanded="true"]::after { transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc > button[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel a { display: block; padding: 9px 2px 9px 14px; font-size: 15px; color: rgba(255, 255, 255, .75); border-inline-start: 1px solid rgba(88, 191, 237, .3); }
.acc__panel a:last-child { margin-bottom: 14px; }
.drawer__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
.drawer__foot .btn { justify-content: center; background: var(--sky); color: var(--night); }
.drawer__foot a.sup { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .7); }
html.has-menu { overflow: hidden; }

@media (max-width: 1440px) { .hdr__sup { display: none; } }
@media (max-width: 1280px) { .hdr__nav { display: none; } .hdr__lang { margin-inline-start: auto; } .hdr__burger { display: block; margin-inline-start: 0; } }
@media (max-width: 600px) { .hdr__cta { display: none; } .hdr__burger { margin-inline-start: auto; } .hdr__logo { width: 146px; height: 20px; padding-block: 12px; } }

/* ── Footer: night gradient ─────────────────────────── */
.ftr { position: relative; overflow: hidden; color: #fff; background:
    radial-gradient(45% 40% at 85% 100%, rgba(255, 169, 104, .14), transparent 70%),
    radial-gradient(70% 55% at 50% 0%, rgba(88, 191, 237, .16), transparent 70%),
    linear-gradient(180deg, #0B1736 0%, #070E24 55%, #040817 100%); isolation: isolate; }
.ftr__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ftr__glow { position: absolute; width: 60vw; height: 60vw; left: 50%; top: -30vw; border-radius: 50%; background: radial-gradient(circle, rgba(88, 191, 237, .18), transparent 60%); transform: translateX(-50%); animation: ftr-breathe 9s ease-in-out infinite; }
.ftr__lattice { position: absolute; inset: 0; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%2358BFED' stroke-width='1' opacity='.35'%3E%3Cpath d='M0 28L28 0L56 28L28 56Z'/%3E%3C/g%3E%3Cg fill='%2358BFED' opacity='.55'%3E%3Ccircle cx='28' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='28' r='1.6'/%3E%3Ccircle cx='56' cy='28' r='1.6'/%3E%3Ccircle cx='28' cy='56' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(80% 60% at 50% 100%, #000, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 100%, #000, transparent 75%); animation: ftr-drift 60s linear infinite; }
.ftr__stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #CFEFFF; opacity: 0; animation: ftr-star 5s ease-in-out infinite; }
@keyframes ftr-breathe { 50% { opacity: .55; transform: translateX(-50%) scale(1.08); } }
@keyframes ftr-drift { to { background-position: 56px -56px; } }
@keyframes ftr-star { 50% { opacity: .9; } }

.ftr__cta { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; padding: 110px 0 70px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ftr__cta h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); max-width: 14ch; }
.ftr__cta h2 em { font-style: normal; color: var(--sky); }
.ftr__cta p { color: rgba(255, 255, 255, .7); max-width: 420px; margin-bottom: 22px; }
.ftr__cta .row { display: flex; gap: 12px; flex-wrap: wrap; }
.ftr__cta .btn--sky { background: var(--sky); color: var(--night); }
.ftr__cta .btn--ghost { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }

.ftr__main { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; padding: 64px 0 56px; }
.ftr__brand .lg { height: 24px; color: #fff; margin-bottom: 18px; }
.ftr__brand p { font-size: 15px; color: rgba(255, 255, 255, .66); max-width: 300px; }
.ftr__social { display: flex; gap: 10px; margin-top: 22px; }
.ftr__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); transition: border-color .2s, background .2s, transform .2s; }
.ftr__social a:hover { border-color: var(--sky); background: rgba(88, 191, 237, .1); transform: translateY(-2px); }
.ftr__social svg { width: 17px; height: 17px; fill: #fff; }
.ftr h3 { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: calc(.14em * var(--track)); text-transform: uppercase; color: var(--sky); }
.ftr__col a { display: block; padding: 6px 0; font-size: 15px; color: rgba(255, 255, 255, .78); transition: color .2s, transform .25s var(--ease-out); }
.ftr__col a:hover { color: #fff; transform: translateX(calc(4px * var(--dir))); }

.ftr__offices { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.office { padding: 28px 28px 28px 0; }
.office + .office { padding-inline-start: 28px; border-inline-start: 1px solid rgba(255, 255, 255, .1); }
.office b { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.office b i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(88, 191, 237, .6); animation: ftr-ping 2.8s infinite; }
.office:nth-child(2) b i { animation-delay: .9s; } .office:nth-child(3) b i { animation-delay: 1.8s; }
.office small { display: block; margin: 2px 0 8px; font-size: 12px; letter-spacing: calc(.1em * var(--track)); text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.office p { font-size: 14px; color: rgba(255, 255, 255, .66); }
.office--contact a { display: block; font-size: 15px; color: #fff; padding: 2px 0; }
@keyframes ftr-ping { 70% { box-shadow: 0 0 0 9px rgba(88, 191, 237, 0); } 100% { box-shadow: 0 0 0 0 rgba(88, 191, 237, 0); } }

.ftr__word { position: relative; margin: 46px 0 0; color: transparent; }
.ftr__word .lg { width: 100%; height: auto; }
.ftr__word .lg-l { fill: rgba(255, 255, 255, .05); }
.ftr__word .lg-sym { fill: rgba(88, 191, 237, .22); }
.ftr__shine { animation: ftr-sweep 8s ease-in-out infinite; }
@keyframes ftr-sweep { 0% { transform: translateX(-260px); } 55%, 100% { transform: translateX(calc(900px * var(--dir))); } }

.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; padding: 22px 0 30px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ftr__bottom nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.ftr__bottom nav a { display: inline-block; padding-block: 12px; }   /* 44px tap height */
.ftr__bottom a:hover { color: #fff; }

@media (max-width: 1000px) {
  .ftr__cta { grid-template-columns: 1fr; padding-top: 80px; }
  .ftr__main { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__offices { grid-template-columns: 1fr; }
  .office, .office + .office { padding: 20px 0; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (prefers-reduced-motion: reduce) { .lg.is-intro .lg-l { animation: none; } }

/* phone CTA (shell.js): bottom bar copy of the header CTA, shown after the hero, hidden over the footer */
.mcta { display: none; }
@media (max-width: 600px) {
  .mcta { position: fixed; z-index: 900; inset-inline: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; height: 48px; background: var(--sky); color: var(--night); font-weight: 600; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); transform: translateY(140%); transition: transform .35s var(--ease-out); pointer-events: none; }
  .mcta.is-on { transform: none; pointer-events: auto; }
}

/* site.css */
/* Site-wide: dark page base, eyebrows, buttons, section heads, the dark Technology Wheel */
body { background: var(--night); color: #fff; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: calc(.16em * var(--track)); text-transform: uppercase; color: var(--sky); }
/* eyebrow marker: one node of the TECHNIFY icon, a small ring that glows softly now and then */
.eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--sky); box-shadow: 0 0 6px rgba(88, 191, 237, .55); }
@media (prefers-reduced-motion: no-preference) { .eyebrow::before { animation: eb-node 4.5s ease-in-out infinite; } }
@keyframes eb-node { 0%, 60%, 100% { box-shadow: 0 0 4px rgba(88, 191, 237, .35); } 80% { box-shadow: 0 0 0 4px rgba(88, 191, 237, .12), 0 0 10px rgba(88, 191, 237, .7); } }
.eyebrow--navy { color: var(--navy); }   /* light sections */
.eyebrow--navy::before { border-color: var(--navy); box-shadow: none; animation: none; }
.btn--sky { background: var(--sky); color: var(--night); }
.btn--ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
h2 { font-size: 2.25rem; }


.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.sec-head h2 { max-width: 20ch; margin-top: 16px; }
.sec-head p { color: rgba(255,255,255,.7); max-width: 480px; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; gap: 24px; } }
.wheel__body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.w-seg { fill: #12204A; stroke: rgba(88,191,237,.35); stroke-width: 1; }
.w-seg.is-on { fill: #1C3A78; stroke: var(--sky); filter: drop-shadow(0 0 18px rgba(88,191,237,.45)); }
.w-seg.is-off { opacity: .45; }
.w-ring { fill: rgba(88,191,237,.08); stroke: rgba(88,191,237,.3); }
.w-ring.is-on { fill: rgba(88,191,237,.22); filter: drop-shadow(0 0 22px rgba(88,191,237,.5)); }
.w-ringpart { fill: transparent; }
.w-ringpart.is-on { fill: rgba(88,191,237,.4); }
.w-ringtext { fill: rgba(255,255,255,.75); }
/* the ring is a control too: a pill names it at the bottom and a warm light travels round it */
.w-ringhint { cursor: pointer; }
.w-hintbg { fill: #0D1B3E; stroke: rgba(88,191,237,.55); stroke-width: 1.2; transition: fill .35s, stroke .35s, filter .35s; }
.w-shield { fill: rgba(88,191,237,.18); stroke: var(--sky); stroke-width: 1.6; stroke-linejoin: round; }
.w-hinttext { fill: #fff; font-size: 12px; font-weight: 600; letter-spacing: calc(.08em * var(--track)); direction: ltr; }   /* x is the text's left edge on Arabic pages too */
.w-ringhint:hover .w-hintbg, .w-ring.is-on ~ .w-ringhint .w-hintbg { fill: #17336E; stroke: var(--sky); filter: drop-shadow(0 0 12px rgba(88,191,237,.55)); }
.w-orbit { fill: #FFD9B8; filter: drop-shadow(0 0 6px var(--dusk)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .w-orbit { display: none; } }
.w-tick { stroke: rgba(88,191,237,.35); stroke-width: 1; }
.w-ticks { transform-origin: 300px 300px; animation: spin 90s linear infinite; }
.w-core { fill: #0A1430; stroke: rgba(88,191,237,.5); }
.w-label, .w-coretext { fill: #fff; }
.w-label.is-off { opacity: .45; }
.w-coresub { fill: var(--sky); }
@keyframes spin { to { transform: rotate(360deg); } }
.w-card { padding: 34px; border-radius: 20px; background: linear-gradient(180deg, rgba(28,58,120,.55), rgba(10,20,48,.75)); border: 1px solid rgba(88,191,237,.25); }
.w-kicker, .w-cta { color: var(--sky); }
.w-line { color: rgba(255,255,255,.75); }
[data-wheel] { --line: rgba(255,255,255,.12); }

/* ── Warmth (Ibrahim 2026-10-25: "not one color tone"): one soft dusk amber melted into the navy ── */
:root { --dusk: #FFA968; --dusk-glow: rgba(255, 169, 104, .16); }

/* glowing borders (Ibrahim: "subtly move like Gemini"): a hairline whose light travels round the card, sky → white → dusk,
   each card starting at its own point; still for reduced motion, paused off-screen (.is-paused) */
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes glow-turn { to { --ga: 360deg; } }
:is(.w-card, .bk-paths__card, .dx__panel, .gc__model, .su__card, .model, .pr__card, .of__card, .tf-form, .ct__form, .loc, .pi__tiers div, .ins__card, .sp__card, .pt__panel) { position: relative; isolation: isolate; }
:is(.w-card, .bk-paths__card, .dx__panel, .gc__model, .su__card, .model, .pr__card, .of__card, .tf-form, .ct__form, .loc, .pi__tiers div)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ga), rgba(88, 191, 237, .18), rgba(88, 191, 237, .85) 10%, rgba(255, 255, 255, .9) 15%, rgba(255, 169, 104, .75) 21%, rgba(88, 191, 237, .18) 34%, rgba(88, 191, 237, .18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8; transition: opacity .4s; }
@media (prefers-reduced-motion: no-preference) {
  :is(.w-card, .bk-paths__card, .dx__panel, .gc__model, .su__card, .model, .pr__card, .of__card, .tf-form, .ct__form, .loc, .pi__tiers div, .ins__card, .sp__card)::after { animation: glow-turn 11s linear infinite; }
  :is(.w-card, .bk-paths__card, .dx__panel, .gc__model, .su__card, .model, .pr__card, .of__card, .pi__tiers div, .ins__card, .sp__card):nth-child(3n + 2)::after { animation-delay: -4s; }
  :is(.w-card, .bk-paths__card, .dx__panel, .gc__model, .su__card, .model, .pr__card, .of__card, .pi__tiers div, .ins__card, .sp__card):nth-child(3n)::after { animation-delay: -7.5s; }
}
:is(.w-card, .bk-paths__card, .dx__panel, .gc__model, .su__card, .model, .pr__card, .of__card, .pi__tiers div):hover::after { opacity: 1; }
/* light-section cards get a quieter version */
:is(.ins__card, .sp__card)::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ga), rgba(88, 191, 237, .12), rgba(88, 191, 237, .6) 10%, rgba(255, 169, 104, .55) 20%, rgba(88, 191, 237, .12) 32%, rgba(88, 191, 237, .12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

.btn--sky { background: linear-gradient(100deg, var(--sky) 0%, var(--sky) 60%, #9FD6F2 80%, #FFC79A 100%) 0 0 / 200% 100%; transition: background-position .5s var(--ease-out), transform .2s; }
.btn--sky:hover { background-position: 100% 0; }

/* light version of the path cards (white rhythm) */
.bk-paths.is-light .bk-paths__card { background: #fff; border-color: rgba(35, 54, 109, .1); box-shadow: 0 20px 40px rgba(35, 54, 109, .06); }
.bk-paths.is-light .bk-paths__card h3 { color: var(--navy); }
.bk-paths.is-light .bk-paths__card p { color: var(--grey); }
.bk-paths.is-light .bk-paths__card small { color: var(--grey); }
.bk-paths.is-light .bk-paths__n, .bk-paths.is-light .bk-paths__go { color: var(--navy); }
.bk-paths.is-light .sec-head p { color: var(--grey); }

/* Glass layers with a live signature (signature.js): the wrapper screen-blends as one, so the overlay and the render
   melt into the section together and the float animation moves both */
.sig-art { position: relative; width: 100%; mix-blend-mode: screen; }
.sig-art img { display: block; width: 100%; }
.sig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* looping animations rest while their section is off-screen (shell.js toggles .is-paused) */
main > section.is-paused *, main > section.is-paused *::before, main > section.is-paused *::after, footer.is-paused *, footer.is-paused *::before, footer.is-paused *::after { animation-play-state: paused; }

/* Ribbon (blocks.ribbon): a contained photo band that breaks the run of solid sections and carries one message.
   The photo and its live SVG share one box with the photo's own 3:2 shape, sized to cover the band; --y picks the
   focal height, so the overlay always sits on the real lights */
.rb { --rbh: clamp(260px, 32vh, 360px); position: relative; height: var(--rbh); overflow: hidden; display: grid; align-items: center; background: var(--night); isolation: isolate; }
.rb__media { position: absolute; z-index: -1; left: 50%; top: var(--y); width: max(100%, calc(var(--rbh) * 1.5)); aspect-ratio: 3 / 2; transform: translate(-50%, calc(var(--y) * -1)); }
.rb__media img { display: block; width: 100%; height: 100%; }
.rb__media .sig { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--to-end), rgba(8, 17, 41, .88) 0%, rgba(8, 17, 41, .55) 45%, rgba(8, 17, 41, .05) 80%), linear-gradient(180deg, rgba(8, 17, 41, .5), transparent 22%, transparent 78%, rgba(8, 17, 41, .5)); }
.rb--top { align-items: start; padding-top: clamp(28px, 5vh, 52px); }
.rb--top::after { background: linear-gradient(180deg, rgba(8, 17, 41, .82) 0%, rgba(8, 17, 41, .35) 45%, transparent 70%, rgba(8, 17, 41, .45)); }
.rb__txt h2 { max-width: 22ch; margin: 12px 0 14px; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; text-shadow: 0 2px 18px rgba(8, 17, 41, .6); }
[dir="rtl"] .rb[data-flip] .rb__media { transform: translate(-50%, calc(var(--y) * -1)) scaleX(-1); }
@media (max-width: 600px) { .rb { --rbh: 300px; } .rb::after { background: linear-gradient(180deg, rgba(8, 17, 41, .85), rgba(8, 17, 41, .55) 60%, rgba(8, 17, 41, .75)); } }

/* drifting dot field behind the dark sections of inner pages (the home wheel's dots and the footer's stars, in motion):
   a fine grid and a sparser bright layer moving at another speed, faded toward the edges; paused off-screen */
:is(.bk:not(.is-light), .ph, .pi, .eng, .ps, .ic, .sh, .tl) { position: relative; isolation: isolate; }
:is(.bk:not(.is-light), .ph, .pi, .eng, .ps, .ic, .sh, .tl)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(88, 191, 237, .22) 1px, transparent 1.3px), radial-gradient(rgba(214, 240, 255, .55) 1.3px, transparent 1.8px);
  background-size: 26px 26px, 132px 132px; opacity: .5;
  -webkit-mask-image: radial-gradient(65% 75% at 70% 45%, #000, transparent 80%); mask-image: radial-gradient(65% 75% at 70% 45%, #000, transparent 80%); }
@media (prefers-reduced-motion: no-preference) { :is(.bk:not(.is-light), .ph, .pi, .eng, .ps, .ic, .sh, .tl)::before { animation: dots-drift 70s linear infinite; } }
@keyframes dots-drift { to { background-position: 26px -26px, -132px 132px; } }
@media (max-width: 600px) { .w-svg { width: calc(100vw - 16px); margin-inline: calc(50% - 50vw + 8px); } }   /* phones: the wheel takes the full width so its labels read */
.w-ico { mix-blend-mode: screen; }   /* on the clipped group: a clip isolates its children, so a blend on the image alone would not reach the slice */
.w-ico { pointer-events: none; transition: opacity .35s; } .w-ico.is-off { opacity: .45; }

/* home.css */
/* Home page sections (moved from the round 2-3 prototype inline styles) */
  /* 1 · Hero: still photo of Riyadh, live windows, beacons, car lights, rare meteor */
  .hero { position: relative; min-height: 780px; display: flex; align-items: flex-end; overflow: hidden; background: var(--night); }
  .hero .live { --ar: 1672 / 941; --fx: 70%; }
  .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
      linear-gradient(var(--to-end), rgba(8,17,41,.9) 0%, rgba(8,17,41,.5) 44%, rgba(8,17,41,0) 72%),
      linear-gradient(0deg, var(--night) 0%, rgba(8,17,41,0) 36%); }
  .hero .wrap { position: relative; z-index: 2; padding: 0 0 72px; }
  .hero h1 { margin: 22px 0; font-size: 3.4rem; }
  .hero h1 em { font-style: normal; color: var(--sky); }
  .hero__lead { max-width: 540px; font-size: 18px; color: rgba(255,255,255,.82); }
  .hero__ctas { display: flex; gap: 14px; margin-top: 34px; }
  .hero__defs { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 40px; margin-top: 60px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
  .hero__defs b { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
  .hero__defs b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
  .hero__defs span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.62); }

  /* 2 · Technology Wheel */
  .wheel { position: relative; padding: 120px 0 130px; background: radial-gradient(35% 50% at 100% 100%, rgba(255, 169, 104, .16), transparent 70%), radial-gradient(60% 70% at 30% 50%, rgba(35,54,109,.75), transparent 70%), var(--night); }
  .wheel::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(88,191,237,.22) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(50% 60% at 30% 50%, #000, transparent); }
  .wheel .wrap { position: relative; }

  /* 4 · GuardianCare: the five layers come together and the security ring closes as you scroll */
  .guard { position: relative; height: 230vh; background: var(--night); }
  .guard__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden;
    background: radial-gradient(55% 60% at 72% 55%, rgba(35,54,109,.55), transparent 70%), #0A1532; } /* the layers screen-blend against this, so it lives inside the pinned context */
  .guard .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
  .guard h2 { margin: 16px 0 16px; max-width: 16ch; }
  .guard__lead { color: rgba(255,255,255,.72); max-width: 470px; }
  .models { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
  .model { padding: 20px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(88,191,237,.2); }
  .model small { font-size: 12px; font-weight: 600; letter-spacing: calc(.12em * var(--track)); color: var(--sky); }
  .model b { display: block; margin: 6px 0 6px; font-size: 18px; }
  .model p { font-size: 14px; color: rgba(255,255,255,.66); }
  .model .eq { display: inline-block; margin-top: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(88,191,237,.12); font-size: 13px; font-weight: 600; color: #CFEFFF; }
  .sla { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(90deg, rgba(88,191,237,.22), rgba(88,191,237,.06)); font-size: 14px; }
  .sla b { font-weight: 600; }
  .sla span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); font-size: 13px; }
  .guard .w-cta { color: var(--sky); }
  .stack { position: relative; width: 82%; aspect-ratio: 100 / 121; }   /* leaves room on the right for the layer labels */
  .stack__layer { position: absolute; top: 0; left: 50%; width: 70%; mix-blend-mode: screen; transform: translate(-50%, 0); will-change: transform, opacity; }
  .stack__label { position: absolute; left: 86%; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; will-change: transform, opacity; }
  .stack__label::before { content: ''; width: 34px; height: 1px; background: rgba(88,191,237,.6); }
  .stack__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .stack__ring path { fill: none; stroke: var(--sky); stroke-width: .55; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--draw, 100); filter: drop-shadow(0 0 8px rgba(88,191,237,.9)); }
  .stack__ring .back { opacity: .35; }
  .stack__shield { opacity: var(--done, 0); transition: opacity .4s; position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(88,191,237,.16); border: 1px solid rgba(88,191,237,.5); font-size: 13px; font-weight: 600; color: #DDF3FF; white-space: nowrap; }
  .stack__full { display: none; }
  .stack .stack__shield { display: none; } /* desktop: the closing ring says it; phones show the badge under the still image */

  /* 5 · InfinityCare: the team photo stays still, the wall screens behind them are live */
  .ops { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 600px; background: #0B1736; }
  .ops__media { position: relative; overflow: hidden; }
  .ops__media .live { --ar: 1536 / 1024; --fx: 50%; }
  .ops__txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 72px; }   /* the link keeps its own width (stretched, its click area ran across the column) */
  .ops__txt h2 { max-width: 16ch; margin: 16px 0 18px; }
  .ops__txt p { color: rgba(255,255,255,.72); max-width: 460px; }
  .cycle { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; font-size: 14px; }
  .cycle span { display: inline-flex; align-items: center; gap: 6px; }
  .cycle span + span::before { content: '→'; color: var(--sky); margin-inline-end: 6px; }
  .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; max-width: 460px; }
  .tiers div { padding: 14px; border-radius: 14px; border: 1px solid rgba(88,191,237,.25); }
  .tiers b { display: block; font-size: 15px; }
  .tiers span { font-size: 13px; color: rgba(255,255,255,.6); }
  .tiers div:last-child { background: rgba(88,191,237,.14); border-color: rgba(88,191,237,.55); }
  .ops .w-cta { color: var(--sky); }

  @media (max-width: 1100px) { /* the team photo needs full width to keep all three people in frame */
    .ops { grid-template-columns: 1fr; } .ops__media { min-height: 460px; } .ops__txt { padding: 64px var(--gut); }
  }
  @media (max-width: 900px) {
    .hero { min-height: 0; } .hero .wrap { padding-top: 130px; } .hero h1 { font-size: 2.6rem; } .hero__ctas { flex-wrap: wrap; }
    .hero .live { --fx: 78%; }
    .hero__defs, .wheel__body, .ops, .guard .wrap, .models { grid-template-columns: 1fr; gap: 24px; }
    .guard { height: auto; } .guard__pin { position: static; height: auto; padding: 100px 0; }
    .stack__layer, .stack__label, .stack__ring { display: none; } .stack { aspect-ratio: auto; }
    .stack__full { display: block; width: 100%; mix-blend-mode: screen; }
    .stack .stack__shield { position: static; transform: none; display: inline-block; margin-top: 10px; opacity: 1; }
    .ops__media { min-height: 340px; } .ops__txt { padding: 56px var(--gut); }
    .tiers { grid-template-columns: 1fr; } .tiers div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 14px; }
  }

/* sections.css */
/* Customer Success (the page's one light section) and TechniRise */

.cs { padding: 120px 0; background: #F4F8FC; color: var(--ink); }
.cs__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 40px; }
.cs__head h2 { margin-top: 16px; max-width: 18ch; color: var(--navy); }
.cs__head > p { color: var(--grey); max-width: 460px; }
.cs__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 24px; }
.cs__tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs__tabs button { height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(35, 54, 109, .2); background: #fff; color: var(--navy); font: 500 14px var(--font); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cs__tabs button:hover { border-color: var(--navy); }
.cs__tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cs__more { display: inline-block; padding-block: 11px; font-size: 14px; font-weight: 600; color: var(--navy); }   /* 44px tap height */
.cs__stage { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr auto; gap: 0 48px; padding: 18px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(35, 54, 109, .08); }
.cs__media { position: relative; grid-row: span 2; min-height: 440px; border-radius: 18px; overflow: hidden; }
.cs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.2s var(--ease-out); }
.cs__media img.is-on { opacity: 1; transform: none; }
.cs__flow { list-style: none; margin: 0; padding: 26px 8px 0 0; counter-reset: f; }
.cs__flow li { position: relative; padding: 0 0 26px 44px; }
.cs__flow li::before { counter-increment: f; content: '0' counter(f); position: absolute; inset-inline-start: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ice); color: var(--navy); font-size: 12px; font-weight: 700; }
.cs__flow li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 15px; top: 34px; bottom: 4px; width: 1px; background: linear-gradient(var(--sky), rgba(88, 191, 237, .15)); }
.cs__flow small { font-size: 12px; font-weight: 600; letter-spacing: calc(.14em * var(--track)); text-transform: uppercase; color: var(--navy); }
.cs__flow p { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--ink); transition: opacity .3s; }
.cs__flow.is-swap p { opacity: 0; }
.cs__cta { align-self: end; margin: 0 0 10px 44px; font-weight: 600; color: var(--navy); }
.cs__cta i { font-style: normal; display: inline-block; transition: transform .25s var(--ease-out); }
.cs__cta:hover i { transform: translateX(calc(4px * var(--dir))); }

.rise { padding: 120px 0; background: radial-gradient(40% 60% at 10% 100%, rgba(255, 169, 104, .16), transparent 70%), radial-gradient(60% 80% at 80% 30%, rgba(35, 54, 109, .7), transparent 70%), var(--night); }
.rise__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.rise__media { position: relative; }
.rise__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.rise__word { position: absolute; inset-inline-start: 24px; bottom: -26px; display: flex; gap: 14px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: calc(-.02em * var(--track)); line-height: 1; }
.rise__word span { color: #fff; text-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.rise__word span:nth-child(2) { color: var(--sky); }
.rise__word span:nth-child(3) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.rise__txt h2 { margin: 16px 0 16px; max-width: 16ch; }
.rise__txt > p { color: rgba(255, 255, 255, .72); max-width: 460px; }
.rise__steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 2px; }
.rise__steps li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.rise__steps b { font-weight: 600; color: var(--sky); }
.rise__steps span { color: rgba(255, 255, 255, .78); font-size: 15px; }
.rise .w-cta { color: var(--sky); }

@media (max-width: 900px) {
  .cs__head, .cs__stage, .rise__grid { grid-template-columns: 1fr; gap: 24px; }
  .cs__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .cs__tabs button { flex: none; } .cs__bar { display: block; } .cs__more { display: inline-block; margin-top: 10px; }
  .cs__media { min-height: 260px; grid-row: auto; }
  .cs__cta { margin: 0 0 8px 44px; }
}

/* r3.css */
/* Round 3 sections: Engages, Partners, Regional map, Insights */

/* ── How TECHNIFY Engages ── */
.eng { position: relative; padding: 110px 0 120px; background: radial-gradient(35% 60% at 0% 100%, rgba(255, 169, 104, .16), transparent 70%), linear-gradient(180deg, var(--night), #0B1736); }
.eng .sec-head { margin-bottom: 40px; }
.eng__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 54px; }
.eng__ask > span { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.eng__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eng__chips button { height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(88, 191, 237, .3); background: rgba(255, 255, 255, .03); color: #fff; font: 500 14px var(--font); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.eng__chips button:hover { border-color: var(--sky); }
.eng__chips button[aria-checked="true"] { background: var(--sky); border-color: var(--sky); color: var(--night); }
.eng__rail { position: relative; list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); }
.eng__rail::before, .eng__rail::after { content: ''; position: absolute; top: 17px; height: 2px; inset-inline-start: calc(50% / var(--n, 8)); inset-inline-end: calc(50% / var(--n, 8)); background: rgba(255, 255, 255, .1); }   /* line runs centre of first node to centre of last */
/* the lit part of the rail starts at the chosen stage */
.eng__rail::after { inset-inline-start: calc(50% / var(--n, 8) + var(--start, 0) * 100% / var(--n, 8)); background: linear-gradient(90deg, var(--sky), rgba(88, 191, 237, .35)); box-shadow: 0 0 12px rgba(88, 191, 237, .6); transition: left .6s var(--ease-out); }
.eng__rail li { position: relative; z-index: 1; text-align: center; opacity: .38; transition: opacity .4s; }
.eng__rail li.is-on { opacity: 1; }
.eng__rail a { display: block; padding: 0 6px; }
.eng__rail i { display: block; width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 50%; background: #0B1736; border: 2px solid rgba(255, 255, 255, .25); position: relative; transition: border-color .3s, box-shadow .3s; }
.eng__rail i::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .3s; }
.eng__rail li.is-on i { border-color: var(--sky); }
.eng__rail li.is-on i::after { background: var(--sky); }
.eng__rail li.is-here i { box-shadow: 0 0 0 7px rgba(88, 191, 237, .16), 0 0 24px rgba(88, 191, 237, .6); }
.eng__rail.is-run li.is-on i { animation: eng-pop .5s var(--ease-out) both; animation-delay: calc((var(--i, 0)) * 70ms); }
.eng__rail li:nth-child(1) { --i: 0; } .eng__rail li:nth-child(2) { --i: 1; } .eng__rail li:nth-child(3) { --i: 2; } .eng__rail li:nth-child(4) { --i: 3; }
.eng__rail li:nth-child(5) { --i: 4; } .eng__rail li:nth-child(6) { --i: 5; } .eng__rail li:nth-child(7) { --i: 6; } .eng__rail li:nth-child(8) { --i: 7; }
@keyframes eng-pop { from { transform: scale(.6); } }
.eng__rail b { display: block; font-size: 16px; font-weight: 600; }
.eng__rail span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.eng__rail a:hover b { color: var(--sky); }
.eng__note { margin-bottom: 30px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .6); }
.eng__note b { color: var(--sky); font-weight: 600; }
.eng .btn { display: flex; width: max-content; margin: 0 auto; }

/* ── Technology Partners (light) ── */
.pt { padding: 120px 0; background: #fff; color: var(--ink); }
.pt__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 44px; }
.pt__head h2 { margin-top: 16px; max-width: 20ch; color: var(--navy); }
.pt__head > p { color: var(--grey); max-width: 460px; }
.pt__body { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.pt__tabs { display: grid; gap: 6px; }
.pt__tabs button { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid transparent; background: none; color: var(--navy); font: 600 15px var(--font); text-align: start; cursor: pointer; transition: background .25s, border-color .25s; }
.pt__tabs button i { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #0A1532 center / 150% auto no-repeat; }
.pt__tabs button:hover { background: #F4F8FC; }
.pt__tabs button[aria-selected="true"] { background: #F4F8FC; border-color: rgba(35, 54, 109, .14); box-shadow: inset 3px 0 0 var(--sky); }
.pt__panel { padding: 26px; border-radius: 24px; background: #F4F8FC; transition: opacity .18s; }
.pt__panel.is-swap { opacity: 0; }
.pt__caps, .pt__secchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pt__caps span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(35, 54, 109, .12); font-size: 13px; color: var(--navy); }
.pt__grid, .pt__secgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }   /* --cols/-md/-sm: count-aware, from gridVars() */
.pt__card { position: relative; display: grid; place-items: center; height: 92px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(35, 54, 109, .08); transition: transform .25s var(--ease-out), box-shadow .25s; }
.pt__card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(35, 54, 109, .1); }
.pt__card img { max-width: 100%; max-height: 40px; width: auto; object-fit: contain; }
.pt__card.is-strategic { border-color: rgba(88, 191, 237, .55); }
.pt__card small { position: absolute; top: 7px; inset-inline-end: 9px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: calc(.04em * var(--track)); text-transform: uppercase; color: var(--navy); }
.pt__card small::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.pt__word { font-size: clamp(14px, 4vw, 17px); font-weight: 700; color: var(--navy); letter-spacing: calc(-.01em * var(--track)); }
.pt__sec { margin-top: 18px; padding: 20px; border-radius: 18px; background: var(--navy); color: #fff; }
.pt__sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: calc(.12em * var(--track)); text-transform: uppercase; color: var(--sky); }
.pt__sechead i { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(88, 191, 237, .2); }
.pt__secchips span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(88, 191, 237, .35); font-size: 13px; }
.pt__sec .pt__card { background: #fff; }
.pt__none { font-size: 14px; color: rgba(255, 255, 255, .7); }
.pt__cta { display: inline-block; margin-top: 26px; font-weight: 600; color: var(--navy); }
.pt__cta i { font-style: normal; display: inline-block; transition: transform .25s var(--ease-out); }
.pt__cta:hover i { transform: translateX(calc(4px * var(--dir))); }

@media (max-width: 900px) {
  .eng__rail { grid-template-columns: 1fr; gap: 6px; }
  .eng__rail::before, .eng__rail::after { top: 18px; bottom: 18px; inset-inline-start: 17px; inset-inline-end: auto; width: 2px; height: auto; }
  .eng__rail::after { inset-inline-start: 17px; top: calc(18px + var(--start) * (100% - 36px) / 7); transition: top .6s var(--ease-out); }
  .eng__rail li { text-align: start; }
  .eng__rail a { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; align-items: center; padding: 6px 0; }
  .eng__rail i { margin: 0; grid-row: span 2; }
  .eng__rail span { margin: 0; }
  .eng__note { text-align: start; }
  .eng .btn { margin: 0; }
  .pt__head, .pt__body { grid-template-columns: 1fr; gap: 20px; }
  .pt__tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .pt__tabs button { flex: none; }
  .pt__grid, .pt__secgrid { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); }
  .pt__panel { padding: 16px; }
}

/* ── Regional Presence ── */
.reg { position: relative; padding: 120px 0; overflow: hidden; background: radial-gradient(50% 70% at 70% 50%, rgba(35, 54, 109, .6), transparent 70%), var(--night); }
.reg__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; }
.reg__txt h2 { margin: 16px 0 16px; max-width: 14ch; }
.reg__txt > p { color: rgba(255, 255, 255, .72); max-width: 440px; }
.reg__stops { margin: 28px 0 26px; display: grid; gap: 4px; }
.reg__stops button { width: 100%; display: grid; grid-template-columns: 1fr; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; background: none; color: #fff; text-align: start; cursor: pointer; font-family: inherit; transition: background .25s, border-color .25s; }
.reg__stops b { font-size: 16px; font-weight: 600; }
.reg__stops span { font-size: 14px; color: rgba(255, 255, 255, .6); }
.reg__stops button:hover { background: rgba(255, 255, 255, .04); }
.reg__stops button[aria-selected="true"] { background: rgba(88, 191, 237, .1); border-color: rgba(88, 191, 237, .35); box-shadow: inset 3px 0 0 var(--sky); }
.reg__stops button[aria-selected="true"] span { color: #CFEFFF; }
.reg .w-cta { color: var(--sky); }
.reg__map { -webkit-mask-image: radial-gradient(75% 75% at 55% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(75% 75% at 55% 50%, #000 60%, transparent 100%); }
.reg__svg { width: 100%; height: auto; display: block; overflow: hidden; }
.reg__dots { fill: none; stroke-linecap: round; stroke-width: 2.3; transition: stroke .5s, opacity .5s; }
.reg__dots--land { stroke: rgba(255, 255, 255, .12); }
.reg__dots--af { stroke: rgba(88, 191, 237, .22); }
.reg__dots--af.is-on { stroke: rgba(88, 191, 237, .55); }
.reg__dots--hi { stroke: rgba(88, 191, 237, .6); }
.reg__dots--hi.is-on { stroke: #BFEAFF; filter: drop-shadow(0 0 6px rgba(88, 191, 237, .9)); }
.reg__arc { fill: none; stroke: rgba(88, 191, 237, .45); stroke-width: 1.2; stroke-dasharray: 3 4; }
.reg__arc.is-on { stroke: rgba(88, 191, 237, .8); }
.reg__run { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 92; stroke-dashoffset: 100; animation: reg-run 2.6s linear infinite; opacity: .85; }
.reg__run[data-g="eg"] { animation-delay: -.9s; } .reg__run[data-g="af"] { animation-delay: -1.7s; }
@keyframes reg-run { to { stroke-dashoffset: 0; } }
.reg__dot { fill: var(--sky); stroke: #fff; stroke-width: 1.5; }
.reg__halo { fill: rgba(88, 191, 237, .25); transform-box: fill-box; transform-origin: center; animation: reg-halo 2.8s ease-out infinite; }
.reg__pin--area .reg__halo { fill: rgba(88, 191, 237, .14); }
.reg__pin.is-on .reg__halo { fill: rgba(88, 191, 237, .45); }
@keyframes reg-halo { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.reg__name { fill: #fff; font: 600 12px var(--font); opacity: .55; transition: opacity .4s; paint-order: stroke; stroke: rgba(8, 17, 41, .8); stroke-width: 3px; }
.reg__pin.is-on .reg__name { opacity: 1; }
@media (max-width: 600px) { .reg__name { font-size: 15px; } }   /* the map renders at ~86 % on phones: 15 units ≈ 13 px on screen */
@media (max-width: 900px) { .reg__grid { grid-template-columns: 1fr; } .reg__map { order: -1; } }
@media (prefers-reduced-motion: reduce) { .reg__run { display: none; } .reg__halo { animation: none; opacity: .5; } }

/* ── Insights (light) ── */
.ins { padding: 120px 0; background: #F4F8FC; color: var(--ink); }
.ins__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 40px; }
.ins__head h2 { margin-top: 16px; color: var(--navy); }
.ins__head > p { color: var(--grey); max-width: 460px; }
.ins__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ins__card { display: flex; flex-direction: column; padding: 12px 12px 24px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px rgba(35, 54, 109, .06); transition: transform .3s var(--ease-out), box-shadow .3s; }
.ins__card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px rgba(35, 54, 109, .12); }
.ins__thumb { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 80% at 50% 60%, #15306A, #081129); }
.ins__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 7% 9%; mix-blend-mode: screen; transition: transform .8s var(--ease-out); }   /* glass art: the whole render shows, with a safety margin inside the frame */
.ins__card:hover .ins__thumb img { transform: scale(1.04); }   /* stays inside the margin */
.ins__cat { display: flex; align-items: center; gap: 8px; margin: 18px 12px 8px; font-size: 12px; font-weight: 600; letter-spacing: calc(.12em * var(--track)); text-transform: uppercase; color: var(--navy); }
.ins__cat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.ins__card b { margin: 0 12px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.ins__more { margin: auto 12px 0; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--navy); }
.ins__more i { font-style: normal; display: inline-block; transition: transform .25s var(--ease-out); }
.ins__card:hover .ins__more i { transform: translateX(calc(4px * var(--dir))); }
@media (max-width: 900px) { .ins__head, .ins__grid { grid-template-columns: 1fr; gap: 16px; } }

/* Services signature: a light runs the rail from the first stage to the page's own stage (the whole rail on the
   landing) and lands there; without @property support it simply rests on the page's stage */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.eng__track { position: relative; }
.eng__run { position: absolute; top: 12px; inset-inline-start: calc((.5 + var(--p)) * 100% / var(--n, 8)); width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: #E6F7FF; box-shadow: 0 0 14px 3px rgba(88, 191, 237, .9); pointer-events: none; z-index: 2; --p: var(--to); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .eng__run { animation: eng-run 4.2s var(--ease-out) infinite; }
}
@keyframes eng-run {
  0% { --p: 0; opacity: 0; scale: 1; }
  8% { opacity: 1; }
  62% { --p: var(--to); opacity: 1; scale: 1; }
  78%, 100% { --p: var(--to); opacity: 0; scale: 2.6; }
}
@media (max-width: 900px) {
  .eng__run { top: calc(18px + var(--p) * (100% - 36px - 30px) / (var(--n, 8) - 1)); inset-inline-start: 17px; margin-top: -6px; }
}

/* Insights landing: the latest article leads as a wide editorial feature, the rest follow two by two */
.ins__grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins__card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 36px; padding: 14px; }
.ins__card--feature .ins__thumb { grid-row: 1 / 6; aspect-ratio: 16 / 9; }
.ins__card--feature .ins__cat { grid-row: 2; grid-column: 2; margin-top: 0; }
.ins__card--feature b { grid-row: 3; grid-column: 2; }
.ins__card--feature .ins__more { grid-row: 4; grid-column: 2; }
.ins__card--feature b { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; }
@media (max-width: 900px) {
  .ins__grid--feature, .ins__card--feature { grid-template-columns: 1fr; }
  .ins__card--feature { grid-template-rows: none; }
  .ins__card--feature .ins__thumb, .ins__card--feature .ins__cat, .ins__card--feature b, .ins__card--feature .ins__more { grid-row: auto; grid-column: auto; }
  .ins__card--feature .ins__cat { margin-top: 18px; }
}

@media (max-width: 560px) { .pt__grid, .pt__secgrid { grid-template-columns: repeat(var(--cols-sm, 2), minmax(0, 1fr)); } }
/* phones: an odd last logo card spans the row (a full-width feature card, not a dangling one) */
@media (max-width: 560px) { .pt__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .pt__grid > :last-child:nth-child(odd) img { max-width: 46%; } }   /* the spanning card keeps the logo the size of the others */

/* meet.css */
/* Regional Presence, handshake version */
.meet { position: relative; min-height: 760px; overflow: hidden; background: var(--night); isolation: isolate; }
.meet__stage { position: absolute; inset: 0; z-index: -1; }
.meet__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out; }
.meet__bg.is-on { opacity: 1; }
.meet__bg img, .meet__tw { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* every city drifts all the time (never restarts), so the crossfade between two drifting photos has no jump */
.meet__bg img { animation: meet-drift 16s ease-in-out infinite alternate; }
@keyframes meet-drift { from { transform: scale(1.12) translateX(1.5%); } to { transform: scale(1.03) translateX(-1%); } }
.meet__tw circle { fill: #FFE6B8; opacity: 0; animation: meet-tw var(--t) var(--d) infinite; filter: drop-shadow(0 0 3px rgba(255, 214, 150, .9)); }
.meet__tw circle.st { fill: #F4F8FF; filter: none; animation-name: meet-st; }
@keyframes meet-st { 0%, 100% { opacity: .1; } 50% { opacity: .85; } }
/* aircraft: a white strobe and a red light crossing the sky, slow */
.meet__tw .pl { animation: meet-fly 26s linear infinite; }
.meet__tw .pl circle { opacity: 1; filter: none; }
.meet__tw .pl__w { fill: #fff; animation: meet-strobe 1.4s steps(1) infinite; }
.meet__tw .pl__r { fill: #FF5A4E; animation: meet-strobe 1.4s .7s steps(1) infinite; }
@keyframes meet-fly { from { transform: translate(-40px, var(--y)); } to { transform: translate(1720px, calc(var(--y) - 40px)); } }
@keyframes meet-strobe { 0% { opacity: 1; } 30% { opacity: .15; } }
.meet.is-paused .meet__tw .pl, .meet.is-paused .meet__tw .pl circle, .meet.is-paused .meet__bg img { animation-play-state: paused; }
@keyframes meet-tw { 0%, 100% { opacity: 0; } 40% { opacity: .95; } 60% { opacity: .2; } }
.meet.is-paused .meet__tw circle { animation-play-state: paused; }
/* the people stay; graded down so the studio light sits in a blue-hour room */
.meet__people { position: absolute; left: 35%; bottom: 0; width: min(41%, 620px); height: auto;   /* centred between the copy and each city's landmark (right third) */ filter: brightness(.82) contrast(1.06) saturate(.9) drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.meet__stage::after { content: ''; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(8, 17, 41, .94) 0%, rgba(8, 17, 41, .7) 38%, rgba(8, 17, 41, 0) 62%),
    linear-gradient(0deg, rgba(8, 17, 41, .9) 0%, rgba(8, 17, 41, 0) 30%),
    linear-gradient(180deg, rgba(8, 17, 41, .6) 0%, rgba(8, 17, 41, 0) 20%);
  pointer-events: none; }
.meet__people { z-index: 1; }
.meet__stage::after { z-index: 0; }
.meet__ui { position: relative; display: flex; align-items: center; min-height: 760px; padding: 100px 0; }
.meet__txt { max-width: 470px; }
.meet__txt h2 { margin: 16px 0 16px; }
.meet__txt > p { color: rgba(255, 255, 255, .78); }
.meet__stops { display: grid; gap: 4px; margin: 26px 0 24px; }
.meet__stops button { display: grid; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; background: none; color: #fff; text-align: start; cursor: pointer; font-family: inherit; transition: background .25s, border-color .25s; }
.meet__stops b { font-size: 16px; font-weight: 600; }
.meet__stops span { font-size: 14px; color: rgba(255, 255, 255, .6); }
.meet__stops button:hover { background: rgba(255, 255, 255, .05); }
.meet__stops button[aria-selected="true"] { background: rgba(8, 17, 41, .55); border-color: rgba(88, 191, 237, .4); box-shadow: inset 3px 0 0 var(--sky); backdrop-filter: blur(6px); }
.meet__stops button[aria-selected="true"] span { color: #CFEFFF; }
.meet .w-cta { color: var(--sky); }
.meet__city { position: absolute; right: 0; top: 110px; margin: 0; font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; letter-spacing: calc(-.03em * var(--track)); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .45); pointer-events: none; }
.meet__city span.is-in { display: inline-block; animation: meet-in .9s var(--ease-out) both; }
@keyframes meet-in { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 900px) {
  .meet { min-height: 0; }
  .meet__stage { position: relative; height: 380px; }
  .meet__people { width: 86%; left: 7%; }
  .meet__stage::after { background: linear-gradient(0deg, var(--night) 0%, rgba(8, 17, 41, 0) 40%); }
  /* the cutout ends at the hips: a fade to night in front of the people hides the edge and the empty strip below it */
  .meet__stage::before { content: ''; position: absolute; inset: auto 0 0; z-index: 2; height: 30%; background: linear-gradient(0deg, var(--night) 12%, rgba(8, 17, 41, 0)); pointer-events: none; }
  .meet__ui { min-height: 0; padding: 30px 0 80px; }
  .meet__city { display: none; }   /* the selected country is already highlighted in the list */
}
@media (prefers-reduced-motion: reduce) { .meet__tw circle { animation: none; opacity: .5; } .meet__bg img { animation: none; transform: none; } }