/* Home chapters: "Systems start with people" film + "The distance between data and decisions". */
.ch-serif{font-family:Manrope,'DM Sans',system-ui,sans-serif;font-weight:400;letter-spacing:-.015em}
.ch-label{font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase}

/* ---------- Systems start with people ---------- */














/* ---------- The distance (always night: the burst needs darkness) ---------- */
.distance{position:relative;height:440vh;background:#030812;color:#eef7fc}
.distance-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(70% 60% at 50% 62%,#0a2036 0%,#040b16 60%,#02050b 100%)}
#distance-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.distance-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.distance-labels>*{position:absolute;left:0;top:0;opacity:0;will-change:transform}
.d-tag{font-family:Manrope,'DM Sans',system-ui,sans-serif;font-size:28px;line-height:1;color:#fff;text-align:center;white-space:nowrap}
.d-tag small{display:block;margin-top:8px;font:600 10px Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8fb6ca}
.d-dst{color:#d9fff3}
.d-ruler span{font:600 10px Inter,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#9cc7da;white-space:nowrap}
.d-ruler.is-closed span{color:#7ff0d6}
.d-lane{font:600 10px Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#bfefff;white-space:nowrap;padding:6px 10px;border-radius:99px;background:rgba(10,32,54,.6);border:1px solid rgba(95,216,242,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.d-err{font:500 10px Inter,system-ui,sans-serif;letter-spacing:.06em;color:#ffb27a;white-space:nowrap;padding:5px 8px;border-radius:6px;border:1px dashed rgba(255,154,77,.55);background:rgba(30,12,2,.55)}
.distance-copy{position:absolute;left:6%;top:clamp(110px,16vh,170px);width:min(640px,46vw);z-index:2}
.distance-copy:before{content:'';position:absolute;inset:-60px -80px -60px -40vw;background:radial-gradient(closest-side,rgba(2,6,12,.55),transparent);z-index:-1;pointer-events:none}
.dbeat{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(24px);filter:blur(10px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter .8s}
.dbeat.is-on{opacity:1;transform:none;filter:none}
.dbeat .ch-label{color:#8fd9f2;margin:0 0 20px}
.dbeat .ch-label.warn{color:#ffa45c}
.dbeat h2{font-size:clamp(44px,5vw,84px);line-height:.98;color:#fff;margin:0 0 20px;text-shadow:0 2px 30px rgba(2,6,12,.9)}
.dbeat h2 em{font-style:italic;color:#8fd9f2}
.dbeat p{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:#b3cad8;max-width:500px;margin:0;text-shadow:0 2px 20px rgba(2,6,12,.9)}
@media(max-width:760px){
  .distance{height:400vh}
  .distance-copy{left:20px;right:20px;width:auto;top:auto;bottom:40px;min-height:230px}
  .dbeat{top:auto;bottom:0}
  .dbeat h2{font-size:clamp(34px,9vw,46px)}
  .d-tag{font-size:20px;text-align:left}.d-tag small{max-width:120px;white-space:normal;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.dbeat{transition:none}}

.ch-serif{font-weight:700;letter-spacing:-.05em}
.dbeat h2 em{font-style:normal}
.dbeat h2{line-height:1.02}
.d-tag{font-weight:700;letter-spacing:-.03em;font-size:24px}