/* ===== transformation-map — inherits the homepage system. Self contained. ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0B0D0C; --paper:#F2F2F0;
  --accent:#185FA4; --accent-hi:#368ADD; --accent-deep:#0C457D; --warn:#B44526;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,4.5vw,64px); --maxw:1480px; --hdr:74px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--ink);color:#fff;font-size:16px;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
h1,h2,h3{font-weight:600;letter-spacing:-.045em;line-height:1.02}
.body{font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.62;letter-spacing:-.008em}
.lead{font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.4;letter-spacing:-.03em}
.small{font-size:13px;line-height:1.55}
.label{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.s-dark{background:var(--ink);color:#fff;position:relative}
.s-light{background:var(--paper);color:var(--ink);position:relative}
.s-dark .dim{color:rgba(255,255,255,.6)} .s-light .dim{color:rgba(11,13,12,.62)}
.s-dark .faint{color:rgba(255,255,255,.4)} .s-light .faint{color:rgba(11,13,12,.45)}
.sec{padding:clamp(74px,10.5vw,146px) 0}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--grain);opacity:.05;mix-blend-mode:overlay}
.grain>*{position:relative;z-index:2}
.glass{background:rgba(255,255,255,.055);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.14)}
[data-r]{opacity:0;transform:translateY(28px);filter:blur(7px);
  transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease)}
[data-r].in{opacity:1;transform:none;filter:blur(0)}
.at .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.at .w>i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .9s var(--ease)}
.at.in .w>i{transform:none}
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:-8% 0;will-change:transform}
.hero-img{position:absolute;inset:0;background-size:cover;transform:scale(1.08);animation:kb 2.6s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero-noise{position:absolute;inset:0;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.hero-in{position:relative;z-index:5;margin-top:auto;padding-top:calc(var(--hdr) + 54px);padding-bottom:clamp(32px,5.5vh,66px)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .w>i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.hero.go h1 .w>i{transform:none}
.hero .sub{color:rgba(255,255,255,.64)}
.hero .fade{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.hero.go .fade{opacity:1;transform:none;filter:blur(0)}


.hero{min-height:min(72svh,640px)}
.hero-img{background-position:50% 30%}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(92deg,rgba(11,13,12,.94) 0%,
  rgba(11,13,12,.72) 42%,rgba(11,13,12,.3) 80%,rgba(11,13,12,.42) 100%)}
.hero-scrim2{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,12,.94) 0%,
  rgba(11,13,12,.46) 32%,rgba(11,13,12,0) 60%)}
.hero h1{font-size:clamp(2.1rem,5.4vw,4.8rem);letter-spacing:-.05em;line-height:1;max-width:16ch;
  margin-bottom:clamp(16px,2.2vh,26px)}
.hero .sub{max-width:52ch}

/* legend: three flow columns with connecting hairlines */
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,40px);
  border-top:1px solid rgba(11,13,12,.16);padding-top:clamp(24px,3vw,42px)}
.lg{position:relative}
.lg .k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:14px}
.lg h3{font-size:clamp(1.05rem,1.9vw,1.45rem);letter-spacing:-.038em;line-height:1.1;margin-bottom:10px}
.lg p{color:rgba(11,13,12,.62);font-size:14.5px;line-height:1.58;max-width:38ch}
.lg .items{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.lg .items span{font-size:11.5px;border:1px solid rgba(11,13,12,.18);border-radius:100px;padding:5px 12px;
  color:rgba(11,13,12,.6)}

/* orbit stage, full bleed */
.map-note{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(18px,2.4vw,30px);padding-top:16px;border-top:1px solid rgba(11,13,12,.16);
  color:rgba(11,13,12,.45)}

/* discipline rows, alternating with input/output pills */
.disc{border-top:1px solid rgba(255,255,255,.16)}
.d-row{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,3vw,52px);
  padding:clamp(26px,3.6vw,52px) 0;border-bottom:1px solid rgba(255,255,255,.16);align-items:start;
  position:relative;transition:padding-left .55s var(--ease)}
.d-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.04);
  transition:width .6s var(--ease);pointer-events:none}
