:root {
  --night: #0b0413;
  --plum: #150826;
  --plum2: #221038;
  --violet: #5a2d8a;
  --mauve: #b083ae;
  --soft: #d8c4d7;
  --paper: #eae3eb;
  --signal: #c9a4ff;
  --hot: #f3e9ff;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 1.40625vw;
  background: var(--night);
}
body {
  min-width: 320px;
  background: var(--night);
  color: #fff;
  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  transition: background-color 0.35s;
}
a {
  color: inherit;
  text-decoration: none;
}

body.loading {
  overflow: hidden;
}
.loading #viewport,
.loading .site-header {
  visibility: hidden;
}
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #150826;
}
.loader-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
#loaderMark {
  width: 9.5rem;
  height: 9.5rem;
  overflow: visible;
}
.loader-wordmark {
  width: 13rem;
  height: auto;
  opacity: 0;
}
.loader-bar {
  width: 11rem;
  height: 2px;
  overflow: hidden;
  background: rgba(216, 196, 215, 0.15);
}
.loader-bar-fill {
  width: 100%;
  height: 100%;
  background: var(--mauve);
  transform: scaleX(0);
  transform-origin: left center;
}
.loader-count {
  font:
    400 0.6rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
  color: var(--soft);
}

.site-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: 3.1rem;
  padding: 0 1.6rem;
  display: flex;
  align-items: center;
  background: rgba(11, 4, 19, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 196, 215, 0.13);
  color: #fff;
  transition: 0.35s;
}
.site-header__logo {
  display: flex;
  align-items: center;
  width: 8.5rem;
  height: 2rem;
}
.site-header__logo .header-wordmark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.header-mark {
  display: none;
}
.site-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  white-space: nowrap;
}
.site-menu-button {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  padding: 0.6rem 0.2rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.site-menu-button i {
  display: block;
  height: 0.11rem;
  margin: 0.25rem 0;
  background: currentColor;
  border-radius: 2px;
}
.site-menu-button i:last-child {
  width: 64%;
  margin-left: auto;
}
.site-nav {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0b0413;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}
.site-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-nav ul {
  list-style: none;
  text-align: center;
}
.site-nav li {
  margin: 0.7rem;
}
.site-nav a {
  font-size: 2rem;
  color: inherit;
  text-decoration: none;
}
.site-nav__close {
  position: absolute;
  right: 1.6rem;
  top: 0.7rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
body.on-paper .site-header {
  color: var(--plum2);
  background: rgba(234, 227, 235, 0.91);
  border-bottom-color: rgba(47, 22, 80, 0.12);
}
body.on-paper .header-wordmark {
  filter: invert(1) brightness(0.24) sepia(1) hue-rotate(238deg) saturate(5);
}
/* Header stays viewport-fixed and operable while service-route camera overrides move the world. */
body.route-active .site-header {
  opacity: 1;
  pointer-events: auto;
}
body.route-active .site-nav:not(.open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#world {
  position: absolute;
  left: 0;
  top: 0;
  width: 234rem;
  height: 752rem;
  will-change: transform;
}
.chapter {
  position: absolute;
  overflow: hidden;
}
.chapter > * {
  position: absolute;
}
.chapter-hero {
  left: 0;
  top: 0;
  width: 74rem;
  height: 45rem;
}
.about-shared-ground {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 45rem;
  width: 154rem;
  height: 51.2rem;
  background-color: #eae3eb;
  background-image:
    linear-gradient(rgba(47, 22, 80, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 22, 80, 0.035) 1px, transparent 1px);
  background-size: 4.8rem 4.8rem;
}
.chapter-principle {
  left: 0;
  top: 45rem;
  width: 74rem;
  height: 51.2rem;
  color: var(--plum2);
}
.ground {
  inset: 0;
  z-index: 0;
}
.chapter-hero .ground {
  overflow: hidden;
  background:
    radial-gradient(
      38rem 25rem at 18% 20%,
      rgba(90, 45, 138, 0.29),
      transparent 70%
    ),
    radial-gradient(
      25rem 23rem at 82% 33%,
      rgba(90, 45, 138, 0.17),
      transparent 72%
    ),
    linear-gradient(165deg, var(--night), var(--plum) 63%, #10051d);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  background: transparent;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(11, 4, 19, 0.34) 0%,
      rgba(11, 4, 19, 0.05) 42%,
      rgba(11, 4, 19, 0.46) 100%
    ),
    radial-gradient(
      ellipse 46rem 35rem at 18% 52%,
      rgba(11, 4, 19, 0.82) 0%,
      rgba(11, 4, 19, 0.7) 34%,
      rgba(11, 4, 19, 0.48) 52%,
      rgba(11, 4, 19, 0.16) 72%,
      rgba(11, 4, 19, 0) 88%
    ),
    linear-gradient(
      90deg,
      rgba(11, 4, 19, 0.92) 0%,
      rgba(11, 4, 19, 0.84) 25%,
      rgba(11, 4, 19, 0.66) 45%,
      rgba(11, 4, 19, 0.38) 62%,
      rgba(11, 4, 19, 0.2) 80%,
      rgba(11, 4, 19, 0.28) 100%
    );
}
.decorative-grid {
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(216, 196, 215, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 196, 215, 0.045) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  mask-image: linear-gradient(90deg, transparent, #000);
}

.eyebrow,
.principle-kicker {
  z-index: 4;
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.eyebrow {
  left: 7.2rem;
  top: 9.6rem;
  color: var(--mauve);
}
.hero-rule,
.hero-wordmark {
  display: none;
}
h1 {
  z-index: 4;
  left: 7.2rem;
  top: 11.8rem;
  width: 36rem;
  font-size: 2.65rem;
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 600;
}
#hero-title {
  overflow: visible;
}
.hero-line {
  display: block;
  overflow: hidden;
  height: 1.22em;
  padding-top: 0.04em;
  padding-bottom: 0.1em;
  margin-top: -0.04em;
  margin-bottom: -0.1em;
}
.hero-line-inner {
  display: block;
  line-height: 1.04;
}
body.loading .chapter-hero .eyebrow {
  opacity: 0;
}
body.loading .hero-line-inner {
  opacity: 0;
}
body.loading .hero-body {
  opacity: 0;
}
body.loading .hero-cta {
  opacity: 0;
}
.hero-body {
  z-index: 4;
  left: 7.2rem;
  top: 19.4rem;
  width: 30rem;
  color: var(--soft);
  font-size: 0.8rem;
  line-height: 1.62;
}
.hero-cta {
  z-index: 4;
  left: 7.2rem;
  top: 23.3rem;
  height: 2.6rem;
  padding: 0 1.55rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 99rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #f2eaf2;
  box-shadow: 0 0.35rem 1rem rgba(5, 2, 10, 0.16);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  color: var(--plum);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .hero-cta:hover {
    transform: translateY(-0.12rem);
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: 0 0.55rem 1.35rem rgba(5, 2, 10, 0.22);
  }
}
.hero-cta:focus-visible {
  outline: 2px solid #f3e9ff;
  outline-offset: 0.2rem;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta {
    transition: none;
  }
  .hero-cta:hover,
  .hero-cta:focus-visible {
    transform: none;
  }
}
.hero-mark {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.loading .chapter-hero .eyebrow,
  body.loading .hero-line-inner,
  body.loading .hero-body,
  body.loading .hero-cta {
    opacity: 1;
    transform: none;
  }
}

.about-view1-copy {
  z-index: 4;
  inset: 0;
}
.about-view1-kicker,
.about-view1-headline,
.about-view1-body {
  position: absolute;
}
.about-view1-kicker {
  z-index: 4;
  left: 14.6rem;
  top: 8.4rem;
  font:
    500 0.54rem "DM Mono",
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a2d8a;
}
.about-view1-headline {
  z-index: 4;
  left: 14.6rem;
  top: 10.2rem;
  width: 27rem;
  font-size: 1.92rem;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #150826;
}
.about-view1-headline span,
.about-view2-headline span {
  display: block;
  white-space: nowrap;
}
.about-view1-body {
  z-index: 4;
  left: 14.6rem;
  top: 19.2rem;
  width: 26.8rem;
  color: #5b5560;
  font-size: 0.74rem;
  line-height: 1.62;
  font-weight: 400;
}
.about-view1-body p {
  position: static;
}
.about-overview {
  z-index: 3;
  left: 35rem;
  top: 18.2rem;
  width: 38rem;
  height: auto;
  object-fit: contain;
}

.world-signal {
  position: absolute;
  z-index: 2;
  left: 0;
  top: -15rem;
  width: 234rem;
  height: 767rem;
  overflow: visible;
  pointer-events: none;
}
.world-signal path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sig-halo {
  stroke: var(--violet);
  stroke-width: 22;
  opacity: 0.2;
}
.sig-halo {
  display: none;
}
.sig-glow {
  stroke: var(--signal);
  stroke-width: 9;
  opacity: 0.4;
}
.sig-core {
  stroke: var(--hot);
  stroke-width: 2.8;
}
.paper-signal .sig-halo {
  stroke: var(--violet);
  opacity: 0.14;
}
.paper-signal .sig-glow {
  stroke: var(--violet);
  opacity: 0.3;
}
.paper-signal .sig-core {
  stroke: var(--plum2);
}

#heroMark circle {
  transform-box: fill-box;
  transform-origin: center;
}

@media (max-width: 820px) {
  html {
    font-size: 16px;
  }
  .about-shared-ground {
    display: none;
  }
  .site-header {
    height: 58px;
    padding: 0 18px;
  }
  .site-header__logo {
    width: 128px;
  }
  .site-header__title {
    display: none;
  }
  .site-menu-button {
    width: 42px;
    height: 42px;
  }
  .site-nav a {
    font-size: 28px;
  }
  body.on-paper .site-menu-button {
    color: var(--plum2);
  }
  #viewport {
    height: auto;
    overflow: visible;
    padding-top: 58px;
  }
  #world {
    position: relative;
    width: 100%;
    height: auto !important;
    transform: none !important;
    will-change: auto;
    display: flex;
    flex-direction: column;
  }
  .chapter-divisions {
    order: 10;
  }
  .division-screen-av {
    order: 11;
  }
  .av-services {
    order: 12;
  }
  .division-screen-it {
    order: 13;
  }
  .it-services {
    order: 14;
  }
  .division-screen-dc {
    order: 15;
  }
  .dc-services {
    order: 16;
  }
  .how-entry {
    order: 20;
  }
  .how-work {
    order: 21;
  }
  .why-spaces {
    order: 22;
  }
  .chapter-contact {
    order: 23;
  }
  .chapter {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .chapter > * {
    position: relative;
  }
  .chapter-hero {
    min-height: calc(100svh - 58px);
    padding: 74px 24px 68px;
  }
  .chapter-hero .ground,
  .decorative-grid {
    position: absolute;
    inset: 0;
  }
  .eyebrow,
  .hero-rule,
  .hero-wordmark,
  h1,
  .hero-body,
  .hero-cta,
  .hero-mark {
    left: auto;
    top: auto;
    width: auto;
  }
  .eyebrow {
    font-size: 10px;
    line-height: 1.6;
  }
  .hero-rule {
    display: none;
  }
  .hero-wordmark {
    display: none;
  }
  h1 {
    margin-top: 34px;
    font-size: clamp(24px, 6.2vw, 32px);
    line-height: 1.05;
    letter-spacing: -0.04em;
  }
  .hero-line-inner {
    white-space: nowrap;
  }
  .hero-body {
    margin-top: 30px;
    font-size: 15px;
  }
  .hero-cta {
    display: inline-flex;
    min-height: 44px;
    margin-top: 30px;
  }
  .hero-mark {
    display: none;
  }
  .hero-video {
    object-position: 72% center;
  }
  .chapter-principle {
    padding: 72px 22px 64px;
    background: #eae3eb;
  }
  .about-view1-copy {
    position: relative;
    inset: auto;
  }
  .about-view1-kicker,
  .about-view1-headline,
  .about-view1-body,
  .about-overview {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }
  .about-view1-kicker {
    font-size: 22px;
  }
  .about-view1-headline {
    margin-top: 24px;
    font-size: 30px;
    line-height: 1.08;
  }
  .about-view1-headline br {
    display: none;
  }
  .about-view1-headline span,
  .about-view2-headline span {
    white-space: normal;
  }
  .about-view1-body {
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.55;
  }
  .about-overview {
    width: 100%;
    height: auto;
    max-width: 520px;
    margin-top: 28px;
  }
  .world-signal {
    display: none;
  }
}

.chapter-principles {
  left: 74rem;
  top: 45rem;
  width: 80rem;
  height: 51.2rem;
  color: #150826;
}
.about-view2-main {
  z-index: 4;
  inset: 0;
}
.about-view2-kicker,
.about-view2-headline,
.about-view2-body,
.about-process {
  position: absolute;
}
.about-view2-kicker {
  left: 8rem;
  top: 20rem;
  font:
    500 0.54rem "DM Mono",
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a2d8a;
}
.about-view2-headline {
  left: 8rem;
  top: 23rem;
  width: 28rem;
  font-size: 1.68rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #150826;
}
.about-view2-body {
  left: 8rem;
  top: 29.8rem;
  width: 28rem;
  font-size: 0.7rem;
  line-height: 1.58;
  font-weight: 400;
  color: #5b5560;
}
.about-process {
  left: 8rem;
  top: 35.5rem;
  width: 27rem;
  list-style: none;
}
.about-process li {
  position: relative;
  height: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.about-process b {
  width: 2rem;
  font:
    500 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.12em;
  color: #b083ae;
}
.about-process span {
  font-size: 0.62rem;
  line-height: 1.25;
  font-weight: 600;
  color: #2f1650;
}
.about-statement {
  z-index: 4;
  left: 44rem;
  width: 19rem;
}
.statement-mission {
  top: 20rem;
}
.statement-vision {
  top: 37rem;
}
.statement-label {
  position: static;
  margin-bottom: 1rem;
  font:
    500 0.52rem "DM Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a2d8a;
}
.statement-copy {
  position: static;
  font-size: 0.68rem;
  line-height: 1.55;
  font-weight: 400;
  color: #5b5560;
}

.about-process span {
  font-size: clamp(15px, 0.76rem, 17px);
}

.about-process b {
  font-size: clamp(11px, 0.56rem, 13px);
}

@media (min-width: 821px) {
  .about-view1-kicker,
  .about-view2-kicker,
  .statement-label {
    font-family: "Alexandria", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .about-view1-body,
  .about-view2-body,
  .statement-copy {
    font-size: 21px;
    line-height: 1.55;
  }
}

body.on-paper {
  background: var(--paper);
}

/* c05 — Solutions hub. World x 740→1540, y 962→1462. Dark ground starts at the About seam. */
.chapter-divisions {
  left: 74rem;
  top: 96.2rem;
  width: 80rem;
  height: 50rem;
  color: #fff;
}
.chapter-divisions .ground {
  background:
    radial-gradient(
      20rem 16rem at 50% 50%,
      rgba(90, 45, 138, 0.15),
      transparent 72%
    ),
    linear-gradient(180deg, #150826, #0b0413 76%);
}
.divisions-grid {
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(216, 196, 215, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 196, 215, 0.035) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
}
.divisions-kicker,
.division-number,
.division-layer,
.division-capabilities,
.division-direction {
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
}
.divisions-kicker {
  z-index: 4;
  color: var(--mauve);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
}
.divisions-headline {
  z-index: 4;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.divisions-support {
  z-index: 4;
  color: var(--soft);
  font-size: 0.72rem;
  line-height: 1.58;
}
.division-junction {
  z-index: 3;
  left: 42rem;
  top: 20.5rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid rgba(255, 231, 255, 0.68);
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0.9rem rgba(232, 143, 255, 0.34);
  transform: translate(-50%, -50%);
}
.division-lane {
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: default;
}
body.hub-ready:not(.route-active) .division-lane {
  cursor: pointer;
}
body.hub-ready:not(.route-active) .division-lane:focus-visible {
  outline: 1px solid rgba(201, 164, 255, 0.72);
  outline-offset: 0.5rem;
}
.division-lane::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0.2rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(176, 131, 174, 0.08),
    rgba(176, 131, 174, 0.28),
    rgba(176, 131, 174, 0.08)
  );
}
.division-terminal {
  position: absolute;
  z-index: 3;
  left: 10rem;
  top: 0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid rgba(255, 231, 255, 0.6);
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0.7rem rgba(232, 143, 255, 0.28);
  transform: translate(-50%, -50%);
}
.division-guide {
  position: absolute;
  z-index: 3;
  left: 10rem;
  top: 0.7rem;
  width: 1px;
  height: 1.35rem;
  background: rgba(176, 131, 174, 0.16);
}
.division-meta {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.division-meta b {
  color: var(--hot);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
}
.division-meta span {
  color: var(--mauve);
  font-size: 0.48rem;
  letter-spacing: 0.18em;
}
.division-title {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 4.6rem;
  font-size: 1.28rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.division-capabilities {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 8.4rem;
  color: rgba(216, 196, 215, 0.76);
  font-size: 0.46rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
  text-transform: none;
}
.division-direction {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  color: var(--mauve);
  font-size: 0.45rem;
  letter-spacing: 0.18em;
}
.division-screen {
  width: 80rem;
  height: 50rem;
  color: #fff;
}
.division-screen-dc {
  left: 0;
  top: 102rem;
  width: 74rem;
}
.division-screen-av {
  left: 154rem;
  top: 102rem;
}
.division-screen-it {
  left: 74rem;
  top: 152rem;
}
.division-screen .ground {
  background:
    radial-gradient(
      24rem 19rem at 50% 58%,
      rgba(90, 45, 138, 0.1),
      transparent 72%
    ),
    #0b0413;
}
.division-screen-dc .ground {
  background:
    radial-gradient(
      24rem 19rem at 50% 58%,
      rgba(90, 45, 138, 0.1),
      transparent 72%
    ),
    linear-gradient(90deg, #0b0413, #150826);
}
.division-screen-it .ground {
  background:
    radial-gradient(
      24rem 19rem at 50% 58%,
      rgba(90, 45, 138, 0.1),
      transparent 72%
    ),
    linear-gradient(110deg, #150826, #0b0413 74%);
}
.division-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #0b0413;
  z-index: 1;
}
.division-screen-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(11, 4, 19, 0.72),
      rgba(11, 4, 19, 0.24) 54%,
      rgba(11, 4, 19, 0.5)
    ),
    linear-gradient(180deg, rgba(11, 4, 19, 0.24), rgba(11, 4, 19, 0.5));
}
.division-screen-it .division-screen-video-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(11, 4, 19, 0.38) 0%,
      rgba(11, 4, 19, 0.14) 40%,
      rgba(11, 4, 19, 0.48) 100%
    ),
    radial-gradient(
      ellipse 43rem 33rem at 18% 55%,
      rgba(11, 4, 19, 0.93) 0%,
      rgba(11, 4, 19, 0.82) 34%,
      rgba(17, 6, 29, 0.60) 52%,
      rgba(17, 6, 29, 0.25) 72%,
      rgba(11, 4, 19, 0) 89%
    ),
    linear-gradient(
      90deg,
      rgba(11, 4, 19, 0.92) 0%,
      rgba(11, 4, 19, 0.85) 25%,
      rgba(11, 4, 19, 0.64) 44%,
      rgba(11, 4, 19, 0.38) 63%,
      rgba(11, 4, 19, 0.24) 82%,
      rgba(11, 4, 19, 0.30) 100%
    );
}
.division-screen-dc .division-screen-video-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(11, 4, 19, 0.38) 0%,
      rgba(11, 4, 19, 0.14) 40%,
      rgba(11, 4, 19, 0.48) 100%
    ),
    radial-gradient(
      ellipse 43rem 33rem at 82% 55%,
      rgba(11, 4, 19, 0.93) 0%,
      rgba(11, 4, 19, 0.82) 34%,
      rgba(17, 6, 29, 0.60) 52%,
      rgba(17, 6, 29, 0.25) 72%,
      rgba(11, 4, 19, 0) 89%
    ),
    linear-gradient(
      270deg,
      rgba(11, 4, 19, 0.92) 0%,
      rgba(11, 4, 19, 0.85) 25%,
      rgba(11, 4, 19, 0.64) 44%,
      rgba(11, 4, 19, 0.38) 63%,
      rgba(11, 4, 19, 0.24) 82%,
      rgba(11, 4, 19, 0.30) 100%
    );
}
.division-screen .division-screen-layer,
.division-screen .division-screen-title,
.division-screen .division-screen-intro {
  z-index: 4;
}
.division-screen-grid {
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(216, 196, 215, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 196, 215, 0.032) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at 50% 56%, #000, transparent 82%);
}
.division-screen-layer,
.delivery-field p,
.delivery-field span,
.service-item b,
.service-item p,
.route-back {
  font-family: "DM Mono", monospace;
}
.division-screen-layer {
  z-index: 4;
  left: 8rem;
  top: 7rem;
  color: var(--mauve);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
}
.division-screen-title {
  z-index: 4;
  left: 8rem;
  top: 9.6rem;
  width: 31rem;
  font-size: 2.1rem;
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.division-screen-intro {
  z-index: 4;
  left: 8rem;
  top: 15.4rem;
  width: 31rem;
  color: var(--soft);
  font-size: 0.68rem;
  line-height: 1.55;
}
.division-screen-dc .division-screen-layer,
.division-screen-dc .division-screen-title,
.division-screen-dc .division-screen-intro {
  left: 6rem;
}
.division-screen-dc .division-screen-title {
  width: 28.5rem;
}
.division-screen-dc .division-screen-intro {
  width: 29rem;
}
.route-back {
  z-index: 4;
  left: 62.5rem;
  top: 7rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mauve);
  font-size: 0.46rem;
  letter-spacing: 0.15em;
  cursor: pointer;
}
.route-back-dc {
  left: 59rem;
}
.delivery-field {
  z-index: 4;
  left: 48rem;
  top: 11.2rem;
  width: 23.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.8rem;
}
.division-screen-dc .delivery-field {
  left: 43rem;
}
.delivery-field p {
  position: relative;
  grid-column: 1/-1;
  margin-bottom: 1.25rem;
  color: var(--mauve);
  font-size: 0.47rem;
  letter-spacing: 0.2em;
}
.delivery-field span {
  position: relative;
  padding: 0.72rem 0;
  border-top: 1px solid rgba(176, 131, 174, 0.16);
  color: var(--soft);
  font-size: 0.46rem;
  line-height: 1.35;
}
.service-item {
  z-index: 4;
  width: 28rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(176, 131, 174, 0.16);
}
.service-left {
  left: 8rem;
}
.service-right {
  left: 48rem;
  width: 25rem;
}
.division-screen-dc .service-left {
  left: 6rem;
  width: 25rem;
}
.division-screen-dc .service-right {
  left: 43rem;
  width: 25rem;
}
.service-row-1 {
  top: 27rem;
}
.service-row-2 {
  top: 33.5rem;
}
.service-row-3 {
  top: 40rem;
}
.service-item b {
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--hot);
  font-size: 0.46rem;
  letter-spacing: 0.18em;
  font-weight: 400;
}
.service-item h3 {
  position: relative;
  margin-left: 2.6rem;
  font-size: 0.82rem;
  line-height: 1.15;
  font-weight: 600;
}
.service-item p {
  position: relative;
  margin: 0.65rem 0 0 2.6rem;
  color: rgba(216, 196, 215, 0.7);
  font-size: 0.43rem;
  line-height: 1.45;
}
.service-axis-row {
  z-index: 3;
  left: 0;
  width: 100%;
  height: 1px;
}
.service-axis-1 {
  top: 29rem;
}
.service-axis-2 {
  top: 35.5rem;
}
.service-axis-3 {
  top: 42rem;
}
.service-axis-row span {
  position: absolute;
  left: 42rem;
  top: 0;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid rgba(201, 164, 255, 0.62);
  border-radius: 50%;
  background: #150826;
  box-shadow: 0 0 0.55rem rgba(201, 164, 255, 0.18);
  transform: translate(-50%, -50%);
}
.service-axis-row i {
  position: absolute;
  top: 0;
  height: 1px;
  background: rgba(176, 131, 174, 0.16);
}
.service-axis-row i:first-child {
  left: 36rem;
  width: 4.8rem;
}
.service-axis-row i:last-child {
  left: 43.2rem;
  width: 4.8rem;
}
.division-screen-dc .service-axis-row span {
  left: 35.5rem;
}
.division-screen-dc .service-axis-row i:first-child {
  left: 31rem;
  width: 3.3rem;
}
.division-screen-dc .service-axis-row i:last-child {
  left: 36.7rem;
  width: 6.3rem;
}
.route-signal {
  pointer-events: none;
}

