@font-face { font-family: "Lato"; src: url("../fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-900.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-variable-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --factory-black: #030812;
  --factory-navy: #07172b;
  --equipment-blue: #294b9b;
  --signal-cyan: #5fd8ff;
  --cool-white: #f7fbff;
  --instrument-mute: #9bb0d0;
  --beacon-red: #5f7ce2;
  --beacon-coral: #78c9e8;
  --beacon-amber: #dbe8ff;
  --system-navy: #07101d;
  --system-line: rgba(255, 115, 93, 0.42);
  --glass-deep: rgba(4, 13, 25, 0.64);
  --glass-mid: rgba(9, 28, 50, 0.58);
  --glass-line: rgba(95, 216, 255, 0.28);
  --system-cyan: #5fd8ff;
  --system-blue: #6f8cff;
  --system-coral: #ff735d;
  --system-amber: #f2bd68;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: auto; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cool-white);
  background: var(--factory-black);
  font-family: "Lato", system-ui, sans-serif;
}

/* Brand guideline: Lato is the single type family. The authored weights below
   select 400 for reading, 700 for hierarchy and 900 for major chapter moments. */
body * { font-family: "Lato", system-ui, sans-serif !important; }

h1, h2, h3 {
  margin: 0 0 20px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { max-width: 12ch; font-size: clamp(3rem, 6.4vw, 5.6rem); }
h2 { max-width: 15ch; font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
p { max-width: 48ch; margin: 0 0 18px; color: var(--instrument-mute); font-size: clamp(1rem, 1.12vw, 1.14rem); line-height: 1.65; }

.eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--signal-cyan);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.journey-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
  background: var(--factory-black);
}

.journey-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 8, 18, 0.58), transparent 22%, transparent 68%, rgba(3, 8, 18, 0.52)),
    linear-gradient(90deg, rgba(3, 8, 18, 0.52), transparent 36%, transparent 74%, rgba(3, 8, 18, 0.22));
}

.journey-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--factory-black);
}

.journey-poster,
.journey-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  filter: saturate(0.88) contrast(1.09) brightness(0.9);
}
.journey-video { z-index: 1; }
.journey-video[hidden] { display: none; }

@media (min-width: 901px) {
  body:not(.media-degraded) .journey-poster { display: none; }
}

#content {
  position: relative;
  z-index: 4;
  height: 900vh;
  height: 900svh;
}
.journey-anchor { position: absolute; inset: 0 auto auto; }
.journey-copy { position: relative; }

.chapter {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 92px clamp(28px, 7vw, 120px) 70px;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.chapter.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.chapter__inner {
  position: relative;
  width: min(690px, 52vw);
  isolation: isolate;
  text-shadow: 0 2px 20px rgba(3, 8, 18, 0.94), 0 0 42px rgba(3, 8, 18, 0.86);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), padding 360ms cubic-bezier(0.22, 1, 0.36, 1), background-color 260ms ease, box-shadow 260ms ease;
}
.chapter__inner::before {
  content: "";
  position: absolute;
  inset: -80px -110px;
  z-index: -1;
  background: radial-gradient(ellipse at 40% 50%, rgba(3, 8, 18, 0.8), rgba(3, 8, 18, 0.42) 52%, transparent 75%);
}
.chapter--visibility { justify-content: flex-end; }
.chapter--visibility .chapter__inner { width: min(620px, 46vw); }
.chapter--visibility .chapter__inner::before { background: radial-gradient(ellipse at 60% 50%, rgba(3, 8, 18, 0.82), rgba(3, 8, 18, 0.4) 52%, transparent 75%); }
.chapter--services { align-items: flex-start; padding-top: clamp(132px, 17vh, 168px); }
.chapter--services .chapter__inner { width: min(720px, 53vw); }
.chapter--services h2 { max-width: 18ch; font-size: clamp(2.35rem, 3.5vw, 3.3rem); }
.chapter--proof .chapter__inner { width: min(760px, 55vw); }
.chapter--contact { justify-content: center; text-align: center; }
.chapter--contact .chapter__inner { width: min(700px, 64vw); }
.chapter--contact h2, .chapter--contact p { margin-left: auto; margin-right: auto; }

.client-register {
  margin-top: 26px;
  color: rgba(247, 251, 255, 0.78);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-transform: uppercase;
}
.service-register {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.proof-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 700px;
  margin: 30px 0 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(95, 216, 255, 0.24);
  border-bottom: 1px solid rgba(95, 216, 255, 0.16);
}
.proof-metrics div { padding: 0 18px; border-left: 1px solid rgba(155, 176, 208, 0.2); }
.proof-metrics div:first-child { padding-left: 0; border-left: 0; }
.proof-metrics dt { font: 600 clamp(1.8rem, 3vw, 2.8rem)/1 "Space Grotesk", sans-serif; letter-spacing: -0.04em; }
.proof-metrics dd { margin: 8px 0 0; color: var(--instrument-mute); font-size: 0.64rem; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; }

.text-link {
  display: inline-block;
  margin-top: 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--signal-cyan);
  color: var(--cool-white);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  --corporate-nav-rail:max(24px,calc((100vw - 1180px) / 2 + 24px));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  font-weight: 700;
  min-height: 64px;
  padding-block: 8px;
  padding-inline:var(--corporate-nav-rail);
  background: rgba(3, 8, 18, .56);
  box-shadow: 0 8px 20px rgba(3, 8, 18, .18);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);

}
.site-nav .brand { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; visibility: visible; color: var(--cool-white); font-family: "Lato", system-ui, sans-serif; letter-spacing: 0.02em; text-decoration: none; }
.site-nav .brand img { display: block; width: auto; height: 44px; }
.site-nav .brand span { color: #eff5f9; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.site-nav .brand small { display: block; margin-top: 4px; color: #8795a4; font-size: .43rem; font-weight: 700; letter-spacing: .15em; }
.site-nav__links { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: clamp(12px, 1.55vw, 25px); }
.site-nav__links a { position: relative; color: rgba(232, 241, 248, .7); font-size: .67rem; font-weight: 700; letter-spacing: .035em; text-decoration: none; transition: color .2s ease; }
.site-nav__links a::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; background: var(--signal-cyan); content: ""; transform: scaleX(0); transition: transform .2s ease; }
.site-nav__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.site-nav__actions .btn { padding: 12px 18px; font-size: .64rem; }

.btn {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid rgba(95, 216, 255, 0.5);
  border-radius: 2px;
  color: var(--cool-white);
  background: rgba(41, 75, 155, 0.17);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.btn:hover { border-color: var(--signal-cyan); background: rgba(95, 216, 255, 0.18); transform: translateY(-2px); }
.btn:focus-visible, .site-nav a:focus-visible, .text-link:focus-visible { outline: 2px solid var(--signal-cyan); outline-offset: 4px; }

.contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 26px; }
.contact-list a, .contact-list span { color: var(--cool-white); font-size: 0.95rem; text-decoration: none; }
.meeting-link { margin-top: 28px; }

.system-layer {
  position: fixed;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
}

.system-panel {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms ease, transform 540ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms;
}
.system-panel.is-visible { visibility: visible; opacity: 1; transform: none; }
.system-kicker {
  position: absolute;
  margin: 0;
  color: rgba(220, 242, 255, 0.76);
  font: 650 0.58rem/1.2 "Space Grotesk", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.system-kicker::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin: 0 9px 3px 0;
  background: var(--system-coral);
  box-shadow: 0 0 10px rgba(255, 115, 93, 0.5);
}

.system-panel--trust .system-kicker {
  bottom: 168px;
  left: 50%;
  transform: translateX(-50%);
}
.trust-rail {
  position: absolute;
  bottom: 62px;
  left: 50%;
  display: grid;
  width: min(1040px, calc(100vw - 96px));
  padding: 18px 22px 17px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--glass-line);
  border-bottom-color: rgba(111, 140, 255, 0.42);
  background-color: var(--glass-deep);
  background-image: linear-gradient(90deg, rgba(95, 216, 255, 0.045), transparent 18%, transparent 82%, rgba(111, 140, 255, 0.045));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34), 0 9px 0 rgba(4, 13, 25, 0.2);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  transform: translate3d(-50%, calc((var(--system-local, 0) - 0.5) * 8px), 0) perspective(900px) rotateX(8deg);
  transform-origin: center bottom;
}
.trust-rail::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(95, 216, 255, 0.08);
}
.trust-rail > span {
  position: relative;
  display: grid;
  min-height: 43px;
  padding: 3px 18px;
  place-content: center;
  border-left: 1px solid rgba(95, 216, 255, 0.12);
  color: rgba(247, 251, 255, 0.88);
  font: 590 0.72rem/1.2 "Space Grotesk", sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(95, 216, 255, 0.12);
}
.trust-rail > span:first-child { border-left: 0; }
.trust-rail small { display: block; margin-top: 3px; color: rgba(155, 176, 208, 0.68); font-size: 0.48rem; letter-spacing: 0.12em; }

