.about-page {
  --about-line: #d8e4f1;
}
.about-page .section {
  position: relative;
}
.about-page .center-head {
  max-width: 820px;
  margin: 0 auto 58px;
  text-align: center;
}
.about-page .center-head > p:last-child {
  max-width: 680px;
  margin-inline: auto;
}
.about-page h2 {
  color: var(--navy);
}
.about-page .dark h2 {
  color: #fff;
}
.about-hero {
  min-height: 730px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 30%, #f5faff 100%);
}
.about-hero:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -170px;
  border: 1px solid rgba(18, 77, 216, 0.09);
  transform: rotate(45deg);
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 78% 35%,
      rgba(19, 184, 244, 0.12),
      transparent 30%
    ),
    radial-gradient(circle at 60% 75%, rgba(18, 77, 216, 0.07), transparent 28%);
}
.about-gridlines {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(18, 77, 216, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 77, 216, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.about-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 54% 46%;
  align-items: center;
  gap: 30px;
}
.about-hero-copy {
  padding: 50px 0;
}
.about-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 5.1vw, 4.95rem);
}
.about-hero h1 span {
  display: block;
}
.about-hero h1 span + span {
  color: var(--royal);
  margin-top: 7px;
}
.about-lead {
  max-width: 690px;
  color: var(--muted);
  font-size: 1.05rem;
}
.transformation-map {
  position: relative;
  height: 560px;
}
.transformation-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-geometry path {
  fill: none;
  stroke: rgba(18, 77, 216, 0.16);
  stroke-width: 1;
}
.map-geometry path + path {
  stroke: rgba(19, 184, 244, 0.22);
}
.map-routes path {
  fill: none;
  stroke: #acc8e8;
  stroke-width: 2;
}
.map-nodes rect {
  fill: #fff;
  stroke: #2686e4;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-trace {
  fill: none;
  stroke: url(#trace);
  stroke-width: 3;
  stroke-dasharray: 14 640;
  stroke-linecap: round;
}
.map-label,
.map-core,
.map-chip {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cbdced;
  box-shadow: 0 14px 35px rgba(6, 16, 79, 0.08);
}
.map-label {
  padding: 14px 20px;
  min-width: 130px;
}
.map-label small,
.map-core span {
  display: block;
  color: #728099;
  font: 700 0.58rem Manrope;
  letter-spacing: 0.14em;
}
.map-label b,
.map-core b {
  color: var(--navy);
  font-size: 0.85rem;
}
.map-business {
  left: 2%;
  top: 44%;
}
.map-strategy {
  left: 55%;
  top: 16%;
}
.map-growth {
  right: 1%;
  top: 67%;
}
.map-core {
  left: 43%;
  top: 43%;
  width: 155px;
  height: 112px;
  display: grid;
  place-content: center;
  text-align: center;
  clip-path: polygon(0 0, 86% 0, 100% 18%, 100% 100%, 14% 100%, 0 82%);
  border-color: #80afe8;
}
.map-core i {
  width: 32px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
}
.map-chip {
  padding: 7px 10px;
  font: 700 0.52rem Manrope;
  letter-spacing: 0.1em;
  color: #315178;
}
.chip-one {
  left: 57%;
  top: 6%;
}
.chip-two {
  right: 1%;
  top: 43%;
}
.chip-three {
  left: 55%;
  bottom: 8%;
}
.about-split {
  display: grid;
  grid-template-columns: 43% 57%;
  gap: 70px;
  align-items: center;
}
.bog-system {
  height: 360px;
  position: relative;
}
.bog-system svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bog-system svg path {
  fill: none;
  stroke: #c8d9eb;
  stroke-width: 2;
}
.bog-system .bog-active {
  stroke: var(--blue);
  stroke-dasharray: 850;
  stroke-dashoffset: 0;
}
.bog-system article {
  position: absolute;
  width: 205px;
  padding: 25px 24px;
  background: #fff;
  border: 1px solid var(--about-line);
  clip-path: polygon(0 0, 86% 0, 100% 18%, 100% 100%, 0 100%);
}
.bog-system article:nth-of-type(1) {
  left: 0;
  top: 105px;
}
.bog-system article:nth-of-type(2) {
  left: 35%;
  top: 10px;
}
.bog-system article:nth-of-type(3) {
  right: 0;
  top: 105px;
}
.bog-system article small {
  color: #8390a5;
}
.bog-system article > span {
  float: right;
  color: var(--blue);
}
.bog-system h3 {
  margin: 18px 0 6px;
  color: var(--navy);
}
.bog-system p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.ecosystem {
  height: 620px;
  position: relative;
  max-width: 1120px;
  margin: auto;
}
.ecosystem > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.eco-lines path {
  fill: none;
  stroke: #b8cce3;
  stroke-width: 1.5;
  transition: 0.25s;
}
.eco-lines path.is-hot {
  stroke: var(--blue);
  stroke-width: 3;
}
.eco-hub {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  width: 185px;
  height: 150px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, var(--navy), var(--royal));
  clip-path: polygon(16% 0, 100% 0, 100% 76%, 82% 100%, 0 100%, 0 20%);
  box-shadow: 0 25px 55px rgba(6, 16, 79, 0.22);
}
.eco-hub span {
  font: 700 0.6rem Manrope;
  letter-spacing: 0.16em;
  color: #70d6ff;
}
.eco-hub b {
  line-height: 1.25;
  margin-top: 8px;
}
.eco-group {
  position: absolute;
  display: grid;
  gap: 10px;
}
.eco-group > small {
  font: 700 0.58rem Manrope;
  letter-spacing: 0.14em;
  color: #6f7d93;
  margin-bottom: 2px;
}
.group-experience {
  left: 0;
  top: 7%;
}
.group-infra {
  left: 41%;
  top: 0;
}
.group-growth {
  right: 0;
  top: 12%;
}
.group-ai {
  right: 0;
  bottom: 8%;
}
.eco-node {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 12px 15px;
  border: 1px solid #d8e3ef;
  background: #fff;
  color: #263753;
  font: 700 0.75rem Manrope;
  transition: 0.25s;
}
.eco-node i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #eef6ff;
  color: var(--royal);
  font-style: normal;
}
.eco-node:hover,
.eco-node:focus-visible {
  border-color: #75a9e8;
  color: var(--blue);
  background: #fafdff;
}
.eco-node:hover i,
.eco-node:focus-visible i {
  background: #e0f2ff;
  color: var(--blue);
}
.purpose-flow {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  align-items: center;
}
.purpose-flow article {
  padding: 44px;
  border: 1px solid var(--about-line);
  min-height: 290px;
  clip-path: polygon(0 0, 92% 0, 100% 15%, 100% 100%, 0 100%);
}
.purpose-flow article > small {
  font: 700 0.6rem Manrope;
  letter-spacing: 0.15em;
  color: #8290a4;
}
.purpose-flow article .eyebrow {
  margin: 35px 0 10px;
}
.purpose-flow h3 {
  font-size: 1.45rem;
  color: var(--navy);
}
.purpose-flow article p:last-child {
  color: var(--muted);
}
.purpose-path {
  height: 2px;
  background: #cbd9e8;
  position: relative;
}
.purpose-path span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.purpose-path i {
  position: absolute;
  right: -3px;
  top: -5px;
  width: 12px;
  height: 12px;
  background: var(--cyan);
  transform: rotate(45deg);
}
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--about-line);
  border-left: 1px solid var(--about-line);
}
.about-values article {
  position: relative;
  padding: 36px 34px;
  min-height: 230px;
  border-right: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  transition: 0.25s;
}
.about-values article:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--blue);
  transition: 0.25s;
}
.about-values b {
  font-size: 2rem;
  color: #a8b7ca;
  transition: 0.25s;
}
.about-values i {
  position: absolute;
  right: 34px;
  top: 45px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--cyan);
  transform: rotate(45deg);
}
.about-values h3 {
  margin: 28px 0 10px;
  font-size: 1.05rem;
  color: var(--navy);
  transition: 0.25s;
}
.about-values p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}
.about-values article:hover {
  transform: translateY(-3px);
  background: #fbfdff;
}
.about-values article:hover:before {
  height: 100%;
}
.about-values article:hover b,
.about-values article:hover h3 {
  color: var(--blue);
}
.approach-section {
  overflow: hidden;
  background: #06104f;
}
.approach-section:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(83, 173, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 173, 255, 0.18) 1px, transparent 1px);
  background-size: 50px 50px;
}
.approach-section .container {
  position: relative;
}
.approach-head {
  max-width: 840px;
}
.approach-head > p:last-child {
  color: #b7c5df;
}
.approach-architecture {
  height: 320px;
  position: relative;
  margin-top: 55px;
}
.approach-architecture svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 250px;
}
.approach-base,
.approach-live {
  fill: none;
  stroke: rgba(126, 183, 239, 0.3);
  stroke-width: 2;
}
.approach-live {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-dasharray: 18 1400;
}
.approach-architecture ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: absolute;
  inset: 64px 0 auto;
}
.approach-architecture li {
  text-align: center;
  color: #fff;
}
.approach-architecture i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: auto;
  background: #081963;
  border: 1px solid #3a7dce;
  transform: rotate(45deg);
  font: 700 0.65rem Manrope;
  color: var(--cyan);
  font-style: normal;
}
.approach-architecture li b,
.approach-architecture li span {
  display: block;
}
.approach-architecture li b {
  margin-top: 30px;
  font-size: 0.83rem;
}
.approach-architecture li span {
  margin-top: 4px;
  color: #9eafd0;
  font-size: 0.72rem;
}
.approach-principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.approach-principles article {
  padding: 24px;
  border-left: 1px solid #2c4e92;
  background: rgba(255, 255, 255, 0.035);
}
.approach-principles h3 {
  font-size: 0.87rem;
  color: #fff;
}
.approach-principles p {
  font-size: 0.77rem;
  color: #aebcda;
  margin: 0;
}
.capability-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.capability-blocks > article {
  position: relative;
  padding: 40px;
  border: 1px solid var(--about-line);
  overflow: hidden;
  transition: 0.25s;
  min-height: 430px;
}
.capability-blocks > article:after {
  content: "";
  position: absolute;
  right: -45px;
  top: -45px;
  width: 105px;
  height: 105px;
  background: #f0f7ff;
  transform: rotate(45deg);
}
.capability-blocks > article:hover {
  transform: translateY(-2px);
  border-color: #73a5e7;
  background: #fcfeff;
}
.cap-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: #edf5ff;
  color: var(--royal);
  font-size: 1.35rem;
  margin-bottom: 27px;
}
.capability-blocks small {
  font: 700 0.62rem Manrope;
  letter-spacing: 0.13em;
  color: #75839a;
}
.capability-blocks h3 {
  font-size: 1.4rem;
  color: var(--navy);
  margin: 13px 0;
}
.capability-blocks p {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 500px;
}
.capability-blocks article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}
.capability-blocks article > div a {
  padding: 8px 10px;
  background: var(--soft);
  color: #52617a;
  font-size: 0.73rem;
}
.capability-blocks article > div a span {
  transition: 0.2s;
}
.capability-blocks article:hover > div a span {
  display: inline-block;
  transform: translateX(2px);
}
.why-path {
  list-style: none;
  padding: 0;
  margin: 55px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.why-path:before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), #9fbfe7);
}
.why-path li {
  position: relative;
  text-align: center;
  padding: 0 24px;
}
.why-path li:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 23px auto 30px;
  background: #fff;
  border: 3px solid var(--blue);
  transform: rotate(45deg);
  transition: 0.25s;
}
.why-path li:hover:before,
.why-path li:focus-visible:before {
  background: var(--cyan);
  box-shadow: 0 0 0 8px rgba(19, 184, 244, 0.1);
}
.why-path small {
  color: var(--blue);
  font: 700 0.65rem Manrope;
}
.why-path h3 {
  font-size: 1rem;
  color: var(--navy);
  margin: 10px 0 6px;
}
.why-path p {
  color: var(--muted);
  font-size: 0.78rem;
}
.context-grid,
.teaser-grid,
.people-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 75px;
  align-items: center;
}
.context-system {
  height: 540px;
  position: relative;
}
.context-system svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.context-system svg path {
  fill: rgba(237, 246, 255, 0.35);
  stroke: #c2d7eb;
  stroke-width: 2;
}
.context-system svg path + path {
  fill: #fff;
  stroke: #9fc3e8;
}
.context-system .context-live {
  fill: none;
  stroke: var(--blue);
  stroke-dasharray: 18 1200;
}
.context-core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 145px;
  height: 105px;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--navy);
  color: #fff;
  clip-path: polygon(15% 0, 100% 0, 100% 80%, 85% 100%, 0 100%, 0 20%);
}
.context-core small {
  color: var(--cyan);
  font: 700 0.58rem Manrope;
  letter-spacing: 0.15em;
}
.context-system > span {
  position: absolute;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--about-line);
  color: #2b4260;
  font: 700 0.69rem Manrope;
}
.ctx-one {
  left: 33%;
  top: 6%;
}
.ctx-two {
  right: 2%;
  top: 30%;
}
.ctx-three {
  right: 9%;
  bottom: 10%;
}
.ctx-four {
  left: 10%;
  bottom: 10%;
}
.ctx-five {
  left: 1%;
  top: 30%;
}
.teaser-grid.reverse .section-copy {
  order: 2;
}
.abstract-modules,
.stack-visual {
  height: 390px;
  position: relative;
}
.abstract-modules i {
  position: absolute;
  border: 1px solid #a9c8e8;
  background: rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
}
.abstract-modules i:nth-child(1) {
  width: 170px;
  height: 170px;
  left: 12%;
  top: 25%;
}
.abstract-modules i:nth-child(2) {
  width: 120px;
  height: 120px;
  left: 42%;
  top: 5%;
}
.abstract-modules i:nth-child(3) {
  width: 105px;
  height: 105px;
  right: 10%;
  top: 42%;
}
.abstract-modules i:nth-child(4) {
  width: 60px;
  height: 60px;
  left: 46%;
  bottom: 4%;
  background: var(--blue);
}
.abstract-modules:before,
.abstract-modules:after {
  content: "";
  position: absolute;
  height: 1px;
  background: #9dbfe3;
  transform-origin: left;
}
.abstract-modules:before {
  width: 66%;
  left: 20%;
  top: 49%;
  transform: rotate(-8deg);
}
.abstract-modules:after {
  width: 51%;
  left: 35%;
  top: 48%;
  transform: rotate(24deg);
}
.abstract-modules span {
  position: absolute;
  left: 42%;
  top: 42%;
  padding: 13px 19px;
  background: #fff;
  color: var(--navy);
  font: 700 0.7rem Manrope;
  box-shadow: var(--shadow);
}
.stack-visual div {
  position: absolute;
  width: 70%;
  height: 100px;
  left: 15%;
  border: 1px solid #a9c7e7;
  background: #fff;
  transform: skewX(-18deg);
  box-shadow: 0 15px 35px rgba(6, 16, 79, 0.06);
}
.stack-visual div:nth-child(1) {
  top: 15px;
}
.stack-visual div:nth-child(2) {
  top: 125px;
  left: 20%;
  border-color: #77aae5;
}
.stack-visual div:nth-child(3) {
  top: 235px;
  left: 25%;
  background: #f1f7ff;
}
.stack-visual small {
  display: block;
  padding: 38px;
  transform: skewX(18deg);
  font: 700 0.65rem Manrope;
  letter-spacing: 0.15em;
  color: var(--royal);
}
.collaboration-visual {
  height: 470px;
  position: relative;
  background: radial-gradient(circle, rgba(18, 77, 216, 0.07), transparent 60%);
}
.collab-core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 125px;
  height: 125px;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--navy);
  color: #fff;
  font: 700 0.68rem Manrope;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.collaboration-visual i {
  position: absolute;
  padding: 11px 15px;
  border: 1px solid #bad0e7;
  background: #fff;
  color: #37516e;
  font: 700 0.6rem Manrope;
  font-style: normal;
}
.collaboration-visual i:after {
  content: "";
  position: absolute;
  width: 75px;
  height: 1px;
  background: #b4cce4;
  top: 50%;
}
.collaboration-visual i:nth-of-type(1) {
  left: 7%;
  top: 18%;
}
.collaboration-visual i:nth-of-type(2) {
  right: 10%;
  top: 17%;
}
.collaboration-visual i:nth-of-type(3) {
  right: 0;
  top: 48%;
}
.collaboration-visual i:nth-of-type(4) {
  right: 9%;
  bottom: 14%;
}
.collaboration-visual i:nth-of-type(5) {
  left: 8%;
  bottom: 14%;
}
.collaboration-visual i:nth-of-type(6) {
  left: 0;
  top: 48%;
}
.collaboration-visual i:nth-of-type(-n + 3):after {
  right: 100%;
  transform: rotate(18deg);
}
.collaboration-visual i:nth-of-type(n + 4):after {
  left: 100%;
  transform: rotate(-18deg);
}
.about-final {
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, #06104f, #081d62);
}
.about-final .final-inner {
  position: relative;
  max-width: 880px;
}
.about-final .final-inner p:not(.eyebrow) {
  color: #b9c6df;
}
.about-final .button-row {
  justify-content: center;
}
.final-geometry {
  position: absolute;
  width: 650px;
  height: 650px;
  right: -140px;
  top: -330px;
  border: 1px solid rgba(82, 180, 255, 0.25);
  transform: rotate(45deg);
}
.final-geometry:before,
.final-geometry:after {
  content: "";
  position: absolute;
  inset: 70px;
  border: 1px solid rgba(82, 180, 255, 0.12);
}
.final-geometry:after {
  inset: 150px;
  border-color: rgba(19, 184, 244, 0.18);
}
/* Essential content is visible by default. Motion preparation only begins after JS adds .about-motion-ready. */
.about-motion-ready [data-about-animate]:not(.is-animated) .section-copy,
.about-motion-ready [data-about-animate]:not(.is-animated) .center-head,
.about-motion-ready [data-about-animate]:not(.is-animated) .section-head,
.about-motion-ready [data-about-animate]:not(.is-animated) .approach-head,
.about-motion-ready [data-about-animate]:not(.is-animated) .final-inner {
  opacity: 0;
  transform: translateY(18px);
}
.about-motion-ready
  [data-about-animate]
  :is(
    .section-copy,
    .center-head,
    .section-head,
    .approach-head,
    .final-inner
  ) {
  transition:
    opacity 0.65s,
    transform 0.65s;
}
.about-motion-ready
  [data-about-animate].is-animated
  :is(
    .section-copy,
    .center-head,
    .section-head,
    .approach-head,
    .final-inner
  ) {
  opacity: 1;
  transform: none;
}
.about-motion-ready .about-hero:not(.is-animated) .about-hero-copy > * {
  opacity: 0;
  transform: translateY(18px);
}
.about-motion-ready .about-hero .about-hero-copy > * {
  transition:
    opacity 0.6s,
    transform 0.6s;
}
.about-motion-ready .about-hero.is-animated .about-hero-copy > * {
  opacity: 1;
  transform: none;
}
.about-motion-ready .about-hero.is-animated .about-hero-copy > *:nth-child(2) {
  transition-delay: 0.12s;
}
.about-motion-ready .about-hero.is-animated .about-hero-copy > *:nth-child(3) {
  transition-delay: 0.28s;
}
.about-motion-ready .about-hero.is-animated .about-hero-copy > *:nth-child(4) {
  transition-delay: 0.4s;
}
.about-motion-ready .about-hero:not(.is-animated) .transformation-map {
  opacity: 0;
  transform: translateX(18px);
}
.about-motion-ready .about-hero .transformation-map {
  transition:
    opacity 0.8s 0.55s,
    transform 0.8s 0.55s;
}
.about-motion-ready .about-hero.is-animated .transformation-map {
  opacity: 1;
  transform: none;
}
.about-motion-ready .is-animated .hero-trace,
.about-motion-ready .is-animated .approach-live,
.about-motion-ready .is-animated .context-live {
  animation: aboutTrace 3.5s ease 1 both;
}
.about-motion-ready .is-animated .map-nodes rect {
  animation: nodePulse 0.45s ease both;
}
.about-motion-ready .is-animated .map-nodes rect:nth-child(2) {
  animation-delay: 0.15s;
}
.about-motion-ready .is-animated .map-nodes rect:nth-child(3) {
  animation-delay: 0.3s;
}
.about-motion-ready .is-animated .map-nodes rect:nth-child(4) {
  animation-delay: 0.45s;
}
.about-motion-ready .is-animated .map-nodes rect:nth-child(5) {
  animation-delay: 0.6s;
}
@keyframes aboutTrace {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: -800;
  }
}
@keyframes nodePulse {
  from {
    opacity: 0.2;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 1100px) {
  .about-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-hero {
    min-height: 670px;
  }
  .about-hero h1 {
    font-size: clamp(2.7rem, 5vw, 4rem);
  }
  .transformation-map {
    height: 480px;
  }
  .about-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .bog-system {
    max-width: 760px;
    margin: auto;
    width: 100%;
  }
  .ecosystem {
    transform: scale(0.9);
    transform-origin: center;
  }
  .context-grid,
  .teaser-grid,
  .people-grid {
    gap: 40px;
  }
  .desktop-nav {
    gap: 15px;
  }
}
@media (max-width: 800px) {
  .about-page .section {
    padding: 82px 0;
  }
  .about-hero {
    padding-top: 40px;
  }
  .about-hero-grid {
    grid-template-columns: 1fr;
  }
  .about-hero-copy {
    padding-bottom: 0;
  }
  .transformation-map {
    height: 470px;
    max-width: 620px;
    width: 100%;
    margin: auto;
  }
  .about-values {
    grid-template-columns: 1fr 1fr;
  }
  .purpose-flow {
    grid-template-columns: 1fr;
  }
  .purpose-path {
    height: 90px;
    width: 2px;
    margin: auto;
  }
  .purpose-path span {
    background: linear-gradient(var(--royal), var(--cyan));
  }
  .purpose-path i {
    right: -5px;
    top: auto;
    bottom: -3px;
  }
  .ecosystem {
    height: auto;
    transform: none;
    display: grid;
    gap: 18px;
  }
  .ecosystem > svg {
    display: none;
  }
  .eco-hub {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    margin: 0 auto 10px;
  }
  .eco-group {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    max-width: 500px;
    width: 100%;
    margin: auto;
  }
  .eco-node {
    width: 100%;
  }
  .approach-architecture {
    height: auto;
  }
  .approach-architecture svg {
    display: none;
  }
  .approach-architecture ol {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    margin: 40px 0;
  }
  .approach-architecture li {
    position: relative;
    text-align: left;
    padding: 0 0 34px 85px;
  }
  .approach-architecture li:before {
    content: "";
    position: absolute;
    left: 27px;
    top: 50px;
    bottom: -4px;
    width: 1px;
    background: #2f6bb8;
  }
  .approach-architecture li:last-child:before {
    display: none;
  }
  .approach-architecture i {
    position: absolute;
    left: 5px;
    top: 0;
  }
  .approach-architecture li b {
    margin: 0;
  }
  .approach-principles {
    grid-template-columns: 1fr 1fr;
  }
  .capability-blocks {
    grid-template-columns: 1fr;
  }
  .why-path {
    grid-template-columns: 1fr;
    margin-left: 30px;
  }
  .why-path:before {
    left: 8px;
    right: auto;
    top: 30px;
    bottom: 30px;
    width: 2px;
    height: auto;
  }
  .why-path li {
    text-align: left;
    padding: 0 0 35px 70px;
  }
  .why-path li:before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 10px 0;
  }
  .context-grid,
  .teaser-grid,
  .people-grid {
    grid-template-columns: 1fr;
  }
  .teaser-grid.reverse .section-copy {
    order: 0;
  }
  .context-system,
  .collaboration-visual {
    max-width: 620px;
    width: 100%;
    margin: auto;
  }
}
@media (max-width: 560px) {
  .about-page .container {
    width: min(var(--container), calc(100% - 32px));
  }
  .about-page .section {
    padding: 68px 0;
  }
  .about-hero {
    padding-top: 25px;
  }
  .about-hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.2rem);
  }
  .about-hero .button-row {
    display: grid;
  }
  .about-hero .btn {
    width: 100%;
  }
  .transformation-map {
    height: 390px;
  }
  .map-chip {
    display: none;
  }
  .map-core {
    left: 40%;
    width: 130px;
  }
  .map-label {
    padding: 10px 12px;
    min-width: 100px;
  }
  .map-label small {
    font-size: 0.48rem;
  }
  .map-label b {
    font-size: 0.7rem;
  }
  .map-strategy {
    left: 54%;
  }
  .bog-system {
    height: auto;
    display: grid;
    gap: 14px;
  }
  .bog-system svg {
    display: none;
  }
  .bog-system article {
    position: relative !important;
    inset: auto !important;
    width: 100%;
  }
  .about-values {
    grid-template-columns: 1fr;
  }
  .about-values article {
    min-height: 200px;
  }
  .purpose-flow article {
    padding: 30px;
    min-height: 0;
  }
  .approach-principles {
    grid-template-columns: 1fr;
  }
  .capability-blocks > article {
    padding: 30px 24px;
    min-height: 0;
  }
  .context-system {
    height: 410px;
  }
  .context-system > span {
    font-size: 0.57rem;
    padding: 7px 9px;
  }
  .ctx-one {
    left: 25%;
  }
  .context-core {
    width: 115px;
    height: 85px;
  }
  .abstract-modules,
  .stack-visual {
    height: 310px;
  }
  .collaboration-visual {
    height: 400px;
  }
  .collaboration-visual i {
    font-size: 0.5rem;
    padding: 8px;
  }
  .collaboration-visual i:after {
    width: 35px;
  }
  .collab-core {
    width: 105px;
    height: 105px;
  }
  .about-final .button-row {
    display: grid;
  }
  .about-final .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-page * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .about-motion-ready [data-about-animate] *,
  .about-motion-ready [data-about-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-trace,
  .approach-live,
  .context-live {
    display: none;
  }
}