.dc-services {
  left: 0;
  top: 152rem;
  width: 74rem;
  height: 250rem;
  color: #fff;
  overflow: hidden;
}
.dc-services-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      34rem 60rem at 48% 12%,
      rgba(90, 45, 138, 0.1),
      transparent 75%
    ),
    linear-gradient(90deg, #0b0413, #150826);
}
.dc-services-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(216, 196, 215, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 196, 215, 0.028) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7),
    #000 50%,
    rgba(0, 0, 0, 0.7)
  );
}
.dc-overview {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.dc-overview.is-active,
.dc-detail.is-active {
  opacity: 1;
  transform: none;
}
.dc-overview-card {
  position: absolute;
  z-index: 3;
  width: 20.3rem;
  height: 11.6rem;
  overflow: hidden;
  border: 1px solid rgba(176, 131, 174, 0.22);
  border-radius: 0.25rem;
}
.dc-overview-card img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.dc-overview-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 4, 19, 0.03) 0%,
    rgba(11, 4, 19, 0.12) 35%,
    rgba(11, 4, 19, 0.88) 100%
  );
}
.dc-overview-card span {
  position: absolute;
  z-index: 4;
  left: 1.4rem;
  bottom: 3.7rem;
  color: var(--mauve);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
}
.dc-overview-card h3 {
  position: absolute;
  z-index: 4;
  left: 1.4rem;
  right: 1.2rem;
  bottom: 1.2rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dc-overview-card-01 {
  left: 7.8rem;
  top: 8.6rem;
}
.dc-overview-card-02 {
  left: 29.9rem;
  top: 8.6rem;
}
.dc-overview-card-03 {
  left: 52rem;
  top: 8.6rem;
}
.dc-overview-card-04 {
  left: 7.8rem;
  top: 21.8rem;
}
.dc-overview-card-05 {
  left: 29.9rem;
  top: 21.8rem;
}
.dc-overview-card-06 {
  left: 52rem;
  top: 21.8rem;
}
.dc-detail {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 80rem;
  height: 32rem;
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.dc-detail-01 {
  top: 38rem;
}
.dc-detail-02 {
  top: 70rem;
}
.dc-detail-03 {
  top: 102rem;
}
.dc-detail-04 {
  top: 134rem;
}
.dc-detail-05 {
  top: 166rem;
}
.dc-detail-06 {
  top: 198rem;
}
.dc-detail-image {
  position: absolute;
  z-index: 3;
  width: 29.4rem;
  height: 16.8rem;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(176, 131, 174, 0.22);
  border-radius: 0.25rem;
}
.dc-detail-copy {
  position: absolute;
  z-index: 4;
  width: 28rem;
}
.dc-detail-odd .dc-detail-image {
  left: 8.1rem;
  top: 7.6rem;
}
.dc-detail-even .dc-detail-image {
  left: 42.5rem;
  top: 7.6rem;
}
.dc-detail-odd .dc-detail-copy {
  left: 44.5rem;
  top: 9.6rem;
}
.dc-detail-even .dc-detail-copy {
  left: 10.5rem;
  top: 9.6rem;
}
.dc-detail-copy p {
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
  color: var(--mauve);
}
.dc-detail-copy h3 {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.dc-detail-copy span {
  display: block;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(176, 131, 174, 0.2);
  font:
    400 0.7rem/1.55 Alexandria,
    system-ui,
    sans-serif;
  color: rgba(216, 196, 215, 0.76);
}
.dc-service-signal {
  pointer-events: none;
}
.dc-back-fixed {
  position: fixed;
  z-index: 80;
  right: 2.2rem;
  top: 5.2rem;
  display: none;
  pointer-events: none;
  padding: 0 0 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(176, 131, 174, 0.45);
  background: none;
  color: var(--soft);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.16em;
  cursor: pointer;
}
body.route-data-center .dc-back-fixed,
body.how-source-dc .dc-back-fixed,
body.route-downstream-dc .dc-back-fixed {
  display: block;
  pointer-events: auto;
}
.it-services {
  left: 74rem;
  top: 202rem;
  width: 80rem;
  height: 261rem;
  color: #fff;
  overflow: hidden;
}
.it-services-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      34rem 62rem at 50% 10%,
      rgba(90, 45, 138, 0.11),
      transparent 75%
    ),
    linear-gradient(110deg, #150826, #0b0413 74%);
}
.it-services-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(216, 196, 215, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 196, 215, 0.028) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7),
    #000 50%,
    rgba(0, 0, 0, 0.7)
  );
}
.it-overview {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.it-overview.is-active,
.it-detail.is-active {
  opacity: 1;
  transform: none;
}
.it-overview-card {
  position: absolute;
  z-index: 3;
  width: 20.3rem;
  height: 11.6rem;
  overflow: hidden;
  border: 1px solid rgba(176, 131, 174, 0.22);
  border-radius: 0.25rem;
}
.it-overview-card img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.it-overview-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 4, 19, 0.03) 0%,
    rgba(11, 4, 19, 0.12) 35%,
    rgba(11, 4, 19, 0.88) 100%
  );
}
.it-overview-card span {
  position: absolute;
  z-index: 4;
  left: 1.4rem;
  bottom: 3.7rem;
  color: var(--mauve);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
}
.it-overview-card h3 {
  position: absolute;
  z-index: 4;
  left: 1.4rem;
  right: 1.2rem;
  bottom: 1.2rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.it-overview-card-01 {
  left: 7.8rem;
  top: 8.6rem;
}
.it-overview-card-02 {
  left: 29.9rem;
  top: 8.6rem;
}
.it-overview-card-03 {
  left: 52rem;
  top: 8.6rem;
}
.it-overview-card-04 {
  left: 7.8rem;
  top: 21.8rem;
}
.it-overview-card-05 {
  left: 29.9rem;
  top: 21.8rem;
}
.it-overview-card-06 {
  left: 52rem;
  top: 21.8rem;
}
.it-detail {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 80rem;
  height: 32rem;
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.it-detail-01 {
  top: 38rem;
}
.it-detail-02 {
  top: 70rem;
}
.it-detail-03 {
  top: 102rem;
}
.it-detail-04 {
  top: 134rem;
}
.it-detail-05 {
  top: 166rem;
}
.it-detail-06 {
  top: 198rem;
}
.it-detail-image {
  position: absolute;
  z-index: 3;
  width: 29.4rem;
  height: 16.8rem;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(176, 131, 174, 0.22);
  border-radius: 0.25rem;
}
.it-detail-copy {
  position: absolute;
  z-index: 4;
  width: 28rem;
}
.division-screen-dc .division-screen-layer {
  left: 42.5rem;
  top: 27.5rem;
  width: 30rem;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
}
.division-screen-dc .division-screen-title {
  left: 42.5rem;
  top: 30.2rem;
  width: 30rem;
  font-size: 3.1rem;
  line-height: 0.98;
  font-weight: 600;
}
.division-screen-dc .division-screen-intro {
  left: 42.5rem;
  top: 40rem;
  width: 30rem;
  font-size: 0.82rem;
  line-height: 1.6;
}
.it-detail-odd .it-detail-image {
  left: 8.1rem;
  top: 7.6rem;
}
.it-detail-even .it-detail-image {
  left: 42.5rem;
  top: 7.6rem;
}
.it-detail-odd .it-detail-copy {
  left: 44.5rem;
  top: 9.6rem;
}
.it-detail-even .it-detail-copy {
  left: 10.5rem;
  top: 9.6rem;
}
.it-detail-copy p {
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
  color: var(--mauve);
}
.it-detail-copy h3 {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.it-detail-copy span {
  display: block;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(176, 131, 174, 0.2);
  font:
    400 0.7rem/1.55 Alexandria,
    system-ui,
    sans-serif;
  color: rgba(216, 196, 215, 0.76);
}
.it-service-signal {
  pointer-events: none;
}
.it-back-fixed {
  position: fixed;
  z-index: 80;
  right: 2.2rem;
  top: 5.2rem;
  display: none;
  pointer-events: none;
  padding: 0 0 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(176, 131, 174, 0.45);
  background: none;
  color: var(--soft);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.16em;
  cursor: pointer;
}
body.route-it .it-back-fixed,
body.how-source-it .it-back-fixed,
body.route-downstream-it .it-back-fixed {
  display: block;
  pointer-events: auto;
}
.av-services {
  color: #fff;
}
.av-services-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      34rem 68rem at 50% 8%,
      rgba(90, 45, 138, 0.11),
      transparent 75%
    ),
    linear-gradient(90deg, #0b0413, #150826);
}
.av-services-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(216, 196, 215, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 196, 215, 0.028) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7),
    #000 50%,
    rgba(0, 0, 0, 0.7)
  );
}
/* Final AV experience: one six-card overview followed by six editorial services. */
.av-overview {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.av-overview.is-active,
.av-detail.is-active {
  opacity: 1;
  transform: none;
}
.av-overview-card {
  position: absolute;
  z-index: 3;
  width: 20.3rem;
  height: 11.6rem;
  overflow: hidden;
  border: 1px solid rgba(176, 131, 174, 0.22);
  border-radius: 0.25rem;
}
.av-overview-card img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.av-overview-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 4, 19, 0.03) 0%,
    rgba(11, 4, 19, 0.12) 35%,
    rgba(11, 4, 19, 0.88) 100%
  );
}
.av-overview-card span {
  position: absolute;
  z-index: 4;
  left: 1.4rem;
  bottom: 3.7rem;
  color: var(--mauve);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
}
.av-overview-card h3 {
  position: absolute;
  z-index: 4;
  left: 1.4rem;
  right: 1.2rem;
  bottom: 1.2rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.av-detail {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 74rem;
  height: 32rem;
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    opacity 0.45s,
    transform 0.45s;
}
.av-detail-image {
  position: absolute;
  z-index: 3;
  width: 29.4rem;
  height: 16.8rem;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(176, 131, 174, 0.22);
  border-radius: 0.25rem;
}
.av-detail-copy {
  position: absolute;
  z-index: 4;
  width: 28rem;
}
.division-screen-it .division-screen-layer {
  left: 8rem;
  top: 27.5rem;
  width: 32rem;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
}
.division-screen-it .division-screen-title {
  left: 8rem;
  top: 30.2rem;
  width: 32rem;
  font-size: 3.1rem;
  line-height: 0.98;
  font-weight: 600;
}
.division-screen-it .division-screen-intro {
  left: 8rem;
  top: 40rem;
  width: 32rem;
  font-size: 0.82rem;
  line-height: 1.6;
}
.av-detail-copy p {
  color: var(--mauve);
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
}
.av-detail-copy h3 {
  margin-top: 1.6rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.av-detail-copy span {
  display: block;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(176, 131, 174, 0.2);
  color: var(--soft);
  font-size: 0.7rem;
  line-height: 1.55;
}
.av-service-signal {
  pointer-events: none;
}
.av-back-fixed {
  position: fixed;
  z-index: 80;
  right: 2.2rem;
  top: 5.2rem;
  display: none;
  pointer-events: none;
  padding: 0 0 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(176, 131, 174, 0.45);
  background: none;
  color: var(--soft);
  font:
    400 0.48rem "DM Mono",
    monospace;
  letter-spacing: 0.16em;
  cursor: pointer;
}
body.route-av .av-back-fixed,
body.how-source-av .av-back-fixed,
body.route-downstream-av .av-back-fixed {
  display: block;
  pointer-events: auto;
}

/* Locked solutions hub and division service-tower geometry. */
/* Intro — one centred editorial composition. World x 980→1300.
   Local to c05 (740,962): left 24rem, width 32rem. */
.divisions-kicker {
  left: 24rem;
  top: 13.4rem;
  width: 32rem;
  line-height: 1.6;
  text-align: center;
}
.divisions-headline {
  left: 24rem;
  top: 15.48rem;
  width: 32rem;
  font-size: 2.1rem;
  line-height: 1.06;
  text-align: center;
}
.divisions-support {
  left: 24rem;
  top: 21.13rem;
  width: 32rem;
  text-align: center;
}
.division-junction,
.division-terminal,
.division-guide,
.division-capabilities,
.division-lane::before {
  display: none;
}
/* Division cards — world y 1248→1388, w 190u, h 140u.
   AV x 800 (c 895) · IT x 1045 (c 1140) · DATA x 1290 (c 1385). */
.division-lane {
  top: 28.6rem;
  width: 19rem;
  height: 14rem;
  overflow: hidden;
  border: 1px solid rgba(216, 196, 215, 0.18);
  background: #0b0413;
  cursor: default;
}
.division-lane[data-division="av"] {
  left: 6rem;
}
.division-lane[data-division="it"] {
  left: 30.5rem;
}
.division-lane[data-division="data-center"] {
  left: 55rem;
}
.division-card-media {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.division-lane-av .division-card-media,
.division-lane-it .division-card-media {
  object-position: 50% 50%;
}
.division-lane-dc .division-card-media {
  object-position: 50% 42%;
}
.division-lane::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 4, 19, 0.06) 0,
    rgba(11, 4, 19, 0.3) 34%,
    rgba(11, 4, 19, 0.8) 64%,
    rgba(11, 4, 19, 0.94) 100%
  );
}
.division-meta {
  z-index: 5;
  left: 1.5rem;
  top: 6.6rem;
}
.division-meta b {
  color: var(--signal);
}
.division-title {
  z-index: 5;
  left: 1.5rem;
  top: 8rem;
  font-size: 1.2rem;
}
.division-direction {
  z-index: 5;
  left: 1.5rem;
  bottom: 1.15rem;
  color: var(--soft);
}
/* SAFE BASE — restrained interactions. Existing card geometry and brand palette stay unchanged. */
.division-lane:focus-visible {
  outline: 1px solid var(--hot);
  outline-offset: 0.18rem;
}
@media (hover: hover) and (pointer: fine) {
  body.hub-ready:not(.route-active) .division-lane {
    cursor: pointer;
    transition:
      transform 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
  }
  body.hub-ready:not(.route-active) .division-lane:hover,
  body.hub-ready:not(.route-active) .division-lane:focus-visible {
    transform: translateY(-0.18rem);
    border-color: rgba(201, 164, 255, 0.46);
    box-shadow:
      0 1.2rem 3rem rgba(11, 4, 19, 0.38),
      0 0 1.8rem rgba(90, 45, 138, 0.2);
  }
  .division-lane .division-card-media {
    transition:
      transform 0.55s ease,
      filter 0.35s ease;
  }
  body.hub-ready:not(.route-active) .division-lane:hover .division-card-media,
  body.hub-ready:not(.route-active)
    .division-lane:focus-visible
    .division-card-media {
    transform: scale(1.035);
    filter: saturate(0.9) brightness(0.92);
  }
  .division-lane::after {
    transition: background 0.35s ease;
  }
  body.hub-ready:not(.route-active) .division-lane:hover::after,
  body.hub-ready:not(.route-active) .division-lane:focus-visible::after {
    background: linear-gradient(
      180deg,
      rgba(11, 4, 19, 0.02) 0,
      rgba(11, 4, 19, 0.24) 34%,
      rgba(47, 22, 80, 0.72) 66%,
      rgba(11, 4, 19, 0.96) 100%
    );
  }
  .division-direction {
    transition:
      color 0.3s ease,
      transform 0.3s ease;
  }
  body.hub-ready:not(.route-active) .division-lane:hover .division-direction,
  body.hub-ready:not(.route-active)
    .division-lane:focus-visible
    .division-direction {
    color: var(--hot);
    transform: translateX(0.18rem);
  }
}

