/* === HERO ATLAS ===
   Decorative network + entrance for .hero-afripixel.
   Motion runs only after revamp.js adds .lsa-motion (skipped for reduced motion).
   .is-active / .lsa-path.is-drawn are the existing hooks. No loading gate. */

.hero-afripixel,
.home-v2 .hero-afripixel {
  overflow: hidden;
}

.hero-afripixel .hero-afripixel__network,
.home-v2 .hero-afripixel .hero-afripixel__network {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  overflow: visible;
  /* Sit in the right half so routes clear the "Software" headline. */
  transform: translate3d(10%, 1%, 0) scale(1.02);
  transform-origin: center right;
  shape-rendering: geometricPrecision;
}

.hero-afripixel .hero-afripixel__net-live,
.home-v2 .hero-afripixel .hero-afripixel__net-live {
  transform-box: fill-box;
  transform-origin: center;
}

.hero-afripixel .hero-afripixel__network .lsa-path,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-path {
  fill: none;
  stroke: rgba(9, 6, 183, 0.78);
  stroke-width: 1.05;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  shape-rendering: geometricPrecision;
}

.hero-afripixel .hero-afripixel__network .lsa-path--c,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-path--c {
  stroke: rgba(9, 6, 183, 0.42);
}

.hero-afripixel .hero-afripixel__network .lsa-path--d,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-path--d {
  stroke: rgba(203, 0, 1, 0.7);
}

