/* A tiny local character font keeps arrows monochrome on every platform. */
@font-face {
  font-family: 'Satelity Arrows';
  src: url('assets/satelity-arrows.651e9b299721942a.woff?v=651e9b299721942a') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: block;
  unicode-range: U+2190-2193, U+2197;
}

@font-face {
  font-family: Chivo;
  src: url('assets/font1.c88f4806df645a04.ttf?v=c88f4806df645a04') format('truetype');
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: Chivo;
  src: url('assets/font2.152b34b80fdf4eb8.ttf?v=152b34b80fdf4eb8') format('truetype');
  font-display: swap;
  font-weight: 600;
}

:root {
  color-scheme: dark;
  --bg: #0c191e;
  --deep: #081419;
  --surface: #102229;
  --mint: #b2ddca;
  --lilac: #b6b3ca;
  --white: #f0f4f1;
  --muted: #a6b9ba;
  --line: rgb(210 235 229 / 12%);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --section-space: clamp(80px, 9vw, 140px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: Chivo, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--mint); color: var(--deep); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
h1, h2, h3, h4, h5, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
h1, h2, h3 { letter-spacing: -.045em; }
h1 { font-size: clamp(48px, 5.8vw, 88px); line-height: 1.09; margin-bottom: 0; }
h2 { font-size: clamp(36px, 3.5vw, 54px); line-height: 1.17; margin-bottom: 0; }
h3 { font-size: 26px; line-height: 1.3; margin-bottom: 0; }
h2 em, h1 em { color: var(--mint); font-style: normal; }
p { margin-bottom: 20px; }
.wrap { width: 88%; max-width: 1320px; margin-inline: auto; }
.eyebrow {
  color: var(--mint);
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .2em;
  margin-bottom: 28px;
}
.fine { font-size: 11px; line-height: 1.8; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 100; }
.skip:focus { top: 15px; background: var(--mint); color: var(--deep); padding: 10px 20px; }

/* Use character glyphs, including for CSS-generated arrows and RTL pages. */
.text-arrow, .lines li::before {
  font-family: 'Satelity Arrows', Arial, sans-serif;
  font-variant-emoji: text;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
}

/* A quiet header that stays available as the page unfolds. */
header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 88px;
  padding-inline: 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, height .3s;
}
header.is-scrolled {
  height: 76px;
  background: rgb(8 20 25 / 92%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--line);
}
/* Frame the supplied transparent artwork without modifying the source file. */
.brand-mark { display: block; position: relative; width: 176px; max-width: 100%; aspect-ratio: 1200 / 190; overflow: hidden; }
.brand-mark > .logo { position: absolute; width: 113.833333%; max-width: none; height: auto; left: -6.916667%; top: -51.052632%; }
nav { display: flex; align-items: center; gap: 28px; font-size: 12px; }
nav a { color: #c2cecc; transition: color .2s; }
nav a:hover { color: var(--white); }
.nav-cta {
  border: 1px solid rgb(178 221 202 / 35%);
  border-radius: 100px;
  padding: 10px 18px;
  margin-inline-start: 4px;
  color: var(--white);
  transition: background .25s, border-color .25s;
}
.nav-cta:hover { background: rgb(178 221 202 / 9%); border-color: var(--mint); }
.menu { display: none; }

/* The original brand imagery becomes a slow-moving atmospheric layer. */
.hero {
  min-height: max(760px, 100svh);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 164px 0 150px;
  background: var(--deep);
}
.hero-visual, .scene-image { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-visual img, .scene-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; filter: brightness(.85) saturate(1.2); transition: opacity 1.2s ease; }
.hero-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(4 15 20 / 72%), transparent 190px); }
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video .hero-visual img { animation-play-state: paused; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(4 15 20 / 74%), rgb(4 15 20 / 10%) 80%), linear-gradient(0deg, var(--bg), transparent 28%);
}
.hero-content { width: 88%; max-width: 1320px; margin-inline: auto; }
.hero-content .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.hero-content .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.hero h1 { max-width: 1100px; }
.hero h1 span { color: var(--mint); }
.lead { color: #c1cecc; max-width: 570px; font-size: 17px; line-height: 1.8; margin: 30px 0 32px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: 54px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--mint);
  color: var(--deep);
  font-size: 12px;
  font-weight: 600;
  transition: background .25s, transform .3s var(--ease);
}
.button span { font-size: 20px; font-weight: 400; transition: transform .3s var(--ease); }
.button:hover { background: #d2efdf; transform: translateY(-2px); }
.button:hover span { transform: translate(2px, -2px); }
.textlink { display: inline-flex; align-items: center; gap: 22px; margin-inline-start: 28px; font-size: 12px; color: #d4dfdc; }
.textlink span { transition: transform .3s var(--ease); }
.textlink:hover { color: var(--mint); }
.textlink:hover span { transform: translateX(4px); }
.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding: 25px 0;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
}
.hero-bottom a { color: var(--white); font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.hero-bottom-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.hero-motion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid rgb(178 221 202 / 30%); border-radius: 50%; background: rgb(8 20 25 / 35%); color: var(--mint); cursor: pointer; transition: background .25s, border-color .25s; }
.hero-motion-toggle:hover { background: rgb(178 221 202 / 12%); border-color: var(--mint); }
.hero-motion-toggle[hidden], .hero-motion-toggle .motion-play, .is-motion-paused .hero-motion-toggle .motion-pause { display: none; }
.is-motion-paused .hero-motion-toggle .motion-play { display: block; }

/* Editorial spacing and clear hierarchy. */
.about { padding-block: var(--section-space); display: grid; grid-template-columns: 1fr 1fr; gap: 65px 12%; }
.about-copy { padding-top: 42px; color: var(--muted); }
.about-copy p { max-width: 540px; }
.about-copy .statement { color: var(--white); font-size: 23px; line-height: 1.5; letter-spacing: -.02em; margin-bottom: 24px; }
.values { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; border-top: 1px solid var(--line); padding-top: 30px; }
.values summary { display: flex; justify-content: space-between; gap: 16px; color: var(--mint); font-size: 13px; }
.values summary span { color: var(--muted); }
.values p { font-size: 12px; color: var(--muted); margin: 18px 0 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
details > summary > span:last-child { transition: transform .3s var(--ease); }
details[open] > summary > span:last-child:not(.number) { transform: rotate(45deg); }
.section-head { margin-bottom: 48px; }
.horizontal { display: flex; align-items: end; justify-content: space-between; gap: 8%; }
.horizontal > div, .horizontal > h2 { min-width: 0; }
.horizontal > p { max-width: 340px; flex-shrink: 0; color: var(--muted); margin: 0 0 4px; font-size: 14px; }
.sectors { padding-bottom: var(--section-space); }
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sector { position: relative; height: 450px; overflow: hidden; border-radius: 5px; background: var(--deep); isolation: isolate; }
.sector img { width: 100%; height: 100%; object-fit: cover; opacity: .83; }
.sector::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgb(5 16 22 / 93%) 100%); pointer-events: none; }
.sector > div { position: absolute; z-index: 1; bottom: 0; padding: 30px; }
.sector h3 { font-size: 27px; letter-spacing: -.035em; margin-bottom: 12px; }
.sector p { font-size: 13px; line-height: 1.8; color: #c0d1ce; margin-bottom: 0; }

/* Nested disclosures keep the detailed portfolio easy to scan. */
.portfolio { background: var(--deep); padding-block: var(--section-space); }
.portfolio .section-head { margin-bottom: 60px; }
.service { border-top: 1px solid var(--line); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service > summary { display: flex; gap: 32px; align-items: center; padding: 32px 0; }
.number { color: var(--mint); font-size: 11px; letter-spacing: .1em; flex-shrink: 0; }
.service h3 { font-size: clamp(25px, 2.5vw, 35px); }
.service > summary p { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.toggle { margin-inline-start: auto; width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--mint); font-size: 20px; }
.service > summary:hover h3, .solution-detail > summary:hover h4 { color: var(--mint); }
.solution-library { padding-block: 0 34px; padding-inline: 50px 0; }
.solution-detail { border-top: 1px solid var(--line); }
.solution-detail > summary { padding: 22px 0; display: flex; gap: 24px; align-items: center; }
.solution-detail > summary > div { min-width: 0; }
.solution-detail > summary > span { margin-inline-start: auto; flex-shrink: 0; font-size: 20px; color: var(--mint); }
.solution-detail h4 { font-size: 17px; letter-spacing: -.015em; line-height: 1.5; margin-bottom: 7px; }
.solution-detail summary p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 780px; margin: 0; }
.solution-body { max-width: 920px; padding-block: 8px 30px; padding-inline: 0 36px; color: var(--muted); font-size: 14px; }
.solution-body > p { max-width: 72ch; }
.solution-body .solution-title { color: var(--white); font-size: 21px; letter-spacing: -.025em; line-height: 1.5; }
.solution-body h5 { font-size: 10px; font-weight: 600; color: var(--mint); text-transform: uppercase; letter-spacing: .15em; margin: 28px 0 15px; }
.solution-body ul { padding-inline-start: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 35px; }
.solution-body li::marker { color: var(--mint); }
.difference { margin-block: 28px; border-inline-start: 1px solid var(--mint); padding-block: 1px; padding-inline: 22px 0; }
.difference h5 { margin-top: 12px; }
.difference p { margin-bottom: 12px; }
.solution-contact { display: inline-flex; align-items: center; gap: 30px; color: var(--mint); font-size: 12px; padding-bottom: 5px; border-bottom: 1px solid rgb(178 221 202 / 40%); }

/* Center every row, including incomplete rows of partner marks. */
.ecosystem { padding-block: var(--section-space); }
.ecosystem .horizontal > p { max-width: 330px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px; }
.logos > div { flex: 0 0 20%; min-width: 0; height: 110px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgb(210 235 229 / 7%); }
.logos img { width: 146px; max-width: 74%; height: 38px; object-fit: contain; opacity: .72; transition: opacity .35s, transform .6s var(--ease); }
.logos > div:hover img { opacity: 1; transform: translateY(-4px); }

.spotlight, .intelligence { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); }
.scene-image img { opacity: .75; }
.cyber-scene { display: block; width: 100%; height: 100%; pointer-events: none; }
.cyber-scene image { opacity: .98; filter: brightness(1.18); }
.cyber-flow { fill: none; stroke: #75f7ed; stroke-linecap: round; stroke-linejoin: round; }
.cyber-violet { stroke: #b7a1ff; }
.cyber-track { stroke-width: 1; opacity: .16; }
.cyber-halo { stroke-width: 7; opacity: .65; filter: url(#cyber-bloom); }
.cyber-pulse { stroke-width: 1.7; opacity: .9; }
.cyber-halo, .cyber-pulse { stroke-dasharray: 45 955; stroke-dashoffset: 0; }
.cyber-rack { opacity: .65; }
.cyber-rack .cyber-halo, .cyber-rack .cyber-pulse { stroke-dasharray: 85 915; }
.cyber-scene--ai .cyber-halo { filter: url(#ai-bloom); }
.cyber-core { fill: #67f8ea; filter: url(#ai-bloom); opacity: .07; }
.cyber-core-flow { opacity: .7; }
.cyber-core-flow .cyber-halo, .cyber-core-flow .cyber-pulse { stroke-dasharray: 110 890; }
.spotlight::after, .intelligence::after { content: ''; position: absolute; inset: 0; z-index: -1; }
.spotlight::after { background: linear-gradient(90deg, rgb(8 20 25 / 4%), rgb(8 20 25 / 12%) 28%, rgb(8 20 25 / 92%) 65%); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding-block: 125px; min-height: 650px; align-items: center; }
.split h2 { margin-bottom: 26px; }
.split p:not(.eyebrow) { color: #b4c6c3; }
.lines { list-style: none; padding: 10px 0 0; margin-bottom: 0; color: #b4c6c3; font-size: 13px; }
.lines li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.lines li::before { content: '↗︎'; color: var(--mint); display: inline-block; margin-inline-end: 14px; }
.intelligence { padding-block: var(--section-space); border-top: 1px solid var(--line); }
.intelligence::after { background: linear-gradient(90deg, #081419 22%, rgb(8 20 25 / 94%) 43%, rgb(8 20 25 / 30%) 76%, rgb(8 20 25 / 8%)); }
.intelligence-copy { width: 50%; max-width: 640px; }
.intelligence-copy h2 { margin-bottom: 28px; }
.intelligence-copy > p:not(.eyebrow) { color: var(--muted); }
.intelligence-steps { margin-top: 35px; }
.intelligence-steps details { border-top: 1px solid var(--line); }
.intelligence-steps summary { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; font-size: 13px; color: var(--mint); }
.intelligence-steps p { color: var(--muted); font-size: 13px; padding-inline-end: 20px; }
.intelligence-copy .fine { margin-top: 25px; }
.method { padding-block: var(--section-space); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; margin-top: 60px; }
.steps article { border-top: 1px solid var(--line); padding-top: 24px; }
.steps h3 { font-size: 24px; margin: 25px 0 12px; }
.steps p { color: var(--muted); font-size: 13px; max-width: 260px; margin-bottom: 0; }
.delivery { border-top: 1px solid var(--line); margin-top: 65px; padding-top: 35px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.delivery h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 10px; }
.delivery p { font-size: 13px; color: var(--muted); margin-bottom: 0; }

.compliance { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding-block: var(--section-space); border-top: 1px solid var(--line); }
.compliance h2 { margin-bottom: 28px; }
.compliance > div > p:not(.eyebrow) { color: var(--muted); max-width: 450px; }
.compliance .fine { margin-top: 26px; }
.standards details { border-bottom: 1px solid var(--line); }
.standards details:first-child { border-top: 1px solid var(--line); }
.standards summary { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 21px 0; font-size: 18px; }
.standards summary span { color: var(--mint); font-size: 20px; }
.standards small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.standards details p { font-size: 13px; color: var(--muted); padding-inline-end: 24px; }
.iso-section { padding: 35px 0 65px; }
.iso-section .section-head { margin-bottom: 25px; }
.iso-section h2 { font-size: 23px; letter-spacing: -.025em; color: #cad8d4; }
.iso-section .horizontal > p { font-size: 12px; max-width: 400px; }
.iso-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; }
.iso-card { padding: 20px 0; border-top: 1px solid var(--line); }
.iso-card h3 { font-size: 16px; letter-spacing: 0; line-height: 1.6; }
.iso-card p { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

.contact { position: relative; isolation: isolate; padding-block: var(--section-space); background: var(--deep); border-top: 1px solid var(--line); }
.contact::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(8 24 31 / 46%), rgb(8 24 31 / 12%) 62%, rgb(8 24 31 / 4%)); }
.contact .cyber-scene { transform: none; }
.cyber-scene--contact image { opacity: 1; filter: brightness(1.12); }
.cyber-scene--contact .cyber-halo { filter: url(#contact-bloom); }
.cyber-scene--contact .cyber-halo, .cyber-scene--contact .cyber-pulse { stroke-dasharray: 65 935; }
.cyber-node { fill: #b0fff3; opacity: .65; }
.cyber-node-glow { fill: #6ff9e3; filter: url(#contact-bloom); opacity: .3; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12%; }
.contact-layout > div { min-width: 0; }
.contact-intro { position: sticky; top: 125px; }
.contact-intro h2 { font-size: clamp(44px, 4.5vw, 68px); line-height: 1.15; }
.contact-intro p:not(.eyebrow) { color: var(--muted); margin: 28px 0; font-size: 14px; }
.contact-intro .button { margin-top: 8px; }
.email { display: block; width: fit-content; margin-top: 25px; font-size: 13px; color: var(--mint); overflow-wrap: anywhere; }
.contact-form-panel { border: 1px solid rgb(178 221 202 / 17%); border-top-color: rgb(178 221 202 / 40%); border-radius: 8px; padding: clamp(22px, 2.5vw, 36px); background: rgb(8 24 31 / 72%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.contact-form-panel h3 { font-size: 25px; margin-bottom: 32px; }
.contact-form-panel label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 22px; }
.contact-form-panel input, .contact-form-panel textarea, .contact-form-panel select {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 9px;
  padding: 12px 14px;
  background: #102127;
  border: 1px solid rgb(210 235 229 / 13%);
  border-radius: 4px;
  color: var(--white);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .25s, background .25s;
}
.contact-form-panel textarea { resize: vertical; min-height: 120px; }
.contact-form-panel select { text-overflow: ellipsis; }
.contact-form-panel :is(input, textarea, select):focus { outline: 1px solid var(--mint); outline-offset: 0; border-color: var(--mint); background: #13282e; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form-panel .fine { color: var(--muted); margin: 6px 0 25px; font-size: 10px; }
.contact-form-panel .privacy-notice a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
#form-status { font-size: 12px; color: var(--mint); margin: 20px 0 0; }
footer { display: grid; grid-template-columns: 1.3fr 1.15fr .8fr 1.35fr; gap: 35px; padding-top: 65px; padding-bottom: 25px; }
footer .brand-mark { width: 155px; }
footer h4 { font-size: 12px; color: #d6e1dd; margin-bottom: 15px; }
footer p { color: var(--muted); font-size: 11px; line-height: 1.9; margin-bottom: 0; }
.footer-brand p { margin-top: 20px; }
footer > div { min-width: 0; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.footer-links a { max-width: 100%; transition: color .2s; }
.footer-links a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 4px; }
.footer-email { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.footer-links .footer-meeting { display: inline-flex; align-items: center; gap: 12px; color: var(--mint); }
.footnote { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 23px; margin-top: 25px; color: var(--muted); font-size: 10px; }
.footnote a { float: right; color: #d6e1dd; }

/* Content remains visible until the motion observer is ready. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease) var(--reveal-delay, 0ms), transform 1s var(--ease) var(--reveal-delay, 0ms); }
  .reveal-ready.is-visible, .reveal-ready:focus-within { opacity: 1; transform: translateY(0); }
  .reveal-ready:focus-within { transition: none; }
  .hero-visual img { animation: ambient-drift 22s ease-in-out infinite alternate; }
  .sector img { transform: scale(1.06); transition: transform 1.5s var(--ease), opacity .6s; }
  .sector.is-visible img { transform: scale(1); }
  .sector:hover img { transform: scale(1.045); opacity: 1; }
  .scene-image img { transform: scale(1.07); transition: transform 2.2s var(--ease); }
  .image-scene.is-visible .scene-image img { transform: scale(1); }
  .cyber-scene { transform: scale(1.07); transition: transform 2.2s var(--ease); }
  .image-scene.is-visible .cyber-scene { transform: scale(1); }
  .cyber-halo, .cyber-pulse { animation: cyber-flow var(--flow-duration, 9s) linear var(--flow-delay, 0s) infinite; animation-play-state: paused; }
  .is-flowing .cyber-halo, .is-flowing .cyber-pulse { animation-play-state: running; }
  .cyber-core { animation: cyber-core-light 8s ease-in-out infinite; animation-play-state: paused; }
  .is-flowing .cyber-core { animation-play-state: running; }
  .cyber-node-glow { animation: cyber-node-light 6s ease-in-out var(--node-delay, 0s) infinite; animation-play-state: paused; }
  .is-flowing .cyber-node-glow { animation-play-state: running; }
  details[open] > :not(summary) { animation: disclosure-in .35s var(--ease); }
}
@keyframes ambient-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(-.6%, .4%, 0); }
}
@keyframes disclosure-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cyber-flow { to { stroke-dashoffset: -1000; } }
@keyframes cyber-core-light { 0%, 100% { opacity: .04; } 50% { opacity: .16; } }
@keyframes cyber-node-light { 0%, 100% { opacity: .18; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; transition: none; }
  .cyber-halo { display: none; }
  .cyber-pulse { stroke-dasharray: none; opacity: .16; }
}

@media (max-width: 1100px) {
  nav { gap: 18px; }
  .brand-mark { width: 160px; }
  .horizontal > p { max-width: 280px; }
  .sector { height: 410px; }
  .sector > div { padding: 24px; }
  .sector h3 { font-size: 24px; }
  .contact-layout { gap: 7%; }
}
@media (max-width: 1050px) { .logos > div { flex-basis: 25%; } }
@media (max-width: 960px) {
  header, header.is-scrolled { height: 76px; }
  .menu { display: inline-flex; gap: 18px; align-items: center; color: var(--white); border: 1px solid var(--line); background: transparent; padding: 7px 15px; border-radius: 100px; font-size: 12px; }
  .menu span { font-size: 19px; transition: transform .3s; }
  .menu[aria-expanded='true'] span { transform: rotate(45deg); }
  header:has(.menu[aria-expanded='true']) { background: #081419; }
  nav { display: none; position: absolute; top: 76px; inset-inline: 0; padding: 20px 6% 30px; background: #081419; border-bottom: 1px solid var(--line); max-height: calc(100svh - 76px); overflow-y: auto; font-size: 15px; }
  nav.open { display: flex; align-items: stretch; flex-direction: column; gap: 0; }
  nav a { padding: 12px 0; }
  nav .nav-cta { width: fit-content; margin: 15px 0 0; padding: 11px 20px; font-size: 12px; }
  .horizontal { gap: 5%; }
  .horizontal > p { max-width: 260px; font-size: 13px; }
  .about, .compliance { gap: 50px 7%; }
  .values { gap: 20px; }
  .sector-grid { gap: 16px; }
  .sector > div { padding: 20px; }
  .sector h3 { font-size: 22px; }
  .sector p { font-size: 12px; }
  .split { gap: 5%; }
  .steps { gap: 24px; }
}
@media (max-width: 760px) {
  :root { --section-space: 78px; }
  html { scroll-padding-top: 96px; }
  .wrap, .hero-content { width: 88%; }
  h1 { font-size: clamp(41px, 7.5vw, 59px); line-height: 1.13; letter-spacing: -.05em; }
  h2 { font-size: clamp(33px, 6.7vw, 44px); }
  .brand-mark { width: 145px; }
  .eyebrow { font-size: 9px; letter-spacing: .16em; margin-bottom: 22px; }
  .hero { min-height: max(760px, 94svh); padding: 150px 0 160px; }
  .hero-visual img, .hero-video { object-position: 63% center; }
  .hero::after { background: linear-gradient(90deg, rgb(4 15 20 / 70%), rgb(4 15 20 / 20%)), linear-gradient(0deg, var(--bg), transparent 42%); }
  .hero-content .eyebrow { font-size: 8px; margin-bottom: 30px; }
  .hero h1 { max-width: 620px; }
  .lead { font-size: 15px; margin: 25px 0 28px; max-width: 400px; }
  .desktop { display: none; }
  .textlink { display: flex; margin: 23px 0 0; width: fit-content; }
  .hero-bottom { padding-block: 22px; gap: 25px; }
  .hero-bottom > span { max-width: 55%; font-size: 7px; letter-spacing: .1em; line-height: 1.9; }
  .hero-bottom a { font-size: 10px; }
  .hero-bottom-actions { gap: 12px; }
  .about { grid-template-columns: 1fr; gap: 28px; }
  .about .section-head { margin-bottom: 0; }
  .about-copy { padding: 0; }
  .about-copy .statement { font-size: 21px; }
  .values { grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 15px; }
  .horizontal { display: block; }
  .horizontal > p, .ecosystem .horizontal > p { max-width: 480px; margin-top: 24px; font-size: 14px; }
  .section-head { margin-bottom: 34px; }
  .sector-grid { grid-template-columns: 1fr; gap: 20px; }
  .sector { height: 430px; }
  .sector > div { padding: 28px; max-width: 440px; }
  .sector h3 { font-size: 29px; }
  .sector p { font-size: 14px; }
  .portfolio .section-head { margin-bottom: 40px; }
  .service > summary { gap: 18px; padding: 27px 0; }
  .service > summary > div { min-width: 0; }
  .service h3 { font-size: 25px; }
  .service > summary p { font-size: 12px; }
  .toggle { width: 30px; height: 30px; font-size: 18px; }
  .solution-library { padding-inline-start: 0; }
  .solution-detail h4 { font-size: 16px; }
  .solution-detail summary p { font-size: 12px; }
  .solution-body { padding-inline-end: 0; }
  .solution-body ul { grid-template-columns: 1fr; }
  .solution-body .solution-title { font-size: 20px; }
  .logos { margin-top: 32px; }
  .logos > div { flex-basis: 33.333333%; height: 90px; }
  .logos img { height: 30px; max-width: 80%; }
  .split { grid-template-columns: 1fr; min-height: 740px; padding-top: 320px; padding-bottom: 70px; }
  .spacer { display: none; }
  .spotlight .scene-image { height: 420px; }
  .spotlight .scene-image img { object-position: 25% top; }
  .spotlight::after { background: linear-gradient(180deg, rgb(8 20 25 / 5%), rgb(8 20 25 / 14%) 28%, rgb(8 20 25 / 92%) 46%, #081419 65%); }
  .intelligence { padding-top: 320px; }
  .intelligence .scene-image { height: 420px; }
  .intelligence-copy { width: 100%; }
  .intelligence::after { background: linear-gradient(180deg, rgb(8 20 25 / 5%), rgb(8 20 25 / 12%) 160px, rgb(8 20 25 / 88%) 335px, #081419 420px); }
  .intelligence .scene-image img { object-position: 65% center; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px 26px; margin-top: 40px; }
  .steps h3 { font-size: 23px; margin-top: 18px; }
  .delivery { grid-template-columns: 1fr; gap: 24px; margin-top: 45px; }
  .compliance { grid-template-columns: 1fr; gap: 25px; }
  .iso-section { padding: 0 0 65px; }
  .iso-section h2 { font-size: 23px; }
  .iso-section .horizontal > p { font-size: 12px; margin-top: 15px; }
  .iso-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .iso-card h3 { font-size: 15px; }
  .contact-layout { grid-template-columns: 1fr; gap: 50px; }
  .contact-intro { position: static; }
  .contact-intro h2 { font-size: clamp(42px, 8vw, 58px); }
  .contact-form-panel input, .contact-form-panel select, .contact-form-panel textarea { font-size: 16px; }
  .contact-form-panel h3 { font-size: 24px; }
  footer { grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 50px; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 10px; }
  .footer-contact { grid-column: 1 / -1; }
  .footnote { margin-top: 5px; }
}
@media (max-width: 420px) {
  h1 { font-size: 39px; }
  .hero h1 br { display: none; }
  .hero h1 { max-width: 350px; }
  .hero h1 em { display: block; }
  .hero { min-height: 770px; }
  .hero-content .eyebrow { font-size: 7px; letter-spacing: .13em; gap: 8px; }
  .sector { height: 390px; }
  .service h3 { font-size: 23px; }
  .service > summary { gap: 13px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .button { gap: 24px; }
}
@media (max-width: 360px) {
  h1 { font-size: 35px; }
  .logos > div { flex-basis: 50%; }
  .steps { grid-template-columns: 1fr; }
  .hero-bottom > span { max-width: 48%; }
  .hero-bottom a { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready { opacity: 1 !important; transform: none !important; }
}

/* Languages are available in the header on desktop and mobile. */
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('assets/noto-sans-arabic-400.146b2193f4aee343.ttf?v=146b2193f4aee343') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('assets/noto-sans-arabic-600.f74ac4557632e30a.ttf?v=f74ac4557632e30a') format('truetype');
  font-weight: 600;
  font-display: swap;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
header { gap: 22px; }
header > a { flex-shrink: 0; }
header > nav { margin-inline-start: auto; }
.header-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.language-switcher { position: relative; }
.language-switcher > summary { display: flex; align-items: center; gap: 8px; padding: 10px 0 10px 10px; font-size: 11px; line-height: 1.5; color: #d4e2dd; border-radius: 5px; }
.language-switcher svg { flex-shrink: 0; }
.language-chevron { transition: transform .2s; opacity: .65; }
.language-switcher[open] .language-chevron { transform: rotate(180deg); }
.language-options { position: absolute; inset-block-start: calc(100% + 14px); inset-inline-end: 0; width: 178px; padding: 6px; border: 1px solid rgb(178 221 202 / 20%); border-radius: 10px; background: #102229; box-shadow: 0 18px 45px rgb(0 0 0 / 28%); direction: ltr; }
.language-options button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 11px 12px; background: transparent; border: 0; border-radius: 5px; color: #d9e4e0; font-family: Chivo, Arial, sans-serif; font-size: 12px; text-align: start; }
.language-options button > span { font-size: 9px; letter-spacing: .08em; opacity: .55; }
.language-options button > [data-language-auto] { font-size: inherit; letter-spacing: normal; opacity: 1; }
html[dir='rtl'] .language-options { inset-inline-end: auto; inset-inline-start: 0; }
.language-options button:hover, .language-options button:focus-visible { background: rgb(178 221 202 / 9%); }
.language-options button[aria-pressed='true'] { color: var(--mint); background: rgb(178 221 202 / 7%); }
.language-options button[lang='ar'] bdi { font-family: 'Noto Sans Arabic', Arial, sans-serif; font-size: 13px; }
.email, input[type='email'] { direction: ltr; unicode-bidi: isolate; }
.number { direction: ltr; unicode-bidi: isolate; }

/* Arabic uses real RTL flow, with logical spacing and untracked typography. */
html[lang='ar'] body { font-family: 'Noto Sans Arabic', Arial, sans-serif; line-height: 1.95; }
html[lang='ar'] :is(h1,h2,h3,h4,h5,.eyebrow,.hero-bottom) { letter-spacing: 0; }
html[lang='ar'] h1 { font-size: clamp(46px, 5.2vw, 79px); line-height: 1.45; }
html[lang='ar'] h2 { font-size: clamp(32px, 3.2vw, 49px); line-height: 1.55; }
html[lang='ar'] h3 { line-height: 1.65; }
html[lang='ar'] .eyebrow { font-size: 11px; line-height: 1.9; }
html[lang='ar'] .lead { line-height: 2; }
html[lang='ar'] .hero-content .eyebrow { font-size: 11px; }
html[lang='ar'] .hero-visual img, html[lang='ar'] .hero-video, html[lang='ar'] .scene-image img { scale: -1 1; }
html[lang='ar'] .cyber-scene { scale: -1 1; }
html[lang='ar'] .hero::after { background: linear-gradient(270deg, rgb(4 15 20 / 74%), rgb(4 15 20 / 10%) 80%), linear-gradient(0deg, var(--bg), transparent 28%); }
html[lang='ar'] .spotlight::after { background: linear-gradient(270deg, rgb(8 20 25 / 4%), rgb(8 20 25 / 12%) 28%, rgb(8 20 25 / 92%) 65%); }
html[lang='ar'] .intelligence::after { background: linear-gradient(270deg, #081419 22%, rgb(8 20 25 / 94%) 43%, rgb(8 20 25 / 30%) 76%, rgb(8 20 25 / 8%)); }
html[lang='ar'] .contact::after { background: linear-gradient(270deg, rgb(8 24 31 / 46%), rgb(8 24 31 / 12%) 62%, rgb(8 24 31 / 4%)); }
html[lang='ar'] .textlink:hover span { transform: translateX(-4px); }
html[lang='ar'] .footnote a { float: left; }
html[lang='ar'] .iso-card h3 { direction: ltr; text-align: right; }
html[lang='ar'] .contact-intro h2 { font-size: clamp(40px, 4.3vw, 62px); line-height: 1.5; }
html[lang='ar'] .iso-section h2 { font-size: 23px; }
html[lang='ar'] .iso-card h3 { font-size: 16px; }
html[lang='ar'] .contact-form-panel h3 { font-size: 23px; }
html[lang='ar'] .hero-bottom > span { font-size: 10px; }
@media (max-width: 1100px) {
  header { gap: 18px; }
  header > nav { gap: 14px; font-size: 11px; }
  .nav-cta { padding-inline: 14px; }
}
@media (max-width: 960px) {
  .header-controls { margin-inline-start: auto; }
  header > nav { margin-inline-start: 0; font-size: 15px; gap: 0; }
  .language-options { inset-inline-end: 0; }
}
@media (max-width: 760px) {
  html[lang='ar'] h1 { font-size: clamp(36px, 7vw, 54px); line-height: 1.55; }
  html[lang='ar'] h2 { font-size: clamp(30px, 6.3vw, 40px); line-height: 1.55; }
  html[lang='ar'] .hero-content .eyebrow { font-size: 10px; }
  html[lang='ar'] .hero::after { background: linear-gradient(270deg, rgb(4 15 20 / 70%), rgb(4 15 20 / 20%)), linear-gradient(0deg, var(--bg), transparent 42%); }
  html[lang='ar'] .spotlight::after { background: linear-gradient(180deg, rgb(8 20 25 / 5%), rgb(8 20 25 / 14%) 28%, rgb(8 20 25 / 92%) 46%, #081419 65%); }
  html[lang='ar'] .intelligence::after { background: linear-gradient(180deg, rgb(8 20 25 / 5%), rgb(8 20 25 / 12%) 160px, rgb(8 20 25 / 88%) 335px, #081419 420px); }
  html[lang='ar'] .contact-intro h2 { font-size: 40px; }
  html[lang='ar'] .iso-section h2 { font-size: 22px; }
  html[lang='ar'] .hero-bottom > span { font-size: 8px; }
}
@media (max-width: 420px) {
  header { gap: 12px; }
  .header-controls { gap: 12px; }
  .header-controls .menu { font-size: 0; gap: 0; padding: 6px 12px; }
  .header-controls .menu span { font-size: 21px; }
  .language-switcher > summary { padding-inline-start: 0; gap: 6px; }
  html[lang='ar'] .hero h1 em { display: inline; }
}

/* Institutional documents are reachable from every page. */
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; padding-top: 28px; margin-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.footer-legal a { padding-block: 5px; transition: color .2s; }
.footer-legal a:hover, .footer-legal a[aria-current='page'] { color: var(--mint); }
footer .footer-legal + .footnote { border-top: 0; margin-top: -20px; padding-top: 10px; }