:root {
  color-scheme: dark;
  --background: #171719;
  --background-deep: #101012;
  --panel: #1c1c20;
  --panel-deep: #141417;
  --red: #e50914;
  --white: #f5f5f1;
  --muted: #aaaab2;
  --header-height: 4.25rem;
  --symbol-start: clamp(19rem, 50vmin, 39rem);
  --symbol-final: clamp(7.5rem, 15vw, 13rem);
  --wordmark-width: clamp(14rem, 40vw, 37rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* One shared offset for navbar, section rail, and direct fragment links. */
  scroll-padding-top: var(--header-height);
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--background);
  color: var(--white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-switcher {
  position: fixed;
  z-index: 80;
  top: 0.85rem;
  right: clamp(0.75rem, 2vw, 2rem);
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid rgb(255 255 255 / 16%);
  background: rgb(10 10 12 / 86%);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 24%);
  backdrop-filter: blur(0.8rem);
}

.language-option {
  min-width: 2.55rem;
  min-height: 2rem;
  border: 1px solid transparent;
  background: transparent;
  color: #9999a1;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.language-option:hover,
.language-option:focus-visible {
  color: var(--white);
}

.language-option:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.language-option.is-active {
  border-color: rgb(229 9 20 / 78%);
  background: rgb(229 9 20 / 10%);
  color: var(--white);
}

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(8 8 10 / 94%);
  backdrop-filter: blur(1rem);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 100rem);
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 3rem);
}

.header-brand,
.header-index {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-decoration: none;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--white);
}

.header-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 180ms ease, transform 180ms ease;
}

.header-brand:hover img,
.header-brand:focus-visible img {
  filter: drop-shadow(0 0 0.5rem rgb(229 9 20 / 42%));
  transform: scale(1.04);
}

.header-brand:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 0.35rem;
}

.header-index {
  justify-self: end;
  margin-right: 7rem;
  color: #77777f;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.primary-nav-link {
  border: 1px solid transparent;
  padding: 0.58rem 0.85rem;
  color: #a9a9b0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible {
  color: var(--white);
}

.primary-nav-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.primary-nav-link.is-active {
  border-color: rgb(229 9 20 / 82%);
  background: rgb(229 9 20 / 5%);
  color: var(--white);
}

.section-rail {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: clamp(1.1rem, 3vw, 3rem);
  display: grid;
  gap: 0.42rem;
  padding: 0.25rem;
  opacity: 0;
  transform: translateY(-45%);
  pointer-events: none;
}

.section-rail::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 50%;
  width: 1px;
  background: rgb(255 255 255 / 9%);
  transform: translateX(-50%);
}

.section-rail-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  text-decoration: none;
}

.section-rail-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #65656c;
  transition: width 180ms ease, height 180ms ease, background-color 180ms ease;
}

.section-rail-link::after {
  content: "";
  position: absolute;
  inset: 0.15rem;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color 180ms ease;
}

.section-rail-link:hover .section-rail-dot,
.section-rail-link:focus-visible .section-rail-dot,
.section-rail-link.is-active .section-rail-dot {
  width: 0.34rem;
  height: 0.34rem;
  background: var(--white);
}

.section-rail-link.is-active::after {
  border-color: var(--white);
}

.section-rail-link:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 2px;
}

.site-ready .site-header {
  animation: interface-in 520ms ease-out 3.02s forwards;
}

.site-ready .section-rail {
  animation: rail-in 520ms ease-out 3.02s forwards;
}

.site-page,
.content-section {
  width: 100%;
}

.content-section {
  position: relative;
  min-height: 100svh;
  scroll-margin-top: 0;
}

.intro-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgb(229 9 20 / 7%), transparent 34%),
    linear-gradient(135deg, var(--background-deep), var(--background) 48%, #19191c);
}

.ambient-glow {
  position: absolute;
  z-index: -3;
  top: 50%;
  left: 50%;
  width: min(76vw, 72rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(229 9 20 / 9%), transparent 66%);
  filter: blur(3rem);
  opacity: 0;
}

.panel {
  position: absolute;
  z-index: -2;
  inset-block: -12%;
  width: 58vw;
  background: linear-gradient(150deg, rgb(255 255 255 / 1.8%), transparent 44%);
  opacity: 0;
}

.panel::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 2px;
  opacity: 0.38;
  background: linear-gradient(
    180deg,
    transparent,
    rgb(245 245 241 / 72%) 10%,
    rgb(245 245 241 / 72%) 90%,
    transparent
  );
  box-shadow:
    0 0 0.45rem rgb(245 245 241 / 40%),
    0 0 1.15rem rgb(229 9 20 / 24%);
  will-change: opacity, box-shadow;
}

.panel-left {
  left: -32vw;
  transform: skewX(-28deg);
  background-color: #121215;
}

.panel-left::after {
  right: -1px;
}

.panel-right {
  right: -38vw;
  transform: skewX(-28deg);
  background-color: #1b1b1f;
}

.panel-right::after {
  left: -1px;
}

.hairline {
  position: absolute;
  z-index: -1;
  width: clamp(7rem, 16vw, 16rem);
  height: 2px;
  opacity: 0;
  will-change: transform, opacity;
}

.hairline-left {
  top: 30%;
  left: -10rem;
  background: linear-gradient(90deg, transparent, rgb(245 245 241 / 42%), var(--white));
}

.hairline-right {
  right: -10rem;
  bottom: 25%;
  background: linear-gradient(90deg, var(--white), rgb(245 245 241 / 42%), transparent);
}

.brand-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 4rem);
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.3vw, 2.25rem);
  width: max-content;
  max-width: calc(100vw - 2.5rem);
}

.logo-shell {
  width: var(--symbol-start);
  flex: 0 0 auto;
  line-height: 0;
  will-change: width, transform;
}