/* 6-card overviews remain 20.3rem × 11.6rem; only interaction treatment changes. */
.dc-overview-card,
.it-overview-card,
.av-overview-card {
  appearance: none;
  padding: 0;
  background: #0b0413;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    transform 0.32s ease;
}
.dc-overview-card::before,
.it-overview-card::before,
.av-overview-card::before {
  content: "VIEW →";
  position: absolute;
  z-index: 5;
  right: 1rem;
  top: 1rem;
  padding: 0.34rem 0.58rem;
  border: 1px solid rgba(216, 196, 215, 0.28);
  border-radius: 99rem;
  background: rgba(11, 4, 19, 0.62);
  color: var(--soft);
  font:
    400 0.36rem "DM Mono",
    monospace;
  letter-spacing: 0.14em;
  opacity: 0.72;
  transition:
    opacity 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}
.dc-overview-card img,
.it-overview-card img,
.av-overview-card img {
  transition:
    transform 0.55s ease,
    filter 0.35s ease;
}
.dc-overview-card::after,
.it-overview-card::after,
.av-overview-card::after {
  transition: background 0.35s ease;
}
.dc-overview-card:focus-visible,
.it-overview-card:focus-visible,
.av-overview-card:focus-visible {
  outline: 1px solid var(--hot);
  outline-offset: 0.16rem;
}
@media (hover: hover) and (pointer: fine) {
  .dc-overview-card:hover,
  .it-overview-card:hover,
  .av-overview-card:hover,
  .dc-overview-card:focus-visible,
  .it-overview-card:focus-visible,
  .av-overview-card:focus-visible {
    border-color: rgba(201, 164, 255, 0.46);
    box-shadow:
      0 0.9rem 2.2rem rgba(11, 4, 19, 0.34),
      0 0 1.4rem rgba(90, 45, 138, 0.16);
    transform: translateY(-0.1rem);
  }
  .dc-overview-card:hover img,
  .it-overview-card:hover img,
  .av-overview-card:hover img,
  .dc-overview-card:focus-visible img,
  .it-overview-card:focus-visible img,
  .av-overview-card:focus-visible img {
    transform: scale(1.035);
    filter: saturate(0.9) brightness(0.9);
  }
  .dc-overview-card:hover::after,
  .it-overview-card:hover::after,
  .av-overview-card:hover::after,
  .dc-overview-card:focus-visible::after,
  .it-overview-card:focus-visible::after,
  .av-overview-card:focus-visible::after {
    background: linear-gradient(
      180deg,
      rgba(11, 4, 19, 0.08) 0%,
      rgba(11, 4, 19, 0.25) 34%,
      rgba(47, 22, 80, 0.72) 70%,
      rgba(11, 4, 19, 0.94) 100%
    );
  }
  .dc-overview-card:hover::before,
  .it-overview-card:hover::before,
  .av-overview-card:hover::before,
  .dc-overview-card:focus-visible::before,
  .it-overview-card:focus-visible::before,
  .av-overview-card:focus-visible::before {
    opacity: 1;
    color: var(--hot);
    border-color: rgba(201, 164, 255, 0.52);
    background: rgba(47, 22, 80, 0.68);
  }
}