.system-panel--services .system-kicker { top: 92px; left: 50%; transform: translateX(-50%); }
.service-system {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(840px, 76vw);
  height: min(500px, 68vh);
  transform: translate3d(-50%, -45%, 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.service-system::before {
  content: "";
  position: absolute;
  inset: 15% 21%;
  border: 1px solid rgba(95, 216, 255, 0.12);
  background: radial-gradient(circle at center, rgba(41, 75, 155, 0.12), transparent 68%);
  clip-path: polygon(50% 0, 100% 30%, 88% 86%, 50% 100%, 12% 86%, 0 30%);
}
.service-system:has([data-service-node="consulting"].is-focused) { transform: translate3d(-40%, -52%, 0); }
.service-system:has([data-service-node="integration"].is-focused) { transform: translate3d(-62%, -30%, 0); }
.service-system:has([data-service-node="reporting"].is-focused) { transform: translate3d(-35%, -25%, 0); }

.system-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 154px;
  height: 82px;
  place-content: center;
  border: 1px solid rgba(95, 216, 255, 0.5);
  color: var(--cool-white);
  background-color: var(--glass-deep);
  background-image: linear-gradient(145deg, rgba(95, 216, 255, 0.055), transparent 48%);
  box-shadow: 0 0 0 7px rgba(95, 216, 255, 0.035), 0 18px 48px rgba(0, 0, 0, 0.4), inset 0 0 28px rgba(95, 216, 255, 0.06);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  text-align: center;
  transform: translate(-50%, -50%);
}
.system-core::before,
.system-core::after { content: ""; position: absolute; width: 9px; height: 9px; border-color: var(--system-coral); }
.system-core::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.system-core::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.system-core strong { font: 650 1.05rem/1 "Space Grotesk", sans-serif; letter-spacing: 0.13em; }
.system-core span { margin-top: 8px; color: rgba(199, 224, 240, 0.68); font: 600 0.51rem/1.2 "Space Grotesk", sans-serif; letter-spacing: 0.13em; text-transform: uppercase; }

.system-connectors { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.system-connectors path {
  fill: none;
  stroke: rgba(95, 216, 255, 0.4);
  stroke-width: 1.3;
  stroke-dasharray: 7 7;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(95, 216, 255, 0.2));
}
.system-panel--services.is-visible .system-connectors path { animation: system-connector-draw 1.25s ease-out both, system-signal 3.4s ease-in-out 1.25s infinite; }

[data-service-node],
.system-node {
  position: absolute;
  z-index: 2;
  width: 210px;
  min-height: 94px;
  padding: 13px 58px 12px 14px;
  border: 1px solid rgba(95, 216, 255, 0.2);
  border-left: 2px solid rgba(111, 140, 255, 0.62);
  color: var(--cool-white);
  background-color: var(--glass-deep);
  background-image: linear-gradient(145deg, rgba(95, 216, 255, 0.055), transparent 52%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 5px 6px 0 rgba(9, 28, 50, 0.16);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  opacity: 0.78;
  transform: translate(-50%, -50%);
  transition: opacity 280ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-service-node].is-focused { border-color: rgba(95, 216, 255, 0.52); border-left-color: var(--system-coral); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), 5px 6px 0 rgba(95, 216, 255, 0.09), 0 0 28px rgba(95, 216, 255, 0.1); opacity: 1; transform: translate(-50%, -50%) translateY(-3px); }
.system-node__role { display: block; margin-bottom: 5px; color: var(--system-cyan); font: 650 0.48rem/1.1 "Space Grotesk", sans-serif; letter-spacing: 0.17em; text-transform: uppercase; }
.system-node__title { display: block; max-width: 14ch; font: 610 0.77rem/1.15 "Space Grotesk", sans-serif; letter-spacing: -0.01em; }
[data-service-node] p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: rgba(199, 224, 240, 0.64); font-size: 0.6rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
[data-service-node]::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 12px;
  width: 36px;
  height: 24px;
  opacity: 0.62;
}
[data-service-node="consulting"] { top: 18%; left: 16%; }
[data-service-node="implementations"] { top: 8%; left: 50%; }
[data-service-node="development"] { top: 18%; left: 84%; }
[data-service-node="integration"] { top: 50%; left: 88%; }
[data-service-node="reporting"] { top: 84%; left: 82%; }
[data-service-node="support"] { top: 92%; left: 50%; }
[data-service-node="hosting"] { top: 84%; left: 18%; }
[data-service-node="consulting"]::after { background: linear-gradient(var(--system-cyan), var(--system-cyan)) 7px 11px / 22px 1px no-repeat, radial-gradient(circle, var(--system-cyan) 0 2px, transparent 2.5px) 2px 7px / 12px 12px repeat-x; }
[data-service-node="implementations"]::after { background: linear-gradient(90deg, var(--system-cyan) 68%, transparent 68%) 0 2px / 100% 3px no-repeat, linear-gradient(90deg, var(--system-blue) 82%, transparent 82%) 0 10px / 100% 3px no-repeat, linear-gradient(90deg, var(--system-cyan) 100%, transparent 100%) 0 18px / 100% 3px no-repeat; }
[data-service-node="development"]::after { background: linear-gradient(var(--system-cyan), var(--system-cyan)) 5px 11px / 24px 1px no-repeat, linear-gradient(var(--system-cyan), var(--system-cyan)) 17px 4px / 1px 15px no-repeat, radial-gradient(circle, var(--system-blue) 0 2px, transparent 2.5px) 0 5px / 17px 17px repeat-x; }
[data-service-node="integration"]::after { background: radial-gradient(circle, var(--system-cyan) 0 2px, transparent 2.5px) 0 0 / 18px 12px repeat, linear-gradient(135deg, transparent 47%, var(--system-blue) 48% 51%, transparent 52%); }
[data-service-node="reporting"]::after { background: linear-gradient(to top, var(--system-blue) 0 42%, transparent 42%) 2px bottom / 6px 100% no-repeat, linear-gradient(to top, var(--system-cyan) 0 70%, transparent 70%) 14px bottom / 6px 100% no-repeat, linear-gradient(to top, var(--system-blue) 0 88%, transparent 88%) 26px bottom / 6px 100% no-repeat; }
[data-service-node="support"]::after { background: linear-gradient(115deg, transparent 0 19%, var(--system-cyan) 20% 23%, transparent 24% 39%, var(--system-cyan) 40% 43%, transparent 44% 60%, var(--system-cyan) 61% 64%, transparent 65%) center / 100% 70% no-repeat; }
[data-service-node="hosting"]::after { border: 1px solid var(--system-blue); background: linear-gradient(90deg, transparent 48%, rgba(95, 216, 255, 0.24) 49% 51%, transparent 52%), linear-gradient(transparent 48%, rgba(95, 216, 255, 0.24) 49% 51%, transparent 52%); }

.system-panel--proof { display: grid; align-content: start; justify-content: center; padding-top: 106px; }
.proof-strip {
  display: grid;
  width: min(820px, calc(100vw - 96px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--glass-line);
  background-color: var(--glass-deep);
  background-image: linear-gradient(145deg, rgba(95, 216, 255, 0.055), transparent 52%);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), 7px 8px 0 rgba(9, 28, 50, 0.16);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}
.proof-strip > div { position: relative; display: grid; min-height: 96px; padding: 18px 20px; align-content: center; border-left: 1px solid rgba(95, 216, 255, 0.14); }
.proof-strip > div:first-child { border-left: 0; }
.proof-strip > div::before { content: ""; position: absolute; top: -1px; left: 18px; width: 32px; height: 2px; background: var(--system-amber); box-shadow: 0 0 12px rgba(242, 189, 104, 0.34); }
.proof-strip strong { color: var(--cool-white); font: 620 clamp(1.65rem, 2.8vw, 2.45rem)/1 "Space Grotesk", sans-serif; letter-spacing: -0.045em; }
.proof-strip span { margin-top: 8px; color: rgba(199, 224, 240, 0.7); font: 600 0.55rem/1.35 "Space Grotesk", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.traceability-chain {
  display: grid;
  width: min(640px, calc(100vw - 96px));
  margin: 26px auto 0;
  grid-template-columns: auto minmax(48px, 1fr) auto minmax(48px, 1fr) auto;
  align-items: center;
  color: rgba(247, 251, 255, 0.82);
  font: 620 0.58rem/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.traceability-chain span { padding: 12px 15px; border: 1px solid rgba(95, 216, 255, 0.22); background: rgba(4, 13, 25, 0.64); backdrop-filter: blur(16px) saturate(118%); -webkit-backdrop-filter: blur(16px) saturate(118%); }
.traceability-chain i { position: relative; height: 1px; background: linear-gradient(90deg, rgba(95, 216, 255, 0.2), var(--system-cyan)); }
.traceability-chain i::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 1px solid var(--system-cyan); border-right: 1px solid var(--system-cyan); transform: rotate(45deg); }
.system-panel--proof.is-visible .traceability-chain i::before { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--system-amber); box-shadow: 0 0 10px rgba(242, 189, 104, 0.68); animation: traceability-pulse 2.6s ease-in-out infinite; }