.brand-symbol {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-piece {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}

.piece-top {
  --piece-entry: translate3d(-18%, -25%, 0) rotate(-4deg);
  transform: var(--piece-entry);
}

.piece-left {
  --piece-entry: translate3d(-24%, 18%, 0) rotate(5deg);
  transform: var(--piece-entry);
}

.piece-bottom-right {
  --piece-entry: translate3d(24%, 20%, 0) rotate(4deg);
  transform: var(--piece-entry);
}

.dark-face {
  filter: url(#subtle-red-texture);
}

.wordmark-window {
  width: 0;
  min-width: 0;
  overflow: hidden;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: width;
}

.wordmark-copy {
  width: var(--wordmark-width);
  transform: translateX(-105%);
  will-change: transform;
}

.wordmark-content {
  display: grid;
  justify-items: center;
  width: 100%;
}

.wordmark-copy h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(
    100deg,
    var(--red) 0%,
    #ff1825 34%,
    #ff7b83 47%,
    #ffe1e3 59%,
    var(--white) 80%
  );
  background-size: 118% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-color: var(--white);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(3rem, 7.1vw, 7.5rem);
  font-stretch: condensed;
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 0.88;
  animation: wordmark-gradient 4s ease-in-out 3.05s infinite alternate;
}

.wordmark-descriptor {
  margin: clamp(0.85rem, 1.5vw, 1.35rem) 0 0;
  width: max-content;
  color: var(--muted);
  font-size: clamp(0.72rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
}

.overview-message {
  display: grid;
  justify-items: center;
  width: min(100%, 35rem);
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  text-align: center;
  white-space: normal;
}

.overview-statement,
.overview-detail,
.overview-link {
  opacity: 0;
  transform: translateY(0.45rem);
}

.overview-statement {
  margin: 0;
  color: #ededf0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 560;
  line-height: 1.5;
}

.overview-detail {
  margin: 0.65rem 0 0;
  color: #c9c9d0;
  font-size: 1rem;
  line-height: 1.55;
}

.overview-link {
  margin-top: 1.05rem;
  color: #d5d5da;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.overview-link span {
  margin-left: 0.35rem;
  color: #ff4e58;
}

.overview-link:hover,
.overview-link:focus-visible {
  color: var(--white);
}

.overview-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 0.35rem;
}

.brand-stage.is-playing .logo-piece {
  animation: assemble-piece 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.brand-stage.is-playing .piece-top {
  animation-delay: 120ms;
}

.brand-stage.is-playing .piece-left {
  animation-delay: 210ms;
}

.brand-stage.is-playing .piece-bottom-right {
  animation-delay: 300ms;
}

.brand-stage.is-playing .logo-shell {
  animation: reduce-symbol 760ms cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;
}

.brand-stage.is-playing .wordmark-window {
  animation: open-wordmark 850ms cubic-bezier(0.22, 1, 0.36, 1) 2.15s forwards;
}

.brand-stage.is-playing .wordmark-copy {
  animation: pan-wordmark 850ms cubic-bezier(0.22, 1, 0.36, 1) 2.15s forwards;
}

.brand-stage.is-playing .wordmark-descriptor {
  animation: reveal-descriptor 520ms ease-out 3.02s forwards;
}

.brand-stage.is-playing .overview-statement {
  animation: reveal-overview-copy 520ms ease-out 3.18s forwards;
}

.brand-stage.is-playing .overview-detail {
  animation: reveal-overview-copy 520ms ease-out 3.32s forwards;
}

.brand-stage.is-playing .overview-link {
  animation: reveal-overview-copy 520ms ease-out 3.48s forwards;
}

.brand-stage.is-playing ~ .ambient-glow,
.intro-page.is-playing .ambient-glow {
  animation: atmosphere-in 1.2s ease-out 1.45s forwards;
}

.intro-page.is-playing .panel {
  animation: panel-in 1.1s ease-out 1.25s forwards;
}

.intro-page.is-playing .panel::after {
  animation: seam-pulse 6.5s ease-in-out 1.55s infinite;
}

.intro-page.is-playing .hairline {
  animation-duration: 7s;
  animation-delay: 3.12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.intro-page.is-playing .hairline-left {
  animation-name: shoot-right;
}

.intro-page.is-playing .hairline-right {
  animation-name: shoot-left;
}

@keyframes assemble-piece {
  0% {
    opacity: 0;
    transform: var(--piece-entry);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes reduce-symbol {
  from {
    width: var(--symbol-start);
  }
  to {
    width: var(--symbol-final);
  }
}

@keyframes open-wordmark {
  from {
    width: 0;
  }
  to {
    width: var(--wordmark-width);
  }
}

@keyframes pan-wordmark {
  from {
    transform: translateX(-105%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes reveal-descriptor {
  to {
    opacity: 1;
  }
}

@keyframes reveal-overview-copy {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wordmark-gradient {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 165% 50%;
  }
}

@keyframes atmosphere-in {
  to {
    opacity: 1;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.82;
  }
}

@keyframes shoot-right {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  1.5% {
    opacity: 1;
  }
  16% {
    opacity: 1;
    transform: translate3d(calc(100vw + 20rem), 0, 0);
  }
  18%,
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 20rem), 0, 0);
  }
}

@keyframes shoot-left {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  1.5% {
    opacity: 1;
  }
  16% {
    opacity: 1;
    transform: translate3d(calc(-100vw - 20rem), 0, 0);
  }
  18%,
  100% {
    opacity: 0;
    transform: translate3d(calc(-100vw - 20rem), 0, 0);
  }
}

@keyframes seam-pulse {
  0%,
  100% {
    opacity: 0.3;
    box-shadow:
      0 0 0.35rem rgb(245 245 241 / 28%),
      0 0 0.9rem rgb(229 9 20 / 16%);
  }
  50% {
    opacity: 0.95;
    box-shadow:
      0 0 0.8rem rgb(245 245 241 / 78%),
      0 0 1.8rem rgb(229 9 20 / 48%),
      0 0 3rem rgb(229 9 20 / 16%);
  }
}

@keyframes interface-in {
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@keyframes rail-in {
  to {
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
  }
}

.section-shell {
  width: min(100%, 86rem);
  margin: 0 auto;
  padding: clamp(7rem, 12vh, 10rem) clamp(3.5rem, 8vw, 8rem);
}

.problem-section,
.leverage-section,
.system-section,
.method-section,
.closing-cta {
  display: grid;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 7%);
}

.leverage-section {
  background:
    radial-gradient(circle at 82% 22%, rgb(229 9 20 / 8%), transparent 28%),
    linear-gradient(150deg, rgb(255 255 255 / 2%), transparent 38%),
    #121214;
}

.system-section {
  background:
    linear-gradient(118deg, transparent 0 67%, rgb(229 9 20 / 5%) 67% 67.15%, transparent 67.15%),
    radial-gradient(circle at 10% 72%, rgb(229 9 20 / 6%), transparent 30%),
    #18181a;
}

.problem-section {
  background:
    linear-gradient(115deg, transparent 0 68%, rgb(229 9 20 / 5%) 68% 68.2%, transparent 68.2%),
    #131315;
}

.method-section {
  background:
    radial-gradient(circle at 82% 24%, rgb(229 9 20 / 7%), transparent 28%),
    #19191c;
}

.outcomes-section {
  background:
    linear-gradient(155deg, rgb(255 255 255 / 2.5%), transparent 34%),
    #111113;
}

.closing-cta {
  scroll-margin-top: 0;
  background:
    radial-gradient(circle at 50% 76%, rgb(229 9 20 / 11%), transparent 34%),
    #18181b;
}

.section-kicker {
  margin: 0 0 clamp(2.2rem, 5vw, 4rem);
  color: #898991;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-kicker span {
  margin-right: 0.9rem;
  color: var(--red);
}

.section-heading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
}

.section-heading-grid h2,
.contact-shell h2 {
  margin: 0;
  max-width: 12ch;
  color: var(--white);
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.section-heading-grid > p,
.contact-copy {
  margin: 0;
  color: #d0d0d6;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.75;
}

.section-heading-grid h2 em {
  color: #ff3944;
  font-style: normal;
}

.leverage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.leverage-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 5rem auto 1fr;
  gap: 0.9rem;
  min-height: 20rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border: 1px solid rgb(255 255 255 / 13%);
  background: linear-gradient(145deg, rgb(255 255 255 / 2.5%), transparent 62%);
  overflow: hidden;
}

.leverage-card::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  left: 1.25rem;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0 18%, rgb(229 9 20 / 10%) 18% 100%);
}

.card-index {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.leverage-visual {
  display: grid;
  align-items: center;
  color: #777780;
}

.leverage-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.leverage-visual circle,
.leverage-visual rect,
.leverage-visual path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leverage-visual .icon-muted {
  color: #64646c;
  opacity: 0.78;
}

.leverage-visual .icon-team-back {
  opacity: 0.52;
}

.leverage-visual .icon-team-front {
  opacity: 1;
}

.leverage-visual .icon-team-front .person-face {
  fill: #151517;
}

.leverage-visual .icon-accent,
.leverage-visual .mini-mark {
  color: #ff303b;
  filter: drop-shadow(0 0 0.45rem rgb(229 9 20 / 40%));
}

.leverage-visual .mini-mark path {
  fill: rgb(229 9 20 / 78%);
  stroke: #ff303b;
}

.leverage-visual .icon-flow,
.leverage-visual .icon-accent-line {
  color: #ff5b64;
}

.leverage-visual .icon-flow-dashed {
  stroke-dasharray: 3 5;
}

.leverage-visual .icon-panel,
.leverage-visual .icon-bars {
  color: #8b8b93;
}

.leverage-visual .icon-check {
  color: var(--white);
}

.leverage-visual .ownership-logo {
  filter: drop-shadow(0 0 0.45rem rgb(229 9 20 / 34%));
}

.leverage-visual .icon-bars {
  fill: rgb(229 9 20 / 10%);
}

.leverage-card h3 {
  margin: 0;
  color: #ededf0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
}

.leverage-card p {
  margin: 0;
  padding-bottom: 1.4rem;
  color: #ccccd3;
  font-size: 1rem;
  line-height: 1.55;
}

.leverage-section.is-flowing .leverage-card {
  animation: leverage-card-in 650ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--card-delay) both;
}

.system-diagram {
  display: grid;
  grid-template-columns: minmax(30rem, 1.7fr) auto minmax(10.8rem, 0.576fr) auto minmax(10.8rem, 0.576fr);
  gap: clamp(0.65rem, 1.6vw, 1.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.diagram-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
  color: #8b8b93;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.diagram-label span {
  height: 1px;
  background: rgb(255 255 255 / 22%);
}

.component-cluster {
  position: relative;
  height: clamp(18rem, 27vw, 23rem);
}

.system-node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.45rem;
  width: 32%;
  height: 35%;
  background: rgb(255 255 255 / 16%);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  color: #d5d5da;
  text-align: center;
  transition: filter 250ms ease;
}

.system-node::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: #151518;
  clip-path: inherit;
}

.system-node-people { top: 0; left: 20%; }
.system-node-existing { top: 0; left: 48%; }
.system-node-custom { top: 31%; left: 6%; }
.system-node-providers { top: 31%; left: 34%; }
.system-node-data { top: 31%; left: 62%; }
.system-node-controls { top: 62%; left: 20%; }
.system-node-automation { top: 62%; left: 48%; }

.system-icon {
  color: #ededf0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.35rem;
  line-height: 1;
}

.system-node strong,
.result-node strong {
  color: #ededf0;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.system-arrow {
  color: #ff3944;
  font-size: clamp(2.16rem, 3.6vw, 3.6rem);
  font-weight: 300;
  filter: drop-shadow(0 0 0.45rem rgb(229 9 20 / 36%));
}

.result-node {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  min-height: 12.6rem;
  padding: 1rem;
  border: 1px solid rgb(229 9 20 / 58%);
  background: linear-gradient(145deg, rgb(229 9 20 / 11%), rgb(255 255 255 / 1.5%));
  text-align: center;
}

.result-node small {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  width: max-content;
  max-width: 10rem;
  color: #8f8f97;
  font-size: 0.72rem;
  line-height: 1.25;
  transform: translateX(-50%);
}

.outcome-result {
  border-color: rgb(255 255 255 / 28%);
}

.result-logo {
  display: block;
  width: 3.3rem;
  height: 3.3rem;
  object-fit: contain;
  filter: drop-shadow(0 0 0.45rem rgb(229 9 20 / 36%));
}

.result-chart {
  display: flex;
  align-items: end;
  gap: 0.23rem;
  height: 2.6rem;
  padding: 0 0.2rem 0.18rem;
  border-bottom: 1px solid #ff5b64;
}

.result-chart i {
  display: block;
  width: 0.42rem;
  border: 1px solid #ff5b64;
  background: rgb(229 9 20 / 18%);
}

.result-chart i:nth-child(1) { height: 32%; }
.result-chart i:nth-child(2) { height: 52%; }
.result-chart i:nth-child(3) { height: 72%; }
.result-chart i:nth-child(4) { height: 100%; }

.system-definition {
  max-width: 72rem;
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
  padding: 0.95rem 1.35rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-left: 2px solid var(--red);
  background: rgb(0 0 0 / 10%);
  color: #d2d2d7;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.55;
  text-align: center;
}

.system-section.is-flowing .system-node,
.system-section.is-flowing .result-node {
  animation: system-node-flow 7.5s ease-in-out var(--node-delay) infinite;
}

.system-section.is-flowing .system-arrow-one {
  animation: system-arrow-flow 7.5s ease-in-out 2.35s infinite;
}

.system-section.is-flowing .system-arrow-two {
  animation: system-arrow-flow 7.5s ease-in-out 2.9s infinite;
}

@keyframes leverage-card-in {
  from {
    opacity: 0.45;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes system-node-flow {
  0%,
  24%,
  100% {
    background: rgb(255 255 255 / 16%);
    filter: none;
    transform: translateY(0);
  }
  6%,
  14% {
    background: rgb(255 48 59 / 88%);
    filter: drop-shadow(0 0 0.75rem rgb(229 9 20 / 48%));
    transform: translateY(-0.18rem);
  }
}

@keyframes system-arrow-flow {
  0%,
  24%,
  100% {
    opacity: 0.48;
    transform: translateX(0);
  }
  7%,
  15% {
    opacity: 1;
    transform: translateX(0.25rem);
  }
}

.workflow-diagram {
  margin-top: clamp(3rem, 6vw, 5.5rem);
}

.workflow-caption {
  margin: 0 0 0.85rem;
  color: #b1b1b8;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.workflow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  margin: 0 0 1.2rem;
  color: #8f8f97;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workflow-legend span {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
}

.workflow-key {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid rgb(255 255 255 / 20%);
  background: #161619;
}

.workflow-key-problem {
  border-color: rgb(229 9 20 / 85%);
  background: rgb(229 9 20 / 32%);
  box-shadow: 0 0 0.6rem rgb(229 9 20 / 22%);
}

.workflow-path {
  --workflow-cycle: 18s;

  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-path::before,
.workflow-path::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.workflow-path::before {
  display: none;
}

.workflow-path::after {
  display: none;
}

.workflow-node {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: space-between;
  min-width: 0;
  min-height: 8.75rem;
  padding: 1.15rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 14%);
  background: #161619;
  z-index: 1;
}

.workflow-orbit {
  position: absolute;
  z-index: 3;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
}

.workflow-orbit path {
  fill: none;
  stroke: #ff303b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.42rem rgb(229 9 20 / 88%));
  opacity: 0;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.workflow-path > :nth-child(1) { --workflow-delay: 0s; }
.workflow-path > :nth-child(2) { --workflow-delay: 1.2s; }
.workflow-path > :nth-child(3) { --workflow-delay: 2.4s; }
.workflow-path > :nth-child(4) { --workflow-delay: 3.6s; }
.workflow-path > :nth-child(5) { --workflow-delay: 4.8s; }
.workflow-path > :nth-child(6) { --workflow-delay: 6s; }
.workflow-path > :nth-child(7) { --workflow-delay: 7.2s; }
.workflow-path > :nth-child(8) { --workflow-delay: 8.4s; }
.workflow-path > :nth-child(9) { --workflow-delay: 9.6s; }
.workflow-path > :nth-child(10) { --workflow-delay: 10.8s; }
.workflow-path > :nth-child(11) { --workflow-delay: 12s; }
.workflow-path > :nth-child(12) { --workflow-delay: 13.2s; }
.workflow-path > :nth-child(13) { --workflow-delay: 14.4s; }
.workflow-path > :nth-child(14) { --workflow-delay: 15.6s; }
.workflow-path > :nth-child(15) { --workflow-delay: 16.8s; }

.workflow-node span,
.phase-number {
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.workflow-node span {
  color: #777780;
  line-height: 1.35;
  text-transform: uppercase;
}

.workflow-node strong {
  color: #dedee2;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  font-weight: 500;
  line-height: 1.45;
}

.workflow-node-human,
.workflow-node-failure {
  border-color: rgb(229 9 20 / 82%);
  border-top-width: 3px;
  background: linear-gradient(145deg, rgb(229 9 20 / 27%), rgb(229 9 20 / 9%));
  box-shadow: inset 0 0 1.65rem rgb(229 9 20 / 9%), 0 0 1.2rem rgb(229 9 20 / 7%);
}

.workflow-node-human span,
.workflow-node-failure span {
  color: #ff5b64;
}

.workflow-node-failure {
  border-color: rgb(255 37 48 / 94%);
  background: linear-gradient(145deg, rgb(229 9 20 / 38%), rgb(229 9 20 / 14%));
  box-shadow: inset 0 0 1.8rem rgb(229 9 20 / 13%), 0 0 1.3rem rgb(229 9 20 / 10%);
}

.workflow-connector {
  position: relative;
  align-self: center;
  flex: 0 0 clamp(1.4rem, 2.8vw, 2.75rem);
  height: 1px;
  background: rgb(255 255 255 / 24%);
  transition: filter 280ms ease, opacity 280ms ease;
}

.workflow-connector-runner {
  position: absolute;
  z-index: 1;
  top: -1px;
  right: 0;
  bottom: -1px;
  left: 0;
  background: linear-gradient(90deg, #e50914, #ff5b64);
  box-shadow: 0 0 0.8rem rgb(229 9 20 / 82%);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

.workflow-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid rgb(229 9 20 / 82%);
  transform: translateY(-50%);
  z-index: 2;
}

.workflow-connector-manual {
  background: linear-gradient(90deg, rgb(255 255 255 / 20%), rgb(229 9 20 / 72%), rgb(255 255 255 / 20%));
}

.workflow-connector::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--red);
  box-shadow: 0 0 0.65rem rgb(229 9 20 / 75%);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

@keyframes workflow-connector-flow {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  0.8% {
    opacity: 1;
  }
  5.7% {
    opacity: 1;
    transform: scaleX(1);
  }
  7%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes workflow-diamond-flow {
  0%,
  100% {
    box-shadow: 0 0 0.65rem rgb(229 9 20 / 75%);
    filter: none;
  }
  1%,
  5.7% {
    box-shadow: 0 0 0 0.2rem rgb(229 9 20 / 18%), 0 0 1rem rgb(229 9 20 / 100%);
    filter: brightness(1.35);
  }
}

.problem-section.is-flowing .workflow-connector-runner {
  animation: workflow-connector-flow var(--workflow-cycle) linear var(--workflow-delay) infinite;
}

.problem-section.is-flowing .workflow-connector::before {
  animation: workflow-diamond-flow var(--workflow-cycle) linear var(--workflow-delay) infinite;
}

.workflow-connector-manual::after {
  border-left-color: rgb(229 9 20 / 72%);
}

.workflow-conclusion {
  width: fit-content;
  max-width: 48rem;
  margin: clamp(1.8rem, 3.5vw, 2.75rem) auto 0;
  padding: 0.65rem 1rem;
  border: 0;
  border-left: 2px solid rgb(229 9 20 / 85%);
  background: rgb(229 9 20 / 5%);
  color: var(--white);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.5;
  text-align: left;
}

.workflow-conclusion p {
  margin: 0;
}

.workflow-conclusion strong {
  font-weight: 560;
}

.transformation-diagram {
  --transformation-cycle: 13s;
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.transformation-playback {
  position: absolute;
  z-index: 10;
  top: 3.1rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgb(255 65 75 / 65%);
  border-radius: 0.4rem;
  background: #171719;
  color: #f5f5f1;
  font: 600 0.875rem "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.transformation-playback[hidden] { display: none; }
.transformation-playback svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2; fill: none; }
.transformation-playback .playback-play-icon { display: none; }
.transformation-playback[data-paused="true"] .playback-pause-icon { display: none; }
.transformation-playback[data-paused="true"] .playback-play-icon { display: block; }
.transformation-diagram:hover .transformation-playback,
.transformation-diagram:focus-within .transformation-playback,
.transformation-playback[data-paused="true"] {
  opacity: 1;
  pointer-events: auto;
}
.transformation-playback:focus-visible { outline: 2px solid #ff5962; outline-offset: 3px; }
.transformation-playback:hover { border-color: #ff5962; }

/* Suspend every layer without removing its animation or losing its timeline. */
.problem-section.is-animation-suspended .transformation-diagram *,
.problem-section.is-animation-suspended .transformation-diagram *::before,
.problem-section.is-animation-suspended .transformation-diagram *::after {
  animation-play-state: paused !important;
}

@media (hover: none), (pointer: coarse) {
  .transformation-playback { opacity: 1; pointer-events: auto; }
}

.transformation-status {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
  color: #8d8d95;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.transformation-status > * {
  grid-area: 1 / 1;
}

.transformation-state {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
}

.transformation-state i {
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid #ff303b;
  border-radius: 50%;
  box-shadow: 0 0 0.55rem rgb(229 9 20 / 42%);
}

.transformation-state b {
  color: #ff5861;
  font-weight: 700;
}

.transformation-state-after {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.transformation-stage {
  --diagram-edge: clamp(1.25rem, 2.5vw, 2.5rem);
  position: relative;
  min-height: 32rem;
  margin-inline: calc(-1 * var(--diagram-edge));
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(90deg, transparent, rgb(229 9 20 / 3.5%) 50%, transparent),
    rgb(9 9 11 / 32%);
  isolation: isolate;
}

.transformation-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px);
  background-size: 6.25% 100%, 100% 25%;
  mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent);
  opacity: 0;
}

.fragmented-scene,
.coordinated-scene {
  position: absolute;
  inset: clamp(1.5rem, 3vw, 2.5rem);
}

.fragmented-scene {
  --lane-width: 8rem;
  inset: 4rem var(--diagram-edge);
  display: grid;
  grid-template-columns: var(--lane-width) minmax(0, 1fr);
  grid-template-rows: 8rem 10rem;
  column-gap: 1rem;
  row-gap: 5rem;
  align-content: center;
  opacity: 1;
}

.transformation-lane-label {
  position: relative;
  align-self: center;
  margin: 0;
  padding-left: 1.2rem;
  color: #adaeb4;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.17em;
  line-height: 1.7;
  text-transform: uppercase;
}

.transformation-lane-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 0.3rem);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #adb0b5;
  box-shadow: 0 0 0.7rem rgb(255 255 255 / 12%);
}

.problem-lane-label {
  color: #ff4b55;
}

.problem-lane-label::before { background: #ff303b; box-shadow: 0 0 1rem rgb(229 9 20 / 45%); }

.fragmented-tools,
.fragmented-problems {
  position: relative;
  display: grid;
  grid-template-columns: repeat(100, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.fragmented-tools::before {
  content: "";
  position: absolute;
  top: calc(100% + 2.5rem);
  right: 0;
  left: calc(-1 * var(--lane-width) - 1rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 8%), transparent);
}

/* Both lanes use 20-track tiles and 4-track gaps. The lower lane is offset
   eight tracks; elbow branches keep each failure attached to its handoff. */
.tool-node:nth-child(1) { grid-column: 1 / span 20; }
.tool-node:nth-child(2) { grid-column: 25 / span 20; }
.tool-node:nth-child(3) { grid-column: 49 / span 20; }
.tool-node:nth-child(4) { grid-column: 73 / span 20; }
.problem-node:nth-child(1) { grid-column: 9 / span 20; }
.problem-node:nth-child(2) { grid-column: 33 / span 20; }
.problem-node:nth-child(3) { grid-column: 57 / span 20; }
.problem-node:nth-child(4) { grid-column: 81 / span 20; }

.fragmented-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgb(189 194 205 / 28%);
  border-radius: 0.6rem;
  background: radial-gradient(ellipse at top left, rgb(255 255 255 / 3%), transparent 75%), #101113;
}

.fragmented-node span,
.coordinated-node span {
  color: #babac1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.fragmented-node strong,
.coordinated-node strong {
  color: #e6e6e9;
  font-size: 1rem;
  font-weight: 520;
  line-height: 1.4;
}

.tool-node { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.8rem; }
.tool-node > div { display: grid; gap: 0.45rem; }
.tool-number {
  position: absolute;
  top: -0.8rem;
  left: 0.5rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid #73757c;
  border-radius: 50%;
  color: #eee;
  background: radial-gradient(circle at 30% 20%, #242529, #0b0c0e 80%);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 0 0.6rem rgb(255 255 255 / 7%);
}
.tool-icon, .problem-icon svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #b9bbc0;
}
.tool-connector, .problem-connector {
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 20%;
  height: 1px;
  color: #9c9fa5;
  background: currentColor;
}
.tool-connector::after, .problem-connector::after {
  content: "";
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  right: 0.3rem;
  top: -0.2rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.problem-node {
  align-items: center;
  justify-content: flex-start;
  padding: 0.7rem 0.65rem 0.9rem;
  border-color: #e92531;
  background: radial-gradient(ellipse at top, rgb(229 9 20 / 17%), transparent 80%), #180c0f;
  box-shadow: inset 0 0 1.5rem rgb(229 9 20 / 4%), 0 0 1.4rem rgb(229 9 20 / 5%);
  text-align: center;
}

.problem-node::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.7rem);
  left: 50%;
  width: 20%;
  height: 8.3rem;
  border-right: 1px dashed rgb(255 48 59 / 80%);
  border-bottom: 1px dashed rgb(255 48 59 / 80%);
}

.problem-node::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.65rem);
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid #ff303b;
  border-bottom: 2px solid #ff303b;
  filter: drop-shadow(0 0 0.3rem #e50914);
  transform: translateX(-50%) rotate(45deg);
}

.problem-node span {
  color: #ff5962;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.problem-node:last-child::before {
  left: 10%;
  width: 40%;
  height: 4.3rem;
  border-right: 0;
  border-left: 1px dashed rgb(255 48 59 / 80%);
}
.problem-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0.1rem auto 0.6rem;
  border: 1px solid #ff414c;
  border-radius: 0.35rem;
  transform: rotate(45deg);
  box-shadow: 0 0 0.6rem rgb(229 9 20 / 20%);
}
.problem-icon svg { width: 1.45rem; color: #ff4b55; transform: rotate(-45deg); }
.problem-connector { color: #ff303b; }

/* The same four nodes persist from manual coordination to the owned system. */
.coordination-copy, .problem-lane-label { display: grid; }
.coordination-copy > *, .problem-lane-label > span { grid-area: 1 / 1; }
.coordination-copy > div { display: flex; flex-direction: column; gap: 0.45rem; }
.coordination-after { opacity: 0; }
.coordination-frame {
  position: absolute;
  z-index: 0;
  inset: -3.5rem -1% -3.25rem 7%;
  border: 1px solid #e92531;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, #251014, #111214 70%);
  box-shadow: 0 0 2rem rgb(229 9 20 / 10%);
  opacity: 0;
  transform: scale(0.96);
}
.coordination-frame-heading {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
}
.coordination-frame-heading img { width: 1.6rem; height: 1.6rem; }
.coordination-frame-heading strong { color: #eee; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; }
.coordination-frame-result { position: absolute; bottom: 0.8rem; left: 0.8rem; right: 0.8rem; margin: 0; text-align: center; color: #c6c6ce; font-size: 0.875rem; line-height: 1.4; }
.coordination-frame-result span { padding: 0 0.4rem; color: #ff5962; }
.coordination-flow-fill { position: absolute; z-index: 1; top: 50%; left: 8%; right: 0; height: 3px; background: linear-gradient(90deg, #e92531, #ff6b73); box-shadow: 0 0 0.65rem #e92531; transform: scaleX(0); transform-origin: left; }
.tool-node::after { content: ""; position: absolute; top: 100%; left: 50%; height: 1.5rem; width: 1px; background: #ff5962; transform: scaleY(0); transform-origin: top; }
.problem-section .transformation-stage { min-height: 36rem; }
.problem-section .fragmented-scene { grid-template-rows: 8rem 11.5rem; }

.transformation-conclusion {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
  max-width: none;
  margin: 1.25rem 0 0;
  padding: 1.35rem 1.75rem;
  border: 1px solid rgb(229 9 20 / 64%);
  border-left: 3px solid #e92531;
  border-radius: 0.85rem;
  background: linear-gradient(100deg, rgb(229 9 20 / 9%), rgb(229 9 20 / 2%));
  color: var(--white);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.5;
}

.conclusion-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border: 2px solid #ff303b; border-radius: 50%; color: #ff414b; font-size: 2rem; font-weight: 550; }
.transformation-conclusion > div { border-left: 1px solid rgb(229 9 20 / 55%); padding-left: 1.75rem; }
.conclusion-label { display: block; margin-bottom: 0.45rem; color: #ff4b55; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.25em; text-transform: uppercase; }

.transformation-conclusion p {
  margin: 0;
}

.transformation-conclusion strong {
  font-weight: 560;
}

/* One shared 18-second clock: identify, consolidate, operate, then read. */
.problem-section .transformation-diagram { --transformation-cycle: 18s; }
.problem-section.is-flowing .fragmented-scene { animation: none; }
.problem-section.is-flowing .transformation-state-before,
.problem-section.is-flowing .coordination-before { animation: coordination-before var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .transformation-state-after,
.problem-section.is-flowing .coordination-after { animation: coordination-after var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .fragmented-problems { animation: coordination-gather var(--transformation-cycle) ease-in-out infinite; }
.problem-section.is-flowing .coordination-frame { animation: coordination-enclose var(--transformation-cycle) ease-in-out infinite; }
.problem-section.is-flowing .problem-node { animation: coordination-surface var(--transformation-cycle) ease-in-out infinite; }
.problem-section.is-flowing .problem-icon { animation: coordination-identify var(--transformation-cycle) ease-in-out var(--identify-delay, 0s) infinite both; }
.problem-node:nth-child(2) { --identify-delay: 0.8s; }
.problem-node:nth-child(3) { --identify-delay: 1.6s; }
.problem-node:nth-child(4) { --identify-delay: 2.4s; }
.problem-section.is-flowing .problem-node::before,
.problem-section.is-flowing .problem-node::after { animation: coordination-branches var(--transformation-cycle) ease-in-out infinite; }
.problem-section.is-flowing .tool-node::after { animation: coordination-connect var(--transformation-cycle) ease-in-out infinite; }
.problem-section.is-flowing .problem-connector { animation: coordination-connector var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .coordination-flow-fill { animation: coordination-run var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .tool-node:nth-child(1) { animation: coordination-step-one var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .tool-node:nth-child(2) { animation: coordination-step-two var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .tool-node:nth-child(3) { animation: coordination-step-three var(--transformation-cycle) linear infinite; }
.problem-section.is-flowing .tool-node:nth-child(4) { animation: coordination-step-four var(--transformation-cycle) linear infinite; }
@keyframes coordination-before {
  0%, 27%, 100% { opacity: 1; }
  36%, 94% { opacity: 0; }
}
@keyframes coordination-identify {
  0%, 7%, 100% { filter: none; }
  2%, 4% { filter: brightness(1.5) drop-shadow(0 0 0.5rem #ff303b); }
}
@keyframes coordination-after {
  0%, 35%, 100% { opacity: 0; }
  45%, 94% { opacity: 1; }
}
@keyframes coordination-gather {
  0%, 26%, 100% { transform: translateX(0); }
  44%, 94% { transform: translateX(-8%); }
}
@keyframes coordination-enclose {
  0%, 29%, 100% { opacity: 0; transform: scale(0.96); }
  43%, 94% { opacity: 1; transform: scale(1); }
}
@keyframes coordination-surface {
  0%, 25%, 100% { background-color: #180c0f; border-color: #e92531; box-shadow: inset 0 0 1.5rem rgb(229 9 20 / 4%); }
  44%, 94% { background-color: #141518; border-color: #655157; box-shadow: none; }
}
@keyframes coordination-branches {
  0%, 25%, 100% { opacity: 1; }
  33%, 94% { opacity: 0; }
}
@keyframes coordination-connect {
  0%, 39%, 100% { transform: scaleY(0); }
  46%, 94% { transform: scaleY(1); }
}
@keyframes coordination-connector {
  0%, 25%, 100% { opacity: 1; }
  44%, 94% { opacity: 0.2; }
}
@keyframes coordination-run {
  0%, 48% { transform: scaleX(0); opacity: 0; }
  49% { transform: scaleX(0); opacity: 1; }
  77%, 94% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes coordination-step-one {
  0%, 48%, 100% { border-color: rgb(189 194 205 / 28%); box-shadow: none; }
  51%, 94% { border-color: #9d434d; box-shadow: 0 0 1rem rgb(229 9 20 / 10%); }
}
@keyframes coordination-step-two {
  0%, 56%, 100% { border-color: rgb(189 194 205 / 28%); box-shadow: none; }
  59%, 94% { border-color: #9d434d; box-shadow: 0 0 1rem rgb(229 9 20 / 10%); }
}
@keyframes coordination-step-three {
  0%, 64%, 100% { border-color: rgb(189 194 205 / 28%); box-shadow: none; }
  67%, 94% { border-color: #9d434d; box-shadow: 0 0 1rem rgb(229 9 20 / 10%); }
}
@keyframes coordination-step-four {
  0%, 72%, 100% { border-color: rgb(189 194 205 / 28%); box-shadow: none; }
  75%, 94% { border-color: #9d434d; box-shadow: 0 0 1rem rgb(229 9 20 / 10%); }
}

.phase-grid {
  --phase-grid-padding: clamp(1.25rem, 2.5vw, 2rem);
  --phase-cycle: 8.22s;

  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: var(--phase-grid-padding) 0;
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  background: linear-gradient(180deg, rgb(229 9 20 / 3.5%), transparent 34%);
}

.phase-grid::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(var(--phase-grid-padding) - 0.5px);
  right: 0;
  left: 0;
  height: 1px;
  background: rgb(255 255 255 / 28%);
  pointer-events: none;
}

.phase-grid::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(var(--phase-grid-padding) - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #e50914, #ff6b73);
  box-shadow: 0 0 0.95rem rgb(229 9 20 / 82%);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

.method-section.is-flowing .phase-grid::after {
  animation: phase-status-fill var(--phase-cycle) linear infinite;
}

.phase {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 28rem;
  padding-top: 1.35rem;
  z-index: 1;
}

.phase:nth-of-type(1) {
  --phase-focus-animation: phase-focus-one;
  --phase-marker-animation: phase-marker-one;
}

.phase:nth-of-type(2) {
  --phase-focus-animation: phase-focus-two;
  --phase-marker-animation: phase-marker-two;
}

.phase:nth-of-type(3) {
  --phase-focus-animation: phase-focus-three;
  --phase-marker-animation: phase-marker-three;
}

.phase-heading {
  position: relative;
  padding-top: 1.15rem;
}

.phase-heading::before {
  content: "";
  position: absolute;
  top: -1.725rem;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 0 1rem rgb(229 9 20 / 62%);
  z-index: 4;
}

.method-section.is-flowing .phase :is(.phase-number, h3, .phase-steps, .phase-output) {
  animation: var(--phase-focus-animation) var(--phase-cycle) linear infinite;
}

.method-section.is-flowing .phase .phase-heading::before {
  animation: var(--phase-marker-animation) var(--phase-cycle) linear infinite;
}

.method-section .section-heading-grid h2 {
  font-size: clamp(2.55rem, 5.15vw, 5.45rem);
}

.phase h3 {
  margin: 0.8rem 0 0;
  color: var(--white);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.phase-number {
  display: inline-block;
}

.phase-optional {
  display: block;
  margin-top: 0.4rem;
  color: #ff5b64;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phase-steps {
  display: grid;
  gap: 1.65rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.phase-steps li {
  position: relative;
  padding-left: 1.15rem;
  color: #d6d6db;
  font-size: 1rem;
  line-height: 1.45;
}

.phase-steps li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  width: 0.35rem;
  height: 0.35rem;
  border: 1px solid rgb(229 9 20 / 80%);
  transform: rotate(45deg);
}

.phase-steps li:not(:last-child)::after {
  content: "↓";
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 0.02rem;
  color: rgb(229 9 20 / 62%);
  font-size: 0.78rem;
  line-height: 1;
}

.phase-output {
  display: grid;
  gap: 0.55rem;
  margin: auto 0 0;
  padding: 1rem;
  border-top: 1px solid rgb(229 9 20 / 58%);
  background: linear-gradient(120deg, rgb(229 9 20 / 8%), transparent 72%);
}

.phase-output span {
  color: #ff5b64;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.phase-output strong {
  color: #ededf0;
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.45;
}

.phase-link {
  display: none;
}

.phase-link::after {
  display: none;
}

@keyframes phase-status-fill {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  81.75%,
  99.5% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes phase-focus-one {
  0%, 24.5% {
    filter: brightness(1.16);
    transform: translateY(-0.42rem);
  }
  29.5%, 100% {
    filter: none;
    transform: translateY(0);
  }
}

@keyframes phase-focus-two {
  0%, 27%, 55%, 100% {
    filter: none;
    transform: translateY(0);
  }
  29.5%, 51.5% {
    filter: brightness(1.16);
    transform: translateY(-0.42rem);
  }
}

@keyframes phase-focus-three {
  0%, 54.5%, 100% {
    filter: none;
    transform: translateY(0);
  }
  57%, 99.5% {
    filter: brightness(1.16);
    transform: translateY(-0.42rem);
  }
}

@keyframes phase-marker-one {
  0%, 99.5% {
    background: var(--red);
    box-shadow: 0 0 0 0.26rem rgb(229 9 20 / 16%), 0 0 1.45rem rgb(229 9 20 / 90%);
    transform: scale(1.18);
  }
  100% {
    background: var(--black);
    transform: scale(1);
  }
}

@keyframes phase-marker-two {
  0%, 27%, 100% {
    background: var(--black);
    transform: scale(1);
  }
  29.5%, 99.5% {
    background: var(--red);
    box-shadow: 0 0 0 0.26rem rgb(229 9 20 / 16%), 0 0 1.45rem rgb(229 9 20 / 90%);
    transform: scale(1.18);
  }
}

@keyframes phase-marker-three {
  0%, 54.5%, 100% {
    background: var(--black);
    transform: scale(1);
  }
  57%, 99.5% {
    background: var(--red);
    box-shadow: 0 0 0 0.26rem rgb(229 9 20 / 16%), 0 0 1.45rem rgb(229 9 20 / 90%);
    transform: scale(1.18);
  }
}

.phase-number {
  margin: 0;
  color: #8f8f97;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgb(255 255 255 / 14%);
  border-left: 1px solid rgb(255 255 255 / 14%);
}

.outcome-grid article {
  min-height: 16rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid rgb(255 255 255 / 14%);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  background: linear-gradient(145deg, rgb(255 255 255 / 2.5%), transparent 58%);
}

.outcome-heading {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgb(229 9 20 / 55%);
}

.outcome-heading span {
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.outcome-heading h3 {
  margin: 0;
  color: #ededf0;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.outcome-grid ul {
  display: grid;
  gap: 0.75rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.outcome-grid li {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.15rem 0 0.15rem 1rem;
  color: #d2d2d7;
  font-size: 1rem;
  line-height: 1.45;
}

.metric-direction {
  display: inline-block;
  flex: 0 0 auto;
  color: #ff5962;
  font-size: 1.05rem;
  font-weight: 650;
}

.outcomes-section.is-flowing .metric-direction-up {
  animation: metric-rise 1.7s ease-in-out infinite;
}

.outcomes-section.is-flowing .metric-direction-down {
  animation: metric-fall 1.7s ease-in-out infinite;
}

.outcome-grid article:nth-child(2) .metric-direction {
  animation-delay: 120ms;
}

.outcome-grid article:nth-child(3) .metric-direction {
  animation-delay: 240ms;
}

.outcome-grid article:nth-child(4) .metric-direction {
  animation-delay: 360ms;
}

@keyframes metric-rise {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.22rem);
  }
}

@keyframes metric-fall {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.22rem);
  }
}

.outcome-grid li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.42rem;
  height: 1px;
  background: rgb(229 9 20 / 88%);
}

.outcomes-section .section-heading-grid > p {
  color: #c7c7cc;
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  text-align: left;
}

.contact-shell h2,
.contact-copy {
  grid-column: 1;
}

.contact-shell h2 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
  line-height: 1.08;
}

.contact-shell h2 em {
  color: #ff3944;
  font-style: normal;
}

.contact-copy {
  max-width: 46rem;
  margin-top: 1.25rem;
}

.contact-cta-group {
  display: inline-grid;
  grid-column: 2;
  grid-row: 1 / 3;
  justify-items: start;
  gap: 1rem;
  margin-top: 0;
}

.contact-action {
  display: inline-flex;
  gap: 1.35rem;
  align-items: center;
  margin: 0;
  padding: 1rem 1.4rem;
  border: 1px solid rgb(229 9 20 / 82%);
  background: linear-gradient(120deg, rgb(229 9 20 / 15%), transparent 70%);
  color: var(--white);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-action:disabled {
  cursor: default;
  opacity: 1;
}

.leverage-principle {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 2px solid var(--red);
  color: #d0d0d6;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.contact-action span {
  color: #ff4e58;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.contact-note {
  margin: 0;
  color: #9f9fa7;
  font-size: 0.95rem;
  line-height: 1.65;
}

.contact-fit {
  grid-column: 1 / -1;
  max-width: 58rem;
  width: 100%;
  margin: 2rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgb(255 255 255 / 14%);
  color: #96969e;
  font-size: 0.9rem;
  line-height: 1.75;
}

.contact-fit strong {
  color: #e5e5e8;
  font-weight: 650;
}

.contact-fit span {
  margin: 0 0.45rem;
  color: var(--red);
}

@media (max-width: 1260px) {
  .site-header-inner {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  .header-brand,
  .header-index {
    visibility: hidden;
  }

  .primary-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .primary-nav-link {
    flex: 0 0 auto;
  }
}

@media (max-width: 1200px) {
  .transformation-playback { top: 4.1rem; right: 0.6rem; }
  .leverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-diagram {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.4rem;
  }

  .component-group {
    width: min(100%, 43rem);
  }

  .system-arrow {
    line-height: 1;
    transform: rotate(90deg);
  }

  .result-node {
    width: min(100%, 24rem);
  }

  .system-section.is-flowing .system-arrow-one,
  .system-section.is-flowing .system-arrow-two {
    animation-name: system-arrow-flow-vertical;
  }
}

@media (max-width: 980px) {
  .contact-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-cta-group {
    grid-column: 1;
    grid-row: auto;
    margin-top: 2rem;
  }

  .header-brand,
  .header-index {
    visibility: hidden;
  }

  .section-heading-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
  }

  .section-heading-grid h2 {
    max-width: 14ch;
  }

  .phase-grid {
    grid-template-columns: 1fr;
  }

  .phase {
    min-height: 25rem;
  }

  .phase-link {
    justify-self: start;
    width: 1px;
    height: 3.5rem;
    margin: 0 0 0 0.3rem;
    background: transparent;
  }

  .phase-grid::before,
  .phase-grid::after {
    top: var(--phase-grid-padding);
    right: auto;
    bottom: var(--phase-grid-padding);
    left: calc(0.375rem - 0.5px);
    width: 1px;
    height: auto;
  }

  .phase-grid::after {
    left: calc(0.375rem - 1px);
    width: 2px;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .method-section.is-flowing .phase-grid::after {
    animation-name: phase-status-fill-vertical;
  }

  .phase-link::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    border-top: 6px solid rgb(229 9 20 / 82%);
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
    transform: translateX(-50%);
  }

  .workflow-path {
    flex-direction: column;
  }

  .workflow-conclusion {
    width: 100%;
  }

  .workflow-node {
    min-height: 0;
    padding: 1.25rem 1.5rem;
  }

  .workflow-orbit path {
    transform: rotate(90deg);
    transform-box: view-box;
    transform-origin: 50% 50%;
  }

  .workflow-connector {
    align-self: center;
    flex-basis: 3rem;
    width: 1px;
    height: auto;
    margin-left: 0;
  }

  .workflow-connector-runner {
    top: 0;
    right: -1px;
    bottom: 0;
    left: -1px;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .problem-section.is-flowing .workflow-connector-runner {
    animation-name: workflow-connector-flow-vertical;
  }

  .workflow-connector-manual {
    background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(229 9 20 / 72%), rgb(255 255 255 / 20%));
  }

  .workflow-connector::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    border-top: 5px solid rgb(229 9 20 / 82%);
    border-right: 3px solid transparent;
    border-bottom: 0;
    border-left: 3px solid transparent;
    transform: translateX(-50%);
  }

  .workflow-connector-manual::after {
    border-top-color: rgb(229 9 20 / 72%);
  }

  .workflow-path::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: -0.75rem;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .workflow-path::after {
    top: -22%;
    right: -0.4rem;
    bottom: auto;
    left: -0.4rem;
    width: auto;
    height: 22%;
    background: linear-gradient(180deg, transparent, rgb(229 9 20 / 7%), rgb(255 255 255 / 13%), rgb(229 9 20 / 9%), transparent);
  }

  .problem-section.is-flowing .workflow-path::before {
    animation-name: workflow-status-fill-vertical;
  }

  .problem-section.is-flowing .workflow-path::after {
    animation-name: workflow-status-sweep-vertical;
  }
}

@keyframes phase-status-fill-vertical {
  0% {
    opacity: 1;
    transform: scaleY(0);
  }
  81.75%,
  99.5% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

@keyframes workflow-status-fill-vertical {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  4% {
    opacity: 1;
  }
  88% {
    opacity: 1;
    transform: scaleY(1);
  }
  95% {
    opacity: 0.85;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

@keyframes workflow-status-sweep-vertical {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  4% {
    opacity: 1;
  }
  88% {
    opacity: 1;
    transform: translateY(555%);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(555%);
  }
}

@keyframes workflow-connector-flow-vertical {
  0% {
    opacity: 1;
    transform: scaleY(0);
  }
  0.8% {
    opacity: 1;
  }
  5.7% {
    opacity: 1;
    transform: scaleY(1);
  }
  7%,
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@keyframes system-arrow-flow-vertical {
  0%,
  24%,
  100% {
    opacity: 0.48;
    transform: rotate(90deg) translateX(0);
  }
  7%,
  15% {
    opacity: 1;
    transform: rotate(90deg) translateX(0.25rem);
  }
}

@media (max-width: 620px) {
  :root {
    --symbol-start: min(78vw, 26rem);
    --symbol-final: clamp(5.4rem, 23vw, 7rem);
    --wordmark-width: min(82vw, 28rem);
  }

  .brand-stage {
    position: relative;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + 2rem) 3rem;
  }

  .brand-lockup {
    flex-direction: column;
    gap: 0.75rem;
  }

  .header-brand,
  .header-index {
    display: none;
  }

  .site-header-inner {
    display: block;
    padding: 0 6.4rem 0 0.6rem;
  }

  .language-switcher {
    top: 0.65rem;
    right: 0.65rem;
  }

  .primary-nav {
    justify-content: flex-start;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .primary-nav-link {
    flex: 0 0 auto;
    padding: 0.52rem 0.58rem;
    font-size: 0.875rem;
  }

  .section-rail {
    left: 0.35rem;
  }

  .section-shell {
    padding: 6.5rem 2.2rem 5.5rem 2.85rem;
  }

  .contact-shell {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .contact-action {
    max-width: 100%;
    padding-inline: 1rem;
    gap: 0.75rem;
    letter-spacing: 0.09em;
    text-align: left;
    line-height: 1.4;
  }

  .section-heading-grid h2 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .outcome-grid {
    grid-template-columns: 1fr;
  }

  .leverage-grid {
    grid-template-columns: 1fr;
  }

  .leverage-card {
    min-height: 18rem;
  }

  .component-cluster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    height: auto;
  }

  .system-node {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 7rem;
  }

  .system-node-automation {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }

  .diagram-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  .system-definition {
    text-align: left;
  }

  .contact-fit span {
    margin: 0 0.18rem;
  }

  .outcome-grid {
    border-left: 0;
  }

  .outcome-grid article {
    padding-left: 0;
    border-right: 0;
  }

  .wordmark-copy h1 {
    font-size: clamp(2rem, 10vw, 3.5rem);
    letter-spacing: 0.045em;
  }

  .wordmark-descriptor {
    width: 100%;
    white-space: normal;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  .overview-message {
    margin-top: 0.85rem;
  }

  .overview-statement {
    font-size: 1rem;
    line-height: 1.4;
  }

  .overview-detail {
    display: block;
  }

  .overview-link {
    margin-top: 0.75rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 1100px) {
  .transformation-status {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    justify-content: stretch;
    align-items: start;
  }

  .transformation-stage {
    min-height: 57rem;
    margin-inline: 0;
  }

  .fragmented-scene {
    inset: 4.5rem 1.25rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, 10rem);
    gap: 2rem;
    align-content: center;
  }

  .fragmented-tools,
  .fragmented-problems {
    display: contents;
  }

  .transformation-lane-label { grid-column: 1; grid-row: 1; }
  .problem-lane-label { grid-column: 2; }
  .fragmented-tools::before { display: none; }
  .fragmented-tools .tool-node { grid-column: 1; }
  .fragmented-problems .problem-node { grid-column: 2; }
  .fragmented-node:nth-child(1) { grid-row: 2; }
  .fragmented-node:nth-child(2) { grid-row: 3; }
  .fragmented-node:nth-child(3) { grid-row: 4; }
  .fragmented-node:nth-child(4) { grid-row: 5; }
  .fragmented-node { min-height: 0; }
  .problem-node { justify-content: center; }
  .problem-node::before, .problem-node:last-child::before {
    top: 50%; bottom: auto; left: -2rem; width: 1.7rem; height: 0;
    border: 0; border-top: 1px dashed #ff303b; transform: none;
  }
  .problem-node::after {
    top: calc(50% - 0.22rem); bottom: auto; left: -0.8rem;
    transform: rotate(-45deg);
  }
  .tool-connector, .tool-node:nth-child(3) .tool-connector,
  .problem-connector, .problem-node:nth-child(3) .problem-connector {
    top: calc(100% + 1px); left: 50%; width: 1px; height: 2rem;
  }
  .tool-connector::after, .problem-connector::after,
  .problem-node:nth-child(3) .problem-connector::after {
    top: auto; bottom: 0.3rem; left: -0.2rem; right: auto;
    width: 0.45rem; height: 0.45rem; transform: rotate(135deg);
  }

  .coordinated-flow {
    grid-template-columns: minmax(7rem, 0.78fr) clamp(1.5rem, 4vw, 3rem) minmax(12rem, 1.35fr) clamp(1.5rem, 4vw, 3rem) minmax(7rem, 0.78fr);
  }

  .coordinated-node {
    padding: 0.85rem;
  }

  .integration-bridge {
    padding: 0 2rem;
  }
}

@media (max-width: 620px) {
  .transformation-status {
    display: grid;
    gap: 0.65rem;
    align-items: start;
  }

  .transformation-stage {
    min-height: 68rem;
  }

  .fragmented-scene,
  .coordinated-scene {
    inset: 1.25rem 0.9rem;
  }

  .fragmented-scene {
    inset: 4.5rem 0.75rem 1.5rem;
    grid-template-rows: auto repeat(4, 12.5rem);
    gap: 2rem;
  }

  .fragmented-node {
    min-height: 0;
    padding: 0.75rem 0.5rem;
  }

  .tool-node { display: flex; align-items: center; text-align: center; gap: 0.65rem; }
  .tool-icon { width: 2rem; }
  .fragmented-node strong { font-size: 1rem; overflow-wrap: anywhere; }
  .fragmented-node span { font-size: 0.75rem; letter-spacing: 0.07em; }
  .transformation-lane-label { font-size: 0.75rem; letter-spacing: 0.06em; padding-left: 0.9rem; }

  .coordinated-node strong {
    font-size: 0.8rem;
  }

  .transformation-conclusion { padding: 1.1rem; gap: 0.9rem; align-items: flex-start; }
  .conclusion-icon { width: 2rem; height: 2rem; font-size: 1.25rem; }
  .transformation-conclusion > div { padding-left: 0; border: 0; }

  .integration-bridge {
    gap: 0.6rem;
    padding: 0 0.75rem;
  }

  .integration-bridge > span {
    width: 12%;
  }

  .integration-core {
    gap: 0.65rem;
    padding: 0.75rem;
  }

  .integration-core img {
    width: 1.8rem;
    height: 1.8rem;
  }

  .integration-core strong {
    font-size: 0.58rem;
    white-space: normal;
  }

  .coordinated-scene {
    grid-template-rows: auto auto auto;
    gap: 1rem;
  }

  .coordinated-flow {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    width: min(100%, 21rem);
    margin: 0 auto;
  }

  .coordinated-node,
  .coordinated-operation {
    min-height: 5.6rem;
  }

  .coordinated-operation {
    min-height: 7.4rem;
  }

  .coordinated-operation img {
    width: 2rem;
    height: 2rem;
  }

  .coordinated-arrow {
    width: 1px;
    height: 1.7rem;
    justify-self: center;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .coordinated-arrow::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    border-top: 7px solid #ff303b;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
    transform: translateX(-50%);
  }

  .coordinated-arrow i {
    top: 0;
    left: -1px;
    width: 3px;
    height: 38%;
    background: linear-gradient(180deg, transparent, #fff, #ff303b);
  }

  .problem-section.is-flowing .coordinated-arrow-one {
    animation-name: transformation-arrow-one-vertical;
  }

  .problem-section.is-flowing .coordinated-arrow-two {
    animation-name: transformation-arrow-two-vertical;
  }

  .problem-section.is-flowing .coordinated-arrow i {
    animation-name: transformation-arrow-runner-vertical;
  }

  .coordination-components {
    gap: 0.35rem;
  }

  .coordination-components span {
    padding: 0.35rem 0.45rem;
    font-size: 0.53rem;
  }

  .controlled-checkpoints {
    gap: 0.45rem 1rem;
  }

  .controlled-checkpoints span {
    font-size: 0.56rem;
  }

  .transformation-conclusion {
    width: 100%;
  }
}

@keyframes transformation-arrow-one-vertical {
  0%, 51% { opacity: 0; transform: scaleY(0); }
  59%, 94% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes transformation-arrow-two-vertical {
  0%, 58% { opacity: 0; transform: scaleY(0); }
  66%, 94% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes transformation-arrow-runner-vertical {
  0%, 53% { opacity: 0; transform: translateY(0); }
  58% { opacity: 1; }
  72% { opacity: 0; transform: translateY(165%); }
  100% { opacity: 0; transform: translateY(165%); }
}

@media (prefers-reduced-motion: reduce) {
  .transformation-playback { display: none !important; }
  .logo-piece,
  .piece-top,
  .piece-left,
  .piece-bottom-right {
    opacity: 1;
    transform: none;
  }

  .logo-shell {
    width: var(--symbol-final);
  }

  .wordmark-window {
    width: var(--wordmark-width);
  }

  .wordmark-copy {
    transform: none;
  }

  .wordmark-descriptor,
  .overview-statement,
  .overview-detail,
  .overview-link,
  .ambient-glow,
  .hairline {
    opacity: 1;
    transform: none;
  }

  .panel {
    opacity: 0.82;
  }

  .intro-page.is-playing .panel::after {
    animation: none !important;
    opacity: 0.58;
  }

  .wordmark-copy h1 {
    background-position: 50% 50%;
  }

  .brand-stage.is-playing *,
  .intro-page.is-playing *,
  .site-ready .site-header,
  .site-ready .section-rail {
    animation: none !important;
  }

  .site-header {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .section-rail {
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .workflow-path::before,
  .workflow-path::after,
  .phase-grid::after,
  .phase,
  .phase-heading::before,
  .phase-number,
  .phase h3,
  .phase-action,
  .phase-steps,
  .phase-output,
  .metric-direction {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .workflow-orbit path,
  .workflow-connector-runner,
  .workflow-connector,
  .workflow-connector::before,
  .workflow-connector::after {
    animation: none !important;
  }

  .workflow-orbit path,
  .workflow-connector-runner {
    opacity: 0 !important;
  }

  .transformation-state-before,
  .fragmented-scene,
  .integration-bridge {
    display: none !important;
  }

  .transformation-state-after {
    position: static;
    display: inline-flex;
    opacity: 1 !important;
    transform: none !important;
  }

  .coordinated-scene,
  .coordinated-operation,
  .coordinated-arrow,
  .coordinated-arrow i,
  .coordination-components span,
  .controlled-checkpoints span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .coordinated-arrow i {
    display: none;
  }

  .leverage-card,
  .system-node,
  .result-node,
  .system-arrow {
    animation: none !important;
    transform: none !important;
  }
}

/* On narrow screens the two lanes become paired columns. The right column
   is enclosed in place, keeping all four mappings legible and connected. */
@media (max-width: 1200px) {
  .problem-section .transformation-stage { min-height: 70rem; }
  .problem-section .fragmented-scene { grid-template-rows: auto repeat(4, 11.5rem); }
  .problem-section.is-flowing .fragmented-problems { animation: none; }
  .coordination-frame { grid-column: 2; grid-row: 2 / 6; inset: -4.5rem -0.5rem -4.5rem; }
  .coordination-frame-heading { top: 0.7rem; left: 0.45rem; right: 0.45rem; gap: 0.4rem; }
  .coordination-frame-heading strong { font-size: 0.75rem; letter-spacing: 0.02em; }
  .coordination-frame-heading img { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; }
  .coordination-frame-result { font-size: 0.75rem; bottom: 0.7rem; }
  .coordination-frame-result span { padding: 0 0.15rem; }
  .problem-lane-label .coordination-after { display: none; }
  .coordination-flow-fill { grid-column: 2; grid-row: 2 / 6; top: 0; bottom: 0; left: 50%; right: auto; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .problem-section.is-flowing .coordination-flow-fill { animation-name: coordination-run-vertical; }
  .tool-node::after { top: 50%; left: 100%; width: 1.5rem; height: 1px; transform: scaleX(0); transform-origin: left; }
  .problem-section.is-flowing .tool-node::after { animation-name: coordination-connect-horizontal; }
}
@media (max-width: 620px) {
  .problem-section .transformation-stage { min-height: 77rem; }
  .problem-section .fragmented-scene { grid-template-rows: auto repeat(4, 12.5rem); }
  .coordination-copy > div { gap: 0.35rem; }
}
@keyframes coordination-run-vertical {
  0%, 48% { transform: scaleY(0); opacity: 0; }
  49% { transform: scaleY(0); opacity: 1; }
  77%, 94% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes coordination-connect-horizontal {
  0%, 39%, 100% { transform: scaleX(0); }
  46%, 94% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .problem-section .fragmented-scene { display: grid !important; }
  .problem-section .fragmented-scene *,
  .problem-section .fragmented-scene *::before,
  .problem-section .fragmented-scene *::after { animation: none !important; }
  .coordination-before { display: none; }
  .coordination-after, .coordination-frame { opacity: 1; transform: none; }
  .fragmented-problems { transform: translateX(-8%); }
  .problem-node { background-color: #141518; border-color: #655157; }
  .problem-node::before, .problem-node::after { opacity: 0; }
  .tool-node::after { transform: scaleY(1); }
  .coordination-flow-fill { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1200px) {
  .fragmented-problems { transform: none; }
  .coordination-flow-fill { transform: scaleY(1); }
  .tool-node::after { transform: scaleX(1); }
}

/* The closing CTA now opens the bilingual inquiry flow. */
a.contact-action { text-decoration: none; }
a.contact-action:hover { background-color: rgb(229 9 20 / 12%); }
a.contact-action:focus-visible { outline: 2px solid var(--white); outline-offset: 5px; }