/* Functional project CTA beneath each detailed service. */
.service-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  margin-top: 1.2rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(176, 131, 174, 0.38);
  border-radius: 99rem;
  background: rgba(47, 22, 80, 0.18);
  color: var(--soft);
  font:
    400 0.42rem "DM Mono",
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}
.service-detail-cta:hover,
.service-detail-cta:focus-visible {
  color: #fff;
  border-color: rgba(201, 164, 255, 0.62);
  background: rgba(90, 45, 138, 0.34);
  transform: translateY(-1px);
}
.service-detail-cta:focus-visible {
  outline: 1px solid var(--hot);
  outline-offset: 0.14rem;
}
.av-detail .service-detail-cta.is-powered,
.it-detail .service-detail-cta.is-powered,
.dc-detail .service-detail-cta.is-powered {
  color: #f3e9ff;
  border-color: rgba(243, 233, 255, 0.72);
  background: rgba(90, 45, 138, 0.32);
  box-shadow:
    0 0 0.7rem rgba(201, 164, 255, 0.22),
    inset 0 0 0.55rem rgba(201, 164, 255, 0.08);
  text-shadow: 0 0 0.32rem rgba(243, 233, 255, 0.18);
  animation: av-service-cta-charge 460ms ease-out;
}
@keyframes av-service-cta-charge {
  0% {
    border-color: rgba(176, 131, 174, 0.38);
    box-shadow: 0 0 0 rgba(201, 164, 255, 0);
  }
  42% {
    border-color: rgba(243, 233, 255, 0.90);
    box-shadow:
      0 0 1rem rgba(201, 164, 255, 0.32),
      inset 0 0 0.7rem rgba(201, 164, 255, 0.12);
  }
  100% {
    border-color: rgba(243, 233, 255, 0.72);
    box-shadow:
      0 0 0.7rem rgba(201, 164, 255, 0.22),
      inset 0 0 0.55rem rgba(201, 164, 255, 0.08);
  }
}
.av-detail .service-detail-cta.is-powered:hover,
.av-detail .service-detail-cta.is-powered:focus-visible,
.it-detail .service-detail-cta.is-powered:hover,
.it-detail .service-detail-cta.is-powered:focus-visible,
.dc-detail .service-detail-cta.is-powered:hover,
.dc-detail .service-detail-cta.is-powered:focus-visible {
  color: #fff;
  border-color: rgba(243, 233, 255, 0.92);
  background: rgba(90, 45, 138, 0.42);
  box-shadow:
    0 0 0.85rem rgba(201, 164, 255, 0.28),
    inset 0 0 0.6rem rgba(201, 164, 255, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  .av-detail .service-detail-cta.is-powered,
  .it-detail .service-detail-cta.is-powered,
  .dc-detail .service-detail-cta.is-powered {
    animation: none;
  }
}
.division-screen-av {
  left: 0;
  top: 102rem;
  width: 74rem;
}
.division-screen-dc {
  left: 154rem;
  top: 102rem;
  width: 80rem;
}
.division-screen-it {
  left: 74rem;
  top: 152rem;
}
/* c06-av intro — lower composition band. Chapter origin (0,1020) 740x500.
   Copy right edge = 355 = AV signal axis. Local x=3.5rem, w=32rem.
   KICKER world (35,1295) · HEADLINE world (35,1322) · BODY world (35,1420). */
.division-screen-av .division-screen-video-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(11, 4, 19, 0.42) 0%,
      rgba(11, 4, 19, 0.16) 38%,
      rgba(11, 4, 19, 0.52) 100%
    ),
    radial-gradient(
      ellipse 44rem 34rem at 16% 54%,
      rgba(11, 4, 19, 0.94) 0%,
      rgba(11, 4, 19, 0.84) 32%,
      rgba(17, 6, 29, 0.66) 50%,
      rgba(17, 6, 29, 0.30) 70%,
      rgba(11, 4, 19, 0) 88%
    ),
    linear-gradient(
      90deg,
      rgba(11, 4, 19, 0.94) 0%,
      rgba(11, 4, 19, 0.88) 24%,
      rgba(11, 4, 19, 0.70) 43%,
      rgba(11, 4, 19, 0.46) 61%,
      rgba(11, 4, 19, 0.28) 79%,
      rgba(11, 4, 19, 0.34) 100%
    );
}
.division-screen-av .division-screen-layer {
  left: 3.5rem;
  top: 27.5rem;
  width: 32rem;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
}
.division-screen-av .division-screen-title {
  left: 3.5rem;
  top: 30.2rem;
  width: 32rem;
  font-size: 3.1rem;
  line-height: 0.98;
  font-weight: 600;
}
.division-screen-av .division-screen-intro {
  left: 3.5rem;
  top: 40rem;
  width: 32rem;
  font-size: 0.82rem;
  line-height: 1.6;
}
.av-services {
  left: 0;
  top: 152rem;
  width: 74rem;
  height: 250rem;
}
.av-overview-card-01 {
  left: 4.8rem;
  top: 8.6rem;
}
.av-overview-card-02 {
  left: 26.9rem;
  top: 8.6rem;
}
.av-overview-card-03 {
  left: 49rem;
  top: 8.6rem;
}
.av-overview-card-04 {
  left: 4.8rem;
  top: 21.8rem;
}
.av-overview-card-05 {
  left: 26.9rem;
  top: 21.8rem;
}
.av-overview-card-06 {
  left: 49rem;
  top: 21.8rem;
}
.av-detail-01 {
  top: 38rem;
}
.av-detail-02 {
  top: 70rem;
}
.av-detail-03 {
  top: 102rem;
}
.av-detail-04 {
  top: 134rem;
}
.av-detail-05 {
  top: 166rem;
}
.av-detail-06 {
  top: 198rem;
}
.av-detail-odd .av-detail-image {
  left: 3.6rem;
  top: 7.6rem;
}
.av-detail-even .av-detail-image {
  left: 38rem;
  top: 7.6rem;
}
.av-detail-odd .av-detail-copy {
  left: 40rem;
  top: 9.6rem;
}
.av-detail-even .av-detail-copy {
  left: 6rem;
  top: 9.6rem;
}
.dc-services {
  left: 154rem;
  top: 152rem;
  width: 80rem;
  height: 250rem;
}
.it-services {
  left: 74rem;
  top: 202rem;
  width: 80rem;
  height: 261rem;
}
.av-service-signal,
.dc-service-signal,
.it-service-signal,
.route-signal,
.how-continuation-signal {
  z-index: 2;
}