@keyframes system-connector-draw { from { stroke-dashoffset: 120; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes system-signal { 0%, 100% { stroke-opacity: 0.32; } 50% { stroke-opacity: 0.72; } }
@keyframes traceability-pulse { 0%, 100% { opacity: 0.3; transform: translateX(0); } 50% { opacity: 1; transform: translateX(38px); } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trust-rail,
  .system-core,
  [data-service-node],
  .system-node,
  .proof-strip,
  .traceability-chain span,
  .checkpoint-card { background-color: rgba(4, 13, 25, 0.92); }
}

.checkpoint-layer { position: fixed; inset: 0; z-index: 12; pointer-events: none; perspective: 1200px; }
.chapter.is-visible.is-compact {
  align-items: center;
  justify-content: flex-start;
  padding: 92px 48px 70px;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.chapter:not(.is-visible) {
  visibility: hidden;
}
.chapter.is-visible.is-compact .chapter__inner {
  width: 240px;
  max-width: 240px;
  padding: 17px 18px 16px;
  border: 1px solid rgba(120, 201, 232, 0.16);
  border-left: 2px solid var(--equipment-blue);
  background: linear-gradient(140deg, rgba(7, 23, 43, 0.88), rgba(3, 8, 18, 0.72));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(12px);
  text-align: left;
  text-shadow: none;
}
.chapter.is-visible.is-compact .chapter__inner::before,
.chapter.is-visible.is-compact p,
.chapter.is-visible.is-compact dl,
.chapter.is-visible.is-compact .client-register,
.chapter.is-visible.is-compact .service-register,
.chapter.is-visible.is-compact .text-link,
.chapter.is-visible.is-compact .contact-list,
.chapter.is-visible.is-compact .meeting-link { display: none; }
.chapter.is-visible.is-compact .eyebrow {
  margin-bottom: 8px;
  color: var(--signal-cyan);
  font-size: 0.54rem;
  letter-spacing: 0.17em;
}
.chapter.is-visible.is-compact h1,
.chapter.is-visible.is-compact h2 {
  max-width: 20ch;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.18;
}
.checkpoint-system { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity 180ms ease, visibility 180ms; }
.checkpoint-system.is-active { visibility: visible; opacity: 1; }
.checkpoint-anchor {
  position: fixed;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(120, 201, 232, 0.68);
  border-radius: 50%;
  color: var(--cool-white);
  background: radial-gradient(circle, rgba(95, 216, 255, 0.24), rgba(7, 16, 29, 0.94) 62%);
  box-shadow: 0 0 0 6px rgba(41, 75, 155, 0.12), 0 0 26px rgba(95, 216, 255, 0.28);
  font: 500 1rem/1 "Space Grotesk", sans-serif;
  transform: translate(-50%, -50%);
}
.checkpoint-system.is-active .checkpoint-anchor { animation: checkpoint-beacon 1.25s ease-out 1; }
@keyframes checkpoint-beacon { 0% { box-shadow: 0 0 0 0 rgba(95, 216, 255, 0.42); } 100% { box-shadow: 0 0 0 16px transparent, 0 0 28px rgba(95, 216, 255, 0.28); } }

.checkpoint-connector {
  position: fixed;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 201, 232, 0.72), rgba(79, 107, 216, 0.22));
  box-shadow: 0 0 10px rgba(95, 216, 255, 0.14);
  opacity: 0;
  transform-origin: left center;
  transition: opacity 180ms ease 90ms;
}
.checkpoint-system.is-active .checkpoint-connector { opacity: 1; }

.checkpoint-card {
  position: fixed;
  z-index: 2;
  display: flex;
  width: min(380px, calc(100vw - 48px));
  min-height: 252px;
  padding: 23px 24px 21px;
  flex-direction: column;
  border: 1px solid var(--glass-line);
  border-left: 2px solid var(--system-coral);
  color: var(--cool-white);
  background-color: var(--glass-deep);
  background-image:
    linear-gradient(135deg, rgba(95, 216, 255, 0.055), transparent 38%),
    radial-gradient(circle at 100% 0, rgba(111, 140, 255, 0.04), transparent 48%);
  box-shadow: -8px 12px 0 rgba(9, 28, 50, 0.16), 0 26px 72px rgba(0, 0, 0, 0.46), inset 0 0 34px rgba(95, 216, 255, 0.035);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  opacity: 0;
  text-decoration: none;
  transform: translate3d(14px, 6px, -24px);
  transform-origin: 50% 50%;
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.checkpoint-card[data-side="left"] { transform: translate3d(-14px, 6px, -24px); }
.checkpoint-card.is-active,
.checkpoint-card.is-active[data-side="left"] { opacity: 1; transform: translateZ(0); pointer-events: auto; }
.checkpoint-card:hover, .checkpoint-card:focus-visible { border-color: var(--system-cyan); box-shadow: -6px 10px 0 rgba(9, 28, 50, 0.18), 0 32px 78px rgba(0, 0, 0, 0.54), 0 0 34px rgba(95, 216, 255, 0.1); transform: translate3d(0, -3px, 10px); outline: none; }
.checkpoint-card:focus-visible::after { content: ""; position: absolute; inset: 5px; border: 2px solid var(--system-amber); clip-path: inherit; pointer-events: none; }
.checkpoint-card__plane { position: absolute; inset: 8px -6px -7px 11px; z-index: -1; border: 1px solid rgba(95, 216, 255, 0.1); background: rgba(7, 16, 29, 0.42); transform: translateZ(-16px); }
.checkpoint-card__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: var(--signal-cyan); font: 650 0.58rem/1.2 "Space Grotesk", sans-serif; letter-spacing: 0.17em; text-transform: uppercase; }
.checkpoint-card__meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--system-coral); box-shadow: 0 0 12px rgba(255, 115, 93, 0.68); }
.checkpoint-card__question { max-width: 22ch; font: 570 clamp(1.3rem, 1.8vw, 1.62rem)/1.1 "Space Grotesk", sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
.checkpoint-card__title { margin-top: 14px; color: #91a9ff; font: 650 0.66rem/1.2 "Space Grotesk", sans-serif; letter-spacing: 0.13em; text-transform: uppercase; }
.checkpoint-card__body { margin-top: 8px; color: rgba(226, 236, 249, 0.78); font-size: 0.92rem; line-height: 1.5; }
.checkpoint-topology { display: flex; align-items: center; gap: 7px; margin-top: 15px; padding: 10px 0; border-top: 1px solid rgba(120, 201, 232, 0.12); border-bottom: 1px solid rgba(120, 201, 232, 0.12); }
.checkpoint-topology__node { flex: 0 1 auto; color: rgba(199, 224, 240, 0.76); font: 650 0.48rem/1.25 "Space Grotesk", sans-serif; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.checkpoint-topology i { flex: 1 1 18px; min-width: 10px; height: 1px; background: linear-gradient(90deg, rgba(95, 216, 255, 0.28), rgba(95, 216, 255, 0.86), rgba(95, 216, 255, 0.28)); }
.checkpoint-card__action { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--cool-white); font: 650 0.62rem/1 "Space Grotesk", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.checkpoint-card__action b { color: var(--signal-cyan); font-size: 1rem; }

.scroll-hint {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 8;
  color: var(--instrument-mute);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity 300ms ease;
}
.scroll-hint::after { content: ""; display: block; width: 1px; height: 32px; margin: 10px auto 0; background: linear-gradient(var(--signal-cyan), transparent); }
.demo-badge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 8;
  padding: 6px 12px;
  border: 1px solid rgba(155, 176, 208, 0.3);
  border-radius: 2px;
  color: var(--instrument-mute);
  background: rgba(3, 8, 18, 0.7);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#debug-hud {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 12;
  padding: 8px 10px;
  border: 1px solid rgba(95, 216, 255, 0.3);
  border-radius: 6px;
  color: var(--signal-cyan);
  background: rgba(3, 8, 18, 0.86);
  font: 12px/1.4 ui-monospace, monospace;
  white-space: pre;
}

body.no-webgl .journey-stage::after { background: linear-gradient(180deg, rgba(3, 8, 18, 0.62), rgba(3, 8, 18, 0.14) 50%, rgba(3, 8, 18, 0.62)); }

body.media-degraded .journey-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 38%, rgba(41, 75, 155, 0.2), transparent 42%),
    linear-gradient(135deg, rgba(3, 8, 18, 0.08), rgba(7, 23, 43, 0.38));
  pointer-events: none;
}

body.reduced-motion .chapter,
body.reduced-motion .checkpoint-anchor,
body.reduced-motion .checkpoint-card,
body.reduced-motion .system-panel,
body.reduced-motion .service-system,
body.reduced-motion [data-service-node],
body.reduced-motion .scroll-hint,
body.reduced-motion .btn {
  animation: none !important;
  animation-duration: 0s !important;
  transition: none !important;
  transition-duration: 0s !important;
}

