@charset "UTF-8";
/* ==========================================================================
   DCT — components
   Header, hero, spine diagram, stack, partners, forms, footer.
   ========================================================================== */

/* --------------------------------------------------------------- header -- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 74px;
}

.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; }
/* One <picture> per theme; CSS decides which is visible. */
.logo__light { display: none; }
:root[data-theme="light"] .logo__light { display: block; }
:root[data-theme="light"] .logo__dark  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo__light { display: block; }
  :root:not([data-theme="dark"]) .logo__dark  { display: none; }
}
.on-dark .logo__light { display: none !important; }
.on-dark .logo__dark  { display: block !important; }

.nav { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.nav__link {
  position: relative;
  padding: .6rem .85rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-dim);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--t-fast);
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: .85rem;
  bottom: .35rem;
  height: 2px;
  background: var(--accent);
}

.tools { display: flex; align-items: center; gap: var(--s-1); }
.tool {
  --cut: 8px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tool:hover { color: var(--text); border-color: var(--rule-strong); }
.tool .icon { width: 19px; height: 19px; }
.tool--lang { width: auto; padding-inline: .8rem; font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; gap: .4rem; display: inline-flex; align-items: center; }

/* Theme button shows the icon of the mode it switches TO. */
.tool--theme .icon--moon { display: none; }
:root[data-theme="dark"] .tool--theme .icon--moon { display: block; }
:root[data-theme="dark"] .tool--theme .icon--sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool--theme .icon--moon { display: block; }
  :root:not([data-theme="light"]) .tool--theme .icon--sun  { display: none; }
}

.burger { display: none; }

@media (max-width: 900px) {
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-3) var(--gutter) var(--s-5);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-mid), transform var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: .9rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--rule); }
  .nav__link[aria-current="page"]::after { inset-inline: 0; bottom: -1px; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s-7), 11vw, var(--s-9));
}
.hero__grid {
  display: grid;
  gap: clamp(var(--s-5), 6vw, var(--s-8));
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}
.hero h1 { margin-bottom: var(--s-4); }
.hero .lede { margin-bottom: var(--s-5); }

/* Headline reveal: each line wipes up behind its own mask. */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; }

/* ------------------------------------------------ the spine (signature) -- */
/* Six operational systems, scattered, snapping onto one blue spine.
   This is the value proposition drawn as geometry — not a particle field. */
.spine {
  position: relative;
  display: grid;
  gap: 10px;
  padding-inline-start: 76px;
}
[dir="rtl"] .spine { padding-inline-start: 0; padding-inline-end: 76px; }

.spine__rail {
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 34px;
  width: 3px;
  background: var(--accent);
  transform-origin: top;
}
[dir="rtl"] .spine__rail { inset-inline-start: auto; inset-inline-end: 34px; }

.spine__cap {
  position: absolute;
  inset-inline-start: 26px;
  top: -13px;
  width: 0; height: 0;
  border-inline-start: 10px solid transparent;
  border-inline-end: 10px solid transparent;
  border-bottom: 14px solid var(--accent);
}
[dir="rtl"] .spine__cap { inset-inline-start: auto; inset-inline-end: 26px; }

.spine__row {
  --cut: 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: .7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: .9375rem;
  font-weight: 500;
}
/* The connector from the rail into each row. */
.spine__row::before {
  content: "";
  position: absolute;
  inset-inline-start: -42px;
  top: 50%;
  width: 42px;
  height: 1px;
  background: var(--rule-strong);
}
[dir="rtl"] .spine__row::before { inset-inline-start: auto; inset-inline-end: -42px; }

.spine__dot {
  width: 7px; height: 7px;
  background: var(--accent);
  flex: none;
}
.spine__meta {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: .6875rem;
  color: var(--text-faint);
  letter-spacing: .08em;
}
[dir="rtl"] .spine__meta { letter-spacing: 0; }