/* About hero responsive architecture. Desktop (1200px+) intentionally unchanged. */
.mobile-map-routes {
  display: none;
}
.mobile-system {
  display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .about-hero {
    min-height: 0;
    padding: 48px 0 64px;
    align-items: start;
  }
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .about-hero-copy {
    max-width: 790px;
    padding: 0;
  }
  .about-hero h1 {
    font-size: clamp(3.2rem, 6.25vw, 4rem);
  }
  .transformation-map {
    width: min(100%, 620px);
    height: 440px;
    margin-inline: auto;
    transform: none;
  }
  .about-motion-ready .about-hero.is-animated .transformation-map {
    transform: none;
  }
}

/* Final responsive geometry layer for the three approved mobile/tablet rebuilds. */
@media (max-width: 1199px) {
  .about-page .approach-section .approach-architecture {
    width: min(100%, 760px);
    height: auto;
    margin: 44px auto 32px;
  }
  .about-page .approach-section .approach-architecture > svg { display: none; }
  .about-page .approach-section .approach-architecture ol {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 0;
  }
  .about-page .approach-section .approach-architecture ol:before {
    content: "";
    position: absolute;
    left: 29px;
    top: 20px;
    bottom: 20px;
    width: 1.5px;
    background: linear-gradient(#2a64a8, #4a78aa);
  }
  .about-page .approach-section .approach-architecture li {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    min-height: 58px;
    padding: 0;
    text-align: left;
  }
  .about-page .approach-section .approach-architecture li:before { display: none; }
  .about-page .approach-section .approach-architecture li i {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
    margin: 0 0 0 10px;
    font-size: 0.64rem;
  }
  .about-page .approach-section .approach-architecture li b {
    grid-column: 2;
    margin: 0 0 3px;
    font-size: 1.05rem;
  }
  .about-page .approach-section .approach-architecture li span {
    grid-column: 2;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .about-page .approach-section .approach-principles {
    width: min(100%, 760px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .about-page .approach-section .approach-principles article {
    min-height: 0;
    padding: 20px;
  }

  .about-page .why-section .why-path {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 0;
  }
  .about-page .why-section .why-path:before {
    left: 27px;
    right: auto;
    top: 25px;
    bottom: 25px;
    width: 1.5px;
    height: auto;
  }
  .about-page .why-section .why-path li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    min-height: 76px;
    padding: 0;
    text-align: left;
  }
  .about-page .why-section .why-path li:before {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: 16px;
    height: 16px;
    margin: 0 0 0 19px;
    border-width: 2px;
  }
  .about-page .why-section .why-path :is(small, h3, p) { grid-column: 2; }
  .about-page .why-section .why-path h3 { margin: 3px 0; font-size: 1.05rem; }
  .about-page .why-section .why-path p { margin: 0; font-size: 0.88rem; }

  .about-page .business-context-section .teaser-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .about-page .business-context-section .direction-system {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "growth growth" "hub hub" "customer models" "workflows processes";
    gap: 12px;
    width: min(100%, 620px);
    height: auto;
    padding: 0;
    margin-inline: auto;
  }
  .about-page .business-context-section .direction-system > svg { display: none; }
  .about-page .business-context-section .direction-system:after {
    left: 50%;
    top: 52px;
    bottom: 54px;
    width: 1.5px;
    translate: -50% 0;
  }
  .about-page .business-context-section .direction-hub {
    grid-area: hub;
    width: 150px;
    height: 108px;
    margin: 4px auto 16px;
  }
  .about-page .business-context-section .direction-factor {
    width: 100%;
    min-height: 54px;
    padding: 10px 13px;
  }
  .about-page .business-context-section .direction-factor:before { display: none; }
  .about-page .business-context-section .factor-growth { grid-area: growth; justify-self: center; width: min(220px, 70%); }
  .about-page .business-context-section .factor-customer { grid-area: customer; }
  .about-page .business-context-section .factor-models { grid-area: models; }
  .about-page .business-context-section .factor-workflows { grid-area: workflows; }
  .about-page .business-context-section .factor-processes { grid-area: processes; }
}

@media (max-width: 767px) {
  .about-page .approach-section .approach-architecture { margin-top: 36px; }
  .about-page .approach-section .approach-architecture ol { gap: 28px; }
  .about-page .approach-section .approach-principles { grid-template-columns: 1fr; gap: 12px; }
  .about-page .why-section .why-path { gap: 22px; }
}

@media (max-width: 370px) {
  .about-page .business-context-section .direction-system {
    grid-template-columns: 1fr;
    grid-template-areas: "growth" "hub" "customer" "models" "workflows" "processes";
    gap: 10px;
    width: calc(100% - 8px);
  }
}

/* Responsive rebuilds: Our Approach, Why Nxtzen, and Right Digital Direction. */
@media (max-width: 1199px) {
  .approach-section,
  .why-section,
  .business-context-section {
    height: auto;
    min-height: 0;
    scroll-margin-top: 104px;
  }

  /* A — stable vertical approach timeline. */
  .approach-section .approach-architecture {
    width: min(100%, 760px);
    height: auto;
    margin: 44px auto 32px;
  }
  .approach-section .approach-architecture > svg {
    display: none;
  }
  .approach-section .approach-architecture ol {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 0;
  }
  .approach-section .approach-architecture ol:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 29px;
    top: 20px;
    bottom: 20px;
    width: 1.5px;
    background: linear-gradient(#2a64a8, #4a78aa);
  }
  .approach-section .approach-architecture li {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    min-height: 58px;
    padding: 0;
    text-align: left;
  }
  .approach-section .approach-architecture li:before {
    display: none;
  }
  .approach-section .approach-architecture li i {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
    margin: 0 0 0 10px;
    font-size: 0.64rem;
    background: #081963;
    border-width: 1px;
  }
  .approach-section .approach-architecture li b {
    grid-column: 2;
    margin: 0 0 3px;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.3;
  }
  .approach-section .approach-architecture li span {
    grid-column: 2;
    margin: 0;
    color: #aebddd;
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .approach-section .approach-architecture li.is-current i {
    border-color: var(--cyan);
    background: var(--blue);
    color: #fff;
  }
  .approach-section .approach-architecture li.is-current b {
    color: var(--cyan);
  }
  .approach-section .approach-principles {
    width: min(100%, 760px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .approach-section .approach-principles article {
    min-height: 0;
    padding: 20px;
  }

  /* B — compact, content-driven Why Nxtzen timeline. */
  .why-section .center-head {
    max-width: 760px;
    margin-bottom: 36px;
    text-align: left;
  }
  .why-section .why-path {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 0;
  }
  .why-section .why-path:before {
    left: 27px;
    right: auto;
    top: 25px;
    bottom: 25px;
    width: 1.5px;
    height: auto;
    background: linear-gradient(var(--royal), #a7c3df);
  }
  .why-section .why-path li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    min-height: 76px;
    padding: 0;
    text-align: left;
  }
  .why-section .why-path li:before {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: 16px;
    height: 16px;
    margin: 0 0 0 19px;
    border-width: 2px;
    box-shadow: none;
  }
  .why-section .why-path small,
  .why-section .why-path h3,
  .why-section .why-path p {
    grid-column: 2;
  }
  .why-section .why-path small {
    font-size: 0.7rem;
  }
  .why-section .why-path h3 {
    margin: 3px 0;
    font-size: 1.05rem;
  }
  .why-section .why-path p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .why-section .why-path li.is-current:before {
    background: var(--cyan);
    border-color: var(--blue);
  }
  .why-section .why-path li.is-current h3 {
    color: var(--royal);
  }

  /* C — hub-first direction grid; desktop radial routes are not reused. */
  .business-context-section .teaser-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .business-context-section .business-context-copy {
    max-width: 760px;
  }
  .business-context-section .direction-system {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "growth growth"
      "hub hub"
      "customer models"
      "workflows processes";
    gap: 12px;
    width: min(100%, 620px);
    height: auto;
    padding: 0;
    margin-inline: auto;
    overflow: visible;
  }
  .business-context-section .direction-system > svg {
    display: none;
  }
  .business-context-section .direction-system:before {
    inset: 70px 15% 0;
    opacity: 0.22;
  }
  .business-context-section .direction-system:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 52px;
    bottom: 54px;
    width: 1.5px;
    background: linear-gradient(#94b9dc, var(--blue), #b4cce3);
    translate: -50% 0;
  }
  .business-context-section .direction-atmosphere {
    width: 300px;
    height: 250px;
    opacity: 0.7;
  }
  .business-context-section .direction-hub {
    grid-area: hub;
    z-index: 3;
    width: 150px;
    height: 108px;
    margin: 4px auto 16px;
  }
  .business-context-section .direction-factor {
    z-index: 3;
    width: 100%;
    min-height: 54px;
    padding: 10px 13px;
  }
  .business-context-section .direction-factor:before {
    display: none;
  }
  .business-context-section .factor-growth {
    grid-area: growth;
    justify-self: center;
    width: min(220px, 70%);
  }
  .business-context-section .factor-customer { grid-area: customer; }
  .business-context-section .factor-models { grid-area: models; }
  .business-context-section .factor-workflows { grid-area: workflows; }
  .business-context-section .factor-processes { grid-area: processes; }
}

@media (max-width: 767px) {
  .about-page :is(.approach-section, .why-section, .business-context-section).section {
    padding-block: 68px;
  }
  .approach-section,
  .why-section,
  .business-context-section {
    scroll-margin-top: 88px;
  }
  :is(.approach-section, .why-section, .business-context-section) h2 {
    font-size: clamp(1.8rem, 8.7vw, 2.35rem);
    line-height: 1.08;
  }
  :is(.approach-section, .why-section, .business-context-section) :is(.approach-head > p:last-child, .business-context-copy > p:last-of-type) {
    font-size: 0.96rem;
  }
  .approach-section .approach-architecture {
    margin-top: 36px;
  }
  .approach-section .approach-architecture ol {
    gap: 28px;
  }
  .approach-section .approach-principles {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .approach-section .approach-principles article {
    padding: 19px;
  }
  .why-section .center-head {
    margin-bottom: 32px;
  }
  .why-section .why-path {
    gap: 22px;
  }
  .business-context-section .teaser-grid {
    gap: 34px;
  }
  .business-context-section .direction-system {
    gap: 11px;
  }
  .business-context-section .direction-factor > span {
    font-size: 0.67rem;
  }
}

@media (max-width: 370px) {
  .business-context-section .direction-system {
    grid-template-columns: 1fr;
    grid-template-areas:
      "growth"
      "hub"
      "customer"
      "models"
      "workflows"
      "processes";
    gap: 10px;
    width: calc(100% - 8px);
  }
  .business-context-section .direction-system:after {
    top: 52px;
    bottom: 28px;
  }
  .business-context-section .direction-factor {
    min-height: 50px;
  }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  :is(.approach-section, .why-section, .business-context-section) * {
    animation: none !important;
    transition: none !important;
  }
  :is(.approach-section, .why-section, .business-context-section) :is(.approach-architecture li, .why-path li, .direction-factor, .direction-hub) {
    opacity: 1 !important;
  }
}

@media (max-width: 767px) {
  .about-page .about-hero.section {
    min-height: 0;
    padding: 38px 0 56px;
    align-items: start;
    background: linear-gradient(180deg, #fff 48%, #f8fbff 100%);
  }
  .about-hero:before {
    display: none;
  }
  .about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .about-hero-copy {
    padding: 0;
  }
  .about-hero-copy .eyebrow {
    margin-bottom: 15px;
  }
  .about-hero h1 {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: clamp(2.25rem, 10.25vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
  }
  .about-hero h1 .hero-heading-blue {
    margin-top: 8px;
    font-size: 0.94em;
    line-height: 1.02;
  }
  .about-lead {
    max-width: 95%;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
  }
  .about-hero .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin: 26px 0 0;
  }
  .about-hero .btn {
    width: 100%;
  }
  .transformation-map {
    width: min(calc(100% - 16px), 390px);
    height: 320px;
    margin-inline: auto;
    isolation: isolate;
    transform: none;
  }
  .transformation-map > svg {
    display: none;
  }
  .transformation-map > :is(.map-label, .map-core, .map-chip) {
    display: none;
  }
  .mobile-system {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(78px, 1fr) 8px 108px 8px minmax(100px, 1fr);
    grid-template-rows: 28px 12px 50px 14px 84px 14px 50px 12px 28px;
    grid-template-areas:
      ". . experience . ."
      ". . line-experience . ."
      ". . strategy . ."
      ". . line-strategy . ."
      "business line-business system line-infrastructure infrastructure"
      ". . line-growth . ."
      ". . growth . ."
      ". . line-intelligence . ."
      ". . intelligence . .";
    align-items: stretch;
    padding: 14px 12px;
  }
  .mobile-system__module {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #b8cfe7;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 20px rgba(6, 16, 79, 0.06);
    color: #264667;
    font: 700 0.625rem Manrope, sans-serif;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .mobile-system__module small {
    display: block;
    color: #65758c;
    font: 700 0.56rem Manrope, sans-serif;
    letter-spacing: 0.12em;
  }
  .mobile-system__module b {
    display: block;
    color: #071b58;
    font-size: 0.75rem;
    line-height: 1.25;
  }
  .mobile-system__experience { grid-area: experience; }
  .mobile-system__strategy {
    grid-area: strategy;
    flex-direction: column;
    width: 100%;
  }
  .mobile-system__business {
    grid-area: business;
    flex-direction: column;
    justify-self: start;
    width: min(96px, 100%);
  }
  .mobile-system__core {
    grid-area: system;
    flex-direction: column;
    border: 1.5px solid #5599df;
    background: linear-gradient(145deg, #fff, #f4f9ff);
    clip-path: polygon(0 0, 86% 0, 100% 18%, 100% 100%, 14% 100%, 0 82%);
  }
  .mobile-system__core em {
    width: 30px;
    height: 2px;
    margin-top: 7px;
    background: linear-gradient(90deg, var(--royal), var(--cyan));
  }
  .mobile-system__infrastructure {
    grid-area: infrastructure;
    justify-self: end;
    width: min(108px, 100%);
    padding-inline: 5px;
    font-size: 0.58rem;
    letter-spacing: 0.055em;
  }
  .mobile-system__growth {
    grid-area: growth;
    flex-direction: column;
    width: 96px;
    justify-self: center;
  }
  .mobile-system__intelligence {
    grid-area: intelligence;
    width: 98px;
    justify-self: center;
  }
  .mobile-system__connector {
    position: relative;
    z-index: 1;
    display: block;
    align-self: stretch;
    justify-self: stretch;
  }
  .mobile-system__connector:before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: #9ebcdb;
  }
  .mobile-system__connector:after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 7px;
    border: 1.5px solid #2087ea;
    background: #fff;
    transform: rotate(45deg);
  }
  .mobile-system__line-experience { grid-area: line-experience; }
  .mobile-system__line-strategy { grid-area: line-strategy; }
  .mobile-system__line-business { grid-area: line-business; }
  .mobile-system__line-infrastructure { grid-area: line-infrastructure; }
  .mobile-system__line-growth { grid-area: line-growth; }
  .mobile-system__line-intelligence { grid-area: line-intelligence; }
  .mobile-system__line-experience:before,
  .mobile-system__line-strategy:before,
  .mobile-system__line-growth:before,
  .mobile-system__line-intelligence:before {
    width: 1.5px;
    height: 100%;
  }
  .mobile-system__line-business:before,
  .mobile-system__line-infrastructure:before {
    width: 100%;
    height: 1.5px;
  }
  .mobile-system__line-experience:after,
  .mobile-system__line-strategy:after,
  .mobile-system__line-growth:after,
  .mobile-system__line-intelligence:after {
    left: 50%;
    bottom: -4px;
    translate: -50% 0;
  }
  .mobile-system__line-business:after {
    right: -4px;
    top: 50%;
    translate: 0 -50%;
  }
  .mobile-system__line-infrastructure:after {
    right: -4px;
    top: 50%;
    translate: 0 -50%;
  }
  .mobile-system__flow {
    position: absolute;
    z-index: 2;
    left: calc((100% - 124px) / 4);
    top: 50%;
    width: calc(50% - ((100% - 124px) / 4));
    height: 96px;
    border-top: 2px solid var(--cyan);
    border-right: 2px solid var(--cyan);
    opacity: 0;
    pointer-events: none;
  }
  .mobile-map-geometry path {
    fill: none;
    stroke: rgba(18, 77, 216, 0.055);
    stroke-width: 1;
  }
  .mobile-map-primary path,
  .mobile-map-secondary path {
    fill: none;
    stroke: #a8c2df;
    stroke-width: 1.5;
  }
  .mobile-map-secondary path {
    stroke: rgba(86, 130, 177, 0.42);
    stroke-dasharray: 3 4;
  }
  .mobile-map-nodes rect {
    fill: #fff;
    stroke: #2087ea;
    stroke-width: 1.7;
  }
  .mobile-data-flow {
    fill: none;
    stroke: url(#trace);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 8 245;
    opacity: 0;
  }
  .map-label,
  .map-core,
  .map-chip {
    min-width: 0;
    padding: 8px 12px;
    box-shadow: 0 8px 20px rgba(6, 16, 79, 0.065);
  }
  .map-label small,
  .map-core span {
    font-size: 0.56rem;
  }
  .map-label b,
  .map-core b {
    font-size: 0.75rem;
  }
  .map-core {
    left: 50%;
    top: 52%;
    width: 114px;
    height: 88px;
    padding: 0;
    translate: -50% -50%;
  }
  .map-business {
    left: 0;
    top: 45%;
  }
  .map-strategy {
    left: 50%;
    top: 23%;
    translate: -50% 0;
  }
  .map-growth {
    right: 8%;
    top: 74%;
  }
  .map-chip {
    display: block;
    padding: 6px 8px;
    font-size: 0.625rem;
  }
  .chip-one {
    left: 50%;
    top: 4%;
    translate: -50% 0;
  }
  .chip-two {
    right: 0;
    top: 46%;
  }
  .chip-three {
    left: 50%;
    bottom: 3%;
    translate: -50% 0;
  }
  .about-hero .about-gridlines {
    inset: auto 0 26px;
    height: 330px;
    opacity: 0.16;
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, #000 0, transparent 72%);
  }
  .about-hero .hero-atmosphere {
    background: radial-gradient(circle at 50% 76%, rgba(19, 184, 244, 0.075), transparent 31%);
    transform: none;
  }
  .about-hero-ready .about-hero:not(.hero-online) .mobile-system__module {
    opacity: 0;
    transform: translateY(5px);
  }
  .about-hero-ready .about-hero .mobile-system__module {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .about-hero-ready .about-hero.hero-online .mobile-system__module {
    opacity: 1;
    transform: none;
  }
  .about-hero-ready .about-hero .mobile-system__core { transition-delay: 0.86s; }
  .about-hero-ready .about-hero .mobile-system__strategy { transition-delay: 0.96s; }
  .about-hero-ready .about-hero .mobile-system__business { transition-delay: 1.06s; }
  .about-hero-ready .about-hero .mobile-system__infrastructure { transition-delay: 1.16s; }
  .about-hero-ready .about-hero .mobile-system__growth { transition-delay: 1.26s; }
  .about-hero-ready .about-hero .mobile-system__experience { transition-delay: 1.36s; }
  .about-hero-ready .about-hero .mobile-system__intelligence { transition-delay: 1.46s; }
  .about-hero.hero-online .mobile-system__connector:before {
    animation: mobileConnectorDraw 0.45s ease 1.62s 1 both;
    transform-origin: left center;
  }
  .about-hero.hero-online :is(.mobile-system__line-experience, .mobile-system__line-strategy, .mobile-system__line-growth, .mobile-system__line-intelligence):before {
    animation-name: mobileConnectorDrawVertical;
    transform-origin: center top;
  }
  .about-hero.hero-online .mobile-system__flow {
    animation: mobileDataJourney 1.2s ease 2.05s 1 both;
  }
}

@media (max-width: 380px) {
  .about-page .about-hero.section {
    padding-top: 34px;
  }
  .about-hero h1 {
    font-size: clamp(2.25rem, 10.5vw, 2.5rem);
  }
  .transformation-map {
    width: 100%;
    height: 320px;
  }
}

@keyframes mobileDataJourney {
  0% { opacity: 0; clip-path: inset(0 100% 100% 0); }
  15%, 75% { opacity: 1; }
  55% { clip-path: inset(0 0 100% 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes mobileConnectorDraw {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
@keyframes mobileConnectorDrawVertical {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-data-flow {
    display: none !important;
  }
}
@media (min-width: 801px) {
  .about-hero-grid {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  }
  .about-split {
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  }
  .context-grid,
  .teaser-grid,
  .people-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .about-split {
    grid-template-columns: 1fr;
  }
}
.about-page main {
  overflow: hidden;
}

/* About hero refinement — static presentation remains the default/fail-safe. */
.about-hero-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-hero-copy .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.about-hero-copy .eyebrow > span {
  display: block;
}
.hero-heading-mask {
  display: block;
  overflow: hidden;
}
.hero-heading-mask > i {
  display: block;
  font: inherit;
  font-style: normal;
  color: inherit;
}
.about-hero h1 .hero-heading-blue {
  font-size: 0.94em;
  line-height: 0.98;
  margin-top: 10px;
  color: var(--royal);
}
.about-hero .hero-atmosphere {
  background:
    radial-gradient(
      circle at 78% 32%,
      rgba(19, 184, 244, 0.14),
      transparent 31%
    ),
    radial-gradient(
      circle at 61% 76%,
      rgba(18, 77, 216, 0.085),
      transparent 29%
    );
  transform: scale(1.04);
}
.about-hero .about-gridlines {
  opacity: 0.48;
  mask-image: linear-gradient(
    90deg,
    transparent 34%,
    rgba(0, 0, 0, 0.95) 70%,
    transparent 100%
  );
}
.about-hero:after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: 4%;
  top: -285px;
  border: 1px solid rgba(8, 126, 245, 0.07);
  transform: rotate(45deg);
}
.transformation-map {
  transform: scale(1.055);
  transform-origin: center;
}
.map-geometry path {
  stroke: rgba(18, 77, 216, 0.075);
}
.map-geometry path + path {
  stroke: rgba(19, 184, 244, 0.09);
}
.map-routes path {
  stroke: rgba(73, 139, 207, 0.34);
  stroke-width: 2;
}
.map-nodes rect {
  fill: #f9fdff;
  stroke: #2087ea;
  stroke-width: 2.2;
}
.map-label,
.map-core,
.map-chip {
  border-color: #b8cfe7;
}
.map-label {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(6, 16, 79, 0.065);
}
.map-label small {
  color: #65758c;
}
.map-label b {
  color: #071b58;
}
.map-chip {
  padding: 8px 11px;
  color: #264667;
  border-color: #bcd2e8;
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.55rem;
}
.map-core {
  border: 1.5px solid #5599df;
  background: linear-gradient(145deg, #fff, #f4f9ff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 16px 34px rgba(6, 16, 79, 0.1);
}
.map-core span {
  color: #5b6e87;
}
.map-core b {
  color: #06104f;
  font-weight: 800;
}
.map-core i {
  height: 3px;
  width: 38px;
}
.map-label,
.map-chip,
.map-core {
  transition:
    border-color 0.25s,
    color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.map-label:hover,
.map-label.is-pulsing,
.map-chip:hover,
.map-chip.is-pulsing {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.map-label:hover b,
.map-label.is-pulsing b {
  color: var(--blue);
}
.map-core:hover {
  border-color: var(--cyan);
  background: #fff;
}
.transformation-map.route-business .map-routes path:nth-child(1),
.transformation-map.route-growth .map-routes path:nth-child(1),
.transformation-map.route-strategy .map-routes path:nth-child(2),
.transformation-map.route-experience .map-routes path:nth-child(2),
.transformation-map.route-infrastructure .map-routes path:nth-child(1),
.transformation-map.route-intelligence .map-routes path:nth-child(3),
.transformation-map.core-hover .map-routes path {
  stroke: var(--blue);
  stroke-width: 2.5;
}

/* JS applies .about-hero-ready only after initialization succeeds. */
.about-hero-ready .about-hero:not(.hero-can-animate) * {
  transition: none !important;
}
.about-hero-ready .about-hero:not(.hero-online) .about-hero-copy .eyebrow > i {
  transform: scaleX(0);
}
.about-hero-ready
  .about-hero:not(.hero-online)
  .about-hero-copy
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.25em;
}
.about-hero-ready .about-hero:not(.hero-online) .hero-heading-mask > i {
  transform: translateY(105%);
}
.about-hero-ready .about-hero:not(.hero-online) .about-lead {
  opacity: 0;
  transform: translateY(14px);
}
.about-hero-ready .about-hero:not(.hero-online) .button-row .btn {
  opacity: 0;
  transform: translateY(8px);
}
.about-hero-ready .about-hero:not(.hero-online) .map-core {
  opacity: 0;
  transform: scale(0.97);
}
.about-hero-ready .about-hero:not(.hero-online) :is(.map-label, .map-chip) {
  opacity: 0;
  transform: translateY(10px);
}
.about-hero-ready .about-hero:not(.hero-online) .map-routes path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}
.about-hero-ready .about-hero:not(.hero-online) .map-nodes rect {
  opacity: 0.12;
  transform: scale(0.55);
}
.about-hero-ready .about-hero .about-hero-copy .eyebrow > i {
  transition: transform 0.38s ease 0.1s;
}
.about-hero-ready .about-hero .about-hero-copy .eyebrow > span {
  transition:
    opacity 0.35s ease 0.2s,
    letter-spacing 0.4s ease 0.2s;
}
.about-hero-ready .about-hero .hero-heading-mask > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-hero-ready .about-hero .hero-heading-mask:first-child > i {
  transition-delay: 0.3s;
}
.about-hero-ready .about-hero .hero-heading-mask:nth-child(2) > i {
  transition-delay: 0.42s;
}
.about-hero-ready .about-hero .about-lead {
  transition:
    opacity 0.58s ease 0.6s,
    transform 0.58s ease 0.6s;
}
.about-hero-ready .about-hero .button-row .btn {
  transition:
    opacity 0.45s ease,
    transform 0.25s ease,
    border-color 0.25s,
    background 0.25s,
    color 0.25s;
}
.about-hero-ready .about-hero .button-row .btn:first-child {
  transition-delay: 0.72s, 0.72s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .button-row .btn:nth-child(2) {
  transition-delay: 0.82s, 0.82s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .map-core {
  transition:
    opacity 0.58s ease 0.86s,
    transform 0.58s ease 0.86s,
    border-color 0.25s,
    background 0.25s;
}
.about-hero-ready .about-hero .map-routes path {
  transition:
    stroke-dashoffset 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    stroke 0.25s;
  transition-delay: 1s;
}
.about-hero-ready .about-hero .map-routes path:nth-child(2) {
  transition-delay: 1.08s;
}
.about-hero-ready .about-hero .map-routes path:nth-child(3) {
  transition-delay: 1.16s;
}
.about-hero-ready .about-hero :is(.map-label, .map-chip) {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    border-color 0.25s,
    color 0.25s,
    background 0.25s;
}
.about-hero-ready .about-hero .map-business {
  transition-delay: 1.05s, 1.05s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .map-strategy {
  transition-delay: 1.15s, 1.15s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .chip-one {
  transition-delay: 1.25s, 1.25s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .chip-two {
  transition-delay: 1.35s, 1.35s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .chip-three {
  transition-delay: 1.45s, 1.45s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .map-growth {
  transition-delay: 1.55s, 1.55s, 0s, 0s, 0s;
}
.about-hero-ready .about-hero .map-nodes rect {
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}
.about-hero-ready .about-hero .map-nodes rect:nth-child(1) {
  transition-delay: 1.05s;
}
.about-hero-ready .about-hero .map-nodes rect:nth-child(2) {
  transition-delay: 1.15s;
}
.about-hero-ready .about-hero .map-nodes rect:nth-child(6) {
  transition-delay: 1.25s;
}
.about-hero-ready .about-hero .map-nodes rect:nth-child(4) {
  transition-delay: 1.35s;
}
.about-hero-ready .about-hero .map-nodes rect:nth-child(7) {
  transition-delay: 1.45s;
}
.about-hero-ready .about-hero .map-nodes rect:nth-child(5) {
  transition-delay: 1.55s;
}
.about-hero-ready .about-hero.hero-online .about-hero-copy .eyebrow > i {
  transform: scaleX(1);
}
.about-hero-ready .about-hero.hero-online .about-hero-copy .eyebrow > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-hero-ready .about-hero.hero-online .hero-heading-mask > i,
.about-hero-ready .about-hero.hero-online .about-lead,
.about-hero-ready .about-hero.hero-online .button-row .btn {
  opacity: 1;
  transform: none;
}
.about-hero-ready .about-hero.hero-online .map-core {
  opacity: 1;
  transform: scale(1);
}
.about-hero-ready .about-hero.hero-online :is(.map-label, .map-chip) {
  opacity: 1;
  transform: none;
}
.about-hero-ready .about-hero.hero-online .map-routes path {
  stroke-dashoffset: 0;
}
.about-hero-ready .about-hero.hero-online .map-nodes rect {
  opacity: 1;
  transform: scale(1);
}
.about-hero.hero-online .hero-trace {
  animation: heroDataJourney 2.15s ease 1.78s 1 both;
}
.about-hero.hero-online .hero-atmosphere {
  animation: heroAtmosphere 25s ease-in-out infinite alternate;
}
.about-hero.hero-online:before {
  animation: heroGeometryIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.about-motion-ready .about-hero.is-animated .transformation-map {
  transform: scale(1.055);
}
.about-hero .btn-primary:hover {
  background: #0845c3;
  transform: translateY(-1px);
}
.about-hero .btn-secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #f4f9ff;
  transform: none;
}
@keyframes heroDataJourney {
  0% {
    stroke-dashoffset: 650;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -90;
    opacity: 0;
  }
}
@keyframes heroAtmosphere {
  from {
    transform: scale(1.04) translate(-1%, -1%);
  }
  to {
    transform: scale(1.04) translate(3%, 2%);
  }
}
@keyframes heroGeometryIn {
  from {
    opacity: 0;
    translate: 45px -30px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 800px) {
  .transformation-map,
  .about-motion-ready .about-hero.is-animated .transformation-map {
    transform: none;
  }
  .about-hero h1 .hero-heading-blue {
    font-size: 0.94em;
  }
  .about-hero.hero-online .hero-atmosphere {
    animation: none;
  }
  .about-hero.hero-online .hero-trace {
    animation: none;
  }
  .about-hero:after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-ready .about-hero * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  .about-hero .hero-trace {
    display: none !important;
  }
}

/* WHO WE ARE / BUILD → OPERATE → GROW — visible by default, prepared only after JS init. */
.who-section {
  overflow: hidden;
}
.who-section .container {
  position: relative;
  z-index: 1;
}
.who-atmosphere {
  position: absolute;
  width: 720px;
  height: 520px;
  right: -110px;
  top: 50%;
  translate: 0 -50%;
  background: radial-gradient(
    circle,
    rgba(19, 184, 244, 0.075),
    rgba(18, 77, 216, 0.025) 42%,
    transparent 70%
  );
  pointer-events: none;
}
.who-section:after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: 4%;
  top: -245px;
  border: 1px solid rgba(18, 77, 216, 0.055);
  transform: rotate(45deg);
  pointer-events: none;
}
.who-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.who-eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.who-eyebrow > span {
  display: block;
}
.who-heading > span {
  display: block;
  overflow: hidden;
}
.who-heading > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.bog-grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(18, 77, 216, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 77, 216, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}
.bog-system .bog-geometry {
  fill: none;
  stroke: rgba(18, 77, 216, 0.07);
  stroke-width: 1;
}
.bog-system .bog-base {
  stroke: #bfd2e6;
  stroke-width: 1.35;
}
.bog-system .bog-segment {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: 430;
  stroke-dashoffset: 0;
}
.bog-system .bog-traveller {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-dasharray: 7 690;
  opacity: 0;
}
.bog-system article {
  z-index: 2;
  border-color: #d5e2ef;
  box-shadow: 0 12px 30px rgba(6, 16, 79, 0.045);
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.bog-system article small {
  color: var(--blue);
  font-weight: 700;
}
.bog-system article > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #74ade7;
  color: var(--blue);
  font-size: 0.6rem;
  transition:
    border-color 0.22s,
    color 0.22s,
    background 0.22s;
}
.bog-system article h3 {
  transition: color 0.25s;
}
.bog-system article:hover,
.bog-system article:focus-visible,
.bog-system article.is-pulsing {
  border-color: #6ea5df;
  background: #fbfdff;
  transform: translateY(-2px);
}
.bog-system article:hover h3,
.bog-system article:focus-visible h3,
.bog-system article.is-pulsing h3 {
  color: var(--blue);
}
.bog-system article:hover > span,
.bog-system article:focus-visible > span,
.bog-system article.is-pulsing > span {
  border-color: var(--blue);
  background: #eaf7ff;
  color: var(--cyan);
}
.bog-system.hover-build .bog-segment-one,
.bog-system.hover-operate .bog-segment-one,
.bog-system.hover-grow .bog-segment {
  stroke: var(--blue);
  stroke-width: 2.1;
}
.about-motion-ready .who-section:not(.is-animated) .who-eyebrow > i {
  transform: scaleX(0);
}
.about-motion-ready .who-section:not(.is-animated) .who-eyebrow > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready .who-section:not(.is-animated) .who-heading > span > i {
  transform: translateY(105%);
}
.about-motion-ready .who-section:not(.is-animated) .who-copy {
  opacity: 0;
  transform: translateY(14px);
}
.about-motion-ready .who-section:not(.is-animated) .bog-grid,
.about-motion-ready .who-section:not(.is-animated) .bog-geometry {
  opacity: 0;
}
.about-motion-ready .who-section:not(.is-animated) .bog-system article {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
}
.about-motion-ready .who-section:not(.is-animated) .bog-segment {
  stroke-dashoffset: 430;
}
.about-motion-ready .who-section .who-eyebrow > i {
  transition: transform 0.38s ease;
}
.about-motion-ready .who-section .who-eyebrow > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready .who-section .who-heading > span > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready .who-section .who-heading > span:nth-child(2) > i {
  transition-delay: 0.31s;
}
.about-motion-ready .who-section .who-copy {
  transition:
    opacity 0.58s ease 0.46s,
    transform 0.58s ease 0.46s;
}
.about-motion-ready .who-section .bog-grid,
.about-motion-ready .who-section .bog-geometry {
  transition: opacity 0.45s ease 0.62s;
}
.about-motion-ready .who-section .bog-system article {
  transition:
    opacity 0.52s ease,
    transform 0.52s ease,
    border-color 0.25s,
    background 0.25s;
}
.about-motion-ready .who-section [data-bog-stage="build"] {
  transition-delay: 0.72s, 0.72s, 0s, 0s;
}
.about-motion-ready .who-section .bog-segment-one {
  transition:
    stroke-dashoffset 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.98s,
    stroke 0.25s;
}
.about-motion-ready .who-section [data-bog-stage="operate"] {
  transition-delay: 1.38s, 1.38s, 0s, 0s;
}
.about-motion-ready .who-section .bog-segment-two {
  transition:
    stroke-dashoffset 0.58s cubic-bezier(0.22, 1, 0.36, 1) 1.62s,
    stroke 0.25s;
}
.about-motion-ready .who-section [data-bog-stage="grow"] {
  transition-delay: 2.02s, 2.02s, 0s, 0s;
}
.about-motion-ready
  .who-section.is-animated
  :is(.who-eyebrow > i, .who-heading > span > i) {
  transform: none;
}
.about-motion-ready
  .who-section.is-animated
  :is(
    .who-eyebrow > span,
    .who-copy,
    .bog-grid,
    .bog-geometry,
    .bog-system article
  ) {
  opacity: 1;
  transform: none;
}
.about-motion-ready .who-section.is-animated .who-eyebrow > span {
  letter-spacing: 0.18em;
}
.about-motion-ready .who-section.is-animated .bog-segment {
  stroke-dashoffset: 0;
}
.about-motion-ready .who-section.is-animated .bog-traveller {
  animation: bogJourney 2.1s ease 2.45s 1 both;
}
.about-motion-ready .who-section.is-animated .who-atmosphere {
  animation: whoAtmosphere 24s ease-in-out infinite alternate;
}
.about-motion-ready .who-section.is-animated:after {
  animation: whoGeometry 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
@keyframes bogJourney {
  0% {
    stroke-dashoffset: 690;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -20;
    opacity: 0;
  }
}
@keyframes whoAtmosphere {
  from {
    transform: translate(-1%, -1%);
  }
  to {
    transform: translate(3%, 2%);
  }
}
@keyframes whoGeometry {
  from {
    opacity: 0;
    translate: 30px -20px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 800px) {
  .who-section .about-split {
    gap: 34px;
  }
  .bog-system {
    height: auto;
    display: grid;
    gap: 18px;
    padding-left: 42px;
  }
  .bog-system svg {
    display: block;
    left: 4px;
    width: 38px;
    height: 100%;
    overflow: visible;
  }
  .bog-grid,
  .bog-geometry,
  .bog-base {
    display: none;
  }
  .bog-system .bog-segment {
    stroke-width: 2;
  }
  .bog-system .bog-segment-one {
    d: path("M17 20V160");
  }
  .bog-system .bog-segment-two {
    d: path("M17 160V300");
  }
  .bog-system .bog-traveller {
    d: path("M17 20V300");
  }
  .bog-system article {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    min-height: 130px;
  }
  .who-section.is-animated .who-atmosphere {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .who-section * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  .bog-system .bog-segment {
    stroke-dashoffset: 0 !important;
  }
  .bog-system .bog-traveller {
    display: none !important;
  }
  .who-atmosphere {
    animation: none !important;
  }
}

/* Connected Digital Ecosystem — four category architecture. */
.ecosystem-section {
  scroll-margin-top: 112px;
  overflow: hidden;
}
.ecosystem-section .eco-heading {
  margin-bottom: 36px;
}
.eco-heading .eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.eco-heading .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.eco-heading h2 > span {
  display: block;
  overflow: hidden;
}
.eco-heading h2 > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.ecosystem {
  position: relative;
  display: grid;
  grid-template-columns: 310px 1fr 310px;
  grid-template-rows: 150px 220px 150px;
  grid-template-areas: ". infrastructure ." "experience hub growth" ". intelligence .";
  align-items: center;
  gap: 12px 78px;
  width: min(1100px, 100%);
  height: 570px;
  margin: auto;
  transform: none;
}
.eco-atmosphere {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 480px;
  height: 390px;
  background: radial-gradient(
    circle,
    rgba(18, 77, 216, 0.09),
    rgba(19, 184, 244, 0.035) 38%,
    transparent 70%
  );
  pointer-events: none;
}
.ecosystem:before {
  content: "";
  position: absolute;
  inset: 5% 14%;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(18, 77, 216, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 77, 216, 0.028) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle, #000, transparent 73%);
}
.eco-connectors {
  position: absolute !important;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}
.eco-lines path {
  fill: none;
  stroke: #b4cae1;
  stroke-width: 1.5;
  stroke-linecap: square;
  transition:
    stroke 0.25s,
    stroke-width 0.25s;
}
.eco-lines path.is-hot {
  stroke: var(--blue);
  stroke-width: 2;
}
.eco-anchors rect {
  fill: #f7fbff;
  stroke: #5d9ee0;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.25s,
    stroke 0.25s;
}
.eco-data path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-dasharray: 7 360;
  opacity: 0;
}
.eco-hub {
  grid-area: hub;
  position: relative;
  z-index: 3;
  left: auto;
  top: auto;
  translate: none;
  justify-self: center;
  width: 190px;
  height: 140px;
  background: linear-gradient(145deg, #06104f, #124dd8);
  box-shadow: 0 18px 40px rgba(6, 16, 79, 0.16);
  transition:
    border-color 0.25s,
    filter 0.25s,
    transform 0.25s;
}
.eco-hub i {
  display: block;
  width: 36px;
  height: 2px;
  margin: 11px auto 0;
  background: linear-gradient(90deg, #62d3ff, #fff);
}
.eco-hub:hover,
.eco-hub:focus-visible {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.eco-category {
  position: relative !important;
  z-index: 3;
  inset: auto !important;
  display: block;
  width: 310px;
  margin: 0 !important;
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #cbdced;
  clip-path: polygon(0 0, 94% 0, 100% 14%, 100% 100%, 0 100%);
  transition:
    opacity 0.5s,
    transform 0.5s,
    border-color 0.25s,
    background 0.25s;
}
.eco-category.group-experience {
  grid-area: experience;
}
.eco-category.group-infra {
  grid-area: infrastructure;
}
.eco-category.group-growth {
  grid-area: growth;
}
.eco-category.group-ai {
  grid-area: intelligence;
}
.eco-category header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.eco-category header > i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  background: #edf6ff;
  color: var(--royal);
  font-style: normal;
  transition:
    color 0.25s,
    background 0.25s;
}
.eco-category header small {
  font: 700 0.61rem Manrope;
  letter-spacing: 0.14em;
  color: #526782;
  transition: color 0.25s;
}
.eco-services {
  display: grid;
  gap: 7px;
}
.eco-node {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8e3ef;
  background: #fff;
  color: #263753;
  font: 700 0.74rem Manrope;
  transition:
    background 0.22s,
    border-color 0.22s,
    color 0.22s,
    transform 0.22s;
}
.eco-node > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  background: #eef6ff;
  color: var(--royal);
  font-style: normal;
  transition:
    color 0.22s,
    background 0.22s;
}
.eco-node > b {
  margin-left: auto;
  color: #8ca4bf;
  font-size: 0.72rem;
  transition:
    transform 0.22s,
    color 0.22s;
}
.eco-node:hover,
.eco-node:focus-visible {
  border-color: #88b4e5;
  color: var(--blue);
  background: #f5faff;
  transform: translateY(-1px);
}
.eco-node:hover > i,
.eco-node:focus-visible > i {
  color: var(--blue);
  background: #e3f3ff;
}
.eco-node:hover > b,
.eco-node:focus-visible > b {
  color: var(--blue);
  transform: translateX(3px);
}
.eco-category:hover,
.eco-category:focus-within {
  border-color: #78a9df;
  background: rgba(255, 255, 255, 0.9);
}
.eco-category:hover header small,
.eco-category:focus-within header small {
  color: var(--blue);
}
.eco-category:hover header > i,
.eco-category:focus-within header > i {
  color: var(--blue);
  background: #e4f3ff;
}
.ecosystem.eco-hover-all .eco-lines path,
.ecosystem.eco-hover-experience [data-eco-route="experience"],
.ecosystem.eco-hover-infrastructure [data-eco-route="infrastructure"],
.ecosystem.eco-hover-growth [data-eco-route="growth"],
.ecosystem.eco-hover-intelligence [data-eco-route="intelligence"] {
  stroke: var(--blue);
  stroke-width: 2;
}
.ecosystem.eco-hover-experience .eco-anchors rect:nth-child(1),
.ecosystem.eco-hover-infrastructure .eco-anchors rect:nth-child(2),
.ecosystem.eco-hover-growth .eco-anchors rect:nth-child(3),
.ecosystem.eco-hover-intelligence .eco-anchors rect:nth-child(4),
.ecosystem.eco-hover-all .eco-anchors rect {
  fill: var(--cyan);
  stroke: var(--blue);
}
.about-motion-ready
  .ecosystem-section:not(.is-animated)
  .eco-heading
  .eyebrow
  > i {
  transform: scaleX(0);
}
.about-motion-ready
  .ecosystem-section:not(.is-animated)
  .eco-heading
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready
  .ecosystem-section:not(.is-animated)
  .eco-heading
  h2
  > span
  > i {
  transform: translateY(105%);
}
.about-motion-ready
  .ecosystem-section:not(.is-animated)
  .eco-heading
  > p:last-child {
  opacity: 0;
  transform: translateY(12px);
}
.about-motion-ready .ecosystem-section:not(.is-animated) .eco-hub {
  opacity: 0;
  transform: scale(0.96);
}
.about-motion-ready .ecosystem-section:not(.is-animated) .eco-lines path {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}
.about-motion-ready .ecosystem-section:not(.is-animated) .eco-anchors rect {
  opacity: 0;
  transform: scale(0.5);
}
.about-motion-ready .ecosystem-section:not(.is-animated) .eco-category {
  opacity: 0;
  transform: translateY(12px);
}
.about-motion-ready .ecosystem-section:not(.is-animated) .eco-node {
  opacity: 0;
  transform: translateY(8px);
}
.about-motion-ready .ecosystem-section .eco-heading .eyebrow > i {
  transition: transform 0.38s ease;
}
.about-motion-ready .ecosystem-section .eco-heading .eyebrow > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready .ecosystem-section .eco-heading h2 > span > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready .ecosystem-section .eco-heading h2 > span:nth-child(2) > i {
  transition-delay: 0.31s;
}
.about-motion-ready .ecosystem-section .eco-heading > p:last-child {
  transition:
    opacity 0.55s ease 0.46s,
    transform 0.55s ease 0.46s;
}
.about-motion-ready .ecosystem-section .eco-hub {
  transition:
    opacity 0.58s ease 0.65s,
    transform 0.58s ease 0.65s,
    filter 0.25s;
}
.about-motion-ready .ecosystem-section .eco-lines path {
  transition:
    stroke-dashoffset 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    stroke 0.25s;
}
.about-motion-ready .ecosystem-section .eco-lines path:nth-child(1) {
  transition-delay: 0.86s, 0s;
}
.about-motion-ready .ecosystem-section .eco-lines path:nth-child(2) {
  transition-delay: 0.96s, 0s;
}
.about-motion-ready .ecosystem-section .eco-lines path:nth-child(3) {
  transition-delay: 1.06s, 0s;
}
.about-motion-ready .ecosystem-section .eco-lines path:nth-child(4) {
  transition-delay: 1.16s, 0s;
}
.about-motion-ready .ecosystem-section .eco-anchors rect {
  transition:
    opacity 0.3s,
    transform 0.3s,
    fill 0.25s,
    stroke 0.25s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category[data-eco-category="experience"] {
  transition-delay: 1.18s, 1.18s, 0s, 0s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category[data-eco-category="infrastructure"] {
  transition-delay: 1.3s, 1.3s, 0s, 0s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category[data-eco-category="growth"] {
  transition-delay: 1.42s, 1.42s, 0s, 0s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category[data-eco-category="intelligence"] {
  transition-delay: 1.54s, 1.54s, 0s, 0s;
}
.about-motion-ready .ecosystem-section .eco-node {
  transition:
    opacity 0.38s ease,
    transform 0.38s ease,
    background 0.22s,
    border-color 0.22s,
    color 0.22s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category:nth-of-type(1)
  .eco-node:nth-child(1) {
  transition-delay: 1.34s, 1.34s, 0s, 0s, 0s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category:nth-of-type(1)
  .eco-node:nth-child(2) {
  transition-delay: 1.42s, 1.42s, 0s, 0s, 0s;
}
.about-motion-ready
  .ecosystem-section
  .eco-category:nth-of-type(1)
  .eco-node:nth-child(3) {
  transition-delay: 1.5s, 1.5s, 0s, 0s, 0s;
}
.about-motion-ready .ecosystem-section.is-animated .eco-heading .eyebrow > i,
.about-motion-ready .ecosystem-section.is-animated .eco-heading h2 > span > i {
  transform: none;
}
.about-motion-ready
  .ecosystem-section.is-animated
  .eco-heading
  .eyebrow
  > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-motion-ready .ecosystem-section.is-animated .eco-heading > p:last-child,
.about-motion-ready
  .ecosystem-section.is-animated
  :is(.eco-hub, .eco-category, .eco-node, .eco-anchors rect) {
  opacity: 1;
  transform: none;
}
.about-motion-ready .ecosystem-section.is-animated .eco-lines path {
  stroke-dashoffset: 0;
}
.about-motion-ready
  .ecosystem-section.is-animated
  [data-eco-flow="experience"] {
  animation: ecoData 1.15s ease 2.25s 1 both;
}
.about-motion-ready
  .ecosystem-section.is-animated
  [data-eco-flow="infrastructure"] {
  animation: ecoData 1.15s ease 3.35s 1 both;
}
.about-motion-ready .ecosystem-section.is-animated [data-eco-flow="growth"] {
  animation: ecoData 1.15s ease 4.45s 1 both;
}
.about-motion-ready
  .ecosystem-section.is-animated
  [data-eco-flow="intelligence"] {
  animation: ecoData 1.15s ease 5.55s 1 both;
}
@keyframes ecoData {
  0% {
    stroke-dashoffset: 350;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -10;
    opacity: 0;
  }
}
@media (max-width: 1024px) {
  .ecosystem {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "hub hub" "experience infrastructure" "growth intelligence";
    gap: 20px;
    max-width: 760px;
    padding-top: 20px;
  }
  .eco-connectors {
    display: none;
  }
  .eco-hub {
    margin: 0 auto 18px;
  }
  .eco-category {
    width: 100%;
    align-self: start;
  }
  .group-experience,
  .group-infra,
  .group-growth,
  .group-ai {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  .ecosystem:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 142px;
    bottom: 20px;
    width: 1px;
    background: #c2d7eb;
    z-index: 1;
  }
}
@media (max-width: 600px) {
  .ecosystem-section {
    scroll-margin-top: 96px;
  }
  .ecosystem-section .eco-heading {
    text-align: left;
    margin-bottom: 30px;
  }
  .eco-heading .eyebrow {
    justify-content: flex-start;
  }
  .eco-heading h2 > span {
    display: inline;
    overflow: visible;
  }
  .eco-heading h2 > span > i {
    display: inline;
  }
  .ecosystem {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "hub" "experience" "infrastructure" "growth" "intelligence";
    gap: 18px;
    padding: 8px 0 0 26px;
  }
  .eco-hub {
    width: 170px;
    height: 126px;
    margin: 0 auto 16px;
  }
  .eco-category {
    width: 100%;
    padding: 15px;
  }
  .ecosystem:after {
    left: 9px;
    top: 120px;
    bottom: 45px;
    background: linear-gradient(var(--blue), #a8c7e7);
  }
  .eco-category:before {
    content: "";
    position: absolute;
    left: -22px;
    top: 30px;
    width: 9px;
    height: 9px;
    background: #fff;
    border: 2px solid var(--blue);
    transform: rotate(45deg);
  }
  .eco-node {
    height: 46px;
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .ecosystem-section * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  .eco-lines path {
    stroke-dashoffset: 0 !important;
  }
  .eco-data {
    display: none !important;
  }
}
.about-motion-ready.about-sections-preparing
  [data-about-animate]:not(.about-hero)
  * {
  transition: none !important;
}

/* Purpose & Direction — Mission → Vision composition. */
.purpose-section {
  position: relative;
  overflow: hidden;
  padding-block: 96px;
  scroll-margin-top: 112px;
}
.purpose-section .container {
  position: relative;
  z-index: 1;
}
.purpose-atmosphere {
  position: absolute;
  left: 50%;
  top: 62%;
  translate: -50% -50%;
  width: 900px;
  height: 430px;
  background: radial-gradient(
    ellipse,
    rgba(18, 77, 216, 0.065),
    rgba(19, 184, 244, 0.02) 45%,
    transparent 72%
  );
  pointer-events: none;
}
.purpose-geometry {
  position: absolute;
  right: 8%;
  top: -270px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(18, 77, 216, 0.05);
  transform: rotate(45deg);
  pointer-events: none;
}
.purpose-geometry:before {
  content: "";
  position: absolute;
  inset: 78px;
  border: 1px solid rgba(19, 184, 244, 0.04);
}
.purpose-heading {
  margin-bottom: 36px;
}
.purpose-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.purpose-heading .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.purpose-heading .eyebrow > span {
  display: block;
}
.purpose-heading h2 > span {
  display: block;
  overflow: hidden;
}
.purpose-heading h2 > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.purpose-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  position: relative;
}
.purpose-panel {
  position: relative;
  min-height: 250px;
  padding: 40px 42px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 251, 255, 0.96)
  );
  border: 1px solid #cadbec !important;
  clip-path: polygon(0 0, 92% 0, 100% 15%, 100% 100%, 0 100%);
  box-shadow: 0 14px 36px rgba(6, 16, 79, 0.055);
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
}
.purpose-panel:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
}
.vision-panel:before {
  width: 110px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.purpose-marker {
  position: absolute;
  right: 28px;
  top: 26px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--blue);
  background: #fff;
  transform: rotate(45deg);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.vision-panel .purpose-marker {
  border-color: var(--cyan);
}
.purpose-panel > small {
  color: #536a85 !important;
  font: 700 0.64rem Manrope !important;
  letter-spacing: 0.16em;
}
.purpose-panel .eyebrow {
  margin: 25px 0 9px !important;
  color: var(--blue);
}
.purpose-panel h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  color: var(--navy);
  transition: color 0.25s;
}
.purpose-panel > p:last-child {
  max-width: 500px;
  margin: 0;
  color: #5b687c;
  line-height: 1.7;
  font-size: 0.88rem;
}
.purpose-panel:hover {
  border-color: #75a9e3 !important;
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(6, 16, 79, 0.07);
}
.purpose-panel:hover h3 {
  color: var(--blue);
}
.purpose-panel:hover .purpose-marker,
.purpose-panel.is-pulsing .purpose-marker {
  background: var(--cyan);
  border-color: var(--blue);
}
.purpose-path {
  position: relative;
  width: 190px;
  height: 90px;
  background: none !important;
}
.purpose-path svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.purpose-path path {
  fill: none;
  stroke-linecap: square;
}
.purpose-path-base {
  stroke: #bccfe3;
  stroke-width: 1.4;
}
.purpose-path-live {
  stroke: #5f91ca;
  stroke-width: 1.7;
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
  transition:
    stroke 0.25s,
    stroke-width 0.25s;
}
.purpose-traveller {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-dasharray: 6 300;
  opacity: 0;
}
.purpose-path > i {
  position: absolute;
  left: 50%;
  top: 27px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--blue);
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.purpose-flow.hover-mission .purpose-path-live {
  stroke: var(--blue);
  clip-path: inset(0 50% 0 0);
}
.purpose-flow.hover-vision .purpose-path-live {
  stroke: var(--blue);
  stroke-width: 2;
}
.purpose-flow.hover-vision .purpose-path > i {
  background: var(--cyan);
  border-color: var(--blue);
}
.about-motion-ready
  .purpose-section:not(.is-animated)
  .purpose-heading
  .eyebrow
  > i {
  transform: scaleX(0);
}
.about-motion-ready
  .purpose-section:not(.is-animated)
  .purpose-heading
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready
  .purpose-section:not(.is-animated)
  .purpose-heading
  h2
  > span
  > i {
  transform: translateY(105%);
}
.about-motion-ready .purpose-section:not(.is-animated) .mission-panel {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
}
.about-motion-ready .purpose-section:not(.is-animated) .mission-panel > * {
  opacity: 0;
  transform: translateY(8px);
}
.about-motion-ready .purpose-section:not(.is-animated) .purpose-path-live {
  stroke-dashoffset: 300;
}
.about-motion-ready .purpose-section:not(.is-animated) .purpose-path > i {
  opacity: 0;
  transform: translateX(-50%) rotate(45deg) scale(0.5);
}
.about-motion-ready .purpose-section:not(.is-animated) .vision-panel {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
}
.about-motion-ready .purpose-section:not(.is-animated) .vision-panel > * {
  opacity: 0;
  transform: translateY(8px);
}
.about-motion-ready .purpose-section .purpose-heading .eyebrow > i {
  transition: transform 0.38s ease;
}
.about-motion-ready .purpose-section .purpose-heading .eyebrow > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready .purpose-section .purpose-heading h2 > span > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready .purpose-section .purpose-panel {
  transition:
    opacity 0.58s ease,
    transform 0.58s ease,
    border-color 0.25s,
    background 0.25s,
    box-shadow 0.25s;
}
.about-motion-ready .purpose-section .mission-panel {
  transition-delay: 0.5s, 0.5s, 0s, 0s, 0s;
}
.about-motion-ready .purpose-section .purpose-panel > * {
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}
.about-motion-ready .purpose-section .mission-panel > small {
  transition-delay: 0.68s;
}
.about-motion-ready .purpose-section .mission-panel > .eyebrow {
  transition-delay: 0.75s;
}
.about-motion-ready .purpose-section .mission-panel > h3 {
  transition-delay: 0.82s, 0s;
}
.about-motion-ready .purpose-section .mission-panel > p:last-child {
  transition-delay: 0.89s;
}
.about-motion-ready .purpose-section .purpose-path-live {
  transition:
    stroke-dashoffset 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1.02s,
    stroke 0.25s,
    stroke-width 0.25s;
}
.about-motion-ready .purpose-section .purpose-path > i {
  transition:
    opacity 0.3s ease 1.36s,
    transform 0.3s ease 1.36s,
    background 0.25s,
    border-color 0.25s;
}
.about-motion-ready .purpose-section .vision-panel {
  transition-delay: 1.64s, 1.64s, 0s, 0s, 0s;
}
.about-motion-ready .purpose-section .vision-panel > small {
  transition-delay: 1.82s;
}
.about-motion-ready .purpose-section .vision-panel > .eyebrow {
  transition-delay: 1.89s;
}
.about-motion-ready .purpose-section .vision-panel > h3 {
  transition-delay: 1.96s, 0s;
}
.about-motion-ready .purpose-section .vision-panel > p:last-child {
  transition-delay: 2.03s;
}
.about-motion-ready
  .purpose-section.is-animated
  .purpose-heading
  :is(.eyebrow > i, h2 > span > i) {
  transform: none;
}
.about-motion-ready
  .purpose-section.is-animated
  .purpose-heading
  .eyebrow
  > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-motion-ready .purpose-section.is-animated .purpose-panel,
.about-motion-ready .purpose-section.is-animated .purpose-panel > * {
  opacity: 1;
  transform: none;
}
.about-motion-ready .purpose-section.is-animated .purpose-path-live {
  stroke-dashoffset: 0;
}
.about-motion-ready .purpose-section.is-animated .purpose-path > i {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg);
}
.about-motion-ready .purpose-section.is-animated .purpose-traveller {
  animation: purposeJourney 1.5s ease 2.35s 1 both;
}
.about-motion-ready .purpose-section.is-animated .purpose-atmosphere {
  animation: purposeAtmosphere 25s ease-in-out infinite alternate;
}
.about-motion-ready .purpose-section.is-animated .purpose-geometry {
  animation: purposeGeometry 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
@keyframes purposeJourney {
  0% {
    stroke-dashoffset: 290;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -10;
    opacity: 0;
  }
}
@keyframes purposeAtmosphere {
  from {
    transform: translate(-2%, -1%);
  }
  to {
    transform: translate(3%, 2%);
  }
}
@keyframes purposeGeometry {
  from {
    opacity: 0;
    translate: 28px -20px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 1024px) {
  .purpose-flow {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: auto;
  }
  .purpose-path {
    width: 90px;
    height: 100px;
    margin: auto;
  }
  .purpose-path svg {
    width: 100%;
    height: 100%;
  }
  .purpose-path path {
    d: path("M45 0V28L25 43V60L45 75V90");
  }
  .purpose-path > i {
    left: 45px;
    top: 43px;
  }
  .purpose-panel {
    width: 100%;
    min-height: 230px;
  }
  .purpose-section {
    padding-block: 86px;
  }
}
@media (max-width: 560px) {
  .purpose-section {
    padding-block: 72px;
    scroll-margin-top: 96px;
  }
  .purpose-heading {
    margin-bottom: 28px;
  }
  .purpose-panel {
    min-height: 0;
    padding: 30px 26px !important;
  }
  .purpose-panel h3 {
    font-size: 1.22rem;
  }
  .purpose-panel > p:last-child {
    font-size: 0.84rem;
  }
  .purpose-path {
    height: 88px;
  }
  .purpose-path path {
    d: path("M45 0V25L27 39V53L45 70V88");
  }
  .purpose-path > i {
    top: 38px;
  }
  .purpose-section.is-animated .purpose-atmosphere {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .purpose-section * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  .purpose-path-live {
    stroke-dashoffset: 0 !important;
  }
  .purpose-traveller {
    display: none !important;
  }
}

/* Our Approach interaction — fixed-size nodes, progressive route and mapped principles. */
.approach-section {
  scroll-margin-top: 112px;
  padding-top: 120px;
  --approach-progress: 0;
  --approach-clip: 100%;
  --approach-focus-x: 10%;
}
.approach-focus {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    circle at var(--approach-focus-x) 48%,
    rgba(19, 184, 244, 0.075),
    transparent 23%
  );
  transition:
    opacity 0.3s,
    background-position 0.3s;
  pointer-events: none;
}
.approach-section.is-engaged .approach-focus {
  opacity: 1;
}
.approach-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.approach-head .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform-origin: left;
}
.approach-head .eyebrow > span {
  display: block;
}
.approach-head h2 > span {
  display: block;
  overflow: hidden;
}
.approach-head h2 > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.approach-base {
  stroke: rgba(126, 183, 239, 0.3) !important;
  stroke-width: 1.2 !important;
  stroke-dasharray: none;
}
.approach-active-route {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: var(--approach-progress) 100;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.approach-indicator {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-dasharray: 1.2 100;
  opacity: 0;
  clip-path: inset(0 var(--approach-clip) 0 0);
}
.approach-architecture li {
  position: relative;
  min-width: 0;
  padding: 0 10px;
  transition: color 0.2s;
}
.approach-architecture li:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 8px;
}
.approach-architecture li i {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px;
  min-height: 54px;
  transform: rotate(45deg) !important;
  transition:
    border-color 0.21s,
    background 0.21s,
    color 0.21s;
  box-shadow: none !important;
}
.approach-architecture li b {
  transition: color 0.2s;
}
.approach-architecture li span {
  transition: color 0.2s;
}
.approach-architecture li.is-complete i {
  border-color: #298bea;
  color: #69cfff;
  background: #09216b;
}
.approach-architecture li.is-current i,
.approach-architecture li.is-related i {
  border-color: var(--cyan);
  color: var(--cyan);
  background: #0a2875;
}
.approach-architecture li.is-current b,
.approach-architecture li.is-related b {
  color: var(--cyan);
}
.approach-architecture li.is-current span,
.approach-architecture li.is-related span {
  color: #c4d3ed;
}
.approach-architecture li.is-future {
  opacity: 0.82;
}
.approach-principles article {
  position: relative;
  border: 1px solid rgba(64, 104, 177, 0.3);
  border-left: 1px solid #2c4e92;
  padding: 24px;
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.approach-principles article:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 28px;
  background: #3467b5;
  transition:
    height 0.25s,
    background 0.25s;
}
.approach-principles article h3 {
  transition: color 0.22s;
}
.approach-principles article:hover,
.approach-principles article.is-linked {
  border-color: rgba(19, 184, 244, 0.58);
  background: rgba(18, 77, 216, 0.1);
  transform: translateY(-2px);
}
.approach-principles article:hover:before,
.approach-principles article.is-linked:before {
  height: 100%;
  background: var(--cyan);
}
.approach-principles article:hover h3,
.approach-principles article.is-linked h3 {
  color: var(--cyan);
}
.approach-section.indicator-run .approach-indicator {
  animation: approachTravel 0.68s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}
@keyframes approachTravel {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.about-motion-ready
  .approach-section:not(.is-animated)
  .approach-head
  .eyebrow
  > i {
  transform: scaleX(0);
}
.about-motion-ready
  .approach-section:not(.is-animated)
  .approach-head
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready
  .approach-section:not(.is-animated)
  .approach-head
  h2
  > span
  > i {
  transform: translateY(105%);
}
.about-motion-ready
  .approach-section:not(.is-animated)
  .approach-head
  > p:last-child {
  opacity: 0;
  transform: translateY(14px);
}
.about-motion-ready .approach-section:not(.is-animated) .approach-base {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.about-motion-ready
  .approach-section:not(.is-animated)
  .approach-architecture
  li,
.about-motion-ready
  .approach-section:not(.is-animated)
  .approach-principles
  article {
  opacity: 0;
  transform: translateY(12px);
}
.about-motion-ready .approach-section .approach-head .eyebrow > i {
  transition: transform 0.38s ease;
}
.about-motion-ready .approach-section .approach-head .eyebrow > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready .approach-section .approach-head h2 > span > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready
  .approach-section
  .approach-head
  h2
  > span:nth-child(2)
  > i {
  transition-delay: 0.31s;
}
.about-motion-ready .approach-section .approach-head > p:last-child {
  transition:
    opacity 0.55s ease 0.46s,
    transform 0.55s ease 0.46s;
}
.about-motion-ready .approach-section .approach-base {
  transition: stroke-dashoffset 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.66s;
}
.about-motion-ready .approach-section .approach-architecture li {
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}
.about-motion-ready .approach-section .approach-architecture li:nth-child(1) {
  transition-delay: 0.82s;
}
.about-motion-ready .approach-section .approach-architecture li:nth-child(2) {
  transition-delay: 0.94s;
}
.about-motion-ready .approach-section .approach-architecture li:nth-child(3) {
  transition-delay: 1.06s;
}
.about-motion-ready .approach-section .approach-architecture li:nth-child(4) {
  transition-delay: 1.18s;
}
.about-motion-ready .approach-section .approach-architecture li:nth-child(5) {
  transition-delay: 1.3s;
}
.about-motion-ready .approach-section .approach-principles article {
  transition:
    opacity 0.42s ease,
    transform 0.25s,
    border-color 0.25s,
    background 0.25s;
}
.about-motion-ready
  .approach-section
  .approach-principles
  article:nth-child(1) {
  transition-delay: 1.42s, 0s, 0s, 0s;
}
.about-motion-ready
  .approach-section
  .approach-principles
  article:nth-child(2) {
  transition-delay: 1.51s, 0s, 0s, 0s;
}
.about-motion-ready
  .approach-section
  .approach-principles
  article:nth-child(3) {
  transition-delay: 1.6s, 0s, 0s, 0s;
}
.about-motion-ready
  .approach-section
  .approach-principles
  article:nth-child(4) {
  transition-delay: 1.69s, 0s, 0s, 0s;
}
.about-motion-ready
  .approach-section.is-animated
  .approach-head
  :is(.eyebrow > i, h2 > span > i) {
  transform: none;
}
.about-motion-ready
  .approach-section.is-animated
  .approach-head
  .eyebrow
  > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-motion-ready .approach-section.is-animated .approach-head > p:last-child,
.about-motion-ready
  .approach-section.is-animated
  :is(.approach-architecture li, .approach-principles article) {
  opacity: 1;
  transform: none;
}
.about-motion-ready .approach-section.is-animated .approach-base {
  stroke-dashoffset: 0;
}
@media (max-width: 800px) {
  .approach-section {
    scroll-margin-top: 96px;
    padding-top: 96px;
  }
  .approach-architecture li {
    padding: 0 0 34px 85px;
    min-height: 72px;
  }
  .approach-architecture li.is-future {
    opacity: 1;
  }
  .approach-architecture li.is-current:before,
  .approach-architecture li.is-complete:before {
    background: var(--blue);
  }
  .approach-focus {
    display: none;
  }
  .approach-principles article:hover,
  .approach-principles article.is-linked {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .approach-section * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .about-motion-ready .approach-section .approach-architecture li i {
    transform: rotate(45deg) !important;
  }
  .approach-indicator {
    display: none !important;
  }
  .approach-principles article:hover,
  .approach-principles article.is-linked {
    transform: none !important;
  }
}

/* Business + Technology — contextual-system motion and interaction. */
.context-system-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 112px;
}
.context-system-section .container {
  position: relative;
  z-index: 1;
}
.context-atmosphere {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: 760px;
  height: 590px;
  background: radial-gradient(
    circle,
    rgba(18, 77, 216, 0.075),
    rgba(19, 184, 244, 0.025) 43%,
    transparent 72%
  );
  pointer-events: none;
}
.context-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.context-copy .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.context-copy .eyebrow > span {
  display: block;
}
.context-copy h2 > span {
  display: block;
  overflow: hidden;
}
.context-copy h2 > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.context-system {
  transform: scale(1.045);
  transform-origin: center;
}
.context-system svg .context-outer {
  fill: rgba(237, 246, 255, 0.28);
  stroke: #adc9e3;
  stroke-width: 1.7;
}
.context-system svg .context-inner {
  fill: rgba(255, 255, 255, 0.76);
  stroke: #70a9df;
  stroke-width: 1.8;
}
.context-routes path {
  fill: none !important;
  stroke: #aac6e1 !important;
  stroke-width: 1.35 !important;
  transition:
    stroke 0.25s,
    stroke-width 0.25s;
}
.context-system .context-live {
  fill: none !important;
  stroke: var(--cyan) !important;
  stroke-width: 2.6 !important;
  stroke-dasharray: 2 100 !important;
  opacity: 0;
}
.context-core {
  border: 1px solid rgba(62, 137, 218, 0.75);
  background: linear-gradient(145deg, #06104f, #0a226d);
  transition:
    border-color 0.25s,
    background 0.25s,
    filter 0.25s,
    transform 0.25s;
}
.context-core i {
  display: block;
  width: 30px;
  height: 2px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.context-system > [data-context-factor] {
  border-color: #c9d9e9;
  background: rgba(255, 255, 255, 0.96);
  color: #334a66;
  transition:
    border-color 0.24s,
    color 0.24s,
    background 0.24s,
    transform 0.24s;
}
.context-system > [data-context-factor]:hover,
.context-system > [data-context-factor].is-pulsing {
  border-color: var(--blue);
  color: var(--blue);
  background: #f7fbff;
  transform: translateY(-1px);
}
.context-system.context-hover-objectives [data-context-route="objectives"],
.context-system.context-hover-users [data-context-route="users"],
.context-system.context-hover-processes [data-context-route="processes"],
.context-system.context-hover-technology [data-context-route="technology"],
.context-system.context-hover-growth [data-context-route="growth"],
.context-system.context-hover-all .context-routes path {
  stroke: var(--blue) !important;
  stroke-width: 1.8 !important;
}
.context-system[class*="context-hover-"] .context-core {
  border-color: var(--cyan);
  background: linear-gradient(145deg, #06104f, #103289);
}
.context-system.context-hover-all > [data-context-factor] {
  border-color: #79aee2;
  color: var(--blue);
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  .context-copy
  .eyebrow
  > i {
  transform: scaleX(0);
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  .context-copy
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  .context-copy
  h2
  > span
  > i {
  transform: translateY(105%);
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  .context-copy
  > p:last-child {
  opacity: 0;
  transform: translateY(14px);
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  :is(.context-outer, .context-inner) {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  .context-routes
  path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.about-motion-ready
  .context-system-section:not(.is-animated)
  [data-context-factor] {
  opacity: 0;
  transform: translateY(9px);
}
.about-motion-ready .context-system-section:not(.is-animated) .context-core {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
}
.about-motion-ready .context-system-section .context-copy .eyebrow > i {
  transition: transform 0.38s ease;
}
.about-motion-ready .context-system-section .context-copy .eyebrow > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready .context-system-section .context-copy h2 > span > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready
  .context-system-section
  .context-copy
  h2
  > span:nth-child(2)
  > i {
  transition-delay: 0.31s;
}
.about-motion-ready
  .context-system-section
  .context-copy
  h2
  > span:nth-child(3)
  > i {
  transition-delay: 0.42s;
}
.about-motion-ready .context-system-section .context-copy > p:last-child {
  transition:
    opacity 0.56s ease 0.57s,
    transform 0.56s ease 0.57s;
}
.about-motion-ready .context-system-section .context-outer {
  transition: stroke-dashoffset 0.88s cubic-bezier(0.22, 1, 0.36, 1) 0.72s;
}
.about-motion-ready .context-system-section .context-routes path {
  transition:
    stroke-dashoffset 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    stroke 0.25s,
    stroke-width 0.25s;
}
.about-motion-ready .context-system-section .context-routes path:nth-child(1) {
  transition-delay: 1.04s, 0s, 0s;
}
.about-motion-ready .context-system-section .context-routes path:nth-child(2) {
  transition-delay: 1.15s, 0s, 0s;
}
.about-motion-ready .context-system-section .context-routes path:nth-child(3) {
  transition-delay: 1.26s, 0s, 0s;
}
.about-motion-ready .context-system-section .context-routes path:nth-child(4) {
  transition-delay: 1.37s, 0s, 0s;
}
.about-motion-ready .context-system-section .context-routes path:nth-child(5) {
  transition-delay: 1.48s, 0s, 0s;
}
.about-motion-ready .context-system-section [data-context-factor] {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    border-color 0.24s,
    color 0.24s,
    background 0.24s;
}
.about-motion-ready .context-system-section .ctx-one {
  transition-delay: 1.06s, 1.06s, 0s, 0s, 0s;
}
.about-motion-ready .context-system-section .ctx-two {
  transition-delay: 1.17s, 1.17s, 0s, 0s, 0s;
}
.about-motion-ready .context-system-section .ctx-three {
  transition-delay: 1.28s, 1.28s, 0s, 0s, 0s;
}
.about-motion-ready .context-system-section .ctx-four {
  transition-delay: 1.39s, 1.39s, 0s, 0s, 0s;
}
.about-motion-ready .context-system-section .ctx-five {
  transition-delay: 1.5s, 1.5s, 0s, 0s, 0s;
}
.about-motion-ready .context-system-section .context-inner {
  transition: stroke-dashoffset 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.58s;
}
.about-motion-ready .context-system-section .context-core {
  transition:
    opacity 0.55s ease 2.05s,
    transform 0.55s ease 2.05s,
    border-color 0.25s,
    background 0.25s;
}
.about-motion-ready
  .context-system-section.is-animated
  .context-copy
  :is(.eyebrow > i, h2 > span > i) {
  transform: none;
}
.about-motion-ready
  .context-system-section.is-animated
  .context-copy
  .eyebrow
  > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-motion-ready
  .context-system-section.is-animated
  .context-copy
  > p:last-child {
  opacity: 1;
  transform: none;
}
.about-motion-ready
  .context-system-section.is-animated
  :is(.context-outer, .context-inner) {
  stroke-dashoffset: 0;
}
.about-motion-ready .context-system-section.is-animated .context-routes path {
  stroke-dashoffset: 0;
}
.about-motion-ready .context-system-section.is-animated [data-context-factor] {
  opacity: 1;
  transform: none;
}
.about-motion-ready .context-system-section.is-animated .context-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.about-motion-ready .context-system-section.is-animated .context-live {
  animation: contextJourney 2.2s ease 2.7s 1 both;
}
.about-motion-ready .context-system-section.is-animated .context-atmosphere {
  animation: contextAtmosphere 26s ease-in-out infinite alternate;
}
@keyframes contextJourney {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes contextAtmosphere {
  from {
    transform: translate(-2%, -1%);
  }
  to {
    transform: translate(3%, 2%);
  }
}
@media (max-width: 800px) {
  .context-system-section {
    scroll-margin-top: 96px;
  }
  .context-system {
    transform: none;
  }
  .context-system-section.is-animated .context-atmosphere {
    animation: none !important;
  }
  .context-system-section.is-animated .context-live {
    animation: none !important;
  }
}
@media (max-width: 430px) {
  .context-system {
    height: 390px;
  }
  .context-system > [data-context-factor] {
    font-size: 0.58rem;
    padding: 7px 9px;
  }
  .ctx-one {
    left: 24%;
    top: 5%;
  }
  .ctx-two {
    right: 0;
    top: 29%;
  }
  .ctx-three {
    right: 3%;
    bottom: 8%;
  }
  .ctx-four {
    left: 4%;
    bottom: 8%;
  }
  .ctx-five {
    left: 0;
    top: 29%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .context-system-section * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  .about-motion-ready .context-system-section .context-core {
    transform: translate(-50%, -50%) !important;
  }
  .context-live {
    display: none !important;
  }
  .context-outer,
  .context-inner,
  .context-routes path {
    stroke-dashoffset: 0 !important;
  }
}
.about-motion-ready .context-system-section:not(.is-animated) .context-core {
  transform: scale(0.96);
}
.about-motion-ready .context-system-section.is-animated .context-core {
  transform: scale(1);
}
.context-core.is-pulsing {
  border-color: var(--cyan);
  background: linear-gradient(145deg, #06104f, #103289);
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .context-system-section .context-core {
    transform: none !important;
    translate: -50% -50% !important;
  }
}

/* Business Context — five factors feeding one digital direction. */
.business-context-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 112px;
}
.business-context-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.business-context-copy .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.business-context-copy .eyebrow > span {
  display: block;
}
.business-context-copy h2 > span {
  display: block;
  overflow: hidden;
}
.business-context-copy h2 > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.business-context-copy .btn {
  margin-top: 12px;
}
.direction-system {
  position: relative;
  display: grid;
  grid-template-columns: 185px 170px 185px;
  grid-template-rows: 90px 130px 90px;
  grid-template-areas: ". growth ." "customer hub models" "workflows . processes";
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(600px, 100%);
  height: 420px;
  margin-inline: auto;
}
.direction-system:before {
  content: "";
  position: absolute;
  inset: 2%;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(18, 77, 216, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 77, 216, 0.03) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}
.direction-atmosphere {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 360px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(18, 77, 216, 0.09),
    rgba(19, 184, 244, 0.025) 43%,
    transparent 70%
  );
}
.direction-system > svg {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}
.direction-routes path {
  fill: none;
  stroke: #aec8e1;
  stroke-width: 1.35;
  stroke-linecap: square;
  transition:
    stroke 0.24s,
    stroke-width 0.24s;
}
.direction-anchors rect {
  fill: #fff;
  stroke: #4f98df;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.24s,
    stroke 0.24s;
}
.direction-data path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.8;
  stroke-dasharray: 5 120;
  opacity: 0;
}
.direction-hub {
  grid-area: hub;
  position: relative;
  z-index: 3;
  justify-self: center;
  display: grid;
  place-content: center;
  text-align: center;
  width: 165px;
  height: 125px;
  color: #fff;
  background: linear-gradient(145deg, #06104f, #124dd8);
  clip-path: polygon(14% 0, 100% 0, 100% 78%, 84% 100%, 0 100%, 0 20%);
  border: 1px solid #347bcf;
  transition:
    filter 0.24s,
    transform 0.24s;
}
.direction-hub small {
  font: 700 0.58rem Manrope;
  letter-spacing: 0.16em;
  color: #70d6ff;
}
.direction-hub b {
  font-size: 0.91rem;
  line-height: 1.25;
  margin-top: 5px;
}
.direction-hub > i {
  display: block;
  width: 34px;
  height: 2px;
  margin: 9px auto 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.direction-factor {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 185px;
  min-height: 52px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #c7d9ea;
  clip-path: polygon(0 0, 94% 0, 100% 24%, 100% 100%, 0 100%);
  color: #314963;
  transition:
    border-color 0.24s,
    color 0.24s,
    background 0.24s,
    transform 0.24s;
}
.direction-factor > i {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--blue);
  transform: rotate(45deg);
  background: #fff;
  transition:
    border-color 0.24s,
    background 0.24s;
}
.direction-factor > span {
  font: 700 0.62rem Manrope;
  letter-spacing: 0.08em;
  line-height: 1.35;
}
.factor-customer {
  grid-area: customer;
}
.factor-processes {
  grid-area: processes;
}
.factor-workflows {
  grid-area: workflows;
}
.factor-models {
  grid-area: models;
}
.factor-growth {
  grid-area: growth;
}
.direction-factor:hover,
.direction-factor.is-pulsing {
  border-color: var(--blue);
  color: var(--blue);
  background: #f8fbff;
  transform: translateY(-1px);
}
.direction-factor:hover > i,
.direction-factor.is-pulsing > i {
  background: var(--cyan);
  border-color: var(--blue);
}
.direction-system[class*="direction-hover-"] .direction-hub {
  filter: brightness(1.07);
}
.direction-system.direction-hover-customer [data-direction-route="customer"],
.direction-system.direction-hover-processes [data-direction-route="processes"],
.direction-system.direction-hover-workflows [data-direction-route="workflows"],
.direction-system.direction-hover-models [data-direction-route="models"],
.direction-system.direction-hover-growth [data-direction-route="growth"],
.direction-system.direction-hover-all .direction-routes path {
  stroke: var(--blue);
  stroke-width: 1.7;
}
.direction-system.direction-hover-all .direction-factor {
  border-color: #80afe0;
  color: var(--blue);
}
.direction-system.direction-hover-all .direction-anchors rect {
  fill: var(--cyan);
  stroke: var(--blue);
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .business-context-copy
  .eyebrow
  > i {
  transform: scaleX(0);
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .business-context-copy
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .business-context-copy
  h2
  > span
  > i {
  transform: translateY(105%);
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .business-context-copy
  > p:last-of-type {
  opacity: 0;
  transform: translateY(14px);
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .business-context-copy
  .btn {
  opacity: 0;
  transform: translateY(8px);
}
.about-motion-ready .business-context-section:not(.is-animated) .direction-hub {
  opacity: 0;
  transform: scale(0.96);
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .direction-factor {
  opacity: 0;
  transform: translateY(10px);
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .direction-routes
  path {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
}
.about-motion-ready
  .business-context-section:not(.is-animated)
  .direction-anchors
  rect {
  opacity: 0;
  transform: scale(0.5);
}
.about-motion-ready
  .business-context-section
  .business-context-copy
  .eyebrow
  > i {
  transition: transform 0.38s ease;
}
.about-motion-ready
  .business-context-section
  .business-context-copy
  .eyebrow
  > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready
  .business-context-section
  .business-context-copy
  h2
  > span
  > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready
  .business-context-section
  .business-context-copy
  h2
  > span:nth-child(2)
  > i {
  transition-delay: 0.31s;
}
.about-motion-ready
  .business-context-section
  .business-context-copy
  h2
  > span:nth-child(3)
  > i {
  transition-delay: 0.42s;
}
.about-motion-ready
  .business-context-section
  .business-context-copy
  > p:last-of-type {
  transition:
    opacity 0.56s ease 0.56s,
    transform 0.56s ease 0.56s;
}
.about-motion-ready .business-context-section .business-context-copy .btn {
  transition:
    opacity 0.45s ease 0.7s,
    transform 0.25s,
    border-color 0.25s,
    background 0.25s,
    color 0.25s;
}
.about-motion-ready .business-context-section .direction-hub {
  transition:
    opacity 0.58s ease 0.82s,
    transform 0.58s ease 0.82s,
    filter 0.24s;
}
.about-motion-ready .business-context-section .direction-factor {
  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    border-color 0.24s,
    color 0.24s,
    background 0.24s;
}
.about-motion-ready .business-context-section .factor-customer {
  transition-delay: 1.04s, 1.04s, 0s, 0s, 0s;
}
.about-motion-ready .business-context-section .factor-processes {
  transition-delay: 1.34s, 1.34s, 0s, 0s, 0s;
}
.about-motion-ready .business-context-section .factor-workflows {
  transition-delay: 1.64s, 1.64s, 0s, 0s, 0s;
}
.about-motion-ready .business-context-section .factor-models {
  transition-delay: 1.94s, 1.94s, 0s, 0s, 0s;
}
.about-motion-ready .business-context-section .factor-growth {
  transition-delay: 2.24s, 2.24s, 0s, 0s, 0s;
}
.about-motion-ready .business-context-section .direction-routes path {
  transition:
    stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    stroke 0.24s,
    stroke-width 0.24s;
}
.about-motion-ready
  .business-context-section
  [data-direction-route="customer"] {
  transition-delay: 1.18s, 0s, 0s;
}
.about-motion-ready
  .business-context-section
  [data-direction-route="processes"] {
  transition-delay: 1.48s, 0s, 0s;
}
.about-motion-ready
  .business-context-section
  [data-direction-route="workflows"] {
  transition-delay: 1.78s, 0s, 0s;
}
.about-motion-ready .business-context-section [data-direction-route="models"] {
  transition-delay: 2.08s, 0s, 0s;
}
.about-motion-ready .business-context-section [data-direction-route="growth"] {
  transition-delay: 2.38s, 0s, 0s;
}
.about-motion-ready
  .business-context-section.is-animated
  .business-context-copy
  :is(.eyebrow > i, h2 > span > i) {
  transform: none;
}
.about-motion-ready
  .business-context-section.is-animated
  .business-context-copy
  .eyebrow
  > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-motion-ready
  .business-context-section.is-animated
  .business-context-copy
  > p:last-of-type,
.about-motion-ready
  .business-context-section.is-animated
  .business-context-copy
  .btn,
.about-motion-ready
  .business-context-section.is-animated
  :is(.direction-hub, .direction-factor, .direction-anchors rect) {
  opacity: 1;
  transform: none;
}
.about-motion-ready
  .business-context-section.is-animated
  .direction-routes
  path {
  stroke-dashoffset: 0;
}
.about-motion-ready
  .business-context-section.is-animated
  [data-direction-flow="customer"] {
  animation: directionData 0.9s ease 2.9s 1 both;
}
.about-motion-ready
  .business-context-section.is-animated
  [data-direction-flow="workflows"] {
  animation: directionData 1.1s ease 4s 1 both;
}
@keyframes directionData {
  0% {
    stroke-dashoffset: 120;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@media (max-width: 1100px) {
  .business-context-section .teaser-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .business-context-copy {
    max-width: 720px;
  }
  .direction-system {
    margin-inline: auto;
  }
}
@media (max-width: 600px) {
  .business-context-section {
    scroll-margin-top: 96px;
  }
  .direction-system {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "hub" "customer" "processes" "workflows" "models" "growth";
    gap: 14px;
    width: 100%;
    height: auto;
    padding: 5px 0 0 30px;
  }
  .direction-system > svg {
    display: none;
  }
  .direction-system:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 115px;
    bottom: 32px;
    width: 1px;
    background: linear-gradient(var(--blue), #abc8e5);
  }
  .direction-hub {
    margin: 0 auto 16px;
    width: 155px;
    height: 118px;
  }
  .direction-factor {
    width: 100%;
    min-height: 50px;
  }
  .direction-factor:before {
    content: "";
    position: absolute;
    left: -25px;
    top: 20px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--blue);
    background: #fff;
    transform: rotate(45deg);
  }
  .direction-data {
    display: none;
  }
  .business-context-section.is-animated .direction-atmosphere {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .business-context-section * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .direction-routes path {
    stroke-dashoffset: 0 !important;
  }
  .direction-data {
    display: none !important;
  }
}

/* Technologies — Foundation supports Systems which enable Experience. */
.technologies-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 112px;
}
.technologies-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.technologies-copy .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.technologies-copy .eyebrow > span {
  display: block;
}
.technologies-copy h2 > span {
  display: block;
  overflow: hidden;
}
.technologies-copy h2 > span > i {
  display: block;
  font: inherit;
  font-style: normal;
}
.technologies-copy .btn {
  margin-top: 12px;
}
.technology-stack {
  isolation: isolate;
  width: min(600px, 100%);
  height: 390px;
  margin-inline: auto;
}
.stack-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 5% 8%;
  background: radial-gradient(
    circle at 53% 53%,
    rgba(18, 77, 216, 0.055),
    transparent 67%
  );
  opacity: 0.55;
  transition: opacity 0.3s;
}
.technology-stack:hover .stack-atmosphere,
.technology-stack[class*="stack-hover-"] .stack-atmosphere {
  opacity: 1;
}
.technology-stack .stack-layer {
  position: absolute;
  width: 70%;
  height: 100px;
  left: 15%;
  border: 1px solid #b7cde3;
  background: rgba(255, 255, 255, 0.97);
  transform: skewX(-18deg);
  box-shadow: 0 12px 28px rgba(6, 16, 79, 0.045);
  transition:
    border-color 0.28s,
    background 0.28s,
    box-shadow 0.28s,
    translate 0.28s,
    opacity 0.28s;
}
.technology-stack .stack-experience {
  z-index: 4;
  top: 15px;
}
.technology-stack .stack-systems {
  z-index: 3;
  top: 125px;
  left: 20%;
}
.technology-stack .stack-foundation {
  z-index: 2;
  top: 235px;
  left: 25%;
  background: #f3f8fe;
}
.technology-stack .stack-layer small {
  display: block;
  padding: 38px;
  transform: skewX(18deg);
  font: 700 0.65rem Manrope;
  letter-spacing: 0.15em;
  color: #315a96;
  transition: color 0.28s;
}
.technology-stack .stack-layer > i {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 9px;
  height: 9px;
  border: 1px solid #94b9dd;
  background: #fff;
  transform: skewX(18deg) rotate(45deg);
  transition:
    border-color 0.28s,
    background 0.28s;
}
.technology-stack:hover .stack-layer {
  border-color: #9bbcdf;
}
.technology-stack:hover .stack-layer small {
  color: #24528e;
}
.technology-stack .stack-layer.is-current,
.technology-stack.stack-hover-foundation .stack-foundation,
.technology-stack.stack-hover-systems .stack-systems,
.technology-stack.stack-hover-experience .stack-experience {
  border-color: #087ef5;
  background: #f1f8ff;
  box-shadow: 0 10px 30px rgba(18, 77, 216, 0.08);
  translate: 0 -2px;
}
.technology-stack
  :is(
    .stack-hover-foundation .stack-foundation,
    .stack-hover-systems .stack-systems,
    .stack-hover-experience .stack-experience
  )
  small {
  color: #087ef5;
}
.technology-stack
  :is(
    .stack-hover-foundation .stack-foundation,
    .stack-hover-systems .stack-systems,
    .stack-hover-experience .stack-experience
  )
  > i {
  border-color: #087ef5;
  background: var(--cyan);
}
.technology-stack.stack-hover-systems .stack-foundation,
.technology-stack.stack-hover-experience
  :is(.stack-foundation, .stack-systems) {
  border-color: #6fa7dd;
  background: #f7fbff;
}
.technology-stack.stack-hover-foundation :is(.stack-systems, .stack-experience),
.technology-stack.stack-hover-systems .stack-experience {
  opacity: 0.84;
}
.technology-stack[class*="stack-hover-"] ~ * {
}
.technologies-section:has(.technology-stack[class*="stack-hover-"])
  .technologies-copy
  .eyebrow {
  color: #087ef5;
}
.stack-path {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.stack-path path {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.stack-path-base {
  stroke: #d7e5f2;
  stroke-width: 1.3;
}
.stack-path-segment {
  stroke: #087ef5;
  stroke-width: 2;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  transition: stroke-dashoffset 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.stack-node {
  fill: #fff;
  stroke: #aec9e3;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.25s,
    stroke 0.25s;
}
.stack-indicator {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-dasharray: 4 300;
  opacity: 0;
}
.technology-stack.stack-hover-foundation .stack-path-foundation,
.technology-stack.stack-hover-systems .stack-path-foundation,
.technology-stack.stack-hover-experience .stack-path-segment {
  stroke-dashoffset: 0;
}
.technology-stack.stack-hover-systems .stack-node-foundation,
.technology-stack.stack-hover-systems .stack-node-systems,
.technology-stack.stack-hover-experience .stack-node {
  fill: var(--cyan);
  stroke: #087ef5;
}
.technology-stack.stack-hover-foundation .stack-node-foundation {
  fill: var(--cyan);
  stroke: #087ef5;
}
.technology-stack.stack-hover-foundation .stack-indicator {
  animation: stackDataFoundation 0.4s ease 1 both;
}
.technology-stack.stack-hover-systems .stack-indicator {
  animation: stackDataSystems 0.55s ease 1 both;
}
.technology-stack.stack-hover-experience .stack-indicator {
  animation: stackDataExperience 0.75s ease 1 both;
}
@keyframes stackDataFoundation {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -36;
    opacity: 0;
  }
}
@keyframes stackDataSystems {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -145;
    opacity: 0;
  }
}
@keyframes stackDataExperience {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -295;
    opacity: 0;
  }
}
.technologies-section .btn:hover {
  border-color: #087ef5;
  background: #f3f8ff;
  color: #0757bd;
  transform: none;
}
.technologies-section .btn span {
  display: inline-block;
  transition: transform 0.24s;
}
.technologies-section .btn:hover span {
  transform: translateX(4px);
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .technologies-copy
  .eyebrow
  > i {
  transform: scaleX(0);
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .technologies-copy
  .eyebrow
  > span {
  opacity: 0;
  letter-spacing: 0.24em;
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .technologies-copy
  h2
  > span
  > i {
  transform: translateY(105%);
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .technologies-copy
  > p:last-of-type {
  opacity: 0;
  transform: translateY(14px);
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .technologies-copy
  .btn {
  opacity: 0;
  transform: translateY(8px);
}
.about-motion-ready .technologies-section:not(.is-animated) .stack-layer {
  opacity: 0;
  translate: 0 12px;
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .stack-path-segment {
  stroke-dashoffset: 190;
}
.about-motion-ready .technologies-section:not(.is-animated) .stack-node {
  opacity: 0;
  transform: scale(0.5);
}
.about-motion-ready .technologies-section .technologies-copy .eyebrow > i {
  transition: transform 0.38s ease;
}
.about-motion-ready .technologies-section .technologies-copy .eyebrow > span {
  transition:
    opacity 0.35s ease 0.1s,
    letter-spacing 0.4s ease 0.1s;
}
.about-motion-ready .technologies-section .technologies-copy h2 > span > i {
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.about-motion-ready
  .technologies-section
  .technologies-copy
  h2
  > span:nth-child(2)
  > i {
  transition-delay: 0.31s;
}
.about-motion-ready
  .technologies-section
  .technologies-copy
  h2
  > span:nth-child(3)
  > i {
  transition-delay: 0.42s;
}
.about-motion-ready .technologies-section .technologies-copy > p:last-of-type {
  transition:
    opacity 0.56s ease 0.56s,
    transform 0.56s ease 0.56s;
}
.about-motion-ready .technologies-section .technologies-copy .btn {
  transition:
    opacity 0.45s ease 0.7s,
    transform 0.24s,
    border-color 0.24s,
    background 0.24s,
    color 0.24s;
}
.about-motion-ready .technologies-section .stack-layer {
  transition:
    opacity 0.5s ease,
    translate 0.5s ease,
    border-color 0.28s,
    background 0.28s,
    box-shadow 0.28s;
}
.about-motion-ready .technologies-section .stack-foundation {
  transition-delay: 0.88s, 0.88s, 0s, 0s, 0s;
}
.about-motion-ready .technologies-section .stack-systems {
  transition-delay: 1.01s, 1.01s, 0s, 0s, 0s;
}
.about-motion-ready .technologies-section .stack-experience {
  transition-delay: 1.14s, 1.14s, 0s, 0s, 0s;
}
.about-motion-ready .technologies-section .stack-path-segment {
  transition:
    stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    stroke 0.25s;
}
.about-motion-ready .technologies-section .stack-path-foundation {
  transition-delay: 1.27s, 0s;
}
.about-motion-ready .technologies-section .stack-path-experience {
  transition-delay: 1.4s, 0s;
}
.about-motion-ready .technologies-section .stack-node {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    fill 0.25s,
    stroke 0.25s;
}
.about-motion-ready .technologies-section .stack-node-foundation {
  transition-delay: 1.27s, 1.27s, 0s, 0s;
}
.about-motion-ready .technologies-section .stack-node-systems {
  transition-delay: 1.4s, 1.4s, 0s, 0s;
}
.about-motion-ready .technologies-section .stack-node-experience {
  transition-delay: 1.53s, 1.53s, 0s, 0s;
}
.about-motion-ready
  .technologies-section.is-animated
  .technologies-copy
  :is(.eyebrow > i, h2 > span > i) {
  transform: none;
}
.about-motion-ready
  .technologies-section.is-animated
  .technologies-copy
  .eyebrow
  > span {
  opacity: 1;
  letter-spacing: 0.18em;
}
.about-motion-ready
  .technologies-section.is-animated
  .technologies-copy
  > p:last-of-type,
.about-motion-ready .technologies-section.is-animated .technologies-copy .btn,
.about-motion-ready .technologies-section.is-animated .stack-layer,
.about-motion-ready .technologies-section.is-animated .stack-node {
  opacity: 1;
  transform: none;
  translate: 0 0;
}
.about-motion-ready .technologies-section.is-animated .stack-path-segment {
  stroke-dashoffset: 0;
}
.about-motion-ready .technologies-section.is-animated .stack-indicator {
  animation: stackEntranceData 0.85s ease 1.72s 1 both;
}
@keyframes stackEntranceData {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -295;
    opacity: 0;
  }
}
@media (max-width: 800px) {
  .technologies-section {
    scroll-margin-top: 96px;
  }
  .technologies-section .teaser-grid {
    gap: 24px;
  }
  .technology-stack {
    height: 350px;
    max-width: 600px;
  }
  .technology-stack .stack-layer {
    width: 76%;
  }
  .technology-stack .stack-experience {
    left: 8%;
  }
  .technology-stack .stack-systems {
    left: 12%;
  }
  .technology-stack .stack-foundation {
    left: 16%;
  }
  .stack-path {
    transform: translateX(-3%);
  }
  .technology-stack:hover .stack-layer {
    opacity: 1;
  }
}
@media (max-width: 560px) {
  .technology-stack {
    height: 320px;
  }
  .technology-stack .stack-layer {
    width: 80%;
    height: 82px;
    left: 8% !important;
    transform: none;
    clip-path: polygon(0 0, 94% 0, 100% 22%, 100% 100%, 0 100%);
  }
  .technology-stack .stack-layer small {
    padding: 31px 25px;
    transform: none;
  }
  .technology-stack .stack-experience {
    top: 8px;
  }
  .technology-stack .stack-systems {
    top: 108px;
  }
  .technology-stack .stack-foundation {
    top: 208px;
  }
  .technology-stack .stack-layer > i {
    transform: rotate(45deg);
  }
  .stack-path {
    display: none;
  }
  .technology-stack:before {
    content: "";
    position: absolute;
    left: calc(8% + 18px);
    top: 74px;
    bottom: 22px;
    width: 1px;
    background: linear-gradient(#9bc2e8, #087ef5);
  }
  .technologies-section:has(.technology-stack[class*="stack-hover-"])
    .technologies-copy
    .eyebrow {
    color: var(--royal);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .technologies-section * {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    animation: none !important;
    transition: none !important;
  }
  .about-motion-ready .technologies-section .stack-path-segment {
    stroke-dashoffset: 0 !important;
  }
  .technologies-section .stack-indicator {
    display: none !important;
  }
}
.technology-stack.stack-hover-foundation .stack-foundation small,
.technology-stack.stack-hover-systems .stack-systems small,
.technology-stack.stack-hover-experience .stack-experience small {
  color: #087ef5;
}
.technology-stack.stack-hover-foundation .stack-foundation > i,
.technology-stack.stack-hover-systems .stack-systems > i,
.technology-stack.stack-hover-experience .stack-experience > i {
  border-color: #087ef5;
  background: var(--cyan);
}
.technology-stack.stack-intro-complete:not([class*="stack-hover-"])
  .stack-path-segment {
  stroke-dashoffset: 190;
}
.about-motion-ready
  .technologies-section.is-animated
  .technology-stack.stack-intro-complete
  .stack-path-segment {
  transition-delay: 0s;
  stroke-dashoffset: 190;
}
.about-motion-ready
  .technologies-section.is-animated
  .technology-stack.stack-intro-complete.stack-hover-foundation
  .stack-path-foundation,
.about-motion-ready
  .technologies-section.is-animated
  .technology-stack.stack-intro-complete.stack-hover-systems
  .stack-path-foundation,
.about-motion-ready
  .technologies-section.is-animated
  .technology-stack.stack-intro-complete.stack-hover-experience
  .stack-path-segment {
  stroke-dashoffset: 0;
}
.technology-stack > .stack-experience {
  top: 15px !important;
  left: 15% !important;
  background: rgba(255, 255, 255, 0.97) !important;
}
.technology-stack > .stack-systems {
  top: 125px !important;
  left: 20% !important;
  background: rgba(255, 255, 255, 0.97) !important;
}
.technology-stack > .stack-foundation {
  top: 235px !important;
  left: 25% !important;
  background: #f3f8fe !important;
}
@media (max-width: 800px) {
  .technology-stack > .stack-experience {
    left: 8% !important;
  }
  .technology-stack > .stack-systems {
    left: 12% !important;
  }
  .technology-stack > .stack-foundation {
    left: 16% !important;
  }
}
@media (max-width: 560px) {
  .technology-stack > .stack-experience {
    top: 8px !important;
    left: 8% !important;
  }
  .technology-stack > .stack-systems {
    top: 108px !important;
    left: 8% !important;
  }
  .technology-stack > .stack-foundation {
    top: 208px !important;
    left: 8% !important;
  }
}
.technology-stack .stack-layer {
  transform: none;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
.technology-stack .stack-layer small {
  box-sizing: border-box;
  padding: 38px 32px;
  transform: none;
  line-height: 24px;
}
.technology-stack .stack-layer > i {
  transform: rotate(45deg);
}
@media (max-width: 560px) {
  .technology-stack .stack-layer {
    clip-path: polygon(0 0, 94% 0, 100% 22%, 100% 100%, 0 100%);
  }
  .technology-stack .stack-layer small {
    padding: 29px 32px;
    line-height: 24px;
  }
}

/* Rebuilt Technologies architecture: isolated shape, content, node and connector layers. */
.architecture-stack {
  position: relative;
  isolation: isolate;
  width: min(460px, 100%);
  height: 360px;
  margin-inline: auto;
}
.architecture-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 3% -4%;
  background: radial-gradient(
    circle at 58% 52%,
    rgba(18, 77, 216, 0.055),
    transparent 67%
  );
  transition: opacity 0.28s;
}
.architecture-connector {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.architecture-connector path {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.architecture-route-base {
  stroke: #c7d9ea;
  stroke-width: 1.4;
}
.architecture-route {
  stroke: #087ef5;
  stroke-width: 2;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.architecture-traveller {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-dasharray: 4 360;
  opacity: 0;
}
.architecture-layer {
  position: absolute;
  z-index: 1;
  height: 90px;
}
.architecture-experience {
  left: 20px;
  top: 20px;
  width: 330px;
}
.architecture-systems {
  left: 48px;
  top: 132px;
  width: 340px;
}
.architecture-foundation {
  left: 76px;
  top: 244px;
  width: 350px;
}
.architecture-layer__shape {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #b7cde3;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  filter: drop-shadow(0 10px 18px rgba(6, 16, 79, 0.035));
  transition:
    background 0.26s,
    translate 0.26s,
    filter 0.26s;
}
.architecture-layer__shape:after {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: inherit;
}
.architecture-foundation .architecture-layer__shape:after {
  background: #f2f7fd;
}
.architecture-layer__content {
  position: absolute;
  z-index: 3;
  left: 32px;
  top: 50%;
  translate: 0 -50%;
  font: 700 0.65rem/1 Manrope;
  letter-spacing: 0.15em;
  color: #315a96;
  transform: none;
  transition:
    color 0.25s,
    translate 0.25s;
}
.architecture-layer__node {
  position: absolute;
  z-index: 4;
  right: 9px;
  top: 50%;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1.5px solid #75a9dc;
  transform: translateY(-50%) rotate(45deg);
  transition:
    background 0.24s,
    border-color 0.24s;
}
.architecture-stack:hover .architecture-layer__shape {
  background: #9dbfe0;
}
.architecture-stack:hover .architecture-layer__content {
  color: #285791;
}
.architecture-stack[class*="stack-hover-"] .architecture-atmosphere {
  opacity: 1;
}
.architecture-stack.stack-hover-foundation
  .architecture-foundation
  .architecture-layer__shape,
.architecture-stack.stack-hover-systems
  .architecture-systems
  .architecture-layer__shape,
.architecture-stack.stack-hover-experience
  .architecture-experience
  .architecture-layer__shape {
  background: #087ef5;
  translate: 0 -2px;
  filter: drop-shadow(0 10px 22px rgba(18, 77, 216, 0.08));
}
.architecture-stack.stack-hover-foundation
  .architecture-foundation
  .architecture-layer__shape:after,
.architecture-stack.stack-hover-systems
  .architecture-systems
  .architecture-layer__shape:after,
.architecture-stack.stack-hover-experience
  .architecture-experience
  .architecture-layer__shape:after {
  background: #f1f8ff;
}
.architecture-stack.stack-hover-foundation
  .architecture-foundation
  .architecture-layer__content,
.architecture-stack.stack-hover-systems
  .architecture-systems
  .architecture-layer__content,
.architecture-stack.stack-hover-experience
  .architecture-experience
  .architecture-layer__content {
  color: #087ef5;
  translate: 1px -50%;
}
.architecture-stack.stack-hover-foundation
  .architecture-foundation
  .architecture-layer__node,
.architecture-stack.stack-hover-systems
  .architecture-systems
  .architecture-layer__node,
.architecture-stack.stack-hover-experience
  .architecture-experience
  .architecture-layer__node {
  background: var(--cyan);
  border-color: #087ef5;
}
.architecture-stack.stack-hover-systems
  .architecture-foundation
  .architecture-layer__shape,
.architecture-stack.stack-hover-experience
  :is(.architecture-foundation, .architecture-systems)
  .architecture-layer__shape {
  background: #68a5df;
}
.architecture-stack.stack-hover-systems
  .architecture-foundation
  .architecture-layer__node,
.architecture-stack.stack-hover-experience
  :is(.architecture-foundation, .architecture-systems)
  .architecture-layer__node {
  background: #dff6ff;
  border-color: #4d91d5;
}
.architecture-stack.stack-hover-foundation .architecture-route-one,
.architecture-stack.stack-hover-systems .architecture-route-one,
.architecture-stack.stack-hover-experience .architecture-route {
  stroke-dashoffset: 0;
}
.architecture-stack.stack-hover-foundation .architecture-traveller {
  animation: architectureDataOne 0.4s ease 1 both;
}
.architecture-stack.stack-hover-systems .architecture-traveller {
  animation: architectureDataOne 0.55s ease 1 both;
}
.architecture-stack.stack-hover-experience .architecture-traveller {
  animation: architectureDataAll 0.76s ease 1 both;
}
@keyframes architectureDataOne {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -150;
    opacity: 0;
  }
}
@keyframes architectureDataAll {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -330;
    opacity: 0;
  }
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .architecture-layer {
  opacity: 0;
  translate: 0 12px;
}
.about-motion-ready
  .technologies-section:not(.is-animated)
  .architecture-route {
  stroke-dashoffset: 220;
}
.about-motion-ready .technologies-section .architecture-layer {
  transition:
    opacity 0.5s ease,
    translate 0.5s ease;
}
.about-motion-ready .technologies-section .architecture-foundation {
  transition-delay: 0.88s;
}
.about-motion-ready .technologies-section .architecture-systems {
  transition-delay: 1s;
}
.about-motion-ready .technologies-section .architecture-experience {
  transition-delay: 1.12s;
}
.about-motion-ready .technologies-section .architecture-route {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-motion-ready .technologies-section .architecture-route-one {
  transition-delay: 1.26s;
}
.about-motion-ready .technologies-section .architecture-route-two {
  transition-delay: 1.38s;
}
.about-motion-ready .technologies-section.is-animated .architecture-layer {
  opacity: 1;
  translate: 0 0;
}
.about-motion-ready .technologies-section.is-animated .architecture-route {
  stroke-dashoffset: 0;
}
.about-motion-ready .technologies-section.is-animated .architecture-traveller {
  animation: architectureEntrance 1s ease 1.58s 1 both;
}
@keyframes architectureEntrance {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -330;
    opacity: 0;
  }
}
.about-motion-ready
  .technologies-section.is-animated
  .architecture-stack.stack-intro-complete
  .architecture-route {
  transition-delay: 0s;
  stroke-dashoffset: 220;
}
.about-motion-ready
  .technologies-section.is-animated
  .architecture-stack.stack-intro-complete.stack-hover-foundation
  .architecture-route-one,
.about-motion-ready
  .technologies-section.is-animated
  .architecture-stack.stack-intro-complete.stack-hover-systems
  .architecture-route-one,
.about-motion-ready
  .technologies-section.is-animated
  .architecture-stack.stack-intro-complete.stack-hover-experience
  .architecture-route {
  stroke-dashoffset: 0;
}
@media (max-width: 800px) {
  .architecture-stack {
    width: min(440px, 100%);
    height: 340px;
  }
  .architecture-connector {
    transform: scale(0.95);
    transform-origin: top left;
  }
  .architecture-experience {
    left: 10px;
    top: 16px;
    width: 315px;
  }
  .architecture-systems {
    left: 34px;
    top: 122px;
    width: 325px;
  }
  .architecture-foundation {
    left: 58px;
    top: 228px;
    width: 335px;
  }
}
@media (max-width: 480px) {
  .architecture-stack {
    width: 100%;
    height: 318px;
  }
  .architecture-experience,
  .architecture-systems,
  .architecture-foundation {
    height: 82px;
    width: calc(100% - 44px);
  }
  .architecture-experience {
    left: 0;
    top: 8px;
  }
  .architecture-systems {
    left: 14px;
    top: 108px;
  }
  .architecture-foundation {
    left: 28px;
    top: 208px;
  }
  .architecture-layer__shape {
    clip-path: polygon(0 0, 94% 0, 100% 22%, 100% 100%, 0 100%);
  }
  .architecture-layer__content {
    left: 28px;
  }
  .architecture-layer__node {
    right: 10px;
  }
  .architecture-connector {
    display: none;
  }
  .architecture-experience:after,
  .architecture-systems:after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 14px;
    top: 50%;
    width: 1px;
    height: 101px;
    background: #b8cfe5;
    transform: rotate(-8deg);
    transform-origin: top;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .technologies-section .architecture-layer {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }
  .about-motion-ready .technologies-section .architecture-route {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .architecture-traveller {
    display: none !important;
  }
  .architecture-layer__shape,
  .architecture-layer__content,
  .architecture-layer__node {
    transition: none !important;
  }
}

/* People collaboration — six disciplines converging on one shared objective. */
.people-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 112px;
}
.people-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.people-copy .eyebrow > i {
  display: block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  transform-origin: left;
}
.people-copy .eyebrow > span,
.people-copy h2 > span,
.people-copy h2 > span > i {
  display: block;
}
.people-copy h2 > span {
  overflow: hidden;
}
.people-copy h2 > span > i {
  font: inherit;
  font-style: normal;
}
.people-copy .btn {
  margin-top: 12px;
}
.people-collaboration {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 160px 150px 160px;
  grid-template-rows: 60px 150px 60px;
  grid-template-areas:
    ". strategy ."
    "ai hub design"
    "marketing infrastructure development";
  gap: 20px 25px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  align-content: center;
  width: min(590px, 100%);
  height: 390px;
  padding: 20px 10px;
  margin-inline: auto;
}
.people-collaboration:after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 1%;
  background-image:
    linear-gradient(rgba(18, 77, 216, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 77, 216, 0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0, 0, 0, 0.55) 53%, transparent 78%);
}
.people-atmosphere {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 300px;
  translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(18, 77, 216, 0.075), rgba(19, 184, 244, 0.018) 48%, transparent 73%);
}
.people-connectors {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.people-connectors path {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.people-routes path {
  stroke: #c8d8e7;
  stroke-width: 1.35;
  transition: stroke 0.25s, stroke-width 0.25s, stroke-dashoffset 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.people-hub-anchors rect {
  fill: #fff;
  stroke: #78a9d9;
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.25s, stroke 0.25s;
}
.people-data-flow path {
  stroke: var(--cyan);
  stroke-width: 2.8;
  stroke-dasharray: 4 180;
  opacity: 0;
}
.people-hub {
  grid-area: hub;
  position: relative;
  z-index: 3;
  display: grid;
  place-content: center;
  width: 150px;
  height: 120px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #071552, #103da7);
  border: 1px solid #3977c6;
  clip-path: polygon(13% 0, 100% 0, 100% 80%, 86% 100%, 0 100%, 0 18%);
  transition: filter 0.25s, border-color 0.25s;
}
.people-hub small {
  color: #80dcff;
  font: 700 0.59rem Manrope;
  letter-spacing: 0.17em;
}
.people-hub b {
  margin-top: 5px;
  font: 700 0.88rem Manrope;
  letter-spacing: 0.06em;
}
.people-hub > i {
  display: block;
  width: 34px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.people-discipline {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 145px;
  min-height: 48px;
  padding: 9px 13px;
  color: #314b68;
  background: rgba(251, 253, 255, 0.86);
  border: 1px solid rgba(150, 184, 216, 0.66);
  box-shadow: inset 2px 0 rgba(18, 77, 216, 0.12);
  clip-path: polygon(0 0, 94% 0, 100% 24%, 100% 100%, 0 100%);
  transition: color 0.24s, border-color 0.24s, background 0.24s, translate 0.24s;
}
.people-discipline > i {
  flex: none;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1.5px solid #1988ef;
  transform: rotate(45deg);
  transition: background 0.24s, border-color 0.24s;
}
.people-discipline > span {
  font: 700 0.63rem/1.3 Manrope;
  letter-spacing: 0.075em;
}
.people-strategy { grid-area: strategy; }
.people-design { grid-area: design; align-self: start; margin-top: 4px; }
.people-development { grid-area: development; }
.people-infrastructure { grid-area: infrastructure; }
.people-marketing { grid-area: marketing; }
.people-ai { grid-area: ai; }
.people-discipline:hover,
.people-collaboration[class*="people-hover-"] .people-discipline:hover {
  color: #087ef5;
  border-color: #087ef5;
  background: #f7fbff;
  translate: 0 -1px;
}
.people-discipline:hover > i { background: var(--cyan); }
.people-collaboration[class*="people-hover-"] .people-hub { filter: brightness(1.07); border-color: var(--cyan); }
.people-collaboration.people-hover-strategy [data-people-route="strategy"],
.people-collaboration.people-hover-design [data-people-route="design"],
.people-collaboration.people-hover-development [data-people-route="development"],
.people-collaboration.people-hover-infrastructure [data-people-route="infrastructure"],
.people-collaboration.people-hover-marketing [data-people-route="marketing"],
.people-collaboration.people-hover-ai [data-people-route="ai"],
.people-collaboration.people-hover-all .people-routes path {
  stroke: #087ef5;
  stroke-width: 1.8;
}
.people-collaboration.people-hover-all .people-discipline {
  color: #145da8;
  border-color: #73a8dc;
}
.people-collaboration.people-hover-all .people-hub-anchors rect { fill: var(--cyan); stroke: #087ef5; }
.people-collaboration.people-hover-strategy .people-hub-anchors rect:nth-child(1),
.people-collaboration.people-hover-design .people-hub-anchors rect:nth-child(2),
.people-collaboration.people-hover-development .people-hub-anchors rect:nth-child(3),
.people-collaboration.people-hover-infrastructure .people-hub-anchors rect:nth-child(4),
.people-collaboration.people-hover-marketing .people-hub-anchors rect:nth-child(5),
.people-collaboration.people-hover-ai .people-hub-anchors rect:nth-child(6) {
  fill: var(--cyan);
  stroke: #087ef5;
}
.people-collaboration[class*="people-hover-"] .people-hub > i { background: var(--cyan); }
.people-collaboration.people-hover-strategy [data-people-flow="strategy"],
.people-collaboration.people-hover-design [data-people-flow="design"],
.people-collaboration.people-hover-development [data-people-flow="development"],
.people-collaboration.people-hover-infrastructure [data-people-flow="infrastructure"],
.people-collaboration.people-hover-marketing [data-people-flow="marketing"],
.people-collaboration.people-hover-ai [data-people-flow="ai"] {
  animation: peopleHoverData 0.58s ease 1 both;
}
.people-collaboration.people-hover-all [data-people-flow="strategy"] { animation: peopleHoverData 0.58s ease 1 both; }
.people-collaboration.people-hover-all [data-people-flow="development"] { animation: peopleHoverData 0.62s ease 0.12s 1 both; }
.people-collaboration.people-hover-all [data-people-flow="marketing"] { animation: peopleHoverData 0.62s ease 0.24s 1 both; }
@keyframes peopleHoverData {
  0% { stroke-dashoffset: 180; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.people-section .btn:hover {
  color: #0757bd;
  border-color: #087ef5;
  background: #f3f8ff;
  transform: none;
}
.people-section .btn span { display: inline-block; transition: transform 0.24s; }
.people-section .btn:hover span { transform: translateX(3px); }

.about-motion-ready .people-section:not(.is-animated) .people-copy .eyebrow > i { transform: scaleX(0); }
.about-motion-ready .people-section:not(.is-animated) .people-copy .eyebrow > span { opacity: 0; letter-spacing: 0.24em; }
.about-motion-ready .people-section:not(.is-animated) .people-copy h2 > span > i { transform: translateY(105%); }
.about-motion-ready .people-section:not(.is-animated) .people-copy > p:last-of-type { opacity: 0; transform: translateY(14px); }
.about-motion-ready .people-section:not(.is-animated) .people-copy .btn { opacity: 0; transform: translateY(8px); }
.about-motion-ready .people-section:not(.is-animated) .people-hub { opacity: 0; transform: scale(0.96); }
.about-motion-ready .people-section:not(.is-animated) .people-discipline { opacity: 0; transform: translateY(10px); }
.about-motion-ready .people-section:not(.is-animated) .people-routes path { stroke-dasharray: 180; stroke-dashoffset: 180; }
.about-motion-ready .people-section:not(.is-animated) .people-hub-anchors rect { opacity: 0; transform: scale(0.5); }
.about-motion-ready .people-section .people-copy .eyebrow > i { transition: transform 0.38s ease; }
.about-motion-ready .people-section .people-copy .eyebrow > span { transition: opacity 0.35s ease 0.1s, letter-spacing 0.4s ease 0.1s; }
.about-motion-ready .people-section .people-copy h2 > span > i { transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
.about-motion-ready .people-section .people-copy h2 > span:nth-child(2) > i { transition-delay: 0.31s; }
.about-motion-ready .people-section .people-copy h2 > span:nth-child(3) > i { transition-delay: 0.42s; }
.about-motion-ready .people-section .people-copy > p:last-of-type { transition: opacity 0.56s ease 0.56s, transform 0.56s ease 0.56s; }
.about-motion-ready .people-section .people-copy .btn { transition: opacity 0.45s ease 0.7s, transform 0.24s, border-color 0.24s, background 0.24s, color 0.24s; }
.about-motion-ready .people-section .people-hub { transition: opacity 0.58s ease 0.84s, transform 0.58s ease 0.84s, filter 0.25s, border-color 0.25s; }
.about-motion-ready .people-section .people-discipline { transition: opacity 0.42s ease, transform 0.42s ease, color 0.24s, border-color 0.24s, background 0.24s, translate 0.24s; }
.about-motion-ready .people-section .people-strategy { transition-delay: 1.04s, 1.04s, 0s, 0s, 0s, 0s; }
.about-motion-ready .people-section .people-design { transition-delay: 1.22s, 1.22s, 0s, 0s, 0s, 0s; }
.about-motion-ready .people-section .people-development { transition-delay: 1.4s, 1.4s, 0s, 0s, 0s, 0s; }
.about-motion-ready .people-section .people-infrastructure { transition-delay: 1.58s, 1.58s, 0s, 0s, 0s, 0s; }
.about-motion-ready .people-section .people-marketing { transition-delay: 1.76s, 1.76s, 0s, 0s, 0s, 0s; }
.about-motion-ready .people-section .people-ai { transition-delay: 1.94s, 1.94s, 0s, 0s, 0s, 0s; }
.about-motion-ready .people-section .people-routes path { transition: stroke-dashoffset 0.42s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.25s, stroke-width 0.25s; }
.about-motion-ready .people-section [data-people-route="strategy"] { transition-delay: 1.12s, 0s, 0s; }
.about-motion-ready .people-section [data-people-route="design"] { transition-delay: 1.3s, 0s, 0s; }
.about-motion-ready .people-section [data-people-route="development"] { transition-delay: 1.48s, 0s, 0s; }
.about-motion-ready .people-section [data-people-route="infrastructure"] { transition-delay: 1.66s, 0s, 0s; }
.about-motion-ready .people-section [data-people-route="marketing"] { transition-delay: 1.84s, 0s, 0s; }
.about-motion-ready .people-section [data-people-route="ai"] { transition-delay: 2.02s, 0s, 0s; }
.about-motion-ready .people-section .people-hub-anchors rect { transition: opacity 0.32s ease 2.08s, transform 0.32s ease 2.08s, fill 0.25s, stroke 0.25s; }
.about-motion-ready .people-section.is-animated .people-copy :is(.eyebrow > i, h2 > span > i) { transform: none; }
.about-motion-ready .people-section.is-animated .people-copy .eyebrow > span { opacity: 1; letter-spacing: 0.18em; }
.about-motion-ready .people-section.is-animated .people-copy > p:last-of-type,
.about-motion-ready .people-section.is-animated .people-copy .btn,
.about-motion-ready .people-section.is-animated .people-hub,
.about-motion-ready .people-section.is-animated .people-discipline,
.about-motion-ready .people-section.is-animated .people-hub-anchors rect { opacity: 1; transform: none; }
.about-motion-ready .people-section.is-animated .people-routes path { stroke-dashoffset: 0; }
.about-motion-ready .people-section.is-animated [data-people-flow="strategy"] { animation: peopleData 0.75s ease 2.45s 1 both; }
.about-motion-ready .people-section.is-animated [data-people-flow="development"] { animation: peopleData 0.9s ease 3.3s 1 both; }
.about-motion-ready .people-section.is-animated [data-people-flow="marketing"] { animation: peopleData 0.9s ease 4.3s 1 both; }
@keyframes peopleData {
  0% { stroke-dashoffset: 180; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (max-width: 1100px) {
  .people-section .people-grid { grid-template-columns: 1fr; gap: 30px; }
  .people-copy { max-width: 720px; }
}
@media (max-width: 640px) {
  .people-section { scroll-margin-top: 96px; }
  .people-collaboration {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 124px repeat(3, 54px);
    grid-template-areas:
      "hub hub"
      "strategy design"
      "development infrastructure"
      "marketing ai";
    gap: 14px;
    height: auto;
    padding: 0 0 0 28px;
    background-size: 30px 30px;
  }
  .people-collaboration:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 10px;
    top: 103px;
    bottom: 27px;
    width: 1px;
    background: linear-gradient(#087ef5, #b8cfe5);
  }
  .people-connectors { display: none; }
  .people-collaboration:after { opacity: 0.45; }
  .people-hub { width: 155px; height: 120px; }
  .people-discipline { width: 100%; min-height: 54px; }
  .people-design { align-self: center; margin-top: 0; }
  .people-data-flow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-motion-ready .people-section * { opacity: 1 !important; transform: none !important; translate: 0 0 !important; animation: none !important; transition: none !important; }
  .people-routes path { stroke-dashoffset: 0 !important; }
  .people-data-flow { display: none !important; }
}
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-strategy [data-people-flow="strategy"],
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-design [data-people-flow="design"],
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-development [data-people-flow="development"],
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-infrastructure [data-people-flow="infrastructure"],
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-marketing [data-people-flow="marketing"],
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-ai [data-people-flow="ai"] {
  animation: peopleHoverData 0.58s ease 1 both;
}
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-all [data-people-flow="strategy"] { animation: peopleHoverData 0.58s ease 1 both; }
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-all [data-people-flow="development"] { animation: peopleHoverData 0.62s ease 0.12s 1 both; }
.about-motion-ready .people-section.is-animated .people-collaboration.people-hover-all [data-people-flow="marketing"] { animation: peopleHoverData 0.62s ease 0.24s 1 both; }

/* Keep the About hero stacked through the complete tablet range. */
@media (min-width: 768px) and (max-width: 1199px) {
  .about-page .about-hero.section {
    min-height: 0;
    padding: 48px 0 64px;
    align-items: start;
  }
  .about-hero .about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .about-hero .about-hero-copy {
    max-width: 790px;
    padding: 0;
  }
  .about-hero h1 {
    font-size: clamp(3.2rem, 6.25vw, 4rem);
  }
  .about-hero .transformation-map,
  .about-motion-ready .about-hero.is-animated .transformation-map {
    width: min(100%, 620px);
    height: 440px;
    margin-inline: auto;
    transform: none;
  }
}

/* Cascade lock for the three responsive diagram rebuilds. */
@media (max-width: 1199px) {
  .about-page .approach-section .approach-architecture { width: min(100%, 760px); height: auto; margin: 44px auto 32px; }
  .about-page .approach-section .approach-architecture > svg { display: none; }
  .about-page .approach-section .approach-architecture ol { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; gap: 30px; margin: 0; }
  .about-page .approach-section .approach-architecture ol:before { content: ""; position: absolute; left: 29px; top: 20px; bottom: 20px; width: 1.5px; background: linear-gradient(#2a64a8, #4a78aa); }
  .about-page .approach-section .approach-architecture li { position: relative; z-index: 1; display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; min-height: 58px; padding: 0; text-align: left; }
  .about-page .approach-section .approach-architecture li:before { display: none; }
  .about-page .approach-section .approach-architecture li i { position: relative; left: auto; top: auto; grid-column: 1; grid-row: 1 / span 2; width: 38px !important; height: 38px !important; min-width: 38px; min-height: 38px; margin: 0 0 0 10px; font-size: 0.64rem; }
  .about-page .approach-section .approach-architecture li b { grid-column: 2; margin: 0 0 3px; font-size: 1.05rem; }
  .about-page .approach-section .approach-architecture li span { grid-column: 2; margin: 0; font-size: 0.88rem; line-height: 1.45; }
  .about-page .approach-section .approach-principles { width: min(100%, 760px); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .about-page .approach-section .approach-principles article { min-height: 0; padding: 20px; }
  .about-page .why-section .why-path { position: relative; display: grid; grid-template-columns: 1fr; gap: 26px; width: min(100%, 760px); margin: 0 auto; padding: 0; }
  .about-page .why-section .why-path:before { left: 27px; right: auto; top: 25px; bottom: 25px; width: 1.5px; height: auto; }
  .about-page .why-section .why-path li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; min-height: 76px; padding: 0; text-align: left; }
  .about-page .why-section .why-path li:before { position: relative; left: auto; top: auto; grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 16px; height: 16px; margin: 0 0 0 19px; border-width: 2px; }
  .about-page .why-section .why-path :is(small, h3, p) { grid-column: 2; }
  .about-page .why-section .why-path h3 { margin: 3px 0; font-size: 1.05rem; }
  .about-page .why-section .why-path p { margin: 0; font-size: 0.88rem; }
  .about-page .business-context-section .teaser-grid { grid-template-columns: 1fr; gap: 38px; }
  .about-page .business-context-section .direction-system { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; grid-template-areas: "growth growth" "hub hub" "customer models" "workflows processes"; gap: 12px; width: min(100%, 620px); height: auto; padding: 0; margin-inline: auto; }
  .about-page .business-context-section .direction-system > svg { display: none; }
  .about-page .business-context-section .direction-system:after { left: 50%; top: 52px; bottom: 54px; width: 1.5px; translate: -50% 0; }
  .about-page .business-context-section .direction-hub { grid-area: hub; width: 150px; height: 108px; margin: 4px auto 16px; }
  .about-page .business-context-section .direction-factor { width: 100%; min-height: 54px; padding: 10px 13px; }
  .about-page .business-context-section .direction-factor:before { display: none; }
  .about-page .business-context-section .factor-growth { grid-area: growth; justify-self: center; width: min(220px, 70%); }
  .about-page .business-context-section .factor-customer { grid-area: customer; }
  .about-page .business-context-section .factor-models { grid-area: models; }
  .about-page .business-context-section .factor-workflows { grid-area: workflows; }
  .about-page .business-context-section .factor-processes { grid-area: processes; }
}
@media (max-width: 767px) {
  .about-page .approach-section .approach-architecture { margin-top: 36px; }
  .about-page .approach-section .approach-architecture ol { gap: 28px; }
  .about-page .approach-section .approach-principles { grid-template-columns: 1fr; gap: 12px; }
  .about-page .why-section .why-path { gap: 22px; }
}
@media (max-width: 370px) {
  .about-page .business-context-section .direction-system { grid-template-columns: 1fr; grid-template-areas: "growth" "hub" "customer" "models" "workflows" "processes"; gap: 10px; width: calc(100% - 8px); }
}

@media (max-width: 1199px) {
  .about-page .approach-section .approach-architecture ol:before { left: 27px; }
  .about-page .approach-section .approach-architecture li i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    margin-left: 13px;
  }
}