@media (max-width: 900px) {
  .journey-video,
  .about-video,
  .services-journey__video,
  .industries-video,
  .cs-video,
  .insights-video,
  .careers-video,
  .contact-video { display: none !important; }
  body.mobile #content { height: 0; }
  .storyboard-layer[data-story-mode="sheet"] { position: relative; inset: auto; z-index: 4; overflow: visible; perspective: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-state { position: relative; inset: auto; display: block; min-height: 100svh; visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-state.is-active { opacity: 1; transform: none; }
  h1 { font-size: clamp(2.45rem, 11vw, 3.55rem); }
  h2 { font-size: clamp(2.05rem, 9.2vw, 3rem); }
  p { font-size: 0.98rem; line-height: 1.55; }
  .site-nav { min-height: 62px; padding: 10px 18px; }
  .site-nav .brand img { height: 32px; }
  .site-nav .brand span { display: block; font-size: .69rem; }
  .chapter { align-items: center; justify-content: flex-start; padding: 82px 24px 64px; text-align: left; }
  .chapter.chapter--services { align-items: flex-start; padding-top: 108px; }
  .chapter__inner, .chapter--visibility .chapter__inner, .chapter--services .chapter__inner, .chapter--proof .chapter__inner, .chapter--contact .chapter__inner { width: 100%; max-width: 560px; }
  .chapter--proof .chapter__inner { max-width: 226px; }
  .chapter--contact h2, .chapter--contact p { margin-left: 0; margin-right: 0; }
  .chapter__inner::before { inset: -66px -54px; background: radial-gradient(ellipse at 28% 50%, rgba(3, 8, 18, 0.88), rgba(3, 8, 18, 0.48) 52%, transparent 76%); }
  .service-register, .client-register { margin-top: 18px; font-size: 0.66rem; line-height: 1.65; }
  .chapter--services .service-register { display: none; }
  .proof-metrics { margin: 22px 0 16px; padding: 14px 0; }
  .proof-metrics div { padding: 0 9px; }
  .proof-metrics dt { font-size: 1.55rem; }
  .proof-metrics dd { font-size: 0.56rem; letter-spacing: 0.08em; }
  .text-link { font-size: 0.68rem; }
  .contact-list { justify-content: flex-start; gap: 7px 18px; }
  .journey-poster, .journey-video { object-position: 54% center; }
  .checkpoint-anchor { display: none; }
  .checkpoint-connector { display: none; }
  .chapter.is-visible.is-compact {
    align-items: flex-start;
    padding: 82px 20px 48px;
  }
  .chapter.is-visible.is-compact .chapter__inner {
    width: min(260px, calc(100vw - 40px));
    max-width: 260px;
    padding: 12px 14px 11px;
  }
  .chapter.is-visible.is-compact h1,
  .chapter.is-visible.is-compact h2 { font-size: 0.94rem; }
  .system-panel--trust .system-kicker {
    right: 16px;
    bottom: calc(46svh + 116px);
    left: auto;
    transform: none;
  }
  .trust-rail {
    right: 12px;
    bottom: calc(45svh + 22px);
    left: 12px;
    width: auto;
    padding: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    transform: translate3d(0, calc((var(--system-local, 0) - 0.5) * 5px), 0);
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
  }
  .trust-rail > span { min-height: 38px; padding: 3px 7px; border-left: 0; border-top: 1px solid rgba(95, 216, 255, 0.1); font-size: 0.58rem; }
  .trust-rail > span:nth-child(-n + 3) { border-top: 0; }
  .trust-rail small { font-size: 0.4rem; }
  .system-panel--services .system-kicker { top: 170px; left: 16px; transform: none; }
  .service-system,
  .service-system:has([data-service-node="consulting"].is-focused),
  .service-system:has([data-service-node="integration"].is-focused),
  .service-system:has([data-service-node="reporting"].is-focused) {
    top: 196px;
    right: 12px;
    bottom: 45svh;
    left: 12px;
    display: grid;
    width: auto;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: end;
    transform: none;
  }
  .service-system::before,
  .system-connectors { display: none; }
  .system-core {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 45px;
    grid-column: 1 / -1;
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
    transform: none;
  }
  .system-core strong { font-size: 0.78rem; }
  .system-core span { margin-top: 4px; font-size: 0.42rem; }
  [data-service-node],
  .system-node,
  [data-service-node].is-focused {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    min-height: 63px;
    padding: 8px 40px 8px 10px;
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
    opacity: 0.88;
    transform: none;
  }
  [data-service-node].is-focused { opacity: 1; transform: translateY(-1px); }
  .system-node__role { margin-bottom: 3px; font-size: 0.4rem; }
  .system-node__title { max-width: 16ch; font-size: 0.64rem; }
  [data-service-node] p { margin-top: 4px; font-size: 0.5rem; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: 1; }
  [data-service-node]::after { top: 9px; right: 8px; width: 27px; height: 18px; transform: scale(0.78); transform-origin: top right; }
  .system-panel--proof { padding: 168px 12px 0; justify-content: stretch; }
  .proof-strip {
    width: auto;
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
  }
  .proof-strip > div { min-height: 74px; padding: 13px 9px; }
  .proof-strip > div::before { left: 9px; width: 22px; }
  .proof-strip strong { font-size: clamp(1.2rem, 7vw, 1.8rem); }
  .proof-strip span { margin-top: 6px; font-size: 0.43rem; letter-spacing: 0.08em; }
  .traceability-chain { width: auto; margin-top: 14px; grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto; font-size: 0.45rem; }
  .traceability-chain span { padding: 9px 7px; backdrop-filter: blur(10px) saturate(112%); -webkit-backdrop-filter: blur(10px) saturate(112%); }
  .checkpoint-layer[data-checkpoint-mode="sheet"] .checkpoint-card {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 0;
    max-height: 45svh;
    padding: 24px 22px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 0;
    border-top: 2px solid var(--system-coral);
    clip-path: none;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(10px) saturate(112%);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
    transform: translate3d(0, 28px, 0);
  }
  .checkpoint-layer[data-checkpoint-mode="sheet"] .checkpoint-card.is-active { transform: none; }
  .checkpoint-layer[data-checkpoint-mode="sheet"] .checkpoint-card__plane { display: none; }
  .checkpoint-layer[data-checkpoint-mode="sheet"] .checkpoint-card__question { font-size: clamp(1.25rem, 6vw, 1.65rem); }
  .demo-badge { display: none; }
}

@media (max-width: 540px), (max-height: 720px) {
  .chapter { padding-top: 74px; padding-bottom: 46px; }
  .eyebrow { margin-bottom: 12px; }
  h1, h2 { margin-bottom: 14px; }
  .chapter--proof p { margin-bottom: 12px; }
  .client-register { display: none; }
  .proof-metrics { margin-top: 16px; }
  .system-panel--trust .system-kicker { bottom: calc(45svh + 105px); font-size: 0.48rem; }
  .trust-rail { bottom: calc(45svh + 14px); padding: 7px; }
  .trust-rail > span { min-height: 38px; font-size: 0.68rem; letter-spacing: 0.045em; }
  .trust-rail small { font-size: 0.52rem; letter-spacing: 0.07em; }
  .system-panel--services .system-kicker { top: 178px; font-size: 0.46rem; }
  .service-system,
  .service-system:has([data-service-node="consulting"].is-focused),
  .service-system:has([data-service-node="integration"].is-focused),
  .service-system:has([data-service-node="reporting"].is-focused) { top: 172px; gap: 4px; }
  .system-core { height: 38px; }
  [data-service-node],
  .system-node,
  [data-service-node].is-focused { min-height: 52px; padding: 7px 9px; }
  .system-node__title { max-width: none; font-size: 0.68rem; line-height: 1.15; }
  [data-service-node] p,
  [data-service-node]::after { display: none; }
  .system-panel--proof { padding-top: 150px; }
  .proof-strip > div { min-height: 76px; padding: 10px 6px; }
  .proof-strip span { font-size: 0.56rem; letter-spacing: 0.035em; }
  .traceability-chain { margin-top: 10px; font-size: 0.56rem; letter-spacing: 0.035em; }
  .traceability-chain span { padding: 8px 5px; }
}

@media (max-height: 720px) and (max-width: 900px) {
  .system-panel--services .system-kicker { display: none; }
  .service-system,
  .service-system:has([data-service-node="consulting"].is-focused),
  .service-system:has([data-service-node="integration"].is-focused),
  .service-system:has([data-service-node="reporting"].is-focused) { top: 174px; }
  .system-core { height: 34px; }
  [data-service-node],
  .system-node,
  [data-service-node].is-focused { min-height: 44px; padding: 6px 9px; }
  .system-node__role { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chapter,
  .checkpoint-anchor,
  .checkpoint-card,
  .system-panel,
  .service-system,
  [data-service-node],
  .system-connectors path,
  .traceability-chain i::before { animation: none !important; transition-duration: 0s !important; }
  .system-connectors path { stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.46; }
  .traceability-chain i::before { opacity: 1; transform: none; }
  .trust-rail { transform: translate3d(-50%, 0, 0) perspective(900px) rotateX(8deg); }
  .system-layer[data-system-mode="sheet"] .trust-rail { transform: none; }
}
body.reduced-motion .chapter { transition: none; }
body.reduced-motion .checkpoint-card.is-active { transform: none; }
body.reduced-motion .system-connectors path,
.system-layer[data-system-motion="reduced"] .system-connectors path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 0.46; }
body.reduced-motion .traceability-chain i::before,
.system-layer[data-system-motion="reduced"] .traceability-chain i::before { animation: none; opacity: 1; transform: none; }
body.reduced-motion .trust-rail,
.system-layer[data-system-motion="reduced"] .trust-rail { transform: translate3d(-50%, 0, 0) perspective(900px) rotateX(8deg); }
body.reduced-motion .system-layer[data-system-mode="sheet"] .trust-rail,
.system-layer[data-system-motion="reduced"][data-system-mode="sheet"] .trust-rail { transform: none; }

/* Approved eleven-state video storyboard */
#content { height: 1080svh; }
.immersive-footer {
  position: relative;
  z-index: 12;
  min-height: 104px;
  padding: 18px clamp(28px, 4.6vw, 118px);
  background: rgba(7, 23, 43, 0.66);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}
.immersive-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(26px, 3vw, 62px);
  max-width: 2360px;
  margin: 0 auto;
}
.immersive-footer__brand { display: inline-flex; align-items: center; gap: 13px; color: var(--cool-white); text-decoration: none; }
.immersive-footer__brand img { width: 48px; height: 48px; }
.immersive-footer__brand span { font-size: .9rem; font-weight: 900; letter-spacing: -.02em; line-height: .94; }
.immersive-footer__brand small { display: block; margin-top: 5px; color: #aebfd3; font-size: .38rem; font-weight: 700; letter-spacing: .13em; }
.immersive-footer__contacts { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2vw, 42px); color: #e4edf7; font-size: clamp(.72rem, .86vw, .88rem); font-weight: 700; white-space: nowrap; }
.immersive-footer__contacts a { color: inherit; text-decoration: none; }
.immersive-footer__contacts a:hover { color: var(--signal-cyan); }
.immersive-footer__syspro { width: clamp(114px, 7vw, 150px); justify-self: end; }

/* Light variant — used on white-theme pages (About, Services, Careers,
   Contact) so the footer reads correctly against a light background
   instead of the dark storyboard footer built for the video pages.
   Frosted glass: enough blur to keep the brand text legible over any
   photo/video behind it, but the background should still read through. */
.immersive-footer--light {
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 -16px 40px rgba(8, 35, 68, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
}
/* Preserve the glass across the footer, but give the dark S-Consulting mark
   a clean, local reading surface whenever the video/frame behind its left
   edge turns blue or busy. The fade ends before the contact details. */
.immersive-footer--light::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 13%, rgba(255,255,255,.42) 25%, rgba(255,255,255,.1) 35%, transparent 46%);
  content: "";
}
.immersive-footer--light .immersive-footer__inner { position: relative; z-index: 1; }
.immersive-footer--light .immersive-footer__brand { color: #06172c; text-shadow: 0 1px 12px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9); }
.immersive-footer--light .immersive-footer__brand small { color: #1c3455; text-shadow: 0 1px 12px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9); }
.immersive-footer--light .immersive-footer__contacts { color: #071527; text-shadow: 0 1px 12px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9); }
.immersive-footer--light .immersive-footer__contacts a:hover { color: #3f63c8; }
.immersive-footer--light .immersive-footer__syspro { filter: brightness(0) saturate(100%); opacity: .8; }

/* Journey-dock mode — Services and Careers pin their sections as fixed,
   full-viewport frames driven by scroll progress (see services-immersive.js /
   careers-immersive.js), so a normal in-flow footer would either sit
   underneath the pinned frame or force a layout change to the approved
   scrub choreography. Instead the footer docks fixed to the bottom edge and
   is revealed only once the journey's own progress reaches its end,
   matching how the closing CTA panel already reveals itself. */
.immersive-footer--journey-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s;
  pointer-events: none;
}
.immersive-footer--journey-dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.journey-stage::after {
  background:
    linear-gradient(180deg, rgba(2, 7, 17, .64), transparent 18%, transparent 72%, rgba(2, 7, 17, .62)),
    linear-gradient(90deg, rgba(2, 7, 17, .68), transparent 42%, transparent 82%, rgba(2, 7, 17, .18));
}
.journey-video { filter: saturate(.8) contrast(1.12) brightness(.68); }
.storyboard-layer { position: fixed; inset: 0; z-index: 7; overflow: hidden; perspective: 1200px; }
.story-state { position: absolute; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; }
.story-state.is-active {
  visibility: visible;
  opacity: var(--story-visibility, 1);
  pointer-events: auto;
  transform: translate3d(0, calc(var(--story-shift, 0) * 12px), 0);
}
.story-brand { position: absolute; top: 22px; left: clamp(24px, 4vw, 58px); z-index: 5; display: flex; align-items: center; gap: 10px; color: #eff5f9; font: 650 .68rem/1 "Space Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.story-brand img { width: 31px; height: 31px; filter: drop-shadow(0 0 9px rgba(105,220,255,.2)); }
.story-brand small { display: block; margin-top: 4px; color: #708193; font-size: .44rem; letter-spacing: .19em; }
.story-index { position: absolute; top: 31px; right: clamp(180px, 15vw, 230px); z-index: 5; color: #8295a8; font: 600 .58rem/1 "Space Grotesk", sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.story-index b { margin-right: 10px; color: var(--signal-cyan); }
.story-eyebrow { margin: 0 0 15px; color: var(--signal-cyan); font: 650 .62rem/1 "Space Grotesk", sans-serif; letter-spacing: .21em; text-transform: uppercase; }

.story-hero-copy { position: absolute; top: 24%; left: 7%; z-index: 4; width: 44%; text-shadow: 0 8px 30px rgba(2,7,17,.9); }
.story-hero-copy h1 { max-width: none; margin: 0; font: 700 clamp(3rem, 5.25vw, 5.6rem)/.88 "Lato", system-ui, sans-serif; letter-spacing: -.074em; }
.story-hero-copy h1 span { display: block; }
.story-hero-copy h1 span:last-child { color: var(--signal-cyan); }
.story-hero-copy > p { max-width: 37ch; margin-top: 22px; color: #b2c0cc; font-size: clamp(.88rem, 1.1vw, 1.08rem); line-height: 1.55; }
.story-enter { display: inline-flex; align-items: center; gap: 14px; margin-top: 6px; color: #f1f7fa; font: 700 .58rem/1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.story-enter i { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--signal-cyan); border-radius: 50%; color: var(--signal-cyan); font-style: normal; }
.story-hero-art { position: absolute; top: 8%; right: -5%; width: 73%; height: 84%; background: url("../img/optimized/hero-header-extended-v1.webp") right center / contain no-repeat; opacity: .9; filter: drop-shadow(0 28px 62px rgba(0,0,0,.5)); -webkit-mask-image: radial-gradient(ellipse 73% 82% at 69% 50%, #000 35%, rgba(0,0,0,.93) 57%, rgba(0,0,0,.48) 75%, transparent 100%); mask-image: radial-gradient(ellipse 73% 82% at 69% 50%, #000 35%, rgba(0,0,0,.93) 57%, rgba(0,0,0,.48) 75%, transparent 100%); transform: translate3d(calc(var(--story-shift, 0) * -8px), calc(var(--story-shift, 0) * 3px), 0) scale(1.025); }

.story-trust { position: absolute; inset: 16% 6% 8%; z-index: 3; display: grid; grid-template-columns: minmax(260px, .7fr) minmax(480px, 1.3fr); gap: clamp(34px, 5vw, 92px); align-items: center; }
.story-trust__intro { align-self: center; }
.story-trust__intro h2, .story-service-context h2, .story-proof h2, .story-contact h2 { margin: 0; font: 700 clamp(2.25rem, 3.6vw, 4.4rem)/.91 "Unbounded", sans-serif; letter-spacing: -.066em; }
.story-trust__intro > p:last-child, .story-service-context > p:last-child, .story-contact__intro > p:last-child { margin-top: 18px; color: #9aabb9; font-size: .9rem; line-height: 1.5; }
.story-langeberg-proof { position: relative; display: block; min-height: min(57vh, 540px); overflow: hidden; isolation: isolate; color: #f4f8fb; border: 1px solid rgba(151, 220, 177, .6); background: #163b2a; box-shadow: 0 32px 76px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .14); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); text-decoration: none; transform: translate3d(0, 0, 0); transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease; }
.story-langeberg-proof__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05) brightness(.72); transform: scale(1.045); transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter .5s ease; }
.story-langeberg-proof__field { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 26, 16, .95) 0%, rgba(8, 37, 22, .75) 42%, rgba(8, 30, 18, .14) 76%), linear-gradient(0deg, rgba(3, 14, 9, .76), transparent 52%); }
.story-langeberg-proof__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; width: min(78%, 450px); min-height: min(57vh, 540px); padding: clamp(28px, 4vw, 52px); }
.story-langeberg-proof__logo { width: min(280px, 76%); max-height: 96px; object-fit: contain; object-position: left center; filter: brightness(1.12) saturate(.86); }
.story-langeberg-proof__location { margin-top: 28px; color: #d4f4d3; font: 700 .58rem/1 "Space Grotesk", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.story-langeberg-proof strong { max-width: 14ch; margin-top: 13px; font: 700 clamp(1.45rem, 2.3vw, 2.5rem)/.98 "Unbounded", sans-serif; letter-spacing: -.06em; }
.story-langeberg-proof__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #e7ffe6; font: 700 .58rem/1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.story-langeberg-proof__cta i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(224, 255, 221, .74); border-radius: 50%; font-style: normal; }
.story-langeberg-proof:hover, .story-langeberg-proof:focus-visible { border-color: #d3ffd1; box-shadow: 0 42px 92px rgba(0, 0, 0, .56), 0 0 58px rgba(122, 218, 139, .22), inset 0 1px rgba(255, 255, 255, .18); transform: translateY(-7px); }
.story-langeberg-proof:hover .story-langeberg-proof__scene, .story-langeberg-proof:focus-visible .story-langeberg-proof__scene { filter: saturate(.98) contrast(1.08) brightness(.8); transform: scale(1.1); }
.story-langeberg-proof:focus-visible { outline: 2px solid #d3ffd1; outline-offset: 6px; }

.story-service-context { position:absolute; top:22%; left:6%; z-index:3; width:32%; text-shadow:0 7px 28px rgba(2,7,17,.92); }
.story-state--left .story-service-context { right:6%; left:auto; width:30%; }
.story-state--centre .story-service-context { top:14%; width:42%; }
.story-instrument { --tilt-x:0deg; --tilt-y:0deg; --art-x:0px; --art-y:0px; --glare-x:72%; --glare-y:24%; position:absolute; top:21%; right:6%; z-index:4; display:block; width:min(760px,56%); color:#f4f8fb; text-decoration:none; transform-style:preserve-3d; }
.story-state--left .story-instrument{right:auto;left:6%}.story-state--centre .story-instrument{top:42%;right:auto;left:21%;width:73%}
.story-instrument__housing { position:absolute; z-index:0; inset:-26px -34px -30px; display:block; pointer-events:none; border:0; background-color:rgba(9,11,14,.42); box-shadow:0 34px 82px rgba(0,0,0,.42),inset 0 1px rgba(244,246,248,.1),inset 0 0 44px rgba(184,190,196,.035); backdrop-filter:blur(18px) saturate(.92); -webkit-backdrop-filter:blur(18px) saturate(.92); clip-path:polygon(22px 0,calc(100% - 29px) 0,100% 29px,100% calc(100% - 18px),calc(100% - 18px) 100%,25px 100%,0 calc(100% - 25px),0 22px); transform:perspective(1100px) rotateX(calc(var(--tilt-x) * .74)) rotateY(calc(var(--tilt-y) * .74)) translateZ(-18px); transition:transform .4s cubic-bezier(.2,.85,.25,1),background-color .25s ease; }
.story-instrument__housing::before { content:""; position:absolute; inset:12px; border:0; clip-path:inherit; }
.story-instrument__housing::after { content:""; position:absolute; inset:0; background-color:rgba(225,229,232,.018); opacity:.52; }
.story-instrument__depth { position:relative; z-index:1; display:block; min-height:clamp(330px,42vh,460px); overflow:hidden; padding:5% 5% 4%; border:0; background:radial-gradient(circle at 85% 8%,rgba(105,220,255,.18),transparent 34%),linear-gradient(145deg,rgba(10,26,46,.92),rgba(3,10,21,.88)); box-shadow:0 30px 75px rgba(0,0,0,.5),0 0 56px rgba(58,139,214,.14),inset 0 0 0 1px rgba(255,255,255,.07); clip-path:polygon(15px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 13px),calc(100% - 13px) 100%,18px 100%,0 calc(100% - 18px),0 15px); transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.85,.25,1),box-shadow .25s ease; }
.story-instrument__depth::before { content:""; position:absolute; inset:0; z-index:4; padding:1px; background:conic-gradient(from calc((var(--story-progress,.5) + var(--edge-hover-offset,0)) * 1turn),transparent 0 78%,rgba(227,243,250,.06) 83%,rgba(238,250,255,.92) 88%,rgba(189,219,232,.16) 93%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; clip-path:inherit; filter:blur(.12px); pointer-events:none; }
.story-state--centre .story-instrument__depth{min-height:clamp(300px,38vh,410px)}
.story-instrument__depth::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(3,10,21,.98) 0%,rgba(3,10,21,.9) 34%,rgba(3,10,21,.12) 64%,rgba(3,10,21,.01)),linear-gradient(0deg,rgba(3,10,21,.66),transparent 54%); pointer-events:none; }
.story-instrument:hover .story-instrument__depth,.story-instrument:focus-visible .story-instrument__depth{box-shadow:0 38px 90px rgba(0,0,0,.58),0 0 64px rgba(58,180,231,.2),inset 0 0 0 1px rgba(255,255,255,.1)}
.story-instrument:hover .story-instrument__housing,.story-instrument:focus-visible .story-instrument__housing{background-color:rgba(13,16,20,.48);}
.story-instrument:focus-visible{outline:2px solid var(--signal-cyan);outline-offset:6px}
.story-instrument__art { position:absolute; inset:-5%; z-index:0; overflow:hidden; opacity:.86; mix-blend-mode:screen; filter:saturate(1.1) contrast(1.08); transform:translate3d(var(--art-x),var(--art-y),20px) scale(1.08); transition:transform .5s cubic-bezier(.2,.85,.25,1); }
.story-instrument__art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.story-instrument__glare{position:absolute;inset:-28%;z-index:2;background:radial-gradient(circle at var(--glare-x) var(--glare-y),rgba(218,248,255,.2),rgba(105,220,255,.055) 11%,transparent 30%);mix-blend-mode:screen;pointer-events:none;transform:translateZ(46px)}
.story-instrument__depth>:not(.story-instrument__art):not(.story-instrument__glare){position:relative;z-index:3;transform:translateZ(36px)}
.story-instrument__count{display:block;color:var(--signal-cyan);font:650 .6rem/1 "Space Grotesk",sans-serif;letter-spacing:.2em}.story-instrument__title{display:block;max-width:72%;margin-top:16px;font:680 clamp(1.65rem,2.5vw,3rem)/.96 "Unbounded",sans-serif;letter-spacing:-.052em}.story-instrument__description{display:block;max-width:66%;margin-top:13px;color:#b1bec9;font-size:.92rem;line-height:1.5}
.story-question{display:flex!important;align-items:center;justify-content:space-between;gap:20px;margin-top:25px;padding:18px;background-color:rgba(15,25,31,.36);border:1px solid rgba(205,220,228,.22);box-shadow:10px 12px 0 rgba(7,12,17,.11),inset 0 1px rgba(245,249,251,.08);backdrop-filter:blur(10px) saturate(.96);-webkit-backdrop-filter:blur(10px) saturate(.96);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);font:780 clamp(1rem,1.38vw,1.4rem)/1.27 "Unbounded",sans-serif;letter-spacing:-.044em}.story-question>span{max-width:84%}.story-question small{display:block;margin-bottom:8px;color:var(--signal-cyan);font:700 .52rem/1 "Space Grotesk",sans-serif;letter-spacing:.18em;text-transform:uppercase}.story-question>b{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border:1px solid var(--system-coral);border-radius:50%;color:var(--system-coral);font:500 1rem/1 "Space Grotesk",sans-serif}

/* The featured case study deliberately uses the same instrument card system
   as the seven default homepage service cards; only its live orchard image
   and Langeberg-specific copy differ. */
.story-trust .story-langeberg-card{position:relative;top:auto;right:auto;left:auto;width:auto;min-height:0;align-self:center}.story-trust .story-langeberg-card .story-instrument__depth{min-height:clamp(330px,42vh,460px)}.story-trust .story-langeberg-card .story-instrument__art{opacity:1;mix-blend-mode:normal;filter:saturate(1.02) contrast(1.05) brightness(.92)}.story-trust .story-langeberg-card .story-instrument__art img{object-position:68% center}.story-trust .story-langeberg-card .story-instrument__depth::after{background:linear-gradient(90deg,rgba(4,30,16,.93) 0%,rgba(5,38,20,.76) 37%,rgba(4,29,15,.18) 70%,rgba(4,22,13,.03)),linear-gradient(0deg,rgba(2,18,9,.58),transparent 55%)}.story-trust .story-langeberg-card .story-instrument__housing{background-color:rgba(10,25,15,.5)}.story-trust .story-langeberg-card .story-question{border-color:rgba(203,241,193,.28);background-color:rgba(6,31,16,.44)}.story-trust .story-langeberg-card .story-question small,.story-trust .story-langeberg-card .story-instrument__count{color:#c8f5be}.story-trust .story-langeberg-card .story-question>b{border-color:#c8f5be;color:#c8f5be}

.story-proof { position:absolute; inset:15% 5.5% 6%; z-index:4; display:block; color:#f4f8fb; text-decoration:none; }
.story-proof h2{width:70%}.story-proof__scope{margin-top:14px;color:#91a5b7;font:600 .56rem/1.3 "Space Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase}.story-proof__evidence{position:absolute;inset:31% 0 0;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;gap:9px}.story-evidence{position:relative;overflow:hidden;background:#07111d;box-shadow:0 25px 54px rgba(0,0,0,.34)}.story-evidence::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,16,.16),rgba(2,8,16,.34) 38%,rgba(2,8,16,.96))}.story-evidence img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.08) brightness(.54);transform:scale(calc(1.02 + var(--story-progress,0) * .05))}.story-evidence--1{grid-row:1/3}.story-evidence__context{position:absolute;top:16px;right:17px;z-index:2;color:rgba(221,243,255,.72);font:650 .56rem/1 "Space Grotesk",sans-serif;letter-spacing:.17em;text-transform:uppercase}.story-evidence__copy{position:absolute;right:24px;bottom:22px;left:24px;z-index:2;display:flex;align-items:end;justify-content:flex-start;gap:clamp(22px,3vw,50px)}.story-evidence__copy strong{flex:0 0 auto;font:760 clamp(4.6rem,7vw,8.2rem)/.7 "Unbounded",sans-serif;letter-spacing:-.095em;text-shadow:0 10px 30px rgba(0,0,0,.58)}.story-evidence__copy span{max-width:240px;padding-bottom:4px;color:#eef7fc;font:650 clamp(.84rem,1.06vw,1.08rem)/1.16 "Unbounded",sans-serif;letter-spacing:-.035em;text-align:left;text-transform:none;text-wrap:balance}

.story-contact { position:absolute; inset:15% 6% 7%; z-index:4; display:grid; grid-template-columns:.75fr 1.25fr; gap:5%; align-items:center; }
.story-contact__intro h2{max-width:9ch}.story-contact__object{position:relative;display:block;min-height:min(52vh,470px);overflow:hidden;padding:48px 44px;color:#f4f8fb;text-decoration:none;border:1px solid rgba(145,216,249,.34);background:radial-gradient(circle at 84% 18%,rgba(87,199,245,.22),transparent 39%),linear-gradient(120deg,rgba(10,27,45,.94),rgba(3,9,18,.9));box-shadow:0 38px 84px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04)}.story-contact__object::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,10,19,.98) 0%,rgba(3,10,19,.94) 40%,rgba(3,10,19,.72) 47%,rgba(3,10,19,.16) 55%,rgba(3,10,19,0) 66%);pointer-events:none}.story-contact__portrait{position:absolute;top:-8%;right:-2%;z-index:0;width:61%;height:116%;object-fit:cover;object-position:center 19%;-webkit-mask-image:radial-gradient(ellipse 48% 52% at 65% 42%,#000 30%,rgba(0,0,0,.9) 58%,transparent 100%);mask-image:radial-gradient(ellipse 48% 52% at 65% 42%,#000 30%,rgba(0,0,0,.9) 58%,transparent 100%);transform:translate3d(calc(var(--story-shift,0) * -5px),0,0) scale(1.03)}.story-contact__content{position:relative;z-index:2;display:block;width:59%}.story-contact__content>small{color:var(--signal-cyan);font:650 .56rem/1 "Space Grotesk",sans-serif;letter-spacing:.2em;text-transform:uppercase}.story-contact__content>strong{display:block;margin-top:18px;font:700 clamp(2.1rem,3.15vw,4rem)/.9 "Unbounded",sans-serif;letter-spacing:-.064em}.story-contact__content>strong em{display:block;color:var(--signal-cyan);font-style:normal}.story-contact__content>span{display:block;margin:15px 0 25px;color:#b5c2cc;font-size:.9rem;line-height:1.5}.story-contact__content>b{display:inline-flex;align-items:center;gap:14px;padding:14px 16px;background:var(--signal-cyan);color:#03101a;font:700 .55rem/1 "Space Grotesk",sans-serif;letter-spacing:.13em;text-transform:uppercase}.story-contact__content>b i{font-style:normal}.story-contact__identity{position:absolute;right:24px;bottom:22px;z-index:3;text-align:right;text-shadow:0 4px 16px rgba(0,0,0,.8)}.story-contact__identity strong{display:block;font:680 .9rem/1 "Unbounded",sans-serif;letter-spacing:-.04em}.story-contact__identity small{display:block;margin-top:7px;color:#a9bdcc;font:600 .5rem/1 "Space Grotesk",sans-serif;letter-spacing:.13em;text-transform:uppercase}

.story-state.is-active .story-instrument,.story-state.is-active .story-trust,.story-state.is-active .story-proof,.story-state.is-active .story-contact{transform:translate3d(calc(var(--story-shift,0) * 34px),calc(var(--story-shift,0) * 12px),0)}
/* Talk-to-Johan card hover: lift, glow, and bring the portrait to life. */
.story-contact__object{transition:transform .4s cubic-bezier(.2,.85,.25,1),box-shadow .35s ease,border-color .35s ease}
.story-contact__portrait{transition:transform .6s cubic-bezier(.2,.85,.25,1)}
.story-contact__object:hover{transform:translateY(-6px);border-color:rgba(145,216,249,.7);box-shadow:0 46px 96px rgba(0,0,0,.55),0 0 60px rgba(87,199,245,.18),inset 0 1px rgba(255,255,255,.06)}
.story-contact__object:hover .story-contact__portrait{transform:translate3d(calc(var(--story-shift,0) * -5px),0,0) scale(1.07)}
.story-contact__object:hover .story-contact__content>b{background:#7fe3ff;box-shadow:0 0 24px rgba(127,227,255,.5)}

body.reduced-motion .story-state.is-active,.storyboard-layer[data-story-motion="reduced"] .story-state.is-active{opacity:1;transform:none}.storyboard-layer[data-story-motion="reduced"] .story-instrument,.storyboard-layer[data-story-motion="reduced"] .story-trust,.storyboard-layer[data-story-motion="reduced"] .story-proof,.storyboard-layer[data-story-motion="reduced"] .story-contact{transform:none!important}.storyboard-layer[data-story-motion="reduced"] .story-instrument__depth,.storyboard-layer[data-story-motion="reduced"] .story-instrument__art{transition:none;transform:none}

@media(max-width:900px){
  #content{height:1220svh}.site-nav .btn{padding:10px 15px;font-size:.62rem}
  .story-instrument__housing{inset:-8px -10px -10px;clip-path:polygon(10px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 8px),calc(100% - 8px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
  .story-instrument__depth{clip-path:polygon(8px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 7px),calc(100% - 7px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
  .story-state.is-active .story-instrument,
  .story-state.is-active .story-trust,
  .story-state.is-active .story-proof,
  .story-state.is-active .story-contact{transform:translate3d(0,calc(var(--story-shift,0) * 8px),0)}
  .story-brand{top:17px;left:18px}.story-brand img{width:27px;height:27px}.story-brand>span{display:none}.story-index{top:26px;right:124px;font-size:.48rem}
  .story-hero-copy{top:15%;left:7%;width:86%}.story-hero-copy h1{font-size:clamp(2.65rem,11vw,4.3rem)}.story-hero-copy>p{max-width:78%;font-size:.88rem}.story-hero-art{top:35%;right:-27%;width:125%;height:62%;opacity:.68;-webkit-mask-image:radial-gradient(ellipse 66% 62% at 66% 52%,#000 30%,rgba(0,0,0,.88) 55%,transparent 88%);mask-image:radial-gradient(ellipse 66% 62% at 66% 52%,#000 30%,rgba(0,0,0,.88) 55%,transparent 88%)}
  .story-trust{inset:11% 5% 5%;display:flex;flex-direction:column;align-items:stretch;gap:16px}.story-trust__intro h2{font-size:clamp(2rem,8vw,3rem)}.story-trust__intro>p:last-child{margin-top:9px;font-size:.78rem}.story-trust .story-langeberg-card{position:relative;top:auto;right:auto;left:auto;width:100%}.story-trust .story-langeberg-card .story-instrument__depth{min-height:340px;padding:7%}.story-trust .story-langeberg-card .story-instrument__title{font-size:clamp(1.75rem,7.5vw,2.55rem)}.story-trust .story-langeberg-card .story-instrument__description{max-width:84%}
  .story-service-context,.story-state--left .story-service-context,.story-state--centre .story-service-context{top:12%;right:auto;left:7%;width:86%}.story-service-context h2{font-size:clamp(2rem,8.5vw,3.1rem)}.story-service-context>p:last-child{margin-top:10px;font-size:.78rem}
  .story-instrument,.story-state--left .story-instrument,.story-state--centre .story-instrument{top:36%;right:auto;left:5%;width:90%;min-height:auto}.story-instrument__depth,.story-state--centre .story-instrument__depth{min-height:auto;padding:6%}.story-instrument__title{font-size:clamp(1.45rem,6vw,2.2rem)}.story-instrument__description{max-width:76%;font-size:.78rem}.story-question{margin-top:15px;padding:13px;font-size:clamp(.88rem,4vw,1.12rem)}.story-question>b{flex-basis:36px;width:36px;height:36px}
  .story-proof{inset:9% 5% 4%}.story-proof h2{width:100%;font-size:clamp(2rem,8vw,3.1rem)}.story-proof__scope{font-size:.44rem}.story-proof__evidence{inset:27% 0 0;grid-template-columns:1fr 1fr;grid-template-rows:1.15fr 1fr;gap:6px}.story-evidence--1{grid-column:1/-1;grid-row:1}.story-evidence--2{grid-column:1;grid-row:2}.story-evidence--3{grid-column:2;grid-row:2}.story-evidence__copy{right:12px;bottom:12px;left:12px;display:block}.story-evidence__copy strong{font-size:clamp(3rem,13vw,5rem)}.story-evidence__copy span{display:block;max-width:18ch;margin-top:10px;padding:0;font-size:clamp(.68rem,3vw,.88rem);line-height:1.15;text-align:left}.story-evidence__context{top:9px;right:9px;font-size:.42rem}
  .story-contact{inset:10% 5% 4%;display:block}.story-contact__intro h2{font-size:clamp(2rem,8vw,3rem)}.story-contact__intro>p:last-child{margin-top:8px;font-size:.78rem}.story-contact__object{min-height:55vh;margin-top:18px;padding:26px 22px}.story-contact__object::after{background:linear-gradient(90deg,rgba(3,10,19,.9) 0%,rgba(3,10,19,.54) 30%,rgba(3,10,19,.14) 44%,rgba(3,10,19,0) 56%)}.story-contact__content{width:49%;text-align:left}.story-contact__content>strong{max-width:8ch;font-size:clamp(1.7rem,7vw,2.6rem)}.story-contact__content>span{font-size:.72rem;line-height:1.45}.story-contact__portrait{right:-9%;width:65%;object-position:center 18%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 13%,#000 32%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 13%,#000 32%,#000 100%)}.story-contact__identity{right:10px;bottom:13px}.story-contact__identity strong{font-size:.68rem}.story-contact__identity small{font-size:.38rem}
}

/* On short mobile viewports (real phones with browser chrome visible), the
   service card's decorative glass housing has a fixed -26px negative top
   inset that does not shrink with the viewport. As height drops, that fixed
   bleed eats into the shrinking gap below the title and visually overlaps
   its second line. Pull the title up, push the card down and shrink the
   housing's bleed so a safe gap survives at any short height. */
@media(max-height:700px) and (max-width:900px){
  .story-service-context{top:8%}
  .story-service-context h2{font-size:clamp(1.55rem,7vw,2.3rem)}
  .story-instrument,.story-state--left .story-instrument,.story-state--centre .story-instrument{top:41%}
  .story-instrument__housing{inset:-8px -10px -10px;clip-path:polygon(10px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 8px),calc(100% - 8px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
  .story-instrument__depth{clip-path:polygon(8px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 7px),calc(100% - 7px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
}

@media(prefers-reduced-motion:reduce){.story-state.is-active,.story-hero-art,.story-instrument,.story-instrument__depth,.story-instrument__art,.story-trust,.story-client,.story-client__scene,.story-client__logo,.story-proof,.story-evidence img,.story-contact,.story-contact__portrait{animation:none!important;transition:none!important;transform:none!important}}

/* Shared S-Consulting navigation: the immersive story has one stable header,
   not a repeated state label in every chapter. */
/* Frosted shared navigation: one transparent material, not a gradient, with a
   soft shadow alone defining its lower edge. */
.site-nav { --corporate-nav-rail:max(24px,calc((100vw - 1180px) / 2 + 24px)); z-index: 20; gap: 28px; min-height: 64px; padding-block: 8px; padding-inline:var(--corporate-nav-rail); background: rgba(3, 8, 18, .56); box-shadow: 0 8px 20px rgba(3, 8, 18, .18); backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); }
.site-nav .brand { visibility: visible; flex: 0 0 auto; gap: 10px; }
.site-nav .brand img { height:44px; }
.site-nav .brand span { color: #eff5f9; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.site-nav .brand small { display: block; margin-top: 4px; color: #8795a4; font-size: .43rem; font-weight: 700; letter-spacing: .15em; }
.site-nav__links { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: clamp(12px, 1.55vw, 25px); }
.site-nav__links a { position: relative; color: rgba(232, 241, 248, .7); font-size: .67rem; font-weight: 700; letter-spacing: .035em; text-decoration: none; transition: color .2s ease; }
.site-nav__links a::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; background: var(--signal-cyan); content: ""; transform: scaleX(0); transition: transform .2s ease; }
.site-nav__links a:hover, .site-nav__links a.active { color: #fff; }
.site-nav__links a:hover::after, .site-nav__links a.active::after { transform: scaleX(1); }
.site-nav__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.site-nav__actions .btn { padding: 12px 18px; font-size: .64rem; }
.site-nav__pager { display: none; }
.site-nav__toggle { display: none; width: 34px; height: 34px; padding: 8px 7px; border: 1px solid rgba(95, 216, 255, .4); color: #eff5f9; background: rgba(5, 16, 30, .72); cursor: pointer; }
.site-nav__toggle i { display: block; width: 100%; height: 1px; margin: 3px 0; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.site-nav__drawer { position: fixed; top: 58px; right: 12px; z-index: 19; width: min(252px, calc(100vw - 32px)); padding: 10px 15px 12px; border: 1px solid rgba(95, 216, 255, .34); border-radius: 3px; background: rgba(3, 11, 22, .97); box-shadow: 0 18px 42px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .04); }
.site-nav__drawer[hidden] { display: none; }
.site-nav__drawer a { display: block; padding: 8px 0; border-bottom: 1px solid rgba(159, 207, 234, .1); color: rgba(238, 246, 251, .78); font-size: .8rem; font-weight: 700; letter-spacing: .01em; text-align: right; text-decoration: none; }
.site-nav__drawer a:last-child { border-bottom: 0; }
.site-nav__drawer a.active { color: var(--signal-cyan); }
body.site-nav-open { overflow: hidden; }
body.site-nav-open .site-nav__toggle i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.site-nav-open .site-nav__toggle i:nth-child(2) { opacity: 0; }
body.site-nav-open .site-nav__toggle i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1180px) {
  .site-nav__links { display: none; }
  .site-nav__actions { margin-left: auto; }
  .site-nav__toggle { display: block; }
}
@media (max-width: 900px) {
  .site-nav__pager { display: flex; align-items: center; gap: 2px; height: 32px; transform: translateY(-2px); }
  .site-nav__page-button { display: grid; width: 28px; height: 32px; padding: 0; border: 0; place-items: center; color: #fff; background: transparent; font: 400 1.85rem/1 system-ui, sans-serif; cursor: pointer; }
  .site-nav__page-button:disabled { opacity: .25; cursor: default; }
  .site-nav__toggle { width: 32px; height: 32px; padding: 7px 6px; border: 0; background: transparent; }
  .site-nav__toggle i { width: 20px; margin: 3px auto; }
  .immersive-footer {
    min-height: 0;
    padding: 18px 20px 20px;
  }

  .immersive-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "contacts contacts"
      "brand syspro";
    gap: 14px 16px;
  }

  .immersive-footer__brand { grid-area: brand; }

  .immersive-footer__contacts { grid-area: contacts; }

  .immersive-footer__syspro { grid-area: syspro; }

  .immersive-footer__brand img {
    width: 36px;
    height: 36px;
  }

  .immersive-footer__brand span {
    font-size: .74rem;
  }

  .immersive-footer__brand small {
    font-size: .32rem;
  }

  .immersive-footer__syspro {
    width: 96px;
  }

  .immersive-footer__contacts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: center;
    gap: 7px 14px;
    font-size: .64rem;
    white-space: normal;
  }

  .immersive-footer__contacts span {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .site-nav { min-height: 62px; padding: 10px 18px; }
  .site-nav .brand { visibility: visible; }
  .site-nav .brand img { height: 32px; }
  .site-nav .brand span { font-size: .69rem; }
  .site-nav__actions .btn { display: none; }
  .site-nav__drawer { top: 58px; right: 12px; width: min(252px, calc(100vw - 32px)); }
}

/* Page backgrounds remain present between documents. Only the route's visible
   content units stage in, so a navigation never collapses to black or white. */
.page-entry-item {
  opacity: 0 !important;
  filter: blur(5px);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1) var(--page-entry-delay, 0ms), filter 620ms cubic-bezier(.22, 1, .36, 1) var(--page-entry-delay, 0ms);
  will-change: opacity, filter;
}
.page-entry-item.is-page-entry-visible {
  opacity: 1 !important;
  filter: blur(0);
}

/* Edge-swipe navigation previews the actual destination document under the
   stable header while the finger is moving, then completes that same slide on
   release. The preview is created only after an edge touch begins. */
.edge-swipe-preview {
  position: fixed;
  inset: 0;
  z-index: 19;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: linear-gradient(120deg, #07172b, #173a5e);
  will-change: transform;
}
html.edge-swipe-dragging #content,
html.edge-swipe-leaving #content { transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .24s ease; will-change: transform; }
html.edge-swipe-leaving #content { opacity: .7; }
html.edge-swipe-entering #content { animation-duration: .28s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; }
html.edge-swipe-entering.edge-swipe-next #content { animation-name: edge-swipe-enter-next; }
html.edge-swipe-entering.edge-swipe-previous #content { animation-name: edge-swipe-enter-previous; }
@keyframes edge-swipe-enter-next { from { opacity: .35; transform: translate3d(4vw,0,0); } to { opacity: 1; transform: none; } }
@keyframes edge-swipe-enter-previous { from { opacity: .35; transform: translate3d(-4vw,0,0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .edge-swipe-preview { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-entry-item {
    opacity: 1;
    filter: none;
    transition: none;
  }
}

/* Mobile controls keep a full finger-sized hit target without making the
   approved compact header or opening CTA look oversized. */
@media (max-width: 900px) {
  .site-nav {
    min-height: 64px;
  }

  .site-nav__toggle {
    width: 44px;
    height: 44px;
    padding: 11px 9px;
  }

  .site-nav__drawer {
    top: 64px;
  }

  .story-enter {
    min-height: 44px;
    padding-block: 6px;
  }

  .story-trust__intro h2 {
    word-spacing: .05em;
  }
}

/* Mobile Home follows the Industries pattern: compact blocks in document flow
   with viewport-led arrivals instead of empty fixed-stage spacing. */
@media (max-width: 900px) {
  .storyboard-layer[data-story-mode="sheet"] .story-state { min-height: auto; padding: 88px 20px 52px; }
  .storyboard-layer[data-story-mode="sheet"] .story-state--opening { min-height: 100svh; padding: 0; }
  .storyboard-layer[data-story-mode="sheet"] .story-state.is-active { opacity: 1; transform: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-state.is-active .story-instrument,
  .storyboard-layer[data-story-mode="sheet"] .story-state.is-active .story-trust,
  .storyboard-layer[data-story-mode="sheet"] .story-state.is-active .story-proof,
  .storyboard-layer[data-story-mode="sheet"] .story-state.is-active .story-contact { transform: none !important; }
  .storyboard-layer[data-story-mode="sheet"] .story-state--proof,
  .storyboard-layer[data-story-mode="sheet"] .story-state--contact { min-height: 760px; }
  .storyboard-layer[data-story-mode="sheet"] .story-trust,
  .storyboard-layer[data-story-mode="sheet"] .story-proof,
  .storyboard-layer[data-story-mode="sheet"] .story-contact { position: relative; inset: auto; width: 100%; }
  .storyboard-layer[data-story-mode="sheet"] .story-trust { display: flex; gap: 24px; }
  .storyboard-layer[data-story-mode="sheet"] .story-service-context,
  .storyboard-layer[data-story-mode="sheet"] .story-state--left .story-service-context,
  .storyboard-layer[data-story-mode="sheet"] .story-state--centre .story-service-context { position: relative; top: auto; right: auto; left: auto; width: 100%; margin: 0 0 24px; }
  .storyboard-layer[data-story-mode="sheet"] .story-proof__evidence { position: relative; inset: auto; min-height: 460px; margin-top: 28px; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument,
  .storyboard-layer[data-story-mode="sheet"] .story-state--left .story-instrument,
  .storyboard-layer[data-story-mode="sheet"] .story-state--centre .story-instrument { position: relative; top: auto; right: auto; left: auto; width: 100%; margin: 0; }
  .storyboard-layer[data-flow-reveals="ready"] .story-flow-reveal { opacity: 0; transition: opacity 480ms ease; }
  .storyboard-layer[data-flow-reveals="ready"] .story-flow-copy { transform: translate3d(0, 20px, 0); transition: opacity 480ms ease, transform 620ms cubic-bezier(.22, 1, .36, 1); }
  .storyboard-layer[data-flow-reveals="ready"] .story-flow-reveal.is-visible { opacity: 1; }
  .storyboard-layer[data-flow-reveals="ready"] .story-flow-copy.is-visible { transform: none; }
  .storyboard-layer[data-flow-reveals="ready"] .story-instrument.story-flow-reveal .story-instrument__art img { transform: scale(1.045); transition: transform 900ms cubic-bezier(.22, 1, .36, 1); }
  .storyboard-layer[data-flow-reveals="ready"] .story-instrument.story-flow-reveal.is-visible .story-instrument__art img { transform: scale(1); }
  @supports (animation-timeline: scroll()) {
    .scroll-hint { animation: scroll-hint-dismiss 1ms linear both; animation-timeline: scroll(root block); animation-range: 0 180px; }
  }
  @keyframes scroll-hint-dismiss { from { opacity: 1 } to { opacity: 0 } }
  .storyboard-layer[data-story-motion="reduced"] .story-flow-reveal { opacity: 1; transform: none; transition: none; }
  .storyboard-layer[data-story-motion="reduced"] .story-instrument__art img { transform: scale(1); transition: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument { transform-style: flat; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument__housing { background-color: rgba(8, 14, 23, .9); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument__depth { transform: none; transform-style: flat; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument__art { mix-blend-mode: normal; transform: none !important; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument__glare { display: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-instrument__depth > :not(.story-instrument__art):not(.story-instrument__glare) { transform: none; }
  .storyboard-layer[data-story-mode="sheet"] .story-question { background-color: rgba(10, 22, 27, .86); backdrop-filter: none; -webkit-backdrop-filter: none; }
}