.spine__label {
  margin-top: var(--s-3);
  margin-inline-start: 76px;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
[dir="rtl"] .spine__label { margin-inline-start: 0; margin-inline-end: 76px; letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- stack -- */
/* Four delivery layers. Each sits slightly inset from the one below. */
.stack { display: grid; gap: 3px; }
.stack__layer {
  --cut: 14px;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  position: relative;
  transition: background var(--t-mid);
}
/* The leading accent edge is its own element so it can draw down on scroll. */
.stack__edge {
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  width: 3px;
  background: var(--accent);
}
.stack__layer:hover { background: var(--surface-2); }
.stack__n {
  font-family: var(--f-mono);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent-text);
  padding-top: .15rem;
}
.stack__layer h3 { margin-bottom: .35rem; }
.stack__layer p { color: var(--text-dim); font-size: .9375rem; margin: 0; }

/* ------------------------------------------------------------- partners -- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: var(--s-4);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee[data-paused="true"] .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-direction: reverse; }

.wordmark {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--t-fast);
  flex: none;
}
.marquee:hover .wordmark { color: var(--text-dim); }

.marquee__pause {
  position: absolute;
  inset-inline-end: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.partner-card { text-align: start; }
.partner-card .wordmark { font-size: 1.5rem; color: var(--text); }
.partner-card p { font-family: var(--f-mono); font-size: .75rem; color: var(--text-faint); margin: .4rem 0 0; }

/* ----------------------------------------------------------------- form -- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field .req { color: var(--accent-text); margin-inline-start: .25em; }
.field small { font-size: .8125rem; color: var(--text-faint); }

.field input, .field select, .field textarea {
  --cut: 8px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  padding: .8rem .95rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--t-fast);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #E5484D; border-width: 2px; }

.field__error {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 500; color: #E5484D;
}
.field__error .icon { width: 1rem; height: 1rem; }

.alert {
  --cut: 12px;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-strong);
  background: var(--surface-2);
}
.alert--error { border-color: #E5484D; }
.alert--ok { border-color: var(--accent); }
.alert .icon { width: 1.5rem; height: 1.5rem; }
.alert h2 { font-size: 1.125rem; margin-bottom: .25rem; }
.alert ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; font-size: .9375rem; }

/* --------------------------------------------------------------- footer -- */
.footer { padding-block: var(--s-7) var(--s-4); }
.footer__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.footer__brand { grid-column: 1 / -1; max-width: 30rem; }
@media (min-width: 780px) { .footer__brand { grid-column: span 2; } }
.footer__brand img { height: 40px; width: auto; margin-bottom: var(--s-3); }
.footer__brand p { color: var(--text-dim); font-size: .9375rem; }

.footer h2 {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}
[dir="rtl"] .footer h2 { letter-spacing: 0; text-transform: none; }

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .9375rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 28px;
  transition: color var(--t-fast);
}
.footer a:hover { color: var(--text); }
.footer .icon { width: 1.05rem; height: 1.05rem; color: var(--text-faint); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4);
  font-size: .8125rem;
  color: var(--text-faint);
}

/* ----------------------------------------------------------- CTA banner -- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .shell { position: relative; z-index: 1; }
/* A single blue wedge — the logo's arrow, blown up and bled off the edge. */
.cta-band::after {
  content: "";
  position: absolute;
  inset-block: -20%;
  inset-inline-end: -6%;
  width: 38%;
  background: var(--accent);
  opacity: .1;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}
[dir="rtl"] .cta-band::after { clip-path: polygon(100% 0, 0 50%, 100% 100%); }

/* ------------------------------------------------------- page hero (sub) -- */
.page-hero { padding-block: clamp(var(--s-6), 8vw, var(--s-8)) clamp(var(--s-5), 5vw, var(--s-7)); }
.page-hero h1 { margin-bottom: var(--s-3); }

.crumb {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--text-faint);
  margin-bottom: var(--s-4);
  display: flex;
  gap: .5rem;
  align-items: center;
}
.crumb a { color: var(--text-dim); text-decoration: none; }
.crumb a:hover { color: var(--text); }

/* ------------------------------------------------------------- reveals --- */
/* JS removes [data-reveal] once animated. No-JS keeps everything visible. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal="up"]   { transform: translateY(22px); }
.js [data-reveal="cut"]  { clip-path: inset(0 100% 0 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee__track { animation: none; transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; row-gap: var(--s-3); }
  .marquee__pause { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------- photos -- */
/* Every photograph is graded onto the brand navy ramp at build time, so the
   page never mixes a warm stock image with the palette. Same 45° cut. */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A thin blue rule along the leading edge ties photos to the shape language. */
.photo::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--accent);
  z-index: 1;
}