.how-entry {
  left: 0;
  top: 452rem;
  width: 234rem;
  height: 50rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.how-entry-ground {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      34rem 24rem at 50% 50%,
      rgba(90, 45, 138, 0.13),
      transparent 72%
    ),
    linear-gradient(90deg, #0b0413, #150826, #0b0413);
}
.how-entry-kicker {
  z-index: 4;
  left: 84rem;
  top: 26.2rem;
  width: 30rem;
  color: var(--mauve);
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.22em;
}
.how-entry h2 {
  z-index: 4;
  left: 84rem;
  top: 34.2rem;
  width: 30rem;
  font-size: 2.35rem;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.how-entry-support {
  z-index: 4;
  left: 123rem;
  top: 34rem;
  width: 24rem;
  color: var(--soft);
  font-size: 0.7rem;
  line-height: 1.62;
}
body.route-how-entry .how-entry {
  opacity: 1;
  pointer-events: auto;
}
body.route-how-entry .site-header {
  opacity: 1;
  pointer-events: auto;
}
.how-work {
  left: 0;
  top: 502rem;
  width: 234rem;
  height: 120rem;
  color: var(--plum2);
  opacity: 0;
  pointer-events: none;
}
.how-work-ground {
  inset: 0;
  z-index: 0;
  background: #eae3eb;
}
.how-work-grid {
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(47, 22, 80, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 22, 80, 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.72) 18%,
    rgba(0, 0, 0, 0.72) 82%,
    transparent
  );
}
.how-mobile-headline {
  display: none;
}
.how-stage {
  z-index: 4;
  height: 17rem;
}
.how-stage-01 {
  left: 82rem;
  top: 18.5rem;
  width: 30rem;
}
.how-stage-02 {
  left: 124rem;
  top: 20rem;
  width: 29rem;
}
.how-stage-03 {
  left: 160rem;
  top: 20rem;
  width: 26rem;
}
.how-stage-04 {
  left: 203rem;
  top: 64.5rem;
  width: 26rem;
}
.how-stage-05 {
  left: 128rem;
  top: 76.5rem;
  width: 30rem;
}
.how-stage-06 {
  left: 72rem;
  top: 76.5rem;
  width: 30rem;
}
.how-stage p {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--violet);
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.17em;
}
.how-stage h3 {
  position: absolute;
  left: 0;
  top: 3.5rem;
  font-size: 1.28rem;
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.how-stage span {
  position: absolute;
  left: 0;
  top: 12rem;
  width: 100%;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(47, 22, 80, 0.13);
  font:
    400 0.48rem/1.55 "DM Mono",
    monospace;
  color: rgba(47, 22, 80, 0.7);
}
.how-stage span b {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.4rem;
  letter-spacing: 0.18em;
  color: var(--violet);
  font-weight: 400;
}
.readiness-gate {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
}
.readiness-gate i {
  position: absolute;
  top: 27.5rem;
  width: 1px;
  height: 10.5rem;
  background: linear-gradient(var(--violet), var(--plum2), var(--violet));
  will-change: transform;
}
.readiness-gate .gate-left {
  left: 188.8rem;
}
.readiness-gate .gate-right {
  left: 193.2rem;
}
.readiness-gate span {
  position: absolute;
  left: 186.5rem;
  top: 40rem;
  width: 9rem;
  color: var(--violet);
  font:
    400 0.46rem "DM Mono",
    monospace;
  letter-spacing: 0.16em;
}
.how-ground-transition {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 465rem;
  width: 234rem;
  height: 85rem;
  pointer-events: none;
  background: #150826;
  opacity: 0;
}
.how-transition-ground-dark,
.how-transition-ground-light {
  position: absolute;
  inset: 0;
}
.how-transition-ground-dark {
  background:
    radial-gradient(
      34rem 24rem at 50% 50%,
      rgba(90, 45, 138, 0.13),
      transparent 72%
    ),
    linear-gradient(90deg, #0b0413, #150826, #0b0413);
}
.how-transition-ground-light {
  background: #eae3eb;
  opacity: 0;
}
body.route-how-work .how-work {
  opacity: 1;
  pointer-events: auto;
}
body.route-how-transition .how-entry,
body.route-how-transition .how-work {
  opacity: 1;
  pointer-events: none;
}
body.route-how-transition .how-ground-transition {
  opacity: 1;
}
body.route-how-transition .site-header {
  opacity: 1;
  pointer-events: auto;
}
body.route-how-work .site-header {
  opacity: 1;
  pointer-events: auto;
}
.branch-how { color:#2f1650; opacity:0; pointer-events:none; overflow:hidden; }
.how-av { left:0; top:399rem; width:74rem; height:50rem; }
.how-it { left:74rem; top:449rem; width:80rem; height:50rem; }
.how-dc { left:154rem; top:399rem; width:80rem; height:50rem; }
.branch-how-grid { position:absolute; inset:0; background-color:#eae3eb; background-image:linear-gradient(rgba(47,22,80,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(47,22,80,.045) 1px,transparent 1px); background-size:4rem 4rem; }
.branch-how-intro { position:absolute; top:10.5rem; left:10rem; width:51rem; z-index:2; }
.how-it .branch-how-intro,.how-dc .branch-how-intro { left:14.5rem; }
.branch-how-intro p { margin:0; color:#7650a8; font:400 .5rem "DM Mono",monospace; letter-spacing:.18em; }
.branch-how-intro h2 { margin:1.5rem 0 1.8rem; font-size:2rem; line-height:1.15; font-weight:500; letter-spacing:-.03em; }
.branch-how-intro span { display:block; font-size:.8rem; line-height:1.5; }
.branch-how-stage { position:absolute; width:15rem; z-index:2; opacity:0; transform:translateY(0.6rem); will-change:opacity, transform; }
.branch-how-stage.r1 { top:23.8rem; }.branch-how-stage.r2 { top:35.8rem; }
.how-av .s1 {left:8.5rem}.how-av .s2 {left:28rem}.how-av .s3 {left:47.5rem}
.how-it .s1,.how-dc .s1 {left:13rem}.how-it .s2,.how-dc .s2 {left:32.5rem}.how-it .s3,.how-dc .s3 {left:52rem}
.branch-how-stage b { display:block; font:400 1.6rem "DM Mono",monospace; color:#56308f; }
.branch-how-stage em { display:block; margin-top:.8rem; color:#7650a8; font:400 .48rem "DM Mono",monospace; letter-spacing:.08em; font-style:normal; }
.branch-how-stage span { display:block; margin-top:1.1rem; font-size:.78rem; line-height:1.5; }
body.route-how-av .how-av,body.route-how-it .how-it,body.route-how-dc .how-dc { opacity:1; pointer-events:auto; }
body.how-source-av .how-av,body.how-source-it .how-it,body.how-source-dc .how-dc { opacity:1; pointer-events:none; }
.branch-how-world-signal { opacity:0; }
.branch-how-world-signal .sig-halo { stroke: var(--violet); opacity:.14; }
.branch-how-world-signal .sig-glow { stroke: var(--violet); opacity:.3; }
.branch-how-world-signal .sig-core { stroke: var(--plum2); }
body.route-how-av [data-branch-how-signal="av"],body.route-how-it [data-branch-how-signal="it"],body.route-how-dc [data-branch-how-signal="dataCenter"] { opacity:1; }
body.how-source-av [data-branch-how-signal="av"],body.how-source-it [data-branch-how-signal="it"],body.how-source-dc [data-branch-how-signal="dataCenter"] { opacity:1; }
.branch-why,.branch-contact { position:absolute; opacity:0; pointer-events:none; overflow:hidden; }
.branch-why { color:var(--plum2); }
.branch-why-av { left:0; top:449rem; width:74rem; height:100rem; }
.branch-why-it { left:74rem; top:499rem; width:80rem; height:100rem; }
.branch-why-dc { left:154rem; top:449rem; width:80rem; height:100rem; }
.branch-why-ground,.branch-why-grid { position:absolute; inset:0; }
.branch-why-ground { background:#eae3eb; }
.branch-why-grid { background-image:linear-gradient(rgba(47,22,80,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(47,22,80,.045) 1px,transparent 1px); background-size:4rem 4rem; }
.branch-why .why-kicker,.branch-why .why-headline,.branch-why .why-support,.branch-why .why-reason,.branch-why .why-coordination { position:absolute; }
.branch-why-av .why-kicker,.branch-why-av .why-headline,.branch-why-av .why-reason-01,.branch-why-av .why-reason-04 { left:1.8rem; }
.branch-why-av .why-headline { width:28rem; }.branch-why-av .why-support { left:42.3rem; width:26rem; }
.branch-why-av .why-coordination { left:.5rem; }.branch-why-av .why-reason-02 { left:43.8rem; }.branch-why-av .why-reason-03 { left:46.8rem; }
.branch-why-it .why-kicker,.branch-why-it .why-headline,.branch-why-it .why-reason-01,.branch-why-it .why-reason-04,.branch-why-dc .why-kicker,.branch-why-dc .why-headline,.branch-why-dc .why-reason-01,.branch-why-dc .why-reason-04 { left:6.3rem; }
.branch-why-it .why-headline,.branch-why-dc .why-headline { width:28rem; }.branch-why-it .why-support,.branch-why-dc .why-support { left:46.8rem; width:26rem; }
.branch-why-it .why-coordination,.branch-why-dc .why-coordination { left:5rem; }.branch-why-it .why-reason-02,.branch-why-dc .why-reason-02 { left:48.3rem; }.branch-why-it .why-reason-03,.branch-why-dc .why-reason-03 { left:51.3rem; }
.branch-why .why-kicker { top:5.2rem; }.branch-why .why-headline { top:7.8rem; }.branch-why .why-support { top:9rem; }.branch-why .why-reason-01 { top:23rem; }.branch-why .why-coordination { top:41.5rem; }.branch-why .why-reason-02 { top:39rem; }.branch-why .why-reason-03 { top:55rem; }.branch-why .why-reason-04 { top:71rem; }
.branch-contact-av { left:0; top:549rem; width:74rem; height:42rem; }.branch-contact-it { left:74rem; top:599rem; width:80rem; height:42rem; }.branch-contact-dc { left:154rem; top:549rem; width:80rem; height:42rem; }
.branch-contact .contact-cluster,.branch-contact .contact-panel { position:absolute; }.branch-contact-av .contact-cluster { left:1.8rem; top:12.8rem; width:28rem; }.branch-contact-av .contact-panel { left:41.3rem; top:11.8rem; width:27rem; height:21.4rem; }.branch-contact-it .contact-cluster,.branch-contact-dc .contact-cluster { left:6.3rem; top:12.8rem; width:28rem; }.branch-contact-it .contact-panel,.branch-contact-dc .contact-panel { left:45.8rem; top:11.8rem; width:27rem; height:21.4rem; }
body.route-downstream-av .branch-why-av,body.route-downstream-it .branch-why-it,body.route-downstream-dc .branch-why-dc,body.route-downstream-av .branch-contact-av,body.route-downstream-it .branch-contact-it,body.route-downstream-dc .branch-contact-dc { opacity:1; }
.branch-finale-signal { opacity:0; }.branch-finale-signal .sig-glow { stroke:#b083ae; stroke-width:9; opacity:.3; }.branch-finale-signal .sig-core { stroke:#2f1650; stroke-width:2.8; }
body.route-downstream-av [data-branch-finale-signal="av"],body.route-downstream-it [data-branch-finale-signal="it"],body.route-downstream-dc [data-branch-finale-signal="dataCenter"] { opacity:1; }
.branch-contact-decor { position:absolute; pointer-events:none; opacity:0; }
.branch-contact-decor { z-index:1; width:74rem; height:42rem; overflow:hidden; }.branch-contact-decor-av { left:0; top:549rem; }.branch-contact-decor-it { left:74rem; top:599rem; width:80rem; }.branch-contact-decor-dc { left:154rem; top:549rem; width:80rem; }
body.route-downstream-av .branch-contact-decor-av,body.route-downstream-it .branch-contact-decor-it,body.route-downstream-dc .branch-contact-decor-dc { opacity:1; }

.how-continuation-signal,
.how-entry-trunk-signal {
  opacity: 0;
}
body.route-how-entry.how-source-dc [data-how-entry-signal="dc-to-how"],
body.route-how-work.how-source-dc [data-how-entry-signal="dc-to-how"],
body.route-how-entry.how-source-it [data-how-entry-signal="it-to-how"],
body.route-how-work.how-source-it [data-how-entry-signal="it-to-how"],
body.route-how-entry.how-source-av [data-how-entry-signal="av-to-how"],
body.route-how-work.how-source-av [data-how-entry-signal="av-to-how"],
body.route-how-entry .how-entry-trunk-signal,
body.route-how-work .how-entry-trunk-signal {
  opacity: 1;
}

/* ── WHY SPACES SOLUTIONS — world x 598→1322, y 6000→7040 ──────────────────
   The chapter origin overlaps how-work-main (which ends at 6220) so the light
   ground runs unbroken through Handover. There is no seam and no colour change
   at Handover: Why is the same #eae3eb environment as How. */
.why-spaces {
  left: 59.8rem;
  top: 600rem;
  width: 72.4rem;
  height: 104rem;
  color: var(--plum2);
  opacity: 0;
  pointer-events: none;
}
body.route-how-work .why-spaces {
  opacity: 1;
  pointer-events: auto;
}

/* Intro. Kicker 623,6052 w260 · headline 623,6078 w280 · support 1028,6090 w260.
   Headline right edge 903 and support left edge 1028 both clear the signal
   axis x=960 (57u / 68u). */
.why-kicker {
  z-index: 4;
  left: 2.5rem;
  top: 5.2rem;
  width: 26rem;
  color: var(--violet);
  font:
    400 0.5rem "DM Mono",
    monospace;
  letter-spacing: 0.22em;
}
.why-headline {
  z-index: 4;
  left: 2.5rem;
  top: 7.8rem;
  width: 28rem;
  font-size: 1.62rem;
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 600;
}
.why-support {
  z-index: 4;
  left: 43rem;
  top: 9rem;
  width: 26rem;
  color: #5b5560;
  font-size: 0.72rem;
  line-height: 1.62;
}

/* Reason boxes — restrained architectural boxes, not cards.
   01 623,6230 250×112 · 02 1043,6390 250×112 · 03 1073,6550 220×112 ·
   04 623,6710 250×112. Each keeps a 30u corridor clear of the signal. */
.why-reason {
  z-index: 4;
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(90, 45, 138, 0.22);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.34);
}
.why-reason-01 {
  left: 2.5rem;
  top: 23rem;
  width: 25rem;
  height: 11.2rem;
}
.why-reason-02 {
  left: 44.5rem;
  top: 39rem;
  width: 25rem;
  height: 11.2rem;
}
.why-reason-03 {
  left: 47.5rem;
  top: 55rem;
  width: 22rem;
  height: 11.2rem;
}
.why-reason-04 {
  left: 2.5rem;
  top: 71rem;
  width: 25rem;
  height: 11.2rem;
}
.why-reason p {
  color: var(--violet);
  font:
    400 0.44rem "DM Mono",
    monospace;
  letter-spacing: 0.2em;
}
.why-reason h3 {
  margin-top: 0.9rem;
  color: #2f1650;
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.why-reason span {
  display: block;
  margin-top: 0.85rem;
  color: #5b5560;
  font-size: 0.6rem;
  line-height: 1.62;
}

/* Supporting coordination silhouette — world 610,6415 w260. Its right edge
   is x=870, leaving the authored 33u clear of the first signal lane at x=903. */
.why-coordination {
  z-index: 1;
  left: 1.2rem;
  top: 41.5rem;
  width: 26rem;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.35;
}

/* Why/Contact signal — glow + core only, no halo.
   Light ground: core #2f1650, glow #b083ae. Widths match the How signal.
   The runtime re-colours both inline across the Why→Contact transition. */
.why-signal .sig-glow {
  stroke: #b083ae;
  stroke-width: 9;
  opacity: 0.3;
}
.why-signal .sig-core {
  stroke: #2f1650;
  stroke-width: 2.8;
}

/* ── WHY → CONTACT light/dark field ────────────────────────────────────────
   Overlapping full-field world-space grounds crossfaded by local camera
   progress. No seam, no gradient strip, no wave, no diagonal.

   The authored crossfade band is y 6800→7360. At every validated viewport
   aspect that band's TOP EDGE sits inside the frame while the dark field is
   already partly opaque, which renders as a hard horizontal seam, so the
   plate spans the whole Why+Contact column (6220→7520) instead and is
   genuinely full-field in every frame. The authored crossfade timing is
   unchanged. It starts exactly where how-work-main ends (6220), so the light
   ground and the 4rem grid tiling continue without overlap or phase shift. */
.why-contact-transition {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 622rem;
  width: 234rem;
  height: 130rem;
  pointer-events: none;
  opacity: 0;
}
body.route-how-work .why-contact-transition {
  opacity: 1;
}
.why-contact-light,
.why-contact-grid,
.why-contact-dark {
  position: absolute;
  inset: 0;
}
.why-contact-light {
  background: #eae3eb;
}
.why-contact-grid {
  background-image:
    linear-gradient(rgba(47, 22, 80, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 22, 80, 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.72) 18%,
    rgba(0, 0, 0, 0.72) 82%,
    transparent
  );
}
.why-contact-dark {
  background: linear-gradient(178deg, #110620, #0b0413);
  opacity: 0;
}

/* ── CONTACT — world x 598→1322, y 7000→7520 ───────────────────────────────
   Dark ground, texture, panel and form vocabulary reused from the current
   About contact section (screen 3). Only the layout is compacted to the
   authored 270×214u panel. */
.chapter-contact {
  left: 59.8rem;
  top: 700rem;
  width: 72.4rem;
  height: 52rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
body.route-how-work .chapter-contact {
  opacity: 1;
  pointer-events: auto;
}
/* Decor spans the whole dark field (y 6800→7520), not just the Contact
   chapter, so the texture never presents a horizontal edge inside the frame
   while it fades in. Same About vocabulary, adapted extent only. */
.contact-decor {
  position: absolute;
  z-index: 2;
  left: 59.8rem;
  top: 680rem;
  width: 72.4rem;
  height: 72rem;
  pointer-events: none;
  opacity: 0;
}
.contact-crosses {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(176, 131, 174, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 131, 174, 0.34) 1px, transparent 1px);
  background-size:
    0.44rem 0.05rem,
    0.05rem 0.44rem;
  background-position:
    2rem 3rem,
    2rem 3rem;
  mask-image: linear-gradient(75deg, #000 22%, transparent 46%);
}
.contact-rings {
  position: absolute;
  left: 30rem;
  top: 26rem;
  width: 24rem;
  height: 24rem;
  overflow: visible;
}

/* Left content cluster — world 623,7128 w280. Right edge 903 clears the
   signal axis x=960 by 57u. */
.contact-cluster {
  z-index: 4;
  left: 2.5rem;
  top: 12.8rem;
  width: 28rem;
  opacity: 0;
}
.contact-kick {
  font-family: "DM Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mauve);
}
.contact-rule {
  height: 0.09rem;
  width: 4.4rem;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, var(--signal), rgba(201, 164, 255, 0));
}
.contact-h2 {
  margin-top: 1.4rem;
  font-weight: 600;
  font-size: 2.35rem;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.contact-h2 em {
  font-style: normal;
  color: var(--mauve);
}
.contact-body {
  margin-top: 1.5rem;
  width: 25rem;
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.62;
  color: var(--soft);
  opacity: 0.9;
}
.contact-assurance {
  display: flex;
  margin-top: 2.1rem;
}
.contact-assure {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 1.2rem;
}
.contact-assure + .contact-assure {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(216, 196, 215, 0.2);
}
.contact-assure .a-icon {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--mauve);
  opacity: 0.85;
}
.contact-assure .a-text {
  font-family: "DM Mono", monospace;
  font-size: 0.44rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--soft);
  opacity: 0.85;
}

/* Form panel — world 1018,7118 270×214. Left edge 1018 clears the signal
   axis x=960 by 58u. Every About field, option, button and note is kept;
   only the row rhythm is compacted into the authored height. */
.contact-panel {
  z-index: 3;
  left: 42rem;
  top: 11.8rem;
  width: 27rem;
  height: 21.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(201, 164, 255, 0.28);
  border-radius: 1.1rem;
  background: linear-gradient(
    150deg,
    rgba(47, 22, 80, 0.34),
    rgba(11, 4, 19, 0.5)
  );
  opacity: 0;
}
.contact-panel .f-label {
  font-family: "DM Mono", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--soft);
}
.contact-panel .contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.9rem;
  margin-top: 1.2rem;
}
.contact-panel .fld {
  display: block;
  position: relative;
}
.contact-panel .fld-wide {
  grid-column: 1 / -1;
}
.contact-panel .fld input,
.contact-panel .fld select,
.contact-panel .fld textarea {
  width: 100%;
  height: 2.2rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(216, 196, 215, 0.24);
  border-radius: 0.4rem;
  background: rgba(11, 4, 19, 0.5);
  font-family: "Alexandria", sans-serif;
  font-weight: 300;
  font-size: 0.6rem;
  color: #fff;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.contact-panel .fld-area textarea {
  height: 3.8rem;
  padding: 0.6rem 0.8rem;
  resize: none;
  line-height: 1.55;
}
.contact-panel .fld select {
  appearance: none;
  color: #fff;
  color-scheme: dark;
  background-color: rgba(11, 4, 19, 0.72);
  cursor: pointer;
}
.contact-panel .fld select option {
  background: #150826;
  color: #f3e9ff;
}
.contact-panel .fld select option:checked {
  background: #5a2d8a;
  color: #fff;
}
.contact-panel .fld.sel::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 0.9rem;
  width: 0.34rem;
  height: 0.34rem;
  border-right: 1.5px solid var(--mauve);
  border-bottom: 1.5px solid var(--mauve);
  transform: rotate(45deg);
  pointer-events: none;
}
.contact-panel .fld ::placeholder {
  color: var(--soft);
  opacity: 0.55;
}
.contact-panel .fld input:focus,
.contact-panel .fld textarea:focus,
.contact-panel .fld select:focus {
  border-color: var(--mauve);
  background: rgba(47, 22, 80, 0.3);
}
.contact-panel .send {
  grid-column: 1 / -1;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px solid rgba(201, 164, 255, 0.4);
  border-radius: 0.4rem;
  background: linear-gradient(
    100deg,
    rgba(90, 45, 138, 0.7),
    rgba(47, 22, 80, 0.7)
  );
  font-family: "DM Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.contact-panel .send:hover {
  background: linear-gradient(
    100deg,
    rgba(122, 64, 184, 0.85),
    rgba(90, 45, 138, 0.8)
  );
}
.contact-panel .send svg {
  width: 0.9rem;
  height: 0.9rem;
}
.contact-panel .note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  font-size: 0.54rem;
  color: var(--soft);
  opacity: 0.7;
}
.contact-panel .note svg {
  width: 0.66rem;
  height: 0.66rem;
}

@media (max-width: 820px) {
  #world {
    width: 100%;
    height: auto;
  }
  .chapter-principles,
  .chapter-divisions,
  .division-screen {
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }
  .chapter-principles {
    padding: 68px 22px;
    background: #eae3eb;
  }
  .about-view2-main,
  .about-view2-kicker,
  .about-view2-headline,
  .about-view2-body,
  .about-process,
  .about-statement {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }
  .about-view2-kicker {
    font-size: 22px;
  }
  .about-view2-headline {
    margin-top: 24px;
    font-size: 28px;
    line-height: 1.1;
  }
  .about-view2-headline br {
    display: none;
  }
  .about-view2-body {
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.55;
  }
  .about-process {
    margin-top: 40px;
  }
  .about-process li {
    height: auto;
    min-height: 0;
    padding: 14px 0;
    border-top: 1px solid rgba(47, 22, 80, 0.14);
  }
  .about-process b {
    font-size: 11px;
  }
  .about-process span {
    font-size: 14px;
  }
  .about-statement {
    margin-top: 44px;
  }
  .statement-label {
    font-size: 22px;
  }
  .statement-copy {
    font-size: 17px;
    line-height: 1.55;
  }
  .chapter-divisions {
    padding: 88px 24px 82px;
    background: linear-gradient(110deg, #150826, #0b0413);
  }
  .chapter-divisions .ground,
  .divisions-grid {
    position: absolute;
    inset: 0;
  }
  .divisions-kicker,
  .divisions-headline,
  .divisions-support,
  .division-lane,
  .division-lane[data-division] {
    left: auto;
    top: auto;
    width: auto;
    text-align: left;
  }
  .divisions-kicker {
    font-size: 9px;
  }
  .divisions-headline {
    margin-top: 26px;
    font-size: 34px;
  }
  .divisions-support {
    margin-top: 26px;
    font-size: 15px;
  }
  .division-lane {
    position: relative;
    margin-top: 54px;
    height: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(176, 131, 174, 0.18);
  }
  .division-card-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
    margin-bottom: 22px;
    object-fit: cover;
  }
  .division-lane + .division-lane {
    margin-top: 46px;
  }
  .division-meta,
  .division-title,
  .division-capabilities {
    position: relative;
    left: auto;
    top: auto;
  }
  .division-meta {
    gap: 12px;
  }
  .division-meta b,
  .division-meta span {
    font-size: 9px;
  }
  .division-title {
    display: block;
    margin-top: 20px;
    font-size: 26px;
  }
  .division-capabilities {
    margin-top: 20px;
    font-size: 11px;
    line-height: 1.85;
  }
  .division-junction,
  .division-terminal,
  .division-guide,
  .division-direction {
    display: none;
  }
  .division-screen {
    padding: 88px 24px 76px;
    background: #0b0413;
  }
  .division-screen .ground,
  .division-screen-grid {
    position: absolute;
    inset: 0;
  }
  .division-screen-layer,
  .division-screen-title,
  .division-screen-intro,
  .delivery-field,
  .service-item {
    left: auto !important;
    top: auto;
    width: auto !important;
  }
  .division-screen-layer {
    font-size: 9px;
  }
  .division-screen-title {
    margin-top: 24px;
    font-size: 34px;
  }
  .division-screen-intro {
    margin-top: 26px;
    font-size: 15px;
  }
  .delivery-field {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .delivery-field p {
    margin-bottom: 18px;
    font-size: 9px;
  }
  .delivery-field span {
    font-size: 10px;
  }
  .service-item {
    position: relative;
    margin-top: 40px;
    padding-top: 18px;
    min-height: 0;
  }
  .service-item b {
    top: 20px;
    font-size: 9px;
  }
  .service-item h3 {
    font-size: 20px;
  }
  .service-item p {
    font-size: 11px;
    line-height: 1.6;
  }
  .route-back,
  .service-axis-row {
    display: none;
  }
  .dc-services {
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 12px 24px 76px;
    background: #0b0413;
  }
  .dc-services-ground,
  .dc-services-grid {
    position: absolute;
    inset: 0;
  }
  .dc-overview {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    opacity: 1;
    transform: none;
  }
  .dc-overview-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 7/4;
    border-radius: 4px;
  }
  .dc-overview-card span {
    left: 16px;
    bottom: 44px;
    font-size: 9px;
  }
  .dc-overview-card h3 {
    left: 16px;
    right: 16px;
    bottom: 16px;
    font-size: 20px;
  }
  .dc-detail {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: 76px;
    opacity: 1;
    transform: none;
  }
  .dc-detail-image,
  .dc-detail-odd .dc-detail-image,
  .dc-detail-even .dc-detail-image {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 7/4;
    order: 2;
    margin-top: 30px;
  }
  .dc-detail-copy,
  .dc-detail-odd .dc-detail-copy,
  .dc-detail-even .dc-detail-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    order: 1;
  }
  .dc-detail-copy p {
    font-size: 9px;
  }
  .dc-detail-copy h3 {
    margin-top: 18px;
    font-size: 30px;
  }
  .dc-detail-copy span {
    margin-top: 22px;
    padding-top: 16px;
    font-size: 11px;
    line-height: 1.7;
  }
  .dc-service-signal {
    display: none;
  }
  .dc-back-fixed {
    display: none !important;
  }
  .it-services {
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 12px 24px 76px;
    background: #0b0413;
  }
  .it-services-ground,
  .it-services-grid {
    position: absolute;
    inset: 0;
  }
  .it-overview {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    opacity: 1;
    transform: none;
  }
  .it-overview-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 7/4;
    border-radius: 4px;
  }
  .it-overview-card span {
    left: 16px;
    bottom: 44px;
    font-size: 9px;
  }
  .it-overview-card h3 {
    left: 16px;
    right: 16px;
    bottom: 16px;
    font-size: 20px;
  }
  .it-detail {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: 76px;
    opacity: 1;
    transform: none;
  }
  .it-detail-image,
  .it-detail-odd .it-detail-image,
  .it-detail-even .it-detail-image {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 7/4;
    order: 2;
    margin-top: 30px;
  }
  .it-detail-copy,
  .it-detail-odd .it-detail-copy,
  .it-detail-even .it-detail-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    order: 1;
  }
  .it-detail-copy p {
    font-size: 9px;
  }
  .it-detail-copy h3 {
    margin-top: 18px;
    font-size: 30px;
  }
  .it-detail-copy span {
    margin-top: 22px;
    padding-top: 16px;
    font-size: 11px;
    line-height: 1.7;
  }
  .it-service-signal {
    display: none;
  }
  .it-back-fixed {
    display: none !important;
  }
  .av-services {
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 12px 24px 76px;
    background: #0b0413;
  }
  .av-services-ground,
  .av-services-grid {
    position: absolute;
    inset: 0;
  }
  .av-overview {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    opacity: 1;
    transform: none;
  }
  .av-overview-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 7/4;
    border-radius: 4px;
  }
  .av-overview-card span {
    left: 16px;
    bottom: 44px;
    font-size: 9px;
  }
  .av-overview-card h3 {
    left: 16px;
    right: 16px;
    bottom: 16px;
    font-size: 20px;
  }
  .av-detail {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: 76px;
    opacity: 1;
    transform: none;
  }
  .av-detail-image,
  .av-detail-odd .av-detail-image,
  .av-detail-even .av-detail-image {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 7/4;
    order: 2;
    margin-top: 30px;
  }
  .av-detail-copy,
  .av-detail-odd .av-detail-copy,
  .av-detail-even .av-detail-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    order: 1;
  }
  .av-detail-copy p {
    font-size: 9px;
  }
  .av-detail-copy h3 {
    margin-top: 18px;
    font-size: 30px;
  }
  .av-detail-copy span {
    margin-top: 22px;
    padding-top: 16px;
    font-size: 11px;
    line-height: 1.7;
  }
  .av-service-signal {
    display: none;
  }
  .av-back-fixed {
    display: none !important;
  }
  .how-entry {
    display: none;
  }
  .how-ground-transition {
    display: none;
  }
  .how-work {
    display: block;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 88px 24px 76px;
    background: linear-gradient(180deg, #f4eff5, #eae3eb);
    color: var(--plum2);
    opacity: 1;
    pointer-events: auto;
  }
  .how-work-ground {
    position: absolute;
    inset: 0;
  }
  .how-work-grid {
    display: none;
  }
  .how-work::before {
    content: "HOW WE WORK";
    position: relative;
    z-index: 4;
    display: block;
    color: var(--violet);
    font:
      400 9px "DM Mono",
      monospace;
    letter-spacing: 0.2em;
  }
  .how-mobile-headline {
    position: relative;
    z-index: 4;
    display: block;
    margin-top: 24px;
    font-size: 34px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.035em;
  }
  .how-stage,
  .how-stage-01,
  .how-stage-02,
  .how-stage-03,
  .how-stage-04,
  .how-stage-05,
  .how-stage-06 {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 64px;
    padding-top: 18px;
  }
  .how-stage p,
  .how-stage h3,
  .how-stage span {
    position: relative;
    left: auto;
    top: auto;
  }
  .how-stage span { display:none; }
  .branch-how { display:none; }
  .branch-how-stage { opacity:1 !important; transform:none !important; }
  .branch-why,.branch-contact,.branch-contact-decor { display:none !important; }
  .how-stage p {
    font-size: 9px;
  }
  .how-stage h3 {
    margin-top: 20px;
    font-size: 20px;
    line-height: 1.45;
  }
  .how-stage span {
    margin-top: 24px;
    padding-top: 14px;
    font-size: 10px;
  }
  .how-stage span b {
    font-size: 8px;
  }
  .readiness-gate {
    position: relative;
    left: auto;
    top: auto;
    height: 44px;
    margin-top: -20px;
  }
  .readiness-gate i {
    display: none;
  }
  .readiness-gate span {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(47, 22, 80, 0.22);
    font-size: 9px;
  }
  /* WHY — stacked light section, reasons 01→04 in order. */
  .why-contact-transition {
    display: none;
  }
  .why-spaces {
    display: block;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 82px 24px 76px;
    background: #eae3eb;
    color: var(--plum2);
    opacity: 1;
    pointer-events: auto;
  }
  .why-kicker,
  .why-headline,
  .why-support {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }
  .why-kicker {
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  .why-headline {
    margin-top: 24px;
    font-size: 30px;
    line-height: 1.14;
  }
  .why-support {
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.6;
  }
  .why-reason,
  .why-reason-01,
  .why-reason-02,
  .why-reason-03,
  .why-reason-04 {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 26px;
    padding: 20px 18px;
    opacity: 1 !important;
  }
  .why-coordination {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: 86%;
    max-width: 420px;
    height: auto;
    margin: 26px auto 0;
    opacity: 1 !important;
  }
  .why-reason p {
    font-size: 9px;
  }
  .why-reason h3 {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.35;
  }
  .why-reason span {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
  }
  /* CONTACT — About mobile contact treatment: no panel chrome, stacked fields. */
  .chapter-contact {
    display: block;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 82px 24px 76px;
    background: linear-gradient(178deg, #110620, #0b0413);
    color: #fff;
    opacity: 1;
    pointer-events: auto;
  }
  .contact-decor {
    display: none;
  }
  .contact-cluster,
  .contact-panel {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    opacity: 1 !important;
  }
  .contact-panel {
    margin-top: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .contact-kick {
    font-size: 10px;
    letter-spacing: 0.26em;
  }
  .contact-rule {
    width: 56px;
    margin-top: 14px;
  }
  .contact-h2 {
    margin-top: 18px;
    font-size: 30px;
    line-height: 1.08;
  }
  .contact-body {
    width: auto;
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.6;
  }
  .contact-assurance {
    flex-direction: column;
    margin-top: 30px;
  }
  .contact-assure {
    padding: 14px 0;
  }
  .contact-assure + .contact-assure {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(216, 196, 215, 0.16);
  }
  .contact-assure .a-icon {
    width: 22px;
    height: 22px;
  }
  .contact-assure .a-text {
    font-size: 10px;
  }
  .contact-panel .f-label {
    font-size: 10px;
    letter-spacing: 0.24em;
  }
  .contact-panel .contact {
    display: block;
    margin-top: 20px;
  }
  .contact-panel .fld {
    margin-bottom: 12px;
  }
  .contact-panel .fld input,
  .contact-panel .fld select {
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
  }
  .contact-panel .fld-area textarea {
    height: 110px;
    padding: 12px 14px;
    font-size: 14px;
  }
  .contact-panel .fld.sel::after {
    right: 16px;
    top: 19px;
    width: 7px;
    height: 7px;
  }
  .contact-panel .send {
    width: 100%;
    height: 48px;
    margin-top: 6px;
    font-size: 11px;
  }
  .contact-panel .send svg {
    width: 16px;
    height: 16px;
  }
  .contact-panel .note {
    margin-top: 16px;
    font-size: 11px;
  }
  .contact-panel .note svg {
    width: 13px;
    height: 13px;
  }
}

@media (min-width: 821px) {
  .about-view1-kicker,
  .about-view2-kicker,
  .statement-label {
    font-family: "Alexandria", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .about-view1-body,
  .about-view2-body,
  .statement-copy {
    font-size: 0.86rem;
    line-height: 1.55;
  }
}

@media (min-width: 821px) {
  .chapter-hero .eyebrow {
    top: 10rem;
  }
  .chapter-hero h1 {
    top: 12.4rem;
    width: 35rem;
    font-size: 2.6rem;
  }
  .chapter-hero .hero-body {
    top: 22.8rem;
    width: 31.5rem;
    font-size: 0.78rem;
    line-height: 1.65;
  }
  .chapter-hero .hero-cta {
    top: 28.6rem;
  }
}

@media (max-width: 820px) {
  .dc-overview-card::before,
  .it-overview-card::before,
  .av-overview-card::before {
    right: 12px;
    top: 12px;
    padding: 6px 9px;
    font-size: 8px;
  }
  .service-detail-cta {
    min-height: 36px;
    margin-top: 18px;
    padding: 0 15px;
    font-size: 9px;
  }
}

/* Branch downstream polish: ambient Contact field and restrained panel depth. */
.branch-contact {
  color:#fff;
  background:
    radial-gradient(30rem 23rem at 52% 50%, rgba(90,45,138,0.18) 0%, rgba(47,22,80,0.10) 42%, rgba(11,4,19,0) 72%),
    linear-gradient(178deg, #110620 0%, #0b0413 100%);
}
.branch-contact-decor .contact-rings { top:6rem; }
.branch-contact .contact-cluster,.branch-contact .contact-panel { opacity:1; }
body:not(.route-downstream-av) .branch-contact-av,body:not(.route-downstream-it) .branch-contact-it,body:not(.route-downstream-dc) .branch-contact-dc { pointer-events:none !important; }
.branch-contact .contact-panel {
  box-shadow: 0 0 3.6rem rgba(90,45,138,0.18), inset 0 0 1.8rem rgba(201,164,255,0.035);
  overflow:visible;
}
.branch-contact-charge {
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transform:scaleX(.15);
  transform-origin:0% 50%;
  background:radial-gradient(
    120% 140% at 0% 50%,
    rgba(201,164,255,.30) 0%,
    rgba(122,64,184,.16) 34%,
    transparent 68%
  );
}
.branch-contact .contact-panel > :not(.branch-contact-charge) {
  position:relative;
  z-index:1;
}
.branch-contact-dot {
  position:absolute;
  z-index:7;
  width:.68rem;
  height:.68rem;
  margin-left:-.34rem;
  margin-top:-.34rem;
  border-radius:50%;
  background:#f3e9ff;
  box-shadow:
    0 0 .5rem .12rem rgba(201,164,255,.88),
    0 0 1.5rem .45rem rgba(90,45,138,.62);
  opacity:0;
  transform:none;
  pointer-events:none;
}
.branch-contact-av .branch-contact-dot { left:41.3rem; top:22.5rem; }
.branch-contact-it .branch-contact-dot,.branch-contact-dc .branch-contact-dot { left:45.8rem; top:22.5rem; }
.branch-footer { position:absolute; box-sizing:border-box; background:#0b0413; color:#fff; border-top:1px solid rgba(216,196,215,.12); padding:1.6rem 2.4rem 0.5rem; font-family:Alexandria,sans-serif; opacity:0; pointer-events:none; z-index:4; }
.branch-footer-av { left:0; top:591rem; width:74rem; height:auto; min-height:13rem; }
.branch-footer-it { left:74rem; top:641rem; width:80rem; height:auto; min-height:13rem; }
.branch-footer-dc { left:154rem; top:591rem; width:80rem; height:auto; min-height:13rem; }
body.route-downstream-av .branch-footer-av, body.route-downstream-it .branch-footer-it, body.route-downstream-dc .branch-footer-dc { opacity:1; pointer-events:auto; }
.site-footer-style .site-footer__grid { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:4.6rem; width:100%; margin:auto; align-items:start; }
.site-footer-style .site-footer__eyebrow,.site-footer-style .site-footer__head { font:400 .46rem "DM Mono",monospace; letter-spacing:.2em; text-transform:lowercase; color:#b083ae; }
.site-footer-style .site-footer__eyebrow { margin-bottom:1rem; }
.site-footer-style .site-footer__head { padding-bottom:.6rem; margin-bottom:1.05rem; border-bottom:1px solid rgba(216,196,215,.14); }
.site-footer-style .site-footer__name { font-size:2.2rem; line-height:1.08; margin:0 0 1.1rem; letter-spacing:-.015em; }
.site-footer-style .site-footer__name em { color:#c9a4ff; font-style:normal; }
.site-footer-style .site-footer__lead { max-width:26rem; color:#d8c4d7; font-size:.62rem; line-height:1.7; }
.site-footer-style .site-footer__links { display:flex; flex-direction:column; gap:.8rem; }
.site-footer-style .site-footer__links a { position:relative; display:inline-block; width:fit-content; color:#eae3eb; text-decoration:none; font-size:.62rem; transition:color .2s ease; }
.site-footer-style .site-footer__links a::after { content:""; position:absolute; left:0; right:100%; bottom:-.22rem; height:1px; background:#c9a4ff; transition:right .25s ease; }
.site-footer-style .site-footer__links a:hover,.site-footer-style .site-footer__links a:focus-visible { color:#c9a4ff; }
.site-footer-style .site-footer__links a:hover::after,.site-footer-style .site-footer__links a:focus-visible::after { right:0; }
.site-footer-style .site-footer__links a:focus-visible { outline:1px solid rgba(201,164,255,.55); outline-offset:.25rem; border-radius:1px; }
.site-footer-style .site-footer__bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; width:100%; margin:1rem auto 0; padding-top:0.65rem; border-top:1px solid rgba(216,196,215,.16); font:400 .4rem "DM Mono",monospace; letter-spacing:.1em; color:#b9afc1; }
.branch-footer-av .site-footer__bottom { padding-right:3.4rem; }
.branch-footer-it .site-footer__bottom { padding-right:4.9rem; }
.branch-footer-dc .site-footer__bottom { padding-right:4.9rem; }
.branch-footer .site-footer__bottom { transform:translateY(-.4rem); }
.home-mobile-footer { display:none; }
@media (max-width:820px) {
  .branch-footer { display:none !important; }
  .home-mobile-footer { display:block; position:relative; z-index:40; background:#0b0413; color:#fff; padding:64px 22px 28px; border-top:1px solid rgba(216,196,215,.12); font-family:Alexandria,sans-serif; }
  .home-mobile-footer .site-footer__grid { grid-template-columns:1fr; gap:42px; }
  .home-mobile-footer .site-footer__head { margin-bottom:14px; padding-bottom:10px; }
  .home-mobile-footer .site-footer__name { font-size:32px; }
  .home-mobile-footer .site-footer__lead,.home-mobile-footer .site-footer__links a { font-size:14px; }
  .home-mobile-footer .site-footer__links { gap:14px; }
  .home-mobile-footer .site-footer__bottom { flex-direction:column; gap:8px; margin-top:32px; padding-top:1.1rem; font-size:10px; line-height:1.8; }
}