.d-row:hover::before{width:100%}
.d-row:hover{padding-left:clamp(10px,1.6vw,24px)}
.d-row>*{position:relative;z-index:2}
.d-row .gn{font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.06em;line-height:.9;
  color:rgba(255,255,255,.16);transition:color .45s;font-variant-numeric:tabular-nums}
.d-row:hover .gn{color:var(--accent-hi)}
.d-row h3{font-size:clamp(1.2rem,2.6vw,2rem);letter-spacing:-.042em;line-height:1.06;margin-bottom:12px}
.d-row p{color:rgba(255,255,255,.6);max-width:48ch}
.flowset{display:flex;flex-direction:column;gap:14px}
.flowline{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.flowline .fk{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);white-space:nowrap;min-width:5.6em}
.flowline .fv{display:flex;flex-wrap:wrap;gap:7px}
.flowline .fv span{font-size:11.5px;border:1px solid rgba(255,255,255,.2);border-radius:100px;
  padding:5px 12px;color:rgba(255,255,255,.66)}
.flowline.out .fv span{border-color:rgba(54,138,221,.45);color:#fff}

/* closing */
.close-q{font-size:clamp(1.5rem,4vw,3.2rem);font-weight:600;letter-spacing:-.048em;line-height:1.08;max-width:22ch}

@media (max-width:1024px){
  .legend{grid-template-columns:1fr;gap:26px}
  .d-row{grid-template-columns:auto 1fr;row-gap:16px}
  .d-row .flowset{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-r]{opacity:1;transform:none;filter:none}
  .at .w>i,.hero h1 .w>i{transform:none}
  .hero .fade{opacity:1;transform:none;filter:none}
}
/* orbit is scrubbed: every timeline is paused and positioned by --sp */
.orbit{--sp:0}
.orbit .active-left,.orbit .assess,.orbit .core-active,.orbit .deliver,
.orbit .right-lines,.orbit .right-boxes,.orbit .right-copy,.orbit .ring-active,
.orbit .draw-left,.orbit .draw-assess,.orbit .draw-deliver,.orbit .draw-right{
  animation-play-state:paused !important;
  animation-delay:calc(var(--sp) * -7.9s) !important;
}
.orbit .outer-active{
  animation-play-state:paused,running !important;
  animation-delay:calc(var(--sp) * -7.9s),0s !important;
}
@media (prefers-reduced-motion:reduce){
  .orbit *{animation-play-state:paused !important}
}

/* ============ ORBIT (scoped from the supplied map) ============ */
.orbit{
      --ink: #0B0D0C;
      --ghost: #D3D6D2;
      --left: #2A2F2D;
      --right: #185FA4;
      --charcoal: #2A2F2D;
      --green: #185FA4;
      --aqua: #368ADD;
      --blue: #185FA4;
      --violet: #0C457D;
      --ease: cubic-bezier(.4, 0, .2, 1);
    }
.orbit svg{
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1280 / 672;
    }
.orbit .mobile-map{ display: none; }
.orbit .mobile-map .mobile-brand{
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.045em;
    }
.orbit .mobile-map .mobile-note{
      font-size: 5.7px;
      font-weight: 700;
      letter-spacing: .14em;
      fill: #7c8586;
    }
.orbit .mobile-map .mobile-label{
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .02em;
    }
.orbit .mobile-map .mobile-orbit-label{
      font-size: 7.5px;
      font-weight: 700;
      letter-spacing: .08em;
    }
.orbit .mobile-map .mobile-result-label{
      font-size: 6.5px;
      font-weight: 700;
      letter-spacing: .01em;
    }
.orbit .mobile-map .ring-active{
      transform-origin: 210px 310px;
      stroke: url(#mobileRingGradient);
      stroke-width: 12;
      stroke-dasharray: 704;
      stroke-dashoffset: 704;
      animation-name: mobile-ring-draw;
    }
.orbit text{ fill: var(--ink); }
.orbit .skeleton{
      fill: none;
      stroke: var(--ghost);
      stroke-width: .78;
      vector-effect: non-scaling-stroke;
    }
.orbit .skeleton-ring{
      fill: none;
      stroke: #D3D6D2;
      stroke-width: .78;
      stroke-dasharray: 4 6;
      vector-effect: non-scaling-stroke;
    }
.orbit .active-left, .orbit .assess, .orbit .outer-active, .orbit .core-active, .orbit .deliver, .orbit .right-lines, .orbit .right-boxes, .orbit .right-copy{
      opacity: 0;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function: var(--ease);
    }
.orbit .active-left{ animation-name: left-load; }
.orbit .assess{ animation-name: assess-load; }
.orbit .outer-active{
      animation-name: outer-load, orbit-dashes;
      animation-duration: 10s, 18s;
      animation-timing-function: var(--ease), linear;
      animation-iteration-count: infinite, infinite;
    }
.orbit .core-active{ animation-name: core-load; }
.orbit .deliver{ animation-name: deliver-load; }
.orbit .right-lines{ animation-name: right-lines-load; }
.orbit .right-boxes{ animation-name: right-boxes-load; }
.orbit .right-copy{ animation-name: right-copy-load; }
.orbit .ring-base{
      fill: none;
      stroke: url(#ringGradient);
      stroke-width: 17;
      opacity: .08;
    }
.orbit .ring-active{
      fill: none;
      stroke: url(#ringGradient);
      stroke-width: 17;
      stroke-linecap: round;
      stroke-dasharray: 1062;
      stroke-dashoffset: 1062;
      transform: rotate(-90deg);
      transform-origin: 640px 330px;
      animation: ring-draw 10s var(--ease) infinite;
    }
.orbit .draw-left, .orbit .draw-assess, .orbit .draw-deliver, .orbit .draw-right{
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function: var(--ease);
    }
.orbit .draw-left{ animation-name: draw-left-lines; }
.orbit .draw-assess{ animation-name: draw-assess-line; }
.orbit .draw-deliver{ animation-name: draw-deliver-line; }
.orbit .draw-right{ animation-name: draw-right-lines; }
.orbit .active-left > path, .orbit .assess path, .orbit .deliver path, .orbit .right-lines path{
      stroke-width: .82;
      vector-effect: non-scaling-stroke;
    }
.orbit .active-left > rect, .orbit .right-boxes rect{
      stroke-width: .82;
      vector-effect: non-scaling-stroke;
    }
.orbit .label{
      font-size: 8.2px;
      font-weight: 700;
      letter-spacing: .02em;
    }
.orbit .section-label{
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
    }
.orbit .icon-disc{ fill: rgba(11,13,12,.05); }
.orbit .active-left rect{ fill: rgba(255,255,255,.66); }
.orbit .right-boxes rect{ fill: rgba(24,95,164,.09); }
.orbit .active-left path[stroke]{ stroke-width: 1.6; }
.orbit .right-lines path[stroke]{ stroke-width: 1.6; }
.orbit .icon-line{
      fill: none;
      stroke: #4c5658;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }
.orbit .flow-pill{ fill: var(--charcoal); }
.orbit .flow-text{ fill: #fff; font-size: 8.4px; font-weight: 700; letter-spacing: .08em; }
.orbit .core-label{ font-size: 7.7px; font-weight: 700; letter-spacing: .1em; }
.orbit .core-line{ fill: none; stroke: #D3D6D2; stroke-width: .72; vector-effect: non-scaling-stroke; }
.orbit .core-note{ font-size: 6.8px; font-weight: 700; letter-spacing: .16em; fill: #7c8586; }
.orbit .brand{ font-size: 24px; font-weight: 700; letter-spacing: -.045em; }
.orbit .brand-accent{ fill: var(--green); }
@keyframes left-load {
      0%, 3% { opacity: 0; }
      13%, 87% { opacity: 1; }
      95%, 100% { opacity: 0; }
    }
@keyframes assess-load {
      0%, 17% { opacity: 0; }
      24%, 87% { opacity: 1; }
      95%, 100% { opacity: 0; }
    }
@keyframes outer-load {
      0%, 20% { opacity: 0; }
      29%, 87% { opacity: 1; }
      95%, 100% { opacity: 0; }
    }
@keyframes orbit-dashes {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: -60; }
    }
@keyframes ring-draw {
      0%, 25% { opacity: 0; stroke-dashoffset: 1062; }
      30% { opacity: .18; stroke-dashoffset: 1062; }
      45%, 87% { opacity: 1; stroke-dashoffset: 0; }
      94%, 100% { opacity: 0; stroke-dashoffset: 0; }
    }
@keyframes mobile-ring-draw {
      0%, 25% { opacity: 0; stroke-dashoffset: 704; }
      30% { opacity: .18; stroke-dashoffset: 704; }
      45%, 87% { opacity: 1; stroke-dashoffset: 0; }
      94%, 100% { opacity: 0; stroke-dashoffset: 0; }
    }
@keyframes draw-left-lines {
      0%, 4% { stroke-dashoffset: 1; }
      17%, 100% { stroke-dashoffset: 0; }
    }
@keyframes draw-assess-line {
      0%, 19% { stroke-dashoffset: 1; }
      28%, 100% { stroke-dashoffset: 0; }
    }
@keyframes draw-deliver-line {
      0%, 51% { stroke-dashoffset: 1; }
      61%, 100% { stroke-dashoffset: 0; }
    }
@keyframes draw-right-lines {
      0%, 58% { stroke-dashoffset: 1; }
      72%, 100% { stroke-dashoffset: 0; }
    }
@keyframes core-load {
      0%, 29% { opacity: 0; }
      43%, 87% { opacity: 1; }
      94%, 100% { opacity: 0; }
    }
@keyframes deliver-load {
      0%, 53% { opacity: 0; }
      61%, 87% { opacity: 1; }
      94%, 100% { opacity: 0; }
    }
@keyframes right-lines-load {
      0%, 56% { opacity: 0; }
      65%, 87% { opacity: 1; }
      94%, 100% { opacity: 0; }
    }
@keyframes right-boxes-load {
      0%, 61% { opacity: 0; }
      71%, 87% { opacity: 1; }
      94%, 100% { opacity: 0; }
    }
@keyframes right-copy-load {
      0%, 68% { opacity: 0; }
      78%, 87% { opacity: 1; }
      94%, 100% { opacity: 0; }
    }
@media (max-width: 700px) {.orbit .desktop-map{ display: none; }
.orbit .mobile-map{ display: block; width: 100%; height: 100%; aspect-ratio: auto; }}
@media (prefers-reduced-motion: reduce) {.orbit .active-left, .orbit .assess, .orbit .outer-active, .orbit .core-active, .orbit .deliver, .orbit .right-lines, .orbit .right-boxes, .orbit .right-copy{ opacity: 1; animation: none; }
.orbit .ring-active{ opacity: 1; stroke-dashoffset: 0; animation: none; }
.orbit .draw-left, .orbit .draw-assess, .orbit .draw-deliver, .orbit .draw-right{ stroke-dashoffset: 0; animation: none; }}
@media (max-width: 700px) {}
.orbit{position:relative;width:min(calc(100vw - 28px),1720px);margin:clamp(4px,1.2vw,14px) auto 0}
@media (max-width:760px){.orbit{width:calc(100vw - 20px)}}
.orbit .stage{width:100%;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
.orbit svg{display:block;width:100%;height:auto;aspect-ratio:1280/672}
.orbit .mobile-map{display:none}
@media (max-width:760px){
  .orbit .desktop-map{display:none}
  .orbit .mobile-map{display:block;width:100%;height:auto;aspect-ratio:420/760}
}

/* Match the approved homepage orbit when a phone requests the desktop site. */
@media (min-width:861px) and (max-width:1200px) and (max-aspect-ratio:2/3) and (hover:none) and (pointer:coarse){
  .kg-transformation-map .orbit[data-orbit-context="transformation-map"]{width:min(62vw,640px);margin-top:10px}
  .kg-transformation-map .orbit[data-orbit-context="transformation-map"] .desktop-map{display:none}
  .kg-transformation-map .orbit[data-orbit-context="transformation-map"] .mobile-map{display:block;width:100%;height:auto;aspect-ratio:420/760}
}



.orbit{position:relative;width:min(calc(100vw - 28px),1720px);margin:clamp(4px,1.2vw,14px) auto 0}
@media (max-width:760px){.orbit{width:calc(100vw - 20px)}}
.orbit .stage{width:100%;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
.orbit svg{display:block;width:100%;height:auto;aspect-ratio:1280/672}
.orbit .mobile-map{display:none}
@media (max-width:760px){
  .orbit .desktop-map{display:none}
  .orbit .mobile-map{display:block;width:100%;height:auto;aspect-ratio:420/760}
}