/* Full-bleed band with a statement laid over it. */
.photo-band {
  position: relative;
  min-height: clamp(22rem, 46vw, 34rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0B1328;
}
.photo-band .photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  clip-path: none;
}
.photo-band .photo::before { display: none; }
.photo-band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(11 19 40 / .94) 12%, rgb(11 19 40 / .55) 55%, rgb(11 19 40 / .3));
}
[dir="rtl"] .photo-band__veil { background: linear-gradient(to top, rgb(11 19 40 / .94) 12%, rgb(11 19 40 / .55) 55%, rgb(11 19 40 / .3)); }
.photo-band__body {
  position: relative;
  z-index: 2;
  padding-block: clamp(var(--s-5), 6vw, var(--s-7));
  max-width: 46rem;
}
.photo-band__body h2 { color: #fff; }
.photo-band__body p { color: #C6D2E4; }

/* Media beside text. */
.split {
  display: grid;
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > :first-child { order: 2; }
  .split--media-first > :last-child  { order: 1; }
}

/* Photo used as a group/service header — shorter crop. */
.photo--strip { aspect-ratio: 21 / 8; }

/* ---------------------------------------------------- hero diagram (SVG) -- */
/* Six systems collected onto one bus and delivered to one platform core.
   Geometry is generated per direction in PHP — never mirrored in CSS. */
.hero-svg { width: 100%; height: auto; display: block; }

.hero-svg .wire {
  stroke: var(--rule-strong);
  stroke-width: 1.25;
  fill: none;
}
.hero-svg .wire--trunk { stroke: var(--accent); stroke-width: 2; opacity: .55; }

.hero-svg .wire-pulse {
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  fill: none;
  opacity: 0;                 /* JS reveals these; without JS they stay hidden */
}
.hero-svg__joints rect { fill: var(--rule-strong); }

.hero-svg .chip__box {
  fill: var(--surface);
  stroke: var(--rule);
  stroke-width: 1;
}
.hero-svg .chip__tick { fill: var(--accent); }
.hero-svg .chip__label {
  fill: var(--text);
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
}
.hero-svg .chip__n {
  fill: var(--text-faint);
  font-family: var(--f-mono);
  font-size: 11px;
}

.hero-svg .core__edge { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.hero-svg .core__arrow { fill: var(--accent); }
.hero-svg .core__label {
  fill: var(--text);
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -0.02em;
}
[dir="rtl"] .hero-svg .core__label {
  font-family: var(--f-display);
  font-stretch: normal;
  letter-spacing: 0;
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-svg .wire-pulse { display: none; }
}

/* --------------------------------------------------------- partner marks -- */
.partner {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  color: var(--text-faint);
  transition: color var(--t-fast);
}
.marquee:hover .partner,
.partner-card .partner { color: var(--text-dim); }

.pmark { width: 30px; height: 30px; flex: none; }
.pmark--word {
  width: auto;
  height: 26px;
  display: inline-flex;
  align-items: center;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.partner__name {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
/* The wordmark fallback already reads as the name — don't print it twice. */
.pmark--word + .partner__name { display: none; }

.partner-card { align-items: flex-start; }
.partner-card .partner { color: var(--text); }
.partner-card .pmark { width: 38px; height: 38px; }
.partner-card .pmark--word { height: 34px; font-size: 1.6rem; }
.partner-card .partner__name { font-size: 1.25rem; }

.hero__figure { min-width: 0; }
@media (max-width: 999px) {
  .hero__figure { max-width: 34rem; }
}

/* Narrow phones: the language control drops its label and keeps the globe,
   so the header row fits 375px without the tools spilling past the gutter. */
@media (max-width: 520px) {
  .header__bar { gap: var(--s-2); }
  .tool--lang { width: 44px; padding-inline: 0; justify-content: center; }
  .tool--lang span { display: none; }
  .logo img { height: 28px; }
}

/* Inside the form the container is 44rem, so the generic 22rem column minimum
   collapses to a single column once the gap is counted. Pair the short fields. */
.form .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ------------------------------------------------------ animated backdrop -- */
/* Canvas sits behind everything in its host section. The host keeps its CSS
   ruled grid; the canvas only draws the packets travelling along it. */
.datagrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
[data-backdrop] { position: relative; isolation: isolate; }
[data-backdrop] > *:not(.datagrid) { position: relative; z-index: 1; }

/* ------------------------------------------------------- scroll progress -- */
.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.progress__bar {
  height: 100%;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
[dir="rtl"] .progress__bar { transform-origin: right center; }

/* --------------------------------------------------------- masked headings -- */
.mask-line { display: block; overflow: hidden; padding-bottom: .08em; }
.mask-line > span { display: block; }

/* ------------------------------------------------------------- refinements -- */
/* Cards lift on a spring rather than a linear slide, and the accent edge
   arrives from the leading corner so it reads as the same 45° cut. */
a.card { will-change: transform; }
a.card:hover h3 { color: var(--accent-text); }
.card h3 { transition: color var(--t-fast); }

/* Section headings get a hairline above them — the same rule as the eyebrow,
   run full width, so sections read as plates rather than floating text. */
.section-head--ruled { border-top: 1px solid var(--rule); padding-top: var(--s-4); }

/* Stat figures sit on a baseline rule so the row reads as a table of record.
   Figure and label share one alignment edge — the <bdi> in the markup keeps the
   numerals Latin-ordered without pulling the block away from its caption. */
.stat {
  border-top: 2px solid var(--rule-strong);
  padding-top: var(--s-3);
  display: grid;
  gap: .35rem;
  align-content: start;
  text-align: start;
}
.stat__n { font-variant-numeric: tabular-nums; line-height: 1; }
.stat__n bdi { unicode-bidi: isolate; }

/* Photographs inside a parallax host need the overflow clipped to the cut. */
[data-parallax] { overflow: hidden; }
[data-parallax] img { will-change: transform; }