.hero-afripixel .hero-afripixel__network .lsa-packet,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-packet {
  fill: none;
  stroke: #0906b7;
  stroke-width: 1.55;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.04 0.96;
  stroke-dashoffset: 0;
  opacity: 0;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

.hero-afripixel .hero-afripixel__network .lsa-packet--b,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-packet--b {
  stroke: #cb0001;
  stroke-dasharray: 0.032 0.968;
}

.hero-afripixel .hero-afripixel__network .lsa-packet--c,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-packet--c {
  stroke: rgba(9, 6, 183, 0.8);
  stroke-width: 1.25;
  stroke-dasharray: 0.028 0.972;
}

.hero-afripixel .hero-afripixel__network .lsa-packet--d,
.home-v2 .hero-afripixel .hero-afripixel__network .lsa-packet--d {
  stroke: #cb0001;
  stroke-dasharray: 0.036 0.964;
}

.hero-afripixel .lsa-node,
.home-v2 .hero-afripixel .lsa-node {
  fill: var(--lsa-signal-blue, #0906b7);
  opacity: 0.72;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-afripixel .lsa-node--signal,
.home-v2 .hero-afripixel .lsa-node--signal {
  fill: var(--lsa-signal-blue, #0906b7);
  opacity: 0.95;
}

.hero-afripixel .lsa-node--accent,
.home-v2 .hero-afripixel .lsa-node--accent {
  fill: var(--lsa-signal-red, #cb0001);
  opacity: 0.9;
}

/* Undrawn only while motion is allowed and the path has not been drawn. */
.hero-afripixel.lsa-motion .hero-afripixel__network .lsa-path:not(.is-drawn),
.home-v2 .hero-afripixel.lsa-motion .hero-afripixel__network .lsa-path:not(.is-drawn) {
  stroke-dashoffset: 1;
}

.hero-afripixel.lsa-motion .hero-afripixel__network .lsa-path.is-drawn,
.home-v2 .hero-afripixel.lsa-motion .hero-afripixel__network .lsa-path.is-drawn {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hero-afripixel.lsa-motion .lsa-path--a.is-drawn,
.home-v2 .hero-afripixel.lsa-motion .lsa-path--a.is-drawn {
  transition-delay: 0.05s;
}

.hero-afripixel.lsa-motion .lsa-path--b.is-drawn,
.home-v2 .hero-afripixel.lsa-motion .lsa-path--b.is-drawn {
  transition-delay: 0.16s;
}

.hero-afripixel.lsa-motion .lsa-path--c.is-drawn,
.home-v2 .hero-afripixel.lsa-motion .lsa-path--c.is-drawn {
  transition-delay: 0.28s;
}

.hero-afripixel.lsa-motion .lsa-path--d.is-drawn,
.home-v2 .hero-afripixel.lsa-motion .lsa-path--d.is-drawn {
  transition-delay: 0.4s;
}

.hero-afripixel.lsa-motion .lsa-node,
.home-v2 .hero-afripixel.lsa-motion .lsa-node {
  opacity: 0.12;
}

.hero-afripixel.lsa-motion.is-active .lsa-node,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node {
  opacity: 0.78;
  transition: opacity 0.7s var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hero-afripixel.lsa-motion.is-active .lsa-node--signal,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--signal {
  opacity: 1;
  transition-delay: 0.42s;
  filter: none;
}

.hero-afripixel.lsa-motion.is-active .lsa-node--accent,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--accent {
  opacity: 1;
  transition-delay: 0.55s;
}

/* Living network: packet hops + soft node pulses after entrance draw. */
.hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet {
  opacity: 0.92;
  animation: atlas-packet-flow 6.4s linear infinite;
  animation-delay: 1.15s;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--a,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--a {
  animation-duration: 5.8s;
  animation-delay: 1.05s;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--b,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--b {
  animation-duration: 7.4s;
  animation-delay: 1.55s;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--c,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--c {
  animation-duration: 8.6s;
  animation-delay: 1.9s;
  animation-name: atlas-packet-flow-reverse;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--d,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet--d {
  animation-duration: 4.9s;
  animation-delay: 1.35s;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-path--c,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-path--c {
  animation: atlas-path-breathe 5.6s ease-in-out 1.4s infinite;
}

.hero-afripixel.lsa-motion.is-active .lsa-node,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node {
  animation: atlas-node-breathe 4.8s ease-in-out 1.6s infinite;
}

.hero-afripixel.lsa-motion.is-active .lsa-node--signal,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--signal {
  animation: atlas-node-signal 3.4s ease-in-out 1.35s infinite;
}

.hero-afripixel.lsa-motion.is-active .lsa-node--accent,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--accent {
  animation: atlas-node-accent 3.9s ease-in-out 1.7s infinite;
}

@keyframes atlas-packet-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1;
  }
}

@keyframes atlas-packet-flow-reverse {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1;
  }
}

@keyframes atlas-path-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes atlas-node-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.12);
  }
}

@keyframes atlas-node-signal {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
    filter: none;
  }
  45% {
    opacity: 1;
    transform: scale(1.18);
    filter: none;
  }
}

@keyframes atlas-node-accent {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
    filter: none;
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
    filter: none;
  }
}

/* Line-by-line title. Hidden only under .lsa-motion so JS-off and reduced motion stay readable. */
.hero-afripixel.lsa-motion .hero-afripixel__line,
.home-v2 .hero-afripixel.lsa-motion .hero-afripixel__line {
  opacity: 0;
  transform: translate3d(0, 0.42em, 0);
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__line,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__line {
  opacity: 1;
  transform: none;
  transition:
    opacity 640ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 640ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__line:nth-child(1),
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__line:nth-child(1) {
  transition-delay: 0.06s;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__line:nth-child(2),
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__line:nth-child(2) {
  transition-delay: 0.16s;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__line:nth-child(3),
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__line:nth-child(3) {
  transition-delay: 0.26s;
}

/* Calm video bg fades in with hero activation. Soft opacity lives on the video itself. */
.hero-afripixel:not(.lsa-motion) .hero-afripixel__bg,
.home-v2 .hero-afripixel:not(.lsa-motion) .hero-afripixel__bg {
  opacity: 1;
}

.hero-afripixel.lsa-motion:not(.is-active) .hero-afripixel__bg,
.home-v2 .hero-afripixel.lsa-motion:not(.is-active) .hero-afripixel__bg {
  opacity: 0;
}

.hero-afripixel.lsa-motion.is-active .hero-afripixel__bg,
.home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__bg {
  opacity: 1;
}

.hero-afripixel .hero-afripixel__actions,
.hero-afripixel .hero-afripixel__btn,
.home-v2 .hero-afripixel .hero-afripixel__actions,
.home-v2 .hero-afripixel .hero-afripixel__btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.hero-afripixel__cue,
.home-v2 .hero-afripixel__cue {
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  z-index: 4;
  display: flex;
  margin: 0;
  padding: 0;
  color: var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0.5;
}

.hero-afripixel.lsa-motion .hero-afripixel__cue-icon,
.home-v2 .hero-afripixel.lsa-motion .hero-afripixel__cue-icon {
  animation: atlas-hero-cue 1.8s var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}

@keyframes atlas-hero-cue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(4px);
    opacity: 0.75;
  }
}

@media (max-width: 900px) {
  .hero-afripixel .hero-afripixel__network,
  .home-v2 .hero-afripixel .hero-afripixel__network {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-afripixel .hero-afripixel__line,
  .home-v2 .hero-afripixel .hero-afripixel__line,
  .hero-afripixel.lsa-motion .hero-afripixel__line,
  .home-v2 .hero-afripixel.lsa-motion .hero-afripixel__line {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-afripixel .hero-afripixel__network .lsa-path,
  .home-v2 .hero-afripixel .hero-afripixel__network .lsa-path,
  .hero-afripixel.lsa-motion .hero-afripixel__network .lsa-path,
  .home-v2 .hero-afripixel.lsa-motion .hero-afripixel__network .lsa-path {
    stroke-dashoffset: 0;
    transition: none;
    animation: none;
  }

  .hero-afripixel .hero-afripixel__network .lsa-packet,
  .home-v2 .hero-afripixel .hero-afripixel__network .lsa-packet,
  .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet,
  .home-v2 .hero-afripixel.lsa-motion.is-active .hero-afripixel__network .lsa-packet {
    opacity: 0 !important;
    animation: none !important;
  }

  .hero-afripixel .lsa-node,
  .home-v2 .hero-afripixel .lsa-node,
  .hero-afripixel.lsa-motion .lsa-node,
  .home-v2 .hero-afripixel.lsa-motion .lsa-node,
  .hero-afripixel.lsa-motion.is-active .lsa-node,
  .home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node,
  .hero-afripixel.lsa-motion.is-active .lsa-node--signal,
  .home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--signal,
  .hero-afripixel.lsa-motion.is-active .lsa-node--accent,
  .home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--accent {
    opacity: 0.8;
    filter: none;
    transform: none;
    transition: none;
    animation: none !important;
  }

  .hero-afripixel .hero-afripixel__bg,
  .home-v2 .hero-afripixel .hero-afripixel__bg,
  .hero-afripixel.lsa-motion .hero-afripixel__bg,
  .home-v2 .hero-afripixel.lsa-motion .hero-afripixel__bg {
    opacity: 1;
    transition: none;
  }

  .hero-afripixel__cue-icon,
  .home-v2 .hero-afripixel__cue-icon,
  .hero-afripixel.lsa-motion .hero-afripixel__cue-icon,
  .home-v2 .hero-afripixel.lsa-motion .hero-afripixel__cue-icon {
    animation: none;
  }
}

/* === IMPACT ATLAS ===
   Red evidence dots sit inside the figures, aligned to the numerals.
   Copy and data-count values are unchanged. */

.atlas-impact {
  color: #fff;
}

.atlas-impact .hp-impact__heading,
.atlas-impact .hp-impact__value,
.atlas-impact .hp-impact__num {
  color: #fff;
}

.atlas-impact .atlas-evidence {
  position: relative;
  min-width: 0;
}

.atlas-impact .atlas-evidence__node {
  position: relative;
}

.atlas-impact .hp-impact__stat--lead::after,
.atlas-impact .hp-impact__row::before,
.atlas-impact .hp-impact__row::after,
.atlas-impact .hp-impact__row .atlas-evidence__mark::after {
  content: none;
  display: none;
}

.atlas-impact .atlas-evidence__mark {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.18);
  pointer-events: none;
}

.atlas-impact .hp-impact__stat--lead {
  padding-left: 1.5rem;
}

.atlas-impact .hp-impact__stat--lead .atlas-evidence__mark {
  top: clamp(1.8rem, 5.2vw, 3.15rem);
  left: 0;
}

.atlas-impact .hp-impact__row .hp-impact__stat {
  padding-left: 1.5rem;
}

.atlas-impact .hp-impact__row .atlas-evidence__mark {
  top: 1.15rem;
  left: 0;
  margin-top: 0;
}

@media (min-width: 640px) {
  .atlas-impact .hp-impact__row {
    border-top: 0;
    background: rgba(255, 255, 255, 0.16);
    gap: 1px;
  }

  .atlas-impact .hp-impact__row .hp-impact__stat,
  .atlas-impact .hp-impact__row .hp-impact__stat + .hp-impact__stat {
    padding: 1.25rem 1.1rem 1.15rem 2rem;
  }

  .atlas-impact .hp-impact__row .atlas-evidence__mark,
  .atlas-impact .hp-impact__row .hp-impact__stat + .hp-impact__stat .atlas-evidence__mark {
    top: 1.55rem;
    left: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-impact .atlas-evidence__mark {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === SERVICES ATLAS ===
   Modular service map. Traces stay visible with JS off. .lsa-motion only fades
   the rails in (skipped for reduced motion). Hover and :focus-visible light one
   branch with :has(). Rail gap matches the 3-column card grid. */

.hp-services.atlas-service-map {
  --atlas-module-gap: 20px;
  overflow: visible;
}

.home-v2 .hp-services.atlas-service-map {
  background-color: var(--lsa-paper-cool, #eeeff8);
  background-image:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 64px),
    linear-gradient(rgba(9, 6, 183, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 6, 183, 0.045) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

.atlas-service-map__stage {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.atlas-service-map__rails {
  display: none;
}

.atlas-service-path {
  fill: none;
  stroke: var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
  transition:
    stroke var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    filter var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.atlas-service-path--systems,
.atlas-service-path--sites {
  stroke: rgba(203, 0, 1, 0.72);
}

.atlas-service-joint {
  fill: #fff;
  stroke: var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
  stroke-width: 1.5;
  transition:
    fill var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    stroke var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.atlas-service-joint--systems,
.atlas-service-joint--sites {
  stroke: rgba(203, 0, 1, 0.7);
}

.atlas-service-joint--commerce {
  stroke: var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
}

.hp-services.atlas-service-map .hp-services__card {
  overflow: visible;
  border-color: rgba(9, 6, 183, 0.16);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
  -webkit-tap-highlight-color: rgba(9, 6, 183, 0.14);
}

.hp-services.atlas-service-map .hp-services__media {
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.hp-services.atlas-service-map .hp-services__card::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid rgba(203, 0, 1, 0.45);
  border-right: 1.5px solid rgba(203, 0, 1, 0.45);
  pointer-events: none;
}

.hp-services.atlas-service-map .atlas-service-node--commerce::after {
  border-color: rgba(9, 6, 183, 0.4);
}

.atlas-service-port {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 2px solid var(--lsa-signal-red, #cb0001);
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    background var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.atlas-service-node--commerce .atlas-service-port {
  border-color: var(--lsa-signal-blue, #0906b7);
}

.hp-services.atlas-service-map .hp-services__card:hover,
.hp-services.atlas-service-map .hp-services__card:focus-visible {
  transform: none;
}

.hp-services.atlas-service-map .atlas-service-node--systems:hover,
.hp-services.atlas-service-map .atlas-service-node--systems:focus-visible,
.hp-services.atlas-service-map .atlas-service-node--sites:hover,
.hp-services.atlas-service-map .atlas-service-node--sites:focus-visible {
  border-color: rgba(203, 0, 1, 0.45);
  box-shadow:
    0 0 0 1px rgba(203, 0, 1, 0.16),
    0 18px 40px rgba(203, 0, 1, 0.08);
}

.hp-services.atlas-service-map .atlas-service-node--commerce:hover,
.hp-services.atlas-service-map .atlas-service-node--commerce:focus-visible {
  border-color: rgba(9, 6, 183, 0.45);
  box-shadow:
    0 0 0 1px rgba(9, 6, 183, 0.18),
    0 18px 40px rgba(9, 6, 183, 0.1);
}

.hp-services.atlas-service-map .hp-services__card:focus-visible {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 4px;
}

.hp-services.atlas-service-map .hp-services__all {
  border-radius: 6px;
  -webkit-tap-highlight-color: rgba(9, 6, 183, 0.14);
}

.hp-services.atlas-service-map .hp-services__all:focus-visible {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 4px;
}

/* Quiet the other traces while one module is indicated. */
.atlas-service-map:has(.atlas-service-node:is(:hover, :focus-visible), .atlas-service-map__outlet:is(:hover, :focus-visible)) .atlas-service-path,
.atlas-service-map:has(.atlas-service-node:is(:hover, :focus-visible), .atlas-service-map__outlet:is(:hover, :focus-visible)) .atlas-service-joint {
  opacity: 0.28;
}

.atlas-service-map:has(.atlas-service-node--systems:is(:hover, :focus-visible)) .atlas-service-path--systems,
.atlas-service-map:has(.atlas-service-node--systems:is(:hover, :focus-visible)) .atlas-service-path--bus,
.atlas-service-map:has(.atlas-service-map__outlet:is(:hover, :focus-visible)) .atlas-service-path--systems,
.atlas-service-map:has(.atlas-service-map__outlet:is(:hover, :focus-visible)) .atlas-service-path--bus {
  stroke: var(--lsa-signal-red, #cb0001);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(203, 0, 1, 0.45));
}

.atlas-service-map:has(.atlas-service-node--systems:is(:hover, :focus-visible)) .atlas-service-joint--systems,
.atlas-service-map:has(.atlas-service-map__outlet:is(:hover, :focus-visible)) .atlas-service-joint--systems {
  fill: var(--lsa-signal-red, #cb0001);
  stroke: var(--lsa-signal-red, #cb0001);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--systems:is(:hover, :focus-visible)) .atlas-service-node--systems .atlas-service-port,
.atlas-service-map:has(.atlas-service-map__outlet:is(:hover, :focus-visible)) .atlas-service-node--systems .atlas-service-port {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

.atlas-service-map:has(.atlas-service-node--commerce:is(:hover, :focus-visible)) .atlas-service-path--commerce,
.atlas-service-map:has(.atlas-service-node--commerce:is(:hover, :focus-visible)) .atlas-service-path--bus {
  stroke: var(--lsa-signal-blue, #0906b7);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(9, 6, 183, 0.45));
}

.atlas-service-map:has(.atlas-service-node--commerce:is(:hover, :focus-visible)) .atlas-service-joint--commerce {
  fill: var(--lsa-signal-blue, #0906b7);
  stroke: var(--lsa-signal-blue, #0906b7);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--commerce:is(:hover, :focus-visible)) .atlas-service-node--commerce .atlas-service-port {
  background: var(--lsa-signal-blue, #0906b7);
  border-color: var(--lsa-signal-blue, #0906b7);
  box-shadow: 0 0 0 4px rgba(9, 6, 183, 0.16);
}

.atlas-service-map:has(.atlas-service-node--sites:is(:hover, :focus-visible)) .atlas-service-path--sites,
.atlas-service-map:has(.atlas-service-node--sites:is(:hover, :focus-visible)) .atlas-service-path--bus {
  stroke: var(--lsa-signal-red, #cb0001);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(203, 0, 1, 0.45));
}

.atlas-service-map:has(.atlas-service-node--sites:is(:hover, :focus-visible)) .atlas-service-joint--sites {
  fill: var(--lsa-signal-red, #cb0001);
  stroke: var(--lsa-signal-red, #cb0001);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--sites:is(:hover, :focus-visible)) .atlas-service-node--sites .atlas-service-port {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

/* Entrance only when motion is allowed. Lines stay solid so JS-off never hides the map. */
.atlas-service-map.lsa-motion:not(.is-active) .atlas-service-map__rails {
  opacity: 0;
}

.atlas-service-map.lsa-motion.is-active .atlas-service-map__rails {
  opacity: 1;
  transition: opacity var(--lsa-dur-med, 520ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (min-width: 900px) {
  .atlas-service-map__rails {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--atlas-module-gap);
    height: 64px;
    margin: 0 0 -8px;
    pointer-events: none;
  }

  .hp-services.atlas-service-map .hp-services__grid {
    gap: var(--atlas-module-gap);
  }

  .atlas-service-map__bus {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 12px;
    overflow: visible;
  }

  .atlas-service-branch {
    position: relative;
    height: 64px;
    min-width: 0;
  }

  .atlas-service-lead {
    display: block;
    width: 20px;
    height: 64px;
    margin: 0 auto;
    overflow: visible;
  }

  .atlas-service-joint-mark {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 12px;
    height: 12px;
    overflow: visible;
    transform: translateX(-50%);
  }
}

@media (max-width: 899px) {
  .atlas-service-map__rails,
  .hp-services.atlas-service-map .atlas-service-port,
  .hp-services.atlas-service-map .hp-services__card::after {
    display: none;
  }

  .hp-services.atlas-service-map .hp-services__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hp-services.atlas-service-map .hp-services__card {
    min-height: 48px;
  }

  .hp-services.atlas-service-map .hp-services__body {
    padding: 16px 16px 18px;
  }

  .hp-services.atlas-service-map .hp-services__all {
    min-height: 44px;
    padding: 8px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-service-map .atlas-service-path,
  .atlas-service-map .atlas-service-joint,
  .atlas-service-map .atlas-service-port,
  .atlas-service-map .atlas-service-map__rails,
  .atlas-service-map.lsa-motion .atlas-service-map__rails,
  .atlas-service-map.lsa-motion:not(.is-active) .atlas-service-map__rails,
  .hp-services.atlas-service-map .hp-services__card::after {
    opacity: 1;
    transition: none;
    animation: none;
    filter: none;
  }
}

/* === PROCESS ATLAS ===
   Continuous route for .hp-process--pipeline.
   revamp.js owns the spine: it writes scaleY on .hp-process__spine-fill and
   toggles .is-active / .is-passed from scroll position. Do not transition that
   scale, snap the page, or remove .hp-process__node — keyboard activation
   scrolls the focused station to the existing marker. */

.hp-process--pipeline {
  background: var(--lsa-paper, #f7f6f2);
  overflow: visible;
}

.hp-process--pipeline,
.hp-process--pipeline .hp-process__timeline,
.hp-process--pipeline .hp-process__grid,
.hp-process--pipeline .hp-process__step {
  scroll-snap-type: none;
  scroll-snap-align: none;
}

.home-v2 .hp-process--pipeline {
  padding: 56px 0 48px;
}

.hp-process--pipeline .hp-process__head::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lsa-signal-blue, #0906b7), var(--lsa-signal-red, #cb0001));
}

.hp-process--pipeline .hp-process__timeline {
  position: relative;
  overflow: visible;
}

.hp-process--pipeline .hp-process__timeline::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(9, 6, 183, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 6, 183, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

.hp-process--pipeline .hp-process__spine {
  top: 0;
  bottom: 0;
  left: 48px;
  width: 8px;
  transform: none;
  z-index: 1;
  pointer-events: none;
}

.hp-process--pipeline .hp-process__spine::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 2;
  width: 12px;
  height: 12px;
  border: 2px solid var(--lsa-signal-blue, #0906b7);
  border-radius: 50%;
  background: var(--lsa-paper, #f7f6f2);
  transform: translateX(-50%);
}

.hp-process--pipeline .hp-process__spine-track,
.hp-process--pipeline .hp-process__spine-fill {
  border-radius: 999px;
}

.hp-process--pipeline .hp-process__spine-track {
  z-index: 0;
  background-color: rgba(9, 6, 183, 0.08);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(9, 6, 183, 0.5) 0 2px,
    transparent 2px 9px
  );
}

.hp-process--pipeline .hp-process__spine-fill {
  z-index: 1;
  background: var(--lsa-signal-red, #cb0001);
  transform-origin: top center;
  transition: none;
}

.hp-process--pipeline .hp-process__grid {
  position: relative;
  z-index: 2;
}

.hp-process--pipeline .hp-process__step {
  position: relative;
  align-items: center;
  padding: 0;
  margin: 0 0 14px;
  overflow: visible;
}

.hp-process--pipeline .hp-process__step:last-child {
  margin-bottom: 0;
}

.hp-process--pipeline .hp-process__step[data-phase-start] {
  margin-top: 18px;
}

.hp-process--pipeline .hp-process__num {
  align-self: center;
  margin: 0;
  color: var(--lsa-ink, #0b0b2b);
  opacity: 0.72;
}

.hp-process--pipeline .hp-process__step.is-passed .hp-process__num {
  opacity: 1;
  color: var(--lsa-ink, #0b0b2b);
}

.hp-process--pipeline .hp-process__step.is-active .hp-process__num {
  opacity: 1;
  color: var(--lsa-signal-red, #cb0001);
}

.hp-process--pipeline .hp-process__node,
.hp-process--pipeline .hp-process__step.is-active .hp-process__node,
.hp-process--pipeline .hp-process__step.is-passed .hp-process__node,
.hp-process--pipeline .hp-process__step--arrival .hp-process__node,
.hp-process--pipeline .hp-process__step--arrival.is-active .hp-process__node,
.hp-process--pipeline .hp-process__step--arrival.is-passed .hp-process__node {
  width: 14px;
  height: 14px;
  margin: 0;
  align-self: center;
  justify-self: center;
  background: var(--lsa-paper, #f7f6f2);
  border: 2px solid var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
  box-shadow: 0 0 0 4px var(--lsa-paper, #f7f6f2);
  transform: none;
}

.hp-process--pipeline .hp-process__step.is-passed .hp-process__node {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
}

.hp-process--pipeline .hp-process__step.is-active .hp-process__node {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow:
    0 0 0 4px var(--lsa-paper, #f7f6f2),
    0 0 0 8px rgba(203, 0, 1, 0.2);
  transform: scale(1.18);
}

.hp-process--pipeline .hp-process__step--arrival .hp-process__node {
  border-radius: 2px;
  border-color: var(--lsa-ink, #0b0b2b);
}

.hp-process--pipeline .hp-process__step--arrival.is-passed .hp-process__node,
.hp-process--pipeline .hp-process__step--arrival.is-active .hp-process__node {
  border-radius: 2px;
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
}

.hp-process--pipeline .hp-process__spur {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1;
  top: calc(50% - 1px);
  left: 57px;
  width: 16px;
  height: 2px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(9, 6, 183, 0.35);
  pointer-events: none;
  z-index: 1;
}

.hp-process--pipeline .hp-process__step.is-passed .hp-process__spur,
.hp-process--pipeline .hp-process__step.is-active .hp-process__spur {
  background: var(--lsa-signal-red, #cb0001);
}

.hp-process--pipeline .hp-process__body {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 0 10px;
  padding: 16px 16px 17px;
  background: #fff;
  border: 1px solid rgba(9, 6, 183, 0.2);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(11, 11, 43, 0.04);
}

.hp-process--pipeline .hp-process__phase {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 8px;
  padding: 2px 8px;
  border: 1px solid rgba(9, 6, 183, 0.16);
  border-radius: 999px;
  background: rgba(9, 6, 183, 0.06);
  color: var(--lsa-signal-blue, #0906b7);
}

.hp-process--pipeline .hp-process__title {
  color: var(--lsa-ink, #0b0b2b);
  font-size: 1.08rem;
  line-height: 1.3;
}

.hp-process--pipeline .hp-process__text,
.hp-process--pipeline .hp-process__step:nth-child(odd) .hp-process__text,
.hp-process--pipeline .hp-process__step:nth-child(even) .hp-process__text {
  max-width: none;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.hp-process--pipeline .hp-process__step.is-passed .hp-process__body {
  border-color: rgba(9, 6, 183, 0.28);
}

.hp-process--pipeline .hp-process__step.is-active .hp-process__body {
  border-color: rgba(203, 0, 1, 0.42);
  box-shadow: inset 3px 0 0 var(--lsa-signal-red, #cb0001);
}

.hp-process--pipeline .hp-process__step--arrival .hp-process__body {
  border-color: rgba(11, 11, 43, 0.2);
}

.hp-process--pipeline .hp-process__step:focus {
  outline: none;
}

.hp-process--pipeline .hp-process__step:focus-visible .hp-process__body {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 3px;
}

.hp-process--pipeline .hp-process__close {
  margin-top: 32px;
}

.hp-process--pipeline .hp-process__close::before {
  top: -32px;
  left: 48px;
  width: 8px;
  height: 32px;
  border-radius: 0;
  background: rgba(9, 6, 183, 0.28);
  transform: none;
}

.hp-process--pipeline:has(.hp-process__step--arrival.is-active) .hp-process__close::before,
.hp-process--pipeline:has(.hp-process__step--arrival.is-passed) .hp-process__close::before {
  background: var(--lsa-signal-red, #cb0001);
}

@media (hover: hover) and (pointer: fine) {
  .hp-process--pipeline .hp-process__step:hover .hp-process__title {
    border-bottom-color: transparent;
  }

  .hp-process--pipeline .hp-process__step:hover .hp-process__body {
    border-color: rgba(9, 6, 183, 0.4);
  }

  .hp-process--pipeline .hp-process__step:hover .hp-process__node {
    transform: scale(1.08);
  }

  .hp-process--pipeline .hp-process__step.is-active:hover .hp-process__node {
    transform: scale(1.18);
  }
}

@media (min-width: 640px) {
  .hp-process--pipeline .hp-process__spine,
  .hp-process--pipeline .hp-process__close::before {
    left: 62px;
  }

  .hp-process--pipeline .hp-process__spur {
    left: 71px;
    width: 18px;
  }

  .hp-process--pipeline .hp-process__body {
    margin-left: 12px;
    padding: 18px 18px 19px;
  }

  .hp-process--pipeline .hp-process__title {
    font-size: 1.15rem;
  }
}

@media (min-width: 900px) {
  .home-v2 .hp-process--pipeline {
    padding: 72px 0 64px;
  }

  .hp-process--pipeline .hp-process__head::after {
    margin-left: auto;
    margin-right: auto;
  }

  .hp-process--pipeline .hp-process__spine {
    left: 50%;
    width: 8px;
    transform: translateX(-50%);
  }

  .hp-process--pipeline .hp-process__step {
    grid-template-columns: minmax(0, 1fr) 40px 18px 40px minmax(0, 1fr);
    margin-bottom: 18px;
  }

  .hp-process--pipeline .hp-process__step:not(:first-child) {
    margin-top: 0;
  }

  .hp-process--pipeline .hp-process__step[data-phase-start] {
    margin-top: 22px;
  }

  .hp-process--pipeline .hp-process__node {
    grid-column: 3;
    grid-row: 1;
  }

  .hp-process--pipeline .hp-process__step:nth-child(odd) .hp-process__spur {
    left: calc(50% - 49px);
    width: 42px;
  }

  .hp-process--pipeline .hp-process__step:nth-child(even) .hp-process__spur {
    left: calc(50% + 7px);
    width: 42px;
  }

  .hp-process--pipeline .hp-process__step:nth-child(odd) .hp-process__body,
  .hp-process--pipeline .hp-process__step:nth-child(even) .hp-process__body {
    align-self: center;
    text-align: left;
    width: min(100%, 460px);
    margin: 0;
  }

  .hp-process--pipeline .hp-process__step:nth-child(odd) .hp-process__body {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    padding: 18px 64px 18px 18px;
  }

  .hp-process--pipeline .hp-process__step:nth-child(even) .hp-process__body {
    grid-column: 5;
    grid-row: 1;
    justify-self: start;
    padding: 18px 18px 18px 64px;
  }

  .hp-process--pipeline .hp-process__step:nth-child(odd) .hp-process__num,
  .hp-process--pipeline .hp-process__step:nth-child(even) .hp-process__num {
    grid-row: 1;
    align-self: start;
    z-index: 4;
    font-size: 1.35rem;
  }

  .hp-process--pipeline .hp-process__step:nth-child(odd) .hp-process__num {
    grid-column: 1;
    justify-self: end;
    margin: 18px 18px 0 0;
  }

  .hp-process--pipeline .hp-process__step:nth-child(even) .hp-process__num {
    grid-column: 5;
    justify-self: start;
    margin: 18px 0 0 18px;
  }

  .hp-process--pipeline .hp-process__step:nth-child(odd).is-active .hp-process__body {
    box-shadow: inset -3px 0 0 var(--lsa-signal-red, #cb0001);
  }

  .hp-process--pipeline .hp-process__step:nth-child(even).is-active .hp-process__body {
    box-shadow: inset 3px 0 0 var(--lsa-signal-red, #cb0001);
  }

  .hp-process--pipeline .hp-process__close {
    margin-top: 36px;
  }

  .hp-process--pipeline .hp-process__close::before {
    top: -36px;
    left: 50%;
    height: 36px;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-process--pipeline .hp-process__node,
  .hp-process--pipeline .hp-process__spur,
  .hp-process--pipeline .hp-process__body,
  .hp-process--pipeline .hp-process__num,
  .hp-process--pipeline .hp-process__step.is-active .hp-process__node,
  .hp-process--pipeline .hp-process__step:hover .hp-process__node,
  .hp-process--pipeline .hp-process__step.is-active:hover .hp-process__node {
    transition: none;
    animation: none;
  }

  .hp-process--pipeline .hp-process__step.is-active .hp-process__node,
  .hp-process--pipeline .hp-process__step:hover .hp-process__node,
  .hp-process--pipeline .hp-process__step.is-active:hover .hp-process__node {
    transform: none;
  }
}

/* === IX CASE STUDIES ===
   Detail pages only (.cs-detail). Chapter rail, challenge→platform bridge,
   CTA button states, lightbox focus. Copy and media are untouched.
   Ids exist only on sections the template actually renders. */

.cs-detail {
  position: relative;
}

.cs-detail :is(
  #cs-hero,
  #cs-challenge,
  #cs-platform,
  #cs-features,
  #cs-shots,
  #cs-result,
  #cs-video,
  #cs-built,
  #cs-cta
) {
  scroll-margin-top: 4.75rem;
}

.cs-chapters {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 45;
  height: 24px;
  margin: 0;
  pointer-events: none;
}

.cs-chapters__rail {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
  pointer-events: auto;
}

.cs-chapters__item {
  flex: 1 1 0;
  min-width: 0;
}

.cs-chapters__link {
  position: relative;
  display: block;
  height: 24px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--lsa-line, rgba(9, 6, 183, 0.28)), var(--lsa-line, rgba(9, 6, 183, 0.28))) center top / 100% 3px no-repeat;
  border-radius: 0;
}

.cs-chapters__link.is-complete {
  background: linear-gradient(var(--lsa-signal-blue, #0906b7), var(--lsa-signal-blue, #0906b7)) center top / 100% 3px no-repeat;
}

.cs-chapters__link.is-current {
  background: linear-gradient(var(--lsa-signal-red, #cb0001), var(--lsa-signal-red, #cb0001)) center top / 100% 3px no-repeat;
}

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

.cs-chapters__link:focus {
  outline: none;
}

.cs-chapters__link:focus-visible {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 2px;
}

.cs-chapters__link:active {
  background: linear-gradient(var(--lsa-signal-red, #cb0001), var(--lsa-signal-red, #cb0001)) center top / 100% 3px no-repeat;
}

@media (max-width: 860px) {
  .cs-chapters {
    top: 58px;
  }

  .cs-detail :is(
    #cs-hero,
    #cs-challenge,
    #cs-platform,
    #cs-features,
    #cs-shots,
    #cs-result,
    #cs-video,
    #cs-built,
    #cs-cta
  ) {
    scroll-margin-top: 5.5rem;
  }
}

@media (min-width: 861px) and (max-width: 979px) {
  .cs-detail :is(
    #cs-hero,
    #cs-challenge,
    #cs-platform,
    #cs-features,
    #cs-shots,
    #cs-result,
    #cs-video,
    #cs-built,
    #cs-cta
  ) {
    scroll-margin-top: 5.75rem;
  }
}

@media (min-width: 980px) {
  .cs-chapters {
    top: 5.5rem;
    right: auto;
    left: max(8px, calc((100vw - min(1180px, 92vw)) / 2 - 180px));
    width: min(168px, max(36px, calc((100vw - min(1180px, 92vw)) / 2 - 28px)));
    height: auto;
    max-height: calc(100vh - 7rem);
    padding: 4px;
    overflow: auto;
    pointer-events: auto;
  }

  .cs-chapters__rail {
    position: relative;
    display: grid;
    gap: 0.15rem;
    height: auto;
    padding: 0;
  }

  .cs-chapters__rail::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    left: 7px;
    width: 1px;
    background: var(--lsa-line, rgba(9, 6, 183, 0.28));
    pointer-events: none;
  }

  .cs-chapters__item {
    flex: none;
  }

  .cs-chapters__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: auto;
    min-height: 1.55rem;
    padding: 0.12rem 0.15rem 0.12rem 0;
    color: #334155;
    background: none;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .cs-chapters__link.is-complete,
  .cs-chapters__link.is-current,
  .cs-chapters__link:active {
    background: none;
  }

  .cs-chapters__link.is-current {
    color: var(--lsa-signal-blue, #0906b7);
  }

  .cs-chapters__link:hover {
    color: var(--lsa-signal-blue, #0906b7);
  }

  .cs-chapters__link:active {
    color: var(--lsa-signal-red, #cb0001);
  }

  .cs-chapters__mark,
  .cs-chapters__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
    clip: auto;
    white-space: nowrap;
    border: 0;
  }

  .cs-chapters__mark {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(9, 6, 183, 0.28);
    box-shadow: 0 0 0 1px rgba(9, 6, 183, 0.18);
  }

  .cs-chapters__label {
    min-width: 0;
    text-overflow: ellipsis;
  }

  .cs-chapters__link.is-complete .cs-chapters__mark,
  .cs-chapters__link:hover .cs-chapters__mark {
    background: var(--lsa-signal-blue, #0906b7);
  }

  .cs-chapters__link.is-current .cs-chapters__mark {
    background: var(--lsa-signal-red, #cb0001);
    box-shadow:
      0 0 0 2px #f7f8fb,
      0 0 0 3px var(--lsa-signal-red, #cb0001);
  }

  .cs-chapters__link:focus-visible {
    outline-offset: 3px;
  }
}

/* Challenge → platform spine. Decorative; no copy. */
.cs-bridge {
  position: absolute;
  z-index: 1;
  width: 12px;
  pointer-events: none;
}

.cs-bridge svg {
  display: block;
  width: 12px;
  height: 100%;
  overflow: visible;
}

.cs-bridge__track,
.cs-bridge__fill {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cs-bridge__track {
  stroke: var(--lsa-line, rgba(9, 6, 183, 0.28));
  stroke-width: 1.5;
}

.cs-bridge__fill {
  stroke: var(--lsa-signal-blue, #0906b7);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--cs-bridge-p, 0));
  transition: stroke-dashoffset 160ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cs-bridge__node {
  position: absolute;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lsa-signal-blue, #0906b7);
  box-shadow:
    0 0 0 2px #f7f8fb,
    0 0 0 3px var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
}

.cs-bridge__node--start {
  top: 0;
}

.cs-bridge__node--end {
  bottom: 0;
  background: #fff;
  box-shadow:
    0 0 0 2px #f7f8fb,
    0 0 0 3px var(--lsa-line, rgba(9, 6, 183, 0.28));
}

.cs-bridge.is-complete .cs-bridge__node--end {
  background: var(--lsa-signal-red, #cb0001);
  box-shadow:
    0 0 0 2px #f7f8fb,
    0 0 0 3px var(--lsa-signal-red, #cb0001);
}

/* CTA. Decorative overlays stay out of the hit target. */
.cs-page.cs-detail .cs-cta::before,
.cs-page.cs-detail .cs-cta::after,
.cs-page.cs-detail .cs-cta__panel::before,
.cs-page.cs-detail .cs-cta__panel::after,
.cs-page.cs-detail .cs-cta__panel h2::before,
.cs-page.cs-detail .cs-cta__panel h2::after {
  pointer-events: none;
}

.cs-page.cs-detail .cs-cta .cs-cta__panel a.cs-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  transition:
    filter var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cs-page.cs-detail .cs-cta .cs-cta__panel a.cs-btn:hover {
  filter: brightness(1.08);
}

.cs-page.cs-detail .cs-cta .cs-cta__panel a.cs-btn:active {
  filter: brightness(0.9);
}

.cs-page.cs-detail .cs-cta .cs-cta__panel a.cs-btn:focus {
  outline: none;
}

.cs-page.cs-detail .cs-cta .cs-cta__panel a.cs-btn:focus-visible {
  outline: 2px solid var(--lsa-signal-red, #cb0001);
  outline-offset: 3px;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 7px var(--lsa-signal-blue, #0906b7);
}

.cs-detail ~ .cs-lightbox img {
  transform: none;
}

.cs-detail ~ .cs-lightbox .cs-lightbox__close:focus {
  outline: none;
}

.cs-detail ~ .cs-lightbox .cs-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .cs-detail ~ .cs-lightbox.is-open img {
    animation: cs-ix-lightbox-fade 200ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
  }
}

@keyframes cs-ix-lightbox-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-chapters__link,
  .cs-chapters__mark,
  .cs-bridge__fill,
  .cs-page.cs-detail .cs-cta .cs-cta__panel a.cs-btn {
    transition: none;
    animation: none;
  }

  .cs-bridge__fill {
    stroke-dashoffset: 0;
  }

  .cs-detail ~ .cs-lightbox,
  .cs-detail ~ .cs-lightbox img,
  .cs-detail ~ .cs-lightbox.is-open img {
    transform: none;
    animation: none;
    transition: none;
  }
}

/* === IX ABOUT ===
   About page only. Chapter markers, value selection, one-time reveals.
   Copy stays visible without JS; motion is skipped when reduced. */

.about-page #about-intro,
.about-page #about-mission,
.about-page #about-values,
.about-page #about-cta {
  scroll-margin-top: 80px;
}

@media (min-width: 900px) {
  .about-page #about-intro,
  .about-page #about-mission,
  .about-page #about-values,
  .about-page #about-cta {
    scroll-margin-top: 92px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.about-page) {
    scroll-behavior: smooth;
  }
}

/* Existing block reveals stay readable if JS never runs. */
.about-page [data-reveal] {
  opacity: 1;
  transform: none;
}

html.js .about-page [data-reveal]:not(.is-visible) {
  opacity: 0;
}

.about-page .ap-wayfind__bar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 40;
  height: 2px;
  margin: 0;
  pointer-events: none;
  background: rgba(9, 6, 183, 0.1);
}

.site-header:has(.mobile-nav.is-open) ~ main .about-page .ap-wayfind__bar {
  visibility: hidden;
}

.about-page .ap-wayfind__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--afri-red, #cb0001), var(--afri-blue, #0906b7));
  transition: transform 0.35s ease;
}

.about-page .ap-wayfind__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 8px 4px;
}

.about-page .ap-wayfind__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #0b0b2b;
  text-decoration: none;
}

.about-page .ap-wayfind__link:focus-visible {
  outline: 2px solid var(--afri-blue, #0906b7);
  outline-offset: 2px;
}

.about-page .ap-wayfind__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(11, 11, 43, 0.28);
  transition: height 0.2s ease, background-color 0.2s ease;
}

.about-page .ap-wayfind__link[aria-current="location"] .ap-wayfind__dot {
  height: 18px;
  background: var(--afri-red, #cb0001);
}

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

@media (min-width: 1280px) {
  .about-page .ap-wayfind__bar {
    display: none;
  }

  .about-page .ap-wayfind__list {
    position: fixed;
    z-index: 30;
    top: 50%;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-50%);
    border: 1px solid rgba(2, 6, 23, 0.06);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
  }
}

@media (min-width: 1440px) {
  .about-page .ap-wayfind__link:hover .ap-wayfind__label,
  .about-page .ap-wayfind__link:focus-visible .ap-wayfind__label,
  .about-page .ap-wayfind__link[aria-current="location"] .ap-wayfind__label {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    overflow: visible;
    clip: auto;
    transform: translateY(-50%);
    border: 1px solid rgba(2, 6, 23, 0.08);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06);
    color: #0b0b2b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
  }
}

.about-page .ap-card[data-about-value] {
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.about-page .ap-card[data-about-value] h3,
.about-page .ap-card[data-about-value] p {
  max-height: none;
  visibility: visible;
  opacity: 1;
}

.about-page .ap-card[data-about-value]:hover {
  transform: none;
}

.about-page .ap-card[data-about-value]:focus {
  outline: none;
}

.about-page .ap-card[data-about-value]:focus-visible {
  outline: 2px solid var(--afri-blue, #0906b7);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .about-page .ap-card[data-about-value]:hover {
    transform: translateY(-4px);
    border-color: rgba(9, 6, 183, 0.28);
    box-shadow: 0 18px 40px rgba(9, 6, 183, 0.1);
  }
}

.about-page .ap-card[data-about-value][data-active="true"] {
  border-color: rgba(9, 6, 183, 0.45);
  box-shadow:
    0 16px 36px rgba(9, 6, 183, 0.1),
    inset 3px 0 0 var(--afri-blue, #0906b7);
  transform: translateY(-2px);
}

.about-page .ap-grid:has(.ap-card[data-active="true"]) .ap-card[data-about-value]:not([data-active="true"]):not(:hover) {
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  .about-page [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .about-page .ap-wayfind__bar-fill,
  .about-page .ap-wayfind__dot,
  .about-page .ap-card[data-about-value] {
    transition: none;
    animation: none;
  }

  .about-page .ap-card[data-about-value]:hover,
  .about-page .ap-card[data-about-value][data-active="true"] {
    transform: none;
  }

  html:has(.about-page) {
    scroll-behavior: auto;
  }
}

/* === IX HOME ===
   Homepage interaction only (hero, services, work, process, FAQ).
   Decorative cues. Copy, links, and images are unchanged.
   Native details/summary stay in charge of the FAQ.
   The process spine scale is not transitioned. */

#our-services,
#our-work,
#faq,
#our-process {
  scroll-margin-top: 92px;
}

/* Hero: nearby nodes brighten. The SVG stays pointer-events: none. */
.hero-afripixel.lsa-motion.is-active .lsa-node,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node {
  transition:
    opacity 0.7s var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    filter 180ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hero-afripixel.lsa-motion.is-active .lsa-node.is-near,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node.is-near {
  opacity: 1;
  transition-delay: 0s;
  filter: drop-shadow(0 0 7px rgba(9, 6, 183, 0.72));
}

.hero-afripixel.lsa-motion.is-active .lsa-node--accent.is-near,
.home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--accent.is-near {
  filter: drop-shadow(0 0 7px rgba(203, 0, 1, 0.75));
}

/* Services: press, tap, and keyboard match the hover branch. */
.hp-services.atlas-service-map .hp-services__card,
.hp-services.atlas-service-map .hp-services__all {
  touch-action: manipulation;
}

.hp-services.atlas-service-map .atlas-service-node--systems:is(:focus-visible, :active, .is-engaged),
.hp-services.atlas-service-map .atlas-service-node--sites:is(:focus-visible, :active, .is-engaged) {
  border-color: rgba(203, 0, 1, 0.62);
  box-shadow:
    0 0 0 3px rgba(203, 0, 1, 0.18),
    0 14px 32px rgba(203, 0, 1, 0.1);
  transform: none;
}

.hp-services.atlas-service-map .atlas-service-node--commerce:is(:focus-visible, :active, .is-engaged) {
  border-color: rgba(9, 6, 183, 0.62);
  box-shadow:
    0 0 0 3px rgba(9, 6, 183, 0.18),
    0 14px 32px rgba(9, 6, 183, 0.12);
  transform: none;
}

.hp-services.atlas-service-map .hp-services__card:is(:focus-visible, :active, .is-engaged) .hp-services__more,
.hp-services.atlas-service-map .hp-services__all:is(:focus-visible, :active, .is-engaged) {
  color: var(--lsa-signal-red, #cb0001);
}

.atlas-service-map:has(.atlas-service-node:is(:active, .is-engaged), .atlas-service-map__outlet:is(:active, .is-engaged)) .atlas-service-path,
.atlas-service-map:has(.atlas-service-node:is(:active, .is-engaged), .atlas-service-map__outlet:is(:active, .is-engaged)) .atlas-service-joint {
  opacity: 0.28;
}

.atlas-service-map:has(.atlas-service-node--systems:is(:active, .is-engaged)) .atlas-service-path--systems,
.atlas-service-map:has(.atlas-service-node--systems:is(:active, .is-engaged)) .atlas-service-path--bus,
.atlas-service-map:has(.atlas-service-map__outlet:is(:active, .is-engaged)) .atlas-service-path--systems,
.atlas-service-map:has(.atlas-service-map__outlet:is(:active, .is-engaged)) .atlas-service-path--bus {
  stroke: var(--lsa-signal-red, #cb0001);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(203, 0, 1, 0.45));
}

.atlas-service-map:has(.atlas-service-node--systems:is(:active, .is-engaged)) .atlas-service-joint--systems,
.atlas-service-map:has(.atlas-service-map__outlet:is(:active, .is-engaged)) .atlas-service-joint--systems {
  fill: var(--lsa-signal-red, #cb0001);
  stroke: var(--lsa-signal-red, #cb0001);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--systems:is(:active, .is-engaged)) .atlas-service-node--systems .atlas-service-port,
.atlas-service-map:has(.atlas-service-map__outlet:is(:active, .is-engaged)) .atlas-service-node--systems .atlas-service-port {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

.atlas-service-map:has(.atlas-service-node--commerce:is(:active, .is-engaged)) .atlas-service-path--commerce,
.atlas-service-map:has(.atlas-service-node--commerce:is(:active, .is-engaged)) .atlas-service-path--bus {
  stroke: var(--lsa-signal-blue, #0906b7);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(9, 6, 183, 0.45));
}

.atlas-service-map:has(.atlas-service-node--commerce:is(:active, .is-engaged)) .atlas-service-joint--commerce {
  fill: var(--lsa-signal-blue, #0906b7);
  stroke: var(--lsa-signal-blue, #0906b7);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--commerce:is(:active, .is-engaged)) .atlas-service-node--commerce .atlas-service-port {
  background: var(--lsa-signal-blue, #0906b7);
  border-color: var(--lsa-signal-blue, #0906b7);
  box-shadow: 0 0 0 4px rgba(9, 6, 183, 0.16);
}

.atlas-service-map:has(.atlas-service-node--sites:is(:active, .is-engaged)) .atlas-service-path--sites,
.atlas-service-map:has(.atlas-service-node--sites:is(:active, .is-engaged)) .atlas-service-path--bus {
  stroke: var(--lsa-signal-red, #cb0001);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(203, 0, 1, 0.45));
}

.atlas-service-map:has(.atlas-service-node--sites:is(:active, .is-engaged)) .atlas-service-joint--sites {
  fill: var(--lsa-signal-red, #cb0001);
  stroke: var(--lsa-signal-red, #cb0001);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--sites:is(:active, .is-engaged)) .atlas-service-node--sites .atlas-service-port {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

@media (max-width: 899px) {
  .hp-services.atlas-service-map .atlas-service-node--systems:is(:hover, :focus-visible, :active, .is-engaged),
  .hp-services.atlas-service-map .atlas-service-node--sites:is(:hover, :focus-visible, :active, .is-engaged) {
    border-color: rgba(203, 0, 1, 0.6);
    box-shadow: inset 4px 0 0 var(--lsa-signal-red, #cb0001);
    transform: none;
  }

  .hp-services.atlas-service-map .atlas-service-node--commerce:is(:hover, :focus-visible, :active, .is-engaged) {
    border-color: rgba(9, 6, 183, 0.6);
    box-shadow: inset 4px 0 0 var(--lsa-signal-blue, #0906b7);
    transform: none;
  }
}

/* Work: schematic line + node. No screenshot. First tap still follows the link. */
#our-work .hp-work__card {
  position: relative;
  touch-action: manipulation;
}

#our-work .hp-work__card::before,
#our-work .hp-work__card::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

#our-work .hp-work__card::before {
  top: 15px;
  left: 30px;
  width: min(46%, 156px);
  height: 2px;
  border-radius: 999px;
  background: var(--lsa-signal-blue, #0906b7);
  transform: scaleX(0.22);
  transform-origin: left center;
  opacity: 0.5;
  transition:
    transform 320ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 320ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

#our-work .hp-work__card::after {
  top: 11px;
  left: 16px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--lsa-signal-blue, #0906b7);
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
  transition:
    box-shadow 320ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 320ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

#our-work .hp-work__card--red::before {
  background: var(--lsa-signal-red, #cb0001);
}

#our-work .hp-work__card--red::after {
  border-color: var(--lsa-signal-red, #cb0001);
}

#our-work .hp-work__card--navy::before {
  background: var(--lsa-ink, #0b0b2b);
}

#our-work .hp-work__card--navy::after {
  border-color: var(--lsa-ink, #0b0b2b);
}

#our-work .hp-work__card:is(:hover, :focus-visible, :active) {
  border-color: rgba(9, 6, 183, 0.4);
}

#our-work .hp-work__card--red:is(:hover, :focus-visible, :active) {
  border-color: rgba(203, 0, 1, 0.45);
}

#our-work .hp-work__card--navy:is(:hover, :focus-visible, :active) {
  border-color: rgba(11, 11, 43, 0.4);
}

#our-work .hp-work__card:is(:hover, :focus-visible, :active)::before {
  transform: scaleX(1);
  opacity: 1;
}

#our-work .hp-work__card:is(:hover, :focus-visible, :active)::after {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(9, 6, 183, 0.16);
}

#our-work .hp-work__card--red:is(:hover, :focus-visible, :active)::after {
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

#our-work .hp-work__card--navy:is(:hover, :focus-visible, :active)::after {
  box-shadow: 0 0 0 4px rgba(11, 11, 43, 0.14);
}

#our-work .hp-work__card:is(:focus-visible, :active) .hp-work__title {
  color: var(--afri-blue, #0906b7);
}

@media (hover: hover) and (pointer: fine) {
  #our-work .hp-work__card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(2, 6, 23, 0.1);
  }
}

@media (hover: none), (pointer: coarse) {
  #our-work .hp-work__card:hover,
  #our-work a.hp-work__card:hover {
    transform: none;
  }
}

/* Process: stage color and node ease. Spine scale stays instant. */
.hp-process--pipeline .hp-process__spine,
.hp-process--pipeline .hp-process__spine-track,
.hp-process--pipeline .hp-process__spine-fill {
  transition: none;
}

.hp-process--pipeline .hp-process__node,
.hp-process--pipeline .hp-process__spur,
.hp-process--pipeline .hp-process__num,
.hp-process--pipeline .hp-process__body {
  transition:
    background-color 280ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 280ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 280ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    color 280ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 280ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 280ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* FAQ: keep open state quiet — no inset bar / tinted capsule. */
.hp-faq__item {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hp-faq__item[open],
.hp-faq__item.is-open {
  background: transparent;
  box-shadow: none;
}

.hp-faq__item[open] > .hp-faq__question,
.hp-faq__item.is-open > .hp-faq__question {
  color: var(--text-900, #0f172a);
}

.hp-faq__item[open] > .hp-faq__question::after,
.hp-faq__item.is-open > .hp-faq__question::after {
  background: transparent;
  border-radius: 0;
  color: var(--afri-blue, #0906b7);
}

.hp-faq__item > .hp-faq__question:focus-visible {
  background: transparent;
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-afripixel .lsa-node,
  .home-v2 .hero-afripixel .lsa-node,
  .hero-afripixel.lsa-motion.is-active .lsa-node,
  .home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node,
  .hero-afripixel.lsa-motion.is-active .lsa-node.is-near,
  .home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node.is-near,
  .hero-afripixel.lsa-motion.is-active .lsa-node--accent.is-near,
  .home-v2 .hero-afripixel.lsa-motion.is-active .lsa-node--accent.is-near {
    filter: none;
    transition: none;
  }

  #our-work .hp-work__card::before,
  #our-work .hp-work__card::after {
    transition: none;
    animation: none;
  }

  #our-work .hp-work__card:is(:hover, :focus-visible, :active),
  #our-work .hp-work__card:focus-visible {
    transform: none;
  }

  .hp-process--pipeline .hp-process__node,
  .hp-process--pipeline .hp-process__spur,
  .hp-process--pipeline .hp-process__num,
  .hp-process--pipeline .hp-process__body,
  .hp-process--pipeline .hp-process__spine-fill,
  .hp-faq__item,
  .hp-faq__item[open],
  .hp-faq__item.is-open {
    transition: none;
    animation: none;
  }
}

/* === JOURNEY SHARED ===
   Timing and route colors for connected-page motion.
   Ease matches the Living Systems Atlas curve. */

:root {
  --journey-dur: 360ms;
  --journey-ease: var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
  --journey-stroke: var(--lsa-line, rgba(9, 6, 183, 0.28));
  --journey-stroke-strong: var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
  --journey-stroke-signal: var(--lsa-signal-blue, var(--afri-blue, #0906b7));
  --journey-stroke-accent: var(--lsa-signal-red, var(--afri-red, #cb0001));
}

/* === JOURNEY HOME ===
   Homepage only. Thin route between chapters, a 2px progress bar,
   and a short title settle when a chapter becomes active.
   Body copy stays readable. No scroll lock. */

.home-v2 {
  position: relative;
}

#home-hero,
#hp-impact,
#why-afripixel,
#home-cta {
  scroll-margin-top: 92px;
}

.home-v2 > [data-home-chapter]:not(#home-hero) {
  position: relative;
  overflow: visible;
}

.home-v2 > [data-home-chapter] :is(
  .hero-afripixel__wrap,
  .hero-afripixel__title,
  .hp-services__wrap,
  .hp-impact__wrap,
  .hp-work__wrap,
  .hp-process__wrap,
  .hp-why__wrap,
  .hp-faq__wrap,
  .hp-cta__wrap,
  .hp-services__head,
  .hp-impact__copy,
  .hp-work__head,
  .hp-process__head,
  .hp-why__head,
  .hp-faq__head,
  .hp-services__heading,
  .hp-impact__heading,
  .hp-work__heading,
  .hp-process__heading,
  .hp-why__heading,
  .hp-faq__heading,
  .hp-cta__heading
) {
  position: relative;
  z-index: 2;
}

/* Section intros stay on screen. The one-shot reveal must not blank them. */
.home-v2 :is(
  .hp-services__head,
  .hp-impact__copy,
  .hp-work__head,
  .hp-process__head,
  .hp-why__head,
  .hp-faq__head,
  .hp-cta__wrap
)[data-reveal] {
  opacity: 1;
  transform: none;
}

.home-v2 > [data-home-chapter] :is(
  .hp-services__intro,
  .hp-impact__support,
  .hp-work__desc,
  .hp-process__desc,
  .hp-why__intro,
  .hp-faq__intro,
  .hp-cta__support,
  .hp-cta__micro
) {
  opacity: 1;
  transform: none;
}

/* Seam route. Drawn in full unless motion is allowed and the chapter is ahead. */
.home-v2 > [data-home-chapter] + [data-home-chapter]::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 4px;
  width: 8px;
  height: 52px;
  margin-top: -26px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, var(--journey-stroke-signal) 0 2.4px, #f7f8fb 2.5px 3.2px, var(--journey-stroke-strong) 3.3px 3.9px, transparent 4.1px),
    linear-gradient(var(--journey-stroke-signal), var(--journey-stroke-signal));
  background-size: 8px 8px, 1.5px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transform-origin: top center;
}

.home-v2 > #home-cta::after {
  background-image:
    radial-gradient(circle at 50% 50%, var(--journey-stroke-accent) 0 2.4px, #f7f8fb 2.5px 3.2px, var(--journey-stroke-accent) 3.3px 3.9px, transparent 4.1px),
    linear-gradient(var(--journey-stroke-signal), var(--journey-stroke-accent));
}

.home-v2 > .home-journey {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

.home-journey__bar {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 40;
  height: 2px;
  margin: 0;
  pointer-events: none;
  background: var(--journey-stroke);
}

.home-journey__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--journey-stroke-accent), var(--journey-stroke-signal));
}

.home-v2.journey-ready .home-journey__bar-fill {
  transition: transform var(--journey-dur) var(--journey-ease);
}

.home-journey__list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.home-journey__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  pointer-events: auto;
  touch-action: manipulation;
  color: inherit;
  text-decoration: none;
}

.home-journey__link:focus {
  outline: none;
}

.home-journey__link:focus-visible {
  outline: 2px solid var(--journey-stroke-signal);
  outline-offset: 2px;
  border-radius: 999px;
}

.home-journey__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--journey-stroke-strong);
  box-shadow: 0 0 0 2px #fff;
}

.home-journey__link.is-complete .home-journey__dot {
  background: var(--journey-stroke-signal);
}

.home-journey__link.is-current .home-journey__dot,
.home-journey__link[aria-current="location"] .home-journey__dot {
  height: 16px;
  background: var(--journey-stroke-accent);
}

.site-header:has(.mobile-nav.is-open) ~ main .home-journey__bar,
.site-header:has(.mobile-nav.is-open) ~ main .home-journey__list {
  visibility: hidden;
}

@media (min-width: 1280px) {
  .home-journey__bar {
    display: none;
  }

  .home-journey__list {
    position: fixed;
    z-index: 30;
    top: 50%;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home-v2.journey-motion > [data-home-chapter] + [data-home-chapter]:not(.is-bridged)::after {
    transform: scaleY(0);
  }

  .home-v2.journey-motion > [data-home-chapter].is-bridged::after {
    transform: scaleY(1);
  }

  .home-v2.journey-motion.journey-ready > [data-home-chapter].is-bridged::after {
    transition: transform var(--journey-dur) var(--journey-ease);
  }

  .home-v2.journey-motion > [data-home-chapter]:not(#home-hero):not(.is-seen) :is(
    .hp-services__heading,
    .hp-impact__heading,
    .hp-work__heading,
    .hp-process__heading,
    .hp-why__heading,
    .hp-faq__heading,
    .hp-cta__heading
  ) {
    opacity: 0.72;
    transform: translate3d(0, 0.16em, 0);
  }

  .home-v2.journey-motion.journey-ready > [data-home-chapter].is-seen :is(
    .hp-services__heading,
    .hp-impact__heading,
    .hp-work__heading,
    .hp-process__heading,
    .hp-why__heading,
    .hp-faq__heading,
    .hp-cta__heading
  ) {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--journey-dur) var(--journey-ease),
      transform var(--journey-dur) var(--journey-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 > [data-home-chapter] + [data-home-chapter]::after,
  .home-v2.journey-motion > [data-home-chapter] + [data-home-chapter]::after,
  .home-v2.journey-motion > [data-home-chapter].is-bridged::after {
    transform: none;
    transition: none;
    animation: none;
  }

  .home-v2 :is(
    .hp-services__heading,
    .hp-impact__heading,
    .hp-work__heading,
    .hp-process__heading,
    .hp-why__heading,
    .hp-faq__heading,
    .hp-cta__heading
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-journey__bar-fill,
  .home-journey__dot {
    transition: none;
    animation: none;
  }
}

/* === JOURNEY CASE STUDIES ===
   Consecutive-section cues on .cs-detail, plus a first-paint opacity hint
   for Home, About, and Custom Systems detail. Copy and media are unchanged.
   New spines reuse .cs-bridge and are created only when both sections exist
   and one follows the other. Challenge → platform stays [data-cs-bridge].
   View Transitions are not used: a navigation snapshot can hold first paint
   and interfere with back/forward and hash links. */

.cs-detail {
  --cs-journey-dur: 160ms;
  --cs-journey-ease: var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
}

/* Arrival hint. Opacity stays high so text and controls remain usable.
   Hash targets skip it so deep links paint at full strength. */
@media (prefers-reduced-motion: no-preference) {
  html:not(:has(:target)) :is(.home-v2, .about-page, .cs-detail) {
    animation: cs-journey-route 150ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))) both;
  }
}

@keyframes cs-journey-route {
  from {
    opacity: 0.86;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 980px) and (prefers-reduced-motion: no-preference) {
  .cs-chapters__link {
    transition: color var(--cs-journey-dur, 160ms) var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .cs-chapters__mark {
    transition:
      background-color var(--cs-journey-dur, 160ms) var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
      box-shadow var(--cs-journey-dur, 160ms) var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
      transform var(--cs-journey-dur, 160ms) var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .cs-chapters__link.is-current .cs-chapters__mark {
    transform: scale(1.2);
  }
}

/* Compact mobile bar stays 3px tall. The color crossfades; the hit area does not grow. */
@media (max-width: 979px) and (prefers-reduced-motion: no-preference) {
  .cs-chapters__link,
  .cs-chapters__link.is-complete,
  .cs-chapters__link.is-current,
  .cs-chapters__link:active {
    background: linear-gradient(var(--lsa-line, rgba(9, 6, 183, 0.28)), var(--lsa-line, rgba(9, 6, 183, 0.28))) center top / 100% 3px no-repeat;
  }

  .cs-chapters__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--lsa-signal-blue, #0906b7);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--cs-journey-dur, 160ms) var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
      background-color var(--cs-journey-dur, 160ms) var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .cs-chapters__link.is-complete::before {
    opacity: 1;
    background: var(--lsa-signal-blue, #0906b7);
  }

  .cs-chapters__link.is-current::before,
  .cs-chapters__link:active::before,
  .cs-chapters__link.is-complete:active::before {
    opacity: 1;
    background: var(--lsa-signal-red, #cb0001);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cs-detail .cs-shot.is-visible .cs-shot__frame > img {
    animation: cs-journey-shot 240ms var(--cs-journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))) backwards;
  }
}

@keyframes cs-journey-shot {
  from {
    transform: translateY(8px);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2,
  .about-page,
  .cs-detail {
    animation: none;
    opacity: 1;
  }

  .cs-chapters__link,
  .cs-chapters__link::before,
  .cs-chapters__mark,
  .cs-detail .cs-shot__frame > img,
  .cs-detail [data-cs-journey],
  .cs-detail [data-cs-journey] .cs-bridge__fill {
    transition: none;
    animation: none;
  }

  .cs-chapters__link.is-current .cs-chapters__mark {
    transform: none;
  }

  .cs-detail [data-cs-journey] .cs-bridge__fill {
    stroke-dashoffset: 0;
  }
}

/* === JOURNEY ABOUT ===
   Thin route beside Intro, Mission, Values, and Start.
   Wayfinding bar and dots stay; passed stops pick up the route color.
   The route is a sibling of .ap-hero, in the gutter, so the hero clip stays.
   Value descriptions stay readable. No scroll snap. */

.about-page {
  --ap-route-x: max(10px, calc((100% - min(1120px, 92%)) / 2 - 22px));
  position: relative;
}

.about-page [data-about-chapter] {
  position: relative;
}

.about-page .ap-hero__inner,
.about-page .ap-section > .container,
.about-page .ap-cta__inner {
  position: relative;
  z-index: 2;
}

.about-page .ap-journey {
  position: absolute;
  z-index: 1;
  top: 28px;
  bottom: 28px;
  left: var(--ap-route-x);
  width: 2px;
  pointer-events: none;
}

.about-page .ap-journey__track,
.about-page .ap-journey__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}

.about-page .ap-journey__track {
  background: var(--lsa-line, rgba(9, 6, 183, 0.28));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.about-page .ap-journey__fill {
  background: var(--lsa-signal-blue, #0906b7);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--journey-dur, var(--lsa-dur-med, 520ms)) var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
}

.about-page .ap-journey__node {
  position: absolute;
  z-index: 1;
  top: 72px;
  left: calc(var(--ap-route-x) - 5px);
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--lsa-line-strong, rgba(9, 6, 183, 0.55));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
  pointer-events: none;
  transition:
    background-color 280ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
    border-color 280ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
    box-shadow 280ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
    transform 280ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
}

.about-page [data-about-chapter].is-passed .ap-journey__node,
.about-page [data-about-chapter].is-current .ap-journey__node {
  background: var(--lsa-signal-blue, #0906b7);
  border-color: var(--lsa-signal-blue, #0906b7);
}

.about-page [data-about-chapter].is-current .ap-journey__node {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(9, 6, 183, 0.22);
}

.about-page #about-cta .ap-journey__node--arrival {
  border-radius: 2px;
  border-color: #fff;
  background: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.about-page #about-cta.is-current .ap-journey__node--arrival,
.about-page #about-cta.is-passed .ap-journey__node--arrival {
  background: #fff;
  border-color: #fff;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 0 0 6px rgba(9, 6, 183, 0.45);
}

/* Mission continues into Values: the soft band fades in instead of cutting a new page. */
.about-page #about-values.ap-section--soft {
  background-color: var(--bg-soft, #f5f5f7);
  background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 112px);
  background-repeat: no-repeat;
}

.about-page #about-values .ap-head p,
.about-page #about-values .ap-card h3,
.about-page #about-values .ap-card p {
  max-height: none;
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

.about-page .ap-wayfind__link.is-passed .ap-wayfind__dot {
  background: var(--lsa-signal-blue, #0906b7);
}

.about-page .ap-wayfind__link[aria-current="location"] .ap-wayfind__dot {
  height: 18px;
  background: var(--afri-red, #cb0001);
}

@media (min-width: 1280px) {
  .about-page .ap-wayfind__list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 14px;
    bottom: 14px;
    left: 50%;
    width: 1px;
    background: var(--lsa-line, rgba(9, 6, 183, 0.28));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .about-page .ap-wayfind__link {
    z-index: 1;
  }
}

@media (max-width: 420px) {
  .about-page {
    --ap-route-x: 6px;
  }

  .about-page .ap-journey__node {
    top: 56px;
    left: calc(var(--ap-route-x) - 3px);
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .about-page .ap-wayfind__bar-fill {
    transition: transform var(--journey-dur, var(--lsa-dur-med, 520ms)) var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .about-page .ap-wayfind__dot {
    transition:
      height 200ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))),
      background-color 200ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)));
  }

  .about-page [data-about-chapter].is-current .ap-journey__node {
    transform: scale(1.16);
    animation: ap-journey-arrive 420ms var(--journey-ease, var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1))) both;
  }
}

@keyframes ap-journey-arrive {
  from {
    transform: scale(0.84);
  }

  to {
    transform: scale(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .ap-journey__fill,
  .about-page .ap-journey__node,
  .about-page [data-about-chapter].is-current .ap-journey__node,
  .about-page #about-cta.is-current .ap-journey__node--arrival {
    transition: none;
    animation: none;
    transform: none;
  }

  .about-page .ap-journey__fill {
    transform: scaleY(1);
  }
}

/* === AV NAV ===
   Persistent header + current-route clarity. Decorative motion only. */

.site-header.is-nav-ready {
  transition:
    background-color 200ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 200ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 200ms var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.site-header.is-scrolled {
  background: #f7f6f2;
  border-bottom-color: rgba(9, 6, 183, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 26px rgba(11, 11, 43, 0.07);
}

.site-header.is-scrolled .logo img {
  height: 42px;
}

.main-nav > a.is-active,
.main-nav > .works-dropdown > .works-trigger.is-active {
  background: rgba(9, 6, 183, 0.07);
  border-radius: 8px;
  padding-inline: 8px;
}

.main-nav > a.is-active::after,
.main-nav > .works-dropdown > .works-trigger.is-active::after {
  height: 3px;
  background: var(--afri-red, #cb0001);
}

.main-nav > a.is-active:hover,
.main-nav > .works-dropdown > .works-trigger.is-active:hover {
  background: rgba(203, 0, 1, 0.07);
}

.works-menu a.is-active,
.cs-nav-menu a.is-active {
  background: rgba(9, 6, 183, 0.08);
  box-shadow: inset 3px 0 0 var(--afri-red, #cb0001);
}

.mobile-nav a.is-active,
.mobile-nav-split__link.is-active,
.mobile-works-menu a.is-active {
  box-shadow: inset 3px 0 0 var(--afri-red, #cb0001);
  padding-left: 12px;
}

.mobile-works-trigger.is-active {
  color: var(--afri-blue, #0906b7);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--afri-red, #cb0001);
  padding-left: 12px;
}

.menu-btn[aria-expanded="true"] {
  border-color: rgba(9, 6, 183, 0.28);
  color: var(--afri-blue, #0906b7);
  background: #ffffff;
}

.menu-btn:focus-visible,
.main-nav a:focus-visible,
.works-trigger:focus-visible,
.mobile-nav a:focus-visible,
.mobile-works-trigger:focus-visible,
.mobile-nav-split__toggle:focus-visible {
  outline: 2px solid var(--afri-blue, #0906b7);
  outline-offset: 2px;
}

html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.site-header:has(.mobile-nav.is-open) {
  background: #ffffff;
  box-shadow: none;
}

@media (max-width: 860px) {
  .site-header.is-scrolled .logo img {
    height: 34px;
  }

  .site-header:has(.mobile-nav.is-open) {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100svh;
    overflow: hidden;
  }

  .mobile-nav.is-open {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.is-nav-ready {
    transition: none;
  }
}

/* === AV HOME ===
   Service explore and work browse. Titles, descriptions, and links stay in
   the markup. Expansion is a button. Work selection is not a hover lift. */

.hp-services.atlas-service-map .hp-services__expand {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 28px 8px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.hp-services.atlas-service-map .hp-services__expand::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--lsa-dur-fast, 180ms) var(--lsa-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hp-services.atlas-service-map .hp-services__card.is-expanded .hp-services__expand::after {
  transform: translateY(-30%) rotate(225deg);
}

.hp-services.atlas-service-map .hp-services__expand:focus-visible {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 3px;
}

.hp-services.atlas-service-map .hp-services__detail {
  min-width: 0;
}

.hp-services.atlas-service-map .hp-services__card.is-expanded .hp-services__detail {
  margin-top: 2px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(9, 6, 183, 0.05);
}

.hp-services.atlas-service-map .atlas-service-node--systems.is-expanded .hp-services__detail,
.hp-services.atlas-service-map .atlas-service-node--sites.is-expanded .hp-services__detail {
  background: rgba(203, 0, 1, 0.06);
}

.hp-services.atlas-service-map .atlas-service-node--systems.is-expanded .hp-services__expand,
.hp-services.atlas-service-map .atlas-service-node--sites.is-expanded .hp-services__expand {
  color: var(--lsa-signal-red, #cb0001);
}

.hp-services.atlas-service-map .atlas-service-node--commerce.is-expanded .hp-services__expand {
  color: var(--lsa-signal-blue, #0906b7);
}

.hp-services.atlas-service-map .atlas-service-node--systems.is-expanded,
.hp-services.atlas-service-map .atlas-service-node--sites.is-expanded {
  border-color: rgba(203, 0, 1, 0.62);
  box-shadow:
    0 0 0 3px rgba(203, 0, 1, 0.18),
    0 14px 32px rgba(203, 0, 1, 0.1);
  transform: none;
}

.hp-services.atlas-service-map .atlas-service-node--commerce.is-expanded {
  border-color: rgba(9, 6, 183, 0.62);
  box-shadow:
    0 0 0 3px rgba(9, 6, 183, 0.18),
    0 14px 32px rgba(9, 6, 183, 0.12);
  transform: none;
}

.hp-services.atlas-service-map .hp-services__card.is-expanded .hp-services__more {
  color: var(--lsa-signal-red, #cb0001);
}

.atlas-service-map:has(.hp-services__card.is-expanded) .hp-services__card:not(.is-expanded) {
  opacity: 0.78;
}

.atlas-service-map:has(.hp-services__card.is-expanded) .hp-services__card.is-expanded {
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node.is-expanded) .atlas-service-path,
.atlas-service-map:has(.atlas-service-node.is-expanded) .atlas-service-joint {
  opacity: 0.28;
}

.atlas-service-map:has(.atlas-service-node--systems.is-expanded) .atlas-service-path--systems,
.atlas-service-map:has(.atlas-service-node--systems.is-expanded) .atlas-service-path--bus {
  stroke: var(--lsa-signal-red, #cb0001);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(203, 0, 1, 0.45));
}

.atlas-service-map:has(.atlas-service-node--systems.is-expanded) .atlas-service-joint--systems {
  fill: var(--lsa-signal-red, #cb0001);
  stroke: var(--lsa-signal-red, #cb0001);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--systems.is-expanded) .atlas-service-node--systems .atlas-service-port {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

.atlas-service-map:has(.atlas-service-node--commerce.is-expanded) .atlas-service-path--commerce,
.atlas-service-map:has(.atlas-service-node--commerce.is-expanded) .atlas-service-path--bus {
  stroke: var(--lsa-signal-blue, #0906b7);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(9, 6, 183, 0.45));
}

.atlas-service-map:has(.atlas-service-node--commerce.is-expanded) .atlas-service-joint--commerce {
  fill: var(--lsa-signal-blue, #0906b7);
  stroke: var(--lsa-signal-blue, #0906b7);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--commerce.is-expanded) .atlas-service-node--commerce .atlas-service-port {
  background: var(--lsa-signal-blue, #0906b7);
  border-color: var(--lsa-signal-blue, #0906b7);
  box-shadow: 0 0 0 4px rgba(9, 6, 183, 0.16);
}

.atlas-service-map:has(.atlas-service-node--sites.is-expanded) .atlas-service-path--sites,
.atlas-service-map:has(.atlas-service-node--sites.is-expanded) .atlas-service-path--bus {
  stroke: var(--lsa-signal-red, #cb0001);
  stroke-width: 2.25;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(203, 0, 1, 0.45));
}

.atlas-service-map:has(.atlas-service-node--sites.is-expanded) .atlas-service-joint--sites {
  fill: var(--lsa-signal-red, #cb0001);
  stroke: var(--lsa-signal-red, #cb0001);
  opacity: 1;
}

.atlas-service-map:has(.atlas-service-node--sites.is-expanded) .atlas-service-node--sites .atlas-service-port {
  background: var(--lsa-signal-red, #cb0001);
  border-color: var(--lsa-signal-red, #cb0001);
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

.hp-services.atlas-service-map .hp-services__more {
  min-height: 44px;
  width: fit-content;
  padding: 8px 2px;
  text-decoration: none;
  touch-action: manipulation;
}

.hp-services.atlas-service-map .hp-services__more:focus-visible {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 899px) {
  .hp-services.atlas-service-map .atlas-service-node--systems.is-expanded,
  .hp-services.atlas-service-map .atlas-service-node--sites.is-expanded {
    border-color: rgba(203, 0, 1, 0.6);
    box-shadow: inset 4px 0 0 var(--lsa-signal-red, #cb0001);
    transform: none;
  }

  .hp-services.atlas-service-map .atlas-service-node--commerce.is-expanded {
    border-color: rgba(9, 6, 183, 0.6);
    box-shadow: inset 4px 0 0 var(--lsa-signal-blue, #0906b7);
    transform: none;
  }
}

#our-work .hp-work__card.is-selected,
#our-work a.hp-work__card.is-selected:hover,
#our-work .hp-work__card.is-selected:focus-visible {
  transform: none;
}

#our-work .hp-work__card.is-selected {
  border-color: rgba(9, 6, 183, 0.55);
  box-shadow:
    0 0 0 3px rgba(9, 6, 183, 0.16),
    0 14px 32px rgba(2, 6, 23, 0.08);
}

#our-work .hp-work__card--red.is-selected {
  border-color: rgba(203, 0, 1, 0.55);
  box-shadow:
    0 0 0 3px rgba(203, 0, 1, 0.16),
    0 14px 32px rgba(2, 6, 23, 0.08);
}

#our-work .hp-work__card--navy.is-selected {
  border-color: rgba(11, 11, 43, 0.5);
  box-shadow:
    0 0 0 3px rgba(11, 11, 43, 0.14),
    0 14px 32px rgba(2, 6, 23, 0.08);
}

#our-work .hp-work__card--soft.is-selected {
  border-color: rgba(9, 6, 183, 0.4);
}

#our-work .hp-work__card.is-selected::before {
  transform: scaleX(1);
  opacity: 1;
}

#our-work .hp-work__card.is-selected::after {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(9, 6, 183, 0.16);
}

#our-work .hp-work__card--red.is-selected::after {
  box-shadow: 0 0 0 4px rgba(203, 0, 1, 0.16);
}

#our-work .hp-work__card--navy.is-selected::after {
  box-shadow: 0 0 0 4px rgba(11, 11, 43, 0.14);
}

#our-work .hp-work__card.is-selected .hp-work__title {
  color: var(--afri-blue, #0906b7);
}

#our-work .hp-work__card:focus-visible {
  outline: 2px solid var(--lsa-signal-blue, #0906b7);
  outline-offset: 4px;
}

@media (hover: none), (pointer: coarse) {
  #our-work .hp-work__card,
  #our-work a.hp-work__card,
  #our-work .hp-work__card.is-selected,
  #our-work .hp-work__card.is-selected:hover,
  #our-work a.hp-work__card.is-selected:hover,
  #our-work .hp-work__card:hover,
  #our-work a.hp-work__card:hover,
  #our-work .hp-work__card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-services.atlas-service-map .hp-services__expand::after,
  .hp-services.atlas-service-map .hp-services__card,
  .hp-services.atlas-service-map .hp-services__card.is-expanded,
  #our-work .hp-work__card.is-selected,
  #our-work .hp-work__card.is-selected::before,
  #our-work .hp-work__card.is-selected::after {
    transition: none;
    animation: none;
  }

  #our-work .hp-work__card.is-selected,
  #our-work .hp-work__card.is-selected:hover,
  #our-work .hp-work__card.is-selected:focus-visible {
    transform: none;
  }
}

/* === AV CS ===
   Screenshot gallery chrome and compact chapter names.
   Prev/Next, swipe, and “n of n” use the existing shot hrefs and captions.
   No zoom scale. Mobile chapter bars stay thin; the current name sits under them. */

.cs-lightbox__nav[hidden],
.cs-lightbox__count[hidden] {
  display: none !important;
}

.cs-lightbox__close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.cs-lightbox__nav {
  position: absolute;
  z-index: 2;
  top: calc(50% - 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.cs-lightbox__nav--prev {
  left: 0.75rem;
}

.cs-lightbox__nav--next {
  right: 0.75rem;
}

.cs-lightbox__nav:focus,
.cs-lightbox__close:focus {
  outline: none;
}

.cs-lightbox__nav:focus-visible,
.cs-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cs-lightbox.is-gallery {
  padding-left: 4.25rem;
  padding-right: 4.25rem;
  touch-action: pan-y;
}

.cs-lightbox.is-gallery .cs-lightbox__caption,
.cs-lightbox__count {
  text-align: center;
}

.cs-lightbox__count {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cs-lightbox img,
.cs-lightbox.is-open img {
  transform: none;
}

.cs-chapters__current,
.home-journey__current {
  display: none;
  margin: 0;
}

@media (max-width: 979px) {
  .cs-chapters {
    height: auto;
    background: rgba(247, 248, 251, 0.96);
    box-shadow: 0 1px 0 rgba(9, 6, 183, 0.14);
  }

  .cs-chapters__current {
    display: block;
    margin: 0;
    padding: 0.35rem 0.85rem 0.5rem;
    color: #0b0b2b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .cs-detail :is(
    #cs-hero,
    #cs-challenge,
    #cs-platform,
    #cs-features,
    #cs-shots,
    #cs-result,
    #cs-video,
    #cs-built,
    #cs-cta
  ) {
    scroll-margin-top: 8.5rem;
  }
}

@media (max-width: 1279px) {
  .home-journey__current {
    display: block;
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 0.4rem 0.9rem 0.55rem;
    background: rgba(247, 248, 251, 0.96);
    box-shadow: 0 1px 0 rgba(9, 6, 183, 0.14);
    color: #0b0b2b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  #home-hero,
  #hp-impact,
  #why-afripixel,
  #home-cta,
  #our-services,
  #our-work,
  #faq,
  #our-process {
    scroll-margin-top: 7.5rem;
  }
}

@media (max-width: 860px) {
  .home-journey__bar {
    top: 58px;
  }

  .home-journey__current {
    top: 60px;
  }
}

@media (min-width: 1280px) {
  .home-journey__link {
    width: 44px;
    height: 44px;
  }
}

.site-header:has(.mobile-nav.is-open) ~ main .home-journey__current {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cs-lightbox,
  .cs-lightbox img,
  .cs-lightbox.is-open img,
  .cs-lightbox__nav,
  .cs-lightbox__close,
  .cs-chapters__current,
  .home-journey__current,
  .home-journey__link {
    transform: none;
    animation: none;
    transition: none;
  }
}

/* === AV ABOUT ===
   Selected value stays obvious while every description stays readable.
   Wayfinding labels sit below the sticky header. Hit targets are 44px
   where the control is a discrete button or dot. */

.about-page .ap-card[data-about-value] h3,
.about-page .ap-card[data-about-value] p,
.about-page .ap-grid:has(.ap-card[data-active="true"]) .ap-card[data-about-value]:not([data-active="true"]) h3,
.about-page .ap-grid:has(.ap-card[data-active="true"]) .ap-card[data-about-value]:not([data-active="true"]) p {
  max-height: none;
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

.about-page .ap-card[data-about-value][data-active="true"] {
  border-color: var(--afri-blue, #0906b7);
  background-color: #eef1ff;
  box-shadow:
    inset 6px 0 0 var(--afri-red, #cb0001),
    0 0 0 2px rgba(9, 6, 183, 0.45),
    0 18px 40px rgba(9, 6, 183, 0.16);
  transform: none;
}

.about-page .ap-card[data-about-value][data-active="true"] h3 {
  color: var(--afri-blue, #0906b7);
}

.about-page .ap-card[data-about-value][data-active="true"] .ap-card__icon {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--afri-blue, #0906b7);
}

@media (max-width: 1279px) {
  .about-page .ap-wayfind__list {
    display: block;
    position: fixed;
    z-index: 40;
    top: 66px;
    left: 0;
    right: 0;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .about-page .ap-wayfind__list > li {
    display: none;
    margin: 0;
    padding: 0;
  }

  .about-page .ap-wayfind__list > li:has(> .ap-wayfind__link[aria-current="location"]) {
    display: block;
  }

  .about-page .ap-wayfind__link[aria-current="location"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 0;
    background: rgba(247, 248, 251, 0.96);
    box-shadow: 0 1px 0 rgba(9, 6, 183, 0.14);
    color: #0b0b2b;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .about-page .ap-wayfind__link[aria-current="location"] .ap-wayfind__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
  }

  .about-page .ap-wayfind__link[aria-current="location"] .ap-wayfind__label {
    position: static;
    width: auto;
    max-width: calc(100vw - 48px);
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: auto;
    transform: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #0b0b2b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .about-page #about-intro,
  .about-page #about-mission,
  .about-page #about-values,
  .about-page #about-cta {
    scroll-margin-top: 8rem;
  }
}

@media (max-width: 860px) {
  .about-page .ap-wayfind__bar {
    top: 58px;
  }

  .about-page .ap-wayfind__list {
    top: 60px;
  }
}

@media (min-width: 1280px) {
  .about-page .ap-wayfind__list {
    top: calc(64px + (100vh - 64px) / 2);
  }

  .about-page .ap-wayfind__link {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  .about-page .ap-wayfind__link:hover .ap-wayfind__label,
  .about-page .ap-wayfind__link:focus-visible .ap-wayfind__label,
  .about-page .ap-wayfind__link[aria-current="location"] .ap-wayfind__label {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    left: auto;
    width: max-content;
    max-width: 12rem;
    height: auto;
    margin: 0;
    padding: 6px 10px;
    overflow: hidden;
    clip: auto;
    transform: translateY(-50%);
    border: 1px solid rgba(2, 6, 23, 0.08);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.08);
    color: #0b0b2b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }
}

.site-header:has(.mobile-nav.is-open) ~ main .about-page .ap-wayfind__list {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .about-page .ap-card[data-about-value],
  .about-page .ap-card[data-about-value]:hover,
  .about-page .ap-card[data-about-value][data-active="true"],
  .about-page .ap-card[data-about-value][data-active="true"] .ap-card__icon,
  .about-page .ap-wayfind__dot,
  .about-page .ap-wayfind__link {
    transform: none;
    animation: none;
    transition: none;
  }
}

/* === HOME INTRO ===
   Split-door load: navy panels, red seam. Homepage only. */

.ap-intro {
  display: none;
}

html.has-intro {
  overflow: hidden;
}

html.has-intro .ap-intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  pointer-events: none;
}

.ap-intro__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--afri-blue, #0906b7);
}

.ap-intro__panel--left {
  left: 0;
}

.ap-intro__panel--right {
  right: 0;
}

.ap-intro__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--afri-red, #cb0001);
  transform: translateX(-50%);
}

html.has-intro .ap-intro__panel--left {
  animation: ap-intro-left 0.72s cubic-bezier(0.76, 0, 0.24, 1) 0.16s forwards;
}

html.has-intro .ap-intro__panel--right {
  animation: ap-intro-right 0.72s cubic-bezier(0.76, 0, 0.24, 1) 0.22s forwards;
}

html.has-intro .ap-intro__seam {
  animation: ap-intro-seam 0.72s cubic-bezier(0.76, 0, 0.24, 1) 0.16s forwards;
}

@keyframes ap-intro-left {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ap-intro-right {
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes ap-intro-seam {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-intro {
    overflow: auto;
  }

  .ap-intro,
  html.has-intro .ap-intro {
    display: none;
  }
}

/* === HOME SECTION ENTER ===
   Scrubbed seam: red rule draws, heading unmasks, media wipes.
   Not a whole-section fade/rise. Copy is unchanged. */

.home-v2 > [data-home-chapter]:not(#home-hero) {
  position: relative;
}

.home-v2 .hp-seam {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  z-index: 3;
  height: 2px;
  background: var(--afri-red, #cb0001);
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: left center;
}

.home-v2 #hp-impact .hp-seam,
.home-v2 #home-cta .hp-seam {
  background: #fff;
}

.home-v2 > [data-home-chapter]:not(#home-hero) [data-reveal] {
  opacity: 1;
  transform: none;
}

@keyframes hp-seam-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes hp-heading-unmask {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes hp-media-wipe {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes hp-media-wipe-side {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-v2 > [data-home-chapter]:not(#home-hero) .hp-seam {
      animation: hp-seam-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 22%;
    }

    .home-v2 > [data-home-chapter]:not(#home-hero) :is(
      .hp-services__heading,
      .hp-impact__heading,
      .hp-work__heading,
      .hp-process__heading,
      .hp-why__heading,
      .hp-faq__heading,
      .hp-cta__heading
    ) {
      animation: hp-heading-unmask linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 40%;
    }

    .home-v2 #our-services .hp-services__media,
    .home-v2 #our-work .hp-work__card {
      animation: hp-media-wipe linear both;
      animation-timeline: view();
    }

    .home-v2 #our-services .hp-services__card:nth-child(1) .hp-services__media,
    .home-v2 #our-work .hp-work__card:nth-child(1) {
      animation-range: entry 14% entry 52%;
    }

    .home-v2 #our-services .hp-services__card:nth-child(2) .hp-services__media,
    .home-v2 #our-work .hp-work__card:nth-child(2) {
      animation-name: hp-media-wipe-side;
      animation-range: entry 20% entry 58%;
    }

    .home-v2 #our-services .hp-services__card:nth-child(3) .hp-services__media,
    .home-v2 #our-work .hp-work__card:nth-child(3) {
      animation-range: entry 26% entry 64%;
    }

    .home-v2 #our-work .hp-work__card:nth-child(4) {
      animation-name: hp-media-wipe-side;
      animation-range: entry 32% entry 70%;
    }

    .home-v2 #our-process .hp-process__step,
    .home-v2 #why-afripixel .hp-why__item,
    .home-v2 #faq .hp-faq__item {
      animation: hp-media-wipe linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 55%;
    }

    .home-v2 #why-afripixel .hp-why__media {
      animation: hp-media-wipe-side linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 48%;
    }

    .home-v2 #our-process .hp-process__step:nth-child(even),
    .home-v2 #faq .hp-faq__item:nth-child(even) {
      animation-name: hp-media-wipe-side;
    }
  }
}

html.js-enter .home-v2 .hp-seam {
  transform: scaleX(0);
}

html.js-enter .home-v2 > [data-home-chapter]:not(#home-hero) :is(
  .hp-services__heading,
  .hp-impact__heading,
  .hp-work__heading,
  .hp-process__heading,
  .hp-why__heading,
  .hp-faq__heading,
  .hp-cta__heading
) {
  clip-path: inset(100% 0 0 0);
}

html.js-enter .home-v2 #our-services .hp-services__media,
html.js-enter .home-v2 #our-work .hp-work__card,
html.js-enter .home-v2 #our-process .hp-process__step,
html.js-enter .home-v2 #why-afripixel .hp-why__item,
html.js-enter .home-v2 #why-afripixel .hp-why__media,
html.js-enter .home-v2 #faq .hp-faq__item {
  clip-path: inset(0 0 100% 0);
}

html.js-enter .home-v2 > [data-home-chapter].is-in .hp-seam {
  transform: scaleX(1);
}

html.js-enter .home-v2 > [data-home-chapter].is-in :is(
  .hp-services__heading,
  .hp-impact__heading,
  .hp-work__heading,
  .hp-process__heading,
  .hp-why__heading,
  .hp-faq__heading,
  .hp-cta__heading
),
html.js-enter .home-v2 > [data-home-chapter].is-in .hp-services__media,
html.js-enter .home-v2 > [data-home-chapter].is-in .hp-work__card,
html.js-enter .home-v2 > [data-home-chapter].is-in .hp-process__step,
html.js-enter .home-v2 > [data-home-chapter].is-in .hp-why__item,
html.js-enter .home-v2 > [data-home-chapter].is-in .hp-why__media,
html.js-enter .home-v2 > [data-home-chapter].is-in .hp-faq__item {
  clip-path: inset(0);
}

html.js-enter.is-enter-ready .home-v2 .hp-seam {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-enter.is-enter-ready .home-v2 > [data-home-chapter]:not(#home-hero) :is(
  .hp-services__heading,
  .hp-impact__heading,
  .hp-work__heading,
  .hp-process__heading,
  .hp-why__heading,
  .hp-faq__heading,
  .hp-cta__heading
),
html.js-enter.is-enter-ready .home-v2 #our-services .hp-services__media,
html.js-enter.is-enter-ready .home-v2 #our-work .hp-work__card,
html.js-enter.is-enter-ready .home-v2 #our-process .hp-process__step,
html.js-enter.is-enter-ready .home-v2 #why-afripixel .hp-why__item,
html.js-enter.is-enter-ready .home-v2 #why-afripixel .hp-why__media,
html.js-enter.is-enter-ready .home-v2 #faq .hp-faq__item {
  transition: clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .hp-seam,
  .home-v2 > [data-home-chapter]:not(#home-hero) :is(
    .hp-services__heading,
    .hp-impact__heading,
    .hp-work__heading,
    .hp-process__heading,
    .hp-why__heading,
    .hp-faq__heading,
    .hp-cta__heading
  ),
  .home-v2 #our-services .hp-services__media,
  .home-v2 #our-work .hp-work__card,
  .home-v2 #our-process .hp-process__step,
  .home-v2 #why-afripixel .hp-why__item,
  .home-v2 #why-afripixel .hp-why__media,
  .home-v2 #faq .hp-faq__item {
    transform: none;
    clip-path: none;
    animation: none;
    transition: none;
  }
}

/* === HOME HERO DRIFT + SERVICES SHUTTER ===
   Clock-played photo open on Our Services; slow Ken Burns on the hero portrait.
   Replaces the scrubbed media wipe on #our-services only. */

/* Ken Burns disabled for full-bleed hero video — motion comes from slowed playback only. */

@keyframes hp-hero-drift {
  from {
    transform: scale(1.14) translate3d(0, 2.2%, 0);
  }
  to {
    transform: scale(1.03) translate3d(0, -1.8%, 0);
  }
}

html.js-services .home-v2 > #our-services .hp-services__media,
html.js-services .home-v2 > #our-services .hp-services__heading {
  animation: none;
  animation-timeline: auto;
}

html.js-services .home-v2 > #our-services .hp-services__heading {
  clip-path: none;
}

html.js-enter .home-v2 #our-services .hp-services__media,
html.js-enter .home-v2 #our-services .hp-services__heading,
html.js-enter .home-v2 #our-services.is-in .hp-services__media,
html.js-enter .home-v2 #our-services.is-in .hp-services__heading {
  clip-path: none;
  transition: none;
}

.hp-svc-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(203, 0, 1, 0.42) 50%,
    transparent 68%
  );
  transform: translate3d(-130%, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  html.js-services #our-services:not(.is-live) .hp-services__media {
    clip-path: inset(0 0 100% 0);
  }

  html.js-services #our-services:not(.is-live) .hp-services__card:nth-child(2) .hp-services__media {
    clip-path: inset(0 100% 0 0);
  }

  html.js-services #our-services:not(.is-live) .hp-services__media img {
    transform: scale(1.28) translate3d(0, 8%, 0);
  }

  html.js-services #our-services:not(.is-live) .hp-services__heading {
    clip-path: none;
  }

  #our-services .hp-services__media {
    position: relative;
    overflow: hidden;
  }

  #our-services .hp-services__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 40%;
    will-change: transform;
  }

  html.js-services #our-services.is-live .hp-services__heading {
    animation: none;
    clip-path: none;
  }

  html.js-services #our-services.is-live .hp-services__card:nth-child(1) .hp-services__media {
    animation: hp-svc-shutter-up 880ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.js-services #our-services.is-live .hp-services__card:nth-child(2) .hp-services__media {
    animation: hp-svc-shutter-side 880ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
  }

  html.js-services #our-services.is-live .hp-services__card:nth-child(3) .hp-services__media {
    animation: hp-svc-shutter-up 880ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both;
  }

  html.js-services #our-services.is-live .hp-services__media img {
    animation: hp-svc-photo-settle 980ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.js-services #our-services.is-live .hp-services__card:nth-child(2) .hp-services__media img {
    animation-delay: 140ms;
  }

  html.js-services #our-services.is-live .hp-services__card:nth-child(3) .hp-services__media img {
    animation-delay: 280ms;
  }

  html.js-services #our-services.is-live .hp-services__media img.is-settled {
    animation: none;
    transform: scale(1);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js-services #our-services.is-live .hp-services__card:is(:hover, :focus-within) .hp-services__media img.is-settled {
    transform: scale(1.08) translate3d(0, -4%, 0);
  }

  html.js-services #our-services.is-live .hp-services__grid:has(.hp-services__card:is(:hover, :focus-within))
    .hp-services__card:not(:hover):not(:focus-within) .hp-services__media img.is-settled {
    transform: scale(0.96);
    transition-duration: 500ms;
  }

  #our-services .hp-services__card:is(:hover, :focus-within) .hp-svc-sheen {
    animation: hp-svc-sheen 680ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes hp-svc-title {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes hp-svc-shutter-up {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes hp-svc-shutter-side {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes hp-svc-photo-settle {
  from {
    transform: scale(1.28) translate3d(0, 8%, 0);
  }
  to {
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@keyframes hp-svc-sheen {
  to {
    transform: translate3d(130%, 0, 0);
  }
}

@media (max-width: 700px) {
  html.js-services #our-services:not(.is-live) .hp-services__media img {
    transform: scale(1.18) translate3d(0, 6%, 0);
  }

  @keyframes hp-svc-photo-settle {
    from {
      transform: scale(1.18) translate3d(0, 6%, 0);
    }
    to {
      transform: scale(1) translate3d(0, 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-afripixel__video-bg,
  .home-v2 .hero-afripixel__video-bg,
  #our-services .hp-services__media,
  #our-services .hp-services__media img,
  #our-services .hp-services__heading {
    animation: none;
    clip-path: none;
    transform: none;
  }

  .hp-svc-sheen {
    display: none;
  }
}